@vonage/vivid 3.47.0 → 3.49.0-preview.0

package/shared/definition17.cjs

@@ -0,0 +1,1372 @@
+'use strict';
+
+const definition = require('./definition26.cjs');
+const index = require('./index.cjs');
+const keyCodes = require('./key-codes.cjs');
+const repeat = require('./repeat.cjs');
+const slotted = require('./slotted.cjs');
+const children = require('./children.cjs');
+const icon = require('./icon.cjs');
+const focus = require('./focus2.cjs');
+const keyCodes$1 = require('./key-codes2.cjs');
+const when = require('./when.cjs');
+
+/**
+ * This set of exported strings reference https://developer.mozilla.org/en-US/docs/Web/Events
+ * and should include all non-deprecated and non-experimental Standard events
+ */
+const eventFocus = "focus";
+const eventFocusIn = "focusin";
+const eventFocusOut = "focusout";
+const eventKeyDown = "keydown";
+
+/**
+ * Enumerates the data grid auto generated header options
+ * default option generates a non-sticky header row
+ *
+ * @public
+ */
+const GenerateHeaderOptions$1 = {
+    none: "none",
+    default: "default",
+    sticky: "sticky",
+};
+/**
+ * Enumerates possible data grid cell types.
+ *
+ * @public
+ */
+const DataGridCellTypes = {
+    default: "default",
+    columnHeader: "columnheader",
+    rowHeader: "rowheader",
+};
+/**
+ * Enumerates possible data grid row types
+ *
+ * @public
+ */
+const DataGridRowTypes$1 = {
+    default: "default",
+    header: "header",
+    stickyHeader: "sticky-header",
+};
+
+/**
+ * A Data Grid Row Custom HTML Element.
+ *
+ * @fires row-focused - Fires a custom 'row-focused' event when focus is on an element (usually a cell or its contents) in the row
+ * @slot - The default slot for custom cell elements
+ * @public
+ */
+let DataGridRow$1 = class DataGridRow extends index.FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The type of row
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: row-type
+         */
+        this.rowType = DataGridRowTypes$1.default;
+        /**
+         * The base data for this row
+         *
+         * @public
+         */
+        this.rowData = null;
+        /**
+         * The column definitions of the row
+         *
+         * @public
+         */
+        this.columnDefinitions = null;
+        /**
+         * Whether focus is on/in a cell within this row.
+         *
+         * @internal
+         */
+        this.isActiveRow = false;
+        this.cellsRepeatBehavior = null;
+        this.cellsPlaceholder = null;
+        /**
+         * @internal
+         */
+        this.focusColumnIndex = 0;
+        this.refocusOnLoad = false;
+        this.updateRowStyle = () => {
+            this.style.gridTemplateColumns = this.gridTemplateColumns;
+        };
+    }
+    gridTemplateColumnsChanged() {
+        if (this.$fastController.isConnected) {
+            this.updateRowStyle();
+        }
+    }
+    rowTypeChanged() {
+        if (this.$fastController.isConnected) {
+            this.updateItemTemplate();
+        }
+    }
+    rowDataChanged() {
+        if (this.rowData !== null && this.isActiveRow) {
+            this.refocusOnLoad = true;
+            return;
+        }
+    }
+    cellItemTemplateChanged() {
+        this.updateItemTemplate();
+    }
+    headerCellItemTemplateChanged() {
+        this.updateItemTemplate();
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        // note that row elements can be reused with a different data object
+        // as the parent grid's repeat behavior reacts to changes in the data set.
+        if (this.cellsRepeatBehavior === null) {
+            this.cellsPlaceholder = document.createComment("");
+            this.appendChild(this.cellsPlaceholder);
+            this.updateItemTemplate();
+            this.cellsRepeatBehavior = new repeat.RepeatDirective(x => x.columnDefinitions, x => x.activeCellItemTemplate, { positioning: true }).createBehavior(this.cellsPlaceholder);
+            /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
+            this.$fastController.addBehaviors([this.cellsRepeatBehavior]);
+        }
+        this.addEventListener("cell-focused", this.handleCellFocus);
+        this.addEventListener(eventFocusOut, this.handleFocusout);
+        this.addEventListener(eventKeyDown, this.handleKeydown);
+        this.updateRowStyle();
+        if (this.refocusOnLoad) {
+            // if focus was on the row when data changed try to refocus on same cell
+            this.refocusOnLoad = false;
+            if (this.cellElements.length > this.focusColumnIndex) {
+                this.cellElements[this.focusColumnIndex].focus();
+            }
+        }
+    }
+    /**
+     * @internal
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener("cell-focused", this.handleCellFocus);
+        this.removeEventListener(eventFocusOut, this.handleFocusout);
+        this.removeEventListener(eventKeyDown, this.handleKeydown);
+    }
+    handleFocusout(e) {
+        if (!this.contains(e.target)) {
+            this.isActiveRow = false;
+            this.focusColumnIndex = 0;
+        }
+    }
+    handleCellFocus(e) {
+        this.isActiveRow = true;
+        this.focusColumnIndex = this.cellElements.indexOf(e.target);
+        this.$emit("row-focused", this);
+    }
+    handleKeydown(e) {
+        if (e.defaultPrevented) {
+            return;
+        }
+        let newFocusColumnIndex = 0;
+        switch (e.key) {
+            case keyCodes.keyArrowLeft:
+                // focus left one cell
+                newFocusColumnIndex = Math.max(0, this.focusColumnIndex - 1);
+                this.cellElements[newFocusColumnIndex].focus();
+                e.preventDefault();
+                break;
+            case keyCodes.keyArrowRight:
+                // focus right one cell
+                newFocusColumnIndex = Math.min(this.cellElements.length - 1, this.focusColumnIndex + 1);
+                this.cellElements[newFocusColumnIndex].focus();
+                e.preventDefault();
+                break;
+            case keyCodes.keyHome:
+                if (!e.ctrlKey) {
+                    this.cellElements[0].focus();
+                    e.preventDefault();
+                }
+                break;
+            case keyCodes.keyEnd:
+                if (!e.ctrlKey) {
+                    // focus last cell of the row
+                    this.cellElements[this.cellElements.length - 1].focus();
+                    e.preventDefault();
+                }
+                break;
+        }
+    }
+    updateItemTemplate() {
+        this.activeCellItemTemplate =
+            this.rowType === DataGridRowTypes$1.default &&
+                this.cellItemTemplate !== undefined
+                ? this.cellItemTemplate
+                : this.rowType === DataGridRowTypes$1.default &&
+                    this.cellItemTemplate === undefined
+                    ? this.defaultCellItemTemplate
+                    : this.headerCellItemTemplate !== undefined
+                        ? this.headerCellItemTemplate
+                        : this.defaultHeaderCellItemTemplate;
+    }
+};
+index.__decorate([
+    index.attr({ attribute: "grid-template-columns" })
+], DataGridRow$1.prototype, "gridTemplateColumns", void 0);
+index.__decorate([
+    index.attr({ attribute: "row-type" })
+], DataGridRow$1.prototype, "rowType", void 0);
+index.__decorate([
+    index.observable
+], DataGridRow$1.prototype, "rowData", void 0);
+index.__decorate([
+    index.observable
+], DataGridRow$1.prototype, "columnDefinitions", void 0);
+index.__decorate([
+    index.observable
+], DataGridRow$1.prototype, "cellItemTemplate", void 0);
+index.__decorate([
+    index.observable
+], DataGridRow$1.prototype, "headerCellItemTemplate", void 0);
+index.__decorate([
+    index.observable
+], DataGridRow$1.prototype, "rowIndex", void 0);
+index.__decorate([
+    index.observable
+], DataGridRow$1.prototype, "isActiveRow", void 0);
+index.__decorate([
+    index.observable
+], DataGridRow$1.prototype, "activeCellItemTemplate", void 0);
+index.__decorate([
+    index.observable
+], DataGridRow$1.prototype, "defaultCellItemTemplate", void 0);
+index.__decorate([
+    index.observable
+], DataGridRow$1.prototype, "defaultHeaderCellItemTemplate", void 0);
+index.__decorate([
+    index.observable
+], DataGridRow$1.prototype, "cellElements", void 0);
+
+/**
+ * A Data Grid Custom HTML Element.
+ *
+ * @slot - The default slot for custom row elements
+ * @public
+ */
+let DataGrid$1 = class DataGrid extends index.FoundationElement {
+    constructor() {
+        super();
+        /**
+         * When true the component will not add itself to the tab queue.
+         * Default is false.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: no-tabbing
+         */
+        this.noTabbing = false;
+        /**
+         *  Whether the grid should automatically generate a header row and its type
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: generate-header
+         */
+        this.generateHeader = GenerateHeaderOptions$1.default;
+        /**
+         * The data being displayed in the grid
+         *
+         * @public
+         */
+        this.rowsData = [];
+        /**
+         * The column definitions of the grid
+         *
+         * @public
+         */
+        this.columnDefinitions = null;
+        /**
+         * The index of the row that will receive focus the next time the
+         * grid is focused. This value changes as focus moves to different
+         * rows within the grid.  Changing this value when focus is already
+         * within the grid moves focus to the specified row.
+         *
+         * @public
+         */
+        this.focusRowIndex = 0;
+        /**
+         * The index of the column that will receive focus the next time the
+         * grid is focused. This value changes as focus moves to different rows
+         * within the grid.  Changing this value when focus is already within
+         * the grid moves focus to the specified column.
+         *
+         * @public
+         */
+        this.focusColumnIndex = 0;
+        this.rowsPlaceholder = null;
+        this.generatedHeader = null;
+        this.isUpdatingFocus = false;
+        this.pendingFocusUpdate = false;
+        this.rowindexUpdateQueued = false;
+        this.columnDefinitionsStale = true;
+        this.generatedGridTemplateColumns = "";
+        this.focusOnCell = (rowIndex, columnIndex, scrollIntoView) => {
+            if (this.rowElements.length === 0) {
+                this.focusRowIndex = 0;
+                this.focusColumnIndex = 0;
+                return;
+            }
+            const focusRowIndex = Math.max(0, Math.min(this.rowElements.length - 1, rowIndex));
+            const focusRow = this.rowElements[focusRowIndex];
+            const cells = focusRow.querySelectorAll('[role="cell"], [role="gridcell"], [role="columnheader"], [role="rowheader"]');
+            const focusColumnIndex = Math.max(0, Math.min(cells.length - 1, columnIndex));
+            const focusTarget = cells[focusColumnIndex];
+            if (scrollIntoView &&
+                this.scrollHeight !== this.clientHeight &&
+                ((focusRowIndex < this.focusRowIndex && this.scrollTop > 0) ||
+                    (focusRowIndex > this.focusRowIndex &&
+                        this.scrollTop < this.scrollHeight - this.clientHeight))) {
+                focusTarget.scrollIntoView({ block: "center", inline: "center" });
+            }
+            focusTarget.focus();
+        };
+        this.onChildListChange = (mutations, 
+        /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+        observer) => {
+            if (mutations && mutations.length) {
+                mutations.forEach((mutation) => {
+                    mutation.addedNodes.forEach((newNode) => {
+                        if (newNode.nodeType === 1 &&
+                            newNode.getAttribute("role") === "row") {
+                            newNode.columnDefinitions = this.columnDefinitions;
+                        }
+                    });
+                });
+                this.queueRowIndexUpdate();
+            }
+        };
+        this.queueRowIndexUpdate = () => {
+            if (!this.rowindexUpdateQueued) {
+                this.rowindexUpdateQueued = true;
+                index.DOM.queueUpdate(this.updateRowIndexes);
+            }
+        };
+        this.updateRowIndexes = () => {
+            let newGridTemplateColumns = this.gridTemplateColumns;
+            if (newGridTemplateColumns === undefined) {
+                // try to generate columns based on manual rows
+                if (this.generatedGridTemplateColumns === "" && this.rowElements.length > 0) {
+                    const firstRow = this.rowElements[0];
+                    this.generatedGridTemplateColumns = new Array(firstRow.cellElements.length)
+                        .fill("1fr")
+                        .join(" ");
+                }
+                newGridTemplateColumns = this.generatedGridTemplateColumns;
+            }
+            this.rowElements.forEach((element, index) => {
+                const thisRow = element;
+                thisRow.rowIndex = index;
+                thisRow.gridTemplateColumns = newGridTemplateColumns;
+                if (this.columnDefinitionsStale) {
+                    thisRow.columnDefinitions = this.columnDefinitions;
+                }
+            });
+            this.rowindexUpdateQueued = false;
+            this.columnDefinitionsStale = false;
+        };
+    }
+    /**
+     *  generates a gridTemplateColumns based on columndata array
+     */
+    static generateTemplateColumns(columnDefinitions) {
+        let templateColumns = "";
+        columnDefinitions.forEach((column) => {
+            templateColumns = `${templateColumns}${templateColumns === "" ? "" : " "}${"1fr"}`;
+        });
+        return templateColumns;
+    }
+    noTabbingChanged() {
+        if (this.$fastController.isConnected) {
+            if (this.noTabbing) {
+                this.setAttribute("tabIndex", "-1");
+            }
+            else {
+                this.setAttribute("tabIndex", this.contains(document.activeElement) ||
+                    this === document.activeElement
+                    ? "-1"
+                    : "0");
+            }
+        }
+    }
+    generateHeaderChanged() {
+        if (this.$fastController.isConnected) {
+            this.toggleGeneratedHeader();
+        }
+    }
+    gridTemplateColumnsChanged() {
+        if (this.$fastController.isConnected) {
+            this.updateRowIndexes();
+        }
+    }
+    rowsDataChanged() {
+        if (this.columnDefinitions === null && this.rowsData.length > 0) {
+            this.columnDefinitions = DataGrid.generateColumns(this.rowsData[0]);
+        }
+        if (this.$fastController.isConnected) {
+            this.toggleGeneratedHeader();
+        }
+    }
+    columnDefinitionsChanged() {
+        if (this.columnDefinitions === null) {
+            this.generatedGridTemplateColumns = "";
+            return;
+        }
+        this.generatedGridTemplateColumns = DataGrid.generateTemplateColumns(this.columnDefinitions);
+        if (this.$fastController.isConnected) {
+            this.columnDefinitionsStale = true;
+            this.queueRowIndexUpdate();
+        }
+    }
+    headerCellItemTemplateChanged() {
+        if (this.$fastController.isConnected) {
+            if (this.generatedHeader !== null) {
+                this.generatedHeader.headerCellItemTemplate = this.headerCellItemTemplate;
+            }
+        }
+    }
+    focusRowIndexChanged() {
+        if (this.$fastController.isConnected) {
+            this.queueFocusUpdate();
+        }
+    }
+    focusColumnIndexChanged() {
+        if (this.$fastController.isConnected) {
+            this.queueFocusUpdate();
+        }
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.rowItemTemplate === undefined) {
+            this.rowItemTemplate = this.defaultRowItemTemplate;
+        }
+        this.rowsPlaceholder = document.createComment("");
+        this.appendChild(this.rowsPlaceholder);
+        this.toggleGeneratedHeader();
+        this.rowsRepeatBehavior = new repeat.RepeatDirective(x => x.rowsData, x => x.rowItemTemplate, { positioning: true }).createBehavior(this.rowsPlaceholder);
+        /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
+        this.$fastController.addBehaviors([this.rowsRepeatBehavior]);
+        this.addEventListener("row-focused", this.handleRowFocus);
+        this.addEventListener(eventFocus, this.handleFocus);
+        this.addEventListener(eventKeyDown, this.handleKeydown);
+        this.addEventListener(eventFocusOut, this.handleFocusOut);
+        this.observer = new MutationObserver(this.onChildListChange);
+        // only observe if nodes are added or removed
+        this.observer.observe(this, { childList: true });
+        if (this.noTabbing) {
+            this.setAttribute("tabindex", "-1");
+        }
+        index.DOM.queueUpdate(this.queueRowIndexUpdate);
+    }
+    /**
+     * @internal
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener("row-focused", this.handleRowFocus);
+        this.removeEventListener(eventFocus, this.handleFocus);
+        this.removeEventListener(eventKeyDown, this.handleKeydown);
+        this.removeEventListener(eventFocusOut, this.handleFocusOut);
+        // disconnect observer
+        this.observer.disconnect();
+        this.rowsPlaceholder = null;
+        this.generatedHeader = null;
+    }
+    /**
+     * @internal
+     */
+    handleRowFocus(e) {
+        this.isUpdatingFocus = true;
+        const focusRow = e.target;
+        this.focusRowIndex = this.rowElements.indexOf(focusRow);
+        this.focusColumnIndex = focusRow.focusColumnIndex;
+        this.setAttribute("tabIndex", "-1");
+        this.isUpdatingFocus = false;
+    }
+    /**
+     * @internal
+     */
+    handleFocus(e) {
+        this.focusOnCell(this.focusRowIndex, this.focusColumnIndex, true);
+    }
+    /**
+     * @internal
+     */
+    handleFocusOut(e) {
+        if (e.relatedTarget === null || !this.contains(e.relatedTarget)) {
+            this.setAttribute("tabIndex", this.noTabbing ? "-1" : "0");
+        }
+    }
+    /**
+     * @internal
+     */
+    handleKeydown(e) {
+        if (e.defaultPrevented) {
+            return;
+        }
+        let newFocusRowIndex;
+        const maxIndex = this.rowElements.length - 1;
+        const currentGridBottom = this.offsetHeight + this.scrollTop;
+        const lastRow = this.rowElements[maxIndex];
+        switch (e.key) {
+            case keyCodes.keyArrowUp:
+                e.preventDefault();
+                // focus up one row
+                this.focusOnCell(this.focusRowIndex - 1, this.focusColumnIndex, true);
+                break;
+            case keyCodes.keyArrowDown:
+                e.preventDefault();
+                // focus down one row
+                this.focusOnCell(this.focusRowIndex + 1, this.focusColumnIndex, true);
+                break;
+            case keyCodes.keyPageUp:
+                e.preventDefault();
+                if (this.rowElements.length === 0) {
+                    this.focusOnCell(0, 0, false);
+                    break;
+                }
+                if (this.focusRowIndex === 0) {
+                    this.focusOnCell(0, this.focusColumnIndex, false);
+                    return;
+                }
+                newFocusRowIndex = this.focusRowIndex - 1;
+                for (newFocusRowIndex; newFocusRowIndex >= 0; newFocusRowIndex--) {
+                    const thisRow = this.rowElements[newFocusRowIndex];
+                    if (thisRow.offsetTop < this.scrollTop) {
+                        this.scrollTop =
+                            thisRow.offsetTop + thisRow.clientHeight - this.clientHeight;
+                        break;
+                    }
+                }
+                this.focusOnCell(newFocusRowIndex, this.focusColumnIndex, false);
+                break;
+            case keyCodes.keyPageDown:
+                e.preventDefault();
+                if (this.rowElements.length === 0) {
+                    this.focusOnCell(0, 0, false);
+                    break;
+                }
+                // focus down one "page"
+                if (this.focusRowIndex >= maxIndex ||
+                    lastRow.offsetTop + lastRow.offsetHeight <= currentGridBottom) {
+                    this.focusOnCell(maxIndex, this.focusColumnIndex, false);
+                    return;
+                }
+                newFocusRowIndex = this.focusRowIndex + 1;
+                for (newFocusRowIndex; newFocusRowIndex <= maxIndex; newFocusRowIndex++) {
+                    const thisRow = this.rowElements[newFocusRowIndex];
+                    if (thisRow.offsetTop + thisRow.offsetHeight > currentGridBottom) {
+                        let stickyHeaderOffset = 0;
+                        if (this.generateHeader === GenerateHeaderOptions$1.sticky &&
+                            this.generatedHeader !== null) {
+                            stickyHeaderOffset = this.generatedHeader.clientHeight;
+                        }
+                        this.scrollTop = thisRow.offsetTop - stickyHeaderOffset;
+                        break;
+                    }
+                }
+                this.focusOnCell(newFocusRowIndex, this.focusColumnIndex, false);
+                break;
+            case keyCodes.keyHome:
+                if (e.ctrlKey) {
+                    e.preventDefault();
+                    // focus first cell of first row
+                    this.focusOnCell(0, 0, true);
+                }
+                break;
+            case keyCodes.keyEnd:
+                if (e.ctrlKey && this.columnDefinitions !== null) {
+                    e.preventDefault();
+                    // focus last cell of last row
+                    this.focusOnCell(this.rowElements.length - 1, this.columnDefinitions.length - 1, true);
+                }
+                break;
+        }
+    }
+    queueFocusUpdate() {
+        if (this.isUpdatingFocus &&
+            (this.contains(document.activeElement) || this === document.activeElement)) {
+            return;
+        }
+        if (this.pendingFocusUpdate === false) {
+            this.pendingFocusUpdate = true;
+            index.DOM.queueUpdate(() => this.updateFocus());
+        }
+    }
+    updateFocus() {
+        this.pendingFocusUpdate = false;
+        this.focusOnCell(this.focusRowIndex, this.focusColumnIndex, true);
+    }
+    toggleGeneratedHeader() {
+        if (this.generatedHeader !== null) {
+            this.removeChild(this.generatedHeader);
+            this.generatedHeader = null;
+        }
+        if (this.generateHeader !== GenerateHeaderOptions$1.none &&
+            this.rowsData.length > 0) {
+            const generatedHeaderElement = document.createElement(this.rowElementTag);
+            this.generatedHeader = generatedHeaderElement;
+            this.generatedHeader.columnDefinitions = this.columnDefinitions;
+            this.generatedHeader.gridTemplateColumns = this.gridTemplateColumns;
+            this.generatedHeader.rowType =
+                this.generateHeader === GenerateHeaderOptions$1.sticky
+                    ? DataGridRowTypes$1.stickyHeader
+                    : DataGridRowTypes$1.header;
+            if (this.firstChild !== null || this.rowsPlaceholder !== null) {
+                this.insertBefore(generatedHeaderElement, this.firstChild !== null ? this.firstChild : this.rowsPlaceholder);
+            }
+            return;
+        }
+    }
+};
+/**
+ *  generates a basic column definition by examining sample row data
+ */
+DataGrid$1.generateColumns = (row) => {
+    return Object.getOwnPropertyNames(row).map((property, index) => {
+        return {
+            columnDataKey: property,
+            gridColumn: `${index}`,
+        };
+    });
+};
+index.__decorate([
+    index.attr({ attribute: "no-tabbing", mode: "boolean" })
+], DataGrid$1.prototype, "noTabbing", void 0);
+index.__decorate([
+    index.attr({ attribute: "generate-header" })
+], DataGrid$1.prototype, "generateHeader", void 0);
+index.__decorate([
+    index.attr({ attribute: "grid-template-columns" })
+], DataGrid$1.prototype, "gridTemplateColumns", void 0);
+index.__decorate([
+    index.observable
+], DataGrid$1.prototype, "rowsData", void 0);
+index.__decorate([
+    index.observable
+], DataGrid$1.prototype, "columnDefinitions", void 0);
+index.__decorate([
+    index.observable
+], DataGrid$1.prototype, "rowItemTemplate", void 0);
+index.__decorate([
+    index.observable
+], DataGrid$1.prototype, "cellItemTemplate", void 0);
+index.__decorate([
+    index.observable
+], DataGrid$1.prototype, "headerCellItemTemplate", void 0);
+index.__decorate([
+    index.observable
+], DataGrid$1.prototype, "focusRowIndex", void 0);
+index.__decorate([
+    index.observable
+], DataGrid$1.prototype, "focusColumnIndex", void 0);
+index.__decorate([
+    index.observable
+], DataGrid$1.prototype, "defaultRowItemTemplate", void 0);
+index.__decorate([
+    index.observable
+], DataGrid$1.prototype, "rowElementTag", void 0);
+index.__decorate([
+    index.observable
+], DataGrid$1.prototype, "rowElements", void 0);
+
+const defaultCellContentsTemplate = index.html `
+    <template>
+        ${x => x.rowData === null ||
+    x.columnDefinition === null ||
+    x.columnDefinition.columnDataKey === null
+    ? null
+    : x.rowData[x.columnDefinition.columnDataKey]}
+    </template>
+`;
+const defaultHeaderCellContentsTemplate = index.html `
+    <template>
+        ${x => x.columnDefinition === null
+    ? null
+    : x.columnDefinition.title === undefined
+        ? x.columnDefinition.columnDataKey
+        : x.columnDefinition.title}
+    </template>
+`;
+/**
+ * A Data Grid Cell Custom HTML Element.
+ *
+ * @fires cell-focused - Fires a custom 'cell-focused' event when focus is on the cell or its contents
+ * @slot - The default slot for cell contents.  The "cell contents template" renders here.
+ * @public
+ */
+let DataGridCell$1 = class DataGridCell extends index.FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The type of cell
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: cell-type
+         */
+        this.cellType = DataGridCellTypes.default;
+        /**
+         * The base data for the parent row
+         *
+         * @public
+         */
+        this.rowData = null;
+        /**
+         * The base data for the column
+         *
+         * @public
+         */
+        this.columnDefinition = null;
+        this.isActiveCell = false;
+        this.customCellView = null;
+        this.updateCellStyle = () => {
+            this.style.gridColumn = this.gridColumn;
+        };
+    }
+    cellTypeChanged() {
+        if (this.$fastController.isConnected) {
+            this.updateCellView();
+        }
+    }
+    gridColumnChanged() {
+        if (this.$fastController.isConnected) {
+            this.updateCellStyle();
+        }
+    }
+    columnDefinitionChanged(oldValue, newValue) {
+        if (this.$fastController.isConnected) {
+            this.updateCellView();
+        }
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        var _a;
+        super.connectedCallback();
+        this.addEventListener(eventFocusIn, this.handleFocusin);
+        this.addEventListener(eventFocusOut, this.handleFocusout);
+        this.addEventListener(eventKeyDown, this.handleKeydown);
+        this.style.gridColumn = `${((_a = this.columnDefinition) === null || _a === void 0 ? void 0 : _a.gridColumn) === undefined
+            ? 0
+            : this.columnDefinition.gridColumn}`;
+        this.updateCellView();
+        this.updateCellStyle();
+    }
+    /**
+     * @internal
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener(eventFocusIn, this.handleFocusin);
+        this.removeEventListener(eventFocusOut, this.handleFocusout);
+        this.removeEventListener(eventKeyDown, this.handleKeydown);
+        this.disconnectCellView();
+    }
+    handleFocusin(e) {
+        if (this.isActiveCell) {
+            return;
+        }
+        this.isActiveCell = true;
+        switch (this.cellType) {
+            case DataGridCellTypes.columnHeader:
+                if (this.columnDefinition !== null &&
+                    this.columnDefinition.headerCellInternalFocusQueue !== true &&
+                    typeof this.columnDefinition.headerCellFocusTargetCallback ===
+                        "function") {
+                    // move focus to the focus target
+                    const focusTarget = this.columnDefinition.headerCellFocusTargetCallback(this);
+                    if (focusTarget !== null) {
+                        focusTarget.focus();
+                    }
+                }
+                break;
+            default:
+                if (this.columnDefinition !== null &&
+                    this.columnDefinition.cellInternalFocusQueue !== true &&
+                    typeof this.columnDefinition.cellFocusTargetCallback === "function") {
+                    // move focus to the focus target
+                    const focusTarget = this.columnDefinition.cellFocusTargetCallback(this);
+                    if (focusTarget !== null) {
+                        focusTarget.focus();
+                    }
+                }
+                break;
+        }
+        this.$emit("cell-focused", this);
+    }
+    handleFocusout(e) {
+        if (this !== document.activeElement && !this.contains(document.activeElement)) {
+            this.isActiveCell = false;
+        }
+    }
+    handleKeydown(e) {
+        if (e.defaultPrevented ||
+            this.columnDefinition === null ||
+            (this.cellType === DataGridCellTypes.default &&
+                this.columnDefinition.cellInternalFocusQueue !== true) ||
+            (this.cellType === DataGridCellTypes.columnHeader &&
+                this.columnDefinition.headerCellInternalFocusQueue !== true)) {
+            return;
+        }
+        switch (e.key) {
+            case keyCodes.keyEnter:
+            case keyCodes.keyFunction2:
+                if (this.contains(document.activeElement) &&
+                    document.activeElement !== this) {
+                    return;
+                }
+                switch (this.cellType) {
+                    case DataGridCellTypes.columnHeader:
+                        if (this.columnDefinition.headerCellFocusTargetCallback !==
+                            undefined) {
+                            const focusTarget = this.columnDefinition.headerCellFocusTargetCallback(this);
+                            if (focusTarget !== null) {
+                                focusTarget.focus();
+                            }
+                            e.preventDefault();
+                        }
+                        break;
+                    default:
+                        if (this.columnDefinition.cellFocusTargetCallback !== undefined) {
+                            const focusTarget = this.columnDefinition.cellFocusTargetCallback(this);
+                            if (focusTarget !== null) {
+                                focusTarget.focus();
+                            }
+                            e.preventDefault();
+                        }
+                        break;
+                }
+                break;
+            case keyCodes.keyEscape:
+                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 DataGridCellTypes.columnHeader:
+                if (this.columnDefinition.headerCellTemplate !== undefined) {
+                    this.customCellView = this.columnDefinition.headerCellTemplate.render(this, this);
+                }
+                else {
+                    this.customCellView = defaultHeaderCellContentsTemplate.render(this, this);
+                }
+                break;
+            case undefined:
+            case DataGridCellTypes.rowHeader:
+            case DataGridCellTypes.default:
+                if (this.columnDefinition.cellTemplate !== undefined) {
+                    this.customCellView = this.columnDefinition.cellTemplate.render(this, this);
+                }
+                else {
+                    this.customCellView = defaultCellContentsTemplate.render(this, this);
+                }
+                break;
+        }
+    }
+    disconnectCellView() {
+        if (this.customCellView !== null) {
+            this.customCellView.dispose();
+            this.customCellView = null;
+        }
+    }
+};
+index.__decorate([
+    index.attr({ attribute: "cell-type" })
+], DataGridCell$1.prototype, "cellType", void 0);
+index.__decorate([
+    index.attr({ attribute: "grid-column" })
+], DataGridCell$1.prototype, "gridColumn", void 0);
+index.__decorate([
+    index.observable
+], DataGridCell$1.prototype, "rowData", void 0);
+index.__decorate([
+    index.observable
+], DataGridCell$1.prototype, "columnDefinition", void 0);
+
+const dataGridStyles = ":host{display:block}:host([generate-header=sticky]){max-block-size:400px}.base{position:relative;overflow:auto;block-size:inherit;inline-size:100%;max-block-size:inherit}\n";
+
+const dataGridRowStyles = ".base{display:grid;width:100%;box-sizing:border-box;color:var(--vvd-color-canvas-text)}.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-faint: var(--vvd-data-grid-row-cta-faint, var(--vvd-color-cta-50));--_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-faint: var(--vvd-data-grid-row-accent-faint, var(--vvd-color-neutral-50));--_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-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}:host([row-type=sticky-header]) .base{position:sticky;z-index:9;top:0;background:var(--data-grid-row-background, var(--vvd-color-canvas))}:host([row-type=hidden-header]) .base{display:none}:host(:is([aria-selected]):not([row-type*=header])) .base{background-color:var(--_appearance-color-fill)}\n";
+
+const dataGridCellStyles = ":host{min-inline-size:80px}:host(:focus-visible){outline:none}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;padding:8px 12px;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2)));color:var(--_appearance-color-text);font:var(--vvd-typography-base)}.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-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-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-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}:host([cell-type=columnheader]) .base{border-color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}:host(:is([aria-selected]):not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}.focus-indicator{--focus-stroke-gap-color: transparent;pointer-events:none}:host(:not(:focus)) .base>.focus-indicator{display:none}slot{display:block;overflow:hidden;inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.header-icon{margin-inline-start:auto}\n";
+
+const DataGridCellSortStates = {
+  none: "none",
+  ascending: "ascending",
+  descending: "descending",
+  other: "other"
+};
+const GenerateHeaderOptions = {
+  none: "none",
+  default: "default",
+  sticky: "sticky"
+};
+const DataGridRowTypes = {
+  default: "default",
+  header: "header",
+  stickyHeader: "sticky-header"
+};
+const DataGridCellRole = {
+  columnheader: "columnheader",
+  rowheader: "rowheader",
+  default: "gridcell"
+};
+
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp$2(target, key, result);
+  return result;
+};
+const DataGridSelectionMode = {
+  none: "none",
+  singleRow: "single-row",
+  multiRow: "multi-row",
+  singleCell: "single-cell",
+  multiCell: "multi-cell"
+};
+class DataGrid extends DataGrid$1 {
+  constructor() {
+    super();
+    this.#handleKeypress = (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        this.#handleClick(e);
+      }
+    };
+    this.#handleClick = ({ target, ctrlKey, shiftKey, metaKey }) => {
+      if (target.getAttribute("role") !== "gridcell")
+        return;
+      if (this.selectionMode === DataGridSelectionMode.singleCell || this.selectionMode === DataGridSelectionMode.multiCell) {
+        this.#handleCellSelection({ target, ctrlKey, shiftKey, metaKey });
+        return;
+      }
+      if (this.selectionMode === DataGridSelectionMode.singleRow || this.selectionMode === DataGridSelectionMode.multiRow) {
+        this.#handleRowSelection({ target, ctrlKey, shiftKey, metaKey });
+      }
+    };
+    this.#handleCellSelection = ({ target, ctrlKey, shiftKey, metaKey }) => {
+      const cell = target;
+      if (this.selectionMode === DataGridSelectionMode.multiCell && (ctrlKey || shiftKey || metaKey)) {
+        this.#setSelectedState(cell, !this.#selectedCells.includes(cell));
+      } else {
+        const cacheTargetSelection = cell.getAttribute("aria-selected") === "true";
+        this.#resetSelection();
+        this.#setSelectedState(cell, !cacheTargetSelection);
+      }
+    };
+    this.#handleRowSelection = ({ target, ctrlKey, shiftKey, metaKey }) => {
+      const row = target.parentNode;
+      if (this.selectionMode === DataGridSelectionMode.multiRow && (ctrlKey || shiftKey || metaKey)) {
+        this.#setSelectedState(row, !this.#selectedRows.includes(row));
+      } else {
+        const cacheTargetSelection = row.getAttribute("aria-selected") === "true";
+        this.#resetSelection();
+        this.#setSelectedState(row, !cacheTargetSelection);
+      }
+    };
+    this.#changeHandler = {
+      handleChange(dataGrid, propertyName) {
+        if (propertyName === "columnDefinitions") {
+          if (dataGrid.$fastController.isConnected) {
+            dataGrid.toggleGeneratedHeader();
+          }
+        }
+      }
+    };
+    this.#setSelectedState = (cell, selectedState) => {
+      cell.setAttribute("aria-selected", selectedState.toString());
+    };
+    this.#resetSelection = () => {
+      if (this.selectionMode === DataGridSelectionMode.singleCell || this.selectionMode === DataGridSelectionMode.multiCell) {
+        Array.from(this.querySelectorAll('[role="gridcell"]')).forEach((cell) => this.#setSelectedState(cell, false));
+        Array.from(this.querySelectorAll('[role="row"]')).forEach((row) => row.removeAttribute("aria-selected"));
+      }
+      if (this.selectionMode === DataGridSelectionMode.none) {
+        Array.from(this.querySelectorAll('[role="gridcell"]')).forEach((cell) => cell.removeAttribute("aria-selected"));
+        Array.from(this.querySelectorAll('[role="row"]')).forEach((row) => row.removeAttribute("aria-selected"));
+      }
+      if (this.selectionMode === DataGridSelectionMode.singleRow || this.selectionMode === DataGridSelectionMode.multiRow) {
+        Array.from(this.querySelectorAll('[role="gridcell"]')).forEach((cell) => cell.removeAttribute("aria-selected"));
+        Array.from(this.querySelectorAll('[role="row"]')).forEach((row) => row.setAttribute("aria-selected", "false"));
+      }
+    };
+    this.#initSelections = () => {
+      if (this.selectionMode === DataGridSelectionMode.singleCell || this.selectionMode === DataGridSelectionMode.multiCell) {
+        Array.from(this.querySelectorAll('[role="gridcell"]')).forEach((cell) => !cell.hasAttribute("aria-selected") && this.#setSelectedState(cell, false));
+        Array.from(this.querySelectorAll('[role="row"]')).forEach((row) => row.removeAttribute("aria-selected"));
+      }
+      if (this.selectionMode === DataGridSelectionMode.none) {
+        Array.from(this.querySelectorAll('[role="gridcell"]')).forEach((cell) => cell.removeAttribute("aria-selected"));
+        Array.from(this.querySelectorAll('[role="row"]')).forEach((row) => row.removeAttribute("aria-selected"));
+      }
+      if (this.selectionMode === DataGridSelectionMode.singleRow || this.selectionMode === DataGridSelectionMode.multiRow) {
+        Array.from(this.querySelectorAll('[role="gridcell"]')).forEach((cell) => cell.removeAttribute("aria-selected"));
+        Array.from(this.querySelectorAll('[role="row"]')).forEach((row) => !row.hasAttribute("aria-selected") && row.setAttribute("aria-selected", "false"));
+      }
+    };
+    this.addEventListener("click", this.#handleClick);
+    this.addEventListener("keydown", this.#handleKeypress);
+    const privates = this;
+    privates.toggleGeneratedHeader = () => {
+      if (privates.generatedHeader !== null) {
+        this.removeChild(privates.generatedHeader);
+        privates.generatedHeader = null;
+      }
+      if (this.generateHeader !== GenerateHeaderOptions.none && this.columnDefinitions !== null) {
+        const generatedHeaderElement = document.createElement(
+          this.rowElementTag
+        );
+        privates.generatedHeader = generatedHeaderElement;
+        privates.generatedHeader.columnDefinitions = this.columnDefinitions;
+        privates.generatedHeader.gridTemplateColumns = this.gridTemplateColumns;
+        privates.generatedHeader.rowType = this.generateHeader === GenerateHeaderOptions.sticky ? DataGridRowTypes.stickyHeader : DataGridRowTypes.header;
+        if (this.firstChild !== null || privates.rowsPlaceholder !== null) {
+          this.insertBefore(
+            generatedHeaderElement,
+            this.firstChild !== null ? this.firstChild : privates.rowsPlaceholder
+          );
+        }
+        return;
+      }
+    };
+  }
+  /**
+   *
+   *
+   * @internal
+   */
+  slottedRowElementsChanged(_oldValue, _newValue) {
+    this.#initSelections();
+  }
+  get #selectedRows() {
+    return this.rowElements.filter((row) => row.getAttribute("aria-selected") === "true");
+  }
+  get #selectedCells() {
+    return this.rowElements.reduce((acc, row) => {
+      const rowChildren = Array.from(row.children);
+      const selectedCells = rowChildren.filter((cell) => cell.getAttribute("aria-selected") === "true");
+      return acc.concat(selectedCells);
+    }, []);
+  }
+  selectionModeChanged(oldValue) {
+    if (oldValue === void 0) {
+      index.DOM.queueUpdate(this.#initSelections);
+      return;
+    }
+    this.#resetSelection();
+  }
+  #handleKeypress;
+  #handleClick;
+  #handleCellSelection;
+  #handleRowSelection;
+  #changeHandler;
+  connectedCallback() {
+    super.connectedCallback();
+    index.Observable.getNotifier(this).subscribe(this.#changeHandler, "columnDefinitions");
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    index.Observable.getNotifier(this).unsubscribe(this.#changeHandler, "columnDefinitions");
+  }
+  #setSelectedState;
+  #resetSelection;
+  #initSelections;
+  static generateColumns(rowData) {
+    return Object.keys(rowData).map((property, index) => {
+      return {
+        columnDataKey: property,
+        gridColumn: `${index}`
+      };
+    });
+  }
+}
+__decorateClass$2([
+  index.observable
+], DataGrid.prototype, "slottedRowElements", 2);
+__decorateClass$2([
+  index.attr({ attribute: "selection-mode" })
+], DataGrid.prototype, "selectionMode", 2);
+
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp$1(target, key, result);
+  return result;
+};
+class DataGridRow extends DataGridRow$1 {
+  constructor() {
+    super(...arguments);
+    this.ariaSelected = null;
+  }
+}
+__decorateClass$1([
+  index.attr({ attribute: "aria-selected" })
+], DataGridRow.prototype, "ariaSelected", 2);
+
+function createRowItemTemplate(context) {
+  const rowTag = context.tagFor(DataGridRow);
+  return index.html`
+    <${rowTag}
+        :rowData="${(x) => x}"
+        :cellItemTemplate="${(_, c) => c.parent.cellItemTemplate}"
+        :headerCellItemTemplate="${(_, c) => c.parent.headerCellItemTemplate}"
+    ></${rowTag}>
+`;
+}
+function getMultiSelectAriaState(x) {
+  return x.selectionMode === void 0 || x.selectionMode === DataGridSelectionMode.none ? null : x.selectionMode.includes("multi") ? "true" : "false";
+}
+function setHeaderRow(x) {
+  if (x.columnDefinitions === null) {
+    const headerRow = x.querySelector('[cell-type="columnheader"]')?.parentElement;
+    if (headerRow) {
+      const rowType = x.generateHeader === GenerateHeaderOptions.sticky ? DataGridRowTypes.stickyHeader : DataGridRowTypes.header;
+      headerRow.setAttribute("row-type", rowType);
+    }
+  }
+}
+function handleColumnSort(_, { event }) {
+  event.stopPropagation();
+}
+const DataGridTemplate = (context) => {
+  const rowItemTemplate = createRowItemTemplate(context);
+  const rowTag = context.tagFor(DataGridRow);
+  return index.html`
+        <template
+						aria-multiselectable="${getMultiSelectAriaState}"
+            role="grid"
+            tabindex="0"
+						@sort="${handleColumnSort}"
+            :rowElementTag="${() => rowTag}"
+            :defaultRowItemTemplate="${rowItemTemplate}"
+            ${children.children({
+    property: "rowElements",
+    filter: slotted.elements("[role=row]")
+  })}
+        >
+			<div class="base">
+				${setHeaderRow}
+				<slot ${slotted.slotted("slottedRowElements")}></slot>
+			</div>
+        </template>
+    `;
+};
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class DataGridCell extends DataGridCell$1 {
+  constructor() {
+    super();
+    this.ariaSelected = null;
+    this.ariaSort = null;
+    this.updateCellStyle = () => {
+      if (this.gridColumn && !this.gridColumn.includes("undefined")) {
+        this.style.gridColumn = this.gridColumn;
+      } else {
+        this.style.removeProperty("grid-column");
+      }
+    };
+  }
+  ariaSelectedChanged(_, selectedState) {
+    this.shadowRoot.querySelector(".base")?.classList.toggle("selected", selectedState === "true");
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.ariaSelectedChanged(null, this.ariaSelected);
+  }
+  handleFocusin(e) {
+    super.handleFocusin(e);
+    this.shadowRoot.querySelector(".base").classList.add("active");
+  }
+  handleFocusout(e) {
+    super.handleFocusout(e);
+    this.shadowRoot.querySelector(".base").classList.remove("active");
+  }
+  #getColumnDataKey() {
+    return this.columnDefinition && this.columnDefinition.columnDataKey ? this.columnDefinition.columnDataKey : this.textContent.trim();
+  }
+  /**
+   * @internal
+   */
+  _handleInteraction() {
+    const isHeaderCell = this.cellType === "columnheader";
+    const isSortable = isHeaderCell && this.ariaSort !== null;
+    if (isSortable) {
+      this.$emit("sort", {
+        columnDataKey: this.#getColumnDataKey(),
+        sortDirection: this.ariaSort
+      });
+    }
+    const hasInternalFocusQueue = isHeaderCell ? this.columnDefinition?.headerCellInternalFocusQueue : this.columnDefinition?.cellInternalFocusQueue;
+    if (!hasInternalFocusQueue) {
+      this.$emit("cell-click", {
+        cell: this,
+        row: this.parentElement,
+        isHeaderCell,
+        columnDataKey: this.#getColumnDataKey()
+      });
+    }
+  }
+}
+__decorateClass([
+  index.attr({ attribute: "aria-selected", mode: "fromView" })
+], DataGridCell.prototype, "ariaSelected", 2);
+__decorateClass([
+  index.attr({ attribute: "aria-sort" })
+], DataGridCell.prototype, "ariaSort", 2);
+
+function createCellItemTemplate(context) {
+  const cellTag = context.tagFor(DataGridCell);
+  return index.html`
+    <${cellTag}
+        cell-type="${(x) => x.isRowHeader ? "rowheader" : void 0}"
+        grid-column="${(_, c) => c.index + 1}"
+        :rowData="${(_, c) => c.parent.rowData}"
+        :columnDefinition="${(x) => x}"
+				selected="${(_, c) => c.parent.ariaSelected === "true" ? true : null}"
+    ></${cellTag}>
+`;
+}
+function createHeaderCellItemTemplate(context) {
+  const cellTag = context.tagFor(DataGridCell);
+  return index.html`
+    <${cellTag}
+        cell-type="columnheader"
+        grid-column="${(_, c) => c.index + 1}"
+        :columnDefinition="${(x) => x}"
+    ></${cellTag}>
+`;
+}
+const DataGridRowTemplate = (context) => {
+  const cellItemTemplate = createCellItemTemplate(context);
+  const headerCellItemTemplate = createHeaderCellItemTemplate(context);
+  return index.html`
+        <template
+            role="row"
+            class="${(x) => x.rowType !== "default" ? x.rowType : ""}"
+            :defaultCellItemTemplate="${cellItemTemplate}"
+            :defaultHeaderCellItemTemplate="${headerCellItemTemplate}"
+            ${children.children({
+    property: "cellElements",
+    filter: slotted.elements('[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"]')
+  })}
+        >
+					<div class="base ${(x) => x.ariaSelected === "true" ? "selected" : ""}"
+							 style="grid-template-columns: ${(x) => x.gridTemplateColumns};"
+					>
+            <slot ${slotted.slotted("slottedCellElements")}></slot>
+					</div>
+        </template>
+    `;
+};
+
+function shouldShowSortIcons(x) {
+  if (x.columnDefinition) {
+    x.ariaSort = !x.columnDefinition.sortable ? null : x.columnDefinition.sortDirection ? x.columnDefinition.sortDirection : DataGridCellSortStates.none;
+  }
+  return x.cellType === "columnheader" && x.ariaSort !== null && x.ariaSort !== DataGridCellSortStates.other;
+}
+function getSortIcon(x) {
+  return x.ariaSort === DataGridCellSortStates.ascending ? "sort-asc-solid" : x.ariaSort === DataGridCellSortStates.descending ? "sort-desc-solid" : "sort-solid";
+}
+function renderSortIcons(c) {
+  const iconTag = c.tagFor(icon.Icon);
+  return index.html`
+			${when.when(shouldShowSortIcons, index.html`
+				<${iconTag} class="header-icon" name="${getSortIcon}"></${iconTag}>
+			`)}
+		`;
+}
+function handleKeyDown(x, e) {
+  if (e.key === keyCodes$1.keyEnter || e.key === keyCodes$1.keySpace) {
+    x._handleInteraction();
+  }
+  return true;
+}
+function DataGridCellTemplate(context) {
+  const focusTemplate = focus.focusTemplateFactory(context);
+  return index.html`
+        <template
+            tabindex="-1"
+            role="${(x) => DataGridCellRole[x.cellType] ?? DataGridCellRole.default}"
+						@click="${(x) => x._handleInteraction()}"
+						@keydown="${(x, c) => handleKeyDown(x, c.event)}"
+        >
+					<div class="base">
+							<slot></slot>
+							${() => focusTemplate}
+							${(_) => renderSortIcons(context)}
+					</div>
+
+        </template>
+    `;
+}
+
+const dataGrid = DataGrid.compose({
+  baseName: "data-grid",
+  template: DataGridTemplate,
+  styles: dataGridStyles
+})();
+const dataGridRow = DataGridRow.compose({
+  baseName: "data-grid-row",
+  template: DataGridRowTemplate,
+  styles: dataGridRowStyles
+})();
+const dataGridCell = DataGridCell.compose({
+  baseName: "data-grid-cell",
+  template: DataGridCellTemplate,
+  styles: dataGridCellStyles
+})();
+const dataGridElements = [dataGridCell, dataGridRow, dataGrid, ...definition.iconRegistries];
+const registerDataGrid = index.registerFactory(dataGridElements);
+
+exports.dataGrid = dataGrid;
+exports.dataGridCell = dataGridCell;
+exports.dataGridElements = dataGridElements;
+exports.dataGridRow = dataGridRow;
+exports.registerDataGrid = registerDataGrid;