@ukic/web-components 2.29.1 → 3.0.0-alpha.2

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

@@ -19,15 +19,15 @@ export class DataRow {
             const isValue = cell === "value";
             return (h("div", { class: cell }, isSlotUsed(this.el, cell) ? (h("slot", { name: cell })) : (h("ic-typography", { variant: isValue
                     ? "body"
-                    : this.entitySize === "xs"
+                    : this.listSize === "xs"
                         ? "label"
                         : "subtitle-large" }, isValue ? this.value : this.label))));
         };
         this.deviceSize = DEVICE_SIZES.XL;
-        this.entitySize = undefined;
+        this.listSize = undefined;
         this.label = undefined;
-        this.size = "default";
-        this.small = false;
+        this.size = "medium";
+        this.theme = "inherit";
         this.value = undefined;
     }
     disconnectedCallback() {
@@ -48,7 +48,7 @@ export class DataRow {
         var _a;
         const rowSize = ((_a = this.el.shadowRoot.querySelector(".data")) === null || _a === void 0 ? void 0 : _a.clientWidth) + 46;
         if (rowSize) {
-            this.entitySize =
+            this.listSize =
                 rowSize < DEVICE_SIZES.S ? "xs" : rowSize < DEVICE_SIZES.M ? "m" : "xl";
         }
     }
@@ -58,11 +58,12 @@ export class DataRow {
             .forEach((child) => child.setAttribute("aria-label", `for ${this.label} row`));
     }
     render() {
-        const { el, entitySize, hasEndComponent, label, renderCellContent, size, small, value, } = this;
+        const { el, listSize, hasEndComponent, label, renderCellContent, size, theme, value, } = this;
         return (h(Host, { class: {
-                ["small"]: small || size === "small",
-                ["breakpoint-medium"]: entitySize === "m",
-                ["breakpoint-xs"]: entitySize === "xs",
+                ["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" })));
     }
     static get is() { return "ic-data-row"; }
@@ -101,7 +102,7 @@ export class DataRow {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizesNoLarge",
-                    "resolved": "\"default\" | \"small\"",
+                    "resolved": "\"medium\" | \"small\"",
                     "references": {
                         "IcSizesNoLarge": {
                             "location": "import",
@@ -118,28 +119,31 @@ export class DataRow {
                 },
                 "attribute": "size",
                 "reflect": false,
-                "defaultValue": "\"default\""
+                "defaultValue": "\"medium\""
             },
-            "small": {
-                "type": "boolean",
+            "theme": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This prop should not be used anymore. Set prop `size` to \"small\" instead."
-                        }],
-                    "text": ""
+                    "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."
                 },
-                "attribute": "small",
+                "attribute": "theme",
                 "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "\"inherit\""
             },
             "value": {
                 "type": "string",
@@ -163,7 +167,7 @@ export class DataRow {
     static get states() {
         return {
             "deviceSize": {},
-            "entitySize": {}
+            "listSize": {}
         };
     }
     static get elementRef() { return "el"; }

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 } 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() entitySize: \"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 = \"default\";\n\n  /**\n   * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n   */\n  @Prop() small?: boolean = false;\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.entitySize =\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.entitySize === \"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      entitySize,\n      hasEndComponent,\n      label,\n      renderCellContent,\n      size,\n      small,\n      value,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [\"small\"]: small || size === \"small\",\n          [\"breakpoint-medium\"]: entitySize === \"m\",\n          [\"breakpoint-xs\"]: entitySize === \"xs\",\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":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EACL,mBAAmB,EACnB,YAAY,EACZ,oBAAoB,EACpB,UAAU,EACV,cAAc,GACf,MAAM,qBAAqB,CAAC;AAG7B;;;;GAIG;AAMH,MAAM,OAAO,OAAO;;QACV,oBAAe,GAAY,KAAK,CAAC;QACjC,mBAAc,GAAmB,IAAI,CAAC;QA0CtC,sBAAiB,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;gBAC5C,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACvC,CAAC,CAAC;QAUM,sBAAiB,GAAG,CAAC,IAAuB,EAAE,EAAE;YACtD,MAAM,OAAO,GAAG,IAAI,KAAK,OAAO,CAAC;YACjC,OAAO,CACL,WAAK,KAAK,EAAE,IAAI,IACb,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAC3B,YAAM,IAAI,EAAE,IAAI,GAAS,CAC1B,CAAC,CAAC,CAAC,CACF,qBACE,OAAO,EACL,OAAO;oBACL,CAAC,CAAC,MAAM;oBACR,CAAC,CAAC,IAAI,CAAC,QAAQ,KAAK,IAAI;wBACxB,CAAC,CAAC,OAAO;wBACT,CAAC,CAAC,gBAAgB,IAGrB,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CACpB,CACjB,CACG,CACP,CAAC;QACJ,CAAC,CAAC;0BA3E4B,YAAY,CAAC,EAAE;;;oBAWb,QAAQ;qBAKV,SAAS;;;IAOvC,oBAAoB;;QAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;IACpC,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,UAAU,GAAG,oBAAoB,EAAE,CAAC;QACzC,IAAI,CAAC,eAAe,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,eAAe,CAAC,CAAC;QAChE,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,gBAAgB;QACd,mBAAmB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC5C,IAAI,IAAI,CAAC,eAAe;YAAE,IAAI,CAAC,iBAAiB,EAAE,CAAC;IACrD,CAAC;IAUO,eAAe;;QACrB,MAAM,OAAO,GAAG,CAAA,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,0CAAE,WAAW,IAAG,EAAE,CAAC;QAC5E,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,QAAQ;gBACX,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;QAC5E,CAAC;IACH,CAAC;IAyBO,iBAAiB;QACvB,IAAI,CAAC,EAAE,CAAC,UAAU;aACf,gBAAgB,CAAC,0BAA0B,CAAC;aAC5C,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CACjB,KAAK,CAAC,YAAY,CAAC,YAAY,EAAE,OAAO,IAAI,CAAC,KAAK,MAAM,CAAC,CAC1D,CAAC;IACN,CAAC;IAED,MAAM;QACJ,MAAM,EACJ,EAAE,EACF,QAAQ,EACR,eAAe,EACf,KAAK,EACL,iBAAiB,EACjB,IAAI,EACJ,KAAK,EACL,KAAK,GACN,GAAG,IAAI,CAAC;QAET,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,CAAC,mBAAmB,CAAC,EAAE,IAAI,KAAK,OAAO;gBACvC,CAAC,mBAAmB,CAAC,EAAE,QAAQ,KAAK,GAAG;gBACvC,CAAC,eAAe,CAAC,EAAE,QAAQ,KAAK,IAAI;gBACpC,CAAC,YAAY,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,SAAS;aAC3C,EACD,IAAI,EAAC,UAAU;YAEf,WAAK,KAAK,EAAC,MAAM;gBACf,WAAK,KAAK,EAAC,YAAY;oBACpB,CAAC,UAAU,CAAC,EAAE,EAAE,OAAO,CAAC,IAAI,KAAK,CAAC,IAAI,iBAAiB,CAAC,OAAO,CAAC;oBAChE,CAAC,UAAU,CAAC,EAAE,EAAE,OAAO,CAAC,IAAI,KAAK,CAAC,IAAI,iBAAiB,CAAC,OAAO,CAAC,CAC7D;gBACL,eAAe,IAAI,CAClB,WAAK,KAAK,EAAC,eAAe;oBACxB,YAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,CACP,CACG;YACN,WAAK,KAAK,EAAC,SAAS,GAAG,CAClB,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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"]}

package/dist/collection/components/ic-data-row/test/basic/ic-data-row.spec.js

@@ -36,12 +36,12 @@ describe("ic-data-row", () => {
         });
         expect(page.root).toMatchSnapshot();
     });
-    it("should render the label variant of typography when entity size is xs", async () => {
+    it("should render the label variant of typography when list size is xs", async () => {
         const page = await newSpecPage({
             components: [DataRow],
             html: `<ic-data-row label="label"><ic-status-tag variant="success" label="success" slot="value"></ic-status-tag></ic-data-row>`,
         });
-        page.rootInstance.entitySize = "xs";
+        page.rootInstance.listSize = "xs";
         await page.waitForChanges();
         expect(page.root).toMatchSnapshot();
     });
@@ -58,7 +58,7 @@ describe("ic-data-row", () => {
         expect(page.rootInstance.resizeObserver).toBe(resize);
         page.setContent("");
     });
-    it("should change entity size depending on screen size", async () => {
+    it("should change list size depending on screen size", async () => {
         const page = await newSpecPage({
             components: [DataRow],
             html: `<ic-data-row label="label" value="value"></ic-data-row>`,
@@ -68,7 +68,7 @@ describe("ic-data-row", () => {
         });
         page.waitForChanges();
         page.rootInstance.checkLabelAbove();
-        expect(page.rootInstance.entitySize).toBe("xs");
+        expect(page.rootInstance.listSize).toBe("xs");
     });
 });
 //# sourceMappingURL=ic-data-row.spec.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ic-data-row.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-data-row/test/basic/ic-data-row.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { DataRow } from \"../../ic-data-row\";\n\ndescribe(\"ic-data-row\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row label=\"label\" value=\"value\"></ic-data-row>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render slotted content in the label slot\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row value=\"value\"><ic-typography slot=\"label\">Label</ic-typography></ic-data-row>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should not render label element if no label provided\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row value=\"value\"></ic-data-row>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render slotted content in the value slot\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row label=\"label\"><ic-status-tag variant=\"success\" label=\"success\" slot=\"value\"></ic-status-tag></ic-data-row>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render slotted content in the end-component slot\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row label=\"label\" value=\"test value\"><ic-status-tag variant=\"success\" label=\"success\" slot=\"end-component\"></ic-status-tag></ic-data-row>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render the label variant of typography when entity size is xs\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row label=\"label\"><ic-status-tag variant=\"success\" label=\"success\" slot=\"value\"></ic-status-tag></ic-data-row>`,\n    });\n\n    page.rootInstance.entitySize = \"xs\";\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should call runResizeObserver\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row label=\"label\" value=\"value\"></ic-data-row>`,\n    });\n\n    await page.rootInstance.runResizeObserver();\n    page.waitForChanges();\n\n    const resize = new ResizeObserver(() => {\n      page.rootInstance.checkLabelAbove();\n    });\n\n    expect(page.rootInstance.resizeObserver).toBe(resize);\n\n    page.setContent(\"\");\n  });\n\n  it(\"should change entity size depending on screen size\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row label=\"label\" value=\"value\"></ic-data-row>`,\n    });\n\n    Object.defineProperty(\n      page.root.shadowRoot.querySelector(\".data\"),\n      \"clientWidth\",\n      {\n        value: 200,\n      }\n    );\n\n    page.waitForChanges();\n\n    page.rootInstance.checkLabelAbove();\n\n    expect(page.rootInstance.entitySize).toBe(\"xs\");\n  });\n});\n"]}
+{"version":3,"file":"ic-data-row.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-data-row/test/basic/ic-data-row.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { DataRow } from \"../../ic-data-row\";\n\ndescribe(\"ic-data-row\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row label=\"label\" value=\"value\"></ic-data-row>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render slotted content in the label slot\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row value=\"value\"><ic-typography slot=\"label\">Label</ic-typography></ic-data-row>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should not render label element if no label provided\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row value=\"value\"></ic-data-row>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render slotted content in the value slot\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row label=\"label\"><ic-status-tag variant=\"success\" label=\"success\" slot=\"value\"></ic-status-tag></ic-data-row>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render slotted content in the end-component slot\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row label=\"label\" value=\"test value\"><ic-status-tag variant=\"success\" label=\"success\" slot=\"end-component\"></ic-status-tag></ic-data-row>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render the label variant of typography when list size is xs\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row label=\"label\"><ic-status-tag variant=\"success\" label=\"success\" slot=\"value\"></ic-status-tag></ic-data-row>`,\n    });\n\n    page.rootInstance.listSize = \"xs\";\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should call runResizeObserver\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row label=\"label\" value=\"value\"></ic-data-row>`,\n    });\n\n    await page.rootInstance.runResizeObserver();\n    page.waitForChanges();\n\n    const resize = new ResizeObserver(() => {\n      page.rootInstance.checkLabelAbove();\n    });\n\n    expect(page.rootInstance.resizeObserver).toBe(resize);\n\n    page.setContent(\"\");\n  });\n\n  it(\"should change list size depending on screen size\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row label=\"label\" value=\"value\"></ic-data-row>`,\n    });\n\n    Object.defineProperty(\n      page.root.shadowRoot.querySelector(\".data\"),\n      \"clientWidth\",\n      {\n        value: 200,\n      }\n    );\n\n    page.waitForChanges();\n\n    page.rootInstance.checkLabelAbove();\n\n    expect(page.rootInstance.listSize).toBe(\"xs\");\n  });\n});\n"]}

package/dist/collection/components/ic-dialog/ic-dialog.css

@@ -457,7 +457,7 @@ video {
   opacity: 0;
 }
 
-:host(.fade-in) {
+:host(.ic-dialog-fade-in) {
   opacity: 1;
 }
 
@@ -486,13 +486,13 @@ video {
     transition: transform 1000s;
   }
 
-  :host(.fade-in) .dialog {
+  :host(.ic-dialog-fade-in) .dialog {
     transform: translateY(0);
     transition: transform var(--ic-easing-transition-slow);
   }
 }
 
-:host(.hidden) {
+:host(.ic-dialog-hidden) {
   display: none;
 }
 
@@ -567,10 +567,6 @@ video {
   position: relative;
 }
 
-.status-alert {
-  margin-bottom: var(--ic-space-xs);
-}
-
 .dialog-controls {
   margin-top: auto;
   padding: var(--ic-space-xs) var(--ic-space-md) 0;
@@ -624,11 +620,6 @@ video {
 }
 
 @media (max-width: 364px) {
-  .triple-button {
-    flex-direction: column;
-    gap: var(--ic-space-xs);
-  }
-
   .dialog-control-button {
     width: unset;
   }

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

@@ -1,6 +1,6 @@
 import { Host, h, } from "@stencil/core";
 import closeIcon from "../../assets/close-icon.svg";
-import { isSlotUsed, checkResizeObserver, isPropDefined, onComponentRequiredPropUndefined, } from "../../utils/helpers";
+import { isSlotUsed, checkResizeObserver, onComponentRequiredPropUndefined, } from "../../utils/helpers";
 /**
  * @slot dialog-controls - Content will be place at the bottom of the dialog.
  * @slot heading - Content will be placed at the top of the dialog.
@@ -102,12 +102,6 @@ export class Dialog {
                 }
             }
         };
-        this.setAlertVariant = () => {
-            if (isPropDefined(this.status) && this.status !== null) {
-                const alert = this.el.shadowRoot.querySelector("ic-alert");
-                alert.setAttribute("variant", this.status);
-            }
-        };
         this.closeIconClick = () => {
             this.open = false;
         };
@@ -158,71 +152,22 @@ export class Dialog {
                 }
             }
         };
-        this.setButtonOnClick = () => {
-            var _a, _b, _c;
-            if (this.buttons) {
-                this.buttonOnclick0 = new Function((_a = this.buttonProps[0]) === null || _a === void 0 ? void 0 : _a.onclick);
-                this.buttonOnclick1 = new Function((_b = this.buttonProps[1]) === null || _b === void 0 ? void 0 : _b.onclick);
-                this.buttonOnclick2 = new Function((_c = this.buttonProps[2]) === null || _c === void 0 ? void 0 : _c.onclick);
-            }
-        };
-        this.getButtonOnclick = (index) => {
-            if (index === 0) {
-                return this.buttonOnclick0();
-            }
-            else if (index === 1) {
-                return this.buttonOnclick1();
-            }
-            else {
-                return this.buttonOnclick2();
-            }
-        };
-        this.getButtonVariant = (index) => {
-            const mainVariant = this.destructive ? "destructive" : "primary";
-            if (this.buttonProps.length === 1) {
-                return mainVariant;
-            }
-            else if (this.buttonProps.length === 2) {
-                if (index === 0) {
-                    return "tertiary";
-                }
-                else {
-                    return mainVariant;
-                }
-            }
-            else {
-                if (index === 2) {
-                    return mainVariant;
-                }
-                else {
-                    return "secondary";
-                }
-            }
-        };
         this.renderDialog = () => {
-            const { alertHeading, alertMessage, buttons, buttonProps, size, heading, label, status, destructive, dismissLabel, hideCloseButton, } = this;
+            const { buttons, size, heading, label, destructive, dismissLabel, hideCloseButton, } = this;
             return (h("dialog", { class: {
                     ["dialog"]: true,
                     [`${size}`]: true,
                     ["disable-height-constraint"]: this.disableHeightConstraint,
                     ["disable-width-constraint"]: this.disableWidthConstraint,
-                }, "aria-labelledby": "dialog-label dialog-heading", "aria-describedby": "dialog-alert dialog-content", ref: (el) => (this.dialogEl = el) }, h("div", { class: "heading-area" }, h("div", { class: "heading-content" }, h("div", { class: "label" }, h("slot", { name: "label" }, h("ic-typography", { variant: "label", id: "dialog-label" }, label))), h("div", { class: "heading" }, h("slot", { name: "heading" }, h("ic-typography", { variant: "h4", id: "dialog-heading" }, heading)))), !hideCloseButton && (h("ic-button", { class: "close-icon", variant: "icon", innerHTML: closeIcon, "aria-label": dismissLabel, onClick: this.closeIconClick, "data-gets-focus": destructive || !buttons ? "" : null }))), h("div", { class: "content-area" }, isSlotUsed(this.el, "alert") ? (h("slot", { name: "alert" })) : (status && (h("ic-alert", { variant: status, heading: alertHeading, message: alertMessage, "title-above": true, class: "status-alert", id: "dialog-alert" }))), h("div", { id: "dialog-content" }, h("slot", null))), (buttons || isSlotUsed(this.el, this.DIALOG_CONTROLS)) && (h("div", { class: {
-                    [this.DIALOG_CONTROLS]: true,
-                    ["triple-button"]: buttonProps.length === 3,
-                } }, h("slot", { name: this.DIALOG_CONTROLS }, !isSlotUsed(this.el, this.DIALOG_CONTROLS) &&
-                buttonProps.map((props, index) => {
-                    if (index > 2) {
-                        return;
-                    }
-                    else {
-                        return (h("ic-button", { variant: this.getButtonVariant(index), onClick: () => this.getButtonOnclick(index), class: "dialog-control-button", "full-width": buttonProps.length === 3, "data-gets-focus": this.getButtonVariant(index) === "primary" ? "" : null }, props.label));
-                    }
-                }))))));
+                }, "aria-labelledby": "dialog-label dialog-heading", "aria-describedby": "dialog-alert dialog-content", ref: (el) => (this.dialogEl = el) }, h("div", { class: "heading-area" }, h("div", { class: "heading-content" }, h("div", { class: "label" }, h("slot", { name: "label" }, h("ic-typography", { variant: "label", id: "dialog-label" }, label))), h("div", { class: "heading" }, h("slot", { name: "heading" }, h("ic-typography", { variant: "h4", id: "dialog-heading" }, heading)))), !hideCloseButton && (h("ic-button", { class: "close-icon", variant: "icon", innerHTML: closeIcon, "aria-label": dismissLabel, onClick: this.closeIconClick, "data-gets-focus": destructive || !buttons ? "" : null }))), h("div", { class: "content-area" }, isSlotUsed(this.el, "alert") && h("slot", { name: "alert" }), h("div", { id: "dialog-content" }, h("slot", null))), buttons &&
+                (isSlotUsed(this.el, this.DIALOG_CONTROLS) ? (h("div", { class: {
+                        [this.DIALOG_CONTROLS]: true,
+                    } }, h("slot", { name: this.DIALOG_CONTROLS }))) : (h("div", { class: {
+                        [this.DIALOG_CONTROLS]: true,
+                    } }, h("ic-button", { variant: "tertiary", onClick: () => this.cancelDialog(), class: "dialog-control-button", "data-gets-focus": null }, "Cancel"), h("ic-button", { variant: this.destructive ? "destructive" : "primary", onClick: () => this.confirmDialog(), class: "dialog-control-button", "data-gets-focus": "" }, "Confirm"))))));
         };
         this.dialogRendered = false;
         this.fadeIn = false;
-        this.alertHeading = undefined;
-        this.alertMessage = undefined;
         this.buttons = true;
         this.closeOnBackdropClick = true;
         this.destructive = false;
@@ -234,14 +179,6 @@ export class Dialog {
         this.label = undefined;
         this.open = undefined;
         this.size = "small";
-        this.status = undefined;
-        this.buttonProps = [
-            {
-                label: "Cancel",
-                onclick: "this.cancelDialog();",
-            },
-            { label: "Confirm", onclick: "this.confirmDialog();" },
-        ];
     }
     watchOpenHandler() {
         if (this.open) {
@@ -262,20 +199,11 @@ export class Dialog {
             }, 80);
         }
     }
-    watchPropHandler() {
-        this.setButtonOnClick();
-    }
     disconnectedCallback() {
         this.removeSlotChangeListener();
     }
-    componentWillLoad() {
-        if (this.buttonProps.length) {
-            this.setButtonOnClick();
-        }
-    }
     componentDidLoad() {
         this.getInteractiveElements();
-        this.setAlertVariant();
         this.refreshInteractiveElementsOnSlotChange();
         if (this.open) {
             this.dialogOpened();
@@ -322,18 +250,6 @@ export class Dialog {
             }
         }
     }
-    /**
-     * @deprecated This method should not be used anymore. Use open prop to set dialog visibility.
-     */
-    async showDialog() {
-        this.open = true;
-    }
-    /**
-     * @deprecated This method should not be used anymore. Use open prop to set dialog visibility.
-     */
-    async hideDialog() {
-        this.open = false;
-    }
     /**
      * Cancels the dialog. Used by the default 'Cancel' button or can be called manually to trigger cancelling of dialog.
      */
@@ -364,8 +280,8 @@ export class Dialog {
     }
     render() {
         return (h(Host, { class: {
-                ["hidden"]: !this.dialogRendered,
-                ["fade-in"]: this.fadeIn,
+                ["ic-dialog-hidden"]: !this.dialogRendered,
+                ["ic-dialog-fade-in"]: this.fadeIn,
                 ["disable-height-constraint"]: this.disableHeightConstraint,
             } }, this.disableHeightConstraint ? (h("div", { class: "backdrop", ref: (el) => (this.backdropEl = el) }, this.renderDialog())) : (this.renderDialog())));
     }
@@ -383,46 +299,6 @@ export class Dialog {
     }
     static get properties() {
         return {
-            "alertHeading": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This prop should not be used anymore. Use an ic-alert/IcAlert component within an alert slot with a heading instead."
-                        }],
-                    "text": ""
-                },
-                "attribute": "alert-heading",
-                "reflect": false
-            },
-            "alertMessage": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This prop should not be used anymore. Use an ic-alert/IcAlert component within an alert slot with a message instead."
-                        }],
-                    "text": ""
-                },
-                "attribute": "alert-message",
-                "reflect": false
-            },
             "buttons": {
                 "type": "boolean",
                 "mutable": false,
@@ -435,7 +311,7 @@ export class Dialog {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "If set to `false`, dialog controls will not be displayed overriding buttonProps or slotted dialog controls."
+                    "text": "If set to `false`, default buttons or slotted dialog controls will not be displayed."
                 },
                 "attribute": "buttons",
                 "reflect": false,
@@ -618,42 +494,6 @@ export class Dialog {
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "\"small\""
-            },
-            "status": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "\"neutral\" | \"info\" | \"warning\" | \"error\" | \"success\"",
-                    "resolved": "\"error\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This prop should not be used anymore. Use an ic-alert/IcAlert component within an alert slot with a variant instead."
-                        }],
-                    "text": ""
-                },
-                "attribute": "status",
-                "reflect": false
-            },
-            "buttonProps": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "{ label: string; onclick: string }[]",
-                    "resolved": "{ label: string; onclick: string; }[]",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Sets the label and onclick functions for default buttons."
-                },
-                "defaultValue": "[\n    {\n      label: \"Cancel\",\n      onclick: \"this.cancelDialog();\",\n    },\n    { label: \"Confirm\", onclick: \"this.confirmDialog();\" },\n  ]"
             }
         };
     }
@@ -728,46 +568,6 @@ export class Dialog {
     }
     static get methods() {
         return {
-            "showDialog": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This method should not be used anymore. Use open prop to set dialog visibility."
-                        }]
-                }
-            },
-            "hideDialog": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This method should not be used anymore. Use open prop to set dialog visibility."
-                        }]
-                }
-            },
             "cancelDialog": {
                 "complexType": {
                     "signature": "() => Promise<void>",
@@ -809,9 +609,6 @@ export class Dialog {
         return [{
                 "propName": "open",
                 "methodName": "watchOpenHandler"
-            }, {
-                "propName": "buttonProps",
-                "methodName": "watchPropHandler"
             }];
     }
     static get listeners() {