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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/fesm2022/design-factory-angular-drawer.mjs +18 -25
  2. package/fesm2022/design-factory-angular-drawer.mjs.map +1 -1
  3. package/fesm2022/design-factory-angular-sidenav.mjs +138 -61
  4. package/fesm2022/design-factory-angular-sidenav.mjs.map +1 -1
  5. package/fesm2022/design-factory-angular-theme.mjs +1 -1
  6. package/fesm2022/design-factory-angular-theme.mjs.map +1 -1
  7. package/fesm2022/design-factory-angular-topnav.mjs +149 -72
  8. package/fesm2022/design-factory-angular-topnav.mjs.map +1 -1
  9. package/package.json +3 -3
  10. package/types/design-factory-angular-drawer.d.ts +9 -10
  11. package/types/design-factory-angular-sidenav.d.ts +16 -3
  12. package/types/design-factory-angular-topnav.d.ts +13 -6
package/fesm2022/design-factory-angular-drawer.mjs CHANGED
@@ -4,7 +4,7 @@ import { createCollapseTransition } from '@design-factory/core/services/transiti
4
4
  import { createSimpleClassTransition } from '@design-factory/core/services/transitions/simpleClassTransition';
5
5
  import { NgTemplateOutlet } from '@angular/common';
6
6
  import * as i0 from '@angular/core';
7
- import { inject, TemplateRef, Directive, contentChild, computed, input, booleanAttribute, model, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
7
+ import { Directive, contentChild, TemplateRef, computed, input, booleanAttribute, model, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
8
8
  import { AgnosWidgetDirective, callWidgetFactory, UseDirective, UseMultiDirective } from '@design-factory/angular/internals';
9
9
 
10
10
  const fadeTransition = createSimpleClassTransition({
@@ -26,12 +26,9 @@ const horizontalConfig = {
26
26
  animationPendingClasses: ['df-collapse-collapsing', 'df-collapse-horizontal']
27
27
  };
28
28
  /**
29
- * Marks an `<ng-template>` as drawer header content.
29
+ * A directive to define a template containing the header content of the drawer.
30
30
  */
31
31
  class DfDrawerHeaderTemplate {
32
- constructor() {
33
- this.templateRef = inject(TemplateRef);
34
- }
35
32
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfDrawerHeaderTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
36
33
  static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: DfDrawerHeaderTemplate, isStandalone: true, selector: "ng-template[dfDrawerHeader]", ngImport: i0 }); }
37
34
  }
@@ -42,12 +39,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
42
39
  }]
43
40
  }] });
44
41
  /**
45
- * Marks an `<ng-template>` as drawer body content.
42
+ * A directive to define a template containing the body content of the drawer.
46
43
  */
47
44
  class DfDrawerBodyTemplate {
48
- constructor() {
49
- this.templateRef = inject(TemplateRef);
50
- }
51
45
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfDrawerBodyTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
52
46
  static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: DfDrawerBodyTemplate, isStandalone: true, selector: "ng-template[dfDrawerBody]", ngImport: i0 }); }
53
47
  }
@@ -58,12 +52,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
58
52
  }]
59
53
  }] });
60
54
  /**
61
- * Marks an `<ng-template>` as drawer footer content.
55
+ * A directive to define a template containing the footer content of the drawer.
62
56
  */
63
57
  class DfDrawerFooterTemplate {
64
- constructor() {
65
- this.templateRef = inject(TemplateRef);
66
- }
67
58
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfDrawerFooterTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
68
59
  static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: DfDrawerFooterTemplate, isStandalone: true, selector: "ng-template[dfDrawerFooter]", ngImport: i0 }); }
69
60
  }
@@ -75,7 +66,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
75
66
  }] });
76
67
  /**
77
68
  * Enables users to show contextual content via a sliding panel from any screen edge.
78
- * @experimental
69
+ *
70
+ * See {@link https://design-factory.amadeus.net/components/drawer|Design Factory documentation} for details and examples.
71
+ * @since 21.1
79
72
  */
80
73
  class DfDrawer extends AgnosWidgetDirective {
81
74
  constructor() {
@@ -107,9 +100,9 @@ class DfDrawer extends AgnosWidgetDirective {
107
100
  }
108
101
  });
109
102
  super(widget);
110
- this.headerTemplate = contentChild(DfDrawerHeaderTemplate, ...(ngDevMode ? [{ debugName: "headerTemplate" }] : []));
111
- this.bodyTemplate = contentChild(DfDrawerBodyTemplate, ...(ngDevMode ? [{ debugName: "bodyTemplate" }] : []));
112
- this.footerTemplate = contentChild(DfDrawerFooterTemplate, ...(ngDevMode ? [{ debugName: "footerTemplate" }] : []));
103
+ this.headerTemplate = contentChild(DfDrawerHeaderTemplate, { ...(ngDevMode ? { debugName: "headerTemplate" } : {}), read: TemplateRef });
104
+ this.bodyTemplate = contentChild(DfDrawerBodyTemplate, { ...(ngDevMode ? { debugName: "bodyTemplate" } : {}), read: TemplateRef });
105
+ this.footerTemplate = contentChild(DfDrawerFooterTemplate, { ...(ngDevMode ? { debugName: "footerTemplate" } : {}), read: TemplateRef });
113
106
  this.hasSectionTemplates = computed(() => !!this.headerTemplate() || !!this.bodyTemplate() || !!this.footerTemplate(), ...(ngDevMode ? [{ debugName: "hasSectionTemplates" }] : []));
114
107
  /**
115
108
  * CSS classes to be applied on the widget main container
@@ -275,7 +268,7 @@ class DfDrawer extends AgnosWidgetDirective {
275
268
  return this.api.close(animated);
276
269
  }
277
270
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
278
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DfDrawer, isStandalone: true, selector: "df-drawer", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, bodyScroll: { classPropertyName: "bodyScroll", publicName: "bodyScroll", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, keepInDom: { classPropertyName: "keepInDom", publicName: "keepInDom", isSignal: true, isRequired: false, transformFunction: null }, configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, focusOnInit: { classPropertyName: "focusOnInit", publicName: "focusOnInit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange", sizeChange: "sizeChange", visibleChange: "visibleChange", minimizedChange: "minimizedChange", maximizedChange: "maximizedChange", resizingChange: "resizingChange", minSize: "minSize", maxSize: "maxSize" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: DfDrawerHeaderTemplate, descendants: true, isSignal: true }, { propertyName: "bodyTemplate", first: true, predicate: DfDrawerBodyTemplate, descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: DfDrawerFooterTemplate, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
271
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DfDrawer, isStandalone: true, selector: "df-drawer", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, bodyScroll: { classPropertyName: "bodyScroll", publicName: "bodyScroll", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, keepInDom: { classPropertyName: "keepInDom", publicName: "keepInDom", isSignal: true, isRequired: false, transformFunction: null }, configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, focusOnInit: { classPropertyName: "focusOnInit", publicName: "focusOnInit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange", sizeChange: "sizeChange", visibleChange: "visibleChange", minimizedChange: "minimizedChange", maximizedChange: "maximizedChange", resizingChange: "resizingChange", minSize: "minSize", maxSize: "maxSize" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: DfDrawerHeaderTemplate, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "bodyTemplate", first: true, predicate: DfDrawerBodyTemplate, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: DfDrawerFooterTemplate, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
279
272
  @let isHidden = state.hidden();
280
273
  @let backdropHidden = state.backdropHidden();
281
274
  @if (!isHidden || keepInDom()) {
@@ -293,19 +286,19 @@ class DfDrawer extends AgnosWidgetDirective {
293
286
  @if (hasSectionTemplates()) {
294
287
  @if (headerTemplate(); as header) {
295
288
  <div class="df-drawer-header">
296
- <ng-template [ngTemplateOutlet]="header.templateRef" />
289
+ <ng-template [ngTemplateOutlet]="header" />
297
290
  </div>
298
291
  }
299
292
  <div class="df-drawer-body">
300
293
  @if (bodyTemplate(); as body) {
301
- <ng-template [ngTemplateOutlet]="body.templateRef" />
294
+ <ng-template [ngTemplateOutlet]="body" />
302
295
  } @else {
303
296
  <ng-template [ngTemplateOutlet]="defaultBodyTemplate" />
304
297
  }
305
298
  </div>
306
299
  @if (footerTemplate(); as footer) {
307
300
  <div class="df-drawer-footer">
308
- <ng-template [ngTemplateOutlet]="footer.templateRef" />
301
+ <ng-template [ngTemplateOutlet]="footer" />
309
302
  </div>
310
303
  }
311
304
  } @else {
@@ -366,19 +359,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
366
359
  @if (hasSectionTemplates()) {
367
360
  @if (headerTemplate(); as header) {
368
361
  <div class="df-drawer-header">
369
- <ng-template [ngTemplateOutlet]="header.templateRef" />
362
+ <ng-template [ngTemplateOutlet]="header" />
370
363
  </div>
371
364
  }
372
365
  <div class="df-drawer-body">
373
366
  @if (bodyTemplate(); as body) {
374
- <ng-template [ngTemplateOutlet]="body.templateRef" />
367
+ <ng-template [ngTemplateOutlet]="body" />
375
368
  } @else {
376
369
  <ng-template [ngTemplateOutlet]="defaultBodyTemplate" />
377
370
  }
378
371
  </div>
379
372
  @if (footerTemplate(); as footer) {
380
373
  <div class="df-drawer-footer">
381
- <ng-template [ngTemplateOutlet]="footer.templateRef" />
374
+ <ng-template [ngTemplateOutlet]="footer" />
382
375
  </div>
383
376
  }
384
377
  } @else {
@@ -418,7 +411,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
418
411
  ></div>
419
412
  }
420
413
  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".df-fade{transition:opacity .15s linear}@media(prefers-reduced-motion:reduce){.df-fade{transition:none}}.df-fade:not(.df-show){opacity:0}.df-hidden{display:none}.df-drawer{--df-drawer-z-index: 2010;--df-drawer-size: max-content;--df-drawer-min-size: 0;--df-drawer-max-size: 100vw;display:flex;flex-direction:column;width:100%;min-width:0;max-width:none;height:var(--df-drawer-size);min-height:var(--df-drawer-min-size);max-height:var(--df-drawer-max-size)}.df-drawer .df-drawer-header{display:flex;padding:var(--df-spacing-6) var(--df-spacing-4) var(--df-spacing-5) var(--df-spacing-6);border-block-end:1px solid var(--df-color-inert-neutral-main-border)}.df-drawer .df-drawer-body{padding:var(--df-spacing-6) var(--df-spacing-6) 0}.df-drawer .df-drawer-footer{display:flex;justify-content:end;padding:var(--df-spacing-6);margin-top:auto;flex-wrap:wrap}.df-drawer.df-inline-start,.df-drawer.df-inline-end{width:var(--df-drawer-size);min-width:var(--df-drawer-min-size);max-width:var(--df-drawer-max-size);height:100%;min-height:0;max-height:none}.df-drawer{background-color:var(--df-color-inert-neutral-main-background);z-index:var(--df-drawer-z-index);position:fixed}.df-drawer.df-inline-start{inset-block:0;inset-inline-start:0;border-inline-end:1px solid var(--df-color-inert-neutral-main-border)}.df-drawer.df-inline-end{inset-block:0;inset-inline-end:0;border-inline-start:1px solid var(--df-color-inert-neutral-main-border)}.df-drawer.df-inline-end .df-drawer-splitter{inset-inline-end:auto;inset-inline-start:-32px}.df-drawer.df-block-start{inset-inline:0;inset-block-start:0;border-block-end:1px solid var(--df-color-inert-neutral-main-border)}.df-drawer.df-block-start .df-drawer-splitter{inset-block-start:auto;cursor:ns-resize}.df-drawer.df-block-start .df-drawer-splitter .df-drawer-splitter-handle{cursor:ns-resize}.df-drawer.df-block-end{inset-inline:0;inset-block-end:0;border-block-start:1px solid var(--df-color-inert-neutral-main-border)}.df-drawer.df-block-end .df-drawer-splitter{inset-block-end:auto;cursor:ns-resize;inset-block-start:-32px}.df-drawer.df-block-end .df-drawer-splitter .df-drawer-splitter-handle{cursor:ns-resize}.df-drawer .df-drawer-splitter{display:flex;position:absolute;inset-block:0;inset-inline-end:-4px;width:8px;cursor:ew-resize;background:transparent}.df-drawer .df-drawer-splitter .df-drawer-splitter-handle{--df-btn-bg: transparent;flex-shrink:0;border:none;cursor:ew-resize}.df-drawer.df-block-start .df-drawer-splitter,.df-drawer.df-block-end .df-drawer-splitter{inset-inline:0;width:auto;height:8px;cursor:ns-resize}.df-drawer.df-collapse-hide{display:none}.df-drawer.df-collapse-collapsing{min-width:0;min-height:0;height:0;overflow:hidden;transition:height .35s ease}@media(prefers-reduced-motion:reduce){.df-drawer.df-collapse-collapsing{transition:none}}.df-drawer.df-collapse-collapsing.df-collapse-horizontal{width:0;height:auto;transition:width .35s ease}@media(prefers-reduced-motion:reduce){.df-drawer.df-collapse-collapsing.df-collapse-horizontal{transition:none}}@media(max-width:576px){.df-drawer.df-inline-start,.df-drawer.df-inline-end{width:100dvw;min-width:100dvw;max-width:100dvw}.df-drawer.df-block-start,.df-drawer.df-block-end{height:100dvh;min-height:100dvh;max-height:100dvh}}.df-drawer-backdrop{--df-drawer-backdrop-z-index: 2000;--df-drawer-backdrop-opacity: .9;position:fixed;inset:0;background-color:var(--df-color-backdrop-background);z-index:var(--df-drawer-backdrop-z-index)}.df-drawer-backdrop.df-show{opacity:var(--df-drawer-backdrop-opacity);pointer-events:auto}\n"] }]
421
- }], ctorParameters: () => [], propDecorators: { headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfDrawerHeaderTemplate), { isSignal: true }] }], bodyTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfDrawerBodyTemplate), { isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfDrawerFooterTemplate), { isSignal: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], bodyScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyScroll", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], keepInDom: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepInDom", required: false }] }], configuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "configuration", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], sizeChange: [{ type: i0.Output, args: ["sizeChange"] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }], minimizedChange: [{ type: i0.Output, args: ["minimizedChange"] }], maximizedChange: [{ type: i0.Output, args: ["maximizedChange"] }], resizingChange: [{ type: i0.Output, args: ["resizingChange"] }], focusOnInit: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusOnInit", required: false }] }], minSize: [{ type: i0.Output, args: ["minSize"] }], maxSize: [{ type: i0.Output, args: ["maxSize"] }] } });
414
+ }], ctorParameters: () => [], propDecorators: { headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfDrawerHeaderTemplate), { ...{ read: TemplateRef }, isSignal: true }] }], bodyTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfDrawerBodyTemplate), { ...{ read: TemplateRef }, isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfDrawerFooterTemplate), { ...{ read: TemplateRef }, isSignal: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], bodyScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyScroll", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], keepInDom: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepInDom", required: false }] }], configuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "configuration", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], sizeChange: [{ type: i0.Output, args: ["sizeChange"] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }], minimizedChange: [{ type: i0.Output, args: ["minimizedChange"] }], maximizedChange: [{ type: i0.Output, args: ["maximizedChange"] }], resizingChange: [{ type: i0.Output, args: ["resizingChange"] }], focusOnInit: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusOnInit", required: false }] }], minSize: [{ type: i0.Output, args: ["minSize"] }], maxSize: [{ type: i0.Output, args: ["maxSize"] }] } });
422
415
 
423
416
  /**
424
417
  * Generated bundle index. Do not edit.
package/fesm2022/design-factory-angular-drawer.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"design-factory-angular-drawer.mjs","sources":["../../drawer/drawer.ts","../../drawer/design-factory-angular-drawer.ts"],"sourcesContent":["import type { DrawerConfiguration, DrawerPosition, DrawerWidget } from '@design-factory/core/components/drawer';\nimport { createDrawer } from '@design-factory/core/components/drawer';\nimport type { NavManagerItemConfig } from '@design-factory/core/services/navManager';\nimport { createNavManager } from '@design-factory/core/services/navManager';\nimport { CollapseConfig, createCollapseTransition } from '@design-factory/core/services/transitions/collapse';\nimport { createSimpleClassTransition } from '@design-factory/core/services/transitions/simpleClassTransition';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChild,\n Directive,\n inject,\n input,\n model,\n output,\n TemplateRef,\n ViewEncapsulation\n} from '@angular/core';\nimport {\n AgnosWidgetDirective,\n callWidgetFactory,\n UseDirective,\n UseMultiDirective\n} from '@design-factory/angular/internals';\n\nconst fadeTransition = createSimpleClassTransition({\n animationPendingClasses: ['df-fade'],\n animationPendingShowClasses: ['df-show'],\n showClasses: ['df-show', 'df-fade'],\n hideClasses: ['df-hidden', 'df-fade']\n});\n\nconst verticalConfig: CollapseConfig = {\n dimension: 'height',\n hideClasses: ['df-collapse-hide'],\n showClasses: ['df-collapse-show'],\n animationPendingClasses: ['df-collapse-collapsing']\n};\n\nconst horizontalConfig: CollapseConfig = {\n dimension: 'width',\n hideClasses: ['df-collapse-hide'],\n showClasses: ['df-collapse-show'],\n animationPendingClasses: ['df-collapse-collapsing', 'df-collapse-horizontal']\n};\n\n/**\n * Available drawer positions.\n */\nexport type DfDrawerPosition = DrawerPosition;\n\n/**\n * Available drawer display configurations.\n * - `'overlay'`: the drawer overlays the page content with a backdrop.\n * - `'inline'`: the drawer stays in the document flow and moves content as it expands/resizes.\n */\nexport type DfDrawerConfiguration = DrawerConfiguration;\n\n/**\n * Marks an `<ng-template>` as drawer header content.\n */\n@Directive({\n selector: 'ng-template[dfDrawerHeader]'\n})\nexport class DfDrawerHeaderTemplate {\n readonly templateRef = inject(TemplateRef);\n}\n\n/**\n * Marks an `<ng-template>` as drawer body content.\n */\n@Directive({\n selector: 'ng-template[dfDrawerBody]'\n})\nexport class DfDrawerBodyTemplate {\n readonly templateRef = inject(TemplateRef);\n}\n\n/**\n * Marks an `<ng-template>` as drawer footer content.\n */\n@Directive({\n selector: 'ng-template[dfDrawerFooter]'\n})\nexport class DfDrawerFooterTemplate {\n readonly templateRef = inject(TemplateRef);\n}\n\n/**\n * Enables users to show contextual content via a sliding panel from any screen edge.\n * @experimental\n */\n@Component({\n selector: 'df-drawer',\n imports: [NgTemplateOutlet, UseDirective, UseMultiDirective],\n template: `\n @let isHidden = state.hidden();\n @let backdropHidden = state.backdropHidden();\n @if (!isHidden || keepInDom()) {\n @let isVertical = state.isVertical();\n @let drawerSize = size();\n <div\n class=\"df-drawer\"\n [class]=\"state.className()\"\n [dfUseMulti]=\"[directives.drawerPortalDirective, directives.drawerDirective]\"\n [style.--df-drawer-size]=\"drawerSize !== null ? drawerSize + 'px' : ''\"\n >\n <ng-template #defaultBodyTemplate>\n <ng-content />\n </ng-template>\n @if (hasSectionTemplates()) {\n @if (headerTemplate(); as header) {\n <div class=\"df-drawer-header\">\n <ng-template [ngTemplateOutlet]=\"header.templateRef\" />\n </div>\n }\n <div class=\"df-drawer-body\">\n @if (bodyTemplate(); as body) {\n <ng-template [ngTemplateOutlet]=\"body.templateRef\" />\n } @else {\n <ng-template [ngTemplateOutlet]=\"defaultBodyTemplate\" />\n }\n </div>\n @if (footerTemplate(); as footer) {\n <div class=\"df-drawer-footer\">\n <ng-template [ngTemplateOutlet]=\"footer.templateRef\" />\n </div>\n }\n } @else {\n <ng-template [ngTemplateOutlet]=\"defaultBodyTemplate\" />\n }\n @if (state.resizable()) {\n <div\n class=\"df-drawer-splitter\"\n tabindex=\"-1\"\n [dfUse]=\"directives.splitterDirective\"\n [style.align-items]=\"!isVertical ? 'center' : undefined\"\n [style.justify-content]=\"isVertical ? 'center' : undefined\"\n >\n <ng-content select=\"df-drawer-splitter-content\">\n <button\n #splitterHandle\n class=\"btn df-btn-icononly df-btn-tertiary df-drawer-splitter-handle\"\n [class]=\"{\n 'fa-grip-lines-vertical': !isVertical,\n 'fa-grip-lines': isVertical,\n 'df-btn-outline-neutral-mirror': !backdropHidden,\n 'btn-outline-primary': backdropHidden\n }\"\n i18n-aria-label=\"@@df.drawer.resize.ariaLabel\"\n aria-label=\"Resize drawer\"\n [dfUse]=\"[navManager.directive, navManagerConfig]\"\n ></button>\n </ng-content>\n </div>\n }\n </div>\n }\n @if (!backdropHidden) {\n <div\n class=\"df-drawer-backdrop\"\n [dfUseMulti]=\"[directives.backdropPortalDirective, directives.backdropDirective]\"\n ></div>\n }\n `,\n styles: \"@use '@design-factory/components-styles/drawer';\",\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None\n})\nexport class DfDrawer extends AgnosWidgetDirective<DrawerWidget> {\n protected readonly headerTemplate = contentChild(DfDrawerHeaderTemplate);\n protected readonly bodyTemplate = contentChild(DfDrawerBodyTemplate);\n protected readonly footerTemplate = contentChild(DfDrawerFooterTemplate);\n protected readonly hasSectionTemplates = computed(\n () => !!this.headerTemplate() || !!this.bodyTemplate() || !!this.footerTemplate()\n );\n\n /**\n * CSS classes to be applied on the widget main container\n *\n * @defaultValue ``\n */\n readonly className = input<string>('');\n /**\n * If `true` allows body scrolling when the drawer is open.\n *\n * @defaultValue `false`\n */\n readonly bodyScroll = input(false, { transform: booleanAttribute });\n /**\n * If `true` displays the backdrop element and disables the body scrolling, otherwise the body of the document is navigable\n *\n * @defaultValue `true`\n */\n readonly backdrop = input(true, { transform: booleanAttribute });\n /**\n * Which element should contain the drawer and backdrop DOM elements.\n * If it is not null, the drawer and backdrop DOM elements are moved to the specified container.\n * Otherwise, they stay where the widget is located.\n *\n * @defaultValue\n * ```ts\n * typeof window !== 'undefined' ? document.body : null\n * ```\n */\n readonly container = input<HTMLElement | null>(null);\n /**\n * The size of the drawer in pixels.\n *\n * @defaultValue `300`\n */\n readonly size = model<number | null>(300);\n /**\n * If `true`, the drawer can be resized by the user.\n *\n * @defaultValue `false`\n */\n readonly resizable = input(false, { transform: booleanAttribute });\n /**\n * If `true`, the drawer is shown; otherwise, it is hidden.\n *\n * @defaultValue `false`\n */\n readonly visible = input(false, { transform: booleanAttribute });\n\n /**\n * If `true`, the drawer element is kept in the DOM when it is not visible.\n * This can be useful to preserve the state of the drawer content when it is hidden.\n *\n * @defaultValue `false`\n */\n readonly keepInDom = input(false, { transform: booleanAttribute });\n\n /**\n * The display configuration of the drawer.\n * - `'overlay'` (default): the drawer overlays the page content with a backdrop.\n * - `'inline'`: the drawer stays in the document flow and moves content as it expands/resizes.\n *\n * @defaultValue `'overlay'`\n */\n readonly configuration = input<DrawerConfiguration>('overlay');\n\n /**\n * The position of the drawer on the screen.\n *\n * @defaultValue `'inline-start'`\n */\n readonly position = input<DfDrawerPosition>('inline-start');\n\n /**\n * An event emitted when the width is changed.\n *\n * Event payload is equal to the newly selected width.\n *\n * @defaultValue\n * ```ts\n * () => {}\n * ```\n */\n readonly sizeChange = output<number | null>();\n /**\n * Event to be triggered when the visible property changes.\n *\n * @param visible - new value of the visible propery\n *\n * @defaultValue\n * ```ts\n * () => {}\n * ```\n */\n readonly visibleChange = output<boolean>();\n\n /**\n * Event to be triggered when the minimized state changes.\n *\n * @defaultValue\n * ```ts\n * () => {}\n * ```\n */\n readonly minimizedChange = output<boolean>();\n\n /**\n * Event to be triggered when the maximized state changes.\n *\n * @defaultValue\n * ```ts\n * () => {}\n * ```\n */\n readonly maximizedChange = output<boolean>();\n\n /**\n * Event to be triggered when the user start or stop moving the drawer.\n *\n * @defaultValue\n * ```ts\n * () => {}\n * ```\n */\n readonly resizingChange = output<boolean>();\n\n /**\n * If `true` focuses the drawer when it is opened.\n *\n * @defaultValue `true`\n */\n readonly focusOnInit = input(true, { transform: booleanAttribute });\n\n protected readonly navManager = createNavManager();\n\n protected readonly navManagerConfig: NavManagerItemConfig = {\n keys: {\n Home: this.navManager.focusFirst,\n End: this.navManager.focusLast\n }\n };\n\n /**\n * Event to be triggered when the minimum size is reached.\n *\n * @defaultValue `null`\n */\n readonly minSize = output<void>();\n\n /**\n * Event to be triggered when the maximum size is reached.\n *\n * @defaultValue `null`\n */\n readonly maxSize = output<void>();\n\n constructor() {\n const widget = callWidgetFactory(createDrawer, {\n defaultConfig: {\n bodyScroll: false,\n backdrop: true,\n transition: createCollapseTransition(horizontalConfig),\n verticalTransition: createCollapseTransition(verticalConfig),\n backdropTransition: fadeTransition\n },\n events: {\n onSizeChange: (size) => {\n this.size.set(size);\n this.sizeChange.emit(size);\n },\n onVisibleChange: (visible) => {\n this.visibleChange.emit(visible);\n },\n onMinimizedChange: (isMinimized) => {\n this.minimizedChange.emit(isMinimized);\n },\n onMaximizedChange: (isMaximized) => {\n this.maximizedChange.emit(isMaximized);\n },\n onResizingChange: (isResizing) => {\n this.resizingChange.emit(isResizing);\n }\n }\n });\n super(widget);\n }\n\n /**\n * Trigger the opening of the drawer.\n *\n * @param animated - whether the transition should be animated. If the parameter is not defined, the `animated` is defined by the component input or the default config.\n *\n * @returns A promise that resolves once the opening transition has finished.\n */\n public open(animated?: boolean): Promise<void> {\n return this.api.open(animated);\n }\n\n /**\n * Trigger the closing of the drawer.\n *\n * @param animated - whether the transition should be animated. If the parameter is not defined, the `animated` is defined by the component input or the default config.\n *\n * @returns A promise that resolves once the closing transition has finished.\n */\n public close(animated?: boolean): Promise<void> {\n return this.api.close(animated);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"design-factory-angular-drawer.mjs","sources":["../../drawer/drawer.ts","../../drawer/design-factory-angular-drawer.ts"],"sourcesContent":["import type { DrawerConfiguration, DrawerPosition, DrawerWidget } from '@design-factory/core/components/drawer';\nimport { createDrawer } from '@design-factory/core/components/drawer';\nimport type { NavManagerItemConfig } from '@design-factory/core/services/navManager';\nimport { createNavManager } from '@design-factory/core/services/navManager';\nimport { CollapseConfig, createCollapseTransition } from '@design-factory/core/services/transitions/collapse';\nimport { createSimpleClassTransition } from '@design-factory/core/services/transitions/simpleClassTransition';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChild,\n Directive,\n input,\n model,\n output,\n TemplateRef,\n ViewEncapsulation\n} from '@angular/core';\nimport {\n AgnosWidgetDirective,\n callWidgetFactory,\n UseDirective,\n UseMultiDirective\n} from '@design-factory/angular/internals';\n\nconst fadeTransition = createSimpleClassTransition({\n animationPendingClasses: ['df-fade'],\n animationPendingShowClasses: ['df-show'],\n showClasses: ['df-show', 'df-fade'],\n hideClasses: ['df-hidden', 'df-fade']\n});\n\nconst verticalConfig: CollapseConfig = {\n dimension: 'height',\n hideClasses: ['df-collapse-hide'],\n showClasses: ['df-collapse-show'],\n animationPendingClasses: ['df-collapse-collapsing']\n};\n\nconst horizontalConfig: CollapseConfig = {\n dimension: 'width',\n hideClasses: ['df-collapse-hide'],\n showClasses: ['df-collapse-show'],\n animationPendingClasses: ['df-collapse-collapsing', 'df-collapse-horizontal']\n};\n\n/**\n * Available drawer positions.\n */\nexport type DfDrawerPosition = DrawerPosition;\n\n/**\n * Available drawer display configurations.\n * - `'overlay'`: the drawer overlays the page content with a backdrop.\n * - `'inline'`: the drawer stays in the document flow and moves content as it expands/resizes.\n */\nexport type DfDrawerConfiguration = DrawerConfiguration;\n\n/**\n * A directive to define a template containing the header content of the drawer.\n */\n@Directive({\n selector: 'ng-template[dfDrawerHeader]'\n})\nexport class DfDrawerHeaderTemplate {}\n\n/**\n * A directive to define a template containing the body content of the drawer.\n */\n@Directive({\n selector: 'ng-template[dfDrawerBody]'\n})\nexport class DfDrawerBodyTemplate {}\n\n/**\n * A directive to define a template containing the footer content of the drawer.\n */\n@Directive({\n selector: 'ng-template[dfDrawerFooter]'\n})\nexport class DfDrawerFooterTemplate {}\n\n/**\n * Enables users to show contextual content via a sliding panel from any screen edge.\n *\n * See {@link https://design-factory.amadeus.net/components/drawer|Design Factory documentation} for details and examples.\n * @since 21.1\n */\n@Component({\n selector: 'df-drawer',\n imports: [NgTemplateOutlet, UseDirective, UseMultiDirective],\n template: `\n @let isHidden = state.hidden();\n @let backdropHidden = state.backdropHidden();\n @if (!isHidden || keepInDom()) {\n @let isVertical = state.isVertical();\n @let drawerSize = size();\n <div\n class=\"df-drawer\"\n [class]=\"state.className()\"\n [dfUseMulti]=\"[directives.drawerPortalDirective, directives.drawerDirective]\"\n [style.--df-drawer-size]=\"drawerSize !== null ? drawerSize + 'px' : ''\"\n >\n <ng-template #defaultBodyTemplate>\n <ng-content />\n </ng-template>\n @if (hasSectionTemplates()) {\n @if (headerTemplate(); as header) {\n <div class=\"df-drawer-header\">\n <ng-template [ngTemplateOutlet]=\"header\" />\n </div>\n }\n <div class=\"df-drawer-body\">\n @if (bodyTemplate(); as body) {\n <ng-template [ngTemplateOutlet]=\"body\" />\n } @else {\n <ng-template [ngTemplateOutlet]=\"defaultBodyTemplate\" />\n }\n </div>\n @if (footerTemplate(); as footer) {\n <div class=\"df-drawer-footer\">\n <ng-template [ngTemplateOutlet]=\"footer\" />\n </div>\n }\n } @else {\n <ng-template [ngTemplateOutlet]=\"defaultBodyTemplate\" />\n }\n @if (state.resizable()) {\n <div\n class=\"df-drawer-splitter\"\n tabindex=\"-1\"\n [dfUse]=\"directives.splitterDirective\"\n [style.align-items]=\"!isVertical ? 'center' : undefined\"\n [style.justify-content]=\"isVertical ? 'center' : undefined\"\n >\n <ng-content select=\"df-drawer-splitter-content\">\n <button\n #splitterHandle\n class=\"btn df-btn-icononly df-btn-tertiary df-drawer-splitter-handle\"\n [class]=\"{\n 'fa-grip-lines-vertical': !isVertical,\n 'fa-grip-lines': isVertical,\n 'df-btn-outline-neutral-mirror': !backdropHidden,\n 'btn-outline-primary': backdropHidden\n }\"\n i18n-aria-label=\"@@df.drawer.resize.ariaLabel\"\n aria-label=\"Resize drawer\"\n [dfUse]=\"[navManager.directive, navManagerConfig]\"\n ></button>\n </ng-content>\n </div>\n }\n </div>\n }\n @if (!backdropHidden) {\n <div\n class=\"df-drawer-backdrop\"\n [dfUseMulti]=\"[directives.backdropPortalDirective, directives.backdropDirective]\"\n ></div>\n }\n `,\n styles: \"@use '@design-factory/components-styles/drawer';\",\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None\n})\nexport class DfDrawer extends AgnosWidgetDirective<DrawerWidget> {\n protected readonly headerTemplate = contentChild(DfDrawerHeaderTemplate, { read: TemplateRef });\n protected readonly bodyTemplate = contentChild(DfDrawerBodyTemplate, { read: TemplateRef });\n protected readonly footerTemplate = contentChild(DfDrawerFooterTemplate, { read: TemplateRef });\n protected readonly hasSectionTemplates = computed(\n () => !!this.headerTemplate() || !!this.bodyTemplate() || !!this.footerTemplate()\n );\n\n /**\n * CSS classes to be applied on the widget main container\n *\n * @defaultValue ``\n */\n readonly className = input<string>('');\n /**\n * If `true` allows body scrolling when the drawer is open.\n *\n * @defaultValue `false`\n */\n readonly bodyScroll = input(false, { transform: booleanAttribute });\n /**\n * If `true` displays the backdrop element and disables the body scrolling, otherwise the body of the document is navigable\n *\n * @defaultValue `true`\n */\n readonly backdrop = input(true, { transform: booleanAttribute });\n /**\n * Which element should contain the drawer and backdrop DOM elements.\n * If it is not null, the drawer and backdrop DOM elements are moved to the specified container.\n * Otherwise, they stay where the widget is located.\n *\n * @defaultValue\n * ```ts\n * typeof window !== 'undefined' ? document.body : null\n * ```\n */\n readonly container = input<HTMLElement | null>(null);\n /**\n * The size of the drawer in pixels.\n *\n * @defaultValue `300`\n */\n readonly size = model<number | null>(300);\n /**\n * If `true`, the drawer can be resized by the user.\n *\n * @defaultValue `false`\n */\n readonly resizable = input(false, { transform: booleanAttribute });\n /**\n * If `true`, the drawer is shown; otherwise, it is hidden.\n *\n * @defaultValue `false`\n */\n readonly visible = input(false, { transform: booleanAttribute });\n\n /**\n * If `true`, the drawer element is kept in the DOM when it is not visible.\n * This can be useful to preserve the state of the drawer content when it is hidden.\n *\n * @defaultValue `false`\n */\n readonly keepInDom = input(false, { transform: booleanAttribute });\n\n /**\n * The display configuration of the drawer.\n * - `'overlay'` (default): the drawer overlays the page content with a backdrop.\n * - `'inline'`: the drawer stays in the document flow and moves content as it expands/resizes.\n *\n * @defaultValue `'overlay'`\n */\n readonly configuration = input<DrawerConfiguration>('overlay');\n\n /**\n * The position of the drawer on the screen.\n *\n * @defaultValue `'inline-start'`\n */\n readonly position = input<DfDrawerPosition>('inline-start');\n\n /**\n * An event emitted when the width is changed.\n *\n * Event payload is equal to the newly selected width.\n *\n * @defaultValue\n * ```ts\n * () => {}\n * ```\n */\n readonly sizeChange = output<number | null>();\n /**\n * Event to be triggered when the visible property changes.\n *\n * @param visible - new value of the visible propery\n *\n * @defaultValue\n * ```ts\n * () => {}\n * ```\n */\n readonly visibleChange = output<boolean>();\n\n /**\n * Event to be triggered when the minimized state changes.\n *\n * @defaultValue\n * ```ts\n * () => {}\n * ```\n */\n readonly minimizedChange = output<boolean>();\n\n /**\n * Event to be triggered when the maximized state changes.\n *\n * @defaultValue\n * ```ts\n * () => {}\n * ```\n */\n readonly maximizedChange = output<boolean>();\n\n /**\n * Event to be triggered when the user start or stop moving the drawer.\n *\n * @defaultValue\n * ```ts\n * () => {}\n * ```\n */\n readonly resizingChange = output<boolean>();\n\n /**\n * If `true` focuses the drawer when it is opened.\n *\n * @defaultValue `true`\n */\n readonly focusOnInit = input(true, { transform: booleanAttribute });\n\n protected readonly navManager = createNavManager();\n\n protected readonly navManagerConfig: NavManagerItemConfig = {\n keys: {\n Home: this.navManager.focusFirst,\n End: this.navManager.focusLast\n }\n };\n\n /**\n * Event to be triggered when the minimum size is reached.\n *\n * @defaultValue `null`\n */\n readonly minSize = output<void>();\n\n /**\n * Event to be triggered when the maximum size is reached.\n *\n * @defaultValue `null`\n */\n readonly maxSize = output<void>();\n\n constructor() {\n const widget = callWidgetFactory(createDrawer, {\n defaultConfig: {\n bodyScroll: false,\n backdrop: true,\n transition: createCollapseTransition(horizontalConfig),\n verticalTransition: createCollapseTransition(verticalConfig),\n backdropTransition: fadeTransition\n },\n events: {\n onSizeChange: (size) => {\n this.size.set(size);\n this.sizeChange.emit(size);\n },\n onVisibleChange: (visible) => {\n this.visibleChange.emit(visible);\n },\n onMinimizedChange: (isMinimized) => {\n this.minimizedChange.emit(isMinimized);\n },\n onMaximizedChange: (isMaximized) => {\n this.maximizedChange.emit(isMaximized);\n },\n onResizingChange: (isResizing) => {\n this.resizingChange.emit(isResizing);\n }\n }\n });\n super(widget);\n }\n\n /**\n * Trigger the opening of the drawer.\n *\n * @param animated - whether the transition should be animated. If the parameter is not defined, the `animated` is defined by the component input or the default config.\n *\n * @returns A promise that resolves once the opening transition has finished.\n */\n public open(animated?: boolean): Promise<void> {\n return this.api.open(animated);\n }\n\n /**\n * Trigger the closing of the drawer.\n *\n * @param animated - whether the transition should be animated. If the parameter is not defined, the `animated` is defined by the component input or the default config.\n *\n * @returns A promise that resolves once the closing transition has finished.\n */\n public close(animated?: boolean): Promise<void> {\n return this.api.close(animated);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
package/fesm2022/design-factory-angular-sidenav.mjs CHANGED
@@ -2,7 +2,7 @@ import { createNavManager } from '@design-factory/core/services/navManager';
2
2
  import { toAngularSignal, md$, lg$, useDirectiveForHost } from '@design-factory/angular/internals';
3
3
  import { NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
4
4
  import * as i0 from '@angular/core';
5
- 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';
5
+ 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';
6
6
  import * as i1 from '@angular/forms';
7
7
  import { FormsModule } from '@angular/forms';
8
8
  import { DfDrawer } from '@design-factory/angular/drawer';
@@ -431,9 +431,16 @@ class DfSidenavLinkBaseComponent {
431
431
  */
432
432
  this.wrapperHasIconContent = input(false, ...(ngDevMode ? [{ debugName: "wrapperHasIconContent" }] : []));
433
433
  /**
434
- * Indicates if the link is currently active based on the Router state
434
+ * Explicitly sets the active state of the link. When provided, the link behaves
435
+ * as an external link (plain `<a href>`) and the Angular Router is not used.
436
+ * When `undefined` (default), the active state is determined by the Angular Router.
435
437
  */
436
- this.isActiveLink = signal(false, ...(ngDevMode ? [{ debugName: "isActiveLink" }] : []));
438
+ this.active = input(...(ngDevMode ? [undefined, { debugName: "active" }] : []));
439
+ /**
440
+ * Reflects the current active state of the link.
441
+ * Driven by the `active` input when provided, otherwise updated by the router via `(isActiveChange)`.
442
+ */
443
+ this.isActiveLink = linkedSignal(() => this.active() ?? false, ...(ngDevMode ? [{ debugName: "isActiveLink" }] : []));
437
444
  /**
438
445
  * Options to determine when the router link is considered active
439
446
  */
@@ -463,11 +470,11 @@ class DfSidenavLinkBaseComponent {
463
470
  return true;
464
471
  }
465
472
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavLinkBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
466
- 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 }); }
473
+ 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 }); }
467
474
  }
468
475
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavLinkBaseComponent, decorators: [{
469
476
  type: Directive
470
- }], 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 }] }] } });
477
+ }], 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 }] }] } });
471
478
 
472
479
  /**
473
480
  * Component representing a leaf in the sidenav for desktop devices
@@ -480,21 +487,38 @@ class DfSidenavLinkDesktopComponent extends DfSidenavLinkBaseComponent {
480
487
  }
481
488
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavLinkDesktopComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
482
489
  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: `
483
- <a
484
- class="btn df-sidenav-button d-flex gap-3"
485
- [class.w-100]="!sidenav.isMinimized()"
486
- routerLinkActive="df-sidenav-active-level"
487
- ariaCurrentWhenActive="page"
488
- (isActiveChange)="isActiveLink.set($event)"
489
- [routerLink]="linkPath()"
490
- [class.justify-content-start]="!sidenav.isMinimized()"
491
- [routerLinkActiveOptions]="routerLinkActiveOptions()"
492
- [attr.aria-label]="label()"
493
- (click)="toggleSidenavOnSmallScreen()"
494
- #anchor
495
- >
496
- <ng-container [ngTemplateOutlet]="content" />
497
- </a>
490
+ @if (active() !== undefined) {
491
+ <a
492
+ class="btn df-sidenav-button d-flex gap-3"
493
+ [class.w-100]="!sidenav.isMinimized()"
494
+ [class.df-sidenav-active-level]="active()"
495
+ [class.justify-content-start]="!sidenav.isMinimized()"
496
+ [href]="linkPath()"
497
+ target="_blank"
498
+ [attr.aria-label]="label()"
499
+ [attr.aria-current]="active() ? 'page' : null"
500
+ (click)="toggleSidenavOnSmallScreen()"
501
+ #anchor
502
+ >
503
+ <ng-container [ngTemplateOutlet]="content" />
504
+ </a>
505
+ } @else {
506
+ <a
507
+ class="btn df-sidenav-button d-flex gap-3"
508
+ [class.w-100]="!sidenav.isMinimized()"
509
+ routerLinkActive="df-sidenav-active-level"
510
+ ariaCurrentWhenActive="page"
511
+ (isActiveChange)="isActiveLink.set($event)"
512
+ [routerLink]="linkPath()"
513
+ [class.justify-content-start]="!sidenav.isMinimized()"
514
+ [routerLinkActiveOptions]="routerLinkActiveOptions()"
515
+ [attr.aria-label]="label()"
516
+ (click)="toggleSidenavOnSmallScreen()"
517
+ #anchor
518
+ >
519
+ <ng-container [ngTemplateOutlet]="content" />
520
+ </a>
521
+ }
498
522
  <ng-template #content>
499
523
  <ng-content select="[dfSidenavIcon]" />
500
524
  @if (icon()) {
@@ -512,21 +536,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
512
536
  changeDetection: ChangeDetectionStrategy.OnPush,
513
537
  selector: 'df-sidenav-link-desktop',
514
538
  template: `
515
- <a
516
- class="btn df-sidenav-button d-flex gap-3"
517
- [class.w-100]="!sidenav.isMinimized()"
518
- routerLinkActive="df-sidenav-active-level"
519
- ariaCurrentWhenActive="page"
520
- (isActiveChange)="isActiveLink.set($event)"
521
- [routerLink]="linkPath()"
522
- [class.justify-content-start]="!sidenav.isMinimized()"
523
- [routerLinkActiveOptions]="routerLinkActiveOptions()"
524
- [attr.aria-label]="label()"
525
- (click)="toggleSidenavOnSmallScreen()"
526
- #anchor
527
- >
528
- <ng-container [ngTemplateOutlet]="content" />
529
- </a>
539
+ @if (active() !== undefined) {
540
+ <a
541
+ class="btn df-sidenav-button d-flex gap-3"
542
+ [class.w-100]="!sidenav.isMinimized()"
543
+ [class.df-sidenav-active-level]="active()"
544
+ [class.justify-content-start]="!sidenav.isMinimized()"
545
+ [href]="linkPath()"
546
+ target="_blank"
547
+ [attr.aria-label]="label()"
548
+ [attr.aria-current]="active() ? 'page' : null"
549
+ (click)="toggleSidenavOnSmallScreen()"
550
+ #anchor
551
+ >
552
+ <ng-container [ngTemplateOutlet]="content" />
553
+ </a>
554
+ } @else {
555
+ <a
556
+ class="btn df-sidenav-button d-flex gap-3"
557
+ [class.w-100]="!sidenav.isMinimized()"
558
+ routerLinkActive="df-sidenav-active-level"
559
+ ariaCurrentWhenActive="page"
560
+ (isActiveChange)="isActiveLink.set($event)"
561
+ [routerLink]="linkPath()"
562
+ [class.justify-content-start]="!sidenav.isMinimized()"
563
+ [routerLinkActiveOptions]="routerLinkActiveOptions()"
564
+ [attr.aria-label]="label()"
565
+ (click)="toggleSidenavOnSmallScreen()"
566
+ #anchor
567
+ >
568
+ <ng-container [ngTemplateOutlet]="content" />
569
+ </a>
570
+ }
530
571
  <ng-template #content>
531
572
  <ng-content select="[dfSidenavIcon]" />
532
573
  @if (icon()) {
@@ -588,17 +629,30 @@ class DfSidenavLinkMobileComponent extends DfSidenavLinkBaseComponent {
588
629
  }
589
630
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavLinkMobileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
590
631
  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: `
591
- <a
592
- class="btn df-sidenav-button d-flex gap-3 justify-content-start w-100 df-sidenav-breadcrumb-button"
593
- routerLinkActive="df-sidenav-active-level"
594
- ariaCurrentWhenActive="page"
595
- (isActiveChange)="isActiveLink.set($event)"
596
- [routerLink]="linkPath()"
597
- [routerLinkActiveOptions]="routerLinkActiveOptions()"
598
- (click)="toggleSidenavOnSmallScreen()"
599
- >
600
- <ng-container [ngTemplateOutlet]="content" />
601
- </a>
632
+ @if (active() !== undefined) {
633
+ <a
634
+ class="btn df-sidenav-button d-flex gap-3 justify-content-start w-100 df-sidenav-breadcrumb-button"
635
+ [class.df-sidenav-active-level]="active()"
636
+ [href]="linkPath()"
637
+ target="_blank"
638
+ [attr.aria-current]="active() ? 'page' : null"
639
+ (click)="toggleSidenavOnSmallScreen()"
640
+ >
641
+ <ng-container [ngTemplateOutlet]="content" />
642
+ </a>
643
+ } @else {
644
+ <a
645
+ class="btn df-sidenav-button d-flex gap-3 justify-content-start w-100 df-sidenav-breadcrumb-button"
646
+ routerLinkActive="df-sidenav-active-level"
647
+ ariaCurrentWhenActive="page"
648
+ (isActiveChange)="isActiveLink.set($event)"
649
+ [routerLink]="linkPath()"
650
+ [routerLinkActiveOptions]="routerLinkActiveOptions()"
651
+ (click)="toggleSidenavOnSmallScreen()"
652
+ >
653
+ <ng-container [ngTemplateOutlet]="content" />
654
+ </a>
655
+ }
602
656
  <ng-template #content>
603
657
  <div class="d-flex gap-3 w-100">
604
658
  <ng-content select="[dfSidenavIcon]" />
@@ -608,7 +662,7 @@ class DfSidenavLinkMobileComponent extends DfSidenavLinkBaseComponent {
608
662
  <div class="d-flex flex-column align-items-start">
609
663
  <span class="sidenav-label" [title]="label()">{{ label() }}</span>
610
664
  @if (isSearching() && breadcrumbPath().length > 0) {
611
- <small class="d-flex align-items-center gap-1" [class.text-muted]="!isActiveLink()">
665
+ <small class="d-flex align-items-center gap-1" [class.text-muted]="!active()">
612
666
  @for (item of breadcrumbPath(); track $index) {
613
667
  <span>{{ item }}</span>
614
668
  @if (!$last) {
@@ -628,17 +682,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
628
682
  changeDetection: ChangeDetectionStrategy.OnPush,
629
683
  selector: 'df-sidenav-link-mobile',
630
684
  template: `
631
- <a
632
- class="btn df-sidenav-button d-flex gap-3 justify-content-start w-100 df-sidenav-breadcrumb-button"
633
- routerLinkActive="df-sidenav-active-level"
634
- ariaCurrentWhenActive="page"
635
- (isActiveChange)="isActiveLink.set($event)"
636
- [routerLink]="linkPath()"
637
- [routerLinkActiveOptions]="routerLinkActiveOptions()"
638
- (click)="toggleSidenavOnSmallScreen()"
639
- >
640
- <ng-container [ngTemplateOutlet]="content" />
641
- </a>
685
+ @if (active() !== undefined) {
686
+ <a
687
+ class="btn df-sidenav-button d-flex gap-3 justify-content-start w-100 df-sidenav-breadcrumb-button"
688
+ [class.df-sidenav-active-level]="active()"
689
+ [href]="linkPath()"
690
+ target="_blank"
691
+ [attr.aria-current]="active() ? 'page' : null"
692
+ (click)="toggleSidenavOnSmallScreen()"
693
+ >
694
+ <ng-container [ngTemplateOutlet]="content" />
695
+ </a>
696
+ } @else {
697
+ <a
698
+ class="btn df-sidenav-button d-flex gap-3 justify-content-start w-100 df-sidenav-breadcrumb-button"
699
+ routerLinkActive="df-sidenav-active-level"
700
+ ariaCurrentWhenActive="page"
701
+ (isActiveChange)="isActiveLink.set($event)"
702
+ [routerLink]="linkPath()"
703
+ [routerLinkActiveOptions]="routerLinkActiveOptions()"
704
+ (click)="toggleSidenavOnSmallScreen()"
705
+ >
706
+ <ng-container [ngTemplateOutlet]="content" />
707
+ </a>
708
+ }
642
709
  <ng-template #content>
643
710
  <div class="d-flex gap-3 w-100">
644
711
  <ng-content select="[dfSidenavIcon]" />
@@ -648,7 +715,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
648
715
  <div class="d-flex flex-column align-items-start">
649
716
  <span class="sidenav-label" [title]="label()">{{ label() }}</span>
650
717
  @if (isSearching() && breadcrumbPath().length > 0) {
651
- <small class="d-flex align-items-center gap-1" [class.text-muted]="!isActiveLink()">
718
+ <small class="d-flex align-items-center gap-1" [class.text-muted]="!active()">
652
719
  @for (item of breadcrumbPath(); track $index) {
653
720
  <span>{{ item }}</span>
654
721
  @if (!$last) {
@@ -708,6 +775,12 @@ class DfSidenavLinkComponent {
708
775
  * Options to determine when the router link is considered active
709
776
  */
710
777
  this.routerLinkActiveOptions = input({ exact: false }, ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : []));
778
+ /**
779
+ * Explicitly sets the active state of the link. When provided, the link renders as
780
+ * a plain `<a href>` (no Angular Router). When `undefined` (default), the Angular Router determines
781
+ * the active state.
782
+ */
783
+ this.active = input(...(ngDevMode ? [undefined, { debugName: "active" }] : []));
711
784
  /**
712
785
  * The parent wrapper item component (if any)
713
786
  */
@@ -728,7 +801,7 @@ class DfSidenavLinkComponent {
728
801
  this.sidenav = inject(DfSidenavComponent);
729
802
  }
730
803
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
731
- 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: `
804
+ 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: `
732
805
  <ng-template #iconSlot>
733
806
  <ng-content select="[dfSidenavIcon]" />
734
807
  </ng-template>
@@ -741,6 +814,7 @@ class DfSidenavLinkComponent {
741
814
  [linkPath]="linkPath()"
742
815
  [label]="label()"
743
816
  [icon]="icon()"
817
+ [active]="active()"
744
818
  [wrapperHasIconContent]="wrapperHasIconContent()"
745
819
  [routerLinkActiveOptions]="routerLinkActiveOptions()"
746
820
  >
@@ -752,6 +826,7 @@ class DfSidenavLinkComponent {
752
826
  [linkPath]="linkPath()"
753
827
  [label]="label()"
754
828
  [icon]="icon()"
829
+ [active]="active()"
755
830
  [wrapperHasIconContent]="wrapperHasIconContent()"
756
831
  [routerLinkActiveOptions]="routerLinkActiveOptions()"
757
832
  >
@@ -779,6 +854,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
779
854
  [linkPath]="linkPath()"
780
855
  [label]="label()"
781
856
  [icon]="icon()"
857
+ [active]="active()"
782
858
  [wrapperHasIconContent]="wrapperHasIconContent()"
783
859
  [routerLinkActiveOptions]="routerLinkActiveOptions()"
784
860
  >
@@ -790,6 +866,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
790
866
  [linkPath]="linkPath()"
791
867
  [label]="label()"
792
868
  [icon]="icon()"
869
+ [active]="active()"
793
870
  [wrapperHasIconContent]="wrapperHasIconContent()"
794
871
  [routerLinkActiveOptions]="routerLinkActiveOptions()"
795
872
  >
@@ -805,7 +882,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
805
882
  '[class.mobile]': "sidenav['isMobileDevice']()"
806
883
  }
807
884
  }]
808
- }], 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 }] }] } });
885
+ }], 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 }] }] } });
809
886
 
810
887
  /**
811
888
  * Sidenav element that should be nested inside <df-sidenav> or <df-sidenav-item>