@ukic/web-components 2.26.0 → 3.0.0

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

@@ -9,7 +9,6 @@ export class Chip {
     constructor() {
         this.inAGGrid = false;
         this.dismissAction = () => {
-            this.dismiss.emit();
             this.icDismiss.emit();
         };
         this.mouseEnterHandler = () => {
@@ -28,7 +27,6 @@ export class Chip {
         };
         this.hovered = false;
         this.visible = true;
-        this.appearance = undefined;
         this.customColor = null;
         this.disabled = false;
         this.dismissible = false;
@@ -47,9 +45,6 @@ export class Chip {
         if (!this.dismissible) {
             this.setChipColour();
         }
-        if (this.appearance === "outline") {
-            this.variant = "outlined";
-        }
     }
     componentWillRender() {
         if (isElInAGGrid(this.el)) {
@@ -70,10 +65,9 @@ export class Chip {
         (_a = this.el.shadowRoot.querySelector("button")) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        const { label, appearance, variant, size, dismissible, visible, disabled, hovered, } = this;
+        const { label, variant, size, dismissible, visible, disabled, hovered } = this;
         return (visible && (h("div", { class: {
                 chip: true,
-                [`${appearance}`]: appearance !== undefined,
                 [`${variant}`]: true,
                 [`${size}`]: true,
                 disabled,
@@ -97,32 +91,6 @@ export class Chip {
     }
     static get properties() {
         return {
-            "appearance": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "IcChipAppearance",
-                    "resolved": "\"filled\" | \"outline\"",
-                    "references": {
-                        "IcChipAppearance": {
-                            "location": "import",
-                            "path": "./ic-chip.types",
-                            "id": "src/components/ic-chip/ic-chip.types.ts::IcChipAppearance"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This prop should not be used anymore. Use variant prop instead."
-                        }],
-                    "text": ""
-                },
-                "attribute": "appearance",
-                "reflect": false
-            },
             "customColor": {
                 "type": "string",
                 "mutable": false,
@@ -276,24 +244,6 @@ export class Chip {
     }
     static get events() {
         return [{
-                "method": "dismiss",
-                "name": "dismiss",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This event should not be used anymore. Use icDismiss instead."
-                        }],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
                 "method": "icDismiss",
                 "name": "icDismiss",
                 "bubbles": true,

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":"AAAA,OAAO,EACL,SAAS,EACT,CAAC,EACD,IAAI,EACJ,KAAK,EACL,MAAM,EACN,KAAK,EAEL,OAAO,EACP,MAAM,EACN,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,gCAAgC,EAChC,UAAU,EACV,mBAAmB,EACnB,aAAa,EACb,YAAY,GACb,MAAM,qBAAqB,CAAC;AAG7B,OAAO,WAAW,MAAM,+BAA+B,CAAC;AAExD;;;GAGG;AAQH,MAAM,OAAO,IAAI;;QACP,aAAQ,GAAY,KAAK,CAAC;QAuG1B,kBAAa,GAAG,GAAS,EAAE;YACjC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YACpB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QACxB,CAAC,CAAC;QAEM,sBAAiB,GAAG,GAAS,EAAE;YACrC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC,CAAC;QAEM,sBAAiB,GAAG,GAAS,EAAE;YACrC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACvB,CAAC,CAAC;QAEM,kBAAa,GAAG,GAAG,EAAE;YAC3B,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YAClD,IAAI,SAAS,EAAE,CAAC;gBACd,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,CAAC;gBACjC,MAAM,gBAAgB,GACpB,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;gBACtE,IAAI,CAAC,EAAE,CAAC,YAAY,CAClB,OAAO,EACP,6BAA6B,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,6DAA6D,gBAAgB,GAAG,CACjI,CAAC;YACJ,CAAC;QACH,CAAC,CAAC;uBA3H0B,KAAK;uBACL,IAAI;;2BAWA,IAAI;wBAYP,KAAK;2BAKF,KAAK;;oBAUZ,SAAS;qCAKQ,IAAI;uBAKX,QAAQ;;IAlC3C,kBAAkB;QAChB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACtB,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;IACH,CAAC;IA0CD,iBAAiB;QACf,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;QAE5C,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACtB,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;QAED,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,EAAE,CAAC;YAClC,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,mBAAmB;QACjB,IAAI,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,MAAM,CACP,CAAC;IACJ,CAAC;IAGD,WAAW;QACT,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC/B,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,QAAQ;;QACZ,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,0CAAE,KAAK,EAAE,CAAC;IACtD,CAAC;IA4BD,MAAM;QACJ,MAAM,EACJ,KAAK,EACL,UAAU,EACV,OAAO,EACP,IAAI,EACJ,WAAW,EACX,OAAO,EACP,QAAQ,EACR,OAAO,GACR,GAAG,IAAI,CAAC;QAET,OAAO,CACL,OAAO,IAAI,CACT,WACE,KAAK,EAAE;gBACL,IAAI,EAAE,IAAI;gBACV,CAAC,GAAG,UAAU,EAAE,CAAC,EAAE,UAAU,KAAK,SAAS;gBAC3C,CAAC,GAAG,OAAO,EAAE,CAAC,EAAE,IAAI;gBACpB,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,IAAI;gBACjB,QAAQ;gBACR,WAAW;gBACX,OAAO;gBACP,kBAAkB,EAChB,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,CAAC,IAAI,CAAC,qBAAqB;aAC7D;YAEA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,IAAI,CAC9B,WAAK,KAAK,EAAC,MAAM;gBACf,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACP;YACD,qBACE,OAAO,EAAC,OAAO,4BACS,KAAK,EAC7B,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,CAAC,QAAQ,EAAE;gBAEnD,gBAAO,KAAK,CAAQ,CACN;YACf,WAAW,IAAI,CACd,kBACE,KAAK,EAAC,SAAS,EACf,MAAM,EAAC,cAAc,EACrB,KAAK,EAAE,EAAE,kBAAkB,EAAE,QAAQ,EAAE;gBAEvC,cACE,EAAE,EAAC,cAAc,EACjB,KAAK,EAAC,cAAc,gBACR,WAAW,KAAK,OAAO,EACnC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC3B,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,YAAY,EAAE,IAAI,CAAC,iBAAiB,EACpC,YAAY,EAAE,IAAI,CAAC,iBAAiB,EACpC,SAAS,EAAE,WAAW,GACd,CACC,CACd;YACA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,IAAI,YAAM,IAAI,EAAC,OAAO,GAAQ,CACvD,CACP,CACF,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  removeDisabledFalse,\n  convertToRGBA,\n  isElInAGGrid,\n} from \"../../utils/helpers\";\nimport { IcChipAppearance } from \"./ic-chip.types\";\nimport { IcColor, 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  private inAGGrid: boolean = false;\n\n  @Element() el: HTMLIcChipElement;\n\n  @State() hovered: 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   * The custom chip colour. This prop will be applied to the chip component if `dismissible` is set to `false`.\n   * Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n   */\n  @Prop() customColor?: IcColor = null;\n\n  @Watch(\"customColor\")\n  customColorHandler(): void {\n    if (!this.dismissible) {\n      this.setChipColour();\n    }\n  }\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   * If `true`, the outlined variant of chip will have a transparent background rather than white.\n   */\n  @Prop() transparentBackground?: boolean = true;\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.dismissible) {\n      this.setChipColour();\n    }\n\n    if (this.appearance === \"outline\") {\n      this.variant = \"outlined\";\n    }\n  }\n\n  componentWillRender(): void {\n    if (isElInAGGrid(this.el)) {\n      this.inAGGrid = true;\n    }\n  }\n\n  componentDidLoad(): void {\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    this.el.shadowRoot.querySelector(\"button\")?.focus();\n  }\n\n  private dismissAction = (): void => {\n    this.dismiss.emit();\n    this.icDismiss.emit();\n  };\n\n  private mouseEnterHandler = (): void => {\n    this.hovered = true;\n  };\n\n  private mouseLeaveHandler = (): void => {\n    this.hovered = false;\n  };\n\n  private setChipColour = () => {\n    const colorRGBA = convertToRGBA(this.customColor);\n    if (colorRGBA) {\n      const { r, g, b, a } = colorRGBA;\n      const foregroundColour =\n        (r * 299 + g * 587 + b * 114) / 1000 > 133.3505 ? \"black\" : \"white\";\n      this.el.setAttribute(\n        \"style\",\n        `--chip-custom-color: rgba(${r}, ${g}, ${b}, ${a}); --chip-custom-foreground-color: var(--ic-architectural-${foregroundColour})`\n      );\n    }\n  };\n\n  render() {\n    const {\n      label,\n      appearance,\n      variant,\n      size,\n      dismissible,\n      visible,\n      disabled,\n      hovered,\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,\n            dismissible,\n            hovered,\n            \"white-background\":\n              this.variant === \"outlined\" && !this.transparentBackground,\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: true, \"in-ag-grid\": this.inAGGrid }}\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=\"dismiss-icon\"\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"]}
+{"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  Watch,\n} from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  removeDisabledFalse,\n  convertToRGBA,\n  isElInAGGrid,\n} from \"../../utils/helpers\";\nimport { IcColor, 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  private inAGGrid: boolean = false;\n\n  @Element() el: HTMLIcChipElement;\n\n  @State() hovered: boolean = false;\n  @State() visible: boolean = true;\n\n  /**\n   * The custom chip colour. This prop will be applied to the chip component if `dismissible` is set to `false`.\n   * Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n   */\n  @Prop() customColor?: IcColor = null;\n\n  @Watch(\"customColor\")\n  customColorHandler(): void {\n    if (!this.dismissible) {\n      this.setChipColour();\n    }\n  }\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   * If `true`, the outlined variant of chip will have a transparent background rather than white.\n   */\n  @Prop() transparentBackground?: boolean = true;\n\n  /**\n   * The emphasis of the chip.\n   */\n  @Prop() variant?: IcEmphasisType = \"filled\";\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.dismissible) {\n      this.setChipColour();\n    }\n  }\n\n  componentWillRender(): void {\n    if (isElInAGGrid(this.el)) {\n      this.inAGGrid = true;\n    }\n  }\n\n  componentDidLoad(): void {\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    this.el.shadowRoot.querySelector(\"button\")?.focus();\n  }\n\n  private dismissAction = (): void => {\n    this.icDismiss.emit();\n  };\n\n  private mouseEnterHandler = (): void => {\n    this.hovered = true;\n  };\n\n  private mouseLeaveHandler = (): void => {\n    this.hovered = false;\n  };\n\n  private setChipColour = () => {\n    const colorRGBA = convertToRGBA(this.customColor);\n    if (colorRGBA) {\n      const { r, g, b, a } = colorRGBA;\n      const foregroundColour =\n        (r * 299 + g * 587 + b * 114) / 1000 > 133.3505 ? \"black\" : \"white\";\n      this.el.setAttribute(\n        \"style\",\n        `--chip-custom-color: rgba(${r}, ${g}, ${b}, ${a}); --chip-custom-foreground-color: var(--ic-architectural-${foregroundColour})`\n      );\n    }\n  };\n\n  render() {\n    const { label, variant, size, dismissible, visible, disabled, hovered } =\n      this;\n\n    return (\n      visible && (\n        <div\n          class={{\n            chip: true,\n            [`${variant}`]: true,\n            [`${size}`]: true,\n            disabled,\n            dismissible,\n            hovered,\n            \"white-background\":\n              this.variant === \"outlined\" && !this.transparentBackground,\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: true, \"in-ag-grid\": this.inAGGrid }}\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=\"dismiss-icon\"\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-classification-banner/ic-classification-banner.css

@@ -454,7 +454,7 @@ video {
   z-index: var(--ic-z-index-classification-banner);
 }
 
-:host(.inline) {
+:host(.ic-classification-banner-inline) {
   position: static;
   left: auto;
   bottom: auto;

package/dist/collection/components/ic-classification-banner/ic-classification-banner.js

@@ -25,7 +25,7 @@ export class ClassificationBanner {
         if (!classification ||
             (classification && !classificationText[classification]))
             classification = "default";
-        return (h(Host, { class: { ["inline"]: inline } }, h("banner", { "aria-label": "Protective marking", class: {
+        return (h(Host, { class: { ["ic-classification-banner-inline"]: inline } }, h("banner", { "aria-label": "Protective marking", class: {
                 ["classification-banner"]: true,
                 [`${classification}`]: classification,
             } }, classification !== "default" ? (h("span", { class: "offscreen" }, "The protective marking of this page is:", " ")) : null, h("ic-typography", { variant: "caption-uppercase" }, classification === "default"

package/dist/collection/components/ic-classification-banner/ic-classification-banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-classification-banner.js","sourceRoot":"","sources":["../../../src/components/ic-classification-banner/ic-classification-banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD,MAAM,kBAAkB,GAAG;IACzB,OAAO,EAAE,4BAA4B;IACrC,QAAQ,EAAE,UAAU;IACpB,oBAAoB,EAAE,oBAAoB;IAC1C,MAAM,EAAE,QAAQ;IAChB,YAAY,EAAE,YAAY;CAC3B,CAAC;AAOF,MAAM,OAAO,oBAAoB;;mCAIQ,EAAE;8BAIO,SAAS;uBAI9B,IAAI;sBAIJ,KAAK;oBAIP,KAAK;;IAE9B,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QAE9B,qDAAqD;QACrD,IAAI,EAAE,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;QAC5D,IAAI,CAAC,OAAO;YAAE,OAAO,GAAG,EAAE,CAAC;QAC3B,IAAI,CAAC,mBAAmB;YAAE,mBAAmB,GAAG,EAAE,CAAC;QACnD,IACE,CAAC,cAAc;YACf,CAAC,cAAc,IAAI,CAAC,kBAAkB,CAAC,cAAc,CAAC,CAAC;YAEvD,cAAc,GAAG,SAAS,CAAC;QAE7B,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE;YACjC,4BACa,oBAAoB,EAC/B,KAAK,EAAE;oBACL,CAAC,uBAAuB,CAAC,EAAE,IAAI;oBAC/B,CAAC,GAAG,cAAc,EAAE,CAAC,EAAE,cAAc;iBACtC;gBAEA,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,CAC9B,YAAM,KAAK,EAAC,WAAW;;oBACmB,GAAG,CACtC,CACR,CAAC,CAAC,CAAC,IAAI;gBACR,qBAAe,OAAO,EAAC,mBAAmB,IACvC,cAAc,KAAK,SAAS;oBAC3B,CAAC,CAAC,kBAAkB,CAAC,cAAc,CAAC;oBACpC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;iBACrB,OAAO;iBACP,kBAAkB,CAAC,cAAc,CAAC;iBAClC,mBAAmB,EAAE,CACZ,CACT,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from \"@stencil/core\";\nimport { IcProtectiveMarkings } from \"./ic-classification-banner.types\";\n\nconst classificationText = {\n  default: \"protective marking not set\",\n  official: \"official\",\n  \"official-sensitive\": \"official sensitive\",\n  secret: \"secret\",\n  \"top-secret\": \"top secret\",\n};\n\n@Component({\n  tag: \"ic-classification-banner\",\n  styleUrl: \"ic-classification-banner.css\",\n  shadow: true,\n})\nexport class ClassificationBanner {\n  /**\n   * The additional information that will be displayed after the classification.\n   */\n  @Prop() additionalSelectors?: string = \"\";\n  /**\n   * The classification level to be displayed - also determines the banner and text colour.\n   */\n  @Prop() classification?: IcProtectiveMarkings = \"default\";\n  /**\n   * The optional text that will be displayed before classification to specify relevant country/countries.\n   */\n  @Prop() country?: string = \"uk\";\n  /**\n   * If `true`, the banner will appear inline with the page, instead of sticking to the bottom of the page.\n   */\n  @Prop() inline?: boolean = false;\n  /**\n   * If `true`, \"Up to\" will be displayed before the classification and country.\n   */\n  @Prop() upTo?: boolean = false;\n\n  render() {\n    const { inline, upTo } = this;\n\n    // In case of unrecognized props, fallback to default\n    let { country, additionalSelectors, classification } = this;\n    if (!country) country = \"\";\n    if (!additionalSelectors) additionalSelectors = \"\";\n    if (\n      !classification ||\n      (classification && !classificationText[classification])\n    )\n      classification = \"default\";\n\n    return (\n      <Host class={{ [\"inline\"]: inline }}>\n        <banner\n          aria-label=\"Protective marking\"\n          class={{\n            [\"classification-banner\"]: true,\n            [`${classification}`]: classification,\n          }}\n        >\n          {classification !== \"default\" ? (\n            <span class=\"offscreen\">\n              The protective marking of this page is:{\" \"}\n            </span>\n          ) : null}\n          <ic-typography variant=\"caption-uppercase\">\n            {classification === \"default\"\n              ? classificationText[classification]\n              : `${upTo ? \"up to\" : \"\"} \n               ${country} \n               ${classificationText[classification]} \n               ${additionalSelectors}`}\n          </ic-typography>\n        </banner>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-classification-banner.js","sourceRoot":"","sources":["../../../src/components/ic-classification-banner/ic-classification-banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD,MAAM,kBAAkB,GAAG;IACzB,OAAO,EAAE,4BAA4B;IACrC,QAAQ,EAAE,UAAU;IACpB,oBAAoB,EAAE,oBAAoB;IAC1C,MAAM,EAAE,QAAQ;IAChB,YAAY,EAAE,YAAY;CAC3B,CAAC;AAOF,MAAM,OAAO,oBAAoB;;mCAIQ,EAAE;8BAIO,SAAS;uBAI9B,IAAI;sBAIJ,KAAK;oBAIP,KAAK;;IAE9B,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QAE9B,qDAAqD;QACrD,IAAI,EAAE,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;QAC5D,IAAI,CAAC,OAAO;YAAE,OAAO,GAAG,EAAE,CAAC;QAC3B,IAAI,CAAC,mBAAmB;YAAE,mBAAmB,GAAG,EAAE,CAAC;QACnD,IACE,CAAC,cAAc;YACf,CAAC,cAAc,IAAI,CAAC,kBAAkB,CAAC,cAAc,CAAC,CAAC;YAEvD,cAAc,GAAG,SAAS,CAAC;QAE7B,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,CAAC,iCAAiC,CAAC,EAAE,MAAM,EAAE;YAC1D,4BACa,oBAAoB,EAC/B,KAAK,EAAE;oBACL,CAAC,uBAAuB,CAAC,EAAE,IAAI;oBAC/B,CAAC,GAAG,cAAc,EAAE,CAAC,EAAE,cAAc;iBACtC;gBAEA,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,CAC9B,YAAM,KAAK,EAAC,WAAW;;oBACmB,GAAG,CACtC,CACR,CAAC,CAAC,CAAC,IAAI;gBACR,qBAAe,OAAO,EAAC,mBAAmB,IACvC,cAAc,KAAK,SAAS;oBAC3B,CAAC,CAAC,kBAAkB,CAAC,cAAc,CAAC;oBACpC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;iBACrB,OAAO;iBACP,kBAAkB,CAAC,cAAc,CAAC;iBAClC,mBAAmB,EAAE,CACZ,CACT,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from \"@stencil/core\";\nimport { IcProtectiveMarkings } from \"./ic-classification-banner.types\";\n\nconst classificationText = {\n  default: \"protective marking not set\",\n  official: \"official\",\n  \"official-sensitive\": \"official sensitive\",\n  secret: \"secret\",\n  \"top-secret\": \"top secret\",\n};\n\n@Component({\n  tag: \"ic-classification-banner\",\n  styleUrl: \"ic-classification-banner.css\",\n  shadow: true,\n})\nexport class ClassificationBanner {\n  /**\n   * The additional information that will be displayed after the classification.\n   */\n  @Prop() additionalSelectors?: string = \"\";\n  /**\n   * The classification level to be displayed - also determines the banner and text colour.\n   */\n  @Prop() classification?: IcProtectiveMarkings = \"default\";\n  /**\n   * The optional text that will be displayed before classification to specify relevant country/countries.\n   */\n  @Prop() country?: string = \"uk\";\n  /**\n   * If `true`, the banner will appear inline with the page, instead of sticking to the bottom of the page.\n   */\n  @Prop() inline?: boolean = false;\n  /**\n   * If `true`, \"Up to\" will be displayed before the classification and country.\n   */\n  @Prop() upTo?: boolean = false;\n\n  render() {\n    const { inline, upTo } = this;\n\n    // In case of unrecognized props, fallback to default\n    let { country, additionalSelectors, classification } = this;\n    if (!country) country = \"\";\n    if (!additionalSelectors) additionalSelectors = \"\";\n    if (\n      !classification ||\n      (classification && !classificationText[classification])\n    )\n      classification = \"default\";\n\n    return (\n      <Host class={{ [\"ic-classification-banner-inline\"]: inline }}>\n        <banner\n          aria-label=\"Protective marking\"\n          class={{\n            [\"classification-banner\"]: true,\n            [`${classification}`]: classification,\n          }}\n        >\n          {classification !== \"default\" ? (\n            <span class=\"offscreen\">\n              The protective marking of this page is:{\" \"}\n            </span>\n          ) : null}\n          <ic-typography variant=\"caption-uppercase\">\n            {classification === \"default\"\n              ? classificationText[classification]\n              : `${upTo ? \"up to\" : \"\"} \n               ${country} \n               ${classificationText[classification]} \n               ${additionalSelectors}`}\n          </ic-typography>\n        </banner>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/{ic-data-entity/ic-data-entity.css → ic-data-list/ic-data-list.css}

@@ -451,7 +451,7 @@ video {
   gap: var(--ic-space-md);
 }
 
-:host(.small) .rows {
+:host(.ic-data-list-small) .rows {
   gap: var(--ic-space-xs);
 }
 
@@ -462,7 +462,7 @@ video {
   background-color: var(--ic-architectural-300);
 }
 
-:host(.small) .divider {
+:host(.ic-data-list-small) .divider {
   margin-top: var(--ic-space-sm);
   margin-bottom: var(--ic-space-xs);
 }

package/dist/collection/components/{ic-data-entity/ic-data-entity.js → ic-data-list/ic-data-list.js}

@@ -1,30 +1,29 @@
 import { Host, h } from "@stencil/core";
 /**
- * @slot heading - Content will be placed at the top of the data entity.
+ * @slot heading - Content will be placed at the top of the data list.
  */
-export class DataEntity {
+export class DataList {
     constructor() {
         this.heading = undefined;
         this.size = "default";
-        this.small = false;
     }
     render() {
-        const { el, heading, small, size } = this;
-        if (small || size === "small") {
+        const { el, heading, size } = this;
+        if (size === "small") {
             Array.from(el.children).forEach((child) => child.setAttribute("size", "small"));
         }
-        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))));
+        return (h(Host, { class: { "ic-data-list-small": size === "small" } }, h("div", { class: "heading", id: "data-list-heading" }, h("slot", { name: "heading" }, h("ic-typography", { variant: "h3" }, heading))), h("div", { class: "divider" }), h("ul", { "aria-labelledby": "data-list-heading", class: "rows" }, h("slot", null))));
     }
-    static get is() { return "ic-data-entity"; }
+    static get is() { return "ic-data-list"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["ic-data-entity.css"]
+            "$": ["ic-data-list.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["ic-data-entity.css"]
+            "$": ["ic-data-list.css"]
         };
     }
     static get properties() {
@@ -41,7 +40,7 @@ export class DataEntity {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The title for the data entity."
+                    "text": "The title for the data list."
                 },
                 "attribute": "heading",
                 "reflect": false
@@ -64,35 +63,14 @@ export class DataEntity {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The size of the data entity component."
+                    "text": "The size of the data list component."
                 },
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "\"default\""
-            },
-            "small": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This prop should not be used anymore. Set prop `size` to \"small\" instead."
-                        }],
-                    "text": ""
-                },
-                "attribute": "small",
-                "reflect": false,
-                "defaultValue": "false"
             }
         };
     }
     static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=ic-data-entity.js.map
+//# sourceMappingURL=ic-data-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-data-list.js","sourceRoot":"","sources":["../../../src/components/ic-data-list/ic-data-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGlE;;GAEG;AAMH,MAAM,OAAO,QAAQ;;;oBAWa,SAAS;;IAEzC,MAAM;QACJ,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QAEnC,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;YACrB,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CACxC,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CACpC,CAAC;QACJ,CAAC;QAED,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,oBAAoB,EAAE,IAAI,KAAK,OAAO,EAAE;YACrD,WAAK,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,mBAAmB;gBACzC,YAAM,IAAI,EAAC,SAAS;oBAClB,qBAAe,OAAO,EAAC,IAAI,IAAE,OAAO,CAAiB,CAChD,CACH;YACN,WAAK,KAAK,EAAC,SAAS,GAAG;YACvB,6BAAoB,mBAAmB,EAAC,KAAK,EAAC,MAAM;gBAClD,eAAa,CACV,CACA,CACR,CAAC;IACJ,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 list.\n */\n@Component({\n  tag: \"ic-data-list\",\n  styleUrl: \"ic-data-list.css\",\n  shadow: true,\n})\nexport class DataList {\n  @Element() el: HTMLIcDataListElement;\n\n  /**\n   * The title for the data list.\n   */\n  @Prop() heading: string;\n\n  /**\n   * The size of the data list component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"default\";\n\n  render() {\n    const { el, heading, size } = this;\n\n    if (size === \"small\") {\n      Array.from(el.children).forEach((child) =>\n        child.setAttribute(\"size\", \"small\")\n      );\n    }\n\n    return (\n      <Host class={{ \"ic-data-list-small\": size === \"small\" }}>\n        <div class=\"heading\" id=\"data-list-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-list-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 → ic-data-list/test/basic/ic-data-list.spec.js}

@@ -1,11 +1,11 @@
 import { newSpecPage } from "@stencil/core/testing";
-import { DataEntity } from "../../ic-data-entity";
-describe("ic-data-entity", () => {
+import { DataList } from "../../ic-data-list";
+describe("ic-data-list", () => {
     it("should render with data-row children", async () => {
         const page = await newSpecPage({
-            components: [DataEntity],
+            components: [DataList],
             html: `
-      <ic-data-entity heading="Heading">
+      <ic-data-list heading="Heading">
         <ic-data-row label="Label" value="value"></ic-data-row>
         <ic-data-row label="Label" value="value"></ic-data-row>
         <ic-data-row label="Label" value="value"></ic-data-row>
@@ -14,12 +14,12 @@ describe("ic-data-entity", () => {
         <ic-data-row label="Label" value="value"></ic-data-row>
         <ic-data-row label="Label" value="value"></ic-data-row>
         <ic-data-row label="Label" value="value"></ic-data-row>
-      </ic-data-entity>`,
+      </ic-data-list>`,
         });
         expect(page.root).toEqualHtml(`
-    <ic-data-entity heading="Heading">
+    <ic-data-list heading="Heading">
       <mock:shadow-root>
-        <div class="heading" id="data-entity-heading">
+        <div class="heading" id="data-list-heading">
           <slot name="heading">  
             <ic-typography variant="h3">
               Heading
@@ -27,7 +27,7 @@ describe("ic-data-entity", () => {
           </slot>
         </div>
         <div class="divider"></div>
-        <ul aria-labelledby="data-entity-heading" class="rows">
+        <ul aria-labelledby="data-list-heading" class="rows">
           <slot></slot>
         </ul>
       </mock:shadow-root>
@@ -39,23 +39,23 @@ describe("ic-data-entity", () => {
      <ic-data-row label="Label" value="value"></ic-data-row>
      <ic-data-row label="Label" value="value"></ic-data-row>
      <ic-data-row label="Label" value="value"></ic-data-row>
-    </ic-data-entity>
+    </ic-data-list>
     `);
     });
-    it("should render with small prop", async () => {
+    it("should render with size small", async () => {
         const page = await newSpecPage({
-            components: [DataEntity],
+            components: [DataList],
             html: `
-      <ic-data-entity heading="Heading" small>
+      <ic-data-list heading="Heading" size="small">
         <ic-data-row label="Label" value="value"></ic-data-row>
         <ic-data-row label="Label" value="value"></ic-data-row>
         <ic-data-row label="Label" value="value"></ic-data-row>
-      </ic-data-entity>`,
+      </ic-data-list>`,
         });
         expect(page.root).toEqualHtml(`
-    <ic-data-entity heading="Heading" class="small" small>
+    <ic-data-list heading="Heading" class="ic-data-list-small" size="small">
       <mock:shadow-root>
-        <div class="heading" id="data-entity-heading">
+        <div class="heading" id="data-list-heading">
           <slot name="heading">  
             <ic-typography variant="h3">
               Heading
@@ -63,21 +63,21 @@ describe("ic-data-entity", () => {
           </slot>
         </div>
         <div class="divider"></div>
-        <ul aria-labelledby="data-entity-heading" class="rows">
+        <ul aria-labelledby="data-list-heading" class="rows">
           <slot></slot>
         </ul>
       </mock:shadow-root>
      <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>
+    </ic-data-list>
     `);
     });
     it("should render with a slotted heading", async () => {
         const page = await newSpecPage({
-            components: [DataEntity],
+            components: [DataList],
             html: `
-      <ic-data-entity>
+      <ic-data-list>
         <ic-typography variant="h3" slot="heading">Heading</ic-typography>
         <ic-data-row label="Label" value="value"></ic-data-row>
         <ic-data-row label="Label" value="value"></ic-data-row>
@@ -87,18 +87,18 @@ describe("ic-data-entity", () => {
         <ic-data-row label="Label" value="value"></ic-data-row>
         <ic-data-row label="Label" value="value"></ic-data-row>
         <ic-data-row label="Label" value="value"></ic-data-row>
-      </ic-data-entity>`,
+      </ic-data-list>`,
         });
         expect(page.root).toEqualHtml(`
-    <ic-data-entity>
+    <ic-data-list>
       <mock:shadow-root>
-        <div class="heading" id="data-entity-heading">
+        <div class="heading" id="data-list-heading">
           <slot name="heading">  
             <ic-typography variant="h3"></ic-typography>
           </slot>
         </div>
         <div class="divider"></div>
-        <ul aria-labelledby="data-entity-heading" class="rows">
+        <ul aria-labelledby="data-list-heading" class="rows">
           <slot></slot>
         </ul>
       </mock:shadow-root>
@@ -113,14 +113,14 @@ describe("ic-data-entity", () => {
      <ic-data-row label="Label" value="value"></ic-data-row>
      <ic-data-row label="Label" value="value"></ic-data-row>
      <ic-data-row label="Label" value="value"></ic-data-row>
-    </ic-data-entity>
+    </ic-data-list>
     `);
     });
     it("should render data-row children with slotted content", async () => {
         const page = await newSpecPage({
-            components: [DataEntity],
+            components: [DataList],
             html: `
-      <ic-data-entity heading="Heading">
+      <ic-data-list heading="Heading">
         <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
         <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
         <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
@@ -129,12 +129,12 @@ describe("ic-data-entity", () => {
         <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
         <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
         <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
-      </ic-data-entity>`,
+      </ic-data-list>`,
         });
         expect(page.root).toEqualHtml(`
-    <ic-data-entity heading="Heading">
+    <ic-data-list heading="Heading">
       <mock:shadow-root>
-        <div class="heading" id="data-entity-heading">
+        <div class="heading" id="data-list-heading">
           <slot name="heading">  
             <ic-typography variant="h3">
               Heading
@@ -142,7 +142,7 @@ describe("ic-data-entity", () => {
           </slot>
         </div>
         <div class="divider"></div>
-        <ul aria-labelledby="data-entity-heading" class="rows">
+        <ul aria-labelledby="data-list-heading" class="rows">
           <slot></slot>
         </ul>
       </mock:shadow-root>
@@ -154,8 +154,8 @@ describe("ic-data-entity", () => {
      <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
      <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
      <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
-    </ic-data-entity>
+    </ic-data-list>
     `);
     });
 });
-//# sourceMappingURL=ic-data-entity.spec.js.map
+//# sourceMappingURL=ic-data-list.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-data-list.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-data-list/test/basic/ic-data-list.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC5B,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE;;;;;;;;;;sBAUU;SACjB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;KAwB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;QAC7C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE;;;;;sBAKU;SACjB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;KAmB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE;;;;;;;;;;;sBAWU;SACjB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;KAyB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sDAAsD,EAAE,KAAK,IAAI,EAAE;QACpE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE;;;;;;;;;;sBAUU;SACjB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;KAwB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { DataList } from \"../../ic-data-list\";\n\ndescribe(\"ic-data-list\", () => {\n  it(\"should render with data-row children\", async () => {\n    const page = await newSpecPage({\n      components: [DataList],\n      html: `\n      <ic-data-list 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-list>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-list heading=\"Heading\">\n      <mock:shadow-root>\n        <div class=\"heading\" id=\"data-list-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-list-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-list>\n    `);\n  });\n\n  it(\"should render with size small\", async () => {\n    const page = await newSpecPage({\n      components: [DataList],\n      html: `\n      <ic-data-list heading=\"Heading\" size=\"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-list>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-list heading=\"Heading\" class=\"ic-data-list-small\" size=\"small\">\n      <mock:shadow-root>\n        <div class=\"heading\" id=\"data-list-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-list-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-list>\n    `);\n  });\n\n  it(\"should render with a slotted heading\", async () => {\n    const page = await newSpecPage({\n      components: [DataList],\n      html: `\n      <ic-data-list>\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-list>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-list>\n      <mock:shadow-root>\n        <div class=\"heading\" id=\"data-list-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-list-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-list>\n    `);\n  });\n\n  it(\"should render data-row children with slotted content\", async () => {\n    const page = await newSpecPage({\n      components: [DataList],\n      html: `\n      <ic-data-list 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-list>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-list heading=\"Heading\">\n      <mock:shadow-root>\n        <div class=\"heading\" id=\"data-list-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-list-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-list>\n    `);\n  });\n});\n"]}

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

@@ -492,7 +492,7 @@ slot[name="value"]::slotted(ic-text-field[readonly][hide-label][rows]) {
   background-color: var(--ic-architectural-300);
 }
 
-:host(.small) .divider {
+:host(.ic-data-row-small) .divider {
   margin-top: var(--ic-space-xs);
 }
 

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

@@ -19,15 +19,14 @@ 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.value = undefined;
     }
     disconnectedCallback() {
@@ -48,7 +47,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 +57,11 @@ 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, 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",
             }, 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"; }
@@ -120,27 +119,6 @@ export class DataRow {
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
-            "small": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This prop should not be used anymore. Set prop `size` to \"small\" instead."
-                        }],
-                    "text": ""
-                },
-                "attribute": "small",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "value": {
                 "type": "string",
                 "mutable": false,
@@ -163,7 +141,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":"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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() 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 = \"default\";\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      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        }}\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"]}