import { __esDecorate, __runInitializers } from "tslib";
import { html } from 'lit';
import { property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { UiElement } from '../../../md/UiElement.js';
let NavigationItem = (() => {
    let _classSuper = UiElement;
    let _disabled_decorators;
    let _disabled_initializers = [];
    let _disabled_extraInitializers = [];
    let _selected_decorators;
    let _selected_initializers = [];
    let _selected_extraInitializers = [];
    let _hasIcon_decorators;
    let _hasIcon_initializers = [];
    let _hasIcon_extraInitializers = [];
    return class NavigationItem extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _disabled_decorators = [property({ reflect: true, type: Boolean })];
            _selected_decorators = [property({ reflect: true, type: Boolean })];
            _hasIcon_decorators = [state()];
            __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
            __esDecorate(this, null, _selected_decorators, { kind: "accessor", name: "selected", static: false, private: false, access: { has: obj => "selected" in obj, get: obj => obj.selected, set: (obj, value) => { obj.selected = value; } }, metadata: _metadata }, _selected_initializers, _selected_extraInitializers);
            __esDecorate(this, null, _hasIcon_decorators, { kind: "accessor", name: "hasIcon", static: false, private: false, access: { has: obj => "hasIcon" in obj, get: obj => obj.hasIcon, set: (obj, value) => { obj.hasIcon = value; } }, metadata: _metadata }, _hasIcon_initializers, _hasIcon_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        static shadowRootOptions = {
            mode: 'open',
            delegatesFocus: true,
        };
        #disabled_accessor_storage = __runInitializers(this, _disabled_initializers, false
        /**
         * Whether the navigation item is selected.
         * @attribute
         */
        );
        /**
         * When set, the button is a disabled state.
         * @attribute
         */
        get disabled() { return this.#disabled_accessor_storage; }
        set disabled(value) { this.#disabled_accessor_storage = value; }
        #selected_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _selected_initializers, false
        /**
         * Determines when the element has an icon in the "icon" slot.
         */
        ));
        /**
         * Whether the navigation item is selected.
         * @attribute
         */
        get selected() { return this.#selected_accessor_storage; }
        set selected(value) { this.#selected_accessor_storage = value; }
        #hasIcon_accessor_storage = (__runInitializers(this, _selected_extraInitializers), __runInitializers(this, _hasIcon_initializers, false
        /**
         * Sets the `_hasIcon` state property when the "icon" slot change event is dispatched.
         */
        ));
        /**
         * Determines when the element has an icon in the "icon" slot.
         */
        get hasIcon() { return this.#hasIcon_accessor_storage; }
        set hasIcon(value) { this.#hasIcon_accessor_storage = value; }
        /**
         * Sets the `_hasIcon` state property when the "icon" slot change event is dispatched.
         */
        handleIconSlotChange(e) {
            const slot = e.target;
            this.hasIcon = !!slot.assignedNodes().length;
        }
        render() {
            const { pressed = false } = this;
            const containerClasses = classMap({
                button: true,
                icon: this.hasIcon,
                pressed,
            });
            return html `
      <button class="${containerClasses}" id="button">
        <md-focus-ring part="focus-ring" for="button"></md-focus-ring>
        <md-ripple></md-ripple>
        ${this.renderIcon()}
        <slot></slot>
      </button>
    `;
        }
        renderIcon() {
            return html `<span role="presentation" class="icon"
      ><slot name="icon" @slotchange="${this.handleIconSlotChange}"></slot
    ></span>`;
        }
        constructor() {
            super(...arguments);
            __runInitializers(this, _hasIcon_extraInitializers);
        }
    };
})();
export default NavigationItem;
//# sourceMappingURL=NavigationItem.js.map