@clr/angular 13.2.1 → 13.3.0

package/fesm2020/clr-angular.mjs

@@ -13100,7 +13100,7 @@ ClrDatagridPlaceholder.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", v
 ClrDatagridPlaceholder.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrDatagridPlaceholder, selector: "clr-dg-placeholder", host: { properties: { "class.datagrid-placeholder-container": "true" } }, ngImport: i0, template: `
     <div class="datagrid-placeholder" [class.datagrid-empty]="emptyDatagrid" role="row">
       <div class="datagrid-placeholder-image" *ngIf="emptyDatagrid"></div>
-      <span role="gridcell"><ng-content *ngIf="emptyDatagrid"></ng-content></span>
+      <span role="gridcell" class="datagrid-placeholder-content"><ng-content *ngIf="emptyDatagrid"></ng-content></span>
     </div>
   `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrDatagridPlaceholder, decorators: [{
@@ -13110,7 +13110,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                     template: `
     <div class="datagrid-placeholder" [class.datagrid-empty]="emptyDatagrid" role="row">
       <div class="datagrid-placeholder-image" *ngIf="emptyDatagrid"></div>
-      <span role="gridcell"><ng-content *ngIf="emptyDatagrid"></ng-content></span>
+      <span role="gridcell" class="datagrid-placeholder-content"><ng-content *ngIf="emptyDatagrid"></ng-content></span>
     </div>
   `,
                     host: { '[class.datagrid-placeholder-container]': 'true' },
@@ -14258,13 +14258,181 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Injectable
         }] });
 
+/*
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+function getTabableItems(el) {
+    const tabableSelector = [
+        'a[href]',
+        'area[href]',
+        'input:not([disabled])',
+        'button:not([disabled])',
+        'select:not([disabled])',
+        'textarea:not([disabled])',
+        'iframe',
+        'object',
+        'embed',
+        '*[tabindex]',
+        '*[contenteditable=true]',
+        '[role=button]:not([disabled])',
+    ].join(',');
+    return Array.from(el.querySelectorAll(tabableSelector));
+}
+class KeyNavigationGridController {
+    constructor(zone) {
+        this.zone = zone;
+        this.listenersAdded = false;
+        this.destroy$ = new Subject();
+        this.config = {
+            keyGridRows: '[role=row]:not(.datagrid-placeholder)',
+            keyGridCells: '[role=gridcell]:not(.datagrid-hidden-column):not(.datagrid-placeholder-content), [role=columnheader]:not(.datagrid-hidden-column):not(.datagrid-placeholder-content), .datagrid-detail-caret',
+            keyGrid: '[role=grid]',
+        };
+    }
+    get grid() {
+        return this.host?.querySelector(this.config.keyGrid);
+    }
+    get rows() {
+        return this.host?.querySelectorAll(this.config.keyGridRows);
+    }
+    get cells() {
+        return this.host?.querySelectorAll(this.config.keyGridCells);
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    addListeners() {
+        if (this.listenersAdded) {
+            return;
+        }
+        this.zone.runOutsideAngular(() => {
+            fromEvent(this.grid, 'mousedown')
+                .pipe(takeUntil(this.destroy$))
+                .subscribe((e) => {
+                // preserve right click for context menus & keyboard mouse control https://apple.stackexchange.com/questions/32715/how-do-i-open-the-context-menu-from-a-mac-keyboard
+                if (e.buttons === 1 && !e.ctrlKey) {
+                    const activeCell = this.cells
+                        ? Array.from(this.cells).find(c => c === e.target || c === e.target.closest(this.config.keyGridCells))
+                        : null;
+                    if (activeCell) {
+                        this.setActiveCell(activeCell);
+                    }
+                }
+            });
+            fromEvent(this.grid, 'keydown')
+                .pipe(takeUntil(this.destroy$))
+                .subscribe((e) => {
+                // Skip column resize events
+                if (e.target.classList.contains('drag-handle') &&
+                    (e.code === 'ArrowLeft' || e.code === 'ArrowRight')) {
+                    return;
+                }
+                if (e.code === 'ArrowUp' ||
+                    e.code === 'ArrowDown' ||
+                    e.code === 'ArrowLeft' ||
+                    e.code === 'ArrowRight' ||
+                    e.code === 'End' ||
+                    e.code === 'Home' ||
+                    e.code === 'PageUp' ||
+                    e.code === 'PageDown') {
+                    const { x, y } = this.getNextItemCoordinate(e);
+                    const activeItem = this.rows
+                        ? Array.from(this.rows[y].querySelectorAll(this.config.keyGridCells))[x]
+                        : null;
+                    if (activeItem) {
+                        this.setActiveCell(activeItem);
+                    }
+                    e.preventDefault();
+                }
+            });
+        });
+        this.listenersAdded = true;
+    }
+    initializeKeyGrid(host) {
+        this.host = host;
+        this.addListeners();
+        this.resetKeyGrid();
+    }
+    resetKeyGrid() {
+        this.cells?.forEach((i) => i.setAttribute('tabindex', '-1'));
+        const firstCell = this.cells ? this.cells[0] : null;
+        firstCell?.setAttribute('tabindex', '0');
+    }
+    setActiveCell(activeCell) {
+        const prior = this.cells ? Array.from(this.cells).find(c => c.getAttribute('tabindex') === '0') : null;
+        if (prior) {
+            prior.setAttribute('tabindex', '-1');
+        }
+        activeCell.setAttribute('tabindex', '0');
+        const items = getTabableItems(activeCell);
+        const item = activeCell.getAttribute('role') !== 'columnheader' && items[0] ? items[0] : activeCell;
+        item.focus();
+    }
+    getNextItemCoordinate(e) {
+        let currentCell = this.cells ? Array.from(this.cells).find(i => i.getAttribute('tabindex') === '0') : null;
+        if (e.code === 'Tab') {
+            currentCell = document.activeElement;
+        }
+        const currentRow = this.rows && currentCell ? Array.from(this.rows).find(r => r.contains(currentCell)) : null;
+        const numOfRows = this.rows ? this.rows.length - 1 : 0;
+        const numOfColumns = this.cells ? this.cells.length / this.rows.length - 1 : 0;
+        let x = currentRow && currentCell
+            ? Array.from(currentRow.querySelectorAll(this.config.keyGridCells)).indexOf(currentCell)
+            : 0;
+        let y = currentRow && currentCell && this.rows ? Array.from(this.rows).indexOf(currentRow) : 0;
+        const dir = this.host.dir;
+        const inlineStart = dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+        const inlineEnd = dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
+        const itemsPerPage = Math.floor(this.host?.querySelector('.datagrid').clientHeight / this.rows[0].clientHeight) - 1 || 0;
+        if (e.code === 'ArrowUp' && y !== 0) {
+            y = y - 1;
+        }
+        else if (e.code === 'ArrowDown' && y < numOfRows) {
+            y = y + 1;
+        }
+        else if (e.code === inlineStart && x !== 0) {
+            x = x - 1;
+        }
+        else if (e.code === inlineEnd && x < numOfColumns) {
+            x = x + 1;
+        }
+        else if (e.code === 'End') {
+            x = numOfColumns;
+            if (e.ctrlKey) {
+                y = numOfRows;
+            }
+        }
+        else if (e.code === 'Home') {
+            x = 0;
+            if (e.ctrlKey) {
+                y = 0;
+            }
+        }
+        else if (e.code === 'PageUp') {
+            y = y - itemsPerPage > 0 ? y - itemsPerPage : 0;
+        }
+        else if (e.code === 'PageDown') {
+            y = y + itemsPerPage < numOfRows ? y + itemsPerPage : numOfRows;
+        }
+        return { x, y };
+    }
+}
+KeyNavigationGridController.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: KeyNavigationGridController, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+KeyNavigationGridController.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: KeyNavigationGridController });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: KeyNavigationGridController, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
+
 /*
  * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrDatagrid {
-    constructor(organizer, items, expandableRows, selection, rowActionService, stateProvider, displayMode, renderer, detailService, datagridId, el, page, commonStrings) {
+    constructor(organizer, items, expandableRows, selection, rowActionService, stateProvider, displayMode, renderer, detailService, datagridId, el, page, commonStrings, columnsService, keyNavigation) {
         this.organizer = organizer;
         this.items = items;
         this.expandableRows = expandableRows;
@@ -14277,6 +14445,8 @@ class ClrDatagrid {
         this.el = el;
         this.page = page;
         this.commonStrings = commonStrings;
+        this.columnsService = columnsService;
+        this.keyNavigation = keyNavigation;
         /* reference to the enum so that template can access */
         this.SELECTION_TYPE = SelectionType;
         /**
@@ -14402,6 +14572,7 @@ class ClrDatagrid {
      * Our setup happens in the view of some of our components, so we wait for it to be done before starting
      */
     ngAfterViewInit() {
+        this.keyNavigation.initializeKeyGrid(this.el.nativeElement);
         // TODO: determine if we can get rid of provider wiring in view init so that subscriptions can be done earlier
         this.refresh.emit(this.stateProvider.state);
         this._subscriptions.push(this.stateProvider.change.subscribe(state => this.refresh.emit(state)), this.selection.change.subscribe(s => {
@@ -14411,11 +14582,16 @@ class ClrDatagrid {
             else if (this.selection.selectionType === SelectionType.Multi) {
                 this.selectedChanged.emit(s);
             }
-        }), this.page.change.subscribe(() => {
+        }), 
+        // Reinitialize arrow key navigation on page changes
+        this.page.change.subscribe(() => {
+            this.keyNavigation.resetKeyGrid();
             if (!this.clrDgDisablePageFocus) {
                 this.datagridTable.nativeElement.focus();
             }
         }), 
+        // Reinitialize arrow key navigation on hide/unhide columns
+        combineLatest(this.columnsService.columns).subscribe(() => this.keyNavigation?.resetKeyGrid()), 
         // A subscription that listens for displayMode changes on the datagrid
         this.displayMode.view.subscribe(viewChange => {
             // Remove any projected columns from the projectedDisplayColumns container
@@ -14463,7 +14639,7 @@ class ClrDatagrid {
         this.organizer.resize();
     }
 }
-ClrDatagrid.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrDatagrid, deps: [{ token: DatagridRenderOrganizer }, { token: Items }, { token: ExpandableRowsCount }, { token: Selection }, { token: RowActionService }, { token: StateProvider }, { token: DisplayModeService }, { token: i0.Renderer2 }, { token: DetailService }, { token: UNIQUE_ID }, { token: i0.ElementRef }, { token: Page }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
+ClrDatagrid.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrDatagrid, deps: [{ token: DatagridRenderOrganizer }, { token: Items }, { token: ExpandableRowsCount }, { token: Selection }, { token: RowActionService }, { token: StateProvider }, { token: DisplayModeService }, { token: i0.Renderer2 }, { token: DetailService }, { token: UNIQUE_ID }, { token: i0.ElementRef }, { token: Page }, { token: ClrCommonStringsService }, { token: ColumnsService }, { token: KeyNavigationGridController }], target: i0.ɵɵFactoryTarget.Component });
 ClrDatagrid.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrDatagrid, selector: "clr-datagrid", inputs: { loading: ["clrDgLoading", "loading"], selected: ["clrDgSelected", "selected"], singleSelected: ["clrDgSingleSelected", "singleSelected"], clrDgSingleSelectionAriaLabel: "clrDgSingleSelectionAriaLabel", clrDgSingleActionableAriaLabel: "clrDgSingleActionableAriaLabel", clrDetailExpandableAriaLabel: "clrDetailExpandableAriaLabel", clrDgDisablePageFocus: "clrDgDisablePageFocus", clrDgPreserveSelection: "clrDgPreserveSelection", rowSelectionMode: ["clrDgRowSelection", "rowSelectionMode"] }, outputs: { refresh: "clrDgRefresh", selectedChanged: "clrDgSelectedChange", singleSelectedChanged: "clrDgSingleSelectedChange" }, host: { properties: { "class.datagrid-host": "true", "class.datagrid-detail-open": "detailService.isOpen" } }, providers: [
         Selection,
         Sort,
@@ -14480,7 +14656,8 @@ ClrDatagrid.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "
         TableSizeService,
         ColumnsService,
         DisplayModeService,
-    ], queries: [{ propertyName: "iterator", first: true, predicate: ClrDatagridItems, descendants: true }, { propertyName: "placeholder", first: true, predicate: ClrDatagridPlaceholder, descendants: true }, { propertyName: "columns", predicate: ClrDatagridColumn }, { propertyName: "rows", predicate: ClrDatagridRow }], viewQueries: [{ propertyName: "scrollableColumns", first: true, predicate: ["scrollableColumns"], descendants: true, read: ViewContainerRef }, { propertyName: "datagridTable", first: true, predicate: ["datagridTable"], descendants: true, read: ElementRef }, { propertyName: "_projectedDisplayColumns", first: true, predicate: ["projectedDisplayColumns"], descendants: true, read: ViewContainerRef }, { propertyName: "_projectedCalculationColumns", first: true, predicate: ["projectedCalculationColumns"], descendants: true, read: ViewContainerRef }, { propertyName: "_displayedRows", first: true, predicate: ["displayedRows"], descendants: true, read: ViewContainerRef }, { propertyName: "_calculationRows", first: true, predicate: ["calculationRows"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<ng-content select=\"clr-dg-action-bar\"></ng-content>\n<div class=\"datagrid-outer-wrapper\">\n  <div class=\"datagrid-inner-wrapper\">\n    <div class=\"datagrid\" #datagrid [attr.aria-hidden]=\"detailService.isOpen ? true : null\">\n      <div class=\"datagrid-table-wrapper\">\n        <div role=\"grid\" class=\"datagrid-table\" tabindex=\"-1\" #datagridTable>\n          <div role=\"rowgroup\" class=\"datagrid-header\">\n            <div role=\"row\" class=\"datagrid-row\">\n              <div class=\"datagrid-row-master datagrid-row-flex\">\n                <div class=\"datagrid-row-sticky\">\n                  <!--header for datagrid where you can select multiple rows -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n                    *ngIf=\"selection.selectionType === SELECTION_TYPE.Multi\"\n                  >\n                    <div class=\"clr-checkbox-wrapper\">\n                      <input\n                        type=\"checkbox\"\n                        [id]=\"selectAllId\"\n                        [(ngModel)]=\"allSelected\"\n                        [attr.aria-label]=\"commonStrings.keys.selectAll\"\n                      />\n                      <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a datagrid is wrapped inside clrForm -->\n                      <label [for]=\"selectAllId\" class=\"clr-control-label clr-col-null\">\n                        <span class=\"clr-sr-only\">{{commonStrings.keys.selectAll}}</span>\n                      </label>\n                    </div>\n\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for datagrid where you can select one row only -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n                    *ngIf=\"selection.selectionType === SELECTION_TYPE.Single\"\n                    [attr.aria-label]=\"clrDgSingleSelectionAriaLabel\"\n                  >\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for single row action; only displayType if we have at least one actionable row in datagrid -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-row-actions datagrid-fixed-column\"\n                    *ngIf=\"rowActionService.hasActionableRow\"\n                    [attr.aria-label]=\"clrDgSingleActionableAriaLabel\"\n                  >\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for carets; only displayType if we have at least one expandable row in datagrid -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-expandable-caret datagrid-fixed-column\"\n                    *ngIf=\"expandableRows.hasExpandableRow || detailService.enabled\"\n                    [attr.aria-label]=\"clrDetailExpandableAriaLabel\"\n                  >\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                </div>\n                <div class=\"datagrid-row-scrollable\">\n                  <ng-container #projectedDisplayColumns></ng-container>\n                </div>\n              </div>\n            </div>\n          </div>\n          <ng-container #displayedRows></ng-container>\n          <!-- Custom placeholder overrides the default empty one -->\n          <ng-content select=\"clr-dg-placeholder\"></ng-content>\n          <clr-dg-placeholder *ngIf=\"!placeholder\"></clr-dg-placeholder>\n        </div>\n      </div>\n    </div>\n    <ng-content select=\"clr-dg-footer\"></ng-content>\n    <div class=\"datagrid-spinner\" *ngIf=\"loading\">\n      <clr-spinner clrMedium>Loading</clr-spinner>\n    </div>\n  </div>\n  <ng-content select=\"[clrIfDetail],clr-dg-detail\"></ng-content>\n</div>\n\n<div class=\"datagrid-calculation-table\">\n  <div class=\"datagrid-calculation-header\">\n    <ng-container #projectedCalculationColumns></ng-container>\n  </div>\n  <ng-container #calculationRows></ng-container>\n</div>\n", components: [{ type: ClrDatagridPlaceholder, selector: "clr-dg-placeholder" }, { type: ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }] });
+        KeyNavigationGridController,
+    ], queries: [{ propertyName: "iterator", first: true, predicate: ClrDatagridItems, descendants: true }, { propertyName: "placeholder", first: true, predicate: ClrDatagridPlaceholder, descendants: true }, { propertyName: "columns", predicate: ClrDatagridColumn }, { propertyName: "rows", predicate: ClrDatagridRow }], viewQueries: [{ propertyName: "scrollableColumns", first: true, predicate: ["scrollableColumns"], descendants: true, read: ViewContainerRef }, { propertyName: "datagridTable", first: true, predicate: ["datagridTable"], descendants: true, read: ElementRef }, { propertyName: "_projectedDisplayColumns", first: true, predicate: ["projectedDisplayColumns"], descendants: true, read: ViewContainerRef }, { propertyName: "_projectedCalculationColumns", first: true, predicate: ["projectedCalculationColumns"], descendants: true, read: ViewContainerRef }, { propertyName: "_displayedRows", first: true, predicate: ["displayedRows"], descendants: true, read: ViewContainerRef }, { propertyName: "_calculationRows", first: true, predicate: ["calculationRows"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<ng-content select=\"clr-dg-action-bar\"></ng-content>\n<div class=\"datagrid-outer-wrapper\">\n  <div class=\"datagrid-inner-wrapper\">\n    <div class=\"datagrid\" #datagrid [attr.aria-hidden]=\"detailService.isOpen ? true : null\">\n      <div class=\"datagrid-table-wrapper\">\n        <div role=\"grid\" class=\"datagrid-table\" tabindex=\"-1\" #datagridTable>\n          <div role=\"rowgroup\" class=\"datagrid-header\">\n            <div role=\"row\" class=\"datagrid-row\">\n              <div class=\"datagrid-row-master datagrid-row-flex\">\n                <div class=\"datagrid-row-sticky\">\n                  <!--header for datagrid where you can select multiple rows -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n                    *ngIf=\"selection.selectionType === SELECTION_TYPE.Multi\"\n                    (keydown.space)=\"allSelected = !allSelected; $event.preventDefault()\"\n                  >\n                    <div class=\"clr-checkbox-wrapper\">\n                      <!-- We need to move focus and space-key handling to the parent because of keyboard arrow key navigation,\n                           which is not able to transfer focus directly on the input when focused with the tab key -->\n                      <input\n                        type=\"checkbox\"\n                        [id]=\"selectAllId\"\n                        [(ngModel)]=\"allSelected\"\n                        [attr.aria-label]=\"commonStrings.keys.selectAll\"\n                        tabindex=\"-1\"\n                      />\n                      <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a datagrid is wrapped inside clrForm -->\n                      <label [for]=\"selectAllId\" class=\"clr-control-label clr-col-null\">\n                        <span class=\"clr-sr-only\">{{commonStrings.keys.selectAll}}</span>\n                      </label>\n                    </div>\n\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for datagrid where you can select one row only -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n                    *ngIf=\"selection.selectionType === SELECTION_TYPE.Single\"\n                    [attr.aria-label]=\"clrDgSingleSelectionAriaLabel\"\n                  >\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for single row action; only displayType if we have at least one actionable row in datagrid -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-row-actions datagrid-fixed-column\"\n                    *ngIf=\"rowActionService.hasActionableRow\"\n                    [attr.aria-label]=\"clrDgSingleActionableAriaLabel\"\n                  >\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for carets; only displayType if we have at least one expandable row in datagrid -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-expandable-caret datagrid-fixed-column\"\n                    *ngIf=\"expandableRows.hasExpandableRow || detailService.enabled\"\n                    [attr.aria-label]=\"clrDetailExpandableAriaLabel\"\n                  >\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                </div>\n                <div class=\"datagrid-row-scrollable\">\n                  <ng-container #projectedDisplayColumns></ng-container>\n                </div>\n              </div>\n            </div>\n          </div>\n          <ng-container #displayedRows></ng-container>\n          <!-- Custom placeholder overrides the default empty one -->\n          <ng-content select=\"clr-dg-placeholder\"></ng-content>\n          <clr-dg-placeholder *ngIf=\"!placeholder\"></clr-dg-placeholder>\n        </div>\n      </div>\n    </div>\n    <ng-content select=\"clr-dg-footer\"></ng-content>\n    <div class=\"datagrid-spinner\" *ngIf=\"loading\">\n      <clr-spinner clrMedium>Loading</clr-spinner>\n    </div>\n  </div>\n  <ng-content select=\"[clrIfDetail],clr-dg-detail\"></ng-content>\n</div>\n\n<div class=\"datagrid-calculation-table\">\n  <div class=\"datagrid-calculation-header\">\n    <ng-container #projectedCalculationColumns></ng-container>\n  </div>\n  <ng-container #calculationRows></ng-container>\n</div>\n", components: [{ type: ClrDatagridPlaceholder, selector: "clr-dg-placeholder" }, { type: ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrDatagrid, decorators: [{
             type: Component,
             args: [{ selector: 'clr-datagrid', providers: [
@@ -14499,14 +14676,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                         TableSizeService,
                         ColumnsService,
                         DisplayModeService,
+                        KeyNavigationGridController,
                     ], host: {
                         '[class.datagrid-host]': 'true',
                         '[class.datagrid-detail-open]': 'detailService.isOpen',
-                    }, template: "<!--\n  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<ng-content select=\"clr-dg-action-bar\"></ng-content>\n<div class=\"datagrid-outer-wrapper\">\n  <div class=\"datagrid-inner-wrapper\">\n    <div class=\"datagrid\" #datagrid [attr.aria-hidden]=\"detailService.isOpen ? true : null\">\n      <div class=\"datagrid-table-wrapper\">\n        <div role=\"grid\" class=\"datagrid-table\" tabindex=\"-1\" #datagridTable>\n          <div role=\"rowgroup\" class=\"datagrid-header\">\n            <div role=\"row\" class=\"datagrid-row\">\n              <div class=\"datagrid-row-master datagrid-row-flex\">\n                <div class=\"datagrid-row-sticky\">\n                  <!--header for datagrid where you can select multiple rows -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n                    *ngIf=\"selection.selectionType === SELECTION_TYPE.Multi\"\n                  >\n                    <div class=\"clr-checkbox-wrapper\">\n                      <input\n                        type=\"checkbox\"\n                        [id]=\"selectAllId\"\n                        [(ngModel)]=\"allSelected\"\n                        [attr.aria-label]=\"commonStrings.keys.selectAll\"\n                      />\n                      <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a datagrid is wrapped inside clrForm -->\n                      <label [for]=\"selectAllId\" class=\"clr-control-label clr-col-null\">\n                        <span class=\"clr-sr-only\">{{commonStrings.keys.selectAll}}</span>\n                      </label>\n                    </div>\n\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for datagrid where you can select one row only -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n                    *ngIf=\"selection.selectionType === SELECTION_TYPE.Single\"\n                    [attr.aria-label]=\"clrDgSingleSelectionAriaLabel\"\n                  >\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for single row action; only displayType if we have at least one actionable row in datagrid -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-row-actions datagrid-fixed-column\"\n                    *ngIf=\"rowActionService.hasActionableRow\"\n                    [attr.aria-label]=\"clrDgSingleActionableAriaLabel\"\n                  >\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for carets; only displayType if we have at least one expandable row in datagrid -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-expandable-caret datagrid-fixed-column\"\n                    *ngIf=\"expandableRows.hasExpandableRow || detailService.enabled\"\n                    [attr.aria-label]=\"clrDetailExpandableAriaLabel\"\n                  >\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                </div>\n                <div class=\"datagrid-row-scrollable\">\n                  <ng-container #projectedDisplayColumns></ng-container>\n                </div>\n              </div>\n            </div>\n          </div>\n          <ng-container #displayedRows></ng-container>\n          <!-- Custom placeholder overrides the default empty one -->\n          <ng-content select=\"clr-dg-placeholder\"></ng-content>\n          <clr-dg-placeholder *ngIf=\"!placeholder\"></clr-dg-placeholder>\n        </div>\n      </div>\n    </div>\n    <ng-content select=\"clr-dg-footer\"></ng-content>\n    <div class=\"datagrid-spinner\" *ngIf=\"loading\">\n      <clr-spinner clrMedium>Loading</clr-spinner>\n    </div>\n  </div>\n  <ng-content select=\"[clrIfDetail],clr-dg-detail\"></ng-content>\n</div>\n\n<div class=\"datagrid-calculation-table\">\n  <div class=\"datagrid-calculation-header\">\n    <ng-container #projectedCalculationColumns></ng-container>\n  </div>\n  <ng-container #calculationRows></ng-container>\n</div>\n" }]
+                    }, template: "<!--\n  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<ng-content select=\"clr-dg-action-bar\"></ng-content>\n<div class=\"datagrid-outer-wrapper\">\n  <div class=\"datagrid-inner-wrapper\">\n    <div class=\"datagrid\" #datagrid [attr.aria-hidden]=\"detailService.isOpen ? true : null\">\n      <div class=\"datagrid-table-wrapper\">\n        <div role=\"grid\" class=\"datagrid-table\" tabindex=\"-1\" #datagridTable>\n          <div role=\"rowgroup\" class=\"datagrid-header\">\n            <div role=\"row\" class=\"datagrid-row\">\n              <div class=\"datagrid-row-master datagrid-row-flex\">\n                <div class=\"datagrid-row-sticky\">\n                  <!--header for datagrid where you can select multiple rows -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n                    *ngIf=\"selection.selectionType === SELECTION_TYPE.Multi\"\n                    (keydown.space)=\"allSelected = !allSelected; $event.preventDefault()\"\n                  >\n                    <div class=\"clr-checkbox-wrapper\">\n                      <!-- We need to move focus and space-key handling to the parent because of keyboard arrow key navigation,\n                           which is not able to transfer focus directly on the input when focused with the tab key -->\n                      <input\n                        type=\"checkbox\"\n                        [id]=\"selectAllId\"\n                        [(ngModel)]=\"allSelected\"\n                        [attr.aria-label]=\"commonStrings.keys.selectAll\"\n                        tabindex=\"-1\"\n                      />\n                      <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a datagrid is wrapped inside clrForm -->\n                      <label [for]=\"selectAllId\" class=\"clr-control-label clr-col-null\">\n                        <span class=\"clr-sr-only\">{{commonStrings.keys.selectAll}}</span>\n                      </label>\n                    </div>\n\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for datagrid where you can select one row only -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n                    *ngIf=\"selection.selectionType === SELECTION_TYPE.Single\"\n                    [attr.aria-label]=\"clrDgSingleSelectionAriaLabel\"\n                  >\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for single row action; only displayType if we have at least one actionable row in datagrid -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-row-actions datagrid-fixed-column\"\n                    *ngIf=\"rowActionService.hasActionableRow\"\n                    [attr.aria-label]=\"clrDgSingleActionableAriaLabel\"\n                  >\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for carets; only displayType if we have at least one expandable row in datagrid -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-expandable-caret datagrid-fixed-column\"\n                    *ngIf=\"expandableRows.hasExpandableRow || detailService.enabled\"\n                    [attr.aria-label]=\"clrDetailExpandableAriaLabel\"\n                  >\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                </div>\n                <div class=\"datagrid-row-scrollable\">\n                  <ng-container #projectedDisplayColumns></ng-container>\n                </div>\n              </div>\n            </div>\n          </div>\n          <ng-container #displayedRows></ng-container>\n          <!-- Custom placeholder overrides the default empty one -->\n          <ng-content select=\"clr-dg-placeholder\"></ng-content>\n          <clr-dg-placeholder *ngIf=\"!placeholder\"></clr-dg-placeholder>\n        </div>\n      </div>\n    </div>\n    <ng-content select=\"clr-dg-footer\"></ng-content>\n    <div class=\"datagrid-spinner\" *ngIf=\"loading\">\n      <clr-spinner clrMedium>Loading</clr-spinner>\n    </div>\n  </div>\n  <ng-content select=\"[clrIfDetail],clr-dg-detail\"></ng-content>\n</div>\n\n<div class=\"datagrid-calculation-table\">\n  <div class=\"datagrid-calculation-header\">\n    <ng-container #projectedCalculationColumns></ng-container>\n  </div>\n  <ng-container #calculationRows></ng-container>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: DatagridRenderOrganizer }, { type: Items }, { type: ExpandableRowsCount }, { type: Selection }, { type: RowActionService }, { type: StateProvider }, { type: DisplayModeService }, { type: i0.Renderer2 }, { type: DetailService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [UNIQUE_ID]
-                }] }, { type: i0.ElementRef }, { type: Page }, { type: ClrCommonStringsService }]; }, propDecorators: { loading: [{
+                }] }, { type: i0.ElementRef }, { type: Page }, { type: ClrCommonStringsService }, { type: ColumnsService }, { type: KeyNavigationGridController }]; }, propDecorators: { loading: [{
                 type: Input,
                 args: ['clrDgLoading']
             }], refresh: [{