@ukic/web-components 2.4.1 → 2.6.0

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

@@ -3,6 +3,7 @@ import { onComponentRequiredPropUndefined, isSlotUsed, removeDisabledFalse, } fr
 import dismissIcon from "../../assets/dismiss-icon.svg";
 /**
  * @slot icon - Content will be rendered at the start of the chip.
+ * @slot badge - Badge component overlaying the top right of the chip.
  */
 export class Chip {
   constructor() {
@@ -18,14 +19,18 @@ export class Chip {
     };
     this.isHovered = false;
     this.visible = true;
-    this.appearance = "filled";
+    this.appearance = undefined;
     this.disabled = false;
     this.dismissible = false;
     this.label = undefined;
     this.size = "default";
+    this.variant = "filled";
   }
   componentWillLoad() {
     removeDisabledFalse(this.disabled, this.el);
+    if (this.appearance === "outline") {
+      this.variant = "outlined";
+    }
   }
   componentDidLoad() {
     var _a;
@@ -46,17 +51,18 @@ export class Chip {
     }
   }
   render() {
-    const { label, appearance, size, dismissible, visible, disabled, isHovered, } = this;
+    const { label, appearance, variant, size, dismissible, visible, disabled, isHovered, } = this;
     return (visible && (h("div", { class: {
         ["chip"]: true,
-        [`${appearance}`]: true,
+        [`${appearance}`]: appearance !== undefined,
+        [`${variant}`]: true,
         [`${size}`]: true,
         ["disabled"]: disabled,
         ["dismissible"]: dismissible,
         ["hovered"]: isHovered,
       } }, isSlotUsed(this.el, "icon") && (h("div", { class: "icon" }, h("slot", { name: "icon" }))), h("ic-typography", { variant: "label", "apply-vertical-margins": false, class: "label" }, h("span", null, label)), dismissible && (h("ic-tooltip", { label: "Dismiss", target: "dismiss-icon", class: { ["tooltip-disabled"]: disabled } }, h("button", { id: "dismiss-icon", class: {
         ["dismiss-icon"]: true,
-      }, "aria-label": `Dismiss ${label} chip`, disabled: disabled, tabindex: disabled ? -1 : 0, onClick: this.dismissAction, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler, innerHTML: dismissIcon }))))));
+      }, "aria-label": `Dismiss ${label} chip`, disabled: disabled, tabindex: disabled ? -1 : 0, onClick: this.dismissAction, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler, innerHTML: dismissIcon }))), isSlotUsed(this.el, "badge") && h("slot", { name: "badge" }))));
   }
   static get is() { return "ic-chip"; }
   static get encapsulation() { return "shadow"; }
@@ -90,12 +96,14 @@ export class Chip {
         "required": false,
         "optional": true,
         "docs": {
-          "tags": [],
-          "text": "The emphasis of the chip."
+          "tags": [{
+              "name": "deprecated",
+              "text": "This prop should not be used anymore. Use variant prop instead."
+            }],
+          "text": ""
         },
         "attribute": "appearance",
-        "reflect": false,
-        "defaultValue": "\"filled\""
+        "reflect": false
       },
       "disabled": {
         "type": "boolean",
@@ -173,6 +181,30 @@ export class Chip {
         "attribute": "size",
         "reflect": false,
         "defaultValue": "\"default\""
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcEmphasisType",
+          "resolved": "\"filled\" | \"outlined\"",
+          "references": {
+            "IcEmphasisType": {
+              "location": "import",
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::IcEmphasisType"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The emphasis of the chip."
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "\"filled\""
       }
     };
   }

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

@@ -1 +1 @@
-{"version":3,"file":"ic-chip.js","sourceRoot":"","sources":["../../../src/components/ic-chip/ic-chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n} from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcChipAppearance } from \"./ic-chip.types\";\nimport { IcSizes } from \"../../utils/types\";\nimport dismissIcon from \"../../assets/dismiss-icon.svg\";\n\n/**\n * @slot icon - Content will be rendered at the start of the chip.\n */\n@Component({\n  tag: \"ic-chip\",\n  styleUrl: \"ic-chip.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Chip {\n  @Element() el: HTMLIcChipElement;\n\n  @State() isHovered: boolean = false;\n  @State() visible: boolean = true;\n\n  /**\n   * The emphasis of the chip.\n   */\n  @Prop() appearance?: IcChipAppearance = \"filled\";\n\n  /**\n   * If `true`, the chip will appear disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If `true`, the chip will have a close button at the end to dismiss it.\n   */\n  @Prop() dismissible?: boolean = false;\n\n  /**\n   * The text rendered within the chip.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The size of the chip.\n   */\n  @Prop() size?: IcSizes = \"default\";\n\n  /**\n   * @deprecated This event should not be used anymore. Use icDismiss instead.\n   */\n  @Event() dismiss: EventEmitter<void>;\n\n  /**\n   * Is emitted when the user dismisses the chip.\n   */\n  @Event() icDismiss: EventEmitter<void>;\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    this.dismissible &&\n      this.el.shadowRoot\n        .querySelector(\"span.ic-tooltip-label\")\n        ?.setAttribute(\"aria-hidden\", \"true\");\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Chip\"\n    );\n  }\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleClick(): void {\n    this.visible = !this.visible;\n  }\n\n  /**\n   * Sets focus on the chip.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.el.shadowRoot.querySelector(\"button\")) {\n      this.el.shadowRoot.querySelector(\"button\").focus();\n    }\n  }\n\n  private dismissAction = (): void => {\n    this.dismiss.emit();\n    this.icDismiss.emit();\n  };\n\n  private mouseEnterHandler = (): void => {\n    this.isHovered = true;\n  };\n\n  private mouseLeaveHandler = (): void => {\n    this.isHovered = false;\n  };\n\n  render() {\n    const {\n      label,\n      appearance,\n      size,\n      dismissible,\n      visible,\n      disabled,\n      isHovered,\n    } = this;\n\n    return (\n      visible && (\n        <div\n          class={{\n            [\"chip\"]: true,\n            [`${appearance}`]: true,\n            [`${size}`]: true,\n            [\"disabled\"]: disabled,\n            [\"dismissible\"]: dismissible,\n            [\"hovered\"]: isHovered,\n          }}\n        >\n          {isSlotUsed(this.el, \"icon\") && (\n            <div class=\"icon\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          <ic-typography\n            variant=\"label\"\n            apply-vertical-margins={false}\n            class=\"label\"\n          >\n            <span>{label}</span>\n          </ic-typography>\n          {dismissible && (\n            <ic-tooltip\n              label=\"Dismiss\"\n              target=\"dismiss-icon\"\n              class={{ [\"tooltip-disabled\"]: disabled }}\n            >\n              <button\n                id=\"dismiss-icon\"\n                class={{\n                  [\"dismiss-icon\"]: true,\n                }}\n                aria-label={`Dismiss ${label} chip`}\n                disabled={disabled}\n                tabindex={disabled ? -1 : 0}\n                onClick={this.dismissAction}\n                onMouseEnter={this.mouseEnterHandler}\n                onMouseLeave={this.mouseLeaveHandler}\n                innerHTML={dismissIcon}\n              ></button>\n            </ic-tooltip>\n          )}\n        </div>\n      )\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-chip.js","sourceRoot":"","sources":["../../../src/components/ic-chip/ic-chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n} from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcChipAppearance } from \"./ic-chip.types\";\nimport { IcEmphasisType, IcSizes } from \"../../utils/types\";\nimport dismissIcon from \"../../assets/dismiss-icon.svg\";\n\n/**\n * @slot icon - Content will be rendered at the start of the chip.\n * @slot badge - Badge component overlaying the top right of the chip.\n */\n@Component({\n  tag: \"ic-chip\",\n  styleUrl: \"ic-chip.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Chip {\n  @Element() el: HTMLIcChipElement;\n\n  @State() isHovered: boolean = false;\n  @State() visible: boolean = true;\n\n  /**\n   * @deprecated This prop should not be used anymore. Use variant prop instead.\n   */\n  @Prop() appearance?: IcChipAppearance;\n\n  /**\n   * If `true`, the chip will appear disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If `true`, the chip will have a close button at the end to dismiss it.\n   */\n  @Prop() dismissible?: boolean = false;\n\n  /**\n   * The text rendered within the chip.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The size of the chip.\n   */\n  @Prop() size?: IcSizes = \"default\";\n\n  /**\n   * The emphasis of the chip.\n   */\n  @Prop() variant?: IcEmphasisType = \"filled\";\n\n  /**\n   * @deprecated This event should not be used anymore. Use icDismiss instead.\n   */\n  @Event() dismiss: EventEmitter<void>;\n\n  /**\n   * Is emitted when the user dismisses the chip.\n   */\n  @Event() icDismiss: EventEmitter<void>;\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n\n    if (this.appearance === \"outline\") {\n      this.variant = \"outlined\";\n    }\n  }\n\n  componentDidLoad(): void {\n    this.dismissible &&\n      this.el.shadowRoot\n        .querySelector(\"span.ic-tooltip-label\")\n        ?.setAttribute(\"aria-hidden\", \"true\");\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Chip\"\n    );\n  }\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleClick(): void {\n    this.visible = !this.visible;\n  }\n\n  /**\n   * Sets focus on the chip.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.el.shadowRoot.querySelector(\"button\")) {\n      this.el.shadowRoot.querySelector(\"button\").focus();\n    }\n  }\n\n  private dismissAction = (): void => {\n    this.dismiss.emit();\n    this.icDismiss.emit();\n  };\n\n  private mouseEnterHandler = (): void => {\n    this.isHovered = true;\n  };\n\n  private mouseLeaveHandler = (): void => {\n    this.isHovered = false;\n  };\n\n  render() {\n    const {\n      label,\n      appearance,\n      variant,\n      size,\n      dismissible,\n      visible,\n      disabled,\n      isHovered,\n    } = this;\n\n    return (\n      visible && (\n        <div\n          class={{\n            [\"chip\"]: true,\n            [`${appearance}`]: appearance !== undefined,\n            [`${variant}`]: true,\n            [`${size}`]: true,\n            [\"disabled\"]: disabled,\n            [\"dismissible\"]: dismissible,\n            [\"hovered\"]: isHovered,\n          }}\n        >\n          {isSlotUsed(this.el, \"icon\") && (\n            <div class=\"icon\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          <ic-typography\n            variant=\"label\"\n            apply-vertical-margins={false}\n            class=\"label\"\n          >\n            <span>{label}</span>\n          </ic-typography>\n          {dismissible && (\n            <ic-tooltip\n              label=\"Dismiss\"\n              target=\"dismiss-icon\"\n              class={{ [\"tooltip-disabled\"]: disabled }}\n            >\n              <button\n                id=\"dismiss-icon\"\n                class={{\n                  [\"dismiss-icon\"]: true,\n                }}\n                aria-label={`Dismiss ${label} chip`}\n                disabled={disabled}\n                tabindex={disabled ? -1 : 0}\n                onClick={this.dismissAction}\n                onMouseEnter={this.mouseEnterHandler}\n                onMouseLeave={this.mouseLeaveHandler}\n                innerHTML={dismissIcon}\n              ></button>\n            </ic-tooltip>\n          )}\n          {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n        </div>\n      )\n    );\n  }\n}\n"]}

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

@@ -1,18 +1,22 @@
 import { Host, h } from "@stencil/core";
+/**
+ * @slot heading - Content will be placed at the top of the data entity.
+ */
 export class DataEntity {
   constructor() {
     this.heading = undefined;
+    this.size = "default";
     this.small = false;
   }
   render() {
-    const { heading, small } = this;
+    const { heading, small, size } = this;
     const children = this.el.children;
-    if (small) {
+    if (small || size === "small") {
       for (let i = 0; i < children.length; i++) {
-        children[i].setAttribute("small", "true");
+        children[i].setAttribute("size", "small");
       }
     }
-    return (h(Host, { class: { ["small"]: small } }, h("div", { class: "heading", id: "data-entity-heading" }, h("slot", { name: "heading" }, h("ic-typography", { variant: "h3" }, heading))), h("div", { class: "divider" }), h("ul", { "aria-labelledby": "data-entity-heading", class: "rows" }, h("slot", null))));
+    return (h(Host, { class: { ["small"]: small || size === "small" } }, h("div", { class: "heading", id: "data-entity-heading" }, h("slot", { name: "heading" }, h("ic-typography", { variant: "h3" }, heading))), h("div", { class: "divider" }), h("ul", { "aria-labelledby": "data-entity-heading", class: "rows" }, h("slot", null))));
   }
   static get is() { return "ic-data-entity"; }
   static get encapsulation() { return "shadow"; }
@@ -45,6 +49,30 @@ export class DataEntity {
         "attribute": "heading",
         "reflect": false
       },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcSizesNoLarge",
+          "resolved": "\"default\" | \"small\"",
+          "references": {
+            "IcSizesNoLarge": {
+              "location": "import",
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::IcSizesNoLarge"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The size of the data entity component."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
       "small": {
         "type": "boolean",
         "mutable": false,
@@ -54,10 +82,13 @@ export class DataEntity {
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
-          "tags": [],
-          "text": "If `true`, the small styling will be applied to the data heading and all child data rows."
+          "tags": [{
+              "name": "deprecated",
+              "text": "This prop should not be used anymore. Set prop `size` to \"small\" instead."
+            }],
+          "text": ""
         },
         "attribute": "small",
         "reflect": false,

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

@@ -1 +1 @@
-{"version":3,"file":"ic-data-entity.js","sourceRoot":"","sources":["../../../src/components/ic-data-entity/ic-data-entity.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOlE,MAAM,OAAO,UAAU;;;iBAWI,KAAK;;EAE9B,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEhC,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC;IAElC,IAAI,KAAK,EAAE;MACT,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACxC,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;OAC3C;KACF;IAED,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE;MAC/B,WAAK,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,qBAAqB;QAC3C,YAAM,IAAI,EAAC,SAAS;UAClB,qBAAe,OAAO,EAAC,IAAI,IAAE,OAAO,CAAiB,CAChD,CACH;MACN,WAAK,KAAK,EAAC,SAAS,GAAG;MACvB,6BAAoB,qBAAqB,EAAC,KAAK,EAAC,MAAM;QACpD,eAAa,CACV,CACA,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop } from \"@stencil/core\";\n\n@Component({\n  tag: \"ic-data-entity\",\n  styleUrl: \"ic-data-entity.css\",\n  shadow: true,\n})\nexport class DataEntity {\n  @Element() el: HTMLIcDataEntityElement;\n\n  /**\n   * The title for the data entity.\n   */\n  @Prop() heading: string;\n\n  /**\n   * If `true`, the small styling will be applied to the data heading and all child data rows.\n   */\n  @Prop() small: boolean = false;\n\n  render() {\n    const { heading, small } = this;\n\n    const children = this.el.children;\n\n    if (small) {\n      for (let i = 0; i < children.length; i++) {\n        children[i].setAttribute(\"small\", \"true\");\n      }\n    }\n\n    return (\n      <Host class={{ [\"small\"]: small }}>\n        <div class=\"heading\" id=\"data-entity-heading\">\n          <slot name=\"heading\">\n            <ic-typography variant=\"h3\">{heading}</ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\" />\n        <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-data-entity.js","sourceRoot":"","sources":["../../../src/components/ic-data-entity/ic-data-entity.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGlE;;GAEG;AAMH,MAAM,OAAO,UAAU;;;gBAWW,SAAS;iBAKf,KAAK;;EAE/B,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IAEtC,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC;IAElC,IAAI,KAAK,IAAI,IAAI,KAAK,OAAO,EAAE;MAC7B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACxC,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;OAC3C;KACF;IAED,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE,KAAK,IAAI,IAAI,KAAK,OAAO,EAAE;MACnD,WAAK,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,qBAAqB;QAC3C,YAAM,IAAI,EAAC,SAAS;UAClB,qBAAe,OAAO,EAAC,IAAI,IAAE,OAAO,CAAiB,CAChD,CACH;MACN,WAAK,KAAK,EAAC,SAAS,GAAG;MACvB,6BAAoB,qBAAqB,EAAC,KAAK,EAAC,MAAM;QACpD,eAAa,CACV,CACA,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop } from \"@stencil/core\";\nimport { IcSizesNoLarge } from \"../../utils/types\";\n\n/**\n * @slot heading - Content will be placed at the top of the data entity.\n */\n@Component({\n  tag: \"ic-data-entity\",\n  styleUrl: \"ic-data-entity.css\",\n  shadow: true,\n})\nexport class DataEntity {\n  @Element() el: HTMLIcDataEntityElement;\n\n  /**\n   * The title for the data entity.\n   */\n  @Prop() heading: string;\n\n  /**\n   * The size of the data entity 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  render() {\n    const { heading, small, size } = this;\n\n    const children = this.el.children;\n\n    if (small || size === \"small\") {\n      for (let i = 0; i < children.length; i++) {\n        children[i].setAttribute(\"size\", \"small\");\n      }\n    }\n\n    return (\n      <Host class={{ [\"small\"]: small || size === \"small\" }}>\n        <div class=\"heading\" id=\"data-entity-heading\">\n          <slot name=\"heading\">\n            <ic-typography variant=\"h3\">{heading}</ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\" />\n        <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -67,9 +67,9 @@ describe("ic-data-entity", () => {
           <slot></slot>
         </ul>
       </mock:shadow-root>
-     <ic-data-row small="true" label="Label" value="value"></ic-data-row>
-     <ic-data-row small="true" label="Label" value="value"></ic-data-row>
-     <ic-data-row small="true" label="Label" value="value"></ic-data-row>
+     <ic-data-row size="small" label="Label" value="value"></ic-data-row>
+     <ic-data-row size="small" label="Label" value="value"></ic-data-row>
+     <ic-data-row size="small" label="Label" value="value"></ic-data-row>
     </ic-data-entity>
     `);
   });

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

@@ -1 +1 @@
-{"version":3,"file":"ic-data-entity.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-data-entity/test/basic/ic-data-entity.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;IACpD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;;;;;;;;;;wBAUY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;KAwB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;IAC7C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;;;;;wBAKY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;KAmB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;IACpD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;;;;;;;;;;;wBAWY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;KAyB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sDAAsD,EAAE,KAAK,IAAI,EAAE;IACpE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;;;;;;;;;;wBAUY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;KAwB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { DataEntity } from \"../../ic-data-entity\";\n\ndescribe(\"ic-data-entity\", () => {\n  it(\"should render with data-row children\", async () => {\n    const page = await newSpecPage({\n      components: [DataEntity],\n      html: `\n      <ic-data-entity heading=\"Heading\">\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n      </ic-data-entity>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-entity heading=\"Heading\">\n      <mock:shadow-root>\n        <div class=\"heading\" id=\"data-entity-heading\">\n          <slot name=\"heading\">  \n            <ic-typography variant=\"h3\">\n              Heading\n            </ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\"></div>\n        <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </mock:shadow-root>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n    </ic-data-entity>\n    `);\n  });\n\n  it(\"should render with small prop\", async () => {\n    const page = await newSpecPage({\n      components: [DataEntity],\n      html: `\n      <ic-data-entity heading=\"Heading\" small>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n      </ic-data-entity>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-entity heading=\"Heading\" class=\"small\" small>\n      <mock:shadow-root>\n        <div class=\"heading\" id=\"data-entity-heading\">\n          <slot name=\"heading\">  \n            <ic-typography variant=\"h3\">\n              Heading\n            </ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\"></div>\n        <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </mock:shadow-root>\n     <ic-data-row small=\"true\" label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row small=\"true\" label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row small=\"true\" label=\"Label\" value=\"value\"></ic-data-row>\n    </ic-data-entity>\n    `);\n  });\n\n  it(\"should render with a slotted heading\", async () => {\n    const page = await newSpecPage({\n      components: [DataEntity],\n      html: `\n      <ic-data-entity>\n        <ic-typography variant=\"h3\" slot=\"heading\">Heading</ic-typography>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n      </ic-data-entity>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-entity>\n      <mock:shadow-root>\n        <div class=\"heading\" id=\"data-entity-heading\">\n          <slot name=\"heading\">  \n            <ic-typography variant=\"h3\"></ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\"></div>\n        <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </mock:shadow-root>\n     <ic-typography slot=\"heading\" variant=\"h3\">\n      Heading\n     </ic-typography>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n    </ic-data-entity>\n    `);\n  });\n\n  it(\"should render data-row children with slotted content\", async () => {\n    const page = await newSpecPage({\n      components: [DataEntity],\n      html: `\n      <ic-data-entity heading=\"Heading\">\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n      </ic-data-entity>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-entity heading=\"Heading\">\n      <mock:shadow-root>\n        <div class=\"heading\" id=\"data-entity-heading\">\n          <slot name=\"heading\">  \n            <ic-typography variant=\"h3\">\n              Heading\n            </ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\"></div>\n        <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </mock:shadow-root>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n    </ic-data-entity>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"ic-data-entity.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-data-entity/test/basic/ic-data-entity.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;IACpD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;;;;;;;;;;wBAUY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;KAwB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;IAC7C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;;;;;wBAKY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;KAmB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;IACpD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;;;;;;;;;;;wBAWY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;KAyB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sDAAsD,EAAE,KAAK,IAAI,EAAE;IACpE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;;;;;;;;;;wBAUY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;KAwB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { DataEntity } from \"../../ic-data-entity\";\n\ndescribe(\"ic-data-entity\", () => {\n  it(\"should render with data-row children\", async () => {\n    const page = await newSpecPage({\n      components: [DataEntity],\n      html: `\n      <ic-data-entity heading=\"Heading\">\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n      </ic-data-entity>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-entity heading=\"Heading\">\n      <mock:shadow-root>\n        <div class=\"heading\" id=\"data-entity-heading\">\n          <slot name=\"heading\">  \n            <ic-typography variant=\"h3\">\n              Heading\n            </ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\"></div>\n        <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </mock:shadow-root>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n    </ic-data-entity>\n    `);\n  });\n\n  it(\"should render with small prop\", async () => {\n    const page = await newSpecPage({\n      components: [DataEntity],\n      html: `\n      <ic-data-entity heading=\"Heading\" small>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n      </ic-data-entity>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-entity heading=\"Heading\" class=\"small\" small>\n      <mock:shadow-root>\n        <div class=\"heading\" id=\"data-entity-heading\">\n          <slot name=\"heading\">  \n            <ic-typography variant=\"h3\">\n              Heading\n            </ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\"></div>\n        <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </mock:shadow-root>\n     <ic-data-row size=\"small\" label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row size=\"small\" label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row size=\"small\" label=\"Label\" value=\"value\"></ic-data-row>\n    </ic-data-entity>\n    `);\n  });\n\n  it(\"should render with a slotted heading\", async () => {\n    const page = await newSpecPage({\n      components: [DataEntity],\n      html: `\n      <ic-data-entity>\n        <ic-typography variant=\"h3\" slot=\"heading\">Heading</ic-typography>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n      </ic-data-entity>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-entity>\n      <mock:shadow-root>\n        <div class=\"heading\" id=\"data-entity-heading\">\n          <slot name=\"heading\">  \n            <ic-typography variant=\"h3\"></ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\"></div>\n        <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </mock:shadow-root>\n     <ic-typography slot=\"heading\" variant=\"h3\">\n      Heading\n     </ic-typography>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n    </ic-data-entity>\n    `);\n  });\n\n  it(\"should render data-row children with slotted content\", async () => {\n    const page = await newSpecPage({\n      components: [DataEntity],\n      html: `\n      <ic-data-entity heading=\"Heading\">\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n      </ic-data-entity>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-entity heading=\"Heading\">\n      <mock:shadow-root>\n        <div class=\"heading\" id=\"data-entity-heading\">\n          <slot name=\"heading\">  \n            <ic-typography variant=\"h3\">\n              Heading\n            </ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\"></div>\n        <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </mock:shadow-root>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n    </ic-data-entity>\n    `);\n  });\n});\n"]}

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

@@ -32,6 +32,7 @@ export class DataRow {
     this.deviceSize = DEVICE_SIZES.XL;
     this.entitySize = undefined;
     this.label = undefined;
+    this.size = "default";
     this.small = false;
     this.value = undefined;
   }
@@ -71,9 +72,9 @@ export class DataRow {
     component.forEach((child) => child.setAttribute("aria-label", "for " + this.label + " row"));
   }
   render() {
-    const { label, value, small } = this;
+    const { label, value, small, size } = this;
     return (h(Host, { class: {
-        ["small"]: small,
+        ["small"]: small || size === "small",
         ["breakpoint-medium"]: this.entitySize === "m",
         ["breakpoint-xs"]: this.entitySize === "xs",
       }, role: "listitem" }, h("div", { class: "data" }, h("div", { class: "text-cells" }, this.renderLabel(label), h("div", { class: "value" }, h("slot", { name: "value" }, h("ic-typography", { variant: "body" }, value)))), this.hasEndComponent && (h("div", { class: "end-component" }, h("div", { role: "cell" }, h("slot", { name: "end-component" }))))), h("div", { class: "divider" })));
@@ -109,6 +110,30 @@ export class DataRow {
         "attribute": "label",
         "reflect": false
       },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcSizesNoLarge",
+          "resolved": "\"default\" | \"small\"",
+          "references": {
+            "IcSizesNoLarge": {
+              "location": "import",
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::IcSizesNoLarge"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The size of the data row component."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
       "small": {
         "type": "boolean",
         "mutable": false,
@@ -118,10 +143,13 @@ export class DataRow {
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
-          "tags": [],
-          "text": "If `true`, the small styling will be applied to the row. This is automatically applied if small is set on the parent data heading."
+          "tags": [{
+              "name": "deprecated",
+              "text": "This prop should not be used anymore. Set prop `size` to \"small\" instead."
+            }],
+          "text": ""
         },
         "attribute": "small",
         "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\";\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   * If `true`, the small styling will be applied to the row. This is automatically applied if small is set on the parent data heading.\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    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\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) {\n      this.labelEndComponent();\n    }\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;\n    if (rowSize) {\n      if (rowSize + 46 < DEVICE_SIZES.S) {\n        this.entitySize = \"xs\";\n      } else if (rowSize + 46 < DEVICE_SIZES.M) {\n        this.entitySize = \"m\";\n      } else {\n        this.entitySize = \"xl\";\n      }\n    }\n  }\n\n  /**\n   * Renders the label either as a ic-typography or slot. Slotted content takes precedence.\n   * @param label string - label of value\n   * @returns HTMLDivElement - returns label as slot or ic-typography with label as textContent\n   */\n  private renderLabel = (label: string) => {\n    if (isSlotUsed(this.el, \"label\")) {\n      return (\n        <div class=\"label\">\n          <slot name=\"label\"></slot>\n        </div>\n      );\n    } else if (label) {\n      return (\n        <div class=\"label\">\n          <ic-typography\n            variant={this.entitySize === \"xs\" ? \"label\" : \"subtitle-large\"}\n          >\n            {label}\n          </ic-typography>\n        </div>\n      );\n    }\n\n    return null;\n  };\n\n  private labelEndComponent(): void {\n    const component = this.el.shadowRoot.querySelectorAll(\n      \"slot[name=end-component]\"\n    );\n\n    component.forEach((child: HTMLElement) =>\n      child.setAttribute(\"aria-label\", \"for \" + this.label + \" row\")\n    );\n  }\n\n  render() {\n    const { label, value, small } = this;\n\n    return (\n      <Host\n        class={{\n          [\"small\"]: small,\n          [\"breakpoint-medium\"]: this.entitySize === \"m\",\n          [\"breakpoint-xs\"]: this.entitySize === \"xs\",\n        }}\n        role=\"listitem\"\n      >\n        <div class=\"data\">\n          <div class=\"text-cells\">\n            {this.renderLabel(label)}\n            <div class=\"value\">\n              <slot name=\"value\">\n                <ic-typography variant=\"body\">{value}</ic-typography>\n              </slot>\n            </div>\n          </div>\n          {this.hasEndComponent && (\n            <div class=\"end-component\">\n              <div role=\"cell\">\n                <slot name=\"end-component\"></slot>\n              </div>\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 } 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    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\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) {\n      this.labelEndComponent();\n    }\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;\n    if (rowSize) {\n      if (rowSize + 46 < DEVICE_SIZES.S) {\n        this.entitySize = \"xs\";\n      } else if (rowSize + 46 < DEVICE_SIZES.M) {\n        this.entitySize = \"m\";\n      } else {\n        this.entitySize = \"xl\";\n      }\n    }\n  }\n\n  /**\n   * Renders the label either as a ic-typography or slot. Slotted content takes precedence.\n   * @param label string - label of value\n   * @returns HTMLDivElement - returns label as slot or ic-typography with label as textContent\n   */\n  private renderLabel = (label: string) => {\n    if (isSlotUsed(this.el, \"label\")) {\n      return (\n        <div class=\"label\">\n          <slot name=\"label\"></slot>\n        </div>\n      );\n    } else if (label) {\n      return (\n        <div class=\"label\">\n          <ic-typography\n            variant={this.entitySize === \"xs\" ? \"label\" : \"subtitle-large\"}\n          >\n            {label}\n          </ic-typography>\n        </div>\n      );\n    }\n\n    return null;\n  };\n\n  private labelEndComponent(): void {\n    const component = this.el.shadowRoot.querySelectorAll(\n      \"slot[name=end-component]\"\n    );\n\n    component.forEach((child: HTMLElement) =>\n      child.setAttribute(\"aria-label\", \"for \" + this.label + \" row\")\n    );\n  }\n\n  render() {\n    const { label, value, small, size } = this;\n\n    return (\n      <Host\n        class={{\n          [\"small\"]: small || size === \"small\",\n          [\"breakpoint-medium\"]: this.entitySize === \"m\",\n          [\"breakpoint-xs\"]: this.entitySize === \"xs\",\n        }}\n        role=\"listitem\"\n      >\n        <div class=\"data\">\n          <div class=\"text-cells\">\n            {this.renderLabel(label)}\n            <div class=\"value\">\n              <slot name=\"value\">\n                <ic-typography variant=\"body\">{value}</ic-typography>\n              </slot>\n            </div>\n          </div>\n          {this.hasEndComponent && (\n            <div class=\"end-component\">\n              <div role=\"cell\">\n                <slot name=\"end-component\"></slot>\n              </div>\n            </div>\n          )}\n        </div>\n        <div class=\"divider\" />\n      </Host>\n    );\n  }\n}\n"]}