es2022 button.js standard decorators

import { __esDecorate, __runInitializers } from '../../node_modules/tslib/tslib.es6.js';
import '../../focus/md-focus-ring.js';
import '../../ripple/ripple.js';
import { isServer, nothing, html as html$1, LitElement } from 'lit';
import { property, query, queryAssignedElements } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { literal, html } from 'lit/static-html.js';
import { requestUpdateOnAriaChange } from '../../internal/aria/delegate.js';
import { internals } from '../../internal/controller/element-internals.js';
import { isActivationClick, dispatchActivationClick } from '../../internal/controller/events.js';
import { setupFormSubmitter } from '../../internal/controller/form-submitter.js';

/**
 * @license
 * Copyright 2019 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */
/**
 * A button component.
 */
let Button = (() => {
    return class Button extends _classSuper {
        static {
            requestUpdateOnAriaChange(Button);
            setupFormSubmitter(Button);
        }
        /** @nocollapse */
        static formAssociated = true;
        /** @nocollapse */
        static shadowRootOptions = { mode: 'open', delegatesFocus: true };
        #disabled_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _disabled_initializers, false));
        /**
         * Whether or not the button is disabled.
         */
        get disabled() { return this.#disabled_accessor_storage; }
        set disabled(value) { this.#disabled_accessor_storage = value; }
        #href_accessor_storage = __runInitializers(this, _href_initializers, '');
        /**
         * The URL that the link button points to.
         */
        get href() { return this.#href_accessor_storage; }
        set href(value) { this.#href_accessor_storage = value; }
        #target_accessor_storage = __runInitializers(this, _target_initializers, '');
        /**
         * Where to display the linked `href` URL for a link button. Common options
         * include `_blank` to open in a new tab.
         */
        get target() { return this.#target_accessor_storage; }
        set target(value) { this.#target_accessor_storage = value; }
        #trailingIcon_accessor_storage = __runInitializers(this, _trailingIcon_initializers, false);
        /**
         * Whether to render the icon at the inline end of the label rather than the
         * inline start.
         *
         * _Note:_ Link buttons cannot have trailing icons.
         */
        get trailingIcon() { return this.#trailingIcon_accessor_storage; }
        set trailingIcon(value) { this.#trailingIcon_accessor_storage = value; }
        #hasIcon_accessor_storage = __runInitializers(this, _hasIcon_initializers, false);
        /**
         * Whether to display the icon or not.
         */
        get hasIcon() { return this.#hasIcon_accessor_storage; }
        set hasIcon(value) { this.#hasIcon_accessor_storage = value; }
        #type_accessor_storage = __runInitializers(this, _type_initializers, 'submit');
        get type() { return this.#type_accessor_storage; }
        set type(value) { this.#type_accessor_storage = value; }
        #value_accessor_storage = __runInitializers(this, _value_initializers, '');
        get value() { return this.#value_accessor_storage; }
        set value(value) { this.#value_accessor_storage = value; }
        get name() {
            return this.getAttribute('name') ?? '';
        }
        set name(name) {
            this.setAttribute('name', name);
        }
        /**
         * The associated form element with which this element's value will submit.
         */
        get form() {
            return this[internals].form;
        }
        #buttonElement_accessor_storage = __runInitializers(this, _buttonElement_initializers, void 0);
        get buttonElement() { return this.#buttonElement_accessor_storage; }
        set buttonElement(value) { this.#buttonElement_accessor_storage = value; }
        #assignedIcons_accessor_storage = __runInitializers(this, _assignedIcons_initializers, void 0);
        get assignedIcons() { return this.#assignedIcons_accessor_storage; }
        set assignedIcons(value) { this.#assignedIcons_accessor_storage = value; }
        /** @private */
        [(_disabled_decorators = [property({ type: Boolean, reflect: true })], _href_decorators = [property()], _target_decorators = [property()], _trailingIcon_decorators = [property({ type: Boolean, attribute: 'trailing-icon' })], _hasIcon_decorators = [property({ type: Boolean, attribute: 'has-icon' })], _type_decorators = [property()], _value_decorators = [property()], _buttonElement_decorators = [query('.button')], _assignedIcons_decorators = [queryAssignedElements({ slot: 'icon', flatten: true })], internals)] = this /* needed for closure */.attachInternals();
        constructor() {
            super();
            if (!isServer) {
                this.addEventListener('click', this.handleActivationClick);
            }
        }
        focus() {
            this.buttonElement?.focus();
        }
        blur() {
            this.buttonElement?.blur();
        }
        render() {
            // Link buttons may not be disabled
            const isDisabled = this.disabled && !this.href;
            const button = this.href ? literal `a` : literal `button`;
            // Needed for closure conformance
            const { ariaLabel, ariaHasPopup, ariaExpanded } = this;
            return html `
      <${button}
        class="button ${classMap(this.getRenderClasses())}"
        ?disabled=${isDisabled}
        aria-label="${ariaLabel || nothing}"
        aria-haspopup="${ariaHasPopup || nothing}"
        aria-expanded="${ariaExpanded || nothing}"
        href=${this.href || nothing}
        target=${this.target || nothing}
      >${this.renderContent()}</${button}>`;
        }
        getRenderClasses() {
            return {
                'button--icon-leading': !this.trailingIcon && this.hasIcon,
                'button--icon-trailing': this.trailingIcon && this.hasIcon,
            };
        }
        renderContent() {
            // Link buttons may not be disabled
            const isDisabled = this.disabled && !this.href;
            const icon = html$1 `<slot name="icon" @slotchange="${this.handleSlotChange}"></slot>`;
            return html$1 `
      ${this.renderElevation?.()}
      ${this.renderOutline?.()}
      <md-focus-ring part="focus-ring"></md-focus-ring>
      <md-ripple class="button__ripple" ?disabled="${isDisabled}"></md-ripple>
      <span class="touch"></span>
      ${this.trailingIcon ? nothing : icon}
      <span class="button__label"><slot></slot></span>
      ${this.trailingIcon ? icon : nothing}
    `;
        }
        handleActivationClick = (event) => {
            if (!isActivationClick((event)) || !this.buttonElement) {
                return;
            }
            this.focus();
            dispatchActivationClick(this.buttonElement);
        };
        handleSlotChange() {
            this.hasIcon = this.assignedIcons.length > 0;
        }
    };
})();

export { Button };