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

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

@@ -1,8 +1,8 @@
-import { createNavManager } from '@agnos-ui/core/services/navManager';
+import { createNavManager } from '@design-factory/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, untracked, afterNextRender, ViewEncapsulation } from '@angular/core';
+import { input, model, inject, contentChild, computed, Directive, effect, ChangeDetectionStrategy, Component, linkedSignal, viewChild, contentChildren, booleanAttribute, ElementRef, PLATFORM_ID, signal, Injector, afterRenderEffect, untracked, afterNextRender, ViewEncapsulation } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { DfDrawer } from '@design-factory/angular/drawer';
@@ -431,9 +431,16 @@ class DfSidenavLinkBaseComponent {
          */
         this.wrapperHasIconContent = input(false, ...(ngDevMode ? [{ debugName: "wrapperHasIconContent" }] : []));
         /**
-         * Indicates if the link is currently active based on the Router state
+         * Explicitly sets the active state of the link. When provided, the link behaves
+         * as an external link (plain `<a href>`) and the Angular Router is not used.
+         * When `undefined` (default), the active state is determined by the Angular Router.
          */
-        this.isActiveLink = signal(false, ...(ngDevMode ? [{ debugName: "isActiveLink" }] : []));
+        this.active = input(...(ngDevMode ? [undefined, { debugName: "active" }] : []));
+        /**
+         * Reflects the current active state of the link.
+         * Driven by the `active` input when provided, otherwise updated by the router via `(isActiveChange)`.
+         */
+        this.isActiveLink = linkedSignal(() => this.active() ?? false, ...(ngDevMode ? [{ debugName: "isActiveLink" }] : []));
         /**
          * Options to determine when the router link is considered active
          */
@@ -463,11 +470,11 @@ class DfSidenavLinkBaseComponent {
         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 }); }
+    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 }, active: { classPropertyName: "active", publicName: "active", 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.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 }] }] } });
+        }], 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 }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", 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
@@ -480,21 +487,38 @@ class DfSidenavLinkDesktopComponent extends DfSidenavLinkBaseComponent {
     }
     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()"
-      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)="toggleSidenavOnSmallScreen()"
-      #anchor
-    >
-      <ng-container [ngTemplateOutlet]="content" />
-    </a>
+    @if (active() !== undefined) {
+      <a
+        class="btn df-sidenav-button d-flex gap-3"
+        [class.w-100]="!sidenav.isMinimized()"
+        [class.df-sidenav-active-level]="active()"
+        [class.justify-content-start]="!sidenav.isMinimized()"
+        [href]="linkPath()"
+        target="_blank"
+        [attr.aria-label]="label()"
+        [attr.aria-current]="active() ? 'page' : null"
+        (click)="toggleSidenavOnSmallScreen()"
+        #anchor
+      >
+        <ng-container [ngTemplateOutlet]="content" />
+      </a>
+    } @else {
+      <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)="toggleSidenavOnSmallScreen()"
+        #anchor
+      >
+        <ng-container [ngTemplateOutlet]="content" />
+      </a>
+    }
     <ng-template #content>
       <ng-content select="[dfSidenavIcon]" />
       @if (icon()) {
@@ -512,21 +536,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                     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)="toggleSidenavOnSmallScreen()"
-      #anchor
-    >
-      <ng-container [ngTemplateOutlet]="content" />
-    </a>
+    @if (active() !== undefined) {
+      <a
+        class="btn df-sidenav-button d-flex gap-3"
+        [class.w-100]="!sidenav.isMinimized()"
+        [class.df-sidenav-active-level]="active()"
+        [class.justify-content-start]="!sidenav.isMinimized()"
+        [href]="linkPath()"
+        target="_blank"
+        [attr.aria-label]="label()"
+        [attr.aria-current]="active() ? 'page' : null"
+        (click)="toggleSidenavOnSmallScreen()"
+        #anchor
+      >
+        <ng-container [ngTemplateOutlet]="content" />
+      </a>
+    } @else {
+      <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)="toggleSidenavOnSmallScreen()"
+        #anchor
+      >
+        <ng-container [ngTemplateOutlet]="content" />
+      </a>
+    }
     <ng-template #content>
       <ng-content select="[dfSidenavIcon]" />
       @if (icon()) {
@@ -588,17 +629,30 @@ class DfSidenavLinkMobileComponent extends DfSidenavLinkBaseComponent {
     }
     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"
-      ariaCurrentWhenActive="page"
-      (isActiveChange)="isActiveLink.set($event)"
-      [routerLink]="linkPath()"
-      [routerLinkActiveOptions]="routerLinkActiveOptions()"
-      (click)="toggleSidenavOnSmallScreen()"
-    >
-      <ng-container [ngTemplateOutlet]="content" />
-    </a>
+    @if (active() !== undefined) {
+      <a
+        class="btn df-sidenav-button d-flex gap-3 justify-content-start w-100 df-sidenav-breadcrumb-button"
+        [class.df-sidenav-active-level]="active()"
+        [href]="linkPath()"
+        target="_blank"
+        [attr.aria-current]="active() ? 'page' : null"
+        (click)="toggleSidenavOnSmallScreen()"
+      >
+        <ng-container [ngTemplateOutlet]="content" />
+      </a>
+    } @else {
+      <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)="toggleSidenavOnSmallScreen()"
+      >
+        <ng-container [ngTemplateOutlet]="content" />
+      </a>
+    }
     <ng-template #content>
       <div class="d-flex gap-3 w-100">
         <ng-content select="[dfSidenavIcon]" />
@@ -608,7 +662,7 @@ class DfSidenavLinkMobileComponent extends DfSidenavLinkBaseComponent {
         <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()">
+            <small class="d-flex align-items-center gap-1" [class.text-muted]="!active()">
               @for (item of breadcrumbPath(); track $index) {
                 <span>{{ item }}</span>
                 @if (!$last) {
@@ -628,17 +682,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                     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)="toggleSidenavOnSmallScreen()"
-    >
-      <ng-container [ngTemplateOutlet]="content" />
-    </a>
+    @if (active() !== undefined) {
+      <a
+        class="btn df-sidenav-button d-flex gap-3 justify-content-start w-100 df-sidenav-breadcrumb-button"
+        [class.df-sidenav-active-level]="active()"
+        [href]="linkPath()"
+        target="_blank"
+        [attr.aria-current]="active() ? 'page' : null"
+        (click)="toggleSidenavOnSmallScreen()"
+      >
+        <ng-container [ngTemplateOutlet]="content" />
+      </a>
+    } @else {
+      <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)="toggleSidenavOnSmallScreen()"
+      >
+        <ng-container [ngTemplateOutlet]="content" />
+      </a>
+    }
     <ng-template #content>
       <div class="d-flex gap-3 w-100">
         <ng-content select="[dfSidenavIcon]" />
@@ -648,7 +715,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         <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()">
+            <small class="d-flex align-items-center gap-1" [class.text-muted]="!active()">
               @for (item of breadcrumbPath(); track $index) {
                 <span>{{ item }}</span>
                 @if (!$last) {
@@ -708,6 +775,12 @@ class DfSidenavLinkComponent {
          * Options to determine when the router link is considered active
          */
         this.routerLinkActiveOptions = input({ exact: false }, ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : []));
+        /**
+         * Explicitly sets the active state of the link. When provided, the link renders as
+         * a plain `<a href>` (no Angular Router). When `undefined` (default), the Angular Router determines
+         * the active state.
+         */
+        this.active = input(...(ngDevMode ? [undefined, { debugName: "active" }] : []));
         /**
          * The parent wrapper item component (if any)
          */
@@ -728,7 +801,7 @@ class DfSidenavLinkComponent {
         this.sidenav = inject(DfSidenavComponent);
     }
     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: `
+    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 }, active: { classPropertyName: "active", publicName: "active", 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>
@@ -741,6 +814,7 @@ class DfSidenavLinkComponent {
         [linkPath]="linkPath()"
         [label]="label()"
         [icon]="icon()"
+        [active]="active()"
         [wrapperHasIconContent]="wrapperHasIconContent()"
         [routerLinkActiveOptions]="routerLinkActiveOptions()"
       >
@@ -752,6 +826,7 @@ class DfSidenavLinkComponent {
         [linkPath]="linkPath()"
         [label]="label()"
         [icon]="icon()"
+        [active]="active()"
         [wrapperHasIconContent]="wrapperHasIconContent()"
         [routerLinkActiveOptions]="routerLinkActiveOptions()"
       >
@@ -779,6 +854,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         [linkPath]="linkPath()"
         [label]="label()"
         [icon]="icon()"
+        [active]="active()"
         [wrapperHasIconContent]="wrapperHasIconContent()"
         [routerLinkActiveOptions]="routerLinkActiveOptions()"
       >
@@ -790,6 +866,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         [linkPath]="linkPath()"
         [label]="label()"
         [icon]="icon()"
+        [active]="active()"
         [wrapperHasIconContent]="wrapperHasIconContent()"
         [routerLinkActiveOptions]="routerLinkActiveOptions()"
       >
@@ -805,7 +882,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         '[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 }] }] } });
+        }], 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 }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", 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>