@coreui/angular-pro 5.1.3 → 5.1.5

package/fesm2022/coreui-angular-pro.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Directive, Input, TemplateRef, Renderer2, booleanAttribute, NgModule, HostBinding, Injectable, Component, EventEmitter, Output, ContentChildren, HostListener, DestroyRef, signal, effect, RendererFactory2, Pipe, computed, numberAttribute, ViewChildren, PLATFORM_ID, Inject, afterNextRender, AfterRenderPhase, ViewChild, forwardRef, ContentChild, Optional, ChangeDetectionStrategy, NgZone, ViewContainerRef, input, model, output, contentChildren, viewChildren, untracked } from '@angular/core';
+import { inject, ElementRef, Directive, Input, TemplateRef, Renderer2, booleanAttribute, NgModule, HostBinding, Injectable, Component, EventEmitter, Output, ContentChildren, HostListener, DestroyRef, signal, effect, RendererFactory2, Pipe, computed, numberAttribute, ViewChildren, PLATFORM_ID, Inject, afterNextRender, AfterRenderPhase, ViewChild, forwardRef, ContentChild, Optional, model, input, ChangeDetectionStrategy, output, NgZone, ViewContainerRef, contentChildren, viewChildren, untracked } from '@angular/core';
 import { NgTemplateOutlet, DOCUMENT, NgClass, NgOptimizedImage, AsyncPipe, NgStyle, isPlatformServer, isPlatformBrowser, formatDate, I18nPluralPipe, JsonPipe } from '@angular/common';
 import * as i1 from '@angular/animations';
 import { animation, animate, style, useAnimation, trigger, state, transition, group, query } from '@angular/animations';
-import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed, toObservable, outputToObservable, toSignal } from '@angular/core/rxjs-interop';
 import { fromEvent, Subject, BehaviorSubject, Observable, skip, merge, takeWhile, distinctUntilChanged as distinctUntilChanged$1, map as map$1, debounceTime as debounceTime$1 } from 'rxjs';
 import * as i1$1 from '@angular/router';
 import { RouterModule, NavigationEnd, RouterLink } from '@angular/router';
@@ -7710,6 +7710,35 @@ class DateRangePickerComponent {
          * @default false
          */
         this.visible = false;
+        this.startDateModel = model(undefined, {
+            alias: 'startDate'
+        });
+        this.dateModelEffect = effect(() => {
+            this.dateRangeGroup.patchValue({ startDateInput: this.startDateValue(), endDateInput: this.endDateValue() });
+        });
+        this.startDateChange = outputToObservable(this.startDateModel);
+        this.startDate = computed(() => {
+            const prevDate = this.#startDate ? new Date(this.#startDate) : null;
+            const currDate = this.startDateModel() ? new Date(this.startDateModel()) : null;
+            if (prevDate?.getTime() !== currDate?.getTime()) {
+                return currDate;
+            }
+            return prevDate;
+        });
+        this.#startDate = null;
+        this.endDateModel = model(undefined, {
+            alias: 'endDate'
+        });
+        this.endDateChange = outputToObservable(this.endDateModel);
+        this.endDate = computed(() => {
+            const prevDate = this.#endDate ? new Date(this.#endDate) : null;
+            const currDate = this.endDateModel() ? new Date(this.endDateModel()) : null;
+            if (prevDate?.getTime() !== currDate?.getTime()) {
+                return currDate;
+            }
+            return prevDate;
+        });
+        this.#endDate = null;
         this.calendarDate = new Date();
         this.disabledDates = [];
         /**
@@ -7718,7 +7747,7 @@ class DateRangePickerComponent {
          * @default 1 (Monday)
          */
         this.firstDayOfWeek = 1;
-        this.locale = 'default';
+        this.locale = input('default');
         this.maxDate = null;
         this.minDate = null;
         /**
@@ -7779,27 +7808,39 @@ class DateRangePickerComponent {
         this.valueChange = new EventEmitter();
         this.calendarCellHover = new EventEmitter();
         this.calendarDateChange = new EventEmitter();
-        this.endDateChange = new EventEmitter();
-        this.startDateChange = new EventEmitter();
         this.templates = {};
         this.dateChangeSubscriptions = [];
         this.isMobile = true;
         this.showRanges = false;
-        this._startDateValue = this.formatDate(this.startDate);
-        this._endDateValue = this.formatDate(this.endDate);
+        this.startDateValue = computed(() => {
+            const locale = this.locale() ?? 'default';
+            const dateFormatted = this.formatDate(this.startDate());
+            this.#startDate = this.startDate();
+            return dateFormatted;
+        });
+        this.endDateValue = computed(() => {
+            const locale = this.locale() ?? 'default';
+            const dateFormatted = this.formatDate(this.endDate());
+            this.#endDate = this.endDate();
+            return dateFormatted;
+        });
         // todo: validation
-        this.startDateInput = new FormControl({ value: this.startDateValue, disabled: this.disabled }, [
-            Validators.required
-            // Validators.minLength(8),
-            // Validators.maxLength(10),
-            // invalidDateStringValidator(this.locale)
-        ]);
-        this.endDateInput = new FormControl({ value: this.endDateValue, disabled: this.disabled }, [
-            Validators.required
-            // Validators.minLength(8),
-            // Validators.maxLength(10),
-            // invalidDateStringValidator(this.locale)
-        ]);
+        // startDateInput = new FormControl({ value: this.startDateValue, disabled: this.disabled }, [
+        //   Validators.required
+        //   // Validators.minLength(8),
+        //   // Validators.maxLength(10),
+        //   // invalidDateStringValidator(this.locale)
+        // ]);
+        // endDateInput = new FormControl({ value: this.endDateValue, disabled: this.disabled }, [
+        //   Validators.required
+        //   // Validators.minLength(8),
+        //   // Validators.maxLength(10),
+        //   // invalidDateStringValidator(this.locale)
+        // ]);
+        this.dateRangeGroup = new FormGroup({
+            startDateInput: new FormControl({ value: '', disabled: this.disabled }, [Validators.required]),
+            endDateInput: new FormControl({ value: '', disabled: this.disabled }, [Validators.required])
+        });
         this.#breakpoints = {
             OneCalendarRanges: '(min-width: 480px)',
             TwoCalendars: '(max-width: 650px)',
@@ -7841,32 +7882,11 @@ class DateRangePickerComponent {
         // return this.#timepicker;
     }
     #timepicker;
-    set startDate(value) {
-        const prevDate = this._startDate ? new Date(this._startDate) : null;
-        this._startDate = value ? new Date(value) : null;
-        if (prevDate?.getTime() !== this._startDate?.getTime()) {
-            this.startDateValue = this.formatDate(this._startDate);
-            this.startDateChange.emit(this._startDate);
-        }
-    }
-    get startDate() {
-        return this._startDate;
-    }
-    set endDate(value) {
-        const prevDate = this._endDate ? new Date(this._endDate ?? 0) : null;
-        this._endDate = value ? new Date(value) : null;
-        if (prevDate?.getTime() !== this._endDate?.getTime()) {
-            this.endDateValue = this.formatDate(this._endDate);
-            this.endDateChange.emit(this._endDate);
-        }
-    }
-    get endDate() {
-        return this._endDate;
-    }
+    #startDate;
+    #endDate;
     set disabled(value) {
         this.#disabled = value;
-        this.#disabled ? this.startDateInput.disable() : this.startDateInput.enable();
-        this.#disabled ? this.endDateInput.disable() : this.endDateInput.enable();
+        this.#disabled ? this.dateRangeGroup.disable() : this.dateRangeGroup.enable();
     }
     get disabled() {
         return this.#disabled;
@@ -7876,16 +7896,10 @@ class DateRangePickerComponent {
         const newValue = this.range ? { ...value } : value;
         if (JSON.stringify(this._value) !== JSON.stringify(newValue)) {
             this._value = newValue;
-            if (this.range) {
-                this.handleStartDateChange(newValue.startDate ?? null);
-                this.handleEndDateChange(newValue.endDate ?? null);
-            }
-            else {
-                this.handleStartDateChange(newValue ?? null);
-            }
             this.onChange(newValue);
             this.onTouched();
             this.valueChange.emit(this.value);
+            // this.dateRangeGroup.setValue({ startDateInput: this.startDateValue(), endDateInput: this.endDateValue() });
             if (this.closeOnSelect) {
                 const hasValue = this.range ? !!(this.value.startDate && this.value.endDate) : !!this.value;
                 this.visible = !hasValue;
@@ -7898,45 +7912,35 @@ class DateRangePickerComponent {
     subscribeDateChange(subscribe = true) {
         if (subscribe) {
             // todo
-            // this.dateChangeSubscriptions.push(this.startDateChange.subscribe(next => {
-            //   this.startDate = next;
-            //   this.onChange(next);
-            // }));
-            // this.dateChangeSubscriptions.push(this.startDateChange.subscribe(next => {
-            //   this.endDate = next;
-            //   this.onChange(next);
-            // }));
+            // this.dateChangeSubscriptions.push(
+            //   this.startDateChange.subscribe((next) => {
+            //     // console.log('startDateChange', next);
+            //     // this.startDate = next;
+            //     // this.onChange(next);
+            //   })
+            // );
+            // this.dateChangeSubscriptions.push(
+            //   this.endDateChange.subscribe((next) => {
+            //     // console.log('endDateChange', next);
+            //     // this.endDate = next;
+            //     // this.onChange(next);
+            //   })
+            // );
             return;
         }
-        this.dateChangeSubscriptions.forEach(subscription => {
+        this.dateChangeSubscriptions.forEach((subscription) => {
             subscription?.unsubscribe();
         });
     }
     onBlur() {
         this.onTouched();
     }
-    set startDateValue(value) {
-        this.startDateInput.setValue(value);
-        this._startDateValue = value;
-    }
-    get startDateValue() {
-        return this._startDateValue;
-    }
-    set endDateValue(value) {
-        this.endDateInput.setValue(value);
-        this._endDateValue = value;
-    }
-    get endDateValue() {
-        return this._endDateValue;
-    }
     get startDatePlaceholder() {
         return Array.isArray(this.placeholder) ? this.placeholder[0] : this.placeholder;
     }
-    ;
     get endDatePlaceholder() {
         return Array.isArray(this.placeholder) ? this.placeholder[1] : this.placeholder;
     }
-    ;
     set inputStartHoverValue(value) {
         this._inputStartHoverValue = value;
     }
@@ -7959,30 +7963,32 @@ class DateRangePickerComponent {
         };
     }
     formatDate(date) {
-        return !date || !isValidDate(date) ? '' :
-            typeof this.inputDateFormat === 'function' ? this.inputDateFormat(date) :
-                (!!this.format && !!this.locale && this.locale !== 'default') ? formatDate(date, this.format, this.locale) :
-                    this.timepicker ? date.toLocaleString(this.locale) :
-                        date.toLocaleDateString(this.locale);
+        return !date || !isValidDate(date)
+            ? ''
+            : typeof this.inputDateFormat === 'function'
+                ? this.inputDateFormat(date)
+                : !!this.format && !!this.locale() && this.locale() !== 'default'
+                    ? formatDate(date, this.format, this.locale())
+                    : this.timepicker
+                        ? date.toLocaleString(this.locale())
+                        : date.toLocaleDateString(this.locale());
     }
     #breakpoints;
     ngOnInit() {
         this.customRanges = this.ranges ? Object.entries(this.ranges) : [];
         const breakpoints = this.#breakpoints;
-        this.layoutChanges = this.breakpointObserver.observe([
-            breakpoints.OneCalendarRanges,
-            breakpoints.TwoCalendars,
-            breakpoints.TwoCalendarsRanges
-        ]).subscribe(result => {
+        this.layoutChanges = this.breakpointObserver
+            .observe([breakpoints.OneCalendarRanges, breakpoints.TwoCalendars, breakpoints.TwoCalendarsRanges])
+            .subscribe((result) => {
             if (result.matches) {
-                this.isMobile = (this.customRanges?.length > 0 && result.breakpoints[breakpoints.TwoCalendarsRanges]) || result.breakpoints[breakpoints.TwoCalendars];
+                this.isMobile =
+                    (this.customRanges?.length > 0 && result.breakpoints[breakpoints.TwoCalendarsRanges]) ||
+                        result.breakpoints[breakpoints.TwoCalendars];
                 if (this.customRanges?.length > 0) {
                     this.showRanges = !result.breakpoints[breakpoints.OneCalendarRanges];
                 }
             }
         });
-        this.startDateValue = this.formatDate(this.startDate);
-        this.endDateValue = this.formatDate(this.endDate);
         this.subscribeDateChange();
     }
     ngOnDestroy() {
@@ -8012,10 +8018,6 @@ class DateRangePickerComponent {
             const date = this.convertValueToDate(changes['endDate']?.currentValue) ?? null;
             this.handleEndDateChange(date);
         }
-        if (changes['locale']) {
-            this.startDateValue = this.formatDate(this.startDate);
-            this.endDateValue = this.formatDate(this.endDate);
-        }
     }
     convertValueToDate(value) {
         if (!value) {
@@ -8033,7 +8035,7 @@ class DateRangePickerComponent {
                 return parsedDate;
             }
         }
-        return getLocalDateFromString(date, this.locale, this.timepicker);
+        return getLocalDateFromString(date, this.locale(), this.timepicker);
     }
     getCustomRangeKey(customRange) {
         return customRange[0];
@@ -8045,14 +8047,14 @@ class DateRangePickerComponent {
     }
     handleCalendarCellHover($event) {
         this.calendarCellHover.emit($event);
-        if (!this.startDate) {
+        if (!this.startDate()) {
             this.setInputValue(this.startDateElementRef, $event);
             this.inputStartHoverValue = $event;
             this.setInputValue(this.endDateElementRef, null);
             this.inputEndHoverValue = null;
             return;
         }
-        if (!this.endDate) {
+        if (!this.endDate()) {
             this.setInputValue(this.endDateElementRef, $event);
             this.inputEndHoverValue = $event;
             return;
@@ -8064,23 +8066,19 @@ class DateRangePickerComponent {
         }
     }
     handleStartDateChange(date) {
-        if (date?.getTime() !== this.startDate?.getTime()) {
-            this.startDate = date ?? null;
-            this.startDateValue = this.formatDate(this.startDate);
-            this.inputStartHoverValue = null;
-            this.value = this.range ? { startDate: this.startDate, endDate: this.endDate } : this.startDate;
-        }
+        this.startDateModel.set(date ?? null);
+        this.dateRangeGroup.patchValue({ startDateInput: this.startDateValue() });
+        this.inputStartHoverValue = null;
+        this.value = this.range ? { startDate: this.startDate(), endDate: this.endDate() } : this.startDate();
     }
     handleEndDateChange(date) {
-        if (date?.getTime() !== this.endDate?.getTime()) {
-            if (!this.range) {
-                return;
-            }
-            this.endDate = date ?? null;
-            this.endDateValue = this.formatDate(this.endDate);
-            this.inputEndHoverValue = null;
-            this.value = this.range ? { startDate: this.startDate, endDate: this.endDate } : this.startDate;
+        if (!this.range) {
+            return;
         }
+        this.endDateModel.set(date ?? null);
+        this.dateRangeGroup.patchValue({ endDateInput: this.endDateValue() });
+        this.inputEndHoverValue = null;
+        this.value = this.range ? { startDate: this.startDate(), endDate: this.endDate() } : this.startDate();
     }
     handleClear($event) {
         // this.calendarComponent.clearDates();
@@ -8094,31 +8092,39 @@ class DateRangePickerComponent {
             // this.calendarComponent.clearDates();
             this.handleStartDateChange(null);
             this.handleEndDateChange(null);
+            return;
         }
         if (date instanceof Date && date.getTime()) {
-            if (!(this.forbiddenDate(date) || (this.endDate && this.endDate < date))) {
+            // @ts-ignore
+            if (!(this.forbiddenDate(date) || (this.endDate() && this.endDate() < date))) {
                 this.calendarDate = date;
-                this.startDate = date;
+                this.handleStartDateChange(date);
             }
         }
-        this.handleStartDateChange(this.startDate ?? null);
+        this.handleStartDateChange(this.startDate() ?? null);
     }
     handleEndDateInputChange($event) {
         const inputValue = $event.target.value;
         const date = this.inputParse(inputValue);
         if (!date) {
-            this.endDate = null;
+            this.handleEndDateChange(null);
+            return;
         }
         if (date instanceof Date && date.getTime()) {
-            if (!(this.forbiddenDate(date) || (this.startDate && this.startDate > date))) {
+            // @ts-ignore
+            if (!(this.forbiddenDate(date) || (this.startDate() && this.startDate() > date))) {
                 this.calendarDate = date;
-                this.endDate = date;
+                this.handleEndDateChange(date);
+            }
+            else {
+                this.handleEndDateChange(null);
             }
         }
-        this.handleEndDateChange(this.endDate ?? null);
+        this.handleEndDateChange(this.endDate() ?? null);
     }
     forbiddenDate(date) {
-        return isDateDisabled(date, this.minDate, this.maxDate, this.disabledDates) || (this.dateFilter ? !this.dateFilter(date) : false);
+        return (isDateDisabled(date, this.minDate, this.maxDate, this.disabledDates) ||
+            (this.dateFilter ? !this.dateFilter(date) : false));
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -8130,27 +8136,28 @@ class DateRangePickerComponent {
         this.disabled = isDisabled;
     }
     writeValue(value) {
-        if (value !== null) {
-            this.value = this.range ? { ...value } : value;
+        if (!!value) {
+            this.handleStartDateChange(this.range ? value.startDate : value);
+            this.handleEndDateChange(this.range ? value.endDate : null);
         }
     }
     handleStartTimeChange(time) {
-        this.startDate = time ?? this.startDate;
+        this.startDateModel.set(time ?? this.startDate());
     }
     handleEndTimeChange(time) {
         if (!this.range) {
             return;
         }
-        this.endDate = time ?? this.endDate;
+        this.endDateModel.set(time ?? this.endDate());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DateRangePickerComponent, deps: [{ token: i1$4.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: DateRangePickerComponent, isStandalone: true, selector: "c-date-range-picker", inputs: { dayFormat: "dayFormat", calendars: ["calendars", "calendars", numberAttribute], cleaner: ["cleaner", "cleaner", booleanAttribute], closeOnSelect: ["closeOnSelect", "closeOnSelect", booleanAttribute], format: "format", indicator: ["indicator", "indicator", booleanAttribute], inputDateFormat: "inputDateFormat", inputDateParse: "inputDateParse", inputReadOnly: ["inputReadOnly", "inputReadOnly", booleanAttribute], navYearFirst: ["navYearFirst", "navYearFirst", booleanAttribute], placeholder: "placeholder", ranges: "ranges", rangesButtonsColor: "rangesButtonsColor", rangesButtonsSize: "rangesButtonsSize", rangesButtonsVariant: "rangesButtonsVariant", separator: ["separator", "separator", booleanAttribute], size: "size", timepicker: ["timepicker", "timepicker", booleanAttribute], valid: "valid", visible: ["visible", "visible", booleanAttribute], startDate: "startDate", endDate: "endDate", calendarDate: ["calendarDate", "calendarDate", dateTransform], disabledDates: "disabledDates", firstDayOfWeek: ["firstDayOfWeek", "firstDayOfWeek", numberAttribute], locale: "locale", maxDate: "maxDate", minDate: "minDate", navigation: ["navigation", "navigation", booleanAttribute], range: ["range", "range", booleanAttribute], dateFilter: "dateFilter", disabled: ["disabled", "disabled", booleanAttribute], value: "value", weekdayFormat: "weekdayFormat", popperjsOptions: ["popperOptions", "popperjsOptions"], selectAdjacentDays: ["selectAdjacentDays", "selectAdjacentDays", booleanAttribute], showAdjacentDays: ["showAdjacentDays", "showAdjacentDays", booleanAttribute], selectionType: "selectionType", showWeekNumber: ["showWeekNumber", "showWeekNumber", booleanAttribute], weekNumbersLabel: "weekNumbersLabel" }, outputs: { valueChange: "valueChange", calendarCellHover: "calendarCellHover", calendarDateChange: "calendarDateChange", endDateChange: "endDateChange", startDateChange: "startDateChange" }, host: { listeners: { "focusout": "onBlur()" }, properties: { "class": "this.datePickerClasses" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: DateRangePickerComponent, isStandalone: true, selector: "c-date-range-picker", inputs: { dayFormat: { classPropertyName: "dayFormat", publicName: "dayFormat", isSignal: false, isRequired: false, transformFunction: null }, calendars: { classPropertyName: "calendars", publicName: "calendars", isSignal: false, isRequired: false, transformFunction: numberAttribute }, cleaner: { classPropertyName: "cleaner", publicName: "cleaner", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, format: { classPropertyName: "format", publicName: "format", isSignal: false, isRequired: false, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, inputDateFormat: { classPropertyName: "inputDateFormat", publicName: "inputDateFormat", isSignal: false, isRequired: false, transformFunction: null }, inputDateParse: { classPropertyName: "inputDateParse", publicName: "inputDateParse", isSignal: false, isRequired: false, transformFunction: null }, inputReadOnly: { classPropertyName: "inputReadOnly", publicName: "inputReadOnly", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, navYearFirst: { classPropertyName: "navYearFirst", publicName: "navYearFirst", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, ranges: { classPropertyName: "ranges", publicName: "ranges", isSignal: false, isRequired: false, transformFunction: null }, rangesButtonsColor: { classPropertyName: "rangesButtonsColor", publicName: "rangesButtonsColor", isSignal: false, isRequired: false, transformFunction: null }, rangesButtonsSize: { classPropertyName: "rangesButtonsSize", publicName: "rangesButtonsSize", isSignal: false, isRequired: false, transformFunction: null }, rangesButtonsVariant: { classPropertyName: "rangesButtonsVariant", publicName: "rangesButtonsVariant", isSignal: false, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, timepicker: { classPropertyName: "timepicker", publicName: "timepicker", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, valid: { classPropertyName: "valid", publicName: "valid", isSignal: false, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, startDateModel: { classPropertyName: "startDateModel", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null }, endDateModel: { classPropertyName: "endDateModel", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, calendarDate: { classPropertyName: "calendarDate", publicName: "calendarDate", isSignal: false, isRequired: false, transformFunction: dateTransform }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: false, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: false, isRequired: false, transformFunction: numberAttribute }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, navigation: { classPropertyName: "navigation", publicName: "navigation", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, range: { classPropertyName: "range", publicName: "range", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, weekdayFormat: { classPropertyName: "weekdayFormat", publicName: "weekdayFormat", isSignal: false, isRequired: false, transformFunction: null }, popperjsOptions: { classPropertyName: "popperjsOptions", publicName: "popperOptions", isSignal: false, isRequired: false, transformFunction: null }, selectAdjacentDays: { classPropertyName: "selectAdjacentDays", publicName: "selectAdjacentDays", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showAdjacentDays: { classPropertyName: "showAdjacentDays", publicName: "showAdjacentDays", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, selectionType: { classPropertyName: "selectionType", publicName: "selectionType", isSignal: false, isRequired: false, transformFunction: null }, showWeekNumber: { classPropertyName: "showWeekNumber", publicName: "showWeekNumber", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, weekNumbersLabel: { classPropertyName: "weekNumbersLabel", publicName: "weekNumbersLabel", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { startDateModel: "startDateChange", endDateModel: "endDateChange", valueChange: "valueChange", calendarCellHover: "calendarCellHover", calendarDateChange: "calendarDateChange" }, host: { listeners: { "focusout": "onBlur()" }, properties: { "class": "this.datePickerClasses" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DateRangePickerComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "startDateElementRef", first: true, predicate: ["startDateElementRef"], descendants: true }, { propertyName: "endDateElementRef", first: true, predicate: ["endDateElementRef"], descendants: true }], exportAs: ["cDateRangePicker"], usesOnChanges: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <div [caret]=\"false\"\n       [disabled]=\"disabled ?? dropdown.visible\"\n       cDropdownToggle\n       class=\"date-picker-input-group\"\n  >\n    <input #startDateElementRef\n           (change)=\"handleStartDateInputChange($event)\"\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n           cFormControl\n           class=\"date-picker-input\"\n           pattern=\"[1-9]*\"\n    >\n    @if (range && separator !== false) {\n      <div class=\"date-picker-separator\"></div>\n    }\n    @if (range) {\n      <input #endDateElementRef\n             (change)=\"handleEndDateInputChange($event)\"\n             [attr.tabindex]=\"disabled ? -1 : 0\"\n             [formControl]=\"endDateInput\"\n             [ngClass]=\"{hover: !!inputEndHoverValue}\"\n             [placeholder]=\"endDatePlaceholder\"\n             [readonly]=\"inputReadOnly ?? null\"\n             [valid]=\"valid ?? undefined\"\n             cFormControl\n             class=\"date-picker-input\"\n             pattern=\"[1-9]*\"\n      >\n    }\n    @if (indicator) {\n      <div class=\"date-picker-indicator\"></div>\n    }\n    @if (cleaner && startDateElementRef.value && !disabled) {\n      <div (click)=\"!disabled && handleClear($event)\" class=\"date-picker-cleaner\" role=\"button\"></div>\n    }\n  </div>\n  <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n    <div class=\"date-picker-body\">\n      @if (!showRanges) {\n        @if (ranges && customRanges.length > 0) {\n          <div class=\"date-picker-ranges\">\n            @for (customRange of customRanges; track customRange) {\n              <button (click)=\"setCustomRange(customRange)\"\n                      [color]=\"rangesButtonsColor\"\n                      [size]=\"rangesButtonsSize\"\n                      [variant]=\"rangesButtonsVariant\"\n                      cButton>\n                {{ customRange | customRangeKey }}\n              </button>\n            }\n          </div>\n        }\n      }\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        [selectAdjacentDays]=\"selectAdjacentDays\"\n        [showAdjacentDays]=\"showAdjacentDays\"\n        [showWeekNumber]=\"showWeekNumber\"\n        [selectionType]=\"selectionType\"\n        [weekNumbersLabel]=\"weekNumbersLabel\"\n        class=\"date-picker-calendars\"\n      />\n      @if (false && timepicker) {\n        <div class=\"date-picker-timepickers\">\n          <!-- todo-->\n          <c-time-picker\n            variant=\"select\"\n            [locale]=\"locale\"\n            [disabled]=\"!startDate\"\n            [time]=\"startDate ?? undefined\"\n            (timeChange)=\"handleStartTimeChange($event)\"\n          />\n          @if (range) {\n            <c-time-picker\n              variant=\"select\"\n              [locale]=\"locale\"\n              [disabled]=\"!endDate\"\n              [time]=\"endDate ?? undefined\"\n              (timeChange)=\"handleEndTimeChange($event)\"\n            />\n          }\n        </div>\n      }\n    </div>\n    @if (templates?.datePickerFooter) {\n      <div class=\"date-picker-footer\">\n        <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\" />\n      </div>\n    }\n  </div>\n  <ng-content />\n</c-dropdown>\n", styles: [".form-control.date-picker-input:focus{box-shadow:0 0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter", "selectAdjacentDays", "showAdjacentDays", "selectionType", "showWeekNumber", "weekNumbersLabel"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "component", type: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible"], exportAs: ["cDropdownMenu"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "pipe", type: CustomRangeKeyPipe, name: "customRangeKey" }] }); }
+        ], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "startDateElementRef", first: true, predicate: ["startDateElementRef"], descendants: true }, { propertyName: "endDateElementRef", first: true, predicate: ["endDateElementRef"], descendants: true }], exportAs: ["cDateRangePicker"], usesOnChanges: true, ngImport: i0, template: "<fieldset [formGroup]=\"dateRangeGroup\">\n  <c-dropdown #dropdown=\"cDropdown\" [(visible)]=\"visible\" [autoClose]=\"'outside'\" [ngClass]=\"datePickerClasses\"\n              [popperOptions]=\"popperjsOptions\" class=\"date-picker picker\">\n    <div [caret]=\"false\"\n         [disabled]=\"disabled ?? dropdown.visible\"\n         cDropdownToggle\n         class=\"date-picker-input-group\"\n    >\n      <input #startDateElementRef\n             (change)=\"handleStartDateInputChange($event)\"\n             [attr.tabindex]=\"disabled ? -1 : 0\"\n             [ngClass]=\"{hover: !!inputStartHoverValue}\"\n             [placeholder]=\"startDatePlaceholder\"\n             [readonly]=\"inputReadOnly ?? null\"\n             [valid]=\"range ? undefined : valid\"\n             cFormControl\n             class=\"date-picker-input\"\n             formControlName=\"startDateInput\"\n             pattern=\"[1-9]*\"\n      >\n      @if (range && separator !== false) {\n        <div class=\"date-picker-separator\"></div>\n      }\n      @if (range) {\n        <input #endDateElementRef\n               (change)=\"handleEndDateInputChange($event)\"\n               [attr.tabindex]=\"disabled ? -1 : 0\"\n               [ngClass]=\"{hover: !!inputEndHoverValue}\"\n               [placeholder]=\"endDatePlaceholder\"\n               [readonly]=\"inputReadOnly ?? null\"\n               [valid]=\"valid ?? undefined\"\n               cFormControl\n               class=\"date-picker-input\"\n               formControlName=\"endDateInput\"\n               pattern=\"[1-9]*\"\n        >\n      }\n      @if (indicator) {\n        <div class=\"date-picker-indicator\"></div>\n      }\n      @if (cleaner && startDateElementRef.value && !disabled) {\n        <div (click)=\"!disabled && handleClear($event)\" class=\"date-picker-cleaner\" role=\"button\"></div>\n      }\n    </div>\n    <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n      <div class=\"date-picker-body\">\n        @if (!showRanges) {\n          @if (ranges && customRanges.length > 0) {\n            <div class=\"date-picker-ranges\">\n              @for (customRange of customRanges; track customRange) {\n                <button (click)=\"setCustomRange(customRange)\"\n                        [color]=\"rangesButtonsColor\"\n                        [size]=\"rangesButtonsSize\"\n                        [variant]=\"rangesButtonsVariant\"\n                        cButton>\n                  {{ customRange | customRangeKey }}\n                </button>\n              }\n            </div>\n          }\n        }\n        <c-calendar\n          (calendarCellHover)=\"handleCalendarCellHover($event)\"\n          (calendarDateChange)=\"handleCalendarDateChange($event)\"\n          (endDateChange)=\"handleEndDateChange($event)\"\n          (startDateChange)=\"handleStartDateChange($event)\"\n          [calendarDate]=\"calendarDate\"\n          [calendars]=\"isMobile ? 1 : calendars\"\n          [dateFilter]=\"dateFilter\"\n          [dayFormat]=\"dayFormat\"\n          [disabledDates]=\"disabledDates\"\n          [endDate]=\"endDate()\"\n          [firstDayOfWeek]=\"firstDayOfWeek\"\n          [locale]=\"locale()\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [navYearFirst]=\"navYearFirst\"\n          [navigation]=\"navigation\"\n          [range]=\"range\"\n          [selectAdjacentDays]=\"selectAdjacentDays\"\n          [selectionType]=\"selectionType\"\n          [showAdjacentDays]=\"showAdjacentDays\"\n          [showWeekNumber]=\"showWeekNumber\"\n          [startDate]=\"startDate()\"\n          [weekNumbersLabel]=\"weekNumbersLabel\"\n          [weekdayFormat]=\"weekdayFormat\"\n          class=\"date-picker-calendars\"\n        />\n        @if (false && timepicker) {\n          <div class=\"date-picker-timepickers\">\n            <!-- todo-->\n            <c-time-picker\n              variant=\"select\"\n              [locale]=\"locale()\"\n              [disabled]=\"!startDate()\"\n              [time]=\"startDate() ?? undefined\"\n              (timeChange)=\"handleStartTimeChange($event)\"\n            />\n            @if (range) {\n              <c-time-picker\n                variant=\"select\"\n                [locale]=\"locale()\"\n                [disabled]=\"!endDate()\"\n                [time]=\"endDate() ?? undefined\"\n                (timeChange)=\"handleEndTimeChange($event)\"\n              />\n            }\n          </div>\n        }\n      </div>\n      @if (templates?.datePickerFooter) {\n        <div class=\"date-picker-footer\">\n          <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\" />\n        </div>\n      }\n    </div>\n    <ng-content />\n  </c-dropdown>\n</fieldset>\n", styles: [".form-control.date-picker-input:focus{box-shadow:0 0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter", "selectAdjacentDays", "showAdjacentDays", "selectionType", "showWeekNumber", "weekNumbersLabel"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "component", type: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible"], exportAs: ["cDropdownMenu"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "pipe", type: CustomRangeKeyPipe, name: "customRangeKey" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
@@ -8174,7 +8181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                             useExisting: forwardRef(() => DateRangePickerComponent),
                             multi: true
                         }
-                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <div [caret]=\"false\"\n       [disabled]=\"disabled ?? dropdown.visible\"\n       cDropdownToggle\n       class=\"date-picker-input-group\"\n  >\n    <input #startDateElementRef\n           (change)=\"handleStartDateInputChange($event)\"\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n           cFormControl\n           class=\"date-picker-input\"\n           pattern=\"[1-9]*\"\n    >\n    @if (range && separator !== false) {\n      <div class=\"date-picker-separator\"></div>\n    }\n    @if (range) {\n      <input #endDateElementRef\n             (change)=\"handleEndDateInputChange($event)\"\n             [attr.tabindex]=\"disabled ? -1 : 0\"\n             [formControl]=\"endDateInput\"\n             [ngClass]=\"{hover: !!inputEndHoverValue}\"\n             [placeholder]=\"endDatePlaceholder\"\n             [readonly]=\"inputReadOnly ?? null\"\n             [valid]=\"valid ?? undefined\"\n             cFormControl\n             class=\"date-picker-input\"\n             pattern=\"[1-9]*\"\n      >\n    }\n    @if (indicator) {\n      <div class=\"date-picker-indicator\"></div>\n    }\n    @if (cleaner && startDateElementRef.value && !disabled) {\n      <div (click)=\"!disabled && handleClear($event)\" class=\"date-picker-cleaner\" role=\"button\"></div>\n    }\n  </div>\n  <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n    <div class=\"date-picker-body\">\n      @if (!showRanges) {\n        @if (ranges && customRanges.length > 0) {\n          <div class=\"date-picker-ranges\">\n            @for (customRange of customRanges; track customRange) {\n              <button (click)=\"setCustomRange(customRange)\"\n                      [color]=\"rangesButtonsColor\"\n                      [size]=\"rangesButtonsSize\"\n                      [variant]=\"rangesButtonsVariant\"\n                      cButton>\n                {{ customRange | customRangeKey }}\n              </button>\n            }\n          </div>\n        }\n      }\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        [selectAdjacentDays]=\"selectAdjacentDays\"\n        [showAdjacentDays]=\"showAdjacentDays\"\n        [showWeekNumber]=\"showWeekNumber\"\n        [selectionType]=\"selectionType\"\n        [weekNumbersLabel]=\"weekNumbersLabel\"\n        class=\"date-picker-calendars\"\n      />\n      @if (false && timepicker) {\n        <div class=\"date-picker-timepickers\">\n          <!-- todo-->\n          <c-time-picker\n            variant=\"select\"\n            [locale]=\"locale\"\n            [disabled]=\"!startDate\"\n            [time]=\"startDate ?? undefined\"\n            (timeChange)=\"handleStartTimeChange($event)\"\n          />\n          @if (range) {\n            <c-time-picker\n              variant=\"select\"\n              [locale]=\"locale\"\n              [disabled]=\"!endDate\"\n              [time]=\"endDate ?? undefined\"\n              (timeChange)=\"handleEndTimeChange($event)\"\n            />\n          }\n        </div>\n      }\n    </div>\n    @if (templates?.datePickerFooter) {\n      <div class=\"date-picker-footer\">\n        <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\" />\n      </div>\n    }\n  </div>\n  <ng-content />\n</c-dropdown>\n", styles: [".form-control.date-picker-input:focus{box-shadow:0 0}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<fieldset [formGroup]=\"dateRangeGroup\">\n  <c-dropdown #dropdown=\"cDropdown\" [(visible)]=\"visible\" [autoClose]=\"'outside'\" [ngClass]=\"datePickerClasses\"\n              [popperOptions]=\"popperjsOptions\" class=\"date-picker picker\">\n    <div [caret]=\"false\"\n         [disabled]=\"disabled ?? dropdown.visible\"\n         cDropdownToggle\n         class=\"date-picker-input-group\"\n    >\n      <input #startDateElementRef\n             (change)=\"handleStartDateInputChange($event)\"\n             [attr.tabindex]=\"disabled ? -1 : 0\"\n             [ngClass]=\"{hover: !!inputStartHoverValue}\"\n             [placeholder]=\"startDatePlaceholder\"\n             [readonly]=\"inputReadOnly ?? null\"\n             [valid]=\"range ? undefined : valid\"\n             cFormControl\n             class=\"date-picker-input\"\n             formControlName=\"startDateInput\"\n             pattern=\"[1-9]*\"\n      >\n      @if (range && separator !== false) {\n        <div class=\"date-picker-separator\"></div>\n      }\n      @if (range) {\n        <input #endDateElementRef\n               (change)=\"handleEndDateInputChange($event)\"\n               [attr.tabindex]=\"disabled ? -1 : 0\"\n               [ngClass]=\"{hover: !!inputEndHoverValue}\"\n               [placeholder]=\"endDatePlaceholder\"\n               [readonly]=\"inputReadOnly ?? null\"\n               [valid]=\"valid ?? undefined\"\n               cFormControl\n               class=\"date-picker-input\"\n               formControlName=\"endDateInput\"\n               pattern=\"[1-9]*\"\n        >\n      }\n      @if (indicator) {\n        <div class=\"date-picker-indicator\"></div>\n      }\n      @if (cleaner && startDateElementRef.value && !disabled) {\n        <div (click)=\"!disabled && handleClear($event)\" class=\"date-picker-cleaner\" role=\"button\"></div>\n      }\n    </div>\n    <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n      <div class=\"date-picker-body\">\n        @if (!showRanges) {\n          @if (ranges && customRanges.length > 0) {\n            <div class=\"date-picker-ranges\">\n              @for (customRange of customRanges; track customRange) {\n                <button (click)=\"setCustomRange(customRange)\"\n                        [color]=\"rangesButtonsColor\"\n                        [size]=\"rangesButtonsSize\"\n                        [variant]=\"rangesButtonsVariant\"\n                        cButton>\n                  {{ customRange | customRangeKey }}\n                </button>\n              }\n            </div>\n          }\n        }\n        <c-calendar\n          (calendarCellHover)=\"handleCalendarCellHover($event)\"\n          (calendarDateChange)=\"handleCalendarDateChange($event)\"\n          (endDateChange)=\"handleEndDateChange($event)\"\n          (startDateChange)=\"handleStartDateChange($event)\"\n          [calendarDate]=\"calendarDate\"\n          [calendars]=\"isMobile ? 1 : calendars\"\n          [dateFilter]=\"dateFilter\"\n          [dayFormat]=\"dayFormat\"\n          [disabledDates]=\"disabledDates\"\n          [endDate]=\"endDate()\"\n          [firstDayOfWeek]=\"firstDayOfWeek\"\n          [locale]=\"locale()\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [navYearFirst]=\"navYearFirst\"\n          [navigation]=\"navigation\"\n          [range]=\"range\"\n          [selectAdjacentDays]=\"selectAdjacentDays\"\n          [selectionType]=\"selectionType\"\n          [showAdjacentDays]=\"showAdjacentDays\"\n          [showWeekNumber]=\"showWeekNumber\"\n          [startDate]=\"startDate()\"\n          [weekNumbersLabel]=\"weekNumbersLabel\"\n          [weekdayFormat]=\"weekdayFormat\"\n          class=\"date-picker-calendars\"\n        />\n        @if (false && timepicker) {\n          <div class=\"date-picker-timepickers\">\n            <!-- todo-->\n            <c-time-picker\n              variant=\"select\"\n              [locale]=\"locale()\"\n              [disabled]=\"!startDate()\"\n              [time]=\"startDate() ?? undefined\"\n              (timeChange)=\"handleStartTimeChange($event)\"\n            />\n            @if (range) {\n              <c-time-picker\n                variant=\"select\"\n                [locale]=\"locale()\"\n                [disabled]=\"!endDate()\"\n                [time]=\"endDate() ?? undefined\"\n                (timeChange)=\"handleEndTimeChange($event)\"\n              />\n            }\n          </div>\n        }\n      </div>\n      @if (templates?.datePickerFooter) {\n        <div class=\"date-picker-footer\">\n          <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\" />\n        </div>\n      }\n    </div>\n    <ng-content />\n  </c-dropdown>\n</fieldset>\n", styles: [".form-control.date-picker-input:focus{box-shadow:0 0}\n"] }]
         }], ctorParameters: () => [{ type: i1$4.BreakpointObserver }], propDecorators: { dayFormat: [{
                 type: Input
             }], calendars: [{
@@ -8224,10 +8231,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
             }], visible: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], startDate: [{
-                type: Input
-            }], endDate: [{
-                type: Input
             }], calendarDate: [{
                 type: Input,
                 args: [{ transform: dateTransform }]
@@ -8236,8 +8239,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
             }], firstDayOfWeek: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
-            }], locale: [{
-                type: Input
             }], maxDate: [{
                 type: Input
             }], minDate: [{
@@ -8279,10 +8280,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 type: Output
             }], calendarDateChange: [{
                 type: Output
-            }], endDateChange: [{
-                type: Output
-            }], startDateChange: [{
-                type: Output
             }], startDateElementRef: [{
                 type: ViewChild,
                 args: ['startDateElementRef']
@@ -8317,45 +8314,42 @@ class DatePickerComponent extends DateRangePickerComponent {
     constructor(breakpointObserver) {
         super(breakpointObserver);
         this.placeholder = 'Select date';
-        // eslint-disable-next-line @angular-eslint/no-output-rename
-        this.startDateChange = new EventEmitter();
+        this.dateChange = output();
         this.range = false;
         this.calendars = 1;
+        this.endDate = model(null);
     }
-    get endDate() {
-        return null;
+    set date(value) {
+        this.startDateModel.set(value);
     }
     get date() {
-        return this.startDate;
-    }
-    set date(value) {
-        this.startDate = value;
+        return this.startDate();
     }
-    // @ts-ignore
     writeValue(value) {
         this.date = value;
-        this.startDateValue = this.date ? this.date.toLocaleDateString(this.locale) : '';
+        super.writeValue(value);
     }
     subscribeDateChange(subscribe = true) {
         if (subscribe) {
-            this.dateChangeSubscriptions.push(this.startDateChange.subscribe(next => {
+            this.dateChangeSubscriptions.push(this.startDateChange.subscribe((next) => {
                 this.date = next;
                 this.onChange(next);
+                this.dateChange.emit(this.date);
             }));
             return;
         }
-        this.dateChangeSubscriptions.forEach(subscription => {
+        this.dateChangeSubscriptions.forEach((subscription) => {
             subscription?.unsubscribe();
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DatePickerComponent, deps: [{ token: i1$4.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: DatePickerComponent, isStandalone: true, selector: "c-date-picker", inputs: { placeholder: "placeholder", date: "date" }, outputs: { startDateChange: "dateChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: DatePickerComponent, isStandalone: true, selector: "c-date-picker", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange", endDate: "endDateChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DatePickerComponent),
                 multi: true
             }
-        ], exportAs: ["cDatePicker"], usesInheritance: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <div [caret]=\"false\"\n       [disabled]=\"disabled ?? dropdown.visible\"\n       cDropdownToggle\n       class=\"date-picker-input-group\"\n  >\n    <input #startDateElementRef\n           (change)=\"handleStartDateInputChange($event)\"\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n           cFormControl\n           class=\"date-picker-input\"\n           pattern=\"[1-9]*\"\n    >\n    @if (range && separator !== false) {\n      <div class=\"date-picker-separator\"></div>\n    }\n    @if (range) {\n      <input #endDateElementRef\n             (change)=\"handleEndDateInputChange($event)\"\n             [attr.tabindex]=\"disabled ? -1 : 0\"\n             [formControl]=\"endDateInput\"\n             [ngClass]=\"{hover: !!inputEndHoverValue}\"\n             [placeholder]=\"endDatePlaceholder\"\n             [readonly]=\"inputReadOnly ?? null\"\n             [valid]=\"valid ?? undefined\"\n             cFormControl\n             class=\"date-picker-input\"\n             pattern=\"[1-9]*\"\n      >\n    }\n    @if (indicator) {\n      <div class=\"date-picker-indicator\"></div>\n    }\n    @if (cleaner && startDateElementRef.value && !disabled) {\n      <div (click)=\"!disabled && handleClear($event)\" class=\"date-picker-cleaner\" role=\"button\"></div>\n    }\n  </div>\n  <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n    <div class=\"date-picker-body\">\n      @if (!showRanges) {\n        @if (ranges && customRanges.length > 0) {\n          <div class=\"date-picker-ranges\">\n            @for (customRange of customRanges; track customRange) {\n              <button (click)=\"setCustomRange(customRange)\"\n                      [color]=\"rangesButtonsColor\"\n                      [size]=\"rangesButtonsSize\"\n                      [variant]=\"rangesButtonsVariant\"\n                      cButton>\n                {{ customRange | customRangeKey }}\n              </button>\n            }\n          </div>\n        }\n      }\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        [selectAdjacentDays]=\"selectAdjacentDays\"\n        [showAdjacentDays]=\"showAdjacentDays\"\n        [showWeekNumber]=\"showWeekNumber\"\n        [selectionType]=\"selectionType\"\n        [weekNumbersLabel]=\"weekNumbersLabel\"\n        class=\"date-picker-calendars\"\n      />\n      @if (false && timepicker) {\n        <div class=\"date-picker-timepickers\">\n          <!-- todo-->\n          <c-time-picker\n            variant=\"select\"\n            [locale]=\"locale\"\n            [disabled]=\"!startDate\"\n            [time]=\"startDate ?? undefined\"\n            (timeChange)=\"handleStartTimeChange($event)\"\n          />\n          @if (range) {\n            <c-time-picker\n              variant=\"select\"\n              [locale]=\"locale\"\n              [disabled]=\"!endDate\"\n              [time]=\"endDate ?? undefined\"\n              (timeChange)=\"handleEndTimeChange($event)\"\n            />\n          }\n        </div>\n      }\n    </div>\n    @if (templates?.datePickerFooter) {\n      <div class=\"date-picker-footer\">\n        <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\" />\n      </div>\n    }\n  </div>\n  <ng-content />\n</c-dropdown>\n", styles: [".form-control.date-picker-input:focus{box-shadow:0 0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter", "selectAdjacentDays", "showAdjacentDays", "selectionType", "showWeekNumber", "weekNumbersLabel"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "component", type: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible"], exportAs: ["cDropdownMenu"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "pipe", type: CustomRangeKeyPipe, name: "customRangeKey" }] }); }
+        ], exportAs: ["cDatePicker"], usesInheritance: true, ngImport: i0, template: "<fieldset [formGroup]=\"dateRangeGroup\">\n  <c-dropdown #dropdown=\"cDropdown\" [(visible)]=\"visible\" [autoClose]=\"'outside'\" [ngClass]=\"datePickerClasses\"\n              [popperOptions]=\"popperjsOptions\" class=\"date-picker picker\">\n    <div [caret]=\"false\"\n         [disabled]=\"disabled ?? dropdown.visible\"\n         cDropdownToggle\n         class=\"date-picker-input-group\"\n    >\n      <input #startDateElementRef\n             (change)=\"handleStartDateInputChange($event)\"\n             [attr.tabindex]=\"disabled ? -1 : 0\"\n             [ngClass]=\"{hover: !!inputStartHoverValue}\"\n             [placeholder]=\"startDatePlaceholder\"\n             [readonly]=\"inputReadOnly ?? null\"\n             [valid]=\"range ? undefined : valid\"\n             cFormControl\n             class=\"date-picker-input\"\n             formControlName=\"startDateInput\"\n             pattern=\"[1-9]*\"\n      >\n      @if (range && separator !== false) {\n        <div class=\"date-picker-separator\"></div>\n      }\n      @if (range) {\n        <input #endDateElementRef\n               (change)=\"handleEndDateInputChange($event)\"\n               [attr.tabindex]=\"disabled ? -1 : 0\"\n               [ngClass]=\"{hover: !!inputEndHoverValue}\"\n               [placeholder]=\"endDatePlaceholder\"\n               [readonly]=\"inputReadOnly ?? null\"\n               [valid]=\"valid ?? undefined\"\n               cFormControl\n               class=\"date-picker-input\"\n               formControlName=\"endDateInput\"\n               pattern=\"[1-9]*\"\n        >\n      }\n      @if (indicator) {\n        <div class=\"date-picker-indicator\"></div>\n      }\n      @if (cleaner && startDateElementRef.value && !disabled) {\n        <div (click)=\"!disabled && handleClear($event)\" class=\"date-picker-cleaner\" role=\"button\"></div>\n      }\n    </div>\n    <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n      <div class=\"date-picker-body\">\n        @if (!showRanges) {\n          @if (ranges && customRanges.length > 0) {\n            <div class=\"date-picker-ranges\">\n              @for (customRange of customRanges; track customRange) {\n                <button (click)=\"setCustomRange(customRange)\"\n                        [color]=\"rangesButtonsColor\"\n                        [size]=\"rangesButtonsSize\"\n                        [variant]=\"rangesButtonsVariant\"\n                        cButton>\n                  {{ customRange | customRangeKey }}\n                </button>\n              }\n            </div>\n          }\n        }\n        <c-calendar\n          (calendarCellHover)=\"handleCalendarCellHover($event)\"\n          (calendarDateChange)=\"handleCalendarDateChange($event)\"\n          (endDateChange)=\"handleEndDateChange($event)\"\n          (startDateChange)=\"handleStartDateChange($event)\"\n          [calendarDate]=\"calendarDate\"\n          [calendars]=\"isMobile ? 1 : calendars\"\n          [dateFilter]=\"dateFilter\"\n          [dayFormat]=\"dayFormat\"\n          [disabledDates]=\"disabledDates\"\n          [endDate]=\"endDate()\"\n          [firstDayOfWeek]=\"firstDayOfWeek\"\n          [locale]=\"locale()\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [navYearFirst]=\"navYearFirst\"\n          [navigation]=\"navigation\"\n          [range]=\"range\"\n          [selectAdjacentDays]=\"selectAdjacentDays\"\n          [selectionType]=\"selectionType\"\n          [showAdjacentDays]=\"showAdjacentDays\"\n          [showWeekNumber]=\"showWeekNumber\"\n          [startDate]=\"startDate()\"\n          [weekNumbersLabel]=\"weekNumbersLabel\"\n          [weekdayFormat]=\"weekdayFormat\"\n          class=\"date-picker-calendars\"\n        />\n        @if (false && timepicker) {\n          <div class=\"date-picker-timepickers\">\n            <!-- todo-->\n            <c-time-picker\n              variant=\"select\"\n              [locale]=\"locale()\"\n              [disabled]=\"!startDate()\"\n              [time]=\"startDate() ?? undefined\"\n              (timeChange)=\"handleStartTimeChange($event)\"\n            />\n            @if (range) {\n              <c-time-picker\n                variant=\"select\"\n                [locale]=\"locale()\"\n                [disabled]=\"!endDate()\"\n                [time]=\"endDate() ?? undefined\"\n                (timeChange)=\"handleEndTimeChange($event)\"\n              />\n            }\n          </div>\n        }\n      </div>\n      @if (templates?.datePickerFooter) {\n        <div class=\"date-picker-footer\">\n          <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\" />\n        </div>\n      }\n    </div>\n    <ng-content />\n  </c-dropdown>\n</fieldset>\n", styles: [".form-control.date-picker-input:focus{box-shadow:0 0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter", "selectAdjacentDays", "showAdjacentDays", "selectionType", "showWeekNumber", "weekNumbersLabel"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "component", type: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible"], exportAs: ["cDropdownMenu"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "pipe", type: CustomRangeKeyPipe, name: "customRangeKey" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -8379,12 +8373,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                             useExisting: forwardRef(() => DatePickerComponent),
                             multi: true
                         }
-                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n            [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <div [caret]=\"false\"\n       [disabled]=\"disabled ?? dropdown.visible\"\n       cDropdownToggle\n       class=\"date-picker-input-group\"\n  >\n    <input #startDateElementRef\n           (change)=\"handleStartDateInputChange($event)\"\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n           cFormControl\n           class=\"date-picker-input\"\n           pattern=\"[1-9]*\"\n    >\n    @if (range && separator !== false) {\n      <div class=\"date-picker-separator\"></div>\n    }\n    @if (range) {\n      <input #endDateElementRef\n             (change)=\"handleEndDateInputChange($event)\"\n             [attr.tabindex]=\"disabled ? -1 : 0\"\n             [formControl]=\"endDateInput\"\n             [ngClass]=\"{hover: !!inputEndHoverValue}\"\n             [placeholder]=\"endDatePlaceholder\"\n             [readonly]=\"inputReadOnly ?? null\"\n             [valid]=\"valid ?? undefined\"\n             cFormControl\n             class=\"date-picker-input\"\n             pattern=\"[1-9]*\"\n      >\n    }\n    @if (indicator) {\n      <div class=\"date-picker-indicator\"></div>\n    }\n    @if (cleaner && startDateElementRef.value && !disabled) {\n      <div (click)=\"!disabled && handleClear($event)\" class=\"date-picker-cleaner\" role=\"button\"></div>\n    }\n  </div>\n  <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n    <div class=\"date-picker-body\">\n      @if (!showRanges) {\n        @if (ranges && customRanges.length > 0) {\n          <div class=\"date-picker-ranges\">\n            @for (customRange of customRanges; track customRange) {\n              <button (click)=\"setCustomRange(customRange)\"\n                      [color]=\"rangesButtonsColor\"\n                      [size]=\"rangesButtonsSize\"\n                      [variant]=\"rangesButtonsVariant\"\n                      cButton>\n                {{ customRange | customRangeKey }}\n              </button>\n            }\n          </div>\n        }\n      }\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        [selectAdjacentDays]=\"selectAdjacentDays\"\n        [showAdjacentDays]=\"showAdjacentDays\"\n        [showWeekNumber]=\"showWeekNumber\"\n        [selectionType]=\"selectionType\"\n        [weekNumbersLabel]=\"weekNumbersLabel\"\n        class=\"date-picker-calendars\"\n      />\n      @if (false && timepicker) {\n        <div class=\"date-picker-timepickers\">\n          <!-- todo-->\n          <c-time-picker\n            variant=\"select\"\n            [locale]=\"locale\"\n            [disabled]=\"!startDate\"\n            [time]=\"startDate ?? undefined\"\n            (timeChange)=\"handleStartTimeChange($event)\"\n          />\n          @if (range) {\n            <c-time-picker\n              variant=\"select\"\n              [locale]=\"locale\"\n              [disabled]=\"!endDate\"\n              [time]=\"endDate ?? undefined\"\n              (timeChange)=\"handleEndTimeChange($event)\"\n            />\n          }\n        </div>\n      }\n    </div>\n    @if (templates?.datePickerFooter) {\n      <div class=\"date-picker-footer\">\n        <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\" />\n      </div>\n    }\n  </div>\n  <ng-content />\n</c-dropdown>\n", styles: [".form-control.date-picker-input:focus{box-shadow:0 0}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<fieldset [formGroup]=\"dateRangeGroup\">\n  <c-dropdown #dropdown=\"cDropdown\" [(visible)]=\"visible\" [autoClose]=\"'outside'\" [ngClass]=\"datePickerClasses\"\n              [popperOptions]=\"popperjsOptions\" class=\"date-picker picker\">\n    <div [caret]=\"false\"\n         [disabled]=\"disabled ?? dropdown.visible\"\n         cDropdownToggle\n         class=\"date-picker-input-group\"\n    >\n      <input #startDateElementRef\n             (change)=\"handleStartDateInputChange($event)\"\n             [attr.tabindex]=\"disabled ? -1 : 0\"\n             [ngClass]=\"{hover: !!inputStartHoverValue}\"\n             [placeholder]=\"startDatePlaceholder\"\n             [readonly]=\"inputReadOnly ?? null\"\n             [valid]=\"range ? undefined : valid\"\n             cFormControl\n             class=\"date-picker-input\"\n             formControlName=\"startDateInput\"\n             pattern=\"[1-9]*\"\n      >\n      @if (range && separator !== false) {\n        <div class=\"date-picker-separator\"></div>\n      }\n      @if (range) {\n        <input #endDateElementRef\n               (change)=\"handleEndDateInputChange($event)\"\n               [attr.tabindex]=\"disabled ? -1 : 0\"\n               [ngClass]=\"{hover: !!inputEndHoverValue}\"\n               [placeholder]=\"endDatePlaceholder\"\n               [readonly]=\"inputReadOnly ?? null\"\n               [valid]=\"valid ?? undefined\"\n               cFormControl\n               class=\"date-picker-input\"\n               formControlName=\"endDateInput\"\n               pattern=\"[1-9]*\"\n        >\n      }\n      @if (indicator) {\n        <div class=\"date-picker-indicator\"></div>\n      }\n      @if (cleaner && startDateElementRef.value && !disabled) {\n        <div (click)=\"!disabled && handleClear($event)\" class=\"date-picker-cleaner\" role=\"button\"></div>\n      }\n    </div>\n    <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n      <div class=\"date-picker-body\">\n        @if (!showRanges) {\n          @if (ranges && customRanges.length > 0) {\n            <div class=\"date-picker-ranges\">\n              @for (customRange of customRanges; track customRange) {\n                <button (click)=\"setCustomRange(customRange)\"\n                        [color]=\"rangesButtonsColor\"\n                        [size]=\"rangesButtonsSize\"\n                        [variant]=\"rangesButtonsVariant\"\n                        cButton>\n                  {{ customRange | customRangeKey }}\n                </button>\n              }\n            </div>\n          }\n        }\n        <c-calendar\n          (calendarCellHover)=\"handleCalendarCellHover($event)\"\n          (calendarDateChange)=\"handleCalendarDateChange($event)\"\n          (endDateChange)=\"handleEndDateChange($event)\"\n          (startDateChange)=\"handleStartDateChange($event)\"\n          [calendarDate]=\"calendarDate\"\n          [calendars]=\"isMobile ? 1 : calendars\"\n          [dateFilter]=\"dateFilter\"\n          [dayFormat]=\"dayFormat\"\n          [disabledDates]=\"disabledDates\"\n          [endDate]=\"endDate()\"\n          [firstDayOfWeek]=\"firstDayOfWeek\"\n          [locale]=\"locale()\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [navYearFirst]=\"navYearFirst\"\n          [navigation]=\"navigation\"\n          [range]=\"range\"\n          [selectAdjacentDays]=\"selectAdjacentDays\"\n          [selectionType]=\"selectionType\"\n          [showAdjacentDays]=\"showAdjacentDays\"\n          [showWeekNumber]=\"showWeekNumber\"\n          [startDate]=\"startDate()\"\n          [weekNumbersLabel]=\"weekNumbersLabel\"\n          [weekdayFormat]=\"weekdayFormat\"\n          class=\"date-picker-calendars\"\n        />\n        @if (false && timepicker) {\n          <div class=\"date-picker-timepickers\">\n            <!-- todo-->\n            <c-time-picker\n              variant=\"select\"\n              [locale]=\"locale()\"\n              [disabled]=\"!startDate()\"\n              [time]=\"startDate() ?? undefined\"\n              (timeChange)=\"handleStartTimeChange($event)\"\n            />\n            @if (range) {\n              <c-time-picker\n                variant=\"select\"\n                [locale]=\"locale()\"\n                [disabled]=\"!endDate()\"\n                [time]=\"endDate() ?? undefined\"\n                (timeChange)=\"handleEndTimeChange($event)\"\n              />\n            }\n          </div>\n        }\n      </div>\n      @if (templates?.datePickerFooter) {\n        <div class=\"date-picker-footer\">\n          <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\" />\n        </div>\n      }\n    </div>\n    <ng-content />\n  </c-dropdown>\n</fieldset>\n", styles: [".form-control.date-picker-input:focus{box-shadow:0 0}\n"] }]
         }], ctorParameters: () => [{ type: i1$4.BreakpointObserver }], propDecorators: { placeholder: [{
                 type: Input
-            }], startDateChange: [{
-                type: Output,
-                args: ['dateChange']
             }], date: [{
                 type: Input
             }] } });
@@ -10025,7 +10016,7 @@ const observeReferenceResizeModifier = {
         const RO_PROP = '__popperjsRO__';
         const { reference } = state.elements;
         let resizeObserver = new ResizeObserver((entries) => {
-            if (entries.find(entry => entry.target === reference)) {
+            if (entries.find((entry) => entry.target === reference)) {
                 instance.update();
             }
         });
@@ -10182,8 +10173,8 @@ class MultiSelectComponent {
          * @type IPluralMap
          * @default { '=1': 'item selected', 'other': 'items selected' }
          */
-        this.selectionTypeCounterTextPluralMap = { '=1': 'item selected', 'other': 'items selected' };
-        this.#value = [];
+        this.selectionTypeCounterTextPluralMap = { '=1': 'item selected', other: 'items selected' };
+        this.#value = signal([]);
         /**
          * Emits valueChange
          * @type TValue | TValue[]
@@ -10203,6 +10194,7 @@ class MultiSelectComponent {
          * @default 196
          */
         this.itemMinWidth = 196;
+        this.minWidth = signal(this.itemMinWidth);
         this._visible = false;
         /**
          * Emits visibleChange
@@ -10217,7 +10209,7 @@ class MultiSelectComponent {
         this._subtreeFocused = this.focusOrigin(null);
         this.userOptions = this.multiSelectService.getUserOptions();
         this.activeOption = null;
-        this.differ = this.iterableDiffers.find(this.#value).create();
+        this.differ = this.iterableDiffers.find(this.#value()).create();
         this.multiSelectService.setSelectionModel(this.multiple);
         this.optionsArray$ = this.multiSelectService.getOptionsArray();
     }
@@ -10226,7 +10218,7 @@ class MultiSelectComponent {
     #options;
     #optionsContent;
     writeValue(value) {
-        if ((value !== undefined && value !== null)) {
+        if (value !== undefined && value !== null) {
             this.value = Array.isArray(value) ? [...value] : [value];
         }
         else {
@@ -10318,22 +10310,22 @@ class MultiSelectComponent {
     }
     /**
      * Initial value of multi-select
-     * @type TValue | TValue[]
+     * @type (TValue | TValue[])
      */
     set value(value) {
         const newValue = Array.isArray(value) ? [...value] : [value];
-        if (this.differ) {
-            const changes = this.differ.diff(newValue);
-            if (changes) {
-                this.#value = [...newValue];
-                this.value$.next([...newValue]);
-                this.onChange(this.value);
-                // this.valueChange.emit(this.value);
-            }
+        // if (this.differ) {
+        const changes = this.differ?.diff(newValue);
+        if (changes) {
+            this.#value.set([...newValue]);
+            this.value$.next([...newValue]);
+            this.onChange(this.value);
+            // this.valueChange.emit(this.value);
         }
+        // }
     }
     get value() {
-        const value = this.multiSelectService.selectionModel?.selected ?? [...this.#value];
+        const value = this.multiSelectService.selectionModel?.selected ?? [...this.#value()];
         return this.multiple ? [...value] : value[0];
     }
     #value;
@@ -10355,7 +10347,7 @@ class MultiSelectComponent {
      */
     set visibleItems(value) {
         this._visibleItems = value > 0 ? value : 8;
-        this.optionsMaxHeight = ((this.itemSize * this._visibleItems) + 16).toString();
+        this.optionsMaxHeight = (this.itemSize * this._visibleItems + 16).toString();
     }
     get visibleItems() {
         return this._visibleItems;
@@ -10390,7 +10382,7 @@ class MultiSelectComponent {
         const currOptions = {
             ...options,
             modifiers: [
-                ...prevModifiers.filter(prevModifier => !currModifiers.find(currModifier => currModifier.name === prevModifier.name)),
+                ...prevModifiers.filter((prevModifier) => !currModifiers.find((currModifier) => currModifier.name === prevModifier.name)),
                 ...currModifiers
             ]
         };
@@ -10404,7 +10396,7 @@ class MultiSelectComponent {
         return [...this.optionsSelected.values()];
     }
     get selectedOptionsText() {
-        return this.selectedOptions.map(option => option.label).join(', ');
+        return this.selectedOptions.map((option) => option.label).join(', ');
     }
     get counterText() {
         return `${this.selectedOptions.length} ${this.selectionTypeCounterText}`;
@@ -10412,7 +10404,6 @@ class MultiSelectComponent {
     get counterTextType() {
         return typeof (this.selectionTypeCounterTextPluralMap ?? this.selectionTypeCounterText);
     }
-    ;
     get counterPlaceholderText() {
         if (this.selectedOptions.length === 0 || this.selectionType !== 'counter') {
             return null;
@@ -10465,7 +10456,8 @@ class MultiSelectComponent {
             this.setFocus('keyboard', 'onKeyUp');
             return;
         }
-        if (['Enter', 'Space', 'ArrowDown'].includes($event.code) && [this.inputElement?.nativeElement, this.elementRef.nativeElement].includes($event.target)) {
+        if (['Enter', 'Space', 'ArrowDown'].includes($event.code) &&
+            [this.inputElement?.nativeElement, this.elementRef.nativeElement].includes($event.target)) {
             $event.stopPropagation();
             this.visible = true;
             if (!this.search) {
@@ -10489,12 +10481,16 @@ class MultiSelectComponent {
             if (this.visible && this.subtreeFocused) {
                 if (targetTagName === 'C-MULTI-SELECT-OPTION') {
                     if (this.tabTarget === 'C-MULTI-SELECT-OPTION') {
-                        if ($event.shiftKey && this.focusKeyManager.activeItem?.value === this.options.filter(option => option.visible && !option.disabled).slice(0)[0].value) {
+                        if ($event.shiftKey &&
+                            this.focusKeyManager.activeItem?.value ===
+                                this.options.filter((option) => option.visible && !option.disabled).slice(0)[0].value) {
                             this.setFocus('keyboard', 'onKeyUp');
                             this.tabTarget = targetTagName;
                             return;
                         }
-                        if (!$event.shiftKey && this.focusKeyManager.activeItem?.value === this.options.filter(option => option.visible && !option.disabled).slice(-1)[0].value) {
+                        if (!$event.shiftKey &&
+                            this.focusKeyManager.activeItem?.value ===
+                                this.options.filter((option) => option.visible && !option.disabled).slice(-1)[0].value) {
                             this.setFocus('keyboard', 'onKeyUp');
                             this.tabTarget = targetTagName;
                             this.updateActiveItem(0);
@@ -10581,21 +10577,23 @@ class MultiSelectComponent {
     }
     ngOnInit() {
         this.multiSelectService.selectionModel.changed
-            .pipe(filter(() => !this.multiple), delay(0), tap(change => {
+            .pipe(filter(() => !this.multiple), delay(0), tap((change) => {
             if (change.added.length > 0) {
                 // close dropdown for single select (!multiple)
                 this.visible = false;
                 this.searchValue = '';
             }
-        }), skip(1), tap(change => {
+        }), skip(1), tap((change) => {
             this.setFocus('program', 'selectionModel.changed (single)');
         }), takeUntilDestroyed(this.#destroyRef))
             .subscribe();
-        this.#optionsReady$.pipe(filter(() => !this.virtualScroller), delay(0), tap(() => {
+        this.#optionsReady$
+            .pipe(filter(() => !this.virtualScroller), delay(0), tap(() => {
             this.setFocusKeyManager([...this.multiSelectOptionsContent, ...this.multiSelectOptionsView]);
-        }), takeUntilDestroyed(this.#destroyRef)).subscribe();
+        }), takeUntilDestroyed(this.#destroyRef))
+            .subscribe();
         this.multiSelectService.selectionModel.changed
-            .pipe(tap(change => {
+            .pipe(tap((change) => {
             const { added } = { ...change };
             if (added.length > 0 && this.clearSearchOnSelect) {
                 this.searchValue = '';
@@ -10607,10 +10605,10 @@ class MultiSelectComponent {
         // delay(0),
         combineLatestWith(this.#optionsReady$), tap(([change, ready]) => {
             const { removed } = { ...change };
-            removed.forEach(value => {
+            removed.forEach((value) => {
                 this.optionsSelected.delete(value);
             });
-            this.multiSelectService.selectionModel.selected.forEach(key => {
+            this.multiSelectService.selectionModel.selected.forEach((key) => {
                 const value = this.#options.get(key);
                 if (value) {
                     this.optionsSelected.set(key, value);
@@ -10623,20 +10621,18 @@ class MultiSelectComponent {
         }), takeUntilDestroyed(this.#destroyRef))
             .subscribe();
         // set initial values
-        this.multiSelectService.selectionModel.select(...this.#value);
-        this.value$
-            .pipe(takeUntilDestroyed(this.#destroyRef))
-            .subscribe(value => {
+        this.multiSelectService.selectionModel.select(...this.#value());
+        this.value$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((value) => {
             if (!value.length) {
                 this.clearAllOptions();
                 return;
             }
-            value.forEach(value => {
+            value.forEach((value) => {
                 this.multiSelectService.selectionModel.select(value);
             });
         });
         this.value$
-            .pipe(debounceTime(100), tap(value => {
+            .pipe(debounceTime(100), distinctUntilChanged(), tap((value) => {
             this.valueChange.emit(this.value);
         }), takeUntilDestroyed(this.#destroyRef))
             .subscribe();
@@ -10645,15 +10641,15 @@ class MultiSelectComponent {
             this.visibleOptions.set(options.some((item) => item.visible) || userOptions.some((item) => item.visible));
             this.activeOption = null;
             if (this.virtualScroller) {
-                this.multiSelectOptionsContent?.forEach(option => {
+                this.multiSelectOptionsContent?.forEach((option) => {
                     option.active = false;
                 });
                 this.scrollViewport?.setRenderedRange({ start: 0, end: this.visibleItems });
                 this.scrollViewport?.scrollToIndex(0);
             }
             else {
-                this.multiSelectOptionsContent?.forEach(option => {
-                    const found = options.find(item => item.value === option.value);
+                this.multiSelectOptionsContent?.forEach((option) => {
+                    const found = options.find((item) => item.value === option.value);
                     option.visible = found?.visible ?? false;
                     option.active = false;
                 });
@@ -10688,17 +10684,21 @@ class MultiSelectComponent {
     }
     makeOptions(options) {
         if (this.search === 'external' && this.searchValue.length) {
-            this.#options.forEach((value, key) => {
-                value.visible = false;
+            this.#options.forEach((option, key) => {
+                option.visible = false;
             });
         }
-        options.forEach(option => {
+        options.forEach((option) => {
             const key = option.value;
             const value = {
                 value: option.value ?? option.label,
                 label: option.label ?? option.value?.toString(),
                 disabled: option.disabled === true,
-                visible: this.search === 'external' ? true : option.custom && option.selected ? option.visible : option.visible !== false,
+                visible: this.search === 'external'
+                    ? true
+                    : option.custom && option.selected
+                        ? option.visible
+                        : option.visible !== false,
                 text: option.text ?? option.label ?? option.value?.toString(),
                 selected: option.selected,
                 custom: option.custom
@@ -10719,7 +10719,7 @@ class MultiSelectComponent {
     // });
     addUserOption() {
         if (this.allowCreateOptions) {
-            if (this.userOptions().some(option => option.value === this.searchValue)) {
+            if (this.userOptions().some((option) => option.value === this.searchValue)) {
                 return;
             }
             if (this.#options.get(this.searchValue)) {
@@ -10733,7 +10733,7 @@ class MultiSelectComponent {
                 custom: true,
                 selected: true
             };
-            this.searchValue = (this.clearSearchOnSelect || this.allowCreateOptions) ? '' : this.searchValue;
+            this.searchValue = this.clearSearchOnSelect || this.allowCreateOptions ? '' : this.searchValue;
             this.multiSelectService.addUserOption(userOption);
             this.multiSelectService.selectionModel.select(userOption.value);
             this.optionsSelected.set(userOption.value, userOption);
@@ -10747,18 +10747,21 @@ class MultiSelectComponent {
         this.setVirtualScroller();
         this.multiSelectOptionsContent?.changes
             .pipe(delay(0), distinctUntilChanged((previous, current) => {
-            const prev = previous.toArray().map(option => option.value);
-            const curr = current.toArray().map(option => option.value);
+            const prev = previous.toArray().map((option) => option.value);
+            const curr = current.toArray().map((option) => option.value);
             if (this.virtualScroller) {
                 return JSON.stringify(prev) === JSON.stringify(curr);
             }
             return JSON.stringify(this.#optionsContent) === JSON.stringify(curr);
-        }), tap(changes => {
-            this.#optionsContent = changes.toArray().map(option => option.value);
+        }), tap((changes) => {
+            this.#optionsContent = changes.toArray().map((option) => option.value);
         }), takeUntilDestroyed(this.#destroyRef))
-            .subscribe(next => {
+            .subscribe((next) => {
             this.visibleOptions.set(this.multiSelectOptionsContent?.some((option) => option.visible));
             if (this.visibleOptions()) {
+                if (!this.virtualScroller) {
+                    this.#options.clear();
+                }
                 this.makeOptions(this.multiSelectOptionsContent.toArray());
             }
         });
@@ -10793,6 +10796,10 @@ class MultiSelectComponent {
                 }
                 else {
                     if (this.virtualScroller) {
+                        {
+                            const dropdownMinWidth = parseInt(this.dropdownMenu.nativeElement.style.minWidth, 10);
+                            this.minWidth.set(this.itemMinWidth > dropdownMinWidth ? this.itemMinWidth : dropdownMinWidth);
+                        }
                         this.scrollViewport?.setRenderedRange({ start: 0, end: this.visibleItems });
                         this.scrollViewport?.scrollToIndex(0);
                     }
@@ -10804,7 +10811,9 @@ class MultiSelectComponent {
     }
     clearAllOptions($event) {
         setTimeout(() => {
-            const enabledOptions = Array.from(this.optionsSelected.values()).filter(option => !option.disabled).map(option => option.value);
+            const enabledOptions = Array.from(this.optionsSelected.values())
+                .filter((option) => !option.disabled)
+                .map((option) => option.value);
             this.multiSelectService.selectionModel.deselect(...enabledOptions);
             this.removeAllUserOptions();
             this.searchValue = '';
@@ -10814,7 +10823,9 @@ class MultiSelectComponent {
         });
     }
     selectAllOptions() {
-        const enabledOptions = Array.from(this.#options.values()).filter(option => option.visible && !option.disabled).map(option => option.value);
+        const enabledOptions = Array.from(this.#options.values())
+            .filter((option) => option.visible && !option.disabled)
+            .map((option) => option.value);
         this.multiSelectService.selectionModel.select(...enabledOptions);
         this.inputElementSize();
     }
@@ -10863,7 +10874,7 @@ class MultiSelectComponent {
         if (!this.nativeSelectRef || !this.nativeId) {
             return;
         }
-        const options = Array.from(this.optionsSelected).map(item => {
+        const options = Array.from(this.optionsSelected).map((item) => {
             const { selected, value, label } = item[1];
             return { selected, value, label };
         });
@@ -10900,7 +10911,7 @@ class MultiSelectComponent {
         }
         if (['Backspace', 'Delete'].includes($event.key)) {
             $event.stopPropagation();
-            const last = this.selectedOptions.filter(option => !option.disabled).pop();
+            const last = this.selectedOptions.filter((option) => !option.disabled).pop();
             if (last) {
                 this.multiSelectService.selectionModel.deselect(last.value);
             }
@@ -10919,7 +10930,8 @@ class MultiSelectComponent {
             //     takeUntilDestroyed(this.#destroyRef)
             //   )
             //   .subscribe();
-            this.focusMonitorSubscription = this.focusMonitor?.monitor(this.elementRef, true)
+            this.focusMonitorSubscription = this.focusMonitor
+                ?.monitor(this.elementRef, true)
                 .pipe(
             // to avoid focus lost on speed scrolling with virtualScroll
             debounceTime(100), takeUntilDestroyed(this.#destroyRef))
@@ -10939,19 +10951,19 @@ class MultiSelectComponent {
         if (!this.scrollViewport) {
             this.scrollViewport = scrollViewport;
         }
-        const availableOptions = this.options.filter(option => option.visible);
+        const availableOptions = this.options.filter((option) => option.visible);
         const firstVisibleOption = availableOptions[scrolledIndex];
-        const activeOptionIndex = availableOptions.findIndex(option => option.value === this.activeOption?.value);
+        const activeOptionIndex = availableOptions.findIndex((option) => option.value === this.activeOption?.value);
         const optionsArray = this.multiSelectOptionsContent.toArray();
         if (scrolledIndex > activeOptionIndex) {
-            const firstVisibleItem = optionsArray.find(option => option.value === firstVisibleOption?.value);
+            const firstVisibleItem = optionsArray.find((option) => option.value === firstVisibleOption?.value);
             if (firstVisibleItem && scrolledIndex) {
                 this.focusKeyManager.setActiveItem(firstVisibleItem);
             }
             return;
         }
         if (scrolledIndex + this.visibleItems - 2 <= activeOptionIndex) {
-            const lastVisibleItem = optionsArray.findIndex(option => option.value === firstVisibleOption.value);
+            const lastVisibleItem = optionsArray.findIndex((option) => option.value === firstVisibleOption.value);
             if (lastVisibleItem > -1) {
                 this.focusKeyManager.setActiveItem(lastVisibleItem + this.visibleItems - 2);
             }
@@ -10990,14 +11002,12 @@ class MultiSelectComponent {
             return [...option.elementRef.nativeElement.parentElement.children]?.indexOf(option.elementRef.nativeElement);
         };
         const optionsChange$ = this.multiSelectOptionsContent.changes;
-        const sortedOptions$ = optionsChange$.pipe(map(options => options.toArray()), filter(options => options.length > 0), map(options => options.sort((a, b) => indexOfOption(a) - indexOfOption(b))), takeUntilDestroyed(this.#destroyRef));
-        sortedOptions$
-            .pipe(takeUntilDestroyed(this.#destroyRef))
-            .subscribe(sortedOptions => {
+        const sortedOptions$ = optionsChange$.pipe(map((options) => options.toArray()), filter((options) => options.length > 0), map((options) => options.sort((a, b) => indexOfOption(a) - indexOfOption(b))), takeUntilDestroyed(this.#destroyRef));
+        sortedOptions$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((sortedOptions) => {
             return this.multiSelectOptionsContent.reset(sortedOptions);
         });
         this.scrollViewportView.changes
-            .pipe(take(1), map(changes => changes.toArray()[0]), tap((scrollViewport) => {
+            .pipe(take(1), map((changes) => changes.toArray()[0]), tap((scrollViewport) => {
             if (!this.scrollViewport) {
                 this.scrollViewport = scrollViewport;
                 const cdkVirtualScrollContentWrapper = this.scrollViewport.getElementRef().nativeElement?.firstElementChild;
@@ -11005,8 +11015,8 @@ class MultiSelectComponent {
                     const style = getComputedStyle(cdkVirtualScrollContentWrapper, null) ?? undefined;
                     const padding = parseInt(style?.getPropertyValue('padding-left') ?? '12px') * 3;
                     const observer = new MutationObserver((mutationRecords) => {
-                        mutationRecords.forEach(child => {
-                            child.addedNodes.forEach(node => {
+                        mutationRecords.forEach((child) => {
+                            child.addedNodes.forEach((node) => {
                                 if (node.nodeName === 'C-MULTI-SELECT-OPTION') {
                                     const width = node.offsetWidth;
                                     if (width > this.itemMinWidth) {
@@ -11038,16 +11048,14 @@ class MultiSelectComponent {
         this.focusKeyManager = new FocusKeyManager(focusableOptions)
             .withHomeAndEnd()
             .withPageUpDown()
-            .skipPredicate((option) => (option.disabled || !option.visible));
+            .skipPredicate((option) => option.disabled || !option.visible);
         if (!this._virtualScroller) {
             this.focusKeyManager.withTypeAhead(300);
         }
         this.focusKeyManager.tabOut
             .pipe(takeUntilDestroyed(this.#destroyRef), tap(() => { }))
             .subscribe();
-        this.focusKeyManager.change
-            .pipe(takeUntilDestroyed(this.#destroyRef))
-            .subscribe(change => {
+        this.focusKeyManager.change.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((change) => {
             if (change < 0) {
                 this.activeOption ? this.focusKeyManager.setActiveItem(this.activeOption) : this.setFirstItemActive();
             }
@@ -11065,21 +11073,26 @@ class MultiSelectComponent {
         // }
     }
     get firstFocusableItem() {
-        return this.multiSelectOptionsContent?.find(option => option.visible && !option.disabled) ?? this.multiSelectOptionsView?.find(option => option.visible && !option.disabled);
+        return (this.multiSelectOptionsContent?.find((option) => option.visible && !option.disabled) ??
+            this.multiSelectOptionsView?.find((option) => option.visible && !option.disabled));
     }
     setFirstItemActive() {
         const firstFocusableItem = this.firstFocusableItem;
-        firstFocusableItem ? this.focusKeyManager?.setActiveItem(firstFocusableItem) : this.focusKeyManager?.setFirstItemActive();
+        firstFocusableItem
+            ? this.focusKeyManager?.setActiveItem(firstFocusableItem)
+            : this.focusKeyManager?.setFirstItemActive();
         this.activeOption = this.focusKeyManager?.activeItem ?? null;
     }
     updateActiveItem(item) {
         const firstFocusableItem = this.firstFocusableItem ?? item;
-        firstFocusableItem ? this.focusKeyManager?.updateActiveItem(firstFocusableItem) : this.focusKeyManager?.updateActiveItem(0);
+        firstFocusableItem
+            ? this.focusKeyManager?.updateActiveItem(firstFocusableItem)
+            : this.focusKeyManager?.updateActiveItem(0);
         if (this.focusKeyManager?.activeItem) {
-            this.multiSelectOptionsContent?.forEach(option => {
+            this.multiSelectOptionsContent?.forEach((option) => {
                 option.active = false;
             });
-            this.multiSelectOptionsView?.forEach(option => {
+            this.multiSelectOptionsView?.forEach((option) => {
                 option.active = false;
             });
             this.focusKeyManager.activeItem.active = true;
@@ -11096,9 +11109,11 @@ class MultiSelectComponent {
             I18nPluralPipe,
             MultiSelectService,
             {
-                provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MultiSelectComponent), multi: true
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MultiSelectComponent),
+                multi: true
             }
-        ], queries: [{ propertyName: "multiSelectOptionsContent", predicate: MultiSelectOptionComponent, descendants: true }, { propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "optionsElementRef", first: true, predicate: ["options"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }, { propertyName: "dropdown", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef }, { propertyName: "dropdownToggle", first: true, predicate: DropdownToggleDirective, descendants: true, read: ElementRef }, { propertyName: "multiSelectOptionsView", predicate: MultiSelectOptionComponent, descendants: true }, { propertyName: "scrollViewportView", predicate: ["scrollViewport"], descendants: true }], exportAs: ["cMultiSelect"], usesOnChanges: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\"\n            [(visible)]=\"visible\"\n            [autoClose]=\"'outside'\"\n            [ngClass]=\"multiselectClasses\"\n            [popperOptions]=\"popperOptions\">\n  <div #dropdownToggle=\"cDropdownToggle\" [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle role=\"button\"\n       class=\"form-multi-select-input-group\">\n    <span\n      [ngClass]=\"{'form-multi-select-selection': true, 'form-multi-select-selection-tags': (selectionType === 'tags' && selectedOptions.length)}\">\n      @if (selectionType === 'tags') {\n        @if (optionsSelected$ | async; as optionTags) {\n          @for (option of optionTags; track option.value; let i = $index) {\n            <c-multi-select-tag\n              (remove)=\"handleTagRemove($event)\"\n              [disabled]=\"option.disabled ?? false\"\n              [label]=\"option.label ?? option.value?.toString()\"\n              [option]=\"option\"\n              [value]=\"option.value\"\n              class=\"form-multi-select-tag text-truncate\"\n              tabindex=\"-1\"\n            />\n          }\n        }\n      } @else if (selectionType === 'text' && !!selectedOptions.length) {\n        @for (option of selectedOptions; track option.value; let i = $index, last = $last) {\n          <span class=\"form-multi-select-text text-truncate\">{{ option.label }}{{ last ? '&nbsp;' : ',&nbsp;' }}</span>\n        }\n      }\n      @if (!search) {\n        <span class=\"text-placeholder text-truncate\">\n          {{ optionsSelected.size === 0 ? placeholder : counterPlaceholderText }}\n        </span>\n      }\n      @if (search) {\n        <input\n          #inputElement\n          (keydown)=\"handleSearchKeyDown($event)\"\n          (valueChange)=\"handleSearchValueChange($event)\"\n          [attr.placeholder]=\"selectedOptions.length === 0 ? placeholder : counterPlaceholderText\"\n          [disabled]=\"disabled || !search\"\n          [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search), 'text-truncate': true }\"\n          [ngModel]=\"searchValue\"\n          [value]=\"searchValue\"\n          autocomplete=\"off\"\n          cMultiSelectSearch\n          size=\"2\"\n          tabindex=\"{{ disabled ? -1 : 0 }}\"\n          type=\"text\"\n        >\n      }\n    </span>\n    <div class=\"form-multi-select-buttons\">\n      @if (!!cleaner && optionsSelected.size > 0 && !disabled) {\n        <button\n          (click)=\"clearAllOptions($event)\"\n          [disabled]=\"disabled || (!isDropdownVisible && cleaner !== 'active')\"\n          aria-label=\"Clear all\"\n          class=\"form-multi-select-cleaner\"\n          type=\"button\"\n        ></button>\n      }\n      <button (click)=\"handleIndicatorClick($event)\"\n              [disabled]=\"disabled\"\n              class=\"form-multi-select-indicator\"\n              type=\"button\">\n      </button>\n    </div>\n  </div>\n  @if (!disabled) {\n    <div #dropdownMenu=\"cDropdownMenu\" [visible]=\"dropdown.visible\" cDropdownMenu\n         class=\"form-multi-select-dropdown\" role=\"menu\">\n      @if (visibleOptions() && options.length > 0) {\n        @if (selectAll && multiple && !virtualScroller) {\n          <button\n            (click)=\"selectAllOptions()\"\n            class=\"form-multi-select-all\"\n            type=\"button\"\n            tabindex=\"0\"\n          >\n            {{ selectAllLabel }}\n          </button>\n        }\n      }\n      @if ((visibleOptions() && options.length > 0) || isLoading()) {\n        <ng-container *ngTemplateOutlet=\"virtualScroller ? multiselectVirtualScroller : multiselectOptionsDiv\" />\n      } @else {\n        <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\n      }\n      @if (isLoading()) {\n        <c-element-cover [ngStyle]=\"{'border-radius': '6px', 'z-index': 2}\" />\n      }\n    </div>\n  }\n</c-dropdown>\n\n<ng-template #multiselectVirtualScroller>\n  @defer (on immediate) {\n    @if ((optionsArray$ | async); as optionsArray) {\n      <cdk-virtual-scroll-viewport\n        #scrollViewport\n        (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n        [itemSize]=\"itemSize\"\n        [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'height.px': optionsMaxHeight, 'maxHeight.px': optionsMaxHeight, 'minWidth.px': itemMinWidth ?? 196, overflowX: 'hidden' } : { 'minWidth.px': itemMinWidth ?? 196, overflowX: 'hidden'}\"\n        maxBufferPx=\"{{itemSize * visibleItems}}\"\n        minBufferPx=\"{{itemSize * visibleItems}}\"\n        class=\"form-multi-select-options\"\n        tabindex=\"-1\"\n      >\n        <ng-container\n          #cdkVirtualFor\n          *cdkVirtualFor=\"let option of optionsArray; trackBy: trackByFn; templateCacheSize: 0; even as even; odd as odd; index as index; count as count; first as first; last as last;\"\n          [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n          [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n        />\n      </cdk-virtual-scroll-viewport>\n    }\n  }\n</ng-template>\n\n<ng-template #multiselectOptionsDiv>\n  <div\n    [ngClass]=\"{'form-multi-select-options': visibleOptions()}\"\n    [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflowY: 'scroll' } : {}\"\n  >\n    <ng-content />\n    <ng-container [ngTemplateOutlet]=\"userOptionsTemplate\" />\n  </div>\n</ng-template>\n\n<ng-template #defaultMultiSelectOptionTemplate let-option>\n  <c-multi-select-option\n    [disabled]=\"option.disabled\"\n    [label]=\"option.label\"\n    [text]=\"option.text\"\n    [value]=\"option.value\"\n    [visible]=\"option.visible\"\n  >\n    {{ option.text }}\n  </c-multi-select-option>\n</ng-template>\n\n<ng-template #userOptionsTemplate>\n  @for (option of userOptionsArray$ | async; track option; let even = $even, odd = $odd, index = $index, count = $count, first = $first, last = $last) {\n    <ng-container\n      [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n      [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n    />\n  }\n</ng-template>\n", styles: [":host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{outline:none;box-shadow:0 0 0 var(--cui-focus-ring-width) var(--cui-focus-ring-color);border-radius:var(--cui-border-radius, .375rem)}:host:not(.cdk-focused) .form-multi-select:not(.show) input.form-multi-select-search:not([placeholder]){display:none}:host .form-multi-select .form-multi-select-selection{display:flex;flex:1 1 auto;flex-wrap:wrap}:host .form-multi-select .form-multi-select-selection .text-placeholder,:host .form-multi-select .form-multi-select-selection .form-multi-select-search::placeholder{color:var(--cui-form-multi-select-color);opacity:.8}:host .form-multi-select .form-multi-select-search[size]{display:flex}:host ::ng-deep .cdk-virtual-scroll-content-wrapper{padding:var(--cui-form-multi-select-options-padding-y) var(--cui-form-multi-select-options-padding-x);font-size:1rem;color:var(--cui-form-multi-select-options-color)}:host .cdk-virtual-scroll-viewport{width:var(--cui-dropdown-min-width)}:host .dropdown-menu{--cui-dropdown-padding-y: 0}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MultiSelectTagComponent, selector: "c-multi-select-tag", inputs: ["option", "disabled", "label", "value"], outputs: ["remove"] }, { kind: "component", type: MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: ["optionsStyle", "label", "text", "visible", "disabled", "selected", "value", "active", "role"], outputs: ["selectedChange", "focusChange"], exportAs: ["cMultiSelectOption"] }, { kind: "directive", type: MultiSelectSearchDirective, selector: "[cMultiSelectSearch]", inputs: ["delay", "value"], outputs: ["valueChange"], exportAs: ["cMultiSelectSearch"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible"], exportAs: ["cDropdownMenu"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }] }); }
+        ], queries: [{ propertyName: "multiSelectOptionsContent", predicate: MultiSelectOptionComponent, descendants: true }, { propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "optionsElementRef", first: true, predicate: ["options"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownMenu", first: true, predicate: DropdownMenuDirective, descendants: true, read: ElementRef }, { propertyName: "dropdown", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef }, { propertyName: "dropdownToggle", first: true, predicate: DropdownToggleDirective, descendants: true, read: ElementRef }, { propertyName: "multiSelectOptionsView", predicate: MultiSelectOptionComponent, descendants: true }, { propertyName: "scrollViewportView", predicate: ["scrollViewport"], descendants: true }], exportAs: ["cMultiSelect"], usesOnChanges: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\"\n            [(visible)]=\"visible\"\n            [autoClose]=\"'outside'\"\n            [ngClass]=\"multiselectClasses\"\n            [popperOptions]=\"popperOptions\">\n  <div #dropdownToggle=\"cDropdownToggle\" [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle role=\"button\"\n       class=\"form-multi-select-input-group\">\n    <span\n      [ngClass]=\"{'form-multi-select-selection': true, 'form-multi-select-selection-tags': (selectionType === 'tags' && selectedOptions.length)}\">\n      @if (selectionType === 'tags') {\n        @if (optionsSelected$ | async; as optionTags) {\n          @for (option of optionTags; track option.value; let i = $index) {\n            <c-multi-select-tag\n              (remove)=\"handleTagRemove($event)\"\n              [disabled]=\"option.disabled ?? false\"\n              [label]=\"option.label ?? option.value?.toString()\"\n              [option]=\"option\"\n              [value]=\"option.value\"\n              class=\"form-multi-select-tag text-truncate\"\n              tabindex=\"-1\"\n            />\n          }\n        }\n      } @else if (selectionType === 'text' && !!selectedOptions.length) {\n        @for (option of selectedOptions; track option.value; let i = $index, last = $last) {\n          <span class=\"form-multi-select-text text-truncate\">{{ option.label }}{{ last ? '&nbsp;' : ',&nbsp;' }}</span>\n        }\n      }\n      @if (!search) {\n        <span class=\"text-placeholder text-truncate\">\n          {{ optionsSelected.size === 0 ? placeholder : counterPlaceholderText }}\n        </span>\n      }\n      @if (search) {\n        <input\n          #inputElement\n          (keydown)=\"handleSearchKeyDown($event)\"\n          (valueChange)=\"handleSearchValueChange($event)\"\n          [attr.placeholder]=\"selectedOptions.length === 0 ? placeholder : counterPlaceholderText\"\n          [disabled]=\"disabled || !search\"\n          [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search), 'text-truncate': true }\"\n          [ngModel]=\"searchValue\"\n          [value]=\"searchValue\"\n          autocomplete=\"off\"\n          cMultiSelectSearch\n          size=\"2\"\n          tabindex=\"{{ disabled ? -1 : 0 }}\"\n          type=\"text\"\n        >\n      }\n    </span>\n    <div class=\"form-multi-select-buttons\">\n      @if (!!cleaner && optionsSelected.size > 0 && !disabled) {\n        <button\n          (click)=\"clearAllOptions($event)\"\n          [disabled]=\"disabled || (!isDropdownVisible && cleaner !== 'active')\"\n          aria-label=\"Clear all\"\n          class=\"form-multi-select-cleaner\"\n          type=\"button\"\n        ></button>\n      }\n      <button (click)=\"handleIndicatorClick($event)\"\n              [disabled]=\"disabled\"\n              class=\"form-multi-select-indicator\"\n              type=\"button\">\n      </button>\n    </div>\n  </div>\n  @if (!disabled) {\n    <div #dropdownMenu=\"cDropdownMenu\" [visible]=\"dropdown.visible\" cDropdownMenu\n         class=\"form-multi-select-dropdown\" role=\"menu\">\n      @if (visibleOptions() && options.length > 0) {\n        @if (selectAll && multiple && !virtualScroller) {\n          <button\n            (click)=\"selectAllOptions()\"\n            class=\"form-multi-select-all\"\n            type=\"button\"\n            tabindex=\"0\"\n          >\n            {{ selectAllLabel }}\n          </button>\n        }\n      }\n      @if ((visibleOptions() && options.length > 0) || isLoading()) {\n        <ng-container *ngTemplateOutlet=\"virtualScroller ? multiselectVirtualScroller : multiselectOptionsDiv\" />\n      } @else {\n        <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\n      }\n      @if (isLoading()) {\n        <c-element-cover [ngStyle]=\"{'border-radius': '6px', 'z-index': 2}\" />\n      }\n    </div>\n  }\n</c-dropdown>\n\n<ng-template #multiselectVirtualScroller>\n  @defer (on immediate) {\n    @if ((optionsArray$ | async); as optionsArray) {\n      <cdk-virtual-scroll-viewport\n        #scrollViewport\n        (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n        [itemSize]=\"itemSize\"\n        [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'height.px': optionsMaxHeight, 'maxHeight.px': optionsMaxHeight, 'minWidth.px': minWidth(), overflowX: 'hidden' } : { 'minWidth.px': minWidth(), overflowX: 'hidden'}\"\n        maxBufferPx=\"{{itemSize * visibleItems}}\"\n        minBufferPx=\"{{itemSize * visibleItems}}\"\n        class=\"form-multi-select-options\"\n        tabindex=\"-1\"\n      >\n        <ng-container\n          #cdkVirtualFor\n          *cdkVirtualFor=\"let option of optionsArray; trackBy: trackByFn; templateCacheSize: 0; even as even; odd as odd; index as index; count as count; first as first; last as last;\"\n          [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n          [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n        />\n      </cdk-virtual-scroll-viewport>\n    }\n  }\n</ng-template>\n\n<ng-template #multiselectOptionsDiv>\n  <div\n    [ngClass]=\"{'form-multi-select-options': visibleOptions()}\"\n    [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflowY: 'scroll' } : {}\"\n  >\n    <ng-content />\n    <ng-container [ngTemplateOutlet]=\"userOptionsTemplate\" />\n  </div>\n</ng-template>\n\n<ng-template #defaultMultiSelectOptionTemplate let-option>\n  <c-multi-select-option\n    [disabled]=\"option.disabled\"\n    [label]=\"option.label\"\n    [text]=\"option.text\"\n    [value]=\"option.value\"\n    [visible]=\"option.visible\"\n  >\n    {{ option.text }}\n  </c-multi-select-option>\n</ng-template>\n\n<ng-template #userOptionsTemplate>\n  @for (option of userOptionsArray$ | async; track option; let even = $even, odd = $odd, index = $index, count = $count, first = $first, last = $last) {\n    <ng-container\n      [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n      [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n    />\n  }\n</ng-template>\n", styles: [":host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{outline:none;box-shadow:0 0 0 var(--cui-focus-ring-width) var(--cui-focus-ring-color);border-radius:var(--cui-border-radius, .375rem)}:host:not(.cdk-focused) .form-multi-select:not(.show) input.form-multi-select-search:not([placeholder]){display:none}:host .form-multi-select .form-multi-select-selection{display:flex;flex:1 1 auto;flex-wrap:wrap}:host .form-multi-select .form-multi-select-selection .text-placeholder,:host .form-multi-select .form-multi-select-selection .form-multi-select-search::placeholder{color:var(--cui-form-multi-select-color);opacity:.8}:host .form-multi-select .form-multi-select-search[size]{display:flex}:host ::ng-deep .cdk-virtual-scroll-content-wrapper{padding:var(--cui-form-multi-select-options-padding-y) var(--cui-form-multi-select-options-padding-x);font-size:1rem;color:var(--cui-form-multi-select-options-color)}:host .cdk-virtual-scroll-viewport{width:var(--cui-dropdown-min-width)}:host .dropdown-menu{--cui-dropdown-padding-y: 0}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MultiSelectTagComponent, selector: "c-multi-select-tag", inputs: ["option", "disabled", "label", "value"], outputs: ["remove"] }, { kind: "component", type: MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: ["optionsStyle", "label", "text", "visible", "disabled", "selected", "value", "active", "role"], outputs: ["selectedChange", "focusChange"], exportAs: ["cMultiSelectOption"] }, { kind: "directive", type: MultiSelectSearchDirective, selector: "[cMultiSelectSearch]", inputs: ["delay", "value"], outputs: ["valueChange"], exportAs: ["cMultiSelectSearch"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible"], exportAs: ["cDropdownMenu"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
@@ -11106,7 +11121,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                         I18nPluralPipe,
                         MultiSelectService,
                         {
-                            provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MultiSelectComponent), multi: true
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MultiSelectComponent),
+                            multi: true
                         }
                     ], standalone: true, imports: [
                         AsyncPipe,
@@ -11126,7 +11143,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                         DropdownMenuDirective,
                         DropdownToggleDirective,
                         ElementCoverComponent
-                    ], template: "<c-dropdown #dropdown=\"cDropdown\"\n            [(visible)]=\"visible\"\n            [autoClose]=\"'outside'\"\n            [ngClass]=\"multiselectClasses\"\n            [popperOptions]=\"popperOptions\">\n  <div #dropdownToggle=\"cDropdownToggle\" [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle role=\"button\"\n       class=\"form-multi-select-input-group\">\n    <span\n      [ngClass]=\"{'form-multi-select-selection': true, 'form-multi-select-selection-tags': (selectionType === 'tags' && selectedOptions.length)}\">\n      @if (selectionType === 'tags') {\n        @if (optionsSelected$ | async; as optionTags) {\n          @for (option of optionTags; track option.value; let i = $index) {\n            <c-multi-select-tag\n              (remove)=\"handleTagRemove($event)\"\n              [disabled]=\"option.disabled ?? false\"\n              [label]=\"option.label ?? option.value?.toString()\"\n              [option]=\"option\"\n              [value]=\"option.value\"\n              class=\"form-multi-select-tag text-truncate\"\n              tabindex=\"-1\"\n            />\n          }\n        }\n      } @else if (selectionType === 'text' && !!selectedOptions.length) {\n        @for (option of selectedOptions; track option.value; let i = $index, last = $last) {\n          <span class=\"form-multi-select-text text-truncate\">{{ option.label }}{{ last ? '&nbsp;' : ',&nbsp;' }}</span>\n        }\n      }\n      @if (!search) {\n        <span class=\"text-placeholder text-truncate\">\n          {{ optionsSelected.size === 0 ? placeholder : counterPlaceholderText }}\n        </span>\n      }\n      @if (search) {\n        <input\n          #inputElement\n          (keydown)=\"handleSearchKeyDown($event)\"\n          (valueChange)=\"handleSearchValueChange($event)\"\n          [attr.placeholder]=\"selectedOptions.length === 0 ? placeholder : counterPlaceholderText\"\n          [disabled]=\"disabled || !search\"\n          [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search), 'text-truncate': true }\"\n          [ngModel]=\"searchValue\"\n          [value]=\"searchValue\"\n          autocomplete=\"off\"\n          cMultiSelectSearch\n          size=\"2\"\n          tabindex=\"{{ disabled ? -1 : 0 }}\"\n          type=\"text\"\n        >\n      }\n    </span>\n    <div class=\"form-multi-select-buttons\">\n      @if (!!cleaner && optionsSelected.size > 0 && !disabled) {\n        <button\n          (click)=\"clearAllOptions($event)\"\n          [disabled]=\"disabled || (!isDropdownVisible && cleaner !== 'active')\"\n          aria-label=\"Clear all\"\n          class=\"form-multi-select-cleaner\"\n          type=\"button\"\n        ></button>\n      }\n      <button (click)=\"handleIndicatorClick($event)\"\n              [disabled]=\"disabled\"\n              class=\"form-multi-select-indicator\"\n              type=\"button\">\n      </button>\n    </div>\n  </div>\n  @if (!disabled) {\n    <div #dropdownMenu=\"cDropdownMenu\" [visible]=\"dropdown.visible\" cDropdownMenu\n         class=\"form-multi-select-dropdown\" role=\"menu\">\n      @if (visibleOptions() && options.length > 0) {\n        @if (selectAll && multiple && !virtualScroller) {\n          <button\n            (click)=\"selectAllOptions()\"\n            class=\"form-multi-select-all\"\n            type=\"button\"\n            tabindex=\"0\"\n          >\n            {{ selectAllLabel }}\n          </button>\n        }\n      }\n      @if ((visibleOptions() && options.length > 0) || isLoading()) {\n        <ng-container *ngTemplateOutlet=\"virtualScroller ? multiselectVirtualScroller : multiselectOptionsDiv\" />\n      } @else {\n        <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\n      }\n      @if (isLoading()) {\n        <c-element-cover [ngStyle]=\"{'border-radius': '6px', 'z-index': 2}\" />\n      }\n    </div>\n  }\n</c-dropdown>\n\n<ng-template #multiselectVirtualScroller>\n  @defer (on immediate) {\n    @if ((optionsArray$ | async); as optionsArray) {\n      <cdk-virtual-scroll-viewport\n        #scrollViewport\n        (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n        [itemSize]=\"itemSize\"\n        [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'height.px': optionsMaxHeight, 'maxHeight.px': optionsMaxHeight, 'minWidth.px': itemMinWidth ?? 196, overflowX: 'hidden' } : { 'minWidth.px': itemMinWidth ?? 196, overflowX: 'hidden'}\"\n        maxBufferPx=\"{{itemSize * visibleItems}}\"\n        minBufferPx=\"{{itemSize * visibleItems}}\"\n        class=\"form-multi-select-options\"\n        tabindex=\"-1\"\n      >\n        <ng-container\n          #cdkVirtualFor\n          *cdkVirtualFor=\"let option of optionsArray; trackBy: trackByFn; templateCacheSize: 0; even as even; odd as odd; index as index; count as count; first as first; last as last;\"\n          [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n          [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n        />\n      </cdk-virtual-scroll-viewport>\n    }\n  }\n</ng-template>\n\n<ng-template #multiselectOptionsDiv>\n  <div\n    [ngClass]=\"{'form-multi-select-options': visibleOptions()}\"\n    [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflowY: 'scroll' } : {}\"\n  >\n    <ng-content />\n    <ng-container [ngTemplateOutlet]=\"userOptionsTemplate\" />\n  </div>\n</ng-template>\n\n<ng-template #defaultMultiSelectOptionTemplate let-option>\n  <c-multi-select-option\n    [disabled]=\"option.disabled\"\n    [label]=\"option.label\"\n    [text]=\"option.text\"\n    [value]=\"option.value\"\n    [visible]=\"option.visible\"\n  >\n    {{ option.text }}\n  </c-multi-select-option>\n</ng-template>\n\n<ng-template #userOptionsTemplate>\n  @for (option of userOptionsArray$ | async; track option; let even = $even, odd = $odd, index = $index, count = $count, first = $first, last = $last) {\n    <ng-container\n      [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n      [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n    />\n  }\n</ng-template>\n", styles: [":host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{outline:none;box-shadow:0 0 0 var(--cui-focus-ring-width) var(--cui-focus-ring-color);border-radius:var(--cui-border-radius, .375rem)}:host:not(.cdk-focused) .form-multi-select:not(.show) input.form-multi-select-search:not([placeholder]){display:none}:host .form-multi-select .form-multi-select-selection{display:flex;flex:1 1 auto;flex-wrap:wrap}:host .form-multi-select .form-multi-select-selection .text-placeholder,:host .form-multi-select .form-multi-select-selection .form-multi-select-search::placeholder{color:var(--cui-form-multi-select-color);opacity:.8}:host .form-multi-select .form-multi-select-search[size]{display:flex}:host ::ng-deep .cdk-virtual-scroll-content-wrapper{padding:var(--cui-form-multi-select-options-padding-y) var(--cui-form-multi-select-options-padding-x);font-size:1rem;color:var(--cui-form-multi-select-options-color)}:host .cdk-virtual-scroll-viewport{width:var(--cui-dropdown-min-width)}:host .dropdown-menu{--cui-dropdown-padding-y: 0}\n"] }]
+                    ], template: "<c-dropdown #dropdown=\"cDropdown\"\n            [(visible)]=\"visible\"\n            [autoClose]=\"'outside'\"\n            [ngClass]=\"multiselectClasses\"\n            [popperOptions]=\"popperOptions\">\n  <div #dropdownToggle=\"cDropdownToggle\" [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle role=\"button\"\n       class=\"form-multi-select-input-group\">\n    <span\n      [ngClass]=\"{'form-multi-select-selection': true, 'form-multi-select-selection-tags': (selectionType === 'tags' && selectedOptions.length)}\">\n      @if (selectionType === 'tags') {\n        @if (optionsSelected$ | async; as optionTags) {\n          @for (option of optionTags; track option.value; let i = $index) {\n            <c-multi-select-tag\n              (remove)=\"handleTagRemove($event)\"\n              [disabled]=\"option.disabled ?? false\"\n              [label]=\"option.label ?? option.value?.toString()\"\n              [option]=\"option\"\n              [value]=\"option.value\"\n              class=\"form-multi-select-tag text-truncate\"\n              tabindex=\"-1\"\n            />\n          }\n        }\n      } @else if (selectionType === 'text' && !!selectedOptions.length) {\n        @for (option of selectedOptions; track option.value; let i = $index, last = $last) {\n          <span class=\"form-multi-select-text text-truncate\">{{ option.label }}{{ last ? '&nbsp;' : ',&nbsp;' }}</span>\n        }\n      }\n      @if (!search) {\n        <span class=\"text-placeholder text-truncate\">\n          {{ optionsSelected.size === 0 ? placeholder : counterPlaceholderText }}\n        </span>\n      }\n      @if (search) {\n        <input\n          #inputElement\n          (keydown)=\"handleSearchKeyDown($event)\"\n          (valueChange)=\"handleSearchValueChange($event)\"\n          [attr.placeholder]=\"selectedOptions.length === 0 ? placeholder : counterPlaceholderText\"\n          [disabled]=\"disabled || !search\"\n          [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search), 'text-truncate': true }\"\n          [ngModel]=\"searchValue\"\n          [value]=\"searchValue\"\n          autocomplete=\"off\"\n          cMultiSelectSearch\n          size=\"2\"\n          tabindex=\"{{ disabled ? -1 : 0 }}\"\n          type=\"text\"\n        >\n      }\n    </span>\n    <div class=\"form-multi-select-buttons\">\n      @if (!!cleaner && optionsSelected.size > 0 && !disabled) {\n        <button\n          (click)=\"clearAllOptions($event)\"\n          [disabled]=\"disabled || (!isDropdownVisible && cleaner !== 'active')\"\n          aria-label=\"Clear all\"\n          class=\"form-multi-select-cleaner\"\n          type=\"button\"\n        ></button>\n      }\n      <button (click)=\"handleIndicatorClick($event)\"\n              [disabled]=\"disabled\"\n              class=\"form-multi-select-indicator\"\n              type=\"button\">\n      </button>\n    </div>\n  </div>\n  @if (!disabled) {\n    <div #dropdownMenu=\"cDropdownMenu\" [visible]=\"dropdown.visible\" cDropdownMenu\n         class=\"form-multi-select-dropdown\" role=\"menu\">\n      @if (visibleOptions() && options.length > 0) {\n        @if (selectAll && multiple && !virtualScroller) {\n          <button\n            (click)=\"selectAllOptions()\"\n            class=\"form-multi-select-all\"\n            type=\"button\"\n            tabindex=\"0\"\n          >\n            {{ selectAllLabel }}\n          </button>\n        }\n      }\n      @if ((visibleOptions() && options.length > 0) || isLoading()) {\n        <ng-container *ngTemplateOutlet=\"virtualScroller ? multiselectVirtualScroller : multiselectOptionsDiv\" />\n      } @else {\n        <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\n      }\n      @if (isLoading()) {\n        <c-element-cover [ngStyle]=\"{'border-radius': '6px', 'z-index': 2}\" />\n      }\n    </div>\n  }\n</c-dropdown>\n\n<ng-template #multiselectVirtualScroller>\n  @defer (on immediate) {\n    @if ((optionsArray$ | async); as optionsArray) {\n      <cdk-virtual-scroll-viewport\n        #scrollViewport\n        (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n        [itemSize]=\"itemSize\"\n        [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'height.px': optionsMaxHeight, 'maxHeight.px': optionsMaxHeight, 'minWidth.px': minWidth(), overflowX: 'hidden' } : { 'minWidth.px': minWidth(), overflowX: 'hidden'}\"\n        maxBufferPx=\"{{itemSize * visibleItems}}\"\n        minBufferPx=\"{{itemSize * visibleItems}}\"\n        class=\"form-multi-select-options\"\n        tabindex=\"-1\"\n      >\n        <ng-container\n          #cdkVirtualFor\n          *cdkVirtualFor=\"let option of optionsArray; trackBy: trackByFn; templateCacheSize: 0; even as even; odd as odd; index as index; count as count; first as first; last as last;\"\n          [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n          [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n        />\n      </cdk-virtual-scroll-viewport>\n    }\n  }\n</ng-template>\n\n<ng-template #multiselectOptionsDiv>\n  <div\n    [ngClass]=\"{'form-multi-select-options': visibleOptions()}\"\n    [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflowY: 'scroll' } : {}\"\n  >\n    <ng-content />\n    <ng-container [ngTemplateOutlet]=\"userOptionsTemplate\" />\n  </div>\n</ng-template>\n\n<ng-template #defaultMultiSelectOptionTemplate let-option>\n  <c-multi-select-option\n    [disabled]=\"option.disabled\"\n    [label]=\"option.label\"\n    [text]=\"option.text\"\n    [value]=\"option.value\"\n    [visible]=\"option.visible\"\n  >\n    {{ option.text }}\n  </c-multi-select-option>\n</ng-template>\n\n<ng-template #userOptionsTemplate>\n  @for (option of userOptionsArray$ | async; track option; let even = $even, odd = $odd, index = $index, count = $count, first = $first, last = $last) {\n    <ng-container\n      [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n      [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n    />\n  }\n</ng-template>\n", styles: [":host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{outline:none;box-shadow:0 0 0 var(--cui-focus-ring-width) var(--cui-focus-ring-color);border-radius:var(--cui-border-radius, .375rem)}:host:not(.cdk-focused) .form-multi-select:not(.show) input.form-multi-select-search:not([placeholder]){display:none}:host .form-multi-select .form-multi-select-selection{display:flex;flex:1 1 auto;flex-wrap:wrap}:host .form-multi-select .form-multi-select-selection .text-placeholder,:host .form-multi-select .form-multi-select-selection .form-multi-select-search::placeholder{color:var(--cui-form-multi-select-color);opacity:.8}:host .form-multi-select .form-multi-select-search[size]{display:flex}:host ::ng-deep .cdk-virtual-scroll-content-wrapper{padding:var(--cui-form-multi-select-options-padding-y) var(--cui-form-multi-select-options-padding-x);font-size:1rem;color:var(--cui-form-multi-select-options-color)}:host .cdk-virtual-scroll-viewport{width:var(--cui-dropdown-min-width)}:host .dropdown-menu{--cui-dropdown-padding-y: 0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: i1$2.FocusMonitor }, { type: MultiSelectService }, { type: i0.IterableDiffers }], propDecorators: { allowCreateOptions: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -11221,7 +11238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 args: ['inputElement']
             }], dropdownMenu: [{
                 type: ViewChild,
-                args: ['dropdownMenu']
+                args: [DropdownMenuDirective, { read: ElementRef }]
             }], dropdown: [{
                 type: ViewChild,
                 args: [DropdownComponent, { read: ElementRef }]