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

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

@@ -0,0 +1,166 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+import { AlertWidget, AlertAppearance, AlertSize, AlertType, AlertProps } from '@design-factory/core/components/alert';
+import { AgnosWidgetDirective } from '@design-factory/angular/internals';
+
+/**
+ * Available alert sizes.
+ */
+type DfAlertSize = AlertSize;
+/**
+ * Available alert visual types.
+ */
+type DfAlertType = AlertType;
+/**
+ * Available alert appearance variants.
+ */
+type DfAlertAppearance = AlertAppearance;
+/**
+ * Defines the title content inside a `<df-alert>`.
+ *
+ * @since 22.0
+ */
+declare class DfAlertTitle {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfAlertTitle, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfAlertTitle, "df-alert-title", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ * Defines the details content inside a `<df-alert>`.
+ *
+ * @since 22.0
+ */
+declare class DfAlertDetails {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfAlertDetails, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfAlertDetails, "df-alert-details", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ * Provides contextual feedback messages for the user.
+ *
+ * Supports several visual types, dismissal, and collapsible content.
+ *
+ * @since 22.0
+ */
+declare class DfAlert extends AgnosWidgetDirective<AlertWidget> {
+    protected readonly title: _angular_core.Signal<DfAlertTitle | undefined>;
+    protected readonly details: _angular_core.Signal<ElementRef<any> | undefined>;
+    /**
+     * If `true`, closing and collapsible transitions are animated.
+     *
+     * @defaultValue `true`
+     */
+    readonly animated: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /**
+     * Alert appearance variant.
+     *
+     * - `'default'`: regular alert with rounded corners and leading border.
+     * - `'banner'`: full-width alert with square corners and bottom border.
+     *
+     * @defaultValue `'default'`
+     */
+    readonly appearance: _angular_core.InputSignal<AlertAppearance | undefined>;
+    /**
+     * Size of the alert. Accepts `'sm'`, `'md'` or `'lg'`.
+     *
+     * @defaultValue `'md'`
+     */
+    readonly size: _angular_core.InputSignal<AlertSize | undefined>;
+    /**
+     * If `true`, collapsible content is expanded.
+     *
+     * Applies when `expandable` is enabled.
+     *
+     * Supports two-way binding with `[(expanded)]`.
+     *
+     * @defaultValue `false`
+     */
+    readonly expanded: _angular_core.ModelSignal<boolean>;
+    /**
+     * If `true`, alert details can be toggled with a "see more" control.
+     *
+     * When `false`, details are shown inline when present.
+     *
+     * @defaultValue `false`
+     */
+    readonly expandable: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /**
+     * If `true`, alert can be dismissed by the user.
+     *
+     * The close button (×) will be displayed and you can be notified
+     * of the event with the `(closed)` output.
+     *
+     * @defaultValue `true`
+     */
+    readonly dismissible: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /**
+     * Type of the alert.
+     *
+     * Supported types: `'success'`, `'info'`, `'warning'`, `'danger'`, `'tip'`.
+     *
+     * @defaultValue `'warning'`
+     */
+    readonly type: _angular_core.InputSignal<AlertType | undefined>;
+    /**
+     * Emitted after the alert closing transition finishes, whether triggered by the close button or the `close()` method.
+     */
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    constructor();
+    /**
+     * Triggers alert closing programmatically.
+     *
+     * @param animated - whether the transition should be animated. If omitted, the component `animated` input or configured default is used.
+     *
+     * @returns A promise that resolves once the closing transition has finished.
+     */
+    close(animated?: boolean): Promise<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfAlert, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfAlert, "df-alert", never, { "animated": { "alias": "animated"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; "closed": "closed"; }, ["title", "details"], ["df-alert-title", "*", "df-alert-details"], true, never>;
+}
+
+/**
+ * Configuration options supported by `provideDfAlertConfig`.
+ *
+ * These defaults apply to every `DfAlert` instance within the providing injector, unless explicitly overridden on
+ * the component itself.
+ */
+type DfAlertConfig = Pick<AlertProps, 'animated' | 'ariaCloseButtonLabel' | 'expandLabel' | 'collapseLabel'>;
+/**
+ * Alert config key in the global DF component config.
+ */
+declare const ALERT_CONFIG_KEY: "alert";
+/**
+ * Provides the configuration for the alert component.
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *   providers: [provideDfAlertConfig({ ariaCloseButtonLabel: 'Close alert' })]
+ * })
+ * export class MyHomeComponent {}
+ * ```
+ *
+ * @param config - Partial configuration or a function that receives the parent configuration and returns a partial configuration.
+ *
+ * @since 22.0
+ */
+declare const provideDfAlertConfig: (config?: Partial<DfAlertConfig> | ((prevConfig: Partial<DfAlertConfig>) => Partial<DfAlertConfig>) | undefined) => _angular_core.FactoryProvider;
+/**
+ * Injects the configuration for the alert component.
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *   providers: [provideDfAlertConfig()]
+ * })
+ * export class MyAlertComponent {
+ *   readonly alertConfig = injectDfAlertConfig();
+ * }
+ * ```
+ *
+ * @returns A writable signal containing the alert configuration.
+ *
+ * @since 22.0
+ */
+declare const injectDfAlertConfig: () => _angular_core.WritableSignal<Partial<DfAlertConfig>>;
+
+export { ALERT_CONFIG_KEY, DfAlert, DfAlertDetails, DfAlertTitle, injectDfAlertConfig, provideDfAlertConfig };
+export type { DfAlertAppearance, DfAlertConfig, DfAlertSize, DfAlertType };

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

@@ -0,0 +1,13 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * Tracks the window size and returns an Angular signal that indicates whether the viewport matches the given breakpoint.
+ *
+ * It uses `matchMedia` under the hood to track the window size and updates the signal accordingly.
+ *
+ * @param breakpoint - The breakpoint to track. It can be one of 'sm', 'md', 'lg', or 'xl'.
+ * @returns an Angular signal that returns true when the viewport matches the given breakpoint
+ */
+declare const trackWindow: (breakpoint: "sm" | "md" | "lg" | "xl") => _angular_core.Signal<boolean>;
+
+export { trackWindow };

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

@@ -0,0 +1,166 @@
+import * as _angular_core from '@angular/core';
+import { InjectionToken } from '@angular/core';
+
+/**
+ * Semantic variants supported by DF buttons.
+ *
+ * @since 22.0
+ */
+type DfButtonVariant = 'primary' | 'neutral' | 'danger';
+/**
+ * Visual appearances supported by DF buttons.
+ *
+ * @since 22.0
+ */
+type DfButtonAppearance = 'solid' | 'outline' | 'text';
+/**
+ * Sizes supported by DF buttons.
+ *
+ * @since 22.0
+ */
+type DfButtonSize = 'sm' | 'md' | 'lg';
+
+/**
+ * Interface for the `dfButtonGroup` directive, which is provided to all `dfButton` elements in a group.
+ *
+ * @since 22.0
+ * @internal
+ */
+interface ɵDfButtonGroupInterface {
+    readonly size: () => DfButtonSize;
+    readonly appearance: () => 'solid' | 'outline';
+    readonly mirror: () => boolean;
+    readonly orientation: () => 'horizontal' | 'vertical';
+}
+/**
+ * Injection token for the `dfButtonGroup` directive, which is provided to all `dfButton` elements in a group.
+ *
+ * @since 22.0
+ * @internal
+ */
+declare const ɵDfButtonGroupInjectionToken: InjectionToken<ɵDfButtonGroupInterface>;
+/**
+ * Shared visual directive for DF button-like elements.
+ *
+ * @since 22.0
+ * @internal
+ */
+declare class ɵDfButtonVisual {
+    /**
+     * The button group that contains this button, if any.
+     */
+    private readonly buttonGroup;
+    /**
+     * Semantic variant of the button. Forced to `'primary'` if the button is in a `df-button-group`.
+     * @defaultValue `'primary'`
+     */
+    readonly variant: _angular_core.InputSignal<DfButtonVariant>;
+    /**
+     * Effective variant applied to the host. Resolves to `'primary'` when the button is in a `df-button-group`,
+     * otherwise falls back to the `variant` input.
+     */
+    protected readonly resolvedVariant: _angular_core.InputSignal<DfButtonVariant> | (() => "primary");
+    /**
+     * Visual appearance of the button. In a `df-button-group`, the group appearance is used unless the button
+     * sets an explicit `'solid'` or `'outline'` appearance.
+     * @defaultValue `'solid'`
+     */
+    readonly appearance: _angular_core.InputSignal<DfButtonAppearance | undefined>;
+    /**
+     * Effective appearance applied to the host. In a `df-button-group`, resolves to the group appearance unless the
+     * button sets an explicit `'solid'` or `'outline'` appearance; otherwise falls back to the `appearance` input or
+     * `'solid'`.
+     */
+    protected readonly resolvedAppearance: _angular_core.Signal<DfButtonAppearance>;
+    /**
+     * Size of the button. Ignored if the button is in a `df-button-group` (the group size is used instead).
+     * @defaultValue `'md'`
+     */
+    readonly size: _angular_core.InputSignal<DfButtonSize>;
+    /**
+     * Effective size applied to the host. Resolves to the group size when the button is in a `df-button-group`,
+     * otherwise falls back to the `size` input.
+     */
+    protected readonly resolvedSize: () => DfButtonSize;
+    /**
+     * Makes outline and text buttons transparent. Solid buttons are unaffected.
+     * Ignored if the button is in a `df-button-group` (transparent buttons are currently not supported in groups).
+     * @defaultValue `false`
+     */
+    readonly transparent: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Effective transparent flag applied to the host. Always false in a `df-button-group`, otherwise falls back
+     * to the `transparent` input.
+     */
+    protected readonly resolvedTransparent: () => boolean;
+    /**
+     * Enables mirrored styling for inverse surfaces.
+     * Ignored if the button is in a `df-button-group` (the group value is used instead).
+     * @defaultValue `false`
+     */
+    readonly mirror: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Effective mirror flag applied to the host. Resolves to the group value when the button is in a
+     * `df-button-group`, otherwise falls back to the `mirror` input.
+     */
+    protected readonly resolvedMirror: () => boolean;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ɵDfButtonVisual, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ɵDfButtonVisual, never, never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "transparent": { "alias": "transparent"; "required": false; "isSignal": true; }; "mirror": { "alias": "mirror"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Internal host behavior for DF button-like directives.
+ *
+ * @since 22.0
+ * @internal
+ */
+declare class ɵDfButtonHost {
+    #private;
+    /**
+     * Native button type attribute.
+     * @defaultValue `'button'`
+     */
+    readonly type: _angular_core.InputSignal<"submit" | "reset" | "button">;
+    /**
+     * Disabled state for buttons and anchor buttons.
+     * @defaultValue `false`
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Host tabindex override.
+     * @defaultValue `undefined`
+     */
+    readonly tabindex: _angular_core.InputSignal<string | number | null | undefined>;
+    protected readonly isButton: boolean;
+    protected readonly isAnchor: boolean;
+    constructor();
+    protected onKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ɵDfButtonHost, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ɵDfButtonHost, never, never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Design Factory button directive for native `<button>` and `<a>` elements.
+ *
+ * @since 22.0
+ */
+declare class DfButton {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfButton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfButton, "button[dfButton], a[dfButton]", never, {}, {}, never, ["*"], true, [{ directive: typeof ɵDfButtonVisual; inputs: { "variant": "variant"; "appearance": "appearance"; "size": "size"; "transparent": "transparent"; "mirror": "mirror"; }; outputs: {}; }, { directive: typeof ɵDfButtonHost; inputs: { "type": "type"; "disabled": "disabled"; "tabindex": "tabindex"; }; outputs: {}; }]>;
+}
+/**
+ * Design Factory icon-only button directive for native `<button>` and `<a>` elements.
+ *
+ * Provide an accessible name with `aria-label` or `aria-labelledby`.
+ * Provide the icon with classes on the host element.
+ *
+ * @since 22.0
+ */
+declare class DfIconButton {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfIconButton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfIconButton, "button[dfIconButton], a[dfIconButton]", never, {}, {}, never, never, true, [{ directive: typeof ɵDfButtonVisual; inputs: { "variant": "variant"; "appearance": "appearance"; "size": "size"; "transparent": "transparent"; "mirror": "mirror"; }; outputs: {}; }, { directive: typeof ɵDfButtonHost; inputs: { "type": "type"; "disabled": "disabled"; "tabindex": "tabindex"; }; outputs: {}; }]>;
+}
+
+export { DfButton, DfIconButton, ɵDfButtonGroupInjectionToken, ɵDfButtonHost, ɵDfButtonVisual };
+export type { DfButtonAppearance, DfButtonSize, DfButtonVariant, ɵDfButtonGroupInterface };

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

@@ -0,0 +1,45 @@
+import * as _angular_core from '@angular/core';
+import { ɵDfButtonGroupInterface as _DfButtonGroupInterface, DfButtonSize } from '@design-factory/angular/button';
+
+/**
+ * Groups a set of related `dfButton` actions, rendering them as a single visually joined control.
+ *
+ * Project `dfButton` elements as content:
+ *
+ * ```html
+ * <df-button-group [size]="'md'" [appearance]="'outline'">
+ *   <button dfButton [appearance]="'solid'">Main action</button>
+ *   <button dfButton>Left</button>
+ *   <button dfButton>Middle</button>
+ *   <button dfButton>Right</button>
+ * </df-button-group>
+ * ```
+ *
+ * @since 22.0
+ */
+declare class DfButtonGroup implements _DfButtonGroupInterface {
+    /**
+     * The size of the buttons in the group.
+     * @defaultValue `'md'`
+     */
+    readonly size: _angular_core.InputSignal<DfButtonSize>;
+    /**
+     * The appearance of the buttons in the group.
+     * @defaultValue `'outline'`
+     */
+    readonly appearance: _angular_core.InputSignal<"solid" | "outline">;
+    /**
+     * Enables mirrored styling for inverse surfaces.
+     * @defaultValue `false`
+     */
+    readonly mirror: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The orientation of the button group.
+     * @defaultValue `'horizontal'`
+     */
+    readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfButtonGroup, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfButtonGroup, "df-button-group", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "mirror": { "alias": "mirror"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { DfButtonGroup };

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

@@ -16,37 +16,36 @@ type DfDrawerPosition = DrawerPosition;
  */
 type DfDrawerConfiguration = DrawerConfiguration;
 /**
- * Marks an `<ng-template>` as drawer header content.
+ * A directive to define a template containing the header content of the drawer.
  */
 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.
+ * A directive to define a template containing the body content of the drawer.
  */
 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.
+ * A directive to define a template containing the footer content of the drawer.
  */
 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
+ *
+ * See {@link https://design-factory.amadeus.net/components/drawer|Design Factory documentation} for details and examples.
+ * @since 21.1
  */
 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 headerTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    protected readonly bodyTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    protected readonly footerTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
     protected readonly hasSectionTemplates: _angular_core.Signal<boolean>;
     /**
      * CSS classes to be applied on the widget main container
@@ -66,15 +65,20 @@ declare class DfDrawer extends AgnosWidgetDirective<DrawerWidget> {
      * @defaultValue `true`
      */
     readonly backdrop: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * If `true` the drawer will be closed when clicking on the backdrop, otherwise the backdrop is static and non iteractive.
+     *
+     * @defaultValue `true`
+     */
+    readonly closeOnBackdropClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * Which element should contain the drawer and backdrop DOM elements.
      * If it is not null, the drawer and backdrop DOM elements are moved to the specified container.
      * Otherwise, they stay where the widget is located.
      *
-     * @defaultValue
-     * ```ts
-     * typeof window !== 'undefined' ? document.body : null
-     * ```
+     * Defaults to `document.body` in the browser and `null` on the server.
+     *
+     * @defaultValue `document.body`
      */
     readonly container: _angular_core.InputSignal<HTMLElement | null>;
     /**
@@ -116,17 +120,6 @@ declare class DfDrawer extends AgnosWidgetDirective<DrawerWidget> {
      * @defaultValue `'inline-start'`
      */
     readonly position: _angular_core.InputSignal<DrawerPosition>;
-    /**
-     * An event emitted when the width is changed.
-     *
-     * Event payload is equal to the newly selected width.
-     *
-     * @defaultValue
-     * ```ts
-     * () => {}
-     * ```
-     */
-    readonly sizeChange: _angular_core.OutputEmitterRef<number | null>;
     /**
      * Event to be triggered when the visible property changes.
      *
@@ -203,7 +196,7 @@ declare class DfDrawer extends AgnosWidgetDirective<DrawerWidget> {
      */
     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>;
+    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; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "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"; "visibleChange": "visibleChange"; "minimizedChange": "minimizedChange"; "maximizedChange": "maximizedChange"; "resizingChange": "resizingChange"; "minSize": "minSize"; "maxSize": "maxSize"; }, ["headerTemplate", "bodyTemplate", "footerTemplate"], ["*", "df-drawer-splitter-content"], true, never>;
 }
 
 export { DfDrawer, DfDrawerBodyTemplate, DfDrawerFooterTemplate, DfDrawerHeaderTemplate };

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

@@ -0,0 +1,148 @@
+import * as _angular_core from '@angular/core';
+import { Injector, TemplateRef } from '@angular/core';
+import { AgnosWidgetDirective, AngularWidget } from '@design-factory/angular/internals';
+import { DropdownWidget, DropdownSize } from '@design-factory/core/components/dropdown';
+import { Placement } from '@design-factory/core/services/positioning';
+import * as i1 from '@design-factory/angular/button';
+
+/**
+ * Supported placement values for the dropdown overlay.
+ * @since 22.0
+ */
+type DfDropdownPlacement = Placement;
+/**
+ * Available dropdown sizes.
+ * @since 22.0
+ */
+type DfDropdownSize = DropdownSize;
+declare class DfDropdownWindow {
+    readonly injector: Injector;
+    readonly widget: _angular_core.InputSignal<AngularWidget<DropdownWidget>>;
+    readonly content: _angular_core.InputSignal<TemplateRef<unknown>>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfDropdownWindow, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfDropdownWindow, "df-dropdown-window", never, { "widget": { "alias": "widget"; "required": true; "isSignal": true; }; "content": { "alias": "content"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * Dropdown is a component to provide a button combined to a menu with a list of options.
+ * @since 22.0
+ */
+declare class DfDropdown extends AgnosWidgetDirective<DropdownWidget> {
+    /**
+     * If `true`, the dropdown is open.
+     *
+     * @defaultValue `false`
+     */
+    readonly opened: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Event emitted when the open state changes.
+     */
+    readonly openedChange: _angular_core.OutputEmitterRef<boolean>;
+    /**
+     * The dropdown placement relative to its anchor.
+     */
+    readonly placement: _angular_core.InputSignal<string | Placement[] | undefined>;
+    /**
+     * Visual size configuration for dropdown items.
+     */
+    readonly size: _angular_core.InputSignal<DropdownSize | undefined>;
+    /**
+     * Which element should contain the dropdown menu DOM element.
+     * - `'body'`: the menu is appended to `document.body` (useful when the toggle is inside an element that clips
+     *   its content via `overflow` or creates a stacking context).
+     * - `null` (default): the menu is rendered inline, where the dropdown is declared.
+     *
+     * @defaultValue `null`
+     */
+    readonly container: _angular_core.InputSignal<"body" | null>;
+    private readonly dropdownWindow;
+    protected readonly toggleElement: _angular_core.WritableSignal<HTMLElement | undefined>;
+    constructor();
+    /**
+     * Toggles the dropdown menu visibility programmatically.
+     *
+     * @param open - Optional explicit open state. When omitted, the current state is toggled.
+     */
+    toggle(open?: boolean): void;
+    /**
+     * Opens the dropdown menu programmatically.
+     */
+    open(): void;
+    /**
+     * Closes the dropdown menu programmatically.
+     */
+    close(): void;
+    /**
+     * Get whether the dropdown menu is currently open.
+     */
+    isOpen(): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfDropdown, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfDropdown, "df-dropdown", never, { "opened": { "alias": "opened"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "container": { "alias": "container"; "required": false; "isSignal": true; }; }, { "openedChange": "openedChange"; }, never, ["*"], true, never>;
+}
+
+/**
+ * Component representing the toggle button of a dropdown, which is used to toggle the visibility of the dropdown menu.
+ * @since 22.0
+ */
+declare class DfDropdownToggle {
+    /**
+     * The dropdown instance controlled by this toggle element.
+     *
+     * Pass the referenced {@link DfDropdown} instance to connect the host button to its menu.
+     */
+    readonly dropdown: _angular_core.InputSignal<DfDropdown>;
+    /**
+     * When true, hides the chevron icon for icon-only dropdown buttons.
+     *
+     * **Accessibility:** When using `iconOnly`, you must provide an `aria-label` attribute on the button element.
+     *
+     * @example
+     * ```html
+     * <button [dfDropdownToggle]="menu" iconOnly aria-label="More options">
+     *   <df-icon class="fa-light fa-ellipsis-v" />
+     * </button>
+     * ```
+     */
+    readonly iconOnly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfDropdownToggle, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfDropdownToggle, "button[dfDropdownToggle]", never, { "dropdown": { "alias": "dfDropdownToggle"; "required": true; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.ɵDfButtonVisual; inputs: { "variant": "variant"; "appearance": "appearance"; "size": "size"; "transparent": "transparent"; "mirror": "mirror"; }; outputs: {}; }, { directive: typeof i1.ɵDfButtonHost; inputs: { "disabled": "disabled"; }; outputs: {}; }]>;
+}
+
+/**
+ * Directive representing a button in the dropdown menu.
+ * @since 22.0
+ */
+declare class DfDropdownItemButton {
+    /**
+     * Whether the dropdown item is displayed in its active state.
+     */
+    readonly active: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether the dropdown item is disabled.
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfDropdownItemButton, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DfDropdownItemButton, "button[dfDropdownItem]", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * Directive representing a link in the dropdown menu.
+ * @since 22.0
+ */
+declare class DfDropdownItemLink {
+    #private;
+    /**
+     * Whether the dropdown item is displayed in its active state.
+     */
+    readonly active: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether the dropdown item is disabled.
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    constructor();
+    protected onKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfDropdownItemLink, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DfDropdownItemLink, "a[dfDropdownItem]", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { DfDropdown, DfDropdownItemButton, DfDropdownItemLink, DfDropdownToggle, DfDropdownWindow };
+export type { DfDropdownPlacement, DfDropdownSize };