@clr/angular 12.0.13 → 12.0.14

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\n              status=\"info\"\n              [attr.shape]=\"show ? 'eye-hide' : 'eye'\"\n              [attr.title]=\"show ? commonStrings.keys.hide : commonStrings.keys.show\"\n            ></cds-icon>\n            <span class=\"clr-sr-only\">{{\n              show ? commonStrings.keys.passwordHide : commonStrings.keys.passwordShow\n            }}</span>\n          </button>\n        </div>\n        <cds-icon\n          *ngIf=\"showInvalid\"\n          class=\"clr-validate-icon\"\n          status=\"danger\"\n          shape=\"exclamation-circle\"\n          aria-hidden=\"true\"\n        ></cds-icon>\n        <cds-icon\n          *ngIf=\"showValid\"\n          class=\"clr-validate-icon\"\n          shape=\"check-circle\"\n          status=\"success\"\n          aria-hidden=\"true\"\n        ></cds-icon>\n      </div>\n      <ng-content select=\"clr-control-helper\" *ngIf=\"showHelper\"></ng-content>\n      <ng-content select=\"clr-control-error\" *ngIf=\"showInvalid\"></ng-content>\n      <ng-content select=\"clr-control-success\" *ngIf=\"showValid\"></ng-content>\n    </div>\n  ",
                     host: {
                         '[class.clr-form-control]': 'true',
                         '[class.clr-form-control-disabled]': 'control?.disabled',
@@ -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.
@@ -14615,7 +14642,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 +19135,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 +19170,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 +19194,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,220 +19208,801 @@
      * 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;
-            return _this;
+    /*
+     * 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%)';
         }
-        Object.defineProperty(ActiveOompaLoompa.prototype, "flavor", {
-            get: function () {
-                return this.ifActive.current === this.id;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return ActiveOompaLoompa;
-    }(OompaLoompa));
-    ActiveOompaLoompa.decorators = [
-        { type: i0.Directive, args: [{ selector: '[clrTabLink], clr-tab-content' },] }
-    ];
-    ActiveOompaLoompa.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: TabsWillyWonka, decorators: [{ type: i0.Optional }] },
-        { type: Number, decorators: [{ type: i0.Inject, args: [IF_ACTIVE_ID,] }] },
-        { type: IfActiveService }
-    ]; };
+        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.
      */
-    var TabsLayout;
-    (function (TabsLayout) {
-        TabsLayout["HORIZONTAL"] = "horizontal";
-        TabsLayout["VERTICAL"] = "vertical";
-    })(TabsLayout || (TabsLayout = {}));
 
     /*
      * 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 TabsService = /** @class */ (function () {
-        function TabsService() {
-            this._children = [];
-            this.layout = TabsLayout.HORIZONTAL;
-        }
-        TabsService.prototype.register = function (tab) {
-            this._children.push(tab);
+    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');
+        console.log(ariaLabel);
+        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.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", {
+            get: function () {
+                return this.ifActive.current === this.id;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return ActiveOompaLoompa;
+    }(OompaLoompa));
+    ActiveOompaLoompa.decorators = [
+        { type: i0.Directive, args: [{ selector: '[clrTabLink], clr-tab-content' },] }
+    ];
+    ActiveOompaLoompa.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: TabsWillyWonka, decorators: [{ type: i0.Optional }] },
+        { type: Number, decorators: [{ type: i0.Inject, args: [IF_ACTIVE_ID,] }] },
+        { type: IfActiveService }
+    ]; };
+
+    /*
+     * 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 TabsLayout;
+    (function (TabsLayout) {
+        TabsLayout["HORIZONTAL"] = "horizontal";
+        TabsLayout["VERTICAL"] = "vertical";
+    })(TabsLayout || (TabsLayout = {}));
+
+    /*
+     * 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 TabsService = /** @class */ (function () {
+        function TabsService() {
+            this._children = [];
+            this.layout = TabsLayout.HORIZONTAL;
+        }
+        TabsService.prototype.register = function (tab) {
+            this._children.push(tab);
         };
         Object.defineProperty(TabsService.prototype, "children", {
             get: function () {
@@ -23422,7 +24049,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 +24614,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 +25878,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 +25967,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 +25997,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 +26009,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 +26021,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 +26033,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 +26069,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 +26429,7 @@
     exports["ÇlrWrappedCell"] = WrappedCell;
     exports["ÇlrWrappedColumn"] = WrappedColumn;
     exports["ÇlrWrappedRow"] = WrappedRow;
+    exports["ɵ0"] = ɵ0;
     exports["ɵa"] = domAdapterFactory;
     exports["ɵb"] = LayoutService;
     exports["ɵba"] = AlertIconAndTypesService;
@@ -26209,29 +26508,30 @@
     exports["ɵdu"] = ScrollingService;
     exports["ɵdv"] = ButtonInGroupService;
     exports["ɵdw"] = ResponsiveNavigationService;
-    exports["ɵdx"] = ClrTemplateRefModule;
-    exports["ɵdy"] = TEMPLATE_REF_DIRECTIVES;
-    exports["ɵdz"] = TemplateRefContainer;
+    exports["ɵdy"] = FocusTrap;
+    exports["ɵdz"] = ClrTemplateRefModule;
     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"] = TEMPLATE_REF_DIRECTIVES;
+    exports["ɵeb"] = TemplateRefContainer;
+    exports["ɵec"] = TabsService;
+    exports["ɵed"] = TABS_ID;
+    exports["ɵee"] = tokenFactory;
+    exports["ɵef"] = TABS_ID_PROVIDER;
+    exports["ɵeg"] = VerticalNavService;
+    exports["ɵeh"] = VerticalNavIconService;
+    exports["ɵei"] = VerticalNavGroupRegistrationService;
+    exports["ɵej"] = VerticalNavGroupService;
+    exports["ɵek"] = TooltipIdService;
+    exports["ɵel"] = WizardNavigationService;
+    exports["ɵem"] = PageCollectionService;
+    exports["ɵen"] = ButtonHubService;
+    exports["ɵeo"] = HeaderActionService;
+    exports["ɵep"] = AccordionService;
+    exports["ɵeq"] = panelAnimation;
+    exports["ɵer"] = stepAnimation;
+    exports["ɵes"] = defaultAnimationTiming;
+    exports["ɵet"] = StepperService;
+    exports["ɵeu"] = TimelineIconAttributeService;
     exports["ɵf"] = clrRootDropdownFactory;
     exports["ɵg"] = ROOT_DROPDOWN_PROVIDER;
     exports["ɵh"] = POPOVER_HOST_ANCHOR;