@design-factory/angular 21.0.0-next.0

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

@@ -0,0 +1,1354 @@
+import { createNavManager, useDirectiveForHost } from '@agnos-ui/angular-headless';
+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 { 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';
+
+/**
+ * Base item class that is extended by desktop and mobile item components
+ * The item represents a container which can hold other items or links
+ * Handles collapsed state
+ * @internal
+ */
+class DfSidenavItemBaseComponent {
+    constructor() {
+        /**
+         * The label of the item
+         */
+        this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+        /**
+         * Collapsed state of the item
+         * Only used for the desktop version
+         * @default false
+         */
+        this.collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+        /**
+         * The icon class name or inline content (e.g., font awesome class)
+         * @default ''
+         */
+        this.icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        /**
+         * Whether the wrapper component has icon content (internally used)
+         * @default false
+         */
+        this.wrapperHasIconContent = input(false, ...(ngDevMode ? [{ debugName: "wrapperHasIconContent" }] : []));
+        this.sidenav = inject(DfSidenavComponent);
+        this.wrapperInstance = inject(DfSidenavItemComponent);
+        // check for the parent item to determine nesting level
+        this.parentItem = inject(DfSidenavItemComponent, {
+            optional: true,
+            skipSelf: true
+        });
+        this.isFirstLevel = this.parentItem?.['parentWrapper'] === null;
+        this.iconContent = contentChild('dfSidenavIcon', ...(ngDevMode ? [{ debugName: "iconContent" }] : []));
+        this.hasActiveLinks = computed(() => this.childLinks().some((link) => link?.isActiveLink()), ...(ngDevMode ? [{ debugName: "hasActiveLinks" }] : []));
+        this.hasActiveItems = computed(() => this.childItems().some((item) => item?.hasActiveLinks()), ...(ngDevMode ? [{ debugName: "hasActiveItems" }] : []));
+        this.hasActiveChildren = computed(() => this.hasActiveLinks() || this.hasActiveItems(), ...(ngDevMode ? [{ debugName: "hasActiveChildren" }] : []));
+        /**
+         * Computed signal indicating if the item has visible children
+         */
+        this.hasVisibleChildren = computed(() => this.childLinks().some((link) => link?.['isVisible']()), ...(ngDevMode ? [{ debugName: "hasVisibleChildren" }] : []));
+    }
+    /**
+     * Method to toggle the collapsed state of the item
+     * If the sidenav is minimized, it will expand it and uncollapse the item
+     */
+    toggleCollapse() {
+        if (this.sidenav.isMinimized()) {
+            this.sidenav.toggleMinimize(false);
+            this.collapsed.set(false);
+        }
+        else {
+            this.collapsed.set(!this.collapsed());
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSidenavItemBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.0.6", 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.0.6", 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 }] }] } });
+
+/**
+ * Component representing an item in the sidenav for desktop devices
+ * The item represents a container which can hold other items or links
+ * @internal
+ */
+class DfSidenavItemDesktopComponent extends DfSidenavItemBaseComponent {
+    constructor() {
+        super();
+        this.childLinks = computed(() => this.wrapperInstance['childrenLinks']().map((link) => link['desktopInstance']()), ...(ngDevMode ? [{ debugName: "childLinks" }] : []));
+        this.childItems = computed(() => this.wrapperInstance['childrenItems']().map((item) => item['desktopInstance']()), ...(ngDevMode ? [{ debugName: "childItems" }] : []));
+        this.isVisible = computed(() => {
+            const search = this.sidenav['searchTerm']().toLowerCase().trim() || '';
+            if (!search) {
+                return true;
+            }
+            return this.childLinks().some((link) => link?.['isVisible']());
+        }, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
+        // Automatically collapse when minimized
+        effect(() => {
+            if (this.sidenav.isMinimized()) {
+                this.collapsed.set(true);
+            }
+        });
+        // Auto-expand when searching and has visible children
+        effect(() => {
+            if (this.sidenav['searchTerm']().trim() && this.hasVisibleChildren()) {
+                this.collapsed.set(false);
+            }
+        });
+        // Auto-expand when the child is active and sidenav is not minimized
+        effect(() => {
+            if (this.hasActiveChildren() && !this.sidenav.isMinimized()) {
+                this.collapsed.set(false);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSidenavItemDesktopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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"
+      [class.df-sidenav-active]="hasActiveChildren()"
+      [class.w-100]="!sidenav.isMinimized()"
+      (click)="toggleCollapse()"
+      [attr.aria-expanded]="!collapsed()"
+      [class.justify-content-start]="!sidenav.isMinimized()"
+      [attr.aria-label]="label()"
+    >
+      <ng-content select="[dfSidenavIcon]" />
+      @if (icon()) {
+        <span class="{{ icon() }}"></span>
+      }
+      @if (!sidenav.isMinimized()) {
+        <span class="sidenav-label" [title]="label()">{{ label() }}</span>
+        <span
+          [class.expanded]="!collapsed()"
+          class="fa-light df-sidenav-collapse-toggle fa-chevron-down ms-auto"
+        ></span>
+      }
+    </button>
+
+    <div [class.d-none]="collapsed()" role="list">
+      <ng-container [ngTemplateOutlet]="content" />
+    </div>
+    <ng-template #content>
+      <ng-content />
+    </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.0.6", ngImport: i0, type: DfSidenavItemDesktopComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'df-sidenav-item-desktop',
+                    template: `
+    <button
+      class="btn df-sidenav-button d-flex gap-3"
+      [class.df-sidenav-active-level]="sidenav.isMinimized() && hasActiveChildren() && isFirstLevel"
+      [class.df-sidenav-active]="hasActiveChildren()"
+      [class.w-100]="!sidenav.isMinimized()"
+      (click)="toggleCollapse()"
+      [attr.aria-expanded]="!collapsed()"
+      [class.justify-content-start]="!sidenav.isMinimized()"
+      [attr.aria-label]="label()"
+    >
+      <ng-content select="[dfSidenavIcon]" />
+      @if (icon()) {
+        <span class="{{ icon() }}"></span>
+      }
+      @if (!sidenav.isMinimized()) {
+        <span class="sidenav-label" [title]="label()">{{ label() }}</span>
+        <span
+          [class.expanded]="!collapsed()"
+          class="fa-light df-sidenav-collapse-toggle fa-chevron-down ms-auto"
+        ></span>
+      }
+    </button>
+
+    <div [class.d-none]="collapsed()" role="list">
+      <ng-container [ngTemplateOutlet]="content" />
+    </div>
+    <ng-template #content>
+      <ng-content />
+    </ng-template>
+  `,
+                    host: {
+                        '[class.d-none]': '!isVisible() || (sidenav.isMinimized() && (!isFirstLevel || !wrapperHasIconContent()))'
+                    },
+                    imports: [NgTemplateOutlet]
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Component representing an item in the sidenav for mobile devices
+ * The item represents a container which can hold other items or links
+ * @internal
+ */
+class DfSidenavItemMobileComponent extends DfSidenavItemBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.childLinks = computed(() => this.wrapperInstance['childrenLinks']().map((link) => link['mobileInstance']()), ...(ngDevMode ? [{ debugName: "childLinks" }] : []));
+        this.childItems = computed(() => this.wrapperInstance['childrenItems']().map((item) => item['mobileInstance']()), ...(ngDevMode ? [{ debugName: "childItems" }] : []));
+        this.isSearching = computed(() => !!this.sidenav['searchTerm']().trim(), ...(ngDevMode ? [{ debugName: "isSearching" }] : []));
+        // Check if this item is in the navigation path (is an ancestor of current panel)
+        this.isInNavigationPath = computed(() => this.sidenav['mobileNavigationStack']().includes(this.wrapperInstance), ...(ngDevMode ? [{ debugName: "isInNavigationPath" }] : []));
+        // Check if this item should show as mobile header
+        this.shouldShowMobileHeader = computed(() => {
+            // Don't show header when searching
+            if (this.isSearching()) {
+                return false;
+            }
+            return this.sidenav['currentMobilePanel']() === this.wrapperInstance;
+        }, ...(ngDevMode ? [{ debugName: "shouldShowMobileHeader" }] : []));
+        // Determine if this item's children should be visible
+        this.shouldShowChildren = computed(() => {
+            // Mobile with search: show children to display matching links
+            if (this.isSearching()) {
+                return this.hasMatchingChildren();
+            }
+            // Mobile without search: show if this item is in the navigation path
+            return this.isInNavigationPath();
+        }, ...(ngDevMode ? [{ debugName: "shouldShowChildren" }] : []));
+        // Determine if this item should be visible in the list
+        this.isVisibleInList = computed(() => {
+            // Mobile with search: don't show items, only links (items just provide structure)
+            if (this.isSearching()) {
+                return false;
+            }
+            // Mobile without search: use navigation levels
+            const currentPanel = this.sidenav['currentMobilePanel']();
+            if (currentPanel === null) {
+                // Root level: show only first-level items
+                return this.isFirstLevel && this.isVisible();
+            }
+            else if (currentPanel === this.parentItem) {
+                // This is the active panel, don't show it in the list (it's in the header)
+                return false;
+            }
+            else {
+                // Show items whose parent matches the current panel
+                const parentMobile = this.parentItem?.['parentWrapper'];
+                return parentMobile === currentPanel && this.isVisible();
+            }
+        }, ...(ngDevMode ? [{ debugName: "isVisibleInList" }] : []));
+        // Determine if the entire component should be hidden
+        this.shouldHideComponent = computed(() => {
+            // Don't hide if this is the current mobile panel showing its children
+            if (this.shouldShowMobileHeader()) {
+                return false;
+            }
+            // Otherwise, use the regular visibility logic
+            return !this.isVisibleInList() && !this.shouldShowChildren();
+        }, ...(ngDevMode ? [{ debugName: "shouldHideComponent" }] : []));
+        this.isVisible = computed(() => {
+            const search = this.sidenav['searchTerm']().toLowerCase().trim() || '';
+            if (!search) {
+                return true;
+            }
+            // Check if this item's label matches
+            return String(this.label()).toLowerCase().includes(search);
+        }, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
+        // Check if this item has any matching children (for showing the container)
+        this.hasMatchingChildren = computed(() => {
+            const search = this.sidenav['searchTerm']().toLowerCase().trim() || '';
+            if (!search) {
+                return false;
+            }
+            return this.childLinks().some((link) => link?.['isVisible']());
+        }, ...(ngDevMode ? [{ debugName: "hasMatchingChildren" }] : []));
+    }
+    /**
+     * Handle click event on the item
+     */
+    handleItemClick() {
+        this.sidenav.navigateToChildren(this.wrapperInstance);
+    }
+    /**
+     * Handle click event on the header back button
+     */
+    handleBackClick() {
+        this.sidenav.navigateBack();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSidenavItemMobileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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
+          class="btn w-100 d-flex gap-0 align-items-center justify-content-start df-sidenav-button"
+          (click)="handleBackClick()"
+          [class.df-sidenav-active]="hasActiveChildren()"
+        >
+          <span class="fa-light df-sidenav-mobile-header-back-arrow fa-arrow-left me-4"></span>
+          <ng-content select="[dfSidenavIcon]" />
+          @if (icon()) {
+            <span class="{{ icon() }}"></span>
+          }
+          <span class="ms-3 sidenav-label">{{ label() }}</span>
+        </button>
+      </div>
+    }
+
+    <!-- Regular item button (hidden when it's the active mobile panel) -->
+    @if (isVisibleInList()) {
+      <!-- Mobile search: Show as breadcrumb/path (non-clickable) -->
+      @if (isSearching()) {
+        <div class="btn w-100 d-flex gap-3 justify-content-start text-muted disabled pe-none">
+          <ng-content select="[dfSidenavIcon]" />
+          @if (icon()) {
+            <span class="{{ icon() }}"></span>
+          }
+          <span class="sidenav-label" [title]="label()">{{ label() }}</span>
+          <span class="fa-light df-sidenav-collapse-toggle fa-chevron-right ms-auto"></span>
+        </div>
+      } @else {
+        <!-- Regular clickable button -->
+        <button
+          class="btn w-100 d-flex gap-3 justify-content-start df-sidenav-button"
+          (click)="handleItemClick()"
+          [class.df-sidenav-active]="hasActiveChildren()"
+        >
+          <ng-content select="[dfSidenavIcon]" />
+          @if (icon()) {
+            <span class="{{ icon() }}"></span>
+          }
+          <span class="sidenav-label" [title]="label()">{{ label() }}</span>
+          <!-- Mobile: Show forward arrow for items with children -->
+          <span class="fa-light df-sidenav-collapse-toggle fa-chevron-right ms-auto"></span>
+        </button>
+      }
+    }
+
+    <!-- Children container - rendered separately from the button -->
+    @if (shouldShowChildren()) {
+      <div role="list" class="mobile">
+        <ng-container [ngTemplateOutlet]="content" />
+      </div>
+    }
+
+    <ng-template #content>
+      <ng-content />
+    </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.0.6", ngImport: i0, type: DfSidenavItemMobileComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'df-sidenav-item-mobile',
+                    template: `
+    @if (shouldShowMobileHeader()) {
+      <div class="df-sidenav-mobile-header mobile mb-2" role="listitem">
+        <button
+          class="btn w-100 d-flex gap-0 align-items-center justify-content-start df-sidenav-button"
+          (click)="handleBackClick()"
+          [class.df-sidenav-active]="hasActiveChildren()"
+        >
+          <span class="fa-light df-sidenav-mobile-header-back-arrow fa-arrow-left me-4"></span>
+          <ng-content select="[dfSidenavIcon]" />
+          @if (icon()) {
+            <span class="{{ icon() }}"></span>
+          }
+          <span class="ms-3 sidenav-label">{{ label() }}</span>
+        </button>
+      </div>
+    }
+
+    <!-- Regular item button (hidden when it's the active mobile panel) -->
+    @if (isVisibleInList()) {
+      <!-- Mobile search: Show as breadcrumb/path (non-clickable) -->
+      @if (isSearching()) {
+        <div class="btn w-100 d-flex gap-3 justify-content-start text-muted disabled pe-none">
+          <ng-content select="[dfSidenavIcon]" />
+          @if (icon()) {
+            <span class="{{ icon() }}"></span>
+          }
+          <span class="sidenav-label" [title]="label()">{{ label() }}</span>
+          <span class="fa-light df-sidenav-collapse-toggle fa-chevron-right ms-auto"></span>
+        </div>
+      } @else {
+        <!-- Regular clickable button -->
+        <button
+          class="btn w-100 d-flex gap-3 justify-content-start df-sidenav-button"
+          (click)="handleItemClick()"
+          [class.df-sidenav-active]="hasActiveChildren()"
+        >
+          <ng-content select="[dfSidenavIcon]" />
+          @if (icon()) {
+            <span class="{{ icon() }}"></span>
+          }
+          <span class="sidenav-label" [title]="label()">{{ label() }}</span>
+          <!-- Mobile: Show forward arrow for items with children -->
+          <span class="fa-light df-sidenav-collapse-toggle fa-chevron-right ms-auto"></span>
+        </button>
+      }
+    }
+
+    <!-- Children container - rendered separately from the button -->
+    @if (shouldShowChildren()) {
+      <div role="list" class="mobile">
+        <ng-container [ngTemplateOutlet]="content" />
+      </div>
+    }
+
+    <ng-template #content>
+      <ng-content />
+    </ng-template>
+  `,
+                    host: {
+                        class: 'mobile',
+                        '[class.d-none]': 'shouldHideComponent() || (sidenav.isMinimized() && (!isFirstLevel || !wrapperHasIconContent()))'
+                    },
+                    imports: [NgTemplateOutlet]
+                }]
+        }] });
+
+/**
+ * Base link class that is extended by desktop and mobile link components
+ * @internal
+ */
+class DfSidenavLinkBaseComponent {
+    constructor() {
+        /**
+         * The router link path for to the link
+         */
+        this.linkPath = input.required(...(ngDevMode ? [{ debugName: "linkPath" }] : []));
+        /**
+         * The label of the link
+         */
+        this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+        /**
+         * The icon class name or inline content (e.g., font awesome class)
+         */
+        this.icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        /**
+         * Whether the wrapper component has icon content (internally used)
+         */
+        this.wrapperHasIconContent = input(false, ...(ngDevMode ? [{ debugName: "wrapperHasIconContent" }] : []));
+        /**
+         * Indicates if the link is currently active based on the Router state
+         */
+        this.isActiveLink = signal(false, ...(ngDevMode ? [{ debugName: "isActiveLink" }] : []));
+        /**
+         * 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,
+            skipSelf: true
+        });
+        this.isFirstLevel = this.parentItem === null;
+        this.iconContent = contentChild('dfSidenavIcon', ...(ngDevMode ? [{ debugName: "iconContent" }] : []));
+        /**
+         * Computed signal indicating if the link is visible based on search term
+         */
+        this.isVisible = computed(() => {
+            const search = this.sidenav['searchTerm']().toLowerCase().trim() || '';
+            if (!search) {
+                return true;
+            }
+            return this.label().toLowerCase().includes(search);
+        }, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSidenavLinkBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.0.6", 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.0.6", 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 }] }] } });
+
+/**
+ * Component representing a leaf in the sidenav for desktop devices
+ * @internal
+ */
+class DfSidenavLinkDesktopComponent extends DfSidenavLinkBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.anchor = viewChild.required('anchor');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSidenavLinkDesktopComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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()"
+      routerLinkActive="df-sidenav-active-level"
+      ariaCurrentWhenActive="page"
+      (isActiveChange)="isActiveLink.set($event)"
+      [routerLink]="linkPath()"
+      [class.justify-content-start]="!sidenav.isMinimized()"
+      [routerLinkActiveOptions]="routerLinkActiveOptions()"
+      [attr.aria-label]="label()"
+      (click)="isSmallScreen() && sidenav.toggleMinimize()"
+      #anchor
+    >
+      <ng-container [ngTemplateOutlet]="content" />
+    </a>
+    <ng-template #content>
+      <ng-content select="[dfSidenavIcon]" />
+      @if (icon()) {
+        <span class="{{ icon() }}"></span>
+      }
+      @if (!sidenav.isMinimized()) {
+        <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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSidenavLinkDesktopComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'df-sidenav-link-desktop',
+                    template: `
+    <a
+      class="btn df-sidenav-button d-flex gap-3"
+      [class.w-100]="!sidenav.isMinimized()"
+      routerLinkActive="df-sidenav-active-level"
+      ariaCurrentWhenActive="page"
+      (isActiveChange)="isActiveLink.set($event)"
+      [routerLink]="linkPath()"
+      [class.justify-content-start]="!sidenav.isMinimized()"
+      [routerLinkActiveOptions]="routerLinkActiveOptions()"
+      [attr.aria-label]="label()"
+      (click)="isSmallScreen() && sidenav.toggleMinimize()"
+      #anchor
+    >
+      <ng-container [ngTemplateOutlet]="content" />
+    </a>
+    <ng-template #content>
+      <ng-content select="[dfSidenavIcon]" />
+      @if (icon()) {
+        <span class="{{ icon() }}"></span>
+      }
+      @if (!sidenav.isMinimized()) {
+        <span class="sidenav-label" [title]="label()">{{ label() }}</span>
+      }
+    </ng-template>
+  `,
+                    host: {
+                        '[class.d-none]': '!isVisible() || (sidenav.isMinimized() && (!isFirstLevel || !wrapperHasIconContent()))',
+                        class: 'd-flex'
+                    },
+                    imports: [RouterModule, NgTemplateOutlet]
+                }]
+        }], propDecorators: { anchor: [{ type: i0.ViewChild, args: ['anchor', { isSignal: true }] }] } });
+
+/**
+ * Component representing a leaf in the sidenav for mobile devices
+ * @internal
+ */
+class DfSidenavLinkMobileComponent extends DfSidenavLinkBaseComponent {
+    constructor() {
+        super(...arguments);
+        // Inject link wrapper to get parent wrapper reference
+        this.linkWrapper = inject(DfSidenavLinkComponent);
+        this.currentMobilePanel = computed(() => this.sidenav['currentMobilePanel']() ?? null, ...(ngDevMode ? [{ debugName: "currentMobilePanel" }] : []));
+        this.isSearching = computed(() => !!this.sidenav['searchTerm']().trim(), ...(ngDevMode ? [{ debugName: "isSearching" }] : []));
+        this.isVisibleInList = computed(() => {
+            const currentPanel = this.currentMobilePanel();
+            const parentWrapper = this.linkWrapper['parentWrapper'];
+            // Mobile with search: show all matching links regardless of level
+            if (this.isSearching()) {
+                return this.isVisible();
+            }
+            // Mobile without search: use navigation levels
+            if (currentPanel === null) {
+                // Root level: show only first-level links
+                return this.isFirstLevel && this.isVisible();
+            }
+            else {
+                // Show links whose parent item wrapper matches the current panel
+                return parentWrapper === currentPanel && this.isVisible();
+            }
+        }, ...(ngDevMode ? [{ debugName: "isVisibleInList" }] : []));
+        // Build breadcrumb path for mobile search view
+        this.breadcrumbPath = computed(() => {
+            const path = [];
+            let currentItem = this.parentItem;
+            // Walk up the parent chain
+            while (currentItem?.label()) {
+                path.unshift(String(currentItem.label()));
+                const grandParent = currentItem?.['parentWrapper'];
+                currentItem = grandParent || null;
+            }
+            return path;
+        }, ...(ngDevMode ? [{ debugName: "breadcrumbPath" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSidenavLinkMobileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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"
+      ariaCurrentWhenActive="page"
+      (isActiveChange)="isActiveLink.set($event)"
+      [routerLink]="linkPath()"
+      [routerLinkActiveOptions]="routerLinkActiveOptions()"
+      (click)="isSmallScreen() && sidenav.toggleMinimize()"
+    >
+      <ng-container [ngTemplateOutlet]="content" />
+    </a>
+    <ng-template #content>
+      <div class="d-flex gap-3 w-100">
+        <ng-content select="[dfSidenavIcon]" />
+        @if (icon()) {
+          <span class="{{ icon() }}"></span>
+        }
+        <div class="d-flex flex-column align-items-start">
+          <span class="sidenav-label" [title]="label()">{{ label() }}</span>
+          @if (isSearching() && breadcrumbPath().length > 0) {
+            <small class="d-flex align-items-center gap-1" [class.text-muted]="!isActiveLink()">
+              @for (item of breadcrumbPath(); track $index) {
+                <span>{{ item }}</span>
+                @if (!$last) {
+                  <span class="fa-arrow-right"></span>
+                }
+              }
+            </small>
+          }
+        </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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSidenavLinkMobileComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'df-sidenav-link-mobile',
+                    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"
+      ariaCurrentWhenActive="page"
+      (isActiveChange)="isActiveLink.set($event)"
+      [routerLink]="linkPath()"
+      [routerLinkActiveOptions]="routerLinkActiveOptions()"
+      (click)="isSmallScreen() && sidenav.toggleMinimize()"
+    >
+      <ng-container [ngTemplateOutlet]="content" />
+    </a>
+    <ng-template #content>
+      <div class="d-flex gap-3 w-100">
+        <ng-content select="[dfSidenavIcon]" />
+        @if (icon()) {
+          <span class="{{ icon() }}"></span>
+        }
+        <div class="d-flex flex-column align-items-start">
+          <span class="sidenav-label" [title]="label()">{{ label() }}</span>
+          @if (isSearching() && breadcrumbPath().length > 0) {
+            <small class="d-flex align-items-center gap-1" [class.text-muted]="!isActiveLink()">
+              @for (item of breadcrumbPath(); track $index) {
+                <span>{{ item }}</span>
+                @if (!$last) {
+                  <span class="fa-arrow-right"></span>
+                }
+              }
+            </small>
+          }
+        </div>
+      </div>
+    </ng-template>
+  `,
+                    host: {
+                        '[class.d-none]': '!isVisibleInList() || (sidenav.isMinimized() && (!isFirstLevel || !wrapperHasIconContent()))',
+                        class: 'd-flex'
+                    },
+                    imports: [RouterModule, NgTemplateOutlet]
+                }]
+        }] });
+
+/**
+ * Utility directive for marking icon content in sidenav items and links.
+ * Needed for identification of the projected icon content.
+ * Use in case if there is no icon provided with font-awesome.
+ * @since 21.0.0
+ */
+class DfSidenavIconDirective {
+    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: "[dfSidenavIcon]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSidenavIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dfSidenavIcon]'
+                }]
+        }] });
+
+/**
+ * Sidenav link that can be used inside <df-sidenav-item> or directly inside the <df-sidenav>
+ * @since 21.0.0
+ */
+class DfSidenavLinkComponent {
+    constructor() {
+        /**
+         * The router link path for to the link
+         */
+        this.linkPath = input.required(...(ngDevMode ? [{ debugName: "linkPath" }] : []));
+        /**
+         * The label of the link
+         */
+        this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+        /**
+         * The icon class name or inline content (e.g., font awesome class)
+         */
+        this.icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        /**
+         * Options to determine when the router link is considered active
+         */
+        this.routerLinkActiveOptions = input({ exact: false }, ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : []));
+        /**
+         * The parent wrapper item component (if any)
+         */
+        this.parentWrapper = inject(DfSidenavItemComponent, {
+            optional: true,
+            skipSelf: true
+        });
+        /**
+         * Reference to the desktop link component instance
+         */
+        this.desktopInstance = viewChild(DfSidenavLinkDesktopComponent, ...(ngDevMode ? [{ debugName: "desktopInstance" }] : []));
+        /**
+         * Reference to the mobile link component instance
+         */
+        this.mobileInstance = viewChild(DfSidenavLinkMobileComponent, ...(ngDevMode ? [{ debugName: "mobileInstance" }] : []));
+        this.iconContentQuery = contentChild(DfSidenavIconDirective, ...(ngDevMode ? [{ debugName: "iconContentQuery" }] : []));
+        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.0.6", ngImport: i0, type: DfSidenavLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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>
+    <ng-template #defaultContent>
+      <ng-content />
+    </ng-template>
+
+    @if (sidenav['isMobileDevice']) {
+      <df-sidenav-link-mobile
+        [linkPath]="linkPath()"
+        [label]="label()"
+        [icon]="icon()"
+        [wrapperHasIconContent]="wrapperHasIconContent()"
+        [routerLinkActiveOptions]="routerLinkActiveOptions()"
+      >
+        <ng-container [ngTemplateOutlet]="iconSlot" ngProjectAs="[dfSidenavIcon]" />
+        <ng-container [ngTemplateOutlet]="defaultContent" />
+      </df-sidenav-link-mobile>
+    } @else {
+      <df-sidenav-link-desktop
+        [linkPath]="linkPath()"
+        [label]="label()"
+        [icon]="icon()"
+        [wrapperHasIconContent]="wrapperHasIconContent()"
+        [routerLinkActiveOptions]="routerLinkActiveOptions()"
+      >
+        <ng-container [ngTemplateOutlet]="iconSlot" ngProjectAs="[dfSidenavIcon]" />
+        <ng-container [ngTemplateOutlet]="defaultContent" />
+      </df-sidenav-link-desktop>
+    }
+  `, 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.0.6", ngImport: i0, type: DfSidenavLinkComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'df-sidenav-link',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <ng-template #iconSlot>
+      <ng-content select="[dfSidenavIcon]" />
+    </ng-template>
+    <ng-template #defaultContent>
+      <ng-content />
+    </ng-template>
+
+    @if (sidenav['isMobileDevice']) {
+      <df-sidenav-link-mobile
+        [linkPath]="linkPath()"
+        [label]="label()"
+        [icon]="icon()"
+        [wrapperHasIconContent]="wrapperHasIconContent()"
+        [routerLinkActiveOptions]="routerLinkActiveOptions()"
+      >
+        <ng-container [ngTemplateOutlet]="iconSlot" ngProjectAs="[dfSidenavIcon]" />
+        <ng-container [ngTemplateOutlet]="defaultContent" />
+      </df-sidenav-link-mobile>
+    } @else {
+      <df-sidenav-link-desktop
+        [linkPath]="linkPath()"
+        [label]="label()"
+        [icon]="icon()"
+        [wrapperHasIconContent]="wrapperHasIconContent()"
+        [routerLinkActiveOptions]="routerLinkActiveOptions()"
+      >
+        <ng-container [ngTemplateOutlet]="iconSlot" ngProjectAs="[dfSidenavIcon]" />
+        <ng-container [ngTemplateOutlet]="defaultContent" />
+      </df-sidenav-link-desktop>
+    }
+  `,
+                    imports: [DfSidenavLinkDesktopComponent, DfSidenavLinkMobileComponent, NgTemplateOutlet],
+                    host: {
+                        role: 'listitem',
+                        class: 'd-block',
+                        '[class.mobile]': "sidenav['isMobileDevice']"
+                    }
+                }]
+        }], 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 }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }], desktopInstance: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DfSidenavLinkDesktopComponent), { isSignal: true }] }], mobileInstance: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DfSidenavLinkMobileComponent), { isSignal: true }] }], iconContentQuery: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfSidenavIconDirective), { isSignal: true }] }] } });
+
+/**
+ * Sidenav element that should be nested inside <df-sidenav> or <df-sidenav-item>
+ * @since 21.0.0
+ */
+class DfSidenavItemComponent {
+    constructor() {
+        /**
+         * Label of the sidenav item
+         */
+        this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+        /**
+         * Flag whether the sidenav item is collapsed
+         * @default false
+         */
+        this.collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+        /**
+         * Optional icon class for the sidenav item
+         */
+        this.icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        /**
+         * Reference to the parent element containing this item
+         */
+        this.parentWrapper = inject(DfSidenavItemComponent, {
+            optional: true,
+            skipSelf: true
+        });
+        /**
+         * Child sidenav items nested inside this item
+         */
+        this.childrenItems = contentChildren(DfSidenavItemComponent, { ...(ngDevMode ? { debugName: "childrenItems" } : {}), descendants: true });
+        /**
+         * Child sidenav links nested inside this item
+         */
+        this.childrenLinks = contentChildren(DfSidenavLinkComponent, { ...(ngDevMode ? { debugName: "childrenLinks" } : {}), descendants: true });
+        /**
+         * Reference to the desktop instance of the sidenav item
+         */
+        this.desktopInstance = viewChild(DfSidenavItemDesktopComponent, ...(ngDevMode ? [{ debugName: "desktopInstance" }] : []));
+        /**
+         * Reference to the mobile instance of the sidenav item
+         */
+        this.mobileInstance = viewChild(DfSidenavItemMobileComponent, ...(ngDevMode ? [{ debugName: "mobileInstance" }] : []));
+        this.iconContentQuery = contentChild(DfSidenavIconDirective, ...(ngDevMode ? [{ debugName: "iconContentQuery" }] : []));
+        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.0.6", ngImport: i0, type: DfSidenavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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>
+    <ng-template #content>
+      <ng-content />
+    </ng-template>
+
+    @if (sidenav['isMobileDevice']) {
+      <df-sidenav-item-mobile
+        [label]="label()"
+        [(collapsed)]="collapsed"
+        [icon]="icon()"
+        [wrapperHasIconContent]="wrapperHasIconContent()"
+      >
+        <ng-container [ngTemplateOutlet]="iconSlot" ngProjectAs="[dfSidenavIcon]" />
+        <ng-container [ngTemplateOutlet]="content" />
+      </df-sidenav-item-mobile>
+    } @else {
+      <df-sidenav-item-desktop
+        [label]="label()"
+        [(collapsed)]="collapsed"
+        [icon]="icon()"
+        [wrapperHasIconContent]="wrapperHasIconContent()"
+      >
+        <ng-container [ngTemplateOutlet]="iconSlot" ngProjectAs="[dfSidenavIcon]" />
+        <ng-container [ngTemplateOutlet]="content" />
+      </df-sidenav-item-desktop>
+    }
+  `, 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.0.6", ngImport: i0, type: DfSidenavItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'df-sidenav-item',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <ng-template #iconSlot>
+      <ng-content select="[dfSidenavIcon]" />
+    </ng-template>
+    <ng-template #content>
+      <ng-content />
+    </ng-template>
+
+    @if (sidenav['isMobileDevice']) {
+      <df-sidenav-item-mobile
+        [label]="label()"
+        [(collapsed)]="collapsed"
+        [icon]="icon()"
+        [wrapperHasIconContent]="wrapperHasIconContent()"
+      >
+        <ng-container [ngTemplateOutlet]="iconSlot" ngProjectAs="[dfSidenavIcon]" />
+        <ng-container [ngTemplateOutlet]="content" />
+      </df-sidenav-item-mobile>
+    } @else {
+      <df-sidenav-item-desktop
+        [label]="label()"
+        [(collapsed)]="collapsed"
+        [icon]="icon()"
+        [wrapperHasIconContent]="wrapperHasIconContent()"
+      >
+        <ng-container [ngTemplateOutlet]="iconSlot" ngProjectAs="[dfSidenavIcon]" />
+        <ng-container [ngTemplateOutlet]="content" />
+      </df-sidenav-item-desktop>
+    }
+  `,
+                    imports: [DfSidenavItemDesktopComponent, DfSidenavItemMobileComponent, NgTemplateOutlet],
+                    host: {
+                        role: 'listitem',
+                        class: 'd-block',
+                        '[class.mobile]': "sidenav['isMobileDevice']"
+                    }
+                }]
+        }], 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 }] }], childrenItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DfSidenavItemComponent), { ...{ descendants: true }, isSignal: true }] }], childrenLinks: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DfSidenavLinkComponent), { ...{ descendants: true }, isSignal: true }] }], desktopInstance: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DfSidenavItemDesktopComponent), { isSignal: true }] }], mobileInstance: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DfSidenavItemMobileComponent), { isSignal: true }] }], iconContentQuery: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfSidenavIconDirective), { isSignal: true }] }] } });
+
+/**
+ * Utility method to check if the user agent is a mobile device
+ *
+ * @param userAgent - The user agent string to check
+ * @returns `true` if the user agent corresponds to a mobile device, `false` otherwise
+ */
+function isMobileUserAgent(userAgent) {
+    return /mobile|android|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
+}
+/**
+ * SideNav is a component to provide navigation feature with a panel on the side of your page
+ * @since 21.0.0
+ */
+class DfSidenavComponent {
+    constructor() {
+        /**
+         * Flag whether the sidenav includes a search input
+         * @default false
+         */
+        this.searchable = input(false, { ...(ngDevMode ? { debugName: "searchable" } : {}), transform: booleanAttribute });
+        /**
+         * The container element for the sidenav (null for body)
+         * @default null
+         */
+        this.container = input(null, ...(ngDevMode ? [{ debugName: "container" }] : []));
+        /**
+         * Flag whether the sidenav should be resizable
+         * @default false
+         */
+        this.resizable = input(false, { ...(ngDevMode ? { debugName: "resizable" } : {}), transform: booleanAttribute });
+        /**
+         * Flag whether the sidenav should have the collapse button
+         * @default false
+         */
+        this.collapsible = input(false, { ...(ngDevMode ? { debugName: "collapsible" } : {}), transform: booleanAttribute });
+        /**
+         * Flag to enable mobile device detection for responsive behavior
+         * @default true
+         */
+        this.enableMobile = input(true, { ...(ngDevMode ? { debugName: "enableMobile" } : {}), 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) {
+                return true;
+            }
+            // in desktop, we track the large screen signal in order to reset the minimized state
+            // it allows resizing the window and have a more user-friendly behavior
+            return !this.isLargeUpScreen();
+        }, ...(ngDevMode ? [{ debugName: "_isMinimized" }] : []));
+        /**
+         * Flag to indicate if the sidenav is minimized
+         */
+        this.isMinimized = computed(() => this._isMinimized(), ...(ngDevMode ? [{ debugName: "isMinimized" }] : []));
+        this.hostRef = inject((ElementRef));
+        this.scrollableContainer = viewChild.required('scrollableContainer');
+        this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+        this.isMobileDevice = (() => {
+            if (this.isBrowser) {
+                return this.enableMobile() && isMobileUserAgent(navigator.userAgent);
+            }
+            else {
+                // SSR: try to get request if available
+                try {
+                    const request = inject(Request, { optional: true });
+                    if (request && 'headers' in request) {
+                        const userAgent = request.headers.get('user-agent') || '';
+                        return this.enableMobile() && isMobileUserAgent(userAgent);
+                    }
+                }
+                catch {
+                    // Request token not available or not in SSR context
+                }
+                return false;
+            }
+        })();
+        this.searchInput = viewChild('textInput', ...(ngDevMode ? [{ debugName: "searchInput" }] : []));
+        // Query all links to find active ones
+        this.allLinks = contentChildren(DfSidenavLinkComponent, { ...(ngDevMode ? { debugName: "allLinks" } : {}), descendants: true });
+        this.allItems = contentChildren(DfSidenavItemComponent, { ...(ngDevMode ? { debugName: "allItems" } : {}), descendants: true });
+        this.width = signal(null, ...(ngDevMode ? [{ debugName: "width" }] : []));
+        this.savedWidth = null;
+        this.searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+        // Mobile navigation stack - tracks which item's children are currently displayed
+        // Using component references instead of labels for uniqueness
+        this.mobileNavigationStack = signal([], ...(ngDevMode ? [{ debugName: "mobileNavigationStack" }] : []));
+        this.currentMobilePanel = computed(() => {
+            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.isMobileOrSmallScreen = computed(() => this.isSmallScreen() || this.isMediumScreen(), ...(ngDevMode ? [{ debugName: "isMobileOrSmallScreen" }] : []));
+        this.backdrop = computed(() => this.isMediumScreen(), ...(ngDevMode ? [{ debugName: "backdrop" }] : []));
+        this.navManager = createNavManager();
+        this.navManagerConfig = {
+            selector: (node) => node.querySelectorAll('input, button, a'),
+            keys: {
+                Home: this.navManager.focusFirst,
+                End: this.navManager.focusLast
+            }
+        };
+        this.injector = inject(Injector);
+        this.contentHasIcons = computed(() => this.allItems().some((item) => item['wrapperHasIconContent']()) ||
+            this.allLinks().some((link) => link['wrapperHasIconContent']()), ...(ngDevMode ? [{ debugName: "contentHasIcons" }] : []));
+        useDirectiveForHost(this.navManager.directive, this.navManagerConfig);
+        afterRenderEffect(() => {
+            if (this.isBrowser) {
+                if (this.isMobileDevice && !this._isMinimized()) {
+                    // Delay to ensure DOM and contentChildren queries are ready
+                    this.navigateToActiveItem();
+                }
+                // Keep track of the screen size changes to reset width
+                if (this.isMediumScreen() || this.isSmallScreen() || this.isLargeUpScreen()) {
+                    this.width.set(null);
+                }
+            }
+        });
+    }
+    ngAfterContentInit() {
+        if (!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.
+     */
+    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'];
+            }
+            // 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 });
+        }
+    }
+    /**
+     * Toggles the minimized state of the sidenav
+     *
+     * @param minimized - Optional parameter to explicitly set the minimized state
+     *
+     */
+    toggleMinimize(minimized = !this._isMinimized()) {
+        if (minimized) {
+            this.savedWidth = this.width();
+            this.width.set(0);
+        }
+        else {
+            this.width.set(this.savedWidth);
+        }
+        this._isMinimized.set(minimized);
+    }
+    /**
+     * Handles visibility changes of the sidenav component to handle the component state accordingly.
+     *
+     * @param isVisible - Boolean indicating whether the sidenav is currently visible
+     */
+    visibleChangeHandler(isVisible) {
+        if (!isVisible) {
+            this.width.set(0);
+        }
+        this._isMinimized.set(!isVisible);
+    }
+    /**
+     * Handles changes when the sidenav is resized, to handle the state accordingly.
+     *
+     * @param isResizing - Whether the sidenav is currently being resized
+     */
+    resizingChangeHandler(isResizing) {
+        if (isResizing) {
+            this._isMinimized.set(false);
+        }
+        else {
+            if (this._isMinimized()) {
+                this.width.set(0);
+            }
+            else {
+                this.savedWidth = this.width();
+            }
+        }
+    }
+    // utility to transfer focus from the button when minimized to the search input when uncollapsed
+    focusSearch() {
+        this.toggleMinimize(false);
+        setTimeout(() => {
+            this.searchInput()?.nativeElement.focus();
+        });
+    }
+    /**
+     * Method to add the given item to the mobile navigation stack
+     * @param itemRef item to be added to the navigation stack
+     */
+    navigateToChildren(itemRef) {
+        const stack = this.mobileNavigationStack();
+        this.mobileNavigationStack.set([...stack, itemRef]);
+    }
+    /**
+     * Method to navigate back in the mobile navigation stack
+     */
+    navigateBack() {
+        const stack = this.mobileNavigationStack();
+        if (stack.length > 0) {
+            this.mobileNavigationStack.set(stack.slice(0, -1));
+        }
+    }
+    /**
+     * Navigates to the active item in the sidenav
+     * Expands parent items (desktop) and sets up mobile navigation stack
+     */
+    navigateToActiveItem() {
+        if (!this.isBrowser) {
+            return;
+        }
+        // Find the first active link
+        const activeLink = this.allLinks()
+            .find((link) => link['mobileInstance']()?.isActiveLink())?.['mobileInstance']();
+        if (activeLink && activeLink['parentItem']) {
+            // Build the path from root to the active link's parent (inclusive)
+            const navigationPath = [];
+            let current = activeLink['parentItem'];
+            while (current) {
+                navigationPath.unshift(current); // Add to beginning to build path from root
+                current = current['parentWrapper'];
+            }
+            this.mobileNavigationStack.set(navigationPath);
+        }
+        else if (activeLink && !activeLink['parentItem']) {
+            // Clear navigation stack to show root level
+            this.mobileNavigationStack.set([]);
+        }
+    }
+    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", inputs: { searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "container", 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: `
+    <df-drawer
+      #drawer
+      className="inline-start {{ isSmallScreen() ? 'df-sidenav-mobile-drawer' : '' }}"
+      [visible]="!_isMinimized()"
+      (visibleChange)="visibleChangeHandler($event)"
+      (minimizedChange)="_isMinimized.set($event)"
+      (resizingChange)="resizingChangeHandler($event)"
+      [bodyScroll]="true"
+      [backdrop]="backdrop()"
+      [(size)]="width"
+      [container]="isSmallScreen() ? null : hostRef.nativeElement"
+      [resizable]="resizable() && !isSmallScreen()"
+    >
+      <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"
+                  i18n-aria-label="@@df.sidenav.search.ariaLabel"
+                  aria-label="Search"
+                  [(ngModel)]="searchTerm"
+                  #textInput
+                />
+                <div class="input-group-append" [class.df-is-empty]="searchTerm() === ''">
+                  <button class="input-group-text fa-light fa-times" (click)="searchTerm.set(''); textInput.focus()">
+                    <span class="visually-hidden" i18n="@@df.sidenav.search.clearText">Clear text</span>
+                  </button>
+                </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>
+        }
+      </nav>
+    </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", "enableMobile"], outputs: ["sizeChange", "visibleChange", "minimizedChange", "maximizedChange", "resizingChange", "minSize", "maxSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfSidenavComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'df-sidenav',
+                    template: `
+    <df-drawer
+      #drawer
+      className="inline-start {{ isSmallScreen() ? 'df-sidenav-mobile-drawer' : '' }}"
+      [visible]="!_isMinimized()"
+      (visibleChange)="visibleChangeHandler($event)"
+      (minimizedChange)="_isMinimized.set($event)"
+      (resizingChange)="resizingChangeHandler($event)"
+      [bodyScroll]="true"
+      [backdrop]="backdrop()"
+      [(size)]="width"
+      [container]="isSmallScreen() ? null : hostRef.nativeElement"
+      [resizable]="resizable() && !isSmallScreen()"
+    >
+      <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"
+                  i18n-aria-label="@@df.sidenav.search.ariaLabel"
+                  aria-label="Search"
+                  [(ngModel)]="searchTerm"
+                  #textInput
+                />
+                <div class="input-group-append" [class.df-is-empty]="searchTerm() === ''">
+                  <button class="input-group-text fa-light fa-times" (click)="searchTerm.set(''); textInput.focus()">
+                    <span class="visually-hidden" i18n="@@df.sidenav.search.clearText">Clear text</span>
+                  </button>
+                </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>
+        }
+      </nav>
+    </df-drawer>
+  `,
+                    imports: [FormsModule, DfDrawerComponent],
+                    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 }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", 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 }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DfSidenavComponent, DfSidenavIconDirective, DfSidenavItemComponent, DfSidenavLinkComponent };
+//# sourceMappingURL=design-factory-angular-sidenav.mjs.map