@clr/angular 17.0.0-next.1 → 17.0.0-next.2

package/fesm2015/clr-angular.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { Directive, NgModule, Optional, Input, Injectable, Component, ChangeDetectionStrategy, EventEmitter, HostBinding, Output, ContentChildren, PLATFORM_ID, Inject, ViewChild, HostListener, SkipSelf, Renderer2, InjectionToken, ElementRef, ContentChild, ComponentFactoryResolver, Self, Attribute, LOCALE_ID, ViewContainerRef, NgZone, ChangeDetectorRef, TemplateRef } from '@angular/core';
+import { Directive, NgModule, Optional, Input, Injectable, Component, ChangeDetectionStrategy, EventEmitter, HostBinding, Output, ContentChildren, PLATFORM_ID, Inject, ViewChild, HostListener, SkipSelf, Renderer2, InjectionToken, ElementRef, ContentChild, ComponentFactoryResolver, KeyValueDiffers, Self, Attribute, LOCALE_ID, ViewContainerRef, NgZone, ChangeDetectorRef, TemplateRef } from '@angular/core';
 import * as i5 from '@angular/common';
 import { CommonModule, isPlatformBrowser, DOCUMENT, NgForOf, getLocaleDayNames, FormStyle, TranslationWidth, getLocaleMonthNames, getLocaleFirstDayOfWeek, getLocaleDateFormat, FormatWidth } from '@angular/common';
-import { ClarityIcons, angleIcon, exclamationCircleIcon, checkCircleIcon, ellipsisHorizontalIcon, windowCloseIcon, eventIcon, calendarIcon, eyeHideIcon, eyeIcon, ellipsisVerticalIcon, viewColumnsIcon, arrowIcon, timesIcon, stepForward2Icon, angleDoubleIcon, filterGridCircleIcon, filterGridIcon, infoCircleIcon, exclamationTriangleIcon, circleIcon, dotCircleIcon, errorStandardIcon, successStandardIcon } from '@cds/core/icon';
-import { map, tap, startWith, distinctUntilChanged, pairwise, filter, debounceTime, takeUntil, take, first, switchMap } from 'rxjs/operators';
+import { ClarityIcons, angleIcon, exclamationCircleIcon, checkCircleIcon, ellipsisHorizontalIcon, windowCloseIcon, eventIcon, calendarIcon, eyeHideIcon, eyeIcon, ellipsisVerticalIcon, viewColumnsIcon, arrowIcon, timesIcon, stepForward2Icon, angleDoubleIcon, filterGridCircleIcon, filterGridIcon, errorStandardIcon, helpIcon, infoStandardIcon, noteIcon, successStandardIcon, warningStandardIcon, infoCircleIcon, circleIcon, dotCircleIcon } from '@cds/core/icon';
+import { map, tap, startWith, distinctUntilChanged, filter, skipUntil, debounceTime, takeUntil, take, first, switchMap } from 'rxjs/operators';
 import * as i3 from 'rxjs';
 import { Subject, BehaviorSubject, Observable, fromEvent, isObservable, of, ReplaySubject, combineLatest, merge } from 'rxjs';
 import { trigger, transition, style, animate, state, keyframes } from '@angular/animations';
@@ -281,6 +281,8 @@ const commonStringsDefault = {
     success: 'Success',
     warning: 'Warning',
     danger: 'Error',
+    neutral: 'Neutral',
+    unknown: 'Unknown',
     rowActions: 'Available actions',
     pickColumns: 'Manage Columns',
     showColumns: 'Show Columns',
@@ -363,8 +365,8 @@ const commonStringsDefault = {
      * Password Input
      * Screen-reader text for the hide/show password field button
      */
-    passwordHide: 'Hide password',
-    passwordShow: 'Show password',
+    passwordHide: 'Hide password for {LABEL}',
+    passwordShow: 'Show password for {LABEL}',
     /**
      * Datagrid footer; sr-only text after the number of selected rows.
      */
@@ -668,7 +670,7 @@ class ClrAccordion {
     }
 }
 ClrAccordion.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrAccordion, deps: [{ token: AccordionService }], target: i0.ɵɵFactoryTarget.Component });
-ClrAccordion.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrAccordion, selector: "clr-accordion", inputs: { multiPanel: ["clrAccordionMultiPanel", "multiPanel"] }, host: { properties: { "class.clr-accordion": "true" } }, providers: [AccordionService], queries: [{ propertyName: "panels", predicate: ClrAccordionPanel, descendants: true }], usesOnChanges: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ClrAccordion.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrAccordion, selector: "clr-accordion", inputs: { multiPanel: ["clrAccordionMultiPanel", "multiPanel"] }, host: { properties: { "class.clr-accordion": "true" } }, providers: [AccordionService], queries: [{ propertyName: "panels", predicate: ClrAccordionPanel }], usesOnChanges: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrAccordion, decorators: [{
             type: Component,
             args: [{
@@ -683,7 +685,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                 args: ['clrAccordionMultiPanel']
             }], panels: [{
                 type: ContentChildren,
-                args: [ClrAccordionPanel, { descendants: true }]
+                args: [ClrAccordionPanel]
             }] } });
 
 /*
@@ -949,6 +951,12 @@ class StepperModel extends AccordionModel {
             }
         });
     }
+    setPanelValid(panelId) {
+        this._panels[panelId].status = AccordionStatus.Complete;
+    }
+    setPanelInvalid(panelId) {
+        this._panels[panelId].status = AccordionStatus.Error;
+    }
     setPanelsWithErrors(ids) {
         ids.forEach(id => this.setPanelError(id));
     }
@@ -1032,6 +1040,14 @@ class StepperService extends AccordionService {
         this.accordion.resetPanels();
         this.emitUpdatedPanels();
     }
+    setPanelValid(panelId) {
+        this.accordion.setPanelValid(panelId);
+        this.emitUpdatedPanels();
+    }
+    setPanelInvalid(panelId) {
+        this.accordion.setPanelInvalid(panelId);
+        this.emitUpdatedPanels();
+    }
     setPanelsWithErrors(ids) {
         this.accordion.setPanelsWithErrors(ids);
         this.emitUpdatedPanels();
@@ -1094,11 +1110,16 @@ class ClrStepperPanel extends ClrAccordionPanel {
         this.panel = this.panel.pipe(tap(panel => this.triggerAllFormControlValidationIfError(panel)));
         this.stepperService.disablePanel(this.id, true);
         this.listenToFocusChanges();
+        // not all stepper panels are guaranteed to have a form (i.e. empty template-driven)
         if (this.formGroup) {
-            // not all stepper panels are guaranteed to have a form (i.e. empty template-driven)
-            this.subscriptions.push(this.formGroup.statusChanges.pipe(pairwise()).subscribe(([prevStatus, newStatus]) => {
-                if ('VALID' === prevStatus && 'INVALID' === newStatus) {
-                    this.stepperService.navigateToNextPanel(this.id, this.formGroup.valid);
+            // 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 (status === 'VALID') {
+                    this.stepperService.setPanelValid(this.id);
+                }
+                else if (status === 'INVALID') {
+                    this.stepperService.setPanelInvalid(this.id);
                 }
             }));
         }
@@ -1943,12 +1964,12 @@ class ClrPopoverPositionService {
          *
          *   Note, more than 3 viewport violations and there isn't anything we can do to help. Also when there are two
          *   violations, we can't help if the violations are TOP+BOTTOM || LEFT+RIGHT => There is no transformation we
-         *   can make to the postion that will help.
+         *   can make to the position that will help.
          *
          *   Some examples:
          *   There is only one error and Primary axis is VERTICAL
          *   - this.handleVerticalAxisOneViolation has a switch that will use the error sum to apply the correct
-         *   transform to the postion based on the reduction of visibilityViolations.
+         *   transform to the position based on the reduction of visibilityViolations.
          *
          *   There are two errors and Primary axis is HORIZONTAL
          *   - handleHorizontalAxisTwoViolations has a switch that uses the error sum to apply both transforms needed to
@@ -1980,6 +2001,14 @@ class ClrPopoverPositionService {
         if (this.currentContentCoords.top < 0) {
             this.contentOffsets.yOffset += Math.abs(this.currentContentCoords.top);
         }
+        /**
+         * This detects the condition where the popover is flipped because it would violate the bottom of the viewport, but flipping it results in the
+         * popover rendering above the top of the body (y coordinate outside the body). In that event, it should be rendered within the body
+         * as much as possible, so this logic sets the top of popover to render touching the top of the body.
+         */
+        if (this.contentOffsets.yOffset + this.currentAnchorCoords.y < 0) {
+            this.contentOffsets.yOffset = 0 - this.currentContentCoords.top;
+        }
         return this.contentOffsets;
     }
     handleVerticalAxisOneViolation(errorSum) {
@@ -3806,16 +3835,14 @@ class ClrButtonGroup {
         this.menuButtons = tempInMenuButtons;
     }
     handleFocusOnMenuOpen() {
-        if (this.menuButtons.length) {
-            this.toggleService.popoverVisible.pipe(takeUntil(this.destroy$)).subscribe(visible => {
-                if (visible) {
-                    this.focusHandler.initialize({
-                        menu: this.menu.nativeElement,
-                        menuToggle: this.menuToggle.nativeElement,
-                    });
-                }
-            });
-        }
+        this.toggleService.popoverVisible.pipe(takeUntil(this.destroy$)).subscribe(visible => {
+            if (visible) {
+                this.focusHandler.initialize({
+                    menu: this.menu.nativeElement,
+                    menuToggle: this.menuToggle.nativeElement,
+                });
+            }
+        });
     }
 }
 ClrButtonGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrButtonGroup, deps: [{ token: ButtonInGroupService }, { token: ClrPopoverToggleService }, { token: ClrCommonStringsService }, { token: ClrDestroyService }, { token: ButtonGroupFocusHandler }], target: i0.ɵɵFactoryTarget.Component });
@@ -3914,7 +3941,7 @@ class ClrLoadingButton {
 }
 ClrLoadingButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrLoadingButton, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
 ClrLoadingButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrLoadingButton, selector: "button[clrLoading]", inputs: { disabled: "disabled" }, outputs: { clrLoadingChange: "clrLoadingChange" }, host: { properties: { "attr.disabled": "disabled? '' : null" } }, providers: [{ provide: LoadingListener, useExisting: ClrLoadingButton }], ngImport: i0, template: `
-    <ng-container [ngSwitch]="state">
+    <span @parent [ngSwitch]="state">
       <span *ngSwitchCase="buttonState.LOADING">
         <span @spinner class="spinner spinner-inline"></span>
       </span>
@@ -3928,8 +3955,13 @@ ClrLoadingButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
       <span *ngSwitchCase="buttonState.DEFAULT" @defaultButton>
         <ng-content></ng-content>
       </span>
-    </ng-container>
+    </span>
   `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], animations: [
+        trigger('parent', [
+            // Skip :enter animation on first render.
+            // The button text/content should only be faded when transitioning to or from a non-default state.
+            transition(':enter', []),
+        ]),
         trigger('defaultButton', [
             transition(':enter', [style({ opacity: 0 }), animate('200ms 100ms ease-in', style({ opacity: 1 }))]),
             // TODO: see if we can get leave animation to work before spinner's enter animation
@@ -3957,7 +3989,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
             args: [{
                     selector: 'button[clrLoading]',
                     template: `
-    <ng-container [ngSwitch]="state">
+    <span @parent [ngSwitch]="state">
       <span *ngSwitchCase="buttonState.LOADING">
         <span @spinner class="spinner spinner-inline"></span>
       </span>
@@ -3971,10 +4003,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
       <span *ngSwitchCase="buttonState.DEFAULT" @defaultButton>
         <ng-content></ng-content>
       </span>
-    </ng-container>
+    </span>
   `,
                     providers: [{ provide: LoadingListener, useExisting: ClrLoadingButton }],
                     animations: [
+                        trigger('parent', [
+                            // Skip :enter animation on first render.
+                            // The button text/content should only be faded when transitioning to or from a non-default state.
+                            transition(':enter', []),
+                        ]),
                         trigger('defaultButton', [
                             transition(':enter', [style({ opacity: 0 }), animate('200ms 100ms ease-in', style({ opacity: 1 }))]),
                             // TODO: see if we can get leave animation to work before spinner's enter animation
@@ -4805,6 +4842,11 @@ 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.
  */
+var CHANGE_KEYS;
+(function (CHANGE_KEYS) {
+    CHANGE_KEYS["FORM"] = "form";
+    CHANGE_KEYS["MODEL"] = "model";
+})(CHANGE_KEYS || (CHANGE_KEYS = {}));
 class WrappedFormControl {
     // I lost way too much time trying to make this work without injecting the ViewContainerRef and the Injector,
     // I'm giving up. So we have to inject these two manually for now.
@@ -4821,6 +4863,7 @@ class WrappedFormControl {
             this.ifControlStateService = injector.get(IfControlStateService, null);
             this.controlClassService = injector.get(ControlClassService, null);
             this.markControlService = injector.get(MarkControlService, null);
+            this.differs = injector.get(KeyValueDiffers, null);
         }
         if (this.controlClassService) {
             this.controlClassService.initControlClass(renderer, el.nativeElement);
@@ -4835,6 +4878,9 @@ class WrappedFormControl {
                 this.setAriaDescribedBy(state);
             }));
         }
+        if (ngControl) {
+            this.differ = this.differs.find(ngControl).create();
+        }
     }
     get id() {
         return this._id;
@@ -4858,10 +4904,23 @@ class WrappedFormControl {
         else {
             this._id = this.controlIdService.id;
         }
-        if (this.ngControlService) {
+        if (this.ngControlService && this.ngControl) {
             this.ngControlService.setControl(this.ngControl);
         }
     }
+    ngDoCheck() {
+        if (this.differ) {
+            const changes = this.differ.diff(this.ngControl);
+            if (changes) {
+                changes.forEachChangedItem(change => {
+                    if ((change.key === CHANGE_KEYS.FORM || change.key === CHANGE_KEYS.MODEL) &&
+                        change.currentValue !== change.previousValue) {
+                        this.triggerValidation();
+                    }
+                });
+            }
+        }
+    }
     ngOnDestroy() {
         this.subscriptions.forEach(sub => sub.unsubscribe());
     }
@@ -4883,8 +4942,10 @@ class WrappedFormControl {
         }
     }
     markAsTouched() {
-        this.ngControl.control.markAsTouched();
-        this.ngControl.control.updateValueAndValidity();
+        if (this.ngControl) {
+            this.ngControl.control.markAsTouched();
+            this.ngControl.control.updateValueAndValidity();
+        }
     }
     setAriaDescribedBy(helpers) {
         if (helpers.show) {
@@ -5774,7 +5835,7 @@ class ClrKeyFocus {
             }
             if (this.focusOnLoad) {
                 this.currentItem.focus();
-                this.focusChange.next();
+                this.focusChange.emit();
             }
         }
     }
@@ -7160,25 +7221,24 @@ class ClrOptionItems {
         if (!this._rawItems || this.filter === undefined || this.filter === null) {
             return;
         }
+        const normalizedFilterValue = normalizeValue(this.filter);
         if (this.optionService.showAllOptions) {
             this.filteredItems = this._rawItems;
         }
         else if (this._filterField) {
             this.filteredItems = this._rawItems.filter(item => {
                 const objValue = item[this._filterField];
-                return objValue ? objValue.toString().toLowerCase().indexOf(this.filter.toLowerCase().toString()) > -1 : false;
+                return objValue ? normalizeValue(objValue).includes(normalizedFilterValue) : false;
             });
         }
         else {
             // Filter by all item object values
             this.filteredItems = this._rawItems.filter(item => {
                 if (typeof item !== 'object') {
-                    return item.toString().toLowerCase().indexOf(this.filter.toString().toLowerCase()) > -1;
+                    return normalizeValue(item).includes(normalizedFilterValue);
                 }
                 const objValues = Object.values(item).filter(value => {
-                    return value !== null && value !== undefined
-                        ? value.toString().toLowerCase().indexOf(this.filter.toString().toLowerCase()) > -1
-                        : false;
+                    return value !== null && value !== undefined ? normalizeValue(value).includes(normalizedFilterValue) : false;
                 });
                 return objValues.length > 0;
             });
@@ -7203,6 +7263,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                 type: Input,
                 args: ['clrOptionItemsField']
             }] } });
+function normalizeValue(value) {
+    return value
+        .toString()
+        .normalize('NFD')
+        .replace(/\p{Diacritic}/gu, '')
+        .toLowerCase();
+}
 
 /*
  * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
@@ -8424,7 +8491,7 @@ class DateIOService {
         return '';
     }
     getDateValueFromDateString(date) {
-        if (!date) {
+        if (!date || typeof date !== 'string') {
             return null;
         }
         const dateParts = date.match(USER_INPUT_REGEX);
@@ -9634,9 +9701,11 @@ class ClrDateInput extends WrappedFormControl {
     }
     set min(dateString) {
         this.dateIOService.setMinDate(dateString);
+        this.triggerControlValidation();
     }
     set max(dateString) {
         this.dateIOService.setMaxDate(dateString);
+        this.triggerControlValidation();
     }
     get disabled() {
         if (this.dateFormControlService) {
@@ -9701,6 +9770,14 @@ class ClrDateInput extends WrappedFormControl {
             this.focusService.focused = focus;
         }
     }
+    triggerControlValidation() {
+        var _a, _b;
+        if (this.datepickerHasFormControl()) {
+            // Set `emitEvent` to false to prevent unnecessary value change event. Status change event will be emitted by `setErrors` below.
+            (_a = this.control.control) === null || _a === void 0 ? void 0 : _a.updateValueAndValidity({ emitEvent: false });
+            (_b = this.control.control) === null || _b === void 0 ? void 0 : _b.setErrors(this.control.control.errors);
+        }
+    }
     populateServicesFromContainerComponent() {
         if (!this.container) {
             this.dateIOService = this.getProviderFromContainer(DateIOService);
@@ -10010,6 +10087,12 @@ class ClrPasswordContainer extends ClrAbstractContainer {
         this.show = !this.show;
         this.toggleService.next(this.show);
     }
+    showPasswordText(label) {
+        return this.commonStrings.parse(this.commonStrings.keys.passwordShow, { LABEL: label });
+    }
+    hidePasswordText(label) {
+        return this.commonStrings.parse(this.commonStrings.keys.passwordHide, { LABEL: label });
+    }
 }
 ClrPasswordContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrPasswordContainer, deps: [{ token: IfControlStateService }, { token: LayoutService, optional: true }, { token: ControlClassService }, { token: NgControlService }, { token: FocusService }, { token: TOGGLE_SERVICE }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
 ClrPasswordContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrPasswordContainer, selector: "clr-password-container", inputs: { clrToggle: "clrToggle" }, host: { properties: { "class.clr-form-control": "true", "class.clr-form-control-disabled": "control?.disabled", "class.clr-row": "addGrid()" } }, providers: [
@@ -10035,7 +10118,7 @@ ClrPasswordContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
           >
             <cds-icon class="clr-password-eye-icon" [attr.shape]="show ? 'eye-hide' : 'eye'"></cds-icon>
             <span class="clr-sr-only">
-              {{ show ? commonStrings.keys.passwordHide : commonStrings.keys.passwordShow }}
+              {{ show ? hidePasswordText(label?.labelText) : showPasswordText(label?.labelText) }}
             </span>
           </button>
         </div>
@@ -10079,7 +10162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
           >
             <cds-icon class="clr-password-eye-icon" [attr.shape]="show ? 'eye-hide' : 'eye'"></cds-icon>
             <span class="clr-sr-only">
-              {{ show ? commonStrings.keys.passwordHide : commonStrings.keys.passwordShow }}
+              {{ show ? hidePasswordText(label?.labelText) : showPasswordText(label?.labelText) }}
             </span>
           </button>
         </div>
@@ -13290,11 +13373,9 @@ class Items {
         this._change = new Subject();
         this._allChanges = new Subject();
         /**
-         * Tracking function to identify objects. Default is reference equality.
-         *
-         * @deprecated in v15 and scheduled for removal in v17 (CDE-71)
+         * Tracking function to identify objects.
          */
-        this.iteratorTrackBy = (_index, item) => item;
+        this.trackBy = item => item;
     }
     get smart() {
         return this._smart;
@@ -13371,22 +13452,6 @@ class Items {
             this._filterItems();
         }
     }
-    canTrackBy() {
-        // all items are needed unless `datagridTrackBy` is set because `iteratorTrackBy` requires the item's index
-        return !!this.datagridTrackBy || Array.isArray(this.all);
-    }
-    trackBy(item, index) {
-        if (this.datagridTrackBy) {
-            return this.datagridTrackBy(item);
-        }
-        else if (Array.isArray(this.all)) {
-            index = index !== null && index !== void 0 ? index : this.all.indexOf(item);
-            return this.iteratorTrackBy(index, item);
-        }
-        else {
-            throw new Error('improper call to Items#trackBy');
-        }
-    }
     emitChange() {
         this._change.next(this.displayed);
     }
@@ -13469,7 +13534,6 @@ class ClrDatagridItems {
         this._rawItems = items ? items : []; // local copy for ngOnChange diffing
     }
     set trackBy(value) {
-        this.items.iteratorTrackBy = value;
         this.iterableProxy.ngForTrackBy = value;
     }
     /**
@@ -13613,6 +13677,7 @@ class ClrSignpostTrigger {
         this.signpostIdService = signpostIdService;
         this.signpostFocusManager = signpostFocusManager;
         this.platformId = platformId;
+        this.ariaExpanded = false;
         this.subscriptions = [];
         this.document = document;
     }
@@ -13986,12 +14051,10 @@ class Selection {
                     let selectionUpdated = false;
                     // if the currentSingle has been set before data was loaded, we look up and save the ref from current data set
                     if (this.currentSingle && !this.prevSingleSelectionRef) {
-                        if (this._items.canTrackBy()) {
-                            this.prevSingleSelectionRef = this._items.trackBy(this.currentSingle);
-                        }
+                        this.prevSingleSelectionRef = this._items.trackBy(this.currentSingle);
                     }
-                    updatedItems.forEach((item, index) => {
-                        const ref = this._items.trackBy(item, index);
+                    updatedItems.forEach(item => {
+                        const ref = this._items.trackBy(item);
                         // If one of the updated items is the previously selectedSingle, set it as the new one
                         if (this.prevSingleSelectionRef === ref) {
                             newSingle = item;
@@ -14024,20 +14087,18 @@ class Selection {
                     let selectionUpdated = false;
                     // if the current has been set before data was loaded, we look up and save the ref from current data set
                     if (this.current.length > 0 && this.prevSelectionRefs.length !== this.current.length) {
-                        if (this._items.canTrackBy()) {
-                            this.prevSelectionRefs = [];
-                            this.current.forEach(item => {
-                                this.prevSelectionRefs.push(this._items.trackBy(item));
-                            });
-                        }
+                        this.prevSelectionRefs = [];
+                        this.current.forEach(item => {
+                            this.prevSelectionRefs.push(this._items.trackBy(item));
+                        });
                     }
                     // Duplicate loop, when the issue is issue#2342 is revisited keep in mind that
                     // we need to go over every updated item and check to see if there are valid to be
                     // locked or not and update it. When only add items that are found in the lockedRefs back.
                     //
                     // The both loops below that goes over updatedItems could be combined into one.
-                    updatedItems.forEach((item, index) => {
-                        const ref = this._items.trackBy(item, index);
+                    updatedItems.forEach(item => {
+                        const ref = this._items.trackBy(item);
                         if (this.lockedRefs.indexOf(ref) > -1) {
                             updateLockedRef.push(ref);
                         }
@@ -14046,8 +14107,8 @@ class Selection {
                     // currently, the selection is cleared when filter is applied, so the logic inside
                     // the if statement below results in broken behavior.
                     if (leftOver.length > 0) {
-                        updatedItems.forEach((item, index) => {
-                            const ref = this._items.trackBy(item, index);
+                        updatedItems.forEach(item => {
+                            const ref = this._items.trackBy(item);
                             // Look in current selected refs array if item is selected, and update actual value
                             const selectedIndex = this.prevSelectionRefs.indexOf(ref);
                             if (selectedIndex > -1) {
@@ -14113,7 +14174,7 @@ class Selection {
             return;
         }
         this._currentSingle = value;
-        if (this._items.canTrackBy() && value) {
+        if (value) {
             this.prevSingleSelectionRef = this._items.trackBy(value);
         }
         this.emitChange();
@@ -14259,10 +14320,8 @@ class Selection {
      */
     selectItem(item) {
         this.current = this.current.concat(item);
-        if (this._items.canTrackBy()) {
-            // Push selected ref onto array
-            this.prevSelectionRefs.push(this._items.trackBy(item));
-        }
+        // Push selected ref onto array
+        this.prevSelectionRefs.push(this._items.trackBy(item));
     }
     /**
      * Deselects an item
@@ -14280,7 +14339,7 @@ class Selection {
      * Make sure that it could be locked
      */
     canItBeLocked() {
-        return this._selectionType !== SelectionType.None && this._items.canTrackBy();
+        return this._selectionType !== SelectionType.None;
     }
     emitChange() {
         if (this._selectionType === SelectionType.Single) {
@@ -15068,7 +15127,7 @@ class ClrDatagrid {
         this.selection.rowSelectionMode = value;
     }
     set trackBy(value) {
-        this.items.datagridTrackBy = value;
+        this.items.trackBy = value;
     }
     /**
      * Indicates if all currently displayed items are selected
@@ -15110,9 +15169,7 @@ class ClrDatagrid {
             });
             // Try to update only when there is something cached and its open.
             if (this.detailService.state && this.detailService.isOpen) {
-                const row = this.items.canTrackBy()
-                    ? this.rows.find(row => this.items.trackBy(row.item) === this.items.trackBy(this.detailService.state))
-                    : undefined;
+                const row = this.rows.find(row => this.items.trackBy(row.item) === this.items.trackBy(this.detailService.state));
                 /**
                  * Reopen updated row or close it
                  */
@@ -15499,47 +15556,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
  */
 const columnToggleTrackByFn = index => index;
 
-/*
- * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-class ClrDatagridItemsTrackBy {
-    constructor(_items) {
-        this._items = _items;
-    }
-    set trackBy(value) {
-        /**
-         * This is a workaround to prevent the items `trackBy` function from
-         * being replaced when the "manage columns" button is clicked. This is
-         * not a complete solution. If there is another `ngForTrackBy` function
-         * within the datagrid in application code, it could sill replace the
-         * items `trackBy` function whether it is the row iterator or not.
-         */
-        if (value === columnToggleTrackByFn) {
-            return;
-        }
-        if (this._items) {
-            this._items.iteratorTrackBy = value;
-        }
-    }
-}
-ClrDatagridItemsTrackBy.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagridItemsTrackBy, deps: [{ token: Items, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-ClrDatagridItemsTrackBy.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", type: ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: { trackBy: ["ngForTrackBy", "trackBy"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagridItemsTrackBy, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngForTrackBy]',
-                }]
-        }], ctorParameters: function () {
-        return [{ type: Items, decorators: [{
-                        type: Optional
-                    }] }];
-    }, propDecorators: { trackBy: [{
-                type: Input,
-                args: ['ngForTrackBy']
-            }] } });
-
 /*
  * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
@@ -15708,7 +15724,7 @@ ClrDatagridColumnToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
         <clr-dg-column-toggle-button (clrAllSelected)="allColumnsSelected()"></clr-dg-column-toggle-button>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]" }, { 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: 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: "directive", type: ClrPopoverAnchor, selector: "[clrPopoverAnchor]" }, { kind: "directive", type: ClrPopoverCloseButton, selector: "[clrPopoverCloseButton]", outputs: ["clrPopoverOnCloseChange"] }, { kind: "directive", type: ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose"] }, { kind: "directive", type: ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "component", type: ClrDatagridColumnToggleButton, selector: "clr-dg-column-toggle-button", outputs: ["clrAllSelected"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]" }, { 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: 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: "directive", type: ClrPopoverAnchor, selector: "[clrPopoverAnchor]" }, { kind: "directive", type: ClrPopoverCloseButton, selector: "[clrPopoverCloseButton]", outputs: ["clrPopoverOnCloseChange"] }, { kind: "directive", type: ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose"] }, { kind: "component", type: ClrDatagridColumnToggleButton, selector: "clr-dg-column-toggle-button", outputs: ["clrAllSelected"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagridColumnToggle, decorators: [{
             type: Component,
             args: [{
@@ -17228,7 +17244,6 @@ const CLR_DATAGRID_DIRECTIVES = [
     ClrDatagridFooter,
     ClrDatagridHideableColumn,
     ClrDatagridItems,
-    ClrDatagridItemsTrackBy,
     ClrDatagridPageSize,
     ClrDatagridPagination,
     ClrDatagridPlaceholder,
@@ -17275,7 +17290,6 @@ ClrDatagridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versi
         ClrDatagridFooter,
         ClrDatagridHideableColumn,
         ClrDatagridItems,
-        ClrDatagridItemsTrackBy,
         ClrDatagridPageSize,
         ClrDatagridPagination,
         ClrDatagridPlaceholder,
@@ -17326,7 +17340,6 @@ ClrDatagridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versi
         ClrDatagridFooter,
         ClrDatagridHideableColumn,
         ClrDatagridItems,
-        ClrDatagridItemsTrackBy,
         ClrDatagridPageSize,
         ClrDatagridPagination,
         ClrDatagridPlaceholder,
@@ -19799,13 +19812,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                 }]
         }] });
 
+/*
+ * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
 /*
  * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 // @TODO Make this an enum
-const ALERT_TYPES = ['info', 'warning', 'danger', 'success'];
+const ALERT_TYPES = ['info', 'warning', 'danger', 'success', 'neutral', 'unknown', 'loading'];
 
 /*
  * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
@@ -19815,7 +19834,7 @@ const ALERT_TYPES = ['info', 'warning', 'danger', 'success'];
 class AlertIconAndTypesService {
     constructor(commonStrings) {
         this.commonStrings = commonStrings;
-        this.defaultIconShape = 'info-circle';
+        this.defaultIconShape = 'info-standard';
         this._alertIconShape = '';
         this._alertType = 'info';
     }
@@ -19848,20 +19867,35 @@ class AlertIconAndTypesService {
         const returnObj = { shape: '', cssClass: '', title: '' };
         switch (type) {
             case 'warning':
-                returnObj.shape = 'exclamation-triangle';
+                returnObj.shape = 'warning-standard';
                 returnObj.cssClass = 'alert-warning';
                 returnObj.title = this.commonStrings.keys.warning;
                 break;
             case 'danger':
-                returnObj.shape = 'exclamation-circle';
+                returnObj.shape = 'error-standard';
                 returnObj.cssClass = 'alert-danger';
                 returnObj.title = this.commonStrings.keys.danger;
                 break;
             case 'success':
-                returnObj.shape = 'check-circle';
+                returnObj.shape = 'success-standard';
                 returnObj.cssClass = 'alert-success';
                 returnObj.title = this.commonStrings.keys.success;
                 break;
+            case 'neutral':
+                returnObj.shape = 'note';
+                returnObj.cssClass = 'alert-neutral';
+                returnObj.title = this.commonStrings.keys.neutral;
+                break;
+            case 'unknown':
+                returnObj.shape = 'help';
+                returnObj.cssClass = 'alert-neutral';
+                returnObj.title = this.commonStrings.keys.unknown;
+                break;
+            case 'loading':
+                returnObj.shape = 'loading';
+                returnObj.cssClass = 'alert-neutral';
+                returnObj.title = this.commonStrings.keys.unknown;
+                break;
             default:
                 returnObj.shape = this.defaultIconShape;
                 returnObj.cssClass = 'alert-info';
@@ -19983,7 +20017,6 @@ class ClrAlert {
         this.commonStrings = commonStrings;
         this.renderer = renderer;
         this.hostElement = hostElement;
-        this.isLight = false;
         this.isSmall = false;
         this.closable = true;
         this.isAppLevel = false;
@@ -19991,12 +20024,21 @@ class ClrAlert {
         this._closedChanged = new EventEmitter(false);
         this._closed = false;
         this.subscriptions = [];
+        this._isLightweight = false;
+    }
+    get isLightweight() {
+        return this._isLightweight;
+    }
+    set isLightweight(val) {
+        this._isLightweight = val;
+        this.configAlertType(this._origAlertType);
     }
     get alertType() {
         return this.iconService.alertType;
     }
     set alertType(val) {
-        this.iconService.alertType = val;
+        this._origAlertType = val;
+        this.configAlertType(val);
     }
     set alertIconShape(value) {
         this.iconService.alertIconShape = value;
@@ -20038,6 +20080,9 @@ class ClrAlert {
     ngOnDestroy() {
         this.subscriptions.forEach(sub => sub.unsubscribe());
     }
+    configAlertType(val) {
+        this.iconService.alertType = val;
+    }
     open() {
         this._closed = false;
         if (this.multiAlertService) {
@@ -20046,31 +20091,28 @@ class ClrAlert {
         this._closedChanged.emit(false);
     }
     close() {
-        var _a;
+        var _a, _b;
         if (!this.closable) {
             return;
         }
         const isCurrentAlert = ((_a = this.multiAlertService) === null || _a === void 0 ? void 0 : _a.currentAlert) === this;
         this._closed = true;
-        if (this.multiAlertService) {
+        if ((_b = this.multiAlertService) === null || _b === void 0 ? void 0 : _b.activeAlerts) {
             this.multiAlertService.close(isCurrentAlert);
         }
         this._closedChanged.emit(true);
     }
 }
 ClrAlert.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrAlert, deps: [{ token: AlertIconAndTypesService }, { token: i0.ChangeDetectorRef }, { token: MultiAlertService, optional: true }, { token: ClrCommonStringsService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ClrAlert.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrAlert, selector: "clr-alert", inputs: { isLight: ["clrAlertLightweight", "isLight"], isSmall: ["clrAlertSizeSmall", "isSmall"], closable: ["clrAlertClosable", "closable"], isAppLevel: ["clrAlertAppLevel", "isAppLevel"], clrCloseButtonAriaLabel: "clrCloseButtonAriaLabel", alertType: ["clrAlertType", "alertType"], alertIconShape: ["clrAlertIcon", "alertIconShape"], closed: ["clrAlertClosed", "closed"] }, outputs: { _closedChanged: "clrAlertClosedChange" }, providers: [AlertIconAndTypesService], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<div\n  *ngIf=\"!_closed\"\n  class=\"alert\"\n  [ngClass]=\"alertClass\"\n  [class.alert-sm]=\"isSmall\"\n  [class.alert-lightweight]=\"isLight\"\n  [class.alert-app-level]=\"isAppLevel\"\n>\n  <div class=\"alert-items\">\n    <ng-content></ng-content>\n  </div>\n  <button type=\"button\" class=\"close\" *ngIf=\"closable\" (click)=\"close()\" [attr.aria-label]=\"clrCloseButtonAriaLabel\">\n    <cds-icon shape=\"window-close\"></cds-icon>\n  </button>\n</div>\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" }] });
+ClrAlert.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrAlert, selector: "clr-alert", inputs: { isSmall: ["clrAlertSizeSmall", "isSmall"], closable: ["clrAlertClosable", "closable"], isAppLevel: ["clrAlertAppLevel", "isAppLevel"], clrCloseButtonAriaLabel: "clrCloseButtonAriaLabel", isLightweight: ["clrAlertLightweight", "isLightweight"], alertType: ["clrAlertType", "alertType"], alertIconShape: ["clrAlertIcon", "alertIconShape"], closed: ["clrAlertClosed", "closed"] }, outputs: { _closedChanged: "clrAlertClosedChange" }, providers: [AlertIconAndTypesService], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<div\n  *ngIf=\"!_closed\"\n  class=\"alert\"\n  [ngClass]=\"alertClass\"\n  [class.alert-sm]=\"isSmall\"\n  [class.alert-lightweight]=\"isLightweight\"\n  [class.alert-app-level]=\"isAppLevel\"\n>\n  <div class=\"alert-items\">\n    <ng-content></ng-content>\n  </div>\n  <button type=\"button\" class=\"close\" *ngIf=\"closable\" (click)=\"close()\" [attr.aria-label]=\"clrCloseButtonAriaLabel\">\n    <cds-icon shape=\"window-close\"></cds-icon>\n  </button>\n</div>\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" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrAlert, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-alert', providers: [AlertIconAndTypesService], template: "<!--\n  ~ Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<div\n  *ngIf=\"!_closed\"\n  class=\"alert\"\n  [ngClass]=\"alertClass\"\n  [class.alert-sm]=\"isSmall\"\n  [class.alert-lightweight]=\"isLight\"\n  [class.alert-app-level]=\"isAppLevel\"\n>\n  <div class=\"alert-items\">\n    <ng-content></ng-content>\n  </div>\n  <button type=\"button\" class=\"close\" *ngIf=\"closable\" (click)=\"close()\" [attr.aria-label]=\"clrCloseButtonAriaLabel\">\n    <cds-icon shape=\"window-close\"></cds-icon>\n  </button>\n</div>\n" }]
+            args: [{ selector: 'clr-alert', providers: [AlertIconAndTypesService], template: "<!--\n  ~ Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<div\n  *ngIf=\"!_closed\"\n  class=\"alert\"\n  [ngClass]=\"alertClass\"\n  [class.alert-sm]=\"isSmall\"\n  [class.alert-lightweight]=\"isLightweight\"\n  [class.alert-app-level]=\"isAppLevel\"\n>\n  <div class=\"alert-items\">\n    <ng-content></ng-content>\n  </div>\n  <button type=\"button\" class=\"close\" *ngIf=\"closable\" (click)=\"close()\" [attr.aria-label]=\"clrCloseButtonAriaLabel\">\n    <cds-icon shape=\"window-close\"></cds-icon>\n  </button>\n</div>\n" }]
         }], ctorParameters: function () {
         return [{ type: AlertIconAndTypesService }, { type: i0.ChangeDetectorRef }, { type: MultiAlertService, decorators: [{
                         type: Optional
                     }] }, { type: ClrCommonStringsService }, { type: i0.Renderer2 }, { type: i0.ElementRef }];
-    }, propDecorators: { isLight: [{
-                type: Input,
-                args: ['clrAlertLightweight']
-            }], isSmall: [{
+    }, propDecorators: { isSmall: [{
                 type: Input,
                 args: ['clrAlertSizeSmall']
             }], closable: [{
@@ -20084,6 +20126,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
             }], _closedChanged: [{
                 type: Output,
                 args: ['clrAlertClosedChange']
+            }], isLightweight: [{
+                type: Input,
+                args: ['clrAlertLightweight']
             }], alertType: [{
                 type: Input,
                 args: ['clrAlertType']
@@ -20108,24 +20153,28 @@ class ClrAlertItem {
 ClrAlertItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrAlertItem, deps: [{ token: AlertIconAndTypesService }], target: i0.ɵɵFactoryTarget.Component });
 ClrAlertItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrAlertItem, selector: "clr-alert-item", host: { classAttribute: "alert-item" }, ngImport: i0, template: `
     <div class="alert-icon-wrapper">
+      <clr-spinner class="alert-spinner" clrInline *ngIf="iconService.alertIconShape === 'loading'"></clr-spinner>
       <cds-icon
         class="alert-icon"
         role="img"
+        *ngIf="iconService.alertIconShape !== 'loading'"
         [attr.shape]="iconService.alertIconShape"
         [attr.aria-label]="iconService.alertIconTitle"
       ></cds-icon>
     </div>
     <ng-content></ng-content>
-  `, isInline: true, dependencies: [{ kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrAlertItem, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-alert-item',
                     template: `
     <div class="alert-icon-wrapper">
+      <clr-spinner class="alert-spinner" clrInline *ngIf="iconService.alertIconShape === 'loading'"></clr-spinner>
       <cds-icon
         class="alert-icon"
         role="img"
+        *ngIf="iconService.alertIconShape !== 'loading'"
         [attr.shape]="iconService.alertIconShape"
         [attr.aria-label]="iconService.alertIconTitle"
       ></cds-icon>
@@ -20303,7 +20352,7 @@ class ClrAlerts {
     }
 }
 ClrAlerts.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrAlerts, deps: [{ token: MultiAlertService }], target: i0.ɵɵFactoryTarget.Component });
-ClrAlerts.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrAlerts, selector: "clr-alerts", inputs: { _inputCurrentIndex: ["clrCurrentAlertIndex", "_inputCurrentIndex"], currentAlert: ["clrCurrentAlert", "currentAlert"] }, outputs: { currentAlertChange: "clrCurrentAlertChange", currentAlertIndexChange: "clrCurrentAlertIndexChange" }, host: { properties: { "class.alerts": "true", "class.alert-danger": "this.currentAlertType == 'danger'", "class.alert-info": "this.currentAlertType == 'info'", "class.alert-success": "this.currentAlertType == 'success'", "class.alert-warning": "this.currentAlertType == 'warning'" } }, providers: [MultiAlertService], queries: [{ propertyName: "allAlerts", predicate: ClrAlert }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n<div class=\"alerts-wrapper\">\n  <clr-alerts-pager *ngIf=\"multiAlertService.count > 1\" [clrCurrentAlertIndex]=\"currentAlertIndex\"></clr-alerts-pager>\n  <ng-content select=\"clr-alert\"></ng-content>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ClrAlertsPager, selector: "clr-alerts-pager", inputs: ["clrCurrentAlert", "clrCurrentAlertIndex"], outputs: ["clrCurrentAlertChange", "clrCurrentAlertIndexChange"] }] });
+ClrAlerts.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrAlerts, selector: "clr-alerts", inputs: { _inputCurrentIndex: ["clrCurrentAlertIndex", "_inputCurrentIndex"], currentAlert: ["clrCurrentAlert", "currentAlert"] }, outputs: { currentAlertChange: "clrCurrentAlertChange", currentAlertIndexChange: "clrCurrentAlertIndexChange" }, host: { properties: { "class.alerts": "true", "class.alert-danger": "this.currentAlertType == 'danger'", "class.alert-info": "this.currentAlertType == 'info'", "class.alert-success": "this.currentAlertType == 'success'", "class.alert-warning": "this.currentAlertType == 'warning'", "class.alert-neutral": "this.currentAlertType == 'neutral'" } }, providers: [MultiAlertService], queries: [{ propertyName: "allAlerts", predicate: ClrAlert }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n<div class=\"alerts-wrapper\">\n  <clr-alerts-pager *ngIf=\"multiAlertService.count > 1\" [clrCurrentAlertIndex]=\"currentAlertIndex\"></clr-alerts-pager>\n  <ng-content select=\"clr-alert\"></ng-content>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ClrAlertsPager, selector: "clr-alerts-pager", inputs: ["clrCurrentAlert", "clrCurrentAlertIndex"], outputs: ["clrCurrentAlertChange", "clrCurrentAlertIndexChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrAlerts, decorators: [{
             type: Component,
             args: [{ selector: 'clr-alerts', providers: [MultiAlertService], host: {
@@ -20312,6 +20361,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                         '[class.alert-info]': "this.currentAlertType == 'info'",
                         '[class.alert-success]': "this.currentAlertType == 'success'",
                         '[class.alert-warning]': "this.currentAlertType == 'warning'",
+                        '[class.alert-neutral]': "this.currentAlertType == 'neutral'",
                     }, template: "<!--\n  ~ Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n<div class=\"alerts-wrapper\">\n  <clr-alerts-pager *ngIf=\"multiAlertService.count > 1\" [clrCurrentAlertIndex]=\"currentAlertIndex\"></clr-alerts-pager>\n  <ng-content select=\"clr-alert\"></ng-content>\n</div>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: MultiAlertService }]; }, propDecorators: { currentAlertChange: [{
                 type: Output,
@@ -20338,16 +20388,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
 const CLR_ALERT_DIRECTIVES = [ClrAlert, ClrAlertItem, ClrAlerts, ClrAlertsPager, ClrAlertText];
 class ClrAlertModule {
     constructor() {
-        ClarityIcons.addIcons(checkCircleIcon, infoCircleIcon, exclamationCircleIcon, exclamationTriangleIcon, windowCloseIcon);
+        ClarityIcons.addIcons(errorStandardIcon, helpIcon, infoStandardIcon, noteIcon, successStandardIcon, warningStandardIcon, windowCloseIcon);
     }
 }
 ClrAlertModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrAlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.2", ngImport: i0, type: ClrAlertModule, declarations: [ClrAlert, ClrAlertItem, ClrAlerts, ClrAlertsPager, ClrAlertText], imports: [CommonModule, ClrIconModule, ClrDropdownModule], exports: [ClrAlert, ClrAlertItem, ClrAlerts, ClrAlertsPager, ClrAlertText] });
-ClrAlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrAlertModule, imports: [CommonModule, ClrIconModule, ClrDropdownModule] });
+ClrAlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.2", ngImport: i0, type: ClrAlertModule, declarations: [ClrAlert, ClrAlertItem, ClrAlerts, ClrAlertsPager, ClrAlertText], imports: [CommonModule, ClrIconModule, ClrDropdownModule, ClrSpinnerModule], exports: [ClrAlert, ClrAlertItem, ClrAlerts, ClrAlertsPager, ClrAlertText] });
+ClrAlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrAlertModule, imports: [CommonModule, ClrIconModule, ClrDropdownModule, ClrSpinnerModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrAlertModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, ClrIconModule, ClrDropdownModule],
+                    imports: [CommonModule, ClrIconModule, ClrDropdownModule, ClrSpinnerModule],
                     declarations: [CLR_ALERT_DIRECTIVES],
                     exports: [CLR_ALERT_DIRECTIVES],
                 }]
@@ -23020,26 +23070,14 @@ class ClrProgressBar {
     get loopClass() {
         return this._loop;
     }
-    /** @deprecated since 2.0, remove in 4.0 */
-    set clrWarning(value) {
-        this._warning = isBooleanAttributeSet(value);
-    }
     get warningClass() {
-        return this._warning;
-    }
-    /** @deprecated since 2.0, remove in 4.0 */
-    set clrSuccess(value) {
-        this._success = isBooleanAttributeSet(value);
+        return this.color === 'warning';
     }
     get successClass() {
-        return this._success;
-    }
-    /** @deprecated since 2.0, remove in 4.0 */
-    set clrDanger(value) {
-        this._danger = isBooleanAttributeSet(value);
+        return this.color === 'success';
     }
     get dangerClass() {
-        return this._danger;
+        return this.color === 'danger';
     }
     set clrFlash(value) {
         this._flash = isBooleanAttributeSet(value);
@@ -23072,7 +23110,7 @@ class ClrProgressBar {
     }
 }
 ClrProgressBar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrProgressBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrProgressBar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrProgressBar, selector: "clr-progress-bar", inputs: { max: ["clrMax", "max"], displayval: ["clrDisplayval", "displayval"], value: ["clrValue", "value"], id: "id", clrCompact: "clrCompact", clrLabeled: "clrLabeled", clrFade: "clrFade", clrLoop: "clrLoop", clrWarning: "clrWarning", clrSuccess: "clrSuccess", clrDanger: "clrDanger", clrFlash: "clrFlash", clrFlashDanger: "clrFlashDanger" }, host: { properties: { "attr.id": "this.externalId", "class.progress": "this.progressClass", "class.compact": "this.compactClass", "class.labeled": "this.labeledClass", "class.progress-fade": "this.fadeClass", "class.loop": "this.loopClass", "class.warning": "this.warningClass", "class.success": "this.successClass", "class.danger": "this.dangerClass", "class.flash": "this.flashClass", "class.flash-danger": "this.flashDangerClass" } }, ngImport: i0, template: `
+ClrProgressBar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrProgressBar, selector: "clr-progress-bar", inputs: { max: ["clrMax", "max"], displayval: ["clrDisplayval", "displayval"], color: ["clrColor", "color"], value: ["clrValue", "value"], id: "id", clrCompact: "clrCompact", clrLabeled: "clrLabeled", clrFade: "clrFade", clrLoop: "clrLoop", clrFlash: "clrFlash", clrFlashDanger: "clrFlashDanger" }, host: { properties: { "attr.id": "this.externalId", "class.progress": "this.progressClass", "class.compact": "this.compactClass", "class.labeled": "this.labeledClass", "class.progress-fade": "this.fadeClass", "class.loop": "this.loopClass", "class.warning": "this.warningClass", "class.success": "this.successClass", "class.danger": "this.dangerClass", "class.flash": "this.flashClass", "class.flash-danger": "this.flashDangerClass" } }, ngImport: i0, template: `
     <progress [id]="id" [attr.max]="max" [attr.value]="value" [attr.data-displayval]="displayValue"></progress>
     <span *ngIf="displayStringValue()">{{ displayValue }}</span>
   `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
@@ -23091,6 +23129,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
             }], displayval: [{
                 type: Input,
                 args: ['clrDisplayval']
+            }], color: [{
+                type: Input,
+                args: ['clrColor']
             }], value: [{
                 type: Input,
                 args: ['clrValue']
@@ -23126,21 +23167,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
             }], loopClass: [{
                 type: HostBinding,
                 args: ['class.loop']
-            }], clrWarning: [{
-                type: Input,
-                args: ['clrWarning']
             }], warningClass: [{
                 type: HostBinding,
                 args: ['class.warning']
-            }], clrSuccess: [{
-                type: Input,
-                args: ['clrSuccess']
             }], successClass: [{
                 type: HostBinding,
                 args: ['class.success']
-            }], clrDanger: [{
-                type: Input,
-                args: ['clrDanger']
             }], dangerClass: [{
                 type: HostBinding,
                 args: ['class.danger']
@@ -25801,7 +25833,7 @@ class ClrWizard {
      */
     reset() {
         this.pageCollection.reset();
-        this.onReset.next();
+        this.onReset.emit();
     }
     listenForNextPageChanges() {
         return this.navService.movedToNextPage.pipe(filter(() => isPlatformBrowser(this.platformId))).subscribe(() => {
@@ -26480,15 +26512,9 @@ const CLR_MENU_POSITIONS = [
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-/*
- * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CLR_ALERT_DIRECTIVES, CLR_BUTTON_GROUP_DIRECTIVES, CLR_DATAGRID_DIRECTIVES, CLR_DATEPICKER_DIRECTIVES, CLR_DROPDOWN_DIRECTIVES, CLR_ICON_DIRECTIVES, CLR_LAYOUT_DIRECTIVES, CLR_LOADING_BUTTON_DIRECTIVES, CLR_LOADING_DIRECTIVES, CLR_MENU_POSITIONS, CLR_MODAL_DIRECTIVES, CLR_NAVIGATION_DIRECTIVES, CLR_PROGRESS_BAR_DIRECTIVES, CLR_SIGNPOST_DIRECTIVES, CLR_SPINNER_DIRECTIVES, CLR_STACK_VIEW_DIRECTIVES, CLR_TABS_DIRECTIVES, CLR_TOOLTIP_DIRECTIVES, CLR_TREE_VIEW_DIRECTIVES, CLR_VERTICAL_NAV_DIRECTIVES, CLR_WIZARD_DIRECTIVES, CONDITIONAL_DIRECTIVES, CUSTOM_BUTTON_TYPES, CdsIconCustomTag, ClarityModule, ClrAbstractContainer, ClrAccordion, ClrAccordionContent, ClrAccordionDescription, ClrAccordionModule, ClrAccordionPanel, ClrAccordionTitle, ClrAlert, ClrAlertItem, ClrAlertModule, ClrAlertText, ClrAlerts, ClrAlertsPager, ClrAlignment, ClrAriaCurrentLink, ClrAxis, ClrButton, ClrButtonGroup, ClrButtonGroupModule, ClrButtonModule, ClrCalendar, ClrCheckbox, ClrCheckboxContainer, ClrCheckboxModule, ClrCheckboxWrapper, ClrCombobox, ClrComboboxContainer, ClrComboboxModule, ClrCommonFormsModule, ClrCommonStringsService, ClrConditionalModule, ClrControl, ClrControlContainer, ClrControlError, ClrControlHelper, ClrControlSuccess, ClrDataModule, ClrDatagrid, ClrDatagridActionBar, ClrDatagridActionOverflow, ClrDatagridCell, ClrDatagridColumn, ClrDatagridColumnSeparator, ClrDatagridColumnToggle, ClrDatagridColumnToggleButton, ClrDatagridDetail, ClrDatagridDetailBody, ClrDatagridDetailHeader, ClrDatagridFilter, ClrDatagridFooter, ClrDatagridHideableColumn, ClrDatagridItems, ClrDatagridItemsTrackBy, ClrDatagridModule, ClrDatagridPageSize, ClrDatagridPagination, ClrDatagridPlaceholder, ClrDatagridRow, ClrDatagridRowDetail, ClrDatagridSortOrder, ClrDatalist, ClrDatalistContainer, ClrDatalistInput, ClrDatalistModule, ClrDateContainer, ClrDateInput, ClrDateInputValidator, ClrDatepickerModule, ClrDatepickerViewManager, ClrDay, ClrDaypicker, ClrDestroyService, ClrDropdown, ClrDropdownItem, ClrDropdownMenu, ClrDropdownModule, ClrDropdownTrigger, ClrEmphasisModule, ClrExpandableAnimation, ClrFocusOnViewInit, ClrFocusOnViewInitModule, ClrForm, ClrFormLayout, ClrFormsModule, ClrHeader, ClrIconCustomTag, ClrIconModule, ClrIfActive, ClrIfDetail, ClrIfError, ClrIfExpanded, ClrIfOpen, ClrIfSuccess, ClrInput, ClrInputContainer, ClrInputModule, ClrLabel, ClrLayout, ClrLayoutModule, ClrLoading, ClrLoadingButton, ClrLoadingButtonModule, ClrLoadingModule, ClrLoadingState, ClrMainContainer, ClrMainContainerModule, ClrModal, ClrModalBody, ClrModalModule, ClrMonthpicker, ClrNavLevel, ClrNavigationModule, ClrOption, ClrOptionItems, ClrOptionSelected, ClrOptions, ClrPassword, ClrPasswordContainer, ClrPasswordModule, ClrPopoverAnchor, ClrPopoverContent, ClrPopoverEventsService, ClrPopoverHostDirective, ClrPopoverModule, ClrPopoverPositionService, ClrPopoverToggleService, ClrProgressBar, ClrProgressBarModule, ClrRadio, ClrRadioContainer, ClrRadioModule, ClrRadioWrapper, ClrRange, ClrRangeContainer, ClrRangeModule, ClrRecursiveForOf, ClrSelect, ClrSelectContainer, ClrSelectModule, ClrSelectedState, ClrSide, ClrSignpost, ClrSignpostContent, ClrSignpostModule, ClrSignpostTrigger, ClrSpinner, ClrSpinnerModule, ClrStackBlock, ClrStackContentInput, ClrStackHeader, ClrStackView, ClrStackViewCustomTags, ClrStackViewLabel, ClrStackViewModule, ClrStandaloneCdkTrapFocus, ClrStepButton, ClrStepButtonType, ClrStepper, ClrStepperModule, ClrStepperPanel, ClrStopEscapePropagationDirective, ClrTab, ClrTabContent, ClrTabLink, ClrTabOverflowContent, ClrTabs, ClrTabsModule, ClrTextarea, ClrTextareaContainer, ClrTextareaModule, ClrTimeline, ClrTimelineLayout, ClrTimelineModule, ClrTimelineStep, ClrTimelineStepDescription, ClrTimelineStepHeader, ClrTimelineStepState, ClrTimelineStepTitle, ClrTooltip, ClrTooltipContent, ClrTooltipModule, ClrTooltipTrigger, ClrTree, ClrTreeNode, ClrTreeNodeLink, ClrTreeViewModule, ClrVerticalNav, ClrVerticalNavGroup, ClrVerticalNavGroupChildren, ClrVerticalNavIcon, ClrVerticalNavLink, ClrVerticalNavModule, ClrWizard, ClrWizardButton, ClrWizardHeaderAction, ClrWizardModule, ClrWizardPage, ClrWizardPageButtons, ClrWizardPageHeaderActions, ClrWizardPageNavTitle, ClrWizardPageTitle, ClrWizardStepnav, ClrWizardStepnavItem, ClrWizardTitle, ClrYearpicker, DEFAULT_BUTTON_TYPES, DatagridNumericFilter, DatagridPropertyComparator, DatagridPropertyNumericFilter, DatagridPropertyStringFilter, DatagridStringFilter, EXPANDABLE_ANIMATION_DIRECTIVES, FOCUS_ON_VIEW_INIT, FOCUS_ON_VIEW_INIT_DIRECTIVES, IS_TOGGLE, IS_TOGGLE_PROVIDER, LoadingListener, MainContainerWillyWonka, NavDetectionOompaLoompa, TOGGLE_SERVICE, TOGGLE_SERVICE_PROVIDER, ToggleServiceFactory, WrappedFormControl, collapse, commonStringsDefault, fade, fadeSlide, isToggleFactory, slide, AccordionOompaLoompa as ÇlrAccordionOompaLoompa, AccordionWillyWonka as ÇlrAccordionWillyWonka, ActionableOompaLoompa as ÇlrActionableOompaLoompa, ActiveOompaLoompa as ÇlrActiveOompaLoompa, ClrPopoverCloseButton as ÇlrClrPopoverCloseButton, ClrPopoverModuleNext as ÇlrClrPopoverModuleNext, ClrPopoverOpenCloseButton as ÇlrClrPopoverOpenCloseButton, DatagridCellRenderer as ÇlrDatagridCellRenderer, DatagridDetailRegisterer as ÇlrDatagridDetailRegisterer, DatagridHeaderRenderer as ÇlrDatagridHeaderRenderer, DatagridMainRenderer as ÇlrDatagridMainRenderer, DatagridRowRenderer as ÇlrDatagridRowRenderer, ClrDatagridSelectionCellDirective as ÇlrDatagridSelectionCellDirective, DatagridWillyWonka as ÇlrDatagridWillyWonka, ExpandableOompaLoompa as ÇlrExpandableOompaLoompa, StepperOompaLoompa as ÇlrStepperOompaLoompa, StepperWillyWonka as ÇlrStepperWillyWonka, TabsWillyWonka as ÇlrTabsWillyWonka, WrappedCell as ÇlrWrappedCell, WrappedColumn as ÇlrWrappedColumn, WrappedRow as ÇlrWrappedRow };
+export { CHANGE_KEYS, CLR_ALERT_DIRECTIVES, CLR_BUTTON_GROUP_DIRECTIVES, CLR_DATAGRID_DIRECTIVES, CLR_DATEPICKER_DIRECTIVES, CLR_DROPDOWN_DIRECTIVES, CLR_ICON_DIRECTIVES, CLR_LAYOUT_DIRECTIVES, CLR_LOADING_BUTTON_DIRECTIVES, CLR_LOADING_DIRECTIVES, CLR_MENU_POSITIONS, CLR_MODAL_DIRECTIVES, CLR_NAVIGATION_DIRECTIVES, CLR_PROGRESS_BAR_DIRECTIVES, CLR_SIGNPOST_DIRECTIVES, CLR_SPINNER_DIRECTIVES, CLR_STACK_VIEW_DIRECTIVES, CLR_TABS_DIRECTIVES, CLR_TOOLTIP_DIRECTIVES, CLR_TREE_VIEW_DIRECTIVES, CLR_VERTICAL_NAV_DIRECTIVES, CLR_WIZARD_DIRECTIVES, CONDITIONAL_DIRECTIVES, CUSTOM_BUTTON_TYPES, CdsIconCustomTag, ClarityModule, ClrAbstractContainer, ClrAccordion, ClrAccordionContent, ClrAccordionDescription, ClrAccordionModule, ClrAccordionPanel, ClrAccordionTitle, ClrAlert, ClrAlertItem, ClrAlertModule, ClrAlertText, ClrAlerts, ClrAlertsPager, ClrAlignment, ClrAriaCurrentLink, ClrAxis, ClrButton, ClrButtonGroup, ClrButtonGroupModule, ClrButtonModule, ClrCalendar, ClrCheckbox, ClrCheckboxContainer, ClrCheckboxModule, ClrCheckboxWrapper, ClrCombobox, ClrComboboxContainer, ClrComboboxModule, ClrCommonFormsModule, ClrCommonStringsService, ClrConditionalModule, ClrControl, ClrControlContainer, ClrControlError, ClrControlHelper, ClrControlSuccess, ClrDataModule, ClrDatagrid, ClrDatagridActionBar, ClrDatagridActionOverflow, ClrDatagridCell, ClrDatagridColumn, ClrDatagridColumnSeparator, ClrDatagridColumnToggle, ClrDatagridColumnToggleButton, ClrDatagridDetail, ClrDatagridDetailBody, ClrDatagridDetailHeader, ClrDatagridFilter, ClrDatagridFooter, ClrDatagridHideableColumn, ClrDatagridItems, ClrDatagridModule, ClrDatagridPageSize, ClrDatagridPagination, ClrDatagridPlaceholder, ClrDatagridRow, ClrDatagridRowDetail, ClrDatagridSortOrder, ClrDatalist, ClrDatalistContainer, ClrDatalistInput, ClrDatalistModule, ClrDateContainer, ClrDateInput, ClrDateInputValidator, ClrDatepickerModule, ClrDatepickerViewManager, ClrDay, ClrDaypicker, ClrDestroyService, ClrDropdown, ClrDropdownItem, ClrDropdownMenu, ClrDropdownModule, ClrDropdownTrigger, ClrEmphasisModule, ClrExpandableAnimation, ClrFocusOnViewInit, ClrFocusOnViewInitModule, ClrForm, ClrFormLayout, ClrFormsModule, ClrHeader, ClrIconCustomTag, ClrIconModule, ClrIfActive, ClrIfDetail, ClrIfError, ClrIfExpanded, ClrIfOpen, ClrIfSuccess, ClrInput, ClrInputContainer, ClrInputModule, ClrLabel, ClrLayout, ClrLayoutModule, ClrLoading, ClrLoadingButton, ClrLoadingButtonModule, ClrLoadingModule, ClrLoadingState, ClrMainContainer, ClrMainContainerModule, ClrModal, ClrModalBody, ClrModalModule, ClrMonthpicker, ClrNavLevel, ClrNavigationModule, ClrOption, ClrOptionItems, ClrOptionSelected, ClrOptions, ClrPassword, ClrPasswordContainer, ClrPasswordModule, ClrPopoverAnchor, ClrPopoverContent, ClrPopoverEventsService, ClrPopoverHostDirective, ClrPopoverModule, ClrPopoverPositionService, ClrPopoverToggleService, ClrProgressBar, ClrProgressBarModule, ClrRadio, ClrRadioContainer, ClrRadioModule, ClrRadioWrapper, ClrRange, ClrRangeContainer, ClrRangeModule, ClrRecursiveForOf, ClrSelect, ClrSelectContainer, ClrSelectModule, ClrSelectedState, ClrSide, ClrSignpost, ClrSignpostContent, ClrSignpostModule, ClrSignpostTrigger, ClrSpinner, ClrSpinnerModule, ClrStackBlock, ClrStackContentInput, ClrStackHeader, ClrStackView, ClrStackViewCustomTags, ClrStackViewLabel, ClrStackViewModule, ClrStandaloneCdkTrapFocus, ClrStepButton, ClrStepButtonType, ClrStepper, ClrStepperModule, ClrStepperPanel, ClrStopEscapePropagationDirective, ClrTab, ClrTabContent, ClrTabLink, ClrTabOverflowContent, ClrTabs, ClrTabsModule, ClrTextarea, ClrTextareaContainer, ClrTextareaModule, ClrTimeline, ClrTimelineLayout, ClrTimelineModule, ClrTimelineStep, ClrTimelineStepDescription, ClrTimelineStepHeader, ClrTimelineStepState, ClrTimelineStepTitle, ClrTooltip, ClrTooltipContent, ClrTooltipModule, ClrTooltipTrigger, ClrTree, ClrTreeNode, ClrTreeNodeLink, ClrTreeViewModule, ClrVerticalNav, ClrVerticalNavGroup, ClrVerticalNavGroupChildren, ClrVerticalNavIcon, ClrVerticalNavLink, ClrVerticalNavModule, ClrWizard, ClrWizardButton, ClrWizardHeaderAction, ClrWizardModule, ClrWizardPage, ClrWizardPageButtons, ClrWizardPageHeaderActions, ClrWizardPageNavTitle, ClrWizardPageTitle, ClrWizardStepnav, ClrWizardStepnavItem, ClrWizardTitle, ClrYearpicker, DEFAULT_BUTTON_TYPES, DatagridNumericFilter, DatagridPropertyComparator, DatagridPropertyNumericFilter, DatagridPropertyStringFilter, DatagridStringFilter, EXPANDABLE_ANIMATION_DIRECTIVES, FOCUS_ON_VIEW_INIT, FOCUS_ON_VIEW_INIT_DIRECTIVES, IS_TOGGLE, IS_TOGGLE_PROVIDER, LoadingListener, MainContainerWillyWonka, NavDetectionOompaLoompa, TOGGLE_SERVICE, TOGGLE_SERVICE_PROVIDER, ToggleServiceFactory, WrappedFormControl, collapse, commonStringsDefault, fade, fadeSlide, isToggleFactory, slide, AccordionOompaLoompa as ÇlrAccordionOompaLoompa, AccordionWillyWonka as ÇlrAccordionWillyWonka, ActionableOompaLoompa as ÇlrActionableOompaLoompa, ActiveOompaLoompa as ÇlrActiveOompaLoompa, ClrPopoverCloseButton as ÇlrClrPopoverCloseButton, ClrPopoverModuleNext as ÇlrClrPopoverModuleNext, ClrPopoverOpenCloseButton as ÇlrClrPopoverOpenCloseButton, DatagridCellRenderer as ÇlrDatagridCellRenderer, DatagridDetailRegisterer as ÇlrDatagridDetailRegisterer, DatagridHeaderRenderer as ÇlrDatagridHeaderRenderer, DatagridMainRenderer as ÇlrDatagridMainRenderer, DatagridRowRenderer as ÇlrDatagridRowRenderer, ClrDatagridSelectionCellDirective as ÇlrDatagridSelectionCellDirective, DatagridWillyWonka as ÇlrDatagridWillyWonka, ExpandableOompaLoompa as ÇlrExpandableOompaLoompa, StepperOompaLoompa as ÇlrStepperOompaLoompa, StepperWillyWonka as ÇlrStepperWillyWonka, TabsWillyWonka as ÇlrTabsWillyWonka, WrappedCell as ÇlrWrappedCell, WrappedColumn as ÇlrWrappedColumn, WrappedRow as ÇlrWrappedRow };
 //# sourceMappingURL=clr-angular.mjs.map