@vonage/vivid 5.16.0 → 5.18.0

package/data-grid/index.js

@@ -1,216 +1,26 @@
 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, t as c, u as l, w as u } from "../bundled/vivid-element.js";
-import { t as d } from "../bundled/repeat.js";
-import { t as f } from "../bundled/normalize.js";
-import { t as p } from "../bundled/when.js";
-import { r as m, t as h } from "../bundled/slotted.js";
-import { t as g } from "../bundled/children.js";
-import { n as _, r as v } from "../bundled/definition.js";
+import { O as t, T as n, c as r, d as i, l as a, o, s, t as c, u as ee, w as l } from "../bundled/vivid-element.js";
+import { t as u } from "../bundled/repeat.js";
+import { t as d } from "../bundled/normalize.js";
+import { t as f } from "../bundled/when.js";
+import { r as p, t as m } from "../bundled/slotted.js";
+import { t as h } from "../bundled/children.js";
+import { n as g, r as _ } from "../bundled/definition.js";
+import "../bundled/numberConverter.js";
+import { t as v } from "../bundled/decorate.js";
 import { r as y, t as b } from "../bundled/definition2.js";
-import { t as x } from "../bundled/decorate.js";
-import { t as S } from "../bundled/class-names.js";
-import { a as ee, c as C, i as w, l as T, n as E, o as D, r as te, s as O, t as k } from "../bundled/key-codes.js";
-import { n as A, t as j } from "../bundled/host-semantics.js";
-import { a as M, i as N, n as P, r as F, t as I } from "../bundled/data-grid.options.js";
+import { t as x } from "../bundled/class-names.js";
+import { a as te, c as S, i as C, l as w, n as T, o as E, r as ne, 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 L = "focus", R = "focusin", z = "focusout", B = "keydown", V = ":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}", H = ".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)}", U = ":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}", W = i`
-	<template>
-		${(e) => e.rowData === null || e.columnDefinition === null || e.columnDefinition.columnDataKey === null ? null : e.rowData[e.columnDefinition.columnDataKey]}
-	</template>
-`, G = i`
-	<template>
-		${(e) => e.columnDefinition.title === void 0 ? e.columnDefinition.columnDataKey : e.columnDefinition.title}
-	</template>
-`, K = class extends e(j(c)) {
-	constructor(...e) {
-		super(...e), this.cellType = F.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(R, this.handleFocusin), this.addEventListener(z, this.handleFocusout), this.addEventListener(B, 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(R, this.handleFocusin), this.removeEventListener(z, this.handleFocusout), this.removeEventListener(B, this.handleKeydown), this.disconnectCellView();
-	}
-	handleFocusin(e) {
-		if (this.shadowRoot.querySelector(".base").classList.add("active"), !this.isActiveCell) {
-			switch (this.isActiveCell = !0, this.cellType) {
-				case F.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 === F.default && this.columnDefinition.cellInternalFocusQueue !== !0 || this.cellType === F.columnHeader && this.columnDefinition.headerCellInternalFocusQueue !== !0)) switch (e.key) {
-			case ee:
-			case "F2":
-				if (this.contains(document.activeElement) && document.activeElement !== this) return;
-				switch (this.cellType) {
-					case F.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 D:
-				/* 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 F.columnHeader:
-					this.columnDefinition.headerCellTemplate === void 0 ? this.customCellView = G.render(this, this) : this.customCellView = this.columnDefinition.headerCellTemplate.render(this, this);
-					break;
-				case F.rowHeader:
-				case F.default:
-					this.columnDefinition.cellTemplate === void 0 ? this.customCellView = W.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 = P.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;
-	}
-};
-x([a({ attribute: "cell-type" })], K.prototype, "cellType", void 0), x([a({ attribute: "grid-column" })], K.prototype, "gridColumn", void 0), x([n], K.prototype, "rowData", void 0), x([n], K.prototype, "columnDefinition", void 0), x([n], K.prototype, "_selectable", void 0), x([a({ mode: "boolean" })], K.prototype, "selected", void 0), x([a({ attribute: "sort-direction" })], K.prototype, "sortDirection", void 0), x([n], K.prototype, "_actionItemsSlottedContent", void 0);
-//#endregion
-//#region src/lib/data-grid/data-grid-row.ts
-var q = class extends j(c) {
-	constructor(...e) {
-		super(...e), this.rowType = N.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 d(f((e) => e.columnDefinitions), f((e) => e.activeCellItemTemplate), { positioning: !0 }), this.appendChild(document.createComment("")))), this.addEventListener("cell-focused", this.handleCellFocus), this.addEventListener(z, this.handleFocusout), this.addEventListener(B, this.handleKeydown), this.updateRowStyle();
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback(), this.removeEventListener("cell-focused", this.handleCellFocus), this.removeEventListener(z, this.handleFocusout), this.removeEventListener(B, 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 E:
-				t = Math.max(0, this.focusColumnIndex - 1), this.cellElements[t].focus(), e.preventDefault();
-				break;
-			case te:
-				t = Math.min(this.cellElements.length - 1, this.focusColumnIndex + 1), this.cellElements[t].focus(), e.preventDefault();
-				break;
-			case O:
-				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 === N.default && this.cellItemTemplate !== void 0 ? this.cellItemTemplate : this.rowType === N.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";
-	}
-};
-x([a({ attribute: "grid-template-columns" })], q.prototype, "gridTemplateColumns", void 0), x([a({ attribute: "row-type" })], q.prototype, "rowType", void 0), x([n], q.prototype, "rowData", void 0), x([n], q.prototype, "columnDefinitions", void 0), x([n], q.prototype, "cellItemTemplate", void 0), x([n], q.prototype, "headerCellItemTemplate", void 0), x([n], q.prototype, "rowIndex", void 0), x([n], q.prototype, "activeCellItemTemplate", void 0), x([n], q.prototype, "defaultCellItemTemplate", void 0), x([n], q.prototype, "defaultHeaderCellItemTemplate", void 0), x([n], q.prototype, "cellElements", void 0), x([n], q.prototype, "_selectable", void 0), x([a({ mode: "boolean" })], q.prototype, "selected", void 0);
-//#endregion
-//#region src/lib/data-grid/data-grid.ts
-var J = {
+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"
-}, Y = class e extends c {
+}, W = class e extends c {
 	static generateTemplateColumns(e) {
 		let t = "";
 		return e.forEach((e) => {
@@ -261,10 +71,10 @@ var J = {
 		}), 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 d(f((e) => e.rowsData), f((e) => e.rowItemTemplate), { positioning: !0 }), this.appendChild(document.createComment("")))), this.toggleGeneratedHeader(), this.addEventListener("row-focused", this.handleRowFocus), this.addEventListener(L, this.handleFocus), this.addEventListener(B, this.handleKeydown), this.addEventListener(z, this.handleFocusOut), this.observer = new MutationObserver(this.onChildListChange), this.observer.observe(this, { childList: !0 }), this.setupResizeObserver(), t.enqueue(this.queueRowIndexUpdate), this.#e(), u.getNotifier(this).subscribe(this.#s, "columnDefinitions");
+		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 u(d((e) => e.rowsData), d((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(), l.getNotifier(this).subscribe(this.#s, "columnDefinitions");
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.removeEventListener("row-focused", this.handleRowFocus), this.removeEventListener(L, this.handleFocus), this.removeEventListener(B, this.handleKeydown), this.removeEventListener(z, this.handleFocusOut), this.observer.disconnect(), this.resizeObserver &&= (this.resizeObserver.disconnect(), void 0), this.generatedHeader = null, u.getNotifier(this).unsubscribe(this.#s, "columnDefinitions");
+		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, l.getNotifier(this).unsubscribe(this.#s, "columnDefinitions");
 	}
 	handleRowFocus(e) {
 		this.isUpdatingFocus = !0;
@@ -281,13 +91,13 @@ var J = {
 		if (e.defaultPrevented) return;
 		let t, n = this.rowElements.length - 1, r = this.offsetHeight + this.scrollTop, i = this.rowElements[n];
 		switch (e.key) {
-			case w:
+			case C:
 				e.preventDefault(), this.focusOnCell(this.focusRowIndex - 1, this.focusColumnIndex, !0);
 				break;
-			case k:
+			case O:
 				e.preventDefault(), this.focusOnCell(this.focusRowIndex + 1, this.focusColumnIndex, !0);
 				break;
-			case T:
+			case w:
 				if (e.preventDefault(), this.rowElements.length === 0) {
 					this.focusOnCell(0, 0, !1);
 					break;
@@ -305,7 +115,7 @@ var J = {
 				}
 				this.focusOnCell(t, this.focusColumnIndex, !1);
 				break;
-			case C:
+			case S:
 				if (e.preventDefault(), this.rowElements.length === 0) {
 					this.focusOnCell(0, 0, !1);
 					break;
@@ -318,13 +128,13 @@ var J = {
 					let e = this.rowElements[t];
 					if (e.offsetTop + e.offsetHeight > r) {
 						let t = 0;
-						this.generateHeader === M.sticky && this.generatedHeader !== null && (t = this.generatedHeader.clientHeight), this.scrollTop = e.offsetTop - t;
+						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 O:
+			case D:
 				/* v8 ignore else -- @preserve */
 				e.ctrlKey && (e.preventDefault(), this.focusOnCell(0, 0, !0));
 				break;
@@ -341,10 +151,10 @@ var J = {
 		this.pendingFocusUpdate = !1, this.focusOnCell(this.focusRowIndex, this.focusColumnIndex, !0);
 	}
 	toggleGeneratedHeader() {
-		if (this.generatedHeader !== null && (this.removeChild(this.generatedHeader), this.generatedHeader = null), this.generateHeader !== M.none && this.columnDefinitions !== null) {
+		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 === M.sticky ? N.stickyHeader : N.header, this.firstChild !== null && this.insertBefore(e, this.firstChild);
+			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;
 		}
 	}
@@ -372,7 +182,7 @@ var J = {
 	};
 	#i = ({ target: e, ctrlKey: t, shiftKey: n, metaKey: r }) => {
 		if (!(e.getAttribute("role") !== "gridcell" || e.getAttribute("cell-type") !== "default")) {
-			if (this.selectionMode === J.singleCell || this.selectionMode === J.multiCell) {
+			if (this.selectionMode === U.singleCell || this.selectionMode === U.multiCell) {
 				this.#a({
 					target: e,
 					ctrlKey: t,
@@ -381,7 +191,7 @@ var J = {
 				});
 				return;
 			}
-			(this.selectionMode === J.singleRow || this.selectionMode === J.multiRow) && this.#o({
+			(this.selectionMode === U.singleRow || this.selectionMode === U.multiRow) && this.#o({
 				target: e,
 				ctrlKey: t,
 				shiftKey: n,
@@ -391,7 +201,7 @@ var J = {
 	};
 	#a = ({ target: e, ctrlKey: t, shiftKey: n, metaKey: r }) => {
 		let i = e;
-		if (this.selectionMode === J.multiCell && (t || n || r)) i.selected = !this.#n.includes(i);
+		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;
@@ -399,14 +209,14 @@ var J = {
 	};
 	#o = ({ target: e, ctrlKey: t, shiftKey: n, metaKey: r }) => {
 		let i = e.parentNode;
-		if (this.selectionMode === J.multiRow && (t || n || r)) i.selected = !this.#t.includes(i);
+		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 = M.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) => {
+		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;
@@ -440,12 +250,12 @@ var J = {
 			}), 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 === J.singleCell || this.selectionMode === J.multiCell) {
+			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 === J.none) for (let e of [...t, ...n]) e._selectable = !1, e.selected = !1;
-			if (this.selectionMode === J.singleRow || this.selectionMode === J.multiRow) {
+			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;
 			}
@@ -504,17 +314,76 @@ var J = {
 		}), this.fixedColumnsPositions = [];
 	}
 };
-x([a({
+v([a({
 	attribute: "no-tabbing",
 	mode: "boolean"
-})], Y.prototype, "noTabbing", void 0), x([a({ attribute: "generate-header" })], Y.prototype, "generateHeader", void 0), x([a({ attribute: "grid-template-columns" })], Y.prototype, "gridTemplateColumns", void 0), x([n], Y.prototype, "rowsData", void 0), x([n], Y.prototype, "columnDefinitions", void 0), x([n], Y.prototype, "rowItemTemplate", void 0), x([n], Y.prototype, "cellItemTemplate", void 0), x([n], Y.prototype, "headerCellItemTemplate", void 0), x([n], Y.prototype, "focusRowIndex", void 0), x([n], Y.prototype, "focusColumnIndex", void 0), x([a({
+})], W.prototype, "noTabbing", void 0), v([a({ attribute: "generate-header" })], W.prototype, "generateHeader", void 0), v([a({ attribute: "grid-template-columns" })], W.prototype, "gridTemplateColumns", void 0), v([n], W.prototype, "rowsData", void 0), v([n], W.prototype, "columnDefinitions", void 0), v([n], W.prototype, "rowItemTemplate", void 0), v([n], W.prototype, "cellItemTemplate", void 0), v([n], W.prototype, "headerCellItemTemplate", void 0), v([n], W.prototype, "focusRowIndex", void 0), v([n], W.prototype, "focusColumnIndex", void 0), v([a({
 	attribute: "fixed-columns",
-	converter: l
-})], Y.prototype, "fixedColumns", void 0), x([n], Y.prototype, "defaultRowItemTemplate", void 0), x([n], Y.prototype, "rowElementTag", void 0), x([n], Y.prototype, "rowElements", void 0), x([n], Y.prototype, "slottedRowElements", void 0), x([a({ attribute: "selection-mode" })], Y.prototype, "selectionMode", void 0);
+	converter: ee
+})], W.prototype, "fixedColumns", void 0), v([n], W.prototype, "defaultRowItemTemplate", void 0), v([n], W.prototype, "rowElementTag", void 0), v([n], W.prototype, "rowElements", void 0), v([n], W.prototype, "slottedRowElements", void 0), v([a({ attribute: "selection-mode" })], W.prototype, "selectionMode", void 0);
+//#endregion
+//#region src/lib/data-grid/data-grid-row.ts
+var G = class extends A(c) {
+	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 u(d((e) => e.columnDefinitions), d((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 T:
+				t = Math.max(0, this.focusColumnIndex - 1), this.cellElements[t].focus(), e.preventDefault();
+				break;
+			case ne:
+				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";
+	}
+};
+v([a({ attribute: "grid-template-columns" })], G.prototype, "gridTemplateColumns", void 0), v([a({ attribute: "row-type" })], G.prototype, "rowType", void 0), v([n], G.prototype, "rowData", void 0), v([n], G.prototype, "columnDefinitions", void 0), v([n], G.prototype, "cellItemTemplate", void 0), v([n], G.prototype, "headerCellItemTemplate", void 0), v([n], G.prototype, "rowIndex", void 0), v([n], G.prototype, "activeCellItemTemplate", void 0), v([n], G.prototype, "defaultCellItemTemplate", void 0), v([n], G.prototype, "defaultHeaderCellItemTemplate", void 0), v([n], G.prototype, "cellElements", void 0), v([n], G.prototype, "_selectable", void 0), v([a({ mode: "boolean" })], G.prototype, "selected", void 0);
 //#endregion
 //#region src/lib/data-grid/data-grid.template.ts
-function ne(e) {
-	let t = e.tagFor(q);
+function K(e) {
+	let t = e.tagFor(G);
 	return i`
     <${t}
         :rowData="${(e) => e}"
@@ -523,15 +392,15 @@ function ne(e) {
     ></${t}>
 `;
 }
-function X(e) {
-	return e.selectionMode === void 0 || e.selectionMode === J.none ? null : e.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 Z(e) {
+function J(e) {
 	if (e.columnDefinitions === null) {
 		let t = e.querySelector("[cell-type=\"columnheader\"]")?.parentElement;
-		if (e.generateHeader === M.default && (t?.getAttribute("row-type") === N.header || t?.getAttribute("row-type") === N.stickyHeader)) return;
+		if (e.generateHeader === j.default && (t?.getAttribute("row-type") === M.header || t?.getAttribute("row-type") === M.stickyHeader)) return;
 		if (t) {
-			let n = e.generateHeader === M.sticky ? N.stickyHeader : N.header;
+			let n = e.generateHeader === j.sticky ? M.stickyHeader : M.header;
 			t.setAttribute("row-type", n);
 		}
 	}
@@ -539,35 +408,164 @@ function Z(e) {
 function re(e, { event: t }) {
 	t.stopPropagation();
 }
-var ie = (e) => {
-	let t = ne(e), n = e.tagFor(q, !0);
+var Y = (e) => {
+	let t = K(e), n = e.tagFor(G, !0);
 	return i`
 		<template
-			aria-multiselectable="${X}"
+			aria-multiselectable="${q}"
 			role="grid"
 			tabindex="0"
 			@sort="${re}"
 			:rowElementTag="${() => n}"
 			:defaultRowItemTemplate="${t}"
-			${g({
+			${h({
 		property: "rowElements",
-		filter: m("[role=row],[data-vvd-component=data-grid-row]")
+		filter: p("[role=row],[data-vvd-component=data-grid-row]")
 	})}
 		>
 			<div class="base">
-				${Z}
-				<slot ${h("slottedRowElements")}></slot>
+				${J}
+				<slot ${m("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(c)) {
+	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 te:
+			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 E:
+				/* 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;
+	}
 };
+v([a({ attribute: "cell-type" })], Z.prototype, "cellType", void 0), v([a({ attribute: "grid-column" })], Z.prototype, "gridColumn", void 0), v([n], Z.prototype, "rowData", void 0), v([n], Z.prototype, "columnDefinition", void 0), v([n], Z.prototype, "_selectable", void 0), v([a({ mode: "boolean" })], Z.prototype, "selected", void 0), v([a({ attribute: "sort-direction" })], Z.prototype, "sortDirection", void 0), v([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 oe(e) {
-	let t = e.tagFor(K);
+	let t = e.tagFor(Z);
 	return i`
     <${t}
         cell-type="${(e) => e.isRowHeader ? "rowheader" : void 0}"
@@ -579,7 +577,7 @@ function oe(e) {
 `;
 }
 function se(e) {
-	let t = e.tagFor(K);
+	let t = e.tagFor(Z);
 	return i`
     <${t}
         cell-type="columnheader"
@@ -592,23 +590,23 @@ var ce = (e) => {
 	let t = oe(e), n = se(e);
 	return i`
 		<template
-			${A({
+			${k({
 		role: "row",
 		ariaSelected: ae
 	})}
 			class="${(e) => e.rowType === "default" ? "" : e.rowType}"
 			:defaultCellItemTemplate="${t}"
 			:defaultHeaderCellItemTemplate="${n}"
-			${g({
+			${h({
 		property: "cellElements",
-		filter: m("[role=\"cell\"],[role=\"gridcell\"],[role=\"columnheader\"],[role=\"rowheader\"],[data-vvd-component=\"data-grid-cell\"]")
+		filter: p("[role=\"cell\"],[role=\"gridcell\"],[role=\"columnheader\"],[role=\"rowheader\"],[data-vvd-component=\"data-grid-cell\"]")
 	})}
 		>
 			<div
-				class="${(e) => S("base", ["selected", !!e.selected])}"
+				class="${(e) => x("base", ["selected", !!e.selected])}"
 				style="grid-template-columns: ${(e) => e.gridTemplateColumns};"
 			>
-				<slot ${h("slottedCellElements")}></slot>
+				<slot ${m("slottedCellElements")}></slot>
 			</div>
 		</template>
 	`;
@@ -616,10 +614,10 @@ var ce = (e) => {
 //#endregion
 //#region src/lib/data-grid/data-grid-cell.template.ts
 function Q(e) {
-	return e.cellType === "columnheader" && e.sortDirection !== void 0 && e.sortDirection !== P.other;
+	return e.cellType === "columnheader" && e.sortDirection !== void 0 && e.sortDirection !== N.other;
 }
 function le(e) {
-	return e.sortDirection === P.ascending ? "sort-asc-solid" : e.sortDirection === P.descending ? "sort-desc-solid" : "sort-solid";
+	return e.sortDirection === N.ascending ? "sort-asc-solid" : e.sortDirection === N.descending ? "sort-desc-solid" : "sort-solid";
 }
 function ue(e) {
 	return e._selectable && e.selected ? "true" : e._selectable && !e.selected ? "false" : null;
@@ -627,16 +625,16 @@ function ue(e) {
 function de(e) {
 	let t = e.tagFor(y);
 	return i`
-		${p(Q, i`
+		${f(Q, i`
 				<${t} class="header-icon" name="${le}"></${t}>
 			`)}
 	`;
 }
 function fe(e) {
-	return e.cellType === F.columnHeader && e.sortDirection !== void 0;
+	return e.cellType === P.columnHeader && e.sortDirection !== void 0;
 }
 function $(e) {
-	return e.sortDirection ?? P.none;
+	return e.sortDirection ?? N.none;
 }
 function pe(e) {
 	let t = $(e);
@@ -661,20 +659,20 @@ function _e(e, t) {
 }
 //#endregion
 //#region src/lib/data-grid/index.ts
-s(o("data-grid", Y, ie, [o("data-grid-row", q, ce, [o("data-grid-cell", K, (e) => {
-	let t = e.tagFor(v);
+s(o("data-grid", W, Y, [o("data-grid-row", G, ce, [o("data-grid-cell", Z, (e) => {
+	let t = e.tagFor(_);
 	return i`
 		<template
 			tabindex="-1"
-			${A({
-		role: (e) => I[e.cellType] ?? I.default,
+			${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="${({ selected: e, _actionItemsSlottedContent: t }) => S("base", ["selected", !!e], ["has-action-items", !!t?.length])}">
+			<div class="${({ selected: e, _actionItemsSlottedContent: t }) => x("base", ["selected", !!e], ["has-action-items", !!t?.length])}">
 				<div
 					class="content"
 					role="${(e) => Q(e) ? "button" : void 0}"
@@ -685,13 +683,13 @@ s(o("data-grid", Y, ie, [o("data-grid-row", q, ce, [o("data-grid-cell", K, (e) =
 								${(e) => e.locale.dataGrid.cell.selected}
 							</${t}>` : null}
 					<slot></slot>
-					${p(Q, i`<${t}
+					${f(Q, i`<${t}
 							data-announcement="button-role"
 						>
 							${(e) => e.locale.dataGrid.cell.button}
 						</${t}>
 						`)}
-					${p(fe, i`<${t}
+					${f(fe, i`<${t}
 							aria-live="polite"
 							data-announcement="sort-state"
 						>
@@ -701,10 +699,10 @@ s(o("data-grid", Y, ie, [o("data-grid-row", q, ce, [o("data-grid-cell", K, (e) =
 				</div>
 				<slot
 					name="action-items"
-					${h("_actionItemsSlottedContent")}
+					${m("_actionItemsSlottedContent")}
 				></slot>
 			</div>
 		</template>
 	`;
-}, [b, _], { styles: U })], { styles: H })], { styles: V }))();
+}, [b, g], { styles: H })], { styles: V })], { styles: B }))();
 //#endregion