'use strict';

var index = require('./index-BEF5cZxd.js');
var props = require('./props-CPENhBnM.js');
var constants = require('./constants-ymB2dvwV.js');
var string_utils = require('./string.utils-BG4pUfEi.js');
var template = require('./template-Cj6PcLmR.js');
require('./gov.log-C5EH15b_.js');
require('./utils-NnC78QR3.js');
require('./colors-DgrrxjsX.js');
require('./sizes-D5zsw2g5.js');

var Tags;
(function (Tags) {
    Tags["DIV"] = "div";
    Tags["BUTTON"] = "button";
})(Tags || (Tags = {}));
const GovWizardItem = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.govChange = index.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 = template.govHost(this.host);
        this.triggerId = string_utils.createID("GovWizardItem");
        this.contentId = string_utils.createID("GovWizardContent");
    }
    validateColor(newValue) {
        props.validateProp(constants.WizardColors, newValue, constants.WizardItemClass.root);
    }
    emmitChange() {
        this.govChange.emit({ expanded: this.isExpanded, component: constants.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") && (index.h("span", { key: '7a71f037abd3c10c7754b96089ca6d6ac9cdd9b8', class: constants.WizardItemClass.prefix }, index.h("slot", { key: '2098b7afb20be95e403b4306bc904828dd4a038e', name: "prefix" })));
        return (index.h(index.Host, { key: '2b152deb4456bad539e85ca2ccf815eefc0cb311', class: this.h.classes(constants.WizardItemClass.root), "is-expanded": this.isExpanded, color: this.color, size: this.size, role: "listitem", collapsible: this.collapsible, hydrated: this.hydrated }, index.h("div", { key: '8ad3628d1c591c3bb83c7aab740eb4f27b585cdb', class: constants.WizardItemClass.header }, prefixSlot, this.collapsible ? (index.h(Tag, { id: triggerId, class: this.h.classes(constants.WizardItemClass.label), "aria-expanded": template.booleanString(this.isExpanded), "aria-controls": this.contentId, disabled: this.disabled, "aria-disabled": template.toBoolAttrIfDefined(this.disabled), onClick: (e) => {
                e.preventDefault();
                e.stopPropagation();
                this.toggle();
            } }, index.h("span", { class: constants.WizardItemClass.headline }, index.h("slot", { name: "headline" }), this.collapsible && index.h("gov-icon", { class: constants.WizardItemClass.chevron, name: "chevron-down", type: "components" })), index.h("slot", { name: "annotation" }))) : (index.h(Tag, { class: this.h.classes(constants.WizardItemClass.label) }, index.h("span", { class: constants.WizardItemClass.headline }, index.h("slot", { name: "headline" }), this.collapsible && index.h("gov-icon", { class: constants.WizardItemClass.chevron, name: "chevron-down", type: "components" })), index.h("slot", { name: "annotation" })))), this.collapsible ? (index.h("div", { class: constants.WizardItemClass.content, id: this.contentId, "aria-hidden": template.booleanString(!this.isExpanded), hidden: !this.isExpanded, "aria-labelledby": triggerId }, index.h("slot", null))) : (index.h("div", { class: constants.WizardItemClass.content, "aria-hidden": template.booleanString(!this.isExpanded), hidden: !this.isExpanded }, index.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 index.getElement(this); }
    static get watchers() { return {
        "color": ["validateColor"]
    }; }
};

exports.gov_wizard_item = GovWizardItem;
//# sourceMappingURL=gov-wizard-item.entry.cjs.js.map

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