import { __esDecorate, __runInitializers } from "tslib";
import { html } from 'lit';
import { property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import UiListItem, { ListItemLines } from '../../list/internals/ListItem.js';
import { nanoid } from 'nanoid';
let UiOption = (() => {
    let _classSuper = UiListItem;
    let _value_decorators;
    let _value_initializers = [];
    let _value_extraInitializers = [];
    let _selected_decorators;
    let _selected_initializers = [];
    let _selected_extraInitializers = [];
    return class UiOption extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _value_decorators = [property({ type: String, reflect: true })];
            _selected_decorators = [property({ type: Boolean, reflect: true })];
            __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_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);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #value_accessor_storage = __runInitializers(this, _value_initializers, void 0);
        /**
         * The value associated with this option. Used to identify the option when selected.
         * This value is what gets set on the parent select element when this option is chosen.
         *
         * @example
         * ```html
         * <ui-option value="apple">Apple</ui-option>
         * <ui-option value="banana">Banana</ui-option>
         * ```
         */
        get value() { return this.#value_accessor_storage; }
        set value(value) { this.#value_accessor_storage = value; }
        #selected_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _selected_initializers, false
        /**
         * Returns the text representation of this option for display purposes.
         * This method extracts and combines text content from all child nodes,
         * including special handling for ui-icon elements.
         *
         * @readonly
         * @returns {string} The rendered text value of the option
         * @example
         * ```javascript
         * const option = document.querySelector('ui-option');
         * console.log('Option text:', option.renderValue);
         * ```
         */
        ));
        /**
         * Whether this option is currently selected. This is typically managed automatically
         * by the parent select component, but can be set manually for styling purposes.
         *
         * @default false
         * @example
         * ```html
         * <ui-option value="apple" selected>Apple</ui-option>
         * ```
         */
        get selected() { return this.#selected_accessor_storage; }
        set selected(value) { this.#selected_accessor_storage = value; }
        /**
         * Returns the text representation of this option for display purposes.
         * This method extracts and combines text content from all child nodes,
         * including special handling for ui-icon elements.
         *
         * @readonly
         * @returns {string} The rendered text value of the option
         * @example
         * ```javascript
         * const option = document.querySelector('ui-option');
         * console.log('Option text:', option.renderValue);
         * ```
         */
        get renderValue() {
            const slot = this.shadowRoot?.querySelector('slot:not([name])');
            if (!slot)
                return this.value || '';
            const nodes = slot.assignedNodes({ flatten: true });
            const content = [];
            for (const node of nodes) {
                if (node.nodeType === Node.TEXT_NODE) {
                    content.push(node.textContent || '');
                }
                else if (node.nodeType === Node.ELEMENT_NODE) {
                    const element = node;
                    if (element.tagName.toLowerCase() === 'ui-icon') {
                        content.push(element.getAttribute('icon') || '');
                    }
                    else {
                        content.push(element.textContent || '');
                    }
                }
            }
            return content.join(' ').trim() || this.value || '';
        }
        constructor() {
            super();
            __runInitializers(this, _selected_extraInitializers);
            this.lines = ListItemLines.auto;
        }
        /**
         * Initializes the option when it's connected to the DOM. Sets up ARIA attributes
         * and generates a unique ID if one isn't provided.
         */
        connectedCallback() {
            super.connectedCallback();
            this.setAttribute('role', 'option');
            if (!this.id) {
                this.id = `option-${nanoid(6)}`;
            }
        }
        /**
         * Handles property updates and triggers appropriate side effects.
         * Currently monitors the `selected` property to update selection state.
         */
        updated(changedProperties) {
            super.updated(changedProperties);
            if (changedProperties.has('selected')) {
                this.updateSelectionState();
            }
        }
        /**
         * Updates the visual and accessibility state when selection changes.
         * Adds/removes CSS classes and ARIA attributes based on selection state.
         *
         * @protected
         * @example
         * ```javascript
         * // This is called automatically when the selected property changes
         * option.selected = true; // Will trigger updateSelectionState()
         * ```
         */
        updateSelectionState() {
            if (this.selected) {
                this.classList.add('selected');
                this.setAttribute('aria-selected', 'true');
            }
            else {
                this.classList.remove('selected');
                this.setAttribute('aria-selected', 'false');
            }
        }
        /**
         * Handles click events on the option. Prevents default behavior and dispatches
         * a custom 'select' event that the parent select component can listen to.
         *
         * @param e - The click event
         * @protected
         * @fires select - Custom event with option details in event.detail
         * @example
         * ```javascript
         * // Listen for option selection
         * option.addEventListener('select', (e) => {
         *   console.log('Selected option:', e.detail.item);
         *   console.log('Selected value:', e.detail.value);
         * });
         * ```
         */
        handleClick(e) {
            e.preventDefault();
            if (this.disabled) {
                e.stopPropagation();
                return;
            }
            // Let the parent handle the selection
            this.dispatchEvent(new CustomEvent('select', {
                detail: {
                    item: this,
                    value: this.value,
                },
                bubbles: false,
                composed: true,
            }));
        }
        getSurfaceClasses() {
            return {
                ...super.getSurfaceClasses(),
                selected: this.selected,
            };
        }
        /**
         * Renders the end section of the option, including the selection check icon
         * when the option is selected.
         */
        renderEnd() {
            return html `
      <div class="${classMap(this.getEndClasses())}">
        ${this.selected ? html `<ui-icon icon="check" class="selection-icon"></ui-icon>` : ''}
        <slot name="end" @slotchange=${this.handleEndSlotChange}></slot>
        <slot name="end-text" class="trailing-supporting-text" @slotchange=${this.handleEndTextSlotChange}></slot>
      </div>
    `;
        }
    };
})();
/**
 * Material Design 3 Select Option component.
 *
 * The `ui-option` component represents a selectable item within a `ui-select` dropdown.
 * It extends `UiListItem` to provide consistent styling and behavior with other list components.
 *
 * @slot - The option content (label, icon, etc.)
 * @slot start - Content to display at the start of the option (icon, avatar, etc.)
 * @slot end - Content to display at the end of the option
 * @slot supporting-text - Supporting text below the main content
 * @fires select - Dispatched when the option is selected. Contains `{ item: UiOption, value: string }` in detail
 *
 * @example
 * Basic option
 * ```html
 * <ui-option value="apple">Apple</ui-option>
 * ```
 *
 * @example
 * Option with supporting text
 * ```html
 * <ui-option value="john" lines="two">
 *   John Doe
 *   <span slot="supporting-text">john@example.com</span>
 * </ui-option>
 * ```
 */
export default UiOption;
//# sourceMappingURL=Option.js.map