@mohamedatia/fly-design-system 2.6.4 → 2.7.0

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

@@ -1,7 +1,7 @@
 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, 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 * 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 { of, ReplaySubject, Subject } from 'rxjs';
 import * as i1 from '@angular/forms';
@@ -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,6 +521,35 @@ 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 */ []));
     constructor() {
         if (!this.isEmbedded && this.router) {
             // Seed with the current standalone URL so consumers can read `segments()`
@@ -535,6 +616,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
+/**
+ * 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 +4028,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, matchFlyRoutePattern, normalizeFlyTheme, trimAgentPayload, trimAgentString, utf8ByteLength, validateAgentPayload };
 //# sourceMappingURL=mohamedatia-fly-design-system.mjs.map