@mohamedatia/fly-design-system 2.7.0 → 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, ChangeDetectionStrategy, Component, Pipe, DOCUMENT, ElementRef, input, output, HostListener, ViewChild, 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, 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';
@@ -550,17 +550,40 @@ class FlyRemoteRouter {
      * ```
      */
     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
@@ -569,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);
     }
     /**
@@ -579,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);
     }
     /**
@@ -590,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
@@ -616,6 +652,161 @@ 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
@@ -4028,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_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, matchFlyRoutePattern, 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