@vonage/vivid 5.15.1 → 5.17.0

package/data-grid/index.js

@@ -1,1060 +1,707 @@
-import { I as N, i as W } from "../bundled/definition2.js";
-import { V as $, h as u, a as f, o as a, b as A, U as D, O as H, n as J, c as X, d as F } from "../bundled/vivid-element.js";
-import { V as Y, v as Z } from "../bundled/definition14.js";
-import { D as v, a as _, b as g, G as b, c as O } from "../bundled/data-grid.options.js";
-import { R as L } from "../bundled/repeat.js";
-import { n as T } from "../bundled/normalize.js";
-import { d as ee, e as te, f as P, k as M, a as K, g as oe, h as ie, i as le, j as ne, b as ae, c as re, l as se } from "../bundled/key-codes.js";
-import { H as U, a as V } from "../bundled/host-semantics.js";
-import { c as q } from "../bundled/children.js";
-import { s as S, e as Q } from "../bundled/slotted.js";
-import { L as ce } from "../bundled/localized.js";
-import { c as B } from "../bundled/class-names.js";
-import { w as I } from "../bundled/when.js";
-const z = "focus", G = "focusin", w = "focusout", y = "keydown", de = ":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}", ue = ".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)}", he = ':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(--focus-stroke-color, 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)}.content{display:flex;overflow:hidden;align-items:center}.content[role=button]{cursor:pointer}slot:not([name]){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:not([name]){inline-size:100%}.header-icon{flex-shrink:0;margin-inline-start:16px}slot[name=action-items]{display:flex;flex-shrink:0;align-items:center}.base.has-action-items slot[name=action-items]{margin-inline-start:16px}';
-var me = Object.defineProperty, C = (i, e, t, l) => {
-  for (var o = void 0, n = i.length - 1, r; n >= 0; n--)
-    (r = i[n]) && (o = r(e, t, o) || o);
-  return o && me(e, t, o), o;
+import { t as e } from "../bundled/localized.js";
+import { O as t, T as n, c as r, d as i, l as a, o, s as ee, t as s, u as te, w as c } from "../bundled/vivid-element.js";
+import { t as l } from "../bundled/repeat.js";
+import { t as u } from "../bundled/normalize.js";
+import { t as d } from "../bundled/when.js";
+import { r as f, t as p } from "../bundled/slotted.js";
+import { t as m } from "../bundled/children.js";
+import { n as h, r as g } from "../bundled/definition.js";
+import { r as _, t as v } from "../bundled/definition2.js";
+import { t as y } from "../bundled/decorate.js";
+import { t as b } from "../bundled/class-names.js";
+import { a as ne, c as x, i as S, l as C, n as w, o as T, r as E, s as D, t as O } from "../bundled/key-codes.js";
+import { n as k, t as A } from "../bundled/host-semantics.js";
+import { a as j, i as M, n as N, r as P, t as F } from "../bundled/data-grid.options.js";
+//#region ../../node_modules/.pnpm/@microsoft+fast-web-utilities@6.0.0/node_modules/@microsoft/fast-web-utilities/dist/events.js
+var I = "focus", L = "focusin", R = "focusout", z = "keydown", B = ":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%);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{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base{block-size:inherit;inline-size:100%;max-block-size:inherit;position:relative;overflow:auto}", V = ".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{box-sizing:border-box;width:100%;color:var(--vvd-color-canvas-text);display:grid}:host([row-type=sticky-header]) .base{z-index:9;background:var(--data-grid-row-background,var(--vvd-color-canvas));position:sticky;top:0}:host([row-type=hidden-header]) .base{display:none}:host([selected]:not([row-type*=header])) .base{background-color:var(--_appearance-color-fill)}", H = ":host{block-size:100%;min-inline-size:80px}:host(:focus-visible){outline:none}:host([data-fixed]){z-index:5;background:var(--data-grid-cell-background,var(--vvd-color-surface-2dp));position:sticky}:host([data-fixed]):before{z-index:1;width:1px;content:\"\";pointer-events:none;block-size:100%;position:absolute;top:0;right:0;box-shadow:4px 0 4px #0000001a,2px 0 2px #0000000d,1px 0 1px #0000000d}.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{box-sizing:border-box;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 * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));align-items:center;padding-block:13px 14px;padding-inline:12px;display:flex}:host(:focus-visible) .base{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,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 * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_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([selected]:not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}.content{align-items:center;display:flex;overflow:hidden}.content[role=button]{cursor:pointer}slot:not([name]){text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space,var(--_data-grid-cell-default-white-space));display:block;overflow:hidden}:host(:not([cell-type=columnheader][aria-sort])) slot:not([name]){inline-size:100%}.header-icon{flex-shrink:0;margin-inline-start:16px}slot[name=action-items]{flex-shrink:0;align-items:center;display:flex}.base.has-action-items slot[name=action-items]{margin-inline-start:16px}", U = {
+	none: "none",
+	singleRow: "single-row",
+	multiRow: "multi-row",
+	singleCell: "single-cell",
+	multiCell: "multi-cell"
+}, W = class e extends s {
+	static generateTemplateColumns(e) {
+		let t = "";
+		return e.forEach((e) => {
+			t = `${t}${t === "" ? "" : " "}1fr`;
+		}), t;
+	}
+	noTabbingChanged() {
+		this.$fastController.isConnected && this.#e();
+	}
+	#e() {
+		this.setAttribute("tabIndex", this.noTabbing || this.contains(document.activeElement) ? "-1" : "0");
+	}
+	generateHeaderChanged() {
+		this.$fastController.isConnected && this.toggleGeneratedHeader();
+	}
+	gridTemplateColumnsChanged() {
+		/* v8 ignore if -- @preserve */
+		this.$fastController.isConnected && (this.updateRowIndexes(), this.fixedColumns && this.fixedColumns > 0 && this.applyFixedColumns());
+	}
+	rowsDataChanged() {
+		this.columnDefinitions === null && this.rowsData.length > 0 && (this.columnDefinitions = e.generateColumns(this.rowsData[0])), this.$fastController.isConnected && this.toggleGeneratedHeader();
+	}
+	columnDefinitionsChanged() {
+		if (this.columnDefinitions === null) {
+			this.generatedGridTemplateColumns = "";
+			return;
+		}
+		/* v8 ignore if -- @preserve */
+		this.generatedGridTemplateColumns = e.generateTemplateColumns(this.columnDefinitions), this.$fastController.isConnected && (this.columnDefinitionsStale = !0, this.queueRowIndexUpdate());
+	}
+	headerCellItemTemplateChanged() {
+		/* v8 ignore if -- @preserve */
+		this.$fastController.isConnected && this.generatedHeader !== null && (this.generatedHeader.headerCellItemTemplate = this.headerCellItemTemplate);
+	}
+	focusRowIndexChanged() {
+		this.$fastController.isConnected && this.queueFocusUpdate();
+	}
+	focusColumnIndexChanged() {
+		this.$fastController.isConnected && this.queueFocusUpdate();
+	}
+	fixedColumnsChanged() {
+		/* v8 ignore if -- @preserve */
+		this.$fastController.isConnected && (this.applyFixedColumns(), this.setupResizeObserver());
+	}
+	setupResizeObserver() {
+		this.resizeObserver &&= (this.resizeObserver.disconnect(), void 0), typeof ResizeObserver < "u" && this.fixedColumns && this.fixedColumns > 0 && (this.resizeObserver = new ResizeObserver(() => {
+			this.applyFixedColumns();
+		}), this.resizeObserver.observe(this));
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.rowItemTemplate === void 0 && (this.rowItemTemplate = this.defaultRowItemTemplate), this.behaviorOrchestrator === null && (this.behaviorOrchestrator = r.create(this), this.$fastController.addBehavior(this.behaviorOrchestrator), this.behaviorOrchestrator.addBehaviorFactory(new l(u((e) => e.rowsData), u((e) => e.rowItemTemplate), { positioning: !0 }), this.appendChild(document.createComment("")))), this.toggleGeneratedHeader(), this.addEventListener("row-focused", this.handleRowFocus), this.addEventListener(I, this.handleFocus), this.addEventListener(z, this.handleKeydown), this.addEventListener(R, this.handleFocusOut), this.observer = new MutationObserver(this.onChildListChange), this.observer.observe(this, { childList: !0 }), this.setupResizeObserver(), t.enqueue(this.queueRowIndexUpdate), this.#e(), c.getNotifier(this).subscribe(this.#s, "columnDefinitions");
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("row-focused", this.handleRowFocus), this.removeEventListener(I, this.handleFocus), this.removeEventListener(z, this.handleKeydown), this.removeEventListener(R, this.handleFocusOut), this.observer.disconnect(), this.resizeObserver &&= (this.resizeObserver.disconnect(), void 0), this.generatedHeader = null, c.getNotifier(this).unsubscribe(this.#s, "columnDefinitions");
+	}
+	handleRowFocus(e) {
+		this.isUpdatingFocus = !0;
+		let t = e.target;
+		this.focusRowIndex = this.rowElements.indexOf(t), this.focusColumnIndex = t.focusColumnIndex, this.setAttribute("tabIndex", "-1"), this.isUpdatingFocus = !1;
+	}
+	handleFocus(e) {
+		this.focusOnCell(this.focusRowIndex, this.focusColumnIndex, !0);
+	}
+	handleFocusOut(e) {
+		(e.relatedTarget === null || !this.contains(e.relatedTarget)) && this.setAttribute("tabIndex", this.noTabbing ? "-1" : "0");
+	}
+	handleKeydown(e) {
+		if (e.defaultPrevented) return;
+		let t, n = this.rowElements.length - 1, r = this.offsetHeight + this.scrollTop, i = this.rowElements[n];
+		switch (e.key) {
+			case S:
+				e.preventDefault(), this.focusOnCell(this.focusRowIndex - 1, this.focusColumnIndex, !0);
+				break;
+			case O:
+				e.preventDefault(), this.focusOnCell(this.focusRowIndex + 1, this.focusColumnIndex, !0);
+				break;
+			case C:
+				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 >= 0; t--) {
+					let e = this.rowElements[t];
+					if (e.offsetTop < this.scrollTop) {
+						this.scrollTop = e.offsetTop + e.clientHeight - this.clientHeight;
+						break;
+					}
+				}
+				this.focusOnCell(t, this.focusColumnIndex, !1);
+				break;
+			case x:
+				if (e.preventDefault(), this.rowElements.length === 0) {
+					this.focusOnCell(0, 0, !1);
+					break;
+				}
+				if (this.focusRowIndex >= n || i.offsetTop + i.offsetHeight <= r) {
+					this.focusOnCell(n, this.focusColumnIndex, !1);
+					return;
+				}
+				for (t = this.focusRowIndex + 1; t <= n; t++) {
+					let e = this.rowElements[t];
+					if (e.offsetTop + e.offsetHeight > r) {
+						let t = 0;
+						this.generateHeader === j.sticky && this.generatedHeader !== null && (t = this.generatedHeader.clientHeight), this.scrollTop = e.offsetTop - t;
+						break;
+					}
+				}
+				this.focusOnCell(t, this.focusColumnIndex, !1);
+				break;
+			case D:
+				/* v8 ignore else -- @preserve */
+				e.ctrlKey && (e.preventDefault(), this.focusOnCell(0, 0, !0));
+				break;
+			case "End":
+				/* v8 ignore else -- @preserve */
+				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, t.enqueue(() => 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 !== j.none && this.columnDefinitions !== null) {
+			let e = document.createElement(this.rowElementTag);
+			/* v8 ignore else -- @preserve */
+			this.generatedHeader = e, this.generatedHeader.columnDefinitions = this.columnDefinitions, this.generatedHeader.gridTemplateColumns = this.gridTemplateColumns, this.generatedHeader.rowType = this.generateHeader === j.sticky ? M.stickyHeader : M.header, this.firstChild !== null && this.insertBefore(e, this.firstChild);
+			return;
+		}
+	}
+	slottedRowElementsChanged(e, t) {
+		this._resetSelection();
+	}
+	get #t() {
+		return this.rowElements.filter((e) => e.selected);
+	}
+	get #n() {
+		return this.rowElements.reduce((e, t) => {
+			let n = Array.from(t.children).filter((e) => e.selected);
+			return e.concat(n);
+		}, []);
+	}
+	selectionModeChanged(e) {
+		if (e === void 0) {
+			t.enqueue(this._resetSelection);
+			return;
+		}
+		this._resetSelection(!0);
+	}
+	#r = (e) => {
+		(e.key === "Enter" || e.key === " ") && this.#i(e);
+	};
+	#i = ({ target: e, ctrlKey: t, shiftKey: n, metaKey: r }) => {
+		if (!(e.getAttribute("role") !== "gridcell" || e.getAttribute("cell-type") !== "default")) {
+			if (this.selectionMode === U.singleCell || this.selectionMode === U.multiCell) {
+				this.#a({
+					target: e,
+					ctrlKey: t,
+					shiftKey: n,
+					metaKey: r
+				});
+				return;
+			}
+			(this.selectionMode === U.singleRow || this.selectionMode === U.multiRow) && this.#o({
+				target: e,
+				ctrlKey: t,
+				shiftKey: n,
+				metaKey: r
+			});
+		}
+	};
+	#a = ({ target: e, ctrlKey: t, shiftKey: n, metaKey: r }) => {
+		let i = e;
+		if (this.selectionMode === U.multiCell && (t || n || r)) i.selected = !this.#n.includes(i);
+		else {
+			let e = i.selected;
+			this._resetSelection(!0), i.selected = !e;
+		}
+	};
+	#o = ({ target: e, ctrlKey: t, shiftKey: n, metaKey: r }) => {
+		let i = e.parentNode;
+		if (this.selectionMode === U.multiRow && (t || n || r)) i.selected = !this.#t.includes(i);
+		else {
+			let e = i.selected;
+			this._resetSelection(!0), i.selected = !e;
+		}
+	};
+	constructor() {
+		super(), this.noTabbing = !1, this.generateHeader = j.default, this.rowsData = [], this.columnDefinitions = null, this.focusRowIndex = 0, this.focusColumnIndex = 0, this.fixedColumnsPositions = [], this.behaviorOrchestrator = null, this.generatedHeader = null, this.isUpdatingFocus = !1, this.pendingFocusUpdate = !1, this.rowindexUpdateQueued = !1, this.columnDefinitionsStale = !0, this.generatedGridTemplateColumns = "", this.focusOnCell = (e, t, n) => {
+			if (this.rowElements.length === 0) {
+				this.focusRowIndex = 0, this.focusColumnIndex = 0;
+				return;
+			}
+			let r = Math.max(0, Math.min(this.rowElements.length - 1, e)), i = this.rowElements[r].querySelectorAll("[role=\"cell\"], [role=\"gridcell\"], [role=\"columnheader\"], [role=\"rowheader\"], [data-vvd-component=\"data-grid-cell\"]"), a = i[Math.max(0, Math.min(i.length - 1, t))];
+			n && this.scrollHeight !== this.clientHeight && (r < this.focusRowIndex && this.scrollTop > 0 || r > this.focusRowIndex && this.scrollTop < this.scrollHeight - this.clientHeight) && a.scrollIntoView({
+				block: "center",
+				inline: "center"
+			}), a.focus();
+		}, this.onChildListChange = (e, t) => {
+			/* v8 ignore else -- @preserve */
+			e && e.length && (e.forEach((e) => {
+				e.addedNodes.forEach((e) => {
+					e.nodeType === 1 && (e.getAttribute("role") === "row" || e.getAttribute("row-type") === "default") && (e.columnDefinitions = this.columnDefinitions);
+				});
+			}), this.queueRowIndexUpdate());
+		}, this.queueRowIndexUpdate = () => {
+			this.rowindexUpdateQueued || (this.rowindexUpdateQueued = !0, t.enqueue(this.updateRowIndexes));
+		}, this.updateRowIndexes = () => {
+			let e = this.gridTemplateColumns;
+			if (e === void 0) {
+				if (this.generatedGridTemplateColumns === "" && this.rowElements.length > 0) {
+					let e = this.rowElements[0];
+					this.generatedGridTemplateColumns = Array(e.cellElements.length).fill("1fr").join(" ");
+				}
+				e = this.generatedGridTemplateColumns;
+			}
+			this.rowElements.forEach((t, n) => {
+				let r = t;
+				r.rowIndex = n, r.gridTemplateColumns = e, this.columnDefinitionsStale && (r.columnDefinitions = this.columnDefinitions);
+			}), this.rowindexUpdateQueued = !1, this.columnDefinitionsStale = !1;
+		}, this._resetSelection = (e = !1) => {
+			let t = Array.from(this.querySelectorAll("[role=\"gridcell\"], [cell-type=\"default\"]")), n = Array.from(this.querySelectorAll("[role=\"row\"], [row-type=\"default\"]"));
+			if (this.selectionMode === U.singleCell || this.selectionMode === U.multiCell) {
+				for (let n of t) n._selectable = !0, n.selected = e ? !1 : n.selected || !1;
+				for (let e of n) e._selectable = !1, e.selected = !1;
+			}
+			if (this.selectionMode === U.none) for (let e of [...t, ...n]) e._selectable = !1, e.selected = !1;
+			if (this.selectionMode === U.singleRow || this.selectionMode === U.multiRow) {
+				for (let e of t) e._selectable = !1, e.selected = !1;
+				for (let t of n) t._selectable = !0, t.selected = e ? !1 : t.selected || !1;
+			}
+		}, this.addEventListener("click", this.#i), this.addEventListener("keydown", this.#r);
+	}
+	#s = { handleChange(e, t) {
+		/* v8 ignore else -- @preserve */
+		t === "columnDefinitions" && e.$fastController.isConnected && e.toggleGeneratedHeader();
+	} };
+	static generateColumns(e) {
+		return Object.keys(e).map((e, t) => ({
+			columnDataKey: e,
+			gridColumn: `${t}`
+		}));
+	}
+	applyFixedColumns() {
+		if (!this.fixedColumns || this.fixedColumns <= 0) {
+			this.clearFixedColumns();
+			return;
+		}
+		this.calculateFixedColumnPositions(), this.applyFixedColumnStyling();
+	}
+	applyFixedColumnStyling() {
+		this.rowElements.forEach((e) => {
+			let t = e.querySelectorAll("[role=\"cell\"], [role=\"gridcell\"], [role=\"columnheader\"], [cell-type=\"default\"], [cell-type=\"columnheader\"]");
+			this.fixedColumnsPositions.forEach((e, n) => {
+				/* v8 ignore else -- @preserve */
+				if (n < t.length) {
+					let r = t[n];
+					/* v8 ignore else -- @preserve */
+					typeof r.setFixedPosition == "function" && r.setFixedPosition(`${e}px`);
+				}
+			});
+		});
+	}
+	calculateFixedColumnPositions() {
+		if (this.fixedColumnsPositions = [], this.rowElements.length === 0) return;
+		let e = this.rowElements[0].querySelectorAll("[role=\"cell\"], [role=\"gridcell\"], [role=\"columnheader\"], [cell-type=\"default\"], [cell-type=\"columnheader\"]"), t = 0;
+		for (let n = 0; n < Math.min(this.fixedColumns, e.length); n++) this.fixedColumnsPositions.push(t), t += e[n].offsetWidth;
+	}
+	clearFixedColumns() {
+		if (this.rowElements.length === 0) {
+			this.fixedColumnsPositions = [];
+			return;
+		}
+		this.rowElements.forEach((e) => {
+			let t = e.querySelectorAll("[role=\"cell\"], [role=\"gridcell\"], [role=\"columnheader\"], [cell-type=\"default\"], [cell-type=\"columnheader\"]");
+			this.fixedColumnsPositions.forEach((e, n) => {
+				/* v8 ignore else -- @preserve */
+				if (n < t.length) {
+					let e = t[n];
+					/* v8 ignore else -- @preserve */
+					typeof e.setFixedPosition == "function" && e.setFixedPosition(void 0);
+				}
+			});
+		}), this.fixedColumnsPositions = [];
+	}
 };
-const fe = u`
-	<template>
-		${(i) => i.rowData === null || i.columnDefinition === null || i.columnDefinition.columnDataKey === null ? null : i.rowData[i.columnDefinition.columnDataKey]}
-	</template>
-`, pe = u`
-	<template>
-		${(i) => i.columnDefinition.title === void 0 ? i.columnDefinition.columnDataKey : i.columnDefinition.title}
-	</template>
-`;
-class p extends ce(U($)) {
-  constructor() {
-    super(...arguments), this.cellType = v.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(G, 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(G, 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 v.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 === v.default && this.columnDefinition.cellInternalFocusQueue !== !0 || this.cellType === v.columnHeader && this.columnDefinition.headerCellInternalFocusQueue !== !0))
-      switch (e.key) {
-        case P:
-        case te:
-          if (this.contains(document.activeElement) && document.activeElement !== this)
-            return;
-          switch (this.cellType) {
-            case v.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 ee: {
-          this.contains(document.activeElement) && document.activeElement !== this && (this.focus(), e.preventDefault());
-          break;
-        }
-      }
-  }
-  updateCellView() {
-    if (this.disconnectCellView(), this.columnDefinition !== null) {
-      switch (this.cellType) {
-        case v.columnHeader:
-          this.columnDefinition.headerCellTemplate !== void 0 ? this.customCellView = this.columnDefinition.headerCellTemplate.render(
-            this,
-            this
-          ) : this.customCellView = pe.render(
-            this,
-            this
-          );
-          break;
-        case v.rowHeader:
-        case v.default:
-          this.columnDefinition.cellTemplate !== void 0 ? this.customCellView = this.columnDefinition.cellTemplate.render(
-            this,
-            this
-          ) : this.customCellView = fe.render(this, this);
-          break;
-      }
-      this.columnDefinition?.sortable ? this.columnDefinition.sortDirection ? this.sortDirection = this.columnDefinition.sortDirection : this.sortDirection = _.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([
-  f({ attribute: "cell-type" })
-], p.prototype, "cellType");
-C([
-  f({ attribute: "grid-column" })
-], p.prototype, "gridColumn");
-C([
-  a
-], p.prototype, "rowData");
-C([
-  a
-], p.prototype, "columnDefinition");
-C([
-  a
-], p.prototype, "_selectable");
-C([
-  f({ mode: "boolean" })
-], p.prototype, "selected");
-C([
-  f({ attribute: "sort-direction" })
-], p.prototype, "sortDirection");
-C([
-  a
-], p.prototype, "_actionItemsSlottedContent");
-var ve = Object.defineProperty, h = (i, e, t, l) => {
-  for (var o = void 0, n = i.length - 1, r; n >= 0; n--)
-    (r = i[n]) && (o = r(e, t, o) || o);
-  return o && ve(e, t, o), o;
+y([a({
+	attribute: "no-tabbing",
+	mode: "boolean"
+})], W.prototype, "noTabbing", void 0), y([a({ attribute: "generate-header" })], W.prototype, "generateHeader", void 0), y([a({ attribute: "grid-template-columns" })], W.prototype, "gridTemplateColumns", void 0), y([n], W.prototype, "rowsData", void 0), y([n], W.prototype, "columnDefinitions", void 0), y([n], W.prototype, "rowItemTemplate", void 0), y([n], W.prototype, "cellItemTemplate", void 0), y([n], W.prototype, "headerCellItemTemplate", void 0), y([n], W.prototype, "focusRowIndex", void 0), y([n], W.prototype, "focusColumnIndex", void 0), y([a({
+	attribute: "fixed-columns",
+	converter: te
+})], W.prototype, "fixedColumns", void 0), y([n], W.prototype, "defaultRowItemTemplate", void 0), y([n], W.prototype, "rowElementTag", void 0), y([n], W.prototype, "rowElements", void 0), y([n], W.prototype, "slottedRowElements", void 0), y([a({ attribute: "selection-mode" })], W.prototype, "selectionMode", void 0);
+//#endregion
+//#region src/lib/data-grid/data-grid-row.ts
+var G = class extends A(s) {
+	constructor(...e) {
+		super(...e), this.rowType = M.default, this.rowData = null, this.columnDefinitions = null, this.behaviorOrchestrator = null, this.focusColumnIndex = 0, this.updateRowStyle = () => {
+			this.style.gridTemplateColumns = this.gridTemplateColumns;
+		}, this.ariaSelected = null, this._selectable = !1, this.selected = !1;
+	}
+	gridTemplateColumnsChanged() {
+		this.$fastController.isConnected && this.updateRowStyle();
+	}
+	rowTypeChanged() {
+		this.$fastController.isConnected && this.updateItemTemplate();
+	}
+	cellItemTemplateChanged() {
+		this.updateItemTemplate();
+	}
+	headerCellItemTemplateChanged() {
+		this.updateItemTemplate();
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.behaviorOrchestrator === null && (this.updateItemTemplate(), this.behaviorOrchestrator = r.create(this), this.$fastController.addBehavior(this.behaviorOrchestrator), this.behaviorOrchestrator.addBehaviorFactory(new l(u((e) => e.columnDefinitions), u((e) => e.activeCellItemTemplate), { positioning: !0 }), this.appendChild(document.createComment("")))), this.addEventListener("cell-focused", this.handleCellFocus), this.addEventListener(R, this.handleFocusout), this.addEventListener(z, this.handleKeydown), this.updateRowStyle();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("cell-focused", this.handleCellFocus), this.removeEventListener(R, this.handleFocusout), this.removeEventListener(z, this.handleKeydown);
+	}
+	handleFocusout(e) {
+		/* v8 ignore else -- @preserve */
+		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 w:
+				t = Math.max(0, this.focusColumnIndex - 1), this.cellElements[t].focus(), e.preventDefault();
+				break;
+			case E:
+				t = Math.min(this.cellElements.length - 1, this.focusColumnIndex + 1), this.cellElements[t].focus(), e.preventDefault();
+				break;
+			case D:
+				e.ctrlKey || (this.cellElements[0].focus(), e.preventDefault());
+				break;
+			case "End":
+				e.ctrlKey || (this.cellElements[this.cellElements.length - 1].focus(), e.preventDefault());
+				break;
+		}
+	}
+	updateItemTemplate() {
+		this.activeCellItemTemplate = this.rowType === M.default && this.cellItemTemplate !== void 0 ? this.cellItemTemplate : this.rowType === M.default && this.cellItemTemplate === void 0 ? this.defaultCellItemTemplate : this.headerCellItemTemplate === void 0 ? this.defaultHeaderCellItemTemplate : this.headerCellItemTemplate;
+	}
+	ariaSelectedChanged(e, t) {
+		super.ariaSelectedChanged(e, t), this._selectable = t !== null, this.selected = t === "true";
+	}
 };
-class c extends U($) {
-  constructor() {
-    super(...arguments), this.rowType = g.default, this.rowData = null, this.columnDefinitions = null, this.behaviorOrchestrator = 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.behaviorOrchestrator === null && (this.updateItemTemplate(), this.behaviorOrchestrator = A.create(this), this.$fastController.addBehavior(this.behaviorOrchestrator), this.behaviorOrchestrator.addBehaviorFactory(
-      new L(
-        T((e) => e.columnDefinitions),
-        T((e) => e.activeCellItemTemplate),
-        { positioning: !0 }
-      ),
-      this.appendChild(document.createComment(""))
-    )), 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 ie:
-        t = Math.max(0, this.focusColumnIndex - 1), this.cellElements[t].focus(), e.preventDefault();
-        break;
-      case oe:
-        t = Math.min(
-          this.cellElements.length - 1,
-          this.focusColumnIndex + 1
-        ), this.cellElements[t].focus(), e.preventDefault();
-        break;
-      case K:
-        e.ctrlKey || (this.cellElements[0].focus(), e.preventDefault());
-        break;
-      case M:
-        e.ctrlKey || (this.cellElements[this.cellElements.length - 1].focus(), e.preventDefault());
-        break;
-    }
-  }
-  updateItemTemplate() {
-    this.activeCellItemTemplate = this.rowType === g.default && this.cellItemTemplate !== void 0 ? this.cellItemTemplate : this.rowType === g.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";
-  }
-}
-h([
-  f({ attribute: "grid-template-columns" })
-], c.prototype, "gridTemplateColumns");
-h([
-  f({ attribute: "row-type" })
-], c.prototype, "rowType");
-h([
-  a
-], c.prototype, "rowData");
-h([
-  a
-], c.prototype, "columnDefinitions");
-h([
-  a
-], c.prototype, "cellItemTemplate");
-h([
-  a
-], c.prototype, "headerCellItemTemplate");
-h([
-  a
-], c.prototype, "rowIndex");
-h([
-  a
-], c.prototype, "activeCellItemTemplate");
-h([
-  a
-], c.prototype, "defaultCellItemTemplate");
-h([
-  a
-], c.prototype, "defaultHeaderCellItemTemplate");
-h([
-  a
-], c.prototype, "cellElements");
-h([
-  a
-], c.prototype, "_selectable");
-h([
-  f({ mode: "boolean" })
-], c.prototype, "selected");
-var ge = Object.defineProperty, d = (i, e, t, l) => {
-  for (var o = void 0, n = i.length - 1, r; n >= 0; n--)
-    (r = i[n]) && (o = r(e, t, o) || o);
-  return o && ge(e, t, o), o;
-};
-const m = {
-  none: "none",
-  singleRow: "single-row",
-  multiRow: "multi-row",
-  singleCell: "single-cell",
-  multiCell: "multi-cell"
-}, s = class k extends $ {
-  constructor() {
-    super(), this.noTabbing = !1, this.generateHeader = b.default, this.rowsData = [], this.columnDefinitions = null, this.focusRowIndex = 0, this.focusColumnIndex = 0, this.fixedColumnsPositions = [], this.behaviorOrchestrator = 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"]'
-      ), x = Math.max(
-        0,
-        Math.min(r.length - 1, t)
-      ), R = r[x];
-      l && this.scrollHeight !== this.clientHeight && (o < this.focusRowIndex && this.scrollTop > 0 || o > this.focusRowIndex && this.scrollTop < this.scrollHeight - this.clientHeight) && R.scrollIntoView({ block: "center", inline: "center" }), R.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, D.enqueue(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.#i = (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 === m.singleCell || this.selectionMode === m.multiCell) {
-          this.#l({ target: e, ctrlKey: t, shiftKey: l, metaKey: o });
-          return;
-        }
-        (this.selectionMode === m.singleRow || this.selectionMode === m.multiRow) && this.#n({ target: e, ctrlKey: t, shiftKey: l, metaKey: o });
-      }
-    }, this.#l = ({
-      target: e,
-      ctrlKey: t,
-      shiftKey: l,
-      metaKey: o
-    }) => {
-      const n = e;
-      if (this.selectionMode === m.multiCell && (t || l || o))
-        n.selected = !this.#r.includes(n);
-      else {
-        const r = n.selected;
-        this._resetSelection(!0), n.selected = !r;
-      }
-    }, this.#n = ({
-      target: e,
-      ctrlKey: t,
-      shiftKey: l,
-      metaKey: o
-    }) => {
-      const n = e.parentNode;
-      if (this.selectionMode === m.multiRow && (t || l || o))
-        n.selected = !this.#a.includes(n);
-      else {
-        const r = n.selected;
-        this._resetSelection(!0), n.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 === m.singleCell || this.selectionMode === m.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 === m.none)
-        for (const o of [...t, ...l])
-          o._selectable = !1, o.selected = !1;
-      if (this.selectionMode === m.singleRow || this.selectionMode === m.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.#i);
-  }
-  /**
-   *  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 = k.generateColumns(this.rowsData[0])), this.$fastController.isConnected && this.toggleGeneratedHeader();
-  }
-  /**
-   * @internal
-   */
-  columnDefinitionsChanged() {
-    if (this.columnDefinitions === null) {
-      this.generatedGridTemplateColumns = "";
-      return;
-    }
-    this.generatedGridTemplateColumns = k.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.behaviorOrchestrator === null && (this.behaviorOrchestrator = A.create(this), this.$fastController.addBehavior(this.behaviorOrchestrator), this.behaviorOrchestrator.addBehaviorFactory(
-      new L(
-        T((e) => e.rowsData),
-        T((e) => e.rowItemTemplate),
-        { positioning: !0 }
-      ),
-      this.appendChild(document.createComment(""))
-    )), this.toggleGeneratedHeader(), this.addEventListener("row-focused", this.handleRowFocus), this.addEventListener(z, 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(), D.enqueue(this.queueRowIndexUpdate), this.#e(), H.getNotifier(this).subscribe(
-      this.#o,
-      "columnDefinitions"
-    );
-  }
-  /**
-   * @internal
-   */
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("row-focused", this.handleRowFocus), this.removeEventListener(z, 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.generatedHeader = null, H.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, n = this.rowElements[l];
-    switch (e.key) {
-      case re:
-        e.preventDefault(), this.focusOnCell(this.focusRowIndex - 1, this.focusColumnIndex, !0);
-        break;
-      case ae:
-        e.preventDefault(), this.focusOnCell(this.focusRowIndex + 1, this.focusColumnIndex, !0);
-        break;
-      case ne:
-        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 le:
-        if (e.preventDefault(), this.rowElements.length === 0) {
-          this.focusOnCell(0, 0, !1);
-          break;
-        }
-        if (this.focusRowIndex >= l || n.offsetTop + n.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 x = 0;
-            this.generateHeader === b.sticky && this.generatedHeader !== null && (x = this.generatedHeader.clientHeight), this.scrollTop = r.offsetTop - x;
-            break;
-          }
-        }
-        this.focusOnCell(t, this.focusColumnIndex, !1);
-        break;
-      case K: {
-        e.ctrlKey && (e.preventDefault(), this.focusOnCell(0, 0, !0));
-        break;
-      }
-      case M: {
-        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, D.enqueue(() => 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 ? g.stickyHeader : g.header, this.firstChild !== null && this.insertBefore(e, this.firstChild);
-      return;
-    }
-  }
-  /**
-   *
-   *
-   * @internal
-   */
-  slottedRowElementsChanged(e, t) {
-    this._resetSelection();
-  }
-  get #a() {
-    return this.rowElements.filter((e) => e.selected);
-  }
-  get #r() {
-    return this.rowElements.reduce((e, t) => {
-      const o = Array.from(t.children).filter(
-        (n) => n.selected
-      );
-      return e.concat(o);
-    }, []);
-  }
-  selectionModeChanged(e) {
-    if (e === void 0) {
-      D.enqueue(this._resetSelection);
-      return;
-    }
-    this._resetSelection(!0);
-  }
-  #i;
-  #t;
-  #l;
-  #n;
-  #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 n = t[o];
-          typeof n.setFixedPosition == "function" && n.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 n = t[o];
-          typeof n.setFixedPosition == "function" && n.setFixedPosition(void 0);
-        }
-      });
-    }), this.fixedColumnsPositions = [];
-  }
-};
-d([
-  f({ attribute: "no-tabbing", mode: "boolean" })
-], s.prototype, "noTabbing");
-d([
-  f({ attribute: "generate-header" })
-], s.prototype, "generateHeader");
-d([
-  f({ attribute: "grid-template-columns" })
-], s.prototype, "gridTemplateColumns");
-d([
-  a
-], s.prototype, "rowsData");
-d([
-  a
-], s.prototype, "columnDefinitions");
-d([
-  a
-], s.prototype, "rowItemTemplate");
-d([
-  a
-], s.prototype, "cellItemTemplate");
-d([
-  a
-], s.prototype, "headerCellItemTemplate");
-d([
-  a
-], s.prototype, "focusRowIndex");
-d([
-  a
-], s.prototype, "focusColumnIndex");
-d([
-  f({ attribute: "fixed-columns", converter: J })
-], s.prototype, "fixedColumns");
-d([
-  a
-], s.prototype, "defaultRowItemTemplate");
-d([
-  a
-], s.prototype, "rowElementTag");
-d([
-  a
-], s.prototype, "rowElements");
-d([
-  a
-], s.prototype, "slottedRowElements");
-d([
-  f({ attribute: "selection-mode" })
-], s.prototype, "selectionMode");
-let Ce = s;
-function be(i) {
-  const e = i.tagFor(c);
-  return u`
-    <${e}
-        :rowData="${(t) => t}"
-        :cellItemTemplate="${(t, l) => l.parent.cellItemTemplate}"
-        :headerCellItemTemplate="${(t, l) => l.parent.headerCellItemTemplate}"
-    ></${e}>
+y([a({ attribute: "grid-template-columns" })], G.prototype, "gridTemplateColumns", void 0), y([a({ attribute: "row-type" })], G.prototype, "rowType", void 0), y([n], G.prototype, "rowData", void 0), y([n], G.prototype, "columnDefinitions", void 0), y([n], G.prototype, "cellItemTemplate", void 0), y([n], G.prototype, "headerCellItemTemplate", void 0), y([n], G.prototype, "rowIndex", void 0), y([n], G.prototype, "activeCellItemTemplate", void 0), y([n], G.prototype, "defaultCellItemTemplate", void 0), y([n], G.prototype, "defaultHeaderCellItemTemplate", void 0), y([n], G.prototype, "cellElements", void 0), y([n], G.prototype, "_selectable", void 0), y([a({ mode: "boolean" })], G.prototype, "selected", void 0);
+//#endregion
+//#region src/lib/data-grid/data-grid.template.ts
+function K(e) {
+	let t = e.tagFor(G);
+	return i`
+    <${t}
+        :rowData="${(e) => e}"
+        :cellItemTemplate="${(e, t) => t.parent.cellItemTemplate}"
+        :headerCellItemTemplate="${(e, t) => t.parent.headerCellItemTemplate}"
+    ></${t}>
 `;
 }
-function we(i) {
-  return i.selectionMode === void 0 || i.selectionMode === m.none ? null : i.selectionMode.includes("multi") ? "true" : "false";
+function q(e) {
+	return e.selectionMode === void 0 || e.selectionMode === U.none ? null : e.selectionMode.includes("multi") ? "true" : "false";
 }
-function ye(i) {
-  if (i.columnDefinitions === null) {
-    const e = i.querySelector(
-      '[cell-type="columnheader"]'
-    )?.parentElement;
-    if (i.generateHeader === b.default && (e?.getAttribute("row-type") === g.header || e?.getAttribute("row-type") === g.stickyHeader))
-      return;
-    if (e) {
-      const t = i.generateHeader === b.sticky ? g.stickyHeader : g.header;
-      e.setAttribute("row-type", t);
-    }
-  }
+function J(e) {
+	if (e.columnDefinitions === null) {
+		let t = e.querySelector("[cell-type=\"columnheader\"]")?.parentElement;
+		if (e.generateHeader === j.default && (t?.getAttribute("row-type") === M.header || t?.getAttribute("row-type") === M.stickyHeader)) return;
+		if (t) {
+			let n = e.generateHeader === j.sticky ? M.stickyHeader : M.header;
+			t.setAttribute("row-type", n);
+		}
+	}
 }
-function _e(i, { event: e }) {
-  e.stopPropagation();
+function re(e, { event: t }) {
+	t.stopPropagation();
 }
-const xe = (i) => {
-  const e = be(i), t = i.tagFor(c, !0);
-  return u`
+var Y = (e) => {
+	let t = K(e), n = e.tagFor(G, !0);
+	return i`
 		<template
-			aria-multiselectable="${we}"
+			aria-multiselectable="${q}"
 			role="grid"
 			tabindex="0"
-			@sort="${_e}"
-			:rowElementTag="${() => t}"
-			:defaultRowItemTemplate="${e}"
-			${q({
-    property: "rowElements",
-    filter: Q("[role=row],[data-vvd-component=data-grid-row]")
-  })}
+			@sort="${re}"
+			:rowElementTag="${() => n}"
+			:defaultRowItemTemplate="${t}"
+			${m({
+		property: "rowElements",
+		filter: f("[role=row],[data-vvd-component=data-grid-row]")
+	})}
 		>
 			<div class="base">
-				${ye}
-				<slot ${S("slottedRowElements")}></slot>
+				${J}
+				<slot ${p("slottedRowElements")}></slot>
 			</div>
 		</template>
 	`;
+}, X = i`
+	<template>
+		${(e) => e.rowData === null || e.columnDefinition === null || e.columnDefinition.columnDataKey === null ? null : e.rowData[e.columnDefinition.columnDataKey]}
+	</template>
+`, ie = i`
+	<template>
+		${(e) => e.columnDefinition.title === void 0 ? e.columnDefinition.columnDataKey : e.columnDefinition.title}
+	</template>
+`, Z = class extends e(A(s)) {
+	constructor(...e) {
+		super(...e), this.cellType = P.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;
+	}
+	cellTypeChanged() {
+		this.$fastController.isConnected && this.updateCellView();
+	}
+	gridColumnChanged() {
+		this.$fastController.isConnected && this.updateCellStyle();
+	}
+	columnDefinitionChanged(e, t) {
+		this.$fastController.isConnected && this.updateCellView();
+	}
+	updateFixedStyle() {
+		this.fixedPosition === void 0 ? (this.removeAttribute("data-fixed"), this.style.removeProperty("left")) : (this.setAttribute("data-fixed", ""), this.style.left = this.fixedPosition);
+	}
+	setFixedPosition(e) {
+		this.fixedPosition = e, this.updateFixedStyle();
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener(L, this.handleFocusin), this.addEventListener(R, this.handleFocusout), this.addEventListener(z, this.handleKeydown), this.style.gridColumn = `${this.columnDefinition?.gridColumn === void 0 ? 0 : this.columnDefinition.gridColumn}`, this.updateCellView(), this.updateCellStyle(), this.updateFixedStyle();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener(L, this.handleFocusin), this.removeEventListener(R, this.handleFocusout), this.removeEventListener(z, this.handleKeydown), this.disconnectCellView();
+	}
+	handleFocusin(e) {
+		if (this.shadowRoot.querySelector(".base").classList.add("active"), !this.isActiveCell) {
+			switch (this.isActiveCell = !0, this.cellType) {
+				case P.columnHeader:
+					if (this.columnDefinition !== null && this.columnDefinition.headerCellInternalFocusQueue !== !0 && typeof this.columnDefinition.headerCellFocusTargetCallback == "function") {
+						let e = this.columnDefinition.headerCellFocusTargetCallback(this);
+						/* v8 ignore else -- @preserve */
+						e !== null && e.focus();
+					}
+					break;
+				default:
+					if (this.columnDefinition !== null && this.columnDefinition.cellInternalFocusQueue !== !0 && typeof this.columnDefinition.cellFocusTargetCallback == "function") {
+						let e = this.columnDefinition.cellFocusTargetCallback(this);
+						/* v8 ignore else -- @preserve */
+						e !== null && e.focus();
+					}
+					break;
+			}
+			this.$emit("cell-focused", this);
+		}
+	}
+	handleFocusout(e) {
+		/* v8 ignore else -- @preserve */
+		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 === P.default && this.columnDefinition.cellInternalFocusQueue !== !0 || this.cellType === P.columnHeader && this.columnDefinition.headerCellInternalFocusQueue !== !0)) switch (e.key) {
+			case ne:
+			case "F2":
+				if (this.contains(document.activeElement) && document.activeElement !== this) return;
+				switch (this.cellType) {
+					case P.columnHeader:
+						if (this.columnDefinition.headerCellFocusTargetCallback !== void 0) {
+							let t = this.columnDefinition.headerCellFocusTargetCallback(this);
+							t !== null && t.focus(), e.preventDefault();
+						}
+						break;
+					default:
+						if (this.columnDefinition.cellFocusTargetCallback !== void 0) {
+							let t = this.columnDefinition.cellFocusTargetCallback(this);
+							t !== null && t.focus(), e.preventDefault();
+						}
+						break;
+				}
+				break;
+			case T:
+				/* v8 ignore else -- @preserve */
+				this.contains(document.activeElement) && document.activeElement !== this && (this.focus(), e.preventDefault());
+				break;
+		}
+	}
+	updateCellView() {
+		if (this.disconnectCellView(), this.columnDefinition !== null) {
+			switch (this.cellType) {
+				case P.columnHeader:
+					this.columnDefinition.headerCellTemplate === void 0 ? this.customCellView = ie.render(this, this) : this.customCellView = this.columnDefinition.headerCellTemplate.render(this, this);
+					break;
+				case P.rowHeader:
+				case P.default:
+					this.columnDefinition.cellTemplate === void 0 ? this.customCellView = X.render(this, this) : this.customCellView = this.columnDefinition.cellTemplate.render(this, this);
+					break;
+			}
+			this.columnDefinition?.sortable ? this.columnDefinition.sortDirection ? this.sortDirection = this.columnDefinition.sortDirection : this.sortDirection = N.none : this.sortDirection = void 0;
+		}
+	}
+	disconnectCellView() {
+		this.customCellView !== null && (this.customCellView.dispose(), this.customCellView = null);
+	}
+	ariaSelectedChanged(e, t) {
+		super.ariaSelectedChanged(e, t), this._selectable = t !== null, this.selected = t === "true";
+	}
+	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();
+	}
+	_handleInteraction() {
+		let 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;
+	}
 };
-function De(i) {
-  return i._selectable && i.selected ? "true" : i._selectable && !i.selected ? "false" : null;
+y([a({ attribute: "cell-type" })], Z.prototype, "cellType", void 0), y([a({ attribute: "grid-column" })], Z.prototype, "gridColumn", void 0), y([n], Z.prototype, "rowData", void 0), y([n], Z.prototype, "columnDefinition", void 0), y([n], Z.prototype, "_selectable", void 0), y([a({ mode: "boolean" })], Z.prototype, "selected", void 0), y([a({ attribute: "sort-direction" })], Z.prototype, "sortDirection", void 0), y([n], Z.prototype, "_actionItemsSlottedContent", void 0);
+//#endregion
+//#region src/lib/data-grid/data-grid-row.template.ts
+function ae(e) {
+	return e._selectable && e.selected ? "true" : e._selectable && !e.selected ? "false" : null;
 }
-function Te(i) {
-  const e = i.tagFor(p);
-  return u`
-    <${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 oe(e) {
+	let t = e.tagFor(Z);
+	return i`
+    <${t}
+        cell-type="${(e) => e.isRowHeader ? "rowheader" : void 0}"
+        grid-column="${(e, t) => t.index + 1}"
+        :rowData="${(e, t) => t.parent.rowData}"
+        :columnDefinition="${(e) => e}"
+				selected="${(e, t) => t.parent.ariaSelected === "true" ? !0 : null}"
+    ></${t}>
 `;
 }
-function Ie(i) {
-  const e = i.tagFor(p);
-  return u`
-    <${e}
+function se(e) {
+	let t = e.tagFor(Z);
+	return i`
+    <${t}
         cell-type="columnheader"
-        grid-column="${(t, l) => l.index + 1}"
-        :columnDefinition="${(t) => t}"
-    ></${e}>
+        grid-column="${(e, t) => t.index + 1}"
+        :columnDefinition="${(e) => e}"
+    ></${t}>
 `;
 }
-const ke = (i) => {
-  const e = Te(i), t = Ie(i), l = (o) => B("base", ["selected", !!o.selected]);
-  return u`
+var ce = (e) => {
+	let t = oe(e), n = se(e);
+	return i`
 		<template
-			${V({
-    role: "row",
-    ariaSelected: De
-  })}
-			class="${(o) => o.rowType !== "default" ? o.rowType : ""}"
-			:defaultCellItemTemplate="${e}"
-			:defaultHeaderCellItemTemplate="${t}"
-			${q({
-    property: "cellElements",
-    filter: Q(
-      '[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"],[data-vvd-component="data-grid-cell"]'
-    )
-  })}
+			${k({
+		role: "row",
+		ariaSelected: ae
+	})}
+			class="${(e) => e.rowType === "default" ? "" : e.rowType}"
+			:defaultCellItemTemplate="${t}"
+			:defaultHeaderCellItemTemplate="${n}"
+			${m({
+		property: "cellElements",
+		filter: f("[role=\"cell\"],[role=\"gridcell\"],[role=\"columnheader\"],[role=\"rowheader\"],[data-vvd-component=\"data-grid-cell\"]")
+	})}
 		>
 			<div
-				class="${l}"
-				style="grid-template-columns: ${(o) => o.gridTemplateColumns};"
+				class="${(e) => b("base", ["selected", !!e.selected])}"
+				style="grid-template-columns: ${(e) => e.gridTemplateColumns};"
 			>
-				<slot ${S("slottedCellElements")}></slot>
+				<slot ${p("slottedCellElements")}></slot>
 			</div>
 		</template>
 	`;
 };
-function E(i) {
-  return i.cellType === "columnheader" && i.sortDirection !== void 0 && i.sortDirection !== _.other;
+//#endregion
+//#region src/lib/data-grid/data-grid-cell.template.ts
+function Q(e) {
+	return e.cellType === "columnheader" && e.sortDirection !== void 0 && e.sortDirection !== N.other;
 }
-function Ee(i) {
-  return i.sortDirection === _.ascending ? "sort-asc-solid" : i.sortDirection === _.descending ? "sort-desc-solid" : "sort-solid";
+function le(e) {
+	return e.sortDirection === N.ascending ? "sort-asc-solid" : e.sortDirection === N.descending ? "sort-desc-solid" : "sort-solid";
 }
-function $e(i) {
-  return i._selectable && i.selected ? "true" : i._selectable && !i.selected ? "false" : null;
+function ue(e) {
+	return e._selectable && e.selected ? "true" : e._selectable && !e.selected ? "false" : null;
 }
-function Fe(i) {
-  const e = i.tagFor(N);
-  return u`
-		${I(
-    E,
-    u`
-				<${e} class="header-icon" name="${Ee}"></${e}>
-			`
-  )}
+function de(e) {
+	let t = e.tagFor(_);
+	return i`
+		${d(Q, i`
+				<${t} class="header-icon" name="${le}"></${t}>
+			`)}
 	`;
 }
-function Se(i) {
-  return i.cellType === v.columnHeader && i.sortDirection !== void 0;
+function fe(e) {
+	return e.cellType === P.columnHeader && e.sortDirection !== void 0;
 }
-function j(i) {
-  return i.sortDirection ?? _.none;
+function $(e) {
+	return e.sortDirection ?? N.none;
 }
-function Re(i) {
-  const e = j(i);
-  return i.locale.dataGrid.cell.sortStatus?.[e];
+function pe(e) {
+	let t = $(e);
+	return e.locale.dataGrid.cell.sortStatus?.[t];
 }
-function He(i) {
-  const e = j(i);
-  return i.locale.dataGrid.cell.sortInstruction?.[e];
+function me(e) {
+	let t = $(e);
+	return e.locale.dataGrid.cell.sortInstruction?.[t];
 }
-function Oe(i) {
-  return [Re(i), He(i)].filter((e) => !!e).join(" ").trim();
+function he(e) {
+	return [pe(e), me(e)].filter((e) => !!e).join(" ").trim();
 }
-function ze(i, e) {
-  if (e.key === P || e.key === se) {
-    if (e.target.closest('[slot="action-items"]')) return !0;
-    i._handleInteraction();
-  }
-  return !0;
+function ge(e, t) {
+	if (t.key === "Enter" || t.key === " ") {
+		if (t.target.closest("[slot=\"action-items\"]")) return !0;
+		e._handleInteraction();
+	}
+	return !0;
 }
-function Ge(i, e) {
-  return e.target.closest('[slot="action-items"]') || i._handleInteraction(), !0;
+function _e(e, t) {
+	return t.target.closest("[slot=\"action-items\"]") || e._handleInteraction(), !0;
 }
-const Ae = (i) => {
-  const e = i.tagFor(Y), t = ({
-    selected: l,
-    _actionItemsSlottedContent: o
-  }) => B(
-    "base",
-    ["selected", !!l],
-    ["has-action-items", !!o?.length]
-  );
-  return u`
+//#endregion
+//#region src/lib/data-grid/index.ts
+ee(o("data-grid", W, Y, [o("data-grid-row", G, ce, [o("data-grid-cell", Z, (e) => {
+	let t = e.tagFor(g);
+	return i`
 		<template
 			tabindex="-1"
-			${V({
-    role: (l) => O[l.cellType] ?? O.default,
-    ariaSelected: $e,
-    ariaSort: (l) => l.sortDirection ?? null
-  })}
-			@click="${(l, o) => Ge(l, o.event)}"
-			@keydown="${(l, o) => ze(l, o.event)}"
+			${k({
+		role: (e) => F[e.cellType] ?? F.default,
+		ariaSelected: ue,
+		ariaSort: (e) => e.sortDirection ?? null
+	})}
+			@click="${(e, t) => _e(e, t.event)}"
+			@keydown="${(e, t) => ge(e, t.event)}"
 		>
-			<div class="${t}">
+			<div class="${({ selected: e, _actionItemsSlottedContent: t }) => b("base", ["selected", !!e], ["has-action-items", !!t?.length])}">
 				<div
 					class="content"
-					role="${(l) => E(l) ? "button" : void 0}"
+					role="${(e) => Q(e) ? "button" : void 0}"
 				>
-					${(l) => l.selected ? u`<${e}
+					${(e) => e.selected ? i`<${t}
 								data-announcement="selection"
 							>
-								${(o) => o.locale.dataGrid.cell.selected}
-							</${e}>` : null}
+								${(e) => e.locale.dataGrid.cell.selected}
+							</${t}>` : null}
 					<slot></slot>
-					${I(
-    E,
-    u`<${e}
+					${d(Q, i`<${t}
 							data-announcement="button-role"
 						>
-							${(l) => l.locale.dataGrid.cell.button}
-						</${e}>
-						`
-  )}
-					${I(
-    Se,
-    u`<${e}
+							${(e) => e.locale.dataGrid.cell.button}
+						</${t}>
+						`)}
+					${d(fe, i`<${t}
 							aria-live="polite"
 							data-announcement="sort-state"
 						>
-							${Oe}
-						</${e}>`
-  )}
-					${(l) => Fe(i)}
+							${he}
+						</${t}>`)}
+					${(t) => de(e)}
 				</div>
 				<slot
 					name="action-items"
-					${S("_actionItemsSlottedContent")}
+					${p("_actionItemsSlottedContent")}
 				></slot>
 			</div>
 		</template>
 	`;
-}, Le = F(
-  "data-grid-cell",
-  p,
-  Ae,
-  [W, Z],
-  {
-    styles: he
-  }
-), Pe = F(
-  "data-grid-row",
-  c,
-  ke,
-  [Le],
-  {
-    styles: ue
-  }
-), Me = F(
-  "data-grid",
-  Ce,
-  xe,
-  [Pe],
-  {
-    styles: de
-  }
-), Ke = X(Me);
-Ke();
+}, [v, h], { styles: H })], { styles: V })], { styles: B }))();
+//#endregion