@zambon-dev/shared 2.0.0 → 2.1.0

package/fesm2022/zambon-dev-shared.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { Component, inject, Injectable, ViewChild, HostListener, Input, EventEmitter, Output, NgModule, Pipe } from '@angular/core';
+import { Component, InjectionToken, inject, Injectable, ViewChild, HostListener, Input, EventEmitter, Output, NgModule, Pipe } from '@angular/core';
 import * as i1 from '@angular/router';
 import { RouterModule, Router, ActivatedRoute } from '@angular/router';
-import { AuthService, APP_CONFIG, TabService, Tab, TabsComponent, ButtonFiltersComponent, ModalBase, ChildList, ViewBase } from '@zambon-dev/framework';
-import { SidebarService, ModalComponent, SidebarComponent, DataGridDataset, DataGridComponent, DataProviderService } from '@zambon-dev/library';
-import { TranslatePipe, TranslateService, TranslateLoader, provideTranslateService } from '@ngx-translate/core';
-import { map, catchError, interval, mergeMap, tap, BehaviorSubject, Subject, take, takeUntil, finalize, shareReplay, switchMap, of } from 'rxjs';
+import { AuthService, APP_CONFIG, TabService, Tab, TabsComponent, ButtonFiltersComponent, TabViewBase, ButtonComponent, DefaultTabViewComponent, FRAMEWORK_VIEW_TYPE, FrameworkViewType, ModalBase, ChildList, ViewBase } from '@zambon-dev/framework';
+import { SidebarService, toSidebarMenuOpenMode, SidebarMenuOpenMode, ModalComponent, SidebarComponent, RibbonGroupComponent, DataGridDataset, DataGridComponent, DataProviderService } from '@zambon-dev/library';
+import { TranslateService, TranslatePipe, TranslateLoader, provideTranslateService } from '@ngx-translate/core';
+import { map, catchError, interval, mergeMap, tap, of, take, BehaviorSubject, Subject, takeUntil, finalize, shareReplay, switchMap } from 'rxjs';
 import { HttpClient, HttpBackend } from '@angular/common/http';
 import { JwtHelperService, JwtInterceptor } from '@auth0/angular-jwt';
 import { HubConnectionState, HubConnectionBuilder } from '@microsoft/signalr';
@@ -26,6 +26,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                     ], template: "<div class=\"background\"></div>\n\n<div class=\"container\">\n    <router-outlet></router-outlet>\n</div>", styles: [":host{display:block;height:100vh}.background{position:fixed;z-index:-50;height:100vh;width:100%;overflow:hidden}.background,.background:before{background-image:url(/background.jpg);background-size:cover;background-attachment:fixed}.background:before,.background:after{position:absolute;inset:0;--tw-content: \"\";content:var(--tw-content)}.background:before{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.background:after{background-color:#ffffff4d}.background *{z-index:10}.container{position:absolute;top:50%;left:50%;--tw-translate-x: -50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}\n"] }]
         }] });
 
+/** First segment of the route that hosts embedded external content. */
+const EXTERNAL_CONTENT_ROUTE_PATH = 'external-content';
+class ExternalContentConfigs {
+    /**
+     * Origins an embedded menu item may point at, for example `['https://reports.example.com']`.
+     * Empty — the default — allows any `http`/`https` origin.
+     *
+     * Populating it is the single highest-value control here after the scheme check: it narrows a
+     * compromised menu row from "frame anything on the internet" to "frame one of our report hosts".
+     */
+    allowedOrigins = [];
+    /** Milliseconds to wait for the frame's first `load` before hinting that framing may be refused. */
+    slowFrameHintDelay = 5000;
+    constructor(options = {}) {
+        Object.assign(this, options);
+    }
+}
+const EXTERNAL_CONTENT_CONFIGS = new InjectionToken('Embedded external content configuration', {
+    providedIn: 'root',
+    factory: () => new ExternalContentConfigs(),
+});
+
 class AuthenticationService extends AuthService {
     //#region ViewChilds, Inputs, Outputs
     //#endregion
@@ -95,6 +117,212 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * Remembers which external destination sits behind an embedded tab's `/external-content/:menuID`
+ * route, and resolves it back when the view is created.
+ *
+ * The destination never travels in the route, so the id has to be resolved to a URL somehow. That
+ * happens in three steps, cheapest first:
+ *
+ * 1. the in-memory registry — the item was clicked in this browsing session;
+ * 2. `sessionStorage` — the user pressed F5 on the embedded tab;
+ * 3. the application's `SidebarService.getMenuFromUrl()` — a cold deep link.
+ *
+ * Step 3 reuses the abstract hook every application already implements, so nothing new is required
+ * of a consumer: an application whose menu endpoint cannot resolve `/external-content/:id` simply
+ * gets the unavailable state on a cold deep link, which is the documented behaviour.
+ */
+class ExternalContentService {
+    //#region Variables
+    maxEntries = 20;
+    storageKey = 'zambon.externalContent';
+    registry = new Map();
+    sidebarService = inject(SidebarService);
+    //#endregion
+    //#region Properties
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    //#endregion
+    //#region Public methods
+    /** Resolves the destination behind an embedded tab, or `undefined` when it cannot be recovered. */
+    find(menuID) {
+        const known = this.registry.get(menuID) ?? this.readFromStorage(menuID);
+        if (!!known) {
+            return of(known);
+        }
+        return this.sidebarService.getMenuFromUrl(`/${EXTERNAL_CONTENT_ROUTE_PATH}/${menuID}`)
+            .pipe(take(1), map((menu) => !!menu && !!menu.url ? this.toEntry(menu) : undefined), 
+        // A menu endpoint that does not know this route shape answers 404, which is an expected
+        // outcome here rather than a failure: the view falls back to its unavailable state.
+        catchError(() => of(undefined)));
+    }
+    /** Remembers a menu so its embedded tab survives a page refresh. */
+    register(menu) {
+        const entry = this.toEntry(menu);
+        this.registry.set(entry.id, entry);
+        this.writeToStorage(entry);
+    }
+    //#endregion
+    //#region Private methods
+    readAllFromStorage() {
+        try {
+            const raw = window.sessionStorage.getItem(this.storageKey);
+            if (!raw) {
+                return [];
+            }
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            // A poisoned or unavailable storage entry must never take the application down; the view
+            // degrades to asking the user to reopen the item from the menu.
+            return [];
+        }
+    }
+    readFromStorage(menuID) {
+        const entry = this.readAllFromStorage()
+            .find((candidate) => candidate?.id === menuID);
+        if (!!entry && !!entry.url) {
+            this.registry.set(entry.id, entry);
+            return entry;
+        }
+        return undefined;
+    }
+    toEntry(menu) {
+        return {
+            id: menu.id,
+            label: menu.label,
+            url: menu.url ?? '',
+        };
+    }
+    writeToStorage(entry) {
+        try {
+            const entries = [
+                entry,
+                ...this.readAllFromStorage().filter((candidate) => candidate?.id !== entry.id),
+            ].slice(0, this.maxEntries);
+            window.sessionStorage.setItem(this.storageKey, JSON.stringify(entries));
+        }
+        catch {
+            // Storage can be unavailable (private mode, blocked site data). Losing refresh support is
+            // acceptable; failing the click is not.
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ExternalContentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ExternalContentService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ExternalContentService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/**
+ * Resolves the runtime placeholders in an external menu URL, and vets the result before it is
+ * handed to the browser.
+ *
+ * Placeholder syntax is `{name}`, case-sensitive, drawn from a **closed** set:
+ *
+ * | Token        | Source                                              |
+ * |--------------|-----------------------------------------------------|
+ * | `{email}`    | `ICurrentUserInfo.email`                            |
+ * | `{language}` | `TranslateService.currentLang`, then `defaultLang`  |
+ * | `{userId}`   | `ICurrentUserInfo.userID`                           |
+ * | `{userName}` | `ICurrentUserInfo.username`                         |
+ *
+ * The set is closed by construction rather than reflected off the stored user info, and that is a
+ * security property, not a style choice: `AuthenticationService` persists the entire sign-in
+ * response under `userInfo`, tokens included, so a reflective implementation would let a menu URL
+ * configured as `?t={token}` hand the JWT to a third party. No authentication token is ever
+ * substituted.
+ */
+class ExternalUrlResolverService {
+    //#region Variables
+    authenticationService = inject(AuthenticationService);
+    translate = inject(TranslateService);
+    /** Placeholder grammar, used only to *detect* tokens this version does not know. */
+    unknownPlaceholderPattern = /\{[A-Za-z][A-Za-z0-9_]*\}/g;
+    //#endregion
+    //#region Properties
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    //#endregion
+    //#region Public methods
+    /**
+     * Whether `url` is an absolute `http`/`https` address.
+     *
+     * Rejects relative paths, malformed values, protocol-relative `//host/path` (which throws
+     * without a base), and the schemes that would execute rather than navigate: `javascript:`,
+     * `data:`, `blob:`, `file:`.
+     */
+    isAllowed(url) {
+        let parsed;
+        try {
+            parsed = new URL(url);
+        }
+        catch {
+            return false;
+        }
+        return parsed.protocol === 'http:' || parsed.protocol === 'https:';
+    }
+    /**
+     * Substitutes every known placeholder, URL-encoding each value.
+     *
+     * Because every value is percent-encoded, a placeholder must occupy one *whole* value — a full
+     * path segment, or a full query-parameter value. Encoding is what stops a display name that
+     * contains `&` from injecting an extra query parameter into the destination.
+     *
+     * A known placeholder with no value becomes an empty string; an unrecognized `{…}` is left
+     * exactly as configured, so a report URL that legitimately contains braces is not corrupted.
+     */
+    resolve(url) {
+        if (!url || url.indexOf('{') === -1) {
+            return url;
+        }
+        const values = this.getPlaceholderValues();
+        let resolved = url;
+        values.forEach((value, token) => {
+            if (resolved.indexOf(token) === -1) {
+                return;
+            }
+            if (value.length === 0) {
+                console.warn(`External URL placeholder ${token} has no value for the current user; substituting an empty string.`, url);
+            }
+            // split/join rather than String.replace: replace() interprets `$&` and `$1` in the
+            // replacement text, and without a global regex it would only swap the first occurrence.
+            resolved = resolved.split(token).join(encodeURIComponent(value));
+        });
+        this.warnAboutUnknownPlaceholders(url, resolved);
+        return resolved;
+    }
+    //#endregion
+    //#region Private methods
+    getPlaceholderValues() {
+        const user = this.authenticationService.getUserInfo();
+        return new Map([
+            ['{email}', user?.email ?? ''],
+            ['{language}', this.translate.currentLang || this.translate.defaultLang || ''],
+            ['{userId}', user?.userID?.toString() ?? ''],
+            ['{userName}', user?.username ?? ''],
+        ]);
+    }
+    warnAboutUnknownPlaceholders(url, resolved) {
+        const unknown = resolved.match(this.unknownPlaceholderPattern) ?? [];
+        if (unknown.length > 0) {
+            console.warn(`External URL contains unrecognized placeholders and was left as configured: ${unknown.join(', ')}`, url);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ExternalUrlResolverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ExternalUrlResolverService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ExternalUrlResolverService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 /**
  * Streams top-bar notifications from a SignalR hub.
  *
@@ -488,6 +716,8 @@ class MainLayoutComponent {
     //#region Variables
     authenticationService = inject(AuthenticationService);
     destroy$ = new Subject();
+    externalContentService = inject(ExternalContentService);
+    externalUrlResolverService = inject(ExternalUrlResolverService);
     router = inject(Router);
     sidebarService = inject(SidebarService);
     tabService = inject(TabService);
@@ -506,12 +736,21 @@ class MainLayoutComponent {
         if (url !== '/' && !this.tabService.isUrlOpen(url)) {
             this.sidebarService.getMenuFromUrl(url)
                 .pipe(take(1))
-                .subscribe((item) => {
-                if (!!item) {
-                    this.tabService.updateTabTitle(url, item.label);
-                }
+                .subscribe({
+                next: (item) => {
+                    if (!!item) {
+                        this.tabService.updateTabTitle(url, item.label);
+                    }
+                },
+                // A deep-linked title is best-effort. Menu endpoints answer 404 for a URL they do not
+                // know -- the embedded-content route among them -- and that must not surface as an
+                // unhandled rejection.
+                error: () => undefined,
             });
         }
+        this.sidebarService.menuExternalUrlSelected
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((item) => this.openExternalMenu(item));
         this.sidebarService.menuUrlSelected
             .pipe(takeUntil(this.destroy$))
             .subscribe((item) => {
@@ -533,6 +772,33 @@ class MainLayoutComponent {
         this.authenticationService.signOut();
         this.router.navigate(['/login']);
     }
+    //#endregion
+    //#region Private methods
+    openExternalMenu(item) {
+        const rawUrl = item.url ?? '';
+        if (rawUrl.length === 0) {
+            return;
+        }
+        if (toSidebarMenuOpenMode(item.openMode) === SidebarMenuOpenMode.ExternalEmbedded) {
+            // The tab has to be a real Angular route, so the destination travels by menu id and is
+            // resolved by ExternalContentComponent. A `?url=` query string would collapse every
+            // embedded tab into one -- TabService and CustomReuseStrategy key tabs on path segments
+            // only -- and would also let anyone frame an arbitrary site inside our own chrome.
+            this.externalContentService.register(item);
+            const tab = new Tab({
+                title: item.label,
+                url: `/${EXTERNAL_CONTENT_ROUTE_PATH}/${item.id}`,
+            });
+            this.tabService.openTab(tab);
+            return;
+        }
+        const url = this.externalUrlResolverService.resolve(rawUrl);
+        if (!this.externalUrlResolverService.isAllowed(url)) {
+            console.error(`Sidebar menu "${item.label}" points to an unsupported external address and was not opened.`, url);
+            return;
+        }
+        window.open(url, '_blank', 'noopener,noreferrer');
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MainLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: MainLayoutComponent, isStandalone: true, selector: "shared-main-layout", viewQueries: [{ propertyName: "logoutModal", first: true, predicate: ["logoutModal"], descendants: true }], ngImport: i0, template: "<div class=\"main-container\">\n    <div class=\"sidebar-region\">\n        <lib-sidebar>\n            @if (appVersion) {\n                <span>v{{ appVersion }}</span>\n            }\n        </lib-sidebar>\n    </div>\n\n    <shared-top-bar class=\"toolbar\" (logout)=\"onLogoutClick()\"></shared-top-bar>\n\n    <div class=\"content\">\n        <framework-tabs>\n            <router-outlet></router-outlet>\n        </framework-tabs>\n    </div>\n</div>\n\n<lib-modal #logoutModal position=\"top\" size=\"xl\" [closeButtonText]=\"'Main-Logout-Modal-Message-Cancel' | translate\">\n    <div body>\n        <h5>{{ 'Main-Logout-Modal-Message' | translate }}</h5>\n    </div>\n    <div footer>\n        <button type=\"button\" class=\"btn red-600\" (click)=\"onLogoutConfirm()\">{{ 'Main-Logout-Modal-Message-Confirm' | translate }}</button>\n    </div>\n</lib-modal>", styles: ["@reference \"tailwindcss\";.main-container{display:grid;height:100vh;max-height:100vh;width:100vw;max-width:100%;background:var(--app-backdrop);grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:\"toolbar toolbar\" \"sidebar content\"}.main-container .sidebar-region{padding:.75rem;grid-area:sidebar}.main-container .toolbar{display:flex;justify-content:space-between;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(214 211 209 / var(--tw-border-opacity, 1));background-color:#ffffffe6;padding:.5rem;--tw-shadow: 0 0 4px 0 rgba(0,0,0,.2), 0 3px 20px 0 rgba(0,0,0,.19);--tw-shadow-colored: 0 0 4px 0 var(--tw-shadow-color), 0 3px 20px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);grid-area:toolbar}.main-container .content{overflow-y:auto;padding:.75rem .75rem .5rem;grid-area:content}.main-container framework-tabs{height:100%}lib-modal h5{margin-bottom:.5rem;font-size:1.125rem;font-weight:500;line-height:1.25rem}\n"], dependencies: [{ kind: "component", type: ModalComponent, selector: "lib-modal", inputs: ["closeButtonText", "dialog", "modalProcessing", "position", "size", "title"], outputs: ["closed"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: SidebarComponent, selector: "lib-sidebar" }, { kind: "component", type: TabsComponent, selector: "framework-tabs" }, { kind: "component", type: TopBarComponent, selector: "shared-top-bar", outputs: ["logout"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
@@ -771,6 +1037,204 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                 args: [ButtonFiltersComponent]
             }] } });
 
+/**
+ * Displays an external destination inside an application tab.
+ *
+ * Routed as `/external-content/:menuID` — the destination itself never travels in the URL, so no
+ * one can hand-craft a link that makes the application frame an arbitrary site.
+ *
+ * A `TabViewBase` like any other screen, so its actions live in the ribbon rather than in a
+ * bar of its own: it must be routed under `DefaultTabViewComponent`, which is what renders the
+ * `#ribbon` template this view publishes. Use the exported `externalContentRoutes`.
+ */
+class ExternalContentComponent extends TabViewBase {
+    //#region ViewChilds, Inputs, Outputs
+    //#endregion
+    //#region Variables
+    frameUrl;
+    isBlocked = false;
+    isFrameLoading = false;
+    isSlow = false;
+    isUnavailable = false;
+    label = '';
+    resolvedUrl = '';
+    activatedRoute = inject(ActivatedRoute);
+    configs = inject(EXTERNAL_CONTENT_CONFIGS);
+    externalContentService = inject(ExternalContentService);
+    externalUrlResolverService = inject(ExternalUrlResolverService);
+    sanitizer = inject(DomSanitizer);
+    slowHintTimeout;
+    tabService = inject(TabService);
+    //#endregion
+    //#region Properties
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    constructor() {
+        super();
+    }
+    ngOnDestroy() {
+        this.clearSlowHint();
+        super.ngOnDestroy();
+    }
+    ngOnInit() {
+        const menuID = Number(this.activatedRoute.snapshot.paramMap.get('menuID'));
+        if (!menuID) {
+            this.isUnavailable = true;
+            this.loading = false;
+            return;
+        }
+        this.externalContentService.find(menuID)
+            .pipe(take(1), takeUntil(this.destroy$))
+            .subscribe((entry) => this.show(entry));
+    }
+    //#endregion
+    //#region Event handlers
+    onFrameLoad() {
+        this.clearSlowHint();
+        this.isFrameLoading = false;
+        this.isSlow = false;
+    }
+    onOpenInNewTab() {
+        window.open(this.resolvedUrl, '_blank', 'noopener,noreferrer');
+    }
+    onReload() {
+        const url = this.frameUrl;
+        if (!url || this.isFrameLoading) {
+            return;
+        }
+        // The frame is cross-origin, so its location cannot be touched from here: destroying the
+        // element and building a new one is the only way to make it navigate again. That also clears
+        // the previous render, which is the point -- otherwise a reload leaves the old content on
+        // screen and the user cannot tell whether anything happened.
+        //
+        // The rebuild has to wait for a macrotask, not a microtask. Angular coalesces changes within a
+        // change-detection cycle, so setting frameUrl back before the next tick means @if sees the
+        // value go A -> undefined -> A and never toggles: the element is never destroyed, nothing
+        // navigates, no `load` ever fires, and the view spins until the timeout gives up. Yielding to
+        // a timeout lets a cycle run with the frame unmounted, which is what really tears it down.
+        this.frameUrl = undefined;
+        this.isFrameLoading = true;
+        setTimeout(() => this.displayFrame(url));
+    }
+    //#endregion
+    //#region Public methods
+    //#endregion
+    //#region Private methods
+    clearSlowHint() {
+        if (this.slowHintTimeout !== undefined) {
+            clearTimeout(this.slowHintTimeout);
+            this.slowHintTimeout = undefined;
+        }
+    }
+    isOriginAllowed(url) {
+        if (this.configs.allowedOrigins.length === 0) {
+            return true;
+        }
+        try {
+            return this.configs.allowedOrigins.indexOf(new URL(url).origin) !== -1;
+        }
+        catch {
+            return false;
+        }
+    }
+    show(entry) {
+        // TabViewBase starts every screen loading so its ribbon buttons begin disabled; every exit
+        // from here has to clear it or they never become usable.
+        this.loading = false;
+        if (!entry || !entry.url) {
+            this.isUnavailable = true;
+            return;
+        }
+        this.label = entry.label;
+        // MainLayoutComponent only resolves a deep-linked title through getMenuFromUrl, and a Tab
+        // starts with isTitleLoading true, so a tab re-created by TabsComponent after a refresh would
+        // spin forever if nothing set its title. Setting it here is idempotent.
+        this.tabService.updateActiveTabRootTitle(entry.label);
+        // Order matters: resolve, then validate, then trust. What we vet has to be exactly what the
+        // browser receives, and a placeholder is substituted before the scheme can be inspected.
+        const url = this.externalUrlResolverService.resolve(entry.url);
+        if (!this.externalUrlResolverService.isAllowed(url) || !this.isOriginAllowed(url)) {
+            console.error(`Embedded menu item "${entry.label}" points to an address that is not allowed and was not displayed.`, url);
+            this.isBlocked = true;
+            return;
+        }
+        this.resolvedUrl = url;
+        // Trusted once, into a field. From a getter or a pipe this would hand back a new
+        // SafeResourceUrl on every change-detection pass, and Angular would re-set the iframe's src
+        // and reload the destination each time.
+        this.displayFrame(this.sanitizer.bypassSecurityTrustResourceUrl(url));
+    }
+    displayFrame(url) {
+        this.isFrameLoading = true;
+        this.frameUrl = url;
+        this.startSlowHint();
+    }
+    startSlowHint() {
+        this.clearSlowHint();
+        // Not detection, and it must never be turned into one: whether a site refuses to be framed
+        // (X-Frame-Options, CSP frame-ancestors) is not observable from JavaScript. A refused frame
+        // usually fires `load` immediately and renders the browser's own error page, in which case
+        // this hint never appears -- the ribbon's "open in a new browser tab" button is the actual
+        // way out, and it is always present.
+        this.slowHintTimeout = setTimeout(() => {
+            // Stop claiming it is loading. A destination that never reports `load` -- a refused frame
+            // among them -- would otherwise spin forever and keep the actions disabled; hand the
+            // controls back and let the hint do the explaining.
+            this.isFrameLoading = false;
+            this.isSlow = true;
+        }, this.configs.slowFrameHintDelay);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ExternalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: ExternalContentComponent, isStandalone: true, selector: "shared-external-content", usesInheritance: true, ngImport: i0, template: "<!-- Published to DefaultTabViewComponent through TabViewService, so the actions sit in the\n     application's ribbon like every other screen's. -->\n<ng-template #ribbon>\n    <lib-ribbon-group [label]=\"'RibbonGroup-Page' | translate\">\n        <!-- Same icon and label as framework-button-refresh, so reloading a report reads as the\n             same action as refreshing a grid. `loading` is what spins it while the frame loads. -->\n        <framework-button\n        icon=\"fa-sync-alt\"\n        label=\"Button-Refresh\"\n        [disabled]=\"!resolvedUrl\"\n        [loading]=\"isFrameLoading\"\n        (action)=\"onReload()\">\n        </framework-button>\n\n        <framework-button\n        icon=\"fa-arrow-up-right-from-square\"\n        label=\"ExternalContent-OpenInNewTab\"\n        [disabled]=\"!resolvedUrl\"\n        (action)=\"onOpenInNewTab()\">\n        </framework-button>\n    </lib-ribbon-group>\n</ng-template>\n\n@if (isUnavailable) {\n    <div class=\"external-content-message\">\n        <i class=\"fa-solid fa-link-slash\"></i>\n        <span class=\"external-content-message-title\">{{ 'ExternalContent-Unavailable-Title' | translate }}</span>\n        <span>{{ 'ExternalContent-Unavailable-Message' | translate }}</span>\n    </div>\n} @else if (isBlocked) {\n    <div class=\"external-content-message\">\n        <i class=\"fa-solid fa-triangle-exclamation\"></i>\n        <span class=\"external-content-message-title\">{{ 'ExternalContent-Blocked-Title' | translate }}</span>\n        <span>{{ 'ExternalContent-Blocked-Message' | translate }}</span>\n    </div>\n} @else {\n    @if (isSlow) {\n        <div class=\"external-content-hint\">{{ 'ExternalContent-SlowHint' | translate }}</div>\n    }\n\n    @if (frameUrl || isFrameLoading) {\n        <!--\n            The container stays mounted across a reload, which briefly clears frameUrl, so the panel\n            does not flicker out and back. What goes away is the frame itself, on purpose.\n\n            sandbox and referrerpolicy are STATIC attributes on purpose. Angular rejects `sandbox`\n            as a binding on an <iframe> outright (NG0910) \u2014 it may only be a static attribute \u2014 and\n            the whole element then fails to render.\n\n            The token list is fixed for every destination, and deliberately not configurable per\n            menu item:\n            - allow-same-origin keeps the frame in the destination's own origin so its cookies and\n              storage work; without it an SSO'd report will not render. It grants no access to ours,\n              provided the destination is cross-origin -- never point an embedded item at this\n              application's own origin, use an internal route for that.\n            - allow-top-navigation is absent on purpose: a framed site must not be able to navigate\n              the whole application away.\n            - allow-popups-to-escape-sandbox keeps print and download popups usable.\n        -->\n        <div class=\"external-content-frame-container\">\n            @if (isFrameLoading) {\n                <div class=\"external-content-loading\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                        <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n                    </svg>\n\n                    <span>{{ 'Loading' | translate }}</span>\n                </div>\n            }\n\n            @if (frameUrl) {\n                <iframe class=\"external-content-frame\"\n                sandbox=\"allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-downloads\"\n                referrerpolicy=\"strict-origin-when-cross-origin\"\n                [src]=\"frameUrl\"\n                [attr.title]=\"label | translate\"\n                (load)=\"onFrameLoad()\">\n                </iframe>\n            }\n        </div>\n    }\n}\n", styles: [":host{display:flex;flex-grow:1;flex-direction:column;gap:.5rem;overflow:hidden;min-height:0}.external-content-hint{flex:none;border-radius:.5rem;border-width:1px;padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;--tw-border-opacity: 1;border-color:rgb(252 211 77 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(254 243 199 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(120 53 15 / var(--tw-text-opacity, 1))}.external-content-frame-container{border-radius:.5rem;border-width:1px;border-color:#d1d5dbe6;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));position:relative;display:flex;flex-grow:1;overflow:hidden;min-height:0}.external-content-loading{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;gap:.5rem;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.external-content-loading svg{height:1.5rem;min-height:1.5rem;width:1.5rem;min-width:1.5rem}@keyframes spin{to{transform:rotate(360deg)}}.external-content-loading svg{animation:spin 1s linear infinite}.external-content-frame{width:100%;flex-grow:1;border-width:0px;min-height:0}.external-content-message{border-radius:.5rem;border-width:1px;border-color:#d1d5dbe6;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));display:flex;flex-grow:1;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.5rem;text-align:center}.external-content-message i{font-size:2.25rem;line-height:2.5rem;opacity:.4}.external-content-message .external-content-message-title{font-size:1.125rem;line-height:1.75rem;font-weight:600}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "framework-button", inputs: ["color", "icon", "label"], outputs: ["action"] }, { kind: "component", type: RibbonGroupComponent, selector: "lib-ribbon-group", inputs: ["label"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ExternalContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shared-external-content', imports: [
+                        ButtonComponent,
+                        RibbonGroupComponent,
+                        TranslatePipe,
+                    ], template: "<!-- Published to DefaultTabViewComponent through TabViewService, so the actions sit in the\n     application's ribbon like every other screen's. -->\n<ng-template #ribbon>\n    <lib-ribbon-group [label]=\"'RibbonGroup-Page' | translate\">\n        <!-- Same icon and label as framework-button-refresh, so reloading a report reads as the\n             same action as refreshing a grid. `loading` is what spins it while the frame loads. -->\n        <framework-button\n        icon=\"fa-sync-alt\"\n        label=\"Button-Refresh\"\n        [disabled]=\"!resolvedUrl\"\n        [loading]=\"isFrameLoading\"\n        (action)=\"onReload()\">\n        </framework-button>\n\n        <framework-button\n        icon=\"fa-arrow-up-right-from-square\"\n        label=\"ExternalContent-OpenInNewTab\"\n        [disabled]=\"!resolvedUrl\"\n        (action)=\"onOpenInNewTab()\">\n        </framework-button>\n    </lib-ribbon-group>\n</ng-template>\n\n@if (isUnavailable) {\n    <div class=\"external-content-message\">\n        <i class=\"fa-solid fa-link-slash\"></i>\n        <span class=\"external-content-message-title\">{{ 'ExternalContent-Unavailable-Title' | translate }}</span>\n        <span>{{ 'ExternalContent-Unavailable-Message' | translate }}</span>\n    </div>\n} @else if (isBlocked) {\n    <div class=\"external-content-message\">\n        <i class=\"fa-solid fa-triangle-exclamation\"></i>\n        <span class=\"external-content-message-title\">{{ 'ExternalContent-Blocked-Title' | translate }}</span>\n        <span>{{ 'ExternalContent-Blocked-Message' | translate }}</span>\n    </div>\n} @else {\n    @if (isSlow) {\n        <div class=\"external-content-hint\">{{ 'ExternalContent-SlowHint' | translate }}</div>\n    }\n\n    @if (frameUrl || isFrameLoading) {\n        <!--\n            The container stays mounted across a reload, which briefly clears frameUrl, so the panel\n            does not flicker out and back. What goes away is the frame itself, on purpose.\n\n            sandbox and referrerpolicy are STATIC attributes on purpose. Angular rejects `sandbox`\n            as a binding on an <iframe> outright (NG0910) \u2014 it may only be a static attribute \u2014 and\n            the whole element then fails to render.\n\n            The token list is fixed for every destination, and deliberately not configurable per\n            menu item:\n            - allow-same-origin keeps the frame in the destination's own origin so its cookies and\n              storage work; without it an SSO'd report will not render. It grants no access to ours,\n              provided the destination is cross-origin -- never point an embedded item at this\n              application's own origin, use an internal route for that.\n            - allow-top-navigation is absent on purpose: a framed site must not be able to navigate\n              the whole application away.\n            - allow-popups-to-escape-sandbox keeps print and download popups usable.\n        -->\n        <div class=\"external-content-frame-container\">\n            @if (isFrameLoading) {\n                <div class=\"external-content-loading\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                        <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n                    </svg>\n\n                    <span>{{ 'Loading' | translate }}</span>\n                </div>\n            }\n\n            @if (frameUrl) {\n                <iframe class=\"external-content-frame\"\n                sandbox=\"allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-downloads\"\n                referrerpolicy=\"strict-origin-when-cross-origin\"\n                [src]=\"frameUrl\"\n                [attr.title]=\"label | translate\"\n                (load)=\"onFrameLoad()\">\n                </iframe>\n            }\n        </div>\n    }\n}\n", styles: [":host{display:flex;flex-grow:1;flex-direction:column;gap:.5rem;overflow:hidden;min-height:0}.external-content-hint{flex:none;border-radius:.5rem;border-width:1px;padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;--tw-border-opacity: 1;border-color:rgb(252 211 77 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(254 243 199 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(120 53 15 / var(--tw-text-opacity, 1))}.external-content-frame-container{border-radius:.5rem;border-width:1px;border-color:#d1d5dbe6;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));position:relative;display:flex;flex-grow:1;overflow:hidden;min-height:0}.external-content-loading{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;gap:.5rem;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.external-content-loading svg{height:1.5rem;min-height:1.5rem;width:1.5rem;min-width:1.5rem}@keyframes spin{to{transform:rotate(360deg)}}.external-content-loading svg{animation:spin 1s linear infinite}.external-content-frame{width:100%;flex-grow:1;border-width:0px;min-height:0}.external-content-message{border-radius:.5rem;border-width:1px;border-color:#d1d5dbe6;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));display:flex;flex-grow:1;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.5rem;text-align:center}.external-content-message i{font-size:2.25rem;line-height:2.5rem;opacity:.4}.external-content-message .external-content-message-title{font-size:1.125rem;line-height:1.75rem;font-weight:600}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Route table for embedded external content. Spread it into `MainLayoutComponent`'s children:
+ *
+ * ```ts
+ * { path: '', component: MainLayoutComponent, canActivate: [AuthGuard], children: [
+ *   ...externalContentRoutes,
+ *   // the application's own features
+ * ] }
+ * ```
+ *
+ * Three things about the shape are load-bearing and must not be "simplified" away:
+ *
+ * - The path is nested one segment per route. `RouteHelper.getRouteURL` and
+ *   `CustomReuseStrategy.getUrlFromRoute` collect segments walking up the parent chain and then
+ *   reverse the flat list, so a route declared `'external-content/:menuID'` rebuilds as
+ *   `/:menuID/external-content` and every tab URL is wrong.
+ * - `DefaultTabViewComponent` hosts the view. It is what renders the `#ribbon` template the
+ *   component publishes, so dropping it leaves the Reload and Open-in-a-new-browser-tab actions
+ *   with nowhere to appear.
+ * - `FRAMEWORK_VIEW_TYPE` must be present. `TabsComponent` re-creates the tab after a page refresh
+ *   by looking for a `Details` or `List` view in the activated route tree, and navigates to `/`
+ *   when it finds neither — the embedded tab would vanish on F5.
+ */
+const externalContentRoutes = [
+    {
+        path: EXTERNAL_CONTENT_ROUTE_PATH,
+        children: [
+            {
+                path: ':menuID',
+                component: DefaultTabViewComponent,
+                data: { [FRAMEWORK_VIEW_TYPE]: FrameworkViewType.List },
+                children: [
+                    { path: '', component: ExternalContentComponent },
+                ],
+            },
+        ],
+    },
+];
+
 class OperationsHistoryDataset extends DataGridDataset {
     //#region ViewChilds, Inputs, Outputs
     //#endregion
@@ -1131,6 +1595,7 @@ const ZAMBON_SHARED_I18N_ASSET = {
     output: ZAMBON_SHARED_I18N_ASSET_PATH,
 };
 const ZAMBON_SHARED_I18N_RESOURCES = [
+    { prefix: `/${ZAMBON_SHARED_I18N_ASSET_PATH}/external-content/`, suffix: '.json' },
     { prefix: `/${ZAMBON_SHARED_I18N_ASSET_PATH}/language-selector/`, suffix: '.json' },
     { prefix: `/${ZAMBON_SHARED_I18N_ASSET_PATH}/login/`, suffix: '.json' },
     { prefix: `/${ZAMBON_SHARED_I18N_ASSET_PATH}/operations-history/`, suffix: '.json' },
@@ -1160,5 +1625,5 @@ function provideZambonSharedTranslateService(config = {}) {
  * Generated bundle index. Do not edit.
  */
 
-export { AuthGuard, AuthInterceptor, AuthenticationService, BrandComponent, BypassHtmlSanitizerPipe, EnumLabelPipe, EnvironmentBadgeComponent, FiltersBase, LoginLayoutComponent, MainLayoutComponent, NotificationsComponent, NotificationsService, OperationsHistoryChildListComponent, OperationsHistoryModalComponent, OperationsHistoryService, ServicesHistoryChildListComponent, ServicesHistoryService, ServicesHistoryViewComponent, SharedAuthModule, TopBarComponent, UserProfileComponent, UtcDatePipe, ZAMBON_SHARED_I18N_ASSET, ZAMBON_SHARED_I18N_ASSET_PATH, ZAMBON_SHARED_I18N_RESOURCES, createZambonSharedTranslateLoader, provideZambonSharedTranslateLoader, provideZambonSharedTranslateService };
+export { AuthGuard, AuthInterceptor, AuthenticationService, BrandComponent, BypassHtmlSanitizerPipe, EXTERNAL_CONTENT_CONFIGS, EXTERNAL_CONTENT_ROUTE_PATH, EnumLabelPipe, EnvironmentBadgeComponent, ExternalContentComponent, ExternalContentConfigs, ExternalContentService, ExternalUrlResolverService, FiltersBase, LoginLayoutComponent, MainLayoutComponent, NotificationsComponent, NotificationsService, OperationsHistoryChildListComponent, OperationsHistoryModalComponent, OperationsHistoryService, ServicesHistoryChildListComponent, ServicesHistoryService, ServicesHistoryViewComponent, SharedAuthModule, TopBarComponent, UserProfileComponent, UtcDatePipe, ZAMBON_SHARED_I18N_ASSET, ZAMBON_SHARED_I18N_ASSET_PATH, ZAMBON_SHARED_I18N_RESOURCES, createZambonSharedTranslateLoader, externalContentRoutes, provideZambonSharedTranslateLoader, provideZambonSharedTranslateService };
 //# sourceMappingURL=zambon-dev-shared.mjs.map