import { h, Host } from "@stencil/core";
import { validateProp } from "../../helpers/Validate/props";
import { WizardColors, WizardItemClass } from "./constants";
import { createID } from "../../utils/string.utils";
import { booleanString, govHost, toBoolAttrIfDefined } from "../../helpers/Dom/template";
var Tags;
(function (Tags) {
    Tags["DIV"] = "div";
    Tags["BUTTON"] = "button";
})(Tags || (Tags = {}));
export class GovWizardItem {
    constructor() {
        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;
    }
    static get is() { return "gov-wizard-item"; }
    static get properties() {
        return {
            "color": {
                "type": "string",
                "attribute": "color",
                "mutable": false,
                "complexType": {
                    "original": "WizardColorType",
                    "resolved": "\"error\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"",
                    "references": {
                        "WizardColorType": {
                            "location": "import",
                            "path": "./constants",
                            "id": "../../../packages/core/src/components/gov-wizard/constants.ts::WizardColorType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Style variation of the button."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "\"primary\""
            },
            "size": {
                "type": "string",
                "attribute": "size",
                "mutable": false,
                "complexType": {
                    "original": "WizardSizesType",
                    "resolved": "\"l\" | \"m\" | \"s\"",
                    "references": {
                        "WizardSizesType": {
                            "location": "import",
                            "path": "./constants",
                            "id": "../../../packages/core/src/components/gov-wizard/constants.ts::WizardSizesType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Size of wizard"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "\"m\""
            },
            "identifier": {
                "type": "string",
                "attribute": "identifier",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Custom wizard item identifier. Otherwise, it will be generated"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "collapsible": {
                "type": "boolean",
                "attribute": "collapsible",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines weather the wizard item can be collapsible"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "attribute": "disabled",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Makes the wizard component disabled."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "isExpanded": {
                "type": "boolean",
                "attribute": "is-expanded",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines whether the accordion is open or closed by button"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get events() {
        return [{
                "method": "govChange",
                "name": "gov-change",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Called when the accordion state changes"
                },
                "complexType": {
                    "original": "WizardItemEvent",
                    "resolved": "WizardItemEvent",
                    "references": {
                        "WizardItemEvent": {
                            "location": "import",
                            "path": "./gov-wizard-item.types",
                            "id": "../../../packages/core/src/components/gov-wizard/gov-wizard-item.types.ts::WizardItemEvent"
                        }
                    }
                }
            }];
    }
    static get methods() {
        return {
            "open": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Opening the Wizard",
                    "tags": []
                }
            },
            "close": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Closing the Wizard",
                    "tags": []
                }
            },
            "toggle": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Wizard switch",
                    "tags": []
                }
            },
            "currentState": {
                "complexType": {
                    "signature": "() => Promise<boolean>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<boolean>"
                },
                "docs": {
                    "text": "Returns the current state of the component",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "color",
                "methodName": "validateColor"
            }];
    }
}
//# sourceMappingURL=gov-wizard-item.js.map
