@ukic/canary-web-components 2.0.0-canary.4 → 2.0.0-canary.41

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

@@ -0,0 +1,375 @@
+import { h, } from "@stencil/core";
+import { onComponentRequiredPropUndefined, isSlotUsed, getThemeFromContext, removeDisabledFalse, renderDynamicChildSlots, } from "../../utils/helpers";
+import { IcThemeForegroundEnum, } from "../../utils/types";
+/**
+ * @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 image - Content will be placed to the left of all other content.
+ * @slot icon - Content will be placed to the left of the horizontal card heading.
+ * @slot badge - Badge component overlaying the top right of the horizontal card.
+ */
+export class Card {
+    constructor() {
+        this.hostMutationObserver = null;
+        this.parentFocussed = () => {
+            this.isFocussed = true;
+        };
+        this.parentBlurred = () => {
+            this.isFocussed = false;
+        };
+        this.appearance = "default";
+        this.isFocussed = false;
+        this.parentEl = null;
+        this.parentIsAnchorTag = false;
+        this.clickable = false;
+        this.disabled = false;
+        this.heading = undefined;
+        this.href = undefined;
+        this.hreflang = "";
+        this.message = "";
+        this.referrerpolicy = undefined;
+        this.rel = undefined;
+        this.size = "medium";
+        this.target = undefined;
+    }
+    watchDisabledHandler() {
+        removeDisabledFalse(this.disabled, this.el);
+    }
+    disconnectedCallback() {
+        var _a;
+        if (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() {
+        this.parentEl = this.el.parentElement;
+        if (this.parentEl.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, "image", this));
+        this.hostMutationObserver.observe(this.el, {
+            childList: true,
+        });
+    }
+    handleHostClick(event) {
+        if (this.disabled) {
+            event.stopImmediatePropagation();
+        }
+    }
+    themeChangeHandler(ev) {
+        const theme = ev.detail;
+        this.updateTheme(theme.mode);
+    }
+    /**
+     * Sets focus on the card.
+     */
+    async setFocus() {
+        if (this.el.shadowRoot.querySelector("a")) {
+            this.el.shadowRoot.querySelector("a").focus();
+        }
+        else if (this.el.shadowRoot.querySelector("button")) {
+            this.el.shadowRoot.querySelector("button").focus();
+        }
+    }
+    updateTheme(newTheme = null) {
+        const foregroundColor = getThemeFromContext(this.el, newTheme || null);
+        if (foregroundColor !== IcThemeForegroundEnum.Default) {
+            this.appearance = foregroundColor;
+        }
+    }
+    render() {
+        const { clickable, disabled, heading, message, href, hreflang, referrerpolicy, rel, target, parentIsAnchorTag, isFocussed, size, } = this;
+        const Component = parentIsAnchorTag
+            ? "div"
+            : clickable
+                ? this.href === undefined
+                    ? "button"
+                    : "a"
+                : "div";
+        const attrs = Component == "a" && {
+            href: href,
+            hrefLang: hreflang,
+            referrerPolicy: referrerpolicy,
+            rel: rel,
+            target: target,
+        };
+        return (h(Component, Object.assign({ class: {
+                ["card"]: true,
+                ["clickable"]: clickable && !disabled,
+                ["disabled"]: disabled,
+                ["focussed"]: isFocussed,
+                ["dark"]: this.appearance === IcThemeForegroundEnum.Dark,
+                [`${size}`]: true,
+                ["with-icon"]: isSlotUsed(this.el, "icon"),
+                ["with-image"]: isSlotUsed(this.el, "image"),
+            }, tabindex: clickable && !parentIsAnchorTag ? 0 : null, "aria-disabled": disabled ? "true" : null, disabled: disabled ? true : null }, attrs), isSlotUsed(this.el, "image") && (h("div", { class: { ["image"]: true } }, h("slot", { name: "image" }))), h("div", { class: "card-content" }, h("div", { class: "card-header" }, isSlotUsed(this.el, "icon") && (h("div", { class: "icon" }, h("slot", { name: "icon" }))), h("div", { class: "card-title" }, h("slot", { name: "heading" }, h("ic-typography", { variant: "h4" }, h("p", null, heading))))), (message || isSlotUsed(this.el, "message")) && (h("div", { class: {
+                ["card-message"]: true,
+            } }, message && (h("ic-typography", { variant: "body" }, message)), isSlotUsed(this.el, "message") && h("slot", { name: "message" })))), isSlotUsed(this.el, "badge") && h("slot", { name: "badge" })));
+    }
+    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": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the horizontal card will be a clickable variant, instead of static."
+                },
+                "attribute": "clickable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the horizontal card will be disabled if it is clickable."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The heading for the horizontal card. This is required, unless a slotted heading is used."
+                },
+                "attribute": "heading",
+                "reflect": false
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string",
+                    "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."
+                },
+                "attribute": "href",
+                "reflect": false
+            },
+            "hreflang": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The human language of the linked URL."
+                },
+                "attribute": "hreflang",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The main body message of the horizontal card."
+                },
+                "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\"",
+                    "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."
+                },
+                "attribute": "referrerpolicy",
+                "reflect": false
+            },
+            "rel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The relationship of the linked URL as space-separated link types."
+                },
+                "attribute": "rel",
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcCardSizes",
+                    "resolved": "\"extra-large\" | \"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "IcCardSizes": {
+                            "location": "import",
+                            "path": "./ic-card-horizontal.types",
+                            "id": "src/components/ic-card-horizontal/ic-card-horizontal.types.ts::IcCardSizes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the horizontal card."
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "\"medium\""
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "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)."
+                },
+                "attribute": "target",
+                "reflect": false
+            }
+        };
+    }
+    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": "themeChange",
+                "method": "themeChangeHandler",
+                "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  Listen,\n  Prop,\n  State,\n  h,\n  Method,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  getThemeFromContext,\n  removeDisabledFalse,\n  renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcCardSizes } from \"./ic-card-horizontal.types\";\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 image - Content will be placed to the left of all other content.\n * @slot icon - Content will be placed to the left of the horizontal card heading.\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 Card {\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcCardHorizontalElement;\n\n  @State() appearance?: IcThemeForeground = \"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   * 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: IcCardSizes = \"medium\";\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  disconnectedCallback(): void {\n    if (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(mutationList, \"image\", this)\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(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.updateTheme(theme.mode);\n  }\n\n  /**\n   * Sets focus on the card.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.el.shadowRoot.querySelector(\"a\")) {\n      this.el.shadowRoot.querySelector(\"a\").focus();\n    } else if (this.el.shadowRoot.querySelector(\"button\")) {\n      this.el.shadowRoot.querySelector(\"button\").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(newTheme: IcThemeForeground = null): void {\n    const foregroundColor = getThemeFromContext(this.el, newTheme || null);\n\n    if (foregroundColor !== IcThemeForegroundEnum.Default) {\n      this.appearance = foregroundColor;\n    }\n  }\n\n  render() {\n    const {\n      clickable,\n      disabled,\n      heading,\n      message,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      target,\n      parentIsAnchorTag,\n      isFocussed,\n      size,\n    } = this;\n\n    const Component = parentIsAnchorTag\n      ? \"div\"\n      : clickable\n      ? this.href === undefined\n        ? \"button\"\n        : \"a\"\n      : \"div\";\n\n    const attrs = Component == \"a\" && {\n      href: href,\n      hrefLang: hreflang,\n      referrerPolicy: referrerpolicy,\n      rel: rel,\n      target: target,\n    };\n\n    return (\n      <Component\n        class={{\n          [\"card\"]: true,\n          [\"clickable\"]: clickable && !disabled,\n          [\"disabled\"]: disabled,\n          [\"focussed\"]: isFocussed,\n          [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n          [`${size}`]: true,\n          [\"with-icon\"]: isSlotUsed(this.el, \"icon\"),\n          [\"with-image\"]: isSlotUsed(this.el, \"image\"),\n        }}\n        tabindex={clickable && !parentIsAnchorTag ? 0 : null}\n        aria-disabled={disabled ? \"true\" : null}\n        disabled={disabled ? true : null}\n        {...attrs}\n      >\n        {isSlotUsed(this.el, \"image\") && (\n          <div class={{ [\"image\"]: true }}>\n            <slot name=\"image\"></slot>\n          </div>\n        )}\n        <div class=\"card-content\">\n          <div class=\"card-header\">\n            {isSlotUsed(this.el, \"icon\") && (\n              <div class=\"icon\">\n                <slot name=\"icon\" />\n              </div>\n            )}\n            <div class=\"card-title\">\n              <slot name=\"heading\">\n                <ic-typography variant=\"h4\">\n                  <p>{heading}</p>\n                </ic-typography>\n              </slot>\n            </div>\n          </div>\n          {(message || isSlotUsed(this.el, \"message\")) && (\n            <div\n              class={{\n                [\"card-message\"]: true,\n              }}\n            >\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      </Component>\n    );\n  }\n}\n"]}