@design-factory/design-factory 20.0.0-next.0 → 20.0.0-next.1

package/fesm2022/design-factory.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { signal, inject, ElementRef, DOCUMENT, Directive, contentChildren, computed, ChangeDetectionStrategy, Component, NgModule, HostListener, input, Renderer2, Injectable, PLATFORM_ID, InjectionToken, Inject, ViewContainerRef, TemplateRef, effect, booleanAttribute, numberAttribute, output, ViewEncapsulation, ComponentRef, untracked, HostBinding, Input, forwardRef, EventEmitter, ContentChild, ViewChild, Output, NgZone, Injector, contentChild, Host } from '@angular/core';
-import * as i1 from '@ng-bootstrap/ng-bootstrap';
-import { NgbToastModule, NgbAlertModule, NgbDatepickerKeyboardService, NgbDate, NgbDatepickerModule, NgbDropdownModule, NgbAccordionModule, NgbPopoverConfig, NgbPopoverModule, NgbProgressbarModule, NgbCollapseModule, NgbTooltip, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
-import * as i1$1 from '@angular/common';
+import { signal, inject, ElementRef, DOCUMENT, Directive, contentChildren, computed, ChangeDetectionStrategy, Component, NgModule, HostListener, input, Renderer2, Injectable, PLATFORM_ID, InjectionToken, ViewContainerRef, TemplateRef, effect, RendererFactory2, booleanAttribute, numberAttribute, output, ViewEncapsulation, ApplicationRef, EnvironmentInjector, ComponentRef, createComponent, untracked, HostBinding, Input, forwardRef, EventEmitter, ContentChild, ViewChild, Output, NgZone, Injector, contentChild } from '@angular/core';
+import * as i1$1 from '@ng-bootstrap/ng-bootstrap';
+import { NgbToastModule, NgbAlertModule, NgbDatepickerKeyboardService, NgbCalendar, NgbDateParserFormatter, NgbDate, NgbDatepickerModule, NgbDropdownModule, NgbAccordionModule, NgbModal, NgbPopoverConfig, NgbPopoverModule, NgbProgressbarModule, NgbConfig, NgbCollapseModule, NgbTooltip, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import * as i1 from '@angular/common';
 import { isPlatformBrowser, isPlatformServer, NgTemplateOutlet, CommonModule, AsyncPipe } from '@angular/common';
 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';
@@ -10,8 +10,7 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
 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 { NgSelectComponent, NgSelectModule } from '@ng-select/ng-select';
 import { HttpClient } from '@angular/common/http';
 
 class SkipLinkDirective {
@@ -38,10 +37,10 @@ class SkipLinkDirective {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: SkipLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SkipLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", 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: "20.0.2", ngImport: i0, type: SkipLinkDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SkipLinkDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfSkipLink]',
@@ -59,20 +58,20 @@ class SkipLinksContainerComponent {
         this.links = contentChildren(SkipLinkDirective);
         this.inFocus = computed(() => this.links().some((link) => link.inFocus()));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: SkipLinksContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.2", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SkipLinksContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.4", 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: "20.0.2", ngImport: i0, type: SkipLinksContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SkipLinksContainerComponent, decorators: [{
             type: Component,
             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: "20.0.2", ngImport: i0, type: DfAccessibilityModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: DfAccessibilityModule, imports: [SkipLinkDirective, SkipLinksContainerComponent], exports: [SkipLinkDirective, SkipLinksContainerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfAccessibilityModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfAccessibilityModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: DfAccessibilityModule, imports: [SkipLinkDirective, SkipLinksContainerComponent], exports: [SkipLinkDirective, SkipLinksContainerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfAccessibilityModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfAccessibilityModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfAccessibilityModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SkipLinkDirective, SkipLinksContainerComponent],
@@ -81,7 +80,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
         }] });
 
 class DfInsertIconDirective {
-    constructor(el, renderer) {
+    constructor(
+    // eslint-disable-next-line @angular-eslint/prefer-inject
+    el, 
+    // eslint-disable-next-line @angular-eslint/prefer-inject
+    renderer) {
         this.el = el;
         this.renderer = renderer;
         this.supportedCmps = ['alert', 'toast'];
@@ -114,10 +117,10 @@ class DfInsertIconDirective {
         }
         return 'fa-info-circle';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", 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: "20.0.2", type: DfInsertIconDirective, isStandalone: true, selector: "ngb-alert[dfInsertAlertIcon],ngb-toast[dfInsertToastIcon]", host: { attributes: { "ngSkipHydration": "true" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", 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: "20.0.4", type: DfInsertIconDirective, isStandalone: true, selector: "ngb-alert[dfInsertAlertIcon],ngb-toast[dfInsertToastIcon]", host: { attributes: { "ngSkipHydration": "true" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfInsertIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfInsertIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ngb-alert[dfInsertAlertIcon],ngb-toast[dfInsertToastIcon]',
@@ -128,11 +131,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class DfInsertIconModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfInsertIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: DfInsertIconModule, imports: [DfInsertIconDirective], exports: [DfInsertIconDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfInsertIconModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfInsertIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: DfInsertIconModule, imports: [DfInsertIconDirective], exports: [DfInsertIconDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfInsertIconModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfInsertIconModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfInsertIconModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfInsertIconDirective],
@@ -141,11 +144,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
         }] });
 
 class DfToastModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: DfToastModule, imports: [DfInsertIconModule], exports: [NgbToastModule, DfInsertIconModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfToastModule, imports: [DfInsertIconModule, NgbToastModule, DfInsertIconModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: DfToastModule, imports: [DfInsertIconModule], exports: [NgbToastModule, DfInsertIconModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfToastModule, imports: [DfInsertIconModule, NgbToastModule, DfInsertIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfToastModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfToastModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfInsertIconModule],
@@ -154,11 +157,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
         }] });
 
 class DfAlertModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: DfAlertModule, imports: [DfInsertIconModule], exports: [NgbAlertModule, DfInsertIconModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfAlertModule, imports: [DfInsertIconModule, NgbAlertModule, DfInsertIconModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: DfAlertModule, imports: [DfInsertIconModule], exports: [NgbAlertModule, DfInsertIconModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfAlertModule, imports: [DfInsertIconModule, NgbAlertModule, DfInsertIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfAlertModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfAlertModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfInsertIconModule],
@@ -167,23 +170,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
         }] });
 
 class DfTriggerClickDirective {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
+    constructor() {
+        this.elementRef = inject(ElementRef);
     }
     triggerClick(event) {
         event.stopPropagation();
         event.preventDefault();
         this.elementRef.nativeElement.click();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfTriggerClickDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", 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: "20.0.4", ngImport: i0, type: DfTriggerClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", 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: "20.0.2", ngImport: i0, type: DfTriggerClickDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfTriggerClickDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfTriggerClick]'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { triggerClick: [{
+        }], propDecorators: { triggerClick: [{
                 type: HostListener,
                 args: ['keydown.enter', ['$event']]
             }, {
@@ -263,10 +266,10 @@ class DfInputIconDirective {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfInputIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.2", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfInputIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", 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: "20.0.2", ngImport: i0, type: DfInputIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfInputIconDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'dfInputIcon',
@@ -280,11 +283,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
         }] });
 
 class DfAdvancedInputModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfAdvancedInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: DfAdvancedInputModule, imports: [DfTriggerClickDirective, DfInputIconDirective], exports: [DfTriggerClickDirective, DfInputIconDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfAdvancedInputModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfAdvancedInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: DfAdvancedInputModule, imports: [DfTriggerClickDirective, DfInputIconDirective], exports: [DfTriggerClickDirective, DfInputIconDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfAdvancedInputModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfAdvancedInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfAdvancedInputModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfTriggerClickDirective, DfInputIconDirective],
@@ -321,10 +324,10 @@ class DfDatepickerKeyboardService extends NgbDatepickerKeyboardService {
         event.preventDefault();
         event.stopPropagation();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfDatepickerKeyboardService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfDatepickerKeyboardService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfDatepickerKeyboardService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfDatepickerKeyboardService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfDatepickerKeyboardService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfDatepickerKeyboardService, decorators: [{
             type: Injectable
         }] });
 
@@ -348,10 +351,10 @@ class DfDirectionDetectionService {
         }
         return RightToLeftDirectionEnum.LeftToRight;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfDirectionDetectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfDirectionDetectionService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfDirectionDetectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfDirectionDetectionService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfDirectionDetectionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfDirectionDetectionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -431,7 +434,7 @@ class DfDatepickerRangeDirective {
             }
         }
     }
-    ngDoCheck() {
+    ngAfterViewChecked() {
         // Update this to support disabled
         const currentStatus = this.inputsElements.reduce((prev, current) => prev || current.disabled, false);
         if (this.isDisabled !== currentStatus) {
@@ -449,10 +452,10 @@ class DfDatepickerRangeDirective {
     ngOnDestroy() {
         this.removeListener.forEach((item) => item());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfDatepickerRangeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", type: DfDatepickerRangeDirective, isStandalone: true, selector: "[dfDatepickerRange]", exportAs: ["dfDatepickerRange"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfDatepickerRangeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", type: DfDatepickerRangeDirective, isStandalone: true, selector: "[dfDatepickerRange]", exportAs: ["dfDatepickerRange"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfDatepickerRangeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfDatepickerRangeDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'dfDatepickerRange',
@@ -461,9 +464,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
         }] });
 
 class DfDatepickerRangeService {
-    constructor(calendar, formatter) {
-        this.calendar = calendar;
-        this.formatter = formatter;
+    constructor() {
         this.fromDate = null;
         this.toDate = null;
         this.hoveredDate = null;
@@ -473,6 +474,8 @@ class DfDatepickerRangeService {
         this.getFocusBack = null;
         this.isClosingOnToDate = true;
         this.datepicker = null;
+        this.calendar = inject(NgbCalendar);
+        this.formatter = inject(NgbDateParserFormatter);
     }
     onDateSelection(date) {
         if (!this.fromDate && !this.toDate) {
@@ -546,22 +549,22 @@ class DfDatepickerRangeService {
         this.toDate = this.parseInput(this.toDate, typed);
         this.toDateAsStr = this.formatter.format(this.toDate);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", 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: "20.0.2", ngImport: i0, type: DfDatepickerRangeService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfDatepickerRangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfDatepickerRangeService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfDatepickerRangeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", 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: "20.0.2", ngImport: i0, type: DfDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: DfDatePickerModule, imports: [NgbDropdownModule, DfDatepickerRangeDirective], exports: [NgbDatepickerModule, DfAdvancedInputModule, DfDatepickerRangeDirective, NgbDropdownModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfDatePickerModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: DfDatePickerModule, imports: [NgbDropdownModule, DfDatepickerRangeDirective], exports: [NgbDatepickerModule, DfAdvancedInputModule, DfDatepickerRangeDirective, NgbDropdownModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfDatePickerModule, providers: [
             { provide: NgbDatepickerKeyboardService, useClass: DfDatepickerKeyboardService },
             DfDatepickerRangeService
         ], imports: [NgbDropdownModule, NgbDatepickerModule, DfAdvancedInputModule, NgbDropdownModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfDatePickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfDatePickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [NgbDropdownModule, DfDatepickerRangeDirective],
@@ -590,10 +593,10 @@ const BREAKPOINTS_VARS = new InjectionToken('Bootstrap Breakpoints', {
     }
 });
 class DfBreakpoints {
-    constructor(_breakPointsVar, platformID) {
-        this._breakPointsVar = _breakPointsVar;
-        this.platformID = platformID;
+    constructor() {
         this._breakPoints$ = new BehaviorSubject(null);
+        this._breakPointsVar = inject(BREAKPOINTS_VARS);
+        this.platformID = inject(PLATFORM_ID);
         this.initBreakpoints();
     }
     get breakPoints$() {
@@ -657,22 +660,16 @@ class DfBreakpoints {
         }
         return dict;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", 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: "20.0.2", ngImport: i0, type: DfBreakpoints, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfBreakpoints, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfBreakpoints, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfBreakpoints, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfBreakpoints, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [BREAKPOINTS_VARS]
-                }] }, { type: Object, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }] });
+        }], ctorParameters: () => [] });
 class DfMediaQuery {
-    constructor(platformId) {
-        this._isBrowser = isPlatformBrowser(platformId);
+    constructor() {
+        this._isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
     }
     notSupported(query) {
         return { matches: false, media: query, addEventListener: () => { }, removeEventListener: () => { } };
@@ -685,21 +682,18 @@ class DfMediaQuery {
             return this.notSupported(query);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfMediaQuery, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfMediaQuery, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfMediaQuery, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfMediaQuery, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfMediaQuery, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfMediaQuery, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: Object, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }] });
+        }] });
 class DfMediaObserver {
-    constructor(_mediaQuery) {
-        this._mediaQuery = _mediaQuery;
+    constructor() {
         this._subscription = new Subscription();
         this._queries = new Map();
+        this._mediaQuery = inject(DfMediaQuery);
     }
     /**
      * Verifies if at least one of the provided media-queries is matching
@@ -707,7 +701,7 @@ class DfMediaObserver {
      */
     matches(queries) {
         queries = this._flattenQueries(Array.isArray(queries) ? queries : [queries]);
-        return queries.some(q => this._registerQuery(q).mediaQueryList.matches);
+        return queries.some((q) => this._registerQuery(q).mediaQueryList.matches);
     }
     /**
      * Produces an observable for a set of media-queries that will emit
@@ -717,7 +711,7 @@ class DfMediaObserver {
      */
     observe(queries) {
         queries = this._flattenQueries(Array.isArray(queries) ? queries : [queries]);
-        return combineLatest(queries.map(q => this._registerQuery(q).mediaQueryList$)).pipe(map((events) => events.reduce((result, event) => {
+        return combineLatest(queries.map((q) => this._registerQuery(q).mediaQueryList$)).pipe(map((events) => events.reduce((result, event) => {
             result.matches = result.matches || event.matches;
             result.breakpoints[event.media] = event.matches;
             return result;
@@ -727,7 +721,7 @@ class DfMediaObserver {
         this._subscription.unsubscribe();
     }
     _flattenQueries(queries) {
-        return queries.map(q => q.split(',')).reduce((flat, a) => flat.concat(a));
+        return queries.map((q) => q.split(',')).reduce((flat, a) => flat.concat(a));
     }
     _registerQuery(query) {
         if (this._queries.has(query)) {
@@ -745,22 +739,22 @@ class DfMediaObserver {
         this._queries.set(query, meta);
         return meta;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfMediaObserver, deps: [{ token: DfMediaQuery }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfMediaObserver, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfMediaObserver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfMediaObserver, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfMediaObserver, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfMediaObserver, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: DfMediaQuery }] });
+        }] });
 
 /**
  * Services you can use to get indication about the current width screen of your application
  * the matchMedia JS feature (https://developer.mozilla.org/fr/docs/Web/API/Window/matchMedia)
  */
 class DfMedia {
-    constructor(mediaObserver, _breakPointsService) {
-        this.mediaObserver = mediaObserver;
-        this._breakPointsService = _breakPointsService;
+    constructor() {
+        this.mediaObserver = inject(DfMediaObserver);
+        this._breakPointsService = inject(DfBreakpoints);
     }
     initQueries(mediaOrBreakpoints, breakPoints = {}) {
         const queries = [];
@@ -781,19 +775,19 @@ class DfMedia {
      * string/Array of string of the breakpoints name (sm...).
      */
     getObservable(mediaOrBreakpoints) {
-        return this._breakPointsService.breakPoints$.pipe(map(breakpoints => {
+        return this._breakPointsService.breakPoints$.pipe(map((breakpoints) => {
             return breakpoints ? this.initQueries(mediaOrBreakpoints, breakpoints) : this.initQueries(mediaOrBreakpoints);
-        }), switchMap(query => {
+        }), switchMap((query) => {
             return this.mediaObserver.observe(query);
-        }), map(value => value.matches), distinctUntilChanged());
+        }), map((value) => value.matches), distinctUntilChanged());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfMedia, deps: [{ token: DfMediaObserver }, { token: DfBreakpoints }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfMedia, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfMedia, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfMedia, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfMedia, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfMedia, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: DfMediaObserver }, { type: DfBreakpoints }] });
+        }] });
 
 /**
  * Directive using the matchMedia JS feature (https://developer.mozilla.org/fr/docs/Web/API/Window/matchMedia)
@@ -835,20 +829,20 @@ class DfIfMediaDirective {
             this._viewInstance = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfIfMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.2", type: DfIfMediaDirective, isStandalone: true, selector: "[dfIfMedia]", inputs: { dfIfMedia: { classPropertyName: "dfIfMedia", publicName: "dfIfMedia", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfIfMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", 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: "20.0.2", ngImport: i0, type: DfIfMediaDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfIfMediaDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[dfIfMedia]' }]
         }], ctorParameters: () => [] });
 
 class DfMediaModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfMediaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: DfMediaModule, imports: [DfIfMediaDirective], exports: [DfIfMediaDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfMediaModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfMediaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: DfMediaModule, imports: [DfIfMediaDirective], exports: [DfIfMediaDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfMediaModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfMediaModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfMediaModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfIfMediaDirective],
@@ -857,11 +851,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
         }] });
 
 class DfFooterModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfFooterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: DfFooterModule, imports: [DfMediaModule, NgbAccordionModule], exports: [DfMediaModule, NgbAccordionModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfFooterModule, imports: [DfMediaModule, NgbAccordionModule, DfMediaModule, NgbAccordionModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfFooterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: DfFooterModule, imports: [DfMediaModule, NgbAccordionModule], exports: [DfMediaModule, NgbAccordionModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfFooterModule, imports: [DfMediaModule, NgbAccordionModule, DfMediaModule, NgbAccordionModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfFooterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfFooterModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfMediaModule, NgbAccordionModule],
@@ -870,8 +864,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
         }] });
 
 class DfAmadeusIconComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfAmadeusIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: DfAmadeusIconComponent, isStandalone: true, selector: "df-amadeus-icon", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfAmadeusIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: DfAmadeusIconComponent, isStandalone: true, selector: "df-amadeus-icon", ngImport: i0, template: `
     <svg
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
@@ -907,7 +901,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"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfAmadeusIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfAmadeusIconComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'df-amadeus-icon', template: `
     <svg
@@ -947,11 +941,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
         }] });
 
 class DfIconModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: DfIconModule, imports: [DfAmadeusIconComponent], exports: [DfAmadeusIconComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfIconModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: DfIconModule, imports: [DfAmadeusIconComponent], exports: [DfAmadeusIconComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfIconModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfIconModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfIconModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfAmadeusIconComponent],
@@ -964,10 +958,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
  * 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;
-        this.rendererFactory = rendererFactory;
-        this.renderer = this.rendererFactory.createRenderer(null, null);
+    constructor() {
+        this.renderer = inject(RendererFactory2).createRenderer(null, null);
+        this.modalService = inject(NgbModal);
     }
     open(content, options) {
         let modalRef;
@@ -986,34 +979,34 @@ class DfModalService {
         });
         return modalRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", 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: "20.0.2", ngImport: i0, type: DfModalService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfModalService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfModalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfModalService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1.NgbModal }, { type: i0.RendererFactory2 }] });
+        }] });
 
 class DfPopoverConfig extends NgbPopoverConfig {
     constructor() {
         super(...arguments);
         this.autoClose = 'outside';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfPopoverConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfPopoverConfig }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfPopoverConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfPopoverConfig }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfPopoverConfig, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfPopoverConfig, decorators: [{
             type: Injectable
         }] });
 
 class DfPopoverModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: DfPopoverModule, exports: [NgbPopoverModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfPopoverModule, providers: [{ provide: NgbPopoverConfig, useClass: DfPopoverConfig }], imports: [NgbPopoverModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: DfPopoverModule, exports: [NgbPopoverModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfPopoverModule, providers: [{ provide: NgbPopoverConfig, useClass: DfPopoverConfig }], imports: [NgbPopoverModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfPopoverModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfPopoverModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [NgbPopoverModule],
@@ -1142,20 +1135,20 @@ class DfProgressbarComponent {
     resetProgressBarValues() {
         this.innerValue.set(0);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfProgressbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", 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", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfProgressbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", 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", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfProgressbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfProgressbarComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, 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: "20.0.2", ngImport: i0, type: DfProgressbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: DfProgressbarModule, imports: [DfProgressbarComponent], exports: [DfProgressbarComponent, NgbProgressbarModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfProgressbarModule, imports: [NgbProgressbarModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfProgressbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: DfProgressbarModule, imports: [DfProgressbarComponent], exports: [DfProgressbarComponent, NgbProgressbarModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfProgressbarModule, imports: [NgbProgressbarModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfProgressbarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfProgressbarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfProgressbarComponent],
@@ -1206,10 +1199,10 @@ class DfProgressIndicatorContainerComponent {
         });
         this.classes = computed(() => `df-progressindicator-container ${this.containerClass() || ''} ${this.positionClass()}`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfProgressIndicatorContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.2", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfProgressIndicatorContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", 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: "20.0.2", ngImport: i0, type: DfProgressIndicatorContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfProgressIndicatorContainerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'df-progressindicator-container',
@@ -1228,10 +1221,10 @@ class DfDefaultSpinnerComponent {
         this.contentClass = input('spinner-border text-primary');
         this.ariaLabel = input();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfDefaultSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfDefaultSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", 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: "20.0.2", ngImport: i0, type: DfDefaultSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfDefaultSpinnerComponent, decorators: [{
             type: Component,
             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" }]
         }] });
@@ -1242,10 +1235,10 @@ class DfProgressIndicatorBackdropComponent {
         this.isGlobalBackdrop = input(true);
         this.classes = computed(() => `df-progressindicator-backdrop ${this.backdropClass() || ''} df-progressindicator-backdrop${this.isGlobalBackdrop() ? '-global' : '-contextual'}`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfProgressIndicatorBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.2", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfProgressIndicatorBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", 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: "20.0.2", ngImport: i0, type: DfProgressIndicatorBackdropComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfProgressIndicatorBackdropComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'df-progressindicator-backdrop',
@@ -1275,8 +1268,8 @@ const noop$1 = () => { };
  * It is a copy of https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/util/scrollbar.ts
  */
 class ScrollBar {
-    constructor(_document) {
-        this._document = _document;
+    constructor() {
+        this._document = inject(DOCUMENT);
     }
     /**
      * To be called right before a potential vertical scrollbar would be removed:
@@ -1330,25 +1323,17 @@ class ScrollBar {
         body.removeChild(measurer);
         return width;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ScrollBar, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ScrollBar, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScrollBar, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScrollBar, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ScrollBar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScrollBar, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }] });
+        }] });
 
 class DfProgressIndicatorService {
-    constructor(document, rendererFactory, componentFactoryResolver, appRef, injector, scrollbar) {
-        this.document = document;
-        this.rendererFactory = rendererFactory;
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.appRef = appRef;
-        this.injector = injector;
-        this.scrollbar = scrollbar;
+    constructor() {
+        this.renderer = inject(RendererFactory2).createRenderer(null, null);
         this.BODY_CLASS = 'df-progressindicator-open';
         // TODO - Remove it when https://github.com/angular/angular/issues/22567
         this.containerAttributes = ['containerClass', 'position'];
@@ -1356,7 +1341,10 @@ class DfProgressIndicatorService {
         this.defaultSpinnerAttributes = ['contentClass', 'ariaLabel', 'isGlobalSpinner'];
         this.defaultProgressBarAttributes = ['infiniteAnimation', 'ariaLabel'];
         this.activeInstances = [];
-        this.renderer = this.rendererFactory.createRenderer(null, null);
+        this.document = inject(DOCUMENT);
+        this.appRef = inject(ApplicationRef);
+        this.environmentInjector = inject(EnvironmentInjector);
+        this.scrollbar = inject(ScrollBar);
     }
     open(content, options) {
         const containerElt = this.getContainer(this.document, options);
@@ -1365,10 +1353,10 @@ class DfProgressIndicatorService {
         }
         // Create needed components
         const backdropRef = options?.backdrop !== false
-            ? this.createComponent(DfProgressIndicatorBackdropComponent, this.componentFactoryResolver, undefined, containerElt)
+            ? this.createComponent(DfProgressIndicatorBackdropComponent, undefined, containerElt)
             : undefined;
-        const contentRef = this.getContent(content, this.componentFactoryResolver, containerElt);
-        const containerCmpRef = this.createComponent(DfProgressIndicatorContainerComponent, this.componentFactoryResolver, contentRef, containerElt);
+        const contentRef = this.getContent(content, containerElt);
+        const containerCmpRef = this.createComponent(DfProgressIndicatorContainerComponent, contentRef, containerElt);
         const onDestroyOperations = [];
         // Add aria attributes on the container
         this.renderer.setAttribute(containerElt, 'aria-busy', 'true');
@@ -1436,12 +1424,12 @@ class DfProgressIndicatorService {
         }
         return options?.container ? document.querySelector(options.container) : document.body;
     }
-    getContent(content, cfr, container) {
+    getContent(content, container) {
         if (!content) {
-            return this.createComponent(DfDefaultSpinnerComponent, cfr);
+            return this.createComponent(DfDefaultSpinnerComponent);
         }
         else if (content instanceof DfProgressIndicatorContentSpinner) {
-            const cmpRef = this.createComponent(DfDefaultSpinnerComponent, cfr);
+            const cmpRef = this.createComponent(DfDefaultSpinnerComponent);
             this.applyOptions(cmpRef, this.defaultSpinnerAttributes, {
                 ...content.spinnerInput,
                 isGlobalSpinner: container === this.document.body
@@ -1449,7 +1437,7 @@ class DfProgressIndicatorService {
             return cmpRef;
         }
         else if (content instanceof DfProgressIndicatorContentProgressBar) {
-            const cmpRef = this.createComponent(DfProgressbarComponent, cfr);
+            const cmpRef = this.createComponent(DfProgressbarComponent);
             this.applyOptions(cmpRef, this.defaultProgressBarAttributes, {
                 ...content.progressBarInput,
                 infiniteAnimation: true
@@ -1462,22 +1450,29 @@ class DfProgressIndicatorService {
             return viewRef;
         }
         else {
-            return this.createComponent(content, cfr);
+            return this.createComponent(content);
         }
     }
-    createComponent(cmpType, cfr, childrenProjectables, container) {
-        const cmpFactory = cfr.resolveComponentFactory(cmpType);
+    createComponent(cmpType, childrenProjectables, container) {
         let cmpRef;
         if (childrenProjectables) {
             if (childrenProjectables instanceof ComponentRef) {
-                cmpRef = cmpFactory.create(this.injector, [[childrenProjectables.location.nativeElement]]);
+                cmpRef = createComponent(cmpType, {
+                    environmentInjector: this.environmentInjector,
+                    projectableNodes: [[childrenProjectables.location.nativeElement]]
+                });
             }
             else {
-                cmpRef = cmpFactory.create(this.injector, [childrenProjectables.rootNodes]);
+                cmpRef = createComponent(cmpType, {
+                    environmentInjector: this.environmentInjector,
+                    projectableNodes: [childrenProjectables.rootNodes]
+                });
             }
         }
         else {
-            cmpRef = cmpFactory.create(this.injector);
+            cmpRef = createComponent(cmpType, {
+                environmentInjector: this.environmentInjector
+            });
         }
         this.appRef.attachView(cmpRef.hostView);
         if (container) {
@@ -1495,18 +1490,15 @@ class DfProgressIndicatorService {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", 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: "20.0.2", ngImport: i0, type: DfProgressIndicatorService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfProgressIndicatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfProgressIndicatorService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfProgressIndicatorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfProgressIndicatorService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.RendererFactory2 }, { type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }, { type: i0.Injector }, { type: ScrollBar }] });
+        }] });
 
 class DfProgressIndicatorDirective {
     constructor() {
@@ -1529,10 +1521,10 @@ class DfProgressIndicatorDirective {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfProgressIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.2", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfProgressIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", 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: "20.0.2", ngImport: i0, type: DfProgressIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfProgressIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfProgressIndicator]'
@@ -1540,8 +1532,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
         }], ctorParameters: () => [] });
 
 class DfProgressIndicatorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfProgressIndicatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: DfProgressIndicatorModule, imports: [DfDefaultSpinnerComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfProgressIndicatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: DfProgressIndicatorModule, imports: [DfDefaultSpinnerComponent,
             DfProgressbarModule,
             DfProgressIndicatorBackdropComponent,
             DfProgressIndicatorContainerComponent,
@@ -1550,9 +1542,9 @@ class DfProgressIndicatorModule {
             DfProgressIndicatorDirective,
             DfProgressIndicatorBackdropComponent,
             DfDefaultSpinnerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfProgressIndicatorModule, imports: [DfProgressbarModule, DfProgressbarModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfProgressIndicatorModule, imports: [DfProgressbarModule, DfProgressbarModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfProgressIndicatorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfProgressIndicatorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1590,10 +1582,10 @@ class DfSliderDirectionDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSliderDirectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.2", type: DfSliderDirectionDirective, isStandalone: true, selector: "[dfSliderDirection]", inputs: { dfSliderDirection: { classPropertyName: "dfSliderDirection", publicName: "dfSliderDirection", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSliderDirectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", 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: "20.0.2", ngImport: i0, type: DfSliderDirectionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSliderDirectionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfSliderDirection]'
@@ -1894,6 +1886,7 @@ class EventListenerHelper {
     }
 }
 
+/* eslint-disable @angular-eslint/prefer-inject */
 /**
  * @deprecated SliderElementDirective is deprecated. Use {@link https://design-factory.amadeus.net/components/slider/agnosui AgnosUI Slider} instead.
  */
@@ -2056,10 +2049,10 @@ class SliderElementDirective {
     isRefDestroyed() {
         return (ValueHelper.isNullOrUndefined(this.changeDetectionRef) || this.changeDetectionRef['destroyed']);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", 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: "20.0.2", 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: "20.0.4", 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: "20.0.4", 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: "20.0.2", ngImport: i0, type: SliderElementDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SliderElementDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -2092,6 +2085,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
  * @deprecated SliderHandleDirective is deprecated. Use {@link https://design-factory.amadeus.net/components/slider/agnosui AgnosUI Slider} instead.
  */
 class SliderHandleDirective extends SliderElementDirective {
+    // eslint-disable-next-line @angular-eslint/prefer-inject
     constructor(elemRef, renderer, changeDetectionRef) {
         super(elemRef, renderer, changeDetectionRef);
         this.active = false;
@@ -2108,10 +2102,10 @@ class SliderHandleDirective extends SliderElementDirective {
     focus() {
         this.elemRef.nativeElement.focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", 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: "20.0.2", 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: "20.0.4", 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: "20.0.4", 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: "20.0.2", ngImport: i0, type: SliderHandleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SliderHandleDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -2156,6 +2150,7 @@ class SliderLabelDirective extends SliderElementDirective {
     get value() {
         return this._value || '';
     }
+    // eslint-disable-next-line @angular-eslint/prefer-inject
     constructor(elemRef, renderer, changeDetectionRef) {
         super(elemRef, renderer, changeDetectionRef);
     }
@@ -2174,10 +2169,10 @@ class SliderLabelDirective extends SliderElementDirective {
             this.calculateDimension();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", 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: "20.0.2", type: SliderLabelDirective, isStandalone: true, selector: "[ngxSliderLabel]", usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", 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: "20.0.4", type: SliderLabelDirective, isStandalone: true, selector: "[ngxSliderLabel]", usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: SliderLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SliderLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -2190,10 +2185,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
  * @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: "20.0.2", ngImport: i0, type: TooltipWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", 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: "20.0.4", ngImport: i0, type: TooltipWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", 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: "20.0.2", ngImport: i0, type: TooltipWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TooltipWrapperComponent, decorators: [{
             type: Component,
             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: [{
@@ -2206,6 +2201,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
                 type: Input
             }] } });
 
+/* eslint-disable @angular-eslint/prefer-inject */
 /* eslint-disable @angular-eslint/prefer-signals */
 class Tick {
     constructor() {
@@ -4100,10 +4096,10 @@ class SliderComponent {
         }
         return changeContext;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", 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: "20.0.2", 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: "20.0.4", 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: "20.0.4", 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.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: "20.0.2", ngImport: i0, type: SliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
             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: [{
@@ -4193,16 +4189,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
  * 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: "20.0.2", ngImport: i0, type: DfSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: DfSliderModule, imports: [SliderComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: DfSliderModule, imports: [SliderComponent,
             SliderElementDirective,
             SliderHandleDirective,
             SliderLabelDirective,
             TooltipWrapperComponent,
             DfSliderDirectionDirective], exports: [DfSliderDirectionDirective, SliderComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSliderModule, imports: [SliderComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSliderModule, imports: [SliderComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSliderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSliderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -4232,10 +4228,10 @@ class DfSideNavConfig {
         this.isAppOverlay = false;
         this.isAppOverlayMode = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSideNavConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSideNavConfig, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSideNavConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSideNavConfig, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSideNavConfig, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSideNavConfig, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -4258,19 +4254,19 @@ var DfNavItemType;
  * Creating a sidenav is straightforward: use [DfSideNavComponent](#/components/sidenav/api#DfSideNavComponent) component
  */
 class DfSideNavService {
-    constructor(config) {
-        this.config = config;
+    constructor() {
         this.type = DfNavItemType;
-        this._items = [];
-        this.subscription = new Subscription();
+        this.config = inject(DfSideNavConfig);
         this._sideNavItems$ = new BehaviorSubject([]);
-        this._isMinmized$ = new BehaviorSubject(config.isMinmized);
-        this._isCollapsed$ = new BehaviorSubject(config.isCollapsed);
-        this._isPresent$ = new BehaviorSubject(config.isPresent);
-        this._isInMenuOverlay$ = new BehaviorSubject(config.isInMenuOverlay);
-        this._isAppOverlay$ = new BehaviorSubject(config.isAppOverlay);
+        this._isMinmized$ = new BehaviorSubject(this.config.isMinmized);
+        this._isCollapsed$ = new BehaviorSubject(this.config.isCollapsed);
+        this._isPresent$ = new BehaviorSubject(this.config.isPresent);
         this._activeItem$ = new BehaviorSubject(null);
-        this._isAppOverlayMode = config.isAppOverlayMode;
+        this._isInMenuOverlay$ = new BehaviorSubject(this.config.isInMenuOverlay);
+        this._isAppOverlay$ = new BehaviorSubject(this.config.isAppOverlay);
+        this._isAppOverlayMode = this.config.isAppOverlayMode;
+        this._items = [];
+        this.subscription = new Subscription();
         this.subscription.add(this._isCollapsed$.subscribe(() => {
             this.updateOverLay();
         }));
@@ -4542,15 +4538,15 @@ class DfSideNavService {
     updateOverLay() {
         this._isAppOverlay$.next(this.isAppOverlayMode && this._isCollapsed$.value === false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSideNavService, deps: [{ token: DfSideNavConfig }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSideNavService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSideNavService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSideNavService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSideNavService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSideNavService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: DfSideNavConfig }] });
+        }], ctorParameters: () => [] });
 
 const environment = {
     animation: true,
@@ -4665,8 +4661,8 @@ const ngbCompleteTransition = (element) => {
  * to provide default values for the sideNav used in the application.
  */
 class DfSideNavCollapseConfig {
-    constructor(_ngbConfig) {
-        this._ngbConfig = _ngbConfig;
+    constructor() {
+        this._ngbConfig = inject(NgbConfig);
     }
     get animation() {
         return this._animation === undefined ? this._ngbConfig.animation : this._animation;
@@ -4674,13 +4670,13 @@ class DfSideNavCollapseConfig {
     set animation(animation) {
         this._animation = animation;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSideNavCollapseConfig, deps: [{ token: i1.NgbConfig }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSideNavCollapseConfig, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSideNavCollapseConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSideNavCollapseConfig, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSideNavCollapseConfig, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSideNavCollapseConfig, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1.NgbConfig }] });
+        }] });
 
 /**
  * A service for managing the sidenav panel animation.
@@ -4689,9 +4685,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
  * 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);
+    constructor() {
+        this._sideNavAnimation$ = new BehaviorSubject(inject(DfSideNavCollapseConfig).animation);
     }
     get sideNavAnimation$() {
         return this._sideNavAnimation$.asObservable();
@@ -4705,15 +4700,15 @@ class DfSideNavCollapseService {
     setAnimation(on) {
         this._sideNavAnimation$.next(on);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSideNavCollapseService, deps: [{ token: DfSideNavCollapseConfig }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSideNavCollapseService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSideNavCollapseService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSideNavCollapseService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSideNavCollapseService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSideNavCollapseService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: DfSideNavCollapseConfig }] });
+        }] });
 
 function measureCollapsingElementWidthPx(element) {
     // SSR fix for without injecting the PlatformId
@@ -4868,20 +4863,20 @@ class DfSideNavCollapseDirective {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSideNavCollapseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.2", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSideNavCollapseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", 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: "20.0.2", ngImport: i0, type: DfSideNavCollapseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSideNavCollapseDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[dfSideNavCollapse]', exportAs: 'dfSideNavCollapse' }]
         }], ctorParameters: () => [] });
 
 class DfSideNavCollapseModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSideNavCollapseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: DfSideNavCollapseModule, imports: [DfSideNavCollapseDirective], exports: [DfSideNavCollapseDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSideNavCollapseModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSideNavCollapseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: DfSideNavCollapseModule, imports: [DfSideNavCollapseDirective], exports: [DfSideNavCollapseDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSideNavCollapseModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSideNavCollapseModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSideNavCollapseModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfSideNavCollapseDirective],
@@ -4890,9 +4885,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
         }] });
 
 class DfManageSideNavDirective {
-    constructor(element, renderer) {
-        this.element = element;
-        this.renderer = renderer;
+    constructor() {
+        this.element = inject(ElementRef);
+        this.renderer = inject(Renderer2);
     }
     ngAfterViewChecked() {
         if (this.element.nativeElement.querySelector('.active')) {
@@ -4902,15 +4897,15 @@ class DfManageSideNavDirective {
             this.renderer.removeClass(this.element.nativeElement, 'df-sidenav-list-withactivated');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", 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: "20.0.2", type: DfManageSideNavDirective, isStandalone: true, selector: "[dfManageSideNav]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfManageSideNavDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", type: DfManageSideNavDirective, isStandalone: true, selector: "[dfManageSideNav]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfManageSideNavDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfManageSideNavDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfManageSideNav]'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
+        }] });
 
 class DfOverflowService {
     /**
@@ -4934,10 +4929,10 @@ class DfOverflowService {
     hasOverflowY(element) {
         return element.offsetHeight < element.scrollHeight;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfOverflowService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfOverflowService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfOverflowService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfOverflowService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfOverflowService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfOverflowService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -4968,10 +4963,10 @@ class DfTitleTruncateDirective {
             nativeElement.removeAttribute(titleAttributeName);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfTitleTruncateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", type: DfTitleTruncateDirective, isStandalone: true, selector: "[dfTitleTruncate]", exportAs: ["dfTitleTruncate"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfTitleTruncateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", type: DfTitleTruncateDirective, isStandalone: true, selector: "[dfTitleTruncate]", exportAs: ["dfTitleTruncate"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfTitleTruncateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfTitleTruncateDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'dfTitleTruncate',
@@ -5005,10 +5000,10 @@ class DfSideNavListComponent {
         uniqueId++;
         return `df-sidenav-id-${uniqueId};`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSideNavListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", 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 [class]=\"item.class\" 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSideNavListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", 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 [class]=\"item.class\" 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$1.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: "20.0.2", ngImport: i0, type: DfSideNavListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSideNavListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'df-sidenavlist', imports: [
                         NgTemplateOutlet,
@@ -5022,38 +5017,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
         }] });
 
 class DfSideNavHeaderDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
+    constructor() {
+        this.templateRef = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSideNavHeaderDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", type: DfSideNavHeaderDirective, isStandalone: true, selector: "ng-template[dfSideNavHeader]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSideNavHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", type: DfSideNavHeaderDirective, isStandalone: true, selector: "ng-template[dfSideNavHeader]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSideNavHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSideNavHeaderDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[dfSideNavHeader]' }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+        }] });
 class DfSideNavIconDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
+    constructor() {
+        this.templateRef = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSideNavIconDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", type: DfSideNavIconDirective, isStandalone: true, selector: "ng-template[dfSideNavIcon]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSideNavIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", type: DfSideNavIconDirective, isStandalone: true, selector: "ng-template[dfSideNavIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSideNavIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSideNavIconDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[dfSideNavIcon]' }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+        }] });
 class DfSideNavItemDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
+    constructor() {
+        this.templateRef = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSideNavItemDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", type: DfSideNavItemDirective, isStandalone: true, selector: "ng-template[dfSideNavItem]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSideNavItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", type: DfSideNavItemDirective, isStandalone: true, selector: "ng-template[dfSideNavItem]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSideNavItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSideNavItemDirective, decorators: [{
             type: Directive,
             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
  *
@@ -5083,10 +5078,10 @@ class DfSideNavComponent {
     ngOnDestroy() {
         this.sideNavService.removeSideBar();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSideNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSideNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DfSideNavListComponent, selector: "df-sidenavlist", inputs: ["items", "tplIcon", "tplItem", "currentItem", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSideNavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSideNavComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'df-sidenav', imports: [CommonModule, DfSideNavListComponent], host: {
                         '[class]': 'classes()'
@@ -5141,10 +5136,10 @@ class DfExcludeTrapDirective {
             this.subscriptionInput.unsubscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfExcludeTrapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.2", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfExcludeTrapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", 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: "20.0.2", ngImport: i0, type: DfExcludeTrapDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfExcludeTrapDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfExcludeTrap]'
@@ -5154,11 +5149,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
 const DF_SELECT_CLASS = 'df-ym';
 
 class DfManageNavSelectDirective {
-    constructor(select, element, rtlDirectionService, renderer) {
-        this.select = select;
-        this.element = element;
-        this.rtlDirectionService = rtlDirectionService;
-        this.renderer = renderer;
+    constructor() {
+        this.select = inject(NgSelectComponent, { host: true });
+        this.element = inject(ElementRef);
+        this.rtlDirectionService = inject(DfDirectionDetectionService);
+        this.renderer = inject(Renderer2);
     }
     ngOnInit() {
         this.direction = this.rtlDirectionService.getPageDirection(this.element);
@@ -5233,17 +5228,15 @@ class DfManageNavSelectDirective {
             (listBadge[currentPos - 1] || document.activeElement).focus();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", 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: "20.0.2", 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: "20.0.4", ngImport: i0, type: DfManageNavSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", 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: "20.0.2", ngImport: i0, type: DfManageNavSelectDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfManageNavSelectDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfManageNavSelect]'
                 }]
-        }], ctorParameters: () => [{ type: i1$2.NgSelectComponent, decorators: [{
-                    type: Host
-                }] }, { type: i0.ElementRef }, { type: DfDirectionDetectionService }, { type: i0.Renderer2 }], propDecorators: { handleKeyDown: [{
+        }], propDecorators: { handleKeyDown: [{
                 type: HostListener,
                 args: ['keydown.arrowLeft', ['$event']]
             }], handleKeyDownBackspace: [{
@@ -5282,10 +5275,10 @@ class DfOptionHighlightDirective {
     setInnerHtml(html) {
         this.renderer.setProperty(this.elementRef.nativeElement, 'innerHTML', html);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfOptionHighlightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.2", type: DfOptionHighlightDirective, isStandalone: true, selector: "[dfOptionHighlight]", inputs: { dfOptionHighlight: { classPropertyName: "dfOptionHighlight", publicName: "dfOptionHighlight", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfOptionHighlightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", 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: "20.0.2", ngImport: i0, type: DfOptionHighlightDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfOptionHighlightDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfOptionHighlight]'
@@ -5326,10 +5319,10 @@ class DfManageBadgeEventsDirective {
         this.dfManageBadgeEventsSelect()[0](this.dfManageBadgeEventsSelect()[1]);
         event.stopPropagation();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfManageBadgeEventsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.2", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfManageBadgeEventsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", 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: "20.0.2", ngImport: i0, type: DfManageBadgeEventsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfManageBadgeEventsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfManageBadgeEventsSelect]',
@@ -5344,11 +5337,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
         }], ctorParameters: () => [] });
 
 class DfSelectModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: DfSelectModule, imports: [DfManageNavSelectDirective, DfManageBadgeEventsDirective, DfOptionHighlightDirective], exports: [DfManageNavSelectDirective, DfManageBadgeEventsDirective, DfOptionHighlightDirective, NgSelectModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSelectModule, imports: [NgSelectModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: DfSelectModule, imports: [DfManageNavSelectDirective, DfManageBadgeEventsDirective, DfOptionHighlightDirective], exports: [DfManageNavSelectDirective, DfManageBadgeEventsDirective, DfOptionHighlightDirective, NgSelectModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSelectModule, imports: [NgSelectModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfManageNavSelectDirective, DfManageBadgeEventsDirective, DfOptionHighlightDirective],
@@ -5567,10 +5560,10 @@ class DfStepperService {
         this._state = this.normalizeState(this._state);
         this.dispatchStepperState();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfStepperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfStepperService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfStepperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfStepperService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfStepperService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfStepperService, decorators: [{
             type: Injectable
         }] });
 
@@ -5602,10 +5595,10 @@ class DfStepperStepDirective {
     ngOnDestroy() {
         this.unlistener.forEach((ul) => ul());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfStepperStepDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", type: DfStepperStepDirective, isStandalone: true, selector: "[dfStepperStep]", exportAs: ["dfStepperStep"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfStepperStepDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", type: DfStepperStepDirective, isStandalone: true, selector: "[dfStepperStep]", exportAs: ["dfStepperStep"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfStepperStepDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfStepperStepDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfStepperStep]',
@@ -5713,10 +5706,10 @@ class DfStepperDirective {
             this.stepperService.resetFocus();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfStepperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", 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: "20.0.4", ngImport: i0, type: DfStepperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", 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: "20.0.2", ngImport: i0, type: DfStepperDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfStepperDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfStepperLogic]',
@@ -5751,10 +5744,10 @@ class DfStepperStepContentDirective {
          */
         this.dfStepperStepContent = input(-1, { transform: (value) => numberAttribute(value, -1) });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfStepperStepContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.2", type: DfStepperStepContentDirective, isStandalone: true, selector: "ng-template[dfStepperStepContent]", inputs: { dfStepperStepContent: { classPropertyName: "dfStepperStepContent", publicName: "dfStepperStepContent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfStepperStepContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", 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: "20.0.2", ngImport: i0, type: DfStepperStepContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfStepperStepContentDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[dfStepperStepContent]' }]
         }] });
@@ -5781,10 +5774,10 @@ class DfStepperComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", 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 || state.isVertical\"\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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", 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 || state.isVertical\"\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: "20.0.2", ngImport: i0, type: DfStepperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfStepperComponent, decorators: [{
             type: Component,
             args: [{ selector: '[dfStepper]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [DfStepperStepDirective, NgTemplateOutlet, AsyncPipe], hostDirectives: [DfStepperDirective], host: {
                         role: 'tablist',
@@ -5796,11 +5789,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
         }], ctorParameters: () => [] });
 
 class DfStepperModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: DfStepperModule, imports: [DfStepperDirective, DfStepperStepDirective, DfStepperComponent, DfStepperStepContentDirective], exports: [DfStepperDirective, DfStepperStepDirective, DfStepperComponent, DfStepperStepContentDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfStepperModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: DfStepperModule, imports: [DfStepperDirective, DfStepperStepDirective, DfStepperComponent, DfStepperStepContentDirective], exports: [DfStepperDirective, DfStepperStepDirective, DfStepperComponent, DfStepperStepContentDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfStepperModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfStepperModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfStepperModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfStepperDirective, DfStepperStepDirective, DfStepperComponent, DfStepperStepContentDirective],
@@ -5863,10 +5856,10 @@ class DfTooltipTruncateDirective {
         this.tooltip.disableTooltip = disableToolTip;
         this.renderer.setAttribute(this.elementRef.nativeElement, 'tabIndex', disableToolTip ? '-1' : '0');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfTooltipTruncateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.2", type: DfTooltipTruncateDirective, isStandalone: true, selector: "[dfTooltipTruncate]", inputs: { dfTooltipTruncate: { classPropertyName: "dfTooltipTruncate", publicName: "dfTooltipTruncate", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["dfTooltipTruncate"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfTooltipTruncateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", type: DfTooltipTruncateDirective, isStandalone: true, selector: "[dfTooltipTruncate]", inputs: { dfTooltipTruncate: { classPropertyName: "dfTooltipTruncate", publicName: "dfTooltipTruncate", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["dfTooltipTruncate"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfTooltipTruncateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfTooltipTruncateDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'dfTooltipTruncate',
@@ -5875,11 +5868,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
         }] });
 
 class DfTooltipModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: DfTooltipModule, imports: [DfTooltipTruncateDirective], exports: [DfTooltipTruncateDirective, NgbTooltipModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfTooltipModule, imports: [NgbTooltipModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: DfTooltipModule, imports: [DfTooltipTruncateDirective], exports: [DfTooltipTruncateDirective, NgbTooltipModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfTooltipModule, imports: [NgbTooltipModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfTooltipModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfTooltipModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfTooltipTruncateDirective],
@@ -5888,8 +5881,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
         }] });
 
 class DfSideNavModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSideNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: DfSideNavModule, imports: [DfManageSideNavDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSideNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: DfSideNavModule, imports: [DfManageSideNavDirective,
             DfSideNavComponent,
             DfSideNavHeaderDirective,
             DfExcludeTrapDirective,
@@ -5902,10 +5895,10 @@ class DfSideNavModule {
             DfSideNavItemDirective,
             DfSideNavCollapseModule,
             DfMediaModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSideNavModule, imports: [DfSideNavComponent, DfSideNavCollapseModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSideNavModule, imports: [DfSideNavComponent, DfSideNavCollapseModule,
             DfMediaModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfSideNavModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfSideNavModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -5970,10 +5963,10 @@ class DfManageCardSelectionDirective {
                 return;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfManageCardSelectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.2", type: DfManageCardSelectionDirective, isStandalone: true, selector: "[dfManageCardSelected]", inputs: { dfManageCardSelected: { classPropertyName: "dfManageCardSelected", publicName: "dfManageCardSelected", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "click($event)", "keydown": "keydown($event)" }, properties: { "attr.tabindex": "0" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfManageCardSelectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", type: DfManageCardSelectionDirective, isStandalone: true, selector: "[dfManageCardSelected]", inputs: { dfManageCardSelected: { classPropertyName: "dfManageCardSelected", publicName: "dfManageCardSelected", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "click($event)", "keydown": "keydown($event)" }, properties: { "attr.tabindex": "0" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfManageCardSelectionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfManageCardSelectionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfManageCardSelected]',
@@ -5986,11 +5979,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
         }], ctorParameters: () => [] });
 
 class DfAdvancedCardModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfAdvancedCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: DfAdvancedCardModule, imports: [DfManageCardSelectionDirective], exports: [DfManageCardSelectionDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfAdvancedCardModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfAdvancedCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: DfAdvancedCardModule, imports: [DfManageCardSelectionDirective], exports: [DfManageCardSelectionDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfAdvancedCardModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfAdvancedCardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfAdvancedCardModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfManageCardSelectionDirective],
@@ -6021,8 +6014,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: "20.0.2", ngImport: i0, type: DfModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: DfModule, imports: [DfAlertModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: DfModule, imports: [DfAlertModule,
             DfDatePickerModule,
             DfSelectModule,
             DfProgressbarModule,
@@ -6055,7 +6048,7 @@ class DfModule {
             DfFooterModule,
             DfToastModule,
             DfStepperModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfModule, imports: [DF_MODULES, DfAlertModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfModule, imports: [DF_MODULES, DfAlertModule,
             DfDatePickerModule,
             DfSelectModule,
             DfProgressbarModule,
@@ -6073,7 +6066,7 @@ class DfModule {
             DfToastModule,
             DfStepperModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: DF_MODULES,
@@ -6151,10 +6144,10 @@ class DfWavesOfProgressDirective {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfWavesOfProgressDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.2", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfWavesOfProgressDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", 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: "20.0.2", ngImport: i0, type: DfWavesOfProgressDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfWavesOfProgressDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfWavesOfProgress]',
@@ -6166,11 +6159,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
         }], ctorParameters: () => [] });
 
 class DfWavesOfProgressModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfWavesOfProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: DfWavesOfProgressModule, imports: [DfWavesOfProgressDirective], exports: [DfWavesOfProgressDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfWavesOfProgressModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfWavesOfProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: DfWavesOfProgressModule, imports: [DfWavesOfProgressDirective], exports: [DfWavesOfProgressDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfWavesOfProgressModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfWavesOfProgressModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfWavesOfProgressModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfWavesOfProgressDirective],
@@ -6185,8 +6178,8 @@ class DfAmadeusLogoComponent {
          */
         this.svgClass = input('');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfAmadeusLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.2", type: DfAmadeusLogoComponent, isStandalone: true, selector: "df-amadeus-logo", inputs: { svgClass: { classPropertyName: "svgClass", publicName: "svgClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfAmadeusLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: DfAmadeusLogoComponent, isStandalone: true, selector: "df-amadeus-logo", inputs: { svgClass: { classPropertyName: "svgClass", publicName: "svgClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <svg [class]="svgClass()" viewBox="0 0 113 16" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M107.272 6.62415C105.258 5.92656 104.367 5.46175 104.367 4.4161C104.367 3.75718 104.793 2.75021 106.807 2.75021C108.705 2.75021 110.72 3.60249 110.72 3.60249V0.696849C109.868 0.348052 108.357 0 106.652 0C103.746 0 100.958 1.54913 100.958 4.61021C100.958 7.67128 103.747 8.52282 105.646 9.14307C107.428 9.7239 108.629 10.3055 108.629 11.4671C108.629 12.4749 107.931 13.249 105.646 13.249C103.708 13.249 101.384 12.4749 101.384 12.4749V15.3798C101.384 15.3798 103.63 16 105.801 16C108.667 16 112.038 14.9923 112.038 11.2344C112.038 8.67751 109.946 7.55378 107.273 6.62415H107.272Z"
@@ -6220,7 +6213,7 @@ class DfAmadeusLogoComponent {
     <span class="visually-hidden">Amadeus</span>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DfAmadeusLogoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DfAmadeusLogoComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'df-amadeus-logo',