ng-hub-ui-loading 22.0.0 → 22.1.1

package/fesm2022/ng-hub-ui-loading.mjs

@@ -1,7 +1,10 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, inject, input, booleanAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, ApplicationRef, PLATFORM_ID, signal, createComponent, Injectable } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, input, booleanAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, ApplicationRef, PLATFORM_ID, signal, untracked, createComponent, Injectable, NgZone, DestroyRef, provideAppInitializer } from '@angular/core';
 import { resolveHubAccent } from 'ng-hub-ui-utils';
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { HttpContextToken, HttpContext } from '@angular/common/http';
+import { finalize } from 'rxjs';
+import { NavigationEnd, NavigationCancel, NavigationError, NavigationSkipped, Router, NavigationStart } from '@angular/router';
 
 /**
  * Neutral defaults applied when an application provides no configuration.
@@ -169,7 +172,16 @@ class HubLoadingService {
     document = inject(DOCUMENT);
     platformId = inject(PLATFORM_ID);
     config = inject(HUB_LOADING_CONFIG);
-    /** Number of callers currently requesting the overlay. */
+    /**
+     * Number of callers currently requesting the overlay.
+     *
+     * Read through `untracked` wherever it steers this service's own logic. A caller is not
+     * necessarily outside a reactive context — `hide()` from inside an `effect()` is ordinary
+     * code — and a tracked read there subscribes that effect to the counter, so anyone else's
+     * `show()` re-runs it and retires a reference it never registered, taking the overlay down
+     * while other callers are still waiting. Only `isLoading` reads it tracked, and that one is
+     * meant to: it exists to be watched.
+     */
     pending = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
     /** Live reference to the mounted overlay; `null` whenever nothing is showing. */
@@ -201,7 +213,7 @@ class HubLoadingService {
      */
     hide() {
         this.pending.update((count) => Math.max(0, count - 1));
-        if (this.pending() === 0) {
+        if (untracked(this.pending) === 0) {
             this.unmount();
         }
     }
@@ -302,11 +314,575 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+/**
+ * Default trickle curve: large steps early, then progressively smaller ones.
+ *
+ * The shape is what makes an invented number believable. Moving fast at the start
+ * matches the part of a page load that really is fast (the request goes out, the shell
+ * responds); slowing near the end matches the part nobody can predict, and leaves room
+ * for `complete()` to arrive without the bar having to jump backwards.
+ *
+ * Exported so a consumer can wrap it rather than rewrite it.
+ *
+ * @param progress - Current value, 0–100.
+ * @returns Amount to add on this tick.
+ */
+function hubLoadingBarTrickle(progress) {
+    if (progress < 20) {
+        return 10;
+    }
+    if (progress < 50) {
+        return 4;
+    }
+    if (progress < 80) {
+        return 2;
+    }
+    if (progress < 99) {
+        return 0.5;
+    }
+    return 0;
+}
+/**
+ * Neutral defaults applied when an application provides no configuration.
+ *
+ * These are the values documented as each input's default, so overriding the token
+ * silently re-bases the whole application without touching a template.
+ */
+const HUB_LOADING_BAR_DEFAULT_CONFIG = {
+    min: 8,
+    max: 99,
+    trickleSpeed: 250,
+    trickle: true,
+    trickleFn: hubLoadingBarTrickle,
+    delay: 100,
+    completeDelay: 300,
+    color: null,
+    glow: true,
+    ariaLabel: 'Loading'
+};
+/**
+ * Resolved defaults shared by `<hub-loading-bar>` and `HubLoadingBarService`.
+ *
+ * Declared with a root factory so the token is always injectable, even when the
+ * application never calls {@link provideHubLoadingBar}.
+ */
+const HUB_LOADING_BAR_CONFIG = new InjectionToken('HUB_LOADING_BAR_CONFIG', {
+    providedIn: 'root',
+    factory: () => HUB_LOADING_BAR_DEFAULT_CONFIG
+});
+/**
+ * Registers application-wide loading-bar defaults — the accent, the pacing, the
+ * translated label — so individual call sites stay bare.
+ *
+ * @param config - Values overriding {@link HUB_LOADING_BAR_DEFAULT_CONFIG}; omitted keys keep their default.
+ * @returns Environment providers for the application bootstrap.
+ */
+function provideHubLoadingBar(config = {}) {
+    return makeEnvironmentProviders([
+        {
+            provide: HUB_LOADING_BAR_CONFIG,
+            useValue: { ...HUB_LOADING_BAR_DEFAULT_CONFIG, ...config }
+        }
+    ]);
+}
+
+/**
+ * Drives the page-level loading bar: the thin strip under the navbar that says
+ * "something is on its way" without pretending to know how long it will take.
+ *
+ * Three decisions shape the whole service, and each exists because the naive version is
+ * worse:
+ *
+ * - **Reference counting, not a boolean.** A route change and the three requests its
+ *   page fires are four independent callers. With a boolean, the first one to finish
+ *   would take the bar down while the other three were still working. The bar completes
+ *   when the count reaches zero, and {@link completeAll} is the escape hatch for a caller
+ *   that never balanced its `start()`.
+ * - **A grace period before anything is painted.** Work that finishes within `delay`
+ *   never shows a bar at all. A cached route that flashes a progress bar for 40 ms reads
+ *   as a glitch, not as speed.
+ * - **A trickle that never reaches the end.** Nothing here knows the real percentage, so
+ *   the bar advances in shrinking steps and stops at `max`. Only `complete()` may show
+ *   100, because only `complete()` knows it is true.
+ *
+ * Timers run outside the Angular zone. Inside it, a 250 ms interval would trigger change
+ * detection for the whole application on every tick and — far worse — would keep
+ * `ApplicationRef.isStable` false forever, which hangs server-side rendering. The state
+ * is signals, so change detection is still scheduled correctly when a value actually
+ * changes. On the server no timer is created at all: the counter stays truthful and the
+ * rendered HTML carries no bar to mismatch on hydration.
+ *
+ * @example
+ * ```typescript
+ * private readonly bar = inject(HubLoadingBarService);
+ *
+ * async import(): Promise<void> {
+ *   this.bar.start();
+ *   try {
+ *     await this.api.import();
+ *   } finally {
+ *     this.bar.complete();
+ *   }
+ * }
+ * ```
+ */
+class HubLoadingBarService {
+    config = inject(HUB_LOADING_BAR_CONFIG);
+    zone = inject(NgZone);
+    platformId = inject(PLATFORM_ID);
+    /** Number of callers currently waiting on something. */
+    /**
+     * How many callers are holding the bar up.
+     *
+     * Read through `untracked` everywhere it steers this service's own logic. A caller is
+     * not necessarily outside a reactive context — Angular does not untrack interceptors,
+     * so a request fired from inside an `effect()` runs `start()` inside that effect — and a
+     * tracked read there subscribes the caller's effect to this counter. Every later request
+     * then re-runs it, which is a request loop with the bar as the feedback path. Only
+     * `isActive` reads it tracked, and that one is meant to: it exists to be watched.
+     */
+    pending = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
+    /** Current fill, 0–100. */
+    _progress = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_progress" }] : /* istanbul ignore next */ []));
+    /** Whether the bar is painted right now; false during the grace period. */
+    _visible = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_visible" }] : /* istanbul ignore next */ []));
+    /** Handles of the running timers, so each can be cancelled independently. */
+    timers = {
+        reveal: null,
+        trickle: null,
+        complete: null
+    };
+    /** Current fill, 0–100. Bound by `<hub-loading-bar>`; safe to read during SSR. */
+    progress = this._progress.asReadonly();
+    /**
+     * Whether the bar is on screen. Differs from {@link isActive} at both ends of a cycle:
+     * false while the grace period runs, and still true during the completion tail.
+     */
+    isVisible = this._visible.asReadonly();
+    /**
+     * Whether any caller is still waiting — the honest "is the page loading?" question,
+     * regardless of whether the bar has decided to show itself yet.
+     */
+    isActive = computed(() => this.pending() > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // A root service outlives most things, but not a TestBed reset or an HMR reload;
+        // an orphan interval would keep ticking against a dead injector.
+        inject(DestroyRef).onDestroy(() => this.clearAllTimers());
+    }
+    /**
+     * Registers one caller. The first one starts a cycle; the rest simply join the count.
+     */
+    start() {
+        const wasIdle = untracked(this.pending) === 0;
+        this.pending.update((count) => count + 1);
+        if (!wasIdle) {
+            return;
+        }
+        if (this.timers.complete !== null) {
+            // Interrupting the completion tail. Drop the bar before rewinding it: the
+            // stylesheet only transitions the fill while the bar is visible, so rewinding
+            // it on screen would animate the progress running backwards.
+            this.clearTimer('complete');
+            this._visible.set(false);
+        }
+        this._progress.set(this.config.min);
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        // `delay: 0` has to mean "paint now", not "paint on the next macrotask". A router
+        // navigation with no async guard settles inside the same task it started in, so a
+        // deferred reveal would be cancelled by `complete()` before it ever ran and the bar
+        // would be unreachable for anyone who opted out of the grace period.
+        if (this.config.delay <= 0) {
+            this.reveal();
+            return;
+        }
+        this.schedule('reveal', this.config.delay, () => this.reveal());
+    }
+    /**
+     * Retires one caller. Once none are left the bar runs to 100% and fades away — or, if
+     * the grace period swallowed the whole operation, disappears without ever having been
+     * seen.
+     */
+    complete() {
+        this.pending.update((count) => Math.max(0, count - 1));
+        if (untracked(this.pending) === 0) {
+            this.finish();
+        }
+    }
+    /** Drops every pending caller and completes the bar immediately. */
+    completeAll() {
+        this.pending.set(0);
+        this.finish();
+    }
+    /**
+     * Moves the bar to an exact value and reveals it, bypassing the grace period.
+     *
+     * For work whose real percentage is known — a file upload, a paged import. The value
+     * is not capped at `max`, because a caller reporting a true 100 is not guessing;
+     * finishing the cycle is still {@link complete}'s job.
+     *
+     * @param value - Target fill, 0–100. Values outside the range are clamped.
+     */
+    set(value) {
+        this.reveal();
+        this._progress.set(Math.min(100, Math.max(0, value)));
+    }
+    /**
+     * Advances the bar and reveals it, bypassing the grace period.
+     *
+     * @param amount - Step to add. Omitted, the configured trickle curve decides, which is
+     * what makes an unknown wait keep moving without ever arriving.
+     */
+    inc(amount) {
+        this.reveal();
+        this.advance(amount);
+    }
+    /**
+     * Cancels everything at once: no completion animation, no pending callers, nothing on
+     * screen. For an error handler that wants the bar gone rather than finished.
+     */
+    reset() {
+        this.clearAllTimers();
+        this.pending.set(0);
+        this._visible.set(false);
+        this._progress.set(0);
+    }
+    /** Paints the bar and starts the trickle, if a caller is waiting on one. */
+    reveal() {
+        this.clearTimer('reveal');
+        this._visible.set(true);
+        this.startTrickling();
+    }
+    /**
+     * Runs the completion, shared by {@link complete} and {@link completeAll}.
+     *
+     * The fill is deliberately left at 100 once the bar is hidden. `start()` rewinds it
+     * while the bar is invisible, where the stylesheet suppresses the transition, so the
+     * next cycle begins from `min` without the previous one being seen to unwind.
+     */
+    finish() {
+        this.clearTimer('reveal');
+        this.clearTimer('trickle');
+        // Untracked for the same reason as `pending`: `complete()` and `completeAll()` are
+        // public and reachable from an effect, and a tracked read here would wake that effect
+        // on every later cycle, completing a bar somebody else had just started.
+        if (!untracked(this._visible)) {
+            this._progress.set(0);
+            return;
+        }
+        this._progress.set(100);
+        this.schedule('complete', this.config.completeDelay, () => this._visible.set(false));
+    }
+    /** Starts the trickle interval, unless it is disabled, already running or unneeded. */
+    startTrickling() {
+        if (!this.config.trickle || this.timers.trickle !== null || untracked(this.pending) === 0) {
+            return;
+        }
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        this.zone.runOutsideAngular(() => {
+            this.timers.trickle = setInterval(() => this.advance(), this.config.trickleSpeed);
+        });
+    }
+    /** Adds one step, capped at `max` so the trickle can never claim to be finished. */
+    advance(amount) {
+        // Untracked for the same reason as `pending`: `inc()` is public, so this read can happen
+        // inside a caller's effect, and each step would then re-run it — a bar that advances
+        // itself for as long as the guard allows.
+        const current = untracked(this._progress);
+        const step = amount ?? this.config.trickleFn(current);
+        this._progress.set(Math.min(this.config.max, Math.max(0, current + step)));
+    }
+    /** Schedules a one-shot timer outside the Angular zone, replacing any previous one. */
+    schedule(name, delay, action) {
+        this.clearTimer(name);
+        this.zone.runOutsideAngular(() => {
+            this.timers[name] = setTimeout(() => {
+                this.timers[name] = null;
+                action();
+            }, delay);
+        });
+    }
+    /** Cancels one timer if it is running. Safe to call for a timer that is not. */
+    clearTimer(name) {
+        const handle = this.timers[name];
+        if (handle === null) {
+            return;
+        }
+        this.timers[name] = null;
+        // `setInterval` and `setTimeout` share a handle space in both runtimes, so one
+        // clear covers the repeating trickle and the two one-shots alike.
+        clearTimeout(handle);
+        clearInterval(handle);
+    }
+    /** Cancels every timer; used by `reset()` and on injector teardown. */
+    clearAllTimers() {
+        this.clearTimer('reveal');
+        this.clearTimer('trickle');
+        this.clearTimer('complete');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubLoadingBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubLoadingBarService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubLoadingBarService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * The thin strip that reports page-level progress — the bar under the navbar.
+ *
+ * By default the component draws whatever {@link HubLoadingBarService} is doing, which is
+ * what makes a single `<hub-loading-bar />` in the shell enough for the whole
+ * application: the router integration and the HTTP interceptor drive the service, and
+ * this element follows. Bind `progress` to take it over instead, for a bar reporting one
+ * known quantity — an upload, an import — independently of everything else.
+ *
+ * The `progress` input therefore has three meanings, and the difference matters:
+ * unbound (`undefined`) follows the service; a number drives the bar directly; `null`
+ * hides it. This mirrors how `HubLoadingService` already reads `undefined` as "leave it
+ * alone" and `null` as "clear it".
+ *
+ * Note the deliberate gap in the accessibility contract. While the service is trickling,
+ * the number on screen is invented — nothing knows the real percentage of a page load —
+ * so `aria-valuenow` is withheld, which is exactly how ARIA spells an indeterminate
+ * progressbar. Announcing a made-up "43%" would be worse than announcing nothing. The
+ * value is published only when a caller has bound a real one.
+ *
+ * Styles are unencapsulated, like the rest of the library, so a consumer can retheme the
+ * bar from a global stylesheet.
+ *
+ * @example
+ * ```html
+ * <!-- Hanging off the bottom edge of a navbar, driven by the service -->
+ * <nav class="navbar position-relative">
+ *   …
+ *   <hub-loading-bar mode="overlay" placement="bottom" />
+ * </nav>
+ *
+ * <!-- Reporting one known quantity -->
+ * <hub-loading-bar [progress]="uploaded()" color="success" />
+ * ```
+ */
+class HubLoadingBarComponent {
+    /** Application-wide defaults; also the source of every input's default value. */
+    config = inject(HUB_LOADING_BAR_CONFIG);
+    /** The shared page-level state this bar renders unless `progress` is bound. */
+    service = inject(HubLoadingBarService);
+    /**
+     * Placement of the strip. `overlay` needs a positioned ancestor to attach to;
+     * `fixed` pins it to the viewport at `--hub-loading-bar-offset`.
+     */
+    mode = input('inline', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Edge the `overlay` and `fixed` modes attach to; `inline` ignores it. */
+    placement = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    /**
+     * Takes the bar over. Leave it unbound to follow {@link HubLoadingBarService}; bind a
+     * number (0–100) to drive it directly, or `null` to hide it.
+     */
+    progress = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
+    /**
+     * Sweeps a fragment back and forth instead of filling.
+     *
+     * The honest choice when there is no percentage worth inventing — a long stream, a
+     * job with no reported stages.
+     */
+    indeterminate = input(false, { ...(ngDevMode ? { debugName: "indeterminate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Soft glow trailing the leading edge, which is what reads as movement. */
+    glow = input(this.config.glow, { ...(ngDevMode ? { debugName: "glow" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Accent for the fill. Accepts a semantic name (`primary`), a CSS colour literal or a
+     * `var(...)` reference — normalised by `resolveHubAccent()` into the single
+     * `--hub-loading-bar-accent` slot.
+     */
+    color = input(this.config.color, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the host's `role="progressbar"`. */
+    ariaLabel = input(this.config.ariaLabel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Whether a caller has taken the bar over rather than following the service. */
+    _manual = computed(() => this.progress() !== undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_manual" }] : /* istanbul ignore next */ []));
+    /** Current fill, from whichever source is in charge. */
+    _value = computed(() => (this._manual() ? (this.progress() ?? 0) : this.service.progress()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+    /** Whether the strip is painted at all. */
+    _visible = computed(() => (this._manual() ? this.progress() !== null : this.service.isVisible()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_visible" }] : /* istanbul ignore next */ []));
+    /** Fill as a CSS length, consumed by the stylesheet's single runtime slot. */
+    _fill = computed(() => `${this._value()}%`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_fill" }] : /* istanbul ignore next */ []));
+    /**
+     * The value published to assistive technology: only ever a real one.
+     *
+     * `null` removes the attribute, which is how ARIA marks a progressbar indeterminate —
+     * the correct answer both while the service trickles an invented number and while the
+     * `indeterminate` sweep is running. A bar that is not painted publishes nothing either:
+     * the host is `aria-hidden` by then, so a stale value would only ever be misleading.
+     */
+    _announcedValue = computed(() => this._visible() && this._manual() && !this.indeterminate() ? this._value() : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_announcedValue" }] : /* istanbul ignore next */ []));
+    /** Mode and placement modifiers; kept as one binding so neither can drop the other. */
+    _modifierClasses = computed(() => {
+        const classes = [`hub-loading-bar--${this.mode()}`];
+        if (this.mode() !== 'inline') {
+            classes.push(`hub-loading-bar--${this.placement()}`);
+        }
+        if (this.indeterminate()) {
+            classes.push('hub-loading-bar--indeterminate');
+        }
+        if (this.glow()) {
+            classes.push('hub-loading-bar--glow');
+        }
+        return classes.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_modifierClasses" }] : /* istanbul ignore next */ []));
+    /**
+     * Single accent slot consumed by the stylesheet. `null` leaves the binding off
+     * entirely, so the token's own cascade default stays in effect.
+     */
+    _accent = computed(() => resolveHubAccent(this.color()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_accent" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubLoadingBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: HubLoadingBarComponent, isStandalone: true, selector: "hub-loading-bar", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, glow: { classPropertyName: "glow", publicName: "glow", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar", "aria-valuemin": "0", "aria-valuemax": "100" }, properties: { "class": "_modifierClasses()", "class.hub-loading-bar--visible": "_visible()", "attr.aria-label": "ariaLabel()", "attr.aria-valuenow": "_announcedValue()", "attr.aria-hidden": "_visible() ? null : \"true\"", "style.--hub-loading-bar-progress": "_fill()", "style.--hub-loading-bar-accent": "_accent()" }, classAttribute: "hub-loading-bar" }, ngImport: i0, template: "<span class=\"hub-loading-bar__indicator\"></span>\n", styles: [":where(.hub-loading-bar){--hub-loading-bar-accent: var(--hub-sys-color-primary, #0d6efd);--hub-loading-bar-height: 3px;--hub-loading-bar-track-bg: transparent;--hub-loading-bar-radius: 0;--hub-loading-bar-speed: .2s;--hub-loading-bar-fade: .3s;--hub-loading-bar-easing: linear;--hub-loading-bar-glow-color: var(--hub-loading-bar-accent);--hub-loading-bar-glow-blur: 10px;--hub-loading-bar-glow-spread: 1px;--hub-loading-bar-indeterminate-speed: 1.6s;--hub-loading-bar-offset: 0px;--hub-loading-bar-z-index: var(--hub-sys-zindex-sticky, 1020);--hub-loading-bar-progress: 0%;--hub-loading-bar-sweep-direction: 1}[dir=rtl] .hub-loading-bar,.hub-loading-bar[dir=rtl]{--hub-loading-bar-sweep-direction: -1}.hub-loading-bar{display:block;position:relative;overflow:hidden;inline-size:100%;block-size:var(--hub-loading-bar-height);background:var(--hub-loading-bar-track-bg);border-radius:var(--hub-loading-bar-radius);opacity:0;pointer-events:none;transition:opacity var(--hub-loading-bar-fade) ease}.hub-loading-bar--visible{opacity:1}.hub-loading-bar--overlay,.hub-loading-bar--fixed{inset-inline:0;z-index:var(--hub-loading-bar-z-index)}.hub-loading-bar--overlay{position:absolute}.hub-loading-bar--fixed{position:fixed}.hub-loading-bar--top{inset-block-start:var(--hub-loading-bar-offset)}.hub-loading-bar--bottom{inset-block-end:var(--hub-loading-bar-offset)}.hub-loading-bar__indicator{display:block;position:relative;inline-size:var(--hub-loading-bar-progress);block-size:100%;background:var(--hub-loading-bar-accent);border-radius:inherit}.hub-loading-bar--visible .hub-loading-bar__indicator{transition:inline-size var(--hub-loading-bar-speed) var(--hub-loading-bar-easing)}.hub-loading-bar--glow .hub-loading-bar__indicator:after{content:\"\";position:absolute;inset-block:0;inset-inline-end:0;inline-size:var(--hub-loading-bar-height);box-shadow:0 0 var(--hub-loading-bar-glow-blur) var(--hub-loading-bar-glow-spread) var(--hub-loading-bar-glow-color),0 0 calc(var(--hub-loading-bar-glow-blur) / 2) var(--hub-loading-bar-glow-color)}.hub-loading-bar--indeterminate .hub-loading-bar__indicator,.hub-loading-bar--visible.hub-loading-bar--indeterminate .hub-loading-bar__indicator{inline-size:33%;transition:none;animation:hub-loading-bar-sweep var(--hub-loading-bar-indeterminate-speed) ease-in-out infinite}@media(prefers-reduced-motion:reduce){.hub-loading-bar{--hub-loading-bar-indeterminate-speed: 3.2s}}@keyframes hub-loading-bar-sweep{0%{transform:translate(calc(-100% * var(--hub-loading-bar-sweep-direction)))}to{transform:translate(calc(300% * var(--hub-loading-bar-sweep-direction)))}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubLoadingBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hub-loading-bar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'hub-loading-bar',
+                        role: 'progressbar',
+                        'aria-valuemin': '0',
+                        'aria-valuemax': '100',
+                        '[class]': '_modifierClasses()',
+                        '[class.hub-loading-bar--visible]': '_visible()',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.aria-valuenow]': '_announcedValue()',
+                        '[attr.aria-hidden]': '_visible() ? null : "true"',
+                        '[style.--hub-loading-bar-progress]': '_fill()',
+                        '[style.--hub-loading-bar-accent]': '_accent()'
+                    }, template: "<span class=\"hub-loading-bar__indicator\"></span>\n", styles: [":where(.hub-loading-bar){--hub-loading-bar-accent: var(--hub-sys-color-primary, #0d6efd);--hub-loading-bar-height: 3px;--hub-loading-bar-track-bg: transparent;--hub-loading-bar-radius: 0;--hub-loading-bar-speed: .2s;--hub-loading-bar-fade: .3s;--hub-loading-bar-easing: linear;--hub-loading-bar-glow-color: var(--hub-loading-bar-accent);--hub-loading-bar-glow-blur: 10px;--hub-loading-bar-glow-spread: 1px;--hub-loading-bar-indeterminate-speed: 1.6s;--hub-loading-bar-offset: 0px;--hub-loading-bar-z-index: var(--hub-sys-zindex-sticky, 1020);--hub-loading-bar-progress: 0%;--hub-loading-bar-sweep-direction: 1}[dir=rtl] .hub-loading-bar,.hub-loading-bar[dir=rtl]{--hub-loading-bar-sweep-direction: -1}.hub-loading-bar{display:block;position:relative;overflow:hidden;inline-size:100%;block-size:var(--hub-loading-bar-height);background:var(--hub-loading-bar-track-bg);border-radius:var(--hub-loading-bar-radius);opacity:0;pointer-events:none;transition:opacity var(--hub-loading-bar-fade) ease}.hub-loading-bar--visible{opacity:1}.hub-loading-bar--overlay,.hub-loading-bar--fixed{inset-inline:0;z-index:var(--hub-loading-bar-z-index)}.hub-loading-bar--overlay{position:absolute}.hub-loading-bar--fixed{position:fixed}.hub-loading-bar--top{inset-block-start:var(--hub-loading-bar-offset)}.hub-loading-bar--bottom{inset-block-end:var(--hub-loading-bar-offset)}.hub-loading-bar__indicator{display:block;position:relative;inline-size:var(--hub-loading-bar-progress);block-size:100%;background:var(--hub-loading-bar-accent);border-radius:inherit}.hub-loading-bar--visible .hub-loading-bar__indicator{transition:inline-size var(--hub-loading-bar-speed) var(--hub-loading-bar-easing)}.hub-loading-bar--glow .hub-loading-bar__indicator:after{content:\"\";position:absolute;inset-block:0;inset-inline-end:0;inline-size:var(--hub-loading-bar-height);box-shadow:0 0 var(--hub-loading-bar-glow-blur) var(--hub-loading-bar-glow-spread) var(--hub-loading-bar-glow-color),0 0 calc(var(--hub-loading-bar-glow-blur) / 2) var(--hub-loading-bar-glow-color)}.hub-loading-bar--indeterminate .hub-loading-bar__indicator,.hub-loading-bar--visible.hub-loading-bar--indeterminate .hub-loading-bar__indicator{inline-size:33%;transition:none;animation:hub-loading-bar-sweep var(--hub-loading-bar-indeterminate-speed) ease-in-out infinite}@media(prefers-reduced-motion:reduce){.hub-loading-bar{--hub-loading-bar-indeterminate-speed: 3.2s}}@keyframes hub-loading-bar-sweep{0%{transform:translate(calc(-100% * var(--hub-loading-bar-sweep-direction)))}to{transform:translate(calc(300% * var(--hub-loading-bar-sweep-direction)))}}\n"] }]
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], glow: [{ type: i0.Input, args: [{ isSignal: true, alias: "glow", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/**
+ * Marks a request as invisible to the loading bar.
+ *
+ * The escape hatch is not a nicety. A poll on a timer, a heartbeat, an autosave — any
+ * request the reader did not ask for — would otherwise hold the bar open forever, and a
+ * progress bar that never finishes is worse than none.
+ */
+const HUB_LOADING_BAR_SKIP = new HttpContextToken(() => false);
+/**
+ * Builds the `HttpContext` that hides one request from the loading bar.
+ *
+ * @param context - Existing context to extend; a fresh one by default.
+ * @returns The context, with the skip flag set.
+ *
+ * @example
+ * ```typescript
+ * this.http.get('/api/notifications', { context: withoutHubLoadingBar() });
+ * ```
+ */
+function withoutHubLoadingBar(context = new HttpContext()) {
+    return context.set(HUB_LOADING_BAR_SKIP, true);
+}
+/**
+ * Holds the loading bar open for the lifetime of every HTTP request.
+ *
+ * The bar's reference counter is what makes this safe to combine with the router
+ * integration and with hand-written `start()` calls: six parallel requests are six
+ * callers, and the bar completes when the last of them does, not the first.
+ *
+ * `finalize` is the balancing point rather than a `tap` on success, because it also fires
+ * when the request errors and when the caller unsubscribes — a cancelled typeahead is the
+ * commonest way a naive interceptor strands the bar at 90%.
+ *
+ * Opt a request out with {@link withoutHubLoadingBar}.
+ *
+ * @example
+ * ```typescript
+ * provideHttpClient(withInterceptors([hubLoadingBarInterceptor]))
+ * ```
+ */
+const hubLoadingBarInterceptor = (req, next) => {
+    if (req.context.get(HUB_LOADING_BAR_SKIP)) {
+        return next(req);
+    }
+    const bar = inject(HubLoadingBarService);
+    bar.start();
+    return next(req).pipe(finalize(() => bar.complete()));
+};
+
+/** Every way a navigation can stop, successful or not. All four must release the bar. */
+function isNavigationSettled(event) {
+    return (event instanceof NavigationEnd ||
+        event instanceof NavigationCancel ||
+        event instanceof NavigationError ||
+        event instanceof NavigationSkipped);
+}
+/**
+ * Drives the loading bar from router navigation, which is the "page is loading" the bar
+ * is named after: it starts when a navigation begins and completes when it settles —
+ * including when it is cancelled by a guard or fails, because a bar left running after a
+ * rejected navigation is a bar that never goes away.
+ *
+ * Navigations are tracked with a flag rather than by pairing events one-to-one. The
+ * router's event sequence varies with configuration (a blocking initial navigation, a
+ * redirect, a skipped same-URL navigation), and the flag guarantees exactly one
+ * `start()` / `complete()` pair per navigation whatever order the events arrive in — a
+ * missed `NavigationStart` during bootstrap can no longer leave an unmatched `complete()`
+ * decrementing somebody else's count.
+ *
+ * Combine with {@link hubLoadingBarInterceptor} when routes fetch their own data: the
+ * navigation settles as soon as the component is created, so without the interceptor the
+ * bar finishes while the page is still empty.
+ *
+ * @returns Environment providers for the application bootstrap.
+ *
+ * @example
+ * ```typescript
+ * bootstrapApplication(AppComponent, {
+ *   providers: [provideRouter(routes), provideHubLoadingBarRouter()]
+ * });
+ * ```
+ */
+function provideHubLoadingBarRouter() {
+    return makeEnvironmentProviders([
+        provideAppInitializer(() => {
+            const router = inject(Router);
+            const bar = inject(HubLoadingBarService);
+            let navigating = false;
+            const subscription = router.events.subscribe((event) => {
+                if (event instanceof NavigationStart) {
+                    if (!navigating) {
+                        navigating = true;
+                        bar.start();
+                    }
+                    return;
+                }
+                if (isNavigationSettled(event) && navigating) {
+                    navigating = false;
+                    bar.complete();
+                }
+            });
+            inject(DestroyRef).onDestroy(() => subscription.unsubscribe());
+        })
+    ]);
+}
+
 /** Public API surface of ng-hub-ui-loading. */
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { HUB_LOADING_CONFIG, HUB_LOADING_DEFAULT_CONFIG, HubLoadingComponent, HubLoadingService, provideHubLoading };
+export { HUB_LOADING_BAR_CONFIG, HUB_LOADING_BAR_DEFAULT_CONFIG, HUB_LOADING_BAR_SKIP, HUB_LOADING_CONFIG, HUB_LOADING_DEFAULT_CONFIG, HubLoadingBarComponent, HubLoadingBarService, HubLoadingComponent, HubLoadingService, hubLoadingBarInterceptor, hubLoadingBarTrickle, provideHubLoading, provideHubLoadingBar, provideHubLoadingBarRouter, withoutHubLoadingBar };
 //# sourceMappingURL=ng-hub-ui-loading.mjs.map