@duetds/components 8.0.6 → 8.1.0

package/lib/collection/components/duet-editable-table/duet-editable-table.js

@@ -1,519 +1,522 @@
 /*!
  * Built with Duet Design System
  */
-import { h, Host } from "@stencil/core";
+import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { fieldSorter } from "../../utils/js-utils";
 import { isKeyboardClick } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 import { TableData } from "./duet-editable-table-tabledata";
 export class DuetEditableTable {
-  constructor() {
-    this.hasHeadSlotFirst = false;
-    this.hasHeadSlotLast = false;
-    this.hasFootSlot = false;
-    this.sortableDefaultLabel = {
-      fi: "Järjestä",
-      en: "Click to sort",
-      sv: "Klicka för att sortera",
-    };
-    this.actionColumnLabel = {
-      en: "Actions for rows",
-      fi: "Toiminnot rivillä",
-      sv: "Åtgärder för rader",
-    };
+    constructor() {
+        this.hasHeadSlotFirst = false;
+        this.hasHeadSlotLast = false;
+        this.hasFootSlot = false;
+        this.sortableDefaultLabel = {
+            fi: "Järjestä",
+            en: "Click to sort",
+            sv: "Klicka för att sortera",
+        };
+        this.actionColumnLabel = {
+            en: "Actions for rows",
+            fi: "Toiminnot rivillä",
+            sv: "Åtgärder för rader",
+        };
+        /**
+         * Private methods.
+         */
+        this.toggleColumn = (column, e) => {
+            e.preventDefault();
+            const { sort_order, direction, index, key } = column;
+            this.duetTableToggle.emit({
+                sort_order,
+                index,
+                direction,
+                key,
+                component: "duet-editable-table",
+                originalEvent: e,
+            });
+        };
+        this.handleKeyDown = (column, e) => {
+            if (isKeyboardClick(e)) {
+                this.toggleColumn(column, e);
+            }
+        };
+        this.language = getLanguage();
+        this.margin = "auto";
+        this.variation = "striped";
+        this.sticky = false;
+        this.stickyDistance = "with-links";
+        this.breakpoint = "small";
+        this.actions = undefined;
+        this.columns = undefined;
+        this.rows = undefined;
+        this.sortable = false;
+        this.groupId = "";
+        this.theme = "";
+        this.accessibleRole = undefined;
+        this.hideHeadVisually = false;
+    }
     /**
-     * Private methods.
+     * Component lifecycle events.
      */
-    this.toggleColumn = (column, e) => {
-      e.preventDefault();
-      const { sort_order, direction, index, key } = column;
-      this.duetTableToggle.emit({
-        sort_order,
-        index,
-        direction,
-        key,
-        component: "duet-editable-table",
-        originalEvent: e,
-      });
-    };
-    this.handleKeyDown = (column, e) => {
-      if (isKeyboardClick(e)) {
-        this.toggleColumn(column, e);
-      }
-    };
-    this.language = getLanguage();
-    this.margin = "auto";
-    this.variation = "striped";
-    this.sticky = false;
-    this.stickyDistance = "with-links";
-    this.breakpoint = "small";
-    this.actions = undefined;
-    this.columns = undefined;
-    this.rows = undefined;
-    this.sortable = false;
-    this.groupId = "";
-    this.theme = "";
-    this.accessibleRole = undefined;
-    this.hideHeadVisually = false;
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    inheritGlobalTheme(this);
-    this.hasHeadSlotFirst = !!this.element.querySelector("[slot='thead-first']");
-    this.hasHeadSlotLast = !!this.element.querySelector("[slot='thead-last']");
-    this.hasFootSlot = !!this.element.querySelector("[slot='tfoot']");
-  }
-  connectedCallback() {
-    connectLanguageChangeObserver(this);
-  }
-  disconnectedCallback() {
-    disconnectLanguageChangeObserver(this);
-  }
-  createLabel(column) {
-    const { sort_order, direction, index, label } = column;
-    const i18nLabel = getLocaleString(label);
-    if (!this.sortable) {
-      return i18nLabel;
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+        this.hasHeadSlotFirst = !!this.element.querySelector("[slot='thead-first']");
+        this.hasHeadSlotLast = !!this.element.querySelector("[slot='thead-last']");
+        this.hasFootSlot = !!this.element.querySelector("[slot='tfoot']");
     }
-    const getButtonIcon = () => {
-      // "action-subtract-small" https://cdn.duetds.com/api/icons/2.2.12/lib/assets/action-subtract-small.svg
-      // "action-arrow-down-small" https://cdn.duetds.com/api/icons/2.2.12/lib/assets/action-arrow-down-small.svg
-      // "action-arrow-up-small" https://cdn.duetds.com/api/icons/2.2.12/lib/assets/action-arrow-up-small.svg
-      if (!!sort_order && direction === 1) {
-        return "action-arrow-down-small";
-      }
-      else if (!!sort_order && direction === -1) {
-        return "action-arrow-up-small";
-      }
-      return "action-subtract-small";
-    };
-    return (h("span", { class: "duet-table-label", "data-index": index }, h("duet-button", { size: "small", icon: getButtonIcon(), "icon-size": "medium-small", "accessible-label": this.sortableDefaultLabel[this.language], variation: "plain", margin: "none", "icon-right": true, onClick: event => this.toggleColumn(column, event), onKeyDown: event => this.handleKeyDown(column, event) }, i18nLabel)));
-  }
-  getSortedColumns() {
-    //create a new array from sort instead of mutating original
-    return [...this.columns].sort(fieldSorter(["index"]));
-  }
-  getRowSortOrder() {
-    //create a new array from sort instead of mutating original
-    const fields = [...this.columns].sort(fieldSorter(["sort_order"]));
-    //return only key from objects that have sort_order
-    return fields
-      .filter(column => column.sort_order)
-      .map(column => {
-      // add - in-front of descending direction (required by field-sorter)
-      return column.direction === -1 ? `-${column.key}` : column.key;
-    });
-  }
-  renderTableHeader() {
-    if (!this.columns) {
-      return;
+    connectedCallback() {
+        connectLanguageChangeObserver(this);
     }
-    const sortedColumns = this.getSortedColumns();
-    return (h("tr", { class: {
-        "duet-table-action-header": !!this.actions,
-      } }, sortedColumns.map(column => {
-      if (column.display !== false) {
-        const label = this.createLabel(column);
-        return label !== "" ? h("th", { scope: "col" }, label) : h("td", null);
-      }
-    }), this.actions && (h("th", { scope: "col", class: "duet-table-action-header-heading" }, this.actions && h("duet-visually-hidden", null, this.actionColumnLabel[this.language])))));
-  }
-  renderActions(rowItem, index) {
-    // escape early
-    if (!this.actions) {
-      return;
+    disconnectedCallback() {
+        disconnectLanguageChangeObserver(this);
     }
-    // iterate through actions and add them in the sidebar
-    return (h("td", { class: "duet-text-right" }, this.actions.map(actionItem => {
-      return (h("duet-action-button", { actionMeta: Object.assign({}, (rowItem === null || rowItem === void 0 ? void 0 : rowItem.meta) || {}, { index }), actionId: (rowItem === null || rowItem === void 0 ? void 0 : rowItem.uid) || (rowItem === null || rowItem === void 0 ? void 0 : rowItem.id) || null, actionName: actionItem.name, theme: this.theme, iconName: actionItem.icon, iconColor: actionItem.color, iconSize: actionItem.size, background: actionItem.background, "accessible-label": `${rowItem.actionDescription || ""} ${getLocaleString(actionItem.label)} ` }));
-    })));
-  }
-  renderTableBody() {
-    const columns = this.getSortedColumns();
-    const rowSortOrder = this.getRowSortOrder();
-    const sortedRows = [...this.rows].sort(fieldSorter(rowSortOrder));
-    // return a tbody with rows for each item in sortedRows
-    return sortedRows.map((row, index) => (h("tr", { class: {
-        "duet-table-action-row": !!this.actions,
-        "duet-editable-table-row": true,
-        [`duet-editable-table-row-${this.groupId}`]: true,
-      }, "data-meta": JSON.stringify(row.meta) }, columns.map(column => {
-      //if we don't have any data for this column, try getting an item instead (for backwards compatibility
-      const value = row[column.key] ? row[column.key] : row.item;
-      if (column.display !== false) {
-        return h(TableData, { data: value, groupId: this.groupId });
-      }
-    }), this.actions && this.renderActions(row, index))));
-  }
-  /**
-   * Render Methods
-   */
-  render() {
-    return (h(Host, { class: {
-        [`duet-editable-table-${this.variation}`]: true,
-        "duet-editable-table": true,
-        [`duet-editable-table-${this.theme}`]: true,
-        // sticky only valid when in regular table layout
-        "duet-editable-table-scrollable": this.breakpoint === "none-scrollable",
-        "duet-editable-table-sortable": this.sortable,
-        "duet-editable-table-actions": !!this.actions,
-        "duet-m-0": this.margin === "none",
-        "duet-theme-turva": this.theme === "turva",
-      } }, h("duet-table", { class: "duet-editable-table-table", sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint, "hide-head-visually": this.hideHeadVisually }, h("table", { role: this.accessibleRole }, h("caption", null, h("slot", { name: "tcaption" })), h("thead", null, this.hasHeadSlotFirst && (h("tr", null, h("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { name: "thead-first" })))), this.renderTableHeader(), this.hasHeadSlotLast && (h("tr", null, h("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { name: "thead-last" }))))), h("tbody", null, this.renderTableBody()), this.hasFootSlot && (h("tfoot", null, h("tr", null, h("td", { class: "duet-editable-table-footer-menu", colSpan: 99 }, h("slot", { name: "tfoot" })))))))));
-  }
-  static get is() { return "duet-editable-table"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["duet-editable-table.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["duet-editable-table.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "margin": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetMargin",
-          "resolved": "\"auto\" | \"none\"",
-          "references": {
-            "DuetMargin": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetMargin"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Duet-table: margin of the component."
-        },
-        "attribute": "margin",
-        "reflect": false,
-        "defaultValue": "\"auto\""
-      },
-      "variation": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetTableVariant",
-          "resolved": "\"fixed\" | \"plain\" | \"striped\"",
-          "references": {
-            "DuetTableVariant": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetTableVariant"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Duet-table: Style variation of the table."
-        },
-        "attribute": "variation",
-        "reflect": false,
-        "defaultValue": "\"striped\""
-      },
-      "sticky": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Duet-table: Controls whether the table has a sticky header.\nSticky headers are not compatible with breakpoint=\"none-scrollable\"."
-        },
-        "attribute": "sticky",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "stickyDistance": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetTableStickyDistance",
-          "resolved": "\"none\" | \"with-links\" | \"without-links\"",
-          "references": {
-            "DuetTableStickyDistance": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetTableStickyDistance"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Duet-table: Adjust the distance from top of the viewport (in pixels) when the\ntable header becomes sticky."
-        },
-        "attribute": "sticky-distance",
-        "reflect": false,
-        "defaultValue": "\"with-links\""
-      },
-      "breakpoint": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetTableBreakpoint",
-          "resolved": "\"large\" | \"medium\" | \"none\" | \"none-scrollable\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\"",
-          "references": {
-            "DuetTableBreakpoint": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetTableBreakpoint"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Duet-table: By default the table is responsive - it will be flattened at narrow viewport widths.\nThis prop controls the breakpoint at which the table should be rendered as a _regular_ table.\nSet to \"none\" to disable the responsive functionality.\nSet to \"none-scrollable\" to disable responsive functionality _and_ allow horizontal scrolling -\nthis is useful for comparison tables where it's important to maintain column and row layout."
-        },
-        "attribute": "breakpoint",
-        "reflect": false,
-        "defaultValue": "\"small\""
-      },
-      "actions": {
-        "type": "unknown",
-        "mutable": true,
-        "complexType": {
-          "original": "DuetEditableTableActions",
-          "resolved": "{ icon: string; color: string; background: string; size: DuetActionButtonIconSize; name: string; map?: string[]; label?: DuetLangObject; }[]",
-          "references": {
-            "DuetEditableTableActions": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
-              "id": "src/components/duet-editable-table/duet-editable-table.tsx::DuetEditableTableActions"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "undefined"
-            }],
-          "text": "Define actions for all items in a table\nAn alternative to inline HTML table.\nrequired for Sortable tables"
-        },
-        "defaultValue": "undefined"
-      },
-      "columns": {
-        "type": "unknown",
-        "mutable": true,
-        "complexType": {
-          "original": "DuetEditableTableColumns",
-          "resolved": "DuetEditableTableColumn[]",
-          "references": {
-            "DuetEditableTableColumns": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
-              "id": "src/components/duet-editable-table/duet-editable-table.tsx::DuetEditableTableColumns"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "undefined"
-            }],
-          "text": "Define columns for a table\nAn alternative to inline HTML table.\nrequired for Sortable tables"
-        },
-        "defaultValue": "undefined"
-      },
-      "rows": {
-        "type": "unknown",
-        "mutable": true,
-        "complexType": {
-          "original": "DuetEditableTableRows",
-          "resolved": "Record<string, any>[]",
-          "references": {
-            "DuetEditableTableRows": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
-              "id": "src/components/duet-editable-table/duet-editable-table.tsx::DuetEditableTableRows"
+    createLabel(column) {
+        const { sort_order, direction, index, label } = column;
+        const i18nLabel = getLocaleString(label);
+        if (!this.sortable) {
+            return i18nLabel;
+        }
+        const getButtonIcon = () => {
+            // "action-subtract-small" https://cdn.duetds.com/api/icons/2.2.12/lib/assets/action-subtract-small.svg
+            // "action-arrow-down-small" https://cdn.duetds.com/api/icons/2.2.12/lib/assets/action-arrow-down-small.svg
+            // "action-arrow-up-small" https://cdn.duetds.com/api/icons/2.2.12/lib/assets/action-arrow-up-small.svg
+            if (!!sort_order && direction === 1) {
+                return "action-arrow-down-small";
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "undefined"
-            }],
-          "text": "Define rows for a table\nAn alternative to inline HTML table.\nrequired for Sortable tables"
-        },
-        "defaultValue": "undefined"
-      },
-      "sortable": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Controls whether the table is sortable by headers"
-        },
-        "attribute": "sortable",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "groupId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Optional id that get passed to the table and used to setup ::parts"
-        },
-        "attribute": "group-id",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "theme": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "DuetTheme",
-          "resolved": "\"\" | \"default\" | \"turva\"",
-          "references": {
-            "DuetTheme": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetTheme"
+            else if (!!sort_order && direction === -1) {
+                return "action-arrow-up-small";
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Theme of the table."
-        },
-        "attribute": "theme",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "accessibleRole": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Exposes the aria role for optimizing accessibility."
-        },
-        "attribute": "accessible-role",
-        "reflect": false,
-        "defaultValue": "undefined"
-      },
-      "hideHeadVisually": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Hide a thead section visually. The content is still available to screen readers."
-        },
-        "attribute": "hide-head-visually",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "language": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "duetTableToggle",
-        "name": "duetTableToggle",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event emitted when table is sortable and a header item is clicked/enter is pressed"
-        },
-        "complexType": {
-          "original": "DuetTableToggleEvent",
-          "resolved": "{ component: \"duet-editable-table\"; sort_order?: number; direction: 1 | -1; index: number; key: string; originalEvent: KeyboardEvent | MouseEvent; }",
-          "references": {
-            "DuetTableToggleEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
-              "id": "src/components/duet-editable-table/duet-editable-table.tsx::DuetTableToggleEvent"
+            return "action-subtract-small";
+        };
+        return (h("span", { class: "duet-table-label", "data-index": index }, h("duet-button", { size: "small", icon: getButtonIcon(), "icon-size": "medium-small", "accessible-label": this.sortableDefaultLabel[this.language], variation: "plain", margin: "none", "icon-right": true, onClick: event => this.toggleColumn(column, event), onKeyDown: event => this.handleKeyDown(column, event) }, i18nLabel)));
+    }
+    getSortedColumns() {
+        //create a new array from sort instead of mutating original
+        return [...this.columns].sort(fieldSorter(["index"]));
+    }
+    getRowSortOrder() {
+        //create a new array from sort instead of mutating original
+        const fields = [...this.columns].sort(fieldSorter(["sort_order"]));
+        //return only key from objects that have sort_order
+        return fields
+            .filter(column => column.sort_order)
+            .map(column => {
+            // add - in-front of descending direction (required by field-sorter)
+            return column.direction === -1 ? `-${column.key}` : column.key;
+        });
+    }
+    renderTableHeader() {
+        if (!this.columns) {
+            return;
+        }
+        const sortedColumns = this.getSortedColumns();
+        return (h("tr", { class: {
+                "duet-table-action-header": !!this.actions,
+            } }, sortedColumns.map(column => {
+            if (column.display !== false) {
+                const label = this.createLabel(column);
+                return label !== "" ? h("th", { scope: "col" }, label) : h("td", null);
             }
-          }
+        }), this.actions && (h("th", { scope: "col", class: "duet-table-action-header-heading" }, this.actions && h("duet-visually-hidden", null, this.actionColumnLabel[this.language])))));
+    }
+    renderActions(rowItem, index) {
+        // escape early
+        if (!this.actions) {
+            return;
         }
-      }, {
-        "method": "duetMenuClick",
-        "name": "duetMenuClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event emitted when table is sortable and a header item is clicked/enter is pressed"
-        },
-        "complexType": {
-          "original": "DuetTableMenuEvent",
-          "resolved": "{ component: \"duet-editable-table\"; originalEvent: KeyboardEvent | MouseEvent; }",
-          "references": {
-            "DuetTableMenuEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
-              "id": "src/components/duet-editable-table/duet-editable-table.tsx::DuetTableMenuEvent"
+        // iterate through actions and add them in the sidebar
+        return (h("td", { class: "duet-text-right" }, this.actions.map(actionItem => {
+            return (h("duet-action-button", { actionMeta: Object.assign({}, (rowItem === null || rowItem === void 0 ? void 0 : rowItem.meta) || {}, { index }), actionId: (rowItem === null || rowItem === void 0 ? void 0 : rowItem.uid) || (rowItem === null || rowItem === void 0 ? void 0 : rowItem.id) || null, actionName: actionItem.name, theme: this.theme, iconName: actionItem.icon, iconColor: actionItem.color, iconSize: actionItem.size, background: actionItem.background, "accessible-label": `${rowItem.actionDescription || ""} ${getLocaleString(actionItem.label)} ` }));
+        })));
+    }
+    renderTableBody() {
+        const columns = this.getSortedColumns();
+        const rowSortOrder = this.getRowSortOrder();
+        const sortedRows = [...this.rows].sort(fieldSorter(rowSortOrder));
+        // return a tbody with rows for each item in sortedRows
+        return sortedRows.map((row, index) => (h("tr", { class: {
+                "duet-table-action-row": !!this.actions,
+                "duet-editable-table-row": true,
+                [`duet-editable-table-row-${this.groupId}`]: true,
+            }, "data-meta": JSON.stringify(row.meta) }, columns.map(column => {
+            //if we don't have any data for this column, try getting an item instead (for backwards compatibility
+            const value = row[column.key] ? row[column.key] : row.item;
+            if (column.display !== false) {
+                return h(TableData, { data: value, groupId: this.groupId });
             }
-          }
+        }), this.actions && this.renderActions(row, index))));
+    }
+    /**
+     * Render Methods
+     */
+    render() {
+        if (Build.isServer) {
+            return;
         }
-      }];
-  }
-  static get elementRef() { return "element"; }
+        return (h(Host, { class: {
+                [`duet-editable-table-${this.variation}`]: true,
+                "duet-editable-table": true,
+                [`duet-editable-table-${this.theme}`]: true,
+                // sticky only valid when in regular table layout
+                "duet-editable-table-scrollable": this.breakpoint === "none-scrollable",
+                "duet-editable-table-sortable": this.sortable,
+                "duet-editable-table-actions": !!this.actions,
+                "duet-m-0": this.margin === "none",
+                "duet-theme-turva": this.theme === "turva",
+            } }, h("duet-table", { class: "duet-editable-table-table", sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint, "hide-head-visually": this.hideHeadVisually }, h("table", { role: this.accessibleRole }, h("caption", null, h("slot", { name: "tcaption" })), h("thead", null, this.hasHeadSlotFirst && (h("tr", null, h("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { name: "thead-first" })))), this.renderTableHeader(), this.hasHeadSlotLast && (h("tr", null, h("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { name: "thead-last" }))))), h("tbody", null, this.renderTableBody()), this.hasFootSlot && (h("tfoot", null, h("tr", null, h("td", { class: "duet-editable-table-footer-menu", colSpan: 99 }, h("slot", { name: "tfoot" })))))))));
+    }
+    static get is() { return "duet-editable-table"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["duet-editable-table.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["duet-editable-table.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "margin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetMargin",
+                    "resolved": "\"auto\" | \"none\"",
+                    "references": {
+                        "DuetMargin": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetMargin"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Duet-table: margin of the component."
+                },
+                "attribute": "margin",
+                "reflect": false,
+                "defaultValue": "\"auto\""
+            },
+            "variation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetTableVariant",
+                    "resolved": "\"fixed\" | \"plain\" | \"striped\"",
+                    "references": {
+                        "DuetTableVariant": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTableVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Duet-table: Style variation of the table."
+                },
+                "attribute": "variation",
+                "reflect": false,
+                "defaultValue": "\"striped\""
+            },
+            "sticky": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Duet-table: Controls whether the table has a sticky header.\nSticky headers are not compatible with breakpoint=\"none-scrollable\"."
+                },
+                "attribute": "sticky",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "stickyDistance": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetTableStickyDistance",
+                    "resolved": "\"none\" | \"with-links\" | \"without-links\"",
+                    "references": {
+                        "DuetTableStickyDistance": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTableStickyDistance"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Duet-table: Adjust the distance from top of the viewport (in pixels) when the\ntable header becomes sticky."
+                },
+                "attribute": "sticky-distance",
+                "reflect": false,
+                "defaultValue": "\"with-links\""
+            },
+            "breakpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetTableBreakpoint",
+                    "resolved": "\"large\" | \"medium\" | \"none\" | \"none-scrollable\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\"",
+                    "references": {
+                        "DuetTableBreakpoint": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTableBreakpoint"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Duet-table: By default the table is responsive - it will be flattened at narrow viewport widths.\nThis prop controls the breakpoint at which the table should be rendered as a _regular_ table.\nSet to \"none\" to disable the responsive functionality.\nSet to \"none-scrollable\" to disable responsive functionality _and_ allow horizontal scrolling -\nthis is useful for comparison tables where it's important to maintain column and row layout."
+                },
+                "attribute": "breakpoint",
+                "reflect": false,
+                "defaultValue": "\"small\""
+            },
+            "actions": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetEditableTableActions",
+                    "resolved": "{ icon: string; color: string; background: string; size: DuetActionButtonIconSize; name: string; map?: string[]; label?: DuetLangObject; }[]",
+                    "references": {
+                        "DuetEditableTableActions": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
+                            "id": "src/components/duet-editable-table/duet-editable-table.tsx::DuetEditableTableActions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "Define actions for all items in a table\nAn alternative to inline HTML table.\nrequired for Sortable tables"
+                },
+                "defaultValue": "undefined"
+            },
+            "columns": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetEditableTableColumns",
+                    "resolved": "DuetEditableTableColumn[]",
+                    "references": {
+                        "DuetEditableTableColumns": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
+                            "id": "src/components/duet-editable-table/duet-editable-table.tsx::DuetEditableTableColumns"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "Define columns for a table\nAn alternative to inline HTML table.\nrequired for Sortable tables"
+                },
+                "defaultValue": "undefined"
+            },
+            "rows": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetEditableTableRows",
+                    "resolved": "Record<string, any>[]",
+                    "references": {
+                        "DuetEditableTableRows": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
+                            "id": "src/components/duet-editable-table/duet-editable-table.tsx::DuetEditableTableRows"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "Define rows for a table\nAn alternative to inline HTML table.\nrequired for Sortable tables"
+                },
+                "defaultValue": "undefined"
+            },
+            "sortable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls whether the table is sortable by headers"
+                },
+                "attribute": "sortable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "groupId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional id that get passed to the table and used to setup ::parts"
+                },
+                "attribute": "group-id",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "theme": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetTheme",
+                    "resolved": "\"\" | \"default\" | \"turva\"",
+                    "references": {
+                        "DuetTheme": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme of the table."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "accessibleRole": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Exposes the aria role for optimizing accessibility."
+                },
+                "attribute": "accessible-role",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "hideHeadVisually": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide a thead section visually. The content is still available to screen readers."
+                },
+                "attribute": "hide-head-visually",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "language": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "duetTableToggle",
+                "name": "duetTableToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when table is sortable and a header item is clicked/enter is pressed"
+                },
+                "complexType": {
+                    "original": "DuetTableToggleEvent",
+                    "resolved": "{ component: \"duet-editable-table\"; sort_order?: number; direction: 1 | -1; index: number; key: string; originalEvent: KeyboardEvent | MouseEvent; }",
+                    "references": {
+                        "DuetTableToggleEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
+                            "id": "src/components/duet-editable-table/duet-editable-table.tsx::DuetTableToggleEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "duetMenuClick",
+                "name": "duetMenuClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when table is sortable and a header item is clicked/enter is pressed"
+                },
+                "complexType": {
+                    "original": "DuetTableMenuEvent",
+                    "resolved": "{ component: \"duet-editable-table\"; originalEvent: KeyboardEvent | MouseEvent; }",
+                    "references": {
+                        "DuetTableMenuEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
+                            "id": "src/components/duet-editable-table/duet-editable-table.tsx::DuetTableMenuEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "element"; }
 }