@platform-mesh/portal-ui-lib 0.49.42 → 0.50.0

package/fesm2022/platform-mesh-portal-ui-lib-portal-options.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, DestroyRef } from '@angular/core';
+import { inject, Injectable, DestroyRef, signal, ViewChild, ChangeDetectionStrategy, Component, ApplicationRef, EnvironmentInjector, createComponent } from '@angular/core';
 import { I18nService, EntityType, AuthService, LuigiCoreService, ConfigService, EnvConfigService, LocalStorageKeys } from '@openmfp/portal-ui-lib';
 import '@ui5/webcomponents/dist/Breadcrumbs.js';
 import '@ui5/webcomponents/dist/BreadcrumbsItem.js';
@@ -10,6 +10,8 @@ import { isNamespacedResource, generateGraphQLFields, mergeListWithSubscriptionR
 import '@ui5/webcomponents/dist/ComboBox.js';
 import { Subject, defer, of, firstValueFrom } from 'rxjs';
 import { shareReplay, retry, takeUntil, switchMap, startWith, scan, tap, catchError } from 'rxjs/operators';
+import { CommonModule } from '@angular/common';
+import { DomSanitizer } from '@angular/platform-browser';
 
 class CustomGlobalNodesServiceImpl {
     constructor() {
@@ -334,6 +336,485 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+const OPEN_PERSISTENT_PANEL_MESSAGE = 'portal.open-provider-panel';
+const PROVIDER_PANEL_MESSAGE = {
+    close: 'portal.provider-panel.close',
+    closeFailed: 'portal.provider-panel.close-failed',
+    closed: 'portal.provider-panel.closed',
+    context: 'portal.provider-panel.context',
+    ready: 'portal.provider-panel.ready',
+    requestClose: 'portal.provider-panel.request-close',
+};
+function mergePersistentPanelTargets(current, update) {
+    const organizationChanged = current.organization !== undefined &&
+        update.organization !== undefined &&
+        current.organization !== update.organization;
+    const accountChanged = current.account !== undefined &&
+        update.account !== undefined &&
+        current.account !== update.account;
+    if (organizationChanged || accountChanged) {
+        return structuredClone(update);
+    }
+    // Provider nodes normally contain only panel capability metadata. Keep the
+    // target tracked by navigation and overlay any bounded scope that the
+    // requesting node does carry.
+    return structuredClone({ ...current, ...update });
+}
+const panelIdPattern = /^[a-z0-9](?:[a-z0-9.-]{0,62}[a-z0-9])?$/;
+const workspaceSegmentPattern = /^[a-z0-9](?:[-a-z0-9]{0,61}[a-z0-9])?$/;
+function parsePersistentPanelConfig(message, providerNode, portalOrigin) {
+    if (message.id !== OPEN_PERSISTENT_PANEL_MESSAGE) {
+        throw new Error('Persistent panel request is invalid');
+    }
+    const capability = recordValue(providerNode?.context?.persistentPanel);
+    const id = boundedString(capability['id'], 64);
+    const title = boundedString(capability['title'], 80);
+    if (!id || !panelIdPattern.test(id)) {
+        throw new Error('Registered persistent panel id is invalid');
+    }
+    if (!title) {
+        throw new Error('Registered persistent panel title is invalid');
+    }
+    const registeredViewUrl = boundedString(providerNode?.viewUrl, 2048);
+    if (!registeredViewUrl) {
+        throw new Error('Registered provider UI URL is missing');
+    }
+    const portalURL = new URL(portalOrigin);
+    const url = new URL(registeredViewUrl, portalURL);
+    if (url.origin === portalURL.origin ||
+        !allowedPanelURL(url, portalURL) ||
+        url.username ||
+        url.password) {
+        throw new Error('Registered provider UI URL is invalid');
+    }
+    return { id, title, url: url.toString(), origin: url.origin };
+}
+function allowedPanelURL(url, portalURL) {
+    if (url.protocol === 'https:') {
+        return true;
+    }
+    return (portalURL.protocol === 'http:' &&
+        url.protocol === 'http:' &&
+        ['localhost', '127.0.0.1', '[::1]'].includes(url.hostname));
+}
+function persistentPanelTarget(globalContext, nodeContext) {
+    const context = { ...globalContext, ...(nodeContext ?? {}) };
+    const entityContext = recordValue(context['entityContext']);
+    const accountContext = recordValue(entityContext['account']);
+    const resourceDefinition = recordValue(context['resourceDefinition']);
+    const organization = boundedString(context['organization'], 253);
+    const organizationId = boundedString(context['organizationId'], 512);
+    const rawAccountPath = boundedString(context['accountPath'], 1024);
+    const account = boundedString(accountContext['id'], 253) ||
+        boundedString(context['accountId'], 253) ||
+        boundedString(context['core_platform-mesh_io_accountId'], 253) ||
+        accountFromPath(rawAccountPath, organization) ||
+        accountFromEntity(context);
+    // Organization-only scope is valid, but descendants without an account are
+    // not. Organization context can carry a kcpPath, so fail closed before
+    // projecting workspace fields.
+    if (!account) {
+        return compact({ organization, organizationId });
+    }
+    const accountPath = validatedAccountPath(rawAccountPath, organization, account);
+    const workspacePath = validatedWorkspacePath(context['workspacePath'], organization, account) ||
+        validatedWorkspacePath(context['kcpPath'], organization, account) ||
+        validatedWorkspacePath(rawAccountPath, organization, account) ||
+        canonicalAccountPath(organization, account);
+    const namespace = boundedString(context['namespaceId'], 253) ||
+        boundedString(resourceDefinition['namespace'], 253);
+    const resource = compact({
+        group: boundedString(resourceDefinition['group'], 253) ||
+            boundedString(resourceDefinition['apiGroup'], 253),
+        version: boundedString(resourceDefinition['version'], 63),
+        kind: boundedString(resourceDefinition['kind'], 253) ||
+            boundedString(context['entityKind'], 253),
+        name: boundedString(context['entityName'], 253),
+    });
+    return compact({
+        organization,
+        organizationId,
+        account,
+        accountPath,
+        workspacePath,
+        namespace,
+        resource: Object.keys(resource).length > 0 ? resource : undefined,
+    });
+}
+function accountFromPath(accountPath, organization) {
+    if (!accountPath) {
+        return undefined;
+    }
+    if (workspaceSegmentPattern.test(accountPath)) {
+        return accountPath;
+    }
+    const segments = accountPath.split(':');
+    if (segments.length < 4 ||
+        segments[0] !== 'root' ||
+        segments[1] !== 'orgs' ||
+        segments.some((segment) => !workspaceSegmentPattern.test(segment)) ||
+        (organization !== undefined && segments[2] !== organization)) {
+        return undefined;
+    }
+    return boundedString(segments.at(-1), 253);
+}
+function accountFromEntity(context) {
+    if (boundedString(context['entityKind'], 253) !== 'Account') {
+        return undefined;
+    }
+    return boundedString(context['entityName'], 253);
+}
+function canonicalWorkspacePath(accountPath) {
+    if (!accountPath?.startsWith('root:')) {
+        return undefined;
+    }
+    const segments = accountPath.split(':');
+    if (segments.length < 3 ||
+        segments.some((segment) => !workspaceSegmentPattern.test(segment))) {
+        return undefined;
+    }
+    return accountPath;
+}
+function validatedWorkspacePath(value, organization, account) {
+    if (!organization || !account) {
+        return undefined;
+    }
+    const path = canonicalWorkspacePath(boundedString(value, 1024));
+    const segments = path?.split(':');
+    if (!segments ||
+        segments.length < 4 ||
+        segments[0] !== 'root' ||
+        segments[1] !== 'orgs' ||
+        segments[2] !== organization ||
+        segments.at(-1) !== account) {
+        return undefined;
+    }
+    return path;
+}
+function validatedAccountPath(value, organization, account) {
+    if (!value) {
+        return undefined;
+    }
+    if (workspaceSegmentPattern.test(value)) {
+        return value === account ? value : undefined;
+    }
+    return validatedWorkspacePath(value, organization, account);
+}
+function canonicalAccountPath(organization, account) {
+    if (!organization ||
+        !account ||
+        !workspaceSegmentPattern.test(organization) ||
+        !workspaceSegmentPattern.test(account)) {
+        return undefined;
+    }
+    return `root:orgs:${organization}:${account}`;
+}
+function compact(value) {
+    return Object.fromEntries(Object.entries(value).filter(([, item]) => item !== undefined));
+}
+function boundedString(value, maxLength) {
+    if (typeof value !== 'string') {
+        return undefined;
+    }
+    const trimmed = value.trim();
+    if (!trimmed || trimmed.length > maxLength || trimmed.includes('\u0000')) {
+        return undefined;
+    }
+    return trimmed;
+}
+function isRecord$1(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function recordValue(value) {
+    return isRecord$1(value) ? value : {};
+}
+
+class PersistentPanelComponent {
+    constructor() {
+        this.state = signal('hidden', ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+        this.title = signal('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.source = signal(null, ...(ngDevMode ? [{ debugName: "source" }] : /* istanbul ignore next */ []));
+        this.closing = signal(false, ...(ngDevMode ? [{ debugName: "closing" }] : /* istanbul ignore next */ []));
+        this.closeError = signal('', ...(ngDevMode ? [{ debugName: "closeError" }] : /* istanbul ignore next */ []));
+        this.sanitizer = inject(DomSanitizer);
+        this.config = null;
+        this.target = {};
+        this.sequence = 0;
+        this.closeSequence = 0;
+        this.closeTimeout = null;
+        this.closeRequestIdSent = null;
+        this.destroyed = false;
+        this.ready = false;
+        this.returnFocusElement = null;
+        this.onMessage = (event) => {
+            const frame = this.panelFrame?.nativeElement;
+            if (!frame ||
+                event.source !== frame.contentWindow ||
+                event.origin !== this.config?.origin ||
+                !isRecord(event.data)) {
+                return;
+            }
+            if (event.data['type'] === PROVIDER_PANEL_MESSAGE.ready) {
+                this.ready = true;
+                if (this.closing()) {
+                    this.requestCloseIfReady(this.closeSequence);
+                }
+                else {
+                    this.publishTarget();
+                }
+            }
+            if (event.data['type'] === PROVIDER_PANEL_MESSAGE.requestClose) {
+                this.close();
+            }
+            if (event.data['type'] === PROVIDER_PANEL_MESSAGE.closeFailed &&
+                typeof event.data['requestId'] === 'number' &&
+                event.data['requestId'] === this.closeRequestIdSent) {
+                this.failClose(event.data['requestId']);
+            }
+            if (event.data['type'] === PROVIDER_PANEL_MESSAGE.closed &&
+                typeof event.data['requestId'] === 'number') {
+                this.finishClose(event.data['requestId']);
+            }
+        };
+        window.addEventListener('message', this.onMessage);
+    }
+    ngOnDestroy() {
+        this.destroyed = true;
+        window.removeEventListener('message', this.onMessage);
+        this.clearCloseTimeout();
+    }
+    open(config, target) {
+        if (this.closing()) {
+            this.closeSequence += 1;
+        }
+        this.clearCloseTimeout();
+        this.closeRequestIdSent = null;
+        this.closing.set(false);
+        this.closeError.set('');
+        const sourceChanged = this.config?.url !== config.url;
+        if (!this.source()) {
+            this.returnFocusElement =
+                document.activeElement instanceof HTMLElement
+                    ? document.activeElement
+                    : null;
+        }
+        if (sourceChanged) {
+            this.ready = false;
+        }
+        this.config = config;
+        this.target = structuredClone(target);
+        this.title.set(config.title);
+        if (sourceChanged || !this.source()) {
+            this.source.set(this.sanitizer.bypassSecurityTrustResourceUrl(config.url));
+        }
+        this.state.set('expanded');
+        queueMicrotask(() => {
+            if (this.destroyed) {
+                return;
+            }
+            this.publishTarget();
+            this.focusPanel();
+        });
+    }
+    updateTarget(target) {
+        this.target = structuredClone(target);
+        this.publishTarget();
+    }
+    collapse() {
+        this.state.set('hidden');
+        queueMicrotask(() => {
+            if (this.destroyed) {
+                return;
+            }
+            this.reopenButton?.nativeElement.focus();
+        });
+    }
+    expand() {
+        this.state.set('expanded');
+        queueMicrotask(() => {
+            if (this.destroyed) {
+                return;
+            }
+            this.focusPanel();
+        });
+    }
+    toggleSize() {
+        this.state.update((state) => state === 'maximized' ? 'expanded' : 'maximized');
+    }
+    close() {
+        if (!this.source() || this.closing()) {
+            return;
+        }
+        this.closeSequence += 1;
+        const requestId = this.closeSequence;
+        this.closeRequestIdSent = null;
+        this.closing.set(true);
+        this.closeError.set('');
+        this.state.set('hidden');
+        this.focusReturnTarget();
+        this.requestCloseIfReady(requestId);
+        this.closeTimeout = window.setTimeout(() => {
+            this.failClose(requestId);
+        }, 30_000);
+    }
+    failClose(requestId) {
+        if (!this.closing() || requestId !== this.closeSequence) {
+            return;
+        }
+        this.clearCloseTimeout();
+        this.closeRequestIdSent = null;
+        this.closing.set(false);
+        this.closeError.set('Provider cleanup is incomplete. Try closing again.');
+        this.state.set('expanded');
+        queueMicrotask(() => {
+            if (this.destroyed) {
+                return;
+            }
+            this.focusPanel();
+        });
+    }
+    finishClose(requestId) {
+        if (!this.closing() ||
+            requestId !== this.closeSequence ||
+            this.closeRequestIdSent !== requestId) {
+            return;
+        }
+        this.clearCloseTimeout();
+        this.closeRequestIdSent = null;
+        this.closing.set(false);
+        this.closeError.set('');
+        this.config = null;
+        this.ready = false;
+        this.source.set(null);
+        this.title.set('');
+        this.state.set('hidden');
+        this.focusReturnTarget();
+        this.returnFocusElement = null;
+    }
+    clearCloseTimeout() {
+        if (this.closeTimeout !== null) {
+            window.clearTimeout(this.closeTimeout);
+            this.closeTimeout = null;
+        }
+    }
+    frameLoaded() {
+        this.publishTarget();
+    }
+    publishTarget() {
+        if (!this.config) {
+            return;
+        }
+        this.sequence += 1;
+        this.post({
+            type: PROVIDER_PANEL_MESSAGE.context,
+            panelId: this.config.id,
+            sequence: this.sequence,
+            target: this.target,
+        });
+    }
+    requestCloseIfReady(requestId) {
+        if (!this.ready ||
+            !this.closing() ||
+            requestId !== this.closeSequence ||
+            this.closeRequestIdSent === requestId) {
+            return;
+        }
+        this.closeRequestIdSent = requestId;
+        this.post({ type: PROVIDER_PANEL_MESSAGE.close, requestId });
+    }
+    focusPanel() {
+        this.panelFrame?.nativeElement.focus?.();
+    }
+    focusReturnTarget() {
+        if (this.returnFocusElement?.isConnected) {
+            this.returnFocusElement.focus();
+        }
+    }
+    post(message) {
+        if (!this.config) {
+            return;
+        }
+        this.panelFrame?.nativeElement.contentWindow?.postMessage(message, this.config.origin);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PersistentPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PersistentPanelComponent, isStandalone: true, selector: "pm-persistent-panel", viewQueries: [{ propertyName: "panelFrame", first: true, predicate: ["panelFrame"], descendants: true }, { propertyName: "reopenButton", first: true, predicate: ["reopenButton"], descendants: true }], ngImport: i0, template: "<section\n  class=\"persistent-panel\"\n  role=\"complementary\"\n  aria-labelledby=\"persistent-panel-title\"\n  [attr.aria-hidden]=\"state() === 'hidden'\"\n  [class.maximized]=\"state() === 'maximized'\"\n  [class.open]=\"state() !== 'hidden'\"\n>\n  <header class=\"persistent-panel-header\">\n    <div>\n      <h2 id=\"persistent-panel-title\">{{ title() }}</h2>\n      @if (closeError()) {\n      <p role=\"alert\">{{ closeError() }}</p>\n      }\n    </div>\n    <div class=\"persistent-panel-actions\">\n      <button\n        aria-label=\"Toggle panel size\"\n        [attr.aria-pressed]=\"state() === 'maximized'\"\n        title=\"Toggle panel size\"\n        type=\"button\"\n        (click)=\"toggleSize()\"\n      >\n        @if (state() === 'maximized') { \u25F2 } @else { \u25F1 }\n      </button>\n      <button\n        aria-label=\"Collapse panel\"\n        title=\"Collapse panel\"\n        type=\"button\"\n        (click)=\"collapse()\"\n      >\n        \u2014\n      </button>\n      <button\n        aria-label=\"Close panel\"\n        title=\"Close panel\"\n        type=\"button\"\n        (click)=\"close()\"\n      >\n        \u00D7\n      </button>\n    </div>\n  </header>\n  @if (source()) {\n  <iframe\n    #panelFrame\n    class=\"persistent-panel-frame\"\n    referrerpolicy=\"no-referrer\"\n    sandbox=\"allow-forms allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts\"\n    [src]=\"source()\"\n    [title]=\"title()\"\n    (load)=\"frameLoaded()\"\n  ></iframe>\n  }\n</section>\n\n@if (state() === 'hidden' && source() && !closing()) {\n<button\n  #reopenButton\n  class=\"persistent-panel-reopen\"\n  aria-label=\"Open provider panel\"\n  type=\"button\"\n  (click)=\"expand()\"\n>\n  {{ title() }}\n</button>\n}\n", styles: [":host{--pm-panel-header-height: 3rem;font-family:var(--sapFontFamily, \"72\", Arial, sans-serif)}.persistent-panel{position:fixed;top:var(--luigi__shellbar--height, 3.25rem);right:0;bottom:0;z-index:1000;display:none;width:min(34rem,100vw);background:var(--sapBackgroundColor, #fff);border-left:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);box-shadow:-.25rem 0 1rem #0000001f}.persistent-panel.open{display:grid;grid-template-rows:var(--pm-panel-header-height) 1fr}.persistent-panel.maximized{left:4.25rem;width:auto}.persistent-panel-header{display:flex;align-items:center;justify-content:space-between;padding:0 .75rem 0 1rem;color:var(--sapShell_TextColor, #1d2d3e);background:var(--sapShell_Background, #fff);border-bottom:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9)}.persistent-panel-header h2{overflow:hidden;margin:0;font-size:1rem;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.persistent-panel-header p{margin:0;color:var(--sapNegativeTextColor, #aa0808);font-size:.75rem}.persistent-panel-actions{display:flex;gap:.25rem}.persistent-panel-actions button,.persistent-panel-reopen{min-width:2rem;min-height:2rem;color:var(--sapButton_TextColor, #0064d9);background:transparent;border:0;border-radius:.25rem;cursor:pointer}.persistent-panel-actions button:hover,.persistent-panel-reopen:hover{background:var(--sapButton_Lite_Hover_Background, #eaecee)}.persistent-panel-frame{width:100%;height:100%;border:0}.persistent-panel-reopen{position:fixed;right:1rem;bottom:1rem;z-index:1000;padding:.5rem .75rem;color:var(--sapButton_Emphasized_TextColor, #fff);background:var(--sapButton_Emphasized_Background, #0070f2);box-shadow:0 .25rem .75rem #0003}@media(max-width:600px){.persistent-panel,.persistent-panel.maximized{left:0;width:100vw}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PersistentPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pm-persistent-panel', imports: [CommonModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n  class=\"persistent-panel\"\n  role=\"complementary\"\n  aria-labelledby=\"persistent-panel-title\"\n  [attr.aria-hidden]=\"state() === 'hidden'\"\n  [class.maximized]=\"state() === 'maximized'\"\n  [class.open]=\"state() !== 'hidden'\"\n>\n  <header class=\"persistent-panel-header\">\n    <div>\n      <h2 id=\"persistent-panel-title\">{{ title() }}</h2>\n      @if (closeError()) {\n      <p role=\"alert\">{{ closeError() }}</p>\n      }\n    </div>\n    <div class=\"persistent-panel-actions\">\n      <button\n        aria-label=\"Toggle panel size\"\n        [attr.aria-pressed]=\"state() === 'maximized'\"\n        title=\"Toggle panel size\"\n        type=\"button\"\n        (click)=\"toggleSize()\"\n      >\n        @if (state() === 'maximized') { \u25F2 } @else { \u25F1 }\n      </button>\n      <button\n        aria-label=\"Collapse panel\"\n        title=\"Collapse panel\"\n        type=\"button\"\n        (click)=\"collapse()\"\n      >\n        \u2014\n      </button>\n      <button\n        aria-label=\"Close panel\"\n        title=\"Close panel\"\n        type=\"button\"\n        (click)=\"close()\"\n      >\n        \u00D7\n      </button>\n    </div>\n  </header>\n  @if (source()) {\n  <iframe\n    #panelFrame\n    class=\"persistent-panel-frame\"\n    referrerpolicy=\"no-referrer\"\n    sandbox=\"allow-forms allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts\"\n    [src]=\"source()\"\n    [title]=\"title()\"\n    (load)=\"frameLoaded()\"\n  ></iframe>\n  }\n</section>\n\n@if (state() === 'hidden' && source() && !closing()) {\n<button\n  #reopenButton\n  class=\"persistent-panel-reopen\"\n  aria-label=\"Open provider panel\"\n  type=\"button\"\n  (click)=\"expand()\"\n>\n  {{ title() }}\n</button>\n}\n", styles: [":host{--pm-panel-header-height: 3rem;font-family:var(--sapFontFamily, \"72\", Arial, sans-serif)}.persistent-panel{position:fixed;top:var(--luigi__shellbar--height, 3.25rem);right:0;bottom:0;z-index:1000;display:none;width:min(34rem,100vw);background:var(--sapBackgroundColor, #fff);border-left:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);box-shadow:-.25rem 0 1rem #0000001f}.persistent-panel.open{display:grid;grid-template-rows:var(--pm-panel-header-height) 1fr}.persistent-panel.maximized{left:4.25rem;width:auto}.persistent-panel-header{display:flex;align-items:center;justify-content:space-between;padding:0 .75rem 0 1rem;color:var(--sapShell_TextColor, #1d2d3e);background:var(--sapShell_Background, #fff);border-bottom:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9)}.persistent-panel-header h2{overflow:hidden;margin:0;font-size:1rem;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.persistent-panel-header p{margin:0;color:var(--sapNegativeTextColor, #aa0808);font-size:.75rem}.persistent-panel-actions{display:flex;gap:.25rem}.persistent-panel-actions button,.persistent-panel-reopen{min-width:2rem;min-height:2rem;color:var(--sapButton_TextColor, #0064d9);background:transparent;border:0;border-radius:.25rem;cursor:pointer}.persistent-panel-actions button:hover,.persistent-panel-reopen:hover{background:var(--sapButton_Lite_Hover_Background, #eaecee)}.persistent-panel-frame{width:100%;height:100%;border:0}.persistent-panel-reopen{position:fixed;right:1rem;bottom:1rem;z-index:1000;padding:.5rem .75rem;color:var(--sapButton_Emphasized_TextColor, #fff);background:var(--sapButton_Emphasized_Background, #0070f2);box-shadow:0 .25rem .75rem #0003}@media(max-width:600px){.persistent-panel,.persistent-panel.maximized{left:0;width:100vw}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { panelFrame: [{
+                type: ViewChild,
+                args: ['panelFrame']
+            }], reopenButton: [{
+                type: ViewChild,
+                args: ['reopenButton']
+            }] } });
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+class PersistentPanelService {
+    constructor() {
+        this.appRef = inject(ApplicationRef);
+        this.environmentInjector = inject(EnvironmentInjector);
+        this.panelRef = null;
+        this.target = {};
+        this.targetUpdateSequence = 0;
+    }
+    open(config, target) {
+        this.target = target;
+        if (!this.panelRef) {
+            this.panelRef = createComponent(PersistentPanelComponent, {
+                environmentInjector: this.environmentInjector,
+            });
+            this.appRef.attachView(this.panelRef.hostView);
+            document.body.appendChild(this.panelRef.location.nativeElement);
+        }
+        this.panelRef.instance.open(config, target);
+        // createComponent() is outside a template tree, so it has no initial
+        // render until change detection is run explicitly. Subsequent signal
+        // updates are scheduled normally once the view has been initialized.
+        this.panelRef.changeDetectorRef.detectChanges();
+    }
+    beginTargetUpdate() {
+        const targetUpdateSequence = ++this.targetUpdateSequence;
+        return (context) => {
+            if (targetUpdateSequence !== this.targetUpdateSequence) {
+                return;
+            }
+            this.updateTarget(context);
+        };
+    }
+    updateTarget(context) {
+        const target = persistentPanelTarget({}, context);
+        this.target = target;
+        this.panelRef?.instance.updateTarget(target);
+    }
+    currentTarget() {
+        return structuredClone(this.target);
+    }
+    destroy() {
+        this.targetUpdateSequence += 1;
+        if (this.panelRef) {
+            const host = this.panelRef.location.nativeElement;
+            this.appRef.detachView(this.panelRef.hostView);
+            this.panelRef.destroy();
+            host.remove();
+            this.panelRef = null;
+        }
+        this.target = {};
+    }
+    ngOnDestroy() {
+        this.destroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PersistentPanelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PersistentPanelService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PersistentPanelService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 function collectAccountNamesFromNodeHierarchy(node) {
     const accountNames = [];
     let currentNode = node;
@@ -400,8 +881,10 @@ class NodeChangeHookConfigServiceImpl {
     constructor() {
         this.luigiCoreService = inject(LuigiCoreService);
         this.crdGatewayKcpPatchResolver = inject(CrdGatewayKcpPatchResolver);
+        this.persistentPanelService = inject(PersistentPanelService);
     }
     async nodeChangeHook(prevNode, nextNode, currentContext) {
+        const updatePersistentPanelTarget = this.persistentPanelService.beginTargetUpdate();
         if (nextNode.initialRoute &&
             nextNode.virtualTree &&
             !nextNode._virtualTree) {
@@ -409,6 +892,10 @@ class NodeChangeHookConfigServiceImpl {
         }
         this.accumulatePortalPermissions(prevNode, nextNode, currentContext);
         await this.crdGatewayKcpPatchResolver.resolveCrdGatewayKcpPath(nextNode);
+        updatePersistentPanelTarget({
+            ...currentContext,
+            ...(nextNode.context ?? {}),
+        });
     }
     accumulatePortalPermissions(prevNode, nextNode, currentContext) {
         const portalPermissions = prevNode?.context?.portalPermissions ??
@@ -561,9 +1048,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+class OpenPersistentPanelListener {
+    constructor() {
+        this.luigiCoreService = inject(LuigiCoreService);
+        this.persistentPanelService = inject(PersistentPanelService);
+    }
+    messageId() {
+        return OPEN_PERSISTENT_PANEL_MESSAGE;
+    }
+    onCustomMessageReceived(customMessage, _microFrontend, microFrontendNode) {
+        const config = parsePersistentPanelConfig(customMessage, microFrontendNode, new URL(document.baseURI).origin);
+        const target = mergePersistentPanelTargets(this.persistentPanelService.currentTarget(), persistentPanelTarget(this.luigiCoreService.getGlobalContext(), microFrontendNode?.context));
+        this.persistentPanelService.open(config, target);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: OpenPersistentPanelListener, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: OpenPersistentPanelListener, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: OpenPersistentPanelListener, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CustomGlobalNodesServiceImpl, CustomRoutingConfigServiceImpl, HeaderBarConfigServiceImpl, LuigiExtendedGlobalContextConfigServiceImpl, NavigationRedirectStrategyServiceImpl, NodeChangeHookConfigServiceImpl, NodeContextProcessingServiceImpl, UserProfileConfigServiceImpl };
+export { CustomGlobalNodesServiceImpl, CustomRoutingConfigServiceImpl, HeaderBarConfigServiceImpl, LuigiExtendedGlobalContextConfigServiceImpl, NavigationRedirectStrategyServiceImpl, NodeChangeHookConfigServiceImpl, NodeContextProcessingServiceImpl, OpenPersistentPanelListener, UserProfileConfigServiceImpl };
 //# sourceMappingURL=platform-mesh-portal-ui-lib-portal-options.mjs.map