@clr/angular 17.3.1 → 17.4.0

package/fesm2015/clr-angular.mjs

@@ -225,19 +225,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                 }]
         }] });
 
-/*
- * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-var AccordionStatus;
-(function (AccordionStatus) {
-    AccordionStatus["Inactive"] = "inactive";
-    AccordionStatus["Error"] = "error";
-    AccordionStatus["Complete"] = "complete";
-})(AccordionStatus || (AccordionStatus = {}));
-
 /*
  * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
  * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
@@ -330,6 +317,8 @@ const commonStringsDefault = {
     datagridFilterDialogAriaLabel: 'Filter dialog',
     columnSeparatorAriaLabel: 'Column resize handle',
     columnSeparatorDescription: 'Use left or right key to resize the column',
+    fromLabel: 'From',
+    toLabel: 'To',
     // Alert
     alertCloseButtonAriaLabel: 'Close alert',
     alertNextAlertAriaLabel: 'Next alert message, {CURRENT} of {COUNT}',
@@ -375,6 +364,7 @@ const commonStringsDefault = {
     datagridExpandableRowContent: 'Expandable row content',
     datagridExpandableRowsHelperText: `Screen reader table commands may not work for viewing expanded content, please use your screen reader's browse mode to read the content exposed by this button`,
     // Wizard
+    wizardStep: 'Step',
     wizardStepSuccess: 'Completed',
     wizardStepError: 'Error',
     wizardStepnavAriaLabel: 'Step navigation',
@@ -446,6 +436,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                 }]
         }] });
 
+/*
+ * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+var AccordionStatus;
+(function (AccordionStatus) {
+    AccordionStatus["Inactive"] = "inactive";
+    AccordionStatus["Error"] = "error";
+    AccordionStatus["Complete"] = "complete";
+})(AccordionStatus || (AccordionStatus = {}));
+
 /*
  * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
  * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
@@ -575,8 +578,6 @@ class ClrAccordionPanel {
         this.disabled = false;
         this.panelOpen = false;
         this.panelOpenChange = new EventEmitter();
-        this.AccordionStatus = AccordionStatus;
-        this.isAccordion = true;
         this._id = uniqueIdFactory();
     }
     get id() {
@@ -652,10 +653,10 @@ class ClrAccordionPanel {
     }
 }
 ClrAccordionPanel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrAccordionPanel, deps: [{ token: ClrCommonStringsService }, { token: AccordionService }, { token: IfExpandService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ClrAccordionPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrAccordionPanel, selector: "clr-accordion-panel", inputs: { disabled: ["clrAccordionPanelDisabled", "disabled"], panelOpen: ["clrAccordionPanelOpen", "panelOpen"] }, outputs: { panelOpenChange: "clrAccordionPanelOpenChange" }, host: { properties: { "class.clr-accordion-panel": "true", "class.clr-accordion-panel-disabled": "this.disabled" } }, providers: [IfExpandService], queries: [{ propertyName: "accordionDescription", predicate: ClrAccordionDescription }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\">{{panelNumber}}.</span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n      <div class=\"clr-sr-only\" role=\"status\">\n        <ng-container *ngIf=\"panel.status === AccordionStatus.Error\"> {{ stepErrorText(panelNumber)}} </ng-container>\n        <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">\n          {{ stepCompleteText(panelNumber)}}\n        </ng-container>\n      </div>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      class=\"clr-accordion-content-region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], animations: panelAnimation, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ClrAccordionPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrAccordionPanel, selector: "clr-accordion-panel", inputs: { disabled: ["clrAccordionPanelDisabled", "disabled"], panelOpen: ["clrAccordionPanelOpen", "panelOpen"] }, outputs: { panelOpenChange: "clrAccordionPanelOpenChange" }, host: { properties: { "class.clr-accordion-panel": "true", "class.clr-accordion-panel-disabled": "this.disabled" } }, providers: [IfExpandService], queries: [{ propertyName: "accordionDescription", predicate: ClrAccordionDescription }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      class=\"clr-accordion-content-region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], animations: panelAnimation, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrAccordionPanel, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-accordion-panel', host: { '[class.clr-accordion-panel]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, animations: panelAnimation, providers: [IfExpandService], template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\">{{panelNumber}}.</span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n      <div class=\"clr-sr-only\" role=\"status\">\n        <ng-container *ngIf=\"panel.status === AccordionStatus.Error\"> {{ stepErrorText(panelNumber)}} </ng-container>\n        <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">\n          {{ stepCompleteText(panelNumber)}}\n        </ng-container>\n      </div>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      class=\"clr-accordion-content-region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n" }]
+            args: [{ selector: 'clr-accordion-panel', host: { '[class.clr-accordion-panel]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, animations: panelAnimation, providers: [IfExpandService], template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      class=\"clr-accordion-content-region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n" }]
         }], ctorParameters: function () { return [{ type: ClrCommonStringsService }, { type: AccordionService }, { type: IfExpandService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
                 type: Input,
                 args: ['clrAccordionPanelDisabled']
@@ -975,6 +976,9 @@ class StepperModel extends AccordionModel {
             this._panels[panelId].open = !this._panels[panelId].open;
         }
     }
+    navigateToPreviousPanel(currentPanelId) {
+        this.openPreviousPanel(this._panels[currentPanelId].id);
+    }
     navigateToNextPanel(currentPanelId, currentPanelValid = true) {
         if (currentPanelValid) {
             this.completePanel(currentPanelId);
@@ -1018,6 +1022,9 @@ class StepperModel extends AccordionModel {
     getNextPanel(currentPanelId) {
         return this.panels.find(s => s.index === this._panels[currentPanelId].index + 1);
     }
+    getPreviousPanel(currentPanelId) {
+        return this.panels.find(s => s.index === this._panels[currentPanelId].index - 1);
+    }
     resetAllFuturePanels(panelId) {
         this.panels.filter(panel => panel.index >= this._panels[panelId].index).forEach(panel => this.resetPanel(panel.id));
     }
@@ -1056,6 +1063,15 @@ class StepperModel extends AccordionModel {
             this._panels[nextPanel.id].disabled = true;
         }
     }
+    openPreviousPanel(currentPanelId) {
+        const prevPanel = this.getPreviousPanel(currentPanelId);
+        if (prevPanel) {
+            this._panels[currentPanelId].open = false;
+            this._panels[currentPanelId].disabled = false;
+            this._panels[prevPanel.id].open = true;
+            this._panels[prevPanel.id].disabled = true;
+        }
+    }
     setPanelError(panelId) {
         this.resetAllFuturePanels(panelId);
         this._panels[panelId].open = true;
@@ -1102,6 +1118,11 @@ class StepperService extends AccordionService {
         this.accordion.setPanelsWithErrors(ids);
         this.emitUpdatedPanels();
     }
+    navigateToPreviousPanel(currentPanelId) {
+        this.accordion.navigateToPreviousPanel(currentPanelId);
+        this.updatePreviousStep(currentPanelId);
+        this.emitUpdatedPanels();
+    }
     navigateToNextPanel(currentPanelId, currentPanelValid = true) {
         this.accordion.navigateToNextPanel(currentPanelId, currentPanelValid);
         this.updateNextStep(currentPanelId, currentPanelValid);
@@ -1120,6 +1141,12 @@ class StepperService extends AccordionService {
             this._activeStepChanges.next(currentPanelId);
         }
     }
+    updatePreviousStep(currentPanelId) {
+        const prevPanel = this.accordion.getPreviousPanel(currentPanelId);
+        if (prevPanel) {
+            this._activeStepChanges.next(prevPanel.id);
+        }
+    }
     getAllCompletedPanelChanges() {
         return this._panelsChanges.pipe(map(() => this.accordion.allPanelsCompleted), distinctUntilChanged());
     }
@@ -1144,7 +1171,7 @@ class ClrStepperPanel extends ClrAccordionPanel {
         this.formGroupName = formGroupName;
         this.ngModelGroup = ngModelGroup;
         this.stepperService = stepperService;
-        this.isAccordion = false;
+        this.AccordionStatus = AccordionStatus;
         this.subscriptions = [];
     }
     get id() {
@@ -1195,10 +1222,10 @@ class ClrStepperPanel extends ClrAccordionPanel {
     }
 }
 ClrStepperPanel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrStepperPanel, deps: [{ token: PLATFORM_ID }, { token: ClrCommonStringsService }, { token: i1.FormGroupName, optional: true }, { token: i1.NgModelGroup, optional: true }, { token: StepperService }, { token: IfExpandService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ClrStepperPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrStepperPanel, selector: "clr-stepper-panel", host: { properties: { "class.clr-accordion-panel": "true" } }, providers: [IfExpandService], viewQueries: [{ propertyName: "headerButton", first: true, predicate: ["headerButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\">{{panelNumber}}.</span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n      <div class=\"clr-sr-only\" role=\"status\">\n        <ng-container *ngIf=\"panel.status === AccordionStatus.Error\"> {{ stepErrorText(panelNumber)}} </ng-container>\n        <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">\n          {{ stepCompleteText(panelNumber)}}\n        </ng-container>\n      </div>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      class=\"clr-accordion-content-region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], animations: stepAnimation, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ClrStepperPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrStepperPanel, selector: "clr-stepper-panel", host: { properties: { "class.clr-stepper-panel": "true" } }, providers: [IfExpandService], viewQueries: [{ propertyName: "headerButton", first: true, predicate: ["headerButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header clr-stepper-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [attr.aria-disabled]=\"panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-step-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle clr-step-angle\"></cds-icon>\n          <cds-icon\n            status=\"danger\"\n            *ngIf=\"panel.status === AccordionStatus.Error\"\n            shape=\"exclamation-circle\"\n            class=\"clr-step-error-icon\"\n          ></cds-icon>\n          <cds-icon\n            status=\"success\"\n            *ngIf=\"panel.status === AccordionStatus.Complete\"\n            shape=\"check-circle\"\n            class=\"clr-step-complete-icon\"\n          ></cds-icon>\n        </span>\n        <span class=\"clr-step-title-wrapper\">\n          <span class=\"clr-step-number\">{{panelNumber}}.</span>\n          <ng-content select=\"clr-step-title\"></ng-content>\n        </span>\n        <ng-content select=\"clr-step-description\"></ng-content>\n      </button>\n      <div class=\"clr-sr-only\" role=\"status\">\n        <ng-container *ngIf=\"panel.status === AccordionStatus.Error\"> {{ stepErrorText(panelNumber)}} </ng-container>\n        <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">\n          {{ stepCompleteText(panelNumber)}}\n        </ng-container>\n      </div>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      class=\"clr-accordion-content-region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], animations: stepAnimation, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrStepperPanel, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-stepper-panel', host: { '[class.clr-accordion-panel]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, animations: stepAnimation, providers: [IfExpandService], template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [disabled]=\"isAccordion && panel.disabled\"\n        [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-accordion-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n          <span class=\"clr-accordion-number\">{{panelNumber}}.</span>\n          <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n          <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n        </span>\n        <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n        <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n      </button>\n      <div class=\"clr-sr-only\" role=\"status\">\n        <ng-container *ngIf=\"panel.status === AccordionStatus.Error\"> {{ stepErrorText(panelNumber)}} </ng-container>\n        <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">\n          {{ stepCompleteText(panelNumber)}}\n        </ng-container>\n      </div>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      class=\"clr-accordion-content-region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n" }]
+            args: [{ selector: 'clr-stepper-panel', host: { '[class.clr-stepper-panel]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, animations: stepAnimation, providers: [IfExpandService], template: "<ng-container *ngIf=\"panel | async; let panel\">\n  <div [ngClass]=\"getPanelStateClasses(panel)\">\n    <div class=\"clr-accordion-header clr-stepper-header\">\n      <button\n        type=\"button\"\n        class=\"clr-accordion-header-button\"\n        (click)=\"togglePanel()\"\n        [id]=\"getAccordionHeaderId(panel.templateId)\"\n        [attr.aria-disabled]=\"panel.disabled\"\n        [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n        [attr.aria-expanded]=\"panel.open\"\n        [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n        #headerButton\n      >\n        <span class=\"clr-step-status\">\n          <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle clr-step-angle\"></cds-icon>\n          <cds-icon\n            status=\"danger\"\n            *ngIf=\"panel.status === AccordionStatus.Error\"\n            shape=\"exclamation-circle\"\n            class=\"clr-step-error-icon\"\n          ></cds-icon>\n          <cds-icon\n            status=\"success\"\n            *ngIf=\"panel.status === AccordionStatus.Complete\"\n            shape=\"check-circle\"\n            class=\"clr-step-complete-icon\"\n          ></cds-icon>\n        </span>\n        <span class=\"clr-step-title-wrapper\">\n          <span class=\"clr-step-number\">{{panelNumber}}.</span>\n          <ng-content select=\"clr-step-title\"></ng-content>\n        </span>\n        <ng-content select=\"clr-step-description\"></ng-content>\n      </button>\n      <div class=\"clr-sr-only\" role=\"status\">\n        <ng-container *ngIf=\"panel.status === AccordionStatus.Error\"> {{ stepErrorText(panelNumber)}} </ng-container>\n        <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">\n          {{ stepCompleteText(panelNumber)}}\n        </ng-container>\n      </div>\n    </div>\n    <div\n      @skipInitialRender\n      role=\"region\"\n      class=\"clr-accordion-content-region\"\n      [id]=\"getAccordionContentId(panel.templateId)\"\n      [attr.aria-hidden]=\"!panel.open\"\n      [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n    >\n      <div\n        *ngIf=\"panel.open\"\n        @toggle\n        (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n        class=\"clr-accordion-content\"\n      >\n        <div class=\"clr-accordion-inner-content\">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n" }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
                         type: Inject,
@@ -1222,6 +1249,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
 var ClrStepButtonType;
 (function (ClrStepButtonType) {
     ClrStepButtonType["Next"] = "next";
+    ClrStepButtonType["Previous"] = "previous";
     ClrStepButtonType["Submit"] = "submit";
 })(ClrStepButtonType || (ClrStepButtonType = {}));
 class ClrStepButton {
@@ -1230,16 +1258,22 @@ class ClrStepButton {
         this.stepperService = stepperService;
         this.type = ClrStepButtonType.Next;
         this.submitButton = false;
+        this.previousButton = false;
     }
     ngOnInit() {
         this.submitButton = this.type === ClrStepButtonType.Submit;
+        this.previousButton = this.type === ClrStepButtonType.Previous;
     }
     navigateToNextPanel() {
+        if (this.previousButton) {
+            this.stepperService.navigateToPreviousPanel(this.clrStep.id);
+            return;
+        }
         this.stepperService.navigateToNextPanel(this.clrStep.id, this.clrStep.formGroup.valid);
     }
 }
 ClrStepButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrStepButton, deps: [{ token: ClrStepperPanel }, { token: StepperService }], target: i0.ɵɵFactoryTarget.Directive });
-ClrStepButton.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", type: ClrStepButton, selector: "[clrStepButton]", inputs: { type: ["clrStepButton", "type"] }, host: { listeners: { "click": "navigateToNextPanel()" }, properties: { "class.clr-step-button": "true", "class.btn": "true", "type": "'button'", "class.btn-primary": "this.submitButton" } }, ngImport: i0 });
+ClrStepButton.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", type: ClrStepButton, selector: "[clrStepButton]", inputs: { type: ["clrStepButton", "type"] }, host: { listeners: { "click": "navigateToNextPanel()" }, properties: { "class.clr-step-button": "true", "class.btn": "true", "type": "'button'", "class.btn-success": "this.submitButton", "class.btn-link": "this.previousButton" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrStepButton, decorators: [{
             type: Directive,
             args: [{
@@ -1255,7 +1289,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                 args: ['clrStepButton']
             }], submitButton: [{
                 type: HostBinding,
-                args: ['class.btn-primary']
+                args: ['class.btn-success']
+            }], previousButton: [{
+                type: HostBinding,
+                args: ['class.btn-link']
             }], navigateToNextPanel: [{
                 type: HostListener,
                 args: ['click']
@@ -12809,6 +12846,12 @@ class DatagridNumericFilter extends DatagridFilterRegistrar {
     get minPlaceholderValue() {
         return this.minPlaceholder || this.commonStrings.keys.minValue;
     }
+    get fromLabelValue() {
+        return this.fromLabel || this.commonStrings.keys.fromLabel;
+    }
+    get toLabelValue() {
+        return this.toLabel || this.commonStrings.keys.toLabel;
+    }
     get low() {
         if (typeof this.filter.low === 'number' && isFinite(this.filter.low)) {
             return this.filter.low;
@@ -12871,31 +12914,40 @@ class DatagridNumericFilter extends DatagridFilterRegistrar {
     }
 }
 DatagridNumericFilter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: DatagridNumericFilter, deps: [{ token: FiltersProvider }, { token: DomAdapter }, { token: ClrCommonStringsService }, { token: ClrPopoverToggleService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-DatagridNumericFilter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: DatagridNumericFilter, selector: "clr-dg-numeric-filter", inputs: { minPlaceholder: ["clrFilterMinPlaceholder", "minPlaceholder"], maxPlaceholder: ["clrFilterMaxPlaceholder", "maxPlaceholder"], value: ["clrFilterValue", "value"], customNumericFilter: ["clrDgNumericFilter", "customNumericFilter"] }, outputs: { filterValueChange: "clrFilterValueChange" }, providers: [{ provide: CustomFilter, useExisting: DatagridNumericFilter }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input_low"], descendants: true }, { propertyName: "filterContainer", first: true, predicate: ClrDatagridFilter, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+DatagridNumericFilter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: DatagridNumericFilter, selector: "clr-dg-numeric-filter", inputs: { minPlaceholder: ["clrFilterMinPlaceholder", "minPlaceholder"], maxPlaceholder: ["clrFilterMaxPlaceholder", "maxPlaceholder"], fromLabel: ["clrFilterFromLabel", "fromLabel"], toLabel: ["clrFilterToLabel", "toLabel"], value: ["clrFilterValue", "value"], customNumericFilter: ["clrDgNumericFilter", "customNumericFilter"] }, outputs: { filterValueChange: "clrFilterValueChange" }, providers: [{ provide: CustomFilter, useExisting: DatagridNumericFilter }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input_low"], descendants: true }, { propertyName: "filterContainer", first: true, predicate: ClrDatagridFilter, descendants: true }], usesInheritance: true, ngImport: i0, template: `
     <clr-dg-filter [clrDgFilter]="registered" [(clrDgFilterOpen)]="open">
-      <input
-        class="datagrid-numeric-filter-input"
-        #input_low
-        type="number"
-        autocomplete="off"
-        name="low"
-        [(ngModel)]="low"
-        [placeholder]="minPlaceholderValue"
-        [attr.aria-label]="minPlaceholderValue"
-      />
-      <span class="datagrid-filter-input-spacer"></span>
-      <input
-        class="datagrid-numeric-filter-input"
-        #input_high
-        type="number"
-        autocomplete="off"
-        name="high"
-        [(ngModel)]="high"
-        [placeholder]="maxPlaceholderValue"
-        [attr.aria-label]="maxPlaceholderValue"
-      />
+      <div class="datagrid-numeric-filter-form">
+        <div class="clr-form-control">
+          <label class="clr-control-label">{{ fromLabelValue }}</label>
+          <input
+            clrInput
+            class="datagrid-numeric-filter-input"
+            #input_low
+            type="number"
+            autocomplete="off"
+            name="low"
+            [(ngModel)]="low"
+            [placeholder]="minPlaceholderValue"
+            [attr.aria-label]="minPlaceholderValue"
+          />
+        </div>
+        <div class="clr-form-control">
+          <label class="clr-control-label">{{ toLabelValue }}</label>
+          <input
+            clrInput
+            class="datagrid-numeric-filter-input"
+            #input_high
+            type="number"
+            autocomplete="off"
+            name="high"
+            [(ngModel)]="high"
+            [placeholder]="maxPlaceholderValue"
+            [attr.aria-label]="maxPlaceholderValue"
+          />
+        </div>
+      </div>
     </clr-dg-filter>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClrDatagridFilter, selector: "clr-dg-filter", inputs: ["clrDgFilterOpen", "clrDgFilter"], outputs: ["clrDgFilterOpenChange"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: ClrInput, selector: "[clrInput]" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClrDatagridFilter, selector: "clr-dg-filter", inputs: ["clrDgFilterOpen", "clrDgFilter"], outputs: ["clrDgFilterOpenChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: DatagridNumericFilter, decorators: [{
             type: Component,
             args: [{
@@ -12903,27 +12955,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                     providers: [{ provide: CustomFilter, useExisting: DatagridNumericFilter }],
                     template: `
     <clr-dg-filter [clrDgFilter]="registered" [(clrDgFilterOpen)]="open">
-      <input
-        class="datagrid-numeric-filter-input"
-        #input_low
-        type="number"
-        autocomplete="off"
-        name="low"
-        [(ngModel)]="low"
-        [placeholder]="minPlaceholderValue"
-        [attr.aria-label]="minPlaceholderValue"
-      />
-      <span class="datagrid-filter-input-spacer"></span>
-      <input
-        class="datagrid-numeric-filter-input"
-        #input_high
-        type="number"
-        autocomplete="off"
-        name="high"
-        [(ngModel)]="high"
-        [placeholder]="maxPlaceholderValue"
-        [attr.aria-label]="maxPlaceholderValue"
-      />
+      <div class="datagrid-numeric-filter-form">
+        <div class="clr-form-control">
+          <label class="clr-control-label">{{ fromLabelValue }}</label>
+          <input
+            clrInput
+            class="datagrid-numeric-filter-input"
+            #input_low
+            type="number"
+            autocomplete="off"
+            name="low"
+            [(ngModel)]="low"
+            [placeholder]="minPlaceholderValue"
+            [attr.aria-label]="minPlaceholderValue"
+          />
+        </div>
+        <div class="clr-form-control">
+          <label class="clr-control-label">{{ toLabelValue }}</label>
+          <input
+            clrInput
+            class="datagrid-numeric-filter-input"
+            #input_high
+            type="number"
+            autocomplete="off"
+            name="high"
+            [(ngModel)]="high"
+            [placeholder]="maxPlaceholderValue"
+            [attr.aria-label]="maxPlaceholderValue"
+          />
+        </div>
+      </div>
     </clr-dg-filter>
   `,
                 }]
@@ -12933,6 +12994,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
             }], maxPlaceholder: [{
                 type: Input,
                 args: ['clrFilterMaxPlaceholder']
+            }], fromLabel: [{
+                type: Input,
+                args: ['clrFilterFromLabel']
+            }], toLabel: [{
+                type: Input,
+                args: ['clrFilterToLabel']
             }], filterValueChange: [{
                 type: Output,
                 args: ['clrFilterValueChange']
@@ -13519,6 +13586,19 @@ var ClrDatagridSortOrder;
     ClrDatagridSortOrder[ClrDatagridSortOrder["DESC"] = -1] = "DESC";
 })(ClrDatagridSortOrder || (ClrDatagridSortOrder = {}));
 
+/*
+ * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+// @TODO The top two are not used now, which is probably a performance drag that was broken along the way.
+// There was a previous pattern to hide everything to do computation then display, for Firefox, needs revisiting.
+const NO_LAYOUT_CLASS = 'datagrid-no-layout';
+const COMPUTE_WIDTH_CLASS = 'datagrid-computing-columns-width';
+const STRICT_WIDTH_CLASS = 'datagrid-fixed-width';
+const HIDDEN_COLUMN_CLASS = 'datagrid-hidden-column';
+
 /*
  * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
  * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
@@ -13957,15 +14037,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrDatagridColumn extends DatagridFilterRegistrar {
-    constructor(_sort, filters, vcr, detailService, changeDetectorRef) {
+    constructor(el, _sort, filters, vcr, detailService, changeDetectorRef) {
         super(filters);
+        this.el = el;
         this._sort = _sort;
         this.vcr = vcr;
         this.detailService = detailService;
         this.changeDetectorRef = changeDetectorRef;
         this.sortOrderChange = new EventEmitter();
         this.filterValueChange = new EventEmitter();
-        this.showSeparator = true;
         /**
          * A custom filter for this column that can be provided in the projected content
          */
@@ -13984,9 +14064,20 @@ class ClrDatagridColumn extends DatagridFilterRegistrar {
          * Subscription to the sort service changes
          */
         this.subscriptions = [];
+        this._showSeparator = true;
         this.subscriptions.push(this.listenForSortingChanges());
         this.subscriptions.push(this.listenForDetailPaneChanges());
     }
+    get isHidden() {
+        return this.el.nativeElement.classList.contains(HIDDEN_COLUMN_CLASS);
+    }
+    get showSeparator() {
+        return this._showSeparator;
+    }
+    set showSeparator(value) {
+        this._showSeparator = value;
+        this.changeDetectorRef.markForCheck();
+    }
     // TODO: We might want to make this an enum in the future
     get colType() {
         return this._colType;
@@ -14162,8 +14253,6 @@ class ClrDatagridColumn extends DatagridFilterRegistrar {
         return this.detailService.stateChange.subscribe(state => {
             if (this.showSeparator !== !state) {
                 this.showSeparator = !state;
-                // Have to manually change because of OnPush
-                this.changeDetectorRef.markForCheck();
             }
         });
     }
@@ -14196,7 +14285,7 @@ class ClrDatagridColumn extends DatagridFilterRegistrar {
         }
     }
 }
-ClrDatagridColumn.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagridColumn, deps: [{ token: Sort }, { token: FiltersProvider }, { token: i0.ViewContainerRef }, { token: DetailService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ClrDatagridColumn.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagridColumn, deps: [{ token: i0.ElementRef }, { token: Sort }, { token: FiltersProvider }, { token: i0.ViewContainerRef }, { token: DetailService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 ClrDatagridColumn.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrDatagridColumn, selector: "clr-dg-column", inputs: { filterStringPlaceholder: ["clrFilterStringPlaceholder", "filterStringPlaceholder"], filterNumberMaxPlaceholder: ["clrFilterNumberMaxPlaceholder", "filterNumberMaxPlaceholder"], filterNumberMinPlaceholder: ["clrFilterNumberMinPlaceholder", "filterNumberMinPlaceholder"], colType: ["clrDgColType", "colType"], field: ["clrDgField", "field"], sortBy: ["clrDgSortBy", "sortBy"], sortOrder: ["clrDgSortOrder", "sortOrder"], updateFilterValue: ["clrFilterValue", "updateFilterValue"] }, outputs: { sortOrderChange: "clrDgSortOrderChange", filterValueChange: "clrFilterValueChange" }, host: { attributes: { "role": "columnheader" }, properties: { "class.datagrid-column": "true", "attr.aria-sort": "ariaSort" } }, queries: [{ propertyName: "projectedFilter", first: true, predicate: CustomFilter, descendants: true }], usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: ClrPopoverHostDirective }], ngImport: i0, template: `
     <div class="datagrid-column-flex">
       <button class="datagrid-column-title" *ngIf="sortable" (click)="sort()" type="button">
@@ -14237,7 +14326,7 @@ ClrDatagridColumn.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
 
       <clr-dg-column-separator *ngIf="showSeparator"></clr-dg-column-separator>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: ClrDatagridColumnSeparator, selector: "clr-dg-column-separator" }, { kind: "component", type: DatagridNumericFilter, selector: "clr-dg-numeric-filter", inputs: ["clrFilterMinPlaceholder", "clrFilterMaxPlaceholder", "clrFilterValue", "clrDgNumericFilter"], outputs: ["clrFilterValueChange"] }, { kind: "component", type: DatagridStringFilter, selector: "clr-dg-string-filter", inputs: ["clrFilterPlaceholder", "clrDgStringFilter", "clrFilterValue"], outputs: ["clrFilterValueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: ClrDatagridColumnSeparator, selector: "clr-dg-column-separator" }, { kind: "component", type: DatagridNumericFilter, selector: "clr-dg-numeric-filter", inputs: ["clrFilterMinPlaceholder", "clrFilterMaxPlaceholder", "clrFilterFromLabel", "clrFilterToLabel", "clrFilterValue", "clrDgNumericFilter"], outputs: ["clrFilterValueChange"] }, { kind: "component", type: DatagridStringFilter, selector: "clr-dg-string-filter", inputs: ["clrFilterPlaceholder", "clrDgStringFilter", "clrFilterValue"], outputs: ["clrFilterValueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagridColumn, decorators: [{
             type: Component,
             args: [{
@@ -14291,7 +14380,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                     },
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return [{ type: Sort }, { type: FiltersProvider }, { type: i0.ViewContainerRef }, { type: DetailService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { filterStringPlaceholder: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: Sort }, { type: FiltersProvider }, { type: i0.ViewContainerRef }, { type: DetailService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { filterStringPlaceholder: [{
                 type: Input,
                 args: ['clrFilterStringPlaceholder']
             }], filterNumberMaxPlaceholder: [{
@@ -15876,19 +15965,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
             type: Injectable
         }], ctorParameters: function () { return [{ type: FiltersProvider }, { type: Sort }, { type: Page }, { type: StateDebouncer }]; } });
 
-/*
- * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-// @TODO The top two are not used now, which is probably a performance drag that was broken along the way.
-// There was a previous pattern to hide everything to do computation then display, for Firefox, needs revisiting.
-const NO_LAYOUT_CLASS = 'datagrid-no-layout';
-const COMPUTE_WIDTH_CLASS = 'datagrid-computing-columns-width';
-const STRICT_WIDTH_CLASS = 'datagrid-fixed-width';
-const HIDDEN_COLUMN_CLASS = 'datagrid-hidden-column';
-
 /*
  * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
  * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
@@ -18377,6 +18453,7 @@ class DatagridMainRenderer {
                                 (_b = (_a = row.expandableRow) === null || _a === void 0 ? void 0 : _a.cells.get(columnIndex)) === null || _b === void 0 ? void 0 : _b.setHidden(state);
                             }
                         });
+                        this.updateColumnSeparatorsVisibility();
                         this.keyNavigation.resetKeyGrid();
                         break;
                     case DatagridColumnChanges.INITIALIZE:
@@ -18420,6 +18497,17 @@ class DatagridMainRenderer {
             return false;
         }
     }
+    updateColumnSeparatorsVisibility() {
+        const visibleColumns = this.datagrid.columns.filter(column => !column.isHidden);
+        visibleColumns.forEach((column, index) => {
+            if (index === visibleColumns.length - 1) {
+                column.showSeparator = false;
+            }
+            else if (!column.showSeparator) {
+                column.showSeparator = true;
+            }
+        });
+    }
 }
 DatagridMainRenderer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: DatagridMainRenderer, deps: [{ token: ClrDatagrid }, { token: DatagridRenderOrganizer }, { token: Items }, { token: Page }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DetailService }, { token: TableSizeService }, { token: ColumnsService }, { token: i0.NgZone }, { token: KeyNavigationGridController }], target: i0.ɵɵFactoryTarget.Directive });
 DatagridMainRenderer.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", type: DatagridMainRenderer, selector: "clr-datagrid", providers: [{ provide: DomAdapter, useFactory: domAdapterFactory, deps: [PLATFORM_ID] }], queries: [{ propertyName: "headers", predicate: DatagridHeaderRenderer }, { propertyName: "rows", predicate: DatagridRowRenderer }], ngImport: i0 });
@@ -22145,15 +22233,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 const createCloseButton = (document, ariaLabel) => {
+    ClarityIcons.addIcons(timesIcon);
     const closeButton = document.createElement('button');
     closeButton.setAttribute('aria-label', ariaLabel);
     closeButton.setAttribute('aria-hidden', 'true');
     closeButton.innerHTML = `
     <cds-icon
       inner-offset="1"
-      shape="close"
+      shape="times"
       size="32"
-    </cds-icon>
+    ></cds-icon>
   `;
     /**
      * The button is hidden by default based on our Desktop-first approach.
@@ -26953,16 +27042,23 @@ ClrWizardStepnavItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
       [attr.disabled]="isDisabled ? '' : null"
     >
       <div class="clr-wizard-stepnav-link-icon">
-        <cds-icon *ngIf="hasError" shape="error-standard" aria-label="error"></cds-icon>
-        <cds-icon *ngIf="!hasError && isComplete" shape="success-standard" aria-label="complete"></cds-icon>
+        <cds-icon
+          *ngIf="hasError"
+          shape="error-standard"
+          [attr.aria-label]="commonStrings.keys.wizardStepError"
+        ></cds-icon>
+        <cds-icon
+          *ngIf="!hasError && isComplete"
+          shape="success-standard"
+          [attr.aria-label]="commonStrings.keys.wizardStepSuccess"
+        ></cds-icon>
       </div>
 
+      <span class="clr-sr-only">{{ commonStrings.keys.wizardStep }}</span>
       <div class="clr-wizard-stepnav-link-page-number"><ng-content></ng-content></div>
       <span class="clr-wizard-stepnav-link-title">
         <ng-template [ngTemplateOutlet]="page.navTitle"></ng-template>
       </span>
-      <span *ngIf="hasError" class="clr-sr-only">{{ commonStrings.keys.wizardStepError }}</span>
-      <span *ngIf="!hasError && isComplete" class="clr-sr-only">{{ commonStrings.keys.wizardStepSuccess }}</span>
     </button>
   `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrWizardStepnavItem, decorators: [{
@@ -26977,16 +27073,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
       [attr.disabled]="isDisabled ? '' : null"
     >
       <div class="clr-wizard-stepnav-link-icon">
-        <cds-icon *ngIf="hasError" shape="error-standard" aria-label="error"></cds-icon>
-        <cds-icon *ngIf="!hasError && isComplete" shape="success-standard" aria-label="complete"></cds-icon>
+        <cds-icon
+          *ngIf="hasError"
+          shape="error-standard"
+          [attr.aria-label]="commonStrings.keys.wizardStepError"
+        ></cds-icon>
+        <cds-icon
+          *ngIf="!hasError && isComplete"
+          shape="success-standard"
+          [attr.aria-label]="commonStrings.keys.wizardStepSuccess"
+        ></cds-icon>
       </div>
 
+      <span class="clr-sr-only">{{ commonStrings.keys.wizardStep }}</span>
       <div class="clr-wizard-stepnav-link-page-number"><ng-content></ng-content></div>
       <span class="clr-wizard-stepnav-link-title">
         <ng-template [ngTemplateOutlet]="page.navTitle"></ng-template>
       </span>
-      <span *ngIf="hasError" class="clr-sr-only">{{ commonStrings.keys.wizardStepError }}</span>
-      <span *ngIf="!hasError && isComplete" class="clr-sr-only">{{ commonStrings.keys.wizardStepSuccess }}</span>
     </button>
   `,
                     host: {