import { h, Host } from "@stencil/core";
import { validateProp } from "../../../helpers/Validate/props";
import { StepperItemClass, StepperColors } from "./constants";
import { createID } from "../../../utils/string.utils";
import { govHost } from "../../../helpers/Dom/template";
export class GovStepperItem {
    constructor() {
        this.hydrated = false;
        /**
         * Style variation of the button.
         */
        this.color = 'primary';
        /**
         * Size of stepper
         */
        this.size = 'm';
        this.h = govHost(this.host);
        this.triggerId = createID('GovStepperItem');
        this.contentId = createID('GovStepperContent');
    }
    validateColor(newValue) {
        validateProp(StepperColors, newValue, StepperItemClass.root);
    }
    componentWillLoad() {
        this.validateColor(this.color);
    }
    connectedCallback() {
        this.hydrated = true;
    }
    render() {
        const triggerId = this.identifier || this.triggerId;
        const contentId = this.contentId;
        return (h(Host, { key: '609a7f8b92363c1de962f2260d36fc674bd4c193', id: triggerId, class: this.h.classes(StepperItemClass.root), color: this.color, role: "listitem", hydrated: this.hydrated }, h("div", { key: '5afa6db421d268ff22727bedff02fe7e37273b7c' }, h("div", { key: 'f09a6804198fbf9a37b0553bf0539e26dd28d9f4', class: StepperItemClass.steps }, h("span", { key: 'e9f495a434501d1b5f7ac65fb757cca181156814' }), h("span", { key: 'bb3b4bd8d1e613090f9e369a72c20e04eeaad1a9', class: StepperItemClass.prefix }, h("slot", { key: '5d8ee1538f9232cc62d76b1aa2497195732c0b7f', name: "prefix" })), h("span", { key: 'cb3c58492c7190ae67770ed411bf154e831573ca' })), h("div", { key: '5747894f97b0ff23250ead28081410404bfbd0a8', class: StepperItemClass.main }, h("span", { key: '801116e18ad8b6543ceb9106195f5baed23170ee', class: StepperItemClass.headline }, h("slot", { key: '5e032e03983befdeddfa82f3756b7677549cfd53', name: "headline" })), h("slot", { key: '81ae890926e9966125ef3869da9c0230faf7b8a7', name: "annotation" }), this.h.hasSlot('content') && (h("div", { key: '4c1bd6e0144a7fd3c8457de9ca2332289a5b86cb', class: StepperItemClass.content, id: contentId, "aria-labelledby": triggerId, role: "tabpanel" }, h("slot", { key: 'a8122225841c58776cde45f4a5e61292a2bab389', name: "content" })))))));
    }
    static get is() { return "gov-stepper-item"; }
    static get properties() {
        return {
            "color": {
                "type": "string",
                "attribute": "color",
                "mutable": false,
                "complexType": {
                    "original": "StepperColorType",
                    "resolved": "\"error\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"",
                    "references": {
                        "StepperColorType": {
                            "location": "import",
                            "path": "./constants",
                            "id": "../../../packages/core/src/components/gov-stepper/stepper/constants.ts::StepperColorType"
                        }
                    }
                },
                "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": "StepperSizesType",
                    "resolved": "\"l\" | \"m\" | \"s\"",
                    "references": {
                        "StepperSizesType": {
                            "location": "import",
                            "path": "./constants",
                            "id": "../../../packages/core/src/components/gov-stepper/stepper/constants.ts::StepperSizesType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Size of stepper"
                },
                "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 stepper item identifier. Otherwise, it will be generated"
                },
                "getter": false,
                "setter": false,
                "reflect": 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": "GovStepperItemChangeEvent",
                    "resolved": "GovStepperItemChangeEvent",
                    "references": {
                        "GovStepperItemChangeEvent": {
                            "location": "import",
                            "path": "./gov-stepper-item.d",
                            "id": "../../../packages/core/src/components/gov-stepper/stepper/gov-stepper-item.d.tsx::GovStepperItemChangeEvent"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "color",
                "methodName": "validateColor"
            }];
    }
}
//# sourceMappingURL=gov-stepper-item.js.map
