@clr/angular 12.0.13 → 12.1.0

package/bundles/clr-angular.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@cds/core/icon'), require('@angular/common'), require('rxjs'), require('rxjs/operators'), require('@angular/animations'), require('@angular/forms'), require('@cds/core/icon/register')) :
-    typeof define === 'function' && define.amd ? define('@clr/angular', ['exports', '@angular/core', '@cds/core/icon', '@angular/common', 'rxjs', 'rxjs/operators', '@angular/animations', '@angular/forms', '@cds/core/icon/register'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.clr = global.clr || {}, global.clr.angular = {}), global.ng.core, global.icon, global.ng.common, global.rxjs, global.rxjs.operators, global.ng.animations, global.ng.forms));
-})(this, (function (exports, i0, icon, i1, rxjs, operators, animations, forms) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@cds/core/icon'), require('@angular/common'), require('rxjs'), require('rxjs/operators'), require('@angular/animations'), require('@angular/forms'), require('@cds/core/internal'), require('@cds/core/internal-components/close-button/register.js'), require('@cds/core/icon/register')) :
+    typeof define === 'function' && define.amd ? define('@clr/angular', ['exports', '@angular/core', '@cds/core/icon', '@angular/common', 'rxjs', 'rxjs/operators', '@angular/animations', '@angular/forms', '@cds/core/internal', '@cds/core/internal-components/close-button/register.js', '@cds/core/icon/register'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.clr = global.clr || {}, global.clr.angular = {}), global.ng.core, global.icon, global.ng.common, global.rxjs, global.rxjs.operators, global.ng.animations, global.ng.forms, global.internal));
+})(this, (function (exports, i0, icon, i1, rxjs, operators, animations, forms, internal) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -1417,6 +1417,19 @@
         datagridExpandableEndOf: 'End of',
         datagridExpandableRowContent: 'Expandable row content',
         datagridExpandableRowsHelperText: "Screen reader table commands may not work for viewing expanded content, please use your screen reader's browse mode to read the content exposed by this button",
+        responsiveNavToggleOpen: 'Navigation menu',
+        responsiveNavToggleClose: 'Navigation menu',
+        responsiveNavOverflowOpen: 'Navigation overflow menu',
+        responsiveNavOverflowClose: 'Navigation overflow menu',
+        // Wizard
+        wizardStepSuccess: 'Completed',
+        wizardStepError: 'Error',
+        /**
+         * Password Input
+         * Screen-reader text for the hide/show password field button
+         */
+        passwordHide: 'Hide password',
+        passwordShow: 'Show password',
     };
 
     /*
@@ -5126,7 +5139,7 @@
         return ClrCalendar;
     }());
     ClrCalendar.decorators = [
-        { type: i0.Component, args: [{ selector: 'clr-calendar', template: "<table class=\"calendar-table\">\n  <tr class=\"calendar-row weekdays\">\n    <td *ngFor=\"let day of localeDays\" class=\"calendar-cell weekday\" role=\"heading\" [attr.aria-label]=\"day.day\">\n      {{day.narrow}}\n    </td>\n  </tr>\n  <tr class=\"calendar-row\" *ngFor=\"let row of calendarViewModel.calendarView\">\n    <td *ngFor=\"let dayView of row\" class=\"calendar-cell\">\n      <clr-day [clrDayView]=\"dayView\"></clr-day>\n    </td>\n  </tr>\n</table>\n" },] }
+        { type: i0.Component, args: [{ selector: 'clr-calendar', template: "<table class=\"calendar-table\">\n  <tr class=\"calendar-row weekdays\">\n    <th *ngFor=\"let day of localeDays\" class=\"calendar-cell weekday\" role=\"heading\" [attr.aria-label]=\"day.day\">\n      {{day.narrow}}\n    </th>\n  </tr>\n  <tr class=\"calendar-row\" *ngFor=\"let row of calendarViewModel.calendarView\">\n    <td *ngFor=\"let dayView of row\" class=\"calendar-cell\">\n      <clr-day [clrDayView]=\"dayView\"></clr-day>\n    </td>\n  </tr>\n</table>\n" },] }
     ];
     ClrCalendar.ctorParameters = function () { return [
         { type: LocaleHelperService },
@@ -5213,9 +5226,23 @@
      * This software is released under MIT license.
      * The full license information can be found in LICENSE in the root directory of this project.
      */
+    /**
+     * TODO:
+     * Using core functions like:
+     * - pluckPixelValue
+     * - getCssPropertyValue
+     *
+     * to get the value of the design token.
+     *
+     * Note: Memoization/Cache usage possible.
+     */
     // iPad mini screen width
     // http://stephen.io/mediaqueries/#iPadMini
     var DATEPICKER_ENABLE_BREAKPOINT = 768;
+    var SMALL_BREAKPOINT = 576;
+    var MEDIUM_BREAKPOINT = 768;
+    var LARGE_BREAKPOINT = 992;
+    var EXTRA_LARGE_BREAKPOINT = 1200;
 
     /*
      * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
@@ -6451,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          </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',
@@ -8333,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 },
@@ -12557,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' }
                 },] }
     ];
@@ -13790,10 +13817,10 @@
         DatagridColumnChanges[DatagridColumnChanges["WIDTH"] = 0] = "WIDTH";
         DatagridColumnChanges[DatagridColumnChanges["HIDDEN"] = 1] = "HIDDEN";
     })(DatagridColumnChanges || (DatagridColumnChanges = {}));
-    var ɵ1 = function (key) { return DatagridColumnChanges[key]; }, ɵ0 = function (key) { return key === parseInt(key, 10); };
+    var ɵ1 = function (key) { return DatagridColumnChanges[key]; }, ɵ0$1 = function (key) { return key === parseInt(key, 10); };
     var ALL_COLUMN_CHANGES = Object.keys(DatagridColumnChanges)
         .map(ɵ1)
-        .filter(ɵ0); // extracts only integer keys
+        .filter(ɵ0$1); // extracts only integer keys
 
     /*
      * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
@@ -13853,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;
@@ -13872,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;
             /**
@@ -14023,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) {
@@ -14032,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
@@ -14088,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,
@@ -14105,6 +14328,7 @@
                         TableSizeService,
                         ColumnsService,
                         DisplayModeService,
+                        KeyNavigationGridController,
                     ],
                     host: {
                         '[class.datagrid-host]': 'true',
@@ -14125,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',] }],
@@ -14615,7 +14841,7 @@
     ClrDatagridColumnToggle.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-dg-column-toggle',
-                    template: "\n    <button\n      role=\"button\"\n      type=\"button\"\n      class=\"btn btn-sm btn-link column-toggle--action\"\n      clrPopoverAnchor\n      clrPopoverOpenCloseButton\n      [attr.aria-controls]=\"popoverId\"\n      [attr.aria-owns]=\"popoverId\"\n      [attr.title]=\"commonStrings.keys.pickColumns\"\n    >\n      <cds-icon shape=\"view-columns\" aria-hidden=\"true\" [attr.title]=\"commonStrings.keys.pickColumns\"></cds-icon>\n    </button>\n    <div\n      class=\"column-switch\"\n      role=\"dialog\"\n      [attr.aria-label]=\"commonStrings.keys.showColumnsMenuDescription\"\n      [id]=\"popoverId\"\n      clrFocusTrap\n      *clrPopoverContent=\"openState; at: smartPosition; outsideClickToClose: true; scrollToClose: true\"\n    >\n      <div class=\"switch-header\">\n        <div class=\"clr-sr-only\" tabindex=\"-1\" #allSelected>{{ commonStrings.keys.allColumnsSelected }}</div>\n        <ng-container *ngIf=\"!customToggleTitle\">{{ commonStrings.keys.showColumns }}</ng-container>\n        <ng-content select=\"clr-dg-column-toggle-title\"></ng-content>\n        <button\n          class=\"btn btn-sm btn-link toggle-switch-close-button\"\n          clrPopoverCloseButton\n          type=\"button\"\n          [attr.aria-label]=\"commonStrings.keys.close\"\n          [attr.title]=\"commonStrings.keys.close\"\n        >\n          <cds-icon shape=\"window-close\" aria-hidden=\"true\" [attr.title]=\"commonStrings.keys.close\"></cds-icon>\n        </button>\n      </div>\n      <ul class=\"switch-content list-unstyled\">\n        <li *ngFor=\"let columnState of hideableColumnStates; trackBy: trackByFn\">\n          <clr-checkbox-wrapper>\n            <input\n              clrCheckbox\n              type=\"checkbox\"\n              [disabled]=\"hasOnlyOneVisibleColumn && !columnState.hidden\"\n              [ngModel]=\"!columnState.hidden\"\n              (ngModelChange)=\"toggleColumnState(columnState, !$event)\"\n            />\n            <label>\n              <ng-template [ngTemplateOutlet]=\"columnState.titleTemplateRef\"></ng-template>\n            </label>\n          </clr-checkbox-wrapper>\n        </li>\n      </ul>\n      <div class=\"switch-footer\">\n        <ng-content select=\"clr-dg-column-toggle-button\"></ng-content>\n        <clr-dg-column-toggle-button *ngIf=\"!customToggleButton\" (clrAllSelected)=\"allColumnsSelected()\">\n          {{ commonStrings.keys.selectAll }}\n        </clr-dg-column-toggle-button>\n      </div>\n    </div>\n  ",
+                    template: "\n    <button\n      role=\"button\"\n      type=\"button\"\n      class=\"btn btn-sm btn-link column-toggle--action\"\n      clrPopoverAnchor\n      clrPopoverOpenCloseButton\n      [attr.aria-controls]=\"popoverId\"\n      [attr.aria-owns]=\"popoverId\"\n      [attr.title]=\"commonStrings.keys.pickColumns\"\n    >\n      <cds-icon shape=\"view-columns\" aria-hidden=\"true\" [attr.title]=\"commonStrings.keys.pickColumns\"></cds-icon>\n    </button>\n    <div\n      class=\"column-switch\"\n      role=\"dialog\"\n      [attr.aria-label]=\"commonStrings.keys.showColumnsMenuDescription\"\n      [id]=\"popoverId\"\n      clrFocusTrap\n      *clrPopoverContent=\"openState; at: smartPosition; outsideClickToClose: true; scrollToClose: true\"\n    >\n      <div class=\"switch-header\">\n        <div class=\"clr-sr-only\" tabindex=\"-1\" #allSelected>{{ commonStrings.keys.allColumnsSelected }}</div>\n        <ng-container *ngIf=\"!customToggleTitle\">\n          <h2>{{ commonStrings.keys.showColumns }}</h2>\n        </ng-container>\n        <ng-content select=\"clr-dg-column-toggle-title\"></ng-content>\n        <button\n          class=\"btn btn-sm btn-link toggle-switch-close-button\"\n          clrPopoverCloseButton\n          type=\"button\"\n          [attr.aria-label]=\"commonStrings.keys.close\"\n          [attr.title]=\"commonStrings.keys.close\"\n        >\n          <cds-icon shape=\"window-close\" aria-hidden=\"true\" [attr.title]=\"commonStrings.keys.close\"></cds-icon>\n        </button>\n      </div>\n      <ul class=\"switch-content list-unstyled\">\n        <li *ngFor=\"let columnState of hideableColumnStates; trackBy: trackByFn\">\n          <clr-checkbox-wrapper>\n            <input\n              clrCheckbox\n              type=\"checkbox\"\n              [disabled]=\"hasOnlyOneVisibleColumn && !columnState.hidden\"\n              [ngModel]=\"!columnState.hidden\"\n              (ngModelChange)=\"toggleColumnState(columnState, !$event)\"\n            />\n            <label>\n              <ng-template [ngTemplateOutlet]=\"columnState.titleTemplateRef\"></ng-template>\n            </label>\n          </clr-checkbox-wrapper>\n        </li>\n      </ul>\n      <div class=\"switch-footer\">\n        <ng-content select=\"clr-dg-column-toggle-button\"></ng-content>\n        <clr-dg-column-toggle-button *ngIf=\"!customToggleButton\" (clrAllSelected)=\"allColumnsSelected()\">\n          {{ commonStrings.keys.selectAll }}\n        </clr-dg-column-toggle-button>\n      </div>\n    </div>\n  ",
                     host: { '[class.column-switch-wrapper]': 'true', '[class.active]': 'openState' },
                     providers: [UNIQUE_ID_PROVIDER, ClrPopoverEventsService, ClrPopoverPositionService, ClrPopoverToggleService]
                 },] }
@@ -19108,6 +19334,14 @@
                     _this.initializeNavTriggers(navLevelList);
                 },
             });
+            this._subscription.add(this.responsiveNavService.navControl
+                .pipe(operators.filter(function (_a) {
+                var controlCode = _a.controlCode;
+                return controlCode === ResponsiveNavCodes.NAV_CLOSE || controlCode === ResponsiveNavCodes.NAV_CLOSE_ALL;
+            }))
+                .subscribe(function () {
+                _this.openNavLevel = null;
+            }));
         }
         // reset triggers. handles cases when an application has different nav levels on different pages.
         ClrHeader.prototype.resetNavTriggers = function () {
@@ -19135,10 +19369,21 @@
         ClrHeader.prototype.closeOpenNav = function () {
             this.responsiveNavService.closeAllNavs();
         };
-        // toggles the nav that is open
+        /**
+         * @deprecated Will be removed in with @clr/angular v15.0.0
+         *
+         * Use `openNav(navLevel)` instead to open the navigation and ResponsiveNavService to close it.
+         */
         ClrHeader.prototype.toggleNav = function (navLevel) {
-            this.openNavLevel = this.openNavLevel === navLevel ? null : navLevel;
-            this.responsiveNavService.sendControlMessage(ResponsiveNavCodes.NAV_TOGGLE, navLevel);
+            if (this.openNavLevel === navLevel) {
+                this.responsiveNavService.sendControlMessage(ResponsiveNavCodes.NAV_CLOSE, navLevel);
+                return;
+            }
+            this.openNav(navLevel);
+        };
+        ClrHeader.prototype.openNav = function (navLevel) {
+            this.openNavLevel = navLevel;
+            this.responsiveNavService.sendControlMessage(ResponsiveNavCodes.NAV_OPEN, navLevel);
         };
         ClrHeader.prototype.ngOnDestroy = function () {
             this._subscription.unsubscribe();
@@ -19148,7 +19393,7 @@
     ClrHeader.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-header',
-                    template: "\n    <button\n      type=\"button\"\n      *ngIf=\"isNavLevel1OnPage\"\n      class=\"header-hamburger-trigger\"\n      [attr.aria-label]=\"\n        openNavLevel !== responsiveNavCodes.NAV_LEVEL_1 ? commonStrings.keys.open : commonStrings.keys.close\n      \"\n      (click)=\"toggleNav(responsiveNavCodes.NAV_LEVEL_1)\"\n    >\n      <span></span>\n    </button>\n    <ng-content></ng-content>\n    <button\n      type=\"button\"\n      *ngIf=\"isNavLevel2OnPage\"\n      class=\"header-overflow-trigger\"\n      [attr.aria-label]=\"\n        openNavLevel !== responsiveNavCodes.NAV_LEVEL_2 ? commonStrings.keys.open : commonStrings.keys.close\n      \"\n      (click)=\"toggleNav(responsiveNavCodes.NAV_LEVEL_2)\"\n    >\n      <span></span>\n    </button>\n    <div class=\"header-backdrop\" (click)=\"closeOpenNav()\"></div>\n  ",
+                    template: "\n    <button\n      type=\"button\"\n      *ngIf=\"isNavLevel1OnPage\"\n      class=\"header-hamburger-trigger\"\n      [attr.aria-label]=\"\n        openNavLevel !== responsiveNavCodes.NAV_LEVEL_1 ? commonStrings.keys.open : commonStrings.keys.close\n      \"\n      (click)=\"toggleNav(responsiveNavCodes.NAV_LEVEL_1)\"\n      [attr.aria-expanded]=\"openNavLevel === 1 ? 'true' : 'false'\"\n      (click)=\"openNav(responsiveNavCodes.NAV_LEVEL_1)\"\n    >\n      <span></span>\n    </button>\n    <ng-content></ng-content>\n    <button\n      type=\"button\"\n      *ngIf=\"isNavLevel2OnPage\"\n      class=\"header-overflow-trigger\"\n      [attr.aria-label]=\"\n        openNavLevel !== responsiveNavCodes.NAV_LEVEL_2 ? commonStrings.keys.open : commonStrings.keys.close\n      \"\n      [attr.aria-expanded]=\"openNavLevel === 2 ? 'true' : 'false'\"\n      (click)=\"openNav(responsiveNavCodes.NAV_LEVEL_2)\"\n    >\n      <span></span>\n    </button>\n    <div class=\"header-backdrop\" (click)=\"closeOpenNav()\"></div>\n  ",
                     host: { '[class.header]': 'true' }
                 },] }
     ];
@@ -19162,176 +19407,756 @@
      * This software is released under MIT license.
      * The full license information can be found in LICENSE in the root directory of this project.
      */
-    var ClrNavLevel = /** @class */ (function () {
-        function ClrNavLevel(responsiveNavService, elementRef) {
-            this.responsiveNavService = responsiveNavService;
-            this.elementRef = elementRef;
+    function refocusIfOutsideFocusTrapElement(focusedElement, focusTrapElement, elementToRefocus) {
+        var focusTrapIsCurrent = internal.FocusTrapTrackerService.getCurrent() === focusTrapElement;
+        var elementToFocusIsOutsideFocusTrap = elementIsOutsideFocusTrapElement(focusedElement, focusTrapElement);
+        if (focusTrapIsCurrent && elementToFocusIsOutsideFocusTrap) {
+            elementToRefocus = elementToRefocus || focusTrapElement;
+            elementToRefocus.focus();
         }
-        ClrNavLevel.prototype.ngOnInit = function () {
-            if (this.level !== ResponsiveNavCodes.NAV_LEVEL_1 && this.level !== ResponsiveNavCodes.NAV_LEVEL_2) {
-                console.error('Nav Level can only be 1 or 2');
-                return;
-            }
-            this.responsiveNavService.registerNav(this.level);
-            this.addNavClass(this.level);
-        };
-        ClrNavLevel.prototype.addNavClass = function (level) {
-            var navHostClassList = this.elementRef.nativeElement.classList;
-            if (level === ResponsiveNavCodes.NAV_LEVEL_1) {
-                navHostClassList.add(ResponsiveNavCodes.NAV_CLASS_LEVEL_1);
-            }
-            else if (level === ResponsiveNavCodes.NAV_LEVEL_2) {
-                navHostClassList.add(ResponsiveNavCodes.NAV_CLASS_LEVEL_2);
+        else {
+            focusedElement.focus();
+        }
+    }
+    function elementIsOutsideFocusTrapElement(focusedElement, focusTrapElement) {
+        if (focusedElement === focusTrapElement.topReboundElement ||
+            focusedElement === focusTrapElement.bottomReboundElement) {
+            return true;
+        }
+        var elementIsInFocusTrapLightDom = focusTrapElement.contains(focusedElement);
+        if (elementIsInFocusTrapLightDom) {
+            return false;
+        }
+        if (focusTrapElement !== null && focusTrapElement.contains(focusedElement)) {
+            return false;
+        }
+        return true;
+    }
+    function createFocusTrapReboundElement(document) {
+        var offScreenSpan = document.createElement('span');
+        offScreenSpan.setAttribute('tabindex', '0');
+        offScreenSpan.classList.add('offscreen-focus-rebounder');
+        return offScreenSpan;
+    }
+    function addReboundElementsToFocusTrapElement(document, focusTrapElement) {
+        if (focusTrapElement && !focusTrapElement.topReboundElement && !focusTrapElement.bottomReboundElement) {
+            focusTrapElement.topReboundElement = createFocusTrapReboundElement(document);
+            focusTrapElement.bottomReboundElement = createFocusTrapReboundElement(document);
+            var parent = focusTrapElement.parentElement;
+            var sibling = focusTrapElement.nextSibling;
+            if (parent) {
+                parent.insertBefore(focusTrapElement.topReboundElement, focusTrapElement);
+                if (sibling) {
+                    parent.insertBefore(focusTrapElement.bottomReboundElement, sibling);
+                }
+                else {
+                    parent.appendChild(focusTrapElement.bottomReboundElement);
+                }
             }
-        };
-        Object.defineProperty(ClrNavLevel.prototype, "level", {
-            get: function () {
-                return this._level;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ClrNavLevel.prototype, "responsiveNavCodes", {
-            // getter to access the responsive navigation codes from the template
-            get: function () {
-                return ResponsiveNavCodes;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ClrNavLevel.prototype.open = function () {
-            this.responsiveNavService.sendControlMessage(ResponsiveNavCodes.NAV_OPEN, this.level);
-        };
-        ClrNavLevel.prototype.close = function () {
-            this.responsiveNavService.sendControlMessage(ResponsiveNavCodes.NAV_CLOSE, this.level);
-        };
-        // TODO: Figure out whats the best way to do this. Possible methods
-        // 1. HostListener (current solution)
-        // 2. Directives on the .nav-link class. We discussed on moving away from class selectors but I forget the reason
-        // why
-        ClrNavLevel.prototype.onMouseClick = function (target) {
-            var current = target; // Get the element in the DOM on which the mouse was clicked
-            var navHost = this.elementRef.nativeElement; // Get the current nav native HTML element
-            // Start checking if current and navHost are equal.
-            // If not traverse to the parentNode and check again.
-            while (current) {
-                if (current === navHost) {
-                    return;
+        }
+    }
+    function removeReboundElementsFromFocusTrapElement(focusTrapElement) {
+        if (focusTrapElement) {
+            var parent = focusTrapElement.parentElement;
+            if (parent) {
+                var topRebound = focusTrapElement.topReboundElement;
+                var bottomRebound = focusTrapElement.bottomReboundElement;
+                if (topRebound) {
+                    parent.removeChild(topRebound);
                 }
-                else if (current.classList.contains('nav-link')) {
-                    this.close();
-                    return;
+                if (bottomRebound) {
+                    parent.removeChild(bottomRebound);
                 }
-                current = current.parentNode;
+            }
+            // These are here to to make sure that we completely delete all traces of the removed DOM objects.
+            delete focusTrapElement.topReboundElement;
+            delete focusTrapElement.bottomReboundElement;
+        }
+    }
+    // this helper exists to enable the focus trap class to handle vanilla html elements
+    // it's primary concern is to keep TS happy.
+    function castHtmlElementToFocusTrapElement(el) {
+        return el;
+    }
+    var FocusTrap = /** @class */ (function () {
+        function FocusTrap(renderer, injector, platformId, hostElement) {
+            this.renderer = renderer;
+            this.active = false;
+            if (i1.isPlatformBrowser(platformId)) {
+                this._document = injector.get(i1.DOCUMENT);
+            }
+            hostElement = castHtmlElementToFocusTrapElement(hostElement);
+            if (!hostElement.focusTrapId) {
+                hostElement.focusTrapId = internal.createId();
+            }
+            this.focusTrapElement = hostElement;
+        }
+        FocusTrap.prototype.enableFocusTrap = function () {
+            var _this = this;
+            var fte = this.focusTrapElement;
+            var firstFocusElement = fte.querySelector('[cds-first-focus]');
+            var activeEl = this._document.activeElement;
+            if (internal.FocusTrapTrackerService.getCurrent() === fte) {
+                throw new Error('Focus trap is already enabled for this instance.');
+            }
+            this.firstFocusElement = firstFocusElement || this.focusTrapElement;
+            addReboundElementsToFocusTrapElement(this._document, fte);
+            if (!internal.isFocusable(fte)) {
+                fte.setAttribute('tabindex', '-1');
+            }
+            if (activeEl && internal.isHTMLElement(activeEl)) {
+                this.previousFocus = activeEl;
+            }
+            internal.FocusTrapTrackerService.setCurrent(fte);
+            // setTimeout here is required for Safari which may try to set focus on
+            // element before it is visible...
+            var focusTimer = setTimeout(function () {
+                _this.firstFocusElement.focus();
+                clearTimeout(focusTimer);
+            }, 10);
+            this.onFocusInEvent = this.onFocusIn.bind(this);
+            this.unlisten = this.renderer.listen(this._document, 'focusin', this.onFocusInEvent);
+            this.active = true;
+        };
+        FocusTrap.prototype.removeFocusTrap = function () {
+            if (this.unlisten) {
+                this.unlisten();
+            }
+            removeReboundElementsFromFocusTrapElement(this.focusTrapElement);
+            this.renderer.removeAttribute(this.focusTrapElement, 'tabindex');
+            internal.FocusTrapTrackerService.activatePreviousCurrent();
+            this.active = false;
+            if (this.previousFocus) {
+                this.previousFocus.focus();
             }
         };
-        ClrNavLevel.prototype.ngOnDestroy = function () {
-            this.responsiveNavService.unregisterNav(this.level);
+        FocusTrap.prototype.onFocusIn = function (event) {
+            refocusIfOutsideFocusTrapElement(event.composedPath()[0], this.focusTrapElement, this.firstFocusElement);
         };
-        return ClrNavLevel;
+        return FocusTrap;
     }());
-    ClrNavLevel.decorators = [
-        { type: i0.Directive, args: [{ selector: '[clr-nav-level]' },] }
+    FocusTrap.decorators = [
+        { type: i0.Injectable }
     ];
-    ClrNavLevel.ctorParameters = function () { return [
-        { type: ResponsiveNavigationService },
-        { type: i0.ElementRef }
+    FocusTrap.ctorParameters = function () { return [
+        { type: i0.Renderer2 },
+        { type: i0.Injector },
+        { type: undefined },
+        { type: undefined }
     ]; };
-    ClrNavLevel.propDecorators = {
-        _level: [{ type: i0.Input, args: ['clr-nav-level',] }],
-        onMouseClick: [{ type: i0.HostListener, args: ['click', ['$event.target'],] }]
-    };
 
     /*
      * 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 CLR_NAVIGATION_DIRECTIVES = [
-        ClrHeader,
-        ClrNavLevel,
-        NavDetectionOompaLoompa,
-        MainContainerWillyWonka,
-    ];
-    var ClrNavigationModule = /** @class */ (function () {
-        function ClrNavigationModule() {
-        }
-        return ClrNavigationModule;
-    }());
-    ClrNavigationModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [i1.CommonModule, ClrIconModule, ClrDropdownModule],
-                    declarations: [CLR_NAVIGATION_DIRECTIVES],
-                    exports: [CLR_NAVIGATION_DIRECTIVES],
-                },] }
-    ];
+    var defaultAnimationTiming = '0.2s ease-in-out';
 
     /*
      * 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 TemplateRefContainer = /** @class */ (function () {
-        function TemplateRefContainer() {
-        }
-        return TemplateRefContainer;
-    }());
-    TemplateRefContainer.decorators = [
-        { type: i0.Component, args: [{
-                    template: "\n    <ng-template>\n      <ng-content></ng-content>\n    </ng-template>\n  "
-                },] }
-    ];
-    TemplateRefContainer.propDecorators = {
-        template: [{ type: i0.ViewChild, args: [i0.TemplateRef,] }]
-    };
+    function collapse() {
+        'use strict';
+        return [
+            animations.state('true', animations.style({ height: 0, 'overflow-y': 'hidden' })),
+            animations.transition('true => false', [animations.animate(defaultAnimationTiming, animations.style({ height: '*', 'overflow-y': 'hidden' }))]),
+            animations.transition('false => true', [animations.style({ height: '*', 'overflow-y': 'hidden' }), animations.animate(defaultAnimationTiming)]),
+        ];
+    }
 
     /*
      * 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 TEMPLATE_REF_DIRECTIVES = [TemplateRefContainer];
 
     /*
      * 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 ClrTemplateRefModule = /** @class */ (function () {
-        function ClrTemplateRefModule() {
-        }
-        return ClrTemplateRefModule;
-    }());
-    ClrTemplateRefModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [i1.CommonModule],
-                    declarations: [TEMPLATE_REF_DIRECTIVES],
-                    entryComponents: [TEMPLATE_REF_DIRECTIVES],
-                    exports: [TEMPLATE_REF_DIRECTIVES],
-                },] }
-    ];
+    function fade(opacity) {
+        if (opacity === void 0) { opacity = 1; }
+        return [
+            animations.transition('void => *', [animations.style({ opacity: 0 }), animations.animate(defaultAnimationTiming, animations.style({ opacity: opacity }))]),
+            animations.transition('* => void', [animations.animate(defaultAnimationTiming, animations.style({ opacity: 0 }))]),
+        ];
+    }
 
-    var TabsWillyWonka = /** @class */ (function (_super) {
-        __extends(TabsWillyWonka, _super);
-        function TabsWillyWonka() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return TabsWillyWonka;
-    }(WillyWonka));
-    TabsWillyWonka.decorators = [
-        { type: i0.Directive, args: [{ selector: 'clr-tabs' },] }
-    ];
+    /*
+     * 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 ActiveOompaLoompa = /** @class */ (function (_super) {
-        __extends(ActiveOompaLoompa, _super);
-        function ActiveOompaLoompa(cdr, willyWonka, id, ifActive) {
-            var _this = this;
-            if (!willyWonka) {
-                throw new Error('clrTabLink and clr-tab-content should only be used inside of a clr-tabs');
-            }
-            _this = _super.call(this, cdr, willyWonka) || this;
-            _this.ifActive = ifActive;
-            _this.id = id;
+    /*
+     * 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 fadeSlide(direction) {
+        var transform = null;
+        if (direction === 'up') {
+            transform = 'translate(0, 25%)';
+        }
+        else if (direction === 'down') {
+            transform = 'translate(0, -25%)';
+        }
+        else if (direction === 'left') {
+            transform = 'translate(25%, 0)';
+        }
+        else if (direction === 'right') {
+            transform = 'translate(-25%, 0)';
+        }
+        else {
+            throw new Error('Unknown direction ' + direction + ' for slide animation.');
+        }
+        return [
+            animations.transition('void => *', [animations.style({ opacity: 0, transform: transform }), animations.animate(defaultAnimationTiming)]),
+            animations.transition('* => void', [animations.animate(defaultAnimationTiming, animations.style({ opacity: 0, transform: transform }))]),
+        ];
+    }
+
+    /*
+     * 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.
+     */
+
+    /*
+     * 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 slide(direction) {
+        var transform = null;
+        if (direction === 'up') {
+            transform = 'translate(0, 25%)';
+        }
+        else if (direction === 'down') {
+            transform = 'translate(0, -25%)';
+        }
+        else if (direction === 'left') {
+            transform = 'translate(25%, 0)';
+        }
+        else if (direction === 'right') {
+            transform = 'translate(-25%, 0)';
+        }
+        else {
+            throw new Error('Unknown direction ' + direction + ' for slide animation.');
+        }
+        return [
+            animations.transition('void => *', [animations.style({ transform: transform }), animations.animate(defaultAnimationTiming)]),
+            animations.transition('* => void', [animations.animate(defaultAnimationTiming, animations.style({ transform: transform }))]),
+        ];
+    }
+
+    /*
+     * 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.
+     */
+
+    /*
+     * 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.
+     */
+
+    /*
+     * 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.
+     */
+
+    /*
+     * 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.
+     */
+
+    /*
+     * 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.
+     */
+
+    /*
+     * 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.
+     */
+    exports.ClrAriaLivePoliteness = void 0;
+    (function (ClrAriaLivePoliteness) {
+        ClrAriaLivePoliteness["off"] = "off";
+        ClrAriaLivePoliteness["polite"] = "polite";
+        ClrAriaLivePoliteness["assertive"] = "assertive";
+    })(exports.ClrAriaLivePoliteness || (exports.ClrAriaLivePoliteness = {}));
+    /**
+     * Time in milliseconds before inserting the content into the container
+     */
+    var ARIA_LIVE_TICK = 100;
+    /**
+     * @deprecated
+     *
+     * -- ClrAriaLiveService is deprecated in 5.0 to be removed in 6.0 --
+     * Please consider using the LiveAnnouncer in the Angular Material CDK
+     * if your project needs this functionality.
+     * More info: https://material.angular.io/cdk/a11y/overview#example-1
+     *
+     * This service handle `aria-live` accessibility attribute. The issue is that you need
+     * to have the DOM Element with attribute `aria-live` before you could insert content
+     * and SR (Screen Reader) pick the change and announce it.
+     *
+     * ```typescript
+     * import { ClrAriaLiveService } from 'src/clr-angular/utils/a11y/aria-live.service';
+     *
+     * @Component({
+     * selector: 'clr-demo-component',
+     * providers: [ClrAriaLiveService],
+     * template: `
+     *   <ng-content></ng-content>
+     * `,
+     * })
+     * export class DemoComponent {
+     *  constructor(ariaLiveService: ClrAriaLiveService) {}
+     *
+     *  public actionThatWillTriggerChange() {
+     *    this.ariaLiveService.announce('message that I want to announce to SR');
+     *  }
+     * }
+     * ```
+     *
+     */
+    var ClrAriaLiveService = /** @class */ (function () {
+        function ClrAriaLiveService(ngZone, _document, platformId) {
+            this.ngZone = ngZone;
+            this.platformId = platformId;
+            this._id = "clr-aria-live-element-" + uniqueIdFactory();
+            this.document = _document;
+        }
+        Object.defineProperty(ClrAriaLiveService.prototype, "id", {
+            /**
+             * get access to the internal HTML `id` that gonna be used for the AriaLive container.
+             * @return ID of the DOM Element as string.
+             */
+            get: function () {
+                return this._id;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /**
+         * Append text content inside the AriaLive Container. This method will check if the
+         * DOM Element is existing if not it will create one for us and the will apply the text.
+         *
+         * ```typescript
+         * this.ariaLiveService.announce(this.el.nativeElement);
+         * // or
+         * this.ariaLiveService.announce('Message to announce to SR');
+         * ```
+         *
+         * @remark
+         * When second argument is `AriaLivePoliteness.off` we won't create aria container or update it.
+         * The reason for that is that we don't want to do additional work if the SR will ignore it.
+         *
+         * @param message - This could be simple string or HTMLElement
+         * @param politeness - 'polite', 'assertive' or 'off'
+         */
+        ClrAriaLiveService.prototype.announce = function (message, politeness) {
+            var _this = this;
+            if (politeness === void 0) { politeness = exports.ClrAriaLivePoliteness.polite; }
+            if (politeness === exports.ClrAriaLivePoliteness.off) {
+                return;
+            }
+            if (!this.ariaLiveElement && i1.isPlatformBrowser(this.platformId)) {
+                this.ariaLiveElement = this.createContainer();
+            }
+            message = typeof message !== 'string' && i1.isPlatformBrowser(this.platformId) ? message.textContent : message;
+            // when there is no message do NOTHING!
+            if (!message) {
+                return;
+            }
+            this.ariaLiveElement.setAttribute('aria-live', politeness);
+            // This 100ms timeout is necessary for some browser + screen-reader combinations:
+            // - Both JAWS and NVDA over IE11 will not announce anything without a non-zero timeout.
+            // - With Chrome and IE11 with NVDA or JAWS, a repeated (identical) message won't be read a
+            //   second time without clearing and then using a non-zero delay.
+            // (using JAWS 17 at time of this writing).
+            this.ngZone.runOutsideAngular(function () {
+                // This clearTimeout will stop all older messages from announcing
+                // in the case where the messages are comming too fast we gonna try to append only
+                // the last one. That's what the SR will try to do anyway.
+                clearTimeout(_this.previousTimeout);
+                _this.previousTimeout = setTimeout(function () {
+                    _this.ariaLiveElement.textContent = message;
+                }, ARIA_LIVE_TICK);
+            });
+        };
+        /**
+         * onDestroy life cycle - must stop all active setTimeouts and remove the AriaLive
+         * container from the document.
+         */
+        ClrAriaLiveService.prototype.ngOnDestroy = function () {
+            clearTimeout(this.previousTimeout);
+            if (i1.isPlatformBrowser(this.platformId) && this.ariaLiveElement) {
+                this.document.body.removeChild(this.ariaLiveElement);
+                this.ariaLiveElement = null;
+            }
+        };
+        /**
+         * Create AriaLive DOM element as a last child of the document.
+         * After the element is created, we gonna apply Clarity class to hide it from
+         * the screen and set the `aria-live` politness.
+         *
+         * `clr-sr-only` is the CSS class that is used to hide the element from the screen.
+         *
+         * @remark
+         * Calling this method multiple times will create multiple DOM Elements, that
+         * won't be tracked and will be GC after the service is destroyed.
+         *
+         * @return AriaLive container as HTMLElement
+         *
+         */
+        ClrAriaLiveService.prototype.createContainer = function () {
+            var ariaLiveElement = this.document.createElement('div');
+            ariaLiveElement.setAttribute('id', this.id);
+            // Use clarity screen reader class to hide the dom element
+            // and fix the scrollbar shake
+            ariaLiveElement.classList.add('clr-sr-only');
+            ariaLiveElement.setAttribute('aria-atomic', 'true');
+            ariaLiveElement.setAttribute('aria-live', exports.ClrAriaLivePoliteness.polite);
+            this.document.body.appendChild(ariaLiveElement);
+            return ariaLiveElement;
+        };
+        return ClrAriaLiveService;
+    }());
+    ClrAriaLiveService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function ClrAriaLiveService_Factory() { return new ClrAriaLiveService(i0__namespace.ɵɵinject(i0__namespace.NgZone), i0__namespace.ɵɵinject(i1__namespace.DOCUMENT), i0__namespace.ɵɵinject(i0__namespace.PLATFORM_ID)); }, token: ClrAriaLiveService, providedIn: "root" });
+    ClrAriaLiveService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root',
+                },] }
+    ];
+    ClrAriaLiveService.ctorParameters = function () { return [
+        { type: i0.NgZone },
+        { type: undefined, decorators: [{ type: i0.Inject, args: [i1.DOCUMENT,] }] },
+        { type: undefined, decorators: [{ type: i0.Inject, args: [i0.PLATFORM_ID,] }] }
+    ]; };
+
+    /*
+     * 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.
+     */
+
+    /*
+     * 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.
+     */
+
+    /*
+     * 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.
+     */
+
+    /*
+     * 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.
+     */
+
+    /*
+     * 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.
+     */
+
+    /*
+     * 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 createCdsCloseButton = function (document, ariaLabel) {
+        var cdsCloseButton = document.createElement('cds-internal-close-button');
+        cdsCloseButton.setAttribute('icon-size', '32');
+        cdsCloseButton.setAttribute('aria-label', ariaLabel);
+        cdsCloseButton.setAttribute('aria-hidden', 'true');
+        cdsCloseButton.setAttribute('type', 'button');
+        /**
+         * The button is hidden by default based on our Desktop-first approach.
+         */
+        cdsCloseButton.setAttribute('hidden', 'true');
+        cdsCloseButton.className = 'clr-nav-close';
+        return cdsCloseButton;
+    };
+    var ɵ0 = createCdsCloseButton;
+    var ClrNavLevel = /** @class */ (function (_super) {
+        __extends(ClrNavLevel, _super);
+        function ClrNavLevel(platformId, responsiveNavService, elementRef, renderer, injector) {
+            var _this = _super.call(this, renderer, injector, platformId, elementRef.nativeElement) || this;
+            _this.responsiveNavService = responsiveNavService;
+            _this.elementRef = elementRef;
+            _this._isOpen = false;
+            if (i1.isPlatformBrowser(platformId)) {
+                _this._document = injector.get(i1.DOCUMENT);
+            }
+            _this._subscription = responsiveNavService.navControl
+                .pipe(operators.filter(function (x) { return x.navLevel === _this.level; }), operators.filter(function (_a) {
+                var controlCode = _a.controlCode;
+                return (controlCode === ResponsiveNavCodes.NAV_OPEN && !_this.isOpen) ||
+                    (controlCode === ResponsiveNavCodes.NAV_CLOSE && _this.isOpen);
+            }))
+                .subscribe(function (_a) {
+                var controlCode = _a.controlCode;
+                if (controlCode === ResponsiveNavCodes.NAV_OPEN) {
+                    _this.open();
+                    return;
+                }
+                _this.close();
+            });
+            _this._subscription.add(responsiveNavService.navControl
+                .pipe(operators.filter(function (_a) {
+                var controlCode = _a.controlCode;
+                return controlCode === ResponsiveNavCodes.NAV_CLOSE_ALL;
+            }))
+                .subscribe(function () { return _this.close(); }));
+            return _this;
+        }
+        ClrNavLevel.prototype.ngOnInit = function () {
+            if (!this.closeButtonAriaLabel) {
+                this.closeButtonAriaLabel =
+                    this._level === ResponsiveNavCodes.NAV_LEVEL_1
+                        ? commonStringsDefault.responsiveNavToggleClose
+                        : commonStringsDefault.responsiveNavOverflowClose;
+            }
+            if (this.level !== ResponsiveNavCodes.NAV_LEVEL_1 && this.level !== ResponsiveNavCodes.NAV_LEVEL_2) {
+                console.error('Nav Level can only be 1 or 2');
+                return;
+            }
+            this.responsiveNavService.registerNav(this.level);
+            this.addNavClass(this.level);
+        };
+        ClrNavLevel.prototype.ngAfterViewInit = function () {
+            var closeButton = createCdsCloseButton(this._document, this.closeButtonAriaLabel);
+            this.renderer.listen(closeButton, 'click', this.close.bind(this));
+            this.renderer.insertBefore(this.elementRef.nativeElement, closeButton, this.elementRef.nativeElement.firstChild); // Adding the button at the top of the nav
+            if (this._document.body.clientWidth < LARGE_BREAKPOINT) {
+                /**
+                 * Close if the document body is smaller than the large breakpoint for example:
+                 * - Refreshing the page
+                 * - Browser window size is changed when opening the applicaiton
+                 * - Browser zoom is turned on and zoomed to a size that makes the document smaller than the large breakpoint
+                 */
+                this.close();
+            }
+        };
+        ClrNavLevel.prototype.addNavClass = function (level) {
+            var navHostClassList = this.elementRef.nativeElement.classList;
+            if (level === ResponsiveNavCodes.NAV_LEVEL_1) {
+                navHostClassList.add(ResponsiveNavCodes.NAV_CLASS_LEVEL_1);
+            }
+            else if (level === ResponsiveNavCodes.NAV_LEVEL_2) {
+                navHostClassList.add(ResponsiveNavCodes.NAV_CLASS_LEVEL_2);
+            }
+        };
+        Object.defineProperty(ClrNavLevel.prototype, "level", {
+            get: function () {
+                return this._level;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ClrNavLevel.prototype, "responsiveNavCodes", {
+            // getter to access the responsive navigation codes from the template
+            get: function () {
+                return ResponsiveNavCodes;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ClrNavLevel.prototype, "isOpen", {
+            get: function () {
+                return this._isOpen;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ClrNavLevel.prototype.onResize = function (event) {
+            var target = event.target;
+            if (target.innerWidth < LARGE_BREAKPOINT && this.isOpen) {
+                this.close();
+                return;
+            }
+            this.showNavigation();
+        };
+        ClrNavLevel.prototype.open = function () {
+            this._isOpen = true;
+            this.showNavigation();
+            this.enableFocusTrap();
+            this.showCloseButton();
+            this.responsiveNavService.sendControlMessage(ResponsiveNavCodes.NAV_OPEN, this.level);
+        };
+        ClrNavLevel.prototype.close = function () {
+            this._isOpen = false;
+            this.hideNavigation();
+            this.removeFocusTrap();
+            this.hideCloseButton();
+            this.responsiveNavService.sendControlMessage(ResponsiveNavCodes.NAV_CLOSE, this.level);
+        };
+        // TODO: Figure out whats the best way to do this. Possible methods
+        // 1. HostListener (current solution)
+        // 2. Directives on the .nav-link class. We discussed on moving away from class selectors but I forget the reason
+        // why
+        ClrNavLevel.prototype.onMouseClick = function (target) {
+            var current = target; // Get the element in the DOM on which the mouse was clicked
+            var navHost = this.elementRef.nativeElement; // Get the current nav native HTML element
+            // Start checking if current and navHost are equal.
+            // If not traverse to the parentNode and check again.
+            while (current) {
+                if (current === navHost) {
+                    return;
+                }
+                else if (current.classList.contains('nav-link') && this._document.body.clientWidth < LARGE_BREAKPOINT) {
+                    this.close();
+                    return;
+                }
+                current = current.parentNode;
+            }
+        };
+        ClrNavLevel.prototype.hideNavigation = function () {
+            this.renderer.setAttribute(this.elementRef.nativeElement, 'aria-hidden', 'true');
+            this.renderer.setAttribute(this.elementRef.nativeElement, 'hidden', 'true');
+        };
+        ClrNavLevel.prototype.showNavigation = function () {
+            this.renderer.setAttribute(this.elementRef.nativeElement, 'aria-hidden', 'false');
+            this.renderer.removeAttribute(this.elementRef.nativeElement, 'hidden');
+        };
+        ClrNavLevel.prototype.hideCloseButton = function () {
+            this.renderer.setAttribute(this.elementRef.nativeElement, 'aria-hidden', 'true');
+            this.renderer.setAttribute(this.elementRef.nativeElement.querySelector('.clr-nav-close'), 'hidden', 'true');
+        };
+        ClrNavLevel.prototype.showCloseButton = function () {
+            this.renderer.setAttribute(this.elementRef.nativeElement.querySelector('.clr-nav-close'), 'aria-hidden', 'false');
+            this.renderer.removeAttribute(this.elementRef.nativeElement.querySelector('.clr-nav-close'), 'hidden');
+        };
+        ClrNavLevel.prototype.ngOnDestroy = function () {
+            this.responsiveNavService.unregisterNav(this.level);
+            this._subscription.unsubscribe();
+        };
+        return ClrNavLevel;
+    }(FocusTrap));
+    ClrNavLevel.decorators = [
+        { type: i0.Directive, args: [{ selector: '[clr-nav-level]' },] }
+    ];
+    ClrNavLevel.ctorParameters = function () { return [
+        { type: undefined, decorators: [{ type: i0.Inject, args: [i0.PLATFORM_ID,] }] },
+        { type: ResponsiveNavigationService },
+        { type: i0.ElementRef },
+        { type: i0.Renderer2 },
+        { type: i0.Injector }
+    ]; };
+    ClrNavLevel.propDecorators = {
+        _level: [{ type: i0.Input, args: ['clr-nav-level',] }],
+        closeButtonAriaLabel: [{ type: i0.Input, args: ['closeAriaLabel',] }],
+        onResize: [{ type: i0.HostListener, args: ['window:resize', ['$event'],] }],
+        onMouseClick: [{ type: i0.HostListener, args: ['click', ['$event.target'],] }]
+    };
+
+    /*
+     * 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 CLR_NAVIGATION_DIRECTIVES = [
+        ClrHeader,
+        ClrNavLevel,
+        NavDetectionOompaLoompa,
+        MainContainerWillyWonka,
+    ];
+    var ClrNavigationModule = /** @class */ (function () {
+        function ClrNavigationModule() {
+        }
+        return ClrNavigationModule;
+    }());
+    ClrNavigationModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [i1.CommonModule, ClrIconModule, ClrDropdownModule],
+                    declarations: [CLR_NAVIGATION_DIRECTIVES],
+                    exports: [CLR_NAVIGATION_DIRECTIVES],
+                },] }
+    ];
+
+    /*
+     * 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 TemplateRefContainer = /** @class */ (function () {
+        function TemplateRefContainer() {
+        }
+        return TemplateRefContainer;
+    }());
+    TemplateRefContainer.decorators = [
+        { type: i0.Component, args: [{
+                    template: "\n    <ng-template>\n      <ng-content></ng-content>\n    </ng-template>\n  "
+                },] }
+    ];
+    TemplateRefContainer.propDecorators = {
+        template: [{ type: i0.ViewChild, args: [i0.TemplateRef,] }]
+    };
+
+    /*
+     * 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 TEMPLATE_REF_DIRECTIVES = [TemplateRefContainer];
+
+    /*
+     * 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 ClrTemplateRefModule = /** @class */ (function () {
+        function ClrTemplateRefModule() {
+        }
+        return ClrTemplateRefModule;
+    }());
+    ClrTemplateRefModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [i1.CommonModule],
+                    declarations: [TEMPLATE_REF_DIRECTIVES],
+                    entryComponents: [TEMPLATE_REF_DIRECTIVES],
+                    exports: [TEMPLATE_REF_DIRECTIVES],
+                },] }
+    ];
+
+    var TabsWillyWonka = /** @class */ (function (_super) {
+        __extends(TabsWillyWonka, _super);
+        function TabsWillyWonka() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return TabsWillyWonka;
+    }(WillyWonka));
+    TabsWillyWonka.decorators = [
+        { type: i0.Directive, args: [{ selector: 'clr-tabs' },] }
+    ];
+
+    var ActiveOompaLoompa = /** @class */ (function (_super) {
+        __extends(ActiveOompaLoompa, _super);
+        function ActiveOompaLoompa(cdr, willyWonka, id, ifActive) {
+            var _this = this;
+            if (!willyWonka) {
+                throw new Error('clrTabLink and clr-tab-content should only be used inside of a clr-tabs');
+            }
+            _this = _super.call(this, cdr, willyWonka) || this;
+            _this.ifActive = ifActive;
+            _this.id = id;
             return _this;
         }
         Object.defineProperty(ActiveOompaLoompa.prototype, "flavor", {
@@ -23422,7 +24247,14 @@
         };
         ClrWizard.prototype.listenForPageChanges = function () {
             var _this = this;
-            return this.navService.currentPageChanged.subscribe(function () { return _this.currentPageChanged.emit(); });
+            return this.navService.currentPageChanged.subscribe(function () {
+                var _a;
+                // Added to address VPAT-749:
+                //   When clicking on a wizard tab, focus should move to that
+                //   tabs content to make the wizard more accessible.
+                (_a = _this.wizardTitle) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
+                _this.currentPageChanged.emit();
+            });
         };
         ClrWizard.prototype.updateNavOnPageChanges = function () {
             var _this = this;
@@ -23980,13 +24812,6 @@
         { 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.
-     */
-    var defaultAnimationTiming = '0.2s ease-in-out';
-
     /*
      * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
      * This software is released under MIT license.
@@ -25251,119 +26076,17 @@
                         ClrButtonModule,
                         ClrFormsModule,
                         ClrLayoutModule,
-                        ClrPopoverModule,
-                        ClrWizardModule,
-                        ClrDragAndDropModule,
-                        ClrStepperModule,
-                        ClrSpinnerModule,
-                        ClrProgressBarModule,
-                        ClrPopoverModuleNext,
-                        ClrTimelineModule,
-                    ],
-                },] }
-    ];
-
-    /*
-     * 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.
-     */
-
-    /*
-     * 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.
-     */
-
-    /*
-     * 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.
-     */
-
-    /*
-     * 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.
-     */
-
-    /*
-     * 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.
-     */
-
-    /*
-     * 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.
-     */
-
-    /*
-     * 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.
-     */
-
-    /*
-     * 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.
-     */
-
-    /*
-     * 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.
-     */
-
-    /*
-     * 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.
-     */
-
-    /*
-     * 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.
-     */
-
-    /*
-     * 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.
-     */
-
-    /*
-     * 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.
-     */
-
-    /*
-     * 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.
-     */
-
-    /*
-     * 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.
-     */
-
-    /*
-     * 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.
-     */
-
-    /*
-     * 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.
-     */
+                        ClrPopoverModule,
+                        ClrWizardModule,
+                        ClrDragAndDropModule,
+                        ClrStepperModule,
+                        ClrSpinnerModule,
+                        ClrProgressBarModule,
+                        ClrPopoverModuleNext,
+                        ClrTimelineModule,
+                    ],
+                },] }
+    ];
 
     /*
      * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
@@ -25442,16 +26165,6 @@
      * This software is released under MIT license.
      * The full license information can be found in LICENSE in the root directory of this project.
      */
-    var CLR_MENU_POSITIONS = [
-        'bottom-left',
-        'bottom-right',
-        'top-left',
-        'top-right',
-        'left-bottom',
-        'left-top',
-        'right-bottom',
-        'right-top',
-    ];
 
     /*
      * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
@@ -25482,14 +26195,6 @@
      * This software is released under MIT license.
      * The full license information can be found in LICENSE in the root directory of this project.
      */
-    function collapse() {
-        'use strict';
-        return [
-            animations.state('true', animations.style({ height: 0, 'overflow-y': 'hidden' })),
-            animations.transition('true => false', [animations.animate(defaultAnimationTiming, animations.style({ height: '*', 'overflow-y': 'hidden' }))]),
-            animations.transition('false => true', [animations.style({ height: '*', 'overflow-y': 'hidden' }), animations.animate(defaultAnimationTiming)]),
-        ];
-    }
 
     /*
      * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
@@ -25502,13 +26207,6 @@
      * This software is released under MIT license.
      * The full license information can be found in LICENSE in the root directory of this project.
      */
-    function fade(opacity) {
-        if (opacity === void 0) { opacity = 1; }
-        return [
-            animations.transition('void => *', [animations.style({ opacity: 0 }), animations.animate(defaultAnimationTiming, animations.style({ opacity: opacity }))]),
-            animations.transition('* => void', [animations.animate(defaultAnimationTiming, animations.style({ opacity: 0 }))]),
-        ];
-    }
 
     /*
      * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
@@ -25521,28 +26219,6 @@
      * This software is released under MIT license.
      * The full license information can be found in LICENSE in the root directory of this project.
      */
-    function fadeSlide(direction) {
-        var transform = null;
-        if (direction === 'up') {
-            transform = 'translate(0, 25%)';
-        }
-        else if (direction === 'down') {
-            transform = 'translate(0, -25%)';
-        }
-        else if (direction === 'left') {
-            transform = 'translate(25%, 0)';
-        }
-        else if (direction === 'right') {
-            transform = 'translate(-25%, 0)';
-        }
-        else {
-            throw new Error('Unknown direction ' + direction + ' for slide animation.');
-        }
-        return [
-            animations.transition('void => *', [animations.style({ opacity: 0, transform: transform }), animations.animate(defaultAnimationTiming)]),
-            animations.transition('* => void', [animations.animate(defaultAnimationTiming, animations.style({ opacity: 0, transform: transform }))]),
-        ];
-    }
 
     /*
      * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
@@ -25555,28 +26231,6 @@
      * This software is released under MIT license.
      * The full license information can be found in LICENSE in the root directory of this project.
      */
-    function slide(direction) {
-        var transform = null;
-        if (direction === 'up') {
-            transform = 'translate(0, 25%)';
-        }
-        else if (direction === 'down') {
-            transform = 'translate(0, -25%)';
-        }
-        else if (direction === 'left') {
-            transform = 'translate(25%, 0)';
-        }
-        else if (direction === 'right') {
-            transform = 'translate(-25%, 0)';
-        }
-        else {
-            throw new Error('Unknown direction ' + direction + ' for slide animation.');
-        }
-        return [
-            animations.transition('void => *', [animations.style({ transform: transform }), animations.animate(defaultAnimationTiming)]),
-            animations.transition('* => void', [animations.animate(defaultAnimationTiming, animations.style({ transform: transform }))]),
-        ];
-    }
 
     /*
      * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
@@ -25613,174 +26267,16 @@
      * This software is released under MIT license.
      * The full license information can be found in LICENSE in the root directory of this project.
      */
-    exports.ClrAriaLivePoliteness = void 0;
-    (function (ClrAriaLivePoliteness) {
-        ClrAriaLivePoliteness["off"] = "off";
-        ClrAriaLivePoliteness["polite"] = "polite";
-        ClrAriaLivePoliteness["assertive"] = "assertive";
-    })(exports.ClrAriaLivePoliteness || (exports.ClrAriaLivePoliteness = {}));
-    /**
-     * Time in milliseconds before inserting the content into the container
-     */
-    var ARIA_LIVE_TICK = 100;
-    /**
-     * @deprecated
-     *
-     * -- ClrAriaLiveService is deprecated in 5.0 to be removed in 6.0 --
-     * Please consider using the LiveAnnouncer in the Angular Material CDK
-     * if your project needs this functionality.
-     * More info: https://material.angular.io/cdk/a11y/overview#example-1
-     *
-     * This service handle `aria-live` accessibility attribute. The issue is that you need
-     * to have the DOM Element with attribute `aria-live` before you could insert content
-     * and SR (Screen Reader) pick the change and announce it.
-     *
-     * ```typescript
-     * import { ClrAriaLiveService } from 'src/clr-angular/utils/a11y/aria-live.service';
-     *
-     * @Component({
-     * selector: 'clr-demo-component',
-     * providers: [ClrAriaLiveService],
-     * template: `
-     *   <ng-content></ng-content>
-     * `,
-     * })
-     * export class DemoComponent {
-     *  constructor(ariaLiveService: ClrAriaLiveService) {}
-     *
-     *  public actionThatWillTriggerChange() {
-     *    this.ariaLiveService.announce('message that I want to announce to SR');
-     *  }
-     * }
-     * ```
-     *
-     */
-    var ClrAriaLiveService = /** @class */ (function () {
-        function ClrAriaLiveService(ngZone, _document, platformId) {
-            this.ngZone = ngZone;
-            this.platformId = platformId;
-            this._id = "clr-aria-live-element-" + uniqueIdFactory();
-            this.document = _document;
-        }
-        Object.defineProperty(ClrAriaLiveService.prototype, "id", {
-            /**
-             * get access to the internal HTML `id` that gonna be used for the AriaLive container.
-             * @return ID of the DOM Element as string.
-             */
-            get: function () {
-                return this._id;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        /**
-         * Append text content inside the AriaLive Container. This method will check if the
-         * DOM Element is existing if not it will create one for us and the will apply the text.
-         *
-         * ```typescript
-         * this.ariaLiveService.announce(this.el.nativeElement);
-         * // or
-         * this.ariaLiveService.announce('Message to announce to SR');
-         * ```
-         *
-         * @remark
-         * When second argument is `AriaLivePoliteness.off` we won't create aria container or update it.
-         * The reason for that is that we don't want to do additional work if the SR will ignore it.
-         *
-         * @param message - This could be simple string or HTMLElement
-         * @param politeness - 'polite', 'assertive' or 'off'
-         */
-        ClrAriaLiveService.prototype.announce = function (message, politeness) {
-            var _this = this;
-            if (politeness === void 0) { politeness = exports.ClrAriaLivePoliteness.polite; }
-            if (politeness === exports.ClrAriaLivePoliteness.off) {
-                return;
-            }
-            if (!this.ariaLiveElement && i1.isPlatformBrowser(this.platformId)) {
-                this.ariaLiveElement = this.createContainer();
-            }
-            message = typeof message !== 'string' && i1.isPlatformBrowser(this.platformId) ? message.textContent : message;
-            // when there is no message do NOTHING!
-            if (!message) {
-                return;
-            }
-            this.ariaLiveElement.setAttribute('aria-live', politeness);
-            // This 100ms timeout is necessary for some browser + screen-reader combinations:
-            // - Both JAWS and NVDA over IE11 will not announce anything without a non-zero timeout.
-            // - With Chrome and IE11 with NVDA or JAWS, a repeated (identical) message won't be read a
-            //   second time without clearing and then using a non-zero delay.
-            // (using JAWS 17 at time of this writing).
-            this.ngZone.runOutsideAngular(function () {
-                // This clearTimeout will stop all older messages from announcing
-                // in the case where the messages are comming too fast we gonna try to append only
-                // the last one. That's what the SR will try to do anyway.
-                clearTimeout(_this.previousTimeout);
-                _this.previousTimeout = setTimeout(function () {
-                    _this.ariaLiveElement.textContent = message;
-                }, ARIA_LIVE_TICK);
-            });
-        };
-        /**
-         * onDestroy life cycle - must stop all active setTimeouts and remove the AriaLive
-         * container from the document.
-         */
-        ClrAriaLiveService.prototype.ngOnDestroy = function () {
-            clearTimeout(this.previousTimeout);
-            if (i1.isPlatformBrowser(this.platformId) && this.ariaLiveElement) {
-                this.document.body.removeChild(this.ariaLiveElement);
-                this.ariaLiveElement = null;
-            }
-        };
-        /**
-         * Create AriaLive DOM element as a last child of the document.
-         * After the element is created, we gonna apply Clarity class to hide it from
-         * the screen and set the `aria-live` politness.
-         *
-         * `clr-sr-only` is the CSS class that is used to hide the element from the screen.
-         *
-         * @remark
-         * Calling this method multiple times will create multiple DOM Elements, that
-         * won't be tracked and will be GC after the service is destroyed.
-         *
-         * @return AriaLive container as HTMLElement
-         *
-         */
-        ClrAriaLiveService.prototype.createContainer = function () {
-            var ariaLiveElement = this.document.createElement('div');
-            ariaLiveElement.setAttribute('id', this.id);
-            // Use clarity screen reader class to hide the dom element
-            // and fix the scrollbar shake
-            ariaLiveElement.classList.add('clr-sr-only');
-            ariaLiveElement.setAttribute('aria-atomic', 'true');
-            ariaLiveElement.setAttribute('aria-live', exports.ClrAriaLivePoliteness.polite);
-            this.document.body.appendChild(ariaLiveElement);
-            return ariaLiveElement;
-        };
-        return ClrAriaLiveService;
-    }());
-    ClrAriaLiveService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function ClrAriaLiveService_Factory() { return new ClrAriaLiveService(i0__namespace.ɵɵinject(i0__namespace.NgZone), i0__namespace.ɵɵinject(i1__namespace.DOCUMENT), i0__namespace.ɵɵinject(i0__namespace.PLATFORM_ID)); }, token: ClrAriaLiveService, providedIn: "root" });
-    ClrAriaLiveService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root',
-                },] }
+    var CLR_MENU_POSITIONS = [
+        'bottom-left',
+        'bottom-right',
+        'top-left',
+        'top-right',
+        'left-bottom',
+        'left-top',
+        'right-bottom',
+        'right-top',
     ];
-    ClrAriaLiveService.ctorParameters = function () { return [
-        { type: i0.NgZone },
-        { type: undefined, decorators: [{ type: i0.Inject, args: [i1.DOCUMENT,] }] },
-        { type: undefined, decorators: [{ type: i0.Inject, args: [i0.PLATFORM_ID,] }] }
-    ]; };
-
-    /*
-     * 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.
-     */
-
-    /*
-     * 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.
-     */
 
     /*
      * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
@@ -26131,6 +26627,7 @@
     exports["ÇlrWrappedCell"] = WrappedCell;
     exports["ÇlrWrappedColumn"] = WrappedColumn;
     exports["ÇlrWrappedRow"] = WrappedRow;
+    exports["ɵ0"] = ɵ0;
     exports["ɵa"] = domAdapterFactory;
     exports["ɵb"] = LayoutService;
     exports["ɵba"] = AlertIconAndTypesService;
@@ -26189,49 +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["ɵdx"] = ClrTemplateRefModule;
-    exports["ɵdy"] = TEMPLATE_REF_DIRECTIVES;
-    exports["ɵdz"] = TemplateRefContainer;
+    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"] = TabsService;
-    exports["ɵeb"] = TABS_ID;
-    exports["ɵec"] = tokenFactory;
-    exports["ɵed"] = TABS_ID_PROVIDER;
-    exports["ɵee"] = VerticalNavService;
-    exports["ɵef"] = VerticalNavIconService;
-    exports["ɵeg"] = VerticalNavGroupRegistrationService;
-    exports["ɵeh"] = VerticalNavGroupService;
-    exports["ɵei"] = TooltipIdService;
-    exports["ɵej"] = WizardNavigationService;
-    exports["ɵek"] = PageCollectionService;
-    exports["ɵel"] = ButtonHubService;
-    exports["ɵem"] = HeaderActionService;
-    exports["ɵen"] = AccordionService;
-    exports["ɵeo"] = panelAnimation;
-    exports["ɵep"] = stepAnimation;
-    exports["ɵeq"] = defaultAnimationTiming;
-    exports["ɵer"] = StepperService;
-    exports["ɵes"] = 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;