@mohamedatia/fly-design-system 2.6.4 → 2.7.1

package/fesm2022/mohamedatia-fly-design-system.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, signal, computed, Injectable, inject, ErrorHandler, PLATFORM_ID, Pipe, DOCUMENT, ElementRef, input, output, HostListener, ViewChild, ChangeDetectionStrategy, Component, EventEmitter, DestroyRef, Output, Input, forwardRef, Injector, viewChild, effect, afterNextRender, ViewEncapsulation, model, Directive } from '@angular/core';
+import { InjectionToken, signal, computed, Injectable, inject, ErrorHandler, PLATFORM_ID, DestroyRef, ChangeDetectionStrategy, Component, Pipe, DOCUMENT, ElementRef, input, output, HostListener, ViewChild, EventEmitter, Output, Input, forwardRef, Injector, viewChild, effect, afterNextRender, ViewEncapsulation, model, Directive } from '@angular/core';
 import * as i1$1 from '@angular/common';
-import { isPlatformBrowser, CommonModule, DOCUMENT as DOCUMENT$1 } from '@angular/common';
+import { isPlatformBrowser, NgComponentOutlet, CommonModule, DOCUMENT as DOCUMENT$1 } from '@angular/common';
 import { Router, NavigationEnd } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { of, ReplaySubject, Subject } from 'rxjs';
 import * as i1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { switchMap, debounceTime, distinctUntilChanged, filter } from 'rxjs/operators';
 import { HttpClient, HttpEventType } from '@angular/common/http';
 import Cropper from 'cropperjs';
@@ -375,6 +375,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
             type: Injectable
         }] });
 
+/**
+ * Optional injection token a remote provides at its root to declare which routes
+ * `<fly-remote-router-outlet>` should resolve. Provided WITHIN the remote (not
+ * the shell), e.g.:
+ *
+ * ```ts
+ * @Component({
+ *   providers: [
+ *     FlyRemoteRouter,
+ *     { provide: FLY_REMOTE_ROUTES, useValue: CIRCLES_ROUTES },
+ *   ],
+ * })
+ * export class CirclesComponent { }
+ * ```
+ *
+ * If no routes are provided, `FlyRemoteRouter.matchedRoute()` is always `null`
+ * and the outlet renders nothing — useful for remotes that don't need internal
+ * routing.
+ */
+const FLY_REMOTE_ROUTES = new InjectionToken('FLY_REMOTE_ROUTES');
+/**
+ * Match a route's path pattern against URL segments. Returns the captured params
+ * map on a successful match, or `null` if the pattern can't match. Empty path
+ * matches only an empty segments array.
+ *
+ * Exported for unit testing — most consumers should rely on
+ * `FlyRemoteRouter.matchedRoute()`.
+ */
+function matchFlyRoutePattern(pattern, segments) {
+    const patternSegments = pattern.split('/').filter(Boolean);
+    if (patternSegments.length !== segments.length)
+        return null;
+    const params = {};
+    for (let i = 0; i < patternSegments.length; i++) {
+        const p = patternSegments[i];
+        const s = segments[i];
+        if (p.startsWith(':')) {
+            params[p.slice(1)] = decodeURIComponent(s);
+        }
+        else if (p !== s) {
+            return null;
+        }
+    }
+    return params;
+}
+
 /**
  * FlyOS standard navigation surface for Business / Supporting App remotes.
  *
@@ -437,6 +483,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
 class FlyRemoteRouter {
     windowData = inject(WINDOW_DATA, { optional: true });
     router = inject(Router, { optional: true });
+    /**
+     * Optional route table — if the remote provides `FLY_REMOTE_ROUTES`,
+     * `matchedRoute` / `params` resolve against it. Unset means the consumer is
+     * driving its own switch/template — `matchedRoute` stays `null`.
+     */
+    routes = inject(FLY_REMOTE_ROUTES, { optional: true }) ?? [];
     /**
      * True when this remote is rendered inside the FlyOS desktop shell.
      *
@@ -469,17 +521,69 @@ class FlyRemoteRouter {
         const u = this._url();
         return u.split('?')[0].split('#')[0].split('/').filter(Boolean);
     }, ...(ngDevMode ? [{ debugName: "segments" }] : /* istanbul ignore next */ []));
+    /**
+     * First route from `FLY_REMOTE_ROUTES` whose pattern matches `segments()`,
+     * paired with its captured params. `null` when no routes are registered or
+     * none matches. Used by `<fly-remote-router-outlet>` to pick what to render.
+     *
+     * Match order: routes are tried in declaration order. Put more specific
+     * patterns (e.g. `'signals/:id'`) before catch-alls.
+     */
+    matchedRoute = computed(() => {
+        const segs = this.segments();
+        for (const route of this.routes) {
+            const params = matchFlyRoutePattern(route.path, segs);
+            if (params != null)
+                return { route, params };
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "matchedRoute" }] : /* istanbul ignore next */ []));
+    /**
+     * Captured route params from the active route, e.g. `{ id: 'abc' }` for a
+     * `'signals/:id'` match on `/signals/abc`. Empty object if no route matched
+     * or the matched route has no captures.
+     *
+     * Components can read this directly:
+     * ```ts
+     * private readonly flyRouter = inject(FlyRemoteRouter);
+     * readonly signalId = computed(() => this.flyRouter.params()['id'] ?? '');
+     * ```
+     */
+    params = computed(() => this.matchedRoute()?.params ?? {}, ...(ngDevMode ? [{ debugName: "params" }] : /* istanbul ignore next */ []));
+    destroyRef = inject(DestroyRef);
     constructor() {
         if (!this.isEmbedded && this.router) {
-            // Seed with the current standalone URL so consumers can read `segments()`
-            // synchronously during initial render, before any NavigationEnd fires.
+            // Standalone: seed from Angular Router and track NavigationEnd events so
+            // browser back/forward (which the host Router handles) keep segments() current.
             this._url.set(this.router.url);
-            this.router.events.subscribe(event => {
+            this.router.events
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(event => {
                 if (event instanceof NavigationEnd) {
                     this._url.set(event.urlAfterRedirects);
                 }
             });
         }
+        else if (this.isEmbedded) {
+            // Embedded: seed from current browser location on initial load.
+            if (typeof window !== 'undefined') {
+                this._url.set(window.location.pathname || '/');
+                // Listen for browser back/forward so segments() stays in sync with
+                // history entries pushed by navigate() / navigateByUrl().
+                const onPopState = (event) => {
+                    const state = event.state;
+                    // Prefer the URL we stashed in the history state; fall back to pathname.
+                    const url = state?.flyRemoteUrl ?? window.location.pathname ?? '/';
+                    this._url.set(url.startsWith('/') ? url : '/' + url);
+                };
+                window.addEventListener('popstate', onPopState);
+                // Defensive cleanup — the service is providedIn: 'root' so this fires
+                // only when the whole Angular app is destroyed, but it keeps things tidy.
+                this.destroyRef.onDestroy(() => {
+                    window.removeEventListener('popstate', onPopState);
+                });
+            }
+        }
     }
     /**
      * Navigate to a route, identified by an array of commands as you would pass
@@ -488,9 +592,11 @@ class FlyRemoteRouter {
      */
     navigate(commands, extras) {
         if (!this.isEmbedded && this.router) {
+            // Standalone: Angular Router owns history — pushState semantics are the default.
             return this.router.navigate(commands, extras);
         }
-        this._url.set(this.buildUrl(commands));
+        const url = this.buildUrl(commands);
+        this._pushEmbedded(url);
         return Promise.resolve(true);
     }
     /**
@@ -498,9 +604,10 @@ class FlyRemoteRouter {
      */
     navigateByUrl(url, extras) {
         if (!this.isEmbedded && this.router) {
+            // Standalone: Angular Router owns history — pushState semantics are the default.
             return this.router.navigateByUrl(url, extras);
         }
-        this._url.set(url.startsWith('/') ? url : '/' + url);
+        this._pushEmbedded(url.startsWith('/') ? url : '/' + url);
         return Promise.resolve(true);
     }
     /**
@@ -509,16 +616,26 @@ class FlyRemoteRouter {
      * so the browser's back stack is respected.
      */
     back() {
-        if (!this.isEmbedded) {
-            if (typeof history !== 'undefined')
-                history.back();
-            return;
+        // Both modes: delegate to the browser's history stack. In embedded mode we
+        // now push real history entries in navigate() / navigateByUrl(), so
+        // history.back() triggers popstate and the listener updates segments().
+        if (typeof history !== 'undefined') {
+            history.back();
         }
-        const segs = [...this.segments()];
-        if (segs.length === 0)
-            return;
-        segs.pop();
-        this._url.set('/' + segs.join('/'));
+    }
+    /**
+     * In embedded mode: push a real browser history entry (so back/forward work)
+     * and update the internal signal synchronously.
+     *
+     * The state object carries `flyRemoteUrl` so the popstate listener can
+     * restore the exact URL without relying on window.location.pathname (which
+     * could be the shell's route, not the remote's logical URL).
+     */
+    _pushEmbedded(url) {
+        if (typeof history !== 'undefined') {
+            history.pushState({ flyRemoteUrl: url }, '', url);
+        }
+        this._url.set(url);
     }
     buildUrl(commands) {
         const parts = commands
@@ -535,6 +652,226 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
+/**
+ * fly-remote-styles — Shell-layer CSS loader for Native Federation remotes.
+ *
+ * Problem
+ * -------
+ * Federated remotes only ship JS chunks via Native Federation — their global
+ * `styles.css` (or its hashed equivalent) never loads in the shell, so any
+ * global CSS selector (e.g. `.circles-overlay`) silently breaks in embedded
+ * mode.
+ *
+ * Solution
+ * --------
+ * On first mount of each remote, the shell calls `loadRemoteStyles(appId,
+ * remoteBaseUrl)`. This function:
+ *   1. Derives the remote's `index.html` URL from `remoteBaseUrl`.
+ *   2. Fetches it (one network round-trip per remote, browser-cached thereafter).
+ *   3. Parses the HTML with DOMParser to extract the first
+ *      `<link rel="stylesheet">` — the hashed production stylesheet
+ *      (e.g. `styles-ABC123.css`). This is Strategy (b): index.html discovery.
+ *   4. Injects `<link rel="stylesheet" data-fly-app="<appId>">` into
+ *      `document.head`. Idempotent: if an identical href is already present,
+ *      the call is a no-op. If the href differs (hot upgrade), it is replaced.
+ *
+ * Why strategy (b)?
+ * -----------------
+ * (a) Unhashed `styles.css` — requires remote build config changes (out of scope).
+ * (b) Parse remote `index.html` — one tiny fetch per remote; browser caches it;
+ *     works today without any remote changes.
+ * (c) `stylesUrl` in manifest/remoteEntry.json — cleanest long-term; requires
+ *     protocol change to every remote's CI pipeline (out of scope for Wave A1).
+ *
+ * Unload decision
+ * ---------------
+ * `unloadRemoteStyles` is exported for symmetry but should NOT be called on
+ * normal window close. Keeping styles loaded across remounts avoids FOUC
+ * flicker when the user reopens the same app. The stylesheet is a few KB; the
+ * memory cost is negligible. Only call `unloadRemoteStyles` if you are certain
+ * the remote will never be opened again in this session (e.g. licence revoke).
+ *
+ * Caveats
+ * -------
+ * - CORS: the remote's dev/prod server must serve `index.html` with a
+ *   permissive `Access-Control-Allow-Origin` header (or be same-origin via
+ *   the YARP gateway). The fetch uses `credentials: 'omit'` to avoid
+ *   credential-carrying preflights.
+ * - Race on rapid mount/unmount: if `loadRemoteStyles` is called a second time
+ *   for the same appId while the first fetch is still in-flight, the second
+ *   call joins the same in-flight Promise (idempotency guard at fetch level).
+ * - Angular hashing: Angular's production build hashes the stylesheet filename.
+ *   DOMParser picks the first `<link rel="stylesheet">` in `<head>`, which is
+ *   the single global stylesheet Angular emits. If a remote emits multiple
+ *   stylesheets, only the first is loaded — acceptable for Wave A1.
+ */
+/** Per-appId cache of the resolved stylesheet href (or `null` if not found). */
+const _resolvedHref = new Map();
+/** In-flight fetch promises keyed by appId — prevents duplicate fetches. */
+const _inFlight = new Map();
+/**
+ * Discovers the hashed stylesheet href from the remote's `index.html`.
+ * Returns `null` if no stylesheet `<link>` is found or the fetch fails.
+ */
+async function _discoverStylesheetHref(remoteBaseUrl) {
+    const indexUrl = remoteBaseUrl.replace(/\/$/, '') + '/index.html';
+    try {
+        const res = await fetch(indexUrl, {
+            credentials: 'omit',
+            cache: 'default',
+        });
+        if (!res.ok)
+            return null;
+        const html = await res.text();
+        const doc = new DOMParser().parseFromString(html, 'text/html');
+        // Find the first stylesheet link in <head> — Angular emits exactly one.
+        const link = doc.head.querySelector('link[rel="stylesheet"]');
+        if (!link?.href)
+            return null;
+        // `link.href` from DOMParser is resolved relative to the parser's base,
+        // which defaults to `about:blank`. We get the raw `href` attribute instead.
+        const rawHref = link.getAttribute('href') ?? '';
+        if (!rawHref)
+            return null;
+        // If the remote emits an absolute URL, use it as-is; otherwise resolve
+        // against remoteBaseUrl.
+        if (rawHref.startsWith('http://') || rawHref.startsWith('https://') || rawHref.startsWith('//')) {
+            return rawHref;
+        }
+        return remoteBaseUrl.replace(/\/$/, '') + '/' + rawHref.replace(/^\//, '');
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Injects the remote's stylesheet into `document.head`.
+ *
+ * @param appId       - Stable identifier for the remote app (matches `DesktopApp.id`).
+ * @param remoteBaseUrl - Base URL of the remote, e.g. `https://circles.example.com`
+ *                        or `http://localhost:7202`. Must NOT include `/remoteEntry.json`.
+ *
+ * The call is idempotent:
+ *  - If a `<link data-fly-app="appId">` with the same href already exists → no-op.
+ *  - If the href differs (hot upgrade) → existing link is replaced.
+ *  - If no stylesheet is found in `index.html` → no-op (logged as a warning).
+ */
+async function loadRemoteStyles(appId, remoteBaseUrl) {
+    if (typeof document === 'undefined')
+        return; // SSR guard
+    // Kick off or join an in-flight fetch for this appId.
+    let fetchPromise = _inFlight.get(appId);
+    if (!fetchPromise) {
+        if (_resolvedHref.has(appId)) {
+            // Already resolved in a previous call — skip the fetch.
+            fetchPromise = Promise.resolve(_resolvedHref.get(appId) ?? null);
+        }
+        else {
+            fetchPromise = _discoverStylesheetHref(remoteBaseUrl);
+            _inFlight.set(appId, fetchPromise);
+        }
+    }
+    const href = await fetchPromise;
+    _inFlight.delete(appId);
+    _resolvedHref.set(appId, href);
+    if (!href) {
+        console.warn(`[FlyOS] loadRemoteStyles: no stylesheet found in ${remoteBaseUrl}/index.html for appId="${appId}"`);
+        return;
+    }
+    const existing = document.head.querySelector(`link[data-fly-app="${CSS.escape(appId)}"]`);
+    if (existing) {
+        if (existing.getAttribute('href') === href)
+            return; // identical — no-op
+        // Hot upgrade: replace href.
+        existing.setAttribute('href', href);
+        return;
+    }
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.setAttribute('data-fly-app', appId);
+    link.href = href;
+    document.head.appendChild(link);
+}
+/**
+ * Removes the injected stylesheet for `appId` from `document.head`.
+ *
+ * NOTE: Prefer NOT calling this on normal window close — keeping styles loaded
+ * prevents FOUC flicker when the user reopens the same app. Call only if you
+ * are certain the remote will not be reopened in this session.
+ */
+function unloadRemoteStyles(appId) {
+    if (typeof document === 'undefined')
+        return; // SSR guard
+    const link = document.head.querySelector(`link[data-fly-app="${CSS.escape(appId)}"]`);
+    link?.parentNode?.removeChild(link);
+    _resolvedHref.delete(appId);
+}
+
+/**
+ * Outlet for FlyOS-embedded routing. Renders the component associated with the
+ * first matching route in the consumer's `FLY_REMOTE_ROUTES` table, reacting to
+ * `FlyRemoteRouter.navigate(...)` calls.
+ *
+ * Use this **only in embedded mode**. Standalone remotes should keep their
+ * `<router-outlet>` — `FlyRemoteRouter.navigate` delegates to Angular's Router
+ * there, and this outlet would just shadow it.
+ *
+ * Recommended pattern in a remote's root component:
+ * ```html
+ * @if (router.isEmbedded) {
+ *   <fly-remote-router-outlet />
+ * } @else {
+ *   <router-outlet />
+ * }
+ * ```
+ *
+ * Why both? Standalone keeps full Angular routing — query params, guards,
+ * resolvers, lazy loading, RouterLink. Embedded gets a stripped-down
+ * synchronous outlet that matches against the same route table the remote
+ * declared via `FLY_REMOTE_ROUTES`. The same `router.navigate(['/foo', id])`
+ * call works in both modes; only the rendering surface differs.
+ *
+ * Limitations vs. `<router-outlet>`:
+ * - Synchronous components only (no `loadComponent` / `loadChildren`).
+ * - No guards / resolvers / data resolution.
+ * - No query-param / hash handling — only path segments.
+ * - No `RouterLink` directive — use `(click)="router.navigate(...)"`.
+ *
+ * Components rendered by this outlet read route params via `FlyRemoteRouter.params`:
+ * ```ts
+ * private readonly router = inject(FlyRemoteRouter);
+ * readonly id = computed(() => this.router.params()['id'] ?? '');
+ * ```
+ */
+class FlyRemoteRouterOutletComponent {
+    router = inject(FlyRemoteRouter);
+    /**
+     * Read directly from FlyRemoteRouter so the outlet re-renders whenever the
+     * URL changes (signal-based, OnPush-friendly).
+     */
+    matched = this.router.matchedRoute;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FlyRemoteRouterOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: FlyRemoteRouterOutletComponent, isStandalone: true, selector: "fly-remote-router-outlet", ngImport: i0, template: `
+    @if (matched(); as m) {
+      <ng-container *ngComponentOutlet="m.route.component" />
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FlyRemoteRouterOutletComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fly-remote-router-outlet',
+                    standalone: true,
+                    imports: [NgComponentOutlet],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @if (matched(); as m) {
+      <ng-container *ngComponentOutlet="m.route.component" />
+    }
+  `,
+                }]
+        }] });
+
 /**
  * Translates a key using the shared I18nService.
  *
@@ -3882,5 +4219,5 @@ const AUDIENCE_ERROR_CODES = {
  * Generated bundle index. Do not edit.
  */
 
-export { AGENT_DRAG_MIME, AGENT_PAYLOAD_VERSION, AUDIENCE_ERROR_CODES, AUDIENCE_LIMITS, AUDIENCE_PRESETS, AUDIENCE_TERM_KINDS, AgentCommandRegistry, AgentDropRegistry, AgentPayloadOversizeError, AudienceBuilderComponent, AuthService, ContextMenuComponent, DEFAULT_AGENT_PAYLOAD_LIMITS, DEFAULT_FLY_THEME_MODE, DialogResult, FLY_LOCALE_CATALOG, FLY_THEME_MODE_IDS, FlyAgentDraggableDirective, FlyBlockUiComponent, FlyFileUploadComponent, FlyImageUploadComponent, FlyRemoteRouter, FlyThemeService, I18nService, LAUNCH_CONTEXT, MessageBoxButtons, MessageBoxComponent, MessageBoxIcon, MessageBoxService, MockAuthService, RTL_LOCALE_SET, SHARE_ORG_CHART_SYSTEM_KEY_APPS, SHARE_ORG_CHART_SYSTEM_KEY_DEFAULT, SHARE_PANEL_DEFAULT_FILE_LEVELS, SharePanelComponent, StandaloneWindowManagerService, TranslatePipe, WINDOW_DATA, WindowManagerService, findLocaleByDialect, findLocaleByPrefix, isRtlLocale, isRtlLocaleEntry, normalizeFlyTheme, trimAgentPayload, trimAgentString, utf8ByteLength, validateAgentPayload };
+export { AGENT_DRAG_MIME, AGENT_PAYLOAD_VERSION, AUDIENCE_ERROR_CODES, AUDIENCE_LIMITS, AUDIENCE_PRESETS, AUDIENCE_TERM_KINDS, AgentCommandRegistry, AgentDropRegistry, AgentPayloadOversizeError, AudienceBuilderComponent, AuthService, ContextMenuComponent, DEFAULT_AGENT_PAYLOAD_LIMITS, DEFAULT_FLY_THEME_MODE, DialogResult, FLY_LOCALE_CATALOG, FLY_REMOTE_ROUTES, FLY_THEME_MODE_IDS, FlyAgentDraggableDirective, FlyBlockUiComponent, FlyFileUploadComponent, FlyImageUploadComponent, FlyRemoteRouter, FlyRemoteRouterOutletComponent, FlyThemeService, I18nService, LAUNCH_CONTEXT, MessageBoxButtons, MessageBoxComponent, MessageBoxIcon, MessageBoxService, MockAuthService, RTL_LOCALE_SET, SHARE_ORG_CHART_SYSTEM_KEY_APPS, SHARE_ORG_CHART_SYSTEM_KEY_DEFAULT, SHARE_PANEL_DEFAULT_FILE_LEVELS, SharePanelComponent, StandaloneWindowManagerService, TranslatePipe, WINDOW_DATA, WindowManagerService, findLocaleByDialect, findLocaleByPrefix, isRtlLocale, isRtlLocaleEntry, loadRemoteStyles, matchFlyRoutePattern, normalizeFlyTheme, trimAgentPayload, trimAgentString, unloadRemoteStyles, utf8ByteLength, validateAgentPayload };
 //# sourceMappingURL=mohamedatia-fly-design-system.mjs.map