@ukic/web-components 3.8.0 → 3.10.0

package/dist/collection/components/ic-layout-grid/ic-layout-grid.stories.js

@@ -0,0 +1,429 @@
+import { html } from "lit-html";
+
+export default {
+  title: "Web Components/Layout grid",
+  component: "ic-layout-grid",
+};
+
+export const Default = {
+  render: () => html`
+    <ic-layout-grid>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 1
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 2
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 3
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 4
+      </div>
+    </ic-layout-grid>
+  `,
+
+  name: "Default",
+
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const Fluid = {
+  render: () => html`
+    <ic-layout-grid type="fluid">
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 1
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 2
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 3
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 4
+      </div>
+    </ic-layout-grid>
+  `,
+
+  name: "Fluid",
+
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const Columns = {
+  render: () => html`
+    <ic-layout-grid columns="4">
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 1
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 2
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 3
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 4
+      </div>
+    </ic-layout-grid>
+  `,
+
+  name: "Columns",
+
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const Rows = {
+  render: () => html`
+    <ic-layout-grid columns="3" rows="2">
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 1
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 2
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 3
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 4
+      </div>
+    </ic-layout-grid>
+  `,
+
+  name: "Rows",
+
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const AlignedCenter = {
+  render: () => html`
+    <ic-layout-grid columns="4" aligned="center">
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 1
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 2
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 3
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 4
+      </div>
+    </ic-layout-grid>
+  `,
+
+  name: "Aligned center",
+
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const FullWidth = {
+  render: () => html`
+    <ic-layout-grid columns="4" aligned="full-width">
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 1
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 2
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 3
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 4
+      </div>
+    </ic-layout-grid>
+  `,
+
+  name: "Aligned full width",
+
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const FullHeight = {
+  render: () => html`
+    <ic-layout-grid full-height="true" columns="4">
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 1
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 2
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 3
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 4
+      </div>
+    </ic-layout-grid>
+  `,
+
+  name: "Full height",
+
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const ColumnObject = {
+  render: () => html`
+    <ic-layout-grid>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 1
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 2
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 3
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 4
+      </div>
+    </ic-layout-grid>
+    <script>
+      const grid = document.querySelector("ic-layout-grid");
+      grid.columns = { xs: 1, sm: 2, md: 4, lg: 8, xl: 12 };
+    </script>
+  `,
+
+  name: "Column object",
+
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const DefaultColWidth = {
+  render: () => html`
+    <ic-layout-grid columns="4" default-col-width="150px">
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 1
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 2
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 3
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 4
+      </div>
+    </ic-layout-grid>
+  `,
+
+  name: "Default col width",
+
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const DefaultColSpan = {
+  render: () => html`
+    <ic-layout-grid default-col-span="2">
+      <div style="width: 100px; height: 50px; background-color: lightblue;">
+        Grid item 1
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 2
+      </div>
+      <div style="width: 80px; height: 50px; background-color: lightblue;">
+        Grid item 3
+      </div>
+      <div style="width: 80px; height: 50px; background-color: lightblue;">
+        Grid item 4
+      </div>
+    </ic-layout-grid>
+  `,
+
+  name: "Default col span",
+
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const DefaultColSpanObject = {
+  render: () => html`
+    <ic-layout-grid default-col-span="2">
+      <div style="width: 100px; height: 50px; background-color: lightblue;">
+        Grid item 1
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 2
+      </div>
+      <div style="width: 80px; height: 50px; background-color: lightblue;">
+        Grid item 3
+      </div>
+      <div style="width: 80px; height: 50px; background-color: lightblue;">
+        Grid item 4
+      </div>
+    </ic-layout-grid>
+    <script>
+      const grid = document.querySelector("ic-layout-grid");
+      grid.defaultColSpan = { xs: 1, sm: 2, md: 2, lg: 4, xl: 4 };
+    </script>
+  `,
+
+  name: "Default col span object",
+
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const DefaultRowSpan = {
+  render: () => html`
+    <ic-layout-grid default-row-span="2" rows="2">
+      <div style="width: 50px; height: 100px; background-color: lightblue;">
+        Grid item 1
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 2
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 3
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 4
+      </div>
+    </ic-layout-grid>
+  `,
+
+  name: "Default row span",
+
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const GridItem = {
+  render: () => html`
+    <ic-layout-grid columns="4">
+      <ic-layout-grid-item
+        col-start="2"
+        col-span="2"
+        row-start="1"
+        row-span="2"
+      >
+        <div style="width: 50px; height: 50px; background-color: lightblue;">
+          Grid item 1
+        </div>
+      </ic-layout-grid-item>
+      <ic-layout-grid-item hide-in-mobile-mode="true">
+        <div style="width: 50px; height: 50px; background-color: lightblue;">
+          Grid item 2
+        </div>
+      </ic-layout-grid-item>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 3
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 4
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 5
+      </div>
+    </ic-layout-grid>
+  `,
+
+  name: "Grid item",
+
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+const defaultArgs = {
+  aligned: null,
+  fullHeight: false,
+  columns: 4,
+  defaultColSpan: 1,
+  defaultColWidth: "64px",
+  defaultRowSpan: 1,
+  gridSpacing: 2,
+  rows: 1,
+  type: "fixed",
+  gridItemColSpan: 1,
+  gridItemColStart: 1,
+  gridItemRowSpan: 1,
+  gridItemRowStart: 1,
+  gridItemHideInMobileMode: false,
+};
+
+export const Playground = {
+  render: (args) =>
+    html`<ic-layout-grid
+      style="border: 1px solid black;"
+      columns=${args.columns}
+      aligned=${args.aligned}
+      full-height=${args.fullHeight}
+      default-col-span=${args.defaultColSpan}
+      default-col-width=${args.defaultColWidth}
+      default-row-span=${args.defaultRowSpan}
+      grid-spacing=${args.gridSpacing}
+      rows=${args.rows}
+      type=${args.type}
+    >
+      <ic-layout-grid-item
+        col-span=${args.gridItemColSpan}
+        col-start=${args.gridItemColStart}
+        row-span=${args.gridItemRowSpan}
+        row-start=${args.gridItemRowStart}
+        hide-in-mobile-mode=${args.gridItemHideInMobileMode}
+      >
+        <div style="width: 50px; height: 50px; background-color: lightblue;">
+          Grid item 1
+        </div>
+      </ic-layout-grid-item>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 2
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 3
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 4
+      </div>
+      <div style="width: 50px; height: 50px; background-color: lightblue;">
+        Grid item 5
+      </div>
+    </ic-layout-grid>`,
+
+  name: "Playground",
+  args: defaultArgs,
+
+  argTypes: {
+    aligned: {
+      options: [null, "left", "center", "full-width"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
+
+    type: {
+      options: ["fixed", "fluid"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
+  },
+};

package/dist/collection/components/ic-layout-grid/ic-layout-grid.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ic-layout-grid.types.js.map

package/dist/collection/components/ic-layout-grid/ic-layout-grid.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-layout-grid.types.js","sourceRoot":"","sources":["../../../src/components/ic-layout-grid/ic-layout-grid.types.ts"],"names":[],"mappings":"","sourcesContent":["export type IcGridBreakpoints =\n  | number\n  | {\n      xs?: number;\n      sm?: number;\n      md?: number;\n      lg?: number;\n      xl?: number;\n    };\n\nexport type IcGridType = \"fluid\" | \"fixed\";\n"]}

package/dist/collection/components/ic-layout-grid-item/ic-layout-grid-item.css

@@ -0,0 +1,12 @@
+:host {
+  grid-column: var(--ic-grid-item-col-start, 1) / span
+    var(--ic-grid-item-col-span, var(--ic-layout-grid-col-span, 1)) !important;
+  grid-row: var(--ic-grid-item-row-start, 1) / span
+    var(--ic-grid-item-row-span, var(--ic-layout-grid-row-span, 1)) !important;
+}
+
+@media only screen and (max-width: 576px) {
+  :host(.ic-layout-grid-hide-in-mobile) {
+    display: none;
+  }
+}

package/dist/collection/components/ic-layout-grid-item/ic-layout-grid-item.js

@@ -0,0 +1,182 @@
+import { Host, h } from "@stencil/core";
+export class LayoutGridItem {
+    constructor() {
+        /**
+         * The number of columns the grid item should span.
+         */
+        this.colSpan = 1;
+        /**
+         * The column the grid item should start at.
+         */
+        this.colStart = 1;
+        /**
+         * If `true`, the grid item will be hidden on smaller screens.
+         */
+        this.hideInMobileMode = false;
+        /**
+         * The number of rows the grid item should span.
+         */
+        this.rowSpan = 1;
+        /**
+         * The row the grid item should start at.
+         */
+        this.rowStart = 1;
+    }
+    watchColSpan(newValue) {
+        this.el.style.setProperty("--ic-grid-item-col-span", `${newValue}`);
+    }
+    watchColStart(newValue) {
+        this.el.style.setProperty("--ic-grid-item-col-start", `${newValue}`);
+    }
+    watchRowSpan(newValue) {
+        this.el.style.setProperty("--ic-grid-item-row-span", `${newValue}`);
+    }
+    watchRowStart(newValue) {
+        this.el.style.setProperty("--ic-grid-item-row-start", `${newValue}`);
+    }
+    componentWillLoad() {
+        this.el.style.setProperty("--ic-grid-item-col-start", `${this.colStart}`);
+        this.el.style.setProperty("--ic-grid-item-col-span", `${this.colSpan}`);
+        this.el.style.setProperty("--ic-grid-item-row-start", `${this.rowStart}`);
+        this.el.style.setProperty("--ic-grid-item-row-span", `${this.rowSpan}`);
+    }
+    render() {
+        const { hideInMobileMode } = this;
+        return (h(Host, { key: '07cb3d39a4c3440a06df2f6c56ecdf3017e48f59', class: {
+                "ic-layout-grid-hide-in-mobile": !!hideInMobileMode,
+            } }, h("slot", { key: '53c7d5616494ad9fc7468d023b9a9ec520938916' })));
+    }
+    static get is() { return "ic-layout-grid-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ic-layout-grid-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ic-layout-grid-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "colSpan": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The number of columns the grid item should span."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "col-span",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "colStart": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The column the grid item should start at."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "col-start",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "hideInMobileMode": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the grid item will be hidden on smaller screens."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hide-in-mobile-mode",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "rowSpan": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The number of rows the grid item should span."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "row-span",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "rowStart": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The row the grid item should start at."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "row-start",
+                "reflect": false,
+                "defaultValue": "1"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "colSpan",
+                "methodName": "watchColSpan"
+            }, {
+                "propName": "colStart",
+                "methodName": "watchColStart"
+            }, {
+                "propName": "rowSpan",
+                "methodName": "watchRowSpan"
+            }, {
+                "propName": "rowStart",
+                "methodName": "watchRowStart"
+            }];
+    }
+}
+//# sourceMappingURL=ic-layout-grid-item.js.map

package/dist/collection/components/ic-layout-grid-item/ic-layout-grid-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-layout-grid-item.js","sourceRoot":"","sources":["../../../src/components/ic-layout-grid-item/ic-layout-grid-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOzE,MAAM,OAAO,cAAc;IAL3B;QAQE;;WAEG;QACK,YAAO,GAAY,CAAC,CAAC;QAM7B;;WAEG;QACK,aAAQ,GAAY,CAAC,CAAC;QAM9B;;WAEG;QACK,qBAAgB,GAAa,KAAK,CAAC;QAE3C;;WAEG;QACK,YAAO,GAAY,CAAC,CAAC;QAM7B;;WAEG;QACK,aAAQ,GAAY,CAAC,CAAC;KAyB/B;IAvDC,YAAY,CAAC,QAAgB;QAC3B,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,yBAAyB,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAC;IACtE,CAAC;IAOD,aAAa,CAAC,QAAgB;QAC5B,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,0BAA0B,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAC;IACvE,CAAC;IAYD,YAAY,CAAC,QAAgB;QAC3B,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,yBAAyB,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAC;IACtE,CAAC;IAOD,aAAa,CAAC,QAAgB;QAC5B,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,0BAA0B,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAC;IACvE,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,0BAA0B,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QAC1E,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,yBAAyB,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;QACxE,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,0BAA0B,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QAC1E,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,yBAAyB,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;IAC1E,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;QAClC,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,+BAA+B,EAAE,CAAC,CAAC,gBAAgB;aACpD;YAED,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Host, h, Element, Watch } from \"@stencil/core\";\n\n@Component({\n  tag: \"ic-layout-grid-item\",\n  styleUrl: \"ic-layout-grid-item.css\",\n  shadow: true,\n})\nexport class LayoutGridItem {\n  @Element() el: HTMLIcLayoutGridItemElement;\n\n  /**\n   * The number of columns the grid item should span.\n   */\n  @Prop() colSpan?: number = 1;\n  @Watch(\"colSpan\")\n  watchColSpan(newValue: number) {\n    this.el.style.setProperty(\"--ic-grid-item-col-span\", `${newValue}`);\n  }\n\n  /**\n   * The column the grid item should start at.\n   */\n  @Prop() colStart?: number = 1;\n  @Watch(\"colStart\")\n  watchColStart(newValue: number) {\n    this.el.style.setProperty(\"--ic-grid-item-col-start\", `${newValue}`);\n  }\n\n  /**\n   * If `true`, the grid item will be hidden on smaller screens.\n   */\n  @Prop() hideInMobileMode?: boolean = false;\n\n  /**\n   * The number of rows the grid item should span.\n   */\n  @Prop() rowSpan?: number = 1;\n  @Watch(\"rowSpan\")\n  watchRowSpan(newValue: number) {\n    this.el.style.setProperty(\"--ic-grid-item-row-span\", `${newValue}`);\n  }\n\n  /**\n   * The row the grid item should start at.\n   */\n  @Prop() rowStart?: number = 1;\n  @Watch(\"rowStart\")\n  watchRowStart(newValue: number) {\n    this.el.style.setProperty(\"--ic-grid-item-row-start\", `${newValue}`);\n  }\n\n  componentWillLoad(): void {\n    this.el.style.setProperty(\"--ic-grid-item-col-start\", `${this.colStart}`);\n    this.el.style.setProperty(\"--ic-grid-item-col-span\", `${this.colSpan}`);\n    this.el.style.setProperty(\"--ic-grid-item-row-start\", `${this.rowStart}`);\n    this.el.style.setProperty(\"--ic-grid-item-row-span\", `${this.rowSpan}`);\n  }\n\n  render() {\n    const { hideInMobileMode } = this;\n    return (\n      <Host\n        class={{\n          \"ic-layout-grid-hide-in-mobile\": !!hideInMobileMode,\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -91,7 +91,7 @@ export class Link {
     }
     render() {
         const { download, href, hreflang, referrerpolicy, rel, target, monochrome, theme, } = this;
-        return (h(Host, { key: 'bc07dfd2d7467391a9c121f1263df5d053f7a59c', class: {
+        return (h(Host, { key: '21143018ec29344c665ecc6ffdc7ca033eb6fd18', class: {
                 ["ic-link"]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 ["ic-link-monochrome"]: !!monochrome,

package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.js

@@ -179,23 +179,23 @@ export class LoadingIndicator {
     }
     render() {
         const { circularDiameter, circularDimensions: { x, y, r, dashArray, dashOffset }, description, fullWidth, indicatorLabel, innerLabel, label, max, min, monochrome, progress, size, theme, type, } = this;
-        return (h(Host, { key: 'a56bc4f2265b8697fb78fe0cb021df4f7c84b34d', class: {
+        return (h(Host, { key: '413c553dc741429027e834c352171bc538bad4e5', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 "ic-loading-indicator-full-width": fullWidth,
                 "ic-loading-indicator-label": !!label,
                 "ic-loading-indicator-monochrome": monochrome,
-            } }, h("div", { key: '8da5f575ce68a85df03c23e256125ed968d55496', class: "ic-loading-container", part: "ic-loading-container" }, h("div", { key: '1a32acb1ce270a95b88a77d13591151d8a280fe8', ref: (el) => (this.outerElement = el), class: {
+            } }, h("div", { key: '988482262c2ce8269f8e10706f2455ee94fbed4c', class: "ic-loading-container", part: "ic-loading-container" }, h("div", { key: '93e2878a03795a8e5fd65e85cc586f8de22ec764', ref: (el) => (this.outerElement = el), class: {
                 [`ic-loading-${type}-outer`]: true,
                 [progress === undefined ? "indeterminate" : "determinate"]: true,
-            }, role: "progressbar", "aria-labelledby": label && size !== "icon" && "ic-loading-label", "aria-label": description, "aria-valuenow": progress, "aria-valuemin": min, "aria-valuemax": max }, h("div", { key: '0189f89d2f2f5a9f7530e1bbef1874fd52a00f87', ref: (el) => (this.innerElement = el), class: {
+            }, role: "progressbar", "aria-labelledby": label && size !== "icon" && "ic-loading-label", "aria-label": description, "aria-valuenow": progress, "aria-valuemin": min, "aria-valuemax": max }, h("div", { key: '1d4f9ebc1ee51844d0357c5629a9dc69aac0f16c', ref: (el) => (this.innerElement = el), class: {
                 [`ic-loading-${type}-inner`]: true,
                 "inner-label": !!innerLabel,
-            } }, innerLabel && size === "small" && (h("ic-typography", { key: '83c67de5d281dca4c293f3d06b278eabe63ccee3', variant: "subtitle-small", class: "inner-text" }, innerLabel)), type === "circular" && (h("svg", { key: 'e2449654d4dcb904c56ba47f6f72cfda5bcee7f0', class: "ic-loading-circular-svg", viewBox: `0 0 ${circularDiameter} ${circularDiameter}` }, h("circle", { key: '6436f697d6e7d7e030178fc3653ec86a509c2965', cx: x, cy: y, r: r }), h("circle", { key: '19da0a067ffdd864a08a630eabff268e9bfd1c33', style: {
+            } }, innerLabel && size === "small" && (h("ic-typography", { key: '85269ef476f8ee423e4a14383445cfa4b0256556', variant: "subtitle-small", class: "inner-text" }, innerLabel)), type === "circular" && (h("svg", { key: 'd3f423cd9659b735184d6657127c8626cc9cf4a3', class: "ic-loading-circular-svg", viewBox: `0 0 ${circularDiameter} ${circularDiameter}` }, h("circle", { key: '060c4d530c2e27309fbe6513eb2497ae91bcdb6a', cx: x, cy: y, r: r }), h("circle", { key: 'e4b17ca2492a92fe99561193250bb9fb4a8cf960', style: {
                 "--circular-steps-max": progress ? `${max}` : undefined,
                 "--progress-value": progress !== undefined ? `${progress}` : undefined,
                 "--stroke-dasharray": dashArray,
                 "--stroke-dashoffset": dashOffset,
-            }, cx: x, cy: y, r: r }))))), label && size !== "icon" && (h("ic-typography", { key: 'e4d24f7e59633400c36e0e380e52ea1714c7f88f', id: "ic-loading-label", class: "ic-loading-label", role: "alert", variant: this.getLabelVariant() }, h("p", { key: 'e89f399cb0c43c4cc7dd743a201789cf50a73ed9' }, indicatorLabel))))));
+            }, cx: x, cy: y, r: r }))))), label && size !== "icon" && (h("ic-typography", { key: '22f1b492ebc832a2ea60ffbefd9790c1f85b2c90', id: "ic-loading-label", class: "ic-loading-label", role: "alert", variant: this.getLabelVariant() }, h("p", { key: 'e513e1965e25987826a872c991faec17c17db505' }, indicatorLabel))))));
     }
     static get is() { return "ic-loading-indicator"; }
     static get encapsulation() { return "shadow"; }