@tailng-ui/primitives 0.13.0 → 0.15.0

package/src/lib/layout/grid/__tests__/tng-grid.test-harness.js

@@ -0,0 +1,312 @@
+import { Component } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { TngGrid, TngGridCell, TngGridRow, } from '../tng-grid';
+import * as i0 from "@angular/core";
+export class GridHarnessComponent {
+    ariaLabel = 'Harness grid';
+    ariaColcount = null;
+    ariaRowcount = null;
+    dir = 'ltr';
+    focusRow = undefined;
+    focusCol = undefined;
+    selectionMode = 'none';
+    value = undefined;
+    defaultValue = undefined;
+    wrap = false;
+    disableCell01 = true;
+    focusRowChanges = [];
+    focusColChanges = [];
+    focusEvents = [];
+    valueChanges = [];
+    activateEvents = [];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GridHarnessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: GridHarnessComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+    <div
+      tngGrid
+      [ariaLabel]="ariaLabel"
+      [ariaColcount]="ariaColcount"
+      [ariaRowcount]="ariaRowcount"
+      [dir]="dir"
+      [focusRow]="focusRow"
+      [focusCol]="focusCol"
+      [selectionMode]="selectionMode"
+      [value]="value"
+      [defaultValue]="defaultValue"
+      [wrap]="wrap"
+      (focusRowChange)="focusRowChanges.push($event)"
+      (focusColChange)="focusColChanges.push($event)"
+      (focusChange)="focusEvents.push($event)"
+      (valueChange)="valueChanges.push($event)"
+      (cellActivate)="activateEvents.push($event)"
+      data-testid="grid"
+    >
+      <div tngGridRow data-testid="row-0">
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-0-0"
+          cellRole="columnheader"
+          [rowIndex]="0"
+          [colIndex]="0"
+        >
+          Header
+        </button>
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-0-1"
+          [disabled]="disableCell01"
+          [rowIndex]="0"
+          [colIndex]="1"
+        >
+          Alpha
+        </button>
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-0-2"
+          [rowIndex]="0"
+          [colIndex]="2"
+        >
+          Beta
+        </button>
+      </div>
+
+      <div tngGridRow data-testid="row-1">
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-1-0"
+          [rowIndex]="1"
+          [colIndex]="0"
+        >
+          Gamma
+        </button>
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-1-1"
+          [rowIndex]="1"
+          [colIndex]="1"
+          [rowSpan]="2"
+          [colSpan]="2"
+        >
+          Delta
+        </button>
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-1-2"
+          [rowIndex]="1"
+          [colIndex]="2"
+        >
+          Epsilon
+        </button>
+      </div>
+
+      <div tngGridRow data-testid="row-2">
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-2-0"
+          [rowIndex]="2"
+          [colIndex]="0"
+        >
+          Zeta
+        </button>
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-2-1"
+          [rowIndex]="2"
+          [colIndex]="1"
+        >
+          Eta
+        </button>
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-2-2"
+          [rowIndex]="2"
+          [colIndex]="2"
+        >
+          Theta
+        </button>
+      </div>
+    </div>
+
+    <button type="button" data-testid="outside-button">Outside</button>
+  `, isInline: true, dependencies: [{ kind: "directive", type: TngGrid, selector: "[tngGrid]", inputs: ["dir", "focusCol", "focusRow", "selectionMode", "value", "defaultValue", "wrap", "ariaLabel", "ariaColcount", "ariaRowcount"], outputs: ["focusRowChange", "focusColChange", "focusChange", "valueChange", "cellActivate"], exportAs: ["tngGrid"] }, { kind: "directive", type: TngGridRow, selector: "[tngGridRow]", exportAs: ["tngGridRow"] }, { kind: "directive", type: TngGridCell, selector: "[tngGridCell]", inputs: ["rowIndex", "colIndex", "rowSpan", "colSpan", "disabled", "selected", "cellRole"], exportAs: ["tngGridCell"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GridHarnessComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [TngGrid, TngGridRow, TngGridCell],
+                    template: `
+    <div
+      tngGrid
+      [ariaLabel]="ariaLabel"
+      [ariaColcount]="ariaColcount"
+      [ariaRowcount]="ariaRowcount"
+      [dir]="dir"
+      [focusRow]="focusRow"
+      [focusCol]="focusCol"
+      [selectionMode]="selectionMode"
+      [value]="value"
+      [defaultValue]="defaultValue"
+      [wrap]="wrap"
+      (focusRowChange)="focusRowChanges.push($event)"
+      (focusColChange)="focusColChanges.push($event)"
+      (focusChange)="focusEvents.push($event)"
+      (valueChange)="valueChanges.push($event)"
+      (cellActivate)="activateEvents.push($event)"
+      data-testid="grid"
+    >
+      <div tngGridRow data-testid="row-0">
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-0-0"
+          cellRole="columnheader"
+          [rowIndex]="0"
+          [colIndex]="0"
+        >
+          Header
+        </button>
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-0-1"
+          [disabled]="disableCell01"
+          [rowIndex]="0"
+          [colIndex]="1"
+        >
+          Alpha
+        </button>
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-0-2"
+          [rowIndex]="0"
+          [colIndex]="2"
+        >
+          Beta
+        </button>
+      </div>
+
+      <div tngGridRow data-testid="row-1">
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-1-0"
+          [rowIndex]="1"
+          [colIndex]="0"
+        >
+          Gamma
+        </button>
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-1-1"
+          [rowIndex]="1"
+          [colIndex]="1"
+          [rowSpan]="2"
+          [colSpan]="2"
+        >
+          Delta
+        </button>
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-1-2"
+          [rowIndex]="1"
+          [colIndex]="2"
+        >
+          Epsilon
+        </button>
+      </div>
+
+      <div tngGridRow data-testid="row-2">
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-2-0"
+          [rowIndex]="2"
+          [colIndex]="0"
+        >
+          Zeta
+        </button>
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-2-1"
+          [rowIndex]="2"
+          [colIndex]="1"
+        >
+          Eta
+        </button>
+        <button
+          type="button"
+          tngGridCell
+          data-testid="cell-2-2"
+          [rowIndex]="2"
+          [colIndex]="2"
+        >
+          Theta
+        </button>
+      </div>
+    </div>
+
+    <button type="button" data-testid="outside-button">Outside</button>
+  `,
+                }]
+        }] });
+export async function createGridHarnessFixture(overrides = {}) {
+    await TestBed.configureTestingModule({
+        imports: [GridHarnessComponent],
+    }).compileComponents();
+    const fixture = TestBed.createComponent(GridHarnessComponent);
+    Object.assign(fixture.componentInstance, overrides);
+    fixture.detectChanges();
+    return fixture;
+}
+export function dispatchGridKeydown(element, key, init = {}) {
+    const event = new KeyboardEvent('keydown', {
+        bubbles: true,
+        cancelable: true,
+        key,
+        ...init,
+    });
+    element.dispatchEvent(event);
+    return event;
+}
+export function getGrid(fixture) {
+    return queryByTestId(fixture, 'grid');
+}
+export function getOutsideButton(fixture) {
+    return queryByTestId(fixture, 'outside-button');
+}
+export function getCell(fixture, row, col) {
+    return queryByTestId(fixture, `cell-${row}-${col}`);
+}
+export function getRow(fixture, row) {
+    return queryByTestId(fixture, `row-${row}`);
+}
+export function getCellDebugElement(fixture, row, col) {
+    const de = fixture.debugElement.query(By.css(`[data-testid="cell-${row}-${col}"]`));
+    if (de === null) {
+        throw new Error(`Missing cell ${row}:${col}`);
+    }
+    return de;
+}
+function queryByTestId(fixture, testId) {
+    const hostElement = fixture.nativeElement;
+    const element = hostElement.querySelector(`[data-testid="${testId}"]`);
+    if (element === null) {
+        throw new Error(`Missing element with data-testid="${testId}"`);
+    }
+    return element;
+}
+//# sourceMappingURL=tng-grid.test-harness.js.map

package/src/lib/layout/grid/__tests__/tng-grid.test-harness.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tng-grid.test-harness.js","sourceRoot":"","sources":["../../../../../../../../../libs/tailng-ui/primitives/src/lib/layout/grid/__tests__/tng-grid.test-harness.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component } from '@angular/core';\nimport { TestBed, type ComponentFixture } from '@angular/core/testing';\nimport type { DebugElement } from '@angular/core';\nimport { By } from '@angular/platform-browser';\nimport {\n  TngGrid,\n  TngGridCell,\n  type TngGridActivateEvent,\n  type TngGridCellValue,\n  type TngGridFocusChangeEvent,\n  TngGridRow,\n} from '../tng-grid';\n\n@Component({\n  standalone: true,\n  imports: [TngGrid, TngGridRow, TngGridCell],\n  template: `\n    <div\n      tngGrid\n      [ariaLabel]=\"ariaLabel\"\n      [ariaColcount]=\"ariaColcount\"\n      [ariaRowcount]=\"ariaRowcount\"\n      [dir]=\"dir\"\n      [focusRow]=\"focusRow\"\n      [focusCol]=\"focusCol\"\n      [selectionMode]=\"selectionMode\"\n      [value]=\"value\"\n      [defaultValue]=\"defaultValue\"\n      [wrap]=\"wrap\"\n      (focusRowChange)=\"focusRowChanges.push($event)\"\n      (focusColChange)=\"focusColChanges.push($event)\"\n      (focusChange)=\"focusEvents.push($event)\"\n      (valueChange)=\"valueChanges.push($event)\"\n      (cellActivate)=\"activateEvents.push($event)\"\n      data-testid=\"grid\"\n    >\n      <div tngGridRow data-testid=\"row-0\">\n        <button\n          type=\"button\"\n          tngGridCell\n          data-testid=\"cell-0-0\"\n          cellRole=\"columnheader\"\n          [rowIndex]=\"0\"\n          [colIndex]=\"0\"\n        >\n          Header\n        </button>\n        <button\n          type=\"button\"\n          tngGridCell\n          data-testid=\"cell-0-1\"\n          [disabled]=\"disableCell01\"\n          [rowIndex]=\"0\"\n          [colIndex]=\"1\"\n        >\n          Alpha\n        </button>\n        <button\n          type=\"button\"\n          tngGridCell\n          data-testid=\"cell-0-2\"\n          [rowIndex]=\"0\"\n          [colIndex]=\"2\"\n        >\n          Beta\n        </button>\n      </div>\n\n      <div tngGridRow data-testid=\"row-1\">\n        <button\n          type=\"button\"\n          tngGridCell\n          data-testid=\"cell-1-0\"\n          [rowIndex]=\"1\"\n          [colIndex]=\"0\"\n        >\n          Gamma\n        </button>\n        <button\n          type=\"button\"\n          tngGridCell\n          data-testid=\"cell-1-1\"\n          [rowIndex]=\"1\"\n          [colIndex]=\"1\"\n          [rowSpan]=\"2\"\n          [colSpan]=\"2\"\n        >\n          Delta\n        </button>\n        <button\n          type=\"button\"\n          tngGridCell\n          data-testid=\"cell-1-2\"\n          [rowIndex]=\"1\"\n          [colIndex]=\"2\"\n        >\n          Epsilon\n        </button>\n      </div>\n\n      <div tngGridRow data-testid=\"row-2\">\n        <button\n          type=\"button\"\n          tngGridCell\n          data-testid=\"cell-2-0\"\n          [rowIndex]=\"2\"\n          [colIndex]=\"0\"\n        >\n          Zeta\n        </button>\n        <button\n          type=\"button\"\n          tngGridCell\n          data-testid=\"cell-2-1\"\n          [rowIndex]=\"2\"\n          [colIndex]=\"1\"\n        >\n          Eta\n        </button>\n        <button\n          type=\"button\"\n          tngGridCell\n          data-testid=\"cell-2-2\"\n          [rowIndex]=\"2\"\n          [colIndex]=\"2\"\n        >\n          Theta\n        </button>\n      </div>\n    </div>\n\n    <button type=\"button\" data-testid=\"outside-button\">Outside</button>\n  `,\n})\nexport class GridHarnessComponent {\n  public ariaLabel = 'Harness grid';\n  public ariaColcount: number | null = null;\n  public ariaRowcount: number | null = null;\n  public dir: 'ltr' | 'rtl' = 'ltr';\n  public focusRow: number | null | undefined = undefined;\n  public focusCol: number | null | undefined = undefined;\n  public selectionMode: 'none' | 'single' = 'none';\n  public value: TngGridCellValue | null | undefined = undefined;\n  public defaultValue: TngGridCellValue | null | undefined = undefined;\n  public wrap = false;\n  public disableCell01 = true;\n\n  public readonly focusRowChanges: Array<number | null> = [];\n  public readonly focusColChanges: Array<number | null> = [];\n  public readonly focusEvents: TngGridFocusChangeEvent[] = [];\n  public readonly valueChanges: Array<TngGridCellValue | null> = [];\n  public readonly activateEvents: TngGridActivateEvent[] = [];\n}\n\nexport async function createGridHarnessFixture(\n  overrides: Partial<GridHarnessComponent> = {},\n): Promise<ComponentFixture<GridHarnessComponent>> {\n  await TestBed.configureTestingModule({\n    imports: [GridHarnessComponent],\n  }).compileComponents();\n\n  const fixture = TestBed.createComponent(GridHarnessComponent);\n  Object.assign(fixture.componentInstance, overrides);\n  fixture.detectChanges();\n  return fixture;\n}\n\nexport function dispatchGridKeydown(\n  element: HTMLElement,\n  key: string,\n  init: KeyboardEventInit = {},\n): KeyboardEvent {\n  const event = new KeyboardEvent('keydown', {\n    bubbles: true,\n    cancelable: true,\n    key,\n    ...init,\n  });\n  element.dispatchEvent(event);\n  return event;\n}\n\nexport function getGrid(fixture: ComponentFixture<GridHarnessComponent>): HTMLElement {\n  return queryByTestId(fixture, 'grid');\n}\n\nexport function getOutsideButton(fixture: ComponentFixture<GridHarnessComponent>): HTMLButtonElement {\n  return queryByTestId(fixture, 'outside-button') as HTMLButtonElement;\n}\n\nexport function getCell(\n  fixture: ComponentFixture<GridHarnessComponent>,\n  row: number,\n  col: number,\n): HTMLButtonElement {\n  return queryByTestId(fixture, `cell-${row}-${col}`) as HTMLButtonElement;\n}\n\nexport function getRow(\n  fixture: ComponentFixture<GridHarnessComponent>,\n  row: number,\n): HTMLElement {\n  return queryByTestId(fixture, `row-${row}`);\n}\n\nexport function getCellDebugElement(\n  fixture: ComponentFixture<GridHarnessComponent>,\n  row: number,\n  col: number,\n): DebugElement {\n  const de = fixture.debugElement.query(By.css(`[data-testid=\"cell-${row}-${col}\"]`));\n  if (de === null) {\n    throw new Error(`Missing cell ${row}:${col}`);\n  }\n\n  return de;\n}\n\nfunction queryByTestId(\n  fixture: ComponentFixture<GridHarnessComponent>,\n  testId: string,\n): HTMLElement {\n  const hostElement = fixture.nativeElement as HTMLElement;\n  const element = hostElement.querySelector<HTMLElement>(`[data-testid=\"${testId}\"]`);\n  if (element === null) {\n    throw new Error(`Missing element with data-testid=\"${testId}\"`);\n  }\n\n  return element;\n}\n"]}

package/src/lib/layout/grid/tng-grid.d.ts

@@ -1,7 +1,149 @@
+import type { OnDestroy, OnInit } from '@angular/core';
+import { type TngGridCellPosition } from '@tailng-ui/cdk';
 import * as i0 from "@angular/core";
-export declare class TngGrid {
+export type TngGridDirection = 'ltr' | 'rtl';
+export type TngGridSelectionMode = 'none' | 'single';
+export type TngGridCellRole = 'columnheader' | 'gridcell' | 'rowheader';
+export type TngGridInteractionTrigger = 'keyboard' | 'pointer' | 'programmatic';
+export type TngGridCellValue = Readonly<TngGridCellPosition>;
+export type TngGridFocusChangeEvent = Readonly<{
+    col: number;
+    previousCol: number | null;
+    previousRow: number | null;
+    row: number;
+    trigger: TngGridInteractionTrigger;
+}>;
+export type TngGridActivateEvent = Readonly<{
+    col: number;
+    row: number;
+    trigger: Extract<TngGridInteractionTrigger, 'keyboard' | 'pointer'>;
+}>;
+type TngGridNullablePosition = TngGridCellValue | null;
+export declare class TngGrid implements OnDestroy {
+    private readonly hostRef;
+    private readonly cells;
+    private readonly cellByKey;
+    private uncontrolledFocus;
+    private uncontrolledSelection;
+    private selectionInitialized;
+    private ariaLabelValue;
+    private ariaColcountValue;
+    private ariaRowcountValue;
+    private domFocusedKey;
+    private focusVisibleKey;
+    private lastActivatedKey;
+    private pendingFocusTrigger;
+    readonly dir: import("@angular/core").InputSignalWithTransform<TngGridDirection, unknown>;
+    readonly focusCol: import("@angular/core").InputSignalWithTransform<number | null | undefined, unknown>;
+    readonly focusRow: import("@angular/core").InputSignalWithTransform<number | null | undefined, unknown>;
+    readonly selectionMode: import("@angular/core").InputSignalWithTransform<TngGridSelectionMode, unknown>;
+    readonly value: import("@angular/core").InputSignalWithTransform<TngGridNullablePosition | undefined, unknown>;
+    readonly defaultValue: import("@angular/core").InputSignalWithTransform<TngGridNullablePosition | undefined, unknown>;
+    readonly wrap: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    readonly focusRowChange: import("@angular/core").OutputEmitterRef<number | null>;
+    readonly focusColChange: import("@angular/core").OutputEmitterRef<number | null>;
+    readonly focusChange: import("@angular/core").OutputEmitterRef<Readonly<{
+        col: number;
+        previousCol: number | null;
+        previousRow: number | null;
+        row: number;
+        trigger: TngGridInteractionTrigger;
+    }>>;
+    readonly valueChange: import("@angular/core").OutputEmitterRef<TngGridNullablePosition>;
+    readonly cellActivate: import("@angular/core").OutputEmitterRef<Readonly<{
+        col: number;
+        row: number;
+        trigger: Extract<TngGridInteractionTrigger, "keyboard" | "pointer">;
+    }>>;
+    set ariaLabel(value: string | null);
+    set ariaColcount(value: unknown);
+    set ariaRowcount(value: unknown);
     protected readonly dataSlot: "grid";
+    protected readonly role: "grid";
+    protected get ariaLabelAttr(): string | null;
+    protected get ariaColcountAttr(): string | null;
+    protected get ariaRowcountAttr(): string | null;
+    ngOnDestroy(): void;
+    registerCell(cell: TngGridCell): void;
+    unregisterCell(cell: TngGridCell): void;
+    isCellActivated(cell: TngGridCell): boolean;
+    isCellDisabled(cell: TngGridCell): boolean;
+    isCellFocusVisible(cell: TngGridCell): boolean;
+    isCellFocused(cell: TngGridCell): boolean;
+    isCellTabStop(cell: TngGridCell): boolean;
+    isCellSelected(cell: TngGridCell): boolean;
+    getCellTabIndex(cell: TngGridCell): string;
+    onCellClicked(cell: TngGridCell): void;
+    onCellFocused(cell: TngGridCell): void;
+    onCellPointerDown(cell: TngGridCell): void;
+    onCellSelectionRequest(cell: TngGridCell, trigger: Extract<TngGridInteractionTrigger, 'keyboard' | 'pointer'>): void;
+    protected onFocusOut(event: FocusEvent): void;
+    protected onKeyDown(event: KeyboardEvent): void;
+    private ensureFallbackFocus;
+    private ensureUncontrolledSelectionInitialized;
+    private getActiveCell;
+    private getComputedBounds;
+    private getFirstEnabledCell;
+    private getEnabledCells;
+    private getFocusValue;
+    private getNavigableCells;
+    private getSelectedValue;
+    private isFocusControlled;
+    private isSelectionControlled;
+    private moveFocus;
+    private requestFocus;
+    private requestSelection;
     static ɵfac: i0.ɵɵFactoryDeclaration<TngGrid, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TngGrid, "[tngGrid]", ["tngGrid"], {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TngGrid, "[tngGrid]", ["tngGrid"], { "dir": { "alias": "dir"; "required": false; "isSignal": true; }; "focusCol": { "alias": "focusCol"; "required": false; "isSignal": true; }; "focusRow": { "alias": "focusRow"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaColcount": { "alias": "ariaColcount"; "required": false; }; "ariaRowcount": { "alias": "ariaRowcount"; "required": false; }; }, { "focusRowChange": "focusRowChange"; "focusColChange": "focusColChange"; "focusChange": "focusChange"; "valueChange": "valueChange"; "cellActivate": "cellActivate"; }, never, never, true, never>;
 }
+export declare class TngGridRow {
+    protected readonly dataSlot: "grid-row";
+    protected readonly role: "row";
+    static ɵfac: i0.ɵɵFactoryDeclaration<TngGridRow, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TngGridRow, "[tngGridRow]", ["tngGridRow"], {}, {}, never, never, true, never>;
+}
+export declare class TngGridCell implements OnInit, OnDestroy {
+    private readonly hostRef;
+    private readonly grid;
+    readonly rowIndex: import("@angular/core").InputSignalWithTransform<number, unknown>;
+    readonly colIndex: import("@angular/core").InputSignalWithTransform<number, unknown>;
+    readonly rowSpan: import("@angular/core").InputSignalWithTransform<number, unknown>;
+    readonly colSpan: import("@angular/core").InputSignalWithTransform<number, unknown>;
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    readonly selected: import("@angular/core").InputSignalWithTransform<boolean | null, unknown>;
+    readonly cellRole: import("@angular/core").InputSignalWithTransform<TngGridCellRole, unknown>;
+    protected readonly dataSlot: "gridcell";
+    protected get roleAttr(): TngGridCellRole;
+    protected get tabIndexAttr(): string;
+    protected get ariaRowIndexAttr(): string;
+    protected get ariaColIndexAttr(): string;
+    protected get ariaRowSpanAttr(): string | null;
+    protected get ariaColSpanAttr(): string | null;
+    protected get ariaDisabledAttr(): string | null;
+    protected get ariaSelectedAttr(): string | null;
+    protected get dataRowIndexAttr(): string;
+    protected get dataColIndexAttr(): string;
+    protected get dataRowSpanAttr(): string | null;
+    protected get dataColSpanAttr(): string | null;
+    protected get dataDisabledAttr(): '' | null;
+    protected get dataSelectedAttr(): '' | null;
+    protected get dataFocusedAttr(): '' | null;
+    protected get dataFocusVisibleAttr(): '' | null;
+    protected get dataActivatedAttr(): '' | null;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    cellKey(): string;
+    focusHost(): void;
+    getHostElement(): HTMLElement;
+    getValue(): TngGridCellValue;
+    isFocusVisible(): boolean;
+    matchesValue(value: TngGridCellValue): boolean;
+    protected onClick(): void;
+    protected onDoubleClick(): void;
+    protected onFocus(): void;
+    protected onPointerDown(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TngGridCell, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TngGridCell, "[tngGridCell]", ["tngGridCell"], { "rowIndex": { "alias": "rowIndex"; "required": true; "isSignal": true; }; "colIndex": { "alias": "colIndex"; "required": true; "isSignal": true; }; "rowSpan": { "alias": "rowSpan"; "required": false; "isSignal": true; }; "colSpan": { "alias": "colSpan"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "cellRole": { "alias": "cellRole"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+export {};
 //# sourceMappingURL=tng-grid.d.ts.map

package/src/lib/layout/grid/tng-grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tng-grid.d.ts","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/primitives/src/lib/layout/grid/tng-grid.ts"],"names":[],"mappings":";AAEA,qBAKa,OAAO;IAElB,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAG,MAAM,CAAU;yCAFnC,OAAO;2CAAP,OAAO;CAGnB"}
+{"version":3,"file":"tng-grid.d.ts","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/primitives/src/lib/layout/grid/tng-grid.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,SAAS,EACT,MAAM,EAAC,MAAM,eAAe,CAAC;AAY/B,OAAO,EAGL,KAAK,mBAAmB,EAGzB,MAAM,gBAAgB,CAAC;;AAExB,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,KAAK,CAAC;AAC7C,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,QAAQ,CAAC;AACrD,MAAM,MAAM,eAAe,GAAG,cAAc,GAAG,UAAU,GAAG,WAAW,CAAC;AACxE,MAAM,MAAM,yBAAyB,GAAG,UAAU,GAAG,SAAS,GAAG,cAAc,CAAC;AAChF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC,mBAAmB,CAAC,CAAC;AAE7D,MAAM,MAAM,uBAAuB,GAAG,QAAQ,CAAC;IAC7C,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,yBAAyB,CAAC;CACpC,CAAC,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,QAAQ,CAAC;IAC1C,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,OAAO,CAAC,yBAAyB,EAAE,UAAU,GAAG,SAAS,CAAC,CAAC;CACrE,CAAC,CAAC;AAEH,KAAK,uBAAuB,GAAG,gBAAgB,GAAG,IAAI,CAAC;AA+HvD,qBAIa,OAAQ,YAAW,SAAS;IACvC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA+C;IACvE,OAAO,CAAC,QAAQ,CAAC,KAAK,CAA0B;IAChD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAkC;IAE5D,OAAO,CAAC,iBAAiB,CAAiC;IAC1D,OAAO,CAAC,qBAAqB,CAAiC;IAC9D,OAAO,CAAC,oBAAoB,CAAS;IACrC,OAAO,CAAC,cAAc,CAAuB;IAC7C,OAAO,CAAC,iBAAiB,CAAuB;IAChD,OAAO,CAAC,iBAAiB,CAAuB;IAChD,OAAO,CAAC,aAAa,CAAuB;IAC5C,OAAO,CAAC,eAAe,CAAuB;IAC9C,OAAO,CAAC,gBAAgB,CAAuB;IAC/C,OAAO,CAAC,mBAAmB,CAA0C;IAErE,SAAgB,GAAG,8EAEhB;IACH,SAAgB,QAAQ,uFAErB;IACH,SAAgB,QAAQ,uFAErB;IACH,SAAgB,aAAa,kFAE1B;IACH,SAAgB,KAAK,iGAElB;IACH,SAAgB,YAAY,iGAEzB;IACH,SAAgB,IAAI,qEAEjB;IAEH,SAAgB,cAAc,0DAA2B;IACzD,SAAgB,cAAc,0DAA2B;IACzD,SAAgB,WAAW;aAxLtB,MAAM;qBACE,MAAM,GAAG,IAAI;qBACb,MAAM,GAAG,IAAI;aACrB,MAAM;iBACF,yBAAyB;QAoL8B;IAChE,SAAgB,WAAW,oEAAqC;IAChE,SAAgB,YAAY;aAlLvB,MAAM;aACN,MAAM;iBACF,OAAO,CAAC,yBAAyB,EAAE,UAAU,GAAG,SAAS,CAAC;QAgLL;IAE9D,IACW,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAExC;IAED,IACW,YAAY,CAAC,KAAK,EAAE,OAAO,EAErC;IAED,IACW,YAAY,CAAC,KAAK,EAAE,OAAO,EAErC;IAGD,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAG,MAAM,CAAU;IAG9C,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAG,MAAM,CAAU;IAG1C,SAAS,KAAK,aAAa,IAAI,MAAM,GAAG,IAAI,CAE3C;IAGD,SAAS,KAAK,gBAAgB,IAAI,MAAM,GAAG,IAAI,CAQ9C;IAGD,SAAS,KAAK,gBAAgB,IAAI,MAAM,GAAG,IAAI,CAQ9C;IAEM,WAAW,IAAI,IAAI;IAKnB,YAAY,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IAOrC,cAAc,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IAmCvC,eAAe,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO;IAI3C,cAAc,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO;IAI1C,kBAAkB,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO;IAI9C,aAAa,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO;IAIzC,aAAa,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO;IAKzC,cAAc,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO;IAU1C,eAAe,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM;IAQ1C,aAAa,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IAUtC,aAAa,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IActC,iBAAiB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IAS1C,sBAAsB,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,CAAC,yBAAyB,EAAE,UAAU,GAAG,SAAS,CAAC,GAAG,IAAI;IAoB3H,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAY7C,SAAS,CAAC,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IA6B/C,OAAO,CAAC,mBAAmB;IAiB3B,OAAO,CAAC,sCAAsC;IAS9C,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,iBAAiB;IAuBzB,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,aAAa;IA2BrB,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,SAAS;IAsBjB,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,gBAAgB;yCAjbb,OAAO;2CAAP,OAAO;CA6bnB;AAED,qBAIa,UAAU;IAErB,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAG,UAAU,CAAU;IAGlD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAG,KAAK,CAAU;yCAL9B,UAAU;2CAAV,UAAU;CAMtB;AAED,qBAIa,WAAY,YAAW,MAAM,EAAE,SAAS;IACnD,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA+C;IACvE,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAmB;IAExC,SAAgB,QAAQ,oEAErB;IACH,SAAgB,QAAQ,oEAErB;IACH,SAAgB,OAAO,oEAEpB;IACH,SAAgB,OAAO,oEAEpB;IACH,SAAgB,QAAQ,qEAErB;IACH,SAAgB,QAAQ,4EAQrB;IACH,SAAgB,QAAQ,6EAErB;IAGH,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAG,UAAU,CAAU;IAGlD,SAAS,KAAK,QAAQ,IAAI,eAAe,CAExC;IAGD,SAAS,KAAK,YAAY,IAAI,MAAM,CAEnC;IAGD,SAAS,KAAK,gBAAgB,IAAI,MAAM,CAEvC;IAGD,SAAS,KAAK,gBAAgB,IAAI,MAAM,CAEvC;IAGD,SAAS,KAAK,eAAe,IAAI,MAAM,GAAG,IAAI,CAE7C;IAGD,SAAS,KAAK,eAAe,IAAI,MAAM,GAAG,IAAI,CAE7C;IAGD,SAAS,KAAK,gBAAgB,IAAI,MAAM,GAAG,IAAI,CAE9C;IAGD,SAAS,KAAK,gBAAgB,IAAI,MAAM,GAAG,IAAI,CAc9C;IAGD,SAAS,KAAK,gBAAgB,IAAI,MAAM,CAEvC;IAGD,SAAS,KAAK,gBAAgB,IAAI,MAAM,CAEvC;IAGD,SAAS,KAAK,eAAe,IAAI,MAAM,GAAG,IAAI,CAE7C;IAGD,SAAS,KAAK,eAAe,IAAI,MAAM,GAAG,IAAI,CAE7C;IAGD,SAAS,KAAK,gBAAgB,IAAI,EAAE,GAAG,IAAI,CAE1C;IAGD,SAAS,KAAK,gBAAgB,IAAI,EAAE,GAAG,IAAI,CAE1C;IAGD,SAAS,KAAK,eAAe,IAAI,EAAE,GAAG,IAAI,CAEzC;IAGD,SAAS,KAAK,oBAAoB,IAAI,EAAE,GAAG,IAAI,CAE9C;IAGD,SAAS,KAAK,iBAAiB,IAAI,EAAE,GAAG,IAAI,CAE3C;IAEM,QAAQ,IAAI,IAAI;IAIhB,WAAW,IAAI,IAAI;IAInB,OAAO,IAAI,MAAM;IAIjB,SAAS,IAAI,IAAI;IAIjB,cAAc,IAAI,WAAW;IAI7B,QAAQ,IAAI,gBAAgB;IAO5B,cAAc,IAAI,OAAO;IAIzB,YAAY,CAAC,KAAK,EAAE,gBAAgB,GAAG,OAAO;IAKrD,SAAS,CAAC,OAAO,IAAI,IAAI;IASzB,SAAS,CAAC,aAAa,IAAI,IAAI;IAS/B,SAAS,CAAC,OAAO,IAAI,IAAI;IAKzB,SAAS,CAAC,aAAa,IAAI,IAAI;yCA/LpB,WAAW;2CAAX,WAAW;CAkMvB"}