@a.nemreen/dga-ui 0.3.1 → 0.3.3

package/types/a.nemreen-dga-ui-header.d.ts

@@ -0,0 +1,427 @@
+import * as _angular_core from '@angular/core';
+import { DgaIconName, DgaBadgeVariant } from '@a.nemreen/dga-ui';
+
+type DgaHeaderAppearance = 'default' | 'portal';
+/**
+ * Mobile / narrow navigation chrome (portal header, `md` and below):
+ * - `sheet` - side drawer from the inline-end (burger) edge
+ * - `fullscreen` - full-viewport overlay panel
+ * - `push` - panel expands under the header bar (inline dropdown)
+ */
+type DgaMobileNavMode = 'sheet' | 'fullscreen' | 'push';
+/** Panel chrome: compact under trigger, full-bleed mega, or mega + featured lead. */
+type DgaNavDropdownVariant = 'menu' | 'mega' | 'featured';
+/** How links are arranged inside the panel. */
+type DgaNavDropdownLayout = 'list' | 'columns' | 'rows';
+interface DgaNavLink {
+    label: string;
+    href?: string;
+    description?: string;
+    current?: boolean;
+}
+interface DgaNavColumn {
+    title?: string;
+    links: DgaNavLink[];
+}
+/** Lead / promo block for `variant: 'featured'`. */
+interface DgaNavFeatured {
+    title: string;
+    description?: string;
+    href?: string;
+    cta?: string;
+    imageUrl?: string;
+}
+interface DgaNavDropdown {
+    /**
+     * Panel width/placement:
+     * - `menu` - compact panel anchored under the trigger (default for simple lists)
+     * - `mega` - full-width under the header
+     * - `featured` - full-width mega with a lead promo column
+     */
+    variant?: DgaNavDropdownVariant;
+    /** Inner arrangement: `list` | `columns` | `rows`. */
+    layout?: DgaNavDropdownLayout;
+    columns?: DgaNavColumn[];
+    links?: DgaNavLink[];
+    featured?: DgaNavFeatured;
+}
+interface DgaNavItem {
+    label: string;
+    href?: string;
+    current?: boolean;
+    dropdown?: DgaNavDropdown;
+}
+interface DgaHeaderAction {
+    id: string;
+    label: string;
+    icon?: DgaIconName;
+    href?: string;
+    badge?: number;
+    iconOnly?: boolean;
+}
+/** Suggestion chip shown under the header search field. */
+interface DgaHeaderSearchSuggestion {
+    label: string;
+    /** Value written into the query (defaults to `label`). */
+    value?: string;
+    icon?: DgaIconName;
+}
+/**
+ * Built-in header search popup (opens from the action whose `id` matches `actionId`).
+ * Pass this to `[search]` to enable the modal search experience.
+ */
+interface DgaHeaderSearchConfig {
+    /** Action id that toggles the panel. Default: `'search'`. */
+    actionId?: string;
+    /** Modal title. Default: `'Search'`. */
+    title?: string;
+    description?: string;
+    closeLabel?: string;
+    placeholder?: string;
+    submitLabel?: string;
+    suggestionsLabel?: string;
+    clearLabel?: string;
+    voiceLabel?: string;
+    /** Show microphone control (uses Web Speech API when available). Default: true. */
+    voice?: boolean;
+    suggestions?: DgaHeaderSearchSuggestion[];
+    /**
+     * Optional results URL. On submit, navigates to
+     * `{resultsHref}?{queryParam}={query}` when set.
+     */
+    resultsHref?: string;
+    /** Query string key. Default: `'q'`. */
+    queryParam?: string;
+}
+type DgaHeaderNotificationTone = DgaBadgeVariant;
+/** Single item in the header notifications panel. */
+interface DgaHeaderNotification {
+    id: string;
+    title: string;
+    message: string;
+    statusLabel?: string;
+    tone?: DgaHeaderNotificationTone;
+    icon?: DgaIconName;
+    href?: string;
+    read?: boolean;
+}
+/**
+ * Built-in notifications dropdown for the action whose `id` matches `actionId`
+ * (default `'notifications'`).
+ */
+interface DgaHeaderNotificationsConfig {
+    actionId?: string;
+    /** Panel heading. Default: `'Notifications'`. */
+    title?: string;
+    emptyLabel?: string;
+    viewAllLabel?: string;
+    viewAllHref?: string;
+    markReadLabel?: string;
+    markAllReadLabel?: string;
+    viewLabel?: string;
+    dismissLabel?: string;
+    closeLabel?: string;
+    items?: DgaHeaderNotification[];
+}
+type DgaHeaderNotificationAction = 'read' | 'view' | 'dismiss' | 'select';
+/** Link row inside the login panel footer. */
+interface DgaHeaderLoginLink {
+    id?: string;
+    label: string;
+    href?: string;
+}
+/** Guest login form opened from the login action. */
+interface DgaHeaderLoginConfig {
+    actionId?: string;
+    title?: string;
+    description?: string;
+    emailLabel?: string;
+    emailPlaceholder?: string;
+    emailHint?: string;
+    passwordLabel?: string;
+    passwordPlaceholder?: string;
+    passwordHint?: string;
+    submitLabel?: string;
+    cancelLabel?: string;
+    closeLabel?: string;
+    forgotPasswordLabel?: string;
+    forgotPasswordHref?: string;
+    showPasswordLabel?: string;
+    hidePasswordLabel?: string;
+    /** Panel width CSS value. Default: `'24rem'`. */
+    panelWidth?: string;
+    /** Max inner scroll height. Default: `'44rem'`. */
+    maxHeight?: string;
+    /** Register prompt (e.g. "Don't have an account?"). */
+    registerPrompt?: string;
+    registerLabel?: string;
+    registerHref?: string;
+    /** Extra links below actions (help, SSO, etc.). */
+    footerLinks?: DgaHeaderLoginLink[];
+    /** Submit button label while loading. Default: `'…'`. */
+    submittingLabel?: string;
+    /** Form-level error shown above action buttons. */
+    errorMessage?: string;
+    emailRequiredMessage?: string;
+    emailInvalidMessage?: string;
+    passwordRequiredMessage?: string;
+    /** Show cancel button. Default: `true`. */
+    showCancel?: boolean;
+}
+/** Projected content after the login title, before fields. */
+declare class DgaHeaderLoginBeforeForm {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DgaHeaderLoginBeforeForm, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DgaHeaderLoginBeforeForm, "[dgaHeaderLoginBeforeForm]", never, {}, {}, never, never, true, never>;
+}
+/** Projected content between fields and action buttons. */
+declare class DgaHeaderLoginAfterFields {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DgaHeaderLoginAfterFields, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DgaHeaderLoginAfterFields, "[dgaHeaderLoginAfterFields]", never, {}, {}, never, never, true, never>;
+}
+/** Projected footer; overrides config register/footer links when present. */
+declare class DgaHeaderLoginFooter {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DgaHeaderLoginFooter, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DgaHeaderLoginFooter, "[dgaHeaderLoginFooter]", never, {}, {}, never, never, true, never>;
+}
+/** Replaces the built-in email/password form; panel chrome remains. */
+declare class DgaHeaderLoginForm {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DgaHeaderLoginForm, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DgaHeaderLoginForm, "[dgaHeaderLoginForm]", never, {}, {}, never, never, true, never>;
+}
+interface DgaHeaderUserMenuLink {
+    id: string;
+    label: string;
+    href?: string;
+    icon?: DgaIconName;
+    danger?: boolean;
+}
+/** Authenticated user menu shown after login (same action id as login). */
+interface DgaHeaderUserConfig {
+    name: string;
+    role?: string;
+    email?: string;
+    avatarSrc?: string;
+    links?: DgaHeaderUserMenuLink[];
+}
+declare class DgaHeader {
+    private readonly host;
+    private readonly baseHref;
+    private closeTimer;
+    private dropdownSyncFrame;
+    private lastDropdownStyleKey;
+    readonly collapseId = "dga-nav-collapse";
+    readonly dropLink: string;
+    readonly dropTile: string;
+    readonly mobileLink: string;
+    readonly brand: _angular_core.InputSignal<string>;
+    readonly brandSlogan: _angular_core.InputSignal<string>;
+    readonly brandLogo: _angular_core.InputSignal<string>;
+    readonly brandLogoAlt: _angular_core.InputSignal<string>;
+    /** When true and no `brandLogo`, portal headers show a home-icon placeholder beside the brand text. */
+    readonly brandPlaceholder: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly brandHref: _angular_core.InputSignal<string>;
+    readonly navLabel: _angular_core.InputSignal<string>;
+    readonly menuToggleLabel: _angular_core.InputSignal<string>;
+    readonly menuCloseLabel: _angular_core.InputSignal<string>;
+    readonly appearance: _angular_core.InputSignal<DgaHeaderAppearance>;
+    /**
+     * Portal mobile navigation layout. Ignored for `appearance="default"`.
+     * - `sheet` - side drawer (narrow, page peeks beside)
+     * - `fullscreen` - covers the whole screen with its own close control
+     * - `push` - accordion panel under the header
+     */
+    readonly mobileNav: _angular_core.InputSignal<DgaMobileNavMode>;
+    readonly sticky: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly items: _angular_core.InputSignal<DgaNavItem[]>;
+    readonly actions: _angular_core.InputSignal<DgaHeaderAction[]>;
+    /**
+     * When set, the header action matching `search.actionId` (default `'search'`)
+     * opens a full-width search panel with suggestions instead of a no-op click.
+     */
+    readonly search: _angular_core.InputSignal<DgaHeaderSearchConfig | null>;
+    /** Bound query for the header search panel. */
+    readonly searchQuery: _angular_core.ModelSignal<string>;
+    /**
+     * When set, the header action matching `notifications.actionId`
+     * (default `'notifications'`) opens the notifications dropdown.
+     */
+    readonly notifications: _angular_core.InputSignal<DgaHeaderNotificationsConfig | null>;
+    /**
+     * Guest login panel config. Opens from the action matching `login.actionId`
+     * (default `'login'`). After auth, the same action opens the user menu.
+     */
+    readonly login: _angular_core.InputSignal<DgaHeaderLoginConfig | null>;
+    /** Authenticated user profile shown in the account menu. */
+    readonly user: _angular_core.InputSignal<DgaHeaderUserConfig | null>;
+    /** Whether the user is signed in (two-way). */
+    readonly authenticated: _angular_core.ModelSignal<boolean>;
+    /** Login submit loading state (two-way). Parent clears after API response. */
+    readonly loginSubmitting: _angular_core.ModelSignal<boolean>;
+    /** Form-level login error (two-way). Cleared when the panel closes. */
+    readonly loginError: _angular_core.ModelSignal<string>;
+    readonly actionClick: _angular_core.OutputEmitterRef<DgaHeaderAction>;
+    readonly searchSubmit: _angular_core.OutputEmitterRef<string>;
+    readonly searchSuggestionSelect: _angular_core.OutputEmitterRef<DgaHeaderSearchSuggestion>;
+    readonly searchVoice: _angular_core.OutputEmitterRef<void>;
+    readonly notificationAction: _angular_core.OutputEmitterRef<{
+        item: DgaHeaderNotification;
+        action: DgaHeaderNotificationAction;
+    }>;
+    readonly loginSubmit: _angular_core.OutputEmitterRef<{
+        email: string;
+        password: string;
+    }>;
+    readonly logout: _angular_core.OutputEmitterRef<void>;
+    readonly userLinkClick: _angular_core.OutputEmitterRef<DgaHeaderUserMenuLink>;
+    /** Emits on click of any top-level nav link or dropdown link (desktop + mobile). */
+    readonly navLinkClick: _angular_core.OutputEmitterRef<DgaNavLink | DgaNavItem>;
+    readonly mobileOpen: _angular_core.WritableSignal<boolean>;
+    readonly openDropdown: _angular_core.WritableSignal<number | null>;
+    readonly searchOpen: _angular_core.WritableSignal<boolean>;
+    readonly notificationsOpen: _angular_core.WritableSignal<boolean>;
+    readonly loginOpen: _angular_core.WritableSignal<boolean>;
+    readonly userMenuOpen: _angular_core.WritableSignal<boolean>;
+    readonly voiceListening: _angular_core.WritableSignal<boolean>;
+    readonly expandedNotificationId: _angular_core.WritableSignal<string | null>;
+    readonly loginEmail: _angular_core.WritableSignal<string>;
+    readonly loginPassword: _angular_core.WritableSignal<string>;
+    readonly showLoginPassword: _angular_core.WritableSignal<boolean>;
+    readonly loginEmailError: _angular_core.WritableSignal<string>;
+    readonly loginPasswordError: _angular_core.WritableSignal<string>;
+    /** Fixed coords for notifications / login / user panels (anchored to trigger). */
+    readonly dropdownPanelStyle: _angular_core.WritableSignal<Record<string, string>>;
+    private readonly customLoginForm;
+    private readonly customLoginFooter;
+    private readonly dismissedNotificationIds;
+    private readonly readNotificationIds;
+    private dropdownTrigger;
+    private dropdownActionId;
+    private readonly injector;
+    private readonly doc;
+    private readonly destroyRef;
+    private readonly searchInputRef;
+    private readonly utilLayerRef;
+    readonly searchPanelId = "dga-header-search-panel";
+    readonly notificationsPanelId = "dga-header-notifications-panel";
+    readonly loginPanelId = "dga-header-login-panel";
+    readonly userPanelId = "dga-header-user-panel";
+    readonly isPortal: _angular_core.Signal<boolean>;
+    /** Resolve root-relative hrefs against the app base (`/dga/` on cPanel). */
+    appHref(href: string | undefined | null): string;
+    readonly searchConfig: _angular_core.Signal<DgaHeaderSearchConfig | null>;
+    readonly searchActionId: _angular_core.Signal<string>;
+    readonly notificationsConfig: _angular_core.Signal<DgaHeaderNotificationsConfig | null>;
+    readonly notificationsActionId: _angular_core.Signal<string>;
+    readonly loginConfig: _angular_core.Signal<DgaHeaderLoginConfig | null>;
+    readonly loginActionId: _angular_core.Signal<string>;
+    readonly userConfig: _angular_core.Signal<DgaHeaderUserConfig | null>;
+    readonly hasCustomLoginForm: _angular_core.Signal<boolean>;
+    readonly hasCustomLoginFooter: _angular_core.Signal<boolean>;
+    readonly utilityOverlayOpen: _angular_core.Signal<boolean>;
+    readonly visibleNotifications: _angular_core.Signal<{
+        read: boolean;
+        id: string;
+        title: string;
+        message: string;
+        statusLabel?: string;
+        tone?: DgaHeaderNotificationTone;
+        icon?: DgaIconName;
+        href?: string;
+    }[]>;
+    readonly unreadNotificationCount: _angular_core.Signal<number>;
+    constructor();
+    private portalUtilLayer;
+    private removePortaledUtilLayer;
+    /** Compact under-trigger menus are rendered inside the `<li>` (desktop only). */
+    readonly activeWideDropdown: _angular_core.Signal<{
+        index: number;
+        item: DgaNavItem;
+        variant: "mega" | "featured";
+    } | null>;
+    readonly hostClasses: _angular_core.Signal<string>;
+    readonly innerClasses: _angular_core.Signal<string>;
+    readonly desktopNavClasses: _angular_core.Signal<string>;
+    readonly actionsClasses: _angular_core.Signal<string>;
+    mobilePanelClass(): string;
+    hoverMenus(): boolean;
+    isMobileViewport(): boolean;
+    resolveVariant(item: DgaNavItem): DgaNavDropdownVariant;
+    resolveLayout(item: DgaNavItem): DgaNavDropdownLayout;
+    colCount(item: DgaNavItem): number;
+    flatLinks(item: DgaNavItem): DgaNavLink[];
+    columnsGridClass(count: number): string;
+    featuredGridClass(variant: DgaNavDropdownVariant, hasFeatured: boolean): string;
+    navItemClass(current: boolean, open?: boolean): string;
+    mobileItemClass(current: boolean, open?: boolean): string;
+    indicatorClass(active: boolean): string;
+    actionClass(_action: DgaHeaderAction): string;
+    badgeClass(): string;
+    isIconOnly(action: DgaHeaderAction): boolean;
+    isSearchAction(action: DgaHeaderAction): boolean;
+    isNotificationsAction(action: DgaHeaderAction): boolean;
+    isLoginAction(action: DgaHeaderAction): boolean;
+    actionTooltip(action: DgaHeaderAction): string;
+    actionAriaLabel(action: DgaHeaderAction): string;
+    actionExpanded(action: DgaHeaderAction): boolean | null;
+    actionControls(action: DgaHeaderAction): string | null;
+    actionIndicatorActive(action: DgaHeaderAction): boolean;
+    private clearCloseTimer;
+    private scheduleClose;
+    private setBodyScrollLocked;
+    private unlockBodyIfIdle;
+    onItemEnter(i: number): void;
+    onPanelEnter(): void;
+    onHostLeave(event: MouseEvent): void;
+    toggleMobile(): void;
+    toggleDropdown(i: number, event: Event): void;
+    closeAll(): void;
+    onAction(action: DgaHeaderAction, event?: Event): void;
+    onMobileAction(action: DgaHeaderAction, event?: Event): void;
+    closeUtilityOverlays(): void;
+    /** Ask demo portal font/brand menus to close so they don't stack over header panels. */
+    private closePortalChromeMenus;
+    onCloseHeaderOverlays(): void;
+    toggleSearch(): void;
+    onSearchModalOpenChange(open: boolean): void;
+    focusSearchInput(): void;
+    closeSearch(clearVoice?: boolean): void;
+    toggleNotifications(trigger?: HTMLElement | null): void;
+    closeNotifications(): void;
+    toggleLogin(trigger?: HTMLElement | null): void;
+    closeLogin(): void;
+    toggleUserMenu(trigger?: HTMLElement | null): void;
+    closeUserMenu(): void;
+    onLoginEmailInput(value: string): void;
+    onLoginPasswordInput(value: string): void;
+    showLoginRegisterRow(lcfg: DgaHeaderLoginConfig): boolean;
+    loginPanelOuterStyle(): Record<string, string>;
+    loginPanelInnerStyle(): Record<string, string>;
+    onLoginSubmit(event: Event): void;
+    onUserLink(link: DgaHeaderUserMenuLink): void;
+    toggleNotificationExpand(item: DgaHeaderNotification): void;
+    onNotificationAction(item: DgaHeaderNotification, action: DgaHeaderNotificationAction): void;
+    markAllNotificationsRead(): void;
+    clearSearchQuery(): void;
+    applySearchSuggestion(item: DgaHeaderSearchSuggestion): void;
+    onSearchFormSubmit(event: Event): void;
+    onSearchVoice(): void;
+    private speechRecognition;
+    private stopVoice;
+    private triggerFromEvent;
+    private scheduleDropdownSync;
+    private requestDropdownSync;
+    private clearDropdownAnchor;
+    private findActionTrigger;
+    private activeUtilityPanelWidthPx;
+    private syncDropdownPanel;
+    onKey(event: KeyboardEvent): void;
+    onScroll(): void;
+    onResize(): void;
+    onNavLinkClick(link: DgaNavLink | DgaNavItem, event: MouseEvent): void;
+    onDocClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DgaHeader, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DgaHeader, "dga-header", never, { "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "brandSlogan": { "alias": "brandSlogan"; "required": false; "isSignal": true; }; "brandLogo": { "alias": "brandLogo"; "required": false; "isSignal": true; }; "brandLogoAlt": { "alias": "brandLogoAlt"; "required": false; "isSignal": true; }; "brandPlaceholder": { "alias": "brandPlaceholder"; "required": false; "isSignal": true; }; "brandHref": { "alias": "brandHref"; "required": false; "isSignal": true; }; "navLabel": { "alias": "navLabel"; "required": false; "isSignal": true; }; "menuToggleLabel": { "alias": "menuToggleLabel"; "required": false; "isSignal": true; }; "menuCloseLabel": { "alias": "menuCloseLabel"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "mobileNav": { "alias": "mobileNav"; "required": false; "isSignal": true; }; "sticky": { "alias": "sticky"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "search": { "alias": "search"; "required": false; "isSignal": true; }; "searchQuery": { "alias": "searchQuery"; "required": false; "isSignal": true; }; "notifications": { "alias": "notifications"; "required": false; "isSignal": true; }; "login": { "alias": "login"; "required": false; "isSignal": true; }; "user": { "alias": "user"; "required": false; "isSignal": true; }; "authenticated": { "alias": "authenticated"; "required": false; "isSignal": true; }; "loginSubmitting": { "alias": "loginSubmitting"; "required": false; "isSignal": true; }; "loginError": { "alias": "loginError"; "required": false; "isSignal": true; }; }, { "searchQuery": "searchQueryChange"; "authenticated": "authenticatedChange"; "loginSubmitting": "loginSubmittingChange"; "loginError": "loginErrorChange"; "actionClick": "actionClick"; "searchSubmit": "searchSubmit"; "searchSuggestionSelect": "searchSuggestionSelect"; "searchVoice": "searchVoice"; "notificationAction": "notificationAction"; "loginSubmit": "loginSubmit"; "logout": "logout"; "userLinkClick": "userLinkClick"; "navLinkClick": "navLinkClick"; }, ["customLoginForm", "customLoginFooter"], ["[dgaHeaderBrand]", "*", "[dgaHeaderEnd]", "[dgaHeaderLoginBeforeForm]", "[dgaHeaderLoginForm]", "[dgaHeaderLoginAfterFields]", "[dgaHeaderLoginFooter]"], true, never>;
+}
+
+export { DgaHeader, DgaHeaderLoginAfterFields, DgaHeaderLoginBeforeForm, DgaHeaderLoginFooter, DgaHeaderLoginForm };
+export type { DgaHeaderAction, DgaHeaderAppearance, DgaHeaderLoginConfig, DgaHeaderLoginLink, DgaHeaderNotification, DgaHeaderNotificationAction, DgaHeaderNotificationTone, DgaHeaderNotificationsConfig, DgaHeaderSearchConfig, DgaHeaderSearchSuggestion, DgaHeaderUserConfig, DgaHeaderUserMenuLink, DgaMobileNavMode, DgaNavColumn, DgaNavDropdown, DgaNavDropdownLayout, DgaNavDropdownVariant, DgaNavFeatured, DgaNavItem, DgaNavLink };