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

package/types/design-factory-angular-form-field.d.ts

@@ -0,0 +1,122 @@
+import * as _angular_core from '@angular/core';
+import { NgControl } from '@angular/forms';
+
+/**
+ * The form field control directive, used to mark an element as a control that can be associated with a {@link DfFormField}.
+ *
+ * @experimental 22.0
+ */
+declare abstract class DfFormFieldControl {
+    /**
+     * The ID of the form control element.
+     *
+     * @defaultValue 'dfId-[number]'
+     */
+    readonly id: _angular_core.InputSignal<string>;
+    /** Gets the NgControl for this control. */
+    protected readonly ngControl: NgControl | null;
+    readonly requiredOverride: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    readonly required: _angular_core.Signal<boolean>;
+    /**
+     * The list of element IDs that currently describe this control.
+     *
+     * It includes the IDs of the associated form field hints and error message elements. The form field will use this list to populate the `aria-describedby` attribute on the control.
+     */
+    readonly describedByIds: _angular_core.WritableSignal<string[]>;
+    /**
+     * Determines whether the control is invalid and has been touched.
+     *
+     * This is used to determine when to display error messages and apply error styles.
+     */
+    readonly touchedInvalid: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfFormFieldControl, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DfFormFieldControl, never, never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "requiredOverride": { "alias": "required"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * The label component, used to define the label of a {@link DfFormField} component.
+ *
+ * @experimental 22.0
+ */
+declare class DfLabel {
+    #private;
+    /**
+     * Whether to hide the mandatory indicator (asterisk) for required form fields. By default, the mandatory indicator is shown for required form fields.
+     */
+    readonly noRequiredIndicator: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfLabel, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfLabel, "df-label", never, { "noRequiredIndicator": { "alias": "noRequiredIndicator"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * The form field error message component, used to display an error message inside of a {@link DfFormField} component.
+ *
+ * It can be associated with specific error codes of the form control, or it can be displayed for any error if no error codes are specified.
+ *
+ * @experimental 22.0
+ */
+declare class DfError {
+    /**
+     * The ID of the error message element.
+     *
+     * @defaultValue 'dfId-[number]'
+     */
+    readonly id: _angular_core.InputSignal<string>;
+    /**
+     * The list of error codes that this error message corresponds to. If not provided, the error message will be displayed for any error.
+     */
+    readonly on: _angular_core.InputSignalWithTransform<string[], unknown>;
+    private readonly formField;
+    /**
+     * Determines whether the error message should be displayed.
+     *
+     * The error message is always displayed if no error codes are specified or if the form control is not found.
+     * Otherwise, it is displayed only if the form control is invalid, touched, and has at least one of the specified error codes.
+     */
+    protected readonly showError: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfError, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfError, "df-error", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "on": { "alias": "on"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * The form field hint component, used to display a hint inside of a {@link DfFormField} component.
+ *
+ * @experimental 22.0
+ */
+declare class DfHint {
+    #private;
+    /**
+     * The ID of the hint element.
+     *
+     * @defaultValue 'dfId-[number]'
+     */
+    readonly id: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfHint, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfHint, "df-hint", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * The form field component, used to wrap a form field control and its associated label, hints, and error messages.
+ *
+ * It accepts the following content:
+ * - `df-label`: to define the label of the form field through a {@link DfLabel} component. The label is optional but recommended for accessibility reasons.
+ * - `df-hint`: to define a hint for the form field control through a {@link DfHint} component. Multiple hints can be provided.
+ * - `df-error`: to define an error message for the form field control through a {@link DfError} component. Multiple error messages can be provided.
+ * - Any form field control component (e.g., `df-input`, `df-select`, etc.) that implements the {@link DfFormFieldControl} interface.
+ *
+ * The form field component is responsible for associating the label, hints, and error messages with the form field control using ARIA attributes.
+ *
+ * @experimental 22.0
+ */
+declare class DfFormField {
+    protected readonly fieldControl: _angular_core.Signal<DfFormFieldControl>;
+    protected readonly label: _angular_core.Signal<DfLabel | undefined>;
+    protected readonly errors: _angular_core.Signal<readonly DfError[]>;
+    protected readonly hints: _angular_core.Signal<readonly DfHint[]>;
+    protected readonly showMandatoryIndicator: _angular_core.Signal<boolean>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfFormField, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfFormField, "df-form-field", never, {}, {}, ["fieldControl", "label", "errors", "hints"], ["df-label", "*", "df-error", "df-hint"], true, never>;
+}
+
+export { DfError, DfFormField, DfFormFieldControl, DfHint, DfLabel };

package/types/design-factory-angular-icon.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from '@angular/core';
+
+/**
+ * @experimental 22.0
+ */
+declare class DfIcon {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DfIcon, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DfIcon, "df-icon", never, {}, {}, never, never, true, never>;
+}
+
+export { DfIcon };

package/types/design-factory-angular-input.d.ts

@@ -0,0 +1,16 @@
+import { DfFormFieldControl } from '@design-factory/angular/form-field';
+import * as i0 from '@angular/core';
+
+/**
+ * The input component, used to create an input field.
+ *
+ * It can be used as a standalone component or as a form field control within a {@link DfFormField} component.
+ *
+ * @since 22.0
+ */
+declare class DfInput extends DfFormFieldControl {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DfInput, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DfInput, "input[dfInput]", never, {}, {}, never, never, true, never>;
+}
+
+export { DfInput };

package/types/design-factory-angular-internals.d.ts

@@ -1,6 +1,5 @@
 import * as i0 from '@angular/core';
-import { Signal, FactoryProvider, OnChanges, WritableSignal as WritableSignal$1, OnInit, SimpleChanges } from '@angular/core';
-import * as _amadeus_it_group_tansu from '@amadeus-it-group/tansu';
+import { Signal, FactoryProvider, ElementRef, OnChanges, Injector, WritableSignal as WritableSignal$1, OnInit, SimpleChanges } from '@angular/core';
 import { ReadableSignal, WritableSignal } from '@amadeus-it-group/tansu';
 import * as _design_factory_core_types from '@design-factory/core/types';
 import { Widget, WidgetState, WidgetFactory, WidgetProps, Directive, DirectiveAndParam, DirectivesAndOptParam } from '@design-factory/core/types';
@@ -97,10 +96,12 @@ declare const injectDfComponentConfig: <T>(componentKey: string) => () => i0.Wri
  *
  * @param [directive] - The directive to be applied to the host element.
  * @param [params] - The parameters to be passed to the directive.
+ * @param [injector] - The Angular injector to be used for managing the directive's lifecycle.
+ * If not provided, the default injector (from the current injection context) will be used.
  *
  * @returns An object containing an `update` function to update the directive and its parameters.
  */
-declare const useDirectiveForHost: <T>(directive?: Directive<T>, params?: T) => {
+declare const useDirectiveForHost: <T>(directive?: Directive<T>, params?: T, injector?: Injector) => {
     update: (newDirective?: Directive<T>, newParams?: T) => void;
 };
 /**
@@ -135,6 +136,54 @@ declare class UseMultiDirective<T extends any[]> implements OnChanges {
     static ɵfac: i0.ɵɵFactoryDeclaration<UseMultiDirective<any>, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<UseMultiDirective<any>, "[dfUseMulti]", never, { "useMulti": { "alias": "dfUseMulti"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
+/**
+ * A flexible type representing either a direct DOM element, an Angular {@link ElementRef},
+ * or a reactive accessor (signal/function) returning one of these.
+ *
+ * Accepts `null` or `undefined` to represent the absence of an element.
+ * When a function is provided, it is called inside an Angular {@link effect} so that
+ * changes to the underlying signal automatically re-apply the directive.
+ */
+type HTMLElementOrRef = HTMLElement | ElementRef | null | undefined | (() => HTMLElement | ElementRef | null | undefined);
+/**
+ * Applies an AgnosUI directive to an arbitrary DOM element (not necessarily the host element)
+ * and manages its lifecycle via an Angular {@link effect}.
+ *
+ * Unlike {@link useDirectiveForHost}, which targets the component's own host element,
+ * this function lets you bind a directive to any element referenced by a signal, an
+ * {@link ElementRef}, or a plain `HTMLElement`. The directive instance is automatically
+ * created when the element becomes available and destroyed when the element changes or
+ * the effect is cleaned up.
+ *
+ * @param element - The target element or a reactive accessor returning it.
+ * @param directive - The AgnosUI directive to apply.
+ * @param injector - The Angular {@link Injector} used to create the effect. Defaults to the
+ *   current injection context.
+ */
+declare const useDirectiveForElement: (element: HTMLElementOrRef, directive: Directive, injector?: Injector) => void;
+/**
+ * Uses multiple AgnosUI directives from an object (typically a widget instance) on their
+ * corresponding DOM elements in a single call.
+ *
+ * This is a convenience wrapper around {@link useDirectiveForElement} designed for use with
+ * widget objects that expose a `directives` map. It iterates over the provided `links` and
+ * binds each directive to its target element.
+ *
+ * The `object` can either directly contain directive properties or expose them under a
+ * `directives` key (the standard shape of AgnosUI widgets).
+ *
+ * @template U - The full type of the object (returned as-is for chaining).
+ * @template T - A record mapping directive names to AgnosUI directives.
+ *
+ * @param object - The widget or directive map to read directives from.
+ * @param links - A partial map of directive names to their target elements or element accessors.
+ * @param injector - The Angular {@link Injector} used to create effects. Defaults to the
+ *   current injection context.
+ * @returns The original `object`, unchanged, for convenient chaining.
+ */
+declare const useDirectivesForElements: <U, T extends { [K in keyof T]: Directive; }>(object: U & (T | {
+    directives: T;
+}), links: { [K in keyof T]?: HTMLElementOrRef; }, injector?: Injector) => U;
 
 /**
  * Converts a Tansu `ReadableSignal` to an Angular `Signal`.
@@ -248,25 +297,35 @@ declare abstract class AgnosWidgetDirective<W extends Widget> implements OnChang
 }
 
 /**
- * sm breakpoint,
- * tansu signal that returns true when the viewport is at least 576px wide
- */
-declare const sm$: _amadeus_it_group_tansu.ReadableSignal<boolean>;
-/**
- * md breakpoint,
- * tansu signal that returns true when the viewport is at least 768px wide
+ * Transforms a value (typically a string) to a boolean.
+ * Intended to be used as a transform function of an input.
+ *
+ * @example
+ * ```readonly status = input({ transform: auBooleanAttribute });```
+ * @param value - Value to be transformed.
+ * @returns the value transformed
  */
-declare const md$: _amadeus_it_group_tansu.ReadableSignal<boolean>;
+declare function auBooleanAttribute(value: unknown): boolean | undefined;
 /**
- * lg breakpoint,
- * tansu signal that returns true when the viewport is at least 992px wide
+ * Transforms a value (typically a string) to a number.
+ * Intended to be used as a transform function of an input.
+ * @param value - Value to be transformed.
+ *
+ * @example
+ *  ```readonly id = input({ transform: auNumberAttribute });```
+ * @returns the value transformed
  */
-declare const lg$: _amadeus_it_group_tansu.ReadableSignal<boolean>;
+declare function auNumberAttribute(value: unknown): number | undefined;
 /**
- * xl breakpoint,
- * tansu signal that returns true when the viewport is at least 1200px wide
+ * Transforms a value (typically a string) to a number.
+ * Intended to be used as a transform function of an input.
+ * @param value - Value to be transformed. `null` or `undefined`, returns the value unchanged.
+ *
+ * @example
+ *  ```readonly id = input({ transform: auNumberOrNullAttribute });```
+ * @returns the value transformed
  */
-declare const xl$: _amadeus_it_group_tansu.ReadableSignal<boolean>;
+declare function auNumberOrNullAttribute(value: unknown): number | null | undefined;
 
-export { AgnosWidgetDirective, BaseWidgetDirective, UseDirective, UseMultiDirective, callWidgetFactory, callWidgetFactoryWithConfig, injectDfComponentConfig, injectWidgetConfig, lg$, md$, provideDfComponentConfig, sm$, toAngularSignal, toAngularWritableSignal, useDirectiveForHost, xl$ };
-export type { AngularState, AngularWidget };
+export { AgnosWidgetDirective, BaseWidgetDirective, UseDirective, UseMultiDirective, auBooleanAttribute, auNumberAttribute, auNumberOrNullAttribute, callWidgetFactory, callWidgetFactoryWithConfig, injectDfComponentConfig, injectWidgetConfig, provideDfComponentConfig, toAngularSignal, toAngularWritableSignal, useDirectiveForElement, useDirectiveForHost, useDirectivesForElements };
+export type { AngularState, AngularWidget, HTMLElementOrRef };

package/types/design-factory-angular-separator.d.ts

@@ -0,0 +1,29 @@
+import * as i0 from '@angular/core';
+
+/**
+ * Orientation of a `<df-separator>`.
+ */
+type DfSeparatorOrientation = 'horizontal' | 'vertical';
+/**
+ * Visual separator between two regions of content.
+ *
+ * Replaces the legacy `<hr>` and `.vertical-separator` usages. Spacing is the consumer's
+ * responsibility — apply margins on the host or wrapping element.
+ *
+ * @experimental 22.0.0
+ */
+declare class DfSeparator {
+    /**
+     * Separator orientation.
+     *
+     * Supported orientations: `'horizontal'`, `'vertical'`.
+     *
+     * @defaultValue `'horizontal'`
+     */
+    readonly orientation: i0.InputSignal<DfSeparatorOrientation>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DfSeparator, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DfSeparator, "df-separator", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { DfSeparator };
+export type { DfSeparatorOrientation };

package/types/design-factory-angular-sidenav.d.ts

@@ -1,5 +1,6 @@
 import * as _design_factory_core_services_navManager from '@design-factory/core/services/navManager';
 import { NavManagerItemConfig } from '@design-factory/core/services/navManager';
+import * as _angular_forms_signals from '@angular/forms/signals';
 import * as _angular_core from '@angular/core';
 import { ElementRef, Signal, AfterContentInit } from '@angular/core';
 import { IsActiveMatchOptions } from '@angular/router';
@@ -26,7 +27,14 @@ declare abstract class DfSidenavLinkBaseComponent {
      */
     readonly wrapperHasIconContent: _angular_core.InputSignal<boolean>;
     /**
-     * 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.
+     */
+    readonly active: _angular_core.InputSignal<boolean | undefined>;
+    /**
+     * Reflects the current active state of the link.
+     * Driven by the `active` input when provided, otherwise updated by the router via `(isActiveChange)`.
      */
     readonly isActiveLink: _angular_core.WritableSignal<boolean>;
     /**
@@ -45,7 +53,7 @@ declare abstract class DfSidenavLinkBaseComponent {
     protected readonly isVisible: _angular_core.Signal<boolean>;
     protected toggleSidenavOnSmallScreen(): boolean;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfSidenavLinkBaseComponent, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DfSidenavLinkBaseComponent, never, never, { "linkPath": { "alias": "linkPath"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "wrapperHasIconContent": { "alias": "wrapperHasIconContent"; "required": false; "isSignal": true; }; "routerLinkActiveOptions": { "alias": "routerLinkActiveOptions"; "required": false; "isSignal": true; }; }, {}, ["iconContent"], never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DfSidenavLinkBaseComponent, never, never, { "linkPath": { "alias": "linkPath"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "wrapperHasIconContent": { "alias": "wrapperHasIconContent"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "routerLinkActiveOptions": { "alias": "routerLinkActiveOptions"; "required": false; "isSignal": true; }; }, {}, ["iconContent"], never, true, never>;
 }
 
 /**
@@ -72,17 +80,17 @@ declare abstract class DfSidenavItemBaseComponent {
     /**
      * Collapsed state of the item
      * Only used for the desktop version
-     * @default false
+     * @defaultValue `false`
      */
     readonly collapsed: _angular_core.ModelSignal<boolean>;
     /**
      * The icon class name or inline content (e.g., font awesome class)
-     * @default ''
+     * @defaultValue `''`
      */
     readonly icon: _angular_core.InputSignal<string>;
     /**
      * Whether the wrapper component has icon content (internally used)
-     * @default false
+     * @defaultValue `false`
      */
     readonly wrapperHasIconContent: _angular_core.InputSignal<boolean>;
     protected readonly sidenav: DfSidenavComponent;
@@ -161,7 +169,7 @@ declare class DfSidenavItemMobileComponent extends DfSidenavItemBaseComponent {
      */
     protected handleBackClick(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfSidenavItemMobileComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfSidenavItemMobileComponent, "df-sidenav-item-mobile", never, {}, {}, never, ["[dfSidenavIcon]", "[dfSidenavIcon]", "[dfSidenavIcon]", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfSidenavItemMobileComponent, "df-sidenav-item-mobile", never, {}, {}, never, ["[dfSidenavIcon]", "[dfSidenavIcon]", "*"], true, never>;
 }
 
 /**
@@ -187,6 +195,12 @@ declare class DfSidenavLinkComponent {
     readonly routerLinkActiveOptions: _angular_core.InputSignal<IsActiveMatchOptions | {
         exact: boolean;
     }>;
+    /**
+     * 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.
+     */
+    readonly active: _angular_core.InputSignal<boolean | undefined>;
     /**
      * The parent wrapper item component (if any)
      */
@@ -203,7 +217,7 @@ declare class DfSidenavLinkComponent {
     protected readonly wrapperHasIconContent: _angular_core.Signal<boolean>;
     protected readonly sidenav: DfSidenavComponent;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfSidenavLinkComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfSidenavLinkComponent, "df-sidenav-link", never, { "linkPath": { "alias": "linkPath"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "routerLinkActiveOptions": { "alias": "routerLinkActiveOptions"; "required": false; "isSignal": true; }; }, {}, ["iconContentQuery"], ["[dfSidenavIcon]", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfSidenavLinkComponent, "df-sidenav-link", never, { "linkPath": { "alias": "linkPath"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "routerLinkActiveOptions": { "alias": "routerLinkActiveOptions"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; }, {}, ["iconContentQuery"], ["[dfSidenavIcon]", "*"], true, never>;
 }
 
 /**
@@ -217,7 +231,7 @@ declare class DfSidenavItemComponent {
     readonly label: _angular_core.InputSignal<unknown>;
     /**
      * Flag whether the sidenav item is collapsed
-     * @default false
+     * @defaultValue `false`
      */
     readonly collapsed: _angular_core.ModelSignal<boolean>;
     /**
@@ -258,28 +272,28 @@ declare class DfSidenavItemComponent {
 declare class DfSidenavComponent implements AfterContentInit {
     /**
      * Flag whether the sidenav includes a search input
-     * @default true
+     * @defaultValue `true`
      */
     readonly searchable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * Flag whether the sidenav should be resizable
-     * @default true
+     * @defaultValue `true`
      */
     readonly resizable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * Flag whether the sidenav should have the collapse button
-     * @default true
+     * @defaultValue `true`
      */
     readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * Flag to enable the mobile sidenav display of the items.
-     * @default true
+     * @defaultValue `true`
      */
     readonly enableMobile: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
-     * @since 21.1.0
-     *
      * Flag to disable the automatic scroll to active link on desktop when the sidenav is initialized.
+     *
+     * @since 21.1.0
      */
     readonly disableInitialDesktopAutoScroll: _angular_core.InputSignalWithTransform<boolean, unknown>;
     protected readonly _isMinimized: _angular_core.WritableSignal<boolean>;
@@ -297,18 +311,19 @@ declare class DfSidenavComponent implements AfterContentInit {
     protected readonly width: _angular_core.WritableSignal<number | null>;
     private savedWidth;
     protected readonly searchTerm: _angular_core.WritableSignal<string>;
+    protected readonly searchTermFormField: _angular_forms_signals.FieldTree<string, string | number, "writable">;
     protected readonly mobileNavigationStack: _angular_core.WritableSignal<(DfSidenavItemComponent | null | undefined)[]>;
     protected readonly currentMobilePanel: Signal<DfSidenavItemComponent | null | undefined>;
-    private readonly isMd;
+    private readonly isSm;
     private readonly isLg;
     protected readonly isSmallScreen: Signal<boolean>;
     protected readonly isMediumScreen: Signal<boolean>;
     protected readonly isLargeUpScreen: Signal<boolean>;
-    protected readonly isMobileOrSmallScreen: Signal<boolean>;
     protected readonly backdrop: Signal<boolean>;
     protected readonly navManager: _design_factory_core_services_navManager.NavManager<unknown>;
     protected readonly navManagerConfig: NavManagerItemConfig;
     private readonly injector;
+    private readonly skipActiveItemNavigation;
     constructor();
     ngAfterContentInit(): void;
     /**
@@ -336,6 +351,7 @@ declare class DfSidenavComponent implements AfterContentInit {
      * @param isResizing - Whether the sidenav is currently being resized
      */
     resizingChangeHandler(isResizing: boolean): void;
+    protected onMinimizedChange(isMinimized: boolean): void;
     protected focusSearch(): void;
     /**
      * Method to add the given item to the mobile navigation stack
@@ -367,4 +383,85 @@ declare class DfSidenavIconDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DfSidenavIconDirective, "[dfSidenavIcon]", never, {}, {}, never, never, true, never>;
 }
 
-export { DfSidenavComponent, DfSidenavIconDirective, DfSidenavItemComponent, DfSidenavLinkComponent };
+/**
+ * Defines the structure of the navigation items used to build the sidenav menu.
+ */
+type DfSideNavItem = {
+    label: string;
+    icon?: string;
+    collapsed?: boolean;
+    children: (DfSideNavItem | DfSideNavLink)[];
+};
+/**
+ * Defines the structure of the navigation links used to build the sidenav menu.
+ */
+type DfSideNavLink = {
+    label: string;
+    icon?: string;
+    linkPath: string;
+    active?: boolean;
+    routerLinkActiveOptions?: IsActiveMatchOptions | {
+        exact: boolean;
+    };
+};
+/**
+ * Public input node accepted by {@link DfSidenavInput}.
+ */
+type DfSideNavInputNode = DfSideNavItem | DfSideNavLink;
+/**
+ * A wrapper of the {@link DfSidenavComponent} driven by a data array provided as an input.
+ * All inputs are forwarded to the underlying {@link DfSidenavComponent}.
+ *
+ * @since 22.0
+ */
+declare class DfSidenavInput {
+    /**
+     * Navigation items to render in the sidenav.
+     */
+    readonly items: _angular_core.InputSignal<DfSideNavInputNode[]>;
+    /**
+     * Class name applied to the underlying {@link DfSidenavComponent} host element.
+     * @default ''
+     */
+    readonly className: _angular_core.InputSignal<string>;
+    /**
+     * Flag whether the sidenav includes a search input.
+     * @default false
+     */
+    readonly searchable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Flag whether the sidenav should be resizable.
+     * @default false
+     */
+    readonly resizable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Flag whether the sidenav should have the collapse button.
+     * @default true
+     */
+    readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Flag to enable the mobile sidenav display of the items.
+     * @default true
+     */
+    readonly enableMobile: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Flag to disable the automatic scroll to active link on desktop when the sidenav is initialized.
+     * @default false
+     */
+    readonly disableInitialDesktopAutoScroll: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    private readonly _sidenav;
+    /**
+     * Whether the sidenav is currently minimized.
+     */
+    readonly isMinimized: _angular_core.Signal<boolean>;
+    /**
+     * Toggle or set the minimized state of the sidenav.
+     */
+    toggleMinimize(minimized?: boolean): void;
+    protected isSideItem(item: DfSideNavItem | DfSideNavLink): item is DfSideNavItem;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfSidenavInput, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfSidenavInput, "df-sidenav-input", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "enableMobile": { "alias": "enableMobile"; "required": false; "isSignal": true; }; "disableInitialDesktopAutoScroll": { "alias": "disableInitialDesktopAutoScroll"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { DfSidenavComponent, DfSidenavIconDirective, DfSidenavInput, DfSidenavItemComponent, DfSidenavLinkComponent };
+export type { DfSideNavInputNode, DfSideNavItem, DfSideNavLink };