import { __esDecorate, __runInitializers } from "tslib";
import { html, nothing } from 'lit';
import { property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { when } from 'lit/directives/when.js';
import { UiElement } from '../../../md/UiElement.js';
import { isDisabled, setDisabled } from '../../../lib/disabled.js';
import '../../../md/focus-ring/ui-focus-ring.js';
import '../../../md/ripple/ui-ripple.js';
let NavigationItem = (() => {
    let _classSuper = UiElement;
    let _instanceExtraInitializers = [];
    let _set_disabled_decorators;
    let _selected_decorators;
    let _selected_initializers = [];
    let _selected_extraInitializers = [];
    let _iconOnly_decorators;
    let _iconOnly_initializers = [];
    let _iconOnly_extraInitializers = [];
    let _href_decorators;
    let _href_initializers = [];
    let _href_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;
            _set_disabled_decorators = [property({ reflect: true, type: Boolean })];
            _selected_decorators = [property({ reflect: true, type: Boolean })];
            _iconOnly_decorators = [property({ reflect: true, type: Boolean })];
            _href_decorators = [property({ reflect: true, type: String })];
            _hasIcon_decorators = [state()];
            __esDecorate(this, null, _set_disabled_decorators, { kind: "setter", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
            __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, _iconOnly_decorators, { kind: "accessor", name: "iconOnly", static: false, private: false, access: { has: obj => "iconOnly" in obj, get: obj => obj.iconOnly, set: (obj, value) => { obj.iconOnly = value; } }, metadata: _metadata }, _iconOnly_initializers, _iconOnly_extraInitializers);
            __esDecorate(this, null, _href_decorators, { kind: "accessor", name: "href", static: false, private: false, access: { has: obj => "href" in obj, get: obj => obj.href, set: (obj, value) => { obj.href = value; } }, metadata: _metadata }, _href_initializers, _href_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,
        };
        get disabled() {
            return isDisabled(this);
        }
        /**
         * When set, the navigation item is in a disabled state.
         * @attribute
         */
        set disabled(value) {
            const old = isDisabled(this);
            setDisabled(this, value);
            this.requestUpdate('disabled', old);
        }
        #selected_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _selected_initializers, false
        /**
         * When set, the navigation item is rendered as an icon-only button.
         * The width of the button is set to 40px.
         * @attribute
         */
        ));
        /**
         * Whether the navigation item is selected.
         * @attribute
         */
        get selected() { return this.#selected_accessor_storage; }
        set selected(value) { this.#selected_accessor_storage = value; }
        #iconOnly_accessor_storage = (__runInitializers(this, _selected_extraInitializers), __runInitializers(this, _iconOnly_initializers, false
        /**
         * The reference of the navigation item to the target.
         * @attribute
         */
        ));
        /**
         * When set, the navigation item is rendered as an icon-only button.
         * The width of the button is set to 40px.
         * @attribute
         */
        get iconOnly() { return this.#iconOnly_accessor_storage; }
        set iconOnly(value) { this.#iconOnly_accessor_storage = value; }
        #href_accessor_storage = (__runInitializers(this, _iconOnly_extraInitializers), __runInitializers(this, _href_initializers, void 0));
        /**
         * The reference of the navigation item to the target.
         * @attribute
         */
        get href() { return this.#href_accessor_storage; }
        set href(value) { this.#href_accessor_storage = value; }
        #hasIcon_accessor_storage = (__runInitializers(this, _href_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,
                'with-icon': this.hasIcon,
                'pressed': pressed,
                'icon-only': this.iconOnly,
            });
            return html `
      <button class="${containerClasses}" id="button" ?disabled="${this.disabled}" aria-disabled="${this.disabled}">
        <ui-focus-ring part="focus-ring" for="button"></ui-focus-ring>
        <ui-ripple></ui-ripple>
        ${this.renderIcon()}${when(this.iconOnly, () => nothing, () => html `<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);
        }
    };
})();
/**
 * NavigationItem
 *
 * An element to be placed inside a navigation bar. This component is designed for use with navigation bars and supports
 * icon-only, selected, and disabled states. It is built with accessibility and composability in mind.
 *
 * ## Accessibility
 *
 * - Uses a native `<button>` element for proper semantics and keyboard accessibility.
 * - The icon is marked with `role="presentation"` to indicate it is decorative.
 * - Focus ring and ripple effects are included for visual feedback.
 *
 * ## Usage Example
 *
 * ### Accessible Navigation Example
 *
 * ```html
 * <nav aria-label="Main navigation">
 *   <ul style="display: flex; gap: 8px; list-style: none; padding: 0; margin: 0;">
 *     <li>
 *       <navigation-item selected aria-current="page">
 *         <span slot="icon" aria-hidden="true">🏠</span>
 *         Home
 *       </navigation-item>
 *     </li>
 *     <li>
 *       <navigation-item>
 *         <span slot="icon" aria-hidden="true">🔍</span>
 *         Search
 *       </navigation-item>
 *     </li>
 *     <li>
 *       <navigation-item>
 *         <span slot="icon" aria-hidden="true">📁</span>
 *         Files
 *       </navigation-item>
 *     </li>
 *     <li>
 *       <navigation-item iconOnly disabled aria-disabled="true" tabindex="-1">
 *         <span slot="icon" aria-hidden="true">⚙️</span>
 *       </navigation-item>
 *     </li>
 *   </ul>
 * </nav>
 * ```
 *
 * This example demonstrates a horizontal navigation bar using semantic HTML. Each `navigation-item`
 * is placed inside a list item for proper structure. The `aria-current="page"` attribute marks the current
 * page, and `aria-disabled="true"` with `tabindex="-1"` ensures the disabled item is not focusable.
 * Icons use `aria-hidden="true"` for accessibility.
 *
 * @slot icon - A slot for the icon element
 * @slot - The default slot for the label
 */
export default NavigationItem;
//# sourceMappingURL=NavigationItem.js.map