@vonage/vivid 3.0.1 → 3.1.1

package/data-grid/index.js

@@ -0,0 +1,1104 @@
+import { A as AttachedBehaviorHTMLDirective, F as FoundationElement, _ as __decorate, a as attr, o as observable, W as DOM, h as html, r as registerFactory } from '../shared/index.js';
+import { k as keyEnd, a as keyHome, h as keyArrowRight, i as keyArrowLeft, j as keyPageDown, l as keyPageUp, b as keyArrowDown, c as keyArrowUp, f as keyEscape, m as keyFunction2, d as keyEnter } from '../shared/key-codes.js';
+import { R as RepeatDirective } from '../shared/repeat.js';
+import { N as NodeObservationBehavior, e as elements, s as slotted } from '../shared/slotted.js';
+import { f as focusTemplateFactory } from '../shared/focus2.js';
+import '../shared/focus.js';
+
+/**
+ * The runtime behavior for child node observation.
+ * @public
+ */
+class ChildrenBehavior extends NodeObservationBehavior {
+    /**
+     * Creates an instance of ChildrenBehavior.
+     * @param target - The element target to observe children on.
+     * @param options - The options to use when observing the element children.
+     */
+    constructor(target, options) {
+        super(target, options);
+        this.observer = null;
+        options.childList = true;
+    }
+    /**
+     * Begins observation of the nodes.
+     */
+    observe() {
+        if (this.observer === null) {
+            this.observer = new MutationObserver(this.handleEvent.bind(this));
+        }
+        this.observer.observe(this.target, this.options);
+    }
+    /**
+     * Disconnects observation of the nodes.
+     */
+    disconnect() {
+        this.observer.disconnect();
+    }
+    /**
+     * Retrieves the nodes that should be assigned to the target.
+     */
+    getNodes() {
+        if ("subtree" in this.options) {
+            return Array.from(this.target.querySelectorAll(this.options.selector));
+        }
+        return Array.from(this.target.childNodes);
+    }
+}
+/**
+ * A directive that observes the `childNodes` of an element and updates a property
+ * whenever they change.
+ * @param propertyOrOptions - The options used to configure child node observation.
+ * @public
+ */
+function children(propertyOrOptions) {
+    if (typeof propertyOrOptions === "string") {
+        propertyOrOptions = {
+            property: propertyOrOptions,
+        };
+    }
+    return new AttachedBehaviorHTMLDirective("fast-children", ChildrenBehavior, propertyOrOptions);
+}
+
+/**
+ * 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 = {
+    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 = {
+    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
+ */
+class DataGridRow$1 extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The type of row
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: row-type
+         */
+        this.rowType = DataGridRowTypes.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 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 keyArrowLeft:
+                // focus left one cell
+                newFocusColumnIndex = Math.max(0, this.focusColumnIndex - 1);
+                this.cellElements[newFocusColumnIndex].focus();
+                e.preventDefault();
+                break;
+            case keyArrowRight:
+                // focus right one cell
+                newFocusColumnIndex = Math.min(this.cellElements.length - 1, this.focusColumnIndex + 1);
+                this.cellElements[newFocusColumnIndex].focus();
+                e.preventDefault();
+                break;
+            case keyHome:
+                if (!e.ctrlKey) {
+                    this.cellElements[0].focus();
+                    e.preventDefault();
+                }
+                break;
+            case 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.default &&
+                this.cellItemTemplate !== undefined
+                ? this.cellItemTemplate
+                : this.rowType === DataGridRowTypes.default &&
+                    this.cellItemTemplate === undefined
+                    ? this.defaultCellItemTemplate
+                    : this.headerCellItemTemplate !== undefined
+                        ? this.headerCellItemTemplate
+                        : this.defaultHeaderCellItemTemplate;
+    }
+}
+__decorate([
+    attr({ attribute: "grid-template-columns" })
+], DataGridRow$1.prototype, "gridTemplateColumns", void 0);
+__decorate([
+    attr({ attribute: "row-type" })
+], DataGridRow$1.prototype, "rowType", void 0);
+__decorate([
+    observable
+], DataGridRow$1.prototype, "rowData", void 0);
+__decorate([
+    observable
+], DataGridRow$1.prototype, "columnDefinitions", void 0);
+__decorate([
+    observable
+], DataGridRow$1.prototype, "cellItemTemplate", void 0);
+__decorate([
+    observable
+], DataGridRow$1.prototype, "headerCellItemTemplate", void 0);
+__decorate([
+    observable
+], DataGridRow$1.prototype, "rowIndex", void 0);
+__decorate([
+    observable
+], DataGridRow$1.prototype, "isActiveRow", void 0);
+__decorate([
+    observable
+], DataGridRow$1.prototype, "activeCellItemTemplate", void 0);
+__decorate([
+    observable
+], DataGridRow$1.prototype, "defaultCellItemTemplate", void 0);
+__decorate([
+    observable
+], DataGridRow$1.prototype, "defaultHeaderCellItemTemplate", void 0);
+__decorate([
+    observable
+], DataGridRow$1.prototype, "cellElements", void 0);
+
+/**
+ * A Data Grid Custom HTML Element.
+ *
+ * @slot - The default slot for custom row elements
+ * @public
+ */
+class DataGrid$1 extends 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.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;
+                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$1.generateColumns(this.rowsData[0]);
+        }
+        if (this.$fastController.isConnected) {
+            this.toggleGeneratedHeader();
+        }
+    }
+    columnDefinitionsChanged() {
+        if (this.columnDefinitions === null) {
+            this.generatedGridTemplateColumns = "";
+            return;
+        }
+        this.generatedGridTemplateColumns = DataGrid$1.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 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");
+        }
+        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 keyArrowUp:
+                e.preventDefault();
+                // focus up one row
+                this.focusOnCell(this.focusRowIndex - 1, this.focusColumnIndex, true);
+                break;
+            case keyArrowDown:
+                e.preventDefault();
+                // focus down one row
+                this.focusOnCell(this.focusRowIndex + 1, this.focusColumnIndex, true);
+                break;
+            case 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 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.sticky &&
+                            this.generatedHeader !== null) {
+                            stickyHeaderOffset = this.generatedHeader.clientHeight;
+                        }
+                        this.scrollTop = thisRow.offsetTop - stickyHeaderOffset;
+                        break;
+                    }
+                }
+                this.focusOnCell(newFocusRowIndex, this.focusColumnIndex, false);
+                break;
+            case keyHome:
+                if (e.ctrlKey) {
+                    e.preventDefault();
+                    // focus first cell of first row
+                    this.focusOnCell(0, 0, true);
+                }
+                break;
+            case 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;
+            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.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.sticky
+                    ? DataGridRowTypes.stickyHeader
+                    : DataGridRowTypes.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}`,
+        };
+    });
+};
+__decorate([
+    attr({ attribute: "no-tabbing", mode: "boolean" })
+], DataGrid$1.prototype, "noTabbing", void 0);
+__decorate([
+    attr({ attribute: "generate-header" })
+], DataGrid$1.prototype, "generateHeader", void 0);
+__decorate([
+    attr({ attribute: "grid-template-columns" })
+], DataGrid$1.prototype, "gridTemplateColumns", void 0);
+__decorate([
+    observable
+], DataGrid$1.prototype, "rowsData", void 0);
+__decorate([
+    observable
+], DataGrid$1.prototype, "columnDefinitions", void 0);
+__decorate([
+    observable
+], DataGrid$1.prototype, "rowItemTemplate", void 0);
+__decorate([
+    observable
+], DataGrid$1.prototype, "cellItemTemplate", void 0);
+__decorate([
+    observable
+], DataGrid$1.prototype, "headerCellItemTemplate", void 0);
+__decorate([
+    observable
+], DataGrid$1.prototype, "focusRowIndex", void 0);
+__decorate([
+    observable
+], DataGrid$1.prototype, "focusColumnIndex", void 0);
+__decorate([
+    observable
+], DataGrid$1.prototype, "defaultRowItemTemplate", void 0);
+__decorate([
+    observable
+], DataGrid$1.prototype, "rowElementTag", void 0);
+__decorate([
+    observable
+], DataGrid$1.prototype, "rowElements", void 0);
+
+const defaultCellContentsTemplate = html `
+    <template>
+        ${x => x.rowData === null ||
+    x.columnDefinition === null ||
+    x.columnDefinition.columnDataKey === null
+    ? null
+    : x.rowData[x.columnDefinition.columnDataKey]}
+    </template>
+`;
+const defaultHeaderCellContentsTemplate = 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
+ */
+class DataGridCell$1 extends 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 keyEnter:
+            case 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 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;
+        }
+    }
+}
+__decorate([
+    attr({ attribute: "cell-type" })
+], DataGridCell$1.prototype, "cellType", void 0);
+__decorate([
+    attr({ attribute: "grid-column" })
+], DataGridCell$1.prototype, "gridColumn", void 0);
+__decorate([
+    observable
+], DataGridCell$1.prototype, "rowData", void 0);
+__decorate([
+    observable
+], DataGridCell$1.prototype, "columnDefinition", void 0);
+
+var css_248z$2 = ":host {\n  position: relative;\n  display: block;\n}\n\n:host([generate-header=sticky]) {\n  max-height: var(--data-grid-max-height, 200px);\n  overflow-y: auto;\n}";
+
+var css_248z$1 = "/**\n * Do not edit directly\n * Generated on Sun, 12 Feb 2023 10:53:43 GMT\n */\n:host {\n  display: grid;\n  width: 100%;\n  box-sizing: border-box;\n  color: var(--vvd-color-canvas-text);\n}\n\n:host([row-type=sticky-header]) {\n  position: sticky;\n  z-index: 999;\n  top: 0;\n  background: var(--vvd-color-canvas);\n}";
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 12 Feb 2023 10:53:43 GMT\n */\n:host {\n  position: relative;\n  display: flex;\n  overflow: hidden;\n  box-sizing: border-box;\n  align-items: center;\n  padding: 8px 12px;\n  border-bottom: 1px solid var(--vvd-color-neutral-100);\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n  color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base);\n  outline: none;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n:host([cell-type=columnheader]) {\n  border-color: currentColor;\n  font: var(--vvd-typography-base-bold);\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n  pointer-events: none;\n}\n#focus-wrapper:not(.active) > .focus-indicator {\n  display: none;\n}";
+
+class DataGrid extends DataGrid$1 {}
+
+class DataGridRow extends DataGridRow$1 {}
+
+let _2$1 = t => t,
+  _t$2,
+  _t2$1;
+function createRowItemTemplate(context) {
+  const rowTag = context.tagFor(DataGridRow);
+  return html(_t$2 || (_t$2 = _2$1`
+    <${0}
+        :rowData="${0}"
+        :cellItemTemplate="${0}"
+        :headerCellItemTemplate="${0}"
+    ></${0}>
+`), rowTag, x => x, (_, c) => c.parent.cellItemTemplate, (_, c) => c.parent.headerCellItemTemplate, rowTag);
+}
+const DataGridTemplate = context => {
+  const rowItemTemplate = createRowItemTemplate(context);
+  const rowTag = context.tagFor(DataGridRow);
+  return html(_t2$1 || (_t2$1 = _2$1`
+        <template
+            role="grid"
+            tabindex="0"
+            :rowElementTag="${0}"
+            :defaultRowItemTemplate="${0}"
+            ${0}
+        >
+            <slot></slot>
+        </template>
+    `), () => rowTag, rowItemTemplate, children({
+    property: 'rowElements',
+    filter: elements('[role=row]')
+  }));
+};
+
+class DataGridCell extends DataGridCell$1 {
+  handleFocusin(e) {
+    super.handleFocusin(e);
+    this.shadowRoot.getElementById('focus-wrapper').classList.add('active');
+  }
+  handleFocusout(e) {
+    super.handleFocusout(e);
+    this.shadowRoot.getElementById('focus-wrapper').classList.remove('active');
+  }
+}
+
+let _2 = t => t,
+  _t$1,
+  _t2,
+  _t3;
+function createCellItemTemplate(context) {
+  const cellTag = context.tagFor(DataGridCell);
+  return html(_t$1 || (_t$1 = _2`
+    <${0}
+        cell-type="${0}"
+        grid-column="${0}"
+        :rowData="${0}"
+        :columnDefinition="${0}"
+    ></${0}>
+`), cellTag, x => x.isRowHeader ? 'rowheader' : undefined, (_, c) => c.index + 1, (_, c) => c.parent.rowData, x => x, cellTag);
+}
+function createHeaderCellItemTemplate(context) {
+  const cellTag = context.tagFor(DataGridCell);
+  return html(_t2 || (_t2 = _2`
+    <${0}
+        cell-type="columnheader"
+        grid-column="${0}"
+        :columnDefinition="${0}"
+    ></${0}>
+`), cellTag, (_, c) => c.index + 1, x => x, cellTag);
+}
+const DataGridRowTemplate = context => {
+  const cellItemTemplate = createCellItemTemplate(context);
+  const headerCellItemTemplate = createHeaderCellItemTemplate(context);
+  return html(_t3 || (_t3 = _2`
+        <template
+            role="row"
+            class="${0}"
+            :defaultCellItemTemplate="${0}"
+            :defaultHeaderCellItemTemplate="${0}"
+            ${0}
+        >
+            <slot ${0}></slot>
+        </template>
+    `), x => x.rowType !== 'default' ? x.rowType : '', cellItemTemplate, headerCellItemTemplate, children({
+    property: 'cellElements',
+    filter: elements('[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"]')
+  }), slotted('slottedCellElements'));
+};
+
+const DataGridCellRole = {
+  columnheader: 'columnheader',
+  rowheader: 'rowheader',
+  default: 'gridcell'
+};
+
+let _ = t => t,
+  _t;
+function DataGridCellTemplate(context) {
+  const focusTemplate = focusTemplateFactory(context);
+  return html(_t || (_t = _`
+        <template
+            tabindex="-1"
+            role="${0}"
+        >
+					<div id="focus-wrapper">
+							<slot></slot>
+					${0}
+					</div>
+
+        </template>
+    `), x => {
+    var _a;
+    return (_a = DataGridCellRole[x.cellType]) !== null && _a !== void 0 ? _a : DataGridCellRole.default;
+  }, () => focusTemplate);
+}
+
+const dataGrid = DataGrid.compose({
+  baseName: 'data-grid',
+  template: DataGridTemplate,
+  styles: css_248z$2
+})();
+const dataGridRow = DataGridRow.compose({
+  baseName: 'data-grid-row',
+  template: DataGridRowTemplate,
+  styles: css_248z$1
+})();
+const dataGridCell = DataGridCell.compose({
+  baseName: 'data-grid-cell',
+  template: DataGridCellTemplate,
+  styles: css_248z
+})();
+const dataGridElements = [dataGridCell, dataGridRow, dataGrid];
+const registerDataGrid = registerFactory(dataGridElements);
+
+registerDataGrid();