dap-design-system 0.61.11 → 0.62.0

package/dist/components/datatable/datatable.component.js

@@ -1,56 +1,66 @@
-var I = Object.defineProperty, L = Object.defineProperties;
-var A = Object.getOwnPropertyDescriptors;
-var B = Object.getOwnPropertySymbols;
-var O = Object.prototype.hasOwnProperty, E = Object.prototype.propertyIsEnumerable;
-var _ = (d, t, e) => t in d ? I(d, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : d[t] = e, m = (d, t) => {
+var O = Object.defineProperty, M = Object.defineProperties;
+var N = Object.getOwnPropertyDescriptors;
+var C = Object.getOwnPropertySymbols;
+var I = Object.prototype.hasOwnProperty, P = Object.prototype.propertyIsEnumerable;
+var B = (d, t, e) => t in d ? O(d, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : d[t] = e, m = (d, t) => {
   for (var e in t || (t = {}))
-    O.call(t, e) && _(d, e, t[e]);
-  if (B)
-    for (var e of B(t))
-      E.call(t, e) && _(d, e, t[e]);
+    I.call(t, e) && B(d, e, t[e]);
+  if (C)
+    for (var e of C(t))
+      P.call(t, e) && B(d, e, t[e]);
   return d;
-}, y = (d, t) => L(d, A(t));
-import { TableController as H, flexRender as C } from "../../node_modules/@tanstack/lit-table/build/lib/index.js";
-import { clsx as f } from "../../node_modules/clsx/dist/clsx.js";
+}, S = (d, t) => M(d, N(t));
+var E = (d) => typeof d == "symbol" ? d : d + "", T = (d, t) => {
+  var e = {};
+  for (var i in d)
+    I.call(d, i) && t.indexOf(i) < 0 && (e[i] = d[i]);
+  if (d != null && C)
+    for (var i of C(d))
+      t.indexOf(i) < 0 && P.call(d, i) && (e[i] = d[i]);
+  return e;
+};
+import { TableController as U, flexRender as R } from "../../node_modules/@tanstack/lit-table/build/lib/index.js";
+import { clsx as y } from "../../node_modules/clsx/dist/clsx.js";
 import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as z } from "../../node_modules/lit-html/lit-html.js";
+import { nothing as f } from "../../node_modules/lit-html/lit-html.js";
 import "../../node_modules/lit-element/lit-element.js";
-import { property as a } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { state as $ } from "../../node_modules/@lit/reactive-element/decorators/state.js";
-import { ifDefined as u } from "../../node_modules/lit-html/directives/if-defined.js";
-import { repeat as S } from "../../node_modules/lit-html/directives/repeat.js";
-import { html as p, unsafeStatic as P } from "../../node_modules/lit-html/static.js";
-import { DdsElement as M } from "../../internal/dds-hu-element.js";
+import { property as l } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { state as z } from "../../node_modules/@lit/reactive-element/decorators/state.js";
+import { ifDefined as b } from "../../node_modules/lit-html/directives/if-defined.js";
+import { repeat as w } from "../../node_modules/lit-html/directives/repeat.js";
+import { html as p, unsafeStatic as L } from "../../node_modules/lit-html/static.js";
+import { DdsElement as K } from "../../internal/dds-hu-element.js";
 import "../../localization/localization.js";
-import D from "../checkbox/checkbox.component.js";
-import N from "../icons/arrows/arrows-arrow-down-s-line/arrows-arrow-down-s-line.component.js";
-import U from "../icons/arrows/arrows-arrow-up-s-line/arrows-arrow-up-s-line.component.js";
-import j from "../pager/pager.component.js";
-import K from "../skeleton/skeleton.component.js";
-import F from "../spinner/spinner.component.js";
-import q from "./datatable.scss.js";
-import { renderCellContent as G } from "./utils/cell-renderer.js";
-import { t as c } from "../../node_modules/i18next/dist/esm/i18next.js";
-import { getPaginationRowModel as V, getSortedRowModel as X, getCoreRowModel as J } from "../../node_modules/@tanstack/table-core/build/lib/index.js";
-import { unsafeCSS as Q } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var W = Object.defineProperty, i = (d, t, e, l) => {
-  for (var r = void 0, n = d.length - 1, s; n >= 0; n--)
-    (s = d[n]) && (r = s(t, e, r) || r);
-  return r && W(t, e, r), r;
+import F from "../checkbox/checkbox.component.js";
+import j from "../icons/arrows/arrows-arrow-down-s-line/arrows-arrow-down-s-line.component.js";
+import W from "../icons/arrows/arrows-arrow-up-s-line/arrows-arrow-up-s-line.component.js";
+import X from "../pager/pager.component.js";
+import Z from "../skeleton/skeleton.component.js";
+import G from "../spinner/spinner.component.js";
+import V from "./datatable.scss.js";
+import { renderCellContent as Y } from "./utils/cell-renderer.js";
+import { t as u } from "../../node_modules/i18next/dist/esm/i18next.js";
+import { getPaginationRowModel as q, getSortedRowModel as J, getCoreRowModel as Q } from "../../node_modules/@tanstack/table-core/build/lib/index.js";
+import { unsafeCSS as tt } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var et = Object.defineProperty, r = (d, t, e, i) => {
+  for (var n = void 0, s = d.length - 1, o; s >= 0; s--)
+    (o = d[s]) && (n = o(t, e, n) || n);
+  return n && et(t, e, n), n;
 };
-const k = "__multiSelect__", w = class w extends M {
+const x = "__multiSelect__", it = 40, A = 10, $ = class $ extends K {
   constructor() {
-    super(...arguments), this.tableController = new H(this), this.stickyOffsets = /* @__PURE__ */ new Map(), this.data = [], this.columns = [], this.rowKey = "id", this.enableRowSelection = !1, this.stickySelectionColumn = !1, this.enableSorting = !1, this.manualSorting = !1, this.manualPagination = !1, this.autoResetPageIndex = !1, this.enableRowClick = !1, this.loading = !1, this.enableStripedRows = !1, this.loadingType = "spinner", this.loadingVariant = "neutral", this.loadingSize = "lg", this.disableHeaderOnEmpty = "true", this.showPagerOnEmpty = !1, this.pager = !1, this.showPageSizeOptions = "true", this.showPageIndex = "true", this.showPageCount = "true", this.showFirstButton = "true", this.showPreviousButton = "true", this.showNextButton = "true", this.showLastButton = "true", this.showPageNumbers = "false", this.siblingCount = 1, this.sortButtonTestId = "datatable-sort-button", this.pageSizeOptions = [10, 25, 50, 100], this._sorting = [], this._rowSelection = {}, this._pagination = {
+    super(...arguments), this.tableController = new U(this), this.stickyOffsets = /* @__PURE__ */ new Map(), this.data = [], this.columns = [], this.rowKey = "id", this.enableRowSelection = !1, this.stickySelectionColumn = !1, this.enableSorting = !1, this.enableColumnResizing = !1, this.manualSorting = !1, this.manualPagination = !1, this.autoResetPageIndex = !1, this.enableRowClick = !1, this.loading = !1, this.enableStripedRows = !1, this.loadingType = "spinner", this.loadingVariant = "neutral", this.loadingSize = "lg", this.disableHeaderOnEmpty = "true", this.showPagerOnEmpty = !1, this.pager = !1, this.showPageSizeOptions = "true", this.showPageIndex = "true", this.showPageCount = "true", this.showFirstButton = "true", this.showPreviousButton = "true", this.showNextButton = "true", this.showLastButton = "true", this.showPageNumbers = "false", this.siblingCount = 1, this.sortButtonTestId = "datatable-sort-button", this.pageSizeOptions = [10, 25, 50, 100], this._sorting = [], this._rowSelection = {}, this._pagination = {
       pageIndex: 0,
       pageSize: 10
     }, this._columnSizing = {}, this.ariaLabel = null, this._statusMessage = "", this.debug = !1, this.columnsMemo = () => {
-      const t = this.columns.map((e) => !e.size && !e.minSize && !e.maxSize ? y(m({}, e), { minSize: 0 }) : e);
+      const t = this.columns.map((e) => !e.size && !e.minSize && !e.maxSize ? S(m({}, e), { minSize: 0 }) : e);
       return [
-        ...this.enableRowSelection && this.columns[0] && this.columns[0].id !== k ? [
-          y(m({
-            id: k,
-            accessorKey: k,
+        ...this.enableRowSelection && this.columns[0] && this.columns[0].id !== x ? [
+          S(m({
+            id: x,
+            accessorKey: x,
             enableSorting: !1,
+            enableResizing: !1,
             size: 50,
             maxSize: 50
           }, this.stickySelectionColumn ? { sticky: "left" } : {}), {
@@ -70,50 +80,50 @@ const k = "__multiSelect__", w = class w extends M {
         ...t
       ];
     }, this.renderColgroup = (t) => {
-      const e = this.columnsMemo(), l = this.columnSizing || this._columnSizing;
+      const e = this.columnsMemo(), i = this._columnSizing;
       return p`
       <colgroup>
-        ${S(
+        ${w(
         e,
-        (r, n) => r.id || `col-${n}`,
-        (r) => {
-          const n = r;
-          let s;
-          return l && n.id && l[n.id] ? s = `${l[n.id]}px` : n.size ? s = `${n.size}px` : s = "auto", p`<col style="width: ${s};" />`;
+        (n, s) => n.id || `col-${s}`,
+        (n) => {
+          const s = n;
+          let o;
+          return i && s.id && i[s.id] ? o = `${i[s.id]}px` : s.size ? o = `${s.size}px` : o = "auto", p`<col style="width: ${o};" />`;
         }
       )}
       </colgroup>
     `;
     }, this.renderHeader = (t) => p`
       <thead part="header">
-        ${S(
+        ${w(
       t.getHeaderGroups(),
       (e) => e.id,
       (e) => p`
             <tr
               part="header-row"
-              class=${f("data-table-header-row", {
+              class=${y("data-table-header-row", {
         "data-table-header-row--striped": this.enableStripedRows
       })}>
-              ${S(
+              ${w(
         e.headers,
-        (l) => l.id,
-        (l) => this.renderHeaderCell(l)
+        (i) => i.id,
+        (i) => this.renderHeaderCell(i)
       )}
             </tr>
           `
     )}
       </thead>
     `, this.renderSkeletonRows = (t, e) => p`
-      ${S(
-      Array.from({ length: t }, (l, r) => r),
-      (l) => l,
-      (l) => p`
+      ${w(
+      Array.from({ length: t }, (i, n) => n),
+      (i) => i,
+      (i) => p`
           <tr class="data-table-row">
-            ${S(
-        Array.from({ length: e }, (r, n) => n),
-        (r) => r,
-        (r) => p`<td class="data-table-cell">
+            ${w(
+        Array.from({ length: e }, (n, s) => s),
+        (n) => n,
+        (n) => p`<td class="data-table-cell">
                   <dap-ds-skeleton></dap-ds-skeleton>
                 </td>`
       )}
@@ -121,7 +131,7 @@ const k = "__multiSelect__", w = class w extends M {
         `
     )}
     `, this.renderBody = (t) => {
-      var e, l;
+      var e, i;
       return p`
       ${this.loading ? p`<tbody part="body">
             ${this.loadingType === "spinner" ? p`
@@ -155,40 +165,40 @@ const k = "__multiSelect__", w = class w extends M {
                       <div part="empty" class="data-table-placeholder">
                         <slot name="empty">
                           <span
-                            >${(l = this.emptyText) != null ? l : c("datatable.noData")}</span
+                            >${(i = this.emptyText) != null ? i : u("datatable.noData")}</span
                           >
                         </slot>
                       </div>
                     </td>
                   </tr>` : t.getRowModel().rows.map(
-        (r, n) => p`
+        (n, s) => p`
                       <tr
                         part="row"
                         role=${this.enableRowClick ? "button" : "row"}
                         tabindex=${this.enableRowClick ? 0 : -1}
-                        aria-selected=${r.getIsSelected()}
-                        aria-rowindex=${n + 2}
-                        class=${f("data-table-row", {
-          "data-table-row--selected": r.getIsSelected(),
+                        aria-selected=${n.getIsSelected()}
+                        aria-rowindex=${s + 2}
+                        class=${y("data-table-row", {
+          "data-table-row--selected": n.getIsSelected(),
           "data-table-row--clickable": this.enableRowClick,
           "data-table-row--striped": this.enableStripedRows
         })}
-                        @click=${() => this.handleRowClick(r)}
-                        @keydown=${(s) => this.handleRowKeydown(s, r)}>
-                        ${r.getVisibleCells().map((s) => {
-          const g = s.column.columnDef, h = this.stickyOffsets.get(s.column.id), b = [
+                        @click=${() => this.handleRowClick(n)}
+                        @keydown=${(o) => this.handleRowKeydown(o, n)}>
+                        ${n.getVisibleCells().map((o) => {
+          const g = o.column.columnDef, c = this.stickyOffsets.get(o.column.id), h = [
             g.textAlign && `text-align: ${g.textAlign};`,
-            this.getStickyStyle(s.column.id)
+            this.getStickyStyle(o.column.id)
           ].filter(Boolean).join(" ") || void 0;
           return p`
                             <td
                               part="cell"
-                              class=${f(
+                              class=${y(
             "data-table-cell",
-            h && `data-table-cell--sticky-${h.side}`
+            c && `data-table-cell--sticky-${c.side}`
           )}
-                              style="${u(b)}">
-                              ${this.renderCell(s)}
+                              style="${b(h)}">
+                              ${this.renderCell(o)}
                             </td>
                           `;
         })}
@@ -209,10 +219,16 @@ const k = "__multiSelect__", w = class w extends M {
     return this.disableHeaderOnEmpty === "true" && this.isTableEmpty;
   }
   firstUpdated(t) {
-    super.firstUpdated(t), this.sorting && (this._sorting = this.sorting), this.rowSelection && (this._rowSelection = this.rowSelection), this.pagination ? this._pagination = this.pagination : this.pageSizeOptions && this.pageSizeOptions.length > 0 && (this._pagination = y(m({}, this._pagination), {
+    super.firstUpdated(t), this.sorting && (this._sorting = this.sorting), this.rowSelection && (this._rowSelection = this.rowSelection), this.pagination ? this._pagination = this.pagination : this.pageSizeOptions && this.pageSizeOptions.length > 0 && (this._pagination = S(m({}, this._pagination), {
       pageSize: this.pageSizeOptions[0]
     }));
   }
+  // Synced before render (not in updated()) so restored widths paint in the same
+  // frame instead of one render late
+  willUpdate(t) {
+    var e;
+    super.willUpdate(t), t.has("columnSizing") && (this._columnSizing = (e = this.columnSizing) != null ? e : {});
+  }
   updated(t) {
     super.updated(t), t.has("pagination") && (this._pagination = this.pagination), t.has("sorting") && (this._sorting = this.sorting), (t.has("rowSelection") || t.has("rowselection")) && (this._rowSelection = this.rowSelection), t.has("data") && this.requestUpdate();
   }
@@ -227,15 +243,15 @@ const k = "__multiSelect__", w = class w extends M {
   // that side). getSize() resolves to the column's `size`, so a pinned column
   // without a size contributes 0 and the next one on that side would overlap it.
   computeStickyOffsets(t) {
-    const e = /* @__PURE__ */ new Map(), l = t.getVisibleLeafColumns();
-    let r = 0;
-    for (let s = l.length - 1; s >= 0; s--) {
-      const g = l[s];
-      g.columnDef.sticky === "right" && (e.set(g.id, { side: "right", offset: r }), r += g.getSize());
-    }
+    const e = /* @__PURE__ */ new Map(), i = t.getVisibleLeafColumns();
     let n = 0;
-    for (const s of l)
-      s.columnDef.sticky === "left" && (e.set(s.id, { side: "left", offset: n }), n += s.getSize());
+    for (let o = i.length - 1; o >= 0; o--) {
+      const g = i[o];
+      g.columnDef.sticky === "right" && (e.set(g.id, { side: "right", offset: n }), n += g.getSize());
+    }
+    let s = 0;
+    for (const o of i)
+      o.columnDef.sticky === "left" && (e.set(o.id, { side: "left", offset: s }), s += o.getSize());
     this.stickyOffsets = e;
   }
   // Inline sticky positioning for a pinned column. z-index lifts the cell above
@@ -248,57 +264,159 @@ const k = "__multiSelect__", w = class w extends M {
       return `position: sticky; ${e.side}: ${e.offset}px; z-index: 1;`;
   }
   renderHeaderCell(t, e = !1) {
-    var v;
-    const l = t.column.columnDef, r = t.column.getCanSort(), n = t.column.getIsSorted(), s = t.column.getNextSortingOrder(), g = (v = l.disableDefaultSorting) != null ? v : !1, h = this.stickyOffsets.get(t.column.id), b = [this.getHeaderCellStyle(t), this.getStickyStyle(t.column.id)].filter(Boolean).join(" ") || void 0, x = l.headerTextAlign ? `justify-content: ${l.headerTextAlign};` : void 0, R = this.getSortIcon(n), T = this.getSortTitle(r, s);
+    var k;
+    const i = t.column.columnDef, n = t.column.getCanSort(), s = t.column.getIsSorted(), o = t.column.getNextSortingOrder(), g = (k = i.disableDefaultSorting) != null ? k : !1, c = this.stickyOffsets.get(t.column.id), h = [this.getHeaderCellStyle(t), this.getStickyStyle(t.column.id)].filter(Boolean).join(" ") || void 0, v = i.headerTextAlign ? `justify-content: ${i.headerTextAlign};` : void 0, D = this.getSortIcon(s), H = this.getSortTitle(n, o), _ = this.getCanResize(t);
     return p`
       <th
         colspan="${t.colSpan}"
         rowspan="${t.rowSpan}"
         part="header-cell"
-        class=${f(
+        id="${this.getHeaderCellId(t.column.id)}"
+        class=${y(
       "data-table-header-cell",
-      h && `data-table-header-cell--sticky-${h.side}`
+      c && `data-table-header-cell--sticky-${c.side}`,
+      _ && "data-table-header-cell--resizable"
     )}
         scope="col"
-        aria-sort=${r && !this.shouldDisableHeaderActions ? this.getAriaSortValue(n) : "none"}
-        style="${u(b)}">
+        aria-sort=${n && !this.shouldDisableHeaderActions ? this.getAriaSortValue(s) : "none"}
+        style="${b(h)}">
         ${this.renderHeaderCellContent(
       t,
-      l,
-      r,
+      i,
+      n,
       g,
-      T,
-      x,
-      R
+      H,
+      v,
+      D
     )}
+        ${_ ? this.renderResizeHandle(t) : f}
       </th>
     `;
   }
-  renderHeaderCellContent(t, e, l, r, n, s, g) {
-    if (!l)
-      return C(e.header, t.getContext());
-    const h = r || this.shouldDisableHeaderActions ? "div" : "dap-ds-button", b = !r && !this.shouldDisableHeaderActions ? t.column.getToggleSortingHandler() : null, x = l && !this.shouldDisableHeaderActions ? "pointer" : "not-allowed";
-    return p`<${P(h)}
+  getHeaderCellId(t) {
+    return `data-table-header-${t}`;
+  }
+  getCanResize(t) {
+    const e = t.column.columnDef;
+    return this.enableColumnResizing && t.colSpan === 1 && t.column.id !== x && e.enableResizing !== !1;
+  }
+  getResizeBounds(t) {
+    const { minSize: e, maxSize: i } = t.column.columnDef;
+    return {
+      min: e || it,
+      max: i && i < Number.MAX_SAFE_INTEGER ? i : void 0
+    };
+  }
+  // A resize steps from the column's nominal width (its resized width, else its
+  // defined size), not the rendered one: a fixed-layout table narrower than its
+  // container stretches every column, and feeding that stretch back in would
+  // make each step overshoot. Only an `auto` column has no nominal width, so it
+  // starts from what is on screen.
+  getStartWidth(t, e) {
+    var s;
+    const i = (s = this._columnSizing[t.column.id]) != null ? s : t.column.columnDef.size;
+    if (i) return i;
+    const n = e.closest("th");
+    return (n == null ? void 0 : n.getBoundingClientRect().width) || t.column.getSize();
+  }
+  setColumnWidth(t, e) {
+    const { min: i, max: n } = this.getResizeBounds(t), s = Math.round(
+      Math.min(Math.max(e, i), n != null ? n : Number.POSITIVE_INFINITY)
+    );
+    return this._columnSizing[t.column.id] === s ? !1 : (this._columnSizing = S(m({}, this._columnSizing), { [t.column.id]: s }), !0);
+  }
+  emitColumnSizingChange() {
+    this.emit("dds-column-sizing-change", {
+      columnSizing: m({}, this._columnSizing)
+    });
+  }
+  handleResizePointerDown(t, e) {
+    if (t.button !== 0) return;
+    t.preventDefault(), t.stopPropagation();
+    const i = t.currentTarget, n = t.clientX, s = this.getStartWidth(e, i);
+    let o = !1;
+    try {
+      i.setPointerCapture(t.pointerId);
+    } catch (h) {
+    }
+    this.toggleAttribute("resizing", !0);
+    const g = (h) => {
+      o = this.setColumnWidth(e, s + h.clientX - n) || o;
+    }, c = () => {
+      window.removeEventListener("pointermove", g), window.removeEventListener("pointerup", c), window.removeEventListener("pointercancel", c), this.toggleAttribute("resizing", !1), o && this.emitColumnSizingChange();
+    };
+    window.addEventListener("pointermove", g), window.addEventListener("pointerup", c), window.addEventListener("pointercancel", c);
+  }
+  handleResizeKeydown(t, e) {
+    const { min: i, max: n } = this.getResizeBounds(e), s = this.getStartWidth(e, t.currentTarget), o = {
+      ArrowLeft: s - A,
+      ArrowRight: s + A,
+      Home: i,
+      End: n
+    };
+    if (!(t.key in o)) return;
+    t.preventDefault(), t.stopPropagation();
+    const g = o[t.key];
+    g !== void 0 && this.setColumnWidth(e, g) && this.emitColumnSizingChange();
+  }
+  // Double-click drops the override, so the column falls back to its defined size
+  handleResizeReset(t, e) {
+    var s;
+    if (t.preventDefault(), t.stopPropagation(), !(e.column.id in this._columnSizing)) return;
+    const o = this._columnSizing, { [s = e.column.id]: i } = o, n = T(o, [E(s)]);
+    this._columnSizing = n, this.emitColumnSizingChange();
+  }
+  // A focusable splitter (WAI-ARIA window splitter pattern): drag with the
+  // pointer, ArrowLeft/ArrowRight to step, Home/End for the bounds. It is a
+  // sibling of the sort button, so its clicks never toggle sorting.
+  renderResizeHandle(t) {
+    var s;
+    const { min: e, max: i } = this.getResizeBounds(t), n = Math.round(
+      (s = this._columnSizing[t.column.id]) != null ? s : t.column.getSize()
+    );
+    return p`<div
+      part="resize-handle"
+      class="data-table-resize-handle"
+      role="separator"
+      tabindex="0"
+      aria-orientation="vertical"
+      aria-labelledby="data-table-resize-label ${this.getHeaderCellId(
+      t.column.id
+    )}"
+      aria-valuenow=${n}
+      aria-valuemin=${e}
+      aria-valuemax=${b(i)}
+      @pointerdown=${(o) => this.handleResizePointerDown(o, t)}
+      @keydown=${(o) => this.handleResizeKeydown(o, t)}
+      @dblclick=${(o) => this.handleResizeReset(o, t)}
+      @click=${(o) => o.stopPropagation()}></div>`;
+  }
+  renderHeaderCellContent(t, e, i, n, s, o, g) {
+    if (!i)
+      return R(e.header, t.getContext());
+    const c = n || this.shouldDisableHeaderActions ? "div" : "dap-ds-button", h = !n && !this.shouldDisableHeaderActions ? t.column.getToggleSortingHandler() : null, v = i && !this.shouldDisableHeaderActions ? "pointer" : "not-allowed";
+    return p`<${L(c)}
       class="data-table-header-cell__controller"
       variant="clean"
       data-testid="${this.sortButtonTestId}-${t.column.id}"
-      title=${u(n)}
-      @click="${b}"
-      style="cursor: ${x}">
+      title=${b(s)}
+      @click="${h}"
+      style="cursor: ${v}">
       <span 
         part="content" 
         class="data-table-header-cell__content"
-        style="${u(s)}">
-        ${C(e.header, t.getContext())}
+        style="${b(o)}">
+        ${R(e.header, t.getContext())}
         ${g}
       </span>
-    </${P(h)}>`;
+    </${L(c)}>`;
   }
   getHeaderCellStyle(t) {
-    const e = t.column.columnDef;
-    if (!(!e.size && !e.maxSize && !e.headerTextAlign))
+    var n;
+    const e = t.column.columnDef, i = (n = this._columnSizing[t.column.id]) != null ? n : e.size;
+    if (!(!i && !e.maxSize && !e.headerTextAlign))
       return `
-      ${e.size ? `width: ${e.size}px;` : ""}
+      ${i ? `width: ${i}px;` : ""}
       ${e.maxSize ? `max-width: ${e.maxSize}px;` : ""}
       ${e.headerTextAlign ? `text-align: ${e.headerTextAlign};` : ""}
     `;
@@ -311,7 +429,7 @@ const k = "__multiSelect__", w = class w extends M {
   }
   getSortTitle(t, e) {
     if (t)
-      return e === "asc" ? c("datatable.sortAscending") : e === "desc" ? c("datatable.sortDescending") : c("datatable.clearSort");
+      return e === "asc" ? u("datatable.sortAscending") : e === "desc" ? u("datatable.sortDescending") : u("datatable.clearSort");
   }
   getAriaSortValue(t) {
     return t === "asc" ? "ascending" : t === "desc" ? "descending" : "none";
@@ -322,57 +440,58 @@ const k = "__multiSelect__", w = class w extends M {
    * render callbacks, and Lit templates
    */
   renderCell(t) {
-    const e = t.column.columnDef.cell, l = t.getContext(), r = typeof e == "function" ? e(l) : e, n = G(r);
-    return typeof n == "string" || typeof n == "number" || typeof n == "boolean" || n === null || n === void 0 || n instanceof HTMLElement ? n : C(e, l);
+    const e = t.column.columnDef.cell, i = t.getContext(), n = typeof e == "function" ? e(i) : e, s = Y(n);
+    return typeof s == "string" || typeof s == "number" || typeof s == "boolean" || s === null || s === void 0 || s instanceof HTMLElement ? s : R(e, i);
   }
   handleRowClick(t) {
     this.enableRowClick && this.emit("dds-row-click", { row: t });
   }
   handleRowKeydown(t, e) {
     if (t.key === "Enter" || t.key === " ") {
-      if (t.composedPath().some((n) => n instanceof HTMLElement ? !!(["BUTTON", "A", "INPUT", "SELECT", "TEXTAREA"].includes(
-        n.tagName
-      ) || n.getAttribute("role") === "button" || n.tagName.toLowerCase().includes("button") || n.tagName.toLowerCase().includes("btn")) : !1))
+      if (t.composedPath().some((s) => s instanceof HTMLElement ? !!(["BUTTON", "A", "INPUT", "SELECT", "TEXTAREA"].includes(
+        s.tagName
+      ) || s.getAttribute("role") === "button" || s.tagName.toLowerCase().includes("button") || s.tagName.toLowerCase().includes("btn")) : !1))
         return;
       t.preventDefault(), this.handleRowClick(e);
     }
   }
   render() {
-    var e, l, r, n;
-    const t = this.tableController.table(y(m({
+    var e, i, n, s;
+    const t = this.tableController.table(S(m({
       data: this.data,
       columns: this.columnsMemo(),
       filterFns: {},
       state: {
         sorting: this._sorting,
         rowSelection: this._rowSelection,
-        pagination: this._pagination
+        pagination: this._pagination,
+        columnSizing: this._columnSizing
       },
       manualSorting: this.manualSorting,
       enableSorting: this.enableSorting,
       enableRowSelection: this.enableRowSelection,
       manualPagination: this.manualPagination,
       autoResetPageIndex: this.autoResetPageIndex,
-      onSortingChange: (s) => {
-        typeof s == "function" ? this._sorting = s(this._sorting) : this._sorting = s, this.emit("dds-sorting-change", { sorting: this._sorting });
+      onSortingChange: (o) => {
+        typeof o == "function" ? this._sorting = o(this._sorting) : this._sorting = o, this.emit("dds-sorting-change", { sorting: this._sorting });
       },
-      getCoreRowModel: J()
+      getCoreRowModel: Q()
     }, !this.manualSorting && {
-      getSortedRowModel: X()
+      getSortedRowModel: J()
     }), {
-      getPaginationRowModel: V(),
-      onPaginationChange: (s) => {
-        typeof s == "function" ? this._pagination = s(this._pagination) : this._pagination = s, this.emit("dds-pagination-change", {
+      getPaginationRowModel: q(),
+      onPaginationChange: (o) => {
+        typeof o == "function" ? this._pagination = o(this._pagination) : this._pagination = o, this.emit("dds-pagination-change", {
           pagination: {
             pageIndex: this._pagination.pageIndex,
             pageSize: this._pagination.pageSize
           }
         });
       },
-      onRowSelectionChange: (s) => {
-        typeof s == "function" ? this._rowSelection = s(this._rowSelection) : this._rowSelection = s, this.emit("dds-selection-change", { selection: this._rowSelection });
+      onRowSelectionChange: (o) => {
+        typeof o == "function" ? this._rowSelection = o(this._rowSelection) : this._rowSelection = o, this.emit("dds-selection-change", { selection: this._rowSelection });
       },
-      getRowId: (s) => s[this.rowKey],
+      getRowId: (o) => o[this.rowKey],
       rowCount: (e = this.rowCount) != null ? e : this.data ? this.data.length : 0,
       debugTable: this.debug,
       debugHeaders: this.debug,
@@ -383,28 +502,31 @@ const k = "__multiSelect__", w = class w extends M {
         <table
           part="base"
           role="table"
-          aria-label=${u(
-      (l = this.ariaLabel) != null ? l : c("datatable.tableDescription")
+          aria-label=${b(
+      (i = this.ariaLabel) != null ? i : u("datatable.tableDescription")
     )}
-          aria-describedby=${u(this.ariaDescribedBy)}
-          aria-rowcount=${(r = this.rowCount) != null ? r : this.data ? this.data.length : 0}
-          class=${f("data-table", {
+          aria-describedby=${b(this.ariaDescribedBy)}
+          aria-rowcount=${(n = this.rowCount) != null ? n : this.data ? this.data.length : 0}
+          class=${y("data-table", {
       "data-table--loading": this.loading
     })}>
           ${this.caption ? p`<caption class="visually-hidden">
                 ${this.caption}
-              </caption>` : z}
+              </caption>` : f}
           ${this.renderColgroup(t)} ${this.renderHeader(t)}
           ${this.renderBody(t)}
         </table>
       </div>
+      ${this.enableColumnResizing ? p`<span id="data-table-resize-label" hidden
+            >${u("datatable.resizeColumn")}</span
+          >` : f}
       ${this._statusMessage ? p`<div
             aria-live="polite"
             aria-atomic="true"
             class="visually-hidden"
             id="table-status">
             ${this._statusMessage}
-          </div>` : z}
+          </div>` : f}
       ${this.pager && !this.isTableEmpty || this.pager && this.showPagerOnEmpty && this.isTableEmpty ? p`<dap-ds-pager
             class="data-table-pager"
             part="pager"
@@ -412,7 +534,7 @@ const k = "__multiSelect__", w = class w extends M {
             .manualPagination=${this.manualPagination}
             .pageIndex=${t.getState().pagination.pageIndex}
             .pageSize=${t.getState().pagination.pageSize}
-            .totalRows=${(n = this.rowCount) != null ? n : this.data ? this.data.length : 0}
+            .totalRows=${(s = this.rowCount) != null ? s : this.data ? this.data.length : 0}
             .pageSizeOptions=${this.pageSizeOptions}
             .showPageSizeOptions=${this.showPageSizeOptions}
             .showPageIndex=${this.showPageIndex}
@@ -429,185 +551,188 @@ const k = "__multiSelect__", w = class w extends M {
             .lastButtonLabel=${this.lastButtonLabel}
             .pageStateText=${this.pageStateText}
             exportparts="base:pager-base, first:pager-first, previous:pager-previous, next:pager-next, last:pager-last, page-size:pager-page-size-select, page-size-select-base:page-size-select-base, page-size-select-trigger:page-size-select-trigger, pager-button-first-base:pager-button-first-base, pager-button-first-content:pager-button-first-content, pager-button-previous-base:pager-button-previous-base, pager-button-previous-content:pager-button-previous-content, pager-button-next-base:pager-button-next-base, pager-button-next-content:pager-button-next-content, pager-button-last-base:pager-button-last-base, pager-button-last-content:pager-button-last-content, page-numbers:pager-page-numbers, page-number:pager-page-number, page-number-active:pager-page-number-active, page-number-base:pager-page-number-base, page-number-content:pager-page-number-content, page-info:pager-page-info"
-            @dds-pagination-change=${(s) => {
-      s.preventDefault(), s.stopPropagation(), s.detail.action === "pageSize" ? t.setPageSize(s.detail.pagination.pageSize) : t.setPageIndex(s.detail.pagination.pageIndex);
+            @dds-pagination-change=${(o) => {
+      o.preventDefault(), o.stopPropagation(), o.detail.action === "pageSize" ? t.setPageSize(o.detail.pagination.pageSize) : t.setPageIndex(o.detail.pagination.pageIndex);
     }}>
             <slot name="first-button-label" slot="first-button-label">
-              ${this.firstButtonLabel || c("pager.first")}
+              ${this.firstButtonLabel || u("pager.first")}
             </slot>
             <slot name="previous-button-label" slot="previous-button-label">
-              ${this.previousButtonLabel || c("pager.previous")}
+              ${this.previousButtonLabel || u("pager.previous")}
             </slot>
             <slot name="next-button-label" slot="next-button-label">
-              ${this.nextButtonLabel || c("pager.next")}
+              ${this.nextButtonLabel || u("pager.next")}
             </slot>
             <slot name="last-button-label" slot="last-button-label">
-              ${this.lastButtonLabel || c("pager.last")}
+              ${this.lastButtonLabel || u("pager.last")}
             </slot>
-          </dap-ds-pager>` : z}
+          </dap-ds-pager>` : f}
     `;
   }
 };
-w.tagName = "dap-ds-datatable", w.dependencies = {
-  "dap-ds-checkbox": D,
-  "dap-ds-icon-arrow-up-s-line": U,
-  "dap-ds-icon-arrow-down-s-line": N,
-  "dap-ds-skeleton": K,
-  "dap-ds-spinner": F,
-  "dap-ds-pager": j
-}, w.styles = Q(q);
-let o = w;
-i([
-  a({ attribute: !1 })
-], o.prototype, "data");
-i([
-  a({ attribute: !1 })
-], o.prototype, "columns");
-i([
-  a()
-], o.prototype, "rowKey");
-i([
-  a({ type: Boolean })
-], o.prototype, "enableRowSelection");
-i([
-  a({ type: Boolean })
-], o.prototype, "stickySelectionColumn");
-i([
-  a({ type: Boolean })
-], o.prototype, "enableSorting");
-i([
-  a({ type: Boolean })
-], o.prototype, "manualSorting");
-i([
-  a({ type: Boolean })
-], o.prototype, "manualPagination");
-i([
-  a({ type: Boolean })
-], o.prototype, "autoResetPageIndex");
-i([
-  a({ type: Boolean })
-], o.prototype, "enableRowClick");
-i([
-  a({ type: Boolean })
-], o.prototype, "loading");
-i([
-  a({ type: Boolean })
-], o.prototype, "enableStripedRows");
-i([
-  a({ type: Number })
-], o.prototype, "rowCount");
-i([
-  a({ type: String })
-], o.prototype, "caption");
-i([
-  a({ type: String })
-], o.prototype, "loadingType");
-i([
-  a({ type: String, reflect: !0 })
-], o.prototype, "loadingVariant");
-i([
-  a({ type: String, reflect: !0 })
-], o.prototype, "loadingSize");
-i([
-  a({ type: Number })
-], o.prototype, "loadingStaticSize");
-i([
-  a({ type: String })
-], o.prototype, "loadingText");
-i([
-  a({ type: String })
-], o.prototype, "emptyText");
-i([
-  a({ type: String })
-], o.prototype, "disableHeaderOnEmpty");
-i([
-  a({ type: Boolean })
-], o.prototype, "showPagerOnEmpty");
-i([
-  a({ type: Boolean })
-], o.prototype, "pager");
-i([
-  a({ type: String })
-], o.prototype, "showPageSizeOptions");
-i([
-  a({ type: String })
-], o.prototype, "showPageIndex");
-i([
-  a({ type: String })
-], o.prototype, "showPageCount");
-i([
-  a({ type: String })
-], o.prototype, "showFirstButton");
-i([
-  a({ type: String })
-], o.prototype, "showPreviousButton");
-i([
-  a({ type: String })
-], o.prototype, "showNextButton");
-i([
-  a({ type: String })
-], o.prototype, "showLastButton");
-i([
-  a({ type: String })
-], o.prototype, "showPageNumbers");
-i([
-  a({ type: Number })
-], o.prototype, "siblingCount");
-i([
-  a({ type: String })
-], o.prototype, "firstButtonLabel");
-i([
-  a({ type: String })
-], o.prototype, "previousButtonLabel");
-i([
-  a({ type: String })
-], o.prototype, "nextButtonLabel");
-i([
-  a({ type: String })
-], o.prototype, "lastButtonLabel");
-i([
-  a()
-], o.prototype, "sortButtonTestId");
-i([
-  a({ attribute: !1 })
-], o.prototype, "pageStateText");
-i([
-  a({ type: Array })
-], o.prototype, "pageSizeOptions");
-i([
-  a({ type: Array })
-], o.prototype, "sorting");
-i([
-  $()
-], o.prototype, "_sorting");
-i([
-  a({ type: Object })
-], o.prototype, "rowSelection");
-i([
-  $()
-], o.prototype, "_rowSelection");
-i([
-  a({ type: Object })
-], o.prototype, "pagination");
-i([
-  $()
-], o.prototype, "_pagination");
-i([
-  a({ type: Object })
-], o.prototype, "columnSizing");
-i([
-  $()
-], o.prototype, "_columnSizing");
-i([
-  a({ type: String })
-], o.prototype, "ariaLabel");
-i([
-  $()
-], o.prototype, "_statusMessage");
-i([
-  a({ type: Boolean })
-], o.prototype, "debug");
+$.tagName = "dap-ds-datatable", $.dependencies = {
+  "dap-ds-checkbox": F,
+  "dap-ds-icon-arrow-up-s-line": W,
+  "dap-ds-icon-arrow-down-s-line": j,
+  "dap-ds-skeleton": Z,
+  "dap-ds-spinner": G,
+  "dap-ds-pager": X
+}, $.styles = tt(V);
+let a = $;
+r([
+  l({ attribute: !1 })
+], a.prototype, "data");
+r([
+  l({ attribute: !1 })
+], a.prototype, "columns");
+r([
+  l()
+], a.prototype, "rowKey");
+r([
+  l({ type: Boolean })
+], a.prototype, "enableRowSelection");
+r([
+  l({ type: Boolean })
+], a.prototype, "stickySelectionColumn");
+r([
+  l({ type: Boolean })
+], a.prototype, "enableSorting");
+r([
+  l({ type: Boolean })
+], a.prototype, "enableColumnResizing");
+r([
+  l({ type: Boolean })
+], a.prototype, "manualSorting");
+r([
+  l({ type: Boolean })
+], a.prototype, "manualPagination");
+r([
+  l({ type: Boolean })
+], a.prototype, "autoResetPageIndex");
+r([
+  l({ type: Boolean })
+], a.prototype, "enableRowClick");
+r([
+  l({ type: Boolean })
+], a.prototype, "loading");
+r([
+  l({ type: Boolean })
+], a.prototype, "enableStripedRows");
+r([
+  l({ type: Number })
+], a.prototype, "rowCount");
+r([
+  l({ type: String })
+], a.prototype, "caption");
+r([
+  l({ type: String })
+], a.prototype, "loadingType");
+r([
+  l({ type: String, reflect: !0 })
+], a.prototype, "loadingVariant");
+r([
+  l({ type: String, reflect: !0 })
+], a.prototype, "loadingSize");
+r([
+  l({ type: Number })
+], a.prototype, "loadingStaticSize");
+r([
+  l({ type: String })
+], a.prototype, "loadingText");
+r([
+  l({ type: String })
+], a.prototype, "emptyText");
+r([
+  l({ type: String })
+], a.prototype, "disableHeaderOnEmpty");
+r([
+  l({ type: Boolean })
+], a.prototype, "showPagerOnEmpty");
+r([
+  l({ type: Boolean })
+], a.prototype, "pager");
+r([
+  l({ type: String })
+], a.prototype, "showPageSizeOptions");
+r([
+  l({ type: String })
+], a.prototype, "showPageIndex");
+r([
+  l({ type: String })
+], a.prototype, "showPageCount");
+r([
+  l({ type: String })
+], a.prototype, "showFirstButton");
+r([
+  l({ type: String })
+], a.prototype, "showPreviousButton");
+r([
+  l({ type: String })
+], a.prototype, "showNextButton");
+r([
+  l({ type: String })
+], a.prototype, "showLastButton");
+r([
+  l({ type: String })
+], a.prototype, "showPageNumbers");
+r([
+  l({ type: Number })
+], a.prototype, "siblingCount");
+r([
+  l({ type: String })
+], a.prototype, "firstButtonLabel");
+r([
+  l({ type: String })
+], a.prototype, "previousButtonLabel");
+r([
+  l({ type: String })
+], a.prototype, "nextButtonLabel");
+r([
+  l({ type: String })
+], a.prototype, "lastButtonLabel");
+r([
+  l()
+], a.prototype, "sortButtonTestId");
+r([
+  l({ attribute: !1 })
+], a.prototype, "pageStateText");
+r([
+  l({ type: Array })
+], a.prototype, "pageSizeOptions");
+r([
+  l({ type: Array })
+], a.prototype, "sorting");
+r([
+  z()
+], a.prototype, "_sorting");
+r([
+  l({ type: Object })
+], a.prototype, "rowSelection");
+r([
+  z()
+], a.prototype, "_rowSelection");
+r([
+  l({ type: Object })
+], a.prototype, "pagination");
+r([
+  z()
+], a.prototype, "_pagination");
+r([
+  l({ type: Object })
+], a.prototype, "columnSizing");
+r([
+  z()
+], a.prototype, "_columnSizing");
+r([
+  l({ type: String })
+], a.prototype, "ariaLabel");
+r([
+  z()
+], a.prototype, "_statusMessage");
+r([
+  l({ type: Boolean })
+], a.prototype, "debug");
 export {
-  o as default
+  a as default
 };
 //# sourceMappingURL=datatable.component.js.map