@oiz/stzh-components 0.0.1-pretest → 1.4.0-npmjstest

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

@@ -1,413 +1,413 @@
-import { Host, h } from "@stencil/core";
-import { Document } from 'flexsearch';
-import { fetchTranslations } from "../../utils/translation-utils";
-/**
- *
- */
-export class StzhDatatable {
-  constructor() {
-    /** Label */
-    this.label = "";
-    /** Sort by given column key */
-    this.sortBy = "";
-    /** Sort direction */
-    this.sortDirection = "asc";
-    /** Tokenize type */
-    this.tokenize = "forward";
-    /** ID field */
-    this.idField = "id";
-    /** Rows */
-    this.rows = [];
-    /** Columns */
-    this.columns = [];
-    this.query = "";
-    this.hasScrollLeft = false;
-    this.hasScrollRight = false;
-    this.isScrollable = false;
-    this.cellsStickyLeft = [];
-    this.cellsStickyRight = [];
-    this.updateScrollStates = () => {
-      if (!this.tableWrapper) {
-        return;
-      }
-      const wrapperScrollLeft = this.tableWrapper.scrollLeft;
-      const wrapperScrollWidth = this.tableWrapper.scrollWidth;
-      const wrapperClientWidth = this.tableWrapper.clientWidth;
-      this.isScrollable = wrapperScrollWidth > wrapperClientWidth;
-      this.hasScrollLeft = wrapperScrollLeft > 0;
-      this.hasScrollRight = wrapperScrollLeft < wrapperScrollWidth - wrapperClientWidth;
-      const rows = Array.from(this.tableWrapper.querySelectorAll("tr"));
-      const firstRow = rows[0];
-      if (!firstRow) {
-        return;
-      }
-      this.cellsStickyLeft = [];
-      this.cellsStickyRight = [];
-      const cells = Array.from(firstRow.children);
-      cells.forEach((cell, index) => {
-        const offsetLeft = cell.offsetLeft;
-        const offsetRight = offsetLeft + cell.offsetWidth;
-        if (this.hasScrollLeft
-          && this._columns[index].fixed === "left"
-          && Math.ceil(wrapperScrollLeft) >= offsetLeft) {
-          this.cellsStickyLeft.push(index);
-        }
-        if (this.hasScrollRight
-          && this._columns[index].fixed === "right"
-          && Math.ceil(wrapperScrollLeft) + wrapperClientWidth <= offsetRight) {
-          this.cellsStickyRight.push(index);
-        }
-      });
-    };
-    this.handleScroll = () => {
-      if (this.debounceScroll) {
-        window.cancelAnimationFrame(this.debounceScroll);
-      }
-      this.debounceScroll = requestAnimationFrame(this.updateScrollStates);
-    };
-    this.onInputChange = () => {
-      this.query = this.input.value;
-    };
-  }
-  /** Toggle sort by a given column key like when clicking on a column header */
-  async toggleSort(columnKey) {
-    if (columnKey === this.sortBy) {
-      this.sortDirection = this.sortDirection === "asc" ? "desc" : "asc";
-    }
-    else {
-      this.sortDirection = "asc";
-      this.sortBy = columnKey;
-    }
-  }
-  rowsWatcher(newValue) {
-    if (typeof newValue === "string") {
-      this._rows = JSON.parse(newValue);
-    }
-    else {
-      this._rows = newValue;
-    }
-    this.buildSearchIndex();
-  }
-  columnsWatcher(newValue) {
-    if (typeof newValue === "string") {
-      this._columns = JSON.parse(newValue);
-    }
-    else {
-      this._columns = newValue;
-    }
-    this.buildSearchIndex();
-  }
-  handleResize() {
-    this.updateScrollStates();
-  }
-  buildSearchIndex() {
-    if (!this._rows || this._rows.length === 0
-      || !this._columns || this._columns.length === 0) {
-      return;
-    }
-    this.searchIndex = new Document({
-      tokenize: this.tokenize,
-      matcher: {
-        '[äà]': 'a',
-        '[öó]': 'o',
-        '[üûúù]': 'u',
-        '[éè]': 'e'
-      },
-      document: {
-        id: this.idField,
-        index: this._columns.map(column => column.key)
-      }
-    });
-    this._rows.forEach(row => {
-      this.searchIndex.add(row);
-    });
-  }
-  async componentWillLoad() {
-    this.columnsWatcher(this.columns);
-    this.rowsWatcher(this.rows);
-    if (!this.localization) {
-      this.localization = await fetchTranslations(this.element, 'datatable');
-    }
-  }
-  componentDidLoad() {
-    this.updateScrollStates();
-  }
-  componentWillRender() {
-    this._rowsManaged = [];
-    if (this.query) {
-      let resultIds = [];
-      this.searchIndex.search(this.query).forEach((result) => {
-        resultIds = [...resultIds, ...result.result];
-      });
-      resultIds = resultIds.filter(function (item, pos) {
-        return resultIds.indexOf(item) === pos;
-      });
-      this._rows.forEach((row) => {
-        if (resultIds.indexOf(row[this.idField]) > -1) {
-          this._rowsManaged.push(row);
-        }
-      });
-    }
-    else {
-      this._rowsManaged = [...this._rows];
-    }
-    if (this.sortBy) {
-      this._rowsManaged.sort((rowA, rowB) => {
-        const comparison = rowA[this.sortBy].localeCompare(rowB[this.sortBy]);
-        return this.sortDirection === "asc" ? comparison : comparison / -1;
-      });
-    }
-  }
-  render() {
-    const classes = {
-      "stzh-datatable": true,
-      "is-scrollable": this.isScrollable,
-      "has-scroll-left": this.hasScrollLeft,
-      "has-scroll-right": this.hasScrollRight,
-      "has-scroll-left-shadow": this.hasScrollLeft && this.cellsStickyLeft.length === 0,
-      "has-scroll-right-shadow": this.hasScrollRight && this.cellsStickyRight.length === 0
-    };
-    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("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__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: {
-        "stzh-datatable__cell stzh-datatable__cell--head": true,
-        "is-sticky-left": column.fixed === "left",
-        "is-sticky-right": column.fixed === "right",
-        "is-sortable": column.sort,
-        "has-sticked": this.cellsStickyLeft.indexOf(index) > -1 || this.cellsStickyRight.indexOf(index) > -1,
-        "has-sorted": column.key === this.sortBy,
-        "has-sorted-asc": column.key === this.sortBy && this.sortDirection === "asc",
-        "has-sorted-desc": column.key === this.sortBy && this.sortDirection === "desc",
-        [`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) }, h("span", null, column.text), h("stzh-icon", { name: "arrow-up", class: "stzh-datatable__sort-icon" }))
-      :
-        h("span", null, column.text))))), h("tbody", null, this._rowsManaged.map((row) => h("tr", { class: "stzh-datatable__row stzh-datatable__row--body" }, 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: {
-          "stzh-datatable__cell stzh-datatable__cell--body": true,
-          "is-sticky-left": column.fixed === "left",
-          "is-sticky-right": column.fixed === "right",
-          "is-sortable": column.sort,
-          "has-sticked": this.cellsStickyLeft.indexOf(index) > -1 || this.cellsStickyRight.indexOf(index) > -1,
-          "has-sorted": column.key === this.sortBy,
-          "has-sorted-asc": column.key === this.sortBy && this.sortDirection === "asc",
-          "has-sorted-desc": column.key === this.sortBy && this.sortDirection === "desc",
-          [`align-${((_b = row[column.key]) === null || _b === void 0 ? void 0 : _b.align) || column.align}`]: ((_c = row[column.key]) === null || _c === void 0 ? void 0 : _c.align) || column.align,
-          [`valign-${((_d = row[column.key]) === null || _d === void 0 ? void 0 : _d.valign) || column.valign}`]: ((_e = row[column.key]) === null || _e === void 0 ? void 0 : _e.valign) || column.valign
-        } });
-    }))))))))));
-  }
-  static get is() { return "stzh-datatable"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["stzh-datatable.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["stzh-datatable.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "localization": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "StzhDatatableLocalizedText",
-          "resolved": "StzhLocaleComponent & { searchLabel: string; }",
-          "references": {
-            "StzhDatatableLocalizedText": {
-              "location": "import",
-              "path": "./stzh-datatable.localization"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Translation strings"
-        }
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Label"
-        },
-        "attribute": "label",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "sortBy": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Sort by given column key"
-        },
-        "attribute": "sort-by",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "sortDirection": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "\"asc\" | \"desc\"",
-          "resolved": "\"asc\" | \"desc\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Sort direction"
-        },
-        "attribute": "sort-direction",
-        "reflect": false,
-        "defaultValue": "\"asc\""
-      },
-      "tokenize": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"strict\" | \"forward\" | \"reverse\" | \"full\"",
-          "resolved": "\"forward\" | \"full\" | \"reverse\" | \"strict\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Tokenize type"
-        },
-        "attribute": "tokenize",
-        "reflect": false,
-        "defaultValue": "\"forward\""
-      },
-      "idField": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "ID field"
-        },
-        "attribute": "id-field",
-        "reflect": false,
-        "defaultValue": "\"id\""
-      },
-      "rows": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "any[] | string",
-          "resolved": "any[] | string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Rows"
-        },
-        "attribute": "rows",
-        "reflect": false,
-        "defaultValue": "[]"
-      },
-      "columns": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "any[] | string",
-          "resolved": "any[] | string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Columns"
-        },
-        "attribute": "columns",
-        "reflect": false,
-        "defaultValue": "[]"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "query": {},
-      "hasScrollLeft": {},
-      "hasScrollRight": {},
-      "isScrollable": {},
-      "cellsStickyLeft": {},
-      "cellsStickyRight": {}
-    };
-  }
-  static get methods() {
-    return {
-      "toggleSort": {
-        "complexType": {
-          "signature": "(columnKey: string) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Toggle sort by a given column key like when clicking on a column header",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "rows",
-        "methodName": "rowsWatcher"
-      }, {
-        "propName": "columns",
-        "methodName": "columnsWatcher"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
-}
+import { Host, h } from "@stencil/core";
+import { Document } from 'flexsearch';
+import { fetchTranslations } from "../../utils/translation-utils";
+/**
+ *
+ */
+export class StzhDatatable {
+  constructor() {
+    /** Label */
+    this.label = "";
+    /** Sort by given column key */
+    this.sortBy = "";
+    /** Sort direction */
+    this.sortDirection = "asc";
+    /** Tokenize type */
+    this.tokenize = "forward";
+    /** ID field */
+    this.idField = "id";
+    /** Rows */
+    this.rows = [];
+    /** Columns */
+    this.columns = [];
+    this.query = "";
+    this.hasScrollLeft = false;
+    this.hasScrollRight = false;
+    this.isScrollable = false;
+    this.cellsStickyLeft = [];
+    this.cellsStickyRight = [];
+    this.updateScrollStates = () => {
+      if (!this.tableWrapper) {
+        return;
+      }
+      const wrapperScrollLeft = this.tableWrapper.scrollLeft;
+      const wrapperScrollWidth = this.tableWrapper.scrollWidth;
+      const wrapperClientWidth = this.tableWrapper.clientWidth;
+      this.isScrollable = wrapperScrollWidth > wrapperClientWidth;
+      this.hasScrollLeft = wrapperScrollLeft > 0;
+      this.hasScrollRight = wrapperScrollLeft < wrapperScrollWidth - wrapperClientWidth;
+      const rows = Array.from(this.tableWrapper.querySelectorAll("tr"));
+      const firstRow = rows[0];
+      if (!firstRow) {
+        return;
+      }
+      this.cellsStickyLeft = [];
+      this.cellsStickyRight = [];
+      const cells = Array.from(firstRow.children);
+      cells.forEach((cell, index) => {
+        const offsetLeft = cell.offsetLeft;
+        const offsetRight = offsetLeft + cell.offsetWidth;
+        if (this.hasScrollLeft
+          && this._columns[index].fixed === "left"
+          && Math.ceil(wrapperScrollLeft) >= offsetLeft) {
+          this.cellsStickyLeft.push(index);
+        }
+        if (this.hasScrollRight
+          && this._columns[index].fixed === "right"
+          && Math.ceil(wrapperScrollLeft) + wrapperClientWidth <= offsetRight) {
+          this.cellsStickyRight.push(index);
+        }
+      });
+    };
+    this.handleScroll = () => {
+      if (this.debounceScroll) {
+        window.cancelAnimationFrame(this.debounceScroll);
+      }
+      this.debounceScroll = requestAnimationFrame(this.updateScrollStates);
+    };
+    this.onInputChange = () => {
+      this.query = this.input.value;
+    };
+  }
+  /** Toggle sort by a given column key like when clicking on a column header */
+  async toggleSort(columnKey) {
+    if (columnKey === this.sortBy) {
+      this.sortDirection = this.sortDirection === "asc" ? "desc" : "asc";
+    }
+    else {
+      this.sortDirection = "asc";
+      this.sortBy = columnKey;
+    }
+  }
+  rowsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._rows = JSON.parse(newValue);
+    }
+    else {
+      this._rows = newValue;
+    }
+    this.buildSearchIndex();
+  }
+  columnsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._columns = JSON.parse(newValue);
+    }
+    else {
+      this._columns = newValue;
+    }
+    this.buildSearchIndex();
+  }
+  handleResize() {
+    this.updateScrollStates();
+  }
+  buildSearchIndex() {
+    if (!this._rows || this._rows.length === 0
+      || !this._columns || this._columns.length === 0) {
+      return;
+    }
+    this.searchIndex = new Document({
+      tokenize: this.tokenize,
+      matcher: {
+        '[äà]': 'a',
+        '[öó]': 'o',
+        '[üûúù]': 'u',
+        '[éè]': 'e'
+      },
+      document: {
+        id: this.idField,
+        index: this._columns.map(column => column.key)
+      }
+    });
+    this._rows.forEach(row => {
+      this.searchIndex.add(row);
+    });
+  }
+  async componentWillLoad() {
+    this.columnsWatcher(this.columns);
+    this.rowsWatcher(this.rows);
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, 'datatable');
+    }
+  }
+  componentDidLoad() {
+    this.updateScrollStates();
+  }
+  componentWillRender() {
+    this._rowsManaged = [];
+    if (this.query) {
+      let resultIds = [];
+      this.searchIndex.search(this.query).forEach((result) => {
+        resultIds = [...resultIds, ...result.result];
+      });
+      resultIds = resultIds.filter(function (item, pos) {
+        return resultIds.indexOf(item) === pos;
+      });
+      this._rows.forEach((row) => {
+        if (resultIds.indexOf(row[this.idField]) > -1) {
+          this._rowsManaged.push(row);
+        }
+      });
+    }
+    else {
+      this._rowsManaged = [...this._rows];
+    }
+    if (this.sortBy) {
+      this._rowsManaged.sort((rowA, rowB) => {
+        const comparison = rowA[this.sortBy].localeCompare(rowB[this.sortBy]);
+        return this.sortDirection === "asc" ? comparison : comparison / -1;
+      });
+    }
+  }
+  render() {
+    const classes = {
+      "stzh-datatable": true,
+      "is-scrollable": this.isScrollable,
+      "has-scroll-left": this.hasScrollLeft,
+      "has-scroll-right": this.hasScrollRight,
+      "has-scroll-left-shadow": this.hasScrollLeft && this.cellsStickyLeft.length === 0,
+      "has-scroll-right-shadow": this.hasScrollRight && this.cellsStickyRight.length === 0
+    };
+    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("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__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: {
+        "stzh-datatable__cell stzh-datatable__cell--head": true,
+        "is-sticky-left": column.fixed === "left",
+        "is-sticky-right": column.fixed === "right",
+        "is-sortable": column.sort,
+        "has-sticked": this.cellsStickyLeft.indexOf(index) > -1 || this.cellsStickyRight.indexOf(index) > -1,
+        "has-sorted": column.key === this.sortBy,
+        "has-sorted-asc": column.key === this.sortBy && this.sortDirection === "asc",
+        "has-sorted-desc": column.key === this.sortBy && this.sortDirection === "desc",
+        [`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) }, h("span", null, column.text), h("stzh-icon", { name: "arrow-up", class: "stzh-datatable__sort-icon" }))
+      :
+        h("span", null, column.text))))), h("tbody", null, this._rowsManaged.map((row) => h("tr", { class: "stzh-datatable__row stzh-datatable__row--body" }, 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: {
+          "stzh-datatable__cell stzh-datatable__cell--body": true,
+          "is-sticky-left": column.fixed === "left",
+          "is-sticky-right": column.fixed === "right",
+          "is-sortable": column.sort,
+          "has-sticked": this.cellsStickyLeft.indexOf(index) > -1 || this.cellsStickyRight.indexOf(index) > -1,
+          "has-sorted": column.key === this.sortBy,
+          "has-sorted-asc": column.key === this.sortBy && this.sortDirection === "asc",
+          "has-sorted-desc": column.key === this.sortBy && this.sortDirection === "desc",
+          [`align-${((_b = row[column.key]) === null || _b === void 0 ? void 0 : _b.align) || column.align}`]: ((_c = row[column.key]) === null || _c === void 0 ? void 0 : _c.align) || column.align,
+          [`valign-${((_d = row[column.key]) === null || _d === void 0 ? void 0 : _d.valign) || column.valign}`]: ((_e = row[column.key]) === null || _e === void 0 ? void 0 : _e.valign) || column.valign
+        } });
+    }))))))))));
+  }
+  static get is() { return "stzh-datatable"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-datatable.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-datatable.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhDatatableLocalizedText",
+          "resolved": "StzhLocaleComponent & { searchLabel: string; }",
+          "references": {
+            "StzhDatatableLocalizedText": {
+              "location": "import",
+              "path": "./stzh-datatable.localization"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings"
+        }
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label"
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "sortBy": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sort by given column key"
+        },
+        "attribute": "sort-by",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "sortDirection": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "\"asc\" | \"desc\"",
+          "resolved": "\"asc\" | \"desc\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sort direction"
+        },
+        "attribute": "sort-direction",
+        "reflect": false,
+        "defaultValue": "\"asc\""
+      },
+      "tokenize": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"strict\" | \"forward\" | \"reverse\" | \"full\"",
+          "resolved": "\"forward\" | \"full\" | \"reverse\" | \"strict\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tokenize type"
+        },
+        "attribute": "tokenize",
+        "reflect": false,
+        "defaultValue": "\"forward\""
+      },
+      "idField": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "ID field"
+        },
+        "attribute": "id-field",
+        "reflect": false,
+        "defaultValue": "\"id\""
+      },
+      "rows": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "any[] | string",
+          "resolved": "any[] | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Rows"
+        },
+        "attribute": "rows",
+        "reflect": false,
+        "defaultValue": "[]"
+      },
+      "columns": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "any[] | string",
+          "resolved": "any[] | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Columns"
+        },
+        "attribute": "columns",
+        "reflect": false,
+        "defaultValue": "[]"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "query": {},
+      "hasScrollLeft": {},
+      "hasScrollRight": {},
+      "isScrollable": {},
+      "cellsStickyLeft": {},
+      "cellsStickyRight": {}
+    };
+  }
+  static get methods() {
+    return {
+      "toggleSort": {
+        "complexType": {
+          "signature": "(columnKey: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Toggle sort by a given column key like when clicking on a column header",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "rows",
+        "methodName": "rowsWatcher"
+      }, {
+        "propName": "columns",
+        "methodName": "columnsWatcher"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}