@ukic/web-components 3.19.0 → 3.21.0

package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.js

@@ -0,0 +1,512 @@
+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

package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-card-horizontal.js","sourceRoot":"","sources":["../../../src/components/ic-card-horizontal/ic-card-horizontal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  IcBrand,\n  IcBrandForeground,\n  IcBrandForegroundEnum,\n  IcCardDensity,\n  IcSizes,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport {\n  getBrandFromContext,\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n  renderDynamicChildSlots,\n} from \"../../utils/helpers\";\n\n/**\n * @slot heading - Content will be placed at the top of the horizontal card to the right of the icon.\n * @slot message - Content will be placed in the main body of the horizontal card.\n * @slot subheading - Content will be placed below the card heading. Only for `density=\"spacious\"`.\n * @slot adornment - Content will be placed below the card subheading. Only for `density=\"spacious\"`.\n * @slot image-left - Content will be placed to the left of all other content.\n * @slot image-right - Content will be placed to the right of all other content.\n * @slot icon - Content will be placed to the left of the horizontal card heading.\n * @slot interaction-button - Content will be placed in the top right corner of the heading section.\n * @slot badge - Badge component overlaying the top right of the horizontal card.\n */\n@Component({\n  tag: \"ic-card-horizontal\",\n  styleUrl: \"ic-card-horizontal.css\",\n  shadow: true,\n})\nexport class CardHorizontal {\n  private hostMutationObserver: MutationObserver | null = null;\n  private IMAGE_LEFT = \"image-left\";\n  private IMAGE_RIGHT = \"image-right\";\n  private INTERACTION_BUTTON = \"interaction-button\";\n\n  @Element() el: HTMLIcCardHorizontalElement;\n\n  @State() appearance?: IcBrandForeground = \"default\";\n  @State() isFocussed: boolean = false;\n  @State() parentEl: HTMLElement | null = null;\n  @State() parentIsAnchorTag: boolean = false;\n\n  /**\n   * If `true`, the horizontal card will be a clickable variant, instead of static.\n   */\n  @Prop({ mutable: true }) clickable: boolean = false;\n\n  /**\n   * The padding of the horizontal card.\n   */\n  @Prop() density: IcCardDensity = \"default\";\n\n  /**\n   * If `true`, the horizontal card will be disabled if it is clickable.\n   */\n  @Prop() disabled: boolean = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * The heading for the horizontal card. This is required, unless a slotted heading is used.\n   */\n  @Prop() heading?: string;\n\n  /**\n   * 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.\n   */\n  @Prop() href?: string | undefined;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string = \"\";\n\n  /**\n   * The main body message of the horizontal card.\n   */\n  @Prop() message?: string = \"\";\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The size of the horizontal card.\n   */\n  @Prop() size: IcSizes = \"medium\";\n\n  /**\n   * The subheading for the card.\n   */\n  @Prop() subheading?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * 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.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  disconnectedCallback(): void {\n    if (this.parentEl && this.parentIsAnchorTag) {\n      this.parentEl.removeEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.removeEventListener(\"blur\", this.parentBlurred);\n    }\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    this.parentEl = this.el.parentElement;\n\n    if (this.parentEl?.tagName === \"A\") {\n      this.clickable = true;\n      this.parentIsAnchorTag = true;\n      this.parentEl.classList.add(\"ic-card-wrapper-link\");\n      this.parentEl.addEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.addEventListener(\"blur\", this.parentBlurred);\n    }\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    !isSlotUsed(this.el, \"heading\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.heading, propName: \"heading\" }],\n        \"Card\"\n      );\n    this.updateTheme();\n\n    this.hostMutationObserver = new MutationObserver((mutationList) =>\n      renderDynamicChildSlots(\n        mutationList,\n        [\n          \"message\",\n          \"adornment\",\n          this.IMAGE_LEFT,\n          this.IMAGE_RIGHT,\n          \"icon\",\n          this.INTERACTION_BUTTON,\n          \"badge\",\n        ],\n        this\n      )\n    );\n    this.hostMutationObserver.observe(this.el, {\n      childList: true,\n    });\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(event: Event): void {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Listen(\"brandChange\", { target: \"document\" })\n  brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n    this.updateTheme(ev.detail.mode);\n  }\n\n  /**\n   * Sets focus on the card.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    const linkElement = this.el.shadowRoot?.querySelector(\"a\");\n    const buttonElement = this.el.shadowRoot?.querySelector(\"button\");\n    if (linkElement) {\n      linkElement.focus();\n    } else if (buttonElement) {\n      buttonElement.focus();\n    }\n  }\n\n  private parentFocussed = (): void => {\n    this.isFocussed = true;\n  };\n\n  private parentBlurred = (): void => {\n    this.isFocussed = false;\n  };\n\n  private updateTheme(mode?: IcBrandForeground): void {\n    const foregroundColor = getBrandFromContext(this.el, mode);\n\n    if (foregroundColor !== IcBrandForegroundEnum.Default) {\n      this.theme =\n        foregroundColor === IcBrandForegroundEnum.Light\n          ? IcBrandForegroundEnum.Dark\n          : IcBrandForegroundEnum.Light;\n    }\n  }\n\n  render() {\n    const {\n      appearance,\n      clickable,\n      density,\n      disabled,\n      heading,\n      message,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      target,\n      parentIsAnchorTag,\n      isFocussed,\n      size,\n      subheading,\n      theme,\n    } = this;\n\n    const Component =\n      parentIsAnchorTag || !clickable\n        ? \"div\"\n        : href === undefined\n        ? \"button\"\n        : \"a\";\n\n    const attrs = Component == \"a\" && {\n      href: href,\n      hrefLang: hreflang,\n      referrerPolicy: referrerpolicy,\n      rel: rel,\n      target: target,\n    };\n\n    const hasLeftImage = isSlotUsed(this.el, this.IMAGE_LEFT);\n    const hasRightImage = isSlotUsed(this.el, this.IMAGE_RIGHT);\n\n    return (\n      <Host class={{ [`ic-theme-${theme}`]: theme !== \"inherit\" }}>\n        <Component\n          class={{\n            card: true,\n            clickable: clickable && !disabled,\n            disabled,\n            focussed: isFocussed,\n            dark: appearance === IcBrandForegroundEnum.Dark,\n            [`${size}`]: true,\n            \"with-icon\": isSlotUsed(this.el, \"icon\"),\n            \"with-image\": hasLeftImage || hasRightImage,\n            spacious: density === \"spacious\",\n          }}\n          tabindex={clickable && !parentIsAnchorTag ? 0 : undefined}\n          aria-disabled={disabled ? \"true\" : undefined}\n          disabled={disabled ? true : undefined}\n          {...attrs}\n        >\n          {hasLeftImage && (\n            <div class=\"image\">\n              <slot name=\"image-left\"></slot>\n            </div>\n          )}\n          <div\n            class={{\n              \"card-content\": true,\n              \"left-image\": hasLeftImage,\n              \"right-image\": hasRightImage,\n            }}\n          >\n            <div class=\"card-header\">\n              {isSlotUsed(this.el, \"icon\") && (\n                <div class=\"icon\">\n                  <slot name=\"icon\" />\n                </div>\n              )}\n              <div\n                class={{\n                  \"card-title\": true,\n                  \"with-interaction-button\": isSlotUsed(\n                    this.el,\n                    this.INTERACTION_BUTTON\n                  ),\n                }}\n              >\n                <slot name=\"heading\">\n                  <ic-typography variant=\"h4\">\n                    <p>{heading}</p>\n                  </ic-typography>\n                </slot>\n              </div>\n              {isSlotUsed(this.el, this.INTERACTION_BUTTON) && (\n                <div class=\"interaction-button\">\n                  <slot name=\"interaction-button\"></slot>\n                </div>\n              )}\n            </div>\n            {density === \"spacious\" &&\n              (subheading || isSlotUsed(this.el, \"subheading\")) && (\n                <div class=\"subheading\">\n                  <slot name=\"subheading\">\n                    <ic-typography variant=\"subtitle-small\">\n                      {subheading}\n                    </ic-typography>\n                  </slot>\n                </div>\n              )}\n            {density === \"spacious\" && isSlotUsed(this.el, \"adornment\") && (\n              <div class=\"adornment\">\n                <slot name=\"adornment\"></slot>\n              </div>\n            )}\n            {(message || isSlotUsed(this.el, \"message\")) && (\n              <div class=\"card-message\">\n                {message && (\n                  <ic-typography variant=\"body\">{message}</ic-typography>\n                )}\n                {isSlotUsed(this.el, \"message\") && <slot name=\"message\"></slot>}\n              </div>\n            )}\n          </div>\n          {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n          {hasRightImage && (\n            <div class=\"image\">\n              <slot name=\"image-right\"></slot>\n            </div>\n          )}\n        </Component>\n      </Host>\n    );\n  }\n}\n"]}