import { h, Host } from "@stencil/core";
import { CardClass } from "./constants";
import { booleanString, govHost } from "../../helpers/Dom/template";
import { createID } from "../../utils/string.utils";
import { validateAccessibleLabel } from "../../helpers/Validate/wcag";
import { canValidateWcagOnRender } from "../../helpers/Dom/win";
import { delay } from "../../utils/utils";
var Tags;
(function (Tags) {
    Tags["A"] = "a";
    Tags["DIV"] = "div";
})(Tags || (Tags = {}));
export class GovCard {
    constructor() {
        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 = govHost(this.host);
        this.headlineId = createID('GovCardHeadline');
        this.contentId = createID('GovCardContent');
    }
    async componentDidRender() {
        if (canValidateWcagOnRender()) {
            await delay(500);
            await this.validateAccessibility();
        }
    }
    connectedCallback() {
        this.hydrated = true;
    }
    render() {
        const Tag = this.href ? Tags.A : Tags.DIV;
        return (h(Host, { key: 'cdfd3d0c4298a3bf933073c558dad83f3765b6c2', class: this.h.classes(CardClass.root), open: this.open, collapsible: booleanString(this.collapsible), clickable: this.clickable, direction: this.direction, hydrated: this.hydrated }, this.collapsible ? (h("button", { id: this.headlineId, class: CardClass.header, "aria-label": this.accessibleTriggerLabel, "aria-labelledby": this.accessibleTriggerLabelledBy, "aria-expanded": booleanString(this.open), "aria-controls": this.contentId, onClick: this.onClickHandler.bind(this) }, h("slot", { name: "headline" }), h("gov-icon", { class: CardClass.arrow, name: "chevron-down", type: "components" }))) : this.h.hasSlot("headline") ? (h("div", { class: CardClass.header }, h("slot", { name: "headline" }))) : null, h(Tag, { key: '6bb81b9dd553397f508a8042316fd09579154461', href: this.href, target: this.target, id: this.contentId, "aria-hidden": this.collapsible ? booleanString(!this.open) : undefined, hidden: this.collapsible ? !this.open : undefined, "aria-labelledby": this.collapsible ? this.headlineId : undefined, class: CardClass.inner }, this.h.hasSlot('img') && (h("div", { key: '740547f9bc6e9be839cbf8edc44faddb6aaa5246', class: CardClass.img }, h("slot", { key: 'abb25299c0f9b0b4ac1a4826648dd7a774894514', name: "img" }))), this.h.hasSlot('icon') && (h("div", { key: 'c768f9fd3f3ac79f907dd26601c109265d6d903d', class: CardClass.icon }, h("slot", { key: '8cf8ffde300503c874e32644d6c4111e6b608e36', name: "icon" }))), h("div", { key: '1e3218226ffc179f0afb0da94c48a939b248c311', class: CardClass.content }, h("slot", { key: '2a0ac8f1ecd6a83537bfb2da85d06c9d9b3f2706' })), this.h.hasSlot('footer') && (h("div", { key: '04b7f39f60eab3db295b82072d1b06648d687b0b', class: CardClass.footer }, 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) {
            validateAccessibleLabel(this.accessibleTriggerLabel, this.accessibleTriggerLabelledBy, CardClass.root, this.host);
        }
    }
    static get is() { return "gov-card"; }
    static get properties() {
        return {
            "direction": {
                "type": "string",
                "attribute": "direction",
                "mutable": false,
                "complexType": {
                    "original": "CardDirectionType",
                    "resolved": "\"horizontal\" | \"vertical\"",
                    "references": {
                        "CardDirectionType": {
                            "location": "import",
                            "path": "./constants",
                            "id": "../../../packages/core/src/components/gov-card/constants.ts::CardDirectionType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Card direction"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "\"vertical\""
            },
            "collapsible": {
                "type": "boolean",
                "attribute": "collapsible",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines weather the card can be collapsible"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "clickable": {
                "type": "boolean",
                "attribute": "clickable",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines weather the card can be clickable with hover effect"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "open": {
                "type": "boolean",
                "attribute": "open",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines whether the card is open or closed"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "true"
            },
            "href": {
                "type": "string",
                "attribute": "href",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Link on whole card"
                },
                "getter": false,
                "setter": false,
                "reflect": true
            },
            "target": {
                "type": "string",
                "attribute": "target",
                "mutable": false,
                "complexType": {
                    "original": "ButtonTargetType",
                    "resolved": "\"_blank\" | \"_new\" | \"_self\"",
                    "references": {
                        "ButtonTargetType": {
                            "location": "import",
                            "path": "../gov-button/button/constants",
                            "id": "../../../packages/core/src/components/gov-button/button/constants.ts::ButtonTargetType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "link",
                            "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target"
                        }],
                    "text": "Same as original parameter"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "accessibleTriggerLabel": {
                "type": "string",
                "attribute": "accessible-label",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Adds accessible label for the collapsible button that is only shown for screen readers."
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "accessibleTriggerLabelledBy": {
                "type": "string",
                "attribute": "accessible-labelledby",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "A string of identifiers that indicate alternative label elements for collapsible card"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            }
        };
    }
    static get events() {
        return [{
                "method": "govToggle",
                "name": "gov-toggle",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Called when the card toggle state changes"
                },
                "complexType": {
                    "original": "GovCardChangeEvent",
                    "resolved": "GovCardChangeEvent",
                    "references": {
                        "GovCardChangeEvent": {
                            "location": "import",
                            "path": "./interfaces",
                            "id": "../../../packages/core/src/components/gov-card/interfaces.ts::GovCardChangeEvent"
                        }
                    }
                }
            }];
    }
    static get methods() {
        return {
            "validateAccessibility": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Validate the accessible attributes of the component",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "host"; }
}
//# sourceMappingURL=gov-card.js.map
