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

package/dist/collection/components/ic-data-list/ic-data-list.stories.js

@@ -0,0 +1,493 @@
+import { html } from "lit-html";
+
+const defaultArgs = {
+  heading: "Details",
+  size: "medium",
+  label: "Name",
+  rowSize: "default",
+  value: "Michael Johnson",
+  endCompSlot: "end-component",
+  theme: "inherit",
+  rowTheme: "inherit",
+};
+
+export default {
+  title: "Web Components/Data list",
+  component: "ic-data-list",
+};
+
+export const Default = {
+  render: () =>
+    html`<ic-data-list heading="Personal details">
+      <ic-data-row label="Name" value="Michael Johnson"></ic-data-row>
+      <ic-data-row label="Date of birth" value="16 October 1995"></ic-data-row>
+      <ic-data-row label="Telephone" value="07449 7654873"></ic-data-row>
+      <ic-data-row label="Email" value="mjohnson@coffee.gov"></ic-data-row>
+      <ic-data-row label="Address">
+        <ic-typography variant="body" slot="value">
+          383 Coffee Drive
+          <br />
+          London
+          <br />
+          SW7 988
+          <br />
+          United Kingdom
+        </ic-typography>
+      </ic-data-row>
+    </ic-data-list>`,
+
+  name: "Default",
+};
+
+export const SlottedHeadingAndLabel = {
+  render: () =>
+    html`<ic-data-list>
+      <ic-typography variant="h3" slot="heading"
+        >Personal details</ic-typography
+      >
+      <ic-data-row value="Michael Johnson">
+        <ic-typography variant="subtitle-large" slot="label"
+          >Name</ic-typography
+        >
+      </ic-data-row>
+      <ic-data-row value="16 October 1995">
+        <ic-typography variant="subtitle-large" slot="label"
+          >Date of birth</ic-typography
+        >
+      </ic-data-row>
+    </ic-data-list>`,
+
+  name: "Slotted heading and label",
+};
+
+export const LongTextValues = {
+  render: () =>
+    html`<ic-data-list
+      heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"
+    >
+      <ic-data-row
+        label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
+        value="Michael Johnson"
+      ></ic-data-row>
+      <ic-data-row label="Date of birth" value="16 October 1995"></ic-data-row>
+      <ic-data-row label="Telephone" value="07449 7654873"></ic-data-row>
+      <ic-data-row label="Email" value="mjohnson@coffee.gov"></ic-data-row>
+      <ic-data-row
+        label="Address"
+        value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"
+      ></ic-data-row>
+      <ic-data-row label="Second address">
+        <ic-typography variant="body" slot="value">
+          383 Coffee Drive
+          <br />
+          London
+          <br />
+          SW7 988
+          <br />
+          United Kingdom
+        </ic-typography>
+      </ic-data-row>
+    </ic-data-list>`,
+
+  name: "Long text values",
+};
+
+export const Small = {
+  render: () =>
+    html`<ic-data-list heading="Personal details" size="small">
+      <ic-data-row label="Name" value="Michael Johnson"></ic-data-row>
+      <ic-data-row label="Date of birth" value="16 October 1995"></ic-data-row>
+      <ic-data-row label="Telephone" value="07449 7654873"></ic-data-row>
+      <ic-data-row label="Email" value="mjohnson@coffee.gov"></ic-data-row>
+      <ic-data-row label="Address">
+        <ic-typography variant="body" slot="value">
+          383 Coffee Drive
+          <br />
+          London
+          <br />
+          SW7 988
+          <br />
+          United Kingdom
+        </ic-typography>
+      </ic-data-row>
+    </ic-data-list>`,
+
+  name: "Small",
+};
+
+export const WithLink = {
+  render: () =>
+    html`<ic-data-list heading="Personal details">
+      <ic-data-row label="Name" value="Michael Johnson">
+        <ic-link href="#" slot="end-component"> Edit </ic-link>
+      </ic-data-row>
+      <ic-data-row label="Date of birth" value="16 October 1995">
+        <ic-link href="#" slot="end-component"> Edit </ic-link>
+      </ic-data-row>
+      <ic-data-row label="Telephone" value="07449 7654873">
+        <ic-link href="#" slot="end-component"> Edit </ic-link>
+      </ic-data-row>
+      <ic-data-row label="Email" value="mjohnson@coffee.gov">
+        <ic-link href="#" slot="end-component"> Edit </ic-link>
+      </ic-data-row>
+      <ic-data-row label="Address">
+        <ic-typography variant="body" slot="value">
+          383 Coffee Drive
+          <br />
+          London
+          <br />
+          SW7 988
+          <br />
+          United Kingdom
+        </ic-typography>
+        <ic-link href="#" slot="end-component"> Edit </ic-link>
+      </ic-data-row>
+    </ic-data-list>`,
+
+  name: "Link",
+};
+
+export const IconButton = {
+  render: () =>
+    html`<ic-data-list heading="Personal details">
+      <ic-data-row label="Name" value="Michael Johnson">
+        <ic-button variant="icon" aria-label="Edit" slot="end-component">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7.127 22.562l-7.127 1.438 1.438-7.128 5.689 5.69zm1.414-1.414l11.228-11.225-5.69-5.692-11.227 11.227 5.689 5.69zm9.768-21.148l-2.816 2.817 5.691 5.691 2.816-2.819-5.691-5.689z"
+            />
+          </svg>
+        </ic-button>
+      </ic-data-row>
+      <ic-data-row label="Date of birth" value="16 October 1995">
+        <ic-button variant="icon" aria-label="Edit" slot="end-component">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7.127 22.562l-7.127 1.438 1.438-7.128 5.689 5.69zm1.414-1.414l11.228-11.225-5.69-5.692-11.227 11.227 5.689 5.69zm9.768-21.148l-2.816 2.817 5.691 5.691 2.816-2.819-5.691-5.689z"
+            />
+          </svg>
+        </ic-button>
+      </ic-data-row>
+      <ic-data-row label="Telephone" value="07449 7654873">
+        <ic-button variant="icon" aria-label="Edit" slot="end-component">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7.127 22.562l-7.127 1.438 1.438-7.128 5.689 5.69zm1.414-1.414l11.228-11.225-5.69-5.692-11.227 11.227 5.689 5.69zm9.768-21.148l-2.816 2.817 5.691 5.691 2.816-2.819-5.691-5.689z"
+            />
+          </svg>
+        </ic-button>
+      </ic-data-row>
+      <ic-data-row label="Email" value="mjohnson@coffee.gov">
+        <ic-button variant="icon" aria-label="Edit" slot="end-component">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7.127 22.562l-7.127 1.438 1.438-7.128 5.689 5.69zm1.414-1.414l11.228-11.225-5.69-5.692-11.227 11.227 5.689 5.69zm9.768-21.148l-2.816 2.817 5.691 5.691 2.816-2.819-5.691-5.689z"
+            />
+          </svg>
+        </ic-button>
+      </ic-data-row>
+      <ic-data-row label="Address">
+        <ic-typography variant="body" slot="value">
+          383 Coffee Drive
+          <br />
+          London
+          <br />
+          SW7 988
+          <br />
+          United Kingdom
+        </ic-typography>
+        <ic-button variant="icon" aria-label="Edit" slot="end-component">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7.127 22.562l-7.127 1.438 1.438-7.128 5.689 5.69zm1.414-1.414l11.228-11.225-5.69-5.692-11.227 11.227 5.689 5.69zm9.768-21.148l-2.816 2.817 5.691 5.691 2.816-2.819-5.691-5.689z"
+            />
+          </svg>
+        </ic-button>
+      </ic-data-row>
+    </ic-data-list>`,
+
+  name: "Icon button",
+};
+
+export const Adornment = {
+  render: () =>
+    html`<ic-data-list heading="Personal details">
+      <ic-data-row label="Name" value="Michael Johnson">
+        <ic-status-tag
+          status="success"
+          label="confirmed"
+          variant="filled"
+          slot="end-component"
+        >
+        </ic-status-tag>
+      </ic-data-row>
+      <ic-data-row label="Date of birth" value="16 October 1995">
+        <ic-status-tag
+          status="warning"
+          label="in review"
+          variant="filled"
+          slot="end-component"
+        />
+      </ic-data-row>
+      <ic-data-row label="Telephone" value="07449 7654873">
+        <ic-status-tag
+          status="warning"
+          label="in review"
+          variant="filled"
+          slot="end-component"
+        />
+      </ic-data-row>
+      <ic-data-row label="Email" value="mjohnson@coffee.gov">
+        <ic-status-tag
+          status="success"
+          label="confirmed"
+          variant="filled"
+          slot="end-component"
+        />
+      </ic-data-row>
+      <ic-data-row label="Address">
+        <ic-typography variant="body" slot="value">
+          383 Coffee Drive
+          <br />
+          London
+          <br />
+          SW7 988
+          <br />
+          United Kingdom
+        </ic-typography>
+        <ic-status-tag
+          label="not confirmed"
+          variant="filled"
+          slot="end-component"
+        />
+      </ic-data-row>
+    </ic-data-list>`,
+
+  name: "Adornment",
+};
+
+export const WithStatusTag = {
+  render: () =>
+    html` <ic-data-list heading="Personal details">
+      <ic-data-row label="Name"
+        ><ic-status-tag
+          status="success"
+          label="approved"
+          variant="filled"
+          slot="value"
+      /></ic-data-row>
+      <ic-data-row label="Date of birth"
+        ><ic-status-tag
+          status="success"
+          label="approved"
+          variant="filled"
+          slot="value"
+      /></ic-data-row>
+      <ic-data-row label="Telephone"
+        ><ic-status-tag
+          status="success"
+          label="approved"
+          variant="filled"
+          slot="value"
+      /></ic-data-row>
+      <ic-data-row label="Address"
+        ><ic-status-tag
+          status="success"
+          label="approved"
+          variant="filled"
+          slot="value"
+      /></ic-data-row>
+      <ic-data-row label="Email"
+        ><ic-status-tag
+          status="success"
+          label="approved"
+          variant="filled"
+          slot="value"
+      /></ic-data-row>
+    </ic-data-list>`,
+
+  name: "Status tag",
+};
+
+export const EditableExample = {
+  render: () =>
+    html`<ic-data-list heading="Personal details">
+        <ic-data-row label="Name">
+          <ic-text-field
+            slot="value"
+            label="Name"
+            value="Michael Johnson"
+            readonly
+            hide-label
+            full-width
+          />
+        </ic-data-row>
+        <ic-data-row label="Date of birth">
+          <ic-text-field
+            slot="value"
+            label="Date of birth"
+            value="16 October 1995"
+            readonly
+            hide-label
+            full-width
+          />
+        </ic-data-row>
+        <ic-data-row label="Telephone">
+          <ic-text-field
+            slot="value"
+            label="Telephone"
+            value="07449 7654873"
+            readonly
+            hide-label
+            full-width
+          />
+        </ic-data-row>
+        <ic-data-row label="Email">
+          <ic-text-field
+            slot="value"
+            label="Email"
+            value="mjohnson@coffee.gov"
+            readonly
+            hide-label
+            full-width
+          />
+        </ic-data-row>
+        <ic-data-row label="Address">
+          <ic-text-field
+            slot="value"
+            label="Address"
+            value="383 Coffee Drive, London, SW7 988, United Kingdom"
+            readonly
+            hide-label
+            full-width
+          />
+        </ic-data-row>
+      </ic-data-list>
+      <ic-button
+        onclick="
+        var textFields = document.querySelectorAll('ic-text-field');
+        for (var i=0; i < textFields.length; i++) {
+          textFields[i].setAttribute('readonly', '');
+        }"
+        style="margin-right: var(--ic-space-md);margin-top: var(--ic-space-lg);"
+      >
+        Confirm
+      </ic-button>
+      <ic-button
+        onclick="
+        var textFields = document.querySelectorAll('ic-text-field');
+        for (var i=0; i < textFields.length; i++) {
+          textFields[i].removeAttribute('readonly');
+        }"
+        variant="secondary"
+        style="margin-top: var(--ic-space-lg);"
+      >
+        Edit
+      </ic-button>`,
+
+  name: "Editable example",
+};
+
+const inlineRadioSelector = "inline-radio";
+
+export const Playground = {
+  render: (args) =>
+    html`<ic-data-list
+      heading=${args.heading}
+      size=${args.size}
+      theme=${args.theme}
+    >
+      <ic-data-row
+        label=${args.label}
+        value=${args.value}
+        size=${args.rowSize}
+        theme=${args.rowTheme}
+      >
+        <ic-button variant="icon" aria-label="Edit" slot=${args.endCompSlot}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7.127 22.562l-7.127 1.438 1.438-7.128 5.689 5.69zm1.414-1.414l11.228-11.225-5.69-5.692-11.227 11.227 5.689 5.69zm9.768-21.148l-2.816 2.817 5.691 5.691 2.816-2.819-5.691-5.689z"
+            />
+          </svg>
+        </ic-button>
+      </ic-data-row>
+      <ic-data-row label="Date of birth" value="16 October 1995"></ic-data-row>
+      <ic-data-row label="Telephone" value="07449 7654873"></ic-data-row>
+    </ic-data-list>`,
+
+  args: defaultArgs,
+
+  argTypes: {
+    size: {
+      options: ["medium", "small"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
+
+    rowSize: {
+      options: ["medium", "small"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
+
+    endCompSlot: {
+      options: ["end-component", ""],
+
+      control: {
+        type: "select",
+      },
+    },
+
+    theme: {
+      options: ["inherit", "light", "dark"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
+
+    rowTheme: {
+      options: ["inherit", "light", "dark"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
+  },
+
+  name: "Playground",
+};

package/dist/collection/components/ic-data-row/ic-data-row.js

@@ -9,6 +9,15 @@ export class DataRow {
     constructor() {
         this.hasEndComponent = false;
         this.resizeObserver = null;
+        this.deviceSize = DEVICE_SIZES.XL;
+        /**
+         * The size of the data row component.
+         */
+        this.size = "medium";
+        /**
+         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        this.theme = "inherit";
         this.runResizeObserver = () => {
             this.resizeObserver = new ResizeObserver(() => {
                 this.checkLabelAbove();
@@ -23,12 +32,6 @@ export class DataRow {
                         ? "label"
                         : "subtitle-large" }, isValue ? this.value : this.label))));
         };
-        this.deviceSize = DEVICE_SIZES.XL;
-        this.listSize = undefined;
-        this.label = undefined;
-        this.size = "medium";
-        this.theme = "inherit";
-        this.value = undefined;
     }
     disconnectedCallback() {
         var _a;
@@ -46,25 +49,31 @@ export class DataRow {
     }
     checkLabelAbove() {
         var _a;
-        const rowSize = ((_a = this.el.shadowRoot.querySelector(".data")) === null || _a === void 0 ? void 0 : _a.clientWidth) + 46;
-        if (rowSize) {
-            this.listSize =
-                rowSize < DEVICE_SIZES.S ? "xs" : rowSize < DEVICE_SIZES.M ? "m" : "xl";
+        const row = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".data");
+        if (row) {
+            const rowSize = (row === null || row === void 0 ? void 0 : row.clientWidth) + 46;
+            if (rowSize) {
+                this.listSize =
+                    rowSize < DEVICE_SIZES.S
+                        ? "xs"
+                        : rowSize < DEVICE_SIZES.M
+                            ? "m"
+                            : "xl";
+            }
         }
     }
     labelEndComponent() {
-        this.el.shadowRoot
-            .querySelectorAll("slot[name=end-component]")
-            .forEach((child) => child.setAttribute("aria-label", `for ${this.label} row`));
+        var _a;
+        (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("slot[name=end-component]").forEach((child) => child.setAttribute("aria-label", `for ${this.label} row`));
     }
     render() {
         const { el, listSize, hasEndComponent, label, renderCellContent, size, theme, value, } = this;
-        return (h(Host, { class: {
+        return (h(Host, { key: '9d08ae62826d35bd401020ba98068b96c81f6fa5', class: {
                 ["ic-data-row-small"]: size === "small",
                 ["breakpoint-medium"]: listSize === "m",
                 ["breakpoint-xs"]: listSize === "xs",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, role: "listitem" }, h("div", { class: "data" }, h("div", { class: "text-cells" }, (isSlotUsed(el, "label") || label) && renderCellContent("label"), (isSlotUsed(el, "value") || value) && renderCellContent("value")), hasEndComponent && (h("div", { class: "end-component" }, h("slot", { name: "end-component" })))), h("div", { class: "divider" })));
+            }, role: "listitem" }, h("div", { key: 'ba92ceb189252d76f4ad43dca48b7092c9172a2e', class: "data" }, h("div", { key: '29272fb6366444499d5e25864a81e64cc43c113c', class: "text-cells" }, (isSlotUsed(el, "label") || label) && renderCellContent("label"), (isSlotUsed(el, "value") || value) && renderCellContent("value")), hasEndComponent && (h("div", { key: 'fc83095282fc9e82d57edf8ee94b2d6fa3f48eb6', class: "end-component" }, h("slot", { key: '8e55af6d6c919f89b4b780fe254371f77700debb', name: "end-component" })))), h("div", { key: 'ab54a6f84262b3ccf9f351b37c71efaf6810344a', class: "divider" })));
     }
     static get is() { return "ic-data-row"; }
     static get encapsulation() { return "shadow"; }
@@ -85,15 +94,17 @@ export class DataRow {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The label in the leftmost cell of the row."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false
             },
@@ -102,7 +113,7 @@ export class DataRow {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizesNoLarge",
-                    "resolved": "\"medium\" | \"small\"",
+                    "resolved": "\"medium\" | \"small\" | undefined",
                     "references": {
                         "IcSizesNoLarge": {
                             "location": "import",
@@ -117,6 +128,8 @@ export class DataRow {
                     "tags": [],
                     "text": "The size of the data row component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "\"medium\""
@@ -126,7 +139,7 @@ export class DataRow {
                 "mutable": false,
                 "complexType": {
                     "original": "IcThemeMode",
-                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                     "references": {
                         "IcThemeMode": {
                             "location": "import",
@@ -141,6 +154,8 @@ export class DataRow {
                     "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\""
@@ -150,15 +165,17 @@ export class DataRow {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The value of the middle (right if no end-component supplied) cell of the row."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false
             }

package/dist/collection/components/ic-data-row/ic-data-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-data-row.js","sourceRoot":"","sources":["../../../src/components/ic-data-row/ic-data-row.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  isSlotUsed,\n  slotHasContent,\n} from \"../../utils/helpers\";\nimport { IcSizesNoLarge, IcThemeMode } from \"../../utils/types\";\n\n/**\n * @slot label - Content will be rendered in the leftmost cell.\n * @slot value - Content will be rendered to the right of the label.\n * @slot end-component - Content will be displayed in the rightmost cell.\n */\n@Component({\n  tag: \"ic-data-row\",\n  styleUrl: \"ic-data-row.css\",\n  shadow: true,\n})\nexport class DataRow {\n  private hasEndComponent: boolean = false;\n  private resizeObserver: ResizeObserver = null;\n\n  @Element() el: HTMLIcDataRowElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() listSize: \"xl\" | \"m\" | \"xs\";\n\n  /**\n   * The label in the leftmost cell of the row.\n   */\n  @Prop() label: string;\n\n  /**\n   * The size of the data row component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"medium\";\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  /**\n   * The value of the middle (right if no end-component supplied) cell of the row.\n   */\n  @Prop() value: string;\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    this.deviceSize = getCurrentDeviceSize();\n    this.hasEndComponent = slotHasContent(this.el, \"end-component\");\n    this.checkLabelAbove();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n    if (this.hasEndComponent) this.labelEndComponent();\n  }\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.checkLabelAbove();\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  private checkLabelAbove() {\n    const rowSize = this.el.shadowRoot.querySelector(\".data\")?.clientWidth + 46;\n    if (rowSize) {\n      this.listSize =\n        rowSize < DEVICE_SIZES.S ? \"xs\" : rowSize < DEVICE_SIZES.M ? \"m\" : \"xl\";\n    }\n  }\n\n  private renderCellContent = (cell: \"label\" | \"value\") => {\n    const isValue = cell === \"value\";\n    return (\n      <div class={cell}>\n        {isSlotUsed(this.el, cell) ? (\n          <slot name={cell}></slot>\n        ) : (\n          <ic-typography\n            variant={\n              isValue\n                ? \"body\"\n                : this.listSize === \"xs\"\n                ? \"label\"\n                : \"subtitle-large\"\n            }\n          >\n            {isValue ? this.value : this.label}\n          </ic-typography>\n        )}\n      </div>\n    );\n  };\n\n  private labelEndComponent(): void {\n    this.el.shadowRoot\n      .querySelectorAll(\"slot[name=end-component]\")\n      .forEach((child) =>\n        child.setAttribute(\"aria-label\", `for ${this.label} row`)\n      );\n  }\n\n  render() {\n    const {\n      el,\n      listSize,\n      hasEndComponent,\n      label,\n      renderCellContent,\n      size,\n      theme,\n      value,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [\"ic-data-row-small\"]: size === \"small\",\n          [\"breakpoint-medium\"]: listSize === \"m\",\n          [\"breakpoint-xs\"]: listSize === \"xs\",\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n        role=\"listitem\"\n      >\n        <div class=\"data\">\n          <div class=\"text-cells\">\n            {(isSlotUsed(el, \"label\") || label) && renderCellContent(\"label\")}\n            {(isSlotUsed(el, \"value\") || value) && renderCellContent(\"value\")}\n          </div>\n          {hasEndComponent && (\n            <div class=\"end-component\">\n              <slot name=\"end-component\"></slot>\n            </div>\n          )}\n        </div>\n        <div class=\"divider\" />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-data-row.js","sourceRoot":"","sources":["../../../src/components/ic-data-row/ic-data-row.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  isSlotUsed,\n  slotHasContent,\n} from \"../../utils/helpers\";\nimport { IcSizesNoLarge, IcThemeMode } from \"../../utils/types\";\n\n/**\n * @slot label - Content will be rendered in the leftmost cell.\n * @slot value - Content will be rendered to the right of the label.\n * @slot end-component - Content will be displayed in the rightmost cell.\n */\n@Component({\n  tag: \"ic-data-row\",\n  styleUrl: \"ic-data-row.css\",\n  shadow: true,\n})\nexport class DataRow {\n  private hasEndComponent: boolean = false;\n  private resizeObserver: ResizeObserver | null = null;\n\n  @Element() el: HTMLIcDataRowElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() listSize: \"xl\" | \"m\" | \"xs\";\n\n  /**\n   * The label in the leftmost cell of the row.\n   */\n  @Prop() label?: string;\n\n  /**\n   * The size of the data row component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"medium\";\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  /**\n   * The value of the middle (right if no end-component supplied) cell of the row.\n   */\n  @Prop() value?: string;\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    this.deviceSize = getCurrentDeviceSize();\n    this.hasEndComponent = slotHasContent(this.el, \"end-component\");\n    this.checkLabelAbove();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n    if (this.hasEndComponent) this.labelEndComponent();\n  }\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.checkLabelAbove();\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  private checkLabelAbove() {\n    const row = this.el.shadowRoot?.querySelector(\".data\");\n    if (row) {\n      const rowSize = row?.clientWidth + 46;\n      if (rowSize) {\n        this.listSize =\n          rowSize < DEVICE_SIZES.S\n            ? \"xs\"\n            : rowSize < DEVICE_SIZES.M\n            ? \"m\"\n            : \"xl\";\n      }\n    }\n  }\n\n  private renderCellContent = (cell: \"label\" | \"value\") => {\n    const isValue = cell === \"value\";\n    return (\n      <div class={cell}>\n        {isSlotUsed(this.el, cell) ? (\n          <slot name={cell}></slot>\n        ) : (\n          <ic-typography\n            variant={\n              isValue\n                ? \"body\"\n                : this.listSize === \"xs\"\n                ? \"label\"\n                : \"subtitle-large\"\n            }\n          >\n            {isValue ? this.value : this.label}\n          </ic-typography>\n        )}\n      </div>\n    );\n  };\n\n  private labelEndComponent(): void {\n    this.el.shadowRoot\n      ?.querySelectorAll(\"slot[name=end-component]\")\n      .forEach((child) =>\n        child.setAttribute(\"aria-label\", `for ${this.label} row`)\n      );\n  }\n\n  render() {\n    const {\n      el,\n      listSize,\n      hasEndComponent,\n      label,\n      renderCellContent,\n      size,\n      theme,\n      value,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [\"ic-data-row-small\"]: size === \"small\",\n          [\"breakpoint-medium\"]: listSize === \"m\",\n          [\"breakpoint-xs\"]: listSize === \"xs\",\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n        role=\"listitem\"\n      >\n        <div class=\"data\">\n          <div class=\"text-cells\">\n            {(isSlotUsed(el, \"label\") || label) && renderCellContent(\"label\")}\n            {(isSlotUsed(el, \"value\") || value) && renderCellContent(\"value\")}\n          </div>\n          {hasEndComponent && (\n            <div class=\"end-component\">\n              <slot name=\"end-component\"></slot>\n            </div>\n          )}\n        </div>\n        <div class=\"divider\" />\n      </Host>\n    );\n  }\n}\n"]}