@design-factory/angular 21.0.0-next.0

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

@@ -0,0 +1,83 @@
+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';
+
+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;
+}>;
+/**
+ * Creates and initializes a widget using the provided factory and configuration options.
+ *
+ * The resulting widget can be easily hooked into the lifecycle of an Angular component through {@link BaseWidgetDirective}.
+ *
+ * @template W - The type of the widget.
+ * @param factory - The factory function to create the widget.
+ * @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>;
+/**
+ * Utility to provide configuration for a specific DF component.
+ *
+ * @example
+ * ```typescript
+ * export const provideDfCollapseConfig = provideDfComponentConfig<DfCollapseConfig>(COLLAPSE_CONFIG_KEY);
+ * ```
+ *
+ * @param componentKey the key of the component in the global configuration
+ * @returns the component config provider
+ */
+declare const provideDfComponentConfig: <T>(componentKey: string) => (config?: Partial<T> | ((prevConfig: Partial<T>) => Partial<T>)) => FactoryProvider;
+/**
+ * Utility to inject writable configuration for a specific DF component.
+ *
+ * @example
+ * ```typescript
+ * export const injectDfCollapseConfig = injectDfComponentConfig<DfCollapseConfig>(COLLAPSE_CONFIG_KEY);
+ * ```
+ *
+ * @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>>;
+
+/**
+ * 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 AgnosWidgetDirective<W extends Widget> implements OnChanges, OnInit, AfterContentChecked {
+    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>;
+}
+
+export { AgnosWidgetDirective, callWidgetFactory, injectDfComponentConfig, injectWidgetsConfig, provideDfComponentConfig, provideWidgetsConfig };

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

@@ -0,0 +1,367 @@
+import * as _agnos_ui_angular_headless from '@agnos-ui/angular-headless';
+import { NavManagerItemConfig } from '@agnos-ui/angular-headless';
+import * as _angular_core from '@angular/core';
+import { ElementRef, Signal, AfterContentInit } from '@angular/core';
+import { IsActiveMatchOptions } from '@angular/router';
+
+/**
+ * Base link class that is extended by desktop and mobile link components
+ * @internal
+ */
+declare abstract class DfSidenavLinkBaseComponent {
+    /**
+     * The router link path for to the link
+     */
+    readonly linkPath: _angular_core.InputSignal<string>;
+    /**
+     * The label of the link
+     */
+    readonly label: _angular_core.InputSignal<string>;
+    /**
+     * The icon class name or inline content (e.g., font awesome class)
+     */
+    readonly icon: _angular_core.InputSignal<string>;
+    /**
+     * Whether the wrapper component has icon content (internally used)
+     */
+    readonly wrapperHasIconContent: _angular_core.InputSignal<boolean>;
+    /**
+     * Indicates if the link is currently active based on the Router state
+     */
+    readonly isActiveLink: _angular_core.WritableSignal<boolean>;
+    /**
+     * Options to determine when the router link is considered active
+     */
+    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;
+    protected readonly iconContent: _angular_core.Signal<unknown>;
+    /**
+     * Computed signal indicating if the link is visible based on search term
+     */
+    protected readonly isVisible: _angular_core.Signal<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>;
+}
+
+/**
+ * Component representing a leaf in the sidenav for desktop devices
+ * @internal
+ */
+declare class DfSidenavLinkDesktopComponent extends DfSidenavLinkBaseComponent {
+    protected readonly anchor: _angular_core.Signal<ElementRef<HTMLAnchorElement>>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfSidenavLinkDesktopComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfSidenavLinkDesktopComponent, "df-sidenav-link-desktop", never, {}, {}, never, ["[dfSidenavIcon]"], true, never>;
+}
+
+/**
+ * Base item class that is extended by desktop and mobile item components
+ * The item represents a container which can hold other items or links
+ * Handles collapsed state
+ * @internal
+ */
+declare abstract class DfSidenavItemBaseComponent {
+    /**
+     * The label of the item
+     */
+    readonly label: _angular_core.InputSignal<unknown>;
+    /**
+     * Collapsed state of the item
+     * Only used for the desktop version
+     * @default false
+     */
+    readonly collapsed: _angular_core.ModelSignal<boolean>;
+    /**
+     * The icon class name or inline content (e.g., font awesome class)
+     * @default ''
+     */
+    readonly icon: _angular_core.InputSignal<string>;
+    /**
+     * Whether the wrapper component has icon content (internally used)
+     * @default false
+     */
+    readonly wrapperHasIconContent: _angular_core.InputSignal<boolean>;
+    protected readonly sidenav: DfSidenavComponent;
+    protected readonly wrapperInstance: DfSidenavItemComponent;
+    protected readonly parentItem: DfSidenavItemComponent | null;
+    protected readonly isFirstLevel: boolean;
+    protected readonly iconContent: Signal<unknown>;
+    protected abstract childLinks: Signal<readonly (DfSidenavLinkBaseComponent | undefined)[]>;
+    protected abstract childItems: Signal<readonly (DfSidenavItemBaseComponent | undefined)[]>;
+    protected readonly hasActiveLinks: Signal<boolean>;
+    protected readonly hasActiveItems: Signal<boolean>;
+    protected readonly hasActiveChildren: Signal<boolean>;
+    /**
+     * Computed signal indicating if the item has visible children
+     */
+    protected readonly hasVisibleChildren: Signal<boolean>;
+    /**
+     * Method to toggle the collapsed state of the item
+     * If the sidenav is minimized, it will expand it and uncollapse the item
+     */
+    toggleCollapse(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfSidenavItemBaseComponent, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DfSidenavItemBaseComponent, never, never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "wrapperHasIconContent": { "alias": "wrapperHasIconContent"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; }, ["iconContent"], never, true, never>;
+}
+
+/**
+ * Component representing an item in the sidenav for desktop devices
+ * The item represents a container which can hold other items or links
+ * @internal
+ */
+declare class DfSidenavItemDesktopComponent extends DfSidenavItemBaseComponent {
+    protected readonly childLinks: _angular_core.Signal<(DfSidenavLinkDesktopComponent | undefined)[]>;
+    protected readonly childItems: _angular_core.Signal<(DfSidenavItemDesktopComponent | undefined)[]>;
+    protected readonly isVisible: _angular_core.Signal<boolean>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfSidenavItemDesktopComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfSidenavItemDesktopComponent, "df-sidenav-item-desktop", never, {}, {}, never, ["[dfSidenavIcon]", "*"], true, never>;
+}
+
+/**
+ * Component representing a leaf in the sidenav for mobile devices
+ * @internal
+ */
+declare class DfSidenavLinkMobileComponent extends DfSidenavLinkBaseComponent {
+    private readonly linkWrapper;
+    private readonly currentMobilePanel;
+    protected readonly isSearching: _angular_core.Signal<boolean>;
+    protected readonly isVisibleInList: _angular_core.Signal<boolean>;
+    protected readonly breadcrumbPath: _angular_core.Signal<string[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfSidenavLinkMobileComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfSidenavLinkMobileComponent, "df-sidenav-link-mobile", never, {}, {}, never, ["[dfSidenavIcon]"], true, never>;
+}
+
+/**
+ * Component representing an item in the sidenav for mobile devices
+ * The item represents a container which can hold other items or links
+ * @internal
+ */
+declare class DfSidenavItemMobileComponent extends DfSidenavItemBaseComponent {
+    protected readonly childLinks: _angular_core.Signal<(DfSidenavLinkMobileComponent | undefined)[]>;
+    protected readonly childItems: _angular_core.Signal<(DfSidenavItemMobileComponent | undefined)[]>;
+    protected readonly isSearching: _angular_core.Signal<boolean>;
+    private readonly isInNavigationPath;
+    protected readonly shouldShowMobileHeader: _angular_core.Signal<boolean>;
+    protected readonly shouldShowChildren: _angular_core.Signal<boolean>;
+    protected readonly isVisibleInList: _angular_core.Signal<boolean>;
+    protected readonly shouldHideComponent: _angular_core.Signal<boolean>;
+    private readonly isVisible;
+    private readonly hasMatchingChildren;
+    /**
+     * Handle click event on the item
+     */
+    protected handleItemClick(): void;
+    /**
+     * Handle click event on the header back button
+     */
+    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>;
+}
+
+/**
+ * Sidenav link that can be used inside <df-sidenav-item> or directly inside the <df-sidenav>
+ * @since 21.0.0
+ */
+declare class DfSidenavLinkComponent {
+    /**
+     * The router link path for to the link
+     */
+    readonly linkPath: _angular_core.InputSignal<string>;
+    /**
+     * The label of the link
+     */
+    readonly label: _angular_core.InputSignal<string>;
+    /**
+     * The icon class name or inline content (e.g., font awesome class)
+     */
+    readonly icon: _angular_core.InputSignal<string>;
+    /**
+     * Options to determine when the router link is considered active
+     */
+    readonly routerLinkActiveOptions: _angular_core.InputSignal<IsActiveMatchOptions | {
+        exact: boolean;
+    }>;
+    /**
+     * The parent wrapper item component (if any)
+     */
+    protected readonly parentWrapper: DfSidenavItemComponent | null;
+    /**
+     * Reference to the desktop link component instance
+     */
+    protected readonly desktopInstance: _angular_core.Signal<DfSidenavLinkDesktopComponent | undefined>;
+    /**
+     * Reference to the mobile link component instance
+     */
+    protected readonly mobileInstance: _angular_core.Signal<DfSidenavLinkMobileComponent | undefined>;
+    private readonly iconContentQuery;
+    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>;
+}
+
+/**
+ * Sidenav element that should be nested inside <df-sidenav> or <df-sidenav-item>
+ * @since 21.0.0
+ */
+declare class DfSidenavItemComponent {
+    /**
+     * Label of the sidenav item
+     */
+    readonly label: _angular_core.InputSignal<unknown>;
+    /**
+     * Flag whether the sidenav item is collapsed
+     * @default false
+     */
+    readonly collapsed: _angular_core.ModelSignal<boolean>;
+    /**
+     * Optional icon class for the sidenav item
+     */
+    readonly icon: _angular_core.InputSignal<string>;
+    /**
+     * Reference to the parent element containing this item
+     */
+    protected readonly parentWrapper: DfSidenavItemComponent | null;
+    /**
+     * Child sidenav items nested inside this item
+     */
+    protected readonly childrenItems: _angular_core.Signal<readonly DfSidenavItemComponent[]>;
+    /**
+     * Child sidenav links nested inside this item
+     */
+    protected readonly childrenLinks: _angular_core.Signal<readonly DfSidenavLinkComponent[]>;
+    /**
+     * Reference to the desktop instance of the sidenav item
+     */
+    protected readonly desktopInstance: _angular_core.Signal<DfSidenavItemDesktopComponent | undefined>;
+    /**
+     * Reference to the mobile instance of the sidenav item
+     */
+    protected readonly mobileInstance: _angular_core.Signal<DfSidenavItemMobileComponent | undefined>;
+    private readonly iconContentQuery;
+    protected readonly wrapperHasIconContent: _angular_core.Signal<boolean>;
+    protected readonly sidenav: DfSidenavComponent;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfSidenavItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfSidenavItemComponent, "df-sidenav-item", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; }, ["childrenItems", "childrenLinks", "iconContentQuery"], ["[dfSidenavIcon]", "*"], true, never>;
+}
+
+/**
+ * SideNav is a component to provide navigation feature with a panel on the side of your page
+ * @since 21.0.0
+ */
+declare class DfSidenavComponent implements AfterContentInit {
+    /**
+     * Flag whether the sidenav includes a search input
+     * @default false
+     */
+    readonly searchable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The container element for the sidenav (null for body)
+     * @default null
+     */
+    readonly container: _angular_core.InputSignal<HTMLElement | null>;
+    /**
+     * 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 false
+     */
+    readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Flag to enable mobile device detection for responsive behavior
+     * @default true
+     */
+    readonly enableMobile: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly _isMinimized: _angular_core.WritableSignal<boolean>;
+    /**
+     * Flag to indicate if the sidenav is minimized
+     */
+    readonly isMinimized: Signal<boolean>;
+    protected readonly hostRef: ElementRef<any>;
+    private readonly scrollableContainer;
+    private readonly isBrowser;
+    protected readonly isMobileDevice: boolean;
+    protected readonly searchInput: Signal<ElementRef<any> | undefined>;
+    private readonly allLinks;
+    private readonly allItems;
+    protected readonly width: _angular_core.WritableSignal<number | null>;
+    private savedWidth;
+    protected readonly searchTerm: _angular_core.WritableSignal<string>;
+    protected readonly mobileNavigationStack: _angular_core.WritableSignal<(DfSidenavItemComponent | null | undefined)[]>;
+    protected readonly currentMobilePanel: Signal<DfSidenavItemComponent | null | undefined>;
+    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 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.
+     */
+    private initializeDesktopNavigation;
+    /**
+     * Toggles the minimized state of the sidenav
+     *
+     * @param minimized - Optional parameter to explicitly set the minimized state
+     *
+     */
+    toggleMinimize(minimized?: boolean): void;
+    /**
+     * Handles visibility changes of the sidenav component to handle the component state accordingly.
+     *
+     * @param isVisible - Boolean indicating whether the sidenav is currently visible
+     */
+    visibleChangeHandler(isVisible: boolean): void;
+    /**
+     * Handles changes when the sidenav is resized, to handle the state accordingly.
+     *
+     * @param isResizing - Whether the sidenav is currently being resized
+     */
+    resizingChangeHandler(isResizing: boolean): void;
+    protected focusSearch(): void;
+    /**
+     * Method to add the given item to the mobile navigation stack
+     * @param itemRef item to be added to the navigation stack
+     */
+    navigateToChildren(itemRef: DfSidenavItemComponent | null | undefined): void;
+    /**
+     * Method to navigate back in the mobile navigation stack
+     */
+    navigateBack(): void;
+    /**
+     * Navigates to the active item in the sidenav
+     * Expands parent items (desktop) and sets up mobile navigation stack
+     */
+    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; }; "container": { "alias": "container"; "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>;
+}
+
+/**
+ * Utility directive for marking icon content in sidenav items and links.
+ * Needed for identification of the projected icon content.
+ * Use in case if there is no icon provided with font-awesome.
+ * @since 21.0.0
+ */
+declare class DfSidenavIconDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfSidenavIconDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DfSidenavIconDirective, "[dfSidenavIcon]", never, {}, {}, never, never, true, never>;
+}
+
+export { DfSidenavComponent, DfSidenavIconDirective, DfSidenavItemComponent, DfSidenavLinkComponent };

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

@@ -0,0 +1,6 @@
+/**
+ * Public API Surface of design-factory
+ */
+declare const unusedSymbol = true;
+
+export { unusedSymbol };