@clr/angular 13.3.2 → 13.4.2

package/fesm2015/clr-angular.mjs

@@ -25,7 +25,9 @@ ClrIconCustomTag.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version
 ClrIconCustomTag.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrIconCustomTag, selector: "clr-icon", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrIconCustomTag, decorators: [{
             type: Directive,
-            args: [{ selector: 'clr-icon' }]
+            args: [{
+                    selector: 'clr-icon',
+                }]
         }] });
 class CdsIconCustomTag {
 }
@@ -33,7 +35,9 @@ CdsIconCustomTag.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version
 CdsIconCustomTag.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: CdsIconCustomTag, selector: "cds-icon", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CdsIconCustomTag, decorators: [{
             type: Directive,
-            args: [{ selector: 'cds-icon' }]
+            args: [{
+                    selector: 'cds-icon',
+                }]
         }] });
 
 /*
@@ -108,7 +112,9 @@ ClrLoading.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
 ClrLoading.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrLoading, selector: "[clrLoading]", inputs: { loadingState: ["clrLoading", "loadingState"] }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrLoading, decorators: [{
             type: Directive,
-            args: [{ selector: '[clrLoading]' }]
+            args: [{
+                    selector: '[clrLoading]',
+                }]
         }], ctorParameters: function () {
         return [{ type: LoadingListener, decorators: [{
                         type: Optional
@@ -779,7 +785,9 @@ AccordionWillyWonka.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", vers
 AccordionWillyWonka.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: AccordionWillyWonka, selector: "clr-accordion", usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AccordionWillyWonka, decorators: [{
             type: Directive,
-            args: [{ selector: 'clr-accordion' }]
+            args: [{
+                    selector: 'clr-accordion',
+                }]
         }] });
 
 /*
@@ -803,7 +811,9 @@ AccordionOompaLoompa.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", ver
 AccordionOompaLoompa.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: AccordionOompaLoompa, selector: "clr-accordion-panel", usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AccordionOompaLoompa, decorators: [{
             type: Directive,
-            args: [{ selector: 'clr-accordion-panel' }]
+            args: [{
+                    selector: 'clr-accordion-panel',
+                }]
         }], ctorParameters: function () {
         return [{ type: i0.ChangeDetectorRef }, { type: AccordionWillyWonka, decorators: [{
                         type: Optional
@@ -1256,7 +1266,9 @@ StepperWillyWonka.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versio
 StepperWillyWonka.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: StepperWillyWonka, selector: "form[clrStepper]", usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StepperWillyWonka, decorators: [{
             type: Directive,
-            args: [{ selector: 'form[clrStepper]' }]
+            args: [{
+                    selector: 'form[clrStepper]',
+                }]
         }] });
 
 /*
@@ -1280,7 +1292,9 @@ StepperOompaLoompa.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versi
 StepperOompaLoompa.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: StepperOompaLoompa, selector: "clr-stepper-panel, [clrStepButton]", usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StepperOompaLoompa, decorators: [{
             type: Directive,
-            args: [{ selector: 'clr-stepper-panel, [clrStepButton]' }]
+            args: [{
+                    selector: 'clr-stepper-panel, [clrStepButton]',
+                }]
         }], ctorParameters: function () {
         return [{ type: i0.ChangeDetectorRef }, { type: StepperWillyWonka, decorators: [{
                         type: Optional
@@ -2224,7 +2238,9 @@ ClrPopoverContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versio
 ClrPopoverContent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrPopoverContent, selector: "[clrPopoverContent]", inputs: { open: ["clrPopoverContent", "open"], contentAt: ["clrPopoverContentAt", "contentAt"], outsideClickClose: ["clrPopoverContentOutsideClickToClose", "outsideClickClose"], scrollToClose: ["clrPopoverContentScrollToClose", "scrollToClose"] }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrPopoverContent, decorators: [{
             type: Directive,
-            args: [{ selector: '[clrPopoverContent]' }]
+            args: [{
+                    selector: '[clrPopoverContent]',
+                }]
         }], ctorParameters: function () {
         return [{ type: Document, decorators: [{
                         type: Inject,
@@ -3087,12 +3103,12 @@ class ClrControlError extends ClrAbstractControl {
     }
 }
 ClrControlError.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrControlError, deps: [{ token: ControlIdService, optional: true }, { token: ContainerIdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ClrControlError.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrControlError, selector: "clr-control-error", host: { properties: { "class.clr-subtext": "true", "attr.id": "id" } }, usesInheritance: true, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true });
+ClrControlError.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrControlError, selector: "clr-control-error", host: { properties: { "class.clr-subtext": "true", "attr.id": "id" } }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrControlError, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-control-error',
-                    template: ` <ng-content></ng-content> `,
+                    template: `<ng-content></ng-content>`,
                     host: {
                         '[class.clr-subtext]': 'true',
                         '[attr.id]': 'id',
@@ -3120,12 +3136,12 @@ class ClrControlHelper extends ClrAbstractControl {
     }
 }
 ClrControlHelper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrControlHelper, deps: [{ token: ControlIdService, optional: true }, { token: ContainerIdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ClrControlHelper.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrControlHelper, selector: "clr-control-helper", host: { properties: { "class.clr-subtext": "true", "attr.id": "id" } }, usesInheritance: true, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true });
+ClrControlHelper.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrControlHelper, selector: "clr-control-helper", host: { properties: { "class.clr-subtext": "true", "attr.id": "id" } }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrControlHelper, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-control-helper',
-                    template: ` <ng-content></ng-content> `,
+                    template: `<ng-content></ng-content>`,
                     host: {
                         '[class.clr-subtext]': 'true',
                         '[attr.id]': 'id',
@@ -3323,7 +3339,9 @@ ClrLabel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.
 ClrLabel.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrLabel, selector: "label", inputs: { forAttr: ["for", "forAttr"] }, host: { properties: { "attr.for": "this.forAttr" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrLabel, decorators: [{
             type: Directive,
-            args: [{ selector: 'label' }]
+            args: [{
+                    selector: 'label',
+                }]
         }], ctorParameters: function () {
         return [{ type: ControlIdService, decorators: [{
                         type: Optional
@@ -3354,12 +3372,12 @@ class ClrControlSuccess extends ClrAbstractControl {
     }
 }
 ClrControlSuccess.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrControlSuccess, deps: [{ token: ControlIdService, optional: true }, { token: ContainerIdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ClrControlSuccess.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrControlSuccess, selector: "clr-control-success", host: { properties: { "class.clr-subtext": "true", "attr.id": "id" } }, usesInheritance: true, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true });
+ClrControlSuccess.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrControlSuccess, selector: "clr-control-success", host: { properties: { "class.clr-subtext": "true", "attr.id": "id" } }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrControlSuccess, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-control-success',
-                    template: ` <ng-content></ng-content> `,
+                    template: `<ng-content></ng-content>`,
                     host: {
                         '[class.clr-subtext]': 'true',
                         '[attr.id]': 'id',
@@ -3829,7 +3847,10 @@ ClrControl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
 ClrControl.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrControl, selector: "[clrControl]", host: { properties: { "class.clr-input": "true" } }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrControl, decorators: [{
             type: Directive,
-            args: [{ selector: '[clrControl]', host: { '[class.clr-input]': 'true' } }]
+            args: [{
+                    selector: '[clrControl]',
+                    host: { '[class.clr-input]': 'true' },
+                }]
         }], ctorParameters: function () {
         return [{ type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i1.NgControl, decorators: [{
                         type: Self
@@ -3978,7 +3999,9 @@ ClrIfError.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
 ClrIfError.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrIfError, selector: "[clrIfError]", inputs: { error: ["clrIfError", "error"] }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrIfError, decorators: [{
             type: Directive,
-            args: [{ selector: '[clrIfError]' }]
+            args: [{
+                    selector: '[clrIfError]',
+                }]
         }], ctorParameters: function () {
         return [{ type: IfControlStateService, decorators: [{
                         type: Optional
@@ -4022,7 +4045,9 @@ ClrIfSuccess.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "1
 ClrIfSuccess.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrIfSuccess, selector: "[clrIfSuccess]", usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrIfSuccess, decorators: [{
             type: Directive,
-            args: [{ selector: '[clrIfSuccess]' }]
+            args: [{
+                    selector: '[clrIfSuccess]',
+                }]
         }], ctorParameters: function () {
         return [{ type: IfControlStateService, decorators: [{
                         type: Optional
@@ -4212,7 +4237,9 @@ ClrCheckbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13
 ClrCheckbox.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrCheckbox, selector: "[clrCheckbox],[clrToggle]", usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrCheckbox, decorators: [{
             type: Directive,
-            args: [{ selector: '[clrCheckbox],[clrToggle]' }]
+            args: [{
+                    selector: '[clrCheckbox],[clrToggle]',
+                }]
         }], ctorParameters: function () {
         return [{ type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i1.NgControl, decorators: [{
                         type: Self
@@ -4420,12 +4447,12 @@ class ClrSpinner {
     }
 }
 ClrSpinner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrSpinner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrSpinner, selector: "clr-spinner", inputs: { clrInline: "clrInline", clrInverse: "clrInverse", clrSmall: "clrSmall", clrMedium: "clrMedium" }, host: { properties: { "attr.aria-busy": "true", "class.spinner": "this.spinnerClass", "class.spinner-inline": "this.inlineClass", "class.spinner-inverse": "this.inverseClass", "class.spinner-sm": "this.smallClass", "class.spinner-md": "this.mediumClass" } }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true });
+ClrSpinner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrSpinner, selector: "clr-spinner", inputs: { clrInline: "clrInline", clrInverse: "clrInverse", clrSmall: "clrSmall", clrMedium: "clrMedium" }, host: { properties: { "attr.aria-busy": "true", "class.spinner": "this.spinnerClass", "class.spinner-inline": "this.inlineClass", "class.spinner-inverse": "this.inverseClass", "class.spinner-sm": "this.smallClass", "class.spinner-md": "this.mediumClass" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrSpinner, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-spinner',
-                    template: ` <ng-content></ng-content> `,
+                    template: `<ng-content></ng-content>`,
                     host: {
                         '[attr.aria-busy]': 'true',
                     },
@@ -4641,7 +4668,9 @@ ClrIfActive.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13
 ClrIfActive.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrIfActive, selector: "[clrIfActive]", inputs: { active: ["clrIfActive", "active"] }, outputs: { activeChange: "clrIfActiveChange" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrIfActive, decorators: [{
             type: Directive,
-            args: [{ selector: '[clrIfActive]' }]
+            args: [{
+                    selector: '[clrIfActive]',
+                }]
         }], ctorParameters: function () {
         return [{ type: IfActiveService }, { type: undefined, decorators: [{
                         type: Inject,
@@ -4733,7 +4762,9 @@ ClrIfExpanded.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
 ClrIfExpanded.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrIfExpanded, selector: "[clrIfExpanded]", inputs: { expanded: ["clrIfExpanded", "expanded"] }, outputs: { expandedChange: "clrIfExpandedChange" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrIfExpanded, decorators: [{
             type: Directive,
-            args: [{ selector: '[clrIfExpanded]' }]
+            args: [{
+                    selector: '[clrIfExpanded]',
+                }]
         }], ctorParameters: function () {
         return [{ type: i0.TemplateRef, decorators: [{
                         type: Optional
@@ -4821,7 +4852,9 @@ ClrIfOpen.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0
 ClrIfOpen.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrIfOpen, selector: "[clrIfOpen]", inputs: { open: ["clrIfOpen", "open"] }, outputs: { openChange: "clrIfOpenChange" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrIfOpen, decorators: [{
             type: Directive,
-            args: [{ selector: '[clrIfOpen]' }]
+            args: [{
+                    selector: '[clrIfOpen]',
+                }]
         }], ctorParameters: function () { return [{ type: ClrPopoverToggleService }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { open: [{
                 type: Input,
                 args: ['clrIfOpen']
@@ -5580,7 +5613,9 @@ ClrOptionSelected.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versio
 ClrOptionSelected.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrOptionSelected, selector: "[clrOptionSelected]", inputs: { selected: ["clrOptionSelected", "selected"] }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrOptionSelected, decorators: [{
             type: Directive,
-            args: [{ selector: '[clrOptionSelected]' }]
+            args: [{
+                    selector: '[clrOptionSelected]',
+                }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { selected: [{
                 type: Input,
                 args: ['clrOptionSelected']
@@ -5878,7 +5913,14 @@ class ComboboxFocusHandler {
                     firstActive = this.selectionService.selectionModel.model;
                 }
                 const activeProxy = this.optionData.find(option => option.value === firstActive);
-                this.pseudoFocus.select(activeProxy);
+                if (activeProxy) {
+                    // active element is visible
+                    this.pseudoFocus.select(activeProxy);
+                }
+                else {
+                    // we have active element, but it's filtered out
+                    this.pseudoFocus.select(this.optionData[0]);
+                }
             }
         }
     }
@@ -6173,7 +6215,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\" role=\"combobox\">\n    <input\n      #textboxInput\n      type=\"text\"\n      [id]=\"inputId()\"\n      class=\"clr-input clr-combobox-input\"\n      [(ngModel)]=\"searchText\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      [attr.aria-expanded]=\"openState\"\n      [attr.aria-owns]=\"ariaOwns\"\n      aria-haspopup=\"listbox\"\n      aria-autocomplete=\"list\"\n      autocomplete=\"off\"\n      [attr.aria-invalid]=\"control?.invalid? true: null\"\n      [disabled]=\"control?.disabled? true: null\"\n      [attr.aria-activedescendant]=\"getActiveDescendant()\"\n      [attr.placeholder]=\"placeholder\"\n    />\n  </span>\n\n  <!-- No click handler, as it uses the handler on the .clr-combobox-wrapper -->\n  <button\n    clrPopoverOpenCloseButton\n    #trigger\n    type=\"button\"\n    class=\"clr-combobox-trigger\"\n    tabindex=\"-1\"\n    [disabled]=\"control?.disabled || null\"\n    [attr.aria-label]=\"commonStrings.keys.comboboxOpen\"\n  >\n    <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n  </button>\n\n  <div class=\"clr-focus-indicator\" [class.clr-focus]=\"focused\"></div>\n</div>\n\n<!-- Both close handlers are handled manually due to issues in Edge browser.\n     Additionally 'outsideClickToClose' has complex handling that's necessary\n     to be manual due to the component architecture -->\n<div role=\"dialog\" *clrPopoverContent=\"openState at smartPosition; outsideClickToClose: false; scrollToClose: false\">\n  <ng-content></ng-content>\n</div>\n", 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"] }] });
+    ], 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          ></ng-container>\n        </span>\n      </span>\n      <span role=\"gridcell\">\n        <button\n          clrKeyFocusItem\n          type=\"button\"\n          class=\"clr-combobox-remove-btn\"\n          [disabled]=\"control?.disabled? true: null\"\n          [attr.aria-label]=\"commonStrings.keys.comboboxDelete + ' ' + optionSelectionService.selectionModel.toString(displayField, i)\"\n          (click)=\"unselect(item)\"\n        >\n          <cds-icon shape=\"window-close\" size=\"12\"></cds-icon>\n        </button>\n      </span>\n    </span>\n  </span>\n\n  <span class=\"clr-combobox-input-wrapper\" role=\"combobox\">\n    <input\n      #textboxInput\n      type=\"text\"\n      [id]=\"inputId()\"\n      class=\"clr-input clr-combobox-input\"\n      [(ngModel)]=\"searchText\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      [attr.aria-expanded]=\"openState\"\n      [attr.aria-owns]=\"ariaOwns\"\n      aria-haspopup=\"listbox\"\n      aria-autocomplete=\"list\"\n      autocomplete=\"off\"\n      [attr.aria-invalid]=\"control?.invalid? true: null\"\n      [disabled]=\"control?.disabled? true: null\"\n      [attr.aria-activedescendant]=\"getActiveDescendant()\"\n      [attr.placeholder]=\"placeholder\"\n    />\n  </span>\n\n  <!-- No click handler, as it uses the handler on the .clr-combobox-wrapper -->\n  <button\n    clrPopoverOpenCloseButton\n    #trigger\n    type=\"button\"\n    class=\"clr-combobox-trigger\"\n    tabindex=\"-1\"\n    [disabled]=\"control?.disabled || null\"\n    [attr.aria-label]=\"commonStrings.keys.comboboxOpen\"\n  >\n    <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n  </button>\n\n  <div class=\"clr-focus-indicator\" [class.clr-focus]=\"focused\"></div>\n</div>\n\n<!-- Both close handlers are handled manually due to issues in Edge browser.\n     Additionally 'outsideClickToClose' has complex handling that's necessary\n     to be manual due to the component architecture -->\n<div role=\"dialog\" *clrPopoverContent=\"openState at smartPosition; outsideClickToClose: false; scrollToClose: false\">\n  <ng-content></ng-content>\n</div>\n", 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: [
@@ -6192,7 +6234,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                         '[class.aria-required]': 'true',
                         '[class.clr-combobox]': 'true',
                         '[class.clr-combobox-disabled]': 'control?.disabled',
-                    }, template: "<!--\n* Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.\n* This software is released under MIT license.\n* The full license information can be found in LICENSE in the root directory of this project.\n-->\n\n<!-- The (click) handler is needed to auto-focus on input field which can not currently occupy the whole\n     width of the component, after being wrapped to a new line -->\n<div\n  class=\"clr-combobox-wrapper\"\n  clrPopoverAnchor\n  (click)=\"focusInput()\"\n  [class.multi]=\"multiSelect\"\n  [class.invalid]=\"invalid\"\n>\n  <span\n    *ngIf=\"multiSelect && optionSelectionService.selectionModel.model\"\n    role=\"grid\"\n    clrRovingTabindex\n    [clrRovingTabindexDisabled]=\"control?.disabled\"\n    clrDirection=\"both\"\n    [attr.aria-label]=\"getSelectionAriaLabel()\"\n    [attr.aria-disabled]=\"control?.disabled? true: null\"\n  >\n    <span *ngFor=\"let item of multiSelectModel; let i = index\" class=\"label label-combobox-pill\" role=\"row\">\n      <span role=\"gridcell\">\n        <span class=\"clr-combobox-pill-content\" clrKeyFocusItem>\n          <ng-container\n            *ngIf=\"optionSelected\"\n            [ngTemplateOutlet]=\"optionSelected.template\"\n            [ngTemplateOutletContext]=\"{$implicit: optionSelectionService.selectionModel.model[i]}\"\n          >\n          </ng-container>\n        </span>\n      </span>\n      <span role=\"gridcell\">\n        <button\n          clrKeyFocusItem\n          type=\"button\"\n          class=\"clr-combobox-remove-btn\"\n          [disabled]=\"control?.disabled? true: null\"\n          [attr.aria-label]=\"commonStrings.keys.comboboxDelete + ' ' + optionSelectionService.selectionModel.toString(displayField, i)\"\n          (click)=\"unselect(item)\"\n        >\n          <cds-icon shape=\"window-close\" size=\"12\"></cds-icon>\n        </button>\n      </span>\n    </span>\n  </span>\n\n  <span class=\"clr-combobox-input-wrapper\" role=\"combobox\">\n    <input\n      #textboxInput\n      type=\"text\"\n      [id]=\"inputId()\"\n      class=\"clr-input clr-combobox-input\"\n      [(ngModel)]=\"searchText\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      [attr.aria-expanded]=\"openState\"\n      [attr.aria-owns]=\"ariaOwns\"\n      aria-haspopup=\"listbox\"\n      aria-autocomplete=\"list\"\n      autocomplete=\"off\"\n      [attr.aria-invalid]=\"control?.invalid? true: null\"\n      [disabled]=\"control?.disabled? true: null\"\n      [attr.aria-activedescendant]=\"getActiveDescendant()\"\n      [attr.placeholder]=\"placeholder\"\n    />\n  </span>\n\n  <!-- No click handler, as it uses the handler on the .clr-combobox-wrapper -->\n  <button\n    clrPopoverOpenCloseButton\n    #trigger\n    type=\"button\"\n    class=\"clr-combobox-trigger\"\n    tabindex=\"-1\"\n    [disabled]=\"control?.disabled || null\"\n    [attr.aria-label]=\"commonStrings.keys.comboboxOpen\"\n  >\n    <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n  </button>\n\n  <div class=\"clr-focus-indicator\" [class.clr-focus]=\"focused\"></div>\n</div>\n\n<!-- Both close handlers are handled manually due to issues in Edge browser.\n     Additionally 'outsideClickToClose' has complex handling that's necessary\n     to be manual due to the component architecture -->\n<div role=\"dialog\" *clrPopoverContent=\"openState at smartPosition; outsideClickToClose: false; scrollToClose: false\">\n  <ng-content></ng-content>\n</div>\n" }]
+                    }, 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          ></ng-container>\n        </span>\n      </span>\n      <span role=\"gridcell\">\n        <button\n          clrKeyFocusItem\n          type=\"button\"\n          class=\"clr-combobox-remove-btn\"\n          [disabled]=\"control?.disabled? true: null\"\n          [attr.aria-label]=\"commonStrings.keys.comboboxDelete + ' ' + optionSelectionService.selectionModel.toString(displayField, i)\"\n          (click)=\"unselect(item)\"\n        >\n          <cds-icon shape=\"window-close\" size=\"12\"></cds-icon>\n        </button>\n      </span>\n    </span>\n  </span>\n\n  <span class=\"clr-combobox-input-wrapper\" role=\"combobox\">\n    <input\n      #textboxInput\n      type=\"text\"\n      [id]=\"inputId()\"\n      class=\"clr-input clr-combobox-input\"\n      [(ngModel)]=\"searchText\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      [attr.aria-expanded]=\"openState\"\n      [attr.aria-owns]=\"ariaOwns\"\n      aria-haspopup=\"listbox\"\n      aria-autocomplete=\"list\"\n      autocomplete=\"off\"\n      [attr.aria-invalid]=\"control?.invalid? true: null\"\n      [disabled]=\"control?.disabled? true: null\"\n      [attr.aria-activedescendant]=\"getActiveDescendant()\"\n      [attr.placeholder]=\"placeholder\"\n    />\n  </span>\n\n  <!-- No click handler, as it uses the handler on the .clr-combobox-wrapper -->\n  <button\n    clrPopoverOpenCloseButton\n    #trigger\n    type=\"button\"\n    class=\"clr-combobox-trigger\"\n    tabindex=\"-1\"\n    [disabled]=\"control?.disabled || null\"\n    [attr.aria-label]=\"commonStrings.keys.comboboxOpen\"\n  >\n    <cds-icon shape=\"angle\" direction=\"down\" size=\"12\"></cds-icon>\n  </button>\n\n  <div class=\"clr-focus-indicator\" [class.clr-focus]=\"focused\"></div>\n</div>\n\n<!-- Both close handlers are handled manually due to issues in Edge browser.\n     Additionally 'outsideClickToClose' has complex handling that's necessary\n     to be manual due to the component architecture -->\n<div role=\"dialog\" *clrPopoverContent=\"openState at smartPosition; outsideClickToClose: false; scrollToClose: false\">\n  <ng-content></ng-content>\n</div>\n" }]
         }], ctorParameters: function () {
         return [{ type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i1.NgControl, decorators: [{
                         type: Self
@@ -6292,14 +6334,18 @@ 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: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+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: 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: [{
                     selector: 'clr-option',
-                    template: `<ng-content></ng-content>
-    <span *ngIf="selected" class="clr-sr-only"> {{ commonStrings.keys.comboboxSelected }} </span> `,
+                    template: `
+    <ng-content></ng-content>
+    <span *ngIf="selected" class="clr-sr-only">{{ commonStrings.keys.comboboxSelected }}</span>
+  `,
                     providers: [UNIQUE_ID_PROVIDER],
                     host: {
                         '[class.clr-combobox-option]': 'true',
@@ -6482,6 +6528,10 @@ class ClrOptions {
                 event.target !== this.focusHandler.textInput) {
                 this.toggleService.open = false;
             }
+        }), this.items.changes.subscribe(() => {
+            setTimeout(() => {
+                this.focusHandler.focusFirstActive();
+            });
         }));
     }
     ngOnDestroy() {
@@ -6711,7 +6761,10 @@ ClrInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.
 ClrInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrInput, selector: "[clrInput]", host: { properties: { "class.clr-input": "true" } }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrInput, decorators: [{
             type: Directive,
-            args: [{ selector: '[clrInput]', host: { '[class.clr-input]': 'true' } }]
+            args: [{
+                    selector: '[clrInput]',
+                    host: { '[class.clr-input]': 'true' },
+                }]
         }], ctorParameters: function () {
         return [{ type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i1.NgControl, decorators: [{
                         type: Self
@@ -7196,7 +7249,9 @@ FocusTrapDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versi
 FocusTrapDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: FocusTrapDirective, selector: "[clrFocusTrap]", inputs: { config: ["clrFocusTrap", "config"] }, host: { listeners: { "document:focusin": "onFocusIn($event)" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: FocusTrapDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[clrFocusTrap]' }]
+            args: [{
+                    selector: '[clrFocusTrap]',
+                }]
         }], ctorParameters: function () {
         return [{ type: i0.ElementRef }, { type: i0.Injector }, { type: FocusTrapTracker }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
                         type: Inject,
@@ -9520,9 +9575,9 @@ ClrPasswordContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             type="button"
           >
             <cds-icon status="info" [attr.shape]="show ? 'eye-hide' : 'eye'"></cds-icon>
-            <span class="clr-sr-only">{{
-              show ? commonStrings.keys.passwordHide : commonStrings.keys.passwordShow
-            }}</span>
+            <span class="clr-sr-only">
+              {{ show ? commonStrings.keys.passwordHide : commonStrings.keys.passwordShow }}
+            </span>
           </button>
         </div>
         <cds-icon
@@ -9564,9 +9619,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type="button"
           >
             <cds-icon status="info" [attr.shape]="show ? 'eye-hide' : 'eye'"></cds-icon>
-            <span class="clr-sr-only">{{
-              show ? commonStrings.keys.passwordHide : commonStrings.keys.passwordShow
-            }}</span>
+            <span class="clr-sr-only">
+              {{ show ? commonStrings.keys.passwordHide : commonStrings.keys.passwordShow }}
+            </span>
           </button>
         </div>
         <cds-icon
@@ -9649,7 +9704,10 @@ ClrPassword.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13
 ClrPassword.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrPassword, selector: "[clrPassword]", host: { listeners: { "focus": "triggerFocus()", "blur": "triggerValidation()" }, properties: { "class.clr-input": "true" } }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrPassword, decorators: [{
             type: Directive,
-            args: [{ selector: '[clrPassword]', host: { '[class.clr-input]': 'true' } }]
+            args: [{
+                    selector: '[clrPassword]',
+                    host: { '[class.clr-input]': 'true' },
+                }]
         }], ctorParameters: function () {
         return [{ type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i1.NgControl, decorators: [{
                         type: Self
@@ -9751,7 +9809,9 @@ ClrRadio.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.
 ClrRadio.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrRadio, selector: "[clrRadio]", usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrRadio, decorators: [{
             type: Directive,
-            args: [{ selector: '[clrRadio]' }]
+            args: [{
+                    selector: '[clrRadio]',
+                }]
         }], ctorParameters: function () {
         return [{ type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i1.NgControl, decorators: [{
                         type: Self
@@ -10022,7 +10082,10 @@ ClrRange.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.
 ClrRange.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrRange, selector: "[clrRange]", host: { properties: { "class.clr-range": "true" } }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrRange, decorators: [{
             type: Directive,
-            args: [{ selector: '[clrRange]', host: { '[class.clr-range]': 'true' } }]
+            args: [{
+                    selector: '[clrRange]',
+                    host: { '[class.clr-range]': 'true' },
+                }]
         }], ctorParameters: function () {
         return [{ type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i1.NgControl, decorators: [{
                         type: Self
@@ -10169,7 +10232,10 @@ ClrSelect.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0
 ClrSelect.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrSelect, selector: "[clrSelect]", host: { properties: { "class.clr-select": "true" } }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrSelect, decorators: [{
             type: Directive,
-            args: [{ selector: '[clrSelect]', host: { '[class.clr-select]': 'true' } }]
+            args: [{
+                    selector: '[clrSelect]',
+                    host: { '[class.clr-select]': 'true' },
+                }]
         }], ctorParameters: function () {
         return [{ type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i1.NgControl, decorators: [{
                         type: Self
@@ -10289,7 +10355,10 @@ ClrTextarea.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13
 ClrTextarea.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrTextarea, selector: "[clrTextarea]", host: { properties: { "class.clr-textarea": "true" } }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrTextarea, decorators: [{
             type: Directive,
-            args: [{ selector: '[clrTextarea]', host: { '[class.clr-textarea]': 'true' } }]
+            args: [{
+                    selector: '[clrTextarea]',
+                    host: { '[class.clr-textarea]': 'true' },
+                }]
         }], ctorParameters: function () {
         return [{ type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i1.NgControl, decorators: [{
                         type: Self
@@ -10441,7 +10510,7 @@ class ClrExpandableAnimation {
     }
 }
 ClrExpandableAnimation.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrExpandableAnimation, deps: [{ token: i0.ElementRef }, { token: DomAdapter }], target: i0.ɵɵFactoryTarget.Component });
-ClrExpandableAnimation.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrExpandableAnimation, selector: "clr-expandable-animation", inputs: { clrExpandTrigger: "clrExpandTrigger" }, host: { listeners: { "@expandAnimation.done": "animationDone()" }, properties: { "@expandAnimation": "this.expandAnimation" } }, providers: [DomAdapter], ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, styles: [":host{display:block}\n"], animations: [
+ClrExpandableAnimation.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrExpandableAnimation, selector: "clr-expandable-animation", inputs: { clrExpandTrigger: "clrExpandTrigger" }, host: { listeners: { "@expandAnimation.done": "animationDone()" }, properties: { "@expandAnimation": "this.expandAnimation" } }, providers: [DomAdapter], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:block}\n"], animations: [
         trigger('expandAnimation', [
             transition('true <=> false', [
                 style({ height: '{{startHeight}}px', overflow: 'hidden' }),
@@ -10453,7 +10522,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Component,
             args: [{
                     selector: 'clr-expandable-animation',
-                    template: ` <ng-content></ng-content> `,
+                    template: `<ng-content></ng-content>`,
                     styles: [
                         `
       :host {
@@ -10827,7 +10896,10 @@ ClrDragHandle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
 ClrDragHandle.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrDragHandle, selector: "[clrDragHandle]", host: { properties: { "class.drag-handle": "true" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrDragHandle, decorators: [{
             type: Directive,
-            args: [{ selector: '[clrDragHandle]', host: { '[class.drag-handle]': 'true' } }]
+            args: [{
+                    selector: '[clrDragHandle]',
+                    host: { '[class.drag-handle]': 'true' },
+                }]
         }], ctorParameters: function () {
         return [{ type: i0.ElementRef }, { type: DragHandleRegistrarService, decorators: [{
                         type: Optional
@@ -11039,7 +11111,9 @@ ClrIfDragged.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "1
 ClrIfDragged.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrIfDragged, selector: "[clrIfDragged]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrIfDragged, decorators: [{
             type: Directive,
-            args: [{ selector: '[clrIfDragged]' }]
+            args: [{
+                    selector: '[clrIfDragged]',
+                }]
         }], ctorParameters: function () {
         return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef, decorators: [{
                         type: Optional
@@ -11614,7 +11688,9 @@ OutsideClick.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "1
 OutsideClick.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: OutsideClick, selector: "[clrOutsideClick]", inputs: { strict: ["clrStrict", "strict"] }, outputs: { outsideClick: "clrOutsideClick" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: OutsideClick, decorators: [{
             type: Directive,
-            args: [{ selector: '[clrOutsideClick]' }]
+            args: [{
+                    selector: '[clrOutsideClick]',
+                }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { strict: [{
                 type: Input,
                 args: ['clrStrict']
@@ -12765,7 +12841,9 @@ DatagridWillyWonka.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versi
 DatagridWillyWonka.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: DatagridWillyWonka, selector: "clr-datagrid", usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DatagridWillyWonka, decorators: [{
             type: Directive,
-            args: [{ selector: 'clr-datagrid' }]
+            args: [{
+                    selector: 'clr-datagrid',
+                }]
         }] });
 
 /*
@@ -12817,7 +12895,9 @@ ActionableOompaLoompa.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", ve
 ActionableOompaLoompa.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ActionableOompaLoompa, selector: "clr-datagrid, clr-dg-row", usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ActionableOompaLoompa, decorators: [{
             type: Directive,
-            args: [{ selector: 'clr-datagrid, clr-dg-row' }]
+            args: [{
+                    selector: 'clr-datagrid, clr-dg-row',
+                }]
         }], ctorParameters: function () {
         return [{ type: i0.ChangeDetectorRef }, { type: DatagridWillyWonka, decorators: [{
                         type: Optional
@@ -12933,7 +13013,9 @@ ExpandableOompaLoompa.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", ve
 ExpandableOompaLoompa.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ExpandableOompaLoompa, selector: "clr-datagrid, clr-dg-row", usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ExpandableOompaLoompa, decorators: [{
             type: Directive,
-            args: [{ selector: 'clr-datagrid, clr-dg-row' }]
+            args: [{
+                    selector: 'clr-datagrid, clr-dg-row',
+                }]
         }], ctorParameters: function () {
         return [{ type: i0.ChangeDetectorRef }, { type: DatagridWillyWonka, decorators: [{
                         type: Optional
@@ -14390,12 +14472,12 @@ class ClrDatagridCell {
     }
 }
 ClrDatagridCell.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrDatagridCell, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-ClrDatagridCell.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrDatagridCell, selector: "clr-dg-cell", host: { attributes: { "role": "gridcell" }, properties: { "class.datagrid-cell": "true", "class.datagrid-signpost-trigger": "signpost.length > 0" } }, queries: [{ propertyName: "signpost", predicate: ClrSignpost }], ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true });
+ClrDatagridCell.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrDatagridCell, selector: "clr-dg-cell", host: { attributes: { "role": "gridcell" }, properties: { "class.datagrid-cell": "true", "class.datagrid-signpost-trigger": "signpost.length > 0" } }, queries: [{ propertyName: "signpost", predicate: ClrSignpost }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrDatagridCell, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-dg-cell',
-                    template: ` <ng-content></ng-content> `,
+                    template: `<ng-content></ng-content>`,
                     host: {
                         '[class.datagrid-cell]': 'true',
                         '[class.datagrid-signpost-trigger]': 'signpost.length > 0',
@@ -15771,12 +15853,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
 class ClrDatagridActionBar {
 }
 ClrDatagridActionBar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrDatagridActionBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrDatagridActionBar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrDatagridActionBar, selector: "clr-dg-action-bar", host: { properties: { "class.datagrid-action-bar": "true" } }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true });
+ClrDatagridActionBar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrDatagridActionBar, selector: "clr-dg-action-bar", host: { properties: { "class.datagrid-action-bar": "true" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrDatagridActionBar, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-dg-action-bar',
-                    template: ` <ng-content></ng-content> `,
+                    template: `<ng-content></ng-content>`,
                     host: { '[class.datagrid-action-bar]': 'true' },
                 }]
         }] });
@@ -15864,7 +15946,6 @@ ClrDatagridActionOverflow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
 
     <div
       class="datagrid-action-overflow"
-      role="menu"
       [id]="popoverId"
       [attr.aria-hidden]="!open"
       [attr.id]="popoverId"
@@ -15898,7 +15979,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
 
     <div
       class="datagrid-action-overflow"
-      role="menu"
       [id]="popoverId"
       [attr.aria-hidden]="!open"
       [attr.id]="popoverId"
@@ -16421,7 +16501,9 @@ DatagridDetailRegisterer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0",
 DatagridDetailRegisterer.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: DatagridDetailRegisterer, selector: "[clrIfExpanded]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DatagridDetailRegisterer, decorators: [{
             type: Directive,
-            args: [{ selector: '[clrIfExpanded]' }]
+            args: [{
+                    selector: '[clrIfExpanded]',
+                }]
         }], ctorParameters: function () {
         return [{ type: ExpandableRowsCount, decorators: [{
                         type: Optional
@@ -17028,7 +17110,9 @@ ClrDatagridHideableColumn.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0"
 ClrDatagridHideableColumn.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrDatagridHideableColumn, selector: "[clrDgHideableColumn]", inputs: { clrDgHideableColumn: "clrDgHideableColumn", clrDgHidden: "clrDgHidden" }, outputs: { hiddenChange: "clrDgHiddenChange" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrDatagridHideableColumn, decorators: [{
             type: Directive,
-            args: [{ selector: '[clrDgHideableColumn]' }]
+            args: [{
+                    selector: '[clrDgHideableColumn]',
+                }]
         }], ctorParameters: function () {
         return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: ColumnsService }, { type: i3.BehaviorSubject, decorators: [{
                         type: Optional
@@ -17686,7 +17770,9 @@ DatagridCellRenderer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", ver
 DatagridCellRenderer.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: DatagridCellRenderer, selector: "clr-dg-cell", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DatagridCellRenderer, decorators: [{
             type: Directive,
-            args: [{ selector: 'clr-dg-cell' }]
+            args: [{
+                    selector: 'clr-dg-cell',
+                }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DatagridRenderOrganizer }]; } });
 
 /*
@@ -17800,7 +17886,10 @@ DatagridHeaderRenderer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", v
 DatagridHeaderRenderer.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: DatagridHeaderRenderer, selector: "clr-dg-column", outputs: { resizeEmitter: "clrDgColumnResize" }, providers: [ColumnResizerService, COLUMN_STATE_PROVIDER], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DatagridHeaderRenderer, decorators: [{
             type: Directive,
-            args: [{ selector: 'clr-dg-column', providers: [ColumnResizerService, COLUMN_STATE_PROVIDER] }]
+            args: [{
+                    selector: 'clr-dg-column',
+                    providers: [ColumnResizerService, COLUMN_STATE_PROVIDER],
+                }]
         }], ctorParameters: function () {
         return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DatagridRenderOrganizer }, { type: DomAdapter }, { type: ColumnResizerService }, { type: ColumnsService }, { type: i3.BehaviorSubject, decorators: [{
                         type: Inject,
@@ -17907,7 +17996,9 @@ DatagridRowRenderer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", vers
 DatagridRowRenderer.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: DatagridRowRenderer, selector: "clr-dg-row, clr-dg-row-detail", queries: [{ propertyName: "cells", predicate: DatagridCellRenderer }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DatagridRowRenderer, decorators: [{
             type: Directive,
-            args: [{ selector: 'clr-dg-row, clr-dg-row-detail' }]
+            args: [{
+                    selector: 'clr-dg-row, clr-dg-row-detail',
+                }]
         }], ctorParameters: function () { return [{ type: ColumnsService }]; }, propDecorators: { cells: [{
                 type: ContentChildren,
                 args: [DatagridCellRenderer]
@@ -18293,7 +18384,9 @@ ClrStackViewCustomTags.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", v
 ClrStackViewCustomTags.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrStackViewCustomTags, selector: "clr-stack-content", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrStackViewCustomTags, decorators: [{
             type: Directive,
-            args: [{ selector: 'clr-stack-content' }]
+            args: [{
+                    selector: 'clr-stack-content',
+                }]
         }] });
 class ClrStackViewLabel {
     constructor(uniqueId) {
@@ -19218,7 +19311,9 @@ ClrRecursiveForOf.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versio
 ClrRecursiveForOf.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrRecursiveForOf, selector: "[clrRecursiveFor][clrRecursiveForOf]", inputs: { nodes: ["clrRecursiveForOf", "nodes"], getChildren: ["clrRecursiveForGetChildren", "getChildren"] }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrRecursiveForOf, decorators: [{
             type: Directive,
-            args: [{ selector: '[clrRecursiveFor][clrRecursiveForOf]' }]
+            args: [{
+                    selector: '[clrRecursiveFor][clrRecursiveForOf]',
+                }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: TreeFeaturesService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { nodes: [{
                 type: Input,
                 args: ['clrRecursiveForOf']
@@ -19713,7 +19808,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: i5.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 }))]),
@@ -19737,7 +19832,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                         ]),
                     ], host: {
                         '[class.clr-tree-node]': '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<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" }]
+                    }, 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" }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
                         type: Inject,
@@ -19783,12 +19878,21 @@ 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 ClrTree {
-    constructor(featuresService, focusManagerService, el) {
+    constructor(featuresService, focusManagerService, { nativeElement }, renderer, ngZone) {
         this.featuresService = featuresService;
         this.focusManagerService = focusManagerService;
-        this.el = el;
         this.subscriptions = [];
-        this.tabindex = 0;
+        const subscription = ngZone.runOutsideAngular(() => fromEvent(nativeElement, 'focusin').subscribe((event) => {
+            if (event.target === nativeElement) {
+                // After discussing with the team, I've made it so that when the tree receives focus, the first visible node will be focused.
+                // This will prevent from the page scrolling abruptly to the first selected node if it exist in a deeply nested tree.
+                this.focusManagerService.focusFirstVisibleNode();
+                // when the first child gets focus,
+                // tree should no longer have tabindex of 0.
+                renderer.removeAttribute(nativeElement, 'tabindex');
+            }
+        }));
+        this.subscriptions.push(subscription);
     }
     set lazy(value) {
         this.featuresService.eager = !value;
@@ -19796,16 +19900,6 @@ class ClrTree {
     get isMultiSelectable() {
         return this.featuresService.selectable && this.rootNodes.length > 0;
     }
-    onFocusIn(event) {
-        if (event.target === this.el.nativeElement) {
-            // After discussing with the team, I've made it so that when the tree receives focus, the first visible node will be focused.
-            // This will prevent from the page scrolling abruptly to the first selected node if it exist in a deeply nested tree.
-            this.focusManagerService.focusFirstVisibleNode();
-            // when the first child gets focus,
-            // tree should no longer have tabindex of 0;
-            delete this.tabindex;
-        }
-    }
     ngAfterContentInit() {
         this.setRootNodes();
         this.subscriptions.push(this.rootNodes.changes.subscribe(() => {
@@ -19822,8 +19916,8 @@ class ClrTree {
         this.subscriptions.forEach(sub => sub.unsubscribe());
     }
 }
-ClrTree.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrTree, deps: [{ token: TreeFeaturesService }, { token: TreeFocusManagerService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ClrTree.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrTree, selector: "clr-tree", inputs: { lazy: ["clrLazy", "lazy"] }, host: { listeners: { "focusin": "onFocusIn($event)" }, properties: { "attr.tabindex": "tabindex", "attr.role": "\"tree\"", "attr.aria-multiselectable": "isMultiSelectable" } }, providers: [TREE_FEATURES_PROVIDER, TreeFocusManagerService], queries: [{ propertyName: "rootNodes", predicate: ClrTreeNode }], ngImport: i0, template: `
+ClrTree.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrTree, deps: [{ token: TreeFeaturesService }, { token: TreeFocusManagerService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ClrTree.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrTree, selector: "clr-tree", inputs: { lazy: ["clrLazy", "lazy"] }, host: { attributes: { "tabindex": "0" }, properties: { "attr.role": "\"tree\"", "attr.aria-multiselectable": "isMultiSelectable" } }, providers: [TREE_FEATURES_PROVIDER, TreeFocusManagerService], queries: [{ propertyName: "rootNodes", predicate: ClrTreeNode }], ngImport: i0, template: `
     <ng-content></ng-content>
     <clr-recursive-children
       *ngIf="featuresService.recursion"
@@ -19843,17 +19937,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
   `,
                     providers: [TREE_FEATURES_PROVIDER, TreeFocusManagerService],
                     host: {
-                        '[attr.tabindex]': 'tabindex',
+                        tabindex: '0',
                         '[attr.role]': '"tree"',
                         '[attr.aria-multiselectable]': 'isMultiSelectable',
                     },
                 }]
-        }], ctorParameters: function () { return [{ type: TreeFeaturesService }, { type: TreeFocusManagerService }, { type: i0.ElementRef }]; }, propDecorators: { lazy: [{
+        }], ctorParameters: function () { return [{ type: TreeFeaturesService }, { type: TreeFocusManagerService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { lazy: [{
                 type: Input,
                 args: ['clrLazy']
-            }], onFocusIn: [{
-                type: HostListener,
-                args: ['focusin', ['$event']]
             }], rootNodes: [{
                 type: ContentChildren,
                 args: [ClrTreeNode]
@@ -20823,12 +20914,12 @@ class ClrDropdownMenu extends AbstractPopover {
     }
 }
 ClrDropdownMenu.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrDropdownMenu, deps: [{ token: i0.Injector }, { token: POPOVER_HOST_ANCHOR, optional: true }, { token: ClrDropdownMenu, optional: true, skipSelf: true }, { token: DropdownFocusHandler }], target: i0.ɵɵFactoryTarget.Component });
-ClrDropdownMenu.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: { position: ["clrPosition", "position"] }, host: { properties: { "class.dropdown-menu": "true", "attr.role": "\"menu\"" } }, queries: [{ propertyName: "items", predicate: FocusableItem }], usesInheritance: true, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true });
+ClrDropdownMenu.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: { position: ["clrPosition", "position"] }, host: { properties: { "class.dropdown-menu": "true", "attr.role": "\"menu\"" } }, queries: [{ propertyName: "items", predicate: FocusableItem }], usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrDropdownMenu, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-dropdown-menu',
-                    template: ` <ng-content></ng-content> `,
+                    template: `<ng-content></ng-content>`,
                     host: {
                         '[class.dropdown-menu]': 'true',
                         '[attr.role]': '"menu"',
@@ -21394,7 +21485,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: i5.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: {
@@ -21403,7 +21494,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                         '[class.alert-info]': "this.currentAlertType == 'info'",
                         '[class.alert-success]': "this.currentAlertType == 'success'",
                         '[class.alert-warning]': "this.currentAlertType == 'warning'",
-                    }, 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<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 }'], 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" }]
         }], ctorParameters: function () { return [{ type: MultiAlertService }]; }, propDecorators: { allAlerts: [{
                 type: ContentChildren,
                 args: [ClrAlert]
@@ -21603,7 +21694,10 @@ ClrMainContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version
 ClrMainContainer.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrMainContainer, selector: "clr-main-container", host: { properties: { "class.main-container": "true" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrMainContainer, decorators: [{
             type: Directive,
-            args: [{ selector: 'clr-main-container', host: { '[class.main-container]': 'true' } }]
+            args: [{
+                    selector: 'clr-main-container',
+                    host: { '[class.main-container]': 'true' },
+                }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ResponsiveNavigationService }]; } });
 
 /*
@@ -21648,7 +21742,10 @@ ClrAriaCurrentLink.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versi
 ClrAriaCurrentLink.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrAriaCurrentLink, selector: "[clrAriaCurrentLink]", host: { properties: { "attr.aria-current": "ariaCurrent" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrAriaCurrentLink, decorators: [{
             type: Directive,
-            args: [{ selector: '[clrAriaCurrentLink]', host: { '[attr.aria-current]': 'ariaCurrent' } }]
+            args: [{
+                    selector: '[clrAriaCurrentLink]',
+                    host: { '[attr.aria-current]': 'ariaCurrent' },
+                }]
         }], ctorParameters: function () { return [{ type: i1$1.RouterLinkActive }]; } });
 
 /*
@@ -21662,7 +21759,9 @@ MainContainerWillyWonka.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0",
 MainContainerWillyWonka.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: MainContainerWillyWonka, selector: "clr-main-container", usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MainContainerWillyWonka, decorators: [{
             type: Directive,
-            args: [{ selector: 'clr-main-container' }]
+            args: [{
+                    selector: 'clr-main-container',
+                }]
         }] });
 
 /*
@@ -21688,7 +21787,9 @@ NavDetectionOompaLoompa.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0",
 NavDetectionOompaLoompa.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: NavDetectionOompaLoompa, selector: "clr-header", usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NavDetectionOompaLoompa, decorators: [{
             type: Directive,
-            args: [{ selector: 'clr-header' }]
+            args: [{
+                    selector: 'clr-header',
+                }]
         }], ctorParameters: function () {
         return [{ type: i0.ChangeDetectorRef }, { type: MainContainerWillyWonka, decorators: [{
                         type: Optional
@@ -22131,7 +22232,9 @@ ClrNavLevel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13
 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]' }]
+            args: [{
+                    selector: '[clr-nav-level]',
+                }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
                         type: Inject,
@@ -22250,7 +22353,9 @@ TabsWillyWonka.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version:
 TabsWillyWonka.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: TabsWillyWonka, selector: "clr-tabs", usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TabsWillyWonka, decorators: [{
             type: Directive,
-            args: [{ selector: 'clr-tabs' }]
+            args: [{
+                    selector: 'clr-tabs',
+                }]
         }] });
 
 /*
@@ -22275,7 +22380,9 @@ ActiveOompaLoompa.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versio
 ActiveOompaLoompa.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ActiveOompaLoompa, selector: "[clrTabLink], clr-tab-content", usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ActiveOompaLoompa, decorators: [{
             type: Directive,
-            args: [{ selector: '[clrTabLink], clr-tab-content' }]
+            args: [{
+                    selector: '[clrTabLink], clr-tab-content',
+                }]
         }], ctorParameters: function () {
         return [{ type: i0.ChangeDetectorRef }, { type: TabsWillyWonka, decorators: [{
                         type: Optional
@@ -22570,12 +22677,12 @@ class ClrTab {
     }
 }
 ClrTab.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrTab, deps: [{ token: IfActiveService }, { token: IF_ACTIVE_ID }, { token: TabsService }], target: i0.ɵɵFactoryTarget.Component });
-ClrTab.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrTab, selector: "clr-tab", providers: [IF_ACTIVE_ID_PROVIDER, AriaService], queries: [{ propertyName: "tabLink", first: true, predicate: ClrTabLink, descendants: true, static: true }, { propertyName: "tabContent", first: true, predicate: ClrTabContent, descendants: true, static: true }], ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true });
+ClrTab.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrTab, selector: "clr-tab", providers: [IF_ACTIVE_ID_PROVIDER, AriaService], queries: [{ propertyName: "tabLink", first: true, predicate: ClrTabLink, descendants: true, static: true }, { propertyName: "tabContent", first: true, predicate: ClrTabContent, descendants: true, static: true }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrTab, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-tab',
-                    template: ` <ng-content></ng-content> `,
+                    template: `<ng-content></ng-content>`,
                     providers: [IF_ACTIVE_ID_PROVIDER, AriaService],
                 }]
         }], ctorParameters: function () {
@@ -22599,12 +22706,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
 class ClrTabOverflowContent {
 }
 ClrTabOverflowContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrTabOverflowContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrTabOverflowContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrTabOverflowContent, selector: "clr-tab-overflow-content", host: { properties: { "class.dropdown-menu": "true" } }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true });
+ClrTabOverflowContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrTabOverflowContent, selector: "clr-tab-overflow-content", host: { properties: { "class.dropdown-menu": "true" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrTabOverflowContent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-tab-overflow-content',
-                    template: ` <ng-content></ng-content> `,
+                    template: `<ng-content></ng-content>`,
                     host: {
                         '[class.dropdown-menu]': 'true',
                     },
@@ -22805,8 +22912,7 @@ ClrTabs.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0
               <ng-container
                 *ngIf="link.tabsId === tabsId && link.inOverflow"
                 [ngTemplateOutlet]="link.templateRefContainer.template"
-              >
-              </ng-container>
+              ></ng-container>
             </ng-container>
           </clr-tab-overflow-content>
         </div>
@@ -22870,8 +22976,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
               <ng-container
                 *ngIf="link.tabsId === tabsId && link.inOverflow"
                 [ngTemplateOutlet]="link.templateRefContainer.template"
-              >
-              </ng-container>
+              ></ng-container>
             </ng-container>
           </clr-tab-overflow-content>
         </div>
@@ -23262,7 +23367,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]=\"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: [
+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    ></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' })),
@@ -23277,7 +23382,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]=\"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" }]
+                    ], 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    ></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']
@@ -23300,12 +23405,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
 class ClrVerticalNavGroupChildren {
 }
 ClrVerticalNavGroupChildren.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrVerticalNavGroupChildren, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrVerticalNavGroupChildren.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrVerticalNavGroupChildren, selector: "clr-vertical-nav-group-children", ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true });
+ClrVerticalNavGroupChildren.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrVerticalNavGroupChildren, selector: "clr-vertical-nav-group-children", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrVerticalNavGroupChildren, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-vertical-nav-group-children',
-                    template: ` <ng-content></ng-content> `,
+                    template: `<ng-content></ng-content>`,
                 }]
         }] });
 
@@ -23327,7 +23432,10 @@ ClrVerticalNavIcon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versi
 ClrVerticalNavIcon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrVerticalNavIcon, selector: "[clrVerticalNavIcon]", host: { classAttribute: "nav-icon" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrVerticalNavIcon, decorators: [{
             type: Directive,
-            args: [{ selector: '[clrVerticalNavIcon]', host: { class: 'nav-icon' } }]
+            args: [{
+                    selector: '[clrVerticalNavIcon]',
+                    host: { class: 'nav-icon' },
+                }]
         }], ctorParameters: function () { return [{ type: VerticalNavIconService }]; } });
 
 /*
@@ -23657,7 +23765,9 @@ ClrModalBody.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "1
 ClrModalBody.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrModalBody, selector: ".modal-body", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrModalBody, decorators: [{
             type: Directive,
-            args: [{ selector: '.modal-body' }]
+            args: [{
+                    selector: '.modal-body',
+                }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 
 /*
@@ -23933,12 +24043,12 @@ ClrTooltip.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "1
         // AriaService in layout/tabs/providers might be a good starting point.
         UNIQUE_ID_PROVIDER,
         TooltipIdService,
-    ], ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true });
+    ], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrTooltip, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-tooltip',
-                    template: ` <ng-content></ng-content> `,
+                    template: `<ng-content></ng-content>`,
                     host: {
                         '[class.tooltip]': 'true',
                     },
@@ -23953,6 +24063,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }] });
 
+/*
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+function assertNever(value) {
+    throw new Error(`Unhandled value: ${value}`);
+}
+
 /*
  * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
@@ -23960,46 +24079,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
  */
 const POSITIONS = ['bottom-left', 'bottom-right', 'top-left', 'top-right', 'right', 'left'];
 const SIZES = ['xs', 'sm', 'md', 'lg'];
+const defaultPosition = 'right';
+const defaultSize = 'sm';
 class ClrTooltipContent extends AbstractPopover {
     constructor(injector, parentHost, uniqueId, tooltipIdService) {
         super(injector, parentHost);
         this.uniqueId = uniqueId;
         this.tooltipIdService = tooltipIdService;
+        this._position = defaultPosition;
+        this._size = defaultSize;
         if (!parentHost) {
             throw new Error('clr-tooltip-content should only be used inside of a clr-tooltip');
         }
-        // Defaults
-        this.position = 'right';
-        this.size = 'sm';
         // Set the default id in case consumer does not supply a custom id.
-        this.updateId(uniqueId);
+        this.id = uniqueId;
     }
     get id() {
         return this._id;
     }
     set id(value) {
-        this.updateId(value || '');
-    }
-    updateId(id) {
+        const id = value || '';
         this._id = id;
         this.tooltipIdService.updateId(id);
     }
     get position() {
         return this._position;
     }
-    set position(position) {
-        // Ugh
-        this.renderer.removeClass(this.el.nativeElement, 'tooltip-' + this.position);
-        if (position && POSITIONS.indexOf(position) > -1) {
-            this._position = position;
-        }
-        else {
-            this._position = 'right';
-        }
-        // Ugh
-        this.renderer.addClass(this.el.nativeElement, 'tooltip-' + this.position);
+    set position(value) {
+        const oldPosition = this._position;
+        const newPosition = POSITIONS.includes(value) ? value : defaultPosition;
+        this._position = newPosition;
+        this.updateCssClass({ oldClass: `tooltip-${oldPosition}`, newClass: `tooltip-${newPosition}` });
         // set the popover values based on direction
-        switch (position) {
+        switch (newPosition) {
             case 'top-right':
                 this.anchorPoint = Point.TOP_CENTER;
                 this.popoverPoint = Point.LEFT_BOTTOM;
@@ -24025,34 +24137,30 @@ class ClrTooltipContent extends AbstractPopover {
                 this.popoverPoint = Point.RIGHT_TOP;
                 break;
             default:
-                this.anchorPoint = Point.RIGHT_CENTER;
-                this.popoverPoint = Point.LEFT_TOP;
-                break;
+                assertNever(newPosition);
         }
     }
     get size() {
         return this._size;
     }
-    set size(size) {
-        // Ugh
-        this.renderer.removeClass(this.el.nativeElement, 'tooltip-' + this.size);
-        if (size && SIZES.indexOf(size) > -1) {
-            this._size = size;
-        }
-        else {
-            this._size = 'sm';
-        }
-        // Ugh
-        this.renderer.addClass(this.el.nativeElement, 'tooltip-' + this.size);
+    set size(value) {
+        const oldSize = this._size;
+        const newSize = SIZES.includes(value) ? value : defaultSize;
+        this._size = newSize;
+        this.updateCssClass({ oldClass: `tooltip-${oldSize}`, newClass: `tooltip-${newSize}` });
+    }
+    updateCssClass({ oldClass, newClass }) {
+        this.renderer.removeClass(this.el.nativeElement, oldClass);
+        this.renderer.addClass(this.el.nativeElement, newClass);
     }
 }
 ClrTooltipContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrTooltipContent, deps: [{ token: i0.Injector }, { token: POPOVER_HOST_ANCHOR, optional: true }, { token: UNIQUE_ID }, { token: TooltipIdService }], target: i0.ɵɵFactoryTarget.Component });
-ClrTooltipContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrTooltipContent, selector: "clr-tooltip-content", inputs: { id: "id", position: ["clrPosition", "position"], size: ["clrSize", "size"] }, host: { properties: { "class.tooltip-content": "true", "style.opacity": "1", "attr.role": "\"tooltip\"", "id": "id" } }, usesInheritance: true, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true });
+ClrTooltipContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrTooltipContent, selector: "clr-tooltip-content", inputs: { id: "id", position: ["clrPosition", "position"], size: ["clrSize", "size"] }, host: { properties: { "class.tooltip-content": "true", "style.opacity": "1", "attr.role": "\"tooltip\"", "id": "id" } }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrTooltipContent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-tooltip-content',
-                    template: ` <ng-content></ng-content> `,
+                    template: `<ng-content></ng-content>`,
                     host: {
                         '[class.tooltip-content]': 'true',
                         '[style.opacity]': '1',
@@ -24447,12 +24555,12 @@ class ClrTimeline {
     }
 }
 ClrTimeline.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrTimeline, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrTimeline.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrTimeline, selector: "clr-timeline", inputs: { layout: ["clrLayout", "layout"] }, host: { properties: { "class.clr-timeline": "true", "class.clr-timeline-vertical": "this.isVertical" } }, providers: [TimelineIconAttributeService], ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true });
+ClrTimeline.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrTimeline, selector: "clr-timeline", inputs: { layout: ["clrLayout", "layout"] }, host: { properties: { "class.clr-timeline": "true", "class.clr-timeline-vertical": "this.isVertical" } }, providers: [TimelineIconAttributeService], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrTimeline, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-timeline',
-                    template: ` <ng-content></ng-content> `,
+                    template: `<ng-content></ng-content>`,
                     host: { '[class.clr-timeline]': 'true' },
                     providers: [TimelineIconAttributeService],
                 }]
@@ -24482,12 +24590,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
 class ClrTimelineStepTitle {
 }
 ClrTimelineStepTitle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrTimelineStepTitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrTimelineStepTitle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrTimelineStepTitle, selector: "clr-timeline-step-title", host: { properties: { "class.clr-timeline-step-title": "true", "attr.aria-hidden": "true" } }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true });
+ClrTimelineStepTitle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrTimelineStepTitle, selector: "clr-timeline-step-title", host: { properties: { "class.clr-timeline-step-title": "true", "attr.aria-hidden": "true" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrTimelineStepTitle, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-timeline-step-title',
-                    template: ` <ng-content></ng-content> `,
+                    template: `<ng-content></ng-content>`,
                     host: { '[class.clr-timeline-step-title]': 'true', '[attr.aria-hidden]': 'true' },
                 }]
         }] });
@@ -24529,7 +24637,7 @@ ClrTimelineStep.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
     <ng-content select="clr-timeline-step-header"></ng-content>
     <span class="clr-sr-only">{{ stepTitleText }}</span>
     <ng-container *ngIf="!isProcessing; else processing">
-      <cds-icon [attr.status]="iconStatus" [attr.shape]="iconShape" [attr.aria-label]="iconAriaLabel"> </cds-icon>
+      <cds-icon [attr.status]="iconStatus" [attr.shape]="iconShape" [attr.aria-label]="iconAriaLabel"></cds-icon>
     </ng-container>
     <div class="clr-timeline-step-body">
       <ng-content select="clr-timeline-step-title"></ng-content>
@@ -24548,7 +24656,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
     <ng-content select="clr-timeline-step-header"></ng-content>
     <span class="clr-sr-only">{{ stepTitleText }}</span>
     <ng-container *ngIf="!isProcessing; else processing">
-      <cds-icon [attr.status]="iconStatus" [attr.shape]="iconShape" [attr.aria-label]="iconAriaLabel"> </cds-icon>
+      <cds-icon [attr.status]="iconStatus" [attr.shape]="iconShape" [attr.aria-label]="iconAriaLabel"></cds-icon>
     </ng-container>
     <div class="clr-timeline-step-body">
       <ng-content select="clr-timeline-step-title"></ng-content>
@@ -24582,12 +24690,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
 class ClrTimelineStepDescription {
 }
 ClrTimelineStepDescription.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrTimelineStepDescription, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrTimelineStepDescription.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrTimelineStepDescription, selector: "clr-timeline-step-description", host: { properties: { "class.clr-timeline-step-description": "true" } }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true });
+ClrTimelineStepDescription.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrTimelineStepDescription, selector: "clr-timeline-step-description", host: { properties: { "class.clr-timeline-step-description": "true" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrTimelineStepDescription, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-timeline-step-description',
-                    template: ` <ng-content></ng-content> `,
+                    template: `<ng-content></ng-content>`,
                     host: { '[class.clr-timeline-step-description]': 'true' },
                 }]
         }] });
@@ -24600,12 +24708,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
 class ClrTimelineStepHeader {
 }
 ClrTimelineStepHeader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrTimelineStepHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrTimelineStepHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrTimelineStepHeader, selector: "clr-timeline-step-header", host: { properties: { "class.clr-timeline-step-header": "true" } }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true });
+ClrTimelineStepHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrTimelineStepHeader, selector: "clr-timeline-step-header", host: { properties: { "class.clr-timeline-step-header": "true" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrTimelineStepHeader, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-timeline-step-header',
-                    template: ` <ng-content></ng-content> `,
+                    template: `<ng-content></ng-content>`,
                     host: { '[class.clr-timeline-step-header]': 'true' },
                 }]
         }] });
@@ -25756,7 +25864,9 @@ ClrWizardPageButtons.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", ver
 ClrWizardPageButtons.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrWizardPageButtons, selector: "[clrPageButtons]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrWizardPageButtons, decorators: [{
             type: Directive,
-            args: [{ selector: '[clrPageButtons]' }]
+            args: [{
+                    selector: '[clrPageButtons]',
+                }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
 /*
@@ -25773,7 +25883,9 @@ ClrWizardPageHeaderActions.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0
 ClrWizardPageHeaderActions.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrWizardPageHeaderActions, selector: "[clrPageHeaderActions]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrWizardPageHeaderActions, decorators: [{
             type: Directive,
-            args: [{ selector: '[clrPageHeaderActions]' }]
+            args: [{
+                    selector: '[clrPageHeaderActions]',
+                }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
 /*
@@ -25790,7 +25902,9 @@ ClrWizardPageNavTitle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", ve
 ClrWizardPageNavTitle.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrWizardPageNavTitle, selector: "[clrPageNavTitle]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrWizardPageNavTitle, decorators: [{
             type: Directive,
-            args: [{ selector: '[clrPageNavTitle]' }]
+            args: [{
+                    selector: '[clrPageNavTitle]',
+                }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
 /*
@@ -25807,7 +25921,9 @@ ClrWizardPageTitle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versi
 ClrWizardPageTitle.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrWizardPageTitle, selector: "[clrPageTitle]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrWizardPageTitle, decorators: [{
             type: Directive,
-            args: [{ selector: '[clrPageTitle]' }]
+            args: [{
+                    selector: '[clrPageTitle]',
+                }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
 /*
@@ -27324,7 +27440,9 @@ ClrWizardCustomTags.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", vers
 ClrWizardCustomTags.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: ClrWizardCustomTags, selector: "clr-wizard-title, clr-wizard-pagetitle", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrWizardCustomTags, decorators: [{
             type: Directive,
-            args: [{ selector: 'clr-wizard-title, clr-wizard-pagetitle' }]
+            args: [{
+                    selector: 'clr-wizard-title, clr-wizard-pagetitle',
+                }]
         }] });
 
 /*