@ukic/web-components 3.8.0 → 3.9.0

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

@@ -0,0 +1,377 @@
+import { Host, h } from "@stencil/core";
+export class LayoutGrid {
+    constructor() {
+        this.COL_WIDTH_CSS_PROP = "--ic-layout-grid-col-width";
+        /**
+         * The alignment of the grid.
+         */
+        this.aligned = "left";
+        /**
+         * The default column span for grid items.
+         */
+        this.defaultColSpan = 1;
+        /**
+         * The default column width for grid items.
+         * This is used when the grid type is set to "fixed".
+         */
+        this.defaultColWidth = "64px";
+        /**
+         * The default row span for grid items.
+         */
+        this.defaultRowSpan = 1;
+        /**
+         * If `true`, the standard vertical padding from the grid will be removed.
+         */
+        this.fullHeight = false;
+        /**
+         * The space between grid items, in multiples of the base spacing unit (`var(--ic-space-xs)`).
+         */
+        this.gridSpacing = 2;
+        /**
+         * The number of rows in the grid.
+         */
+        this.rows = 1;
+        /**
+         * The layout type of the grid.
+         */
+        this.type = "fixed";
+        this.getColumns = () => {
+            if (typeof this.columns === "number") {
+                this.el.style.setProperty("--ic-layout-grid-columns", this.columns.toString());
+            }
+            else if (typeof this.columns === "object") {
+                Object.entries(this.columns).forEach(([breakpoint, value]) => {
+                    if (value !== undefined) {
+                        this.el.style.setProperty(`--ic-layout-grid-columns-${breakpoint}`, value.toString());
+                    }
+                });
+            }
+        };
+        this.getColSpan = () => {
+            if (this.defaultColSpan !== undefined) {
+                if (typeof this.defaultColSpan === "number") {
+                    Array.from(this.el.children).forEach((child) => {
+                        child.style.setProperty("--ic-layout-grid-col-span", `${this.defaultColSpan}`);
+                    });
+                }
+                else if (typeof this.defaultColSpan === "object") {
+                    Object.entries(this.defaultColSpan).forEach(([breakpoint, value]) => {
+                        if (value !== undefined) {
+                            this.el.style.setProperty(`--ic-layout-grid-col-span-${breakpoint}`, value.toString());
+                        }
+                    });
+                }
+            }
+        };
+        this.getGridSpacing = () => {
+            this.el.style.setProperty("--ic-layout-grid-spacing", `calc(var(--ic-space-xs) * ${this.gridSpacing})`);
+        };
+    }
+    watchColumns() {
+        this.getColumns();
+    }
+    watchDefaultColSpan() {
+        this.getColSpan();
+    }
+    watchDefaultColWidth(newValue) {
+        if (this.type === "fixed") {
+            this.el.style.setProperty(this.COL_WIDTH_CSS_PROP, newValue);
+        }
+    }
+    watchDefaultRowSpan(newValue) {
+        this.el.style.setProperty("--ic-layout-grid-row-span", `${newValue}`);
+    }
+    watchGridSpacing() {
+        this.getGridSpacing();
+    }
+    watchRows(newValue) {
+        this.el.style.setProperty("--ic-layout-grid-rows", `${newValue}`);
+    }
+    watchType(newValue) {
+        this.getColumns();
+        if (newValue === "fixed" && this.defaultColWidth) {
+            this.el.style.setProperty(this.COL_WIDTH_CSS_PROP, this.defaultColWidth);
+        }
+        else {
+            this.el.style.removeProperty(this.COL_WIDTH_CSS_PROP);
+        }
+    }
+    componentWillLoad() {
+        if (this.columns === undefined) {
+            if (this.type === "fixed") {
+                this.columns = 12;
+            }
+            else if (this.type === "fluid") {
+                this.columns = {
+                    xs: 2,
+                    sm: 4,
+                    md: 8,
+                    lg: 12,
+                    xl: 12,
+                };
+            }
+        }
+        this.getColumns();
+        this.getColSpan();
+        this.getGridSpacing();
+        if (this.type === "fixed" && this.defaultColWidth) {
+            this.el.style.setProperty(this.COL_WIDTH_CSS_PROP, this.defaultColWidth);
+        }
+        if (this.rows) {
+            this.el.style.setProperty("--ic-layout-grid-rows", `${this.rows}`);
+            this.el.style.setProperty("--ic-layout-grid-row-span", `${this.defaultRowSpan}`);
+        }
+    }
+    render() {
+        const { aligned, fullHeight } = this;
+        return (h(Host, { key: '95699906353df84f439ec7c7ed628f4ba9c80b4e', class: {
+                [`ic-layout-grid-aligned-${aligned}`]: true,
+                ["ic-layout-grid-no-vertical-padding"]: !!fullHeight,
+            } }, h("slot", { key: '5642340495e02e53b2e7248e0f254b32b95b3b3f' })));
+    }
+    static get is() { return "ic-layout-grid"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ic-layout-grid.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ic-layout-grid.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "aligned": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcAlignment",
+                    "resolved": "\"center\" | \"full-width\" | \"left\" | undefined",
+                    "references": {
+                        "IcAlignment": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcAlignment"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The alignment of the grid."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "aligned",
+                "reflect": false,
+                "defaultValue": "\"left\""
+            },
+            "columns": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcGridBreakpoints",
+                    "resolved": "number | undefined | { xs?: number | undefined; sm?: number | undefined; md?: number | undefined; lg?: number | undefined; xl?: number | undefined; }",
+                    "references": {
+                        "IcGridBreakpoints": {
+                            "location": "import",
+                            "path": "./ic-layout-grid.types",
+                            "id": "src/components/ic-layout-grid/ic-layout-grid.types.ts::IcGridBreakpoints"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The number of columns in the grid.\nThis can be a number or an object specifying different values for each breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "columns",
+                "reflect": false
+            },
+            "defaultColSpan": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcGridBreakpoints",
+                    "resolved": "number | undefined | { xs?: number | undefined; sm?: number | undefined; md?: number | undefined; lg?: number | undefined; xl?: number | undefined; }",
+                    "references": {
+                        "IcGridBreakpoints": {
+                            "location": "import",
+                            "path": "./ic-layout-grid.types",
+                            "id": "src/components/ic-layout-grid/ic-layout-grid.types.ts::IcGridBreakpoints"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The default column span for grid items."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "default-col-span",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "defaultColWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The default column width for grid items.\nThis is used when the grid type is set to \"fixed\"."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "default-col-width",
+                "reflect": false,
+                "defaultValue": "\"64px\""
+            },
+            "defaultRowSpan": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The default row span for grid items."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "default-row-span",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "fullHeight": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the standard vertical padding from the grid will be removed."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "full-height",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "gridSpacing": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The space between grid items, in multiples of the base spacing unit (`var(--ic-space-xs)`)."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "grid-spacing",
+                "reflect": false,
+                "defaultValue": "2"
+            },
+            "rows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The number of rows in the grid."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "rows",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcGridType",
+                    "resolved": "\"fixed\" | \"fluid\"",
+                    "references": {
+                        "IcGridType": {
+                            "location": "import",
+                            "path": "./ic-layout-grid.types",
+                            "id": "src/components/ic-layout-grid/ic-layout-grid.types.ts::IcGridType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The layout type of the grid."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "\"fixed\""
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "columns",
+                "methodName": "watchColumns"
+            }, {
+                "propName": "defaultColSpan",
+                "methodName": "watchDefaultColSpan"
+            }, {
+                "propName": "defaultColWidth",
+                "methodName": "watchDefaultColWidth"
+            }, {
+                "propName": "defaultRowSpan",
+                "methodName": "watchDefaultRowSpan"
+            }, {
+                "propName": "gridSpacing",
+                "methodName": "watchGridSpacing"
+            }, {
+                "propName": "rows",
+                "methodName": "watchRows"
+            }, {
+                "propName": "type",
+                "methodName": "watchType"
+            }];
+    }
+}
+//# sourceMappingURL=ic-layout-grid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-layout-grid.js","sourceRoot":"","sources":["../../../src/components/ic-layout-grid/ic-layout-grid.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Host, h, Element, Watch } from \"@stencil/core\";\nimport { IcAlignment } from \"../../utils/types\";\nimport { IcGridBreakpoints, IcGridType } from \"./ic-layout-grid.types\";\n\n@Component({\n  tag: \"ic-layout-grid\",\n  styleUrl: \"ic-layout-grid.css\",\n  shadow: true,\n})\nexport class LayoutGrid {\n  private COL_WIDTH_CSS_PROP = \"--ic-layout-grid-col-width\";\n\n  @Element() el: HTMLIcLayoutGridElement;\n\n  /**\n   * The alignment of the grid.\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n\n  /**\n   * The number of columns in the grid.\n   * This can be a number or an object specifying different values for each breakpoint.\n   */\n  @Prop() columns?: IcGridBreakpoints;\n  @Watch(\"columns\")\n  watchColumns() {\n    this.getColumns();\n  }\n\n  /**\n   * The default column span for grid items.\n   */\n  @Prop() defaultColSpan?: IcGridBreakpoints = 1;\n  @Watch(\"defaultColSpan\")\n  watchDefaultColSpan() {\n    this.getColSpan();\n  }\n\n  /**\n   * The default column width for grid items.\n   * This is used when the grid type is set to \"fixed\".\n   */\n  @Prop() defaultColWidth?: string = \"64px\";\n  @Watch(\"defaultColWidth\")\n  watchDefaultColWidth(newValue: string) {\n    if (this.type === \"fixed\") {\n      this.el.style.setProperty(this.COL_WIDTH_CSS_PROP, newValue);\n    }\n  }\n\n  /**\n   * The default row span for grid items.\n   */\n  @Prop() defaultRowSpan?: number = 1;\n  @Watch(\"defaultRowSpan\")\n  watchDefaultRowSpan(newValue: number) {\n    this.el.style.setProperty(\"--ic-layout-grid-row-span\", `${newValue}`);\n  }\n\n  /**\n   * If `true`, the standard vertical padding from the grid will be removed.\n   */\n  @Prop() fullHeight?: boolean = false;\n\n  /**\n   * The space between grid items, in multiples of the base spacing unit (`var(--ic-space-xs)`).\n   */\n  @Prop() gridSpacing?: number = 2;\n  @Watch(\"gridSpacing\")\n  watchGridSpacing() {\n    this.getGridSpacing();\n  }\n\n  /**\n   * The number of rows in the grid.\n   */\n  @Prop() rows?: number = 1;\n  @Watch(\"rows\")\n  watchRows(newValue: number) {\n    this.el.style.setProperty(\"--ic-layout-grid-rows\", `${newValue}`);\n  }\n\n  /**\n   * The layout type of the grid.\n   */\n  @Prop() type: IcGridType = \"fixed\";\n  @Watch(\"type\")\n  watchType(newValue: IcGridType) {\n    this.getColumns();\n    if (newValue === \"fixed\" && this.defaultColWidth) {\n      this.el.style.setProperty(this.COL_WIDTH_CSS_PROP, this.defaultColWidth);\n    } else {\n      this.el.style.removeProperty(this.COL_WIDTH_CSS_PROP);\n    }\n  }\n\n  componentWillLoad(): void {\n    if (this.columns === undefined) {\n      if (this.type === \"fixed\") {\n        this.columns = 12;\n      } else if (this.type === \"fluid\") {\n        this.columns = {\n          xs: 2,\n          sm: 4,\n          md: 8,\n          lg: 12,\n          xl: 12,\n        };\n      }\n    }\n    this.getColumns();\n    this.getColSpan();\n    this.getGridSpacing();\n    if (this.type === \"fixed\" && this.defaultColWidth) {\n      this.el.style.setProperty(this.COL_WIDTH_CSS_PROP, this.defaultColWidth);\n    }\n    if (this.rows) {\n      this.el.style.setProperty(\"--ic-layout-grid-rows\", `${this.rows}`);\n      this.el.style.setProperty(\n        \"--ic-layout-grid-row-span\",\n        `${this.defaultRowSpan}`\n      );\n    }\n  }\n\n  private getColumns = () => {\n    if (typeof this.columns === \"number\") {\n      this.el.style.setProperty(\n        \"--ic-layout-grid-columns\",\n        this.columns.toString()\n      );\n    } else if (typeof this.columns === \"object\") {\n      Object.entries(this.columns).forEach(([breakpoint, value]) => {\n        if (value !== undefined) {\n          this.el.style.setProperty(\n            `--ic-layout-grid-columns-${breakpoint}`,\n            value.toString()\n          );\n        }\n      });\n    }\n  };\n\n  private getColSpan = () => {\n    if (this.defaultColSpan !== undefined) {\n      if (typeof this.defaultColSpan === \"number\") {\n        (Array.from(this.el.children) as HTMLElement[]).forEach((child) => {\n          child.style.setProperty(\n            \"--ic-layout-grid-col-span\",\n            `${this.defaultColSpan}`\n          );\n        });\n      } else if (typeof this.defaultColSpan === \"object\") {\n        Object.entries(this.defaultColSpan).forEach(([breakpoint, value]) => {\n          if (value !== undefined) {\n            this.el.style.setProperty(\n              `--ic-layout-grid-col-span-${breakpoint}`,\n              value.toString()\n            );\n          }\n        });\n      }\n    }\n  };\n\n  private getGridSpacing = () => {\n    this.el.style.setProperty(\n      \"--ic-layout-grid-spacing\",\n      `calc(var(--ic-space-xs) * ${this.gridSpacing})`\n    );\n  };\n\n  render() {\n    const { aligned, fullHeight } = this;\n\n    return (\n      <Host\n        class={{\n          [`ic-layout-grid-aligned-${aligned}`]: true,\n          [\"ic-layout-grid-no-vertical-padding\"]: !!fullHeight,\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}