@clr/angular 17.2.0 → 17.3.0

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';
 
 /*
@@ -327,7 +326,7 @@ const commonStringsDefault = {
     singleSelectionAriaLabel: 'Single selection header',
     singleActionableAriaLabel: 'Single actionable header',
     detailExpandableAriaLabel: 'Toggle more row content',
-    datagridFilterAriaLabel: 'Toggle {COLUMN} filter',
+    datagridFilterAriaLabel: '{COLUMN} filter',
     datagridFilterDialogAriaLabel: 'Filter dialog',
     columnSeparatorAriaLabel: 'Column resize handle',
     columnSeparatorDescription: 'Use left or right key to resize the column',
@@ -1164,6 +1163,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);
                 }
@@ -4771,7 +4773,10 @@ class ClrAbstractContainer {
         this.subscriptions = [];
         this.subscriptions.push(this.ifControlStateService.statusChanges.subscribe((state) => {
             this.state = state;
-            this.updateHelpers();
+            // Make sure everything is updated before dispatching the values for helpers
+            setTimeout(() => {
+                this.updateHelpers();
+            });
         }));
         this.subscriptions.push(this.ngControlService.controlChanges.subscribe(control => {
             this.control = control;
@@ -5639,8 +5644,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"
@@ -5669,8 +5676,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"
@@ -6860,7 +6869,8 @@ class ClrOption {
             this.optionProxy.id = this._id;
         }
     }
-    onClick() {
+    onClick(event) {
+        event.stopPropagation();
         if (this.optionSelectionService.multiselectable) {
             this.optionSelectionService.toggle(this.value);
         }
@@ -6875,7 +6885,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"] }] });
@@ -6909,7 +6919,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                 args: ['class.clr-focus']
             }], onClick: [{
                 type: HostListener,
-                args: ['click']
+                args: ['click', ['$event']]
             }] } });
 
 /*
@@ -11089,8 +11099,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"
@@ -11119,8 +11131,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"
@@ -12187,6 +12201,196 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
             type: Directive
         }], ctorParameters: function () { return [{ type: FiltersProvider }]; } });
 
+/*
+ * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+function getTabableItems(el) {
+    const tabableSelector = [
+        'a[href]',
+        'area[href]',
+        'input:not([disabled])',
+        'button:not([disabled])',
+        'select:not([disabled])',
+        'textarea:not([disabled])',
+        'iframe',
+        'object',
+        'embed',
+        '*[tabindex]:not([disabled])',
+        '*[contenteditable=true]',
+        '[role=button]:not([disabled])',
+    ].join(',');
+    return Array.from(el.querySelectorAll(tabableSelector));
+}
+class KeyNavigationGridController {
+    constructor(zone) {
+        this.zone = zone;
+        this.skipItemFocus = false;
+        this.listenersAdded = false;
+        this.destroy$ = new Subject();
+        this._activeCell = null;
+        this.config = {
+            keyGridRows: '[role=row]:not(.datagrid-placeholder)',
+            keyGridCells: '[role=gridcell]:not(.datagrid-hidden-column):not(.datagrid-placeholder-content), [role=columnheader]:not(.datagrid-hidden-column):not(.datagrid-placeholder-content), .datagrid-detail-caret',
+            keyGrid: '[role=grid]',
+        };
+    }
+    get grid() {
+        var _a;
+        return (_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelector(this.config.keyGrid);
+    }
+    get rows() {
+        var _a;
+        return (_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.config.keyGridRows);
+    }
+    get cells() {
+        var _a;
+        return (_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.config.keyGridCells);
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    addListeners() {
+        if (this.listenersAdded) {
+            return;
+        }
+        this.zone.runOutsideAngular(() => {
+            fromEvent(this.grid, 'mousedown')
+                .pipe(takeUntil(this.destroy$))
+                .subscribe((e) => {
+                // preserve right click for context menus & keyboard mouse control https://apple.stackexchange.com/questions/32715/how-do-i-open-the-context-menu-from-a-mac-keyboard
+                if (e.buttons === 1 && !e.ctrlKey) {
+                    const activeCell = this.cells
+                        ? Array.from(this.cells).find(c => c === e.target || c === e.target.closest(this.config.keyGridCells))
+                        : null;
+                    if (activeCell) {
+                        this.setActiveCell(activeCell);
+                    }
+                }
+            });
+            fromEvent(this.grid, 'wheel')
+                .pipe(takeUntil(this.destroy$))
+                .subscribe(() => {
+                this.removeActiveCell();
+            });
+            fromEvent(this.grid, 'keydown')
+                .pipe(takeUntil(this.destroy$))
+                .subscribe((e) => {
+                // Skip column resize events
+                if (e.target.classList.contains('drag-handle') &&
+                    (e.code === 'ArrowLeft' || e.code === 'ArrowRight')) {
+                    return;
+                }
+                if (e.code === 'ArrowUp' ||
+                    e.code === 'ArrowDown' ||
+                    e.code === 'ArrowLeft' ||
+                    e.code === 'ArrowRight' ||
+                    e.code === 'End' ||
+                    e.code === 'Home' ||
+                    e.code === 'PageUp' ||
+                    e.code === 'PageDown') {
+                    const { x, y } = this.getNextItemCoordinate(e);
+                    const activeItem = this.rows
+                        ? Array.from(this.rows[y].querySelectorAll(this.config.keyGridCells))[x]
+                        : null;
+                    if (activeItem) {
+                        this.setActiveCell(activeItem);
+                    }
+                    e.preventDefault();
+                }
+            });
+        });
+        this.listenersAdded = true;
+    }
+    initializeKeyGrid(host) {
+        this.host = host;
+        this.addListeners();
+        this.resetKeyGrid();
+    }
+    resetKeyGrid() {
+        var _a;
+        (_a = this.cells) === null || _a === void 0 ? void 0 : _a.forEach((i) => i.setAttribute('tabindex', '-1'));
+        const firstCell = this.cells ? this.cells[0] : null;
+        firstCell === null || firstCell === void 0 ? void 0 : firstCell.setAttribute('tabindex', '0');
+    }
+    removeActiveCell() {
+        this._activeCell = null;
+    }
+    getActiveCell() {
+        return this._activeCell;
+    }
+    setActiveCell(activeCell) {
+        const prior = this.cells ? Array.from(this.cells).find(c => c.getAttribute('tabindex') === '0') : null;
+        if (prior) {
+            prior.setAttribute('tabindex', '-1');
+        }
+        activeCell.setAttribute('tabindex', '0');
+        this._activeCell = activeCell;
+        const items = getTabableItems(activeCell);
+        const item = activeCell.getAttribute('role') !== 'columnheader' && items[0] ? items[0] : activeCell;
+        if (!this.skipItemFocus) {
+            item.focus();
+        }
+    }
+    getNextItemCoordinate(e) {
+        var _a;
+        let currentCell = this.cells ? Array.from(this.cells).find(i => i.getAttribute('tabindex') === '0') : null;
+        if (e.code === 'Tab') {
+            currentCell = document.activeElement;
+        }
+        const currentRow = this.rows && currentCell ? Array.from(this.rows).find(r => r.contains(currentCell)) : null;
+        const numOfRows = this.rows ? this.rows.length - 1 : 0;
+        const numOfColumns = this.cells ? Math.floor(this.cells.length / this.rows.length - 1) : 0;
+        let x = currentRow && currentCell
+            ? Array.from(currentRow.querySelectorAll(this.config.keyGridCells)).indexOf(currentCell)
+            : 0;
+        let y = currentRow && currentCell && this.rows ? Array.from(this.rows).indexOf(currentRow) : 0;
+        const dir = this.host.dir;
+        const inlineStart = dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+        const inlineEnd = dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
+        const itemsPerPage = Math.floor(((_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelector('.datagrid').clientHeight) / this.rows[0].clientHeight) - 1 || 0;
+        if (e.code === 'ArrowUp' && y !== 0) {
+            y = y - 1;
+        }
+        else if (e.code === 'ArrowDown' && y < numOfRows) {
+            y = y + 1;
+        }
+        else if (e.code === inlineStart && x !== 0) {
+            x = x - 1;
+        }
+        else if (e.code === inlineEnd && x < numOfColumns) {
+            x = x + 1;
+        }
+        else if (e.code === 'End') {
+            x = numOfColumns;
+            if (e.ctrlKey) {
+                y = numOfRows;
+            }
+        }
+        else if (e.code === 'Home') {
+            x = 0;
+            if (e.ctrlKey) {
+                y = 0;
+            }
+        }
+        else if (e.code === 'PageUp') {
+            y = y - itemsPerPage > 0 ? y - itemsPerPage + 1 : 1;
+        }
+        else if (e.code === 'PageDown') {
+            y = y + itemsPerPage < numOfRows ? y + itemsPerPage : numOfRows;
+        }
+        return { x, y };
+    }
+}
+KeyNavigationGridController.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: KeyNavigationGridController, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+KeyNavigationGridController.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: KeyNavigationGridController });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: KeyNavigationGridController, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
+
 /*
  * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
  * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
@@ -12199,12 +12403,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
  * since it can be anything (not just a text input).
  */
 class ClrDatagridFilter extends DatagridFilterRegistrar {
-    constructor(_filters, commonStrings, smartToggleService, platformId, elementRef) {
+    constructor(_filters, commonStrings, smartToggleService, platformId, elementRef, keyNavigation) {
         super(_filters);
         this.commonStrings = commonStrings;
         this.smartToggleService = smartToggleService;
         this.platformId = platformId;
         this.elementRef = elementRef;
+        this.keyNavigation = keyNavigation;
         this.openChange = new EventEmitter(false);
         this.ariaExpanded = false;
         this.popoverId = uniqueIdFactory();
@@ -12233,6 +12438,9 @@ class ClrDatagridFilter extends DatagridFilterRegistrar {
             if (!open && isPlatformBrowser(this.platformId)) {
                 this.anchor.nativeElement.focus();
             }
+            if (this.keyNavigation) {
+                this.keyNavigation.skipItemFocus = open;
+            }
             // keep track of the state
             this._open = open;
         }
@@ -12247,7 +12455,9 @@ class ClrDatagridFilter extends DatagridFilterRegistrar {
         return !!this.filter && this.filter.isActive();
     }
     ngOnChanges() {
-        this.setToggleButtonAriaLabel();
+        setTimeout(() => {
+            this.setToggleButtonAriaLabel();
+        });
     }
     ngOnDestroy() {
         super.ngOnDestroy();
@@ -12267,7 +12477,7 @@ class ClrDatagridFilter extends DatagridFilterRegistrar {
         });
     }
 }
-ClrDatagridFilter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagridFilter, deps: [{ token: FiltersProvider }, { token: ClrCommonStringsService }, { token: ClrPopoverToggleService }, { token: PLATFORM_ID }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ClrDatagridFilter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagridFilter, deps: [{ token: FiltersProvider }, { token: ClrCommonStringsService }, { token: ClrPopoverToggleService }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: KeyNavigationGridController, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 ClrDatagridFilter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrDatagridFilter, selector: "clr-dg-filter", inputs: { open: ["clrDgFilterOpen", "open"], customFilter: ["clrDgFilter", "customFilter"] }, outputs: { openChange: "clrDgFilterOpenChange" }, providers: [{ provide: CustomFilter, useExisting: ClrDatagridFilter }], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
     <button
       class="datagrid-filter-toggle"
@@ -12353,7 +12563,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
         return [{ type: FiltersProvider }, { type: ClrCommonStringsService }, { type: ClrPopoverToggleService }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [PLATFORM_ID]
-                    }] }, { type: i0.ElementRef }];
+                    }] }, { type: i0.ElementRef }, { type: KeyNavigationGridController, decorators: [{
+                        type: Optional
+                    }] }];
     }, propDecorators: { openChange: [{
                 type: Output,
                 args: ['clrDgFilterOpenChange']
@@ -13116,6 +13328,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
 class DetailService {
     constructor(modalStackService) {
         this.modalStackService = modalStackService;
+        this.preventScroll = false;
         this.toggleState = false;
         this._enabled = false;
         this._state = new BehaviorSubject(this.toggleState);
@@ -13126,6 +13339,12 @@ class DetailService {
     set enabled(state) {
         this._enabled = state;
     }
+    get preventFocusScroll() {
+        return this.preventScroll;
+    }
+    set preventFocusScroll(preventScroll) {
+        this.preventScroll = preventScroll;
+    }
     get state() {
         return this.cache;
     }
@@ -13144,15 +13363,13 @@ class DetailService {
     }
     close() {
         this.toggleState = false;
+        this.returnFocus();
         this._state.next(this.toggleState);
         this.modalStackService.trackModalClose(this);
-        // In the case of browser zoom greater than 250%, the detail pane toggle button is not visible on the page.
-        // Wait for the detail pane to close, and return focus to the detail toggle button.
-        setTimeout(() => this.returnFocus(), 0);
     }
     returnFocus() {
         if (this.button) {
-            this.button.focus();
+            this.button.focus({ preventScroll: this.preventFocusScroll });
             this.button = null;
         }
     }
@@ -14363,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: [{
@@ -14373,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' },
@@ -15222,6 +15439,8 @@ class ClrDatagridRow {
         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 */
@@ -15449,11 +15668,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              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              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              *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            (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: {
@@ -15465,7 +15684,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              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              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              *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            (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,
@@ -15477,6 +15696,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]
@@ -15525,10 +15750,11 @@ var DatagridColumnChanges;
 (function (DatagridColumnChanges) {
     DatagridColumnChanges[DatagridColumnChanges["WIDTH"] = 0] = "WIDTH";
     DatagridColumnChanges[DatagridColumnChanges["HIDDEN"] = 1] = "HIDDEN";
+    DatagridColumnChanges[DatagridColumnChanges["INITIALIZE"] = 2] = "INITIALIZE";
 })(DatagridColumnChanges || (DatagridColumnChanges = {}));
 const ALL_COLUMN_CHANGES = Object.keys(DatagridColumnChanges)
     .map(key => DatagridColumnChanges[key])
-    .filter(key => key === parseInt(key, 10)); // extracts only integer keys
+    .filter(key => key === parseInt(key, 10) && key !== DatagridColumnChanges.INITIALIZE); // extracts only integer keys
 
 /*
  * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
@@ -15539,6 +15765,7 @@ const ALL_COLUMN_CHANGES = Object.keys(DatagridColumnChanges)
 class ColumnsService {
     constructor() {
         this.columns = [];
+        this.columnsStateChange = new BehaviorSubject(null);
         this._cache = [];
     }
     get columnStates() {
@@ -15560,7 +15787,9 @@ class ColumnsService {
     resetToLastCache() {
         this._cache.forEach((state, index) => {
             // Just emit the exact value from the cache
-            this.columns[index].next(Object.assign(Object.assign({}, state), { changes: ALL_COLUMN_CHANGES }));
+            const cachedState = Object.assign(Object.assign({}, state), { changes: ALL_COLUMN_CHANGES });
+            this.columns[index].next(cachedState);
+            this.columnsStateChange.next(cachedState);
         });
         this._cache = [];
     }
@@ -15572,7 +15801,9 @@ class ColumnsService {
         this.emitStateChange(this.columns[columnIndex], diff);
     }
     emitStateChange(column, diff) {
-        column.next(Object.assign(Object.assign({}, column.value), diff));
+        const changedState = Object.assign(Object.assign({}, column.value), diff);
+        column.next(changedState);
+        this.columnsStateChange.next(changedState);
     }
 }
 ColumnsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ColumnsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -15648,193 +15879,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
             type: Injectable
         }], ctorParameters: function () { return [{ type: FiltersProvider }, { type: Sort }, { type: Page }, { type: StateDebouncer }]; } });
 
-/*
- * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-function getTabableItems(el) {
-    const tabableSelector = [
-        'a[href]',
-        'area[href]',
-        'input:not([disabled])',
-        'button:not([disabled])',
-        'select:not([disabled])',
-        'textarea:not([disabled])',
-        'iframe',
-        'object',
-        'embed',
-        '*[tabindex]',
-        '*[contenteditable=true]',
-        '[role=button]:not([disabled])',
-    ].join(',');
-    return Array.from(el.querySelectorAll(tabableSelector));
-}
-class KeyNavigationGridController {
-    constructor(zone) {
-        this.zone = zone;
-        this.listenersAdded = false;
-        this.destroy$ = new Subject();
-        this._activeCell = null;
-        this.config = {
-            keyGridRows: '[role=row]:not(.datagrid-placeholder)',
-            keyGridCells: '[role=gridcell]:not(.datagrid-hidden-column):not(.datagrid-placeholder-content), [role=columnheader]:not(.datagrid-hidden-column):not(.datagrid-placeholder-content), .datagrid-detail-caret',
-            keyGrid: '[role=grid]',
-        };
-    }
-    get grid() {
-        var _a;
-        return (_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelector(this.config.keyGrid);
-    }
-    get rows() {
-        var _a;
-        return (_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.config.keyGridRows);
-    }
-    get cells() {
-        var _a;
-        return (_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.config.keyGridCells);
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-    addListeners() {
-        if (this.listenersAdded) {
-            return;
-        }
-        this.zone.runOutsideAngular(() => {
-            fromEvent(this.grid, 'mousedown')
-                .pipe(takeUntil(this.destroy$))
-                .subscribe((e) => {
-                // preserve right click for context menus & keyboard mouse control https://apple.stackexchange.com/questions/32715/how-do-i-open-the-context-menu-from-a-mac-keyboard
-                if (e.buttons === 1 && !e.ctrlKey) {
-                    const activeCell = this.cells
-                        ? Array.from(this.cells).find(c => c === e.target || c === e.target.closest(this.config.keyGridCells))
-                        : null;
-                    if (activeCell) {
-                        this.setActiveCell(activeCell);
-                    }
-                }
-            });
-            fromEvent(this.grid, 'wheel')
-                .pipe(takeUntil(this.destroy$))
-                .subscribe(() => {
-                this.removeActiveCell();
-            });
-            fromEvent(this.grid, 'keydown')
-                .pipe(takeUntil(this.destroy$))
-                .subscribe((e) => {
-                // Skip column resize events
-                if (e.target.classList.contains('drag-handle') &&
-                    (e.code === 'ArrowLeft' || e.code === 'ArrowRight')) {
-                    return;
-                }
-                if (e.code === 'ArrowUp' ||
-                    e.code === 'ArrowDown' ||
-                    e.code === 'ArrowLeft' ||
-                    e.code === 'ArrowRight' ||
-                    e.code === 'End' ||
-                    e.code === 'Home' ||
-                    e.code === 'PageUp' ||
-                    e.code === 'PageDown') {
-                    const { x, y } = this.getNextItemCoordinate(e);
-                    const activeItem = this.rows
-                        ? Array.from(this.rows[y].querySelectorAll(this.config.keyGridCells))[x]
-                        : null;
-                    if (activeItem) {
-                        this.setActiveCell(activeItem);
-                    }
-                    e.preventDefault();
-                }
-            });
-        });
-        this.listenersAdded = true;
-    }
-    initializeKeyGrid(host) {
-        this.host = host;
-        this.addListeners();
-        this.resetKeyGrid();
-    }
-    resetKeyGrid() {
-        var _a;
-        (_a = this.cells) === null || _a === void 0 ? void 0 : _a.forEach((i) => i.setAttribute('tabindex', '-1'));
-        const firstCell = this.cells ? this.cells[0] : null;
-        firstCell === null || firstCell === void 0 ? void 0 : firstCell.setAttribute('tabindex', '0');
-    }
-    removeActiveCell() {
-        this._activeCell = null;
-    }
-    getActiveCell() {
-        return this._activeCell;
-    }
-    setActiveCell(activeCell) {
-        const prior = this.cells ? Array.from(this.cells).find(c => c.getAttribute('tabindex') === '0') : null;
-        if (prior) {
-            prior.setAttribute('tabindex', '-1');
-        }
-        activeCell.setAttribute('tabindex', '0');
-        const items = getTabableItems(activeCell);
-        const item = activeCell.getAttribute('role') !== 'columnheader' && items[0] ? items[0] : activeCell;
-        item.focus();
-        this._activeCell = item;
-    }
-    getNextItemCoordinate(e) {
-        var _a;
-        let currentCell = this.cells ? Array.from(this.cells).find(i => i.getAttribute('tabindex') === '0') : null;
-        if (e.code === 'Tab') {
-            currentCell = document.activeElement;
-        }
-        const currentRow = this.rows && currentCell ? Array.from(this.rows).find(r => r.contains(currentCell)) : null;
-        const numOfRows = this.rows ? this.rows.length - 1 : 0;
-        const numOfColumns = this.cells ? Math.floor(this.cells.length / this.rows.length - 1) : 0;
-        let x = currentRow && currentCell
-            ? Array.from(currentRow.querySelectorAll(this.config.keyGridCells)).indexOf(currentCell)
-            : 0;
-        let y = currentRow && currentCell && this.rows ? Array.from(this.rows).indexOf(currentRow) : 0;
-        const dir = this.host.dir;
-        const inlineStart = dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
-        const inlineEnd = dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
-        const itemsPerPage = Math.floor(((_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelector('.datagrid').clientHeight) / this.rows[0].clientHeight) - 1 || 0;
-        if (e.code === 'ArrowUp' && y !== 0) {
-            y = y - 1;
-        }
-        else if (e.code === 'ArrowDown' && y < numOfRows) {
-            y = y + 1;
-        }
-        else if (e.code === inlineStart && x !== 0) {
-            x = x - 1;
-        }
-        else if (e.code === inlineEnd && x < numOfColumns) {
-            x = x + 1;
-        }
-        else if (e.code === 'End') {
-            x = numOfColumns;
-            if (e.ctrlKey) {
-                y = numOfRows;
-            }
-        }
-        else if (e.code === 'Home') {
-            x = 0;
-            if (e.ctrlKey) {
-                y = 0;
-            }
-        }
-        else if (e.code === 'PageUp') {
-            y = y - itemsPerPage > 0 ? y - itemsPerPage + 1 : 1;
-        }
-        else if (e.code === 'PageDown') {
-            y = y + itemsPerPage < numOfRows ? y + itemsPerPage : numOfRows;
-        }
-        return { x, y };
-    }
-}
-KeyNavigationGridController.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: KeyNavigationGridController, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-KeyNavigationGridController.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: KeyNavigationGridController });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: KeyNavigationGridController, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
-
 /*
  * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
  * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
@@ -15868,7 +15912,6 @@ class DatagridCellRenderer {
         }
     }
     resetState(state) {
-        state.changes = ALL_COLUMN_CHANGES;
         this.setWidth(state);
         this.setHidden(state);
     }
@@ -15949,7 +15992,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: [{
@@ -15958,6 +16001,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)]
             }] } });
 
 /*
@@ -16093,26 +16139,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);
-                }
-                else if (!this.hasVirtualScroller || !row) {
-                    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 PageUp and PageDown buttons in virtual scroller
-            const active = this.keyNavigation.getActiveCell();
-            if (active) {
-                this.zone.runOutsideAngular(() => {
-                    setTimeout(() => this.keyNavigation.setActiveCell(active));
-                });
-            }
         }));
     }
     /**
@@ -16120,6 +16157,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 => {
@@ -16193,9 +16231,39 @@ class ClrDatagrid {
     ngOnDestroy() {
         this._subscriptions.forEach((sub) => sub.unsubscribe());
     }
+    toggleAllSelected($event) {
+        $event.preventDefault();
+        if (this.hasVirtualScroller) {
+            return;
+        }
+        this.allSelected = !this.allSelected;
+    }
     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
      */
@@ -16220,7 +16288,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)=\"allSelected = !allSelected; $event.preventDefault()\"\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-loading-more-items-row\" *ngIf=\"loadingMoreItems\">\n              <clr-dg-cell class=\"datagrid-loading-more-items-cell\">\n                <clr-spinner [clrMedium]=\"true\"></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-loading-more-items-row\" *ngIf=\"loadingMoreItems\">\n              <clr-dg-cell class=\"datagrid-loading-more-items-cell\">\n                <clr-spinner [clrMedium]=\"true\"></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: [
@@ -16242,7 +16310,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                     ], host: {
                         '[class.datagrid-host]': 'true',
                         '[class.datagrid-detail-open]': 'detailService.isOpen',
-                    }, 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)=\"allSelected = !allSelected; $event.preventDefault()\"\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-loading-more-items-row\" *ngIf=\"loadingMoreItems\">\n              <clr-dg-cell class=\"datagrid-loading-more-items-cell\">\n                <clr-spinner [clrMedium]=\"true\"></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-loading-more-items-row\" *ngIf=\"loadingMoreItems\">\n              <clr-dg-cell class=\"datagrid-loading-more-items-cell\">\n                <clr-spinner [clrMedium]=\"true\"></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" }]
+                    }, 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" }]
         }], ctorParameters: function () {
         return [{ type: DatagridRenderOrganizer }, { type: Items }, { type: ExpandableRowsCount }, { type: Selection }, { type: RowActionService }, { type: StateProvider }, { type: DisplayModeService }, { type: i0.Renderer2 }, { type: DetailService }, { type: undefined, decorators: [{
                         type: Inject,
@@ -16413,6 +16481,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.ɵ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"
       class="datagrid-action-toggle"
       type="button"
       role="button"
@@ -16447,6 +16516,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                     hostDirectives: [ClrPopoverHostDirective],
                     template: `
     <button
+      tabindex="-1"
       class="datagrid-action-toggle"
       type="button"
       role="button"
@@ -16754,10 +16824,13 @@ class ClrDatagridDetailHeader {
     get titleId() {
         return `${this.detailService.id}-title`;
     }
+    ngAfterViewInit() {
+        this.title.nativeElement.focus();
+    }
 }
 ClrDatagridDetailHeader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagridDetailHeader, deps: [{ token: DetailService }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
-ClrDatagridDetailHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrDatagridDetailHeader, selector: "clr-dg-detail-header", host: { properties: { "class.datagrid-detail-header": "true" } }, ngImport: i0, template: `
-    <div class="datagrid-detail-header-title" cdkFocusInitial tabindex="-1" [id]="titleId">
+ClrDatagridDetailHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrDatagridDetailHeader, selector: "clr-dg-detail-header", host: { properties: { "class.datagrid-detail-header": "true" } }, viewQueries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true }], ngImport: i0, template: `
+    <div #title class="datagrid-detail-header-title" tabindex="-1" [id]="titleId">
       <ng-content></ng-content>
     </div>
     <div class="datagrid-detail-pane-close">
@@ -16779,7 +16852,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                         '[class.datagrid-detail-header]': 'true',
                     },
                     template: `
-    <div class="datagrid-detail-header-title" cdkFocusInitial tabindex="-1" [id]="titleId">
+    <div #title class="datagrid-detail-header-title" tabindex="-1" [id]="titleId">
       <ng-content></ng-content>
     </div>
     <div class="datagrid-detail-pane-close">
@@ -16794,7 +16867,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
     </div>
   `,
                 }]
-        }], ctorParameters: function () { return [{ type: DetailService }, { type: ClrCommonStringsService }]; } });
+        }], ctorParameters: function () { return [{ type: DetailService }, { type: ClrCommonStringsService }]; }, propDecorators: { title: [{
+                type: ViewChild,
+                args: ['title']
+            }] } });
 
 /*
  * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
@@ -16807,21 +16883,43 @@ class ClrDatagridDetail {
         this.detailService = detailService;
         this.commonStrings = commonStrings;
     }
+    get labelledBy() {
+        var _a;
+        if (this.ariaLabelledBy) {
+            return this.header ? `${this.header.titleId} ${this.ariaLabelledBy}` : this.ariaLabelledBy;
+        }
+        else if (this.ariaLabel) {
+            // If aria-label is set by the end user, do not set aria-labelledby
+            return null;
+        }
+        else {
+            return ((_a = this.header) === null || _a === void 0 ? void 0 : _a.titleId) || '';
+        }
+    }
+    get label() {
+        if (!this.ariaLabelledBy) {
+            return this.ariaLabel || null;
+        }
+        else {
+            return null;
+        }
+    }
     close() {
         this.detailService.close();
     }
 }
 ClrDatagridDetail.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagridDetail, deps: [{ token: DetailService }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
-ClrDatagridDetail.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrDatagridDetail, selector: "clr-dg-detail", host: { properties: { "class.datagrid-detail-pane": "true" } }, queries: [{ propertyName: "header", first: true, predicate: ClrDatagridDetailHeader, descendants: true }], ngImport: i0, template: `
+ClrDatagridDetail.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrDatagridDetail, selector: "clr-dg-detail", inputs: { ariaLabelledBy: ["clrDetailAriaLabelledBy", "ariaLabelledBy"], ariaLabel: ["clrDetailAriaLabel", "ariaLabel"] }, host: { properties: { "class.datagrid-detail-pane": "true" } }, queries: [{ propertyName: "header", first: true, predicate: ClrDatagridDetailHeader, descendants: true }], ngImport: i0, template: `
     <div
       cdkTrapFocus
-      [cdkTrapFocusAutoCapture]="true"
+      [cdkTrapFocusAutoCapture]="!header"
       class="datagrid-detail-pane-content"
       *ngIf="detailService.isOpen"
       role="dialog"
       [id]="detailService.id"
       aria-modal="true"
-      [attr.aria-describedby]="header ? header.titleId : ''"
+      [attr.aria-labelledby]="labelledBy"
+      [attr.aria-label]="label"
     >
       <div class="clr-sr-only">{{ commonStrings.keys.detailPaneStart }}</div>
       <ng-content></ng-content>
@@ -16840,13 +16938,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                     template: `
     <div
       cdkTrapFocus
-      [cdkTrapFocusAutoCapture]="true"
+      [cdkTrapFocusAutoCapture]="!header"
       class="datagrid-detail-pane-content"
       *ngIf="detailService.isOpen"
       role="dialog"
       [id]="detailService.id"
       aria-modal="true"
-      [attr.aria-describedby]="header ? header.titleId : ''"
+      [attr.aria-labelledby]="labelledBy"
+      [attr.aria-label]="label"
     >
       <div class="clr-sr-only">{{ commonStrings.keys.detailPaneStart }}</div>
       <ng-content></ng-content>
@@ -16854,7 +16953,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
     </div>
   `,
                 }]
-        }], ctorParameters: function () { return [{ type: DetailService }, { type: ClrCommonStringsService }]; }, propDecorators: { header: [{
+        }], ctorParameters: function () { return [{ type: DetailService }, { type: ClrCommonStringsService }]; }, propDecorators: { ariaLabelledBy: [{
+                type: Input,
+                args: ['clrDetailAriaLabelledBy']
+            }], ariaLabel: [{
+                type: Input,
+                args: ['clrDetailAriaLabel']
+            }], header: [{
                 type: ContentChild,
                 args: [ClrDatagridDetailHeader]
             }] } });
@@ -17132,6 +17237,9 @@ class ClrIfDetail {
         }
         this.skip = false;
     }
+    get viewContext() {
+        return { $implicit: this.detailService.state };
+    }
     ngOnInit() {
         this.subscriptions.push(this.detailService.stateChange.subscribe(state => {
             if (state === true) {
@@ -17148,12 +17256,11 @@ class ClrIfDetail {
     togglePanel(showPanel) {
         let stateChangeParams = null;
         if (showPanel === true) {
-            const embeddedViewContext = { $implicit: this.detailService.state };
-            if (this.embeddedViewRef) {
-                this.embeddedViewRef.context = embeddedViewContext;
-            }
-            else {
-                this.embeddedViewRef = this.viewContainer.createEmbeddedView(this.templateRef, embeddedViewContext);
+            if (!this.embeddedViewRef) {
+                // Create a context forward `Proxy` that will always bind to the user-specified context,
+                // without having to re-assign it whenever changes.
+                const viewContext = this._createContextForwardProxy();
+                this.embeddedViewRef = this.viewContainer.createEmbeddedView(this.templateRef, viewContext);
             }
             this.skip = true;
             stateChangeParams = this.detailService.state;
@@ -17164,6 +17271,27 @@ class ClrIfDetail {
         }
         this.stateChange.emit(stateChangeParams);
     }
+    /**
+     * For a given outlet instance, we create a proxy object that delegates
+     * to the user-specified context. This allows changing, or swapping out
+     * the context object completely without having to destroy/re-create the view.
+     */
+    _createContextForwardProxy() {
+        return new Proxy({}, {
+            set: (_target, prop, newValue) => {
+                if (!this.viewContext) {
+                    return false;
+                }
+                return Reflect.set(this.viewContext, prop, newValue);
+            },
+            get: (_target, prop, receiver) => {
+                if (!this.viewContext) {
+                    return undefined;
+                }
+                return Reflect.get(this.viewContext, prop, receiver);
+            },
+        });
+    }
 }
 ClrIfDetail.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrIfDetail, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: DetailService }], target: i0.ɵɵFactoryTarget.Directive });
 ClrIfDetail.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", type: ClrIfDetail, selector: "[clrIfDetail]", inputs: { state: ["clrIfDetail", "state"] }, outputs: { stateChange: "clrIfDetailChange" }, ngImport: i0 });
@@ -17375,7 +17503,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 });
@@ -17696,7 +17824,7 @@ const defaultCdkFixedSizeVirtualScrollInputs = {
     maxBufferPx: 400,
 };
 class ClrDatagridVirtualScrollDirective {
-    constructor(changeDetectorRef, iterableDiffers, items, ngZone, templateRef, viewContainerRef, directionality, scrollDispatcher, viewportRuler, datagrid, injector) {
+    constructor(changeDetectorRef, iterableDiffers, items, ngZone, templateRef, viewContainerRef, directionality, scrollDispatcher, viewportRuler, datagrid, columnsService, injector) {
         this.changeDetectorRef = changeDetectorRef;
         this.iterableDiffers = iterableDiffers;
         this.items = items;
@@ -17707,6 +17835,7 @@ class ClrDatagridVirtualScrollDirective {
         this.scrollDispatcher = scrollDispatcher;
         this.viewportRuler = viewportRuler;
         this.datagrid = datagrid;
+        this.columnsService = columnsService;
         this.injector = injector;
         this.renderedRangeChange = new EventEmitter();
         this._cdkFixedSizeVirtualScrollInputs = Object.assign({}, defaultCdkFixedSizeVirtualScrollInputs);
@@ -17719,12 +17848,16 @@ class ClrDatagridVirtualScrollDirective {
                 }
             });
         });
+        this.viewRepeater = new _RecycleViewRepeaterStrategy();
         this.cdkVirtualForInputs = {
             cdkVirtualForTrackBy: index => index,
         };
         this.items.smartenUp();
         this.datagrid.hasVirtualScroller = true;
+        this.datagrid.detailService.preventFocusScroll = true;
         this.datagridElementRef = this.datagrid.el;
+        // default
+        this.cdkVirtualForTemplateCacheSize = 20;
         this.mutationChanges.observe(this.datagridElementRef.nativeElement, {
             attributeFilter: ['class'],
             attributeOldValue: true,
@@ -17785,7 +17918,7 @@ class ClrDatagridVirtualScrollDirective {
     ngAfterViewInit() {
         this.injector.runInContext(() => {
             this.virtualScrollViewport = this.createVirtualScrollViewportForDatagrid(this.changeDetectorRef, this.ngZone, this.directionality, this.scrollDispatcher, this.viewportRuler, this.datagridElementRef, this.virtualScrollStrategy);
-            this.cdkVirtualFor = new CdkVirtualForOf(this.viewContainerRef, this.templateRef, this.iterableDiffers, new _RecycleViewRepeaterStrategy(), this.virtualScrollViewport, this.ngZone);
+            this.cdkVirtualFor = new CdkVirtualForOf(this.viewContainerRef, this.templateRef, this.iterableDiffers, this.viewRepeater, this.virtualScrollViewport, this.ngZone);
             this.virtualScrollViewport.ngOnInit();
         });
         this.gridRoleElement = this.datagridElementRef.nativeElement.querySelector('[role="grid"]');
@@ -17800,6 +17933,8 @@ class ClrDatagridVirtualScrollDirective {
             if (datagridState.filters) {
                 this.virtualScrollViewport.scrollToIndex(0);
             }
+        }), this.columnsService.columnsStateChange.subscribe(() => {
+            this.viewRepeater.detach();
         }));
     }
     ngDoCheck() {
@@ -17875,7 +18010,7 @@ class ClrDatagridVirtualScrollDirective {
         return virtualScrollViewport;
     }
 }
-ClrDatagridVirtualScrollDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagridVirtualScrollDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.IterableDiffers }, { token: Items, skipSelf: true }, { token: i0.NgZone }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i1$2.Directionality }, { token: i3$1.ScrollDispatcher }, { token: i3$1.ViewportRuler }, { token: ClrDatagrid }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Directive });
+ClrDatagridVirtualScrollDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagridVirtualScrollDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.IterableDiffers }, { token: Items, skipSelf: true }, { token: i0.NgZone }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i1$2.Directionality }, { token: i3$1.ScrollDispatcher }, { token: i3$1.ViewportRuler }, { token: ClrDatagrid }, { token: ColumnsService }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Directive });
 ClrDatagridVirtualScrollDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", type: ClrDatagridVirtualScrollDirective, selector: "[ClrVirtualScroll]", inputs: { cdkVirtualForOf: ["clrVirtualRowsOf", "cdkVirtualForOf"], cdkVirtualForTrackBy: ["clrVirtualRowsTrackBy", "cdkVirtualForTrackBy"], cdkVirtualForTemplate: ["clrVirtualRowsTemplate", "cdkVirtualForTemplate"], cdkVirtualForTemplateCacheSize: ["clrVirtualRowsTemplateCacheSize", "cdkVirtualForTemplateCacheSize"], itemSize: ["clrVirtualRowsItemSize", "itemSize"], minBufferPx: ["clrVirtualRowsMinBufferPx", "minBufferPx"], maxBufferPx: ["clrVirtualRowsMaxBufferPx", "maxBufferPx"] }, outputs: { renderedRangeChange: "renderedRangeChange" }, providers: [Items], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagridVirtualScrollDirective, decorators: [{
             type: Directive,
@@ -17886,7 +18021,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
         }], ctorParameters: function () {
         return [{ type: i0.ChangeDetectorRef }, { type: i0.IterableDiffers }, { type: Items, decorators: [{
                         type: SkipSelf
-                    }] }, { type: i0.NgZone }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: i1$2.Directionality }, { type: i3$1.ScrollDispatcher }, { type: i3$1.ViewportRuler }, { type: ClrDatagrid }, { type: i0.EnvironmentInjector }];
+                    }] }, { type: i0.NgZone }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: i1$2.Directionality }, { type: i3$1.ScrollDispatcher }, { type: i3$1.ViewportRuler }, { type: ClrDatagrid }, { type: ColumnsService }, { type: i0.EnvironmentInjector }];
     }, propDecorators: { renderedRangeChange: [{
                 type: Output
             }], cdkVirtualForOf: [{
@@ -18114,6 +18249,9 @@ class DatagridMainRenderer {
         this.subscriptions.push(this.detailService.stateChange.subscribe(state => this.toggleDetailPane(state)));
         this.subscriptions.push(this.items.change.subscribe(() => (this.shouldStabilizeColumns = true)));
     }
+    ngOnInit() {
+        this.columnsService.columnsStateChange.subscribe(change => this.columnStateChanged(change));
+    }
     ngAfterContentInit() {
         this.setupColumns();
         this.subscriptions.push(this.headers.changes.subscribe(() => {
@@ -18123,7 +18261,6 @@ class DatagridMainRenderer {
             this.columnsSizesStable = false;
             this.stabilizeColumns();
         }));
-        this.listenForColumnChanges();
     }
     // Initialize and set Table width for horizontal scrolling here.
     ngAfterViewInit() {
@@ -18131,7 +18268,9 @@ class DatagridMainRenderer {
     }
     ngAfterViewChecked() {
         if (this.shouldStabilizeColumns) {
-            this.stabilizeColumns();
+            setTimeout(() => {
+                this.stabilizeColumns();
+            }, 0);
         }
         if (this.shouldComputeHeight()) {
             this.ngZone.runOutsideAngular(() => {
@@ -18165,7 +18304,10 @@ class DatagridMainRenderer {
     setupColumns() {
         this.headers.forEach((header, index) => header.setColumnState(index));
         this.columnsService.columns.splice(this.headers.length); // Trim any old columns
-        this.rows.forEach(row => row.setCellsState());
+        // Sets columnIndex for each column
+        this.columnsService.columns.forEach((column, index) => {
+            this.columnsService.emitStateChange(column, { changes: [DatagridColumnChanges.INITIALIZE], columnIndex: index });
+        });
     }
     shouldComputeHeight() {
         if (!this._heightSet && this.page.size > 0) {
@@ -18219,6 +18361,10 @@ class DatagridMainRenderer {
         });
     }
     columnStateChanged(state) {
+        // eslint-disable-next-line eqeqeq
+        if (!this.headers || state.columnIndex == null) {
+            return;
+        }
         const columnIndex = state.columnIndex;
         if (state.changes && state.changes.length) {
             state.changes.forEach(change => {
@@ -18226,37 +18372,40 @@ class DatagridMainRenderer {
                     case DatagridColumnChanges.WIDTH:
                         this.headers.get(columnIndex).setWidth(state);
                         this.rows.forEach(row => {
-                            if (row.cells && row.cells.length) {
+                            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();
                         break;
+                    case DatagridColumnChanges.INITIALIZE:
+                        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;
                     default:
                         break;
                 }
             });
         }
     }
-    listenForColumnChanges() {
-        this.columnsService.columns.forEach((column, index) => {
-            this.columnsService.emitStateChange(column, { changes: [], columnIndex: index });
-        });
-        /*
-          Merges all column subject so we can track them at once
-          and receive only the changed column as result
-        */
-        const columnChanges = merge(...this.columnsService.columns);
-        this.subscriptions.push(columnChanges.subscribe(change => this.columnStateChanged(change)));
-    }
     /**
      * Triggers a whole re-rendring cycle to set column sizes, if needed.
      */
@@ -18274,7 +18423,7 @@ class DatagridMainRenderer {
     }
 }
 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.ɵ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: [{
@@ -18286,7 +18435,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                 args: [DatagridHeaderRenderer]
             }], rows: [{
                 type: ContentChildren,
-                args: [DatagridRowRenderer, { descendants: true }]
+                args: [DatagridRowRenderer]
             }] } });
 
 /*
@@ -18748,7 +18897,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;
 }
 
 /*
@@ -19722,7 +19873,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) {
@@ -21982,18 +22133,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) {
@@ -22045,7 +22201,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) {
@@ -23556,6 +23712,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);
@@ -23575,7 +23738,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%)' }),
@@ -23610,8 +23773,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']
             }, {
@@ -23772,7 +23938,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();
         }
     }
@@ -24663,13 +24831,13 @@ class ClrTimeline {
     }
 }
 ClrTimeline.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrTimeline, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrTimeline.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrTimeline, selector: "clr-timeline", inputs: { layout: ["clrLayout", "layout"] }, host: { properties: { "class.clr-timeline": "true", "class.clr-timeline-vertical": "this.isVertical" } }, providers: [TimelineIconAttributeService], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+ClrTimeline.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrTimeline, selector: "clr-timeline", inputs: { layout: ["clrLayout", "layout"] }, host: { properties: { "class.clr-timeline": "true", "attr.role": "\"list\"", "class.clr-timeline-vertical": "this.isVertical" } }, providers: [TimelineIconAttributeService], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrTimeline, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-timeline',
                     template: `<ng-content></ng-content>`,
-                    host: { '[class.clr-timeline]': 'true' },
+                    host: { '[class.clr-timeline]': 'true', '[attr.role]': '"list"' },
                     providers: [TimelineIconAttributeService],
                 }]
         }], propDecorators: { layout: [{
@@ -24740,7 +24908,7 @@ class ClrTimelineStep {
     }
 }
 ClrTimelineStep.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrTimelineStep, deps: [{ token: TimelineIconAttributeService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
-ClrTimelineStep.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrTimelineStep, selector: "clr-timeline-step", inputs: { state: ["clrState", "state"] }, host: { properties: { "class.clr-timeline-step": "true" } }, queries: [{ propertyName: "stepTitle", first: true, predicate: ClrTimelineStepTitle, descendants: true, read: ElementRef }], ngImport: i0, template: `
+ClrTimelineStep.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrTimelineStep, selector: "clr-timeline-step", inputs: { state: ["clrState", "state"] }, host: { properties: { "class.clr-timeline-step": "true", "attr.role": "\"listitem\"" } }, queries: [{ propertyName: "stepTitle", first: true, predicate: ClrTimelineStepTitle, descendants: true, read: ElementRef }], ngImport: i0, template: `
     <ng-content select="clr-timeline-step-header"></ng-content>
     <span class="clr-sr-only">{{ stepTitleText }}</span>
     <ng-container *ngIf="!isProcessing; else processing">
@@ -24784,7 +24952,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
       <clr-spinner clrMedium [attr.aria-label]="iconAriaLabel"></clr-spinner>
     </ng-template>
   `,
-                    host: { '[class.clr-timeline-step]': 'true' },
+                    host: { '[class.clr-timeline-step]': 'true', '[attr.role]': '"listitem"' },
                 }]
         }], ctorParameters: function () {
         return [{ type: TimelineIconAttributeService }, { type: undefined, decorators: [{
@@ -26778,15 +26946,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>
@@ -26805,15 +26970,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>
@@ -27283,7 +27445,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: {
@@ -27292,7 +27454,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,
@@ -27568,7 +27730,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 });