// #region Imports
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { DomServiceLocator } from '../../../../Dom/Dom';
import { Disableable } from '../../../Behaviors/Disableable';
import { Focusable } from '../../../Behaviors/Focusable';
import { Labelable } from '../../../Behaviors/Labelable';
import { Valueable } from '../../../Behaviors/Valueable';
import { Variantable } from '../../../Behaviors/Variantable';
import { Attribute } from '../../../Decorators/AttributeDecorator';
import { Component } from '../../../Decorators/ComponentDecorator';
import { Property } from '../../../Decorators/PropertyDecorator';
import { Watch } from '../../../Decorators/WatchDecorator';
import { RippleElement } from '../../Effects/Ripple/RippleElement';
import { IconElement } from '../../Media/Icon/IconElement';
import { FocusRingElement } from '../../Primitives/FocusRing/FocusRingElement';
import { TextElement } from '../../Primitives/Text/TextElement';
import { SelectorItemElement } from '../../Selectors/Abstracts/Selector/SelectorItemElement';
import { selectItemElementTemplate } from './SelectItemElementTemplate';
import { selectItemElementJoyStyle } from './Themes/SelectItemElement.Joy';
import { selectItemElementMemphisStyle } from './Themes/SelectItemElement.Memphis';
import { selectItemElementCosmopolitanStyle } from './Themes/SelectItemElement.Cosmopolitan';
import { Themeable } from '../../../Behaviors/Themeable';
import { PortalProjectionElement } from '../../Primitives/Portal/PortalProjectionElement';
// #endregion
/**
 * Select Item - An individual selectable option within dropdown select menus.
 *
 * @description
 * The Select Item component represents a single option within a select dropdown menu.
 * It provides comprehensive interaction states including focus, hover, selection, and
 * activation with visual feedback through ripple effects and focus rings. The component
 * supports icons, custom labels, and slot-based content organization with start, icon,
 * label, and end slots. When selected, a checkmark indicator appears to provide clear
 * visual confirmation. The component automatically manages ARIA attributes for
 * accessibility and integrates with the parent Select element through portal projection.
 * It displays either the label attribute or falls back to text content for flexibility.
 *
 * @name Select Item
 * @element mosaik-select-item
 * @category Selectors
 *
 * @slot start - Content placed before the icon (e.g., status indicators, badges)
 * @slot icon - The icon display area alongside the label
 * @slot label - The primary text label for the option
 * @slot end - Content placed after the label (e.g., shortcuts, metadata)
 *
 * @csspart focusRing - The keyboard focus indicator ring
 * @csspart ripple - The touch feedback ripple effect container
 * @csspart checkmark - The selection indicator checkmark
 *
 * @cssprop {String} --select-item-background-color - The background color of the option
 * @cssprop {String} --select-item-foreground-color - The text and icon color
 * @cssprop {String} --select-item-border-color - The border color
 * @cssprop {String} --select-item-border-width - The border thickness
 * @cssprop {String} --select-item-border-style - The border line style
 * @cssprop {String} --select-item-border-radius - The corner rounding radius
 * @cssprop {String} --select-item-font-family - The font family for option text
 * @cssprop {String} --select-item-font-size - The font size for option text
 * @cssprop {String} --select-item-font-weight - The font weight for option text
 * @cssprop {String} --select-item-padding-top - The top padding inside the option
 * @cssprop {String} --select-item-padding-right - The right padding inside the option
 * @cssprop {String} --select-item-padding-bottom - The bottom padding inside the option
 * @cssprop {String} --select-item-padding-left - The left padding inside the option
 * @cssprop {String} --select-item-gap - The spacing between icon and label elements
 * @cssprop {String} --select-item-shadow - The drop shadow or elevation effect
 * @cssprop {String} --select-item-transition-duration - The duration of hover/focus transitions
 * @cssprop {String} --select-item-transition-mode - The timing function for transitions
 * @cssprop {String} --select-item-transition-property - The CSS properties to transition
 * @cssprop {String} --select-item-focus-ring-color - The focus ring color (from focusRing mixin)
 * @cssprop {String} --select-item-focus-ring-inward-offset - The focus ring inward offset (from focusRing mixin)
 * @cssprop {String} --select-item-focus-ring-outward-offset - The focus ring outward offset (from focusRing mixin)
 * @cssprop {String} --select-item-focus-ring-active-width - The focus ring width when active (from focusRing mixin)
 * @cssprop {String} --select-item-ripple-color - The ripple effect color (from ripple mixin)
 * @cssprop {String} --select-item-ripple-duration - The ripple animation duration (from ripple mixin)
 *
 * @dependency {TextElement} - Text rendering component for option labels
 * @dependency {FocusRingElement} - Keyboard focus indicator component
 * @dependency {RippleElement} - Touch feedback effect component
 * @dependency {IconElement} - Icon display component for option graphics
 *
 * @example
 * Basic select item with label:
 * ```html
 * <mosaik-select-item label="Option 1" value="opt1"></mosaik-select-item>
 * ```
 *
 * @example
 * Select item with icon:
 * ```html
 * <mosaik-select-item label="User Profile"
 *                     value="profile"
 *                     icon="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10..."></mosaik-select-item>
 * ```
 *
 * @example
 * Select item using text content:
 * ```html
 * <mosaik-select-item value="home">Home</mosaik-select-item>
 * ```
 *
 * @example
 * Selected item with variant:
 * ```html
 * <mosaik-select-item label="Premium Plan"
 *                     value="premium"
 *                     is-selected
 *                     is-active
 *                     variant="primary"></mosaik-select-item>
 * ```
 *
 * @example
 * Item with custom content slots:
 * ```html
 * <mosaik-select-item value="advanced">
 *   <mosaik-icon slot="start" data="star-icon"></mosaik-icon>
 *   <span slot="label">Advanced Features</span>
 *   <kbd slot="end">⌘A</kbd>
 * </mosaik-select-item>
 * ```
 *
 * @public
 */
let SelectItemElement = class SelectItemElement extends Themeable(Disableable(Valueable(Variantable(Focusable(Labelable(SelectorItemElement)))))) {
    // #region Fields
    _icon;
    _isActive;
    // #endregion
    // #region Ctor
    /**
     * @public
     */
    constructor() {
        super();
        this._icon = '';
        this._isActive = false;
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `{@link is}` property.
     * The `{@link is}` property represents natural name of this element.
     *
     * @public
     * @static
     * @override
     * @readonly
     */
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    static get is() {
        return 'mosaik-select-item';
    }
    /**
     * Gets or sets the `icon` property.
     *
     * @public
     */
    get icon() {
        return this._icon;
    }
    set icon(value) {
        if (this._icon !== value) {
            this._icon = value;
            this.requestUpdate('icon');
        }
    }
    /**
     * Gets or sets the `isActive` property.
     *
     * @public
     * @attr
     */
    get isActive() {
        return this._isActive;
    }
    set isActive(value) {
        if (this._isActive !== value) {
            this._isActive = value;
            this.requestUpdate('isActive');
        }
    }
    /**
     * Gets the `displayText` property.
     * Falls back to text content if label is empty.
     *
     * @public
     * @readonly
     * @hidden
     */
    get displayText() {
        const label = this.label.trim();
        // Fallback to text content if label attribute is not set
        if (!label) {
            return this.textContent.trim();
        }
        return label;
    }
    /**
     * Get the item parent.
     *
     * @protected
     * @readonly
     */
    get parent() {
        const projection = DomServiceLocator.current.findAncestor(this, PortalProjectionElement.is, { strict: true });
        const parent = DomServiceLocator.current.findShadowDomHost(projection.portal, { strict: true });
        return parent;
    }
    // #endregion
    // #region Methods
    /**
     * @protected
     */
    onSelectedPropertyChange() {
        if (this.isSelected) {
            this.setAttribute('aria-selected', 'true');
        }
        else {
            this.removeAttribute('aria-selected');
        }
        this.isActive = this.isSelected;
    }
    /**
     * @protected
     */
    onIsActivePropertyChange() {
        this.tabIndex = this.isActive ? 0 : -1;
        if (this.isActive) {
            this.focus();
        }
    }
};
__decorate([
    Property({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], SelectItemElement.prototype, "icon", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], SelectItemElement.prototype, "isActive", null);
__decorate([
    Watch('isSelected'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], SelectItemElement.prototype, "onSelectedPropertyChange", null);
__decorate([
    Watch('isActive'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], SelectItemElement.prototype, "onIsActivePropertyChange", null);
SelectItemElement = __decorate([
    Component({
        selector: 'mosaik-select-item',
        themes: {
            joy: selectItemElementJoyStyle,
            memphis: selectItemElementMemphisStyle,
            cosmopolitan: selectItemElementCosmopolitanStyle
        },
        template: selectItemElementTemplate,
        host: {
            'tabIndex': '0',
            'role': 'option',
            'aria-selected': 'false'
        },
        imports: [
            TextElement,
            FocusRingElement,
            RippleElement,
            IconElement
        ]
    }),
    __metadata("design:paramtypes", [])
], SelectItemElement);
export { SelectItemElement };
//# sourceMappingURL=SelectItemElement.js.map