@clr/angular 13.2.1 → 13.3.0

package/esm2020/data/datagrid/utils/key-navigation-grid.controller.mjs

@@ -0,0 +1,172 @@
+/*
+ * 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.
+ */
+import { Injectable } from '@angular/core';
+import { fromEvent, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import * as i0 from "@angular/core";
+export 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));
+}
+export 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 }]; } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2V5LW5hdmlnYXRpb24tZ3JpZC5jb250cm9sbGVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci9zcmMvZGF0YS9kYXRhZ3JpZC91dGlscy9rZXktbmF2aWdhdGlvbi1ncmlkLmNvbnRyb2xsZXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7R0FJRztBQUVILE9BQU8sRUFBRSxVQUFVLEVBQXFCLE1BQU0sZUFBZSxDQUFDO0FBQzlELE9BQU8sRUFBRSxTQUFTLEVBQUUsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQzFDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7QUFFM0MsTUFBTSxVQUFVLGVBQWUsQ0FBQyxFQUFlO0lBQzdDLE1BQU0sZUFBZSxHQUFHO1FBQ3RCLFNBQVM7UUFDVCxZQUFZO1FBQ1osdUJBQXVCO1FBQ3ZCLHdCQUF3QjtRQUN4Qix3QkFBd0I7UUFDeEIsMEJBQTBCO1FBQzFCLFFBQVE7UUFDUixRQUFRO1FBQ1IsT0FBTztRQUNQLGFBQWE7UUFDYix5QkFBeUI7UUFDekIsK0JBQStCO0tBQ2hDLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQ1osT0FBTyxLQUFLLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxnQkFBZ0IsQ0FBQyxlQUFlLENBQUMsQ0FBa0IsQ0FBQztBQUMzRSxDQUFDO0FBU0QsTUFBTSxPQUFPLDJCQUEyQjtJQTBCdEMsWUFBb0IsSUFBWTtRQUFaLFNBQUksR0FBSixJQUFJLENBQVE7UUFYeEIsbUJBQWMsR0FBRyxLQUFLLENBQUM7UUFJdkIsYUFBUSxHQUFHLElBQUksT0FBTyxFQUFFLENBQUM7UUFRL0IsSUFBSSxDQUFDLE1BQU0sR0FBRztZQUNaLFdBQVcsRUFBRSx1Q0FBdUM7WUFDcEQsWUFBWSxFQUNWLDhMQUE4TDtZQUNoTSxPQUFPLEVBQUUsYUFBYTtTQUN2QixDQUFDO0lBQ0osQ0FB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LENBQUM7U0FDakQ7YUFBTSxJQUFJLENBQUMsQ0FBQyxJQUFJLEtBQUssVUFBVSxFQUFFO1lBQ2hDLENBQUMsR0FBRyxDQUFDLEdBQUcsWUFBWSxHQUFHLFNBQVMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxHQUFHLFlBQVksQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDO1NBQ2pFO1FBRUQsT0FBTyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQztJQUNsQixDQUFDOzt3SEF0S1UsMkJBQTJCOzRIQUEzQiwyQkFBMkI7MkZBQTNCLDJCQUEyQjtrQkFEdkMsVUFBVSIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTYtMjAyMiBWTXdhcmUsIEluYy4gQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqIFRoaXMgc29mdHdhcmUgaXMgcmVsZWFzZWQgdW5kZXIgTUlUIGxpY2Vuc2UuXG4gKiBUaGUgZnVsbCBsaWNlbnNlIGluZm9ybWF0aW9uIGNhbiBiZSBmb3VuZCBpbiBMSUNFTlNFIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHByb2plY3QuXG4gKi9cblxuaW1wb3J0IHsgSW5qZWN0YWJsZSwgTmdab25lLCBPbkRlc3Ryb3kgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IGZyb21FdmVudCwgU3ViamVjdCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgdGFrZVVudGlsIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuXG5leHBvcnQgZnVuY3Rpb24gZ2V0VGFiYWJsZUl0ZW1zKGVsOiBIVE1MRWxlbWVudCkge1xuICBjb25zdCB0YWJhYmxlU2VsZWN0b3IgPSBbXG4gICAgJ2FbaHJlZl0nLFxuICAgICdhcmVhW2hyZWZdJyxcbiAgICAnaW5wdXQ6bm90KFtkaXNhYmxlZF0pJyxcbiAgICAnYnV0dG9uOm5vdChbZGlzYWJsZWRdKScsXG4gICAgJ3NlbGVjdDpub3QoW2Rpc2FibGVkXSknLFxuICAgICd0ZXh0YXJlYTpub3QoW2Rpc2FibGVkXSknLFxuICAgICdpZnJhbWUnLFxuICAgICdvYmplY3QnLFxuICAgICdlbWJlZCcsXG4gICAgJypbdGFiaW5kZXhdJyxcbiAgICAnKltjb250ZW50ZWRpdGFibGU9dHJ1ZV0nLFxuICAgICdbcm9sZT1idXR0b25dOm5vdChbZGlzYWJsZWRdKScsXG4gIF0uam9pbignLCcpO1xuICByZXR1cm4gQXJyYXkuZnJvbShlbC5xdWVyeVNlbGVjdG9yQWxsKHRhYmFibGVTZWxlY3RvcikpIGFzIEhUTUxFbGVtZW50W107XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgS2V5TmF2aWdhdGlvbkdyaWRDb25maWcge1xuICBrZXlHcmlkOiBzdHJpbmc7XG4gIGtleUdyaWRSb3dzOiBzdHJpbmc7XG4gIGtleUdyaWRDZWxsczogc3RyaW5nO1xufVxuXG5ASW5qZWN0YWJsZSgpXG5leHBvcnQgY2xhc3MgS2V5TmF2aWdhdGlvbkdyaWRDb250cm9sbGVyIGltcGxlbWVudHMgT25EZXN0cm95IHtcbiAgcHJpdmF0ZSBnZXQgZ3JpZCgpIHtcbiAgICByZXR1cm4gdGhpcy5ob3N0Py5xdWVyeVNlbGVjdG9yKHRoaXMuY29uZmlnLmtleUdyaWQpO1xuICB9XG5cbiAgcHJpdmF0ZSBnZXQgcm93cygpIHtcbiAgICByZXR1cm4gdGhpcy5ob3N0Py5xdWVyeVNlbGVjdG9yQWxsKHRoaXMuY29uZmlnLmtleUdyaWRSb3dzKSBhcyBOb2RlTGlzdE9mPEhUTUxFbGVtZW50PjtcbiAgfVxuXG4gIHByaXZhdGUgZ2V0IGNlbGxzKCkge1xuICAgIHJldHVybiB0aGlzLmhvc3Q/LnF1ZXJ5U2VsZWN0b3JBbGwodGhpcy5jb25maWcua2V5R3JpZENlbGxzKSBhcyBOb2RlTGlzdE9mPEhUTUxFbGVtZW50PjtcbiAgfVxuXG4gIHByaXZhdGUgY29uZmlnOiBLZXlOYXZpZ2F0aW9uR3JpZENvbmZpZztcblxuICBwcml2YXRlIGxpc3RlbmVyc0FkZGVkID0gZmFsc2U7XG5cbiAgcHJpdmF0ZSBob3N0OiBIVE1MRWxlbWVudDtcblxuICBwcml2YXRlIGRlc3Ryb3kkID0gbmV3IFN1YmplY3QoKTtcblxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICB0aGlzLmRlc3Ryb3kkLm5leHQoKTtcbiAgICB0aGlzLmRlc3Ryb3kkLmNvbXBsZXRlKCk7XG4gIH1cblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHpvbmU6IE5nWm9uZSkge1xuICAgIHRoaXMuY29uZmlnID0ge1xuICAgICAga2V5R3JpZFJvd3M6ICdbcm9sZT1yb3ddOm5vdCguZGF0YWdyaWQtcGxhY2Vob2xkZXIpJyxcbiAgICAgIGtleUdyaWRDZWxsczpcbiAgICAgICAgJ1tyb2xlPWdyaWRjZWxsXTpub3QoLmRhdGFncmlkLWhpZGRlbi1jb2x1bW4pOm5vdCguZGF0YWdyaWQtcGxhY2Vob2xkZXItY29udGVudCksIFtyb2xlPWNvbHVtbmhlYWRlcl06bm90KC5kYXRhZ3JpZC1oaWRkZW4tY29sdW1uKTpub3QoLmRhdGFncmlkLXBsYWNlaG9sZGVyLWNvbnRlbnQpLCAuZGF0YWdyaWQtZGV0YWlsLWNhcmV0JyxcbiAgICAgIGtleUdyaWQ6ICdbcm9sZT1ncmlkXScsXG4gICAgfTtcbiAgfVxuXG4gIGFkZExpc3RlbmVycygpIHtcbiAgICBpZiAodGhpcy5saXN0ZW5lcnNBZGRlZCkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIHRoaXMuem9uZS5ydW5PdXRzaWRlQW5ndWxhcigoKSA9PiB7XG4gICAgICBmcm9tRXZlbnQodGhpcy5ncmlkLCAnbW91c2Vkb3duJylcbiAgICAgICAgLnBpcGUodGFrZVVudGlsKHRoaXMuZGVzdHJveSQpKVxuICAgICAgICAuc3Vic2NyaWJlKChlOiBNb3VzZUV2ZW50KSA9PiB7XG4gICAgICAgICAgLy8gcHJlc2VydmUgcmlnaHQgY2xpY2sgZm9yIGNvbnRleHQgbWVudXMgJiBrZXlib2FyZCBtb3VzZSBjb250cm9sIGh0dHBzOi8vYXBwbGUuc3RhY2tleGNoYW5nZS5jb20vcXVlc3Rpb25zLzMyNzE1L2hvdy1kby1pLW9wZW4tdGhlLWNvbnRleHQtbWVudS1mcm9tLWEtbWFjLWtleWJvYXJkXG4gICAgICAgICAgaWYgKGUuYnV0dG9ucyA9PT0gMSAmJiAhZS5jdHJsS2V5KSB7XG4gICAgICAgICAgICBjb25zdCBhY3RpdmVDZWxsID0gdGhpcy5jZWxsc1xuICAgICAgICAgICAgICA/IEFycmF5LmZyb20odGhpcy5jZWxscykuZmluZChcbiAgICAgICAgICAgICAgICAgIGMgPT4gYyA9PT0gZS50YXJnZXQgfHwgYyA9PT0gKGUudGFyZ2V0IGFzIEhUTUxFbGVtZW50KS5jbG9zZXN0KHRoaXMuY29uZmlnLmtleUdyaWRDZWxscylcbiAgICAgICAgICAgICAgICApXG4gICAgICAgICAgICAgIDogbnVsbDtcbiAgICAgICAgICAgIGlmIChhY3RpdmVDZWxsKSB7XG4gICAgICAgICAgICAgIHRoaXMuc2V0QWN0aXZlQ2VsbChhY3RpdmVDZWxsKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICB9XG4gICAgICAgIH0pO1xuXG4gICAgICBmcm9tRXZlbnQodGhpcy5ncmlkLCAna2V5ZG93bicpXG4gICAgICAgIC5waXBlKHRha2VVbnRpbCh0aGlzLmRlc3Ryb3kkKSlcbiAgICAgICAgLnN1YnNjcmliZSgoZTogS2V5Ym9hcmRFdmVudCkgPT4ge1xuICAgICAgICAgIC8vIFNraXAgY29sdW1uIHJlc2l6ZSBldmVudHNcbiAgICAgICAgICBpZiAoXG4gICAgICAgICAgICAoZS50YXJnZXQgYXMgSFRNTEVsZW1lbnQpLmNsYXNzTGlzdC5jb250YWlucygnZHJhZy1oYW5kbGUnKSAmJlxuICAgICAgICAgICAgKGUuY29kZSA9PT0gJ0Fycm93TGVmdCcgfHwgZS5jb2RlID09PSAnQXJyb3dSaWdodCcpXG4gICAgICAgICAgKSB7XG4gICAgICAgICAgICByZXR1cm47XG4gICAgICAgICAgfVxuICAgICAgICAgIGlmIChcbiAgICAgICAgICAgIGUuY29kZSA9PT0gJ0Fycm93VXAnIHx8XG4gICAgICAgICAgICBlLmNvZGUgPT09ICdBcnJvd0Rvd24nIHx8XG4gICAgICAgICAgICBlLmNvZGUgPT09ICdBcnJvd0xlZnQnIHx8XG4gICAgICAgICAgICBlLmNvZGUgPT09ICdBcnJvd1JpZ2h0JyB8fFxuICAgICAgICAgICAgZS5jb2RlID09PSAnRW5kJyB8fFxuICAgICAgICAgICAgZS5jb2RlID09PSAnSG9tZScgfHxcbiAgICAgICAgICAgIGUuY29kZSA9PT0gJ1BhZ2VVcCcgfHxcbiAgICAgICAgICAgIGUuY29kZSA9PT0gJ1BhZ2VEb3duJ1xuICAgICAgICAgICkge1xuICAgICAgICAgICAgY29uc3QgeyB4LCB5IH0gPSB0aGlzLmdldE5leHRJdGVtQ29vcmRpbmF0ZShlKTtcbiAgICAgICAgICAgIGNvbnN0IGFjdGl2ZUl0ZW0gPSB0aGlzLnJvd3NcbiAgICAgICAgICAgICAgPyAoQXJyYXkuZnJvbSh0aGlzLnJvd3NbeV0ucXVlcnlTZWxlY3RvckFsbCh0aGlzLmNvbmZpZy5rZXlHcmlkQ2VsbHMpKVt4XSBhcyBIVE1MRWxlbWVudClcbiAgICAgICAgICAgICAgOiBudWxsO1xuICAgICAgICAgICAgaWYgKGFjdGl2ZUl0ZW0pIHtcbiAgICAgICAgICAgICAgdGhpcy5zZXRBY3RpdmVDZWxsKGFjdGl2ZUl0ZW0pO1xuICAgICAgICAgICAgfVxuICAgICAgICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgICAgIH1cbiAgICAgICAgfSk7XG4gICAgfSk7XG4gICAgdGhpcy5saXN0ZW5lcnNBZGRlZCA9IHRydWU7XG4gIH1cblxuICBpbml0aWFsaXplS2V5R3JpZChob3N0OiBIVE1MRWxlbWVudCkge1xuICAgIHRoaXMuaG9zdCA9IGhvc3Q7XG4gICAgdGhpcy5hZGRMaXN0ZW5lcnMoKTtcbiAgICB0aGlzLnJlc2V0S2V5R3JpZCgpO1xuICB9XG5cbiAgcmVzZXRLZXlHcmlkKCkge1xuICAgIHRoaXMuY2VsbHM/LmZvckVhY2goKGk6IEhUTUxFbGVtZW50KSA9PiBpLnNldEF0dHJpYnV0ZSgndGFiaW5kZXgnLCAnLTEnKSk7XG4gICAgY29uc3QgZmlyc3RDZWxsID0gdGhpcy5jZWxscyA/IHRoaXMuY2VsbHNbMF0gOiBudWxsO1xuICAgIGZpcnN0Q2VsbD8uc2V0QXR0cmlidXRlKCd0YWJpbmRleCcsICcwJyk7XG4gIH1cblxuICBwcml2YXRlIHNldEFjdGl2ZUNlbGwoYWN0aXZlQ2VsbDogSFRNTEVsZW1lbnQpIHtcbiAgICBjb25zdCBwcmlvciA9IHRoaXMuY2VsbHMgPyBBcnJheS5mcm9tKHRoaXMuY2VsbHMpLmZpbmQoYyA9PiBjLmdldEF0dHJpYnV0ZSgndGFiaW5kZXgnKSA9PT0gJzAnKSA6IG51bGw7XG5cbiAgICBpZiAocHJpb3IpIHtcbiAgICAgIHByaW9yLnNldEF0dHJpYnV0ZSgndGFiaW5kZXgnLCAnLTEnKTtcbiAgICB9XG5cbiAgICBhY3RpdmVDZWxsLnNldEF0dHJpYnV0ZSgndGFiaW5kZXgnLCAnMCcpO1xuXG4gICAgY29uc3QgaXRlbXMgPSBnZXRUYWJhYmxlSXRlbXMoYWN0aXZlQ2VsbCk7XG4gICAgY29uc3QgaXRlbSA9IGFjdGl2ZUNlbGwuZ2V0QXR0cmlidXRlKCdyb2xlJykgIT09ICdjb2x1bW5oZWFkZXInICYmIGl0ZW1zWzBdID8gaXRlbXNbMF0gOiBhY3RpdmVDZWxsO1xuICAgIGl0ZW0uZm9jdXMoKTtcbiAgfVxuXG4gIHByaXZhdGUgZ2V0TmV4dEl0ZW1Db29yZGluYXRlKGU6IGFueSkge1xuICAgIGxldCBjdXJyZW50Q2VsbCA9IHRoaXMuY2VsbHMgPyBBcnJheS5mcm9tKHRoaXMuY2VsbHMpLmZpbmQoaSA9PiBpLmdldEF0dHJpYnV0ZSgndGFiaW5kZXgnKSA9PT0gJzAnKSA6IG51bGw7XG4gICAgaWYgKGUuY29kZSA9PT0gJ1RhYicpIHtcbiAgICAgIGN1cnJlbnRDZWxsID0gZG9jdW1lbnQuYWN0aXZlRWxlbWVudCBhcyBIVE1MRWxlbWVudDtcbiAgICB9XG4gICAgY29uc3QgY3VycmVudFJvdyA9IHRoaXMucm93cyAmJiBjdXJyZW50Q2VsbCA/IEFycmF5LmZyb20odGhpcy5yb3dzKS5maW5kKHIgPT4gci5jb250YWlucyhjdXJyZW50Q2VsbCkpIDogbnVsbDtcbiAgICBjb25zdCBudW1PZlJvd3MgPSB0aGlzLnJvd3MgPyB0aGlzLnJvd3MubGVuZ3RoIC0gMSA6IDA7XG4gICAgY29uc3QgbnVtT2ZDb2x1bW5zID0gdGhpcy5jZWxscyA/IHRoaXMuY2VsbHMubGVuZ3RoIC8gdGhpcy5yb3dzLmxlbmd0aCAtIDEgOiAwO1xuXG4gICAgbGV0IHggPVxuICAgICAgY3VycmVudFJvdyAmJiBjdXJyZW50Q2VsbFxuICAgICAgICA/IEFycmF5LmZyb20oY3VycmVudFJvdy5xdWVyeVNlbGVjdG9yQWxsKHRoaXMuY29uZmlnLmtleUdyaWRDZWxscykpLmluZGV4T2YoY3VycmVudENlbGwpXG4gICAgICAgIDogMDtcbiAgICBsZXQgeSA9IGN1cnJlbnRSb3cgJiYgY3VycmVudENlbGwgJiYgdGhpcy5yb3dzID8gQXJyYXkuZnJvbSh0aGlzLnJvd3MpLmluZGV4T2YoY3VycmVudFJvdykgOiAwO1xuXG4gICAgY29uc3QgZGlyID0gdGhpcy5ob3N0LmRpcjtcbiAgICBjb25zdCBpbmxpbmVTdGFydCA9IGRpciA9PT0gJ3J0bCcgPyAnQXJyb3dSaWdodCcgOiAnQXJyb3dMZWZ0JztcbiAgICBjb25zdCBpbmxpbmVFbmQgPSBkaXIgPT09ICdydGwnID8gJ0Fycm93TGVmdCcgOiAnQXJyb3dSaWdodCc7XG5cbiAgICBjb25zdCBpdGVtc1BlclBhZ2UgPVxuICAgICAgTWF0aC5mbG9vcih0aGlzLmhvc3Q/LnF1ZXJ5U2VsZWN0b3IoJy5kYXRhZ3JpZCcpLmNsaWVudEhlaWdodCAvIHRoaXMucm93c1swXS5jbGllbnRIZWlnaHQpIC0gMSB8fCAwO1xuXG4gICAgaWYgKGUuY29kZSA9PT0gJ0Fycm93VXAnICYmIHkgIT09IDApIHtcbiAgICAgIHkgPSB5IC0gMTtcbiAgICB9IGVsc2UgaWYgKGUuY29kZSA9PT0gJ0Fycm93RG93bicgJiYgeSA8IG51bU9mUm93cykge1xuICAgICAgeSA9IHkgKyAxO1xuICAgIH0gZWxzZSBpZiAoZS5jb2RlID09PSBpbmxpbmVTdGFydCAmJiB4ICE9PSAwKSB7XG4gICAgICB4ID0geCAtIDE7XG4gICAgfSBlbHNlIGlmIChlLmNvZGUgPT09IGlubGluZUVuZCAmJiB4IDwgbnVtT2ZDb2x1bW5zKSB7XG4gICAgICB4ID0geCArIDE7XG4gICAgfSBlbHNlIGlmIChlLmNvZGUgPT09ICdFbmQnKSB7XG4gICAgICB4ID0gbnVtT2ZDb2x1bW5zO1xuXG4gICAgICBpZiAoZS5jdHJsS2V5KSB7XG4gICAgICAgIHkgPSBudW1PZlJvd3M7XG4gICAgICB9XG4gICAgfSBlbHNlIGlmIChlLmNvZGUgPT09ICdIb21lJykge1xuICAgICAgeCA9IDA7XG5cbiAgICAgIGlmIChlLmN0cmxLZXkpIHtcbiAgICAgICAgeSA9IDA7XG4gICAgICB9XG4gICAgfSBlbHNlIGlmIChlLmNvZGUgPT09ICdQYWdlVXAnKSB7XG4gICAgICB5ID0geSAtIGl0ZW1zUGVyUGFnZSA+IDAgPyB5IC0gaXRlbXNQZXJQYWdlIDogMDtcbiAgICB9IGVsc2UgaWYgKGUuY29kZSA9PT0gJ1BhZ2VEb3duJykge1xuICAgICAgeSA9IHkgKyBpdGVtc1BlclBhZ2UgPCBudW1PZlJvd3MgPyB5ICsgaXRlbXNQZXJQYWdlIDogbnVtT2ZSb3dzO1xuICAgIH1cblxuICAgIHJldHVybiB7IHgsIHkgfTtcbiAgfVxufVxuIl19

package/fesm2015/clr-angular.mjs

@@ -13203,7 +13203,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: [{
@@ -13213,7 +13213,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' },
@@ -14363,13 +14363,186 @@ 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() {
+        var _a;
+        return (_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelector(this.config.keyGrid);
+    }
+    get rows() {
+        var _a;
+        return (_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.config.keyGridRows);
+    }
+    get cells() {
+        var _a;
+        return (_a = this.host) === null || _a === void 0 ? void 0 : _a.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() {
+        var _a;
+        (_a = this.cells) === null || _a === void 0 ? void 0 : _a.forEach((i) => i.setAttribute('tabindex', '-1'));
+        const firstCell = this.cells ? this.cells[0] : null;
+        firstCell === null || firstCell === void 0 ? void 0 : 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) {
+        var _a;
+        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(((_a = this.host) === null || _a === void 0 ? void 0 : _a.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;
@@ -14382,6 +14555,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;
         /**
@@ -14507,6 +14682,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 => {
@@ -14516,11 +14692,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(() => { var _a; return (_a = this.keyNavigation) === null || _a === void 0 ? void 0 : _a.resetKeyGrid(); }), 
         // A subscription that listens for displayMode changes on the datagrid
         this.displayMode.view.subscribe(viewChange => {
             // Remove any projected columns from the projectedDisplayColumns container
@@ -14568,7 +14749,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,
@@ -14585,7 +14766,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: [
@@ -14604,15 +14786,16 @@ 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 }];
+                    }] }, { type: i0.ElementRef }, { type: Page }, { type: ClrCommonStringsService }, { type: ColumnsService }, { type: KeyNavigationGridController }];
     }, propDecorators: { loading: [{
                 type: Input,
                 args: ['clrDgLoading']