@clr/angular 17.5.0 → 17.6.0

package/fesm2015/clr-angular.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { Directive, NgModule, Optional, Input, Injectable, Component, ChangeDetectionStrategy, EventEmitter, SkipSelf, HostBinding, Output, ContentChildren, PLATFORM_ID, Inject, ViewChild, HostListener, Renderer2, InjectionToken, ElementRef, NgZone, ChangeDetectorRef, ContentChild, ComponentFactoryResolver, KeyValueDiffers, Self, Attribute, LOCALE_ID, inject, forwardRef, ViewContainerRef, VERSION, Injector, EnvironmentInjector, TemplateRef, IterableDiffers } from '@angular/core';
+import { Directive, NgModule, Optional, Input, Injectable, Component, ChangeDetectionStrategy, EventEmitter, SkipSelf, HostBinding, Output, ContentChildren, PLATFORM_ID, Inject, ViewChild, HostListener, Renderer2, InjectionToken, ElementRef, NgZone, ChangeDetectorRef, ContentChild, ComponentFactoryResolver, KeyValueDiffers, Self, Attribute, LOCALE_ID, inject, TemplateRef, Injector, forwardRef, ViewContainerRef, VERSION, EnvironmentInjector, IterableDiffers } 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, infoCircleIcon, eventIcon, calendarIcon, folderOpenIcon, eyeHideIcon, eyeIcon, ellipsisVerticalIcon, viewColumnsIcon, arrowIcon, timesIcon, stepForward2Icon, angleDoubleIcon, filterGridCircleIcon, filterGridIcon, errorStandardIcon, helpIcon, infoStandardIcon, noteIcon, successStandardIcon, warningStandardIcon, circleIcon, dotCircleIcon } from '@cds/core/icon';
-import { map, tap, startWith, distinctUntilChanged, filter, skipUntil, debounceTime, takeUntil, take, first, switchMap } from 'rxjs/operators';
+import { map, tap, startWith, distinctUntilChanged, filter, skipUntil, debounceTime, takeUntil, take, first, switchMap as switchMap$1 } from 'rxjs/operators';
 import * as i3 from 'rxjs';
-import { Subject, BehaviorSubject, Observable, fromEvent, isObservable, of, ReplaySubject, combineLatest, merge } from 'rxjs';
+import { Subject, BehaviorSubject, Observable, fromEvent, isObservable, of, shareReplay, switchMap, merge, map as map$1, EMPTY, startWith as startWith$1, ReplaySubject, combineLatest } from 'rxjs';
 import { trigger, transition, style, animate, state, keyframes } from '@angular/animations';
 import * as i1 from '@angular/forms';
 import { FormControl, FormGroup, FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR, SelectMultipleControlValueAccessor } from '@angular/forms';
@@ -275,6 +275,8 @@ const commonStringsDefault = {
     close: 'Close',
     show: 'Show',
     hide: 'Hide',
+    apply: 'Apply',
+    cancel: 'Cancel',
     expand: 'Expand',
     collapse: 'Collapse',
     more: 'More',
@@ -316,6 +318,7 @@ const commonStringsDefault = {
     singleActionableAriaLabel: 'Single actionable header',
     detailExpandableAriaLabel: 'Toggle more row content',
     datagridFilterAriaLabel: '{COLUMN} filter',
+    datagridFilterLabel: '{COLUMN} filter',
     datagridFilterDialogAriaLabel: 'Filter dialog',
     columnSeparatorAriaLabel: 'Column resize handle',
     columnSeparatorDescription: 'Use left or right key to resize the column',
@@ -4546,6 +4549,9 @@ class NgControlService {
         this._controlChanges = new Subject();
         this._helpers = new Subject();
     }
+    get control() {
+        return this._control;
+    }
     get controlChanges() {
         return this._controlChanges.asObservable();
     }
@@ -4553,6 +4559,7 @@ class NgControlService {
         return this._helpers.asObservable();
     }
     setControl(control) {
+        this._control = control;
         this._controlChanges.next(control);
     }
     setHelpers(state) {
@@ -4579,35 +4586,19 @@ var CONTROL_STATE;
 })(CONTROL_STATE || (CONTROL_STATE = {}));
 class IfControlStateService {
     constructor(ngControlService) {
-        this.subscriptions = [];
-        // Implement our own status changes observable, since Angular controls don't
-        this._statusChanges = new BehaviorSubject(CONTROL_STATE.NONE);
-        // Wait for the control to be available
-        this.subscriptions.push(ngControlService.controlChanges.subscribe(control => {
-            if (control) {
-                this.control = control;
-                // Subscribe to the status change events, only after touched
-                // and emit the control
-                this.subscriptions.push(this.control.statusChanges.subscribe(() => {
-                    this.triggerStatusChange();
-                }));
-            }
-        }));
-    }
-    get statusChanges() {
-        return this._statusChanges.asObservable();
-    }
-    ngOnDestroy() {
-        this.subscriptions.forEach(subscription => subscription.unsubscribe());
+        this.triggerStatusChangeSubject = new Subject();
+        this.statusChanges = this.getStatusChanges(ngControlService).pipe(shareReplay(1));
     }
     triggerStatusChange() {
-        /* Check if control is defined and run the code only then */
-        if (this.control) {
+        this.triggerStatusChangeSubject.next();
+    }
+    getStatusChanges(ngControlService) {
+        return ngControlService.controlChanges.pipe(switchMap(control => control ? merge(control.statusChanges, this.triggerStatusChangeSubject.pipe(map$1(() => control.status))) : EMPTY), map$1(controlStatus => {
             // These status values are mutually exclusive, so a control
             // cannot be both valid AND invalid or invalid AND disabled.
-            const status = CONTROL_STATE[this.control.status];
-            this._statusChanges.next(['VALID', 'INVALID'].includes(status) ? status : CONTROL_STATE.NONE);
-        }
+            const status = CONTROL_STATE[controlStatus];
+            return [CONTROL_STATE.VALID, CONTROL_STATE.INVALID].includes(status) ? status : CONTROL_STATE.NONE;
+        }), startWith$1(CONTROL_STATE.NONE));
     }
 }
 IfControlStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: IfControlStateService, deps: [{ token: NgControlService }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -6531,6 +6522,9 @@ class ClrLabel {
         return this.el.nativeElement && this.el.nativeElement.textContent;
     }
     ngOnInit() {
+        // Prevent id attributes from being removed by the `undefined` host binding.
+        // This happens when a `label` is used outside of a control container and other use cases.
+        this.idAttr = this.idInput;
         // Only add the clr-control-label if it is inside a control container
         if (this.controlIdService || this.ngControlService) {
             this.renderer.addClass(this.el.nativeElement, 'clr-control-label');
@@ -6742,10 +6736,16 @@ class ClrAbstractContainer {
         return Boolean(this.controlHelperComponent);
     }
     get showValid() {
-        return this.touched && this.state === CONTROL_STATE.VALID && !!this.controlSuccessComponent;
+        return this.touched && this.state === CONTROL_STATE.VALID && this.successMessagePresent;
     }
     get showInvalid() {
-        return this.touched && this.state === CONTROL_STATE.INVALID && !!this.controlErrorComponent;
+        return this.touched && this.state === CONTROL_STATE.INVALID && this.errorMessagePresent;
+    }
+    get successMessagePresent() {
+        return !!this.controlSuccessComponent;
+    }
+    get errorMessagePresent() {
+        return !!this.controlErrorComponent;
     }
     get touched() {
         var _a;
@@ -9083,7 +9083,8 @@ class ClrCombobox extends WrappedFormControl {
         return this.optionSelectionService.displayField;
     }
     get disabled() {
-        return this.control && this.control.disabled;
+        var _a;
+        return (_a = this.control) === null || _a === void 0 ? void 0 : _a.disabled;
     }
     ngAfterContentInit() {
         this.initializeSubscriptions();
@@ -9102,12 +9103,13 @@ class ClrCombobox extends WrappedFormControl {
         this.el = this.textbox;
     }
     onKeyUp(event) {
+        var _a;
         // if BACKSPACE in multiselect mode, delete the last pill if text is empty
         if (event.key === Keys.Backspace && this.multiSelect && this._searchText.length === 0) {
             const multiModel = this.optionSelectionService.selectionModel.model;
             if (multiModel && multiModel.length > 0) {
                 const lastItem = multiModel[multiModel.length - 1];
-                this.control.control.markAsTouched();
+                (_a = this.control) === null || _a === void 0 ? void 0 : _a.control.markAsTouched();
                 this.optionSelectionService.unselect(lastItem);
             }
         }
@@ -9128,12 +9130,12 @@ class ClrCombobox extends WrappedFormControl {
         }
     }
     onBlur() {
-        var _a, _b;
-        this.onTouchedCallback();
-        if (this.control.control.updateOn === 'change' && ((_b = (_a = this.control.control) === null || _a === void 0 ? void 0 : _a.errors) === null || _b === void 0 ? void 0 : _b.required)) {
+        var _a, _b, _c, _d;
+        (_a = this.onTouchedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+        if (((_b = this.control) === null || _b === void 0 ? void 0 : _b.control.updateOn) === 'change' && ((_c = this.control.control.errors) === null || _c === void 0 ? void 0 : _c.required)) {
             this.updateControlValue();
         }
-        if (this.control.control.updateOn === 'blur') {
+        if (((_d = this.control) === null || _d === void 0 ? void 0 : _d.control.updateOn) === 'blur') {
             this.control.control.updateValueAndValidity();
         }
         this.focused = false;
@@ -9214,7 +9216,8 @@ class ClrCombobox extends WrappedFormControl {
         }));
         if (this.controlStateService) {
             this.subscriptions.push(this.controlStateService.statusChanges.subscribe(invalid => {
-                this.invalid = this.control.control.touched && invalid === CONTROL_STATE.INVALID;
+                var _a;
+                this.invalid = ((_a = this.control) === null || _a === void 0 ? void 0 : _a.control.touched) && invalid === CONTROL_STATE.INVALID;
             }));
         }
     }
@@ -9485,7 +9488,11 @@ ClrInputContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
     <label *ngIf="!label && addGrid()"></label>
     <div class="clr-control-container" [ngClass]="controlClass()">
       <div class="clr-input-wrapper">
-        <ng-content select="[clrInput]"></ng-content>
+        <div class="clr-input-group">
+          <ng-content select="[clrInputPrefix]"></ng-content>
+          <ng-content select="[clrInput]"></ng-content>
+          <ng-content select="[clrInputSuffix]"></ng-content>
+        </div>
         <cds-icon
           *ngIf="showInvalid"
           class="clr-validate-icon"
@@ -9515,7 +9522,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
     <label *ngIf="!label && addGrid()"></label>
     <div class="clr-control-container" [ngClass]="controlClass()">
       <div class="clr-input-wrapper">
-        <ng-content select="[clrInput]"></ng-content>
+        <div class="clr-input-group">
+          <ng-content select="[clrInputPrefix]"></ng-content>
+          <ng-content select="[clrInput]"></ng-content>
+          <ng-content select="[clrInputSuffix]"></ng-content>
+        </div>
         <cds-icon
           *ngIf="showInvalid"
           class="clr-validate-icon"
@@ -9555,6 +9566,15 @@ class ClrInput extends WrappedFormControl {
     constructor(vcr, injector, control, renderer, el) {
         super(vcr, ClrInputContainer, injector, control, renderer, el);
         this.index = 1;
+        if (this.el.nativeElement.getAttribute('type') === 'number') {
+            console.warn(`Warning: Inputs of type "number" should utilize the number-input component for proper handling.\n
+  Example usage:
+  <clr-number-input-container>
+    <label>Number Input</label>
+    <input clrNumberInput type="number"/>
+  </clr-number-input-container>
+      `);
+        }
     }
 }
 ClrInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrInput, deps: [{ token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i1.NgControl, optional: true, self: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -10132,6 +10152,14 @@ class CalendarViewModel {
         this.setFocusableFlag(day, true);
         this.focusableDay = day;
     }
+    /**
+     * Updates the selected day in the calendar
+     */
+    updateSelectedDay(day) {
+        this.setSelectedDay(this.selectedDay, false);
+        this.selectedDay = day;
+        this.setSelectedDay(day, true);
+    }
     /**
      * Generates a 6x7 matrix of DayViewModel based on the Calendar.
      * The 6x7 matrix is structured according to the first day of the week.
@@ -10221,9 +10249,7 @@ class CalendarViewModel {
      * Initialize the selected day if the day is in the calendar.
      */
     initializeSelectedDay() {
-        if (this.selectedDay && this.isDayInCalendarView(this.selectedDay)) {
-            this.currMonthDayViews[this.selectedDay.date - 1].isSelected = true;
-        }
+        this.setSelectedDay(this.selectedDay, true);
     }
     /**
      * Initializes the focusable day if the day is in the calendar. If focusable day is not set, then
@@ -10252,6 +10278,11 @@ class CalendarViewModel {
             this.currMonthDayViews[day.date - 1].isFocusable = flag;
         }
     }
+    setSelectedDay(day, flag) {
+        if (day && this.isDayInCalendarView(day)) {
+            this.currMonthDayViews[(day === null || day === void 0 ? void 0 : day.date) - 1].isSelected = flag;
+        }
+    }
 }
 
 /*
@@ -10434,6 +10465,7 @@ class CalendarModel {
  */
 class DateNavigationService {
     constructor() {
+        this.hasActionButtons = false;
         this._todaysFullDate = new Date();
         this._selectedDayChange = new Subject();
         this._displayedCalendarChange = new Subject();
@@ -10469,11 +10501,12 @@ class DateNavigationService {
     }
     /**
      * Notifies that the selected day has changed so that the date can be emitted to the user.
-     * Note: Only to be called from day.ts
      */
-    notifySelectedDayChanged(dayModel) {
+    notifySelectedDayChanged(dayModel, { emitEvent } = { emitEvent: true }) {
         this.selectedDay = dayModel;
-        this._selectedDayChange.next(dayModel);
+        if (emitEvent) {
+            this._selectedDayChange.next(dayModel);
+        }
     }
     /**
      * Initializes the calendar based on the selected day.
@@ -10525,6 +10558,9 @@ class DateNavigationService {
         }
         this._focusOnCalendarChange.next();
     }
+    resetSelectedDay() {
+        this.selectedDay = this.persistedDate;
+    }
     // not a setter because i want this to remain private
     setDisplayedCalendar(value) {
         if (!this._displayedCalendar.isEqual(value)) {
@@ -10800,11 +10836,10 @@ 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 ClrDay {
-    constructor(_dateNavigationService, _toggleService, dateFormControlService, commonStrings) {
+    constructor(_dateNavigationService, commonStrings) {
         this._dateNavigationService = _dateNavigationService;
-        this._toggleService = _toggleService;
-        this.dateFormControlService = dateFormControlService;
         this.commonStrings = commonStrings;
+        this.onSelectDay = new EventEmitter();
     }
     /**
      * DayViewModel input which is used to build the Day View.
@@ -10836,13 +10871,11 @@ class ClrDay {
             return;
         }
         const day = this.dayView.dayModel;
-        this._dateNavigationService.notifySelectedDayChanged(day);
-        this.dateFormControlService.markAsDirty();
-        this._toggleService.open = false;
+        this.onSelectDay.emit(day);
     }
 }
-ClrDay.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDay, deps: [{ token: DateNavigationService }, { token: ClrPopoverToggleService }, { token: DateFormControlService }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
-ClrDay.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrDay, selector: "clr-day", inputs: { dayView: ["clrDayView", "dayView"] }, host: { properties: { "class.day": "true" } }, ngImport: i0, template: `
+ClrDay.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDay, deps: [{ token: DateNavigationService }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
+ClrDay.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrDay, selector: "clr-day", inputs: { dayView: ["clrDayView", "dayView"] }, outputs: { onSelectDay: "selectDay" }, host: { properties: { "class.day": "true" } }, ngImport: i0, template: `
     <button
       class="day-btn"
       type="button"
@@ -10884,7 +10917,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
   `,
                     host: { '[class.day]': 'true' },
                 }]
-        }], ctorParameters: function () { return [{ type: DateNavigationService }, { type: ClrPopoverToggleService }, { type: DateFormControlService }, { type: ClrCommonStringsService }]; }, propDecorators: { dayView: [{
+        }], ctorParameters: function () { return [{ type: DateNavigationService }, { type: ClrCommonStringsService }]; }, propDecorators: { onSelectDay: [{
+                type: Output,
+                args: ['selectDay']
+            }], dayView: [{
                 type: Input,
                 args: ['clrDayView']
             }] } });
@@ -10896,12 +10932,14 @@ 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 ClrCalendar {
-    constructor(_localeHelperService, _dateNavigationService, _datepickerFocusService, _dateIOService, _elRef) {
+    constructor(_localeHelperService, _dateNavigationService, _datepickerFocusService, _dateIOService, _elRef, _dateFormControlService, _toggleService) {
         this._localeHelperService = _localeHelperService;
         this._dateNavigationService = _dateNavigationService;
         this._datepickerFocusService = _datepickerFocusService;
         this._dateIOService = _dateIOService;
         this._elRef = _elRef;
+        this._dateFormControlService = _dateFormControlService;
+        this._toggleService = _toggleService;
         this._subs = [];
         this.generateCalendarView();
         this.initializeSubscriptions();
@@ -10963,6 +11001,15 @@ class ClrCalendar {
             }
         }
     }
+    setSelectedDay(day) {
+        const hasActionButtons = this._dateNavigationService.hasActionButtons;
+        this.calendarViewModel.updateSelectedDay(day);
+        this._dateNavigationService.notifySelectedDayChanged(day, { emitEvent: !hasActionButtons });
+        if (!hasActionButtons) {
+            this._dateFormControlService.markAsDirty();
+            this._toggleService.open = false;
+        }
+    }
     /**
      * Initialize subscriptions to:
      * 1. update the calendar view model.
@@ -10987,12 +11034,12 @@ class ClrCalendar {
         this.calendarViewModel = new CalendarViewModel(this.calendar, this.selectedDay, this.focusedDay, this.today, this._localeHelperService.firstDayOfWeek, this._dateIOService.disabledDates);
     }
 }
-ClrCalendar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrCalendar, deps: [{ token: LocaleHelperService }, { token: DateNavigationService }, { token: DatepickerFocusService }, { token: DateIOService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ClrCalendar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrCalendar, selector: "clr-calendar", host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0, template: "<table class=\"calendar-table\" role=\"presentation\">\n  <tr class=\"calendar-row weekdays\">\n    <th *ngFor=\"let day of localeDays\" class=\"calendar-cell weekday\">\n      <span [attr.aria-label]=\"day.day\">{{day.narrow}}</span>\n    </th>\n  </tr>\n  <tr class=\"calendar-row\" *ngFor=\"let row of calendarViewModel.calendarView\">\n    <td *ngFor=\"let dayView of row\" class=\"calendar-cell\">\n      <clr-day [clrDayView]=\"dayView\" aria-hidden=\"true\"></clr-day>\n    </td>\n  </tr>\n</table>\n", dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ClrDay, selector: "clr-day", inputs: ["clrDayView"] }] });
+ClrCalendar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrCalendar, deps: [{ token: LocaleHelperService }, { token: DateNavigationService }, { token: DatepickerFocusService }, { token: DateIOService }, { token: i0.ElementRef }, { token: DateFormControlService }, { token: ClrPopoverToggleService }], target: i0.ɵɵFactoryTarget.Component });
+ClrCalendar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrCalendar, selector: "clr-calendar", host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0, template: "<table class=\"calendar-table\" role=\"presentation\">\n  <tr class=\"calendar-row weekdays\">\n    <th *ngFor=\"let day of localeDays\" class=\"calendar-cell weekday\">\n      <span [attr.aria-label]=\"day.day\">{{day.narrow}}</span>\n    </th>\n  </tr>\n  <tr class=\"calendar-row\" *ngFor=\"let row of calendarViewModel.calendarView\">\n    <td *ngFor=\"let dayView of row\" class=\"calendar-cell\">\n      <clr-day [clrDayView]=\"dayView\" (selectDay)=\"setSelectedDay($event)\" aria-hidden=\"true\"></clr-day>\n    </td>\n  </tr>\n</table>\n", dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ClrDay, selector: "clr-day", inputs: ["clrDayView"], outputs: ["selectDay"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrCalendar, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-calendar', template: "<table class=\"calendar-table\" role=\"presentation\">\n  <tr class=\"calendar-row weekdays\">\n    <th *ngFor=\"let day of localeDays\" class=\"calendar-cell weekday\">\n      <span [attr.aria-label]=\"day.day\">{{day.narrow}}</span>\n    </th>\n  </tr>\n  <tr class=\"calendar-row\" *ngFor=\"let row of calendarViewModel.calendarView\">\n    <td *ngFor=\"let dayView of row\" class=\"calendar-cell\">\n      <clr-day [clrDayView]=\"dayView\" aria-hidden=\"true\"></clr-day>\n    </td>\n  </tr>\n</table>\n" }]
-        }], ctorParameters: function () { return [{ type: LocaleHelperService }, { type: DateNavigationService }, { type: DatepickerFocusService }, { type: DateIOService }, { type: i0.ElementRef }]; }, propDecorators: { onKeyDown: [{
+            args: [{ selector: 'clr-calendar', template: "<table class=\"calendar-table\" role=\"presentation\">\n  <tr class=\"calendar-row weekdays\">\n    <th *ngFor=\"let day of localeDays\" class=\"calendar-cell weekday\">\n      <span [attr.aria-label]=\"day.day\">{{day.narrow}}</span>\n    </th>\n  </tr>\n  <tr class=\"calendar-row\" *ngFor=\"let row of calendarViewModel.calendarView\">\n    <td *ngFor=\"let dayView of row\" class=\"calendar-cell\">\n      <clr-day [clrDayView]=\"dayView\" (selectDay)=\"setSelectedDay($event)\" aria-hidden=\"true\"></clr-day>\n    </td>\n  </tr>\n</table>\n" }]
+        }], ctorParameters: function () { return [{ type: LocaleHelperService }, { type: DateNavigationService }, { type: DatepickerFocusService }, { type: DateIOService }, { type: i0.ElementRef }, { type: DateFormControlService }, { type: ClrPopoverToggleService }]; }, propDecorators: { onKeyDown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
             }] } });
@@ -11571,6 +11618,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
             args: [{ selector: 'clr-daypicker', host: { '[class.daypicker]': 'true', role: 'application' }, template: "<div class=\"clr-sr-only\">{{commonStrings.keys.modalContentStart}}</div>\n<div class=\"calendar-header\">\n  <div class=\"calendar-pickers\">\n    <button\n      class=\"calendar-btn monthpicker-trigger\"\n      type=\"button\"\n      (click)=\"changeToMonthView()\"\n      [attr.aria-label]=\"monthAttrString\"\n      [attr.title]=\"monthAttrString\"\n    >\n      {{calendarMonth}}\n    </button>\n    <button\n      class=\"calendar-btn yearpicker-trigger\"\n      type=\"button\"\n      (click)=\"changeToYearView()\"\n      [attr.aria-label]=\"yearAttrString\"\n      [attr.title]=\"yearAttrString\"\n    >\n      {{calendarYear}}\n    </button>\n  </div>\n  <div class=\"calendar-switchers\">\n    <button\n      class=\"calendar-btn switcher\"\n      type=\"button\"\n      (click)=\"previousMonth()\"\n      [attr.aria-label]=\"commonStrings.keys.datepickerPreviousMonth\"\n    >\n      <cds-icon shape=\"angle\" direction=\"left\" [attr.title]=\"commonStrings.keys.datepickerPreviousMonth\"></cds-icon>\n    </button>\n    <button\n      class=\"calendar-btn switcher\"\n      type=\"button\"\n      (click)=\"currentMonth()\"\n      [attr.aria-label]=\"commonStrings.keys.datepickerCurrentMonth\"\n    >\n      <cds-icon shape=\"event\" [attr.title]=\"commonStrings.keys.datepickerCurrentMonth\"></cds-icon>\n    </button>\n    <button\n      class=\"calendar-btn switcher\"\n      type=\"button\"\n      (click)=\"nextMonth()\"\n      [attr.aria-label]=\"commonStrings.keys.datepickerNextMonth\"\n    >\n      <cds-icon shape=\"angle\" direction=\"right\" [attr.title]=\"commonStrings.keys.datepickerNextMonth\"></cds-icon>\n    </button>\n  </div>\n</div>\n<clr-calendar></clr-calendar>\n<div class=\"clr-sr-only\">{{commonStrings.keys.modalContentEnd}}</div>\n" }]
         }], ctorParameters: function () { return [{ type: ViewManagerService }, { type: DateNavigationService }, { type: LocaleHelperService }, { type: ClrCommonStringsService }]; } });
 
+/*
+ * 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.
+ */
+class ClrDatepickerActions {
+    constructor(commonStrings, toggleService, dateNavigationService, dateFormControlService) {
+        this.commonStrings = commonStrings;
+        this.toggleService = toggleService;
+        this.dateNavigationService = dateNavigationService;
+        this.dateFormControlService = dateFormControlService;
+    }
+    apply() {
+        if (this.dateNavigationService.selectedDay) {
+            this.dateNavigationService.notifySelectedDayChanged(this.dateNavigationService.selectedDay);
+            this.dateFormControlService.markAsDirty();
+        }
+        this.toggleService.open = false;
+    }
+    cancel() {
+        this.dateNavigationService.resetSelectedDay();
+        this.toggleService.open = false;
+    }
+}
+ClrDatepickerActions.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatepickerActions, deps: [{ token: ClrCommonStringsService }, { token: ClrPopoverToggleService }, { token: DateNavigationService }, { token: DateFormControlService }], target: i0.ɵɵFactoryTarget.Component });
+ClrDatepickerActions.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrDatepickerActions, selector: "clr-datepicker-actions", host: { properties: { "class.datepicker-actions": "true" } }, ngImport: i0, template: `
+    <button class="btn btn-outline" (click)="cancel()">{{ commonStrings.keys.cancel }}</button>
+    <button class="btn btn-primary" (click)="apply()">{{ commonStrings.keys.apply }}</button>
+  `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatepickerActions, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clr-datepicker-actions',
+                    template: `
+    <button class="btn btn-outline" (click)="cancel()">{{ commonStrings.keys.cancel }}</button>
+    <button class="btn btn-primary" (click)="apply()">{{ commonStrings.keys.apply }}</button>
+  `,
+                    host: {
+                        '[class.datepicker-actions]': 'true',
+                    },
+                }]
+        }], ctorParameters: function () { return [{ type: ClrCommonStringsService }, { type: ClrPopoverToggleService }, { type: DateNavigationService }, { type: DateFormControlService }]; } });
+
 /*
  * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
  * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
@@ -11578,9 +11669,10 @@ 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 ClrDatepickerViewManager {
-    constructor(commonStrings, viewManagerService) {
+    constructor(commonStrings, viewManagerService, dateNavigationService) {
         this.commonStrings = commonStrings;
         this.viewManagerService = viewManagerService;
+        this.dateNavigationService = dateNavigationService;
     }
     /**
      * Returns if the current view is the monthpicker.
@@ -11600,18 +11692,22 @@ class ClrDatepickerViewManager {
     get isDayView() {
         return this.viewManagerService.isDayView;
     }
+    get hasActionButtons() {
+        return this.dateNavigationService.hasActionButtons;
+    }
 }
-ClrDatepickerViewManager.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatepickerViewManager, deps: [{ token: ClrCommonStringsService }, { token: ViewManagerService }], target: i0.ɵɵFactoryTarget.Component });
-ClrDatepickerViewManager.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrDatepickerViewManager, selector: "clr-datepicker-view-manager", host: { attributes: { "role": "dialog" }, properties: { "class.datepicker": "true", "attr.aria-modal": "true", "attr.aria-label": "commonStrings.keys.datepickerDialogLabel" } }, providers: [DatepickerFocusService], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2024 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n-->\n\n<clr-monthpicker *ngIf=\"isMonthView\"></clr-monthpicker>\n<clr-yearpicker *ngIf=\"isYearView\"></clr-yearpicker>\n<clr-daypicker *ngIf=\"isDayView\"></clr-daypicker>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ClrMonthpicker, selector: "clr-monthpicker" }, { kind: "component", type: ClrYearpicker, selector: "clr-yearpicker" }, { kind: "component", type: ClrDaypicker, selector: "clr-daypicker" }] });
+ClrDatepickerViewManager.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatepickerViewManager, deps: [{ token: ClrCommonStringsService }, { token: ViewManagerService }, { token: DateNavigationService }], target: i0.ɵɵFactoryTarget.Component });
+ClrDatepickerViewManager.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrDatepickerViewManager, selector: "clr-datepicker-view-manager", host: { attributes: { "role": "dialog" }, properties: { "class.datepicker": "true", "class.has-action-buttons": "hasActionButtons", "attr.aria-modal": "true", "attr.aria-label": "commonStrings.keys.datepickerDialogLabel" } }, providers: [DatepickerFocusService], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2024 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n-->\n\n<clr-monthpicker *ngIf=\"isMonthView\"></clr-monthpicker>\n<clr-yearpicker *ngIf=\"isYearView\"></clr-yearpicker>\n<clr-daypicker *ngIf=\"isDayView\"></clr-daypicker>\n<clr-datepicker-actions *ngIf=\"hasActionButtons\"></clr-datepicker-actions>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ClrMonthpicker, selector: "clr-monthpicker" }, { kind: "component", type: ClrYearpicker, selector: "clr-yearpicker" }, { kind: "component", type: ClrDaypicker, selector: "clr-daypicker" }, { kind: "component", type: ClrDatepickerActions, selector: "clr-datepicker-actions" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatepickerViewManager, decorators: [{
             type: Component,
             args: [{ selector: 'clr-datepicker-view-manager', providers: [DatepickerFocusService], host: {
                         '[class.datepicker]': 'true',
+                        '[class.has-action-buttons]': 'hasActionButtons',
                         '[attr.aria-modal]': 'true',
                         '[attr.aria-label]': 'commonStrings.keys.datepickerDialogLabel',
                         role: 'dialog',
-                    }, template: "<!--\n  ~ Copyright (c) 2016-2024 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n-->\n\n<clr-monthpicker *ngIf=\"isMonthView\"></clr-monthpicker>\n<clr-yearpicker *ngIf=\"isYearView\"></clr-yearpicker>\n<clr-daypicker *ngIf=\"isDayView\"></clr-daypicker>\n" }]
-        }], ctorParameters: function () { return [{ type: ClrCommonStringsService }, { type: ViewManagerService }]; } });
+                    }, template: "<!--\n  ~ Copyright (c) 2016-2024 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n-->\n\n<clr-monthpicker *ngIf=\"isMonthView\"></clr-monthpicker>\n<clr-yearpicker *ngIf=\"isYearView\"></clr-yearpicker>\n<clr-daypicker *ngIf=\"isDayView\"></clr-daypicker>\n<clr-datepicker-actions *ngIf=\"hasActionButtons\"></clr-datepicker-actions>\n" }]
+        }], ctorParameters: function () { return [{ type: ClrCommonStringsService }, { type: ViewManagerService }, { type: DateNavigationService }]; } });
 
 /*
  * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
@@ -11642,6 +11738,9 @@ class ClrDateContainer extends ClrAbstractContainer {
             dateFormControlService.markAsTouched();
         }));
     }
+    set showActionButtons(flag) {
+        this.dateNavigationService.hasActionButtons = flag;
+    }
     set clrPosition(position) {
         if (position && ClrPopoverPositions[position]) {
             this.viewManagerService.position = ClrPopoverPositions[position];
@@ -11676,6 +11775,7 @@ class ClrDateContainer extends ClrAbstractContainer {
             }
             else {
                 this.toggleButton.nativeElement.focus();
+                this.dateNavigationService.resetSelectedDay();
             }
         }));
         this.subscriptions.push(this.listenForDateChanges());
@@ -11716,7 +11816,7 @@ class ClrDateContainer extends ClrAbstractContainer {
     }
 }
 ClrDateContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDateContainer, deps: [{ token: i0.Renderer2 }, { token: ClrPopoverToggleService }, { token: DateNavigationService }, { token: DatepickerEnabledService }, { token: DateFormControlService }, { token: DateIOService }, { token: ClrCommonStringsService }, { token: FocusService }, { token: ViewManagerService }, { token: ControlClassService }, { token: LayoutService, optional: true }, { token: NgControlService }, { token: IfControlStateService }], target: i0.ɵɵFactoryTarget.Component });
-ClrDateContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrDateContainer, selector: "clr-date-container", inputs: { clrPosition: "clrPosition" }, host: { properties: { "class.clr-date-container": "true", "class.clr-form-control-disabled": "isInputDateDisabled", "class.clr-form-control": "true", "class.clr-row": "addGrid()" } }, providers: [
+ClrDateContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrDateContainer, selector: "clr-date-container", inputs: { showActionButtons: "showActionButtons", clrPosition: "clrPosition" }, host: { properties: { "class.clr-date-container": "true", "class.clr-form-control-disabled": "isInputDateDisabled", "class.clr-form-control": "true", "class.clr-row": "addGrid()" } }, providers: [
         ControlIdService,
         LocaleHelperService,
         ControlClassService,
@@ -11841,7 +11941,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
         return [{ type: i0.Renderer2 }, { type: ClrPopoverToggleService }, { type: DateNavigationService }, { type: DatepickerEnabledService }, { type: DateFormControlService }, { type: DateIOService }, { type: ClrCommonStringsService }, { type: FocusService }, { type: ViewManagerService }, { type: ControlClassService }, { type: LayoutService, decorators: [{
                         type: Optional
                     }] }, { type: NgControlService }, { type: IfControlStateService }];
-    }, propDecorators: { clrPosition: [{
+    }, propDecorators: { showActionButtons: [{
+                type: Input,
+                args: ['showActionButtons']
+            }], clrPosition: [{
                 type: Input,
                 args: ['clrPosition']
             }], actionButton: [{
@@ -11989,7 +12092,7 @@ class ClrDateInput extends WrappedFormControl {
             this.previousDateChange = date;
         }
         if (this.dateNavigationService) {
-            this.dateNavigationService.selectedDay = date
+            this.dateNavigationService.persistedDate = this.dateNavigationService.selectedDay = date
                 ? new DayModel(date.getFullYear(), date.getMonth(), date.getDate())
                 : null;
         }
@@ -12038,7 +12141,7 @@ class ClrDateInput extends WrappedFormControl {
     }
     listenForControlValueChanges() {
         return of(this.datepickerHasFormControl())
-            .pipe(filter(hasControl => hasControl), switchMap(() => this.control.valueChanges), 
+            .pipe(filter(hasControl => hasControl), switchMap$1(() => this.control.valueChanges), 
         // only update date value if not being set by user
         filter(() => !this.datepickerFocusService.elementIsFocused(this.el.nativeElement)))
             .subscribe((value) => this.updateDate(this.dateIOService.getDateValueFromDateString(value)));
@@ -12184,6 +12287,7 @@ const CLR_DATEPICKER_DIRECTIVES = [
     ClrYearpicker,
     ClrDaypicker,
     ClrCalendar,
+    ClrDatepickerActions,
 ];
 class ClrDatepickerModule {
     constructor() {
@@ -12199,7 +12303,8 @@ ClrDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
         ClrMonthpicker,
         ClrYearpicker,
         ClrDaypicker,
-        ClrCalendar], imports: [CommonModule,
+        ClrCalendar,
+        ClrDatepickerActions], imports: [CommonModule,
         CdkTrapFocusModule,
         ClrHostWrappingModule,
         ClrConditionalModule,
@@ -12213,7 +12318,8 @@ ClrDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
         ClrMonthpicker,
         ClrYearpicker,
         ClrDaypicker,
-        ClrCalendar] });
+        ClrCalendar,
+        ClrDatepickerActions] });
 ClrDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatepickerModule, imports: [CommonModule,
         CdkTrapFocusModule,
         ClrHostWrappingModule,
@@ -12238,6 +12344,258 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
+/*
+ * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+function buildFileList(files) {
+    const dataTransfer = new DataTransfer();
+    for (const file of files) {
+        dataTransfer.items.add(file);
+    }
+    return dataTransfer.files;
+}
+function selectFiles(fileInputElement, files) {
+    fileInputElement.files = files instanceof FileList ? files : buildFileList(files);
+    fileInputElement.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
+}
+function clearFiles(fileInputElement) {
+    fileInputElement.value = '';
+    fileInputElement.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
+}
+
+/*
+ * 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.
+ */
+const CLR_FILE_MESSAGES_TEMPLATE_CONTEXT = new InjectionToken('ClrFileMessagesTemplateContext');
+class ClrFileInfo {
+}
+ClrFileInfo.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrFileInfo, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrFileInfo.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrFileInfo, selector: "clr-file-info", host: { properties: { "class.clr-subtext": "true" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrFileInfo, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clr-file-info',
+                    template: `<ng-content></ng-content>`,
+                    host: {
+                        '[class.clr-subtext]': 'true',
+                    },
+                }]
+        }] });
+class ClrFileSuccess {
+    constructor() {
+        this.context = inject(CLR_FILE_MESSAGES_TEMPLATE_CONTEXT);
+    }
+}
+ClrFileSuccess.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrFileSuccess, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrFileSuccess.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrFileSuccess, selector: "clr-file-success", host: { properties: { "style.display": "context.success ? \"inline-block\" : \"none\"", "class.clr-subtext": "true", "class.success": "true" } }, ngImport: i0, template: `<ng-content *ngIf="context.success"></ng-content>`, isInline: true, dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrFileSuccess, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clr-file-success',
+                    // We check for success here so that consumers don't have to.
+                    template: `<ng-content *ngIf="context.success"></ng-content>`,
+                    host: {
+                        '[style.display]': 'context.success ? "inline-block" : "none"',
+                        '[class.clr-subtext]': 'true',
+                        '[class.success]': 'true',
+                    },
+                }]
+        }] });
+class ClrFileError {
+}
+ClrFileError.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrFileError, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrFileError.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrFileError, selector: "clr-file-error", host: { properties: { "class.clr-subtext": "true", "class.error": "true" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrFileError, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clr-file-error',
+                    // The host should have an `*ngIf` or `@if` that checks for the relevant error.
+                    template: `<ng-content></ng-content>`,
+                    host: {
+                        '[class.clr-subtext]': 'true',
+                        '[class.error]': 'true',
+                    },
+                }]
+        }] });
+
+/*
+ * 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.
+ */
+class ClrFileMessagesTemplate {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static ngTemplateContextGuard(directive, context) {
+        return true;
+    }
+}
+ClrFileMessagesTemplate.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrFileMessagesTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ClrFileMessagesTemplate.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", type: ClrFileMessagesTemplate, selector: "ng-template[clr-file-messages]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrFileMessagesTemplate, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[clr-file-messages]',
+                }]
+        }] });
+
+/*
+ * 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.
+ */
+class ClrFileList {
+    constructor() {
+        this.injector = inject(Injector);
+        this.commonStrings = inject(ClrCommonStringsService);
+        this.ngControlService = inject(NgControlService, { optional: true });
+        this.fileInputContainer = inject(ClrFileInputContainer, { optional: true });
+        if (!this.ngControlService || !this.fileInputContainer) {
+            throw new Error('The clr-file-list component can only be used within a clr-file-input-container.');
+        }
+    }
+    get files() {
+        if (!this.fileInputContainer.fileInput) {
+            return [];
+        }
+        const fileInputElement = this.fileInputContainer.fileInput.elementRef.nativeElement;
+        return Array.from(fileInputElement.files).sort((a, b) => a.name.localeCompare(b.name));
+    }
+    getClearFileLabel(filename) {
+        return this.commonStrings.parse(this.commonStrings.keys.clearFile, {
+            FILE: filename,
+        });
+    }
+    clearFile(fileToRemove) {
+        if (!this.fileInputContainer.fileInput) {
+            return;
+        }
+        const fileInputElement = this.fileInputContainer.fileInput.elementRef.nativeElement;
+        const files = Array.from(fileInputElement.files);
+        const newFiles = files.filter(file => file !== fileToRemove);
+        selectFiles(fileInputElement, newFiles);
+        this.fileInputContainer.focusBrowseButton();
+    }
+    createFileMessagesTemplateContext(file) {
+        var _a, _b, _c;
+        const fileInputErrors = this.ngControlService.control.errors || {};
+        const errors = {
+            accept: (_a = fileInputErrors.accept) === null || _a === void 0 ? void 0 : _a.find(error => error.name === file.name),
+            minFileSize: (_b = fileInputErrors.minFileSize) === null || _b === void 0 ? void 0 : _b.find(error => error.name === file.name),
+            maxFileSize: (_c = fileInputErrors.maxFileSize) === null || _c === void 0 ? void 0 : _c.find(error => error.name === file.name),
+        };
+        const success = Object.values(errors).every(error => !error);
+        return { $implicit: file, success, errors };
+    }
+    createFileMessagesTemplateInjector(fileMessagesTemplateContext) {
+        return Injector.create({
+            parent: this.injector,
+            providers: [{ provide: CLR_FILE_MESSAGES_TEMPLATE_CONTEXT, useValue: fileMessagesTemplateContext }],
+        });
+    }
+}
+ClrFileList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrFileList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ClrFileList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrFileList, selector: "clr-file-list", host: { properties: { "attr.role": "\"list\"", "class.clr-file-list": "true" } }, queries: [{ propertyName: "fileMessagesTemplate", first: true, predicate: ClrFileMessagesTemplate, descendants: true }], ngImport: i0, template: `
+    <ng-container *ngFor="let file of files">
+      <div
+        *ngIf="createFileMessagesTemplateContext(file); let fileMessagesTemplateContext"
+        role="listitem"
+        class="clr-file-list-item"
+        [ngClass]="{
+          'clr-error': !fileMessagesTemplateContext.success,
+          'clr-success': fileMessagesTemplateContext.success
+        }"
+      >
+        <div class="clr-file-label-and-status-icon">
+          <span class="label clr-file-label">
+            {{ file.name }}
+            <button
+              class="btn btn-sm btn-link-neutral btn-icon clr-file-clear-button"
+              [attr.aria-label]="getClearFileLabel(file.name)"
+              (click)="clearFile(file)"
+            >
+              <cds-icon shape="times"></cds-icon>
+            </button>
+          </span>
+
+          <cds-icon
+            class="clr-validate-icon"
+            [attr.shape]="fileMessagesTemplateContext.success ? 'check-circle' : 'exclamation-circle'"
+            [attr.status]="fileMessagesTemplateContext.success ? 'success' : 'danger'"
+            aria-hidden="true"
+          ></cds-icon>
+        </div>
+
+        <ng-container
+          [ngTemplateOutlet]="fileMessagesTemplate.templateRef"
+          [ngTemplateOutletContext]="fileMessagesTemplateContext"
+          [ngTemplateOutletInjector]="createFileMessagesTemplateInjector(fileMessagesTemplateContext)"
+        ></ng-container>
+      </div>
+    </ng-container>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: ClrFileList, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clr-file-list',
+                    template: `
+    <ng-container *ngFor="let file of files">
+      <div
+        *ngIf="createFileMessagesTemplateContext(file); let fileMessagesTemplateContext"
+        role="listitem"
+        class="clr-file-list-item"
+        [ngClass]="{
+          'clr-error': !fileMessagesTemplateContext.success,
+          'clr-success': fileMessagesTemplateContext.success
+        }"
+      >
+        <div class="clr-file-label-and-status-icon">
+          <span class="label clr-file-label">
+            {{ file.name }}
+            <button
+              class="btn btn-sm btn-link-neutral btn-icon clr-file-clear-button"
+              [attr.aria-label]="getClearFileLabel(file.name)"
+              (click)="clearFile(file)"
+            >
+              <cds-icon shape="times"></cds-icon>
+            </button>
+          </span>
+
+          <cds-icon
+            class="clr-validate-icon"
+            [attr.shape]="fileMessagesTemplateContext.success ? 'check-circle' : 'exclamation-circle'"
+            [attr.status]="fileMessagesTemplateContext.success ? 'success' : 'danger'"
+            aria-hidden="true"
+          ></cds-icon>
+        </div>
+
+        <ng-container
+          [ngTemplateOutlet]="fileMessagesTemplate.templateRef"
+          [ngTemplateOutletContext]="fileMessagesTemplateContext"
+          [ngTemplateOutletInjector]="createFileMessagesTemplateInjector(fileMessagesTemplateContext)"
+        ></ng-container>
+      </div>
+    </ng-container>
+  `,
+                    host: {
+                        '[attr.role]': '"list"',
+                        '[class.clr-file-list]': 'true',
+                    },
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { fileMessagesTemplate: [{
+                type: ContentChild,
+                args: [ClrFileMessagesTemplate]
+            }] } });
+
 /*
  * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
  * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
@@ -12249,29 +12607,80 @@ class ClrFileInputContainer extends ClrAbstractContainer {
         super(...arguments);
         this.commonStrings = inject(ClrCommonStringsService);
     }
+    get accept() {
+        return this.fileInput.elementRef.nativeElement.accept;
+    }
+    get multiple() {
+        return this.fileInput.elementRef.nativeElement.multiple;
+    }
     get disabled() {
         return this.fileInput.elementRef.nativeElement.disabled;
     }
+    get browseButtonText() {
+        var _a, _b;
+        const selectionButtonLabel = this.fileList ? undefined : (_b = (_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.selection) === null || _b === void 0 ? void 0 : _b.buttonLabel;
+        return selectionButtonLabel || this.customButtonLabel || this.commonStrings.keys.browse;
+    }
     get browseButtonDescribedBy() {
         var _a;
-        return `${(_a = this.label) === null || _a === void 0 ? void 0 : _a.idAttr} ${this.fileInput.elementRef.nativeElement.getAttribute('aria-describedby')}`;
+        return `${(_a = this.label) === null || _a === void 0 ? void 0 : _a.forAttr} ${this.fileInput.elementRef.nativeElement.getAttribute('aria-describedby')}`;
+    }
+    get successMessagePresent() {
+        return super.successMessagePresent || !!this.fileSuccessComponent;
+    }
+    get errorMessagePresent() {
+        return super.errorMessagePresent || !!this.fileErrorComponent;
+    }
+    focusBrowseButton() {
+        this.browseButtonElementRef.nativeElement.focus();
     }
     browse() {
-        this.fileInput.elementRef.nativeElement.click();
+        const fileInputElementRef = this.fileList && this.multiple ? this.fileListFileInputElementRef : this.fileInput.elementRef;
+        fileInputElementRef.nativeElement.click();
     }
     clearSelectedFiles() {
         this.fileInput.elementRef.nativeElement.value = '';
         this.fileInput.elementRef.nativeElement.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
-        this.browseButtonElementRef.nativeElement.focus();
+        this.focusBrowseButton();
+    }
+    addFilesToSelection(newFiles) {
+        if (!newFiles.length) {
+            return;
+        }
+        // start with new files
+        const mergedFiles = [...newFiles];
+        // add existing files if a new file doesn't have the same name
+        for (const existingFile of this.fileInput.elementRef.nativeElement.files) {
+            if (!mergedFiles.some(file => file.name === existingFile.name)) {
+                mergedFiles.push(existingFile);
+            }
+        }
+        // update file selection
+        selectFiles(this.fileInput.elementRef.nativeElement, mergedFiles);
     }
 }
 ClrFileInputContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrFileInputContainer, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ClrFileInputContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrFileInputContainer, selector: "clr-file-input-container", inputs: { customButtonLabel: ["clrButtonLabel", "customButtonLabel"] }, host: { properties: { "class.clr-form-control": "true", "class.clr-form-control-disabled": "disabled", "class.clr-row": "addGrid()" } }, providers: [IfControlStateService, NgControlService, ControlIdService, ControlClassService], queries: [{ propertyName: "fileInput", first: true, predicate: i0.forwardRef(function () { return ClrFileInput; }), descendants: true }], viewQueries: [{ propertyName: "browseButtonElementRef", first: true, predicate: ["browseButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+ClrFileInputContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrFileInputContainer, selector: "clr-file-input-container", inputs: { customButtonLabel: ["clrButtonLabel", "customButtonLabel"] }, host: { properties: { "class.clr-form-control": "true", "class.clr-form-control-disabled": "disabled", "class.clr-row": "addGrid()" } }, providers: [IfControlStateService, NgControlService, ControlIdService, ControlClassService], queries: [{ propertyName: "fileInput", first: true, predicate: i0.forwardRef(function () { return ClrFileInput; }), descendants: true }, { propertyName: "fileList", first: true, predicate: i0.forwardRef(function () { return ClrFileList; }), descendants: true }, { propertyName: "fileSuccessComponent", first: true, predicate: ClrFileSuccess, descendants: true }, { propertyName: "fileErrorComponent", first: true, predicate: ClrFileError, descendants: true }], viewQueries: [{ propertyName: "browseButtonElementRef", first: true, predicate: ["browseButton"], descendants: true }, { propertyName: "fileListFileInputElementRef", first: true, predicate: ["fileListFileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
     <ng-content select="label"></ng-content>
     <label *ngIf="!label && addGrid()"></label>
     <div class="clr-control-container" [ngClass]="controlClass()">
       <div class="clr-file-input-wrapper">
         <ng-content select="[clrFileInput]"></ng-content>
+
+        <!-- file input to handle adding new files to selection when file list is present (prevent replacing selected files on the main file input) -->
+        <input
+          *ngIf="fileList"
+          #fileListFileInput
+          type="file"
+          class="clr-file-input"
+          tabindex="-1"
+          aria-hidden="true"
+          [accept]="accept"
+          [multiple]="multiple"
+          [disabled]="disabled"
+          (change)="addFilesToSelection(fileListFileInput.files)"
+        />
+
         <button
           #browseButton
           type="button"
@@ -12281,12 +12690,10 @@ ClrFileInputContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
           (click)="browse()"
         >
           <cds-icon shape="folder-open"></cds-icon>
-          <span class="clr-file-input-browse-button-text">
-            {{ fileInput?.selection?.buttonLabel || customButtonLabel || commonStrings.keys.browse }}
-          </span>
+          <span class="clr-file-input-browse-button-text">{{ browseButtonText }}</span>
         </button>
         <button
-          *ngIf="fileInput?.selection?.fileCount"
+          *ngIf="!fileList && fileInput?.selection?.fileCount"
           type="button"
           class="btn btn-sm clr-file-input-clear-button"
           [attr.aria-label]="fileInput?.selection?.clearFilesButtonLabel"
@@ -12312,6 +12719,12 @@ ClrFileInputContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
       <ng-content select="clr-control-helper" *ngIf="showHelper"></ng-content>
       <ng-content select="clr-control-error" *ngIf="showInvalid"></ng-content>
       <ng-content select="clr-control-success" *ngIf="showValid"></ng-content>
+
+      <!-- If this is present, this file input becomes an "advanced" file input. -->
+      <ng-container>
+        <div class="clr-file-list-break"></div>
+        <ng-content select="clr-file-list"></ng-content>
+      </ng-container>
     </div>
   `, isInline: true, 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: "directive", type: ClrLabel, selector: "label", inputs: ["id", "for"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrFileInputContainer, decorators: [{
@@ -12324,6 +12737,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
     <div class="clr-control-container" [ngClass]="controlClass()">
       <div class="clr-file-input-wrapper">
         <ng-content select="[clrFileInput]"></ng-content>
+
+        <!-- file input to handle adding new files to selection when file list is present (prevent replacing selected files on the main file input) -->
+        <input
+          *ngIf="fileList"
+          #fileListFileInput
+          type="file"
+          class="clr-file-input"
+          tabindex="-1"
+          aria-hidden="true"
+          [accept]="accept"
+          [multiple]="multiple"
+          [disabled]="disabled"
+          (change)="addFilesToSelection(fileListFileInput.files)"
+        />
+
         <button
           #browseButton
           type="button"
@@ -12333,12 +12761,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
           (click)="browse()"
         >
           <cds-icon shape="folder-open"></cds-icon>
-          <span class="clr-file-input-browse-button-text">
-            {{ fileInput?.selection?.buttonLabel || customButtonLabel || commonStrings.keys.browse }}
-          </span>
+          <span class="clr-file-input-browse-button-text">{{ browseButtonText }}</span>
         </button>
         <button
-          *ngIf="fileInput?.selection?.fileCount"
+          *ngIf="!fileList && fileInput?.selection?.fileCount"
           type="button"
           class="btn btn-sm clr-file-input-clear-button"
           [attr.aria-label]="fileInput?.selection?.clearFilesButtonLabel"
@@ -12364,6 +12790,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
       <ng-content select="clr-control-helper" *ngIf="showHelper"></ng-content>
       <ng-content select="clr-control-error" *ngIf="showInvalid"></ng-content>
       <ng-content select="clr-control-success" *ngIf="showValid"></ng-content>
+
+      <!-- If this is present, this file input becomes an "advanced" file input. -->
+      <ng-container>
+        <div class="clr-file-list-break"></div>
+        <ng-content select="clr-file-list"></ng-content>
+      </ng-container>
     </div>
   `,
                     host: {
@@ -12379,9 +12811,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
             }], fileInput: [{
                 type: ContentChild,
                 args: [forwardRef(() => ClrFileInput)]
+            }], fileList: [{
+                type: ContentChild,
+                args: [forwardRef(() => ClrFileList)]
             }], browseButtonElementRef: [{
                 type: ViewChild,
                 args: ['browseButton']
+            }], fileListFileInputElementRef: [{
+                type: ViewChild,
+                args: ['fileListFileInput']
+            }], fileSuccessComponent: [{
+                type: ContentChild,
+                args: [ClrFileSuccess]
+            }], fileErrorComponent: [{
+                type: ContentChild,
+                args: [ClrFileError]
             }] } });
 
 /*
@@ -12428,13 +12872,14 @@ class ClrFileInput extends WrappedFormControl {
     }
 }
 ClrFileInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrFileInput, deps: [{ token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i1.NgControl, optional: true, self: true }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Directive });
-ClrFileInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", type: ClrFileInput, selector: "input[type=\"file\"][clrFileInput]", host: { attributes: { "tabindex": "-1" }, listeners: { "change": "handleChange()" }, properties: { "class.clr-file-input": "true" } }, usesInheritance: true, ngImport: i0 });
+ClrFileInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", type: ClrFileInput, selector: "input[type=\"file\"][clrFileInput]", host: { attributes: { "tabindex": "-1", "aria-hidden": "true" }, listeners: { "change": "handleChange()" }, properties: { "class.clr-file-input": "true" } }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrFileInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[type="file"][clrFileInput]',
                     host: {
                         tabindex: '-1',
+                        'aria-hidden': 'true',
                         '[class.clr-file-input]': 'true',
                     },
                 }]
@@ -12467,33 +12912,25 @@ class ClrFileInputValidator {
         if (fileInputElement.required && (files === null || files === void 0 ? void 0 : files.length) === 0) {
             errors.required = true;
         }
-        // accept validation (native attribute)
-        if (fileInputElement.accept && (files === null || files === void 0 ? void 0 : files.length) > 0) {
-            const accept = fileInputElement.accept.split(',').map(type => type.trim());
+        const accept = fileInputElement.accept ? fileInputElement.accept.split(',').map(type => type.trim()) : null;
+        if ((files === null || files === void 0 ? void 0 : files.length) > 0 && (accept || this.minFileSize || this.maxFileSize)) {
             for (let i = 0; i < files.length; i++) {
                 const file = files.item(i);
-                const [fileExtension] = file.name.match(/\..+$/);
-                if (!accept.includes(file.type) && !accept.includes(fileExtension)) {
-                    errors.accept = errors.accept || [];
-                    errors.accept.push({ name: file.name, accept, type: file.type, extension: fileExtension });
+                // accept validation (native attribute)
+                if (accept) {
+                    const [fileExtension] = file.name.match(/\..+$/);
+                    if (!accept.includes(file.type) && !accept.includes(fileExtension)) {
+                        errors.accept = errors.accept || [];
+                        errors.accept.push({ name: file.name, accept, type: file.type, extension: fileExtension });
+                    }
                 }
-            }
-        }
-        // min file validation (custom input)
-        if (this.minFileSize && (files === null || files === void 0 ? void 0 : files.length) > 0) {
-            for (let i = 0; i < files.length; i++) {
-                const file = files.item(i);
-                if (file.size < this.minFileSize) {
+                // min file validation (custom input)
+                if (this.minFileSize && file.size < this.minFileSize) {
                     errors.minFileSize = errors.minFileSize || [];
                     errors.minFileSize.push({ name: file.name, minFileSize: this.minFileSize, actualFileSize: file.size });
                 }
-            }
-        }
-        // max file validation (custom input)
-        if (this.maxFileSize && (files === null || files === void 0 ? void 0 : files.length) > 0) {
-            for (let i = 0; i < files.length; i++) {
-                const file = files.item(i);
-                if (file.size > this.maxFileSize) {
+                // max file validation (custom input)
+                if (this.maxFileSize && file.size > this.maxFileSize) {
                     errors.maxFileSize = errors.maxFileSize || [];
                     errors.maxFileSize.push({ name: file.name, maxFileSize: this.maxFileSize, actualFileSize: file.size });
                 }
@@ -12518,28 +12955,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                 args: ['clrMaxFileSize']
             }] } });
 
-/*
- * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-function buildFileList(files) {
-    const dataTransfer = new DataTransfer();
-    for (const file of files) {
-        dataTransfer.items.add(file);
-    }
-    return dataTransfer.files;
-}
-function selectFiles(fileInputElement, files) {
-    fileInputElement.files = files instanceof FileList ? files : buildFileList(files);
-    fileInputElement.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
-}
-function clearFiles(fileInputElement) {
-    fileInputElement.value = '';
-    fileInputElement.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
-}
-
 /*
  * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
  * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
@@ -12601,23 +13016,51 @@ class ClrFileInputModule {
     }
 }
 ClrFileInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrFileInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ClrFileInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.2", ngImport: i0, type: ClrFileInputModule, declarations: [ClrFileInput, ClrFileInputContainer, ClrFileInputValidator, ClrFileInputValueAccessor], imports: [CommonModule, ClrIconModule, ClrCommonFormsModule], exports: [ClrCommonFormsModule,
+ClrFileInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.2", ngImport: i0, type: ClrFileInputModule, declarations: [ClrFileInput,
+        ClrFileInputContainer,
+        ClrFileInputValidator,
+        ClrFileInputValueAccessor,
+        ClrFileList,
+        ClrFileMessagesTemplate,
+        ClrFileInfo,
+        ClrFileSuccess,
+        ClrFileError], imports: [CommonModule, ClrIconModule, ClrCommonFormsModule], exports: [ClrCommonFormsModule,
         ClrFileInput,
         ClrFileInputContainer,
         ClrFileInputValidator,
-        ClrFileInputValueAccessor] });
+        ClrFileInputValueAccessor,
+        ClrFileList,
+        ClrFileMessagesTemplate,
+        ClrFileInfo,
+        ClrFileSuccess,
+        ClrFileError] });
 ClrFileInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrFileInputModule, imports: [CommonModule, ClrIconModule, ClrCommonFormsModule, ClrCommonFormsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrFileInputModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ClrIconModule, ClrCommonFormsModule],
-                    declarations: [ClrFileInput, ClrFileInputContainer, ClrFileInputValidator, ClrFileInputValueAccessor],
+                    declarations: [
+                        ClrFileInput,
+                        ClrFileInputContainer,
+                        ClrFileInputValidator,
+                        ClrFileInputValueAccessor,
+                        ClrFileList,
+                        ClrFileMessagesTemplate,
+                        ClrFileInfo,
+                        ClrFileSuccess,
+                        ClrFileError,
+                    ],
                     exports: [
                         ClrCommonFormsModule,
                         ClrFileInput,
                         ClrFileInputContainer,
                         ClrFileInputValidator,
                         ClrFileInputValueAccessor,
+                        ClrFileList,
+                        ClrFileMessagesTemplate,
+                        ClrFileInfo,
+                        ClrFileSuccess,
+                        ClrFileError,
                     ],
                 }]
         }], ctorParameters: function () { return []; } });
@@ -12629,6 +13072,227 @@ 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.
  */
 
+/*
+ * 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.
+ */
+class ClrNumberInputContainer extends ClrAbstractContainer {
+    constructor(controlClassService, layoutService, ngControlService, focusService, ifControlStateService) {
+        super(ifControlStateService, layoutService, controlClassService, ngControlService);
+        this.ifControlStateService = ifControlStateService;
+        this.focus = false;
+        this.subscriptions.push(focusService.focusChange.subscribe(state => (this.focus = state)));
+    }
+}
+ClrNumberInputContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrNumberInputContainer, deps: [{ token: ControlClassService }, { token: LayoutService, optional: true }, { token: NgControlService }, { token: FocusService }, { token: IfControlStateService }], target: i0.ɵɵFactoryTarget.Component });
+ClrNumberInputContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrNumberInputContainer, selector: "clr-number-input-container", host: { properties: { "class.clr-form-control": "true", "class.clr-form-control-disabled": "control?.disabled", "class.clr-form-control-readonly": "input.readonly", "class.clr-row": "addGrid()" } }, providers: [FocusService, IfControlStateService, NgControlService, ControlIdService, ControlClassService], queries: [{ propertyName: "input", first: true, predicate: i0.forwardRef(function () { return ClrNumberInput; }), descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    <ng-content select="label"></ng-content>
+    <label *ngIf="!label && addGrid()"></label>
+    <div class="clr-control-container" [ngClass]="controlClass()">
+      <div class="clr-number-input-wrapper">
+        <div class="clr-input-group" [class.clr-focus]="focus">
+          <ng-content select="[clrNumberInput]"></ng-content>
+          <div class="clr-input-group-actions">
+            <button
+              type="button"
+              class="clr-input-group-icon-action"
+              (click)="input.stepDown()"
+              [disabled]="control?.disabled"
+            >
+              <cds-icon shape="minus" size="sm"></cds-icon>
+            </button>
+            <div class="clr-number-input-separator"></div>
+            <button
+              type="button"
+              class="clr-input-group-icon-action"
+              (click)="input.stepUp()"
+              [disabled]="control?.disabled"
+            >
+              <cds-icon shape="plus" size="sm"></cds-icon>
+            </button>
+          </div>
+        </div>
+        <cds-icon
+          *ngIf="showInvalid"
+          class="clr-validate-icon"
+          shape="exclamation-circle"
+          status="danger"
+          aria-hidden="true"
+        ></cds-icon>
+        <cds-icon
+          *ngIf="showValid"
+          class="clr-validate-icon"
+          shape="check-circle"
+          status="success"
+          aria-hidden="true"
+        ></cds-icon>
+      </div>
+      <ng-content select="clr-control-helper" *ngIf="showHelper"></ng-content>
+      <ng-content select="clr-control-error" *ngIf="showInvalid"></ng-content>
+      <ng-content select="clr-control-success" *ngIf="showValid"></ng-content>
+    </div>
+  `, isInline: true, 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: "directive", type: ClrLabel, selector: "label", inputs: ["id", "for"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrNumberInputContainer, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clr-number-input-container',
+                    template: `
+    <ng-content select="label"></ng-content>
+    <label *ngIf="!label && addGrid()"></label>
+    <div class="clr-control-container" [ngClass]="controlClass()">
+      <div class="clr-number-input-wrapper">
+        <div class="clr-input-group" [class.clr-focus]="focus">
+          <ng-content select="[clrNumberInput]"></ng-content>
+          <div class="clr-input-group-actions">
+            <button
+              type="button"
+              class="clr-input-group-icon-action"
+              (click)="input.stepDown()"
+              [disabled]="control?.disabled"
+            >
+              <cds-icon shape="minus" size="sm"></cds-icon>
+            </button>
+            <div class="clr-number-input-separator"></div>
+            <button
+              type="button"
+              class="clr-input-group-icon-action"
+              (click)="input.stepUp()"
+              [disabled]="control?.disabled"
+            >
+              <cds-icon shape="plus" size="sm"></cds-icon>
+            </button>
+          </div>
+        </div>
+        <cds-icon
+          *ngIf="showInvalid"
+          class="clr-validate-icon"
+          shape="exclamation-circle"
+          status="danger"
+          aria-hidden="true"
+        ></cds-icon>
+        <cds-icon
+          *ngIf="showValid"
+          class="clr-validate-icon"
+          shape="check-circle"
+          status="success"
+          aria-hidden="true"
+        ></cds-icon>
+      </div>
+      <ng-content select="clr-control-helper" *ngIf="showHelper"></ng-content>
+      <ng-content select="clr-control-error" *ngIf="showInvalid"></ng-content>
+      <ng-content select="clr-control-success" *ngIf="showValid"></ng-content>
+    </div>
+  `,
+                    host: {
+                        '[class.clr-form-control]': 'true',
+                        '[class.clr-form-control-disabled]': 'control?.disabled',
+                        '[class.clr-form-control-readonly]': 'input.readonly',
+                        '[class.clr-row]': 'addGrid()',
+                    },
+                    providers: [FocusService, IfControlStateService, NgControlService, ControlIdService, ControlClassService],
+                }]
+        }], ctorParameters: function () {
+        return [{ type: ControlClassService }, { type: LayoutService, decorators: [{
+                        type: Optional
+                    }] }, { type: NgControlService }, { type: FocusService }, { type: IfControlStateService }];
+    }, propDecorators: { input: [{
+                type: ContentChild,
+                args: [forwardRef(() => ClrNumberInput)]
+            }] } });
+
+/*
+ * 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.
+ */
+class ClrNumberInput extends WrappedFormControl {
+    constructor(focusService, vcr, injector, control, renderer, el) {
+        super(vcr, ClrNumberInputContainer, injector, control, renderer, el);
+        this.focusService = focusService;
+        this.control = control;
+        this.el = el;
+        this.index = 1;
+        if (!focusService) {
+            throw new Error('clrNumberInput requires being wrapped in <clr-number-input-container>');
+        }
+    }
+    get readonly() {
+        return this.el.nativeElement.getAttribute('readonly') !== null;
+    }
+    triggerFocus() {
+        if (!this.readonly && this.focusService) {
+            this.focusService.focused = true;
+        }
+    }
+    triggerValidation() {
+        if (!this.readonly) {
+            super.triggerValidation();
+            if (this.focusService) {
+                this.focusService.focused = false;
+            }
+        }
+    }
+    stepUp() {
+        this.el.nativeElement.stepUp();
+        this.el.nativeElement.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
+        this.control.control.markAllAsTouched();
+    }
+    stepDown() {
+        this.el.nativeElement.stepDown();
+        this.el.nativeElement.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
+        this.control.control.markAllAsTouched();
+    }
+}
+ClrNumberInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrNumberInput, deps: [{ token: FocusService, optional: true }, { token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i1.NgControl, optional: true, self: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ClrNumberInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", type: ClrNumberInput, selector: "input[type=\"number\"][clrNumberInput]", host: { listeners: { "focus": "triggerFocus()", "blur": "triggerValidation()" }, properties: { "class.clr-input": "true", "class.clr-number-input": "true" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrNumberInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[type="number"][clrNumberInput]',
+                    host: { '[class.clr-input]': 'true', '[class.clr-number-input]': 'true' },
+                }]
+        }], ctorParameters: function () {
+        return [{ type: FocusService, decorators: [{
+                        type: Optional
+                    }] }, { type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i1.NgControl, decorators: [{
+                        type: Self
+                    }, {
+                        type: Optional
+                    }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }];
+    }, propDecorators: { triggerFocus: [{
+                type: HostListener,
+                args: ['focus']
+            }], triggerValidation: [{
+                type: HostListener,
+                args: ['blur']
+            }] } });
+
+/*
+ * 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.
+ */
+class ClrNumberInputModule {
+    constructor() {
+        ClarityIcons.addIcons(exclamationCircleIcon, checkCircleIcon);
+    }
+}
+ClrNumberInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrNumberInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ClrNumberInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.2", ngImport: i0, type: ClrNumberInputModule, declarations: [ClrNumberInput, ClrNumberInputContainer], imports: [CommonModule, FormsModule, ClrIconModule, ClrCommonFormsModule], exports: [ClrCommonFormsModule, ClrNumberInput, ClrNumberInputContainer] });
+ClrNumberInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrNumberInputModule, imports: [CommonModule, FormsModule, ClrIconModule, ClrCommonFormsModule, ClrCommonFormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrNumberInputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, FormsModule, ClrIconModule, ClrCommonFormsModule],
+                    declarations: [ClrNumberInput, ClrNumberInputContainer],
+                    exports: [ClrCommonFormsModule, ClrNumberInput, ClrNumberInputContainer],
+                }]
+        }], ctorParameters: function () { return []; } });
+
 /*
  * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
  * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
@@ -13581,7 +14245,8 @@ ClrFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         ClrSelectModule,
         ClrTextareaModule,
         ClrRangeModule,
-        ClrDatalistModule] });
+        ClrDatalistModule,
+        ClrNumberInputModule] });
 ClrFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrFormsModule, imports: [CommonModule, ClrCommonFormsModule,
         ClrCheckboxModule,
         ClrComboboxModule,
@@ -13593,7 +14258,8 @@ ClrFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
         ClrSelectModule,
         ClrTextareaModule,
         ClrRangeModule,
-        ClrDatalistModule] });
+        ClrDatalistModule,
+        ClrNumberInputModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrFormsModule, decorators: [{
             type: NgModule,
             args: [{
@@ -13611,6 +14277,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                         ClrTextareaModule,
                         ClrRangeModule,
                         ClrDatalistModule,
+                        ClrNumberInputModule,
                     ],
                 }]
         }] });
@@ -14789,10 +15456,10 @@ DatagridNumericFilter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", ve
 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">
       <div class="datagrid-numeric-filter-form">
-        <div class="clr-form-control">
+        <clr-number-input-container>
           <label class="clr-control-label">{{ fromLabelValue }}</label>
           <input
-            clrInput
+            clrNumberInput
             class="datagrid-numeric-filter-input"
             #input_low
             type="number"
@@ -14802,11 +15469,11 @@ DatagridNumericFilter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             [placeholder]="minPlaceholderValue"
             [attr.aria-label]="minPlaceholderValue"
           />
-        </div>
-        <div class="clr-form-control">
+        </clr-number-input-container>
+        <clr-number-input-container>
           <label class="clr-control-label">{{ toLabelValue }}</label>
           <input
-            clrInput
+            clrNumberInput
             class="datagrid-numeric-filter-input"
             #input_high
             type="number"
@@ -14816,10 +15483,10 @@ DatagridNumericFilter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             [placeholder]="maxPlaceholderValue"
             [attr.aria-label]="maxPlaceholderValue"
           />
-        </div>
+        </clr-number-input-container>
       </div>
     </clr-dg-filter>
-  `, isInline: true, dependencies: [{ kind: "directive", type: ClrLabel, selector: "label", inputs: ["id", "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"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ClrLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: ClrNumberInput, selector: "input[type=\"number\"][clrNumberInput]" }, { kind: "component", type: ClrNumberInputContainer, selector: "clr-number-input-container" }, { 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: [{
@@ -14828,10 +15495,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                     template: `
     <clr-dg-filter [clrDgFilter]="registered" [(clrDgFilterOpen)]="open">
       <div class="datagrid-numeric-filter-form">
-        <div class="clr-form-control">
+        <clr-number-input-container>
           <label class="clr-control-label">{{ fromLabelValue }}</label>
           <input
-            clrInput
+            clrNumberInput
             class="datagrid-numeric-filter-input"
             #input_low
             type="number"
@@ -14841,11 +15508,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
             [placeholder]="minPlaceholderValue"
             [attr.aria-label]="minPlaceholderValue"
           />
-        </div>
-        <div class="clr-form-control">
+        </clr-number-input-container>
+        <clr-number-input-container>
           <label class="clr-control-label">{{ toLabelValue }}</label>
           <input
-            clrInput
+            clrNumberInput
             class="datagrid-numeric-filter-input"
             #input_high
             type="number"
@@ -14855,7 +15522,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
             [placeholder]="maxPlaceholderValue"
             [attr.aria-label]="maxPlaceholderValue"
           />
-        </div>
+        </clr-number-input-container>
       </div>
     </clr-dg-filter>
   `,
@@ -15002,17 +15669,20 @@ class DatagridStringFilterImpl {
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class DatagridStringFilter extends DatagridFilterRegistrar {
-    constructor(filters, domAdapter, commonStrings, smartToggleService, ngZone) {
+    constructor(filters, domAdapter, commonStrings, smartToggleService, elementRef, cdr, ngZone) {
         super(filters);
         this.domAdapter = domAdapter;
         this.commonStrings = commonStrings;
         this.smartToggleService = smartToggleService;
+        this.elementRef = elementRef;
+        this.cdr = cdr;
         this.ngZone = ngZone;
         this.filterValueChange = new EventEmitter();
         /**
          * Indicates if the filter dropdown is open
          */
         this.open = false;
+        this.labelValue = '';
         this.subs = [];
     }
     /**
@@ -15072,26 +15742,50 @@ class DatagridStringFilter extends DatagridFilterRegistrar {
             });
         }));
     }
+    ngOnChanges() {
+        setTimeout(() => {
+            this.setFilterLabel();
+            this.cdr.markForCheck();
+        });
+    }
     ngOnDestroy() {
         super.ngOnDestroy();
         this.subs.forEach(sub => sub.unsubscribe());
     }
+    /**
+     * This is not in a getter to prevent "expression has changed after it was checked" errors.
+     */
+    setFilterLabel() {
+        var _a;
+        if (this.label) {
+            this.labelValue = this.label;
+            return;
+        }
+        const columnElement = (_a = this.elementRef.nativeElement) === null || _a === void 0 ? void 0 : _a.closest('clr-dg-column');
+        const columnTitleElement = columnElement === null || columnElement === void 0 ? void 0 : columnElement.querySelector('.datagrid-column-title');
+        this.labelValue = this.commonStrings.parse(this.commonStrings.keys.datagridFilterLabel, {
+            COLUMN: (columnTitleElement === null || columnTitleElement === void 0 ? void 0 : columnTitleElement.textContent.trim()) || '',
+        });
+    }
 }
-DatagridStringFilter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: DatagridStringFilter, deps: [{ token: FiltersProvider }, { token: DomAdapter }, { token: ClrCommonStringsService }, { token: ClrPopoverToggleService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-DatagridStringFilter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: DatagridStringFilter, selector: "clr-dg-string-filter", inputs: { placeholder: ["clrFilterPlaceholder", "placeholder"], customStringFilter: ["clrDgStringFilter", "customStringFilter"], value: ["clrFilterValue", "value"] }, outputs: { filterValueChange: "clrFilterValueChange" }, providers: [{ provide: CustomFilter, useExisting: DatagridStringFilter }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "filterContainer", first: true, predicate: ClrDatagridFilter, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+DatagridStringFilter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: DatagridStringFilter, deps: [{ token: FiltersProvider }, { token: DomAdapter }, { token: ClrCommonStringsService }, { token: ClrPopoverToggleService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+DatagridStringFilter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: DatagridStringFilter, selector: "clr-dg-string-filter", inputs: { placeholder: ["clrFilterPlaceholder", "placeholder"], label: ["clrFilterLabel", "label"], customStringFilter: ["clrDgStringFilter", "customStringFilter"], value: ["clrFilterValue", "value"] }, outputs: { filterValueChange: "clrFilterValueChange" }, providers: [{ provide: CustomFilter, useExisting: DatagridStringFilter }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "filterContainer", first: true, predicate: ClrDatagridFilter, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
     <clr-dg-filter [clrDgFilter]="registered" [(clrDgFilterOpen)]="open">
-      <input
-        #input
-        type="text"
-        autocomplete="off"
-        name="search"
-        [(ngModel)]="value"
-        class="clr-input"
-        [attr.aria-label]="placeholderValue"
-        [placeholder]="placeholderValue"
-      />
+      <clr-input-container>
+        <label>{{ labelValue }}</label>
+        <input
+          #input
+          type="text"
+          autocomplete="off"
+          name="search"
+          [(ngModel)]="value"
+          clrInput
+          [attr.aria-label]="placeholderValue"
+          [placeholder]="placeholderValue"
+        />
+      </clr-input-container>
     </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.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: ["id", "for"] }, { kind: "directive", type: ClrInput, selector: "[clrInput]" }, { kind: "component", type: ClrInputContainer, selector: "clr-input-container" }, { 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.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: DatagridStringFilter, decorators: [{
             type: Component,
             args: [{
@@ -15099,22 +15793,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                     providers: [{ provide: CustomFilter, useExisting: DatagridStringFilter }],
                     template: `
     <clr-dg-filter [clrDgFilter]="registered" [(clrDgFilterOpen)]="open">
-      <input
-        #input
-        type="text"
-        autocomplete="off"
-        name="search"
-        [(ngModel)]="value"
-        class="clr-input"
-        [attr.aria-label]="placeholderValue"
-        [placeholder]="placeholderValue"
-      />
+      <clr-input-container>
+        <label>{{ labelValue }}</label>
+        <input
+          #input
+          type="text"
+          autocomplete="off"
+          name="search"
+          [(ngModel)]="value"
+          clrInput
+          [attr.aria-label]="placeholderValue"
+          [placeholder]="placeholderValue"
+        />
+      </clr-input-container>
     </clr-dg-filter>
   `,
                 }]
-        }], ctorParameters: function () { return [{ type: FiltersProvider }, { type: DomAdapter }, { type: ClrCommonStringsService }, { type: ClrPopoverToggleService }, { type: i0.NgZone }]; }, propDecorators: { placeholder: [{
+        }], ctorParameters: function () { return [{ type: FiltersProvider }, { type: DomAdapter }, { type: ClrCommonStringsService }, { type: ClrPopoverToggleService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { placeholder: [{
                 type: Input,
                 args: ['clrFilterPlaceholder']
+            }], label: [{
+                type: Input,
+                args: ['clrFilterLabel']
             }], filterValueChange: [{
                 type: Output,
                 args: ['clrFilterValueChange']
@@ -16198,7 +16898,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", "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 });
+  `, 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", "clrFilterLabel", "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: [{
@@ -17521,6 +18221,9 @@ class ColumnsService {
     get hasHideableColumns() {
         return this.columnStates.filter(state => state.hideable).length > 0;
     }
+    get visibleColumns() {
+        return this.columnStates.filter(state => !state.hidden);
+    }
     cache() {
         this._cache = this.columns.map(subject => {
             const value = Object.assign({}, subject.value);
@@ -17852,7 +18555,7 @@ class ClrDatagrid {
         if (!this.items.smart) {
             this.items.all = this.rows.map((row) => row.item);
         }
-        const rowItemsChanges = this.rows.changes.pipe(switchMap((rows) => merge(
+        const rowItemsChanges = this.rows.changes.pipe(switchMap$1((rows) => merge(
         // immediate update
         of(rows.map(row => row.item)), 
         // subsequent updates once per tick
@@ -19561,11 +20264,12 @@ const defaultCdkFixedSizeVirtualScrollInputs = {
     maxBufferPx: 400,
 };
 class ClrDatagridVirtualScrollDirective {
-    constructor(changeDetectorRef, iterableDiffers, items, ngZone, templateRef, viewContainerRef, directionality, scrollDispatcher, viewportRuler, datagrid, columnsService, injector) {
+    constructor(changeDetectorRef, iterableDiffers, items, ngZone, renderer2, templateRef, viewContainerRef, directionality, scrollDispatcher, viewportRuler, datagrid, columnsService, injector) {
         this.changeDetectorRef = changeDetectorRef;
         this.iterableDiffers = iterableDiffers;
         this.items = items;
         this.ngZone = ngZone;
+        this.renderer2 = renderer2;
         this.templateRef = templateRef;
         this.viewContainerRef = viewContainerRef;
         this.directionality = directionality;
@@ -19654,7 +20358,7 @@ class ClrDatagridVirtualScrollDirective {
     }
     ngAfterViewInit() {
         this.injector.runInContext(() => {
-            this.virtualScrollViewport = this.createVirtualScrollViewportForDatagrid(this.changeDetectorRef, this.ngZone, this.directionality, this.scrollDispatcher, this.viewportRuler, this.datagridElementRef, this.virtualScrollStrategy);
+            this.virtualScrollViewport = this.createVirtualScrollViewportForDatagrid(this.changeDetectorRef, this.ngZone, this.renderer2, this.directionality, this.scrollDispatcher, this.viewportRuler, this.datagridElementRef, this.virtualScrollStrategy);
             this.cdkVirtualFor = createCdkVirtualForOfDirective(this.viewContainerRef, this.templateRef, this.iterableDiffers, this.viewRepeater, this.virtualScrollViewport, this.ngZone);
             this.virtualScrollViewport.ngOnInit();
         });
@@ -19716,7 +20420,7 @@ class ClrDatagridVirtualScrollDirective {
             rowRoleElement === null || rowRoleElement === void 0 ? void 0 : rowRoleElement.setAttribute('aria-rowindex', (viewRef.context.index + 1).toString());
         }
     }
-    createVirtualScrollViewportForDatagrid(changeDetectorRef, ngZone, directionality, scrollDispatcher, viewportRuler, datagridElementRef, virtualScrollStrategy) {
+    createVirtualScrollViewportForDatagrid(changeDetectorRef, ngZone, renderer2, directionality, scrollDispatcher, viewportRuler, datagridElementRef, virtualScrollStrategy) {
         const datagridDivElement = datagridElementRef.nativeElement.querySelector('.datagrid');
         const datagridTableElement = datagridElementRef.nativeElement.querySelector('.datagrid-table');
         const datagridRowsElement = datagridElementRef.nativeElement.querySelector('.datagrid-rows');
@@ -19727,7 +20431,7 @@ class ClrDatagridVirtualScrollDirective {
             datagridRowsElement.style.transform = `translateY(${topOffset}px)`;
             datagridRowsElement.style.height = `${totalContentSize - topOffset}px`;
         }
-        const virtualScrollViewport = createCdkVirtualScrollViewport(datagridDivElementRef, changeDetectorRef, ngZone, virtualScrollStrategy, directionality, scrollDispatcher, viewportRuler, null);
+        const virtualScrollViewport = createCdkVirtualScrollViewport(datagridDivElementRef, changeDetectorRef, ngZone, renderer2, virtualScrollStrategy, directionality, scrollDispatcher, viewportRuler, null);
         virtualScrollViewport._contentWrapper = {
             nativeElement: {
                 style: {
@@ -19747,7 +20451,7 @@ class ClrDatagridVirtualScrollDirective {
         return virtualScrollViewport;
     }
 }
-ClrDatagridVirtualScrollDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagridVirtualScrollDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.IterableDiffers }, { token: Items, skipSelf: true }, { token: i0.NgZone }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i1$2.Directionality }, { token: i3$1.ScrollDispatcher }, { token: i3$1.ViewportRuler }, { token: ClrDatagrid }, { token: ColumnsService }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Directive });
+ClrDatagridVirtualScrollDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagridVirtualScrollDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.IterableDiffers }, { token: Items, skipSelf: true }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i1$2.Directionality }, { token: i3$1.ScrollDispatcher }, { token: i3$1.ViewportRuler }, { token: ClrDatagrid }, { token: ColumnsService }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Directive });
 ClrDatagridVirtualScrollDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", type: ClrDatagridVirtualScrollDirective, selector: "[ClrVirtualScroll]", inputs: { cdkVirtualForOf: ["clrVirtualRowsOf", "cdkVirtualForOf"], cdkVirtualForTrackBy: ["clrVirtualRowsTrackBy", "cdkVirtualForTrackBy"], cdkVirtualForTemplate: ["clrVirtualRowsTemplate", "cdkVirtualForTemplate"], cdkVirtualForTemplateCacheSize: ["clrVirtualRowsTemplateCacheSize", "cdkVirtualForTemplateCacheSize"], itemSize: ["clrVirtualRowsItemSize", "itemSize"], minBufferPx: ["clrVirtualRowsMinBufferPx", "minBufferPx"], maxBufferPx: ["clrVirtualRowsMaxBufferPx", "maxBufferPx"] }, outputs: { renderedRangeChange: "renderedRangeChange" }, providers: [Items], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagridVirtualScrollDirective, decorators: [{
             type: Directive,
@@ -19758,7 +20462,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
         }], ctorParameters: function () {
         return [{ type: i0.ChangeDetectorRef }, { type: i0.IterableDiffers }, { type: Items, decorators: [{
                         type: SkipSelf
-                    }] }, { type: i0.NgZone }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: i1$2.Directionality }, { type: i3$1.ScrollDispatcher }, { type: i3$1.ViewportRuler }, { type: ClrDatagrid }, { type: ColumnsService }, { type: i0.EnvironmentInjector }];
+                    }] }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: i1$2.Directionality }, { type: i3$1.ScrollDispatcher }, { type: i3$1.ViewportRuler }, { type: ClrDatagrid }, { type: ColumnsService }, { type: i0.EnvironmentInjector }];
     }, propDecorators: { renderedRangeChange: [{
                 type: Output
             }], cdkVirtualForOf: [{
@@ -19783,7 +20487,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                 type: Input,
                 args: ['clrVirtualRowsMaxBufferPx']
             }] } });
-function createCdkVirtualScrollViewport(datagridDivElementRef, changeDetectorRef, ngZone, virtualScrollStrategy, directionality, scrollDispatcher, viewportRuler, scrollable) {
+function createCdkVirtualScrollViewport(datagridDivElementRef, changeDetectorRef, ngZone, renderer2, virtualScrollStrategy, directionality, scrollDispatcher, viewportRuler, scrollable) {
     if (+VERSION.major < 19) {
         return new CdkVirtualScrollViewport(datagridDivElementRef, changeDetectorRef, ngZone, virtualScrollStrategy, directionality, scrollDispatcher, viewportRuler, scrollable);
     }
@@ -19794,6 +20498,7 @@ function createCdkVirtualScrollViewport(datagridDivElementRef, changeDetectorRef
                 { provide: ElementRef, useValue: datagridDivElementRef },
                 { provide: ChangeDetectorRef, useValue: changeDetectorRef },
                 { provide: NgZone, useValue: ngZone },
+                { provide: Renderer2, useValue: renderer2 },
                 { provide: VIRTUAL_SCROLL_STRATEGY, useValue: virtualScrollStrategy },
                 { provide: Directionality, useValue: directionality },
                 { provide: ScrollDispatcher, useValue: scrollDispatcher },
@@ -20064,9 +20769,9 @@ class DatagridMainRenderer {
         if (this.headers) {
             if (state && !this.columnsService.hasCache()) {
                 this.columnsService.cache();
-                this.headers.forEach((_header, index) => {
+                this.columnsService.visibleColumns.forEach((header, index) => {
                     if (index > 0) {
-                        this.columnsService.emitStateChangeAt(index, {
+                        this.columnsService.emitStateChangeAt(header.columnIndex, {
                             changes: [DatagridColumnChanges.HIDDEN],
                             hidden: state,
                         });
@@ -28549,9 +29254,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.
  */
 
+/*
+ * 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.
+ */
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CHANGE_KEYS, CLR_ALERT_DIRECTIVES, CLR_BUTTON_GROUP_DIRECTIVES, CLR_DATAGRID_DIRECTIVES, CLR_DATEPICKER_DIRECTIVES, CLR_DROPDOWN_DIRECTIVES, CLR_ICON_DIRECTIVES, CLR_LAYOUT_DIRECTIVES, CLR_LOADING_BUTTON_DIRECTIVES, CLR_LOADING_DIRECTIVES, CLR_MENU_POSITIONS, CLR_MODAL_DIRECTIVES, CLR_NAVIGATION_DIRECTIVES, CLR_PROGRESS_BAR_DIRECTIVES, CLR_SIDEPANEL_DIRECTIVES, CLR_SIGNPOST_DIRECTIVES, CLR_SPINNER_DIRECTIVES, CLR_STACK_VIEW_DIRECTIVES, CLR_TABS_DIRECTIVES, CLR_TOOLTIP_DIRECTIVES, CLR_TREE_VIEW_DIRECTIVES, CLR_VERTICAL_NAV_DIRECTIVES, CLR_WIZARD_DIRECTIVES, CONDITIONAL_DIRECTIVES, CUSTOM_BUTTON_TYPES, CdsIconCustomTag, ClarityModule, ClrAbstractContainer, ClrAccordion, ClrAccordionContent, ClrAccordionDescription, ClrAccordionModule, ClrAccordionPanel, ClrAccordionTitle, ClrAlert, ClrAlertItem, ClrAlertModule, ClrAlertText, ClrAlerts, ClrAlertsPager, ClrAlignment, ClrAriaCurrentLink, ClrAxis, ClrBreadcrumbItem, ClrBreadcrumbs, ClrBreadcrumbsModule, ClrButton, ClrButtonGroup, ClrButtonGroupModule, ClrButtonModule, ClrCalendar, ClrCheckbox, ClrCheckboxContainer, ClrCheckboxModule, ClrCheckboxWrapper, ClrCombobox, ClrComboboxContainer, ClrComboboxModule, ClrCommonFormsModule, ClrCommonStringsService, ClrConditionalModule, ClrControl, ClrControlContainer, ClrControlError, ClrControlHelper, ClrControlSuccess, ClrDataModule, ClrDatagrid, ClrDatagridActionBar, ClrDatagridActionOverflow, ClrDatagridCell, ClrDatagridColumn, ClrDatagridColumnSeparator, ClrDatagridColumnToggle, ClrDatagridColumnToggleButton, ClrDatagridDetail, ClrDatagridDetailBody, ClrDatagridDetailHeader, ClrDatagridFilter, ClrDatagridFooter, ClrDatagridHideableColumn, ClrDatagridItems, ClrDatagridModule, ClrDatagridPageSize, ClrDatagridPagination, ClrDatagridPlaceholder, ClrDatagridRow, ClrDatagridRowDetail, ClrDatagridSortOrder, ClrDatalist, ClrDatalistContainer, ClrDatalistInput, ClrDatalistModule, ClrDateContainer, ClrDateInput, ClrDateInputValidator, ClrDatepickerModule, ClrDatepickerViewManager, ClrDay, ClrDaypicker, ClrDestroyService, ClrDropdown, ClrDropdownItem, ClrDropdownMenu, ClrDropdownModule, ClrDropdownTrigger, ClrEmphasisModule, ClrExpandableAnimation, ClrFileInput, ClrFileInputContainer, ClrFileInputModule, ClrFileInputValidator, ClrFileInputValueAccessor, ClrFocusOnViewInit, ClrFocusOnViewInitModule, ClrForm, ClrFormLayout, ClrFormsModule, ClrHeader, ClrIconCustomTag, ClrIconModule, ClrIfActive, ClrIfDetail, ClrIfError, ClrIfExpanded, ClrIfOpen, ClrIfSuccess, ClrInput, ClrInputContainer, ClrInputModule, ClrLabel, ClrLayout, ClrLayoutModule, ClrLoading, ClrLoadingButton, ClrLoadingButtonModule, ClrLoadingModule, ClrLoadingState, ClrMainContainer, ClrMainContainerModule, ClrModal, ClrModalBody, ClrModalConfigurationService, ClrModalModule, ClrMonthpicker, ClrNavLevel, ClrNavigationModule, ClrOption, ClrOptionItems, ClrOptionSelected, ClrOptions, ClrPassword, ClrPasswordContainer, ClrPasswordModule, ClrPopoverAnchor, ClrPopoverContent, ClrPopoverEventsService, ClrPopoverHostDirective, ClrPopoverModule, ClrPopoverPositionService, ClrPopoverToggleService, ClrProgressBar, ClrProgressBarModule, ClrRadio, ClrRadioContainer, ClrRadioModule, ClrRadioWrapper, ClrRange, ClrRangeContainer, ClrRangeModule, ClrRecursiveForOf, ClrSelect, ClrSelectContainer, ClrSelectModule, ClrSelectedState, ClrSide, ClrSidePanel, ClrSidePanelModule, ClrSignpost, ClrSignpostContent, ClrSignpostModule, ClrSignpostTitle, ClrSignpostTrigger, ClrSpinner, ClrSpinnerModule, ClrStackBlock, ClrStackContentInput, ClrStackHeader, ClrStackView, ClrStackViewCustomTags, ClrStackViewLabel, ClrStackViewModule, ClrStandaloneCdkTrapFocus, ClrStepButton, ClrStepButtonType, ClrStepper, ClrStepperModule, ClrStepperPanel, ClrStopEscapePropagationDirective, ClrTab, ClrTabAction, ClrTabContent, ClrTabLink, ClrTabOverflowContent, ClrTabs, ClrTabsActions, ClrTabsModule, ClrTextarea, ClrTextareaContainer, ClrTextareaModule, ClrTimeline, ClrTimelineLayout, ClrTimelineModule, ClrTimelineStep, ClrTimelineStepDescription, ClrTimelineStepHeader, ClrTimelineStepState, ClrTimelineStepTitle, ClrTooltip, ClrTooltipContent, ClrTooltipModule, ClrTooltipTrigger, ClrTree, ClrTreeNode, ClrTreeNodeLink, ClrTreeViewModule, ClrVerticalNav, ClrVerticalNavGroup, ClrVerticalNavGroupChildren, ClrVerticalNavIcon, ClrVerticalNavLink, ClrVerticalNavModule, ClrWizard, ClrWizardButton, ClrWizardHeaderAction, ClrWizardModule, ClrWizardPage, ClrWizardPageButtons, ClrWizardPageHeaderActions, ClrWizardPageNavTitle, ClrWizardPageTitle, ClrWizardStepnav, ClrWizardStepnavItem, ClrWizardTitle, ClrYearpicker, DEFAULT_BUTTON_TYPES, DatagridNumericFilter, DatagridPropertyComparator, DatagridPropertyNumericFilter, DatagridPropertyStringFilter, DatagridStringFilter, EXPANDABLE_ANIMATION_DIRECTIVES, FOCUS_ON_VIEW_INIT, FOCUS_ON_VIEW_INIT_DIRECTIVES, IS_TOGGLE, IS_TOGGLE_PROVIDER, LoadingListener, MainContainerWillyWonka, NavDetectionOompaLoompa, TOGGLE_SERVICE, TOGGLE_SERVICE_PROVIDER, ToggleServiceFactory, WrappedFormControl, collapse, commonStringsDefault, fade, fadeSlide, isToggleFactory, slide, AccordionOompaLoompa as ÇlrAccordionOompaLoompa, AccordionWillyWonka as ÇlrAccordionWillyWonka, ActionableOompaLoompa as ÇlrActionableOompaLoompa, ActiveOompaLoompa as ÇlrActiveOompaLoompa, ClrPopoverCloseButton as ÇlrClrPopoverCloseButton, ClrPopoverModuleNext as ÇlrClrPopoverModuleNext, ClrPopoverOpenCloseButton as ÇlrClrPopoverOpenCloseButton, DatagridCellRenderer as ÇlrDatagridCellRenderer, DatagridDetailRegisterer as ÇlrDatagridDetailRegisterer, DatagridHeaderRenderer as ÇlrDatagridHeaderRenderer, DatagridMainRenderer as ÇlrDatagridMainRenderer, DatagridRowRenderer as ÇlrDatagridRowRenderer, ClrDatagridSelectionCellDirective as ÇlrDatagridSelectionCellDirective, ClrDatagridVirtualScrollDirective as ÇlrDatagridVirtualScrollDirective, DatagridWillyWonka as ÇlrDatagridWillyWonka, ExpandableOompaLoompa as ÇlrExpandableOompaLoompa, StepperOompaLoompa as ÇlrStepperOompaLoompa, StepperWillyWonka as ÇlrStepperWillyWonka, TabsWillyWonka as ÇlrTabsWillyWonka, WrappedCell as ÇlrWrappedCell, WrappedColumn as ÇlrWrappedColumn, WrappedRow as ÇlrWrappedRow };
+export { CHANGE_KEYS, CLR_ALERT_DIRECTIVES, CLR_BUTTON_GROUP_DIRECTIVES, CLR_DATAGRID_DIRECTIVES, CLR_DATEPICKER_DIRECTIVES, CLR_DROPDOWN_DIRECTIVES, CLR_FILE_MESSAGES_TEMPLATE_CONTEXT, CLR_ICON_DIRECTIVES, CLR_LAYOUT_DIRECTIVES, CLR_LOADING_BUTTON_DIRECTIVES, CLR_LOADING_DIRECTIVES, CLR_MENU_POSITIONS, CLR_MODAL_DIRECTIVES, CLR_NAVIGATION_DIRECTIVES, CLR_PROGRESS_BAR_DIRECTIVES, CLR_SIDEPANEL_DIRECTIVES, CLR_SIGNPOST_DIRECTIVES, CLR_SPINNER_DIRECTIVES, CLR_STACK_VIEW_DIRECTIVES, CLR_TABS_DIRECTIVES, CLR_TOOLTIP_DIRECTIVES, CLR_TREE_VIEW_DIRECTIVES, CLR_VERTICAL_NAV_DIRECTIVES, CLR_WIZARD_DIRECTIVES, CONDITIONAL_DIRECTIVES, CUSTOM_BUTTON_TYPES, CdsIconCustomTag, ClarityModule, ClrAbstractContainer, ClrAccordion, ClrAccordionContent, ClrAccordionDescription, ClrAccordionModule, ClrAccordionPanel, ClrAccordionTitle, ClrAlert, ClrAlertItem, ClrAlertModule, ClrAlertText, ClrAlerts, ClrAlertsPager, ClrAlignment, ClrAriaCurrentLink, ClrAxis, ClrBreadcrumbItem, ClrBreadcrumbs, ClrBreadcrumbsModule, 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, ClrDatepickerActions, ClrDatepickerModule, ClrDatepickerViewManager, ClrDay, ClrDaypicker, ClrDestroyService, ClrDropdown, ClrDropdownItem, ClrDropdownMenu, ClrDropdownModule, ClrDropdownTrigger, ClrEmphasisModule, ClrExpandableAnimation, ClrFileError, ClrFileInfo, ClrFileInput, ClrFileInputContainer, ClrFileInputModule, ClrFileInputValidator, ClrFileInputValueAccessor, ClrFileList, ClrFileMessagesTemplate, ClrFileSuccess, ClrFocusOnViewInit, ClrFocusOnViewInitModule, ClrForm, ClrFormLayout, ClrFormsModule, ClrHeader, ClrIconCustomTag, ClrIconModule, ClrIfActive, ClrIfDetail, ClrIfError, ClrIfExpanded, ClrIfOpen, ClrIfSuccess, ClrInput, ClrInputContainer, ClrInputModule, ClrLabel, ClrLayout, ClrLayoutModule, ClrLoading, ClrLoadingButton, ClrLoadingButtonModule, ClrLoadingModule, ClrLoadingState, ClrMainContainer, ClrMainContainerModule, ClrModal, ClrModalBody, ClrModalConfigurationService, ClrModalModule, ClrMonthpicker, ClrNavLevel, ClrNavigationModule, ClrNumberInput, ClrNumberInputContainer, ClrNumberInputModule, ClrOption, ClrOptionItems, ClrOptionSelected, ClrOptions, ClrPassword, ClrPasswordContainer, ClrPasswordModule, ClrPopoverAnchor, ClrPopoverContent, ClrPopoverEventsService, ClrPopoverHostDirective, ClrPopoverModule, ClrPopoverPositionService, ClrPopoverToggleService, ClrProgressBar, ClrProgressBarModule, ClrRadio, ClrRadioContainer, ClrRadioModule, ClrRadioWrapper, ClrRange, ClrRangeContainer, ClrRangeModule, ClrRecursiveForOf, ClrSelect, ClrSelectContainer, ClrSelectModule, ClrSelectedState, ClrSide, ClrSidePanel, ClrSidePanelModule, ClrSignpost, ClrSignpostContent, ClrSignpostModule, ClrSignpostTitle, ClrSignpostTrigger, ClrSpinner, ClrSpinnerModule, ClrStackBlock, ClrStackContentInput, ClrStackHeader, ClrStackView, ClrStackViewCustomTags, ClrStackViewLabel, ClrStackViewModule, ClrStandaloneCdkTrapFocus, ClrStepButton, ClrStepButtonType, ClrStepper, ClrStepperModule, ClrStepperPanel, ClrStopEscapePropagationDirective, ClrTab, ClrTabAction, ClrTabContent, ClrTabLink, ClrTabOverflowContent, ClrTabs, ClrTabsActions, ClrTabsModule, ClrTextarea, ClrTextareaContainer, ClrTextareaModule, ClrTimeline, ClrTimelineLayout, ClrTimelineModule, ClrTimelineStep, ClrTimelineStepDescription, ClrTimelineStepHeader, ClrTimelineStepState, ClrTimelineStepTitle, ClrTooltip, ClrTooltipContent, ClrTooltipModule, ClrTooltipTrigger, ClrTree, ClrTreeNode, ClrTreeNodeLink, ClrTreeViewModule, ClrVerticalNav, ClrVerticalNavGroup, ClrVerticalNavGroupChildren, ClrVerticalNavIcon, ClrVerticalNavLink, ClrVerticalNavModule, ClrWizard, ClrWizardButton, ClrWizardHeaderAction, ClrWizardModule, ClrWizardPage, ClrWizardPageButtons, ClrWizardPageHeaderActions, ClrWizardPageNavTitle, ClrWizardPageTitle, ClrWizardStepnav, ClrWizardStepnavItem, ClrWizardTitle, ClrYearpicker, DEFAULT_BUTTON_TYPES, DatagridNumericFilter, DatagridPropertyComparator, DatagridPropertyNumericFilter, DatagridPropertyStringFilter, DatagridStringFilter, EXPANDABLE_ANIMATION_DIRECTIVES, FOCUS_ON_VIEW_INIT, FOCUS_ON_VIEW_INIT_DIRECTIVES, IS_TOGGLE, IS_TOGGLE_PROVIDER, LoadingListener, MainContainerWillyWonka, NavDetectionOompaLoompa, TOGGLE_SERVICE, TOGGLE_SERVICE_PROVIDER, ToggleServiceFactory, WrappedFormControl, collapse, commonStringsDefault, fade, fadeSlide, isToggleFactory, slide, AccordionOompaLoompa as ÇlrAccordionOompaLoompa, AccordionWillyWonka as ÇlrAccordionWillyWonka, ActionableOompaLoompa as ÇlrActionableOompaLoompa, ActiveOompaLoompa as ÇlrActiveOompaLoompa, ClrPopoverCloseButton as ÇlrClrPopoverCloseButton, ClrPopoverModuleNext as ÇlrClrPopoverModuleNext, ClrPopoverOpenCloseButton as ÇlrClrPopoverOpenCloseButton, DatagridCellRenderer as ÇlrDatagridCellRenderer, DatagridDetailRegisterer as ÇlrDatagridDetailRegisterer, DatagridHeaderRenderer as ÇlrDatagridHeaderRenderer, DatagridMainRenderer as ÇlrDatagridMainRenderer, DatagridRowRenderer as ÇlrDatagridRowRenderer, ClrDatagridSelectionCellDirective as ÇlrDatagridSelectionCellDirective, ClrDatagridVirtualScrollDirective as ÇlrDatagridVirtualScrollDirective, DatagridWillyWonka as ÇlrDatagridWillyWonka, ExpandableOompaLoompa as ÇlrExpandableOompaLoompa, StepperOompaLoompa as ÇlrStepperOompaLoompa, StepperWillyWonka as ÇlrStepperWillyWonka, TabsWillyWonka as ÇlrTabsWillyWonka, WrappedCell as ÇlrWrappedCell, WrappedColumn as ÇlrWrappedColumn, WrappedRow as ÇlrWrappedRow };
 //# sourceMappingURL=clr-angular.mjs.map