@coreui/angular-pro 5.3.12 → 5.3.14

package/fesm2022/coreui-angular-pro.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Directive, input, Renderer2, effect, TemplateRef, Input, booleanAttribute, NgModule, computed, Injectable, Component, linkedSignal, output, signal, afterNextRender, contentChildren, DestroyRef, untracked, HostBinding, RendererFactory2, numberAttribute, Pipe, ViewChildren, model, PLATFORM_ID, Inject, viewChild, HostListener, ContentChildren, forwardRef, EventEmitter, Output, ContentChild, contentChild, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef, NgZone, afterRender, ViewContainerRef, viewChildren, Injector, runInInjectionContext } from '@angular/core';
+import { inject, ElementRef, Directive, input, Renderer2, effect, TemplateRef, Input, booleanAttribute, untracked, NgModule, computed, Injectable, Component, linkedSignal, output, signal, afterNextRender, contentChildren, DestroyRef, HostBinding, RendererFactory2, numberAttribute, Pipe, ViewChildren, model, PLATFORM_ID, Inject, ContentChildren, forwardRef, ContentChild, contentChild, EventEmitter, Output, HostListener, ViewChild, viewChild, ChangeDetectionStrategy, ChangeDetectorRef, NgZone, afterRender, ViewContainerRef, viewChildren, Injector, runInInjectionContext } from '@angular/core';
 import { NgTemplateOutlet, DOCUMENT, NgClass, AsyncPipe, NgStyle, isPlatformServer, isPlatformBrowser, formatDate, I18nPluralPipe } from '@angular/common';
 import { animation, animate, style, AnimationBuilder, useAnimation, trigger, state, transition, group, query, animateChild } from '@angular/animations';
 import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
@@ -127,7 +127,7 @@ class ThemeDirective {
         });
         this.dark = input(false, { transform: booleanAttribute });
         this.#darkChange = effect(() => {
-            const darkTheme = this.dark();
+            const darkTheme = this.dark() || untracked(this.colorScheme) === 'dark';
             darkTheme ? this.setTheme('dark') : this.unsetTheme();
         });
     }
@@ -4066,7 +4066,8 @@ class CarouselState {
         animate: true,
         items: [],
         direction: 'next',
-        transition: 'slide'
+        transition: 'slide',
+        interval: 0
     };
     get state() {
         return this.#state;
@@ -4125,7 +4126,8 @@ class CarouselState {
             animate: true,
             items: [],
             direction: 'next',
-            transition: 'slide'
+            transition: 'slide',
+            interval: 0
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CarouselState, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -4144,7 +4146,7 @@ class CarouselConfig {
         /* Default direction of auto changing of slides */
         this.direction = 'next';
         /* Default interval of auto changing of slides */
-        this.interval = 3000;
+        this.interval = 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CarouselConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CarouselConfig, providedIn: 'root' }); }
@@ -4205,7 +4207,9 @@ class CarouselComponent {
             computation: (value) => value
         });
         this.#intervalEffect = effect(() => {
-            this.interval() ? this.setTimer() : this.resetTimer();
+            const interval = this.interval();
+            this.#carouselState.state = { interval: interval };
+            interval ? this.setTimer() : this.resetTimer();
         });
         /**
          * Sets which event handlers you’d like provided to your pause prop. You can specify one trigger or an array of them.
@@ -4261,6 +4265,7 @@ class CarouselComponent {
         this.#carouselState.state = {
             activeItemIndex: this.activeIndex(),
             animate: this.animate(),
+            interval: this.interval(),
             transition: this.transition()
         };
         this.setListeners();
@@ -4290,7 +4295,7 @@ class CarouselComponent {
     }
     #visible;
     setTimer() {
-        const interval = this.activeItemInterval || 0;
+        const interval = this.activeItemInterval || this.interval();
         const direction = this.direction();
         this.resetTimer();
         if (interval > 0) {
@@ -4405,10 +4410,6 @@ class CarouselControlComponent {
         this.carouselControlIconClass = computed(() => {
             return `carousel-control-${this.direction()}-icon`;
         });
-        this.content = viewChild('content', { read: ElementRef });
-        this.hasContent = computed(() => {
-            return this.content()?.nativeElement.childNodes.length ?? false;
-        });
     }
     #carouselState;
     onKeyUp($event) {
@@ -4430,7 +4431,7 @@ class CarouselControlComponent {
         this.#carouselState.state = { activeItemIndex: nextIndex };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CarouselControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: CarouselControlComponent, isStandalone: true, selector: "c-carousel-control", inputs: { captionInput: { classPropertyName: "captionInput", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keyup": "onKeyUp($event)", "click": "onClick($event)" }, properties: { "attr.role": "role()", "class": "hostClasses()" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, read: ElementRef, isSignal: true }], exportAs: ["cCarouselControl"], ngImport: i0, template: "@if (hasContent()) {\n  <div #content>\n    <ng-content />\n  </div>\n} @else {\n  <span [class]=\"carouselControlIconClass()\" [attr.aria-label]=\"direction()\" [attr.aria-hidden]=\"true\"></span>\n  <span class=\"visually-hidden\">{{ caption() }}</span>\n}\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: CarouselControlComponent, isStandalone: true, selector: "c-carousel-control", inputs: { captionInput: { classPropertyName: "captionInput", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keyup": "onKeyUp($event)", "click": "onClick($event)" }, properties: { "attr.role": "role()", "class": "hostClasses()" } }, exportAs: ["cCarouselControl"], ngImport: i0, template: "<ng-content>\n  <span [attr.aria-hidden]=\"true\" [class]=\"carouselControlIconClass()\"></span>\n  <span class=\"visually-hidden\">{{ caption() }}</span>\n</ng-content>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CarouselControlComponent, decorators: [{
             type: Component,
@@ -4439,7 +4440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                         '[class]': 'hostClasses()',
                         '(keyup)': 'onKeyUp($event)',
                         '(click)': 'onClick($event)'
-                    }, template: "@if (hasContent()) {\n  <div #content>\n    <ng-content />\n  </div>\n} @else {\n  <span [class]=\"carouselControlIconClass()\" [attr.aria-label]=\"direction()\" [attr.aria-hidden]=\"true\"></span>\n  <span class=\"visually-hidden\">{{ caption() }}</span>\n}\n" }]
+                    }, template: "<ng-content>\n  <span [attr.aria-hidden]=\"true\" [class]=\"carouselControlIconClass()\"></span>\n  <span class=\"visually-hidden\">{{ caption() }}</span>\n</ng-content>\n" }]
         }] });
 
 class CarouselIndicatorsComponent {
@@ -4504,6 +4505,12 @@ class CarouselItemComponent {
          * @default -1
          */
         this.interval = input(-1);
+        /**
+         * Carousel item role.
+         * @return string
+         * @default 'group'
+         */
+        this.role = input('group');
         this.#carouselService.carouselIndex$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((nextIndex) => {
             if ('active' in nextIndex) {
                 this.active.set(nextIndex.active === this.index);
@@ -4511,13 +4518,14 @@ class CarouselItemComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CarouselItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: CarouselItemComponent, isStandalone: true, selector: "c-carousel-item", inputs: { activeInput: { classPropertyName: "activeInput", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.active": "active()" }, classAttribute: "carousel-item" }, exportAs: ["cCarouselItem"], ngImport: i0, template: "@if (active()) {\n  <ng-content />\n}\n", styles: [":host{display:block}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: CarouselItemComponent, isStandalone: true, selector: "c-carousel-item", inputs: { activeInput: { classPropertyName: "activeInput", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.active": "active()", "attr.role": "role()" }, classAttribute: "carousel-item" }, exportAs: ["cCarouselItem"], ngImport: i0, template: "@if (active()) {\n  <ng-content />\n}\n", styles: [":host{display:block}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CarouselItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-carousel-item', exportAs: 'cCarouselItem', host: {
                         class: 'carousel-item',
-                        '[class.active]': 'active()'
+                        '[class.active]': 'active()',
+                        '[attr.role]': 'role()'
                     }, template: "@if (active()) {\n  <ng-content />\n}\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [] });
 
@@ -4602,11 +4610,15 @@ class CarouselInnerComponent {
         this.#carouselState = inject(CarouselState);
         this.activeIndex = signal(undefined);
         this.animate = signal(true);
+        this.interval = signal(0);
         this.slide = signal({ left: true });
         this.transition = signal('crossfade');
         this.slideType = computed(() => {
             return { left: this.slide().left, type: this.transition() };
         });
+        this.ariaLive = computed(() => {
+            return this.interval() ? 'off' : 'polite';
+        });
         this.contentItems = contentChildren(CarouselItemComponent);
         this.#prevContentItems = signal([]);
     }
@@ -4622,8 +4634,9 @@ class CarouselInnerComponent {
         const nextDirection = state?.direction;
         if (this.activeIndex() !== nextIndex) {
             this.animate.set(state?.animate ?? false);
-            this.slide.set({ left: nextDirection === 'next' });
             this.activeIndex.set(state?.activeItemIndex);
+            this.interval.set(state?.interval ?? 0);
+            this.slide.set({ left: nextDirection === 'next' });
             this.transition.set(state?.transition ?? 'slide');
         }
     }
@@ -4635,14 +4648,15 @@ class CarouselInnerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CarouselInnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.5", type: CarouselInnerComponent, isStandalone: true, selector: "c-carousel-inner", host: { properties: { "@carouselPlay": "slideType()", "@.disabled": "!animate()" }, classAttribute: "carousel-inner" }, queries: [{ propertyName: "contentItems", predicate: CarouselItemComponent, isSignal: true }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block}\n"], animations: [carouselPlay] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.5", type: CarouselInnerComponent, isStandalone: true, selector: "c-carousel-inner", host: { properties: { "@carouselPlay": "slideType()", "@.disabled": "!animate()", "attr.aria-live": "ariaLive()" }, classAttribute: "carousel-inner" }, queries: [{ propertyName: "contentItems", predicate: CarouselItemComponent, isSignal: true }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block}\n"], animations: [carouselPlay] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CarouselInnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-carousel-inner', animations: [carouselPlay], template: '<ng-content />', host: {
                         class: 'carousel-inner',
                         '[@carouselPlay]': 'slideType()',
-                        '[@.disabled]': '!animate()'
+                        '[@.disabled]': '!animate()',
+                        '[attr.aria-live]': 'ariaLive()'
                     }, styles: [":host{display:block}\n"] }]
         }] });
 
@@ -4731,31 +4745,43 @@ class DropdownMenuDirective {
         this.#destroyRef = inject(DestroyRef);
         this.elementRef = inject(ElementRef);
         this.#dropdownService = inject(DropdownService);
+        /**
+         * Set alignment of dropdown menu.
+         * @return 'start' | 'end'
+         */
+        this.alignment = input();
         /**
          * Toggle the visibility of dropdown menu component.
-         * @type boolean
+         * @return boolean
          */
-        this.visible = false;
+        this.visibleInput = input(false, { transform: booleanAttribute, alias: 'visible' });
+        this.visible = linkedSignal({
+            source: () => this.visibleInput(),
+            computation: (value) => value
+        });
+        this.hostClasses = computed(() => {
+            const alignment = this.alignment();
+            const visible = this.visible();
+            return {
+                'dropdown-menu': true,
+                [`dropdown-menu-${alignment}`]: !!alignment,
+                show: visible
+            };
+        });
+        this.hostStyles = computed(() => {
+            // workaround for popper position calculate (see also: dropdown.component)
+            const visible = this.visible();
+            return {
+                visibility: visible ? null : '',
+                display: visible ? null : ''
+            };
+        });
     }
     #destroyRef;
     #dropdownService;
     #focusKeyManager;
-    get hostClasses() {
-        return {
-            'dropdown-menu': true,
-            [`dropdown-menu-${this.alignment}`]: !!this.alignment,
-            show: this.visible
-        };
-    }
-    get hostStyles() {
-        // workaround for popper position calculate (see also: dropdown.component)
-        return {
-            visibility: this.visible ? null : '',
-            display: this.visible ? null : ''
-        };
-    }
     onKeyDown($event) {
-        if (!this.visible) {
+        if (!this.visible()) {
             return;
         }
         if (['Space', 'ArrowDown'].includes($event.code)) {
@@ -4764,7 +4790,7 @@ class DropdownMenuDirective {
         this.#focusKeyManager.onKeydown($event);
     }
     onKeyUp($event) {
-        if (!this.visible) {
+        if (!this.visible()) {
             return;
         }
         if (['Tab'].includes($event.key)) {
@@ -4788,8 +4814,8 @@ class DropdownMenuDirective {
         this.#dropdownService.dropdownState$
             .pipe(tap((state) => {
             if ('visible' in state) {
-                this.visible = state.visible === 'toggle' ? !this.visible : state.visible;
-                if (!this.visible) {
+                this.visible.update((visible) => (state.visible === 'toggle' ? !visible : state.visible));
+                if (!this.visible()) {
                     this.#focusKeyManager?.setActiveItem(-1);
                 }
             }
@@ -4804,7 +4830,7 @@ class DropdownMenuDirective {
             .skipPredicate((dropdownItem) => dropdownItem.disabled === true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DropdownMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DropdownMenuDirective, isStandalone: true, selector: "[cDropdownMenu]", inputs: { alignment: "alignment", visible: "visible" }, host: { listeners: { "keydown": "onKeyDown($event)", "keyup": "onKeyUp($event)" }, properties: { "class": "this.hostClasses", "style": "this.hostStyles" }, classAttribute: "dropdown-menu" }, queries: [{ propertyName: "dropdownItemsContent", predicate: i0.forwardRef(() => DropdownItemDirective), descendants: true }], exportAs: ["cDropdownMenu"], hostDirectives: [{ directive: ThemeDirective, inputs: ["dark", "dark"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.5", type: DropdownMenuDirective, isStandalone: true, selector: "[cDropdownMenu]", inputs: { alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, visibleInput: { classPropertyName: "visibleInput", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeyDown($event)", "keyup": "onKeyUp($event)" }, properties: { "class": "hostClasses()", "style": "hostStyles()" }, classAttribute: "dropdown-menu" }, queries: [{ propertyName: "dropdownItemsContent", predicate: i0.forwardRef(() => DropdownItemDirective), descendants: true }], exportAs: ["cDropdownMenu"], hostDirectives: [{ directive: ThemeDirective, inputs: ["dark", "dark"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DropdownMenuDirective, decorators: [{
             type: Directive,
@@ -4812,25 +4838,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                     selector: '[cDropdownMenu]',
                     exportAs: 'cDropdownMenu',
                     hostDirectives: [{ directive: ThemeDirective, inputs: ['dark'] }],
-                    host: { class: 'dropdown-menu' }
+                    host: {
+                        class: 'dropdown-menu',
+                        '[class]': 'hostClasses()',
+                        '[style]': 'hostStyles()',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(keyup)': 'onKeyUp($event)'
+                    }
                 }]
-        }], propDecorators: { alignment: [{
-                type: Input
-            }], visible: [{
-                type: Input
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], hostStyles: [{
-                type: HostBinding,
-                args: ['style']
-            }], onKeyDown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }], onKeyUp: [{
-                type: HostListener,
-                args: ['keyup', ['$event']]
-            }], dropdownItemsContent: [{
+        }], propDecorators: { dropdownItemsContent: [{
                 type: ContentChildren,
                 args: [forwardRef(() => DropdownItemDirective), { descendants: true }]
             }] } });
@@ -4845,86 +4861,79 @@ class DropdownToggleDirective {
         this.elementRef = inject(ElementRef);
         this.#dropdownService = inject(DropdownService);
         this.dropdown = inject(DropdownToken, { optional: true });
+        /**
+         * Reference to dropdown component.
+         * @return DropdownComponent | undefined
+         * @default undefined
+         */
+        this.dropdownComponent = input();
         /**
          * Disables the toggler.
-         * @type boolean
+         * @return boolean
          * @default false
          */
-        this.disabled = false;
+        this.disabled = input(false, { transform: booleanAttribute });
         /**
          * Enables pseudo element caret on toggler.
-         * @type boolean
+         * @return boolean
          */
-        this.caret = true;
+        this.caret = input(true);
         /**
          * Create split button dropdowns with virtually the same markup as single button dropdowns,
          * but with the addition of `.dropdown-toggle-split` class for proper spacing around the dropdown caret.
-         * @type boolean
+         * @return boolean
          * @default false
          */
-        this.split = false;
+        this.split = input(false, { transform: booleanAttribute });
+        this.hostClasses = computed(() => {
+            return {
+                'dropdown-toggle': this.caret(),
+                'dropdown-toggle-split': this.split(),
+                disabled: this.disabled()
+            };
+        });
         this.#ariaExpanded = signal(false);
     }
     // injections
     #destroyRef;
     #dropdownService;
-    get hostClasses() {
-        return {
-            'dropdown-toggle': this.caret,
-            'dropdown-toggle-split': this.split,
-            disabled: this.disabled
-        };
-    }
     #ariaExpanded;
     get ariaExpanded() {
         return this.#ariaExpanded();
     }
     onClick($event) {
         $event.preventDefault();
-        !this.disabled && this.#dropdownService.toggle({ visible: 'toggle', dropdown: this.dropdown });
+        !this.disabled() && this.#dropdownService.toggle({ visible: 'toggle', dropdown: this.dropdown });
     }
     ngAfterViewInit() {
-        if (this.dropdownComponent) {
-            this.dropdown = this.dropdownComponent;
-            this.#dropdownService = this.dropdownComponent?.dropdownService;
+        const dropdownComponent = this.dropdownComponent();
+        if (dropdownComponent) {
+            this.dropdown = dropdownComponent;
+            this.#dropdownService = dropdownComponent?.dropdownService;
         }
         if (this.dropdown) {
             const dropdown = this.dropdown;
-            dropdown?.visibleChange?.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((visible) => {
+            dropdown?.visibleChange?.subscribe((visible) => {
                 this.#ariaExpanded.set(visible);
             });
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DropdownToggleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.1.5", type: DropdownToggleDirective, isStandalone: true, selector: "[cDropdownToggle]", inputs: { dropdownComponent: "dropdownComponent", disabled: ["disabled", "disabled", booleanAttribute], caret: "caret", split: ["split", "split", booleanAttribute] }, host: { listeners: { "click": "onClick($event)" }, properties: { "class": "this.hostClasses", "attr.aria-expanded": "this.ariaExpanded" } }, providers: [{ provide: DropdownToken, useExisting: forwardRef(() => DropdownComponent) }], exportAs: ["cDropdownToggle"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.5", type: DropdownToggleDirective, isStandalone: true, selector: "[cDropdownToggle]", inputs: { dropdownComponent: { classPropertyName: "dropdownComponent", publicName: "dropdownComponent", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, caret: { classPropertyName: "caret", publicName: "caret", isSignal: true, isRequired: false, transformFunction: null }, split: { classPropertyName: "split", publicName: "split", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, properties: { "class": "hostClasses()", "attr.aria-expanded": "ariaExpanded" } }, providers: [{ provide: DropdownToken, useExisting: forwardRef(() => DropdownComponent) }], exportAs: ["cDropdownToggle"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DropdownToggleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cDropdownToggle]',
                     providers: [{ provide: DropdownToken, useExisting: forwardRef(() => DropdownComponent) }],
-                    exportAs: 'cDropdownToggle'
+                    exportAs: 'cDropdownToggle',
+                    host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.aria-expanded]': 'ariaExpanded',
+                        '(click)': 'onClick($event)'
+                    }
                 }]
-        }], propDecorators: { dropdownComponent: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], caret: [{
-                type: Input
-            }], split: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], ariaExpanded: [{
-                type: HostBinding,
-                args: ['attr.aria-expanded']
-            }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
+        }] });
 class DropdownComponent {
     constructor(document, elementRef, renderer, ngZone, changeDetectorRef, dropdownService) {
         this.document = document;
@@ -4933,45 +4942,93 @@ class DropdownComponent {
         this.ngZone = ngZone;
         this.changeDetectorRef = changeDetectorRef;
         this.dropdownService = dropdownService;
-        this.autoClose = true;
+        /**
+         * Set alignment of dropdown menu.
+         * @return {'start' | 'end' | { xs: 'start' | 'end' } | { sm: 'start' | 'end' } | { md: 'start' | 'end' } | { lg: 'start' | 'end' } | { xl: 'start' | 'end'} | { xxl: 'start' | 'end'}}
+         */
+        this.alignment = input();
+        /**
+         * Automatically close dropdown when clicking outside the dropdown menu.
+         */
+        this.autoClose = input(true);
+        /**
+         * Sets a specified  direction and location of the dropdown menu.
+         * @return 'dropup' | 'dropend' | 'dropstart'
+         */
+        this.direction = input();
         /**
          * Describes the placement of your component after Popper.js has applied all the modifiers
          * that may have flipped or altered the originally provided placement property.
-         * @type Placement
+         * @return Placement
          */
-        this.placement = 'bottom-start';
+        this.placement = input('bottom-start');
         /**
          * If you want to disable dynamic positioning set this property to `false`.
-         * @type boolean
+         * @return boolean
          * @default true
          */
-        this.popper = true;
-        this._popperOptions = {
-            placement: this.placement,
+        this.popper = input(true, { transform: booleanAttribute });
+        /**
+         * Optional popper Options object, placement prop takes precedence over
+         * @return Partial<Options>
+         */
+        this.popperOptionsInput = input({}, { alias: 'popperOptions' });
+        this.popperOptionsEffect = effect(() => {
+            this.popperOptions = { ...untracked(this.#popperOptions), ...this.popperOptionsInput() };
+        });
+        this.#popperOptions = signal({
+            placement: this.placement(),
             modifiers: [],
             strategy: 'absolute'
-        };
+        });
         /**
          * Set the dropdown variant to a btn-group, dropdown, input-group, and nav-item.
          */
-        this.variant = 'dropdown';
-        this._visible = false;
-        this.visibleChange = new EventEmitter();
-        this.dropdownContext = { $implicit: this.visible };
+        this.variant = input('dropdown');
+        /**
+         * Toggle the visibility of dropdown menu component.
+         * @return boolean
+         * @default false
+         */
+        this.visibleInput = input(false, { transform: booleanAttribute, alias: 'visible' });
+        this.visible = linkedSignal({
+            source: () => this.visibleInput(),
+            computation: (value) => value
+        });
+        this.visibleEffect = effect(() => {
+            const visible = this.visible();
+            this.activeTrap = visible;
+            visible ? this.createPopperInstance() : this.destroyPopperInstance();
+            this.setVisibleState(visible);
+            this.visibleChange.emit(visible);
+        });
+        this.visibleChange = output();
+        this.dropdownContext = { $implicit: this.visible() };
         this.activeTrap = false;
         this.listeners = [];
+        this.hostClasses = computed(() => {
+            const direction = this.direction();
+            const variant = this.variant();
+            return {
+                dropdown: (variant === 'dropdown' || variant === 'nav-item') && !direction,
+                [`${direction}`]: !!direction,
+                [`${variant}`]: !!variant,
+                dropup: direction === 'dropup' || direction === 'dropup-center',
+                show: this.visible()
+            };
+        });
+        // todo: find better solution
+        this.hostStyle = computed(() => {
+            return this.variant() === 'input-group' ? { display: 'contents' } : {};
+        });
         this.dropdownStateSubscribe();
     }
-    /**
-     * Optional popper Options object, placement prop takes precedence over
-     * @type Partial<Options>
-     */
     set popperOptions(value) {
-        this._popperOptions = { ...this._popperOptions, ...value };
+        this.#popperOptions.update((popperOptions) => ({ ...popperOptions, ...value }));
     }
     get popperOptions() {
-        let placement = this.placement;
-        switch (this.direction) {
+        let placement = this.placement();
+        switch (this.direction()) {
             case 'dropup': {
                 placement = 'top-start';
                 break;
@@ -4993,42 +5050,13 @@ class DropdownComponent {
                 break;
             }
         }
-        if (this.alignment === 'end') {
+        if (this.alignment() === 'end') {
             placement = 'bottom-end';
         }
-        this._popperOptions = { ...this._popperOptions, placement: placement };
-        return this._popperOptions;
-    }
-    /**
-     * Toggle the visibility of dropdown menu component.
-     * @type boolean
-     * @default false
-     */
-    set visible(value) {
-        const _value = value;
-        if (_value !== this._visible) {
-            this.activeTrap = _value;
-            this._visible = _value;
-            _value ? this.createPopperInstance() : this.destroyPopperInstance();
-            this.visibleChange.emit(_value);
-        }
-    }
-    get visible() {
-        return this._visible;
-    }
-    get hostClasses() {
-        return {
-            dropdown: (this.variant === 'dropdown' || this.variant === 'nav-item') && !this.direction,
-            [`${this.direction}`]: !!this.direction,
-            [`${this.variant}`]: !!this.variant,
-            dropup: this.direction === 'dropup' || this.direction === 'dropup-center',
-            show: this.visible
-        };
-    }
-    // todo: find better solution
-    get hostStyle() {
-        return this.variant === 'input-group' ? { display: 'contents' } : {};
+        this.#popperOptions.update((value) => ({ ...value, placement: placement }));
+        return this.#popperOptions();
     }
+    #popperOptions;
     onHostClick($event) {
         this.clickedTarget = $event.target;
     }
@@ -5040,7 +5068,7 @@ class DropdownComponent {
             }))
                 .subscribe((state) => {
                 if ('visible' in state) {
-                    state?.visible === 'toggle' ? this.toggleDropdown() : (this.visible = state.visible);
+                    state?.visible === 'toggle' ? this.toggleDropdown() : this.visible.set(state.visible);
                 }
             });
         }
@@ -5049,7 +5077,7 @@ class DropdownComponent {
         }
     }
     toggleDropdown() {
-        this.visible = !this.visible;
+        this.visible.update((visible) => !visible);
     }
     onClick(event) {
         if (!this._toggler?.elementRef.nativeElement.contains(event.target?.closest('[cDropdownToggle]'))) {
@@ -5057,17 +5085,12 @@ class DropdownComponent {
         }
     }
     ngAfterContentInit() {
-        if (this.variant === 'nav-item') {
+        if (this.variant() === 'nav-item') {
             this.renderer.addClass(this._toggler.elementRef.nativeElement, 'nav-link');
         }
     }
     ngOnInit() {
-        this.setVisibleState(this.visible);
-    }
-    ngOnChanges(changes) {
-        if (changes['visible'] && !changes['visible'].firstChange) {
-            this.setVisibleState(changes['visible'].currentValue);
-        }
+        this.setVisibleState(this.visible());
     }
     ngOnDestroy() {
         this.clearListeners();
@@ -5084,7 +5107,7 @@ class DropdownComponent {
                 // workaround for popper position calculate (see also: dropdown-menu.component)
                 this._menu.elementRef.nativeElement.style.visibility = 'hidden';
                 this._menu.elementRef.nativeElement.style.display = 'block';
-                if (this.popper) {
+                if (this.popper()) {
                     this.popperInstance = createPopper(this._toggler.elementRef.nativeElement, this._menu.elementRef.nativeElement, { ...this.popperOptions });
                 }
                 this.ngZone.run(() => {
@@ -5110,28 +5133,31 @@ class DropdownComponent {
             if (this._toggler?.elementRef.nativeElement.contains(event.target)) {
                 return;
             }
-            if (this.autoClose === true) {
+            const autoClose = this.autoClose();
+            if (autoClose === true) {
                 this.setVisibleState(false);
                 return;
             }
-            if (this.clickedTarget === target && this.autoClose === 'inside') {
+            if (this.clickedTarget === target && autoClose === 'inside') {
                 this.setVisibleState(false);
                 return;
             }
-            if (this.clickedTarget !== target && this.autoClose === 'outside') {
+            if (this.clickedTarget !== target && autoClose === 'outside') {
                 this.setVisibleState(false);
                 return;
             }
         }));
         this.listeners.push(this.renderer.listen(this.elementRef.nativeElement, 'keyup', (event) => {
-            if (event.key === 'Escape' && this.autoClose !== false) {
+            if (event.key === 'Escape' && this.autoClose() !== false) {
                 event.stopPropagation();
                 this.setVisibleState(false);
                 return;
             }
         }));
         this.listeners.push(this.renderer.listen(this.document, 'keyup', (event) => {
-            if (event.key === 'Tab' && this.autoClose !== false && !this.elementRef.nativeElement.contains(event.target)) {
+            if (event.key === 'Tab' &&
+                this.autoClose() !== false &&
+                !this.elementRef.nativeElement.contains(event.target)) {
                 this.setVisibleState(false);
                 return;
             }
@@ -5146,35 +5172,19 @@ class DropdownComponent {
         this.listeners = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DropdownComponent, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: DropdownService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.1.5", type: DropdownComponent, isStandalone: true, selector: "c-dropdown", inputs: { alignment: "alignment", autoClose: "autoClose", direction: "direction", placement: "placement", popper: ["popper", "popper", booleanAttribute], popperOptions: "popperOptions", variant: "variant", visible: ["visible", "visible", booleanAttribute] }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class": "this.hostClasses", "style": "this.hostStyle" } }, providers: [DropdownService], queries: [{ propertyName: "_toggler", first: true, predicate: DropdownToggleDirective, descendants: true }, { propertyName: "_menu", first: true, predicate: DropdownMenuDirective, descendants: true }, { propertyName: "_menuElementRef", first: true, predicate: DropdownMenuDirective, descendants: true, read: ElementRef }], exportAs: ["cDropdown"], usesOnChanges: true, hostDirectives: [{ directive: ThemeDirective, inputs: ["dark", "dark"] }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host-context(.dropdown,.dropup):not(.btn-group){display:block}:host-context(.dropstart,.dropend):not(.btn-group){display:inline-flex}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host{direction:rtl}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: DropdownComponent, isStandalone: true, selector: "c-dropdown", inputs: { alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, autoClose: { classPropertyName: "autoClose", publicName: "autoClose", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, popper: { classPropertyName: "popper", publicName: "popper", isSignal: true, isRequired: false, transformFunction: null }, popperOptionsInput: { classPropertyName: "popperOptionsInput", publicName: "popperOptions", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, visibleInput: { classPropertyName: "visibleInput", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class": "hostClasses()", "style": "hostStyle()" } }, providers: [DropdownService], queries: [{ propertyName: "_toggler", first: true, predicate: DropdownToggleDirective, descendants: true }, { propertyName: "_menu", first: true, predicate: DropdownMenuDirective, descendants: true }, { propertyName: "_menuElementRef", first: true, predicate: DropdownMenuDirective, descendants: true, read: ElementRef }], exportAs: ["cDropdown"], hostDirectives: [{ directive: ThemeDirective, inputs: ["dark", "dark"] }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host-context(.dropdown,.dropup):not(.btn-group){display:block}:host-context(.dropstart,.dropend):not(.btn-group){display:inline-flex}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host{direction:rtl}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-dropdown', template: '<ng-content />', exportAs: 'cDropdown', providers: [DropdownService], hostDirectives: [{ directive: ThemeDirective, inputs: ['dark'] }], styles: [":host-context(.dropdown,.dropup):not(.btn-group){display:block}:host-context(.dropstart,.dropend):not(.btn-group){display:inline-flex}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host{direction:rtl}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}\n"] }]
+            args: [{ selector: 'c-dropdown', template: '<ng-content />', exportAs: 'cDropdown', providers: [DropdownService], hostDirectives: [{ directive: ThemeDirective, inputs: ['dark'] }], host: {
+                        '[class]': 'hostClasses()',
+                        '[style]': 'hostStyle()',
+                        '(click)': 'onHostClick($event)'
+                    }, styles: [":host-context(.dropdown,.dropup):not(.btn-group){display:block}:host-context(.dropstart,.dropend):not(.btn-group){display:inline-flex}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host{direction:rtl}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}\n"] }]
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: DropdownService }], propDecorators: { alignment: [{
-                type: Input
-            }], autoClose: [{
-                type: Input
-            }], direction: [{
-                type: Input
-            }], placement: [{
-                type: Input
-            }], popper: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], popperOptions: [{
-                type: Input
-            }], variant: [{
-                type: Input
-            }], visible: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], visibleChange: [{
-                type: Output
-            }], _toggler: [{
+                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: DropdownService }], propDecorators: { _toggler: [{
                 type: ContentChild,
                 args: [DropdownToggleDirective]
             }], _menu: [{
@@ -5183,15 +5193,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
             }], _menuElementRef: [{
                 type: ContentChild,
                 args: [DropdownMenuDirective, { read: ElementRef }]
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], hostStyle: [{
-                type: HostBinding,
-                args: ['style']
-            }], onHostClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
             }] } });
 
 class DropdownItemDirective {
@@ -5199,90 +5200,90 @@ class DropdownItemDirective {
         this.#elementRef = inject(ElementRef);
         this.#dropdownService = inject(DropdownService);
         this.dropdown = inject(DropdownComponent, { optional: true });
+        /**
+         * Set active state to a dropdown-item.
+         * @return boolean
+         * @default undefined
+         */
+        this.active = input();
         /**
          * Configure dropdown-item close dropdown behavior.
-         * @type boolean
+         * @return boolean
          * @default true
          */
-        this.autoClose = true;
-        this._tabIndex = null;
+        this.autoClose = input(true);
+        /**
+         * Disables a dropdown-item.
+         * @return boolean
+         * @default undefined
+         */
+        this.disabledInput = input(false, { transform: booleanAttribute, alias: 'disabled' });
+        this.disabledEffect = linkedSignal({
+            source: this.disabledInput,
+            computation: (value) => value
+        });
+        this.ariaCurrent = computed(() => {
+            return this.active() ? 'true' : null;
+        });
+        this.hostClasses = computed(() => {
+            return {
+                'dropdown-item': true,
+                active: this.active(),
+                disabled: this.disabled
+            };
+        });
+        this.tabIndexInput = input(null, { alias: 'tabIndex' });
+        this.tabIndex = linkedSignal({
+            source: this.tabIndexInput,
+            computation: (value) => (this.disabled ? '-1' : value)
+        });
     }
     #elementRef;
     #dropdownService;
+    set disabled(value) {
+        this.disabledEffect.set(value);
+    }
+    get disabled() {
+        return this.disabledEffect();
+    }
     focus(origin) {
         this.#elementRef?.nativeElement?.focus();
     }
     getLabel() {
         return this.#elementRef?.nativeElement?.textContent.trim();
     }
-    get ariaCurrent() {
-        return this.active ? 'true' : null;
-    }
-    get hostClasses() {
-        return {
-            'dropdown-item': true,
-            active: this.active,
-            disabled: this.disabled
-        };
-    }
-    set tabIndex(value) {
-        this._tabIndex = value;
-    }
-    get tabIndex() {
-        return this.disabled ? '-1' : this._tabIndex;
-    }
-    get isDisabled() {
-        return this.disabled || null;
-    }
     onClick($event) {
-        if (this.autoClose) {
-            this.#dropdownService.toggle({ visible: 'toggle', dropdown: this.dropdown });
-        }
+        this.handleInteraction();
     }
     onKeyUp($event) {
         if ($event.key === 'Enter') {
-            if (this.autoClose) {
-                this.#dropdownService.toggle({ visible: false, dropdown: this.dropdown });
-            }
+            this.handleInteraction();
+        }
+    }
+    handleInteraction() {
+        if (this.autoClose()) {
+            this.#dropdownService.toggle({ visible: 'toggle', dropdown: this.dropdown });
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DropdownItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DropdownItemDirective, isStandalone: true, selector: "[cDropdownItem]", inputs: { active: "active", autoClose: "autoClose", disabled: "disabled", tabIndex: "tabIndex" }, host: { listeners: { "click": "onClick($event)", "keyup": "onKeyUp($event)" }, properties: { "attr.aria-current": "this.ariaCurrent", "class": "this.hostClasses", "attr.tabindex": "this.tabIndex", "attr.aria-disabled": "this.isDisabled" }, classAttribute: "dropdown-item" }, exportAs: ["cDropdownItem"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.5", type: DropdownItemDirective, isStandalone: true, selector: "[cDropdownItem]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, autoClose: { classPropertyName: "autoClose", publicName: "autoClose", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tabIndexInput: { classPropertyName: "tabIndexInput", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "keyup": "onKeyUp($event)" }, properties: { "class": "hostClasses()", "attr.tabindex": "tabIndex()", "attr.aria-current": "ariaCurrent()", "attr.aria-disabled": "disabled || null" }, classAttribute: "dropdown-item" }, exportAs: ["cDropdownItem"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DropdownItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cDropdownItem]',
                     exportAs: 'cDropdownItem',
-                    host: { class: 'dropdown-item' }
+                    host: {
+                        class: 'dropdown-item',
+                        '[class]': 'hostClasses()',
+                        '[attr.tabindex]': 'tabIndex()',
+                        '[attr.aria-current]': 'ariaCurrent()',
+                        '[attr.aria-disabled]': 'disabled || null',
+                        '(click)': 'onClick($event)',
+                        '(keyup)': 'onKeyUp($event)'
+                    }
                 }]
-        }], propDecorators: { active: [{
-                type: Input
-            }], autoClose: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], ariaCurrent: [{
-                type: HostBinding,
-                args: ['attr.aria-current']
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], tabIndex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
-            }, {
-                type: Input
-            }], isDisabled: [{
-                type: HostBinding,
-                args: ['attr.aria-disabled']
-            }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], onKeyUp: [{
-                type: HostListener,
-                args: ['keyup', ['$event']]
-            }] } });
+        }] });
 
 class DropdownItemPlainDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DropdownItemPlainDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -5300,68 +5301,61 @@ class DropdownCloseDirective {
     constructor() {
         this.#dropdownService = inject(DropdownService);
         this.dropdown = inject(DropdownComponent, { optional: true });
-        this._tabIndex = null;
+        /**
+         * Disables a dropdown-close directive.
+         * @return boolean
+         * @default false
+         */
+        this.disabledInput = input(false, { transform: booleanAttribute, alias: 'disabled' });
+        this.disabled = linkedSignal({
+            source: this.disabledInput,
+            computation: (value) => value || null
+        });
+        this.dropdownComponent = input();
+        this.tabIndexInput = input(null, { alias: 'tabIndex' });
+        this.tabIndex = linkedSignal({
+            source: this.tabIndexInput,
+            computation: (value) => (this.disabled() ? '-1' : value)
+        });
     }
     #dropdownService;
     ngAfterViewInit() {
-        if (this.dropdownComponent) {
-            this.dropdown = this.dropdownComponent;
-            this.#dropdownService = this.dropdownComponent?.dropdownService;
+        const dropdownComponent = this.dropdownComponent();
+        if (dropdownComponent) {
+            this.dropdown = dropdownComponent;
+            this.#dropdownService = dropdownComponent?.dropdownService;
         }
     }
-    get hostClasses() {
-        return {
-            disabled: this.disabled
-        };
-    }
-    set tabIndex(value) {
-        this._tabIndex = value;
-    }
-    get tabIndex() {
-        return this.disabled ? '-1' : this._tabIndex;
-    }
-    get isDisabled() {
-        return this.disabled || null;
-    }
     onClick($event) {
-        !this.disabled && this.#dropdownService.toggle({ visible: false, dropdown: this.dropdown });
+        this.handleToggle();
     }
     onKeyUp($event) {
         if ($event.key === 'Enter') {
-            !this.disabled && this.#dropdownService.toggle({ visible: false, dropdown: this.dropdown });
+            this.handleToggle();
+        }
+    }
+    handleToggle() {
+        if (!this.disabled()) {
+            this.#dropdownService.toggle({ visible: false, dropdown: this.dropdown });
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DropdownCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DropdownCloseDirective, isStandalone: true, selector: "[cDropdownClose]", inputs: { disabled: "disabled", dropdownComponent: "dropdownComponent", tabIndex: "tabIndex" }, host: { listeners: { "click": "onClick($event)", "keyup": "onKeyUp($event)" }, properties: { "class": "this.hostClasses", "attr.tabindex": "this.tabIndex", "attr.aria-disabled": "this.isDisabled" } }, exportAs: ["cDropdownClose"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.5", type: DropdownCloseDirective, isStandalone: true, selector: "[cDropdownClose]", inputs: { disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, dropdownComponent: { classPropertyName: "dropdownComponent", publicName: "dropdownComponent", isSignal: true, isRequired: false, transformFunction: null }, tabIndexInput: { classPropertyName: "tabIndexInput", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "keyup": "onKeyUp($event)" }, properties: { "class.disabled": "disabled()", "attr.aria-disabled": "disabled() || null", "attr.tabindex": "tabIndex()" } }, exportAs: ["cDropdownClose"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DropdownCloseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cDropdownClose]',
-                    exportAs: 'cDropdownClose'
+                    exportAs: 'cDropdownClose',
+                    host: {
+                        '[class.disabled]': 'disabled()',
+                        '[attr.aria-disabled]': 'disabled() || null',
+                        '[attr.tabindex]': 'tabIndex()',
+                        '(click)': 'onClick($event)',
+                        '(keyup)': 'onKeyUp($event)'
+                    }
                 }]
-        }], propDecorators: { disabled: [{
-                type: Input
-            }], dropdownComponent: [{
-                type: Input
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], tabIndex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
-            }, {
-                type: Input
-            }], isDisabled: [{
-                type: HostBinding,
-                args: ['attr.aria-disabled']
-            }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], onKeyUp: [{
-                type: HostListener,
-                args: ['keyup', ['$event']]
-            }] } });
+        }] });
 
 class DropdownModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -7167,7 +7161,7 @@ class TimePickerComponent {
                 useExisting: forwardRef(() => TimePickerComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef }], exportAs: ["cTimePicker"], usesOnChanges: true, ngImport: i0, template: "@if (variant === 'select') {\n  <div class=\"date-picker-timepickers\">\n    <div class=\"picker time-picker\">\n      <div [formGroup]=\"selectTime\" [ngClass]=\"timePickerClasses\" class=\"time-picker-body\">\n        <span class=\"time-picker-inline-icon\"></span>\n        <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectHours\">\n          @for (hour of listOfHours12; track hour; let i = $index) {\n            <option [attr.disabled]=\"hour.disabled || null\" [ngValue]=\"hour.value\">\n              {{ hour.label }}\n            </option>\n          }\n        </select>\n        {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                          cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectMinutes\">\n        @for (minute of listOfMinutes; track minute; let i = $index) {\n          <option [attr.disabled]=\"minute.disabled || null\" [ngValue]=\"minute.value\">\n            {{ minute.label }}\n          </option>\n        }\n      </select>\n        @if (seconds) {\n          {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                            cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectSeconds\">\n            @for (second of listOfSeconds; track second; let i = $index) {\n              <option [attr.disabled]=\"second.disabled || null\" [ngValue]=\"second.value\">\n                {{ second.label }}\n              </option>\n            }\n          </select>\n        }\n        @if (hour12) {\n          <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                  cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectDayPeriod\">\n            @for (dayPeriod of dayPeriods; track dayPeriod) {\n              <option [ngValue]=\"dayPeriod.value\" class=\"time-picker-roll-cell\">\n                {{ dayPeriod.label }}\n              </option>\n            }\n          </select>\n        }\n      </div>\n    </div>\n  </div>\n}\n@if (variant === 'roll') {\n  <c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" [ngClass]=\"timePickerClasses\" [visible]=\"visible\">\n    <div [caret]=\"false\" cDropdownToggle class=\"time-picker-input-group\">\n      <input (blur)=\"handleBlur($event);\"\n             (change)=\"handleTimeInputChange($event)\"\n             (focus)=\"handleFocus($event)\"\n             [attr.disabled]=\"disabled ?? dropdown.visible ? '' : null\"\n             [attr.pattern]=\"hour12 ? '(((0[1-9])|(1[0-2])):([0-5])([0-9])\\\\s(A|P)M)' : '([01]?[0-9]|2[0-3]):[0-5][0-9]'\"\n             [attr.tabindex]=\"disabled ? -1 : 0\"\n             [formControl]=\"timeInput\"\n             [placeholder]=\"placeholder\"\n             [readonly]=\"inputReadOnly ?? null\"\n             class=\"time-picker-input\"\n      >\n      @if (indicator) {\n        <div class=\"time-picker-indicator\"></div>\n      }\n      @if (cleaner && time && !disabled) {\n        <div (click)=\"!disabled && handleClear($event)\" class=\"time-picker-cleaner\" role=\"button\"></div>\n      }\n    </div>\n    <div #dropdownMenu=\"cDropdownMenu\" cDropdownMenu class=\"time-picker-dropdown py-0\">\n      <div class=\"time-picker-body time-picker-roll\" style=\"position: relative;\">\n        <c-time-picker-roll-col\n          (selectedChange)=\"handleSelectTimeChange($event, 'hour')\"\n          [disabled]=\"disabled\"\n          [elements]=\"listOfHours12\"\n          [refresh]=\"dropdownMenu.visible\"\n          [selected]=\"hour\"\n          role=\"listbox\"\n        />\n        <c-time-picker-roll-col\n          (selectedChange)=\"handleSelectTimeChange($event, 'minute')\"\n          [disabled]=\"disabled\"\n          [elements]=\"listOfMinutes\"\n          [refresh]=\"dropdownMenu.visible\"\n          [selected]=\"minute\"\n          role=\"listbox\"\n        />\n        @if (seconds) {\n          <c-time-picker-roll-col\n            (selectedChange)=\"handleSelectTimeChange($event, 'second')\"\n            [disabled]=\"disabled\"\n            [elements]=\"listOfSeconds\"\n            [refresh]=\"dropdownMenu.visible\"\n            [selected]=\"second\"\n            role=\"listbox\"\n          />\n        }\n        @if (hour12) {\n          <c-time-picker-roll-am-pm\n            (selectedChange)=\"handleSelectDayPeriodChange($event)\"\n            [disabled]=\"disabled\"\n            [elements]=\"dayPeriods\"\n            [refresh]=\"dropdownMenu.visible\"\n            [selected]=\"dayPeriod\"\n            role=\"listbox\"\n          />\n        }\n      </div>\n      @if (templates?.timePickerFooter) {\n        <div class=\"time-picker-footer\">\n          <ng-container *ngTemplateOutlet=\"templates?.timePickerFooter; context: {$implicit: dropdown}\" />\n        </div>\n      }\n    </div>\n  </c-dropdown>\n}\n", styles: [".disabled{pointer-events:none}\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$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.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$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }, { kind: "component", type: TimePickerRollColComponent, selector: "c-time-picker-roll-col", inputs: ["disabled", "elements", "onClick", "selected", "refresh"], outputs: ["selectedChange"], exportAs: ["cTimePickerRollCol"] }, { kind: "component", type: TimePickerRollAmPmComponent, selector: "c-time-picker-roll-am-pm", inputs: ["disabled", "elements", "onClick", "selected", "refresh"], outputs: ["selectedChange"] }] }); }
+        ], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef }], exportAs: ["cTimePicker"], usesOnChanges: true, ngImport: i0, template: "@if (variant === 'select') {\n  <div class=\"date-picker-timepickers\">\n    <div class=\"picker time-picker\">\n      <div [formGroup]=\"selectTime\" [ngClass]=\"timePickerClasses\" class=\"time-picker-body\">\n        <span class=\"time-picker-inline-icon\"></span>\n        <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectHours\">\n          @for (hour of listOfHours12; track hour; let i = $index) {\n            <option [attr.disabled]=\"hour.disabled || null\" [ngValue]=\"hour.value\">\n              {{ hour.label }}\n            </option>\n          }\n        </select>\n        {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                          cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectMinutes\">\n        @for (minute of listOfMinutes; track minute; let i = $index) {\n          <option [attr.disabled]=\"minute.disabled || null\" [ngValue]=\"minute.value\">\n            {{ minute.label }}\n          </option>\n        }\n      </select>\n        @if (seconds) {\n          {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                            cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectSeconds\">\n            @for (second of listOfSeconds; track second; let i = $index) {\n              <option [attr.disabled]=\"second.disabled || null\" [ngValue]=\"second.value\">\n                {{ second.label }}\n              </option>\n            }\n          </select>\n        }\n        @if (hour12) {\n          <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                  cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectDayPeriod\">\n            @for (dayPeriod of dayPeriods; track dayPeriod) {\n              <option [ngValue]=\"dayPeriod.value\" class=\"time-picker-roll-cell\">\n                {{ dayPeriod.label }}\n              </option>\n            }\n          </select>\n        }\n      </div>\n    </div>\n  </div>\n}\n@if (variant === 'roll') {\n  <c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" [ngClass]=\"timePickerClasses\" [visible]=\"visible\">\n    <div [caret]=\"false\" cDropdownToggle class=\"time-picker-input-group\">\n      <input (blur)=\"handleBlur($event);\"\n             (change)=\"handleTimeInputChange($event)\"\n             (focus)=\"handleFocus($event)\"\n             [attr.disabled]=\"disabled ?? dropdown.visible() ? '' : null\"\n             [attr.pattern]=\"hour12 ? '(((0[1-9])|(1[0-2])):([0-5])([0-9])\\\\s(A|P)M)' : '([01]?[0-9]|2[0-3]):[0-5][0-9]'\"\n             [attr.tabindex]=\"disabled ? -1 : 0\"\n             [formControl]=\"timeInput\"\n             [placeholder]=\"placeholder\"\n             [readonly]=\"inputReadOnly ?? null\"\n             class=\"time-picker-input\"\n      >\n      @if (indicator) {\n        <div class=\"time-picker-indicator\"></div>\n      }\n      @if (cleaner && time && !disabled) {\n        <div (click)=\"!disabled && handleClear($event)\" class=\"time-picker-cleaner\" role=\"button\"></div>\n      }\n    </div>\n    <div #dropdownMenu=\"cDropdownMenu\" cDropdownMenu class=\"time-picker-dropdown py-0\">\n      <div class=\"time-picker-body time-picker-roll\" style=\"position: relative;\">\n        <c-time-picker-roll-col\n          (selectedChange)=\"handleSelectTimeChange($event, 'hour')\"\n          [disabled]=\"disabled\"\n          [elements]=\"listOfHours12\"\n          [refresh]=\"dropdownMenu.visible\"\n          [selected]=\"hour\"\n          role=\"listbox\"\n        />\n        <c-time-picker-roll-col\n          (selectedChange)=\"handleSelectTimeChange($event, 'minute')\"\n          [disabled]=\"disabled\"\n          [elements]=\"listOfMinutes\"\n          [refresh]=\"dropdownMenu.visible\"\n          [selected]=\"minute\"\n          role=\"listbox\"\n        />\n        @if (seconds) {\n          <c-time-picker-roll-col\n            (selectedChange)=\"handleSelectTimeChange($event, 'second')\"\n            [disabled]=\"disabled\"\n            [elements]=\"listOfSeconds\"\n            [refresh]=\"dropdownMenu.visible\"\n            [selected]=\"second\"\n            role=\"listbox\"\n          />\n        }\n        @if (hour12) {\n          <c-time-picker-roll-am-pm\n            (selectedChange)=\"handleSelectDayPeriodChange($event)\"\n            [disabled]=\"disabled\"\n            [elements]=\"dayPeriods\"\n            [refresh]=\"dropdownMenu.visible\"\n            [selected]=\"dayPeriod\"\n            role=\"listbox\"\n          />\n        }\n      </div>\n      @if (templates?.timePickerFooter) {\n        <div class=\"time-picker-footer\">\n          <ng-container *ngTemplateOutlet=\"templates?.timePickerFooter; context: {$implicit: dropdown}\" />\n        </div>\n      }\n    </div>\n  </c-dropdown>\n}\n", styles: [".disabled{pointer-events:none}\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$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.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$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }, { kind: "component", type: TimePickerRollColComponent, selector: "c-time-picker-roll-col", inputs: ["disabled", "elements", "onClick", "selected", "refresh"], outputs: ["selectedChange"], exportAs: ["cTimePickerRollCol"] }, { kind: "component", type: TimePickerRollAmPmComponent, selector: "c-time-picker-roll-am-pm", inputs: ["disabled", "elements", "onClick", "selected", "refresh"], outputs: ["selectedChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
@@ -7187,7 +7181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                             useExisting: forwardRef(() => TimePickerComponent),
                             multi: true
                         }
-                    ], template: "@if (variant === 'select') {\n  <div class=\"date-picker-timepickers\">\n    <div class=\"picker time-picker\">\n      <div [formGroup]=\"selectTime\" [ngClass]=\"timePickerClasses\" class=\"time-picker-body\">\n        <span class=\"time-picker-inline-icon\"></span>\n        <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectHours\">\n          @for (hour of listOfHours12; track hour; let i = $index) {\n            <option [attr.disabled]=\"hour.disabled || null\" [ngValue]=\"hour.value\">\n              {{ hour.label }}\n            </option>\n          }\n        </select>\n        {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                          cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectMinutes\">\n        @for (minute of listOfMinutes; track minute; let i = $index) {\n          <option [attr.disabled]=\"minute.disabled || null\" [ngValue]=\"minute.value\">\n            {{ minute.label }}\n          </option>\n        }\n      </select>\n        @if (seconds) {\n          {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                            cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectSeconds\">\n            @for (second of listOfSeconds; track second; let i = $index) {\n              <option [attr.disabled]=\"second.disabled || null\" [ngValue]=\"second.value\">\n                {{ second.label }}\n              </option>\n            }\n          </select>\n        }\n        @if (hour12) {\n          <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                  cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectDayPeriod\">\n            @for (dayPeriod of dayPeriods; track dayPeriod) {\n              <option [ngValue]=\"dayPeriod.value\" class=\"time-picker-roll-cell\">\n                {{ dayPeriod.label }}\n              </option>\n            }\n          </select>\n        }\n      </div>\n    </div>\n  </div>\n}\n@if (variant === 'roll') {\n  <c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" [ngClass]=\"timePickerClasses\" [visible]=\"visible\">\n    <div [caret]=\"false\" cDropdownToggle class=\"time-picker-input-group\">\n      <input (blur)=\"handleBlur($event);\"\n             (change)=\"handleTimeInputChange($event)\"\n             (focus)=\"handleFocus($event)\"\n             [attr.disabled]=\"disabled ?? dropdown.visible ? '' : null\"\n             [attr.pattern]=\"hour12 ? '(((0[1-9])|(1[0-2])):([0-5])([0-9])\\\\s(A|P)M)' : '([01]?[0-9]|2[0-3]):[0-5][0-9]'\"\n             [attr.tabindex]=\"disabled ? -1 : 0\"\n             [formControl]=\"timeInput\"\n             [placeholder]=\"placeholder\"\n             [readonly]=\"inputReadOnly ?? null\"\n             class=\"time-picker-input\"\n      >\n      @if (indicator) {\n        <div class=\"time-picker-indicator\"></div>\n      }\n      @if (cleaner && time && !disabled) {\n        <div (click)=\"!disabled && handleClear($event)\" class=\"time-picker-cleaner\" role=\"button\"></div>\n      }\n    </div>\n    <div #dropdownMenu=\"cDropdownMenu\" cDropdownMenu class=\"time-picker-dropdown py-0\">\n      <div class=\"time-picker-body time-picker-roll\" style=\"position: relative;\">\n        <c-time-picker-roll-col\n          (selectedChange)=\"handleSelectTimeChange($event, 'hour')\"\n          [disabled]=\"disabled\"\n          [elements]=\"listOfHours12\"\n          [refresh]=\"dropdownMenu.visible\"\n          [selected]=\"hour\"\n          role=\"listbox\"\n        />\n        <c-time-picker-roll-col\n          (selectedChange)=\"handleSelectTimeChange($event, 'minute')\"\n          [disabled]=\"disabled\"\n          [elements]=\"listOfMinutes\"\n          [refresh]=\"dropdownMenu.visible\"\n          [selected]=\"minute\"\n          role=\"listbox\"\n        />\n        @if (seconds) {\n          <c-time-picker-roll-col\n            (selectedChange)=\"handleSelectTimeChange($event, 'second')\"\n            [disabled]=\"disabled\"\n            [elements]=\"listOfSeconds\"\n            [refresh]=\"dropdownMenu.visible\"\n            [selected]=\"second\"\n            role=\"listbox\"\n          />\n        }\n        @if (hour12) {\n          <c-time-picker-roll-am-pm\n            (selectedChange)=\"handleSelectDayPeriodChange($event)\"\n            [disabled]=\"disabled\"\n            [elements]=\"dayPeriods\"\n            [refresh]=\"dropdownMenu.visible\"\n            [selected]=\"dayPeriod\"\n            role=\"listbox\"\n          />\n        }\n      </div>\n      @if (templates?.timePickerFooter) {\n        <div class=\"time-picker-footer\">\n          <ng-container *ngTemplateOutlet=\"templates?.timePickerFooter; context: {$implicit: dropdown}\" />\n        </div>\n      }\n    </div>\n  </c-dropdown>\n}\n", styles: [".disabled{pointer-events:none}\n"] }]
+                    ], template: "@if (variant === 'select') {\n  <div class=\"date-picker-timepickers\">\n    <div class=\"picker time-picker\">\n      <div [formGroup]=\"selectTime\" [ngClass]=\"timePickerClasses\" class=\"time-picker-body\">\n        <span class=\"time-picker-inline-icon\"></span>\n        <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectHours\">\n          @for (hour of listOfHours12; track hour; let i = $index) {\n            <option [attr.disabled]=\"hour.disabled || null\" [ngValue]=\"hour.value\">\n              {{ hour.label }}\n            </option>\n          }\n        </select>\n        {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                          cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectMinutes\">\n        @for (minute of listOfMinutes; track minute; let i = $index) {\n          <option [attr.disabled]=\"minute.disabled || null\" [ngValue]=\"minute.value\">\n            {{ minute.label }}\n          </option>\n        }\n      </select>\n        @if (seconds) {\n          {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                            cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectSeconds\">\n            @for (second of listOfSeconds; track second; let i = $index) {\n              <option [attr.disabled]=\"second.disabled || null\" [ngValue]=\"second.value\">\n                {{ second.label }}\n              </option>\n            }\n          </select>\n        }\n        @if (hour12) {\n          <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled || null\" [sizing]=\"size ?? ''\"\n                  cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectDayPeriod\">\n            @for (dayPeriod of dayPeriods; track dayPeriod) {\n              <option [ngValue]=\"dayPeriod.value\" class=\"time-picker-roll-cell\">\n                {{ dayPeriod.label }}\n              </option>\n            }\n          </select>\n        }\n      </div>\n    </div>\n  </div>\n}\n@if (variant === 'roll') {\n  <c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" [ngClass]=\"timePickerClasses\" [visible]=\"visible\">\n    <div [caret]=\"false\" cDropdownToggle class=\"time-picker-input-group\">\n      <input (blur)=\"handleBlur($event);\"\n             (change)=\"handleTimeInputChange($event)\"\n             (focus)=\"handleFocus($event)\"\n             [attr.disabled]=\"disabled ?? dropdown.visible() ? '' : null\"\n             [attr.pattern]=\"hour12 ? '(((0[1-9])|(1[0-2])):([0-5])([0-9])\\\\s(A|P)M)' : '([01]?[0-9]|2[0-3]):[0-5][0-9]'\"\n             [attr.tabindex]=\"disabled ? -1 : 0\"\n             [formControl]=\"timeInput\"\n             [placeholder]=\"placeholder\"\n             [readonly]=\"inputReadOnly ?? null\"\n             class=\"time-picker-input\"\n      >\n      @if (indicator) {\n        <div class=\"time-picker-indicator\"></div>\n      }\n      @if (cleaner && time && !disabled) {\n        <div (click)=\"!disabled && handleClear($event)\" class=\"time-picker-cleaner\" role=\"button\"></div>\n      }\n    </div>\n    <div #dropdownMenu=\"cDropdownMenu\" cDropdownMenu class=\"time-picker-dropdown py-0\">\n      <div class=\"time-picker-body time-picker-roll\" style=\"position: relative;\">\n        <c-time-picker-roll-col\n          (selectedChange)=\"handleSelectTimeChange($event, 'hour')\"\n          [disabled]=\"disabled\"\n          [elements]=\"listOfHours12\"\n          [refresh]=\"dropdownMenu.visible\"\n          [selected]=\"hour\"\n          role=\"listbox\"\n        />\n        <c-time-picker-roll-col\n          (selectedChange)=\"handleSelectTimeChange($event, 'minute')\"\n          [disabled]=\"disabled\"\n          [elements]=\"listOfMinutes\"\n          [refresh]=\"dropdownMenu.visible\"\n          [selected]=\"minute\"\n          role=\"listbox\"\n        />\n        @if (seconds) {\n          <c-time-picker-roll-col\n            (selectedChange)=\"handleSelectTimeChange($event, 'second')\"\n            [disabled]=\"disabled\"\n            [elements]=\"listOfSeconds\"\n            [refresh]=\"dropdownMenu.visible\"\n            [selected]=\"second\"\n            role=\"listbox\"\n          />\n        }\n        @if (hour12) {\n          <c-time-picker-roll-am-pm\n            (selectedChange)=\"handleSelectDayPeriodChange($event)\"\n            [disabled]=\"disabled\"\n            [elements]=\"dayPeriods\"\n            [refresh]=\"dropdownMenu.visible\"\n            [selected]=\"dayPeriod\"\n            role=\"listbox\"\n          />\n        }\n      </div>\n      @if (templates?.timePickerFooter) {\n        <div class=\"time-picker-footer\">\n          <ng-container *ngTemplateOutlet=\"templates?.timePickerFooter; context: {$implicit: dropdown}\" />\n        </div>\n      }\n    </div>\n  </c-dropdown>\n}\n", styles: [".disabled{pointer-events:none}\n"] }]
         }], propDecorators: { cleaner: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -10585,7 +10579,7 @@ class MultiSelectComponent {
                 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: 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$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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"] }], deferBlockDependencies: [() => [AsyncPipe,
+        ], 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$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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"] }], deferBlockDependencies: [() => [AsyncPipe,
                 NgStyle,
                 NgTemplateOutlet, import('@angular/cdk/scrolling').then(m => m.CdkFixedSizeVirtualScroll), import('@angular/cdk/scrolling').then(m => m.CdkVirtualScrollViewport), import('@angular/cdk/scrolling').then(m => m.CdkVirtualForOf)]] }); }
 }
@@ -10615,7 +10609,7 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.1.5", ng
                             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': 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"] }]
+                        ], 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$1.FocusMonitor }, { type: MultiSelectService }, { type: i0.IterableDiffers }], propDecorators: { allowCreateOptions: [{
                     type: Input,
                     args: [{ transform: booleanAttribute }]
@@ -12606,7 +12600,7 @@ class ProgressBarDirective {
          * @return number
          * @default 0
          */
-        this.value = input(undefined, { transform: numberAttribute });
+        this.value = input(0, { transform: numberAttribute });
         /**
          * Set the progress bar variant to optional striped.
          * @values 'striped'