@clr/angular 13.0.3 → 13.1.0

package/fesm2020/clr-angular.mjs

@@ -1,14 +1,16 @@
 import * as i0 from '@angular/core';
-import { Directive, NgModule, Injectable, Inject, PLATFORM_ID, EventEmitter, Input, Output, HostListener, Optional, Component, SkipSelf, ViewChild, InjectionToken, ContentChildren, ComponentFactoryResolver, ElementRef, HostBinding, ContentChild, Self, Attribute, LOCALE_ID, Renderer2, ChangeDetectionStrategy, ViewContainerRef, TemplateRef } from '@angular/core';
+import { Directive, NgModule, Injectable, Inject, PLATFORM_ID, EventEmitter, Input, Output, HostListener, Optional, Component, SkipSelf, ViewChild, InjectionToken, ContentChildren, ComponentFactoryResolver, ElementRef, HostBinding, ContentChild, Self, Attribute, LOCALE_ID, Renderer2, ChangeDetectionStrategy, ViewContainerRef, NgZone, ChangeDetectorRef, TemplateRef } from '@angular/core';
 import { ClarityIcons, ellipsisHorizontalIcon, exclamationCircleIcon, checkCircleIcon, angleIcon, eventIcon, calendarIcon, eyeHideIcon, eyeIcon, windowCloseIcon, ellipsisVerticalIcon, viewColumnsIcon, arrowIcon, timesIcon, stepForward2Icon, angleDoubleIcon, filterGridCircleIcon, filterGridIcon, infoCircleIcon, exclamationTriangleIcon, errorStandardIcon, circleIcon, dotCircleIcon, successStandardIcon } from '@cds/core/icon';
-import * as i4 from '@angular/common';
+import * as i5 from '@angular/common';
 import { CommonModule, DOCUMENT, isPlatformBrowser, getLocaleDayNames, FormStyle, TranslationWidth, getLocaleMonthNames, getLocaleFirstDayOfWeek, getLocaleDateFormat, FormatWidth, NgForOf } from '@angular/common';
-import { filter, debounceTime, first, startWith, switchMap, take, map, tap, distinctUntilChanged, pairwise } from 'rxjs/operators';
+import { filter, debounceTime, takeUntil, first, startWith, switchMap, take, map, tap, distinctUntilChanged, pairwise } from 'rxjs/operators';
 import * as i3 from 'rxjs';
 import { Subject, fromEvent, BehaviorSubject, of, ReplaySubject, isObservable, combineLatest, Observable } from 'rxjs';
 import { trigger, transition, style, animate, keyframes, state } from '@angular/animations';
 import * as i1 from '@angular/forms';
 import { FormsModule, SelectMultipleControlValueAccessor, FormControl, FormGroup } 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';
 
 /*
@@ -785,6 +787,7 @@ class ClrPopoverContent {
         this.smartEventsService = smartEventsService;
         this.smartOpenService = smartOpenService;
         this.subscriptions = [];
+        this.removeClickListenerFn = null;
         this.shouldRealign = false;
         // Check-collector pattern:
         // In order to get accurate content height/width values, we cannot calculate alignment offsets until
@@ -840,6 +843,10 @@ class ClrPopoverContent {
         if (!this.view) {
             return;
         }
+        if (this.removeClickListenerFn) {
+            this.removeClickListenerFn();
+            this.removeClickListenerFn = null;
+        }
         this.view.rootNodes.forEach(node => this.renderer.removeChild(this.document.body, node));
         this.container.clear();
         delete this.view;
@@ -854,16 +861,17 @@ class ClrPopoverContent {
     addContent() {
         // Create the view container
         this.view = this.container.createEmbeddedView(this.template);
-        this.smartEventsService.contentRef = this.view.rootNodes[0]; // So we know where/what to set close focus on
-        this.renderer.addClass(this.view.rootNodes[0], 'clr-popover-content');
+        const [rootNode] = this.view.rootNodes;
+        this.smartEventsService.contentRef = rootNode; // So we know where/what to set close focus on
+        this.renderer.addClass(rootNode, 'clr-popover-content');
         // Reset to the begining of the document to be available for sizing/positioning calculations.
         // If we add new content to the bottom it triggers changes in the layout that may lead to false anchor
         // coordinates values.
-        this.renderer.setStyle(this.view.rootNodes[0], 'top', '0px');
-        this.renderer.setStyle(this.view.rootNodes[0], 'left', '0px');
+        this.renderer.setStyle(rootNode, 'top', '0px');
+        this.renderer.setStyle(rootNode, 'left', '0px');
         // We need to hide it during the calculation phase, while it's not yet finally positioned.
-        this.renderer.setStyle(this.view.rootNodes[0], 'opacity', '0');
-        this.renderer.listen(this.view.rootNodes[0], 'click', event => {
+        this.renderer.setStyle(rootNode, 'opacity', '0');
+        this.removeClickListenerFn = this.renderer.listen(rootNode, 'click', event => {
             this.smartOpenService.openEvent = event;
         });
         this.view.rootNodes.forEach(node => {
@@ -893,7 +901,7 @@ ClrPopoverContent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", vers
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrPopoverContent, decorators: [{
             type: Directive,
             args: [{ selector: '[clrPopoverContent]' }]
-        }], ctorParameters: function () { return [{ type: HTMLDocument, decorators: [{
+        }], ctorParameters: function () { return [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
                 }] }, { type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i0.Renderer2 }, { type: ClrPopoverPositionService }, { type: ClrPopoverEventsService }, { type: ClrPopoverToggleService }]; }, propDecorators: { open: [{
@@ -1229,7 +1237,7 @@ ClrButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13
         <ng-content></ng-content>
       </button>
     </ng-template>
-  `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrButton, decorators: [{
             type: Component,
             args: [{
@@ -1296,6 +1304,47 @@ const UNIQUE_ID_PROVIDER = {
     useFactory: uniqueIdFactory,
 };
 
+/*
+ * 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.
+ */
+/**
+ * @description
+ *
+ * Developers should explicitly add this service to providers; it then can be injected
+ * into a constructor and used as a notifier for the `takeUntil` operator. This eliminates
+ * the need for boilerplates with subscriptions, and we don't need to implement the `OnDestroy`
+ * interface and teardown subscriptions there.
+ *
+ * This can be used as follows:
+ * ```ts
+ * @Component({
+ *   selector: 'clr-button-group',
+ *   templateUrl: 'button-group.html',
+ *   providers: [ClrDestroyService],
+ * })
+ * export class ClrButtonGroup {
+ *   constructor(public buttonGroupNewService: ButtonInGroupService, private destroy$: ClrDestroyService) {}
+ *
+ *   ngAfterContentInit() {
+ *     this.buttonGroupNewService.changes.pipe(takeUntil(this.destroy$)).subscribe(button => this.rearrangeButton(button));
+ *   }
+ * }
+ * ```
+ */
+class ClrDestroyService extends Subject {
+    ngOnDestroy() {
+        this.next();
+        this.complete();
+    }
+}
+ClrDestroyService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrDestroyService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+ClrDestroyService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrDestroyService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrDestroyService, decorators: [{
+            type: Injectable
+        }] });
+
 /*
  * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
@@ -1523,11 +1572,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrButtonGroup {
-    constructor(buttonGroupNewService, toggleService, popoverId, commonStrings) {
+    constructor(buttonGroupNewService, toggleService, popoverId, commonStrings, destroy$) {
         this.buttonGroupNewService = buttonGroupNewService;
         this.toggleService = toggleService;
         this.popoverId = popoverId;
         this.commonStrings = commonStrings;
+        this.destroy$ = destroy$;
         this.popoverPosition = ClrPopoverPositions['bottom-left'];
         this.inlineButtons = [];
         this.menuButtons = [];
@@ -1542,7 +1592,7 @@ class ClrButtonGroup {
      */
     ngAfterContentInit() {
         this.initializeButtons();
-        this.buttonGroupNewService.changes.subscribe(button => this.rearrangeButton(button));
+        this.buttonGroupNewService.changes.pipe(takeUntil(this.destroy$)).subscribe(button => this.rearrangeButton(button));
         this.buttons.changes.subscribe(() => {
             this.initializeButtons();
         });
@@ -1612,14 +1662,15 @@ class ClrButtonGroup {
         this.popoverPosition = ClrPopoverPositions[this._menuPosition];
     }
 }
-ClrButtonGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrButtonGroup, deps: [{ token: ButtonInGroupService }, { token: ClrPopoverToggleService }, { token: UNIQUE_ID }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
+ClrButtonGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrButtonGroup, deps: [{ token: ButtonInGroupService }, { token: ClrPopoverToggleService }, { token: UNIQUE_ID }, { token: ClrCommonStringsService }, { token: ClrDestroyService }], target: i0.ɵɵFactoryTarget.Component });
 ClrButtonGroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrButtonGroup, selector: "clr-button-group", inputs: { menuPosition: ["clrMenuPosition", "menuPosition"] }, host: { properties: { "class.btn-group": "true" } }, providers: [
         ButtonInGroupService,
         UNIQUE_ID_PROVIDER,
         ClrPopoverToggleService,
         ClrPopoverEventsService,
         ClrPopoverPositionService,
-    ], queries: [{ propertyName: "buttons", predicate: ClrButton }], ngImport: i0, 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-container *ngFor=\"let inlineButton of inlineButtons\">\n  <ng-template [ngTemplateOutlet]=\"inlineButton.templateRef\"></ng-template>\n</ng-container>\n<ng-container *ngIf=\"menuButtons.length > 0\">\n  <div class=\"btn-group-overflow open\" [ngClass]=\"menuPosition\" #anchor>\n    <button\n      class=\"btn dropdown-toggle\"\n      clrPopoverAnchor\n      clrPopoverOpenCloseButton\n      [attr.aria-controls]=\"popoverId\"\n      [attr.aria-expanded]=\"open\"\n      [attr.aria-label]=\"commonStrings.keys.rowActions\"\n    >\n      <cds-icon shape=\"ellipsis-horizontal\" [attr.title]=\"commonStrings.keys.more\"></cds-icon>\n    </button>\n    <div\n      role=\"menu\"\n      class=\"dropdown-menu clr-button-group-menu\"\n      [id]=\"popoverId\"\n      [attr.id]=\"popoverId\"\n      [attr.aria-hidden]=\"!open\"\n      *clrPopoverContent=\"open at popoverPosition; outsideClickToClose: true; scrollToClose: true\"\n    >\n      <ng-template [ngTemplateOutlet]=\"ref\"></ng-template>\n    </div>\n  </div>\n</ng-container>\n<ng-template #ref>\n  <ng-container *ngFor=\"let menuButton of menuButtons\">\n    <ng-template [ngTemplateOutlet]=\"menuButton.templateRef\"></ng-template>\n  </ng-container>\n</ng-template>\n", directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: ClrPopoverAnchor, selector: "[clrPopoverAnchor]" }, { type: ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { type: CdsIconCustomTag, selector: "cds-icon" }, { type: ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose"] }] });
+        ClrDestroyService,
+    ], queries: [{ propertyName: "buttons", predicate: ClrButton }], ngImport: i0, 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-container *ngFor=\"let inlineButton of inlineButtons\">\n  <ng-template [ngTemplateOutlet]=\"inlineButton.templateRef\"></ng-template>\n</ng-container>\n<ng-container *ngIf=\"menuButtons.length > 0\">\n  <div class=\"btn-group-overflow open\" [ngClass]=\"menuPosition\" #anchor>\n    <button\n      class=\"btn dropdown-toggle\"\n      clrPopoverAnchor\n      clrPopoverOpenCloseButton\n      [attr.aria-controls]=\"popoverId\"\n      [attr.aria-expanded]=\"open\"\n      [attr.aria-label]=\"commonStrings.keys.rowActions\"\n    >\n      <cds-icon shape=\"ellipsis-horizontal\" [attr.title]=\"commonStrings.keys.more\"></cds-icon>\n    </button>\n    <div\n      role=\"menu\"\n      class=\"dropdown-menu clr-button-group-menu\"\n      [id]=\"popoverId\"\n      [attr.id]=\"popoverId\"\n      [attr.aria-hidden]=\"!open\"\n      *clrPopoverContent=\"open at popoverPosition; outsideClickToClose: true; scrollToClose: true\"\n    >\n      <ng-template [ngTemplateOutlet]=\"ref\"></ng-template>\n    </div>\n  </div>\n</ng-container>\n<ng-template #ref>\n  <ng-container *ngFor=\"let menuButton of menuButtons\">\n    <ng-template [ngTemplateOutlet]=\"menuButton.templateRef\"></ng-template>\n  </ng-container>\n</ng-template>\n", directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: ClrPopoverAnchor, selector: "[clrPopoverAnchor]" }, { type: ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { type: CdsIconCustomTag, selector: "cds-icon" }, { type: ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrButtonGroup, decorators: [{
             type: Component,
             args: [{ selector: 'clr-button-group', providers: [
@@ -1628,11 +1679,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                         ClrPopoverToggleService,
                         ClrPopoverEventsService,
                         ClrPopoverPositionService,
+                        ClrDestroyService,
                     ], host: { '[class.btn-group]': 'true' }, 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-container *ngFor=\"let inlineButton of inlineButtons\">\n  <ng-template [ngTemplateOutlet]=\"inlineButton.templateRef\"></ng-template>\n</ng-container>\n<ng-container *ngIf=\"menuButtons.length > 0\">\n  <div class=\"btn-group-overflow open\" [ngClass]=\"menuPosition\" #anchor>\n    <button\n      class=\"btn dropdown-toggle\"\n      clrPopoverAnchor\n      clrPopoverOpenCloseButton\n      [attr.aria-controls]=\"popoverId\"\n      [attr.aria-expanded]=\"open\"\n      [attr.aria-label]=\"commonStrings.keys.rowActions\"\n    >\n      <cds-icon shape=\"ellipsis-horizontal\" [attr.title]=\"commonStrings.keys.more\"></cds-icon>\n    </button>\n    <div\n      role=\"menu\"\n      class=\"dropdown-menu clr-button-group-menu\"\n      [id]=\"popoverId\"\n      [attr.id]=\"popoverId\"\n      [attr.aria-hidden]=\"!open\"\n      *clrPopoverContent=\"open at popoverPosition; outsideClickToClose: true; scrollToClose: true\"\n    >\n      <ng-template [ngTemplateOutlet]=\"ref\"></ng-template>\n    </div>\n  </div>\n</ng-container>\n<ng-template #ref>\n  <ng-container *ngFor=\"let menuButton of menuButtons\">\n    <ng-template [ngTemplateOutlet]=\"menuButton.templateRef\"></ng-template>\n  </ng-container>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: ButtonInGroupService }, { type: ClrPopoverToggleService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [UNIQUE_ID]
-                }] }, { type: ClrCommonStringsService }]; }, propDecorators: { buttons: [{
+                }] }, { type: ClrCommonStringsService }, { type: ClrDestroyService }]; }, propDecorators: { buttons: [{
                 type: ContentChildren,
                 args: [ClrButton]
             }], menuPosition: [{
@@ -1729,7 +1781,7 @@ ClrLoadingButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
         <ng-content></ng-content>
       </span>
     </ng-container>
-  `, isInline: true, directives: [{ type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], animations: [
+  `, isInline: true, directives: [{ type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], animations: [
         trigger('defaultButton', [
             transition(':enter', [style({ opacity: 0 }), animate('200ms 100ms ease-in', style({ opacity: 1 }))]),
             // TODO: see if we can get leave animation to work before spinner's enter animation
@@ -2679,7 +2731,7 @@ ClrControlContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
       <ng-content select="clr-control-error" *ngIf="showInvalid"></ng-content>
       <ng-content select="clr-control-success" *ngIf="showValid"></ng-content>
     </div>
-  `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
+  `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrControlContainer, decorators: [{
             type: Component,
             args: [{
@@ -3055,7 +3107,7 @@ ClrCheckboxWrapper.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
     <ng-content select="[clrCheckbox],[clrToggle]"></ng-content>
     <ng-content select="label"></ng-content>
     <label *ngIf="!label"></label>
-  `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }] });
+  `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrCheckboxWrapper, decorators: [{
             type: Component,
             args: [{
@@ -3181,7 +3233,7 @@ ClrCheckboxContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         <ng-content select="clr-control-success" *ngIf="showValid"></ng-content>
       </div>
     </div>
-  `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
+  `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrCheckboxContainer, decorators: [{
             type: Component,
             args: [{
@@ -4911,7 +4963,7 @@ class ClrCalendar {
     }
 }
 ClrCalendar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrCalendar, deps: [{ token: LocaleHelperService }, { token: DateNavigationService }, { token: DatepickerFocusService }, { token: DateIOService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ClrCalendar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrCalendar, selector: "clr-calendar", host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0, 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", components: [{ type: ClrDay, selector: "clr-day", inputs: ["clrDayView"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+ClrCalendar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrCalendar, selector: "clr-calendar", host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0, 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", components: [{ type: ClrDay, selector: "clr-day", inputs: ["clrDayView"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: 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" }]
@@ -4947,9 +4999,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
  * 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.
@@ -5121,7 +5187,7 @@ ClrMonthpicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
     >
       {{ month }}
     </button>
-  `, isInline: true, directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+  `, isInline: true, directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrMonthpicker, decorators: [{
             type: Component,
             args: [{
@@ -5374,7 +5440,7 @@ ClrYearpicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         {{ year }}
       </button>
     </div>
-  `, isInline: true, directives: [{ type: CdsIconCustomTag, selector: "cds-icon" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+  `, isInline: true, directives: [{ type: CdsIconCustomTag, selector: "cds-icon" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrYearpicker, decorators: [{
             type: Component,
             args: [{
@@ -5530,7 +5596,7 @@ class ClrDatepickerViewManager {
     }
 }
 ClrDatepickerViewManager.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrDatepickerViewManager, deps: [{ token: ClrCommonStringsService }, { token: ViewManagerService }], target: i0.ɵɵFactoryTarget.Component });
-ClrDatepickerViewManager.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrDatepickerViewManager, selector: "clr-datepicker-view-manager", host: { attributes: { "role": "dialog" }, properties: { "class.datepicker": "true", "attr.aria-modal": "true", "attr.aria-label": "commonStrings.keys.datepickerDialogLabel" } }, providers: [DatepickerFocusService], ngImport: i0, 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<clr-monthpicker *ngIf=\"isMonthView\"></clr-monthpicker>\n<clr-yearpicker *ngIf=\"isYearView\"></clr-yearpicker>\n<clr-daypicker *ngIf=\"isDayView\"></clr-daypicker>\n", components: [{ type: ClrMonthpicker, selector: "clr-monthpicker" }, { type: ClrYearpicker, selector: "clr-yearpicker" }, { type: ClrDaypicker, selector: "clr-daypicker" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+ClrDatepickerViewManager.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrDatepickerViewManager, selector: "clr-datepicker-view-manager", host: { attributes: { "role": "dialog" }, properties: { "class.datepicker": "true", "attr.aria-modal": "true", "attr.aria-label": "commonStrings.keys.datepickerDialogLabel" } }, providers: [DatepickerFocusService], ngImport: i0, 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<clr-monthpicker *ngIf=\"isMonthView\"></clr-monthpicker>\n<clr-yearpicker *ngIf=\"isYearView\"></clr-yearpicker>\n<clr-daypicker *ngIf=\"isDayView\"></clr-daypicker>\n", components: [{ type: ClrMonthpicker, selector: "clr-monthpicker" }, { type: ClrYearpicker, selector: "clr-yearpicker" }, { type: ClrDaypicker, selector: "clr-daypicker" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrDatepickerViewManager, decorators: [{
             type: Component,
             args: [{ selector: 'clr-datepicker-view-manager', providers: [DatepickerFocusService], host: {
@@ -5698,7 +5764,7 @@ ClrDateContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
       <ng-content select="clr-control-error" *ngIf="showInvalid"></ng-content>
       <ng-content select="clr-control-success" *ngIf="showValid"></ng-content>
     </div>
-  `, isInline: true, components: [{ type: ClrDatepickerViewManager, selector: "clr-datepicker-view-manager" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: ClrPopoverAnchor, selector: "[clrPopoverAnchor]" }, { type: ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { type: CdsIconCustomTag, selector: "cds-icon" }, { type: ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose"] }, { type: FocusTrapDirective, selector: "[clrFocusTrap]", inputs: ["clrFocusTrap"] }] });
+  `, isInline: true, components: [{ type: ClrDatepickerViewManager, selector: "clr-datepicker-view-manager" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: ClrPopoverAnchor, selector: "[clrPopoverAnchor]" }, { type: ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { type: CdsIconCustomTag, selector: "cds-icon" }, { type: ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose"] }, { type: FocusTrapDirective, selector: "[clrFocusTrap]", inputs: ["clrFocusTrap"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrDateContainer, decorators: [{
             type: Component,
             args: [{
@@ -6164,7 +6230,7 @@ ClrInputContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
       <ng-content select="clr-control-error" *ngIf="showInvalid"></ng-content>
       <ng-content select="clr-control-success" *ngIf="showValid"></ng-content>
     </div>
-  `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
+  `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrInputContainer, decorators: [{
             type: Component,
             args: [{
@@ -6338,7 +6404,7 @@ ClrPasswordContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
       <ng-content select="clr-control-error" *ngIf="showInvalid"></ng-content>
       <ng-content select="clr-control-success" *ngIf="showValid"></ng-content>
     </div>
-  `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
+  `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrPasswordContainer, decorators: [{
             type: Component,
             args: [{
@@ -6511,7 +6577,7 @@ ClrRadioWrapper.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
     <ng-content select="[clrRadio]"></ng-content>
     <ng-content select="label"></ng-content>
     <label *ngIf="!label"></label>
-  `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }] });
+  `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrRadioWrapper, decorators: [{
             type: Component,
             args: [{
@@ -6616,7 +6682,7 @@ ClrRadioContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
         <ng-content select="clr-control-success" *ngIf="showValid"></ng-content>
       </div>
     </div>
-  `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
+  `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrRadioContainer, decorators: [{
             type: Component,
             args: [{
@@ -6740,7 +6806,7 @@ ClrSelectContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
       <ng-content select="clr-control-error" *ngIf="showInvalid"></ng-content>
       <ng-content select="clr-control-success" *ngIf="showValid"></ng-content>
     </div>
-  `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
+  `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrSelectContainer, decorators: [{
             type: Component,
             args: [{
@@ -6863,7 +6929,7 @@ ClrTextareaContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
       <ng-content select="clr-control-error" *ngIf="showInvalid"></ng-content>
       <ng-content select="clr-control-success" *ngIf="showValid"></ng-content>
     </div>
-  `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
+  `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrTextareaContainer, decorators: [{
             type: Component,
             args: [{
@@ -7011,7 +7077,7 @@ ClrRangeContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
       <ng-content select="clr-control-error" *ngIf="showInvalid"></ng-content>
       <ng-content select="clr-control-success" *ngIf="showValid"></ng-content>
     </div>
-  `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
+  `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrRangeContainer, decorators: [{
             type: Component,
             args: [{
@@ -7180,7 +7246,7 @@ ClrDatalistContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
       <ng-content select="clr-control-error" *ngIf="showInvalid"></ng-content>
       <ng-content select="clr-control-success" *ngIf="showValid"></ng-content>
     </div>
-  `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
+  `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrDatalistContainer, decorators: [{
             type: Component,
             args: [{
@@ -7870,7 +7936,7 @@ class ClrOption {
 }
 ClrOption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrOption, deps: [{ token: i0.ElementRef }, { token: ClrCommonStringsService }, { token: ComboboxFocusHandler }, { token: OptionSelectionService }, { token: UNIQUE_ID }], target: i0.ɵɵFactoryTarget.Component });
 ClrOption.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrOption, selector: "clr-option", inputs: { optionId: ["id", "optionId"], value: ["clrValue", "value"] }, host: { listeners: { "click": "onClick()" }, properties: { "class.clr-combobox-option": "true", "attr.role": "\"option\"", "attr.tabindex": "-1", "attr.id": "optionId", "class.active": "this.selected", "class.clr-focus": "this.focusClass" } }, providers: [UNIQUE_ID_PROVIDER], ngImport: i0, template: `<ng-content></ng-content>
-    <span *ngIf="selected" class="clr-sr-only"> {{ commonStrings.keys.comboboxSelected }} </span> `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    <span *ngIf="selected" class="clr-sr-only"> {{ commonStrings.keys.comboboxSelected }} </span> `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrOption, decorators: [{
             type: Component,
             args: [{
@@ -8092,7 +8158,7 @@ ClrOptions.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "1
 
     <!--Option Groups and Options will be projected here-->
     <ng-content></ng-content>
-  `, isInline: true, components: [{ type: ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  `, isInline: true, components: [{ type: ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrOptions, decorators: [{
             type: Component,
             args: [{
@@ -8204,7 +8270,7 @@ ClrComboboxContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
       <ng-content select="clr-control-error" *ngIf="showInvalid"></ng-content>
       <ng-content select="clr-control-success" *ngIf="showValid"></ng-content>
     </div>
-  `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
+  `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrComboboxContainer, decorators: [{
             type: Component,
             args: [{
@@ -8936,9 +9002,6 @@ class ClrCombobox extends WrappedFormControl {
         // the aria properties on the input element, not on the component.
         this.el = this.textbox;
     }
-    ngOnDestroy() {
-        this.subscriptions.forEach((sub) => sub.unsubscribe());
-    }
 }
 ClrCombobox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrCombobox, deps: [{ token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i1.NgControl, optional: true, self: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: OptionSelectionService }, { token: ClrCommonStringsService }, { token: ClrPopoverToggleService }, { token: ClrPopoverPositionService }, { token: IfControlStateService, optional: true }, { token: ComboboxContainerService, optional: true }, { token: PLATFORM_ID }, { token: AriaService }, { token: ComboboxFocusHandler }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 ClrCombobox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrCombobox, selector: "clr-combobox", inputs: { placeholder: "placeholder", multiSelect: ["clrMulti", "multiSelect"] }, outputs: { clrInputChange: "clrInputChange", clrOpenChange: "clrOpenChange", clrSelectionChange: "clrSelectionChange" }, host: { listeners: { "keydown": "onKeyUp($event)" }, properties: { "class.aria-required": "true", "class.clr-combobox": "true", "class.clr-combobox-disabled": "control?.disabled" } }, providers: [
@@ -8953,7 +9016,7 @@ ClrCombobox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "
         ClrPopoverToggleService,
         ClrPopoverEventsService,
         ClrPopoverPositionService,
-    ], queries: [{ propertyName: "optionSelected", first: true, predicate: ClrOptionSelected, descendants: true }], viewQueries: [{ propertyName: "textbox", first: true, predicate: ["textboxInput"], descendants: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }], usesInheritance: true, ngImport: i0, 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", components: [{ type: ClrRovingTabindex, selector: "[clrRovingTabindex]", inputs: ["clrRovingTabindex", "clrRovingTabindexDisabled"] }], directives: [{ type: ClrPopoverAnchor, selector: "[clrPopoverAnchor]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ClrKeyFocusItem, selector: "[clrKeyFocusItem]" }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: CdsIconCustomTag, selector: "cds-icon" }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { type: ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose"] }] });
+    ], queries: [{ propertyName: "optionSelected", first: true, predicate: ClrOptionSelected, descendants: true }], viewQueries: [{ propertyName: "textbox", first: true, predicate: ["textboxInput"], descendants: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }], usesInheritance: true, ngImport: i0, 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", components: [{ type: ClrRovingTabindex, selector: "[clrRovingTabindex]", inputs: ["clrRovingTabindex", "clrRovingTabindexDisabled"] }], directives: [{ type: ClrPopoverAnchor, selector: "[clrPopoverAnchor]" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ClrKeyFocusItem, selector: "[clrKeyFocusItem]" }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: CdsIconCustomTag, selector: "cds-icon" }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { type: ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrCombobox, decorators: [{
             type: Component,
             args: [{ selector: 'clr-combobox', providers: [
@@ -9536,13 +9599,13 @@ class DragEventListenerService {
             };
             // Initialize nested listeners' property with a new empty array;
             this.nestedListeners = [];
-            // This is needed to disable selection during dragging (especially in EDGE/IE11).
-            this.nestedListeners.push(this.renderer.listen('document', 'selectstart', (selectEvent) => {
-                selectEvent.preventDefault();
-                selectEvent.stopImmediatePropagation();
-            }));
-            // Listen to mousemove/touchmove events outside of angular zone.
+            // Listen to selectstart/mousemove/touchmove events outside of angular zone.
             this.ngZone.runOutsideAngular(() => {
+                // This is needed to disable selection during dragging (especially in EDGE/IE11).
+                this.nestedListeners.push(this.renderer.listen('document', 'selectstart', (selectEvent) => {
+                    selectEvent.preventDefault();
+                    selectEvent.stopImmediatePropagation();
+                }));
                 // During the drag start delay, pointer should stay within the boundary.
                 this.checkDragStartBoundary(moveOnEvent);
                 this.dragStartDelayTimeout = setTimeout(() => {
@@ -10429,11 +10492,12 @@ const FOCUS_ON_VIEW_INIT_PROVIDER = {
 /*  This directive is for guiding the document focus to the newly added content when its view is initialized
     so that assistive technologies can read its content. */
 class ClrFocusOnViewInit {
-    constructor(el, platformId, focusOnViewInit, document, renderer) {
+    constructor(el, platformId, focusOnViewInit, document, renderer, ngZone) {
         this.el = el;
         this.platformId = platformId;
         this.focusOnViewInit = focusOnViewInit;
         this.renderer = renderer;
+        this.destroy$ = new Subject();
         this.directFocus = true; // true if the element gets focused without need to set tabindex;
         this._isEnabled = this.focusOnViewInit;
         // Angular compiler doesn't understand the type Document
@@ -10441,13 +10505,15 @@ class ClrFocusOnViewInit {
         // even though it understands the injection token DOCUMENT
         // https://github.com/angular/angular/issues/20351
         this.document = document;
-    }
-    onFocusout() {
-        if (!this.directFocus) {
-            // manually set attributes and styles should be removed
-            this.renderer.removeAttribute(this.el.nativeElement, 'tabindex');
-            this.renderer.setStyle(this.el.nativeElement, 'outline', null);
-        }
+        ngZone.runOutsideAngular(() => fromEvent(el.nativeElement, 'focusout')
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            if (!this.directFocus) {
+                // manually set attributes and styles should be removed
+                this.renderer.removeAttribute(this.el.nativeElement, 'tabindex');
+                this.renderer.setStyle(this.el.nativeElement, 'outline', null);
+            }
+        }));
     }
     set isEnabled(value) {
         if (this.focusOnViewInit && typeof value === 'boolean') {
@@ -10457,6 +10523,9 @@ class ClrFocusOnViewInit {
     ngAfterViewInit() {
         this.focus();
     }
+    ngOnDestroy() {
+        this.destroy$.next();
+    }
     focus() {
         if (!isPlatformBrowser(this.platformId)) {
             return;
@@ -10477,8 +10546,8 @@ class ClrFocusOnViewInit {
         }
     }
 }
-ClrFocusOnViewInit.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrFocusOnViewInit, deps: [{ token: i0.ElementRef }, { token: PLATFORM_ID }, { token: FOCUS_ON_VIEW_INIT }, { token: DOCUMENT }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-ClrFocusOnViewInit.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrFocusOnViewInit, selector: "[clrFocusOnViewInit]", inputs: { isEnabled: ["clrFocusOnViewInit", "isEnabled"] }, host: { listeners: { "focusout": "onFocusout()" } }, ngImport: i0 });
+ClrFocusOnViewInit.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrFocusOnViewInit, deps: [{ token: i0.ElementRef }, { token: PLATFORM_ID }, { token: FOCUS_ON_VIEW_INIT }, { token: DOCUMENT }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+ClrFocusOnViewInit.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrFocusOnViewInit, selector: "[clrFocusOnViewInit]", inputs: { isEnabled: ["clrFocusOnViewInit", "isEnabled"] }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrFocusOnViewInit, decorators: [{
             type: Directive,
             args: [{
@@ -10493,10 +10562,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i0.Renderer2 }]; }, propDecorators: { onFocusout: [{
-                type: HostListener,
-                args: ['focusout']
-            }], isEnabled: [{
+                }] }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { isEnabled: [{
                 type: Input,
                 args: ['clrFocusOnViewInit']
             }] } });
@@ -11175,11 +11241,12 @@ class DatagridStringFilterImpl {
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class DatagridStringFilter extends DatagridFilterRegistrar {
-    constructor(filters, domAdapter, commonStrings, smartToggleService) {
+    constructor(filters, domAdapter, commonStrings, smartToggleService, ngZone) {
         super(filters);
         this.domAdapter = domAdapter;
         this.commonStrings = commonStrings;
         this.smartToggleService = smartToggleService;
+        this.ngZone = ngZone;
         this.subs = [];
         /**
          * Indicates if the filter dropdown is open
@@ -11187,6 +11254,9 @@ class DatagridStringFilter extends DatagridFilterRegistrar {
         this.open = false;
         this.filterValueChange = new EventEmitter();
     }
+    get placeholderValue() {
+        return this.placeholder || this.commonStrings.keys.filterItems;
+    }
     /**
      * Customizable filter logic based on a search text
      */
@@ -11208,9 +11278,16 @@ class DatagridStringFilter extends DatagridFilterRegistrar {
     ngAfterViewInit() {
         this.subs.push(this.smartToggleService.openChange.subscribe(openChange => {
             this.open = openChange;
-            // The timeout in used because when this executes, the input isn't displayed.
-            setTimeout(() => {
-                this.domAdapter.focus(this.input.nativeElement);
+            // Note: this is being run outside of the Angular zone because `element.focus()` doesn't require
+            // running change detection.
+            this.ngZone.runOutsideAngular(() => {
+                // The animation frame in used because when this executes, the input isn't displayed.
+                // Note: `element.focus()` causes re-layout and this may lead to frame drop on slower devices.
+                // `setTimeout` is a macrotask and macrotasks are executed within the current rendering frame.
+                // Animation tasks are executed within the next rendering frame.
+                requestAnimationFrame(() => {
+                    this.domAdapter.focus(this.input.nativeElement);
+                });
             });
         }));
     }
@@ -11239,8 +11316,8 @@ class DatagridStringFilter extends DatagridFilterRegistrar {
         }
     }
 }
-DatagridStringFilter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DatagridStringFilter, deps: [{ token: FiltersProvider }, { token: DomAdapter }, { token: ClrCommonStringsService }, { token: ClrPopoverToggleService }], target: i0.ɵɵFactoryTarget.Component });
-DatagridStringFilter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: DatagridStringFilter, selector: "clr-dg-string-filter", inputs: { customStringFilter: ["clrDgStringFilter", "customStringFilter"], value: ["clrFilterValue", "value"] }, outputs: { filterValueChange: "clrFilterValueChange" }, providers: [{ provide: CustomFilter, useExisting: DatagridStringFilter }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "filterContainer", first: true, predicate: ClrDatagridFilter, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+DatagridStringFilter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DatagridStringFilter, deps: [{ token: FiltersProvider }, { token: DomAdapter }, { token: ClrCommonStringsService }, { token: ClrPopoverToggleService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+DatagridStringFilter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: DatagridStringFilter, selector: "clr-dg-string-filter", inputs: { placeholder: ["clrFilterPlaceholder", "placeholder"], customStringFilter: ["clrDgStringFilter", "customStringFilter"], value: ["clrFilterValue", "value"] }, outputs: { filterValueChange: "clrFilterValueChange" }, providers: [{ provide: CustomFilter, useExisting: DatagridStringFilter }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "filterContainer", first: true, predicate: ClrDatagridFilter, descendants: true }], usesInheritance: true, ngImport: i0, template: `
     <clr-dg-filter [clrDgFilter]="registered" [(clrDgFilterOpen)]="open">
       <input
         #input
@@ -11248,8 +11325,8 @@ DatagridStringFilter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         name="search"
         [(ngModel)]="value"
         class="clr-input"
-        [attr.aria-label]="commonStrings.keys.filterItems"
-        [placeholder]="commonStrings.keys.filterItems"
+        [attr.aria-label]="placeholderValue"
+        [placeholder]="placeholderValue"
       />
     </clr-dg-filter>
   `, isInline: true, components: [{ type: ClrDatagridFilter, selector: "clr-dg-filter", inputs: ["clrDgFilterOpen", "clrDgFilter"], outputs: ["clrDgFilterOpenChange"] }], directives: [{ type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
@@ -11266,13 +11343,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
         name="search"
         [(ngModel)]="value"
         class="clr-input"
-        [attr.aria-label]="commonStrings.keys.filterItems"
-        [placeholder]="commonStrings.keys.filterItems"
+        [attr.aria-label]="placeholderValue"
+        [placeholder]="placeholderValue"
       />
     </clr-dg-filter>
   `,
                 }]
-        }], ctorParameters: function () { return [{ type: FiltersProvider }, { type: DomAdapter }, { type: ClrCommonStringsService }, { type: ClrPopoverToggleService }]; }, propDecorators: { customStringFilter: [{
+        }], ctorParameters: function () { return [{ type: FiltersProvider }, { type: DomAdapter }, { type: ClrCommonStringsService }, { type: ClrPopoverToggleService }, { type: i0.NgZone }]; }, propDecorators: { placeholder: [{
+                type: Input,
+                args: ['clrFilterPlaceholder']
+            }], customStringFilter: [{
                 type: Input,
                 args: ['clrDgStringFilter']
             }], input: [{
@@ -11413,11 +11493,12 @@ class DatagridNumericFilterImpl {
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class DatagridNumericFilter extends DatagridFilterRegistrar {
-    constructor(filters, domAdapter, commonStrings, popoverToggleService) {
+    constructor(filters, domAdapter, commonStrings, popoverToggleService, ngZone) {
         super(filters);
         this.domAdapter = domAdapter;
         this.commonStrings = commonStrings;
         this.popoverToggleService = popoverToggleService;
+        this.ngZone = ngZone;
         this.subscriptions = [];
         /**
          * Indicates if the filter dropdown is open
@@ -11426,10 +11507,17 @@ class DatagridNumericFilter extends DatagridFilterRegistrar {
         this.filterValueChange = new EventEmitter();
     }
     ngOnDestroy() {
+        super.ngOnDestroy();
         this.subscriptions.forEach(sub => {
             sub.unsubscribe();
         });
     }
+    get maxPlaceholderValue() {
+        return this.maxPlaceholder || this.commonStrings.keys.maxValue;
+    }
+    get minPlaceholderValue() {
+        return this.minPlaceholder || this.commonStrings.keys.minValue;
+    }
     /**
      * Customizable filter logic based on high and low values
      */
@@ -11451,9 +11539,16 @@ class DatagridNumericFilter extends DatagridFilterRegistrar {
     ngAfterViewInit() {
         this.subscriptions.push(this.popoverToggleService.openChange.subscribe(openChange => {
             this.open = openChange;
-            // The timeout in used because when this executes, the input isn't displayed.
-            setTimeout(() => {
-                this.domAdapter.focus(this.input.nativeElement);
+            // Note: this is being run outside of the Angular zone because `element.focus()` doesn't require
+            // running change detection.
+            this.ngZone.runOutsideAngular(() => {
+                // The animation frame in used because when this executes, the input isn't displayed.
+                // Note: `element.focus()` causes re-layout and this may lead to frame drop on slower devices.
+                // `setTimeout` is a macrotask and macrotasks are executed within the current rendering frame.
+                // Animation tasks are executed within the next rendering frame.
+                requestAnimationFrame(() => {
+                    this.domAdapter.focus(this.input.nativeElement);
+                });
             });
         }));
     }
@@ -11524,8 +11619,8 @@ class DatagridNumericFilter extends DatagridFilterRegistrar {
         }
     }
 }
-DatagridNumericFilter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DatagridNumericFilter, deps: [{ token: FiltersProvider }, { token: DomAdapter }, { token: ClrCommonStringsService }, { token: ClrPopoverToggleService }], target: i0.ɵɵFactoryTarget.Component });
-DatagridNumericFilter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: DatagridNumericFilter, selector: "clr-dg-numeric-filter", inputs: { customNumericFilter: ["clrDgNumericFilter", "customNumericFilter"], value: ["clrFilterValue", "value"] }, outputs: { filterValueChange: "clrFilterValueChange" }, providers: [{ provide: CustomFilter, useExisting: DatagridNumericFilter }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input_low"], descendants: true }, { propertyName: "filterContainer", first: true, predicate: ClrDatagridFilter, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+DatagridNumericFilter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DatagridNumericFilter, deps: [{ token: FiltersProvider }, { token: DomAdapter }, { token: ClrCommonStringsService }, { token: ClrPopoverToggleService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+DatagridNumericFilter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: DatagridNumericFilter, selector: "clr-dg-numeric-filter", inputs: { maxPlaceholder: ["clrFilterMaxPlaceholder", "maxPlaceholder"], minPlaceholder: ["clrFilterMinPlaceholder", "minPlaceholder"], customNumericFilter: ["clrDgNumericFilter", "customNumericFilter"], value: ["clrFilterValue", "value"] }, outputs: { filterValueChange: "clrFilterValueChange" }, providers: [{ provide: CustomFilter, useExisting: DatagridNumericFilter }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input_low"], descendants: true }, { propertyName: "filterContainer", first: true, predicate: ClrDatagridFilter, descendants: true }], usesInheritance: true, ngImport: i0, template: `
     <clr-dg-filter [clrDgFilter]="registered" [(clrDgFilterOpen)]="open">
       <input
         class="datagrid-numeric-filter-input"
@@ -11533,8 +11628,8 @@ DatagridNumericFilter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         type="number"
         name="low"
         [(ngModel)]="low"
-        [placeholder]="commonStrings.keys.minValue"
-        [attr.aria-label]="commonStrings.keys.minValue"
+        [placeholder]="minPlaceholderValue"
+        [attr.aria-label]="minPlaceholderValue"
       />
       <span class="datagrid-filter-input-spacer"></span>
       <input
@@ -11543,8 +11638,8 @@ DatagridNumericFilter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         type="number"
         name="high"
         [(ngModel)]="high"
-        [placeholder]="commonStrings.keys.maxValue"
-        [attr.aria-label]="commonStrings.keys.maxValue"
+        [placeholder]="maxPlaceholderValue"
+        [attr.aria-label]="maxPlaceholderValue"
       />
     </clr-dg-filter>
   `, isInline: true, components: [{ type: ClrDatagridFilter, selector: "clr-dg-filter", inputs: ["clrDgFilterOpen", "clrDgFilter"], outputs: ["clrDgFilterOpenChange"] }], directives: [{ type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
@@ -11561,8 +11656,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
         type="number"
         name="low"
         [(ngModel)]="low"
-        [placeholder]="commonStrings.keys.minValue"
-        [attr.aria-label]="commonStrings.keys.minValue"
+        [placeholder]="minPlaceholderValue"
+        [attr.aria-label]="minPlaceholderValue"
       />
       <span class="datagrid-filter-input-spacer"></span>
       <input
@@ -11571,13 +11666,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
         type="number"
         name="high"
         [(ngModel)]="high"
-        [placeholder]="commonStrings.keys.maxValue"
-        [attr.aria-label]="commonStrings.keys.maxValue"
+        [placeholder]="maxPlaceholderValue"
+        [attr.aria-label]="maxPlaceholderValue"
       />
     </clr-dg-filter>
   `,
                 }]
-        }], ctorParameters: function () { return [{ type: FiltersProvider }, { type: DomAdapter }, { type: ClrCommonStringsService }, { type: ClrPopoverToggleService }]; }, propDecorators: { customNumericFilter: [{
+        }], ctorParameters: function () { return [{ type: FiltersProvider }, { type: DomAdapter }, { type: ClrCommonStringsService }, { type: ClrPopoverToggleService }, { type: i0.NgZone }]; }, propDecorators: { maxPlaceholder: [{
+                type: Input,
+                args: ['clrFilterMaxPlaceholder']
+            }], minPlaceholder: [{
+                type: Input,
+                args: ['clrFilterMinPlaceholder']
+            }], customNumericFilter: [{
                 type: Input,
                 args: ['clrDgNumericFilter']
             }], input: [{
@@ -12374,6 +12475,7 @@ class ClrDatagridColumn extends DatagridFilterRegistrar {
         this.subscriptions.push(this.listenForDetailPaneChanges());
     }
     ngOnDestroy() {
+        super.ngOnDestroy();
         this.subscriptions.forEach(s => s.unsubscribe());
     }
     listenForDetailPaneChanges() {
@@ -12559,6 +12661,15 @@ class ClrDatagridColumn extends DatagridFilterRegistrar {
             this.customFilter = true;
         }
     }
+    get filterStringPlaceholderValue() {
+        return this.filterStringPlaceholder || this.commonStrings.keys.filterItems;
+    }
+    get filterNumberMaxPlaceholderValue() {
+        return this.filterNumberMaxPlaceholder || this.commonStrings.keys.maxValue;
+    }
+    get filterNumberMinPlaceholderValue() {
+        return this.filterNumberMinPlaceholder || this.commonStrings.keys.minValue;
+    }
     set updateFilterValue(newValue) {
         if (this.filter) {
             if (this.filter instanceof DatagridStringFilterImpl) {
@@ -12610,7 +12721,7 @@ class ClrDatagridColumn extends DatagridFilterRegistrar {
     }
 }
 ClrDatagridColumn.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrDatagridColumn, deps: [{ token: Sort }, { token: FiltersProvider }, { token: i0.ViewContainerRef }, { token: DetailService }, { token: i0.ChangeDetectorRef }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
-ClrDatagridColumn.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrDatagridColumn, selector: "clr-dg-column", inputs: { colType: ["clrDgColType", "colType"], field: ["clrDgField", "field"], sortBy: ["clrDgSortBy", "sortBy"], sorted: ["clrDgSorted", "sorted"], sortOrder: ["clrDgSortOrder", "sortOrder"], updateFilterValue: ["clrFilterValue", "updateFilterValue"] }, outputs: { sortedChange: "clrDgSortedChange", sortOrderChange: "clrDgSortOrderChange", filterValueChange: "clrFilterValueChange" }, host: { attributes: { "role": "columnheader" }, properties: { "class.datagrid-column": "true", "attr.aria-sort": "ariaSort" } }, providers: [ClrPopoverPositionService, ClrPopoverEventsService, ClrPopoverToggleService], queries: [{ propertyName: "projectedFilter", first: true, predicate: CustomFilter, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+ClrDatagridColumn.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrDatagridColumn, selector: "clr-dg-column", inputs: { colType: ["clrDgColType", "colType"], field: ["clrDgField", "field"], sortBy: ["clrDgSortBy", "sortBy"], sorted: ["clrDgSorted", "sorted"], sortOrder: ["clrDgSortOrder", "sortOrder"], filterStringPlaceholder: ["clrFilterStringPlaceholder", "filterStringPlaceholder"], filterNumberMaxPlaceholder: ["clrFilterNumberMaxPlaceholder", "filterNumberMaxPlaceholder"], filterNumberMinPlaceholder: ["clrFilterNumberMinPlaceholder", "filterNumberMinPlaceholder"], updateFilterValue: ["clrFilterValue", "updateFilterValue"] }, outputs: { sortedChange: "clrDgSortedChange", sortOrderChange: "clrDgSortOrderChange", filterValueChange: "clrFilterValueChange" }, host: { attributes: { "role": "columnheader" }, properties: { "class.datagrid-column": "true", "attr.aria-sort": "ariaSort" } }, providers: [ClrPopoverPositionService, ClrPopoverEventsService, ClrPopoverToggleService], queries: [{ propertyName: "projectedFilter", first: true, predicate: CustomFilter, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
     <div class="datagrid-column-flex">
       <button class="datagrid-column-title" *ngIf="sortable" (click)="sort()" type="button">
         <ng-container *ngTemplateOutlet="columnTitle"></ng-container>
@@ -12627,12 +12738,15 @@ ClrDatagridColumn.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
 
       <clr-dg-string-filter
         *ngIf="field && !customFilter && colType == 'string'"
+        [clrFilterPlaceholder]="filterStringPlaceholderValue"
         [clrDgStringFilter]="registered"
         [(clrFilterValue)]="filterValue"
       ></clr-dg-string-filter>
 
       <clr-dg-numeric-filter
         *ngIf="field && !customFilter && colType == 'number'"
+        [clrFilterMaxPlaceholder]="filterMaxPlaceholderValue"
+        [clrFilterMinPlaceholder]="filterMinPlaceholderValue"
         [clrDgNumericFilter]="registered"
         [(clrFilterValue)]="filterValue"
       ></clr-dg-numeric-filter>
@@ -12647,7 +12761,7 @@ ClrDatagridColumn.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
 
       <clr-dg-column-separator *ngIf="showSeparator"></clr-dg-column-separator>
     </div>
-  `, isInline: true, components: [{ type: DatagridStringFilter, selector: "clr-dg-string-filter", inputs: ["clrDgStringFilter", "clrFilterValue"], outputs: ["clrFilterValueChange"] }, { type: DatagridNumericFilter, selector: "clr-dg-numeric-filter", inputs: ["clrDgNumericFilter", "clrFilterValue"], outputs: ["clrFilterValueChange"] }, { type: ClrDatagridColumnSeparator, selector: "clr-dg-column-separator" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: CdsIconCustomTag, selector: "cds-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, components: [{ type: DatagridStringFilter, selector: "clr-dg-string-filter", inputs: ["clrFilterPlaceholder", "clrDgStringFilter", "clrFilterValue"], outputs: ["clrFilterValueChange"] }, { type: DatagridNumericFilter, selector: "clr-dg-numeric-filter", inputs: ["clrFilterMaxPlaceholder", "clrFilterMinPlaceholder", "clrDgNumericFilter", "clrFilterValue"], outputs: ["clrFilterValueChange"] }, { type: ClrDatagridColumnSeparator, selector: "clr-dg-column-separator" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: CdsIconCustomTag, selector: "cds-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrDatagridColumn, decorators: [{
             type: Component,
             args: [{
@@ -12669,12 +12783,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
 
       <clr-dg-string-filter
         *ngIf="field && !customFilter && colType == 'string'"
+        [clrFilterPlaceholder]="filterStringPlaceholderValue"
         [clrDgStringFilter]="registered"
         [(clrFilterValue)]="filterValue"
       ></clr-dg-string-filter>
 
       <clr-dg-numeric-filter
         *ngIf="field && !customFilter && colType == 'number'"
+        [clrFilterMaxPlaceholder]="filterMaxPlaceholderValue"
+        [clrFilterMinPlaceholder]="filterMinPlaceholderValue"
         [clrDgNumericFilter]="registered"
         [(clrFilterValue)]="filterValue"
       ></clr-dg-numeric-filter>
@@ -12722,6 +12839,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             }], projectedFilter: [{
                 type: ContentChild,
                 args: [CustomFilter]
+            }], filterStringPlaceholder: [{
+                type: Input,
+                args: ['clrFilterStringPlaceholder']
+            }], filterNumberMaxPlaceholder: [{
+                type: Input,
+                args: ['clrFilterNumberMaxPlaceholder']
+            }], filterNumberMinPlaceholder: [{
+                type: Input,
+                args: ['clrFilterNumberMinPlaceholder']
             }], updateFilterValue: [{
                 type: Input,
                 args: ['clrFilterValue']
@@ -12978,7 +13104,7 @@ ClrDatagridPlaceholder.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
       <div class="datagrid-placeholder-image" *ngIf="emptyDatagrid"></div>
       <span role="gridcell"><ng-content *ngIf="emptyDatagrid"></ng-content></span>
     </div>
-  `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrDatagridPlaceholder, decorators: [{
             type: Component,
             args: [{
@@ -13176,7 +13302,7 @@ ClrSignpost.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "
     </ng-container>
 
     <ng-content></ng-content>
-  `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrSignpostTrigger, selector: "[clrSignpostTrigger]" }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
+  `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrSignpostTrigger, selector: "[clrSignpostTrigger]" }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrSignpost, decorators: [{
             type: Component,
             args: [{
@@ -13947,7 +14073,7 @@ ClrDatagridRow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
         DatagridIfExpandService,
         { provide: IfExpandService, useExisting: DatagridIfExpandService },
         { provide: LoadingListener, useExisting: DatagridIfExpandService },
-    ], queries: [{ propertyName: "dgCells", predicate: ClrDatagridCell }], viewQueries: [{ propertyName: "expandAnimation", first: true, predicate: ClrExpandableAnimation, descendants: true }, { propertyName: "detailButton", first: true, predicate: ["detailButton"], descendants: true }, { propertyName: "_stickyCells", first: true, predicate: ["stickyCells"], descendants: true, read: ViewContainerRef }, { propertyName: "_scrollableCells", first: true, predicate: ["scrollableCells"], descendants: true, read: ViewContainerRef }, { propertyName: "_calculatedCells", first: true, predicate: ["calculatedCells"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n  We need to wrap the #rowContent in label element if we are in rowSelectionMode.\n  Clicking of that wrapper label will equate to clicking on the whole row, which triggers the checkbox to toggle.\n-->\n<label class=\"datagrid-row-clickable\" *ngIf=\"selection.rowSelectionMode\">\n  <clr-expandable-animation [clrExpandTrigger]=\"expandAnimationTrigger\" *ngIf=\"expand.expandable\">\n    <ng-template [ngTemplateOutlet]=\"rowContent\"></ng-template>\n  </clr-expandable-animation>\n  <ng-template [ngTemplateOutlet]=\"rowContent\" *ngIf=\"!expand.expandable\"></ng-template>\n</label>\n\n<clr-expandable-animation\n  *ngIf=\"!selection.rowSelectionMode && expand.expandable\"\n  [clrExpandTrigger]=\"expandAnimationTrigger\"\n>\n  <ng-template [ngTemplateOutlet]=\"rowContent\"></ng-template>\n</clr-expandable-animation>\n\n<ng-template *ngIf=\"!selection.rowSelectionMode && !expand.expandable\" [ngTemplateOutlet]=\"rowContent\"></ng-template>\n\n<!--\n    We need the \"project into template\" hacks because we need this in 2 different places\n    depending on whether the details replace the row or not.\n-->\n<ng-template #detail>\n  <ng-content select=\"clr-dg-row-detail\"></ng-content>\n</ng-template>\n\n<ng-template #rowContent>\n  <div\n    role=\"row\"\n    [id]=\"id\"\n    class=\"datagrid-row-master datagrid-row-flex\"\n    [class.datagrid-row-detail-open]=\"detailService.isRowOpen(item)\"\n  >\n    <div class=\"datagrid-row-sticky\">\n      <!-- Sticky elements here -->\n      <ng-container #stickyCells>\n        <div\n          *ngIf=\"selection.selectionType === SELECTION_TYPE.Multi\"\n          class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n          [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n          role=\"gridcell\"\n        >\n          <div class=\"clr-checkbox-wrapper\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"selected\"\n              (ngModelChange)=\"toggle($event)\"\n              [id]=\"checkboxId\"\n              [attr.disabled]=\"clrDgSelectable ? null : true\"\n              [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n              [attr.aria-label]=\"clrDgRowAriaLabel\"\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]=\"checkboxId\" class=\"clr-control-label clr-col-null\">\n              <span class=\"clr-sr-only\">{{commonStrings.keys.select}}</span>\n            </label>\n          </div>\n        </div>\n        <div\n          *ngIf=\"selection.selectionType === SELECTION_TYPE.Single\"\n          class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n          [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n        >\n          <!-- TODO: it would be better if in addition to the generic \"Select\" label, we could add aria-labelledby\n          to label the radio by the first cell in the row (typically an id or name).\n          It's pretty easy to label it with the whole row since we already have an id for it, but in most\n          cases the row is far too long to serve as a label, the screenreader reads every single cell content. -->\n          <input\n            type=\"radio\"\n            clrRadio\n            [id]=\"radioId\"\n            [name]=\"selection.id + '-radio'\"\n            [value]=\"item\"\n            [(ngModel)]=\"selection.currentSingle\"\n            [checked]=\"selection.currentSingle === item\"\n            [attr.disabled]=\"clrDgSelectable ? null : true\"\n            [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n            [attr.aria-label]=\"clrDgRowAriaLabel\"\n          />\n        </div>\n        <div\n          *ngIf=\"rowActionService.hasActionableRow\"\n          class=\"datagrid-row-actions datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n        >\n          <ng-content select=\"clr-dg-action-overflow\"></ng-content>\n        </div>\n        <div\n          *ngIf=\"globalExpandable.hasExpandableRow\"\n          class=\"datagrid-expandable-caret datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n        >\n          <ng-container *ngIf=\"expand.expandable\">\n            <button\n              *ngIf=\"!expand.loading\"\n              (click)=\"toggleExpand()\"\n              type=\"button\"\n              class=\"datagrid-expandable-caret-button\"\n              [attr.aria-expanded]=\"expand.expanded\"\n              [attr.aria-label]=\"expand.expanded ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n              [attr.aria-controls]=\"expandableId\"\n            >\n              <cds-icon\n                shape=\"angle\"\n                class=\"datagrid-expandable-caret-icon\"\n                [attr.direction]=\"expand.expanded ? 'down' : 'right'\"\n                [attr.title]=\"expand.expanded ? commonStrings.keys.collapse : commonStrings.keys.expand\"\n              ></cds-icon>\n            </button>\n            <clr-spinner *ngIf=\"expand.loading\" clrSmall>{{ commonStrings.keys.loading }}</clr-spinner>\n          </ng-container>\n        </div>\n        <div *ngIf=\"detailService.enabled\" class=\"datagrid-detail-caret datagrid-fixed-column datagrid-cell\">\n          <button\n            (click)=\"detailService.toggle(item, detailButton)\"\n            type=\"button\"\n            #detailButton\n            class=\"datagrid-detail-caret-button\"\n            [class.is-open]=\"detailService.isRowOpen(item)\"\n            [attr.aria-label]=\"detailService.isRowOpen(item) ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n            [attr.aria-expanded]=\"detailService.isOpen\"\n            [attr.aria-controls]=\"detailService.id\"\n            aria-haspopup=\"dialog\"\n          >\n            <cds-icon\n              shape=\"angle-double\"\n              [attr.direction]=\"detailService.isRowOpen(item) ? 'left' : 'right'\"\n              class=\"datagrid-detail-caret-icon\"\n              [attr.title]=\"detailService.isRowOpen(item) ? commonStrings.keys.close: commonStrings.keys.open\"\n            ></cds-icon>\n          </button>\n        </div>\n      </ng-container>\n      <!-- placeholder for projecting other sticky cells as pinned-->\n    </div>\n    <div class=\"datagrid-row-scrollable\" [ngClass]=\"{'is-replaced': replaced && expanded}\">\n      <div class=\"datagrid-scrolling-cells\">\n        <ng-content select=\"clr-dg-cell\"></ng-content>\n        <ng-container #scrollableCells></ng-container>\n      </div>\n      <!-- details here when replace, re-visit when sticky container is used for pinned cells -->\n      <ng-template *ngIf=\"replaced && !expand.loading\" [ngTemplateOutlet]=\"detail\"></ng-template>\n      <ng-template *ngIf=\"!replaced && !expand.loading\" [ngTemplateOutlet]=\"detail\"></ng-template>\n    </div>\n  </div>\n</ng-template>\n\n<ng-container #calculatedCells></ng-container>\n", components: [{ type: ClrExpandableAnimation, selector: "clr-expandable-animation", inputs: ["clrExpandTrigger"] }, { type: ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: ClrRadio, selector: "[clrRadio]" }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
+    ], queries: [{ propertyName: "dgCells", predicate: ClrDatagridCell }], viewQueries: [{ propertyName: "expandAnimation", first: true, predicate: ClrExpandableAnimation, descendants: true }, { propertyName: "detailButton", first: true, predicate: ["detailButton"], descendants: true }, { propertyName: "_stickyCells", first: true, predicate: ["stickyCells"], descendants: true, read: ViewContainerRef }, { propertyName: "_scrollableCells", first: true, predicate: ["scrollableCells"], descendants: true, read: ViewContainerRef }, { propertyName: "_calculatedCells", first: true, predicate: ["calculatedCells"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n  We need to wrap the #rowContent in label element if we are in rowSelectionMode.\n  Clicking of that wrapper label will equate to clicking on the whole row, which triggers the checkbox to toggle.\n-->\n<label class=\"datagrid-row-clickable\" *ngIf=\"selection.rowSelectionMode\">\n  <clr-expandable-animation [clrExpandTrigger]=\"expandAnimationTrigger\" *ngIf=\"expand.expandable\">\n    <ng-template [ngTemplateOutlet]=\"rowContent\"></ng-template>\n  </clr-expandable-animation>\n  <ng-template [ngTemplateOutlet]=\"rowContent\" *ngIf=\"!expand.expandable\"></ng-template>\n</label>\n\n<clr-expandable-animation\n  *ngIf=\"!selection.rowSelectionMode && expand.expandable\"\n  [clrExpandTrigger]=\"expandAnimationTrigger\"\n>\n  <ng-template [ngTemplateOutlet]=\"rowContent\"></ng-template>\n</clr-expandable-animation>\n\n<ng-template *ngIf=\"!selection.rowSelectionMode && !expand.expandable\" [ngTemplateOutlet]=\"rowContent\"></ng-template>\n\n<!--\n    We need the \"project into template\" hacks because we need this in 2 different places\n    depending on whether the details replace the row or not.\n-->\n<ng-template #detail>\n  <ng-content select=\"clr-dg-row-detail\"></ng-content>\n</ng-template>\n\n<ng-template #rowContent>\n  <div\n    role=\"row\"\n    [id]=\"id\"\n    class=\"datagrid-row-master datagrid-row-flex\"\n    [class.datagrid-row-detail-open]=\"detailService.isRowOpen(item)\"\n  >\n    <div class=\"datagrid-row-sticky\">\n      <!-- Sticky elements here -->\n      <ng-container #stickyCells>\n        <div\n          *ngIf=\"selection.selectionType === SELECTION_TYPE.Multi\"\n          class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n          [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n          role=\"gridcell\"\n        >\n          <div class=\"clr-checkbox-wrapper\">\n            <input\n              type=\"checkbox\"\n              [ngModel]=\"selected\"\n              (ngModelChange)=\"toggle($event)\"\n              [id]=\"checkboxId\"\n              [attr.disabled]=\"clrDgSelectable ? null : true\"\n              [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n              [attr.aria-label]=\"clrDgRowAriaLabel\"\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]=\"checkboxId\" class=\"clr-control-label clr-col-null\">\n              <span class=\"clr-sr-only\">{{commonStrings.keys.select}}</span>\n            </label>\n          </div>\n        </div>\n        <div\n          *ngIf=\"selection.selectionType === SELECTION_TYPE.Single\"\n          class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n          [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n        >\n          <!-- TODO: it would be better if in addition to the generic \"Select\" label, we could add aria-labelledby\n          to label the radio by the first cell in the row (typically an id or name).\n          It's pretty easy to label it with the whole row since we already have an id for it, but in most\n          cases the row is far too long to serve as a label, the screenreader reads every single cell content. -->\n          <input\n            type=\"radio\"\n            clrRadio\n            [id]=\"radioId\"\n            [name]=\"selection.id + '-radio'\"\n            [value]=\"item\"\n            [(ngModel)]=\"selection.currentSingle\"\n            [checked]=\"selection.currentSingle === item\"\n            [attr.disabled]=\"clrDgSelectable ? null : true\"\n            [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n            [attr.aria-label]=\"clrDgRowAriaLabel\"\n          />\n        </div>\n        <div\n          *ngIf=\"rowActionService.hasActionableRow\"\n          class=\"datagrid-row-actions datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n        >\n          <ng-content select=\"clr-dg-action-overflow\"></ng-content>\n        </div>\n        <div\n          *ngIf=\"globalExpandable.hasExpandableRow\"\n          class=\"datagrid-expandable-caret datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n        >\n          <ng-container *ngIf=\"expand.expandable\">\n            <button\n              *ngIf=\"!expand.loading\"\n              (click)=\"toggleExpand()\"\n              type=\"button\"\n              class=\"datagrid-expandable-caret-button\"\n              [attr.aria-expanded]=\"expand.expanded\"\n              [attr.aria-label]=\"expand.expanded ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n              [attr.aria-controls]=\"expandableId\"\n            >\n              <cds-icon\n                shape=\"angle\"\n                class=\"datagrid-expandable-caret-icon\"\n                [attr.direction]=\"expand.expanded ? 'down' : 'right'\"\n                [attr.title]=\"expand.expanded ? commonStrings.keys.collapse : commonStrings.keys.expand\"\n              ></cds-icon>\n            </button>\n            <clr-spinner *ngIf=\"expand.loading\" clrSmall>{{ commonStrings.keys.loading }}</clr-spinner>\n          </ng-container>\n        </div>\n        <div *ngIf=\"detailService.enabled\" class=\"datagrid-detail-caret datagrid-fixed-column datagrid-cell\">\n          <button\n            (click)=\"detailService.toggle(item, detailButton)\"\n            type=\"button\"\n            #detailButton\n            class=\"datagrid-detail-caret-button\"\n            [class.is-open]=\"detailService.isRowOpen(item)\"\n            [attr.aria-label]=\"detailService.isRowOpen(item) ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n            [attr.aria-expanded]=\"detailService.isOpen\"\n            [attr.aria-controls]=\"detailService.id\"\n            aria-haspopup=\"dialog\"\n          >\n            <cds-icon\n              shape=\"angle-double\"\n              [attr.direction]=\"detailService.isRowOpen(item) ? 'left' : 'right'\"\n              class=\"datagrid-detail-caret-icon\"\n              [attr.title]=\"detailService.isRowOpen(item) ? commonStrings.keys.close: commonStrings.keys.open\"\n            ></cds-icon>\n          </button>\n        </div>\n      </ng-container>\n      <!-- placeholder for projecting other sticky cells as pinned-->\n    </div>\n    <div class=\"datagrid-row-scrollable\" [ngClass]=\"{'is-replaced': replaced && expanded}\">\n      <div class=\"datagrid-scrolling-cells\">\n        <ng-content select=\"clr-dg-cell\"></ng-content>\n        <ng-container #scrollableCells></ng-container>\n      </div>\n      <!-- details here when replace, re-visit when sticky container is used for pinned cells -->\n      <ng-template *ngIf=\"replaced && !expand.loading\" [ngTemplateOutlet]=\"detail\"></ng-template>\n      <ng-template *ngIf=\"!replaced && !expand.loading\" [ngTemplateOutlet]=\"detail\"></ng-template>\n    </div>\n  </div>\n</ng-template>\n\n<ng-container #calculatedCells></ng-container>\n", components: [{ type: ClrExpandableAnimation, selector: "clr-expandable-animation", inputs: ["clrExpandTrigger"] }, { type: ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: ClrRadio, selector: "[clrRadio]" }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrDatagridRow, decorators: [{
             type: Component,
             args: [{ selector: 'clr-dg-row', host: {
@@ -14356,7 +14482,7 @@ ClrDatagrid.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "
         TableSizeService,
         ColumnsService,
         DisplayModeService,
-    ], queries: [{ propertyName: "iterator", first: true, predicate: ClrDatagridItems, descendants: true }, { propertyName: "placeholder", first: true, predicate: ClrDatagridPlaceholder, descendants: true }, { propertyName: "columns", predicate: ClrDatagridColumn }, { propertyName: "rows", predicate: ClrDatagridRow }], viewQueries: [{ propertyName: "scrollableColumns", first: true, predicate: ["scrollableColumns"], descendants: true, read: ViewContainerRef }, { propertyName: "datagridTable", first: true, predicate: ["datagridTable"], descendants: true, read: ElementRef }, { propertyName: "_projectedDisplayColumns", first: true, predicate: ["projectedDisplayColumns"], descendants: true, read: ViewContainerRef }, { propertyName: "_projectedCalculationColumns", first: true, predicate: ["projectedCalculationColumns"], descendants: true, read: ViewContainerRef }, { propertyName: "_displayedRows", first: true, predicate: ["displayedRows"], descendants: true, read: ViewContainerRef }, { propertyName: "_calculationRows", first: true, predicate: ["calculationRows"], descendants: true, read: ViewContainerRef }], ngImport: i0, 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", components: [{ type: ClrDatagridPlaceholder, selector: "clr-dg-placeholder" }, { type: ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }] });
+    ], queries: [{ propertyName: "iterator", first: true, predicate: ClrDatagridItems, descendants: true }, { propertyName: "placeholder", first: true, predicate: ClrDatagridPlaceholder, descendants: true }, { propertyName: "columns", predicate: ClrDatagridColumn }, { propertyName: "rows", predicate: ClrDatagridRow }], viewQueries: [{ propertyName: "scrollableColumns", first: true, predicate: ["scrollableColumns"], descendants: true, read: ViewContainerRef }, { propertyName: "datagridTable", first: true, predicate: ["datagridTable"], descendants: true, read: ElementRef }, { propertyName: "_projectedDisplayColumns", first: true, predicate: ["projectedDisplayColumns"], descendants: true, read: ViewContainerRef }, { propertyName: "_projectedCalculationColumns", first: true, predicate: ["projectedCalculationColumns"], descendants: true, read: ViewContainerRef }, { propertyName: "_displayedRows", first: true, predicate: ["displayedRows"], descendants: true, read: ViewContainerRef }, { propertyName: "_calculationRows", first: true, predicate: ["calculationRows"], descendants: true, read: ViewContainerRef }], ngImport: i0, 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", components: [{ type: ClrDatagridPlaceholder, selector: "clr-dg-placeholder" }, { type: ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrDatagrid, decorators: [{
             type: Component,
             args: [{ selector: 'clr-datagrid', providers: [
@@ -14798,7 +14924,9 @@ ClrDatagridColumnToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
     >
       <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"
@@ -14833,7 +14961,7 @@ ClrDatagridColumnToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         </clr-dg-column-toggle-button>
       </div>
     </div>
-  `, isInline: true, components: [{ type: ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { type: ClrDatagridColumnToggleButton, selector: "clr-dg-column-toggle-button", outputs: ["clrAllSelected"] }], directives: [{ type: ClrPopoverAnchor, selector: "[clrPopoverAnchor]" }, { type: ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { type: CdsIconCustomTag, selector: "cds-icon" }, { type: ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose"] }, { type: FocusTrapDirective, selector: "[clrFocusTrap]", inputs: ["clrFocusTrap"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrPopoverCloseButton, selector: "[clrPopoverCloseButton]", outputs: ["clrPopoverOnCloseChange"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+  `, isInline: true, components: [{ type: ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { type: ClrDatagridColumnToggleButton, selector: "clr-dg-column-toggle-button", outputs: ["clrAllSelected"] }], directives: [{ type: ClrPopoverAnchor, selector: "[clrPopoverAnchor]" }, { type: ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { type: CdsIconCustomTag, selector: "cds-icon" }, { type: ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose"] }, { type: FocusTrapDirective, selector: "[clrFocusTrap]", inputs: ["clrFocusTrap"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrPopoverCloseButton, selector: "[clrPopoverCloseButton]", outputs: ["clrPopoverOnCloseChange"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: ClrLabel, selector: "label", inputs: ["for"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrDatagridColumnToggle, decorators: [{
             type: Component,
             args: [{
@@ -14862,7 +14990,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
     >
       <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"
@@ -15036,7 +15166,7 @@ ClrDatagridDetail.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
       <ng-content></ng-content>
       <div class="clr-sr-only">{{ commonStrings.keys.detailPaneEnd }}</div>
     </div>
-  `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FocusTrapDirective, selector: "[clrFocusTrap]", inputs: ["clrFocusTrap"] }] });
+  `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FocusTrapDirective, selector: "[clrFocusTrap]", inputs: ["clrFocusTrap"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrDatagridDetail, decorators: [{
             type: Component,
             args: [{
@@ -15507,6 +15637,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
  * 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.
@@ -15544,7 +15680,7 @@ ClrDatagridFooter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
       </div>
     </ng-container>
     <ng-content select="clr-dg-pagination"></ng-content>
-  `, isInline: true, components: [{ type: ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { type: ClrDatagridColumnToggle, selector: "clr-dg-column-toggle" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: ClrLabel, selector: "label", inputs: ["for"] }] });
+  `, isInline: true, components: [{ type: ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { type: ClrDatagridColumnToggle, selector: "clr-dg-column-toggle" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: ClrLabel, selector: "label", inputs: ["for"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrDatagridFooter, decorators: [{
             type: Component,
             args: [{
@@ -15714,7 +15850,7 @@ ClrDatagridPageSize.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         <option *ngFor="let option of pageSizeOptions" [ngValue]="option">{{ option }}</option>
       </select>
     </div>
-  `, isInline: true, directives: [{ type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
+  `, isInline: true, directives: [{ type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrDatagridPageSize, decorators: [{
             type: Component,
             args: [{
@@ -15970,7 +16106,7 @@ ClrDatagridPagination.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         </button>
       </div>
     </ng-container>
-  `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
+  `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrDatagridPagination, decorators: [{
             type: Component,
             args: [{
@@ -16512,7 +16648,7 @@ const domAdapterFactory = (platformId) => {
 // Fixes build error
 // @dynamic (https://github.com/angular/angular/issues/19698#issuecomment-338340211)
 class DatagridMainRenderer {
-    constructor(organizer, items, page, domAdapter, el, renderer, detailService, tableSizeService, columnsService) {
+    constructor(organizer, items, page, domAdapter, el, renderer, detailService, tableSizeService, columnsService, ngZone) {
         this.organizer = organizer;
         this.items = items;
         this.page = page;
@@ -16522,6 +16658,7 @@ class DatagridMainRenderer {
         this.detailService = detailService;
         this.tableSizeService = tableSizeService;
         this.columnsService = columnsService;
+        this.ngZone = ngZone;
         this._heightSet = false;
         this.subscriptions = [];
         /**
@@ -16561,8 +16698,10 @@ class DatagridMainRenderer {
             this.stabilizeColumns();
         }
         if (this.shouldComputeHeight()) {
-            setTimeout(() => {
-                this.computeDatagridHeight();
+            this.ngZone.runOutsideAngular(() => {
+                setTimeout(() => {
+                    this.computeDatagridHeight();
+                });
             });
         }
     }
@@ -16660,7 +16799,7 @@ class DatagridMainRenderer {
         }
     }
 }
-DatagridMainRenderer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DatagridMainRenderer, deps: [{ token: DatagridRenderOrganizer }, { token: Items }, { token: Page }, { token: DomAdapter }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DetailService }, { token: TableSizeService }, { token: ColumnsService }], target: i0.ɵɵFactoryTarget.Directive });
+DatagridMainRenderer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DatagridMainRenderer, deps: [{ token: DatagridRenderOrganizer }, { token: Items }, { token: Page }, { token: DomAdapter }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DetailService }, { token: TableSizeService }, { token: ColumnsService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
 DatagridMainRenderer.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: DatagridMainRenderer, selector: "clr-datagrid", providers: [{ provide: DomAdapter, useFactory: domAdapterFactory, deps: [PLATFORM_ID] }], queries: [{ propertyName: "headers", predicate: DatagridHeaderRenderer }, { propertyName: "rows", predicate: DatagridRowRenderer, descendants: true }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DatagridMainRenderer, decorators: [{
             type: Directive,
@@ -16668,7 +16807,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                     selector: 'clr-datagrid',
                     providers: [{ provide: DomAdapter, useFactory: domAdapterFactory, deps: [PLATFORM_ID] }],
                 }]
-        }], ctorParameters: function () { return [{ type: DatagridRenderOrganizer }, { type: Items }, { type: Page }, { type: DomAdapter }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DetailService }, { type: TableSizeService }, { type: ColumnsService }]; }, propDecorators: { headers: [{
+        }], ctorParameters: function () { return [{ type: DatagridRenderOrganizer }, { type: Items }, { type: Page }, { type: DomAdapter }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DetailService }, { type: TableSizeService }, { type: ColumnsService }, { type: i0.NgZone }]; }, propDecorators: { headers: [{
                 type: ContentChildren,
                 args: [DatagridHeaderRenderer]
             }], rows: [{
@@ -17042,7 +17181,7 @@ ClrStackBlock.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         <ng-content select="clr-stack-block"></ng-content>
       </div>
     </clr-expandable-animation>
-  `, isInline: true, styles: [":host{display:block}\n"], components: [{ type: ClrExpandableAnimation, selector: "clr-expandable-animation", inputs: ["clrExpandTrigger"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
+  `, isInline: true, styles: [":host{display:block}\n"], components: [{ type: ClrExpandableAnimation, selector: "clr-expandable-animation", inputs: ["clrExpandTrigger"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrStackBlock, decorators: [{
             type: Component,
             args: [{
@@ -17230,7 +17369,7 @@ ClrStackHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
         <!-- End of undocumented experimental feature. -->
       </span>
     </h4>
-  `, isInline: true, styles: [":host{display:block}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  `, isInline: true, styles: [":host{display:block}\n"], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrStackHeader, decorators: [{
             type: Component,
             args: [{
@@ -17276,14 +17415,22 @@ class StackControl {
         this.modelChange = new EventEmitter(false);
         // Make the ClrStackView editable, since it contains a StackControl
         this.stackView.editable = true;
-        this.stackView.editingChange.subscribe((editing) => {
+        this.subscription = this.stackView.editingChange.subscribe((editing) => {
             // Edit mode was closed
             if (!editing) {
                 this.modelChange.emit(this.model);
             }
         });
     }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
 }
+StackControl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StackControl, deps: [{ token: ClrStackView }], target: i0.ɵɵFactoryTarget.Directive });
+StackControl.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: StackControl, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StackControl, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: ClrStackView }]; } });
 
 /*
  * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
@@ -17301,7 +17448,7 @@ ClrStackInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
 ClrStackInput.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrStackInput, selector: "clr-stack-input", inputs: { model: ["clrModel", "model"], type: "type" }, outputs: { modelChange: "clrModelChange" }, usesInheritance: true, ngImport: i0, template: `
     <span *ngIf="!stackView.editing">{{ model }}</span>
     <input [type]="type" *ngIf="stackView.editing" [(ngModel)]="model" />
-  `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+  `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrStackInput, decorators: [{
             type: Component,
             args: [{
@@ -17334,7 +17481,7 @@ ClrStackSelect.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
         <ng-content></ng-content>
       </select>
     </div>
-  `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+  `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrStackSelect, decorators: [{
             type: Component,
             args: [{
@@ -17809,7 +17956,7 @@ RecursiveChildren.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
         <ng-container *ngTemplateOutlet="featuresService.recursion.template; context: getContext(child)"></ng-container>
       </ng-container>
     </ng-container>
-  `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+  `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RecursiveChildren, decorators: [{
             type: Component,
             args: [{
@@ -17951,9 +18098,11 @@ class ClrTreeNode {
         }
     }
     focusTreeNode() {
-        if (isPlatformBrowser(this.platformId) && document.activeElement !== this.contentContainer.nativeElement) {
+        const containerEl = this.contentContainer.nativeElement;
+        if (isPlatformBrowser(this.platformId) && document.activeElement !== containerEl) {
             this.setTabIndex(0);
-            this.contentContainer.nativeElement.focus();
+            containerEl.focus();
+            containerEl.scrollIntoView({ block: 'nearest', inline: 'nearest' });
         }
     }
     broadcastFocusOnContainer() {
@@ -17980,19 +18129,21 @@ class ClrTreeNode {
                 this.collapseOrFocusParent();
                 break;
             case KeyCodes.Home:
+                event.preventDefault();
                 this.focusManager.focusFirstVisibleNode();
                 break;
             case KeyCodes.End:
+                event.preventDefault();
                 this.focusManager.focusLastVisibleNode();
                 break;
             case KeyCodes.Enter:
-                this.expandOrDefault();
+                this.toggleExpandOrTriggerDefault();
                 break;
             case KeyCodes.Space:
             case KeyCodes.Spacebar:
                 // to prevent scrolling on space key in this specific case
                 event.preventDefault();
-                this.expandOrDefault();
+                this.toggleExpandOrTriggerDefault();
                 break;
             default:
                 break;
@@ -18001,9 +18152,9 @@ class ClrTreeNode {
     get isParent() {
         return this._model.children && this._model.children.length > 0;
     }
-    expandOrDefault() {
+    toggleExpandOrTriggerDefault() {
         if (this.isExpandable() && !this.isSelectable()) {
-            this.expandOrFocusFirstChild();
+            this.expandService.expanded = !this.expanded;
         }
         else {
             this.triggerDefaultAction();
@@ -18049,7 +18200,7 @@ ClrTreeNode.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "
         TREE_FEATURES_PROVIDER,
         IfExpandService,
         { provide: LoadingListener, useExisting: IfExpandService },
-    ], queries: [{ propertyName: "treeNodeLinkList", predicate: ClrTreeNodeLink }], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ElementRef, static: true }], ngImport: i0, 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<div\n  #contentContainer\n  role=\"treeitem\"\n  class=\"clr-tree-node-content-container\"\n  tabindex=\"-1\"\n  [attr.aria-expanded]=\"isExpandable() ? expanded : null\"\n  [attr.aria-selected]=\"ariaSelected\"\n  (keydown)=\"onKeyDown($event)\"\n  (focus)=\"broadcastFocusOnContainer()\"\n>\n  <button\n    *ngIf=\"isExpandable() && !isModelLoading && !expandService.loading\"\n    aria-hidden=\"true\"\n    type=\"button\"\n    tabindex=\"-1\"\n    class=\"clr-treenode-caret\"\n    (click)=\"expandService.toggle();\"\n    (focus)=\"focusTreeNode()\"\n  >\n    <cds-icon\n      class=\"clr-treenode-caret-icon\"\n      shape=\"angle\"\n      [attr.direction]=\"expandService.expanded ? 'down' : 'right'\"\n    ></cds-icon>\n  </button>\n  <div class=\"clr-treenode-spinner-container\" *ngIf=\"expandService.loading || isModelLoading\">\n    <span class=\"clr-treenode-spinner spinner\"></span>\n  </div>\n  <div class=\"clr-checkbox-wrapper clr-treenode-checkbox\" *ngIf=\"featuresService.selectable\">\n    <input\n      aria-hidden=\"true\"\n      type=\"checkbox\"\n      id=\"{{nodeId}}-check\"\n      class=\"clr-checkbox\"\n      [checked]=\"_model.selected.value === STATES.SELECTED\"\n      [indeterminate]=\"_model.selected.value === STATES.INDETERMINATE\"\n      (change)=\"_model.toggleSelection(featuresService.eager)\"\n      (focus)=\"focusTreeNode()\"\n      tabindex=\"-1\"\n    />\n    <label for=\"{{nodeId}}-check\" class=\"clr-control-label\"></label>\n  </div>\n  <div class=\"clr-treenode-content\" (mousedown)=\"focusTreeNode()\">\n    <ng-content></ng-content>\n    <div class=\"clr-sr-only\" *ngIf=\"featuresService.selectable\">\n      <span *ngIf=\"ariaSelected\"> selected </span>\n      <span *ngIf=\"!ariaSelected\"> unselected </span>\n    </div>\n  </div>\n</div>\n<div\n  class=\"clr-treenode-children\"\n  [@toggleChildrenAnim]=\"expandService.expanded ? 'expanded' : 'collapsed'\"\n  [attr.role]=\"isExpandable() && !featuresService.recursion ? 'group' : null\"\n>\n  <ng-content select=\"clr-tree-node\"></ng-content>\n  <ng-content select=\"[clrIfExpanded]\"></ng-content>\n  <clr-recursive-children [parent]=\"_model\"></clr-recursive-children>\n</div>\n", components: [{ type: RecursiveChildren, selector: "clr-recursive-children", inputs: ["parent", "children"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CdsIconCustomTag, selector: "cds-icon" }], animations: [
+    ], queries: [{ propertyName: "treeNodeLinkList", predicate: ClrTreeNodeLink }], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ElementRef, static: true }], ngImport: i0, 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<div\n  #contentContainer\n  role=\"treeitem\"\n  class=\"clr-tree-node-content-container\"\n  tabindex=\"-1\"\n  [attr.aria-expanded]=\"isExpandable() ? expanded : null\"\n  [attr.aria-selected]=\"ariaSelected\"\n  (keydown)=\"onKeyDown($event)\"\n  (focus)=\"broadcastFocusOnContainer()\"\n>\n  <button\n    *ngIf=\"isExpandable() && !isModelLoading && !expandService.loading\"\n    aria-hidden=\"true\"\n    type=\"button\"\n    tabindex=\"-1\"\n    class=\"clr-treenode-caret\"\n    (click)=\"expandService.toggle();\"\n    (focus)=\"focusTreeNode()\"\n  >\n    <cds-icon\n      class=\"clr-treenode-caret-icon\"\n      shape=\"angle\"\n      [attr.direction]=\"expandService.expanded ? 'down' : 'right'\"\n    ></cds-icon>\n  </button>\n  <div class=\"clr-treenode-spinner-container\" *ngIf=\"expandService.loading || isModelLoading\">\n    <span class=\"clr-treenode-spinner spinner\"></span>\n  </div>\n  <div class=\"clr-checkbox-wrapper clr-treenode-checkbox\" *ngIf=\"featuresService.selectable\">\n    <input\n      aria-hidden=\"true\"\n      type=\"checkbox\"\n      id=\"{{nodeId}}-check\"\n      class=\"clr-checkbox\"\n      [checked]=\"_model.selected.value === STATES.SELECTED\"\n      [indeterminate]=\"_model.selected.value === STATES.INDETERMINATE\"\n      (change)=\"_model.toggleSelection(featuresService.eager)\"\n      (focus)=\"focusTreeNode()\"\n      tabindex=\"-1\"\n    />\n    <label for=\"{{nodeId}}-check\" class=\"clr-control-label\"></label>\n  </div>\n  <div class=\"clr-treenode-content\" (mousedown)=\"focusTreeNode()\">\n    <ng-content></ng-content>\n    <div class=\"clr-sr-only\" *ngIf=\"featuresService.selectable\">\n      <span *ngIf=\"ariaSelected\"> selected </span>\n      <span *ngIf=\"!ariaSelected\"> unselected </span>\n    </div>\n  </div>\n</div>\n<div\n  class=\"clr-treenode-children\"\n  [@toggleChildrenAnim]=\"expandService.expanded ? 'expanded' : 'collapsed'\"\n  [attr.role]=\"isExpandable() && !featuresService.recursion ? 'group' : null\"\n>\n  <ng-content select=\"clr-tree-node\"></ng-content>\n  <ng-content select=\"[clrIfExpanded]\"></ng-content>\n  <clr-recursive-children [parent]=\"_model\"></clr-recursive-children>\n</div>\n", components: [{ type: RecursiveChildren, selector: "clr-recursive-children", inputs: ["parent", "children"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CdsIconCustomTag, selector: "cds-icon" }], animations: [
         trigger('toggleChildrenAnim', [
             transition('collapsed => expanded', [style({ height: 0 }), animate(200, style({ height: '*' }))]),
             transition('expanded => collapsed', [style({ height: '*' }), animate(200, style({ height: 0 }))]),
@@ -18159,7 +18310,7 @@ ClrTree.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0
       *ngIf="featuresService.recursion"
       [children]="featuresService.recursion.root"
     ></clr-recursive-children>
-  `, isInline: true, components: [{ type: RecursiveChildren, selector: "clr-recursive-children", inputs: ["parent", "children"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  `, isInline: true, components: [{ type: RecursiveChildren, selector: "clr-recursive-children", inputs: ["parent", "children"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrTree, decorators: [{
             type: Component,
             args: [{
@@ -18436,7 +18587,7 @@ class DropdownFocusHandler {
      * If the dropdown was opened by clicking on the trigger, we automatically move to the first item
      */
     moveToFirstItemWhenOpen() {
-        this.toggleService.openChange.subscribe(open => {
+        const subscription = this.toggleService.openChange.subscribe(open => {
             if (open && this.toggleService.originalEvent) {
                 // Even if we properly waited for ngAfterViewInit, the container still wouldn't be attached to the DOM.
                 // So setTimeout is the only way to wait for the container to be ready to move focus to first item.
@@ -18451,12 +18602,13 @@ class DropdownFocusHandler {
                 });
             }
         });
+        this._unlistenFuncs.push(() => subscription.unsubscribe());
     }
     /**
      * Focus on the menu when it opens, and focus back on the root trigger when the whole dropdown becomes closed
      */
     handleRootFocus() {
-        this.toggleService.openChange.subscribe(open => {
+        const subscription = this.toggleService.openChange.subscribe(open => {
             if (!open) {
                 // We reset the state of the focus service both on initialization and when closing.
                 this.focusService.reset(this);
@@ -18467,6 +18619,7 @@ class DropdownFocusHandler {
             }
             this.focusBackOnTrigger = open;
         });
+        this._unlistenFuncs.push(() => subscription.unsubscribe());
     }
     get trigger() {
         return this._trigger;
@@ -19084,6 +19237,7 @@ class AbstractPopover {
          * a separate directive on the host. So let's do dirty but performant for now.
          */
         this.closeOnOutsideClick = false;
+        this.documentESCListener = null;
         this.closeOnOutsideClickCallback = event => {
             // The anchor element containing the click event origin means, the click wasn't triggered outside.
             if (this.anchorElem.contains(event.target)) {
@@ -19094,6 +19248,8 @@ class AbstractPopover {
         this.el = injector.get(ElementRef);
         this.toggleService = injector.get(ClrPopoverToggleService);
         this.renderer = injector.get(Renderer2);
+        this.ngZone = injector.get(NgZone);
+        this.ref = injector.get(ChangeDetectorRef);
         // Default anchor is the parent host
         this.anchorElem = parentHost.nativeElement;
         this.popoverInstance = new Popover(this.el.nativeElement);
@@ -19143,20 +19299,26 @@ class AbstractPopover {
         return this.toggleService.open ? false : true;
     }
     attachESCListener() {
-        if (!this.popoverOptions.ignoreGlobalESCListener) {
+        if (this.popoverOptions.ignoreGlobalESCListener) {
+            return;
+        }
+        this.ngZone.runOutsideAngular(() => {
             this.documentESCListener = this.renderer.listen('document', 'keydown', event => {
                 if (event && event.key) {
                     if (event.key === 'Escape' || event.key === 'Esc') {
-                        this.toggleService.open = false;
+                        this.ngZone.run(() => {
+                            this.toggleService.open = false;
+                            this.ref.markForCheck();
+                        });
                     }
                 }
             });
-        }
+        });
     }
     detachESCListener() {
         if (this.documentESCListener) {
             this.documentESCListener();
-            delete this.documentESCListener;
+            this.documentESCListener = null;
         }
     }
     attachOutsideClickListener() {
@@ -19607,7 +19769,7 @@ class ClrAlert {
     }
 }
 ClrAlert.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrAlert, deps: [{ token: AlertIconAndTypesService }, { token: i0.ChangeDetectorRef }, { token: MultiAlertService, optional: true }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
-ClrAlert.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrAlert, selector: "clr-alert", inputs: { isSmall: ["clrAlertSizeSmall", "isSmall"], closable: ["clrAlertClosable", "closable"], isAppLevel: ["clrAlertAppLevel", "isAppLevel"], clrCloseButtonAriaLabel: "clrCloseButtonAriaLabel", closed: ["clrAlertClosed", "closed"], alertType: ["clrAlertType", "alertType"], alertIconShape: ["clrAlertIcon", "alertIconShape"] }, outputs: { _closedChanged: "clrAlertClosedChange" }, providers: [AlertIconAndTypesService], ngImport: i0, 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<div\n  *ngIf=\"!_closed\"\n  class=\"alert\"\n  [ngClass]=\"alertClass\"\n  [class.alert-hidden]=\"hidden\"\n  [class.alert-sm]=\"isSmall\"\n  [class.alert-app-level]=\"isAppLevel\"\n>\n  <div class=\"alert-items\">\n    <ng-content></ng-content>\n  </div>\n  <button type=\"button\" class=\"close\" *ngIf=\"closable\" (click)=\"close()\" [attr.aria-label]=\"clrCloseButtonAriaLabel\">\n    <cds-icon shape=\"window-close\"></cds-icon>\n  </button>\n</div>\n", styles: [":host{display:block}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
+ClrAlert.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrAlert, selector: "clr-alert", inputs: { isSmall: ["clrAlertSizeSmall", "isSmall"], closable: ["clrAlertClosable", "closable"], isAppLevel: ["clrAlertAppLevel", "isAppLevel"], clrCloseButtonAriaLabel: "clrCloseButtonAriaLabel", closed: ["clrAlertClosed", "closed"], alertType: ["clrAlertType", "alertType"], alertIconShape: ["clrAlertIcon", "alertIconShape"] }, outputs: { _closedChanged: "clrAlertClosedChange" }, providers: [AlertIconAndTypesService], ngImport: i0, 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<div\n  *ngIf=\"!_closed\"\n  class=\"alert\"\n  [ngClass]=\"alertClass\"\n  [class.alert-hidden]=\"hidden\"\n  [class.alert-sm]=\"isSmall\"\n  [class.alert-app-level]=\"isAppLevel\"\n>\n  <div class=\"alert-items\">\n    <ng-content></ng-content>\n  </div>\n  <button type=\"button\" class=\"close\" *ngIf=\"closable\" (click)=\"close()\" [attr.aria-label]=\"clrCloseButtonAriaLabel\">\n    <cds-icon shape=\"window-close\"></cds-icon>\n  </button>\n</div>\n", styles: [":host{display:block}\n"], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrAlert, decorators: [{
             type: Component,
             args: [{ selector: 'clr-alert', providers: [AlertIconAndTypesService], styles: [':host { display: block; }'], 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<div\n  *ngIf=\"!_closed\"\n  class=\"alert\"\n  [ngClass]=\"alertClass\"\n  [class.alert-hidden]=\"hidden\"\n  [class.alert-sm]=\"isSmall\"\n  [class.alert-app-level]=\"isAppLevel\"\n>\n  <div class=\"alert-items\">\n    <ng-content></ng-content>\n  </div>\n  <button type=\"button\" class=\"close\" *ngIf=\"closable\" (click)=\"close()\" [attr.aria-label]=\"clrCloseButtonAriaLabel\">\n    <cds-icon shape=\"window-close\"></cds-icon>\n  </button>\n</div>\n" }]
@@ -19812,7 +19974,7 @@ class ClrAlerts {
     }
 }
 ClrAlerts.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrAlerts, deps: [{ token: MultiAlertService }], target: i0.ɵɵFactoryTarget.Component });
-ClrAlerts.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrAlerts, selector: "clr-alerts", inputs: { _inputCurrentIndex: ["clrCurrentAlertIndex", "_inputCurrentIndex"], currentAlert: ["clrCurrentAlert", "currentAlert"] }, outputs: { currentAlertIndexChange: "clrCurrentAlertIndexChange", currentAlertChange: "clrCurrentAlertChange" }, host: { properties: { "class.alerts": "true", "class.alert-danger": "this.currentAlertType == 'danger'", "class.alert-info": "this.currentAlertType == 'info'", "class.alert-success": "this.currentAlertType == 'success'", "class.alert-warning": "this.currentAlertType == 'warning'" } }, providers: [MultiAlertService], queries: [{ propertyName: "allAlerts", predicate: ClrAlert }], ngImport: i0, 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<clr-alerts-pager *ngIf=\"multiAlertService.count > 1\" [clrCurrentAlertIndex]=\"currentAlertIndex\"> </clr-alerts-pager>\n<ng-content select=\"clr-alert\"></ng-content>\n", styles: [":host{display:block}\n"], components: [{ type: ClrAlertsPager, selector: "clr-alerts-pager", inputs: ["clrCurrentAlert", "clrCurrentAlertIndex"], outputs: ["clrCurrentAlertChange", "clrCurrentAlertIndexChange"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+ClrAlerts.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrAlerts, selector: "clr-alerts", inputs: { _inputCurrentIndex: ["clrCurrentAlertIndex", "_inputCurrentIndex"], currentAlert: ["clrCurrentAlert", "currentAlert"] }, outputs: { currentAlertIndexChange: "clrCurrentAlertIndexChange", currentAlertChange: "clrCurrentAlertChange" }, host: { properties: { "class.alerts": "true", "class.alert-danger": "this.currentAlertType == 'danger'", "class.alert-info": "this.currentAlertType == 'info'", "class.alert-success": "this.currentAlertType == 'success'", "class.alert-warning": "this.currentAlertType == 'warning'" } }, providers: [MultiAlertService], queries: [{ propertyName: "allAlerts", predicate: ClrAlert }], ngImport: i0, 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<clr-alerts-pager *ngIf=\"multiAlertService.count > 1\" [clrCurrentAlertIndex]=\"currentAlertIndex\"> </clr-alerts-pager>\n<ng-content select=\"clr-alert\"></ng-content>\n", styles: [":host{display:block}\n"], components: [{ type: ClrAlertsPager, selector: "clr-alerts-pager", inputs: ["clrCurrentAlert", "clrCurrentAlertIndex"], outputs: ["clrCurrentAlertChange", "clrCurrentAlertIndexChange"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrAlerts, decorators: [{
             type: Component,
             args: [{ selector: 'clr-alerts', providers: [MultiAlertService], host: {
@@ -20124,6 +20286,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;
+        }));
     }
     get responsiveNavCommonString() {
         const myCommonStrings = this.commonStrings.keys;
@@ -20168,10 +20335,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();
@@ -20185,7 +20363,7 @@ ClrHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13
       class="header-hamburger-trigger"
       [attr.aria-label]="responsiveNavCommonString"
       [attr.aria-expanded]="openNavLevel === 1 ? 'true' : 'false'"
-      (click)="toggleNav(responsiveNavCodes.NAV_LEVEL_1)"
+      (click)="openNav(responsiveNavCodes.NAV_LEVEL_1)"
     >
       <span></span>
     </button>
@@ -20196,12 +20374,12 @@ ClrHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13
       class="header-overflow-trigger"
       [attr.aria-label]="responsiveOverflowCommonString"
       [attr.aria-expanded]="openNavLevel === 2 ? 'true' : 'false'"
-      (click)="toggleNav(responsiveNavCodes.NAV_LEVEL_2)"
+      (click)="openNav(responsiveNavCodes.NAV_LEVEL_2)"
     >
       <span></span>
     </button>
     <div class="header-backdrop" (click)="closeOpenNav()"></div>
-  `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrHeader, decorators: [{
             type: Component,
             args: [{
@@ -20213,7 +20391,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
       class="header-hamburger-trigger"
       [attr.aria-label]="responsiveNavCommonString"
       [attr.aria-expanded]="openNavLevel === 1 ? 'true' : 'false'"
-      (click)="toggleNav(responsiveNavCodes.NAV_LEVEL_1)"
+      (click)="openNav(responsiveNavCodes.NAV_LEVEL_1)"
     >
       <span></span>
     </button>
@@ -20224,7 +20402,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
       class="header-overflow-trigger"
       [attr.aria-label]="responsiveOverflowCommonString"
       [attr.aria-expanded]="openNavLevel === 2 ? 'true' : 'false'"
-      (click)="toggleNav(responsiveNavCodes.NAV_LEVEL_2)"
+      (click)="openNav(responsiveNavCodes.NAV_LEVEL_2)"
     >
       <span></span>
     </button>
@@ -20239,12 +20417,186 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
  * 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) {
+function refocusIfOutsideFocusTrapElement(focusedElement, focusTrapElement, elementToRefocus) {
+    const focusTrapIsCurrent = FocusTrapTrackerService.getCurrent() === focusTrapElement;
+    const elementToFocusIsOutsideFocusTrap = elementIsOutsideFocusTrapElement(focusedElement, focusTrapElement);
+    if (focusTrapIsCurrent && elementToFocusIsOutsideFocusTrap) {
+        elementToRefocus = elementToRefocus || focusTrapElement;
+        elementToRefocus.focus();
+    }
+    else {
+        focusedElement.focus();
+    }
+}
+function elementIsOutsideFocusTrapElement(focusedElement, focusTrapElement) {
+    if (focusedElement === focusTrapElement.topReboundElement ||
+        focusedElement === focusTrapElement.bottomReboundElement) {
+        return true;
+    }
+    const elementIsInFocusTrapLightDom = focusTrapElement.contains(focusedElement);
+    if (elementIsInFocusTrapLightDom) {
+        return false;
+    }
+    if (focusTrapElement !== null && focusTrapElement.contains(focusedElement)) {
+        return false;
+    }
+    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);
+            }
+        }
+    }
+}
+function removeReboundElementsFromFocusTrapElement(focusTrapElement) {
+    if (focusTrapElement) {
+        const parent = focusTrapElement.parentElement;
+        if (parent) {
+            const topRebound = focusTrapElement.topReboundElement;
+            const bottomRebound = focusTrapElement.bottomReboundElement;
+            if (topRebound) {
+                parent.removeChild(topRebound);
+            }
+            if (bottomRebound) {
+                parent.removeChild(bottomRebound);
+            }
+        }
+        // These are here to to make sure that we completely delete all traces of the removed DOM objects.
+        delete focusTrapElement.topReboundElement;
+        delete focusTrapElement.bottomReboundElement;
+    }
+}
+// this helper exists to enable the focus trap class to handle vanilla html elements
+// it's primary concern is to keep TS happy.
+function castHtmlElementToFocusTrapElement(el) {
+    return el;
+}
+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);
+    }
+}
+FocusTrap.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: FocusTrap, deps: "invalid", target: i0.ɵɵFactoryTarget.Injectable });
+FocusTrap.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: FocusTrap });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: FocusTrap, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.Injector }, { type: undefined }, { type: undefined }]; } });
+
+/*
+ * 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;
+};
+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;
@@ -20252,6 +20604,20 @@ class ClrNavLevel {
         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) {
@@ -20268,10 +20634,29 @@ class ClrNavLevel {
     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
@@ -20294,18 +20679,44 @@ class ClrNavLevel {
             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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrNavLevel, deps: [{ token: ResponsiveNavigationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-ClrNavLevel.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrNavLevel, selector: "[clr-nav-level]", inputs: { _level: ["clr-nav-level", "_level"] }, host: { listeners: { "click": "onMouseClick($event.target)" } }, ngImport: i0 });
+ClrNavLevel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrNavLevel, deps: [{ token: PLATFORM_ID }, { token: ResponsiveNavigationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+ClrNavLevel.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrNavLevel, selector: "[clr-nav-level]", inputs: { _level: ["clr-nav-level", "_level"], closeButtonAriaLabel: ["closeAriaLabel", "closeButtonAriaLabel"] }, host: { listeners: { "window:resize": "onResize($event)", "click": "onMouseClick($event.target)" } }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrNavLevel, decorators: [{
             type: Directive,
             args: [{ selector: '[clr-nav-level]' }]
-        }], ctorParameters: function () { return [{ type: ResponsiveNavigationService }, { type: i0.ElementRef }]; }, propDecorators: { _level: [{
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: ResponsiveNavigationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }]; }, 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']]
@@ -20962,7 +21373,7 @@ ClrTabs.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0
       </ng-container>
     </ul>
     <ng-container #tabContentViewContainer></ng-container>
-  `, isInline: true, components: [{ type: ClrKeyFocus, selector: "[clrKeyFocus]", inputs: ["clrDirection", "clrFocusOnLoad", "clrKeyFocus"], outputs: ["clrFocusChange"] }, { type: ClrTabOverflowContent, selector: "clr-tab-overflow-content" }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
+  `, isInline: true, components: [{ type: ClrKeyFocus, selector: "[clrKeyFocus]", inputs: ["clrDirection", "clrFocusOnLoad", "clrKeyFocus"], outputs: ["clrFocusChange"] }, { type: ClrTabOverflowContent, selector: "clr-tab-overflow-content" }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrTabs, decorators: [{
             type: Component,
             args: [{
@@ -21242,7 +21653,7 @@ class ClrVerticalNav {
     }
 }
 ClrVerticalNav.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrVerticalNav, deps: [{ token: VerticalNavService }, { token: VerticalNavIconService }, { token: VerticalNavGroupRegistrationService }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
-ClrVerticalNav.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrVerticalNav, selector: "clr-vertical-nav", inputs: { collapsible: ["clrVerticalNavCollapsible", "collapsible"], collapsed: ["clrVerticalNavCollapsed", "collapsed"] }, outputs: { _collapsedChanged: "clrVerticalNavCollapsedChange" }, host: { properties: { "class.is-collapsed": "collapsed", "class.has-nav-groups": "hasNavGroups", "class.has-icons": "hasIcons" }, classAttribute: "clr-vertical-nav" }, providers: [VerticalNavService, VerticalNavIconService, VerticalNavGroupRegistrationService], ngImport: i0, 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<button\n  type=\"button\"\n  class=\"nav-trigger\"\n  [class.on-collapse]=\"collapsed\"\n  [attr.aria-expanded]=\"ariaExpanded\"\n  [attr.aria-label]=\"commonStrings.keys.verticalNavToggle\"\n  (click)=\"toggleByButton()\"\n  *ngIf=\"collapsible\"\n>\n  <cds-icon\n    shape=\"angle-double\"\n    class=\"nav-trigger-icon\"\n    [attr.direction]=\"(this.collapsed) ? 'right' : 'left'\"\n    [attr.title]=\"(this.collapsed) ? commonStrings.keys.expand : commonStrings.keys.collapse\"\n  ></cds-icon>\n</button>\n<!-- Click handler on .nav-content is bad but required :-( -->\n<div class=\"nav-content\">\n  <ng-content></ng-content>\n  <button\n    (click)=\"collapsed = false\"\n    class=\"nav-btn\"\n    aria-hidden=\"true\"\n    tabindex=\"-1\"\n    [attr.aria-label]=\"commonStrings.keys.verticalNavToggle\"\n    *ngIf=\"collapsible && collapsed\"\n  ></button>\n</div>\n", directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
+ClrVerticalNav.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrVerticalNav, selector: "clr-vertical-nav", inputs: { collapsible: ["clrVerticalNavCollapsible", "collapsible"], collapsed: ["clrVerticalNavCollapsed", "collapsed"] }, outputs: { _collapsedChanged: "clrVerticalNavCollapsedChange" }, host: { properties: { "class.is-collapsed": "collapsed", "class.has-nav-groups": "hasNavGroups", "class.has-icons": "hasIcons" }, classAttribute: "clr-vertical-nav" }, providers: [VerticalNavService, VerticalNavIconService, VerticalNavGroupRegistrationService], ngImport: i0, 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<button\n  type=\"button\"\n  class=\"nav-trigger\"\n  [class.on-collapse]=\"collapsed\"\n  [attr.aria-expanded]=\"ariaExpanded\"\n  [attr.aria-label]=\"commonStrings.keys.verticalNavToggle\"\n  (click)=\"toggleByButton()\"\n  *ngIf=\"collapsible\"\n>\n  <cds-icon\n    shape=\"angle-double\"\n    class=\"nav-trigger-icon\"\n    [attr.direction]=\"(this.collapsed) ? 'right' : 'left'\"\n    [attr.title]=\"(this.collapsed) ? commonStrings.keys.expand : commonStrings.keys.collapse\"\n  ></cds-icon>\n</button>\n<!-- Click handler on .nav-content is bad but required :-( -->\n<div class=\"nav-content\">\n  <ng-content></ng-content>\n  <button\n    (click)=\"collapsed = false\"\n    class=\"nav-btn\"\n    aria-hidden=\"true\"\n    tabindex=\"-1\"\n    [attr.aria-label]=\"commonStrings.keys.verticalNavToggle\"\n    *ngIf=\"collapsible && collapsed\"\n  ></button>\n</div>\n", directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrVerticalNav, decorators: [{
             type: Component,
             args: [{ selector: 'clr-vertical-nav', providers: [VerticalNavService, VerticalNavIconService, VerticalNavGroupRegistrationService], host: {
@@ -21409,7 +21820,7 @@ class ClrVerticalNavGroup {
     }
 }
 ClrVerticalNavGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrVerticalNavGroup, deps: [{ token: IfExpandService }, { token: VerticalNavGroupRegistrationService }, { token: VerticalNavGroupService }, { token: VerticalNavService }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
-ClrVerticalNavGroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrVerticalNavGroup, selector: "clr-vertical-nav-group", inputs: { groupLabel: ["clrVerticalNavGroupLabel", "groupLabel"], userExpandedInput: ["clrVerticalNavGroupExpanded", "userExpandedInput"] }, outputs: { expandedChange: "clrVerticalNavGroupExpandedChange" }, host: { properties: { "class.is-expanded": "this.expanded" }, classAttribute: "nav-group" }, providers: [IfExpandService, VerticalNavGroupService], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2022 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<div class=\"nav-group-content\">\n  <ng-content select=\"[clrVerticalNavLink]\"></ng-content>\n  <button\n    class=\"nav-group-trigger\"\n    type=\"button\"\n    [attr.aria-expanded]=\"expanded\"\n    [attr.aria-label]=\"groupLabel\"\n    (click)=\"toggleExpand()\"\n  >\n    <ng-content select=\"[clrVerticalNavIcon]\"></ng-content>\n    <div class=\"nav-group-text\">\n      <ng-content></ng-content>\n    </div>\n    <cds-icon\n      shape=\"angle\"\n      class=\"nav-group-trigger-icon\"\n      [attr.direction]=\"(this.expanded) ? 'down' : 'right'\"\n      [attr.title]=\"(this.expanded) ? commonStrings.keys.collapse : commonStrings.keys.expand\"\n    >\n    </cds-icon>\n  </button>\n</div>\n<!--TODO: This animation needs to be added to the clr-vertical-nav-group-children component-->\n<div class=\"nav-group-children\" [@clrExpand]=\"expandAnimationState\" (@clrExpand.done)=\"expandAnimationDone($event)\">\n  <ng-content select=\"[clrIfExpanded], clr-vertical-nav-group-children\"></ng-content>\n</div>\n", directives: [{ type: CdsIconCustomTag, selector: "cds-icon" }], animations: [
+ClrVerticalNavGroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrVerticalNavGroup, selector: "clr-vertical-nav-group", inputs: { groupLabel: ["clrVerticalNavGroupLabel", "groupLabel"], userExpandedInput: ["clrVerticalNavGroupExpanded", "userExpandedInput"] }, outputs: { expandedChange: "clrVerticalNavGroupExpandedChange" }, host: { properties: { "class.is-expanded": "this.expanded" }, classAttribute: "nav-group" }, providers: [IfExpandService, VerticalNavGroupService], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2022 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<div class=\"nav-group-content\">\n  <ng-content select=\"[clrVerticalNavLink]\"></ng-content>\n  <button\n    class=\"nav-group-trigger\"\n    type=\"button\"\n    [attr.aria-expanded]=\"expanded\"\n    [attr.aria-label]=\"groupLabel\"\n    (click)=\"toggleExpand()\"\n  >\n    <ng-content select=\"[clrVerticalNavIcon]\"></ng-content>\n    <div class=\"nav-group-text\">\n      <ng-content></ng-content>\n    </div>\n    <cds-icon\n      shape=\"angle\"\n      class=\"nav-group-trigger-icon\"\n      [attr.direction]=\"expanded ? 'down' : 'right'\"\n      [attr.title]=\"expanded ? commonStrings.keys.collapse : commonStrings.keys.expand\"\n    >\n    </cds-icon>\n  </button>\n</div>\n<!--TODO: This animation needs to be added to the clr-vertical-nav-group-children component-->\n<div class=\"nav-group-children\" [@clrExpand]=\"expandAnimationState\" (@clrExpand.done)=\"expandAnimationDone($event)\">\n  <ng-content select=\"[clrIfExpanded], clr-vertical-nav-group-children\"></ng-content>\n</div>\n", directives: [{ type: CdsIconCustomTag, selector: "cds-icon" }], animations: [
         trigger('clrExpand', [
             state(EXPANDED_STATE, style({ height: '*' })),
             state(COLLAPSED_STATE, style({ height: 0, 'overflow-y': 'hidden', visibility: 'hidden' })),
@@ -21424,7 +21835,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                             state(COLLAPSED_STATE, style({ height: 0, 'overflow-y': 'hidden', visibility: 'hidden' })),
                             transition(`${EXPANDED_STATE} <=> ${COLLAPSED_STATE}`, animate('0.2s ease-in-out')),
                         ]),
-                    ], host: { class: 'nav-group' }, template: "<!--\n  ~ Copyright (c) 2016-2022 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<div class=\"nav-group-content\">\n  <ng-content select=\"[clrVerticalNavLink]\"></ng-content>\n  <button\n    class=\"nav-group-trigger\"\n    type=\"button\"\n    [attr.aria-expanded]=\"expanded\"\n    [attr.aria-label]=\"groupLabel\"\n    (click)=\"toggleExpand()\"\n  >\n    <ng-content select=\"[clrVerticalNavIcon]\"></ng-content>\n    <div class=\"nav-group-text\">\n      <ng-content></ng-content>\n    </div>\n    <cds-icon\n      shape=\"angle\"\n      class=\"nav-group-trigger-icon\"\n      [attr.direction]=\"(this.expanded) ? 'down' : 'right'\"\n      [attr.title]=\"(this.expanded) ? commonStrings.keys.collapse : commonStrings.keys.expand\"\n    >\n    </cds-icon>\n  </button>\n</div>\n<!--TODO: This animation needs to be added to the clr-vertical-nav-group-children component-->\n<div class=\"nav-group-children\" [@clrExpand]=\"expandAnimationState\" (@clrExpand.done)=\"expandAnimationDone($event)\">\n  <ng-content select=\"[clrIfExpanded], clr-vertical-nav-group-children\"></ng-content>\n</div>\n" }]
+                    ], host: { class: 'nav-group' }, template: "<!--\n  ~ Copyright (c) 2016-2022 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<div class=\"nav-group-content\">\n  <ng-content select=\"[clrVerticalNavLink]\"></ng-content>\n  <button\n    class=\"nav-group-trigger\"\n    type=\"button\"\n    [attr.aria-expanded]=\"expanded\"\n    [attr.aria-label]=\"groupLabel\"\n    (click)=\"toggleExpand()\"\n  >\n    <ng-content select=\"[clrVerticalNavIcon]\"></ng-content>\n    <div class=\"nav-group-text\">\n      <ng-content></ng-content>\n    </div>\n    <cds-icon\n      shape=\"angle\"\n      class=\"nav-group-trigger-icon\"\n      [attr.direction]=\"expanded ? 'down' : 'right'\"\n      [attr.title]=\"expanded ? commonStrings.keys.collapse : commonStrings.keys.expand\"\n    >\n    </cds-icon>\n  </button>\n</div>\n<!--TODO: This animation needs to be added to the clr-vertical-nav-group-children component-->\n<div class=\"nav-group-children\" [@clrExpand]=\"expandAnimationState\" (@clrExpand.done)=\"expandAnimationDone($event)\">\n  <ng-content select=\"[clrIfExpanded], clr-vertical-nav-group-children\"></ng-content>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: IfExpandService }, { type: VerticalNavGroupRegistrationService }, { type: VerticalNavGroupService }, { type: VerticalNavService }, { type: ClrCommonStringsService }]; }, propDecorators: { expanded: [{
                 type: HostBinding,
                 args: ['class.is-expanded']
@@ -21483,17 +21894,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrVerticalNavLink {
-    constructor(_navGroupService) {
-        this._navGroupService = _navGroupService;
+    constructor(host, ref, navGroupService) {
+        this.destroy$ = new Subject();
+        // Note: since the `VerticalNavGroupService` is an optional provider, we'll setup the event
+        // listener only when the `[clrVerticalLink]` is located within the `clr-vertical-nav-group`.
+        navGroupService &&
+            fromEvent(host.nativeElement, 'click')
+                .pipe(takeUntil(this.destroy$))
+                .subscribe(() => {
+                navGroupService.expand();
+                ref.markForCheck();
+            });
     }
-    expandParentNavGroup() {
-        if (this._navGroupService) {
-            this._navGroupService.expand();
-        }
+    ngOnDestroy() {
+        this.destroy$.next();
     }
 }
-ClrVerticalNavLink.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrVerticalNavLink, deps: [{ token: VerticalNavGroupService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ClrVerticalNavLink.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrVerticalNavLink, selector: "[clrVerticalNavLink]", host: { listeners: { "click": "expandParentNavGroup()" }, classAttribute: "nav-link" }, ngImport: i0, template: `
+ClrVerticalNavLink.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrVerticalNavLink, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: VerticalNavGroupService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+ClrVerticalNavLink.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrVerticalNavLink, selector: "[clrVerticalNavLink]", host: { classAttribute: "nav-link" }, ngImport: i0, template: `
     <ng-content select="[clrVerticalNavIcon]"></ng-content>
     <span class="nav-text">
       <ng-content></ng-content>
@@ -21511,12 +21929,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
   `,
                     host: { class: 'nav-link' },
                 }]
-        }], ctorParameters: function () { return [{ type: VerticalNavGroupService, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: VerticalNavGroupService, decorators: [{
                     type: Optional
-                }] }]; }, propDecorators: { expandParentNavGroup: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
+                }, {
+                    type: Inject,
+                    args: [VerticalNavGroupService]
+                }] }]; } });
 
 /*
  * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
@@ -21659,7 +22077,7 @@ class ClrModal {
     }
 }
 ClrModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrModal, deps: [{ token: ScrollingService }, { token: ClrCommonStringsService }, { token: UNIQUE_ID }], target: i0.ɵɵFactoryTarget.Component });
-ClrModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrModal, selector: "clr-modal", inputs: { _open: ["clrModalOpen", "_open"], closable: ["clrModalClosable", "closable"], size: ["clrModalSize", "size"], staticBackdrop: ["clrModalStaticBackdrop", "staticBackdrop"], skipAnimation: ["clrModalSkipAnimation", "skipAnimation"], bypassScrollService: ["clrModalOverrideScrollService", "bypassScrollService"], stopClose: ["clrModalPreventClose", "stopClose"], labelledBy: ["clrModalLabelledById", "labelledBy"] }, outputs: { _openChanged: "clrModalOpenChange", altClose: "clrModalAlternateClose" }, host: { listeners: { "body:keyup.escape": "close()" }, properties: { "class.open": "this._open" } }, providers: [UNIQUE_ID_PROVIDER], viewQueries: [{ propertyName: "focusTrap", first: true, predicate: FocusTrapDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2022 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<div clrFocusTrap class=\"modal\" *ngIf=\"_open\">\n  <!--fixme: revisit when ngClass works with exit animation-->\n  <div\n    [@fadeDown]=\"skipAnimation\"\n    (@fadeDown.done)=\"fadeDone($event)\"\n    class=\"modal-dialog\"\n    [class.modal-sm]=\"size == 'sm'\"\n    [class.modal-lg]=\"size == 'lg'\"\n    [class.modal-xl]=\"size == 'xl'\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-hidden]=\"!_open\"\n    [attr.aria-labelledby]=\"labelledBy\"\n  >\n    <div class=\"clr-sr-only\">{{commonStrings.keys.modalContentStart}}</div>\n    <div class=\"modal-content-wrapper\">\n      <!-- only used in wizards -->\n      <ng-content select=\".modal-nav\"></ng-content>\n\n      <div class=\"modal-content\">\n        <div class=\"modal-header--accessible\">\n          <div class=\"modal-title-wrapper\" id=\"{{modalId}}\" clrFocusOnViewInit>\n            <ng-content select=\".modal-title\"></ng-content>\n          </div>\n          <button\n            type=\"button\"\n            [attr.aria-label]=\"commonStrings.keys.close\"\n            class=\"close\"\n            *ngIf=\"closable\"\n            (click)=\"close()\"\n          >\n            <cds-icon shape=\"window-close\"></cds-icon>\n          </button>\n        </div>\n        <div class=\"modal-body-wrapper\">\n          <ng-content select=\".modal-body\"></ng-content>\n        </div>\n        <ng-content select=\".modal-footer\"></ng-content>\n      </div>\n    </div>\n    <div class=\"clr-sr-only\">{{commonStrings.keys.modalContentEnd}}</div>\n  </div>\n\n  <div [@fade] class=\"modal-backdrop\" aria-hidden=\"true\" (click)=\"staticBackdrop || close()\"></div>\n</div>\n", styles: [":host{display:none}:host.open{display:inline}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FocusTrapDirective, selector: "[clrFocusTrap]", inputs: ["clrFocusTrap"] }, { type: ClrFocusOnViewInit, selector: "[clrFocusOnViewInit]", inputs: ["clrFocusOnViewInit"] }, { type: CdsIconCustomTag, selector: "cds-icon" }], viewProviders: [ScrollingService], animations: [
+ClrModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrModal, selector: "clr-modal", inputs: { _open: ["clrModalOpen", "_open"], closable: ["clrModalClosable", "closable"], size: ["clrModalSize", "size"], staticBackdrop: ["clrModalStaticBackdrop", "staticBackdrop"], skipAnimation: ["clrModalSkipAnimation", "skipAnimation"], bypassScrollService: ["clrModalOverrideScrollService", "bypassScrollService"], stopClose: ["clrModalPreventClose", "stopClose"], labelledBy: ["clrModalLabelledById", "labelledBy"] }, outputs: { _openChanged: "clrModalOpenChange", altClose: "clrModalAlternateClose" }, host: { listeners: { "body:keyup.escape": "close()" }, properties: { "class.open": "this._open" } }, providers: [UNIQUE_ID_PROVIDER], viewQueries: [{ propertyName: "focusTrap", first: true, predicate: FocusTrapDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2022 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<div clrFocusTrap class=\"modal\" *ngIf=\"_open\">\n  <!--fixme: revisit when ngClass works with exit animation-->\n  <div\n    [@fadeDown]=\"skipAnimation\"\n    (@fadeDown.done)=\"fadeDone($event)\"\n    class=\"modal-dialog\"\n    [class.modal-sm]=\"size == 'sm'\"\n    [class.modal-lg]=\"size == 'lg'\"\n    [class.modal-xl]=\"size == 'xl'\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-hidden]=\"!_open\"\n    [attr.aria-labelledby]=\"labelledBy\"\n  >\n    <div class=\"clr-sr-only\">{{commonStrings.keys.modalContentStart}}</div>\n    <div class=\"modal-content-wrapper\">\n      <!-- only used in wizards -->\n      <ng-content select=\".modal-nav\"></ng-content>\n\n      <div class=\"modal-content\">\n        <div class=\"modal-header--accessible\">\n          <div class=\"modal-title-wrapper\" id=\"{{modalId}}\" clrFocusOnViewInit>\n            <ng-content select=\".modal-title\"></ng-content>\n          </div>\n          <button\n            type=\"button\"\n            [attr.aria-label]=\"commonStrings.keys.close\"\n            class=\"close\"\n            *ngIf=\"closable\"\n            (click)=\"close()\"\n          >\n            <cds-icon shape=\"window-close\"></cds-icon>\n          </button>\n        </div>\n        <div class=\"modal-body-wrapper\">\n          <ng-content select=\".modal-body\"></ng-content>\n        </div>\n        <ng-content select=\".modal-footer\"></ng-content>\n      </div>\n    </div>\n    <div class=\"clr-sr-only\">{{commonStrings.keys.modalContentEnd}}</div>\n  </div>\n\n  <div [@fade] class=\"modal-backdrop\" aria-hidden=\"true\" (click)=\"staticBackdrop || close()\"></div>\n</div>\n", styles: [":host{display:none}:host.open{display:inline}\n"], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FocusTrapDirective, selector: "[clrFocusTrap]", inputs: ["clrFocusTrap"] }, { type: ClrFocusOnViewInit, selector: "[clrFocusOnViewInit]", inputs: ["clrFocusOnViewInit"] }, { type: CdsIconCustomTag, selector: "cds-icon" }], viewProviders: [ScrollingService], animations: [
         trigger('fadeDown', [
             transition('* => false', [style({ opacity: 0, transform: 'translate(0, -25%)' }), animate('0.2s ease-in-out')]),
             transition('false => *', [animate('0.2s ease-in-out', style({ opacity: 0, transform: 'translate(0, -25%)' }))]),
@@ -21752,7 +22170,8 @@ class ClrModalBody {
         this.tabindex = '0';
         this.unlisteners = [];
         ngZone.runOutsideAngular(() => {
-            new ResizeObserver(() => this.addOrRemoveTabIndex()).observe(this.host.nativeElement);
+            this.observer = new ResizeObserver(() => this.addOrRemoveTabIndex());
+            this.observer.observe(this.host.nativeElement);
             this.unlisteners.push(this.renderer.listen(this.host.nativeElement, 'mouseup', () => {
                 // set the tabindex binding back when click is completed with mouseup
                 this.addOrRemoveTabIndex();
@@ -21767,6 +22186,8 @@ class ClrModalBody {
         while (this.unlisteners.length) {
             this.unlisteners.pop()();
         }
+        this.observer.disconnect();
+        this.observer = null;
     }
     addTabIndex() {
         this.renderer.setAttribute(this.host.nativeElement, 'tabindex', this.tabindex);
@@ -21931,6 +22352,7 @@ class ClrSignpostContent extends AbstractPopover {
         this.popoverOptions.offsetX = setPosition.offsetX;
     }
     ngOnDestroy() {
+        super.ngOnDestroy();
         if (isPlatformBrowser(this.platformId) && this.el.nativeElement.contains(this.document.activeElement)) {
             this.signpostFocusManager.focusTrigger();
         }
@@ -24201,7 +24623,7 @@ ClrWizardStepnavItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
       <span *ngIf="hasError" class="clr-sr-only">{{ commonStrings.keys.wizardStepError }}</span>
       <span *ngIf="!hasError && isComplete" class="clr-sr-only">{{ commonStrings.keys.wizardStepSuccess }}</span>
     </button>
-  `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CdsIconCustomTag, selector: "cds-icon" }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+  `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CdsIconCustomTag, selector: "cds-icon" }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrWizardStepnavItem, decorators: [{
             type: Component,
             args: [{
@@ -24269,7 +24691,7 @@ ClrWizardStepnav.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
         {{ i + 1 }}
       </div>
     </div>
-  `, isInline: true, components: [{ type: ClrWizardStepnavItem, selector: "[clr-wizard-stepnav-item]", inputs: ["page"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+  `, isInline: true, components: [{ type: ClrWizardStepnavItem, selector: "[clr-wizard-stepnav-item]", inputs: ["page"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrWizardStepnav, decorators: [{
             type: Component,
             args: [{
@@ -24688,7 +25110,7 @@ ClrWizard.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13
         ButtonHubService,
         HeaderActionService,
         UNIQUE_ID_PROVIDER,
-    ], queries: [{ propertyName: "pages", predicate: ClrWizardPage, descendants: true }, { propertyName: "headerActions", predicate: ClrWizardHeaderAction }], viewQueries: [{ propertyName: "wizardTitle", first: true, predicate: ["wizardTitle"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2022 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<clr-modal\n  [clrModalOpen]=\"_open\"\n  [clrModalSize]=\"size\"\n  [clrModalClosable]=\"closable\"\n  [clrModalStaticBackdrop]=\"true\"\n  [clrModalSkipAnimation]=\"stopModalAnimations\"\n  [clrModalOverrideScrollService]=\"isStatic\"\n  [clrModalPreventClose]=\"true\"\n  (clrModalAlternateClose)=\"modalCancel()\"\n  [clrModalLabelledById]=\"wizardId\"\n>\n  <nav class=\"modal-nav clr-wizard-stepnav-wrapper\">\n    <h1 class=\"clr-wizard-title\" id=\"{{wizardId}}\"><ng-content select=\"clr-wizard-title\"></ng-content></h1>\n    <clr-wizard-stepnav></clr-wizard-stepnav>\n  </nav>\n\n  <h2 class=\"modal-title\">\n    <span tabindex=\"-1\" #wizardTitle class=\"modal-title-text\">\n      <ng-template [ngTemplateOutlet]=\"navService.currentPageTitle\"></ng-template>\n    </span>\n\n    <div class=\"modal-header-actions-wrapper\" *ngIf=\"headerActionService.displayHeaderActionsWrapper\">\n      <div *ngIf=\"headerActionService.showWizardHeaderActions\">\n        <ng-content select=\"clr-wizard-header-action\"></ng-content>\n      </div>\n      <div *ngIf=\"headerActionService.currentPageHasHeaderActions\">\n        <ng-template [ngTemplateOutlet]=\"navService.currentPage.headerActions\"></ng-template>\n      </div>\n    </div>\n  </h2>\n\n  <div class=\"modal-body\">\n    <main clr-wizard-pages-wrapper class=\"clr-wizard-content\">\n      <ng-content></ng-content>\n    </main>\n  </div>\n  <div class=\"modal-footer clr-wizard-footer\">\n    <div class=\"clr-wizard-footer-buttons\">\n      <div\n        *ngIf=\"navService.currentPage && !navService.currentPage.hasButtons\"\n        class=\"clr-wizard-footer-buttons-wrapper\"\n      >\n        <ng-content select=\"clr-wizard-button\"></ng-content>\n      </div>\n      <div\n        *ngIf=\"navService.currentPage && navService.currentPage.hasButtons\"\n        class=\"clr-wizard-footer-buttons-wrapper\"\n      >\n        <ng-template [ngTemplateOutlet]=\"navService.currentPage.buttons\"></ng-template>\n      </div>\n    </div>\n  </div>\n</clr-modal>\n", components: [{ type: ClrModal, selector: "clr-modal", inputs: ["clrModalOpen", "clrModalClosable", "clrModalSize", "clrModalStaticBackdrop", "clrModalSkipAnimation", "clrModalOverrideScrollService", "clrModalPreventClose", "clrModalLabelledById"], outputs: ["clrModalOpenChange", "clrModalAlternateClose"] }, { type: ClrWizardStepnav, selector: "clr-wizard-stepnav" }], directives: [{ type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrModalBody, selector: ".modal-body" }] });
+    ], queries: [{ propertyName: "pages", predicate: ClrWizardPage, descendants: true }, { propertyName: "headerActions", predicate: ClrWizardHeaderAction }], viewQueries: [{ propertyName: "wizardTitle", first: true, predicate: ["wizardTitle"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2022 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<clr-modal\n  [clrModalOpen]=\"_open\"\n  [clrModalSize]=\"size\"\n  [clrModalClosable]=\"closable\"\n  [clrModalStaticBackdrop]=\"true\"\n  [clrModalSkipAnimation]=\"stopModalAnimations\"\n  [clrModalOverrideScrollService]=\"isStatic\"\n  [clrModalPreventClose]=\"true\"\n  (clrModalAlternateClose)=\"modalCancel()\"\n  [clrModalLabelledById]=\"wizardId\"\n>\n  <nav class=\"modal-nav clr-wizard-stepnav-wrapper\">\n    <h1 class=\"clr-wizard-title\" id=\"{{wizardId}}\"><ng-content select=\"clr-wizard-title\"></ng-content></h1>\n    <clr-wizard-stepnav></clr-wizard-stepnav>\n  </nav>\n\n  <h2 class=\"modal-title\">\n    <span tabindex=\"-1\" #wizardTitle class=\"modal-title-text\">\n      <ng-template [ngTemplateOutlet]=\"navService.currentPageTitle\"></ng-template>\n    </span>\n\n    <div class=\"modal-header-actions-wrapper\" *ngIf=\"headerActionService.displayHeaderActionsWrapper\">\n      <div *ngIf=\"headerActionService.showWizardHeaderActions\">\n        <ng-content select=\"clr-wizard-header-action\"></ng-content>\n      </div>\n      <div *ngIf=\"headerActionService.currentPageHasHeaderActions\">\n        <ng-template [ngTemplateOutlet]=\"navService.currentPage.headerActions\"></ng-template>\n      </div>\n    </div>\n  </h2>\n\n  <div class=\"modal-body\">\n    <main clr-wizard-pages-wrapper class=\"clr-wizard-content\">\n      <ng-content></ng-content>\n    </main>\n  </div>\n  <div class=\"modal-footer clr-wizard-footer\">\n    <div class=\"clr-wizard-footer-buttons\">\n      <div\n        *ngIf=\"navService.currentPage && !navService.currentPage.hasButtons\"\n        class=\"clr-wizard-footer-buttons-wrapper\"\n      >\n        <ng-content select=\"clr-wizard-button\"></ng-content>\n      </div>\n      <div\n        *ngIf=\"navService.currentPage && navService.currentPage.hasButtons\"\n        class=\"clr-wizard-footer-buttons-wrapper\"\n      >\n        <ng-template [ngTemplateOutlet]=\"navService.currentPage.buttons\"></ng-template>\n      </div>\n    </div>\n  </div>\n</clr-modal>\n", components: [{ type: ClrModal, selector: "clr-modal", inputs: ["clrModalOpen", "clrModalClosable", "clrModalSize", "clrModalStaticBackdrop", "clrModalSkipAnimation", "clrModalOverrideScrollService", "clrModalPreventClose", "clrModalLabelledById"], outputs: ["clrModalOpenChange", "clrModalAlternateClose"] }, { type: ClrWizardStepnav, selector: "clr-wizard-stepnav" }], directives: [{ type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClrModalBody, selector: ".modal-body" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrWizard, decorators: [{
             type: Component,
             args: [{ selector: 'clr-wizard', providers: [
@@ -25265,7 +25687,7 @@ class ClrAccordionPanel {
     }
 }
 ClrAccordionPanel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrAccordionPanel, deps: [{ token: ClrCommonStringsService }, { token: AccordionService }, { token: IfExpandService }, { token: UNIQUE_ID }], target: i0.ɵɵFactoryTarget.Component });
-ClrAccordionPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrAccordionPanel, selector: "clr-accordion-panel", inputs: { disabled: ["clrAccordionPanelDisabled", "disabled"], panelOpen: ["clrAccordionPanelOpen", "panelOpen"] }, outputs: { panelOpenChange: "clrAccordionPanelOpenChange" }, host: { properties: { "class.clr-accordion-panel": "true" } }, providers: [IfExpandService, UNIQUE_ID_PROVIDER], queries: [{ propertyName: "accordionDescription", predicate: ClrAccordionDescription }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div *ngIf=\"panel.status !== AccordionStatus.Inactive\" aria-live=\"assertive\" class=\"clr-sr-only\">\n    <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n  </div>\n\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-sr-only\">\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">{{commonStrings.keys.success}}</ng-container>\n        </span>\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\"></span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CdsIconCustomTag, selector: "cds-icon" }], pipes: { "async": i4.AsyncPipe }, animations: panelAnimation, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ClrAccordionPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrAccordionPanel, selector: "clr-accordion-panel", inputs: { disabled: ["clrAccordionPanelDisabled", "disabled"], panelOpen: ["clrAccordionPanelOpen", "panelOpen"] }, outputs: { panelOpenChange: "clrAccordionPanelOpenChange" }, host: { properties: { "class.clr-accordion-panel": "true" } }, providers: [IfExpandService, UNIQUE_ID_PROVIDER], queries: [{ propertyName: "accordionDescription", predicate: ClrAccordionDescription }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div *ngIf=\"panel.status !== AccordionStatus.Inactive\" aria-live=\"assertive\" class=\"clr-sr-only\">\n    <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n  </div>\n\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-sr-only\">\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">{{commonStrings.keys.success}}</ng-container>\n        </span>\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\"></span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CdsIconCustomTag, selector: "cds-icon" }], pipes: { "async": i5.AsyncPipe }, animations: panelAnimation, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrAccordionPanel, decorators: [{
             type: Component,
             args: [{ selector: 'clr-accordion-panel', host: { '[class.clr-accordion-panel]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, animations: panelAnimation, providers: [IfExpandService, UNIQUE_ID_PROVIDER], template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div *ngIf=\"panel.status !== AccordionStatus.Inactive\" aria-live=\"assertive\" class=\"clr-sr-only\">\n    <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n  </div>\n\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-sr-only\">\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">{{commonStrings.keys.success}}</ng-container>\n        </span>\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\"></span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n" }]
@@ -25697,7 +26119,7 @@ class ClrStepperPanel extends ClrAccordionPanel {
     }
 }
 ClrStepperPanel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrStepperPanel, deps: [{ token: PLATFORM_ID }, { token: ClrCommonStringsService }, { token: i1.FormGroupName, optional: true }, { token: i1.NgModelGroup, optional: true }, { token: StepperService }, { token: IfExpandService }, { token: UNIQUE_ID }], target: i0.ɵɵFactoryTarget.Component });
-ClrStepperPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrStepperPanel, selector: "clr-stepper-panel", host: { properties: { "class.clr-accordion-panel": "true" } }, providers: [IfExpandService, UNIQUE_ID_PROVIDER], viewQueries: [{ propertyName: "headerButton", first: true, predicate: ["headerButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div *ngIf=\"panel.status !== AccordionStatus.Inactive\" aria-live=\"assertive\" class=\"clr-sr-only\">\n    <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n  </div>\n\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-sr-only\">\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">{{commonStrings.keys.success}}</ng-container>\n        </span>\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\"></span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CdsIconCustomTag, selector: "cds-icon" }], pipes: { "async": i4.AsyncPipe }, animations: stepAnimation, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ClrStepperPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrStepperPanel, selector: "clr-stepper-panel", host: { properties: { "class.clr-accordion-panel": "true" } }, providers: [IfExpandService, UNIQUE_ID_PROVIDER], viewQueries: [{ propertyName: "headerButton", first: true, predicate: ["headerButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div *ngIf=\"panel.status !== AccordionStatus.Inactive\" aria-live=\"assertive\" class=\"clr-sr-only\">\n    <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n  </div>\n\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-sr-only\">\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">{{commonStrings.keys.success}}</ng-container>\n        </span>\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\"></span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CdsIconCustomTag, selector: "cds-icon" }], pipes: { "async": i5.AsyncPipe }, animations: stepAnimation, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrStepperPanel, decorators: [{
             type: Component,
             args: [{ selector: 'clr-stepper-panel', host: { '[class.clr-accordion-panel]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, animations: stepAnimation, providers: [IfExpandService, UNIQUE_ID_PROVIDER], template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div *ngIf=\"panel.status !== AccordionStatus.Inactive\" aria-live=\"assertive\" class=\"clr-sr-only\">\n    <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n  </div>\n\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-sr-only\">\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{commonStrings.keys.danger}}</ng-container>\n          <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">{{commonStrings.keys.success}}</ng-container>\n        </span>\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\"></span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n" }]
@@ -26010,7 +26432,7 @@ ClrProgressBar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version:
 ClrProgressBar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrProgressBar, selector: "clr-progress-bar", inputs: { id: "id", max: ["clrMax", "max"], displayval: ["clrDisplayval", "displayval"], value: ["clrValue", "value"], clrLabeled: "clrLabeled", clrFade: "clrFade", clrLoop: "clrLoop", clrSuccess: "clrSuccess", clrDanger: "clrDanger", clrFlash: "clrFlash", clrFlashDanger: "clrFlashDanger" }, host: { properties: { "attr.id": "this.externalId", "class.progress": "this.progressClass", "class.labeled": "this.labeledClass", "class.progress-fade": "this.fadeClass", "class.loop": "this.loopClass", "class.success": "this.successClass", "class.danger": "this.dangerClass", "class.flash": "this.flashClass", "class.flash-danger": "this.flashDangerClass" } }, ngImport: i0, template: `
     <progress [id]="id" [attr.max]="max" [attr.value]="value" [attr.data-displayval]="displayValue"></progress>
     <span *ngIf="displayStringValue()">{{ displayValue }}</span>
-  `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrProgressBar, decorators: [{
             type: Component,
             args: [{
@@ -26282,7 +26704,7 @@ ClrTimelineStep.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
     <ng-template #processing>
       <clr-spinner clrMedium [attr.aria-label]="iconAriaLabel"></clr-spinner>
     </ng-template>
-  `, isInline: true, components: [{ type: ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
+  `, isInline: true, components: [{ type: ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CdsIconCustomTag, selector: "cds-icon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrTimelineStep, decorators: [{
             type: Component,
             args: [{
@@ -26757,5 +27179,5 @@ const CLR_MENU_POSITIONS = [
  * Generated bundle index. Do not edit.
  */
 
-export { CLR_ALERT_DIRECTIVES, CLR_BUTTON_GROUP_DIRECTIVES, CLR_DATAGRID_DIRECTIVES, CLR_DATEPICKER_DIRECTIVES, CLR_DRAG_AND_DROP_DIRECTIVES, CLR_DROPDOWN_DIRECTIVES, CLR_ICON_DIRECTIVES, CLR_LAYOUT_DIRECTIVES, CLR_LOADING_BUTTON_DIRECTIVES, CLR_LOADING_DIRECTIVES, CLR_MENU_POSITIONS, CLR_MODAL_DIRECTIVES, CLR_NAVIGATION_DIRECTIVES, CLR_PROGRESS_BAR_DIRECTIVES, CLR_SIGNPOST_DIRECTIVES, CLR_SPINNER_DIRECTIVES, CLR_STACK_VIEW_DIRECTIVES, CLR_TABS_DIRECTIVES, CLR_TOOLTIP_DIRECTIVES, CLR_TREE_VIEW_DIRECTIVES, CLR_VERTICAL_NAV_DIRECTIVES, CLR_WIZARD_DIRECTIVES, CONDITIONAL_DIRECTIVES, CUSTOM_BUTTON_TYPES, CdsIconCustomTag, ClarityModule, ClrAbstractContainer, ClrAccordion, ClrAccordionContent, ClrAccordionDescription, ClrAccordionModule, ClrAccordionPanel, ClrAccordionTitle, ClrAlert, ClrAlertItem, ClrAlertModule, ClrAlertText, ClrAlerts, ClrAlertsPager, ClrAlignment, ClrAriaLivePoliteness, ClrAriaLiveService, ClrAxis, ClrButton, ClrButtonGroup, ClrButtonGroupModule, ClrButtonModule, ClrCalendar, ClrCheckbox, ClrCheckboxContainer, ClrCheckboxModule, ClrCheckboxWrapper, ClrCombobox, ClrComboboxContainer, ClrComboboxModule, ClrCommonFormsModule, ClrCommonStringsService, ClrConditionalModule, ClrControl, ClrControlContainer, ClrControlError, ClrControlHelper, ClrControlSuccess, ClrDataModule, ClrDatagrid, ClrDatagridActionBar, ClrDatagridActionOverflow, ClrDatagridCell, ClrDatagridColumn, ClrDatagridColumnSeparator, ClrDatagridColumnToggle, ClrDatagridColumnToggleButton, ClrDatagridColumnToggleTitle, ClrDatagridDetail, ClrDatagridDetailBody, ClrDatagridDetailHeader, ClrDatagridFilter, ClrDatagridFooter, ClrDatagridHideableColumn, ClrDatagridItems, ClrDatagridItemsTrackBy, ClrDatagridModule, ClrDatagridPageSize, ClrDatagridPagination, ClrDatagridPlaceholder, ClrDatagridRow, ClrDatagridRowDetail, ClrDatagridSortOrder, ClrDatalist, ClrDatalistContainer, ClrDatalistInput, ClrDatalistModule, ClrDateContainer, ClrDateInput, ClrDatepickerModule, ClrDatepickerViewManager, ClrDay, ClrDaypicker, ClrDragAndDropModule, ClrDragEvent, ClrDragHandle, ClrDraggable, ClrDraggableGhost, ClrDropdown, ClrDropdownItem, ClrDropdownMenu, ClrDropdownModule, ClrDropdownTrigger, ClrDroppable, ClrEmphasisModule, ClrExpandableAnimation, ClrFocusOnViewInit, ClrFocusOnViewInitModule, ClrForm, ClrFormLayout, ClrFormsModule, ClrHeader, ClrIconCustomTag, ClrIconModule, ClrIfActive, ClrIfDetail, ClrIfDragged, ClrIfError, ClrIfExpanded, ClrIfOpen, ClrIfSuccess, ClrInput, ClrInputContainer, ClrInputModule, ClrLabel, ClrLayout, ClrLayoutModule, ClrLoading, ClrLoadingButton, ClrLoadingButtonModule, ClrLoadingModule, ClrLoadingState, ClrMainContainer, ClrMainContainerModule, ClrModal, ClrModalBody, ClrModalModule, ClrMonthpicker, ClrNavLevel, ClrNavigationModule, ClrOption, ClrOptionItems, ClrOptionSelected, ClrOptions, ClrPassword, ClrPasswordContainer, ClrPasswordModule, ClrPopoverAnchor, ClrPopoverContent, ClrPopoverEventsService, ClrPopoverModule, ClrPopoverPositionService, ClrPopoverToggleService, ClrProgressBar, ClrProgressBarModule, ClrRadio, ClrRadioContainer, ClrRadioModule, ClrRadioWrapper, ClrRange, ClrRangeContainer, ClrRangeModule, ClrRecursiveForOf, ClrSelect, ClrSelectContainer, ClrSelectModule, ClrSelectedState, ClrSide, ClrSignpost, ClrSignpostContent, ClrSignpostModule, ClrSignpostTrigger, ClrSpinner, ClrSpinnerModule, ClrStackBlock, ClrStackContentInput, ClrStackHeader, ClrStackInput, ClrStackSelect, ClrStackView, ClrStackViewCustomTags, ClrStackViewLabel, ClrStackViewModule, ClrStepButton, ClrStepButtonType, ClrStepper, ClrStepperModule, ClrStepperPanel, ClrTab, ClrTabContent, ClrTabLink, ClrTabOverflowContent, ClrTabs, ClrTabsModule, ClrTextarea, ClrTextareaContainer, ClrTextareaModule, ClrTimeline, ClrTimelineLayout, ClrTimelineModule, ClrTimelineStep, ClrTimelineStepDescription, ClrTimelineStepHeader, ClrTimelineStepState, ClrTimelineStepTitle, ClrTooltip, ClrTooltipContent, ClrTooltipModule, ClrTooltipTrigger, ClrTree, ClrTreeNode, ClrTreeNodeLink, ClrTreeViewModule, ClrVerticalNav, ClrVerticalNavGroup, ClrVerticalNavGroupChildren, ClrVerticalNavIcon, ClrVerticalNavLink, ClrVerticalNavModule, ClrWizard, ClrWizardButton, ClrWizardCustomTags, ClrWizardHeaderAction, ClrWizardModule, ClrWizardPage, ClrWizardPageButtons, ClrWizardPageHeaderActions, ClrWizardPageNavTitle, ClrWizardPageTitle, ClrWizardStepnav, ClrWizardStepnavItem, ClrYearpicker, DEFAULT_BUTTON_TYPES, DatagridNumericFilter, DatagridPropertyComparator, DatagridPropertyNumericFilter, DatagridPropertyStringFilter, DatagridStringFilter, EXPANDABLE_ANIMATION_DIRECTIVES, FOCUS_ON_VIEW_INIT, FOCUS_ON_VIEW_INIT_DIRECTIVES, IS_TOGGLE, IS_TOGGLE_PROVIDER, LoadingListener, MainContainerWillyWonka, NavDetectionOompaLoompa, TOGGLE_SERVICE, TOGGLE_SERVICE_PROVIDER, ToggleServiceFactory, WrappedFormControl, collapse, commonStringsDefault, fade, fadeSlide, isToggleFactory, slide, AccordionOompaLoompa as ÇlrAccordionOompaLoompa, AccordionWillyWonka as ÇlrAccordionWillyWonka, ActionableOompaLoompa as ÇlrActionableOompaLoompa, ActiveOompaLoompa as ÇlrActiveOompaLoompa, ClrFocusTrapModule as ÇlrClrFocusTrapModule, ClrPopoverCloseButton as ÇlrClrPopoverCloseButton, ClrPopoverModuleNext as ÇlrClrPopoverModuleNext, ClrPopoverOpenCloseButton as ÇlrClrPopoverOpenCloseButton, DatagridCellRenderer as ÇlrDatagridCellRenderer, DatagridDetailRegisterer as ÇlrDatagridDetailRegisterer, DatagridHeaderRenderer as ÇlrDatagridHeaderRenderer, DatagridMainRenderer as ÇlrDatagridMainRenderer, DatagridRowRenderer as ÇlrDatagridRowRenderer, DatagridWillyWonka as ÇlrDatagridWillyWonka, ExpandableOompaLoompa as ÇlrExpandableOompaLoompa, FocusTrapDirective as ÇlrFocusTrapDirective, FocusTrapTracker as ÇlrFocusTrapTracker, StepperOompaLoompa as ÇlrStepperOompaLoompa, StepperWillyWonka as ÇlrStepperWillyWonka, TabsWillyWonka as ÇlrTabsWillyWonka, WrappedCell as ÇlrWrappedCell, WrappedColumn as ÇlrWrappedColumn, WrappedRow as ÇlrWrappedRow };
+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, ClrDestroyService, 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 };
 //# sourceMappingURL=clr-angular.mjs.map