@clr/angular 12.0.14 → 12.1.1

package/fesm2015/clr-angular.js

@@ -4,7 +4,7 @@ import { ClarityIcons, ellipsisHorizontalIcon, exclamationCircleIcon, checkCircl
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT, isPlatformBrowser, getLocaleDayNames, FormStyle, TranslationWidth, getLocaleMonthNames, getLocaleFirstDayOfWeek, getLocaleDateFormat, FormatWidth, NgForOf } from '@angular/common';
 import { Subject, fromEvent, BehaviorSubject, of, ReplaySubject, isObservable, combineLatest, Observable } from 'rxjs';
-import { filter, debounceTime, first, startWith, switchMap, take, map, tap, distinctUntilChanged, pairwise } from 'rxjs/operators';
+import { filter, debounceTime, first, startWith, switchMap, take, map, takeUntil, tap, distinctUntilChanged, pairwise } from 'rxjs/operators';
 import { trigger, transition, style, animate, keyframes, state } from '@angular/animations';
 import { NgControl, FormsModule, SelectMultipleControlValueAccessor, FormControl, FormGroup, FormGroupName, NgModelGroup, FormGroupDirective, NgForm } from '@angular/forms';
 import { FocusTrapTrackerService, createId, isFocusable, isHTMLElement } from '@cds/core/internal';
@@ -5852,11 +5852,7 @@ ClrPasswordContainer.decorators = [
             class="clr-input-group-icon-action"
             type="button"
           >
-            <cds-icon
-              status="info"
-              [attr.shape]="show ? 'eye-hide' : 'eye'"
-              [attr.title]="show ? commonStrings.keys.hide : commonStrings.keys.show"
-            ></cds-icon>
+            <cds-icon status="info" [attr.shape]="show ? 'eye-hide' : 'eye'"></cds-icon>
             <span class="clr-sr-only">{{
               show ? commonStrings.keys.passwordHide : commonStrings.keys.passwordShow
             }}</span>
@@ -7802,7 +7798,7 @@ class ClrCombobox extends WrappedFormControl {
 ClrCombobox.decorators = [
     { type: 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: ElementRef },
@@ -11607,7 +11603,7 @@ ClrDatagridPlaceholder.decorators = [
                 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' }
@@ -12794,13 +12790,187 @@ ColumnsService.decorators = [
     { 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.decorators = [
+    { type: Injectable }
+];
+KeyNavigationGridController.ctorParameters = () => [
+    { type: 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;
@@ -12813,6 +12983,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;
         /**
@@ -12938,6 +13110,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 => {
@@ -12947,11 +13120,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
@@ -13002,7 +13180,7 @@ class ClrDatagrid {
 ClrDatagrid.decorators = [
     { type: 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,
@@ -13019,6 +13197,7 @@ ClrDatagrid.decorators = [
                     TableSizeService,
                     ColumnsService,
                     DisplayModeService,
+                    KeyNavigationGridController,
                 ],
                 host: {
                     '[class.datagrid-host]': 'true',
@@ -13039,7 +13218,9 @@ ClrDatagrid.ctorParameters = () => [
     { type: String, decorators: [{ type: Inject, args: [UNIQUE_ID,] }] },
     { type: ElementRef },
     { type: Page },
-    { type: ClrCommonStringsService }
+    { type: ClrCommonStringsService },
+    { type: ColumnsService },
+    { type: KeyNavigationGridController }
 ];
 ClrDatagrid.propDecorators = {
     loading: [{ type: Input, args: ['clrDgLoading',] }],
@@ -18498,7 +18679,6 @@ ClrAriaLiveService.ctorParameters = () => [
 const createCdsCloseButton = (document, ariaLabel) => {
     const 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');
@@ -18615,7 +18795,7 @@ class ClrNavLevel extends FocusTrap {
             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;
             }
@@ -24467,5 +24647,5 @@ const CLR_MENU_POSITIONS = [
  * Generated bundle index. Do not edit.
  */
 
-export { CLR_ALERT_DIRECTIVES, CLR_BUTTON_GROUP_DIRECTIVES, CLR_DATAGRID_DIRECTIVES, CLR_DATEPICKER_DIRECTIVES, CLR_DRAG_AND_DROP_DIRECTIVES, CLR_DROPDOWN_DIRECTIVES, CLR_ICON_DIRECTIVES, CLR_LAYOUT_DIRECTIVES, CLR_LOADING_BUTTON_DIRECTIVES, CLR_LOADING_DIRECTIVES, CLR_MENU_POSITIONS, CLR_MODAL_DIRECTIVES, CLR_NAVIGATION_DIRECTIVES, CLR_PROGRESS_BAR_DIRECTIVES, CLR_SIGNPOST_DIRECTIVES, CLR_SPINNER_DIRECTIVES, CLR_STACK_VIEW_DIRECTIVES, CLR_TABS_DIRECTIVES, CLR_TOOLTIP_DIRECTIVES, CLR_TREE_VIEW_DIRECTIVES, CLR_VERTICAL_NAV_DIRECTIVES, CLR_WIZARD_DIRECTIVES, CONDITIONAL_DIRECTIVES, CUSTOM_BUTTON_TYPES, CdsIconCustomTag, ClarityModule, ClrAbstractContainer, ClrAccordion, ClrAccordionContent, ClrAccordionDescription, ClrAccordionModule, ClrAccordionPanel, ClrAccordionTitle, ClrAlert, ClrAlertItem, ClrAlertModule, ClrAlertText, ClrAlerts, ClrAlertsPager, ClrAlignment, ClrAriaLivePoliteness, ClrAriaLiveService, ClrAxis, ClrButton, ClrButtonGroup, ClrButtonGroupModule, ClrButtonModule, ClrCalendar, ClrCheckbox, ClrCheckboxContainer, ClrCheckboxModule, ClrCheckboxWrapper, ClrCombobox, ClrComboboxContainer, ClrComboboxModule, ClrCommonFormsModule, ClrCommonStringsService, ClrConditionalModule, ClrControl, ClrControlContainer, ClrControlError, ClrControlHelper, ClrControlSuccess, ClrDataModule, ClrDatagrid, ClrDatagridActionBar, ClrDatagridActionOverflow, ClrDatagridCell, ClrDatagridColumn, ClrDatagridColumnSeparator, ClrDatagridColumnToggle, ClrDatagridColumnToggleButton, ClrDatagridColumnToggleTitle, ClrDatagridDetail, ClrDatagridDetailBody, ClrDatagridDetailHeader, ClrDatagridFilter, ClrDatagridFooter, ClrDatagridHideableColumn, ClrDatagridItems, ClrDatagridItemsTrackBy, ClrDatagridModule, ClrDatagridPageSize, ClrDatagridPagination, ClrDatagridPlaceholder, ClrDatagridRow, ClrDatagridRowDetail, ClrDatagridSortOrder, ClrDatalist, ClrDatalistContainer, ClrDatalistInput, ClrDatalistModule, ClrDateContainer, ClrDateInput, ClrDatepickerModule, ClrDatepickerViewManager, ClrDay, ClrDaypicker, ClrDragAndDropModule, ClrDragEvent, ClrDragHandle, ClrDraggable, ClrDraggableGhost, ClrDropdown, ClrDropdownItem, ClrDropdownMenu, ClrDropdownModule, ClrDropdownTrigger, ClrDroppable, ClrEmphasisModule, ClrExpandableAnimation, ClrFocusOnViewInit, ClrFocusOnViewInitModule, ClrForm, ClrFormLayout, ClrFormsModule, ClrHeader, ClrIconCustomTag, ClrIconModule, ClrIfActive, ClrIfDetail, ClrIfDragged, ClrIfError, ClrIfExpanded, ClrIfOpen, ClrIfSuccess, ClrInput, ClrInputContainer, ClrInputModule, ClrLabel, ClrLayout, ClrLayoutModule, ClrLoading, ClrLoadingButton, ClrLoadingButtonModule, ClrLoadingModule, ClrLoadingState, ClrMainContainer, ClrMainContainerModule, ClrModal, ClrModalBody, ClrModalModule, ClrMonthpicker, ClrNavLevel, ClrNavigationModule, ClrOption, ClrOptionItems, ClrOptionSelected, ClrOptions, ClrPassword, ClrPasswordContainer, ClrPasswordModule, ClrPopoverAnchor, ClrPopoverContent, ClrPopoverEventsService, ClrPopoverModule, ClrPopoverPositionService, ClrPopoverToggleService, ClrProgressBar, ClrProgressBarModule, ClrRadio, ClrRadioContainer, ClrRadioModule, ClrRadioWrapper, ClrRange, ClrRangeContainer, ClrRangeModule, ClrRecursiveForOf, ClrSelect, ClrSelectContainer, ClrSelectModule, ClrSelectedState, ClrSide, ClrSignpost, ClrSignpostContent, ClrSignpostModule, ClrSignpostTrigger, ClrSpinner, ClrSpinnerModule, ClrStackBlock, ClrStackContentInput, ClrStackHeader, ClrStackInput, ClrStackSelect, ClrStackView, ClrStackViewCustomTags, ClrStackViewLabel, ClrStackViewModule, ClrStepButton, ClrStepButtonType, ClrStepper, ClrStepperModule, ClrStepperPanel, ClrTab, ClrTabContent, ClrTabLink, ClrTabOverflowContent, ClrTabs, ClrTabsModule, ClrTextarea, ClrTextareaContainer, ClrTextareaModule, ClrTimeline, ClrTimelineLayout, ClrTimelineModule, ClrTimelineStep, ClrTimelineStepDescription, ClrTimelineStepHeader, ClrTimelineStepState, ClrTimelineStepTitle, ClrTooltip, ClrTooltipContent, ClrTooltipModule, ClrTooltipTrigger, ClrTree, ClrTreeNode, ClrTreeNodeLink, ClrTreeViewModule, ClrVerticalNav, ClrVerticalNavGroup, ClrVerticalNavGroupChildren, ClrVerticalNavIcon, ClrVerticalNavLink, ClrVerticalNavModule, ClrWizard, ClrWizardButton, ClrWizardCustomTags, ClrWizardHeaderAction, ClrWizardModule, ClrWizardPage, ClrWizardPageButtons, ClrWizardPageHeaderActions, ClrWizardPageNavTitle, ClrWizardPageTitle, ClrWizardStepnav, ClrWizardStepnavItem, ClrYearpicker, DEFAULT_BUTTON_TYPES, DatagridNumericFilter, DatagridPropertyComparator, DatagridPropertyNumericFilter, DatagridPropertyStringFilter, DatagridStringFilter, EXPANDABLE_ANIMATION_DIRECTIVES, FOCUS_ON_VIEW_INIT, FOCUS_ON_VIEW_INIT_DIRECTIVES, IS_TOGGLE, IS_TOGGLE_PROVIDER, LoadingListener, MainContainerWillyWonka, NavDetectionOompaLoompa, TOGGLE_SERVICE, TOGGLE_SERVICE_PROVIDER, ToggleServiceFactory, WrappedFormControl, collapse, commonStringsDefault, fade, fadeSlide, isToggleFactory, slide, AccordionOompaLoompa as ÇlrAccordionOompaLoompa, AccordionWillyWonka as ÇlrAccordionWillyWonka, ActionableOompaLoompa as ÇlrActionableOompaLoompa, ActiveOompaLoompa as ÇlrActiveOompaLoompa, ClrFocusTrapModule as ÇlrClrFocusTrapModule, ClrPopoverCloseButton as ÇlrClrPopoverCloseButton, ClrPopoverModuleNext as ÇlrClrPopoverModuleNext, ClrPopoverOpenCloseButton as ÇlrClrPopoverOpenCloseButton, DatagridCellRenderer as ÇlrDatagridCellRenderer, DatagridDetailRegisterer as ÇlrDatagridDetailRegisterer, DatagridHeaderRenderer as ÇlrDatagridHeaderRenderer, DatagridMainRenderer as ÇlrDatagridMainRenderer, DatagridRowRenderer as ÇlrDatagridRowRenderer, DatagridWillyWonka as ÇlrDatagridWillyWonka, ExpandableOompaLoompa as ÇlrExpandableOompaLoompa, FocusTrapDirective as ÇlrFocusTrapDirective, FocusTrapTracker as ÇlrFocusTrapTracker, StepperOompaLoompa as ÇlrStepperOompaLoompa, StepperWillyWonka as ÇlrStepperWillyWonka, TabsWillyWonka as ÇlrTabsWillyWonka, WrappedCell as ÇlrWrappedCell, WrappedColumn as ÇlrWrappedColumn, WrappedRow as ÇlrWrappedRow, ɵ0, domAdapterFactory as ɵa, LayoutService as ɵb, AlertIconAndTypesService as ɵba, MultiAlertService as ɵbb, ControlIdService as ɵbc, NgControlService as ɵbd, ClrAbstractControl as ɵbe, ContainerIdService as ɵbf, AbstractIfState as ɵbg, IfControlStateService as ɵbh, MarkControlService as ɵbi, ControlClassService as ɵbj, ClrHostWrappingModule as ɵbk, EmptyAnchor as ɵbl, ClrKeyFocusModule as ɵbm, ClrKeyFocus as ɵbn, ClrKeyFocusItem as ɵbo, ClrRovingTabindex as ɵbp, OptionSelectionService as ɵbq, AriaService as ɵbr, ComboboxFocusHandler as ɵbs, COMBOBOX_FOCUS_HANDLER_PROVIDER as ɵbt, ComboboxContainerService as ɵbu, DateNavigationService as ɵbv, DateFormControlService as ɵbw, LocaleHelperService as ɵbx, FocusService$1 as ɵby, DateIOService as ɵbz, FOCUS_ON_VIEW_INIT_PROVIDER as ɵc, DatepickerEnabledService as ɵca, ViewManagerService as ɵcb, DatepickerFocusService as ɵcc, DatalistIdService as ɵcd, ClrOutsideClickModule as ɵce, OUSTIDE_CLICK_DIRECTIVES as ɵcf, OutsideClick as ɵcg, ClrExpandableAnimationModule as ɵch, DomAdapter as ɵci, DragEventListenerService as ɵcj, DragAndDropEventBusService as ɵck, DragHandleRegistrarService as ɵcl, DraggableSnapshotService as ɵcm, GlobalDragModeService as ɵcn, Selection as ɵco, Items as ɵcp, FiltersProvider as ɵcq, Page as ɵcr, StateDebouncer as ɵcs, Sort as ɵct, DatagridRenderOrganizer as ɵcu, RowActionService as ɵcv, ExpandableRowsCount as ɵcw, DetailService as ɵcx, StateProvider as ɵcy, TableSizeService as ɵcz, FOCUS_TRAP_DIRECTIVES as ɵd, ColumnsService as ɵda, DisplayModeService as ɵdb, DatagridFilterRegistrar as ɵdc, CustomFilter as ɵdd, DatagridIfExpandService as ɵde, SignpostFocusManager as ɵdf, SignpostIdService as ɵdg, ColumnResizerService as ɵdh, COLUMN_STATE as ɵdi, columnStateFactory as ɵdj, COLUMN_STATE_PROVIDER as ɵdk, WillyWonka as ɵdm, OompaLoompa as ɵdn, StackControl as ɵdo, TreeFeaturesService as ɵdp, treeFeaturesFactory as ɵdq, TREE_FEATURES_PROVIDER as ɵdr, TreeFocusManagerService as ɵds, RecursiveChildren as ɵdt, ScrollingService as ɵdu, ButtonInGroupService as ɵdv, ResponsiveNavigationService as ɵdw, FocusTrap as ɵdy, ClrTemplateRefModule as ɵdz, RootDropdownService as ɵe, TEMPLATE_REF_DIRECTIVES as ɵea, TemplateRefContainer as ɵeb, TabsService as ɵec, TABS_ID as ɵed, tokenFactory as ɵee, TABS_ID_PROVIDER as ɵef, VerticalNavService as ɵeg, VerticalNavIconService as ɵeh, VerticalNavGroupRegistrationService as ɵei, VerticalNavGroupService as ɵej, TooltipIdService as ɵek, WizardNavigationService as ɵel, PageCollectionService as ɵem, ButtonHubService as ɵen, HeaderActionService as ɵeo, AccordionService as ɵep, panelAnimation as ɵeq, stepAnimation as ɵer, defaultAnimationTiming as ɵes, StepperService as ɵet, TimelineIconAttributeService as ɵeu, clrRootDropdownFactory as ɵf, ROOT_DROPDOWN_PROVIDER as ɵg, POPOVER_HOST_ANCHOR as ɵh, FocusService as ɵi, clrFocusServiceFactory as ɵj, FOCUS_SERVICE_PROVIDER as ɵk, DropdownFocusHandler as ɵl, DROPDOWN_FOCUS_HANDLER_PROVIDER as ɵm, customFocusableItemProvider as ɵn, UNIQUE_ID as ɵo, uniqueIdFactory as ɵp, UNIQUE_ID_PROVIDER as ɵq, FocusableItem as ɵr, AbstractPopover as ɵs, BasicFocusableItem as ɵt, BASIC_FOCUSABLE_ITEM_PROVIDER as ɵu, IF_ACTIVE_ID as ɵv, tokenFactory$1 as ɵw, IF_ACTIVE_ID_PROVIDER as ɵx, IfActiveService as ɵy, IfExpandService as ɵz };
+export { CLR_ALERT_DIRECTIVES, CLR_BUTTON_GROUP_DIRECTIVES, CLR_DATAGRID_DIRECTIVES, CLR_DATEPICKER_DIRECTIVES, CLR_DRAG_AND_DROP_DIRECTIVES, CLR_DROPDOWN_DIRECTIVES, CLR_ICON_DIRECTIVES, CLR_LAYOUT_DIRECTIVES, CLR_LOADING_BUTTON_DIRECTIVES, CLR_LOADING_DIRECTIVES, CLR_MENU_POSITIONS, CLR_MODAL_DIRECTIVES, CLR_NAVIGATION_DIRECTIVES, CLR_PROGRESS_BAR_DIRECTIVES, CLR_SIGNPOST_DIRECTIVES, CLR_SPINNER_DIRECTIVES, CLR_STACK_VIEW_DIRECTIVES, CLR_TABS_DIRECTIVES, CLR_TOOLTIP_DIRECTIVES, CLR_TREE_VIEW_DIRECTIVES, CLR_VERTICAL_NAV_DIRECTIVES, CLR_WIZARD_DIRECTIVES, CONDITIONAL_DIRECTIVES, CUSTOM_BUTTON_TYPES, CdsIconCustomTag, ClarityModule, ClrAbstractContainer, ClrAccordion, ClrAccordionContent, ClrAccordionDescription, ClrAccordionModule, ClrAccordionPanel, ClrAccordionTitle, ClrAlert, ClrAlertItem, ClrAlertModule, ClrAlertText, ClrAlerts, ClrAlertsPager, ClrAlignment, ClrAriaLivePoliteness, ClrAriaLiveService, ClrAxis, ClrButton, ClrButtonGroup, ClrButtonGroupModule, ClrButtonModule, ClrCalendar, ClrCheckbox, ClrCheckboxContainer, ClrCheckboxModule, ClrCheckboxWrapper, ClrCombobox, ClrComboboxContainer, ClrComboboxModule, ClrCommonFormsModule, ClrCommonStringsService, ClrConditionalModule, ClrControl, ClrControlContainer, ClrControlError, ClrControlHelper, ClrControlSuccess, ClrDataModule, ClrDatagrid, ClrDatagridActionBar, ClrDatagridActionOverflow, ClrDatagridCell, ClrDatagridColumn, ClrDatagridColumnSeparator, ClrDatagridColumnToggle, ClrDatagridColumnToggleButton, ClrDatagridColumnToggleTitle, ClrDatagridDetail, ClrDatagridDetailBody, ClrDatagridDetailHeader, ClrDatagridFilter, ClrDatagridFooter, ClrDatagridHideableColumn, ClrDatagridItems, ClrDatagridItemsTrackBy, ClrDatagridModule, ClrDatagridPageSize, ClrDatagridPagination, ClrDatagridPlaceholder, ClrDatagridRow, ClrDatagridRowDetail, ClrDatagridSortOrder, ClrDatalist, ClrDatalistContainer, ClrDatalistInput, ClrDatalistModule, ClrDateContainer, ClrDateInput, ClrDatepickerModule, ClrDatepickerViewManager, ClrDay, ClrDaypicker, ClrDragAndDropModule, ClrDragEvent, ClrDragHandle, ClrDraggable, ClrDraggableGhost, ClrDropdown, ClrDropdownItem, ClrDropdownMenu, ClrDropdownModule, ClrDropdownTrigger, ClrDroppable, ClrEmphasisModule, ClrExpandableAnimation, ClrFocusOnViewInit, ClrFocusOnViewInitModule, ClrForm, ClrFormLayout, ClrFormsModule, ClrHeader, ClrIconCustomTag, ClrIconModule, ClrIfActive, ClrIfDetail, ClrIfDragged, ClrIfError, ClrIfExpanded, ClrIfOpen, ClrIfSuccess, ClrInput, ClrInputContainer, ClrInputModule, ClrLabel, ClrLayout, ClrLayoutModule, ClrLoading, ClrLoadingButton, ClrLoadingButtonModule, ClrLoadingModule, ClrLoadingState, ClrMainContainer, ClrMainContainerModule, ClrModal, ClrModalBody, ClrModalModule, ClrMonthpicker, ClrNavLevel, ClrNavigationModule, ClrOption, ClrOptionItems, ClrOptionSelected, ClrOptions, ClrPassword, ClrPasswordContainer, ClrPasswordModule, ClrPopoverAnchor, ClrPopoverContent, ClrPopoverEventsService, ClrPopoverModule, ClrPopoverPositionService, ClrPopoverToggleService, ClrProgressBar, ClrProgressBarModule, ClrRadio, ClrRadioContainer, ClrRadioModule, ClrRadioWrapper, ClrRange, ClrRangeContainer, ClrRangeModule, ClrRecursiveForOf, ClrSelect, ClrSelectContainer, ClrSelectModule, ClrSelectedState, ClrSide, ClrSignpost, ClrSignpostContent, ClrSignpostModule, ClrSignpostTrigger, ClrSpinner, ClrSpinnerModule, ClrStackBlock, ClrStackContentInput, ClrStackHeader, ClrStackInput, ClrStackSelect, ClrStackView, ClrStackViewCustomTags, ClrStackViewLabel, ClrStackViewModule, ClrStepButton, ClrStepButtonType, ClrStepper, ClrStepperModule, ClrStepperPanel, ClrTab, ClrTabContent, ClrTabLink, ClrTabOverflowContent, ClrTabs, ClrTabsModule, ClrTextarea, ClrTextareaContainer, ClrTextareaModule, ClrTimeline, ClrTimelineLayout, ClrTimelineModule, ClrTimelineStep, ClrTimelineStepDescription, ClrTimelineStepHeader, ClrTimelineStepState, ClrTimelineStepTitle, ClrTooltip, ClrTooltipContent, ClrTooltipModule, ClrTooltipTrigger, ClrTree, ClrTreeNode, ClrTreeNodeLink, ClrTreeViewModule, ClrVerticalNav, ClrVerticalNavGroup, ClrVerticalNavGroupChildren, ClrVerticalNavIcon, ClrVerticalNavLink, ClrVerticalNavModule, ClrWizard, ClrWizardButton, ClrWizardCustomTags, ClrWizardHeaderAction, ClrWizardModule, ClrWizardPage, ClrWizardPageButtons, ClrWizardPageHeaderActions, ClrWizardPageNavTitle, ClrWizardPageTitle, ClrWizardStepnav, ClrWizardStepnavItem, ClrYearpicker, DEFAULT_BUTTON_TYPES, DatagridNumericFilter, DatagridPropertyComparator, DatagridPropertyNumericFilter, DatagridPropertyStringFilter, DatagridStringFilter, EXPANDABLE_ANIMATION_DIRECTIVES, FOCUS_ON_VIEW_INIT, FOCUS_ON_VIEW_INIT_DIRECTIVES, IS_TOGGLE, IS_TOGGLE_PROVIDER, LoadingListener, MainContainerWillyWonka, NavDetectionOompaLoompa, TOGGLE_SERVICE, TOGGLE_SERVICE_PROVIDER, ToggleServiceFactory, WrappedFormControl, collapse, commonStringsDefault, fade, fadeSlide, isToggleFactory, slide, AccordionOompaLoompa as ÇlrAccordionOompaLoompa, AccordionWillyWonka as ÇlrAccordionWillyWonka, ActionableOompaLoompa as ÇlrActionableOompaLoompa, ActiveOompaLoompa as ÇlrActiveOompaLoompa, ClrFocusTrapModule as ÇlrClrFocusTrapModule, ClrPopoverCloseButton as ÇlrClrPopoverCloseButton, ClrPopoverModuleNext as ÇlrClrPopoverModuleNext, ClrPopoverOpenCloseButton as ÇlrClrPopoverOpenCloseButton, DatagridCellRenderer as ÇlrDatagridCellRenderer, DatagridDetailRegisterer as ÇlrDatagridDetailRegisterer, DatagridHeaderRenderer as ÇlrDatagridHeaderRenderer, DatagridMainRenderer as ÇlrDatagridMainRenderer, DatagridRowRenderer as ÇlrDatagridRowRenderer, DatagridWillyWonka as ÇlrDatagridWillyWonka, ExpandableOompaLoompa as ÇlrExpandableOompaLoompa, FocusTrapDirective as ÇlrFocusTrapDirective, FocusTrapTracker as ÇlrFocusTrapTracker, StepperOompaLoompa as ÇlrStepperOompaLoompa, StepperWillyWonka as ÇlrStepperWillyWonka, TabsWillyWonka as ÇlrTabsWillyWonka, WrappedCell as ÇlrWrappedCell, WrappedColumn as ÇlrWrappedColumn, WrappedRow as ÇlrWrappedRow, ɵ0, domAdapterFactory as ɵa, LayoutService as ɵb, AlertIconAndTypesService as ɵba, MultiAlertService as ɵbb, ControlIdService as ɵbc, NgControlService as ɵbd, ClrAbstractControl as ɵbe, ContainerIdService as ɵbf, AbstractIfState as ɵbg, IfControlStateService as ɵbh, MarkControlService as ɵbi, ControlClassService as ɵbj, ClrHostWrappingModule as ɵbk, EmptyAnchor as ɵbl, ClrKeyFocusModule as ɵbm, ClrKeyFocus as ɵbn, ClrKeyFocusItem as ɵbo, ClrRovingTabindex as ɵbp, OptionSelectionService as ɵbq, AriaService as ɵbr, ComboboxFocusHandler as ɵbs, COMBOBOX_FOCUS_HANDLER_PROVIDER as ɵbt, ComboboxContainerService as ɵbu, DateNavigationService as ɵbv, DateFormControlService as ɵbw, LocaleHelperService as ɵbx, FocusService$1 as ɵby, DateIOService as ɵbz, FOCUS_ON_VIEW_INIT_PROVIDER as ɵc, DatepickerEnabledService as ɵca, ViewManagerService as ɵcb, DatepickerFocusService as ɵcc, DatalistIdService as ɵcd, ClrOutsideClickModule as ɵce, OUSTIDE_CLICK_DIRECTIVES as ɵcf, OutsideClick as ɵcg, ClrExpandableAnimationModule as ɵch, DomAdapter as ɵci, DragEventListenerService as ɵcj, DragAndDropEventBusService as ɵck, DragHandleRegistrarService as ɵcl, DraggableSnapshotService as ɵcm, GlobalDragModeService as ɵcn, Selection as ɵco, Items as ɵcp, FiltersProvider as ɵcq, Page as ɵcr, StateDebouncer as ɵcs, Sort as ɵct, DatagridRenderOrganizer as ɵcu, RowActionService as ɵcv, ExpandableRowsCount as ɵcw, DetailService as ɵcx, StateProvider as ɵcy, TableSizeService as ɵcz, FOCUS_TRAP_DIRECTIVES as ɵd, ColumnsService as ɵda, DisplayModeService as ɵdb, KeyNavigationGridController as ɵdc, DatagridFilterRegistrar as ɵdd, CustomFilter as ɵde, DatagridIfExpandService as ɵdf, SignpostFocusManager as ɵdg, SignpostIdService as ɵdh, ColumnResizerService as ɵdi, COLUMN_STATE as ɵdj, columnStateFactory as ɵdk, COLUMN_STATE_PROVIDER as ɵdl, WillyWonka as ɵdn, OompaLoompa as ɵdo, StackControl as ɵdp, TreeFeaturesService as ɵdq, treeFeaturesFactory as ɵdr, TREE_FEATURES_PROVIDER as ɵds, TreeFocusManagerService as ɵdt, RecursiveChildren as ɵdu, ScrollingService as ɵdv, ButtonInGroupService as ɵdw, ResponsiveNavigationService as ɵdx, FocusTrap as ɵdz, RootDropdownService as ɵe, ClrTemplateRefModule as ɵea, TEMPLATE_REF_DIRECTIVES as ɵeb, TemplateRefContainer as ɵec, TabsService as ɵed, TABS_ID as ɵee, tokenFactory as ɵef, TABS_ID_PROVIDER as ɵeg, VerticalNavService as ɵeh, VerticalNavIconService as ɵei, VerticalNavGroupRegistrationService as ɵej, VerticalNavGroupService as ɵek, TooltipIdService as ɵel, WizardNavigationService as ɵem, PageCollectionService as ɵen, ButtonHubService as ɵeo, HeaderActionService as ɵep, AccordionService as ɵeq, panelAnimation as ɵer, stepAnimation as ɵes, defaultAnimationTiming as ɵet, StepperService as ɵeu, TimelineIconAttributeService as ɵev, clrRootDropdownFactory as ɵf, ROOT_DROPDOWN_PROVIDER as ɵg, POPOVER_HOST_ANCHOR as ɵh, FocusService as ɵi, clrFocusServiceFactory as ɵj, FOCUS_SERVICE_PROVIDER as ɵk, DropdownFocusHandler as ɵl, DROPDOWN_FOCUS_HANDLER_PROVIDER as ɵm, customFocusableItemProvider as ɵn, UNIQUE_ID as ɵo, uniqueIdFactory as ɵp, UNIQUE_ID_PROVIDER as ɵq, FocusableItem as ɵr, AbstractPopover as ɵs, BasicFocusableItem as ɵt, BASIC_FOCUSABLE_ITEM_PROVIDER as ɵu, IF_ACTIVE_ID as ɵv, tokenFactory$1 as ɵw, IF_ACTIVE_ID_PROVIDER as ɵx, IfActiveService as ɵy, IfExpandService as ɵz };
 //# sourceMappingURL=clr-angular.js.map