@ama-mfe/ng-utils 14.0.0-next.2 → 14.0.0-next.3

package/fesm2022/ama-mfe-ng-utils.mjs

@@ -1,13 +1,76 @@
 import { MessagePeerService, MESSAGE_PEER_CONFIG, MESSAGE_PEER_CONNECT_OPTIONS } from '@amadeus-it-group/microfrontends-angular';
 export { MessagePeerService as ConnectionService } from '@amadeus-it-group/microfrontends-angular';
 import * as i0 from '@angular/core';
-import { Injectable, inject, signal, effect, DestroyRef, afterNextRender, input, computed, ElementRef, Renderer2, Directive, SecurityContext, Pipe, untracked, HostBinding, provideAppInitializer, makeEnvironmentProviders } from '@angular/core';
-import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { input, inject, ElementRef, computed, SecurityContext, effect, HostBinding, Directive, Injectable, signal, DestroyRef, provideAppInitializer, Pipe, makeEnvironmentProviders, untracked, afterNextRender, Renderer2 } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
 import { LoggerService } from '@o3r/logger';
-import { RESIZE_MESSAGE_TYPE, NAVIGATION_MESSAGE_TYPE, THEME_MESSAGE_TYPE } from '@ama-mfe/messages';
+import { HISTORY_MESSAGE_TYPE, NAVIGATION_MESSAGE_TYPE, RESIZE_MESSAGE_TYPE, THEME_MESSAGE_TYPE } from '@ama-mfe/messages';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
 import { Subject, filter, map } from 'rxjs';
-import { DomSanitizer } from '@angular/platform-browser';
+
+class ConnectDirective {
+    /**
+     * Binds the `src` attribute of the iframe to the sanitized source URL.
+     */
+    get srcAttr() {
+        return this.src();
+    }
+    constructor() {
+        /**
+         * The connection ID required for the message peer service.
+         */
+        this.connect = input.required(...(ngDevMode ? [{ debugName: "connect" }] : []));
+        /**
+         * The sanitized source URL for the iframe.
+         */
+        this.src = input(...(ngDevMode ? [undefined, { debugName: "src" }] : []));
+        this.messageService = inject(MessagePeerService);
+        this.domSanitizer = inject(DomSanitizer);
+        this.iframeElement = inject(ElementRef).nativeElement;
+        this.clientOrigin = computed(() => {
+            const src = this.src();
+            const srcString = src && this.domSanitizer.sanitize(SecurityContext.RESOURCE_URL, src);
+            return srcString && new URL(srcString).origin;
+        }, ...(ngDevMode ? [{ debugName: "clientOrigin" }] : []));
+        const logger = inject(LoggerService);
+        // When the origin or connection ID change - reconnect the message service
+        effect((onCleanup) => {
+            let stopHandshakeListening = () => { };
+            const origin = this.clientOrigin();
+            const id = this.connect();
+            const source = this.iframeElement.contentWindow;
+            // listen for handshakes only if we know the origin and were given a connection ID
+            if (origin && source && id) {
+                try {
+                    stopHandshakeListening = this.messageService.listen({ id, source, origin });
+                }
+                catch (e) {
+                    logger.error(`Failed to start listening for (connection ID: ${id})`, e);
+                }
+            }
+            // stop listening for handshakes and disconnect previous connection when:
+            // - origin/connection ID change
+            // - the directive is destroyed
+            onCleanup(() => {
+                stopHandshakeListening();
+                this.messageService.disconnect();
+            });
+        });
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ConnectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.13", type: ConnectDirective, isStandalone: true, selector: "iframe[connect]", inputs: { connect: { classPropertyName: "connect", publicName: "connect", isSignal: true, isRequired: true, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "src": "this.srcAttr" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ConnectDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'iframe[connect]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { connect: [{ type: i0.Input, args: [{ isSignal: true, alias: "connect", required: true }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], srcAttr: [{
+                type: HostBinding,
+                args: ['src']
+            }] } });
 
 /**
  * Gets the available consumers and formats them into a {@see DeclareMessages} object.
@@ -74,14 +137,16 @@ class ProducerManagerService {
             .filter(({ types }) => (Array.isArray(types) ? types : [types]).includes(message.source.type));
         const handlersPresent = handlers.length > 0;
         if (handlersPresent) {
-            await Promise.all(handlers.map((handler) => handler.handleError(message)));
+            await Promise.all(
+            // eslint-disable-next-line @typescript-eslint/await-thenable -- `handleError` can return void or Promise<void>
+            handlers.map((handler) => handler.handleError(message)));
         }
         return handlersPresent;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ProducerManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ProducerManagerService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ProducerManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ProducerManagerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ProducerManagerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ProducerManagerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -173,10 +238,10 @@ class ConsumerManagerService {
             return consumers.filter((c) => c !== consumer);
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ConsumerManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ConsumerManagerService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ConsumerManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ConsumerManagerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ConsumerManagerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ConsumerManagerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -208,53 +273,49 @@ const registerConsumer = (consumer) => {
     });
 };
 
-/** the error message type */
-const ERROR_MESSAGE_TYPE = 'error';
-
 /**
- * This service listens for resize messages and updates the height of elements based on the received messages.
+ * A service that handles history messages.
+ *
+ * This service listens for history messages and navigates accordingly.
  */
-class ResizeConsumerService {
+class HistoryConsumerService {
     constructor() {
-        this.newHeight = signal(undefined, ...(ngDevMode ? [{ debugName: "newHeight" }] : []));
-        /**
-         * A readonly signal that provides the new height information from the channel.
-         */
-        this.newHeightFromChannel = this.newHeight.asReadonly();
         /**
-         * The type of messages this service handles ('resize').
+         * The type of messages this service handles.
          */
-        this.type = RESIZE_MESSAGE_TYPE;
+        this.type = HISTORY_MESSAGE_TYPE;
         /**
-         * The supported versions of resize messages and their handlers.
+         * @inheritdoc
          */
         this.supportedVersions = {
             /**
-             * Use the message paylod to compute a new height and emit it via the public signal
+             * Use the message payload to navigate in the history
              * @param message message to consume
              */
-            '1.0': (message) => this.newHeight.set({ height: message.payload.height, channelId: message.from })
+            '1.0': (message) => {
+                history.go(message.payload.delta);
+            }
         };
         this.consumerManagerService = inject(ConsumerManagerService);
         this.start();
         inject(DestroyRef).onDestroy(() => this.stop());
     }
     /**
-     * Starts the resize handler service by registering it into the consumer manager service.
+     * @inheritdoc
      */
     start() {
         this.consumerManagerService.register(this);
     }
     /**
-     * Stops the resize handler service by unregistering it from the consumer manager service.
+     * @inheritdoc
      */
     stop() {
         this.consumerManagerService.unregister(this);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ResizeConsumerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ResizeConsumerService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: HistoryConsumerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: HistoryConsumerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ResizeConsumerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: HistoryConsumerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -262,102 +323,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
         }], ctorParameters: () => [] });
 
 /**
- * This service observe changes in the document's body height.
- * When the height changes, it sends a resize message with the new height, to the connected peers
+ * Provides necessary overrides to make the module navigation in history work in an embedded context :
+ * - Prevent pushing states to history, replace state instead
+ * - Handle history navigation via History messages to let the host manage the states
  */
-class ResizeService {
-    constructor() {
-        this.messageService = inject((MessagePeerService));
-        /**
-         * @inheritdoc
-         */
-        this.types = RESIZE_MESSAGE_TYPE;
-        registerProducer(this);
-    }
-    /**
-     * @inheritdoc
-     */
-    handleError(message) {
-        // eslint-disable-next-line no-console -- error handling placeholder
-        console.error('Error in resize service message', message);
-    }
-    /**
-     * This method sets up a `ResizeObserver` to observe changes in the document's body height.
-     * When the height changes, it sends a resize message with the new height, to the connected peers
-     */
-    startResizeObserver() {
-        this.resizeObserver = new ResizeObserver(() => {
-            const newHeight = document.body.getBoundingClientRect().height;
-            if (!this.actualHeight || newHeight !== this.actualHeight) {
-                this.actualHeight = newHeight;
-                const messageV10 = {
-                    type: 'resize',
-                    version: '1.0',
-                    height: this.actualHeight
-                };
-                // TODO: sendBest() is not implemented -- https://github.com/AmadeusITGroup/microfrontends/issues/11
-                this.messageService.send(messageV10);
-            }
+function provideHistoryOverrides() {
+    return provideAppInitializer(() => {
+        const messageService = inject((MessagePeerService));
+        const navigate = (delta) => {
+            messageService.send({
+                type: 'history',
+                version: '1.0',
+                delta
+            });
+        };
+        Object.defineProperty(history, 'pushState', {
+            value: (data, unused, url) => {
+                history.replaceState(data, unused, url);
+            },
+            writable: false,
+            configurable: false
         });
-        afterNextRender(() => this.resizeObserver?.observe(document.body));
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ResizeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ResizeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ResizeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
-/**
- * A directive that adjusts the height of an element based on resize messages from a specified channel.
- */
-class ScalableDirective {
-    constructor() {
-        /**
-         * The connection ID for the element, used as channel id backup
-         */
-        this.connect = input(...(ngDevMode ? [undefined, { debugName: "connect" }] : []));
-        /**
-         * The channel id
-         */
-        this.scalable = input(...(ngDevMode ? [undefined, { debugName: "scalable" }] : []));
-        this.resizeHandler = inject(ResizeConsumerService);
-        /**
-         * This signal checks if the current channel requesting the resize matches the channel ID from the resize handler.
-         * If they match, it returns the new height information; otherwise, it returns undefined.
-         */
-        this.newHeightFromChannel = computed(() => {
-            const channelAskingResize = this.scalable() || this.connect();
-            const newHeightFromChannel = this.resizeHandler.newHeightFromChannel();
-            if (channelAskingResize && newHeightFromChannel?.channelId === channelAskingResize) {
-                return newHeightFromChannel;
-            }
-            return undefined;
-        }, ...(ngDevMode ? [{ debugName: "newHeightFromChannel" }] : []));
-        const elem = inject(ElementRef);
-        const renderer = inject(Renderer2);
-        this.resizeHandler.start();
-        /** When a new height value is received set the height of the host element (in pixels) */
-        effect(() => {
-            const newHeightFromChannel = this.newHeightFromChannel();
-            if (newHeightFromChannel) {
-                renderer.setStyle(elem.nativeElement, 'height', `${newHeightFromChannel.height}px`);
-            }
+        Object.defineProperty(history, 'back', {
+            value: () => navigate(-1),
+            writable: false,
+            configurable: false
         });
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ScalableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.4", type: ScalableDirective, isStandalone: true, selector: "[scalable]", inputs: { connect: { classPropertyName: "connect", publicName: "connect", isSignal: true, isRequired: false, transformFunction: null }, scalable: { classPropertyName: "scalable", publicName: "scalable", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+        Object.defineProperty(history, 'forward', {
+            value: () => navigate(1),
+            writable: false,
+            configurable: false
+        });
+        Object.defineProperty(history, 'go', {
+            value: (delta) => navigate(delta),
+            writable: false,
+            configurable: false
+        });
+    });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ScalableDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[scalable]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [] });
 
 const SESSION_STORAGE_KEY = 'ama-mfe-host-info';
 /**
@@ -384,12 +387,13 @@ const hostQueryParams = [MFE_HOST_URL_PARAM, MFE_HOST_APPLICATION_ID_PARAM, MFE_
  * - use `document.referrer` (will only work if called before any redirection in the iframe)
  * The host application ID is taken from the search parameter {@link MFE_HOST_APPLICATION_ID_PARAM} in the URL of the iframe
  * The module application ID is taken from the search parameter {@link MFE_APPLICATION_ID_PARAM} in the URL of the iframe
+ * @param locationParam - A {@link Location} object with information about the current location of the document. Defaults to global {@link location}.
  */
-function getHostInfo() {
-    const searchParams = new URLSearchParams(location.search);
+function getHostInfo(locationParam = location) {
+    const searchParams = new URLSearchParams(locationParam.search);
     const storedHostInfo = JSON.parse(sessionStorage.getItem(SESSION_STORAGE_KEY) || '{}');
     return {
-        hostURL: searchParams.get(MFE_HOST_URL_PARAM) || storedHostInfo.hostURL || location.ancestorOrigins?.[0] || document.referrer,
+        hostURL: searchParams.get(MFE_HOST_URL_PARAM) || storedHostInfo.hostURL || locationParam.ancestorOrigins?.[0] || document.referrer,
         hostApplicationId: searchParams.get(MFE_HOST_APPLICATION_ID_PARAM) || storedHostInfo.hostApplicationId,
         moduleApplicationId: searchParams.get(MFE_MODULE_APPLICATION_ID_PARAM) || storedHostInfo.moduleApplicationId
     };
@@ -427,16 +431,81 @@ class HostInfoPipe {
             return typeof url === 'string' ? moduleUrlStringyfied : this.domSanitizer.bypassSecurityTrustResourceUrl(moduleUrlStringyfied);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: HostInfoPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: HostInfoPipe, isStandalone: true, name: "hostInfo" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: HostInfoPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.13", ngImport: i0, type: HostInfoPipe, isStandalone: true, name: "hostInfo" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: HostInfoPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: HostInfoPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'hostInfo'
                 }]
         }] });
 
+/** the error message type */
+const ERROR_MESSAGE_TYPE = 'error';
+
+/**
+ * A constant array of known message types and their versions.
+ */
+const KNOWN_MESSAGES = [
+    {
+        type: ERROR_MESSAGE_TYPE,
+        version: '1.0'
+    }
+];
+/**
+ * Returns the default options for starting a client endpoint peer connection.
+ * As `origin`, it will take the hostURL from {@link getHostInfo} and the `window` will be the parent window.
+ */
+function getDefaultClientEndpointStartOptions() {
+    const hostInfo = getHostInfo();
+    if (hostInfo.hostURL) {
+        return {
+            origin: new URL(hostInfo.hostURL).origin,
+            window: window.parent
+        };
+    }
+    return {};
+}
+/**
+ * Return `true` if embedded inside an iframe, `false` otherwise
+ * @param windowParam - A {@link window} object with information about the current window of the document. Defaults to global {@link window}.
+ */
+function isEmbedded(windowParam = window) {
+    return windowParam.top !== windowParam.self;
+}
+
+/**
+ * Provide the communication protocol connection configuration
+ * @param connectionConfigOptions The identifier of the application in the communication protocol ecosystem plus the types of messages able to exchange and a logger object
+ */
+function provideConnection(connectionConfigOptions) {
+    persistHostInfo();
+    const connectionId = (isEmbedded() && getHostInfo().moduleApplicationId) || connectionConfigOptions?.id;
+    if (!connectionId) {
+        (connectionConfigOptions?.logger || console).error('An id (moduleId) needs to be provided for the application in order to establish a connection inside the communication protocol');
+        return makeEnvironmentProviders([]);
+    }
+    const config = {
+        id: connectionId,
+        messageCheckStrategy: 'version',
+        knownMessages: [...KNOWN_MESSAGES, ...(connectionConfigOptions?.knownMessages || [])]
+    };
+    return makeEnvironmentProviders([
+        {
+            provide: MESSAGE_PEER_CONFIG, useValue: config
+        },
+        {
+            provide: MESSAGE_PEER_CONNECT_OPTIONS, useValue: getDefaultClientEndpointStartOptions()
+        },
+        {
+            // in the case of the ConnectionService will extend the base service 'useExisting' should be used
+            provide: MessagePeerService, useClass: MessagePeerService, deps: [MESSAGE_PEER_CONFIG]
+        },
+        ...isEmbedded() ? [provideHistoryOverrides()] : []
+    ]);
+}
+
 /**
  * A service that handles navigation messages and routing.
  *
@@ -507,10 +576,10 @@ class NavigationConsumerService {
     stop() {
         this.consumerManagerService.unregister(this);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: NavigationConsumerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: NavigationConsumerService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NavigationConsumerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NavigationConsumerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: NavigationConsumerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NavigationConsumerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -553,25 +622,76 @@ class RouteMemorizeService {
     getRoute(channelId) {
         return this.routeStack[channelId];
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RouteMemorizeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RouteMemorizeService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: RouteMemorizeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: RouteMemorizeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RouteMemorizeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: RouteMemorizeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
         }] });
 
-class RouteMemorizeDirective {
+/**
+ * A pipe that restores a route with optional query parameters and memory channel ID.
+ *
+ * This pipe is used to transform a URL or SafeResourceUrl by appending query parameters
+ * and adjusting the pathname based on the current active route and memorized route.
+ */
+class RestoreRoute {
     constructor() {
-        /**
-         * Whether to memorize the route.
-         * Default is true.
-         */
-        this.memorizeRoute = input(true, ...(ngDevMode ? [{ debugName: "memorizeRoute" }] : []));
-        /**
-         * The ID used to memorize the route.
+        this.activeRoute = inject(ActivatedRoute);
+        this.domSanitizer = inject(DomSanitizer);
+        this.routeMemorizeService = inject(RouteMemorizeService, { optional: true });
+        this.window = inject(Window, { optional: true }) || window;
+    }
+    transform(url, options) {
+        const urlString = typeof url === 'string'
+            ? url
+            : this.domSanitizer.sanitize(SecurityContext.RESOURCE_URL, url || null);
+        if (!url) {
+            return undefined;
+        }
+        if (urlString) {
+            const moduleUrl = new URL(urlString);
+            const queryParamsModule = new URLSearchParams(moduleUrl.searchParams);
+            const channelId = options?.memoryChannelId;
+            const memorizedRoute = channelId && this.routeMemorizeService?.getRoute(channelId);
+            const topWindowUrl = new URL(memorizedRoute ? this.window.origin + memorizedRoute : this.window.location.href);
+            const queryParamsTopWindow = new URLSearchParams(topWindowUrl.search);
+            if (options?.propagateQueryParams) {
+                for (const [key, value] of queryParamsTopWindow) {
+                    if (options?.overrideQueryParams || !queryParamsModule.has(key)) {
+                        queryParamsModule.set(key, value);
+                    }
+                }
+            }
+            moduleUrl.search = queryParamsModule.toString();
+            moduleUrl.pathname += topWindowUrl.pathname.split(`/${this.activeRoute.routeConfig?.path}`).pop() || '';
+            moduleUrl.pathname = moduleUrl.pathname.replace(/\/{2,}/g, '/');
+            const moduleUrlStringyfied = moduleUrl.toString();
+            return typeof url === 'string' ? moduleUrlStringyfied : this.domSanitizer.bypassSecurityTrustResourceUrl(moduleUrlStringyfied);
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: RestoreRoute, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.13", ngImport: i0, type: RestoreRoute, isStandalone: true, name: "restoreRoute" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: RestoreRoute, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'restoreRoute'
+                }]
+        }] });
+
+class RouteMemorizeDirective {
+    constructor() {
+        /**
+         * Whether to memorize the route.
+         * Default is true.
+         */
+        this.memorizeRoute = input(true, ...(ngDevMode ? [{ debugName: "memorizeRoute" }] : []));
+        /**
+         * The ID used to memorize the route.
          */
         this.memorizeRouteId = input(...(ngDevMode ? [undefined, { debugName: "memorizeRouteId" }] : []));
         /**
@@ -603,52 +723,23 @@ class RouteMemorizeDirective {
                 return;
             }
             const requested = requestedUrlSignal();
-            const id = this.memorizeRouteId() || this.connect();
-            if (requested && id && requested.channelId === id) {
+            const channelId = this.connect();
+            const id = this.memorizeRouteId() || channelId;
+            if (requested && id && requested.channelId === channelId) {
                 memory.memorizeRoute(id, requested.url, untracked(this.maxAge));
             }
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RouteMemorizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.4", type: RouteMemorizeDirective, isStandalone: true, selector: "iframe[memorizeRoute]", inputs: { memorizeRoute: { classPropertyName: "memorizeRoute", publicName: "memorizeRoute", isSignal: true, isRequired: false, transformFunction: null }, memorizeRouteId: { classPropertyName: "memorizeRouteId", publicName: "memorizeRouteId", isSignal: true, isRequired: false, transformFunction: null }, memorizeMaxAge: { classPropertyName: "memorizeMaxAge", publicName: "memorizeMaxAge", isSignal: true, isRequired: false, transformFunction: null }, memorizeRouteMaxAge: { classPropertyName: "memorizeRouteMaxAge", publicName: "memorizeRouteMaxAge", isSignal: true, isRequired: false, transformFunction: null }, connect: { classPropertyName: "connect", publicName: "connect", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: RouteMemorizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.13", type: RouteMemorizeDirective, isStandalone: true, selector: "iframe[memorizeRoute]", inputs: { memorizeRoute: { classPropertyName: "memorizeRoute", publicName: "memorizeRoute", isSignal: true, isRequired: false, transformFunction: null }, memorizeRouteId: { classPropertyName: "memorizeRouteId", publicName: "memorizeRouteId", isSignal: true, isRequired: false, transformFunction: null }, memorizeMaxAge: { classPropertyName: "memorizeMaxAge", publicName: "memorizeMaxAge", isSignal: true, isRequired: false, transformFunction: null }, memorizeRouteMaxAge: { classPropertyName: "memorizeRouteMaxAge", publicName: "memorizeRouteMaxAge", isSignal: true, isRequired: false, transformFunction: null }, connect: { classPropertyName: "connect", publicName: "connect", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RouteMemorizeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: RouteMemorizeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'iframe[memorizeRoute]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [] });
-
-/**
- * A constant array of known message types and their versions.
- */
-const KNOWN_MESSAGES = [
-    {
-        type: ERROR_MESSAGE_TYPE,
-        version: '1.0'
-    }
-];
-/**
- * Returns the default options for starting a client endpoint peer connection.
- * As `origin`, it will take the hostURL from {@link getHostInfo} and the `window` will be the parent window.
- */
-function getDefaultClientEndpointStartOptions() {
-    const hostInfo = getHostInfo();
-    if (hostInfo.hostURL) {
-        return {
-            origin: new URL(hostInfo.hostURL).origin,
-            window: window.parent
-        };
-    }
-    return {};
-}
-/**
- * Return `true` if embedded inside an iframe, `false` otherwise
- */
-function isEmbedded() {
-    return window.top !== window.self;
-}
+        }], ctorParameters: () => [], propDecorators: { memorizeRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "memorizeRoute", required: false }] }], memorizeRouteId: [{ type: i0.Input, args: [{ isSignal: true, alias: "memorizeRouteId", required: false }] }], memorizeMaxAge: [{ type: i0.Input, args: [{ isSignal: true, alias: "memorizeMaxAge", required: false }] }], memorizeRouteMaxAge: [{ type: i0.Input, args: [{ isSignal: true, alias: "memorizeRouteMaxAge", required: false }] }], connect: [{ type: i0.Input, args: [{ isSignal: true, alias: "connect", required: false }] }] } });
 
 /**
  * A service that keeps in sync Router navigation and navigation messages.
@@ -662,6 +753,7 @@ class RoutingService {
         this.activatedRoute = inject(ActivatedRoute);
         this.messageService = inject((MessagePeerService));
         this.logger = inject(LoggerService);
+        this.window = inject(Window, { optional: true }) || window;
         /**
          * @inheritdoc
          */
@@ -715,7 +807,7 @@ class RoutingService {
                 url
             };
             // TODO: sendBest() is not implemented -- https://github.com/AmadeusITGroup/microfrontends/issues/11
-            if (isEmbedded()) {
+            if (isEmbedded(this.window)) {
                 this.messageService.send(messageV10);
             }
             else {
@@ -733,10 +825,10 @@ class RoutingService {
             }
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RoutingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RoutingService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: RoutingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: RoutingService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RoutingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: RoutingService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -744,54 +836,152 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
         }], ctorParameters: () => [] });
 
 /**
- * A pipe that restores a route with optional query parameters and memory channel ID.
- *
- * This pipe is used to transform a URL or SafeResourceUrl by appending query parameters
- * and adjusting the pathname based on the current active route and memorized route.
+ * This service listens for resize messages and updates the height of elements based on the received messages.
  */
-class RestoreRoute {
+class ResizeConsumerService {
     constructor() {
-        this.activeRoute = inject(ActivatedRoute);
-        this.domSanitizer = inject(DomSanitizer);
-        this.routeMemorizeService = inject(RouteMemorizeService, { optional: true });
+        this.newHeight = signal(undefined, ...(ngDevMode ? [{ debugName: "newHeight" }] : []));
+        /**
+         * A readonly signal that provides the new height information from the channel.
+         */
+        this.newHeightFromChannel = this.newHeight.asReadonly();
+        /**
+         * The type of messages this service handles ('resize').
+         */
+        this.type = RESIZE_MESSAGE_TYPE;
+        /**
+         * The supported versions of resize messages and their handlers.
+         */
+        this.supportedVersions = {
+            /**
+             * Use the message paylod to compute a new height and emit it via the public signal
+             * @param message message to consume
+             */
+            '1.0': (message) => this.newHeight.set({ height: message.payload.height, channelId: message.from })
+        };
+        this.consumerManagerService = inject(ConsumerManagerService);
+        this.start();
+        inject(DestroyRef).onDestroy(() => this.stop());
     }
-    transform(url, options) {
-        const urlString = typeof url === 'string'
-            ? url
-            : this.domSanitizer.sanitize(SecurityContext.RESOURCE_URL, url || null);
-        if (!url) {
+    /**
+     * Starts the resize handler service by registering it into the consumer manager service.
+     */
+    start() {
+        this.consumerManagerService.register(this);
+    }
+    /**
+     * Stops the resize handler service by unregistering it from the consumer manager service.
+     */
+    stop() {
+        this.consumerManagerService.unregister(this);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ResizeConsumerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ResizeConsumerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ResizeConsumerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * This service observe changes in the document's body height.
+ * When the height changes, it sends a resize message with the new height, to the connected peers
+ */
+class ResizeService {
+    constructor() {
+        this.messageService = inject((MessagePeerService));
+        /**
+         * @inheritdoc
+         */
+        this.types = RESIZE_MESSAGE_TYPE;
+        registerProducer(this);
+    }
+    /**
+     * @inheritdoc
+     */
+    handleError(message) {
+        // eslint-disable-next-line no-console -- error handling placeholder
+        console.error('Error in resize service message', message);
+    }
+    /**
+     * This method sets up a `ResizeObserver` to observe changes in the document's body height.
+     * When the height changes, it sends a resize message with the new height, to the connected peers
+     */
+    startResizeObserver() {
+        this.resizeObserver = new ResizeObserver(() => {
+            const newHeight = document.body.getBoundingClientRect().height;
+            if (!this.actualHeight || newHeight !== this.actualHeight) {
+                this.actualHeight = newHeight;
+                const messageV10 = {
+                    type: 'resize',
+                    version: '1.0',
+                    height: this.actualHeight
+                };
+                // TODO: sendBest() is not implemented -- https://github.com/AmadeusITGroup/microfrontends/issues/11
+                this.messageService.send(messageV10);
+            }
+        });
+        afterNextRender(() => this.resizeObserver?.observe(document.body));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ResizeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ResizeService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ResizeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * A directive that adjusts the height of an element based on resize messages from a specified channel.
+ */
+class ScalableDirective {
+    constructor() {
+        /**
+         * The connection ID for the element, used as channel id backup
+         */
+        this.connect = input(...(ngDevMode ? [undefined, { debugName: "connect" }] : []));
+        /**
+         * The channel id
+         */
+        this.scalable = input(...(ngDevMode ? [undefined, { debugName: "scalable" }] : []));
+        this.resizeHandler = inject(ResizeConsumerService);
+        /**
+         * This signal checks if the current channel requesting the resize matches the channel ID from the resize handler.
+         * If they match, it returns the new height information; otherwise, it returns undefined.
+         */
+        this.newHeightFromChannel = computed(() => {
+            const channelAskingResize = this.scalable() || this.connect();
+            const newHeightFromChannel = this.resizeHandler.newHeightFromChannel();
+            if (channelAskingResize && newHeightFromChannel?.channelId === channelAskingResize) {
+                return newHeightFromChannel;
+            }
             return undefined;
-        }
-        if (urlString) {
-            const moduleUrl = new URL(urlString);
-            const queryParamsModule = new URLSearchParams(moduleUrl.searchParams);
-            const channelId = options?.memoryChannelId;
-            const memorizedRoute = channelId && this.routeMemorizeService?.getRoute(channelId);
-            const topWindowUrl = new URL(memorizedRoute ? window.origin + memorizedRoute : window.location.href);
-            const queryParamsTopWindow = new URLSearchParams(topWindowUrl.search);
-            if (options?.propagateQueryParams) {
-                for (const [key, value] of queryParamsTopWindow) {
-                    if (options?.overrideQueryParams || !queryParamsModule.has(key)) {
-                        queryParamsModule.set(key, value);
-                    }
-                }
+        }, ...(ngDevMode ? [{ debugName: "newHeightFromChannel" }] : []));
+        const elem = inject(ElementRef);
+        const renderer = inject(Renderer2);
+        this.resizeHandler.start();
+        /** When a new height value is received set the height of the host element (in pixels) */
+        effect(() => {
+            const newHeightFromChannel = this.newHeightFromChannel();
+            if (newHeightFromChannel) {
+                renderer.setStyle(elem.nativeElement, 'height', `${newHeightFromChannel.height}px`);
             }
-            moduleUrl.search = queryParamsModule.toString();
-            moduleUrl.pathname += topWindowUrl.pathname.split(`/${this.activeRoute.routeConfig?.path}`).pop() || '';
-            moduleUrl.pathname = moduleUrl.pathname.replace(/\/{2,}/g, '/');
-            const moduleUrlStringyfied = moduleUrl.toString();
-            return typeof url === 'string' ? moduleUrlStringyfied : this.domSanitizer.bypassSecurityTrustResourceUrl(moduleUrlStringyfied);
-        }
+        });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RestoreRoute, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: RestoreRoute, isStandalone: true, name: "restoreRoute" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ScalableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.13", type: ScalableDirective, isStandalone: true, selector: "[scalable]", inputs: { connect: { classPropertyName: "connect", publicName: "connect", isSignal: true, isRequired: false, transformFunction: null }, scalable: { classPropertyName: "scalable", publicName: "scalable", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RestoreRoute, decorators: [{
-            type: Pipe,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ScalableDirective, decorators: [{
+            type: Directive,
             args: [{
-                    name: 'restoreRoute'
+                    selector: '[scalable]',
+                    standalone: true
                 }]
-        }] });
+        }], ctorParameters: () => [], propDecorators: { connect: [{ type: i0.Input, args: [{ isSignal: true, alias: "connect", required: false }] }], scalable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scalable", required: false }] }] } });
 
 /** Default suffix for an url containing a theme css file */
 const THEME_URL_SUFFIX = '-theme.css';
@@ -871,13 +1061,14 @@ class ThemeProducerService {
     constructor() {
         this.messageService = inject((MessagePeerService));
         this.logger = inject(LoggerService);
+        this.window = inject(Window, { optional: true }) || window;
         /**
          * The type of messages this service handles ('theme').
          */
         this.types = THEME_MESSAGE_TYPE;
         registerProducer(this);
         // get the current theme name from the url (if any) and emit a first value for the current theme
-        const parentUrl = new URL(window.location.toString());
+        const parentUrl = new URL(this.window.location.toString());
         const selectedThemeName = parentUrl.searchParams.get(THEME_QUERY_PARAM_NAME);
         this.currentThemeSelection = signal(selectedThemeName
             ? {
@@ -941,10 +1132,10 @@ class ThemeProducerService {
         this.logger.error('Error in theme service message', message);
         this.revertToPreviousTheme();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ThemeProducerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ThemeProducerService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ThemeProducerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ThemeProducerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ThemeProducerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ThemeProducerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -977,10 +1168,10 @@ class ApplyTheme {
         }
         return undefined;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ApplyTheme, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: ApplyTheme, isStandalone: true, name: "applyTheme" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ApplyTheme, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.13", ngImport: i0, type: ApplyTheme, isStandalone: true, name: "applyTheme" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ApplyTheme, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ApplyTheme, decorators: [{
             type: Pipe,
             args: [{
                     name: 'applyTheme'
@@ -1036,132 +1227,19 @@ class ThemeConsumerService {
     stop() {
         this.consumerManagerService.unregister(this);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ThemeConsumerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ThemeConsumerService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ThemeConsumerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ThemeConsumerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ThemeConsumerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ThemeConsumerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
         }], ctorParameters: () => [] });
 
-class ConnectDirective {
-    /**
-     * Binds the `src` attribute of the iframe to the sanitized source URL.
-     */
-    get srcAttr() {
-        return this.src();
-    }
-    constructor() {
-        /**
-         * The connection ID required for the message peer service.
-         */
-        this.connect = input.required(...(ngDevMode ? [{ debugName: "connect" }] : []));
-        /**
-         * The sanitized source URL for the iframe.
-         */
-        this.src = input(...(ngDevMode ? [undefined, { debugName: "src" }] : []));
-        this.messageService = inject(MessagePeerService);
-        this.domSanitizer = inject(DomSanitizer);
-        this.iframeElement = inject(ElementRef).nativeElement;
-        this.clientOrigin = computed(() => {
-            const src = this.src();
-            const srcString = src && this.domSanitizer.sanitize(SecurityContext.RESOURCE_URL, src);
-            return srcString && new URL(srcString).origin;
-        }, ...(ngDevMode ? [{ debugName: "clientOrigin" }] : []));
-        const logger = inject(LoggerService);
-        // When the origin or connection ID change - reconnect the message service
-        effect((onCleanup) => {
-            let stopHandshakeListening = () => { };
-            const origin = this.clientOrigin();
-            const id = this.connect();
-            const source = this.iframeElement.contentWindow;
-            // listen for handshakes only if we know the origin and were given a connection ID
-            if (origin && source && id) {
-                try {
-                    stopHandshakeListening = this.messageService.listen({ id, source, origin });
-                }
-                catch (e) {
-                    logger.error(`Failed to start listening for (connection ID: ${id})`, e);
-                }
-            }
-            // stop listening for handshakes and disconnect previous connection when:
-            // - origin/connection ID change
-            // - the directive is destroyed
-            onCleanup(() => {
-                stopHandshakeListening();
-                this.messageService.disconnect();
-            });
-        });
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ConnectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.4", type: ConnectDirective, isStandalone: true, selector: "iframe[connect]", inputs: { connect: { classPropertyName: "connect", publicName: "connect", isSignal: true, isRequired: true, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "src": "this.srcAttr" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ConnectDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'iframe[connect]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [], propDecorators: { srcAttr: [{
-                type: HostBinding,
-                args: ['src']
-            }] } });
-
-/**
- * No operation function used to override the history API methods.
- */
-function noop() { }
-/**
- * If an iframe is not sandboxed or is of the same origin, navigation inside it will mess up the main window history.
- * This disables writing to and overriding history API from inside the iframe to prevent this.
- * Theoretically, this might break applications that rely on reading history API from inside the iframe.
- *
- * This should also allow having `CustomPathLocationStrategy` in the iframe if necessary.
- */
-function provideDisableHistoryWrites() {
-    return provideAppInitializer(() => {
-        Object.defineProperty(history, 'pushState', { value: noop, writable: false, configurable: false });
-        Object.defineProperty(history, 'replaceState', { value: noop, writable: false, configurable: false });
-    });
-}
-
-/**
- * Provide the communication protocol connection configuration
- * @param connectionConfigOptions The identifier of the application in the communication protocol ecosystem plus the types of messages able to exchange and a logger object
- */
-function provideConnection(connectionConfigOptions) {
-    persistHostInfo();
-    const connectionId = (isEmbedded() && getHostInfo().moduleApplicationId) || connectionConfigOptions?.id;
-    if (!connectionId) {
-        (connectionConfigOptions?.logger || console).error('An id (moduleId) needs to be provided for the application in order to establish a connection inside the communication protocol');
-        return makeEnvironmentProviders([]);
-    }
-    const config = {
-        id: connectionId,
-        messageCheckStrategy: 'version',
-        knownMessages: [...KNOWN_MESSAGES, ...(connectionConfigOptions?.knownMessages || [])]
-    };
-    return makeEnvironmentProviders([
-        {
-            provide: MESSAGE_PEER_CONFIG, useValue: config
-        },
-        {
-            provide: MESSAGE_PEER_CONNECT_OPTIONS, useValue: getDefaultClientEndpointStartOptions()
-        },
-        {
-            // in the case of the ConnectionService will extend the base service 'useExisting' should be used
-            provide: MessagePeerService, useClass: MessagePeerService, deps: [MESSAGE_PEER_CONFIG]
-        },
-        // deactivate history writes to avoid embedded app writing to the host history
-        ...isEmbedded() ? [provideDisableHistoryWrites()] : []
-    ]);
-}
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ApplyTheme, ConnectDirective, ConsumerManagerService, ERROR_MESSAGE_TYPE, HostInfoPipe, KNOWN_MESSAGES, MFE_HOST_APPLICATION_ID_PARAM, MFE_HOST_URL_PARAM, MFE_MODULE_APPLICATION_ID_PARAM, NavigationConsumerService, ProducerManagerService, ResizeConsumerService, ResizeService, RestoreRoute, RouteMemorizeDirective, RouteMemorizeService, RoutingService, ScalableDirective, THEME_QUERY_PARAM_NAME, THEME_URL_SUFFIX, ThemeConsumerService, ThemeProducerService, applyInitialTheme, applyTheme, downloadApplicationThemeCss, getAvailableConsumers, getDefaultClientEndpointStartOptions, getHostInfo, getStyle, hostQueryParams, isEmbedded, isErrorMessage, persistHostInfo, provideConnection, registerConsumer, registerProducer, sendError };
+export { ApplyTheme, ConnectDirective, ConsumerManagerService, ERROR_MESSAGE_TYPE, HistoryConsumerService, HostInfoPipe, KNOWN_MESSAGES, MFE_HOST_APPLICATION_ID_PARAM, MFE_HOST_URL_PARAM, MFE_MODULE_APPLICATION_ID_PARAM, NavigationConsumerService, ProducerManagerService, ResizeConsumerService, ResizeService, RestoreRoute, RouteMemorizeDirective, RouteMemorizeService, RoutingService, ScalableDirective, THEME_QUERY_PARAM_NAME, THEME_URL_SUFFIX, ThemeConsumerService, ThemeProducerService, applyInitialTheme, applyTheme, downloadApplicationThemeCss, getAvailableConsumers, getDefaultClientEndpointStartOptions, getHostInfo, getStyle, hostQueryParams, isEmbedded, isErrorMessage, persistHostInfo, provideConnection, provideHistoryOverrides, registerConsumer, registerProducer, sendError };
 //# sourceMappingURL=ama-mfe-ng-utils.mjs.map