npm - @oiz/stzh-components - Versions diffs - 2.9.0-alpha → 2.9.0-beta - Mend

@oiz/stzh-components 2.9.0-alpha → 2.9.0-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (138) hide show

package/dist/collection/components/stzh-datatable/stzh-datatable.js CHANGED Viewed

@@ -1,10 +1,35 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { Document } from 'flexsearch/dist/flexsearch.bundle.js';
 /**
  * @slot action-button - Slot for action `stzh-button` element
  */
 export class StzhDatatable {
   constructor() {
+    this.handleRowClick = (event, row) => {
+      this.stzhRowClick.emit({
+        component: "stzh-datatable",
+        row,
+        originalEvent: event
+      });
+    };
+    this.handleCellClick = (event, row, column, cellIndex, rowIndex) => {
+      this.stzhCellClick.emit({
+        component: "stzh-datatable",
+        row,
+        column,
+        cellIndex,
+        rowIndex,
+        originalEvent: event
+      });
+    };
+    this.handleSortClick = (event, column) => {
+      this.stzhSortClick.emit({
+        component: "stzh-datatable",
+        column,
+        originalEvent: event
+      });
+      this.toggleSort(column.key);
+    };
     this.updateScrollStates = () => {
       if (!this.tableWrapper) {
         return;
@@ -58,12 +83,14 @@ export class StzhDatatable {
         this.page = event.detail.page;
       }
     };
+    this.tableLayout = "auto";
     this.localization = undefined;
     this.label = "";
     this.sortBy = "";
     this.sortDirection = "asc";
     this.tokenize = "forward";
     this.idField = "id";
+    this.hideSearch = false;
     this.showList = false;
     this.page = 1;
     this.pageSize = null;
@@ -106,6 +133,28 @@ export class StzhDatatable {
     }
     this.buildSearchIndex();
   }
+  sortByWatcher(value, oldValue) {
+    this.stzhSortByChange.emit({
+      component: "stzh-datatable",
+      value,
+      oldValue
+    });
+  }
+  sortDirectionWatcher(value, oldValue) {
+    this.stzhSortDirectionChange.emit({
+      component: "stzh-datatable",
+      value,
+      oldValue
+    });
+  }
+  handleHeadingCellClick(event, column, index) {
+    this.stzhHeadingCellClick.emit({
+      component: "stzh-datatable",
+      column,
+      index,
+      originalEvent: event
+    });
+  }
   buildSearchIndex() {
     if (!this._rows || this._rows.length === 0
       || !this._columns || this._columns.length === 0) {
@@ -139,6 +188,7 @@ export class StzhDatatable {
     this.updateScrollStates();
   }
   componentWillRender() {
+    var _a, _b;
     this._rowsShown = [];
     this._rowsFiltered = [];
     if (this.query) {
@@ -159,9 +209,22 @@ export class StzhDatatable {
       this._rowsFiltered = [...this._rows];
     }
     if (this.sortBy) {
+      const columnConfig = this._columns.find((column) => column.key === this.sortBy);
+      const column = ((_a = columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig.sort) === null || _a === void 0 ? void 0 : _a.field) || this.sortBy;
+      const type = (_b = columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig.sort) === null || _b === void 0 ? void 0 : _b.type;
       this._rowsFiltered.sort((rowA, rowB) => {
-        const comparison = rowA[this.sortBy].localeCompare(rowB[this.sortBy]);
-        return this.sortDirection === "asc" ? comparison : comparison / -1;
+        if (type === "numerical") {
+          if (this.sortDirection === "asc") {
+            return Number(rowA[column]) - Number(rowB[column]);
+          }
+          else {
+            return Number(rowB[column]) - Number(rowA[column]);
+          }
+        }
+        else {
+          const comparison = rowA[column].localeCompare(rowB[column]);
+          return this.sortDirection === "asc" ? comparison : comparison / -1;
+        }
       });
     }
     if (this.pageSize !== null) {
@@ -192,7 +255,11 @@ export class StzhDatatable {
       "has-list": this.showList,
     };
     const totalPages = Math.ceil(this._rowsFiltered.length / this.pageSize);
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-datatable__header" }, h("div", { class: "stzh-datatable__heading" }, h("slot", { name: "heading" })), h("div", { class: "stzh-datatable__sub-header" }, h("stzh-input", { ref: (el) => (this.input = el), class: "stzh-datatable__search", size: "small", name: "stzh-datatable-search", onStzhChange: this.onInputChange, label: this.localization.searchLabel }), h("div", { class: "stzh-datatable__action-button" }, h("slot", { name: "action-button" })))), h("div", { class: "stzh-datatable__outer-wrapper" }, h("div", { ref: (el) => (this.tableWrapper = el), class: "stzh-datatable__wrapper", onScroll: this.handleScroll }, h("table", { class: "stzh-datatable__table" }, h("thead", { class: "stzh-datatable__thead" }, h("tr", { class: "stzh-datatable__row stzh-datatable__row--head" }, this._columns.map((column, index) => h("th", { class: {
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-datatable__header" }, h("div", { class: "stzh-datatable__heading" }, h("slot", { name: "heading" })), h("div", { class: "stzh-datatable__sub-header" }, !this.hideSearch &&
+      h("stzh-input", { ref: (el) => (this.input = el), class: "stzh-datatable__search", size: "small", name: "stzh-datatable-search", onStzhChange: this.onInputChange, label: this.localization.searchLabel }), h("div", { class: "stzh-datatable__action-button" }, h("slot", { name: "action-button" })))), h("div", { class: "stzh-datatable__outer-wrapper" }, h("div", { ref: (el) => (this.tableWrapper = el), class: "stzh-datatable__wrapper", onScroll: this.handleScroll }, h("table", { class: {
+        "stzh-datatable__table": true,
+        "has-layout-fixed": this.tableLayout === "fixed",
+      } }, h("thead", { class: "stzh-datatable__thead" }, h("tr", { class: "stzh-datatable__row stzh-datatable__row--head" }, this._columns.map((column, index) => h("th", { onClick: (event) => this.handleHeadingCellClick(event, column, index), style: column.style, class: {
         "stzh-datatable__cell stzh-datatable__cell--head": true,
         "is-sticky-left": column.fixed === "left",
         "is-sticky-right": column.fixed === "right",
@@ -204,11 +271,11 @@ export class StzhDatatable {
         [`align-${column.align}`]: column.align,
         [`valign-${column.valign}`]: column.valign
       } }, column.sort ?
-      h("button", { class: "stzh-datatable__sort-button", type: "button", onClick: () => this.toggleSort(column.key), "s-object-id": column.analyticsId || `${column.text} ${this.localization.columnSort}` }, h("span", null, column.text), h("stzh-icon", { name: "arrow-up", class: "stzh-datatable__sort-icon", a11yTitle: this.localization.columnSort }))
+      h("button", { class: "stzh-datatable__sort-button", type: "button", onClick: (event) => this.handleSortClick(event, column), "s-object-id": column.analyticsId || `${column.text} ${this.localization.columnSort}` }, h("span", null, column.text), h("stzh-icon", { name: "arrow-up", class: "stzh-datatable__sort-icon", a11yTitle: this.localization.columnSort }))
       :
-        h("span", null, column.text))))), h("tbody", null, this._rowsShown.map((row) => h("tr", { class: "stzh-datatable__row stzh-datatable__row--body" }, this._columns.map((column, index) => {
+        h("span", null, column.text))))), h("tbody", null, this._rowsShown.map((row, rowIndex) => h("tr", { class: "stzh-datatable__row stzh-datatable__row--body", onClick: (event) => this.handleRowClick(event, row) }, this._columns.map((column, index) => {
       var _a, _b, _c, _d, _e;
-      return h("td", { innerHTML: ((_a = row[column.key]) === null || _a === void 0 ? void 0 : _a.text) || row[column.key] || "", class: {
+      return h("td", { onClick: (event) => this.handleCellClick(event, row, column, index, rowIndex), innerHTML: ((_a = row[column.key]) === null || _a === void 0 ? void 0 : _a.text) || row[column.key] || "", style: column.style, class: {
           "stzh-datatable__cell stzh-datatable__cell--body": true,
           "is-sticky-left": column.fixed === "left",
           "is-sticky-right": column.fixed === "right",
@@ -240,6 +307,24 @@ export class StzhDatatable {
   }
   static get properties() {
     return {
+      "tableLayout": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"auto\" | \"fixed\"",
+          "resolved": "\"auto\" | \"fixed\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Table layout"
+        },
+        "attribute": "table-layout",
+        "reflect": false,
+        "defaultValue": "\"auto\""
+      },
       "localization": {
         "type": "unknown",
         "mutable": false,
@@ -350,6 +435,24 @@ export class StzhDatatable {
         "reflect": false,
         "defaultValue": "\"id\""
       },
+      "hideSearch": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-search",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "showList": {
         "type": "boolean",
         "mutable": false,
@@ -434,7 +537,7 @@ export class StzhDatatable {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Rows"
+          "text": "Array of objects including the row data that must at least include `id` attribute (name can be changed with `idField` property).\n\nExample: [{\"id\":\"1\",\"text\":\"Foo\"}, ...]"
         },
         "attribute": "rows",
         "reflect": false,
@@ -452,7 +555,7 @@ export class StzhDatatable {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Columns"
+          "text": "Array of objects including the columns data that must include `key` and `text` attribute.\n\nExample: [{ \"key\": \"id\", \"text\": \"ID\", \"align\": \"right\", \"sort\": true, \"fixed\": \"right\", style: { width: \"53px\" } }]"
         },
         "attribute": "columns",
         "reflect": false,
@@ -470,6 +573,129 @@ export class StzhDatatable {
       "cellsStickyRight": {}
     };
   }
+  static get events() {
+    return [{
+        "method": "stzhRowClick",
+        "name": "stzhRowClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Datatable row click event"
+        },
+        "complexType": {
+          "original": "StzhDatatableRowClickEvent",
+          "resolved": "{ component: \"stzh-datatable\"; row: any; originalEvent: MouseEvent; }",
+          "references": {
+            "StzhDatatableRowClickEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhCellClick",
+        "name": "stzhCellClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Datatable cell click event"
+        },
+        "complexType": {
+          "original": "StzhDatatableCellClickEvent",
+          "resolved": "{ component: \"stzh-datatable\"; row: any; column: any; cellIndex: number; rowIndex: number; originalEvent: MouseEvent; }",
+          "references": {
+            "StzhDatatableCellClickEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhHeadingCellClick",
+        "name": "stzhHeadingCellClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Datatable heading cell click event"
+        },
+        "complexType": {
+          "original": "StzhDatatableHeadingCellClickEvent",
+          "resolved": "{ component: \"stzh-datatable\"; column: any; index: number; originalEvent: MouseEvent; }",
+          "references": {
+            "StzhDatatableHeadingCellClickEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhSortClick",
+        "name": "stzhSortClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Datatable sort click event"
+        },
+        "complexType": {
+          "original": "StzhDatatableSortClickEvent",
+          "resolved": "{ component: \"stzh-datatable\"; column: any; originalEvent: MouseEvent; }",
+          "references": {
+            "StzhDatatableSortClickEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhSortByChange",
+        "name": "stzhSortByChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Datatable sort by change event"
+        },
+        "complexType": {
+          "original": "StzhDatatableSortByChangeEvent",
+          "resolved": "{ component: \"stzh-datatable\"; value: string; oldValue: string; }",
+          "references": {
+            "StzhDatatableSortByChangeEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhSortDirectionChange",
+        "name": "stzhSortDirectionChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Datatable sort direction change event"
+        },
+        "complexType": {
+          "original": "StzhDatatableSortDirectionChangeEvent",
+          "resolved": "{ component: \"stzh-datatable\"; value: \"asc\" | \"desc\"; oldValue: \"asc\" | \"desc\"; }",
+          "references": {
+            "StzhDatatableSortDirectionChangeEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
   static get methods() {
     return {
       "toggleSort": {
@@ -501,6 +727,12 @@ export class StzhDatatable {
       }, {
         "propName": "columns",
         "methodName": "columnsWatcher"
+      }, {
+        "propName": "sortBy",
+        "methodName": "sortByWatcher"
+      }, {
+        "propName": "sortDirection",
+        "methodName": "sortDirectionWatcher"
       }];
   }
 }

package/dist/collection/components/stzh-datatable/stzh-datatable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stzh-datatable.js","sourceRoot":"","sources":["../../../src/components/stzh-datatable/stzh-datatable.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch,\n Method,\n State\n} from \"@stencil/core\";\n\nimport {\n StzhPaginationChangeEvent\n} from \"../../index\";\n\nimport { Document } from 'flexsearch/dist/flexsearch.bundle.js';\n\nimport { StzhDatatableLocalizedText } from './stzh-datatable.localization';\n\n/*\n @slot action-button - Slot for action `stzh-button` element\n /\n@Component({\n tag: \"stzh-datatable\",\n styleUrl: \"stzh-datatable.scss\"\n})\nexport class StzhDatatable {\n /* Translation strings /\n @Prop() localization: StzhDatatableLocalizedText;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Sort by given column key /\n @Prop({ mutable: true }) sortBy: string = \"\";\n\n /* Sort direction /\n @Prop({ mutable: true }) sortDirection: \"asc\" \| \"desc\" = \"asc\";\n\n /* Tokenize type /\n @Prop() tokenize: \"strict\" \| \"forward\" \| \"reverse\" \| \"full\" = \"forward\";\n\n /* ID field /\n @Prop() idField = \"id\";\n\n /* Whether to show table data as list on mikro breakpoint /\n @Prop({ reflect: true }) showList = false;\n\n /* Current page /\n @Prop({ mutable: true }) page: number = 1;\n\n /* If pagination should be shown, set a number of items to be shown by each page. /\n @Prop() pageSize: number = null;\n\n /\n Whether to disable min-width of the table.\n \n If `false`, the default `min-width` is `700px`\n * If `true`, the `min-width` is `none`, so the table will try to squeeze down content as much as possible.\n \n You can also overwrite the min-width via CSS with the custom property `--min-width`.\n /\n @Prop({ reflect: true }) disableMinWidth: boolean = false;\n\n /* Rows /\n @Prop() rows: any[] \| string = [];\n private _rows: any[];\n private _rowsShown: any[];\n private _rowsFiltered: any[];\n\n /* Columns /\n @Prop() columns: any[] \| string = [];\n private _columns: any[];\n\n @State() query: string = \"\";\n @State() hasScrollLeft: boolean = false;\n @State() hasScrollRight: boolean = false;\n @State() isScrollable: boolean = false;\n @State() cellsStickyLeft: number[] = [];\n @State() cellsStickyRight: number[] = [];\n\n @Element() element: HTMLStzhDatatableElement;\n\n /* Toggle sort by a given column key like when clicking on a column header /\n @Method()\n async toggleSort(columnKey: string) {\n this.page = 1;\n\n if (columnKey === this.sortBy) {\n this.sortDirection = this.sortDirection === \"asc\" ? \"desc\" : \"asc\";\n } else {\n this.sortDirection = \"asc\";\n this.sortBy = columnKey;\n }\n }\n\n @Watch(\"rows\")\n rowsWatcher(newValue: any[] \| string) {\n if (typeof newValue === \"string\") {\n this._rows = JSON.parse(newValue);\n } else {\n this._rows = newValue;\n }\n\n this.buildSearchIndex();\n }\n\n @Watch(\"columns\")\n columnsWatcher(newValue: any[] \| string) {\n if (typeof newValue === \"string\") {\n this._columns = JSON.parse(newValue);\n } else {\n this._columns = newValue;\n }\n\n this.buildSearchIndex();\n }\n\n private input: HTMLStzhInputElement;\n private searchIndex: Document;\n private tableWrapper: HTMLDivElement;\n private debounceScroll: number;\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n\n private updateScrollStates = () => {\n if (!this.tableWrapper) {\n return;\n }\n\n const wrapperScrollLeft = this.tableWrapper.scrollLeft;\n const wrapperScrollWidth = this.tableWrapper.scrollWidth;\n const wrapperClientWidth = this.tableWrapper.clientWidth;\n\n this.isScrollable = wrapperScrollWidth > wrapperClientWidth;\n this.hasScrollLeft = wrapperScrollLeft > 0;\n this.hasScrollRight = wrapperScrollLeft < wrapperScrollWidth - wrapperClientWidth;\n\n const rows: HTMLTableRowElement[] = Array.from(this.tableWrapper.querySelectorAll(\"tr\"));\n const firstRow = rows[0];\n\n if (!firstRow) {\n return;\n }\n\n this.cellsStickyLeft = [];\n this.cellsStickyRight = [];\n const cells: Element[] = Array.from(firstRow.children);\n\n cells.forEach((cell: HTMLTableCellElement, index: number) => {\n const offsetLeft = cell.offsetLeft;\n const offsetRight = offsetLeft + cell.offsetWidth;\n\n if (\n this.hasScrollLeft\n && this._columns[index].fixed === \"left\"\n && Math.ceil(wrapperScrollLeft) >= offsetLeft\n ) {\n this.cellsStickyLeft.push(index);\n }\n\n if (\n this.hasScrollRight\n && this._columns[index].fixed === \"right\"\n && Math.ceil(wrapperScrollLeft) + wrapperClientWidth <= offsetRight\n ) {\n this.cellsStickyRight.push(index);\n }\n });\n }\n\n private handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateScrollStates);\n }\n\n private handleScroll = () => {\n if (this.debounceScroll) {\n window.cancelAnimationFrame(this.debounceScroll);\n }\n\n this.debounceScroll = requestAnimationFrame(this.updateScrollStates);\n }\n\n private buildSearchIndex() {\n if (!this._rows \|\| this._rows.length === 0\n \|\| !this._columns \|\| this._columns.length === 0\n ) {\n return;\n }\n\n this.searchIndex = new Document({\n tokenize: this.tokenize,\n matcher: {\n '[äà]': 'a',\n '[öó]': 'o',\n '[üûúù]': 'u',\n '[éè]': 'e'\n },\n document: {\n id: this.idField,\n index: this._columns.map(column => column.key)\n }\n });\n\n this._rows.forEach(row => {\n this.searchIndex.add(row);\n });\n }\n\n private onInputChange = () => {\n this.query = this.input.value;\n }\n\n private onPaginationChange = (event: CustomEvent<StzhPaginationChangeEvent>) => {\n if (event.detail.component === \"stzh-pagination\") {\n this.page = event.detail.page;\n }\n }\n\n async componentWillLoad() {\n this.columnsWatcher(this.columns);\n this.rowsWatcher(this.rows);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datatable\");\n }\n }\n\n componentDidLoad() {\n this.updateScrollStates();\n }\n\n componentWillRender() {\n this._rowsShown = [];\n this._rowsFiltered = [];\n\n if (this.query) {\n let resultIds = [];\n\n this.searchIndex.search(this.query).forEach((result) => {\n resultIds = [...resultIds, ...result.result];\n });\n\n resultIds = resultIds.filter(function (item, pos) {\n return resultIds.indexOf(item) === pos;\n });\n\n this._rows.forEach((row) => {\n if (resultIds.indexOf(row[this.idField]) > -1) {\n this._rowsFiltered.push(row);\n }\n });\n } else {\n this._rowsFiltered = [...this._rows];\n }\n\n if (this.sortBy) {\n this._rowsFiltered.sort((rowA, rowB) => {\n const comparison = rowA[this.sortBy].localeCompare(rowB[this.sortBy])\n return this.sortDirection === \"asc\" ? comparison : comparison / -1;\n });\n }\n\n if (this.pageSize !== null) {\n const pageEnd = this.page this.pageSize;\n this._rowsShown = this._rowsFiltered.slice(pageEnd - this.pageSize, pageEnd);\n } else {\n this._rowsShown = [...this._rowsFiltered];\n }\n }\n\n connectedCallback() {\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const classes = {\n \"stzh-datatable\": true,\n \"is-scrollable\": this.isScrollable,\n \"has-scroll-left\": this.hasScrollLeft,\n \"has-scroll-right\": this.hasScrollRight,\n \"has-scroll-left-shadow\": this.hasScrollLeft && this.cellsStickyLeft.length === 0,\n \"has-scroll-right-shadow\": this.hasScrollRight && this.cellsStickyRight.length === 0,\n \"has-list\": this.showList,\n };\n\n const totalPages = Math.ceil(this._rowsFiltered.length / this.pageSize);\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-datatable__header\">\n <div class=\"stzh-datatable__heading\">\n <slot name=\"heading\"></slot>\n </div>\n <div class=\"stzh-datatable__sub-header\">\n <stzh-input\n ref={(el) => (this.input = el as HTMLStzhInputElement)}\n class=\"stzh-datatable__search\"\n size=\"small\"\n name=\"stzh-datatable-search\"\n onStzhChange={this.onInputChange}\n label={this.localization.searchLabel}\n ></stzh-input>\n <div class=\"stzh-datatable__action-button\">\n <slot name=\"action-button\"></slot>\n </div>\n </div>\n </div>\n\n <div class=\"stzh-datatable__outer-wrapper\">\n <div\n ref={(el) => (this.tableWrapper = el as HTMLDivElement)}\n class=\"stzh-datatable__wrapper\"\n onScroll={this.handleScroll}\n >\n <table class=\"stzh-datatable__table\">\n <thead class=\"stzh-datatable__thead\">\n <tr class=\"stzh-datatable__row stzh-datatable__row--head\">\n {this._columns.map((column, index) =>\n <th\n class={{\n \"stzh-datatable__cell stzh-datatable__cell--head\": true,\n \"is-sticky-left\": column.fixed === \"left\",\n \"is-sticky-right\": column.fixed === \"right\",\n \"is-sortable\": column.sort,\n \"has-sticked\": this.cellsStickyLeft.indexOf(index) > -1 \|\| this.cellsStickyRight.indexOf(index) > -1,\n \"has-sorted\": column.key === this.sortBy,\n \"has-sorted-asc\": column.key === this.sortBy && this.sortDirection === \"asc\",\n \"has-sorted-desc\": column.key === this.sortBy && this.sortDirection === \"desc\",\n [`align-${column.align}`]: column.align,\n [`valign-${column.valign}`]: column.valign\n }}\n >\n {column.sort ?\n <button\n class=\"stzh-datatable__sort-button\"\n type=\"button\"\n onClick={() => this.toggleSort(column.key)}\n s-object-id={column.analyticsId \|\| `${column.text} ${this.localization.columnSort}`}\n >\n <span>{column.text}</span>\n <stzh-icon name=\"arrow-up\" class=\"stzh-datatable__sort-icon\" a11yTitle={this.localization.columnSort}></stzh-icon>\n </button>\n :\n <span>{column.text}</span>\n }\n </th>\n )}\n </tr>\n </thead>\n <tbody>\n {this._rowsShown.map((row) =>\n <tr class=\"stzh-datatable__row stzh-datatable__row--body\">\n {this._columns.map((column, index) =>\n <td\n innerHTML={row[column.key]?.text \|\| row[column.key] \|\| \"\"}\n class={{\n \"stzh-datatable__cell stzh-datatable__cell--body\": true,\n \"is-sticky-left\": column.fixed === \"left\",\n \"is-sticky-right\": column.fixed === \"right\",\n \"is-sortable\": column.sort,\n \"has-sticked\": this.cellsStickyLeft.indexOf(index) > -1 \|\| this.cellsStickyRight.indexOf(index) > -1,\n \"has-sorted\": column.key === this.sortBy,\n \"has-sorted-asc\": column.key === this.sortBy && this.sortDirection === \"asc\",\n \"has-sorted-desc\": column.key === this.sortBy && this.sortDirection === \"desc\",\n [`align-${row[column.key]?.align \|\| column.align}`]: row[column.key]?.align \|\| column.align,\n [`valign-${row[column.key]?.valign \|\| column.valign}`]: row[column.key]?.valign \|\| column.valign\n }}\n ></td>\n )}\n </tr>\n )}\n </tbody>\n </table>\n </div>\n </div>\n\n {this.showList &&\n <div class=\"stzh-datatable__list-wrapper\">\n <stzh-card-list>\n {this._rowsShown.map((row) =>\n <stzh-card>\n <stzh-datalist slot=\"content\" direction={\"horizontal\"}>\n {this._columns.map((column) =>\n <stzh-datalist-item\n label={column.text}\n value={row[column.key]?.text \|\| row[column.key] \|\| \"\"}\n ></stzh-datalist-item>\n )}\n </stzh-datalist>\n </stzh-card>\n )}\n </stzh-card-list>\n </div>\n }\n\n {this.pageSize !== null && totalPages > 1 &&\n <div class=\"stzh-datatable__pagination-wrapper\">\n <stzh-pagination\n value={this.page}\n total={totalPages}\n onStzhChange={this.onPaginationChange}\n ></stzh-pagination>\n </div>\n }\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"stzh-datatable.js","sourceRoot":"","sources":["../../../src/components/stzh-datatable/stzh-datatable.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch,\n Method,\n State,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\n\nimport {\n StzhPaginationChangeEvent,\n StzhDatatableRowClickEvent,\n StzhDatatableCellClickEvent,\n StzhDatatableHeadingCellClickEvent,\n StzhDatatableSortClickEvent,\n StzhDatatableSortByChangeEvent,\n StzhDatatableSortDirectionChangeEvent,\n} from \"../../index\";\n\nimport { Document } from 'flexsearch/dist/flexsearch.bundle.js';\n\nimport { StzhDatatableLocalizedText } from './stzh-datatable.localization';\n\n/*\n @slot action-button - Slot for action `stzh-button` element\n /\n@Component({\n tag: \"stzh-datatable\",\n styleUrl: \"stzh-datatable.scss\"\n})\nexport class StzhDatatable {\n /* Table layout /\n @Prop() tableLayout: \"auto\" \| \"fixed\" = \"auto\";\n\n /* Translation strings /\n @Prop() localization: StzhDatatableLocalizedText;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Sort by given column key /\n @Prop({ mutable: true }) sortBy: string = \"\";\n\n /* Sort direction /\n @Prop({ mutable: true }) sortDirection: \"asc\" \| \"desc\" = \"asc\";\n\n /* Tokenize type /\n @Prop() tokenize: \"strict\" \| \"forward\" \| \"reverse\" \| \"full\" = \"forward\";\n\n /* ID field /\n @Prop() idField = \"id\";\n\n / Whether to hide search /\n @Prop({ reflect: true }) hideSearch = false;\n\n /* Whether to show table data as list on mikro breakpoint /\n @Prop({ reflect: true }) showList = false;\n\n /* Current page /\n @Prop({ mutable: true }) page: number = 1;\n\n /* If pagination should be shown, set a number of items to be shown by each page. /\n @Prop() pageSize: number = null;\n\n /\n Whether to disable min-width of the table.\n \n If `false`, the default `min-width` is `700px`\n * If `true`, the `min-width` is `none`, so the table will try to squeeze down content as much as possible.\n \n You can also overwrite the min-width via CSS with the custom property `--min-width`.\n /\n @Prop({ reflect: true }) disableMinWidth: boolean = false;\n\n /\n Array of objects including the row data that must at least include `id` attribute (name can be changed with `idField` property).\n \n Example: [{\"id\":\"1\",\"text\":\"Foo\"}, ...]\n /\n @Prop() rows: any[] \| string = [];\n private _rows: any[];\n private _rowsShown: any[];\n private _rowsFiltered: any[];\n\n /\n Array of objects including the columns data that must include `key` and `text` attribute.\n \n Example: [{ \"key\": \"id\", \"text\": \"ID\", \"align\": \"right\", \"sort\": true, \"fixed\": \"right\", style: { width: \"53px\" } }]\n /\n @Prop() columns: any[] \| string = [];\n private _columns: any[];\n\n @State() query: string = \"\";\n @State() hasScrollLeft: boolean = false;\n @State() hasScrollRight: boolean = false;\n @State() isScrollable: boolean = false;\n @State() cellsStickyLeft: number[] = [];\n @State() cellsStickyRight: number[] = [];\n\n @Element() element: HTMLStzhDatatableElement;\n\n /* Datatable row click event /\n @Event() stzhRowClick: EventEmitter<StzhDatatableRowClickEvent>;\n\n /* Datatable cell click event /\n @Event() stzhCellClick: EventEmitter<StzhDatatableCellClickEvent>;\n\n /* Datatable heading cell click event /\n @Event() stzhHeadingCellClick: EventEmitter<StzhDatatableHeadingCellClickEvent>;\n\n /* Datatable sort click event /\n @Event() stzhSortClick: EventEmitter<StzhDatatableSortClickEvent>;\n\n /* Datatable sort by change event /\n @Event() stzhSortByChange: EventEmitter<StzhDatatableSortByChangeEvent>;\n\n /* Datatable sort direction change event /\n @Event() stzhSortDirectionChange: EventEmitter<StzhDatatableSortDirectionChangeEvent>;\n\n /* Toggle sort by a given column key like when clicking on a column header /\n @Method()\n async toggleSort(columnKey: string) {\n this.page = 1;\n\n if (columnKey === this.sortBy) {\n this.sortDirection = this.sortDirection === \"asc\" ? \"desc\" : \"asc\";\n } else {\n this.sortDirection = \"asc\";\n this.sortBy = columnKey;\n }\n }\n\n @Watch(\"rows\")\n rowsWatcher(newValue: any[] \| string) {\n if (typeof newValue === \"string\") {\n this._rows = JSON.parse(newValue);\n } else {\n this._rows = newValue;\n }\n\n this.buildSearchIndex();\n }\n\n @Watch(\"columns\")\n columnsWatcher(newValue: any[] \| string) {\n if (typeof newValue === \"string\") {\n this._columns = JSON.parse(newValue);\n } else {\n this._columns = newValue;\n }\n\n this.buildSearchIndex();\n }\n\n @Watch(\"sortBy\")\n sortByWatcher(value: string, oldValue: string) {\n this.stzhSortByChange.emit({\n component: \"stzh-datatable\",\n value,\n oldValue\n });\n }\n\n @Watch(\"sortDirection\")\n sortDirectionWatcher(value: \"asc\" \| \"desc\", oldValue: \"asc\" \| \"desc\") {\n this.stzhSortDirectionChange.emit({\n component: \"stzh-datatable\",\n value,\n oldValue\n });\n }\n\n private input: HTMLStzhInputElement;\n private searchIndex: Document;\n private tableWrapper: HTMLDivElement;\n private debounceScroll: number;\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n\n private handleRowClick = (event: MouseEvent, row: any) => {\n this.stzhRowClick.emit({\n component: \"stzh-datatable\",\n row,\n originalEvent: event\n });\n }\n\n private handleCellClick = (event: MouseEvent, row: any, column: any, cellIndex: number, rowIndex: number) => {\n this.stzhCellClick.emit({\n component: \"stzh-datatable\",\n row,\n column,\n cellIndex,\n rowIndex,\n originalEvent: event\n });\n }\n\n private handleHeadingCellClick(event: MouseEvent, column: any, index: number) {\n this.stzhHeadingCellClick.emit({\n component: \"stzh-datatable\",\n column,\n index,\n originalEvent: event\n });\n }\n\n private handleSortClick = (event: MouseEvent, column: any) => {\n this.stzhSortClick.emit({\n component: \"stzh-datatable\",\n column,\n originalEvent: event\n });\n\n this.toggleSort(column.key);\n }\n\n private updateScrollStates = () => {\n if (!this.tableWrapper) {\n return;\n }\n\n const wrapperScrollLeft = this.tableWrapper.scrollLeft;\n const wrapperScrollWidth = this.tableWrapper.scrollWidth;\n const wrapperClientWidth = this.tableWrapper.clientWidth;\n\n this.isScrollable = wrapperScrollWidth > wrapperClientWidth;\n this.hasScrollLeft = wrapperScrollLeft > 0;\n this.hasScrollRight = wrapperScrollLeft < wrapperScrollWidth - wrapperClientWidth;\n\n const rows: HTMLTableRowElement[] = Array.from(this.tableWrapper.querySelectorAll(\"tr\"));\n const firstRow = rows[0];\n\n if (!firstRow) {\n return;\n }\n\n this.cellsStickyLeft = [];\n this.cellsStickyRight = [];\n const cells: Element[] = Array.from(firstRow.children);\n\n cells.forEach((cell: HTMLTableCellElement, index: number) => {\n const offsetLeft = cell.offsetLeft;\n const offsetRight = offsetLeft + cell.offsetWidth;\n\n if (\n this.hasScrollLeft\n && this._columns[index].fixed === \"left\"\n && Math.ceil(wrapperScrollLeft) >= offsetLeft\n ) {\n this.cellsStickyLeft.push(index);\n }\n\n if (\n this.hasScrollRight\n && this._columns[index].fixed === \"right\"\n && Math.ceil(wrapperScrollLeft) + wrapperClientWidth <= offsetRight\n ) {\n this.cellsStickyRight.push(index);\n }\n });\n }\n\n private handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateScrollStates);\n }\n\n private handleScroll = () => {\n if (this.debounceScroll) {\n window.cancelAnimationFrame(this.debounceScroll);\n }\n\n this.debounceScroll = requestAnimationFrame(this.updateScrollStates);\n }\n\n private buildSearchIndex() {\n if (!this._rows \|\| this._rows.length === 0\n \|\| !this._columns \|\| this._columns.length === 0\n ) {\n return;\n }\n\n this.searchIndex = new Document({\n tokenize: this.tokenize,\n matcher: {\n '[äà]': 'a',\n '[öó]': 'o',\n '[üûúù]': 'u',\n '[éè]': 'e'\n },\n document: {\n id: this.idField,\n index: this._columns.map(column => column.key)\n }\n });\n\n this._rows.forEach(row => {\n this.searchIndex.add(row);\n });\n }\n\n private onInputChange = () => {\n this.query = this.input.value;\n }\n\n private onPaginationChange = (event: CustomEvent<StzhPaginationChangeEvent>) => {\n if (event.detail.component === \"stzh-pagination\") {\n this.page = event.detail.page;\n }\n }\n\n async componentWillLoad() {\n this.columnsWatcher(this.columns);\n this.rowsWatcher(this.rows);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datatable\");\n }\n }\n\n componentDidLoad() {\n this.updateScrollStates();\n }\n\n componentWillRender() {\n this._rowsShown = [];\n this._rowsFiltered = [];\n\n if (this.query) {\n let resultIds = [];\n\n this.searchIndex.search(this.query).forEach((result) => {\n resultIds = [...resultIds, ...result.result];\n });\n\n resultIds = resultIds.filter(function (item, pos) {\n return resultIds.indexOf(item) === pos;\n });\n\n this._rows.forEach((row) => {\n if (resultIds.indexOf(row[this.idField]) > -1) {\n this._rowsFiltered.push(row);\n }\n });\n } else {\n this._rowsFiltered = [...this._rows];\n }\n\n if (this.sortBy) {\n const columnConfig = this._columns.find((column) => column.key === this.sortBy);\n const column = columnConfig?.sort?.field \|\| this.sortBy;\n const type = columnConfig?.sort?.type;\n\n this._rowsFiltered.sort((rowA, rowB) => {\n if (type === \"numerical\") {\n if (this.sortDirection === \"asc\") {\n return Number(rowA[column]) - Number(rowB[column]);\n } else {\n return Number(rowB[column]) - Number(rowA[column]);\n }\n } else {\n const comparison = rowA[column].localeCompare(rowB[column])\n return this.sortDirection === \"asc\" ? comparison : comparison / -1;\n }\n });\n }\n\n if (this.pageSize !== null) {\n const pageEnd = this.page this.pageSize;\n this._rowsShown = this._rowsFiltered.slice(pageEnd - this.pageSize, pageEnd);\n } else {\n this._rowsShown = [...this._rowsFiltered];\n }\n }\n\n connectedCallback() {\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const classes = {\n \"stzh-datatable\": true,\n \"is-scrollable\": this.isScrollable,\n \"has-scroll-left\": this.hasScrollLeft,\n \"has-scroll-right\": this.hasScrollRight,\n \"has-scroll-left-shadow\": this.hasScrollLeft && this.cellsStickyLeft.length === 0,\n \"has-scroll-right-shadow\": this.hasScrollRight && this.cellsStickyRight.length === 0,\n \"has-list\": this.showList,\n };\n\n const totalPages = Math.ceil(this._rowsFiltered.length / this.pageSize);\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-datatable__header\">\n <div class=\"stzh-datatable__heading\">\n <slot name=\"heading\"></slot>\n </div>\n <div class=\"stzh-datatable__sub-header\">\n {!this.hideSearch &&\n <stzh-input\n ref={(el) => (this.input = el as HTMLStzhInputElement)}\n class=\"stzh-datatable__search\"\n size=\"small\"\n name=\"stzh-datatable-search\"\n onStzhChange={this.onInputChange}\n label={this.localization.searchLabel}\n ></stzh-input>\n }\n <div class=\"stzh-datatable__action-button\">\n <slot name=\"action-button\"></slot>\n </div>\n </div>\n </div>\n\n <div class=\"stzh-datatable__outer-wrapper\">\n <div\n ref={(el) => (this.tableWrapper = el as HTMLDivElement)}\n class=\"stzh-datatable__wrapper\"\n onScroll={this.handleScroll}\n >\n <table class={{\n \"stzh-datatable__table\": true,\n \"has-layout-fixed\": this.tableLayout === \"fixed\",\n }}>\n <thead class=\"stzh-datatable__thead\">\n <tr class=\"stzh-datatable__row stzh-datatable__row--head\">\n {this._columns.map((column, index) =>\n <th\n onClick={(event) => this.handleHeadingCellClick(event, column, index)}\n style={column.style}\n class={{\n \"stzh-datatable__cell stzh-datatable__cell--head\": true,\n \"is-sticky-left\": column.fixed === \"left\",\n \"is-sticky-right\": column.fixed === \"right\",\n \"is-sortable\": column.sort,\n \"has-sticked\": this.cellsStickyLeft.indexOf(index) > -1 \|\| this.cellsStickyRight.indexOf(index) > -1,\n \"has-sorted\": column.key === this.sortBy,\n \"has-sorted-asc\": column.key === this.sortBy && this.sortDirection === \"asc\",\n \"has-sorted-desc\": column.key === this.sortBy && this.sortDirection === \"desc\",\n [`align-${column.align}`]: column.align,\n [`valign-${column.valign}`]: column.valign\n }}\n >\n {column.sort ?\n <button\n class=\"stzh-datatable__sort-button\"\n type=\"button\"\n onClick={(event) => this.handleSortClick(event, column)}\n s-object-id={column.analyticsId \|\| `${column.text} ${this.localization.columnSort}`}\n >\n <span>{column.text}</span>\n <stzh-icon name=\"arrow-up\" class=\"stzh-datatable__sort-icon\" a11yTitle={this.localization.columnSort}></stzh-icon>\n </button>\n :\n <span>{column.text}</span>\n }\n </th>\n )}\n </tr>\n </thead>\n <tbody>\n {this._rowsShown.map((row, rowIndex) =>\n <tr\n class=\"stzh-datatable__row stzh-datatable__row--body\"\n onClick={(event) => this.handleRowClick(event, row)}\n >\n {this._columns.map((column, index) =>\n <td\n onClick={(event) => this.handleCellClick(event, row, column, index, rowIndex)}\n innerHTML={row[column.key]?.text \|\| row[column.key] \|\| \"\"}\n style={column.style}\n class={{\n \"stzh-datatable__cell stzh-datatable__cell--body\": true,\n \"is-sticky-left\": column.fixed === \"left\",\n \"is-sticky-right\": column.fixed === \"right\",\n \"is-sortable\": column.sort,\n \"has-sticked\": this.cellsStickyLeft.indexOf(index) > -1 \|\| this.cellsStickyRight.indexOf(index) > -1,\n \"has-sorted\": column.key === this.sortBy,\n \"has-sorted-asc\": column.key === this.sortBy && this.sortDirection === \"asc\",\n \"has-sorted-desc\": column.key === this.sortBy && this.sortDirection === \"desc\",\n [`align-${row[column.key]?.align \|\| column.align}`]: row[column.key]?.align \|\| column.align,\n [`valign-${row[column.key]?.valign \|\| column.valign}`]: row[column.key]?.valign \|\| column.valign\n }}\n ></td>\n )}\n </tr>\n )}\n </tbody>\n </table>\n </div>\n </div>\n\n {this.showList &&\n <div class=\"stzh-datatable__list-wrapper\">\n <stzh-card-list>\n {this._rowsShown.map((row) =>\n <stzh-card>\n <stzh-datalist slot=\"content\" direction={\"horizontal\"}>\n {this._columns.map((column) =>\n <stzh-datalist-item\n label={column.text}\n value={row[column.key]?.text \|\| row[column.key] \|\| \"\"}\n ></stzh-datalist-item>\n )}\n </stzh-datalist>\n </stzh-card>\n )}\n </stzh-card-list>\n </div>\n }\n\n {this.pageSize !== null && totalPages > 1 &&\n <div class=\"stzh-datatable__pagination-wrapper\">\n <stzh-pagination\n value={this.page}\n total={totalPages}\n onStzhChange={this.onPaginationChange}\n ></stzh-pagination>\n </div>\n }\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/stzh-datatable/stzh-datatable.stories.js CHANGED Viewed

@@ -19,6 +19,16 @@ export default {
   component: COMPONENT_NAME,
   parameters: {
     layout: 'padded',
+    actions: {
+      handles: [
+        'stzhRowClick',
+        'stzhCellClick',
+        'stzhHeadingCellClick',
+        'stzhSortClick',
+        'stzhSortByChange',
+        'stzhSortDirectionChange'
+      ]
+    },
     docs: {
       description: {
         component: readme
@@ -48,7 +58,7 @@ export const Default = {
   render: (args) => story(args, TEMPLATE),
   args: {
     columns: [
-      { "key": "id", "text": "ID", "align": "right" },
+      { "key": "id", "text": "ID", "align": "right", "sort": { type: 'numerical', field: 'id' } },
       { "key": "theme", "text": "Theme", "sort": true },
       { "key": "text", "text": "Text" },
       { "key": "text2", "text": "Text 2" }
@@ -87,13 +97,14 @@ export const WithList = {
 export const WithPagination = {
   render: (args) => story(args, TEMPLATE),
   args: {
+    'table-layout': 'fixed',
     page: 1,
     'page-size': 2,
     columns: [
-      { "key": "id", "text": "ID", "align": "right" },
-      { "key": "theme", "text": "Theme", "sort": true, "fixed": "left" },
-      { "key": "text", "text": "Text" },
-      { "key": "text2", "text": "Text 2" }
+      { "key": "id", "text": "ID", "align": "right", style: { width: "53px" } },
+      { "key": "theme", "text": "Theme", "sort": true, style: { width: "90px", maxWidth: "90px", overflow: "hidden", textOverflow: "ellipsis" } },
+      { "key": "text", "text": "Text", style: { width: "50%" } },
+      { "key": "text2", "text": "Text 2", style: { width: "50%" } }
     ],
     rows
   }

package/dist/collection/components/stzh-message/stzh-message.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stzh-message.js","sourceRoot":"","sources":["../../../src/components/stzh-message/stzh-message.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,OAAO,EACP,IAAI,EACJ,KAAK,EAEL,MAAM,EACN,KAAK,EACN,MAAM,eAAe,CAAC;AAEvB,OAAO,MAAM,MAAM,WAAW,CAAC;AAM/B,MAAM,gBAAgB,GAAG,+BAA+B,CAAC;AAEzD;;;GAGG;AAMH,MAAM,OAAO,WAAW;;IA4Dd,uBAAkB,GAAG,GAAG,EAAE;MAChC,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC,CAAA;iBA5DuB,EAAE;uBAGI,EAAE;oBAOL,EAAE;gBAG6C,MAAM;qBASnD,KAAK;;gBAcT,IAAI;;EAG7B,KAAK,CAAC,IAAI;IACR,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;MACjB,SAAS,EAAE,cAAc;KAC1B,CAAC,~~CAAA~~;~~EACJ~~,CAAC;EAGD,KAAK,CAAC,IAAI,CAAC,cAAuB,IAAI;IACpC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;MAClB,SAAS,EAAE,cAAc;KAC1B,CAAC,CAAC;IAEH,IAAI,IAAI,CAAC,QAAQ,IAAI,WAAW,EAAE;MAChC,MAAM,CAAC,GAAG,CAAC,GAAG,gBAAgB,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC;KAC3E;EACH,CAAC;EAMD,KAAK,CAAC,iBAAiB;IACrB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,gBAAgB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;MACtE,IAAI,UAAU,EAAE;QACd,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;OAClB;KACF;IAED,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;KAClG;EACH,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;MACpB,gCAAgC,EAAE,IAAI,CAAC,SAAS;MAChD,CAAC,sBAAsB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;MAChD,+DAA+D;KAChE,CAAC;IAEF,OAAO,CACL,EAAC,IAAI,IAAC,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI;MACtB,WAAK,KAAK,EAAE,OAAO;QACjB,WAAK,KAAK,EAAC,uBAAuB;UAChC,WAAK,KAAK,EAAC,4BAA4B;YACrC,iBACE,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EACF,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,WAAW;mBAChC,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,kBAAkB;mBAC7C,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,SAAS;mBACpC,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,mBAAmB,GAEtC,CACT;UACN,WAAK,KAAK,EAAC,4BAA4B;YACrC,WAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,KAAK,CACP;YACN,WAAK,KAAK,EAAC,2BAA2B,IACnC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,eAAa,CAChD;YACN,WAAK,KAAK,EAAC,oBAAoB;cAC7B,YAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACF,CACF;QAEL,CAAC,IAAI,CAAC,SAAS;UACd,mBACE,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,EAClC,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,IAAI,EACd,IAAI,EAAC,OAAO,GACC,CAEb,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Event,\n EventEmitter,\n Method,\n State\n} from \"@stencil/core\";\n\nimport Cookie from \"js-cookie\";\n\nimport { StzhMessageOpenEvent, StzhMessageCloseEvent } from \"../../index\";\n\nimport { StzhMessageLocalizedText } from \"./stzh-message.localization\"\n\nconst KEY_PREFIX_CLOSE = \"stzh-components-message-close\";\n\n/*\n @slot - Slot for description content (use instead of description property)\n * @slot link - Slot for optional stzh-link element\n /\n@Component({\n tag: \"stzh-message\",\n styleUrl: \"stzh-message.scss\",\n scoped: true\n})\nexport class StzhMessage {\n /* Label /\n @Prop() label: string = \"\";\n\n /* Description (use instead of default slot) /\n @Prop() description: string = \"\";\n\n /\n Close cookie name key.\n * Component will check for the cookie (stzh-components-message-close-{name})\n * and if not empty (message already closed before) will hide the message.\n /\n @Prop() closeKey: string = \"\";\n\n /* Type /\n @Prop({ reflect: true }) type: \"info\" \| \"success\" \| \"warning\" \| \"error\" = \"info\"\n\n // high priority variants are currently not allowed to use\n // (discussion will be resumed in relaunch, when colors are a topic)\n\n // /* Prority /\n // @Prop({ reflect: true }) priority: \"default\" \| \"high\" = \"default\";\n\n /* Whether to hide close button /\n @Prop() hideClose: boolean = false;\n\n /* Translation strings. /\n @Prop() localization: StzhMessageLocalizedText;\n\n /* Message open event /\n @Event() stzhOpen: EventEmitter<StzhMessageOpenEvent>;\n\n /* Message close event /\n @Event() stzhClose: EventEmitter<StzhMessageCloseEvent>;\n\n @Element() element: HTMLStzhMessageElement;\n\n /* Open state */\n @State() open: boolean = true;\n\n @Method()\n async show() {\n this.open = true;\n this.stzhOpen.emit({\n component: \"stzh-message\"\n })\n }\n\n @Method()\n async hide(setCloseKey: boolean = true) {\n this.open = false;\n this.stzhClose.emit({\n component: \"stzh-message\"\n });\n\n if (this.closeKey && setCloseKey) {\n Cookie.set(`${KEY_PREFIX_CLOSE}-${this.closeKey}`, Date.now().toString());\n }\n }\n\n private onCloseButtonClick = () => {\n this.hide();\n }\n\n async componentWillLoad() {\n if (this.closeKey) {\n const timeClosed = Cookie.get(`${KEY_PREFIX_CLOSE}-${this.closeKey}`);\n if (timeClosed) {\n this.hide(false);\n }\n }\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"message\");\n }\n }\n\n render() {\n const classes = {\n \"stzh-message\": true,\n \"stzh-message--has-close-hidden\": this.hideClose,\n [`stzh-message--type-${this.type}`]: !!this.type,\n // [`stzh-message--priority-${this.priority}`]: !!this.priority\n };\n\n return (\n <Host hidden={!this.open}>\n <div class={classes}>\n <div class=\"stzh-message__content\">\n <div class=\"stzh-message__icon-wrapper\">\n <stzh-icon\n class=\"stzh-message__icon\"\n name={\n this.type === 'info' && \"info-help\"\n \|\| this.type === 'success' && \"checkmark-circle\"\n \|\| this.type === 'warning' && \"warning\"\n \|\| this.type === 'error' && \"important-warning\"\n }\n ></stzh-icon>\n </div>\n <div class=\"stzh-message__text-wrapper\">\n <div class=\"stzh-message__label\">\n {this.label}\n </div>\n <div class=\"stzh-message__description\">\n {this.description ? this.description : <slot></slot>}\n </div>\n <div class=\"stzh-message__link\">\n <slot name=\"link\"></slot>\n </div>\n </div>\n </div>\n\n {!this.hideClose &&\n <stzh-button\n class=\"stzh-message__close\"\n onClick={this.onCloseButtonClick}\n a11yLabel={this.localization.close}\n variant=\"tertiary\"\n size=\"small\"\n iconOnly={true}\n icon=\"close\"\n ></stzh-button>\n }\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"stzh-message.js","sourceRoot":"","sources":["../../../src/components/stzh-message/stzh-message.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Event,\n EventEmitter,\n Method,\n State\n} from \"@stencil/core\";\n\nimport Cookie from \"js-cookie\";\n\nimport { StzhMessageOpenEvent, StzhMessageCloseEvent } from \"../../index\";\n\nimport { StzhMessageLocalizedText } from \"./stzh-message.localization\"\n\nconst KEY_PREFIX_CLOSE = \"stzh-components-message-close\";\n\n/*\n @slot - Slot for description content (use instead of description property)\n * @slot link - Slot for optional stzh-link element\n /\n@Component({\n tag: \"stzh-message\",\n styleUrl: \"stzh-message.scss\",\n scoped: true\n})\nexport class StzhMessage {\n /* Label /\n @Prop() label: string = \"\";\n\n /* Description (use instead of default slot) /\n @Prop() description: string = \"\";\n\n /\n Close cookie name key.\n * Component will check for the cookie (stzh-components-message-close-{name})\n * and if not empty (message already closed before) will hide the message.\n /\n @Prop() closeKey: string = \"\";\n\n /* Type /\n @Prop({ reflect: true }) type: \"info\" \| \"success\" \| \"warning\" \| \"error\" = \"info\"\n\n // high priority variants are currently not allowed to use\n // (discussion will be resumed in relaunch, when colors are a topic)\n\n // /* Prority /\n // @Prop({ reflect: true }) priority: \"default\" \| \"high\" = \"default\";\n\n /* Whether to hide close button /\n @Prop() hideClose: boolean = false;\n\n /* Translation strings. /\n @Prop() localization: StzhMessageLocalizedText;\n\n /* Message open event /\n @Event() stzhOpen: EventEmitter<StzhMessageOpenEvent>;\n\n /* Message close event /\n @Event() stzhClose: EventEmitter<StzhMessageCloseEvent>;\n\n @Element() element: HTMLStzhMessageElement;\n\n /* Open state */\n @State() open: boolean = true;\n\n @Method()\n async show() {\n this.open = true;\n this.stzhOpen.emit({\n component: \"stzh-message\"\n });\n }\n\n @Method()\n async hide(setCloseKey: boolean = true) {\n this.open = false;\n this.stzhClose.emit({\n component: \"stzh-message\"\n });\n\n if (this.closeKey && setCloseKey) {\n Cookie.set(`${KEY_PREFIX_CLOSE}-${this.closeKey}`, Date.now().toString());\n }\n }\n\n private onCloseButtonClick = () => {\n this.hide();\n }\n\n async componentWillLoad() {\n if (this.closeKey) {\n const timeClosed = Cookie.get(`${KEY_PREFIX_CLOSE}-${this.closeKey}`);\n if (timeClosed) {\n this.hide(false);\n }\n }\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"message\");\n }\n }\n\n render() {\n const classes = {\n \"stzh-message\": true,\n \"stzh-message--has-close-hidden\": this.hideClose,\n [`stzh-message--type-${this.type}`]: !!this.type,\n // [`stzh-message--priority-${this.priority}`]: !!this.priority\n };\n\n return (\n <Host hidden={!this.open}>\n <div class={classes}>\n <div class=\"stzh-message__content\">\n <div class=\"stzh-message__icon-wrapper\">\n <stzh-icon\n class=\"stzh-message__icon\"\n name={\n this.type === 'info' && \"info-help\"\n \|\| this.type === 'success' && \"checkmark-circle\"\n \|\| this.type === 'warning' && \"warning\"\n \|\| this.type === 'error' && \"important-warning\"\n }\n ></stzh-icon>\n </div>\n <div class=\"stzh-message__text-wrapper\">\n <div class=\"stzh-message__label\">\n {this.label}\n </div>\n <div class=\"stzh-message__description\">\n {this.description ? this.description : <slot></slot>}\n </div>\n <div class=\"stzh-message__link\">\n <slot name=\"link\"></slot>\n </div>\n </div>\n </div>\n\n {!this.hideClose &&\n <stzh-button\n class=\"stzh-message__close\"\n onClick={this.onCloseButtonClick}\n a11yLabel={this.localization.close}\n variant=\"tertiary\"\n size=\"small\"\n iconOnly={true}\n icon=\"close\"\n ></stzh-button>\n }\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/stzh-richtext/stzh-richtext.css CHANGED Viewed

@@ -695,6 +695,10 @@
   width: 100%;
   border-spacing: 0;
   min-width: var(--min-width);
+  /* Fixed layout */
+}
+:host ::slotted(*) table.has-layout-fixed {
+  table-layout: fixed;
 }
 :host ::slotted(*) thead {
   position: -webkit-sticky;

package/dist/collection/components/stzh-skin-portal-mitwirken/stzh-skin-portal-mitwirken.css CHANGED Viewed

@@ -1500,6 +1500,10 @@ main table {
   width: 100%;
   border-spacing: 0;
   min-width: var(--min-width);
+  /* Fixed layout */
+}
+main table.has-layout-fixed {
+  table-layout: fixed;
 }
 main thead {
   position: -webkit-sticky;
@@ -3465,6 +3469,10 @@ main .ql-editor table {
   width: 100%;
   border-spacing: 0;
   min-width: var(--min-width);
+  /* Fixed layout */
+}
+main .ql-editor table.has-layout-fixed {
+  table-layout: fixed;
 }
 main .ql-editor thead {
   position: -webkit-sticky;

package/dist/collection/components/stzh-skin-storybook-preview/stzh-skin-storybook-preview.css CHANGED Viewed

@@ -905,6 +905,11 @@
   width: 100%;
   border-spacing: 0;
   min-width: var(--min-width);
+  /* Fixed layout */
+}
+.sbdocs-content > table.has-layout-fixed,
+.sbdocs-content > div > table.has-layout-fixed {
+  table-layout: fixed;
 }
 .sbdocs-content > thead,
 .sbdocs-content > div > thead {

package/dist/collection/components/stzh-table/stzh-table.css CHANGED Viewed

@@ -204,6 +204,7 @@ stzh-table[disable-min-width]:not([disable-min-width=false]) {
 }
 .stzh-table__header .stzh-table__search {
   flex-grow: 1;
+  margin-right: var(--stzh-space-medium);
 }
 @media screen and (min-width: 600px) {
   .stzh-table__header .stzh-table__search {
@@ -213,9 +214,7 @@ stzh-table[disable-min-width]:not([disable-min-width=false]) {
 }
 .stzh-table__action-button {
   flex-shrink: 0;
-}
-.stzh-table__action-button:not(:empty) {
-  margin-left: var(--stzh-space-medium);
+  margin-left: auto;
 }
 .stzh-table__outer-wrapper {
   position: relative;
@@ -277,6 +276,10 @@ stzh-table[disable-min-width]:not([disable-min-width=false]) {
   width: 100%;
   border-spacing: 0;
   min-width: var(--min-width);
+  /* Fixed layout */
+}
+.stzh-table table.has-layout-fixed {
+  table-layout: fixed;
 }
 .stzh-table thead {
   position: -webkit-sticky;