import { h, Host, } from "@stencil/core";
import { IcBrandForegroundEnum, } from "../../utils/types";
import { getBrandFromContext, isSlotUsed, onComponentRequiredPropUndefined, removeDisabledFalse, renderDynamicChildSlots, } from "../../utils/helpers";
/**
 * @slot heading - Content will be placed at the top of the horizontal card to the right of the icon.
 * @slot message - Content will be placed in the main body of the horizontal card.
 * @slot subheading - Content will be placed below the card heading. Only for `density="spacious"`.
 * @slot adornment - Content will be placed below the card subheading. Only for `density="spacious"`.
 * @slot image-left - Content will be placed to the left of all other content.
 * @slot image-right - Content will be placed to the right of all other content.
 * @slot icon - Content will be placed to the left of the horizontal card heading.
 * @slot interaction-button - Content will be placed in the top right corner of the heading section.
 * @slot badge - Badge component overlaying the top right of the horizontal card.
 */
export class CardHorizontal {
    constructor() {
        this.hostMutationObserver = null;
        this.IMAGE_LEFT = "image-left";
        this.IMAGE_RIGHT = "image-right";
        this.INTERACTION_BUTTON = "interaction-button";
        this.appearance = "default";
        this.isFocussed = false;
        this.parentEl = null;
        this.parentIsAnchorTag = false;
        /**
         * If `true`, the horizontal card will be a clickable variant, instead of static.
         */
        this.clickable = false;
        /**
         * The padding of the horizontal card.
         */
        this.density = "default";
        /**
         * If `true`, the horizontal card will be disabled if it is clickable.
         */
        this.disabled = false;
        /**
         * The human language of the linked URL.
         */
        this.hreflang = "";
        /**
         * The main body message of the horizontal card.
         */
        this.message = "";
        /**
         * The size of the horizontal card.
         */
        this.size = "medium";
        /**
         * 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;
        };
    }
    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",
            this.IMAGE_LEFT,
            this.IMAGE_RIGHT,
            "icon",
            this.INTERACTION_BUTTON,
            "badge",
        ], 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 linkElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("a");
        const buttonElement = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("button");
        if (linkElement) {
            linkElement.focus();
        }
        else if (buttonElement) {
            buttonElement.focus();
        }
    }
    updateTheme(mode) {
        const foregroundColor = getBrandFromContext(this.el, mode);
        if (foregroundColor !== IcBrandForegroundEnum.Default) {
            this.theme =
                foregroundColor === IcBrandForegroundEnum.Light
                    ? IcBrandForegroundEnum.Dark
                    : IcBrandForegroundEnum.Light;
        }
    }
    render() {
        const { appearance, clickable, density, disabled, heading, message, href, hreflang, referrerpolicy, rel, target, parentIsAnchorTag, isFocussed, size, subheading, 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,
        };
        const hasLeftImage = isSlotUsed(this.el, this.IMAGE_LEFT);
        const hasRightImage = isSlotUsed(this.el, this.IMAGE_RIGHT);
        return (h(Host, { key: 'e94948456777f8a03f776cbc7bf10d0f31e407b5', class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h(Component, Object.assign({ key: 'c4cd208f2a916362cbc76ae53a2b89d6289d73d4', class: {
                card: true,
                clickable: clickable && !disabled,
                disabled,
                focussed: isFocussed,
                dark: appearance === IcBrandForegroundEnum.Dark,
                [`${size}`]: true,
                "with-icon": isSlotUsed(this.el, "icon"),
                "with-image": hasLeftImage || hasRightImage,
                spacious: density === "spacious",
            }, tabindex: clickable && !parentIsAnchorTag ? 0 : undefined, "aria-disabled": disabled ? "true" : undefined, disabled: disabled ? true : undefined }, attrs), hasLeftImage && (h("div", { key: '7fca22940ce374fd2526cf87c2406307af60d2a8', class: "image" }, h("slot", { key: 'd2d8f0bbff64728214f3d9b34d9cd12787117b1e', name: "image-left" }))), h("div", { key: 'fd8c49666e85b378689115f192d1fd1b1c208660', class: {
                "card-content": true,
                "left-image": hasLeftImage,
                "right-image": hasRightImage,
            } }, h("div", { key: 'd957ecf099197dce4cf1c7a1d0b49b8b18c43381', class: "card-header" }, isSlotUsed(this.el, "icon") && (h("div", { key: '9a1e9b16b3c05e3f7debe096f7d361f74c9f3773', class: "icon" }, h("slot", { key: 'f4f748f6c16e64c9f7dc6a9f12a3cdf6a13df5f3', name: "icon" }))), h("div", { key: 'd51c77d55483b238520213b215c0f148f358a3fe', class: {
                "card-title": true,
                "with-interaction-button": isSlotUsed(this.el, this.INTERACTION_BUTTON),
            } }, h("slot", { key: '92286e31f16026ab813a693c8129c2375bcd0a6e', name: "heading" }, h("ic-typography", { key: '9ccea0ecffa2491d7f06a6508f6ce5f1c875388e', variant: "h4" }, h("p", { key: 'ab04f830aead42a625f4941f6a5f80ae5b6b51e4' }, heading)))), isSlotUsed(this.el, this.INTERACTION_BUTTON) && (h("div", { key: '28e9e15caf4e9da2e09e4d306b24ab578341cc4e', class: "interaction-button" }, h("slot", { key: 'f6bf46a34bf59e78515e7873ec7941e24a37194d', name: "interaction-button" })))), density === "spacious" &&
            (subheading || isSlotUsed(this.el, "subheading")) && (h("div", { key: '320f6a9482bb438227df3a72300d346a1c9aff5d', class: "subheading" }, h("slot", { key: 'b84748dfe900f2ddd7abb4db04b36977c6611ce1', name: "subheading" }, h("ic-typography", { key: '6e880f31a9043fd346e494a2863a2a9f60ae0701', variant: "subtitle-small" }, subheading)))), density === "spacious" && isSlotUsed(this.el, "adornment") && (h("div", { key: 'f51f5bfec9ba2435cb1f9118ffc8b4eb2d2ce832', class: "adornment" }, h("slot", { key: 'c3fca6a207920e257e739cff8fced1df201b86ee', name: "adornment" }))), (message || isSlotUsed(this.el, "message")) && (h("div", { key: '55ba08a6ce0a802eac833d571f1eda05d85b3582', class: "card-message" }, message && (h("ic-typography", { key: '937da914727038fbc4ddf393beee5cd4a705f93a', variant: "body" }, message)), isSlotUsed(this.el, "message") && h("slot", { key: 'f544acd3bc7e80048d12738eae33affc088395b6', name: "message" })))), isSlotUsed(this.el, "badge") && h("slot", { key: '51d1a77e01fd8feb72822bdc9666a6a9990bc9fe', name: "badge" }), hasRightImage && (h("div", { key: '67d2d67a22ad2a7a67ec2080d87187cc9f149f1a', class: "image" }, h("slot", { key: 'd52fbbdf07e3ae17e5396b58b39c09d8c5072e65', name: "image-right" }))))));
    }
    static get is() { return "ic-card-horizontal"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["ic-card-horizontal.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ic-card-horizontal.css"]
        };
    }
    static get properties() {
        return {
            "clickable": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the horizontal card will be a clickable variant, instead of static."
                },
                "getter": false,
                "setter": false,
                "attribute": "clickable",
                "reflect": false,
                "defaultValue": "false"
            },
            "density": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcCardDensity",
                    "resolved": "\"default\" | \"spacious\"",
                    "references": {
                        "IcCardDensity": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcCardDensity"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The padding of the horizontal card."
                },
                "getter": false,
                "setter": false,
                "attribute": "density",
                "reflect": false,
                "defaultValue": "\"default\""
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the horizontal card will be disabled if it is clickable."
                },
                "getter": false,
                "setter": false,
                "attribute": "disabled",
                "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 horizontal 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 | undefined",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The URL that the clickable horizontal card link points to. If set, the clickable horizontal 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 horizontal 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
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcSizes",
                    "resolved": "\"large\" | \"medium\" | \"small\"",
                    "references": {
                        "IcSizes": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcSizes"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The size of the horizontal card."
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": false,
                "defaultValue": "\"medium\""
            },
            "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": false,
                "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 {
            "appearance": {},
            "isFocussed": {},
            "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-horizontal.js.map
