@spicainternational/ngx-sds-components 9.1.1 → 9.2.0

package/types/spicainternational-ngx-sds-components-src-lib-navigation.d.ts

@@ -1,7 +1,9 @@
 import * as _angular_core from '@angular/core';
-import { Signal, OnInit, OnDestroy, OnChanges, QueryList, SimpleChanges, EventEmitter, PipeTransform } from '@angular/core';
+import { Signal, QueryList, OnInit, OnChanges, EventEmitter, SimpleChanges, PipeTransform } from '@angular/core';
 import * as _fortawesome_fontawesome_common_types from '@fortawesome/fontawesome-common-types';
-import { Router } from '@angular/router';
+import { ConnectedPosition } from '@angular/cdk/overlay';
+import { UrlTree } from '@angular/router';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { ProductModel } from '@spicainternational/ngx-sds-components/src/lib/app-switcher';
 
 interface CollapsibleNavigationEntity {
@@ -38,9 +40,8 @@ declare class SdsNavigationRouteLinkComponent implements CollapsibleNavigationEn
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsNavigationRouteLinkComponent, "sds-navigation-route-link", never, { "link": { "alias": "link"; "required": false; "isSignal": true; }; "nestedLinks": { "alias": "nestedLinks"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "activeRoutePattern": { "alias": "activeRoutePattern"; "required": false; "isSignal": true; }; "additionalInfo": { "alias": "additionalInfo"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "isCollapsed": { "alias": "isCollapsed"; "required": false; "isSignal": true; }; "ignoreQueryParamsInActiveRoute": { "alias": "ignoreQueryParamsInActiveRoute"; "required": false; "isSignal": true; }; }, { "isCollapsed": "isCollapsedChange"; }, never, ["[navigationIcon]"], true, never>;
 }
 
-declare class SdsNavigationGroupComponent implements OnInit, OnDestroy, CollapsibleNavigationEntity, OnChanges {
+declare class SdsNavigationGroupComponent implements CollapsibleNavigationEntity {
     #private;
-    private _router;
     /**
      @deprecated Use `activeRoutePattern` instead.
      * List of paths allowed/expected within this module.
@@ -48,16 +49,13 @@ declare class SdsNavigationGroupComponent implements OnInit, OnDestroy, Collapsi
      * elements, but through links in other parts of the application (e.g. link
      * on form)
      */
-    private _navigationGroupNestedRoutes;
-    /** @deprecated Use `activeRoutePattern` instead. */
-    set navigationGroupNestedRoutes(value: string[]);
-    get navigationGroupNestedRoutes(): string[];
+    navigationGroupNestedRoutes: _angular_core.InputSignal<string[]>;
     text: string;
     icon: string;
-    defaultRouterLink: string;
+    defaultRouterLink: _angular_core.InputSignal<string>;
     reverse: boolean;
     /** @deprecated Use `activeRoutePattern` instead. */
-    ignoreQueryParamsInActiveRoute: boolean;
+    ignoreQueryParamsInActiveRoute: _angular_core.InputSignal<boolean>;
     disabled: boolean;
     showPopover: boolean;
     showPopoverHeader: boolean;
@@ -76,27 +74,18 @@ declare class SdsNavigationGroupComponent implements OnInit, OnDestroy, Collapsi
     isPopoverVisible: _angular_core.WritableSignal<boolean>;
     faAngleUpRegular: _fortawesome_fontawesome_common_types.IconDefinition;
     faAngleDownRegular: _fortawesome_fontawesome_common_types.IconDefinition;
-    /**
-     * Current app URL (e.g. ['layout-showcase', 'default'])
-     */
-    currentUrl: string[];
-    private _unsubscribe;
-    isGroupActive: boolean;
+    isGroupActive: _angular_core.Signal<boolean>;
     protected isActiveGroupClosed: boolean;
-    constructor(_router: Router);
     isCollapsed: _angular_core.ModelSignal<boolean>;
     protected lastPointerType: _angular_core.WritableSignal<string>;
     protected isTouchPointerType: _angular_core.Signal<boolean>;
-    ngOnInit(): void;
-    ngOnChanges(changes: SimpleChanges): void;
-    ngOnDestroy(): void;
     onMouseEnter(): void;
     onMouseLeave(): void;
     onClick(): void;
     onHiding(e: any): void;
     rememberPointer(e: PointerEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsNavigationGroupComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsNavigationGroupComponent, "sds-navigation-group", never, { "navigationGroupNestedRoutes": { "alias": "navigationGroupNestedRoutes"; "required": false; }; "text": { "alias": "text"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "defaultRouterLink": { "alias": "defaultRouterLink"; "required": false; }; "reverse": { "alias": "reverse"; "required": false; }; "ignoreQueryParamsInActiveRoute": { "alias": "ignoreQueryParamsInActiveRoute"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "showPopover": { "alias": "showPopover"; "required": false; }; "showPopoverHeader": { "alias": "showPopoverHeader"; "required": false; }; "lightStyle": { "alias": "lightStyle"; "required": false; "isSignal": true; }; "activeRoutePattern": { "alias": "activeRoutePattern"; "required": false; "isSignal": true; }; "additionalInfo": { "alias": "additionalInfo"; "required": false; "isSignal": true; }; "isCollapsed": { "alias": "isCollapsed"; "required": false; "isSignal": true; }; }, { "isCollapsed": "isCollapsedChange"; }, ["routerLinkComponents"], ["[navigationIcon]", "*", "[popoverContent]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsNavigationGroupComponent, "sds-navigation-group", never, { "navigationGroupNestedRoutes": { "alias": "navigationGroupNestedRoutes"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "defaultRouterLink": { "alias": "defaultRouterLink"; "required": false; "isSignal": true; }; "reverse": { "alias": "reverse"; "required": false; }; "ignoreQueryParamsInActiveRoute": { "alias": "ignoreQueryParamsInActiveRoute"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; }; "showPopover": { "alias": "showPopover"; "required": false; }; "showPopoverHeader": { "alias": "showPopoverHeader"; "required": false; }; "lightStyle": { "alias": "lightStyle"; "required": false; "isSignal": true; }; "activeRoutePattern": { "alias": "activeRoutePattern"; "required": false; "isSignal": true; }; "additionalInfo": { "alias": "additionalInfo"; "required": false; "isSignal": true; }; "isCollapsed": { "alias": "isCollapsed"; "required": false; "isSignal": true; }; }, { "isCollapsed": "isCollapsedChange"; }, ["routerLinkComponents"], ["[navigationIcon]", "*", "[popoverContent]"], true, never>;
 }
 
 declare class SdsNavigationSeparatorComponent implements OnInit, CollapsibleNavigationEntity {
@@ -172,6 +161,110 @@ declare class SdsNavigationUserProfileComponent implements OnInit, OnChanges, Co
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsNavigationUserProfileComponent, "sds-navigation-user-profile", never, { "profile": { "alias": "profile"; "required": false; }; "profileInfo": { "alias": "profileInfo"; "required": false; }; "showSignOut": { "alias": "showSignOut"; "required": false; }; "showProfile": { "alias": "showProfile"; "required": false; }; "signOutText": { "alias": "signOutText"; "required": false; }; "profileText": { "alias": "profileText"; "required": false; }; "showNotificationBadge": { "alias": "showNotificationBadge"; "required": false; }; "newNotificationsText": { "alias": "newNotificationsText"; "required": false; }; "showOptions": { "alias": "showOptions"; "required": false; }; "isCollapsed": { "alias": "isCollapsed"; "required": false; "isSignal": true; }; "sideBarInstanceName": { "alias": "sideBarInstanceName"; "required": false; "isSignal": true; }; }, { "profileClick": "profileClick"; "signOutClick": "signOutClick"; "notificationBadgeClick": "notificationBadgeClick"; "showOptionsChange": "showOptionsChange"; "isCollapsed": "isCollapsedChange"; }, never, ["*"], true, never>;
 }
 
+/**
+ * Color scheme and default icon of the callout:
+ * - `info` - base color `--bs-primary`, icon `faCircleInfo`
+ * - `warning` - base color `--bs-orange`, icon `faTriangleExclamation`
+ * - `danger` - base color `--bs-pink`, icon `faCircleExclamation`
+ */
+type SdsNavigationCalloutVariant = 'info' | 'warning' | 'danger';
+/**
+ * Behaviour of the callout when the navigation is collapsed:
+ * - `hide` - the callout is not rendered at all
+ * - `icon` - only the icon is rendered; clicking it opens a popup with the full callout
+ */
+type SdsNavigationCalloutCollapsedMode = 'hide' | 'icon';
+/**
+ * Generic sidebar message: icon + title + description + an optional action. Carries no
+ * knowledge of what it's displaying (trial status, payment issues, announcements, ...) - callers
+ * pass in already-resolved text.
+ *
+ * The action is either a button (handle `actionClicked`) or, when `actionLink` is set, a router
+ * link that navigates on its own. When the navigation is collapsed the callout is either hidden
+ * or shown as an icon that opens the full callout in a popup (see `collapsedMode`).
+ *
+ * Colors are CSS custom properties derived from the base color `--sds-navigation-callout-color`
+ * (set by `variant`); override the base or any of the derived ones:
+ * `--sds-navigation-callout-bg`, `-border`, `-title` (also the icon), `-description`, `-action`.
+ *
+ * @example
+ * <!-- Action button -->
+ * <sds-navigation-callout
+ *     variant="warning"
+ *     title="Trial ends today"
+ *     description="Choose a plan to keep using the app."
+ *     actionText="Upgrade to paid"
+ *     (actionClicked)="openUpgradeDialog()">
+ * </sds-navigation-callout>
+ *
+ * <!-- Redirect -->
+ * <sds-navigation-callout
+ *     variant="danger"
+ *     title="Payment failed"
+ *     description="Pay the invoice to keep your subscription."
+ *     actionText="Go to billing page"
+ *     actionLink="/billing">
+ * </sds-navigation-callout>
+ */
+declare class SdsNavigationCalloutComponent implements CollapsibleNavigationEntity {
+    /**
+     * Required. Color scheme and default icon:
+     * `info` (`--bs-primary`), `warning` (`--bs-orange`) or `danger` (`--bs-pink`).
+     */
+    variant: _angular_core.InputSignal<SdsNavigationCalloutVariant>;
+    /**
+     * Font Awesome icon shown next to the title (and as the collapsed icon).
+     * Falls back to the default icon of the `variant` when not provided.
+     * @default null
+     */
+    icon: _angular_core.InputSignal<IconProp | null>;
+    /** Required. Title shown next to the icon. Displayed as given - pass already translated text. */
+    title: _angular_core.InputSignal<string>;
+    /** Required. Text shown below the title. Displayed as given - pass already translated text. */
+    description: _angular_core.InputSignal<string>;
+    /**
+     * Text of the action. The action is shown only when this is not empty.
+     * @default ''
+     */
+    actionText: _angular_core.InputSignal<string>;
+    /**
+     * Route of the action - accepts the same values as `routerLink` (string, commands array or `UrlTree`).
+     * When set the action is rendered as a link that navigates to the route, otherwise as a button.
+     * Ignored when `actionText` is empty.
+     * @default null
+     */
+    actionLink: _angular_core.InputSignal<string | readonly any[] | UrlTree | null>;
+    /**
+     * Behaviour when the navigation is collapsed:
+     * `icon` shows only the icon, which opens the full callout in a popup; `hide` hides the callout.
+     * @default 'icon'
+     */
+    collapsedMode: _angular_core.InputSignal<SdsNavigationCalloutCollapsedMode>;
+    /**
+     * Collapsed state of the navigation. Set automatically by `sds-navigation-container` -
+     * bind it only when the callout is used outside of a container.
+     * @default false
+     */
+    isCollapsed: _angular_core.ModelSignal<boolean>;
+    /**
+     * Emitted when the action is clicked, for both buttons and links. For a link it is only a
+     * notification - the router navigates on its own. The popup (collapsed mode) is closed first.
+     */
+    actionClicked: _angular_core.OutputEmitterRef<void>;
+    protected resolvedIcon: _angular_core.Signal<IconProp>;
+    protected isHidden: _angular_core.Signal<boolean>;
+    protected isIconOnly: _angular_core.Signal<boolean>;
+    protected isPopupOpen: _angular_core.WritableSignal<boolean>;
+    protected popupPositions: ConnectedPosition[];
+    constructor();
+    protected togglePopup(): void;
+    protected onPopupOutsideClick(event: MouseEvent, origin: HTMLElement): void;
+    protected onPopupKeydown(event: KeyboardEvent): void;
+    protected onActionClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsNavigationCalloutComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsNavigationCalloutComponent, "sds-navigation-callout", never, { "variant": { "alias": "variant"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": true; "isSignal": true; }; "actionText": { "alias": "actionText"; "required": false; "isSignal": true; }; "actionLink": { "alias": "actionLink"; "required": false; "isSignal": true; }; "collapsedMode": { "alias": "collapsedMode"; "required": false; "isSignal": true; }; "isCollapsed": { "alias": "isCollapsed"; "required": false; "isSignal": true; }; }, { "isCollapsed": "isCollapsedChange"; "actionClicked": "actionClicked"; }, never, never, true, never>;
+}
+
 declare class SdsNavigationContainerComponent implements OnInit, CollapsibleNavigationEntity {
     isCollapsed: _angular_core.ModelSignal<boolean>;
     groupComponentChildren: _angular_core.Signal<readonly SdsNavigationGroupComponent[]>;
@@ -181,10 +274,11 @@ declare class SdsNavigationContainerComponent implements OnInit, CollapsibleNavi
     externalLinkComponentChildren: _angular_core.Signal<readonly SdsNavigationExternalLinkComponent[]>;
     userProfileComponentChildren: _angular_core.Signal<readonly SdsNavigationUserProfileComponent[]>;
     collapsibleFrameComponentChildren: _angular_core.Signal<readonly SdsNavigationCollapsibleFrameComponent[]>;
+    calloutComponentChildren: _angular_core.Signal<readonly SdsNavigationCalloutComponent[]>;
     constructor();
     ngOnInit(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsNavigationContainerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsNavigationContainerComponent, "sds-navigation-container", never, { "isCollapsed": { "alias": "isCollapsed"; "required": false; "isSignal": true; }; }, { "isCollapsed": "isCollapsedChange"; }, ["groupComponentChildren", "routeLinkComponentChildren", "separatorComponentChildren", "headerComponentChildren", "externalLinkComponentChildren", "userProfileComponentChildren", "collapsibleFrameComponentChildren"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsNavigationContainerComponent, "sds-navigation-container", never, { "isCollapsed": { "alias": "isCollapsed"; "required": false; "isSignal": true; }; }, { "isCollapsed": "isCollapsedChange"; }, ["groupComponentChildren", "routeLinkComponentChildren", "separatorComponentChildren", "headerComponentChildren", "externalLinkComponentChildren", "userProfileComponentChildren", "collapsibleFrameComponentChildren", "calloutComponentChildren"], ["*"], true, never>;
 }
 
 type UserProfileSelectorContent = 'profileList' | 'selectDefaultProfile';
@@ -252,5 +346,21 @@ declare class SdsActiveRoutePatternPipe implements PipeTransform {
     static ɵpipe: _angular_core.ɵɵPipeDeclaration<SdsActiveRoutePatternPipe, "sdsActiveRoutePattern", true>;
 }
 
-export { SdsActiveRoutePatternPipe, SdsNavigationCollapsibleFrameComponent, SdsNavigationContainerComponent, SdsNavigationExternalLinkComponent, SdsNavigationGroupComponent, SdsNavigationHeaderComponent, SdsNavigationRouteLinkComponent, SdsNavigationSeparatorComponent, SdsNavigationUserProfileComponent, SdsProductHomeComponent, SdsUserProfileSelectorComponent };
-export type { NavigationProfile, UserProfileSelectorContent };
+interface RouteActiveOptions {
+    /** Pattern tested against the full URL. Has priority over the legacy options below. */
+    activeRoutePattern?: RegExp | string | null;
+    /** @deprecated Use `activeRoutePattern` instead. */
+    nestedRoutes?: string[];
+    defaultLink?: string;
+    /** @deprecated Use `activeRoutePattern` instead. */
+    ignoreQueryParams?: boolean;
+}
+/**
+ * Determines if the provided URL (e.g. router.url) is active for a navigation entity.
+ * If `activeRoutePattern` is provided, it is tested against the full URL.
+ * Otherwise the legacy matching (default link + nested routes) is used.
+ */
+declare function isRouteActive(url: string, options: RouteActiveOptions): boolean;
+
+export { SdsActiveRoutePatternPipe, SdsNavigationCalloutComponent, SdsNavigationCollapsibleFrameComponent, SdsNavigationContainerComponent, SdsNavigationExternalLinkComponent, SdsNavigationGroupComponent, SdsNavigationHeaderComponent, SdsNavigationRouteLinkComponent, SdsNavigationSeparatorComponent, SdsNavigationUserProfileComponent, SdsProductHomeComponent, SdsUserProfileSelectorComponent, isRouteActive };
+export type { NavigationProfile, RouteActiveOptions, SdsNavigationCalloutCollapsedMode, SdsNavigationCalloutVariant, UserProfileSelectorContent };