q2-tecton-elements 1.51.0 → 1.52.0

package/dist/q2-tecton-elements/q2-data-table.entry.js

@@ -0,0 +1,622 @@
+import { r as t, c as e, h as a, F as o, g as r } from "./index-7a5365e2.js";
+
+import { m as l, l as n } from "./index-d18e2a20.js";
+
+const c = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.container{--comp-cell-padding:var(--tct-data-table-cell-padding, var(--tct-table-cell-padding, var(--app-scale-3x, 15px)));--comp-select-column-width:var(--tct-data-table-select-column-width, var(--tct-table-select-column-width, var(--tct-checkbox-size, 20px)));--comp-dropdown-column-width:var(--tct-data-table-dropdown-column-width, var(--tct-table-dropdown-column-width, var(--tct-btn-icon-width, 44px)));--comp-expandable-row-control-column-width:var(--tct-data-table-expandable-row-control-column-width, var(--tct-table-expandable-row-control-column-width, var(--tct-btn-icon-width, 44px)));overflow:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.container::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.container::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.container::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}:host([shadowed]:not([shadowed=false])) .container{box-shadow:var(--tct-data-table-shadow, var(--tct-table-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}:host([density=compact]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-compact, var(--tct-table-cell-padding-compact, var(--app-scale-1x, 5px)))}:host([density=comfortable]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-comfortable, var(--tct-table-cell-padding-comfortable, var(--app-scale-5x, 25px)))}table{table-layout:var(--tct-data-table-layout, var(--tct-table-layout, auto));border-collapse:collapse;border-spacing:0;width:var(--tct-data-table-width, var(--tct-table-width));min-width:100%;background:var(--tct-data-table-background, var(--tct-table-background, var(--t-base, #ffffff)));caption-side:var(--tct-data-table-caption-side, var(--tct-table-caption-side, bottom))}thead{border-width:var(--tct-data-table-header-border-width, var(--tct-table-header-border-width, 0 0 2px 0));border-style:var(--tct-data-table-header-border-style, var(--tct-table-header-border-style, solid));border-color:var(--tct-data-table-header-border-color, var(--tct-table-header-border-color, var(--t-gray-9, #999999)));background:var(--tct-data-table-header-background, var(--tct-table-header-background))}col.select-column{width:var(--comp-select-column-width)}col.expandable-row-control-column{width:var(--comp-expandable-row-control-column-width)}col.dropdown-column{width:var(--comp-dropdown-column-width)}:host(:is([bordered=vertical],[bordered=grid])) col{border-width:var(--tct-data-table-column-border-width, 0 1px 0 0);border-style:var(--tct-data-table-column-border-style, solid);border-color:var(--tct-data-table-column-border-color, var(--t-gray-9, #999999))}:host(:is([bordered=vertical],[bordered=grid])) col:last-child{border:none}td,th{padding:var(--comp-cell-padding);text-align:start;vertical-align:middle}td.align-end,th.align-end{text-align:end}td.align-center,th.align-center{text-align:center}td.vertical-align-top,th.vertical-align-top{vertical-align:top}td.vertical-align-bottom,th.vertical-align-bottom{vertical-align:bottom}th .header-content{font-weight:var(--tct-data-table-header-font-weight, var(--tct-table-header-font-weight, 600));font-size:var(--tct-data-table-header-font-size, var(--app-font-size, 14px))}th.sorted .header-content{font-weight:var(--tct-data-table-header-sorted-font-weight, var(--tct-table-header-sorted-font-weight, 600))}th .sorted-indicator{--comp-header-sortable-icon-size:var(--tct-data-table-header-sortable-icon-size, var(--tct-table-header-sortable-icon-size, var(--app-scale-3x, 15px)));--tct-icon-stroke-width:2;width:var(--comp-header-sortable-icon-size);height:var(--comp-header-sortable-icon-size)}th .sorted-indicator.direction-ASC{transform:rotate(180deg)}th q2-btn .header-content{display:flex;align-items:center;gap:var(--tct-data-table-header-content-gap, var(--tct-table-header-content-gap, var(--app-scale-2x, 10px)))}tr.expandable,tr.clickable{cursor:pointer}tr.expandable:focus,tr.clickable:focus{outline:none;box-shadow:none}tr.striped:nth-child(even){background:var(--tct-data-table-row-even-background, var(--t-gray-14, #f2f2f2))}tr.striped:nth-child(odd){background:var(--tct-data-table-row-odd-background, transparent)}tr.expandable:hover{background:var(--tct-data-table-expandable-row-hover-background, var(--tct-table-expandable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.clickable:hover{background:var(--tct-data-table-clickable-row-hover-background, var(--tct-table-clickable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.selected{background:var(--tct-data-table-selected-row-background, var(--tct-table-selected-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded .toggle-expandable-row{transform:rotate(180deg)}:host(:is([bordered],[bordered=horizontal],[bordered=grid]):not([bordered=vertical],[bordered=false])) tbody tr{border-width:var(--tct-data-table-row-border-width, var(--tct-table-row-border-width, 0 0 1px 0));border-style:var(--tct-data-table-row-border-style, var(--tct-table-row-border-style, solid));border-color:var(--tct-data-table-row-border-color, var(--tct-table-row-border-color, var(--t-gray-9, #999999)))}tr.loading-row{background:var(--tct-data-table-loading-row-background, var(--tct-table-loading-row-background, var(--t-base, #ffffff)))}tr.loading-row td{text-align:center}tr.loading-row q2-loading{font-size:4em}tr.empty-state{background:var(--tct-data-table-loading-row-background, var(--t-base, #ffffff))}tr.empty-state td{text-align:center}tr.empty-state .empty-state-content{display:flex;flex-direction:column;align-items:center;padding-top:var(--app-scale-10x, 50px);padding-bottom:var(--app-scale-10x, 50px);gap:var(--app-scale-4x, 20px);--tct-icon-size:var(--app-scale-6x, 30px)}tr.expandable-row{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}td.clamped div{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--comp-line-clamp-count, 1);-webkit-box-orient:vertical}td.expandable-row-control-column{--tct-btn-icon-hover-bg:transparent;padding:var(--tct-data-table-expandable-row-control-column-padding, var(--tct-table-expandable-row-control-column-padding, 0 5px));text-align:center}td.dropdown-column{padding:var(--tct-data-table-dropdown-column-padding, var(--tct-table-dropdown-column-padding, 0 5px));text-align:center}td.click-column:not(.sr){padding:var(--tct-data-table-clickable-column-padding, var(--tct-table-clickable-column-padding, 0 5px));text-align:center}caption{padding:var(--tct-data-table-caption-padding, var(--tct-table-caption-padding, var(--app-scale-2x, 10px)));font-size:var(--tct-data-table-caption-font-size, var(--tct-table-caption-font-size, inherit));font-weight:var(--tct-data-table-caption-font-weight, var(--tct-table-caption-font-weight, 600));text-align:var(--tct-data-table-caption-text-align, var(--tct-table-caption-text-align, center));color:var(--tct-data-table-caption-color, var(--tct-table-caption-color, inherit))}q2-checkbox{padding:0}";
+
+const d = c;
+
+const i = class {
+  constructor(a) {
+    t(this, a);
+    this.click = e(this, "click", 7);
+    this.select = e(this, "select", 7);
+    this.selectAllRows = e(this, "selectAllRows", 7);
+    this.sort = e(this, "sort", 7);
+    this.toggle = e(this, "toggle", 7);
+    this.checkSlots = () => {
+      var t, e, a, o;
+      this.hasExpandableRows = !!((e = (t = this.hostElement) === null || t === void 0 ? void 0 : t.querySelector(`[slot$="-expandable-content"]`)) !== null && e !== void 0 ? e : false);
+      this.hasDropdowns = !!((o = (a = this.hostElement) === null || a === void 0 ? void 0 : a.querySelector(`[slot$="-dropdown"]`)) !== null && o !== void 0 ? o : false);
+      // The booleans above may not change, even if the slot has content
+      // So we increment this property to force a re-render and ensure proper rendering
+            this.checkSlotCount += 1;
+    };
+    this.onClickRow = (t, e) => {
+      t.stopPropagation();
+      this.click.emit({
+        row: e
+      });
+    };
+    this.onClickTableRow = (t, e) => {
+      if (this.clickable) {
+        this.onClickRow(t, e);
+      } else if (this.hasExpandableRows) {
+        this.onToggleRow(t, e);
+      }
+    };
+    this.onControlContainerClick = t => {
+      t.stopPropagation();
+    };
+    this.onSelectRow = (t, e) => {
+      t.stopPropagation();
+      const {selectMode: a, serializedRows: o, selectedRows: r} = this;
+      const {checked: l} = t.detail;
+      const n = Object.assign(Object.assign({}, e), {
+        selected: l
+      });
+      let c;
+      if (a === "single") {
+        c = l ? [ n ] : [];
+      } else {
+        c = l ? [ ...r, n ] : r.filter((t => t.id !== n.id));
+      }
+      const d = c.length === o.length;
+      const i = !d && c.length > 0;
+      const s = this.select.emit({
+        row: n,
+        rows: c,
+        allSelected: d
+      });
+      if (s.defaultPrevented) return;
+      this.serializedRows = this.serializedRows.map((t => t.id === n.id ? n : t));
+      this.allRowsSelected = d;
+      this.someRowsSelected = i;
+    };
+    this.onSort = t => {
+      const e = t.sorted === "ASC" ? "DESC" : "ASC";
+      const a = t.key;
+      const o = this.sort.emit({
+        header: t,
+        direction: e
+      });
+      if (o.defaultPrevented) return;
+      const r = t.sortable !== "manual";
+      if (!r) return;
+      this.serializedHeaders = this.serializedHeaders.map((t => {
+        const o = a === t.key ? e : undefined;
+        return Object.assign(Object.assign({}, t), {
+          sorted: o
+        });
+      }));
+      this.serializedRows = this.sortRows(this.serializedRows, Object.assign(Object.assign({}, t), {
+        sorted: e
+      }));
+    };
+    this.onToggleRow = (t, e) => {
+      t.stopPropagation();
+      const a = Object.assign(Object.assign({}, e), {
+        expanded: !e.expanded
+      });
+      const o = this.toggle.emit({
+        row: a
+      });
+      if (o.defaultPrevented) return;
+      this.serializedRows = this.serializedRows.map((t => {
+        if (t.id === a.id) return a; else return Object.assign({}, t);
+      }));
+    };
+    this.allRowsSelected = false;
+    this.checkSlotCount = 0;
+    this.hasDropdowns = false;
+    this.hasExpandableRows = false;
+    this.hasRowData = false;
+    this.serializedHeaders = [];
+    this.serializedRows = [];
+    this.someRowsSelected = false;
+    this.bordered = undefined;
+    this.caption = undefined;
+    this.clickable = undefined;
+    this.density = undefined;
+    this.emptyIcon = "inbox";
+    this.emptyMessage = "tecton.element.dataTable.emptyMessage";
+    this.headers = undefined;
+    this.hideCaption = undefined;
+    this.hideClickable = undefined;
+    this.loading = undefined;
+    this.rows = undefined;
+    this.selectable = undefined;
+    this.selectMode = "multiple";
+    this.shadowed = undefined;
+    this.striped = undefined;
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  disconnectedCallback() {
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+      this.mutationObserver = null;
+    }
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+  }
+  componentWillLoad() {
+    this.headersHandler(this.headers);
+    this.rowsHandler(this.rows);
+  }
+  componentDidLoad() {
+    if (typeof MutationObserver !== "undefined") {
+      const t = new MutationObserver((() => this.checkSlots()));
+      t.observe(this.hostElement, {
+        childList: true,
+        subtree: true,
+        attributes: true
+      });
+      this.mutationObserver = t;
+    }
+    if (typeof ResizeObserver !== "undefined") {
+      this.resizeObserver = new ResizeObserver((() => l()));
+      this.resizeObserver.observe(this.hostElement);
+    }
+  }
+  // #endregion
+  // #region Listeners
+  onClickListener(t) {
+    if (t instanceof PointerEvent) t.stopImmediatePropagation();
+  }
+  onSelectAllRows(t) {
+    t.stopPropagation();
+    const {checked: e} = t.detail;
+    const a = e ? this.serializedRows.map((t => {
+      if (t.disabled) {
+        return t;
+      } else {
+        return Object.assign(Object.assign({}, t), {
+          selected: e
+        });
+      }
+    })) : [];
+    const o = this.select.emit({
+      row: undefined,
+      rows: a,
+      allSelected: e
+    });
+    if (o.defaultPrevented) return;
+    this.serializedRows = this.serializedRows.map((t => {
+      if (t.disabled) return t;
+      t.selected = e;
+      return t;
+    }));
+    this.allRowsSelected = e;
+    this.someRowsSelected = false;
+  }
+  // #endregion
+  // #region Public Methods API
+  /**
+     * A method to click a row that accepts a row ID that is will be clicked.
+     *
+     * @testOnly
+     */
+  async clickRow(t) {
+    const e = this.hostElement.shadowRoot.querySelector(`#row-${t} q2-btn[test-id="clickable-row-control"]`);
+    e === null || e === void 0 ? void 0 : e.click();
+  }
+  /**
+     * A method that returns the plain text value of a particular cell (including slot content).
+     *
+     * @testOnly
+     */  async getCellContent(t, e) {
+    var a, o;
+    const r = (a = this.hostElement.querySelector(`[slot=row-${t}-cell-${e}`)) === null || a === void 0 ? void 0 : a.textContent;
+    const l = (o = this.hostElement.shadowRoot.querySelector(`slot[name=row-${t}-cell-${e}]`)) === null || o === void 0 ? void 0 : o.textContent;
+    return r || l || "";
+  }
+  /**
+     * A method to sort a column that accepts a header object with key</b> and <b>sorted</b> property.
+     *
+     * @testOnly
+     */  async sortColumn(t) {
+    const e = this.hostElement.shadowRoot.querySelector(`#header-${t.key} q2-btn[test-id="sort-control"]`);
+    e === null || e === void 0 ? void 0 : e.click();
+  }
+  /**
+     * A method to toggle row expansion that accepts a row ID that will be clicked to expand or collapse the expandable content
+     *
+     * @testOnly
+     */  async toggleRowExpansion(t) {
+    const e = this.hostElement.shadowRoot.querySelector(`#row-${t} q2-btn[test-id="expandable-row-control"]`);
+    e === null || e === void 0 ? void 0 : e.click();
+  }
+  /**
+     * A method to toggle row selection that accepts a row ID whose checkbox will be checked, if the feature is enabled.
+     *
+     * @testOnly
+     */  async toggleRowSelect(t) {
+    const e = this.hostElement.shadowRoot.querySelector(`#row-${t} q2-checkbox[test-id="select-row-control"]`);
+    e === null || e === void 0 ? void 0 : e.click();
+  }
+  /**
+     * A method to toggle select all button (checkbox) on left top corner.
+     *
+     * @testOnly
+     */  async toggleSelectAllRows() {
+    if (!this.selectable) return;
+    const t = this.hostElement.shadowRoot.querySelector(`q2-checkbox[test-id="select-all-rows-control"]`);
+    t === null || t === void 0 ? void 0 : t.click();
+  }
+  // #endregion
+  // #region Watchers
+  headersHandler(t = []) {
+    this.serializedHeaders = t.map((t => {
+      const {title: e} = t;
+      let {key: a} = t;
+      // If no key is provided, generate one from the title
+            if (!a) a = e.toLowerCase().replace(/\s/g, "-");
+      return Object.assign({
+        key: a
+      }, t);
+    }));
+  }
+  rowsHandler(t = []) {
+    const {serializedHeaders: e, mappedHeaders: a} = this;
+    const o = {
+      id: null,
+      cells: {},
+      selected: false,
+      expanded: false,
+      disabled: false
+    };
+    // tracks if the select-all checkbox should be visually updated as the `rows` are built
+        let r = true;
+    let l = false;
+    const n = t.map((({id: t, cells: e, selected: n, expanded: c, disabled: d}) => {
+      const i = Object.entries(e).reduce(((t, [e, o]) => {
+        const r = a[e] || {};
+        const {align: l, type: n = "text", lineClamp: c, verticalAlign: d} = r;
+        const i = "type" in r && r.type === "badge";
+        const s = {
+          value: "",
+          ariaLabel: undefined,
+          type: n,
+          align: l,
+          lineClamp: c,
+          verticalAlign: d,
+          badgeStatus: i ? r.badgeStatus : undefined,
+          badgeTheme: i ? r.badgeTheme : undefined
+        };
+        const b = typeof o === "object" ? Object.assign(Object.assign({}, s), o) : Object.assign(Object.assign({}, s), {
+          value: o
+        });
+        t[e] = b;
+        return t;
+      }), {});
+      if (r && !n) r = false;
+      if (!r && n) l = true;
+      return Object.assign(Object.assign({}, o), {
+        id: t,
+        selected: !!n,
+        expanded: !!c,
+        disabled: !!d,
+        cells: i
+      });
+    }));
+    const c = e.find((({sorted: t}) => t));
+    const d = !!c && c.sortable !== "manual";
+    this.hasRowData = !!t.length;
+    this.allRowsSelected = this.hasRowData && r;
+    this.someRowsSelected = this.hasRowData && l;
+    this.serializedRows = !!d ? this.sortRows(n, c) : n;
+    this.checkSlots();
+  }
+  selectableHandler() {
+    if (this.selectable === false) {
+      this.selectAllRows.emit({
+        checked: false
+      });
+    }
+  }
+  // #endregion
+  // #region Local Methods
+  get mappedHeaders() {
+    return this.serializedHeaders.reduce(((t, e) => {
+      t[e.key] = e;
+      return t;
+    }), {});
+  }
+  get numberOfColumns() {
+    var t, e;
+    return ((e = (t = this.serializedHeaders) === null || t === void 0 ? void 0 : t.length) !== null && e !== void 0 ? e : 0) + (this.selectable ? 1 : 0) + (this.clickable ? 1 : 0) + (this.hasExpandableRows ? 1 : 0) + (this.hasDropdowns ? 1 : 0);
+  }
+  get selectedRow() {
+    return this.selectedRows.find((({selected: t}) => !!t));
+  }
+  get selectedRows() {
+    return this.serializedRows.filter((({selected: t}) => t));
+  }
+  sortRows(t, e) {
+    const {key: a, sorted: o} = e;
+    const r = o || "ASC";
+    const l = [ ...t ].sort(((t, e) => {
+      const o = t.cells[a].value;
+      const l = e.cells[a].value;
+      if (o < l) return r === "ASC" ? -1 : 1;
+      if (o > l) return r === "ASC" ? 1 : -1;
+      return 0;
+    }));
+    return l;
+  }
+  // #endregion
+  // #region Render Methods
+  render() {
+    const {caption: t} = this;
+    return a("div", {
+      key: "3b83513a749562f7d9787103e4bad96b281da690",
+      class: "container"
+    }, a("table", {
+      key: "61142600c24e4dba06d9bcf06a0abdc5e424997c"
+    }, t && a("caption", {
+      key: "db2048dcbd52e6f2bc892634be354d2fe8fc4560",
+      class: this.hideCaption ? "sr" : undefined
+    }, t), this.renderTableColGroup(), this.renderTableHeader(), this.renderEmptyState(), this.renderTableRows()));
+  }
+  renderCellContent(t) {
+    if (!t) return;
+    const {type: e, ariaLabel: o, value: r} = t;
+    if ([ undefined, null ].includes(r)) return;
+    switch (e) {
+     case "badge":
+      let e;
+      switch (typeof r) {
+       case "string":
+        e = parseFloat(r);
+        break;
+
+       case "boolean":
+        e = r ? 1 : 0;
+        break;
+
+       default:
+        e = r;
+        break;
+      }
+      return a("q2-badge", {
+        "aria-label": o,
+        value: e,
+        theme: t.badgeTheme,
+        status: t.badgeStatus,
+        size: "large"
+      });
+
+     case "icon":
+      const l = typeof r === "string" ? r : `${r}`;
+      return a("q2-icon", {
+        label: o,
+        type: l
+      });
+
+     case "boolean":
+      return !!r ? a("q2-icon", {
+        label: n("tecton.element.dataTable.booleanTrue"),
+        type: "checkmark"
+      }) : a("div", {
+        "aria-label": n("tecton.element.dataTable.booleanFalse")
+      });
+
+     case "code":
+      return a("code", {
+        "aria-label": o
+      }, r);
+
+     default:
+      return a("div", {
+        "aria-label": o
+      }, r);
+    }
+  }
+  renderEmptyState() {
+    const {hasRowData: t, numberOfColumns: e, emptyIcon: o, emptyMessage: r, loading: l} = this;
+    if (t || l) return null;
+    return a("tbody", null, a("tr", {
+      class: "empty-state"
+    }, a("td", {
+      colSpan: e
+    }, a("slot", {
+      name: "empty-table"
+    }, a("div", {
+      class: "empty-state-content"
+    }, a("q2-icon", {
+      type: o
+    }), a("p", null, n(r)))))));
+  }
+  renderTableColGroup() {
+    const {serializedHeaders: t, selectable: e, clickable: o, hasExpandableRows: r, hasDropdowns: l} = this;
+    if (!t.length) return null;
+    return a("colgroup", null, e && a("col", {
+      class: "select-column"
+    }), t.map((({width: t, backgroundColor: e}) => a("col", {
+      style: {
+        width: t,
+        backgroundColor: e
+      }
+    }))), o && a("col", {
+      class: "click-column"
+    }), r && a("col", {
+      class: "expandable-row-control-column"
+    }), l && a("col", {
+      class: "dropdown-column"
+    }));
+  }
+  renderTableHeader() {
+    const {serializedHeaders: t, selectable: e, clickable: o, hideClickable: r, selectMode: l, hasExpandableRows: c, hasDropdowns: d, allRowsSelected: i, someRowsSelected: s, hasRowData: b, loading: h} = this;
+    if (!t.length) return null;
+    return a("thead", null, a("tr", null, e && a("th", null, l === "multiple" && a("q2-checkbox", {
+      label: n("tecton.element.dataTable.selectAllRows"),
+      "hide-label": true,
+      onChange: () => this.selectAllRows.emit({
+        checked: !i
+      }),
+      checked: b && i && !s,
+      indeterminate: b && s && !i,
+      disabled: h || !b,
+      "test-id": "select-all-rows-control"
+    })), t.map((t => {
+      const {align: e, sorted: o, verticalAlign: r} = t;
+      const l = [];
+      if (e) l.push(`align-${e}`);
+      if (r) l.push(`vertical-align-${r}`);
+      if (!!o) l.push("sorted");
+      return a("th", {
+        class: l.join(" "),
+        id: `header-${t.key}`
+      }, t.sortable ? a("q2-btn", {
+        onClick: () => this.onSort(t),
+        "test-id": "sort-control",
+        disabled: this.loading
+      }, a("div", {
+        class: "header-content",
+        "aria-label": t.ariaLabel || undefined
+      }, a("slot", {
+        name: `header-cell-${t.key}`
+      }, t.title), !!o ? a("q2-icon", {
+        class: `sorted-indicator direction-${o}`,
+        type: "arrow-down",
+        label: o === "ASC" ? n("tecton.element.dataTable.sortedAscending") : n("tecton.element.dataTable.sortedDescending"),
+        "test-id": "sorted-indicator"
+      }) : a("q2-icon", {
+        class: `sorted-indicator`,
+        type: "sort",
+        label: n("tecton.element.dataTable.clickToSort"),
+        "test-id": "sorted-indicator"
+      }))) : a("div", {
+        class: "header-content",
+        "aria-label": t.ariaLabel || undefined
+      }, a("slot", {
+        name: `header-cell-${t.key}`
+      }, t.title)));
+    })), o && a("th", {
+      id: "click",
+      class: r ? "sr" : undefined
+    }, a("span", {
+      class: "sr"
+    }, n("tecton.element.dataTable.clickRow"))), c && a("th", {
+      id: "toggle"
+    }, a("span", {
+      class: "sr"
+    }, n("tecton.element.dataTable.toggleRow"))), d && a("th", null, a("span", {
+      class: "sr"
+    }, n("tecton.element.dataTable.dropdown")))));
+  }
+  renderTableRows() {
+    const {serializedHeaders: t, serializedRows: e, selectable: r, clickable: l, striped: c, hideClickable: d, selectMode: i, hasExpandableRows: s, hasDropdowns: b, numberOfColumns: h, loading: p} = this;
+    if (p) {
+      return a("tbody", null, a("tr", {
+        class: "loading-row"
+      }, a("td", {
+        colSpan: h
+      }, a("q2-loading", {
+        inline: true
+      }))));
+    }
+    let u = false;
+    let v;
+    if (i === "single") {
+      v = this.selectedRow;
+      u = !!v;
+    }
+    const g = [];
+    if (l) g.push("click-column");
+    if (d) g.push("sr");
+    const f = g.join(" ");
+    return a("tbody", null, e.map((e => {
+      const d = `row-${e.id}-cell`;
+      const i = `row-${e.id}-expandable-content`;
+      const p = `row-${e.id}-dropdown`;
+      const g = s && !!this.hostElement.querySelector(`[slot="${i}"]`);
+      const w = b && !!this.hostElement.querySelector(`[slot="${p}"]`);
+      const m = [];
+      if (g) m.push("expandable");
+      if (l) m.push("clickable");
+      if (c) m.push("striped");
+      if (e.expanded) m.push("expanded");
+      if (e.selected) m.push("selected");
+      const x = l || g;
+      return a(o, null, a("tr", {
+        id: `row-${e.id}`,
+        class: m.join(" "),
+        onClick: x && (t => this.onClickTableRow(t, e)),
+        tabIndex: x ? -1 : undefined
+      }, r && a("td", {
+        class: "select-column",
+        onClick: this.onControlContainerClick
+      }, a("q2-checkbox", {
+        label: n("tecton.element.dataTable.selectRow"),
+        "hide-label": true,
+        checked: e.selected,
+        disabled: u && e !== v || e.disabled,
+        onChange: t => this.onSelectRow(t, e),
+        "test-id": "select-row-control"
+      })), t.map((({key: t}) => {
+        const o = e.cells[t];
+        const r = o === null || o === void 0 ? void 0 : o.lineClamp;
+        const l = o === null || o === void 0 ? void 0 : o.align;
+        const n = o === null || o === void 0 ? void 0 : o.verticalAlign;
+        const c = [];
+        if (l) c.push(`align-${l}`);
+        if (n) c.push(`vertical-align-${n}`);
+        if (r) c.push("clamped");
+        const i = r ? {
+          "--comp-line-clamp-count": `${r}`
+        } : undefined;
+        return a("td", {
+          class: c.join(" "),
+          style: i
+        }, a("slot", {
+          name: `${d}-${t}`
+        }, this.renderCellContent(o)));
+      })), l && a("td", {
+        class: f
+      }, a("q2-btn", {
+        intent: "neutral",
+        size: "small",
+        onClick: t => this.onClickRow(t, e),
+        "test-id": "clickable-row-control"
+      }, n("tecton.element.dataTable.clickRow"))), s && a("td", {
+        class: "expandable-row-control-column",
+        onClick: this.onControlContainerClick
+      }, g && a("q2-btn", {
+        onClick: t => this.onToggleRow(t, e),
+        ariaExpanded: `${e.expanded}`,
+        ariaControls: i,
+        ariaLabel: n("tecton.element.dataTable.toggleRow"),
+        "test-id": "expandable-row-control"
+      }, a("q2-icon", {
+        type: "chevron-down",
+        class: "toggle-expandable-row"
+      }))), b && a("td", {
+        class: "dropdown-column",
+        onClick: this.onControlContainerClick
+      }, w && a("slot", {
+        name: p
+      }))), g && a("tr", {
+        id: i,
+        class: "expandable-row",
+        hidden: !e.expanded,
+        "aria-hidden": !e.expanded
+      }, a("td", {
+        colSpan: h,
+        headers: "toggle"
+      }, a("div", {
+        class: "expandable-content"
+      }, a("slot", {
+        name: i
+      })))));
+    })));
+  }
+  get hostElement() {
+    return r(this);
+  }
+  static get watchers() {
+    return {
+      headers: [ "headersHandler" ],
+      rows: [ "rowsHandler" ],
+      selectable: [ "selectableHandler" ]
+    };
+  }
+};
+
+i.style = d;
+
+export { i as q2_data_table };
+//# sourceMappingURL=q2-data-table.entry.js.map