import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-ClISz4NF.js';
import { g as govHost, a as toBoolAttr } from './template-CoD1xawt.js';
import { F as Fragment } from './Fragment-5itQzbON.js';
import { v as validateProp } from './props-CJZgTDla.js';
import { C as Colors } from './colors-U40vKHrs.js';
import { p as pick } from './utils-CQvUntGY.js';
import { A as AttributeObserver, a as ariaAttributes } from './attribute-Bz_RzYFb.js';
import { i as inheritAriaAttributes } from './accessibility-wqNV8djF.js';
import './gov.log-BtqD9K8d.js';

const InfobarColors = pick(Colors, ['PRIMARY', 'SECONDARY', 'NEUTRAL', 'ERROR', 'SUCCESS', 'WARNING']);
var InfobarType;
(function (InfobarType) {
    InfobarType["BOLD"] = "bold";
    InfobarType["SUBTLE"] = "subtle";
})(InfobarType || (InfobarType = {}));
const InfobarClass = {
    root: 'gov-infobar',
    section: 'gov-infobar__section',
    content: 'gov-infobar__content',
    headline: 'gov-infobar__headline',
    close: 'gov-infobar__close',
};

const GovInfobar = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.govClose = createEvent(this, "gov-close");
        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";
    }
    get host() { return getElement(this); }
    static get watchers() { return {
        "color": ["validateColor"]
    }; }
};

export { GovInfobar as gov_infobar };
//# sourceMappingURL=gov-infobar.entry.js.map

//# sourceMappingURL=gov-infobar.entry.js.map