// #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 { Iconable } from '../../../Behaviors/Iconable';
import { Labelable } from '../../../Behaviors/Labelable';
import { Orientable } from '../../../Behaviors/Orientable';
import { Rippleable } from '../../../Behaviors/Rippleable';
import { Selectable } from '../../../Behaviors/Selectable';
import { Themeable } from '../../../Behaviors/Themeable';
import { Valueable } from '../../../Behaviors/Valueable';
import { Variantable } from '../../../Behaviors/Variantable';
import { addInheritanceConsumerController } from '../../../Controllers/InheritanceConsumerController';
import { KeyboardController } from '../../../Controllers/KeyboardController';
import { Attribute } from '../../../Decorators/AttributeDecorator';
import { Component } from '../../../Decorators/ComponentDecorator';
import { TabStripPlacement } from '../../../Types/TabStripPlacement';
import { CustomElement } from '../../Abstracts/CustomElement';
import { RippleElement } from '../../Effects/Ripple/RippleElement';
import { StackElement } from '../../Layouts/Stack/StackElement';
import { IconElement } from '../../Media/Icon/IconElement';
import { FocusRingElement } from '../../Primitives/FocusRing/FocusRingElement';
import { TextElement } from '../../Primitives/Text/TextElement';
import { TabStripElement } from './TabStripElement';
import { TAB_STRIP_INHERITANCE_CONTEXT } from './TabStripInheritanceContext';
import { tabStripItemElementTemplate } from './TabStripItemElementTemplate';
import { tabStripItemElementCosmopolitanStyle } from './Themes/TabStripItemElement.Cosmopolitan';
import { tabStripItemElementJoyStyle } from './Themes/TabStripItemElement.Joy';
import { tabStripItemElementMemphisStyle } from './Themes/TabStripItemElement.Memphis';
// #endregion
/**
 * Tab Strip Item - An individual tab navigation button within a tab strip.
 *
 * @description
 * The Tab Strip Item component represents a single clickable tab button within a tab strip navigation.
 * It displays a label, an optional icon, and supports selection states with visual feedback including
 * ripple effects and focus indicators. The component inherits variant, orientation, and placement from
 * its parent tab strip and manages its selected state to control which content panel is visible. Tab
 * strip items support keyboard navigation and provide appropriate ARIA attributes for accessibility.
 *
 * @name Tab Strip Item
 * @element mosaik-tab-strip-item
 * @category Selectors
 *
 * @slot icon - The icon displayed alongside the label
 * @slot label - The text label for the tab
 *
 * @csspart content - The main content wrapper
 * @csspart focusRing - The focus indicator ring for keyboard navigation
 * @csspart icon - The icon display area
 * @csspart innerStack - The inner layout stack for icon and label
 * @csspart label - The text label display area
 * @csspart ripple - The ripple part.
 * @csspart root - The root container element
 *
 * @cssprop {String} --tab-strip-item-background-color - The background fill color
 * @cssprop {String} --tab-strip-item-border-color - The border color
 * @cssprop {String} --tab-strip-item-border-radius - The corner rounding radius
 * @cssprop {String} --tab-strip-item-border-style - The border line style
 * @cssprop {String} --tab-strip-item-border-width - The border thickness
 * @cssprop {String} --tab-strip-item-focus-ring-active-width - The strip item focus ring active width CSS custom property.
 * @cssprop {String} --tab-strip-item-focus-ring-color - The strip item focus ring color CSS custom property.
 * @cssprop {String} --tab-strip-item-focus-ring-inward-offset - The strip item focus ring inward offset CSS custom property.
 * @cssprop {String} --tab-strip-item-focus-ring-outward-offset - The strip item focus ring outward offset CSS custom property.
 * @cssprop {String} --tab-strip-item-font-family - The font family for tab strip item text
 * @cssprop {String} --tab-strip-item-font-letter-spacing - The letter spacing for tab strip item text
 * @cssprop {String} --tab-strip-item-font-line-height - The line height for tab strip item text
 * @cssprop {String} --tab-strip-item-font-size - The font size for tab strip item text
 * @cssprop {String} --tab-strip-item-font-text-decoration - The text decoration style
 * @cssprop {String} --tab-strip-item-font-text-transform - The text transformation style
 * @cssprop {String} --tab-strip-item-font-weight - The font weight for tab strip item text
 * @cssprop {String} --tab-strip-item-foreground-color - The text and icon color
 * @cssprop {String} --tab-strip-item-gap - The spacing between icon and label
 * @cssprop {String} --tab-strip-item-padding-bottom - The bottom padding inside the tab strip item
 * @cssprop {String} --tab-strip-item-padding-left - The left padding inside the tab strip item
 * @cssprop {String} --tab-strip-item-padding-right - The right padding inside the tab strip item
 * @cssprop {String} --tab-strip-item-padding-top - The top padding inside the tab strip item
 * @cssprop {Color} --tab-strip-item-ripple-color - The strip item ripple color CSS custom property.
 * @cssprop {String} --tab-strip-item-ripple-duration - The strip item ripple duration CSS custom property.
 * @cssprop {String} --tab-strip-item-shadow - The drop shadow or elevation effect
 * @cssprop {String} --tab-strip-item-shadow-blur - The strip item shadow blur CSS custom property.
 * @cssprop {String} --tab-strip-item-shadow-color - The strip item shadow color CSS custom property.
 * @cssprop {String} --tab-strip-item-shadow-offset-x - The strip item shadow offset x CSS custom property.
 * @cssprop {String} --tab-strip-item-shadow-offset-y - The strip item shadow offset y CSS custom property.
 * @cssprop {String} --tab-strip-item-shadow-spread - The strip item shadow spread CSS custom property.
 * @cssprop {String} --tab-strip-item-size - The minimum size of the tab strip item
 * @cssprop {String} --tab-strip-item-thickness - The thickness of selection indicators
 * @cssprop {String} --tab-strip-item-transition-duration - The duration of hover/focus transitions
 * @cssprop {String} --tab-strip-item-transition-mode - The timing function for transitions
 * @cssprop {String} --tab-strip-item-transition-property - The CSS properties to transition
 * @cssprop {String} --tab-strip-item-translate - The strip item translate CSS custom property.
 *
 * @fires selected {SelectedEvent} - Fired when the tab strip item is selected
 * @fires deselected {DeselectedEvent} - Fired when the tab strip item is deselected
 * @fires connected {ConnectedEvent} - Fired when connected to the DOM
 * @fires changed {PropertyChangedEvent} - Fired when properties change
 *
 * @dependency mosaik-focus-ring - The Focus Ring element.
 * @dependency mosaik-icon - The Icon element.
 * @dependency mosaik-ripple - The Ripple element.
 * @dependency mosaik-stack - The Stack element.
 * @dependency mosaik-text - The Text element.
 *
 * @example
 * Basic tab strip item with slotted text:
 * ```html
 * <mosaik-tab-strip-item>Overview</mosaik-tab-strip-item>
 * ```
 *
 * @example
 * Tab strip item with icon-position:
 * ```html
 * <mosaik-tab-strip-item icon-position="before">Settings</mosaik-tab-strip-item>
 * ```
 *
 * @example
 * Selected tab strip item:
 * ```html
 * <mosaik-tab-strip-item is-selected variant="primary">Active</mosaik-tab-strip-item>
 * ```
 *
 * @example
 * Tab strip item with badge overlay:
 * ```html
 * <mosaik-tab-strip-item>
 *   Messages
 *   <mosaik-badge slot="overlay"></mosaik-badge>
 * </mosaik-tab-strip-item>
 * ```
 *
 * @public
 */
let TabStripItemElement = class TabStripItemElement extends Themeable(Rippleable(Labelable(Iconable(Focusable(Variantable(Orientable(Selectable(Disableable(Valueable(CustomElement)))))))))) {
    // #region Fields
    _inheritance = addInheritanceConsumerController(this, {
        context: TAB_STRIP_INHERITANCE_CONTEXT
    });
    _keyboardController;
    _placement;
    // #endregion
    // #region Ctor
    /**
     * @public
     */
    constructor() {
        super();
        this._placement = TabStripPlacement.Bottom;
        this._keyboardController = new KeyboardController(this, { capture: true });
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `is` property.
     * The `is` property represents natural name of this element.
     *
     * @public
     * @static
     * @readonly
     */
    static get is() {
        return 'mosaik-tab-strip-item';
    }
    /**
     * @inheritdoc
     * When used inside a TabStrip, inherits the strip's disabled state unless explicitly set.
     *
     * @public
     * @override
     */
    get disabled() {
        return this._inheritance.get('disabled', super.disabled);
    }
    set disabled(value) {
        this._inheritance.markExplicit('disabled');
        super.disabled = value;
    }
    /**
     * @inheritdoc
     * When used inside a TabStrip, inherits the strip's variant unless explicitly set.
     *
     * @public
     * @override
     */
    get variant() {
        return this._inheritance.get('variant', super.variant);
    }
    set variant(value) {
        this._inheritance.markExplicit('variant');
        super.variant = value;
    }
    /**
     * Gets or sets the `placement` property.
     *
     * @public
     * @attr
     */
    get placement() {
        return this._placement;
    }
    set placement(value) {
        if (this._placement !== value) {
            this._placement = value;
            this.requestUpdate('placement');
        }
    }
    /**
     * Gets the `parent` tab strip of this item.
     *
     * @protected
     * @readonly
     */
    get parent() {
        return DomServiceLocator.current.findAncestor(this, TabStripElement.is, { strict: true });
    }
    // #endregion
    // #region Methods
    /**
     * @public
     * @override
     */
    connectedCallback() {
        super.connectedCallback();
        // this._keyboardController
        //     .add(Key.Enter, () => this.emit('click'), () => !this.disabled, { preventDefault: true })
        //     .add(Key.Space, () => this.emit('click'), () => !this.disabled, { preventDefault: true });
    }
    /**
     * @protected
     * @override
     */
    onApplyTemplate() {
        super.onApplyTemplate();
        this.placement = this.parent.placement;
        this.parent.on('changed', (e) => {
            if (e.detail.propertyName === 'placement') {
                this.placement = this.parent.placement;
            }
        });
    }
};
__decorate([
    Attribute({ type: TabStripPlacement }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], TabStripItemElement.prototype, "placement", null);
TabStripItemElement = __decorate([
    Component({
        selector: 'mosaik-tab-strip-item',
        template: tabStripItemElementTemplate,
        themes: {
            joy: tabStripItemElementJoyStyle,
            memphis: tabStripItemElementMemphisStyle,
            cosmopolitan: tabStripItemElementCosmopolitanStyle
        },
        host: {
            role: 'tab',
            tabIndex: '0'
        },
        imports: [
            StackElement,
            IconElement,
            TextElement,
            RippleElement,
            FocusRingElement
        ]
    }),
    __metadata("design:paramtypes", [])
], TabStripItemElement);
export { TabStripItemElement };
//# sourceMappingURL=TabStripItemElement.js.map