import { h, Host, } from "@stencil/core";
import { onComponentRequiredPropUndefined, isSlotUsed, getBrandFromContext, removeDisabledFalse, renderDynamicChildSlots, } from "../../utils/helpers";
import { IcBrandForegroundEnum, } from "../../utils/types";
import chevronIcon from "../../assets/chevron-icon.svg";
/**
 * @slot heading - Content will be placed at the top of the card to the right of the icon.
 * @slot message - Content will be placed in the main body of the card.
 * @slot subheading - Content will be placed below the card heading.
 * @slot adornment - Content will be placed below the card subheading.
 * @slot image-top - Content will be placed at the top of the card above all other content.
 * @slot image-mid - Content will be placed below the card heading section.
 * @slot icon - Content will be placed to the left of the card heading.
 * @slot interaction-button - Content will be placed in the top right corner of the heading section.
 * @slot interaction-controls - Content will be placed below the card message.
 * @slot expanded-content - Content will be placed below the interaction controls but will not initially be rendered.
 * @slot badge - Badge component overlaying the top right of the card.
 */
export class CardVertical {
    constructor() {
        this.hostMutationObserver = null;
        this.areaExpanded = false;
        this.isFocussed = false;
        this.monochrome = false;
        this.parentEl = null;
        this.parentIsAnchorTag = false;
        /**
         * If `true`, the card will be a clickable variant, instead of static.
         */
        this.clickable = false;
        /**
         * If `true`, the card will be disabled if it is clickable.
         */
        this.disabled = false;
        /**
         *  If `true`, the card will have an expandable area and expansion toggle button.
         */
        this.expandable = false;
        /**
         *  If `true`, the card will fill the width of the container.
         */
        this.fullWidth = false;
        /**
         * The human language of the linked URL.
         */
        this.hreflang = "";
        /**
         * The main body message of the card.
         */
        this.message = "";
        /**
         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
         */
        this.theme = "inherit";
        this.parentFocussed = () => {
            this.isFocussed = true;
        };
        this.parentBlurred = () => {
            this.isFocussed = false;
        };
        this.toggleExpanded = () => {
            this.areaExpanded = !this.areaExpanded;
        };
    }
    watchDisabledHandler() {
        removeDisabledFalse(this.disabled, this.el);
    }
    disconnectedCallback() {
        var _a;
        if (this.parentEl && this.parentIsAnchorTag) {
            this.parentEl.removeEventListener("focus", this.parentFocussed);
            this.parentEl.removeEventListener("blur", this.parentBlurred);
        }
        (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
    }
    componentWillLoad() {
        var _a;
        this.parentEl = this.el.parentElement;
        if (((_a = this.parentEl) === null || _a === void 0 ? void 0 : _a.tagName) === "A") {
            this.clickable = true;
            this.parentIsAnchorTag = true;
            this.parentEl.classList.add("ic-card-wrapper-link");
            this.parentEl.addEventListener("focus", this.parentFocussed);
            this.parentEl.addEventListener("blur", this.parentBlurred);
        }
        removeDisabledFalse(this.disabled, this.el);
    }
    componentDidLoad() {
        !isSlotUsed(this.el, "heading") &&
            onComponentRequiredPropUndefined([{ prop: this.heading, propName: "heading" }], "Card");
        this.updateTheme();
        this.hostMutationObserver = new MutationObserver((mutationList) => renderDynamicChildSlots(mutationList, [
            "message",
            "adornment",
            "expanded-content",
            "image-top",
            "image-mid",
            "icon",
            "interaction-button",
            "badge",
            "interaction-controls",
        ], this));
        this.hostMutationObserver.observe(this.el, {
            childList: true,
        });
    }
    handleHostClick(event) {
        if (this.disabled) {
            event.stopImmediatePropagation();
        }
    }
    brandChangeHandler(ev) {
        this.updateTheme(ev.detail.mode);
    }
    /**
     * Sets focus on the card.
     */
    async setFocus() {
        var _a, _b;
        const shadowRoot = this.el.shadowRoot;
        if (shadowRoot) {
            if (shadowRoot.querySelector("a")) {
                (_a = shadowRoot.querySelector("a")) === null || _a === void 0 ? void 0 : _a.focus();
            }
            else if (shadowRoot.querySelector("button")) {
                (_b = shadowRoot.querySelector("button")) === null || _b === void 0 ? void 0 : _b.focus();
            }
        }
    }
    updateTheme(mode = null) {
        const foregroundColor = getBrandFromContext(this.el, mode);
        if (foregroundColor !== IcBrandForegroundEnum.Default) {
            this.monochrome = true;
            this.theme =
                foregroundColor === IcBrandForegroundEnum.Light
                    ? IcBrandForegroundEnum.Dark
                    : IcBrandForegroundEnum.Light;
        }
    }
    render() {
        const { clickable, disabled, expandable, fullWidth, heading, isFocussed, message, monochrome, href, hreflang, parentIsAnchorTag, referrerpolicy, rel, subheading, target, theme, } = this;
        const Component = parentIsAnchorTag || !clickable
            ? "div"
            : href === undefined
                ? "button"
                : "a";
        const attrs = Component == "a" && {
            href: href,
            hrefLang: hreflang,
            referrerPolicy: referrerpolicy,
            rel: rel,
            target: target,
        };
        return (h(Host, { key: 'd62f341e096d81fa917e578aa55c99d6d828c9e3', class: {
                [`ic-theme-${theme}`]: theme !== "inherit",
            } }, h(Component, Object.assign({ key: '742b03d9281d850a9052638038980b45ca567c17', class: {
                card: true,
                clickable: !!clickable && !disabled,
                disabled: !!disabled,
                fullwidth: !!fullWidth,
                focussed: isFocussed,
                monochrome: monochrome,
            }, tabindex: clickable && !parentIsAnchorTag ? 0 : undefined, "aria-disabled": disabled ? "true" : null, disabled: disabled }, attrs), isSlotUsed(this.el, "image-top") && (h("div", { key: 'd5f584871df498cf11acb97ff3694115d4819a73', class: "image-top" }, h("slot", { key: '88fa5d9566421a5ca724622bb11b0ad593babecb', name: "image-top" }))), h("div", { key: '3211c93ebca0fcddad4ac7ce75999ab8d7939442', class: "card-header" }, isSlotUsed(this.el, "icon") && (h("div", { key: 'c80cf3c24f0cbdf7cac901ee8c945c4d1432fe9f', class: "icon" }, h("slot", { key: '7e087604510f545b891f104f972ee50ac686b9be', name: "icon" }))), h("div", { key: '02bc7be8d85faee7b497c2b2608d80f70b79ec86', class: "card-title" }, h("slot", { key: 'e5285ad53121d899dd27966860b664fe1ecc388f', name: "heading" }, h("ic-typography", { key: '00573eddbbdd537b86a1331bd2b2db4a443a13c0', variant: "h4" }, h("p", { key: 'bccc52bc8feadd3abe0cd8092819258dc2e155c8' }, heading)))), isSlotUsed(this.el, "interaction-button") && (h("div", { key: 'f9f2baeee122976ab5ffa8e3dff9027bb78db6b4', class: "interaction-button" }, h("slot", { key: '01b087c7b7ff9fa54dfb1171c5a4899cf090b45c', name: "interaction-button" })))), (subheading || isSlotUsed(this.el, "subheading")) && (h("div", { key: '81f19c8c0d726ebbb35f71375a35fac342e4e7cd', class: "subheading" }, h("slot", { key: '17c871d9694857824afb3c9f7593c8498873d810', name: "subheading" }, h("ic-typography", { key: '9ca1068e95a3c69def8ec0bf82135dd36ed57fbc', variant: "subtitle-small" }, subheading)))), isSlotUsed(this.el, "adornment") && (h("div", { key: 'e43dadfb629c3a5dd28a6b1c46555dfade8d498f', class: "adornment" }, h("slot", { key: 'b8f63d79ffaff166020d643497ad8b92f4580a0e', name: "adornment" }))), isSlotUsed(this.el, "image-mid") && (h("div", { key: '1077bd869310c629a1b154e031dbed14559798b7', class: "image-mid" }, h("slot", { key: 'f598c5ddfb5a591f3988c49b3f7be1e84fb87552', name: "image-mid" }))), (message || isSlotUsed(this.el, "message")) && (h("div", { key: '08d46a26aac3972495cc7724ff8fbd55cc90a31c', class: "card-message" }, message && (h("ic-typography", { key: '50c632b1ac9fed137e668ceec4f1fe35f9a2cf99', variant: "body" }, message)), isSlotUsed(this.el, "message") && h("slot", { key: '2b971484237d985d4318993477d39b5f6d1e8f0d', name: "message" }))), (isSlotUsed(this.el, "interaction-controls") || expandable) && (h("div", { key: '3e7f6bc8df858349187486fb9e9ebec56d42d0a5', class: "interaction-area" }, h("div", { key: '4fd96e05aa6daef84d93d8f1da4dd80b2d349623', class: "interaction-controls" }, h("slot", { key: '2f690307f464bb1f710344723b2f76078334ea30', name: "interaction-controls" })), expandable && (h("ic-tooltip", { key: '9880fae8f9a52bdfe1820df5cbfc92af33080e2a', id: "ic-tooltip-expand-button", label: "Toggle expandable area", silent: true }, h("button", { key: '0d1656a001fa061ebae17757a560ba11dae90339', class: {
                "toggle-button": true,
                [`toggle-button-${this.areaExpanded ? "expanded" : "closed"}`]: true,
            }, "aria-label": "Toggle expandable area", "aria-expanded": `${this.areaExpanded}`, "aria-controls": this.areaExpanded ? "expanded-content-area" : null, onClick: this.toggleExpanded, innerHTML: chevronIcon }))))), isSlotUsed(this.el, "expanded-content") && this.areaExpanded && (h("div", { key: 'dc55cb4419b35c1f5f6b771cf5dc62c1d77626a7', class: "expanded-content", id: "expanded-content-area" }, h("slot", { key: '3b0d0c87d0467ffde6e62ed49b9116280a6c7108', name: "expanded-content" }))), isSlotUsed(this.el, "badge") && h("slot", { key: 'f51d29f2b88429b0e0024c6f9ba34abaf4e1a6d1', name: "badge" }))));
    }
    static get is() { return "ic-card-vertical"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["ic-card-vertical.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ic-card-vertical.css"]
        };
    }
    static get properties() {
        return {
            "clickable": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the card will be a clickable variant, instead of static."
                },
                "getter": false,
                "setter": false,
                "attribute": "clickable",
                "reflect": false,
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the card will be disabled if it is clickable."
                },
                "getter": false,
                "setter": false,
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "expandable": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the card will have an expandable area and expansion toggle button."
                },
                "getter": false,
                "setter": false,
                "attribute": "expandable",
                "reflect": false,
                "defaultValue": "false"
            },
            "fullWidth": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the card will fill the width of the container."
                },
                "getter": false,
                "setter": false,
                "attribute": "full-width",
                "reflect": false,
                "defaultValue": "false"
            },
            "heading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The heading for the card. This is required, unless a slotted heading is used."
                },
                "getter": false,
                "setter": false,
                "attribute": "heading",
                "reflect": false
            },
            "href": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The URL that the clickable card link points to. If set, the clickable card will render as an \"a\" tag, otherwise it will render as a button."
                },
                "getter": false,
                "setter": false,
                "attribute": "href",
                "reflect": false
            },
            "hreflang": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The human language of the linked URL."
                },
                "getter": false,
                "setter": false,
                "attribute": "hreflang",
                "reflect": false,
                "defaultValue": "\"\""
            },
            "message": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The main body message of the card."
                },
                "getter": false,
                "setter": false,
                "attribute": "message",
                "reflect": false,
                "defaultValue": "\"\""
            },
            "referrerpolicy": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ReferrerPolicy",
                    "resolved": "\"\" | \"no-referrer\" | \"no-referrer-when-downgrade\" | \"origin\" | \"origin-when-cross-origin\" | \"same-origin\" | \"strict-origin\" | \"strict-origin-when-cross-origin\" | \"unsafe-url\" | undefined",
                    "references": {
                        "ReferrerPolicy": {
                            "location": "global",
                            "id": "global::ReferrerPolicy"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "How much of the referrer to send when following the link."
                },
                "getter": false,
                "setter": false,
                "attribute": "referrerpolicy",
                "reflect": false
            },
            "rel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The relationship of the linked URL as space-separated link types."
                },
                "getter": false,
                "setter": false,
                "attribute": "rel",
                "reflect": false
            },
            "subheading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The subheading for the card."
                },
                "getter": false,
                "setter": false,
                "attribute": "subheading",
                "reflect": false
            },
            "target": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
                },
                "getter": false,
                "setter": false,
                "attribute": "target",
                "reflect": false
            },
            "theme": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "IcThemeMode",
                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                    "references": {
                        "IcThemeMode": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcThemeMode"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
                },
                "getter": false,
                "setter": false,
                "attribute": "theme",
                "reflect": false,
                "defaultValue": "\"inherit\""
            }
        };
    }
    static get states() {
        return {
            "areaExpanded": {},
            "isFocussed": {},
            "monochrome": {},
            "parentEl": {},
            "parentIsAnchorTag": {}
        };
    }
    static get methods() {
        return {
            "setFocus": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Sets focus on the card.",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "disabled",
                "methodName": "watchDisabledHandler"
            }];
    }
    static get listeners() {
        return [{
                "name": "click",
                "method": "handleHostClick",
                "target": undefined,
                "capture": true,
                "passive": false
            }, {
                "name": "brandChange",
                "method": "brandChangeHandler",
                "target": "document",
                "capture": false,
                "passive": false
            }];
    }
}
//# sourceMappingURL=ic-card-vertical.js.map
