@tailng-ui/primitives 0.13.0 → 0.15.0

package/src/lib/layout/grid/tng-grid.js

@@ -1,19 +1,685 @@
-import { Directive, HostBinding } from '@angular/core';
+import { Directive, ElementRef, HostBinding, HostListener, Input, booleanAttribute, inject, input, output, } from '@angular/core';
+import { resolveGridNavigationKeyAction, resolveNavigableGridCell, } from '@tailng-ui/cdk';
 import * as i0 from "@angular/core";
+function coerceFiniteNumber(value) {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+        return value;
+    }
+    if (typeof value === 'string' && value.trim().length > 0) {
+        const parsed = Number(value);
+        if (Number.isFinite(parsed)) {
+            return parsed;
+        }
+    }
+    return null;
+}
+function normalizeIndex(value) {
+    return Math.max(0, Math.trunc(coerceFiniteNumber(value) ?? 0));
+}
+function normalizeOptionalIndex(value) {
+    if (value === undefined) {
+        return undefined;
+    }
+    if (value === null || value === '') {
+        return null;
+    }
+    const numberValue = coerceFiniteNumber(value);
+    if (numberValue === null) {
+        return null;
+    }
+    return Math.max(0, Math.trunc(numberValue));
+}
+function normalizeCount(value) {
+    if (value === undefined || value === null || value === '') {
+        return null;
+    }
+    const numberValue = coerceFiniteNumber(value);
+    if (numberValue === null) {
+        return null;
+    }
+    return Math.max(1, Math.trunc(numberValue));
+}
+function normalizeSpan(value) {
+    return Math.max(1, Math.trunc(coerceFiniteNumber(value) ?? 1));
+}
+function normalizeDirection(value) {
+    return value === 'rtl' ? 'rtl' : 'ltr';
+}
+function normalizeSelectionMode(value) {
+    return value === 'single' ? 'single' : 'none';
+}
+function normalizeCellRole(value) {
+    if (value === 'rowheader' || value === 'columnheader') {
+        return value;
+    }
+    return 'gridcell';
+}
+function normalizeGridValueInput(value) {
+    if (value === undefined) {
+        return undefined;
+    }
+    if (value === null) {
+        return null;
+    }
+    if (typeof value === 'object' && value !== null && 'row' in value && 'col' in value) {
+        const row = normalizeOptionalIndex(value.row);
+        const col = normalizeOptionalIndex(value.col);
+        if (row === undefined || row === null || col === undefined || col === null) {
+            return null;
+        }
+        return Object.freeze({ col, row });
+    }
+    return null;
+}
+function createCellKey(value) {
+    return `${value.row}:${value.col}`;
+}
+function compareCellValues(a, b) {
+    if (a.row !== b.row) {
+        return a.row - b.row;
+    }
+    return a.col - b.col;
+}
+function positionsEqual(a, b) {
+    if (a === null || b === null) {
+        return a === b;
+    }
+    return a.row === b.row && a.col === b.col;
+}
+function focusChangeEvent(current, previous, trigger) {
+    return Object.freeze({
+        col: current.col,
+        previousCol: previous?.col ?? null,
+        previousRow: previous?.row ?? null,
+        row: current.row,
+        trigger,
+    });
+}
 export class TngGrid {
+    hostRef = inject(ElementRef);
+    cells = new Set();
+    cellByKey = new Map();
+    uncontrolledFocus = null;
+    uncontrolledSelection = null;
+    selectionInitialized = false;
+    ariaLabelValue = null;
+    ariaColcountValue = null;
+    ariaRowcountValue = null;
+    domFocusedKey = null;
+    focusVisibleKey = null;
+    lastActivatedKey = null;
+    pendingFocusTrigger = null;
+    dir = input('ltr', { ...(ngDevMode ? { debugName: "dir" } : {}), transform: normalizeDirection });
+    focusCol = input(undefined, { ...(ngDevMode ? { debugName: "focusCol" } : {}), transform: normalizeOptionalIndex });
+    focusRow = input(undefined, { ...(ngDevMode ? { debugName: "focusRow" } : {}), transform: normalizeOptionalIndex });
+    selectionMode = input('none', { ...(ngDevMode ? { debugName: "selectionMode" } : {}), transform: normalizeSelectionMode });
+    value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : {}), transform: normalizeGridValueInput });
+    defaultValue = input(undefined, { ...(ngDevMode ? { debugName: "defaultValue" } : {}), transform: normalizeGridValueInput });
+    wrap = input(false, { ...(ngDevMode ? { debugName: "wrap" } : {}), transform: booleanAttribute });
+    focusRowChange = output();
+    focusColChange = output();
+    focusChange = output();
+    valueChange = output();
+    cellActivate = output();
+    set ariaLabel(value) {
+        this.ariaLabelValue = value;
+    }
+    set ariaColcount(value) {
+        this.ariaColcountValue = normalizeCount(value);
+    }
+    set ariaRowcount(value) {
+        this.ariaRowcountValue = normalizeCount(value);
+    }
     dataSlot = 'grid';
+    role = 'grid';
+    get ariaLabelAttr() {
+        return this.ariaLabelValue;
+    }
+    get ariaColcountAttr() {
+        const explicitCount = this.ariaColcountValue;
+        if (explicitCount !== null) {
+            return String(explicitCount);
+        }
+        const computedCount = this.getComputedBounds().colCount;
+        return this.cells.size > 0 ? String(computedCount) : null;
+    }
+    get ariaRowcountAttr() {
+        const explicitCount = this.ariaRowcountValue;
+        if (explicitCount !== null) {
+            return String(explicitCount);
+        }
+        const computedCount = this.getComputedBounds().rowCount;
+        return this.cells.size > 0 ? String(computedCount) : null;
+    }
+    ngOnDestroy() {
+        this.cells.clear();
+        this.cellByKey.clear();
+    }
+    registerCell(cell) {
+        this.cells.add(cell);
+        this.cellByKey.set(cell.cellKey(), cell);
+        this.ensureUncontrolledSelectionInitialized();
+        this.ensureFallbackFocus();
+    }
+    unregisterCell(cell) {
+        this.cells.delete(cell);
+        this.cellByKey.delete(cell.cellKey());
+        if (this.lastActivatedKey === cell.cellKey()) {
+            this.lastActivatedKey = null;
+        }
+        if (this.focusVisibleKey === cell.cellKey()) {
+            this.focusVisibleKey = null;
+        }
+        if (this.domFocusedKey === cell.cellKey()) {
+            this.domFocusedKey = null;
+        }
+        if (!this.isFocusControlled()
+            && this.uncontrolledFocus !== null
+            && createCellKey(this.uncontrolledFocus) === cell.cellKey()) {
+            this.uncontrolledFocus = null;
+        }
+        if (!this.isSelectionControlled()
+            && this.uncontrolledSelection !== null
+            && createCellKey(this.uncontrolledSelection) === cell.cellKey()) {
+            this.uncontrolledSelection = null;
+        }
+        this.ensureFallbackFocus();
+    }
+    isCellActivated(cell) {
+        return this.lastActivatedKey === cell.cellKey();
+    }
+    isCellDisabled(cell) {
+        return cell.disabled();
+    }
+    isCellFocusVisible(cell) {
+        return this.focusVisibleKey === cell.cellKey();
+    }
+    isCellFocused(cell) {
+        return this.domFocusedKey === cell.cellKey();
+    }
+    isCellTabStop(cell) {
+        const active = this.getActiveCell();
+        return active !== null && active.cellKey() === cell.cellKey();
+    }
+    isCellSelected(cell) {
+        const explicitSelected = cell.selected();
+        if (explicitSelected !== null) {
+            return explicitSelected;
+        }
+        const selectedValue = this.getSelectedValue();
+        return selectedValue !== null && cell.matchesValue(selectedValue);
+    }
+    getCellTabIndex(cell) {
+        if (this.isCellDisabled(cell)) {
+            return '-1';
+        }
+        return this.isCellTabStop(cell) ? '0' : '-1';
+    }
+    onCellClicked(cell) {
+        if (this.isCellDisabled(cell)) {
+            return;
+        }
+        if (this.selectionMode() === 'single') {
+            this.requestSelection(cell.getValue());
+        }
+    }
+    onCellFocused(cell) {
+        if (this.isCellDisabled(cell)) {
+            return;
+        }
+        const trigger = this.pendingFocusTrigger ?? 'programmatic';
+        this.pendingFocusTrigger = null;
+        this.domFocusedKey = cell.cellKey();
+        this.requestFocus(cell.getValue(), trigger);
+        this.focusVisibleKey = trigger === 'keyboard' || cell.isFocusVisible()
+            ? cell.cellKey()
+            : null;
+    }
+    onCellPointerDown(cell) {
+        if (this.isCellDisabled(cell)) {
+            return;
+        }
+        this.pendingFocusTrigger = 'pointer';
+        this.focusVisibleKey = null;
+    }
+    onCellSelectionRequest(cell, trigger) {
+        if (this.isCellDisabled(cell)) {
+            return;
+        }
+        this.lastActivatedKey = cell.cellKey();
+        if (this.selectionMode() === 'single') {
+            this.requestSelection(cell.getValue());
+        }
+        this.cellActivate.emit(Object.freeze({
+            col: cell.colIndex(),
+            row: cell.rowIndex(),
+            trigger,
+        }));
+    }
+    onFocusOut(event) {
+        const nextTarget = event.relatedTarget;
+        if (nextTarget instanceof Node && this.hostRef.nativeElement.contains(nextTarget)) {
+            return;
+        }
+        this.domFocusedKey = null;
+        this.focusVisibleKey = null;
+        this.pendingFocusTrigger = null;
+    }
+    onKeyDown(event) {
+        const activeCell = this.getActiveCell();
+        if (activeCell === null || this.isCellDisabled(activeCell)) {
+            return;
+        }
+        const action = resolveGridNavigationKeyAction(event, {
+            direction: this.dir(),
+        });
+        if (action === null) {
+            return;
+        }
+        if (action.preventDefault) {
+            event.preventDefault();
+        }
+        if (action.type === 'exit') {
+            return;
+        }
+        if (action.type === 'activate') {
+            this.onCellSelectionRequest(activeCell, 'keyboard');
+            return;
+        }
+        this.moveFocus(activeCell, action.type);
+    }
+    ensureFallbackFocus() {
+        if (this.isFocusControlled()) {
+            return;
+        }
+        const currentFocus = this.uncontrolledFocus;
+        if (currentFocus !== null) {
+            const currentCell = this.cellByKey.get(createCellKey(currentFocus));
+            if (currentCell !== undefined && !this.isCellDisabled(currentCell)) {
+                return;
+            }
+        }
+        const fallback = this.getFirstEnabledCell();
+        this.uncontrolledFocus = fallback?.getValue() ?? null;
+    }
+    ensureUncontrolledSelectionInitialized() {
+        if (this.selectionInitialized || this.isSelectionControlled()) {
+            return;
+        }
+        this.selectionInitialized = true;
+        this.uncontrolledSelection = this.defaultValue() ?? null;
+    }
+    getActiveCell() {
+        const focusValue = this.getFocusValue();
+        if (focusValue === null) {
+            return this.getFirstEnabledCell();
+        }
+        return this.cellByKey.get(createCellKey(focusValue)) ?? this.getFirstEnabledCell();
+    }
+    getComputedBounds() {
+        const explicitColcount = this.ariaColcountValue;
+        const explicitRowcount = this.ariaRowcountValue;
+        if (explicitColcount !== null && explicitRowcount !== null) {
+            return Object.freeze({
+                colCount: explicitColcount,
+                rowCount: explicitRowcount,
+            });
+        }
+        let maxCol = 0;
+        let maxRow = 0;
+        for (const cell of this.cells) {
+            maxCol = Math.max(maxCol, cell.colIndex());
+            maxRow = Math.max(maxRow, cell.rowIndex());
+        }
+        return Object.freeze({
+            colCount: explicitColcount ?? maxCol + 1,
+            rowCount: explicitRowcount ?? maxRow + 1,
+        });
+    }
+    getFirstEnabledCell() {
+        const enabledCells = this.getEnabledCells();
+        return enabledCells[0] ?? null;
+    }
+    getEnabledCells() {
+        return [...this.cells]
+            .filter((cell) => !this.isCellDisabled(cell))
+            .sort((a, b) => compareCellValues(a.getValue(), b.getValue()));
+    }
+    getFocusValue() {
+        if (this.isFocusControlled()) {
+            const row = this.focusRow();
+            const col = this.focusCol();
+            if (row === null || col === null || row === undefined || col === undefined) {
+                return this.getFirstEnabledCell()?.getValue() ?? null;
+            }
+            const controlled = Object.freeze({ col, row });
+            const controlledCell = this.cellByKey.get(createCellKey(controlled));
+            if (controlledCell !== undefined && !this.isCellDisabled(controlledCell)) {
+                return controlled;
+            }
+            return this.getFirstEnabledCell()?.getValue() ?? null;
+        }
+        if (this.uncontrolledFocus !== null) {
+            const activeCell = this.cellByKey.get(createCellKey(this.uncontrolledFocus));
+            if (activeCell !== undefined && !this.isCellDisabled(activeCell)) {
+                return this.uncontrolledFocus;
+            }
+        }
+        return this.getFirstEnabledCell()?.getValue() ?? null;
+    }
+    getNavigableCells() {
+        return [...this.cells].map((cell) => ({
+            col: cell.colIndex(),
+            disabled: this.isCellDisabled(cell),
+            row: cell.rowIndex(),
+        }));
+    }
+    getSelectedValue() {
+        if (this.selectionMode() === 'none') {
+            return null;
+        }
+        if (this.isSelectionControlled()) {
+            return this.value() ?? null;
+        }
+        return this.uncontrolledSelection;
+    }
+    isFocusControlled() {
+        return this.focusRow() !== undefined && this.focusCol() !== undefined;
+    }
+    isSelectionControlled() {
+        return this.value() !== undefined;
+    }
+    moveFocus(activeCell, actionType) {
+        const nextValue = resolveNavigableGridCell(activeCell.getValue(), actionType, {
+            bounds: this.getComputedBounds(),
+            cells: this.getNavigableCells(),
+            wrap: this.wrap(),
+        });
+        if (nextValue === null) {
+            return;
+        }
+        const nextCell = this.cellByKey.get(createCellKey(nextValue));
+        if (nextCell === undefined || this.isCellDisabled(nextCell)) {
+            return;
+        }
+        this.pendingFocusTrigger = 'keyboard';
+        this.requestFocus(nextValue, 'keyboard');
+        this.focusVisibleKey = nextCell.cellKey();
+        nextCell.focusHost();
+    }
+    requestFocus(value, trigger) {
+        const previous = this.getFocusValue();
+        if (positionsEqual(previous, value)) {
+            return;
+        }
+        if (!this.isFocusControlled()) {
+            this.uncontrolledFocus = value;
+        }
+        this.focusRowChange.emit(value.row);
+        this.focusColChange.emit(value.col);
+        this.focusChange.emit(focusChangeEvent(value, previous, trigger));
+    }
+    requestSelection(value) {
+        const previous = this.getSelectedValue();
+        if (positionsEqual(previous, value)) {
+            return;
+        }
+        if (!this.isSelectionControlled()) {
+            this.uncontrolledSelection = value;
+        }
+        this.valueChange.emit(value);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngGrid, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: TngGrid, isStandalone: true, selector: "[tngGrid]", host: { properties: { "attr.data-slot": "this.dataSlot" } }, exportAs: ["tngGrid"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngGrid, isStandalone: true, selector: "[tngGrid]", inputs: { dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, focusCol: { classPropertyName: "focusCol", publicName: "focusCol", isSignal: true, isRequired: false, transformFunction: null }, focusRow: { classPropertyName: "focusRow", publicName: "focusRow", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, ariaColcount: { classPropertyName: "ariaColcount", publicName: "ariaColcount", isSignal: false, isRequired: false, transformFunction: null }, ariaRowcount: { classPropertyName: "ariaRowcount", publicName: "ariaRowcount", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { focusRowChange: "focusRowChange", focusColChange: "focusColChange", focusChange: "focusChange", valueChange: "valueChange", cellActivate: "cellActivate" }, host: { listeners: { "focusout": "onFocusOut($event)", "keydown": "onKeyDown($event)" }, properties: { "attr.data-slot": "this.dataSlot", "attr.role": "this.role", "attr.aria-label": "this.ariaLabelAttr", "attr.aria-colcount": "this.ariaColcountAttr", "attr.aria-rowcount": "this.ariaRowcountAttr" } }, exportAs: ["tngGrid"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngGrid, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tngGrid]',
                     exportAs: 'tngGrid',
-                    standalone: true,
+                }]
+        }], propDecorators: { dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], focusCol: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusCol", required: false }] }], focusRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusRow", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], focusRowChange: [{ type: i0.Output, args: ["focusRowChange"] }], focusColChange: [{ type: i0.Output, args: ["focusColChange"] }], focusChange: [{ type: i0.Output, args: ["focusChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], cellActivate: [{ type: i0.Output, args: ["cellActivate"] }], ariaLabel: [{
+                type: Input
+            }], ariaColcount: [{
+                type: Input
+            }], ariaRowcount: [{
+                type: Input
+            }], dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], ariaLabelAttr: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }], ariaColcountAttr: [{
+                type: HostBinding,
+                args: ['attr.aria-colcount']
+            }], ariaRowcountAttr: [{
+                type: HostBinding,
+                args: ['attr.aria-rowcount']
+            }], onFocusOut: [{
+                type: HostListener,
+                args: ['focusout', ['$event']]
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+export class TngGridRow {
+    dataSlot = 'grid-row';
+    role = 'row';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngGridRow, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: TngGridRow, isStandalone: true, selector: "[tngGridRow]", host: { properties: { "attr.data-slot": "this.dataSlot", "attr.role": "this.role" } }, exportAs: ["tngGridRow"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngGridRow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tngGridRow]',
+                    exportAs: 'tngGridRow',
                 }]
         }], propDecorators: { dataSlot: [{
                 type: HostBinding,
                 args: ['attr.data-slot']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }] } });
+export class TngGridCell {
+    hostRef = inject(ElementRef);
+    grid = inject(TngGrid);
+    rowIndex = input.required({ ...(ngDevMode ? { debugName: "rowIndex" } : {}), transform: normalizeIndex });
+    colIndex = input.required({ ...(ngDevMode ? { debugName: "colIndex" } : {}), transform: normalizeIndex });
+    rowSpan = input(1, { ...(ngDevMode ? { debugName: "rowSpan" } : {}), transform: normalizeSpan });
+    colSpan = input(1, { ...(ngDevMode ? { debugName: "colSpan" } : {}), transform: normalizeSpan });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    selected = input(null, { ...(ngDevMode ? { debugName: "selected" } : {}), transform: (value) => {
+            if (value === undefined || value === null) {
+                return null;
+            }
+            return booleanAttribute(value);
+        } });
+    cellRole = input('gridcell', { ...(ngDevMode ? { debugName: "cellRole" } : {}), transform: normalizeCellRole });
+    dataSlot = 'gridcell';
+    get roleAttr() {
+        return this.cellRole();
+    }
+    get tabIndexAttr() {
+        return this.grid.getCellTabIndex(this);
+    }
+    get ariaRowIndexAttr() {
+        return String(this.rowIndex() + 1);
+    }
+    get ariaColIndexAttr() {
+        return String(this.colIndex() + 1);
+    }
+    get ariaRowSpanAttr() {
+        return this.rowSpan() > 1 ? String(this.rowSpan()) : null;
+    }
+    get ariaColSpanAttr() {
+        return this.colSpan() > 1 ? String(this.colSpan()) : null;
+    }
+    get ariaDisabledAttr() {
+        return this.grid.isCellDisabled(this) ? 'true' : null;
+    }
+    get ariaSelectedAttr() {
+        if (this.cellRole() !== 'gridcell' && this.selected() === null) {
+            return null;
+        }
+        if (this.cellRole() !== 'gridcell' && this.selected() !== null) {
+            return this.selected() ? 'true' : 'false';
+        }
+        if (this.grid.selectionMode() === 'none' && this.selected() === null) {
+            return null;
+        }
+        return this.grid.isCellSelected(this) ? 'true' : 'false';
+    }
+    get dataRowIndexAttr() {
+        return String(this.rowIndex());
+    }
+    get dataColIndexAttr() {
+        return String(this.colIndex());
+    }
+    get dataRowSpanAttr() {
+        return this.rowSpan() > 1 ? String(this.rowSpan()) : null;
+    }
+    get dataColSpanAttr() {
+        return this.colSpan() > 1 ? String(this.colSpan()) : null;
+    }
+    get dataDisabledAttr() {
+        return this.grid.isCellDisabled(this) ? '' : null;
+    }
+    get dataSelectedAttr() {
+        return this.grid.isCellSelected(this) ? '' : null;
+    }
+    get dataFocusedAttr() {
+        return this.grid.isCellFocused(this) ? '' : null;
+    }
+    get dataFocusVisibleAttr() {
+        return this.grid.isCellFocusVisible(this) ? '' : null;
+    }
+    get dataActivatedAttr() {
+        return this.grid.isCellActivated(this) ? '' : null;
+    }
+    ngOnInit() {
+        this.grid.registerCell(this);
+    }
+    ngOnDestroy() {
+        this.grid.unregisterCell(this);
+    }
+    cellKey() {
+        return createCellKey(this.getValue());
+    }
+    focusHost() {
+        this.hostRef.nativeElement.focus();
+    }
+    getHostElement() {
+        return this.hostRef.nativeElement;
+    }
+    getValue() {
+        return Object.freeze({
+            col: this.colIndex(),
+            row: this.rowIndex(),
+        });
+    }
+    isFocusVisible() {
+        return this.hostRef.nativeElement.matches(':focus-visible');
+    }
+    matchesValue(value) {
+        return this.rowIndex() === value.row && this.colIndex() === value.col;
+    }
+    onClick() {
+        if (this.grid.isCellDisabled(this)) {
+            return;
+        }
+        this.grid.onCellClicked(this);
+    }
+    onDoubleClick() {
+        if (this.grid.isCellDisabled(this)) {
+            return;
+        }
+        this.grid.onCellSelectionRequest(this, 'pointer');
+    }
+    onFocus() {
+        this.grid.onCellFocused(this);
+    }
+    onPointerDown() {
+        this.grid.onCellPointerDown(this);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngGridCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngGridCell, isStandalone: true, selector: "[tngGridCell]", inputs: { rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, colIndex: { classPropertyName: "colIndex", publicName: "colIndex", isSignal: true, isRequired: true, transformFunction: null }, rowSpan: { classPropertyName: "rowSpan", publicName: "rowSpan", isSignal: true, isRequired: false, transformFunction: null }, colSpan: { classPropertyName: "colSpan", publicName: "colSpan", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, cellRole: { classPropertyName: "cellRole", publicName: "cellRole", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()", "dblclick": "onDoubleClick()", "focus": "onFocus()", "pointerdown": "onPointerDown()" }, properties: { "attr.data-slot": "this.dataSlot", "attr.role": "this.roleAttr", "attr.tabindex": "this.tabIndexAttr", "attr.aria-rowindex": "this.ariaRowIndexAttr", "attr.aria-colindex": "this.ariaColIndexAttr", "attr.aria-rowspan": "this.ariaRowSpanAttr", "attr.aria-colspan": "this.ariaColSpanAttr", "attr.aria-disabled": "this.ariaDisabledAttr", "attr.aria-selected": "this.ariaSelectedAttr", "attr.data-row-index": "this.dataRowIndexAttr", "attr.data-col-index": "this.dataColIndexAttr", "attr.data-row-span": "this.dataRowSpanAttr", "attr.data-col-span": "this.dataColSpanAttr", "attr.data-disabled": "this.dataDisabledAttr", "attr.data-selected": "this.dataSelectedAttr", "attr.data-focused": "this.dataFocusedAttr", "attr.data-focus-visible": "this.dataFocusVisibleAttr", "attr.data-activated": "this.dataActivatedAttr" } }, exportAs: ["tngGridCell"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngGridCell, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tngGridCell]',
+                    exportAs: 'tngGridCell',
+                }]
+        }], propDecorators: { rowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIndex", required: true }] }], colIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "colIndex", required: true }] }], rowSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSpan", required: false }] }], colSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "colSpan", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], cellRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellRole", required: false }] }], dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }], roleAttr: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], tabIndexAttr: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], ariaRowIndexAttr: [{
+                type: HostBinding,
+                args: ['attr.aria-rowindex']
+            }], ariaColIndexAttr: [{
+                type: HostBinding,
+                args: ['attr.aria-colindex']
+            }], ariaRowSpanAttr: [{
+                type: HostBinding,
+                args: ['attr.aria-rowspan']
+            }], ariaColSpanAttr: [{
+                type: HostBinding,
+                args: ['attr.aria-colspan']
+            }], ariaDisabledAttr: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }], ariaSelectedAttr: [{
+                type: HostBinding,
+                args: ['attr.aria-selected']
+            }], dataRowIndexAttr: [{
+                type: HostBinding,
+                args: ['attr.data-row-index']
+            }], dataColIndexAttr: [{
+                type: HostBinding,
+                args: ['attr.data-col-index']
+            }], dataRowSpanAttr: [{
+                type: HostBinding,
+                args: ['attr.data-row-span']
+            }], dataColSpanAttr: [{
+                type: HostBinding,
+                args: ['attr.data-col-span']
+            }], dataDisabledAttr: [{
+                type: HostBinding,
+                args: ['attr.data-disabled']
+            }], dataSelectedAttr: [{
+                type: HostBinding,
+                args: ['attr.data-selected']
+            }], dataFocusedAttr: [{
+                type: HostBinding,
+                args: ['attr.data-focused']
+            }], dataFocusVisibleAttr: [{
+                type: HostBinding,
+                args: ['attr.data-focus-visible']
+            }], dataActivatedAttr: [{
+                type: HostBinding,
+                args: ['attr.data-activated']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onDoubleClick: [{
+                type: HostListener,
+                args: ['dblclick']
+            }], onFocus: [{
+                type: HostListener,
+                args: ['focus']
+            }], onPointerDown: [{
+                type: HostListener,
+                args: ['pointerdown']
             }] } });
 //# sourceMappingURL=tng-grid.js.map