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

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

@@ -1,17 +1,53 @@
-import * as _agnos_ui_angular_headless from '@agnos-ui/angular-headless';
-import { DrawerWidget, NavManagerItemConfig } from '@agnos-ui/angular-headless';
+import * as _agnos_ui_core_services_navManager from '@agnos-ui/core/services/navManager';
+import { NavManagerItemConfig } from '@agnos-ui/core/services/navManager';
 import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import { DrawerWidget, DrawerConfiguration, DrawerPosition } from '@agnos-ui/core/components/drawer';
 import { AgnosWidgetDirective } from '@design-factory/angular/internals';
 
 /**
- * Possible values for the drawer positions.
+ * Available drawer positions.
  */
-type DrawerPositions = 'inline-start' | 'inline-end' | 'block-start' | 'block-end';
+type DfDrawerPosition = DrawerPosition;
+/**
+ * Available drawer display configurations.
+ * - `'overlay'`: the drawer overlays the page content with a backdrop.
+ * - `'inline'`: the drawer stays in the document flow and moves content as it expands/resizes.
+ */
+type DfDrawerConfiguration = DrawerConfiguration;
+/**
+ * Marks an `<ng-template>` as drawer header content.
+ */
+declare class DfDrawerHeaderTemplate {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfDrawerHeaderTemplate, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DfDrawerHeaderTemplate, "ng-template[dfDrawerHeader]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Marks an `<ng-template>` as drawer body content.
+ */
+declare class DfDrawerBodyTemplate {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfDrawerBodyTemplate, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DfDrawerBodyTemplate, "ng-template[dfDrawerBody]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Marks an `<ng-template>` as drawer footer content.
+ */
+declare class DfDrawerFooterTemplate {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfDrawerFooterTemplate, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DfDrawerFooterTemplate, "ng-template[dfDrawerFooter]", never, {}, {}, never, never, true, never>;
+}
 /**
  * Enables users to show contextual content via a sliding panel from any screen edge.
  * @experimental
  */
-declare class DfDrawerComponent extends AgnosWidgetDirective<DrawerWidget> {
+declare class DfDrawer extends AgnosWidgetDirective<DrawerWidget> {
+    protected readonly headerTemplate: _angular_core.Signal<DfDrawerHeaderTemplate | undefined>;
+    protected readonly bodyTemplate: _angular_core.Signal<DfDrawerBodyTemplate | undefined>;
+    protected readonly footerTemplate: _angular_core.Signal<DfDrawerFooterTemplate | undefined>;
+    protected readonly hasSectionTemplates: _angular_core.Signal<boolean>;
     /**
      * CSS classes to be applied on the widget main container
      *
@@ -63,9 +99,23 @@ declare class DfDrawerComponent extends AgnosWidgetDirective<DrawerWidget> {
      * If `true`, the drawer element is kept in the DOM when it is not visible.
      * This can be useful to preserve the state of the drawer content when it is hidden.
      *
-     * @defaultValue `true`
+     * @defaultValue `false`
      */
     readonly keepInDom: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The display configuration of the drawer.
+     * - `'overlay'` (default): the drawer overlays the page content with a backdrop.
+     * - `'inline'`: the drawer stays in the document flow and moves content as it expands/resizes.
+     *
+     * @defaultValue `'overlay'`
+     */
+    readonly configuration: _angular_core.InputSignal<DrawerConfiguration>;
+    /**
+     * The position of the drawer on the screen.
+     *
+     * @defaultValue `'inline-start'`
+     */
+    readonly position: _angular_core.InputSignal<DrawerPosition>;
     /**
      * An event emitted when the width is changed.
      *
@@ -121,7 +171,7 @@ declare class DfDrawerComponent extends AgnosWidgetDirective<DrawerWidget> {
      * @defaultValue `true`
      */
     readonly focusOnInit: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    protected readonly navManager: _agnos_ui_angular_headless.NavManager<unknown>;
+    protected readonly navManager: _agnos_ui_core_services_navManager.NavManager<unknown>;
     protected readonly navManagerConfig: NavManagerItemConfig;
     /**
      * Event to be triggered when the minimum size is reached.
@@ -138,15 +188,23 @@ declare class DfDrawerComponent extends AgnosWidgetDirective<DrawerWidget> {
     constructor();
     /**
      * Trigger the opening of the drawer.
+     *
+     * @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.
+     *
+     * @returns A promise that resolves once the opening transition has finished.
      */
-    open(): void;
+    open(animated?: boolean): Promise<void>;
     /**
      * Trigger the closing of the drawer.
+     *
+     * @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.
+     *
+     * @returns A promise that resolves once the closing transition has finished.
      */
-    close(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfDrawerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfDrawerComponent, "df-drawer", never, { "className": { "alias": "className"; "required": false; "isSignal": true; }; "bodyScroll": { "alias": "bodyScroll"; "required": false; "isSignal": true; }; "backdrop": { "alias": "backdrop"; "required": false; "isSignal": true; }; "container": { "alias": "container"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "keepInDom": { "alias": "keepInDom"; "required": false; "isSignal": true; }; "focusOnInit": { "alias": "focusOnInit"; "required": false; "isSignal": true; }; }, { "size": "sizeChange"; "sizeChange": "sizeChange"; "visibleChange": "visibleChange"; "minimizedChange": "minimizedChange"; "maximizedChange": "maximizedChange"; "resizingChange": "resizingChange"; "minSize": "minSize"; "maxSize": "maxSize"; }, never, ["*", "df-drawer-splitter-content"], true, never>;
+    close(animated?: boolean): Promise<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfDrawer, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfDrawer, "df-drawer", never, { "className": { "alias": "className"; "required": false; "isSignal": true; }; "bodyScroll": { "alias": "bodyScroll"; "required": false; "isSignal": true; }; "backdrop": { "alias": "backdrop"; "required": false; "isSignal": true; }; "container": { "alias": "container"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "keepInDom": { "alias": "keepInDom"; "required": false; "isSignal": true; }; "configuration": { "alias": "configuration"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "focusOnInit": { "alias": "focusOnInit"; "required": false; "isSignal": true; }; }, { "size": "sizeChange"; "sizeChange": "sizeChange"; "visibleChange": "visibleChange"; "minimizedChange": "minimizedChange"; "maximizedChange": "maximizedChange"; "resizingChange": "resizingChange"; "minSize": "minSize"; "maxSize": "maxSize"; }, ["headerTemplate", "bodyTemplate", "footerTemplate"], ["*", "df-drawer-splitter-content"], true, never>;
 }
 
-export { DfDrawerComponent };
-export type { DrawerPositions };
+export { DfDrawer, DfDrawerBodyTemplate, DfDrawerFooterTemplate, DfDrawerHeaderTemplate };
+export type { DfDrawerConfiguration, DfDrawerPosition };

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

@@ -1,19 +1,47 @@
-import * as _angular_core from '@angular/core';
-import { FactoryProvider, OnChanges, OnInit, AfterContentChecked, SimpleChanges } from '@angular/core';
-import * as _agnos_ui_angular_headless from '@agnos-ui/angular-headless';
-import { WidgetsConfigStore, Widget, AngularWidget } from '@agnos-ui/angular-headless';
-import { ReadableSignal } from '@amadeus-it-group/tansu';
+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 { ReadableSignal, WritableSignal } from '@amadeus-it-group/tansu';
+import * as _agnos_ui_core_types from '@agnos-ui/core/types';
+import { Widget, WidgetState, WidgetFactory, WidgetProps, Directive, DirectiveAndParam, DirectivesAndOptParam } from '@agnos-ui/core/types';
 
-declare const provideWidgetsConfig: (adaptParentConfig?: ((config: Partial<{
-    [x: string]: object;
-}>) => Partial<{
-    [x: string]: object;
-}>) | undefined) => FactoryProvider;
-declare const injectWidgetsConfig: (config?: Partial<{
-    [x: string]: object;
-}> | undefined) => WidgetsConfigStore<{
-    [widgetName: string]: object;
-}>;
+/**
+ * Represents the state of an Angular widget, where each key in the widget's state
+ * is mapped to a Signal of the corresponding state value.
+ *
+ * @template W - The type of the widget.
+ */
+type AngularState<W extends Widget> = {
+    [key in keyof WidgetState<W>]: Signal<WidgetState<W>[key]>;
+};
+/**
+ * Represents an Angular widget that extends a base widget type.
+ *
+ * @template W - The type of the base widget.
+ */
+interface AngularWidget<W extends Widget> extends Pick<W, 'api' | 'directives' | 'patch'> {
+    /**
+     * A promise that resolves when the widget is initialized
+     */
+    initialized: Promise<void>;
+    /**
+     * The state of the widget. Each property of the state is exposed through an Angular {@link https://angular.dev/api/core/Signal | Signal}
+     */
+    state: AngularState<W>;
+    /**
+     * A function to initialize the Angular widget.
+     */
+    ngInit: () => void;
+}
+
+/**
+ * Injects the configuration for a specific widget.
+ *
+ * @template T - The type of the widget configuration to be injected.
+ * @param widgetName - The name of the widget whose configuration is to be injected.
+ * @returns A `ReadableSignal` that provides a partial configuration of the specified widget or `undefined` if the configuration is not available.
+ */
+declare const injectWidgetConfig: <T>(widgetName: string) => ReadableSignal<Partial<T> | undefined>;
 /**
  * Creates and initializes a widget using the provided factory and configuration options.
  *
@@ -24,18 +52,14 @@ declare const injectWidgetsConfig: (config?: Partial<{
  * @param options - The options for creating the widget.
  * @param options.defaultConfig - The default configuration for the widget.
  * @param options.events - The event handlers for the widget.
- * @param options.slotTemplates - A function that returns the slot templates for the widget.
- * @param options.slotChildren - A function that returns the slot children for the widget.
  * @param options.afterInit - A callback function to be called after the widget is initialized.
  * @returns The initialized widget.
  */
-declare const callWidgetFactory: <W extends _agnos_ui_angular_headless.Widget>(factory: _agnos_ui_angular_headless.WidgetFactory<W>, options?: {
-    defaultConfig?: Partial<_agnos_ui_angular_headless.WidgetProps<W>> | ReadableSignal<Partial<_agnos_ui_angular_headless.WidgetProps<W>> | undefined>;
-    events?: Partial<Pick<_agnos_ui_angular_headless.WidgetProps<W>, keyof _agnos_ui_angular_headless.WidgetProps<W> & `on${string}`>>;
-    afterInit?: (widget: _agnos_ui_angular_headless.AngularWidget<W>) => void;
-    slotTemplates?: () => { [K in keyof _agnos_ui_angular_headless.WidgetProps<W> as _agnos_ui_angular_headless.IsSlotContent<_agnos_ui_angular_headless.WidgetProps<W>[K]> extends 0 ? never : K]: _agnos_ui_angular_headless.WidgetProps<W>[K] extends _agnos_ui_angular_headless.SlotContent<infer U> ? _angular_core.TemplateRef<U> | undefined : never; };
-    slotChildren?: () => _angular_core.TemplateRef<void> | undefined;
-}) => _agnos_ui_angular_headless.AngularWidget<W>;
+declare const callWidgetFactory: <W extends Widget>(factory: WidgetFactory<W>, options?: {
+    defaultConfig?: Partial<WidgetProps<W>> | ReadableSignal<Partial<WidgetProps<W>> | undefined>;
+    events?: Partial<Pick<WidgetProps<W>, keyof WidgetProps<W> & `on${string}`>>;
+    afterInit?: (widget: AngularWidget<W>) => void;
+}) => AngularWidget<W>;
 /**
  * Utility to provide configuration for a specific DF component.
  *
@@ -59,7 +83,140 @@ declare const provideDfComponentConfig: <T>(componentKey: string) => (config?: P
  * @param componentKey the key of the component in the global configuration
  * @returns the inject function that returns the writable component configuration
  */
-declare const injectDfComponentConfig: <T>(componentKey: string) => () => _angular_core.WritableSignal<Partial<T>>;
+declare const injectDfComponentConfig: <T>(componentKey: string) => () => i0.WritableSignal<Partial<T>>;
+
+/**
+ * A utility function to manage the lifecycle of a directive for a host element.
+ *
+ * This function handles the creation, updating, and destruction of a directive instance
+ * associated with a host element. It ensures that the directive is called appropriately
+ * based on the platform (server or client) and manages the directive's lifecycle within
+ * the Angular injection context.
+ *
+ * @template T - The type of parameters that the directive accepts.
+ *
+ * @param [directive] - The directive to be applied to the host element.
+ * @param [params] - The parameters to be passed to the directive.
+ *
+ * @returns An object containing an `update` function to update the directive and its parameters.
+ */
+declare const useDirectiveForHost: <T>(directive?: Directive<T>, params?: T) => {
+    update: (newDirective?: Directive<T>, newParams?: T) => void;
+};
+/**
+ * A directive that allows the use of another directive with optional parameters.
+ *
+ * @template T - The type of the parameter that can be passed to the directive.
+ *
+ * @remarks
+ * This directive uses a private instance of {@link useDirectiveForHost} to manage the directive and its parameter.
+ */
+declare class UseDirective<T> implements OnChanges {
+    #private;
+    readonly use: i0.InputSignal<Directive | DirectiveAndParam<T>>;
+    /** @internal */
+    ngOnChanges(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UseDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<UseDirective<any>, "[dfUse]", never, { "use": { "alias": "dfUse"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * A directive that allows the use of multiple directives on a host element.
+ *
+ * @template T - A tuple type representing the directives and their optional parameters.
+ */
+declare class UseMultiDirective<T extends any[]> implements OnChanges {
+    #private;
+    /**
+     * An input property that takes a tuple of directives and their optional parameters.
+     */
+    readonly useMulti: i0.InputSignal<DirectivesAndOptParam<T, _agnos_ui_core_types.SSRHTMLElement>>;
+    /** @internal */
+    ngOnChanges(): void;
+    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>;
+}
+
+/**
+ * Converts a Tansu `ReadableSignal` to an Angular `Signal`.
+ *
+ * This function wraps the provided Tansu signal in an Angular signal. It subscribes to the
+ * Tansu signal and updates the Angular signal with the received values. The equality function
+ * for the Angular signal is set to always return false, ensuring that every new value from the
+ * Tansu signal triggers an update.
+ *
+ * @template T - The type of the value emitted by the signals.
+ * @param tansuSignal - The Tansu signal to convert.
+ * @returns - The resulting Angular signal.
+ */
+declare const toAngularSignal: <T>(tansuSignal: ReadableSignal<T>) => Signal<T>;
+/**
+ * Converts a Tansu `WritableSignal` to an Angular `WritableSignal`.
+ *
+ * This function wraps the provided Tansu signal in an Angular signal. It subscribes to the
+ * Tansu signal and updates the Angular signal with the received values. The equality function
+ * for the Angular signal is set to always return false, ensuring that every new value from the
+ * Tansu signal triggers an update.
+ *
+ * @template T - The type of the value emitted by the signals.
+ * @param tansuSignal - The Tansu signal to convert.
+ * @returns - The resulting Angular signal.
+ */
+declare const toAngularWritableSignal: <T>(tansuSignal: WritableSignal<T>) => WritableSignal$1<T>;
+
+/**
+ * Call a widget factory using provided configs.
+ *
+ * The resulting widget can be easily hooked into the lifecycle of an Angular component through {@link BaseWidgetDirective}.
+ *
+ * @param factory - the widget factory to call
+ * @param options - the options
+ * @param options.defaultConfig - the default config of the widget
+ * @param options.widgetConfig - the config of the widget, overriding the defaultConfig
+ * @param options.events - the events of the widget
+ * @param options.afterInit - a callback to call after successful setup of the widget
+ * @returns the widget
+ */
+declare const callWidgetFactoryWithConfig: <W extends Widget>(factory: WidgetFactory<W>, options?: {
+    defaultConfig?: Partial<WidgetProps<W>> | ReadableSignal<Partial<WidgetProps<W>> | undefined>;
+    widgetConfig?: null | undefined | ReadableSignal<Partial<WidgetProps<W>> | undefined>;
+    events?: Partial<Pick<WidgetProps<W>, keyof WidgetProps<W> & `on${string}`>>;
+    afterInit?: (widget: AngularWidget<W>) => void;
+}) => AngularWidget<W>;
+/**
+ * An abstract base class for widget directives, providing common functionality
+ * for Angular components that interact with widgets.
+ *
+ * @template W - The type of the widget.
+ */
+declare abstract class BaseWidgetDirective<W extends Widget> implements OnChanges, OnInit {
+    private readonly _widget;
+    private readonly propRenames?;
+    constructor(_widget: AngularWidget<W>, propRenames?: Record<string, string> | undefined);
+    /**
+     * Retrieves the widget api
+     * @returns the widget api
+     */
+    get api(): W['api'];
+    /**
+     * Retrieves the widget state. Each property of the state is exposed through an Angular {@link https://angular.dev/api/core/Signal | Signal}
+     * @returns the widget state
+     */
+    get state(): AngularState<W>;
+    /**
+     * Retrieves the widget directives
+     * @returns the widget directives
+     */
+    get directives(): W['directives'];
+    /**
+     * @inheritdoc
+     * @internal
+     */
+    ngOnChanges(changes: SimpleChanges): void;
+    /** @internal */
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseWidgetDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseWidgetDirective<any>, never, never, {}, {}, never, never, true, never>;
+}
 
 /**
  * An abstract base class for widget directives, providing common functionality
@@ -67,17 +224,49 @@ declare const injectDfComponentConfig: <T>(componentKey: string) => () => _angul
  *
  * @template W - The type of the widget.
  */
-declare abstract class AgnosWidgetDirective<W extends Widget> implements OnChanges, OnInit, AfterContentChecked {
+declare abstract class AgnosWidgetDirective<W extends Widget> implements OnChanges, OnInit {
     protected readonly _agnosWidget: AngularWidget<W>;
     constructor(_agnosWidget: AngularWidget<W>);
     /** @internal */
     ngOnChanges(changes: SimpleChanges): void;
     /** @internal */
     ngOnInit(): void;
-    /** @internal */
-    ngAfterContentChecked(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AgnosWidgetDirective<any>, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AgnosWidgetDirective<any>, never, never, {}, {}, never, never, true, never>;
+    /**
+     * Access to the widget state.
+     */
+    protected get state(): AngularWidget<W>['state'];
+    /**
+     * Access to the widget API.
+     */
+    protected get api(): AngularWidget<W>['api'];
+    /**
+     * Access to the widget directives.
+     */
+    protected get directives(): AngularWidget<W>['directives'];
+    static ɵfac: i0.ɵɵFactoryDeclaration<AgnosWidgetDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AgnosWidgetDirective<any>, never, never, {}, {}, never, never, true, never>;
 }
 
-export { AgnosWidgetDirective, callWidgetFactory, injectDfComponentConfig, injectWidgetsConfig, provideDfComponentConfig, provideWidgetsConfig };
+/**
+ * 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
+ */
+declare const md$: _amadeus_it_group_tansu.ReadableSignal<boolean>;
+/**
+ * lg breakpoint,
+ * tansu signal that returns true when the viewport is at least 992px wide
+ */
+declare const lg$: _amadeus_it_group_tansu.ReadableSignal<boolean>;
+/**
+ * xl breakpoint,
+ * tansu signal that returns true when the viewport is at least 1200px wide
+ */
+declare const xl$: _amadeus_it_group_tansu.ReadableSignal<boolean>;
+
+export { AgnosWidgetDirective, BaseWidgetDirective, UseDirective, UseMultiDirective, callWidgetFactory, callWidgetFactoryWithConfig, injectDfComponentConfig, injectWidgetConfig, lg$, md$, provideDfComponentConfig, sm$, toAngularSignal, toAngularWritableSignal, useDirectiveForHost, xl$ };
+export type { AngularState, AngularWidget };

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

@@ -1,5 +1,5 @@
-import * as _agnos_ui_angular_headless from '@agnos-ui/angular-headless';
-import { NavManagerItemConfig } from '@agnos-ui/angular-headless';
+import * as _agnos_ui_core_services_navManager from '@agnos-ui/core/services/navManager';
+import { NavManagerItemConfig } from '@agnos-ui/core/services/navManager';
 import * as _angular_core from '@angular/core';
 import { ElementRef, Signal, AfterContentInit } from '@angular/core';
 import { IsActiveMatchOptions } from '@angular/router';
@@ -35,7 +35,6 @@ declare abstract class DfSidenavLinkBaseComponent {
     readonly routerLinkActiveOptions: _angular_core.InputSignal<IsActiveMatchOptions | {
         exact: boolean;
     }>;
-    protected readonly isSmallScreen: _angular_core.Signal<boolean>;
     protected readonly sidenav: DfSidenavComponent;
     protected readonly parentItem: DfSidenavItemComponent | null;
     protected readonly isFirstLevel: boolean;
@@ -44,6 +43,7 @@ declare abstract class DfSidenavLinkBaseComponent {
      * Computed signal indicating if the link is visible based on search term
      */
     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>;
 }
@@ -276,6 +276,12 @@ declare class DfSidenavComponent implements AfterContentInit {
      * @default 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.
+     */
+    readonly disableInitialDesktopAutoScroll: _angular_core.InputSignalWithTransform<boolean, unknown>;
     protected readonly _isMinimized: _angular_core.WritableSignal<boolean>;
     /**
      * Flag to indicate if the sidenav is minimized
@@ -293,20 +299,22 @@ declare class DfSidenavComponent implements AfterContentInit {
     protected readonly searchTerm: _angular_core.WritableSignal<string>;
     protected readonly mobileNavigationStack: _angular_core.WritableSignal<(DfSidenavItemComponent | null | undefined)[]>;
     protected readonly currentMobilePanel: Signal<DfSidenavItemComponent | null | undefined>;
+    private readonly isMd;
+    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: _agnos_ui_angular_headless.NavManager<unknown>;
+    protected readonly navManager: _agnos_ui_core_services_navManager.NavManager<unknown>;
     protected readonly navManagerConfig: NavManagerItemConfig;
     private readonly injector;
     constructor();
     ngAfterContentInit(): void;
     /**
      * This method allows to center and show the active link, when the sidenav is used in desktop and a large screen.
-     * It collapses all items and expands only the parents of the active link.
-     * Also, it scrolls to the active link to make it visible.
+     *
+     * It collapses all items and expands only the parents of the active link and scrolls to the active link to make it visible.
      */
     private initializeDesktopNavigation;
     /**
@@ -345,7 +353,7 @@ declare class DfSidenavComponent implements AfterContentInit {
     private navigateToActiveItem;
     protected readonly contentHasIcons: Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfSidenavComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfSidenavComponent, "df-sidenav", never, { "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; }; }, {}, ["allLinks", "allItems"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfSidenavComponent, "df-sidenav", never, { "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; }; }, {}, ["allLinks", "allItems"], ["*"], true, never>;
 }
 
 /**

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

@@ -0,0 +1,122 @@
+import * as i0 from '@angular/core';
+import { Signal, WritableSignal } from '@angular/core';
+
+/**
+ * The view transition animation configuration for {@link DfThemeService}.
+ *
+ * @since 21.1
+ */
+type DfViewTransitionAnimation<T extends string> = {
+    /**
+     * The setup function is called before the view transition starts. It can be used to prepare the DOM for the upcoming theme change, e.g. by adding necessary styles or classes.
+     */
+    setup?: () => Promise<void> | void;
+    /**
+     * The animation function is called after the view transition has started. It can be used to perform any necessary animations during the theme change. The function receives the theme that is being applied as an argument.
+     */
+    animation: (theme: T) => Promise<void> | void;
+    /**
+     * The cleanup function is called after the view transition has completed. It can be used to remove any temporary styles or classes added during the setup or animation phases.
+     */
+    cleanup?: () => Promise<void> | void;
+};
+/**
+ * The DfThemeService is an abstract service that manages the theme state of the application.
+ *
+ * It provides functionality to select and apply themes, persist user preferences, and handle system theme changes.
+ *
+ * @since 21.1
+ */
+declare abstract class DfThemeService<ThemeMode extends string> {
+    #private;
+    /**
+     * The default light theme.
+     */
+    private readonly defaultLight;
+    /**
+     * The default dark theme.
+     */
+    private readonly defaultDark;
+    /**
+     * An array of all available theme options. Must include at least the default light and dark themes, and optionally 'auto' if the service should support automatic theme selection based on system preferences.
+     */
+    abstract readonly allOptions: ThemeMode[];
+    /**
+     * The key used to store the user's theme preference in local storage. This is required if `syncLocalStorage` is true.
+     */
+    abstract readonly storageKey: string;
+    /**
+     * Whether to synchronize the user's theme selection with local storage. If true, the service will persist the selected theme in local storage and listen for changes to update the theme across tabs/frames.
+     */
+    abstract readonly syncLocalStorage: boolean;
+    /**
+     * The view transition animation configuration. If provided, the service will use the View Transitions API to animate theme changes. If not provided, theme changes will be applied immediately without animation.
+     */
+    abstract readonly viewTransitionAnimation: DfViewTransitionAnimation<Exclude<ThemeMode, 'auto'>> | undefined;
+    /**
+     * The currently selected theme option by the user.
+     */
+    readonly selected: Signal<ThemeMode>;
+    /**
+     * The currently applied theme. This signal is triggered after the view transition has started.
+     */
+    readonly applied: WritableSignal<Exclude<ThemeMode, 'auto'>>;
+    constructor(
+    /**
+     * The default light theme.
+     */
+    defaultLight: Exclude<ThemeMode, 'auto'>, 
+    /**
+     * The default dark theme.
+     */
+    defaultDark: Exclude<ThemeMode, 'auto'>);
+    protected init(): void;
+    setTheme(theme: ThemeMode): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DfThemeService<any>, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DfThemeService<any>>;
+}
+/**
+ * The modes supported by the {@link DfThemeDefaultService}.
+ *
+ * @since 21.1
+ */
+type DfThemeDefaultMode = 'auto' | 'light' | 'dark';
+/**
+ * The storage key used by the {@link DfThemeDefaultService} to persist the user's theme selection in local storage.
+ *
+ * @since 21.1
+ */
+declare const DF_THEME_DEFAULT_STORAGE_KEY = "df-theme";
+/**
+ * The default {@link DfThemeService} implementation.
+ *
+ * - It supports the modes `auto`, `light` and `dark`, and uses local storage to persist the user's selection.
+ * - It provides a cross fade transition when changing themes.
+ *
+ * @since 21.1
+ */
+declare class DfThemeDefaultService extends DfThemeService<DfThemeDefaultMode> {
+    readonly allOptions: ("auto" | "light" | "dark")[];
+    readonly storageKey = "df-theme";
+    readonly syncLocalStorage = true;
+    private styleElement;
+    readonly viewTransitionAnimation: {
+        setup: () => void;
+        animation: () => void;
+        cleanup: () => void;
+    };
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<DfThemeDefaultService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DfThemeDefaultService>;
+}
+/**
+ * Provides the {@link DfThemeService} and initializes it on app startup.
+ *
+ * This should be included in the providers array of the root module or component to ensure the theme service is available and initialized when the application starts.
+ *
+ * @since 21.1
+ */
+declare const provideDfThemeService: () => i0.EnvironmentProviders;
+
+export { DF_THEME_DEFAULT_STORAGE_KEY, DfThemeDefaultService, DfThemeService, provideDfThemeService };
+export type { DfThemeDefaultMode, DfViewTransitionAnimation };