@clr/angular 17.2.1 → 17.3.1

package/fesm2015/clr-angular.mjs

@@ -19,7 +19,6 @@ import { _RecycleViewRepeaterStrategy } from '@angular/cdk/collections';
 import * as i3$1 from '@angular/cdk/scrolling';
 import { FixedSizeVirtualScrollStrategy, CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import * as i1$3 from '@angular/router';
-import '@cds/core/internal-components/close-button/register.js';
 import '@cds/core/icon/register';
 
 /*
@@ -397,6 +396,9 @@ const commonStringsDefault = {
     fileCount: '{COUNT} files',
     clearFile: 'Clear {FILE}',
     clearFiles: 'Clear {COUNT} files',
+    // Tree
+    selectedTreeNode: 'selected',
+    unselectedTreeNode: 'unselected',
 };
 
 /*
@@ -1164,6 +1166,9 @@ class ClrStepperPanel extends ClrAccordionPanel {
             // set panel status on form status change only after the form becomes invalid
             const invalidStatusTrigger = this.formGroup.statusChanges.pipe(filter(status => status === 'INVALID'));
             this.subscriptions.push(this.formGroup.statusChanges.pipe(skipUntil(invalidStatusTrigger), distinctUntilChanged()).subscribe(status => {
+                if (!this.formGroup.touched) {
+                    return;
+                }
                 if (status === 'VALID') {
                     this.stepperService.setPanelValid(this.id);
                 }
@@ -1180,9 +1185,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) {
@@ -2232,6 +2235,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.
@@ -2253,9 +2257,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() {
@@ -2373,7 +2382,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);
         }));
     }
@@ -3329,7 +3338,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);
         });
     }
@@ -3421,7 +3430,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);
         });
@@ -3491,7 +3500,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() {
@@ -3636,7 +3645,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
@@ -3647,8 +3656,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);
             }
         }));
     }
@@ -4508,12 +4517,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
@@ -4769,14 +4777,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;
         }));
     }
@@ -5032,10 +5040,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);
@@ -5259,12 +5267,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);
             }));
         }
@@ -5642,8 +5650,10 @@ ClrCheckboxContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
     <label *ngIf="!label && addGrid()"></label>
     <div class="clr-control-container" [class.clr-control-inline]="clrInline" [ngClass]="controlClass()">
       <ng-content select="clr-checkbox-wrapper,clr-toggle-wrapper"></ng-content>
-      <div class="clr-subtext-wrapper">
-        <ng-content select="clr-control-helper" *ngIf="showHelper"></ng-content>
+      <div *ngIf="showHelper" class="clr-subtext-wrapper">
+        <ng-content select="clr-control-helper"></ng-content>
+      </div>
+      <div *ngIf="showInvalid || showValid" class="clr-subtext-wrapper">
         <cds-icon
           *ngIf="showInvalid"
           class="clr-validate-icon"
@@ -5672,8 +5682,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
     <label *ngIf="!label && addGrid()"></label>
     <div class="clr-control-container" [class.clr-control-inline]="clrInline" [ngClass]="controlClass()">
       <ng-content select="clr-checkbox-wrapper,clr-toggle-wrapper"></ng-content>
-      <div class="clr-subtext-wrapper">
-        <ng-content select="clr-control-helper" *ngIf="showHelper"></ng-content>
+      <div *ngIf="showHelper" class="clr-subtext-wrapper">
+        <ng-content select="clr-control-helper"></ng-content>
+      </div>
+      <div *ngIf="showInvalid || showValid" class="clr-subtext-wrapper">
         <cds-icon
           *ngIf="showInvalid"
           class="clr-validate-icon"
@@ -6835,7 +6847,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;
@@ -6863,7 +6875,8 @@ class ClrOption {
             this.optionProxy.id = this._id;
         }
     }
-    onClick() {
+    onClick(event) {
+        event.stopPropagation();
         if (this.optionSelectionService.multiselectable) {
             this.optionSelectionService.toggle(this.value);
         }
@@ -6878,7 +6891,7 @@ class ClrOption {
     }
 }
 ClrOption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrOption, deps: [{ token: i0.ElementRef }, { token: ClrCommonStringsService }, { token: ComboboxFocusHandler }, { token: OptionSelectionService }], target: i0.ɵɵFactoryTarget.Component });
-ClrOption.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrOption, selector: "clr-option", inputs: { optionId: ["id", "optionId"], value: ["clrValue", "value"] }, host: { listeners: { "click": "onClick()" }, properties: { "class.clr-combobox-option": "true", "attr.role": "\"option\"", "attr.tabindex": "-1", "attr.id": "optionId", "class.active": "this.selected", "class.clr-focus": "this.focusClass" } }, ngImport: i0, template: `
+ClrOption.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrOption, selector: "clr-option", inputs: { optionId: ["id", "optionId"], value: ["clrValue", "value"] }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.clr-combobox-option": "true", "attr.role": "\"option\"", "attr.tabindex": "-1", "attr.id": "optionId", "class.active": "this.selected", "class.clr-focus": "this.focusClass" } }, ngImport: i0, template: `
     <ng-content></ng-content>
     <span *ngIf="selected" class="clr-sr-only">{{ commonStrings.keys.comboboxSelected }}</span>
   `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
@@ -6912,7 +6925,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                 args: ['class.clr-focus']
             }], onClick: [{
                 type: HostListener,
-                args: ['click']
+                args: ['click', ['$event']]
             }] } });
 
 /*
@@ -7100,7 +7113,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() {
@@ -7402,11 +7415,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();
@@ -7790,10 +7802,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 });
@@ -7899,7 +7910,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>');
         }
     }
@@ -8681,8 +8692,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
@@ -8693,7 +8703,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() {
@@ -9114,7 +9124,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;
         }
@@ -9712,18 +9722,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) {
@@ -10732,7 +10741,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;
         }));
     }
@@ -10884,12 +10893,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');
         }));
     }
@@ -11092,8 +11100,10 @@ ClrRadioContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
     <label *ngIf="!label && addGrid()"></label>
     <div class="clr-control-container" [class.clr-control-inline]="clrInline" [ngClass]="controlClass()">
       <ng-content select="clr-radio-wrapper"></ng-content>
-      <div class="clr-subtext-wrapper">
-        <ng-content select="clr-control-helper" *ngIf="showHelper"></ng-content>
+      <div *ngIf="showHelper" class="clr-subtext-wrapper">
+        <ng-content select="clr-control-helper"></ng-content>
+      </div>
+      <div *ngIf="showValid || showInvalid" class="clr-subtext-wrapper">
         <cds-icon
           *ngIf="showInvalid"
           class="clr-validate-icon"
@@ -11122,8 +11132,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
     <label *ngIf="!label && addGrid()"></label>
     <div class="clr-control-container" [class.clr-control-inline]="clrInline" [ngClass]="controlClass()">
       <ng-content select="clr-radio-wrapper"></ng-content>
-      <div class="clr-subtext-wrapper">
-        <ng-content select="clr-control-helper" *ngIf="showHelper"></ng-content>
+      <div *ngIf="showHelper" class="clr-subtext-wrapper">
+        <ng-content select="clr-control-helper"></ng-content>
+      </div>
+      <div *ngIf="showValid || showInvalid" class="clr-subtext-wrapper">
         <cds-icon
           *ngIf="showInvalid"
           class="clr-validate-icon"
@@ -12207,7 +12219,7 @@ function getTabableItems(el) {
         'iframe',
         'object',
         'embed',
-        '*[tabindex]',
+        '*[tabindex]:not([disabled])',
         '*[contenteditable=true]',
         '[role=button]:not([disabled])',
     ].join(',');
@@ -14492,11 +14504,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();
@@ -14569,9 +14580,9 @@ class ClrDatagridPlaceholder {
 }
 ClrDatagridPlaceholder.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagridPlaceholder, deps: [{ token: Items }], target: i0.ɵɵFactoryTarget.Component });
 ClrDatagridPlaceholder.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrDatagridPlaceholder, selector: "clr-dg-placeholder", host: { properties: { "class.datagrid-placeholder-container": "true" } }, ngImport: i0, template: `
-    <div class="datagrid-placeholder" [class.datagrid-empty]="emptyDatagrid" role="row">
+    <div class="datagrid-placeholder" [class.datagrid-empty]="emptyDatagrid">
       <div class="datagrid-placeholder-image" *ngIf="emptyDatagrid"></div>
-      <span role="gridcell" class="datagrid-placeholder-content"><ng-content *ngIf="emptyDatagrid"></ng-content></span>
+      <span class="datagrid-placeholder-content"><ng-content *ngIf="emptyDatagrid"></ng-content></span>
     </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagridPlaceholder, decorators: [{
@@ -14579,9 +14590,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
             args: [{
                     selector: 'clr-dg-placeholder',
                     template: `
-    <div class="datagrid-placeholder" [class.datagrid-empty]="emptyDatagrid" role="row">
+    <div class="datagrid-placeholder" [class.datagrid-empty]="emptyDatagrid">
       <div class="datagrid-placeholder-image" *ngIf="emptyDatagrid"></div>
-      <span role="gridcell" class="datagrid-placeholder-content"><ng-content *ngIf="emptyDatagrid"></ng-content></span>
+      <span class="datagrid-placeholder-content"><ng-content *ngIf="emptyDatagrid"></ng-content></span>
     </div>
   `,
                     host: { '[class.datagrid-placeholder-container]': 'true' },
@@ -14994,9 +15005,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.
@@ -15017,13 +15027,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) {
@@ -15035,10 +15045,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;
@@ -15052,7 +15062,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.
@@ -15073,7 +15083,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
@@ -15082,7 +15092,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);
                         }
@@ -15092,7 +15102,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) {
@@ -15102,7 +15112,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;
@@ -15421,13 +15431,13 @@ 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;
         this.selectedChanged = new EventEmitter(false);
         this.expandedChange = new EventEmitter(false);
+        this.detailDisabled = false;
+        this.detailHidden = false;
         this.displayCells = false;
         this.expandAnimationTrigger = false;
         /* reference to the enum so that template can access */
@@ -15448,17 +15458,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');
             }
         }));
     }
@@ -15655,11 +15665,11 @@ class ClrDatagridRow {
     }
 }
 ClrDatagridRow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagridRow, deps: [{ token: Selection }, { token: RowActionService }, { token: ExpandableRowsCount }, { token: DatagridIfExpandService }, { token: DetailService }, { token: DisplayModeService }, { token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: ClrCommonStringsService }, { token: Items }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-ClrDatagridRow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrDatagridRow, selector: "clr-dg-row", inputs: { item: ["clrDgItem", "item"], clrDgSelectable: "clrDgSelectable", selected: ["clrDgSelected", "selected"], expanded: ["clrDgExpanded", "expanded"], clrDgDetailOpenLabel: "clrDgDetailOpenLabel", clrDgDetailCloseLabel: "clrDgDetailCloseLabel", clrDgRowSelectionLabel: "clrDgRowSelectionLabel" }, outputs: { selectedChanged: "clrDgSelectedChange", expandedChange: "clrDgExpandedChange" }, host: { attributes: { "role": "rowgroup" }, properties: { "class.datagrid-row": "true", "class.datagrid-selected": "selected", "attr.aria-owns": "id" } }, providers: [
+ClrDatagridRow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrDatagridRow, selector: "clr-dg-row", inputs: { detailDisabled: ["clrDgDetailDisabled", "detailDisabled"], detailHidden: ["clrDgDetailHidden", "detailHidden"], item: ["clrDgItem", "item"], clrDgSelectable: "clrDgSelectable", selected: ["clrDgSelected", "selected"], expanded: ["clrDgExpanded", "expanded"], clrDgDetailOpenLabel: "clrDgDetailOpenLabel", clrDgDetailCloseLabel: "clrDgDetailCloseLabel", clrDgRowSelectionLabel: "clrDgRowSelectionLabel" }, outputs: { selectedChanged: "clrDgSelectedChange", expandedChange: "clrDgExpandedChange" }, host: { attributes: { "role": "rowgroup" }, properties: { "class.datagrid-row": "true", "class.datagrid-selected": "selected", "attr.aria-owns": "id" } }, providers: [
         DatagridIfExpandService,
         { provide: IfExpandService, useExisting: DatagridIfExpandService },
         { provide: LoadingListener, useExisting: DatagridIfExpandService },
-    ], queries: [{ propertyName: "dgCells", predicate: ClrDatagridCell }], viewQueries: [{ propertyName: "expandAnimation", first: true, predicate: ClrExpandableAnimation, descendants: true }, { propertyName: "detailButton", first: true, predicate: ["detailButton"], descendants: true }, { propertyName: "_stickyCells", first: true, predicate: ["stickyCells"], descendants: true, read: ViewContainerRef }, { propertyName: "_scrollableCells", first: true, predicate: ["scrollableCells"], descendants: true, read: ViewContainerRef }, { propertyName: "_calculatedCells", first: true, predicate: ["calculatedCells"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n  We need to wrap the #rowContent in label element if we are in rowSelectionMode.\n  Clicking of that wrapper label will equate to clicking on the whole row, which triggers the checkbox to toggle.\n-->\n<div\n  class=\"datagrid-row-clickable\"\n  *ngIf=\"selection.rowSelectionMode\"\n  (mousedown)=\"clearRanges($event)\"\n  (click)=\"selectRow(!selected, $event)\"\n>\n  <clr-expandable-animation [clrExpandTrigger]=\"expandAnimationTrigger\" *ngIf=\"expand.expandable\">\n    <ng-template [ngTemplateOutlet]=\"rowContent\"></ng-template>\n  </clr-expandable-animation>\n  <ng-template [ngTemplateOutlet]=\"rowContent\" *ngIf=\"!expand.expandable\"></ng-template>\n</div>\n\n<clr-expandable-animation\n  *ngIf=\"!selection.rowSelectionMode && expand.expandable\"\n  [clrExpandTrigger]=\"expandAnimationTrigger\"\n>\n  <ng-template [ngTemplateOutlet]=\"rowContent\"></ng-template>\n</clr-expandable-animation>\n\n<ng-template *ngIf=\"!selection.rowSelectionMode && !expand.expandable\" [ngTemplateOutlet]=\"rowContent\"></ng-template>\n\n<!--\n    We need the \"project into template\" hacks because we need this in 2 different places\n    depending on whether the details replace the row or not.\n-->\n<ng-template #detail>\n  <ng-content select=\"clr-dg-row-detail\"></ng-content>\n</ng-template>\n\n<ng-template #rowContent>\n  <div\n    role=\"row\"\n    [id]=\"id\"\n    class=\"datagrid-row-master datagrid-row-flex\"\n    [class.datagrid-row-detail-open]=\"detailService.isRowOpen(item)\"\n  >\n    <div class=\"datagrid-row-sticky\">\n      <!-- Sticky elements here -->\n      <ng-container #stickyCells>\n        <div\n          *ngIf=\"selection.selectionType === SELECTION_TYPE.Multi\"\n          class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n          [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n          role=\"gridcell\"\n        >\n          <clr-checkbox-wrapper>\n            <input\n              tabindex=\"-1\"\n              type=\"checkbox\"\n              clrCheckbox\n              [ngModel]=\"selected\"\n              (ngModelChange)=\"toggle($event)\"\n              [id]=\"checkboxId\"\n              [disabled]=\"clrDgSelectable ? null : true\"\n              [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n            />\n            <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a datagrid is wrapped inside clrForm -->\n            <label [for]=\"checkboxId\" class=\"clr-control-label clr-col-null\" (click)=\"clearRanges($event)\">\n              <span class=\"clr-sr-only\">{{clrDgRowSelectionLabel || commonStrings.keys.select}}</span>\n            </label>\n          </clr-checkbox-wrapper>\n        </div>\n        <div\n          *ngIf=\"selection.selectionType === SELECTION_TYPE.Single\"\n          class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n          [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n          role=\"gridcell\"\n        >\n          <clr-radio-wrapper>\n            <input\n              tabindex=\"-1\"\n              type=\"radio\"\n              clrRadio\n              [id]=\"radioId\"\n              [name]=\"selection.id + '-radio'\"\n              [value]=\"item\"\n              [(ngModel)]=\"selection.currentSingle\"\n              [checked]=\"selection.currentSingle === item\"\n              [disabled]=\"clrDgSelectable ? null : true\"\n              [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n            />\n            <label class=\"clr-control-label clr-col-null\" [for]=\"radioId\">\n              <span class=\"clr-sr-only\">{{ clrDgRowSelectionLabel || commonStrings.keys.select }}</span>\n            </label>\n          </clr-radio-wrapper>\n        </div>\n        <div\n          *ngIf=\"rowActionService.hasActionableRow\"\n          class=\"datagrid-row-actions datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n        >\n          <ng-content select=\"clr-dg-action-overflow\"></ng-content>\n        </div>\n        <div\n          *ngIf=\"globalExpandable.hasExpandableRow\"\n          class=\"datagrid-expandable-caret datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n        >\n          <ng-container *ngIf=\"expand.expandable\">\n            <button\n              tabindex=\"-1\"\n              *ngIf=\"!expand.loading\"\n              (click)=\"toggleExpand()\"\n              type=\"button\"\n              class=\"datagrid-expandable-caret-button\"\n              [attr.aria-expanded]=\"expand.expanded\"\n              [attr.aria-label]=\"expand.expanded ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n              [attr.aria-controls]=\"expandableId\"\n            >\n              <cds-icon\n                shape=\"angle\"\n                class=\"datagrid-expandable-caret-icon\"\n                [attr.direction]=\"expand.expanded ? 'down' : 'right'\"\n                [attr.title]=\"expand.expanded ? commonStrings.keys.collapse : commonStrings.keys.expand\"\n              ></cds-icon>\n            </button>\n            <clr-spinner *ngIf=\"expand.loading\" clrSmall>{{ commonStrings.keys.loading }}</clr-spinner>\n          </ng-container>\n        </div>\n        <div\n          *ngIf=\"detailService.enabled\"\n          class=\"datagrid-detail-caret datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n        >\n          <button\n            tabindex=\"-1\"\n            (click)=\"detailService.toggle(item, detailButton)\"\n            type=\"button\"\n            #detailButton\n            class=\"datagrid-detail-caret-button\"\n            [class.is-open]=\"detailService.isRowOpen(item)\"\n            [attr.aria-label]=\"detailService.isRowOpen(item) ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n            [attr.aria-expanded]=\"detailService.isRowOpen(item)\"\n            [attr.aria-controls]=\"detailService.id\"\n            aria-haspopup=\"dialog\"\n          >\n            <cds-icon\n              shape=\"angle-double\"\n              [attr.direction]=\"detailService.isRowOpen(item) ? 'left' : 'right'\"\n              class=\"datagrid-detail-caret-icon\"\n              [attr.title]=\"detailService.isRowOpen(item) ? commonStrings.keys.close: commonStrings.keys.open\"\n            ></cds-icon>\n          </button>\n        </div>\n      </ng-container>\n      <!-- placeholder for projecting other sticky cells as pinned-->\n    </div>\n    <div class=\"datagrid-row-scrollable\" [ngClass]=\"{'is-replaced': replaced && expanded}\">\n      <div class=\"datagrid-scrolling-cells\">\n        <ng-content select=\"clr-dg-cell\"></ng-content>\n        <ng-container #scrollableCells></ng-container>\n      </div>\n      <!-- details here when replace, re-visit when sticky container is used for pinned cells -->\n      <ng-template *ngIf=\"replaced && !expand.loading\" [ngTemplateOutlet]=\"detail\"></ng-template>\n      <ng-template *ngIf=\"!replaced && !expand.loading\" [ngTemplateOutlet]=\"detail\"></ng-template>\n    </div>\n  </div>\n</ng-template>\n\n<ng-container #calculatedCells></ng-container>\n", 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: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: ClrRadio, selector: "[clrRadio]" }, { kind: "component", type: ClrRadioWrapper, selector: "clr-radio-wrapper" }, { 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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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: ClrExpandableAnimation, selector: "clr-expandable-animation", inputs: ["clrExpandTrigger"] }, { kind: "component", type: ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }, { kind: "directive", type: ClrDatagridSelectionCellDirective, selector: ".datagrid-select" }] });
+    ], queries: [{ propertyName: "dgCells", predicate: ClrDatagridCell }], viewQueries: [{ propertyName: "expandAnimation", first: true, predicate: ClrExpandableAnimation, descendants: true }, { propertyName: "detailButton", first: true, predicate: ["detailButton"], descendants: true }, { propertyName: "_stickyCells", first: true, predicate: ["stickyCells"], descendants: true, read: ViewContainerRef }, { propertyName: "_scrollableCells", first: true, predicate: ["scrollableCells"], descendants: true, read: ViewContainerRef }, { propertyName: "_calculatedCells", first: true, predicate: ["calculatedCells"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n  We need to wrap the #rowContent in label element if we are in rowSelectionMode.\n  Clicking of that wrapper label will equate to clicking on the whole row, which triggers the checkbox to toggle.\n-->\n<div\n  class=\"datagrid-row-clickable\"\n  *ngIf=\"selection.rowSelectionMode\"\n  (mousedown)=\"clearRanges($event)\"\n  (click)=\"selectRow(!selected, $event)\"\n>\n  <clr-expandable-animation [clrExpandTrigger]=\"expandAnimationTrigger\" *ngIf=\"expand.expandable\">\n    <ng-template [ngTemplateOutlet]=\"rowContent\"></ng-template>\n  </clr-expandable-animation>\n  <ng-template [ngTemplateOutlet]=\"rowContent\" *ngIf=\"!expand.expandable\"></ng-template>\n</div>\n\n<clr-expandable-animation\n  *ngIf=\"!selection.rowSelectionMode && expand.expandable\"\n  [clrExpandTrigger]=\"expandAnimationTrigger\"\n>\n  <ng-template [ngTemplateOutlet]=\"rowContent\"></ng-template>\n</clr-expandable-animation>\n\n<ng-template *ngIf=\"!selection.rowSelectionMode && !expand.expandable\" [ngTemplateOutlet]=\"rowContent\"></ng-template>\n\n<!--\n    We need the \"project into template\" hacks because we need this in 2 different places\n    depending on whether the details replace the row or not.\n-->\n<ng-template #detail>\n  <ng-content select=\"clr-dg-row-detail\"></ng-content>\n</ng-template>\n\n<ng-template #rowContent>\n  <div\n    role=\"row\"\n    [id]=\"id\"\n    class=\"datagrid-row-master datagrid-row-flex\"\n    [class.datagrid-row-detail-open]=\"detailService.isRowOpen(item)\"\n  >\n    <div class=\"datagrid-row-sticky\">\n      <!-- Sticky elements here -->\n      <ng-container #stickyCells>\n        <div\n          *ngIf=\"selection.selectionType === SELECTION_TYPE.Multi\"\n          class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n          [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n          role=\"gridcell\"\n        >\n          <clr-checkbox-wrapper>\n            <input\n              tabindex=\"-1\"\n              type=\"checkbox\"\n              clrCheckbox\n              [ngModel]=\"selected\"\n              (ngModelChange)=\"toggle($event)\"\n              [id]=\"checkboxId\"\n              [disabled]=\"clrDgSelectable ? null : true\"\n              [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n            />\n            <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a datagrid is wrapped inside clrForm -->\n            <label [for]=\"checkboxId\" class=\"clr-control-label clr-col-null\" (click)=\"clearRanges($event)\">\n              <span class=\"clr-sr-only\">{{clrDgRowSelectionLabel || commonStrings.keys.select}}</span>\n            </label>\n          </clr-checkbox-wrapper>\n        </div>\n        <div\n          *ngIf=\"selection.selectionType === SELECTION_TYPE.Single\"\n          class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n          [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n          role=\"gridcell\"\n        >\n          <clr-radio-wrapper>\n            <input\n              tabindex=\"-1\"\n              type=\"radio\"\n              clrRadio\n              [id]=\"radioId\"\n              [name]=\"selection.id + '-radio'\"\n              [value]=\"item\"\n              [(ngModel)]=\"selection.currentSingle\"\n              [checked]=\"selection.currentSingle === item\"\n              [disabled]=\"clrDgSelectable ? null : true\"\n              [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n            />\n            <label class=\"clr-control-label clr-col-null\" [for]=\"radioId\">\n              <span class=\"clr-sr-only\">{{ clrDgRowSelectionLabel || commonStrings.keys.select }}</span>\n            </label>\n          </clr-radio-wrapper>\n        </div>\n        <div\n          *ngIf=\"rowActionService.hasActionableRow\"\n          class=\"datagrid-row-actions datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n        >\n          <ng-content select=\"clr-dg-action-overflow\"></ng-content>\n        </div>\n        <div\n          *ngIf=\"globalExpandable.hasExpandableRow\"\n          class=\"datagrid-expandable-caret datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n        >\n          <ng-container *ngIf=\"expand.expandable\">\n            <button\n              tabindex=\"-1\"\n              *ngIf=\"!expand.loading\"\n              (click)=\"toggleExpand()\"\n              type=\"button\"\n              class=\"datagrid-expandable-caret-button\"\n              [attr.aria-expanded]=\"expand.expanded\"\n              [attr.aria-label]=\"expand.expanded ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n              [attr.aria-controls]=\"expandableId\"\n            >\n              <cds-icon\n                shape=\"angle\"\n                class=\"datagrid-expandable-caret-icon\"\n                [attr.direction]=\"expand.expanded ? 'down' : 'right'\"\n                [attr.title]=\"expand.expanded ? commonStrings.keys.collapse : commonStrings.keys.expand\"\n              ></cds-icon>\n            </button>\n            <clr-spinner *ngIf=\"expand.loading\" clrSmall>{{ commonStrings.keys.loading }}</clr-spinner>\n          </ng-container>\n        </div>\n        <div\n          *ngIf=\"detailService.enabled\"\n          class=\"datagrid-detail-caret datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n        >\n          <button\n            tabindex=\"-1\"\n            (click)=\"detailService.toggle(item, detailButton)\"\n            type=\"button\"\n            #detailButton\n            class=\"datagrid-detail-caret-button\"\n            [disabled]=\"detailDisabled\"\n            *ngIf=\"!detailHidden\"\n            [class.is-open]=\"detailService.isRowOpen(item)\"\n            [attr.aria-label]=\"detailService.isRowOpen(item) ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n            [attr.aria-expanded]=\"detailService.isRowOpen(item)\"\n            [attr.aria-controls]=\"detailService.id\"\n            aria-haspopup=\"dialog\"\n          >\n            <cds-icon\n              shape=\"angle-double\"\n              [attr.direction]=\"detailService.isRowOpen(item) ? 'left' : 'right'\"\n              class=\"datagrid-detail-caret-icon\"\n              [attr.title]=\"detailService.isRowOpen(item) ? commonStrings.keys.close: commonStrings.keys.open\"\n            ></cds-icon>\n          </button>\n        </div>\n      </ng-container>\n      <!-- placeholder for projecting other sticky cells as pinned-->\n    </div>\n    <div class=\"datagrid-row-scrollable\" [ngClass]=\"{'is-replaced': replaced && expanded}\">\n      <div class=\"datagrid-scrolling-cells\">\n        <ng-content select=\"clr-dg-cell\"></ng-content>\n        <ng-container #scrollableCells></ng-container>\n      </div>\n      <!-- details here when replace, re-visit when sticky container is used for pinned cells -->\n      <ng-template *ngIf=\"replaced && !expand.loading\" [ngTemplateOutlet]=\"detail\"></ng-template>\n      <ng-template *ngIf=\"!replaced && !expand.loading\" [ngTemplateOutlet]=\"detail\"></ng-template>\n    </div>\n  </div>\n</ng-template>\n\n<ng-container #calculatedCells></ng-container>\n", 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: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: ClrRadio, selector: "[clrRadio]" }, { kind: "component", type: ClrRadioWrapper, selector: "clr-radio-wrapper" }, { 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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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: ClrExpandableAnimation, selector: "clr-expandable-animation", inputs: ["clrExpandTrigger"] }, { kind: "component", type: ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }, { kind: "directive", type: ClrDatagridSelectionCellDirective, selector: ".datagrid-select" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagridRow, decorators: [{
             type: Component,
             args: [{ selector: 'clr-dg-row', host: {
@@ -15671,7 +15681,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                         DatagridIfExpandService,
                         { provide: IfExpandService, useExisting: DatagridIfExpandService },
                         { provide: LoadingListener, useExisting: DatagridIfExpandService },
-                    ], template: "<!--\n  We need to wrap the #rowContent in label element if we are in rowSelectionMode.\n  Clicking of that wrapper label will equate to clicking on the whole row, which triggers the checkbox to toggle.\n-->\n<div\n  class=\"datagrid-row-clickable\"\n  *ngIf=\"selection.rowSelectionMode\"\n  (mousedown)=\"clearRanges($event)\"\n  (click)=\"selectRow(!selected, $event)\"\n>\n  <clr-expandable-animation [clrExpandTrigger]=\"expandAnimationTrigger\" *ngIf=\"expand.expandable\">\n    <ng-template [ngTemplateOutlet]=\"rowContent\"></ng-template>\n  </clr-expandable-animation>\n  <ng-template [ngTemplateOutlet]=\"rowContent\" *ngIf=\"!expand.expandable\"></ng-template>\n</div>\n\n<clr-expandable-animation\n  *ngIf=\"!selection.rowSelectionMode && expand.expandable\"\n  [clrExpandTrigger]=\"expandAnimationTrigger\"\n>\n  <ng-template [ngTemplateOutlet]=\"rowContent\"></ng-template>\n</clr-expandable-animation>\n\n<ng-template *ngIf=\"!selection.rowSelectionMode && !expand.expandable\" [ngTemplateOutlet]=\"rowContent\"></ng-template>\n\n<!--\n    We need the \"project into template\" hacks because we need this in 2 different places\n    depending on whether the details replace the row or not.\n-->\n<ng-template #detail>\n  <ng-content select=\"clr-dg-row-detail\"></ng-content>\n</ng-template>\n\n<ng-template #rowContent>\n  <div\n    role=\"row\"\n    [id]=\"id\"\n    class=\"datagrid-row-master datagrid-row-flex\"\n    [class.datagrid-row-detail-open]=\"detailService.isRowOpen(item)\"\n  >\n    <div class=\"datagrid-row-sticky\">\n      <!-- Sticky elements here -->\n      <ng-container #stickyCells>\n        <div\n          *ngIf=\"selection.selectionType === SELECTION_TYPE.Multi\"\n          class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n          [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n          role=\"gridcell\"\n        >\n          <clr-checkbox-wrapper>\n            <input\n              tabindex=\"-1\"\n              type=\"checkbox\"\n              clrCheckbox\n              [ngModel]=\"selected\"\n              (ngModelChange)=\"toggle($event)\"\n              [id]=\"checkboxId\"\n              [disabled]=\"clrDgSelectable ? null : true\"\n              [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n            />\n            <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a datagrid is wrapped inside clrForm -->\n            <label [for]=\"checkboxId\" class=\"clr-control-label clr-col-null\" (click)=\"clearRanges($event)\">\n              <span class=\"clr-sr-only\">{{clrDgRowSelectionLabel || commonStrings.keys.select}}</span>\n            </label>\n          </clr-checkbox-wrapper>\n        </div>\n        <div\n          *ngIf=\"selection.selectionType === SELECTION_TYPE.Single\"\n          class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n          [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n          role=\"gridcell\"\n        >\n          <clr-radio-wrapper>\n            <input\n              tabindex=\"-1\"\n              type=\"radio\"\n              clrRadio\n              [id]=\"radioId\"\n              [name]=\"selection.id + '-radio'\"\n              [value]=\"item\"\n              [(ngModel)]=\"selection.currentSingle\"\n              [checked]=\"selection.currentSingle === item\"\n              [disabled]=\"clrDgSelectable ? null : true\"\n              [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n            />\n            <label class=\"clr-control-label clr-col-null\" [for]=\"radioId\">\n              <span class=\"clr-sr-only\">{{ clrDgRowSelectionLabel || commonStrings.keys.select }}</span>\n            </label>\n          </clr-radio-wrapper>\n        </div>\n        <div\n          *ngIf=\"rowActionService.hasActionableRow\"\n          class=\"datagrid-row-actions datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n        >\n          <ng-content select=\"clr-dg-action-overflow\"></ng-content>\n        </div>\n        <div\n          *ngIf=\"globalExpandable.hasExpandableRow\"\n          class=\"datagrid-expandable-caret datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n        >\n          <ng-container *ngIf=\"expand.expandable\">\n            <button\n              tabindex=\"-1\"\n              *ngIf=\"!expand.loading\"\n              (click)=\"toggleExpand()\"\n              type=\"button\"\n              class=\"datagrid-expandable-caret-button\"\n              [attr.aria-expanded]=\"expand.expanded\"\n              [attr.aria-label]=\"expand.expanded ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n              [attr.aria-controls]=\"expandableId\"\n            >\n              <cds-icon\n                shape=\"angle\"\n                class=\"datagrid-expandable-caret-icon\"\n                [attr.direction]=\"expand.expanded ? 'down' : 'right'\"\n                [attr.title]=\"expand.expanded ? commonStrings.keys.collapse : commonStrings.keys.expand\"\n              ></cds-icon>\n            </button>\n            <clr-spinner *ngIf=\"expand.loading\" clrSmall>{{ commonStrings.keys.loading }}</clr-spinner>\n          </ng-container>\n        </div>\n        <div\n          *ngIf=\"detailService.enabled\"\n          class=\"datagrid-detail-caret datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n        >\n          <button\n            tabindex=\"-1\"\n            (click)=\"detailService.toggle(item, detailButton)\"\n            type=\"button\"\n            #detailButton\n            class=\"datagrid-detail-caret-button\"\n            [class.is-open]=\"detailService.isRowOpen(item)\"\n            [attr.aria-label]=\"detailService.isRowOpen(item) ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n            [attr.aria-expanded]=\"detailService.isRowOpen(item)\"\n            [attr.aria-controls]=\"detailService.id\"\n            aria-haspopup=\"dialog\"\n          >\n            <cds-icon\n              shape=\"angle-double\"\n              [attr.direction]=\"detailService.isRowOpen(item) ? 'left' : 'right'\"\n              class=\"datagrid-detail-caret-icon\"\n              [attr.title]=\"detailService.isRowOpen(item) ? commonStrings.keys.close: commonStrings.keys.open\"\n            ></cds-icon>\n          </button>\n        </div>\n      </ng-container>\n      <!-- placeholder for projecting other sticky cells as pinned-->\n    </div>\n    <div class=\"datagrid-row-scrollable\" [ngClass]=\"{'is-replaced': replaced && expanded}\">\n      <div class=\"datagrid-scrolling-cells\">\n        <ng-content select=\"clr-dg-cell\"></ng-content>\n        <ng-container #scrollableCells></ng-container>\n      </div>\n      <!-- details here when replace, re-visit when sticky container is used for pinned cells -->\n      <ng-template *ngIf=\"replaced && !expand.loading\" [ngTemplateOutlet]=\"detail\"></ng-template>\n      <ng-template *ngIf=\"!replaced && !expand.loading\" [ngTemplateOutlet]=\"detail\"></ng-template>\n    </div>\n  </div>\n</ng-template>\n\n<ng-container #calculatedCells></ng-container>\n" }]
+                    ], template: "<!--\n  We need to wrap the #rowContent in label element if we are in rowSelectionMode.\n  Clicking of that wrapper label will equate to clicking on the whole row, which triggers the checkbox to toggle.\n-->\n<div\n  class=\"datagrid-row-clickable\"\n  *ngIf=\"selection.rowSelectionMode\"\n  (mousedown)=\"clearRanges($event)\"\n  (click)=\"selectRow(!selected, $event)\"\n>\n  <clr-expandable-animation [clrExpandTrigger]=\"expandAnimationTrigger\" *ngIf=\"expand.expandable\">\n    <ng-template [ngTemplateOutlet]=\"rowContent\"></ng-template>\n  </clr-expandable-animation>\n  <ng-template [ngTemplateOutlet]=\"rowContent\" *ngIf=\"!expand.expandable\"></ng-template>\n</div>\n\n<clr-expandable-animation\n  *ngIf=\"!selection.rowSelectionMode && expand.expandable\"\n  [clrExpandTrigger]=\"expandAnimationTrigger\"\n>\n  <ng-template [ngTemplateOutlet]=\"rowContent\"></ng-template>\n</clr-expandable-animation>\n\n<ng-template *ngIf=\"!selection.rowSelectionMode && !expand.expandable\" [ngTemplateOutlet]=\"rowContent\"></ng-template>\n\n<!--\n    We need the \"project into template\" hacks because we need this in 2 different places\n    depending on whether the details replace the row or not.\n-->\n<ng-template #detail>\n  <ng-content select=\"clr-dg-row-detail\"></ng-content>\n</ng-template>\n\n<ng-template #rowContent>\n  <div\n    role=\"row\"\n    [id]=\"id\"\n    class=\"datagrid-row-master datagrid-row-flex\"\n    [class.datagrid-row-detail-open]=\"detailService.isRowOpen(item)\"\n  >\n    <div class=\"datagrid-row-sticky\">\n      <!-- Sticky elements here -->\n      <ng-container #stickyCells>\n        <div\n          *ngIf=\"selection.selectionType === SELECTION_TYPE.Multi\"\n          class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n          [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n          role=\"gridcell\"\n        >\n          <clr-checkbox-wrapper>\n            <input\n              tabindex=\"-1\"\n              type=\"checkbox\"\n              clrCheckbox\n              [ngModel]=\"selected\"\n              (ngModelChange)=\"toggle($event)\"\n              [id]=\"checkboxId\"\n              [disabled]=\"clrDgSelectable ? null : true\"\n              [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n            />\n            <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a datagrid is wrapped inside clrForm -->\n            <label [for]=\"checkboxId\" class=\"clr-control-label clr-col-null\" (click)=\"clearRanges($event)\">\n              <span class=\"clr-sr-only\">{{clrDgRowSelectionLabel || commonStrings.keys.select}}</span>\n            </label>\n          </clr-checkbox-wrapper>\n        </div>\n        <div\n          *ngIf=\"selection.selectionType === SELECTION_TYPE.Single\"\n          class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n          [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n          role=\"gridcell\"\n        >\n          <clr-radio-wrapper>\n            <input\n              tabindex=\"-1\"\n              type=\"radio\"\n              clrRadio\n              [id]=\"radioId\"\n              [name]=\"selection.id + '-radio'\"\n              [value]=\"item\"\n              [(ngModel)]=\"selection.currentSingle\"\n              [checked]=\"selection.currentSingle === item\"\n              [disabled]=\"clrDgSelectable ? null : true\"\n              [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n            />\n            <label class=\"clr-control-label clr-col-null\" [for]=\"radioId\">\n              <span class=\"clr-sr-only\">{{ clrDgRowSelectionLabel || commonStrings.keys.select }}</span>\n            </label>\n          </clr-radio-wrapper>\n        </div>\n        <div\n          *ngIf=\"rowActionService.hasActionableRow\"\n          class=\"datagrid-row-actions datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n        >\n          <ng-content select=\"clr-dg-action-overflow\"></ng-content>\n        </div>\n        <div\n          *ngIf=\"globalExpandable.hasExpandableRow\"\n          class=\"datagrid-expandable-caret datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n        >\n          <ng-container *ngIf=\"expand.expandable\">\n            <button\n              tabindex=\"-1\"\n              *ngIf=\"!expand.loading\"\n              (click)=\"toggleExpand()\"\n              type=\"button\"\n              class=\"datagrid-expandable-caret-button\"\n              [attr.aria-expanded]=\"expand.expanded\"\n              [attr.aria-label]=\"expand.expanded ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n              [attr.aria-controls]=\"expandableId\"\n            >\n              <cds-icon\n                shape=\"angle\"\n                class=\"datagrid-expandable-caret-icon\"\n                [attr.direction]=\"expand.expanded ? 'down' : 'right'\"\n                [attr.title]=\"expand.expanded ? commonStrings.keys.collapse : commonStrings.keys.expand\"\n              ></cds-icon>\n            </button>\n            <clr-spinner *ngIf=\"expand.loading\" clrSmall>{{ commonStrings.keys.loading }}</clr-spinner>\n          </ng-container>\n        </div>\n        <div\n          *ngIf=\"detailService.enabled\"\n          class=\"datagrid-detail-caret datagrid-fixed-column datagrid-cell\"\n          role=\"gridcell\"\n        >\n          <button\n            tabindex=\"-1\"\n            (click)=\"detailService.toggle(item, detailButton)\"\n            type=\"button\"\n            #detailButton\n            class=\"datagrid-detail-caret-button\"\n            [disabled]=\"detailDisabled\"\n            *ngIf=\"!detailHidden\"\n            [class.is-open]=\"detailService.isRowOpen(item)\"\n            [attr.aria-label]=\"detailService.isRowOpen(item) ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n            [attr.aria-expanded]=\"detailService.isRowOpen(item)\"\n            [attr.aria-controls]=\"detailService.id\"\n            aria-haspopup=\"dialog\"\n          >\n            <cds-icon\n              shape=\"angle-double\"\n              [attr.direction]=\"detailService.isRowOpen(item) ? 'left' : 'right'\"\n              class=\"datagrid-detail-caret-icon\"\n              [attr.title]=\"detailService.isRowOpen(item) ? commonStrings.keys.close: commonStrings.keys.open\"\n            ></cds-icon>\n          </button>\n        </div>\n      </ng-container>\n      <!-- placeholder for projecting other sticky cells as pinned-->\n    </div>\n    <div class=\"datagrid-row-scrollable\" [ngClass]=\"{'is-replaced': replaced && expanded}\">\n      <div class=\"datagrid-scrolling-cells\">\n        <ng-content select=\"clr-dg-cell\"></ng-content>\n        <ng-container #scrollableCells></ng-container>\n      </div>\n      <!-- details here when replace, re-visit when sticky container is used for pinned cells -->\n      <ng-template *ngIf=\"replaced && !expand.loading\" [ngTemplateOutlet]=\"detail\"></ng-template>\n      <ng-template *ngIf=\"!replaced && !expand.loading\" [ngTemplateOutlet]=\"detail\"></ng-template>\n    </div>\n  </div>\n</ng-template>\n\n<ng-container #calculatedCells></ng-container>\n" }]
         }], ctorParameters: function () {
         return [{ type: Selection }, { type: RowActionService }, { type: ExpandableRowsCount }, { type: DatagridIfExpandService }, { type: DetailService }, { type: DisplayModeService }, { type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: ClrCommonStringsService }, { type: Items }, { type: undefined, decorators: [{
                         type: Inject,
@@ -15683,6 +15693,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
             }], expandedChange: [{
                 type: Output,
                 args: ['clrDgExpandedChange']
+            }], detailDisabled: [{
+                type: Input,
+                args: ['clrDgDetailDisabled']
+            }], detailHidden: [{
+                type: Input,
+                args: ['clrDgDetailHidden']
             }], dgCells: [{
                 type: ContentChildren,
                 args: [ClrDatagridCell]
@@ -15973,7 +15989,7 @@ class DatagridRowRenderer {
     }
 }
 DatagridRowRenderer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: DatagridRowRenderer, deps: [{ token: ColumnsService }], target: i0.ɵɵFactoryTarget.Directive });
-DatagridRowRenderer.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", type: DatagridRowRenderer, selector: "clr-dg-row, clr-dg-row-detail", queries: [{ propertyName: "cells", predicate: DatagridCellRenderer }], ngImport: i0 });
+DatagridRowRenderer.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", type: DatagridRowRenderer, selector: "clr-dg-row, clr-dg-row-detail", queries: [{ propertyName: "expandableRow", first: true, predicate: i0.forwardRef(function () { return DatagridRowRenderer; }), descendants: true }, { propertyName: "cells", predicate: DatagridCellRenderer }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: DatagridRowRenderer, decorators: [{
             type: Directive,
             args: [{
@@ -15982,6 +15998,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
         }], ctorParameters: function () { return [{ type: ColumnsService }]; }, propDecorators: { cells: [{
                 type: ContentChildren,
                 args: [DatagridCellRenderer]
+            }], expandableRow: [{
+                type: ContentChild,
+                args: [forwardRef(() => DatagridRowRenderer)]
             }] } });
 
 /*
@@ -15991,7 +16010,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;
@@ -16005,7 +16024,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;
@@ -16027,7 +16045,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
@@ -16117,30 +16135,17 @@ class ClrDatagrid {
             this.rows.forEach(row => {
                 this._displayedRows.insert(row._view);
             });
-            // Try to update only when there is something cached and its open.
-            if (this.detailService.state && this.detailService.isOpen) {
-                const row = this.rows.find(row => this.items.trackBy(row.item) === this.items.trackBy(this.detailService.state));
-                /**
-                 * Reopen updated row or close it
-                 */
-                if (row) {
-                    this.detailService.open(row.item, row.detailButton.nativeElement);
-                    // always keep open when virtual scroll is available otherwise close it
-                }
-                else if (!this.hasVirtualScroller) {
-                    // Using setTimeout to make sure the inner cycles in rows are done
-                    setTimeout(() => {
-                        this.detailService.close();
+            this.updateDetailState();
+            // retain active cell when navigating with Up/Down Arrows, PageUp and PageDown buttons in virtual scroller
+            if (this.hasVirtualScroller) {
+                const active = this.keyNavigation.getActiveCell();
+                const isFocusInsideDatagrid = this.datagrid.nativeElement.contains(document.activeElement);
+                if (active && isFocusInsideDatagrid) {
+                    this.zone.runOutsideAngular(() => {
+                        setTimeout(() => this.keyNavigation.setActiveCell(active));
                     });
                 }
             }
-            // retain active cell when navigating with Up/Down Arrows, PageUp and PageDown buttons in virtual scroller
-            const active = this.keyNavigation.getActiveCell();
-            if (active) {
-                this.zone.runOutsideAngular(() => {
-                    setTimeout(() => this.keyNavigation.setActiveCell(active));
-                });
-            }
         }));
     }
     /**
@@ -16148,6 +16153,7 @@ class ClrDatagrid {
      */
     ngAfterViewInit() {
         this.keyNavigation.initializeKeyGrid(this.el.nativeElement);
+        this.updateDetailState();
         // TODO: determine if we can get rid of provider wiring in view init so that subscriptions can be done earlier
         this.refresh.emit(this.stateProvider.state);
         this._subscriptions.push(this.stateProvider.change.subscribe(state => this.refresh.emit(state)), this.selection.change.subscribe(s => {
@@ -16231,6 +16237,29 @@ class ClrDatagrid {
     resize() {
         this.organizer.resize();
     }
+    /**
+     * Checks the state of detail panel and if it's opened then
+     * find the matching row and trigger the detail panel
+     */
+    updateDetailState() {
+        // Try to update only when there is something cached and its open.
+        if (this.detailService.state && this.detailService.isOpen) {
+            const row = this.rows.find(row => this.items.trackBy(row.item) === this.items.trackBy(this.detailService.state));
+            /**
+             * Reopen updated row or close it
+             */
+            if (row) {
+                this.detailService.open(row.item, row.detailButton.nativeElement);
+                // always keep open when virtual scroll is available otherwise close it
+            }
+            else if (!this.hasVirtualScroller) {
+                // Using setTimeout to make sure the inner cycles in rows are done
+                setTimeout(() => {
+                    this.detailService.close();
+                });
+            }
+        }
+    }
     /**
      * Public method to re-trigger the computation of displayed items manually
      */
@@ -16238,7 +16267,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,
@@ -16255,7 +16284,7 @@ ClrDatagrid.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
         ColumnsService,
         DisplayModeService,
         KeyNavigationGridController,
-    ], queries: [{ propertyName: "iterator", first: true, predicate: ClrDatagridItems, descendants: true }, { propertyName: "placeholder", first: true, predicate: ClrDatagridPlaceholder, descendants: true }, { propertyName: "columns", predicate: ClrDatagridColumn }, { propertyName: "rows", predicate: ClrDatagridRow }], viewQueries: [{ propertyName: "datagrid", first: true, predicate: ["datagrid"], descendants: true, read: ElementRef }, { propertyName: "datagridTable", first: true, predicate: ["datagridTable"], descendants: true, read: ElementRef }, { propertyName: "scrollableColumns", first: true, predicate: ["scrollableColumns"], descendants: true, read: ViewContainerRef }, { propertyName: "_projectedDisplayColumns", first: true, predicate: ["projectedDisplayColumns"], descendants: true, read: ViewContainerRef }, { propertyName: "_projectedCalculationColumns", first: true, predicate: ["projectedCalculationColumns"], descendants: true, read: ViewContainerRef }, { propertyName: "_displayedRows", first: true, predicate: ["displayedRows"], descendants: true, read: ViewContainerRef }, { propertyName: "_calculationRows", first: true, predicate: ["calculationRows"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-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<ng-content select=\"clr-dg-action-bar\"></ng-content>\n<div class=\"datagrid-outer-wrapper\">\n  <div class=\"datagrid-inner-wrapper\">\n    <div class=\"datagrid\" #datagrid [attr.aria-hidden]=\"detailService.isOpen ? true : null\">\n      <div class=\"datagrid-table-wrapper\">\n        <div role=\"grid\" class=\"datagrid-table\" tabindex=\"-1\" #datagridTable>\n          <div role=\"rowgroup\" class=\"datagrid-header\">\n            <div role=\"row\" class=\"datagrid-row\">\n              <div class=\"datagrid-row-master datagrid-row-flex\">\n                <div class=\"datagrid-row-sticky\">\n                  <!--header for datagrid where you can select multiple rows -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n                    *ngIf=\"selection.selectionType === SELECTION_TYPE.Multi\"\n                    (keydown.space)=\"toggleAllSelected($event)\"\n                  >\n                    <div *ngIf=\"!hasVirtualScroller\" class=\"clr-checkbox-wrapper\">\n                      <!-- We need to move focus and space-key handling to the parent because of keyboard arrow key navigation,\n                           which is not able to transfer focus directly on the input when focused with the tab key -->\n                      <input\n                        type=\"checkbox\"\n                        [id]=\"selectAllId\"\n                        [(ngModel)]=\"allSelected\"\n                        [attr.aria-label]=\"commonStrings.keys.selectAll\"\n                        tabindex=\"-1\"\n                      />\n                      <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a datagrid is wrapped inside clrForm -->\n                      <label [for]=\"selectAllId\" class=\"clr-control-label clr-col-null\">\n                        <span class=\"clr-sr-only\">{{commonStrings.keys.selectAll}}</span>\n                      </label>\n                    </div>\n\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for datagrid where you can select one row only -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n                    *ngIf=\"selection.selectionType === SELECTION_TYPE.Single\"\n                  >\n                    <div class=\"clr-sr-only\">{{clrDgSingleSelectionAriaLabel}}</div>\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for single row action; only displayType if we have at least one actionable row in datagrid -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-row-actions datagrid-fixed-column\"\n                    *ngIf=\"rowActionService.hasActionableRow\"\n                  >\n                    <div class=\"clr-sr-only\">{{clrDgSingleActionableAriaLabel}}</div>\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for carets; only displayType if we have at least one expandable row in datagrid -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-expandable-caret datagrid-fixed-column\"\n                    *ngIf=\"expandableRows.hasExpandableRow || detailService.enabled\"\n                  >\n                    <div class=\"clr-sr-only\">{{clrDetailExpandableAriaLabel}}</div>\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                </div>\n                <div class=\"datagrid-row-scrollable\">\n                  <ng-container #projectedDisplayColumns></ng-container>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div role=\"presentation\" class=\"datagrid-rows\">\n            <clr-dg-row class=\"datagrid-row-loading\" *ngIf=\"loadingMoreItems\">\n              <clr-dg-cell>\n                <clr-spinner clrMedium></clr-spinner>\n                <span>{{ commonStrings.keys.loading }}</span>\n              </clr-dg-cell>\n            </clr-dg-row>\n\n            <ng-container #displayedRows></ng-container>\n\n            <clr-dg-row class=\"datagrid-row-loading\" *ngIf=\"loadingMoreItems\">\n              <clr-dg-cell>\n                <clr-spinner clrMedium></clr-spinner>\n                <span>{{ commonStrings.keys.loading }}</span>\n              </clr-dg-cell>\n            </clr-dg-row>\n\n            <!-- Custom placeholder overrides the default empty one -->\n            <ng-content select=\"clr-dg-placeholder\"></ng-content>\n            <clr-dg-placeholder *ngIf=\"!placeholder\"></clr-dg-placeholder>\n          </div>\n        </div>\n      </div>\n    </div>\n    <ng-content select=\"clr-dg-footer\"></ng-content>\n    <div class=\"datagrid-spinner\" *ngIf=\"loading\">\n      <clr-spinner clrMedium>Loading</clr-spinner>\n    </div>\n  </div>\n  <ng-content select=\"[clrIfDetail],clr-dg-detail\"></ng-content>\n</div>\n\n<div class=\"datagrid-calculation-table\">\n  <div class=\"datagrid-calculation-header\">\n    <ng-container #projectedCalculationColumns></ng-container>\n  </div>\n  <ng-container #calculationRows></ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][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: ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }, { kind: "component", type: ClrDatagridCell, selector: "clr-dg-cell" }, { kind: "component", type: ClrDatagridPlaceholder, selector: "clr-dg-placeholder" }, { kind: "component", type: ClrDatagridRow, selector: "clr-dg-row", inputs: ["clrDgItem", "clrDgSelectable", "clrDgSelected", "clrDgExpanded", "clrDgDetailOpenLabel", "clrDgDetailCloseLabel", "clrDgRowSelectionLabel"], outputs: ["clrDgSelectedChange", "clrDgExpandedChange"] }, { kind: "directive", type: ClrDatagridSelectionCellDirective, selector: ".datagrid-select" }, { kind: "directive", type: DatagridCellRenderer, selector: "clr-dg-cell" }, { kind: "directive", type: DatagridRowRenderer, selector: "clr-dg-row, clr-dg-row-detail" }, { kind: "directive", type: ActionableOompaLoompa, selector: "clr-datagrid, clr-dg-row" }, { kind: "directive", type: ExpandableOompaLoompa, selector: "clr-datagrid, clr-dg-row" }] });
+    ], queries: [{ propertyName: "iterator", first: true, predicate: ClrDatagridItems, descendants: true }, { propertyName: "placeholder", first: true, predicate: ClrDatagridPlaceholder, descendants: true }, { propertyName: "columns", predicate: ClrDatagridColumn }, { propertyName: "rows", predicate: ClrDatagridRow }], viewQueries: [{ propertyName: "datagrid", first: true, predicate: ["datagrid"], descendants: true, read: ElementRef }, { propertyName: "datagridTable", first: true, predicate: ["datagridTable"], descendants: true, read: ElementRef }, { propertyName: "scrollableColumns", first: true, predicate: ["scrollableColumns"], descendants: true, read: ViewContainerRef }, { propertyName: "_projectedDisplayColumns", first: true, predicate: ["projectedDisplayColumns"], descendants: true, read: ViewContainerRef }, { propertyName: "_projectedCalculationColumns", first: true, predicate: ["projectedCalculationColumns"], descendants: true, read: ViewContainerRef }, { propertyName: "_displayedRows", first: true, predicate: ["displayedRows"], descendants: true, read: ViewContainerRef }, { propertyName: "_calculationRows", first: true, predicate: ["calculationRows"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-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<ng-content select=\"clr-dg-action-bar\"></ng-content>\n<div class=\"datagrid-outer-wrapper\">\n  <div class=\"datagrid-inner-wrapper\">\n    <div class=\"datagrid\" #datagrid [attr.aria-hidden]=\"detailService.isOpen ? true : null\">\n      <div class=\"datagrid-table-wrapper\">\n        <div role=\"grid\" class=\"datagrid-table\" tabindex=\"-1\" #datagridTable>\n          <div role=\"rowgroup\" class=\"datagrid-header\">\n            <div role=\"row\" class=\"datagrid-row\">\n              <div class=\"datagrid-row-master datagrid-row-flex\">\n                <div class=\"datagrid-row-sticky\">\n                  <!--header for datagrid where you can select multiple rows -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n                    *ngIf=\"selection.selectionType === SELECTION_TYPE.Multi\"\n                    (keydown.space)=\"toggleAllSelected($event)\"\n                  >\n                    <div *ngIf=\"!hasVirtualScroller\" class=\"clr-checkbox-wrapper\">\n                      <!-- We need to move focus and space-key handling to the parent because of keyboard arrow key navigation,\n                           which is not able to transfer focus directly on the input when focused with the tab key -->\n                      <input\n                        type=\"checkbox\"\n                        [id]=\"selectAllId\"\n                        [(ngModel)]=\"allSelected\"\n                        [attr.aria-label]=\"commonStrings.keys.selectAll\"\n                        tabindex=\"-1\"\n                      />\n                      <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a datagrid is wrapped inside clrForm -->\n                      <label [for]=\"selectAllId\" class=\"clr-control-label clr-col-null\">\n                        <span class=\"clr-sr-only\">{{commonStrings.keys.selectAll}}</span>\n                      </label>\n                    </div>\n\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for datagrid where you can select one row only -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n                    *ngIf=\"selection.selectionType === SELECTION_TYPE.Single\"\n                  >\n                    <div class=\"clr-sr-only\">{{clrDgSingleSelectionAriaLabel}}</div>\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for single row action; only displayType if we have at least one actionable row in datagrid -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-row-actions datagrid-fixed-column\"\n                    *ngIf=\"rowActionService.hasActionableRow\"\n                  >\n                    <div class=\"clr-sr-only\">{{clrDgSingleActionableAriaLabel}}</div>\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for carets; only displayType if we have at least one expandable row in datagrid -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-expandable-caret datagrid-fixed-column\"\n                    *ngIf=\"expandableRows.hasExpandableRow || detailService.enabled\"\n                  >\n                    <div class=\"clr-sr-only\">{{clrDetailExpandableAriaLabel}}</div>\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                </div>\n                <div class=\"datagrid-row-scrollable\">\n                  <ng-container #projectedDisplayColumns></ng-container>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div role=\"presentation\" class=\"datagrid-rows\">\n            <clr-dg-row class=\"datagrid-row-loading\" *ngIf=\"loadingMoreItems\">\n              <clr-dg-cell>\n                <clr-spinner clrMedium></clr-spinner>\n                <span>{{ commonStrings.keys.loading }}</span>\n              </clr-dg-cell>\n            </clr-dg-row>\n\n            <ng-container #displayedRows></ng-container>\n\n            <clr-dg-row class=\"datagrid-row-loading\" *ngIf=\"loadingMoreItems\">\n              <clr-dg-cell>\n                <clr-spinner clrMedium></clr-spinner>\n                <span>{{ commonStrings.keys.loading }}</span>\n              </clr-dg-cell>\n            </clr-dg-row>\n\n            <!-- Custom placeholder overrides the default empty one -->\n            <ng-content select=\"clr-dg-placeholder\"></ng-content>\n            <clr-dg-placeholder *ngIf=\"!placeholder\"></clr-dg-placeholder>\n          </div>\n        </div>\n      </div>\n    </div>\n    <ng-content select=\"clr-dg-footer\"></ng-content>\n    <div class=\"datagrid-spinner\" *ngIf=\"loading\">\n      <clr-spinner clrMedium>Loading</clr-spinner>\n    </div>\n  </div>\n  <ng-content select=\"[clrIfDetail],clr-dg-detail\"></ng-content>\n</div>\n\n<div class=\"datagrid-calculation-table\">\n  <div class=\"datagrid-calculation-header\">\n    <ng-container #projectedCalculationColumns></ng-container>\n  </div>\n  <ng-container #calculationRows></ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][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: ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }, { kind: "component", type: ClrDatagridCell, selector: "clr-dg-cell" }, { kind: "component", type: ClrDatagridPlaceholder, selector: "clr-dg-placeholder" }, { kind: "component", type: ClrDatagridRow, selector: "clr-dg-row", inputs: ["clrDgDetailDisabled", "clrDgDetailHidden", "clrDgItem", "clrDgSelectable", "clrDgSelected", "clrDgExpanded", "clrDgDetailOpenLabel", "clrDgDetailCloseLabel", "clrDgRowSelectionLabel"], outputs: ["clrDgSelectedChange", "clrDgExpandedChange"] }, { kind: "directive", type: ClrDatagridSelectionCellDirective, selector: ".datagrid-select" }, { kind: "directive", type: DatagridCellRenderer, selector: "clr-dg-cell" }, { kind: "directive", type: DatagridRowRenderer, selector: "clr-dg-row, clr-dg-row-detail" }, { kind: "directive", type: ActionableOompaLoompa, selector: "clr-datagrid, clr-dg-row" }, { kind: "directive", type: ExpandableOompaLoompa, selector: "clr-datagrid, clr-dg-row" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagrid, decorators: [{
             type: Component,
             args: [{ selector: 'clr-datagrid', providers: [
@@ -16282,7 +16311,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
         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 }];
+                    }] }, { type: i0.ElementRef }, { type: Page }, { type: ClrCommonStringsService }, { type: KeyNavigationGridController }, { type: i0.NgZone }];
     }, propDecorators: { loadingMoreItems: [{
                 type: Input,
                 args: ['clrLoadingMoreItems']
@@ -16389,11 +16418,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();
@@ -16405,10 +16433,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();
             }
@@ -16445,7 +16473,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"
@@ -16516,7 +16544,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
         return [{ type: RowActionService }, { type: ClrCommonStringsService }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [PLATFORM_ID]
-                    }] }, { type: i0.NgZone }, { type: ClrPopoverToggleService }];
+                    }] }, { type: ClrPopoverToggleService }];
     }, propDecorators: { buttonLabel: [{
                 type: Input,
                 args: ['clrDgActionOverflowButtonLabel']
@@ -16973,8 +17001,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() {
@@ -17103,13 +17131,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.');
         }
     }
@@ -17196,7 +17223,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) {
@@ -17334,7 +17361,7 @@ class ClrDatagridPagination {
         this.commonStrings = commonStrings;
         this.detailService = detailService;
         this.currentChanged = new EventEmitter(false);
-        this.page.activated = true;
+        page.activated = true;
     }
     /**
      * Page size
@@ -17470,7 +17497,7 @@ class ClrDatagridPagination {
          * Set the input's value to the new current page. This is needed because the code
          * above may have changed the value from what the user entered in.
          */
-        this.currentPageInputRef.nativeElement.value = this.page.current;
+        this.currentPageInputRef.nativeElement.value = this.page.current.toString();
     }
 }
 ClrDatagridPagination.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagridPagination, deps: [{ token: Page }, { token: ClrCommonStringsService }, { token: DetailService }], target: i0.ɵɵFactoryTarget.Component });
@@ -17819,10 +17846,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, {
@@ -18024,7 +18051,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;
@@ -18036,7 +18062,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());
@@ -18184,14 +18210,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;
@@ -18205,16 +18230,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));
@@ -18234,7 +18257,8 @@ class DatagridMainRenderer {
         this.tableSizeService.table = this.el;
     }
     ngAfterViewChecked() {
-        if (this.shouldStabilizeColumns) {
+        const datagridIsVisible = this.checkAndUpdateVisibility();
+        if (this.shouldStabilizeColumns && datagridIsVisible) {
             this.stabilizeColumns();
         }
         if (this.shouldComputeHeight()) {
@@ -18337,16 +18361,20 @@ class DatagridMainRenderer {
                     case DatagridColumnChanges.WIDTH:
                         this.headers.get(columnIndex).setWidth(state);
                         this.rows.forEach(row => {
+                            var _a, _b;
                             if ((row === null || row === void 0 ? void 0 : row.cells.length) === this.columnsService.columns.length) {
                                 row.cells.get(columnIndex).setWidth(state);
+                                (_b = (_a = row.expandableRow) === null || _a === void 0 ? void 0 : _a.cells.get(columnIndex)) === null || _b === void 0 ? void 0 : _b.setWidth(state);
                             }
                         });
                         break;
                     case DatagridColumnChanges.HIDDEN:
                         this.headers.get(columnIndex).setHidden(state);
                         this.rows.forEach(row => {
+                            var _a, _b;
                             if (row.cells && row.cells.length) {
                                 row.cells.get(columnIndex).setHidden(state);
+                                (_b = (_a = row.expandableRow) === null || _a === void 0 ? void 0 : _a.cells.get(columnIndex)) === null || _b === void 0 ? void 0 : _b.setHidden(state);
                             }
                         });
                         this.keyNavigation.resetKeyGrid();
@@ -18355,7 +18383,9 @@ class DatagridMainRenderer {
                         if (state.hideable && state.hidden) {
                             this.headers.get(columnIndex).setHidden(state);
                             this.rows.forEach(row => {
+                                var _a;
                                 row.setCellsState();
+                                (_a = row.expandableRow) === null || _a === void 0 ? void 0 : _a.setCellsState();
                             });
                         }
                         break;
@@ -18380,21 +18410,31 @@ 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;
+        }
+    }
 }
-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.ɵ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, descendants: true }], ngImport: i0 });
+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,
             args: [{
                     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: [{
                 type: ContentChildren,
-                args: [DatagridRowRenderer, { descendants: true }]
+                args: [DatagridRowRenderer]
             }] } });
 
 /*
@@ -18856,7 +18896,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
             }] } });
 function eventIsInputEvent(event) {
     const targetElement = event === null || event === void 0 ? void 0 : event.target;
-    return (targetElement === null || targetElement === void 0 ? void 0 : targetElement.tagName) === 'INPUT';
+    return (targetElement === null || targetElement === void 0 ? void 0 : targetElement.tagName)
+        ? ['INPUT', 'TEXTAREA', 'BUTTON', 'A', 'SELECT', 'OPTION'].includes(targetElement.tagName)
+        : false;
 }
 
 /*
@@ -19029,8 +19071,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.
@@ -19647,7 +19689,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
@@ -19830,7 +19872,7 @@ class ClrTreeNode {
     }
     setTabIndex(value) {
         this.contentContainerTabindex = value;
-        this.contentContainer.nativeElement.setAttribute('tabindex', value);
+        this.contentContainer.nativeElement.setAttribute('tabindex', value.toString());
     }
     checkTabIndex(nodeId) {
         if (isPlatformBrowser(this.platformId) && this.nodeId !== nodeId && this.contentContainerTabindex !== -1) {
@@ -19889,7 +19931,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 }))]),
@@ -19909,7 +19951,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,
@@ -19958,18 +20000,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);
@@ -19978,17 +20023,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
@@ -19996,8 +20052,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"
@@ -20019,10 +20075,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: [{
@@ -20109,7 +20164,7 @@ class DropdownFocusHandler {
         this._unlistenFuncs = [];
         this.resetChildren();
         this.moveToFirstItemWhenOpen();
-        if (!this.parent) {
+        if (!parent) {
             this.handleRootFocus();
         }
     }
@@ -20309,11 +20364,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());
@@ -21952,12 +22006,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;
@@ -22090,18 +22144,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
-const createCdsCloseButton = (document, ariaLabel) => {
-    const cdsCloseButton = document.createElement('cds-internal-close-button');
-    cdsCloseButton.setAttribute('icon-size', '32');
-    cdsCloseButton.setAttribute('aria-label', ariaLabel);
-    cdsCloseButton.setAttribute('aria-hidden', 'true');
-    cdsCloseButton.setAttribute('type', 'button');
+const createCloseButton = (document, ariaLabel) => {
+    const closeButton = document.createElement('button');
+    closeButton.setAttribute('aria-label', ariaLabel);
+    closeButton.setAttribute('aria-hidden', 'true');
+    closeButton.innerHTML = `
+    <cds-icon
+      inner-offset="1"
+      shape="close"
+      size="32"
+    </cds-icon>
+  `;
     /**
      * The button is hidden by default based on our Desktop-first approach.
      */
-    cdsCloseButton.setAttribute('hidden', 'true');
-    cdsCloseButton.className = 'clr-nav-close';
-    return cdsCloseButton;
+    closeButton.setAttribute('hidden', 'true');
+    closeButton.className = 'clr-nav-close';
+    return closeButton;
 };
 class ClrNavLevel {
     constructor(platformId, cdkTrapFocus, responsiveNavService, elementRef, renderer, injector) {
@@ -22153,7 +22212,7 @@ class ClrNavLevel {
         this.addNavClass(this.level);
     }
     ngAfterViewInit() {
-        const closeButton = createCdsCloseButton(this._document, this.closeButtonAriaLabel);
+        const closeButton = createCloseButton(this._document, this.closeButtonAriaLabel);
         this.renderer.listen(closeButton, 'click', this.close.bind(this));
         this.renderer.insertBefore(this.elementRef.nativeElement, closeButton, this.elementRef.nativeElement.firstChild); // Adding the button at the top of the nav
         if (this._document.body.clientWidth < LARGE_BREAKPOINT) {
@@ -22576,8 +22635,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) {
@@ -22586,9 +22643,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() {
@@ -23177,7 +23234,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);
         });
     }
@@ -23265,27 +23322,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;
             }
@@ -23295,7 +23351,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;
@@ -23306,7 +23362,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();
             }
@@ -23435,7 +23491,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();
@@ -23603,9 +23659,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' }]
         }] });
 
 /*
@@ -23664,6 +23721,13 @@ class ClrModal {
         this._openChanged.emit(true);
         this.modalStackService.trackModalOpen(this);
     }
+    backdropClick() {
+        if (this.staticBackdrop) {
+            this.title.nativeElement.focus();
+            return;
+        }
+        this.close();
+    }
     close() {
         if (this.stopClose) {
             this.altClose.emit(false);
@@ -23683,7 +23747,7 @@ class ClrModal {
     }
 }
 ClrModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrModal, deps: [{ token: ScrollingService }, { token: ClrCommonStringsService }, { token: ModalStackService }, { token: ClrModalConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
-ClrModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrModal, selector: "clr-modal", inputs: { _open: ["clrModalOpen", "_open"], closable: ["clrModalClosable", "closable"], closeButtonAriaLabel: ["clrModalCloseButtonAriaLabel", "closeButtonAriaLabel"], size: ["clrModalSize", "size"], staticBackdrop: ["clrModalStaticBackdrop", "staticBackdrop"], skipAnimation: ["clrModalSkipAnimation", "skipAnimation"], stopClose: ["clrModalPreventClose", "stopClose"], labelledBy: ["clrModalLabelledById", "labelledBy"], bypassScrollService: ["clrModalOverrideScrollService", "bypassScrollService"] }, outputs: { _openChanged: "clrModalOpenChange", altClose: "clrModalAlternateClose" }, host: { properties: { "class.open": "this._open" } }, usesOnChanges: 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 *ngIf=\"_open\" class=\"modal\" [class.modal-full-screen]=\"size == 'full-screen'\">\n  <!--fixme: revisit when ngClass works with exit animation-->\n  <div\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"true\"\n    [@fadeMove]=\"fadeMove\"\n    (@fadeMove.done)=\"fadeDone($event)\"\n    class=\"modal-dialog\"\n    [class.modal-sm]=\"size == 'sm'\"\n    [class.modal-lg]=\"size == 'lg'\"\n    [class.modal-xl]=\"size == 'xl'\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-hidden]=\"!_open\"\n    [attr.aria-labelledby]=\"labelledBy || modalId\"\n  >\n    <div class=\"clr-sr-only\">{{commonStrings.keys.modalContentStart}}</div>\n    <div class=\"modal-content-wrapper\">\n      <!-- only used in wizards -->\n      <ng-content select=\".modal-nav\"></ng-content>\n\n      <div class=\"modal-content\">\n        <div class=\"modal-header--accessible\">\n          <div class=\"modal-title-wrapper\" id=\"{{modalId}}\" cdkFocusInitial tabindex=\"-1\">\n            <ng-content select=\".modal-title\"></ng-content>\n          </div>\n          <button\n            type=\"button\"\n            [attr.aria-label]=\"closeButtonAriaLabel || commonStrings.keys.close\"\n            class=\"close\"\n            *ngIf=\"closable\"\n            (click)=\"close()\"\n          >\n            <cds-icon shape=\"window-close\"></cds-icon>\n          </button>\n        </div>\n        <div class=\"modal-body-wrapper\">\n          <ng-content select=\".modal-body\"></ng-content>\n        </div>\n        <ng-content select=\".modal-footer\"></ng-content>\n      </div>\n    </div>\n    <div class=\"clr-sr-only\">{{commonStrings.keys.modalContentEnd}}</div>\n  </div>\n\n  <div [@fade] *ngIf=\"backdrop\" class=\"modal-backdrop\" aria-hidden=\"true\" (click)=\"staticBackdrop || close()\"></div>\n</div>\n", styles: [":host{display:none}:host.open{display:inline}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]" }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }], viewProviders: [ScrollingService], animations: [
+ClrModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrModal, selector: "clr-modal", inputs: { _open: ["clrModalOpen", "_open"], closable: ["clrModalClosable", "closable"], closeButtonAriaLabel: ["clrModalCloseButtonAriaLabel", "closeButtonAriaLabel"], size: ["clrModalSize", "size"], staticBackdrop: ["clrModalStaticBackdrop", "staticBackdrop"], skipAnimation: ["clrModalSkipAnimation", "skipAnimation"], stopClose: ["clrModalPreventClose", "stopClose"], labelledBy: ["clrModalLabelledById", "labelledBy"], bypassScrollService: ["clrModalOverrideScrollService", "bypassScrollService"] }, outputs: { _openChanged: "clrModalOpenChange", altClose: "clrModalAlternateClose" }, host: { properties: { "class.open": "this._open" } }, viewQueries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true }], usesOnChanges: 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 *ngIf=\"_open\" class=\"modal\" [class.modal-full-screen]=\"size == 'full-screen'\">\n  <!--fixme: revisit when ngClass works with exit animation-->\n  <div\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"true\"\n    [@fadeMove]=\"fadeMove\"\n    (@fadeMove.done)=\"fadeDone($event)\"\n    class=\"modal-dialog\"\n    [class.modal-sm]=\"size == 'sm'\"\n    [class.modal-lg]=\"size == 'lg'\"\n    [class.modal-xl]=\"size == 'xl'\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-hidden]=\"!_open\"\n    [attr.aria-labelledby]=\"labelledBy || modalId\"\n  >\n    <div class=\"clr-sr-only\">{{commonStrings.keys.modalContentStart}}</div>\n    <div class=\"modal-content-wrapper\">\n      <!-- only used in wizards -->\n      <ng-content select=\".modal-nav\"></ng-content>\n\n      <div class=\"modal-content\">\n        <div class=\"modal-header--accessible\">\n          <div class=\"modal-title-wrapper\" #title id=\"{{modalId}}\" cdkFocusInitial tabindex=\"-1\">\n            <ng-content select=\".modal-title\"></ng-content>\n          </div>\n          <button\n            type=\"button\"\n            [attr.aria-label]=\"closeButtonAriaLabel || commonStrings.keys.close\"\n            class=\"close\"\n            *ngIf=\"closable\"\n            (click)=\"close()\"\n          >\n            <cds-icon shape=\"window-close\"></cds-icon>\n          </button>\n        </div>\n        <div class=\"modal-body-wrapper\">\n          <ng-content select=\".modal-body\"></ng-content>\n        </div>\n        <ng-content select=\".modal-footer\"></ng-content>\n      </div>\n    </div>\n    <div class=\"clr-sr-only\">{{commonStrings.keys.modalContentEnd}}</div>\n  </div>\n\n  <div [@fade] *ngIf=\"backdrop\" class=\"modal-backdrop\" aria-hidden=\"true\" (click)=\"backdropClick()\"></div>\n</div>\n", styles: [":host{display:none}:host.open{display:inline}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]" }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }], viewProviders: [ScrollingService], animations: [
         trigger('fadeMove', [
             transition('* => fadeDown', [
                 style({ opacity: 0, transform: 'translate(0, -25%)' }),
@@ -23718,8 +23782,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                             transition('void => *', [style({ opacity: 0 }), animate('0.2s ease-in-out', style({ opacity: 0.85 }))]),
                             transition('* => void', [animate('0.2s ease-in-out', style({ opacity: 0 }))]),
                         ]),
-                    ], 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 *ngIf=\"_open\" class=\"modal\" [class.modal-full-screen]=\"size == 'full-screen'\">\n  <!--fixme: revisit when ngClass works with exit animation-->\n  <div\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"true\"\n    [@fadeMove]=\"fadeMove\"\n    (@fadeMove.done)=\"fadeDone($event)\"\n    class=\"modal-dialog\"\n    [class.modal-sm]=\"size == 'sm'\"\n    [class.modal-lg]=\"size == 'lg'\"\n    [class.modal-xl]=\"size == 'xl'\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-hidden]=\"!_open\"\n    [attr.aria-labelledby]=\"labelledBy || modalId\"\n  >\n    <div class=\"clr-sr-only\">{{commonStrings.keys.modalContentStart}}</div>\n    <div class=\"modal-content-wrapper\">\n      <!-- only used in wizards -->\n      <ng-content select=\".modal-nav\"></ng-content>\n\n      <div class=\"modal-content\">\n        <div class=\"modal-header--accessible\">\n          <div class=\"modal-title-wrapper\" id=\"{{modalId}}\" cdkFocusInitial tabindex=\"-1\">\n            <ng-content select=\".modal-title\"></ng-content>\n          </div>\n          <button\n            type=\"button\"\n            [attr.aria-label]=\"closeButtonAriaLabel || commonStrings.keys.close\"\n            class=\"close\"\n            *ngIf=\"closable\"\n            (click)=\"close()\"\n          >\n            <cds-icon shape=\"window-close\"></cds-icon>\n          </button>\n        </div>\n        <div class=\"modal-body-wrapper\">\n          <ng-content select=\".modal-body\"></ng-content>\n        </div>\n        <ng-content select=\".modal-footer\"></ng-content>\n      </div>\n    </div>\n    <div class=\"clr-sr-only\">{{commonStrings.keys.modalContentEnd}}</div>\n  </div>\n\n  <div [@fade] *ngIf=\"backdrop\" class=\"modal-backdrop\" aria-hidden=\"true\" (click)=\"staticBackdrop || close()\"></div>\n</div>\n", styles: [":host{display:none}:host.open{display:inline}\n"] }]
-        }], ctorParameters: function () { return [{ type: ScrollingService }, { type: ClrCommonStringsService }, { type: ModalStackService }, { type: ClrModalConfigurationService }]; }, propDecorators: { _open: [{
+                    ], 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 *ngIf=\"_open\" class=\"modal\" [class.modal-full-screen]=\"size == 'full-screen'\">\n  <!--fixme: revisit when ngClass works with exit animation-->\n  <div\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"true\"\n    [@fadeMove]=\"fadeMove\"\n    (@fadeMove.done)=\"fadeDone($event)\"\n    class=\"modal-dialog\"\n    [class.modal-sm]=\"size == 'sm'\"\n    [class.modal-lg]=\"size == 'lg'\"\n    [class.modal-xl]=\"size == 'xl'\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-hidden]=\"!_open\"\n    [attr.aria-labelledby]=\"labelledBy || modalId\"\n  >\n    <div class=\"clr-sr-only\">{{commonStrings.keys.modalContentStart}}</div>\n    <div class=\"modal-content-wrapper\">\n      <!-- only used in wizards -->\n      <ng-content select=\".modal-nav\"></ng-content>\n\n      <div class=\"modal-content\">\n        <div class=\"modal-header--accessible\">\n          <div class=\"modal-title-wrapper\" #title id=\"{{modalId}}\" cdkFocusInitial tabindex=\"-1\">\n            <ng-content select=\".modal-title\"></ng-content>\n          </div>\n          <button\n            type=\"button\"\n            [attr.aria-label]=\"closeButtonAriaLabel || commonStrings.keys.close\"\n            class=\"close\"\n            *ngIf=\"closable\"\n            (click)=\"close()\"\n          >\n            <cds-icon shape=\"window-close\"></cds-icon>\n          </button>\n        </div>\n        <div class=\"modal-body-wrapper\">\n          <ng-content select=\".modal-body\"></ng-content>\n        </div>\n        <ng-content select=\".modal-footer\"></ng-content>\n      </div>\n    </div>\n    <div class=\"clr-sr-only\">{{commonStrings.keys.modalContentEnd}}</div>\n  </div>\n\n  <div [@fade] *ngIf=\"backdrop\" class=\"modal-backdrop\" aria-hidden=\"true\" (click)=\"backdropClick()\"></div>\n</div>\n", styles: [":host{display:none}:host.open{display:inline}\n"] }]
+        }], ctorParameters: function () { return [{ type: ScrollingService }, { type: ClrCommonStringsService }, { type: ModalStackService }, { type: ClrModalConfigurationService }]; }, propDecorators: { title: [{
+                type: ViewChild,
+                args: ['title']
+            }], _open: [{
                 type: Input,
                 args: ['clrModalOpen']
             }, {
@@ -23777,11 +23844,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();
@@ -23834,14 +23901,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 []; } });
 
@@ -23880,7 +23946,9 @@ class ClrSidePanel {
         this.modal.close();
     }
     documentClick(event) {
-        if (!this.element.nativeElement.contains(event.target) && this.modal._open && !this.configuration.backdrop) {
+        if (!this.element.nativeElement.contains(event.target) &&
+            this.modal._open &&
+            !this.configuration.backdrop) {
             this.modal.close();
         }
     }
@@ -23997,7 +24065,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();
@@ -24007,7 +24074,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;
     }
     /*********
@@ -24396,11 +24463,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());
@@ -25514,7 +25580,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;
@@ -25524,21 +25590,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;
             }
@@ -25549,7 +25615,7 @@ class WizardNavigationService {
                 this.cancel();
             }
         });
-        this.pagesResetSubscription = this.pageCollection.pagesReset.subscribe(() => {
+        this.pagesResetSubscription = pageCollection.pagesReset.subscribe(() => {
             this.setFirstPageCurrent();
         });
     }
@@ -26886,15 +26952,12 @@ ClrWizardStepnavItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
       (click)="click()"
       [attr.disabled]="isDisabled ? '' : null"
     >
-      <span class="clr-wizard-stepnav-link-suffix">
-        <cds-icon
-          shape="error-standard"
-          status="danger"
-          class="clr-wizard-stepnav-item-error-icon"
-          *ngIf="hasError"
-        ></cds-icon>
-        <ng-content *ngIf="!hasError"></ng-content>
-      </span>
+      <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>
+      </div>
+
+      <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>
@@ -26913,15 +26976,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
       (click)="click()"
       [attr.disabled]="isDisabled ? '' : null"
     >
-      <span class="clr-wizard-stepnav-link-suffix">
-        <cds-icon
-          shape="error-standard"
-          status="danger"
-          class="clr-wizard-stepnav-item-error-icon"
-          *ngIf="hasError"
-        ></cds-icon>
-        <ng-content *ngIf="!hasError"></ng-content>
-      </span>
+      <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>
+      </div>
+
+      <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>
@@ -27391,7 +27451,7 @@ class ClrWizard {
     }
 }
 ClrWizard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrWizard, deps: [{ token: PLATFORM_ID }, { token: ClrCommonStringsService }, { token: WizardNavigationService }, { token: PageCollectionService }, { token: ButtonHubService }, { token: HeaderActionService }, { token: i0.ElementRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component });
-ClrWizard.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrWizard, selector: "clr-wizard", inputs: { stepnavAriaLabel: ["clrWizardStepnavAriaLabel", "stepnavAriaLabel"], size: ["clrWizardSize", "size"], closable: ["clrWizardClosable", "closable"], _stopModalAnimations: ["clrWizardPreventModalAnimation", "_stopModalAnimations"], forceForward: ["clrWizardForceForwardNavigation", "forceForward"], clrWizardOpen: "clrWizardOpen", stopNext: ["clrWizardPreventDefaultNext", "stopNext"], stopCancel: ["clrWizardPreventDefaultCancel", "stopCancel"], stopNavigation: ["clrWizardPreventNavigation", "stopNavigation"], disableStepnav: ["clrWizardDisableStepnav", "disableStepnav"] }, outputs: { _openChanged: "clrWizardOpenChange", onCancel: "clrWizardOnCancel", wizardFinished: "clrWizardOnFinish", onReset: "clrWizardOnReset", currentPageChanged: "clrWizardCurrentPageChanged", onMoveNext: "clrWizardOnNext", onMovePrevious: "clrWizardOnPrevious" }, host: { properties: { "class.clr-wizard": "true", "class.wizard-md": "size == 'md'", "class.wizard-lg": "size == 'lg'", "class.wizard-xl": "size == 'xl'", "class.lastPage": "navService.currentPageIsLast" } }, providers: [WizardNavigationService, PageCollectionService, ButtonHubService, HeaderActionService], queries: [{ propertyName: "wizardTitle", first: true, predicate: ClrWizardTitle, descendants: true }, { propertyName: "pages", predicate: ClrWizardPage, descendants: true }, { propertyName: "headerActions", predicate: ClrWizardHeaderAction }], viewQueries: [{ propertyName: "pageTitle", first: true, predicate: ["pageTitle"], descendants: 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<clr-modal\n  [clrModalOpen]=\"_open\"\n  [clrModalSize]=\"size\"\n  [clrModalClosable]=\"closable\"\n  [clrModalStaticBackdrop]=\"true\"\n  [clrModalSkipAnimation]=\"stopModalAnimations\"\n  [clrModalOverrideScrollService]=\"isInline\"\n  [clrModalPreventClose]=\"true\"\n  (clrModalAlternateClose)=\"modalCancel()\"\n  [clrModalLabelledById]=\"wizardId\"\n>\n  <div class=\"modal-nav clr-wizard-stepnav-wrapper\" role=\"region\" [attr.aria-label]=\"stepnavAriaLabel\">\n    <div class=\"clr-wizard-title\" id=\"{{wizardId}}\" role=\"heading\" [attr.aria-level]=\"wizardTitle.headingLevel || 1\">\n      <ng-content select=\"clr-wizard-title\"></ng-content>\n    </div>\n    <clr-wizard-stepnav></clr-wizard-stepnav>\n  </div>\n\n  <div class=\"modal-title\" role=\"heading\" [attr.aria-level]=\"navService.currentPage.pageTitle.headingLevel || 2\">\n    <span tabindex=\"-1\" #pageTitle class=\"modal-title-text\">\n      <ng-template [ngTemplateOutlet]=\"navService.currentPageTitle\"></ng-template>\n    </span>\n\n    <div class=\"modal-header-actions-wrapper\" *ngIf=\"headerActionService.displayHeaderActionsWrapper\">\n      <div *ngIf=\"headerActionService.showWizardHeaderActions\">\n        <ng-content select=\"clr-wizard-header-action\"></ng-content>\n      </div>\n      <div *ngIf=\"headerActionService.currentPageHasHeaderActions\">\n        <ng-template [ngTemplateOutlet]=\"navService.currentPage.headerActions\"></ng-template>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"modal-body\">\n    <main clr-wizard-pages-wrapper class=\"clr-wizard-content\">\n      <ng-content></ng-content>\n    </main>\n  </div>\n  <div class=\"modal-footer clr-wizard-footer\">\n    <div class=\"clr-wizard-footer-buttons\">\n      <div\n        *ngIf=\"navService.currentPage && !navService.currentPage.hasButtons\"\n        class=\"clr-wizard-footer-buttons-wrapper\"\n      >\n        <ng-content select=\"clr-wizard-button\"></ng-content>\n      </div>\n      <div\n        *ngIf=\"navService.currentPage && navService.currentPage.hasButtons\"\n        class=\"clr-wizard-footer-buttons-wrapper\"\n      >\n        <ng-template [ngTemplateOutlet]=\"navService.currentPage.buttons\"></ng-template>\n      </div>\n    </div>\n  </div>\n</clr-modal>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClrModal, selector: "clr-modal", inputs: ["clrModalOpen", "clrModalClosable", "clrModalCloseButtonAriaLabel", "clrModalSize", "clrModalStaticBackdrop", "clrModalSkipAnimation", "clrModalPreventClose", "clrModalLabelledById", "clrModalOverrideScrollService"], outputs: ["clrModalOpenChange", "clrModalAlternateClose"] }, { kind: "directive", type: ClrModalBody, selector: ".modal-body" }, { kind: "component", type: ClrWizardStepnav, selector: "clr-wizard-stepnav" }] });
+ClrWizard.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrWizard, selector: "clr-wizard", inputs: { stepnavAriaLabel: ["clrWizardStepnavAriaLabel", "stepnavAriaLabel"], size: ["clrWizardSize", "size"], closable: ["clrWizardClosable", "closable"], _stopModalAnimations: ["clrWizardPreventModalAnimation", "_stopModalAnimations"], forceForward: ["clrWizardForceForwardNavigation", "forceForward"], clrWizardOpen: "clrWizardOpen", stopNext: ["clrWizardPreventDefaultNext", "stopNext"], stopCancel: ["clrWizardPreventDefaultCancel", "stopCancel"], stopNavigation: ["clrWizardPreventNavigation", "stopNavigation"], disableStepnav: ["clrWizardDisableStepnav", "disableStepnav"] }, outputs: { _openChanged: "clrWizardOpenChange", onCancel: "clrWizardOnCancel", wizardFinished: "clrWizardOnFinish", onReset: "clrWizardOnReset", currentPageChanged: "clrWizardCurrentPageChanged", onMoveNext: "clrWizardOnNext", onMovePrevious: "clrWizardOnPrevious" }, host: { properties: { "class.clr-wizard": "true", "class.wizard-md": "size == 'md'", "class.wizard-lg": "size == 'lg'", "class.wizard-xl": "size == 'xl'", "class.lastPage": "navService.currentPageIsLast" } }, providers: [WizardNavigationService, PageCollectionService, ButtonHubService, HeaderActionService], queries: [{ propertyName: "wizardTitle", first: true, predicate: ClrWizardTitle, descendants: true }, { propertyName: "pages", predicate: ClrWizardPage, descendants: true }, { propertyName: "headerActions", predicate: ClrWizardHeaderAction }], viewQueries: [{ propertyName: "pageTitle", first: true, predicate: ["pageTitle"], descendants: 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<clr-modal\n  [clrModalOpen]=\"_open\"\n  [clrModalSize]=\"size\"\n  [clrModalClosable]=\"closable\"\n  [clrModalStaticBackdrop]=\"true\"\n  [clrModalSkipAnimation]=\"stopModalAnimations\"\n  [clrModalOverrideScrollService]=\"isInline\"\n  [clrModalPreventClose]=\"true\"\n  (clrModalAlternateClose)=\"modalCancel()\"\n  [clrModalLabelledById]=\"wizardId\"\n>\n  <div class=\"modal-nav clr-wizard-stepnav-wrapper\" role=\"region\" [attr.aria-label]=\"stepnavAriaLabel\">\n    <div class=\"clr-wizard-title\" id=\"{{wizardId}}\" role=\"heading\" [attr.aria-level]=\"wizardTitle.headingLevel || 1\">\n      <ng-content select=\"clr-wizard-title\"></ng-content>\n    </div>\n    <clr-wizard-stepnav></clr-wizard-stepnav>\n  </div>\n\n  <div class=\"modal-title\" role=\"heading\" [attr.aria-level]=\"navService.currentPage?.pageTitle.headingLevel || 2\">\n    <span tabindex=\"-1\" #pageTitle class=\"modal-title-text\">\n      <ng-template [ngTemplateOutlet]=\"navService.currentPageTitle\"></ng-template>\n    </span>\n\n    <div class=\"modal-header-actions-wrapper\" *ngIf=\"headerActionService.displayHeaderActionsWrapper\">\n      <div *ngIf=\"headerActionService.showWizardHeaderActions\">\n        <ng-content select=\"clr-wizard-header-action\"></ng-content>\n      </div>\n      <div *ngIf=\"headerActionService.currentPageHasHeaderActions\">\n        <ng-template [ngTemplateOutlet]=\"navService.currentPage.headerActions\"></ng-template>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"modal-body\">\n    <main clr-wizard-pages-wrapper class=\"clr-wizard-content\">\n      <ng-content></ng-content>\n    </main>\n  </div>\n  <div class=\"modal-footer clr-wizard-footer\">\n    <div class=\"clr-wizard-footer-buttons\">\n      <div\n        *ngIf=\"navService.currentPage && !navService.currentPage.hasButtons\"\n        class=\"clr-wizard-footer-buttons-wrapper\"\n      >\n        <ng-content select=\"clr-wizard-button\"></ng-content>\n      </div>\n      <div\n        *ngIf=\"navService.currentPage && navService.currentPage.hasButtons\"\n        class=\"clr-wizard-footer-buttons-wrapper\"\n      >\n        <ng-template [ngTemplateOutlet]=\"navService.currentPage.buttons\"></ng-template>\n      </div>\n    </div>\n  </div>\n</clr-modal>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClrModal, selector: "clr-modal", inputs: ["clrModalOpen", "clrModalClosable", "clrModalCloseButtonAriaLabel", "clrModalSize", "clrModalStaticBackdrop", "clrModalSkipAnimation", "clrModalPreventClose", "clrModalLabelledById", "clrModalOverrideScrollService"], outputs: ["clrModalOpenChange", "clrModalAlternateClose"] }, { kind: "directive", type: ClrModalBody, selector: ".modal-body" }, { kind: "component", type: ClrWizardStepnav, selector: "clr-wizard-stepnav" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrWizard, decorators: [{
             type: Component,
             args: [{ selector: 'clr-wizard', providers: [WizardNavigationService, PageCollectionService, ButtonHubService, HeaderActionService], host: {
@@ -27400,7 +27460,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                         '[class.wizard-lg]': "size == 'lg'",
                         '[class.wizard-xl]': "size == 'xl'",
                         '[class.lastPage]': 'navService.currentPageIsLast',
-                    }, 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<clr-modal\n  [clrModalOpen]=\"_open\"\n  [clrModalSize]=\"size\"\n  [clrModalClosable]=\"closable\"\n  [clrModalStaticBackdrop]=\"true\"\n  [clrModalSkipAnimation]=\"stopModalAnimations\"\n  [clrModalOverrideScrollService]=\"isInline\"\n  [clrModalPreventClose]=\"true\"\n  (clrModalAlternateClose)=\"modalCancel()\"\n  [clrModalLabelledById]=\"wizardId\"\n>\n  <div class=\"modal-nav clr-wizard-stepnav-wrapper\" role=\"region\" [attr.aria-label]=\"stepnavAriaLabel\">\n    <div class=\"clr-wizard-title\" id=\"{{wizardId}}\" role=\"heading\" [attr.aria-level]=\"wizardTitle.headingLevel || 1\">\n      <ng-content select=\"clr-wizard-title\"></ng-content>\n    </div>\n    <clr-wizard-stepnav></clr-wizard-stepnav>\n  </div>\n\n  <div class=\"modal-title\" role=\"heading\" [attr.aria-level]=\"navService.currentPage.pageTitle.headingLevel || 2\">\n    <span tabindex=\"-1\" #pageTitle class=\"modal-title-text\">\n      <ng-template [ngTemplateOutlet]=\"navService.currentPageTitle\"></ng-template>\n    </span>\n\n    <div class=\"modal-header-actions-wrapper\" *ngIf=\"headerActionService.displayHeaderActionsWrapper\">\n      <div *ngIf=\"headerActionService.showWizardHeaderActions\">\n        <ng-content select=\"clr-wizard-header-action\"></ng-content>\n      </div>\n      <div *ngIf=\"headerActionService.currentPageHasHeaderActions\">\n        <ng-template [ngTemplateOutlet]=\"navService.currentPage.headerActions\"></ng-template>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"modal-body\">\n    <main clr-wizard-pages-wrapper class=\"clr-wizard-content\">\n      <ng-content></ng-content>\n    </main>\n  </div>\n  <div class=\"modal-footer clr-wizard-footer\">\n    <div class=\"clr-wizard-footer-buttons\">\n      <div\n        *ngIf=\"navService.currentPage && !navService.currentPage.hasButtons\"\n        class=\"clr-wizard-footer-buttons-wrapper\"\n      >\n        <ng-content select=\"clr-wizard-button\"></ng-content>\n      </div>\n      <div\n        *ngIf=\"navService.currentPage && navService.currentPage.hasButtons\"\n        class=\"clr-wizard-footer-buttons-wrapper\"\n      >\n        <ng-template [ngTemplateOutlet]=\"navService.currentPage.buttons\"></ng-template>\n      </div>\n    </div>\n  </div>\n</clr-modal>\n" }]
+                    }, 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<clr-modal\n  [clrModalOpen]=\"_open\"\n  [clrModalSize]=\"size\"\n  [clrModalClosable]=\"closable\"\n  [clrModalStaticBackdrop]=\"true\"\n  [clrModalSkipAnimation]=\"stopModalAnimations\"\n  [clrModalOverrideScrollService]=\"isInline\"\n  [clrModalPreventClose]=\"true\"\n  (clrModalAlternateClose)=\"modalCancel()\"\n  [clrModalLabelledById]=\"wizardId\"\n>\n  <div class=\"modal-nav clr-wizard-stepnav-wrapper\" role=\"region\" [attr.aria-label]=\"stepnavAriaLabel\">\n    <div class=\"clr-wizard-title\" id=\"{{wizardId}}\" role=\"heading\" [attr.aria-level]=\"wizardTitle.headingLevel || 1\">\n      <ng-content select=\"clr-wizard-title\"></ng-content>\n    </div>\n    <clr-wizard-stepnav></clr-wizard-stepnav>\n  </div>\n\n  <div class=\"modal-title\" role=\"heading\" [attr.aria-level]=\"navService.currentPage?.pageTitle.headingLevel || 2\">\n    <span tabindex=\"-1\" #pageTitle class=\"modal-title-text\">\n      <ng-template [ngTemplateOutlet]=\"navService.currentPageTitle\"></ng-template>\n    </span>\n\n    <div class=\"modal-header-actions-wrapper\" *ngIf=\"headerActionService.displayHeaderActionsWrapper\">\n      <div *ngIf=\"headerActionService.showWizardHeaderActions\">\n        <ng-content select=\"clr-wizard-header-action\"></ng-content>\n      </div>\n      <div *ngIf=\"headerActionService.currentPageHasHeaderActions\">\n        <ng-template [ngTemplateOutlet]=\"navService.currentPage.headerActions\"></ng-template>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"modal-body\">\n    <main clr-wizard-pages-wrapper class=\"clr-wizard-content\">\n      <ng-content></ng-content>\n    </main>\n  </div>\n  <div class=\"modal-footer clr-wizard-footer\">\n    <div class=\"clr-wizard-footer-buttons\">\n      <div\n        *ngIf=\"navService.currentPage && !navService.currentPage.hasButtons\"\n        class=\"clr-wizard-footer-buttons-wrapper\"\n      >\n        <ng-content select=\"clr-wizard-button\"></ng-content>\n      </div>\n      <div\n        *ngIf=\"navService.currentPage && navService.currentPage.hasButtons\"\n        class=\"clr-wizard-footer-buttons-wrapper\"\n      >\n        <ng-template [ngTemplateOutlet]=\"navService.currentPage.buttons\"></ng-template>\n      </div>\n    </div>\n  </div>\n</clr-modal>\n" }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
                         type: Inject,
@@ -27676,7 +27736,7 @@ const CLR_WIZARD_DIRECTIVES = [
 ];
 class ClrWizardModule {
     constructor() {
-        ClarityIcons.addIcons(errorStandardIcon);
+        ClarityIcons.addIcons(errorStandardIcon, successStandardIcon);
     }
 }
 ClrWizardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrWizardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -28069,5 +28129,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