'use strict';

var index = require('./index-BEF5cZxd.js');
var template = require('./template-Cj6PcLmR.js');
var Fragment = require('./Fragment-D4qSkFah.js');
var props = require('./props-CPENhBnM.js');
var colors = require('./colors-DgrrxjsX.js');
var utils = require('./utils-NnC78QR3.js');
var attribute = require('./attribute-CH1-zDDl.js');
var accessibility = require('./accessibility-BQJmIVWV.js');
require('./gov.log-C5EH15b_.js');

const InfobarColors = utils.pick(colors.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) {
        index.registerInstance(this, hostRef);
        this.govClose = index.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 = template.govHost(this.host);
    }
    validateColor(newValue) {
        props.validateProp(InfobarColors, newValue, InfobarClass.root);
    }
    componentDidLoad() {
        this.attributeObserver = new attribute.AttributeObserver(this.host, (attributeName, newValue) => {
            this.onAriaAttributeChange(attributeName, newValue);
        });
        this.attributeObserver.startObserving(attribute.ariaAttributes);
    }
    componentWillLoad() {
        this.validateColor(this.color);
        this.inheritedAttributes = accessibility.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 = (index.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 }, index.h("gov-icon", { key: '3f4f5c3b15842ff258035badfbf9286dacdba8b5', name: "x-lg", type: "components" })));
        return (index.h(index.Host, { key: '7d52bcf1a541c5c536755a16e13dd66209d7ba98', class: this.h.classes(InfobarClass.root), color: this.color, type: this.type, hydrated: this.hydrated }, index.h("section", Object.assign({ key: 'e52815b07de6e3fae05bb4429ab925300fde0a50', class: InfobarClass.section }, this.inheritedAttributes, { role: this.role }), this.h.hasSlot("icon") && (index.h("span", { key: 'd1424933f1f122693d45803eb500aff8c7b45dd7' }, index.h("slot", { key: '94ab048d5e2e506773402a55d399f3c315307153', name: "icon" }))), index.h("div", { key: 'b59bbe4b7516d0b4e96e19618613d9e82551cd39', class: InfobarClass.content }, this.h.hasSlot('headline') ? (index.h(Fragment.Fragment, null, index.h("div", { class: InfobarClass.headline }, index.h("slot", { name: "headline" }), index.h("gov-button", { size: "s", type: "base", color: this.isBold ? this.color : "neutral", "aria-label": this.accessibleToggleLabel, "on-gov-click": () => (this.toggleContent = !this.toggleContent) }, index.h("gov-icon", { name: this.toggleContent ? 'chevron-up' : 'chevron-down', type: "components" }))), index.h("div", { hidden: !this.toggleContent, "aria-hidden": template.toBoolAttr(this.toggleContent) }, index.h("slot", null)))) : (index.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 index.getElement(this); }
    static get watchers() { return {
        "color": ["validateColor"]
    }; }
};

exports.gov_infobar = GovInfobar;
//# sourceMappingURL=gov-infobar.entry.cjs.js.map

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