@vonage/vivid 4.31.0 → 5.1.0

package/data-grid/index.js

@@ -1,3 +1,1011 @@
-import { r as registerDataGrid } from '../shared/definition17.js';
-
-registerDataGrid();
+import { I as B, i as Q } from "../bundled/definition2.js";
+import { V as I, h as f, a as m, o as n, D as x, O as F, n as j, c as N, d as E } from "../bundled/vivid-element.js";
+import { V as W, v as J } from "../bundled/definition12.js";
+import { d as X, e as Y, f as O, k as P, a as z, g as Z, h as ee, i as te, j as oe, b as le, c as ie, l as ae } from "../bundled/key-codes.js";
+import { R as G } from "../bundled/repeat.js";
+import { H as A, a as L } from "../bundled/host-semantics.js";
+import { c as M } from "../bundled/children.js";
+import { s as U, e as K } from "../bundled/slotted.js";
+import { L as ne } from "../bundled/localized.js";
+import { c as V } from "../bundled/class-names.js";
+import { w as q } from "../bundled/when.js";
+const R = "focus", S = "focusin", w = "focusout", y = "keydown", re = ":host{display:block}:host([generate-header=sticky]){max-block-size:400px}.base{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base{position:relative;overflow:auto;block-size:inherit;inline-size:100%;max-block-size:inherit}", se = ".base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-row-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-row-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-row-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-data-grid-row-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-data-grid-row-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-data-grid-row-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-row-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-row-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-row-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-row-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-data-grid-row-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-data-grid-row-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-data-grid-row-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-row-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:grid;width:100%;box-sizing:border-box;color:var(--vvd-color-canvas-text)}:host([row-type=sticky-header]) .base{position:sticky;z-index:9;top:0;background:var(--data-grid-row-background, var(--vvd-color-canvas))}:host([row-type=hidden-header]) .base{display:none}:host(:is([selected]):not([row-type*=header])) .base{background-color:var(--_appearance-color-fill)}", ce = ':host{block-size:100%;min-inline-size:80px}:host(:focus-visible){outline:none}:host([data-fixed]){position:sticky;z-index:5;background:var(--data-grid-cell-background, var(--vvd-color-surface-2dp))}:host([data-fixed]):before{position:absolute;z-index:1;top:0;right:0;width:1px;block-size:100%;box-shadow:4px 0 4px #0000001a,2px 0 2px #0000000d,1px 0 1px #0000000d;content:"";pointer-events:none}.base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-cell-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-data-grid-cell-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));--_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-cell-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-data-grid-cell-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size, var(--_data-grid-cell-default-block-size));color:var(--_appearance-color-text);font:var(--vvd-typography-base);min-block-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:13px 14px;padding-inline:12px}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host([cell-type=columnheader]) .base{border-color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);--_data-grid-cell-default-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_data-grid-cell-default-white-space: nowrap}:host(:not([cell-type=columnheader])) .base{--_data-grid-cell-default-block-size: 100%;--_data-grid-cell-default-white-space: normal}:host(:is([selected]):not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}slot{display:block;overflow:hidden;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}:host(:not([cell-type=columnheader][aria-sort])) slot{inline-size:100%}.header-icon{margin-inline-start:16px}', D = {
+  none: "none",
+  ascending: "ascending",
+  descending: "descending",
+  other: "other"
+}, b = {
+  none: "none",
+  default: "default",
+  sticky: "sticky"
+}, g = {
+  default: "default",
+  columnHeader: "columnheader",
+  rowHeader: "rowheader"
+}, v = {
+  default: "default",
+  header: "header",
+  stickyHeader: "sticky-header"
+}, H = {
+  columnheader: "columnheader",
+  rowheader: "rowheader",
+  default: "gridcell"
+};
+var de = Object.defineProperty, C = (i, e, t, l) => {
+  for (var o = void 0, a = i.length - 1, r; a >= 0; a--)
+    (r = i[a]) && (o = r(e, t, o) || o);
+  return o && de(e, t, o), o;
+};
+const ue = f`
+	<template>
+		${(i) => i.rowData === null || i.columnDefinition === null || i.columnDefinition.columnDataKey === null ? null : i.rowData[i.columnDefinition.columnDataKey]}
+	</template>
+`, he = f`
+	<template>
+		${(i) => i.columnDefinition.title === void 0 ? i.columnDefinition.columnDataKey : i.columnDefinition.title}
+	</template>
+`;
+class p extends ne(A(I)) {
+  constructor() {
+    super(...arguments), this.cellType = g.default, this.rowData = null, this.columnDefinition = null, this.isActiveCell = !1, this.customCellView = null, this.updateCellStyle = () => {
+      this.gridColumn && !this.gridColumn.includes("undefined") ? this.style.gridColumn = this.gridColumn : this.style.removeProperty("grid-column");
+    }, this._selectable = !1, this.selected = !1, this.ariaSelected = null, this.ariaSort = null;
+  }
+  /**
+   * @internal
+   */
+  cellTypeChanged() {
+    this.$fastController.isConnected && this.updateCellView();
+  }
+  /**
+   * @internal
+   */
+  gridColumnChanged() {
+    this.$fastController.isConnected && this.updateCellStyle();
+  }
+  /**
+   * @internal
+   */
+  columnDefinitionChanged(e, t) {
+    this.$fastController.isConnected && this.updateCellView();
+  }
+  /**
+   * Updates the fixed column style
+   * @internal
+   */
+  updateFixedStyle() {
+    this.fixedPosition !== void 0 ? (this.setAttribute("data-fixed", ""), this.style.left = this.fixedPosition) : (this.removeAttribute("data-fixed"), this.style.removeProperty("left"));
+  }
+  /**
+   * Sets the fixed state and position for this cell
+   * @internal
+   */
+  setFixedPosition(e) {
+    this.fixedPosition = e, this.updateFixedStyle();
+  }
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener(S, this.handleFocusin), this.addEventListener(w, this.handleFocusout), this.addEventListener(y, this.handleKeydown), this.style.gridColumn = `${this.columnDefinition?.gridColumn === void 0 ? 0 : this.columnDefinition.gridColumn}`, this.updateCellView(), this.updateCellStyle(), this.updateFixedStyle();
+  }
+  /**
+   * @internal
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener(S, this.handleFocusin), this.removeEventListener(
+      w,
+      this.handleFocusout
+    ), this.removeEventListener(y, this.handleKeydown), this.disconnectCellView();
+  }
+  handleFocusin(e) {
+    if (this.shadowRoot.querySelector(".base").classList.add("active"), !this.isActiveCell) {
+      switch (this.isActiveCell = !0, this.cellType) {
+        case g.columnHeader:
+          if (this.columnDefinition !== null && this.columnDefinition.headerCellInternalFocusQueue !== !0 && typeof this.columnDefinition.headerCellFocusTargetCallback == "function") {
+            const t = this.columnDefinition.headerCellFocusTargetCallback(this);
+            t !== null && t.focus();
+          }
+          break;
+        default:
+          if (this.columnDefinition !== null && this.columnDefinition.cellInternalFocusQueue !== !0 && typeof this.columnDefinition.cellFocusTargetCallback == "function") {
+            const t = this.columnDefinition.cellFocusTargetCallback(this);
+            t !== null && t.focus();
+          }
+          break;
+      }
+      this.$emit("cell-focused", this);
+    }
+  }
+  handleFocusout(e) {
+    this.shadowRoot.querySelector(".base").classList.remove("active"), this !== document.activeElement && !this.contains(document.activeElement) && (this.isActiveCell = !1);
+  }
+  handleKeydown(e) {
+    if (!(e.defaultPrevented || this.columnDefinition === null || this.cellType === g.default && this.columnDefinition.cellInternalFocusQueue !== !0 || this.cellType === g.columnHeader && this.columnDefinition.headerCellInternalFocusQueue !== !0))
+      switch (e.key) {
+        case O:
+        case Y:
+          if (this.contains(document.activeElement) && document.activeElement !== this)
+            return;
+          switch (this.cellType) {
+            case g.columnHeader:
+              if (this.columnDefinition.headerCellFocusTargetCallback !== void 0) {
+                const t = this.columnDefinition.headerCellFocusTargetCallback(this);
+                t !== null && t.focus(), e.preventDefault();
+              }
+              break;
+            default:
+              if (this.columnDefinition.cellFocusTargetCallback !== void 0) {
+                const t = this.columnDefinition.cellFocusTargetCallback(this);
+                t !== null && t.focus(), e.preventDefault();
+              }
+              break;
+          }
+          break;
+        case X:
+          this.contains(document.activeElement) && document.activeElement !== this && (this.focus(), e.preventDefault());
+          break;
+      }
+  }
+  updateCellView() {
+    if (this.disconnectCellView(), this.columnDefinition !== null) {
+      switch (this.cellType) {
+        case g.columnHeader:
+          this.columnDefinition.headerCellTemplate !== void 0 ? this.customCellView = this.columnDefinition.headerCellTemplate.render(
+            this,
+            this
+          ) : this.customCellView = he.render(
+            this,
+            this
+          );
+          break;
+        case g.rowHeader:
+        case g.default:
+          this.columnDefinition.cellTemplate !== void 0 ? this.customCellView = this.columnDefinition.cellTemplate.render(
+            this,
+            this
+          ) : this.customCellView = ue.render(this, this);
+          break;
+      }
+      this.columnDefinition?.sortable ? this.columnDefinition.sortDirection ? this.sortDirection = this.columnDefinition.sortDirection : this.sortDirection = D.none : this.sortDirection = void 0;
+    }
+  }
+  disconnectCellView() {
+    this.customCellView !== null && (this.customCellView.dispose(), this.customCellView = null);
+  }
+  /**
+   * @internal
+   */
+  ariaSelectedChanged(e, t) {
+    super.ariaSelectedChanged(e, t), this._selectable = t !== null, this.selected = t === "true";
+  }
+  /**
+   * @internal
+   */
+  ariaSortChanged(e, t) {
+    if (super.ariaSortChanged(e, t), t === null) {
+      this.sortDirection = void 0;
+      return;
+    }
+    this.sortDirection = t;
+  }
+  #e() {
+    return this.columnDefinition && this.columnDefinition.columnDataKey ? this.columnDefinition.columnDataKey : this.textContent.trim();
+  }
+  /**
+   * @internal
+   */
+  _handleInteraction() {
+    const e = this.cellType === "columnheader";
+    return e && this.sortDirection !== void 0 && this.$emit("sort", {
+      columnDataKey: this.#e(),
+      sortDirection: this.sortDirection
+    }), (e ? this.columnDefinition?.headerCellInternalFocusQueue : this.columnDefinition?.cellInternalFocusQueue) || this.$emit("cell-click", {
+      cell: this,
+      row: this.parentElement,
+      isHeaderCell: e,
+      columnDataKey: this.#e()
+    }), !0;
+  }
+}
+C([
+  m({ attribute: "cell-type" })
+], p.prototype, "cellType");
+C([
+  m({ attribute: "grid-column" })
+], p.prototype, "gridColumn");
+C([
+  n
+], p.prototype, "rowData");
+C([
+  n
+], p.prototype, "columnDefinition");
+C([
+  n
+], p.prototype, "_selectable");
+C([
+  m({ mode: "boolean" })
+], p.prototype, "selected");
+C([
+  m({ attribute: "sort-direction" })
+], p.prototype, "sortDirection");
+var fe = Object.defineProperty, u = (i, e, t, l) => {
+  for (var o = void 0, a = i.length - 1, r; a >= 0; a--)
+    (r = i[a]) && (o = r(e, t, o) || o);
+  return o && fe(e, t, o), o;
+};
+class c extends A(I) {
+  constructor() {
+    super(...arguments), this.rowType = v.default, this.rowData = null, this.columnDefinitions = null, this.cellsRepeatBehavior = null, this.cellsPlaceholder = null, this.focusColumnIndex = 0, this.updateRowStyle = () => {
+      this.style.gridTemplateColumns = this.gridTemplateColumns;
+    }, this.ariaSelected = null, this._selectable = !1, this.selected = !1;
+  }
+  /**
+   * @internal
+   */
+  gridTemplateColumnsChanged() {
+    this.$fastController.isConnected && this.updateRowStyle();
+  }
+  /**
+   * @internal
+   */
+  rowTypeChanged() {
+    this.$fastController.isConnected && this.updateItemTemplate();
+  }
+  /**
+   * @internal
+   */
+  cellItemTemplateChanged() {
+    this.updateItemTemplate();
+  }
+  /**
+   * @internal
+   */
+  headerCellItemTemplateChanged() {
+    this.updateItemTemplate();
+  }
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback(), this.cellsRepeatBehavior === null && (this.cellsPlaceholder = document.createComment(""), this.appendChild(this.cellsPlaceholder), this.updateItemTemplate(), this.cellsRepeatBehavior = new G(
+      (e) => e.columnDefinitions,
+      (e) => e.activeCellItemTemplate,
+      { positioning: !0 }
+    ).createBehavior(this.cellsPlaceholder), this.$fastController.addBehaviors([this.cellsRepeatBehavior])), this.addEventListener("cell-focused", this.handleCellFocus), this.addEventListener(w, this.handleFocusout), this.addEventListener(y, this.handleKeydown), this.updateRowStyle();
+  }
+  /**
+   * @internal
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("cell-focused", this.handleCellFocus), this.removeEventListener(
+      w,
+      this.handleFocusout
+    ), this.removeEventListener(y, this.handleKeydown);
+  }
+  handleFocusout(e) {
+    this.contains(document.activeElement) || (this.focusColumnIndex = 0);
+  }
+  handleCellFocus(e) {
+    this.focusColumnIndex = this.cellElements.indexOf(e.target), this.$emit("row-focused", this);
+  }
+  handleKeydown(e) {
+    if (e.defaultPrevented)
+      return;
+    let t = 0;
+    switch (e.key) {
+      case ee:
+        t = Math.max(0, this.focusColumnIndex - 1), this.cellElements[t].focus(), e.preventDefault();
+        break;
+      case Z:
+        t = Math.min(
+          this.cellElements.length - 1,
+          this.focusColumnIndex + 1
+        ), this.cellElements[t].focus(), e.preventDefault();
+        break;
+      case z:
+        e.ctrlKey || (this.cellElements[0].focus(), e.preventDefault());
+        break;
+      case P:
+        e.ctrlKey || (this.cellElements[this.cellElements.length - 1].focus(), e.preventDefault());
+        break;
+    }
+  }
+  updateItemTemplate() {
+    this.activeCellItemTemplate = this.rowType === v.default && this.cellItemTemplate !== void 0 ? this.cellItemTemplate : this.rowType === v.default && this.cellItemTemplate === void 0 ? this.defaultCellItemTemplate : this.headerCellItemTemplate !== void 0 ? this.headerCellItemTemplate : this.defaultHeaderCellItemTemplate;
+  }
+  /**
+   * @internal
+   */
+  ariaSelectedChanged(e, t) {
+    super.ariaSelectedChanged(e, t), this._selectable = t !== null, this.selected = t === "true";
+  }
+}
+u([
+  m({ attribute: "grid-template-columns" })
+], c.prototype, "gridTemplateColumns");
+u([
+  m({ attribute: "row-type" })
+], c.prototype, "rowType");
+u([
+  n
+], c.prototype, "rowData");
+u([
+  n
+], c.prototype, "columnDefinitions");
+u([
+  n
+], c.prototype, "cellItemTemplate");
+u([
+  n
+], c.prototype, "headerCellItemTemplate");
+u([
+  n
+], c.prototype, "rowIndex");
+u([
+  n
+], c.prototype, "activeCellItemTemplate");
+u([
+  n
+], c.prototype, "defaultCellItemTemplate");
+u([
+  n
+], c.prototype, "defaultHeaderCellItemTemplate");
+u([
+  n
+], c.prototype, "cellElements");
+u([
+  n
+], c.prototype, "_selectable");
+u([
+  m({ mode: "boolean" })
+], c.prototype, "selected");
+var me = Object.defineProperty, d = (i, e, t, l) => {
+  for (var o = void 0, a = i.length - 1, r; a >= 0; a--)
+    (r = i[a]) && (o = r(e, t, o) || o);
+  return o && me(e, t, o), o;
+};
+const h = {
+  none: "none",
+  singleRow: "single-row",
+  multiRow: "multi-row",
+  singleCell: "single-cell",
+  multiCell: "multi-cell"
+}, s = class T extends I {
+  constructor() {
+    super(), this.noTabbing = !1, this.generateHeader = b.default, this.rowsData = [], this.columnDefinitions = null, this.focusRowIndex = 0, this.focusColumnIndex = 0, this.fixedColumnsPositions = [], this.rowsRepeatBehavior = null, this.rowsPlaceholder = null, this.generatedHeader = null, this.isUpdatingFocus = !1, this.pendingFocusUpdate = !1, this.rowindexUpdateQueued = !1, this.columnDefinitionsStale = !0, this.generatedGridTemplateColumns = "", this.focusOnCell = (e, t, l) => {
+      if (this.rowElements.length === 0) {
+        this.focusRowIndex = 0, this.focusColumnIndex = 0;
+        return;
+      }
+      const o = Math.max(
+        0,
+        Math.min(this.rowElements.length - 1, e)
+      ), r = this.rowElements[o].querySelectorAll(
+        '[role="cell"], [role="gridcell"], [role="columnheader"], [role="rowheader"], [data-vvd-component="data-grid-cell"]'
+      ), _ = Math.max(
+        0,
+        Math.min(r.length - 1, t)
+      ), $ = r[_];
+      l && this.scrollHeight !== this.clientHeight && (o < this.focusRowIndex && this.scrollTop > 0 || o > this.focusRowIndex && this.scrollTop < this.scrollHeight - this.clientHeight) && $.scrollIntoView({ block: "center", inline: "center" }), $.focus();
+    }, this.onChildListChange = (e, t) => {
+      e && e.length && (e.forEach((l) => {
+        l.addedNodes.forEach((o) => {
+          o.nodeType === 1 && (o.getAttribute("role") === "row" || o.getAttribute("row-type") === "default") && (o.columnDefinitions = this.columnDefinitions);
+        });
+      }), this.queueRowIndexUpdate());
+    }, this.queueRowIndexUpdate = () => {
+      this.rowindexUpdateQueued || (this.rowindexUpdateQueued = !0, x.queueUpdate(this.updateRowIndexes));
+    }, this.updateRowIndexes = () => {
+      let e = this.gridTemplateColumns;
+      if (e === void 0) {
+        if (this.generatedGridTemplateColumns === "" && this.rowElements.length > 0) {
+          const t = this.rowElements[0];
+          this.generatedGridTemplateColumns = new Array(
+            t.cellElements.length
+          ).fill("1fr").join(" ");
+        }
+        e = this.generatedGridTemplateColumns;
+      }
+      this.rowElements.forEach((t, l) => {
+        const o = t;
+        o.rowIndex = l, o.gridTemplateColumns = e, this.columnDefinitionsStale && (o.columnDefinitions = this.columnDefinitions);
+      }), this.rowindexUpdateQueued = !1, this.columnDefinitionsStale = !1;
+    }, this.#l = (e) => {
+      (e.key === "Enter" || e.key === " ") && this.#t(e);
+    }, this.#t = ({ target: e, ctrlKey: t, shiftKey: l, metaKey: o }) => {
+      if (!(e.getAttribute("role") !== "gridcell" || e.getAttribute("cell-type") !== "default")) {
+        if (this.selectionMode === h.singleCell || this.selectionMode === h.multiCell) {
+          this.#i({ target: e, ctrlKey: t, shiftKey: l, metaKey: o });
+          return;
+        }
+        (this.selectionMode === h.singleRow || this.selectionMode === h.multiRow) && this.#a({ target: e, ctrlKey: t, shiftKey: l, metaKey: o });
+      }
+    }, this.#i = ({
+      target: e,
+      ctrlKey: t,
+      shiftKey: l,
+      metaKey: o
+    }) => {
+      const a = e;
+      if (this.selectionMode === h.multiCell && (t || l || o))
+        a.selected = !this.#r.includes(a);
+      else {
+        const r = a.selected;
+        this._resetSelection(!0), a.selected = !r;
+      }
+    }, this.#a = ({
+      target: e,
+      ctrlKey: t,
+      shiftKey: l,
+      metaKey: o
+    }) => {
+      const a = e.parentNode;
+      if (this.selectionMode === h.multiRow && (t || l || o))
+        a.selected = !this.#n.includes(a);
+      else {
+        const r = a.selected;
+        this._resetSelection(!0), a.selected = !r;
+      }
+    }, this.#o = {
+      handleChange(e, t) {
+        t === "columnDefinitions" && e.$fastController.isConnected && e.toggleGeneratedHeader();
+      }
+    }, this._resetSelection = (e = !1) => {
+      const t = Array.from(
+        this.querySelectorAll('[role="gridcell"], [cell-type="default"]')
+      ), l = Array.from(
+        this.querySelectorAll('[role="row"], [row-type="default"]')
+      );
+      if (this.selectionMode === h.singleCell || this.selectionMode === h.multiCell) {
+        for (const o of t)
+          o._selectable = !0, o.selected = e ? !1 : o.selected || !1;
+        for (const o of l)
+          o._selectable = !1, o.selected = !1;
+      }
+      if (this.selectionMode === h.none)
+        for (const o of [...t, ...l])
+          o._selectable = !1, o.selected = !1;
+      if (this.selectionMode === h.singleRow || this.selectionMode === h.multiRow) {
+        for (const o of t)
+          o._selectable = !1, o.selected = !1;
+        for (const o of l)
+          o._selectable = !0, o.selected = e ? !1 : o.selected || !1;
+      }
+    }, this.addEventListener("click", this.#t), this.addEventListener("keydown", this.#l);
+  }
+  /**
+   *  generates a gridTemplateColumns based on columndata array
+   */
+  static generateTemplateColumns(e) {
+    let t = "";
+    return e.forEach((l) => {
+      t = `${t}${t === "" ? "" : " "}1fr`;
+    }), t;
+  }
+  /**
+   * @internal
+   */
+  noTabbingChanged() {
+    this.$fastController.isConnected && this.#e();
+  }
+  #e() {
+    this.setAttribute(
+      "tabIndex",
+      this.noTabbing || this.contains(document.activeElement) ? "-1" : "0"
+    );
+  }
+  /**
+   * @internal
+   */
+  generateHeaderChanged() {
+    this.$fastController.isConnected && this.toggleGeneratedHeader();
+  }
+  /**
+   * @internal
+   */
+  gridTemplateColumnsChanged() {
+    this.$fastController.isConnected && (this.updateRowIndexes(), this.fixedColumns && this.fixedColumns > 0 && this.applyFixedColumns());
+  }
+  /**
+   * @internal
+   */
+  rowsDataChanged() {
+    this.columnDefinitions === null && this.rowsData.length > 0 && (this.columnDefinitions = T.generateColumns(this.rowsData[0])), this.$fastController.isConnected && this.toggleGeneratedHeader();
+  }
+  /**
+   * @internal
+   */
+  columnDefinitionsChanged() {
+    if (this.columnDefinitions === null) {
+      this.generatedGridTemplateColumns = "";
+      return;
+    }
+    this.generatedGridTemplateColumns = T.generateTemplateColumns(
+      this.columnDefinitions
+    ), this.$fastController.isConnected && (this.columnDefinitionsStale = !0, this.queueRowIndexUpdate());
+  }
+  /**
+   * @internal
+   */
+  headerCellItemTemplateChanged() {
+    this.$fastController.isConnected && this.generatedHeader !== null && (this.generatedHeader.headerCellItemTemplate = this.headerCellItemTemplate);
+  }
+  /**
+   * @internal
+   */
+  focusRowIndexChanged() {
+    this.$fastController.isConnected && this.queueFocusUpdate();
+  }
+  /**
+   * @internal
+   */
+  focusColumnIndexChanged() {
+    this.$fastController.isConnected && this.queueFocusUpdate();
+  }
+  /**
+   * @internal
+   */
+  fixedColumnsChanged() {
+    this.$fastController.isConnected && (this.applyFixedColumns(), this.setupResizeObserver());
+  }
+  /**
+   * @internal
+   */
+  setupResizeObserver() {
+    this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = void 0), typeof ResizeObserver < "u" && this.fixedColumns && this.fixedColumns > 0 && (this.resizeObserver = new ResizeObserver(() => {
+      this.applyFixedColumns();
+    }), this.resizeObserver.observe(this));
+  }
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback(), this.rowItemTemplate === void 0 && (this.rowItemTemplate = this.defaultRowItemTemplate), this.rowsPlaceholder = document.createComment(""), this.appendChild(this.rowsPlaceholder), this.toggleGeneratedHeader(), this.rowsRepeatBehavior = new G(
+      (e) => e.rowsData,
+      (e) => e.rowItemTemplate,
+      { positioning: !0 }
+    ).createBehavior(this.rowsPlaceholder), this.$fastController.addBehaviors([this.rowsRepeatBehavior]), this.addEventListener("row-focused", this.handleRowFocus), this.addEventListener(R, this.handleFocus), this.addEventListener(y, this.handleKeydown), this.addEventListener(w, this.handleFocusOut), this.observer = new MutationObserver(this.onChildListChange), this.observer.observe(this, { childList: !0 }), this.setupResizeObserver(), x.queueUpdate(this.queueRowIndexUpdate), this.#e(), F.getNotifier(this).subscribe(
+      this.#o,
+      "columnDefinitions"
+    );
+  }
+  /**
+   * @internal
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("row-focused", this.handleRowFocus), this.removeEventListener(R, this.handleFocus), this.removeEventListener(y, this.handleKeydown), this.removeEventListener(
+      w,
+      this.handleFocusOut
+    ), this.observer.disconnect(), this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = void 0), this.rowsPlaceholder = null, this.generatedHeader = null, F.getNotifier(this).unsubscribe(
+      this.#o,
+      "columnDefinitions"
+    );
+  }
+  /**
+   * @internal
+   */
+  handleRowFocus(e) {
+    this.isUpdatingFocus = !0;
+    const t = e.target;
+    this.focusRowIndex = this.rowElements.indexOf(t), this.focusColumnIndex = t.focusColumnIndex, this.setAttribute("tabIndex", "-1"), this.isUpdatingFocus = !1;
+  }
+  /**
+   * @internal
+   */
+  handleFocus(e) {
+    this.focusOnCell(this.focusRowIndex, this.focusColumnIndex, !0);
+  }
+  /**
+   * @internal
+   */
+  handleFocusOut(e) {
+    (e.relatedTarget === null || !this.contains(e.relatedTarget)) && this.setAttribute("tabIndex", this.noTabbing ? "-1" : "0");
+  }
+  /**
+   * @internal
+   */
+  handleKeydown(e) {
+    if (e.defaultPrevented)
+      return;
+    let t;
+    const l = this.rowElements.length - 1, o = this.offsetHeight + this.scrollTop, a = this.rowElements[l];
+    switch (e.key) {
+      case ie:
+        e.preventDefault(), this.focusOnCell(this.focusRowIndex - 1, this.focusColumnIndex, !0);
+        break;
+      case le:
+        e.preventDefault(), this.focusOnCell(this.focusRowIndex + 1, this.focusColumnIndex, !0);
+        break;
+      case oe:
+        if (e.preventDefault(), this.rowElements.length === 0) {
+          this.focusOnCell(0, 0, !1);
+          break;
+        }
+        if (this.focusRowIndex === 0) {
+          this.focusOnCell(0, this.focusColumnIndex, !1);
+          return;
+        }
+        for (t = this.focusRowIndex - 1, t; t >= 0; t--) {
+          const r = this.rowElements[t];
+          if (r.offsetTop < this.scrollTop) {
+            this.scrollTop = r.offsetTop + r.clientHeight - this.clientHeight;
+            break;
+          }
+        }
+        this.focusOnCell(t, this.focusColumnIndex, !1);
+        break;
+      case te:
+        if (e.preventDefault(), this.rowElements.length === 0) {
+          this.focusOnCell(0, 0, !1);
+          break;
+        }
+        if (this.focusRowIndex >= l || a.offsetTop + a.offsetHeight <= o) {
+          this.focusOnCell(l, this.focusColumnIndex, !1);
+          return;
+        }
+        for (t = this.focusRowIndex + 1, t; t <= l; t++) {
+          const r = this.rowElements[t];
+          if (r.offsetTop + r.offsetHeight > o) {
+            let _ = 0;
+            this.generateHeader === b.sticky && this.generatedHeader !== null && (_ = this.generatedHeader.clientHeight), this.scrollTop = r.offsetTop - _;
+            break;
+          }
+        }
+        this.focusOnCell(t, this.focusColumnIndex, !1);
+        break;
+      case z:
+        e.ctrlKey && (e.preventDefault(), this.focusOnCell(0, 0, !0));
+        break;
+      case P:
+        e.ctrlKey && this.columnDefinitions !== null && (e.preventDefault(), this.focusOnCell(
+          this.rowElements.length - 1,
+          this.columnDefinitions.length - 1,
+          !0
+        ));
+        break;
+    }
+  }
+  queueFocusUpdate() {
+    this.isUpdatingFocus && this.contains(document.activeElement) || this.pendingFocusUpdate === !1 && (this.pendingFocusUpdate = !0, x.queueUpdate(() => this.updateFocus()));
+  }
+  updateFocus() {
+    this.pendingFocusUpdate = !1, this.focusOnCell(this.focusRowIndex, this.focusColumnIndex, !0);
+  }
+  toggleGeneratedHeader() {
+    if (this.generatedHeader !== null && (this.removeChild(this.generatedHeader), this.generatedHeader = null), this.generateHeader !== b.none && this.columnDefinitions !== null) {
+      const e = document.createElement(
+        this.rowElementTag
+      );
+      this.generatedHeader = e, this.generatedHeader.columnDefinitions = this.columnDefinitions, this.generatedHeader.gridTemplateColumns = this.gridTemplateColumns, this.generatedHeader.rowType = this.generateHeader === b.sticky ? v.stickyHeader : v.header, this.firstChild !== null && this.insertBefore(e, this.firstChild);
+      return;
+    }
+  }
+  /**
+   *
+   *
+   * @internal
+   */
+  slottedRowElementsChanged(e, t) {
+    this._resetSelection();
+  }
+  get #n() {
+    return this.rowElements.filter((e) => e.selected);
+  }
+  get #r() {
+    return this.rowElements.reduce((e, t) => {
+      const o = Array.from(t.children).filter(
+        (a) => a.selected
+      );
+      return e.concat(o);
+    }, []);
+  }
+  selectionModeChanged(e) {
+    if (e === void 0) {
+      x.queueUpdate(this._resetSelection);
+      return;
+    }
+    this._resetSelection(!0);
+  }
+  #l;
+  #t;
+  #i;
+  #a;
+  #o;
+  static generateColumns(e) {
+    return Object.keys(e).map((t, l) => ({
+      columnDataKey: t,
+      gridColumn: `${l}`
+    }));
+  }
+  /**
+   * @internal
+   */
+  applyFixedColumns() {
+    if (!this.fixedColumns || this.fixedColumns <= 0) {
+      this.clearFixedColumns();
+      return;
+    }
+    this.calculateFixedColumnPositions(), this.applyFixedColumnStyling();
+  }
+  /**
+   * Applies fixed columns styling using cached positions
+   * @internal
+   */
+  applyFixedColumnStyling() {
+    this.rowElements.forEach((e) => {
+      const t = e.querySelectorAll(
+        '[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]'
+      );
+      this.fixedColumnsPositions.forEach((l, o) => {
+        if (o < t.length) {
+          const a = t[o];
+          typeof a.setFixedPosition == "function" && a.setFixedPosition(`${l}px`);
+        }
+      });
+    });
+  }
+  /**
+   * Calculates and caches fixed columns positions based on current layout
+   * @internal
+   */
+  calculateFixedColumnPositions() {
+    if (this.fixedColumnsPositions = [], this.rowElements.length === 0) return;
+    const e = this.rowElements[0].querySelectorAll(
+      '[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]'
+    );
+    let t = 0;
+    for (let l = 0; l < Math.min(this.fixedColumns, e.length); l++)
+      this.fixedColumnsPositions.push(t), t += e[l].offsetWidth;
+  }
+  /**
+   * Clears all fixed columns state and styling
+   * @internal
+   */
+  clearFixedColumns() {
+    if (this.rowElements.length === 0) {
+      this.fixedColumnsPositions = [];
+      return;
+    }
+    this.rowElements.forEach((e) => {
+      const t = e.querySelectorAll(
+        '[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]'
+      );
+      this.fixedColumnsPositions.forEach((l, o) => {
+        if (o < t.length) {
+          const a = t[o];
+          typeof a.setFixedPosition == "function" && a.setFixedPosition(void 0);
+        }
+      });
+    }), this.fixedColumnsPositions = [];
+  }
+};
+d([
+  m({ attribute: "no-tabbing", mode: "boolean" })
+], s.prototype, "noTabbing");
+d([
+  m({ attribute: "generate-header" })
+], s.prototype, "generateHeader");
+d([
+  m({ attribute: "grid-template-columns" })
+], s.prototype, "gridTemplateColumns");
+d([
+  n
+], s.prototype, "rowsData");
+d([
+  n
+], s.prototype, "columnDefinitions");
+d([
+  n
+], s.prototype, "rowItemTemplate");
+d([
+  n
+], s.prototype, "cellItemTemplate");
+d([
+  n
+], s.prototype, "headerCellItemTemplate");
+d([
+  n
+], s.prototype, "focusRowIndex");
+d([
+  n
+], s.prototype, "focusColumnIndex");
+d([
+  m({ attribute: "fixed-columns", converter: j })
+], s.prototype, "fixedColumns");
+d([
+  n
+], s.prototype, "defaultRowItemTemplate");
+d([
+  n
+], s.prototype, "rowElementTag");
+d([
+  n
+], s.prototype, "rowElements");
+d([
+  n
+], s.prototype, "slottedRowElements");
+d([
+  m({ attribute: "selection-mode" })
+], s.prototype, "selectionMode");
+let pe = s;
+function ve(i) {
+  const e = i.tagFor(c);
+  return f`
+    <${e}
+        :rowData="${(t) => t}"
+        :cellItemTemplate="${(t, l) => l.parent.cellItemTemplate}"
+        :headerCellItemTemplate="${(t, l) => l.parent.headerCellItemTemplate}"
+    ></${e}>
+`;
+}
+function ge(i) {
+  return i.selectionMode === void 0 || i.selectionMode === h.none ? null : i.selectionMode.includes("multi") ? "true" : "false";
+}
+function Ce(i) {
+  if (i.columnDefinitions === null) {
+    const e = i.querySelector(
+      '[cell-type="columnheader"]'
+    )?.parentElement;
+    if (i.generateHeader === b.default && (e?.getAttribute("row-type") === v.header || e?.getAttribute("row-type") === v.stickyHeader))
+      return;
+    if (e) {
+      const t = i.generateHeader === b.sticky ? v.stickyHeader : v.header;
+      e.setAttribute("row-type", t);
+    }
+  }
+}
+function be(i, { event: e }) {
+  e.stopPropagation();
+}
+const we = (i) => {
+  const e = ve(i), t = i.tagFor(c);
+  return f`
+		<template
+			aria-multiselectable="${ge}"
+			role="grid"
+			tabindex="0"
+			@sort="${be}"
+			:rowElementTag="${() => t}"
+			:defaultRowItemTemplate="${e}"
+			${M({
+    property: "rowElements",
+    filter: K("[role=row],[data-vvd-component=data-grid-row]")
+  })}
+		>
+			<div class="base">
+				${Ce}
+				<slot ${U("slottedRowElements")}></slot>
+			</div>
+		</template>
+	`;
+};
+function ye(i) {
+  return i._selectable && i.selected ? "true" : i._selectable && !i.selected ? "false" : null;
+}
+function _e(i) {
+  const e = i.tagFor(p);
+  return f`
+    <${e}
+        cell-type="${(t) => t.isRowHeader ? "rowheader" : void 0}"
+        grid-column="${(t, l) => l.index + 1}"
+        :rowData="${(t, l) => l.parent.rowData}"
+        :columnDefinition="${(t) => t}"
+				selected="${(t, l) => l.parent.ariaSelected === "true" ? !0 : null}"
+    ></${e}>
+`;
+}
+function xe(i) {
+  const e = i.tagFor(p);
+  return f`
+    <${e}
+        cell-type="columnheader"
+        grid-column="${(t, l) => l.index + 1}"
+        :columnDefinition="${(t) => t}"
+    ></${e}>
+`;
+}
+const De = (i) => {
+  const e = _e(i), t = xe(i), l = (o) => V("base", ["selected", !!o.selected]);
+  return f`
+		<template
+			${L({
+    role: "row",
+    ariaSelected: ye
+  })}
+			class="${(o) => o.rowType !== "default" ? o.rowType : ""}"
+			:defaultCellItemTemplate="${e}"
+			:defaultHeaderCellItemTemplate="${t}"
+			${M({
+    property: "cellElements",
+    filter: K(
+      '[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"],[data-vvd-component="data-grid-cell"]'
+    )
+  })}
+		>
+			<div
+				class="${l}"
+				style="grid-template-columns: ${(o) => o.gridTemplateColumns};"
+			>
+				<slot ${U("slottedCellElements")}></slot>
+			</div>
+		</template>
+	`;
+};
+function k(i) {
+  return i.cellType === "columnheader" && i.sortDirection !== void 0 && i.sortDirection !== D.other;
+}
+function Te(i) {
+  return i.sortDirection === D.ascending ? "sort-asc-solid" : i.sortDirection === D.descending ? "sort-desc-solid" : "sort-solid";
+}
+function ke(i) {
+  return i._selectable && i.selected ? "true" : i._selectable && !i.selected ? "false" : null;
+}
+function Ie(i) {
+  const e = i.tagFor(B);
+  return f`
+		${q(
+    k,
+    f`
+				<${e} class="header-icon" name="${Te}"></${e}>
+			`
+  )}
+	`;
+}
+function Ee(i, e) {
+  return (e.key === O || e.key === ae) && i._handleInteraction(), !0;
+}
+const $e = (i) => {
+  const e = i.tagFor(W), t = (l) => V("base", ["selected", !!l.selected]);
+  return f`
+		<template
+			tabindex="-1"
+			${L({
+    role: (l) => H[l.cellType] ?? H.default,
+    ariaSelected: ke,
+    ariaSort: (l) => l.sortDirection ?? null
+  })}
+			@click="${(l) => l._handleInteraction()}"
+			@keydown="${(l, o) => Ee(l, o.event)}"
+		>
+			<div
+				class="${t}"
+				role="${(l) => k(l) ? "button" : void 0}"
+			>
+				${(l) => l.selected ? f`<${e}>${(o) => o.locale.dataGrid.cell.selected}</${e}>` : null}
+				<slot></slot>
+				${q(
+    k,
+    f`<${e}>${(l) => l.locale.dataGrid.cell.button}</${e}>
+					`
+  )}
+				${(l) => Ie(i)}
+			</div>
+		</template>
+	`;
+}, Fe = E(
+  "data-grid-cell",
+  p,
+  $e,
+  [Q, J],
+  {
+    styles: ce
+  }
+), Re = E(
+  "data-grid-row",
+  c,
+  De,
+  [Fe],
+  {
+    styles: se
+  }
+), Se = E(
+  "data-grid",
+  pe,
+  we,
+  [Re],
+  {
+    styles: re
+  }
+), He = N(Se);
+He();