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

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

@@ -0,0 +1,239 @@
+import * as _angular_core from '@angular/core';
+import { AgnosWidgetDirective } from '@design-factory/angular/internals';
+import { SliderWidget, SliderProps } from '@design-factory/core/components/slider';
+import { ControlValueAccessor } from '@angular/forms';
+
+/**
+ * Available slider sizes.
+ *
+ * @experimental 22.0.0
+ */
+type DfSliderSize = 'sm' | 'md' | 'lg';
+/**
+ * Slider component for selecting a single value or a range of values.
+ *
+ * Supports one or more handles, ticks, value and min/max labels, RTL/flip directions and vertical orientation.
+ *
+ * @experimental 22.0.0
+ */
+declare class DfSlider extends AgnosWidgetDirective<SliderWidget> implements ControlValueAccessor {
+    private updateTimeout?;
+    /**
+     * Size of the slider.
+     *
+     * @defaultValue `'md'`
+     */
+    readonly size: _angular_core.InputSignal<DfSliderSize>;
+    /**
+     * Minimum value that can be assigned to the slider.
+     *
+     * @defaultValue `0`
+     */
+    readonly min: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Maximum value that can be assigned to the slider.
+     *
+     * @defaultValue `100`
+     */
+    readonly max: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Unit value between slider steps.
+     *
+     * @defaultValue `1`
+     */
+    readonly stepSize: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Current slider values.
+     *
+     * @defaultValue `[0]`
+     */
+    readonly values: _angular_core.InputSignal<number[] | undefined>;
+    /**
+     * If `true`, slider value cannot be changed but the slider is still focusable.
+     *
+     * @defaultValue `false`
+     */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /**
+     * If `true`, slider value cannot be changed and the slider cannot be focused.
+     *
+     * @defaultValue `false`
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /**
+     * If `true`, the slider is vertically positioned; otherwise it is horizontal.
+     *
+     * @defaultValue `false`
+     */
+    readonly vertical: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /**
+     * If set, overrides the auto-detected RTL direction.
+     * When not set, RTL is auto-detected from the element's computed CSS direction.
+     *
+     * @defaultValue `false`
+     */
+    readonly rtl: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /**
+     * If `true`, visually flips the slider direction (both horizontal and vertical).
+     *
+     * @defaultValue `false`
+     */
+    readonly flip: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /**
+     * If `true`, the value labels are displayed on the slider.
+     *
+     * @defaultValue `true`
+     */
+    readonly showValueLabels: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /**
+     * If `true`, the min and max labels are displayed on the slider.
+     *
+     * @defaultValue `true`
+     */
+    readonly showMinMaxLabels: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /**
+     * If `true`, the ticks are displayed on the slider.
+     *
+     * @defaultValue `false`
+     */
+    readonly showTicks: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /**
+     * Unit value between the ticks.
+     * If set to `0`, the {@link stepSize} is used to space the ticks.
+     *
+     * @defaultValue `0`
+     */
+    readonly tickInterval: _angular_core.InputSignal<number | undefined>;
+    /**
+     * If `true`, the tick values are displayed on the slider.
+     *
+     * @defaultValue `true`
+     */
+    readonly showTickValues: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /**
+     * Minimum distance between two handle values.
+     * When set to `0`, no minimum distance constraint is applied.
+     *
+     * Note: constraints are only enforced when a handle value changes (via user interaction or programmatic update),
+     * not on the initial values. If the initial values violate the constraint, they are rendered as-is until a handle moves.
+     *
+     * @defaultValue `0`
+     */
+    readonly minRange: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Maximum distance between two handle values.
+     * When set to `0`, no maximum distance constraint is applied.
+     *
+     * Note: constraints are only enforced when a handle value changes (via user interaction or programmatic update),
+     * not on the initial values. If the initial values violate the constraint, they are rendered as-is until a handle moves.
+     *
+     * @defaultValue `0`
+     */
+    readonly maxRange: _angular_core.InputSignal<number | undefined>;
+    /**
+     * When `true`, if moving a handle would break the {@link minRange} or {@link maxRange} constraint,
+     * it will push or pull the neighboring handles to maintain the allowed range.
+     *
+     * @defaultValue `false`
+     */
+    readonly pushRange: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /**
+     * Returns the value for the `aria-label` attribute of each slider handle.
+     *
+     * @param sortedIndex - index of the handle in the sorted list
+     *
+     * @defaultValue `() => 'Value'`
+     */
+    readonly ariaLabel: _angular_core.InputSignal<((sortedIndex: number) => string) | undefined>;
+    /**
+     * Returns the value for the `aria-labelledby` attribute of each slider handle.
+     *
+     * @param sortedIndex - index of the handle in the sorted list
+     *
+     * @defaultValue `() => ''`
+     */
+    readonly ariaLabelledBy: _angular_core.InputSignal<((sortedIndex: number) => string) | undefined>;
+    /**
+     * Returns the value for the `aria-valuetext` attribute of each slider handle.
+     *
+     * @param value - current value of the handle
+     * @param sortedIndex - index of the handle in the sorted list
+     *
+     * @defaultValue `() => ''`
+     */
+    readonly ariaValueText: _angular_core.InputSignal<((value: number, sortedIndex: number) => string) | undefined>;
+    /**
+     * Emitted when slider values are changed.
+     *
+     * Event payload equals the updated slider values.
+     */
+    readonly valuesChange: _angular_core.OutputEmitterRef<number[]>;
+    constructor();
+    /**
+     * Key handler that sets the refocus element only on the keystrokes that move
+     * the element up the DOM
+     * @param event object containing keystroke and the target element
+     */
+    onKeyDown(event: KeyboardEvent): void;
+    /**
+     * Control value accessor methods
+     */
+    onChange: (_: any) => void;
+    onTouched: () => void;
+    registerOnChange(fn: (value: any) => any): void;
+    registerOnTouched(fn: () => any): void;
+    writeValue(value: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    handleBlur(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfSlider, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfSlider, "df-slider", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "stepSize": { "alias": "stepSize"; "required": false; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "vertical": { "alias": "vertical"; "required": false; "isSignal": true; }; "rtl": { "alias": "rtl"; "required": false; "isSignal": true; }; "flip": { "alias": "flip"; "required": false; "isSignal": true; }; "showValueLabels": { "alias": "showValueLabels"; "required": false; "isSignal": true; }; "showMinMaxLabels": { "alias": "showMinMaxLabels"; "required": false; "isSignal": true; }; "showTicks": { "alias": "showTicks"; "required": false; "isSignal": true; }; "tickInterval": { "alias": "tickInterval"; "required": false; "isSignal": true; }; "showTickValues": { "alias": "showTickValues"; "required": false; "isSignal": true; }; "minRange": { "alias": "minRange"; "required": false; "isSignal": true; }; "maxRange": { "alias": "maxRange"; "required": false; "isSignal": true; }; "pushRange": { "alias": "pushRange"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "ariaValueText": { "alias": "ariaValueText"; "required": false; "isSignal": true; }; }, { "valuesChange": "valuesChange"; }, never, never, true, never>;
+}
+
+/**
+ * Configuration options supported by `provideDfSliderConfig`.
+ *
+ * These defaults apply to every `DfSlider` instance within the providing injector, unless explicitly overridden on
+ * the component itself.
+ */
+type DfSliderConfig = Pick<SliderProps, 'ariaLabel' | 'ariaValueText'>;
+/**
+ * Slider config key in the global DF component config.
+ */
+declare const SLIDER_CONFIG_KEY: "slider";
+/**
+ * Provides the configuration for the slider component.
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *   providers: [provideDfSliderConfig({ ariaLabel: () => 'Custom label' })]
+ * })
+ * export class MyHomeComponent {}
+ * ```
+ *
+ * @param config - Partial configuration or a function that receives the parent configuration and returns a partial configuration.
+ *
+ * @since 22.0.0
+ */
+declare const provideDfSliderConfig: (config?: Partial<DfSliderConfig> | ((prevConfig: Partial<DfSliderConfig>) => Partial<DfSliderConfig>) | undefined) => _angular_core.FactoryProvider;
+/**
+ * Injects the configuration for the slider component.
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *   providers: [provideDfSliderConfig()]
+ * })
+ * export class MySliderComponent {
+ *   readonly sliderConfig = injectDfSliderConfig();
+ * }
+ * ```
+ *
+ * @returns A writable signal containing the slider configuration.
+ *
+ * @since 22.0.0
+ */
+declare const injectDfSliderConfig: () => _angular_core.WritableSignal<Partial<DfSliderConfig>>;
+
+export { DfSlider, SLIDER_CONFIG_KEY, injectDfSliderConfig, provideDfSliderConfig };
+export type { DfSliderConfig, DfSliderSize };

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

@@ -0,0 +1,93 @@
+import * as _angular_core from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+
+/**
+ * Design Factory toggle switch.
+ *
+ * Renders a native `<input type="checkbox" role="switch">` underneath with a custom visual.
+ * Any projected content is rendered inline-end of the switch (typically the on/off state text,
+ * e.g. `{{ checked() ? 'On' : 'Off' }}`).
+ *
+ * Form integration is handled through `ControlValueAccessor`; `disabled`, `readonly`, and
+ * `required` states flow from the bound Angular form control.
+ *
+ * @experimental 22.0
+ */
+declare class DfToggle implements ControlValueAccessor {
+    /**
+     * ID of the internal `<input>` element.
+     *
+     * Defaults to a generated `dfId-[counter]` so the internal input always has a stable id that
+     * surrounding labels or form-field markup can target.
+     *
+     * @defaultValue `'dfId-[number]'`
+     */
+    readonly id: _angular_core.InputSignal<string>;
+    /**
+     * Checked state of the toggle.
+     *
+     * @defaultValue `false`
+     */
+    readonly checked: _angular_core.ModelSignal<boolean>;
+    /**
+     * Size of the toggle.
+     *
+     * @defaultValue `'md'`
+     */
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
+    /**
+     * Accessible name for the internal `<input>`. Use when the toggle has no visible label
+     * (e.g. when projected content describes state, not purpose).
+     *
+     * Forwarded to the internal `<input>` as `aria-label`. Prefer {@link ariaLabelledby} when a
+     * visible label element exists.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    /**
+     * IDs of one or more elements that label the internal `<input>`.
+     *
+     * Forwarded to the internal `<input>` as `aria-labelledby`. Used by the surrounding form-field
+     * markup to wire its label element to the toggle.
+     */
+    readonly ariaLabelledby: _angular_core.InputSignal<string | null>;
+    /**
+     * Disabled state of the toggle.
+     *
+     * Combines additively with the disabled state driven by `ControlValueAccessor.setDisabledState`
+     * (typically `formControl.disable()`): the toggle is disabled if **either** source asks for it.
+     *
+     * Concrete behavior:
+     * - `[disabled]="true"` disables the toggle regardless of the form control state.
+     * - `formControl.disable()` disables the toggle regardless of the `[disabled]` value.
+     * - To re-enable, **both** sources must agree: clear `[disabled]` (or set it to `false`) **and**
+     *   call `formControl.enable()`.
+     * - There is no precedence/last-write-wins: the order in which the two sources change does not
+     *   matter. The combined state is recomputed reactively whenever either source changes.
+     *
+     * Use the input for ad-hoc disabling that does not need a form control (e.g. gating on a sibling
+     * signal); use the form control when the toggle is part of an Angular form.
+     *
+     * @defaultValue `false`
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Disabled state driven by `ControlValueAccessor.setDisabledState` (form-driven channel). */
+    private readonly cvaDisabled;
+    /** Effective disabled state forwarded to the internal `<input>`: input OR form-driven. */
+    protected readonly effectiveDisabled: _angular_core.Signal<boolean>;
+    private onChange;
+    private onTouched;
+    protected handleChange(event: Event): void;
+    protected handleBlur(): void;
+    /** @internal */
+    writeValue(value: boolean): void;
+    /** @internal */
+    registerOnChange(fn: (value: boolean) => void): void;
+    /** @internal */
+    registerOnTouched(fn: () => void): void;
+    /** @internal */
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfToggle, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfToggle, "df-toggle", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, ["*"], true, never>;
+}
+
+export { DfToggle };

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

@@ -0,0 +1,113 @@
+import * as _angular_core from '@angular/core';
+import { AgnosWidgetDirective } from '@design-factory/angular/internals';
+import { TooltipWidget, TooltipSize, TooltipPlacement, TooltipProps } from '@design-factory/core/components/tooltip';
+
+/**
+ * Valid placement values for the tooltip.
+ * Includes all individual placement values plus `'auto'`, `'vertical'` and `'horizontal'` shortcuts.
+ *
+ * - `'auto'` expands to `'vertical horizontal'`
+ * - `'vertical'` expands to `'top top-start top-end bottom bottom-start bottom-end'`
+ * - `'horizontal'` expands to `'end end-end end-start start start-end start-start'`
+ *
+ * @since 22.0
+ */
+type DfTooltipPlacement = TooltipPlacement;
+/**
+ * Accepted value for the tooltip `placement` input.
+ *
+ * Either an array of placements or a space-separated string of placements, in order of preference.
+ * The first placement that fits the viewport will be used.
+ *
+ * @since 22.0
+ */
+type DfTooltipPlacementArray = DfTooltipPlacement[] | `${DfTooltipPlacement}${string}`;
+/**
+ * Available tooltip sizes.
+ * @since 22.0
+ */
+type DfTooltipSize = TooltipSize;
+/**
+ * A directive that attaches a tooltip to its host element.
+ *
+ * The tooltip is shown when the host element is hovered, receives keyboard focus or long press, and hidden when the mouse leaves,
+ * the element loses keyboard focus, or the user presses `Escape`. The tooltip window is rendered in `document.body` and
+ * positioned next to the host using the configured placement preference.
+ *
+ * @since 22.0
+ */
+declare class DfTooltip extends AgnosWidgetDirective<TooltipWidget> {
+    /**
+     * Text content to be displayed inside the tooltip.
+     */
+    readonly content: _angular_core.InputSignal<string | null | undefined>;
+    /**
+     * Size of the tooltip.
+     */
+    readonly size: _angular_core.InputSignal<TooltipSize | undefined>;
+    /**
+     * List of placements, in order of preference. The first valid placement will be used.
+     */
+    readonly placement: _angular_core.InputSignal<DfTooltipPlacementArray | undefined>;
+    /**
+     * Whether the tooltip is disabled. When `true`, the tooltip will not be displayed, even if the reference element is focused, hovered or long-pressed.
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /**
+     * Whether showing or hiding the tooltip should be animated.
+     */
+    readonly animated: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfTooltip, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DfTooltip, "[dfTooltip]", never, { "content": { "alias": "dfTooltip"; "required": false; "isSignal": true; }; "size": { "alias": "dfTooltipSize"; "required": false; "isSignal": true; }; "placement": { "alias": "dfTooltipPlacement"; "required": false; "isSignal": true; }; "disabled": { "alias": "dfTooltipDisabled"; "required": false; "isSignal": true; }; "animated": { "alias": "dfTooltipAnimated"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Configuration options supported by `provideDfTooltipConfig`.
+ *
+ * These defaults apply to every `DfTooltip` instance within the providing injector, unless explicitly overridden on
+ * the directive itself.
+ *
+ * @since 22.0
+ */
+type DfTooltipConfig = Pick<TooltipProps, 'animated'>;
+/**
+ * Tooltip config key in the global DF component config.
+ * @since 22.0
+ */
+declare const TOOLTIP_CONFIG_KEY: "tooltip";
+/**
+ * Provides the configuration for the tooltip component.
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *   providers: [provideDfTooltipConfig({ animated: false })]
+ * })
+ * 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 provideDfTooltipConfig: (config?: Partial<DfTooltipConfig> | ((prevConfig: Partial<DfTooltipConfig>) => Partial<DfTooltipConfig>) | undefined) => _angular_core.FactoryProvider;
+/**
+ * Injects the configuration for the tooltip component.
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *   providers: [provideDfTooltipConfig()]
+ * })
+ * export class MyTooltipComponent {
+ *   readonly tooltipConfig = injectDfTooltipConfig();
+ * }
+ * ```
+ *
+ * @returns A writable signal containing the tooltip configuration.
+ * @since 22.0
+ */
+declare const injectDfTooltipConfig: () => _angular_core.WritableSignal<Partial<DfTooltipConfig>>;
+
+export { DfTooltip, TOOLTIP_CONFIG_KEY, injectDfTooltipConfig, provideDfTooltipConfig };
+export type { DfTooltipConfig, DfTooltipPlacement, DfTooltipPlacementArray, DfTooltipSize };

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

@@ -1,30 +1,11 @@
 import * as _angular_core from '@angular/core';
-import { Signal, TemplateRef, AfterContentInit, ElementRef } from '@angular/core';
+import { TemplateRef, AfterContentInit, ElementRef, Signal, InjectionToken } from '@angular/core';
+import * as _design_factory_angular_sidenav from '@design-factory/angular/sidenav';
+import { DfSideNavInputNode, DfSidenavInput } from '@design-factory/angular/sidenav';
 import { IsActiveMatchOptions } from '@angular/router';
-import { DfSidenavComponent } from '@design-factory/angular/sidenav';
 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap/popover';
 import { DfThemeService } from '@design-factory/angular/theme';
 
-/**
- * @internal
- * Defines the structure of the navigation items used to build the sidenav menu when the TopNav is in "sidenav" mode. These types are used internally to map the navigation elements defined in the TopNavNavigation component to a structure that can be easily consumed by the sidenav component.
- */
-type SideNavItem = {
-    label: Signal<string>;
-    children: Signal<(SideNavItem | SideNavLink)[]>;
-};
-/**
- * @internal
- * Defines the structure of the navigation links used to build the sidenav menu when the TopNav is in "sidenav" mode. These types are used internally to map the navigation elements defined in the TopNavNavigation component to a structure that can be easily consumed by the sidenav component.
- */
-type SideNavLink = {
-    label: Signal<string>;
-    href: Signal<string>;
-    external: Signal<boolean>;
-    routerLinkActiveOptions: Signal<IsActiveMatchOptions | {
-        exact: boolean;
-    }>;
-};
 /**
  * TopNav (Top Navigation Bar) provides consistent access to product-level navigation and global actions across Amadeus applications.
  *
@@ -36,14 +17,9 @@ type SideNavLink = {
 declare class DfTopNav {
     /**
      * The style of the TopNav main nav, which determines the applied styles. Can be either "basic" or "mirror".
-     * When not provided, the applied mode will be determined based on the number of navigation links.
+     * If navigation links are present this input is ignored and the applied style will be determined based on the number of navigation links and the superheader input.
      */
     readonly mainNavStyle: _angular_core.InputSignal<"basic" | "mirror" | undefined>;
-    /**
-     * The style of the TopNav secondary nav, which determines the applied styles. Can be either "basic" or "mirror".
-     * When not provided, the applied mode will be opposite to the main nav style.
-     */
-    readonly secondaryNavStyle: _angular_core.InputSignal<"basic" | "mirror" | undefined>;
     /**
      * The mode of the TopNav, which determines the behavior of the navigation. Can be either "sidenav" or "dropdown".
      */
@@ -72,15 +48,14 @@ declare class DfTopNav {
     /**
      * The content of the sidenav, which is derived from the TopNav navigation elements.
      */
-    protected readonly sidenavContent: Signal<(SideNavItem | SideNavLink)[]>;
-    protected readonly isLg: Signal<boolean>;
-    protected readonly isXl: Signal<boolean>;
-    protected readonly appliedSuperheader: Signal<boolean>;
-    protected readonly mainNavAppliedStyle: Signal<"basic" | "mirror">;
-    protected readonly secondaryNavAppliedStyle: Signal<"basic" | "mirror">;
+    protected readonly sidenavContent: _angular_core.Signal<DfSideNavInputNode[]>;
+    protected readonly isLg: _angular_core.Signal<boolean>;
+    protected readonly isXl: _angular_core.Signal<boolean>;
+    protected readonly appliedSuperheader: _angular_core.Signal<boolean>;
+    protected readonly mainNavAppliedStyle: _angular_core.Signal<"basic" | "mirror">;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfTopNav, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfTopNav, "df-topnav", never, { "mainNavStyle": { "alias": "mainNavStyle"; "required": false; "isSignal": true; }; "secondaryNavStyle": { "alias": "secondaryNavStyle"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "navExpanded": { "alias": "navExpanded"; "required": false; "isSignal": true; }; "superheader": { "alias": "superheader"; "required": false; "isSignal": true; }; "showToggle": { "alias": "showToggle"; "required": false; "isSignal": true; }; }, { "navExpanded": "navExpandedChange"; }, ["navigationContainer", "navActions"], ["df-topnav-navigation", "df-topnav-brand", "df-topnav-quick-actions"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfTopNav, "df-topnav", never, { "mainNavStyle": { "alias": "mainNavStyle"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "navExpanded": { "alias": "navExpanded"; "required": false; "isSignal": true; }; "superheader": { "alias": "superheader"; "required": false; "isSignal": true; }; "showToggle": { "alias": "showToggle"; "required": false; "isSignal": true; }; }, { "navExpanded": "navExpandedChange"; }, ["navigationContainer", "navActions"], ["df-topnav-navigation", "df-topnav-brand", "df-topnav-quick-actions"], true, never>;
 }
 
 /**
@@ -96,7 +71,7 @@ declare class DfTopNavBrandLinkContent {
 /**
  * The TopNav brand component, used to display the company and product information.
  *
- * See {@link https://design-factory.amadeus.net/components/topnav/examples#brand|Design Factory example}
+ * See {@link https://design-factory.amadeus.net/components/topnav/developer#brand|Design Factory example}
  * @since 21.1
  */
 declare class DfTopNavBrand {
@@ -132,10 +107,9 @@ declare class DfTopNavBrand {
  */
 declare class DfAppContainer implements AfterContentInit {
     protected readonly topnav: _angular_core.Signal<DfTopNav>;
-    protected readonly sidenav: _angular_core.Signal<DfSidenavComponent | undefined>;
-    protected readonly sidenavContent: _angular_core.Signal<(SideNavItem | SideNavLink)[]>;
+    protected readonly sidenav: _angular_core.Signal<DfSidenavInput | undefined>;
+    protected readonly sidenavContent: _angular_core.Signal<_design_factory_angular_sidenav.DfSideNavInputNode[]>;
     protected readonly drawerContainerActions: _angular_core.Signal<ElementRef<HTMLElement>>;
-    protected isSideItem(item: SideNavItem | SideNavLink): item is SideNavItem;
     constructor();
     ngAfterContentInit(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfAppContainer, never>;
@@ -227,8 +201,15 @@ declare class DfTopNavNavigationItem extends DfTopNavNavigationElement {
 }
 
 /**
- * @internal
+ * An Injection Token for the DfTopNavQuickActionElement interface, which represents a navigation quick action in the top navigation component.
+ *
+ * @since 22.0
+ */
+declare const DF_TOPNAV_QUICK_ACTION_ELEMENT: InjectionToken<DfTopNavQuickActionElement>;
+/**
  * An abstract class that defines the structure of a quick action element in the top navigation component.
+ *
+ * @since 22.0
  */
 declare abstract class DfTopNavQuickActionElement {
 }
@@ -262,7 +243,7 @@ declare class DfTopNavQuickActionButtonIcon {
  *
  * The icon can be set through the {@link DfTopNavQuickActionButton.icon} input or by using the {@link DfTopNavQuickActionButtonIcon} directive.
  *
- * See {@link https://design-factory.amadeus.net/components/topnav/examples#quick-actions|Design Factory example}
+ * See {@link https://design-factory.amadeus.net/components/topnav/developer#quick-actions|Design Factory example}
  * @since 21.1
  */
 declare class DfTopNavQuickActionButton extends DfTopNavQuickActionElement {
@@ -291,6 +272,7 @@ declare class DfTopNavQuickActionButton extends DfTopNavQuickActionElement {
     protected readonly popover: _angular_core.Signal<NgbPopover>;
     private readonly isLg;
     constructor();
+    protected readonly mainNavAppliedStyle: _angular_core.Signal<"basic" | "mirror">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfTopNavQuickActionButton, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfTopNavQuickActionButton, "df-topnav-quick-action-button", never, { "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "act": "act"; }, ["actionContent", "actionIcon"], never, true, never>;
 }
@@ -325,12 +307,13 @@ declare class DfTopNavQuickActionInDrawer {
  * It should be used inside a {@link DfTopNavQuickActions} component.
  * It requires a {@link DfTopNavQuickActionInTopNav} template to be provided as content, which will be displayed in desktop. An optional {@link DfTopNavQuickActionInDrawer} template can also be provided, which will be displayed in mobile and tablet instead of the topnav template.
  *
- * See {@link https://design-factory.amadeus.net/components/topnav/examples#quick-actions|Design Factory example}
+ * See {@link https://design-factory.amadeus.net/components/topnav/developer#quick-actions|Design Factory example}
  * @since 21.1
  */
 declare class DfTopNavQuickAction extends DfTopNavQuickActionElement {
     protected readonly content: _angular_core.Signal<TemplateRef<any>>;
     protected readonly drawerContent: _angular_core.Signal<TemplateRef<any> | undefined>;
+    protected readonly mainNavAppliedStyle: _angular_core.Signal<"basic" | "mirror">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfTopNavQuickAction, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfTopNavQuickAction, "df-topnav-quick-action", never, {}, {}, ["content", "drawerContent"], never, true, never>;
 }
@@ -350,7 +333,7 @@ declare class DfTopNavQuickActionSearchInput {
  *
  * It should be used inside a {@link DfTopNavQuickActions} component and contain a ng-template with an input {@link DfTopNavQuickActionSearchInput}.
  *
- * See {@link https://design-factory.amadeus.net/components/topnav/examples#quick-actions|Design Factory example}
+ * See {@link https://design-factory.amadeus.net/components/topnav/developer#quick-actions|Design Factory example}
  * @since 21.1
  */
 declare class DfTopNavQuickActionSearch extends DfTopNavQuickActionElement {
@@ -369,7 +352,7 @@ declare class DfTopNavQuickActionSearch extends DfTopNavQuickActionElement {
 /**
  * The TopNav quick actions component, used to display a list of quick action buttons in the TopNav. On large screens, the buttons are displayed inline, while on smaller screens, they are displayed in a drawer.
  *
- * See {@link https://design-factory.amadeus.net/components/topnav/examples#quick-actions|Design Factory example}
+ * See {@link https://design-factory.amadeus.net/components/topnav/developer#quick-actions|Design Factory example}
  * @since 21.1
  */
 declare class DfTopNavQuickActions {
@@ -385,6 +368,8 @@ declare class DfTopNavQuickActions {
     private readonly _actionElements;
     private readonly drawer;
     private readonly document;
+    private readonly selectedBtn;
+    private readonly drawerButtons;
     protected readonly isMd: _angular_core.Signal<boolean>;
     protected readonly isLg: _angular_core.Signal<boolean>;
     protected readonly drawerContainer: _angular_core.Signal<HTMLElement>;
@@ -394,8 +379,11 @@ declare class DfTopNavQuickActions {
     protected isAction(action: DfTopNavQuickActionButton | DfTopNavQuickAction): action is DfTopNavQuickAction;
     protected readonly menuExpanded: _angular_core.WritableSignal<boolean>;
     protected readonly selectedQuickAction: _angular_core.WritableSignal<DfTopNavQuickActionButton | undefined>;
+    protected readonly prevSelectedQuickAction: _angular_core.WritableSignal<DfTopNavQuickActionButton | undefined>;
     protected clickQuickAction(actionBtn: DfTopNavQuickActionButton): Promise<void>;
+    protected actionLabelToId(actionBtn: DfTopNavQuickActionButton): string;
     constructor();
+    protected readonly mainNavAppliedStyle: _angular_core.Signal<"basic" | "mirror">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfTopNavQuickActions, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfTopNavQuickActions, "df-topnav-quick-actions", never, { "reversedVertical": { "alias": "reversedVertical"; "required": false; "isSignal": true; }; "tabletDrawerContainer": { "alias": "tabletDrawerContainer"; "required": false; "isSignal": true; }; }, {}, ["_actionElements"], ["*"], true, never>;
 }
@@ -422,8 +410,8 @@ declare class DfTopNavQuickActionThemePicker extends DfTopNavQuickAction {
      */
     readonly appearance: _angular_core.InputSignal<"primary" | "neutral">;
     protected readonly mapThemeToIcon: _angular_core.Signal<Map<string, string>>;
-    protected readonly toggleId: string;
     protected readonly content: _angular_core.Signal<TemplateRef<unknown>>;
+    protected readonly drawerContent: _angular_core.Signal<TemplateRef<unknown> | undefined>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfTopNavQuickActionThemePicker, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfTopNavQuickActionThemePicker, "df-topnav-quick-action-theme-picker", never, { "themeOptions": { "alias": "themeOptions"; "required": true; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -431,7 +419,7 @@ declare class DfTopNavQuickActionThemePicker extends DfTopNavQuickAction {
 /**
  * The environment banner component, used to display a banner at the top of the page indicating the current environment (e.g., development, staging, production).
  *
- * See {@link https://design-factory.amadeus.net/components/topnav/examples#environment-banner|Design Factory example}
+ * See {@link https://design-factory.amadeus.net/components/topnav/developer#environment-banner|Design Factory example}
  * @since 21.1
  */
 declare class DfEnvBanner {
@@ -439,4 +427,4 @@ declare class DfEnvBanner {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfEnvBanner, "df-env-banner", never, {}, {}, never, ["*"], true, never>;
 }
 
-export { DfAppContainer, DfEnvBanner, DfTopNav, DfTopNavBrand, DfTopNavBrandLinkContent, DfTopNavNavigation, DfTopNavNavigationItem, DfTopNavNavigationLink, DfTopNavQuickAction, DfTopNavQuickActionButton, DfTopNavQuickActionButtonContent, DfTopNavQuickActionButtonIcon, DfTopNavQuickActionInDrawer, DfTopNavQuickActionInTopNav, DfTopNavQuickActionSearch, DfTopNavQuickActionSearchInput, DfTopNavQuickActionThemePicker, DfTopNavQuickActions };
+export { DF_TOPNAV_QUICK_ACTION_ELEMENT, DfAppContainer, DfEnvBanner, DfTopNav, DfTopNavBrand, DfTopNavBrandLinkContent, DfTopNavNavigation, DfTopNavNavigationItem, DfTopNavNavigationLink, DfTopNavQuickAction, DfTopNavQuickActionButton, DfTopNavQuickActionButtonContent, DfTopNavQuickActionButtonIcon, DfTopNavQuickActionElement, DfTopNavQuickActionInDrawer, DfTopNavQuickActionInTopNav, DfTopNavQuickActionSearch, DfTopNavQuickActionSearchInput, DfTopNavQuickActionThemePicker, DfTopNavQuickActions };