'use strict';

var index = require('./index-BEF5cZxd.js');
var template = require('./template-Cj6PcLmR.js');
var string_utils = require('./string.utils-BG4pUfEi.js');
var wcag = require('./wcag-Bvzxnp5D.js');
var gov_log = require('./gov.log-C5EH15b_.js');
var utils = require('./utils-NnC78QR3.js');
require('./helpers.types-vap8QfRH.js');

var CardDirection;
(function (CardDirection) {
    CardDirection["HORIZONTAL"] = "horizontal";
    CardDirection["VERTICAL"] = "vertical";
})(CardDirection || (CardDirection = {}));
const CardClass = {
    root: 'gov-card',
    header: 'gov-card__header',
    arrow: 'gov-card__arrow',
    inner: 'gov-card__inner',
    img: 'gov-card__img',
    icon: 'gov-card__icon',
    content: 'gov-card__content',
    footer: 'gov-card__footer',
};

var Tags;
(function (Tags) {
    Tags["A"] = "a";
    Tags["DIV"] = "div";
})(Tags || (Tags = {}));
const GovCard = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.govToggle = index.createEvent(this, "gov-toggle");
        this.hydrated = false;
        /**
         * Card direction
         */
        this.direction = "vertical";
        /**
         * Defines weather the card can be collapsible
         */
        this.collapsible = false;
        /**
         * Defines weather the card can be clickable with hover effect
         */
        this.clickable = false;
        /**
         * Defines whether the card is open or closed
         */
        this.open = true;
        this.h = template.govHost(this.host);
        this.headlineId = string_utils.createID('GovCardHeadline');
        this.contentId = string_utils.createID('GovCardContent');
    }
    async componentDidRender() {
        if (gov_log.canValidateWcagOnRender()) {
            await utils.delay(500);
            await this.validateAccessibility();
        }
    }
    connectedCallback() {
        this.hydrated = true;
    }
    render() {
        const Tag = this.href ? Tags.A : Tags.DIV;
        return (index.h(index.Host, { key: 'cdfd3d0c4298a3bf933073c558dad83f3765b6c2', class: this.h.classes(CardClass.root), open: this.open, collapsible: template.booleanString(this.collapsible), clickable: this.clickable, direction: this.direction, hydrated: this.hydrated }, this.collapsible ? (index.h("button", { id: this.headlineId, class: CardClass.header, "aria-label": this.accessibleTriggerLabel, "aria-labelledby": this.accessibleTriggerLabelledBy, "aria-expanded": template.booleanString(this.open), "aria-controls": this.contentId, onClick: this.onClickHandler.bind(this) }, index.h("slot", { name: "headline" }), index.h("gov-icon", { class: CardClass.arrow, name: "chevron-down", type: "components" }))) : this.h.hasSlot("headline") ? (index.h("div", { class: CardClass.header }, index.h("slot", { name: "headline" }))) : null, index.h(Tag, { key: '6bb81b9dd553397f508a8042316fd09579154461', href: this.href, target: this.target, id: this.contentId, "aria-hidden": this.collapsible ? template.booleanString(!this.open) : undefined, hidden: this.collapsible ? !this.open : undefined, "aria-labelledby": this.collapsible ? this.headlineId : undefined, class: CardClass.inner }, this.h.hasSlot('img') && (index.h("div", { key: '740547f9bc6e9be839cbf8edc44faddb6aaa5246', class: CardClass.img }, index.h("slot", { key: 'abb25299c0f9b0b4ac1a4826648dd7a774894514', name: "img" }))), this.h.hasSlot('icon') && (index.h("div", { key: 'c768f9fd3f3ac79f907dd26601c109265d6d903d', class: CardClass.icon }, index.h("slot", { key: '8cf8ffde300503c874e32644d6c4111e6b608e36', name: "icon" }))), index.h("div", { key: '1e3218226ffc179f0afb0da94c48a939b248c311', class: CardClass.content }, index.h("slot", { key: '2a0ac8f1ecd6a83537bfb2da85d06c9d9b3f2706' })), this.h.hasSlot('footer') && (index.h("div", { key: '04b7f39f60eab3db295b82072d1b06648d687b0b', class: CardClass.footer }, index.h("slot", { key: '4ec8ee6bf3b4ec9a02b30d5d2dc6b2fab6bb5065', name: "footer" }))))));
    }
    onClickHandler(e) {
        e.stopPropagation();
        if (this.collapsible) {
            this.open = !this.open;
            this.govToggle.emit({ open: this.open, element: this.host });
        }
    }
    /**
     * Validate the accessible attributes of the component
     */
    async validateAccessibility() {
        if (this.collapsible) {
            wcag.validateAccessibleLabel(this.accessibleTriggerLabel, this.accessibleTriggerLabelledBy, CardClass.root, this.host);
        }
    }
    get host() { return index.getElement(this); }
};

exports.gov_card = GovCard;
//# sourceMappingURL=gov-card.entry.cjs.js.map

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