@vonage/vivid 5.16.0 → 5.17.0

package/unbundled/definition32.cjs

@@ -592,12 +592,12 @@ var contextEvent = FAST.getById(KernelServiceId.contextEvent, () => {
 * Provides additional contextual information available to behaviors and expressions.
 * @public
 */
-var ExecutionContext$1 = Object.freeze({
+var ExecutionContext = Object.freeze({
 	default: {
 		index: 0,
 		length: 0,
 		get event() {
-			return ExecutionContext$1.getEvent();
+			return ExecutionContext.getEvent();
 		},
 		eventDetail() {
 			return this.event.detail;
@@ -659,7 +659,7 @@ var ViewBehaviorOrchestrator = Object.freeze({ create(source) {
 	let isConnected = false;
 	return {
 		source,
-		context: ExecutionContext$1.default,
+		context: ExecutionContext.default,
 		targets,
 		get isBound() {
 			return isConnected;
@@ -700,534 +700,148 @@ var ViewBehaviorOrchestrator = Object.freeze({ create(source) {
 	};
 } });
 //#endregion
-//#region src/lib/data-grid/data-grid-cell.ts
-var defaultCellContentsTemplate = _microsoft_fast_element.html`
-	<template>
-		${(x) => x.rowData === null || x.columnDefinition === null || x.columnDefinition.columnDataKey === null ? null : x.rowData[x.columnDefinition.columnDataKey]}
-	</template>
-`;
-var defaultHeaderCellContentsTemplate = _microsoft_fast_element.html`
-	<template>
-		${(x) => x.columnDefinition.title === void 0 ? x.columnDefinition.columnDataKey : x.columnDefinition.title}
-	</template>
-`;
+//#region src/lib/data-grid/data-grid.ts
+var DataGridSelectionMode = {
+	none: "none",
+	singleRow: "single-row",
+	multiRow: "multi-row",
+	singleCell: "single-cell",
+	multiCell: "multi-cell"
+};
 /**
 * @public
-* @component data-grid-cell
+* @component data-grid
 * @slot - Default slot.
-* @slot action-items - Add action items to the cell using this slot.
-* @event {CustomEvent<{columnDataKey: string, ariaSort: string | null, sortDirection: string | null}>} sort - Event that fires when a sortable column header is clicked
 * @event {CustomEvent<{cell: HTMLElement, row: HTMLElement, isHeaderCell: boolean, columnDataKey: string}>} cell-click - Event that fires when a cell is clicked
-* @event {CustomEvent<HTMLElement>} cell-focused - Fires a custom 'cell-focused' event when focus is on the cell or its contents
 */
-var DataGridCell = class extends require_localized.Localized(require_host_semantics.HostSemantics(require_vivid_element.VividElement)) {
-	constructor(..._args) {
-		super(..._args);
-		this.cellType = require_data_grid_options.DataGridCellTypes.default;
-		this.rowData = null;
-		this.columnDefinition = null;
-		this.isActiveCell = false;
-		this.customCellView = null;
-		this.updateCellStyle = () => {
-			if (this.gridColumn && !this.gridColumn.includes("undefined")) this.style.gridColumn = this.gridColumn;
-			else this.style.removeProperty("grid-column");
-		};
-		this._selectable = false;
-		this.selected = false;
-		this.ariaSelected = null;
-		this.ariaSort = null;
-	}
+var DataGrid = class DataGrid extends require_vivid_element.VividElement {
 	/**
-	* @internal
+	*  generates a gridTemplateColumns based on columndata array
 	*/
-	cellTypeChanged() {
-		if (this.$fastController.isConnected) this.updateCellView();
+	static generateTemplateColumns(columnDefinitions) {
+		let templateColumns = "";
+		columnDefinitions.forEach((_) => {
+			templateColumns = `${templateColumns}${templateColumns === "" ? "" : " "}1fr`;
+		});
+		return templateColumns;
 	}
 	/**
 	* @internal
 	*/
-	gridColumnChanged() {
-		if (this.$fastController.isConnected) this.updateCellStyle();
+	noTabbingChanged() {
+		if (this.$fastController.isConnected) this.#setTabIndex();
+	}
+	#setTabIndex() {
+		this.setAttribute("tabIndex", this.noTabbing || this.contains(document.activeElement) ? "-1" : "0");
 	}
 	/**
 	* @internal
 	*/
-	columnDefinitionChanged(_oldValue, _newValue) {
-		if (this.$fastController.isConnected) this.updateCellView();
+	generateHeaderChanged() {
+		if (this.$fastController.isConnected) this.toggleGeneratedHeader();
 	}
 	/**
-	* Updates the fixed column style
 	* @internal
 	*/
-	updateFixedStyle() {
-		if (this.fixedPosition !== void 0) {
-			this.setAttribute("data-fixed", "");
-			this.style.left = this.fixedPosition;
-		} else {
-			this.removeAttribute("data-fixed");
-			this.style.removeProperty("left");
+	gridTemplateColumnsChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.$fastController.isConnected) {
+			this.updateRowIndexes();
+			if (this.fixedColumns && this.fixedColumns > 0) this.applyFixedColumns();
 		}
 	}
 	/**
-	* Sets the fixed state and position for this cell
 	* @internal
 	*/
-	setFixedPosition(position) {
-		this.fixedPosition = position;
-		this.updateFixedStyle();
+	rowsDataChanged() {
+		if (this.columnDefinitions === null && this.rowsData.length > 0) this.columnDefinitions = DataGrid.generateColumns(this.rowsData[0]);
+		if (this.$fastController.isConnected) this.toggleGeneratedHeader();
 	}
 	/**
 	* @internal
 	*/
-	connectedCallback() {
-		super.connectedCallback();
-		this.addEventListener(_microsoft_fast_web_utilities.eventFocusIn, this.handleFocusin);
-		this.addEventListener(_microsoft_fast_web_utilities.eventFocusOut, this.handleFocusout);
-		this.addEventListener(_microsoft_fast_web_utilities.eventKeyDown, this.handleKeydown);
-		this.style.gridColumn = `${this.columnDefinition?.gridColumn === void 0 ? 0 : this.columnDefinition.gridColumn}`;
-		this.updateCellView();
-		this.updateCellStyle();
-		this.updateFixedStyle();
+	columnDefinitionsChanged() {
+		if (this.columnDefinitions === null) {
+			this.generatedGridTemplateColumns = "";
+			return;
+		}
+		this.generatedGridTemplateColumns = DataGrid.generateTemplateColumns(this.columnDefinitions);
+		/* v8 ignore if -- @preserve */
+		if (this.$fastController.isConnected) {
+			this.columnDefinitionsStale = true;
+			this.queueRowIndexUpdate();
+		}
 	}
 	/**
 	* @internal
 	*/
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.removeEventListener(_microsoft_fast_web_utilities.eventFocusIn, this.handleFocusin);
-		this.removeEventListener(_microsoft_fast_web_utilities.eventFocusOut, this.handleFocusout);
-		this.removeEventListener(_microsoft_fast_web_utilities.eventKeyDown, this.handleKeydown);
-		this.disconnectCellView();
+	headerCellItemTemplateChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.$fastController.isConnected) {
+			if (this.generatedHeader !== null) this.generatedHeader.headerCellItemTemplate = this.headerCellItemTemplate;
+		}
 	}
 	/**
 	* @internal
 	*/
-	handleFocusin(_) {
-		this.shadowRoot.querySelector(".base").classList.add("active");
-		if (this.isActiveCell) return;
-		this.isActiveCell = true;
-		switch (this.cellType) {
-			case require_data_grid_options.DataGridCellTypes.columnHeader:
-				if (this.columnDefinition !== null && this.columnDefinition.headerCellInternalFocusQueue !== true && typeof this.columnDefinition.headerCellFocusTargetCallback === "function") {
-					const focusTarget = this.columnDefinition.headerCellFocusTargetCallback(this);
-					/* v8 ignore else -- @preserve */
-					if (focusTarget !== null) focusTarget.focus();
-				}
-				break;
-			default:
-				if (this.columnDefinition !== null && this.columnDefinition.cellInternalFocusQueue !== true && typeof this.columnDefinition.cellFocusTargetCallback === "function") {
-					const focusTarget = this.columnDefinition.cellFocusTargetCallback(this);
-					/* v8 ignore else -- @preserve */
-					if (focusTarget !== null) focusTarget.focus();
-				}
-				break;
-		}
-		this.$emit("cell-focused", this);
+	focusRowIndexChanged() {
+		if (this.$fastController.isConnected) this.queueFocusUpdate();
 	}
 	/**
 	* @internal
 	*/
-	handleFocusout(_) {
-		this.shadowRoot.querySelector(".base").classList.remove("active");
-		/* v8 ignore else -- @preserve */
-		if (this !== document.activeElement && !this.contains(document.activeElement)) this.isActiveCell = false;
+	focusColumnIndexChanged() {
+		if (this.$fastController.isConnected) this.queueFocusUpdate();
 	}
 	/**
 	* @internal
 	*/
-	handleKeydown(e) {
-		if (e.defaultPrevented || this.columnDefinition === null || this.cellType === require_data_grid_options.DataGridCellTypes.default && this.columnDefinition.cellInternalFocusQueue !== true || this.cellType === require_data_grid_options.DataGridCellTypes.columnHeader && this.columnDefinition.headerCellInternalFocusQueue !== true) return;
-		switch (e.key) {
-			case _microsoft_fast_web_utilities.keyEnter:
-			case _microsoft_fast_web_utilities.keyFunction2:
-				if (this.contains(document.activeElement) && document.activeElement !== this) return;
-				switch (this.cellType) {
-					case require_data_grid_options.DataGridCellTypes.columnHeader:
-						if (this.columnDefinition.headerCellFocusTargetCallback !== void 0) {
-							const focusTarget = this.columnDefinition.headerCellFocusTargetCallback(this);
-							/* v8 ignore else -- @preserve */
-							if (focusTarget !== null) focusTarget.focus();
-							e.preventDefault();
-						}
-						break;
-					default:
-						if (this.columnDefinition.cellFocusTargetCallback !== void 0) {
-							const focusTarget = this.columnDefinition.cellFocusTargetCallback(this);
-							/* v8 ignore else -- @preserve */
-							if (focusTarget !== null) focusTarget.focus();
-							e.preventDefault();
-						}
-						break;
-				}
-				break;
-			case _microsoft_fast_web_utilities.keyEscape:
-				/* v8 ignore else -- @preserve */
-				if (this.contains(document.activeElement) && document.activeElement !== this) {
-					this.focus();
-					e.preventDefault();
-				}
-				break;
-		}
-	}
-	updateCellView() {
-		this.disconnectCellView();
-		if (this.columnDefinition === null) return;
-		switch (this.cellType) {
-			case require_data_grid_options.DataGridCellTypes.columnHeader:
-				if (this.columnDefinition.headerCellTemplate !== void 0) this.customCellView = this.columnDefinition.headerCellTemplate.render(this, this);
-				else this.customCellView = defaultHeaderCellContentsTemplate.render(this, this);
-				break;
-			case require_data_grid_options.DataGridCellTypes.rowHeader:
-			case require_data_grid_options.DataGridCellTypes.default:
-				if (this.columnDefinition.cellTemplate !== void 0) this.customCellView = this.columnDefinition.cellTemplate.render(this, this);
-				else this.customCellView = defaultCellContentsTemplate.render(this, this);
-				break;
-		}
-		if (!this.columnDefinition?.sortable) this.sortDirection = void 0;
-		else if (this.columnDefinition.sortDirection) this.sortDirection = this.columnDefinition.sortDirection;
-		else this.sortDirection = require_data_grid_options.DataGridCellSortStates.none;
-	}
-	disconnectCellView() {
-		if (this.customCellView !== null) {
-			this.customCellView.dispose();
-			this.customCellView = null;
+	fixedColumnsChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.$fastController.isConnected) {
+			this.applyFixedColumns();
+			this.setupResizeObserver();
 		}
 	}
 	/**
 	* @internal
 	*/
-	ariaSelectedChanged(prevValue, newValue) {
-		super.ariaSelectedChanged(prevValue, newValue);
-		this._selectable = newValue !== null;
-		this.selected = newValue === "true";
+	setupResizeObserver() {
+		if (this.resizeObserver) {
+			this.resizeObserver.disconnect();
+			this.resizeObserver = void 0;
+		}
+		if (typeof ResizeObserver !== "undefined" && this.fixedColumns && this.fixedColumns > 0) {
+			this.resizeObserver = new ResizeObserver(() => {
+				this.applyFixedColumns();
+			});
+			this.resizeObserver.observe(this);
+		}
 	}
 	/**
 	* @internal
 	*/
-	ariaSortChanged(oldValue, newValue) {
-		super.ariaSortChanged(oldValue, newValue);
-		if (newValue === null) {
-			this.sortDirection = void 0;
-			return;
+	connectedCallback() {
+		super.connectedCallback();
+		/* v8 ignore else -- @preserve */
+		if (this.rowItemTemplate === void 0) this.rowItemTemplate = this.defaultRowItemTemplate;
+		/* v8 ignore else -- @preserve */
+		if (this.behaviorOrchestrator === null) {
+			this.behaviorOrchestrator = ViewBehaviorOrchestrator.create(this);
+			this.$fastController.addBehavior(this.behaviorOrchestrator);
+			this.behaviorOrchestrator.addBehaviorFactory(new _microsoft_fast_element.RepeatDirective((0, _microsoft_fast_element.normalizeBinding)((x) => x.rowsData), (0, _microsoft_fast_element.normalizeBinding)((x) => x.rowItemTemplate), { positioning: true }), this.appendChild(document.createComment("")));
 		}
-		this.sortDirection = newValue;
-	}
-	#getColumnDataKey() {
-		return this.columnDefinition && this.columnDefinition.columnDataKey ? this.columnDefinition.columnDataKey : this.textContent.trim();
-	}
-	/**
-	* @internal
-	*/
-	_handleInteraction() {
-		const isHeaderCell = this.cellType === "columnheader";
-		if (isHeaderCell && this.sortDirection !== void 0) this.$emit("sort", {
-			columnDataKey: this.#getColumnDataKey(),
-			sortDirection: this.sortDirection
-		});
-		if (!(isHeaderCell ? this.columnDefinition?.headerCellInternalFocusQueue : this.columnDefinition?.cellInternalFocusQueue)) this.$emit("cell-click", {
-			cell: this,
-			row: this.parentElement,
-			isHeaderCell,
-			columnDataKey: this.#getColumnDataKey()
-		});
-		return true;
-	}
-};
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "cell-type" })], DataGridCell.prototype, "cellType", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "grid-column" })], DataGridCell.prototype, "gridColumn", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], DataGridCell.prototype, "rowData", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], DataGridCell.prototype, "columnDefinition", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], DataGridCell.prototype, "_selectable", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], DataGridCell.prototype, "selected", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "sort-direction" })], DataGridCell.prototype, "sortDirection", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], DataGridCell.prototype, "_actionItemsSlottedContent", void 0);
-//#endregion
-//#region src/lib/data-grid/data-grid-row.ts
-/**
-* @public
-* @component data-grid-row
-* @slot - Default slot.
-* @event {CustomEvent<{cell: HTMLElement, row: HTMLElement, isHeaderCell: boolean, columnDataKey: string}>} cell-click - Event that fires when a cell is clicked
-* @event {CustomEvent<HTMLElement>} row-focused - Fires a custom 'row-focused' event when focus is on an element (usually a cell or its contents) in the row
-*/
-var DataGridRow = class extends require_host_semantics.HostSemantics(require_vivid_element.VividElement) {
-	constructor(..._args) {
-		super(..._args);
-		this.rowType = require_data_grid_options.DataGridRowTypes.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 = false;
-		this.selected = false;
-	}
-	/**
-	* @internal
-	*/
-	gridTemplateColumnsChanged() {
-		if (this.$fastController.isConnected) this.updateRowStyle();
-	}
-	/**
-	* @internal
-	*/
-	rowTypeChanged() {
-		if (this.$fastController.isConnected) this.updateItemTemplate();
-	}
-	/**
-	* @internal
-	*/
-	cellItemTemplateChanged() {
-		this.updateItemTemplate();
-	}
-	/**
-	* @internal
-	*/
-	headerCellItemTemplateChanged() {
-		this.updateItemTemplate();
-	}
-	/**
-	* @internal
-	*/
-	connectedCallback() {
-		super.connectedCallback();
-		/* v8 ignore else -- @preserve */
-		if (this.behaviorOrchestrator === null) {
-			this.updateItemTemplate();
-			this.behaviorOrchestrator = ViewBehaviorOrchestrator.create(this);
-			this.$fastController.addBehavior(this.behaviorOrchestrator);
-			this.behaviorOrchestrator.addBehaviorFactory(new _microsoft_fast_element.RepeatDirective((0, _microsoft_fast_element.normalizeBinding)((x) => x.columnDefinitions), (0, _microsoft_fast_element.normalizeBinding)((x) => x.activeCellItemTemplate), { positioning: true }), this.appendChild(document.createComment("")));
-		}
-		this.addEventListener("cell-focused", this.handleCellFocus);
-		this.addEventListener(_microsoft_fast_web_utilities.eventFocusOut, this.handleFocusout);
-		this.addEventListener(_microsoft_fast_web_utilities.eventKeyDown, this.handleKeydown);
-		this.updateRowStyle();
-	}
-	/**
-	* @internal
-	*/
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.removeEventListener("cell-focused", this.handleCellFocus);
-		this.removeEventListener(_microsoft_fast_web_utilities.eventFocusOut, this.handleFocusout);
-		this.removeEventListener(_microsoft_fast_web_utilities.eventKeyDown, this.handleKeydown);
-	}
-	/**
-	* @internal
-	*/
-	handleFocusout(_) {
-		/* v8 ignore else -- @preserve */
-		if (!this.contains(document.activeElement)) this.focusColumnIndex = 0;
-	}
-	/**
-	* @internal
-	*/
-	handleCellFocus(e) {
-		this.focusColumnIndex = this.cellElements.indexOf(e.target);
-		this.$emit("row-focused", this);
-	}
-	/**
-	* @internal
-	*/
-	handleKeydown(e) {
-		if (e.defaultPrevented) return;
-		let newFocusColumnIndex = 0;
-		switch (e.key) {
-			case require_key_codes.keyArrowLeft:
-				newFocusColumnIndex = Math.max(0, this.focusColumnIndex - 1);
-				this.cellElements[newFocusColumnIndex].focus();
-				e.preventDefault();
-				break;
-			case require_key_codes.keyArrowRight:
-				newFocusColumnIndex = Math.min(this.cellElements.length - 1, this.focusColumnIndex + 1);
-				this.cellElements[newFocusColumnIndex].focus();
-				e.preventDefault();
-				break;
-			case _microsoft_fast_web_utilities.keyHome:
-				if (!e.ctrlKey) {
-					this.cellElements[0].focus();
-					e.preventDefault();
-				}
-				break;
-			case _microsoft_fast_web_utilities.keyEnd:
-				if (!e.ctrlKey) {
-					this.cellElements[this.cellElements.length - 1].focus();
-					e.preventDefault();
-				}
-				break;
-		}
-	}
-	updateItemTemplate() {
-		this.activeCellItemTemplate = this.rowType === require_data_grid_options.DataGridRowTypes.default && this.cellItemTemplate !== void 0 ? this.cellItemTemplate : this.rowType === require_data_grid_options.DataGridRowTypes.default && this.cellItemTemplate === void 0 ? this.defaultCellItemTemplate : this.headerCellItemTemplate !== void 0 ? this.headerCellItemTemplate : this.defaultHeaderCellItemTemplate;
-	}
-	/**
-	* @internal
-	*/
-	ariaSelectedChanged(oldValue, newValue) {
-		super.ariaSelectedChanged(oldValue, newValue);
-		this._selectable = newValue !== null;
-		this.selected = newValue === "true";
-	}
-};
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "grid-template-columns" })], DataGridRow.prototype, "gridTemplateColumns", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "row-type" })], DataGridRow.prototype, "rowType", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], DataGridRow.prototype, "rowData", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], DataGridRow.prototype, "columnDefinitions", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], DataGridRow.prototype, "cellItemTemplate", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], DataGridRow.prototype, "headerCellItemTemplate", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], DataGridRow.prototype, "rowIndex", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], DataGridRow.prototype, "activeCellItemTemplate", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], DataGridRow.prototype, "defaultCellItemTemplate", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], DataGridRow.prototype, "defaultHeaderCellItemTemplate", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], DataGridRow.prototype, "cellElements", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], DataGridRow.prototype, "_selectable", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], DataGridRow.prototype, "selected", void 0);
-//#endregion
-//#region src/lib/data-grid/data-grid.ts
-var DataGridSelectionMode = {
-	none: "none",
-	singleRow: "single-row",
-	multiRow: "multi-row",
-	singleCell: "single-cell",
-	multiCell: "multi-cell"
-};
-/**
-* @public
-* @component data-grid
-* @slot - Default slot.
-* @event {CustomEvent<{cell: HTMLElement, row: HTMLElement, isHeaderCell: boolean, columnDataKey: string}>} cell-click - Event that fires when a cell is clicked
-*/
-var DataGrid = class DataGrid extends require_vivid_element.VividElement {
-	/**
-	*  generates a gridTemplateColumns based on columndata array
-	*/
-	static generateTemplateColumns(columnDefinitions) {
-		let templateColumns = "";
-		columnDefinitions.forEach((_) => {
-			templateColumns = `${templateColumns}${templateColumns === "" ? "" : " "}1fr`;
-		});
-		return templateColumns;
-	}
-	/**
-	* @internal
-	*/
-	noTabbingChanged() {
-		if (this.$fastController.isConnected) this.#setTabIndex();
-	}
-	#setTabIndex() {
-		this.setAttribute("tabIndex", this.noTabbing || this.contains(document.activeElement) ? "-1" : "0");
-	}
-	/**
-	* @internal
-	*/
-	generateHeaderChanged() {
-		if (this.$fastController.isConnected) this.toggleGeneratedHeader();
-	}
-	/**
-	* @internal
-	*/
-	gridTemplateColumnsChanged() {
-		/* v8 ignore if -- @preserve */
-		if (this.$fastController.isConnected) {
-			this.updateRowIndexes();
-			if (this.fixedColumns && this.fixedColumns > 0) this.applyFixedColumns();
-		}
-	}
-	/**
-	* @internal
-	*/
-	rowsDataChanged() {
-		if (this.columnDefinitions === null && this.rowsData.length > 0) this.columnDefinitions = DataGrid.generateColumns(this.rowsData[0]);
-		if (this.$fastController.isConnected) this.toggleGeneratedHeader();
-	}
-	/**
-	* @internal
-	*/
-	columnDefinitionsChanged() {
-		if (this.columnDefinitions === null) {
-			this.generatedGridTemplateColumns = "";
-			return;
-		}
-		this.generatedGridTemplateColumns = DataGrid.generateTemplateColumns(this.columnDefinitions);
-		/* v8 ignore if -- @preserve */
-		if (this.$fastController.isConnected) {
-			this.columnDefinitionsStale = true;
-			this.queueRowIndexUpdate();
-		}
-	}
-	/**
-	* @internal
-	*/
-	headerCellItemTemplateChanged() {
-		/* v8 ignore if -- @preserve */
-		if (this.$fastController.isConnected) {
-			if (this.generatedHeader !== null) this.generatedHeader.headerCellItemTemplate = this.headerCellItemTemplate;
-		}
-	}
-	/**
-	* @internal
-	*/
-	focusRowIndexChanged() {
-		if (this.$fastController.isConnected) this.queueFocusUpdate();
-	}
-	/**
-	* @internal
-	*/
-	focusColumnIndexChanged() {
-		if (this.$fastController.isConnected) this.queueFocusUpdate();
-	}
-	/**
-	* @internal
-	*/
-	fixedColumnsChanged() {
-		/* v8 ignore if -- @preserve */
-		if (this.$fastController.isConnected) {
-			this.applyFixedColumns();
-			this.setupResizeObserver();
-		}
-	}
-	/**
-	* @internal
-	*/
-	setupResizeObserver() {
-		if (this.resizeObserver) {
-			this.resizeObserver.disconnect();
-			this.resizeObserver = void 0;
-		}
-		if (typeof ResizeObserver !== "undefined" && this.fixedColumns && this.fixedColumns > 0) {
-			this.resizeObserver = new ResizeObserver(() => {
-				this.applyFixedColumns();
-			});
-			this.resizeObserver.observe(this);
-		}
-	}
-	/**
-	* @internal
-	*/
-	connectedCallback() {
-		super.connectedCallback();
-		/* v8 ignore else -- @preserve */
-		if (this.rowItemTemplate === void 0) this.rowItemTemplate = this.defaultRowItemTemplate;
-		/* v8 ignore else -- @preserve */
-		if (this.behaviorOrchestrator === null) {
-			this.behaviorOrchestrator = ViewBehaviorOrchestrator.create(this);
-			this.$fastController.addBehavior(this.behaviorOrchestrator);
-			this.behaviorOrchestrator.addBehaviorFactory(new _microsoft_fast_element.RepeatDirective((0, _microsoft_fast_element.normalizeBinding)((x) => x.rowsData), (0, _microsoft_fast_element.normalizeBinding)((x) => x.rowItemTemplate), { positioning: true }), this.appendChild(document.createComment("")));
-		}
-		this.toggleGeneratedHeader();
-		this.addEventListener("row-focused", this.handleRowFocus);
-		this.addEventListener(_microsoft_fast_web_utilities.eventFocus, this.handleFocus);
-		this.addEventListener(_microsoft_fast_web_utilities.eventKeyDown, this.handleKeydown);
-		this.addEventListener(_microsoft_fast_web_utilities.eventFocusOut, this.handleFocusOut);
-		this.observer = new MutationObserver(this.onChildListChange);
-		this.observer.observe(this, { childList: true });
-		this.setupResizeObserver();
-		_microsoft_fast_element.Updates.enqueue(this.queueRowIndexUpdate);
-		this.#setTabIndex();
-		_microsoft_fast_element.Observable.getNotifier(this).subscribe(this.#changeHandler, "columnDefinitions");
+		this.toggleGeneratedHeader();
+		this.addEventListener("row-focused", this.handleRowFocus);
+		this.addEventListener(_microsoft_fast_web_utilities.eventFocus, this.handleFocus);
+		this.addEventListener(_microsoft_fast_web_utilities.eventKeyDown, this.handleKeydown);
+		this.addEventListener(_microsoft_fast_web_utilities.eventFocusOut, this.handleFocusOut);
+		this.observer = new MutationObserver(this.onChildListChange);
+		this.observer.observe(this, { childList: true });
+		this.setupResizeObserver();
+		_microsoft_fast_element.Updates.enqueue(this.queueRowIndexUpdate);
+		this.#setTabIndex();
+		_microsoft_fast_element.Observable.getNotifier(this).subscribe(this.#changeHandler, "columnDefinitions");
 	}
 	/**
 	* @internal
@@ -1638,6 +1252,150 @@ require_decorate.__decorate([_microsoft_fast_element.observable], DataGrid.proto
 require_decorate.__decorate([_microsoft_fast_element.observable], DataGrid.prototype, "slottedRowElements", void 0);
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "selection-mode" })], DataGrid.prototype, "selectionMode", void 0);
 //#endregion
+//#region src/lib/data-grid/data-grid-row.ts
+/**
+* @public
+* @component data-grid-row
+* @slot - Default slot.
+* @event {CustomEvent<{cell: HTMLElement, row: HTMLElement, isHeaderCell: boolean, columnDataKey: string}>} cell-click - Event that fires when a cell is clicked
+* @event {CustomEvent<HTMLElement>} row-focused - Fires a custom 'row-focused' event when focus is on an element (usually a cell or its contents) in the row
+*/
+var DataGridRow = class extends require_host_semantics.HostSemantics(require_vivid_element.VividElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.rowType = require_data_grid_options.DataGridRowTypes.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 = false;
+		this.selected = false;
+	}
+	/**
+	* @internal
+	*/
+	gridTemplateColumnsChanged() {
+		if (this.$fastController.isConnected) this.updateRowStyle();
+	}
+	/**
+	* @internal
+	*/
+	rowTypeChanged() {
+		if (this.$fastController.isConnected) this.updateItemTemplate();
+	}
+	/**
+	* @internal
+	*/
+	cellItemTemplateChanged() {
+		this.updateItemTemplate();
+	}
+	/**
+	* @internal
+	*/
+	headerCellItemTemplateChanged() {
+		this.updateItemTemplate();
+	}
+	/**
+	* @internal
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+		/* v8 ignore else -- @preserve */
+		if (this.behaviorOrchestrator === null) {
+			this.updateItemTemplate();
+			this.behaviorOrchestrator = ViewBehaviorOrchestrator.create(this);
+			this.$fastController.addBehavior(this.behaviorOrchestrator);
+			this.behaviorOrchestrator.addBehaviorFactory(new _microsoft_fast_element.RepeatDirective((0, _microsoft_fast_element.normalizeBinding)((x) => x.columnDefinitions), (0, _microsoft_fast_element.normalizeBinding)((x) => x.activeCellItemTemplate), { positioning: true }), this.appendChild(document.createComment("")));
+		}
+		this.addEventListener("cell-focused", this.handleCellFocus);
+		this.addEventListener(_microsoft_fast_web_utilities.eventFocusOut, this.handleFocusout);
+		this.addEventListener(_microsoft_fast_web_utilities.eventKeyDown, this.handleKeydown);
+		this.updateRowStyle();
+	}
+	/**
+	* @internal
+	*/
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("cell-focused", this.handleCellFocus);
+		this.removeEventListener(_microsoft_fast_web_utilities.eventFocusOut, this.handleFocusout);
+		this.removeEventListener(_microsoft_fast_web_utilities.eventKeyDown, this.handleKeydown);
+	}
+	/**
+	* @internal
+	*/
+	handleFocusout(_) {
+		/* v8 ignore else -- @preserve */
+		if (!this.contains(document.activeElement)) this.focusColumnIndex = 0;
+	}
+	/**
+	* @internal
+	*/
+	handleCellFocus(e) {
+		this.focusColumnIndex = this.cellElements.indexOf(e.target);
+		this.$emit("row-focused", this);
+	}
+	/**
+	* @internal
+	*/
+	handleKeydown(e) {
+		if (e.defaultPrevented) return;
+		let newFocusColumnIndex = 0;
+		switch (e.key) {
+			case require_key_codes.keyArrowLeft:
+				newFocusColumnIndex = Math.max(0, this.focusColumnIndex - 1);
+				this.cellElements[newFocusColumnIndex].focus();
+				e.preventDefault();
+				break;
+			case require_key_codes.keyArrowRight:
+				newFocusColumnIndex = Math.min(this.cellElements.length - 1, this.focusColumnIndex + 1);
+				this.cellElements[newFocusColumnIndex].focus();
+				e.preventDefault();
+				break;
+			case _microsoft_fast_web_utilities.keyHome:
+				if (!e.ctrlKey) {
+					this.cellElements[0].focus();
+					e.preventDefault();
+				}
+				break;
+			case _microsoft_fast_web_utilities.keyEnd:
+				if (!e.ctrlKey) {
+					this.cellElements[this.cellElements.length - 1].focus();
+					e.preventDefault();
+				}
+				break;
+		}
+	}
+	updateItemTemplate() {
+		this.activeCellItemTemplate = this.rowType === require_data_grid_options.DataGridRowTypes.default && this.cellItemTemplate !== void 0 ? this.cellItemTemplate : this.rowType === require_data_grid_options.DataGridRowTypes.default && this.cellItemTemplate === void 0 ? this.defaultCellItemTemplate : this.headerCellItemTemplate !== void 0 ? this.headerCellItemTemplate : this.defaultHeaderCellItemTemplate;
+	}
+	/**
+	* @internal
+	*/
+	ariaSelectedChanged(oldValue, newValue) {
+		super.ariaSelectedChanged(oldValue, newValue);
+		this._selectable = newValue !== null;
+		this.selected = newValue === "true";
+	}
+};
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "grid-template-columns" })], DataGridRow.prototype, "gridTemplateColumns", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "row-type" })], DataGridRow.prototype, "rowType", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGridRow.prototype, "rowData", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGridRow.prototype, "columnDefinitions", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGridRow.prototype, "cellItemTemplate", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGridRow.prototype, "headerCellItemTemplate", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGridRow.prototype, "rowIndex", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGridRow.prototype, "activeCellItemTemplate", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGridRow.prototype, "defaultCellItemTemplate", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGridRow.prototype, "defaultHeaderCellItemTemplate", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGridRow.prototype, "cellElements", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGridRow.prototype, "_selectable", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], DataGridRow.prototype, "selected", void 0);
+//#endregion
 //#region src/lib/data-grid/data-grid.template.ts
 function createRowItemTemplate(context) {
 	const rowTag = context.tagFor(DataGridRow);
@@ -1689,6 +1447,248 @@ var DataGridTemplate = (context) => {
 	`;
 };
 //#endregion
+//#region src/lib/data-grid/data-grid-cell.ts
+var defaultCellContentsTemplate = _microsoft_fast_element.html`
+	<template>
+		${(x) => x.rowData === null || x.columnDefinition === null || x.columnDefinition.columnDataKey === null ? null : x.rowData[x.columnDefinition.columnDataKey]}
+	</template>
+`;
+var defaultHeaderCellContentsTemplate = _microsoft_fast_element.html`
+	<template>
+		${(x) => x.columnDefinition.title === void 0 ? x.columnDefinition.columnDataKey : x.columnDefinition.title}
+	</template>
+`;
+/**
+* @public
+* @component data-grid-cell
+* @slot - Default slot.
+* @slot action-items - Add action items to the cell using this slot.
+* @event {CustomEvent<{columnDataKey: string, ariaSort: string | null, sortDirection: string | null}>} sort - Event that fires when a sortable column header is clicked
+* @event {CustomEvent<{cell: HTMLElement, row: HTMLElement, isHeaderCell: boolean, columnDataKey: string}>} cell-click - Event that fires when a cell is clicked
+* @event {CustomEvent<HTMLElement>} cell-focused - Fires a custom 'cell-focused' event when focus is on the cell or its contents
+*/
+var DataGridCell = class extends require_localized.Localized(require_host_semantics.HostSemantics(require_vivid_element.VividElement)) {
+	constructor(..._args) {
+		super(..._args);
+		this.cellType = require_data_grid_options.DataGridCellTypes.default;
+		this.rowData = null;
+		this.columnDefinition = null;
+		this.isActiveCell = false;
+		this.customCellView = null;
+		this.updateCellStyle = () => {
+			if (this.gridColumn && !this.gridColumn.includes("undefined")) this.style.gridColumn = this.gridColumn;
+			else this.style.removeProperty("grid-column");
+		};
+		this._selectable = false;
+		this.selected = false;
+		this.ariaSelected = null;
+		this.ariaSort = null;
+	}
+	/**
+	* @internal
+	*/
+	cellTypeChanged() {
+		if (this.$fastController.isConnected) this.updateCellView();
+	}
+	/**
+	* @internal
+	*/
+	gridColumnChanged() {
+		if (this.$fastController.isConnected) this.updateCellStyle();
+	}
+	/**
+	* @internal
+	*/
+	columnDefinitionChanged(_oldValue, _newValue) {
+		if (this.$fastController.isConnected) this.updateCellView();
+	}
+	/**
+	* Updates the fixed column style
+	* @internal
+	*/
+	updateFixedStyle() {
+		if (this.fixedPosition !== void 0) {
+			this.setAttribute("data-fixed", "");
+			this.style.left = this.fixedPosition;
+		} else {
+			this.removeAttribute("data-fixed");
+			this.style.removeProperty("left");
+		}
+	}
+	/**
+	* Sets the fixed state and position for this cell
+	* @internal
+	*/
+	setFixedPosition(position) {
+		this.fixedPosition = position;
+		this.updateFixedStyle();
+	}
+	/**
+	* @internal
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener(_microsoft_fast_web_utilities.eventFocusIn, this.handleFocusin);
+		this.addEventListener(_microsoft_fast_web_utilities.eventFocusOut, this.handleFocusout);
+		this.addEventListener(_microsoft_fast_web_utilities.eventKeyDown, 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(_microsoft_fast_web_utilities.eventFocusIn, this.handleFocusin);
+		this.removeEventListener(_microsoft_fast_web_utilities.eventFocusOut, this.handleFocusout);
+		this.removeEventListener(_microsoft_fast_web_utilities.eventKeyDown, this.handleKeydown);
+		this.disconnectCellView();
+	}
+	/**
+	* @internal
+	*/
+	handleFocusin(_) {
+		this.shadowRoot.querySelector(".base").classList.add("active");
+		if (this.isActiveCell) return;
+		this.isActiveCell = true;
+		switch (this.cellType) {
+			case require_data_grid_options.DataGridCellTypes.columnHeader:
+				if (this.columnDefinition !== null && this.columnDefinition.headerCellInternalFocusQueue !== true && typeof this.columnDefinition.headerCellFocusTargetCallback === "function") {
+					const focusTarget = this.columnDefinition.headerCellFocusTargetCallback(this);
+					/* v8 ignore else -- @preserve */
+					if (focusTarget !== null) focusTarget.focus();
+				}
+				break;
+			default:
+				if (this.columnDefinition !== null && this.columnDefinition.cellInternalFocusQueue !== true && typeof this.columnDefinition.cellFocusTargetCallback === "function") {
+					const focusTarget = this.columnDefinition.cellFocusTargetCallback(this);
+					/* v8 ignore else -- @preserve */
+					if (focusTarget !== null) focusTarget.focus();
+				}
+				break;
+		}
+		this.$emit("cell-focused", this);
+	}
+	/**
+	* @internal
+	*/
+	handleFocusout(_) {
+		this.shadowRoot.querySelector(".base").classList.remove("active");
+		/* v8 ignore else -- @preserve */
+		if (this !== document.activeElement && !this.contains(document.activeElement)) this.isActiveCell = false;
+	}
+	/**
+	* @internal
+	*/
+	handleKeydown(e) {
+		if (e.defaultPrevented || this.columnDefinition === null || this.cellType === require_data_grid_options.DataGridCellTypes.default && this.columnDefinition.cellInternalFocusQueue !== true || this.cellType === require_data_grid_options.DataGridCellTypes.columnHeader && this.columnDefinition.headerCellInternalFocusQueue !== true) return;
+		switch (e.key) {
+			case _microsoft_fast_web_utilities.keyEnter:
+			case _microsoft_fast_web_utilities.keyFunction2:
+				if (this.contains(document.activeElement) && document.activeElement !== this) return;
+				switch (this.cellType) {
+					case require_data_grid_options.DataGridCellTypes.columnHeader:
+						if (this.columnDefinition.headerCellFocusTargetCallback !== void 0) {
+							const focusTarget = this.columnDefinition.headerCellFocusTargetCallback(this);
+							/* v8 ignore else -- @preserve */
+							if (focusTarget !== null) focusTarget.focus();
+							e.preventDefault();
+						}
+						break;
+					default:
+						if (this.columnDefinition.cellFocusTargetCallback !== void 0) {
+							const focusTarget = this.columnDefinition.cellFocusTargetCallback(this);
+							/* v8 ignore else -- @preserve */
+							if (focusTarget !== null) focusTarget.focus();
+							e.preventDefault();
+						}
+						break;
+				}
+				break;
+			case _microsoft_fast_web_utilities.keyEscape:
+				/* v8 ignore else -- @preserve */
+				if (this.contains(document.activeElement) && document.activeElement !== this) {
+					this.focus();
+					e.preventDefault();
+				}
+				break;
+		}
+	}
+	updateCellView() {
+		this.disconnectCellView();
+		if (this.columnDefinition === null) return;
+		switch (this.cellType) {
+			case require_data_grid_options.DataGridCellTypes.columnHeader:
+				if (this.columnDefinition.headerCellTemplate !== void 0) this.customCellView = this.columnDefinition.headerCellTemplate.render(this, this);
+				else this.customCellView = defaultHeaderCellContentsTemplate.render(this, this);
+				break;
+			case require_data_grid_options.DataGridCellTypes.rowHeader:
+			case require_data_grid_options.DataGridCellTypes.default:
+				if (this.columnDefinition.cellTemplate !== void 0) this.customCellView = this.columnDefinition.cellTemplate.render(this, this);
+				else this.customCellView = defaultCellContentsTemplate.render(this, this);
+				break;
+		}
+		if (!this.columnDefinition?.sortable) this.sortDirection = void 0;
+		else if (this.columnDefinition.sortDirection) this.sortDirection = this.columnDefinition.sortDirection;
+		else this.sortDirection = require_data_grid_options.DataGridCellSortStates.none;
+	}
+	disconnectCellView() {
+		if (this.customCellView !== null) {
+			this.customCellView.dispose();
+			this.customCellView = null;
+		}
+	}
+	/**
+	* @internal
+	*/
+	ariaSelectedChanged(prevValue, newValue) {
+		super.ariaSelectedChanged(prevValue, newValue);
+		this._selectable = newValue !== null;
+		this.selected = newValue === "true";
+	}
+	/**
+	* @internal
+	*/
+	ariaSortChanged(oldValue, newValue) {
+		super.ariaSortChanged(oldValue, newValue);
+		if (newValue === null) {
+			this.sortDirection = void 0;
+			return;
+		}
+		this.sortDirection = newValue;
+	}
+	#getColumnDataKey() {
+		return this.columnDefinition && this.columnDefinition.columnDataKey ? this.columnDefinition.columnDataKey : this.textContent.trim();
+	}
+	/**
+	* @internal
+	*/
+	_handleInteraction() {
+		const isHeaderCell = this.cellType === "columnheader";
+		if (isHeaderCell && this.sortDirection !== void 0) this.$emit("sort", {
+			columnDataKey: this.#getColumnDataKey(),
+			sortDirection: this.sortDirection
+		});
+		if (!(isHeaderCell ? this.columnDefinition?.headerCellInternalFocusQueue : this.columnDefinition?.cellInternalFocusQueue)) this.$emit("cell-click", {
+			cell: this,
+			row: this.parentElement,
+			isHeaderCell,
+			columnDataKey: this.#getColumnDataKey()
+		});
+		return true;
+	}
+};
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "cell-type" })], DataGridCell.prototype, "cellType", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "grid-column" })], DataGridCell.prototype, "gridColumn", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGridCell.prototype, "rowData", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGridCell.prototype, "columnDefinition", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGridCell.prototype, "_selectable", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], DataGridCell.prototype, "selected", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "sort-direction" })], DataGridCell.prototype, "sortDirection", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], DataGridCell.prototype, "_actionItemsSlottedContent", void 0);
+//#endregion
 //#region src/lib/data-grid/data-grid-row.template.ts
 function calculateAriaSelectedValue$1(x) {
 	if (x._selectable && x.selected) return "true";