@design-factory/angular 21.0.3 → 21.1.0-next.0

package/fesm2022/design-factory-angular-sidenav.mjs

@@ -1,14 +1,12 @@
-import { createNavManager, useDirectiveForHost } from '@agnos-ui/angular-headless';
+import { createNavManager } from '@agnos-ui/core/services/navManager';
+import { toAngularSignal, md$, lg$, useDirectiveForHost } from '@design-factory/angular/internals';
 import { NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, model, inject, contentChild, computed, Directive, effect, ChangeDetectionStrategy, Component, signal, viewChild, contentChildren, booleanAttribute, linkedSignal, ElementRef, PLATFORM_ID, Injector, afterRenderEffect, afterNextRender } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
-import * as i1$1 from '@angular/forms';
+import { input, model, inject, contentChild, computed, Directive, effect, ChangeDetectionStrategy, Component, signal, viewChild, contentChildren, booleanAttribute, linkedSignal, ElementRef, PLATFORM_ID, Injector, afterRenderEffect, untracked, afterNextRender, ViewEncapsulation } from '@angular/core';
+import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { DfDrawerComponent } from '@design-factory/angular/drawer';
-import { DfMedia } from '@design-factory/design-factory';
-import * as i1 from '@angular/router';
-import { RouterModule } from '@angular/router';
+import { DfDrawer } from '@design-factory/angular/drawer';
+import { RouterLink, RouterLinkActive } from '@angular/router';
 
 /**
  * Base item class that is extended by desktop and mobile item components
@@ -68,10 +66,10 @@ class DfSidenavItemBaseComponent {
             this.collapsed.set(!this.collapsed());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DfSidenavItemBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.1", type: DfSidenavItemBaseComponent, isStandalone: true, inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, wrapperHasIconContent: { classPropertyName: "wrapperHasIconContent", publicName: "wrapperHasIconContent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, queries: [{ propertyName: "iconContent", first: true, predicate: ["dfSidenavIcon"], descendants: true, isSignal: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavItemBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.0", type: DfSidenavItemBaseComponent, isStandalone: true, inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, wrapperHasIconContent: { classPropertyName: "wrapperHasIconContent", publicName: "wrapperHasIconContent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, queries: [{ propertyName: "iconContent", first: true, predicate: ["dfSidenavIcon"], descendants: true, isSignal: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DfSidenavItemBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavItemBaseComponent, decorators: [{
             type: Directive
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], wrapperHasIconContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapperHasIconContent", required: false }] }], iconContent: [{ type: i0.ContentChild, args: ['dfSidenavIcon', { isSignal: true }] }] } });
 
@@ -111,8 +109,8 @@ class DfSidenavItemDesktopComponent extends DfSidenavItemBaseComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DfSidenavItemDesktopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DfSidenavItemDesktopComponent, isStandalone: true, selector: "df-sidenav-item-desktop", host: { properties: { "class.d-none": "!isVisible() || (sidenav.isMinimized() && (!isFirstLevel || !wrapperHasIconContent()))" } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavItemDesktopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DfSidenavItemDesktopComponent, isStandalone: true, selector: "df-sidenav-item-desktop", host: { properties: { "class.d-none": "!isVisible() || (sidenav.isMinimized() && (!isFirstLevel || !wrapperHasIconContent()))" } }, usesInheritance: true, ngImport: i0, template: `
     <button
       class="btn df-sidenav-button d-flex gap-3"
       [class.df-sidenav-active-level]="sidenav.isMinimized() && hasActiveChildren() && isFirstLevel"
@@ -136,7 +134,7 @@ class DfSidenavItemDesktopComponent extends DfSidenavItemBaseComponent {
       }
     </button>
 
-    <div [class.d-none]="collapsed()" role="list">
+    <div [class.df-sidenav-item-hidden]="collapsed()" [attr.aria-hidden]="collapsed()" role="list">
       <ng-container [ngTemplateOutlet]="content" />
     </div>
     <ng-template #content>
@@ -144,7 +142,7 @@ class DfSidenavItemDesktopComponent extends DfSidenavItemBaseComponent {
     </ng-template>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DfSidenavItemDesktopComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavItemDesktopComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -173,7 +171,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
       }
     </button>
 
-    <div [class.d-none]="collapsed()" role="list">
+    <div [class.df-sidenav-item-hidden]="collapsed()" [attr.aria-hidden]="collapsed()" role="list">
       <ng-container [ngTemplateOutlet]="content" />
     </div>
     <ng-template #content>
@@ -277,8 +275,8 @@ class DfSidenavItemMobileComponent extends DfSidenavItemBaseComponent {
     handleBackClick() {
         this.sidenav.navigateBack();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DfSidenavItemMobileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DfSidenavItemMobileComponent, isStandalone: true, selector: "df-sidenav-item-mobile", host: { properties: { "class.d-none": "shouldHideComponent() || (sidenav.isMinimized() && (!isFirstLevel || !wrapperHasIconContent()))" }, classAttribute: "mobile" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavItemMobileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DfSidenavItemMobileComponent, isStandalone: true, selector: "df-sidenav-item-mobile", host: { properties: { "class.d-none": "shouldHideComponent() || (sidenav.isMinimized() && (!isFirstLevel || !wrapperHasIconContent()))" }, classAttribute: "mobile" }, usesInheritance: true, ngImport: i0, template: `
     @if (shouldShowMobileHeader()) {
       <div class="df-sidenav-mobile-header mobile mb-2" role="listitem">
         <button
@@ -338,7 +336,7 @@ class DfSidenavItemMobileComponent extends DfSidenavItemBaseComponent {
     </ng-template>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DfSidenavItemMobileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavItemMobileComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -440,7 +438,6 @@ class DfSidenavLinkBaseComponent {
          * Options to determine when the router link is considered active
          */
         this.routerLinkActiveOptions = input({ exact: false }, ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : []));
-        this.isSmallScreen = toSignal(inject(DfMedia).getObservable(['sm', 'xs']), { initialValue: false });
         this.sidenav = inject(DfSidenavComponent);
         this.parentItem = inject(DfSidenavItemComponent, {
             optional: true,
@@ -459,10 +456,16 @@ class DfSidenavLinkBaseComponent {
             return this.label().toLowerCase().includes(search);
         }, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DfSidenavLinkBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.1", type: DfSidenavLinkBaseComponent, isStandalone: true, inputs: { linkPath: { classPropertyName: "linkPath", publicName: "linkPath", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, wrapperHasIconContent: { classPropertyName: "wrapperHasIconContent", publicName: "wrapperHasIconContent", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "iconContent", first: true, predicate: ["dfSidenavIcon"], descendants: true, isSignal: true }], ngImport: i0 }); }
+    toggleSidenavOnSmallScreen() {
+        if (this.sidenav['isSmallScreen']()) {
+            this.sidenav.toggleMinimize();
+        }
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavLinkBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.0", type: DfSidenavLinkBaseComponent, isStandalone: true, inputs: { linkPath: { classPropertyName: "linkPath", publicName: "linkPath", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, wrapperHasIconContent: { classPropertyName: "wrapperHasIconContent", publicName: "wrapperHasIconContent", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "iconContent", first: true, predicate: ["dfSidenavIcon"], descendants: true, isSignal: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DfSidenavLinkBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavLinkBaseComponent, decorators: [{
             type: Directive
         }], propDecorators: { linkPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkPath", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], wrapperHasIconContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapperHasIconContent", required: false }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }], iconContent: [{ type: i0.ContentChild, args: ['dfSidenavIcon', { isSignal: true }] }] } });
 
@@ -475,8 +478,8 @@ class DfSidenavLinkDesktopComponent extends DfSidenavLinkBaseComponent {
         super(...arguments);
         this.anchor = viewChild.required('anchor');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DfSidenavLinkDesktopComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DfSidenavLinkDesktopComponent, isStandalone: true, selector: "df-sidenav-link-desktop", host: { properties: { "class.d-none": "!isVisible() || (sidenav.isMinimized() && (!isFirstLevel || !wrapperHasIconContent()))" }, classAttribute: "d-flex" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavLinkDesktopComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DfSidenavLinkDesktopComponent, isStandalone: true, selector: "df-sidenav-link-desktop", host: { properties: { "class.d-none": "!isVisible() || (sidenav.isMinimized() && (!isFirstLevel || !wrapperHasIconContent()))" }, classAttribute: "d-flex" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <a
       class="btn df-sidenav-button d-flex gap-3"
       [class.w-100]="!sidenav.isMinimized()"
@@ -487,7 +490,7 @@ class DfSidenavLinkDesktopComponent extends DfSidenavLinkBaseComponent {
       [class.justify-content-start]="!sidenav.isMinimized()"
       [routerLinkActiveOptions]="routerLinkActiveOptions()"
       [attr.aria-label]="label()"
-      (click)="isSmallScreen() && sidenav.toggleMinimize()"
+      (click)="toggleSidenavOnSmallScreen()"
       #anchor
     >
       <ng-container [ngTemplateOutlet]="content" />
@@ -501,9 +504,9 @@ class DfSidenavLinkDesktopComponent extends DfSidenavLinkBaseComponent {
         <span class="sidenav-label" [title]="label()">{{ label() }}</span>
       }
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DfSidenavLinkDesktopComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavLinkDesktopComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -519,7 +522,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
       [class.justify-content-start]="!sidenav.isMinimized()"
       [routerLinkActiveOptions]="routerLinkActiveOptions()"
       [attr.aria-label]="label()"
-      (click)="isSmallScreen() && sidenav.toggleMinimize()"
+      (click)="toggleSidenavOnSmallScreen()"
       #anchor
     >
       <ng-container [ngTemplateOutlet]="content" />
@@ -538,7 +541,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                         '[class.d-none]': '!isVisible() || (sidenav.isMinimized() && (!isFirstLevel || !wrapperHasIconContent()))',
                         class: 'd-flex'
                     },
-                    imports: [RouterModule, NgTemplateOutlet]
+                    imports: [RouterLink, RouterLinkActive, NgTemplateOutlet]
                 }]
         }], propDecorators: { anchor: [{ type: i0.ViewChild, args: ['anchor', { isSignal: true }] }] } });
 
@@ -583,8 +586,8 @@ class DfSidenavLinkMobileComponent extends DfSidenavLinkBaseComponent {
             return path;
         }, ...(ngDevMode ? [{ debugName: "breadcrumbPath" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DfSidenavLinkMobileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DfSidenavLinkMobileComponent, isStandalone: true, selector: "df-sidenav-link-mobile", host: { properties: { "class.d-none": "!isVisibleInList() || (sidenav.isMinimized() && (!isFirstLevel || !wrapperHasIconContent()))" }, classAttribute: "d-flex" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavLinkMobileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DfSidenavLinkMobileComponent, isStandalone: true, selector: "df-sidenav-link-mobile", host: { properties: { "class.d-none": "!isVisibleInList() || (sidenav.isMinimized() && (!isFirstLevel || !wrapperHasIconContent()))" }, classAttribute: "d-flex" }, usesInheritance: true, ngImport: i0, template: `
     <a
       class="btn df-sidenav-button d-flex gap-3 justify-content-start w-100 df-sidenav-breadcrumb-button"
       routerLinkActive="df-sidenav-active-level"
@@ -592,7 +595,7 @@ class DfSidenavLinkMobileComponent extends DfSidenavLinkBaseComponent {
       (isActiveChange)="isActiveLink.set($event)"
       [routerLink]="linkPath()"
       [routerLinkActiveOptions]="routerLinkActiveOptions()"
-      (click)="isSmallScreen() && sidenav.toggleMinimize()"
+      (click)="toggleSidenavOnSmallScreen()"
     >
       <ng-container [ngTemplateOutlet]="content" />
     </a>
@@ -617,9 +620,9 @@ class DfSidenavLinkMobileComponent extends DfSidenavLinkBaseComponent {
         </div>
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DfSidenavLinkMobileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavLinkMobileComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -632,7 +635,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
       (isActiveChange)="isActiveLink.set($event)"
       [routerLink]="linkPath()"
       [routerLinkActiveOptions]="routerLinkActiveOptions()"
-      (click)="isSmallScreen() && sidenav.toggleMinimize()"
+      (click)="toggleSidenavOnSmallScreen()"
     >
       <ng-container [ngTemplateOutlet]="content" />
     </a>
@@ -662,7 +665,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                         '[class.d-none]': '!isVisibleInList() || (sidenav.isMinimized() && (!isFirstLevel || !wrapperHasIconContent()))',
                         class: 'd-flex'
                     },
-                    imports: [RouterModule, NgTemplateOutlet]
+                    imports: [RouterLink, RouterLinkActive, NgTemplateOutlet]
                 }]
         }] });
 
@@ -673,10 +676,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  * @since 21.0.0
  */
 class DfSidenavIconDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DfSidenavIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: DfSidenavIconDirective, isStandalone: true, selector: "[dfSidenavIcon]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: DfSidenavIconDirective, isStandalone: true, selector: "[dfSidenavIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DfSidenavIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfSidenavIcon]'
@@ -724,8 +727,8 @@ class DfSidenavLinkComponent {
         this.wrapperHasIconContent = computed(() => this.icon() !== '' || this.iconContentQuery() !== undefined, ...(ngDevMode ? [{ debugName: "wrapperHasIconContent" }] : []));
         this.sidenav = inject(DfSidenavComponent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DfSidenavLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DfSidenavLinkComponent, isStandalone: true, selector: "df-sidenav-link", inputs: { linkPath: { classPropertyName: "linkPath", publicName: "linkPath", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "class.mobile": "sidenav['isMobileDevice']()" }, classAttribute: "d-block" }, queries: [{ propertyName: "iconContentQuery", first: true, predicate: DfSidenavIconDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "desktopInstance", first: true, predicate: DfSidenavLinkDesktopComponent, descendants: true, isSignal: true }, { propertyName: "mobileInstance", first: true, predicate: DfSidenavLinkMobileComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DfSidenavLinkComponent, isStandalone: true, selector: "df-sidenav-link", inputs: { linkPath: { classPropertyName: "linkPath", publicName: "linkPath", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "class.mobile": "sidenav['isMobileDevice']()" }, classAttribute: "d-block" }, queries: [{ propertyName: "iconContentQuery", first: true, predicate: DfSidenavIconDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "desktopInstance", first: true, predicate: DfSidenavLinkDesktopComponent, descendants: true, isSignal: true }, { propertyName: "mobileInstance", first: true, predicate: DfSidenavLinkMobileComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template #iconSlot>
       <ng-content select="[dfSidenavIcon]" />
     </ng-template>
@@ -758,7 +761,7 @@ class DfSidenavLinkComponent {
     }
   `, isInline: true, dependencies: [{ kind: "component", type: DfSidenavLinkDesktopComponent, selector: "df-sidenav-link-desktop" }, { kind: "component", type: DfSidenavLinkMobileComponent, selector: "df-sidenav-link-mobile" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DfSidenavLinkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavLinkComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'df-sidenav-link',
@@ -850,8 +853,8 @@ class DfSidenavItemComponent {
         this.wrapperHasIconContent = computed(() => this.icon() !== '' || this.iconContentQuery() !== undefined, ...(ngDevMode ? [{ debugName: "wrapperHasIconContent" }] : []));
         this.sidenav = inject(DfSidenavComponent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DfSidenavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DfSidenavItemComponent, isStandalone: true, selector: "df-sidenav-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { attributes: { "role": "listitem" }, properties: { "class.mobile": "sidenav['isMobileDevice']()" }, classAttribute: "d-block" }, queries: [{ propertyName: "childrenItems", predicate: DfSidenavItemComponent, descendants: true, isSignal: true }, { propertyName: "childrenLinks", predicate: DfSidenavLinkComponent, descendants: true, isSignal: true }, { propertyName: "iconContentQuery", first: true, predicate: DfSidenavIconDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "desktopInstance", first: true, predicate: DfSidenavItemDesktopComponent, descendants: true, isSignal: true }, { propertyName: "mobileInstance", first: true, predicate: DfSidenavItemMobileComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DfSidenavItemComponent, isStandalone: true, selector: "df-sidenav-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { attributes: { "role": "listitem" }, properties: { "class.mobile": "sidenav['isMobileDevice']()" }, classAttribute: "d-block" }, queries: [{ propertyName: "childrenItems", predicate: DfSidenavItemComponent, descendants: true, isSignal: true }, { propertyName: "childrenLinks", predicate: DfSidenavLinkComponent, descendants: true, isSignal: true }, { propertyName: "iconContentQuery", first: true, predicate: DfSidenavIconDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "desktopInstance", first: true, predicate: DfSidenavItemDesktopComponent, descendants: true, isSignal: true }, { propertyName: "mobileInstance", first: true, predicate: DfSidenavItemMobileComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template #iconSlot>
       <ng-content select="[dfSidenavIcon]" />
     </ng-template>
@@ -882,7 +885,7 @@ class DfSidenavItemComponent {
     }
   `, isInline: true, dependencies: [{ kind: "component", type: DfSidenavItemDesktopComponent, selector: "df-sidenav-item-desktop" }, { kind: "component", type: DfSidenavItemMobileComponent, selector: "df-sidenav-item-mobile" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DfSidenavItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'df-sidenav-item',
@@ -961,6 +964,12 @@ class DfSidenavComponent {
          * @default true
          */
         this.enableMobile = input(true, { ...(ngDevMode ? { debugName: "enableMobile" } : {}), transform: booleanAttribute });
+        /**
+         * @since 21.1.0
+         *
+         * Flag to disable the automatic scroll to active link on desktop when the sidenav is initialized.
+         */
+        this.disableInitialDesktopAutoScroll = input(false, { ...(ngDevMode ? { debugName: "disableInitialDesktopAutoScroll" } : {}), transform: booleanAttribute });
         this._isMinimized = linkedSignal(() => {
             // in mobile devices, the default value is true (hiding the drawer) and does not track changes to the screen size
             if (this.isMobileDevice()) {
@@ -1010,11 +1019,11 @@ class DfSidenavComponent {
             const stack = this.mobileNavigationStack();
             return stack.length > 0 ? stack[stack.length - 1] : null;
         }, ...(ngDevMode ? [{ debugName: "currentMobilePanel" }] : []));
-        this.isSmallScreen = toSignal(inject(DfMedia).getObservable(['sm', 'xs']), { initialValue: false });
-        this.isMediumScreen = toSignal(inject(DfMedia).getObservable(['md']), { initialValue: false });
-        this.isLargeUpScreen = toSignal(inject(DfMedia).getObservable(['lg', 'xl', 'xxl', 'xxxl']), {
-            initialValue: false
-        });
+        this.isMd = toAngularSignal(md$);
+        this.isLg = toAngularSignal(lg$);
+        this.isSmallScreen = computed(() => !this.isMd(), ...(ngDevMode ? [{ debugName: "isSmallScreen" }] : []));
+        this.isMediumScreen = computed(() => this.isMd() && !this.isLg(), ...(ngDevMode ? [{ debugName: "isMediumScreen" }] : []));
+        this.isLargeUpScreen = computed(() => this.isLg(), ...(ngDevMode ? [{ debugName: "isLargeUpScreen" }] : []));
         this.isMobileOrSmallScreen = computed(() => this.isSmallScreen() || this.isMediumScreen(), ...(ngDevMode ? [{ debugName: "isMobileOrSmallScreen" }] : []));
         this.backdrop = computed(() => this.isMediumScreen(), ...(ngDevMode ? [{ debugName: "backdrop" }] : []));
         this.navManager = createNavManager();
@@ -1043,44 +1052,46 @@ class DfSidenavComponent {
         });
     }
     ngAfterContentInit() {
-        if (!this.isMobileDevice() && this.isBrowser && this.isLargeUpScreen()) {
+        if (!this.disableInitialDesktopAutoScroll() && !this.isMobileDevice() && this.isBrowser && this.isLargeUpScreen()) {
             void this.initializeDesktopNavigation();
         }
     }
     /**
      * This method allows to center and show the active link, when the sidenav is used in desktop and a large screen.
-     * It collapses all items and expands only the parents of the active link.
-     * Also, it scrolls to the active link to make it visible.
+     *
+     * It collapses all items and expands only the parents of the active link and scrolls to the active link to make it visible.
      */
-    async initializeDesktopNavigation() {
-        // RouterLinkActive queues two microtasks, so we wait for them to complete
-        await Promise.resolve();
-        await Promise.resolve();
-        // Find the first active link
-        const activeLink = this.allLinks()
-            .find((link) => link['desktopInstance']()?.isActiveLink())?.['desktopInstance']?.();
-        if (activeLink) {
-            this.allItems().forEach((item) => {
-                item.collapsed.set(true);
-            });
-            let currentParent = activeLink['parentItem'];
-            while (currentParent) {
-                currentParent.collapsed.set(false);
-                currentParent = currentParent['parentWrapper'];
+    initializeDesktopNavigation() {
+        const effectRef = effect(() => {
+            // Find the first active link
+            const activeLink = this.allLinks()
+                .find((link) => link['desktopInstance']()?.isActiveLink())?.['desktopInstance']?.();
+            if (activeLink) {
+                untracked(() => {
+                    this.allItems().forEach((item) => {
+                        item.collapsed.set(true);
+                    });
+                    let currentParent = activeLink['parentItem'];
+                    while (currentParent) {
+                        currentParent.collapsed.set(false);
+                        currentParent = currentParent['parentWrapper'];
+                    }
+                    // We need a render to make sure the getBoundingClientRect calls will be correct AFTER the collapse of the items.
+                    afterNextRender({
+                        read: () => {
+                            const anchorElement = activeLink['anchor']().nativeElement;
+                            const containerElement = this.scrollableContainer().nativeElement;
+                            const heightPx = anchorElement.getBoundingClientRect().top +
+                                anchorElement.clientHeight / 2 -
+                                containerElement.getBoundingClientRect().top -
+                                containerElement.clientHeight / 3;
+                            containerElement.scrollTo({ top: heightPx, behavior: 'instant' });
+                            effectRef.destroy();
+                        }
+                    }, { injector: this.injector });
+                });
             }
-            // We need a render to make sure the getBoundingClientRect calls will be correct AFTER the collapse of the items.
-            afterNextRender({
-                read: () => {
-                    const anchorElement = activeLink['anchor']().nativeElement;
-                    const containerElement = this.scrollableContainer().nativeElement;
-                    const heightPx = anchorElement.getBoundingClientRect().top +
-                        anchorElement.clientHeight / 2 -
-                        containerElement.getBoundingClientRect().top -
-                        containerElement.clientHeight / 3;
-                    containerElement.scrollTo({ top: heightPx, behavior: 'instant' });
-                }
-            }, { injector: this.injector });
-        }
+        }, { ...(ngDevMode ? { debugName: "effectRef" } : {}), injector: this.injector });
     }
     /**
      * Toggles the minimized state of the sidenav
@@ -1177,181 +1188,183 @@ class DfSidenavComponent {
             this.mobileNavigationStack.set([]);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DfSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DfSidenavComponent, isStandalone: true, selector: "df-sidenav", inputs: { searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, enableMobile: { classPropertyName: "enableMobile", publicName: "enableMobile", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.df-sidenav-lg": "isLargeUpScreen()", "class.df-sidenav-withicon": "contentHasIcons()", "class.d-none": "isSmallScreen() && _isMinimized()", "class.df-sidenav-drawer": "isMediumScreen() && !_isMinimized()" }, classAttribute: "df-sidenav" }, queries: [{ propertyName: "allLinks", predicate: DfSidenavLinkComponent, descendants: true, isSignal: true }, { propertyName: "allItems", predicate: DfSidenavItemComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "scrollableContainer", first: true, predicate: ["scrollableContainer"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DfSidenavComponent, isStandalone: true, selector: "df-sidenav", inputs: { searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, enableMobile: { classPropertyName: "enableMobile", publicName: "enableMobile", isSignal: true, isRequired: false, transformFunction: null }, disableInitialDesktopAutoScroll: { classPropertyName: "disableInitialDesktopAutoScroll", publicName: "disableInitialDesktopAutoScroll", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.df-sidenav-lg": "isLargeUpScreen()", "class.df-sidenav-withicon": "contentHasIcons()", "class.d-none": "isSmallScreen() && _isMinimized()", "class.df-sidenav-drawer": "isMediumScreen() && !_isMinimized()" }, classAttribute: "df-sidenav" }, queries: [{ propertyName: "allLinks", predicate: DfSidenavLinkComponent, descendants: true, isSignal: true }, { propertyName: "allItems", predicate: DfSidenavItemComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "scrollableContainer", first: true, predicate: ["scrollableContainer"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <df-drawer
       #drawer
-      className="inline-start {{ isSmallScreen() ? 'df-sidenav-mobile-drawer' : '' }}"
+      position="inline-start"
+      [className]="isSmallScreen() ? 'df-sidenav-mobile-drawer' : ''"
       [visible]="!_isMinimized()"
       (visibleChange)="visibleChangeHandler($event)"
       (minimizedChange)="_isMinimized.set($event)"
       (resizingChange)="resizingChangeHandler($event)"
       [bodyScroll]="true"
       [backdrop]="backdrop()"
+      [keepInDom]="true"
       [(size)]="width"
       [container]="isSmallScreen() ? null : hostRef.nativeElement"
       [resizable]="resizable() && !isSmallScreen()"
       [focusOnInit]="false"
-      [keepInDom]="true"
+      [configuration]="isLargeUpScreen() ? 'inline' : 'overlay'"
     >
-      <nav class="d-flex flex-column w-100 h-100 p-5 pb-3">
-        <div class="df-sidenav-header flex-shrink-0" [class.df-sidenav-header-minimized]="_isMinimized()">
-          @if (searchable()) {
-            @if (_isMinimized()) {
-              <button
-                class="btn btn-outline-neutral df-btn-icononly mb-3 w-100 fa-search"
-                [class.df-sidenav-search-minimized]="!contentHasIcons()"
-                type="button"
-                (click)="focusSearch()"
-                i18n-aria-label="@@df.sidenav.search.ariaLabel"
-                aria-label="Search"
-              ></button>
-            } @else {
-              <div class="input-group mb-3">
-                <div class="input-group-prepend">
-                  <span class="input-group-text fa-light fa-search"></span>
-                </div>
-                <input
-                  type="search"
-                  class="form-control df-input-withicon"
-                  i18n-placeholder="@@df.sidenav.search.placeholder"
-                  placeholder="Search"
+      <div class="h-100 w-100">
+        <nav class="d-flex flex-column w-100 h-100 p-5 pb-3">
+          <div class="df-sidenav-header flex-shrink-0" [class.df-sidenav-header-minimized]="_isMinimized()">
+            @if (searchable()) {
+              @if (_isMinimized()) {
+                <button
+                  class="btn btn-outline-neutral df-btn-icononly mb-3 w-100 fa-search"
+                  [class.df-sidenav-search-minimized]="!contentHasIcons()"
+                  type="button"
+                  (click)="focusSearch()"
                   i18n-aria-label="@@df.sidenav.search.ariaLabel"
                   aria-label="Search"
-                  [(ngModel)]="searchTerm"
-                  #textInput
-                />
-                <div class="input-group-append">
-                  <button
-                    class="input-group-text fa-light fa-times"
-                    [class.df-sidenav-search-empty]="searchTerm() === ''"
-                    (click)="searchTerm.set(''); textInput.focus()"
-                  >
-                    <span class="visually-hidden" i18n="@@df.sidenav.search.clearText">Clear text</span>
-                  </button>
+                ></button>
+              } @else {
+                <div class="input-group mb-3">
+                  <div class="input-group-prepend">
+                    <span class="input-group-text fa-light fa-search"></span>
+                  </div>
+                  <input
+                    type="search"
+                    class="form-control df-input-withicon"
+                    i18n-placeholder="@@df.sidenav.search.placeholder"
+                    placeholder="Search"
+                    i18n-aria-label="@@df.sidenav.search.ariaLabel"
+                    aria-label="Search"
+                    [(ngModel)]="searchTerm"
+                    #textInput
+                  />
+                  <div class="input-group-append">
+                    <button
+                      class="input-group-text fa-light fa-times"
+                      [class.df-sidenav-search-empty]="searchTerm() === ''"
+                      (click)="searchTerm.set(''); textInput.focus()"
+                    >
+                      <span class="visually-hidden" i18n="@@df.sidenav.search.clearText">Clear text</span>
+                    </button>
+                  </div>
                 </div>
-              </div>
+              }
             }
-          }
-        </div>
+          </div>
 
-        <div role="list" class="sidenav-body flex-grow-1 overflow-y-auto" #scrollableContainer>
-          <ng-content />
-        </div>
-        @if (collapsible() && !isSmallScreen()) {
-          <div class="d-flex sidenav-footer flex-shrink-0 py-3">
-            <button
-              class="btn btn-outline-primary df-btn-icononly df-sidenav-toggle-minimized"
-              (click)="toggleMinimize()"
-              i18n-aria-label="@@df.sidenav.toggleMinimize.ariaLabel"
-              aria-label="Toggle minimized sidenav"
-            >
-              @if (isMinimized()) {
-                <span class="fa-arrow-right-to-line"></span>
-              } @else {
-                <span class="fa-arrow-left-to-line"></span>
-              }
-            </button>
+          <div role="list" class="sidenav-body flex-grow-1 overflow-y-auto" #scrollableContainer>
+            <ng-content />
           </div>
-        }
-      </nav>
+          @if (collapsible() && !isSmallScreen()) {
+            <div class="d-flex sidenav-footer flex-shrink-0 py-3">
+              <button
+                class="btn btn-outline-primary df-btn-icononly df-sidenav-toggle-minimized"
+                (click)="toggleMinimize()"
+                i18n-aria-label="@@df.sidenav.toggleMinimize.ariaLabel"
+                aria-label="Toggle minimized sidenav"
+              >
+                @if (isMinimized()) {
+                  <span class="fa-arrow-right-to-line"></span>
+                } @else {
+                  <span class="fa-arrow-left-to-line"></span>
+                }
+              </button>
+            </div>
+          }
+        </nav>
+      </div>
     </df-drawer>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DfDrawerComponent, selector: "df-drawer", inputs: ["className", "bodyScroll", "backdrop", "container", "size", "resizable", "visible", "keepInDom", "focusOnInit"], outputs: ["sizeChange", "visibleChange", "minimizedChange", "maximizedChange", "resizingChange", "minSize", "maxSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".df-sidenav{position:relative;--sidenav-minWidth: 44px;width:var(--sidenav-minWidth)}.df-sidenav.df-sidenav-withicon{--sidenav-minWidth: 90px}.df-sidenav.df-sidenav-lg{width:auto}.df-sidenav.df-sidenav-lg .df-drawer{--df-drawer-size: max-content}.df-sidenav.df-sidenav-light-sky .sidenav-body{scrollbar-color:var(--df-color-primary-soft-default-foreground) var(--df-color-primary-subtle-background)}.df-sidenav.df-sidenav-light-sky .df-drawer,.df-sidenav.df-sidenav-light-sky .df-sidenav-button{background-color:var(--df-color-primary-subtle-background)}.df-sidenav .df-sidenav-search-empty{visibility:hidden}.df-sidenav .df-sidenav-mobile-drawer{top:var(--df-navbar-height, 56px)!important;height:calc(100vh - var(--df-navbar-height, 56px))!important}.df-sidenav nav{border-inline-end:1px solid var(--df-color-inert-neutral-main-border)}.df-sidenav.df-sidenav-drawer .df-drawer{z-index:2010}.df-sidenav .df-drawer{background-color:var(--df-color-inert-neutral-main-background);height:100%;--df-drawer-size: 0;--df-drawer-min-size: var(--sidenav-minWidth);--df-drawer-max-size: max-content;z-index:10;transition:none}.df-sidenav .df-drawer.df-inline-start{border:none}.df-sidenav .df-drawer.df-collapse-show{--df-drawer-size: max-content}.df-sidenav .df-drawer.df-collapse-hide{display:block}.df-sidenav .df-drawer.df-collapse-collapsing.df-collapse-horizontal{transition:none}.df-sidenav .df-sidenav-active{font-weight:var(--df-typo-weight-bold)}.df-sidenav .sidenav-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.df-sidenav .sidenav-label:before{content:attr(title);font-weight:var(--df-typo-weight-bold);visibility:hidden;height:0;overflow:hidden;display:block}.df-sidenav .df-sidenav-mobile-header{padding-block-end:var(--df-spacing-2);border-block-end:1px solid var(--df-color-neutral-alt-default-border);font-weight:var(--df-typo-weight-regular)}.df-sidenav .df-sidenav-mobile-header .df-sidenav-mobile-header-back-arrow{color:var(--df-color-primary-alt-default-foreground)}.df-sidenav .df-sidenav-mobile-header .df-sidenav-active .df-sidenav-mobile-header-back-arrow{color:var(--df-color-primary-alt-active-foreground)}.df-sidenav .sidenav-body{padding:var(--df-spacing-2);scrollbar-color:var(--df-color-primary-soft-default-foreground) var(--df-color-inert-neutral-main-background)}.df-sidenav .df-sidenav-search-minimized,.df-sidenav .df-sidenav-toggle-minimized{min-width:36px;position:relative;z-index:1}.df-sidenav .df-sidenav-header{padding-inline:var(--df-spacing-2);overflow:visible;position:relative}.df-sidenav .df-sidenav-header.df-sidenav-header-minimized{padding-inline:0}.df-sidenav .sidenav-footer{overflow:visible;position:relative}.df-sidenav [role=list] [role=listitem]{padding-inline-start:0}.df-sidenav [role=list] [role=listitem] [role=listitem]:not(.mobile){padding-inline-start:var(--df-spacing-6);position:relative}.df-sidenav [role=list] [role=listitem] [role=listitem]:not(.mobile):before{content:\"\";position:absolute;left:var(--df-spacing-5);top:0;bottom:0;width:1px;background-color:var(--df-color-neutral-soft-default-background)}.df-sidenav [role=list] [role=listitem] [role=listitem]:not(.mobile) [role=listitem]:not(.mobile){padding-inline-start:var(--df-spacing-6)}.df-sidenav .df-drawer-splitter{position:absolute;inset-block:0;inset-inline-end:-4px;width:1rem;cursor:ew-resize;background:transparent;display:flex;align-items:center;justify-content:center;touch-action:none}.df-sidenav .df-drawer-splitter .df-drawer-splitter-handle{--df-btn-bg: transparent;flex-shrink:0;transform:translate(40%);border:none;cursor:ew-resize}.df-sidenav .df-sidenav-button{--df-box-shadow-color: var(--df-color-focus-main-border);--df-btn-font-weight: var(--df-typo-weight-regular);background-color:var(--df-color-inert-neutral-main-background);padding-inline:var(--df-spacing-5);margin-block-end:1px;height:40px;border:none;position:relative}.df-sidenav .df-sidenav-button:focus-visible{z-index:1}.df-sidenav .df-sidenav-button.df-sidenav-breadcrumb-button{height:3rem}.df-sidenav .df-sidenav-button .df-sidenav-collapse-toggle{transition:transform .3s;color:var(--df-color-primary-alt-default-foreground)}.df-sidenav .df-sidenav-button .df-sidenav-collapse-toggle.expanded{transform:rotate(180deg)}.df-sidenav .df-sidenav-button:hover{background-color:var(--df-color-primary-alt-hovered-background)}.df-sidenav .df-sidenav-button:hover .df-sidenav-collapse-toggle{color:var(--df-color-primary-alt-hovered-foreground)}.df-sidenav .df-sidenav-button:active{background-color:var(--df-color-primary-alt-active-background)}.df-sidenav .df-sidenav-button:active .df-sidenav-collapse-toggle{color:var(--df-color-primary-alt-active-foreground)}.df-sidenav .df-sidenav-button.df-sidenav-active-level{font-weight:var(--df-typo-weight-bold);background-color:var(--df-color-primary-alt-active-background)}.df-sidenav .df-sidenav-button.df-sidenav-active-level:hover{background-color:var(--df-color-primary-alt-activeHovered-background)}.df-sidenav .df-sidenav-item-hidden{visibility:hidden;height:0}.df-sidenav .input-group.df-input-prepend .input-group-prepend{padding-inline-start:15px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DfDrawer, selector: "df-drawer", inputs: ["className", "bodyScroll", "backdrop", "container", "size", "resizable", "visible", "keepInDom", "configuration", "position", "focusOnInit"], outputs: ["sizeChange", "visibleChange", "minimizedChange", "maximizedChange", "resizingChange", "minSize", "maxSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DfSidenavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavComponent, decorators: [{
             type: Component,
-            args: [{
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    selector: 'df-sidenav',
-                    template: `
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'df-sidenav', template: `
     <df-drawer
       #drawer
-      className="inline-start {{ isSmallScreen() ? 'df-sidenav-mobile-drawer' : '' }}"
+      position="inline-start"
+      [className]="isSmallScreen() ? 'df-sidenav-mobile-drawer' : ''"
       [visible]="!_isMinimized()"
       (visibleChange)="visibleChangeHandler($event)"
       (minimizedChange)="_isMinimized.set($event)"
       (resizingChange)="resizingChangeHandler($event)"
       [bodyScroll]="true"
       [backdrop]="backdrop()"
+      [keepInDom]="true"
       [(size)]="width"
       [container]="isSmallScreen() ? null : hostRef.nativeElement"
       [resizable]="resizable() && !isSmallScreen()"
       [focusOnInit]="false"
-      [keepInDom]="true"
+      [configuration]="isLargeUpScreen() ? 'inline' : 'overlay'"
     >
-      <nav class="d-flex flex-column w-100 h-100 p-5 pb-3">
-        <div class="df-sidenav-header flex-shrink-0" [class.df-sidenav-header-minimized]="_isMinimized()">
-          @if (searchable()) {
-            @if (_isMinimized()) {
-              <button
-                class="btn btn-outline-neutral df-btn-icononly mb-3 w-100 fa-search"
-                [class.df-sidenav-search-minimized]="!contentHasIcons()"
-                type="button"
-                (click)="focusSearch()"
-                i18n-aria-label="@@df.sidenav.search.ariaLabel"
-                aria-label="Search"
-              ></button>
-            } @else {
-              <div class="input-group mb-3">
-                <div class="input-group-prepend">
-                  <span class="input-group-text fa-light fa-search"></span>
-                </div>
-                <input
-                  type="search"
-                  class="form-control df-input-withicon"
-                  i18n-placeholder="@@df.sidenav.search.placeholder"
-                  placeholder="Search"
+      <div class="h-100 w-100">
+        <nav class="d-flex flex-column w-100 h-100 p-5 pb-3">
+          <div class="df-sidenav-header flex-shrink-0" [class.df-sidenav-header-minimized]="_isMinimized()">
+            @if (searchable()) {
+              @if (_isMinimized()) {
+                <button
+                  class="btn btn-outline-neutral df-btn-icononly mb-3 w-100 fa-search"
+                  [class.df-sidenav-search-minimized]="!contentHasIcons()"
+                  type="button"
+                  (click)="focusSearch()"
                   i18n-aria-label="@@df.sidenav.search.ariaLabel"
                   aria-label="Search"
-                  [(ngModel)]="searchTerm"
-                  #textInput
-                />
-                <div class="input-group-append">
-                  <button
-                    class="input-group-text fa-light fa-times"
-                    [class.df-sidenav-search-empty]="searchTerm() === ''"
-                    (click)="searchTerm.set(''); textInput.focus()"
-                  >
-                    <span class="visually-hidden" i18n="@@df.sidenav.search.clearText">Clear text</span>
-                  </button>
+                ></button>
+              } @else {
+                <div class="input-group mb-3">
+                  <div class="input-group-prepend">
+                    <span class="input-group-text fa-light fa-search"></span>
+                  </div>
+                  <input
+                    type="search"
+                    class="form-control df-input-withicon"
+                    i18n-placeholder="@@df.sidenav.search.placeholder"
+                    placeholder="Search"
+                    i18n-aria-label="@@df.sidenav.search.ariaLabel"
+                    aria-label="Search"
+                    [(ngModel)]="searchTerm"
+                    #textInput
+                  />
+                  <div class="input-group-append">
+                    <button
+                      class="input-group-text fa-light fa-times"
+                      [class.df-sidenav-search-empty]="searchTerm() === ''"
+                      (click)="searchTerm.set(''); textInput.focus()"
+                    >
+                      <span class="visually-hidden" i18n="@@df.sidenav.search.clearText">Clear text</span>
+                    </button>
+                  </div>
                 </div>
-              </div>
+              }
             }
-          }
-        </div>
+          </div>
 
-        <div role="list" class="sidenav-body flex-grow-1 overflow-y-auto" #scrollableContainer>
-          <ng-content />
-        </div>
-        @if (collapsible() && !isSmallScreen()) {
-          <div class="d-flex sidenav-footer flex-shrink-0 py-3">
-            <button
-              class="btn btn-outline-primary df-btn-icononly df-sidenav-toggle-minimized"
-              (click)="toggleMinimize()"
-              i18n-aria-label="@@df.sidenav.toggleMinimize.ariaLabel"
-              aria-label="Toggle minimized sidenav"
-            >
-              @if (isMinimized()) {
-                <span class="fa-arrow-right-to-line"></span>
-              } @else {
-                <span class="fa-arrow-left-to-line"></span>
-              }
-            </button>
+          <div role="list" class="sidenav-body flex-grow-1 overflow-y-auto" #scrollableContainer>
+            <ng-content />
           </div>
-        }
-      </nav>
+          @if (collapsible() && !isSmallScreen()) {
+            <div class="d-flex sidenav-footer flex-shrink-0 py-3">
+              <button
+                class="btn btn-outline-primary df-btn-icononly df-sidenav-toggle-minimized"
+                (click)="toggleMinimize()"
+                i18n-aria-label="@@df.sidenav.toggleMinimize.ariaLabel"
+                aria-label="Toggle minimized sidenav"
+              >
+                @if (isMinimized()) {
+                  <span class="fa-arrow-right-to-line"></span>
+                } @else {
+                  <span class="fa-arrow-left-to-line"></span>
+                }
+              </button>
+            </div>
+          }
+        </nav>
+      </div>
     </df-drawer>
-  `,
-                    imports: [FormsModule, DfDrawerComponent],
-                    host: {
+  `, imports: [FormsModule, DfDrawer], encapsulation: ViewEncapsulation.None, host: {
                         class: 'df-sidenav',
                         '[class.df-sidenav-lg]': 'isLargeUpScreen()',
                         '[class.df-sidenav-withicon]': 'contentHasIcons()',
                         '[class.d-none]': 'isSmallScreen() && _isMinimized()',
                         '[class.df-sidenav-drawer]': 'isMediumScreen() && !_isMinimized()'
-                    }
-                }]
-        }], ctorParameters: () => [], propDecorators: { searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], enableMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableMobile", required: false }] }], scrollableContainer: [{ type: i0.ViewChild, args: ['scrollableContainer', { isSignal: true }] }], searchInput: [{ type: i0.ViewChild, args: ['textInput', { isSignal: true }] }], allLinks: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DfSidenavLinkComponent), { ...{ descendants: true }, isSignal: true }] }], allItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DfSidenavItemComponent), { ...{ descendants: true }, isSignal: true }] }] } });
+                    }, styles: [".df-sidenav{position:relative;--sidenav-minWidth: 44px;width:var(--sidenav-minWidth)}.df-sidenav.df-sidenav-withicon{--sidenav-minWidth: 90px}.df-sidenav.df-sidenav-lg{width:auto}.df-sidenav.df-sidenav-lg .df-drawer{--df-drawer-size: max-content}.df-sidenav.df-sidenav-light-sky .sidenav-body{scrollbar-color:var(--df-color-primary-soft-default-foreground) var(--df-color-primary-subtle-background)}.df-sidenav.df-sidenav-light-sky .df-drawer,.df-sidenav.df-sidenav-light-sky .df-sidenav-button{background-color:var(--df-color-primary-subtle-background)}.df-sidenav .df-sidenav-search-empty{visibility:hidden}.df-sidenav .df-sidenav-mobile-drawer{top:var(--df-navbar-height, 56px)!important;height:calc(100vh - var(--df-navbar-height, 56px))!important}.df-sidenav nav{border-inline-end:1px solid var(--df-color-inert-neutral-main-border)}.df-sidenav.df-sidenav-drawer .df-drawer{z-index:2010}.df-sidenav .df-drawer{background-color:var(--df-color-inert-neutral-main-background);height:100%;--df-drawer-size: 0;--df-drawer-min-size: var(--sidenav-minWidth);--df-drawer-max-size: max-content;z-index:10;transition:none}.df-sidenav .df-drawer.df-inline-start{border:none}.df-sidenav .df-drawer.df-collapse-show{--df-drawer-size: max-content}.df-sidenav .df-drawer.df-collapse-hide{display:block}.df-sidenav .df-drawer.df-collapse-collapsing.df-collapse-horizontal{transition:none}.df-sidenav .df-sidenav-active{font-weight:var(--df-typo-weight-bold)}.df-sidenav .sidenav-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.df-sidenav .sidenav-label:before{content:attr(title);font-weight:var(--df-typo-weight-bold);visibility:hidden;height:0;overflow:hidden;display:block}.df-sidenav .df-sidenav-mobile-header{padding-block-end:var(--df-spacing-2);border-block-end:1px solid var(--df-color-neutral-alt-default-border);font-weight:var(--df-typo-weight-regular)}.df-sidenav .df-sidenav-mobile-header .df-sidenav-mobile-header-back-arrow{color:var(--df-color-primary-alt-default-foreground)}.df-sidenav .df-sidenav-mobile-header .df-sidenav-active .df-sidenav-mobile-header-back-arrow{color:var(--df-color-primary-alt-active-foreground)}.df-sidenav .sidenav-body{padding:var(--df-spacing-2);scrollbar-color:var(--df-color-primary-soft-default-foreground) var(--df-color-inert-neutral-main-background)}.df-sidenav .df-sidenav-search-minimized,.df-sidenav .df-sidenav-toggle-minimized{min-width:36px;position:relative;z-index:1}.df-sidenav .df-sidenav-header{padding-inline:var(--df-spacing-2);overflow:visible;position:relative}.df-sidenav .df-sidenav-header.df-sidenav-header-minimized{padding-inline:0}.df-sidenav .sidenav-footer{overflow:visible;position:relative}.df-sidenav [role=list] [role=listitem]{padding-inline-start:0}.df-sidenav [role=list] [role=listitem] [role=listitem]:not(.mobile){padding-inline-start:var(--df-spacing-6);position:relative}.df-sidenav [role=list] [role=listitem] [role=listitem]:not(.mobile):before{content:\"\";position:absolute;left:var(--df-spacing-5);top:0;bottom:0;width:1px;background-color:var(--df-color-neutral-soft-default-background)}.df-sidenav [role=list] [role=listitem] [role=listitem]:not(.mobile) [role=listitem]:not(.mobile){padding-inline-start:var(--df-spacing-6)}.df-sidenav .df-drawer-splitter{position:absolute;inset-block:0;inset-inline-end:-4px;width:1rem;cursor:ew-resize;background:transparent;display:flex;align-items:center;justify-content:center;touch-action:none}.df-sidenav .df-drawer-splitter .df-drawer-splitter-handle{--df-btn-bg: transparent;flex-shrink:0;transform:translate(40%);border:none;cursor:ew-resize}.df-sidenav .df-sidenav-button{--df-box-shadow-color: var(--df-color-focus-main-border);--df-btn-font-weight: var(--df-typo-weight-regular);background-color:var(--df-color-inert-neutral-main-background);padding-inline:var(--df-spacing-5);margin-block-end:1px;height:40px;border:none;position:relative}.df-sidenav .df-sidenav-button:focus-visible{z-index:1}.df-sidenav .df-sidenav-button.df-sidenav-breadcrumb-button{height:3rem}.df-sidenav .df-sidenav-button .df-sidenav-collapse-toggle{transition:transform .3s;color:var(--df-color-primary-alt-default-foreground)}.df-sidenav .df-sidenav-button .df-sidenav-collapse-toggle.expanded{transform:rotate(180deg)}.df-sidenav .df-sidenav-button:hover{background-color:var(--df-color-primary-alt-hovered-background)}.df-sidenav .df-sidenav-button:hover .df-sidenav-collapse-toggle{color:var(--df-color-primary-alt-hovered-foreground)}.df-sidenav .df-sidenav-button:active{background-color:var(--df-color-primary-alt-active-background)}.df-sidenav .df-sidenav-button:active .df-sidenav-collapse-toggle{color:var(--df-color-primary-alt-active-foreground)}.df-sidenav .df-sidenav-button.df-sidenav-active-level{font-weight:var(--df-typo-weight-bold);background-color:var(--df-color-primary-alt-active-background)}.df-sidenav .df-sidenav-button.df-sidenav-active-level:hover{background-color:var(--df-color-primary-alt-activeHovered-background)}.df-sidenav .df-sidenav-item-hidden{visibility:hidden;height:0}.df-sidenav .input-group.df-input-prepend .input-group-prepend{padding-inline-start:15px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], enableMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableMobile", required: false }] }], disableInitialDesktopAutoScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableInitialDesktopAutoScroll", required: false }] }], scrollableContainer: [{ type: i0.ViewChild, args: ['scrollableContainer', { isSignal: true }] }], searchInput: [{ type: i0.ViewChild, args: ['textInput', { isSignal: true }] }], allLinks: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DfSidenavLinkComponent), { ...{ descendants: true }, isSignal: true }] }], allItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DfSidenavItemComponent), { ...{ descendants: true }, isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.