@clr/angular 12.0.14 → 12.1.1

package/bundles/clr-angular.umd.js

@@ -6478,7 +6478,7 @@
     ClrPasswordContainer.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-password-container',
-                    template: "\n    <ng-content select=\"label\"></ng-content>\n    <label *ngIf=\"!label && addGrid()\"></label>\n    <div class=\"clr-control-container\" [ngClass]=\"controlClass()\">\n      <div class=\"clr-input-wrapper\">\n        <div class=\"clr-input-group\" [class.clr-focus]=\"focus\">\n          <ng-content select=\"[clrPassword]\"></ng-content>\n          <button\n            *ngIf=\"clrToggle\"\n            (click)=\"toggle()\"\n            [disabled]=\"control?.disabled\"\n            class=\"clr-input-group-icon-action\"\n            type=\"button\"\n          >\n            <cds-icon\n              status=\"info\"\n              [attr.shape]=\"show ? 'eye-hide' : 'eye'\"\n              [attr.title]=\"show ? commonStrings.keys.hide : commonStrings.keys.show\"\n            ></cds-icon>\n            <span class=\"clr-sr-only\">{{\n              show ? commonStrings.keys.passwordHide : commonStrings.keys.passwordShow\n            }}</span>\n          </button>\n        </div>\n        <cds-icon\n          *ngIf=\"showInvalid\"\n          class=\"clr-validate-icon\"\n          status=\"danger\"\n          shape=\"exclamation-circle\"\n          aria-hidden=\"true\"\n        ></cds-icon>\n        <cds-icon\n          *ngIf=\"showValid\"\n          class=\"clr-validate-icon\"\n          shape=\"check-circle\"\n          status=\"success\"\n          aria-hidden=\"true\"\n        ></cds-icon>\n      </div>\n      <ng-content select=\"clr-control-helper\" *ngIf=\"showHelper\"></ng-content>\n      <ng-content select=\"clr-control-error\" *ngIf=\"showInvalid\"></ng-content>\n      <ng-content select=\"clr-control-success\" *ngIf=\"showValid\"></ng-content>\n    </div>\n  ",
+                    template: "\n    <ng-content select=\"label\"></ng-content>\n    <label *ngIf=\"!label && addGrid()\"></label>\n    <div class=\"clr-control-container\" [ngClass]=\"controlClass()\">\n      <div class=\"clr-input-wrapper\">\n        <div class=\"clr-input-group\" [class.clr-focus]=\"focus\">\n          <ng-content select=\"[clrPassword]\"></ng-content>\n          <button\n            *ngIf=\"clrToggle\"\n            (click)=\"toggle()\"\n            [disabled]=\"control?.disabled\"\n            class=\"clr-input-group-icon-action\"\n            type=\"button\"\n          >\n            <cds-icon status=\"info\" [attr.shape]=\"show ? 'eye-hide' : 'eye'\"></cds-icon>\n            <span class=\"clr-sr-only\">{{\n              show ? commonStrings.keys.passwordHide : commonStrings.keys.passwordShow\n            }}</span>\n          </button>\n        </div>\n        <cds-icon\n          *ngIf=\"showInvalid\"\n          class=\"clr-validate-icon\"\n          status=\"danger\"\n          shape=\"exclamation-circle\"\n          aria-hidden=\"true\"\n        ></cds-icon>\n        <cds-icon\n          *ngIf=\"showValid\"\n          class=\"clr-validate-icon\"\n          shape=\"check-circle\"\n          status=\"success\"\n          aria-hidden=\"true\"\n        ></cds-icon>\n      </div>\n      <ng-content select=\"clr-control-helper\" *ngIf=\"showHelper\"></ng-content>\n      <ng-content select=\"clr-control-error\" *ngIf=\"showInvalid\"></ng-content>\n      <ng-content select=\"clr-control-success\" *ngIf=\"showValid\"></ng-content>\n    </div>\n  ",
                     host: {
                         '[class.clr-form-control]': 'true',
                         '[class.clr-form-control-disabled]': 'control?.disabled',
@@ -8360,7 +8360,7 @@
     ClrCombobox.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-combobox',
-                    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<!-- The (click) handler is needed to auto-focus on input field which can not currently occupy the whole\n     width of the component, after being wrapped to a new line -->\n<div\n  class=\"clr-combobox-wrapper\"\n  clrPopoverAnchor\n  (click)=\"focusInput()\"\n  [class.multi]=\"multiSelect\"\n  [class.invalid]=\"invalid\"\n>\n  <span\n    *ngIf=\"multiSelect && optionSelectionService.selectionModel.model\"\n    role=\"grid\"\n    clrRovingTabindex\n    [clrRovingTabindexDisabled]=\"control?.disabled\"\n    clrDirection=\"both\"\n    [attr.aria-label]=\"getSelectionAriaLabel()\"\n    [attr.aria-disabled]=\"control?.disabled? true: null\"\n  >\n    <span *ngFor=\"let item of multiSelectModel; let i = index\" class=\"label label-combobox-pill\" role=\"row\">\n      <span role=\"gridcell\">\n        <span class=\"clr-combobox-pill-content\" clrKeyFocusItem>\n          <ng-container\n            *ngIf=\"optionSelected\"\n            [ngTemplateOutlet]=\"optionSelected.template\"\n            [ngTemplateOutletContext]=\"{$implicit: optionSelectionService.selectionModel.model[i]}\"\n          >\n          </ng-container>\n        </span>\n      </span>\n      <span role=\"gridcell\">\n        <button\n          clrKeyFocusItem\n          type=\"button\"\n          class=\"clr-combobox-remove-btn\"\n          [disabled]=\"control?.disabled? true: null\"\n          [attr.aria-label]=\"commonStrings.keys.comboboxDelete + ' ' + optionSelectionService.selectionModel.toString(displayField, i)\"\n          (click)=\"unselect(item)\"\n        >\n          <cds-icon shape=\"window-close\" size=\"12\"></cds-icon>\n        </button>\n      </span>\n    </span>\n  </span>\n\n  <span class=\"clr-combobox-input-wrapper\">\n    <input\n      #textboxInput\n      type=\"text\"\n      [id]=\"inputId()\"\n      role=\"combobox\"\n      class=\"clr-input clr-combobox-input\"\n      [(ngModel)]=\"searchText\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      [attr.aria-expanded]=\"openState\"\n      [attr.aria-owns]=\"ariaOwns\"\n      aria-haspopup=\"listbox\"\n      aria-autocomplete=\"list\"\n      autocomplete=\"off\"\n      [attr.aria-invalid]=\"control?.invalid? true: null\"\n      [disabled]=\"control?.disabled? true: null\"\n      [attr.aria-activedescendant]=\"getActiveDescendant()\"\n      [attr.placeholder]=\"placeholder\"\n      aria-multiline=\"false\"\n    />\n  </span>\n\n  <!-- No click handler, as it uses the handler on the .clr-combobox-wrapper -->\n  <button\n    clrPopoverOpenCloseButton\n    #trigger\n    type=\"button\"\n    class=\"clr-combobox-trigger\"\n    tabindex=\"-1\"\n    [disabled]=\"control?.disabled || null\"\n    [attr.aria-label]=\"commonStrings.keys.comboboxOpen\"\n  >\n    <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n  </button>\n\n  <div class=\"clr-focus-indicator\" [class.clr-focus]=\"focused\"></div>\n</div>\n\n<!-- Both close handlers are handled manually due to issues in Edge browser.\n     Additionally 'outsideClickToClose' has complex handling that's necessary\n     to be manual due to the component architecture -->\n<div role=\"dialog\" *clrPopoverContent=\"openState at smartPosition; outsideClickToClose: false; scrollToClose: false\">\n  <ng-content></ng-content>\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<!-- The (click) handler is needed to auto-focus on input field which can not currently occupy the whole\n     width of the component, after being wrapped to a new line -->\n<div\n  class=\"clr-combobox-wrapper\"\n  clrPopoverAnchor\n  (click)=\"focusInput()\"\n  [class.multi]=\"multiSelect\"\n  [class.invalid]=\"invalid\"\n>\n  <span\n    *ngIf=\"multiSelect && optionSelectionService.selectionModel.model\"\n    role=\"grid\"\n    clrRovingTabindex\n    [clrRovingTabindexDisabled]=\"control?.disabled\"\n    clrDirection=\"both\"\n    [attr.aria-label]=\"getSelectionAriaLabel()\"\n    [attr.aria-disabled]=\"control?.disabled? true: null\"\n  >\n    <span *ngFor=\"let item of multiSelectModel; let i = index\" class=\"label label-combobox-pill\" role=\"row\">\n      <span role=\"gridcell\">\n        <span class=\"clr-combobox-pill-content\" clrKeyFocusItem>\n          <ng-container\n            *ngIf=\"optionSelected\"\n            [ngTemplateOutlet]=\"optionSelected.template\"\n            [ngTemplateOutletContext]=\"{$implicit: optionSelectionService.selectionModel.model[i]}\"\n          >\n          </ng-container>\n        </span>\n      </span>\n      <span role=\"gridcell\">\n        <button\n          clrKeyFocusItem\n          type=\"button\"\n          class=\"clr-combobox-remove-btn\"\n          [disabled]=\"control?.disabled? true: null\"\n          [attr.aria-label]=\"commonStrings.keys.comboboxDelete + ' ' + optionSelectionService.selectionModel.toString(displayField, i)\"\n          (click)=\"unselect(item)\"\n        >\n          <cds-icon shape=\"window-close\" size=\"12\"></cds-icon>\n        </button>\n      </span>\n    </span>\n  </span>\n\n  <span class=\"clr-combobox-input-wrapper\" role=\"combobox\">\n    <input\n      #textboxInput\n      type=\"text\"\n      [id]=\"inputId()\"\n      class=\"clr-input clr-combobox-input\"\n      [(ngModel)]=\"searchText\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      [attr.aria-expanded]=\"openState\"\n      [attr.aria-owns]=\"ariaOwns\"\n      aria-haspopup=\"listbox\"\n      aria-autocomplete=\"list\"\n      autocomplete=\"off\"\n      [attr.aria-invalid]=\"control?.invalid? true: null\"\n      [disabled]=\"control?.disabled? true: null\"\n      [attr.aria-activedescendant]=\"getActiveDescendant()\"\n      [attr.placeholder]=\"placeholder\"\n    />\n  </span>\n\n  <!-- No click handler, as it uses the handler on the .clr-combobox-wrapper -->\n  <button\n    clrPopoverOpenCloseButton\n    #trigger\n    type=\"button\"\n    class=\"clr-combobox-trigger\"\n    tabindex=\"-1\"\n    [disabled]=\"control?.disabled || null\"\n    [attr.aria-label]=\"commonStrings.keys.comboboxOpen\"\n  >\n    <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n  </button>\n\n  <div class=\"clr-focus-indicator\" [class.clr-focus]=\"focused\"></div>\n</div>\n\n<!-- Both close handlers are handled manually due to issues in Edge browser.\n     Additionally 'outsideClickToClose' has complex handling that's necessary\n     to be manual due to the component architecture -->\n<div role=\"dialog\" *clrPopoverContent=\"openState at smartPosition; outsideClickToClose: false; scrollToClose: false\">\n  <ng-content></ng-content>\n</div>\n",
                     providers: [
                         ClrPopoverToggleService,
                         { provide: POPOVER_HOST_ANCHOR, useExisting: i0.ElementRef },
@@ -12584,7 +12584,7 @@
     ClrDatagridPlaceholder.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-dg-placeholder',
-                    template: "\n    <div class=\"datagrid-placeholder\" [class.datagrid-empty]=\"emptyDatagrid\" role=\"row\">\n      <div class=\"datagrid-placeholder-image\" *ngIf=\"emptyDatagrid\"></div>\n      <span role=\"gridcell\"><ng-content *ngIf=\"emptyDatagrid\"></ng-content></span>\n    </div>\n  ",
+                    template: "\n    <div class=\"datagrid-placeholder\" [class.datagrid-empty]=\"emptyDatagrid\" role=\"row\">\n      <div class=\"datagrid-placeholder-image\" *ngIf=\"emptyDatagrid\"></div>\n      <span role=\"gridcell\" class=\"datagrid-placeholder-content\"><ng-content *ngIf=\"emptyDatagrid\"></ng-content></span>\n    </div>\n  ",
                     host: { '[class.datagrid-placeholder-container]': 'true' }
                 },] }
     ];
@@ -13880,13 +13880,201 @@
         { type: i0.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) {
+        var 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));
+    }
+    var KeyNavigationGridController = /** @class */ (function () {
+        function KeyNavigationGridController(zone) {
+            this.zone = zone;
+            this.listenersAdded = false;
+            this.destroy$ = new rxjs.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]',
+            };
+        }
+        Object.defineProperty(KeyNavigationGridController.prototype, "grid", {
+            get: function () {
+                var _a;
+                return (_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelector(this.config.keyGrid);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(KeyNavigationGridController.prototype, "rows", {
+            get: function () {
+                var _a;
+                return (_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.config.keyGridRows);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(KeyNavigationGridController.prototype, "cells", {
+            get: function () {
+                var _a;
+                return (_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.config.keyGridCells);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        KeyNavigationGridController.prototype.ngOnDestroy = function () {
+            this.destroy$.next();
+            this.destroy$.complete();
+        };
+        KeyNavigationGridController.prototype.addListeners = function () {
+            var _this = this;
+            if (this.listenersAdded) {
+                return;
+            }
+            this.zone.runOutsideAngular(function () {
+                rxjs.fromEvent(_this.grid, 'mousedown')
+                    .pipe(operators.takeUntil(_this.destroy$))
+                    .subscribe(function (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) {
+                        var activeCell = _this.cells
+                            ? Array.from(_this.cells).find(function (c) { return c === e.target || c === e.target.closest(_this.config.keyGridCells); })
+                            : null;
+                        if (activeCell) {
+                            _this.setActiveCell(activeCell);
+                        }
+                    }
+                });
+                rxjs.fromEvent(_this.grid, 'keydown')
+                    .pipe(operators.takeUntil(_this.destroy$))
+                    .subscribe(function (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') {
+                        var _b = _this.getNextItemCoordinate(e), x = _b.x, y = _b.y;
+                        var activeItem = _this.rows
+                            ? Array.from(_this.rows[y].querySelectorAll(_this.config.keyGridCells))[x]
+                            : null;
+                        if (activeItem) {
+                            _this.setActiveCell(activeItem);
+                        }
+                        e.preventDefault();
+                    }
+                });
+            });
+            this.listenersAdded = true;
+        };
+        KeyNavigationGridController.prototype.initializeKeyGrid = function (host) {
+            this.host = host;
+            this.addListeners();
+            this.resetKeyGrid();
+        };
+        KeyNavigationGridController.prototype.resetKeyGrid = function () {
+            var _a;
+            (_a = this.cells) === null || _a === void 0 ? void 0 : _a.forEach(function (i) { return i.setAttribute('tabindex', '-1'); });
+            var firstCell = this.cells ? this.cells[0] : null;
+            firstCell === null || firstCell === void 0 ? void 0 : firstCell.setAttribute('tabindex', '0');
+        };
+        KeyNavigationGridController.prototype.setActiveCell = function (activeCell) {
+            var prior = this.cells ? Array.from(this.cells).find(function (c) { return c.getAttribute('tabindex') === '0'; }) : null;
+            if (prior) {
+                prior.setAttribute('tabindex', '-1');
+            }
+            activeCell.setAttribute('tabindex', '0');
+            var items = getTabableItems(activeCell);
+            var item = activeCell.getAttribute('role') !== 'columnheader' && items[0] ? items[0] : activeCell;
+            item.focus();
+        };
+        KeyNavigationGridController.prototype.getNextItemCoordinate = function (e) {
+            var _a;
+            var currentCell = this.cells ? Array.from(this.cells).find(function (i) { return i.getAttribute('tabindex') === '0'; }) : null;
+            if (e.code === 'Tab') {
+                currentCell = document.activeElement;
+            }
+            var currentRow = this.rows && currentCell ? Array.from(this.rows).find(function (r) { return r.contains(currentCell); }) : null;
+            var numOfRows = this.rows ? this.rows.length - 1 : 0;
+            var numOfColumns = this.cells ? this.cells.length / this.rows.length - 1 : 0;
+            var x = currentRow && currentCell
+                ? Array.from(currentRow.querySelectorAll(this.config.keyGridCells)).indexOf(currentCell)
+                : 0;
+            var y = currentRow && currentCell && this.rows ? Array.from(this.rows).indexOf(currentRow) : 0;
+            var dir = this.host.dir;
+            var inlineStart = dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+            var inlineEnd = dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
+            var 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: x, y: y };
+        };
+        return KeyNavigationGridController;
+    }());
+    KeyNavigationGridController.decorators = [
+        { type: i0.Injectable }
+    ];
+    KeyNavigationGridController.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.
      */
     var ClrDatagrid = /** @class */ (function () {
-        function ClrDatagrid(organizer, items, expandableRows, selection, rowActionService, stateProvider, displayMode, renderer, detailService, datagridId, el, page, commonStrings) {
+        function ClrDatagrid(organizer, items, expandableRows, selection, rowActionService, stateProvider, displayMode, renderer, detailService, datagridId, el, page, commonStrings, columnsService, keyNavigation) {
             this.organizer = organizer;
             this.items = items;
             this.expandableRows = expandableRows;
@@ -13899,6 +14087,8 @@
             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;
             /**
@@ -14050,6 +14240,7 @@
          */
         ClrDatagrid.prototype.ngAfterViewInit = function () {
             var _this = this;
+            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(function (state) { return _this.refresh.emit(state); }), this.selection.change.subscribe(function (s) {
@@ -14059,11 +14250,16 @@
                 else if (_this.selection.selectionType === SelectionType.Multi) {
                     _this.selectedChanged.emit(s);
                 }
-            }), this.page.change.subscribe(function () {
+            }), 
+            // Reinitialize arrow key navigation on page changes
+            this.page.change.subscribe(function () {
+                _this.keyNavigation.resetKeyGrid();
                 if (!_this.clrDgDisablePageFocus) {
                     _this.datagridTable.nativeElement.focus();
                 }
             }), 
+            // Reinitialize arrow key navigation on hide/unhide columns
+            rxjs.combineLatest(this.columnsService.columns).subscribe(function () { 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(function (viewChange) {
                 // Remove any projected columns from the projectedDisplayColumns container
@@ -14115,7 +14311,7 @@
     ClrDatagrid.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-datagrid',
-                    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",
                     providers: [
                         Selection,
                         Sort,
@@ -14132,6 +14328,7 @@
                         TableSizeService,
                         ColumnsService,
                         DisplayModeService,
+                        KeyNavigationGridController,
                     ],
                     host: {
                         '[class.datagrid-host]': 'true',
@@ -14152,7 +14349,9 @@
         { type: String, decorators: [{ type: i0.Inject, args: [UNIQUE_ID,] }] },
         { type: i0.ElementRef },
         { type: Page },
-        { type: ClrCommonStringsService }
+        { type: ClrCommonStringsService },
+        { type: ColumnsService },
+        { type: KeyNavigationGridController }
     ]; };
     ClrDatagrid.propDecorators = {
         loading: [{ type: i0.Input, args: ['clrDgLoading',] }],
@@ -19685,7 +19884,6 @@
     var createCdsCloseButton = function (document, ariaLabel) {
         var cdsCloseButton = document.createElement('cds-internal-close-button');
         cdsCloseButton.setAttribute('icon-size', '32');
-        console.log(ariaLabel);
         cdsCloseButton.setAttribute('aria-label', ariaLabel);
         cdsCloseButton.setAttribute('aria-hidden', 'true');
         cdsCloseButton.setAttribute('type', 'button');
@@ -19823,7 +20021,7 @@
                 if (current === navHost) {
                     return;
                 }
-                else if (current.classList.contains('nav-link')) {
+                else if (current.classList.contains('nav-link') && this._document.body.clientWidth < LARGE_BREAKPOINT) {
                     this.close();
                     return;
                 }
@@ -26488,50 +26686,51 @@
     exports["ɵd"] = FOCUS_TRAP_DIRECTIVES;
     exports["ɵda"] = ColumnsService;
     exports["ɵdb"] = DisplayModeService;
-    exports["ɵdc"] = DatagridFilterRegistrar;
-    exports["ɵdd"] = CustomFilter;
-    exports["ɵde"] = DatagridIfExpandService;
-    exports["ɵdf"] = SignpostFocusManager;
-    exports["ɵdg"] = SignpostIdService;
-    exports["ɵdh"] = ColumnResizerService;
-    exports["ɵdi"] = COLUMN_STATE;
-    exports["ɵdj"] = columnStateFactory;
-    exports["ɵdk"] = COLUMN_STATE_PROVIDER;
-    exports["ɵdm"] = WillyWonka;
-    exports["ɵdn"] = OompaLoompa;
-    exports["ɵdo"] = StackControl;
-    exports["ɵdp"] = TreeFeaturesService;
-    exports["ɵdq"] = treeFeaturesFactory;
-    exports["ɵdr"] = TREE_FEATURES_PROVIDER;
-    exports["ɵds"] = TreeFocusManagerService;
-    exports["ɵdt"] = RecursiveChildren;
-    exports["ɵdu"] = ScrollingService;
-    exports["ɵdv"] = ButtonInGroupService;
-    exports["ɵdw"] = ResponsiveNavigationService;
-    exports["ɵdy"] = FocusTrap;
-    exports["ɵdz"] = ClrTemplateRefModule;
+    exports["ɵdc"] = KeyNavigationGridController;
+    exports["ɵdd"] = DatagridFilterRegistrar;
+    exports["ɵde"] = CustomFilter;
+    exports["ɵdf"] = DatagridIfExpandService;
+    exports["ɵdg"] = SignpostFocusManager;
+    exports["ɵdh"] = SignpostIdService;
+    exports["ɵdi"] = ColumnResizerService;
+    exports["ɵdj"] = COLUMN_STATE;
+    exports["ɵdk"] = columnStateFactory;
+    exports["ɵdl"] = COLUMN_STATE_PROVIDER;
+    exports["ɵdn"] = WillyWonka;
+    exports["ɵdo"] = OompaLoompa;
+    exports["ɵdp"] = StackControl;
+    exports["ɵdq"] = TreeFeaturesService;
+    exports["ɵdr"] = treeFeaturesFactory;
+    exports["ɵds"] = TREE_FEATURES_PROVIDER;
+    exports["ɵdt"] = TreeFocusManagerService;
+    exports["ɵdu"] = RecursiveChildren;
+    exports["ɵdv"] = ScrollingService;
+    exports["ɵdw"] = ButtonInGroupService;
+    exports["ɵdx"] = ResponsiveNavigationService;
+    exports["ɵdz"] = FocusTrap;
     exports["ɵe"] = RootDropdownService;
-    exports["ɵea"] = TEMPLATE_REF_DIRECTIVES;
-    exports["ɵeb"] = TemplateRefContainer;
-    exports["ɵec"] = TabsService;
-    exports["ɵed"] = TABS_ID;
-    exports["ɵee"] = tokenFactory;
-    exports["ɵef"] = TABS_ID_PROVIDER;
-    exports["ɵeg"] = VerticalNavService;
-    exports["ɵeh"] = VerticalNavIconService;
-    exports["ɵei"] = VerticalNavGroupRegistrationService;
-    exports["ɵej"] = VerticalNavGroupService;
-    exports["ɵek"] = TooltipIdService;
-    exports["ɵel"] = WizardNavigationService;
-    exports["ɵem"] = PageCollectionService;
-    exports["ɵen"] = ButtonHubService;
-    exports["ɵeo"] = HeaderActionService;
-    exports["ɵep"] = AccordionService;
-    exports["ɵeq"] = panelAnimation;
-    exports["ɵer"] = stepAnimation;
-    exports["ɵes"] = defaultAnimationTiming;
-    exports["ɵet"] = StepperService;
-    exports["ɵeu"] = TimelineIconAttributeService;
+    exports["ɵea"] = ClrTemplateRefModule;
+    exports["ɵeb"] = TEMPLATE_REF_DIRECTIVES;
+    exports["ɵec"] = TemplateRefContainer;
+    exports["ɵed"] = TabsService;
+    exports["ɵee"] = TABS_ID;
+    exports["ɵef"] = tokenFactory;
+    exports["ɵeg"] = TABS_ID_PROVIDER;
+    exports["ɵeh"] = VerticalNavService;
+    exports["ɵei"] = VerticalNavIconService;
+    exports["ɵej"] = VerticalNavGroupRegistrationService;
+    exports["ɵek"] = VerticalNavGroupService;
+    exports["ɵel"] = TooltipIdService;
+    exports["ɵem"] = WizardNavigationService;
+    exports["ɵen"] = PageCollectionService;
+    exports["ɵeo"] = ButtonHubService;
+    exports["ɵep"] = HeaderActionService;
+    exports["ɵeq"] = AccordionService;
+    exports["ɵer"] = panelAnimation;
+    exports["ɵes"] = stepAnimation;
+    exports["ɵet"] = defaultAnimationTiming;
+    exports["ɵeu"] = StepperService;
+    exports["ɵev"] = TimelineIconAttributeService;
     exports["ɵf"] = clrRootDropdownFactory;
     exports["ɵg"] = ROOT_DROPDOWN_PROVIDER;
     exports["ɵh"] = POPOVER_HOST_ANCHOR;