import { h, Host } from "@stencil/core";
import { govHost, toBoolAttr } from "../../helpers/Dom/template";
import Fragment from "../../helpers/Fragment";
import { validateProp } from "../../helpers/Validate/props";
import { InfobarClass, InfobarColors } from "./constants";
import { AttributeObserver } from "../../helpers/Dom/attribute";
import { ariaAttributes } from "../../helpers/Accessibility/attributes";
import { inheritAriaAttributes } from "../../helpers/Accessibility/accessibility";
export class GovInfobar {
    constructor() {
        this.hydrated = false;
        /**
         * Style variation of the button.
         */
        this.color = 'primary';
        /**
         * Infobar appearance
         */
        this.type = "bold";
        /**
         * Style variation of the button.
         */
        this.role = undefined;
        /**
         * Aria label for the closing button. It is mandatory if the infobar is closable
         */
        this.accessibleCloseLabel = 'Zavřít informační lištu';
        /**
         * Aria label for the toggle button. It is mandatory if the infobar has headline
         */
        this.accessibleToggleLabel = 'Zobrazit více informací';
        /**
         * Displays the option to close the infobar
         */
        this.closable = false;
        this.toggleContent = false;
        this.inheritedAttributes = {};
        this.h = govHost(this.host);
    }
    validateColor(newValue) {
        validateProp(InfobarColors, newValue, InfobarClass.root);
    }
    componentDidLoad() {
        this.attributeObserver = new AttributeObserver(this.host, (attributeName, newValue) => {
            this.onAriaAttributeChange(attributeName, newValue);
        });
        this.attributeObserver.startObserving(ariaAttributes);
    }
    componentWillLoad() {
        this.validateColor(this.color);
        this.inheritedAttributes = inheritAriaAttributes(this.host);
    }
    disconnectedCallback() {
        var _a;
        (_a = this.attributeObserver) === null || _a === void 0 ? void 0 : _a.stopObserving();
    }
    onAriaAttributeChange(attributeName, newValue) {
        this.host.removeAttribute(attributeName);
        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [attributeName]: newValue });
    }
    connectedCallback() {
        this.hydrated = true;
    }
    render() {
        const closeButton = (h("gov-button", { key: 'aaaf43a5b48ccded5f30061b7b6dfd09da11e970', size: "s", "aria-label": this.accessibleCloseLabel, type: "base", color: this.isBold ? this.color : "neutral", "on-gov-click": this.onCloseHandler.bind(this), class: InfobarClass.close }, h("gov-icon", { key: '3f4f5c3b15842ff258035badfbf9286dacdba8b5', name: "x-lg", type: "components" })));
        return (h(Host, { key: '7d52bcf1a541c5c536755a16e13dd66209d7ba98', class: this.h.classes(InfobarClass.root), color: this.color, type: this.type, hydrated: this.hydrated }, h("section", Object.assign({ key: 'e52815b07de6e3fae05bb4429ab925300fde0a50', class: InfobarClass.section }, this.inheritedAttributes, { role: this.role }), this.h.hasSlot("icon") && (h("span", { key: 'd1424933f1f122693d45803eb500aff8c7b45dd7' }, h("slot", { key: '94ab048d5e2e506773402a55d399f3c315307153', name: "icon" }))), h("div", { key: 'b59bbe4b7516d0b4e96e19618613d9e82551cd39', class: InfobarClass.content }, this.h.hasSlot('headline') ? (h(Fragment, null, h("div", { class: InfobarClass.headline }, h("slot", { name: "headline" }), h("gov-button", { size: "s", type: "base", color: this.isBold ? this.color : "neutral", "aria-label": this.accessibleToggleLabel, "on-gov-click": () => (this.toggleContent = !this.toggleContent) }, h("gov-icon", { name: this.toggleContent ? 'chevron-up' : 'chevron-down', type: "components" }))), h("div", { hidden: !this.toggleContent, "aria-hidden": toBoolAttr(this.toggleContent) }, h("slot", null)))) : (h("slot", null))), this.closable && closeButton)));
    }
    onCloseHandler(e) {
        this.govClose.emit({
            component: InfobarClass.root,
            ref: this.host,
            originalEvent: e,
        });
    }
    get isBold() {
        return this.type === "bold";
    }
    static get is() { return "gov-infobar"; }
    static get properties() {
        return {
            "color": {
                "type": "string",
                "attribute": "color",
                "mutable": false,
                "complexType": {
                    "original": "ColorType",
                    "resolved": "\"error\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
                    "references": {
                        "ColorType": {
                            "location": "import",
                            "path": "./constants",
                            "id": "../../../packages/core/src/components/gov-infobar/constants.ts::ColorType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Style variation of the button."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'primary'"
            },
            "type": {
                "type": "string",
                "attribute": "type",
                "mutable": false,
                "complexType": {
                    "original": "InfobarTypesType",
                    "resolved": "\"bold\" | \"subtle\"",
                    "references": {
                        "InfobarTypesType": {
                            "location": "import",
                            "path": "./constants",
                            "id": "../../../packages/core/src/components/gov-infobar/constants.ts::InfobarTypesType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Infobar appearance"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "\"bold\""
            },
            "role": {
                "type": "string",
                "attribute": "role",
                "mutable": false,
                "complexType": {
                    "original": "HTMLElement['role']",
                    "resolved": "string",
                    "references": {
                        "HTMLElement": {
                            "location": "global",
                            "id": "global::HTMLElement"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Style variation of the button."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "undefined"
            },
            "accessibleCloseLabel": {
                "type": "string",
                "attribute": "accessible-close-label",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Aria label for the closing button. It is mandatory if the infobar is closable"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'Zav\u0159\u00EDt informa\u010Dn\u00ED li\u0161tu'"
            },
            "accessibleToggleLabel": {
                "type": "string",
                "attribute": "accessible-toggle-label",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Aria label for the toggle button. It is mandatory if the infobar has headline"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'Zobrazit v\u00EDce informac\u00ED'"
            },
            "closable": {
                "type": "boolean",
                "attribute": "closable",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Displays the option to close the infobar"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "toggleContent": {},
            "inheritedAttributes": {}
        };
    }
    static get events() {
        return [{
                "method": "govClose",
                "name": "gov-close",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Called when the close button is clicked"
                },
                "complexType": {
                    "original": "InfobarEvent",
                    "resolved": "InfobarEvent",
                    "references": {
                        "InfobarEvent": {
                            "location": "import",
                            "path": "./gov-infobar.types",
                            "id": "../../../packages/core/src/components/gov-infobar/gov-infobar.types.ts::InfobarEvent"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "color",
                "methodName": "validateColor"
            }];
    }
}
//# sourceMappingURL=gov-infobar.js.map
