@ukic/web-components 2.2.0 → 2.4.0

package/dist/collection/components/ic-empty-state/ic-empty-state.js

@@ -0,0 +1,160 @@
+import { h, Host } from "@stencil/core";
+import { isSlotUsed, onComponentRequiredPropUndefined, } from "../../utils/helpers";
+/**
+ * @slot image - Content is placed at the top above all other content.
+ * @slot actions - Content is placed at the bottom below all other content.
+ */
+export class EmptyState {
+  constructor() {
+    this.aligned = "left";
+    this.body = undefined;
+    this.bodyMaxLines = undefined;
+    this.heading = undefined;
+    this.imageSize = "default";
+    this.subheading = undefined;
+  }
+  componentDidLoad() {
+    onComponentRequiredPropUndefined([{ prop: this.heading, propName: "heading" }], "Empty State");
+  }
+  render() {
+    const { aligned, body, bodyMaxLines, heading, imageSize, subheading } = this;
+    return (h(Host, { class: {
+        [`${aligned}`]: true,
+        [`image-${imageSize}`]: isSlotUsed(this.el, "image"),
+      } }, isSlotUsed(this.el, "image") && h("slot", { name: "image" }), h("div", null, h("ic-typography", { variant: "h4" }, heading), subheading && (h("ic-typography", { variant: "subtitle-small" }, subheading)), body && (h("ic-typography", { maxLines: bodyMaxLines }, body))), isSlotUsed(this.el, "actions") && (h("div", { class: "action-area" }, h("slot", { name: "actions" })))));
+  }
+  static get is() { return "ic-empty-state"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ic-empty-state.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ic-empty-state.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "aligned": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcEmptyStateAlignment",
+          "resolved": "\"center\" | \"left\" | \"right\"",
+          "references": {
+            "IcEmptyStateAlignment": {
+              "location": "import",
+              "path": "./ic-empty-state.types",
+              "id": "src/components/ic-empty-state/ic-empty-state.types.ts::IcEmptyStateAlignment"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The alignment of the empty state container."
+        },
+        "attribute": "aligned",
+        "reflect": false,
+        "defaultValue": "\"left\""
+      },
+      "body": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The body text rendered in the empty state container."
+        },
+        "attribute": "body",
+        "reflect": false
+      },
+      "bodyMaxLines": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The number of lines of body text to display before truncating."
+        },
+        "attribute": "body-max-lines",
+        "reflect": false
+      },
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The title rendered in the empty state container."
+        },
+        "attribute": "heading",
+        "reflect": false
+      },
+      "imageSize": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcSizes",
+          "resolved": "\"default\" | \"large\" | \"small\"",
+          "references": {
+            "IcSizes": {
+              "location": "import",
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::IcSizes"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The size of the image or icon used in the image slot."
+        },
+        "attribute": "image-size",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
+      "subheading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The subtitle rendered in the empty state container."
+        },
+        "attribute": "subheading",
+        "reflect": false
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=ic-empty-state.js.map

package/dist/collection/components/ic-empty-state/ic-empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-empty-state.js","sourceRoot":"","sources":["../../../src/components/ic-empty-state/ic-empty-state.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGlE,OAAO,EACL,UAAU,EACV,gCAAgC,GACjC,MAAM,qBAAqB,CAAC;AAG7B;;;GAGG;AAMH,MAAM,OAAO,UAAU;;mBAMqB,MAAM;;;;qBAoBlB,SAAS;;;EAOvC,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7C,aAAa,CACd,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,GACnE,IAAI,CAAC;IACP,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,GAAG,OAAO,EAAE,CAAC,EAAE,IAAI;QACpB,CAAC,SAAS,SAAS,EAAE,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC;OACrD;MAEA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,IAAI,YAAM,IAAI,EAAC,OAAO,GAAQ;MAC3D;QACE,qBAAe,OAAO,EAAC,IAAI,IAAE,OAAO,CAAiB;QACpD,UAAU,IAAI,CACb,qBAAe,OAAO,EAAC,gBAAgB,IAAE,UAAU,CAAiB,CACrE;QACA,IAAI,IAAI,CACP,qBAAe,QAAQ,EAAE,YAAY,IAAG,IAAI,CAAiB,CAC9D,CACG;MACL,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CACjC,WAAK,KAAK,EAAC,aAAa;QACtB,YAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACP,CACI,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, Host, Prop, Element } from \"@stencil/core\";\n\nimport { IcEmptyStateAlignment } from \"./ic-empty-state.types\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcSizes } from \"../../utils/types\";\n\n/**\n * @slot image - Content is placed at the top above all other content.\n * @slot actions - Content is placed at the bottom below all other content.\n */\n@Component({\n  tag: \"ic-empty-state\",\n  styleUrl: \"ic-empty-state.css\",\n  shadow: true,\n})\nexport class EmptyState {\n  @Element() el: HTMLIcEmptyStateElement;\n\n  /**\n   * The alignment of the empty state container.\n   */\n  @Prop() aligned?: IcEmptyStateAlignment = \"left\";\n\n  /**\n   * The body text rendered in the empty state container.\n   */\n  @Prop() body?: string;\n\n  /**\n   * The number of lines of body text to display before truncating.\n   */\n  @Prop() bodyMaxLines?: number;\n\n  /**\n   * The title rendered in the empty state container.\n   */\n  @Prop() heading!: string;\n\n  /**\n   * The size of the image or icon used in the image slot.\n   */\n  @Prop() imageSize?: IcSizes = \"default\";\n\n  /**\n   * The subtitle rendered in the empty state container.\n   */\n  @Prop() subheading?: string;\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.heading, propName: \"heading\" }],\n      \"Empty State\"\n    );\n  }\n\n  render() {\n    const { aligned, body, bodyMaxLines, heading, imageSize, subheading } =\n      this;\n    return (\n      <Host\n        class={{\n          [`${aligned}`]: true,\n          [`image-${imageSize}`]: isSlotUsed(this.el, \"image\"),\n        }}\n      >\n        {isSlotUsed(this.el, \"image\") && <slot name=\"image\"></slot>}\n        <div>\n          <ic-typography variant=\"h4\">{heading}</ic-typography>\n          {subheading && (\n            <ic-typography variant=\"subtitle-small\">{subheading}</ic-typography>\n          )}\n          {body && (\n            <ic-typography maxLines={bodyMaxLines}>{body}</ic-typography>\n          )}\n        </div>\n        {isSlotUsed(this.el, \"actions\") && (\n          <div class=\"action-area\">\n            <slot name=\"actions\" />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-empty-state/ic-empty-state.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ic-empty-state.types.js.map

package/dist/collection/components/ic-empty-state/ic-empty-state.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-empty-state.types.js","sourceRoot":"","sources":["../../../src/components/ic-empty-state/ic-empty-state.types.ts"],"names":[],"mappings":"","sourcesContent":["export type IcEmptyStateAlignment = \"left\" | \"center\" | \"right\";\n"]}

package/dist/collection/components/ic-empty-state/test/a11y/ic-empty-state.test.a11y.js

@@ -0,0 +1,38 @@
+import { fixture } from "@open-wc/testing-helpers";
+import { axe } from "jest-axe";
+import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
+describe("empty state component", () => {
+  it("passes accessibility", async () => {
+    const el = await fixture(`
+    <ic-empty-state
+      heading="Empty state title"
+      subheading="Empty state subtitle"
+      body="Body text for empty state."
+    >
+      <svg
+        slot="image"
+        style="height:326px;width:326px;"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 1600 900"
+      >
+        <rect fill="#ff7700" width="1600" height="1600" y="-350" />
+        <polygon fill="#cc0000" points="957 450 539 900 1396 900" />
+        <polygon fill="#aa0000" points="957 450 872.9 900 1396 900" />
+        <polygon fill="#c50022" points="-60 900 398 662 816 900" />
+        <polygon fill="#a3001b" points="337 900 398 662 816 900" />
+        <polygon fill="#be0044" points="1203 546 1552 900 876 900" />
+        <polygon fill="#9c0036" points="1203 546 1552 900 1162 900" />
+        <polygon fill="#b80066" points="641 695 886 900 367 900" />
+        <polygon fill="#960052" points="587 900 641 695 886 900" />
+        <polygon fill="#b10088" points="1710 900 1401 632 1096 900" />
+        <polygon fill="#8f006d" points="1710 900 1401 632 1365 900" />
+        <polygon fill="#aa00aa" points="1210 900 971 687 725 900" />
+        <polygon fill="#880088" points="943 900 1210 900 971 687" /></svg
+      ><ic-button slot="actions">Action</ic-button>
+      <ic-link href="/" slot="actions">Standalone link</ic-link></ic-empty-state
+    >`);
+    checkShadowElementRendersCorrectly(el);
+    expect(await axe(el)).toHaveNoViolations();
+  });
+});
+//# sourceMappingURL=ic-empty-state.test.a11y.js.map

package/dist/collection/components/ic-empty-state/test/a11y/ic-empty-state.test.a11y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-empty-state.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-empty-state/test/a11y/ic-empty-state.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;EACrC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;MA2BvB,CAAC,CAAC;IACJ,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\ndescribe(\"empty state component\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(`\n    <ic-empty-state\n      heading=\"Empty state title\"\n      subheading=\"Empty state subtitle\"\n      body=\"Body text for empty state.\"\n    >\n      <svg\n        slot=\"image\"\n        style=\"height:326px;width:326px;\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 1600 900\"\n      >\n        <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n        <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n        <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n        <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n        <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n        <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n        <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n        <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n        <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n        <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n        <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n        <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n        <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" /></svg\n      ><ic-button slot=\"actions\">Action</ic-button>\n      <ic-link href=\"/\" slot=\"actions\">Standalone link</ic-link></ic-empty-state\n    >`);\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

package/dist/collection/components/ic-empty-state/test/basic/ic-empty-state.spec.js

@@ -0,0 +1,86 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { EmptyState } from "../../ic-empty-state";
+import { Button } from "../../../ic-button/ic-button";
+describe("ic-empty state", () => {
+  it("should render", async () => {
+    const page = await newSpecPage({
+      components: [EmptyState],
+      html: `<ic-empty-state heading="Empty state title"></ic-empty-state>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render with subheading and body text", async () => {
+    const page = await newSpecPage({
+      components: [EmptyState],
+      html: `<ic-empty-state heading="Empty state title" subheading="Empty state subtitle" body="Body text for empty state."></ic-empty-state>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render with a slotted image", async () => {
+    const page = await newSpecPage({
+      components: [EmptyState],
+      html: `<ic-empty-state heading="Empty state title">
+                <svg slot="image" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+                    <path d="M0 0h24v24H0z" fill="none"/>
+                    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+                    <title>close icon</title>
+                </svg>
+            </ic-empty-state>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render with actions", async () => {
+    const page = await newSpecPage({
+      components: [EmptyState, Button],
+      html: `<ic-empty-state heading="Empty state title">
+            <ic-button slot="actions">Action</ic-button>
+            </ic-empty-state>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render right aligned", async () => {
+    const page = await newSpecPage({
+      components: [EmptyState],
+      html: `<ic-empty-state heading="Empty state title" subheading="Empty state subtitle" body="Body text for empty state." aligned="right"></ic-empty-state>`,
+    });
+    expect(page.rootInstance.aligned).toMatch("right");
+    expect(page.root.classList.contains("right")).toBeTruthy();
+  });
+  it("should render centre aligned", async () => {
+    const page = await newSpecPage({
+      components: [EmptyState],
+      html: `<ic-empty-state heading="Empty state title" subheading="Empty state subtitle" body="Body text for empty state." aligned="center"></ic-empty-state>`,
+    });
+    expect(page.rootInstance.aligned).toMatch("center");
+    expect(page.root.classList.contains("center")).toBeTruthy();
+  });
+  it("should render with a small image size", async () => {
+    const page = await newSpecPage({
+      components: [EmptyState],
+      html: `<ic-empty-state heading="Empty state title" subheading="Empty state subtitle" body="Body text for empty state." image-size="small">
+                <svg slot="image" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+                    <path d="M0 0h24v24H0z" fill="none"/>
+                    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+                    <title>close icon</title>
+                </svg>
+            </ic-empty-state>`,
+    });
+    expect(page.rootInstance.imageSize).toMatch("small");
+    expect(page.root.classList.contains("image-small")).toBeTruthy();
+  });
+  it("should render with a large image size", async () => {
+    const page = await newSpecPage({
+      components: [EmptyState],
+      html: `<ic-empty-state heading="Empty state title" subheading="Empty state subtitle" body="Body text for empty state." image-size="large">
+                <svg slot="image" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+                    <path d="M0 0h24v24H0z" fill="none"/>
+                    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+                    <title>close icon</title>
+                </svg>
+            </ic-empty-state>`,
+    });
+    expect(page.rootInstance.imageSize).toMatch("large");
+    expect(page.root.classList.contains("image-large")).toBeTruthy();
+  });
+});
+//# sourceMappingURL=ic-empty-state.spec.js.map

package/dist/collection/components/ic-empty-state/test/basic/ic-empty-state.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-empty-state.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-empty-state/test/basic/ic-empty-state.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { EmptyState } from \"../../ic-empty-state\";\nimport { Button } from \"../../../ic-button/ic-button\";\n\ndescribe(\"ic-empty state\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [EmptyState],\n      html: `<ic-empty-state heading=\"Empty state title\"></ic-empty-state>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with subheading and body text\", async () => {\n    const page = await newSpecPage({\n      components: [EmptyState],\n      html: `<ic-empty-state heading=\"Empty state title\" subheading=\"Empty state subtitle\" body=\"Body text for empty state.\"></ic-empty-state>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with a slotted image\", async () => {\n    const page = await newSpecPage({\n      components: [EmptyState],\n      html: `<ic-empty-state heading=\"Empty state title\">\n                <svg slot=\"image\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\">\n                    <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n                    <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/>\n                    <title>close icon</title>\n                </svg>\n            </ic-empty-state>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with actions\", async () => {\n    const page = await newSpecPage({\n      components: [EmptyState, Button],\n      html: `<ic-empty-state heading=\"Empty state title\">\n            <ic-button slot=\"actions\">Action</ic-button>\n            </ic-empty-state>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render right aligned\", async () => {\n    const page = await newSpecPage({\n      components: [EmptyState],\n      html: `<ic-empty-state heading=\"Empty state title\" subheading=\"Empty state subtitle\" body=\"Body text for empty state.\" aligned=\"right\"></ic-empty-state>`,\n    });\n\n    expect(page.rootInstance.aligned).toMatch(\"right\");\n    expect(page.root.classList.contains(\"right\")).toBeTruthy();\n  });\n\n  it(\"should render centre aligned\", async () => {\n    const page = await newSpecPage({\n      components: [EmptyState],\n      html: `<ic-empty-state heading=\"Empty state title\" subheading=\"Empty state subtitle\" body=\"Body text for empty state.\" aligned=\"center\"></ic-empty-state>`,\n    });\n\n    expect(page.rootInstance.aligned).toMatch(\"center\");\n    expect(page.root.classList.contains(\"center\")).toBeTruthy();\n  });\n\n  it(\"should render with a small image size\", async () => {\n    const page = await newSpecPage({\n      components: [EmptyState],\n      html: `<ic-empty-state heading=\"Empty state title\" subheading=\"Empty state subtitle\" body=\"Body text for empty state.\" image-size=\"small\">\n                <svg slot=\"image\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\">\n                    <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n                    <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/>\n                    <title>close icon</title>\n                </svg>\n            </ic-empty-state>`,\n    });\n\n    expect(page.rootInstance.imageSize).toMatch(\"small\");\n    expect(page.root.classList.contains(\"image-small\")).toBeTruthy();\n  });\n\n  it(\"should render with a large image size\", async () => {\n    const page = await newSpecPage({\n      components: [EmptyState],\n      html: `<ic-empty-state heading=\"Empty state title\" subheading=\"Empty state subtitle\" body=\"Body text for empty state.\" image-size=\"large\">\n                <svg slot=\"image\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\">\n                    <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n                    <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/>\n                    <title>close icon</title>\n                </svg>\n            </ic-empty-state>`,\n    });\n\n    expect(page.rootInstance.imageSize).toMatch(\"large\");\n    expect(page.root.classList.contains(\"image-large\")).toBeTruthy();\n  });\n});\n"]}

package/dist/collection/components/ic-footer/ic-footer.js

@@ -10,6 +10,7 @@ import { IcThemeForegroundEnum, } from "../../utils/types";
  */
 export class Footer {
   constructor() {
+    this.resizeObserver = null;
     this.resizeObserverCallback = (currSize) => {
       if (currSize !== this.deviceSize) {
         this.deviceSize = currSize;
@@ -33,7 +34,9 @@ export class Footer {
     this.groupLinks = false;
   }
   disconnectedCallback() {
-    this.resizeObserver.disconnect();
+    if (this.resizeObserver !== null) {
+      this.resizeObserver.disconnect();
+    }
   }
   componentWillLoad() {
     this.deviceSize = getCurrentDeviceSize();
@@ -102,7 +105,8 @@ export class Footer {
           "references": {
             "IcAlignment": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::IcAlignment"
             }
           }
         },
@@ -125,7 +129,8 @@ export class Footer {
           "references": {
             "IcFooterBreakpoints": {
               "location": "import",
-              "path": "./ic-footer.types"
+              "path": "./ic-footer.types",
+              "id": "src/components/ic-footer/ic-footer.types.tsx::IcFooterBreakpoints"
             }
           }
         },

package/dist/collection/components/ic-footer/ic-footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-footer.js","sourceRoot":"","sources":["../../../src/components/ic-footer/ic-footer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  State,\n  h,\n  Host,\n  Listen,\n} from \"@stencil/core\";\nimport { IC_DEVICE_SIZES } from \"../../utils/constants\";\nimport {\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  checkResizeObserver,\n  hasClassificationBanner,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport {\n  IcAlignment,\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcFooterBreakpoints } from \"./ic-footer.types\";\n\n/**\n * @slot description - Content will be rendered at the top of the footer.\n * @slot link - Content will be rendered between description and logos.\n * @slot logo - Content will be rendered underneath footer links.\n * @slot caption - Content will be rendered above Crown Copyright.\n */\n\n@Component({\n  tag: \"ic-footer\",\n  styleUrl: \"ic-footer.css\",\n  shadow: true,\n})\nexport class Footer {\n  private footerEl: HTMLElement;\n  private resizeObserver: ResizeObserver;\n\n  @Element() el: HTMLIcFooterElement;\n\n  @State() deviceSize: number = IC_DEVICE_SIZES.XL;\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  /**\n   * The alignment of the section containers used within the footer.\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n\n  /**\n   * The screen size breakpoint at which to switch to the small layout.\n   */\n  @Prop() breakpoint?: IcFooterBreakpoints = \"medium\";\n\n  /**\n   * The caption displayed at the bottom of the footer.\n   */\n  @Prop() caption: string;\n\n  /**\n   * If `true`, the footer will display the crown copyright at the bottom.\n   */\n  @Prop() copyright: boolean = true;\n\n  /**\n   * The description displayed at the top of the footer.\n   */\n  @Prop() description: string;\n\n  /**\n   * If `true`, the footer will be set up to handle link groups instead of standalone links.\n   */\n  @Prop() groupLinks?: boolean = false;\n\n  /**\n   *  @internal Triggers on page resize and triggers style changes in footer links and link groups\n   */\n  @Event() footerResized: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    this.resizeObserver.disconnect();\n  }\n\n  componentWillLoad(): void {\n    this.deviceSize = getCurrentDeviceSize();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  private isSmall() {\n    const bp = this.breakpoint;\n\n    return bp === \"extra small\"\n      ? this.deviceSize < IC_DEVICE_SIZES.XS\n      : bp === \"small\"\n      ? this.deviceSize < IC_DEVICE_SIZES.S\n      : bp === \"medium\"\n      ? this.deviceSize < IC_DEVICE_SIZES.M\n      : bp === \"large\"\n      ? this.deviceSize < IC_DEVICE_SIZES.L\n      : bp === \"extra large\"\n      ? this.deviceSize < IC_DEVICE_SIZES.XL\n      : false;\n  }\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n    }\n    this.footerResized.emit();\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(this.footerEl);\n  };\n\n  render() {\n    const {\n      aligned,\n      caption,\n      copyright,\n      description,\n      groupLinks,\n      foregroundColor,\n    } = this;\n    const small = this.isSmall();\n\n    return (\n      <Host\n        class={{\n          footer: true,\n          [`footer-${small ? \"small\" : \"sparse\"}`]: true,\n          [`footer-${groupLinks ? \"grouped\" : \"ungrouped\"}`]: true,\n          [`footer-${foregroundColor}`]: true,\n          // Slots will be able to infer their own color\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [IcThemeForegroundEnum.Light]:\n            foregroundColor === IcThemeForegroundEnum.Light,\n        }}\n      >\n        <footer ref={(footerEl) => (this.footerEl = footerEl)}>\n          {/* Description */}\n          <div class=\"footer-description\">\n            <ic-section-container aligned={aligned} fullHeight={true}>\n              <div class=\"footer-description-inner\">\n                <ic-typography variant=\"body\">\n                  <slot name=\"description\">{description}</slot>\n                </ic-typography>\n              </div>\n            </ic-section-container>\n          </div>\n\n          {/* Links */}\n          {isSlotUsed(this.el, \"link\") && (\n            <div class=\"footer-links\">\n              {groupLinks && small ? (\n                <div class=\"footer-links-inner\">\n                  <slot name=\"link\" />\n                </div>\n              ) : (\n                <ic-section-container fullHeight aligned={aligned}>\n                  <div class=\"footer-links-inner\">\n                    <slot name=\"link\" />\n                  </div>\n                </ic-section-container>\n              )}\n            </div>\n          )}\n\n          {/* Compliance (logo, caption, copyright) */}\n          <div class=\"footer-compliance\">\n            <ic-section-container aligned={aligned} fullHeight={true}>\n              <div class=\"footer-compliance-inner\">\n                {isSlotUsed(this.el, \"logo\") && (\n                  <div class=\"footer-logo\">\n                    {/* Logo */}\n                    <slot name=\"logo\" />\n                  </div>\n                )}\n                {(isSlotUsed(this.el, \"caption\") || caption) && (\n                  <div class=\"footer-caption\">\n                    <ic-typography\n                      variant={\n                        this.deviceSize <= IC_DEVICE_SIZES.M\n                          ? \"caption\"\n                          : \"body\"\n                      }\n                    >\n                      <slot name=\"caption\">{caption}</slot>\n                    </ic-typography>\n                  </div>\n                )}\n                {copyright && (\n                  <div\n                    class={{\n                      [\"footer-copyright\"]: true,\n                      [\"classification-spacing\"]: hasClassificationBanner(),\n                    }}\n                  >\n                    <ic-typography\n                      variant={\n                        this.deviceSize <= IC_DEVICE_SIZES.M\n                          ? \"caption-uppercase\"\n                          : \"label-uppercase\"\n                      }\n                    >\n                      &copy; Crown Copyright\n                    </ic-typography>\n                  </div>\n                )}\n              </div>\n            </ic-section-container>\n          </div>\n        </footer>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-footer.js","sourceRoot":"","sources":["../../../src/components/ic-footer/ic-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,KAAK,EACL,CAAC,EACD,IAAI,EACJ,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EACL,oBAAoB,EACpB,uBAAuB,EACvB,mBAAmB,EACnB,uBAAuB,EACvB,UAAU,GACX,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAIL,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAG3B;;;;;GAKG;AAOH,MAAM,OAAO,MAAM;;IAET,mBAAc,GAAmB,IAAI,CAAC;IA8EtC,2BAAsB,GAAG,CAAC,QAAgB,EAAE,EAAE;MACpD,IAAI,QAAQ,KAAK,IAAI,CAAC,UAAU,EAAE;QAChC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC;OAC5B;MACD,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;IAC5B,CAAC,CAAC;IAEM,sBAAiB,GAAG,GAAG,EAAE;MAC/B,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;QAC5C,MAAM,QAAQ,GAAG,oBAAoB,EAAE,CAAC;QACxC,IAAI,CAAC,sBAAsB,CAAC,QAAQ,CAAC,CAAC;MACxC,CAAC,CAAC,CAAC;MAEH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC7C,CAAC,CAAC;sBAxF4B,eAAe,CAAC,EAAE;2BACF,uBAAuB,EAAE;mBAKvC,MAAM;sBAKK,QAAQ;;qBAUtB,IAAI;;sBAUF,KAAK;;EAOpC,oBAAoB;IAClB,IAAI,IAAI,CAAC,cAAc,KAAK,IAAI,EAAE;MAChC,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;KAClC;EACH,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,UAAU,GAAG,oBAAoB,EAAE,CAAC;EAC3C,CAAC;EAED,gBAAgB;IACd,mBAAmB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;EAC9C,CAAC;EAGD,kBAAkB,CAAC,EAAe;IAChC,MAAM,KAAK,GAAY,EAAE,CAAC,MAAM,CAAC;IACjC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC;EACpC,CAAC;EAEO,OAAO;IACb,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC;IAE3B,OAAO,EAAE,KAAK,aAAa;MACzB,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,eAAe,CAAC,EAAE;MACtC,CAAC,CAAC,EAAE,KAAK,OAAO;QAChB,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,eAAe,CAAC,CAAC;QACrC,CAAC,CAAC,EAAE,KAAK,QAAQ;UACjB,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,eAAe,CAAC,CAAC;UACrC,CAAC,CAAC,EAAE,KAAK,OAAO;YAChB,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,eAAe,CAAC,CAAC;YACrC,CAAC,CAAC,EAAE,KAAK,aAAa;cACtB,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,eAAe,CAAC,EAAE;cACtC,CAAC,CAAC,KAAK,CAAC;EACZ,CAAC;EAkBD,MAAM;IACJ,MAAM,EACJ,OAAO,EACP,OAAO,EACP,SAAS,EACT,WAAW,EACX,UAAU,EACV,eAAe,GAChB,GAAG,IAAI,CAAC;IACT,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;IAE7B,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,MAAM,EAAE,IAAI;QACZ,CAAC,UAAU,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,EAAE,IAAI;QAC9C,CAAC,UAAU,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,EAAE,IAAI;QACxD,CAAC,UAAU,eAAe,EAAE,CAAC,EAAE,IAAI;QACnC,8CAA8C;QAC9C,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAC1B,eAAe,KAAK,qBAAqB,CAAC,IAAI;QAChD,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAC3B,eAAe,KAAK,qBAAqB,CAAC,KAAK;OAClD;MAED,cAAQ,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAEnD,WAAK,KAAK,EAAC,oBAAoB;UAC7B,4BAAsB,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,IAAI;YACtD,WAAK,KAAK,EAAC,0BAA0B;cACnC,qBAAe,OAAO,EAAC,MAAM;gBAC3B,YAAM,IAAI,EAAC,aAAa,IAAE,WAAW,CAAQ,CAC/B,CACZ,CACe,CACnB;QAGL,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,IAAI,CAC9B,WAAK,KAAK,EAAC,cAAc,IACtB,UAAU,IAAI,KAAK,CAAC,CAAC,CAAC,CACrB,WAAK,KAAK,EAAC,oBAAoB;UAC7B,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACP,CAAC,CAAC,CAAC,CACF,4BAAsB,UAAU,QAAC,OAAO,EAAE,OAAO;UAC/C,WAAK,KAAK,EAAC,oBAAoB;YAC7B,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACe,CACxB,CACG,CACP;QAGD,WAAK,KAAK,EAAC,mBAAmB;UAC5B,4BAAsB,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,IAAI;YACtD,WAAK,KAAK,EAAC,yBAAyB;cACjC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,IAAI,CAC9B,WAAK,KAAK,EAAC,aAAa;gBAEtB,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACP;cACA,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,OAAO,CAAC,IAAI,CAC9C,WAAK,KAAK,EAAC,gBAAgB;gBACzB,qBACE,OAAO,EACL,IAAI,CAAC,UAAU,IAAI,eAAe,CAAC,CAAC;oBAClC,CAAC,CAAC,SAAS;oBACX,CAAC,CAAC,MAAM;kBAGZ,YAAM,IAAI,EAAC,SAAS,IAAE,OAAO,CAAQ,CACvB,CACZ,CACP;cACA,SAAS,IAAI,CACZ,WACE,KAAK,EAAE;kBACL,CAAC,kBAAkB,CAAC,EAAE,IAAI;kBAC1B,CAAC,wBAAwB,CAAC,EAAE,uBAAuB,EAAE;iBACtD;gBAED,qBACE,OAAO,EACL,IAAI,CAAC,UAAU,IAAI,eAAe,CAAC,CAAC;oBAClC,CAAC,CAAC,mBAAmB;oBACrB,CAAC,CAAC,iBAAiB,6BAIT,CACZ,CACP,CACG,CACe,CACnB,CACC,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  State,\n  h,\n  Host,\n  Listen,\n} from \"@stencil/core\";\nimport { IC_DEVICE_SIZES } from \"../../utils/constants\";\nimport {\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  checkResizeObserver,\n  hasClassificationBanner,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport {\n  IcAlignment,\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcFooterBreakpoints } from \"./ic-footer.types\";\n\n/**\n * @slot description - Content will be rendered at the top of the footer.\n * @slot link - Content will be rendered between description and logos.\n * @slot logo - Content will be rendered underneath footer links.\n * @slot caption - Content will be rendered above Crown Copyright.\n */\n\n@Component({\n  tag: \"ic-footer\",\n  styleUrl: \"ic-footer.css\",\n  shadow: true,\n})\nexport class Footer {\n  private footerEl: HTMLElement;\n  private resizeObserver: ResizeObserver = null;\n\n  @Element() el: HTMLIcFooterElement;\n\n  @State() deviceSize: number = IC_DEVICE_SIZES.XL;\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  /**\n   * The alignment of the section containers used within the footer.\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n\n  /**\n   * The screen size breakpoint at which to switch to the small layout.\n   */\n  @Prop() breakpoint?: IcFooterBreakpoints = \"medium\";\n\n  /**\n   * The caption displayed at the bottom of the footer.\n   */\n  @Prop() caption: string;\n\n  /**\n   * If `true`, the footer will display the crown copyright at the bottom.\n   */\n  @Prop() copyright: boolean = true;\n\n  /**\n   * The description displayed at the top of the footer.\n   */\n  @Prop() description: string;\n\n  /**\n   * If `true`, the footer will be set up to handle link groups instead of standalone links.\n   */\n  @Prop() groupLinks?: boolean = false;\n\n  /**\n   *  @internal Triggers on page resize and triggers style changes in footer links and link groups\n   */\n  @Event() footerResized: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.deviceSize = getCurrentDeviceSize();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  private isSmall() {\n    const bp = this.breakpoint;\n\n    return bp === \"extra small\"\n      ? this.deviceSize < IC_DEVICE_SIZES.XS\n      : bp === \"small\"\n      ? this.deviceSize < IC_DEVICE_SIZES.S\n      : bp === \"medium\"\n      ? this.deviceSize < IC_DEVICE_SIZES.M\n      : bp === \"large\"\n      ? this.deviceSize < IC_DEVICE_SIZES.L\n      : bp === \"extra large\"\n      ? this.deviceSize < IC_DEVICE_SIZES.XL\n      : false;\n  }\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n    }\n    this.footerResized.emit();\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(this.footerEl);\n  };\n\n  render() {\n    const {\n      aligned,\n      caption,\n      copyright,\n      description,\n      groupLinks,\n      foregroundColor,\n    } = this;\n    const small = this.isSmall();\n\n    return (\n      <Host\n        class={{\n          footer: true,\n          [`footer-${small ? \"small\" : \"sparse\"}`]: true,\n          [`footer-${groupLinks ? \"grouped\" : \"ungrouped\"}`]: true,\n          [`footer-${foregroundColor}`]: true,\n          // Slots will be able to infer their own color\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [IcThemeForegroundEnum.Light]:\n            foregroundColor === IcThemeForegroundEnum.Light,\n        }}\n      >\n        <footer ref={(footerEl) => (this.footerEl = footerEl)}>\n          {/* Description */}\n          <div class=\"footer-description\">\n            <ic-section-container aligned={aligned} fullHeight={true}>\n              <div class=\"footer-description-inner\">\n                <ic-typography variant=\"body\">\n                  <slot name=\"description\">{description}</slot>\n                </ic-typography>\n              </div>\n            </ic-section-container>\n          </div>\n\n          {/* Links */}\n          {isSlotUsed(this.el, \"link\") && (\n            <div class=\"footer-links\">\n              {groupLinks && small ? (\n                <div class=\"footer-links-inner\">\n                  <slot name=\"link\" />\n                </div>\n              ) : (\n                <ic-section-container fullHeight aligned={aligned}>\n                  <div class=\"footer-links-inner\">\n                    <slot name=\"link\" />\n                  </div>\n                </ic-section-container>\n              )}\n            </div>\n          )}\n\n          {/* Compliance (logo, caption, copyright) */}\n          <div class=\"footer-compliance\">\n            <ic-section-container aligned={aligned} fullHeight={true}>\n              <div class=\"footer-compliance-inner\">\n                {isSlotUsed(this.el, \"logo\") && (\n                  <div class=\"footer-logo\">\n                    {/* Logo */}\n                    <slot name=\"logo\" />\n                  </div>\n                )}\n                {(isSlotUsed(this.el, \"caption\") || caption) && (\n                  <div class=\"footer-caption\">\n                    <ic-typography\n                      variant={\n                        this.deviceSize <= IC_DEVICE_SIZES.M\n                          ? \"caption\"\n                          : \"body\"\n                      }\n                    >\n                      <slot name=\"caption\">{caption}</slot>\n                    </ic-typography>\n                  </div>\n                )}\n                {copyright && (\n                  <div\n                    class={{\n                      [\"footer-copyright\"]: true,\n                      [\"classification-spacing\"]: hasClassificationBanner(),\n                    }}\n                  >\n                    <ic-typography\n                      variant={\n                        this.deviceSize <= IC_DEVICE_SIZES.M\n                          ? \"caption-uppercase\"\n                          : \"label-uppercase\"\n                      }\n                    >\n                      &copy; Crown Copyright\n                    </ic-typography>\n                  </div>\n                )}\n              </div>\n            </ic-section-container>\n          </div>\n        </footer>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-footer-link/ic-footer-link.js

@@ -124,7 +124,8 @@ export class FooterLink {
           "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"
+              "location": "global",
+              "id": "global::ReferrerPolicy"
             }
           }
         },

package/dist/collection/components/ic-footer-link/ic-footer-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-footer-link.js","sourceRoot":"","sources":["../../../src/components/ic-footer-link/ic-footer-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,CAAC,EACD,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,YAAY,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAG5E,OAAO,SAAS,MAAM,4BAA4B,CAAC;AAWnD,MAAM,OAAO,UAAU;;sBAGS,YAAY,CAAC,EAAE;wBACP,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE;2BACxB,uBAAuB,EAAE;oBAKjC,KAAK;gBAKnB,IAAI;;;;;;EAsB5B,iBAAiB;IACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;EAChD,CAAC;EAGD,mBAAmB;IACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;EAChD,CAAC;EAGD,wBAAwB,CAAC,EAAe;IACtC,MAAM,KAAK,GAAY,EAAE,CAAC,MAAM,CAAC;IACjC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC;EACpC,CAAC;EAEO,WAAW,CAAC,CAAc;IAChC,IAAI,CAAC,CAAC,aAAa,KAAK,IAAI,EAAE;MAC5B,IAAI,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;QAChD,OAAO;UACL,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC;UACzD,OAAO,EAAE,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,gBAAgB,CAAC;SAC9D,CAAC;OACH;WAAM;QACL,OAAO,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;OAC1C;KACF;SAAM;MACL,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;KACzC;EACH,CAAC;EAED,MAAM;IACJ,MAAM,EACJ,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,GAAG,EACH,MAAM,EACN,QAAQ,GACT,GAAG,IAAI,CAAC;IACT,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC;IAExC,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,CAAC,eAAe,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,IAC/C,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QACpB,EAAE,CAAC,EAAE,IAAI;QACT,CAAC,eAAe,IAAI,CAAC,eAAe,EAAE,CAAC,EAAE,IAAI;OAC9C;MAED,SACE,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EAC9C,MAAM,EAAE,MAAM;QAEd,eAAQ;QACP,MAAM,KAAK,QAAQ,IAAI,CACtB,YAAM,KAAK,EAAC,kBAAkB,EAAC,SAAS,EAAE,SAAS,GAAI,CACxD,CACC,CACC,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Listen,\n  Prop,\n  h,\n  State,\n} from \"@stencil/core\";\nimport { DEVICE_SIZES, getThemeForegroundColor } from \"../../utils/helpers\";\nimport { IcTheme, IcThemeForeground } from \"../../utils/types\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\n\ntype FooterConfig = { small: boolean; grouped: boolean };\n\n@Component({\n  tag: \"ic-footer-link\",\n  styleUrl: \"ic-footer-link.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class FooterLink {\n  @Element() el: HTMLIcFooterLinkElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() footerConfig: FooterConfig = { small: false, grouped: false };\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to.\n   */\n  @Prop() href?: string = null;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: 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 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  componentWillLoad(): void {\n    this.footerConfig = this.inferConfig(this.el);\n  }\n\n  @Listen(\"footerResized\", { target: \"document\" })\n  footerResizeHandler(): void {\n    this.footerConfig = this.inferConfig(this.el);\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  footerThemeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  private inferConfig(e: HTMLElement): FooterConfig {\n    if (e.parentElement !== null) {\n      if (e.parentElement.classList.contains(\"footer\")) {\n        return {\n          small: e.parentElement.classList.contains(\"footer-small\"),\n          grouped: e.parentElement.classList.contains(\"footer-grouped\"),\n        };\n      } else {\n        return this.inferConfig(e.parentElement);\n      }\n    } else {\n      return { small: false, grouped: false };\n    }\n  }\n\n  render() {\n    const {\n      footerConfig,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      target,\n      download,\n    } = this;\n    const { small, grouped } = footerConfig;\n\n    return (\n      <Host\n        class={{\n          \"footer-link\": true,\n          [`footer-link-${grouped ? \"grouped\" : \"ungrouped\"}-${\n            small ? \"small\" : \"sparse\"\n          }`]: true,\n          [`footer-link-${this.foregroundColor}`]: true,\n        }}\n      >\n        <a\n          href={href}\n          hreflang={hreflang}\n          referrerPolicy={referrerpolicy}\n          rel={rel}\n          download={download !== false ? download : null}\n          target={target}\n        >\n          <slot />\n          {target === \"_blank\" && (\n            <span class=\"open-in-new-icon\" innerHTML={OpenInNew} />\n          )}\n        </a>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-footer-link.js","sourceRoot":"","sources":["../../../src/components/ic-footer-link/ic-footer-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,CAAC,EACD,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,YAAY,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAG5E,OAAO,SAAS,MAAM,4BAA4B,CAAC;AAWnD,MAAM,OAAO,UAAU;;sBAGS,YAAY,CAAC,EAAE;wBACP,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE;2BACxB,uBAAuB,EAAE;oBAKjC,KAAK;gBAKnB,IAAI;;;;;;EAsB5B,iBAAiB;IACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;EAChD,CAAC;EAGD,mBAAmB;IACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;EAChD,CAAC;EAGD,wBAAwB,CAAC,EAAe;IACtC,MAAM,KAAK,GAAY,EAAE,CAAC,MAAM,CAAC;IACjC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC;EACpC,CAAC;EAEO,WAAW,CAAC,CAAc;IAChC,IAAI,CAAC,CAAC,aAAa,KAAK,IAAI,EAAE;MAC5B,IAAI,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;QAChD,OAAO;UACL,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC;UACzD,OAAO,EAAE,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,gBAAgB,CAAC;SAC9D,CAAC;OACH;WAAM;QACL,OAAO,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;OAC1C;KACF;SAAM;MACL,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;KACzC;EACH,CAAC;EAED,MAAM;IACJ,MAAM,EACJ,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,GAAG,EACH,MAAM,EACN,QAAQ,GACT,GAAG,IAAI,CAAC;IACT,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC;IAExC,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,CAAC,eAAe,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,IAC/C,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QACpB,EAAE,CAAC,EAAE,IAAI;QACT,CAAC,eAAe,IAAI,CAAC,eAAe,EAAE,CAAC,EAAE,IAAI;OAC9C;MAED,SACE,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EAC9C,MAAM,EAAE,MAAM;QAEd,eAAQ;QACP,MAAM,KAAK,QAAQ,IAAI,CACtB,YAAM,KAAK,EAAC,kBAAkB,EAAC,SAAS,EAAE,SAAS,GAAI,CACxD,CACC,CACC,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Listen,\n  Prop,\n  h,\n  State,\n} from \"@stencil/core\";\nimport { DEVICE_SIZES, getThemeForegroundColor } from \"../../utils/helpers\";\nimport { IcTheme, IcThemeForeground } from \"../../utils/types\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\n\ntype FooterConfig = { small: boolean; grouped: boolean };\n\n@Component({\n  tag: \"ic-footer-link\",\n  styleUrl: \"ic-footer-link.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class FooterLink {\n  @Element() el: HTMLIcFooterLinkElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() footerConfig: FooterConfig = { small: false, grouped: false };\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to.\n   */\n  @Prop() href?: string = null;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: 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 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  componentWillLoad(): void {\n    this.footerConfig = this.inferConfig(this.el);\n  }\n\n  @Listen(\"footerResized\", { target: \"document\" })\n  footerResizeHandler(): void {\n    this.footerConfig = this.inferConfig(this.el);\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  footerThemeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  private inferConfig(e: HTMLElement): FooterConfig {\n    if (e.parentElement !== null) {\n      if (e.parentElement.classList.contains(\"footer\")) {\n        return {\n          small: e.parentElement.classList.contains(\"footer-small\"),\n          grouped: e.parentElement.classList.contains(\"footer-grouped\"),\n        };\n      } else {\n        return this.inferConfig(e.parentElement);\n      }\n    } else {\n      return { small: false, grouped: false };\n    }\n  }\n\n  render() {\n    const {\n      footerConfig,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      target,\n      download,\n    } = this;\n    const { small, grouped } = footerConfig;\n\n    return (\n      <Host\n        class={{\n          \"footer-link\": true,\n          [`footer-link-${grouped ? \"grouped\" : \"ungrouped\"}-${\n            small ? \"small\" : \"sparse\"\n          }`]: true,\n          [`footer-link-${this.foregroundColor}`]: true,\n        }}\n      >\n        <a\n          href={href}\n          hreflang={hreflang}\n          referrerPolicy={referrerpolicy}\n          rel={rel}\n          download={download !== false ? download : null}\n          target={target}\n        >\n          <slot />\n          {target === \"_blank\" && (\n            <span class=\"open-in-new-icon\" innerHTML={OpenInNew} />\n          )}\n        </a>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-hero/ic-hero.js

@@ -87,7 +87,8 @@ export class Hero {
           "references": {
             "IcAlignment": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::IcAlignment"
             }
           }
         },
@@ -127,7 +128,8 @@ export class Hero {
           "references": {
             "IcHeroContentAlignments": {
               "location": "import",
-              "path": "./ic-hero.types"
+              "path": "./ic-hero.types",
+              "id": "src/components/ic-hero/ic-hero.types.tsx::IcHeroContentAlignments"
             }
           }
         },

package/dist/collection/components/ic-hero/ic-hero.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-hero.js","sourceRoot":"","sources":["../../../src/components/ic-hero/ic-hero.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n} from \"@stencil/core\";\nimport {\n  IcAlignment,\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport {\n  slotHasContent,\n  getThemeForegroundColor,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcHeroContentAlignments } from \"./ic-hero.types\";\n\n/**\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.\n * @slot secondary - Content will be rendered in the secondary content area.\n */\n\n@Component({\n  tag: \"ic-hero\",\n  styleUrl: \"ic-hero.css\",\n  shadow: true,\n})\nexport class Hero {\n  @Element() el: HTMLIcHeroElement;\n\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n  @State() rightContent: boolean = false;\n  // set by above state\n  @State() leftContentFullWidth: boolean =\n    !this.rightContent && this.secondaryHeading === undefined;\n  @State() scrollFactor: string = \"right -100px\";\n\n  /**\n   * The alignment of the hero.\n   */\n  @Prop() aligned: IcAlignment = \"left\";\n\n  /**\n   * The optional background image.\n   */\n  @Prop() backgroundImage?: string;\n\n  /**\n   * The alignment of the hero content.\n   */\n  @Prop() contentAligned: IcHeroContentAlignments = \"left\";\n\n  /**\n   * If `true`, the background image (if set) will not scroll using a parallax effect.\n   */\n  @Prop() disableBackgroundParallax?: boolean = false;\n\n  /**\n   * The heading of the hero.\n   */\n  @Prop() heading!: string;\n\n  /**\n   * The optional secondary heading, replaced by slotted right content.\n   */\n  @Prop() secondaryHeading?: string;\n\n  /**\n   * The optional secondary subheading, replaced by slotted right content.\n   */\n  @Prop() secondarySubheading?: string;\n\n  /**\n   * If `true`, the small styling will be applied to the hero.\n   */\n  @Prop() small: boolean = false;\n\n  /**\n   * The description for the hero.\n   */\n  @Prop() subheading?: string;\n\n  componentWillLoad(): void {\n    this.rightContent = slotHasContent(this.el, \"secondary\");\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.heading, propName: \"heading\" }],\n      \"Hero\"\n    );\n  }\n\n  componentWillRender(): void {\n    this.rightContent = slotHasContent(this.el, \"secondary\");\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  @Listen(\"scroll\", { target: \"document\" })\n  doScroll(): void {\n    if (this.disableBackgroundParallax) {\n      return;\n    }\n\n    const scrolltotop = document.scrollingElement.scrollTop;\n    const factor = 0.4;\n    const y = -100 + scrolltotop * factor;\n    this.scrollFactor = \"right \" + y + \"px\";\n  }\n\n  render() {\n    const {\n      aligned,\n      small,\n      heading,\n      subheading,\n      secondaryHeading,\n      secondarySubheading,\n      foregroundColor,\n      backgroundImage,\n      scrollFactor,\n    } = this;\n\n    let style = {};\n\n    if (backgroundImage !== undefined) {\n      style = {\n        \"background-image\": \"url(\" + backgroundImage + \")\",\n        \"background-position\": scrollFactor,\n      };\n    }\n\n    return (\n      <Host\n        class={{\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [\"has-background-image\"]: backgroundImage !== undefined,\n          [\"small\"]: small,\n          [\"secondary-heading\"]: !!secondaryHeading,\n        }}\n        style={style}\n      >\n        <ic-section-container\n          aligned={aligned}\n          fullHeight\n          class=\"section-container\"\n        >\n          <div\n            class={{\n              [\"left-container\"]: true,\n              [\"left-container-full-width\"]: this.leftContentFullWidth,\n            }}\n          >\n            <div class=\"heading\">\n              <slot name=\"heading\">\n                <ic-typography\n                  variant={small ? \"h2\" : \"h1\"}\n                  class={{ [\"heading-bottom-spacing\"]: !small }}\n                >\n                  {heading}\n                </ic-typography>\n              </slot>\n            </div>\n            <div class=\"subheading\">\n              <slot name=\"subheading\">\n                <ic-typography variant=\"body\">{subheading}</ic-typography>\n              </slot>\n            </div>\n            <div class=\"interaction-container\">\n              <slot name=\"interaction\"></slot>\n            </div>\n          </div>\n          {(secondaryHeading !== undefined || this.rightContent) && (\n            <div class=\"right-container\">\n              <slot name=\"secondary\">\n                {secondaryHeading && (\n                  <div class=\"secondary-container\">\n                    <div class=\"secondary-heading\">\n                      <ic-typography variant=\"h4\">\n                        {secondaryHeading}\n                      </ic-typography>\n                    </div>\n                    <div class=\"secondary-subheading\">\n                      <ic-typography variant=\"subtitle-small\">\n                        {secondarySubheading}\n                      </ic-typography>\n                    </div>\n                  </div>\n                )}\n              </slot>\n            </div>\n          )}\n        </ic-section-container>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-hero.js","sourceRoot":"","sources":["../../../src/components/ic-hero/ic-hero.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n} from \"@stencil/core\";\nimport {\n  IcAlignment,\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport {\n  slotHasContent,\n  getThemeForegroundColor,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcHeroContentAlignments } from \"./ic-hero.types\";\n\n/**\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.\n * @slot secondary - Content will be rendered in the secondary content area.\n */\n\n@Component({\n  tag: \"ic-hero\",\n  styleUrl: \"ic-hero.css\",\n  shadow: true,\n})\nexport class Hero {\n  @Element() el: HTMLIcHeroElement;\n\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n  @State() rightContent: boolean = false;\n  // set by above state\n  @State() leftContentFullWidth: boolean =\n    !this.rightContent && this.secondaryHeading === undefined;\n  @State() scrollFactor: string = \"right -100px\";\n\n  /**\n   * The alignment of the hero.\n   */\n  @Prop() aligned: IcAlignment = \"left\";\n\n  /**\n   * The optional background image.\n   */\n  @Prop() backgroundImage?: string;\n\n  /**\n   * The alignment of the hero content.\n   */\n  @Prop() contentAligned: IcHeroContentAlignments = \"left\";\n\n  /**\n   * If `true`, the background image (if set) will not scroll using a parallax effect.\n   */\n  @Prop() disableBackgroundParallax?: boolean = false;\n\n  /**\n   * The heading of the hero.\n   */\n  @Prop() heading!: string;\n\n  /**\n   * The optional secondary heading, replaced by slotted right content.\n   */\n  @Prop() secondaryHeading?: string;\n\n  /**\n   * The optional secondary subheading, replaced by slotted right content.\n   */\n  @Prop() secondarySubheading?: string;\n\n  /**\n   * If `true`, the small styling will be applied to the hero.\n   */\n  @Prop() small: boolean = false;\n\n  /**\n   * The description for the hero.\n   */\n  @Prop() subheading?: string;\n\n  componentWillLoad(): void {\n    this.rightContent = slotHasContent(this.el, \"secondary\");\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.heading, propName: \"heading\" }],\n      \"Hero\"\n    );\n  }\n\n  componentWillRender(): void {\n    this.rightContent = slotHasContent(this.el, \"secondary\");\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  @Listen(\"scroll\", { target: \"document\" })\n  doScroll(): void {\n    if (this.disableBackgroundParallax) {\n      return;\n    }\n\n    const scrolltotop = document.scrollingElement.scrollTop;\n    const factor = 0.4;\n    const y = -100 + scrolltotop * factor;\n    this.scrollFactor = \"right \" + y + \"px\";\n  }\n\n  render() {\n    const {\n      aligned,\n      small,\n      heading,\n      subheading,\n      secondaryHeading,\n      secondarySubheading,\n      foregroundColor,\n      backgroundImage,\n      scrollFactor,\n    } = this;\n\n    let style = {};\n\n    if (backgroundImage !== undefined) {\n      style = {\n        \"background-image\": \"url(\" + backgroundImage + \")\",\n        \"background-position\": scrollFactor,\n      };\n    }\n\n    return (\n      <Host\n        class={{\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [\"has-background-image\"]: backgroundImage !== undefined,\n          [\"small\"]: small,\n          [\"secondary-heading\"]: !!secondaryHeading,\n        }}\n        style={style}\n      >\n        <ic-section-container\n          aligned={aligned}\n          fullHeight\n          class=\"section-container\"\n        >\n          <div\n            class={{\n              [\"left-container\"]: true,\n              [\"left-container-full-width\"]: this.leftContentFullWidth,\n            }}\n          >\n            <div class=\"heading\">\n              <slot name=\"heading\">\n                <ic-typography\n                  variant={small ? \"h2\" : \"h1\"}\n                  class={{ [\"heading-bottom-spacing\"]: !small }}\n                >\n                  {heading}\n                </ic-typography>\n              </slot>\n            </div>\n            <div class=\"subheading\">\n              <slot name=\"subheading\">\n                <ic-typography variant=\"body\">{subheading}</ic-typography>\n              </slot>\n            </div>\n            <div class=\"interaction-container\">\n              <slot name=\"interaction\"></slot>\n            </div>\n          </div>\n          {(secondaryHeading !== undefined || this.rightContent) && (\n            <div class=\"right-container\">\n              <slot name=\"secondary\">\n                {secondaryHeading && (\n                  <div class=\"secondary-container\">\n                    <div class=\"secondary-heading\">\n                      <ic-typography variant=\"h4\">\n                        {secondaryHeading}\n                      </ic-typography>\n                    </div>\n                    <div class=\"secondary-subheading\">\n                      <ic-typography variant=\"subtitle-small\">\n                        {secondarySubheading}\n                      </ic-typography>\n                    </div>\n                  </div>\n                )}\n              </slot>\n            </div>\n          )}\n        </ic-section-container>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -178,7 +178,8 @@ export class HorizontalScroll {
           "references": {
             "IcThemeForeground": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::IcThemeForeground"
             }
           }
         },
@@ -212,7 +213,8 @@ export class HorizontalScroll {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"