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: 'a5c7d234492dc72ab0ce06bc64646982b9b0c765', class: {
                [`ic-theme-${theme}`]: theme !== "inherit",
            } }, h(Component, Object.assign({ key: '7878c6c421216eaffda8034f38711156dd920e41', 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: '32fc034396f14d12845c12ad9cfc4c00b75c0970', class: "image-top" }, h("slot", { key: 'd2f682bfd7e961d43aa37fc14b1f1ce875cfd9e4', name: "image-top" }))), h("div", { key: '315d6f3c97119e41228be4c1057f2c8e28c2e627', class: "card-header" }, isSlotUsed(this.el, "icon") && (h("div", { key: '304744f27ecdd26136c52bdf6a0623ccf16c8ccb', class: "icon" }, h("slot", { key: 'a186a14d094c999cc72b9ca8d0580c9c81ef5e5a', name: "icon" }))), h("div", { key: '4d52fd26c94603c39bdc7d03dd185d9147ec35d6', class: "card-title" }, h("slot", { key: 'e99c3b5b04bc8e4e0ad712ac221183e42472d1e4', name: "heading" }, h("ic-typography", { key: '7de9265a3bccf8ddeda0a5da115739dab6e7f4e3', variant: "h4" }, h("p", { key: '52ad60554c859fcba6960f892210b11afe2c8412' }, heading)))), isSlotUsed(this.el, "interaction-button") && (h("div", { key: 'bd177fd6ead82c2d826a90c9bc36baf4d9650822', class: "interaction-button" }, h("slot", { key: '50200586d93b445f084acdc44fe783362c61ad1c', name: "interaction-button" })))), (subheading || isSlotUsed(this.el, "subheading")) && (h("div", { key: '4084d3cdbcbfba517874846f00c6a75973911b46', class: "subheading" }, h("slot", { key: '83ecdcca1ae25ded22c2b48631ca719b219c670f', name: "subheading" }, h("ic-typography", { key: '6cc1e94ba4ecaeb37c0b01a177bf51ce56431406', variant: "subtitle-small" }, subheading)))), isSlotUsed(this.el, "adornment") && (h("div", { key: '5b2e821691a30048fa7598ea5e7f4da245539644', class: "adornment" }, h("slot", { key: '9955b70349039dd954ee03c66f27684225ad2161', name: "adornment" }))), isSlotUsed(this.el, "image-mid") && (h("div", { key: '1a44edd306c3a8a9f8b9d07d3f92bad346b8d9c2', class: "image-mid" }, h("slot", { key: '79c16a0c673bc92c420159b4908e7c2881c58fc0', name: "image-mid" }))), (message || isSlotUsed(this.el, "message")) && (h("div", { key: '11468fd0d9784ad303bae66a6c7b9a7e6fcd2fdb', class: "card-message" }, message && (h("ic-typography", { key: '4795147360d9862d329b7aa23b2d5d9d3501ff21', variant: "body" }, message)), isSlotUsed(this.el, "message") && h("slot", { key: '2e5c82f6cc32ab92e46d4531f5f646bb15b8bb8a', name: "message" }))), (isSlotUsed(this.el, "interaction-controls") || expandable) && (h("div", { key: '0d1f66f5387c89bdb9b6be46636f6b092fd3b977', class: "interaction-area" }, h("div", { key: '9afed7575316981e6e696d58469f56746fdd78e3', class: "interaction-controls" }, h("slot", { key: 'f218de86f75106aab7b2a7c3b81b303a813cfcc3', name: "interaction-controls" })), expandable && (h("ic-tooltip", { key: '29ccf36efd77a936dd35fef1cc304f5ffdde47ea', id: "ic-tooltip-expand-button", label: "Toggle expandable area", silent: true }, h("button", { key: 'e25088479cfa1519d8ac728505138fb2730b0400', 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: '710a390ddcfd6464509e31a8bdc12213180a8e69', class: "expanded-content", id: "expanded-content-area" }, h("slot", { key: 'd315e1d72d612b75a04460d6a33a66a7f84f39c8', name: "expanded-content" }))), isSlotUsed(this.el, "badge") && h("slot", { key: '93bad888a177ab13ae50ea4d86fa6fd2c4ae01f7', 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
