@clr/angular 12.0.13 → 12.1.0

package/fesm2015/clr-angular.js

@@ -4,9 +4,11 @@ import { ClarityIcons, ellipsisHorizontalIcon, exclamationCircleIcon, checkCircl
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT, isPlatformBrowser, getLocaleDayNames, FormStyle, TranslationWidth, getLocaleMonthNames, getLocaleFirstDayOfWeek, getLocaleDateFormat, FormatWidth, NgForOf } from '@angular/common';
 import { Subject, fromEvent, BehaviorSubject, of, ReplaySubject, isObservable, combineLatest, Observable } from 'rxjs';
-import { filter, debounceTime, first, startWith, switchMap, take, map, tap, distinctUntilChanged, pairwise } from 'rxjs/operators';
+import { filter, debounceTime, first, startWith, switchMap, take, map, takeUntil, tap, distinctUntilChanged, pairwise } from 'rxjs/operators';
 import { trigger, transition, style, animate, keyframes, state } from '@angular/animations';
 import { NgControl, FormsModule, SelectMultipleControlValueAccessor, FormControl, FormGroup, FormGroupName, NgModelGroup, FormGroupDirective, NgForm } from '@angular/forms';
+import { FocusTrapTrackerService, createId, isFocusable, isHTMLElement } from '@cds/core/internal';
+import '@cds/core/internal-components/close-button/register.js';
 import '@cds/core/icon/register';
 
 /*
@@ -1297,6 +1299,19 @@ const commonStringsDefault = {
     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',
 };
 
 /*
@@ -4497,7 +4512,7 @@ class ClrCalendar {
     }
 }
 ClrCalendar.decorators = [
-    { type: 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: 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 = () => [
     { type: LocaleHelperService },
@@ -4566,9 +4581,23 @@ DateFormControlService.decorators = [
  * 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
 const DATEPICKER_ENABLE_BREAKPOINT = 768;
+const SMALL_BREAKPOINT = 576;
+const MEDIUM_BREAKPOINT = 768;
+const LARGE_BREAKPOINT = 992;
+const EXTRA_LARGE_BREAKPOINT = 1200;
 
 /*
  * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
@@ -5823,11 +5852,10 @@ ClrPasswordContainer.decorators = [
             class="clr-input-group-icon-action"
             type="button"
           >
-            <cds-icon
-              status="info"
-              [attr.shape]="show ? 'eye-hide' : 'eye'"
-              [attr.title]="show ? commonStrings.keys.hide : commonStrings.keys.show"
-            ></cds-icon>
+            <cds-icon status="info" [attr.shape]="show ? 'eye-hide' : 'eye'"></cds-icon>
+            <span class="clr-sr-only">{{
+              show ? commonStrings.keys.passwordHide : commonStrings.keys.passwordShow
+            }}</span>
           </button>
         </div>
         <cds-icon
@@ -7770,7 +7798,7 @@ class ClrCombobox extends WrappedFormControl {
 ClrCombobox.decorators = [
     { type: Component, args: [{
                 selector: 'clr-combobox',
-                template: "<!--\n* Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.\n* This software is released under MIT license.\n* The full license information can be found in LICENSE in the root directory of this project.\n-->\n\n<!-- The (click) handler is needed to auto-focus on input field which can not currently occupy the whole\n     width of the component, after being wrapped to a new line -->\n<div\n  class=\"clr-combobox-wrapper\"\n  clrPopoverAnchor\n  (click)=\"focusInput()\"\n  [class.multi]=\"multiSelect\"\n  [class.invalid]=\"invalid\"\n>\n  <span\n    *ngIf=\"multiSelect && optionSelectionService.selectionModel.model\"\n    role=\"grid\"\n    clrRovingTabindex\n    [clrRovingTabindexDisabled]=\"control?.disabled\"\n    clrDirection=\"both\"\n    [attr.aria-label]=\"getSelectionAriaLabel()\"\n    [attr.aria-disabled]=\"control?.disabled? true: null\"\n  >\n    <span *ngFor=\"let item of multiSelectModel; let i = index\" class=\"label label-combobox-pill\" role=\"row\">\n      <span role=\"gridcell\">\n        <span class=\"clr-combobox-pill-content\" clrKeyFocusItem>\n          <ng-container\n            *ngIf=\"optionSelected\"\n            [ngTemplateOutlet]=\"optionSelected.template\"\n            [ngTemplateOutletContext]=\"{$implicit: optionSelectionService.selectionModel.model[i]}\"\n          >\n          </ng-container>\n        </span>\n      </span>\n      <span role=\"gridcell\">\n        <button\n          clrKeyFocusItem\n          type=\"button\"\n          class=\"clr-combobox-remove-btn\"\n          [disabled]=\"control?.disabled? true: null\"\n          [attr.aria-label]=\"commonStrings.keys.comboboxDelete + ' ' + optionSelectionService.selectionModel.toString(displayField, i)\"\n          (click)=\"unselect(item)\"\n        >\n          <cds-icon shape=\"window-close\" size=\"12\"></cds-icon>\n        </button>\n      </span>\n    </span>\n  </span>\n\n  <span class=\"clr-combobox-input-wrapper\">\n    <input\n      #textboxInput\n      type=\"text\"\n      [id]=\"inputId()\"\n      role=\"combobox\"\n      class=\"clr-input clr-combobox-input\"\n      [(ngModel)]=\"searchText\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      [attr.aria-expanded]=\"openState\"\n      [attr.aria-owns]=\"ariaOwns\"\n      aria-haspopup=\"listbox\"\n      aria-autocomplete=\"list\"\n      autocomplete=\"off\"\n      [attr.aria-invalid]=\"control?.invalid? true: null\"\n      [disabled]=\"control?.disabled? true: null\"\n      [attr.aria-activedescendant]=\"getActiveDescendant()\"\n      [attr.placeholder]=\"placeholder\"\n      aria-multiline=\"false\"\n    />\n  </span>\n\n  <!-- No click handler, as it uses the handler on the .clr-combobox-wrapper -->\n  <button\n    clrPopoverOpenCloseButton\n    #trigger\n    type=\"button\"\n    class=\"clr-combobox-trigger\"\n    tabindex=\"-1\"\n    [disabled]=\"control?.disabled || null\"\n    [attr.aria-label]=\"commonStrings.keys.comboboxOpen\"\n  >\n    <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n  </button>\n\n  <div class=\"clr-focus-indicator\" [class.clr-focus]=\"focused\"></div>\n</div>\n\n<!-- Both close handlers are handled manually due to issues in Edge browser.\n     Additionally 'outsideClickToClose' has complex handling that's necessary\n     to be manual due to the component architecture -->\n<div role=\"dialog\" *clrPopoverContent=\"openState at smartPosition; outsideClickToClose: false; scrollToClose: false\">\n  <ng-content></ng-content>\n</div>\n",
+                template: "<!--\n* Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.\n* This software is released under MIT license.\n* The full license information can be found in LICENSE in the root directory of this project.\n-->\n\n<!-- The (click) handler is needed to auto-focus on input field which can not currently occupy the whole\n     width of the component, after being wrapped to a new line -->\n<div\n  class=\"clr-combobox-wrapper\"\n  clrPopoverAnchor\n  (click)=\"focusInput()\"\n  [class.multi]=\"multiSelect\"\n  [class.invalid]=\"invalid\"\n>\n  <span\n    *ngIf=\"multiSelect && optionSelectionService.selectionModel.model\"\n    role=\"grid\"\n    clrRovingTabindex\n    [clrRovingTabindexDisabled]=\"control?.disabled\"\n    clrDirection=\"both\"\n    [attr.aria-label]=\"getSelectionAriaLabel()\"\n    [attr.aria-disabled]=\"control?.disabled? true: null\"\n  >\n    <span *ngFor=\"let item of multiSelectModel; let i = index\" class=\"label label-combobox-pill\" role=\"row\">\n      <span role=\"gridcell\">\n        <span class=\"clr-combobox-pill-content\" clrKeyFocusItem>\n          <ng-container\n            *ngIf=\"optionSelected\"\n            [ngTemplateOutlet]=\"optionSelected.template\"\n            [ngTemplateOutletContext]=\"{$implicit: optionSelectionService.selectionModel.model[i]}\"\n          >\n          </ng-container>\n        </span>\n      </span>\n      <span role=\"gridcell\">\n        <button\n          clrKeyFocusItem\n          type=\"button\"\n          class=\"clr-combobox-remove-btn\"\n          [disabled]=\"control?.disabled? true: null\"\n          [attr.aria-label]=\"commonStrings.keys.comboboxDelete + ' ' + optionSelectionService.selectionModel.toString(displayField, i)\"\n          (click)=\"unselect(item)\"\n        >\n          <cds-icon shape=\"window-close\" size=\"12\"></cds-icon>\n        </button>\n      </span>\n    </span>\n  </span>\n\n  <span class=\"clr-combobox-input-wrapper\" role=\"combobox\">\n    <input\n      #textboxInput\n      type=\"text\"\n      [id]=\"inputId()\"\n      class=\"clr-input clr-combobox-input\"\n      [(ngModel)]=\"searchText\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      [attr.aria-expanded]=\"openState\"\n      [attr.aria-owns]=\"ariaOwns\"\n      aria-haspopup=\"listbox\"\n      aria-autocomplete=\"list\"\n      autocomplete=\"off\"\n      [attr.aria-invalid]=\"control?.invalid? true: null\"\n      [disabled]=\"control?.disabled? true: null\"\n      [attr.aria-activedescendant]=\"getActiveDescendant()\"\n      [attr.placeholder]=\"placeholder\"\n    />\n  </span>\n\n  <!-- No click handler, as it uses the handler on the .clr-combobox-wrapper -->\n  <button\n    clrPopoverOpenCloseButton\n    #trigger\n    type=\"button\"\n    class=\"clr-combobox-trigger\"\n    tabindex=\"-1\"\n    [disabled]=\"control?.disabled || null\"\n    [attr.aria-label]=\"commonStrings.keys.comboboxOpen\"\n  >\n    <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n  </button>\n\n  <div class=\"clr-focus-indicator\" [class.clr-focus]=\"focused\"></div>\n</div>\n\n<!-- Both close handlers are handled manually due to issues in Edge browser.\n     Additionally 'outsideClickToClose' has complex handling that's necessary\n     to be manual due to the component architecture -->\n<div role=\"dialog\" *clrPopoverContent=\"openState at smartPosition; outsideClickToClose: false; scrollToClose: false\">\n  <ng-content></ng-content>\n</div>\n",
                 providers: [
                     ClrPopoverToggleService,
                     { provide: POPOVER_HOST_ANCHOR, useExisting: ElementRef },
@@ -11575,7 +11603,7 @@ ClrDatagridPlaceholder.decorators = [
                 template: `
     <div class="datagrid-placeholder" [class.datagrid-empty]="emptyDatagrid" role="row">
       <div class="datagrid-placeholder-image" *ngIf="emptyDatagrid"></div>
-      <span role="gridcell"><ng-content *ngIf="emptyDatagrid"></ng-content></span>
+      <span role="gridcell" class="datagrid-placeholder-content"><ng-content *ngIf="emptyDatagrid"></ng-content></span>
     </div>
   `,
                 host: { '[class.datagrid-placeholder-container]': 'true' }
@@ -12709,10 +12737,10 @@ var DatagridColumnChanges;
     DatagridColumnChanges[DatagridColumnChanges["WIDTH"] = 0] = "WIDTH";
     DatagridColumnChanges[DatagridColumnChanges["HIDDEN"] = 1] = "HIDDEN";
 })(DatagridColumnChanges || (DatagridColumnChanges = {}));
-const ɵ1 = key => DatagridColumnChanges[key], ɵ0 = key => key === parseInt(key, 10);
+const ɵ1 = key => DatagridColumnChanges[key], ɵ0$1 = key => key === parseInt(key, 10);
 const 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.
@@ -12762,13 +12790,187 @@ ColumnsService.decorators = [
     { type: Injectable }
 ];
 
+/*
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+function getTabableItems(el) {
+    const tabableSelector = [
+        'a[href]',
+        'area[href]',
+        'input:not([disabled])',
+        'button:not([disabled])',
+        'select:not([disabled])',
+        'textarea:not([disabled])',
+        'iframe',
+        'object',
+        'embed',
+        '*[tabindex]',
+        '*[contenteditable=true]',
+        '[role=button]:not([disabled])',
+    ].join(',');
+    return Array.from(el.querySelectorAll(tabableSelector));
+}
+class KeyNavigationGridController {
+    constructor(zone) {
+        this.zone = zone;
+        this.listenersAdded = false;
+        this.destroy$ = new Subject();
+        this.config = {
+            keyGridRows: '[role=row]:not(.datagrid-placeholder)',
+            keyGridCells: '[role=gridcell]:not(.datagrid-hidden-column):not(.datagrid-placeholder-content), [role=columnheader]:not(.datagrid-hidden-column):not(.datagrid-placeholder-content), .datagrid-detail-caret',
+            keyGrid: '[role=grid]',
+        };
+    }
+    get grid() {
+        var _a;
+        return (_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelector(this.config.keyGrid);
+    }
+    get rows() {
+        var _a;
+        return (_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.config.keyGridRows);
+    }
+    get cells() {
+        var _a;
+        return (_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.config.keyGridCells);
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    addListeners() {
+        if (this.listenersAdded) {
+            return;
+        }
+        this.zone.runOutsideAngular(() => {
+            fromEvent(this.grid, 'mousedown')
+                .pipe(takeUntil(this.destroy$))
+                .subscribe((e) => {
+                // preserve right click for context menus & keyboard mouse control https://apple.stackexchange.com/questions/32715/how-do-i-open-the-context-menu-from-a-mac-keyboard
+                if (e.buttons === 1 && !e.ctrlKey) {
+                    const activeCell = this.cells
+                        ? Array.from(this.cells).find(c => c === e.target || c === e.target.closest(this.config.keyGridCells))
+                        : null;
+                    if (activeCell) {
+                        this.setActiveCell(activeCell);
+                    }
+                }
+            });
+            fromEvent(this.grid, 'keydown')
+                .pipe(takeUntil(this.destroy$))
+                .subscribe((e) => {
+                // Skip column resize events
+                if (e.target.classList.contains('drag-handle') &&
+                    (e.code === 'ArrowLeft' || e.code === 'ArrowRight')) {
+                    return;
+                }
+                if (e.code === 'ArrowUp' ||
+                    e.code === 'ArrowDown' ||
+                    e.code === 'ArrowLeft' ||
+                    e.code === 'ArrowRight' ||
+                    e.code === 'End' ||
+                    e.code === 'Home' ||
+                    e.code === 'PageUp' ||
+                    e.code === 'PageDown') {
+                    const { x, y } = this.getNextItemCoordinate(e);
+                    const activeItem = this.rows
+                        ? Array.from(this.rows[y].querySelectorAll(this.config.keyGridCells))[x]
+                        : null;
+                    if (activeItem) {
+                        this.setActiveCell(activeItem);
+                    }
+                    e.preventDefault();
+                }
+            });
+        });
+        this.listenersAdded = true;
+    }
+    initializeKeyGrid(host) {
+        this.host = host;
+        this.addListeners();
+        this.resetKeyGrid();
+    }
+    resetKeyGrid() {
+        var _a;
+        (_a = this.cells) === null || _a === void 0 ? void 0 : _a.forEach((i) => i.setAttribute('tabindex', '-1'));
+        const firstCell = this.cells ? this.cells[0] : null;
+        firstCell === null || firstCell === void 0 ? void 0 : firstCell.setAttribute('tabindex', '0');
+    }
+    setActiveCell(activeCell) {
+        const prior = this.cells ? Array.from(this.cells).find(c => c.getAttribute('tabindex') === '0') : null;
+        if (prior) {
+            prior.setAttribute('tabindex', '-1');
+        }
+        activeCell.setAttribute('tabindex', '0');
+        const items = getTabableItems(activeCell);
+        const item = activeCell.getAttribute('role') !== 'columnheader' && items[0] ? items[0] : activeCell;
+        item.focus();
+    }
+    getNextItemCoordinate(e) {
+        var _a;
+        let currentCell = this.cells ? Array.from(this.cells).find(i => i.getAttribute('tabindex') === '0') : null;
+        if (e.code === 'Tab') {
+            currentCell = document.activeElement;
+        }
+        const currentRow = this.rows && currentCell ? Array.from(this.rows).find(r => r.contains(currentCell)) : null;
+        const numOfRows = this.rows ? this.rows.length - 1 : 0;
+        const numOfColumns = this.cells ? this.cells.length / this.rows.length - 1 : 0;
+        let x = currentRow && currentCell
+            ? Array.from(currentRow.querySelectorAll(this.config.keyGridCells)).indexOf(currentCell)
+            : 0;
+        let y = currentRow && currentCell && this.rows ? Array.from(this.rows).indexOf(currentRow) : 0;
+        const dir = this.host.dir;
+        const inlineStart = dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+        const inlineEnd = dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
+        const itemsPerPage = Math.floor(((_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelector('.datagrid').clientHeight) / this.rows[0].clientHeight) - 1 || 0;
+        if (e.code === 'ArrowUp' && y !== 0) {
+            y = y - 1;
+        }
+        else if (e.code === 'ArrowDown' && y < numOfRows) {
+            y = y + 1;
+        }
+        else if (e.code === inlineStart && x !== 0) {
+            x = x - 1;
+        }
+        else if (e.code === inlineEnd && x < numOfColumns) {
+            x = x + 1;
+        }
+        else if (e.code === 'End') {
+            x = numOfColumns;
+            if (e.ctrlKey) {
+                y = numOfRows;
+            }
+        }
+        else if (e.code === 'Home') {
+            x = 0;
+            if (e.ctrlKey) {
+                y = 0;
+            }
+        }
+        else if (e.code === 'PageUp') {
+            y = y - itemsPerPage > 0 ? y - itemsPerPage : 0;
+        }
+        else if (e.code === 'PageDown') {
+            y = y + itemsPerPage < numOfRows ? y + itemsPerPage : numOfRows;
+        }
+        return { x, y };
+    }
+}
+KeyNavigationGridController.decorators = [
+    { type: Injectable }
+];
+KeyNavigationGridController.ctorParameters = () => [
+    { type: NgZone }
+];
+
 /*
  * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrDatagrid {
-    constructor(organizer, items, expandableRows, selection, rowActionService, stateProvider, displayMode, renderer, detailService, datagridId, el, page, commonStrings) {
+    constructor(organizer, items, expandableRows, selection, rowActionService, stateProvider, displayMode, renderer, detailService, datagridId, el, page, commonStrings, columnsService, keyNavigation) {
         this.organizer = organizer;
         this.items = items;
         this.expandableRows = expandableRows;
@@ -12781,6 +12983,8 @@ class ClrDatagrid {
         this.el = el;
         this.page = page;
         this.commonStrings = commonStrings;
+        this.columnsService = columnsService;
+        this.keyNavigation = keyNavigation;
         /* reference to the enum so that template can access */
         this.SELECTION_TYPE = SelectionType;
         /**
@@ -12906,6 +13110,7 @@ class ClrDatagrid {
      * Our setup happens in the view of some of our components, so we wait for it to be done before starting
      */
     ngAfterViewInit() {
+        this.keyNavigation.initializeKeyGrid(this.el.nativeElement);
         // TODO: determine if we can get rid of provider wiring in view init so that subscriptions can be done earlier
         this.refresh.emit(this.stateProvider.state);
         this._subscriptions.push(this.stateProvider.change.subscribe(state => this.refresh.emit(state)), this.selection.change.subscribe(s => {
@@ -12915,11 +13120,16 @@ class ClrDatagrid {
             else if (this.selection.selectionType === SelectionType.Multi) {
                 this.selectedChanged.emit(s);
             }
-        }), this.page.change.subscribe(() => {
+        }), 
+        // Reinitialize arrow key navigation on page changes
+        this.page.change.subscribe(() => {
+            this.keyNavigation.resetKeyGrid();
             if (!this.clrDgDisablePageFocus) {
                 this.datagridTable.nativeElement.focus();
             }
         }), 
+        // Reinitialize arrow key navigation on hide/unhide columns
+        combineLatest(this.columnsService.columns).subscribe(() => { var _a; return (_a = this.keyNavigation) === null || _a === void 0 ? void 0 : _a.resetKeyGrid(); }), 
         // A subscription that listens for displayMode changes on the datagrid
         this.displayMode.view.subscribe(viewChange => {
             // Remove any projected columns from the projectedDisplayColumns container
@@ -12970,7 +13180,7 @@ class ClrDatagrid {
 ClrDatagrid.decorators = [
     { type: Component, args: [{
                 selector: 'clr-datagrid',
-                template: "<!--\n  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<ng-content select=\"clr-dg-action-bar\"></ng-content>\n<div class=\"datagrid-outer-wrapper\">\n  <div class=\"datagrid-inner-wrapper\">\n    <div class=\"datagrid\" #datagrid [attr.aria-hidden]=\"detailService.isOpen ? true : null\">\n      <div class=\"datagrid-table-wrapper\">\n        <div role=\"grid\" class=\"datagrid-table\" tabindex=\"-1\" #datagridTable>\n          <div role=\"rowgroup\" class=\"datagrid-header\">\n            <div role=\"row\" class=\"datagrid-row\">\n              <div class=\"datagrid-row-master datagrid-row-flex\">\n                <div class=\"datagrid-row-sticky\">\n                  <!--header for datagrid where you can select multiple rows -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n                    *ngIf=\"selection.selectionType === SELECTION_TYPE.Multi\"\n                  >\n                    <div class=\"clr-checkbox-wrapper\">\n                      <input\n                        type=\"checkbox\"\n                        [id]=\"selectAllId\"\n                        [(ngModel)]=\"allSelected\"\n                        [attr.aria-label]=\"commonStrings.keys.selectAll\"\n                      />\n                      <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a datagrid is wrapped inside clrForm -->\n                      <label [for]=\"selectAllId\" class=\"clr-control-label clr-col-null\">\n                        <span class=\"clr-sr-only\">{{commonStrings.keys.selectAll}}</span>\n                      </label>\n                    </div>\n\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for datagrid where you can select one row only -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n                    *ngIf=\"selection.selectionType === SELECTION_TYPE.Single\"\n                    [attr.aria-label]=\"clrDgSingleSelectionAriaLabel\"\n                  >\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for single row action; only displayType if we have at least one actionable row in datagrid -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-row-actions datagrid-fixed-column\"\n                    *ngIf=\"rowActionService.hasActionableRow\"\n                    [attr.aria-label]=\"clrDgSingleActionableAriaLabel\"\n                  >\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for carets; only displayType if we have at least one expandable row in datagrid -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-expandable-caret datagrid-fixed-column\"\n                    *ngIf=\"expandableRows.hasExpandableRow || detailService.enabled\"\n                    [attr.aria-label]=\"clrDetailExpandableAriaLabel\"\n                  >\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                </div>\n                <div class=\"datagrid-row-scrollable\">\n                  <ng-container #projectedDisplayColumns></ng-container>\n                </div>\n              </div>\n            </div>\n          </div>\n          <ng-container #displayedRows></ng-container>\n          <!-- Custom placeholder overrides the default empty one -->\n          <ng-content select=\"clr-dg-placeholder\"></ng-content>\n          <clr-dg-placeholder *ngIf=\"!placeholder\"></clr-dg-placeholder>\n        </div>\n      </div>\n    </div>\n    <ng-content select=\"clr-dg-footer\"></ng-content>\n    <div class=\"datagrid-spinner\" *ngIf=\"loading\">\n      <clr-spinner clrMedium>Loading</clr-spinner>\n    </div>\n  </div>\n  <ng-content select=\"[clrIfDetail],clr-dg-detail\"></ng-content>\n</div>\n\n<div class=\"datagrid-calculation-table\">\n  <div class=\"datagrid-calculation-header\">\n    <ng-container #projectedCalculationColumns></ng-container>\n  </div>\n  <ng-container #calculationRows></ng-container>\n</div>\n",
+                template: "<!--\n  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<ng-content select=\"clr-dg-action-bar\"></ng-content>\n<div class=\"datagrid-outer-wrapper\">\n  <div class=\"datagrid-inner-wrapper\">\n    <div class=\"datagrid\" #datagrid [attr.aria-hidden]=\"detailService.isOpen ? true : null\">\n      <div class=\"datagrid-table-wrapper\">\n        <div role=\"grid\" class=\"datagrid-table\" tabindex=\"-1\" #datagridTable>\n          <div role=\"rowgroup\" class=\"datagrid-header\">\n            <div role=\"row\" class=\"datagrid-row\">\n              <div class=\"datagrid-row-master datagrid-row-flex\">\n                <div class=\"datagrid-row-sticky\">\n                  <!--header for datagrid where you can select multiple rows -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n                    *ngIf=\"selection.selectionType === SELECTION_TYPE.Multi\"\n                    (keydown.space)=\"allSelected = !allSelected; $event.preventDefault()\"\n                  >\n                    <div class=\"clr-checkbox-wrapper\">\n                      <!-- We need to move focus and space-key handling to the parent because of keyboard arrow key navigation,\n                           which is not able to transfer focus directly on the input when focused with the tab key -->\n                      <input\n                        type=\"checkbox\"\n                        [id]=\"selectAllId\"\n                        [(ngModel)]=\"allSelected\"\n                        [attr.aria-label]=\"commonStrings.keys.selectAll\"\n                        tabindex=\"-1\"\n                      />\n                      <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a datagrid is wrapped inside clrForm -->\n                      <label [for]=\"selectAllId\" class=\"clr-control-label clr-col-null\">\n                        <span class=\"clr-sr-only\">{{commonStrings.keys.selectAll}}</span>\n                      </label>\n                    </div>\n\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for datagrid where you can select one row only -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n                    *ngIf=\"selection.selectionType === SELECTION_TYPE.Single\"\n                    [attr.aria-label]=\"clrDgSingleSelectionAriaLabel\"\n                  >\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for single row action; only displayType if we have at least one actionable row in datagrid -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-row-actions datagrid-fixed-column\"\n                    *ngIf=\"rowActionService.hasActionableRow\"\n                    [attr.aria-label]=\"clrDgSingleActionableAriaLabel\"\n                  >\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for carets; only displayType if we have at least one expandable row in datagrid -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-expandable-caret datagrid-fixed-column\"\n                    *ngIf=\"expandableRows.hasExpandableRow || detailService.enabled\"\n                    [attr.aria-label]=\"clrDetailExpandableAriaLabel\"\n                  >\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                </div>\n                <div class=\"datagrid-row-scrollable\">\n                  <ng-container #projectedDisplayColumns></ng-container>\n                </div>\n              </div>\n            </div>\n          </div>\n          <ng-container #displayedRows></ng-container>\n          <!-- Custom placeholder overrides the default empty one -->\n          <ng-content select=\"clr-dg-placeholder\"></ng-content>\n          <clr-dg-placeholder *ngIf=\"!placeholder\"></clr-dg-placeholder>\n        </div>\n      </div>\n    </div>\n    <ng-content select=\"clr-dg-footer\"></ng-content>\n    <div class=\"datagrid-spinner\" *ngIf=\"loading\">\n      <clr-spinner clrMedium>Loading</clr-spinner>\n    </div>\n  </div>\n  <ng-content select=\"[clrIfDetail],clr-dg-detail\"></ng-content>\n</div>\n\n<div class=\"datagrid-calculation-table\">\n  <div class=\"datagrid-calculation-header\">\n    <ng-container #projectedCalculationColumns></ng-container>\n  </div>\n  <ng-container #calculationRows></ng-container>\n</div>\n",
                 providers: [
                     Selection,
                     Sort,
@@ -12987,6 +13197,7 @@ ClrDatagrid.decorators = [
                     TableSizeService,
                     ColumnsService,
                     DisplayModeService,
+                    KeyNavigationGridController,
                 ],
                 host: {
                     '[class.datagrid-host]': 'true',
@@ -13007,7 +13218,9 @@ ClrDatagrid.ctorParameters = () => [
     { type: String, decorators: [{ type: Inject, args: [UNIQUE_ID,] }] },
     { type: ElementRef },
     { type: Page },
-    { type: ClrCommonStringsService }
+    { type: ClrCommonStringsService },
+    { type: ColumnsService },
+    { type: KeyNavigationGridController }
 ];
 ClrDatagrid.propDecorators = {
     loading: [{ type: Input, args: ['clrDgLoading',] }],
@@ -13508,7 +13721,9 @@ ClrDatagridColumnToggle.decorators = [
     >
       <div class="switch-header">
         <div class="clr-sr-only" tabindex="-1" #allSelected>{{ commonStrings.keys.allColumnsSelected }}</div>
-        <ng-container *ngIf="!customToggleTitle">{{ commonStrings.keys.showColumns }}</ng-container>
+        <ng-container *ngIf="!customToggleTitle">
+          <h2>{{ commonStrings.keys.showColumns }}</h2>
+        </ng-container>
         <ng-content select="clr-dg-column-toggle-title"></ng-content>
         <button
           class="btn btn-sm btn-link toggle-switch-close-button"
@@ -17878,6 +18093,11 @@ class ClrHeader {
                 this.initializeNavTriggers(navLevelList);
             },
         });
+        this._subscription.add(this.responsiveNavService.navControl
+            .pipe(filter(({ controlCode }) => controlCode === ResponsiveNavCodes.NAV_CLOSE || controlCode === ResponsiveNavCodes.NAV_CLOSE_ALL))
+            .subscribe(() => {
+            this.openNavLevel = null;
+        }));
     }
     // reset triggers. handles cases when an application has different nav levels on different pages.
     resetNavTriggers() {
@@ -17904,10 +18124,21 @@ class ClrHeader {
     closeOpenNav() {
         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.
+     */
     toggleNav(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);
+    }
+    openNav(navLevel) {
+        this.openNavLevel = navLevel;
+        this.responsiveNavService.sendControlMessage(ResponsiveNavCodes.NAV_OPEN, navLevel);
     }
     ngOnDestroy() {
         this._subscription.unsubscribe();
@@ -17925,6 +18156,8 @@ ClrHeader.decorators = [
         openNavLevel !== responsiveNavCodes.NAV_LEVEL_1 ? commonStrings.keys.open : commonStrings.keys.close
       "
       (click)="toggleNav(responsiveNavCodes.NAV_LEVEL_1)"
+      [attr.aria-expanded]="openNavLevel === 1 ? 'true' : 'false'"
+      (click)="openNav(responsiveNavCodes.NAV_LEVEL_1)"
     >
       <span></span>
     </button>
@@ -17936,7 +18169,8 @@ ClrHeader.decorators = [
       [attr.aria-label]="
         openNavLevel !== responsiveNavCodes.NAV_LEVEL_2 ? commonStrings.keys.open : commonStrings.keys.close
       "
-      (click)="toggleNav(responsiveNavCodes.NAV_LEVEL_2)"
+      [attr.aria-expanded]="openNavLevel === 2 ? 'true' : 'false'"
+      (click)="openNav(responsiveNavCodes.NAV_LEVEL_2)"
     >
       <span></span>
     </button>
@@ -17955,210 +18189,790 @@ ClrHeader.ctorParameters = () => [
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
-class ClrNavLevel {
-    constructor(responsiveNavService, elementRef) {
-        this.responsiveNavService = responsiveNavService;
-        this.elementRef = elementRef;
-    }
-    ngOnInit() {
-        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);
+function refocusIfOutsideFocusTrapElement(focusedElement, focusTrapElement, elementToRefocus) {
+    const focusTrapIsCurrent = FocusTrapTrackerService.getCurrent() === focusTrapElement;
+    const elementToFocusIsOutsideFocusTrap = elementIsOutsideFocusTrapElement(focusedElement, focusTrapElement);
+    if (focusTrapIsCurrent && elementToFocusIsOutsideFocusTrap) {
+        elementToRefocus = elementToRefocus || focusTrapElement;
+        elementToRefocus.focus();
     }
-    addNavClass(level) {
-        const 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();
     }
-    get level() {
-        return this._level;
+}
+function elementIsOutsideFocusTrapElement(focusedElement, focusTrapElement) {
+    if (focusedElement === focusTrapElement.topReboundElement ||
+        focusedElement === focusTrapElement.bottomReboundElement) {
+        return true;
     }
-    // getter to access the responsive navigation codes from the template
-    get responsiveNavCodes() {
-        return ResponsiveNavCodes;
+    const elementIsInFocusTrapLightDom = focusTrapElement.contains(focusedElement);
+    if (elementIsInFocusTrapLightDom) {
+        return false;
     }
-    open() {
-        this.responsiveNavService.sendControlMessage(ResponsiveNavCodes.NAV_OPEN, this.level);
+    if (focusTrapElement !== null && focusTrapElement.contains(focusedElement)) {
+        return false;
     }
-    close() {
-        this.responsiveNavService.sendControlMessage(ResponsiveNavCodes.NAV_CLOSE, this.level);
+    return true;
+}
+function createFocusTrapReboundElement(document) {
+    const 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);
+        const parent = focusTrapElement.parentElement;
+        const sibling = focusTrapElement.nextSibling;
+        if (parent) {
+            parent.insertBefore(focusTrapElement.topReboundElement, focusTrapElement);
+            if (sibling) {
+                parent.insertBefore(focusTrapElement.bottomReboundElement, sibling);
+            }
+            else {
+                parent.appendChild(focusTrapElement.bottomReboundElement);
+            }
+        }
     }
-    // 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
-    onMouseClick(target) {
-        let current = target; // Get the element in the DOM on which the mouse was clicked
-        const 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) {
+        const parent = focusTrapElement.parentElement;
+        if (parent) {
+            const topRebound = focusTrapElement.topReboundElement;
+            const 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;
     }
-    ngOnDestroy() {
-        this.responsiveNavService.unregisterNav(this.level);
+}
+// 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;
+}
+class FocusTrap {
+    constructor(renderer, injector, platformId, hostElement) {
+        this.renderer = renderer;
+        this.active = false;
+        if (isPlatformBrowser(platformId)) {
+            this._document = injector.get(DOCUMENT);
+        }
+        hostElement = castHtmlElementToFocusTrapElement(hostElement);
+        if (!hostElement.focusTrapId) {
+            hostElement.focusTrapId = createId();
+        }
+        this.focusTrapElement = hostElement;
+    }
+    enableFocusTrap() {
+        const fte = this.focusTrapElement;
+        const firstFocusElement = fte.querySelector('[cds-first-focus]');
+        const activeEl = this._document.activeElement;
+        if (FocusTrapTrackerService.getCurrent() === fte) {
+            throw new Error('Focus trap is already enabled for this instance.');
+        }
+        this.firstFocusElement = firstFocusElement || this.focusTrapElement;
+        addReboundElementsToFocusTrapElement(this._document, fte);
+        if (!isFocusable(fte)) {
+            fte.setAttribute('tabindex', '-1');
+        }
+        if (activeEl && isHTMLElement(activeEl)) {
+            this.previousFocus = activeEl;
+        }
+        FocusTrapTrackerService.setCurrent(fte);
+        // setTimeout here is required for Safari which may try to set focus on
+        // element before it is visible...
+        const focusTimer = setTimeout(() => {
+            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;
+    }
+    removeFocusTrap() {
+        if (this.unlisten) {
+            this.unlisten();
+        }
+        removeReboundElementsFromFocusTrapElement(this.focusTrapElement);
+        this.renderer.removeAttribute(this.focusTrapElement, 'tabindex');
+        FocusTrapTrackerService.activatePreviousCurrent();
+        this.active = false;
+        if (this.previousFocus) {
+            this.previousFocus.focus();
+        }
+    }
+    onFocusIn(event) {
+        refocusIfOutsideFocusTrapElement(event.composedPath()[0], this.focusTrapElement, this.firstFocusElement);
     }
 }
-ClrNavLevel.decorators = [
-    { type: Directive, args: [{ selector: '[clr-nav-level]' },] }
+FocusTrap.decorators = [
+    { type: Injectable }
 ];
-ClrNavLevel.ctorParameters = () => [
-    { type: ResponsiveNavigationService },
-    { type: ElementRef }
+FocusTrap.ctorParameters = () => [
+    { type: Renderer2 },
+    { type: Injector },
+    { type: undefined },
+    { type: undefined }
 ];
-ClrNavLevel.propDecorators = {
-    _level: [{ type: Input, args: ['clr-nav-level',] }],
-    onMouseClick: [{ type: 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.
  */
-const CLR_NAVIGATION_DIRECTIVES = [
-    ClrHeader,
-    ClrNavLevel,
-    NavDetectionOompaLoompa,
-    MainContainerWillyWonka,
-];
-class ClrNavigationModule {
-}
-ClrNavigationModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, ClrIconModule, ClrDropdownModule],
-                declarations: [CLR_NAVIGATION_DIRECTIVES],
-                exports: [CLR_NAVIGATION_DIRECTIVES],
-            },] }
-];
+const 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.
  */
-class TemplateRefContainer {
+function collapse() {
+    'use strict';
+    return [
+        state('true', style({ height: 0, 'overflow-y': 'hidden' })),
+        transition('true => false', [animate(defaultAnimationTiming, style({ height: '*', 'overflow-y': 'hidden' }))]),
+        transition('false => true', [style({ height: '*', 'overflow-y': 'hidden' }), animate(defaultAnimationTiming)]),
+    ];
 }
-TemplateRefContainer.decorators = [
-    { type: Component, args: [{
-                template: `
-    <ng-template>
-      <ng-content></ng-content>
-    </ng-template>
-  `
-            },] }
-];
-TemplateRefContainer.propDecorators = {
-    template: [{ type: ViewChild, args: [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.
  */
-const 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.
  */
-class ClrTemplateRefModule {
+function fade(opacity = 1) {
+    return [
+        transition('void => *', [style({ opacity: 0 }), animate(defaultAnimationTiming, style({ opacity: opacity }))]),
+        transition('* => void', [animate(defaultAnimationTiming, style({ opacity: 0 }))]),
+    ];
 }
-ClrTemplateRefModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule],
-                declarations: [TEMPLATE_REF_DIRECTIVES],
-                entryComponents: [TEMPLATE_REF_DIRECTIVES],
-                exports: [TEMPLATE_REF_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.
  */
-class TabsWillyWonka extends WillyWonka {
-}
-TabsWillyWonka.decorators = [
-    { type: 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.
  */
-class ActiveOompaLoompa extends OompaLoompa {
-    constructor(cdr, willyWonka, id, ifActive) {
-        if (!willyWonka) {
-            throw new Error('clrTabLink and clr-tab-content should only be used inside of a clr-tabs');
-        }
-        super(cdr, willyWonka);
-        this.ifActive = ifActive;
-        this.id = id;
+function fadeSlide(direction) {
+    let transform = null;
+    if (direction === 'up') {
+        transform = 'translate(0, 25%)';
     }
-    get flavor() {
-        return this.ifActive.current === this.id;
+    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 [
+        transition('void => *', [style({ opacity: 0, transform: transform }), animate(defaultAnimationTiming)]),
+        transition('* => void', [animate(defaultAnimationTiming, style({ opacity: 0, transform: transform }))]),
+    ];
 }
-ActiveOompaLoompa.decorators = [
-    { type: Directive, args: [{ selector: '[clrTabLink], clr-tab-content' },] }
-];
-ActiveOompaLoompa.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: TabsWillyWonka, decorators: [{ type: Optional }] },
-    { type: Number, decorators: [{ type: 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.
  */
-class TabsService {
-    constructor() {
-        this._children = [];
-        this.layout = TabsLayout.HORIZONTAL;
+function slide(direction) {
+    let transform = null;
+    if (direction === 'up') {
+        transform = 'translate(0, 25%)';
     }
-    register(tab) {
-        this._children.push(tab);
+    else if (direction === 'down') {
+        transform = 'translate(0, -25%)';
     }
-    get children() {
-        return this._children;
+    else if (direction === 'left') {
+        transform = 'translate(25%, 0)';
     }
-    get activeTab() {
-        return this.children.find((tab) => {
-            return tab.active;
+    else if (direction === 'right') {
+        transform = 'translate(-25%, 0)';
+    }
+    else {
+        throw new Error('Unknown direction ' + direction + ' for slide animation.');
+    }
+    return [
+        transition('void => *', [style({ transform: transform }), animate(defaultAnimationTiming)]),
+        transition('* => void', [animate(defaultAnimationTiming, 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.
+ */
+
+/*
+ * 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 ClrAriaLivePoliteness;
+(function (ClrAriaLivePoliteness) {
+    ClrAriaLivePoliteness["off"] = "off";
+    ClrAriaLivePoliteness["polite"] = "polite";
+    ClrAriaLivePoliteness["assertive"] = "assertive";
+})(ClrAriaLivePoliteness || (ClrAriaLivePoliteness = {}));
+/**
+ * Time in milliseconds before inserting the content into the container
+ */
+const 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');
+ *  }
+ * }
+ * ```
+ *
+ */
+class ClrAriaLiveService {
+    constructor(ngZone, _document, platformId) {
+        this.ngZone = ngZone;
+        this.platformId = platformId;
+        this._id = `clr-aria-live-element-${uniqueIdFactory()}`;
+        this.document = _document;
+    }
+    /**
+     * get access to the internal HTML `id` that gonna be used for the AriaLive container.
+     * @return ID of the DOM Element as string.
+     */
+    get id() {
+        return this._id;
+    }
+    /**
+     * 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'
+     */
+    announce(message, politeness = ClrAriaLivePoliteness.polite) {
+        if (politeness === ClrAriaLivePoliteness.off) {
+            return;
+        }
+        if (!this.ariaLiveElement && isPlatformBrowser(this.platformId)) {
+            this.ariaLiveElement = this.createContainer();
+        }
+        message = typeof message !== 'string' && 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(() => {
+            // 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(() => {
+                this.ariaLiveElement.textContent = message;
+            }, ARIA_LIVE_TICK);
+        });
+    }
+    /**
+     * onDestroy life cycle - must stop all active setTimeouts and remove the AriaLive
+     * container from the document.
+     */
+    ngOnDestroy() {
+        clearTimeout(this.previousTimeout);
+        if (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
+     *
+     */
+    createContainer() {
+        const 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', ClrAriaLivePoliteness.polite);
+        this.document.body.appendChild(ariaLiveElement);
+        return ariaLiveElement;
+    }
+}
+ClrAriaLiveService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ClrAriaLiveService_Factory() { return new ClrAriaLiveService(i0.ɵɵinject(i0.NgZone), i0.ɵɵinject(i1.DOCUMENT), i0.ɵɵinject(i0.PLATFORM_ID)); }, token: ClrAriaLiveService, providedIn: "root" });
+ClrAriaLiveService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root',
+            },] }
+];
+ClrAriaLiveService.ctorParameters = () => [
+    { type: NgZone },
+    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
+    { type: undefined, decorators: [{ type: Inject, args: [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.
+ */
+
+/*
+ * 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.
+ */
+const createCdsCloseButton = (document, ariaLabel) => {
+    const 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;
+};
+const ɵ0 = createCdsCloseButton;
+class ClrNavLevel extends FocusTrap {
+    constructor(platformId, responsiveNavService, elementRef, renderer, injector) {
+        super(renderer, injector, platformId, elementRef.nativeElement);
+        this.responsiveNavService = responsiveNavService;
+        this.elementRef = elementRef;
+        this._isOpen = false;
+        if (isPlatformBrowser(platformId)) {
+            this._document = injector.get(DOCUMENT);
+        }
+        this._subscription = responsiveNavService.navControl
+            .pipe(filter(x => x.navLevel === this.level), filter(({ controlCode }) => (controlCode === ResponsiveNavCodes.NAV_OPEN && !this.isOpen) ||
+            (controlCode === ResponsiveNavCodes.NAV_CLOSE && this.isOpen)))
+            .subscribe(({ controlCode }) => {
+            if (controlCode === ResponsiveNavCodes.NAV_OPEN) {
+                this.open();
+                return;
+            }
+            this.close();
+        });
+        this._subscription.add(responsiveNavService.navControl
+            .pipe(filter(({ controlCode }) => controlCode === ResponsiveNavCodes.NAV_CLOSE_ALL))
+            .subscribe(() => this.close()));
+    }
+    ngOnInit() {
+        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);
+    }
+    ngAfterViewInit() {
+        const 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();
+        }
+    }
+    addNavClass(level) {
+        const 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);
+        }
+    }
+    get level() {
+        return this._level;
+    }
+    // getter to access the responsive navigation codes from the template
+    get responsiveNavCodes() {
+        return ResponsiveNavCodes;
+    }
+    get isOpen() {
+        return this._isOpen;
+    }
+    onResize(event) {
+        const target = event.target;
+        if (target.innerWidth < LARGE_BREAKPOINT && this.isOpen) {
+            this.close();
+            return;
+        }
+        this.showNavigation();
+    }
+    open() {
+        this._isOpen = true;
+        this.showNavigation();
+        this.enableFocusTrap();
+        this.showCloseButton();
+        this.responsiveNavService.sendControlMessage(ResponsiveNavCodes.NAV_OPEN, this.level);
+    }
+    close() {
+        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
+    onMouseClick(target) {
+        let current = target; // Get the element in the DOM on which the mouse was clicked
+        const 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;
+        }
+    }
+    hideNavigation() {
+        this.renderer.setAttribute(this.elementRef.nativeElement, 'aria-hidden', 'true');
+        this.renderer.setAttribute(this.elementRef.nativeElement, 'hidden', 'true');
+    }
+    showNavigation() {
+        this.renderer.setAttribute(this.elementRef.nativeElement, 'aria-hidden', 'false');
+        this.renderer.removeAttribute(this.elementRef.nativeElement, 'hidden');
+    }
+    hideCloseButton() {
+        this.renderer.setAttribute(this.elementRef.nativeElement, 'aria-hidden', 'true');
+        this.renderer.setAttribute(this.elementRef.nativeElement.querySelector('.clr-nav-close'), 'hidden', 'true');
+    }
+    showCloseButton() {
+        this.renderer.setAttribute(this.elementRef.nativeElement.querySelector('.clr-nav-close'), 'aria-hidden', 'false');
+        this.renderer.removeAttribute(this.elementRef.nativeElement.querySelector('.clr-nav-close'), 'hidden');
+    }
+    ngOnDestroy() {
+        this.responsiveNavService.unregisterNav(this.level);
+        this._subscription.unsubscribe();
+    }
+}
+ClrNavLevel.decorators = [
+    { type: Directive, args: [{ selector: '[clr-nav-level]' },] }
+];
+ClrNavLevel.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] },
+    { type: ResponsiveNavigationService },
+    { type: ElementRef },
+    { type: Renderer2 },
+    { type: Injector }
+];
+ClrNavLevel.propDecorators = {
+    _level: [{ type: Input, args: ['clr-nav-level',] }],
+    closeButtonAriaLabel: [{ type: Input, args: ['closeAriaLabel',] }],
+    onResize: [{ type: HostListener, args: ['window:resize', ['$event'],] }],
+    onMouseClick: [{ type: 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.
+ */
+const CLR_NAVIGATION_DIRECTIVES = [
+    ClrHeader,
+    ClrNavLevel,
+    NavDetectionOompaLoompa,
+    MainContainerWillyWonka,
+];
+class ClrNavigationModule {
+}
+ClrNavigationModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [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.
+ */
+class TemplateRefContainer {
+}
+TemplateRefContainer.decorators = [
+    { type: Component, args: [{
+                template: `
+    <ng-template>
+      <ng-content></ng-content>
+    </ng-template>
+  `
+            },] }
+];
+TemplateRefContainer.propDecorators = {
+    template: [{ type: ViewChild, args: [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.
+ */
+const 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.
+ */
+class ClrTemplateRefModule {
+}
+ClrTemplateRefModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule],
+                declarations: [TEMPLATE_REF_DIRECTIVES],
+                entryComponents: [TEMPLATE_REF_DIRECTIVES],
+                exports: [TEMPLATE_REF_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.
+ */
+class TabsWillyWonka extends WillyWonka {
+}
+TabsWillyWonka.decorators = [
+    { type: 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.
+ */
+class ActiveOompaLoompa extends OompaLoompa {
+    constructor(cdr, willyWonka, id, ifActive) {
+        if (!willyWonka) {
+            throw new Error('clrTabLink and clr-tab-content should only be used inside of a clr-tabs');
+        }
+        super(cdr, willyWonka);
+        this.ifActive = ifActive;
+        this.id = id;
+    }
+    get flavor() {
+        return this.ifActive.current === this.id;
+    }
+}
+ActiveOompaLoompa.decorators = [
+    { type: Directive, args: [{ selector: '[clrTabLink], clr-tab-content' },] }
+];
+ActiveOompaLoompa.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: TabsWillyWonka, decorators: [{ type: Optional }] },
+    { type: Number, decorators: [{ type: 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.
+ */
+class TabsService {
+    constructor() {
+        this._children = [];
+        this.layout = TabsLayout.HORIZONTAL;
+    }
+    register(tab) {
+        this._children.push(tab);
+    }
+    get children() {
+        return this._children;
+    }
+    get activeTab() {
+        return this.children.find((tab) => {
+            return tab.active;
         });
     }
     get overflowTabs() {
@@ -21857,7 +22671,14 @@ class ClrWizard {
         return this.navService.wizardFinished.subscribe(() => this.emitWizardFinished());
     }
     listenForPageChanges() {
-        return this.navService.currentPageChanged.subscribe(() => this.currentPageChanged.emit());
+        return this.navService.currentPageChanged.subscribe(() => {
+            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();
+        });
     }
     updateNavOnPageChanges() {
         const changes = this.differ.diff(this.pages);
@@ -22377,13 +23198,6 @@ AccordionService.decorators = [
     { type: Injectable }
 ];
 
-/*
- * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-const defaultAnimationTiming = '0.2s ease-in-out';
-
 /*
  * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
@@ -23501,173 +24315,41 @@ ClrTimelineModule.decorators = [
                 exports: [...CLR_TIMELINE_DIRECTIVES, ClrIconModule, ClrSpinnerModule],
                 declarations: [CLR_TIMELINE_DIRECTIVES],
             },] }
-];
-ClrTimelineModule.ctorParameters = () => [];
-
-/*
- * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-class ClarityModule {
-}
-ClarityModule.decorators = [
-    { type: NgModule, args: [{
-                exports: [
-                    ClrEmphasisModule,
-                    ClrDataModule,
-                    ClrIconModule,
-                    ClrModalModule,
-                    ClrLoadingModule,
-                    ClrConditionalModule,
-                    ClrFocusTrapModule,
-                    ClrFocusOnViewInitModule,
-                    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.
- */
-
-/*
- * 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.
- */
+];
+ClrTimelineModule.ctorParameters = () => [];
 
 /*
  * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
+class ClarityModule {
+}
+ClarityModule.decorators = [
+    { type: NgModule, args: [{
+                exports: [
+                    ClrEmphasisModule,
+                    ClrDataModule,
+                    ClrIconModule,
+                    ClrModalModule,
+                    ClrLoadingModule,
+                    ClrConditionalModule,
+                    ClrFocusTrapModule,
+                    ClrFocusOnViewInitModule,
+                    ClrButtonModule,
+                    ClrFormsModule,
+                    ClrLayoutModule,
+                    ClrPopoverModule,
+                    ClrWizardModule,
+                    ClrDragAndDropModule,
+                    ClrStepperModule,
+                    ClrSpinnerModule,
+                    ClrProgressBarModule,
+                    ClrPopoverModuleNext,
+                    ClrTimelineModule,
+                ],
+            },] }
+];
 
 /*
  * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
@@ -23746,16 +24428,6 @@ ClarityModule.decorators = [
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
-const 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.
@@ -23786,14 +24458,6 @@ const CLR_MENU_POSITIONS = [
  * 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 [
-        state('true', style({ height: 0, 'overflow-y': 'hidden' })),
-        transition('true => false', [animate(defaultAnimationTiming, style({ height: '*', 'overflow-y': 'hidden' }))]),
-        transition('false => true', [style({ height: '*', 'overflow-y': 'hidden' }), animate(defaultAnimationTiming)]),
-    ];
-}
 
 /*
  * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
@@ -23806,12 +24470,6 @@ function collapse() {
  * 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 = 1) {
-    return [
-        transition('void => *', [style({ opacity: 0 }), animate(defaultAnimationTiming, style({ opacity: opacity }))]),
-        transition('* => void', [animate(defaultAnimationTiming, style({ opacity: 0 }))]),
-    ];
-}
 
 /*
  * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
@@ -23824,28 +24482,6 @@ function fade(opacity = 1) {
  * 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) {
-    let 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 [
-        transition('void => *', [style({ opacity: 0, transform: transform }), animate(defaultAnimationTiming)]),
-        transition('* => void', [animate(defaultAnimationTiming, style({ opacity: 0, transform: transform }))]),
-    ];
-}
 
 /*
  * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
@@ -23858,28 +24494,6 @@ function fadeSlide(direction) {
  * 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) {
-    let 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 [
-        transition('void => *', [style({ transform: transform }), animate(defaultAnimationTiming)]),
-        transition('* => void', [animate(defaultAnimationTiming, style({ transform: transform }))]),
-    ];
-}
 
 /*
  * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
@@ -23922,155 +24536,6 @@ function slide(direction) {
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
-var ClrAriaLivePoliteness;
-(function (ClrAriaLivePoliteness) {
-    ClrAriaLivePoliteness["off"] = "off";
-    ClrAriaLivePoliteness["polite"] = "polite";
-    ClrAriaLivePoliteness["assertive"] = "assertive";
-})(ClrAriaLivePoliteness || (ClrAriaLivePoliteness = {}));
-/**
- * Time in milliseconds before inserting the content into the container
- */
-const 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');
- *  }
- * }
- * ```
- *
- */
-class ClrAriaLiveService {
-    constructor(ngZone, _document, platformId) {
-        this.ngZone = ngZone;
-        this.platformId = platformId;
-        this._id = `clr-aria-live-element-${uniqueIdFactory()}`;
-        this.document = _document;
-    }
-    /**
-     * get access to the internal HTML `id` that gonna be used for the AriaLive container.
-     * @return ID of the DOM Element as string.
-     */
-    get id() {
-        return this._id;
-    }
-    /**
-     * 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'
-     */
-    announce(message, politeness = ClrAriaLivePoliteness.polite) {
-        if (politeness === ClrAriaLivePoliteness.off) {
-            return;
-        }
-        if (!this.ariaLiveElement && isPlatformBrowser(this.platformId)) {
-            this.ariaLiveElement = this.createContainer();
-        }
-        message = typeof message !== 'string' && 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(() => {
-            // 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(() => {
-                this.ariaLiveElement.textContent = message;
-            }, ARIA_LIVE_TICK);
-        });
-    }
-    /**
-     * onDestroy life cycle - must stop all active setTimeouts and remove the AriaLive
-     * container from the document.
-     */
-    ngOnDestroy() {
-        clearTimeout(this.previousTimeout);
-        if (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
-     *
-     */
-    createContainer() {
-        const 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', ClrAriaLivePoliteness.polite);
-        this.document.body.appendChild(ariaLiveElement);
-        return ariaLiveElement;
-    }
-}
-ClrAriaLiveService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ClrAriaLiveService_Factory() { return new ClrAriaLiveService(i0.ɵɵinject(i0.NgZone), i0.ɵɵinject(i1.DOCUMENT), i0.ɵɵinject(i0.PLATFORM_ID)); }, token: ClrAriaLiveService, providedIn: "root" });
-ClrAriaLiveService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root',
-            },] }
-];
-ClrAriaLiveService.ctorParameters = () => [
-    { type: NgZone },
-    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
-    { type: undefined, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] }
-];
 
 /*
  * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
@@ -24095,6 +24560,16 @@ ClrAriaLiveService.ctorParameters = () => [
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
+const 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.
@@ -24172,5 +24647,5 @@ ClrAriaLiveService.ctorParameters = () => [
  * Generated bundle index. Do not edit.
  */
 
-export { CLR_ALERT_DIRECTIVES, CLR_BUTTON_GROUP_DIRECTIVES, CLR_DATAGRID_DIRECTIVES, CLR_DATEPICKER_DIRECTIVES, CLR_DRAG_AND_DROP_DIRECTIVES, CLR_DROPDOWN_DIRECTIVES, CLR_ICON_DIRECTIVES, CLR_LAYOUT_DIRECTIVES, CLR_LOADING_BUTTON_DIRECTIVES, CLR_LOADING_DIRECTIVES, CLR_MENU_POSITIONS, CLR_MODAL_DIRECTIVES, CLR_NAVIGATION_DIRECTIVES, CLR_PROGRESS_BAR_DIRECTIVES, CLR_SIGNPOST_DIRECTIVES, CLR_SPINNER_DIRECTIVES, CLR_STACK_VIEW_DIRECTIVES, CLR_TABS_DIRECTIVES, CLR_TOOLTIP_DIRECTIVES, CLR_TREE_VIEW_DIRECTIVES, CLR_VERTICAL_NAV_DIRECTIVES, CLR_WIZARD_DIRECTIVES, CONDITIONAL_DIRECTIVES, CUSTOM_BUTTON_TYPES, CdsIconCustomTag, ClarityModule, ClrAbstractContainer, ClrAccordion, ClrAccordionContent, ClrAccordionDescription, ClrAccordionModule, ClrAccordionPanel, ClrAccordionTitle, ClrAlert, ClrAlertItem, ClrAlertModule, ClrAlertText, ClrAlerts, ClrAlertsPager, ClrAlignment, ClrAriaLivePoliteness, ClrAriaLiveService, ClrAxis, ClrButton, ClrButtonGroup, ClrButtonGroupModule, ClrButtonModule, ClrCalendar, ClrCheckbox, ClrCheckboxContainer, ClrCheckboxModule, ClrCheckboxWrapper, ClrCombobox, ClrComboboxContainer, ClrComboboxModule, ClrCommonFormsModule, ClrCommonStringsService, ClrConditionalModule, ClrControl, ClrControlContainer, ClrControlError, ClrControlHelper, ClrControlSuccess, ClrDataModule, ClrDatagrid, ClrDatagridActionBar, ClrDatagridActionOverflow, ClrDatagridCell, ClrDatagridColumn, ClrDatagridColumnSeparator, ClrDatagridColumnToggle, ClrDatagridColumnToggleButton, ClrDatagridColumnToggleTitle, ClrDatagridDetail, ClrDatagridDetailBody, ClrDatagridDetailHeader, ClrDatagridFilter, ClrDatagridFooter, ClrDatagridHideableColumn, ClrDatagridItems, ClrDatagridItemsTrackBy, ClrDatagridModule, ClrDatagridPageSize, ClrDatagridPagination, ClrDatagridPlaceholder, ClrDatagridRow, ClrDatagridRowDetail, ClrDatagridSortOrder, ClrDatalist, ClrDatalistContainer, ClrDatalistInput, ClrDatalistModule, ClrDateContainer, ClrDateInput, ClrDatepickerModule, ClrDatepickerViewManager, ClrDay, ClrDaypicker, ClrDragAndDropModule, ClrDragEvent, ClrDragHandle, ClrDraggable, ClrDraggableGhost, ClrDropdown, ClrDropdownItem, ClrDropdownMenu, ClrDropdownModule, ClrDropdownTrigger, ClrDroppable, ClrEmphasisModule, ClrExpandableAnimation, ClrFocusOnViewInit, ClrFocusOnViewInitModule, ClrForm, ClrFormLayout, ClrFormsModule, ClrHeader, ClrIconCustomTag, ClrIconModule, ClrIfActive, ClrIfDetail, ClrIfDragged, ClrIfError, ClrIfExpanded, ClrIfOpen, ClrIfSuccess, ClrInput, ClrInputContainer, ClrInputModule, ClrLabel, ClrLayout, ClrLayoutModule, ClrLoading, ClrLoadingButton, ClrLoadingButtonModule, ClrLoadingModule, ClrLoadingState, ClrMainContainer, ClrMainContainerModule, ClrModal, ClrModalBody, ClrModalModule, ClrMonthpicker, ClrNavLevel, ClrNavigationModule, ClrOption, ClrOptionItems, ClrOptionSelected, ClrOptions, ClrPassword, ClrPasswordContainer, ClrPasswordModule, ClrPopoverAnchor, ClrPopoverContent, ClrPopoverEventsService, ClrPopoverModule, ClrPopoverPositionService, ClrPopoverToggleService, ClrProgressBar, ClrProgressBarModule, ClrRadio, ClrRadioContainer, ClrRadioModule, ClrRadioWrapper, ClrRange, ClrRangeContainer, ClrRangeModule, ClrRecursiveForOf, ClrSelect, ClrSelectContainer, ClrSelectModule, ClrSelectedState, ClrSide, ClrSignpost, ClrSignpostContent, ClrSignpostModule, ClrSignpostTrigger, ClrSpinner, ClrSpinnerModule, ClrStackBlock, ClrStackContentInput, ClrStackHeader, ClrStackInput, ClrStackSelect, ClrStackView, ClrStackViewCustomTags, ClrStackViewLabel, ClrStackViewModule, ClrStepButton, ClrStepButtonType, ClrStepper, ClrStepperModule, ClrStepperPanel, ClrTab, ClrTabContent, ClrTabLink, ClrTabOverflowContent, ClrTabs, ClrTabsModule, ClrTextarea, ClrTextareaContainer, ClrTextareaModule, ClrTimeline, ClrTimelineLayout, ClrTimelineModule, ClrTimelineStep, ClrTimelineStepDescription, ClrTimelineStepHeader, ClrTimelineStepState, ClrTimelineStepTitle, ClrTooltip, ClrTooltipContent, ClrTooltipModule, ClrTooltipTrigger, ClrTree, ClrTreeNode, ClrTreeNodeLink, ClrTreeViewModule, ClrVerticalNav, ClrVerticalNavGroup, ClrVerticalNavGroupChildren, ClrVerticalNavIcon, ClrVerticalNavLink, ClrVerticalNavModule, ClrWizard, ClrWizardButton, ClrWizardCustomTags, ClrWizardHeaderAction, ClrWizardModule, ClrWizardPage, ClrWizardPageButtons, ClrWizardPageHeaderActions, ClrWizardPageNavTitle, ClrWizardPageTitle, ClrWizardStepnav, ClrWizardStepnavItem, ClrYearpicker, DEFAULT_BUTTON_TYPES, DatagridNumericFilter, DatagridPropertyComparator, DatagridPropertyNumericFilter, DatagridPropertyStringFilter, DatagridStringFilter, EXPANDABLE_ANIMATION_DIRECTIVES, FOCUS_ON_VIEW_INIT, FOCUS_ON_VIEW_INIT_DIRECTIVES, IS_TOGGLE, IS_TOGGLE_PROVIDER, LoadingListener, MainContainerWillyWonka, NavDetectionOompaLoompa, TOGGLE_SERVICE, TOGGLE_SERVICE_PROVIDER, ToggleServiceFactory, WrappedFormControl, collapse, commonStringsDefault, fade, fadeSlide, isToggleFactory, slide, AccordionOompaLoompa as ÇlrAccordionOompaLoompa, AccordionWillyWonka as ÇlrAccordionWillyWonka, ActionableOompaLoompa as ÇlrActionableOompaLoompa, ActiveOompaLoompa as ÇlrActiveOompaLoompa, ClrFocusTrapModule as ÇlrClrFocusTrapModule, ClrPopoverCloseButton as ÇlrClrPopoverCloseButton, ClrPopoverModuleNext as ÇlrClrPopoverModuleNext, ClrPopoverOpenCloseButton as ÇlrClrPopoverOpenCloseButton, DatagridCellRenderer as ÇlrDatagridCellRenderer, DatagridDetailRegisterer as ÇlrDatagridDetailRegisterer, DatagridHeaderRenderer as ÇlrDatagridHeaderRenderer, DatagridMainRenderer as ÇlrDatagridMainRenderer, DatagridRowRenderer as ÇlrDatagridRowRenderer, DatagridWillyWonka as ÇlrDatagridWillyWonka, ExpandableOompaLoompa as ÇlrExpandableOompaLoompa, FocusTrapDirective as ÇlrFocusTrapDirective, FocusTrapTracker as ÇlrFocusTrapTracker, StepperOompaLoompa as ÇlrStepperOompaLoompa, StepperWillyWonka as ÇlrStepperWillyWonka, TabsWillyWonka as ÇlrTabsWillyWonka, WrappedCell as ÇlrWrappedCell, WrappedColumn as ÇlrWrappedColumn, WrappedRow as ÇlrWrappedRow, domAdapterFactory as ɵa, LayoutService as ɵb, AlertIconAndTypesService as ɵba, MultiAlertService as ɵbb, ControlIdService as ɵbc, NgControlService as ɵbd, ClrAbstractControl as ɵbe, ContainerIdService as ɵbf, AbstractIfState as ɵbg, IfControlStateService as ɵbh, MarkControlService as ɵbi, ControlClassService as ɵbj, ClrHostWrappingModule as ɵbk, EmptyAnchor as ɵbl, ClrKeyFocusModule as ɵbm, ClrKeyFocus as ɵbn, ClrKeyFocusItem as ɵbo, ClrRovingTabindex as ɵbp, OptionSelectionService as ɵbq, AriaService as ɵbr, ComboboxFocusHandler as ɵbs, COMBOBOX_FOCUS_HANDLER_PROVIDER as ɵbt, ComboboxContainerService as ɵbu, DateNavigationService as ɵbv, DateFormControlService as ɵbw, LocaleHelperService as ɵbx, FocusService$1 as ɵby, DateIOService as ɵbz, FOCUS_ON_VIEW_INIT_PROVIDER as ɵc, DatepickerEnabledService as ɵca, ViewManagerService as ɵcb, DatepickerFocusService as ɵcc, DatalistIdService as ɵcd, ClrOutsideClickModule as ɵce, OUSTIDE_CLICK_DIRECTIVES as ɵcf, OutsideClick as ɵcg, ClrExpandableAnimationModule as ɵch, DomAdapter as ɵci, DragEventListenerService as ɵcj, DragAndDropEventBusService as ɵck, DragHandleRegistrarService as ɵcl, DraggableSnapshotService as ɵcm, GlobalDragModeService as ɵcn, Selection as ɵco, Items as ɵcp, FiltersProvider as ɵcq, Page as ɵcr, StateDebouncer as ɵcs, Sort as ɵct, DatagridRenderOrganizer as ɵcu, RowActionService as ɵcv, ExpandableRowsCount as ɵcw, DetailService as ɵcx, StateProvider as ɵcy, TableSizeService as ɵcz, FOCUS_TRAP_DIRECTIVES as ɵd, ColumnsService as ɵda, DisplayModeService as ɵdb, DatagridFilterRegistrar as ɵdc, CustomFilter as ɵdd, DatagridIfExpandService as ɵde, SignpostFocusManager as ɵdf, SignpostIdService as ɵdg, ColumnResizerService as ɵdh, COLUMN_STATE as ɵdi, columnStateFactory as ɵdj, COLUMN_STATE_PROVIDER as ɵdk, WillyWonka as ɵdm, OompaLoompa as ɵdn, StackControl as ɵdo, TreeFeaturesService as ɵdp, treeFeaturesFactory as ɵdq, TREE_FEATURES_PROVIDER as ɵdr, TreeFocusManagerService as ɵds, RecursiveChildren as ɵdt, ScrollingService as ɵdu, ButtonInGroupService as ɵdv, ResponsiveNavigationService as ɵdw, ClrTemplateRefModule as ɵdx, TEMPLATE_REF_DIRECTIVES as ɵdy, TemplateRefContainer as ɵdz, RootDropdownService as ɵe, TabsService as ɵea, TABS_ID as ɵeb, tokenFactory as ɵec, TABS_ID_PROVIDER as ɵed, VerticalNavService as ɵee, VerticalNavIconService as ɵef, VerticalNavGroupRegistrationService as ɵeg, VerticalNavGroupService as ɵeh, TooltipIdService as ɵei, WizardNavigationService as ɵej, PageCollectionService as ɵek, ButtonHubService as ɵel, HeaderActionService as ɵem, AccordionService as ɵen, panelAnimation as ɵeo, stepAnimation as ɵep, defaultAnimationTiming as ɵeq, StepperService as ɵer, TimelineIconAttributeService as ɵes, clrRootDropdownFactory as ɵf, ROOT_DROPDOWN_PROVIDER as ɵg, POPOVER_HOST_ANCHOR as ɵh, FocusService as ɵi, clrFocusServiceFactory as ɵj, FOCUS_SERVICE_PROVIDER as ɵk, DropdownFocusHandler as ɵl, DROPDOWN_FOCUS_HANDLER_PROVIDER as ɵm, customFocusableItemProvider as ɵn, UNIQUE_ID as ɵo, uniqueIdFactory as ɵp, UNIQUE_ID_PROVIDER as ɵq, FocusableItem as ɵr, AbstractPopover as ɵs, BasicFocusableItem as ɵt, BASIC_FOCUSABLE_ITEM_PROVIDER as ɵu, IF_ACTIVE_ID as ɵv, tokenFactory$1 as ɵw, IF_ACTIVE_ID_PROVIDER as ɵx, IfActiveService as ɵy, IfExpandService as ɵz };
+export { CLR_ALERT_DIRECTIVES, CLR_BUTTON_GROUP_DIRECTIVES, CLR_DATAGRID_DIRECTIVES, CLR_DATEPICKER_DIRECTIVES, CLR_DRAG_AND_DROP_DIRECTIVES, CLR_DROPDOWN_DIRECTIVES, CLR_ICON_DIRECTIVES, CLR_LAYOUT_DIRECTIVES, CLR_LOADING_BUTTON_DIRECTIVES, CLR_LOADING_DIRECTIVES, CLR_MENU_POSITIONS, CLR_MODAL_DIRECTIVES, CLR_NAVIGATION_DIRECTIVES, CLR_PROGRESS_BAR_DIRECTIVES, CLR_SIGNPOST_DIRECTIVES, CLR_SPINNER_DIRECTIVES, CLR_STACK_VIEW_DIRECTIVES, CLR_TABS_DIRECTIVES, CLR_TOOLTIP_DIRECTIVES, CLR_TREE_VIEW_DIRECTIVES, CLR_VERTICAL_NAV_DIRECTIVES, CLR_WIZARD_DIRECTIVES, CONDITIONAL_DIRECTIVES, CUSTOM_BUTTON_TYPES, CdsIconCustomTag, ClarityModule, ClrAbstractContainer, ClrAccordion, ClrAccordionContent, ClrAccordionDescription, ClrAccordionModule, ClrAccordionPanel, ClrAccordionTitle, ClrAlert, ClrAlertItem, ClrAlertModule, ClrAlertText, ClrAlerts, ClrAlertsPager, ClrAlignment, ClrAriaLivePoliteness, ClrAriaLiveService, ClrAxis, ClrButton, ClrButtonGroup, ClrButtonGroupModule, ClrButtonModule, ClrCalendar, ClrCheckbox, ClrCheckboxContainer, ClrCheckboxModule, ClrCheckboxWrapper, ClrCombobox, ClrComboboxContainer, ClrComboboxModule, ClrCommonFormsModule, ClrCommonStringsService, ClrConditionalModule, ClrControl, ClrControlContainer, ClrControlError, ClrControlHelper, ClrControlSuccess, ClrDataModule, ClrDatagrid, ClrDatagridActionBar, ClrDatagridActionOverflow, ClrDatagridCell, ClrDatagridColumn, ClrDatagridColumnSeparator, ClrDatagridColumnToggle, ClrDatagridColumnToggleButton, ClrDatagridColumnToggleTitle, ClrDatagridDetail, ClrDatagridDetailBody, ClrDatagridDetailHeader, ClrDatagridFilter, ClrDatagridFooter, ClrDatagridHideableColumn, ClrDatagridItems, ClrDatagridItemsTrackBy, ClrDatagridModule, ClrDatagridPageSize, ClrDatagridPagination, ClrDatagridPlaceholder, ClrDatagridRow, ClrDatagridRowDetail, ClrDatagridSortOrder, ClrDatalist, ClrDatalistContainer, ClrDatalistInput, ClrDatalistModule, ClrDateContainer, ClrDateInput, ClrDatepickerModule, ClrDatepickerViewManager, ClrDay, ClrDaypicker, ClrDragAndDropModule, ClrDragEvent, ClrDragHandle, ClrDraggable, ClrDraggableGhost, ClrDropdown, ClrDropdownItem, ClrDropdownMenu, ClrDropdownModule, ClrDropdownTrigger, ClrDroppable, ClrEmphasisModule, ClrExpandableAnimation, ClrFocusOnViewInit, ClrFocusOnViewInitModule, ClrForm, ClrFormLayout, ClrFormsModule, ClrHeader, ClrIconCustomTag, ClrIconModule, ClrIfActive, ClrIfDetail, ClrIfDragged, ClrIfError, ClrIfExpanded, ClrIfOpen, ClrIfSuccess, ClrInput, ClrInputContainer, ClrInputModule, ClrLabel, ClrLayout, ClrLayoutModule, ClrLoading, ClrLoadingButton, ClrLoadingButtonModule, ClrLoadingModule, ClrLoadingState, ClrMainContainer, ClrMainContainerModule, ClrModal, ClrModalBody, ClrModalModule, ClrMonthpicker, ClrNavLevel, ClrNavigationModule, ClrOption, ClrOptionItems, ClrOptionSelected, ClrOptions, ClrPassword, ClrPasswordContainer, ClrPasswordModule, ClrPopoverAnchor, ClrPopoverContent, ClrPopoverEventsService, ClrPopoverModule, ClrPopoverPositionService, ClrPopoverToggleService, ClrProgressBar, ClrProgressBarModule, ClrRadio, ClrRadioContainer, ClrRadioModule, ClrRadioWrapper, ClrRange, ClrRangeContainer, ClrRangeModule, ClrRecursiveForOf, ClrSelect, ClrSelectContainer, ClrSelectModule, ClrSelectedState, ClrSide, ClrSignpost, ClrSignpostContent, ClrSignpostModule, ClrSignpostTrigger, ClrSpinner, ClrSpinnerModule, ClrStackBlock, ClrStackContentInput, ClrStackHeader, ClrStackInput, ClrStackSelect, ClrStackView, ClrStackViewCustomTags, ClrStackViewLabel, ClrStackViewModule, ClrStepButton, ClrStepButtonType, ClrStepper, ClrStepperModule, ClrStepperPanel, ClrTab, ClrTabContent, ClrTabLink, ClrTabOverflowContent, ClrTabs, ClrTabsModule, ClrTextarea, ClrTextareaContainer, ClrTextareaModule, ClrTimeline, ClrTimelineLayout, ClrTimelineModule, ClrTimelineStep, ClrTimelineStepDescription, ClrTimelineStepHeader, ClrTimelineStepState, ClrTimelineStepTitle, ClrTooltip, ClrTooltipContent, ClrTooltipModule, ClrTooltipTrigger, ClrTree, ClrTreeNode, ClrTreeNodeLink, ClrTreeViewModule, ClrVerticalNav, ClrVerticalNavGroup, ClrVerticalNavGroupChildren, ClrVerticalNavIcon, ClrVerticalNavLink, ClrVerticalNavModule, ClrWizard, ClrWizardButton, ClrWizardCustomTags, ClrWizardHeaderAction, ClrWizardModule, ClrWizardPage, ClrWizardPageButtons, ClrWizardPageHeaderActions, ClrWizardPageNavTitle, ClrWizardPageTitle, ClrWizardStepnav, ClrWizardStepnavItem, ClrYearpicker, DEFAULT_BUTTON_TYPES, DatagridNumericFilter, DatagridPropertyComparator, DatagridPropertyNumericFilter, DatagridPropertyStringFilter, DatagridStringFilter, EXPANDABLE_ANIMATION_DIRECTIVES, FOCUS_ON_VIEW_INIT, FOCUS_ON_VIEW_INIT_DIRECTIVES, IS_TOGGLE, IS_TOGGLE_PROVIDER, LoadingListener, MainContainerWillyWonka, NavDetectionOompaLoompa, TOGGLE_SERVICE, TOGGLE_SERVICE_PROVIDER, ToggleServiceFactory, WrappedFormControl, collapse, commonStringsDefault, fade, fadeSlide, isToggleFactory, slide, AccordionOompaLoompa as ÇlrAccordionOompaLoompa, AccordionWillyWonka as ÇlrAccordionWillyWonka, ActionableOompaLoompa as ÇlrActionableOompaLoompa, ActiveOompaLoompa as ÇlrActiveOompaLoompa, ClrFocusTrapModule as ÇlrClrFocusTrapModule, ClrPopoverCloseButton as ÇlrClrPopoverCloseButton, ClrPopoverModuleNext as ÇlrClrPopoverModuleNext, ClrPopoverOpenCloseButton as ÇlrClrPopoverOpenCloseButton, DatagridCellRenderer as ÇlrDatagridCellRenderer, DatagridDetailRegisterer as ÇlrDatagridDetailRegisterer, DatagridHeaderRenderer as ÇlrDatagridHeaderRenderer, DatagridMainRenderer as ÇlrDatagridMainRenderer, DatagridRowRenderer as ÇlrDatagridRowRenderer, DatagridWillyWonka as ÇlrDatagridWillyWonka, ExpandableOompaLoompa as ÇlrExpandableOompaLoompa, FocusTrapDirective as ÇlrFocusTrapDirective, FocusTrapTracker as ÇlrFocusTrapTracker, StepperOompaLoompa as ÇlrStepperOompaLoompa, StepperWillyWonka as ÇlrStepperWillyWonka, TabsWillyWonka as ÇlrTabsWillyWonka, WrappedCell as ÇlrWrappedCell, WrappedColumn as ÇlrWrappedColumn, WrappedRow as ÇlrWrappedRow, ɵ0, domAdapterFactory as ɵa, LayoutService as ɵb, AlertIconAndTypesService as ɵba, MultiAlertService as ɵbb, ControlIdService as ɵbc, NgControlService as ɵbd, ClrAbstractControl as ɵbe, ContainerIdService as ɵbf, AbstractIfState as ɵbg, IfControlStateService as ɵbh, MarkControlService as ɵbi, ControlClassService as ɵbj, ClrHostWrappingModule as ɵbk, EmptyAnchor as ɵbl, ClrKeyFocusModule as ɵbm, ClrKeyFocus as ɵbn, ClrKeyFocusItem as ɵbo, ClrRovingTabindex as ɵbp, OptionSelectionService as ɵbq, AriaService as ɵbr, ComboboxFocusHandler as ɵbs, COMBOBOX_FOCUS_HANDLER_PROVIDER as ɵbt, ComboboxContainerService as ɵbu, DateNavigationService as ɵbv, DateFormControlService as ɵbw, LocaleHelperService as ɵbx, FocusService$1 as ɵby, DateIOService as ɵbz, FOCUS_ON_VIEW_INIT_PROVIDER as ɵc, DatepickerEnabledService as ɵca, ViewManagerService as ɵcb, DatepickerFocusService as ɵcc, DatalistIdService as ɵcd, ClrOutsideClickModule as ɵce, OUSTIDE_CLICK_DIRECTIVES as ɵcf, OutsideClick as ɵcg, ClrExpandableAnimationModule as ɵch, DomAdapter as ɵci, DragEventListenerService as ɵcj, DragAndDropEventBusService as ɵck, DragHandleRegistrarService as ɵcl, DraggableSnapshotService as ɵcm, GlobalDragModeService as ɵcn, Selection as ɵco, Items as ɵcp, FiltersProvider as ɵcq, Page as ɵcr, StateDebouncer as ɵcs, Sort as ɵct, DatagridRenderOrganizer as ɵcu, RowActionService as ɵcv, ExpandableRowsCount as ɵcw, DetailService as ɵcx, StateProvider as ɵcy, TableSizeService as ɵcz, FOCUS_TRAP_DIRECTIVES as ɵd, ColumnsService as ɵda, DisplayModeService as ɵdb, KeyNavigationGridController as ɵdc, DatagridFilterRegistrar as ɵdd, CustomFilter as ɵde, DatagridIfExpandService as ɵdf, SignpostFocusManager as ɵdg, SignpostIdService as ɵdh, ColumnResizerService as ɵdi, COLUMN_STATE as ɵdj, columnStateFactory as ɵdk, COLUMN_STATE_PROVIDER as ɵdl, WillyWonka as ɵdn, OompaLoompa as ɵdo, StackControl as ɵdp, TreeFeaturesService as ɵdq, treeFeaturesFactory as ɵdr, TREE_FEATURES_PROVIDER as ɵds, TreeFocusManagerService as ɵdt, RecursiveChildren as ɵdu, ScrollingService as ɵdv, ButtonInGroupService as ɵdw, ResponsiveNavigationService as ɵdx, FocusTrap as ɵdz, RootDropdownService as ɵe, ClrTemplateRefModule as ɵea, TEMPLATE_REF_DIRECTIVES as ɵeb, TemplateRefContainer as ɵec, TabsService as ɵed, TABS_ID as ɵee, tokenFactory as ɵef, TABS_ID_PROVIDER as ɵeg, VerticalNavService as ɵeh, VerticalNavIconService as ɵei, VerticalNavGroupRegistrationService as ɵej, VerticalNavGroupService as ɵek, TooltipIdService as ɵel, WizardNavigationService as ɵem, PageCollectionService as ɵen, ButtonHubService as ɵeo, HeaderActionService as ɵep, AccordionService as ɵeq, panelAnimation as ɵer, stepAnimation as ɵes, defaultAnimationTiming as ɵet, StepperService as ɵeu, TimelineIconAttributeService as ɵev, clrRootDropdownFactory as ɵf, ROOT_DROPDOWN_PROVIDER as ɵg, POPOVER_HOST_ANCHOR as ɵh, FocusService as ɵi, clrFocusServiceFactory as ɵj, FOCUS_SERVICE_PROVIDER as ɵk, DropdownFocusHandler as ɵl, DROPDOWN_FOCUS_HANDLER_PROVIDER as ɵm, customFocusableItemProvider as ɵn, UNIQUE_ID as ɵo, uniqueIdFactory as ɵp, UNIQUE_ID_PROVIDER as ɵq, FocusableItem as ɵr, AbstractPopover as ɵs, BasicFocusableItem as ɵt, BASIC_FOCUSABLE_ITEM_PROVIDER as ɵu, IF_ACTIVE_ID as ɵv, tokenFactory$1 as ɵw, IF_ACTIVE_ID_PROVIDER as ɵx, IfActiveService as ɵy, IfExpandService as ɵz };
 //# sourceMappingURL=clr-angular.js.map