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

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

@@ -0,0 +1,435 @@
+import * as _angular_core from '@angular/core';
+import { Signal, TemplateRef, AfterContentInit, ElementRef } from '@angular/core';
+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>;
+    routerLinkActiveOptions: Signal<IsActiveMatchOptions | {
+        exact: boolean;
+    }>;
+};
+/**
+ * TopNav (Top Navigation Bar) provides consistent access to product-level navigation and global actions across Amadeus applications.
+ *
+ * It is recommended to be used with a {@link DfAppContainer} to ensure the correct layout and responsiveness, but it can also be used without it if needed.
+ *
+ * See {@link https://design-factory.amadeus.net/components/topnav|Design Factory documentation} for details and examples.
+ * @since 21.1
+ */
+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.
+     */
+    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".
+     */
+    readonly mode: _angular_core.InputSignal<"sidenav" | "dropdown">;
+    /**
+     * Indicates whether the navigation menu is expanded or collapsed. This is used to control the visibility of the sidenav menu when the TopNav is in "sidenav" mode on smaller screens. When set to true, the sidenav menu will be visible, and when set to false, it will be hidden.
+     */
+    readonly navExpanded: _angular_core.ModelSignal<boolean>;
+    /**
+     * When set to true, the superheader layout will be applied, which moves the navigation to a second line and applies the "mirror" style to it. When not provided, the superheader layout will be applied automatically when there are more than 5 navigation links and the screen size is large or bigger.
+     */
+    readonly superheader: _angular_core.InputSignal<boolean | undefined>;
+    /**
+     * When set to true, the toggle button will be always shown. Useful when the TopNav is used without any navigation links but the toggle button is still needed to access other content.
+     * When not provided, the toggle button will be shown automatically when there are navigation links and the screen size is smaller than large.
+     */
+    readonly showToggle: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    private readonly navigationContainer;
+    private readonly navElements;
+    private readonly navActions;
+    protected readonly inAppContainer: _angular_core.WritableSignal<boolean>;
+    /**
+     * Signal that indicates when the links need to be displayed in the topnav instead of the navbar.
+     */
+    private readonly displayLinksInNav;
+    /**
+     * 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">;
+    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>;
+}
+
+/**
+ * A directive to mark the company template in the {@link DfTopNavBrand} brand component.
+ *
+ * This is used to customize the display of the company logo and name in the {@link DfTopNavBrand} brand component.
+ * @since 21.1
+ */
+declare class DfTopNavBrandLinkContent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfTopNavBrandLinkContent, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DfTopNavBrandLinkContent, "ng-template[dfTopNavBrandLinkContent]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * 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}
+ * @since 21.1
+ */
+declare class DfTopNavBrand {
+    /**
+     * The URL to navigate to when the brand is clicked. Defaults to "/".
+     */
+    readonly href: _angular_core.InputSignal<string>;
+    /**
+     * The product.
+     */
+    readonly product: _angular_core.InputSignal<string | undefined>;
+    /**
+     * The module.
+     */
+    readonly module: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Whether to display the Amadeus logo as a vector graphic instead of text.
+     */
+    readonly amaudeusLogoVector: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly brandLinkContent: _angular_core.Signal<TemplateRef<any> | undefined>;
+    protected readonly isSm: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfTopNavBrand, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfTopNavBrand, "df-topnav-brand", never, { "href": { "alias": "href"; "required": false; "isSignal": true; }; "product": { "alias": "product"; "required": false; "isSignal": true; }; "module": { "alias": "module"; "required": false; "isSignal": true; }; "amaudeusLogoVector": { "alias": "amaudeusLogoVector"; "required": false; "isSignal": true; }; }, {}, ["brandLinkContent"], never, true, never>;
+}
+
+/**
+ * AppContainer is a simple wrapper component that provides a consistent layout for applications using the {@link DfTopNav} component.
+ *
+ * It ensures that the content of the application is displayed correctly below the {@link DfTopNav} and can be used to apply common styles or layout properties to the entire application.
+ *
+ * See {@link https://design-factory.amadeus.net/components/topnav|Design Factory documentation} for details and examples.
+ * @since 21.1
+ */
+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 drawerContainerActions: _angular_core.Signal<ElementRef<HTMLElement>>;
+    protected isSideItem(item: SideNavItem | SideNavLink): item is SideNavItem;
+    constructor();
+    ngAfterContentInit(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfAppContainer, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfAppContainer, "df-app-container", never, {}, {}, ["topnav"], ["df-topnav", "df-env-banner", "main"], true, never>;
+}
+
+/**
+ * @internal
+ * An abstract class that defines the structure of a navigation element in the top navigation component.
+ * It includes an abstract property 'active' which is a Signal that indicates whether the navigation element is active or not.
+ */
+declare abstract class DfTopNavNavigationElement {
+    abstract readonly active: Signal<boolean>;
+}
+
+/**
+ * The TopNav navigation component, used to display a list of navigation items in the TopNav.
+ * @since 21.1
+ */
+declare class DfTopNavNavigation {
+    protected readonly childrenElements: _angular_core.Signal<readonly DfTopNavNavigationElement[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfTopNavNavigation, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfTopNavNavigation, "df-topnav-navigation", never, {}, {}, ["childrenElements"], ["*"], true, never>;
+}
+
+/**
+ * The TopNav navigation item component, used to display a navigation link in the TopNav.
+ *
+ * It should be used inside a {@link DfTopNavNavigation} component.
+ * @since 21.1
+ */
+declare class DfTopNavNavigationLink extends DfTopNavNavigationElement {
+    /**
+     * The label of the navigation link, which will be displayed as the link text.
+     */
+    readonly label: _angular_core.InputSignal<string>;
+    /**
+     * The href of the navigation link, which will be used as the link target. It can be either an internal route or an external URL.
+     */
+    readonly href: _angular_core.InputSignal<string>;
+    /**
+     * The options to determine when the link is active based on the Router state. It can be either an object of type IsActiveMatchOptions or an object with an "exact" boolean property. When not provided, it defaults to { exact: false }.
+     */
+    readonly routerLinkActiveOptions: _angular_core.InputSignal<IsActiveMatchOptions | {
+        exact: boolean;
+    }>;
+    protected readonly _active: _angular_core.WritableSignal<boolean>;
+    /**
+     * Indicates if the link is currently active based on the Router state.
+     */
+    readonly active: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfTopNavNavigationLink, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfTopNavNavigationLink, "df-topnav-navigation-link", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "href": { "alias": "href"; "required": true; "isSignal": true; }; "routerLinkActiveOptions": { "alias": "routerLinkActiveOptions"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * The TopNav navigation item component, used to display a navigation link in the TopNav which can have child navigation links.
+ *
+ * It should be used inside a {@link DfTopNavNavigation} component.
+ * @since 21.1
+ */
+declare class DfTopNavNavigationItem extends DfTopNavNavigationElement {
+    /**
+     * The label of the navigation item, which will be displayed as the link text.
+     */
+    readonly label: _angular_core.InputSignal<string>;
+    /**
+     * The href of the navigation item, which will be used as the link target. It can be either an internal route or an external URL.
+     */
+    readonly href: _angular_core.InputSignal<string>;
+    protected readonly childElements: _angular_core.Signal<readonly DfTopNavNavigationElement[]>;
+    protected readonly deepChildLinks: _angular_core.Signal<readonly DfTopNavNavigationLink[]>;
+    protected readonly rootChildLinks: _angular_core.Signal<DfTopNavNavigationLink[]>;
+    private readonly topNav;
+    protected readonly dropdownMode: _angular_core.Signal<boolean>;
+    protected dropdownId: string;
+    /**
+     * Indicates if the navigation item is currently active based on the Router state of its child links.
+     */
+    readonly active: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfTopNavNavigationItem, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfTopNavNavigationItem, "df-topnav-navigation-item", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "href": { "alias": "href"; "required": true; "isSignal": true; }; }, {}, ["childElements", "deepChildLinks"], never, true, never>;
+}
+
+/**
+ * @internal
+ * An abstract class that defines the structure of a quick action element in the top navigation component.
+ */
+declare abstract class DfTopNavQuickActionElement {
+}
+
+/**
+ * The TopNav action content directive, used to provide the content of the popover or drawer associated to a {@link DfTopNavQuickActionButton}.
+ *
+ * It is showed in a popover in desktop and in a drawer on tablet and mobile when the associated quick action button is clicked.
+ * @since 21.1
+ */
+declare class DfTopNavQuickActionButtonContent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfTopNavQuickActionButtonContent, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DfTopNavQuickActionButtonContent, "ng-template[dfTopNavQuickActionButtonContent]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * The TopNav action icon directive, used to provide a custom icon for the {@link DfTopNavQuickActionButton}.
+ *
+ * If not provided, the quick action button will use the default icon specified by the {@link DfTopNavQuickActionButton.icon} input.
+ * @since 21.1
+ */
+declare class DfTopNavQuickActionButtonIcon {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfTopNavQuickActionButtonIcon, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DfTopNavQuickActionButtonIcon, "ng-template[dfTopNavQuickActionButtonIcon]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * The TopNav quick action button component, used to display a quick action button in the TopNav.
+ *
+ * It should be used inside a {@link DfTopNavQuickActions} component.
+ *
+ * It can be associated with a popover content using the {@link DfTopNavQuickActionButtonContent} directive or be used alone with the {@link DfTopNavQuickActionButton.act} output.
+ *
+ * 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}
+ * @since 21.1
+ */
+declare class DfTopNavQuickActionButton extends DfTopNavQuickActionElement {
+    /**
+     * The appearance of the quick action button, which will determine its color. It can be either 'primary' or 'neutral'.
+     */
+    readonly appearance: _angular_core.InputSignal<"primary" | "neutral">;
+    /**
+     * The label of the quick action button, which will be used as the aria-label attribute for accessibility on desktop and label in the drawer.
+     */
+    readonly label: _angular_core.InputSignal<string>;
+    /**
+     * The icon of the quick action button.
+     */
+    readonly icon: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Whether the quick action button is disabled or not.
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The event emitted when the quick action button is clicked. It can be used to perform an action instead of showing the associated popover or drawer content.
+     */
+    readonly act: _angular_core.OutputEmitterRef<void>;
+    protected readonly actionContent: _angular_core.Signal<TemplateRef<any> | undefined>;
+    protected readonly actionIcon: _angular_core.Signal<TemplateRef<any> | undefined>;
+    protected readonly popover: _angular_core.Signal<NgbPopover>;
+    private readonly isLg;
+    constructor();
+    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>;
+}
+
+/**
+ * The TopNav action "in topnav" content directive.
+ *
+ * It drives the display of the {@link DfTopNavQuickAction} on larger screens, where the quick action is displayed in a topnav.
+ *
+ * @since 21.1
+ */
+declare class DfTopNavQuickActionInTopNav {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfTopNavQuickActionInTopNav, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DfTopNavQuickActionInTopNav, "ng-template[dfTopNavQuickActionInTopNav]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * The TopNav action "in drawer" content directive.
+ *
+ * It drives the display of the {@link DfTopNavQuickAction} on smaller screens, where the quick action is displayed in a drawer.
+ *
+ * @since 21.1
+ */
+declare class DfTopNavQuickActionInDrawer {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfTopNavQuickActionInDrawer, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DfTopNavQuickActionInDrawer, "ng-template[dfTopNavQuickActionInDrawer]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * The TopNav quick action component, used to display a quick action in the TopNav.
+ *
+ * Consider using the {@link DfTopNavQuickActionButton} component instead, which provides a button with the appropriate styling and behavior for quick actions in the TopNav.
+ *
+ * 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}
+ * @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>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfTopNavQuickAction, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfTopNavQuickAction, "df-topnav-quick-action", never, {}, {}, ["content", "drawerContent"], never, true, never>;
+}
+
+/**
+ * The TopNav quick action search input directive.
+ *
+ * It should be used inside a {@link DfTopNavQuickActionSearch} component.
+ * @since 21.1
+ */
+declare class DfTopNavQuickActionSearchInput {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfTopNavQuickActionSearchInput, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfTopNavQuickActionSearchInput, "input[dfTopNavQuickActionSearchInput]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * The TopNav quick action search component, used to display a search input in the TopNav quick actions.
+ *
+ * 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}
+ * @since 21.1
+ */
+declare class DfTopNavQuickActionSearch extends DfTopNavQuickActionElement {
+    protected readonly templateRef: _angular_core.Signal<TemplateRef<any>>;
+    /**
+     * The aria-label of the search.
+     *
+     * It is required to set it if you have more than one global search in your page, to allow assistive technologies to differentiate between them.
+     * See [ARIA guidelines](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/search_role) for more information.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfTopNavQuickActionSearch, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfTopNavQuickActionSearch, "df-topnav-quick-action-search", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, ["templateRef"], never, true, never>;
+}
+
+/**
+ * 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}
+ * @since 21.1
+ */
+declare class DfTopNavQuickActions {
+    /**
+     * When true, the quick action buttons will be displayed in reversed order in the drawer on smaller screens. This is useful when the quick actions are defined in the template in the same order as the navigation items, so that the first quick action is closest to the navigation on smaller screens. Defaults to true.
+     */
+    readonly reversedVertical: _angular_core.InputSignal<boolean>;
+    /**
+     * The container element in which the drawer will be rendered on smaller screens. By default, it will try to render in the drawer container provided by the app container, and if not available, it will render in the body element. This input can be used to specify a different container element for the drawer.
+     */
+    readonly tabletDrawerContainer: _angular_core.InputSignal<HTMLElement | undefined>;
+    private readonly appContainer;
+    private readonly _actionElements;
+    private readonly drawer;
+    private readonly document;
+    protected readonly isMd: _angular_core.Signal<boolean>;
+    protected readonly isLg: _angular_core.Signal<boolean>;
+    protected readonly drawerContainer: _angular_core.Signal<HTMLElement>;
+    protected readonly actionElements: _angular_core.Signal<(DfTopNavQuickActionButton | DfTopNavQuickAction)[]>;
+    protected readonly searchElement: _angular_core.Signal<DfTopNavQuickActionSearch | undefined>;
+    protected isButton(action: DfTopNavQuickActionButton | DfTopNavQuickAction): action is DfTopNavQuickActionButton;
+    protected isAction(action: DfTopNavQuickActionButton | DfTopNavQuickAction): action is DfTopNavQuickAction;
+    protected readonly menuExpanded: _angular_core.WritableSignal<boolean>;
+    protected readonly selectedQuickAction: _angular_core.WritableSignal<DfTopNavQuickActionButton | undefined>;
+    protected clickQuickAction(actionBtn: DfTopNavQuickActionButton): Promise<void>;
+    constructor();
+    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>;
+}
+
+/**
+ * DfTopNavQuickActionThemePicker is a topnav quick action dropdown component that allows users to select a theme mode for the application.
+ *
+ * It uses the {@link DfThemeService} to manage theme state and apply the selected theme. The component displays an icon and label corresponding to the current theme selection and provides options for users to change the theme.
+ * @since 21.1
+ */
+declare class DfTopNavQuickActionThemePicker extends DfTopNavQuickAction {
+    protected readonly themeService: DfThemeService<string>;
+    /**
+     * An array of theme options to display in the dropdown
+     *
+     * Each option includes a `themeMode` which corresponds to a theme mode in the DfThemeService, and an `icon` which is a FontAwesome class name for the icon to display next to the option.
+     */
+    readonly themeOptions: _angular_core.InputSignal<{
+        themeMode: string;
+        icon: string;
+    }[]>;
+    /**
+     * The appearance of the TopNav button, which will determine its color. It can be either 'primary' or 'neutral'.
+     */
+    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>>;
+    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>;
+}
+
+/**
+ * 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}
+ * @since 21.1
+ */
+declare class DfEnvBanner {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DfEnvBanner, never>;
+    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 };