@coreui/angular 5.3.12 → 5.3.14

package/fesm2022/coreui-angular.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, PLATFORM_ID, Inject, viewChild, HostListener, ContentChildren, forwardRef, EventEmitter, Output, ContentChild, contentChild, numberAttribute, afterRender, ViewContainerRef, ChangeDetectorRef, model, Pipe, ViewChild, ChangeDetectionStrategy, 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, PLATFORM_ID, Inject, ContentChildren, forwardRef, ContentChild, contentChild, numberAttribute, afterRender, HostListener, viewChild, ViewContainerRef, ChangeDetectorRef, model, EventEmitter, Output, Pipe, ViewChild, ChangeDetectionStrategy, Injector, runInInjectionContext } from '@angular/core';
 import { NgTemplateOutlet, DOCUMENT, NgClass, AsyncPipe, isPlatformServer, isPlatformBrowser, NgStyle } from '@angular/common';
 import { animation, animate, style, AnimationBuilder, useAnimation, trigger, state, transition, group, query, animateChild } from '@angular/animations';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
@@ -124,7 +124,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();
         });
     }
@@ -2281,7 +2281,8 @@ class CarouselState {
         animate: true,
         items: [],
         direction: 'next',
-        transition: 'slide'
+        transition: 'slide',
+        interval: 0
     };
     get state() {
         return this.#state;
@@ -2340,7 +2341,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 }); }
@@ -2359,7 +2361,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' }); }
@@ -2420,7 +2422,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.
@@ -2476,6 +2480,7 @@ class CarouselComponent {
         this.#carouselState.state = {
             activeItemIndex: this.activeIndex(),
             animate: this.animate(),
+            interval: this.interval(),
             transition: this.transition()
         };
         this.setListeners();
@@ -2505,7 +2510,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) {
@@ -2620,10 +2625,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) {
@@ -2645,7 +2646,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,
@@ -2654,7 +2655,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 {
@@ -2719,6 +2720,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);
@@ -2726,13 +2733,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: () => [] });
 
@@ -2817,11 +2825,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([]);
     }
@@ -2837,8 +2849,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');
         }
     }
@@ -2850,14 +2863,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"] }]
         }] });
 
@@ -2946,31 +2960,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, { 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)) {
@@ -2979,7 +3005,7 @@ class DropdownMenuDirective {
         this.#focusKeyManager.onKeydown($event);
     }
     onKeyUp($event) {
-        if (!this.visible) {
+        if (!this.visible()) {
             return;
         }
         if (['Tab'].includes($event.key)) {
@@ -3003,8 +3029,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);
                 }
             }
@@ -3019,7 +3045,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,
@@ -3027,25 +3053,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 }]
             }] } });
@@ -3060,86 +3076,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;
@@ -3148,45 +3157,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;
@@ -3208,42 +3265,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;
     }
@@ -3255,7 +3283,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);
                 }
             });
         }
@@ -3264,7 +3292,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]'))) {
@@ -3272,17 +3300,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();
@@ -3299,7 +3322,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(() => {
@@ -3325,28 +3348,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;
             }
@@ -3361,35 +3387,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: [{
@@ -3398,15 +3408,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 {
@@ -3414,90 +3415,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 }); }
@@ -3515,68 +3516,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 }); }
@@ -6667,7 +6661,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'