// #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 { selectItemElementRetroStyle } from './Themes/SelectItemElement.Retro';
import { selectItemElementCosmopolitanStyle } from './Themes/SelectItemElement.Cosmopolitan';
import { Themeable } from '../../../Behaviors/Themeable';
import { PortalProjectionElement } from '../../Primitives/Portal/PortalProjectionElement';
// #endregion
/**
 * Select Item - An individual option within a dropdown or select element.
 *
 * @element mosaik-select-item
 *
 * @slot start - Slot for placing content before the icon.
 * @slot icon - Slot for placing an icon.
 * @slot label - Slot for placing the label text.
 * @slot end - Slot for placing content after the label.
 *
 * @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.
     *
     * @public
     * @readonly
     * @hidden
     */
    get displayText() {
        return this.label.trim();
    }
    /**
     * 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,
            retro: selectItemElementRetroStyle,
            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