@design-factory/design-factory 16.0.2 → 17.0.0

package/fesm2022/design-factory.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Directive, Inject, HostBinding, Output, HostListener, Component, ChangeDetectionStrategy, ContentChildren, NgModule, Input, Injectable, InjectionToken, PLATFORM_ID, ViewEncapsulation, ComponentRef, TemplateRef, Optional, forwardRef, ViewChild, ContentChild, inject, Host, Renderer2, ElementRef, numberAttribute } from '@angular/core';
 import * as i1$1 from '@angular/common';
-import { DOCUMENT, isPlatformBrowser, CommonModule, NgIf, NgTemplateOutlet } from '@angular/common';
+import { DOCUMENT, isPlatformBrowser, CommonModule, NgTemplateOutlet } from '@angular/common';
 import { merge, BehaviorSubject, fromEvent, Subscription, combineLatest, Subject, Observable, EMPTY, of, timer, race } from 'rxjs';
 import * as i1 from '@ng-bootstrap/ng-bootstrap';
 import { NgbToastModule, NgbAlertModule, NgbDatepickerKeyboardService, NgbDate, NgbDropdownModule, NgbDatepickerModule, NgbAccordionModule, NgbPopoverConfig, NgbPopoverModule, NgbProgressbarModule, NgbCollapseModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
@@ -46,19 +46,19 @@ class SkipLinkDirective {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SkipLinkDirective, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: SkipLinkDirective, isStandalone: true, selector: "[dfSkipLink]", outputs: { inFocus: "inFocus" }, host: { listeners: { "focus": "onFocus()", "click": "onClick()", "blur": "onBlur()" }, properties: { "class": "this.class" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkipLinkDirective, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: SkipLinkDirective, isStandalone: true, selector: "[dfSkipLink]", outputs: { inFocus: "inFocus" }, host: { listeners: { "focus": "onFocus()", "click": "onClick()", "blur": "onBlur()" }, properties: { "class": "this.class" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SkipLinkDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkipLinkDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfSkipLink]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }]; }, propDecorators: { class: [{
+                }] }], propDecorators: { class: [{
                 type: HostBinding
             }], inFocus: [{
                 type: Output
@@ -90,23 +90,23 @@ class SkipLinksContainerComponent {
     ngOnDestroy() {
         this.focusSubscription.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SkipLinksContainerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: SkipLinksContainerComponent, isStandalone: true, selector: "df-skip-links-container", queries: [{ propertyName: "links", predicate: SkipLinkDirective }], ngImport: i0, template: "<section class=\"df-skip-links__section\">\n  <div class=\"df-skip-links\">\n    <div\n      class=\"df-skip-links-wrap list-group\"\n      [class.focus]=\"inFocus\"\n      (blur)=\"inFocus=false\"\n    >\n      <ng-content></ng-content>\n    </div>\n  </div>\n</section>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkipLinksContainerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SkipLinksContainerComponent, isStandalone: true, selector: "df-skip-links-container", queries: [{ propertyName: "links", predicate: SkipLinkDirective }], ngImport: i0, template: "<section class=\"df-skip-links__section\">\n  <div class=\"df-skip-links\">\n    <div\n      class=\"df-skip-links-wrap list-group\"\n      [class.focus]=\"inFocus\"\n      (blur)=\"inFocus=false\"\n    >\n      <ng-content></ng-content>\n    </div>\n  </div>\n</section>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SkipLinksContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkipLinksContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'df-skip-links-container', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<section class=\"df-skip-links__section\">\n  <div class=\"df-skip-links\">\n    <div\n      class=\"df-skip-links-wrap list-group\"\n      [class.focus]=\"inFocus\"\n      (blur)=\"inFocus=false\"\n    >\n      <ng-content></ng-content>\n    </div>\n  </div>\n</section>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { links: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { links: [{
                 type: ContentChildren,
                 args: [SkipLinkDirective]
             }] } });
 
 class DfAccessibilityModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfAccessibilityModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfAccessibilityModule, imports: [SkipLinkDirective, SkipLinksContainerComponent], exports: [SkipLinkDirective, SkipLinksContainerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfAccessibilityModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfAccessibilityModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: DfAccessibilityModule, imports: [SkipLinkDirective, SkipLinksContainerComponent], exports: [SkipLinkDirective, SkipLinksContainerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfAccessibilityModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfAccessibilityModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfAccessibilityModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SkipLinkDirective, SkipLinksContainerComponent],
@@ -148,23 +148,23 @@ class DfInsertIconDirective {
         }
         return 'icon-info-circle';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.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: "16.1.4", type: DfInsertIconDirective, isStandalone: true, selector: "ngb-alert[dfInsertAlertIcon],ngb-toast[dfInsertToastIcon]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", 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: "17.1.0", type: DfInsertIconDirective, isStandalone: true, selector: "ngb-alert[dfInsertAlertIcon],ngb-toast[dfInsertToastIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfInsertIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfInsertIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ngb-alert[dfInsertAlertIcon],ngb-toast[dfInsertToastIcon]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class DfInsertIconModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfInsertIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfInsertIconModule, imports: [DfInsertIconDirective], exports: [DfInsertIconDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfInsertIconModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfInsertIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: DfInsertIconModule, imports: [DfInsertIconDirective], exports: [DfInsertIconDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfInsertIconModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfInsertIconModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfInsertIconModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfInsertIconDirective],
@@ -173,11 +173,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImpor
         }] });
 
 class DfToastModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfToastModule, imports: [DfInsertIconModule], exports: [NgbToastModule, DfInsertIconModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfToastModule, imports: [DfInsertIconModule, NgbToastModule, DfInsertIconModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: DfToastModule, imports: [DfInsertIconModule], exports: [NgbToastModule, DfInsertIconModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfToastModule, imports: [DfInsertIconModule, NgbToastModule, DfInsertIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfToastModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfToastModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfInsertIconModule],
@@ -186,11 +186,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImpor
         }] });
 
 class DfAlertModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfAlertModule, imports: [DfInsertIconModule], exports: [NgbAlertModule, DfInsertIconModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfAlertModule, imports: [DfInsertIconModule, NgbAlertModule, DfInsertIconModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: DfAlertModule, imports: [DfInsertIconModule], exports: [NgbAlertModule, DfInsertIconModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfAlertModule, imports: [DfInsertIconModule, NgbAlertModule, DfInsertIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfAlertModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfAlertModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfInsertIconModule],
@@ -214,16 +214,16 @@ class CloseInputDatePickerDirective {
             this.inputDatePicker.close();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: CloseInputDatePickerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: CloseInputDatePickerDirective, isStandalone: true, selector: "[dfCloseInputDatePicker]", inputs: { inputDatePicker: ["dfCloseInputDatePicker", "inputDatePicker"] }, host: { listeners: { "document:click": "onClick($event.target)", "document:keyup": "onClick($event.target)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CloseInputDatePickerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: CloseInputDatePickerDirective, isStandalone: true, selector: "[dfCloseInputDatePicker]", inputs: { inputDatePicker: ["dfCloseInputDatePicker", "inputDatePicker"] }, host: { listeners: { "document:click": "onClick($event.target)", "document:keyup": "onClick($event.target)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: CloseInputDatePickerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CloseInputDatePickerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfCloseInputDatePicker]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { inputDatePicker: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { inputDatePicker: [{
                 type: Input,
                 args: ['dfCloseInputDatePicker']
             }], onClick: [{
@@ -243,16 +243,16 @@ class DfTriggerClickDirective {
         event.preventDefault();
         this.elementRef.nativeElement.click();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfTriggerClickDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", 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: "17.1.0", ngImport: i0, type: DfTriggerClickDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", 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: "16.1.4", ngImport: i0, type: DfTriggerClickDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfTriggerClickDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfTriggerClick]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { triggerClick: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { triggerClick: [{
                 type: HostListener,
                 args: ['keydown.enter', ['$event']]
             }, {
@@ -330,17 +330,17 @@ class DfInputIconDirective {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfInputIconDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfInputIconDirective, isStandalone: true, selector: "[dfInputIcon]", inputs: { dfInputIcon: "dfInputIcon" }, host: { listeners: { "blur": "onBlur($event)", "focus": "onFocus($event)", "keydown.Tab": "onTab($event)" } }, exportAs: ["dfInputIcon"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfInputIconDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: DfInputIconDirective, isStandalone: true, selector: "[dfInputIcon]", inputs: { dfInputIcon: "dfInputIcon" }, host: { listeners: { "blur": "onBlur($event)", "focus": "onFocus($event)", "keydown.Tab": "onTab($event)" } }, exportAs: ["dfInputIcon"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfInputIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfInputIconDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'dfInputIcon',
                     selector: '[dfInputIcon]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { dfInputIcon: [{
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { dfInputIcon: [{
                 type: Input
             }], onBlur: [{
                 type: HostListener,
@@ -354,11 +354,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImpor
             }] } });
 
 class DfAdvancedInputModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfAdvancedInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfAdvancedInputModule, imports: [DfTriggerClickDirective, DfInputIconDirective], exports: [DfTriggerClickDirective, DfInputIconDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfAdvancedInputModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfAdvancedInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: DfAdvancedInputModule, imports: [DfTriggerClickDirective, DfInputIconDirective], exports: [DfTriggerClickDirective, DfInputIconDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfAdvancedInputModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfAdvancedInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfAdvancedInputModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfTriggerClickDirective, DfInputIconDirective],
@@ -395,10 +395,10 @@ class DfDatepickerKeyboardService extends NgbDatepickerKeyboardService {
         event.preventDefault();
         event.stopPropagation();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfDatepickerKeyboardService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfDatepickerKeyboardService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfDatepickerKeyboardService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfDatepickerKeyboardService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfDatepickerKeyboardService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfDatepickerKeyboardService, decorators: [{
             type: Injectable
         }] });
 
@@ -422,10 +422,10 @@ class DfDirectionDetectionService {
         }
         return RightToLeftDirectionEnum.LeftToRight;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfDirectionDetectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfDirectionDetectionService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfDirectionDetectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfDirectionDetectionService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfDirectionDetectionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfDirectionDetectionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -517,17 +517,17 @@ class DfDatepickerRangeDirective {
     ngOnDestroy() {
         this.removeListener.forEach(item => item());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfDatepickerRangeDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: DfDirectionDetectionService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfDatepickerRangeDirective, isStandalone: true, selector: "[dfDatepickerRange]", exportAs: ["dfDatepickerRange"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfDatepickerRangeDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: DfDirectionDetectionService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: DfDatepickerRangeDirective, isStandalone: true, selector: "[dfDatepickerRange]", exportAs: ["dfDatepickerRange"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfDatepickerRangeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfDatepickerRangeDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'dfDatepickerRange',
                     selector: '[dfDatepickerRange]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: DfDirectionDetectionService }]; } });
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: DfDirectionDetectionService }] });
 
 class DfDatepickerRangeService {
     constructor(calendar, formatter) {
@@ -615,28 +615,28 @@ class DfDatepickerRangeService {
         this.toDate = this.toDate ? this.parseInput(this.toDate, typed) : null;
         this.toDateAsStr = this.formatter.format(this.toDate);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", 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: "16.1.4", ngImport: i0, type: DfDatepickerRangeService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", 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: "17.1.0", ngImport: i0, type: DfDatepickerRangeService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfDatepickerRangeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfDatepickerRangeService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.NgbCalendar }, { type: i1.NgbDateParserFormatter }]; } });
+        }], ctorParameters: () => [{ type: i1.NgbCalendar }, { type: i1.NgbDateParserFormatter }] });
 
 class DfDatePickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfDatePickerModule, imports: [NgbDropdownModule, CloseInputDatePickerDirective, DfDatepickerRangeDirective], exports: [CloseInputDatePickerDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: DfDatePickerModule, imports: [NgbDropdownModule, CloseInputDatePickerDirective, DfDatepickerRangeDirective], exports: [CloseInputDatePickerDirective,
             NgbDatepickerModule,
             DfAdvancedInputModule,
             DfDatepickerRangeDirective,
             NgbDropdownModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfDatePickerModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfDatePickerModule, providers: [
             { provide: NgbDatepickerKeyboardService, useClass: DfDatepickerKeyboardService },
             DfDatepickerRangeService
         ], imports: [NgbDropdownModule, NgbDatepickerModule,
             DfAdvancedInputModule,
             NgbDropdownModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfDatePickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfDatePickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [NgbDropdownModule, CloseInputDatePickerDirective, DfDatepickerRangeDirective],
@@ -738,19 +738,19 @@ class DfBreakpoints {
         }
         return dict;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", 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: "16.1.4", ngImport: i0, type: DfBreakpoints, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", 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: "17.1.0", ngImport: i0, type: DfBreakpoints, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfBreakpoints, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfBreakpoints, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [BREAKPOINTS_VARS]
                 }] }, { type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
-                }] }]; } });
+                }] }] });
 class DfMediaQuery {
     constructor(platformId) {
         this._isBrowser = isPlatformBrowser(platformId);
@@ -766,16 +766,16 @@ class DfMediaQuery {
             return this.notSupported(query);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMediaQuery, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMediaQuery, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfMediaQuery, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfMediaQuery, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMediaQuery, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfMediaQuery, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: Object, decorators: [{
+        }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
-                }] }]; } });
+                }] }] });
 class DfMediaObserver {
     constructor(_mediaQuery) {
         this._mediaQuery = _mediaQuery;
@@ -826,13 +826,13 @@ class DfMediaObserver {
         this._queries.set(query, meta);
         return meta;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMediaObserver, deps: [{ token: DfMediaQuery }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMediaObserver, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfMediaObserver, deps: [{ token: DfMediaQuery }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfMediaObserver, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMediaObserver, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfMediaObserver, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: DfMediaQuery }]; } });
+        }], ctorParameters: () => [{ type: DfMediaQuery }] });
 
 /**
  * Services you can use to get indication about the current width screen of your application
@@ -868,13 +868,13 @@ class DfMedia {
             return this.mediaObserver.observe(query);
         }), map(value => value.matches), distinctUntilChanged());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMedia, deps: [{ token: DfMediaObserver }, { token: DfBreakpoints }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMedia, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfMedia, deps: [{ token: DfMediaObserver }, { token: DfBreakpoints }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfMedia, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMedia, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfMedia, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: DfMediaObserver }, { type: DfBreakpoints }]; } });
+        }], ctorParameters: () => [{ type: DfMediaObserver }, { type: DfBreakpoints }] });
 
 /**
  * Directive using the matchMedia JS feature (https://developer.mozilla.org/fr/docs/Web/API/Window/matchMedia)
@@ -914,22 +914,22 @@ class DfIfMediaDirective {
             this._viewInstance = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfIfMediaDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: DfMedia }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfIfMediaDirective, isStandalone: true, selector: "[dfIfMedia]", inputs: { dfIfMedia: "dfIfMedia" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfIfMediaDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: DfMedia }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: DfIfMediaDirective, isStandalone: true, selector: "[dfIfMedia]", inputs: { dfIfMedia: "dfIfMedia" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfIfMediaDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfIfMediaDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[dfIfMedia]', standalone: true }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: DfMedia }]; }, propDecorators: { dfIfMedia: [{
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: DfMedia }], propDecorators: { dfIfMedia: [{
                 type: Input
             }] } });
 
 class DfMediaModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMediaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfMediaModule, imports: [DfIfMediaDirective], exports: [DfIfMediaDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMediaModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfMediaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: DfMediaModule, imports: [DfIfMediaDirective], exports: [DfIfMediaDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfMediaModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfMediaModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfMediaModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfIfMediaDirective],
@@ -938,11 +938,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImpor
         }] });
 
 class DfFooterModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfFooterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfFooterModule, imports: [DfMediaModule, NgbAccordionModule], exports: [DfMediaModule, NgbAccordionModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfFooterModule, imports: [DfMediaModule, NgbAccordionModule, DfMediaModule, NgbAccordionModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfFooterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: DfFooterModule, imports: [DfMediaModule, NgbAccordionModule], exports: [DfMediaModule, NgbAccordionModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfFooterModule, imports: [DfMediaModule, NgbAccordionModule, DfMediaModule, NgbAccordionModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfFooterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfFooterModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfMediaModule, NgbAccordionModule],
@@ -951,8 +951,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImpor
         }] });
 
 class DfAmadeusIconComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfAmadeusIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: DfAmadeusIconComponent, isStandalone: true, selector: "df-amadeus-icon", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfAmadeusIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: DfAmadeusIconComponent, isStandalone: true, selector: "df-amadeus-icon", ngImport: i0, template: `
     <svg
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
@@ -988,7 +988,7 @@ class DfAmadeusIconComponent {
     </svg>
   `, isInline: true, styles: [":root{--df-navbar-height: 3.5rem}:host{min-width:60px}:host svg{margin:10%}:host.icon-primary{fill:var(--df-primary-500)}:host.icon-white{fill:#fff}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfAmadeusIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfAmadeusIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'df-amadeus-icon', template: `
     <svg
@@ -1028,11 +1028,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImpor
         }] });
 
 class DfIconModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfIconModule, imports: [DfAmadeusIconComponent], exports: [DfAmadeusIconComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfIconModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: DfIconModule, imports: [DfAmadeusIconComponent], exports: [DfAmadeusIconComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfIconModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfIconModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfIconModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfAmadeusIconComponent],
@@ -1063,34 +1063,34 @@ class DfModalService {
         });
         return modalRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", 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: "16.1.4", ngImport: i0, type: DfModalService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", 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: "17.1.0", ngImport: i0, type: DfModalService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfModalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfModalService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.NgbModal }, { type: i0.RendererFactory2 }]; } });
+        }], ctorParameters: () => [{ type: i1.NgbModal }, { type: i0.RendererFactory2 }] });
 
 class DfPopoverConfig extends NgbPopoverConfig {
-    constructor(ngbConfig) {
-        super(ngbConfig || { animation: true });
+    constructor() {
+        super(...arguments);
         this.autoClose = 'outside';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfPopoverConfig, deps: [{ token: i1.NgbConfig }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfPopoverConfig }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfPopoverConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfPopoverConfig }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfPopoverConfig, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfPopoverConfig, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.NgbConfig }]; } });
+        }] });
 
 class DfPopoverModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfPopoverModule, exports: [NgbPopoverModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfPopoverModule, providers: [{ provide: NgbPopoverConfig, useClass: DfPopoverConfig }], imports: [NgbPopoverModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: DfPopoverModule, exports: [NgbPopoverModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfPopoverModule, providers: [{ provide: NgbPopoverConfig, useClass: DfPopoverConfig }], imports: [NgbPopoverModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfPopoverModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfPopoverModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [NgbPopoverModule],
@@ -1226,12 +1226,12 @@ class DfProgressbarComponent {
         this.value = 0;
         this.maxValue = 100;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: DfProgressbarComponent, isStandalone: true, selector: "df-progressbar", inputs: { infiniteAnimation: "infiniteAnimation", value: "value", maxValue: "maxValue", text: "text", start$: "start$", end$: "end$", ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel" }, outputs: { percentageValueChange: "percentageValueChange" }, ngImport: i0, template: "<ng-container *ngIf=\"displayProgressBar\">\n  <div *ngIf=\"computedText\" class=\"progressbar-text mb-2\">{{ computedText }}</div>\n  <div class=\"progress\">\n    <ng-container *ngIf=\"infiniteAnimation; else withValue\">\n      <div\n        class=\"progress-bar infinite-animation\"\n        role=\"progressbar\"\n        aria-valuetext=\"indeterminate\"\n        [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n        [attr.aria-label]=\"!ariaLabelledBy && ariaLabel ? ariaLabel : null\"\n      ></div>\n    </ng-container>\n    <ng-template #withValue>\n      <div\n        [style.width.%]=\"percentageValue\"\n        class=\"progress-bar\"\n        role=\"progressbar\"\n        [attr.aria-valuenow]=\"value\"\n        aria-valuemin=\"0\"\n        [attr.aria-valuemax]=\"maxValue\"\n        [attr.aria-valuetext]=\"computedText ? computedText : null\"\n        [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n        [attr.aria-label]=\"!ariaLabelledBy && ariaLabel ? ariaLabel : null\"\n      ></div>\n    </ng-template>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfProgressbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: DfProgressbarComponent, isStandalone: true, selector: "df-progressbar", inputs: { infiniteAnimation: "infiniteAnimation", value: "value", maxValue: "maxValue", text: "text", start$: "start$", end$: "end$", ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel" }, outputs: { percentageValueChange: "percentageValueChange" }, ngImport: i0, template: "@if (displayProgressBar) {\n  @if (computedText) {\n    <div class=\"progressbar-text mb-2\">{{ computedText }}</div>\n  }\n  @if (infiniteAnimation) {\n    <div\n      class=\"progress\"\n      role=\"progressbar\"\n      aria-valuetext=\"indeterminate\"\n      [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n      [attr.aria-label]=\"!ariaLabelledBy && ariaLabel ? ariaLabel : null\"\n    >\n      <div class=\"progress-bar infinite-animation\"></div>\n    </div>\n  } @else {\n    <div\n      class=\"progress\"\n      role=\"progressbar\"\n      [attr.aria-valuenow]=\"value\"\n      aria-valuemin=\"0\"\n      [attr.aria-valuemax]=\"maxValue\"\n      [attr.aria-valuetext]=\"computedText ? computedText : null\"\n      [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n      [attr.aria-label]=\"!ariaLabelledBy && ariaLabel ? ariaLabel : null\"\n    >\n      <div [style.width.%]=\"percentageValue\" class=\"progress-bar\"></div>\n    </div>\n  }\n}\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfProgressbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'df-progressbar', standalone: true, imports: [CommonModule], template: "<ng-container *ngIf=\"displayProgressBar\">\n  <div *ngIf=\"computedText\" class=\"progressbar-text mb-2\">{{ computedText }}</div>\n  <div class=\"progress\">\n    <ng-container *ngIf=\"infiniteAnimation; else withValue\">\n      <div\n        class=\"progress-bar infinite-animation\"\n        role=\"progressbar\"\n        aria-valuetext=\"indeterminate\"\n        [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n        [attr.aria-label]=\"!ariaLabelledBy && ariaLabel ? ariaLabel : null\"\n      ></div>\n    </ng-container>\n    <ng-template #withValue>\n      <div\n        [style.width.%]=\"percentageValue\"\n        class=\"progress-bar\"\n        role=\"progressbar\"\n        [attr.aria-valuenow]=\"value\"\n        aria-valuemin=\"0\"\n        [attr.aria-valuemax]=\"maxValue\"\n        [attr.aria-valuetext]=\"computedText ? computedText : null\"\n        [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n        [attr.aria-label]=\"!ariaLabelledBy && ariaLabel ? ariaLabel : null\"\n      ></div>\n    </ng-template>\n  </div>\n</ng-container>\n" }]
+            args: [{ selector: 'df-progressbar', standalone: true, template: "@if (displayProgressBar) {\n  @if (computedText) {\n    <div class=\"progressbar-text mb-2\">{{ computedText }}</div>\n  }\n  @if (infiniteAnimation) {\n    <div\n      class=\"progress\"\n      role=\"progressbar\"\n      aria-valuetext=\"indeterminate\"\n      [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n      [attr.aria-label]=\"!ariaLabelledBy && ariaLabel ? ariaLabel : null\"\n    >\n      <div class=\"progress-bar infinite-animation\"></div>\n    </div>\n  } @else {\n    <div\n      class=\"progress\"\n      role=\"progressbar\"\n      [attr.aria-valuenow]=\"value\"\n      aria-valuemin=\"0\"\n      [attr.aria-valuemax]=\"maxValue\"\n      [attr.aria-valuetext]=\"computedText ? computedText : null\"\n      [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n      [attr.aria-label]=\"!ariaLabelledBy && ariaLabel ? ariaLabel : null\"\n    >\n      <div [style.width.%]=\"percentageValue\" class=\"progress-bar\"></div>\n    </div>\n  }\n}\n" }]
         }], propDecorators: { infiniteAnimation: [{
                 type: Input
             }], value: [{
@@ -1253,11 +1253,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImpor
             }] } });
 
 class DfProgressbarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfProgressbarModule, imports: [DfProgressbarComponent], exports: [DfProgressbarComponent, NgbProgressbarModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressbarModule, imports: [DfProgressbarComponent, NgbProgressbarModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfProgressbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: DfProgressbarModule, imports: [DfProgressbarComponent], exports: [DfProgressbarComponent, NgbProgressbarModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfProgressbarModule, imports: [NgbProgressbarModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressbarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfProgressbarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfProgressbarComponent],
@@ -1314,12 +1314,12 @@ class DfProgressIndicatorContainerComponent {
     get position() {
         return this._position;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: DfProgressIndicatorContainerComponent, isStandalone: true, selector: "df-progressindicator-container", inputs: { containerClass: "containerClass", position: "position" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfProgressIndicatorContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: DfProgressIndicatorContainerComponent, isStandalone: true, selector: "df-progressindicator-container", inputs: { containerClass: "containerClass", position: "position" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: `
     <ng-content></ng-content>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfProgressIndicatorContainerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'df-progressindicator-container',
@@ -1344,12 +1344,12 @@ class DfDefaultSpinnerComponent {
         this.isGlobalSpinner = false;
         this.contentClass = 'spinner-border text-primary';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfDefaultSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: DfDefaultSpinnerComponent, isStandalone: true, selector: "df-default-spinner", inputs: { isGlobalSpinner: "isGlobalSpinner", contentClass: "contentClass", ariaLabel: "ariaLabel" }, ngImport: i0, template: "<div [ngClass]=\"contentClass\" [attr.role]=\"isGlobalSpinner ? 'alert' : 'status'\">\n  <span class=\"visually-hidden\">\n    <ng-container *ngIf=\"ariaLabel; else defaultAriaLabel\">{{ ariaLabel }}</ng-container>\n  </span>\n</div>\n\n<ng-template #defaultAriaLabel>\n  <ng-container i18n=\"@@df.progressindicator.default.spinner.ariaLabel\">Loading...</ng-container>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfDefaultSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: DfDefaultSpinnerComponent, isStandalone: true, selector: "df-default-spinner", inputs: { isGlobalSpinner: "isGlobalSpinner", contentClass: "contentClass", ariaLabel: "ariaLabel" }, ngImport: i0, template: "<div [ngClass]=\"contentClass\" [attr.role]=\"isGlobalSpinner ? 'alert' : 'status'\">\n  <span class=\"visually-hidden\">\n    @if (ariaLabel) {\n      {{ ariaLabel }}\n    } @else {\n      <ng-container i18n=\"@@df.progressindicator.default.spinner.ariaLabel\">Loading...</ng-container>\n    }\n  </span>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfDefaultSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfDefaultSpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'df-default-spinner', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], template: "<div [ngClass]=\"contentClass\" [attr.role]=\"isGlobalSpinner ? 'alert' : 'status'\">\n  <span class=\"visually-hidden\">\n    <ng-container *ngIf=\"ariaLabel; else defaultAriaLabel\">{{ ariaLabel }}</ng-container>\n  </span>\n</div>\n\n<ng-template #defaultAriaLabel>\n  <ng-container i18n=\"@@df.progressindicator.default.spinner.ariaLabel\">Loading...</ng-container>\n</ng-template>\n" }]
+            args: [{ selector: 'df-default-spinner', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], template: "<div [ngClass]=\"contentClass\" [attr.role]=\"isGlobalSpinner ? 'alert' : 'status'\">\n  <span class=\"visually-hidden\">\n    @if (ariaLabel) {\n      {{ ariaLabel }}\n    } @else {\n      <ng-container i18n=\"@@df.progressindicator.default.spinner.ariaLabel\">Loading...</ng-container>\n    }\n  </span>\n</div>\n" }]
         }], propDecorators: { isGlobalSpinner: [{
                 type: Input
             }], contentClass: [{
@@ -1365,10 +1365,10 @@ class DfProgressIndicatorBackdropComponent {
     get classes() {
         return `df-progressindicator-backdrop ${this.backdropClass || ''} ${this.isGlobalBackdrop ? 'df-progressindicator-backdrop-global' : 'df-progressindicator-backdrop-contextual'}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: DfProgressIndicatorBackdropComponent, isStandalone: true, selector: "df-progressindicator-backdrop", inputs: { backdropClass: "backdropClass", isGlobalBackdrop: "isGlobalBackdrop" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfProgressIndicatorBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: DfProgressIndicatorBackdropComponent, isStandalone: true, selector: "df-progressindicator-backdrop", inputs: { backdropClass: "backdropClass", isGlobalBackdrop: "isGlobalBackdrop" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorBackdropComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfProgressIndicatorBackdropComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'df-progressindicator-backdrop',
@@ -1458,16 +1458,16 @@ class ScrollBar {
         body.removeChild(measurer);
         return width;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ScrollBar, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ScrollBar, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: ScrollBar, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: ScrollBar, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ScrollBar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: ScrollBar, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }]; } });
+                }] }] });
 
 class DfProgressIndicatorService {
     constructor(document, rendererFactory, componentFactoryResolver, appRef, injector, scrollbar) {
@@ -1616,18 +1616,18 @@ class DfProgressIndicatorService {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", 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: "16.1.4", ngImport: i0, type: DfProgressIndicatorService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", 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: "17.1.0", ngImport: i0, type: DfProgressIndicatorService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfProgressIndicatorService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: Document, decorators: [{
+        }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i0.RendererFactory2 }, { type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }, { type: i0.Injector }, { type: ScrollBar }]; } });
+                }] }, { type: i0.RendererFactory2 }, { type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }, { type: i0.Injector }, { type: ScrollBar }] });
 
 class DfProgressIndicatorDirective {
     constructor(elementRef, progressService) {
@@ -1650,24 +1650,24 @@ class DfProgressIndicatorDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorDirective, deps: [{ token: i0.ElementRef }, { token: DfProgressIndicatorService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfProgressIndicatorDirective, isStandalone: true, selector: "[dfProgressIndicator]", inputs: { dfProgressIndicator: "dfProgressIndicator", dfProgressIndicatorConfig: "dfProgressIndicatorConfig" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfProgressIndicatorDirective, deps: [{ token: i0.ElementRef }, { token: DfProgressIndicatorService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: DfProgressIndicatorDirective, isStandalone: true, selector: "[dfProgressIndicator]", inputs: { dfProgressIndicator: "dfProgressIndicator", dfProgressIndicatorConfig: "dfProgressIndicatorConfig" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfProgressIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfProgressIndicator]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: DfProgressIndicatorService }]; }, propDecorators: { dfProgressIndicator: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DfProgressIndicatorService }], propDecorators: { dfProgressIndicator: [{
                 type: Input
             }], dfProgressIndicatorConfig: [{
                 type: Input
             }] } });
 
 class DfProgressIndicatorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorModule, imports: [DfDefaultSpinnerComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfProgressIndicatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: DfProgressIndicatorModule, imports: [DfDefaultSpinnerComponent,
             DfProgressbarModule,
             DfProgressIndicatorBackdropComponent,
             DfProgressIndicatorContainerComponent,
@@ -1676,10 +1676,10 @@ class DfProgressIndicatorModule {
             DfProgressIndicatorDirective,
             DfProgressIndicatorBackdropComponent,
             DfDefaultSpinnerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorModule, imports: [DfDefaultSpinnerComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfProgressIndicatorModule, imports: [DfDefaultSpinnerComponent,
             DfProgressbarModule, DfProgressbarModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfProgressIndicatorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfProgressIndicatorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1712,18 +1712,18 @@ class DfSliderDirectionDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSliderDirectionDirective, deps: [{ token: i0.ElementRef }, { token: DfDirectionDetectionService, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfSliderDirectionDirective, isStandalone: true, selector: "[dfSliderDirection]", inputs: { host: ["dfSliderDirection", "host"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSliderDirectionDirective, deps: [{ token: i0.ElementRef }, { token: DfDirectionDetectionService, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: DfSliderDirectionDirective, isStandalone: true, selector: "[dfSliderDirection]", inputs: { host: ["dfSliderDirection", "host"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSliderDirectionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSliderDirectionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfSliderDirection]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: DfDirectionDetectionService, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DfDirectionDetectionService, decorators: [{
                     type: Optional
-                }] }]; }, propDecorators: { host: [{
+                }] }], propDecorators: { host: [{
                 type: Input,
                 args: ['dfSliderDirection']
             }] } });
@@ -2169,17 +2169,17 @@ class SliderElementDirective {
     isRefDestroyed() {
         return ValueHelper.isNullOrUndefined(this.changeDetectionRef) || this.changeDetectionRef['destroyed'];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.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: "16.1.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", 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: "17.1.0", 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: "16.1.4", ngImport: i0, type: SliderElementDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SliderElementDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: '[ngxSliderElement]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { opacity: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { opacity: [{
                 type: HostBinding,
                 args: ['style.opacity']
             }], visibility: [{
@@ -2219,17 +2219,17 @@ class SliderHandleDirective extends SliderElementDirective {
         this.ariaValueMin = '';
         this.ariaValueMax = '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.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: "16.1.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", 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: "17.1.0", 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: "16.1.4", ngImport: i0, type: SliderHandleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SliderHandleDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: '[ngxSliderHandle]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { active: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { active: [{
                 type: HostBinding,
                 args: ['class.ngx-slider-active']
             }], role: [{
@@ -2283,25 +2283,25 @@ class SliderLabelDirective extends SliderElementDirective {
             this.calculateDimension();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.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: "16.1.4", type: SliderLabelDirective, isStandalone: true, selector: "[ngxSliderLabel]", usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", 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: "17.1.0", type: SliderLabelDirective, isStandalone: true, selector: "[ngxSliderLabel]", usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SliderLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SliderLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: '[ngxSliderLabel]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; } });
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }] });
 
 class TooltipWrapperComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: TooltipWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: TooltipWrapperComponent, isStandalone: true, selector: "ngx-slider-tooltip-wrapper", inputs: { template: "template", tooltip: "tooltip", placement: "placement", content: "content" }, ngImport: i0, template: "<ng-container *ngIf=\"template\">\n  <ng-template *ngTemplateOutlet=\"template; context: {tooltip: tooltip, placement: placement, content: content}\"></ng-template>\n</ng-container>\n\n<ng-container *ngIf=\"!template\">\n  <div class=\"ngx-slider-inner-tooltip\" [attr.title]=\"tooltip\" [attr.data-tooltip-placement]=\"placement\">\n    {{content}}\n  </div>\n</ng-container>", styles: [".ngx-slider-inner-tooltip{height:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: TooltipWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", 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: "16.1.4", ngImport: i0, type: TooltipWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: TooltipWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-slider-tooltip-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, NgTemplateOutlet], template: "<ng-container *ngIf=\"template\">\n  <ng-template *ngTemplateOutlet=\"template; context: {tooltip: tooltip, placement: placement, content: content}\"></ng-template>\n</ng-container>\n\n<ng-container *ngIf=\"!template\">\n  <div class=\"ngx-slider-inner-tooltip\" [attr.title]=\"tooltip\" [attr.data-tooltip-placement]=\"placement\">\n    {{content}}\n  </div>\n</ng-container>", styles: [".ngx-slider-inner-tooltip{height:100%}\n"] }]
+            args: [{ selector: 'ngx-slider-tooltip-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgTemplateOutlet], template: "@if (template) {\n  <ng-template\n    *ngTemplateOutlet=\"template; context: { tooltip: tooltip, placement: placement, content: content }\"\n  ></ng-template>\n} @else {\n  <div class=\"ngx-slider-inner-tooltip\" [attr.title]=\"tooltip\" [attr.data-tooltip-placement]=\"placement\">\n    {{ content }}\n  </div>\n}\n", styles: [".ngx-slider-inner-tooltip{height:100%}\n"] }]
         }], propDecorators: { template: [{
                 type: Input
             }], tooltip: [{
@@ -4226,13 +4226,13 @@ class SliderComponent {
         }
         return changeContext;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.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: "14.0.0", version: "16.1.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 ngxSliderElement #leftOuterSelectionBar class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-left-out-selection\">\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 1 Right selection bar outside two handles -->\n<span ngxSliderElement #rightOuterSelectionBar class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-right-out-selection\">\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 2 The whole slider bar -->\n<span ngxSliderElement #fullBar [class.ngx-slider-transparent]=\"fullBarTransparentClass\" class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-full-bar\">\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 3 Selection bar between two handles -->\n<span ngxSliderElement #selectionBar [class.ngx-slider-draggable]=\"selectionBarDraggableClass\" class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-selection-bar\">\n  <span class=\"ngx-slider-span ngx-slider-bar ngx-slider-selection\" [ngStyle]=\"barStyle\"></span>\n</span>\n<!-- // 4 Low slider handle -->\n<span ngxSliderHandle #minHandle class=\"ngx-slider-span ngx-slider-pointer ngx-slider-pointer-min\" [ngStyle]=minPointerStyle></span>\n<!-- // 5 High slider handle -->\n<span ngxSliderHandle #maxHandle [style.display]=\"range ? 'inherit' : 'none'\" class=\"ngx-slider-span ngx-slider-pointer ngx-slider-pointer-max\" [ngStyle]=maxPointerStyle></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 ngxSliderElement #ticksElement [hidden]=\"!showTicks\" [class.ngx-slider-ticks-values-under]=\"ticksUnderValuesClass\" class=\"ngx-slider-ticks\">\n  <span *ngFor=\"let t of ticks\" class=\"ngx-slider-tick\" [ngClass]=\"{'ngx-slider-selected': t.selected}\" [ngStyle]=\"t.style\">\n    <ngx-slider-tooltip-wrapper [template]=\"tooltipTemplate\" [tooltip]=\"t.tooltip\" [placement]=\"t.tooltipPlacement\"></ngx-slider-tooltip-wrapper>\n    <ngx-slider-tooltip-wrapper *ngIf=\"t.value !== null\" class=\"ngx-slider-span ngx-slider-tick-value\"\n        [template]=\"tooltipTemplate\" [tooltip]=\"t.valueTooltip\" [placement]=\"t.valueTooltipPlacement\" [content]=\"t.value\"></ngx-slider-tooltip-wrapper>\n    <span *ngIf=\"t.legend !== null\" class=\"ngx-slider-span ngx-slider-tick-legend\" [innerHTML]=\"t.legend\"></span>\n  </span>\n</span>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "17.1.0", 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: "17.1.0", type: SliderComponent, isStandalone: true, selector: "ngx-slider", inputs: { value: "value", highValue: "highValue", options: "options", manualRefresh: "manualRefresh", triggerFocus: "triggerFocus" }, outputs: { valueChange: "valueChange", highValueChange: "highValueChange", userChangeStart: "userChangeStart", userChange: "userChange", userChangeEnd: "userChangeEnd" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class": "this.class", "class.vertical": "this.sliderElementVerticalClass", "class.animate": "this.sliderElementAnimateClass", "class.with-legend": "this.sliderElementWithLegendClass", "attr.disabled": "this.sliderElementDisabledAttr", "attr.aria-label": "this.sliderElementAriaLabel" } }, providers: [NGX_SLIDER_CONTROL_VALUE_ACCESSOR], queries: [{ propertyName: "tooltipTemplate", first: true, predicate: ["tooltipTemplate"], descendants: true }], viewQueries: [{ propertyName: "leftOuterSelectionBarElement", first: true, predicate: ["leftOuterSelectionBar"], descendants: true, read: SliderElementDirective }, { propertyName: "rightOuterSelectionBarElement", first: true, predicate: ["rightOuterSelectionBar"], descendants: true, read: SliderElementDirective }, { propertyName: "fullBarElement", first: true, predicate: ["fullBar"], descendants: true, read: SliderElementDirective }, { propertyName: "selectionBarElement", first: true, predicate: ["selectionBar"], descendants: true, read: SliderElementDirective }, { propertyName: "minHandleElement", first: true, predicate: ["minHandle"], descendants: true, read: SliderHandleDirective }, { propertyName: "maxHandleElement", first: true, predicate: ["maxHandle"], descendants: true, read: SliderHandleDirective }, { propertyName: "floorLabelElement", first: true, predicate: ["floorLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "ceilLabelElement", first: true, predicate: ["ceilLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "minHandleLabelElement", first: true, predicate: ["minHandleLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "maxHandleLabelElement", first: true, predicate: ["maxHandleLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "combinedLabelElement", first: true, predicate: ["combinedLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "ticksElement", first: true, predicate: ["ticksElement"], descendants: true, read: SliderElementDirective }], usesOnChanges: true, ngImport: i0, template: "<!-- // 0 Left selection bar outside two handles -->\n<span\n  ngxSliderElement\n  #leftOuterSelectionBar\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-left-out-selection\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 1 Right selection bar outside two handles -->\n<span\n  ngxSliderElement\n  #rightOuterSelectionBar\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-right-out-selection\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 2 The whole slider bar -->\n<span\n  ngxSliderElement\n  #fullBar\n  [class.ngx-slider-transparent]=\"fullBarTransparentClass\"\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-full-bar\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 3 Selection bar between two handles -->\n<span\n  ngxSliderElement\n  #selectionBar\n  [class.ngx-slider-draggable]=\"selectionBarDraggableClass\"\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-selection-bar\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar ngx-slider-selection\" [ngStyle]=\"barStyle\"></span>\n</span>\n<!-- // 4 Low slider handle -->\n<span\n  ngxSliderHandle\n  #minHandle\n  class=\"ngx-slider-span ngx-slider-pointer ngx-slider-pointer-min\"\n  [ngStyle]=\"minPointerStyle\"\n></span>\n<!-- // 5 High slider handle -->\n<span\n  ngxSliderHandle\n  #maxHandle\n  [style.display]=\"range ? 'inherit' : 'none'\"\n  class=\"ngx-slider-span ngx-slider-pointer ngx-slider-pointer-max\"\n  [ngStyle]=\"maxPointerStyle\"\n></span>\n<!-- // 6 Floor label -->\n<span ngxSliderLabel #floorLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-limit ngx-slider-floor\"></span>\n<!-- // 7 Ceiling label -->\n<span ngxSliderLabel #ceilLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-limit ngx-slider-ceil\"></span>\n<!-- // 8 Label above the low slider handle -->\n<span ngxSliderLabel #minHandleLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-model-value\"></span>\n<!-- // 9 Label above the high slider handle -->\n<span ngxSliderLabel #maxHandleLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-model-high\"></span>\n<!-- // 10 Combined range label when the slider handles are close ex. 15 - 17 -->\n<span ngxSliderLabel #combinedLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-combined\"></span>\n<!-- // 11 The ticks -->\n<span\n  ngxSliderElement\n  #ticksElement\n  [hidden]=\"!showTicks\"\n  [class.ngx-slider-ticks-values-under]=\"ticksUnderValuesClass\"\n  class=\"ngx-slider-ticks\"\n>\n  @for (t of ticks; track t) {\n    <span class=\"ngx-slider-tick\" [ngClass]=\"{ 'ngx-slider-selected': t.selected }\" [ngStyle]=\"t.style\">\n      <ngx-slider-tooltip-wrapper\n        [template]=\"tooltipTemplate\"\n        [tooltip]=\"t.tooltip\"\n        [placement]=\"t.tooltipPlacement\"\n      ></ngx-slider-tooltip-wrapper>\n      @if (t.value !== null) {\n        <ngx-slider-tooltip-wrapper\n          class=\"ngx-slider-span ngx-slider-tick-value\"\n          [template]=\"tooltipTemplate\"\n          [tooltip]=\"t.valueTooltip\"\n          [placement]=\"t.valueTooltipPlacement\"\n          [content]=\"t.value\"\n        ></ngx-slider-tooltip-wrapper>\n      }\n      @if (t.legend !== null) {\n        <span class=\"ngx-slider-span ngx-slider-tick-legend\" [innerHTML]=\"t.legend\"></span>\n      }\n    </span>\n  }\n</span>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TooltipWrapperComponent, selector: "ngx-slider-tooltip-wrapper", inputs: ["template", "tooltip", "placement", "content"] }, { kind: "directive", type: SliderLabelDirective, selector: "[ngxSliderLabel]" }, { kind: "directive", type: SliderHandleDirective, selector: "[ngxSliderHandle]" }, { kind: "directive", type: SliderElementDirective, selector: "[ngxSliderElement]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-slider', providers: [NGX_SLIDER_CONTROL_VALUE_ACCESSOR], standalone: true, imports: [CommonModule, TooltipWrapperComponent, SliderLabelDirective, SliderHandleDirective, SliderElementDirective], template: "<!-- // 0 Left selection bar outside two handles -->\n<span ngxSliderElement #leftOuterSelectionBar class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-left-out-selection\">\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 1 Right selection bar outside two handles -->\n<span ngxSliderElement #rightOuterSelectionBar class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-right-out-selection\">\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 2 The whole slider bar -->\n<span ngxSliderElement #fullBar [class.ngx-slider-transparent]=\"fullBarTransparentClass\" class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-full-bar\">\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 3 Selection bar between two handles -->\n<span ngxSliderElement #selectionBar [class.ngx-slider-draggable]=\"selectionBarDraggableClass\" class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-selection-bar\">\n  <span class=\"ngx-slider-span ngx-slider-bar ngx-slider-selection\" [ngStyle]=\"barStyle\"></span>\n</span>\n<!-- // 4 Low slider handle -->\n<span ngxSliderHandle #minHandle class=\"ngx-slider-span ngx-slider-pointer ngx-slider-pointer-min\" [ngStyle]=minPointerStyle></span>\n<!-- // 5 High slider handle -->\n<span ngxSliderHandle #maxHandle [style.display]=\"range ? 'inherit' : 'none'\" class=\"ngx-slider-span ngx-slider-pointer ngx-slider-pointer-max\" [ngStyle]=maxPointerStyle></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 ngxSliderElement #ticksElement [hidden]=\"!showTicks\" [class.ngx-slider-ticks-values-under]=\"ticksUnderValuesClass\" class=\"ngx-slider-ticks\">\n  <span *ngFor=\"let t of ticks\" class=\"ngx-slider-tick\" [ngClass]=\"{'ngx-slider-selected': t.selected}\" [ngStyle]=\"t.style\">\n    <ngx-slider-tooltip-wrapper [template]=\"tooltipTemplate\" [tooltip]=\"t.tooltip\" [placement]=\"t.tooltipPlacement\"></ngx-slider-tooltip-wrapper>\n    <ngx-slider-tooltip-wrapper *ngIf=\"t.value !== null\" class=\"ngx-slider-span ngx-slider-tick-value\"\n        [template]=\"tooltipTemplate\" [tooltip]=\"t.valueTooltip\" [placement]=\"t.valueTooltipPlacement\" [content]=\"t.value\"></ngx-slider-tooltip-wrapper>\n    <span *ngIf=\"t.legend !== null\" class=\"ngx-slider-span ngx-slider-tick-legend\" [innerHTML]=\"t.legend\"></span>\n  </span>\n</span>" }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { class: [{
+            args: [{ selector: 'ngx-slider', providers: [NGX_SLIDER_CONTROL_VALUE_ACCESSOR], standalone: true, imports: [CommonModule, TooltipWrapperComponent, SliderLabelDirective, SliderHandleDirective, SliderElementDirective], template: "<!-- // 0 Left selection bar outside two handles -->\n<span\n  ngxSliderElement\n  #leftOuterSelectionBar\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-left-out-selection\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 1 Right selection bar outside two handles -->\n<span\n  ngxSliderElement\n  #rightOuterSelectionBar\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-right-out-selection\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 2 The whole slider bar -->\n<span\n  ngxSliderElement\n  #fullBar\n  [class.ngx-slider-transparent]=\"fullBarTransparentClass\"\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-full-bar\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 3 Selection bar between two handles -->\n<span\n  ngxSliderElement\n  #selectionBar\n  [class.ngx-slider-draggable]=\"selectionBarDraggableClass\"\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-selection-bar\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar ngx-slider-selection\" [ngStyle]=\"barStyle\"></span>\n</span>\n<!-- // 4 Low slider handle -->\n<span\n  ngxSliderHandle\n  #minHandle\n  class=\"ngx-slider-span ngx-slider-pointer ngx-slider-pointer-min\"\n  [ngStyle]=\"minPointerStyle\"\n></span>\n<!-- // 5 High slider handle -->\n<span\n  ngxSliderHandle\n  #maxHandle\n  [style.display]=\"range ? 'inherit' : 'none'\"\n  class=\"ngx-slider-span ngx-slider-pointer ngx-slider-pointer-max\"\n  [ngStyle]=\"maxPointerStyle\"\n></span>\n<!-- // 6 Floor label -->\n<span ngxSliderLabel #floorLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-limit ngx-slider-floor\"></span>\n<!-- // 7 Ceiling label -->\n<span ngxSliderLabel #ceilLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-limit ngx-slider-ceil\"></span>\n<!-- // 8 Label above the low slider handle -->\n<span ngxSliderLabel #minHandleLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-model-value\"></span>\n<!-- // 9 Label above the high slider handle -->\n<span ngxSliderLabel #maxHandleLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-model-high\"></span>\n<!-- // 10 Combined range label when the slider handles are close ex. 15 - 17 -->\n<span ngxSliderLabel #combinedLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-combined\"></span>\n<!-- // 11 The ticks -->\n<span\n  ngxSliderElement\n  #ticksElement\n  [hidden]=\"!showTicks\"\n  [class.ngx-slider-ticks-values-under]=\"ticksUnderValuesClass\"\n  class=\"ngx-slider-ticks\"\n>\n  @for (t of ticks; track t) {\n    <span class=\"ngx-slider-tick\" [ngClass]=\"{ 'ngx-slider-selected': t.selected }\" [ngStyle]=\"t.style\">\n      <ngx-slider-tooltip-wrapper\n        [template]=\"tooltipTemplate\"\n        [tooltip]=\"t.tooltip\"\n        [placement]=\"t.tooltipPlacement\"\n      ></ngx-slider-tooltip-wrapper>\n      @if (t.value !== null) {\n        <ngx-slider-tooltip-wrapper\n          class=\"ngx-slider-span ngx-slider-tick-value\"\n          [template]=\"tooltipTemplate\"\n          [tooltip]=\"t.valueTooltip\"\n          [placement]=\"t.valueTooltipPlacement\"\n          [content]=\"t.value\"\n        ></ngx-slider-tooltip-wrapper>\n      }\n      @if (t.legend !== null) {\n        <span class=\"ngx-slider-span ngx-slider-tick-legend\" [innerHTML]=\"t.legend\"></span>\n      }\n    </span>\n  }\n</span>\n" }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
             }], value: [{
@@ -4315,15 +4315,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImpor
             }] } });
 
 class DfSliderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfSliderModule, imports: [SliderComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: DfSliderModule, imports: [SliderComponent,
             SliderElementDirective,
             SliderHandleDirective,
             SliderLabelDirective,
             TooltipWrapperComponent, DfSliderDirectionDirective], exports: [DfSliderDirectionDirective, SliderComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSliderModule, imports: [SliderComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSliderModule, imports: [SliderComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSliderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSliderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SliderComponent,
@@ -4350,10 +4350,10 @@ class DfSideNavConfig {
         this.isAppOverlay = false;
         this.isAppOverlayMode = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavConfig, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSideNavConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSideNavConfig, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavConfig, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSideNavConfig, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -4659,15 +4659,15 @@ class DfSideNavService {
     updateOverLay() {
         this._isAppOverlay$.next(this.isAppOverlayMode && this._isCollapsed$.value === false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavService, deps: [{ token: DfSideNavConfig }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSideNavService, deps: [{ token: DfSideNavConfig }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSideNavService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSideNavService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: DfSideNavConfig }]; } });
+        }], ctorParameters: () => [{ type: DfSideNavConfig }] });
 
 const environment = {
     animation: true,
@@ -4863,13 +4863,13 @@ class DfSideNavCollapseConfig {
     set animation(animation) {
         this._animation = animation;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavCollapseConfig, deps: [{ token: i1.NgbConfig }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavCollapseConfig, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSideNavCollapseConfig, deps: [{ token: i1.NgbConfig }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSideNavCollapseConfig, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavCollapseConfig, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSideNavCollapseConfig, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i1.NgbConfig }]; } });
+        }], ctorParameters: () => [{ type: i1.NgbConfig }] });
 
 /**
  * A service for managing the sidenav panel animation.
@@ -4894,15 +4894,15 @@ class DfSideNavCollapseService {
     setAnimation(on) {
         this._sideNavAnimation$.next(on);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavCollapseService, deps: [{ token: DfSideNavCollapseConfig }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavCollapseService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSideNavCollapseService, deps: [{ token: DfSideNavCollapseConfig }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSideNavCollapseService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavCollapseService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSideNavCollapseService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: DfSideNavCollapseConfig }]; } });
+        }], ctorParameters: () => [{ type: DfSideNavCollapseConfig }] });
 
 /**
  * A directive to provide a simple way of hiding and showing the sideNav on the page.
@@ -4973,13 +4973,13 @@ class DfSideNavCollapseDirective {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavCollapseDirective, deps: [{ token: i0.ElementRef }, { token: DfSideNavCollapseService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfSideNavCollapseDirective, isStandalone: true, selector: "[dfSideNavCollapse]", inputs: { collapsed: ["dfSideNavCollapse", "collapsed"], minimized: "minimized" }, outputs: { dfSideNavCollapseChange: "dfSideNavCollapseChange", shown: "shown", hidden: "hidden" }, exportAs: ["dfSideNavCollapse"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSideNavCollapseDirective, deps: [{ token: i0.ElementRef }, { token: DfSideNavCollapseService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: DfSideNavCollapseDirective, isStandalone: true, selector: "[dfSideNavCollapse]", inputs: { collapsed: ["dfSideNavCollapse", "collapsed"], minimized: "minimized" }, outputs: { dfSideNavCollapseChange: "dfSideNavCollapseChange", shown: "shown", hidden: "hidden" }, exportAs: ["dfSideNavCollapse"], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavCollapseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSideNavCollapseDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[dfSideNavCollapse]', exportAs: 'dfSideNavCollapse', standalone: true }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: DfSideNavCollapseService }, { type: i0.NgZone }]; }, propDecorators: { collapsed: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DfSideNavCollapseService }, { type: i0.NgZone }], propDecorators: { collapsed: [{
                 type: Input,
                 args: ['dfSideNavCollapse']
             }], dfSideNavCollapseChange: [{
@@ -4993,11 +4993,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImpor
             }] } });
 
 class DfSideNavCollapseModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavCollapseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavCollapseModule, imports: [DfSideNavCollapseDirective], exports: [DfSideNavCollapseDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavCollapseModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSideNavCollapseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: DfSideNavCollapseModule, imports: [DfSideNavCollapseDirective], exports: [DfSideNavCollapseDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSideNavCollapseModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavCollapseModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSideNavCollapseModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfSideNavCollapseDirective],
@@ -5018,60 +5018,16 @@ class DfManageSideNavDirective {
             this.renderer.removeClass(this.element.nativeElement, 'df-sidenav-list-withactivated');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", 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: "16.1.4", type: DfManageSideNavDirective, isStandalone: true, selector: "[dfManageSideNav]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", 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: "17.1.0", type: DfManageSideNavDirective, isStandalone: true, selector: "[dfManageSideNav]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfManageSideNavDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfManageSideNavDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfManageSideNav]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
-
-/**
- * @param element the HTML element
- * @returns whether the element is overflowing
- */
-function hasOverflow(element) {
-    return element?.offsetHeight < element?.scrollHeight || element?.offsetWidth < element?.scrollWidth;
-}
-
-/**
- * DfTitleTruncate directive
- * It adds the title attribute with the element's inner text as value
- * when the element is truncated.
- */
-class DfTitleTruncateDirective {
-    constructor(elementRef, renderer) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-    }
-    ngOnInit() {
-        this.renderer.addClass(this.elementRef.nativeElement, 'text-truncate');
-    }
-    ngDoCheck() {
-        const { nativeElement } = this.elementRef;
-        const titleAttributeName = 'title';
-        if (hasOverflow(nativeElement)) {
-            const value = nativeElement.innerText;
-            nativeElement.setAttribute(titleAttributeName, value);
-        }
-        else if (nativeElement.getAttribute(titleAttributeName)) {
-            nativeElement.removeAttribute(titleAttributeName);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfTitleTruncateDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfTitleTruncateDirective, isStandalone: true, selector: "[dfTitleTruncate]", exportAs: ["dfTitleTruncate"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfTitleTruncateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    exportAs: 'dfTitleTruncate',
-                    selector: '[dfTitleTruncate]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 let uniqueId = 0;
 /**
@@ -5092,20 +5048,12 @@ class DfSideNavListComponent {
         uniqueId++;
         return `df-sidenav-id-${uniqueId};`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: DfSideNavListComponent, isStandalone: true, selector: "df-sidenavlist", inputs: { items: "items", tplIcon: "tplIcon", tplItem: "tplItem", currentItem: "currentItem", id: "id" }, ngImport: i0, template: "<ul class=\"df-sidenav-list\" [ngbCollapse]=\"currentItem?.isCollapsed ?? false\" [attr.id]=\"id\">\n  <li *ngFor=\"let item of items; let i = index\" [ngSwitch]=\"item.type\" dfManageSideNav>\n    <ng-container *ngSwitchCase=\"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          <ng-template\n            *ngIf=\"tplIcon && item.icon; else elseIcon\"\n            [ngTemplateOutlet]=\"tplIcon.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          ></ng-template>\n          <ng-template #elseIcon>\n            <span *ngIf=\"item.icon\" aria-hidden=\"true\" class=\"{{ item.icon }} df-sidenav-icon\"></span>\n          </ng-template>\n          <span class=\"flex-grow-1 text-nowrap\" dfTitleTruncate>{{ item.title }}</span>\n          <span\n            class=\"ms-3\"\n            [class.icon-chevron-down]=\"item.isCollapsed\"\n            [class.icon-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      <ng-container *ngIf=\"!item.breakpoints; else elseSubMenus\">\n        <ng-container *ngTemplateOutlet=\"subMenus\"></ng-container>\n      </ng-container>\n      <ng-template #elseSubMenus>\n        <ng-container *dfIfMedia=\"item.breakpoints!\">\n          <ng-container *ngTemplateOutlet=\"subMenus\"></ng-container>\n        </ng-container>\n      </ng-template>\n    </ng-container>\n    <ng-template #dfSideNavItemContent>\n      <ng-template\n        *ngIf=\"tplIcon && item.icon; else elseIcon\"\n        [ngTemplateOutlet]=\"tplIcon.templateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\n      ></ng-template>\n      <ng-template #elseIcon>\n        <span *ngIf=\"item.icon\" aria-hidden=\"true\" class=\"{{ item.icon }} df-sidenav-icon me-5\"></span>\n      </ng-template>\n      <span class=\"flex-grow-1 text-nowrap\" dfTitleTruncate>{{ item.title }}</span>\n    </ng-template>\n    <ng-container *ngSwitchCase=\"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      <ng-container *ngIf=\"!item.breakpoints; else elseAction\">\n        <ng-container *ngTemplateOutlet=\"dfSideNavItemButton\"></ng-container>\n      </ng-container>\n      <ng-template #elseAction>\n        <ng-container *dfIfMedia=\"item.breakpoints!\">\n          <ng-container *ngTemplateOutlet=\"dfSideNavItemButton\"></ng-container>\n        </ng-container>\n      </ng-template>\n    </ng-container>\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    <ng-container *ngSwitchCase=\"sideNavService.type.routerLink\">\n      <ng-container *ngIf=\"!item.breakpoints; else elseRouterLink\">\n        <ng-container *ngTemplateOutlet=\"dfRouterTemplate\"></ng-container>\n      </ng-container>\n      <ng-template #elseRouterLink>\n        <ng-container *dfIfMedia=\"item.breakpoints!\">\n          <ng-container *ngTemplateOutlet=\"dfRouterTemplate\"></ng-container>\n        </ng-container>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"sideNavService.type.separator\">\n      <ng-template #dfSeparatorTmp>\n        <hr class=\"spacing-01\" />\n      </ng-template>\n      <ng-container *ngIf=\"!item.breakpoints; else elseSeparator\">\n        <ng-container *ngTemplateOutlet=\"dfSeparatorTmp\"></ng-container>\n      </ng-container>\n      <ng-template #elseSeparator>\n        <ng-container *dfIfMedia=\"item.breakpoints!\">\n          <ng-container *ngTemplateOutlet=\"dfSeparatorTmp\"></ng-container>\n        </ng-container>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"sideNavService.type.template\">\n      <ng-template\n        *ngIf=\"tplItem\"\n        [ngTemplateOutlet]=\"tplItem.templateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\n      ></ng-template>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"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      <ng-container *ngIf=\"!item.breakpoints; else elseTitle\">\n        <ng-container *ngTemplateOutlet=\"dfTitleTmp\"></ng-container>\n      </ng-container>\n      <ng-template #elseTitle>\n        <ng-container *dfIfMedia=\"item.breakpoints!\">\n          <ng-container *ngTemplateOutlet=\"dfTitleTmp\"></ng-container>\n        </ng-container>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\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      <ng-container *ngIf=\"!item.breakpoints; else elseDefault\">\n        <ng-container *ngTemplateOutlet=\"dfLinkDefaultTmp\"></ng-container>\n      </ng-container>\n      <ng-template #elseDefault>\n        <ng-container *dfIfMedia=\"item.breakpoints!\">\n          <ng-container *ngTemplateOutlet=\"dfLinkDefaultTmp\"></ng-container>\n        </ng-container>\n      </ng-template>\n    </ng-container>\n  </li>\n</ul>\n", dependencies: [{ kind: "component", type: DfSideNavListComponent, selector: "df-sidenavlist", inputs: ["items", "tplIcon", "tplItem", "currentItem", "id"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: NgbCollapseModule }, { kind: "directive", type: i1.NgbCollapse, selector: "[ngbCollapse]", inputs: ["animation", "ngbCollapse", "horizontal"], outputs: ["ngbCollapseChange", "shown", "hidden"], exportAs: ["ngbCollapse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: DfMediaModule }, { kind: "directive", type: DfIfMediaDirective, selector: "[dfIfMedia]", inputs: ["dfIfMedia"] }, { kind: "ngmodule", type: DfSideNavCollapseModule }, { kind: "directive", type: DfManageSideNavDirective, selector: "[dfManageSideNav]" }, { kind: "directive", type: DfTitleTruncateDirective, selector: "[dfTitleTruncate]", exportAs: ["dfTitleTruncate"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSideNavListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: DfSideNavListComponent, isStandalone: true, selector: "df-sidenavlist", inputs: { items: "items", tplIcon: "tplIcon", tplItem: "tplItem", currentItem: "currentItem", id: "id" }, ngImport: i0, template: "<ul class=\"df-sidenav-list\" [ngbCollapse]=\"currentItem?.isCollapsed ?? false\" [attr.id]=\"id\">\n  @for (item of items; track item; let i = $index) {\n    <li dfManageSideNav>\n      <ng-template #dfSideNavItemContent>\n        @if (tplIcon && item.icon) {\n          <ng-template\n            [ngTemplateOutlet]=\"tplIcon.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          ></ng-template>\n        } @else if (item.icon) {\n          <span aria-hidden=\"true\" class=\"{{ item.icon }} df-sidenav-icon me-5\"></span>\n        }\n        <span class=\"flex-grow-1 text-nowrap text-truncate\">{{ item.title }}</span>\n      </ng-template>\n      @switch (item.type) {\n        @case (sideNavService.type.subMenus) {\n          <ng-template #subMenus>\n            <button\n              class=\"df-sidenav-item d-flex align-items-center\"\n              (click)=\"sideNavService.toggle(item)\"\n              type=\"button\"\n              [attr.aria-expanded]=\"!item.isCollapsed\"\n              [attr.aria-controls]=\"'sidenavControl' + controlledUniqueId.toString() + '-' + i\"\n              [class.df-sidenav-item-withicon]=\"item.icon\"\n            >\n              @if (tplIcon && item.icon) {\n                <ng-template\n                  [ngTemplateOutlet]=\"tplIcon.templateRef\"\n                  [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                ></ng-template>\n              } @else if (item.icon) {\n                <span aria-hidden=\"true\" class=\"{{ item.icon }} df-sidenav-icon me-5\"></span>\n              }\n              <span class=\"flex-grow-1 text-nowrap text-truncate\">{{ item.title }}</span>\n              <span\n                class=\"ms-3\"\n                [class.icon-chevron-down]=\"item.isCollapsed\"\n                [class.icon-chevron-up]=\"!item.isCollapsed\"\n              ></span>\n              <!-- put the chevron as icon directly in the menu -->\n              <!-- todo the icon and the minimized -->\n            </button>\n            <!-- we don't pass the icons as they are not suppose to have ones ??-->\n            <df-sidenavlist\n              [items]=\"item.subMenus ?? []\"\n              [tplItem]=\"tplItem\"\n              [currentItem]=\"item\"\n              [id]=\"'sidenavControl' + controlledUniqueId.toString() + '-' + i\"\n            ></df-sidenavlist>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"subMenus\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"subMenus\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.actionButton) {\n          <ng-template #dfSideNavItemButton>\n            <button\n              class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n              (click)=\"sideNavService.activeItem(item)\"\n              [class.active]=\"item.isActive\"\n            >\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n            </button>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfSideNavItemButton\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemButton\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.routerLink) {\n          <ng-template #dfRouterTemplate>\n            <a\n              class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n              routerLinkActive=\"active\"\n              routerLink=\"{{ item.value }}\"\n              ariaCurrentWhenActive=\"page\"\n            >\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n            </a>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfRouterTemplate\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfRouterTemplate\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.separator) {\n          <ng-template #dfSeparatorTmp>\n            <hr class=\"spacing-01\" />\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfSeparatorTmp\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfSeparatorTmp\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.template) {\n          @if (tplItem) {\n            <ng-template\n              [ngTemplateOutlet]=\"tplItem.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            ></ng-template>\n          }\n        }\n        @case (sideNavService.type.title) {\n          <ng-template #dfTitleTmp>\n            <div class=\"df-sidenav-item df-sidenav-title d-flex align-items-center flex-grow-1\">\n              <span class=\"text-nowrap text-truncate text-uppercase text-muted\">{{ item.title }}</span>\n            </div>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfTitleTmp\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfTitleTmp\"></ng-container>\n            </ng-container>\n          }\n        }\n        @default {\n          <ng-template #dfLinkDefaultTmp>\n            <a\n              class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n              href=\"{{ item.value }}\"\n              [class.active]=\"item.isActive && item.type === sideNavService.type.link\"\n              [attr.target]=\"item.type === sideNavService.type.externalLink ? '_blank' : ''\"\n            >\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n            </a>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfLinkDefaultTmp\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfLinkDefaultTmp\"></ng-container>\n            </ng-container>\n          }\n        }\n      }\n    </li>\n  }\n</ul>\n", dependencies: [{ kind: "component", type: DfSideNavListComponent, selector: "df-sidenavlist", inputs: ["items", "tplIcon", "tplItem", "currentItem", "id"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NgbCollapseModule }, { kind: "directive", type: i1.NgbCollapse, selector: "[ngbCollapse]", inputs: ["animation", "ngbCollapse", "horizontal"], outputs: ["ngbCollapseChange", "shown", "hidden"], exportAs: ["ngbCollapse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: DfMediaModule }, { kind: "directive", type: DfIfMediaDirective, selector: "[dfIfMedia]", inputs: ["dfIfMedia"] }, { kind: "ngmodule", type: DfSideNavCollapseModule }, { kind: "directive", type: DfManageSideNavDirective, selector: "[dfManageSideNav]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSideNavListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'df-sidenavlist', standalone: true, imports: [
-                        CommonModule,
-                        NgbCollapseModule,
-                        RouterModule,
-                        DfMediaModule,
-                        DfSideNavCollapseModule,
-                        DfManageSideNavDirective,
-                        DfTitleTruncateDirective
-                    ], template: "<ul class=\"df-sidenav-list\" [ngbCollapse]=\"currentItem?.isCollapsed ?? false\" [attr.id]=\"id\">\n  <li *ngFor=\"let item of items; let i = index\" [ngSwitch]=\"item.type\" dfManageSideNav>\n    <ng-container *ngSwitchCase=\"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          <ng-template\n            *ngIf=\"tplIcon && item.icon; else elseIcon\"\n            [ngTemplateOutlet]=\"tplIcon.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          ></ng-template>\n          <ng-template #elseIcon>\n            <span *ngIf=\"item.icon\" aria-hidden=\"true\" class=\"{{ item.icon }} df-sidenav-icon\"></span>\n          </ng-template>\n          <span class=\"flex-grow-1 text-nowrap\" dfTitleTruncate>{{ item.title }}</span>\n          <span\n            class=\"ms-3\"\n            [class.icon-chevron-down]=\"item.isCollapsed\"\n            [class.icon-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      <ng-container *ngIf=\"!item.breakpoints; else elseSubMenus\">\n        <ng-container *ngTemplateOutlet=\"subMenus\"></ng-container>\n      </ng-container>\n      <ng-template #elseSubMenus>\n        <ng-container *dfIfMedia=\"item.breakpoints!\">\n          <ng-container *ngTemplateOutlet=\"subMenus\"></ng-container>\n        </ng-container>\n      </ng-template>\n    </ng-container>\n    <ng-template #dfSideNavItemContent>\n      <ng-template\n        *ngIf=\"tplIcon && item.icon; else elseIcon\"\n        [ngTemplateOutlet]=\"tplIcon.templateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\n      ></ng-template>\n      <ng-template #elseIcon>\n        <span *ngIf=\"item.icon\" aria-hidden=\"true\" class=\"{{ item.icon }} df-sidenav-icon me-5\"></span>\n      </ng-template>\n      <span class=\"flex-grow-1 text-nowrap\" dfTitleTruncate>{{ item.title }}</span>\n    </ng-template>\n    <ng-container *ngSwitchCase=\"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      <ng-container *ngIf=\"!item.breakpoints; else elseAction\">\n        <ng-container *ngTemplateOutlet=\"dfSideNavItemButton\"></ng-container>\n      </ng-container>\n      <ng-template #elseAction>\n        <ng-container *dfIfMedia=\"item.breakpoints!\">\n          <ng-container *ngTemplateOutlet=\"dfSideNavItemButton\"></ng-container>\n        </ng-container>\n      </ng-template>\n    </ng-container>\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    <ng-container *ngSwitchCase=\"sideNavService.type.routerLink\">\n      <ng-container *ngIf=\"!item.breakpoints; else elseRouterLink\">\n        <ng-container *ngTemplateOutlet=\"dfRouterTemplate\"></ng-container>\n      </ng-container>\n      <ng-template #elseRouterLink>\n        <ng-container *dfIfMedia=\"item.breakpoints!\">\n          <ng-container *ngTemplateOutlet=\"dfRouterTemplate\"></ng-container>\n        </ng-container>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"sideNavService.type.separator\">\n      <ng-template #dfSeparatorTmp>\n        <hr class=\"spacing-01\" />\n      </ng-template>\n      <ng-container *ngIf=\"!item.breakpoints; else elseSeparator\">\n        <ng-container *ngTemplateOutlet=\"dfSeparatorTmp\"></ng-container>\n      </ng-container>\n      <ng-template #elseSeparator>\n        <ng-container *dfIfMedia=\"item.breakpoints!\">\n          <ng-container *ngTemplateOutlet=\"dfSeparatorTmp\"></ng-container>\n        </ng-container>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"sideNavService.type.template\">\n      <ng-template\n        *ngIf=\"tplItem\"\n        [ngTemplateOutlet]=\"tplItem.templateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\n      ></ng-template>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"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      <ng-container *ngIf=\"!item.breakpoints; else elseTitle\">\n        <ng-container *ngTemplateOutlet=\"dfTitleTmp\"></ng-container>\n      </ng-container>\n      <ng-template #elseTitle>\n        <ng-container *dfIfMedia=\"item.breakpoints!\">\n          <ng-container *ngTemplateOutlet=\"dfTitleTmp\"></ng-container>\n        </ng-container>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\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      <ng-container *ngIf=\"!item.breakpoints; else elseDefault\">\n        <ng-container *ngTemplateOutlet=\"dfLinkDefaultTmp\"></ng-container>\n      </ng-container>\n      <ng-template #elseDefault>\n        <ng-container *dfIfMedia=\"item.breakpoints!\">\n          <ng-container *ngTemplateOutlet=\"dfLinkDefaultTmp\"></ng-container>\n        </ng-container>\n      </ng-template>\n    </ng-container>\n  </li>\n</ul>\n" }]
+            args: [{ selector: 'df-sidenavlist', standalone: true, imports: [CommonModule, NgbCollapseModule, RouterModule, DfMediaModule, DfSideNavCollapseModule, DfManageSideNavDirective], template: "<ul class=\"df-sidenav-list\" [ngbCollapse]=\"currentItem?.isCollapsed ?? false\" [attr.id]=\"id\">\n  @for (item of items; track item; let i = $index) {\n    <li dfManageSideNav>\n      <ng-template #dfSideNavItemContent>\n        @if (tplIcon && item.icon) {\n          <ng-template\n            [ngTemplateOutlet]=\"tplIcon.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          ></ng-template>\n        } @else if (item.icon) {\n          <span aria-hidden=\"true\" class=\"{{ item.icon }} df-sidenav-icon me-5\"></span>\n        }\n        <span class=\"flex-grow-1 text-nowrap text-truncate\">{{ item.title }}</span>\n      </ng-template>\n      @switch (item.type) {\n        @case (sideNavService.type.subMenus) {\n          <ng-template #subMenus>\n            <button\n              class=\"df-sidenav-item d-flex align-items-center\"\n              (click)=\"sideNavService.toggle(item)\"\n              type=\"button\"\n              [attr.aria-expanded]=\"!item.isCollapsed\"\n              [attr.aria-controls]=\"'sidenavControl' + controlledUniqueId.toString() + '-' + i\"\n              [class.df-sidenav-item-withicon]=\"item.icon\"\n            >\n              @if (tplIcon && item.icon) {\n                <ng-template\n                  [ngTemplateOutlet]=\"tplIcon.templateRef\"\n                  [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                ></ng-template>\n              } @else if (item.icon) {\n                <span aria-hidden=\"true\" class=\"{{ item.icon }} df-sidenav-icon me-5\"></span>\n              }\n              <span class=\"flex-grow-1 text-nowrap text-truncate\">{{ item.title }}</span>\n              <span\n                class=\"ms-3\"\n                [class.icon-chevron-down]=\"item.isCollapsed\"\n                [class.icon-chevron-up]=\"!item.isCollapsed\"\n              ></span>\n              <!-- put the chevron as icon directly in the menu -->\n              <!-- todo the icon and the minimized -->\n            </button>\n            <!-- we don't pass the icons as they are not suppose to have ones ??-->\n            <df-sidenavlist\n              [items]=\"item.subMenus ?? []\"\n              [tplItem]=\"tplItem\"\n              [currentItem]=\"item\"\n              [id]=\"'sidenavControl' + controlledUniqueId.toString() + '-' + i\"\n            ></df-sidenavlist>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"subMenus\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"subMenus\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.actionButton) {\n          <ng-template #dfSideNavItemButton>\n            <button\n              class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n              (click)=\"sideNavService.activeItem(item)\"\n              [class.active]=\"item.isActive\"\n            >\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n            </button>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfSideNavItemButton\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemButton\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.routerLink) {\n          <ng-template #dfRouterTemplate>\n            <a\n              class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n              routerLinkActive=\"active\"\n              routerLink=\"{{ item.value }}\"\n              ariaCurrentWhenActive=\"page\"\n            >\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n            </a>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfRouterTemplate\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfRouterTemplate\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.separator) {\n          <ng-template #dfSeparatorTmp>\n            <hr class=\"spacing-01\" />\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfSeparatorTmp\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfSeparatorTmp\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.template) {\n          @if (tplItem) {\n            <ng-template\n              [ngTemplateOutlet]=\"tplItem.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            ></ng-template>\n          }\n        }\n        @case (sideNavService.type.title) {\n          <ng-template #dfTitleTmp>\n            <div class=\"df-sidenav-item df-sidenav-title d-flex align-items-center flex-grow-1\">\n              <span class=\"text-nowrap text-truncate text-uppercase text-muted\">{{ item.title }}</span>\n            </div>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfTitleTmp\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfTitleTmp\"></ng-container>\n            </ng-container>\n          }\n        }\n        @default {\n          <ng-template #dfLinkDefaultTmp>\n            <a\n              class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n              href=\"{{ item.value }}\"\n              [class.active]=\"item.isActive && item.type === sideNavService.type.link\"\n              [attr.target]=\"item.type === sideNavService.type.externalLink ? '_blank' : ''\"\n            >\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n            </a>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfLinkDefaultTmp\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfLinkDefaultTmp\"></ng-container>\n            </ng-container>\n          }\n        }\n      }\n    </li>\n  }\n</ul>\n" }]
         }], propDecorators: { items: [{
                 type: Input
             }], tplIcon: [{
@@ -5122,35 +5070,35 @@ class DfSideNavHeaderDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavHeaderDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfSideNavHeaderDirective, isStandalone: true, selector: "ng-template[dfSideNavHeader]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSideNavHeaderDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: DfSideNavHeaderDirective, isStandalone: true, selector: "ng-template[dfSideNavHeader]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSideNavHeaderDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[dfSideNavHeader]', standalone: true }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 class DfSideNavIconDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavIconDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfSideNavIconDirective, isStandalone: true, selector: "ng-template[dfSideNavIcon]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSideNavIconDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: DfSideNavIconDirective, isStandalone: true, selector: "ng-template[dfSideNavIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSideNavIconDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[dfSideNavIcon]', standalone: true }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 class DfSideNavItemDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavItemDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfSideNavItemDirective, isStandalone: true, selector: "ng-template[dfSideNavItem]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSideNavItemDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: DfSideNavItemDirective, isStandalone: true, selector: "ng-template[dfSideNavItem]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSideNavItemDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[dfSideNavItem]', standalone: true }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 /**
  * SideNav is a component to provide navigation feature with a panel on the side of your page
  *
@@ -5174,13 +5122,13 @@ class DfSideNavComponent {
         this.subscription.unsubscribe();
         this.sideNavService.removeSideBar();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: DfSideNavComponent, isStandalone: true, selector: "df-sidenav", host: { properties: { "class.df-sidenav-menu-overlay": "this.overlayClass", "class": "this.elements" } }, queries: [{ propertyName: "tplHeader", first: true, predicate: DfSideNavHeaderDirective, descendants: true }, { propertyName: "tplIcon", first: true, predicate: DfSideNavIconDirective, descendants: true }, { propertyName: "tplItem", first: true, predicate: DfSideNavItemDirective, descendants: true }], ngImport: i0, template: "<ng-template *ngIf=\"tplHeader\" [ngTemplateOutlet]=\"tplHeader.templateRef\"></ng-template>\n<df-sidenavlist [items]=\"(sideNavService.sideNavItems$ | async) ?? []\" [tplIcon]=\"tplIcon\" [tplItem]=\"tplItem\"></df-sidenavlist>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "component", type: DfSideNavListComponent, selector: "df-sidenavlist", inputs: ["items", "tplIcon", "tplItem", "currentItem", "id"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSideNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: DfSideNavComponent, isStandalone: true, selector: "df-sidenav", host: { properties: { "class.df-sidenav-menu-overlay": "this.overlayClass", "class": "this.elements" } }, queries: [{ propertyName: "tplHeader", first: true, predicate: DfSideNavHeaderDirective, descendants: true }, { propertyName: "tplIcon", first: true, predicate: DfSideNavIconDirective, descendants: true }, { propertyName: "tplItem", first: true, predicate: DfSideNavItemDirective, descendants: true }], ngImport: i0, template: "@if (tplHeader) {\n  <ng-template [ngTemplateOutlet]=\"tplHeader.templateRef\"></ng-template>\n}\n<df-sidenavlist\n  [items]=\"(sideNavService.sideNavItems$ | async) ?? []\"\n  [tplIcon]=\"tplIcon\"\n  [tplItem]=\"tplItem\"\n></df-sidenavlist>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "component", type: DfSideNavListComponent, selector: "df-sidenavlist", inputs: ["items", "tplIcon", "tplItem", "currentItem", "id"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSideNavComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'df-sidenav', standalone: true, imports: [CommonModule, DfSideNavListComponent], template: "<ng-template *ngIf=\"tplHeader\" [ngTemplateOutlet]=\"tplHeader.templateRef\"></ng-template>\n<df-sidenavlist [items]=\"(sideNavService.sideNavItems$ | async) ?? []\" [tplIcon]=\"tplIcon\" [tplItem]=\"tplItem\"></df-sidenavlist>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { tplHeader: [{
+            args: [{ selector: 'df-sidenav', standalone: true, imports: [CommonModule, DfSideNavListComponent], template: "@if (tplHeader) {\n  <ng-template [ngTemplateOutlet]=\"tplHeader.templateRef\"></ng-template>\n}\n<df-sidenavlist\n  [items]=\"(sideNavService.sideNavItems$ | async) ?? []\"\n  [tplIcon]=\"tplIcon\"\n  [tplItem]=\"tplItem\"\n></df-sidenavlist>\n" }]
+        }], ctorParameters: () => [], propDecorators: { tplHeader: [{
                 type: ContentChild,
                 args: [DfSideNavHeaderDirective, { static: false }]
             }], tplIcon: [{
@@ -5234,16 +5182,16 @@ class DfExcludeTrapDirective {
             this.subscriptionInput.unsubscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfExcludeTrapDirective, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfExcludeTrapDirective, isStandalone: true, selector: "[dfExcludeTrap]", inputs: { dfExcludeTrapSelector: "dfExcludeTrapSelector", dfExcludeTrap: "dfExcludeTrap" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfExcludeTrapDirective, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: DfExcludeTrapDirective, isStandalone: true, selector: "[dfExcludeTrap]", inputs: { dfExcludeTrapSelector: "dfExcludeTrapSelector", dfExcludeTrap: "dfExcludeTrap" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfExcludeTrapDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfExcludeTrapDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfExcludeTrap]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { dfExcludeTrapSelector: [{
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ElementRef }], propDecorators: { dfExcludeTrapSelector: [{
                 type: Input
             }], dfExcludeTrap: [{
                 type: Input
@@ -5331,18 +5279,18 @@ class DfManageNavSelectDirective {
             (listBadge[currentPos - 1] || document.activeElement).focus();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", 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: "16.1.4", 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: "17.1.0", 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: "17.1.0", 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: "16.1.4", ngImport: i0, type: DfManageNavSelectDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfManageNavSelectDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfManageNavSelect]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.NgSelectComponent, decorators: [{
+        }], ctorParameters: () => [{ type: i1$2.NgSelectComponent, decorators: [{
                     type: Host
-                }] }, { type: i0.ElementRef }, { type: DfDirectionDetectionService }, { type: i0.Renderer2 }]; }, propDecorators: { handleKeyDown: [{
+                }] }, { type: i0.ElementRef }, { type: DfDirectionDetectionService }, { type: i0.Renderer2 }], propDecorators: { handleKeyDown: [{
                 type: HostListener,
                 args: ['keydown.arrowLeft', ['$event']]
             }], handleKeyDownBackspace: [{
@@ -5396,16 +5344,16 @@ class DfOptionHighlightDirective {
     isDefined(value) {
         return value !== undefined && value !== null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfOptionHighlightDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfOptionHighlightDirective, isStandalone: true, selector: "[dfOptionHighlight]", inputs: { term: ["dfOptionHighlight", "term"] }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfOptionHighlightDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: DfOptionHighlightDirective, isStandalone: true, selector: "[dfOptionHighlight]", inputs: { term: ["dfOptionHighlight", "term"] }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfOptionHighlightDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfOptionHighlightDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfOptionHighlight]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { term: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { term: [{
                 type: Input,
                 args: ['dfOptionHighlight']
             }] } });
@@ -5444,16 +5392,16 @@ class DfManageBadgeEventsDirective {
         this.dfManageBadgeEventsSelect[0](this.dfManageBadgeEventsSelect[1]);
         event.stopPropagation();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfManageBadgeEventsDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfManageBadgeEventsDirective, isStandalone: true, selector: "[dfManageBadgeEventsSelect]", inputs: { dfManageBadgeEventsSelect: "dfManageBadgeEventsSelect" }, host: { listeners: { "keydown.Backspace": "handleKeyDownBackspace($event)", "click": "handleClick($event)", "keydown.Enter": "handleKeyDownEnter($event)", "keydown.Delete": "handleKeyDownDelete($event)" }, properties: { "attr.tabindex": "this.tabindex" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfManageBadgeEventsDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: DfManageBadgeEventsDirective, isStandalone: true, selector: "[dfManageBadgeEventsSelect]", inputs: { dfManageBadgeEventsSelect: "dfManageBadgeEventsSelect" }, host: { listeners: { "keydown.Backspace": "handleKeyDownBackspace($event)", "click": "handleClick($event)", "keydown.Enter": "handleKeyDownEnter($event)", "keydown.Delete": "handleKeyDownDelete($event)" }, properties: { "attr.tabindex": "this.tabindex" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfManageBadgeEventsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfManageBadgeEventsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfManageBadgeEventsSelect]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { dfManageBadgeEventsSelect: [{
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { dfManageBadgeEventsSelect: [{
                 type: Input
             }], tabindex: [{
                 type: HostBinding,
@@ -5473,11 +5421,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImpor
             }] } });
 
 class DfSelectModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfSelectModule, imports: [DfManageNavSelectDirective, DfManageBadgeEventsDirective, DfOptionHighlightDirective], exports: [DfManageNavSelectDirective, DfManageBadgeEventsDirective, DfOptionHighlightDirective, NgSelectModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSelectModule, imports: [NgSelectModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: DfSelectModule, imports: [DfManageNavSelectDirective, DfManageBadgeEventsDirective, DfOptionHighlightDirective], exports: [DfManageNavSelectDirective, DfManageBadgeEventsDirective, DfOptionHighlightDirective, NgSelectModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSelectModule, imports: [NgSelectModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfManageNavSelectDirective, DfManageBadgeEventsDirective, DfOptionHighlightDirective],
@@ -5688,10 +5636,10 @@ class DfStepperService {
         this._state.steps[index].warning = false;
         this.updateStepperState();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfStepperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfStepperService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfStepperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfStepperService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfStepperService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfStepperService, decorators: [{
             type: Injectable
         }] });
 
@@ -5723,10 +5671,10 @@ class DfStepperStepDirective {
     ngOnDestroy() {
         this.unlistener.forEach((ul) => ul());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfStepperStepDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfStepperStepDirective, isStandalone: true, selector: "[dfStepperStep]", exportAs: ["dfStepperStep"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfStepperStepDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: DfStepperStepDirective, isStandalone: true, selector: "[dfStepperStep]", exportAs: ["dfStepperStep"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfStepperStepDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfStepperStepDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfStepperStep]',
@@ -5835,10 +5783,10 @@ class DfStepperDirective {
             this.stepperService.resetFocus();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfStepperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfStepperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", 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: "16.1.4", ngImport: i0, type: DfStepperDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfStepperDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfStepperLogic]',
@@ -5875,10 +5823,10 @@ class DfStepperStepContentDirective {
         // eslint-disable-next-line @angular-eslint/no-input-rename
         this.dfStepperStepContent = -1;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfStepperStepContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfStepperStepContentDirective, isStandalone: true, selector: "ng-template[dfStepperStepContent]", inputs: { dfStepperStepContent: ["dfStepperStepContent", "dfStepperStepContent", (value) => numberAttribute(value, -1)] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfStepperStepContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.1.0", type: DfStepperStepContentDirective, isStandalone: true, selector: "ng-template[dfStepperStepContent]", inputs: { dfStepperStepContent: ["dfStepperStepContent", "dfStepperStepContent", (value) => numberAttribute(value, -1)] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfStepperStepContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfStepperStepContentDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[dfStepperStepContent]', standalone: true }]
         }], propDecorators: { dfStepperStepContent: [{
@@ -5906,10 +5854,10 @@ class DfStepperComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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 }], 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<ng-container *ngIf=\"state\">\n  <ng-template ngFor let-step [ngForOf]=\"state.steps\" let-i=\"index\">\n    <button #stepbasic class=\"btn btn-link df-stepper-step\"\n      dfStepperStep\n      [class.active]=\"i === state.active\"\n      [class.flex-row]=\"state.isInline\"\n      [attr.tabIndex]=\"i === state.active ? 0 : -1\"\n      [class.df-stepper-step-warning]=\"step.type === 'warning'\"\n      [class.df-stepper-step-completed]=\"step.type === 'completed'\"\n      [class.df-stepper-step-current]=\"step.type === 'current'\"\n      [class.df-stepper-step-future]=\"step.type === 'future'\"\n      [disabled]=\"state.isLinear && (step.type === 'future' || step.type === 'completed')\"\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\" [attr.aria-controls]=\"step.ariaControl\" (click)=\"stepperService.selectWithFocus(i)\">\n      <div\n        [class.df-stepper-number-current]=\"step.type === 'current'\"\n        [class.df-stepper-outline-icon]=\"step.type === 'warning'\"\n        [class.icon-exclamation-triangle]=\"step.type === 'warning'\"\n        [class.df-stepper-icon]=\"step.type === 'completed'\"\n        [class.icon-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 [class.align-items-center]=\"!state.isInline\"\n      [class.flex-column]=\"state.isInline\"\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        <span *ngIf=\"step.type === 'warning'\" class=\"visually-hidden\">{{stepperService.warningLabel}}</span>\n        <span class=\"df-stepper-label\">{{step.label}}</span>\n        <span *ngIf=\"state.isInline && step.optionalLabel\" class=\"df-stepper-optional-label\">{{step.optionalLabel}}</span>\n        <span *ngIf=\"step.completed\" class=\"visually-hidden\">{{stepperService.completedLabel}}</span>\n      </div>\n    </button>\n    <ng-container *ngIf=\"!state.isVertical && i < state.steps.length - 1 \" [ngTemplateOutlet]=\"myStepperLine\"></ng-container>\n    <div *ngIf=\"state.isVertical && i < state.steps.length\" [class.d-none]=\"state.steps.length - 1 === i\" role=\"tabpanel\" [id]=\"step.ariaControl\" class=\"df-vertical-stepper-panel df-vertical-stepper-line\">\n      <ng-template *ngIf=\"mapStepToContent.has(i) && state.active === i\" [ngTemplateOutlet]=\"mapStepToContent.get(i) || null\" [ngTemplateOutletContext]=\"{state, index: i, service: stepperService}\"></ng-template>\n    </div>\n  </ng-template>\n</ng-container>\n<div 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  *ngIf=\"stepperService.stepperState$ | async as state\">\n  <span class=\"df-stepper-label\">{{state.steps[state.active].label}}</span>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "directive", type: DfStepperStepDirective, selector: "[dfStepperStep]", exportAs: ["dfStepperStep"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: DfStepperComponent, isStandalone: true, selector: "[dfStepper]", host: { attributes: { "role": "tablist" }, properties: { "class.df-vertical-stepper": "state?.isVertical", "attr.aria-label": "stepperService.stepperAriaLabel", "attr.aria-orientation": "state?.isVertical ? \"vertical\": null" }, classAttribute: "df-stepper mb-2" }, queries: [{ propertyName: "tplStepsContent", predicate: DfStepperStepContentDirective }], hostDirectives: [{ directive: DfStepperDirective }], ngImport: i0, template: "<ng-template #myStepperLine>\n  <div class=\"df-stepper-line-wrapper\">\n    <div class=\"df-stepper-line\">\n      <div class=\"df-stepper-horizontal-line\"></div>\n    </div>\n    <div class=\"df-stepper-line d-none d-sm-flex\">\n      <div class=\"flex-grow-1\"></div>\n    </div>\n  </div>\n</ng-template>\n@if (state) {\n  @for (step of state.steps; track step; let i = $index) {\n    <button\n      #stepbasic\n      class=\"btn btn-link df-stepper-step\"\n      dfStepperStep\n      [class.active]=\"i === state.active\"\n      [class.flex-row]=\"state.isInline\"\n      [attr.tabIndex]=\"i === state.active ? 0 : -1\"\n      [class.df-stepper-step-warning]=\"step.type === 'warning'\"\n      [class.df-stepper-step-completed]=\"step.type === 'completed'\"\n      [class.df-stepper-step-current]=\"step.type === 'current'\"\n      [class.df-stepper-step-future]=\"step.type === 'future'\"\n      [disabled]=\"state.isLinear && (step.type === 'future' || step.type === 'completed')\"\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-number-current]=\"step.type === 'current'\"\n        [class.df-stepper-outline-icon]=\"step.type === 'warning'\"\n        [class.icon-exclamation-triangle]=\"step.type === 'warning'\"\n        [class.df-stepper-icon]=\"step.type === 'completed'\"\n        [class.icon-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.align-items-center]=\"!state.isInline\"\n        [class.flex-column]=\"state.isInline\"\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 (state.isInline && step.optionalLabel) {\n          <span class=\"df-stepper-optional-label\">{{ step.optionalLabel }}</span>\n        }\n        @if (step.completed) {\n          <span class=\"visually-hidden\">{{ stepperService.completedLabel }}</span>\n        }\n      </div>\n    </button>\n    @if (!state.isVertical && i < state.steps.length - 1) {\n      <ng-container [ngTemplateOutlet]=\"myStepperLine\"></ng-container>\n    }\n    @if (state.isVertical && i < state.steps.length) {\n      <div\n        [class.d-none]=\"state.steps.length - 1 === i\"\n        role=\"tabpanel\"\n        [id]=\"step.ariaControl\"\n        class=\"df-vertical-stepper-panel df-vertical-stepper-line\"\n      >\n        @if (mapStepToContent.has(i) && state.active === i) {\n          <ng-template\n            [ngTemplateOutlet]=\"mapStepToContent.get(i) || null\"\n            [ngTemplateOutletContext]=\"{ state, index: i, service: stepperService }\"\n          ></ng-template>\n        }\n      </div>\n    }\n  }\n}\n@if (stepperService.stepperState$ | async; as state) {\n  <div\n    class=\"text-primary mb-2\"\n    [class.d-block]=\"!state.isVertical\"\n    [class.d-sm-none]=\"!state.isVertical\"\n    [class.d-none]=\"state.isVertical\"\n  >\n    <span class=\"df-stepper-label\">{{ state.steps[state.active].label }}</span>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "directive", type: DfStepperStepDirective, selector: "[dfStepperStep]", exportAs: ["dfStepperStep"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfStepperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfStepperComponent, decorators: [{
             type: Component,
             args: [{ selector: '[dfStepper]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, DfStepperDirective, DfStepperStepDirective], hostDirectives: [DfStepperDirective], host: {
                         role: 'tablist',
@@ -5917,18 +5865,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImpor
                         '[class.df-vertical-stepper]': 'state?.isVertical',
                         '[attr.aria-label]': 'stepperService.stepperAriaLabel',
                         '[attr.aria-orientation]': 'state?.isVertical ? "vertical": null'
-                    }, template: "<ng-template #myStepperLine>\n  <div class=\"df-stepper-line-wrapper\">\n    <div class=\"df-stepper-line\">\n      <div class=\"df-stepper-horizontal-line\"></div>\n    </div>\n    <div class=\"df-stepper-line d-none d-sm-flex\">\n      <div class=\"flex-grow-1\"></div>\n    </div>\n  </div>\n</ng-template>\n<ng-container *ngIf=\"state\">\n  <ng-template ngFor let-step [ngForOf]=\"state.steps\" let-i=\"index\">\n    <button #stepbasic class=\"btn btn-link df-stepper-step\"\n      dfStepperStep\n      [class.active]=\"i === state.active\"\n      [class.flex-row]=\"state.isInline\"\n      [attr.tabIndex]=\"i === state.active ? 0 : -1\"\n      [class.df-stepper-step-warning]=\"step.type === 'warning'\"\n      [class.df-stepper-step-completed]=\"step.type === 'completed'\"\n      [class.df-stepper-step-current]=\"step.type === 'current'\"\n      [class.df-stepper-step-future]=\"step.type === 'future'\"\n      [disabled]=\"state.isLinear && (step.type === 'future' || step.type === 'completed')\"\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\" [attr.aria-controls]=\"step.ariaControl\" (click)=\"stepperService.selectWithFocus(i)\">\n      <div\n        [class.df-stepper-number-current]=\"step.type === 'current'\"\n        [class.df-stepper-outline-icon]=\"step.type === 'warning'\"\n        [class.icon-exclamation-triangle]=\"step.type === 'warning'\"\n        [class.df-stepper-icon]=\"step.type === 'completed'\"\n        [class.icon-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 [class.align-items-center]=\"!state.isInline\"\n      [class.flex-column]=\"state.isInline\"\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        <span *ngIf=\"step.type === 'warning'\" class=\"visually-hidden\">{{stepperService.warningLabel}}</span>\n        <span class=\"df-stepper-label\">{{step.label}}</span>\n        <span *ngIf=\"state.isInline && step.optionalLabel\" class=\"df-stepper-optional-label\">{{step.optionalLabel}}</span>\n        <span *ngIf=\"step.completed\" class=\"visually-hidden\">{{stepperService.completedLabel}}</span>\n      </div>\n    </button>\n    <ng-container *ngIf=\"!state.isVertical && i < state.steps.length - 1 \" [ngTemplateOutlet]=\"myStepperLine\"></ng-container>\n    <div *ngIf=\"state.isVertical && i < state.steps.length\" [class.d-none]=\"state.steps.length - 1 === i\" role=\"tabpanel\" [id]=\"step.ariaControl\" class=\"df-vertical-stepper-panel df-vertical-stepper-line\">\n      <ng-template *ngIf=\"mapStepToContent.has(i) && state.active === i\" [ngTemplateOutlet]=\"mapStepToContent.get(i) || null\" [ngTemplateOutletContext]=\"{state, index: i, service: stepperService}\"></ng-template>\n    </div>\n  </ng-template>\n</ng-container>\n<div 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  *ngIf=\"stepperService.stepperState$ | async as state\">\n  <span class=\"df-stepper-label\">{{state.steps[state.active].label}}</span>\n</div>" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { tplStepsContent: [{
+                    }, template: "<ng-template #myStepperLine>\n  <div class=\"df-stepper-line-wrapper\">\n    <div class=\"df-stepper-line\">\n      <div class=\"df-stepper-horizontal-line\"></div>\n    </div>\n    <div class=\"df-stepper-line d-none d-sm-flex\">\n      <div class=\"flex-grow-1\"></div>\n    </div>\n  </div>\n</ng-template>\n@if (state) {\n  @for (step of state.steps; track step; let i = $index) {\n    <button\n      #stepbasic\n      class=\"btn btn-link df-stepper-step\"\n      dfStepperStep\n      [class.active]=\"i === state.active\"\n      [class.flex-row]=\"state.isInline\"\n      [attr.tabIndex]=\"i === state.active ? 0 : -1\"\n      [class.df-stepper-step-warning]=\"step.type === 'warning'\"\n      [class.df-stepper-step-completed]=\"step.type === 'completed'\"\n      [class.df-stepper-step-current]=\"step.type === 'current'\"\n      [class.df-stepper-step-future]=\"step.type === 'future'\"\n      [disabled]=\"state.isLinear && (step.type === 'future' || step.type === 'completed')\"\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-number-current]=\"step.type === 'current'\"\n        [class.df-stepper-outline-icon]=\"step.type === 'warning'\"\n        [class.icon-exclamation-triangle]=\"step.type === 'warning'\"\n        [class.df-stepper-icon]=\"step.type === 'completed'\"\n        [class.icon-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.align-items-center]=\"!state.isInline\"\n        [class.flex-column]=\"state.isInline\"\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 (state.isInline && step.optionalLabel) {\n          <span class=\"df-stepper-optional-label\">{{ step.optionalLabel }}</span>\n        }\n        @if (step.completed) {\n          <span class=\"visually-hidden\">{{ stepperService.completedLabel }}</span>\n        }\n      </div>\n    </button>\n    @if (!state.isVertical && i < state.steps.length - 1) {\n      <ng-container [ngTemplateOutlet]=\"myStepperLine\"></ng-container>\n    }\n    @if (state.isVertical && i < state.steps.length) {\n      <div\n        [class.d-none]=\"state.steps.length - 1 === i\"\n        role=\"tabpanel\"\n        [id]=\"step.ariaControl\"\n        class=\"df-vertical-stepper-panel df-vertical-stepper-line\"\n      >\n        @if (mapStepToContent.has(i) && state.active === i) {\n          <ng-template\n            [ngTemplateOutlet]=\"mapStepToContent.get(i) || null\"\n            [ngTemplateOutletContext]=\"{ state, index: i, service: stepperService }\"\n          ></ng-template>\n        }\n      </div>\n    }\n  }\n}\n@if (stepperService.stepperState$ | async; as state) {\n  <div\n    class=\"text-primary mb-2\"\n    [class.d-block]=\"!state.isVertical\"\n    [class.d-sm-none]=\"!state.isVertical\"\n    [class.d-none]=\"state.isVertical\"\n  >\n    <span class=\"df-stepper-label\">{{ state.steps[state.active].label }}</span>\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { tplStepsContent: [{
                 type: ContentChildren,
                 args: [DfStepperStepContentDirective]
             }] } });
 
 class DfStepperModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.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: "16.1.4", ngImport: i0, type: DfStepperModule, imports: [DfStepperComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: DfStepperModule, imports: [DfStepperDirective, DfStepperStepDirective, DfStepperComponent, DfStepperStepContentDirective], exports: [DfStepperDirective, DfStepperStepDirective, DfStepperComponent, DfStepperStepContentDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfStepperModule, imports: [DfStepperComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfStepperModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfStepperModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfStepperDirective, DfStepperStepDirective, DfStepperComponent, DfStepperStepContentDirective],
@@ -5949,26 +5897,29 @@ class DfTooltipTruncateDirective {
         this.renderer.addClass(this.elementRef.nativeElement, 'text-truncate');
     }
     ngDoCheck() {
-        this.tooltip.disableTooltip = !hasOverflow(this.elementRef.nativeElement);
+        this.tooltip.disableTooltip = !this.hasOverflow(this.elementRef.nativeElement);
+    }
+    hasOverflow(element) {
+        return element?.offsetHeight < element?.scrollHeight || element?.offsetWidth < element?.scrollWidth;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfTooltipTruncateDirective, deps: [{ token: i1.NgbTooltip }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfTooltipTruncateDirective, isStandalone: true, selector: "[dfTooltipTruncate]", exportAs: ["dfTooltipTruncate"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfTooltipTruncateDirective, deps: [{ token: i1.NgbTooltip }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: DfTooltipTruncateDirective, isStandalone: true, selector: "[dfTooltipTruncate]", exportAs: ["dfTooltipTruncate"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfTooltipTruncateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfTooltipTruncateDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'dfTooltipTruncate',
                     selector: '[dfTooltipTruncate]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1.NgbTooltip }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
+        }], ctorParameters: () => [{ type: i1.NgbTooltip }, { type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class DfTooltipModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfTooltipModule, imports: [DfTooltipTruncateDirective], exports: [DfTooltipTruncateDirective, NgbTooltipModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfTooltipModule, imports: [NgbTooltipModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: DfTooltipModule, imports: [DfTooltipTruncateDirective], exports: [DfTooltipTruncateDirective, NgbTooltipModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfTooltipModule, imports: [NgbTooltipModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfTooltipModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfTooltipModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfTooltipTruncateDirective],
@@ -5977,8 +5928,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImpor
         }] });
 
 class DfSideNavModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavModule, imports: [DfManageSideNavDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSideNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: DfSideNavModule, imports: [DfManageSideNavDirective,
             DfSideNavComponent,
             DfSideNavHeaderDirective,
             DfExcludeTrapDirective,
@@ -5991,10 +5942,10 @@ class DfSideNavModule {
             DfSideNavItemDirective,
             DfSideNavCollapseModule,
             DfMediaModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavModule, imports: [DfSideNavComponent, DfSideNavCollapseModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSideNavModule, imports: [DfSideNavComponent, DfSideNavCollapseModule,
             DfMediaModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfSideNavModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfSideNavModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -6047,16 +5998,16 @@ class DfManageCardSelectionDirective {
             this.element.nativeElement.focus();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfManageCardSelectionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DfManageCardSelectionDirective, isStandalone: true, selector: "[dfManageCardSelected]", inputs: { dfManageCardSelected: "dfManageCardSelected" }, host: { listeners: { "click": "click($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfManageCardSelectionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: DfManageCardSelectionDirective, isStandalone: true, selector: "[dfManageCardSelected]", inputs: { dfManageCardSelected: "dfManageCardSelected" }, host: { listeners: { "click": "click($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfManageCardSelectionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfManageCardSelectionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfManageCardSelected]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { dfManageCardSelected: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { dfManageCardSelected: [{
                 type: Input
             }], click: [{
                 type: HostListener,
@@ -6064,11 +6015,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImpor
             }] } });
 
 class DfAdvancedCardModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfAdvancedCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfAdvancedCardModule, imports: [DfManageCardSelectionDirective], exports: [DfManageCardSelectionDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfAdvancedCardModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfAdvancedCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: DfAdvancedCardModule, imports: [DfManageCardSelectionDirective], exports: [DfManageCardSelectionDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfAdvancedCardModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfAdvancedCardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfAdvancedCardModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfManageCardSelectionDirective],
@@ -6099,8 +6050,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: "16.1.4", ngImport: i0, type: DfModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: DfModule, imports: [DfAlertModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: DfModule, imports: [DfAlertModule,
             DfDatePickerModule,
             DfSelectModule,
             DfProgressbarModule,
@@ -6133,7 +6084,7 @@ class DfModule {
             DfFooterModule,
             DfToastModule,
             DfStepperModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfModule, imports: [DF_MODULES, DfAlertModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfModule, imports: [DF_MODULES, DfAlertModule,
             DfDatePickerModule,
             DfSelectModule,
             DfProgressbarModule,
@@ -6151,7 +6102,7 @@ class DfModule {
             DfToastModule,
             DfStepperModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DfModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DfModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: DF_MODULES,
@@ -6169,5 +6120,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BREAKPOINTS_VARS, ChangeContext, CloseInputDatePickerDirective, DF_BREAKPOINTS_VAR_DEFAULT, DfAccessibilityModule, DfAdvancedCardModule, DfAdvancedInputModule, DfAlertModule, DfAmadeusIconComponent, DfBreakpoints, DfDatePickerModule, DfDatepickerRangeDirective, DfDatepickerRangeService, DfDefaultSpinnerComponent, DfDirectionDetectionService, DfExcludeTrapDirective, DfFooterModule, DfIconModule, DfIfMediaDirective, DfInputIconDirective, DfInsertIconDirective, DfInsertIconModule, DfManageBadgeEventsDirective, DfManageCardSelectionDirective, DfManageNavSelectDirective, DfManageSideNavDirective, DfMedia, DfMediaModule, DfMediaObserver, DfMediaQuery, DfModalService, DfModule, DfNavItemType, DfOptionHighlightDirective, DfPopoverConfig, DfPopoverModule, DfProgressIndicatorBackdropComponent, DfProgressIndicatorContainerComponent, DfProgressIndicatorContentPosition, DfProgressIndicatorContentProgressBar, DfProgressIndicatorContentSpinner, DfProgressIndicatorContentType, DfProgressIndicatorDirective, DfProgressIndicatorModule, DfProgressIndicatorRef, DfProgressIndicatorService, DfProgressbarComponent, DfProgressbarModule, DfSelectModule, DfSideNavCollapseDirective, DfSideNavCollapseModule, DfSideNavCollapseService, DfSideNavComponent, DfSideNavHeaderDirective, DfSideNavIconDirective, DfSideNavItemDirective, DfSideNavModule, DfSideNavService, DfSliderDirectionDirective, DfSliderModule, DfStepperComponent, DfStepperDirective, DfStepperModule, DfStepperService, DfStepperStepContentDirective, DfStepperStepDirective, DfTitleTruncateDirective, DfToastModule, DfTooltipModule, DfTooltipTruncateDirective, DfTriggerClickDirective, LabelType, Options, PointerType, RightToLeftDirectionEnum, SkipLinkDirective, SkipLinksContainerComponent, SliderComponent };
+export { BREAKPOINTS_VARS, ChangeContext, CloseInputDatePickerDirective, DF_BREAKPOINTS_VAR_DEFAULT, DfAccessibilityModule, DfAdvancedCardModule, DfAdvancedInputModule, DfAlertModule, DfAmadeusIconComponent, DfBreakpoints, DfDatePickerModule, DfDatepickerRangeDirective, DfDatepickerRangeService, DfDefaultSpinnerComponent, DfDirectionDetectionService, DfExcludeTrapDirective, DfFooterModule, DfIconModule, DfIfMediaDirective, DfInputIconDirective, DfInsertIconDirective, DfInsertIconModule, DfManageBadgeEventsDirective, DfManageCardSelectionDirective, DfManageNavSelectDirective, DfManageSideNavDirective, DfMedia, DfMediaModule, DfMediaObserver, DfMediaQuery, DfModalService, DfModule, DfNavItemType, DfOptionHighlightDirective, DfPopoverConfig, DfPopoverModule, DfProgressIndicatorBackdropComponent, DfProgressIndicatorContainerComponent, DfProgressIndicatorContentPosition, DfProgressIndicatorContentProgressBar, DfProgressIndicatorContentSpinner, DfProgressIndicatorContentType, DfProgressIndicatorDirective, DfProgressIndicatorModule, DfProgressIndicatorRef, DfProgressIndicatorService, DfProgressbarComponent, DfProgressbarModule, DfSelectModule, DfSideNavCollapseDirective, DfSideNavCollapseModule, DfSideNavCollapseService, DfSideNavComponent, DfSideNavHeaderDirective, DfSideNavIconDirective, DfSideNavItemDirective, DfSideNavModule, DfSideNavService, DfSliderDirectionDirective, DfSliderModule, DfStepperComponent, DfStepperDirective, DfStepperModule, DfStepperService, DfStepperStepContentDirective, DfStepperStepDirective, DfToastModule, DfTooltipModule, DfTooltipTruncateDirective, DfTriggerClickDirective, LabelType, Options, PointerType, RightToLeftDirectionEnum, SkipLinkDirective, SkipLinksContainerComponent, SliderComponent };
 //# sourceMappingURL=design-factory.mjs.map