@ukic/web-components 3.0.0-alpha.9 → 3.1.0

package/dist/collection/components/ic-divider/ic-divider.stories.js

@@ -0,0 +1,394 @@
+import { html } from "lit-html";
+
+const defaultArgs = {
+  "border-style": "solid",
+  label: "",
+  "label-placement": "none",
+  monochrome: false,
+  orientation: "horizontal",
+  theme: "inherit",
+  weight: "thin",
+  "--ic-divider-horizontal-width": "100%",
+  "--ic-divider-vertical-height": "400px",
+  "--ic-divider-background": "",
+  "--ic-divider-background-monochrome": "",
+  "--ic-divider-label": "",
+  "--ic-divider-label-monochrome": "",
+  "--ic-divider-label-width": "",
+};
+
+export default {
+  title: "Web Components/Divider",
+  component: "ic-divider",
+};
+
+export const Theme = {
+  render: () =>
+    html` <div
+      style="display: flex; flex-direction: column; gap: var(--ic-space-md)"
+    >
+      <ic-divider
+        theme="inherit"
+        weight="medium"
+        label="theme='inherit'"
+        label-placement="left"
+      ></ic-divider>
+      <ic-divider
+        theme="inherit"
+        monochrome="true"
+        weight="medium"
+        label="theme='inherit', monochrome='true'"
+        label-placement="left"
+      ></ic-divider>
+      <div
+        style="display:flex; flex-direction: column; align-items: center; background-color: #fff; width: 100%; padding: var(--ic-space-xs) 0; gap: var(--ic-space-md)"
+      >
+        <ic-divider
+          theme="light"
+          weight="medium"
+          label="theme='light'"
+          label-placement="left"
+        ></ic-divider>
+        <ic-divider
+          theme="light"
+          monochrome="true"
+          weight="medium"
+          label="theme='light', monochrome='true'"
+          label-placement="left"
+        ></ic-divider>
+      </div>
+      <div
+        style="display:flex; flex-direction: column; align-items: center; background-color: #17191c; width: 100%; padding: var(--ic-space-xs) 0; gap: var(--ic-space-md)"
+      >
+        <ic-divider
+          theme="dark"
+          weight="medium"
+          label="theme='dark'"
+          label-placement="left"
+        ></ic-divider>
+        <ic-divider
+          theme="dark"
+          monochrome="true"
+          weight="medium"
+          label="theme='dark', monochrome='true'"
+          label-placement="left"
+        ></ic-divider>
+      </div>
+    </div>`,
+
+  name: "Theme",
+};
+
+export const Weight = {
+  render: () =>
+    html` <div
+      style="display: flex; flex-direction: column; gap: var(--ic-space-md)"
+    >
+      <ic-divider weight="thin"></ic-divider>
+      <ic-divider weight="thin" border-style="dashed"></ic-divider>
+      <ic-divider
+        weight="thin"
+        label="End of section"
+        label-placement="center"
+      ></ic-divider>
+      <ic-divider weight="medium"></ic-divider>
+      <ic-divider weight="medium" border-style="dashed"></ic-divider>
+      <ic-divider
+        weight="medium"
+        label="End of section"
+        label-placement="center"
+      ></ic-divider>
+      <ic-divider weight="thick"></ic-divider>
+      <ic-divider weight="thick" border-style="dashed"></ic-divider>
+      <ic-divider
+        weight="thick"
+        label="End of section"
+        label-placement="center"
+      ></ic-divider>
+      <ic-divider weight="very-thick"></ic-divider>
+      <ic-divider weight="very-thick" border-style="dashed"></ic-divider>
+      <ic-divider
+        weight="very-thick"
+        label="End of section"
+        label-placement="center"
+      ></ic-divider>
+    </div>`,
+
+  name: "Weight",
+};
+
+export const BorderStyle = {
+  render: () =>
+    html` <div
+      style="display: flex; flex-direction: column; gap: var(--ic-space-md)"
+    >
+      <ic-divider border-style="solid"></ic-divider>
+      <ic-divider border-style="dashed"></ic-divider>
+    </div>`,
+
+  name: "Border style",
+};
+
+export const Vertical = {
+  render: () => html`
+    <div style="display: flex; gap: var(--ic-space-lg); height: 400px">
+      <ic-divider label-placement="top" orientation="vertical" weight="thin">
+        <ic-typography variant="label" slot="label">
+          <p style="width: max-content;">Slotted label top</p>
+        </ic-typography></ic-divider
+      >
+      <ic-divider
+        orientation="vertical"
+        weight="thin"
+        border-style="dashed"
+      ></ic-divider>
+      <ic-divider orientation="vertical" weight="medium"></ic-divider>
+      <ic-divider
+        label="Label center"
+        label-placement="center"
+        orientation="vertical"
+        border-style="dashed"
+        weight="medium"
+      ></ic-divider>
+      <ic-divider orientation="vertical" weight="thick"></ic-divider>
+      <ic-divider
+        orientation="vertical"
+        weight="thick"
+        border-style="dashed"
+      ></ic-divider>
+      <ic-divider orientation="vertical" weight="very-thick"></ic-divider>
+      <ic-divider
+        orientation="vertical"
+        weight="very-thick"
+        border-style="dashed"
+      ></ic-divider>
+    </div>
+  `,
+
+  name: "Vertical",
+};
+
+export const MaxContent = {
+  render: () => html` <div
+        style="display: flex; flex-direction: column; gap: var(--ic-space-lg)"
+      >
+        <ic-divider 
+          label="🎶 Now this is a story all about how my life got brewed up and turned around. And I’d like to take a minute, just sit right there; I’ll tell you how I became the prince of a café called Bel-Air 🎶
+          🎶 In west Philadelphia, born and raised; in the coffee shop was where I spent most of my days. Chillin’ out, maxin’, relaxin’ all cool, sippin’ on some cappuccinos outside of the school 🎶"
+          label-placement="left"></ic-divider
+        >
+        <ic-divider 
+          label="🎶 Now this is a story all about how my life got brewed up and turned around. And I’d like to take a minute, just sit right there; I’ll tell you how I became the prince of a café called Bel-Air 🎶
+          🎶 In west Philadelphia, born and raised; in the coffee shop was where I spent most of my days. Chillin’ out, maxin’, relaxin’ all cool, sippin’ on some cappuccinos outside of the school 🎶"
+          label-placement="center"></ic-divider
+        >
+      </div>
+      <ic-divider label-placement="right">
+          <ic-typography variant="label" slot="label" style="width: max-content;max-width: 100%;">
+            <p style="width: inherit;">A slotted label: 🎶 Now this is a story all about how my life got brewed up and turned around. And I’d like to take a minute, just sit right there; I’ll tell you how I became the prince of a café called Bel-Air 🎶
+        🎶 In west Philadelphia, born and raised; in the coffee shop was where I spent most of my days. Chillin’ out, maxin’, relaxin’ all cool, sippin’ on some cappuccinos outside of the school 🎶</p>
+          </ic-typography></ic-divider
+        >
+      </div>
+      <div
+        style="display: flex; gap: var(--ic-space-lg); height: 600px; margin-top: var(--ic-space-lg)"
+      >
+        <ic-divider
+          label="A vertical divider: 🎶 Now this is a story all about how my life got brewed up and turned around. And I’d like to take a minute, just sit right there; I’ll tell you how I became the prince of a café called Bel-Air 🎶
+        🎶 In west Philadelphia, born and raised; in the coffee shop was where I spent most of my days. Chillin’ out, maxin’, relaxin’ all cool, sippin’ on some cappuccinos outside of the school 🎶"
+          label-placement="top"
+          orientation="vertical"
+        ></ic-divider>
+      </div>`,
+
+  name: "Max content",
+};
+
+export const LabelPlacement = {
+  render: () =>
+    html` <div
+        style="display: flex; flex-direction: column; gap: var(--ic-space-lg)"
+      >
+        <ic-divider label="Label left" label-placement="left"></ic-divider>
+        <ic-divider label="Label center" label-placement="center"></ic-divider>
+        <ic-divider label="Label right" label-placement="right"></ic-divider>
+        <ic-divider label-placement="left">
+          <ic-typography variant="label" slot="label">
+            <p style="width: max-content;">Slotted label left</p>
+          </ic-typography></ic-divider
+        >
+        <ic-divider label-placement="center">
+          <ic-typography variant="label" slot="label">
+            <p style="width: max-content;">Slotted label center</p>
+          </ic-typography></ic-divider
+        >
+        <ic-divider label-placement="right">
+          <ic-typography variant="label" slot="label">
+            <p style="width: max-content;">Slotted label right</p>
+          </ic-typography></ic-divider
+        >
+      </div>
+      <div
+        style="display: flex; gap: var(--ic-space-lg); height: 200px; margin-top: var(--ic-space-lg)"
+      >
+        <ic-divider
+          label="Label top"
+          label-placement="top"
+          orientation="vertical"
+        ></ic-divider>
+        <ic-divider
+          label="Label center"
+          label-placement="center"
+          orientation="vertical"
+        ></ic-divider>
+        <ic-divider
+          label="Label bottom"
+          label-placement="bottom"
+          orientation="vertical"
+        ></ic-divider>
+        <ic-divider label-placement="top" orientation="vertical">
+          <ic-typography variant="label" slot="label">
+            <p style="width: max-content;">Slotted label top</p>
+          </ic-typography></ic-divider
+        >
+        <ic-divider label-placement="center" orientation="vertical">
+          <ic-typography variant="label" slot="label">
+            <p style="width: max-content;">Slotted label center</p>
+          </ic-typography></ic-divider
+        >
+        <ic-divider label-placement="bottom" orientation="vertical">
+          <ic-typography variant="label" slot="label">
+            <p style="width: max-content;">Slotted label bottom</p>
+          </ic-typography></ic-divider
+        >
+      </div>`,
+
+  name: "Label placement",
+};
+
+export const Playground = {
+  render: (args) => {
+    const backgroundColor =
+      args.theme === "dark"
+        ? "#17191c"
+        : args.theme === "light"
+        ? "var(--ic-color-background-primary-light)"
+        : "transparent";
+
+    return html`<div
+      style="display: flex; width: 100%; height: 100%; padding: var(--ic-space-md); background-color: ${backgroundColor}; box-sizing: border-box;"
+    >
+      <ic-divider
+        monochrome=${args.monochrome}
+        orientation=${args.orientation}
+        theme=${args.theme}
+        border-style=${args["border-style"]}
+        weight=${args.weight}
+        label=${args.label}
+        label-placement=${args["label-placement"]}
+        style="
+            --ic-divider-horizontal-width: ${args[
+          "--ic-divider-horizontal-width"
+        ]};
+            --ic-divider-vertical-height: ${args[
+          "--ic-divider-vertical-height"
+        ]};
+            ${args["--ic-divider-background"] !== ""
+          ? `--ic-divider-background: ${args["--ic-divider-background"]};`
+          : ""}
+            ${args["--ic-divider-background-monochrome"] !== ""
+          ? `--ic-divider-background-monochrome: ${args["--ic-divider-background-monochrome"]};`
+          : ""}
+            ${args["--ic-divider-label"] !== ""
+          ? `--ic-divider-label: ${args["--ic-divider-label"]};`
+          : ""}
+            ${args["--ic-divider-label-monochrome"] !== ""
+          ? `--ic-divider-label-monochrome: ${args["--ic-divider-label-monochrome"]};`
+          : ""}
+            ${args["--ic-divider-label-width"] !== ""
+          ? `--ic-divider-label-width: ${args["--ic-divider-label-width"]};`
+          : ""}"
+      ></ic-divider>
+    </div>`;
+  },
+
+  args: defaultArgs,
+
+  argTypes: {
+    "border-style": {
+      options: ["solid", "dashed"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
+
+    label: {
+      mapping: {
+        none: "",
+      },
+    },
+
+    "label-placement": {
+      options: ["none", "left", "center", "right", "top", "bottom"],
+
+      mapping: {
+        none: "",
+      },
+
+      control: {
+        type: "radio",
+      },
+    },
+
+    orientation: {
+      options: ["horizontal", "vertical"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
+
+    theme: {
+      options: ["inherit", "dark", "light"],
+
+      control: {
+        type: "radio",
+      },
+    },
+
+    weight: {
+      options: ["thin", "medium", "thick", "very-thick"],
+
+      control: {
+        type: "radio",
+      },
+    },
+
+    "--ic-divider-background": {
+      control: {
+        type: "color",
+      },
+    },
+
+    "--ic-divider-background-monochrome": {
+      control: {
+        type: "color",
+      },
+    },
+
+    "--ic-divider-label": {
+      control: {
+        type: "color",
+      },
+    },
+
+    "--ic-divider-label-monochrome": {
+      control: {
+        type: "color",
+      },
+    },
+  },
+
+  name: "Playground",
+};

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

@@ -47,3 +47,18 @@
   height: calc(4 * var(--ic-space-xl)) !important;
   width: calc(4 * var(--ic-space-xl)) !important;
 }
+
+::slotted([slot="heading"]),
+.empty-state-heading {
+  --ic-typography-color: var(--ic-empty-state-title);
+}
+
+::slotted([slot="subheading"]),
+.empty-state-subheading {
+  --ic-typography-color: var(--ic-empty-state-subtitle);
+}
+
+::slotted([slot="body"]),
+.empty-state-body {
+  --ic-typography-color: var(--ic-empty-state-body);
+}

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

@@ -10,12 +10,18 @@ import { isSlotUsed, onComponentRequiredPropUndefined, renderDynamicChildSlots,
 export class EmptyState {
     constructor() {
         this.hostMutationObserver = null;
+        /**
+         * The alignment of the empty state container.
+         */
         this.aligned = "left";
-        this.body = undefined;
-        this.maxLines = undefined;
-        this.heading = undefined;
+        /**
+         * The size of the image or icon used in the image slot.
+         */
         this.imageSize = "medium";
-        this.subheading = undefined;
+        /**
+         * 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";
     }
     disconnectedCallback() {
         var _a;
@@ -30,11 +36,12 @@ export class EmptyState {
         });
     }
     render() {
-        const { aligned, body, maxLines, heading, imageSize, subheading } = this;
-        return (h(Host, { class: {
+        const { aligned, body, maxLines, heading, imageSize, subheading, theme } = this;
+        return (h(Host, { key: 'd8dbd02105f4b01a468436fd73ccd4ddec2a4cf1', class: {
                 [`ic-empty-state-${aligned}`]: true,
                 [`image-${imageSize}`]: isSlotUsed(this.el, "image"),
-            } }, isSlotUsed(this.el, "image") && h("slot", { name: "image" }), h("div", null, h("slot", { name: "heading" }, h("ic-typography", { variant: "h4" }, heading)), h("slot", { name: "subheading" }, h("ic-typography", { variant: "subtitle-small" }, subheading)), h("slot", { name: "body" }, h("ic-typography", { maxLines: maxLines }, body))), isSlotUsed(this.el, "actions") && (h("div", { class: "action-area" }, h("slot", { name: "actions" })))));
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            } }, isSlotUsed(this.el, "image") && h("slot", { key: 'd7bed2bb22a41377f6c9032660bc62f79294510c', name: "image" }), h("div", { key: '64df9d8fb5ffbb9724a2e87a67eed03526564527' }, h("slot", { key: '5fee4dfbeef7272bcd423c7fb2bfc49e5e557718', name: "heading" }, h("ic-typography", { key: '523cac0cce5c01cca9540396b95f0ab13d0ef9cd', variant: "h4", class: "empty-state-heading" }, heading)), h("slot", { key: '904f2c3ceeeef991a099a4fc0521de002c6e8fc3', name: "subheading" }, h("ic-typography", { key: '6eb71c04bfae24d0ece644cea3730251ecd38e77', variant: "subtitle-small", class: "empty-state-subheading" }, subheading)), h("slot", { key: '6dc1f5e4e3071b5c0277c993502f1f043b247330', name: "body" }, h("ic-typography", { key: 'f60da219bd12eda8df1229eba9ae9904458e4692', maxLines: maxLines, class: "empty-state-body" }, body))), isSlotUsed(this.el, "actions") && (h("div", { key: '73247068a45635e5e64d513239ada3e97a4a4302', class: "action-area" }, h("slot", { key: '19a448208f663a595f5a81a28b89834d0c62e78b', name: "actions" })))));
     }
     static get is() { return "ic-empty-state"; }
     static get encapsulation() { return "shadow"; }
@@ -55,7 +62,7 @@ export class EmptyState {
                 "mutable": false,
                 "complexType": {
                     "original": "IcEmptyStateAlignment",
-                    "resolved": "\"center\" | \"left\" | \"right\"",
+                    "resolved": "\"center\" | \"left\" | \"right\" | undefined",
                     "references": {
                         "IcEmptyStateAlignment": {
                             "location": "import",
@@ -70,6 +77,8 @@ export class EmptyState {
                     "tags": [],
                     "text": "The alignment of the empty state container."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "aligned",
                 "reflect": false,
                 "defaultValue": "\"left\""
@@ -79,7 +88,7 @@ export class EmptyState {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -88,6 +97,8 @@ export class EmptyState {
                     "tags": [],
                     "text": "The body text rendered in the empty state container."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "body",
                 "reflect": false
             },
@@ -96,7 +107,7 @@ export class EmptyState {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -105,6 +116,8 @@ export class EmptyState {
                     "tags": [],
                     "text": "The number of lines of body text to display before truncating."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "max-lines",
                 "reflect": false
             },
@@ -113,7 +126,7 @@ export class EmptyState {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -122,6 +135,8 @@ export class EmptyState {
                     "tags": [],
                     "text": "The title rendered in the empty state container."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "heading",
                 "reflect": false
             },
@@ -130,7 +145,7 @@ export class EmptyState {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizes",
-                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
                     "references": {
                         "IcSizes": {
                             "location": "import",
@@ -145,6 +160,8 @@ export class EmptyState {
                     "tags": [],
                     "text": "The size of the image or icon used in the image slot."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "image-size",
                 "reflect": false,
                 "defaultValue": "\"medium\""
@@ -154,7 +171,7 @@ export class EmptyState {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -163,8 +180,36 @@ export class EmptyState {
                     "tags": [],
                     "text": "The subtitle rendered in the empty state container."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "subheading",
                 "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\""
             }
         };
     }

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

@@ -1 +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,EAChC,uBAAuB,GACxB,MAAM,qBAAqB,CAAC;AAG7B;;;;;;GAMG;AAMH,MAAM,OAAO,UAAU;;QACb,yBAAoB,GAAqB,IAAI,CAAC;uBAOZ,MAAM;;;;yBAoBlB,QAAQ;;;IAOtC,oBAAoB;;QAClB,MAAA,IAAI,CAAC,oBAAoB,0CAAE,UAAU,EAAE,CAAC;IAC1C,CAAC;IAED,gBAAgB;QACd,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC;YAC7B,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7C,aAAa,CACd,CAAC;QAEJ,IAAI,CAAC,oBAAoB,GAAG,IAAI,gBAAgB,CAAC,CAAC,YAAY,EAAE,EAAE,CAChE,uBAAuB,CAAC,YAAY,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,IAAI,CAAC,CAClE,CAAC;QACF,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YACzC,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QACzE,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,CAAC,kBAAkB,OAAO,EAAE,CAAC,EAAE,IAAI;gBACnC,CAAC,SAAS,SAAS,EAAE,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC;aACrD;YAEA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,IAAI,YAAM,IAAI,EAAC,OAAO,GAAQ;YAC3D;gBACE,YAAM,IAAI,EAAC,SAAS;oBAClB,qBAAe,OAAO,EAAC,IAAI,IAAE,OAAO,CAAiB,CAChD;gBACP,YAAM,IAAI,EAAC,YAAY;oBACrB,qBAAe,OAAO,EAAC,gBAAgB,IAAE,UAAU,CAAiB,CAC/D;gBACP,YAAM,IAAI,EAAC,MAAM;oBACf,qBAAe,QAAQ,EAAE,QAAQ,IAAG,IAAI,CAAiB,CACpD,CACH;YACL,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CACjC,WAAK,KAAK,EAAC,aAAa;gBACtB,YAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACP,CACI,CACR,CAAC;IACJ,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  renderDynamicChildSlots,\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 * @slot heading - Content will be rendered in place of the heading prop.\n * @slot subheading - Content will be rendered in place of the subheading prop.\n * @slot body - Content will be rendered in place of the body prop.\n */\n@Component({\n  tag: \"ic-empty-state\",\n  styleUrl: \"ic-empty-state.css\",\n  shadow: true,\n})\nexport class EmptyState {\n  private hostMutationObserver: MutationObserver = null;\n\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() maxLines?: 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 = \"medium\";\n\n  /**\n   * The subtitle rendered in the empty state container.\n   */\n  @Prop() subheading?: string;\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentDidLoad(): void {\n    !isSlotUsed(this.el, \"heading\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.heading, propName: \"heading\" }],\n        \"Empty State\"\n      );\n\n    this.hostMutationObserver = new MutationObserver((mutationList) =>\n      renderDynamicChildSlots(mutationList, [\"image\", \"actions\"], this)\n    );\n    this.hostMutationObserver.observe(this.el, {\n      childList: true,\n    });\n  }\n\n  render() {\n    const { aligned, body, maxLines, heading, imageSize, subheading } = this;\n    return (\n      <Host\n        class={{\n          [`ic-empty-state-${aligned}`]: true,\n          [`image-${imageSize}`]: isSlotUsed(this.el, \"image\"),\n        }}\n      >\n        {isSlotUsed(this.el, \"image\") && <slot name=\"image\"></slot>}\n        <div>\n          <slot name=\"heading\">\n            <ic-typography variant=\"h4\">{heading}</ic-typography>\n          </slot>\n          <slot name=\"subheading\">\n            <ic-typography variant=\"subtitle-small\">{subheading}</ic-typography>\n          </slot>\n          <slot name=\"body\">\n            <ic-typography maxLines={maxLines}>{body}</ic-typography>\n          </slot>\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"]}
+{"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,EAChC,uBAAuB,GACxB,MAAM,qBAAqB,CAAC;AAG7B;;;;;;GAMG;AAMH,MAAM,OAAO,UAAU;IALvB;QAMU,yBAAoB,GAA4B,IAAI,CAAC;QAI7D;;WAEG;QACK,YAAO,GAA2B,MAAM,CAAC;QAiBjD;;WAEG;QACK,cAAS,GAAa,QAAQ,CAAC;QAOvC;;WAEG;QACK,UAAK,GAAiB,SAAS,CAAC;KA6DzC;IA3DC,oBAAoB;;QAClB,MAAA,IAAI,CAAC,oBAAoB,0CAAE,UAAU,EAAE,CAAC;IAC1C,CAAC;IAED,gBAAgB;QACd,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC;YAC7B,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7C,aAAa,CACd,CAAC;QAEJ,IAAI,CAAC,oBAAoB,GAAG,IAAI,gBAAgB,CAAC,CAAC,YAAY,EAAE,EAAE,CAChE,uBAAuB,CAAC,YAAY,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,IAAI,CAAC,CAClE,CAAC;QACF,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YACzC,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,GACtE,IAAI,CAAC;QACP,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,CAAC,kBAAkB,OAAO,EAAE,CAAC,EAAE,IAAI;gBACnC,CAAC,SAAS,SAAS,EAAE,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC;gBACpD,CAAC,YAAY,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,SAAS;aAC3C;YAEA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,IAAI,6DAAM,IAAI,EAAC,OAAO,GAAQ;YAC3D;gBACE,6DAAM,IAAI,EAAC,SAAS;oBAClB,sEAAe,OAAO,EAAC,IAAI,EAAC,KAAK,EAAC,qBAAqB,IACpD,OAAO,CACM,CACX;gBACP,6DAAM,IAAI,EAAC,YAAY;oBACrB,sEACE,OAAO,EAAC,gBAAgB,EACxB,KAAK,EAAC,wBAAwB,IAE7B,UAAU,CACG,CACX;gBACP,6DAAM,IAAI,EAAC,MAAM;oBACf,sEAAe,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAC,kBAAkB,IACxD,IAAI,CACS,CACX,CACH;YACL,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CACjC,4DAAK,KAAK,EAAC,aAAa;gBACtB,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACP,CACI,CACR,CAAC;IACJ,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  renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport { IcSizes, IcThemeMode } 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 * @slot heading - Content will be rendered in place of the heading prop.\n * @slot subheading - Content will be rendered in place of the subheading prop.\n * @slot body - Content will be rendered in place of the body prop.\n */\n@Component({\n  tag: \"ic-empty-state\",\n  styleUrl: \"ic-empty-state.css\",\n  shadow: true,\n})\nexport class EmptyState {\n  private hostMutationObserver: MutationObserver | null = null;\n\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() maxLines?: 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 = \"medium\";\n\n  /**\n   * The subtitle rendered in the empty state container.\n   */\n  @Prop() subheading?: 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    this.hostMutationObserver?.disconnect();\n  }\n\n  componentDidLoad(): void {\n    !isSlotUsed(this.el, \"heading\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.heading, propName: \"heading\" }],\n        \"Empty State\"\n      );\n\n    this.hostMutationObserver = new MutationObserver((mutationList) =>\n      renderDynamicChildSlots(mutationList, [\"image\", \"actions\"], this)\n    );\n    this.hostMutationObserver.observe(this.el, {\n      childList: true,\n    });\n  }\n\n  render() {\n    const { aligned, body, maxLines, heading, imageSize, subheading, theme } =\n      this;\n    return (\n      <Host\n        class={{\n          [`ic-empty-state-${aligned}`]: true,\n          [`image-${imageSize}`]: isSlotUsed(this.el, \"image\"),\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        {isSlotUsed(this.el, \"image\") && <slot name=\"image\"></slot>}\n        <div>\n          <slot name=\"heading\">\n            <ic-typography variant=\"h4\" class=\"empty-state-heading\">\n              {heading}\n            </ic-typography>\n          </slot>\n          <slot name=\"subheading\">\n            <ic-typography\n              variant=\"subtitle-small\"\n              class=\"empty-state-subheading\"\n            >\n              {subheading}\n            </ic-typography>\n          </slot>\n          <slot name=\"body\">\n            <ic-typography maxLines={maxLines} class=\"empty-state-body\">\n              {body}\n            </ic-typography>\n          </slot>\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"]}