@design-factory/design-factory 18.1.1 → 19.0.0

package/fesm2022/design-factory.mjs

@@ -1,33 +1,24 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Directive, Inject, HostBinding, Output, HostListener, Component, ChangeDetectionStrategy, ContentChildren, NgModule, Input, Injectable, InjectionToken, PLATFORM_ID, ViewEncapsulation, ComponentRef, TemplateRef, Optional, forwardRef, ViewChild, ContentChild, inject, Host, Renderer2, ElementRef, numberAttribute } from '@angular/core';
+import { signal, inject, ElementRef, Directive, contentChildren, computed, Component, ChangeDetectionStrategy, NgModule, HostListener, input, Renderer2, Injectable, PLATFORM_ID, InjectionToken, Inject, ViewContainerRef, TemplateRef, effect, booleanAttribute, numberAttribute, output, ViewEncapsulation, ComponentRef, untracked, HostBinding, Input, forwardRef, EventEmitter, Output, ViewChild, ContentChild, NgZone, Injector, contentChild, Host } from '@angular/core';
 import * as i1$1 from '@angular/common';
-import { DOCUMENT, isPlatformBrowser, CommonModule, NgTemplateOutlet } from '@angular/common';
-import { merge, BehaviorSubject, fromEvent, Subscription, combineLatest, Subject, Observable, EMPTY, of, timer, race } from 'rxjs';
+import { DOCUMENT, isPlatformBrowser, isPlatformServer, NgTemplateOutlet, CommonModule, AsyncPipe } from '@angular/common';
 import * as i1 from '@ng-bootstrap/ng-bootstrap';
 import { NgbToastModule, NgbAlertModule, NgbDatepickerKeyboardService, NgbDate, NgbDropdownModule, NgbDatepickerModule, NgbAccordionModule, NgbPopoverConfig, NgbPopoverModule, NgbProgressbarModule, NgbCollapseModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { take, map, switchMap, distinctUntilChanged, throttleTime, tap, filter, endWith, takeUntil } from 'rxjs/operators';
+import { BehaviorSubject, fromEvent, Subscription, combineLatest, Subject, Observable, EMPTY, of, timer, race } from 'rxjs';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import * as i3 from '@angular/router';
+import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import * as i1$2 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { HttpClient } from '@angular/common/http';
 
 class SkipLinkDirective {
-    onFocus() {
-        this.inFocus.emit(true);
-    }
-    onClick() {
-        this.focusOnTarget();
-    }
-    onBlur() {
-        this.inFocus.emit(false);
-    }
-    constructor(element, document) {
-        this.element = element;
-        this.document = document;
-        this.class = 'list-group-item list-group-item-action';
-        this.inFocus = new EventEmitter();
+    constructor() {
+        this.inFocus = signal(false);
+        this.element = inject(ElementRef);
+        this.document = inject(DOCUMENT);
     }
     focusOnTarget() {
         const href = String(this.element.nativeElement.getAttribute('href'));
@@ -43,71 +34,45 @@ class SkipLinkDirective {
             const target = this.document.getElementById(id);
             if (target) {
                 target.focus();
-                this.onBlur();
+                this.inFocus.set(false);
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SkipLinkDirective, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: SkipLinkDirective, isStandalone: true, selector: "[dfSkipLink]", outputs: { inFocus: "inFocus" }, host: { listeners: { "focus": "onFocus()", "click": "onClick()", "blur": "onBlur()" }, properties: { "class": "this.class" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SkipLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.3", type: SkipLinkDirective, isStandalone: true, selector: "[dfSkipLink]", host: { listeners: { "focus": "inFocus.set(true)", "click": "focusOnTarget()", "blur": "inFocus.set(false)" }, classAttribute: "list-group-item list-group-item-action" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SkipLinkDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SkipLinkDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfSkipLink]',
-                    standalone: true
+                    host: {
+                        class: 'list-group-item list-group-item-action',
+                        '(focus)': 'inFocus.set(true)',
+                        '(click)': 'focusOnTarget()',
+                        '(blur)': 'inFocus.set(false)'
+                    }
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }], propDecorators: { class: [{
-                type: HostBinding
-            }], inFocus: [{
-                type: Output
-            }], onFocus: [{
-                type: HostListener,
-                args: ['focus']
-            }], onClick: [{
-                type: HostListener,
-                args: ['click']
-            }], onBlur: [{
-                type: HostListener,
-                args: ['blur']
-            }] } });
+        }] });
 
 class SkipLinksContainerComponent {
-    constructor(changeDetector) {
-        this.changeDetector = changeDetector;
-        this.inFocus = false;
-    }
-    ngAfterContentInit() {
-        if (!this.links.length) {
-            return;
-        }
-        this.focusSubscription = merge(...this.links.map((link) => link.inFocus)).subscribe((focus) => {
-            this.inFocus = focus;
-            this.changeDetector.detectChanges();
-        });
-    }
-    ngOnDestroy() {
-        this.focusSubscription.unsubscribe();
+    constructor() {
+        this.links = contentChildren(SkipLinkDirective);
+        this.inFocus = computed(() => this.links().some((link) => link.inFocus()));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SkipLinksContainerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: SkipLinksContainerComponent, isStandalone: true, selector: "df-skip-links-container", queries: [{ propertyName: "links", predicate: SkipLinkDirective }], ngImport: i0, template: "<section class=\"df-skip-links__section\">\n  <div class=\"df-skip-links\">\n    <div\n      class=\"df-skip-links-wrap list-group\"\n      [class.focus]=\"inFocus\"\n      (blur)=\"inFocus=false\"\n    >\n      <ng-content></ng-content>\n    </div>\n  </div>\n</section>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SkipLinksContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.3", type: SkipLinksContainerComponent, isStandalone: true, selector: "df-skip-links-container", queries: [{ propertyName: "links", predicate: SkipLinkDirective, isSignal: true }], ngImport: i0, template: "<section class=\"df-skip-links__section\">\n  <div class=\"df-skip-links\">\n    <div class=\"df-skip-links-wrap list-group\" [class.focus]=\"inFocus()\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</section>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SkipLinksContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SkipLinksContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'df-skip-links-container', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<section class=\"df-skip-links__section\">\n  <div class=\"df-skip-links\">\n    <div\n      class=\"df-skip-links-wrap list-group\"\n      [class.focus]=\"inFocus\"\n      (blur)=\"inFocus=false\"\n    >\n      <ng-content></ng-content>\n    </div>\n  </div>\n</section>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { links: [{
-                type: ContentChildren,
-                args: [SkipLinkDirective]
-            }] } });
+            args: [{ selector: 'df-skip-links-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"df-skip-links__section\">\n  <div class=\"df-skip-links\">\n    <div class=\"df-skip-links-wrap list-group\" [class.focus]=\"inFocus()\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</section>\n" }]
+        }] });
 
 class DfAccessibilityModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfAccessibilityModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: DfAccessibilityModule, imports: [SkipLinkDirective, SkipLinksContainerComponent], exports: [SkipLinkDirective, SkipLinksContainerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfAccessibilityModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfAccessibilityModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: DfAccessibilityModule, imports: [SkipLinkDirective, SkipLinksContainerComponent], exports: [SkipLinkDirective, SkipLinksContainerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfAccessibilityModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfAccessibilityModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfAccessibilityModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SkipLinkDirective, SkipLinksContainerComponent],
@@ -149,23 +114,25 @@ class DfInsertIconDirective {
         }
         return 'fa-info-circle';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfInsertIconDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: DfInsertIconDirective, isStandalone: true, selector: "ngb-alert[dfInsertAlertIcon],ngb-toast[dfInsertToastIcon]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfInsertIconDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.3", type: DfInsertIconDirective, isStandalone: true, selector: "ngb-alert[dfInsertAlertIcon],ngb-toast[dfInsertToastIcon]", host: { attributes: { "ngSkipHydration": "true" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfInsertIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfInsertIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ngb-alert[dfInsertAlertIcon],ngb-toast[dfInsertToastIcon]',
-                    standalone: true
+                    host: {
+                        ngSkipHydration: 'true'
+                    }
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class DfInsertIconModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfInsertIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: DfInsertIconModule, imports: [DfInsertIconDirective], exports: [DfInsertIconDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfInsertIconModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfInsertIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: DfInsertIconModule, imports: [DfInsertIconDirective], exports: [DfInsertIconDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfInsertIconModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfInsertIconModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfInsertIconModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfInsertIconDirective],
@@ -174,11 +141,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }] });
 
 class DfToastModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: DfToastModule, imports: [DfInsertIconModule], exports: [NgbToastModule, DfInsertIconModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfToastModule, imports: [DfInsertIconModule, NgbToastModule, DfInsertIconModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: DfToastModule, imports: [DfInsertIconModule], exports: [NgbToastModule, DfInsertIconModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfToastModule, imports: [DfInsertIconModule, NgbToastModule, DfInsertIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfToastModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfToastModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfInsertIconModule],
@@ -187,11 +154,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }] });
 
 class DfAlertModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: DfAlertModule, imports: [DfInsertIconModule], exports: [NgbAlertModule, DfInsertIconModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfAlertModule, imports: [DfInsertIconModule, NgbAlertModule, DfInsertIconModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: DfAlertModule, imports: [DfInsertIconModule], exports: [NgbAlertModule, DfInsertIconModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfAlertModule, imports: [DfInsertIconModule, NgbAlertModule, DfInsertIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfAlertModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfAlertModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfInsertIconModule],
@@ -199,42 +166,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 }]
         }] });
 
-class CloseInputDatePickerDirective {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-    }
-    onClick(targetElement) {
-        const isConnected = document.body.parentElement.contains(targetElement);
-        // targetElement.isConnected to check if it is attached to the DOM
-        if (!targetElement || !isConnected || !this.inputDatePicker._cRef) {
-            return;
-        }
-        const clickedInside = this.inputDatePicker._cRef.location.nativeElement.contains(targetElement);
-        const clickedInsideInput = this.elementRef.nativeElement.contains(targetElement);
-        if (!(clickedInside || clickedInsideInput)) {
-            this.inputDatePicker.close();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CloseInputDatePickerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: CloseInputDatePickerDirective, isStandalone: true, selector: "[dfCloseInputDatePicker]", inputs: { inputDatePicker: ["dfCloseInputDatePicker", "inputDatePicker"] }, host: { listeners: { "document:click": "onClick($event.target)", "document:keyup": "onClick($event.target)" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CloseInputDatePickerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[dfCloseInputDatePicker]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { inputDatePicker: [{
-                type: Input,
-                args: ['dfCloseInputDatePicker']
-            }], onClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event.target']]
-            }, {
-                type: HostListener,
-                args: ['document:keyup', ['$event.target']]
-            }] } });
-
 class DfTriggerClickDirective {
     constructor(elementRef) {
         this.elementRef = elementRef;
@@ -244,14 +175,13 @@ class DfTriggerClickDirective {
         event.preventDefault();
         this.elementRef.nativeElement.click();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfTriggerClickDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: DfTriggerClickDirective, isStandalone: true, selector: "[dfTriggerClick]", host: { listeners: { "keydown.enter": "triggerClick($event)", "keydown.space": "triggerClick($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfTriggerClickDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.3", type: DfTriggerClickDirective, isStandalone: true, selector: "[dfTriggerClick]", host: { listeners: { "keydown.enter": "triggerClick($event)", "keydown.space": "triggerClick($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfTriggerClickDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfTriggerClickDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[dfTriggerClick]',
-                    standalone: true
+                    selector: '[dfTriggerClick]'
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { triggerClick: [{
                 type: HostListener,
@@ -265,17 +195,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
  * My dfInputIcon directive
  */
 class DfInputIconDirective {
-    constructor(renderer, el) {
-        this.renderer = renderer;
-        this.el = el;
-        this.dfInputIcon = [];
+    constructor() {
+        this.dfInputIcon = input.required();
         this.isDisabled = false;
         this.siblingsNode = [];
+        this.renderer = inject(Renderer2);
+        this.el = inject(ElementRef);
     }
     ngDoCheck() {
         if (this.el.nativeElement.disabled !== this.isDisabled) {
             this.isDisabled = this.el.nativeElement.disabled;
-            this.siblingsNode.forEach(siblings => {
+            this.siblingsNode.forEach((siblings) => {
                 if (this.isDisabled) {
                     this.renderer.addClass(siblings, 'df-disabled');
                 }
@@ -287,7 +217,7 @@ class DfInputIconDirective {
     }
     ngOnInit() {
         this.renderer.addClass(this.el.nativeElement, 'df-input-withicon');
-        this.dfInputIcon.forEach(direction => {
+        this.dfInputIcon().forEach((direction) => {
             this.renderer.addClass(this.el.nativeElement, direction.toString());
             this.renderer.addClass(this.el.nativeElement.parentNode, `df-input-${direction}`);
             const sibling = this.el.nativeElement.parentNode.querySelector(`.input-group-${direction}`);
@@ -331,35 +261,28 @@ class DfInputIconDirective {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfInputIconDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: DfInputIconDirective, isStandalone: true, selector: "[dfInputIcon]", inputs: { dfInputIcon: "dfInputIcon" }, host: { listeners: { "blur": "onBlur($event)", "focus": "onFocus($event)", "keydown.Tab": "onTab($event)" } }, exportAs: ["dfInputIcon"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfInputIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.3", type: DfInputIconDirective, isStandalone: true, selector: "[dfInputIcon]", inputs: { dfInputIcon: { classPropertyName: "dfInputIcon", publicName: "dfInputIcon", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "blur": "onBlur()", "focus": "onFocus()", "keydown.Tab": "onTab($event)" } }, exportAs: ["dfInputIcon"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfInputIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfInputIconDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'dfInputIcon',
                     selector: '[dfInputIcon]',
-                    standalone: true
+                    host: {
+                        '(blur)': 'onBlur()',
+                        '(focus)': 'onFocus()',
+                        '(keydown.Tab)': 'onTab($event)'
+                    }
                 }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { dfInputIcon: [{
-                type: Input
-            }], onBlur: [{
-                type: HostListener,
-                args: ['blur', ['$event']]
-            }], onFocus: [{
-                type: HostListener,
-                args: ['focus', ['$event']]
-            }], onTab: [{
-                type: HostListener,
-                args: ['keydown.Tab', ['$event']]
-            }] } });
+        }] });
 
 class DfAdvancedInputModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfAdvancedInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: DfAdvancedInputModule, imports: [DfTriggerClickDirective, DfInputIconDirective], exports: [DfTriggerClickDirective, DfInputIconDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfAdvancedInputModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfAdvancedInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: DfAdvancedInputModule, imports: [DfTriggerClickDirective, DfInputIconDirective], exports: [DfTriggerClickDirective, DfInputIconDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfAdvancedInputModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfAdvancedInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfAdvancedInputModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfTriggerClickDirective, DfInputIconDirective],
@@ -396,10 +319,10 @@ class DfDatepickerKeyboardService extends NgbDatepickerKeyboardService {
         event.preventDefault();
         event.stopPropagation();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfDatepickerKeyboardService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfDatepickerKeyboardService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfDatepickerKeyboardService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfDatepickerKeyboardService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfDatepickerKeyboardService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfDatepickerKeyboardService, decorators: [{
             type: Injectable
         }] });
 
@@ -423,10 +346,10 @@ class DfDirectionDetectionService {
         }
         return RightToLeftDirectionEnum.LeftToRight;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfDirectionDetectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfDirectionDetectionService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfDirectionDetectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfDirectionDetectionService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfDirectionDetectionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfDirectionDetectionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -437,18 +360,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
  * My dfDatepickerRange directive
  */
 class DfDatepickerRangeDirective {
-    constructor(renderer, el, dfDirectionServ) {
-        this.renderer = renderer;
-        this.el = el;
-        this.dfDirectionServ = dfDirectionServ;
+    constructor() {
         this.isDisabled = false;
         this.siblingsNode = [];
         this.removeListener = [];
         this.focusState = [];
+        this.renderer = inject(Renderer2);
+        this.el = inject(ElementRef);
+        this.dfDirectionServ = inject(DfDirectionDetectionService);
+        this.platformId = inject(PLATFORM_ID);
     }
     ngOnInit() {
         this.renderer.addClass(this.el.nativeElement, 'df-input-datepicker-range');
-        this.inputsElements = [...this.el.nativeElement.querySelectorAll('input')];
+        if (isPlatformBrowser(this.platformId)) {
+            this.inputsElements = [...this.el.nativeElement.querySelectorAll('input')];
+        }
+        else {
+            this.inputsElements = [];
+        }
         if (this.inputsElements.length === 2) {
             this.inputsElements.forEach((el, index) => this.initInput(el, index));
         }
@@ -518,17 +447,16 @@ class DfDatepickerRangeDirective {
     ngOnDestroy() {
         this.removeListener.forEach((item) => item());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfDatepickerRangeDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: DfDirectionDetectionService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: DfDatepickerRangeDirective, isStandalone: true, selector: "[dfDatepickerRange]", exportAs: ["dfDatepickerRange"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfDatepickerRangeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.3", type: DfDatepickerRangeDirective, isStandalone: true, selector: "[dfDatepickerRange]", exportAs: ["dfDatepickerRange"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfDatepickerRangeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfDatepickerRangeDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'dfDatepickerRange',
-                    selector: '[dfDatepickerRange]',
-                    standalone: true
+                    selector: '[dfDatepickerRange]'
                 }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: DfDirectionDetectionService }] });
+        }] });
 
 class DfDatepickerRangeService {
     constructor(calendar, formatter) {
@@ -549,7 +477,7 @@ class DfDatepickerRangeService {
             this.fromDate = date;
             this.fromDateAsStr = this.formatter.format(this.fromDate);
         }
-        else if (this.fromDate && !this.toDate && date.after(this.fromDate)) {
+        else if (this.fromDate && !this.toDate && (date.equals(this.fromDate) || date.after(this.fromDate))) {
             this.toDate = date;
             this.toDateAsStr = this.formatter.format(this.toDate);
             if (this.isClosingOnToDate && this.dropDown) {
@@ -616,38 +544,26 @@ class DfDatepickerRangeService {
         this.toDate = this.toDate ? this.parseInput(this.toDate, typed) : null;
         this.toDateAsStr = this.formatter.format(this.toDate);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfDatepickerRangeService, deps: [{ token: i1.NgbCalendar }, { token: i1.NgbDateParserFormatter }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfDatepickerRangeService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfDatepickerRangeService, deps: [{ token: i1.NgbCalendar }, { token: i1.NgbDateParserFormatter }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfDatepickerRangeService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfDatepickerRangeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfDatepickerRangeService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.NgbCalendar }, { type: i1.NgbDateParserFormatter }] });
 
 class DfDatePickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: DfDatePickerModule, imports: [NgbDropdownModule, CloseInputDatePickerDirective, DfDatepickerRangeDirective], exports: [CloseInputDatePickerDirective,
-            NgbDatepickerModule,
-            DfAdvancedInputModule,
-            DfDatepickerRangeDirective,
-            NgbDropdownModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfDatePickerModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: DfDatePickerModule, imports: [NgbDropdownModule, DfDatepickerRangeDirective], exports: [NgbDatepickerModule, DfAdvancedInputModule, DfDatepickerRangeDirective, NgbDropdownModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfDatePickerModule, providers: [
             { provide: NgbDatepickerKeyboardService, useClass: DfDatepickerKeyboardService },
             DfDatepickerRangeService
-        ], imports: [NgbDropdownModule, NgbDatepickerModule,
-            DfAdvancedInputModule,
-            NgbDropdownModule] }); }
+        ], imports: [NgbDropdownModule, NgbDatepickerModule, DfAdvancedInputModule, NgbDropdownModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfDatePickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfDatePickerModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [NgbDropdownModule, CloseInputDatePickerDirective, DfDatepickerRangeDirective],
-                    exports: [
-                        CloseInputDatePickerDirective,
-                        NgbDatepickerModule,
-                        DfAdvancedInputModule,
-                        DfDatepickerRangeDirective,
-                        NgbDropdownModule
-                    ],
+                    imports: [NgbDropdownModule, DfDatepickerRangeDirective],
+                    exports: [NgbDatepickerModule, DfAdvancedInputModule, DfDatepickerRangeDirective, NgbDropdownModule],
                     providers: [
                         { provide: NgbDatepickerKeyboardService, useClass: DfDatepickerKeyboardService },
                         DfDatepickerRangeService
@@ -739,10 +655,10 @@ class DfBreakpoints {
         }
         return dict;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfBreakpoints, deps: [{ token: BREAKPOINTS_VARS }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfBreakpoints, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfBreakpoints, deps: [{ token: BREAKPOINTS_VARS }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfBreakpoints, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfBreakpoints, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfBreakpoints, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -767,10 +683,10 @@ class DfMediaQuery {
             return this.notSupported(query);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfMediaQuery, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfMediaQuery, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfMediaQuery, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfMediaQuery, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfMediaQuery, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfMediaQuery, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
@@ -827,10 +743,10 @@ class DfMediaObserver {
         this._queries.set(query, meta);
         return meta;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfMediaObserver, deps: [{ token: DfMediaQuery }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfMediaObserver, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfMediaObserver, deps: [{ token: DfMediaQuery }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfMediaObserver, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfMediaObserver, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfMediaObserver, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: DfMediaQuery }] });
@@ -869,10 +785,10 @@ class DfMedia {
             return this.mediaObserver.observe(query);
         }), map(value => value.matches), distinctUntilChanged());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfMedia, deps: [{ token: DfMediaObserver }, { token: DfBreakpoints }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfMedia, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfMedia, deps: [{ token: DfMediaObserver }, { token: DfBreakpoints }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfMedia, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfMedia, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfMedia, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: DfMediaObserver }, { type: DfBreakpoints }] });
@@ -883,22 +799,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
  * Import DfMediaModule from DF to use all media elements provided
  */
 class DfIfMediaDirective {
-    /**
-     * Input of the directive
-     * @param mediaOrBreakpoints either media query string/Array of string or in case of BS usage a
-     * string/Array of string of the breakpoints name (sm...).
-     */
-    set dfIfMedia(mediaOrBreakpoints) {
-        this._subscription.add(this._mediaService.getObservable(mediaOrBreakpoints).subscribe((isValidated) => {
-            this.update(isValidated);
-        }));
-    }
-    constructor(_viewContainerRef, _template, _mediaService) {
-        this._viewContainerRef = _viewContainerRef;
-        this._template = _template;
-        this._mediaService = _mediaService;
+    constructor() {
         this._viewInstance = null;
+        /**
+         * Input of the directive
+         * @param mediaOrBreakpoints either media query string/Array of string or in case of BS usage a
+         * string/Array of string of the breakpoints name (sm...).
+         */
+        this.dfIfMedia = input.required();
+        this._viewContainerRef = inject(ViewContainerRef);
+        this._template = inject(TemplateRef);
+        this._mediaService = inject(DfMedia);
         this._subscription = new Subscription();
+        effect(() => {
+            this._subscription.unsubscribe();
+            this._subscription = this._mediaService.getObservable(this.dfIfMedia()).subscribe((matches) => {
+                this.update(matches);
+            });
+        });
     }
     ngOnDestroy() {
         if (this._viewInstance) {
@@ -915,22 +833,20 @@ class DfIfMediaDirective {
             this._viewInstance = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfIfMediaDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: DfMedia }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: DfIfMediaDirective, isStandalone: true, selector: "[dfIfMedia]", inputs: { dfIfMedia: "dfIfMedia" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfIfMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.3", type: DfIfMediaDirective, isStandalone: true, selector: "[dfIfMedia]", inputs: { dfIfMedia: { classPropertyName: "dfIfMedia", publicName: "dfIfMedia", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfIfMediaDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfIfMediaDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[dfIfMedia]', standalone: true }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: DfMedia }], propDecorators: { dfIfMedia: [{
-                type: Input
-            }] } });
+            args: [{ selector: '[dfIfMedia]' }]
+        }], ctorParameters: () => [] });
 
 class DfMediaModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfMediaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: DfMediaModule, imports: [DfIfMediaDirective], exports: [DfIfMediaDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfMediaModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfMediaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: DfMediaModule, imports: [DfIfMediaDirective], exports: [DfIfMediaDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfMediaModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfMediaModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfMediaModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfIfMediaDirective],
@@ -939,11 +855,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }] });
 
 class DfFooterModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfFooterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: DfFooterModule, imports: [DfMediaModule, NgbAccordionModule], exports: [DfMediaModule, NgbAccordionModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfFooterModule, imports: [DfMediaModule, NgbAccordionModule, DfMediaModule, NgbAccordionModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfFooterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: DfFooterModule, imports: [DfMediaModule, NgbAccordionModule], exports: [DfMediaModule, NgbAccordionModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfFooterModule, imports: [DfMediaModule, NgbAccordionModule, DfMediaModule, NgbAccordionModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfFooterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfFooterModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfMediaModule, NgbAccordionModule],
@@ -952,8 +868,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }] });
 
 class DfAmadeusIconComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfAmadeusIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: DfAmadeusIconComponent, isStandalone: true, selector: "df-amadeus-icon", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfAmadeusIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: DfAmadeusIconComponent, isStandalone: true, selector: "df-amadeus-icon", ngImport: i0, template: `
     <svg
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
@@ -989,7 +905,7 @@ class DfAmadeusIconComponent {
     </svg>
   `, isInline: true, styles: [":root{--df-navbar-height: 3.5rem}:host{min-width:60px}:host svg{margin:10%}:host.icon-primary{fill:var(--df-primary-500)}:host.icon-white{fill:#fff}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfAmadeusIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfAmadeusIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'df-amadeus-icon', template: `
     <svg
@@ -1025,15 +941,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         />
       </g>
     </svg>
-  `, standalone: true, styles: [":root{--df-navbar-height: 3.5rem}:host{min-width:60px}:host svg{margin:10%}:host.icon-primary{fill:var(--df-primary-500)}:host.icon-white{fill:#fff}\n"] }]
+  `, styles: [":root{--df-navbar-height: 3.5rem}:host{min-width:60px}:host svg{margin:10%}:host.icon-primary{fill:var(--df-primary-500)}:host.icon-white{fill:#fff}\n"] }]
         }] });
 
 class DfIconModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: DfIconModule, imports: [DfAmadeusIconComponent], exports: [DfAmadeusIconComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfIconModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: DfIconModule, imports: [DfAmadeusIconComponent], exports: [DfAmadeusIconComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfIconModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfIconModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfIconModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfAmadeusIconComponent],
@@ -1041,6 +957,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 }]
         }] });
 
+/**
+ * @deprecated `DfModalService` is deprecated, use `NgbModal` from ng-bootstrap instead.
+ * Please note that `NgbModal` adds 'modal-open' class to the body while DfModalService adds 'df-modal-open' class. Both classes include the same styles, but you may need to update your stylesheets if you were overriding 'df-modal-open' in your application.
+ */
 class DfModalService {
     constructor(modalService, rendererFactory) {
         this.modalService = modalService;
@@ -1064,10 +984,10 @@ class DfModalService {
         });
         return modalRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfModalService, deps: [{ token: i1.NgbModal }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfModalService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfModalService, deps: [{ token: i1.NgbModal }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfModalService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfModalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfModalService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1079,19 +999,19 @@ class DfPopoverConfig extends NgbPopoverConfig {
         super(...arguments);
         this.autoClose = 'outside';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfPopoverConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfPopoverConfig }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfPopoverConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfPopoverConfig }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfPopoverConfig, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfPopoverConfig, decorators: [{
             type: Injectable
         }] });
 
 class DfPopoverModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: DfPopoverModule, exports: [NgbPopoverModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfPopoverModule, providers: [{ provide: NgbPopoverConfig, useClass: DfPopoverConfig }], imports: [NgbPopoverModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: DfPopoverModule, exports: [NgbPopoverModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfPopoverModule, providers: [{ provide: NgbPopoverConfig, useClass: DfPopoverConfig }], imports: [NgbPopoverModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfPopoverModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfPopoverModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [NgbPopoverModule],
@@ -1101,77 +1021,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
 
 class DfProgressbarComponent {
     constructor() {
-        this.infiniteAnimation = false;
+        this.PERCENTAGE_PLACEHOLDER = '%PERCENTAGE%';
+        this.FADING_DELAY_MS = 1500; // if triggered by observables, number of milliseconds after progress bar disappears once stopped
+        this.infiniteAnimation = input(false, { transform: booleanAttribute });
         /**
          * Current value of the progressBar. If 'maxValue' is not defined, value represents a percentage. Otherwise, progress
          * bar percentage value will be computed based on the ratio of 'value/maxValue'
          */
-        this._value = 0;
-        this._maxValue = 100;
+        this.value = input(0, { transform: numberAttribute });
+        this.maxValue = input(100, { transform: numberAttribute });
+        this.innerValue = signal(0);
+        this.percentageValue = computed(() => {
+            const val = this.innerValue();
+            const maxVal = this.maxValue();
+            if (val > maxVal) {
+                return 100;
+            }
+            else {
+                return Math.floor((val / maxVal) * 100);
+            }
+        });
+        this.percentageValueChange = output();
         /**
-         * Text to be displayed on top of the progressbar
+         * Observable used to trigger the start of the loading.
+         * When emitting, progressbar will start to randomly increment toward 100%.
          */
-        this._text = '';
-        this._percentageValue = 0;
-        this.percentageValueChange = new EventEmitter();
-        this.computedText = '';
-        this.displayProgressBar = false;
-        this.FADING_DELAY_MS = 1500; // if triggered by observables, number of milliseconds after progress bar disappears once stopped
+        this.start$ = input();
+        /**
+         * Observable used to trigger the end of the loading.
+         * When emitting, it forces the progressbar to reach 100%.
+         */
+        this.end$ = input();
+        /**
+         * Id of the label used to describe the progress bar.
+         * It is used in priority compared to the ariaLabel.
+         */
+        this.ariaLabelledBy = input();
+        /**
+         * Aria label used to describe the progress bar if no ariaLabelledBy is specified.
+         */
+        this.ariaLabel = input();
+        this.text = input('');
+        this.computedText = computed(() => {
+            const text = this.text();
+            if (text.includes(this.PERCENTAGE_PLACEHOLDER)) {
+                const advancementInPercents = `${Math.floor(this.percentageValue())}%`;
+                return text.replace(this.PERCENTAGE_PLACEHOLDER, advancementInPercents);
+            }
+            return text;
+        });
+        this.displayProgressBar = signal(false);
         this.animationOngoing = false;
-    }
-    set value(newValue) {
-        this._value = newValue;
-        this.updatePercentageValue();
-        this.updateText();
-    }
-    get value() {
-        return this._value;
-    }
-    set maxValue(newValue) {
-        this._maxValue = newValue;
-        this.updatePercentageValue();
-        this.updateText();
-    }
-    get maxValue() {
-        return this._maxValue;
-    }
-    set text(newText) {
-        this._text = newText;
-        this.updateText();
-    }
-    get text() {
-        return this._text;
-    }
-    set percentageValue(newValue) {
-        this._percentageValue = newValue;
-        this.percentageValueChange.emit(newValue);
-    }
-    get percentageValue() {
-        return this._percentageValue;
+        effect(() => {
+            this.innerValue.set(this.value());
+        });
+        effect(() => {
+            this.percentageValueChange.emit(this.percentageValue());
+        });
     }
     ngOnInit() {
-        const isTriggeredByObservables = this.start$ && this.end$;
+        const start$ = this.start$();
+        const end$ = this.end$();
+        const isTriggeredByObservables = start$ && end$;
         if (isTriggeredByObservables) {
-            this.startSubscription = this.start$.subscribe((_) => {
+            this.startSubscription = start$.subscribe((_) => {
                 this.animationOngoing = true;
                 this.stopAutomaticIncrement();
                 this.resetProgressBarValues();
-                this.displayProgressBar = true;
+                this.displayProgressBar.set(true);
                 this.startAutomaticIncrement();
             });
-            this.endSubscription = this.end$.subscribe((_) => {
+            this.endSubscription = end$.subscribe((_) => {
                 if (this.animationOngoing) {
                     this.animationOngoing = false;
                     this.stopAutomaticIncrement();
-                    this.value = 100;
+                    this.innerValue.set(100);
                     setTimeout(() => {
-                        this.displayProgressBar = false;
+                        this.displayProgressBar.set(false);
                     }, this.FADING_DELAY_MS);
                 }
             });
         }
         else {
-            this.displayProgressBar = true;
+            this.displayProgressBar.set(true);
         }
     }
     ngOnDestroy() {
@@ -1183,33 +1115,15 @@ class DfProgressbarComponent {
         }
         this.stopAutomaticIncrement();
     }
-    updateText() {
-        const precentagePlaceholder = '%PERCENTAGE%';
-        if (this.text.includes(precentagePlaceholder)) {
-            const advancementInPercents = `${Math.floor(this.percentageValue)}%`;
-            this.computedText = this.text.replace(precentagePlaceholder, advancementInPercents);
-            return;
-        }
-        this.computedText = this.text;
-    }
-    updatePercentageValue() {
-        if (this.value > this.maxValue) {
-            this.percentageValue = 100;
-            return;
-        }
-        this.percentageValue = Math.floor((this.value / this.maxValue) * 100);
-    }
     /**
      * Randomly increase the percentage but making sure that it can never reach 100%
      */
     increasePercentage() {
-        const maximumReachableValue = 90;
-        const remainingPercentage = maximumReachableValue - this.value;
+        const maximumReachableValue = 0.9 * this.maxValue();
+        const remainingPercentage = maximumReachableValue - this.value();
         const averageIncreaseRatio = 0.015;
         const randomIncreaseRatio = Math.random() * 2 * averageIncreaseRatio;
-        this.value += randomIncreaseRatio * remainingPercentage;
-        this.updatePercentageValue();
-        this.updateText();
+        this.innerValue.update((val) => val + randomIncreaseRatio * remainingPercentage);
     }
     /**
      * Clears the 'setInterval' function so that the automatic increase of the progressbar stops
@@ -1224,41 +1138,22 @@ class DfProgressbarComponent {
         this.intervalId = setInterval(this.increasePercentage.bind(this), 50);
     }
     resetProgressBarValues() {
-        this.value = 0;
-        this.maxValue = 100;
+        this.innerValue.set(0);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfProgressbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: DfProgressbarComponent, isStandalone: true, selector: "df-progressbar", inputs: { infiniteAnimation: "infiniteAnimation", value: "value", maxValue: "maxValue", text: "text", start$: "start$", end$: "end$", ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel" }, outputs: { percentageValueChange: "percentageValueChange" }, ngImport: i0, template: "@if (displayProgressBar) {\n  @if (computedText) {\n    <div class=\"progressbar-text mb-2\">{{ computedText }}</div>\n  }\n  @if (infiniteAnimation) {\n    <div\n      class=\"progress\"\n      role=\"progressbar\"\n      aria-valuetext=\"indeterminate\"\n      [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n      [attr.aria-label]=\"!ariaLabelledBy && ariaLabel ? ariaLabel : null\"\n    >\n      <div class=\"progress-bar infinite-animation\"></div>\n    </div>\n  } @else {\n    <div\n      class=\"progress\"\n      role=\"progressbar\"\n      [attr.aria-valuenow]=\"value\"\n      aria-valuemin=\"0\"\n      [attr.aria-valuemax]=\"maxValue\"\n      [attr.aria-valuetext]=\"computedText ? computedText : null\"\n      [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n      [attr.aria-label]=\"!ariaLabelledBy && ariaLabel ? ariaLabel : null\"\n    >\n      <div [style.width.%]=\"percentageValue\" class=\"progress-bar\"></div>\n    </div>\n  }\n}\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfProgressbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.3", type: DfProgressbarComponent, isStandalone: true, selector: "df-progressbar", inputs: { infiniteAnimation: { classPropertyName: "infiniteAnimation", publicName: "infiniteAnimation", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, start$: { classPropertyName: "start$", publicName: "start$", isSignal: true, isRequired: false, transformFunction: null }, end$: { classPropertyName: "end$", publicName: "end$", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { percentageValueChange: "percentageValueChange" }, ngImport: i0, template: "@if (displayProgressBar()) {\n  @if (computedText(); as computedText) {\n    <div class=\"progressbar-text mb-2\">{{ computedText }}</div>\n  }\n  @if (infiniteAnimation()) {\n    <div\n      class=\"progress\"\n      role=\"progressbar\"\n      aria-valuetext=\"indeterminate\"\n      [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n      [attr.aria-label]=\"!ariaLabelledBy() && ariaLabel() ? ariaLabel() : null\"\n    >\n      <div class=\"progress-bar infinite-animation\"></div>\n    </div>\n  } @else {\n    <div\n      class=\"progress\"\n      role=\"progressbar\"\n      [attr.aria-valuenow]=\"innerValue()\"\n      aria-valuemin=\"0\"\n      [attr.aria-valuemax]=\"maxValue()\"\n      [attr.aria-valuetext]=\"computedText() || null\"\n      [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n      [attr.aria-label]=\"!ariaLabelledBy() && ariaLabel() ? ariaLabel() : null\"\n    >\n      <div [style.width.%]=\"percentageValue()\" class=\"progress-bar\"></div>\n    </div>\n  }\n}\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfProgressbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfProgressbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'df-progressbar', standalone: true, template: "@if (displayProgressBar) {\n  @if (computedText) {\n    <div class=\"progressbar-text mb-2\">{{ computedText }}</div>\n  }\n  @if (infiniteAnimation) {\n    <div\n      class=\"progress\"\n      role=\"progressbar\"\n      aria-valuetext=\"indeterminate\"\n      [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n      [attr.aria-label]=\"!ariaLabelledBy && ariaLabel ? ariaLabel : null\"\n    >\n      <div class=\"progress-bar infinite-animation\"></div>\n    </div>\n  } @else {\n    <div\n      class=\"progress\"\n      role=\"progressbar\"\n      [attr.aria-valuenow]=\"value\"\n      aria-valuemin=\"0\"\n      [attr.aria-valuemax]=\"maxValue\"\n      [attr.aria-valuetext]=\"computedText ? computedText : null\"\n      [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n      [attr.aria-label]=\"!ariaLabelledBy && ariaLabel ? ariaLabel : null\"\n    >\n      <div [style.width.%]=\"percentageValue\" class=\"progress-bar\"></div>\n    </div>\n  }\n}\n" }]
-        }], propDecorators: { infiniteAnimation: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], maxValue: [{
-                type: Input
-            }], text: [{
-                type: Input
-            }], start$: [{
-                type: Input
-            }], end$: [{
-                type: Input
-            }], ariaLabelledBy: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input
-            }], percentageValueChange: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'df-progressbar', template: "@if (displayProgressBar()) {\n  @if (computedText(); as computedText) {\n    <div class=\"progressbar-text mb-2\">{{ computedText }}</div>\n  }\n  @if (infiniteAnimation()) {\n    <div\n      class=\"progress\"\n      role=\"progressbar\"\n      aria-valuetext=\"indeterminate\"\n      [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n      [attr.aria-label]=\"!ariaLabelledBy() && ariaLabel() ? ariaLabel() : null\"\n    >\n      <div class=\"progress-bar infinite-animation\"></div>\n    </div>\n  } @else {\n    <div\n      class=\"progress\"\n      role=\"progressbar\"\n      [attr.aria-valuenow]=\"innerValue()\"\n      aria-valuemin=\"0\"\n      [attr.aria-valuemax]=\"maxValue()\"\n      [attr.aria-valuetext]=\"computedText() || null\"\n      [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n      [attr.aria-label]=\"!ariaLabelledBy() && ariaLabel() ? ariaLabel() : null\"\n    >\n      <div [style.width.%]=\"percentageValue()\" class=\"progress-bar\"></div>\n    </div>\n  }\n}\n" }]
+        }], ctorParameters: () => [] });
 
 class DfProgressbarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfProgressbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: DfProgressbarModule, imports: [DfProgressbarComponent], exports: [DfProgressbarComponent, NgbProgressbarModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfProgressbarModule, imports: [NgbProgressbarModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfProgressbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: DfProgressbarModule, imports: [DfProgressbarComponent], exports: [DfProgressbarComponent, NgbProgressbarModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfProgressbarModule, imports: [NgbProgressbarModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfProgressbarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfProgressbarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfProgressbarComponent],
@@ -1294,97 +1189,71 @@ var DfProgressIndicatorContentPosition;
 class DfProgressIndicatorContainerComponent {
     constructor() {
         this.DEFAULT_CLASS_POSITION = 'df-progressindicator-centered';
-        this.positionClass = this.DEFAULT_CLASS_POSITION;
-    }
-    get classes() {
-        return `df-progressindicator-container ${this.containerClass || ''} ${this.positionClass}`;
-    }
-    set position(newPosition) {
-        switch (newPosition) {
-            case DfProgressIndicatorContentPosition.TOP:
-                this.positionClass = 'df-progressindicator-top';
-                break;
-            case DfProgressIndicatorContentPosition.BOTTOM:
-                this.positionClass = 'df-progressindicator-bottom';
-                break;
-            default:
-                this.positionClass = this.DEFAULT_CLASS_POSITION;
-        }
-        this._position = newPosition;
-    }
-    get position() {
-        return this._position;
+        this.containerClass = input();
+        this.position = input();
+        this.positionClass = computed(() => {
+            const position = this.position();
+            switch (position) {
+                case DfProgressIndicatorContentPosition.TOP:
+                    return 'df-progressindicator-top';
+                case DfProgressIndicatorContentPosition.BOTTOM:
+                    return 'df-progressindicator-bottom';
+                default:
+                    return this.DEFAULT_CLASS_POSITION;
+            }
+        });
+        this.classes = computed(() => `df-progressindicator-container ${this.containerClass() || ''} ${this.positionClass()}`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfProgressIndicatorContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: DfProgressIndicatorContainerComponent, isStandalone: true, selector: "df-progressindicator-container", inputs: { containerClass: "containerClass", position: "position" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: `
-    <ng-content></ng-content>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfProgressIndicatorContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.3", type: DfProgressIndicatorContainerComponent, isStandalone: true, selector: "df-progressindicator-container", inputs: { containerClass: { classPropertyName: "containerClass", publicName: "containerClass", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfProgressIndicatorContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfProgressIndicatorContainerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'df-progressindicator-container',
                     encapsulation: ViewEncapsulation.None,
-                    template: `
-    <ng-content></ng-content>
-  `,
+                    template: ` <ng-content></ng-content> `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true
+                    host: {
+                        '[class]': 'classes()'
+                    }
                 }]
-        }], propDecorators: { classes: [{
-                type: HostBinding,
-                args: ['class']
-            }], containerClass: [{
-                type: Input
-            }], position: [{
-                type: Input
-            }] } });
+        }] });
 
 class DfDefaultSpinnerComponent {
     constructor() {
-        this.isGlobalSpinner = false;
-        this.contentClass = 'spinner-border text-primary';
+        this.isGlobalSpinner = input(false, { transform: booleanAttribute });
+        this.contentClass = input('spinner-border text-primary');
+        this.ariaLabel = input();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfDefaultSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: DfDefaultSpinnerComponent, isStandalone: true, selector: "df-default-spinner", inputs: { isGlobalSpinner: "isGlobalSpinner", contentClass: "contentClass", ariaLabel: "ariaLabel" }, ngImport: i0, template: "<div [ngClass]=\"contentClass\" [attr.role]=\"isGlobalSpinner ? 'alert' : 'status'\">\n  <span class=\"visually-hidden\">\n    @if (ariaLabel) {\n      {{ ariaLabel }}\n    } @else {\n      <ng-container i18n=\"@@df.progressindicator.default.spinner.ariaLabel\">Loading...</ng-container>\n    }\n  </span>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfDefaultSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.3", type: DfDefaultSpinnerComponent, isStandalone: true, selector: "df-default-spinner", inputs: { isGlobalSpinner: { classPropertyName: "isGlobalSpinner", publicName: "isGlobalSpinner", isSignal: true, isRequired: false, transformFunction: null }, contentClass: { classPropertyName: "contentClass", publicName: "contentClass", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"contentClass()\" [attr.role]=\"isGlobalSpinner() ? 'alert' : 'status'\">\n  <span class=\"visually-hidden\">\n    @if (ariaLabel(); as ariaLabel) {\n      {{ ariaLabel }}\n    } @else {\n      <ng-container i18n=\"@@df.progressindicator.default.spinner.ariaLabel\">Loading...</ng-container>\n    }\n  </span>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfDefaultSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfDefaultSpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'df-default-spinner', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], template: "<div [ngClass]=\"contentClass\" [attr.role]=\"isGlobalSpinner ? 'alert' : 'status'\">\n  <span class=\"visually-hidden\">\n    @if (ariaLabel) {\n      {{ ariaLabel }}\n    } @else {\n      <ng-container i18n=\"@@df.progressindicator.default.spinner.ariaLabel\">Loading...</ng-container>\n    }\n  </span>\n</div>\n" }]
-        }], propDecorators: { isGlobalSpinner: [{
-                type: Input
-            }], contentClass: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'df-default-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"contentClass()\" [attr.role]=\"isGlobalSpinner() ? 'alert' : 'status'\">\n  <span class=\"visually-hidden\">\n    @if (ariaLabel(); as ariaLabel) {\n      {{ ariaLabel }}\n    } @else {\n      <ng-container i18n=\"@@df.progressindicator.default.spinner.ariaLabel\">Loading...</ng-container>\n    }\n  </span>\n</div>\n" }]
+        }] });
 
 class DfProgressIndicatorBackdropComponent {
     constructor() {
-        this.isGlobalBackdrop = true;
+        this.backdropClass = input();
+        this.isGlobalBackdrop = input(true);
+        this.classes = computed(() => `df-progressindicator-backdrop ${this.backdropClass() || ''} df-progressindicator-backdrop${this.isGlobalBackdrop() ? '-global' : '-contextual'}`);
     }
-    get classes() {
-        return `df-progressindicator-backdrop ${this.backdropClass || ''} ${this.isGlobalBackdrop ? 'df-progressindicator-backdrop-global' : 'df-progressindicator-backdrop-contextual'}`;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfProgressIndicatorBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: DfProgressIndicatorBackdropComponent, isStandalone: true, selector: "df-progressindicator-backdrop", inputs: { backdropClass: "backdropClass", isGlobalBackdrop: "isGlobalBackdrop" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfProgressIndicatorBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.3", type: DfProgressIndicatorBackdropComponent, isStandalone: true, selector: "df-progressindicator-backdrop", inputs: { backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null }, isGlobalBackdrop: { classPropertyName: "isGlobalBackdrop", publicName: "isGlobalBackdrop", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfProgressIndicatorBackdropComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfProgressIndicatorBackdropComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'df-progressindicator-backdrop',
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true
+                    host: {
+                        '[class]': 'classes()'
+                    }
                 }]
-        }], propDecorators: { classes: [{
-                type: HostBinding,
-                args: ['class']
-            }], backdropClass: [{
-                type: Input
-            }], isGlobalBackdrop: [{
-                type: Input
-            }] } });
+        }] });
 
 class DfProgressIndicatorRef {
     constructor(containerRef, contentRef, backdropRef) {
@@ -1459,10 +1328,10 @@ class ScrollBar {
         body.removeChild(measurer);
         return width;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ScrollBar, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ScrollBar, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ScrollBar, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ScrollBar, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ScrollBar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ScrollBar, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -1490,8 +1359,7 @@ class DfProgressIndicatorService {
     open(content, options) {
         const containerElt = this.getContainer(this.document, options);
         if (!containerElt) {
-            throw new Error(`[Design Factory] The specified progress indicator container "${options?.container ||
-                'body'}" was not found in the DOM.`);
+            throw new Error(`[Design Factory] The specified progress indicator container "${options?.container || 'body'}" was not found in the DOM.`);
         }
         // Create needed components
         const backdropRef = options?.backdrop !== false
@@ -1517,7 +1385,7 @@ class DfProgressIndicatorService {
         }
         if (onDestroyOperations.length > 0) {
             containerCmpRef.onDestroy(() => {
-                onDestroyOperations.forEach(operation => {
+                onDestroyOperations.forEach((operation) => {
                     operation();
                 });
             });
@@ -1531,7 +1399,10 @@ class DfProgressIndicatorService {
         }
         // Apply options to the created components
         if (backdropRef) {
-            this.applyOptions(backdropRef, this.backdropAttributes, { ...options, isGlobalBackdrop: containerElt === this.document.body });
+            this.applyOptions(backdropRef, this.backdropAttributes, {
+                ...options,
+                isGlobalBackdrop: containerElt === this.document.body
+            });
         }
         this.applyOptions(containerCmpRef, this.containerAttributes, options);
         const progressIndicatorRef = new DfProgressIndicatorRef(containerCmpRef, contentRef, backdropRef);
@@ -1541,7 +1412,7 @@ class DfProgressIndicatorService {
     close(progressIndicatorRef) {
         const instanceIndex = this.activeInstances.indexOf(progressIndicatorRef);
         if (instanceIndex > -1) {
-            Object.keys(progressIndicatorRef).forEach(key => {
+            Object.keys(progressIndicatorRef).forEach((key) => {
                 const propertyValue = progressIndicatorRef[key];
                 if (propertyValue && propertyValue instanceof ComponentRef) {
                     propertyValue.destroy();
@@ -1569,12 +1440,18 @@ class DfProgressIndicatorService {
         }
         else if (content instanceof DfProgressIndicatorContentSpinner) {
             const cmpRef = this.createComponent(DfDefaultSpinnerComponent, cfr);
-            this.applyOptions(cmpRef, this.defaultSpinnerAttributes, { ...content.spinnerInput, isGlobalSpinner: container === this.document.body });
+            this.applyOptions(cmpRef, this.defaultSpinnerAttributes, {
+                ...content.spinnerInput,
+                isGlobalSpinner: container === this.document.body
+            });
             return cmpRef;
         }
         else if (content instanceof DfProgressIndicatorContentProgressBar) {
             const cmpRef = this.createComponent(DfProgressbarComponent, cfr);
-            this.applyOptions(cmpRef, this.defaultProgressBarAttributes, { ...content.progressBarInput, infiniteAnimation: true });
+            this.applyOptions(cmpRef, this.defaultProgressBarAttributes, {
+                ...content.progressBarInput,
+                infiniteAnimation: true
+            });
             return cmpRef;
         }
         else if (content instanceof TemplateRef) {
@@ -1608,19 +1485,18 @@ class DfProgressIndicatorService {
     }
     applyOptions(cmpRef, availableOptions, options) {
         if (options) {
-            const cmpInst = cmpRef.instance;
             availableOptions.forEach((option) => {
                 const optionValue = options[option];
                 if (optionValue !== null && optionValue !== undefined) {
-                    cmpInst[option] = optionValue;
+                    cmpRef.setInput(option, optionValue);
                 }
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfProgressIndicatorService, deps: [{ token: DOCUMENT }, { token: i0.RendererFactory2 }, { token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: i0.Injector }, { token: ScrollBar }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfProgressIndicatorService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfProgressIndicatorService, deps: [{ token: DOCUMENT }, { token: i0.RendererFactory2 }, { token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: i0.Injector }, { token: ScrollBar }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfProgressIndicatorService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfProgressIndicatorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfProgressIndicatorService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1631,44 +1507,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 }] }, { type: i0.RendererFactory2 }, { type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }, { type: i0.Injector }, { type: ScrollBar }] });
 
 class DfProgressIndicatorDirective {
-    constructor(elementRef, progressService) {
-        this.elementRef = elementRef;
-        this.progressService = progressService;
-    }
-    ngOnChanges(changes) {
-        if (changes['dfProgressIndicator']) {
-            const isProgressing = this.dfProgressIndicator;
-            if (isProgressing) {
-                const config = {
-                    ...this.dfProgressIndicatorConfig?.options,
-                    container: this.elementRef.nativeElement
-                };
-                this.progressIndicatorRef = this.progressService.open(this.dfProgressIndicatorConfig?.content, config);
-            }
-            else if (!isProgressing && this.progressIndicatorRef) {
+    constructor() {
+        this.dfProgressIndicator = input.required();
+        this.dfProgressIndicatorConfig = input();
+        this.elementRef = inject(ElementRef);
+        this.progressService = inject(DfProgressIndicatorService);
+        effect(() => {
+            if (this.dfProgressIndicator()) {
+                untracked(() => {
+                    const config = {
+                        ...this.dfProgressIndicatorConfig()?.options,
+                        container: this.elementRef.nativeElement
+                    };
+                    this.progressIndicatorRef = this.progressService.open(this.dfProgressIndicatorConfig()?.content, config);
+                });
+            }
+            else if (this.progressIndicatorRef) {
                 this.progressService.close(this.progressIndicatorRef);
-                this.progressIndicatorRef = undefined;
             }
-        }
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfProgressIndicatorDirective, deps: [{ token: i0.ElementRef }, { token: DfProgressIndicatorService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: DfProgressIndicatorDirective, isStandalone: true, selector: "[dfProgressIndicator]", inputs: { dfProgressIndicator: "dfProgressIndicator", dfProgressIndicatorConfig: "dfProgressIndicatorConfig" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfProgressIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.3", type: DfProgressIndicatorDirective, isStandalone: true, selector: "[dfProgressIndicator]", inputs: { dfProgressIndicator: { classPropertyName: "dfProgressIndicator", publicName: "dfProgressIndicator", isSignal: true, isRequired: true, transformFunction: null }, dfProgressIndicatorConfig: { classPropertyName: "dfProgressIndicatorConfig", publicName: "dfProgressIndicatorConfig", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfProgressIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfProgressIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[dfProgressIndicator]',
-                    standalone: true
+                    selector: '[dfProgressIndicator]'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DfProgressIndicatorService }], propDecorators: { dfProgressIndicator: [{
-                type: Input
-            }], dfProgressIndicatorConfig: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 
 class DfProgressIndicatorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfProgressIndicatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: DfProgressIndicatorModule, imports: [DfDefaultSpinnerComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfProgressIndicatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: DfProgressIndicatorModule, imports: [DfDefaultSpinnerComponent,
             DfProgressbarModule,
             DfProgressIndicatorBackdropComponent,
             DfProgressIndicatorContainerComponent,
@@ -1677,10 +1548,9 @@ class DfProgressIndicatorModule {
             DfProgressIndicatorDirective,
             DfProgressIndicatorBackdropComponent,
             DfDefaultSpinnerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfProgressIndicatorModule, imports: [DfDefaultSpinnerComponent,
-            DfProgressbarModule, DfProgressbarModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfProgressIndicatorModule, imports: [DfProgressbarModule, DfProgressbarModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfProgressIndicatorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfProgressIndicatorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1701,36 +1571,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }] });
 
 /**
- * @deprecated DfSliderDirectionDirective is deprecated. Use {@link https://design-factory-int.app.net6.paas.westeurope.rnd.az.amadeus.net/#/components/slider/agnosui  AgnosUI Slider} instead.
+ * @deprecated DfSliderDirectionDirective is deprecated. Use {@link https://design-factory.amadeus.net/components/slider/agnosui AgnosUI Slider} instead.
  */
 class DfSliderDirectionDirective {
-    constructor(elementRef, rtlDirectionService) {
-        this.elementRef = elementRef;
-        this.rtlDirectionService = rtlDirectionService;
+    constructor() {
+        // Workaround due to bad export on @angular-slider/ngx-slider and https://github.com/angular/angular/issues/8277
+        this.dfSliderDirection = input.required();
+        this.elementRef = inject(ElementRef);
+        this.rtlDirectionService = inject(DfDirectionDetectionService, { optional: true });
     }
     ngOnInit() {
         if (this.rtlDirectionService) {
             const direction = this.rtlDirectionService.getPageDirection(this.elementRef);
             if (direction === RightToLeftDirectionEnum.RightToLeft) {
-                this.host.options.rightToLeft = true;
+                this.dfSliderDirection().options.rightToLeft = true;
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSliderDirectionDirective, deps: [{ token: i0.ElementRef }, { token: DfDirectionDetectionService, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: DfSliderDirectionDirective, isStandalone: true, selector: "[dfSliderDirection]", inputs: { host: ["dfSliderDirection", "host"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSliderDirectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.3", type: DfSliderDirectionDirective, isStandalone: true, selector: "[dfSliderDirection]", inputs: { dfSliderDirection: { classPropertyName: "dfSliderDirection", publicName: "dfSliderDirection", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSliderDirectionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSliderDirectionDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[dfSliderDirection]',
-                    standalone: true
+                    selector: '[dfSliderDirection]'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DfDirectionDetectionService, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { host: [{
-                type: Input,
-                args: ['dfSliderDirection']
-            }] } });
+        }] });
 
 /** Label type */
 var LabelType;
@@ -1928,6 +1794,9 @@ class CompatibilityHelper {
     }
     /** Detect presence of ResizeObserver API */
     static isResizeObserverAvailable() {
+        if (typeof window === 'undefined') {
+            return false;
+        }
         return window.ResizeObserver !== undefined;
     }
 }
@@ -2024,7 +1893,7 @@ class EventListenerHelper {
 }
 
 /**
- * @deprecated SliderElementDirective is deprecated. Use {@link https://design-factory-int.app.net6.paas.westeurope.rnd.az.amadeus.net/#/components/slider/agnosui  AgnosUI Slider} instead.
+ * @deprecated SliderElementDirective is deprecated. Use {@link https://design-factory.amadeus.net/components/slider/agnosui AgnosUI Slider} instead.
  */
 class SliderElementDirective {
     get position() {
@@ -2063,6 +1932,7 @@ class SliderElementDirective {
         this.width = '';
         this.transform = '';
         this.eventListeners = [];
+        this.platformId = inject(PLATFORM_ID);
         this.eventListenerHelper = new EventListenerHelper(this.renderer);
     }
     setAlwaysHide(hide) {
@@ -2147,6 +2017,14 @@ class SliderElementDirective {
         }
     }
     getBoundingClientRect() {
+        if (isPlatformServer(this.platformId)) {
+            return {
+                bottom: 50,
+                top: 0,
+                left: 0,
+                right: 50
+            };
+        }
         return this.elemRef.nativeElement.getBoundingClientRect();
     }
     on(eventName, callback, debounceInterval) {
@@ -2176,15 +2054,14 @@ class SliderElementDirective {
     isRefDestroyed() {
         return (ValueHelper.isNullOrUndefined(this.changeDetectionRef) || this.changeDetectionRef['destroyed']);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SliderElementDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: SliderElementDirective, isStandalone: true, selector: "[ngxSliderElement]", host: { properties: { "style.opacity": "this.opacity", "style.visibility": "this.visibility", "style.left": "this.left", "style.bottom": "this.bottom", "style.height": "this.height", "style.width": "this.width", "style.transform": "this.transform" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SliderElementDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.3", type: SliderElementDirective, isStandalone: true, selector: "[ngxSliderElement]", host: { properties: { "style.opacity": "this.opacity", "style.visibility": "this.visibility", "style.left": "this.left", "style.bottom": "this.bottom", "style.height": "this.height", "style.width": "this.width", "style.transform": "this.transform" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SliderElementDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SliderElementDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: '[ngxSliderElement]',
-                    standalone: true
+                    selector: '[ngxSliderElement]'
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { opacity: [{
                 type: HostBinding,
@@ -2210,7 +2087,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             }] } });
 
 /**
- * @deprecated SliderHandleDirective is deprecated. Use {@link https://design-factory-int.app.net6.paas.westeurope.rnd.az.amadeus.net/#/components/slider/agnosui  AgnosUI Slider} instead.
+ * @deprecated SliderHandleDirective is deprecated. Use {@link https://design-factory.amadeus.net/components/slider/agnosui AgnosUI Slider} instead.
  */
 class SliderHandleDirective extends SliderElementDirective {
     constructor(elemRef, renderer, changeDetectionRef) {
@@ -2229,15 +2106,14 @@ class SliderHandleDirective extends SliderElementDirective {
     focus() {
         this.elemRef.nativeElement.focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SliderHandleDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: SliderHandleDirective, isStandalone: true, selector: "[ngxSliderHandle]", host: { properties: { "class.ngx-slider-active": "this.active", "attr.role": "this.role", "attr.tabindex": "this.tabindex", "attr.aria-orientation": "this.ariaOrientation", "attr.aria-label": "this.ariaLabel", "attr.aria-labelledby": "this.ariaLabelledBy", "attr.aria-valuenow": "this.ariaValueNow", "attr.aria-valuetext": "this.ariaValueText", "attr.aria-valuemin": "this.ariaValueMin", "attr.aria-valuemax": "this.ariaValueMax" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SliderHandleDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.3", type: SliderHandleDirective, isStandalone: true, selector: "[ngxSliderHandle]", host: { properties: { "class.ngx-slider-active": "this.active", "attr.role": "this.role", "attr.tabindex": "this.tabindex", "attr.aria-orientation": "this.ariaOrientation", "attr.aria-label": "this.ariaLabel", "attr.aria-labelledby": "this.ariaLabelledBy", "attr.aria-valuenow": "this.ariaValueNow", "attr.aria-valuetext": "this.ariaValueText", "attr.aria-valuemin": "this.ariaValueMin", "attr.aria-valuemax": "this.ariaValueMax" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SliderHandleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SliderHandleDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: '[ngxSliderHandle]',
-                    standalone: true
+                    selector: '[ngxSliderHandle]'
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { active: [{
                 type: HostBinding,
@@ -2272,7 +2148,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             }] } });
 
 /**
- * @deprecated SliderLabelDirective is deprecated. Use {@link https://design-factory-int.app.net6.paas.westeurope.rnd.az.amadeus.net/#/components/slider/agnosui  AgnosUI Slider} instead.
+ * @deprecated SliderLabelDirective is deprecated. Use {@link https://design-factory.amadeus.net/components/slider/agnosui AgnosUI Slider} instead.
  */
 class SliderLabelDirective extends SliderElementDirective {
     get value() {
@@ -2296,28 +2172,28 @@ class SliderLabelDirective extends SliderElementDirective {
             this.calculateDimension();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SliderLabelDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: SliderLabelDirective, isStandalone: true, selector: "[ngxSliderLabel]", usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SliderLabelDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.3", type: SliderLabelDirective, isStandalone: true, selector: "[ngxSliderLabel]", usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SliderLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SliderLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: '[ngxSliderLabel]',
-                    standalone: true
+                    selector: '[ngxSliderLabel]'
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }] });
 
+/* eslint-disable @angular-eslint/prefer-signals */
 /**
- * @deprecated TooltipWrapperComponent is deprecated. Use {@link https://design-factory-int.app.net6.paas.westeurope.rnd.az.amadeus.net/#/components/slider/agnosui  AgnosUI Slider} instead.
+ * @deprecated TooltipWrapperComponent is deprecated. Use {@link https://design-factory.amadeus.net/components/slider/agnosui AgnosUI Slider} instead.
  */
 class TooltipWrapperComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: TooltipWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: TooltipWrapperComponent, isStandalone: true, selector: "ngx-slider-tooltip-wrapper", inputs: { template: "template", tooltip: "tooltip", placement: "placement", content: "content" }, ngImport: i0, template: "@if (template) {\n  <ng-template\n    *ngTemplateOutlet=\"template; context: { tooltip: tooltip, placement: placement, content: content }\"\n  ></ng-template>\n} @else {\n  <div class=\"ngx-slider-inner-tooltip\" [attr.title]=\"tooltip\" [attr.data-tooltip-placement]=\"placement\">\n    {{ content }}\n  </div>\n}\n", styles: [".ngx-slider-inner-tooltip{height:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: TooltipWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.3", type: TooltipWrapperComponent, isStandalone: true, selector: "ngx-slider-tooltip-wrapper", inputs: { template: "template", tooltip: "tooltip", placement: "placement", content: "content" }, ngImport: i0, template: "@if (template) {\n  <ng-template\n    *ngTemplateOutlet=\"template; context: { tooltip: tooltip, placement: placement, content: content }\"\n  ></ng-template>\n} @else {\n  <div class=\"ngx-slider-inner-tooltip\" [attr.title]=\"tooltip\" [attr.data-tooltip-placement]=\"placement\">\n    {{ content }}\n  </div>\n}\n", styles: [".ngx-slider-inner-tooltip{height:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: TooltipWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: TooltipWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-slider-tooltip-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgTemplateOutlet], template: "@if (template) {\n  <ng-template\n    *ngTemplateOutlet=\"template; context: { tooltip: tooltip, placement: placement, content: content }\"\n  ></ng-template>\n} @else {\n  <div class=\"ngx-slider-inner-tooltip\" [attr.title]=\"tooltip\" [attr.data-tooltip-placement]=\"placement\">\n    {{ content }}\n  </div>\n}\n", styles: [".ngx-slider-inner-tooltip{height:100%}\n"] }]
+            args: [{ selector: 'ngx-slider-tooltip-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "@if (template) {\n  <ng-template\n    *ngTemplateOutlet=\"template; context: { tooltip: tooltip, placement: placement, content: content }\"\n  ></ng-template>\n} @else {\n  <div class=\"ngx-slider-inner-tooltip\" [attr.title]=\"tooltip\" [attr.data-tooltip-placement]=\"placement\">\n    {{ content }}\n  </div>\n}\n", styles: [".ngx-slider-inner-tooltip{height:100%}\n"] }]
         }], propDecorators: { template: [{
                 type: Input
             }], tooltip: [{
@@ -2328,6 +2204,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 type: Input
             }] } });
 
+/* eslint-disable @angular-eslint/prefer-signals */
 class Tick {
     constructor() {
         this.selected = false;
@@ -2377,7 +2254,7 @@ const NGX_SLIDER_CONTROL_VALUE_ACCESSOR = {
     multi: true
 };
 /**
- * @deprecated SliderComponent is deprecated. Use {@link https://design-factory-int.app.net6.paas.westeurope.rnd.az.amadeus.net/#/components/slider/agnosui  AgnosUI Slider} instead.
+ * @deprecated SliderComponent is deprecated. Use {@link https://design-factory.amadeus.net/components/slider/agnosui AgnosUI Slider} instead.
  */
 class SliderComponent {
     // Input event that triggers slider refresh (re-positioning of slider elements)
@@ -4220,12 +4097,12 @@ class SliderComponent {
         }
         return changeContext;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SliderComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: SliderComponent, isStandalone: true, selector: "ngx-slider", inputs: { value: "value", highValue: "highValue", options: "options", manualRefresh: "manualRefresh", triggerFocus: "triggerFocus" }, outputs: { valueChange: "valueChange", highValueChange: "highValueChange", userChangeStart: "userChangeStart", userChange: "userChange", userChangeEnd: "userChangeEnd" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class": "this.class", "class.vertical": "this.sliderElementVerticalClass", "class.animate": "this.sliderElementAnimateClass", "class.with-legend": "this.sliderElementWithLegendClass", "attr.disabled": "this.sliderElementDisabledAttr", "attr.aria-label": "this.sliderElementAriaLabel" } }, providers: [NGX_SLIDER_CONTROL_VALUE_ACCESSOR], queries: [{ propertyName: "tooltipTemplate", first: true, predicate: ["tooltipTemplate"], descendants: true }], viewQueries: [{ propertyName: "leftOuterSelectionBarElement", first: true, predicate: ["leftOuterSelectionBar"], descendants: true, read: SliderElementDirective }, { propertyName: "rightOuterSelectionBarElement", first: true, predicate: ["rightOuterSelectionBar"], descendants: true, read: SliderElementDirective }, { propertyName: "fullBarElement", first: true, predicate: ["fullBar"], descendants: true, read: SliderElementDirective }, { propertyName: "selectionBarElement", first: true, predicate: ["selectionBar"], descendants: true, read: SliderElementDirective }, { propertyName: "minHandleElement", first: true, predicate: ["minHandle"], descendants: true, read: SliderHandleDirective }, { propertyName: "maxHandleElement", first: true, predicate: ["maxHandle"], descendants: true, read: SliderHandleDirective }, { propertyName: "floorLabelElement", first: true, predicate: ["floorLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "ceilLabelElement", first: true, predicate: ["ceilLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "minHandleLabelElement", first: true, predicate: ["minHandleLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "maxHandleLabelElement", first: true, predicate: ["maxHandleLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "combinedLabelElement", first: true, predicate: ["combinedLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "ticksElement", first: true, predicate: ["ticksElement"], descendants: true, read: SliderElementDirective }], usesOnChanges: true, ngImport: i0, template: "<!-- // 0 Left selection bar outside two handles -->\n<span\n  ngxSliderElement\n  #leftOuterSelectionBar\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-left-out-selection\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 1 Right selection bar outside two handles -->\n<span\n  ngxSliderElement\n  #rightOuterSelectionBar\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-right-out-selection\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 2 The whole slider bar -->\n<span\n  ngxSliderElement\n  #fullBar\n  [class.ngx-slider-transparent]=\"fullBarTransparentClass\"\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-full-bar\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 3 Selection bar between two handles -->\n<span\n  ngxSliderElement\n  #selectionBar\n  [class.ngx-slider-draggable]=\"selectionBarDraggableClass\"\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-selection-bar\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar ngx-slider-selection\" [ngStyle]=\"barStyle\"></span>\n</span>\n<!-- // 4 Low slider handle -->\n<span\n  ngxSliderHandle\n  #minHandle\n  class=\"ngx-slider-span ngx-slider-pointer ngx-slider-pointer-min\"\n  [ngStyle]=\"minPointerStyle\"\n></span>\n<!-- // 5 High slider handle -->\n<span\n  ngxSliderHandle\n  #maxHandle\n  [style.display]=\"range ? 'inherit' : 'none'\"\n  class=\"ngx-slider-span ngx-slider-pointer ngx-slider-pointer-max\"\n  [ngStyle]=\"maxPointerStyle\"\n></span>\n<!-- // 6 Floor label -->\n<span ngxSliderLabel #floorLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-limit ngx-slider-floor\"></span>\n<!-- // 7 Ceiling label -->\n<span ngxSliderLabel #ceilLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-limit ngx-slider-ceil\"></span>\n<!-- // 8 Label above the low slider handle -->\n<span ngxSliderLabel #minHandleLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-model-value\"></span>\n<!-- // 9 Label above the high slider handle -->\n<span ngxSliderLabel #maxHandleLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-model-high\"></span>\n<!-- // 10 Combined range label when the slider handles are close ex. 15 - 17 -->\n<span ngxSliderLabel #combinedLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-combined\"></span>\n<!-- // 11 The ticks -->\n<span\n  ngxSliderElement\n  #ticksElement\n  [hidden]=\"!showTicks\"\n  [class.ngx-slider-ticks-values-under]=\"ticksUnderValuesClass\"\n  class=\"ngx-slider-ticks\"\n>\n  @for (t of ticks; track t) {\n    <span class=\"ngx-slider-tick\" [ngClass]=\"{ 'ngx-slider-selected': t.selected }\" [ngStyle]=\"t.style\">\n      <ngx-slider-tooltip-wrapper\n        [template]=\"tooltipTemplate\"\n        [tooltip]=\"t.tooltip\"\n        [placement]=\"t.tooltipPlacement\"\n      ></ngx-slider-tooltip-wrapper>\n      @if (t.value !== null) {\n        <ngx-slider-tooltip-wrapper\n          class=\"ngx-slider-span ngx-slider-tick-value\"\n          [template]=\"tooltipTemplate\"\n          [tooltip]=\"t.valueTooltip\"\n          [placement]=\"t.valueTooltipPlacement\"\n          [content]=\"t.value\"\n        ></ngx-slider-tooltip-wrapper>\n      }\n      @if (t.legend !== null) {\n        <span class=\"ngx-slider-span ngx-slider-tick-legend\" [innerHTML]=\"t.legend\"></span>\n      }\n    </span>\n  }\n</span>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TooltipWrapperComponent, selector: "ngx-slider-tooltip-wrapper", inputs: ["template", "tooltip", "placement", "content"] }, { kind: "directive", type: SliderLabelDirective, selector: "[ngxSliderLabel]" }, { kind: "directive", type: SliderHandleDirective, selector: "[ngxSliderHandle]" }, { kind: "directive", type: SliderElementDirective, selector: "[ngxSliderElement]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SliderComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.3", type: SliderComponent, isStandalone: true, selector: "ngx-slider", inputs: { value: "value", highValue: "highValue", options: "options", manualRefresh: "manualRefresh", triggerFocus: "triggerFocus" }, outputs: { valueChange: "valueChange", highValueChange: "highValueChange", userChangeStart: "userChangeStart", userChange: "userChange", userChangeEnd: "userChangeEnd" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class": "this.class", "class.vertical": "this.sliderElementVerticalClass", "class.animate": "this.sliderElementAnimateClass", "class.with-legend": "this.sliderElementWithLegendClass", "attr.disabled": "this.sliderElementDisabledAttr", "attr.aria-label": "this.sliderElementAriaLabel" } }, providers: [NGX_SLIDER_CONTROL_VALUE_ACCESSOR], queries: [{ propertyName: "tooltipTemplate", first: true, predicate: ["tooltipTemplate"], descendants: true }], viewQueries: [{ propertyName: "leftOuterSelectionBarElement", first: true, predicate: ["leftOuterSelectionBar"], descendants: true, read: SliderElementDirective }, { propertyName: "rightOuterSelectionBarElement", first: true, predicate: ["rightOuterSelectionBar"], descendants: true, read: SliderElementDirective }, { propertyName: "fullBarElement", first: true, predicate: ["fullBar"], descendants: true, read: SliderElementDirective }, { propertyName: "selectionBarElement", first: true, predicate: ["selectionBar"], descendants: true, read: SliderElementDirective }, { propertyName: "minHandleElement", first: true, predicate: ["minHandle"], descendants: true, read: SliderHandleDirective }, { propertyName: "maxHandleElement", first: true, predicate: ["maxHandle"], descendants: true, read: SliderHandleDirective }, { propertyName: "floorLabelElement", first: true, predicate: ["floorLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "ceilLabelElement", first: true, predicate: ["ceilLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "minHandleLabelElement", first: true, predicate: ["minHandleLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "maxHandleLabelElement", first: true, predicate: ["maxHandleLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "combinedLabelElement", first: true, predicate: ["combinedLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "ticksElement", first: true, predicate: ["ticksElement"], descendants: true, read: SliderElementDirective }], usesOnChanges: true, ngImport: i0, template: "<!-- // 0 Left selection bar outside two handles -->\n<span\n  ngxSliderElement\n  #leftOuterSelectionBar\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-left-out-selection\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 1 Right selection bar outside two handles -->\n<span\n  ngxSliderElement\n  #rightOuterSelectionBar\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-right-out-selection\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 2 The whole slider bar -->\n<span\n  ngxSliderElement\n  #fullBar\n  [class.ngx-slider-transparent]=\"fullBarTransparentClass\"\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-full-bar\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 3 Selection bar between two handles -->\n<span\n  ngxSliderElement\n  #selectionBar\n  [class.ngx-slider-draggable]=\"selectionBarDraggableClass\"\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-selection-bar\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar ngx-slider-selection\" [ngStyle]=\"barStyle\"></span>\n</span>\n<!-- // 4 Low slider handle -->\n<span\n  ngxSliderHandle\n  #minHandle\n  class=\"ngx-slider-span ngx-slider-pointer ngx-slider-pointer-min\"\n  [ngStyle]=\"minPointerStyle\"\n></span>\n<!-- // 5 High slider handle -->\n<span\n  ngxSliderHandle\n  #maxHandle\n  [style.display]=\"range ? 'inherit' : 'none'\"\n  class=\"ngx-slider-span ngx-slider-pointer ngx-slider-pointer-max\"\n  [ngStyle]=\"maxPointerStyle\"\n></span>\n<!-- // 6 Floor label -->\n<span ngxSliderLabel #floorLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-limit ngx-slider-floor\"></span>\n<!-- // 7 Ceiling label -->\n<span ngxSliderLabel #ceilLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-limit ngx-slider-ceil\"></span>\n<!-- // 8 Label above the low slider handle -->\n<span ngxSliderLabel #minHandleLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-model-value\"></span>\n<!-- // 9 Label above the high slider handle -->\n<span ngxSliderLabel #maxHandleLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-model-high\"></span>\n<!-- // 10 Combined range label when the slider handles are close ex. 15 - 17 -->\n<span ngxSliderLabel #combinedLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-combined\"></span>\n<!-- // 11 The ticks -->\n<span\n  ngxSliderElement\n  #ticksElement\n  [hidden]=\"!showTicks\"\n  [class.ngx-slider-ticks-values-under]=\"ticksUnderValuesClass\"\n  class=\"ngx-slider-ticks\"\n>\n  @for (t of ticks; track t) {\n    <span class=\"ngx-slider-tick\" [ngClass]=\"{ 'ngx-slider-selected': t.selected }\" [ngStyle]=\"t.style\">\n      <ngx-slider-tooltip-wrapper\n        [template]=\"tooltipTemplate\"\n        [tooltip]=\"t.tooltip\"\n        [placement]=\"t.tooltipPlacement\"\n      ></ngx-slider-tooltip-wrapper>\n      @if (t.value !== null) {\n        <ngx-slider-tooltip-wrapper\n          class=\"ngx-slider-span ngx-slider-tick-value\"\n          [template]=\"tooltipTemplate\"\n          [tooltip]=\"t.valueTooltip\"\n          [placement]=\"t.valueTooltipPlacement\"\n          [content]=\"t.value\"\n        ></ngx-slider-tooltip-wrapper>\n      }\n      @if (t.legend !== null) {\n        <span class=\"ngx-slider-span ngx-slider-tick-legend\" [innerHTML]=\"t.legend\"></span>\n      }\n    </span>\n  }\n</span>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TooltipWrapperComponent, selector: "ngx-slider-tooltip-wrapper", inputs: ["template", "tooltip", "placement", "content"] }, { kind: "directive", type: SliderLabelDirective, selector: "[ngxSliderLabel]" }, { kind: "directive", type: SliderHandleDirective, selector: "[ngxSliderHandle]" }, { kind: "directive", type: SliderElementDirective, selector: "[ngxSliderElement]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-slider', providers: [NGX_SLIDER_CONTROL_VALUE_ACCESSOR], standalone: true, imports: [CommonModule, TooltipWrapperComponent, SliderLabelDirective, SliderHandleDirective, SliderElementDirective], template: "<!-- // 0 Left selection bar outside two handles -->\n<span\n  ngxSliderElement\n  #leftOuterSelectionBar\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-left-out-selection\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 1 Right selection bar outside two handles -->\n<span\n  ngxSliderElement\n  #rightOuterSelectionBar\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-right-out-selection\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 2 The whole slider bar -->\n<span\n  ngxSliderElement\n  #fullBar\n  [class.ngx-slider-transparent]=\"fullBarTransparentClass\"\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-full-bar\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 3 Selection bar between two handles -->\n<span\n  ngxSliderElement\n  #selectionBar\n  [class.ngx-slider-draggable]=\"selectionBarDraggableClass\"\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-selection-bar\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar ngx-slider-selection\" [ngStyle]=\"barStyle\"></span>\n</span>\n<!-- // 4 Low slider handle -->\n<span\n  ngxSliderHandle\n  #minHandle\n  class=\"ngx-slider-span ngx-slider-pointer ngx-slider-pointer-min\"\n  [ngStyle]=\"minPointerStyle\"\n></span>\n<!-- // 5 High slider handle -->\n<span\n  ngxSliderHandle\n  #maxHandle\n  [style.display]=\"range ? 'inherit' : 'none'\"\n  class=\"ngx-slider-span ngx-slider-pointer ngx-slider-pointer-max\"\n  [ngStyle]=\"maxPointerStyle\"\n></span>\n<!-- // 6 Floor label -->\n<span ngxSliderLabel #floorLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-limit ngx-slider-floor\"></span>\n<!-- // 7 Ceiling label -->\n<span ngxSliderLabel #ceilLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-limit ngx-slider-ceil\"></span>\n<!-- // 8 Label above the low slider handle -->\n<span ngxSliderLabel #minHandleLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-model-value\"></span>\n<!-- // 9 Label above the high slider handle -->\n<span ngxSliderLabel #maxHandleLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-model-high\"></span>\n<!-- // 10 Combined range label when the slider handles are close ex. 15 - 17 -->\n<span ngxSliderLabel #combinedLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-combined\"></span>\n<!-- // 11 The ticks -->\n<span\n  ngxSliderElement\n  #ticksElement\n  [hidden]=\"!showTicks\"\n  [class.ngx-slider-ticks-values-under]=\"ticksUnderValuesClass\"\n  class=\"ngx-slider-ticks\"\n>\n  @for (t of ticks; track t) {\n    <span class=\"ngx-slider-tick\" [ngClass]=\"{ 'ngx-slider-selected': t.selected }\" [ngStyle]=\"t.style\">\n      <ngx-slider-tooltip-wrapper\n        [template]=\"tooltipTemplate\"\n        [tooltip]=\"t.tooltip\"\n        [placement]=\"t.tooltipPlacement\"\n      ></ngx-slider-tooltip-wrapper>\n      @if (t.value !== null) {\n        <ngx-slider-tooltip-wrapper\n          class=\"ngx-slider-span ngx-slider-tick-value\"\n          [template]=\"tooltipTemplate\"\n          [tooltip]=\"t.valueTooltip\"\n          [placement]=\"t.valueTooltipPlacement\"\n          [content]=\"t.value\"\n        ></ngx-slider-tooltip-wrapper>\n      }\n      @if (t.legend !== null) {\n        <span class=\"ngx-slider-span ngx-slider-tick-legend\" [innerHTML]=\"t.legend\"></span>\n      }\n    </span>\n  }\n</span>\n" }]
+            args: [{ selector: 'ngx-slider', providers: [NGX_SLIDER_CONTROL_VALUE_ACCESSOR], imports: [CommonModule, TooltipWrapperComponent, SliderLabelDirective, SliderHandleDirective, SliderElementDirective], template: "<!-- // 0 Left selection bar outside two handles -->\n<span\n  ngxSliderElement\n  #leftOuterSelectionBar\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-left-out-selection\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 1 Right selection bar outside two handles -->\n<span\n  ngxSliderElement\n  #rightOuterSelectionBar\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-right-out-selection\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 2 The whole slider bar -->\n<span\n  ngxSliderElement\n  #fullBar\n  [class.ngx-slider-transparent]=\"fullBarTransparentClass\"\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-full-bar\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 3 Selection bar between two handles -->\n<span\n  ngxSliderElement\n  #selectionBar\n  [class.ngx-slider-draggable]=\"selectionBarDraggableClass\"\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-selection-bar\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar ngx-slider-selection\" [ngStyle]=\"barStyle\"></span>\n</span>\n<!-- // 4 Low slider handle -->\n<span\n  ngxSliderHandle\n  #minHandle\n  class=\"ngx-slider-span ngx-slider-pointer ngx-slider-pointer-min\"\n  [ngStyle]=\"minPointerStyle\"\n></span>\n<!-- // 5 High slider handle -->\n<span\n  ngxSliderHandle\n  #maxHandle\n  [style.display]=\"range ? 'inherit' : 'none'\"\n  class=\"ngx-slider-span ngx-slider-pointer ngx-slider-pointer-max\"\n  [ngStyle]=\"maxPointerStyle\"\n></span>\n<!-- // 6 Floor label -->\n<span ngxSliderLabel #floorLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-limit ngx-slider-floor\"></span>\n<!-- // 7 Ceiling label -->\n<span ngxSliderLabel #ceilLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-limit ngx-slider-ceil\"></span>\n<!-- // 8 Label above the low slider handle -->\n<span ngxSliderLabel #minHandleLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-model-value\"></span>\n<!-- // 9 Label above the high slider handle -->\n<span ngxSliderLabel #maxHandleLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-model-high\"></span>\n<!-- // 10 Combined range label when the slider handles are close ex. 15 - 17 -->\n<span ngxSliderLabel #combinedLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-combined\"></span>\n<!-- // 11 The ticks -->\n<span\n  ngxSliderElement\n  #ticksElement\n  [hidden]=\"!showTicks\"\n  [class.ngx-slider-ticks-values-under]=\"ticksUnderValuesClass\"\n  class=\"ngx-slider-ticks\"\n>\n  @for (t of ticks; track t) {\n    <span class=\"ngx-slider-tick\" [ngClass]=\"{ 'ngx-slider-selected': t.selected }\" [ngStyle]=\"t.style\">\n      <ngx-slider-tooltip-wrapper\n        [template]=\"tooltipTemplate\"\n        [tooltip]=\"t.tooltip\"\n        [placement]=\"t.tooltipPlacement\"\n      ></ngx-slider-tooltip-wrapper>\n      @if (t.value !== null) {\n        <ngx-slider-tooltip-wrapper\n          class=\"ngx-slider-span ngx-slider-tick-value\"\n          [template]=\"tooltipTemplate\"\n          [tooltip]=\"t.valueTooltip\"\n          [placement]=\"t.valueTooltipPlacement\"\n          [content]=\"t.value\"\n        ></ngx-slider-tooltip-wrapper>\n      }\n      @if (t.legend !== null) {\n        <span class=\"ngx-slider-span ngx-slider-tick-legend\" [innerHTML]=\"t.legend\"></span>\n      }\n    </span>\n  }\n</span>\n" }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
@@ -4310,19 +4187,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
 
 /**
  * @deprecated DfSliderModule is deprecated.
- * Use {@link https://design-factory-int.app.net6.paas.westeurope.rnd.az.amadeus.net/#/components/slider/agnosui  AgnosUI Slider} instead.
+ * Use {@link https://design-factory.amadeus.net/components/slider/agnosui  AgnosUI Slider} instead.
  */
 class DfSliderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: DfSliderModule, imports: [SliderComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: DfSliderModule, imports: [SliderComponent,
             SliderElementDirective,
             SliderHandleDirective,
             SliderLabelDirective,
             TooltipWrapperComponent,
             DfSliderDirectionDirective], exports: [DfSliderDirectionDirective, SliderComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSliderModule, imports: [SliderComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSliderModule, imports: [SliderComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSliderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSliderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -4352,10 +4229,10 @@ class DfSideNavConfig {
         this.isAppOverlay = false;
         this.isAppOverlayMode = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSideNavConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSideNavConfig, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSideNavConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSideNavConfig, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSideNavConfig, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSideNavConfig, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -4662,10 +4539,10 @@ class DfSideNavService {
     updateOverLay() {
         this._isAppOverlay$.next(this.isAppOverlayMode && this._isCollapsed$.value === false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSideNavService, deps: [{ token: DfSideNavConfig }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSideNavService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSideNavService, deps: [{ token: DfSideNavConfig }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSideNavService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSideNavService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSideNavService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -4778,6 +4655,63 @@ const ngbCompleteTransition = (element) => {
     runningTransitions.get(element)?.complete();
 };
 
+/**
+ * A configuration service for the [DfSideNavCollapseDirective](#/components/sidenav/api#DfSideNavCollapseDirective) component.
+ *
+ * You can inject this service, typically in your root component, and customize its properties
+ * to provide default values for the sideNav used in the application.
+ */
+class DfSideNavCollapseConfig {
+    constructor(_ngbConfig) {
+        this._ngbConfig = _ngbConfig;
+    }
+    get animation() {
+        return this._animation === undefined ? this._ngbConfig.animation : this._animation;
+    }
+    set animation(animation) {
+        this._animation = animation;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSideNavCollapseConfig, deps: [{ token: i1.NgbConfig }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSideNavCollapseConfig, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSideNavCollapseConfig, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1.NgbConfig }] });
+
+/**
+ * A service for managing the sidenav panel animation.
+ * This service is included at root level
+ *
+ * Creating a sidenav is straightforward: use [DfSideNavComponent](#/components/sidenav/api#DfSideNavComponent) component
+ */
+class DfSideNavCollapseService {
+    constructor(_config) {
+        this._config = _config;
+        this._sideNavAnimation$ = new BehaviorSubject(_config.animation);
+    }
+    get sideNavAnimation$() {
+        return this._sideNavAnimation$.asObservable();
+    }
+    /**
+     * Use this to activate or desactivate the animation for the sideNav
+     * If input is `True` it will activate the animation.
+     * Default value for animation is set in by DfSideNavCollapseConfig
+     *
+     */
+    setAnimation(on) {
+        this._sideNavAnimation$.next(on);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSideNavCollapseService, deps: [{ token: DfSideNavCollapseConfig }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSideNavCollapseService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSideNavCollapseService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: DfSideNavCollapseConfig }] });
+
 function measureCollapsingElementWidthPx(element) {
     // SSR fix for without injecting the PlatformId
     if (typeof navigator === 'undefined') {
@@ -4850,101 +4784,58 @@ const DfCollapsingTransition = (element, animation, context) => {
     };
 };
 
-/**
- * A configuration service for the [DfSideNavCollapseDirective](#/components/sidenav/api#DfSideNavCollapseDirective) component.
- *
- * You can inject this service, typically in your root component, and customize its properties
- * to provide default values for the sideNav used in the application.
- */
-class DfSideNavCollapseConfig {
-    constructor(_ngbConfig) {
-        this._ngbConfig = _ngbConfig;
-    }
-    get animation() {
-        return this._animation === undefined ? this._ngbConfig.animation : this._animation;
-    }
-    set animation(animation) {
-        this._animation = animation;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSideNavCollapseConfig, deps: [{ token: i1.NgbConfig }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSideNavCollapseConfig, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSideNavCollapseConfig, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1.NgbConfig }] });
-
-/**
- * A service for managing the sidenav panel animation.
- * This service is included at root level
- *
- * Creating a sidenav is straightforward: use [DfSideNavComponent](#/components/sidenav/api#DfSideNavComponent) component
- */
-class DfSideNavCollapseService {
-    constructor(_config) {
-        this._config = _config;
-        this._sideNavAnimation$ = new BehaviorSubject(_config.animation);
-    }
-    get sideNavAnimation$() {
-        return this._sideNavAnimation$.asObservable();
-    }
-    /**
-     * Use this to activate or desactivate the animation for the sideNav
-     * If input is `True` it will activate the animation.
-     * Default value for animation is set in by DfSideNavCollapseConfig
-     *
-     */
-    setAnimation(on) {
-        this._sideNavAnimation$.next(on);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSideNavCollapseService, deps: [{ token: DfSideNavCollapseConfig }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSideNavCollapseService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSideNavCollapseService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: DfSideNavCollapseConfig }] });
-
 /**
  * A directive to provide a simple way of hiding and showing the sideNav on the page.
  */
 class DfSideNavCollapseDirective {
-    constructor(_element, _sideNavCollapseService, _zone) {
-        this._element = _element;
-        this._sideNavCollapseService = _sideNavCollapseService;
-        this._zone = _zone;
-        this.dfSideNavCollapseChange = new EventEmitter();
+    constructor() {
+        /**
+         * If `true`, will collapse the element or show it otherwise.
+         */
+        this.dfSideNavCollapse = input.required();
+        this.collapsed = signal(false);
+        this.minimized = input(false);
+        this.dfSideNavCollapseChange = output();
         /**
          * An event emitted when the collapse element is shown, after the transition. It has no payload.
          *
          * @since 9.1.0
          */
-        this.shown = new EventEmitter();
+        this.shown = output();
         /**
          * An event emitted when the collapse element is hidden, after the transition. It has no payload.
          *
          * @since 9.1.0
          */
-        this.hidden = new EventEmitter();
-        this.minimized = false;
+        this.hidden = output();
+        this.elementRef = inject(ElementRef);
+        this.sideNavCollapseService = inject(DfSideNavCollapseService);
+        this.zone = inject(NgZone);
+        this.injector = inject(Injector);
         this.animation = false;
-        this.subscription = new Subscription();
-        this.subscription.add(_sideNavCollapseService.sideNavAnimation$.subscribe((value) => {
+        effect(() => {
+            this.collapsed.set(this.dfSideNavCollapse());
+        });
+        this.sideNavCollapseService.sideNavAnimation$.pipe(takeUntilDestroyed()).subscribe((value) => {
             this.animation = value;
-        }));
+        });
     }
     ngOnInit() {
-        this._runTransition(this.collapsed, false, this.minimized);
-    }
-    ngOnChanges(simpleChanges) {
-        if (simpleChanges['collapsed'] && !simpleChanges['collapsed'].firstChange) {
-            this._runTransitionWithEvents(this.collapsed, this.animation, this.minimized);
-        }
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
+        let firstRun = true;
+        effect(() => {
+            const collapsed = this.collapsed();
+            // we only track the collapsed signal
+            untracked(() => {
+                // first time the effect is run, we run the transition without triggering event emitters
+                if (firstRun) {
+                    this.runTransition(collapsed, this.animation, this.minimized());
+                }
+                else {
+                    this.runTransitionWithEvents(collapsed, this.animation, this.minimized());
+                }
+                firstRun = false;
+            });
+        }, { injector: this.injector });
     }
     /**
      * Triggers collapsing programmatically.
@@ -4954,20 +4845,18 @@ class DfSideNavCollapseDirective {
      *
      * @since 9.1.0
      */
-    toggle(open = this.collapsed) {
-        this.collapsed = !open;
-        this.dfSideNavCollapseChange.next(this.collapsed);
-        this._runTransitionWithEvents(this.collapsed, this.animation, this.minimized);
+    toggle(open = this.collapsed()) {
+        this.collapsed.set(!open);
     }
-    _runTransition(collapsed, animation, minimizedInput) {
-        return ngbRunTransition(this._zone, this._element.nativeElement, DfCollapsingTransition, {
+    runTransition(collapsed, animation, minimizedInput) {
+        return ngbRunTransition(this.zone, this.elementRef.nativeElement, DfCollapsingTransition, {
             animation,
             runningTransition: 'stop',
             context: { direction: collapsed ? 'hide' : 'show', minimized: minimizedInput }
         });
     }
-    _runTransitionWithEvents(collapsed, animation, minimized) {
-        this._runTransition(collapsed, animation, minimized).subscribe(() => {
+    runTransitionWithEvents(collapsed, animation, minimized) {
+        this.runTransition(collapsed, animation, minimized).subscribe(() => {
             if (collapsed) {
                 this.hidden.emit();
             }
@@ -4976,31 +4865,20 @@ class DfSideNavCollapseDirective {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSideNavCollapseDirective, deps: [{ token: i0.ElementRef }, { token: DfSideNavCollapseService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: DfSideNavCollapseDirective, isStandalone: true, selector: "[dfSideNavCollapse]", inputs: { collapsed: ["dfSideNavCollapse", "collapsed"], minimized: "minimized" }, outputs: { dfSideNavCollapseChange: "dfSideNavCollapseChange", shown: "shown", hidden: "hidden" }, exportAs: ["dfSideNavCollapse"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSideNavCollapseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.3", type: DfSideNavCollapseDirective, isStandalone: true, selector: "[dfSideNavCollapse]", inputs: { dfSideNavCollapse: { classPropertyName: "dfSideNavCollapse", publicName: "dfSideNavCollapse", isSignal: true, isRequired: true, transformFunction: null }, minimized: { classPropertyName: "minimized", publicName: "minimized", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dfSideNavCollapseChange: "dfSideNavCollapseChange", shown: "shown", hidden: "hidden" }, exportAs: ["dfSideNavCollapse"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSideNavCollapseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSideNavCollapseDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[dfSideNavCollapse]', exportAs: 'dfSideNavCollapse', standalone: true }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DfSideNavCollapseService }, { type: i0.NgZone }], propDecorators: { collapsed: [{
-                type: Input,
-                args: ['dfSideNavCollapse']
-            }], dfSideNavCollapseChange: [{
-                type: Output
-            }], shown: [{
-                type: Output
-            }], hidden: [{
-                type: Output
-            }], minimized: [{
-                type: Input
-            }] } });
+            args: [{ selector: '[dfSideNavCollapse]', exportAs: 'dfSideNavCollapse' }]
+        }], ctorParameters: () => [] });
 
 class DfSideNavCollapseModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSideNavCollapseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: DfSideNavCollapseModule, imports: [DfSideNavCollapseDirective], exports: [DfSideNavCollapseDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSideNavCollapseModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSideNavCollapseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: DfSideNavCollapseModule, imports: [DfSideNavCollapseDirective], exports: [DfSideNavCollapseDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSideNavCollapseModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSideNavCollapseModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSideNavCollapseModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfSideNavCollapseDirective],
@@ -5021,14 +4899,13 @@ class DfManageSideNavDirective {
             this.renderer.removeClass(this.element.nativeElement, 'df-sidenav-list-withactivated');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfManageSideNavDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: DfManageSideNavDirective, isStandalone: true, selector: "[dfManageSideNav]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfManageSideNavDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.3", type: DfManageSideNavDirective, isStandalone: true, selector: "[dfManageSideNav]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfManageSideNavDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfManageSideNavDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[dfManageSideNav]',
-                    standalone: true
+                    selector: '[dfManageSideNav]'
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
@@ -5042,13 +4919,13 @@ function hasOverflow(element) {
 
 /**
  * DfTitleTruncate directive
- * It adds the title attribute with the element's inner text as value
+ * It adds the title attribute with the element's textContent as value
  * when the element is truncated.
  */
 class DfTitleTruncateDirective {
-    constructor(elementRef, renderer) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
+    constructor() {
+        this.elementRef = inject((ElementRef));
+        this.renderer = inject(Renderer2);
     }
     ngOnInit() {
         this.renderer.addClass(this.elementRef.nativeElement, 'text-truncate');
@@ -5057,24 +4934,22 @@ class DfTitleTruncateDirective {
         const { nativeElement } = this.elementRef;
         const titleAttributeName = 'title';
         if (hasOverflow(nativeElement)) {
-            const value = nativeElement.innerText;
-            nativeElement.setAttribute(titleAttributeName, value);
+            nativeElement.setAttribute(titleAttributeName, nativeElement.textContent);
         }
         else if (nativeElement.getAttribute(titleAttributeName)) {
             nativeElement.removeAttribute(titleAttributeName);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfTitleTruncateDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: DfTitleTruncateDirective, isStandalone: true, selector: "[dfTitleTruncate]", exportAs: ["dfTitleTruncate"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfTitleTruncateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.3", type: DfTitleTruncateDirective, isStandalone: true, selector: "[dfTitleTruncate]", exportAs: ["dfTitleTruncate"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfTitleTruncateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfTitleTruncateDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'dfTitleTruncate',
-                    selector: '[dfTitleTruncate]',
-                    standalone: true
+                    selector: '[dfTitleTruncate]'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
+        }] });
 
 let uniqueId = 0;
 /**
@@ -5088,6 +4963,11 @@ let uniqueId = 0;
  */
 class DfSideNavListComponent {
     constructor() {
+        this.items = input.required();
+        this.tplIcon = input();
+        this.tplItem = input();
+        this.currentItem = input();
+        this.id = input();
         this.controlledUniqueId = this.getControlledUniqueId();
         this.sideNavService = inject(DfSideNavService);
     }
@@ -5095,64 +4975,54 @@ class DfSideNavListComponent {
         uniqueId++;
         return `df-sidenav-id-${uniqueId};`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSideNavListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: DfSideNavListComponent, isStandalone: true, selector: "df-sidenavlist", inputs: { items: "items", tplIcon: "tplIcon", tplItem: "tplItem", currentItem: "currentItem", id: "id" }, ngImport: i0, template: "<ul class=\"df-sidenav-list\" [ngbCollapse]=\"currentItem?.isCollapsed ?? false\" [attr.id]=\"id\">\n  @for (item of items; track item; let i = $index) {\n    <li dfManageSideNav>\n      <ng-template #dfSideNavItemContent>\n        @if (tplIcon && item.icon) {\n          <ng-template\n            [ngTemplateOutlet]=\"tplIcon.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          ></ng-template>\n        } @else if (item.icon) {\n          <span aria-hidden=\"true\" class=\"{{ item.icon }} df-sidenav-icon me-3\"></span>\n        }\n        <span class=\"flex-grow-1 text-nowrap\" dfTitleTruncate>{{ item.title }}</span>\n      </ng-template>\n      @switch (item.type) {\n        @case (sideNavService.type.subMenus) {\n          <ng-template #subMenus>\n            <button\n              class=\"df-sidenav-item d-flex align-items-center\"\n              (click)=\"sideNavService.toggle(item)\"\n              type=\"button\"\n              [attr.aria-expanded]=\"!item.isCollapsed\"\n              [attr.aria-controls]=\"'sidenavControl' + controlledUniqueId.toString() + '-' + i\"\n              [class.df-sidenav-item-withicon]=\"item.icon\"\n            >\n              @if (tplIcon && item.icon) {\n                <ng-template\n                  [ngTemplateOutlet]=\"tplIcon.templateRef\"\n                  [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                ></ng-template>\n              } @else if (item.icon) {\n                <span aria-hidden=\"true\" class=\"{{ item.icon }} df-sidenav-icon me-3\"></span>\n              }\n              <span class=\"flex-grow-1 text-nowrap\" dfTitleTruncate>{{ item.title }}</span>\n              <span\n                class=\"ms-3 df-sidenav-collapse-icon fa-light\"\n                [class.fa-chevron-down]=\"item.isCollapsed\"\n                [class.fa-chevron-up]=\"!item.isCollapsed\"\n              ></span>\n              <!-- put the chevron as icon directly in the menu -->\n              <!-- todo the icon and the minimized -->\n            </button>\n            <!-- we don't pass the icons as they are not suppose to have ones ??-->\n            <df-sidenavlist\n              [items]=\"item.subMenus ?? []\"\n              [tplItem]=\"tplItem\"\n              [currentItem]=\"item\"\n              [id]=\"'sidenavControl' + controlledUniqueId.toString() + '-' + i\"\n            ></df-sidenavlist>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"subMenus\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"subMenus\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.actionButton) {\n          <ng-template #dfSideNavItemButton>\n            <button\n              class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n              (click)=\"sideNavService.activeItem(item)\"\n              [class.active]=\"item.isActive\"\n            >\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n            </button>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfSideNavItemButton\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemButton\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.routerLink) {\n          <ng-template #dfRouterTemplate>\n            <a\n              class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n              routerLinkActive=\"active\"\n              routerLink=\"{{ item.value }}\"\n              ariaCurrentWhenActive=\"page\"\n            >\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n            </a>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfRouterTemplate\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfRouterTemplate\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.separator) {\n          <ng-template #dfSeparatorTmp>\n            <hr class=\"spacing-01\" />\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfSeparatorTmp\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfSeparatorTmp\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.template) {\n          @if (tplItem) {\n            <ng-template\n              [ngTemplateOutlet]=\"tplItem.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            ></ng-template>\n          }\n        }\n        @case (sideNavService.type.title) {\n          <ng-template #dfTitleTmp>\n            <div class=\"df-sidenav-item df-sidenav-title d-flex align-items-center flex-grow-1\">\n              <span class=\"text-nowrap text-uppercase text-muted\" dfTitleTruncate>{{ item.title }}</span>\n            </div>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfTitleTmp\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfTitleTmp\"></ng-container>\n            </ng-container>\n          }\n        }\n        @default {\n          <ng-template #dfLinkDefaultTmp>\n            <a\n              class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n              href=\"{{ item.value }}\"\n              [class.active]=\"item.isActive && item.type === sideNavService.type.link\"\n              [attr.target]=\"item.type === sideNavService.type.externalLink ? '_blank' : ''\"\n            >\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n            </a>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfLinkDefaultTmp\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfLinkDefaultTmp\"></ng-container>\n            </ng-container>\n          }\n        }\n      }\n    </li>\n  }\n</ul>\n", dependencies: [{ kind: "component", type: DfSideNavListComponent, selector: "df-sidenavlist", inputs: ["items", "tplIcon", "tplItem", "currentItem", "id"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NgbCollapseModule }, { kind: "directive", type: i1.NgbCollapse, selector: "[ngbCollapse]", inputs: ["animation", "ngbCollapse", "horizontal"], outputs: ["ngbCollapseChange", "shown", "hidden"], exportAs: ["ngbCollapse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: DfMediaModule }, { kind: "directive", type: DfIfMediaDirective, selector: "[dfIfMedia]", inputs: ["dfIfMedia"] }, { kind: "ngmodule", type: DfSideNavCollapseModule }, { kind: "directive", type: DfManageSideNavDirective, selector: "[dfManageSideNav]" }, { kind: "directive", type: DfTitleTruncateDirective, selector: "[dfTitleTruncate]", exportAs: ["dfTitleTruncate"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSideNavListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.3", type: DfSideNavListComponent, isStandalone: true, selector: "df-sidenavlist", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, tplIcon: { classPropertyName: "tplIcon", publicName: "tplIcon", isSignal: true, isRequired: false, transformFunction: null }, tplItem: { classPropertyName: "tplItem", publicName: "tplItem", isSignal: true, isRequired: false, transformFunction: null }, currentItem: { classPropertyName: "currentItem", publicName: "currentItem", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ul class=\"df-sidenav-list\" [ngbCollapse]=\"currentItem()?.isCollapsed ?? false\" [attr.id]=\"id()\">\n  @for (item of items(); track item; let i = $index) {\n    <li dfManageSideNav>\n      <ng-template #dfSideNavItemContent>\n        @let tIcon = tplIcon();\n        @if (tIcon && item.icon) {\n          <ng-template\n            [ngTemplateOutlet]=\"tIcon.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          ></ng-template>\n        } @else if (item.icon) {\n          <span aria-hidden=\"true\" class=\"{{ item.icon }} df-sidenav-icon me-3\"></span>\n        }\n        <span class=\"flex-grow-1 text-nowrap\" dfTitleTruncate>{{ item.title }}</span>\n      </ng-template>\n      @switch (item.type) {\n        @case (sideNavService.type.subMenus) {\n          <ng-template #subMenus>\n            <button\n              class=\"df-sidenav-item d-flex align-items-center\"\n              (click)=\"sideNavService.toggle(item)\"\n              type=\"button\"\n              [attr.aria-expanded]=\"!item.isCollapsed\"\n              [attr.aria-controls]=\"'sidenavControl' + controlledUniqueId.toString() + '-' + i\"\n              [class.df-sidenav-item-withicon]=\"item.icon\"\n            >\n              @let tIcon = tplIcon();\n              @if (tIcon && item.icon) {\n                <ng-template\n                  [ngTemplateOutlet]=\"tIcon.templateRef\"\n                  [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                ></ng-template>\n              } @else if (item.icon) {\n                <span aria-hidden=\"true\" class=\"{{ item.icon }} df-sidenav-icon me-3\"></span>\n              }\n              <span class=\"flex-grow-1 text-nowrap\" dfTitleTruncate>{{ item.title }}</span>\n              <span\n                class=\"ms-3 df-sidenav-collapse-icon fa-light\"\n                [class.fa-chevron-down]=\"item.isCollapsed\"\n                [class.fa-chevron-up]=\"!item.isCollapsed\"\n              ></span>\n              <!-- put the chevron as icon directly in the menu -->\n              <!-- todo the icon and the minimized -->\n            </button>\n            <!-- we don't pass the icons as they are not suppose to have ones ??-->\n            <df-sidenavlist\n              [items]=\"item.subMenus ?? []\"\n              [tplItem]=\"tplItem()\"\n              [currentItem]=\"item\"\n              [id]=\"'sidenavControl' + controlledUniqueId.toString() + '-' + i\"\n            ></df-sidenavlist>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"subMenus\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"subMenus\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.actionButton) {\n          <ng-template #dfSideNavItemButton>\n            <button\n              class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n              (click)=\"sideNavService.activeItem(item)\"\n              [class.active]=\"item.isActive\"\n            >\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n            </button>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfSideNavItemButton\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemButton\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.routerLink) {\n          <ng-template #dfRouterTemplate>\n            <a\n              class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n              routerLinkActive=\"active\"\n              routerLink=\"{{ item.value }}\"\n              ariaCurrentWhenActive=\"page\"\n            >\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n            </a>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfRouterTemplate\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfRouterTemplate\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.separator) {\n          <ng-template #dfSeparatorTmp>\n            <hr class=\"spacing-01\" />\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfSeparatorTmp\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfSeparatorTmp\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.template) {\n          @let tItem = tplItem();\n          @if (tItem) {\n            <ng-template\n              [ngTemplateOutlet]=\"tItem.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            ></ng-template>\n          }\n        }\n        @case (sideNavService.type.title) {\n          <ng-template #dfTitleTmp>\n            <div class=\"df-sidenav-item df-sidenav-title d-flex align-items-center flex-grow-1\">\n              <span class=\"text-nowrap text-uppercase text-muted\" dfTitleTruncate>{{ item.title }}</span>\n            </div>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfTitleTmp\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfTitleTmp\"></ng-container>\n            </ng-container>\n          }\n        }\n        @default {\n          <ng-template #dfLinkDefaultTmp>\n            <a\n              class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n              href=\"{{ item.value }}\"\n              [class.active]=\"item.isActive && item.type === sideNavService.type.link\"\n              [attr.target]=\"item.type === sideNavService.type.externalLink ? '_blank' : ''\"\n            >\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n            </a>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfLinkDefaultTmp\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfLinkDefaultTmp\"></ng-container>\n            </ng-container>\n          }\n        }\n      }\n    </li>\n  }\n</ul>\n", dependencies: [{ kind: "component", type: DfSideNavListComponent, selector: "df-sidenavlist", inputs: ["items", "tplIcon", "tplItem", "currentItem", "id"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NgbCollapseModule }, { kind: "directive", type: i1.NgbCollapse, selector: "[ngbCollapse]", inputs: ["animation", "ngbCollapse", "horizontal"], outputs: ["ngbCollapseChange", "shown", "hidden"], exportAs: ["ngbCollapse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: DfMediaModule }, { kind: "directive", type: DfIfMediaDirective, selector: "[dfIfMedia]", inputs: ["dfIfMedia"] }, { kind: "ngmodule", type: DfSideNavCollapseModule }, { kind: "directive", type: DfManageSideNavDirective, selector: "[dfManageSideNav]" }, { kind: "directive", type: DfTitleTruncateDirective, selector: "[dfTitleTruncate]", exportAs: ["dfTitleTruncate"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSideNavListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSideNavListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'df-sidenavlist', standalone: true, imports: [
-                        CommonModule,
+            args: [{ selector: 'df-sidenavlist', imports: [
+                        NgTemplateOutlet,
                         NgbCollapseModule,
                         RouterModule,
                         DfMediaModule,
                         DfSideNavCollapseModule,
                         DfManageSideNavDirective,
                         DfTitleTruncateDirective
-                    ], template: "<ul class=\"df-sidenav-list\" [ngbCollapse]=\"currentItem?.isCollapsed ?? false\" [attr.id]=\"id\">\n  @for (item of items; track item; let i = $index) {\n    <li dfManageSideNav>\n      <ng-template #dfSideNavItemContent>\n        @if (tplIcon && item.icon) {\n          <ng-template\n            [ngTemplateOutlet]=\"tplIcon.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          ></ng-template>\n        } @else if (item.icon) {\n          <span aria-hidden=\"true\" class=\"{{ item.icon }} df-sidenav-icon me-3\"></span>\n        }\n        <span class=\"flex-grow-1 text-nowrap\" dfTitleTruncate>{{ item.title }}</span>\n      </ng-template>\n      @switch (item.type) {\n        @case (sideNavService.type.subMenus) {\n          <ng-template #subMenus>\n            <button\n              class=\"df-sidenav-item d-flex align-items-center\"\n              (click)=\"sideNavService.toggle(item)\"\n              type=\"button\"\n              [attr.aria-expanded]=\"!item.isCollapsed\"\n              [attr.aria-controls]=\"'sidenavControl' + controlledUniqueId.toString() + '-' + i\"\n              [class.df-sidenav-item-withicon]=\"item.icon\"\n            >\n              @if (tplIcon && item.icon) {\n                <ng-template\n                  [ngTemplateOutlet]=\"tplIcon.templateRef\"\n                  [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                ></ng-template>\n              } @else if (item.icon) {\n                <span aria-hidden=\"true\" class=\"{{ item.icon }} df-sidenav-icon me-3\"></span>\n              }\n              <span class=\"flex-grow-1 text-nowrap\" dfTitleTruncate>{{ item.title }}</span>\n              <span\n                class=\"ms-3 df-sidenav-collapse-icon fa-light\"\n                [class.fa-chevron-down]=\"item.isCollapsed\"\n                [class.fa-chevron-up]=\"!item.isCollapsed\"\n              ></span>\n              <!-- put the chevron as icon directly in the menu -->\n              <!-- todo the icon and the minimized -->\n            </button>\n            <!-- we don't pass the icons as they are not suppose to have ones ??-->\n            <df-sidenavlist\n              [items]=\"item.subMenus ?? []\"\n              [tplItem]=\"tplItem\"\n              [currentItem]=\"item\"\n              [id]=\"'sidenavControl' + controlledUniqueId.toString() + '-' + i\"\n            ></df-sidenavlist>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"subMenus\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"subMenus\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.actionButton) {\n          <ng-template #dfSideNavItemButton>\n            <button\n              class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n              (click)=\"sideNavService.activeItem(item)\"\n              [class.active]=\"item.isActive\"\n            >\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n            </button>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfSideNavItemButton\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemButton\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.routerLink) {\n          <ng-template #dfRouterTemplate>\n            <a\n              class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n              routerLinkActive=\"active\"\n              routerLink=\"{{ item.value }}\"\n              ariaCurrentWhenActive=\"page\"\n            >\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n            </a>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfRouterTemplate\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfRouterTemplate\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.separator) {\n          <ng-template #dfSeparatorTmp>\n            <hr class=\"spacing-01\" />\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfSeparatorTmp\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfSeparatorTmp\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.template) {\n          @if (tplItem) {\n            <ng-template\n              [ngTemplateOutlet]=\"tplItem.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            ></ng-template>\n          }\n        }\n        @case (sideNavService.type.title) {\n          <ng-template #dfTitleTmp>\n            <div class=\"df-sidenav-item df-sidenav-title d-flex align-items-center flex-grow-1\">\n              <span class=\"text-nowrap text-uppercase text-muted\" dfTitleTruncate>{{ item.title }}</span>\n            </div>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfTitleTmp\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfTitleTmp\"></ng-container>\n            </ng-container>\n          }\n        }\n        @default {\n          <ng-template #dfLinkDefaultTmp>\n            <a\n              class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n              href=\"{{ item.value }}\"\n              [class.active]=\"item.isActive && item.type === sideNavService.type.link\"\n              [attr.target]=\"item.type === sideNavService.type.externalLink ? '_blank' : ''\"\n            >\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n            </a>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfLinkDefaultTmp\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfLinkDefaultTmp\"></ng-container>\n            </ng-container>\n          }\n        }\n      }\n    </li>\n  }\n</ul>\n" }]
-        }], propDecorators: { items: [{
-                type: Input
-            }], tplIcon: [{
-                type: Input
-            }], tplItem: [{
-                type: Input
-            }], currentItem: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }] } });
+                    ], template: "<ul class=\"df-sidenav-list\" [ngbCollapse]=\"currentItem()?.isCollapsed ?? false\" [attr.id]=\"id()\">\n  @for (item of items(); track item; let i = $index) {\n    <li dfManageSideNav>\n      <ng-template #dfSideNavItemContent>\n        @let tIcon = tplIcon();\n        @if (tIcon && item.icon) {\n          <ng-template\n            [ngTemplateOutlet]=\"tIcon.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          ></ng-template>\n        } @else if (item.icon) {\n          <span aria-hidden=\"true\" class=\"{{ item.icon }} df-sidenav-icon me-3\"></span>\n        }\n        <span class=\"flex-grow-1 text-nowrap\" dfTitleTruncate>{{ item.title }}</span>\n      </ng-template>\n      @switch (item.type) {\n        @case (sideNavService.type.subMenus) {\n          <ng-template #subMenus>\n            <button\n              class=\"df-sidenav-item d-flex align-items-center\"\n              (click)=\"sideNavService.toggle(item)\"\n              type=\"button\"\n              [attr.aria-expanded]=\"!item.isCollapsed\"\n              [attr.aria-controls]=\"'sidenavControl' + controlledUniqueId.toString() + '-' + i\"\n              [class.df-sidenav-item-withicon]=\"item.icon\"\n            >\n              @let tIcon = tplIcon();\n              @if (tIcon && item.icon) {\n                <ng-template\n                  [ngTemplateOutlet]=\"tIcon.templateRef\"\n                  [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                ></ng-template>\n              } @else if (item.icon) {\n                <span aria-hidden=\"true\" class=\"{{ item.icon }} df-sidenav-icon me-3\"></span>\n              }\n              <span class=\"flex-grow-1 text-nowrap\" dfTitleTruncate>{{ item.title }}</span>\n              <span\n                class=\"ms-3 df-sidenav-collapse-icon fa-light\"\n                [class.fa-chevron-down]=\"item.isCollapsed\"\n                [class.fa-chevron-up]=\"!item.isCollapsed\"\n              ></span>\n              <!-- put the chevron as icon directly in the menu -->\n              <!-- todo the icon and the minimized -->\n            </button>\n            <!-- we don't pass the icons as they are not suppose to have ones ??-->\n            <df-sidenavlist\n              [items]=\"item.subMenus ?? []\"\n              [tplItem]=\"tplItem()\"\n              [currentItem]=\"item\"\n              [id]=\"'sidenavControl' + controlledUniqueId.toString() + '-' + i\"\n            ></df-sidenavlist>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"subMenus\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"subMenus\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.actionButton) {\n          <ng-template #dfSideNavItemButton>\n            <button\n              class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n              (click)=\"sideNavService.activeItem(item)\"\n              [class.active]=\"item.isActive\"\n            >\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n            </button>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfSideNavItemButton\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemButton\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.routerLink) {\n          <ng-template #dfRouterTemplate>\n            <a\n              class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n              routerLinkActive=\"active\"\n              routerLink=\"{{ item.value }}\"\n              ariaCurrentWhenActive=\"page\"\n            >\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n            </a>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfRouterTemplate\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfRouterTemplate\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.separator) {\n          <ng-template #dfSeparatorTmp>\n            <hr class=\"spacing-01\" />\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfSeparatorTmp\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfSeparatorTmp\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.template) {\n          @let tItem = tplItem();\n          @if (tItem) {\n            <ng-template\n              [ngTemplateOutlet]=\"tItem.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            ></ng-template>\n          }\n        }\n        @case (sideNavService.type.title) {\n          <ng-template #dfTitleTmp>\n            <div class=\"df-sidenav-item df-sidenav-title d-flex align-items-center flex-grow-1\">\n              <span class=\"text-nowrap text-uppercase text-muted\" dfTitleTruncate>{{ item.title }}</span>\n            </div>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfTitleTmp\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfTitleTmp\"></ng-container>\n            </ng-container>\n          }\n        }\n        @default {\n          <ng-template #dfLinkDefaultTmp>\n            <a\n              class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n              href=\"{{ item.value }}\"\n              [class.active]=\"item.isActive && item.type === sideNavService.type.link\"\n              [attr.target]=\"item.type === sideNavService.type.externalLink ? '_blank' : ''\"\n            >\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n            </a>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfLinkDefaultTmp\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfLinkDefaultTmp\"></ng-container>\n            </ng-container>\n          }\n        }\n      }\n    </li>\n  }\n</ul>\n" }]
+        }] });
 
 class DfSideNavHeaderDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSideNavHeaderDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: DfSideNavHeaderDirective, isStandalone: true, selector: "ng-template[dfSideNavHeader]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSideNavHeaderDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.3", type: DfSideNavHeaderDirective, isStandalone: true, selector: "ng-template[dfSideNavHeader]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSideNavHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSideNavHeaderDirective, decorators: [{
             type: Directive,
-            args: [{ selector: 'ng-template[dfSideNavHeader]', standalone: true }]
+            args: [{ selector: 'ng-template[dfSideNavHeader]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 class DfSideNavIconDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSideNavIconDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: DfSideNavIconDirective, isStandalone: true, selector: "ng-template[dfSideNavIcon]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSideNavIconDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.3", type: DfSideNavIconDirective, isStandalone: true, selector: "ng-template[dfSideNavIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSideNavIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSideNavIconDirective, decorators: [{
             type: Directive,
-            args: [{ selector: 'ng-template[dfSideNavIcon]', standalone: true }]
+            args: [{ selector: 'ng-template[dfSideNavIcon]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 class DfSideNavItemDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSideNavItemDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: DfSideNavItemDirective, isStandalone: true, selector: "ng-template[dfSideNavItem]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSideNavItemDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.3", type: DfSideNavItemDirective, isStandalone: true, selector: "ng-template[dfSideNavItem]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSideNavItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSideNavItemDirective, decorators: [{
             type: Directive,
-            args: [{ selector: 'ng-template[dfSideNavItem]', standalone: true }]
+            args: [{ selector: 'ng-template[dfSideNavItem]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 /**
  * SideNav is a component to provide navigation feature with a panel on the side of your page
@@ -5165,40 +5035,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
  */
 class DfSideNavComponent {
     constructor() {
-        this.elements = 'df-sidenav-light d-flex flex-column flex-shrink-0';
-        this.subscription = new Subscription();
+        this.tplHeader = contentChild(DfSideNavHeaderDirective);
+        this.tplIcon = contentChild(DfSideNavIconDirective);
+        this.tplItem = contentChild(DfSideNavItemDirective);
+        this.overlayClass = signal(false);
+        this.classes = computed(() => `df-sidenav-light d-flex flex-column flex-shrink-0${this.overlayClass() ? ' df-sidenav-menu-overlay' : ''}`);
         this.sideNavService = inject(DfSideNavService);
-        this.subscription.add(this.sideNavService.isInMenuOverlay$.subscribe((value) => {
-            this.overlayClass = value;
-        }));
+        this.navItems = toSignal(this.sideNavService.sideNavItems$, { initialValue: [] });
+        this.sideNavService.isInMenuOverlay$.pipe(takeUntilDestroyed()).subscribe((value) => {
+            this.overlayClass.set(value);
+        });
         setTimeout(() => this.sideNavService.setSideNav());
     }
     ngOnDestroy() {
-        this.subscription.unsubscribe();
         this.sideNavService.removeSideBar();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSideNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: DfSideNavComponent, isStandalone: true, selector: "df-sidenav", host: { properties: { "class.df-sidenav-menu-overlay": "this.overlayClass", "class": "this.elements" } }, queries: [{ propertyName: "tplHeader", first: true, predicate: DfSideNavHeaderDirective, descendants: true }, { propertyName: "tplIcon", first: true, predicate: DfSideNavIconDirective, descendants: true }, { propertyName: "tplItem", first: true, predicate: DfSideNavItemDirective, descendants: true }], ngImport: i0, template: "@if (tplHeader) {\n  <ng-template [ngTemplateOutlet]=\"tplHeader.templateRef\"></ng-template>\n}\n<df-sidenavlist\n  [items]=\"(sideNavService.sideNavItems$ | async) ?? []\"\n  [tplIcon]=\"tplIcon\"\n  [tplItem]=\"tplItem\"\n></df-sidenavlist>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "component", type: DfSideNavListComponent, selector: "df-sidenavlist", inputs: ["items", "tplIcon", "tplItem", "currentItem", "id"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSideNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.3", type: DfSideNavComponent, isStandalone: true, selector: "df-sidenav", host: { properties: { "class": "classes()" } }, queries: [{ propertyName: "tplHeader", first: true, predicate: DfSideNavHeaderDirective, descendants: true, isSignal: true }, { propertyName: "tplIcon", first: true, predicate: DfSideNavIconDirective, descendants: true, isSignal: true }, { propertyName: "tplItem", first: true, predicate: DfSideNavItemDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"df-scroll-content\">\n  @if (tplHeader(); as tplHeader) {\n    <ng-template [ngTemplateOutlet]=\"tplHeader.templateRef\"></ng-template>\n  }\n  <df-sidenavlist [items]=\"navItems()\" [tplIcon]=\"tplIcon()\" [tplItem]=\"tplItem()\" />\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DfSideNavListComponent, selector: "df-sidenavlist", inputs: ["items", "tplIcon", "tplItem", "currentItem", "id"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSideNavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSideNavComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'df-sidenav', standalone: true, imports: [CommonModule, DfSideNavListComponent], template: "@if (tplHeader) {\n  <ng-template [ngTemplateOutlet]=\"tplHeader.templateRef\"></ng-template>\n}\n<df-sidenavlist\n  [items]=\"(sideNavService.sideNavItems$ | async) ?? []\"\n  [tplIcon]=\"tplIcon\"\n  [tplItem]=\"tplItem\"\n></df-sidenavlist>\n" }]
-        }], ctorParameters: () => [], propDecorators: { tplHeader: [{
-                type: ContentChild,
-                args: [DfSideNavHeaderDirective, { static: false }]
-            }], tplIcon: [{
-                type: ContentChild,
-                args: [DfSideNavIconDirective, { static: false }]
-            }], tplItem: [{
-                type: ContentChild,
-                args: [DfSideNavItemDirective, { static: false }]
-            }], overlayClass: [{
-                type: HostBinding,
-                args: ['class.df-sidenav-menu-overlay']
-            }], elements: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+            args: [{ selector: 'df-sidenav', imports: [CommonModule, DfSideNavListComponent], host: {
+                        '[class]': 'classes()'
+                    }, template: "<div class=\"df-scroll-content\">\n  @if (tplHeader(); as tplHeader) {\n    <ng-template [ngTemplateOutlet]=\"tplHeader.templateRef\"></ng-template>\n  }\n  <df-sidenavlist [items]=\"navItems()\" [tplIcon]=\"tplIcon()\" [tplItem]=\"tplItem()\" />\n</div>\n" }]
+        }], ctorParameters: () => [] });
 
 /**
  * The directive to catch focusin event and put the focus at a defined position in the page
@@ -5206,14 +5066,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
  * @since 9.1.0
  */
 class DfExcludeTrapDirective {
-    constructor(zone, element) {
-        this.zone = zone;
-        this.element = element;
+    constructor() {
         this.subscription = new Subscription();
+        /**
+         * The CSS selector used to get the element to put the focus when catched
+         *
+         */
+        this.dfExcludeTrapSelector = input('');
+        /**
+         * The Observable to enable or disable the ExcludeTrap
+         * If `True` the excludeTrap will work
+         */
+        this.dfExcludeTrap = input.required();
+        this.zone = inject(NgZone);
+        this.element = inject(ElementRef);
     }
     init() {
         this.subscription = fromEvent(this.element.nativeElement, 'focusin').subscribe(() => {
-            const el = document.querySelector(this.dfExcludeTrapSelector);
+            const el = document.querySelector(this.dfExcludeTrapSelector());
             if (el) {
                 el.focus();
             }
@@ -5221,7 +5091,7 @@ class DfExcludeTrapDirective {
     }
     ngOnInit() {
         this.zone.runOutsideAngular(() => {
-            this.subscriptionInput = this.dfExcludeTrap.subscribe(isPresent => {
+            this.subscriptionInput = this.dfExcludeTrap().subscribe((isPresent) => {
                 if (isPresent) {
                     this.init();
                 }
@@ -5237,20 +5107,15 @@ class DfExcludeTrapDirective {
             this.subscriptionInput.unsubscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfExcludeTrapDirective, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: DfExcludeTrapDirective, isStandalone: true, selector: "[dfExcludeTrap]", inputs: { dfExcludeTrapSelector: "dfExcludeTrapSelector", dfExcludeTrap: "dfExcludeTrap" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfExcludeTrapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.3", type: DfExcludeTrapDirective, isStandalone: true, selector: "[dfExcludeTrap]", inputs: { dfExcludeTrapSelector: { classPropertyName: "dfExcludeTrapSelector", publicName: "dfExcludeTrapSelector", isSignal: true, isRequired: false, transformFunction: null }, dfExcludeTrap: { classPropertyName: "dfExcludeTrap", publicName: "dfExcludeTrap", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfExcludeTrapDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfExcludeTrapDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[dfExcludeTrap]',
-                    standalone: true
+                    selector: '[dfExcludeTrap]'
                 }]
-        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ElementRef }], propDecorators: { dfExcludeTrapSelector: [{
-                type: Input
-            }], dfExcludeTrap: [{
-                type: Input
-            }] } });
+        }] });
 
 const DF_SELECT_CLASS = 'df-ym';
 
@@ -5334,14 +5199,13 @@ class DfManageNavSelectDirective {
             (listBadge[currentPos - 1] || document.activeElement).focus();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfManageNavSelectDirective, deps: [{ token: i1$2.NgSelectComponent, host: true }, { token: i0.ElementRef }, { token: DfDirectionDetectionService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: DfManageNavSelectDirective, isStandalone: true, selector: "[dfManageNavSelect]", host: { listeners: { "keydown.arrowLeft": "handleKeyDown($event)", "keydown.Backspace": "handleKeyDownBackspace($event)", "keydown.arrowRight": "handleKeyDownRight($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfManageNavSelectDirective, deps: [{ token: i1$2.NgSelectComponent, host: true }, { token: i0.ElementRef }, { token: DfDirectionDetectionService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.3", type: DfManageNavSelectDirective, isStandalone: true, selector: "[dfManageNavSelect]", host: { listeners: { "keydown.arrowLeft": "handleKeyDown($event)", "keydown.Backspace": "handleKeyDownBackspace($event)", "keydown.arrowRight": "handleKeyDownRight($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfManageNavSelectDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfManageNavSelectDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[dfManageNavSelect]',
-                    standalone: true
+                    selector: '[dfManageNavSelect]'
                 }]
         }], ctorParameters: () => [{ type: i1$2.NgSelectComponent, decorators: [{
                     type: Host
@@ -5358,69 +5222,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
 
 // Copy of https://github.com/ng-select/ng-select/blob/master/src/ng-option-highlight/lib/ng-option-highlight.directive.ts
 class DfOptionHighlightDirective {
-    constructor(elementRef, renderer) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this.element = this.elementRef.nativeElement;
-    }
-    ngOnChanges() {
-        if (this.canHighlight) {
-            this.highlightLabel();
-        }
-        else if (this.label) { // unhighlight if there was some
-            this.setInnerHtml(this.label);
-        }
+    constructor() {
+        this.dfOptionHighlight = input.required();
+        this.label = signal('');
+        this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this.canHighlight = computed(() => !!this.dfOptionHighlight() && !!this.label());
+        effect(() => {
+            if (this.canHighlight()) {
+                const alternationString = this.dfOptionHighlight()
+                    .replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+                    .replace(' ', '|');
+                const termRegex = new RegExp(alternationString, 'gi');
+                this.setInnerHtml(this.label().replace(termRegex, `<span class=\"highlighted\">$&</span>`));
+            }
+            else if (this.label()) {
+                // unhighlight if there was some
+                this.setInnerHtml(this.label());
+            }
+        });
     }
     ngAfterViewInit() {
-        this.label = this.element.innerHTML;
-        if (this.canHighlight) {
-            this.highlightLabel();
-        }
-    }
-    escapeRegExp(str) {
-        return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-    }
-    highlightLabel() {
-        const label = this.label;
-        if (!this.term) {
-            this.setInnerHtml(label);
-            return;
-        }
-        const alternationString = this.escapeRegExp(this.term).replace(' ', '|');
-        const termRegex = new RegExp(alternationString, 'gi');
-        this.setInnerHtml(label.replace(termRegex, `<span class=\"highlighted\">$&</span>`));
-    }
-    get canHighlight() {
-        return this.isDefined(this.term) && this.isDefined(this.label);
+        this.label.set(this.elementRef.nativeElement.innerHTML);
     }
     setInnerHtml(html) {
         this.renderer.setProperty(this.elementRef.nativeElement, 'innerHTML', html);
     }
-    isDefined(value) {
-        return value !== undefined && value !== null;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfOptionHighlightDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: DfOptionHighlightDirective, isStandalone: true, selector: "[dfOptionHighlight]", inputs: { term: ["dfOptionHighlight", "term"] }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfOptionHighlightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.3", type: DfOptionHighlightDirective, isStandalone: true, selector: "[dfOptionHighlight]", inputs: { dfOptionHighlight: { classPropertyName: "dfOptionHighlight", publicName: "dfOptionHighlight", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfOptionHighlightDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfOptionHighlightDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[dfOptionHighlight]',
-                    standalone: true
+                    selector: '[dfOptionHighlight]'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { term: [{
-                type: Input,
-                args: ['dfOptionHighlight']
-            }] } });
+        }], ctorParameters: () => [] });
 
 // Put to avoid opening of the select after removal. See why in file:
 // https://github.com/ng-select/ng-select/blob/57c6671a972d23beddcca2b6acc9418544c17a2e/src/ng-select/ng-select.component.ts#L307
 const NG_SELECT_CLASS_IDENTIFIER = 'ng-value-icon';
 class DfManageBadgeEventsDirective {
-    constructor(renderer, element) {
-        this.renderer = renderer;
-        this.element = element;
-        this.tabindex = '-1';
+    constructor() {
+        this.dfManageBadgeEventsSelect = input.required();
+        this.renderer = inject(Renderer2);
+        this.element = inject(ElementRef);
         this.renderer.addClass(this.element.nativeElement, DF_SELECT_CLASS);
         this.renderer.addClass(this.element.nativeElement, NG_SELECT_CLASS_IDENTIFIER);
     }
@@ -5432,55 +5277,44 @@ class DfManageBadgeEventsDirective {
         });
     }
     handleKeyDownBackspace(event) {
-        this.dfManageBadgeEventsSelect[0](this.dfManageBadgeEventsSelect[1]);
+        this.dfManageBadgeEventsSelect()[0](this.dfManageBadgeEventsSelect()[1]);
         event.stopPropagation();
     }
     handleClick(event) {
-        this.dfManageBadgeEventsSelect[0](this.dfManageBadgeEventsSelect[1]);
+        this.dfManageBadgeEventsSelect()[0](this.dfManageBadgeEventsSelect()[1]);
         event.stopPropagation();
     }
     handleKeyDownEnter(event) {
-        this.dfManageBadgeEventsSelect[0](this.dfManageBadgeEventsSelect[1]);
+        this.dfManageBadgeEventsSelect()[0](this.dfManageBadgeEventsSelect()[1]);
         event.stopPropagation();
     }
     handleKeyDownDelete(event) {
-        this.dfManageBadgeEventsSelect[0](this.dfManageBadgeEventsSelect[1]);
+        this.dfManageBadgeEventsSelect()[0](this.dfManageBadgeEventsSelect()[1]);
         event.stopPropagation();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfManageBadgeEventsDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: DfManageBadgeEventsDirective, isStandalone: true, selector: "[dfManageBadgeEventsSelect]", inputs: { dfManageBadgeEventsSelect: "dfManageBadgeEventsSelect" }, host: { listeners: { "keydown.Backspace": "handleKeyDownBackspace($event)", "click": "handleClick($event)", "keydown.Enter": "handleKeyDownEnter($event)", "keydown.Delete": "handleKeyDownDelete($event)" }, properties: { "attr.tabindex": "this.tabindex" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfManageBadgeEventsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.3", type: DfManageBadgeEventsDirective, isStandalone: true, selector: "[dfManageBadgeEventsSelect]", inputs: { dfManageBadgeEventsSelect: { classPropertyName: "dfManageBadgeEventsSelect", publicName: "dfManageBadgeEventsSelect", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "tabindex": "-1" }, listeners: { "keydown.Backspace": "handleKeyDownBackspace($event)", "click": "handleClick($event)", "keydown.Enter": "handleKeyDownEnter($event)", "keydown.Delete": "handleKeyDownDelete($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfManageBadgeEventsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfManageBadgeEventsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfManageBadgeEventsSelect]',
-                    standalone: true
+                    host: {
+                        tabindex: '-1',
+                        '(keydown.Backspace)': 'handleKeyDownBackspace($event)',
+                        '(click)': 'handleClick($event)',
+                        '(keydown.Enter)': 'handleKeyDownEnter($event)',
+                        '(keydown.Delete)': 'handleKeyDownDelete($event)'
+                    }
                 }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { dfManageBadgeEventsSelect: [{
-                type: Input
-            }], tabindex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
-            }], handleKeyDownBackspace: [{
-                type: HostListener,
-                args: ['keydown.Backspace', ['$event']]
-            }], handleClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], handleKeyDownEnter: [{
-                type: HostListener,
-                args: ['keydown.Enter', ['$event']]
-            }], handleKeyDownDelete: [{
-                type: HostListener,
-                args: ['keydown.Delete', ['$event']]
-            }] } });
+        }], ctorParameters: () => [] });
 
 class DfSelectModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: DfSelectModule, imports: [DfManageNavSelectDirective, DfManageBadgeEventsDirective, DfOptionHighlightDirective], exports: [DfManageNavSelectDirective, DfManageBadgeEventsDirective, DfOptionHighlightDirective, NgSelectModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSelectModule, imports: [NgSelectModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: DfSelectModule, imports: [DfManageNavSelectDirective, DfManageBadgeEventsDirective, DfOptionHighlightDirective], exports: [DfManageNavSelectDirective, DfManageBadgeEventsDirective, DfOptionHighlightDirective, NgSelectModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSelectModule, imports: [NgSelectModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfManageNavSelectDirective, DfManageBadgeEventsDirective, DfOptionHighlightDirective],
@@ -5691,10 +5525,10 @@ class DfStepperService {
         this._state.steps[index].warning = false;
         this.updateStepperState();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfStepperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfStepperService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfStepperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfStepperService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfStepperService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfStepperService, decorators: [{
             type: Injectable
         }] });
 
@@ -5726,15 +5560,14 @@ class DfStepperStepDirective {
     ngOnDestroy() {
         this.unlistener.forEach((ul) => ul());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfStepperStepDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: DfStepperStepDirective, isStandalone: true, selector: "[dfStepperStep]", exportAs: ["dfStepperStep"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfStepperStepDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.3", type: DfStepperStepDirective, isStandalone: true, selector: "[dfStepperStep]", exportAs: ["dfStepperStep"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfStepperStepDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfStepperStepDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfStepperStep]',
-                    exportAs: 'dfStepperStep',
-                    standalone: true
+                    exportAs: 'dfStepperStep'
                 }]
         }] });
 class DfStepperDirective {
@@ -5838,15 +5671,14 @@ class DfStepperDirective {
             this.stepperService.resetFocus();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfStepperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: DfStepperDirective, isStandalone: true, selector: "[dfStepperLogic]", host: { listeners: { "keydown.Enter": "handleEnterDown()", "keydown.Space": "handleSpaceDown()", "keydown.arrowRight": "handleKeyDownRight($event)", "keydown.arrowLeft": "handleKeyDown($event)", "keydown.arrowDown": "handleKeyDownUp($event)", "keydown.arrowUp": "handleKeyDownDown($event)" } }, exportAs: ["dfStepperLogic"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfStepperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.3", type: DfStepperDirective, isStandalone: true, selector: "[dfStepperLogic]", host: { listeners: { "keydown.Enter": "handleEnterDown()", "keydown.Space": "handleSpaceDown()", "keydown.arrowRight": "handleKeyDownRight($event)", "keydown.arrowLeft": "handleKeyDown($event)", "keydown.arrowDown": "handleKeyDownUp($event)", "keydown.arrowUp": "handleKeyDownDown($event)" } }, exportAs: ["dfStepperLogic"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfStepperDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfStepperDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfStepperLogic]',
-                    exportAs: 'dfStepperLogic',
-                    standalone: true
+                    exportAs: 'dfStepperLogic'
                 }]
         }], propDecorators: { handleEnterDown: [{
                 type: HostListener,
@@ -5875,19 +5707,15 @@ class DfStepperStepContentDirective {
          * The step index
          * -1 means that the input index is not set
          */
-        // eslint-disable-next-line @angular-eslint/no-input-rename
-        this.dfStepperStepContent = -1;
+        this.dfStepperStepContent = input(-1, { transform: (value) => numberAttribute(value, -1) });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfStepperStepContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.7", type: DfStepperStepContentDirective, isStandalone: true, selector: "ng-template[dfStepperStepContent]", inputs: { dfStepperStepContent: ["dfStepperStepContent", "dfStepperStepContent", (value) => numberAttribute(value, -1)] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfStepperStepContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.3", type: DfStepperStepContentDirective, isStandalone: true, selector: "ng-template[dfStepperStepContent]", inputs: { dfStepperStepContent: { classPropertyName: "dfStepperStepContent", publicName: "dfStepperStepContent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfStepperStepContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfStepperStepContentDirective, decorators: [{
             type: Directive,
-            args: [{ selector: 'ng-template[dfStepperStepContent]', standalone: true }]
-        }], propDecorators: { dfStepperStepContent: [{
-                type: Input,
-                args: [{ transform: (value) => numberAttribute(value, -1) }]
-            }] } });
+            args: [{ selector: 'ng-template[dfStepperStepContent]' }]
+        }] });
 /**
  * Stepper component is a component to provide a step by step navigation
  * You have two ways to navigate through the steps:
@@ -5898,40 +5726,39 @@ class DfStepperComponent {
     constructor() {
         this.stepperService = inject(DfStepperService);
         this.mapStepToContent = new Map();
-        this.stepperService.stepperState$.subscribe((state) => {
-            this.state = state;
+        this.tplStepsContent = contentChildren(DfStepperStepContentDirective);
+        this.state = signal(undefined);
+        this.stepperService.stepperState$.pipe(takeUntilDestroyed()).subscribe((state) => {
+            this.state.set(state);
         });
     }
     ngAfterContentInit() {
-        this.tplStepsContent.forEach((tplStepContent) => {
-            if (tplStepContent.dfStepperStepContent !== -1) {
-                this.mapStepToContent.set(tplStepContent.dfStepperStepContent, tplStepContent.templateRef);
+        this.tplStepsContent().forEach((tplStepContent) => {
+            if (tplStepContent.dfStepperStepContent() !== -1) {
+                this.mapStepToContent.set(tplStepContent.dfStepperStepContent(), tplStepContent.templateRef);
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: DfStepperComponent, isStandalone: true, selector: "[dfStepper]", host: { attributes: { "role": "tablist" }, properties: { "class.df-vertical-stepper": "state?.isVertical", "attr.aria-label": "stepperService.stepperAriaLabel", "attr.aria-orientation": "state?.isVertical ? \"vertical\": null" }, classAttribute: "df-stepper mb-2" }, queries: [{ propertyName: "tplStepsContent", predicate: DfStepperStepContentDirective }], hostDirectives: [{ directive: DfStepperDirective }], ngImport: i0, template: "<ng-template #myStepperLine>\n  <div class=\"df-stepper-line-wrapper\">\n    <div class=\"df-stepper-line\">\n      <div class=\"df-stepper-horizontal-line\"></div>\n    </div>\n    <div class=\"df-stepper-line d-none d-sm-flex\">\n      <div class=\"flex-grow-1\"></div>\n    </div>\n  </div>\n</ng-template>\n@if (state) {\n  @for (step of state.steps; track step; let i = $index) {\n    <button\n      #stepbasic\n      class=\"btn btn-link df-stepper-step\"\n      dfStepperStep\n      [class.active]=\"i === state.active\"\n      [class.flex-row]=\"state.isInline\"\n      [attr.tabIndex]=\"i === state.active ? 0 : -1\"\n      [class.df-stepper-step-warning]=\"step.type === 'warning'\"\n      [class.df-stepper-step-completed]=\"step.type === 'completed'\"\n      [class.df-stepper-step-visited]=\"step.type === 'visited'\"\n      [class.df-stepper-step-future]=\"step.type === 'future'\"\n      [disabled]=\"\n        state.isLinear &&\n        (step.type === 'future' || step.type === 'completed' || (step.type === 'visited' && i !== state.active))\n      \"\n      role=\"tab\"\n      [attr.aria-selected]=\"i === state.active ? 'true' : 'false'\"\n      [attr.aria-posinset]=\"i + 1\"\n      [attr.aria-setsize]=\"state.steps.length\"\n      [attr.aria-controls]=\"step.ariaControl\"\n      (click)=\"stepperService.selectWithFocus(i)\"\n    >\n      <div\n        [class.df-stepper-outline-number-visited]=\"step.type === 'visited'\"\n        [class.df-stepper-outline-icon]=\"step.type === 'warning'\"\n        [class.fa-exclamation-triangle]=\"step.type === 'warning'\"\n        [class.df-stepper-icon]=\"step.type === 'completed'\"\n        [class.fa-check]=\"step.type === 'completed'\"\n        [class.df-stepper-outline-number-future]=\"step.type === 'future'\"\n      >\n        <span aria-hidden=\"true\">{{ stepperService.getStepNumberLabel(i) }}</span>\n      </div>\n      <div\n        class=\"flex-column\"\n        [class.mt-1]=\"!state.isInline\"\n        [class.d-none]=\"!state.isVertical\"\n        [class.d-sm-flex]=\"!state.isVertical\"\n        [class.d-flex]=\"state.isVertical\"\n      >\n        @if (step.type === 'warning') {\n          <span class=\"visually-hidden\">{{ stepperService.warningLabel }}</span>\n        }\n        <span class=\"df-stepper-label\">{{ step.label }}</span>\n        @if (step.optionalLabel) {\n          <span class=\"df-stepper-optional-label\">{{ step.optionalLabel }}</span>\n        }\n        @if (step.completed) {\n          <span class=\"visually-hidden\">{{ stepperService.completedLabel }}</span>\n        }\n      </div>\n    </button>\n    @if (!state.isVertical && i < state.steps.length - 1) {\n      <ng-container [ngTemplateOutlet]=\"myStepperLine\"></ng-container>\n    }\n    @if (state.isVertical && i < state.steps.length) {\n      <div\n        [class.d-none]=\"state.steps.length - 1 === i\"\n        role=\"tabpanel\"\n        [id]=\"step.ariaControl\"\n        class=\"df-vertical-stepper-panel df-vertical-stepper-line\"\n      >\n        @if (mapStepToContent.has(i) && state.active === i) {\n          <ng-template\n            [ngTemplateOutlet]=\"mapStepToContent.get(i) || null\"\n            [ngTemplateOutletContext]=\"{ state, index: i, service: stepperService }\"\n          ></ng-template>\n        }\n      </div>\n    }\n  }\n}\n@if (stepperService.stepperState$ | async; as state) {\n  <div\n    class=\"text-primary mb-2\"\n    [class.d-block]=\"!state.isVertical\"\n    [class.d-sm-none]=\"!state.isVertical\"\n    [class.d-none]=\"state.isVertical\"\n  >\n    <span class=\"df-stepper-label\">{{ state.steps[state.active].label }}</span>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "directive", type: DfStepperStepDirective, selector: "[dfStepperStep]", exportAs: ["dfStepperStep"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.3", type: DfStepperComponent, isStandalone: true, selector: "[dfStepper]", host: { attributes: { "role": "tablist" }, properties: { "class.df-vertical-stepper": "state()?.isVertical", "attr.aria-label": "stepperService.stepperAriaLabel", "attr.aria-orientation": "state()?.isVertical ? \"vertical\": null" }, classAttribute: "df-stepper mb-2" }, queries: [{ propertyName: "tplStepsContent", predicate: DfStepperStepContentDirective, isSignal: true }], hostDirectives: [{ directive: DfStepperDirective }], ngImport: i0, template: "<ng-template #myStepperLine>\n  <div class=\"df-stepper-line-wrapper\">\n    <div class=\"df-stepper-line\">\n      <div class=\"df-stepper-horizontal-line\"></div>\n    </div>\n    <div class=\"df-stepper-line d-none d-sm-flex\">\n      <div class=\"flex-grow-1\"></div>\n    </div>\n  </div>\n</ng-template>\n@if (state(); as state) {\n  @for (step of state.steps; track step; let i = $index) {\n    <button\n      #stepbasic\n      class=\"btn btn-link df-stepper-step\"\n      dfStepperStep\n      [class.active]=\"i === state.active\"\n      [class.flex-row]=\"state.isInline\"\n      [attr.tabIndex]=\"i === state.active ? 0 : -1\"\n      [class.df-stepper-step-warning]=\"step.type === 'warning'\"\n      [class.df-stepper-step-completed]=\"step.type === 'completed'\"\n      [class.df-stepper-step-visited]=\"step.type === 'visited'\"\n      [class.df-stepper-step-future]=\"step.type === 'future'\"\n      [disabled]=\"\n        state.isLinear &&\n        (step.type === 'future' || step.type === 'completed' || (step.type === 'visited' && i !== state.active))\n      \"\n      role=\"tab\"\n      [attr.aria-selected]=\"i === state.active ? 'true' : 'false'\"\n      [attr.aria-posinset]=\"i + 1\"\n      [attr.aria-setsize]=\"state.steps.length\"\n      [attr.aria-controls]=\"step.ariaControl\"\n      (click)=\"stepperService.selectWithFocus(i)\"\n    >\n      <div\n        [class.df-stepper-outline-number-visited]=\"step.type === 'visited'\"\n        [class.df-stepper-outline-icon]=\"step.type === 'warning'\"\n        [class.fa-exclamation-triangle]=\"step.type === 'warning'\"\n        [class.df-stepper-icon]=\"step.type === 'completed'\"\n        [class.fa-check]=\"step.type === 'completed'\"\n        [class.df-stepper-outline-number-future]=\"step.type === 'future'\"\n      >\n        <span aria-hidden=\"true\">{{ stepperService.getStepNumberLabel(i) }}</span>\n      </div>\n      <div\n        class=\"flex-column\"\n        [class.mt-1]=\"!state.isInline\"\n        [class.d-none]=\"!state.isVertical\"\n        [class.d-sm-flex]=\"!state.isVertical\"\n        [class.d-flex]=\"state.isVertical\"\n      >\n        @if (step.type === 'warning') {\n          <span class=\"visually-hidden\">{{ stepperService.warningLabel }}</span>\n        }\n        <span class=\"df-stepper-label\">{{ step.label }}</span>\n        @if (step.optionalLabel) {\n          <span class=\"df-stepper-optional-label\">{{ step.optionalLabel }}</span>\n        }\n        @if (step.completed) {\n          <span class=\"visually-hidden\">{{ stepperService.completedLabel }}</span>\n        }\n      </div>\n    </button>\n    @if (!state.isVertical && i < state.steps.length - 1) {\n      <ng-container [ngTemplateOutlet]=\"myStepperLine\"></ng-container>\n    }\n    @if (state.isVertical && i < state.steps.length) {\n      <div\n        [class.d-none]=\"state.steps.length - 1 === i\"\n        role=\"tabpanel\"\n        [id]=\"step.ariaControl\"\n        class=\"df-vertical-stepper-panel df-vertical-stepper-line\"\n      >\n        @if (mapStepToContent.has(i) && state.active === i) {\n          <ng-template\n            [ngTemplateOutlet]=\"mapStepToContent.get(i) || null\"\n            [ngTemplateOutletContext]=\"{ state, index: i, service: stepperService }\"\n          ></ng-template>\n        }\n      </div>\n    }\n  }\n}\n@if (stepperService.stepperState$ | async; as state) {\n  <div\n    class=\"text-primary mb-2\"\n    [class.d-block]=\"!state.isVertical\"\n    [class.d-sm-none]=\"!state.isVertical\"\n    [class.d-none]=\"state.isVertical\"\n  >\n    <span class=\"df-stepper-label\">{{ state.steps[state.active].label }}</span>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: DfStepperStepDirective, selector: "[dfStepperStep]", exportAs: ["dfStepperStep"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfStepperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfStepperComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[dfStepper]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, DfStepperDirective, DfStepperStepDirective], hostDirectives: [DfStepperDirective], host: {
+            args: [{ selector: '[dfStepper]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [DfStepperStepDirective, NgTemplateOutlet, AsyncPipe], hostDirectives: [DfStepperDirective], host: {
                         role: 'tablist',
                         class: 'df-stepper mb-2',
-                        '[class.df-vertical-stepper]': 'state?.isVertical',
+                        '[class.df-vertical-stepper]': 'state()?.isVertical',
                         '[attr.aria-label]': 'stepperService.stepperAriaLabel',
-                        '[attr.aria-orientation]': 'state?.isVertical ? "vertical": null'
-                    }, template: "<ng-template #myStepperLine>\n  <div class=\"df-stepper-line-wrapper\">\n    <div class=\"df-stepper-line\">\n      <div class=\"df-stepper-horizontal-line\"></div>\n    </div>\n    <div class=\"df-stepper-line d-none d-sm-flex\">\n      <div class=\"flex-grow-1\"></div>\n    </div>\n  </div>\n</ng-template>\n@if (state) {\n  @for (step of state.steps; track step; let i = $index) {\n    <button\n      #stepbasic\n      class=\"btn btn-link df-stepper-step\"\n      dfStepperStep\n      [class.active]=\"i === state.active\"\n      [class.flex-row]=\"state.isInline\"\n      [attr.tabIndex]=\"i === state.active ? 0 : -1\"\n      [class.df-stepper-step-warning]=\"step.type === 'warning'\"\n      [class.df-stepper-step-completed]=\"step.type === 'completed'\"\n      [class.df-stepper-step-visited]=\"step.type === 'visited'\"\n      [class.df-stepper-step-future]=\"step.type === 'future'\"\n      [disabled]=\"\n        state.isLinear &&\n        (step.type === 'future' || step.type === 'completed' || (step.type === 'visited' && i !== state.active))\n      \"\n      role=\"tab\"\n      [attr.aria-selected]=\"i === state.active ? 'true' : 'false'\"\n      [attr.aria-posinset]=\"i + 1\"\n      [attr.aria-setsize]=\"state.steps.length\"\n      [attr.aria-controls]=\"step.ariaControl\"\n      (click)=\"stepperService.selectWithFocus(i)\"\n    >\n      <div\n        [class.df-stepper-outline-number-visited]=\"step.type === 'visited'\"\n        [class.df-stepper-outline-icon]=\"step.type === 'warning'\"\n        [class.fa-exclamation-triangle]=\"step.type === 'warning'\"\n        [class.df-stepper-icon]=\"step.type === 'completed'\"\n        [class.fa-check]=\"step.type === 'completed'\"\n        [class.df-stepper-outline-number-future]=\"step.type === 'future'\"\n      >\n        <span aria-hidden=\"true\">{{ stepperService.getStepNumberLabel(i) }}</span>\n      </div>\n      <div\n        class=\"flex-column\"\n        [class.mt-1]=\"!state.isInline\"\n        [class.d-none]=\"!state.isVertical\"\n        [class.d-sm-flex]=\"!state.isVertical\"\n        [class.d-flex]=\"state.isVertical\"\n      >\n        @if (step.type === 'warning') {\n          <span class=\"visually-hidden\">{{ stepperService.warningLabel }}</span>\n        }\n        <span class=\"df-stepper-label\">{{ step.label }}</span>\n        @if (step.optionalLabel) {\n          <span class=\"df-stepper-optional-label\">{{ step.optionalLabel }}</span>\n        }\n        @if (step.completed) {\n          <span class=\"visually-hidden\">{{ stepperService.completedLabel }}</span>\n        }\n      </div>\n    </button>\n    @if (!state.isVertical && i < state.steps.length - 1) {\n      <ng-container [ngTemplateOutlet]=\"myStepperLine\"></ng-container>\n    }\n    @if (state.isVertical && i < state.steps.length) {\n      <div\n        [class.d-none]=\"state.steps.length - 1 === i\"\n        role=\"tabpanel\"\n        [id]=\"step.ariaControl\"\n        class=\"df-vertical-stepper-panel df-vertical-stepper-line\"\n      >\n        @if (mapStepToContent.has(i) && state.active === i) {\n          <ng-template\n            [ngTemplateOutlet]=\"mapStepToContent.get(i) || null\"\n            [ngTemplateOutletContext]=\"{ state, index: i, service: stepperService }\"\n          ></ng-template>\n        }\n      </div>\n    }\n  }\n}\n@if (stepperService.stepperState$ | async; as state) {\n  <div\n    class=\"text-primary mb-2\"\n    [class.d-block]=\"!state.isVertical\"\n    [class.d-sm-none]=\"!state.isVertical\"\n    [class.d-none]=\"state.isVertical\"\n  >\n    <span class=\"df-stepper-label\">{{ state.steps[state.active].label }}</span>\n  </div>\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { tplStepsContent: [{
-                type: ContentChildren,
-                args: [DfStepperStepContentDirective]
-            }] } });
+                        '[attr.aria-orientation]': 'state()?.isVertical ? "vertical": null'
+                    }, template: "<ng-template #myStepperLine>\n  <div class=\"df-stepper-line-wrapper\">\n    <div class=\"df-stepper-line\">\n      <div class=\"df-stepper-horizontal-line\"></div>\n    </div>\n    <div class=\"df-stepper-line d-none d-sm-flex\">\n      <div class=\"flex-grow-1\"></div>\n    </div>\n  </div>\n</ng-template>\n@if (state(); as state) {\n  @for (step of state.steps; track step; let i = $index) {\n    <button\n      #stepbasic\n      class=\"btn btn-link df-stepper-step\"\n      dfStepperStep\n      [class.active]=\"i === state.active\"\n      [class.flex-row]=\"state.isInline\"\n      [attr.tabIndex]=\"i === state.active ? 0 : -1\"\n      [class.df-stepper-step-warning]=\"step.type === 'warning'\"\n      [class.df-stepper-step-completed]=\"step.type === 'completed'\"\n      [class.df-stepper-step-visited]=\"step.type === 'visited'\"\n      [class.df-stepper-step-future]=\"step.type === 'future'\"\n      [disabled]=\"\n        state.isLinear &&\n        (step.type === 'future' || step.type === 'completed' || (step.type === 'visited' && i !== state.active))\n      \"\n      role=\"tab\"\n      [attr.aria-selected]=\"i === state.active ? 'true' : 'false'\"\n      [attr.aria-posinset]=\"i + 1\"\n      [attr.aria-setsize]=\"state.steps.length\"\n      [attr.aria-controls]=\"step.ariaControl\"\n      (click)=\"stepperService.selectWithFocus(i)\"\n    >\n      <div\n        [class.df-stepper-outline-number-visited]=\"step.type === 'visited'\"\n        [class.df-stepper-outline-icon]=\"step.type === 'warning'\"\n        [class.fa-exclamation-triangle]=\"step.type === 'warning'\"\n        [class.df-stepper-icon]=\"step.type === 'completed'\"\n        [class.fa-check]=\"step.type === 'completed'\"\n        [class.df-stepper-outline-number-future]=\"step.type === 'future'\"\n      >\n        <span aria-hidden=\"true\">{{ stepperService.getStepNumberLabel(i) }}</span>\n      </div>\n      <div\n        class=\"flex-column\"\n        [class.mt-1]=\"!state.isInline\"\n        [class.d-none]=\"!state.isVertical\"\n        [class.d-sm-flex]=\"!state.isVertical\"\n        [class.d-flex]=\"state.isVertical\"\n      >\n        @if (step.type === 'warning') {\n          <span class=\"visually-hidden\">{{ stepperService.warningLabel }}</span>\n        }\n        <span class=\"df-stepper-label\">{{ step.label }}</span>\n        @if (step.optionalLabel) {\n          <span class=\"df-stepper-optional-label\">{{ step.optionalLabel }}</span>\n        }\n        @if (step.completed) {\n          <span class=\"visually-hidden\">{{ stepperService.completedLabel }}</span>\n        }\n      </div>\n    </button>\n    @if (!state.isVertical && i < state.steps.length - 1) {\n      <ng-container [ngTemplateOutlet]=\"myStepperLine\"></ng-container>\n    }\n    @if (state.isVertical && i < state.steps.length) {\n      <div\n        [class.d-none]=\"state.steps.length - 1 === i\"\n        role=\"tabpanel\"\n        [id]=\"step.ariaControl\"\n        class=\"df-vertical-stepper-panel df-vertical-stepper-line\"\n      >\n        @if (mapStepToContent.has(i) && state.active === i) {\n          <ng-template\n            [ngTemplateOutlet]=\"mapStepToContent.get(i) || null\"\n            [ngTemplateOutletContext]=\"{ state, index: i, service: stepperService }\"\n          ></ng-template>\n        }\n      </div>\n    }\n  }\n}\n@if (stepperService.stepperState$ | async; as state) {\n  <div\n    class=\"text-primary mb-2\"\n    [class.d-block]=\"!state.isVertical\"\n    [class.d-sm-none]=\"!state.isVertical\"\n    [class.d-none]=\"state.isVertical\"\n  >\n    <span class=\"df-stepper-label\">{{ state.steps[state.active].label }}</span>\n  </div>\n}\n" }]
+        }], ctorParameters: () => [] });
 
 class DfStepperModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: DfStepperModule, imports: [DfStepperDirective, DfStepperStepDirective, DfStepperComponent, DfStepperStepContentDirective], exports: [DfStepperDirective, DfStepperStepDirective, DfStepperComponent, DfStepperStepContentDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfStepperModule, imports: [DfStepperComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: DfStepperModule, imports: [DfStepperDirective, DfStepperStepDirective, DfStepperComponent, DfStepperStepContentDirective], exports: [DfStepperDirective, DfStepperStepDirective, DfStepperComponent, DfStepperStepContentDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfStepperModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfStepperModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfStepperModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfStepperDirective, DfStepperStepDirective, DfStepperComponent, DfStepperStepContentDirective],
@@ -5952,26 +5779,27 @@ class DfTooltipTruncateDirective {
         this.renderer.addClass(this.elementRef.nativeElement, 'text-truncate');
     }
     ngDoCheck() {
-        this.tooltip.disableTooltip = !hasOverflow(this.elementRef.nativeElement);
+        const disableToolTip = !hasOverflow(this.elementRef.nativeElement);
+        this.tooltip.disableTooltip = disableToolTip;
+        this.renderer.setAttribute(this.elementRef.nativeElement, 'tabIndex', disableToolTip ? '-1' : '0');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfTooltipTruncateDirective, deps: [{ token: i1.NgbTooltip }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: DfTooltipTruncateDirective, isStandalone: true, selector: "[dfTooltipTruncate]", exportAs: ["dfTooltipTruncate"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfTooltipTruncateDirective, deps: [{ token: i1.NgbTooltip }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.3", type: DfTooltipTruncateDirective, isStandalone: true, selector: "[dfTooltipTruncate]", exportAs: ["dfTooltipTruncate"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfTooltipTruncateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfTooltipTruncateDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'dfTooltipTruncate',
-                    selector: '[dfTooltipTruncate]',
-                    standalone: true
+                    selector: '[dfTooltipTruncate]'
                 }]
         }], ctorParameters: () => [{ type: i1.NgbTooltip }, { type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class DfTooltipModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: DfTooltipModule, imports: [DfTooltipTruncateDirective], exports: [DfTooltipTruncateDirective, NgbTooltipModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfTooltipModule, imports: [NgbTooltipModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: DfTooltipModule, imports: [DfTooltipTruncateDirective], exports: [DfTooltipTruncateDirective, NgbTooltipModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfTooltipModule, imports: [NgbTooltipModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfTooltipModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfTooltipModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfTooltipTruncateDirective],
@@ -5980,8 +5808,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }] });
 
 class DfSideNavModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSideNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: DfSideNavModule, imports: [DfManageSideNavDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSideNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: DfSideNavModule, imports: [DfManageSideNavDirective,
             DfSideNavComponent,
             DfSideNavHeaderDirective,
             DfExcludeTrapDirective,
@@ -5994,10 +5822,10 @@ class DfSideNavModule {
             DfSideNavItemDirective,
             DfSideNavCollapseModule,
             DfMediaModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSideNavModule, imports: [DfSideNavComponent, DfSideNavCollapseModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSideNavModule, imports: [DfSideNavComponent, DfSideNavCollapseModule,
             DfMediaModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfSideNavModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfSideNavModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -6022,18 +5850,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }] });
 
 class DfManageCardSelectionDirective {
-    set dfManageCardSelected(isSelected) {
-        const selectedClass = 'df-card-selected';
-        if (isSelected === true) {
-            this.renderer.addClass(this.element.nativeElement, selectedClass);
-        }
-        else {
-            this.renderer.removeClass(this.element.nativeElement, selectedClass);
-        }
-    }
-    constructor(element, renderer) {
-        this.element = element;
-        this.renderer = renderer;
+    constructor() {
+        this.dfManageCardSelected = input.required();
+        this.element = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        effect(() => {
+            const selectedClass = 'df-card-selected';
+            if (this.dfManageCardSelected() === true) {
+                this.renderer.addClass(this.element.nativeElement, selectedClass);
+            }
+            else {
+                this.renderer.removeClass(this.element.nativeElement, selectedClass);
+            }
+        });
     }
     ngAfterViewInit() {
         this.input = this.element.nativeElement.querySelector('.form-check-input');
@@ -6050,28 +5879,25 @@ class DfManageCardSelectionDirective {
             this.element.nativeElement.focus();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfManageCardSelectionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: DfManageCardSelectionDirective, isStandalone: true, selector: "[dfManageCardSelected]", inputs: { dfManageCardSelected: "dfManageCardSelected" }, host: { listeners: { "click": "click($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfManageCardSelectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.3", type: DfManageCardSelectionDirective, isStandalone: true, selector: "[dfManageCardSelected]", inputs: { dfManageCardSelected: { classPropertyName: "dfManageCardSelected", publicName: "dfManageCardSelected", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "click($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfManageCardSelectionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfManageCardSelectionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfManageCardSelected]',
-                    standalone: true
+                    host: {
+                        '(click)': 'click($event)'
+                    }
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { dfManageCardSelected: [{
-                type: Input
-            }], click: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
+        }], ctorParameters: () => [] });
 
 class DfAdvancedCardModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfAdvancedCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: DfAdvancedCardModule, imports: [DfManageCardSelectionDirective], exports: [DfManageCardSelectionDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfAdvancedCardModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfAdvancedCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: DfAdvancedCardModule, imports: [DfManageCardSelectionDirective], exports: [DfManageCardSelectionDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfAdvancedCardModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfAdvancedCardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfAdvancedCardModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfManageCardSelectionDirective],
@@ -6102,8 +5928,8 @@ const DF_MODULES = [
  * @deprecated Import only the needed modules or use standalone components instead of DfModule
  */
 class DfModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: DfModule, imports: [DfAlertModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: DfModule, imports: [DfAlertModule,
             DfDatePickerModule,
             DfSelectModule,
             DfProgressbarModule,
@@ -6136,7 +5962,7 @@ class DfModule {
             DfFooterModule,
             DfToastModule,
             DfStepperModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfModule, imports: [DF_MODULES, DfAlertModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfModule, imports: [DF_MODULES, DfAlertModule,
             DfDatePickerModule,
             DfSelectModule,
             DfProgressbarModule,
@@ -6154,7 +5980,7 @@ class DfModule {
             DfToastModule,
             DfStepperModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: DF_MODULES,
@@ -6163,27 +5989,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }] });
 
 class DfWavesOfProgressDirective {
-    constructor() {
-        this.http = inject(HttpClient, { optional: true });
-        this.waveClass = 'df-waves-of-progress-bg';
-        this.elementRef = inject(ElementRef);
-        this.baseSvg = '';
-    }
-    /**
-     * The type of waves to display. In order to display the waves, the app using the directive must include the assets of Design Factory.
-     * It is possible to do so by adding the following snippet to the `angular.json` file in the `assets` configuration:
-     * @example
-     * "assets": [
-     *  {
-     *    "glob": "** / *", //remove the spaces between the asterisks and the slash
-     *    "input": "node-modules/@design-factory/design-factory/assets/",
-     *    "output": "assets/"
-     *  },
-     *  ...]
-     */
-    set wavesType(value) {
-        this.getSvg(value);
-    }
     /**
      * Prepares the SVG string by replacing color variables and encoding it.
      * @param bgColor - The background color.
@@ -6200,14 +6005,40 @@ class DfWavesOfProgressDirective {
      * Updates the SVG background image based on the current element's styles.
      */
     updateSvg() {
-        const computedStyle = window.getComputedStyle(this.elementRef.nativeElement);
-        const bgColor = computedStyle.getPropertyValue('--df-waves-of-progress-bg-color');
-        const lineColor = computedStyle.getPropertyValue('--df-waves-of-progress-line-color');
-        if (!bgColor || !lineColor) {
-            this.elementRef.nativeElement.style.backgroundImage = null;
+        if (isPlatformBrowser(this.platformId)) {
+            const computedStyle = window.getComputedStyle(this.elementRef.nativeElement);
+            const bgColor = computedStyle.getPropertyValue('--df-waves-of-progress-bg-color');
+            const lineColor = computedStyle.getPropertyValue('--df-waves-of-progress-line-color');
+            if (!bgColor || !lineColor) {
+                this.elementRef.nativeElement.style.backgroundImage = null;
+            }
+            else {
+                this.elementRef.nativeElement.style.backgroundImage = `url(${this.prepareSvg(bgColor, lineColor)})`;
+            }
         }
-        else {
-            this.elementRef.nativeElement.style.backgroundImage = `url(${this.prepareSvg(bgColor, lineColor)})`;
+    }
+    constructor() {
+        /**
+         * The type of waves to display. In order to display the waves, the app using the directive must include the assets of Design Factory.
+         * It is possible to do so by adding the following snippet to the `angular.json` file in the `assets` configuration:
+         * @example
+         * "assets": [
+         *  {
+         *    "glob": "** / *", //remove the spaces between the asterisks and the slash
+         *    "input": "node-modules/@design-factory/design-factory/assets/",
+         *    "output": "assets/"
+         *  },
+         *  ...]
+         */
+        this.dfWavesOfProgress = input.required();
+        this.http = inject(HttpClient, { optional: true });
+        this.elementRef = inject(ElementRef);
+        this.platformId = inject(PLATFORM_ID);
+        this.baseSvg = '';
+        if (isPlatformBrowser(this.platformId)) {
+            effect(() => {
+                this.getSvg(this.dfWavesOfProgress());
+            });
         }
     }
     getSvg(wavesType) {
@@ -6227,30 +6058,26 @@ class DfWavesOfProgressDirective {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfWavesOfProgressDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: DfWavesOfProgressDirective, isStandalone: true, selector: "[dfWavesOfProgress]", inputs: { wavesType: ["dfWavesOfProgress", "wavesType"] }, host: { properties: { "class": "this.waveClass" } }, exportAs: ["dfWavesOfProgress"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfWavesOfProgressDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.3", type: DfWavesOfProgressDirective, isStandalone: true, selector: "[dfWavesOfProgress]", inputs: { dfWavesOfProgress: { classPropertyName: "dfWavesOfProgress", publicName: "dfWavesOfProgress", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "df-waves-of-progress-bg" }, exportAs: ["dfWavesOfProgress"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfWavesOfProgressDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfWavesOfProgressDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfWavesOfProgress]',
-                    standalone: true,
-                    exportAs: 'dfWavesOfProgress'
+                    exportAs: 'dfWavesOfProgress',
+                    host: {
+                        class: 'df-waves-of-progress-bg'
+                    }
                 }]
-        }], propDecorators: { wavesType: [{
-                type: Input,
-                args: ['dfWavesOfProgress']
-            }], waveClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }], ctorParameters: () => [] });
 
 class DfWavesOfProgressModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfWavesOfProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: DfWavesOfProgressModule, imports: [DfWavesOfProgressDirective], exports: [DfWavesOfProgressDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfWavesOfProgressModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfWavesOfProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: DfWavesOfProgressModule, imports: [DfWavesOfProgressDirective], exports: [DfWavesOfProgressDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfWavesOfProgressModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DfWavesOfProgressModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DfWavesOfProgressModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfWavesOfProgressDirective],
@@ -6268,5 +6095,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BREAKPOINTS_VARS, ChangeContext, CloseInputDatePickerDirective, DF_BREAKPOINTS_VAR_DEFAULT, DfAccessibilityModule, DfAdvancedCardModule, DfAdvancedInputModule, DfAlertModule, DfAmadeusIconComponent, DfBreakpoints, DfDatePickerModule, DfDatepickerRangeDirective, DfDatepickerRangeService, DfDefaultSpinnerComponent, DfDirectionDetectionService, DfExcludeTrapDirective, DfFooterModule, DfIconModule, DfIfMediaDirective, DfInputIconDirective, DfInsertIconDirective, DfInsertIconModule, DfManageBadgeEventsDirective, DfManageCardSelectionDirective, DfManageNavSelectDirective, DfManageSideNavDirective, DfMedia, DfMediaModule, DfMediaObserver, DfMediaQuery, DfModalService, DfModule, DfNavItemType, DfOptionHighlightDirective, DfPopoverConfig, DfPopoverModule, DfProgressIndicatorBackdropComponent, DfProgressIndicatorContainerComponent, DfProgressIndicatorContentPosition, DfProgressIndicatorContentProgressBar, DfProgressIndicatorContentSpinner, DfProgressIndicatorContentType, DfProgressIndicatorDirective, DfProgressIndicatorModule, DfProgressIndicatorRef, DfProgressIndicatorService, DfProgressbarComponent, DfProgressbarModule, DfSelectModule, DfSideNavCollapseDirective, DfSideNavCollapseModule, DfSideNavCollapseService, DfSideNavComponent, DfSideNavConfig, DfSideNavHeaderDirective, DfSideNavIconDirective, DfSideNavItemDirective, DfSideNavModule, DfSideNavService, DfSliderDirectionDirective, DfSliderModule, DfStepperComponent, DfStepperDirective, DfStepperModule, DfStepperService, DfStepperStepContentDirective, DfStepperStepDirective, DfTitleTruncateDirective, DfToastModule, DfTooltipModule, DfTooltipTruncateDirective, DfTriggerClickDirective, DfWavesOfProgressDirective, DfWavesOfProgressModule, LabelType, Options, PointerType, RightToLeftDirectionEnum, SkipLinkDirective, SkipLinksContainerComponent, SliderComponent };
+export { BREAKPOINTS_VARS, ChangeContext, DF_BREAKPOINTS_VAR_DEFAULT, DfAccessibilityModule, DfAdvancedCardModule, DfAdvancedInputModule, DfAlertModule, DfAmadeusIconComponent, DfBreakpoints, DfDatePickerModule, DfDatepickerRangeDirective, DfDatepickerRangeService, DfDefaultSpinnerComponent, DfDirectionDetectionService, DfExcludeTrapDirective, DfFooterModule, DfIconModule, DfIfMediaDirective, DfInputIconDirective, DfInsertIconDirective, DfInsertIconModule, DfManageBadgeEventsDirective, DfManageCardSelectionDirective, DfManageNavSelectDirective, DfManageSideNavDirective, DfMedia, DfMediaModule, DfMediaObserver, DfMediaQuery, DfModalService, DfModule, DfNavItemType, DfOptionHighlightDirective, DfPopoverConfig, DfPopoverModule, DfProgressIndicatorBackdropComponent, DfProgressIndicatorContainerComponent, DfProgressIndicatorContentPosition, DfProgressIndicatorContentProgressBar, DfProgressIndicatorContentSpinner, DfProgressIndicatorContentType, DfProgressIndicatorDirective, DfProgressIndicatorModule, DfProgressIndicatorRef, DfProgressIndicatorService, DfProgressbarComponent, DfProgressbarModule, DfSelectModule, DfSideNavCollapseDirective, DfSideNavCollapseModule, DfSideNavCollapseService, DfSideNavComponent, DfSideNavConfig, DfSideNavHeaderDirective, DfSideNavIconDirective, DfSideNavItemDirective, DfSideNavModule, DfSideNavService, DfSliderDirectionDirective, DfSliderModule, DfStepperComponent, DfStepperDirective, DfStepperModule, DfStepperService, DfStepperStepContentDirective, DfStepperStepDirective, DfTitleTruncateDirective, DfToastModule, DfTooltipModule, DfTooltipTruncateDirective, DfTriggerClickDirective, DfWavesOfProgressDirective, DfWavesOfProgressModule, LabelType, Options, PointerType, RightToLeftDirectionEnum, SkipLinkDirective, SkipLinksContainerComponent, SliderComponent };
 //# sourceMappingURL=design-factory.mjs.map