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

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

@@ -1,29 +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>;
-    routerLinkActiveOptions: Signal<IsActiveMatchOptions | {
-        exact: boolean;
-    }>;
-};
 /**
  * TopNav (Top Navigation Bar) provides consistent access to product-level navigation and global actions across Amadeus applications.
  *
@@ -35,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".
      */
@@ -71,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>;
 }
 
 /**
@@ -95,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 {
@@ -131,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>;
@@ -172,9 +147,15 @@ declare class DfTopNavNavigationLink extends DfTopNavNavigationElement {
      */
     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.
+     * The external href of the navigation link, which will be used as the link target. Use {@link routerLink} for internal links.
      */
-    readonly href: _angular_core.InputSignal<string>;
+    readonly href: _angular_core.InputSignal<string | undefined>;
+    /**
+     * The internal router link of the navigation link, which will be used as the link target. Use {@link href} for external links.
+     */
+    readonly routerLink: _angular_core.InputSignal<string | undefined>;
+    protected readonly resolvedLink: _angular_core.Signal<string>;
+    protected readonly externalLink: _angular_core.Signal<boolean>;
     /**
      * 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 }.
      */
@@ -187,7 +168,7 @@ declare class DfTopNavNavigationLink extends DfTopNavNavigationElement {
      */
     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>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfTopNavNavigationLink, "df-topnav-navigation-link", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "routerLinkActiveOptions": { "alias": "routerLinkActiveOptions"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -202,9 +183,9 @@ declare class DfTopNavNavigationItem extends DfTopNavNavigationElement {
      */
     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.
+     * The routerLink of the navigation item, which will be used as the link target. It should be an internal route.
      */
-    readonly href: _angular_core.InputSignal<string>;
+    readonly routerLink: _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[]>;
@@ -216,12 +197,19 @@ declare class DfTopNavNavigationItem extends DfTopNavNavigationElement {
      */
     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>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DfTopNavNavigationItem, "df-topnav-navigation-item", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": true; "isSignal": true; }; }, {}, ["childElements", "deepChildLinks"], never, true, never>;
 }
 
 /**
- * @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 {
 }
@@ -255,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 {
@@ -284,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>;
 }
@@ -318,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>;
 }
@@ -343,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 {
@@ -362,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 {
@@ -378,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>;
@@ -387,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>;
 }
@@ -415,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>;
 }
@@ -424,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 {
@@ -432,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 };

package/drawer/README.md

@@ -1,54 +0,0 @@
-# Drawer
-
-## API
-
-```html
-<df-drawer
-  [className]="''"
-  [bodyScroll]="false"
-  [backdrop]="true"
-  [container]="null"
-  [(size)]="300"
-  [resizable]="false"
-  [visible]="false"
-  [keepInDom]="false"
-  [configuration]="'overlay'"
-  [position]="'inline-start'"
-  [focusOnInit]="true"
-  (sizeChange)="onSizeChange($event)"
-  (visibleChange)="onVisibleChange($event)"
-  (minimizedChange)="onMinimizedChange($event)"
-  (maximizedChange)="onMaximizedChange($event)"
-  (resizingChange)="onResizingChange($event)"
-  (minSize)="onMinSize()"
-  (maxSize)="onMaxSize()"
->
-  Drawer content
-
-  <ng-template dfDrawerHeader>Header content</ng-template>
-  <ng-template dfDrawerBody>Body content</ng-template>
-  <ng-template dfDrawerFooter>Footer content</ng-template>
-</df-drawer>
-```
-
-```ts
-// types
-type DfDrawerPosition = 'inline-start' | 'inline-end' | 'block-start' | 'block-end';
-type DfDrawerConfiguration = 'overlay' | 'inline';
-
-// programmatic API
-await this.drawer.open(); // Promise<void>
-await this.drawer.close(); // Promise<void>
-```
-
-## ADR
-
--
-
-## Notes
-
-- Header, body, and footer sections are opt-in via `ng-template[dfDrawerHeader]`, `ng-template[dfDrawerBody]`, and `ng-template[dfDrawerFooter]`. When none are provided, `<ng-content>` is used directly.
-- By default the drawer and backdrop are portalled to `document.body`. Override this with the `container` input.
-- `configuration="inline"` keeps the drawer in the document flow; the surrounding content is pushed rather than overlaid.
-- `keepInDom` preserves the drawer's DOM subtree (and component state) while it is hidden, at the cost of keeping it rendered.
-- `size` is a two-way binding; it updates when the user drags the splitter handle (requires `resizable="true"`).