import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-ClISz4NF.js';
import { v as validateProp } from './props-CJZgTDla.js';
import { W as WizardItemClass, c as WizardColors } from './constants-YOtDGTm5.js';
import { c as createID } from './string.utils-vN03FcXN.js';
import { g as govHost, b as booleanString, t as toBoolAttrIfDefined } from './template-CoD1xawt.js';
import './gov.log-BtqD9K8d.js';
import './utils-CQvUntGY.js';
import './colors-U40vKHrs.js';
import './sizes-BcQO4NH2.js';

var Tags;
(function (Tags) {
    Tags["DIV"] = "div";
    Tags["BUTTON"] = "button";
})(Tags || (Tags = {}));
const GovWizardItem = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.govChange = createEvent(this, "gov-change");
        this.hydrated = false;
        /**
         * Style variation of the button.
         */
        this.color = "primary";
        /**
         * Size of wizard
         */
        this.size = "m";
        /**
         * Defines weather the wizard item can be collapsible
         */
        this.collapsible = false;
        /**
         * Makes the wizard component disabled.
         */
        this.disabled = false;
        /**
         * Defines whether the accordion is open or closed by button
         */
        this.isExpanded = false;
        this.h = govHost(this.host);
        this.triggerId = createID("GovWizardItem");
        this.contentId = createID("GovWizardContent");
    }
    validateColor(newValue) {
        validateProp(WizardColors, newValue, WizardItemClass.root);
    }
    emmitChange() {
        this.govChange.emit({ expanded: this.isExpanded, component: WizardItemClass.root });
    }
    componentWillLoad() {
        this.validateColor(this.color);
    }
    connectedCallback() {
        this.hydrated = true;
    }
    render() {
        const triggerId = this.identifier || this.triggerId;
        const Tag = this.collapsible ? Tags.BUTTON : Tags.DIV;
        const prefixSlot = this.h.hasSlot("prefix") && (h("span", { key: '7a71f037abd3c10c7754b96089ca6d6ac9cdd9b8', class: WizardItemClass.prefix }, h("slot", { key: '2098b7afb20be95e403b4306bc904828dd4a038e', name: "prefix" })));
        return (h(Host, { key: '2b152deb4456bad539e85ca2ccf815eefc0cb311', class: this.h.classes(WizardItemClass.root), "is-expanded": this.isExpanded, color: this.color, size: this.size, role: "listitem", collapsible: this.collapsible, hydrated: this.hydrated }, h("div", { key: '8ad3628d1c591c3bb83c7aab740eb4f27b585cdb', class: WizardItemClass.header }, prefixSlot, this.collapsible ? (h(Tag, { id: triggerId, class: this.h.classes(WizardItemClass.label), "aria-expanded": booleanString(this.isExpanded), "aria-controls": this.contentId, disabled: this.disabled, "aria-disabled": toBoolAttrIfDefined(this.disabled), onClick: (e) => {
                e.preventDefault();
                e.stopPropagation();
                this.toggle();
            } }, h("span", { class: WizardItemClass.headline }, h("slot", { name: "headline" }), this.collapsible && h("gov-icon", { class: WizardItemClass.chevron, name: "chevron-down", type: "components" })), h("slot", { name: "annotation" }))) : (h(Tag, { class: this.h.classes(WizardItemClass.label) }, h("span", { class: WizardItemClass.headline }, h("slot", { name: "headline" }), this.collapsible && h("gov-icon", { class: WizardItemClass.chevron, name: "chevron-down", type: "components" })), h("slot", { name: "annotation" })))), this.collapsible ? (h("div", { class: WizardItemClass.content, id: this.contentId, "aria-hidden": booleanString(!this.isExpanded), hidden: !this.isExpanded, "aria-labelledby": triggerId }, h("slot", null))) : (h("div", { class: WizardItemClass.content, "aria-hidden": booleanString(!this.isExpanded), hidden: !this.isExpanded }, h("slot", null)))));
    }
    /**
     * Opening the Wizard
     */
    async open() {
        this.isExpanded = true;
        this.emmitChange();
    }
    /**
     * Closing the Wizard
     */
    async close() {
        this.isExpanded = false;
        this.emmitChange();
    }
    /**
     * Wizard switch
     */
    async toggle() {
        this.isExpanded = !this.isExpanded;
        this.emmitChange();
    }
    /**
     * Returns the current state of the component
     */
    async currentState() {
        return this.isExpanded;
    }
    get host() { return getElement(this); }
    static get watchers() { return {
        "color": ["validateColor"]
    }; }
};

export { GovWizardItem as gov_wizard_item };
//# sourceMappingURL=gov-wizard-item.entry.js.map

//# sourceMappingURL=gov-wizard-item.entry.js.map