@clr/angular 17.3.0 → 17.4.0

package/fesm2020/clr-angular.mjs

@@ -223,19 +223,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                 }]
         }] });
 
-/*
- * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-var AccordionStatus;
-(function (AccordionStatus) {
-    AccordionStatus["Inactive"] = "inactive";
-    AccordionStatus["Error"] = "error";
-    AccordionStatus["Complete"] = "complete";
-})(AccordionStatus || (AccordionStatus = {}));
-
 /*
  * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
  * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
@@ -328,6 +315,8 @@ const commonStringsDefault = {
     datagridFilterDialogAriaLabel: 'Filter dialog',
     columnSeparatorAriaLabel: 'Column resize handle',
     columnSeparatorDescription: 'Use left or right key to resize the column',
+    fromLabel: 'From',
+    toLabel: 'To',
     // Alert
     alertCloseButtonAriaLabel: 'Close alert',
     alertNextAlertAriaLabel: 'Next alert message, {CURRENT} of {COUNT}',
@@ -373,6 +362,7 @@ const commonStringsDefault = {
     datagridExpandableRowContent: 'Expandable row content',
     datagridExpandableRowsHelperText: `Screen reader table commands may not work for viewing expanded content, please use your screen reader's browse mode to read the content exposed by this button`,
     // Wizard
+    wizardStep: 'Step',
     wizardStepSuccess: 'Completed',
     wizardStepError: 'Error',
     wizardStepnavAriaLabel: 'Step navigation',
@@ -394,6 +384,9 @@ const commonStringsDefault = {
     fileCount: '{COUNT} files',
     clearFile: 'Clear {FILE}',
     clearFiles: 'Clear {COUNT} files',
+    // Tree
+    selectedTreeNode: 'selected',
+    unselectedTreeNode: 'unselected',
 };
 
 /*
@@ -441,6 +434,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                 }]
         }] });
 
+/*
+ * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+var AccordionStatus;
+(function (AccordionStatus) {
+    AccordionStatus["Inactive"] = "inactive";
+    AccordionStatus["Error"] = "error";
+    AccordionStatus["Complete"] = "complete";
+})(AccordionStatus || (AccordionStatus = {}));
+
 /*
  * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
  * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
@@ -570,8 +576,6 @@ class ClrAccordionPanel {
         this.disabled = false;
         this.panelOpen = false;
         this.panelOpenChange = new EventEmitter();
-        this.AccordionStatus = AccordionStatus;
-        this.isAccordion = true;
         this._id = uniqueIdFactory();
     }
     get id() {
@@ -647,10 +651,10 @@ class ClrAccordionPanel {
     }
 }
 ClrAccordionPanel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrAccordionPanel, deps: [{ token: ClrCommonStringsService }, { token: AccordionService }, { token: IfExpandService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ClrAccordionPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrAccordionPanel, selector: "clr-accordion-panel", inputs: { disabled: ["clrAccordionPanelDisabled", "disabled"], panelOpen: ["clrAccordionPanelOpen", "panelOpen"] }, outputs: { panelOpenChange: "clrAccordionPanelOpenChange" }, host: { properties: { "class.clr-accordion-panel": "true", "class.clr-accordion-panel-disabled": "this.disabled" } }, providers: [IfExpandService], queries: [{ propertyName: "accordionDescription", predicate: ClrAccordionDescription }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\">{{panelNumber}}.</span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n      <div class=\"clr-sr-only\" role=\"status\">\n        <ng-container *ngIf=\"panel.status === AccordionStatus.Error\"> {{ stepErrorText(panelNumber)}} </ng-container>\n        <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">\n          {{ stepCompleteText(panelNumber)}}\n        </ng-container>\n      </div>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      class=\"clr-accordion-content-region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], animations: panelAnimation, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ClrAccordionPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrAccordionPanel, selector: "clr-accordion-panel", inputs: { disabled: ["clrAccordionPanelDisabled", "disabled"], panelOpen: ["clrAccordionPanelOpen", "panelOpen"] }, outputs: { panelOpenChange: "clrAccordionPanelOpenChange" }, host: { properties: { "class.clr-accordion-panel": "true", "class.clr-accordion-panel-disabled": "this.disabled" } }, providers: [IfExpandService], queries: [{ propertyName: "accordionDescription", predicate: ClrAccordionDescription }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      class=\"clr-accordion-content-region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], animations: panelAnimation, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrAccordionPanel, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-accordion-panel', host: { '[class.clr-accordion-panel]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, animations: panelAnimation, providers: [IfExpandService], template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\">{{panelNumber}}.</span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n      <div class=\"clr-sr-only\" role=\"status\">\n        <ng-container *ngIf=\"panel.status === AccordionStatus.Error\"> {{ stepErrorText(panelNumber)}} </ng-container>\n        <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">\n          {{ stepCompleteText(panelNumber)}}\n        </ng-container>\n      </div>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      class=\"clr-accordion-content-region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n" }]
+            args: [{ selector: 'clr-accordion-panel', host: { '[class.clr-accordion-panel]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, animations: panelAnimation, providers: [IfExpandService], template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      class=\"clr-accordion-content-region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n" }]
         }], ctorParameters: function () { return [{ type: ClrCommonStringsService }, { type: AccordionService }, { type: IfExpandService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
                 type: Input,
                 args: ['clrAccordionPanelDisabled']
@@ -968,6 +972,9 @@ class StepperModel extends AccordionModel {
             this._panels[panelId].open = !this._panels[panelId].open;
         }
     }
+    navigateToPreviousPanel(currentPanelId) {
+        this.openPreviousPanel(this._panels[currentPanelId].id);
+    }
     navigateToNextPanel(currentPanelId, currentPanelValid = true) {
         if (currentPanelValid) {
             this.completePanel(currentPanelId);
@@ -1011,6 +1018,9 @@ class StepperModel extends AccordionModel {
     getNextPanel(currentPanelId) {
         return this.panels.find(s => s.index === this._panels[currentPanelId].index + 1);
     }
+    getPreviousPanel(currentPanelId) {
+        return this.panels.find(s => s.index === this._panels[currentPanelId].index - 1);
+    }
     resetAllFuturePanels(panelId) {
         this.panels.filter(panel => panel.index >= this._panels[panelId].index).forEach(panel => this.resetPanel(panel.id));
     }
@@ -1049,6 +1059,15 @@ class StepperModel extends AccordionModel {
             this._panels[nextPanel.id].disabled = true;
         }
     }
+    openPreviousPanel(currentPanelId) {
+        const prevPanel = this.getPreviousPanel(currentPanelId);
+        if (prevPanel) {
+            this._panels[currentPanelId].open = false;
+            this._panels[currentPanelId].disabled = false;
+            this._panels[prevPanel.id].open = true;
+            this._panels[prevPanel.id].disabled = true;
+        }
+    }
     setPanelError(panelId) {
         this.resetAllFuturePanels(panelId);
         this._panels[panelId].open = true;
@@ -1095,6 +1114,11 @@ class StepperService extends AccordionService {
         this.accordion.setPanelsWithErrors(ids);
         this.emitUpdatedPanels();
     }
+    navigateToPreviousPanel(currentPanelId) {
+        this.accordion.navigateToPreviousPanel(currentPanelId);
+        this.updatePreviousStep(currentPanelId);
+        this.emitUpdatedPanels();
+    }
     navigateToNextPanel(currentPanelId, currentPanelValid = true) {
         this.accordion.navigateToNextPanel(currentPanelId, currentPanelValid);
         this.updateNextStep(currentPanelId, currentPanelValid);
@@ -1113,6 +1137,12 @@ class StepperService extends AccordionService {
             this._activeStepChanges.next(currentPanelId);
         }
     }
+    updatePreviousStep(currentPanelId) {
+        const prevPanel = this.accordion.getPreviousPanel(currentPanelId);
+        if (prevPanel) {
+            this._activeStepChanges.next(prevPanel.id);
+        }
+    }
     getAllCompletedPanelChanges() {
         return this._panelsChanges.pipe(map(() => this.accordion.allPanelsCompleted), distinctUntilChanged());
     }
@@ -1137,7 +1167,7 @@ class ClrStepperPanel extends ClrAccordionPanel {
         this.formGroupName = formGroupName;
         this.ngModelGroup = ngModelGroup;
         this.stepperService = stepperService;
-        this.isAccordion = false;
+        this.AccordionStatus = AccordionStatus;
         this.subscriptions = [];
     }
     get id() {
@@ -1178,9 +1208,7 @@ class ClrStepperPanel extends ClrAccordionPanel {
         this.subscriptions.push(this.stepperService.activeStep
             .pipe(filter(panelId => isPlatformBrowser(this.platformId) && panelId === this.id))
             .subscribe(() => {
-            //Adding timeout so that the status of the previous step is read by Voice Over on Safari,
-            //before focusing on the next stepper panel header
-            setTimeout(() => this.headerButton.nativeElement.focus(), 1500);
+            this.headerButton.nativeElement.focus();
         }));
     }
     triggerAllFormControlValidationIfError(panel) {
@@ -1190,10 +1218,10 @@ class ClrStepperPanel extends ClrAccordionPanel {
     }
 }
 ClrStepperPanel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrStepperPanel, deps: [{ token: PLATFORM_ID }, { token: ClrCommonStringsService }, { token: i1.FormGroupName, optional: true }, { token: i1.NgModelGroup, optional: true }, { token: StepperService }, { token: IfExpandService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ClrStepperPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrStepperPanel, selector: "clr-stepper-panel", host: { properties: { "class.clr-accordion-panel": "true" } }, providers: [IfExpandService], viewQueries: [{ propertyName: "headerButton", first: true, predicate: ["headerButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\">{{panelNumber}}.</span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n      <div class=\"clr-sr-only\" role=\"status\">\n        <ng-container *ngIf=\"panel.status === AccordionStatus.Error\"> {{ stepErrorText(panelNumber)}} </ng-container>\n        <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">\n          {{ stepCompleteText(panelNumber)}}\n        </ng-container>\n      </div>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      class=\"clr-accordion-content-region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], animations: stepAnimation, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ClrStepperPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrStepperPanel, selector: "clr-stepper-panel", host: { properties: { "class.clr-stepper-panel": "true" } }, providers: [IfExpandService], viewQueries: [{ propertyName: "headerButton", first: true, predicate: ["headerButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header clr-stepper-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [attr.aria-disabled]=\"panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-step-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle clr-step-angle\"></cds-icon>\n          <cds-icon\n            status=\"danger\"\n            *ngIf=\"panel.status === AccordionStatus.Error\"\n            shape=\"exclamation-circle\"\n            class=\"clr-step-error-icon\"\n          ></cds-icon>\n          <cds-icon\n            status=\"success\"\n            *ngIf=\"panel.status === AccordionStatus.Complete\"\n            shape=\"check-circle\"\n            class=\"clr-step-complete-icon\"\n          ></cds-icon>\n        </span>\n        <span class=\"clr-step-title-wrapper\">\n          <span class=\"clr-step-number\">{{panelNumber}}.</span>\n          <ng-content select=\"clr-step-title\"></ng-content>\n        </span>\n        <ng-content select=\"clr-step-description\"></ng-content>\n      </button>\n      <div class=\"clr-sr-only\" role=\"status\">\n        <ng-container *ngIf=\"panel.status === AccordionStatus.Error\"> {{ stepErrorText(panelNumber)}} </ng-container>\n        <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">\n          {{ stepCompleteText(panelNumber)}}\n        </ng-container>\n      </div>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      class=\"clr-accordion-content-region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], animations: stepAnimation, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrStepperPanel, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-stepper-panel', host: { '[class.clr-accordion-panel]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, animations: stepAnimation, providers: [IfExpandService], template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\">{{panelNumber}}.</span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n      <div class=\"clr-sr-only\" role=\"status\">\n        <ng-container *ngIf=\"panel.status === AccordionStatus.Error\"> {{ stepErrorText(panelNumber)}} </ng-container>\n        <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">\n          {{ stepCompleteText(panelNumber)}}\n        </ng-container>\n      </div>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      class=\"clr-accordion-content-region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n" }]
+            args: [{ selector: 'clr-stepper-panel', host: { '[class.clr-stepper-panel]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, animations: stepAnimation, providers: [IfExpandService], template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header clr-stepper-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [attr.aria-disabled]=\"panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-step-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle clr-step-angle\"></cds-icon>\n          <cds-icon\n            status=\"danger\"\n            *ngIf=\"panel.status === AccordionStatus.Error\"\n            shape=\"exclamation-circle\"\n            class=\"clr-step-error-icon\"\n          ></cds-icon>\n          <cds-icon\n            status=\"success\"\n            *ngIf=\"panel.status === AccordionStatus.Complete\"\n            shape=\"check-circle\"\n            class=\"clr-step-complete-icon\"\n          ></cds-icon>\n        </span>\n        <span class=\"clr-step-title-wrapper\">\n          <span class=\"clr-step-number\">{{panelNumber}}.</span>\n          <ng-content select=\"clr-step-title\"></ng-content>\n        </span>\n        <ng-content select=\"clr-step-description\"></ng-content>\n      </button>\n      <div class=\"clr-sr-only\" role=\"status\">\n        <ng-container *ngIf=\"panel.status === AccordionStatus.Error\"> {{ stepErrorText(panelNumber)}} </ng-container>\n        <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">\n          {{ stepCompleteText(panelNumber)}}\n        </ng-container>\n      </div>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      class=\"clr-accordion-content-region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -1215,6 +1243,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
 var ClrStepButtonType;
 (function (ClrStepButtonType) {
     ClrStepButtonType["Next"] = "next";
+    ClrStepButtonType["Previous"] = "previous";
     ClrStepButtonType["Submit"] = "submit";
 })(ClrStepButtonType || (ClrStepButtonType = {}));
 class ClrStepButton {
@@ -1223,16 +1252,22 @@ class ClrStepButton {
         this.stepperService = stepperService;
         this.type = ClrStepButtonType.Next;
         this.submitButton = false;
+        this.previousButton = false;
     }
     ngOnInit() {
         this.submitButton = this.type === ClrStepButtonType.Submit;
+        this.previousButton = this.type === ClrStepButtonType.Previous;
     }
     navigateToNextPanel() {
+        if (this.previousButton) {
+            this.stepperService.navigateToPreviousPanel(this.clrStep.id);
+            return;
+        }
         this.stepperService.navigateToNextPanel(this.clrStep.id, this.clrStep.formGroup.valid);
     }
 }
 ClrStepButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrStepButton, deps: [{ token: ClrStepperPanel }, { token: StepperService }], target: i0.ɵɵFactoryTarget.Directive });
-ClrStepButton.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", type: ClrStepButton, selector: "[clrStepButton]", inputs: { type: ["clrStepButton", "type"] }, host: { listeners: { "click": "navigateToNextPanel()" }, properties: { "class.clr-step-button": "true", "class.btn": "true", "type": "'button'", "class.btn-primary": "this.submitButton" } }, ngImport: i0 });
+ClrStepButton.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", type: ClrStepButton, selector: "[clrStepButton]", inputs: { type: ["clrStepButton", "type"] }, host: { listeners: { "click": "navigateToNextPanel()" }, properties: { "class.clr-step-button": "true", "class.btn": "true", "type": "'button'", "class.btn-success": "this.submitButton", "class.btn-link": "this.previousButton" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrStepButton, decorators: [{
             type: Directive,
             args: [{
@@ -1248,7 +1283,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                 args: ['clrStepButton']
             }], submitButton: [{
                 type: HostBinding,
-                args: ['class.btn-primary']
+                args: ['class.btn-success']
+            }], previousButton: [{
+                type: HostBinding,
+                args: ['class.btn-link']
             }], navigateToNextPanel: [{
                 type: HostListener,
                 args: ['click']
@@ -2229,6 +2267,7 @@ class ClrPopoverContent {
         this.subscriptions = [];
         this.removeClickListenerFn = null;
         this.shouldRealign = false;
+        this.previousContentHeight = null;
         // Check-collector pattern:
         // In order to get accurate content height/width values, we cannot calculate alignment offsets until
         // after the projected content has stabilized.
@@ -2250,9 +2289,14 @@ class ClrPopoverContent {
         this.smartEventsService.scrollToClose = !!scrollToClose;
     }
     ngAfterContentChecked() {
-        if (this.smartOpenService.open && this.view && this.shouldRealign) {
-            // Channel content-check event through the check-collector
-            this.checkCollector.emit();
+        if (this.smartOpenService.open && this.view) {
+            const rootNodeOffsetHeight = this.view.rootNodes[0].offsetHeight;
+            if (this.shouldRealign ||
+                (this.previousContentHeight !== null && this.previousContentHeight !== rootNodeOffsetHeight)) {
+                // Channel content-check event through the check-collector
+                this.previousContentHeight = rootNodeOffsetHeight;
+                this.checkCollector.emit();
+            }
         }
     }
     ngAfterViewInit() {
@@ -2368,7 +2412,7 @@ class ClrPopoverOpenCloseButton {
         this.smartOpenService = smartOpenService;
         this.openCloseChange = new EventEmitter();
         this.subscriptions = [];
-        this.subscriptions.push(this.smartOpenService.openChange.subscribe(change => {
+        this.subscriptions.push(smartOpenService.openChange.subscribe(change => {
             this.openCloseChange.next(change);
         }));
     }
@@ -3321,7 +3365,7 @@ class ClrIfActive {
         this.activeChange = new EventEmitter(false);
         this.wasActive = false;
         this.checkAndUpdateView(ifActiveService.current);
-        this.subscription = this.ifActiveService.currentChange.subscribe(newCurrentId => {
+        this.subscription = ifActiveService.currentChange.subscribe(newCurrentId => {
             this.checkAndUpdateView(newCurrentId);
         });
     }
@@ -3411,7 +3455,7 @@ class ClrIfOpen {
          * used with de-structured / de-sugared syntax.
          */
         this.openChange = new EventEmitter(false);
-        this.subscription = this.toggleService.openChange.subscribe(change => {
+        this.subscription = toggleService.openChange.subscribe(change => {
             this.updateView(change);
             this.openChange.emit(change);
         });
@@ -3481,7 +3525,7 @@ class ClrIfExpanded {
         this._subscriptions = [];
         this._subscriptions.push(expand.expandChange.subscribe(() => {
             this.updateView();
-            this.expandedChange.emit(this.expand.expanded);
+            this.expandedChange.emit(expand.expanded);
         }));
     }
     get expanded() {
@@ -3638,7 +3682,7 @@ class ClrFocusOnViewInit {
         this.renderer = renderer;
         this.directFocus = true; // true if the element gets focused without need to set tabindex;
         this.destroy$ = new Subject();
-        this._isEnabled = this.focusOnViewInit;
+        this._isEnabled = focusOnViewInit;
         // Angular compiler doesn't understand the type Document
         // when working out the metadata for injectable parameters,
         // even though it understands the injection token DOCUMENT
@@ -3649,8 +3693,8 @@ class ClrFocusOnViewInit {
             .subscribe(() => {
             if (!this.directFocus) {
                 // manually set attributes and styles should be removed
-                this.renderer.removeAttribute(this.el.nativeElement, 'tabindex');
-                this.renderer.setStyle(this.el.nativeElement, 'outline', null);
+                renderer.removeAttribute(el.nativeElement, 'tabindex');
+                renderer.setStyle(el.nativeElement, 'outline', null);
             }
         }));
     }
@@ -4500,12 +4544,11 @@ var CONTROL_STATE;
 })(CONTROL_STATE || (CONTROL_STATE = {}));
 class IfControlStateService {
     constructor(ngControlService) {
-        this.ngControlService = ngControlService;
         this.subscriptions = [];
         // Implement our own status changes observable, since Angular controls don't
         this._statusChanges = new BehaviorSubject(CONTROL_STATE.NONE);
         // Wait for the control to be available
-        this.subscriptions.push(this.ngControlService.controlChanges.subscribe(control => {
+        this.subscriptions.push(ngControlService.controlChanges.subscribe(control => {
             if (control) {
                 this.control = control;
                 // Subscribe to the status change events, only after touched
@@ -4755,14 +4798,14 @@ class ClrAbstractContainer {
         this.ngControlService = ngControlService;
         this._dynamic = false;
         this.subscriptions = [];
-        this.subscriptions.push(this.ifControlStateService.statusChanges.subscribe((state) => {
+        this.subscriptions.push(ifControlStateService.statusChanges.subscribe((state) => {
             this.state = state;
             // Make sure everything is updated before dispatching the values for helpers
             setTimeout(() => {
                 this.updateHelpers();
             });
         }));
-        this.subscriptions.push(this.ngControlService.controlChanges.subscribe(control => {
+        this.subscriptions.push(ngControlService.controlChanges.subscribe(control => {
             this.control = control;
         }));
     }
@@ -5015,10 +5058,10 @@ class WrappedFormControl {
         this.vcr = vcr;
         this.wrapperType = wrapperType;
         this.ngControl = ngControl;
-        this.index = 0;
-        this.subscriptions = [];
         this.renderer = renderer;
         this.el = el;
+        this.index = 0;
+        this.subscriptions = [];
         if (injector) {
             this.ngControlService = injector.get(NgControlService, null);
             this.ifControlStateService = injector.get(IfControlStateService, null);
@@ -5239,12 +5282,12 @@ class AbstractIfState {
         this.subscriptions = [];
         this.displayedContent = false;
         if (ngControlService) {
-            this.subscriptions.push(this.ngControlService.controlChanges.subscribe(control => {
+            this.subscriptions.push(ngControlService.controlChanges.subscribe(control => {
                 this.control = control;
             }));
         }
         if (ifControlStateService) {
-            this.subscriptions.push(this.ifControlStateService.statusChanges.subscribe((state) => {
+            this.subscriptions.push(ifControlStateService.statusChanges.subscribe((state) => {
                 this.handleState(state);
             }));
         }
@@ -6801,7 +6844,7 @@ class ClrOption {
         this.optionSelectionService = optionSelectionService;
         // A proxy with only the necessary data to be used for a11y and the focus handler service.
         this.optionProxy = new OptionData(null, null);
-        this.optionProxy.el = this.elRef.nativeElement;
+        this.optionProxy.el = elRef.nativeElement;
     }
     get optionId() {
         return this._id;
@@ -7065,7 +7108,7 @@ class ClrCombobox extends WrappedFormControl {
             control.valueAccessor = this;
         }
         // default to SingleSelectComboboxModel, in case the optional input [ClrMulti] isn't used
-        this.optionSelectionService.selectionModel = new SingleSelectComboboxModel();
+        optionSelectionService.selectionModel = new SingleSelectComboboxModel();
         this.updateControlValue();
     }
     get multiSelect() {
@@ -7361,11 +7404,10 @@ class ClrOptionItems {
         this.differs = differs;
         this.optionService = optionService;
         this.positionService = positionService;
-        this.vcr = vcr;
         this.subscriptions = [];
         this.filter = '';
         this.differ = null;
-        this.iterableProxy = new NgForOf(this.vcr, this.template, this.differs);
+        this.iterableProxy = new NgForOf(vcr, template, differs);
         this.subscriptions.push(optionService.inputChanged.subscribe(filter => {
             this.filter = filter;
             this.updateItems();
@@ -7745,10 +7787,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
 class ClrDatalistContainer extends ClrAbstractContainer {
     constructor(controlClassService, layoutService, ngControlService, focusService, ifControlStateService) {
         super(ifControlStateService, layoutService, controlClassService, ngControlService);
-        this.focusService = focusService;
         this.ifControlStateService = ifControlStateService;
         this.focus = false;
-        this.subscriptions.push(this.focusService.focusChange.subscribe(state => (this.focus = state)));
+        this.subscriptions.push(focusService.focusChange.subscribe(state => (this.focus = state)));
     }
 }
 ClrDatalistContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatalistContainer, deps: [{ token: ControlClassService }, { token: LayoutService, optional: true }, { token: NgControlService }, { token: FocusService }, { token: IfControlStateService }], target: i0.ɵɵFactoryTarget.Component });
@@ -7852,7 +7893,7 @@ class ClrDatalistInput extends WrappedFormControl {
         super(vcr, ClrDatalistContainer, injector, control, renderer, el);
         this.focusService = focusService;
         this.datalistIdService = datalistIdService;
-        if (!this.focusService) {
+        if (!focusService) {
             throw new Error('clrDatalist requires being wrapped in <clr-datalist-container>');
         }
     }
@@ -8626,8 +8667,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class DateIOService {
-    constructor(_localeHelperService) {
-        this._localeHelperService = _localeHelperService;
+    constructor(localeHelperService) {
         this.disabledDates = {
             // This is the default range. It approximates the beginning of time to the end of time.
             // Unless a minDate or maxDate is set with the native HTML5 api the range is all dates
@@ -8638,7 +8678,7 @@ class DateIOService {
         this.cldrLocaleDateFormat = DEFAULT_LOCALE_FORMAT;
         this.localeDisplayFormat = LITTLE_ENDIAN;
         this.delimiters = ['/', '/'];
-        this.cldrLocaleDateFormat = this._localeHelperService.localeDateFormat;
+        this.cldrLocaleDateFormat = localeHelperService.localeDateFormat;
         this.initializeLocaleDisplayFormat();
     }
     get placeholderText() {
@@ -9059,7 +9099,7 @@ class DatepickerEnabledService {
     constructor(_document) {
         this._document = _document;
         this._isUserAgentMobile = false;
-        if (this._document) {
+        if (_document) {
             this._isUserAgentMobile = MOBILE_USERAGENT_REGEX.test(_document.defaultView.navigator.userAgent);
             this._innerWidth = _document.defaultView.innerWidth;
         }
@@ -9655,18 +9695,17 @@ class ClrDateContainer extends ClrAbstractContainer {
         this.dateFormControlService = dateFormControlService;
         this.dateIOService = dateIOService;
         this.commonStrings = commonStrings;
-        this.focusService = focusService;
         this.viewManagerService = viewManagerService;
         this.controlClassService = controlClassService;
         this.layoutService = layoutService;
         this.ngControlService = ngControlService;
         this.ifControlStateService = ifControlStateService;
         this.focus = false;
-        this.subscriptions.push(this.focusService.focusChange.subscribe(state => {
+        this.subscriptions.push(focusService.focusChange.subscribe(state => {
             this.focus = state;
         }));
-        this.subscriptions.push(this.toggleService.openChange.subscribe(() => {
-            this.dateFormControlService.markAsTouched();
+        this.subscriptions.push(toggleService.openChange.subscribe(() => {
+            dateFormControlService.markAsTouched();
         }));
     }
     set clrPosition(position) {
@@ -10666,7 +10705,7 @@ class ClrPasswordContainer extends ClrAbstractContainer {
         this.focus = false;
         this._toggle = true;
         /* The unsubscribe is handle inside the ClrAbstractContainer */
-        this.subscriptions.push(this.focusService.focusChange.subscribe(state => {
+        this.subscriptions.push(focusService.focusChange.subscribe(state => {
             this.focus = state;
         }));
     }
@@ -10816,12 +10855,11 @@ class ClrPassword extends WrappedFormControl {
     constructor(vcr, injector, control, renderer, el, focusService, toggleService) {
         super(vcr, ClrPasswordContainer, injector, control, renderer, el);
         this.focusService = focusService;
-        this.toggleService = toggleService;
         this.index = 1;
-        if (!this.focusService) {
+        if (!focusService) {
             throw new Error('clrPassword requires being wrapped in <clr-password-container>');
         }
-        this.subscriptions.push(this.toggleService.subscribe(toggle => {
+        this.subscriptions.push(toggleService.subscribe(toggle => {
             renderer.setProperty(el.nativeElement, 'type', toggle ? 'text' : 'password');
         }));
     }
@@ -12706,6 +12744,12 @@ class DatagridNumericFilter extends DatagridFilterRegistrar {
     get minPlaceholderValue() {
         return this.minPlaceholder || this.commonStrings.keys.minValue;
     }
+    get fromLabelValue() {
+        return this.fromLabel || this.commonStrings.keys.fromLabel;
+    }
+    get toLabelValue() {
+        return this.toLabel || this.commonStrings.keys.toLabel;
+    }
     get low() {
         if (typeof this.filter.low === 'number' && isFinite(this.filter.low)) {
             return this.filter.low;
@@ -12768,31 +12812,40 @@ class DatagridNumericFilter extends DatagridFilterRegistrar {
     }
 }
 DatagridNumericFilter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: DatagridNumericFilter, deps: [{ token: FiltersProvider }, { token: DomAdapter }, { token: ClrCommonStringsService }, { token: ClrPopoverToggleService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-DatagridNumericFilter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: DatagridNumericFilter, selector: "clr-dg-numeric-filter", inputs: { minPlaceholder: ["clrFilterMinPlaceholder", "minPlaceholder"], maxPlaceholder: ["clrFilterMaxPlaceholder", "maxPlaceholder"], value: ["clrFilterValue", "value"], customNumericFilter: ["clrDgNumericFilter", "customNumericFilter"] }, outputs: { filterValueChange: "clrFilterValueChange" }, providers: [{ provide: CustomFilter, useExisting: DatagridNumericFilter }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input_low"], descendants: true }, { propertyName: "filterContainer", first: true, predicate: ClrDatagridFilter, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+DatagridNumericFilter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: DatagridNumericFilter, selector: "clr-dg-numeric-filter", inputs: { minPlaceholder: ["clrFilterMinPlaceholder", "minPlaceholder"], maxPlaceholder: ["clrFilterMaxPlaceholder", "maxPlaceholder"], fromLabel: ["clrFilterFromLabel", "fromLabel"], toLabel: ["clrFilterToLabel", "toLabel"], value: ["clrFilterValue", "value"], customNumericFilter: ["clrDgNumericFilter", "customNumericFilter"] }, outputs: { filterValueChange: "clrFilterValueChange" }, providers: [{ provide: CustomFilter, useExisting: DatagridNumericFilter }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input_low"], descendants: true }, { propertyName: "filterContainer", first: true, predicate: ClrDatagridFilter, descendants: true }], usesInheritance: true, ngImport: i0, template: `
     <clr-dg-filter [clrDgFilter]="registered" [(clrDgFilterOpen)]="open">
-      <input
-        class="datagrid-numeric-filter-input"
-        #input_low
-        type="number"
-        autocomplete="off"
-        name="low"
-        [(ngModel)]="low"
-        [placeholder]="minPlaceholderValue"
-        [attr.aria-label]="minPlaceholderValue"
-      />
-      <span class="datagrid-filter-input-spacer"></span>
-      <input
-        class="datagrid-numeric-filter-input"
-        #input_high
-        type="number"
-        autocomplete="off"
-        name="high"
-        [(ngModel)]="high"
-        [placeholder]="maxPlaceholderValue"
-        [attr.aria-label]="maxPlaceholderValue"
-      />
+      <div class="datagrid-numeric-filter-form">
+        <div class="clr-form-control">
+          <label class="clr-control-label">{{ fromLabelValue }}</label>
+          <input
+            clrInput
+            class="datagrid-numeric-filter-input"
+            #input_low
+            type="number"
+            autocomplete="off"
+            name="low"
+            [(ngModel)]="low"
+            [placeholder]="minPlaceholderValue"
+            [attr.aria-label]="minPlaceholderValue"
+          />
+        </div>
+        <div class="clr-form-control">
+          <label class="clr-control-label">{{ toLabelValue }}</label>
+          <input
+            clrInput
+            class="datagrid-numeric-filter-input"
+            #input_high
+            type="number"
+            autocomplete="off"
+            name="high"
+            [(ngModel)]="high"
+            [placeholder]="maxPlaceholderValue"
+            [attr.aria-label]="maxPlaceholderValue"
+          />
+        </div>
+      </div>
     </clr-dg-filter>
-  `, isInline: true, dependencies: [{ kind: "directive", 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]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClrDatagridFilter, selector: "clr-dg-filter", inputs: ["clrDgFilterOpen", "clrDgFilter"], outputs: ["clrDgFilterOpenChange"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: ClrInput, selector: "[clrInput]" }, { kind: "directive", 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]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClrDatagridFilter, selector: "clr-dg-filter", inputs: ["clrDgFilterOpen", "clrDgFilter"], outputs: ["clrDgFilterOpenChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: DatagridNumericFilter, decorators: [{
             type: Component,
             args: [{
@@ -12800,27 +12853,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                     providers: [{ provide: CustomFilter, useExisting: DatagridNumericFilter }],
                     template: `
     <clr-dg-filter [clrDgFilter]="registered" [(clrDgFilterOpen)]="open">
-      <input
-        class="datagrid-numeric-filter-input"
-        #input_low
-        type="number"
-        autocomplete="off"
-        name="low"
-        [(ngModel)]="low"
-        [placeholder]="minPlaceholderValue"
-        [attr.aria-label]="minPlaceholderValue"
-      />
-      <span class="datagrid-filter-input-spacer"></span>
-      <input
-        class="datagrid-numeric-filter-input"
-        #input_high
-        type="number"
-        autocomplete="off"
-        name="high"
-        [(ngModel)]="high"
-        [placeholder]="maxPlaceholderValue"
-        [attr.aria-label]="maxPlaceholderValue"
-      />
+      <div class="datagrid-numeric-filter-form">
+        <div class="clr-form-control">
+          <label class="clr-control-label">{{ fromLabelValue }}</label>
+          <input
+            clrInput
+            class="datagrid-numeric-filter-input"
+            #input_low
+            type="number"
+            autocomplete="off"
+            name="low"
+            [(ngModel)]="low"
+            [placeholder]="minPlaceholderValue"
+            [attr.aria-label]="minPlaceholderValue"
+          />
+        </div>
+        <div class="clr-form-control">
+          <label class="clr-control-label">{{ toLabelValue }}</label>
+          <input
+            clrInput
+            class="datagrid-numeric-filter-input"
+            #input_high
+            type="number"
+            autocomplete="off"
+            name="high"
+            [(ngModel)]="high"
+            [placeholder]="maxPlaceholderValue"
+            [attr.aria-label]="maxPlaceholderValue"
+          />
+        </div>
+      </div>
     </clr-dg-filter>
   `,
                 }]
@@ -12830,6 +12892,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
             }], maxPlaceholder: [{
                 type: Input,
                 args: ['clrFilterMaxPlaceholder']
+            }], fromLabel: [{
+                type: Input,
+                args: ['clrFilterFromLabel']
+            }], toLabel: [{
+                type: Input,
+                args: ['clrFilterToLabel']
             }], filterValueChange: [{
                 type: Output,
                 args: ['clrFilterValueChange']
@@ -13410,6 +13478,19 @@ var ClrDatagridSortOrder;
     ClrDatagridSortOrder[ClrDatagridSortOrder["DESC"] = -1] = "DESC";
 })(ClrDatagridSortOrder || (ClrDatagridSortOrder = {}));
 
+/*
+ * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+// @TODO The top two are not used now, which is probably a performance drag that was broken along the way.
+// There was a previous pattern to hide everything to do computation then display, for Firefox, needs revisiting.
+const NO_LAYOUT_CLASS = 'datagrid-no-layout';
+const COMPUTE_WIDTH_CLASS = 'datagrid-computing-columns-width';
+const STRICT_WIDTH_CLASS = 'datagrid-fixed-width';
+const HIDDEN_COLUMN_CLASS = 'datagrid-hidden-column';
+
 /*
  * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
  * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
@@ -13844,15 +13925,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrDatagridColumn extends DatagridFilterRegistrar {
-    constructor(_sort, filters, vcr, detailService, changeDetectorRef) {
+    constructor(el, _sort, filters, vcr, detailService, changeDetectorRef) {
         super(filters);
+        this.el = el;
         this._sort = _sort;
         this.vcr = vcr;
         this.detailService = detailService;
         this.changeDetectorRef = changeDetectorRef;
         this.sortOrderChange = new EventEmitter();
         this.filterValueChange = new EventEmitter();
-        this.showSeparator = true;
         /**
          * A custom filter for this column that can be provided in the projected content
          */
@@ -13871,9 +13952,20 @@ class ClrDatagridColumn extends DatagridFilterRegistrar {
          * Subscription to the sort service changes
          */
         this.subscriptions = [];
+        this._showSeparator = true;
         this.subscriptions.push(this.listenForSortingChanges());
         this.subscriptions.push(this.listenForDetailPaneChanges());
     }
+    get isHidden() {
+        return this.el.nativeElement.classList.contains(HIDDEN_COLUMN_CLASS);
+    }
+    get showSeparator() {
+        return this._showSeparator;
+    }
+    set showSeparator(value) {
+        this._showSeparator = value;
+        this.changeDetectorRef.markForCheck();
+    }
     // TODO: We might want to make this an enum in the future
     get colType() {
         return this._colType;
@@ -14049,8 +14141,6 @@ class ClrDatagridColumn extends DatagridFilterRegistrar {
         return this.detailService.stateChange.subscribe(state => {
             if (this.showSeparator !== !state) {
                 this.showSeparator = !state;
-                // Have to manually change because of OnPush
-                this.changeDetectorRef.markForCheck();
             }
         });
     }
@@ -14083,7 +14173,7 @@ class ClrDatagridColumn extends DatagridFilterRegistrar {
         }
     }
 }
-ClrDatagridColumn.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagridColumn, deps: [{ token: Sort }, { token: FiltersProvider }, { token: i0.ViewContainerRef }, { token: DetailService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ClrDatagridColumn.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagridColumn, deps: [{ token: i0.ElementRef }, { token: Sort }, { token: FiltersProvider }, { token: i0.ViewContainerRef }, { token: DetailService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 ClrDatagridColumn.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrDatagridColumn, selector: "clr-dg-column", inputs: { filterStringPlaceholder: ["clrFilterStringPlaceholder", "filterStringPlaceholder"], filterNumberMaxPlaceholder: ["clrFilterNumberMaxPlaceholder", "filterNumberMaxPlaceholder"], filterNumberMinPlaceholder: ["clrFilterNumberMinPlaceholder", "filterNumberMinPlaceholder"], colType: ["clrDgColType", "colType"], field: ["clrDgField", "field"], sortBy: ["clrDgSortBy", "sortBy"], sortOrder: ["clrDgSortOrder", "sortOrder"], updateFilterValue: ["clrFilterValue", "updateFilterValue"] }, outputs: { sortOrderChange: "clrDgSortOrderChange", filterValueChange: "clrFilterValueChange" }, host: { attributes: { "role": "columnheader" }, properties: { "class.datagrid-column": "true", "attr.aria-sort": "ariaSort" } }, queries: [{ propertyName: "projectedFilter", first: true, predicate: CustomFilter, descendants: true }], usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: ClrPopoverHostDirective }], ngImport: i0, template: `
     <div class="datagrid-column-flex">
       <button class="datagrid-column-title" *ngIf="sortable" (click)="sort()" type="button">
@@ -14124,7 +14214,7 @@ ClrDatagridColumn.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
 
       <clr-dg-column-separator *ngIf="showSeparator"></clr-dg-column-separator>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: ClrDatagridColumnSeparator, selector: "clr-dg-column-separator" }, { kind: "component", type: DatagridNumericFilter, selector: "clr-dg-numeric-filter", inputs: ["clrFilterMinPlaceholder", "clrFilterMaxPlaceholder", "clrFilterValue", "clrDgNumericFilter"], outputs: ["clrFilterValueChange"] }, { kind: "component", type: DatagridStringFilter, selector: "clr-dg-string-filter", inputs: ["clrFilterPlaceholder", "clrDgStringFilter", "clrFilterValue"], outputs: ["clrFilterValueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: ClrDatagridColumnSeparator, selector: "clr-dg-column-separator" }, { kind: "component", type: DatagridNumericFilter, selector: "clr-dg-numeric-filter", inputs: ["clrFilterMinPlaceholder", "clrFilterMaxPlaceholder", "clrFilterFromLabel", "clrFilterToLabel", "clrFilterValue", "clrDgNumericFilter"], outputs: ["clrFilterValueChange"] }, { kind: "component", type: DatagridStringFilter, selector: "clr-dg-string-filter", inputs: ["clrFilterPlaceholder", "clrDgStringFilter", "clrFilterValue"], outputs: ["clrFilterValueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagridColumn, decorators: [{
             type: Component,
             args: [{
@@ -14178,7 +14268,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                     },
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return [{ type: Sort }, { type: FiltersProvider }, { type: i0.ViewContainerRef }, { type: DetailService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { filterStringPlaceholder: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: Sort }, { type: FiltersProvider }, { type: i0.ViewContainerRef }, { type: DetailService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { filterStringPlaceholder: [{
                 type: Input,
                 args: ['clrFilterStringPlaceholder']
             }], filterNumberMaxPlaceholder: [{
@@ -14391,11 +14481,10 @@ class ClrDatagridItems {
         this.template = template;
         this.differs = differs;
         this.items = items;
-        this.vcr = vcr;
         this.differ = null;
         this.subscriptions = [];
         items.smartenUp();
-        this.iterableProxy = new NgForOf(this.vcr, this.template, this.differs);
+        this.iterableProxy = new NgForOf(vcr, template, differs);
         this.subscriptions.push(items.change.subscribe(newItems => {
             this.iterableProxy.ngForOf = newItems;
             this.iterableProxy.ngDoCheck();
@@ -14891,9 +14980,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
  */
 let nbSelection = 0;
 class Selection {
-    constructor(_items, _filters) {
+    constructor(_items, filters) {
         this._items = _items;
-        this._filters = _filters;
         this.preserveSelection = false;
         /**
          * Shift key state, for use in range selection.
@@ -14914,13 +15002,13 @@ class Selection {
          */
         this.subscriptions = [];
         this.id = 'clr-dg-selection' + nbSelection++;
-        this.subscriptions.push(this._filters.change.subscribe(() => {
+        this.subscriptions.push(filters.change.subscribe(() => {
             if (!this._selectable || this.preserveSelection) {
                 return;
             }
             this.clearSelection();
         }));
-        this.subscriptions.push(this._items.allChanges.subscribe(updatedItems => {
+        this.subscriptions.push(_items.allChanges.subscribe(updatedItems => {
             // Reset the lockedRefs;
             const updateLockedRef = [];
             switch (this.selectionType) {
@@ -14932,10 +15020,10 @@ class Selection {
                     let selectionUpdated = false;
                     // if the currentSingle has been set before data was loaded, we look up and save the ref from current data set
                     if (this.currentSingle && !this.prevSingleSelectionRef) {
-                        this.prevSingleSelectionRef = this._items.trackBy(this.currentSingle);
+                        this.prevSingleSelectionRef = _items.trackBy(this.currentSingle);
                     }
                     updatedItems.forEach(item => {
-                        const ref = this._items.trackBy(item);
+                        const ref = _items.trackBy(item);
                         // If one of the updated items is the previously selectedSingle, set it as the new one
                         if (this.prevSingleSelectionRef === ref) {
                             newSingle = item;
@@ -14949,7 +15037,7 @@ class Selection {
                     // Therefore, we should delete the currentSingle if it used to be defined but doesn't exist anymore.
                     // No explicit "delete" is required, since newSingle would be undefined at this point.
                     // Marking it as selectionUpdated here will set currentSingle to undefined below in the setTimeout.
-                    if (this._items.smart && !newSingle) {
+                    if (_items.smart && !newSingle) {
                         selectionUpdated = true;
                     }
                     // TODO: Discussed this with Eudes and this is fine for now.
@@ -14970,7 +15058,7 @@ class Selection {
                     if (this.current.length > 0 && this.prevSelectionRefs.length !== this.current.length) {
                         this.prevSelectionRefs = [];
                         this.current.forEach(item => {
-                            this.prevSelectionRefs.push(this._items.trackBy(item));
+                            this.prevSelectionRefs.push(_items.trackBy(item));
                         });
                     }
                     // Duplicate loop, when the issue is issue#2342 is revisited keep in mind that
@@ -14979,7 +15067,7 @@ class Selection {
                     //
                     // The both loops below that goes over updatedItems could be combined into one.
                     updatedItems.forEach(item => {
-                        const ref = this._items.trackBy(item);
+                        const ref = _items.trackBy(item);
                         if (this.lockedRefs.indexOf(ref) > -1) {
                             updateLockedRef.push(ref);
                         }
@@ -14989,7 +15077,7 @@ class Selection {
                     // the if statement below results in broken behavior.
                     if (leftOver.length > 0) {
                         updatedItems.forEach(item => {
-                            const ref = this._items.trackBy(item);
+                            const ref = _items.trackBy(item);
                             // Look in current selected refs array if item is selected, and update actual value
                             const selectedIndex = this.prevSelectionRefs.indexOf(ref);
                             if (selectedIndex > -1) {
@@ -14999,7 +15087,7 @@ class Selection {
                         });
                         // Filter out any unmatched items if we're using smart datagrids where we expect all items to be
                         // present
-                        if (this._items.smart) {
+                        if (_items.smart) {
                             leftOver = leftOver.filter(selected => updatedItems.indexOf(selected) > -1);
                             if (this.current.length !== leftOver.length) {
                                 selectionUpdated = true;
@@ -15317,8 +15405,6 @@ class ClrDatagridRow {
         this.detailService = detailService;
         this.displayMode = displayMode;
         this.vcr = vcr;
-        this.renderer = renderer;
-        this.el = el;
         this.commonStrings = commonStrings;
         this.items = items;
         this.document = document;
@@ -15346,17 +15432,17 @@ class ClrDatagridRow {
         this.radioId = 'clr-dg-row-rd' + nbRow;
         this.checkboxId = 'clr-dg-row-cb' + nbRow;
         this.expandableId = expand.expandableId;
-        this.subscriptions.push(combineLatest(this.expand.replace, this.expand.expandChange).subscribe(([expandReplaceValue, expandChangeValue]) => {
+        this.subscriptions.push(combineLatest(expand.replace, expand.expandChange).subscribe(([expandReplaceValue, expandChangeValue]) => {
             if (expandReplaceValue && expandChangeValue) {
                 // replaced and expanding
                 this.replaced = true;
-                this.renderer.addClass(this.el.nativeElement, 'datagrid-row-replaced');
+                renderer.addClass(el.nativeElement, 'datagrid-row-replaced');
             }
             else {
                 this.replaced = false;
                 // Handles these cases: not replaced and collapsing & replaced and
                 // collapsing and not replaced and expanding.
-                this.renderer.removeClass(this.el.nativeElement, 'datagrid-row-replaced');
+                renderer.removeClass(el.nativeElement, 'datagrid-row-replaced');
             }
         }));
     }
@@ -15762,19 +15848,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
             type: Injectable
         }], ctorParameters: function () { return [{ type: FiltersProvider }, { type: Sort }, { type: Page }, { type: StateDebouncer }]; } });
 
-/*
- * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-// @TODO The top two are not used now, which is probably a performance drag that was broken along the way.
-// There was a previous pattern to hide everything to do computation then display, for Firefox, needs revisiting.
-const NO_LAYOUT_CLASS = 'datagrid-no-layout';
-const COMPUTE_WIDTH_CLASS = 'datagrid-computing-columns-width';
-const STRICT_WIDTH_CLASS = 'datagrid-fixed-width';
-const HIDDEN_COLUMN_CLASS = 'datagrid-hidden-column';
-
 /*
  * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
  * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
@@ -15896,7 +15969,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrDatagrid {
-    constructor(organizer, items, expandableRows, selection, rowActionService, stateProvider, displayMode, renderer, detailService, document, el, page, commonStrings, columnsService, keyNavigation, zone) {
+    constructor(organizer, items, expandableRows, selection, rowActionService, stateProvider, displayMode, renderer, detailService, document, el, page, commonStrings, keyNavigation, zone) {
         this.organizer = organizer;
         this.items = items;
         this.expandableRows = expandableRows;
@@ -15910,7 +15983,6 @@ class ClrDatagrid {
         this.el = el;
         this.page = page;
         this.commonStrings = commonStrings;
-        this.columnsService = columnsService;
         this.keyNavigation = keyNavigation;
         this.zone = zone;
         this.clrDgSingleSelectionAriaLabel = this.commonStrings.keys.singleSelectionAriaLabel;
@@ -15932,7 +16004,7 @@ class ClrDatagrid {
         this._subscriptions = [];
         const datagridId = uniqueIdFactory();
         this.selectAllId = 'clr-dg-select-all-' + datagridId;
-        this.detailService.id = datagridId;
+        detailService.id = datagridId;
     }
     /**
      * Freezes the datagrid while data is loading
@@ -16154,7 +16226,7 @@ class ClrDatagrid {
         this.items.refresh();
     }
 }
-ClrDatagrid.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagrid, deps: [{ token: DatagridRenderOrganizer }, { token: Items }, { token: ExpandableRowsCount }, { token: Selection }, { token: RowActionService }, { token: StateProvider }, { token: DisplayModeService }, { token: i0.Renderer2 }, { token: DetailService }, { token: DOCUMENT }, { token: i0.ElementRef }, { token: Page }, { token: ClrCommonStringsService }, { token: ColumnsService }, { token: KeyNavigationGridController }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ClrDatagrid.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagrid, deps: [{ token: DatagridRenderOrganizer }, { token: Items }, { token: ExpandableRowsCount }, { token: Selection }, { token: RowActionService }, { token: StateProvider }, { token: DisplayModeService }, { token: i0.Renderer2 }, { token: DetailService }, { token: DOCUMENT }, { token: i0.ElementRef }, { token: Page }, { token: ClrCommonStringsService }, { token: KeyNavigationGridController }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
 ClrDatagrid.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrDatagrid, selector: "clr-datagrid", inputs: { loadingMoreItems: ["clrLoadingMoreItems", "loadingMoreItems"], clrDgSingleSelectionAriaLabel: "clrDgSingleSelectionAriaLabel", clrDgSingleActionableAriaLabel: "clrDgSingleActionableAriaLabel", clrDetailExpandableAriaLabel: "clrDetailExpandableAriaLabel", clrDgDisablePageFocus: "clrDgDisablePageFocus", loading: ["clrDgLoading", "loading"], selected: ["clrDgSelected", "selected"], singleSelected: ["clrDgSingleSelected", "singleSelected"], clrDgPreserveSelection: "clrDgPreserveSelection", rowSelectionMode: ["clrDgRowSelection", "rowSelectionMode"], trackBy: ["clrDgItemsTrackBy", "trackBy"] }, outputs: { selectedChanged: "clrDgSelectedChange", singleSelectedChanged: "clrDgSingleSelectedChange", refresh: "clrDgRefresh" }, host: { properties: { "class.datagrid-host": "true", "class.datagrid-detail-open": "detailService.isOpen" } }, providers: [
         Selection,
         Sort,
@@ -16197,7 +16269,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
         }], ctorParameters: function () { return [{ type: DatagridRenderOrganizer }, { type: Items }, { type: ExpandableRowsCount }, { type: Selection }, { type: RowActionService }, { type: StateProvider }, { type: DisplayModeService }, { type: i0.Renderer2 }, { type: DetailService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i0.ElementRef }, { type: Page }, { type: ClrCommonStringsService }, { type: ColumnsService }, { type: KeyNavigationGridController }, { type: i0.NgZone }]; }, propDecorators: { loadingMoreItems: [{
+                }] }, { type: i0.ElementRef }, { type: Page }, { type: ClrCommonStringsService }, { type: KeyNavigationGridController }, { type: i0.NgZone }]; }, propDecorators: { loadingMoreItems: [{
                 type: Input,
                 args: ['clrLoadingMoreItems']
             }], clrDgSingleSelectionAriaLabel: [{
@@ -16303,11 +16375,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
  */
 let clrDgActionId = 0;
 class ClrDatagridActionOverflow {
-    constructor(rowActionService, commonStrings, platformId, zone, smartToggleService) {
+    constructor(rowActionService, commonStrings, platformId, smartToggleService) {
         this.rowActionService = rowActionService;
         this.commonStrings = commonStrings;
         this.platformId = platformId;
-        this.zone = zone;
         this.smartToggleService = smartToggleService;
         this.openChange = new EventEmitter(false);
         this.popoverId = uniqueIdFactory();
@@ -16319,10 +16390,10 @@ class ClrDatagridActionOverflow {
         };
         this._open = false;
         this.subscriptions = [];
-        this.rowActionService.register();
-        this.subscriptions.push(this.smartToggleService.openChange.subscribe(openState => {
+        rowActionService.register();
+        this.subscriptions.push(smartToggleService.openChange.subscribe(openState => {
             this.open = openState;
-        }), this.smartToggleService.popoverVisible.subscribe(visible => {
+        }), smartToggleService.popoverVisible.subscribe(visible => {
             if (visible) {
                 this.initializeFocus();
             }
@@ -16359,7 +16430,7 @@ class ClrDatagridActionOverflow {
         }
     }
 }
-ClrDatagridActionOverflow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagridActionOverflow, deps: [{ token: RowActionService }, { token: ClrCommonStringsService }, { token: PLATFORM_ID }, { token: i0.NgZone }, { token: ClrPopoverToggleService }], target: i0.ɵɵFactoryTarget.Component });
+ClrDatagridActionOverflow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagridActionOverflow, deps: [{ token: RowActionService }, { token: ClrCommonStringsService }, { token: PLATFORM_ID }, { token: ClrPopoverToggleService }], target: i0.ɵɵFactoryTarget.Component });
 ClrDatagridActionOverflow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrDatagridActionOverflow, selector: "clr-dg-action-overflow", inputs: { buttonLabel: ["clrDgActionOverflowButtonLabel", "buttonLabel"], open: ["clrDgActionOverflowOpen", "open"] }, outputs: { openChange: "clrDgActionOverflowOpenChange" }, viewQueries: [{ propertyName: "keyFocus", first: true, predicate: ClrKeyFocus, descendants: true }], hostDirectives: [{ directive: ClrPopoverHostDirective }], ngImport: i0, template: `
     <button
       tabindex="-1"
@@ -16429,7 +16500,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
         }], ctorParameters: function () { return [{ type: RowActionService }, { type: ClrCommonStringsService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
-                }] }, { type: i0.NgZone }, { type: ClrPopoverToggleService }]; }, propDecorators: { buttonLabel: [{
+                }] }, { type: ClrPopoverToggleService }]; }, propDecorators: { buttonLabel: [{
                 type: Input,
                 args: ['clrDgActionOverflowButtonLabel']
             }], openChange: [{
@@ -16884,8 +16955,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
 class DatagridDetailRegisterer {
     constructor(expandableRowsCount) {
         this.expandableRowsCount = expandableRowsCount;
-        if (this.expandableRowsCount) {
-            this.expandableRowsCount.register();
+        if (expandableRowsCount) {
+            expandableRowsCount.register();
         }
     }
     ngOnDestroy() {
@@ -17012,13 +17083,12 @@ const COLUMN_STATE_PROVIDER = {
 class ClrDatagridHideableColumn {
     constructor(titleTemplateRef, viewContainerRef, columnsService, columnState) {
         this.titleTemplateRef = titleTemplateRef;
-        this.viewContainerRef = viewContainerRef;
         this.columnsService = columnsService;
         this.columnState = columnState;
         this.hiddenChange = new EventEmitter();
         this.subscriptions = [];
-        this.viewContainerRef.createEmbeddedView(this.titleTemplateRef);
-        if (!this.columnState) {
+        viewContainerRef.createEmbeddedView(titleTemplateRef);
+        if (!columnState) {
             throw new Error('The *clrDgHideableColumn directive can only be used inside of a clr-dg-column component.');
         }
     }
@@ -17103,7 +17173,7 @@ class ClrIfDetail {
         this.stateChange = new EventEmitter(null);
         this.subscriptions = [];
         this.skip = false; // This keeps us from resetting the input and calling the toggle twice
-        this.detailService.enabled = true;
+        detailService.enabled = true;
     }
     set state(model) {
         if (!this.skip) {
@@ -17241,7 +17311,7 @@ class ClrDatagridPagination {
         this.commonStrings = commonStrings;
         this.detailService = detailService;
         this.currentChanged = new EventEmitter(false);
-        this.page.activated = true;
+        page.activated = true;
     }
     /**
      * Page size
@@ -17726,10 +17796,10 @@ class ClrDatagridVirtualScrollDirective {
         this.cdkVirtualForInputs = {
             cdkVirtualForTrackBy: index => index,
         };
-        this.items.smartenUp();
-        this.datagrid.hasVirtualScroller = true;
-        this.datagrid.detailService.preventFocusScroll = true;
-        this.datagridElementRef = this.datagrid.el;
+        items.smartenUp();
+        datagrid.hasVirtualScroller = true;
+        datagrid.detailService.preventFocusScroll = true;
+        this.datagridElementRef = datagrid.el;
         // default
         this.cdkVirtualForTemplateCacheSize = 20;
         this.mutationChanges.observe(this.datagridElementRef.nativeElement, {
@@ -17924,7 +17994,6 @@ class DatagridHeaderRenderer {
     constructor(el, renderer, organizer, domAdapter, columnResizerService, columnsService, columnState) {
         this.el = el;
         this.renderer = renderer;
-        this.organizer = organizer;
         this.domAdapter = domAdapter;
         this.columnResizerService = columnResizerService;
         this.columnsService = columnsService;
@@ -17936,7 +18005,7 @@ class DatagridHeaderRenderer {
         this.widthSet = false;
         this.autoSet = false;
         this.subscriptions = [];
-        this.subscriptions.push(this.organizer.filterRenderSteps(DatagridRenderStep.CLEAR_WIDTHS).subscribe(() => this.clearWidth()));
+        this.subscriptions.push(organizer.filterRenderSteps(DatagridRenderStep.CLEAR_WIDTHS).subscribe(() => this.clearWidth()));
     }
     ngOnDestroy() {
         this.subscriptions.forEach(sub => sub.unsubscribe());
@@ -18082,14 +18151,13 @@ const domAdapterFactory = (platformId) => {
 // Fixes build error
 // @dynamic (https://github.com/angular/angular/issues/19698#issuecomment-338340211)
 class DatagridMainRenderer {
-    constructor(organizer, items, page, domAdapter, el, renderer, detailService, tableSizeService, columnsService, ngZone, keyNavigation) {
+    constructor(datagrid, organizer, items, page, el, renderer, detailService, tableSizeService, columnsService, ngZone, keyNavigation) {
+        this.datagrid = datagrid;
         this.organizer = organizer;
         this.items = items;
         this.page = page;
-        this.domAdapter = domAdapter;
         this.el = el;
         this.renderer = renderer;
-        this.detailService = detailService;
         this.tableSizeService = tableSizeService;
         this.columnsService = columnsService;
         this.ngZone = ngZone;
@@ -18103,16 +18171,14 @@ class DatagridMainRenderer {
          * 2) When rows are lazily loaded for the first time
          */
         this.columnsSizesStable = false;
-        this.subscriptions.push(this.organizer
-            .filterRenderSteps(DatagridRenderStep.COMPUTE_COLUMN_WIDTHS)
-            .subscribe(() => this.computeHeadersWidth()));
-        this.subscriptions.push(this.page.sizeChange.subscribe(() => {
+        this.subscriptions.push(organizer.filterRenderSteps(DatagridRenderStep.COMPUTE_COLUMN_WIDTHS).subscribe(() => this.computeHeadersWidth()));
+        this.subscriptions.push(page.sizeChange.subscribe(() => {
             if (this._heightSet) {
                 this.resetDatagridHeight();
             }
         }));
-        this.subscriptions.push(this.detailService.stateChange.subscribe(state => this.toggleDetailPane(state)));
-        this.subscriptions.push(this.items.change.subscribe(() => (this.shouldStabilizeColumns = true)));
+        this.subscriptions.push(detailService.stateChange.subscribe(state => this.toggleDetailPane(state)));
+        this.subscriptions.push(items.change.subscribe(() => (this.shouldStabilizeColumns = true)));
     }
     ngOnInit() {
         this.columnsService.columnsStateChange.subscribe(change => this.columnStateChanged(change));
@@ -18132,10 +18198,9 @@ class DatagridMainRenderer {
         this.tableSizeService.table = this.el;
     }
     ngAfterViewChecked() {
-        if (this.shouldStabilizeColumns) {
-            setTimeout(() => {
-                this.stabilizeColumns();
-            }, 0);
+        const datagridIsVisible = this.checkAndUpdateVisibility();
+        if (this.shouldStabilizeColumns && datagridIsVisible) {
+            this.stabilizeColumns();
         }
         if (this.shouldComputeHeight()) {
             this.ngZone.runOutsideAngular(() => {
@@ -18254,6 +18319,7 @@ class DatagridMainRenderer {
                                 row.expandableRow?.cells.get(columnIndex)?.setHidden(state);
                             }
                         });
+                        this.updateColumnSeparatorsVisibility();
                         this.keyNavigation.resetKeyGrid();
                         break;
                     case DatagridColumnChanges.INITIALIZE:
@@ -18286,8 +18352,29 @@ class DatagridMainRenderer {
             this.columnsSizesStable = true;
         }
     }
+    checkAndUpdateVisibility() {
+        if (this.el.nativeElement.offsetParent) {
+            this.datagrid.datagrid.nativeElement.style.visibility = 'visible';
+            return true;
+        }
+        else {
+            this.datagrid.datagrid.nativeElement.style.visibility = 'hidden';
+            return false;
+        }
+    }
+    updateColumnSeparatorsVisibility() {
+        const visibleColumns = this.datagrid.columns.filter(column => !column.isHidden);
+        visibleColumns.forEach((column, index) => {
+            if (index === visibleColumns.length - 1) {
+                column.showSeparator = false;
+            }
+            else if (!column.showSeparator) {
+                column.showSeparator = true;
+            }
+        });
+    }
 }
-DatagridMainRenderer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: DatagridMainRenderer, deps: [{ token: DatagridRenderOrganizer }, { token: Items }, { token: Page }, { token: DomAdapter }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DetailService }, { token: TableSizeService }, { token: ColumnsService }, { token: i0.NgZone }, { token: KeyNavigationGridController }], target: i0.ɵɵFactoryTarget.Directive });
+DatagridMainRenderer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: DatagridMainRenderer, deps: [{ token: ClrDatagrid }, { token: DatagridRenderOrganizer }, { token: Items }, { token: Page }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DetailService }, { token: TableSizeService }, { token: ColumnsService }, { token: i0.NgZone }, { token: KeyNavigationGridController }], target: i0.ɵɵFactoryTarget.Directive });
 DatagridMainRenderer.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", type: DatagridMainRenderer, selector: "clr-datagrid", providers: [{ provide: DomAdapter, useFactory: domAdapterFactory, deps: [PLATFORM_ID] }], queries: [{ propertyName: "headers", predicate: DatagridHeaderRenderer }, { propertyName: "rows", predicate: DatagridRowRenderer }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: DatagridMainRenderer, decorators: [{
             type: Directive,
@@ -18295,7 +18382,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                     selector: 'clr-datagrid',
                     providers: [{ provide: DomAdapter, useFactory: domAdapterFactory, deps: [PLATFORM_ID] }],
                 }]
-        }], ctorParameters: function () { return [{ type: DatagridRenderOrganizer }, { type: Items }, { type: Page }, { type: DomAdapter }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DetailService }, { type: TableSizeService }, { type: ColumnsService }, { type: i0.NgZone }, { type: KeyNavigationGridController }]; }, propDecorators: { headers: [{
+        }], ctorParameters: function () { return [{ type: ClrDatagrid }, { type: DatagridRenderOrganizer }, { type: Items }, { type: Page }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DetailService }, { type: TableSizeService }, { type: ColumnsService }, { type: i0.NgZone }, { type: KeyNavigationGridController }]; }, propDecorators: { headers: [{
                 type: ContentChildren,
                 args: [DatagridHeaderRenderer]
             }], rows: [{
@@ -18933,8 +19020,8 @@ class RecursiveChildren {
         this.featuresService = featuresService;
         this.expandService = expandService;
         if (expandService) {
-            this.subscription = this.expandService.expandChange.subscribe(value => {
-                if (!value && this.parent && !this.featuresService.eager && this.featuresService.recursion) {
+            this.subscription = expandService.expandChange.subscribe(value => {
+                if (!value && this.parent && !featuresService.eager && featuresService.recursion) {
                     // In the case of lazy-loading recursive trees, we clear the children on collapse.
                     // This is better in case they change between two user interaction, and that way
                     // the app itself can decide whether to cache them or not.
@@ -19548,7 +19635,7 @@ class ClrTreeNode {
         this.typeAheadKeyBuffer = '';
         this.typeAheadKeyEvent = new Subject();
         this.subscriptions = [];
-        if (this.featuresService.recursion) {
+        if (featuresService.recursion) {
             // I'm completely stuck, we have to hack into private properties until either
             // https://github.com/angular/angular/issues/14935 or https://github.com/angular/angular/issues/15998
             // are fixed
@@ -19789,7 +19876,7 @@ class ClrTreeNode {
     }
 }
 ClrTreeNode.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrTreeNode, deps: [{ token: PLATFORM_ID }, { token: ClrTreeNode, optional: true, skipSelf: true }, { token: TreeFeaturesService }, { token: IfExpandService }, { token: ClrCommonStringsService }, { token: TreeFocusManagerService }, { token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-ClrTreeNode.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrTreeNode, selector: "clr-tree-node", inputs: { expandable: ["clrExpandable", "expandable"], disabled: ["clrDisabled", "disabled"], selected: ["clrSelected", "selected"], expanded: ["clrExpanded", "expanded"], clrForTypeAhead: "clrForTypeAhead" }, outputs: { selectedChange: "clrSelectedChange", expandedChange: "clrExpandedChange" }, host: { properties: { "class.clr-tree-node": "true", "class.disabled": "this._model.disabled" } }, providers: [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-2024 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\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  [class.clr-form-control-disabled]=\"disabled\"\n  [attr.aria-disabled]=\"disabled\"\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    [disabled]=\"disabled\"\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      [disabled]=\"disabled\"\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\">\n      <ng-container [ngTemplateOutlet]=\"treenodeContent\"></ng-container>\n    </label>\n  </div>\n  <div\n    class=\"clr-treenode-content\"\n    [class.clr-treenode-text-only]=\"treeNodeContentTextOnly\"\n    (mouseup)=\"focusTreeNode()\"\n    *ngIf=\"!featuresService.selectable\"\n  >\n    <ng-container [ngTemplateOutlet]=\"treenodeContent\"></ng-container>\n  </div>\n\n  <ng-template #treenodeContent>\n    <ng-content></ng-content>\n    <div class=\"clr-sr-only\" *ngIf=\"featuresService.selectable || ariaSelected\">\n      <span *ngIf=\"ariaSelected\"> selected</span>\n      <span *ngIf=\"!ariaSelected\"> unselected</span>\n    </div>\n  </ng-template>\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", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: RecursiveChildren, selector: "clr-recursive-children", inputs: ["parent", "children"] }], animations: [
+ClrTreeNode.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrTreeNode, selector: "clr-tree-node", inputs: { expandable: ["clrExpandable", "expandable"], disabled: ["clrDisabled", "disabled"], selected: ["clrSelected", "selected"], expanded: ["clrExpanded", "expanded"], clrForTypeAhead: "clrForTypeAhead" }, outputs: { selectedChange: "clrSelectedChange", expandedChange: "clrExpandedChange" }, host: { properties: { "class.clr-tree-node": "true", "class.disabled": "this._model.disabled" } }, providers: [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-2024 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\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  [class.clr-form-control-disabled]=\"disabled\"\n  [attr.aria-disabled]=\"disabled\"\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    [disabled]=\"disabled\"\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      [disabled]=\"disabled\"\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\">\n      <ng-container [ngTemplateOutlet]=\"treenodeContent\"></ng-container>\n    </label>\n  </div>\n  <div\n    class=\"clr-treenode-content\"\n    [class.clr-treenode-text-only]=\"treeNodeContentTextOnly\"\n    (mouseup)=\"focusTreeNode()\"\n    *ngIf=\"!featuresService.selectable\"\n  >\n    <ng-container [ngTemplateOutlet]=\"treenodeContent\"></ng-container>\n  </div>\n\n  <ng-template #treenodeContent>\n    <ng-content></ng-content>\n    <div class=\"clr-sr-only\" *ngIf=\"featuresService.selectable || ariaSelected\">\n      <span> {{ariaSelected ? commonStrings.keys.selectedTreeNode : commonStrings.keys.unselectedTreeNode}}</span>\n    </div>\n  </ng-template>\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", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: RecursiveChildren, selector: "clr-recursive-children", inputs: ["parent", "children"] }], animations: [
         trigger('toggleChildrenAnim', [
             transition('collapsed => expanded', [style({ height: 0 }), animate(200, style({ height: '*' }))]),
             transition('expanded => collapsed', [style({ height: '*' }), animate(200, style({ height: 0 }))]),
@@ -19809,7 +19896,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                     ], host: {
                         '[class.clr-tree-node]': 'true',
                         '[class.disabled]': 'this._model.disabled',
-                    }, template: "<!--\n  ~ Copyright (c) 2016-2024 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\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  [class.clr-form-control-disabled]=\"disabled\"\n  [attr.aria-disabled]=\"disabled\"\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    [disabled]=\"disabled\"\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      [disabled]=\"disabled\"\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\">\n      <ng-container [ngTemplateOutlet]=\"treenodeContent\"></ng-container>\n    </label>\n  </div>\n  <div\n    class=\"clr-treenode-content\"\n    [class.clr-treenode-text-only]=\"treeNodeContentTextOnly\"\n    (mouseup)=\"focusTreeNode()\"\n    *ngIf=\"!featuresService.selectable\"\n  >\n    <ng-container [ngTemplateOutlet]=\"treenodeContent\"></ng-container>\n  </div>\n\n  <ng-template #treenodeContent>\n    <ng-content></ng-content>\n    <div class=\"clr-sr-only\" *ngIf=\"featuresService.selectable || ariaSelected\">\n      <span *ngIf=\"ariaSelected\"> selected</span>\n      <span *ngIf=\"!ariaSelected\"> unselected</span>\n    </div>\n  </ng-template>\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-2024 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\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  [class.clr-form-control-disabled]=\"disabled\"\n  [attr.aria-disabled]=\"disabled\"\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    [disabled]=\"disabled\"\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      [disabled]=\"disabled\"\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\">\n      <ng-container [ngTemplateOutlet]=\"treenodeContent\"></ng-container>\n    </label>\n  </div>\n  <div\n    class=\"clr-treenode-content\"\n    [class.clr-treenode-text-only]=\"treeNodeContentTextOnly\"\n    (mouseup)=\"focusTreeNode()\"\n    *ngIf=\"!featuresService.selectable\"\n  >\n    <ng-container [ngTemplateOutlet]=\"treenodeContent\"></ng-container>\n  </div>\n\n  <ng-template #treenodeContent>\n    <ng-content></ng-content>\n    <div class=\"clr-sr-only\" *ngIf=\"featuresService.selectable || ariaSelected\">\n      <span> {{ariaSelected ? commonStrings.keys.selectedTreeNode : commonStrings.keys.unselectedTreeNode}}</span>\n    </div>\n  </ng-template>\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,
                     args: [PLATFORM_ID]
@@ -19856,18 +19943,21 @@ function trimAndLowerCase(value) {
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrTree {
-    constructor(featuresService, focusManagerService, { nativeElement }, renderer, ngZone) {
+    constructor(featuresService, focusManagerService, renderer, el, ngZone) {
         this.featuresService = featuresService;
         this.focusManagerService = focusManagerService;
+        this.renderer = renderer;
+        this.el = el;
         this.subscriptions = [];
-        const subscription = ngZone.runOutsideAngular(() => fromEvent(nativeElement, 'focusin').subscribe((event) => {
-            if (event.target === nativeElement) {
+        this._isMultiSelectable = false;
+        const subscription = ngZone.runOutsideAngular(() => fromEvent(el.nativeElement, 'focusin').subscribe((event) => {
+            if (event.target === 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();
+                focusManagerService.focusFirstVisibleNode();
                 // when the first child gets focus,
                 // tree should no longer have tabindex of 0.
-                renderer.removeAttribute(nativeElement, 'tabindex');
+                renderer.removeAttribute(el.nativeElement, 'tabindex');
             }
         }));
         this.subscriptions.push(subscription);
@@ -19876,17 +19966,28 @@ class ClrTree {
         this.featuresService.eager = !value;
     }
     get isMultiSelectable() {
-        return this.featuresService.selectable && this.rootNodes.length > 0;
+        return this._isMultiSelectable;
     }
     ngAfterContentInit() {
         this.setRootNodes();
         this.subscriptions.push(this.rootNodes.changes.subscribe(() => {
+            this.setMultiSelectable();
             this.setRootNodes();
         }));
     }
     ngOnDestroy() {
         this.subscriptions.forEach(sub => sub.unsubscribe());
     }
+    setMultiSelectable() {
+        if (this.featuresService.selectable && this.rootNodes.length > 0) {
+            this._isMultiSelectable = true;
+            this.renderer.setAttribute(this.el.nativeElement, 'aria-multiselectable', 'true');
+        }
+        else {
+            this._isMultiSelectable = false;
+            this.renderer.removeAttribute(this.el.nativeElement, 'aria-multiselectable');
+        }
+    }
     setRootNodes() {
         // if node has no parent, it's a root node
         // for recursive tree, this.rootNodes registers also nested children
@@ -19894,8 +19995,8 @@ class ClrTree {
         this.focusManagerService.rootNodeModels = this.rootNodes.map(node => node._model).filter(node => !node.parent);
     }
 }
-ClrTree.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", 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: "14.0.0", version: "15.2.2", 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: `
+ClrTree.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrTree, deps: [{ token: TreeFeaturesService }, { token: TreeFocusManagerService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ClrTree.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrTree, selector: "clr-tree", inputs: { lazy: ["clrLazy", "lazy"] }, host: { attributes: { "tabindex": "0" }, properties: { "attr.role": "\"tree\"" } }, providers: [TREE_FEATURES_PROVIDER, TreeFocusManagerService], queries: [{ propertyName: "rootNodes", predicate: ClrTreeNode }], ngImport: i0, template: `
     <ng-content></ng-content>
     <clr-recursive-children
       *ngIf="featuresService.recursion"
@@ -19917,10 +20018,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                     host: {
                         tabindex: '0',
                         '[attr.role]': '"tree"',
-                        '[attr.aria-multiselectable]': 'isMultiSelectable',
                     },
                 }]
-        }], ctorParameters: function () { return [{ type: TreeFeaturesService }, { type: TreeFocusManagerService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { rootNodes: [{
+        }], ctorParameters: function () { return [{ type: TreeFeaturesService }, { type: TreeFocusManagerService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { rootNodes: [{
                 type: ContentChildren,
                 args: [ClrTreeNode]
             }], lazy: [{
@@ -20007,7 +20107,7 @@ class DropdownFocusHandler {
         this._unlistenFuncs = [];
         this.resetChildren();
         this.moveToFirstItemWhenOpen();
-        if (!this.parent) {
+        if (!parent) {
             this.handleRootFocus();
         }
     }
@@ -20205,11 +20305,10 @@ class ClrDropdown {
         this.parent = parent;
         this.toggleService = toggleService;
         this.focusHandler = focusHandler;
-        this.cdr = cdr;
         this.isMenuClosable = true;
         this.subscriptions = [];
-        this.subscriptions.push(dropdownService.changes.subscribe(value => (this.toggleService.open = value)));
-        this.subscriptions.push(toggleService.openChange.subscribe(() => this.cdr.markForCheck()));
+        this.subscriptions.push(dropdownService.changes.subscribe(value => (toggleService.open = value)));
+        this.subscriptions.push(toggleService.openChange.subscribe(() => cdr.markForCheck()));
     }
     ngOnDestroy() {
         this.subscriptions.forEach(sub => sub.unsubscribe());
@@ -21835,12 +21934,12 @@ class ClrHeader {
         this.isNavLevel2OnPage = false;
         this.openNavLevel = null;
         this.responsiveNavCodes = ResponsiveNavCodes;
-        this._subscription = this.responsiveNavService.registeredNavs.subscribe({
+        this._subscription = responsiveNavService.registeredNavs.subscribe({
             next: (navLevelList) => {
                 this.initializeNavTriggers(navLevelList);
             },
         });
-        this._subscription.add(this.responsiveNavService.navControl
+        this._subscription.add(responsiveNavService.navControl
             .pipe(filter(({ controlCode }) => controlCode === ResponsiveNavCodes.NAV_CLOSE || controlCode === ResponsiveNavCodes.NAV_CLOSE_ALL))
             .subscribe(() => {
             this.openNavLevel = null;
@@ -21974,15 +22073,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 const createCloseButton = (document, ariaLabel) => {
+    ClarityIcons.addIcons(timesIcon);
     const closeButton = document.createElement('button');
     closeButton.setAttribute('aria-label', ariaLabel);
     closeButton.setAttribute('aria-hidden', 'true');
     closeButton.innerHTML = `
     <cds-icon
       inner-offset="1"
-      shape="close"
+      shape="times"
       size="32"
-    </cds-icon>
+    ></cds-icon>
   `;
     /**
      * The button is hidden by default based on our Desktop-first approach.
@@ -22457,8 +22557,6 @@ class ClrTabLink {
         this.ifActiveService = ifActiveService;
         this.id = id;
         this.el = el;
-        this.cfr = cfr;
-        this.viewContainerRef = viewContainerRef;
         this.tabsService = tabsService;
         this.tabsId = tabsId;
         if (!this.tabLinkId) {
@@ -22467,9 +22565,9 @@ class ClrTabLink {
         // Tab links can be rendered in one of two places: in the main area or inside the overflow dropdown menu.
         // Here, we create a container so that its template can be used to create embeddedView on the fly.
         // See TabsService's renderView() method and how it's used in Tabs class for an example.
-        const factory = this.cfr.resolveComponentFactory(TemplateRefContainer);
-        this.templateRefContainer = this.viewContainerRef.createComponent(factory, undefined, undefined, [
-            [this.el.nativeElement],
+        const factory = cfr.resolveComponentFactory(TemplateRefContainer);
+        this.templateRefContainer = viewContainerRef.createComponent(factory, undefined, undefined, [
+            [el.nativeElement],
         ]).instance;
     }
     get inOverflow() {
@@ -23051,7 +23149,7 @@ class ClrVerticalNav {
         this._navGroupRegistrationService = _navGroupRegistrationService;
         this.commonStrings = commonStrings;
         this._collapsedChanged = new EventEmitter(true);
-        this._sub = this._navService.collapsedChanged.subscribe(value => {
+        this._sub = _navService.collapsedChanged.subscribe(value => {
             this._collapsedChanged.emit(value);
         });
     }
@@ -23139,27 +23237,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
 const EXPANDED_STATE = 'expanded';
 const COLLAPSED_STATE = 'collapsed';
 class ClrVerticalNavGroup {
-    constructor(_itemExpand, _navGroupRegistrationService, _navGroupService, _navService, commonStrings) {
+    constructor(_itemExpand, _navGroupRegistrationService, navGroupService, _navService, commonStrings) {
         this._itemExpand = _itemExpand;
         this._navGroupRegistrationService = _navGroupRegistrationService;
-        this._navGroupService = _navGroupService;
         this._navService = _navService;
         this.commonStrings = commonStrings;
         this.expandedChange = new EventEmitter(true);
         this.wasExpanded = false;
         this._subscriptions = [];
         this._expandAnimationState = COLLAPSED_STATE;
-        this._navGroupRegistrationService.registerNavGroup();
+        _navGroupRegistrationService.registerNavGroup();
         // FIXME: This subscription handles a corner case
         // Vertical Nav collapse requires the animation to run first and then
         // remove the nodes from the DOM. If the user directly sets the input
         // on the clrIfExpanded directive, we have no chance to run the animation
         // and wait for it to complete. This subscription makes sure that the
         // animation states are correct for that edge case.
-        this._subscriptions.push(this._itemExpand.expandChange.subscribe(value => {
+        this._subscriptions.push(_itemExpand.expandChange.subscribe(value => {
             if (value && this.expandAnimationState === COLLAPSED_STATE) {
-                if (this._navService.collapsed) {
-                    this._navService.collapsed = false;
+                if (_navService.collapsed) {
+                    _navService.collapsed = false;
                 }
                 this.expandAnimationState = EXPANDED_STATE;
             }
@@ -23169,7 +23266,7 @@ class ClrVerticalNavGroup {
         }));
         // 1. If the nav is collapsing, close the open nav group + save its state
         // 2. If the nav is expanding, expand the nav group if the previous state was expanded
-        this._subscriptions.push(this._navService.animateOnCollapsed.subscribe((goingToCollapse) => {
+        this._subscriptions.push(_navService.animateOnCollapsed.subscribe((goingToCollapse) => {
             if (goingToCollapse && this.expanded) {
                 this.wasExpanded = true;
                 this.expandAnimationState = COLLAPSED_STATE;
@@ -23180,7 +23277,7 @@ class ClrVerticalNavGroup {
             }
         }));
         // If a link is clicked, expand the nav group
-        this._subscriptions.push(this._navGroupService.expandChange.subscribe((expand) => {
+        this._subscriptions.push(navGroupService.expandChange.subscribe((expand) => {
             if (expand && !this.expanded) {
                 this.expandGroup();
             }
@@ -23309,7 +23406,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
 class ClrVerticalNavIcon {
     constructor(_verticalNavIconService) {
         this._verticalNavIconService = _verticalNavIconService;
-        this._verticalNavIconService.registerIcon();
+        _verticalNavIconService.registerIcon();
     }
     ngOnDestroy() {
         this._verticalNavIconService.unregisterIcon();
@@ -23473,9 +23570,10 @@ class ClrModalConfigurationService {
     }
 }
 ClrModalConfigurationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrModalConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ClrModalConfigurationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrModalConfigurationService });
+ClrModalConfigurationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrModalConfigurationService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrModalConfigurationService, decorators: [{
-            type: Injectable
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }] });
 
 /*
@@ -23657,11 +23755,11 @@ class ClrModalBody {
         this.unlisteners = [];
         ngZone.runOutsideAngular(() => {
             this.observer = new ResizeObserver(() => this.addOrRemoveTabIndex());
-            this.observer.observe(this.host.nativeElement);
-            this.unlisteners.push(this.renderer.listen(this.host.nativeElement, 'mouseup', () => {
+            this.observer.observe(host.nativeElement);
+            this.unlisteners.push(renderer.listen(host.nativeElement, 'mouseup', () => {
                 // set the tabindex binding back when click is completed with mouseup
                 this.addOrRemoveTabIndex();
-            }), this.renderer.listen(this.host.nativeElement, 'mousedown', () => {
+            }), renderer.listen(host.nativeElement, 'mousedown', () => {
                 // tabindex = 0 binding should be removed
                 // so it won't be focused when click starts with mousedown
                 this.removeTabIndex();
@@ -23714,14 +23812,13 @@ class ClrModalModule {
 }
 ClrModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 ClrModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.2", ngImport: i0, type: ClrModalModule, declarations: [ClrModal, ClrModalBody], imports: [CommonModule, CdkTrapFocusModule, ClrIconModule], exports: [ClrModal, ClrModalBody, ClrIconModule] });
-ClrModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrModalModule, providers: [ClrModalConfigurationService], imports: [CommonModule, CdkTrapFocusModule, ClrIconModule, ClrIconModule] });
+ClrModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrModalModule, imports: [CommonModule, CdkTrapFocusModule, ClrIconModule, ClrIconModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrModalModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, CdkTrapFocusModule, ClrIconModule],
                     declarations: [CLR_MODAL_DIRECTIVES],
                     exports: [CLR_MODAL_DIRECTIVES, ClrIconModule],
-                    providers: [ClrModalConfigurationService],
                 }]
         }], ctorParameters: function () { return []; } });
 
@@ -23879,7 +23976,6 @@ class ClrSignpostContent extends AbstractPopover {
     constructor(injector, parentHost, commonStrings, signpostIdService, signpostFocusManager, platformId, document) {
         super(injector, parentHost);
         this.commonStrings = commonStrings;
-        this.signpostIdService = signpostIdService;
         this.signpostFocusManager = signpostFocusManager;
         this.platformId = platformId;
         this.signpostContentId = uniqueIdFactory();
@@ -23889,7 +23985,7 @@ class ClrSignpostContent extends AbstractPopover {
         // Defaults
         this.position = 'right-middle';
         this.closeOnOutsideClick = true;
-        this.signpostIdService.setId(this.signpostContentId);
+        signpostIdService.setId(this.signpostContentId);
         this.document = document;
     }
     /*********
@@ -24274,11 +24370,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
 class ClrTooltipTrigger {
     constructor(toggleService, tooltipIdService, tooltipMouseService) {
         this.toggleService = toggleService;
-        this.tooltipIdService = tooltipIdService;
         this.tooltipMouseService = tooltipMouseService;
         this.subs = [];
         // The aria-described by comes from the id of content. It
-        this.subs.push(this.tooltipIdService.id.subscribe(tooltipId => (this.ariaDescribedBy = tooltipId)));
+        this.subs.push(tooltipIdService.id.subscribe(tooltipId => (this.ariaDescribedBy = tooltipId)));
     }
     ngOnDestroy() {
         this.subs.forEach(sub => sub.unsubscribe());
@@ -25390,7 +25485,7 @@ class WizardNavigationService {
          * @memberof WizardNavigationService
          */
         this._cancelWizard = new Subject();
-        this.previousButtonSubscription = this.buttonService.previousBtnClicked.subscribe(() => {
+        this.previousButtonSubscription = buttonService.previousBtnClicked.subscribe(() => {
             const currentPage = this.currentPage;
             if (this.currentPageIsFirst || currentPage.previousStepDisabled) {
                 return;
@@ -25400,21 +25495,21 @@ class WizardNavigationService {
                 this.previous();
             }
         });
-        this.nextButtonSubscription = this.buttonService.nextBtnClicked.subscribe(() => {
+        this.nextButtonSubscription = buttonService.nextBtnClicked.subscribe(() => {
             this.checkAndCommitCurrentPage('next');
         });
-        this.dangerButtonSubscription = this.buttonService.dangerBtnClicked.subscribe(() => {
+        this.dangerButtonSubscription = buttonService.dangerBtnClicked.subscribe(() => {
             this.checkAndCommitCurrentPage('danger');
         });
-        this.finishButtonSubscription = this.buttonService.finishBtnClicked.subscribe(() => {
+        this.finishButtonSubscription = buttonService.finishBtnClicked.subscribe(() => {
             this.checkAndCommitCurrentPage('finish');
         });
-        this.customButtonSubscription = this.buttonService.customBtnClicked.subscribe((type) => {
+        this.customButtonSubscription = buttonService.customBtnClicked.subscribe((type) => {
             if (!this.wizardStopNavigation) {
                 this.currentPage.customButtonClicked.emit(type);
             }
         });
-        this.cancelButtonSubscription = this.buttonService.cancelBtnClicked.subscribe(() => {
+        this.cancelButtonSubscription = buttonService.cancelBtnClicked.subscribe(() => {
             if (this.wizardStopNavigation) {
                 return;
             }
@@ -25425,7 +25520,7 @@ class WizardNavigationService {
                 this.cancel();
             }
         });
-        this.pagesResetSubscription = this.pageCollection.pagesReset.subscribe(() => {
+        this.pagesResetSubscription = pageCollection.pagesReset.subscribe(() => {
             this.setFirstPageCurrent();
         });
     }
@@ -26763,16 +26858,23 @@ ClrWizardStepnavItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
       [attr.disabled]="isDisabled ? '' : null"
     >
       <div class="clr-wizard-stepnav-link-icon">
-        <cds-icon *ngIf="hasError" shape="error-standard" aria-label="error"></cds-icon>
-        <cds-icon *ngIf="!hasError && isComplete" shape="success-standard" aria-label="complete"></cds-icon>
+        <cds-icon
+          *ngIf="hasError"
+          shape="error-standard"
+          [attr.aria-label]="commonStrings.keys.wizardStepError"
+        ></cds-icon>
+        <cds-icon
+          *ngIf="!hasError && isComplete"
+          shape="success-standard"
+          [attr.aria-label]="commonStrings.keys.wizardStepSuccess"
+        ></cds-icon>
       </div>
 
+      <span class="clr-sr-only">{{ commonStrings.keys.wizardStep }}</span>
       <div class="clr-wizard-stepnav-link-page-number"><ng-content></ng-content></div>
       <span class="clr-wizard-stepnav-link-title">
         <ng-template [ngTemplateOutlet]="page.navTitle"></ng-template>
       </span>
-      <span *ngIf="hasError" class="clr-sr-only">{{ commonStrings.keys.wizardStepError }}</span>
-      <span *ngIf="!hasError && isComplete" class="clr-sr-only">{{ commonStrings.keys.wizardStepSuccess }}</span>
     </button>
   `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrWizardStepnavItem, decorators: [{
@@ -26787,16 +26889,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
       [attr.disabled]="isDisabled ? '' : null"
     >
       <div class="clr-wizard-stepnav-link-icon">
-        <cds-icon *ngIf="hasError" shape="error-standard" aria-label="error"></cds-icon>
-        <cds-icon *ngIf="!hasError && isComplete" shape="success-standard" aria-label="complete"></cds-icon>
+        <cds-icon
+          *ngIf="hasError"
+          shape="error-standard"
+          [attr.aria-label]="commonStrings.keys.wizardStepError"
+        ></cds-icon>
+        <cds-icon
+          *ngIf="!hasError && isComplete"
+          shape="success-standard"
+          [attr.aria-label]="commonStrings.keys.wizardStepSuccess"
+        ></cds-icon>
       </div>
 
+      <span class="clr-sr-only">{{ commonStrings.keys.wizardStep }}</span>
       <div class="clr-wizard-stepnav-link-page-number"><ng-content></ng-content></div>
       <span class="clr-wizard-stepnav-link-title">
         <ng-template [ngTemplateOutlet]="page.navTitle"></ng-template>
       </span>
-      <span *ngIf="hasError" class="clr-sr-only">{{ commonStrings.keys.wizardStepError }}</span>
-      <span *ngIf="!hasError && isComplete" class="clr-sr-only">{{ commonStrings.keys.wizardStepSuccess }}</span>
     </button>
   `,
                     host: {
@@ -27976,5 +28085,5 @@ const CLR_MENU_POSITIONS = [
  * Generated bundle index. Do not edit.
  */
 
-export { CHANGE_KEYS, CLR_ALERT_DIRECTIVES, CLR_BUTTON_GROUP_DIRECTIVES, CLR_DATAGRID_DIRECTIVES, CLR_DATEPICKER_DIRECTIVES, CLR_DROPDOWN_DIRECTIVES, CLR_ICON_DIRECTIVES, CLR_LAYOUT_DIRECTIVES, CLR_LOADING_BUTTON_DIRECTIVES, CLR_LOADING_DIRECTIVES, CLR_MENU_POSITIONS, CLR_MODAL_DIRECTIVES, CLR_NAVIGATION_DIRECTIVES, CLR_PROGRESS_BAR_DIRECTIVES, CLR_SIDEPANEL_DIRECTIVES, CLR_SIGNPOST_DIRECTIVES, CLR_SPINNER_DIRECTIVES, CLR_STACK_VIEW_DIRECTIVES, CLR_TABS_DIRECTIVES, CLR_TOOLTIP_DIRECTIVES, CLR_TREE_VIEW_DIRECTIVES, CLR_VERTICAL_NAV_DIRECTIVES, CLR_WIZARD_DIRECTIVES, CONDITIONAL_DIRECTIVES, CUSTOM_BUTTON_TYPES, CdsIconCustomTag, ClarityModule, ClrAbstractContainer, ClrAccordion, ClrAccordionContent, ClrAccordionDescription, ClrAccordionModule, ClrAccordionPanel, ClrAccordionTitle, ClrAlert, ClrAlertItem, ClrAlertModule, ClrAlertText, ClrAlerts, ClrAlertsPager, ClrAlignment, ClrAriaCurrentLink, ClrAxis, ClrButton, ClrButtonGroup, ClrButtonGroupModule, ClrButtonModule, ClrCalendar, ClrCheckbox, ClrCheckboxContainer, ClrCheckboxModule, ClrCheckboxWrapper, ClrCombobox, ClrComboboxContainer, ClrComboboxModule, ClrCommonFormsModule, ClrCommonStringsService, ClrConditionalModule, ClrControl, ClrControlContainer, ClrControlError, ClrControlHelper, ClrControlSuccess, ClrDataModule, ClrDatagrid, ClrDatagridActionBar, ClrDatagridActionOverflow, ClrDatagridCell, ClrDatagridColumn, ClrDatagridColumnSeparator, ClrDatagridColumnToggle, ClrDatagridColumnToggleButton, ClrDatagridDetail, ClrDatagridDetailBody, ClrDatagridDetailHeader, ClrDatagridFilter, ClrDatagridFooter, ClrDatagridHideableColumn, ClrDatagridItems, ClrDatagridModule, ClrDatagridPageSize, ClrDatagridPagination, ClrDatagridPlaceholder, ClrDatagridRow, ClrDatagridRowDetail, ClrDatagridSortOrder, ClrDatalist, ClrDatalistContainer, ClrDatalistInput, ClrDatalistModule, ClrDateContainer, ClrDateInput, ClrDateInputValidator, ClrDatepickerModule, ClrDatepickerViewManager, ClrDay, ClrDaypicker, ClrDestroyService, ClrDropdown, ClrDropdownItem, ClrDropdownMenu, ClrDropdownModule, ClrDropdownTrigger, ClrEmphasisModule, ClrExpandableAnimation, ClrFileInput, ClrFileInputContainer, ClrFileInputModule, ClrFileInputValidator, ClrFileInputValueAccessor, ClrFocusOnViewInit, ClrFocusOnViewInitModule, ClrForm, ClrFormLayout, ClrFormsModule, ClrHeader, ClrIconCustomTag, ClrIconModule, ClrIfActive, ClrIfDetail, ClrIfError, ClrIfExpanded, ClrIfOpen, ClrIfSuccess, ClrInput, ClrInputContainer, ClrInputModule, ClrLabel, ClrLayout, ClrLayoutModule, ClrLoading, ClrLoadingButton, ClrLoadingButtonModule, ClrLoadingModule, ClrLoadingState, ClrMainContainer, ClrMainContainerModule, ClrModal, ClrModalBody, ClrModalModule, ClrMonthpicker, ClrNavLevel, ClrNavigationModule, ClrOption, ClrOptionItems, ClrOptionSelected, ClrOptions, ClrPassword, ClrPasswordContainer, ClrPasswordModule, ClrPopoverAnchor, ClrPopoverContent, ClrPopoverEventsService, ClrPopoverHostDirective, ClrPopoverModule, ClrPopoverPositionService, ClrPopoverToggleService, ClrProgressBar, ClrProgressBarModule, ClrRadio, ClrRadioContainer, ClrRadioModule, ClrRadioWrapper, ClrRange, ClrRangeContainer, ClrRangeModule, ClrRecursiveForOf, ClrSelect, ClrSelectContainer, ClrSelectModule, ClrSelectedState, ClrSide, ClrSidePanel, ClrSidePanelModule, ClrSignpost, ClrSignpostContent, ClrSignpostModule, ClrSignpostTrigger, ClrSpinner, ClrSpinnerModule, ClrStackBlock, ClrStackContentInput, ClrStackHeader, ClrStackView, ClrStackViewCustomTags, ClrStackViewLabel, ClrStackViewModule, ClrStandaloneCdkTrapFocus, ClrStepButton, ClrStepButtonType, ClrStepper, ClrStepperModule, ClrStepperPanel, ClrStopEscapePropagationDirective, ClrTab, ClrTabContent, ClrTabLink, ClrTabOverflowContent, ClrTabs, ClrTabsModule, ClrTextarea, ClrTextareaContainer, ClrTextareaModule, ClrTimeline, ClrTimelineLayout, ClrTimelineModule, ClrTimelineStep, ClrTimelineStepDescription, ClrTimelineStepHeader, ClrTimelineStepState, ClrTimelineStepTitle, ClrTooltip, ClrTooltipContent, ClrTooltipModule, ClrTooltipTrigger, ClrTree, ClrTreeNode, ClrTreeNodeLink, ClrTreeViewModule, ClrVerticalNav, ClrVerticalNavGroup, ClrVerticalNavGroupChildren, ClrVerticalNavIcon, ClrVerticalNavLink, ClrVerticalNavModule, ClrWizard, ClrWizardButton, ClrWizardHeaderAction, ClrWizardModule, ClrWizardPage, ClrWizardPageButtons, ClrWizardPageHeaderActions, ClrWizardPageNavTitle, ClrWizardPageTitle, ClrWizardStepnav, ClrWizardStepnavItem, ClrWizardTitle, ClrYearpicker, DEFAULT_BUTTON_TYPES, DatagridNumericFilter, DatagridPropertyComparator, DatagridPropertyNumericFilter, DatagridPropertyStringFilter, DatagridStringFilter, EXPANDABLE_ANIMATION_DIRECTIVES, FOCUS_ON_VIEW_INIT, FOCUS_ON_VIEW_INIT_DIRECTIVES, IS_TOGGLE, IS_TOGGLE_PROVIDER, LoadingListener, MainContainerWillyWonka, NavDetectionOompaLoompa, TOGGLE_SERVICE, TOGGLE_SERVICE_PROVIDER, ToggleServiceFactory, WrappedFormControl, collapse, commonStringsDefault, fade, fadeSlide, isToggleFactory, slide, AccordionOompaLoompa as ÇlrAccordionOompaLoompa, AccordionWillyWonka as ÇlrAccordionWillyWonka, ActionableOompaLoompa as ÇlrActionableOompaLoompa, ActiveOompaLoompa as ÇlrActiveOompaLoompa, ClrPopoverCloseButton as ÇlrClrPopoverCloseButton, ClrPopoverModuleNext as ÇlrClrPopoverModuleNext, ClrPopoverOpenCloseButton as ÇlrClrPopoverOpenCloseButton, DatagridCellRenderer as ÇlrDatagridCellRenderer, DatagridDetailRegisterer as ÇlrDatagridDetailRegisterer, DatagridHeaderRenderer as ÇlrDatagridHeaderRenderer, DatagridMainRenderer as ÇlrDatagridMainRenderer, DatagridRowRenderer as ÇlrDatagridRowRenderer, ClrDatagridSelectionCellDirective as ÇlrDatagridSelectionCellDirective, ClrDatagridVirtualScrollDirective as ÇlrDatagridVirtualScrollDirective, DatagridWillyWonka as ÇlrDatagridWillyWonka, ExpandableOompaLoompa as ÇlrExpandableOompaLoompa, StepperOompaLoompa as ÇlrStepperOompaLoompa, StepperWillyWonka as ÇlrStepperWillyWonka, TabsWillyWonka as ÇlrTabsWillyWonka, WrappedCell as ÇlrWrappedCell, WrappedColumn as ÇlrWrappedColumn, WrappedRow as ÇlrWrappedRow };
+export { CHANGE_KEYS, CLR_ALERT_DIRECTIVES, CLR_BUTTON_GROUP_DIRECTIVES, CLR_DATAGRID_DIRECTIVES, CLR_DATEPICKER_DIRECTIVES, CLR_DROPDOWN_DIRECTIVES, CLR_ICON_DIRECTIVES, CLR_LAYOUT_DIRECTIVES, CLR_LOADING_BUTTON_DIRECTIVES, CLR_LOADING_DIRECTIVES, CLR_MENU_POSITIONS, CLR_MODAL_DIRECTIVES, CLR_NAVIGATION_DIRECTIVES, CLR_PROGRESS_BAR_DIRECTIVES, CLR_SIDEPANEL_DIRECTIVES, CLR_SIGNPOST_DIRECTIVES, CLR_SPINNER_DIRECTIVES, CLR_STACK_VIEW_DIRECTIVES, CLR_TABS_DIRECTIVES, CLR_TOOLTIP_DIRECTIVES, CLR_TREE_VIEW_DIRECTIVES, CLR_VERTICAL_NAV_DIRECTIVES, CLR_WIZARD_DIRECTIVES, CONDITIONAL_DIRECTIVES, CUSTOM_BUTTON_TYPES, CdsIconCustomTag, ClarityModule, ClrAbstractContainer, ClrAccordion, ClrAccordionContent, ClrAccordionDescription, ClrAccordionModule, ClrAccordionPanel, ClrAccordionTitle, ClrAlert, ClrAlertItem, ClrAlertModule, ClrAlertText, ClrAlerts, ClrAlertsPager, ClrAlignment, ClrAriaCurrentLink, ClrAxis, ClrButton, ClrButtonGroup, ClrButtonGroupModule, ClrButtonModule, ClrCalendar, ClrCheckbox, ClrCheckboxContainer, ClrCheckboxModule, ClrCheckboxWrapper, ClrCombobox, ClrComboboxContainer, ClrComboboxModule, ClrCommonFormsModule, ClrCommonStringsService, ClrConditionalModule, ClrControl, ClrControlContainer, ClrControlError, ClrControlHelper, ClrControlSuccess, ClrDataModule, ClrDatagrid, ClrDatagridActionBar, ClrDatagridActionOverflow, ClrDatagridCell, ClrDatagridColumn, ClrDatagridColumnSeparator, ClrDatagridColumnToggle, ClrDatagridColumnToggleButton, ClrDatagridDetail, ClrDatagridDetailBody, ClrDatagridDetailHeader, ClrDatagridFilter, ClrDatagridFooter, ClrDatagridHideableColumn, ClrDatagridItems, ClrDatagridModule, ClrDatagridPageSize, ClrDatagridPagination, ClrDatagridPlaceholder, ClrDatagridRow, ClrDatagridRowDetail, ClrDatagridSortOrder, ClrDatalist, ClrDatalistContainer, ClrDatalistInput, ClrDatalistModule, ClrDateContainer, ClrDateInput, ClrDateInputValidator, ClrDatepickerModule, ClrDatepickerViewManager, ClrDay, ClrDaypicker, ClrDestroyService, ClrDropdown, ClrDropdownItem, ClrDropdownMenu, ClrDropdownModule, ClrDropdownTrigger, ClrEmphasisModule, ClrExpandableAnimation, ClrFileInput, ClrFileInputContainer, ClrFileInputModule, ClrFileInputValidator, ClrFileInputValueAccessor, ClrFocusOnViewInit, ClrFocusOnViewInitModule, ClrForm, ClrFormLayout, ClrFormsModule, ClrHeader, ClrIconCustomTag, ClrIconModule, ClrIfActive, ClrIfDetail, ClrIfError, ClrIfExpanded, ClrIfOpen, ClrIfSuccess, ClrInput, ClrInputContainer, ClrInputModule, ClrLabel, ClrLayout, ClrLayoutModule, ClrLoading, ClrLoadingButton, ClrLoadingButtonModule, ClrLoadingModule, ClrLoadingState, ClrMainContainer, ClrMainContainerModule, ClrModal, ClrModalBody, ClrModalConfigurationService, ClrModalModule, ClrMonthpicker, ClrNavLevel, ClrNavigationModule, ClrOption, ClrOptionItems, ClrOptionSelected, ClrOptions, ClrPassword, ClrPasswordContainer, ClrPasswordModule, ClrPopoverAnchor, ClrPopoverContent, ClrPopoverEventsService, ClrPopoverHostDirective, ClrPopoverModule, ClrPopoverPositionService, ClrPopoverToggleService, ClrProgressBar, ClrProgressBarModule, ClrRadio, ClrRadioContainer, ClrRadioModule, ClrRadioWrapper, ClrRange, ClrRangeContainer, ClrRangeModule, ClrRecursiveForOf, ClrSelect, ClrSelectContainer, ClrSelectModule, ClrSelectedState, ClrSide, ClrSidePanel, ClrSidePanelModule, ClrSignpost, ClrSignpostContent, ClrSignpostModule, ClrSignpostTrigger, ClrSpinner, ClrSpinnerModule, ClrStackBlock, ClrStackContentInput, ClrStackHeader, ClrStackView, ClrStackViewCustomTags, ClrStackViewLabel, ClrStackViewModule, ClrStandaloneCdkTrapFocus, ClrStepButton, ClrStepButtonType, ClrStepper, ClrStepperModule, ClrStepperPanel, ClrStopEscapePropagationDirective, ClrTab, ClrTabContent, ClrTabLink, ClrTabOverflowContent, ClrTabs, ClrTabsModule, ClrTextarea, ClrTextareaContainer, ClrTextareaModule, ClrTimeline, ClrTimelineLayout, ClrTimelineModule, ClrTimelineStep, ClrTimelineStepDescription, ClrTimelineStepHeader, ClrTimelineStepState, ClrTimelineStepTitle, ClrTooltip, ClrTooltipContent, ClrTooltipModule, ClrTooltipTrigger, ClrTree, ClrTreeNode, ClrTreeNodeLink, ClrTreeViewModule, ClrVerticalNav, ClrVerticalNavGroup, ClrVerticalNavGroupChildren, ClrVerticalNavIcon, ClrVerticalNavLink, ClrVerticalNavModule, ClrWizard, ClrWizardButton, ClrWizardHeaderAction, ClrWizardModule, ClrWizardPage, ClrWizardPageButtons, ClrWizardPageHeaderActions, ClrWizardPageNavTitle, ClrWizardPageTitle, ClrWizardStepnav, ClrWizardStepnavItem, ClrWizardTitle, ClrYearpicker, DEFAULT_BUTTON_TYPES, DatagridNumericFilter, DatagridPropertyComparator, DatagridPropertyNumericFilter, DatagridPropertyStringFilter, DatagridStringFilter, EXPANDABLE_ANIMATION_DIRECTIVES, FOCUS_ON_VIEW_INIT, FOCUS_ON_VIEW_INIT_DIRECTIVES, IS_TOGGLE, IS_TOGGLE_PROVIDER, LoadingListener, MainContainerWillyWonka, NavDetectionOompaLoompa, TOGGLE_SERVICE, TOGGLE_SERVICE_PROVIDER, ToggleServiceFactory, WrappedFormControl, collapse, commonStringsDefault, fade, fadeSlide, isToggleFactory, slide, AccordionOompaLoompa as ÇlrAccordionOompaLoompa, AccordionWillyWonka as ÇlrAccordionWillyWonka, ActionableOompaLoompa as ÇlrActionableOompaLoompa, ActiveOompaLoompa as ÇlrActiveOompaLoompa, ClrPopoverCloseButton as ÇlrClrPopoverCloseButton, ClrPopoverModuleNext as ÇlrClrPopoverModuleNext, ClrPopoverOpenCloseButton as ÇlrClrPopoverOpenCloseButton, DatagridCellRenderer as ÇlrDatagridCellRenderer, DatagridDetailRegisterer as ÇlrDatagridDetailRegisterer, DatagridHeaderRenderer as ÇlrDatagridHeaderRenderer, DatagridMainRenderer as ÇlrDatagridMainRenderer, DatagridRowRenderer as ÇlrDatagridRowRenderer, ClrDatagridSelectionCellDirective as ÇlrDatagridSelectionCellDirective, ClrDatagridVirtualScrollDirective as ÇlrDatagridVirtualScrollDirective, DatagridWillyWonka as ÇlrDatagridWillyWonka, ExpandableOompaLoompa as ÇlrExpandableOompaLoompa, StepperOompaLoompa as ÇlrStepperOompaLoompa, StepperWillyWonka as ÇlrStepperWillyWonka, TabsWillyWonka as ÇlrTabsWillyWonka, WrappedCell as ÇlrWrappedCell, WrappedColumn as ÇlrWrappedColumn, WrappedRow as ÇlrWrappedRow };
 //# sourceMappingURL=clr-angular.mjs.map