es2022 button.js compiled decorators experiment

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 = (() => {
    let _classSuper = LitElement;
    return class Button extends _classSuper {
        static {
            requestUpdateOnAriaChange(Button);
            setupFormSubmitter(Button);
        }
        /** @nocollapse */
        static formAssociated = true;
        /** @nocollapse */
        static shadowRootOptions = { mode: 'open', delegatesFocus: true };
        #disabled = false
        /**
         * Whether or not the button is disabled.
         */
        get disabled() { return this.#disabled; }
        set disabled(value) { const old = this.disabled; this.#disabled = value; this.requestUpdate('disabled', old, {type: Boolean, reflect: true});}
        #href = '';
        /**
         * The URL that the link button points to.
         */
        get href() { return this.#href; }
        set href(value) { const old = this.href; this.#href = value; this.requestUpdate('href', old, {});}
        #target = '';
        /**
         * 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; }
        set target(value) { const old = this.target; this.#target = value; this.requestUpdate('target', name, {});}
        #trailingIcon = 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; }
        set trailingIcon(value) { const old = this.trailingIcon; this.#trailingIcon = value; this.requestUpdate('trailingIcon', old, {type: Boolean, attribute: 'trailing-icon'})};}
        #hasIcon = false;
        /**
         * Whether to display the icon or not.
         */
        get hasIcon() { return this.#hasIcon; }
        set hasIcon(value) { const old = this.hasIcon; this.#hasIcon = value; this.requestUpdate('hasIcon', old, {type: Boolean, attribute: 'has-icon'});}
        #type = 'submit';
        get type() { return this.#type; }
        set type(value) { const old = this.type; this.#type = value; this.requestUpdate('type', old, {});}
        #value = '';
        get value() { return this.#value; }
        set value(value) { const old = this.value; this.#value = value; this.requestUpdate('value', old, {});}
        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;
        }
        get buttonElement() { return this.shadowRoot.querySelector('.button'); }
        get assignedIcons() { return this.shadowRoot.querySelector('slot[name=icon]').assignedElements({flatten: true}); }
        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 };