@angular/aria 21.1.0-next.1 → 21.1.0-next.2

package/fesm2022/grid.mjs

@@ -1,40 +1,45 @@
-import { _IdGenerator } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
-import { inject, ElementRef, contentChildren, computed, input, booleanAttribute, afterRenderEffect, Directive, model, output } from '@angular/core';
+import { InjectionToken, inject, ElementRef, contentChildren, computed, input, booleanAttribute, afterRenderEffect, Directive, output, model } from '@angular/core';
 import { Directionality } from '@angular/cdk/bidi';
-import { GridPattern, GridRowPattern, GridCellPattern, GridCellWidgetPattern } from './_widget-chunk.mjs';
+import { GridPattern, GridCellWidgetPattern, GridCellPattern, GridRowPattern } from './_widget-chunk.mjs';
+import { _IdGenerator } from '@angular/cdk/a11y';
+import './_pointer-event-manager-chunk.mjs';
+import './_list-navigation-chunk.mjs';
+
+const GRID_CELL = new InjectionToken('GRID_CELL');
+const GRID_ROW = new InjectionToken('GRID_ROW');
 
 class Grid {
   _elementRef = inject(ElementRef);
   element = this._elementRef.nativeElement;
-  _rows = contentChildren(GridRow, ...(ngDevMode ? [{
-    debugName: "_rows",
-    descendants: true
-  }] : [{
+  _rows = contentChildren(GRID_ROW, {
+    ...(ngDevMode ? {
+      debugName: "_rows"
+    } : {}),
     descendants: true
-  }]));
+  });
   _rowPatterns = computed(() => this._rows().map(r => r._pattern), ...(ngDevMode ? [{
     debugName: "_rowPatterns"
   }] : []));
   textDirection = inject(Directionality).valueSignal;
-  enableSelection = input(false, ...(ngDevMode ? [{
-    debugName: "enableSelection",
-    transform: booleanAttribute
-  }] : [{
-    transform: booleanAttribute
-  }]));
-  disabled = input(false, ...(ngDevMode ? [{
-    debugName: "disabled",
+  enableSelection = input(false, {
+    ...(ngDevMode ? {
+      debugName: "enableSelection"
+    } : {}),
     transform: booleanAttribute
-  }] : [{
-    transform: booleanAttribute
-  }]));
-  softDisabled = input(true, ...(ngDevMode ? [{
-    debugName: "softDisabled",
+  });
+  disabled = input(false, {
+    ...(ngDevMode ? {
+      debugName: "disabled"
+    } : {}),
     transform: booleanAttribute
-  }] : [{
+  });
+  softDisabled = input(true, {
+    ...(ngDevMode ? {
+      debugName: "softDisabled"
+    } : {}),
     transform: booleanAttribute
-  }]));
+  });
   focusMode = input('roving', ...(ngDevMode ? [{
     debugName: "focusMode"
   }] : []));
@@ -44,21 +49,21 @@ class Grid {
   colWrap = input('loop', ...(ngDevMode ? [{
     debugName: "colWrap"
   }] : []));
-  multi = input(false, ...(ngDevMode ? [{
-    debugName: "multi",
-    transform: booleanAttribute
-  }] : [{
+  multi = input(false, {
+    ...(ngDevMode ? {
+      debugName: "multi"
+    } : {}),
     transform: booleanAttribute
-  }]));
+  });
   selectionMode = input('follow', ...(ngDevMode ? [{
     debugName: "selectionMode"
   }] : []));
-  enableRangeSelection = input(false, ...(ngDevMode ? [{
-    debugName: "enableRangeSelection",
+  enableRangeSelection = input(false, {
+    ...(ngDevMode ? {
+      debugName: "enableRangeSelection"
+    } : {}),
     transform: booleanAttribute
-  }] : [{
-    transform: booleanAttribute
-  }]));
+  });
   _pattern = new GridPattern({
     ...this,
     rows: this._rowPatterns,
@@ -88,7 +93,7 @@ class Grid {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "21.0.0",
+    version: "21.0.3",
     ngImport: i0,
     type: Grid,
     deps: [],
@@ -96,7 +101,7 @@ class Grid {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "17.2.0",
-    version: "21.0.0",
+    version: "21.0.3",
     type: Grid,
     isStandalone: true,
     selector: "[ngGrid]",
@@ -185,7 +190,7 @@ class Grid {
     },
     queries: [{
       propertyName: "_rows",
-      predicate: GridRow,
+      predicate: GRID_ROW,
       descendants: true,
       isSignal: true
     }],
@@ -195,7 +200,7 @@ class Grid {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "21.0.0",
+  version: "21.0.3",
   ngImport: i0,
   type: Grid,
   decorators: [{
@@ -221,7 +226,7 @@ i0.ɵɵngDeclareClassMetadata({
   propDecorators: {
     _rows: [{
       type: i0.ContentChildren,
-      args: [i0.forwardRef(() => GridRow), {
+      args: [i0.forwardRef(() => GRID_ROW), {
         ...{
           descendants: true
         },
@@ -302,123 +307,223 @@ i0.ɵɵngDeclareClassMetadata({
     }]
   }
 });
-class GridRow {
+
+class GridCellWidget {
   _elementRef = inject(ElementRef);
   element = this._elementRef.nativeElement;
-  _cells = contentChildren(GridCell, ...(ngDevMode ? [{
-    debugName: "_cells",
-    descendants: true
-  }] : [{
-    descendants: true
-  }]));
-  _cellPatterns = computed(() => this._cells().map(c => c._pattern), ...(ngDevMode ? [{
-    debugName: "_cellPatterns"
+  active = computed(() => this._pattern.active(), ...(ngDevMode ? [{
+    debugName: "active"
   }] : []));
-  _grid = inject(Grid);
-  _gridPattern = computed(() => this._grid._pattern, ...(ngDevMode ? [{
-    debugName: "_gridPattern"
+  _cell = inject(GRID_CELL);
+  id = input(inject(_IdGenerator).getId('ng-grid-cell-widget-', true), ...(ngDevMode ? [{
+    debugName: "id"
   }] : []));
-  rowIndex = input(...(ngDevMode ? [undefined, {
-    debugName: "rowIndex"
+  widgetType = input('simple', ...(ngDevMode ? [{
+    debugName: "widgetType"
   }] : []));
-  _pattern = new GridRowPattern({
+  disabled = input(false, {
+    ...(ngDevMode ? {
+      debugName: "disabled"
+    } : {}),
+    transform: booleanAttribute
+  });
+  focusTarget = input(...(ngDevMode ? [undefined, {
+    debugName: "focusTarget"
+  }] : []));
+  onActivate = output();
+  onDeactivate = output();
+  tabindex = input(...(ngDevMode ? [undefined, {
+    debugName: "tabindex"
+  }] : []));
+  _tabIndex = computed(() => this.tabindex() ?? (this.focusTarget() ? -1 : this._pattern.tabIndex()), ...(ngDevMode ? [{
+    debugName: "_tabIndex"
+  }] : []));
+  _pattern = new GridCellWidgetPattern({
     ...this,
-    cells: this._cellPatterns,
-    grid: this._gridPattern
+    element: () => this.element,
+    cell: () => this._cell._pattern,
+    focusTarget: computed(() => {
+      if (this.focusTarget() instanceof ElementRef) {
+        return this.focusTarget().nativeElement;
+      }
+      return this.focusTarget();
+    })
   });
+  get isActivated() {
+    return this._pattern.isActivated.asReadonly();
+  }
+  constructor() {
+    afterRenderEffect(() => {
+      const activateEvent = this._pattern.lastActivateEvent();
+      if (activateEvent) {
+        this.onActivate.emit(activateEvent);
+      }
+    });
+    afterRenderEffect(() => {
+      const deactivateEvent = this._pattern.lastDeactivateEvent();
+      if (deactivateEvent) {
+        this.onDeactivate.emit(deactivateEvent);
+      }
+    });
+  }
+  activate() {
+    this._pattern.activate();
+  }
+  deactivate() {
+    this._pattern.deactivate();
+  }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "21.0.0",
+    version: "21.0.3",
     ngImport: i0,
-    type: GridRow,
+    type: GridCellWidget,
     deps: [],
     target: i0.ɵɵFactoryTarget.Directive
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
-    minVersion: "17.2.0",
-    version: "21.0.0",
-    type: GridRow,
+    minVersion: "17.1.0",
+    version: "21.0.3",
+    type: GridCellWidget,
     isStandalone: true,
-    selector: "[ngGridRow]",
+    selector: "[ngGridCellWidget]",
     inputs: {
-      rowIndex: {
-        classPropertyName: "rowIndex",
-        publicName: "rowIndex",
+      id: {
+        classPropertyName: "id",
+        publicName: "id",
+        isSignal: true,
+        isRequired: false,
+        transformFunction: null
+      },
+      widgetType: {
+        classPropertyName: "widgetType",
+        publicName: "widgetType",
+        isSignal: true,
+        isRequired: false,
+        transformFunction: null
+      },
+      disabled: {
+        classPropertyName: "disabled",
+        publicName: "disabled",
+        isSignal: true,
+        isRequired: false,
+        transformFunction: null
+      },
+      focusTarget: {
+        classPropertyName: "focusTarget",
+        publicName: "focusTarget",
+        isSignal: true,
+        isRequired: false,
+        transformFunction: null
+      },
+      tabindex: {
+        classPropertyName: "tabindex",
+        publicName: "tabindex",
         isSignal: true,
         isRequired: false,
         transformFunction: null
       }
     },
+    outputs: {
+      onActivate: "onActivate",
+      onDeactivate: "onDeactivate"
+    },
     host: {
-      attributes: {
-        "role": "row"
-      },
       properties: {
-        "attr.aria-rowindex": "_pattern.rowIndex()"
+        "attr.data-active": "active()",
+        "attr.data-active-control": "isActivated() ? \"widget\" : \"cell\"",
+        "tabindex": "_tabIndex()"
       }
     },
-    queries: [{
-      propertyName: "_cells",
-      predicate: GridCell,
-      descendants: true,
-      isSignal: true
-    }],
-    exportAs: ["ngGridRow"],
+    exportAs: ["ngGridCellWidget"],
     ngImport: i0
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "21.0.0",
+  version: "21.0.3",
   ngImport: i0,
-  type: GridRow,
+  type: GridCellWidget,
   decorators: [{
     type: Directive,
     args: [{
-      selector: '[ngGridRow]',
-      exportAs: 'ngGridRow',
+      selector: '[ngGridCellWidget]',
+      exportAs: 'ngGridCellWidget',
       host: {
-        'role': 'row',
-        '[attr.aria-rowindex]': '_pattern.rowIndex()'
+        '[attr.data-active]': 'active()',
+        '[attr.data-active-control]': 'isActivated() ? "widget" : "cell"',
+        '[tabindex]': '_tabIndex()'
       }
     }]
   }],
+  ctorParameters: () => [],
   propDecorators: {
-    _cells: [{
-      type: i0.ContentChildren,
-      args: [i0.forwardRef(() => GridCell), {
-        ...{
-          descendants: true
-        },
-        isSignal: true
+    id: [{
+      type: i0.Input,
+      args: [{
+        isSignal: true,
+        alias: "id",
+        required: false
       }]
     }],
-    rowIndex: [{
+    widgetType: [{
       type: i0.Input,
       args: [{
         isSignal: true,
-        alias: "rowIndex",
+        alias: "widgetType",
+        required: false
+      }]
+    }],
+    disabled: [{
+      type: i0.Input,
+      args: [{
+        isSignal: true,
+        alias: "disabled",
+        required: false
+      }]
+    }],
+    focusTarget: [{
+      type: i0.Input,
+      args: [{
+        isSignal: true,
+        alias: "focusTarget",
+        required: false
+      }]
+    }],
+    onActivate: [{
+      type: i0.Output,
+      args: ["onActivate"]
+    }],
+    onDeactivate: [{
+      type: i0.Output,
+      args: ["onDeactivate"]
+    }],
+    tabindex: [{
+      type: i0.Input,
+      args: [{
+        isSignal: true,
+        alias: "tabindex",
         required: false
       }]
     }]
   }
 });
+
 class GridCell {
   _elementRef = inject(ElementRef);
   element = this._elementRef.nativeElement;
   active = computed(() => this._pattern.active(), ...(ngDevMode ? [{
     debugName: "active"
   }] : []));
-  _widgets = contentChildren(GridCellWidget, ...(ngDevMode ? [{
-    debugName: "_widgets",
-    descendants: true
-  }] : [{
+  _widgets = contentChildren(GridCellWidget, {
+    ...(ngDevMode ? {
+      debugName: "_widgets"
+    } : {}),
     descendants: true
-  }]));
+  });
   _widgetPatterns = computed(() => this._widgets().map(w => w._pattern), ...(ngDevMode ? [{
     debugName: "_widgetPatterns"
   }] : []));
-  _row = inject(GridRow);
+  _row = inject(GRID_ROW);
   textDirection = inject(Directionality).valueSignal;
   id = input(inject(_IdGenerator).getId('ng-grid-cell-', true), ...(ngDevMode ? [{
     debugName: "id"
@@ -438,12 +543,12 @@ class GridCell {
   colIndex = input(...(ngDevMode ? [undefined, {
     debugName: "colIndex"
   }] : []));
-  disabled = input(false, ...(ngDevMode ? [{
-    debugName: "disabled",
-    transform: booleanAttribute
-  }] : [{
+  disabled = input(false, {
+    ...(ngDevMode ? {
+      debugName: "disabled"
+    } : {}),
     transform: booleanAttribute
-  }]));
+  });
   selected = model(false, ...(ngDevMode ? [{
     debugName: "selected"
   }] : []));
@@ -453,12 +558,12 @@ class GridCell {
   orientation = input('horizontal', ...(ngDevMode ? [{
     debugName: "orientation"
   }] : []));
-  wrap = input(true, ...(ngDevMode ? [{
-    debugName: "wrap",
-    transform: booleanAttribute
-  }] : [{
+  wrap = input(true, {
+    ...(ngDevMode ? {
+      debugName: "wrap"
+    } : {}),
     transform: booleanAttribute
-  }]));
+  });
   tabindex = input(...(ngDevMode ? [undefined, {
     debugName: "tabindex"
   }] : []));
@@ -487,7 +592,7 @@ class GridCell {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "21.0.0",
+    version: "21.0.3",
     ngImport: i0,
     type: GridCell,
     deps: [],
@@ -495,7 +600,7 @@ class GridCell {
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
     minVersion: "17.2.0",
-    version: "21.0.0",
+    version: "21.0.3",
     type: GridCell,
     isStandalone: true,
     selector: "[ngGridCell]",
@@ -605,6 +710,10 @@ class GridCell {
         "tabindex": "_tabIndex()"
       }
     },
+    providers: [{
+      provide: GRID_CELL,
+      useExisting: GridCell
+    }],
     queries: [{
       propertyName: "_widgets",
       predicate: GridCellWidget,
@@ -617,7 +726,7 @@ class GridCell {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "21.0.0",
+  version: "21.0.3",
   ngImport: i0,
   type: GridCell,
   decorators: [{
@@ -639,7 +748,11 @@ i0.ɵɵngDeclareClassMetadata({
         '[attr.aria-colindex]': '_pattern.ariaColIndex()',
         '[attr.aria-selected]': '_pattern.ariaSelected()',
         '[tabindex]': '_tabIndex()'
-      }
+      },
+      providers: [{
+        provide: GRID_CELL,
+        useExisting: GridCell
+      }]
     }]
   }],
   ctorParameters: () => [],
@@ -754,200 +867,111 @@ i0.ɵɵngDeclareClassMetadata({
     }]
   }
 });
-class GridCellWidget {
+
+class GridRow {
   _elementRef = inject(ElementRef);
   element = this._elementRef.nativeElement;
-  active = computed(() => this._pattern.active(), ...(ngDevMode ? [{
-    debugName: "active"
-  }] : []));
-  _cell = inject(GridCell);
-  id = input(inject(_IdGenerator).getId('ng-grid-cell-widget-', true), ...(ngDevMode ? [{
-    debugName: "id"
-  }] : []));
-  widgetType = input('simple', ...(ngDevMode ? [{
-    debugName: "widgetType"
-  }] : []));
-  disabled = input(false, ...(ngDevMode ? [{
-    debugName: "disabled",
-    transform: booleanAttribute
-  }] : [{
-    transform: booleanAttribute
-  }]));
-  focusTarget = input(...(ngDevMode ? [undefined, {
-    debugName: "focusTarget"
+  _cells = contentChildren(GRID_CELL, {
+    ...(ngDevMode ? {
+      debugName: "_cells"
+    } : {}),
+    descendants: true
+  });
+  _cellPatterns = computed(() => this._cells().map(c => c._pattern), ...(ngDevMode ? [{
+    debugName: "_cellPatterns"
   }] : []));
-  onActivate = output();
-  onDeactivate = output();
-  tabindex = input(...(ngDevMode ? [undefined, {
-    debugName: "tabindex"
+  _grid = inject(Grid);
+  _gridPattern = computed(() => this._grid._pattern, ...(ngDevMode ? [{
+    debugName: "_gridPattern"
   }] : []));
-  _tabIndex = computed(() => this.tabindex() ?? (this.focusTarget() ? -1 : this._pattern.tabIndex()), ...(ngDevMode ? [{
-    debugName: "_tabIndex"
+  rowIndex = input(...(ngDevMode ? [undefined, {
+    debugName: "rowIndex"
   }] : []));
-  _pattern = new GridCellWidgetPattern({
+  _pattern = new GridRowPattern({
     ...this,
-    element: () => this.element,
-    cell: () => this._cell._pattern,
-    focusTarget: computed(() => {
-      if (this.focusTarget() instanceof ElementRef) {
-        return this.focusTarget().nativeElement;
-      }
-      return this.focusTarget();
-    })
+    cells: this._cellPatterns,
+    grid: this._gridPattern
   });
-  get isActivated() {
-    return this._pattern.isActivated.asReadonly();
-  }
-  constructor() {
-    afterRenderEffect(() => {
-      const activateEvent = this._pattern.lastActivateEvent();
-      if (activateEvent) {
-        this.onActivate.emit(activateEvent);
-      }
-    });
-    afterRenderEffect(() => {
-      const deactivateEvent = this._pattern.lastDeactivateEvent();
-      if (deactivateEvent) {
-        this.onDeactivate.emit(deactivateEvent);
-      }
-    });
-  }
-  activate() {
-    this._pattern.activate();
-  }
-  deactivate() {
-    this._pattern.deactivate();
-  }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "21.0.0",
+    version: "21.0.3",
     ngImport: i0,
-    type: GridCellWidget,
+    type: GridRow,
     deps: [],
     target: i0.ɵɵFactoryTarget.Directive
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
-    minVersion: "17.1.0",
-    version: "21.0.0",
-    type: GridCellWidget,
+    minVersion: "17.2.0",
+    version: "21.0.3",
+    type: GridRow,
     isStandalone: true,
-    selector: "[ngGridCellWidget]",
+    selector: "[ngGridRow]",
     inputs: {
-      id: {
-        classPropertyName: "id",
-        publicName: "id",
-        isSignal: true,
-        isRequired: false,
-        transformFunction: null
-      },
-      widgetType: {
-        classPropertyName: "widgetType",
-        publicName: "widgetType",
-        isSignal: true,
-        isRequired: false,
-        transformFunction: null
-      },
-      disabled: {
-        classPropertyName: "disabled",
-        publicName: "disabled",
-        isSignal: true,
-        isRequired: false,
-        transformFunction: null
-      },
-      focusTarget: {
-        classPropertyName: "focusTarget",
-        publicName: "focusTarget",
-        isSignal: true,
-        isRequired: false,
-        transformFunction: null
-      },
-      tabindex: {
-        classPropertyName: "tabindex",
-        publicName: "tabindex",
+      rowIndex: {
+        classPropertyName: "rowIndex",
+        publicName: "rowIndex",
         isSignal: true,
         isRequired: false,
         transformFunction: null
       }
     },
-    outputs: {
-      onActivate: "onActivate",
-      onDeactivate: "onDeactivate"
-    },
     host: {
+      attributes: {
+        "role": "row"
+      },
       properties: {
-        "attr.data-active": "active()",
-        "attr.data-active-control": "isActivated() ? \"widget\" : \"cell\"",
-        "tabindex": "_tabIndex()"
+        "attr.aria-rowindex": "_pattern.rowIndex()"
       }
     },
-    exportAs: ["ngGridCellWidget"],
+    providers: [{
+      provide: GRID_ROW,
+      useExisting: GridRow
+    }],
+    queries: [{
+      propertyName: "_cells",
+      predicate: GRID_CELL,
+      descendants: true,
+      isSignal: true
+    }],
+    exportAs: ["ngGridRow"],
     ngImport: i0
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "21.0.0",
+  version: "21.0.3",
   ngImport: i0,
-  type: GridCellWidget,
+  type: GridRow,
   decorators: [{
     type: Directive,
     args: [{
-      selector: '[ngGridCellWidget]',
-      exportAs: 'ngGridCellWidget',
+      selector: '[ngGridRow]',
+      exportAs: 'ngGridRow',
       host: {
-        '[attr.data-active]': 'active()',
-        '[attr.data-active-control]': 'isActivated() ? "widget" : "cell"',
-        '[tabindex]': '_tabIndex()'
-      }
+        'role': 'row',
+        '[attr.aria-rowindex]': '_pattern.rowIndex()'
+      },
+      providers: [{
+        provide: GRID_ROW,
+        useExisting: GridRow
+      }]
     }]
   }],
-  ctorParameters: () => [],
   propDecorators: {
-    id: [{
-      type: i0.Input,
-      args: [{
-        isSignal: true,
-        alias: "id",
-        required: false
-      }]
-    }],
-    widgetType: [{
-      type: i0.Input,
-      args: [{
-        isSignal: true,
-        alias: "widgetType",
-        required: false
-      }]
-    }],
-    disabled: [{
-      type: i0.Input,
-      args: [{
-        isSignal: true,
-        alias: "disabled",
-        required: false
-      }]
-    }],
-    focusTarget: [{
-      type: i0.Input,
-      args: [{
-        isSignal: true,
-        alias: "focusTarget",
-        required: false
+    _cells: [{
+      type: i0.ContentChildren,
+      args: [i0.forwardRef(() => GRID_CELL), {
+        ...{
+          descendants: true
+        },
+        isSignal: true
       }]
     }],
-    onActivate: [{
-      type: i0.Output,
-      args: ["onActivate"]
-    }],
-    onDeactivate: [{
-      type: i0.Output,
-      args: ["onDeactivate"]
-    }],
-    tabindex: [{
+    rowIndex: [{
       type: i0.Input,
       args: [{
         isSignal: true,
-        alias: "tabindex",
+        alias: "rowIndex",
         required: false
       }]
     }]