// #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 { fadeIn, fadeOut } from '../../../../Animations/Presets/Fade';
import { DomServiceLocator } from '../../../../Dom/Dom';
import { Animatable } from '../../../Behaviors/Animatable';
import { Attribute } from '../../../Decorators/AttributeDecorator';
import { Component } from '../../../Decorators/ComponentDecorator';
import { Watch } from '../../../Decorators/WatchDecorator';
import { Themeable } from '../../../Behaviors/Themeable';
import { SelectorItemElement } from '../Abstracts/Selector/SelectorItemElement';
import { stepperItemElementTemplate } from './StepperItemElementTemplate';
import { StepperElement } from './StepperElement';
import { stepperItemElementJoyStyle } from './Themes/StepperItemElement.Joy';
import { stepperItemElementCosmopolitanStyle } from './Themes/StepperItemElement.Cosmopolitan';
import { stepperItemElementMemphisStyle } from './Themes/StepperItemElement.Memphis';
import { Disableable } from '../../../Behaviors/Disableable';
import { Property } from '../../../Decorators/PropertyDecorator';
// #endregion
/**
 * Stepper Item - A single step panel within a Stepper workflow component.
 *
 * @description
 * The Stepper Item component represents an individual step within a multi-step workflow. It displays
 * the content for a specific step and includes properties for defining the step's header, description,
 * hint text, icon, and current state (pending, completed, error). The component supports animated
 * transitions when switching between steps and provides a footer slot for step-specific action buttons.
 * Each stepper item is managed by its parent stepper component for activation and navigation.
 *
 * @name Stepper Item
 * @element mosaik-stepper-item
 * @category Selectors
 *
 * @slot - The default slot for the main step content
 * @slot footer - Action buttons or navigation controls for this step
 *
 * @csspart panel - The main panel container
 * @csspart content - The content area wrapper
 * @csspart footer - The footer container
 *
 * @cssprop {String} --stepper-item-font-family - The font family for stepper item text
 * @cssprop {String} --stepper-item-panel-padding - The padding inside the panel
 * @cssprop {String} --stepper-item-panel-radius - The border radius of the panel
 * @cssprop {String} --stepper-item-panel-shadow - The drop shadow or elevation effect
 * @cssprop {String} --stepper-item-gap - The spacing between content and footer
 *
 * @dependency {StepperElement} - Parent stepper component (accessed via parent property)
 *
 * @fires connected {ConnectedEvent} - Fired when connected to the DOM
 * @fires changed {PropertyChangedEvent} - Fired when properties change
 *
 * @example
 * Basic stepper item:
 * ```html
 * <mosaik-stepper-item header="Personal Info">
 *   <mosaik-form>
 *     <mosaik-input label="Name"></mosaik-input>
 *     <mosaik-input label="Email"></mosaik-input>
 *   </mosaik-form>
 * </mosaik-stepper-item>
 * ```
 *
 * @example
 * Stepper item with description and footer:
 * ```html
 * <mosaik-stepper-item
 *   header="Review Details"
 *   description="Please review and confirm your information">
 *   <p>Your information will be saved.</p>
 *   <div slot="footer">
 *     <mosaik-button label="Back"></mosaik-button>
 *     <mosaik-button label="Confirm" variant="primary"></mosaik-button>
 *   </div>
 * </mosaik-stepper-item>
 * ```
 *
 * @example
 * Stepper item with custom icon and state:
 * ```html
 * <mosaik-stepper-item
 *   header="Upload Files"
 *   icon="upload-icon"
 *   state="completed"
 *   hint="Optional">
 *   <mosaik-file-upload></mosaik-file-upload>
 * </mosaik-stepper-item>
 * ```
 *
 * @public
 */
let StepperItemElement = class StepperItemElement extends Themeable(Animatable(Disableable(SelectorItemElement))) {
    // #region Fields
    _header;
    _description;
    _hint;
    _icon;
    _state;
    _isActive;
    // #endregion
    // #region Ctor
    /**
     * @public
     */
    constructor() {
        super();
        this._header = '';
        this._description = '';
        this._hint = '';
        this._icon = '';
        this._state = 'pending';
        this._isActive = false;
        this.enter = fadeIn;
        this.exit = fadeOut;
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `{@link is}` property.
     *
     * @public
     * @static
     * @override
     * @readonly
     */
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    static get is() {
        return 'mosaik-stepper-item';
    }
    /**
     * Gets or sets the `header` property.
     *
     * @public
     * @attr
     */
    get header() {
        return this._header;
    }
    set header(value) {
        if (this._header !== value) {
            this._header = value;
            this.requestUpdate('header');
        }
    }
    /**
     * Gets or sets the `description` property.
     *
     * @public
     * @attr
     */
    get description() {
        return this._description;
    }
    set description(value) {
        if (this._description !== value) {
            this._description = value;
            this.requestUpdate('description');
        }
    }
    /**
     * Gets or sets the `hint` property.
     *
     * @public
     * @attr
     */
    get hint() {
        return this._hint;
    }
    set hint(value) {
        if (this._hint !== value) {
            this._hint = value;
            this.requestUpdate('hint');
        }
    }
    /**
     * 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 `state` property.
     *
     * @public
     * @attr
     */
    get state() {
        return this._state;
    }
    set state(value) {
        if (this._state !== value) {
            this._state = value;
            this.requestUpdate('state');
        }
    }
    /**
     * 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');
        }
    }
    /**
     * Get the item parent.
     *
     * @protected
     * @readonly
     */
    get parent() {
        return DomServiceLocator.current.findAncestor(this, StepperElement.is, { strict: true });
    }
    // #endregion
    // #region Methods
    /**
     * @public
     * @override
     */
    connectedCallback() {
        super.connectedCallback();
        void this.play(this.enter ?? { steps: [] });
    }
    /**
     * @public
     * @override
     */
    disconnectedCallback() {
        void this.play(this.exit ?? { steps: [] });
        super.disconnectedCallback();
    }
    /**
     * @protected
     */
    onIsActivePropertyChanged(_prev, next) {
        if (next) {
            void this.updateComplete.then(() => {
                const index = this.parent.items.indexOf(this);
                this.parent.select(index);
            });
        }
    }
};
__decorate([
    Attribute({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], StepperItemElement.prototype, "header", null);
__decorate([
    Attribute({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], StepperItemElement.prototype, "description", null);
__decorate([
    Attribute({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], StepperItemElement.prototype, "hint", null);
__decorate([
    Property({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], StepperItemElement.prototype, "icon", null);
__decorate([
    Attribute({
        type: String,
        useDefault: true
    }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], StepperItemElement.prototype, "state", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], StepperItemElement.prototype, "isActive", null);
__decorate([
    Watch('isActive'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Boolean, Boolean]),
    __metadata("design:returntype", void 0)
], StepperItemElement.prototype, "onIsActivePropertyChanged", null);
StepperItemElement = __decorate([
    Component({
        selector: 'mosaik-stepper-item',
        template: stepperItemElementTemplate,
        themes: {
            joy: stepperItemElementJoyStyle,
            memphis: stepperItemElementMemphisStyle,
            cosmopolitan: stepperItemElementCosmopolitanStyle
        },
        host: {
            role: 'tabpanel',
            slot: 'steps'
        },
        imports: []
    }),
    __metadata("design:paramtypes", [])
], StepperItemElement);
export { StepperItemElement };
//# sourceMappingURL=StepperItemElement.js.map