@design-factory/design-factory 20.0.2 → 21.0.0-next.0

package/fesm2022/design-factory.mjs

@@ -1,20 +1,36 @@
 import * as i0 from '@angular/core';
-import { signal, inject, ElementRef, DOCUMENT, Directive, contentChildren, computed, ChangeDetectionStrategy, Component, NgModule, HostListener, input, Renderer2, Injectable, PLATFORM_ID, InjectionToken, ViewContainerRef, TemplateRef, effect, booleanAttribute, numberAttribute, output, ViewEncapsulation, RendererFactory2, ApplicationRef, EnvironmentInjector, ComponentRef, createComponent, untracked, HostBinding, Input, forwardRef, EventEmitter, ContentChild, ViewChild, Output, NgZone, Injector, contentChild } from '@angular/core';
-import * as i1$1 from '@ng-bootstrap/ng-bootstrap';
-import { NgbToastModule, NgbAlertModule, NgbDatepickerKeyboardService, NgbCalendar, NgbDateParserFormatter, NgbDate, NgbDatepickerModule, NgbDropdownModule, NgbAccordionModule, NgbPopoverConfig, NgbPopoverModule, NgbProgressbarModule, NgbConfig, NgbCollapseModule, NgbTooltip, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import { ChangeDetectionStrategy, Component, inject, ElementRef, DOCUMENT, Directive, NgModule, HostListener, Injectable, Renderer2, PLATFORM_ID, InjectionToken, input, ViewContainerRef, TemplateRef, effect, booleanAttribute, numberAttribute, signal, computed, output, ViewEncapsulation, RendererFactory2, ApplicationRef, EnvironmentInjector, ComponentRef, createComponent, untracked, HostBinding, Input, forwardRef, EventEmitter, ContentChild, ViewChild, Output, contentChild, contentChildren, NgZone, Injector, provideAppInitializer } from '@angular/core';
+import { NgbToastModule } from '@ng-bootstrap/ng-bootstrap/toast';
+import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap/alert';
+import { NgbDatepickerKeyboardService, NgbDatepickerModule, NgbCalendar, NgbDateParserFormatter, NgbDate } from '@ng-bootstrap/ng-bootstrap/datepicker';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap/dropdown';
 import * as i1 from '@angular/common';
 import { isPlatformBrowser, isPlatformServer, NgTemplateOutlet, CommonModule, AsyncPipe } from '@angular/common';
 import { take, map, switchMap, distinctUntilChanged, throttleTime, tap, filter, endWith, takeUntil } from 'rxjs/operators';
 import { BehaviorSubject, fromEvent, Subscription, combineLatest, Subject, Observable, EMPTY, of, timer, race } from 'rxjs';
+import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap/accordion';
+import { NgbPopoverConfig, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap/popover';
+import { NgbProgressbarModule } from '@ng-bootstrap/ng-bootstrap/progressbar';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import * as i2 from '@angular/router';
-import { RouterModule } from '@angular/router';
-import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { NgbCollapse } from '@ng-bootstrap/ng-bootstrap/collapse';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgSelectComponent, NgSelectModule } from '@ng-select/ng-select';
+import { NgbTooltip, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap/tooltip';
+import { NgbConfig } from '@ng-bootstrap/ng-bootstrap/config';
+import { ModuleRegistry, AllCommunityModule, provideGlobalGridOptions } from 'ag-grid-community';
+
+class SkipLinksContainerComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SkipLinksContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: SkipLinksContainerComponent, isStandalone: true, selector: "df-skip-links-container", ngImport: i0, template: "<section class=\"df-skip-links__section\">\n  <div class=\"df-skip-links position-fixed\">\n    <div class=\"df-skip-links-wrap list-group list-group-flush visually-hidden-focusable shadow rounded\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</section>\n", styles: [".df-skip-links{top:1.25rem;inset-inline-start:.625rem;z-index:10000}.df-skip-links .df-skip-links-wrap{min-width:12.5rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SkipLinksContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-skip-links-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"df-skip-links__section\">\n  <div class=\"df-skip-links position-fixed\">\n    <div class=\"df-skip-links-wrap list-group list-group-flush visually-hidden-focusable shadow rounded\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</section>\n", styles: [".df-skip-links{top:1.25rem;inset-inline-start:.625rem;z-index:10000}.df-skip-links .df-skip-links-wrap{min-width:12.5rem}\n"] }]
+        }] });
 
 class SkipLinkDirective {
     constructor() {
-        this.inFocus = signal(false, ...(ngDevMode ? [{ debugName: "inFocus" }] : []));
         this.element = inject(ElementRef);
         this.document = inject(DOCUMENT);
     }
@@ -29,48 +45,29 @@ class SkipLinkDirective {
             return;
         }
         setTimeout(() => {
-            const target = this.document.getElementById(id);
-            if (target) {
-                target.focus();
-                this.inFocus.set(false);
-            }
+            this.document.getElementById(id)?.focus();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SkipLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: SkipLinkDirective, isStandalone: true, selector: "[dfSkipLink]", host: { listeners: { "focus": "inFocus.set(true)", "click": "focusOnTarget()", "blur": "inFocus.set(false)" }, classAttribute: "list-group-item list-group-item-action" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SkipLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: SkipLinkDirective, isStandalone: true, selector: "[dfSkipLink]", host: { listeners: { "click": "focusOnTarget()" }, classAttribute: "list-group-item list-group-item-action" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SkipLinkDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SkipLinkDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfSkipLink]',
                     host: {
-                        class: 'list-group-item list-group-item-action',
-                        '(focus)': 'inFocus.set(true)',
                         '(click)': 'focusOnTarget()',
-                        '(blur)': 'inFocus.set(false)'
+                        class: 'list-group-item list-group-item-action'
                     }
                 }]
         }] });
 
-class SkipLinksContainerComponent {
-    constructor() {
-        this.links = contentChildren(SkipLinkDirective, ...(ngDevMode ? [{ debugName: "links" }] : []));
-        this.inFocus = computed(() => this.links().some((link) => link.inFocus()), ...(ngDevMode ? [{ debugName: "inFocus" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SkipLinksContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.3", type: SkipLinksContainerComponent, isStandalone: true, selector: "df-skip-links-container", queries: [{ propertyName: "links", predicate: SkipLinkDirective, isSignal: true }], ngImport: i0, template: "<section class=\"df-skip-links__section\">\n  <div class=\"df-skip-links\">\n    <div class=\"df-skip-links-wrap list-group\" [class.focus]=\"inFocus()\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</section>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SkipLinksContainerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'df-skip-links-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"df-skip-links__section\">\n  <div class=\"df-skip-links\">\n    <div class=\"df-skip-links-wrap list-group\" [class.focus]=\"inFocus()\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</section>\n" }]
-        }] });
-
 class DfAccessibilityModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfAccessibilityModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: DfAccessibilityModule, imports: [SkipLinkDirective, SkipLinksContainerComponent], exports: [SkipLinkDirective, SkipLinksContainerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfAccessibilityModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfAccessibilityModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: DfAccessibilityModule, imports: [SkipLinkDirective, SkipLinksContainerComponent], exports: [SkipLinkDirective, SkipLinksContainerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfAccessibilityModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfAccessibilityModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfAccessibilityModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SkipLinkDirective, SkipLinksContainerComponent],
@@ -93,6 +90,7 @@ class DfInsertIconDirective {
         // we create the HTML icon element with the renderer
         const iconEl = this.renderer.createElement('span');
         this.renderer.addClass(iconEl, 'df-insert-icon');
+        this.renderer.addClass(iconEl, 'fa-solid');
         this.renderer.addClass(iconEl, this.getIconClassFromClasses(cssClasses));
         this.renderer.setAttribute(iconEl, 'aria-hidden', 'true');
         // we insert the icon element inside the DOM of the alert element
@@ -116,10 +114,10 @@ class DfInsertIconDirective {
         }
         return 'fa-info-circle';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfInsertIconDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: DfInsertIconDirective, isStandalone: true, selector: "ngb-alert[dfInsertAlertIcon],ngb-toast[dfInsertToastIcon]", host: { attributes: { "ngSkipHydration": "true" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", 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: "21.0.6", type: DfInsertIconDirective, isStandalone: true, selector: "ngb-alert[dfInsertAlertIcon],ngb-toast[dfInsertToastIcon]", host: { attributes: { "ngSkipHydration": "true" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfInsertIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfInsertIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ngb-alert[dfInsertAlertIcon],ngb-toast[dfInsertToastIcon]',
@@ -130,11 +128,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class DfInsertIconModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfInsertIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: DfInsertIconModule, imports: [DfInsertIconDirective], exports: [DfInsertIconDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfInsertIconModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfInsertIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: DfInsertIconModule, imports: [DfInsertIconDirective], exports: [DfInsertIconDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfInsertIconModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfInsertIconModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfInsertIconModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfInsertIconDirective],
@@ -143,11 +141,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
         }] });
 
 class DfToastModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: DfToastModule, imports: [DfInsertIconModule], exports: [NgbToastModule, DfInsertIconModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfToastModule, imports: [DfInsertIconModule, NgbToastModule, DfInsertIconModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: DfToastModule, imports: [DfInsertIconModule], exports: [NgbToastModule, DfInsertIconModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfToastModule, imports: [DfInsertIconModule, NgbToastModule, DfInsertIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfToastModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfToastModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfInsertIconModule],
@@ -156,11 +154,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
         }] });
 
 class DfAlertModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: DfAlertModule, imports: [DfInsertIconModule], exports: [NgbAlertModule, DfInsertIconModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfAlertModule, imports: [DfInsertIconModule, NgbAlertModule, DfInsertIconModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: DfAlertModule, imports: [DfInsertIconModule], exports: [NgbAlertModule, DfInsertIconModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfAlertModule, imports: [DfInsertIconModule, NgbAlertModule, DfInsertIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfAlertModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfAlertModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfInsertIconModule],
@@ -177,10 +175,10 @@ class DfTriggerClickDirective {
         event.preventDefault();
         this.elementRef.nativeElement.click();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfTriggerClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", 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: "21.0.6", ngImport: i0, type: DfTriggerClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: DfTriggerClickDirective, isStandalone: true, selector: "[dfTriggerClick]", host: { listeners: { "keydown.enter": "triggerClick($event)", "keydown.space": "triggerClick($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfTriggerClickDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfTriggerClickDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfTriggerClick]'
@@ -193,104 +191,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                 args: ['keydown.space', ['$event']]
             }] } });
 
-/**
- * dfInputIcon directive
- * @deprecated `DfInputIconDirective` is deprecated and will be removed in DF 21, in favor of pure css.
- * To migrate and keep the same behavior, simply add the class `df-input-withicon` to the input element this directive was used on and remove the directive.
- */
-class DfInputIconDirective {
-    constructor() {
-        this.dfInputIcon = input.required(...(ngDevMode ? [{ debugName: "dfInputIcon" }] : []));
-        this.isDisabled = false;
-        this.siblingsNode = [];
-        this.renderer = inject(Renderer2);
-        this.el = inject(ElementRef);
-    }
-    ngDoCheck() {
-        if (this.el.nativeElement.disabled !== this.isDisabled) {
-            this.isDisabled = this.el.nativeElement.disabled;
-            this.siblingsNode.forEach((siblings) => {
-                if (this.isDisabled) {
-                    this.renderer.addClass(siblings, 'df-disabled');
-                }
-                else {
-                    this.renderer.removeClass(siblings, 'df-disabled');
-                }
-            });
-        }
-    }
-    ngOnInit() {
-        this.renderer.addClass(this.el.nativeElement, 'df-input-withicon');
-        this.dfInputIcon().forEach((direction) => {
-            this.renderer.addClass(this.el.nativeElement, direction.toString());
-            this.renderer.addClass(this.el.nativeElement.parentNode, `df-input-${direction}`);
-            const sibling = this.el.nativeElement.parentNode.querySelector(`.input-group-${direction}`);
-            if (sibling) {
-                this.siblingsNode.push(sibling);
-                if (direction.toString() === 'prepend') {
-                    this.button = sibling.querySelector('button');
-                    if (this.button) {
-                        this.initButtonHandler();
-                    }
-                }
-            }
-        });
-    }
-    /**
-     * onBlur catch blur event to set the focused to false
-     */
-    onBlur() {
-        this.renderer.removeClass(this.el.nativeElement.parentNode, 'df-focused');
-    }
-    onFocus() {
-        this.renderer.addClass(this.el.nativeElement.parentNode, 'df-focused');
-    }
-    onTab(e) {
-        if (this.button) {
-            e.preventDefault();
-            this.button.focus();
-            this.renderer.setAttribute(this.el.nativeElement, 'tabindex', '-1');
-        }
-    }
-    ngOnDestroy() {
-        if (this.removeListener) {
-            this.removeListener();
-        }
-    }
-    initButtonHandler() {
-        this.renderer.setAttribute(this.button, 'tabindex', '-1');
-        this.removeListener = this.renderer.listen(this.button, 'blur', () => {
-            setTimeout(() => {
-                this.renderer.removeAttribute(this.el.nativeElement, 'tabindex');
-            });
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfInputIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.3", type: DfInputIconDirective, isStandalone: true, selector: "[dfInputIcon]", inputs: { dfInputIcon: { classPropertyName: "dfInputIcon", publicName: "dfInputIcon", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "blur": "onBlur()", "focus": "onFocus()", "keydown.Tab": "onTab($event)" } }, exportAs: ["dfInputIcon"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfInputIconDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    exportAs: 'dfInputIcon',
-                    selector: '[dfInputIcon]',
-                    host: {
-                        '(blur)': 'onBlur()',
-                        '(focus)': 'onFocus()',
-                        '(keydown.Tab)': 'onTab($event)'
-                    }
-                }]
-        }] });
-
 class DfAdvancedInputModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfAdvancedInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: DfAdvancedInputModule, imports: [DfTriggerClickDirective, DfInputIconDirective], exports: [DfTriggerClickDirective, DfInputIconDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfAdvancedInputModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfAdvancedInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: DfAdvancedInputModule, imports: [DfTriggerClickDirective], exports: [DfTriggerClickDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfAdvancedInputModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfAdvancedInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfAdvancedInputModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [DfTriggerClickDirective, DfInputIconDirective],
-                    exports: [DfTriggerClickDirective, DfInputIconDirective]
+                    imports: [DfTriggerClickDirective],
+                    exports: [DfTriggerClickDirective]
                 }]
         }] });
 
@@ -323,10 +233,10 @@ class DfDatepickerKeyboardService extends NgbDatepickerKeyboardService {
         event.preventDefault();
         event.stopPropagation();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfDatepickerKeyboardService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfDatepickerKeyboardService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfDatepickerKeyboardService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfDatepickerKeyboardService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfDatepickerKeyboardService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfDatepickerKeyboardService, decorators: [{
             type: Injectable
         }] });
 
@@ -350,10 +260,10 @@ class DfDirectionDetectionService {
         }
         return RightToLeftDirectionEnum.LeftToRight;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfDirectionDetectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfDirectionDetectionService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfDirectionDetectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfDirectionDetectionService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfDirectionDetectionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfDirectionDetectionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -451,10 +361,10 @@ class DfDatepickerRangeDirective {
     ngOnDestroy() {
         this.removeListener.forEach((item) => item());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfDatepickerRangeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: DfDatepickerRangeDirective, isStandalone: true, selector: "[dfDatepickerRange]", exportAs: ["dfDatepickerRange"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfDatepickerRangeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: DfDatepickerRangeDirective, isStandalone: true, selector: "[dfDatepickerRange]", exportAs: ["dfDatepickerRange"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfDatepickerRangeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfDatepickerRangeDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'dfDatepickerRange',
@@ -462,6 +372,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                 }]
         }] });
 
+class DfDatePickerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: DfDatePickerModule, imports: [NgbDropdownModule, DfDatepickerRangeDirective], exports: [NgbDatepickerModule, DfAdvancedInputModule, DfDatepickerRangeDirective, NgbDropdownModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfDatePickerModule, providers: [{ provide: NgbDatepickerKeyboardService, useClass: DfDatepickerKeyboardService }], imports: [NgbDropdownModule, NgbDatepickerModule, DfAdvancedInputModule, NgbDropdownModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfDatePickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [NgbDropdownModule, DfDatepickerRangeDirective],
+                    exports: [NgbDatepickerModule, DfAdvancedInputModule, DfDatepickerRangeDirective, NgbDropdownModule],
+                    providers: [{ provide: NgbDatepickerKeyboardService, useClass: DfDatepickerKeyboardService }]
+                }]
+        }] });
+
 class DfDatepickerRangeService {
     constructor() {
         this.fromDate = null;
@@ -548,30 +472,13 @@ class DfDatepickerRangeService {
         this.toDate = this.parseInput(this.toDate, typed);
         this.toDateAsStr = this.formatter.format(this.toDate);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfDatepickerRangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfDatepickerRangeService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfDatepickerRangeService, decorators: [{
-            type: Injectable
-        }] });
-
-class DfDatePickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: DfDatePickerModule, imports: [NgbDropdownModule, DfDatepickerRangeDirective], exports: [NgbDatepickerModule, DfAdvancedInputModule, DfDatepickerRangeDirective, NgbDropdownModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfDatePickerModule, providers: [
-            { provide: NgbDatepickerKeyboardService, useClass: DfDatepickerKeyboardService },
-            DfDatepickerRangeService
-        ], imports: [NgbDropdownModule, NgbDatepickerModule, DfAdvancedInputModule, NgbDropdownModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfDatepickerRangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfDatepickerRangeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfDatePickerModule, decorators: [{
-            type: NgModule,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfDatepickerRangeService, decorators: [{
+            type: Injectable,
             args: [{
-                    imports: [NgbDropdownModule, DfDatepickerRangeDirective],
-                    exports: [NgbDatepickerModule, DfAdvancedInputModule, DfDatepickerRangeDirective, NgbDropdownModule],
-                    providers: [
-                        { provide: NgbDatepickerKeyboardService, useClass: DfDatepickerKeyboardService },
-                        DfDatepickerRangeService
-                    ]
+                    providedIn: 'root'
                 }]
         }] });
 
@@ -659,10 +566,10 @@ class DfBreakpoints {
         }
         return dict;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfBreakpoints, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfBreakpoints, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfBreakpoints, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfBreakpoints, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfBreakpoints, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfBreakpoints, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -681,10 +588,10 @@ class DfMediaQuery {
             return this.notSupported(query);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfMediaQuery, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfMediaQuery, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfMediaQuery, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfMediaQuery, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfMediaQuery, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfMediaQuery, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -738,10 +645,10 @@ class DfMediaObserver {
         this._queries.set(query, meta);
         return meta;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfMediaObserver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfMediaObserver, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfMediaObserver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfMediaObserver, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfMediaObserver, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfMediaObserver, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -780,10 +687,10 @@ class DfMedia {
             return this.mediaObserver.observe(query);
         }), map((value) => value.matches), distinctUntilChanged());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfMedia, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfMedia, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfMedia, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfMedia, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfMedia, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfMedia, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -828,20 +735,20 @@ class DfIfMediaDirective {
             this._viewInstance = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfIfMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.3", type: DfIfMediaDirective, isStandalone: true, selector: "[dfIfMedia]", inputs: { dfIfMedia: { classPropertyName: "dfIfMedia", publicName: "dfIfMedia", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfIfMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: DfIfMediaDirective, isStandalone: true, selector: "[dfIfMedia]", inputs: { dfIfMedia: { classPropertyName: "dfIfMedia", publicName: "dfIfMedia", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfIfMediaDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfIfMediaDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[dfIfMedia]' }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { dfIfMedia: [{ type: i0.Input, args: [{ isSignal: true, alias: "dfIfMedia", required: true }] }] } });
 
 class DfMediaModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfMediaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: DfMediaModule, imports: [DfIfMediaDirective], exports: [DfIfMediaDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfMediaModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfMediaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: DfMediaModule, imports: [DfIfMediaDirective], exports: [DfIfMediaDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfMediaModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfMediaModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfMediaModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfIfMediaDirective],
@@ -850,11 +757,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
         }] });
 
 class DfFooterModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfFooterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: DfFooterModule, imports: [DfMediaModule, NgbAccordionModule], exports: [DfMediaModule, NgbAccordionModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfFooterModule, imports: [DfMediaModule, NgbAccordionModule, DfMediaModule, NgbAccordionModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfFooterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: DfFooterModule, imports: [DfMediaModule, NgbAccordionModule], exports: [DfMediaModule, NgbAccordionModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfFooterModule, imports: [DfMediaModule, NgbAccordionModule, DfMediaModule, NgbAccordionModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfFooterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfFooterModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfMediaModule, NgbAccordionModule],
@@ -862,114 +769,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                 }]
         }] });
 
-class DfAmadeusIconComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfAmadeusIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: DfAmadeusIconComponent, isStandalone: true, selector: "df-amadeus-icon", ngImport: i0, template: `
-    <svg
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-      x="0px"
-      y="0px"
-      viewBox="0 0 510.2 67.9"
-      style="enable-background:new 0 0 510.2 67.9;"
-      xml:space="preserve"
-    >
-      <g id="Layer_2"></g>
-      <g id="Layer_1">
-        <path
-          d="M269.7,0c-8.3,0-19.8,1.4-26.9,4v61.9c5.8,1.2,16.8,2,24.4,2c26,0,36.1-10.2,36.1-34.4C303.4,12.5,290.5,0,269.7,0
-        M257.5,12.6c2.4-0.5,7-1.1,11.6-1.1c10.6,0,18.8,5.9,18.8,22c0,15.5-4.1,22.9-20.2,22.9c-5.2,0-10.3-0.8-10.3-0.8V12.6z
-        M461.5,65.5c0,0,9,2.4,21.7,2.4c12,0,27-4.1,27-20.3c0-10.6-7.8-15.1-20.5-19.7c-6.9-2.5-12.7-4.8-12.7-9.5
-      c0-2.3,1.7-6.7,10.5-6.7c8.2,0,16.6,3.8,16.6,3.8l3.7-10.8C505.2,3.4,497.2,0,486.1,0c-12.1,0-23.8,6.4-23.8,19.3
-      c0,13.3,12.1,17.3,21.5,20.5c6.4,2.2,11.8,4.4,11.8,8.7c0,4.1-2.3,7.7-13.1,7.7c-8.9,0-18.3-2-18.3-2L461.5,65.5z M429.6,50.3
-      c-3.5,1.7-11,4.5-17.9,4.5c-10,0-11.7-4.5-11.7-14.9V0.6h-2.2c-3.3,0-10.6,0.6-12.4,0.9v40.3c0,17.6,4.3,26,22.2,26
-      c13.7,0,21.7-5.3,22.2-5.3c0.2,0,4.9,2.9,14.3,2.9v-64c-1-0.2-8.1-0.9-11.7-0.9h-2.9V50.3z M198.5,0c-13,0-23.2,3.2-27.1,5.2
-      l3.1,10.9c0,0,10-3.6,19.8-3.6c8.4,0,12.7,2.4,12.7,10.6v4.7h-12.7c-21.6,0-28,9.9-28,20.8c0,14.5,11.3,19.1,21.6,19.1
-      c12,0,18.9-5,19.8-5c0.7,0,3.1,2.6,14,2.6V19.3C221.7,5.5,213.1,0,198.5,0 M207.1,52.7c-3.1,1.2-10.7,3.7-16.2,3.7
-      c-6,0-10.6-2.1-10.6-8.7c0-5.7,3.1-9,11.4-9.3l15.4-0.6V52.7z M32.2,0C19.2,0,9,3.2,5.1,5.2l3.1,10.9c0,0,10-3.6,19.8-3.6
-      c8.4,0,12.7,2.4,12.7,10.6v4.7H28c-21.6,0-28,9.9-28,20.8c0,14.5,11.3,19.1,21.6,19.1c12,0,18.9-5,19.8-5c0.7,0,3.1,2.6,14,2.6
-      V19.3C55.4,5.5,46.8,0,32.2,0 M40.9,52.7c-3.1,1.2-10.7,3.7-16.2,3.7c-6,0-10.6-2.1-10.6-8.7c0-5.7,3.1-9,11.4-9.3l15.4-0.6V52.7z
-        M114,39c-0.4,0.9-0.8,2.7-1.1,3.8c-0.3-1-0.8-2.8-1.1-3.8L99,6.1C96.8,0.7,93.4,0,87.2,0c-2.2,0-6.6,0.3-6.6,0.3L74,66.9h14.6
-      l3.2-44.7l13.9,33.8c1,2.6,3.1,3.7,7.3,3.7c4.1,0,6.2-1,7.3-3.7L134,22.2l3.2,44.7h14.6l-6.6-66.6c0,0-4.4-0.3-6.6-0.3
-      c-6.2,0-9.6,0.7-11.8,6.1L114,39z M320.8,64.7c0,0,11.2,3.1,25.5,3.1c15.3,0,22.3-1.7,22.3-1.7V54.8c0,0-7.6,1.5-18.3,1.5
-      c-9.3,0-15.1-1.2-15.1-1.2v-16h28.9V27.8h-28.9V12.5c0,0,5.7-1,14.1-1c9.5,0,18.1,1.5,18.1,1.5V1.6c0,0-7.5-1.6-19.8-1.6
-      c-16.3,0-27,2.9-27,2.9V64.7z"
-        />
-      </g>
-    </svg>
-  `, isInline: true, styles: [":root{--df-navbar-height: 3.5rem}:host{min-width:60px}:host svg{margin:10%}:host.icon-primary{fill:var(--df-primary-500)}:host.icon-white{fill:#fff}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfAmadeusIconComponent, decorators: [{
-            type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'df-amadeus-icon', template: `
-    <svg
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-      x="0px"
-      y="0px"
-      viewBox="0 0 510.2 67.9"
-      style="enable-background:new 0 0 510.2 67.9;"
-      xml:space="preserve"
-    >
-      <g id="Layer_2"></g>
-      <g id="Layer_1">
-        <path
-          d="M269.7,0c-8.3,0-19.8,1.4-26.9,4v61.9c5.8,1.2,16.8,2,24.4,2c26,0,36.1-10.2,36.1-34.4C303.4,12.5,290.5,0,269.7,0
-        M257.5,12.6c2.4-0.5,7-1.1,11.6-1.1c10.6,0,18.8,5.9,18.8,22c0,15.5-4.1,22.9-20.2,22.9c-5.2,0-10.3-0.8-10.3-0.8V12.6z
-        M461.5,65.5c0,0,9,2.4,21.7,2.4c12,0,27-4.1,27-20.3c0-10.6-7.8-15.1-20.5-19.7c-6.9-2.5-12.7-4.8-12.7-9.5
-      c0-2.3,1.7-6.7,10.5-6.7c8.2,0,16.6,3.8,16.6,3.8l3.7-10.8C505.2,3.4,497.2,0,486.1,0c-12.1,0-23.8,6.4-23.8,19.3
-      c0,13.3,12.1,17.3,21.5,20.5c6.4,2.2,11.8,4.4,11.8,8.7c0,4.1-2.3,7.7-13.1,7.7c-8.9,0-18.3-2-18.3-2L461.5,65.5z M429.6,50.3
-      c-3.5,1.7-11,4.5-17.9,4.5c-10,0-11.7-4.5-11.7-14.9V0.6h-2.2c-3.3,0-10.6,0.6-12.4,0.9v40.3c0,17.6,4.3,26,22.2,26
-      c13.7,0,21.7-5.3,22.2-5.3c0.2,0,4.9,2.9,14.3,2.9v-64c-1-0.2-8.1-0.9-11.7-0.9h-2.9V50.3z M198.5,0c-13,0-23.2,3.2-27.1,5.2
-      l3.1,10.9c0,0,10-3.6,19.8-3.6c8.4,0,12.7,2.4,12.7,10.6v4.7h-12.7c-21.6,0-28,9.9-28,20.8c0,14.5,11.3,19.1,21.6,19.1
-      c12,0,18.9-5,19.8-5c0.7,0,3.1,2.6,14,2.6V19.3C221.7,5.5,213.1,0,198.5,0 M207.1,52.7c-3.1,1.2-10.7,3.7-16.2,3.7
-      c-6,0-10.6-2.1-10.6-8.7c0-5.7,3.1-9,11.4-9.3l15.4-0.6V52.7z M32.2,0C19.2,0,9,3.2,5.1,5.2l3.1,10.9c0,0,10-3.6,19.8-3.6
-      c8.4,0,12.7,2.4,12.7,10.6v4.7H28c-21.6,0-28,9.9-28,20.8c0,14.5,11.3,19.1,21.6,19.1c12,0,18.9-5,19.8-5c0.7,0,3.1,2.6,14,2.6
-      V19.3C55.4,5.5,46.8,0,32.2,0 M40.9,52.7c-3.1,1.2-10.7,3.7-16.2,3.7c-6,0-10.6-2.1-10.6-8.7c0-5.7,3.1-9,11.4-9.3l15.4-0.6V52.7z
-        M114,39c-0.4,0.9-0.8,2.7-1.1,3.8c-0.3-1-0.8-2.8-1.1-3.8L99,6.1C96.8,0.7,93.4,0,87.2,0c-2.2,0-6.6,0.3-6.6,0.3L74,66.9h14.6
-      l3.2-44.7l13.9,33.8c1,2.6,3.1,3.7,7.3,3.7c4.1,0,6.2-1,7.3-3.7L134,22.2l3.2,44.7h14.6l-6.6-66.6c0,0-4.4-0.3-6.6-0.3
-      c-6.2,0-9.6,0.7-11.8,6.1L114,39z M320.8,64.7c0,0,11.2,3.1,25.5,3.1c15.3,0,22.3-1.7,22.3-1.7V54.8c0,0-7.6,1.5-18.3,1.5
-      c-9.3,0-15.1-1.2-15.1-1.2v-16h28.9V27.8h-28.9V12.5c0,0,5.7-1,14.1-1c9.5,0,18.1,1.5,18.1,1.5V1.6c0,0-7.5-1.6-19.8-1.6
-      c-16.3,0-27,2.9-27,2.9V64.7z"
-        />
-      </g>
-    </svg>
-  `, styles: [":root{--df-navbar-height: 3.5rem}:host{min-width:60px}:host svg{margin:10%}:host.icon-primary{fill:var(--df-primary-500)}:host.icon-white{fill:#fff}\n"] }]
-        }] });
-
-class DfIconModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: DfIconModule, imports: [DfAmadeusIconComponent], exports: [DfAmadeusIconComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfIconModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfIconModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [DfAmadeusIconComponent],
-                    exports: [DfAmadeusIconComponent]
-                }]
-        }] });
-
 class DfPopoverConfig extends NgbPopoverConfig {
     constructor() {
         super(...arguments);
         this.autoClose = 'outside';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfPopoverConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfPopoverConfig }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfPopoverConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfPopoverConfig }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfPopoverConfig, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfPopoverConfig, decorators: [{
             type: Injectable
         }] });
 
 class DfPopoverModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: DfPopoverModule, exports: [NgbPopoverModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfPopoverModule, providers: [{ provide: NgbPopoverConfig, useClass: DfPopoverConfig }], imports: [NgbPopoverModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: DfPopoverModule, exports: [NgbPopoverModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfPopoverModule, providers: [{ provide: NgbPopoverConfig, useClass: DfPopoverConfig }], imports: [NgbPopoverModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfPopoverModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfPopoverModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [NgbPopoverModule],
@@ -981,13 +798,13 @@ class DfProgressbarComponent {
     constructor() {
         this.PERCENTAGE_PLACEHOLDER = '%PERCENTAGE%';
         this.FADING_DELAY_MS = 1500; // if triggered by observables, number of milliseconds after progress bar disappears once stopped
-        this.infiniteAnimation = input(false, ...(ngDevMode ? [{ debugName: "infiniteAnimation", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.infiniteAnimation = input(false, { ...(ngDevMode ? { debugName: "infiniteAnimation" } : {}), transform: booleanAttribute });
         /**
          * Current value of the progressBar. If 'maxValue' is not defined, value represents a percentage. Otherwise, progress
          * bar percentage value will be computed based on the ratio of 'value/maxValue'
          */
-        this.value = input(0, ...(ngDevMode ? [{ debugName: "value", transform: numberAttribute }] : [{ transform: numberAttribute }]));
-        this.maxValue = input(100, ...(ngDevMode ? [{ debugName: "maxValue", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.value = input(0, { ...(ngDevMode ? { debugName: "value" } : {}), transform: numberAttribute });
+        this.maxValue = input(100, { ...(ngDevMode ? { debugName: "maxValue" } : {}), transform: numberAttribute });
         this.innerValue = signal(0, ...(ngDevMode ? [{ debugName: "innerValue" }] : []));
         this.percentageValue = computed(() => {
             const val = this.innerValue();
@@ -1098,20 +915,22 @@ class DfProgressbarComponent {
     resetProgressBarValues() {
         this.innerValue.set(0);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfProgressbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DfProgressbarComponent, isStandalone: true, selector: "df-progressbar", inputs: { infiniteAnimation: { classPropertyName: "infiniteAnimation", publicName: "infiniteAnimation", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, start$: { classPropertyName: "start$", publicName: "start$", isSignal: true, isRequired: false, transformFunction: null }, end$: { classPropertyName: "end$", publicName: "end$", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { percentageValueChange: "percentageValueChange" }, ngImport: i0, template: "@if (displayProgressBar()) {\n  @if (computedText(); as computedText) {\n    <div class=\"progressbar-text mb-3\">{{ computedText }}</div>\n  }\n  @if (infiniteAnimation()) {\n    <div\n      class=\"progress\"\n      role=\"progressbar\"\n      aria-valuetext=\"indeterminate\"\n      [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n      [attr.aria-label]=\"!ariaLabelledBy() && ariaLabel() ? ariaLabel() : null\"\n    >\n      <div class=\"progress-bar infinite-animation\"></div>\n    </div>\n  } @else {\n    <div\n      class=\"progress\"\n      role=\"progressbar\"\n      [attr.aria-valuenow]=\"innerValue()\"\n      aria-valuemin=\"0\"\n      [attr.aria-valuemax]=\"maxValue()\"\n      [attr.aria-valuetext]=\"computedText() || null\"\n      [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n      [attr.aria-label]=\"!ariaLabelledBy() && ariaLabel() ? ariaLabel() : null\"\n    >\n      <div [style.width.%]=\"percentageValue()\" class=\"progress-bar\"></div>\n    </div>\n  }\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfProgressbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DfProgressbarComponent, isStandalone: true, selector: "df-progressbar", inputs: { infiniteAnimation: { classPropertyName: "infiniteAnimation", publicName: "infiniteAnimation", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, start$: { classPropertyName: "start$", publicName: "start$", isSignal: true, isRequired: false, transformFunction: null }, end$: { classPropertyName: "end$", publicName: "end$", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { percentageValueChange: "percentageValueChange" }, host: { classAttribute: "d-block" }, ngImport: i0, template: "@if (displayProgressBar()) {\n  @if (computedText(); as computedText) {\n    <div class=\"progressbar-text mb-3\">{{ computedText }}</div>\n  }\n  @if (infiniteAnimation()) {\n    <div\n      class=\"progress\"\n      role=\"progressbar\"\n      aria-valuetext=\"indeterminate\"\n      [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n      [attr.aria-label]=\"!ariaLabelledBy() && ariaLabel() ? ariaLabel() : null\"\n    >\n      <div class=\"progress-bar infinite-animation\"></div>\n    </div>\n  } @else {\n    <div\n      class=\"progress\"\n      role=\"progressbar\"\n      [attr.aria-valuenow]=\"innerValue()\"\n      aria-valuemin=\"0\"\n      [attr.aria-valuemax]=\"maxValue()\"\n      [attr.aria-valuetext]=\"computedText() || null\"\n      [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n      [attr.aria-label]=\"!ariaLabelledBy() && ariaLabel() ? ariaLabel() : null\"\n    >\n      <div [style.width.%]=\"percentageValue()\" class=\"progress-bar\"></div>\n    </div>\n  }\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfProgressbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfProgressbarComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'df-progressbar', template: "@if (displayProgressBar()) {\n  @if (computedText(); as computedText) {\n    <div class=\"progressbar-text mb-3\">{{ computedText }}</div>\n  }\n  @if (infiniteAnimation()) {\n    <div\n      class=\"progress\"\n      role=\"progressbar\"\n      aria-valuetext=\"indeterminate\"\n      [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n      [attr.aria-label]=\"!ariaLabelledBy() && ariaLabel() ? ariaLabel() : null\"\n    >\n      <div class=\"progress-bar infinite-animation\"></div>\n    </div>\n  } @else {\n    <div\n      class=\"progress\"\n      role=\"progressbar\"\n      [attr.aria-valuenow]=\"innerValue()\"\n      aria-valuemin=\"0\"\n      [attr.aria-valuemax]=\"maxValue()\"\n      [attr.aria-valuetext]=\"computedText() || null\"\n      [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n      [attr.aria-label]=\"!ariaLabelledBy() && ariaLabel() ? ariaLabel() : null\"\n    >\n      <div [style.width.%]=\"percentageValue()\" class=\"progress-bar\"></div>\n    </div>\n  }\n}\n" }]
-        }], ctorParameters: () => [] });
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'df-progressbar', host: {
+                        class: 'd-block'
+                    }, template: "@if (displayProgressBar()) {\n  @if (computedText(); as computedText) {\n    <div class=\"progressbar-text mb-3\">{{ computedText }}</div>\n  }\n  @if (infiniteAnimation()) {\n    <div\n      class=\"progress\"\n      role=\"progressbar\"\n      aria-valuetext=\"indeterminate\"\n      [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n      [attr.aria-label]=\"!ariaLabelledBy() && ariaLabel() ? ariaLabel() : null\"\n    >\n      <div class=\"progress-bar infinite-animation\"></div>\n    </div>\n  } @else {\n    <div\n      class=\"progress\"\n      role=\"progressbar\"\n      [attr.aria-valuenow]=\"innerValue()\"\n      aria-valuemin=\"0\"\n      [attr.aria-valuemax]=\"maxValue()\"\n      [attr.aria-valuetext]=\"computedText() || null\"\n      [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n      [attr.aria-label]=\"!ariaLabelledBy() && ariaLabel() ? ariaLabel() : null\"\n    >\n      <div [style.width.%]=\"percentageValue()\" class=\"progress-bar\"></div>\n    </div>\n  }\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { infiniteAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "infiniteAnimation", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], percentageValueChange: [{ type: i0.Output, args: ["percentageValueChange"] }], start$: [{ type: i0.Input, args: [{ isSignal: true, alias: "start$", required: false }] }], end$: [{ type: i0.Input, args: [{ isSignal: true, alias: "end$", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }] } });
 
 class DfProgressbarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfProgressbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: DfProgressbarModule, imports: [DfProgressbarComponent], exports: [DfProgressbarComponent, NgbProgressbarModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfProgressbarModule, imports: [NgbProgressbarModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfProgressbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: DfProgressbarModule, imports: [DfProgressbarComponent], exports: [DfProgressbarComponent, NgbProgressbarModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfProgressbarModule, imports: [NgbProgressbarModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfProgressbarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfProgressbarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfProgressbarComponent],
@@ -1146,26 +965,26 @@ var DfProgressIndicatorContentPosition;
 
 class DfProgressIndicatorContainerComponent {
     constructor() {
-        this.DEFAULT_CLASS_POSITION = 'df-progressindicator-centered';
+        this.DEFAULT_CLASS_POSITION = 'align-items-center justify-content-center';
         this.containerClass = input(...(ngDevMode ? [undefined, { debugName: "containerClass" }] : []));
         this.position = input(...(ngDevMode ? [undefined, { debugName: "position" }] : []));
         this.positionClass = computed(() => {
             const position = this.position();
             switch (position) {
                 case DfProgressIndicatorContentPosition.TOP:
-                    return 'df-progressindicator-top';
+                    return 'align-items-start justify-content-center';
                 case DfProgressIndicatorContentPosition.BOTTOM:
-                    return 'df-progressindicator-bottom';
+                    return 'align-items-end justify-content-center';
                 default:
                     return this.DEFAULT_CLASS_POSITION;
             }
         }, ...(ngDevMode ? [{ debugName: "positionClass" }] : []));
-        this.classes = computed(() => `df-progressindicator-container ${this.containerClass() || ''} ${this.positionClass()}`, ...(ngDevMode ? [{ debugName: "classes" }] : []));
+        this.classes = computed(() => `df-progressindicator-container d-flex position-absolute start-0 end-0 top-0 bottom-0 ${this.containerClass() || ''} ${this.positionClass()}`, ...(ngDevMode ? [{ debugName: "classes" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfProgressIndicatorContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: DfProgressIndicatorContainerComponent, isStandalone: true, selector: "df-progressindicator-container", inputs: { containerClass: { classPropertyName: "containerClass", publicName: "containerClass", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfProgressIndicatorContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: DfProgressIndicatorContainerComponent, isStandalone: true, selector: "df-progressindicator-container", inputs: { containerClass: { classPropertyName: "containerClass", publicName: "containerClass", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfProgressIndicatorContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfProgressIndicatorContainerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'df-progressindicator-container',
@@ -1176,32 +995,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                         '[class]': 'classes()'
                     }
                 }]
-        }] });
+        }], propDecorators: { containerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerClass", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
 
 class DfDefaultSpinnerComponent {
     constructor() {
-        this.isGlobalSpinner = input(false, ...(ngDevMode ? [{ debugName: "isGlobalSpinner", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.isGlobalSpinner = input(false, { ...(ngDevMode ? { debugName: "isGlobalSpinner" } : {}), transform: booleanAttribute });
         this.contentClass = input('spinner-border text-primary', ...(ngDevMode ? [{ debugName: "contentClass" }] : []));
         this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfDefaultSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DfDefaultSpinnerComponent, isStandalone: true, selector: "df-default-spinner", inputs: { isGlobalSpinner: { classPropertyName: "isGlobalSpinner", publicName: "isGlobalSpinner", isSignal: true, isRequired: false, transformFunction: null }, contentClass: { classPropertyName: "contentClass", publicName: "contentClass", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"contentClass()\" [attr.role]=\"isGlobalSpinner() ? 'alert' : 'status'\">\n  <span class=\"visually-hidden\">\n    @if (ariaLabel(); as ariaLabel) {\n      {{ ariaLabel }}\n    } @else {\n      <ng-container i18n=\"@@df.progressindicator.default.spinner.ariaLabel\">Loading...</ng-container>\n    }\n  </span>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfDefaultSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DfDefaultSpinnerComponent, isStandalone: true, selector: "df-default-spinner", inputs: { isGlobalSpinner: { classPropertyName: "isGlobalSpinner", publicName: "isGlobalSpinner", isSignal: true, isRequired: false, transformFunction: null }, contentClass: { classPropertyName: "contentClass", publicName: "contentClass", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"contentClass()\" [attr.role]=\"isGlobalSpinner() ? 'alert' : 'status'\">\n  <span class=\"visually-hidden\">\n    @if (ariaLabel(); as ariaLabel) {\n      {{ ariaLabel }}\n    } @else {\n      <ng-container i18n=\"@@df.progressindicator.default.spinner.ariaLabel\">Loading...</ng-container>\n    }\n  </span>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfDefaultSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfDefaultSpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'df-default-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"contentClass()\" [attr.role]=\"isGlobalSpinner() ? 'alert' : 'status'\">\n  <span class=\"visually-hidden\">\n    @if (ariaLabel(); as ariaLabel) {\n      {{ ariaLabel }}\n    } @else {\n      <ng-container i18n=\"@@df.progressindicator.default.spinner.ariaLabel\">Loading...</ng-container>\n    }\n  </span>\n</div>\n" }]
-        }] });
+        }], propDecorators: { isGlobalSpinner: [{ type: i0.Input, args: [{ isSignal: true, alias: "isGlobalSpinner", required: false }] }], contentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentClass", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 class DfProgressIndicatorBackdropComponent {
     constructor() {
         this.backdropClass = input(...(ngDevMode ? [undefined, { debugName: "backdropClass" }] : []));
         this.isGlobalBackdrop = input(true, ...(ngDevMode ? [{ debugName: "isGlobalBackdrop" }] : []));
-        this.classes = computed(() => `df-progressindicator-backdrop ${this.backdropClass() || ''} df-progressindicator-backdrop${this.isGlobalBackdrop() ? '-global' : '-contextual'}`, ...(ngDevMode ? [{ debugName: "classes" }] : []));
+        this.classes = computed(() => `df-progressindicator-backdrop position-absolute start-0 end-0 top-0 bottom-0 opacity-50 ${this.backdropClass() || ''} df-progressindicator-backdrop${this.isGlobalBackdrop() ? '-global' : '-contextual'}`, ...(ngDevMode ? [{ debugName: "classes" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfProgressIndicatorBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: DfProgressIndicatorBackdropComponent, isStandalone: true, selector: "df-progressindicator-backdrop", inputs: { backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null }, isGlobalBackdrop: { classPropertyName: "isGlobalBackdrop", publicName: "isGlobalBackdrop", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfProgressIndicatorBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: DfProgressIndicatorBackdropComponent, isStandalone: true, selector: "df-progressindicator-backdrop", inputs: { backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null }, isGlobalBackdrop: { classPropertyName: "isGlobalBackdrop", publicName: "isGlobalBackdrop", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfProgressIndicatorBackdropComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfProgressIndicatorBackdropComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'df-progressindicator-backdrop',
@@ -1211,7 +1030,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                         '[class]': 'classes()'
                     }
                 }]
-        }] });
+        }], propDecorators: { backdropClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClass", required: false }] }], isGlobalBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "isGlobalBackdrop", required: false }] }] } });
 
 class DfProgressIndicatorRef {
     constructor(containerRef, contentRef, backdropRef) {
@@ -1286,10 +1105,10 @@ class ScrollBar {
         body.removeChild(measurer);
         return width;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ScrollBar, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ScrollBar, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ScrollBar, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ScrollBar, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ScrollBar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ScrollBar, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1297,7 +1116,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
 class DfProgressIndicatorService {
     constructor() {
         this.renderer = inject(RendererFactory2).createRenderer(null, null);
-        this.BODY_CLASS = 'df-progressindicator-open';
+        this.BODY_CLASS = 'overflow-hidden';
         // TODO - Remove it when https://github.com/angular/angular/issues/22567
         this.containerAttributes = ['containerClass', 'position'];
         this.backdropAttributes = ['backdropClass', 'isGlobalBackdrop'];
@@ -1455,10 +1274,10 @@ class DfProgressIndicatorService {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfProgressIndicatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfProgressIndicatorService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfProgressIndicatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfProgressIndicatorService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfProgressIndicatorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfProgressIndicatorService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1486,19 +1305,19 @@ class DfProgressIndicatorDirective {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfProgressIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.3", type: DfProgressIndicatorDirective, isStandalone: true, selector: "[dfProgressIndicator]", inputs: { dfProgressIndicator: { classPropertyName: "dfProgressIndicator", publicName: "dfProgressIndicator", isSignal: true, isRequired: true, transformFunction: null }, dfProgressIndicatorConfig: { classPropertyName: "dfProgressIndicatorConfig", publicName: "dfProgressIndicatorConfig", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfProgressIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: DfProgressIndicatorDirective, isStandalone: true, selector: "[dfProgressIndicator]", inputs: { dfProgressIndicator: { classPropertyName: "dfProgressIndicator", publicName: "dfProgressIndicator", isSignal: true, isRequired: true, transformFunction: null }, dfProgressIndicatorConfig: { classPropertyName: "dfProgressIndicatorConfig", publicName: "dfProgressIndicatorConfig", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfProgressIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfProgressIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfProgressIndicator]'
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { dfProgressIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "dfProgressIndicator", required: true }] }], dfProgressIndicatorConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "dfProgressIndicatorConfig", required: false }] }] } });
 
 class DfProgressIndicatorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfProgressIndicatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: DfProgressIndicatorModule, imports: [DfDefaultSpinnerComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfProgressIndicatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: DfProgressIndicatorModule, imports: [DfDefaultSpinnerComponent,
             DfProgressbarModule,
             DfProgressIndicatorBackdropComponent,
             DfProgressIndicatorContainerComponent,
@@ -1507,9 +1326,9 @@ class DfProgressIndicatorModule {
             DfProgressIndicatorDirective,
             DfProgressIndicatorBackdropComponent,
             DfDefaultSpinnerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfProgressIndicatorModule, imports: [DfProgressbarModule, DfProgressbarModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfProgressIndicatorModule, imports: [DfProgressbarModule, DfProgressbarModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfProgressIndicatorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfProgressIndicatorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1547,15 +1366,15 @@ class DfSliderDirectionDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSliderDirectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.3", type: DfSliderDirectionDirective, isStandalone: true, selector: "[dfSliderDirection]", inputs: { dfSliderDirection: { classPropertyName: "dfSliderDirection", publicName: "dfSliderDirection", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSliderDirectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: DfSliderDirectionDirective, isStandalone: true, selector: "[dfSliderDirection]", inputs: { dfSliderDirection: { classPropertyName: "dfSliderDirection", publicName: "dfSliderDirection", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSliderDirectionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSliderDirectionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfSliderDirection]'
                 }]
-        }] });
+        }], propDecorators: { dfSliderDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "dfSliderDirection", required: true }] }] } });
 
 /** Label type */
 var LabelType;
@@ -2020,10 +1839,10 @@ class SliderElementDirective {
     isRefDestroyed() {
         return (ValueHelper.isNullOrUndefined(this.changeDetectionRef) || this.changeDetectionRef['destroyed']);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SliderElementDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: SliderElementDirective, isStandalone: true, selector: "[ngxSliderElement]", host: { properties: { "style.opacity": "this.opacity", "style.visibility": "this.visibility", "style.left": "this.left", "style.bottom": "this.bottom", "style.height": "this.height", "style.width": "this.width", "style.transform": "this.transform" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", 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: "21.0.6", type: SliderElementDirective, isStandalone: true, selector: "[ngxSliderElement]", host: { properties: { "style.opacity": "this.opacity", "style.visibility": "this.visibility", "style.left": "this.left", "style.bottom": "this.bottom", "style.height": "this.height", "style.width": "this.width", "style.transform": "this.transform" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SliderElementDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SliderElementDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -2073,10 +1892,10 @@ class SliderHandleDirective extends SliderElementDirective {
     focus() {
         this.elemRef.nativeElement.focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SliderHandleDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: SliderHandleDirective, isStandalone: true, selector: "[ngxSliderHandle]", host: { properties: { "class.ngx-slider-active": "this.active", "attr.role": "this.role", "attr.tabindex": "this.tabindex", "attr.aria-orientation": "this.ariaOrientation", "attr.aria-label": "this.ariaLabel", "attr.aria-labelledby": "this.ariaLabelledBy", "attr.aria-valuenow": "this.ariaValueNow", "attr.aria-valuetext": "this.ariaValueText", "attr.aria-valuemin": "this.ariaValueMin", "attr.aria-valuemax": "this.ariaValueMax" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", 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: "21.0.6", type: SliderHandleDirective, isStandalone: true, selector: "[ngxSliderHandle]", host: { properties: { "class.ngx-slider-active": "this.active", "attr.role": "this.role", "attr.tabindex": "this.tabindex", "attr.aria-orientation": "this.ariaOrientation", "attr.aria-label": "this.ariaLabel", "attr.aria-labelledby": "this.ariaLabelledBy", "attr.aria-valuenow": "this.ariaValueNow", "attr.aria-valuetext": "this.ariaValueText", "attr.aria-valuemin": "this.ariaValueMin", "attr.aria-valuemax": "this.ariaValueMax" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SliderHandleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SliderHandleDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -2140,10 +1959,10 @@ class SliderLabelDirective extends SliderElementDirective {
             this.calculateDimension();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SliderLabelDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: SliderLabelDirective, isStandalone: true, selector: "[ngxSliderLabel]", usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", 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: "21.0.6", type: SliderLabelDirective, isStandalone: true, selector: "[ngxSliderLabel]", usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SliderLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SliderLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -2156,10 +1975,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
  * @deprecated TooltipWrapperComponent is deprecated. Use {@link https://design-factory.amadeus.net/components/slider/agnosui AgnosUI Slider} instead.
  */
 class TooltipWrapperComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TooltipWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: TooltipWrapperComponent, isStandalone: true, selector: "ngx-slider-tooltip-wrapper", inputs: { template: "template", tooltip: "tooltip", placement: "placement", content: "content" }, ngImport: i0, template: "@if (template) {\n  <ng-template\n    *ngTemplateOutlet=\"template; context: { tooltip: tooltip, placement: placement, content: content }\"\n  ></ng-template>\n} @else {\n  <div class=\"ngx-slider-inner-tooltip\" [attr.title]=\"tooltip\" [attr.data-tooltip-placement]=\"placement\">\n    {{ content }}\n  </div>\n}\n", styles: [".ngx-slider-inner-tooltip{height:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TooltipWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TooltipWrapperComponent, isStandalone: true, selector: "ngx-slider-tooltip-wrapper", inputs: { template: "template", tooltip: "tooltip", placement: "placement", content: "content" }, ngImport: i0, template: "@if (template) {\n  <ng-template\n    *ngTemplateOutlet=\"template; context: { tooltip: tooltip, placement: placement, content: content }\"\n  ></ng-template>\n} @else {\n  <div class=\"ngx-slider-inner-tooltip\" [attr.title]=\"tooltip\" [attr.data-tooltip-placement]=\"placement\">\n    {{ content }}\n  </div>\n}\n", styles: [".ngx-slider-inner-tooltip{height:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TooltipWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TooltipWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-slider-tooltip-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "@if (template) {\n  <ng-template\n    *ngTemplateOutlet=\"template; context: { tooltip: tooltip, placement: placement, content: content }\"\n  ></ng-template>\n} @else {\n  <div class=\"ngx-slider-inner-tooltip\" [attr.title]=\"tooltip\" [attr.data-tooltip-placement]=\"placement\">\n    {{ content }}\n  </div>\n}\n", styles: [".ngx-slider-inner-tooltip{height:100%}\n"] }]
         }], propDecorators: { template: [{
@@ -4067,10 +3886,10 @@ class SliderComponent {
         }
         return changeContext;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SliderComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: SliderComponent, isStandalone: true, selector: "ngx-slider", inputs: { value: "value", highValue: "highValue", options: "options", manualRefresh: "manualRefresh", triggerFocus: "triggerFocus" }, outputs: { valueChange: "valueChange", highValueChange: "highValueChange", userChangeStart: "userChangeStart", userChange: "userChange", userChangeEnd: "userChangeEnd" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class": "this.class", "class.vertical": "this.sliderElementVerticalClass", "class.animate": "this.sliderElementAnimateClass", "class.with-legend": "this.sliderElementWithLegendClass", "attr.disabled": "this.sliderElementDisabledAttr", "attr.aria-label": "this.sliderElementAriaLabel" } }, providers: [NGX_SLIDER_CONTROL_VALUE_ACCESSOR], queries: [{ propertyName: "tooltipTemplate", first: true, predicate: ["tooltipTemplate"], descendants: true }], viewQueries: [{ propertyName: "leftOuterSelectionBarElement", first: true, predicate: ["leftOuterSelectionBar"], descendants: true, read: SliderElementDirective }, { propertyName: "rightOuterSelectionBarElement", first: true, predicate: ["rightOuterSelectionBar"], descendants: true, read: SliderElementDirective }, { propertyName: "fullBarElement", first: true, predicate: ["fullBar"], descendants: true, read: SliderElementDirective }, { propertyName: "selectionBarElement", first: true, predicate: ["selectionBar"], descendants: true, read: SliderElementDirective }, { propertyName: "minHandleElement", first: true, predicate: ["minHandle"], descendants: true, read: SliderHandleDirective }, { propertyName: "maxHandleElement", first: true, predicate: ["maxHandle"], descendants: true, read: SliderHandleDirective }, { propertyName: "floorLabelElement", first: true, predicate: ["floorLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "ceilLabelElement", first: true, predicate: ["ceilLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "minHandleLabelElement", first: true, predicate: ["minHandleLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "maxHandleLabelElement", first: true, predicate: ["maxHandleLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "combinedLabelElement", first: true, predicate: ["combinedLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "ticksElement", first: true, predicate: ["ticksElement"], descendants: true, read: SliderElementDirective }], usesOnChanges: true, ngImport: i0, template: "<!-- // 0 Left selection bar outside two handles -->\n<span\n  ngxSliderElement\n  #leftOuterSelectionBar\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-left-out-selection\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 1 Right selection bar outside two handles -->\n<span\n  ngxSliderElement\n  #rightOuterSelectionBar\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-right-out-selection\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 2 The whole slider bar -->\n<span\n  ngxSliderElement\n  #fullBar\n  [class.ngx-slider-transparent]=\"fullBarTransparentClass\"\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-full-bar\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 3 Selection bar between two handles -->\n<span\n  ngxSliderElement\n  #selectionBar\n  [class.ngx-slider-draggable]=\"selectionBarDraggableClass\"\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-selection-bar\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar ngx-slider-selection\" [ngStyle]=\"barStyle\"></span>\n</span>\n<!-- // 4 Low slider handle -->\n<span\n  ngxSliderHandle\n  #minHandle\n  class=\"ngx-slider-span ngx-slider-pointer ngx-slider-pointer-min\"\n  [ngStyle]=\"minPointerStyle\"\n></span>\n<!-- // 5 High slider handle -->\n<span\n  ngxSliderHandle\n  #maxHandle\n  [style.display]=\"range ? 'inherit' : 'none'\"\n  class=\"ngx-slider-span ngx-slider-pointer ngx-slider-pointer-max\"\n  [ngStyle]=\"maxPointerStyle\"\n></span>\n<!-- // 6 Floor label -->\n<span ngxSliderLabel #floorLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-limit ngx-slider-floor\"></span>\n<!-- // 7 Ceiling label -->\n<span ngxSliderLabel #ceilLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-limit ngx-slider-ceil\"></span>\n<!-- // 8 Label above the low slider handle -->\n<span ngxSliderLabel #minHandleLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-model-value\"></span>\n<!-- // 9 Label above the high slider handle -->\n<span ngxSliderLabel #maxHandleLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-model-high\"></span>\n<!-- // 10 Combined range label when the slider handles are close ex. 15 - 17 -->\n<span ngxSliderLabel #combinedLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-combined\"></span>\n<!-- // 11 The ticks -->\n<span\n  ngxSliderElement\n  #ticksElement\n  [hidden]=\"!showTicks\"\n  [class.ngx-slider-ticks-values-under]=\"ticksUnderValuesClass\"\n  class=\"ngx-slider-ticks\"\n>\n  @for (t of ticks; track t) {\n    <span class=\"ngx-slider-tick\" [ngClass]=\"{ 'ngx-slider-selected': t.selected }\" [ngStyle]=\"t.style\">\n      <ngx-slider-tooltip-wrapper\n        [template]=\"tooltipTemplate\"\n        [tooltip]=\"t.tooltip\"\n        [placement]=\"t.tooltipPlacement\"\n      ></ngx-slider-tooltip-wrapper>\n      @if (t.value !== null) {\n        <ngx-slider-tooltip-wrapper\n          class=\"ngx-slider-span ngx-slider-tick-value\"\n          [template]=\"tooltipTemplate\"\n          [tooltip]=\"t.valueTooltip\"\n          [placement]=\"t.valueTooltipPlacement\"\n          [content]=\"t.value\"\n        ></ngx-slider-tooltip-wrapper>\n      }\n      @if (t.legend !== null) {\n        <span class=\"ngx-slider-span ngx-slider-tick-legend\" [innerHTML]=\"t.legend\"></span>\n      }\n    </span>\n  }\n</span>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TooltipWrapperComponent, selector: "ngx-slider-tooltip-wrapper", inputs: ["template", "tooltip", "placement", "content"] }, { kind: "directive", type: SliderLabelDirective, selector: "[ngxSliderLabel]" }, { kind: "directive", type: SliderHandleDirective, selector: "[ngxSliderHandle]" }, { kind: "directive", type: SliderElementDirective, selector: "[ngxSliderElement]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", 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: "21.0.6", 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()" }, properties: { "class": "this.class", "class.vertical": "this.sliderElementVerticalClass", "class.animate": "this.sliderElementAnimateClass", "class.with-legend": "this.sliderElementWithLegendClass", "attr.disabled": "this.sliderElementDisabledAttr", "attr.aria-label": "this.sliderElementAriaLabel" } }, providers: [NGX_SLIDER_CONTROL_VALUE_ACCESSOR], queries: [{ propertyName: "tooltipTemplate", first: true, predicate: ["tooltipTemplate"], descendants: true }], viewQueries: [{ propertyName: "leftOuterSelectionBarElement", first: true, predicate: ["leftOuterSelectionBar"], descendants: true, read: SliderElementDirective }, { propertyName: "rightOuterSelectionBarElement", first: true, predicate: ["rightOuterSelectionBar"], descendants: true, read: SliderElementDirective }, { propertyName: "fullBarElement", first: true, predicate: ["fullBar"], descendants: true, read: SliderElementDirective }, { propertyName: "selectionBarElement", first: true, predicate: ["selectionBar"], descendants: true, read: SliderElementDirective }, { propertyName: "minHandleElement", first: true, predicate: ["minHandle"], descendants: true, read: SliderHandleDirective }, { propertyName: "maxHandleElement", first: true, predicate: ["maxHandle"], descendants: true, read: SliderHandleDirective }, { propertyName: "floorLabelElement", first: true, predicate: ["floorLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "ceilLabelElement", first: true, predicate: ["ceilLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "minHandleLabelElement", first: true, predicate: ["minHandleLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "maxHandleLabelElement", first: true, predicate: ["maxHandleLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "combinedLabelElement", first: true, predicate: ["combinedLabel"], descendants: true, read: SliderLabelDirective }, { propertyName: "ticksElement", first: true, predicate: ["ticksElement"], descendants: true, read: SliderElementDirective }], usesOnChanges: true, ngImport: i0, template: "<!-- // 0 Left selection bar outside two handles -->\n<span\n  ngxSliderElement\n  #leftOuterSelectionBar\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-left-out-selection\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 1 Right selection bar outside two handles -->\n<span\n  ngxSliderElement\n  #rightOuterSelectionBar\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-right-out-selection\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 2 The whole slider bar -->\n<span\n  ngxSliderElement\n  #fullBar\n  [class.ngx-slider-transparent]=\"fullBarTransparentClass\"\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-full-bar\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 3 Selection bar between two handles -->\n<span\n  ngxSliderElement\n  #selectionBar\n  [class.ngx-slider-draggable]=\"selectionBarDraggableClass\"\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-selection-bar\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar ngx-slider-selection\" [ngStyle]=\"barStyle\"></span>\n</span>\n<!-- // 4 Low slider handle -->\n<span\n  ngxSliderHandle\n  #minHandle\n  class=\"ngx-slider-span ngx-slider-pointer ngx-slider-pointer-min\"\n  [ngStyle]=\"minPointerStyle\"\n></span>\n<!-- // 5 High slider handle -->\n<span\n  ngxSliderHandle\n  #maxHandle\n  [style.display]=\"range ? 'inherit' : 'none'\"\n  class=\"ngx-slider-span ngx-slider-pointer ngx-slider-pointer-max\"\n  [ngStyle]=\"maxPointerStyle\"\n></span>\n<!-- // 6 Floor label -->\n<span ngxSliderLabel #floorLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-limit ngx-slider-floor\"></span>\n<!-- // 7 Ceiling label -->\n<span ngxSliderLabel #ceilLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-limit ngx-slider-ceil\"></span>\n<!-- // 8 Label above the low slider handle -->\n<span ngxSliderLabel #minHandleLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-model-value\"></span>\n<!-- // 9 Label above the high slider handle -->\n<span ngxSliderLabel #maxHandleLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-model-high\"></span>\n<!-- // 10 Combined range label when the slider handles are close ex. 15 - 17 -->\n<span ngxSliderLabel #combinedLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-combined\"></span>\n<!-- // 11 The ticks -->\n<span\n  ngxSliderElement\n  #ticksElement\n  [hidden]=\"!showTicks\"\n  [class.ngx-slider-ticks-values-under]=\"ticksUnderValuesClass\"\n  class=\"ngx-slider-ticks\"\n>\n  @for (t of ticks; track t) {\n    <span class=\"ngx-slider-tick\" [ngClass]=\"{ 'ngx-slider-selected': t.selected }\" [ngStyle]=\"t.style\">\n      <ngx-slider-tooltip-wrapper\n        [template]=\"tooltipTemplate\"\n        [tooltip]=\"t.tooltip\"\n        [placement]=\"t.tooltipPlacement\"\n      ></ngx-slider-tooltip-wrapper>\n      @if (t.value !== null) {\n        <ngx-slider-tooltip-wrapper\n          class=\"ngx-slider-span ngx-slider-tick-value\"\n          [template]=\"tooltipTemplate\"\n          [tooltip]=\"t.valueTooltip\"\n          [placement]=\"t.valueTooltipPlacement\"\n          [content]=\"t.value\"\n        ></ngx-slider-tooltip-wrapper>\n      }\n      @if (t.legend !== null) {\n        <span class=\"ngx-slider-span ngx-slider-tick-legend\" [innerHTML]=\"t.legend\"></span>\n      }\n    </span>\n  }\n</span>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TooltipWrapperComponent, selector: "ngx-slider-tooltip-wrapper", inputs: ["template", "tooltip", "placement", "content"] }, { kind: "directive", type: SliderLabelDirective, selector: "[ngxSliderLabel]" }, { kind: "directive", type: SliderHandleDirective, selector: "[ngxSliderHandle]" }, { kind: "directive", type: SliderElementDirective, selector: "[ngxSliderElement]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-slider', providers: [NGX_SLIDER_CONTROL_VALUE_ACCESSOR], imports: [CommonModule, TooltipWrapperComponent, SliderLabelDirective, SliderHandleDirective, SliderElementDirective], template: "<!-- // 0 Left selection bar outside two handles -->\n<span\n  ngxSliderElement\n  #leftOuterSelectionBar\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-left-out-selection\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 1 Right selection bar outside two handles -->\n<span\n  ngxSliderElement\n  #rightOuterSelectionBar\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-right-out-selection\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 2 The whole slider bar -->\n<span\n  ngxSliderElement\n  #fullBar\n  [class.ngx-slider-transparent]=\"fullBarTransparentClass\"\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-full-bar\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar\"></span>\n</span>\n<!-- // 3 Selection bar between two handles -->\n<span\n  ngxSliderElement\n  #selectionBar\n  [class.ngx-slider-draggable]=\"selectionBarDraggableClass\"\n  class=\"ngx-slider-span ngx-slider-bar-wrapper ngx-slider-selection-bar\"\n>\n  <span class=\"ngx-slider-span ngx-slider-bar ngx-slider-selection\" [ngStyle]=\"barStyle\"></span>\n</span>\n<!-- // 4 Low slider handle -->\n<span\n  ngxSliderHandle\n  #minHandle\n  class=\"ngx-slider-span ngx-slider-pointer ngx-slider-pointer-min\"\n  [ngStyle]=\"minPointerStyle\"\n></span>\n<!-- // 5 High slider handle -->\n<span\n  ngxSliderHandle\n  #maxHandle\n  [style.display]=\"range ? 'inherit' : 'none'\"\n  class=\"ngx-slider-span ngx-slider-pointer ngx-slider-pointer-max\"\n  [ngStyle]=\"maxPointerStyle\"\n></span>\n<!-- // 6 Floor label -->\n<span ngxSliderLabel #floorLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-limit ngx-slider-floor\"></span>\n<!-- // 7 Ceiling label -->\n<span ngxSliderLabel #ceilLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-limit ngx-slider-ceil\"></span>\n<!-- // 8 Label above the low slider handle -->\n<span ngxSliderLabel #minHandleLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-model-value\"></span>\n<!-- // 9 Label above the high slider handle -->\n<span ngxSliderLabel #maxHandleLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-model-high\"></span>\n<!-- // 10 Combined range label when the slider handles are close ex. 15 - 17 -->\n<span ngxSliderLabel #combinedLabel class=\"ngx-slider-span ngx-slider-bubble ngx-slider-combined\"></span>\n<!-- // 11 The ticks -->\n<span\n  ngxSliderElement\n  #ticksElement\n  [hidden]=\"!showTicks\"\n  [class.ngx-slider-ticks-values-under]=\"ticksUnderValuesClass\"\n  class=\"ngx-slider-ticks\"\n>\n  @for (t of ticks; track t) {\n    <span class=\"ngx-slider-tick\" [ngClass]=\"{ 'ngx-slider-selected': t.selected }\" [ngStyle]=\"t.style\">\n      <ngx-slider-tooltip-wrapper\n        [template]=\"tooltipTemplate\"\n        [tooltip]=\"t.tooltip\"\n        [placement]=\"t.tooltipPlacement\"\n      ></ngx-slider-tooltip-wrapper>\n      @if (t.value !== null) {\n        <ngx-slider-tooltip-wrapper\n          class=\"ngx-slider-span ngx-slider-tick-value\"\n          [template]=\"tooltipTemplate\"\n          [tooltip]=\"t.valueTooltip\"\n          [placement]=\"t.valueTooltipPlacement\"\n          [content]=\"t.value\"\n        ></ngx-slider-tooltip-wrapper>\n      }\n      @if (t.legend !== null) {\n        <span class=\"ngx-slider-span ngx-slider-tick-legend\" [innerHTML]=\"t.legend\"></span>\n      }\n    </span>\n  }\n</span>\n" }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { class: [{
@@ -4152,7 +3971,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                 args: ['attr.aria-label']
             }], onResize: [{
                 type: HostListener,
-                args: ['window:resize', ['$event']]
+                args: ['window:resize']
             }] } });
 
 /**
@@ -4160,16 +3979,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
  * Use {@link https://design-factory.amadeus.net/components/slider/agnosui  AgnosUI Slider} instead.
  */
 class DfSliderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: DfSliderModule, imports: [SliderComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: DfSliderModule, imports: [SliderComponent,
             SliderElementDirective,
             SliderHandleDirective,
             SliderLabelDirective,
             TooltipWrapperComponent,
             DfSliderDirectionDirective], exports: [DfSliderDirectionDirective, SliderComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSliderModule, imports: [SliderComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSliderModule, imports: [SliderComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSliderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSliderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -4199,10 +4018,10 @@ class DfSideNavConfig {
         this.isAppOverlay = false;
         this.isAppOverlayMode = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSideNavConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSideNavConfig, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSideNavConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSideNavConfig, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSideNavConfig, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSideNavConfig, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -4509,492 +4328,81 @@ class DfSideNavService {
     updateOverLay() {
         this._isAppOverlay$.next(this.isAppOverlayMode && this._isCollapsed$.value === false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSideNavService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSideNavService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSideNavService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSideNavService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSideNavService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSideNavService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
         }], ctorParameters: () => [] });
 
-const environment = {
-    animation: true,
-    transitionTimerDelayMs: 5
-};
-
-/**
- * Creates an observable where all callbacks are executed inside a given zone
- *
- * @param zone Angular Zone element
- */
-function runInZone(zone) {
-    return (source) => {
-        return new Observable((observer) => {
-            const onNext = (value) => zone.run(() => observer.next(value));
-            const onError = (e) => zone.run(() => observer.error(e));
-            const onComplete = () => zone.run(() => observer.complete());
-            return source.subscribe(onNext, onError, onComplete);
-        });
-    };
-}
-function getTransitionDurationMs(element) {
-    const { transitionDelay, transitionDuration } = window.getComputedStyle(element);
-    const transitionDelaySec = parseFloat(transitionDelay);
-    const transitionDurationSec = parseFloat(transitionDuration);
-    return (transitionDelaySec + transitionDurationSec) * 1000;
-}
-/**
- * Force a browser reflow
- * @param element element where to apply the reflow
- */
-function reflow(element) {
-    return (element || document.body).getBoundingClientRect();
-}
-
-const noopFn = () => { };
-const { transitionTimerDelayMs } = environment;
-const runningTransitions = new Map();
-const ngbRunTransition = (zone, element, startFn, options) => {
-    // Getting initial context from options
-    let context = options.context || {};
-    // Checking if there are already running transitions on the given element.
-    const running = runningTransitions.get(element);
-    if (running) {
-        switch (options.runningTransition) {
-            // If there is one running and we want for it to 'continue' to run, we have to cancel the new one.
-            // We're not emitting any values, but simply completing the observable (EMPTY).
-            case 'continue':
-                return EMPTY;
-            // If there is one running and we want for it to 'stop', we have to complete the running one.
-            // We're simply completing the running one and not emitting any values and merging newly provided context
-            // with the one coming from currently running transition.
-            case 'stop':
-                zone.run(() => running.transition$.complete());
-                context = Object.assign(running.context, context);
-                runningTransitions.delete(element);
-        }
-    }
-    // Running the start function
-    const endFn = startFn(element, options.animation, context) || noopFn;
-    // If 'prefer-reduced-motion' is enabled, the 'transition' will be set to 'none'.
-    // If animations are disabled, we have to emit a value and complete the observable
-    // In this case we have to call the end function, but can finish immediately by emitting a value,
-    // completing the observable and executing end functions synchronously.
-    if (!options.animation || window.getComputedStyle(element).transitionProperty === 'none') {
-        zone.run(() => endFn());
-        return of(undefined).pipe(runInZone(zone));
-    }
-    // Starting a new transition
-    const transition$ = new Subject();
-    const finishTransition$ = new Subject();
-    const stop$ = transition$.pipe(endWith(true));
-    runningTransitions.set(element, {
-        transition$,
-        complete: () => {
-            finishTransition$.next({});
-            finishTransition$.complete();
-        },
-        context
-    });
-    const transitionDurationMs = getTransitionDurationMs(element);
-    // 1. We have to both listen for the 'transitionend' event and have a 'just-in-case' timer,
-    // because 'transitionend' event might not be fired in some browsers, if the transitioning
-    // element becomes invisible (ex. when scrolling, making browser tab inactive, etc.). The timer
-    // guarantees, that we'll release the DOM element and complete 'ngbRunTransition'.
-    // 2. We need to filter transition end events, because they might bubble from shorter transitions
-    // on inner DOM elements. We're only interested in the transition on the 'element' itself.
-    zone.runOutsideAngular(() => {
-        const transitionEnd$ = fromEvent(element, 'transitionend').pipe(takeUntil(stop$), filter(({ target }) => target === element));
-        const timer$ = timer(transitionDurationMs + transitionTimerDelayMs).pipe(takeUntil(stop$));
-        race(timer$, transitionEnd$, finishTransition$)
-            .pipe(takeUntil(stop$))
-            .subscribe(() => {
-            runningTransitions.delete(element);
-            zone.run(() => {
-                endFn();
-                transition$.next({});
-                transition$.complete();
-            });
-        });
-    });
-    return transition$.asObservable();
-};
-const ngbCompleteTransition = (element) => {
-    runningTransitions.get(element)?.complete();
-};
-
-/**
- * A configuration service for the [DfSideNavCollapseDirective](#/components/sidenav/api#DfSideNavCollapseDirective) component.
- *
- * You can inject this service, typically in your root component, and customize its properties
- * to provide default values for the sideNav used in the application.
- */
-class DfSideNavCollapseConfig {
+class DfManageSideNavDirective {
     constructor() {
-        this._ngbConfig = inject(NgbConfig);
-    }
-    get animation() {
-        return this._animation === undefined ? this._ngbConfig.animation : this._animation;
+        this.element = inject(ElementRef);
+        this.renderer = inject(Renderer2);
     }
-    set animation(animation) {
-        this._animation = animation;
+    ngAfterViewChecked() {
+        if (this.element.nativeElement.querySelector('.active')) {
+            this.renderer.addClass(this.element.nativeElement, 'df-sidenav-list-withactivated');
+        }
+        else {
+            this.renderer.removeClass(this.element.nativeElement, 'df-sidenav-list-withactivated');
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSideNavCollapseConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSideNavCollapseConfig, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfManageSideNavDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: DfManageSideNavDirective, isStandalone: true, selector: "[dfManageSideNav]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSideNavCollapseConfig, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfManageSideNavDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dfManageSideNav]'
+                }]
         }] });
 
+let uniqueId = 0;
 /**
- * A service for managing the sidenav panel animation.
- * This service is included at root level
+ * SideNav is a component to provide navigation feature with a panel on the side of your page
  *
- * Creating a sidenav is straightforward: use [DfSideNavComponent](#/components/sidenav/api#DfSideNavComponent) component
+ * It supports several options as:
+ *  - Being in an overlay menu or not
+ *  - Being collapsed or not
+ *  - Can be used with or without Angular Router
+ *  - Can be used with media queries to adjust behavior to different breakpoints (see media section)
  */
-class DfSideNavCollapseService {
+// TODO cannot set to OnPush without a refactor of DfSideNavService
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
+class DfSideNavListComponent {
     constructor() {
-        this._sideNavAnimation$ = new BehaviorSubject(inject(DfSideNavCollapseConfig).animation);
+        this.items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
+        this.tplIcon = input(...(ngDevMode ? [undefined, { debugName: "tplIcon" }] : []));
+        this.tplItem = input(...(ngDevMode ? [undefined, { debugName: "tplItem" }] : []));
+        this.currentItem = input(...(ngDevMode ? [undefined, { debugName: "currentItem" }] : []));
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.controlledUniqueId = this.getControlledUniqueId();
+        this.sideNavService = inject(DfSideNavService);
     }
-    get sideNavAnimation$() {
-        return this._sideNavAnimation$.asObservable();
+    getControlledUniqueId() {
+        uniqueId++;
+        return `df-sidenav-id-${uniqueId};`;
     }
-    /**
-     * Use this to activate or desactivate the animation for the sideNav
-     * If input is `True` it will activate the animation.
-     * Default value for animation is set in by DfSideNavCollapseConfig
-     *
-     */
-    setAnimation(on) {
-        this._sideNavAnimation$.next(on);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSideNavCollapseService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSideNavCollapseService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSideNavCollapseService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-function measureCollapsingElementWidthPx(element) {
-    // SSR fix for without injecting the PlatformId
-    if (typeof navigator === 'undefined') {
-        return '0px';
-    }
-    const { classList } = element;
-    const hasShownClass = classList.contains('df-show');
-    if (!hasShownClass) {
-        classList.add('df-show');
-    }
-    element.style.width = '';
-    const width = `${element.getBoundingClientRect().width}px`;
-    if (!hasShownClass) {
-        classList.remove('df-show');
-    }
-    return width;
-}
-const DfCollapsingTransition = (element, animation, context) => {
-    const { direction, minimized } = context;
-    let { maxWidth } = context;
-    const { classList } = element;
-    const dfcollapsingClass = 'df-collapsing';
-    const dfminimizingClass = 'df-minimizing';
-    function setInitialClasses() {
-        if (minimized) {
-            classList.add('df-minimized');
-        }
-        else {
-            classList.add('df-collapse');
-        }
-        if (direction === 'show') {
-            classList.add('df-show');
-        }
-        else {
-            classList.remove('df-show');
-        }
-    }
-    // without animations we just need to set initial classes
-    if (!animation) {
-        setInitialClasses();
-        return () => { };
-    }
-    // No maxWidth -> running the transition for the first time
-    if (!maxWidth) {
-        maxWidth = measureCollapsingElementWidthPx(element);
-        context.maxWidth = maxWidth;
-        // Fix the width before starting the animation
-        element.style.width = direction !== 'show' ? maxWidth : minimized ? '50px' : '0px';
-        classList.remove('df-collapse');
-        classList.remove('df-minimized'); // add
-        classList.remove(dfcollapsingClass);
-        classList.remove(dfminimizingClass);
-        classList.remove('df-show');
-        reflow(element);
-        // Start the animation
-        if (minimized) {
-            classList.add(dfminimizingClass);
-        }
-        else {
-            classList.add(dfcollapsingClass);
-        }
-    }
-    // Start or revert the animation
-    element.style.width = direction === 'show' ? maxWidth : minimized ? '50px' : '0px';
-    return () => {
-        setInitialClasses();
-        classList.remove(dfcollapsingClass);
-        classList.remove(dfminimizingClass);
-        element.style.width = '';
-    };
-};
-
-/**
- * A directive to provide a simple way of hiding and showing the sideNav on the page.
- */
-class DfSideNavCollapseDirective {
-    constructor() {
-        /**
-         * If `true`, will collapse the element or show it otherwise.
-         */
-        this.dfSideNavCollapse = input.required(...(ngDevMode ? [{ debugName: "dfSideNavCollapse" }] : []));
-        this.collapsed = signal(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
-        this.minimized = input(false, ...(ngDevMode ? [{ debugName: "minimized" }] : []));
-        this.dfSideNavCollapseChange = output();
-        /**
-         * An event emitted when the collapse element is shown, after the transition. It has no payload.
-         *
-         * @since 9.1.0
-         */
-        this.shown = output();
-        /**
-         * An event emitted when the collapse element is hidden, after the transition. It has no payload.
-         *
-         * @since 9.1.0
-         */
-        this.hidden = output();
-        this.elementRef = inject(ElementRef);
-        this.sideNavCollapseService = inject(DfSideNavCollapseService);
-        this.zone = inject(NgZone);
-        this.injector = inject(Injector);
-        this.animation = false;
-        effect(() => {
-            this.collapsed.set(this.dfSideNavCollapse());
-        });
-        this.sideNavCollapseService.sideNavAnimation$.pipe(takeUntilDestroyed()).subscribe((value) => {
-            this.animation = value;
-        });
-    }
-    ngOnInit() {
-        let firstRun = true;
-        effect(() => {
-            const collapsed = this.collapsed();
-            // we only track the collapsed signal
-            untracked(() => {
-                // first time the effect is run, we run the transition without triggering event emitters
-                if (firstRun) {
-                    this.runTransition(collapsed, this.animation, this.minimized());
-                }
-                else {
-                    this.runTransitionWithEvents(collapsed, this.animation, this.minimized());
-                }
-                firstRun = false;
-            });
-        }, { injector: this.injector });
-    }
-    /**
-     * Triggers collapsing programmatically.
-     *
-     * If there is a collapsing transition running already, it will be reversed.
-     * If the animations are turned off this happens synchronously.
-     *
-     * @since 9.1.0
-     */
-    toggle(open = this.collapsed()) {
-        this.collapsed.set(!open);
-    }
-    runTransition(collapsed, animation, minimizedInput) {
-        return ngbRunTransition(this.zone, this.elementRef.nativeElement, DfCollapsingTransition, {
-            animation,
-            runningTransition: 'stop',
-            context: { direction: collapsed ? 'hide' : 'show', minimized: minimizedInput }
-        });
-    }
-    runTransitionWithEvents(collapsed, animation, minimized) {
-        this.runTransition(collapsed, animation, minimized).subscribe(() => {
-            if (collapsed) {
-                this.hidden.emit();
-            }
-            else {
-                this.shown.emit();
-            }
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSideNavCollapseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.3", type: DfSideNavCollapseDirective, isStandalone: true, selector: "[dfSideNavCollapse]", inputs: { dfSideNavCollapse: { classPropertyName: "dfSideNavCollapse", publicName: "dfSideNavCollapse", isSignal: true, isRequired: true, transformFunction: null }, minimized: { classPropertyName: "minimized", publicName: "minimized", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dfSideNavCollapseChange: "dfSideNavCollapseChange", shown: "shown", hidden: "hidden" }, exportAs: ["dfSideNavCollapse"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSideNavCollapseDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[dfSideNavCollapse]', exportAs: 'dfSideNavCollapse' }]
-        }], ctorParameters: () => [] });
-
-class DfSideNavCollapseModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSideNavCollapseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: DfSideNavCollapseModule, imports: [DfSideNavCollapseDirective], exports: [DfSideNavCollapseDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSideNavCollapseModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSideNavCollapseModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [DfSideNavCollapseDirective],
-                    exports: [DfSideNavCollapseDirective]
-                }]
-        }] });
-
-class DfManageSideNavDirective {
-    constructor() {
-        this.element = inject(ElementRef);
-        this.renderer = inject(Renderer2);
-    }
-    ngAfterViewChecked() {
-        if (this.element.nativeElement.querySelector('.active')) {
-            this.renderer.addClass(this.element.nativeElement, 'df-sidenav-list-withactivated');
-        }
-        else {
-            this.renderer.removeClass(this.element.nativeElement, 'df-sidenav-list-withactivated');
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfManageSideNavDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: DfManageSideNavDirective, isStandalone: true, selector: "[dfManageSideNav]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfManageSideNavDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[dfManageSideNav]'
-                }]
-        }] });
-
-class DfOverflowService {
-    /**
-     * @param element the HTML element
-     * @returns whether the element is overflowing
-     */
-    hasOverflow(element) {
-        return this.hasOverflowX(element) || this.hasOverflowY(element);
-    }
-    /**
-     * @param element the HTML element
-     * @returns whether the element is overflowing horizontally
-     */
-    hasOverflowX(element) {
-        return element.offsetWidth < element.scrollWidth;
-    }
-    /**
-     * @param element the HTML element
-     * @returns whether the element is overflowing vertically
-     */
-    hasOverflowY(element) {
-        return element.offsetHeight < element.scrollHeight;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfOverflowService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfOverflowService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfOverflowService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-/**
- * DfTitleTruncate directive
- * It adds the title attribute with the element's textContent as value
- * when the element is truncated.
- */
-class DfTitleTruncateDirective {
-    constructor() {
-        this.elementRef = inject((ElementRef));
-        this.renderer = inject(Renderer2);
-        this.overflowService = inject(DfOverflowService);
-    }
-    ngOnInit() {
-        this.renderer.addClass(this.elementRef.nativeElement, 'text-truncate');
-    }
-    ngDoCheck() {
-        const { nativeElement } = this.elementRef;
-        const titleAttributeName = 'title';
-        if (this.overflowService.hasOverflow(nativeElement)) {
-            nativeElement.setAttribute(titleAttributeName, nativeElement.textContent);
-        }
-        else if (nativeElement.getAttribute(titleAttributeName)) {
-            nativeElement.removeAttribute(titleAttributeName);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfTitleTruncateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: DfTitleTruncateDirective, isStandalone: true, selector: "[dfTitleTruncate]", exportAs: ["dfTitleTruncate"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfTitleTruncateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    exportAs: 'dfTitleTruncate',
-                    selector: '[dfTitleTruncate]'
-                }]
-        }] });
-
-let uniqueId = 0;
-/**
- * SideNav is a component to provide navigation feature with a panel on the side of your page
- *
- * It supports several options as:
- *  - Being in an overlay menu or not
- *  - Being collapsed or not
- *  - Can be used with or without Angular Router
- *  - Can be used with media queries to adjust behavior to different breakpoints (see media section)
- */
-// TODO cannot set to OnPush without a refactor of DfSideNavService
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-class DfSideNavListComponent {
-    constructor() {
-        this.items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
-        this.tplIcon = input(...(ngDevMode ? [undefined, { debugName: "tplIcon" }] : []));
-        this.tplItem = input(...(ngDevMode ? [undefined, { debugName: "tplItem" }] : []));
-        this.currentItem = input(...(ngDevMode ? [undefined, { debugName: "currentItem" }] : []));
-        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
-        this.controlledUniqueId = this.getControlledUniqueId();
-        this.sideNavService = inject(DfSideNavService);
-    }
-    getControlledUniqueId() {
-        uniqueId++;
-        return `df-sidenav-id-${uniqueId};`;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSideNavListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DfSideNavListComponent, isStandalone: true, selector: "df-sidenavlist", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, tplIcon: { classPropertyName: "tplIcon", publicName: "tplIcon", isSignal: true, isRequired: false, transformFunction: null }, tplItem: { classPropertyName: "tplItem", publicName: "tplItem", isSignal: true, isRequired: false, transformFunction: null }, currentItem: { classPropertyName: "currentItem", publicName: "currentItem", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ul class=\"df-sidenav-list\" [ngbCollapse]=\"currentItem()?.isCollapsed ?? false\" [attr.id]=\"id()\">\n  @for (item of items(); track item; let i = $index) {\n    <li [class]=\"item.class\" dfManageSideNav>\n      <ng-template #dfSideNavItemContent>\n        @let tIcon = tplIcon();\n        @if (tIcon && item.icon) {\n          <ng-template\n            [ngTemplateOutlet]=\"tIcon.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          ></ng-template>\n        } @else if (item.icon) {\n          <span aria-hidden=\"true\" class=\"{{ item.icon }} df-sidenav-icon me-3\"></span>\n        }\n        <span class=\"flex-grow-1 text-nowrap\" dfTitleTruncate>{{ item.title }}</span>\n      </ng-template>\n      @switch (item.type) {\n        @case (sideNavService.type.subMenus) {\n          <ng-template #subMenus>\n            <button\n              class=\"df-sidenav-item d-flex align-items-center\"\n              (click)=\"sideNavService.toggle(item)\"\n              type=\"button\"\n              [attr.aria-expanded]=\"!item.isCollapsed\"\n              [attr.aria-controls]=\"'sidenavControl' + controlledUniqueId.toString() + '-' + i\"\n              [class.df-sidenav-item-withicon]=\"item.icon\"\n            >\n              @let tIcon = tplIcon();\n              @if (tIcon && item.icon) {\n                <ng-template\n                  [ngTemplateOutlet]=\"tIcon.templateRef\"\n                  [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                ></ng-template>\n              } @else if (item.icon) {\n                <span aria-hidden=\"true\" class=\"{{ item.icon }} df-sidenav-icon me-3\"></span>\n              }\n              <span class=\"flex-grow-1 text-nowrap\" dfTitleTruncate>{{ item.title }}</span>\n              <span\n                class=\"ms-3 df-sidenav-collapse-icon fa-light\"\n                [class.fa-chevron-down]=\"item.isCollapsed\"\n                [class.fa-chevron-up]=\"!item.isCollapsed\"\n              ></span>\n              <!-- put the chevron as icon directly in the menu -->\n              <!-- todo the icon and the minimized -->\n            </button>\n            <!-- we don't pass the icons as they are not suppose to have ones ??-->\n            <df-sidenavlist\n              [items]=\"item.subMenus ?? []\"\n              [tplItem]=\"tplItem()\"\n              [currentItem]=\"item\"\n              [id]=\"'sidenavControl' + controlledUniqueId.toString() + '-' + i\"\n            ></df-sidenavlist>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"subMenus\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"subMenus\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.actionButton) {\n          <ng-template #dfSideNavItemButton>\n            <button\n              class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n              (click)=\"sideNavService.activeItem(item)\"\n              [class.active]=\"item.isActive\"\n            >\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n            </button>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfSideNavItemButton\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemButton\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.routerLink) {\n          <ng-template #dfRouterTemplate>\n            <a\n              class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n              routerLinkActive=\"active\"\n              routerLink=\"{{ item.value }}\"\n              ariaCurrentWhenActive=\"page\"\n            >\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n            </a>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfRouterTemplate\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfRouterTemplate\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.separator) {\n          <ng-template #dfSeparatorTmp>\n            <hr class=\"spacing-01\" />\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfSeparatorTmp\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfSeparatorTmp\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.template) {\n          @let tItem = tplItem();\n          @if (tItem) {\n            <ng-template\n              [ngTemplateOutlet]=\"tItem.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            ></ng-template>\n          }\n        }\n        @case (sideNavService.type.title) {\n          <ng-template #dfTitleTmp>\n            <div class=\"df-sidenav-item df-sidenav-title d-flex align-items-center flex-grow-1\">\n              <span class=\"text-nowrap text-uppercase text-muted\" dfTitleTruncate>{{ item.title }}</span>\n            </div>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfTitleTmp\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfTitleTmp\"></ng-container>\n            </ng-container>\n          }\n        }\n        @default {\n          <ng-template #dfLinkDefaultTmp>\n            <a\n              class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n              href=\"{{ item.value }}\"\n              [class.active]=\"item.isActive && item.type === sideNavService.type.link\"\n              [attr.target]=\"item.type === sideNavService.type.externalLink ? '_blank' : ''\"\n            >\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n            </a>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfLinkDefaultTmp\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfLinkDefaultTmp\"></ng-container>\n            </ng-container>\n          }\n        }\n      }\n    </li>\n  }\n</ul>\n", dependencies: [{ kind: "component", type: DfSideNavListComponent, selector: "df-sidenavlist", inputs: ["items", "tplIcon", "tplItem", "currentItem", "id"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NgbCollapseModule }, { kind: "directive", type: i1$1.NgbCollapse, selector: "[ngbCollapse]", inputs: ["animation", "ngbCollapse", "horizontal"], outputs: ["ngbCollapseChange", "shown", "hidden"], exportAs: ["ngbCollapse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: DfMediaModule }, { kind: "directive", type: DfIfMediaDirective, selector: "[dfIfMedia]", inputs: ["dfIfMedia"] }, { kind: "ngmodule", type: DfSideNavCollapseModule }, { kind: "directive", type: DfManageSideNavDirective, selector: "[dfManageSideNav]" }, { kind: "directive", type: DfTitleTruncateDirective, selector: "[dfTitleTruncate]", exportAs: ["dfTitleTruncate"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSideNavListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DfSideNavListComponent, isStandalone: true, selector: "df-sidenavlist", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, tplIcon: { classPropertyName: "tplIcon", publicName: "tplIcon", isSignal: true, isRequired: false, transformFunction: null }, tplItem: { classPropertyName: "tplItem", publicName: "tplItem", isSignal: true, isRequired: false, transformFunction: null }, currentItem: { classPropertyName: "currentItem", publicName: "currentItem", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ul class=\"df-sidenav-list\" [ngbCollapse]=\"currentItem()?.isCollapsed ?? false\" [attr.id]=\"id()\">\n  @for (item of items(); track item; let i = $index) {\n    <li [class]=\"item.class\" dfManageSideNav>\n      <ng-template #dfSideNavItemContent>\n        @let tIcon = tplIcon();\n        @if (tIcon && item.icon) {\n          <ng-template\n            [ngTemplateOutlet]=\"tIcon.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          ></ng-template>\n        } @else if (item.icon) {\n          <span aria-hidden=\"true\" class=\"{{ item.icon }} df-sidenav-icon me-3\"></span>\n        }\n        <span class=\"flex-grow-1 text-nowrap 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              @let tIcon = tplIcon();\n              @if (tIcon && item.icon) {\n                <ng-template\n                  [ngTemplateOutlet]=\"tIcon.templateRef\"\n                  [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                ></ng-template>\n              } @else if (item.icon) {\n                <span aria-hidden=\"true\" class=\"{{ item.icon }} df-sidenav-icon me-3\"></span>\n              }\n              <span class=\"flex-grow-1 text-nowrap text-truncate\">{{ item.title }}</span>\n              <span\n                class=\"ms-3 df-sidenav-collapse-icon fa-light\"\n                [class.fa-chevron-down]=\"item.isCollapsed\"\n                [class.fa-chevron-up]=\"!item.isCollapsed\"\n              ></span>\n              <!-- put the chevron as icon directly in the menu -->\n              <!-- todo the icon and the minimized -->\n            </button>\n            <!-- we don't pass the icons as they are not suppose to have ones ??-->\n            <df-sidenavlist\n              [items]=\"item.subMenus ?? []\"\n              [tplItem]=\"tplItem()\"\n              [currentItem]=\"item\"\n              [id]=\"'sidenavControl' + controlledUniqueId.toString() + '-' + i\"\n            ></df-sidenavlist>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"subMenus\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"subMenus\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.actionButton) {\n          <ng-template #dfSideNavItemButton>\n            <button\n              class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n              (click)=\"sideNavService.activeItem(item)\"\n              [class.active]=\"item.isActive\"\n            >\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n            </button>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfSideNavItemButton\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemButton\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.routerLink) {\n          <ng-template #dfRouterTemplate>\n            <a\n              class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n              routerLinkActive=\"active\"\n              routerLink=\"{{ item.value }}\"\n              ariaCurrentWhenActive=\"page\"\n            >\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n            </a>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfRouterTemplate\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfRouterTemplate\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.separator) {\n          <ng-template #dfSeparatorTmp>\n            <hr class=\"spacing-01\" />\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfSeparatorTmp\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfSeparatorTmp\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.template) {\n          @let tItem = tplItem();\n          @if (tItem) {\n            <ng-template\n              [ngTemplateOutlet]=\"tItem.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            ></ng-template>\n          }\n        }\n        @case (sideNavService.type.title) {\n          <ng-template #dfTitleTmp>\n            <div class=\"df-sidenav-item df-sidenav-title d-flex align-items-center flex-grow-1\">\n              <span class=\"text-nowrap text-uppercase text-muted text-truncate\">{{ item.title }}</span>\n            </div>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfTitleTmp\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfTitleTmp\"></ng-container>\n            </ng-container>\n          }\n        }\n        @default {\n          <ng-template #dfLinkDefaultTmp>\n            <a\n              class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n              href=\"{{ item.value }}\"\n              [class.active]=\"item.isActive && item.type === sideNavService.type.link\"\n              [attr.target]=\"item.type === sideNavService.type.externalLink ? '_blank' : ''\"\n            >\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n            </a>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfLinkDefaultTmp\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfLinkDefaultTmp\"></ng-container>\n            </ng-container>\n          }\n        }\n      }\n    </li>\n  }\n</ul>\n", dependencies: [{ kind: "component", type: DfSideNavListComponent, selector: "df-sidenavlist", inputs: ["items", "tplIcon", "tplItem", "currentItem", "id"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgbCollapse, selector: "[ngbCollapse]", inputs: ["animation", "ngbCollapse", "horizontal"], outputs: ["ngbCollapseChange", "shown", "hidden"], exportAs: ["ngbCollapse"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: DfIfMediaDirective, selector: "[dfIfMedia]", inputs: ["dfIfMedia"] }, { kind: "directive", type: DfManageSideNavDirective, selector: "[dfManageSideNav]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSideNavListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSideNavListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'df-sidenavlist', imports: [
-                        NgTemplateOutlet,
-                        NgbCollapseModule,
-                        RouterModule,
-                        DfMediaModule,
-                        DfSideNavCollapseModule,
-                        DfManageSideNavDirective,
-                        DfTitleTruncateDirective
-                    ], template: "<ul class=\"df-sidenav-list\" [ngbCollapse]=\"currentItem()?.isCollapsed ?? false\" [attr.id]=\"id()\">\n  @for (item of items(); track item; let i = $index) {\n    <li [class]=\"item.class\" dfManageSideNav>\n      <ng-template #dfSideNavItemContent>\n        @let tIcon = tplIcon();\n        @if (tIcon && item.icon) {\n          <ng-template\n            [ngTemplateOutlet]=\"tIcon.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          ></ng-template>\n        } @else if (item.icon) {\n          <span aria-hidden=\"true\" class=\"{{ item.icon }} df-sidenav-icon me-3\"></span>\n        }\n        <span class=\"flex-grow-1 text-nowrap\" dfTitleTruncate>{{ item.title }}</span>\n      </ng-template>\n      @switch (item.type) {\n        @case (sideNavService.type.subMenus) {\n          <ng-template #subMenus>\n            <button\n              class=\"df-sidenav-item d-flex align-items-center\"\n              (click)=\"sideNavService.toggle(item)\"\n              type=\"button\"\n              [attr.aria-expanded]=\"!item.isCollapsed\"\n              [attr.aria-controls]=\"'sidenavControl' + controlledUniqueId.toString() + '-' + i\"\n              [class.df-sidenav-item-withicon]=\"item.icon\"\n            >\n              @let tIcon = tplIcon();\n              @if (tIcon && item.icon) {\n                <ng-template\n                  [ngTemplateOutlet]=\"tIcon.templateRef\"\n                  [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                ></ng-template>\n              } @else if (item.icon) {\n                <span aria-hidden=\"true\" class=\"{{ item.icon }} df-sidenav-icon me-3\"></span>\n              }\n              <span class=\"flex-grow-1 text-nowrap\" dfTitleTruncate>{{ item.title }}</span>\n              <span\n                class=\"ms-3 df-sidenav-collapse-icon fa-light\"\n                [class.fa-chevron-down]=\"item.isCollapsed\"\n                [class.fa-chevron-up]=\"!item.isCollapsed\"\n              ></span>\n              <!-- put the chevron as icon directly in the menu -->\n              <!-- todo the icon and the minimized -->\n            </button>\n            <!-- we don't pass the icons as they are not suppose to have ones ??-->\n            <df-sidenavlist\n              [items]=\"item.subMenus ?? []\"\n              [tplItem]=\"tplItem()\"\n              [currentItem]=\"item\"\n              [id]=\"'sidenavControl' + controlledUniqueId.toString() + '-' + i\"\n            ></df-sidenavlist>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"subMenus\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"subMenus\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.actionButton) {\n          <ng-template #dfSideNavItemButton>\n            <button\n              class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n              (click)=\"sideNavService.activeItem(item)\"\n              [class.active]=\"item.isActive\"\n            >\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n            </button>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfSideNavItemButton\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemButton\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.routerLink) {\n          <ng-template #dfRouterTemplate>\n            <a\n              class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n              routerLinkActive=\"active\"\n              routerLink=\"{{ item.value }}\"\n              ariaCurrentWhenActive=\"page\"\n            >\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n            </a>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfRouterTemplate\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfRouterTemplate\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.separator) {\n          <ng-template #dfSeparatorTmp>\n            <hr class=\"spacing-01\" />\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfSeparatorTmp\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfSeparatorTmp\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.template) {\n          @let tItem = tplItem();\n          @if (tItem) {\n            <ng-template\n              [ngTemplateOutlet]=\"tItem.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            ></ng-template>\n          }\n        }\n        @case (sideNavService.type.title) {\n          <ng-template #dfTitleTmp>\n            <div class=\"df-sidenav-item df-sidenav-title d-flex align-items-center flex-grow-1\">\n              <span class=\"text-nowrap text-uppercase text-muted\" dfTitleTruncate>{{ item.title }}</span>\n            </div>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfTitleTmp\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfTitleTmp\"></ng-container>\n            </ng-container>\n          }\n        }\n        @default {\n          <ng-template #dfLinkDefaultTmp>\n            <a\n              class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n              href=\"{{ item.value }}\"\n              [class.active]=\"item.isActive && item.type === sideNavService.type.link\"\n              [attr.target]=\"item.type === sideNavService.type.externalLink ? '_blank' : ''\"\n            >\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n            </a>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfLinkDefaultTmp\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfLinkDefaultTmp\"></ng-container>\n            </ng-container>\n          }\n        }\n      }\n    </li>\n  }\n</ul>\n" }]
-        }] });
+            args: [{ selector: 'df-sidenavlist', imports: [NgTemplateOutlet, NgbCollapse, RouterLink, RouterLinkActive, DfIfMediaDirective, 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 [class]=\"item.class\" dfManageSideNav>\n      <ng-template #dfSideNavItemContent>\n        @let tIcon = tplIcon();\n        @if (tIcon && item.icon) {\n          <ng-template\n            [ngTemplateOutlet]=\"tIcon.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          ></ng-template>\n        } @else if (item.icon) {\n          <span aria-hidden=\"true\" class=\"{{ item.icon }} df-sidenav-icon me-3\"></span>\n        }\n        <span class=\"flex-grow-1 text-nowrap 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              @let tIcon = tplIcon();\n              @if (tIcon && item.icon) {\n                <ng-template\n                  [ngTemplateOutlet]=\"tIcon.templateRef\"\n                  [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                ></ng-template>\n              } @else if (item.icon) {\n                <span aria-hidden=\"true\" class=\"{{ item.icon }} df-sidenav-icon me-3\"></span>\n              }\n              <span class=\"flex-grow-1 text-nowrap text-truncate\">{{ item.title }}</span>\n              <span\n                class=\"ms-3 df-sidenav-collapse-icon fa-light\"\n                [class.fa-chevron-down]=\"item.isCollapsed\"\n                [class.fa-chevron-up]=\"!item.isCollapsed\"\n              ></span>\n              <!-- put the chevron as icon directly in the menu -->\n              <!-- todo the icon and the minimized -->\n            </button>\n            <!-- we don't pass the icons as they are not suppose to have ones ??-->\n            <df-sidenavlist\n              [items]=\"item.subMenus ?? []\"\n              [tplItem]=\"tplItem()\"\n              [currentItem]=\"item\"\n              [id]=\"'sidenavControl' + controlledUniqueId.toString() + '-' + i\"\n            ></df-sidenavlist>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"subMenus\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"subMenus\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.actionButton) {\n          <ng-template #dfSideNavItemButton>\n            <button\n              class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n              (click)=\"sideNavService.activeItem(item)\"\n              [class.active]=\"item.isActive\"\n            >\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n            </button>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfSideNavItemButton\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemButton\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.routerLink) {\n          <ng-template #dfRouterTemplate>\n            <a\n              class=\"df-sidenav-item d-flex align-items-center flex-nowrap\"\n              routerLinkActive=\"active\"\n              routerLink=\"{{ item.value }}\"\n              ariaCurrentWhenActive=\"page\"\n            >\n              <ng-container *ngTemplateOutlet=\"dfSideNavItemContent\"></ng-container>\n            </a>\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfRouterTemplate\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfRouterTemplate\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.separator) {\n          <ng-template #dfSeparatorTmp>\n            <hr class=\"spacing-01\" />\n          </ng-template>\n          @if (!item.breakpoints) {\n            <ng-container *ngTemplateOutlet=\"dfSeparatorTmp\"></ng-container>\n          } @else {\n            <ng-container *dfIfMedia=\"item.breakpoints!\">\n              <ng-container *ngTemplateOutlet=\"dfSeparatorTmp\"></ng-container>\n            </ng-container>\n          }\n        }\n        @case (sideNavService.type.template) {\n          @let tItem = tplItem();\n          @if (tItem) {\n            <ng-template\n              [ngTemplateOutlet]=\"tItem.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            ></ng-template>\n          }\n        }\n        @case (sideNavService.type.title) {\n          <ng-template #dfTitleTmp>\n            <div class=\"df-sidenav-item df-sidenav-title d-flex align-items-center flex-grow-1\">\n              <span class=\"text-nowrap text-uppercase text-muted text-truncate\">{{ 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: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], tplIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "tplIcon", required: false }] }], tplItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "tplItem", required: false }] }], currentItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentItem", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
 class DfSideNavHeaderDirective {
     constructor() {
         this.templateRef = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSideNavHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: DfSideNavHeaderDirective, isStandalone: true, selector: "ng-template[dfSideNavHeader]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSideNavHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: DfSideNavHeaderDirective, isStandalone: true, selector: "ng-template[dfSideNavHeader]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSideNavHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSideNavHeaderDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[dfSideNavHeader]' }]
         }] });
@@ -5002,10 +4410,10 @@ class DfSideNavIconDirective {
     constructor() {
         this.templateRef = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSideNavIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: DfSideNavIconDirective, isStandalone: true, selector: "ng-template[dfSideNavIcon]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSideNavIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: DfSideNavIconDirective, isStandalone: true, selector: "ng-template[dfSideNavIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSideNavIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSideNavIconDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[dfSideNavIcon]' }]
         }] });
@@ -5013,10 +4421,10 @@ class DfSideNavItemDirective {
     constructor() {
         this.templateRef = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSideNavItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: DfSideNavItemDirective, isStandalone: true, selector: "ng-template[dfSideNavItem]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSideNavItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: DfSideNavItemDirective, isStandalone: true, selector: "ng-template[dfSideNavItem]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSideNavItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSideNavItemDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[dfSideNavItem]' }]
         }] });
@@ -5049,15 +4457,15 @@ class DfSideNavComponent {
     ngOnDestroy() {
         this.sideNavService.removeSideBar();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSideNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DfSideNavComponent, isStandalone: true, selector: "df-sidenav", host: { properties: { "class": "classes()" } }, queries: [{ propertyName: "tplHeader", first: true, predicate: DfSideNavHeaderDirective, descendants: true, isSignal: true }, { propertyName: "tplIcon", first: true, predicate: DfSideNavIconDirective, descendants: true, isSignal: true }, { propertyName: "tplItem", first: true, predicate: DfSideNavItemDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"df-scroll-content\">\n  @if (tplHeader(); as tplHeader) {\n    <ng-template [ngTemplateOutlet]=\"tplHeader.templateRef\"></ng-template>\n  }\n  <df-sidenavlist [items]=\"navItems()\" [tplIcon]=\"tplIcon()\" [tplItem]=\"tplItem()\" />\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DfSideNavListComponent, selector: "df-sidenavlist", inputs: ["items", "tplIcon", "tplItem", "currentItem", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSideNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DfSideNavComponent, isStandalone: true, selector: "df-sidenav", host: { properties: { "class": "classes()" } }, queries: [{ propertyName: "tplHeader", first: true, predicate: DfSideNavHeaderDirective, descendants: true, isSignal: true }, { propertyName: "tplIcon", first: true, predicate: DfSideNavIconDirective, descendants: true, isSignal: true }, { propertyName: "tplItem", first: true, predicate: DfSideNavItemDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"df-scroll-content\">\n  @if (tplHeader(); as tplHeader) {\n    <ng-template [ngTemplateOutlet]=\"tplHeader.templateRef\"></ng-template>\n  }\n  <df-sidenavlist [items]=\"navItems()\" [tplIcon]=\"tplIcon()\" [tplItem]=\"tplItem()\" />\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DfSideNavListComponent, selector: "df-sidenavlist", inputs: ["items", "tplIcon", "tplItem", "currentItem", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSideNavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSideNavComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'df-sidenav', imports: [CommonModule, DfSideNavListComponent], host: {
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'df-sidenav', imports: [NgTemplateOutlet, DfSideNavListComponent], host: {
                         '[class]': 'classes()'
                     }, template: "<div class=\"df-scroll-content\">\n  @if (tplHeader(); as tplHeader) {\n    <ng-template [ngTemplateOutlet]=\"tplHeader.templateRef\"></ng-template>\n  }\n  <df-sidenavlist [items]=\"navItems()\" [tplIcon]=\"tplIcon()\" [tplItem]=\"tplItem()\" />\n</div>\n" }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { tplHeader: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfSideNavHeaderDirective), { isSignal: true }] }], tplIcon: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfSideNavIconDirective), { isSignal: true }] }], tplItem: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfSideNavItemDirective), { isSignal: true }] }] } });
 
 const DF_SELECT_CLASS = 'df-ym';
 
@@ -5141,10 +4549,10 @@ class DfManageNavSelectDirective {
             (listBadge[currentPos - 1] || document.activeElement).focus();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfManageNavSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", 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: "21.0.6", ngImport: i0, type: DfManageNavSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: DfManageNavSelectDirective, isStandalone: true, selector: "[dfManageNavSelect]", host: { listeners: { "keydown.arrowLeft": "handleKeyDown($event)", "keydown.Backspace": "handleKeyDownBackspace()", "keydown.arrowRight": "handleKeyDownRight($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfManageNavSelectDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfManageNavSelectDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfManageNavSelect]'
@@ -5154,7 +4562,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                 args: ['keydown.arrowLeft', ['$event']]
             }], handleKeyDownBackspace: [{
                 type: HostListener,
-                args: ['keydown.Backspace', ['$event']]
+                args: ['keydown.Backspace']
             }], handleKeyDownRight: [{
                 type: HostListener,
                 args: ['keydown.arrowRight', ['$event']]
@@ -5188,15 +4596,15 @@ class DfOptionHighlightDirective {
     setInnerHtml(html) {
         this.renderer.setProperty(this.elementRef.nativeElement, 'innerHTML', html);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfOptionHighlightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.3", type: DfOptionHighlightDirective, isStandalone: true, selector: "[dfOptionHighlight]", inputs: { dfOptionHighlight: { classPropertyName: "dfOptionHighlight", publicName: "dfOptionHighlight", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfOptionHighlightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: DfOptionHighlightDirective, isStandalone: true, selector: "[dfOptionHighlight]", inputs: { dfOptionHighlight: { classPropertyName: "dfOptionHighlight", publicName: "dfOptionHighlight", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfOptionHighlightDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfOptionHighlightDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfOptionHighlight]'
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { dfOptionHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "dfOptionHighlight", required: true }] }] } });
 
 // Put to avoid opening of the select after removal. See why in file:
 // https://github.com/ng-select/ng-select/blob/57c6671a972d23beddcca2b6acc9418544c17a2e/src/ng-select/ng-select.component.ts#L307
@@ -5232,10 +4640,10 @@ class DfManageBadgeEventsDirective {
         this.dfManageBadgeEventsSelect()[0](this.dfManageBadgeEventsSelect()[1]);
         event.stopPropagation();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfManageBadgeEventsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.3", type: DfManageBadgeEventsDirective, isStandalone: true, selector: "[dfManageBadgeEventsSelect]", inputs: { dfManageBadgeEventsSelect: { classPropertyName: "dfManageBadgeEventsSelect", publicName: "dfManageBadgeEventsSelect", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "tabindex": "-1" }, listeners: { "keydown.Backspace": "handleKeyDownBackspace($event)", "click": "handleClick($event)", "keydown.Enter": "handleKeyDownEnter($event)", "keydown.Delete": "handleKeyDownDelete($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfManageBadgeEventsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: DfManageBadgeEventsDirective, isStandalone: true, selector: "[dfManageBadgeEventsSelect]", inputs: { dfManageBadgeEventsSelect: { classPropertyName: "dfManageBadgeEventsSelect", publicName: "dfManageBadgeEventsSelect", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "tabindex": "-1" }, listeners: { "keydown.Backspace": "handleKeyDownBackspace($event)", "click": "handleClick($event)", "keydown.Enter": "handleKeyDownEnter($event)", "keydown.Delete": "handleKeyDownDelete($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfManageBadgeEventsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfManageBadgeEventsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfManageBadgeEventsSelect]',
@@ -5247,14 +4655,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                         '(keydown.Delete)': 'handleKeyDownDelete($event)'
                     }
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { dfManageBadgeEventsSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "dfManageBadgeEventsSelect", required: true }] }] } });
 
 class DfSelectModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: DfSelectModule, imports: [DfManageNavSelectDirective, DfManageBadgeEventsDirective, DfOptionHighlightDirective], exports: [DfManageNavSelectDirective, DfManageBadgeEventsDirective, DfOptionHighlightDirective, NgSelectModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSelectModule, imports: [NgSelectModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: DfSelectModule, imports: [DfManageNavSelectDirective, DfManageBadgeEventsDirective, DfOptionHighlightDirective], exports: [DfManageNavSelectDirective, DfManageBadgeEventsDirective, DfOptionHighlightDirective, NgSelectModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSelectModule, imports: [NgSelectModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfManageNavSelectDirective, DfManageBadgeEventsDirective, DfOptionHighlightDirective],
@@ -5473,10 +4881,10 @@ class DfStepperService {
         this._state = this.normalizeState(this._state);
         this.dispatchStepperState();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfStepperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfStepperService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfStepperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfStepperService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfStepperService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfStepperService, decorators: [{
             type: Injectable
         }] });
 
@@ -5508,10 +4916,10 @@ class DfStepperStepDirective {
     ngOnDestroy() {
         this.unlistener.forEach((ul) => ul());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfStepperStepDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: DfStepperStepDirective, isStandalone: true, selector: "[dfStepperStep]", exportAs: ["dfStepperStep"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfStepperStepDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: DfStepperStepDirective, isStandalone: true, selector: "[dfStepperStep]", exportAs: ["dfStepperStep"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfStepperStepDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfStepperStepDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfStepperStep]',
@@ -5619,10 +5027,10 @@ class DfStepperDirective {
             this.stepperService.resetFocus();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfStepperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: DfStepperDirective, isStandalone: true, selector: "[dfStepperLogic]", host: { listeners: { "keydown.Enter": "handleEnterDown()", "keydown.Space": "handleSpaceDown()", "keydown.arrowRight": "handleKeyDownRight($event)", "keydown.arrowLeft": "handleKeyDown($event)", "keydown.arrowDown": "handleKeyDownUp($event)", "keydown.arrowUp": "handleKeyDownDown($event)" } }, exportAs: ["dfStepperLogic"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfStepperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: DfStepperDirective, isStandalone: true, selector: "[dfStepperLogic]", host: { listeners: { "keydown.Enter": "handleEnterDown()", "keydown.Space": "handleSpaceDown()", "keydown.arrowRight": "handleKeyDownRight($event)", "keydown.arrowLeft": "handleKeyDown($event)", "keydown.arrowDown": "handleKeyDownUp($event)", "keydown.arrowUp": "handleKeyDownDown($event)" } }, exportAs: ["dfStepperLogic"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfStepperDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfStepperDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfStepperLogic]',
@@ -5655,15 +5063,15 @@ class DfStepperStepContentDirective {
          * The step index
          * -1 means that the input index is not set
          */
-        this.dfStepperStepContent = input(-1, ...(ngDevMode ? [{ debugName: "dfStepperStepContent", transform: (value) => numberAttribute(value, -1) }] : [{ transform: (value) => numberAttribute(value, -1) }]));
+        this.dfStepperStepContent = input(-1, { ...(ngDevMode ? { debugName: "dfStepperStepContent" } : {}), transform: (value) => numberAttribute(value, -1) });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfStepperStepContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.3", type: DfStepperStepContentDirective, isStandalone: true, selector: "ng-template[dfStepperStepContent]", inputs: { dfStepperStepContent: { classPropertyName: "dfStepperStepContent", publicName: "dfStepperStepContent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfStepperStepContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: DfStepperStepContentDirective, isStandalone: true, selector: "ng-template[dfStepperStepContent]", inputs: { dfStepperStepContent: { classPropertyName: "dfStepperStepContent", publicName: "dfStepperStepContent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfStepperStepContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfStepperStepContentDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[dfStepperStepContent]' }]
-        }] });
+        }], propDecorators: { dfStepperStepContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "dfStepperStepContent", required: false }] }] } });
 /**
  * Stepper component is a component to provide a step by step navigation
  * You have two ways to navigate through the steps:
@@ -5676,6 +5084,7 @@ class DfStepperComponent {
         this.mapStepToContent = new Map();
         this.tplStepsContent = contentChildren(DfStepperStepContentDirective, ...(ngDevMode ? [{ debugName: "tplStepsContent" }] : []));
         this.state = signal(undefined, ...(ngDevMode ? [{ debugName: "state" }] : []));
+        this.stepperLabelClasses = 'd-block fw-medium text-truncate';
         this.stepperService.stepperState$.pipe(takeUntilDestroyed()).subscribe((state) => {
             this.state.set(state);
         });
@@ -5687,26 +5096,27 @@ class DfStepperComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DfStepperComponent, isStandalone: true, selector: "[dfStepper]", host: { attributes: { "role": "tablist" }, properties: { "class.df-vertical-stepper": "state()?.isVertical", "attr.aria-label": "stepperService.stepperAriaLabel", "attr.aria-orientation": "state()?.isVertical ? \"vertical\": null" }, classAttribute: "df-stepper mb-2" }, queries: [{ propertyName: "tplStepsContent", predicate: DfStepperStepContentDirective, isSignal: true }], hostDirectives: [{ directive: DfStepperDirective }], ngImport: i0, template: "<ng-template #myStepperLine>\n  <div class=\"df-stepper-line-wrapper\">\n    <div class=\"df-stepper-line\">\n      <div class=\"df-stepper-horizontal-line\"></div>\n    </div>\n    <div class=\"df-stepper-line d-none d-sm-flex\">\n      <div class=\"flex-grow-1\"></div>\n    </div>\n  </div>\n</ng-template>\n@if (state(); as state) {\n  @for (step of state.steps; track step; let i = $index) {\n    <button\n      #stepbasic\n      class=\"btn btn-link df-stepper-step\"\n      dfStepperStep\n      [class.active]=\"i === state.active\"\n      [class.flex-row]=\"state.isInline || state.isVertical\"\n      [attr.tabIndex]=\"i === state.active ? 0 : -1\"\n      [class.df-stepper-step-warning]=\"step.type === 'warning'\"\n      [class.df-stepper-step-completed]=\"step.type === 'completed'\"\n      [class.df-stepper-step-visited]=\"step.type === 'visited'\"\n      [class.df-stepper-step-future]=\"step.type === 'future'\"\n      [disabled]=\"\n        state.isLinear &&\n        (step.type === 'future' || step.type === 'completed' || (step.type === 'visited' && i !== state.active))\n      \"\n      role=\"tab\"\n      [attr.aria-selected]=\"i === state.active ? 'true' : 'false'\"\n      [attr.aria-posinset]=\"i + 1\"\n      [attr.aria-setsize]=\"state.steps.length\"\n      [attr.aria-controls]=\"step.ariaControl\"\n      (click)=\"stepperService.selectWithFocus(i)\"\n    >\n      <div\n        [class.df-stepper-outline-number-visited]=\"step.type === 'visited'\"\n        [class.df-stepper-outline-icon]=\"step.type === 'warning'\"\n        [class.fa-exclamation-triangle]=\"step.type === 'warning'\"\n        [class.df-stepper-icon]=\"step.type === 'completed'\"\n        [class.fa-check]=\"step.type === 'completed'\"\n        [class.df-stepper-outline-number-future]=\"step.type === 'future'\"\n      >\n        <span aria-hidden=\"true\">{{ stepperService.getStepNumberLabel(i) }}</span>\n      </div>\n      <div\n        class=\"flex-column\"\n        [class.mt-1]=\"!state.isInline\"\n        [class.d-none]=\"!state.isVertical\"\n        [class.d-sm-flex]=\"!state.isVertical\"\n        [class.d-flex]=\"state.isVertical\"\n      >\n        @if (step.type === 'warning') {\n          <span class=\"visually-hidden\">{{ stepperService.warningLabel }}</span>\n        }\n        <span class=\"df-stepper-label\">{{ step.label }}</span>\n        @if (step.optionalLabel) {\n          <span class=\"df-stepper-optional-label\">{{ step.optionalLabel }}</span>\n        }\n        @if (step.completed) {\n          <span class=\"visually-hidden\">{{ stepperService.completedLabel }}</span>\n        }\n      </div>\n    </button>\n    @if (!state.isVertical && i < state.steps.length - 1) {\n      <ng-container [ngTemplateOutlet]=\"myStepperLine\"></ng-container>\n    }\n    @if (state.isVertical && i < state.steps.length) {\n      <div\n        [class.d-none]=\"state.steps.length - 1 === i\"\n        role=\"tabpanel\"\n        [id]=\"step.ariaControl\"\n        class=\"df-vertical-stepper-panel df-vertical-stepper-line\"\n      >\n        @if (mapStepToContent.has(i) && state.active === i) {\n          <ng-template\n            [ngTemplateOutlet]=\"mapStepToContent.get(i) || null\"\n            [ngTemplateOutletContext]=\"{ state, index: i, service: stepperService }\"\n          ></ng-template>\n        }\n      </div>\n    }\n  }\n}\n@if (stepperService.stepperState$ | async; as state) {\n  <div\n    class=\"text-primary mb-2\"\n    [class.d-block]=\"!state.isVertical\"\n    [class.d-sm-none]=\"!state.isVertical\"\n    [class.d-none]=\"state.isVertical\"\n  >\n    <span class=\"df-stepper-label\">{{ state.steps[state.active].label }}</span>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: DfStepperStepDirective, selector: "[dfStepperStep]", exportAs: ["dfStepperStep"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DfStepperComponent, isStandalone: true, selector: "[dfStepper]", host: { attributes: { "role": "tablist" }, properties: { "class.align-items-start": "state()?.isVertical", "class.flex-column": "state()?.isVertical", "attr.aria-label": "stepperService.stepperAriaLabel", "attr.aria-orientation": "state()?.isVertical ? \"vertical\": null" }, classAttribute: "df-stepper mb-2 d-flex" }, queries: [{ propertyName: "tplStepsContent", predicate: DfStepperStepContentDirective, isSignal: true }], hostDirectives: [{ directive: DfStepperDirective }], ngImport: i0, template: "<ng-template #myStepperLine let-inline>\n  <div class=\"df-stepper-line-wrapper d-flex flex-column flex-grow-1\">\n    <div class=\"df-stepper-line d-flex flex-grow-1 align-items-center\">\n      <div class=\"df-stepper-horizontal-line flex-grow-1 border-top mt-1\"></div>\n    </div>\n    @if (!inline) {\n      <div class=\"df-stepper-line d-none d-sm-flex flex-grow-1\">\n        <div class=\"flex-grow-1\"></div>\n      </div>\n    }\n  </div>\n</ng-template>\n@if (state(); as state) {\n  @for (step of state.steps; track step; let i = $index) {\n    <button\n      #stepbasic\n      class=\"btn df-stepper-step d-flex align-items-center h-auto\"\n      dfStepperStep\n      [class]=\"{\n        active: i === state.active,\n        'flex-column': !state.isInline && !state.isVertical,\n        'df-stepper-step-warning': step.type === 'warning',\n        'df-stepper-step-completed': step.type === 'completed',\n        'df-stepper-step-visited': step.type === 'visited',\n        'df-stepper-step-future': step.type === 'future'\n      }\"\n      [attr.tabIndex]=\"i === state.active ? 0 : -1\"\n      [disabled]=\"\n        state.isLinear &&\n        (step.type === 'future' || step.type === 'completed' || (step.type === 'visited' && i !== state.active))\n      \"\n      role=\"tab\"\n      [attr.aria-selected]=\"i === state.active ? 'true' : 'false'\"\n      [attr.aria-posinset]=\"i + 1\"\n      [attr.aria-setsize]=\"state.steps.length\"\n      [attr.aria-controls]=\"step.ariaControl\"\n      (click)=\"stepperService.selectWithFocus(i)\"\n    >\n      <div\n        [class]=\"{\n          'df-stepper-step-circle': true,\n          'df-stepper-icon': step.type === 'completed',\n          'fa-check': step.type === 'completed',\n          'df-stepper-outline-number-future': step.type === 'future',\n          'df-stepper-outline-number-visited': step.type === 'visited',\n          'df-stepper-outline-number': step.type === 'future' || step.type === 'visited',\n          'fw-medium': step.type === 'visited',\n          'df-stepper-outline-icon': step.type === 'warning',\n          'fa-exclamation-triangle': step.type === 'warning',\n          'd-flex': step.type !== 'warning' && step.type !== 'completed',\n          'justify-content-center': step.type !== 'warning' && step.type !== 'completed',\n          'align-items-center': step.type !== 'warning' && step.type !== 'completed'\n        }\"\n      >\n        @if (step.type !== 'warning' && step.type !== 'completed') {\n          <span aria-hidden=\"true\">{{ stepperService.getStepNumberLabel(i) }}</span>\n        }\n      </div>\n      <div\n        class=\"flex-column\"\n        [class.mt-1]=\"!state.isInline\"\n        [class.d-none]=\"!state.isVertical\"\n        [class.d-sm-flex]=\"!state.isVertical\"\n        [class.d-flex]=\"state.isVertical\"\n      >\n        @if (step.type === 'warning') {\n          <span class=\"visually-hidden\">{{ stepperService.warningLabel }}</span>\n        }\n        <span\n          class=\"df-stepper-label\"\n          [class]=\"stepperLabelClasses\"\n          [class.ms-4]=\"state.isInline || state.isVertical\"\n          >{{ step.label }}</span\n        >\n        @if (step.optionalLabel) {\n          <span\n            class=\"df-stepper-optional-label text-body fw-normal text-start fs-xs\"\n            [class.ms-4]=\"state.isInline || state.isVertical\"\n            >{{ step.optionalLabel }}</span\n          >\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\n        [ngTemplateOutlet]=\"myStepperLine\"\n        [ngTemplateOutletContext]=\"{ $implicit: state.isInline }\"\n      ></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 my-5 ps-5 position-relative\"\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\" [class]=\"stepperLabelClasses\">{{ state.steps[state.active].label }}</span>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: DfStepperStepDirective, selector: "[dfStepperStep]", exportAs: ["dfStepperStep"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfStepperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfStepperComponent, decorators: [{
             type: Component,
             args: [{ selector: '[dfStepper]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [DfStepperStepDirective, NgTemplateOutlet, AsyncPipe], hostDirectives: [DfStepperDirective], host: {
                         role: 'tablist',
-                        class: 'df-stepper mb-2',
-                        '[class.df-vertical-stepper]': 'state()?.isVertical',
+                        class: 'df-stepper mb-2 d-flex',
+                        '[class.align-items-start]': 'state()?.isVertical',
+                        '[class.flex-column]': 'state()?.isVertical',
                         '[attr.aria-label]': 'stepperService.stepperAriaLabel',
                         '[attr.aria-orientation]': 'state()?.isVertical ? "vertical": null'
-                    }, template: "<ng-template #myStepperLine>\n  <div class=\"df-stepper-line-wrapper\">\n    <div class=\"df-stepper-line\">\n      <div class=\"df-stepper-horizontal-line\"></div>\n    </div>\n    <div class=\"df-stepper-line d-none d-sm-flex\">\n      <div class=\"flex-grow-1\"></div>\n    </div>\n  </div>\n</ng-template>\n@if (state(); as state) {\n  @for (step of state.steps; track step; let i = $index) {\n    <button\n      #stepbasic\n      class=\"btn btn-link df-stepper-step\"\n      dfStepperStep\n      [class.active]=\"i === state.active\"\n      [class.flex-row]=\"state.isInline || state.isVertical\"\n      [attr.tabIndex]=\"i === state.active ? 0 : -1\"\n      [class.df-stepper-step-warning]=\"step.type === 'warning'\"\n      [class.df-stepper-step-completed]=\"step.type === 'completed'\"\n      [class.df-stepper-step-visited]=\"step.type === 'visited'\"\n      [class.df-stepper-step-future]=\"step.type === 'future'\"\n      [disabled]=\"\n        state.isLinear &&\n        (step.type === 'future' || step.type === 'completed' || (step.type === 'visited' && i !== state.active))\n      \"\n      role=\"tab\"\n      [attr.aria-selected]=\"i === state.active ? 'true' : 'false'\"\n      [attr.aria-posinset]=\"i + 1\"\n      [attr.aria-setsize]=\"state.steps.length\"\n      [attr.aria-controls]=\"step.ariaControl\"\n      (click)=\"stepperService.selectWithFocus(i)\"\n    >\n      <div\n        [class.df-stepper-outline-number-visited]=\"step.type === 'visited'\"\n        [class.df-stepper-outline-icon]=\"step.type === 'warning'\"\n        [class.fa-exclamation-triangle]=\"step.type === 'warning'\"\n        [class.df-stepper-icon]=\"step.type === 'completed'\"\n        [class.fa-check]=\"step.type === 'completed'\"\n        [class.df-stepper-outline-number-future]=\"step.type === 'future'\"\n      >\n        <span aria-hidden=\"true\">{{ stepperService.getStepNumberLabel(i) }}</span>\n      </div>\n      <div\n        class=\"flex-column\"\n        [class.mt-1]=\"!state.isInline\"\n        [class.d-none]=\"!state.isVertical\"\n        [class.d-sm-flex]=\"!state.isVertical\"\n        [class.d-flex]=\"state.isVertical\"\n      >\n        @if (step.type === 'warning') {\n          <span class=\"visually-hidden\">{{ stepperService.warningLabel }}</span>\n        }\n        <span class=\"df-stepper-label\">{{ step.label }}</span>\n        @if (step.optionalLabel) {\n          <span class=\"df-stepper-optional-label\">{{ step.optionalLabel }}</span>\n        }\n        @if (step.completed) {\n          <span class=\"visually-hidden\">{{ stepperService.completedLabel }}</span>\n        }\n      </div>\n    </button>\n    @if (!state.isVertical && i < state.steps.length - 1) {\n      <ng-container [ngTemplateOutlet]=\"myStepperLine\"></ng-container>\n    }\n    @if (state.isVertical && i < state.steps.length) {\n      <div\n        [class.d-none]=\"state.steps.length - 1 === i\"\n        role=\"tabpanel\"\n        [id]=\"step.ariaControl\"\n        class=\"df-vertical-stepper-panel df-vertical-stepper-line\"\n      >\n        @if (mapStepToContent.has(i) && state.active === i) {\n          <ng-template\n            [ngTemplateOutlet]=\"mapStepToContent.get(i) || null\"\n            [ngTemplateOutletContext]=\"{ state, index: i, service: stepperService }\"\n          ></ng-template>\n        }\n      </div>\n    }\n  }\n}\n@if (stepperService.stepperState$ | async; as state) {\n  <div\n    class=\"text-primary mb-2\"\n    [class.d-block]=\"!state.isVertical\"\n    [class.d-sm-none]=\"!state.isVertical\"\n    [class.d-none]=\"state.isVertical\"\n  >\n    <span class=\"df-stepper-label\">{{ state.steps[state.active].label }}</span>\n  </div>\n}\n" }]
-        }], ctorParameters: () => [] });
+                    }, template: "<ng-template #myStepperLine let-inline>\n  <div class=\"df-stepper-line-wrapper d-flex flex-column flex-grow-1\">\n    <div class=\"df-stepper-line d-flex flex-grow-1 align-items-center\">\n      <div class=\"df-stepper-horizontal-line flex-grow-1 border-top mt-1\"></div>\n    </div>\n    @if (!inline) {\n      <div class=\"df-stepper-line d-none d-sm-flex flex-grow-1\">\n        <div class=\"flex-grow-1\"></div>\n      </div>\n    }\n  </div>\n</ng-template>\n@if (state(); as state) {\n  @for (step of state.steps; track step; let i = $index) {\n    <button\n      #stepbasic\n      class=\"btn df-stepper-step d-flex align-items-center h-auto\"\n      dfStepperStep\n      [class]=\"{\n        active: i === state.active,\n        'flex-column': !state.isInline && !state.isVertical,\n        'df-stepper-step-warning': step.type === 'warning',\n        'df-stepper-step-completed': step.type === 'completed',\n        'df-stepper-step-visited': step.type === 'visited',\n        'df-stepper-step-future': step.type === 'future'\n      }\"\n      [attr.tabIndex]=\"i === state.active ? 0 : -1\"\n      [disabled]=\"\n        state.isLinear &&\n        (step.type === 'future' || step.type === 'completed' || (step.type === 'visited' && i !== state.active))\n      \"\n      role=\"tab\"\n      [attr.aria-selected]=\"i === state.active ? 'true' : 'false'\"\n      [attr.aria-posinset]=\"i + 1\"\n      [attr.aria-setsize]=\"state.steps.length\"\n      [attr.aria-controls]=\"step.ariaControl\"\n      (click)=\"stepperService.selectWithFocus(i)\"\n    >\n      <div\n        [class]=\"{\n          'df-stepper-step-circle': true,\n          'df-stepper-icon': step.type === 'completed',\n          'fa-check': step.type === 'completed',\n          'df-stepper-outline-number-future': step.type === 'future',\n          'df-stepper-outline-number-visited': step.type === 'visited',\n          'df-stepper-outline-number': step.type === 'future' || step.type === 'visited',\n          'fw-medium': step.type === 'visited',\n          'df-stepper-outline-icon': step.type === 'warning',\n          'fa-exclamation-triangle': step.type === 'warning',\n          'd-flex': step.type !== 'warning' && step.type !== 'completed',\n          'justify-content-center': step.type !== 'warning' && step.type !== 'completed',\n          'align-items-center': step.type !== 'warning' && step.type !== 'completed'\n        }\"\n      >\n        @if (step.type !== 'warning' && step.type !== 'completed') {\n          <span aria-hidden=\"true\">{{ stepperService.getStepNumberLabel(i) }}</span>\n        }\n      </div>\n      <div\n        class=\"flex-column\"\n        [class.mt-1]=\"!state.isInline\"\n        [class.d-none]=\"!state.isVertical\"\n        [class.d-sm-flex]=\"!state.isVertical\"\n        [class.d-flex]=\"state.isVertical\"\n      >\n        @if (step.type === 'warning') {\n          <span class=\"visually-hidden\">{{ stepperService.warningLabel }}</span>\n        }\n        <span\n          class=\"df-stepper-label\"\n          [class]=\"stepperLabelClasses\"\n          [class.ms-4]=\"state.isInline || state.isVertical\"\n          >{{ step.label }}</span\n        >\n        @if (step.optionalLabel) {\n          <span\n            class=\"df-stepper-optional-label text-body fw-normal text-start fs-xs\"\n            [class.ms-4]=\"state.isInline || state.isVertical\"\n            >{{ step.optionalLabel }}</span\n          >\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\n        [ngTemplateOutlet]=\"myStepperLine\"\n        [ngTemplateOutletContext]=\"{ $implicit: state.isInline }\"\n      ></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 my-5 ps-5 position-relative\"\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\" [class]=\"stepperLabelClasses\">{{ state.steps[state.active].label }}</span>\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { tplStepsContent: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DfStepperStepContentDirective), { isSignal: true }] }] } });
 
 class DfStepperModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: DfStepperModule, imports: [DfStepperDirective, DfStepperStepDirective, DfStepperComponent, DfStepperStepContentDirective], exports: [DfStepperDirective, DfStepperStepDirective, DfStepperComponent, DfStepperStepContentDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfStepperModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: DfStepperModule, imports: [DfStepperDirective, DfStepperStepDirective, DfStepperComponent, DfStepperStepContentDirective], exports: [DfStepperDirective, DfStepperStepDirective, DfStepperComponent, DfStepperStepContentDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfStepperModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfStepperModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfStepperModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfStepperDirective, DfStepperStepDirective, DfStepperComponent, DfStepperStepContentDirective],
@@ -5737,65 +5147,396 @@ function hasOverflowY(element) {
 }
 
 /**
- * My dfTooltipTruncate directive
+ * My dfTooltipTruncate directive
+ */
+class DfTooltipTruncateDirective {
+    constructor() {
+        this.tooltip = inject(NgbTooltip);
+        this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        /**
+         * The direction considered when detecting overflow, can be 'x', 'y' or ''.
+         * @defaultValue ''
+         */
+        this.dfTooltipTruncate = input('', ...(ngDevMode ? [{ debugName: "dfTooltipTruncate" }] : []));
+    }
+    ngOnInit() {
+        this.renderer.addClass(this.elementRef.nativeElement, 'text-truncate');
+    }
+    ngDoCheck() {
+        let disableToolTip = false;
+        switch (this.dfTooltipTruncate()) {
+            case 'x':
+                disableToolTip = !hasOverflowX(this.elementRef.nativeElement);
+                break;
+            case 'y':
+                disableToolTip = !hasOverflowY(this.elementRef.nativeElement);
+                break;
+            case '':
+                disableToolTip = !hasOverflow(this.elementRef.nativeElement);
+                break;
+        }
+        this.tooltip.disableTooltip = disableToolTip;
+        this.renderer.setAttribute(this.elementRef.nativeElement, 'tabIndex', disableToolTip ? '-1' : '0');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfTooltipTruncateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: DfTooltipTruncateDirective, isStandalone: true, selector: "[dfTooltipTruncate]", inputs: { dfTooltipTruncate: { classPropertyName: "dfTooltipTruncate", publicName: "dfTooltipTruncate", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["dfTooltipTruncate"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfTooltipTruncateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    exportAs: 'dfTooltipTruncate',
+                    selector: '[dfTooltipTruncate]'
+                }]
+        }], propDecorators: { dfTooltipTruncate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dfTooltipTruncate", required: false }] }] } });
+
+class DfTooltipModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: DfTooltipModule, imports: [DfTooltipTruncateDirective], exports: [DfTooltipTruncateDirective, NgbTooltipModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfTooltipModule, imports: [NgbTooltipModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfTooltipModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [DfTooltipTruncateDirective],
+                    exports: [DfTooltipTruncateDirective, NgbTooltipModule]
+                }]
+        }] });
+
+/**
+ * Creates an observable where all callbacks are executed inside a given zone
+ *
+ * @param zone Angular Zone element
+ */
+function runInZone(zone) {
+    return (source) => {
+        return new Observable((observer) => {
+            const onNext = (value) => zone.run(() => observer.next(value));
+            const onError = (e) => zone.run(() => observer.error(e));
+            const onComplete = () => zone.run(() => observer.complete());
+            return source.subscribe(onNext, onError, onComplete);
+        });
+    };
+}
+function getTransitionDurationMs(element) {
+    const { transitionDelay, transitionDuration } = window.getComputedStyle(element);
+    const transitionDelaySec = parseFloat(transitionDelay);
+    const transitionDurationSec = parseFloat(transitionDuration);
+    return (transitionDelaySec + transitionDurationSec) * 1000;
+}
+/**
+ * Force a browser reflow
+ * @param element element where to apply the reflow
+ */
+function reflow(element) {
+    return (element || document.body).getBoundingClientRect();
+}
+
+const TRANSITION_TIMER_DELAY = 5;
+const noopFn = () => { };
+const runningTransitions = new Map();
+const ngbRunTransition = (zone, element, startFn, options) => {
+    // Getting initial context from options
+    let context = options.context || {};
+    // Checking if there are already running transitions on the given element.
+    const running = runningTransitions.get(element);
+    if (running) {
+        switch (options.runningTransition) {
+            // If there is one running and we want for it to 'continue' to run, we have to cancel the new one.
+            // We're not emitting any values, but simply completing the observable (EMPTY).
+            case 'continue':
+                return EMPTY;
+            // If there is one running and we want for it to 'stop', we have to complete the running one.
+            // We're simply completing the running one and not emitting any values and merging newly provided context
+            // with the one coming from currently running transition.
+            case 'stop':
+                zone.run(() => running.transition$.complete());
+                context = Object.assign(running.context, context);
+                runningTransitions.delete(element);
+        }
+    }
+    // Running the start function
+    const endFn = startFn(element, options.animation, context) || noopFn;
+    // If 'prefer-reduced-motion' is enabled, the 'transition' will be set to 'none'.
+    // If animations are disabled, we have to emit a value and complete the observable
+    // In this case we have to call the end function, but can finish immediately by emitting a value,
+    // completing the observable and executing end functions synchronously.
+    if (!options.animation || window.getComputedStyle(element).transitionProperty === 'none') {
+        zone.run(() => endFn());
+        return of(undefined).pipe(runInZone(zone));
+    }
+    // Starting a new transition
+    const transition$ = new Subject();
+    const finishTransition$ = new Subject();
+    const stop$ = transition$.pipe(endWith(true));
+    runningTransitions.set(element, {
+        transition$,
+        complete: () => {
+            finishTransition$.next({});
+            finishTransition$.complete();
+        },
+        context
+    });
+    const transitionDurationMs = getTransitionDurationMs(element);
+    // 1. We have to both listen for the 'transitionend' event and have a 'just-in-case' timer,
+    // because 'transitionend' event might not be fired in some browsers, if the transitioning
+    // element becomes invisible (ex. when scrolling, making browser tab inactive, etc.). The timer
+    // guarantees, that we'll release the DOM element and complete 'ngbRunTransition'.
+    // 2. We need to filter transition end events, because they might bubble from shorter transitions
+    // on inner DOM elements. We're only interested in the transition on the 'element' itself.
+    zone.runOutsideAngular(() => {
+        const transitionEnd$ = fromEvent(element, 'transitionend').pipe(takeUntil(stop$), filter(({ target }) => target === element));
+        const timer$ = timer(transitionDurationMs + TRANSITION_TIMER_DELAY).pipe(takeUntil(stop$));
+        race(timer$, transitionEnd$, finishTransition$)
+            .pipe(takeUntil(stop$))
+            .subscribe(() => {
+            runningTransitions.delete(element);
+            zone.run(() => {
+                endFn();
+                transition$.next({});
+                transition$.complete();
+            });
+        });
+    });
+    return transition$.asObservable();
+};
+const ngbCompleteTransition = (element) => {
+    runningTransitions.get(element)?.complete();
+};
+
+/**
+ * A configuration service for the [DfSideNavCollapseDirective](#/components/sidenav/api#DfSideNavCollapseDirective) component.
+ *
+ * You can inject this service, typically in your root component, and customize its properties
+ * to provide default values for the sideNav used in the application.
+ */
+class DfSideNavCollapseConfig {
+    constructor() {
+        this._ngbConfig = inject(NgbConfig);
+    }
+    get animation() {
+        return this._animation === undefined ? this._ngbConfig.animation : this._animation;
+    }
+    set animation(animation) {
+        this._animation = animation;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSideNavCollapseConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSideNavCollapseConfig, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSideNavCollapseConfig, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * A service for managing the sidenav panel animation.
+ * This service is included at root level
+ *
+ * Creating a sidenav is straightforward: use [DfSideNavComponent](#/components/sidenav/api#DfSideNavComponent) component
+ */
+class DfSideNavCollapseService {
+    constructor() {
+        this._sideNavAnimation$ = new BehaviorSubject(inject(DfSideNavCollapseConfig).animation);
+    }
+    get sideNavAnimation$() {
+        return this._sideNavAnimation$.asObservable();
+    }
+    /**
+     * Use this to activate or desactivate the animation for the sideNav
+     * If input is `True` it will activate the animation.
+     * Default value for animation is set in by DfSideNavCollapseConfig
+     *
+     */
+    setAnimation(on) {
+        this._sideNavAnimation$.next(on);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSideNavCollapseService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSideNavCollapseService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSideNavCollapseService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+function measureCollapsingElementWidthPx(element) {
+    // SSR fix for without injecting the PlatformId
+    if (typeof navigator === 'undefined') {
+        return '0px';
+    }
+    const { classList } = element;
+    const hasShownClass = classList.contains('df-show');
+    if (!hasShownClass) {
+        classList.add('df-show');
+    }
+    element.style.width = '';
+    const width = `${element.getBoundingClientRect().width}px`;
+    if (!hasShownClass) {
+        classList.remove('df-show');
+    }
+    return width;
+}
+const DfCollapsingTransition = (element, animation, context) => {
+    const { direction, minimized } = context;
+    let { maxWidth } = context;
+    const { classList } = element;
+    const dfcollapsingClass = 'df-collapsing';
+    const dfminimizingClass = 'df-minimizing';
+    function setInitialClasses() {
+        if (minimized) {
+            classList.add('df-minimized');
+        }
+        else {
+            classList.add('df-collapse');
+        }
+        if (direction === 'show') {
+            classList.add('df-show');
+        }
+        else {
+            classList.remove('df-show');
+        }
+    }
+    // without animations we just need to set initial classes
+    if (!animation) {
+        setInitialClasses();
+        return () => { };
+    }
+    // No maxWidth -> running the transition for the first time
+    if (!maxWidth) {
+        maxWidth = measureCollapsingElementWidthPx(element);
+        context.maxWidth = maxWidth;
+        // Fix the width before starting the animation
+        element.style.width = direction !== 'show' ? maxWidth : minimized ? '50px' : '0px';
+        classList.remove('df-collapse');
+        classList.remove('df-minimized'); // add
+        classList.remove(dfcollapsingClass);
+        classList.remove(dfminimizingClass);
+        classList.remove('df-show');
+        reflow(element);
+        // Start the animation
+        if (minimized) {
+            classList.add(dfminimizingClass);
+        }
+        else {
+            classList.add(dfcollapsingClass);
+        }
+    }
+    // Start or revert the animation
+    element.style.width = direction === 'show' ? maxWidth : minimized ? '50px' : '0px';
+    return () => {
+        setInitialClasses();
+        classList.remove(dfcollapsingClass);
+        classList.remove(dfminimizingClass);
+        element.style.width = '';
+    };
+};
+
+/**
+ * A directive to provide a simple way of hiding and showing the sideNav on the page.
  */
-class DfTooltipTruncateDirective {
+class DfSideNavCollapseDirective {
     constructor() {
-        this.tooltip = inject(NgbTooltip);
-        this.elementRef = inject(ElementRef);
-        this.renderer = inject(Renderer2);
         /**
-         * The direction considered when detecting overflow, can be 'x', 'y' or ''.
-         * @defaultValue ''
+         * If `true`, will collapse the element or show it otherwise.
          */
-        this.dfTooltipTruncate = input('', ...(ngDevMode ? [{ debugName: "dfTooltipTruncate" }] : []));
+        this.dfSideNavCollapse = input.required(...(ngDevMode ? [{ debugName: "dfSideNavCollapse" }] : []));
+        this.collapsed = signal(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+        this.minimized = input(false, ...(ngDevMode ? [{ debugName: "minimized" }] : []));
+        this.dfSideNavCollapseChange = output();
+        /**
+         * An event emitted when the collapse element is shown, after the transition. It has no payload.
+         *
+         * @since 9.1.0
+         */
+        this.shown = output();
+        /**
+         * An event emitted when the collapse element is hidden, after the transition. It has no payload.
+         *
+         * @since 9.1.0
+         */
+        this.hidden = output();
+        this.elementRef = inject(ElementRef);
+        this.sideNavCollapseService = inject(DfSideNavCollapseService);
+        this.zone = inject(NgZone);
+        this.injector = inject(Injector);
+        this.animation = false;
+        effect(() => {
+            this.collapsed.set(this.dfSideNavCollapse());
+        });
+        this.sideNavCollapseService.sideNavAnimation$.pipe(takeUntilDestroyed()).subscribe((value) => {
+            this.animation = value;
+        });
     }
     ngOnInit() {
-        this.renderer.addClass(this.elementRef.nativeElement, 'text-truncate');
+        let firstRun = true;
+        effect(() => {
+            const collapsed = this.collapsed();
+            // we only track the collapsed signal
+            untracked(() => {
+                // first time the effect is run, we run the transition without triggering event emitters
+                if (firstRun) {
+                    this.runTransition(collapsed, this.animation, this.minimized());
+                }
+                else {
+                    this.runTransitionWithEvents(collapsed, this.animation, this.minimized());
+                }
+                firstRun = false;
+            });
+        }, { injector: this.injector });
     }
-    ngDoCheck() {
-        let disableToolTip = false;
-        switch (this.dfTooltipTruncate()) {
-            case 'x':
-                disableToolTip = !hasOverflowX(this.elementRef.nativeElement);
-                break;
-            case 'y':
-                disableToolTip = !hasOverflowY(this.elementRef.nativeElement);
-                break;
-            case '':
-                disableToolTip = !hasOverflow(this.elementRef.nativeElement);
-                break;
-        }
-        this.tooltip.disableTooltip = disableToolTip;
-        this.renderer.setAttribute(this.elementRef.nativeElement, 'tabIndex', disableToolTip ? '-1' : '0');
+    /**
+     * Triggers collapsing programmatically.
+     *
+     * If there is a collapsing transition running already, it will be reversed.
+     * If the animations are turned off this happens synchronously.
+     *
+     * @since 9.1.0
+     */
+    toggle(open = this.collapsed()) {
+        this.collapsed.set(!open);
+    }
+    runTransition(collapsed, animation, minimizedInput) {
+        return ngbRunTransition(this.zone, this.elementRef.nativeElement, DfCollapsingTransition, {
+            animation,
+            runningTransition: 'stop',
+            context: { direction: collapsed ? 'hide' : 'show', minimized: minimizedInput }
+        });
+    }
+    runTransitionWithEvents(collapsed, animation, minimized) {
+        this.runTransition(collapsed, animation, minimized).subscribe(() => {
+            if (collapsed) {
+                this.hidden.emit();
+            }
+            else {
+                this.shown.emit();
+            }
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfTooltipTruncateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.3", type: DfTooltipTruncateDirective, isStandalone: true, selector: "[dfTooltipTruncate]", inputs: { dfTooltipTruncate: { classPropertyName: "dfTooltipTruncate", publicName: "dfTooltipTruncate", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["dfTooltipTruncate"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSideNavCollapseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: DfSideNavCollapseDirective, isStandalone: true, selector: "[dfSideNavCollapse]", inputs: { dfSideNavCollapse: { classPropertyName: "dfSideNavCollapse", publicName: "dfSideNavCollapse", isSignal: true, isRequired: true, transformFunction: null }, minimized: { classPropertyName: "minimized", publicName: "minimized", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dfSideNavCollapseChange: "dfSideNavCollapseChange", shown: "shown", hidden: "hidden" }, exportAs: ["dfSideNavCollapse"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfTooltipTruncateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSideNavCollapseDirective, decorators: [{
             type: Directive,
-            args: [{
-                    exportAs: 'dfTooltipTruncate',
-                    selector: '[dfTooltipTruncate]'
-                }]
-        }] });
+            args: [{ selector: '[dfSideNavCollapse]', exportAs: 'dfSideNavCollapse' }]
+        }], ctorParameters: () => [], propDecorators: { dfSideNavCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "dfSideNavCollapse", required: true }] }], minimized: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimized", required: false }] }], dfSideNavCollapseChange: [{ type: i0.Output, args: ["dfSideNavCollapseChange"] }], shown: [{ type: i0.Output, args: ["shown"] }], hidden: [{ type: i0.Output, args: ["hidden"] }] } });
 
-class DfTooltipModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: DfTooltipModule, imports: [DfTooltipTruncateDirective], exports: [DfTooltipTruncateDirective, NgbTooltipModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfTooltipModule, imports: [NgbTooltipModule] }); }
+class DfSideNavCollapseModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSideNavCollapseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: DfSideNavCollapseModule, imports: [DfSideNavCollapseDirective], exports: [DfSideNavCollapseDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSideNavCollapseModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfTooltipModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSideNavCollapseModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [DfTooltipTruncateDirective],
-                    exports: [DfTooltipTruncateDirective, NgbTooltipModule]
+                    imports: [DfSideNavCollapseDirective],
+                    exports: [DfSideNavCollapseDirective]
                 }]
         }] });
 
 class DfSideNavModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSideNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: DfSideNavModule, imports: [DfManageSideNavDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSideNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: DfSideNavModule, imports: [DfManageSideNavDirective,
             DfSideNavComponent,
             DfSideNavHeaderDirective,
             DfSideNavIconDirective,
@@ -5806,10 +5547,10 @@ class DfSideNavModule {
             DfSideNavItemDirective,
             DfSideNavCollapseModule,
             DfMediaModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSideNavModule, imports: [DfSideNavComponent, DfSideNavCollapseModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSideNavModule, imports: [DfSideNavCollapseModule,
             DfMediaModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfSideNavModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSideNavModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -5872,10 +5613,10 @@ class DfManageCardSelectionDirective {
                 return;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfManageCardSelectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.3", type: DfManageCardSelectionDirective, isStandalone: true, selector: "[dfManageCardSelected]", inputs: { dfManageCardSelected: { classPropertyName: "dfManageCardSelected", publicName: "dfManageCardSelected", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "click($event)", "keydown": "keydown($event)" }, properties: { "attr.tabindex": "0" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfManageCardSelectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: DfManageCardSelectionDirective, isStandalone: true, selector: "[dfManageCardSelected]", inputs: { dfManageCardSelected: { classPropertyName: "dfManageCardSelected", publicName: "dfManageCardSelected", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "click($event)", "keydown": "keydown($event)" }, properties: { "attr.tabindex": "0" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfManageCardSelectionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfManageCardSelectionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfManageCardSelected]',
@@ -5885,14 +5626,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                         '[attr.tabindex]': '0'
                     }
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { dfManageCardSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "dfManageCardSelected", required: true }] }] } });
 
 class DfAdvancedCardModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfAdvancedCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: DfAdvancedCardModule, imports: [DfManageCardSelectionDirective], exports: [DfManageCardSelectionDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfAdvancedCardModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfAdvancedCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: DfAdvancedCardModule, imports: [DfManageCardSelectionDirective], exports: [DfManageCardSelectionDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfAdvancedCardModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfAdvancedCardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfAdvancedCardModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfManageCardSelectionDirective],
@@ -5910,7 +5651,6 @@ const DF_MODULES = [
     DfAccessibilityModule,
     DfSliderModule,
     DfPopoverModule,
-    DfIconModule,
     DfTooltipModule,
     DfSideNavModule,
     DfSideNavCollapseModule,
@@ -5923,8 +5663,8 @@ const DF_MODULES = [
  * @deprecated Import only the needed modules or use standalone components instead of DfModule
  */
 class DfModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: DfModule, imports: [DfAlertModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: DfModule, imports: [DfAlertModule,
             DfDatePickerModule,
             DfSelectModule,
             DfProgressbarModule,
@@ -5933,7 +5673,6 @@ class DfModule {
             DfAccessibilityModule,
             DfSliderModule,
             DfPopoverModule,
-            DfIconModule,
             DfTooltipModule,
             DfSideNavModule,
             DfSideNavCollapseModule,
@@ -5949,7 +5688,6 @@ class DfModule {
             DfAccessibilityModule,
             DfSliderModule,
             DfPopoverModule,
-            DfIconModule,
             DfTooltipModule,
             DfSideNavModule,
             DfSideNavCollapseModule,
@@ -5957,7 +5695,7 @@ class DfModule {
             DfFooterModule,
             DfToastModule,
             DfStepperModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfModule, imports: [DF_MODULES, DfAlertModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfModule, imports: [DF_MODULES, DfAlertModule,
             DfDatePickerModule,
             DfSelectModule,
             DfProgressbarModule,
@@ -5966,7 +5704,6 @@ class DfModule {
             DfAccessibilityModule,
             DfSliderModule,
             DfPopoverModule,
-            DfIconModule,
             DfTooltipModule,
             DfSideNavModule,
             DfSideNavCollapseModule,
@@ -5975,7 +5712,7 @@ class DfModule {
             DfToastModule,
             DfStepperModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: DF_MODULES,
@@ -5983,153 +5720,187 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                 }]
         }] });
 
+class DfOverflowService {
+    /**
+     * @param element the HTML element
+     * @returns whether the element is overflowing
+     */
+    hasOverflow(element) {
+        return this.hasOverflowX(element) || this.hasOverflowY(element);
+    }
+    /**
+     * @param element the HTML element
+     * @returns whether the element is overflowing horizontally
+     */
+    hasOverflowX(element) {
+        return element.offsetWidth < element.scrollWidth;
+    }
+    /**
+     * @param element the HTML element
+     * @returns whether the element is overflowing vertically
+     */
+    hasOverflowY(element) {
+        return element.offsetHeight < element.scrollHeight;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfOverflowService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfOverflowService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfOverflowService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/**
+ * DfTitleTruncate directive
+ * It adds the title attribute with the element's textContent as value
+ * when the element is truncated.
+ *
+ * @deprecated Use the bootstrap class text-truncate or CSS property text-overflow: ellipsis instead
+ */
+class DfTitleTruncateDirective {
+    constructor() {
+        this.elementRef = inject((ElementRef));
+        this.renderer = inject(Renderer2);
+        this.overflowService = inject(DfOverflowService);
+    }
+    ngOnInit() {
+        this.renderer.addClass(this.elementRef.nativeElement, 'text-truncate');
+    }
+    ngDoCheck() {
+        const { nativeElement } = this.elementRef;
+        const titleAttributeName = 'title';
+        if (this.overflowService.hasOverflow(nativeElement)) {
+            nativeElement.setAttribute(titleAttributeName, nativeElement.textContent);
+        }
+        else if (nativeElement.getAttribute(titleAttributeName)) {
+            nativeElement.removeAttribute(titleAttributeName);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfTitleTruncateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: DfTitleTruncateDirective, isStandalone: true, selector: "[dfTitleTruncate]", exportAs: ["dfTitleTruncate"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfTitleTruncateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    exportAs: 'dfTitleTruncate',
+                    selector: '[dfTitleTruncate]'
+                }]
+        }] });
+
 const arrowRight = `<svg width="1440" height="810" viewBox="0 0 1440 810" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M1440 0H0V810H1440V0Z" fill="var(--df-waves-of-progress-bg-color)" />
-  <mask id="mask0_3040_1578" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="1440"
-        height="810">
-    <path d="M1440 0H0V810H1440V0Z" fill="white" />
-  </mask>
-  <g mask="url(#mask0_3040_1578)">
-    <g opacity="0.5">
-      <path
-        d="M-194.045 87.9764C-178.381 87.9764 -163.118 90.9614 -148.685 96.8527C-133.733 102.95 -120.342 111.909 -108.875 123.478L108.614 342.909C120.014 354.41 128.842 367.798 134.845 382.693C140.647 397.085 143.59 412.288 143.59 427.876C143.59 443.465 140.65 458.668 134.845 473.06C128.842 487.955 120.014 501.343 108.614 512.844L-108.875 732.275C-120.342 743.844 -133.733 752.803 -148.685 758.9C-163.118 764.788 -178.381 767.776 -194.045 767.776C-209.708 767.776 -224.971 764.791 -239.405 758.9C-254.356 752.803 -267.747 743.844 -279.215 732.275L-496.703 512.844C-508.103 501.343 -516.931 487.955 -522.935 473.06C-528.736 458.668 -531.68 443.465 -531.68 427.876C-531.68 412.288 -528.74 397.085 -522.935 382.693C-516.931 367.798 -508.103 354.41 -496.703 342.909L-279.215 123.474C-267.747 111.905 -254.356 102.946 -239.405 96.8489C-224.971 90.9614 -209.708 87.9727 -194.045 87.9727M-194.045 86.4727C-225.286 86.4727 -256.527 98.4539 -280.28 122.416L-497.768 341.848C-544.981 389.48 -544.981 466.261 -497.768 513.898L-280.28 733.329C-256.527 757.291 -225.286 769.273 -194.045 769.273C-162.803 769.273 -131.562 757.291 -107.81 733.329L109.679 513.898C156.892 466.265 156.892 389.484 109.679 341.848L-107.81 122.42C-131.562 98.4577 -162.803 86.4764 -194.045 86.4764V86.4727Z"
-        fill="var(--df-waves-of-progress-line-color)" />
-    </g>
-    <g opacity="0.5">
-      <path
-        d="M-189.938 -270.881C-167.412 -270.881 -145.463 -266.587 -124.703 -258.116C-103.204 -249.345 -83.9406 -236.463 -67.4518 -219.825L453.104 305.382C469.541 321.964 482.264 341.262 490.919 362.734C499.282 383.483 503.523 405.402 503.523 427.872C503.523 450.342 499.282 472.26 490.919 493.009C482.264 514.485 469.541 533.779 453.104 550.362L-67.4518 1075.58C-83.9406 1092.21 -103.204 1105.1 -124.703 1113.87C-145.463 1122.33 -167.412 1126.63 -189.938 1126.63C-212.464 1126.63 -234.413 1122.34 -255.173 1113.87C-276.672 1105.1 -295.936 1092.21 -312.424 1075.58L-832.981 550.365C-849.417 533.783 -862.141 514.485 -870.796 493.013C-879.158 472.264 -883.399 450.345 -883.399 427.875C-883.399 405.405 -879.158 383.487 -870.796 362.738C-862.141 341.262 -849.417 321.968 -832.981 305.385L-312.424 -219.825C-295.936 -236.463 -276.672 -249.345 -255.173 -258.116C-234.413 -266.583 -212.464 -270.881 -189.938 -270.881ZM-189.938 -272.381C-234.698 -272.381 -279.462 -255.213 -313.489 -220.882L-834.046 304.328C-901.849 372.739 -901.849 483.012 -834.046 551.423L-313.489 1076.63C-279.462 1110.96 -234.698 1128.13 -189.938 1128.13C-145.178 1128.13 -100.414 1110.96 -66.3868 1076.63L454.169 551.423C521.973 483.012 521.973 372.739 454.169 304.328L-66.3868 -220.882C-100.414 -255.213 -145.178 -272.381 -189.938 -272.381Z"
-        fill="var(--df-waves-of-progress-line-color)" />
-    </g>
-    <g opacity="0.5">
-      <path
-        d="M-185.831 -629.736C-171.352 -629.736 -156.817 -628.334 -142.623 -625.574C-128.294 -622.784 -114.198 -618.584 -100.721 -613.086C-72.6708 -601.641 -47.5382 -584.834 -26.0245 -563.129L797.595 267.86C819.068 289.524 835.688 314.731 846.994 342.785C852.432 356.274 856.587 370.374 859.343 384.695C862.073 398.881 863.46 413.409 863.46 427.876C863.46 442.344 862.077 456.871 859.343 471.057C856.587 485.379 852.432 499.479 846.994 512.967C835.688 541.021 819.068 566.229 797.595 587.892L-26.0283 1418.88C-47.542 1440.58 -72.6744 1457.39 -100.724 1468.83C-114.202 1474.33 -128.298 1478.54 -142.627 1481.32C-156.817 1484.09 -171.356 1485.48 -185.834 1485.48C-200.313 1485.48 -214.848 1484.09 -229.042 1481.32C-243.371 1478.53 -257.467 1474.33 -270.944 1468.83C-298.994 1457.39 -324.127 1440.58 -345.641 1418.88L-1169.26 587.892C-1190.73 566.229 -1207.35 541.021 -1218.66 512.967C-1224.09 499.479 -1228.25 485.379 -1231 471.057C-1233.73 456.871 -1235.12 442.344 -1235.12 427.876C-1235.12 413.409 -1233.74 398.881 -1231 384.695C-1228.25 370.374 -1224.09 356.274 -1218.66 342.785C-1207.35 314.731 -1190.73 289.524 -1169.26 267.86L-345.633 -563.125C-324.12 -584.83 -298.991 -601.638 -270.937 -613.083C-257.459 -618.58 -243.363 -622.784 -229.034 -625.57C-214.844 -628.334 -200.306 -629.733 -185.827 -629.733M-185.827 -631.233C-244.109 -631.233 -302.388 -608.883 -346.694 -564.179L-1170.32 266.802C-1258.72 355.992 -1258.72 499.76 -1170.32 588.946L-346.698 1419.94C-302.392 1464.64 -244.109 1486.99 -185.831 1486.99C-127.552 1486.99 -69.2695 1464.64 -24.9633 1419.94L798.66 588.95C887.059 499.76 887.059 355.992 798.66 266.806L-24.9633 -564.183C-69.2695 -608.886 -127.552 -631.236 -185.831 -631.236L-185.827 -631.233Z"
-        fill="var(--df-waves-of-progress-line-color)" />
-    </g>
-    <g opacity="0.5">
-      <path
-        d="M-181.725 -988.59C-163.868 -988.59 -145.935 -986.861 -128.43 -983.456C-110.757 -980.014 -93.3679 -974.831 -76.7441 -968.051C-42.1429 -953.936 -11.1416 -933.202 15.3934 -906.427L1142.08 230.336C1168.59 257.078 1189.11 288.199 1203.07 322.83C1209.78 339.484 1214.91 356.888 1218.31 374.569C1221.68 392.081 1223.39 410.017 1223.39 427.879C1223.39 445.74 1221.68 463.676 1218.31 481.189C1214.91 498.866 1209.78 516.274 1203.07 532.927C1189.11 567.559 1168.59 598.68 1142.08 625.421L15.3934 1762.18C-11.1453 1788.95 -42.1429 1809.69 -76.7441 1823.8C-93.3679 1830.58 -110.757 1835.77 -128.43 1839.21C-145.935 1842.61 -163.864 1844.34 -181.725 1844.34C-199.587 1844.34 -217.515 1842.61 -235.02 1839.21C-252.694 1835.77 -270.083 1830.58 -286.707 1823.8C-321.308 1809.69 -352.305 1788.95 -378.844 1762.18L-1505.54 625.414C-1532.04 598.672 -1552.56 567.551 -1566.52 532.92C-1573.23 516.266 -1578.36 498.862 -1581.76 481.181C-1585.13 463.669 -1586.84 445.733 -1586.84 427.871C-1586.84 410.01 -1585.13 392.074 -1581.76 374.561C-1578.36 356.884 -1573.23 339.476 -1566.52 322.823C-1552.56 288.191 -1532.04 257.07 -1505.54 230.329L-378.844 -906.427C-352.309 -933.202 -321.308 -953.936 -286.707 -968.051C-270.083 -974.831 -252.694 -980.018 -235.02 -983.456C-217.515 -986.865 -199.587 -988.59 -181.725 -988.59ZM-181.725 -990.09C-253.527 -990.09 -325.328 -962.554 -379.909 -907.481L-1506.6 229.279C-1615.59 339.244 -1615.59 516.506 -1506.6 626.471L-379.909 1763.23C-325.324 1818.31 -253.527 1845.84 -181.725 1845.84C-109.924 1845.84 -38.1229 1818.31 16.4584 1763.23L1143.15 626.471C1252.14 516.506 1252.14 339.244 1143.15 229.279L16.4584 -907.485C-38.1266 -962.557 -109.928 -990.094 -181.725 -990.094V-990.09Z"
-        fill="var(--df-waves-of-progress-line-color)" />
-    </g>
-    <g opacity="0.5">
-      <path
-        d="M-177.619 -1347.45C-156.379 -1347.45 -135.053 -1345.39 -114.236 -1341.34C-93.2177 -1337.25 -72.5364 -1331.08 -52.7627 -1323.01C-32.6213 -1314.8 -13.2264 -1304.52 4.88977 -1292.48C23.4823 -1280.11 40.9536 -1265.73 56.8162 -1249.72L1486.57 192.811C1502.43 208.804 1516.67 226.377 1528.9 245.044C1540.83 263.24 1551.01 282.698 1559.14 302.877C1567.13 322.692 1573.23 343.407 1577.28 364.444C1581.3 385.283 1583.33 406.625 1583.33 427.88C1583.33 449.135 1581.3 470.476 1577.28 491.315C1573.23 512.352 1567.13 533.063 1559.14 552.882C1551.01 573.061 1540.84 592.516 1528.9 610.715C1516.67 629.382 1502.43 646.955 1486.57 662.948L56.8198 2105.48C40.9573 2121.48 23.4861 2135.87 4.89355 2148.23C-13.2227 2160.28 -32.6177 2170.55 -52.759 2178.77C-72.5289 2186.84 -93.2103 2193 -114.233 2197.09C-135.053 2201.15 -156.375 2203.2 -177.615 2203.2C-198.855 2203.2 -220.181 2201.15 -240.998 2197.09C-262.016 2193 -282.698 2186.84 -302.471 2178.77C-322.613 2170.55 -342.008 2160.28 -360.124 2148.23C-378.717 2135.87 -396.188 2121.48 -412.05 2105.48L-1841.81 662.941C-1857.66 646.947 -1871.9 629.375 -1884.14 610.707C-1896.07 592.512 -1906.24 573.053 -1914.38 552.875C-1922.36 533.059 -1928.47 512.345 -1932.52 491.307C-1936.53 470.468 -1938.57 449.127 -1938.57 427.872C-1938.57 406.617 -1936.53 385.276 -1932.52 364.437C-1928.47 343.399 -1922.36 322.688 -1914.38 302.87C-1906.24 282.691 -1896.07 263.236 -1884.14 245.037C-1871.9 226.37 -1857.66 208.797 -1841.81 192.803L-412.054 -1249.73C-396.192 -1265.73 -378.72 -1280.12 -360.128 -1292.48C-342.011 -1304.53 -322.617 -1314.8 -302.475 -1323.02C-282.705 -1331.08 -262.024 -1337.25 -241.001 -1341.34C-220.182 -1345.39 -198.859 -1347.45 -177.619 -1347.45M-177.619 -1348.95C-262.939 -1348.95 -348.259 -1316.23 -413.119 -1250.79L-1842.88 191.757C-1972.46 322.501 -1972.46 533.255 -1842.88 663.998L-413.119 2106.54C-348.259 2171.98 -262.939 2204.7 -177.619 2204.7C-92.299 2204.7 -6.979 2171.98 57.8811 2106.54L1487.64 663.995C1617.22 533.251 1617.22 322.497 1487.64 191.753L57.8848 -1250.78C-6.97534 -1316.22 -92.2953 -1348.95 -177.615 -1348.95L-177.619 -1348.95Z"
-        fill="var(--df-waves-of-progress-line-color)" />
-    </g>
+  <g opacity="0.5" fill="black">
+    <path d="M-194.045 87.9764C-178.381 87.9764 -163.118 90.9614 -148.685 96.8527C-133.733 102.95 -120.342 111.909 -108.875 123.478L108.614 342.909C120.014 354.41 128.842 367.798 134.845 382.693C140.647 397.085 143.59 412.288 143.59 427.876C143.59 443.465 140.65 458.668 134.845 473.06C128.842 487.955 120.014 501.343 108.614 512.844L-108.875 732.275C-120.342 743.844 -133.733 752.803 -148.685 758.9C-163.118 764.788 -178.381 767.776 -194.045 767.776C-209.708 767.776 -224.971 764.791 -239.405 758.9C-254.356 752.803 -267.747 743.844 -279.215 732.275L-496.703 512.844C-508.103 501.343 -516.931 487.955 -522.935 473.06C-528.736 458.668 -531.68 443.465 -531.68 427.876C-531.68 412.288 -528.74 397.085 -522.935 382.693C-516.931 367.798 -508.103 354.41 -496.703 342.909L-279.215 123.474C-267.747 111.905 -254.356 102.946 -239.405 96.8489C-224.971 90.9614 -209.708 87.9727 -194.045 87.9727M-194.045 86.4727C-225.286 86.4727 -256.527 98.4539 -280.28 122.416L-497.768 341.848C-544.981 389.48 -544.981 466.261 -497.768 513.898L-280.28 733.329C-256.527 757.291 -225.286 769.273 -194.045 769.273C-162.803 769.273 -131.562 757.291 -107.81 733.329L109.679 513.898C156.892 466.265 156.892 389.484 109.679 341.848L-107.81 122.42C-131.562 98.4577 -162.803 86.4764 -194.045 86.4764V86.4727Z"/>
+    <path d="M-189.938 -270.881C-167.412 -270.881 -145.463 -266.587 -124.703 -258.116C-103.204 -249.345 -83.9406 -236.463 -67.4518 -219.825L453.104 305.382C469.541 321.964 482.264 341.262 490.919 362.734C499.282 383.483 503.523 405.402 503.523 427.872C503.523 450.342 499.282 472.26 490.919 493.009C482.264 514.485 469.541 533.779 453.104 550.362L-67.4518 1075.58C-83.9406 1092.21 -103.204 1105.1 -124.703 1113.87C-145.463 1122.33 -167.412 1126.63 -189.938 1126.63C-212.464 1126.63 -234.413 1122.34 -255.173 1113.87C-276.672 1105.1 -295.936 1092.21 -312.424 1075.58L-832.981 550.365C-849.417 533.783 -862.141 514.485 -870.796 493.013C-879.158 472.264 -883.399 450.345 -883.399 427.875C-883.399 405.405 -879.158 383.487 -870.796 362.738C-862.141 341.262 -849.417 321.968 -832.981 305.385L-312.424 -219.825C-295.936 -236.463 -276.672 -249.345 -255.173 -258.116C-234.413 -266.583 -212.464 -270.881 -189.938 -270.881ZM-189.938 -272.381C-234.698 -272.381 -279.462 -255.213 -313.489 -220.882L-834.046 304.328C-901.849 372.739 -901.849 483.012 -834.046 551.423L-313.489 1076.63C-279.462 1110.96 -234.698 1128.13 -189.938 1128.13C-145.178 1128.13 -100.414 1110.96 -66.3868 1076.63L454.169 551.423C521.973 483.012 521.973 372.739 454.169 304.328L-66.3868 -220.882C-100.414 -255.213 -145.178 -272.381 -189.938 -272.381Z"/>
+    <path d="M-185.831 -629.736C-171.352 -629.736 -156.817 -628.334 -142.623 -625.574C-128.294 -622.784 -114.198 -618.584 -100.721 -613.086C-72.6708 -601.641 -47.5382 -584.834 -26.0245 -563.129L797.595 267.86C819.068 289.524 835.688 314.731 846.994 342.785C852.432 356.274 856.587 370.374 859.343 384.695C862.073 398.881 863.46 413.409 863.46 427.876C863.46 442.344 862.077 456.871 859.343 471.057C856.587 485.379 852.432 499.479 846.994 512.967C835.688 541.021 819.068 566.229 797.595 587.892L-26.0283 1418.88C-47.542 1440.58 -72.6744 1457.39 -100.724 1468.83C-114.202 1474.33 -128.298 1478.54 -142.627 1481.32C-156.817 1484.09 -171.356 1485.48 -185.834 1485.48C-200.313 1485.48 -214.848 1484.09 -229.042 1481.32C-243.371 1478.53 -257.467 1474.33 -270.944 1468.83C-298.994 1457.39 -324.127 1440.58 -345.641 1418.88L-1169.26 587.892C-1190.73 566.229 -1207.35 541.021 -1218.66 512.967C-1224.09 499.479 -1228.25 485.379 -1231 471.057C-1233.73 456.871 -1235.12 442.344 -1235.12 427.876C-1235.12 413.409 -1233.74 398.881 -1231 384.695C-1228.25 370.374 -1224.09 356.274 -1218.66 342.785C-1207.35 314.731 -1190.73 289.524 -1169.26 267.86L-345.633 -563.125C-324.12 -584.83 -298.991 -601.638 -270.937 -613.083C-257.459 -618.58 -243.363 -622.784 -229.034 -625.57C-214.844 -628.334 -200.306 -629.733 -185.827 -629.733M-185.827 -631.233C-244.109 -631.233 -302.388 -608.883 -346.694 -564.179L-1170.32 266.802C-1258.72 355.992 -1258.72 499.76 -1170.32 588.946L-346.698 1419.94C-302.392 1464.64 -244.109 1486.99 -185.831 1486.99C-127.552 1486.99 -69.2695 1464.64 -24.9633 1419.94L798.66 588.95C887.059 499.76 887.059 355.992 798.66 266.806L-24.9633 -564.183C-69.2695 -608.886 -127.552 -631.236 -185.831 -631.236L-185.827 -631.233Z"/>
+    <path d="M-181.725 -988.59C-163.868 -988.59 -145.935 -986.861 -128.43 -983.456C-110.757 -980.014 -93.3679 -974.831 -76.7441 -968.051C-42.1429 -953.936 -11.1416 -933.202 15.3934 -906.427L1142.08 230.336C1168.59 257.078 1189.11 288.199 1203.07 322.83C1209.78 339.484 1214.91 356.888 1218.31 374.569C1221.68 392.081 1223.39 410.017 1223.39 427.879C1223.39 445.74 1221.68 463.676 1218.31 481.189C1214.91 498.866 1209.78 516.274 1203.07 532.927C1189.11 567.559 1168.59 598.68 1142.08 625.421L15.3934 1762.18C-11.1453 1788.95 -42.1429 1809.69 -76.7441 1823.8C-93.3679 1830.58 -110.757 1835.77 -128.43 1839.21C-145.935 1842.61 -163.864 1844.34 -181.725 1844.34C-199.587 1844.34 -217.515 1842.61 -235.02 1839.21C-252.694 1835.77 -270.083 1830.58 -286.707 1823.8C-321.308 1809.69 -352.305 1788.95 -378.844 1762.18L-1505.54 625.414C-1532.04 598.672 -1552.56 567.551 -1566.52 532.92C-1573.23 516.266 -1578.36 498.862 -1581.76 481.181C-1585.13 463.669 -1586.84 445.733 -1586.84 427.871C-1586.84 410.01 -1585.13 392.074 -1581.76 374.561C-1578.36 356.884 -1573.23 339.476 -1566.52 322.823C-1552.56 288.191 -1532.04 257.07 -1505.54 230.329L-378.844 -906.427C-352.309 -933.202 -321.308 -953.936 -286.707 -968.051C-270.083 -974.831 -252.694 -980.018 -235.02 -983.456C-217.515 -986.865 -199.587 -988.59 -181.725 -988.59ZM-181.725 -990.09C-253.527 -990.09 -325.328 -962.554 -379.909 -907.481L-1506.6 229.279C-1615.59 339.244 -1615.59 516.506 -1506.6 626.471L-379.909 1763.23C-325.324 1818.31 -253.527 1845.84 -181.725 1845.84C-109.924 1845.84 -38.1229 1818.31 16.4584 1763.23L1143.15 626.471C1252.14 516.506 1252.14 339.244 1143.15 229.279L16.4584 -907.485C-38.1266 -962.557 -109.928 -990.094 -181.725 -990.094V-990.09Z"/>
+    <path d="M-177.619 -1347.45C-156.379 -1347.45 -135.053 -1345.39 -114.236 -1341.34C-93.2177 -1337.25 -72.5364 -1331.08 -52.7627 -1323.01C-32.6213 -1314.8 -13.2264 -1304.52 4.88977 -1292.48C23.4823 -1280.11 40.9536 -1265.73 56.8162 -1249.72L1486.57 192.811C1502.43 208.804 1516.67 226.377 1528.9 245.044C1540.83 263.24 1551.01 282.698 1559.14 302.877C1567.13 322.692 1573.23 343.407 1577.28 364.444C1581.3 385.283 1583.33 406.625 1583.33 427.88C1583.33 449.135 1581.3 470.476 1577.28 491.315C1573.23 512.352 1567.13 533.063 1559.14 552.882C1551.01 573.061 1540.84 592.516 1528.9 610.715C1516.67 629.382 1502.43 646.955 1486.57 662.948L56.8198 2105.48C40.9573 2121.48 23.4861 2135.87 4.89355 2148.23C-13.2227 2160.28 -32.6177 2170.55 -52.759 2178.77C-72.5289 2186.84 -93.2103 2193 -114.233 2197.09C-135.053 2201.15 -156.375 2203.2 -177.615 2203.2C-198.855 2203.2 -220.181 2201.15 -240.998 2197.09C-262.016 2193 -282.698 2186.84 -302.471 2178.77C-322.613 2170.55 -342.008 2160.28 -360.124 2148.23C-378.717 2135.87 -396.188 2121.48 -412.05 2105.48L-1841.81 662.941C-1857.66 646.947 -1871.9 629.375 -1884.14 610.707C-1896.07 592.512 -1906.24 573.053 -1914.38 552.875C-1922.36 533.059 -1928.47 512.345 -1932.52 491.307C-1936.53 470.468 -1938.57 449.127 -1938.57 427.872C-1938.57 406.617 -1936.53 385.276 -1932.52 364.437C-1928.47 343.399 -1922.36 322.688 -1914.38 302.87C-1906.24 282.691 -1896.07 263.236 -1884.14 245.037C-1871.9 226.37 -1857.66 208.797 -1841.81 192.803L-412.054 -1249.73C-396.192 -1265.73 -378.72 -1280.12 -360.128 -1292.48C-342.011 -1304.53 -322.617 -1314.8 -302.475 -1323.02C-282.705 -1331.08 -262.024 -1337.25 -241.001 -1341.34C-220.182 -1345.39 -198.859 -1347.45 -177.619 -1347.45M-177.619 -1348.95C-262.939 -1348.95 -348.259 -1316.23 -413.119 -1250.79L-1842.88 191.757C-1972.46 322.501 -1972.46 533.255 -1842.88 663.998L-413.119 2106.54C-348.259 2171.98 -262.939 2204.7 -177.619 2204.7C-92.299 2204.7 -6.979 2171.98 57.8811 2106.54L1487.64 663.995C1617.22 533.251 1617.22 322.497 1487.64 191.753L57.8848 -1250.78C-6.97534 -1316.22 -92.2953 -1348.95 -177.615 -1348.95L-177.619 -1348.95Z"/>
   </g>
 </svg>`;
-const arrowUp = `<svg width="1440" height="810" viewBox="0 0 1440 810" fill="none" xmlns="http://www.w3.org/2000/svg"
-  class="waves-of-progress">
-  <path d="M1440 0H0V810H1440V0Z" fill="var(--df-waves-of-progress-bg-color)" />
-  <mask id="mask0_3040_1593" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="1440"
-    height="810">
-    <path d="M1440 0H0V810H1440V0Z" fill="white" />
-  </mask>
-  <g mask="url(#mask0_3040_1593)">
-    <g opacity="0.5">
-      <path
-        d="M719.999 657.957C734.969 657.957 749.039 663.785 759.626 674.371L894.078 808.823C904.661 819.41 910.492 833.48 910.492 848.45C910.492 863.42 904.664 877.49 894.078 888.076L759.626 1022.53C749.043 1033.11 734.969 1038.94 719.999 1038.94C705.029 1038.94 690.959 1033.11 680.373 1022.53L545.921 888.076C535.338 877.493 529.507 863.42 529.507 848.45C529.507 833.48 535.334 819.41 545.921 808.823L680.373 674.371C690.956 663.788 705.029 657.957 719.999 657.957ZM719.999 656.457C705.273 656.457 690.547 662.075 679.312 673.31L544.859 807.762C522.389 830.232 522.389 866.663 544.859 889.133L679.312 1023.59C690.547 1034.82 705.273 1040.44 719.999 1040.44C734.725 1040.44 749.452 1034.82 760.687 1023.59L895.139 889.133C917.609 866.663 917.609 830.232 895.139 807.762L760.687 673.31C749.452 662.075 734.725 656.457 719.999 656.457Z"
-        fill="var(--df-waves-of-progress-line-color)" />
-    </g>
-    <g opacity="0.5">
-      <path
-        d="M720 373.762C732.367 373.762 744.423 376.109 755.831 380.733C767.643 385.522 778.241 392.56 787.331 401.65L1166.8 781.117C1175.89 790.207 1182.93 800.804 1187.71 812.617C1192.34 824.024 1194.69 836.08 1194.69 848.448C1194.69 860.815 1192.34 872.872 1187.71 884.279C1182.93 896.092 1175.89 906.689 1166.8 915.779L787.331 1295.25C778.241 1304.34 767.643 1311.37 755.831 1316.16C744.423 1320.79 732.367 1323.13 720 1323.13C707.632 1323.13 695.576 1320.79 684.168 1316.16C672.356 1311.37 661.758 1304.34 652.668 1295.25L273.202 915.779C264.112 906.689 257.073 896.092 252.285 884.279C247.657 872.872 245.313 860.815 245.313 848.448C245.313 836.08 247.661 824.024 252.285 812.617C257.073 800.804 264.112 790.207 273.202 781.117L652.668 401.65C661.758 392.56 672.356 385.522 684.168 380.733C695.576 376.105 707.632 373.762 720 373.762ZM720 372.262C695.246 372.262 670.492 381.704 651.607 400.589L272.141 780.055C234.367 817.829 234.367 879.07 272.141 916.84L651.607 1296.31C670.492 1315.19 695.246 1324.63 720 1324.63C744.753 1324.63 769.507 1315.19 788.392 1296.31L1167.86 916.84C1205.63 879.067 1205.63 817.825 1167.86 780.055L788.392 400.589C769.507 381.704 744.753 372.262 720 372.262Z"
-        fill="var(--df-waves-of-progress-line-color)" />
-    </g>
-    <g opacity="0.5">
-      <path
-        d="M720 89.5645C737.456 89.5645 754.474 92.8757 770.576 99.4044C787.249 106.166 802.207 116.099 815.036 128.928L1439.52 753.408C1452.35 766.241 1462.28 781.199 1469.04 797.868C1475.57 813.971 1478.88 830.988 1478.88 848.444C1478.88 865.901 1475.57 882.918 1469.04 899.021C1462.28 915.693 1452.34 930.652 1439.52 943.481L815.036 1567.96C802.207 1580.79 787.245 1590.72 770.576 1597.48C754.474 1604.01 737.456 1607.32 720 1607.32C702.544 1607.32 685.526 1604.01 669.424 1597.48C652.751 1590.72 637.792 1580.79 624.964 1567.96L0.483578 943.481C-12.3489 930.648 -22.2789 915.689 -29.0402 899.021C-35.5689 882.918 -38.8802 865.901 -38.8802 848.444C-38.8802 830.988 -35.5689 813.971 -29.0402 797.868C-22.2789 781.196 -12.3452 766.237 0.483578 753.408L624.964 128.928C637.796 116.096 652.755 106.166 669.424 99.4044C685.526 92.8757 702.544 89.5645 720 89.5645ZM720 88.0645C685.219 88.0645 650.437 101.332 623.898 127.871L-0.581409 752.351C-53.6552 805.424 -53.6552 891.476 -0.581409 944.549L623.898 1569.03C650.437 1595.57 685.219 1608.84 720 1608.84C754.781 1608.84 789.562 1595.57 816.101 1569.03L1440.58 944.549C1493.65 891.476 1493.65 805.424 1440.58 752.351L816.101 127.871C789.562 101.332 754.781 88.0645 720 88.0645Z"
-        fill="var(--df-waves-of-progress-line-color)" />
-    </g>
-    <g opacity="0.5">
-      <path
-        d="M719.999 -194.633C742.544 -194.633 764.523 -190.358 785.32 -181.92C806.853 -173.19 826.173 -160.358 842.744 -143.787L1712.24 725.707C1728.81 742.278 1741.64 761.598 1750.37 783.131C1758.81 803.928 1763.08 825.907 1763.08 848.452C1763.08 870.997 1758.81 892.976 1750.37 913.773C1741.64 935.306 1728.81 954.626 1712.24 971.197L842.744 1840.69C826.173 1857.26 806.853 1870.09 785.32 1878.82C764.523 1887.26 742.544 1891.53 719.999 1891.53C697.454 1891.53 675.475 1887.26 654.678 1878.82C633.145 1870.09 613.825 1857.26 597.254 1840.69L-272.24 971.197C-288.811 954.626 -301.64 935.306 -310.373 913.773C-318.807 892.976 -323.086 870.997 -323.086 848.452C-323.086 825.907 -318.811 803.928 -310.373 783.131C-301.643 761.598 -288.811 742.278 -272.24 725.707L597.254 -143.79C613.825 -160.362 633.145 -173.19 654.678 -181.924C675.475 -190.358 697.454 -194.637 719.999 -194.637M719.999 -196.137C675.19 -196.137 630.382 -179.044 596.193 -144.855L-273.301 724.642C-341.678 793.02 -341.678 903.877 -273.301 972.255L596.193 1841.75C630.382 1875.94 675.19 1893.03 719.999 1893.03C764.808 1893.03 809.617 1875.94 843.805 1841.75L1713.3 972.255C1781.68 903.877 1781.68 793.02 1713.3 724.642L843.809 -144.852C809.62 -179.04 764.812 -196.133 720.003 -196.133L719.999 -196.137Z"
-        fill="var(--df-waves-of-progress-line-color)" />
-    </g>
-    <g opacity="0.5">
-      <path
-        d="M720 -478.83C733.616 -478.83 747.288 -477.521 760.638 -474.934C774.116 -472.324 787.38 -468.394 800.066 -463.249C826.458 -452.546 850.14 -436.819 870.45 -416.509L1984.96 697.999C2005.27 718.309 2020.99 741.99 2031.7 768.382C2036.84 781.069 2040.77 794.332 2043.38 807.81C2045.97 821.16 2047.28 834.832 2047.28 848.449C2047.28 862.065 2045.97 875.737 2043.38 889.087C2040.77 902.565 2036.84 915.829 2031.7 928.515C2020.99 954.907 2005.27 978.589 1984.96 998.902L870.45 2113.41C850.14 2133.72 826.458 2149.45 800.066 2160.15C787.38 2165.29 774.116 2169.22 760.638 2171.83C747.288 2174.42 733.616 2175.73 720 2175.73C706.383 2175.73 692.711 2174.42 679.361 2171.83C665.883 2169.22 652.62 2165.29 639.933 2160.15C613.541 2149.45 589.859 2133.72 569.546 2113.41L-544.962 998.902C-565.272 978.592 -580.999 954.911 -591.702 928.515C-596.847 915.829 -600.777 902.565 -603.387 889.087C-605.97 875.737 -607.283 862.065 -607.283 848.449C-607.283 834.832 -605.974 821.16 -603.387 807.81C-600.777 794.332 -596.847 781.069 -591.702 768.382C-580.999 741.99 -565.272 718.309 -544.962 697.999L569.55 -416.509C589.86 -436.819 613.541 -452.546 639.937 -463.249C652.623 -468.394 665.887 -472.324 679.365 -474.934C692.715 -477.518 706.387 -478.83 720.003 -478.83M720.003 -480.33C665.167 -480.33 610.331 -459.409 568.488 -417.57L-546.019 696.937C-629.697 780.615 -629.697 916.286 -546.019 999.964L568.488 2114.47C610.327 2156.31 665.163 2177.23 720.003 2177.23C774.843 2177.23 829.676 2156.31 871.518 2114.47L1986.03 999.964C2069.7 916.286 2069.7 780.615 1986.03 696.937L871.515 -417.57C829.676 -459.409 774.84 -480.33 720 -480.33H720.003Z"
-        fill="var(--df-waves-of-progress-line-color)" />
-    </g>
+const arrowUp = `<svg width="1440" height="810" viewBox="0 0 1440 810" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g opacity="0.5" fill="black">
+    <path d="M719.999 657.957C734.969 657.957 749.039 663.785 759.626 674.371L894.078 808.823C904.661 819.41 910.492 833.48 910.492 848.45C910.492 863.42 904.664 877.49 894.078 888.076L759.626 1022.53C749.043 1033.11 734.969 1038.94 719.999 1038.94C705.029 1038.94 690.959 1033.11 680.373 1022.53L545.921 888.076C535.338 877.493 529.507 863.42 529.507 848.45C529.507 833.48 535.334 819.41 545.921 808.823L680.373 674.371C690.956 663.788 705.029 657.957 719.999 657.957ZM719.999 656.457C705.273 656.457 690.547 662.075 679.312 673.31L544.859 807.762C522.389 830.232 522.389 866.663 544.859 889.133L679.312 1023.59C690.547 1034.82 705.273 1040.44 719.999 1040.44C734.725 1040.44 749.452 1034.82 760.687 1023.59L895.139 889.133C917.609 866.663 917.609 830.232 895.139 807.762L760.687 673.31C749.452 662.075 734.725 656.457 719.999 656.457Z"/>
+    <path d="M720 373.762C732.367 373.762 744.423 376.109 755.831 380.733C767.643 385.522 778.241 392.56 787.331 401.65L1166.8 781.117C1175.89 790.207 1182.93 800.804 1187.71 812.617C1192.34 824.024 1194.69 836.08 1194.69 848.448C1194.69 860.815 1192.34 872.872 1187.71 884.279C1182.93 896.092 1175.89 906.689 1166.8 915.779L787.331 1295.25C778.241 1304.34 767.643 1311.37 755.831 1316.16C744.423 1320.79 732.367 1323.13 720 1323.13C707.632 1323.13 695.576 1320.79 684.168 1316.16C672.356 1311.37 661.758 1304.34 652.668 1295.25L273.202 915.779C264.112 906.689 257.073 896.092 252.285 884.279C247.657 872.872 245.313 860.815 245.313 848.448C245.313 836.08 247.661 824.024 252.285 812.617C257.073 800.804 264.112 790.207 273.202 781.117L652.668 401.65C661.758 392.56 672.356 385.522 684.168 380.733C695.576 376.105 707.632 373.762 720 373.762ZM720 372.262C695.246 372.262 670.492 381.704 651.607 400.589L272.141 780.055C234.367 817.829 234.367 879.07 272.141 916.84L651.607 1296.31C670.492 1315.19 695.246 1324.63 720 1324.63C744.753 1324.63 769.507 1315.19 788.392 1296.31L1167.86 916.84C1205.63 879.067 1205.63 817.825 1167.86 780.055L788.392 400.589C769.507 381.704 744.753 372.262 720 372.262Z"/>
+    <path d="M720 89.5645C737.456 89.5645 754.474 92.8757 770.576 99.4044C787.249 106.166 802.207 116.099 815.036 128.928L1439.52 753.408C1452.35 766.241 1462.28 781.199 1469.04 797.868C1475.57 813.971 1478.88 830.988 1478.88 848.444C1478.88 865.901 1475.57 882.918 1469.04 899.021C1462.28 915.693 1452.34 930.652 1439.52 943.481L815.036 1567.96C802.207 1580.79 787.245 1590.72 770.576 1597.48C754.474 1604.01 737.456 1607.32 720 1607.32C702.544 1607.32 685.526 1604.01 669.424 1597.48C652.751 1590.72 637.792 1580.79 624.964 1567.96L0.483578 943.481C-12.3489 930.648 -22.2789 915.689 -29.0402 899.021C-35.5689 882.918 -38.8802 865.901 -38.8802 848.444C-38.8802 830.988 -35.5689 813.971 -29.0402 797.868C-22.2789 781.196 -12.3452 766.237 0.483578 753.408L624.964 128.928C637.796 116.096 652.755 106.166 669.424 99.4044C685.526 92.8757 702.544 89.5645 720 89.5645ZM720 88.0645C685.219 88.0645 650.437 101.332 623.898 127.871L-0.581409 752.351C-53.6552 805.424 -53.6552 891.476 -0.581409 944.549L623.898 1569.03C650.437 1595.57 685.219 1608.84 720 1608.84C754.781 1608.84 789.562 1595.57 816.101 1569.03L1440.58 944.549C1493.65 891.476 1493.65 805.424 1440.58 752.351L816.101 127.871C789.562 101.332 754.781 88.0645 720 88.0645Z"/>
+    <path d="M719.999 -194.633C742.544 -194.633 764.523 -190.358 785.32 -181.92C806.853 -173.19 826.173 -160.358 842.744 -143.787L1712.24 725.707C1728.81 742.278 1741.64 761.598 1750.37 783.131C1758.81 803.928 1763.08 825.907 1763.08 848.452C1763.08 870.997 1758.81 892.976 1750.37 913.773C1741.64 935.306 1728.81 954.626 1712.24 971.197L842.744 1840.69C826.173 1857.26 806.853 1870.09 785.32 1878.82C764.523 1887.26 742.544 1891.53 719.999 1891.53C697.454 1891.53 675.475 1887.26 654.678 1878.82C633.145 1870.09 613.825 1857.26 597.254 1840.69L-272.24 971.197C-288.811 954.626 -301.64 935.306 -310.373 913.773C-318.807 892.976 -323.086 870.997 -323.086 848.452C-323.086 825.907 -318.811 803.928 -310.373 783.131C-301.643 761.598 -288.811 742.278 -272.24 725.707L597.254 -143.79C613.825 -160.362 633.145 -173.19 654.678 -181.924C675.475 -190.358 697.454 -194.637 719.999 -194.637M719.999 -196.137C675.19 -196.137 630.382 -179.044 596.193 -144.855L-273.301 724.642C-341.678 793.02 -341.678 903.877 -273.301 972.255L596.193 1841.75C630.382 1875.94 675.19 1893.03 719.999 1893.03C764.808 1893.03 809.617 1875.94 843.805 1841.75L1713.3 972.255C1781.68 903.877 1781.68 793.02 1713.3 724.642L843.809 -144.852C809.62 -179.04 764.812 -196.133 720.003 -196.133L719.999 -196.137Z"/>
+    <path d="M720 -478.83C733.616 -478.83 747.288 -477.521 760.638 -474.934C774.116 -472.324 787.38 -468.394 800.066 -463.249C826.458 -452.546 850.14 -436.819 870.45 -416.509L1984.96 697.999C2005.27 718.309 2020.99 741.99 2031.7 768.382C2036.84 781.069 2040.77 794.332 2043.38 807.81C2045.97 821.16 2047.28 834.832 2047.28 848.449C2047.28 862.065 2045.97 875.737 2043.38 889.087C2040.77 902.565 2036.84 915.829 2031.7 928.515C2020.99 954.907 2005.27 978.589 1984.96 998.902L870.45 2113.41C850.14 2133.72 826.458 2149.45 800.066 2160.15C787.38 2165.29 774.116 2169.22 760.638 2171.83C747.288 2174.42 733.616 2175.73 720 2175.73C706.383 2175.73 692.711 2174.42 679.361 2171.83C665.883 2169.22 652.62 2165.29 639.933 2160.15C613.541 2149.45 589.859 2133.72 569.546 2113.41L-544.962 998.902C-565.272 978.592 -580.999 954.911 -591.702 928.515C-596.847 915.829 -600.777 902.565 -603.387 889.087C-605.97 875.737 -607.283 862.065 -607.283 848.449C-607.283 834.832 -605.974 821.16 -603.387 807.81C-600.777 794.332 -596.847 781.069 -591.702 768.382C-580.999 741.99 -565.272 718.309 -544.962 697.999L569.55 -416.509C589.86 -436.819 613.541 -452.546 639.937 -463.249C652.623 -468.394 665.887 -472.324 679.365 -474.934C692.715 -477.518 706.387 -478.83 720.003 -478.83M720.003 -480.33C665.167 -480.33 610.331 -459.409 568.488 -417.57L-546.019 696.937C-629.697 780.615 -629.697 916.286 -546.019 999.964L568.488 2114.47C610.327 2156.31 665.163 2177.23 720.003 2177.23C774.843 2177.23 829.676 2156.31 871.518 2114.47L1986.03 999.964C2069.7 916.286 2069.7 780.615 1986.03 696.937L871.515 -417.57C829.676 -459.409 774.84 -480.33 720 -480.33H720.003Z"/>
   </g>
 </svg>`;
 const circleDiagonal = `<svg width="1440" height="810" viewBox="0 0 1440 810" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M1440 0H0V810H1440V0Z" fill="var(--df-waves-of-progress-bg-color)" />
-  <mask id="mask0_3174_5204" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="1440"
-    height="810">
-    <path d="M1440 0H0V810H1440V0Z" fill="white" />
-  </mask>
-  <g mask="url(#mask0_3174_5204)">
-    <g opacity="0.5">
-      <path
-        d="M-11.2496 -175.631C11.4491 -175.631 33.4691 -171.187 54.1954 -162.42C74.2166 -153.952 92.1979 -141.828 107.64 -126.386C123.083 -110.943 135.207 -92.9621 143.674 -72.9408C152.442 -52.2146 156.885 -30.1946 156.885 -7.49585C156.885 15.2029 152.442 37.2229 143.674 57.9491C135.207 77.9704 123.083 95.9517 107.64 111.394C92.1979 126.837 74.2166 138.96 54.1954 147.428C33.4691 156.195 11.4491 160.639 -11.2496 160.639C-33.9484 160.639 -55.9684 156.195 -76.6946 147.428C-96.7159 138.96 -114.697 126.837 -130.14 111.394C-145.582 95.9517 -157.706 77.9704 -166.173 57.9491C-174.941 37.2229 -179.385 15.2029 -179.385 -7.49585C-179.385 -30.1946 -174.941 -52.2146 -166.173 -72.9408C-157.706 -92.9621 -145.582 -110.943 -130.14 -126.386C-114.697 -141.828 -96.7159 -153.952 -76.6946 -162.42C-55.9684 -171.187 -33.9484 -175.631 -11.2496 -175.631ZM-11.2496 -177.131C-104.936 -177.131 -180.881 -101.182 -180.881 -7.4996C-180.881 86.1829 -104.936 162.132 -11.2496 162.132C82.4366 162.132 158.382 86.1866 158.382 -7.4996C158.382 -101.186 82.4366 -177.131 -11.2496 -177.131Z"
-        fill="var(--df-waves-of-progress-line-color)" />
-    </g>
-    <g opacity="0.5">
-      <path
-        d="M-33.7277 -324.273C3.13483 -324.273 39.9748 -321.236 75.7648 -315.243C110.644 -309.405 144.952 -300.69 177.735 -289.342C209.921 -278.205 240.96 -264.416 269.996 -248.366C298.751 -232.47 325.789 -214.218 350.359 -194.111C374.925 -174.011 397.226 -151.893 416.644 -128.377C436.241 -104.64 453.075 -79.2672 466.672 -52.9609C480.517 -26.1747 491.152 1.85281 498.277 30.3491C505.59 59.584 509.295 89.6703 509.295 119.779C509.295 149.888 505.586 179.974 498.277 209.209C491.152 237.702 480.517 265.733 466.672 292.519C453.075 318.825 436.241 344.198 416.644 367.935C397.226 391.452 374.925 413.569 350.359 433.669C325.789 453.773 298.747 472.028 269.996 487.924C240.96 503.974 209.921 517.759 177.735 528.9C144.952 540.248 110.644 548.959 75.7648 554.802C39.9711 560.794 3.13483 563.832 -33.7277 563.832C-70.5902 563.832 -107.43 560.794 -143.22 554.802C-178.099 548.963 -212.408 540.248 -245.19 528.9C-277.376 517.763 -308.415 503.978 -337.451 487.924C-366.206 472.028 -393.244 453.777 -417.814 433.669C-442.38 413.569 -464.681 391.452 -484.099 367.935C-503.696 344.198 -520.53 318.825 -534.128 292.519C-547.973 265.733 -558.608 237.705 -565.733 209.209C-573.045 179.974 -576.75 149.888 -576.75 119.779C-576.75 89.6703 -573.041 59.584 -565.733 30.3491C-558.608 1.85654 -547.973 -26.1747 -534.128 -52.9609C-520.53 -79.2672 -503.696 -104.64 -484.099 -128.377C-464.681 -151.893 -442.38 -174.011 -417.814 -194.111C-393.244 -214.215 -366.203 -232.47 -337.451 -248.366C-308.415 -264.416 -277.376 -278.201 -245.19 -289.342C-212.408 -300.69 -178.099 -309.401 -143.22 -315.243C-107.426 -321.236 -70.5902 -324.273 -33.7277 -324.273ZM-33.7277 -325.773C-334.463 -325.773 -578.254 -126.292 -578.254 119.779C-578.254 365.85 -334.463 565.328 -33.7277 565.328C267.007 565.328 510.799 365.847 510.799 119.775C510.799 -126.296 267.004 -325.773 -33.7277 -325.773Z"
-        fill="var(--df-waves-of-progress-line-color)" />
-    </g>
-    <g opacity="0.5">
-      <path
-        d="M-56.2076 -472.916C6.09485 -472.916 68.3561 -467.992 128.851 -458.276C187.805 -448.811 245.791 -434.685 301.201 -416.295C355.602 -398.239 408.069 -375.892 457.149 -349.875C505.756 -324.109 551.461 -294.517 592.996 -261.922C634.524 -229.335 672.226 -193.477 705.053 -155.347C738.188 -116.861 766.647 -75.716 789.639 -33.0635C813.05 10.3727 831.031 55.8227 843.08 102.03C855.443 149.438 861.71 198.229 861.71 247.054C861.71 295.879 855.44 344.67 843.08 392.078C831.031 438.285 813.05 483.735 789.639 527.171C766.647 569.828 738.188 610.969 705.053 649.455C672.226 687.585 634.524 723.443 592.996 756.03C551.461 788.625 505.752 818.216 457.149 843.983C408.069 870 355.602 892.347 301.201 910.403C245.791 928.793 187.805 942.919 128.851 952.384C68.3561 962.096 6.09485 967.024 -56.2076 967.024C-118.51 967.024 -180.771 962.1 -241.266 952.384C-300.22 942.919 -358.206 928.793 -413.616 910.403C-468.018 892.347 -520.484 870 -569.564 843.983C-618.171 818.216 -663.876 788.625 -705.411 756.03C-746.939 723.443 -784.641 687.585 -817.469 649.455C-850.604 610.969 -879.063 569.824 -902.054 527.171C-925.465 483.735 -943.446 438.285 -955.495 392.078C-967.859 344.67 -974.125 295.879 -974.125 247.054C-974.125 198.229 -967.855 149.438 -955.495 102.03C-943.446 55.8227 -925.465 10.3727 -902.054 -33.0635C-879.063 -75.7198 -850.604 -116.861 -817.469 -155.347C-784.641 -193.477 -746.939 -229.335 -705.411 -261.922C-663.876 -294.514 -618.168 -324.109 -569.564 -349.875C-520.484 -375.892 -468.018 -398.239 -413.616 -416.295C-358.206 -434.685 -300.22 -448.811 -241.266 -458.276C-180.771 -467.989 -118.51 -472.916 -56.2076 -472.916ZM-56.2076 -474.416C-563.991 -474.416 -975.629 -151.402 -975.629 247.054C-975.629 645.51 -563.991 968.52 -56.2076 968.52C451.576 968.52 863.214 645.506 863.214 247.05C863.214 -151.406 451.576 -474.416 -56.2076 -474.416Z"
-        fill="var(--df-waves-of-progress-line-color)" />
-    </g>
-    <g opacity="0.5">
-      <path
-        d="M-78.6857 -621.559C9.0531 -621.559 96.7394 -614.749 181.932 -601.312C264.957 -588.221 346.621 -568.687 424.658 -543.251C501.274 -518.28 575.168 -487.372 644.288 -451.387C712.748 -415.747 777.121 -374.82 835.621 -329.741C894.113 -284.666 947.217 -235.069 993.454 -182.329C1040.13 -129.09 1080.21 -72.1799 1112.6 -13.1736C1145.58 46.9127 1170.91 109.789 1187.88 173.708C1196.51 206.201 1203.1 239.456 1207.46 272.55C1211.88 306.131 1214.13 340.376 1214.13 374.333C1214.13 408.289 1211.89 442.534 1207.46 476.115C1203.1 509.209 1196.51 542.464 1187.88 574.958C1170.91 638.876 1145.58 701.756 1112.6 761.839C1080.22 820.841 1040.13 877.755 993.454 930.994C947.217 983.734 894.113 1033.33 835.621 1078.41C777.121 1123.49 712.748 1164.41 644.288 1200.05C575.168 1236.04 501.274 1266.95 424.658 1291.92C346.621 1317.35 264.957 1336.89 181.932 1349.98C96.7394 1363.41 9.05676 1370.22 -78.6857 1370.22C-166.428 1370.22 -254.111 1363.41 -339.303 1349.98C-422.328 1336.89 -503.992 1317.35 -582.029 1291.92C-658.646 1266.95 -732.539 1236.04 -801.659 1200.05C-870.119 1164.41 -934.492 1123.49 -992.992 1078.41C-1051.48 1033.33 -1104.59 983.734 -1150.83 930.994C-1197.5 877.755 -1237.59 820.845 -1269.97 761.839C-1302.96 701.753 -1328.28 638.876 -1345.26 574.958C-1353.88 542.464 -1360.47 509.209 -1364.83 476.115C-1369.26 442.534 -1371.5 408.289 -1371.5 374.333C-1371.5 340.376 -1369.26 306.131 -1364.83 272.55C-1360.47 239.456 -1353.88 206.201 -1345.26 173.708C-1328.28 109.789 -1302.95 46.9089 -1269.97 -13.1736C-1237.59 -72.1761 -1197.5 -129.09 -1150.83 -182.329C-1104.59 -235.069 -1051.48 -284.666 -992.992 -329.741C-934.492 -374.82 -870.119 -415.747 -801.659 -451.387C-732.539 -487.372 -658.646 -518.28 -582.029 -543.251C-503.992 -568.687 -422.328 -588.221 -339.303 -601.312C-254.111 -614.745 -166.428 -621.559 -78.6857 -621.559ZM-78.6857 -623.059C-793.518 -623.059 -1373 -176.512 -1373 374.329C-1373 925.17 -793.518 1371.72 -78.6857 1371.72C636.147 1371.72 1215.63 925.17 1215.63 374.329C1215.63 -176.512 636.143 -623.059 -78.6857 -623.059Z"
-        fill="var(--df-waves-of-progress-line-color)" />
-    </g>
+  <g opacity="0.5" fill="black">
+    <path d="M-11.2496 -175.631C11.4491 -175.631 33.4691 -171.187 54.1954 -162.42C74.2166 -153.952 92.1979 -141.828 107.64 -126.386C123.083 -110.943 135.207 -92.9621 143.674 -72.9408C152.442 -52.2146 156.885 -30.1946 156.885 -7.49585C156.885 15.2029 152.442 37.2229 143.674 57.9491C135.207 77.9704 123.083 95.9517 107.64 111.394C92.1979 126.837 74.2166 138.96 54.1954 147.428C33.4691 156.195 11.4491 160.639 -11.2496 160.639C-33.9484 160.639 -55.9684 156.195 -76.6946 147.428C-96.7159 138.96 -114.697 126.837 -130.14 111.394C-145.582 95.9517 -157.706 77.9704 -166.173 57.9491C-174.941 37.2229 -179.385 15.2029 -179.385 -7.49585C-179.385 -30.1946 -174.941 -52.2146 -166.173 -72.9408C-157.706 -92.9621 -145.582 -110.943 -130.14 -126.386C-114.697 -141.828 -96.7159 -153.952 -76.6946 -162.42C-55.9684 -171.187 -33.9484 -175.631 -11.2496 -175.631ZM-11.2496 -177.131C-104.936 -177.131 -180.881 -101.182 -180.881 -7.4996C-180.881 86.1829 -104.936 162.132 -11.2496 162.132C82.4366 162.132 158.382 86.1866 158.382 -7.4996C158.382 -101.186 82.4366 -177.131 -11.2496 -177.131Z"/>
+    <path d="M-33.7277 -324.273C3.13483 -324.273 39.9748 -321.236 75.7648 -315.243C110.644 -309.405 144.952 -300.69 177.735 -289.342C209.921 -278.205 240.96 -264.416 269.996 -248.366C298.751 -232.47 325.789 -214.218 350.359 -194.111C374.925 -174.011 397.226 -151.893 416.644 -128.377C436.241 -104.64 453.075 -79.2672 466.672 -52.9609C480.517 -26.1747 491.152 1.85281 498.277 30.3491C505.59 59.584 509.295 89.6703 509.295 119.779C509.295 149.888 505.586 179.974 498.277 209.209C491.152 237.702 480.517 265.733 466.672 292.519C453.075 318.825 436.241 344.198 416.644 367.935C397.226 391.452 374.925 413.569 350.359 433.669C325.789 453.773 298.747 472.028 269.996 487.924C240.96 503.974 209.921 517.759 177.735 528.9C144.952 540.248 110.644 548.959 75.7648 554.802C39.9711 560.794 3.13483 563.832 -33.7277 563.832C-70.5902 563.832 -107.43 560.794 -143.22 554.802C-178.099 548.963 -212.408 540.248 -245.19 528.9C-277.376 517.763 -308.415 503.978 -337.451 487.924C-366.206 472.028 -393.244 453.777 -417.814 433.669C-442.38 413.569 -464.681 391.452 -484.099 367.935C-503.696 344.198 -520.53 318.825 -534.128 292.519C-547.973 265.733 -558.608 237.705 -565.733 209.209C-573.045 179.974 -576.75 149.888 -576.75 119.779C-576.75 89.6703 -573.041 59.584 -565.733 30.3491C-558.608 1.85654 -547.973 -26.1747 -534.128 -52.9609C-520.53 -79.2672 -503.696 -104.64 -484.099 -128.377C-464.681 -151.893 -442.38 -174.011 -417.814 -194.111C-393.244 -214.215 -366.203 -232.47 -337.451 -248.366C-308.415 -264.416 -277.376 -278.201 -245.19 -289.342C-212.408 -300.69 -178.099 -309.401 -143.22 -315.243C-107.426 -321.236 -70.5902 -324.273 -33.7277 -324.273ZM-33.7277 -325.773C-334.463 -325.773 -578.254 -126.292 -578.254 119.779C-578.254 365.85 -334.463 565.328 -33.7277 565.328C267.007 565.328 510.799 365.847 510.799 119.775C510.799 -126.296 267.004 -325.773 -33.7277 -325.773Z"/>
+    <path d="M-56.2076 -472.916C6.09485 -472.916 68.3561 -467.992 128.851 -458.276C187.805 -448.811 245.791 -434.685 301.201 -416.295C355.602 -398.239 408.069 -375.892 457.149 -349.875C505.756 -324.109 551.461 -294.517 592.996 -261.922C634.524 -229.335 672.226 -193.477 705.053 -155.347C738.188 -116.861 766.647 -75.716 789.639 -33.0635C813.05 10.3727 831.031 55.8227 843.08 102.03C855.443 149.438 861.71 198.229 861.71 247.054C861.71 295.879 855.44 344.67 843.08 392.078C831.031 438.285 813.05 483.735 789.639 527.171C766.647 569.828 738.188 610.969 705.053 649.455C672.226 687.585 634.524 723.443 592.996 756.03C551.461 788.625 505.752 818.216 457.149 843.983C408.069 870 355.602 892.347 301.201 910.403C245.791 928.793 187.805 942.919 128.851 952.384C68.3561 962.096 6.09485 967.024 -56.2076 967.024C-118.51 967.024 -180.771 962.1 -241.266 952.384C-300.22 942.919 -358.206 928.793 -413.616 910.403C-468.018 892.347 -520.484 870 -569.564 843.983C-618.171 818.216 -663.876 788.625 -705.411 756.03C-746.939 723.443 -784.641 687.585 -817.469 649.455C-850.604 610.969 -879.063 569.824 -902.054 527.171C-925.465 483.735 -943.446 438.285 -955.495 392.078C-967.859 344.67 -974.125 295.879 -974.125 247.054C-974.125 198.229 -967.855 149.438 -955.495 102.03C-943.446 55.8227 -925.465 10.3727 -902.054 -33.0635C-879.063 -75.7198 -850.604 -116.861 -817.469 -155.347C-784.641 -193.477 -746.939 -229.335 -705.411 -261.922C-663.876 -294.514 -618.168 -324.109 -569.564 -349.875C-520.484 -375.892 -468.018 -398.239 -413.616 -416.295C-358.206 -434.685 -300.22 -448.811 -241.266 -458.276C-180.771 -467.989 -118.51 -472.916 -56.2076 -472.916ZM-56.2076 -474.416C-563.991 -474.416 -975.629 -151.402 -975.629 247.054C-975.629 645.51 -563.991 968.52 -56.2076 968.52C451.576 968.52 863.214 645.506 863.214 247.05C863.214 -151.406 451.576 -474.416 -56.2076 -474.416Z"/>
+    <path d="M-78.6857 -621.559C9.0531 -621.559 96.7394 -614.749 181.932 -601.312C264.957 -588.221 346.621 -568.687 424.658 -543.251C501.274 -518.28 575.168 -487.372 644.288 -451.387C712.748 -415.747 777.121 -374.82 835.621 -329.741C894.113 -284.666 947.217 -235.069 993.454 -182.329C1040.13 -129.09 1080.21 -72.1799 1112.6 -13.1736C1145.58 46.9127 1170.91 109.789 1187.88 173.708C1196.51 206.201 1203.1 239.456 1207.46 272.55C1211.88 306.131 1214.13 340.376 1214.13 374.333C1214.13 408.289 1211.89 442.534 1207.46 476.115C1203.1 509.209 1196.51 542.464 1187.88 574.958C1170.91 638.876 1145.58 701.756 1112.6 761.839C1080.22 820.841 1040.13 877.755 993.454 930.994C947.217 983.734 894.113 1033.33 835.621 1078.41C777.121 1123.49 712.748 1164.41 644.288 1200.05C575.168 1236.04 501.274 1266.95 424.658 1291.92C346.621 1317.35 264.957 1336.89 181.932 1349.98C96.7394 1363.41 9.05676 1370.22 -78.6857 1370.22C-166.428 1370.22 -254.111 1363.41 -339.303 1349.98C-422.328 1336.89 -503.992 1317.35 -582.029 1291.92C-658.646 1266.95 -732.539 1236.04 -801.659 1200.05C-870.119 1164.41 -934.492 1123.49 -992.992 1078.41C-1051.48 1033.33 -1104.59 983.734 -1150.83 930.994C-1197.5 877.755 -1237.59 820.845 -1269.97 761.839C-1302.96 701.753 -1328.28 638.876 -1345.26 574.958C-1353.88 542.464 -1360.47 509.209 -1364.83 476.115C-1369.26 442.534 -1371.5 408.289 -1371.5 374.333C-1371.5 340.376 -1369.26 306.131 -1364.83 272.55C-1360.47 239.456 -1353.88 206.201 -1345.26 173.708C-1328.28 109.789 -1302.95 46.9089 -1269.97 -13.1736C-1237.59 -72.1761 -1197.5 -129.09 -1150.83 -182.329C-1104.59 -235.069 -1051.48 -284.666 -992.992 -329.741C-934.492 -374.82 -870.119 -415.747 -801.659 -451.387C-732.539 -487.372 -658.646 -518.28 -582.029 -543.251C-503.992 -568.687 -422.328 -588.221 -339.303 -601.312C-254.111 -614.745 -166.428 -621.559 -78.6857 -621.559ZM-78.6857 -623.059C-793.518 -623.059 -1373 -176.512 -1373 374.329C-1373 925.17 -793.518 1371.72 -78.6857 1371.72C636.147 1371.72 1215.63 925.17 1215.63 374.329C1215.63 -176.512 636.143 -623.059 -78.6857 -623.059Z"/>
   </g>
 </svg>`;
 const circleUp = `<svg width="1440" height="810" viewBox="0 0 1440 810" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M1440 0H0V810H1440V0Z" fill="var(--df-waves-of-progress-bg-color)" />
-  <mask id="mask0_3174_6806" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="1440"
-    height="810">
-    <path d="M1440 0H0V810H1440V0Z" fill="white" />
-  </mask>
-  <g mask="url(#mask0_3174_6806)">
-    <g opacity="0.5">
-      <path
-        d="M420.319 594.342C446.929 594.342 473.524 597.154 499.362 602.697C524.543 608.101 549.311 616.163 572.981 626.663C596.224 636.972 618.638 649.733 639.608 664.591C660.379 679.309 679.913 696.211 697.665 714.826C715.418 733.444 731.535 753.931 745.571 775.718C759.743 797.716 771.912 821.232 781.744 845.611C791.76 870.443 799.452 896.431 804.608 922.853C809.899 949.962 812.58 977.866 812.58 1005.79C812.58 1033.71 809.899 1061.61 804.608 1088.72C799.452 1115.14 791.76 1141.13 781.744 1165.97C771.912 1190.35 759.739 1213.86 745.571 1235.86C731.535 1257.65 715.418 1278.13 697.665 1296.75C679.913 1315.37 660.379 1332.27 639.608 1346.99C618.638 1361.84 596.224 1374.6 572.981 1384.91C549.311 1395.41 524.543 1403.48 499.362 1408.88C473.524 1414.43 446.929 1417.23 420.319 1417.23C393.709 1417.23 367.114 1414.42 341.277 1408.88C316.095 1403.48 291.327 1395.41 267.657 1384.91C244.414 1374.6 222 1361.84 201.03 1346.99C180.259 1332.27 160.725 1315.37 142.973 1296.75C125.22 1278.13 109.103 1257.65 95.0665 1235.86C80.8953 1213.86 68.7265 1190.34 58.894 1165.97C48.8778 1141.13 41.1865 1115.15 36.0303 1088.72C30.739 1061.61 28.0578 1033.71 28.0578 1005.79C28.0578 977.866 30.739 949.962 36.0303 922.853C41.1865 896.434 48.8778 870.447 58.894 845.611C68.7265 821.228 80.899 797.712 95.0665 775.718C109.103 753.931 125.22 733.444 142.973 714.826C160.725 696.207 180.259 679.306 201.03 664.591C222 649.733 244.414 636.972 267.657 626.663C291.327 616.163 316.095 608.101 341.277 602.697C367.114 597.151 393.709 594.342 420.319 594.342ZM420.319 592.842C202.853 592.842 26.5615 777.724 26.5615 1005.79C26.5615 1233.85 202.853 1418.73 420.319 1418.73C637.785 1418.73 814.077 1233.85 814.077 1005.79C814.077 777.724 637.785 592.842 420.319 592.842Z"
-        fill="var(--df-waves-of-progress-line-color)" />
-    </g>
-    <g opacity="0.5">
-      <path
-        d="M541.351 240.172C587.813 240.172 634.246 245.617 679.358 256.353C723.327 266.816 766.576 282.431 807.908 302.759C848.491 322.724 887.637 347.433 924.256 376.203C960.53 404.703 994.643 437.437 1025.64 473.493C1056.65 509.553 1084.8 549.232 1109.31 591.427C1134.06 634.031 1155.32 679.578 1172.5 726.802C1189.99 774.903 1203.43 825.239 1212.43 876.416C1221.67 928.927 1226.36 982.976 1226.36 1037.06C1226.36 1091.14 1221.67 1145.19 1212.43 1197.7C1203.43 1248.88 1189.99 1299.21 1172.5 1347.31C1155.32 1394.54 1134.06 1440.09 1109.31 1482.69C1084.8 1524.88 1056.65 1564.56 1025.64 1600.62C994.643 1636.68 960.53 1669.41 924.256 1697.91C887.637 1726.68 848.495 1751.4 807.908 1771.36C766.58 1791.69 723.327 1807.3 679.358 1817.76C634.246 1828.5 587.813 1833.94 541.351 1833.94C494.888 1833.94 448.456 1828.5 403.343 1817.76C359.375 1807.3 316.126 1791.69 274.793 1771.36C234.207 1751.39 195.065 1726.68 158.446 1697.91C122.172 1669.41 88.0583 1636.68 57.0571 1600.62C26.0521 1564.56 -2.09915 1524.88 -26.6129 1482.69C-51.3629 1440.09 -72.6216 1394.54 -89.7966 1347.31C-107.29 1299.21 -120.727 1248.88 -129.73 1197.7C-138.97 1145.19 -143.654 1091.14 -143.654 1037.06C-143.654 982.976 -138.97 928.927 -129.73 876.416C-120.727 825.239 -107.29 774.903 -89.7966 726.802C-72.6216 679.578 -51.3629 634.031 -26.6129 591.427C-2.09915 549.232 26.0483 509.553 57.0571 473.493C88.0583 437.437 122.172 404.707 158.446 376.203C195.065 347.433 234.207 322.721 274.793 302.759C316.122 282.431 359.375 266.816 403.343 256.353C448.456 245.617 494.888 240.172 541.351 240.172ZM541.351 238.672C162.207 238.672 -145.15 596.122 -145.15 1037.06C-145.15 1477.99 162.207 1835.44 541.351 1835.44C920.495 1835.44 1227.85 1477.99 1227.85 1037.06C1227.85 596.122 920.495 238.672 541.351 238.672Z"
-        fill="var(--df-waves-of-progress-line-color)" />
-    </g>
-    <g opacity="0.5">
-      <path
-        d="M662.386 -113.996C728.704 -113.996 794.982 -105.919 859.377 -89.9886C922.137 -74.4636 983.873 -51.2961 1042.87 -21.1311C1100.8 8.49016 1156.67 45.1539 1208.94 87.8439C1260.72 130.133 1309.41 178.699 1353.66 232.193C1397.91 285.694 1438.1 344.565 1473.08 407.171C1508.4 470.381 1538.75 537.96 1563.26 608.025C1588.23 679.388 1607.4 754.069 1620.26 829.995C1633.44 907.901 1640.13 988.088 1640.13 1068.33C1640.13 1148.57 1633.44 1228.75 1620.26 1306.66C1607.4 1382.58 1588.23 1457.27 1563.26 1528.63C1538.75 1598.69 1508.4 1666.27 1473.08 1729.48C1438.09 1792.09 1397.91 1850.96 1353.66 1904.46C1309.41 1957.96 1260.72 2006.52 1208.94 2048.81C1156.67 2091.5 1100.8 2128.16 1042.87 2157.78C983.873 2187.95 922.137 2211.12 859.377 2226.64C794.982 2242.57 728.704 2250.65 662.386 2250.65C596.067 2250.65 529.789 2242.57 465.394 2226.64C402.634 2211.12 340.898 2187.95 281.903 2157.78C223.973 2128.16 168.098 2091.5 115.831 2048.81C64.0544 2006.52 15.3644 1957.95 -28.8894 1904.46C-73.1431 1850.96 -113.324 1792.09 -148.312 1729.48C-183.637 1666.27 -213.978 1598.69 -238.492 1528.63C-263.459 1457.27 -282.637 1382.58 -295.488 1306.66C-308.677 1228.75 -315.363 1148.57 -315.363 1068.33C-315.363 988.088 -308.677 907.901 -295.488 829.995C-282.637 754.069 -263.459 679.388 -238.492 608.025C-213.978 537.96 -183.637 470.381 -148.312 407.171C-113.324 344.565 -73.1469 285.694 -28.8894 232.193C15.3606 178.695 64.0506 130.129 115.831 87.8439C168.098 45.1539 223.973 8.49016 281.903 -21.1311C340.898 -51.2961 402.634 -74.4636 465.394 -89.9886C529.789 -105.919 596.067 -113.996 662.386 -113.996ZM662.386 -115.496C121.564 -115.496 -316.859 414.521 -316.859 1068.33C-316.859 1722.13 121.564 2252.15 662.386 2252.15C1203.21 2252.15 1641.63 1722.13 1641.63 1068.33C1641.63 414.521 1203.21 -115.496 662.386 -115.496Z"
-        fill="var(--df-waves-of-progress-line-color)" />
-    </g>
+  <g opacity="0.5" fill="black">
+    <path d="M420.319 594.342C446.929 594.342 473.524 597.154 499.362 602.697C524.543 608.101 549.311 616.163 572.981 626.663C596.224 636.972 618.638 649.733 639.608 664.591C660.379 679.309 679.913 696.211 697.665 714.826C715.418 733.444 731.535 753.931 745.571 775.718C759.743 797.716 771.912 821.232 781.744 845.611C791.76 870.443 799.452 896.431 804.608 922.853C809.899 949.962 812.58 977.866 812.58 1005.79C812.58 1033.71 809.899 1061.61 804.608 1088.72C799.452 1115.14 791.76 1141.13 781.744 1165.97C771.912 1190.35 759.739 1213.86 745.571 1235.86C731.535 1257.65 715.418 1278.13 697.665 1296.75C679.913 1315.37 660.379 1332.27 639.608 1346.99C618.638 1361.84 596.224 1374.6 572.981 1384.91C549.311 1395.41 524.543 1403.48 499.362 1408.88C473.524 1414.43 446.929 1417.23 420.319 1417.23C393.709 1417.23 367.114 1414.42 341.277 1408.88C316.095 1403.48 291.327 1395.41 267.657 1384.91C244.414 1374.6 222 1361.84 201.03 1346.99C180.259 1332.27 160.725 1315.37 142.973 1296.75C125.22 1278.13 109.103 1257.65 95.0665 1235.86C80.8953 1213.86 68.7265 1190.34 58.894 1165.97C48.8778 1141.13 41.1865 1115.15 36.0303 1088.72C30.739 1061.61 28.0578 1033.71 28.0578 1005.79C28.0578 977.866 30.739 949.962 36.0303 922.853C41.1865 896.434 48.8778 870.447 58.894 845.611C68.7265 821.228 80.899 797.712 95.0665 775.718C109.103 753.931 125.22 733.444 142.973 714.826C160.725 696.207 180.259 679.306 201.03 664.591C222 649.733 244.414 636.972 267.657 626.663C291.327 616.163 316.095 608.101 341.277 602.697C367.114 597.151 393.709 594.342 420.319 594.342ZM420.319 592.842C202.853 592.842 26.5615 777.724 26.5615 1005.79C26.5615 1233.85 202.853 1418.73 420.319 1418.73C637.785 1418.73 814.077 1233.85 814.077 1005.79C814.077 777.724 637.785 592.842 420.319 592.842Z"/>
+    <path d="M541.351 240.172C587.813 240.172 634.246 245.617 679.358 256.353C723.327 266.816 766.576 282.431 807.908 302.759C848.491 322.724 887.637 347.433 924.256 376.203C960.53 404.703 994.643 437.437 1025.64 473.493C1056.65 509.553 1084.8 549.232 1109.31 591.427C1134.06 634.031 1155.32 679.578 1172.5 726.802C1189.99 774.903 1203.43 825.239 1212.43 876.416C1221.67 928.927 1226.36 982.976 1226.36 1037.06C1226.36 1091.14 1221.67 1145.19 1212.43 1197.7C1203.43 1248.88 1189.99 1299.21 1172.5 1347.31C1155.32 1394.54 1134.06 1440.09 1109.31 1482.69C1084.8 1524.88 1056.65 1564.56 1025.64 1600.62C994.643 1636.68 960.53 1669.41 924.256 1697.91C887.637 1726.68 848.495 1751.4 807.908 1771.36C766.58 1791.69 723.327 1807.3 679.358 1817.76C634.246 1828.5 587.813 1833.94 541.351 1833.94C494.888 1833.94 448.456 1828.5 403.343 1817.76C359.375 1807.3 316.126 1791.69 274.793 1771.36C234.207 1751.39 195.065 1726.68 158.446 1697.91C122.172 1669.41 88.0583 1636.68 57.0571 1600.62C26.0521 1564.56 -2.09915 1524.88 -26.6129 1482.69C-51.3629 1440.09 -72.6216 1394.54 -89.7966 1347.31C-107.29 1299.21 -120.727 1248.88 -129.73 1197.7C-138.97 1145.19 -143.654 1091.14 -143.654 1037.06C-143.654 982.976 -138.97 928.927 -129.73 876.416C-120.727 825.239 -107.29 774.903 -89.7966 726.802C-72.6216 679.578 -51.3629 634.031 -26.6129 591.427C-2.09915 549.232 26.0483 509.553 57.0571 473.493C88.0583 437.437 122.172 404.707 158.446 376.203C195.065 347.433 234.207 322.721 274.793 302.759C316.122 282.431 359.375 266.816 403.343 256.353C448.456 245.617 494.888 240.172 541.351 240.172ZM541.351 238.672C162.207 238.672 -145.15 596.122 -145.15 1037.06C-145.15 1477.99 162.207 1835.44 541.351 1835.44C920.495 1835.44 1227.85 1477.99 1227.85 1037.06C1227.85 596.122 920.495 238.672 541.351 238.672Z"/>
+    <path d="M662.386 -113.996C728.704 -113.996 794.982 -105.919 859.377 -89.9886C922.137 -74.4636 983.873 -51.2961 1042.87 -21.1311C1100.8 8.49016 1156.67 45.1539 1208.94 87.8439C1260.72 130.133 1309.41 178.699 1353.66 232.193C1397.91 285.694 1438.1 344.565 1473.08 407.171C1508.4 470.381 1538.75 537.96 1563.26 608.025C1588.23 679.388 1607.4 754.069 1620.26 829.995C1633.44 907.901 1640.13 988.088 1640.13 1068.33C1640.13 1148.57 1633.44 1228.75 1620.26 1306.66C1607.4 1382.58 1588.23 1457.27 1563.26 1528.63C1538.75 1598.69 1508.4 1666.27 1473.08 1729.48C1438.09 1792.09 1397.91 1850.96 1353.66 1904.46C1309.41 1957.96 1260.72 2006.52 1208.94 2048.81C1156.67 2091.5 1100.8 2128.16 1042.87 2157.78C983.873 2187.95 922.137 2211.12 859.377 2226.64C794.982 2242.57 728.704 2250.65 662.386 2250.65C596.067 2250.65 529.789 2242.57 465.394 2226.64C402.634 2211.12 340.898 2187.95 281.903 2157.78C223.973 2128.16 168.098 2091.5 115.831 2048.81C64.0544 2006.52 15.3644 1957.95 -28.8894 1904.46C-73.1431 1850.96 -113.324 1792.09 -148.312 1729.48C-183.637 1666.27 -213.978 1598.69 -238.492 1528.63C-263.459 1457.27 -282.637 1382.58 -295.488 1306.66C-308.677 1228.75 -315.363 1148.57 -315.363 1068.33C-315.363 988.088 -308.677 907.901 -295.488 829.995C-282.637 754.069 -263.459 679.388 -238.492 608.025C-213.978 537.96 -183.637 470.381 -148.312 407.171C-113.324 344.565 -73.1469 285.694 -28.8894 232.193C15.3606 178.695 64.0506 130.129 115.831 87.8439C168.098 45.1539 223.973 8.49016 281.903 -21.1311C340.898 -51.2961 402.634 -74.4636 465.394 -89.9886C529.789 -105.919 596.067 -113.996 662.386 -113.996ZM662.386 -115.496C121.564 -115.496 -316.859 414.521 -316.859 1068.33C-316.859 1722.13 121.564 2252.15 662.386 2252.15C1203.21 2252.15 1641.63 1722.13 1641.63 1068.33C1641.63 414.521 1203.21 -115.496 662.386 -115.496Z"/>
   </g>
 </svg>`;
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const colors = ['sky', 'crimson', 'pumpkin', 'forest', 'canary', 'fuchsia', 'violet'];
 const colorsMap = {
-    'dark-sky': ['#000835', '#3A8BFF'],
-    'dark-crimson': ['#560900FF', '#FF514DFF'],
-    'dark-pumpkin': ['#5B2500FF', '#FF7920FF'],
-    'dark-forest': ['#023A00FF', '#92FF73FF'],
-    'dark-canary': ['#564A00FF', '#FCE649FF'],
-    'dark-fuchsia': ['#4F0230FF', '#FF58ACFF'],
-    'dark-violet': ['#26005AFF', '#B650FFFF'],
-    'vivid-sky': ['#3A8BFF', '#000835'],
-    'vivid-crimson': ['#FF514DFF', '#560900FF'],
-    'vivid-pumpkin': ['#FF7920FF', '#5B2500FF'],
-    'vivid-forest': ['#92FF73FF', '#023A00FF'],
-    'vivid-canary': ['#FCE649FF', '#564A00FF'],
-    'vivid-fuchsia': ['#FF58ACFF', '#4F0230FF'],
-    'vivid-violet': ['#B650FFFF', '#26005AFF'],
-    'light-sky': ['#C5D5F9FF', '#000835'],
-    'light-crimson': ['#FFD7D7FF', '#560900FF'],
-    'light-pumpkin': ['#FFD9C4FF', '#5B2500FF'],
-    'light-forest': ['#C8FFC0FF', '#023A00FF'],
-    'light-canary': ['#FFFEB0FF', '#564A00FF'],
-    'light-fuchsia': ['#FCC5F9FF', '#4F0230FF'],
-    'light-violet': ['#E4C7FFFF', '#26005AFF']
+    'dark-sky': ['var(--df-color-wavesProgress-sky-dark-background)', 'var(--df-color-wavesProgress-sky-dark-border)'],
+    'dark-crimson': [
+        'var(--df-color-wavesProgress-crimson-dark-background)',
+        'var(--df-color-wavesProgress-crimson-dark-border)'
+    ],
+    'dark-pumpkin': [
+        'var(--df-color-wavesProgress-pumpkin-dark-background)',
+        'var(--df-color-wavesProgress-pumpkin-dark-border)'
+    ],
+    'dark-forest': [
+        'var(--df-color-wavesProgress-forest-dark-background)',
+        'var(--df-color-wavesProgress-forest-dark-border)'
+    ],
+    'dark-canary': [
+        'var(--df-color-wavesProgress-canary-dark-background)',
+        'var(--df-color-wavesProgress-canary-dark-border)'
+    ],
+    'dark-fuchsia': [
+        'var(--df-color-wavesProgress-fuchsia-dark-background)',
+        'var(--df-color-wavesProgress-fuchsia-dark-border)'
+    ],
+    'dark-violet': [
+        'var(--df-color-wavesProgress-violet-dark-background)',
+        'var(--df-color-wavesProgress-violet-dark-border)'
+    ],
+    'vivid-sky': ['var(--df-color-wavesProgress-sky-vivid-background)', 'var(--df-color-wavesProgress-sky-vivid-border)'],
+    'vivid-crimson': [
+        'var(--df-color-wavesProgress-crimson-vivid-background)',
+        'var(--df-color-wavesProgress-crimson-vivid-border)'
+    ],
+    'vivid-pumpkin': [
+        'var(--df-color-wavesProgress-pumpkin-vivid-background)',
+        'var(--df-color-wavesProgress-pumpkin-vivid-border)'
+    ],
+    'vivid-forest': [
+        'var(--df-color-wavesProgress-forest-vivid-background)',
+        'var(--df-color-wavesProgress-forest-vivid-border)'
+    ],
+    'vivid-canary': [
+        'var(--df-color-wavesProgress-canary-vivid-background)',
+        'var(--df-color-wavesProgress-canary-vivid-border)'
+    ],
+    'vivid-fuchsia': [
+        'var(--df-color-wavesProgress-fuchsia-vivid-background)',
+        'var(--df-color-wavesProgress-fuchsia-vivid-border)'
+    ],
+    'vivid-violet': [
+        'var(--df-color-wavesProgress-violet-vivid-background)',
+        'var(--df-color-wavesProgress-violet-vivid-border)'
+    ],
+    'light-sky': ['var(--df-color-wavesProgress-sky-light-background)', 'var(--df-color-wavesProgress-sky-light-border)'],
+    'light-crimson': [
+        'var(--df-color-wavesProgress-crimson-light-background)',
+        'var(--df-color-wavesProgress-crimson-light-border)'
+    ],
+    'light-pumpkin': [
+        'var(--df-color-wavesProgress-pumpkin-light-background)',
+        'var(--df-color-wavesProgress-pumpkin-light-border)'
+    ],
+    'light-forest': [
+        'var(--df-color-wavesProgress-forest-light-background)',
+        'var(--df-color-wavesProgress-forest-light-border)'
+    ],
+    'light-canary': [
+        'var(--df-color-wavesProgress-canary-light-background)',
+        'var(--df-color-wavesProgress-canary-light-border)'
+    ],
+    'light-fuchsia': [
+        'var(--df-color-wavesProgress-fuchsia-light-background)',
+        'var(--df-color-wavesProgress-fuchsia-light-border)'
+    ],
+    'light-violet': [
+        'var(--df-color-wavesProgress-violet-light-background)',
+        'var(--df-color-wavesProgress-violet-light-border)'
+    ]
 };
 class DfWavesOfProgressDirective {
     constructor() {
@@ -6143,31 +5914,27 @@ class DfWavesOfProgressDirective {
          * 'dark-sky', 'vivid-crimson', 'light-forest', ['#000835', '#3A8BFF']
          */
         this.color = input('dark-sky', ...(ngDevMode ? [{ debugName: "color" }] : []));
-        this.backgroundImage = computed(() => {
-            const baseSvg = this.getWavesAsString(this.dfWavesOfProgress());
-            let bgColor, lineColor;
+        this.maskImage = computed(() => `url('data:image/svg+xml;utf8,${encodeURIComponent(this.getWavesAsString(this.dfWavesOfProgress()))}')`, ...(ngDevMode ? [{ debugName: "maskImage" }] : []));
+        this.bgColor = computed(() => {
+            let bgColor;
             if (Array.isArray(this.color())) {
-                [bgColor, lineColor] = this.color();
+                [bgColor] = this.color();
             }
             else {
-                [bgColor, lineColor] = colorsMap[this.color()];
+                [bgColor] = colorsMap[this.color()];
             }
-            return `url(${this.prepareSvg(baseSvg, bgColor, lineColor)})`;
-        }, ...(ngDevMode ? [{ debugName: "backgroundImage" }] : []));
-    }
-    /**
-     * Prepares the SVG string by replacing color variables and encoding it.
-     * @param svgAsString - The SVG string to prepare.
-     * @param bgColor - The background color.
-     * @param lineColor - The line color.
-     * @returns The prepared SVG string.
-     */
-    prepareSvg(svgAsString, bgColor, lineColor) {
-        // console.debug(`prepareSvg: ${svgAsString}`);
-        const baseSvg = encodeURIComponent(svgAsString
-            .replace(/var\(--df-waves-of-progress-bg-color\)/g, bgColor)
-            .replace(/var\(--df-waves-of-progress-line-color\)/g, lineColor));
-        return `'data:image/svg+xml;utf8,${baseSvg}'`;
+            return bgColor;
+        }, ...(ngDevMode ? [{ debugName: "bgColor" }] : []));
+        this.lineColor = computed(() => {
+            let lineColor;
+            if (Array.isArray(this.color())) {
+                [, lineColor] = this.color();
+            }
+            else {
+                [, lineColor] = colorsMap[this.color()];
+            }
+            return lineColor;
+        }, ...(ngDevMode ? [{ debugName: "lineColor" }] : []));
     }
     getWavesAsString(waves) {
         switch (waves) {
@@ -6183,31 +5950,29 @@ class DfWavesOfProgressDirective {
                 return arrowRight;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfWavesOfProgressDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.3", type: DfWavesOfProgressDirective, isStandalone: true, selector: "[dfWavesOfProgress]", inputs: { dfWavesOfProgress: { classPropertyName: "dfWavesOfProgress", publicName: "dfWavesOfProgress", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.background-image": "backgroundImage()" }, styleAttribute: "\n      background-size: cover;\n      background-repeat: no-repeat;\n      background-position: center center;\n    " }, exportAs: ["dfWavesOfProgress"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfWavesOfProgressDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: DfWavesOfProgressDirective, isStandalone: true, selector: "[dfWavesOfProgress]", inputs: { dfWavesOfProgress: { classPropertyName: "dfWavesOfProgress", publicName: "dfWavesOfProgress", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--df-waves-bg-color": "bgColor()", "style.--df-waves-line-color": "lineColor()", "style.--df-waves-mask-img": "maskImage()" }, classAttribute: "df-waves-of-progress" }, exportAs: ["dfWavesOfProgress"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfWavesOfProgressDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfWavesOfProgressDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfWavesOfProgress]',
                     exportAs: 'dfWavesOfProgress',
                     host: {
-                        style: `
-      background-size: cover;
-      background-repeat: no-repeat;
-      background-position: center center;
-    `,
-                        '[style.background-image]': 'backgroundImage()'
+                        '[style.--df-waves-bg-color]': 'bgColor()',
+                        '[style.--df-waves-line-color]': 'lineColor()',
+                        '[style.--df-waves-mask-img]': 'maskImage()',
+                        class: 'df-waves-of-progress'
                     }
                 }]
-        }] });
+        }], propDecorators: { dfWavesOfProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "dfWavesOfProgress", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 
 class DfWavesOfProgressModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfWavesOfProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: DfWavesOfProgressModule, imports: [DfWavesOfProgressDirective], exports: [DfWavesOfProgressDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfWavesOfProgressModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfWavesOfProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: DfWavesOfProgressModule, imports: [DfWavesOfProgressDirective], exports: [DfWavesOfProgressDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfWavesOfProgressModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfWavesOfProgressModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfWavesOfProgressModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DfWavesOfProgressDirective],
@@ -6222,8 +5987,8 @@ class DfAmadeusLogoComponent {
          */
         this.svgClass = input('', ...(ngDevMode ? [{ debugName: "svgClass" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfAmadeusLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: DfAmadeusLogoComponent, isStandalone: true, selector: "df-amadeus-logo", inputs: { svgClass: { classPropertyName: "svgClass", publicName: "svgClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfAmadeusLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: DfAmadeusLogoComponent, isStandalone: true, selector: "df-amadeus-logo", inputs: { svgClass: { classPropertyName: "svgClass", publicName: "svgClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <svg [class]="svgClass()" viewBox="0 0 113 16" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M107.272 6.62415C105.258 5.92656 104.367 5.46175 104.367 4.4161C104.367 3.75718 104.793 2.75021 106.807 2.75021C108.705 2.75021 110.72 3.60249 110.72 3.60249V0.696849C109.868 0.348052 108.357 0 106.652 0C103.746 0 100.958 1.54913 100.958 4.61021C100.958 7.67128 103.747 8.52282 105.646 9.14307C107.428 9.7239 108.629 10.3055 108.629 11.4671C108.629 12.4749 107.931 13.249 105.646 13.249C103.708 13.249 101.384 12.4749 101.384 12.4749V15.3798C101.384 15.3798 103.63 16 105.801 16C108.667 16 112.038 14.9923 112.038 11.2344C112.038 8.67751 109.946 7.55378 107.273 6.62415H107.272Z"
@@ -6257,7 +6022,7 @@ class DfAmadeusLogoComponent {
     <span class="visually-hidden">Amadeus</span>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DfAmadeusLogoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfAmadeusLogoComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'df-amadeus-logo',
@@ -6296,7 +6061,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
+        }], propDecorators: { svgClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "svgClass", required: false }] }] } });
+
+/**
+ * Provides AG Grid configuration with all community modules and legacy theme support
+ * @returns Environment providers for AG Grid setup
+ */
+const provideAgGrid = () => provideAppInitializer(() => {
+    // Register all community features
+    ModuleRegistry.registerModules([AllCommunityModule]);
+    // Mark all grids as using legacy themes
+    provideGlobalGridOptions({ theme: 'legacy' });
+});
 
 // Accessibility
 
@@ -6308,5 +6084,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BREAKPOINTS_VARS, ChangeContext, DF_BREAKPOINTS_VAR_DEFAULT, DfAccessibilityModule, DfAdvancedCardModule, DfAdvancedInputModule, DfAlertModule, DfAmadeusIconComponent, DfAmadeusLogoComponent, DfBreakpoints, DfDatePickerModule, DfDatepickerRangeDirective, DfDatepickerRangeService, DfDefaultSpinnerComponent, DfDirectionDetectionService, DfFooterModule, DfIconModule, DfIfMediaDirective, DfInputIconDirective, DfInsertIconDirective, DfInsertIconModule, DfManageBadgeEventsDirective, DfManageCardSelectionDirective, DfManageNavSelectDirective, DfManageSideNavDirective, DfMedia, DfMediaModule, DfMediaObserver, DfMediaQuery, DfModule, DfNavItemType, DfOptionHighlightDirective, DfPopoverConfig, DfPopoverModule, DfProgressIndicatorBackdropComponent, DfProgressIndicatorContainerComponent, DfProgressIndicatorContentPosition, DfProgressIndicatorContentProgressBar, DfProgressIndicatorContentSpinner, DfProgressIndicatorContentType, DfProgressIndicatorDirective, DfProgressIndicatorModule, DfProgressIndicatorRef, DfProgressIndicatorService, DfProgressbarComponent, DfProgressbarModule, DfSelectModule, DfSideNavCollapseDirective, DfSideNavCollapseModule, DfSideNavCollapseService, DfSideNavComponent, DfSideNavConfig, DfSideNavHeaderDirective, DfSideNavIconDirective, DfSideNavItemDirective, DfSideNavModule, DfSideNavService, DfSliderDirectionDirective, DfSliderModule, DfStepperComponent, DfStepperDirective, DfStepperModule, DfStepperService, DfStepperStepContentDirective, DfStepperStepDirective, DfTitleTruncateDirective, DfToastModule, DfTooltipModule, DfTooltipTruncateDirective, DfTriggerClickDirective, DfWavesOfProgressDirective, DfWavesOfProgressModule, LabelType, Options, PointerType, RightToLeftDirectionEnum, SkipLinkDirective, SkipLinksContainerComponent, SliderComponent };
+export { BREAKPOINTS_VARS, ChangeContext, DF_BREAKPOINTS_VAR_DEFAULT, DfAccessibilityModule, DfAdvancedCardModule, DfAdvancedInputModule, DfAlertModule, DfAmadeusLogoComponent, DfBreakpoints, DfDatePickerModule, DfDatepickerKeyboardService, DfDatepickerRangeDirective, DfDatepickerRangeService, DfDefaultSpinnerComponent, DfDirectionDetectionService, DfFooterModule, DfIfMediaDirective, DfInsertIconDirective, DfInsertIconModule, DfManageBadgeEventsDirective, DfManageCardSelectionDirective, DfManageNavSelectDirective, DfManageSideNavDirective, DfMedia, DfMediaModule, DfMediaObserver, DfMediaQuery, DfModule, DfNavItemType, DfOptionHighlightDirective, DfPopoverConfig, DfPopoverModule, DfProgressIndicatorBackdropComponent, DfProgressIndicatorContainerComponent, DfProgressIndicatorContentPosition, DfProgressIndicatorContentProgressBar, DfProgressIndicatorContentSpinner, DfProgressIndicatorContentType, DfProgressIndicatorDirective, DfProgressIndicatorModule, DfProgressIndicatorRef, DfProgressIndicatorService, DfProgressbarComponent, DfProgressbarModule, DfSelectModule, DfSideNavCollapseDirective, DfSideNavCollapseModule, DfSideNavCollapseService, DfSideNavComponent, DfSideNavConfig, DfSideNavHeaderDirective, DfSideNavIconDirective, DfSideNavItemDirective, DfSideNavModule, DfSideNavService, DfSliderDirectionDirective, DfSliderModule, DfStepperComponent, DfStepperDirective, DfStepperModule, DfStepperService, DfStepperStepContentDirective, DfStepperStepDirective, DfTitleTruncateDirective, DfToastModule, DfTooltipModule, DfTooltipTruncateDirective, DfTriggerClickDirective, DfWavesOfProgressDirective, DfWavesOfProgressModule, LabelType, Options, PointerType, RightToLeftDirectionEnum, SkipLinkDirective, SkipLinksContainerComponent, SliderComponent, provideAgGrid };
 //# sourceMappingURL=design-factory.mjs.map