@ni/fast-foundation 0.0.2

package/dist/esm/data-grid/data-grid-cell.js

@@ -0,0 +1,229 @@
+import { __decorate } from "tslib";
+import { attr, html, observable } from "@ni/fast-element";
+import { eventFocusIn, eventFocusOut, eventKeyDown, keyEnter, keyEscape, keyFunction2, } from "@ni/fast-web-utilities";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+import { DataGridCellTypes } from "./data-grid.options.js";
+export { DataGridCellTypes };
+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
+ */
+export class DataGridCell 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.prototype, "cellType", void 0);
+__decorate([
+    attr({ attribute: "grid-column" })
+], DataGridCell.prototype, "gridColumn", void 0);
+__decorate([
+    observable
+], DataGridCell.prototype, "rowData", void 0);
+__decorate([
+    observable
+], DataGridCell.prototype, "columnDefinition", void 0);

package/dist/esm/data-grid/data-grid-cell.template.js

@@ -0,0 +1,23 @@
+import { html } from "@ni/fast-element";
+/**
+ * Generates a template for the {@link @ni/fast-foundation#DataGridCell} component using
+ * the provided prefix.
+ * @public
+ */
+export const dataGridCellTemplate = (context, definition) => {
+    return html `
+        <template
+            tabindex="-1"
+            role="${x => !x.cellType || x.cellType === "default" ? "gridcell" : x.cellType}"
+            class="
+            ${x => x.cellType === "columnheader"
+        ? "column-header"
+        : x.cellType === "rowheader"
+            ? "row-header"
+            : ""}
+            "
+        >
+            <slot></slot>
+        </template>
+    `;
+};

package/dist/esm/data-grid/data-grid-row.js

@@ -0,0 +1,203 @@
+import { __decorate } from "tslib";
+import { attr, observable, RepeatDirective, } from "@ni/fast-element";
+import { eventFocusOut, eventKeyDown, keyArrowLeft, keyArrowRight, keyEnd, keyHome, } from "@ni/fast-web-utilities";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+import { DataGridRowTypes } from "./data-grid.options.js";
+/**
+ * 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
+ */
+export class DataGridRow 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.prototype, "gridTemplateColumns", void 0);
+__decorate([
+    attr({ attribute: "row-type" })
+], DataGridRow.prototype, "rowType", void 0);
+__decorate([
+    observable
+], DataGridRow.prototype, "rowData", void 0);
+__decorate([
+    observable
+], DataGridRow.prototype, "columnDefinitions", void 0);
+__decorate([
+    observable
+], DataGridRow.prototype, "cellItemTemplate", void 0);
+__decorate([
+    observable
+], DataGridRow.prototype, "headerCellItemTemplate", void 0);
+__decorate([
+    observable
+], DataGridRow.prototype, "rowIndex", void 0);
+__decorate([
+    observable
+], DataGridRow.prototype, "isActiveRow", void 0);
+__decorate([
+    observable
+], DataGridRow.prototype, "activeCellItemTemplate", void 0);
+__decorate([
+    observable
+], DataGridRow.prototype, "defaultCellItemTemplate", void 0);
+__decorate([
+    observable
+], DataGridRow.prototype, "defaultHeaderCellItemTemplate", void 0);
+__decorate([
+    observable
+], DataGridRow.prototype, "cellElements", void 0);

package/dist/esm/data-grid/data-grid-row.template.js

@@ -0,0 +1,47 @@
+import { children, elements, html, slotted } from "@ni/fast-element";
+import { DataGridCell } from "./data-grid-cell.js";
+function createCellItemTemplate(context) {
+    const cellTag = context.tagFor(DataGridCell);
+    return html `
+    <${cellTag}
+        cell-type="${x => (x.isRowHeader ? "rowheader" : undefined)}"
+        grid-column="${(x, c) => c.index + 1}"
+        :rowData="${(x, c) => c.parent.rowData}"
+        :columnDefinition="${x => x}"
+    ></${cellTag}>
+`;
+}
+function createHeaderCellItemTemplate(context) {
+    const cellTag = context.tagFor(DataGridCell);
+    return html `
+    <${cellTag}
+        cell-type="columnheader"
+        grid-column="${(x, c) => c.index + 1}"
+        :columnDefinition="${x => x}"
+    ></${cellTag}>
+`;
+}
+/**
+ * Generates a template for the {@link @ni/fast-foundation#DataGridRow} component using
+ * the provided prefix.
+ *
+ * @public
+ */
+export const dataGridRowTemplate = (context, definition) => {
+    const cellItemTemplate = createCellItemTemplate(context);
+    const headerCellItemTemplate = createHeaderCellItemTemplate(context);
+    return html `
+        <template
+            role="row"
+            class="${x => (x.rowType !== "default" ? x.rowType : "")}"
+            :defaultCellItemTemplate="${cellItemTemplate}"
+            :defaultHeaderCellItemTemplate="${headerCellItemTemplate}"
+            ${children({
+        property: "cellElements",
+        filter: elements('[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"]'),
+    })}
+        >
+            <slot ${slotted("slottedCellElements")}></slot>
+        </template>
+    `;
+};