@ama-mfe/ng-utils 13.3.0-prerelease.22 → 13.3.0-prerelease.24

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.4", ngImport: i0, type: ConnectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.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.3.4", ngImport: i0, type: ConnectDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'iframe[connect]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { srcAttr: [{
+                type: HostBinding,
+                args: ['src']
+            }] } });
 
 /**
  * Gets the available consumers and formats them into a {@see DeclareMessages} object.
@@ -210,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.3.4", ngImport: i0, type: ResizeConsumerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ResizeConsumerService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: HistoryConsumerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: HistoryConsumerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ResizeConsumerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: HistoryConsumerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -264,102 +323,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.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.3.4", ngImport: i0, type: ResizeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ResizeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.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.3.4", ngImport: i0, type: ScalableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.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.3.4", ngImport: i0, type: ScalableDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[scalable]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [] });
 
 const SESSION_STORAGE_KEY = 'ama-mfe-host-info';
 /**
@@ -439,6 +440,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 }]
         }] });
 
+/** 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
+ */
+function isEmbedded() {
+    return window.top !== window.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.
  *
@@ -623,36 +688,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 }]
         }], 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;
-}
-
 /**
  * A service that keeps in sync Router navigation and navigation messages.
  *
@@ -796,6 +831,154 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 }]
         }] });
 
+/**
+ * This service listens for resize messages and updates the height of elements based on the received messages.
+ */
+class ResizeConsumerService {
+    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').
+         */
+        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());
+    }
+    /**
+     * 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.4", ngImport: i0, type: ResizeConsumerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ResizeConsumerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", 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.4", ngImport: i0, type: ResizeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ResizeService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.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`);
+            }
+        });
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ScalableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ScalableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[scalable]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [] });
+
 /** Default suffix for an url containing a theme css file */
 const THEME_URL_SUFFIX = '-theme.css';
 /** Default name for the query parameter containing the theme name */
@@ -1049,122 +1232,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 }]
         }], 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.3.4", ngImport: i0, type: ConnectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.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.3.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