@arsedizioni/ars-utils 22.1.2 → 22.1.4

package/types/arsedizioni-ars-utils-ui.d.ts

@@ -8,6 +8,9 @@ import { Observable } from 'rxjs';
 import { MatFormFieldAppearance } from '@angular/material/form-field';
 import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
 import { PasswordStrength } from '@arsedizioni/ars-utils/core';
+import { ConnectedPosition } from '@angular/cdk/overlay';
+import { TooltipPosition } from '@angular/material/tooltip';
+import { ActivatedRoute } from '@angular/router';
 
 interface DialogResult {
     result?: 'ok' | 'cancel' | 'other';
@@ -1292,5 +1295,647 @@ declare class FlexLayoutModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<FlexLayoutModule>;
 }
 
-export { ALIAS_FAMILIES, BS5_BREAKPOINTS, BusyDialogComponent, BusyTimer, CANONICAL_ALIASES, ConfirmDialogComponent, CredentialsDialogComponent, DeleteDialogComponent, DeleteDialogConfirmMode, DialogService, FlexLayoutModule, FxClassDirective, FxFlexAlignDirective, FxFlexDirective, FxFlexFillDirective, FxFlexOffsetDirective, FxFlexOrderDirective, FxGridAreaDirective, FxGridColumnDirective, FxGridDirective, FxLayoutAlignDirective, FxLayoutDirective, FxLayoutGapDirective, FxLayoutWrapDirective, FxShowHideDirective, FxStyleDirective, IfBpDirective, InfoDialogComponent, LAYOUT_BREAKPOINTS, LAYOUT_VALUES, MediaObserver, NON_CANONICAL_PRIORITY, OtpInputComponent, PaginatorIntl, PasswordStrengthComponent, RecoverPasswordDialogComponent, ResetPasswordDialogComponent, ResponsiveBaseDirective, ToastComponent, UIService, applyVisibility, buildAlignStyles, buildFlexStyles, buildLayoutCSS, resolve, resolveAll, resolveFlexInput, resolveNonCanonical, resolveParentFlow, validateBasis, validateLayoutValue, validateWrapValue };
-export type { BpValues, BreakpointAlias, CanonicalKey, ConfirmDialogData, ConfirmDialogOption, CredentialsDialogData, CredentialsDialogResult, DeleteDialogData, DialogOption, DialogResult, IDialogService, InfoDialogData, NcValues, NonCanonicalKey, RecoverPasswordDialogData, RecoverPasswordDialogResult, ResetPasswordDialogData, ResetPasswordDialogMode, ResetPasswordDialogResult, ToastData };
+/**
+ * @file navigation.definitions.ts
+ *
+ * Data model shared by every variant of the Material Design 3 (Expressive)
+ * navigation component: Navigation bar, Navigation rail (collapsed and
+ * expanded) and Navigation drawer (standard and modal).
+ *
+ * Reference: https://m3.material.io/components/navigation-bar/specs
+ *            https://m3.material.io/components/navigation-rail/specs
+ *            https://m3.material.io/components/navigation-drawer/specs
+ */
+
+/**
+ * Rendering variants supported by the component.
+ *
+ * - `bar`            — Navigation bar, horizontal, anchored to the bottom edge (compact windows).
+ * - `rail`           — Collapsed navigation rail, vertical, 96dp wide (medium / expanded windows).
+ * - `rail-expanded`  — Expanded navigation rail, 220dp+, labels beside icons, supports sections.
+ * - `drawer`         — Standard navigation drawer, 360dp, inline with the page content.
+ * - `modal`          — Modal navigation drawer: same as `drawer` but overlaid on a scrim.
+ * - `auto`           — Resolved at runtime from the active CDK breakpoint (see `autoVariants`).
+ */
+type NavigationVariant = 'auto' | 'bar' | 'rail' | 'rail-expanded' | 'drawer' | 'modal';
+/** Variants that can actually be rendered, i.e. every variant except `auto`. */
+type ResolvedNavigationVariant = Exclude<NavigationVariant, 'auto'>;
+/**
+ * Label visibility policy, mirroring the four Material label visibility modes.
+ *
+ * - `auto`       — Labels are always shown (current M3 guidance).
+ * - `labeled`    — Labels are always shown.
+ * - `selected`   — Only the active destination shows its label (legacy M3 "auto" behaviour).
+ * - `unlabeled`  — Icons only; the accessible name comes from `aria-label` / tooltip.
+ */
+type NavigationLabelVisibility = 'auto' | 'labeled' | 'selected' | 'unlabeled';
+/**
+ * Item layout inside a destination.
+ *
+ * - `vertical`   — Icon stacked above the label (M3 default for compact windows).
+ * - `horizontal` — Icon at the start of the label (M3 Expressive, medium windows and above).
+ * - `auto`       — `vertical` on compact windows, `horizontal` from 600dp upwards; always
+ *                  `horizontal` for the expanded rail and the drawer.
+ */
+type NavigationItemLayout = 'auto' | 'vertical' | 'horizontal';
+/** Vertical alignment of the destination list inside a rail. */
+type NavigationAlignment = 'top' | 'center' | 'bottom';
+/** Side the rail / drawer is anchored to. Automatically mirrored in RTL. */
+type NavigationPosition = 'start' | 'end';
+/**
+ * Badge attached to a destination.
+ * When `value` is `undefined` a small dot badge is rendered, otherwise a large
+ * badge showing the value (clamped to `max`).
+ */
+interface NavigationBadge {
+    /** Numeric or textual content of the badge. Leave `undefined` for a dot badge. */
+    value?: number | string;
+    /** Upper bound for numeric values; above it the badge renders `${max}+`. Defaults to 999. */
+    max?: number;
+    /** Accessible description announced together with the destination label. */
+    ariaLabel?: string;
+    /** Optional CSS colour override for this badge only. */
+    color?: string;
+}
+/**
+ * Frame indices of a sprite sheet, one per interaction state.
+ *
+ * The same shape describes the light set (declared inline on the sprite) and the
+ * dark set (declared under `NavigationIconSprite.dark`), so a sheet holding both
+ * themes needs no duplicated geometry.
+ */
+interface NavigationSpriteFrames {
+    /** Zero-based frame index for the resting state. Defaults to 0. */
+    normal?: number;
+    /** Frame index used on hover and on keyboard focus. Defaults to `normal`. */
+    hover?: number;
+    /** Frame index used when the destination is selected. Defaults to `hover`. */
+    active?: number;
+    /** Frame index used when the destination is disabled. Defaults to `normal`. */
+    disabled?: number;
+}
+/**
+ * Sprite sheet descriptor: a single image holding every state frame of an icon,
+ * revealed by shifting `background-position` — no extra request per state.
+ *
+ * Frames are assumed to be square and evenly spaced, laid out along a single
+ * axis. Two geometries are described, and they are NOT the same thing:
+ *  - `size` is the side of a frame INSIDE the image file;
+ *  - `renderSize` is the side the icon is actually drawn at.
+ * The component rescales the whole sheet through `background-size`, so a strip
+ * of 26px frames can be drawn at the 24px of the surrounding Material icons
+ * without the neighbouring frames bleeding in.
+ *
+ * The frame indices declared inline are the light-theme set; `dark` overrides
+ * the ones that differ when the dark theme is active. A sheet that carries a
+ * single set simply omits `dark`.
+ */
+interface NavigationIconSprite extends NavigationSpriteFrames {
+    /** URL of the sprite sheet. */
+    url: string;
+    /** Side of a single frame inside the image file, in pixels. Defaults to 24. */
+    size?: number;
+    /** Side the icon is drawn at, in pixels. Defaults to `size`. */
+    renderSize?: number;
+    /**
+     * Total number of frames in the sheet, needed to rescale it.
+     * Defaults to the highest referenced frame index plus one, which is correct
+     * for any sheet that has no trailing unused frame.
+     */
+    frames?: number;
+    /** Axis the frames are laid out along. Defaults to `vertical`. */
+    direction?: 'vertical' | 'horizontal';
+    /** Frame indices used when the dark theme is active. Defaults to the light ones. */
+    dark?: NavigationSpriteFrames;
+}
+/** A single navigation destination. */
+interface NavigationItem {
+    /** Stable unique identifier; used as the `@for` track key and as the selection value. */
+    id: string;
+    /** Visible label. Also used as the accessible name and as the tooltip fallback. */
+    label: string;
+    /** Material Symbols ligature rendered when the destination is NOT selected. */
+    icon?: string;
+    /** Material Symbols ligature rendered when the destination IS selected (usually the filled variant). */
+    activeIcon?: string;
+    /** Path of a raster / vector image rendered as the icon. Takes precedence over `icon`. */
+    imageIcon?: string;
+    /** Image used when the destination is selected. Takes precedence over `activeIcon`. */
+    activeImageIcon?: string;
+    /**
+     * Sprite sheet holding every state frame of the icon. Takes precedence over
+     * `imageIcon` and `icon`; state changes cost one `background-position` shift.
+     */
+    sprite?: NavigationIconSprite;
+    /** Name of an SVG icon registered in `MatIconRegistry`; takes precedence over `icon`. */
+    svgIcon?: string;
+    /** SVG icon used when the destination is selected; takes precedence over `activeIcon`. */
+    activeSvgIcon?: string;
+    /** Badge shown on top of the icon (collapsed variants) or at the trailing edge (expanded variants). */
+    badge?: NavigationBadge;
+    /** Short trailing text shown at the end of the row in the expanded rail and in the drawer. */
+    trailing?: string;
+    /** When `true` the destination is rendered dimmed and is not interactive. */
+    disabled?: boolean;
+    /**
+     * When `true` the destination is not rendered inline in the compact variants:
+     * it is moved into the overflow menu instead. Which variants count as compact
+     * is decided by the component's `overflowMode` input.
+     */
+    hideWhenCompact?: boolean;
+    /** Tooltip text; defaults to `label` when the label is not visible. */
+    tooltip?: string;
+    /** Router commands used to build the destination URL. */
+    route?: string | readonly unknown[];
+    /** Query parameters appended to `route`. */
+    queryParams?: Record<string, unknown>;
+    /** Fragment appended to `route`. */
+    fragment?: string;
+    /** When `true` the route must match the whole URL to mark the destination active. Defaults to `false`. */
+    exact?: boolean;
+    /** External URL. Rendered as a plain anchor and never matched against the router. */
+    href?: string;
+    /** Anchor target used together with `href`. */
+    target?: string;
+    /** Explicit accessible name, when the visible label is not descriptive enough. */
+    ariaLabel?: string;
+    /**
+     * Nested destinations. A destination with children never navigates on its own:
+     * clicking it expands the group inline (expanded rail / drawer) or opens it in
+     * a floating panel (bar / collapsed rail).
+     */
+    children?: readonly NavigationItem[];
+    /** Initial expansion state of a destination that has `children`. Defaults to `false`. */
+    expanded?: boolean;
+    /**
+     * Edge the destination is pinned to inside a rail or a drawer.
+     * `bottom` destinations are pushed to the end of the surface. Ignored by the
+     * navigation bar, where every destination shares the same row.
+     */
+    align?: 'top' | 'bottom';
+    /** Arbitrary payload echoed back in `NavigationSelection`. */
+    data?: unknown;
+}
+/**
+ * A group of destinations. Section headlines and dividers are only rendered by
+ * the expanded rail and by the drawer, exactly as described by the M3 specs.
+ */
+interface NavigationSection {
+    /** Stable unique identifier; used as the `@for` track key. */
+    id: string;
+    /** Optional headline rendered above the group. */
+    label?: string;
+    /** Destinations belonging to the section. */
+    items: readonly NavigationItem[];
+    /** When `true` a divider is rendered after the section. */
+    divider?: boolean;
+}
+/** Payload emitted when a destination is activated. */
+interface NavigationSelection {
+    /** The activated destination. */
+    item: NavigationItem;
+    /** The section the destination belongs to, when sections are in use. */
+    section?: NavigationSection;
+    /** The parent destination, when a nested destination was activated. */
+    parent?: NavigationItem;
+    /** Zero-based index of the destination across the whole flattened list. */
+    index: number;
+}
+/**
+ * Policy deciding where `hideWhenCompact` destinations are collapsed into the
+ * overflow menu.
+ *
+ * - `bar`     — only in the navigation bar (default).
+ * - `compact` — in the navigation bar and in the collapsed rail.
+ * - `never`   — `hideWhenCompact` is ignored and every destination stays inline.
+ */
+type NavigationOverflowMode = 'bar' | 'compact' | 'never';
+/**
+ * Identifier of the synthesized overflow destination. Use it to recognise the
+ * overflow entry inside `itemSelected`.
+ */
+declare const NAVIGATION_OVERFLOW_ID = "__overflow";
+/** Map of breakpoint alias to the variant used when `variant` is `auto`. */
+type NavigationAutoVariants = Partial<Record<BreakpointAlias, ResolvedNavigationVariant>>;
+/**
+ * Default `auto` mapping, aligned with the Material 3 window size classes:
+ * compact windows get the navigation bar, medium and expanded windows get the
+ * collapsed rail, large and extra-large windows get the expanded rail.
+ */
+declare const DEFAULT_NAVIGATION_AUTO_VARIANTS: Required<NavigationAutoVariants>;
+/** Variants that render labels beside the icon and support sections and dividers. */
+declare const EXPANDED_NAVIGATION_VARIANTS: readonly ResolvedNavigationVariant[];
+
+/** Internal, pre-computed render model for a single destination. */
+interface NavigationRenderItem {
+    /** The source destination. */
+    readonly item: NavigationItem;
+    /** Owning section, when sections are in use. */
+    readonly section?: NavigationSection;
+    /** Parent destination, for nested destinations. */
+    readonly parent?: NavigationItem;
+    /** Zero-based index across the whole flattened destination list. */
+    readonly index: number;
+    /** Nesting level: `0` for a root destination. */
+    readonly depth: number;
+    /** Resolved URL, when the destination is routed or external. */
+    readonly href?: string;
+    /** `true` when the destination navigates through the Angular router. */
+    readonly routed: boolean;
+    /** Material Symbols ligature for the unselected state. */
+    readonly iconOff?: string;
+    /** Material Symbols ligature for the selected state. */
+    readonly iconOn?: string;
+    /** Registered SVG icon name for the unselected state. */
+    readonly svgOff?: string;
+    /** Registered SVG icon name for the selected state. */
+    readonly svgOn?: string;
+    /** Image URL for the unselected state. */
+    readonly imageOff?: string;
+    /** Image URL for the selected state. */
+    readonly imageOn?: string;
+    /** Inline custom properties driving a sprite-sheet icon, when one is used. */
+    readonly spriteStyle?: Record<string, string>;
+    /** Rendered badge text; empty string means "dot badge". */
+    readonly badgeText: string;
+    /** `true` when the destination carries a badge of any kind. */
+    readonly hasBadge: boolean;
+    /** `true` when the destination never renders its label, whatever the label policy. */
+    readonly iconOnly: boolean;
+    /** `true` when the destination owns nested destinations. */
+    readonly hasChildren: boolean;
+    /** Pre-computed render models of the nested destinations. */
+    readonly children: readonly NavigationRenderItem[];
+    /** Accessible name announced for the destination. */
+    readonly ariaLabel: string;
+    /** Tooltip text used when the label is not visible. */
+    readonly tooltip: string;
+}
+/** Internal render model for a section and its destinations. */
+interface NavigationRenderSection {
+    /** The source section. */
+    readonly section: NavigationSection;
+    /** Destinations of the section. */
+    readonly items: readonly NavigationRenderItem[];
+}
+/** Internal render model for one row of the floating submenu panel. */
+interface NavigationPanelEntry {
+    /** Stable `@for` track key. */
+    readonly key: string;
+    /** Heading text, when the row is a group heading. */
+    readonly label?: string;
+    /** Destination to render, when the row is an actual entry. */
+    readonly render?: NavigationRenderItem;
+}
+/** Internal render model for one of the two anchoring groups of a surface. */
+interface NavigationRenderGroup {
+    /** Edge the group is pinned to. */
+    readonly align: 'top' | 'bottom';
+    /** Sections belonging to the group. */
+    readonly sections: readonly NavigationRenderSection[];
+}
+declare class NavigationBarComponent {
+    private readonly media;
+    private readonly themeService;
+    private readonly router;
+    private readonly directionality;
+    private readonly hostRef;
+    private readonly destroyRef;
+    /** Flat list of destinations. Ignored when `sections` is provided. */
+    readonly items: _angular_core.InputSignal<readonly NavigationItem[]>;
+    /** Grouped destinations. Section headlines and dividers only render in the expanded variants. */
+    readonly sections: _angular_core.InputSignal<readonly NavigationSection[]>;
+    /** Rendering variant. `auto` resolves from the active breakpoint through `autoVariants`. */
+    readonly variant: _angular_core.InputSignal<NavigationVariant>;
+    /** Breakpoint → variant map used when `variant` is `auto`. Missing entries fall back to the M3 defaults. */
+    readonly autoVariants: _angular_core.InputSignal<Partial<Record<"xs" | "sm" | "md" | "lg" | "xl", ResolvedNavigationVariant>>>;
+    /** Two-way bound id of the selected destination. The router, when active, takes precedence. */
+    readonly selectedId: _angular_core.ModelSignal<string>;
+    /**
+     * Two-way bound ids of the expanded parent destinations.
+     * Leave unbound (`undefined`) to let the component manage the expansion state
+     * on its own, seeding it from `NavigationItem.expanded` and auto-opening the
+     * ancestors of the active destination.
+     */
+    readonly expandedIds: _angular_core.ModelSignal<readonly string[]>;
+    /** Two-way bound open state of the modal drawer. Ignored by the other variants. */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** Label visibility policy. */
+    readonly labelVisibility: _angular_core.InputSignal<NavigationLabelVisibility>;
+    /** Icon / label arrangement inside a destination. */
+    readonly itemLayout: _angular_core.InputSignal<NavigationItemLayout>;
+    /** Vertical alignment of the `top` destination group inside a rail. */
+    readonly alignment: _angular_core.InputSignal<NavigationAlignment>;
+    /** Edge the rail / drawer is anchored to. Mirrored automatically in RTL. */
+    readonly position: _angular_core.InputSignal<NavigationPosition>;
+    /** Headline rendered above the destinations in the expanded rail and in the drawer. */
+    readonly headline: _angular_core.InputSignal<string>;
+    /** When `true` a leading menu button is rendered; it emits `menuClick`. */
+    readonly showMenuButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Material Symbols ligature used by the menu button. */
+    readonly menuIcon: _angular_core.InputSignal<string>;
+    /** Material Symbols ligature used by the expand / collapse chevron. */
+    readonly expandIcon: _angular_core.InputSignal<string>;
+    /** Where `hideWhenCompact` destinations are collapsed into the overflow menu. */
+    readonly overflowMode: _angular_core.InputSignal<NavigationOverflowMode>;
+    /** Material Symbols ligature of the overflow destination. */
+    readonly overflowIcon: _angular_core.InputSignal<string>;
+    /** Accessible name and tooltip of the overflow destination, which renders icon-only. */
+    readonly overflowLabel: _angular_core.InputSignal<string>;
+    /**
+     * Hard cap on the destinations rendered inline in the compact variants,
+     * applied per anchoring group. The overflow destination counts as one slot.
+     * `0` disables the cap; the M3 specs recommend 3 to 5 for the navigation bar.
+     */
+    readonly maxVisibleItems: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Accessible name of the menu button. */
+    readonly menuAriaLabel: _angular_core.InputSignal<string>;
+    /** Accessible name of the navigation landmark. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** When `true` a scrim is rendered behind the modal drawer. */
+    readonly scrim: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** When `true` the modal drawer closes as soon as a destination is activated. */
+    readonly closeOnSelect: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** When `true` the surface gets the M3 elevation-3 shadow. */
+    readonly elevated: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** When `true` a 1px divider separates the surface from the page content. */
+    readonly bordered: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** When `true` tooltips are shown for destinations whose label is not visible. */
+    readonly tooltips: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** When `true` the selection follows the current router URL. */
+    readonly routerSync: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Route used to resolve relative `route` commands. Absolute resolution when omitted. */
+    readonly relativeTo: _angular_core.InputSignal<ActivatedRoute>;
+    /** Explicit surface width in pixels for the rail / drawer variants. `0` keeps the spec default. */
+    readonly width: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** When `true` the whole surface is hidden (animated off-screen) without being destroyed. */
+    readonly hidden: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Emitted when a destination is activated by the user. */
+    readonly itemSelected: _angular_core.OutputEmitterRef<NavigationSelection>;
+    /** Emitted when the leading menu button is pressed. */
+    readonly menuClick: _angular_core.OutputEmitterRef<void>;
+    /** Focusable destination elements, in DOM order; used for keyboard roving. */
+    private readonly itemElements;
+    /** Focusable entries of the floating submenu panel, in DOM order. */
+    private readonly panelElements;
+    /** Current router URL, kept in a signal so the template stays zoneless-friendly. */
+    private readonly routerUrl;
+    /**
+     * Ticks whenever the application theme moves. The emitted value is ignored on
+     * purpose: it is a change notification, not the answer.
+     *
+     * Reads `themeService`, so it MUST stay below the injected dependencies: moved
+     * above them it would read `undefined`, `?? EMPTY` would swallow it and the
+     * theme would silently stop propagating, with nothing to show for it at
+     * compile time.
+     */
+    private readonly themeChanged;
+    /**
+     * `true` when the dark theme is active; selects the dark frame set of a sprite.
+     *
+     * The answer comes from `getTheme()`, the only one that resolves `auto`
+     * against the OS preference. `getTheme()` already reads a signal for the
+     * explicit modes, so `themeChanged()` is read for the one case that is not
+     * reactive on its own: mode `auto` plus a change of the OS colour scheme,
+     * which leaves the stored mode on `auto` and only travels through `changed`.
+     * Falls back to the light set when no `ThemeService` is provided.
+     */
+    private readonly isDark;
+    /** Id of the destination whose children are currently shown in the floating panel. */
+    private readonly popupId;
+    /**
+     * Destination whose children are currently shown in the floating panel.
+     *
+     * Derived from the id and NOT stored as an object: the render model is rebuilt
+     * whenever the destinations, the resolved URLs or the theme change, and a
+     * stored object would keep the panel painting the sprite frames of the
+     * previous theme until the panel is closed and reopened.
+     *
+     * The search is recursive because a panel entry can itself own children and
+     * open a panel of its own, and those nested render models are not part of the
+     * top level of `visibleGroups`.
+     *
+     * Reads `visibleGroups`, which is declared further down: safe because
+     * `computed` is lazy and nothing reads this before the first render — the
+     * opposite of `themeChanged` above, which reads its dependency immediately.
+     */
+    protected readonly popupItem: _angular_core.Signal<NavigationRenderItem>;
+    /** Element the floating panel is anchored to. */
+    private readonly popupAnchor;
+    constructor();
+    /** Sections actually rendered: the `sections` input, or a single implicit section wrapping `items`. */
+    private readonly resolvedSections;
+    /** Every destination, nested ones included, in depth-first order. */
+    private readonly allItems;
+    /** Map of destination id to the id of its parent destination. */
+    private readonly parentOf;
+    /** The variant to render, resolving `auto` against the active CDK breakpoint. */
+    protected readonly resolvedVariant: _angular_core.Signal<ResolvedNavigationVariant>;
+    /** `true` for the variants that render labels beside icons and support sections. */
+    protected readonly isExpanded: _angular_core.Signal<boolean>;
+    /** `true` when the surface is the modal drawer. */
+    protected readonly isModal: _angular_core.Signal<boolean>;
+    /** `true` when the modal drawer is currently open. */
+    protected readonly isOverlayOpen: _angular_core.Signal<boolean>;
+    /** `true` when the surface must be visually hidden. */
+    protected readonly isHidden: _angular_core.Signal<boolean>;
+    /** Resolved icon / label arrangement. */
+    protected readonly resolvedLayout: _angular_core.Signal<"vertical" | "horizontal">;
+    /** Resolved label visibility; the expanded variants always show labels. */
+    protected readonly resolvedLabelVisibility: _angular_core.Signal<"labeled" | "selected" | "unlabeled">;
+    /** `true` when the headline row (menu button, headline text) is rendered. */
+    protected readonly showsHeader: _angular_core.Signal<boolean>;
+    /**
+     * Geometry of the active indicator:
+     * `compact` wraps the icon only (56x32 pill), `wide` wraps icon and label
+     * together, exactly as described by the M3 Expressive specs.
+     */
+    protected readonly indicatorMode: _angular_core.Signal<"compact" | "wide">;
+    /** Tooltip placement derived from the variant and from the anchoring edge. */
+    protected readonly tooltipPosition: _angular_core.Signal<TooltipPosition>;
+    /** Inline width override for the rail / drawer, or `undefined` to keep the spec default. */
+    protected readonly widthStyle: _angular_core.Signal<string>;
+    /** Map of destination id to resolved URL. Recomputed only when the destinations change. */
+    private readonly hrefs;
+    /**
+     * Static render model, rebuilt only when the destinations, the resolved URLs
+     * or the theme change — never when the selection or the expansion state
+     * changes. The theme is a dependency because sprite icons carry one frame set
+     * per theme, and the frames are baked into the inline style of the icon.
+     */
+    private readonly renderGroups;
+    /** Id of the destination matching the current router URL, using longest-prefix matching. */
+    private readonly routerActiveId;
+    /** Id of the currently active destination: router URL first, explicit selection as fallback. */
+    protected readonly activeId: _angular_core.Signal<string>;
+    /**
+     * Expansion state used when `expandedIds` is left unbound: the destinations
+     * flagged `expanded`, plus every ancestor of the active destination.
+     */
+    private readonly defaultExpandedIds;
+    /** Ids of the parent destinations currently expanded. */
+    protected readonly expandedSet: _angular_core.Signal<ReadonlySet<string>>;
+    /** `true` when the current variant collapses `hideWhenCompact` destinations into the overflow menu. */
+    protected readonly overflowApplies: _angular_core.Signal<boolean>;
+    /**
+     * Render model actually walked by the template: the static model with the
+     * compact-only destinations moved into the overflow menu and the children of
+     * the expanded parents spliced in.
+     */
+    protected readonly visibleGroups: _angular_core.Signal<readonly NavigationRenderGroup[]>;
+    /**
+     * Ids rendered with the selected styling. It is the active destination when it
+     * is on screen, otherwise every rendered parent hiding it — a collapsed branch
+     * or the overflow entry — so the user still sees where they are.
+     */
+    protected readonly highlightedIds: _angular_core.Signal<ReadonlySet<string>>;
+    /**
+     * Rows of the floating submenu panel. Nested destinations one level down are
+     * flattened under a heading, so the overflow menu can hold parents too.
+     */
+    protected readonly popupEntries: _angular_core.Signal<readonly NavigationPanelEntry[]>;
+    /** `true` when the floating submenu panel must be shown. */
+    protected readonly isPopupOpen: _angular_core.Signal<boolean>;
+    /** Element the floating submenu panel is anchored to. */
+    protected readonly popupOrigin: _angular_core.Signal<HTMLElement>;
+    /** Connected positions of the floating submenu panel, derived from the variant. */
+    protected readonly popupPositions: _angular_core.Signal<ConnectedPosition[]>;
+    /** `true` when the layout runs right-to-left; used to mirror the arrow keys. */
+    private readonly isRtl;
+    /**
+     * Activates a destination, or expands it when it owns nested destinations.
+     * A parent never navigates: it toggles its group inline in the wide variants
+     * and opens the floating panel in the compact ones.
+     * @param render - The render model of the activated destination.
+     * @param event - The originating mouse or keyboard event.
+     */
+    protected select(render: NavigationRenderItem, event: Event): void;
+    /**
+     * Emits `menuClick` when the leading menu button is pressed.
+     */
+    protected onMenuClick(): void;
+    /**
+     * Closes the modal drawer when the scrim is clicked.
+     */
+    protected onScrimClick(): void;
+    /**
+     * Handles keyboard interaction: arrow keys move the focus between
+     * destinations, `Home` / `End` jump to the first / last one and `Escape`
+     * closes the floating submenu panel or the modal drawer.
+     *
+     * The same handler serves the surface and the floating panel, and it tells
+     * them apart by `currentTarget`: roving inside an open `role="menu"` must stay
+     * inside it, and a programmatic `focus()` is NOT stopped by the focus trap, so
+     * sharing one element list would send the focus onto the surface behind the
+     * overlay.
+     *
+     * @param event - The originating keyboard event.
+     */
+    protected onKeydown(event: KeyboardEvent): void;
+    /**
+     * Expands or collapses the parent destination with the given id.
+     * @param id - Identifier of the parent destination to toggle.
+     */
+    toggleExpanded(id: string): void;
+    /**
+     * Opens the floating submenu panel of a parent destination.
+     * @param render - The render model of the parent destination.
+     * @param event - The originating event, used to anchor the panel.
+     */
+    protected openPopup(render: NavigationRenderItem, event: Event): void;
+    /**
+     * Closes the floating submenu panel.
+     */
+    closePopup(): void;
+    /**
+     * Opens the modal drawer. No-op for the other variants.
+     */
+    openDrawer(): void;
+    /**
+     * Closes the modal drawer. No-op for the other variants.
+     */
+    closeDrawer(): void;
+    /**
+     * Toggles the modal drawer. No-op for the other variants.
+     */
+    toggleDrawer(): void;
+    /**
+     * Moves the browser focus to the destination with the given id.
+     * @param id - Identifier of the destination to focus.
+     * @returns `true` when a matching destination was found and focused.
+     */
+    focusItem(id: string): boolean;
+    /**
+     * Moves the compact-only destinations of a group into a synthesized overflow
+     * destination appended at the end of the group.
+     * @param group - The group to process.
+     * @param overflow - `true` when `hideWhenCompact` must be honoured.
+     * @param max - Hard cap on the inline destinations; `0` disables it.
+     * @returns The group with the overflow destination applied.
+     */
+    private applyOverflow;
+    /**
+     * Builds the synthesized, icon-only overflow destination.
+     * @param children - The destinations moved into the overflow menu.
+     * @returns The render model of the overflow destination.
+     */
+    private buildOverflowItem;
+    /**
+     * Merges the `top` and `bottom` groups into a single `top` group, combining
+     * the sections that share an id so `@for` track keys stay unique.
+     * @param groups - The groups to merge.
+     * @returns A single-group array, or the input when there is nothing to merge.
+     */
+    private static mergeGroups;
+    /**
+     * Builds the render model of a destination and, recursively, of its children.
+     * @param item - The source destination.
+     * @param section - The section the destination belongs to.
+     * @param parent - The parent destination, for nested destinations.
+     * @param depth - Nesting level of the destination.
+     * @param counter - Shared counter producing the flat destination index.
+     * @param hrefs - Map of destination id to resolved URL.
+     * @param dark - `true` when the dark theme is active, selecting the dark sprite frames.
+     * @returns The render model of the destination.
+     */
+    private static buildRenderItem;
+    /**
+     * Translates a sprite descriptor into the inline custom properties the
+     * stylesheet uses to size the icon and to shift `background-position` per
+     * interaction state.
+     *
+     * The sheet is rescaled through `background-size` instead of being drawn at
+     * its natural size: that is what lets a strip of 26px frames be painted at the
+     * 24px of the surrounding Material icons without the neighbouring frames
+     * bleeding into the box, and it makes the step between two frames exactly the
+     * rendered side.
+     *
+     * @param item - The destination whose sprite must be translated.
+     * @param dark - `true` when the dark theme is active, selecting the `dark` frame set.
+     * @returns The inline style map, or `undefined` when the destination uses no sprite.
+     */
+    private static buildSpriteStyle;
+    /**
+     * Number of frames a sprite sheet holds, needed to rescale it.
+     * @param sprite - The sprite descriptor to measure.
+     * @returns The declared frame count, or the highest referenced index plus one.
+     */
+    private static spriteFrameCount;
+    /**
+     * Formats the badge content of a destination.
+     * @param item - The destination whose badge must be formatted.
+     * @returns The badge text, or an empty string for a dot badge / no badge.
+     */
+    private static formatBadge;
+    /**
+     * Strips the query string and the fragment from a URL.
+     * @param url - The URL to normalise.
+     * @returns The path portion of the URL.
+     */
+    private static pathOf;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavigationBarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NavigationBarComponent, "navigation-bar", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "sections": { "alias": "sections"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "autoVariants": { "alias": "autoVariants"; "required": false; "isSignal": true; }; "selectedId": { "alias": "selectedId"; "required": false; "isSignal": true; }; "expandedIds": { "alias": "expandedIds"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "labelVisibility": { "alias": "labelVisibility"; "required": false; "isSignal": true; }; "itemLayout": { "alias": "itemLayout"; "required": false; "isSignal": true; }; "alignment": { "alias": "alignment"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "headline": { "alias": "headline"; "required": false; "isSignal": true; }; "showMenuButton": { "alias": "showMenuButton"; "required": false; "isSignal": true; }; "menuIcon": { "alias": "menuIcon"; "required": false; "isSignal": true; }; "expandIcon": { "alias": "expandIcon"; "required": false; "isSignal": true; }; "overflowMode": { "alias": "overflowMode"; "required": false; "isSignal": true; }; "overflowIcon": { "alias": "overflowIcon"; "required": false; "isSignal": true; }; "overflowLabel": { "alias": "overflowLabel"; "required": false; "isSignal": true; }; "maxVisibleItems": { "alias": "maxVisibleItems"; "required": false; "isSignal": true; }; "menuAriaLabel": { "alias": "menuAriaLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "scrim": { "alias": "scrim"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "elevated": { "alias": "elevated"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "tooltips": { "alias": "tooltips"; "required": false; "isSignal": true; }; "routerSync": { "alias": "routerSync"; "required": false; "isSignal": true; }; "relativeTo": { "alias": "relativeTo"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; }, { "selectedId": "selectedIdChange"; "expandedIds": "expandedIdsChange"; "open": "openChange"; "itemSelected": "itemSelected"; "menuClick": "menuClick"; }, never, ["[navHeader]", "[navFab]", "[navFooter]"], true, never>;
+}
+
+export { ALIAS_FAMILIES, BS5_BREAKPOINTS, BusyDialogComponent, BusyTimer, CANONICAL_ALIASES, ConfirmDialogComponent, CredentialsDialogComponent, DEFAULT_NAVIGATION_AUTO_VARIANTS, DeleteDialogComponent, DeleteDialogConfirmMode, DialogService, EXPANDED_NAVIGATION_VARIANTS, FlexLayoutModule, FxClassDirective, FxFlexAlignDirective, FxFlexDirective, FxFlexFillDirective, FxFlexOffsetDirective, FxFlexOrderDirective, FxGridAreaDirective, FxGridColumnDirective, FxGridDirective, FxLayoutAlignDirective, FxLayoutDirective, FxLayoutGapDirective, FxLayoutWrapDirective, FxShowHideDirective, FxStyleDirective, IfBpDirective, InfoDialogComponent, LAYOUT_BREAKPOINTS, LAYOUT_VALUES, MediaObserver, NAVIGATION_OVERFLOW_ID, NON_CANONICAL_PRIORITY, NavigationBarComponent, OtpInputComponent, PaginatorIntl, PasswordStrengthComponent, RecoverPasswordDialogComponent, ResetPasswordDialogComponent, ResponsiveBaseDirective, ToastComponent, UIService, applyVisibility, buildAlignStyles, buildFlexStyles, buildLayoutCSS, resolve, resolveAll, resolveFlexInput, resolveNonCanonical, resolveParentFlow, validateBasis, validateLayoutValue, validateWrapValue };
+export type { BpValues, BreakpointAlias, CanonicalKey, ConfirmDialogData, ConfirmDialogOption, CredentialsDialogData, CredentialsDialogResult, DeleteDialogData, DialogOption, DialogResult, IDialogService, InfoDialogData, NavigationAlignment, NavigationAutoVariants, NavigationBadge, NavigationIconSprite, NavigationItem, NavigationItemLayout, NavigationLabelVisibility, NavigationOverflowMode, NavigationPosition, NavigationSection, NavigationSelection, NavigationSpriteFrames, NavigationVariant, NcValues, NonCanonicalKey, RecoverPasswordDialogData, RecoverPasswordDialogResult, ResetPasswordDialogData, ResetPasswordDialogMode, ResetPasswordDialogResult, ResolvedNavigationVariant, ToastData };