@monterosa/sdk-launcher-kit 0.18.0 → 0.19.0-rc.2

package/dist/{index.esm2017.js → index.esm.js}

@@ -1,15 +1,13 @@
-import { Logger, Sdk, getSdk, LogLevel } from '@monterosa/sdk-core';
-import { createError, getGlobal, Emitter, subscribe, delay, throttle, checkAvailability, setItem, clear, getItem, removeItem } from '@monterosa/sdk-util';
+import { Logger, Sdk, getSdk, LogLevel, configure } from '@monterosa/sdk-core';
+import { createError, getGlobal, Emitter, subscribe, delay, checkAvailability, setItem, clear, getItem, removeItem, throttle } from '@monterosa/sdk-util';
 import { v4 } from 'uuid';
 import { fetchListings } from '@monterosa/sdk-interact-kit';
 
 /**
  * @license
- * constants.ts
- * launcher-kit
+ * @monterosa/sdk-launcher-kit
  *
- * Created by Rygor Kharytanovich <rygor@monterosa.co.uk> on 2022-07-15
- * Copyright © 2022 Monterosa. All rights reserved.
+ * Copyright © 2022 Monterosa Productions Limited. All rights reserved.
  *
  * More details on the license can be found at https://www.monterosa.co/sdk/license
  */
@@ -35,11 +33,9 @@ const DEFAULT_HEIGHT = 250;
 
 /**
  * @license
- * logger.ts
- * interact-kit
+ * @monterosa/sdk-interact-kit
  *
- * Created by Rygor Kharytanovich <rygor@monterosa.co.uk> on 2023-05-23
- * Copyright © 2023 Monterosa. All rights reserved.
+ * Copyright © 2023 Monterosa Productions Limited. All rights reserved.
  *
  * More details on the license can be found at https://www.monterosa.co/sdk/license
  */
@@ -47,11 +43,9 @@ const logger = new Logger('@monterosa/sdk-interact-kit');
 
 /**
  * @license
- * public_types.ts
- * launcher-kit
+ * @monterosa/sdk-launcher-kit
  *
- * Created by Rygor Kharytanovich <rygor@monterosa.co.uk> on 2022-07-12
- * Copyright © 2022 Monterosa. All rights reserved.
+ * Copyright © 2022 Monterosa Productions Limited. All rights reserved.
  *
  * More details on the license can be found at https://www.monterosa.co/sdk/license
  */
@@ -93,11 +87,9 @@ var Source;
 
 /**
  * @license
- * types.ts
- * launcher-kit
+ * @monterosa/sdk-launcher-kit
  *
- * Created by Rygor Kharytanovich <rygor@monterosa.co.uk> on 2022-01-19
- * Copyright © 2022 Monterosa. All rights reserved.
+ * Copyright © 2022-2024 Monterosa Productions Limited. All rights reserved.
  *
  * More details on the license can be found at https://www.monterosa.co/sdk/license
  */
@@ -142,11 +134,9 @@ var QueryParam;
 
 /**
  * @license
- * types.ts
- * launcher-kit
+ * @monterosa/sdk-launcher-kit
  *
- * Created by Rygor Kharytanovich <rygor@monterosa.co.uk> on 2024-01-02
- * Copyright © 2024 Monterosa. All rights reserved.
+ * Copyright © 2024 Monterosa Productions Limited. All rights reserved.
  *
  * More details on the license can be found at https://www.monterosa.co/sdk/license
  */
@@ -189,11 +179,9 @@ const BridgeErrorMessages = {
 
 /**
  * @license
- * config.ts
- * launcher-kit
+ * @monterosa/sdk-launcher-kit
  *
- * Created by Rygor Kharytanovich <rygor@monterosa.co.uk> on 2024-01-02
- * Copyright © 2024 Monterosa. All rights reserved.
+ * Copyright © 2024 Monterosa Productions Limited. All rights reserved.
  *
  * More details on the license can be found at https://www.monterosa.co/sdk/license
  */
@@ -232,11 +220,9 @@ function setRequestTimeout(newTimeout) {
 
 /**
  * @license
- * helpers.ts
- * launcher-kit
+ * @monterosa/sdk-launcher-kit
  *
- * Created by Rygor Kharytanovich <rygor@monterosa.co.uk> on 2022-07-12
- * Copyright © 2022 Monterosa. All rights reserved.
+ * Copyright © 2022 Monterosa Productions Limited. All rights reserved.
  *
  * More details on the license can be found at https://www.monterosa.co/sdk/license
  */
@@ -247,11 +233,9 @@ function isMessage(message) {
 
 /**
  * @license
- * sideeffect.ts
- * launcher-kit
+ * @monterosa/sdk-launcher-kit
  *
- * Created by Rygor Kharytanovich <rygor@monterosa.co.uk> on 2022-07-12
- * Copyright © 2022 Monterosa. All rights reserved.
+ * Copyright © 2022 Monterosa Productions Limited. All rights reserved.
  *
  * More details on the license can be found at https://www.monterosa.co/sdk/license
  */
@@ -309,11 +293,9 @@ if (!globals$2.monterosaSdk.initialised) {
 
 /**
  * @license
- * constants.ts
- * launcher-kit
+ * @monterosa/sdk-launcher-kit
  *
- * Created by Rygor Kharytanovich <rygor@monterosa.co.uk> on 2022-07-12
- * Copyright © 2022 Monterosa. All rights reserved.
+ * Copyright © 2022 Monterosa Productions Limited. All rights reserved.
  *
  * More details on the license can be found at https://www.monterosa.co/sdk/license
  */
@@ -333,11 +315,9 @@ const VERSION$1 = '1.0.0';
 
 /**
  * @license
- * bridge_impl.ts
- * launcher-kit
+ * @monterosa/sdk-launcher-kit
  *
- * Created by Rygor Kharytanovich <rygor@monterosa.co.uk> on 2022-07-12
- * Copyright © 2022 Monterosa. All rights reserved.
+ * Copyright © 2022 Monterosa Productions Limited. All rights reserved.
  *
  * More details on the license can be found at https://www.monterosa.co/sdk/license
  */
@@ -349,6 +329,8 @@ class BridgeImpl extends Emitter {
     constructor(id = v4()) {
         super();
         this.id = id;
+        this.recipientReady = false;
+        this.messagesQueue = [];
         globals.monterosaSdk.emitter.on('message', this.handleMessage.bind(this));
     }
     static isMessage(message) {
@@ -366,10 +348,21 @@ class BridgeImpl extends Emitter {
         return document.querySelector(this.iFrameSelector);
     }
     handleMessage(message) {
-        if (message.bridgeId === this.id) {
-            logger.log(`Received a ${message.respondingTo === null ? 'message' : 'response'}`, message);
-            this.emit('message', message);
+        const { id, bridgeId, action, respondingTo } = message;
+        if (bridgeId !== this.id) {
+            return;
         }
+        logger.log(`Received a ${respondingTo === null ? 'message' : 'response'}`, message);
+        if (action === Action.OnReady) {
+            this.recipientReady = true;
+            if (respondingTo === null) {
+                this.send(Action.OnReady, {}, Source.Sdk, id);
+            }
+            while (this.messagesQueue.length > 0) {
+                this.postMessage(this.messagesQueue.shift());
+            }
+        }
+        this.emit('message', message);
     }
     createMessage(action, payload, sourceName, respondingTo = null) {
         return {
@@ -385,6 +378,10 @@ class BridgeImpl extends Emitter {
     }
     postMessage(message) {
         var _a, _b, _c, _d;
+        if (!this.recipientReady && message.action !== Action.OnReady) {
+            this.messagesQueue.push(message);
+            return;
+        }
         const json = JSON.stringify(message);
         if (IS_IOS) {
             (_b = (_a = globals.webkit) === null || _a === void 0 ? void 0 : _a.messageHandlers) === null || _b === void 0 ? void 0 : _b.monterosaSdk.postMessage(json);
@@ -416,7 +413,8 @@ class BridgeImpl extends Emitter {
          * Start the timeout, when it finishes it should reject Promise.race below
          */
         const countdown = new Promise((_, reject) => {
-            timeoutRef = setTimeout(reject, timeout);
+            timeoutRef = setTimeout(() => reject(new Error(`The request for action '${action}' exceeded the timeout ` +
+                `limit of ${timeout}ms and was aborted.`)), timeout);
         });
         /**
          * Start the request and wait for the message with the respondingTo
@@ -450,11 +448,9 @@ class BridgeImpl extends Emitter {
 
 /**
  * @license
- * api.ts
- * launcher-kit
+ * @monterosa/sdk-launcher-kit
  *
- * Created by Rygor Kharytanovich <rygor@monterosa.co.uk> on 2022-07-12
- * Copyright © 2022 Monterosa. All rights reserved.
+ * Copyright © 2022 Monterosa Productions Limited. All rights reserved.
  *
  * More details on the license can be found at https://www.monterosa.co/sdk/license
  */
@@ -467,7 +463,7 @@ function getBridge(id) {
     if (bridges.has(id)) {
         return bridges.get(id);
     }
-    const bridge = new BridgeImpl();
+    const bridge = new BridgeImpl(id);
     bridges.set(id, bridge);
     return bridge;
 }
@@ -648,11 +644,9 @@ function onMessage(bridged, callback) {
 
 /**
  * @license
- * experience_impl.ts
- * launcher-kit
+ * @monterosa/sdk-launcher-kit
  *
- * Created by Rygor Kharytanovich <rygor@monterosa.co.uk> on 2022-01-19
- * Copyright © 2022 Monterosa. All rights reserved.
+ * Copyright © 2022-2024 Monterosa Productions Limited. All rights reserved.
  *
  * More details on the license can be found at https://www.monterosa.co/sdk/license
  */
@@ -663,8 +657,9 @@ class ExperienceImpl {
     constructor(sdk, config) {
         this.sdk = sdk;
         this._parameters = {};
+        this.id = v4();
         this._config = config;
-        this.bridge = getBridge(v4());
+        this.bridge = getBridge(this.id);
         if (config.parameters !== undefined) {
             const reserved = Object.values(QueryParam);
             const ignored = [];
@@ -758,11 +753,37 @@ class ExperienceImpl {
 
 /**
  * @license
- * loader.ts
- * launcher-kit
+ * @monterosa/sdk-launcher-kit
+ *
+ * Copyright © 2025 Monterosa Productions Limited. All rights reserved.
+ *
+ * More details on the license can be found at https://www.monterosa.co/sdk/license
+ */
+const integrations = new Map();
+function addIntegration(container, integration) {
+    integrations.set(container, integration);
+}
+function getIntegration(container) {
+    return integrations.get(container);
+}
+function getIntegrations() {
+    return Array.from(integrations.values());
+}
+function deleteIntegration(container) {
+    integrations.delete(container);
+}
+function hasIntegration(containerOrExperience) {
+    if (containerOrExperience instanceof HTMLElement) {
+        return integrations.has(containerOrExperience);
+    }
+    return Array.from(integrations.values()).some((integration) => integration.experience === containerOrExperience);
+}
+
+/**
+ * @license
+ * @monterosa/sdk-launcher-kit
  *
- * Created by Rygor Kharytanovich <rygor@monterosa.co.uk> on 2022-08-04
- * Copyright © 2022 Monterosa. All rights reserved.
+ * Copyright © 2022 Monterosa Productions Limited. All rights reserved.
  *
  * More details on the license can be found at https://www.monterosa.co/sdk/license
  */
@@ -951,15 +972,13 @@ function unstashStyles(element) {
     element.removeAttribute('data-stash');
 }
 
-var version = "0.18.0";
+var version = "0.19.0-rc.2";
 
 /**
  * @license
- * api.ts
- * launcher-kit
+ * @monterosa/sdk-launcher-kit
  *
- * Created by Rygor Kharytanovich <rygor@monterosa.co.uk> on 2022-02-15
- * Copyright © 2022 Monterosa. All rights reserved.
+ * Copyright © 2022-2025 Monterosa Productions Limited. All rights reserved.
  *
  * More details on the license can be found at https://www.monterosa.co/sdk/license
  */
@@ -969,8 +988,12 @@ var version = "0.18.0";
  * @internal
  */
 const VERSION = version;
-const integrations = new Map();
-const embedHooks = [];
+/**
+ * Event emitter for the launcher kit.
+ *
+ * @internal
+ */
+const emitter = new Emitter();
 /**
  * Creates an iframe with the provided parameters.
  *
@@ -1051,21 +1074,6 @@ function getExperience(sdkOrConfig, config) {
     const experience = new ExperienceImpl(sdk, experienceConfig);
     return experience;
 }
-function onResize(experience, container) {
-    if (!experience.config.autoresizesHeight) {
-        return () => { };
-    }
-    return onSdkMessage(experience, ({ action, payload }) => {
-        if (action === Action.OnResize) {
-            /**
-             * Container width is maintained the same as it is defined in the parent
-             * page to preserve its behaviour. Only the height is updated
-             */
-            // container.style.width = `${payload.width}px`;
-            container.style.height = `${payload.height}px`;
-        }
-    });
-}
 function onUILoaded(experience) {
     return new Promise((resolve) => {
         const unsubscribe = onSdkMessage(experience, ({ action }) => {
@@ -1076,6 +1084,35 @@ function onUILoaded(experience) {
         });
     });
 }
+/**
+ * Subscribe to the event when Experience is embedded into the container.
+ * Also calls the callback immediately for all currently embedded Experiences.
+ *
+ * @param callback - Callback to be called when Experience is embedded.
+ */
+function onExperienceEmbedded(callback) {
+    const integrations = getIntegrations();
+    for (const integration of integrations) {
+        if (integration.embedded) {
+            callback(integration.experience, integration.container);
+        }
+    }
+    emitter.on('embedded', callback);
+    return () => {
+        emitter.off('embedded', callback);
+    };
+}
+/**
+ * Subscribe to the event when Experience is unmounted from the container.
+ *
+ * @param callback - Callback to be called when Experience is unmounted.
+ */
+function onExperienceUnmounted(callback) {
+    emitter.on('unmounted', callback);
+    return () => {
+        emitter.off('unmounted', callback);
+    };
+}
 async function experienceReady(experience) {
     /**
      * Bumper delay during which loading state can't be hidden even
@@ -1122,27 +1159,30 @@ async function embed(experience, containerOrId) {
         ? containerOrId
         : document.getElementById(containerOrId);
     if (container === null) {
-        throw new Error(`Container element with id "${containerOrId}" doesn't exist in DOM`);
+        throw new Error(`Container element "${containerOrId}" not found in DOM. ` +
+            'Please ensure the element exists before calling embed().');
     }
-    if (integrations.has(container)) {
-        return;
+    if (hasIntegration(container)) {
+        throw new Error('Container already contains an embedded experience. Use unmount() first ' +
+            'to remove the existing experience before embedding a new one.');
+    }
+    if (hasIntegration(experience)) {
+        throw new Error('This experience is already embedded in another container. Use unmount() ' +
+            'to remove it from that container before embedding it into this one.');
     }
     const controller = new AbortController();
-    const hooksUnsubscribe = [];
-    integrations.set(container, {
+    const integration = {
+        container,
         experience,
         controller,
-        hooksUnsubscribe,
-    });
+        embedded: false,
+    };
+    addIntegration(container, integration);
     if (experience.config.supportsLoadingState === true) {
         // Although showLoader is an asynchronous function, we execute
         // it synchronously to embed the iframe as quickly as possible.
         show(container, experience.config.loadingTemplate);
     }
-    for (const hook of embedHooks) {
-        const unsub = hook(experience, container);
-        hooksUnsubscribe.push(unsub);
-    }
     const url = await experience.getUrl();
     if (controller.signal.aborted) {
         return;
@@ -1155,6 +1195,8 @@ async function embed(experience, containerOrId) {
     });
     container.appendChild(iframe);
     concealIFrame(iframe);
+    integration.embedded = true;
+    emitter.emit('embedded', experience, container);
     await experienceReady(experience);
     if (controller.signal.aborted) {
         return;
@@ -1182,21 +1224,22 @@ function unmount(containerOrId) {
         ? containerOrId
         : document.getElementById(containerOrId);
     if (container === null) {
-        throw new Error(`Container element with id "${containerOrId}" doesn't exist in DOM`);
+        throw new Error(`Container element "${containerOrId}" not found in DOM. ` +
+            'Please ensure the element exists before calling unmount().');
     }
-    const integration = integrations.get(container);
+    const integration = getIntegration(container);
     if (!integration) {
-        return;
+        throw new Error(`No experience found embedded in container "${containerOrId}". ` +
+            'Please ensure the experience is embedded before calling unmount().');
     }
     integration.controller.abort();
-    for (const unsub of integration.hooksUnsubscribe) {
-        unsub();
-    }
     while (container.lastElementChild) {
         container.removeChild(container.lastElementChild);
     }
-    integrations.delete(container);
+    integration.embedded = false;
+    deleteIntegration(container);
     container.style.height = '';
+    emitter.emit('unmounted', integration.experience, container);
 }
 /**
  * Informs the Experience that more data should be loaded and displayed on the UI.
@@ -1210,28 +1253,19 @@ function unmount(containerOrId) {
 function requestMoreData(experience) {
     sendSdkMessage(experience, Action.OnMoreDataRequested);
 }
-/**
- * @internal
- */
-function registerEmbedHook(hook) {
-    embedHooks.push(hook);
-}
 function enableLogging(logLevelOrFlag = true) {
     if (typeof logLevelOrFlag === 'boolean') {
         logger.logLevel = logLevelOrFlag ? LogLevel.Verbose : LogLevel.Silent;
         return;
     }
     logger.logLevel = logLevelOrFlag;
-}
-registerEmbedHook(onResize);
+}
 
 /**
  * @license
- * parent_application_impl.ts
- * launcher-kit
+ * @monterosa/sdk-launcher-kit
  *
- * Created by Rygor Kharytanovich <rygor@monterosa.co.uk> on 2022-07-12
- * Copyright © 2022 Monterosa. All rights reserved.
+ * Copyright © 2022 Monterosa Productions Limited. All rights reserved.
  *
  * More details on the license can be found at https://www.monterosa.co/sdk/license
  */
@@ -1243,11 +1277,9 @@ class ParentApplicationImpl {
 
 /**
  * @license
- * parent_application.ts
- * launcher-kit
+ * @monterosa/sdk-launcher-kit
  *
- * Created by Rygor Kharytanovich <rygor@monterosa.co.uk> on 2023-02-15
- * Copyright © 2023 Monterosa. All rights reserved.
+ * Copyright © 2023 Monterosa Productions Limited. All rights reserved.
  *
  * More details on the license can be found at https://www.monterosa.co/sdk/license
  */
@@ -1273,174 +1305,9 @@ function getParentApplication() {
 
 /**
  * @license
- * child_helpers.ts
- * launcher-kit
+ * @monterosa/sdk-launcher-kit
  *
- * Created by Josep Rodriguez <josep.rodriguez@monterosa.co.uk> on 2022-07-13
- * Copyright © 2022 Monterosa. All rights reserved.
- *
- * More details on the license can be found at https://www.monterosa.co/sdk/license
- */
-function getUrlParam(param) {
-    let queryString = {};
-    if (typeof window !== 'undefined') {
-        queryString = window.location.search;
-    }
-    const urlParams = new URLSearchParams(queryString);
-    return urlParams.get(param);
-}
-/**
- * The SDK on the parent application will by default request a child
- * Experience to hide its header and footer by setting a query parameter called
- * `micHideHeaderAndFooter` to `1`.
- *
- * This function will return true if that is the case, and false otherwise.
- *
- * When true, the developer of a child Experience is expected to hide it's headers
- * and footers as the parent application is actively providing them.
- *
- * You can test whether you are respecting this correctly by adding the following query
- * to your URL:
- *
- * "?micHideHeaderAndFooter=1"
- *
- * @returns Whether the header and footer views should be hidden.
- */
-function shouldHideHeaderAndFooter() {
-    return getUrlParam(QueryParam.HideHeaderAndFooter) === '1';
-}
-/**
- * This function will returns true if experience is embedded in autoresize height mode.
- */
-function isAutoresizesHeight() {
-    return getUrlParam(QueryParam.AutoresizesHeight) === '1';
-}
-/**
- * This function is used to notify the parent application that the Experience
- * is ready to be used. It's intended to be called by the Experience itself and
- * not by the parent application.
- *
- * @example
- * ```javascript
- * import { sendReady } from '@monterosa/sdk-launcher-kit';
- *
- * sendReady();
- * ```
- *
- * @returns void
- */
-function sendReady() {
-    const parentApp = getParentApplication();
-    if (parentApp === null) {
-        console.log('Unable to send finished loading UI message, as there is no parent application');
-        return;
-    }
-    sendSdkMessage(parentApp, Action.OnReady);
-}
-/**
- * Sends a message to the SDK of the parent application informing it that
- * the UI of this Experience has completed loading.
- *
- * You should call this method when your UI has completed loading and you are ready to
- * display data to the user. This can be when your network calls have successfully requested
- * data and you have updated the DOM for it, or when an error has occurred and you want
- * to take over the UI to provide details to the user.
- *
- * The SDK will use this message to dismiss the loading indicator, allowing a seamless
- * transition between a native loading UI, into a fully loaded, child Experience.
- *
- * If this call is not made, the parent SDK will add a grace period to ensure the web app
- * has sufficient time to load, and eventually dismiss the loading state, whether Experience
- * is ready or not, so as to avoid scenarios were a defect leaves an infinite loading state
- * presented to the user.
- */
-function sendFinishedLoadingUI() {
-    const parentApp = getParentApplication();
-    if (parentApp === null) {
-        console.log('Unable to send finished loading UI message, as there is no parent application');
-        return;
-    }
-    sendSdkMessage(parentApp, Action.OnUILoaded);
-}
-/**
- * Adds an observer for when more data is requested by the parent application
- *
- * @param callback - The callback that is triggered when a request for more data
- * is received
- * @returns The unsubscribe function. When it's called,
- * the observer will be removed and requests for data will no longer be received
- */
-function onMoreDataRequested(callback) {
-    const parentApp = getParentApplication();
-    if (parentApp === null) {
-        console.log('Unable to subscribe to more data event, as there is no parent application');
-        return () => { };
-    }
-    return onSdkMessage(parentApp, ({ action }) => {
-        if (action === Action.OnMoreDataRequested) {
-            callback();
-        }
-    });
-}
-/**
- * Adds an observer for when experience is fully embedded and ready to accept
- * incoming messages
- *
- * @param experience - Experience instance
- * @param callback - The callback that is triggered when experience is embedded
- * @returns The unsubscribe function. When it's called, the observer will be
- * removed and ready event will not be received
- */
-function onReady(experience, callback) {
-    return onSdkMessage(experience, ({ action }) => {
-        if (action === Action.OnReady) {
-            callback();
-        }
-    });
-}
-/**
- * @internal
- */
-const sendExperienceSizeThrottled = throttle((width, height) => {
-    const parentApp = getParentApplication();
-    if (parentApp === null)
-        return;
-    sendSdkMessage(parentApp, Action.OnResize, { width, height });
-}, RESIZE_THROTTLE_TIMEOUT, {
-    leading: true,
-    trailing: true,
-});
-/**
- * @internal
- */
-function sendExperienceSize(width, height) {
-    return sendExperienceSizeThrottled(width, height);
-}
-/**
- * Sets up an observer to watch for the element dimensions change and
- * automatically reports their changes to the parent application.
- *
- * @param element - HTML element whose dimensions need to be watched
- * @returns The unsubscribe function. When it's called,
- * the observer will be removed and element dimensions are no longer tracked
- */
-function reportExperienceSizeChanges(element) {
-    const observer = new ResizeObserver(() => {
-        const width = Math.max(element.offsetWidth, element.scrollWidth);
-        const height = Math.max(element.offsetHeight, element.scrollHeight);
-        sendExperienceSize(width, height);
-    });
-    observer.observe(element);
-    return () => observer.unobserve(element);
-}
-
-/**
- * @license
- * storage_impl.ts
- * launcher-kit
- *
- * Created by Rygor Kharytanovich <rygor@monterosa.co.uk> on 2023-02-15
- * Copyright © 2023 Monterosa. All rights reserved.
+ * Copyright © 2023 Monterosa Productions Limited. All rights reserved.
  *
  * More details on the license can be found at https://www.monterosa.co/sdk/license
  */
@@ -1501,11 +1368,9 @@ class StorageImpl {
 
 /**
  * @license
- * storage.ts
- * launcher-kit
+ * @monterosa/sdk-launcher-kit
  *
- * Created by Rygor Kharytanovich <rygor@monterosa.co.uk> on 2023-02-15
- * Copyright © 2023 Monterosa. All rights reserved.
+ * Copyright © 2023 Monterosa Productions Limited. All rights reserved.
  *
  * More details on the license can be found at https://www.monterosa.co/sdk/license
  */
@@ -1526,30 +1391,65 @@ const storage = new StorageImpl();
 /**
  * @internal
  */
-function listenStorageMessages(experience) {
-    return onSdkMessage(experience, (message) => {
-        let payload = {};
+const unsubs$1 = new Map();
+/**
+ * @internal
+ */
+function handleExperienceEmbedded$1(experience) {
+    const unsub = onSdkMessage(experience, (message) => {
         if (!Object.values(StorageAction).includes(message.action)) {
             return;
         }
-        switch (message.action) {
-            case StorageAction.Read:
-                payload = {
-                    value: storage.getItem(message.payload.key),
-                };
-                break;
-            case StorageAction.Write:
-                storage.setItem(message.payload.key, message.payload.value);
-                break;
-            case StorageAction.Remove:
-                storage.removeItem(message.payload.key);
-                break;
-            case StorageAction.Clear:
-                storage.clear();
-                break;
+        const { key, value } = message.payload;
+        const respond = (payload) => respondToSdkMessage(experience, message, payload);
+        try {
+            switch (message.action) {
+                case StorageAction.Read:
+                    if (key === undefined) {
+                        throw new Error('Key is required');
+                    }
+                    respond({
+                        key,
+                        value: storage.getItem(key),
+                    });
+                    break;
+                case StorageAction.Write:
+                    if (key === undefined || value === undefined) {
+                        throw new Error('Key and value are required');
+                    }
+                    storage.setItem(key, value);
+                    respond({ key });
+                    break;
+                case StorageAction.Remove:
+                    if (key === undefined) {
+                        throw new Error('Key is required');
+                    }
+                    storage.removeItem(key);
+                    respond({ key });
+                    break;
+                case StorageAction.Clear:
+                    storage.clear();
+                    respond();
+                    break;
+            }
+        }
+        catch (error) {
+            if (error instanceof Error) {
+                respond(Object.assign(Object.assign({}, (key !== undefined && { key })), { error: error.message }));
+            }
         }
-        respondToSdkMessage(experience, message, payload);
     });
+    unsubs$1.set(experience.id, unsub);
+}
+/**
+ * @internal
+ */
+function handleExperienceUnmounted$1(experience) {
+    const unsub = unsubs$1.get(experience.id);
+    if (unsub) {
+        unsub();
+        unsubs$1.delete(experience.id);
+    }
 }
 /**
  * The `setStoragePersistent` function is a simple function that allows to
@@ -1596,6 +1496,9 @@ async function storageRead(key) {
         const result = await sendSdkRequest(parentApp, StorageAction.Read, {
             key,
         });
+        if (result.payload.error !== undefined) {
+            throw new Error(result.payload.error);
+        }
         value = result.payload.value;
     }
     else {
@@ -1619,10 +1522,13 @@ async function storageRead(key) {
 async function storageWrite(key, value) {
     const parentApp = getParentApplication();
     if (parentApp !== null) {
-        await sendSdkRequest(parentApp, StorageAction.Write, {
+        const result = await sendSdkRequest(parentApp, StorageAction.Write, {
             key,
             value,
         });
+        if (result.payload.error !== undefined) {
+            throw new Error(result.payload.error);
+        }
     }
     else {
         storage.setItem(key, value);
@@ -1644,7 +1550,12 @@ async function storageWrite(key, value) {
 async function storageRemove(key) {
     const parentApp = getParentApplication();
     if (parentApp !== null) {
-        await sendSdkRequest(parentApp, StorageAction.Remove, { key });
+        const result = await sendSdkRequest(parentApp, StorageAction.Remove, {
+            key,
+        });
+        if (result.payload.error !== undefined) {
+            throw new Error(result.payload.error);
+        }
     }
     else {
         storage.removeItem(key);
@@ -1664,14 +1575,304 @@ async function storageRemove(key) {
 async function storageClear() {
     const parentApp = getParentApplication();
     if (parentApp !== null) {
-        await sendSdkRequest(parentApp, StorageAction.Clear);
+        const result = await sendSdkRequest(parentApp, StorageAction.Clear);
+        if (result.payload.error !== undefined) {
+            throw new Error(result.payload.error);
+        }
     }
     else {
         storage.clear();
     }
     return Promise.resolve();
 }
-registerEmbedHook(listenStorageMessages);
+onExperienceEmbedded(handleExperienceEmbedded$1);
+onExperienceUnmounted(handleExperienceUnmounted$1);
+
+/**
+ * @license
+ * @monterosa/sdk-launcher-kit
+ *
+ * Copyright © 2022-2025 Monterosa Productions Limited. All rights reserved.
+ *
+ * More details on the license can be found at https://www.monterosa.co/sdk/license
+ */
+const ELEMENT_NAME = 'monterosa-experience';
+class MonterosaExperienceElement extends HTMLElement {
+    async connectedCallback() {
+        const host = this.getAttribute('host');
+        if (host === null) {
+            throw new Error('Host attribute is not set for Experience element');
+        }
+        const projectId = this.getAttribute('projectId');
+        if (projectId === null) {
+            throw new Error('Project attribute is not set  for Experience element');
+        }
+        const autoresizesHeight = this.getAttribute('autoresizesHeight') !== null;
+        const hidesHeadersAndFooters = this.getAttribute('hidesHeadersAndFooters') !== null;
+        const persistentStorage = this.getAttribute('persistentStorage') !== null;
+        const eventId = this.getAttribute('eventId') !== null
+            ? this.getAttribute('eventId')
+            : undefined;
+        const experienceUrl = this.getAttribute('experienceUrl') !== null
+            ? this.getAttribute('experienceUrl')
+            : undefined;
+        const allow = this.getAttribute('allow') !== null
+            ? this.getAttribute('allow')
+            : undefined;
+        const allowFullScreen = this.getAttribute('allowFullScreen') !== null;
+        const parameters = {};
+        for (let i = 0; i < this.attributes.length; i++) {
+            const attr = this.attributes[i];
+            if (attr.name.startsWith('param-')) {
+                const paramName = attr.name.split('param-')[1];
+                parameters[paramName] = attr.value;
+            }
+        }
+        const sdk = configure({
+            host,
+            projectId,
+        }, `${host}-${projectId}`);
+        const experience = getExperience(sdk, {
+            autoresizesHeight,
+            eventId,
+            hidesHeadersAndFooters,
+            experienceUrl,
+            allow,
+            allowFullScreen,
+            parameters,
+        });
+        this.style.height = '250px';
+        this.style.display = 'block';
+        this.style.position = 'relative';
+        if (persistentStorage) {
+            setStoragePersistent(true);
+        }
+        embed(experience, this);
+        // eslint-disable-next-line
+        onSdkMessage(experience, ({ payload, action }) => {
+            switch (action) {
+                case Action.OnReady:
+                    break;
+                case Action.OnResize: {
+                    // const { width, height } = payload;
+                    break;
+                }
+                case Action.OnUILoaded:
+                    this.dispatchEvent(new CustomEvent('uiloaded', {
+                        bubbles: true,
+                        cancelable: false,
+                        composed: true,
+                    }));
+                    break;
+            }
+        });
+    }
+    disconnectedCallback() {
+        unmount(this);
+    }
+}
+if (!customElements.get(ELEMENT_NAME)) {
+    customElements.define(ELEMENT_NAME, MonterosaExperienceElement);
+}
+
+/**
+ * @license
+ * @monterosa/sdk-launcher-kit
+ *
+ * Copyright © 2025 Monterosa Productions Limited. All rights reserved.
+ *
+ * More details on the license can be found at https://www.monterosa.co/sdk/license
+ */
+const unsubs = new Map();
+function handleExperienceEmbedded(experience, container) {
+    if (!experience.config.autoresizesHeight) {
+        return;
+    }
+    const unsub = onSdkMessage(experience, ({ action, payload }) => {
+        if (action === Action.OnResize) {
+            /**
+             * Container width is maintained the same as it is defined in the parent
+             * page to preserve its behaviour. Only the height is updated
+             */
+            // container.style.width = `${payload.width}px`;
+            container.style.height = `${payload.height}px`;
+        }
+    });
+    unsubs.set(experience.id, unsub);
+}
+function handleExperienceUnmounted(experience) {
+    const unsub = unsubs.get(experience.id);
+    if (unsub) {
+        unsub();
+        unsubs.delete(experience.id);
+    }
+}
+onExperienceEmbedded(handleExperienceEmbedded);
+onExperienceUnmounted(handleExperienceUnmounted);
+
+/**
+ * @license
+ * @monterosa/sdk-launcher-kit
+ *
+ * Copyright © 2022 Monterosa Productions Limited. All rights reserved.
+ *
+ * More details on the license can be found at https://www.monterosa.co/sdk/license
+ */
+function getUrlParam(param) {
+    let queryString = {};
+    if (typeof window !== 'undefined') {
+        queryString = window.location.search;
+    }
+    const urlParams = new URLSearchParams(queryString);
+    return urlParams.get(param);
+}
+/**
+ * The SDK on the parent application will by default request a child
+ * Experience to hide its header and footer by setting a query parameter called
+ * `micHideHeaderAndFooter` to `1`.
+ *
+ * This function will return true if that is the case, and false otherwise.
+ *
+ * When true, the developer of a child Experience is expected to hide it's headers
+ * and footers as the parent application is actively providing them.
+ *
+ * You can test whether you are respecting this correctly by adding the following query
+ * to your URL:
+ *
+ * "?micHideHeaderAndFooter=1"
+ *
+ * @returns Whether the header and footer views should be hidden.
+ */
+function shouldHideHeaderAndFooter() {
+    return getUrlParam(QueryParam.HideHeaderAndFooter) === '1';
+}
+/**
+ * This function will returns true if experience is embedded in autoresize height mode.
+ */
+function isAutoresizesHeight() {
+    return getUrlParam(QueryParam.AutoresizesHeight) === '1';
+}
+/**
+ * This function is used to notify the parent application that the Experience
+ * is ready to be used. It's intended to be called by the Experience itself and
+ * not by the parent application.
+ *
+ * @example
+ * ```javascript
+ * import { sendReady } from '@monterosa/sdk-launcher-kit';
+ *
+ * sendReady();
+ * ```
+ *
+ * @returns void
+ */
+function sendReady() {
+    const parentApp = getParentApplication();
+    if (parentApp === null) {
+        console.log('Unable to send ready message, as there is no parent application');
+        return;
+    }
+    sendSdkRequest(parentApp, Action.OnReady);
+}
+/**
+ * Sends a message to the SDK of the parent application informing it that
+ * the UI of this Experience has completed loading.
+ *
+ * You should call this method when your UI has completed loading and you are ready to
+ * display data to the user. This can be when your network calls have successfully requested
+ * data and you have updated the DOM for it, or when an error has occurred and you want
+ * to take over the UI to provide details to the user.
+ *
+ * The SDK will use this message to dismiss the loading indicator, allowing a seamless
+ * transition between a native loading UI, into a fully loaded, child Experience.
+ *
+ * If this call is not made, the parent SDK will add a grace period to ensure the web app
+ * has sufficient time to load, and eventually dismiss the loading state, whether Experience
+ * is ready or not, so as to avoid scenarios were a defect leaves an infinite loading state
+ * presented to the user.
+ */
+function sendFinishedLoadingUI() {
+    const parentApp = getParentApplication();
+    if (parentApp === null) {
+        console.log('Unable to send finished loading UI message, as there is no parent application');
+        return;
+    }
+    sendSdkMessage(parentApp, Action.OnUILoaded);
+}
+/**
+ * Adds an observer for when more data is requested by the parent application
+ *
+ * @param callback - The callback that is triggered when a request for more data
+ * is received
+ * @returns The unsubscribe function. When it's called,
+ * the observer will be removed and requests for data will no longer be received
+ */
+function onMoreDataRequested(callback) {
+    const parentApp = getParentApplication();
+    if (parentApp === null) {
+        console.log('Unable to subscribe to more data event, as there is no parent application');
+        return () => { };
+    }
+    return onSdkMessage(parentApp, ({ action }) => {
+        if (action === Action.OnMoreDataRequested) {
+            callback();
+        }
+    });
+}
+/**
+ * Adds an observer for when experience is fully embedded and ready to accept
+ * incoming messages
+ *
+ * @param experience - Experience instance
+ * @param callback - The callback that is triggered when experience is embedded
+ * @returns The unsubscribe function. When it's called, the observer will be
+ * removed and ready event will not be received
+ */
+function onReady(experience, callback) {
+    return onSdkMessage(experience, ({ action }) => {
+        if (action === Action.OnReady) {
+            callback();
+        }
+    });
+}
+/**
+ * @internal
+ */
+const sendExperienceSizeThrottled = throttle((width, height) => {
+    const parentApp = getParentApplication();
+    if (parentApp !== null) {
+        sendSdkMessage(parentApp, Action.OnResize, { width, height });
+    }
+}, RESIZE_THROTTLE_TIMEOUT, {
+    leading: true,
+    trailing: true,
+});
+/**
+ * Sends the experience size to the parent application.
+ *
+ * @param width - The width of the experience.
+ * @param height - The height of the experience.
+ */
+function sendExperienceSize(width, height) {
+    sendExperienceSizeThrottled(width, height);
+}
+/**
+ * Sets up an observer to watch for the element dimensions change and
+ * automatically reports their changes to the parent application.
+ *
+ * @param element - HTML element whose dimensions need to be watched
+ * @returns The unsubscribe function. When it's called,
+ * the observer will be removed and element dimensions are no longer tracked
+ */
+function reportExperienceSizeChanges(element) {
+    const observer = new ResizeObserver(() => {
+        const width = Math.max(element.offsetWidth, element.scrollWidth);
+        const height = Math.max(element.offsetHeight, element.scrollHeight);
+        sendExperienceSize(width, height);
+    });
+    observer.observe(element);
+    return () => observer.unobserve(element);
+}
 
-export { Action, VERSION$1 as BRIDGE_VERSION, BridgeError, BridgeImpl, QueryParam, Source, StorageAction, VERSION, embed, enableLogging, getBridge, getExperience, getParentApplication, getParentBridge, isAutoresizesHeight, listenStorageMessages, onMessage, onMoreDataRequested, onReady, onSdkMessage, registerEmbedHook, reportExperienceSizeChanges, requestMoreData, respondToMessage, respondToSdkMessage, sendExperienceSize, sendExperienceSizeThrottled, sendFinishedLoadingUI, sendMessage, sendReady, sendRequest, sendSdkMessage, sendSdkRequest, setRequestTimeout, setStoragePersistent, shouldHideHeaderAndFooter, storage, storageClear, storageRead, storageRemove, storageWrite, unmount };
-//# sourceMappingURL=index.esm2017.js.map
+export { Action, VERSION$1 as BRIDGE_VERSION, BridgeError, BridgeImpl, QueryParam, Source, StorageAction, VERSION, embed, emitter, enableLogging, getBridge, getExperience, getParentApplication, getParentBridge, handleExperienceEmbedded$1 as handleExperienceEmbedded, handleExperienceUnmounted$1 as handleExperienceUnmounted, isAutoresizesHeight, onExperienceEmbedded, onExperienceUnmounted, onMessage, onMoreDataRequested, onReady, onSdkMessage, reportExperienceSizeChanges, requestMoreData, respondToMessage, respondToSdkMessage, sendExperienceSize, sendExperienceSizeThrottled, sendFinishedLoadingUI, sendMessage, sendReady, sendRequest, sendSdkMessage, sendSdkRequest, setRequestTimeout, setStoragePersistent, shouldHideHeaderAndFooter, storage, storageClear, storageRead, storageRemove, storageWrite, unmount };
+//# sourceMappingURL=index.esm.js.map