@liquidcommercedev/rmn-sdk 1.4.4 → 1.4.5

package/dist/index.cjs

@@ -15152,43 +15152,45 @@ class AuthService extends BaseApi {
 }
 
 const SPOT_ELEMENT_TAG = 'spot-element';
+const SPOT_ELEMENT_SLOT_NAME = `${SPOT_ELEMENT_TAG}-custom-content`;
 const SPOTS_SELECTION_API_PATH = '/spots/selection';
 const SPOT_EVENT_API_PATH = '/spots/event';
 
-const SPOT_ELEMENT_SHADOW_ROOT = (width, height, hasCustomHtmlElement) => {
+const SPOT_ELEMENT_SHADOW_ROOT = (width, height, hasCustomContent) => {
     const style = document.createElement('style');
+    style.textContent = `
+    :host {
+      display: block;
+      position: relative;
+      container-type: inline-size;
+      overflow: hidden;
+    }
+    :host([fluid="true"]) {
+      width: 100%;
+      height: 100%;
+    }
+    :host([fluid="false"]) {
+      width: ${width}px;
+      height: ${height}px;
+    }
+  `;
     const wrapper = document.createElement('div');
     wrapper.className = 'wrapper';
-    style.textContent = `
-        :host {
-            display: block;
-            position: relative;
-            container-type: inline-size;
-            overflow: hidden;
-        }
-        :host([fluid="true"]) {
-            width: 100%;
-            height: 100%;
-        }
-        :host([fluid="false"]) {
-            width: ${width}px;
-            height: ${height}px;
-        }
+    const slot = document.createElement('slot');
+    slot.name = SPOT_ELEMENT_SLOT_NAME;
+    if (!hasCustomContent) {
+        style.textContent += `
+      :host .wrapper {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
     `;
-    if (hasCustomHtmlElement) {
-        return { style, wrapper };
     }
-    style.textContent += `
-        .wrapper {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            overflow: hidden;
-        }
-    `;
-    return { style, wrapper };
+    return { style, wrapper, slot };
 };
 
 const GFONT_PRECONNECT = () => `
@@ -16053,7 +16055,7 @@ function rbCollectionBannerWithoutTextBlockTemplate(spot) {
   `;
 }
 
-const STYLES$6 = ({ textColor = '#fff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, }) => `
+const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, }) => `
     <style>
         :host {
             min-width: 320px;
@@ -16496,7 +16498,7 @@ function rbHomepageHeroTwoTileTemplate(spot) {
   `;
 }
 
-const STYLES$3 = ({ textColor = '#fff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, }) => `
+const STYLES$3 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, }) => `
   <style>
     :host {
       min-width: 320px;
@@ -16617,7 +16619,7 @@ function rbLargeCategoryImageToutTemplate(spot) {
   `;
 }
 
-const STYLES$2 = ({ textColor = '#fff', primaryImage, mobilePrimaryImage = primaryImage, }) => `
+const STYLES$2 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = primaryImage, }) => `
   <style>
     :host {
       min-width: 320px;
@@ -16686,7 +16688,7 @@ function rbNavigationBannerTemplate(spot) {
   `;
 }
 
-const STYLES$1 = ({ textColor = '#fff', primaryImage, mobilePrimaryImage = primaryImage, }) => `
+const STYLES$1 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = primaryImage, }) => `
   <style>
     :host {
       min-width: 165px;
@@ -16739,7 +16741,7 @@ function rbSmallCategoryImageToutTemplate(spot) {
   `;
 }
 
-const STYLES = ({ textColor = '#000', backgroundColor = 'transparent', primaryImage, mobilePrimaryImage = primaryImage, }) => `
+const STYLES = ({ textColor = '#000000', backgroundColor = 'transparent', primaryImage, mobilePrimaryImage = primaryImage, }) => `
   <style>
     :host {
       min-width: 165px;
@@ -16889,16 +16891,20 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
     class CustomSpotElement extends HTMLElement {
         constructor() {
             super();
+            this.hasCustomContent = false;
+            this.handleClick = this.handleClick.bind(this);
             this.attachShadow({ mode: 'open' });
         }
         connectedCallback() {
-            this.addEventListener('click', () => this.registerEvent(exports.RMN_SPOT_EVENT.CLICK));
+            this.hasCustomContent = Boolean(this.customContent);
+            this.addEventListener('click', this.handleClick);
             this.setupIntersectionObserver();
             this.render();
         }
         disconnectedCallback() {
             var _a;
             (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+            this.removeEventListener('click', this.handleClick);
         }
         attributeChangedCallback(_name, oldValue, newValue) {
             if (oldValue !== newValue) {
@@ -16908,14 +16914,26 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
         render() {
             if (!this.shadowRoot || !this.data)
                 return;
-            const { style, wrapper } = SPOT_ELEMENT_SHADOW_ROOT(this.data.width, this.data.height, Boolean(this.customHtmlElement));
-            if (this.customHtmlElement) {
-                wrapper.innerHTML = this.customHtmlElement.outerHTML;
+            const { style, wrapper, slot } = SPOT_ELEMENT_SHADOW_ROOT(this.data.width, this.data.height, this.hasCustomContent);
+            this.shadowRoot.replaceChildren(style, slot);
+            if (this.hasCustomContent) {
+                this.setCustomContent();
             }
-            else {
+            if (!this.hasCustomContent) {
                 wrapper.innerHTML = GET_SPOT_TEMPLATE_HTML_STRING(this.data);
+                this.shadowRoot.appendChild(wrapper);
             }
-            this.shadowRoot.replaceChildren(style, wrapper);
+        }
+        setCustomContent() {
+            const wrapper = document.createElement('div');
+            wrapper.setAttribute('slot', SPOT_ELEMENT_SLOT_NAME);
+            if (typeof this.customContent === 'string') {
+                wrapper.innerHTML = this.customContent;
+            }
+            if (this.customContent instanceof HTMLElement) {
+                wrapper.appendChild(this.customContent);
+            }
+            this.appendChild(wrapper);
         }
         setupIntersectionObserver() {
             const options = {
@@ -16932,21 +16950,21 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
             }, options);
             this.observer.observe(this);
         }
+        handleClick() {
+            this.registerEvent(exports.RMN_SPOT_EVENT.CLICK);
+        }
         async registerEvent(event) {
             var _a, _b;
             if (!this.data)
                 return;
             const shouldRedirectOnClick = this.getAttribute(ENUM_SPOT_ELEMENT_ATTRIBUTE.REDIRECT_ON_CLICK) === 'true';
-            const url = (_b = (_a = this.data.events.find((e) => e.event === event)) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '';
+            const eventUrl = (_b = (_a = this.data.events.find((e) => e.event === event)) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '';
             try {
                 const options = {
                     method: 'POST',
-                    redirect: 'manual',
+                    redirect: event === exports.RMN_SPOT_EVENT.CLICK && shouldRedirectOnClick ? 'follow' : 'manual',
                 };
-                if (event === exports.RMN_SPOT_EVENT.CLICK && shouldRedirectOnClick) {
-                    options.redirect = 'follow';
-                }
-                const normalizedUrl = this.normalizeUrl(url);
+                const normalizedUrl = this.normalizeUrl(eventUrl);
                 const response = await fetch(normalizedUrl, options);
                 if (response.ok && event === exports.RMN_SPOT_EVENT.CLICK && shouldRedirectOnClick) {
                     window.location.href = this.getRedirectUrlFromPayload(normalizedUrl);
@@ -16963,16 +16981,13 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
             return url.replace(/https?:\/\/[^/]+\/[^?]+/, `${rmnUrl}`);
         }
         getRedirectUrlFromPayload(url) {
-            var _a;
+            var _a, _b;
             const base64String = (_a = new URL(url).searchParams.get('e')) !== null && _a !== void 0 ? _a : '';
             try {
-                const obj = JSON.parse(atob(base64String));
-                if (obj.ur) {
-                    return obj.ur;
-                }
-                return '';
+                const data = JSON.parse(atob(base64String));
+                return (_b = data.ur) !== null && _b !== void 0 ? _b : '';
             }
-            catch (_b) {
+            catch (_c) {
                 return '';
             }
         }
@@ -16993,7 +17008,7 @@ class SpotHtmlService {
      * @param {ISpot} spot - The spot data.
      * @param {ICreateSpotElementConfig} config - The configuration object.
      * @param {ICreateSpotElementConfig.fluid} config.fluid - If the spot should be fluid or not.
-     * @param {ICreateSpotElementConfig.customHtmlElement} config.customHtmlElement - Use a custom html element.
+     * @param {ICreateSpotElementConfig.customContent} config.customContent - Use a custom html element/string.
      * @param {ICreateSpotElementConfig.redirectOnClick} config.redirectOnClick - If the spot should redirect on click.
      *
      * @return {HTMLElement | null} - The spot html element or null if the browser environment is not available.
@@ -17012,8 +17027,9 @@ class SpotHtmlService {
         element.setAttribute(ENUM_SPOT_ELEMENT_ATTRIBUTE.REDIRECT_ON_CLICK, shouldRedirectOnClick.toString());
         // Share the spot data with the element
         element.data = spot;
-        if (config === null || config === void 0 ? void 0 : config.customHtmlElement) {
-            element.customHtmlElement = config.customHtmlElement;
+        // Set custom content
+        if (config === null || config === void 0 ? void 0 : config.customContent) {
+            element.customContent = config.customContent;
         }
         return element;
     }
@@ -17097,7 +17113,7 @@ class LiquidCommerceRmnClient {
      * @param {ISpot} spot - The spot data.
      * @param {ICreateSpotElementConfig} config - The configuration object.
      * @param {ICreateSpotElementConfig.fluid} config.fluid - If the spot should be fluid or not.
-     * @param {ICreateSpotElementConfig.customHtmlElement} config.customHtmlElement - Use a custom html element.
+     * @param {ICreateSpotElementConfig.customContent} config.customContent - Use a custom html element/string.
      * @param {ICreateSpotElementConfig.redirectOnClick} config.redirectOnClick - If the spot should redirect on click.
      *
      * @return {HTMLElement | null} - The spot html element or null if the browser environment is not available.
@@ -17129,7 +17145,7 @@ async function RmnClient(apiKey, config) {
  * @param {ISpot} spot - The spot data.
  * @param {ICreateSpotElementConfig} config - The configuration object.
  * @param {ICreateSpotElementConfig.fluid} config.fluid - If the spot should be fluid or not.
- * @param {ICreateSpotElementConfig.customHtmlElement} config.customHtmlElement - Use a custom html element.
+ * @param {ICreateSpotElementConfig.customContent} config.customContent - Use a custom html element/string.
  * @param {ICreateSpotElementConfig.redirectOnClick} config.redirectOnClick - If the spot should redirect on click.
  *
  * @return {HTMLElement | null} - The spot html element or null if the browser environment is not available.

package/dist/index.esm.js

@@ -15150,43 +15150,45 @@ class AuthService extends BaseApi {
 }
 
 const SPOT_ELEMENT_TAG = 'spot-element';
+const SPOT_ELEMENT_SLOT_NAME = `${SPOT_ELEMENT_TAG}-custom-content`;
 const SPOTS_SELECTION_API_PATH = '/spots/selection';
 const SPOT_EVENT_API_PATH = '/spots/event';
 
-const SPOT_ELEMENT_SHADOW_ROOT = (width, height, hasCustomHtmlElement) => {
+const SPOT_ELEMENT_SHADOW_ROOT = (width, height, hasCustomContent) => {
     const style = document.createElement('style');
+    style.textContent = `
+    :host {
+      display: block;
+      position: relative;
+      container-type: inline-size;
+      overflow: hidden;
+    }
+    :host([fluid="true"]) {
+      width: 100%;
+      height: 100%;
+    }
+    :host([fluid="false"]) {
+      width: ${width}px;
+      height: ${height}px;
+    }
+  `;
     const wrapper = document.createElement('div');
     wrapper.className = 'wrapper';
-    style.textContent = `
-        :host {
-            display: block;
-            position: relative;
-            container-type: inline-size;
-            overflow: hidden;
-        }
-        :host([fluid="true"]) {
-            width: 100%;
-            height: 100%;
-        }
-        :host([fluid="false"]) {
-            width: ${width}px;
-            height: ${height}px;
-        }
+    const slot = document.createElement('slot');
+    slot.name = SPOT_ELEMENT_SLOT_NAME;
+    if (!hasCustomContent) {
+        style.textContent += `
+      :host .wrapper {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
     `;
-    if (hasCustomHtmlElement) {
-        return { style, wrapper };
     }
-    style.textContent += `
-        .wrapper {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            overflow: hidden;
-        }
-    `;
-    return { style, wrapper };
+    return { style, wrapper, slot };
 };
 
 const GFONT_PRECONNECT = () => `
@@ -16051,7 +16053,7 @@ function rbCollectionBannerWithoutTextBlockTemplate(spot) {
   `;
 }
 
-const STYLES$6 = ({ textColor = '#fff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, }) => `
+const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, }) => `
     <style>
         :host {
             min-width: 320px;
@@ -16494,7 +16496,7 @@ function rbHomepageHeroTwoTileTemplate(spot) {
   `;
 }
 
-const STYLES$3 = ({ textColor = '#fff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, }) => `
+const STYLES$3 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, }) => `
   <style>
     :host {
       min-width: 320px;
@@ -16615,7 +16617,7 @@ function rbLargeCategoryImageToutTemplate(spot) {
   `;
 }
 
-const STYLES$2 = ({ textColor = '#fff', primaryImage, mobilePrimaryImage = primaryImage, }) => `
+const STYLES$2 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = primaryImage, }) => `
   <style>
     :host {
       min-width: 320px;
@@ -16684,7 +16686,7 @@ function rbNavigationBannerTemplate(spot) {
   `;
 }
 
-const STYLES$1 = ({ textColor = '#fff', primaryImage, mobilePrimaryImage = primaryImage, }) => `
+const STYLES$1 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = primaryImage, }) => `
   <style>
     :host {
       min-width: 165px;
@@ -16737,7 +16739,7 @@ function rbSmallCategoryImageToutTemplate(spot) {
   `;
 }
 
-const STYLES = ({ textColor = '#000', backgroundColor = 'transparent', primaryImage, mobilePrimaryImage = primaryImage, }) => `
+const STYLES = ({ textColor = '#000000', backgroundColor = 'transparent', primaryImage, mobilePrimaryImage = primaryImage, }) => `
   <style>
     :host {
       min-width: 165px;
@@ -16887,16 +16889,20 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
     class CustomSpotElement extends HTMLElement {
         constructor() {
             super();
+            this.hasCustomContent = false;
+            this.handleClick = this.handleClick.bind(this);
             this.attachShadow({ mode: 'open' });
         }
         connectedCallback() {
-            this.addEventListener('click', () => this.registerEvent(RMN_SPOT_EVENT.CLICK));
+            this.hasCustomContent = Boolean(this.customContent);
+            this.addEventListener('click', this.handleClick);
             this.setupIntersectionObserver();
             this.render();
         }
         disconnectedCallback() {
             var _a;
             (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+            this.removeEventListener('click', this.handleClick);
         }
         attributeChangedCallback(_name, oldValue, newValue) {
             if (oldValue !== newValue) {
@@ -16906,14 +16912,26 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
         render() {
             if (!this.shadowRoot || !this.data)
                 return;
-            const { style, wrapper } = SPOT_ELEMENT_SHADOW_ROOT(this.data.width, this.data.height, Boolean(this.customHtmlElement));
-            if (this.customHtmlElement) {
-                wrapper.innerHTML = this.customHtmlElement.outerHTML;
+            const { style, wrapper, slot } = SPOT_ELEMENT_SHADOW_ROOT(this.data.width, this.data.height, this.hasCustomContent);
+            this.shadowRoot.replaceChildren(style, slot);
+            if (this.hasCustomContent) {
+                this.setCustomContent();
             }
-            else {
+            if (!this.hasCustomContent) {
                 wrapper.innerHTML = GET_SPOT_TEMPLATE_HTML_STRING(this.data);
+                this.shadowRoot.appendChild(wrapper);
             }
-            this.shadowRoot.replaceChildren(style, wrapper);
+        }
+        setCustomContent() {
+            const wrapper = document.createElement('div');
+            wrapper.setAttribute('slot', SPOT_ELEMENT_SLOT_NAME);
+            if (typeof this.customContent === 'string') {
+                wrapper.innerHTML = this.customContent;
+            }
+            if (this.customContent instanceof HTMLElement) {
+                wrapper.appendChild(this.customContent);
+            }
+            this.appendChild(wrapper);
         }
         setupIntersectionObserver() {
             const options = {
@@ -16930,21 +16948,21 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
             }, options);
             this.observer.observe(this);
         }
+        handleClick() {
+            this.registerEvent(RMN_SPOT_EVENT.CLICK);
+        }
         async registerEvent(event) {
             var _a, _b;
             if (!this.data)
                 return;
             const shouldRedirectOnClick = this.getAttribute(ENUM_SPOT_ELEMENT_ATTRIBUTE.REDIRECT_ON_CLICK) === 'true';
-            const url = (_b = (_a = this.data.events.find((e) => e.event === event)) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '';
+            const eventUrl = (_b = (_a = this.data.events.find((e) => e.event === event)) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '';
             try {
                 const options = {
                     method: 'POST',
-                    redirect: 'manual',
+                    redirect: event === RMN_SPOT_EVENT.CLICK && shouldRedirectOnClick ? 'follow' : 'manual',
                 };
-                if (event === RMN_SPOT_EVENT.CLICK && shouldRedirectOnClick) {
-                    options.redirect = 'follow';
-                }
-                const normalizedUrl = this.normalizeUrl(url);
+                const normalizedUrl = this.normalizeUrl(eventUrl);
                 const response = await fetch(normalizedUrl, options);
                 if (response.ok && event === RMN_SPOT_EVENT.CLICK && shouldRedirectOnClick) {
                     window.location.href = this.getRedirectUrlFromPayload(normalizedUrl);
@@ -16961,16 +16979,13 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
             return url.replace(/https?:\/\/[^/]+\/[^?]+/, `${rmnUrl}`);
         }
         getRedirectUrlFromPayload(url) {
-            var _a;
+            var _a, _b;
             const base64String = (_a = new URL(url).searchParams.get('e')) !== null && _a !== void 0 ? _a : '';
             try {
-                const obj = JSON.parse(atob(base64String));
-                if (obj.ur) {
-                    return obj.ur;
-                }
-                return '';
+                const data = JSON.parse(atob(base64String));
+                return (_b = data.ur) !== null && _b !== void 0 ? _b : '';
             }
-            catch (_b) {
+            catch (_c) {
                 return '';
             }
         }
@@ -16991,7 +17006,7 @@ class SpotHtmlService {
      * @param {ISpot} spot - The spot data.
      * @param {ICreateSpotElementConfig} config - The configuration object.
      * @param {ICreateSpotElementConfig.fluid} config.fluid - If the spot should be fluid or not.
-     * @param {ICreateSpotElementConfig.customHtmlElement} config.customHtmlElement - Use a custom html element.
+     * @param {ICreateSpotElementConfig.customContent} config.customContent - Use a custom html element/string.
      * @param {ICreateSpotElementConfig.redirectOnClick} config.redirectOnClick - If the spot should redirect on click.
      *
      * @return {HTMLElement | null} - The spot html element or null if the browser environment is not available.
@@ -17010,8 +17025,9 @@ class SpotHtmlService {
         element.setAttribute(ENUM_SPOT_ELEMENT_ATTRIBUTE.REDIRECT_ON_CLICK, shouldRedirectOnClick.toString());
         // Share the spot data with the element
         element.data = spot;
-        if (config === null || config === void 0 ? void 0 : config.customHtmlElement) {
-            element.customHtmlElement = config.customHtmlElement;
+        // Set custom content
+        if (config === null || config === void 0 ? void 0 : config.customContent) {
+            element.customContent = config.customContent;
         }
         return element;
     }
@@ -17095,7 +17111,7 @@ class LiquidCommerceRmnClient {
      * @param {ISpot} spot - The spot data.
      * @param {ICreateSpotElementConfig} config - The configuration object.
      * @param {ICreateSpotElementConfig.fluid} config.fluid - If the spot should be fluid or not.
-     * @param {ICreateSpotElementConfig.customHtmlElement} config.customHtmlElement - Use a custom html element.
+     * @param {ICreateSpotElementConfig.customContent} config.customContent - Use a custom html element/string.
      * @param {ICreateSpotElementConfig.redirectOnClick} config.redirectOnClick - If the spot should redirect on click.
      *
      * @return {HTMLElement | null} - The spot html element or null if the browser environment is not available.
@@ -17127,7 +17143,7 @@ async function RmnClient(apiKey, config) {
  * @param {ISpot} spot - The spot data.
  * @param {ICreateSpotElementConfig} config - The configuration object.
  * @param {ICreateSpotElementConfig.fluid} config.fluid - If the spot should be fluid or not.
- * @param {ICreateSpotElementConfig.customHtmlElement} config.customHtmlElement - Use a custom html element.
+ * @param {ICreateSpotElementConfig.customContent} config.customContent - Use a custom html element/string.
  * @param {ICreateSpotElementConfig.redirectOnClick} config.redirectOnClick - If the spot should redirect on click.
  *
  * @return {HTMLElement | null} - The spot html element or null if the browser environment is not available.

package/dist/types/modules/spot/html/spot.element.service.d.ts

@@ -1,7 +1,7 @@
 import type { ISpot } from 'types';
 export interface ICustomSpotElement extends HTMLElement {
     data?: ISpot;
-    customHtmlElement?: HTMLElement;
+    customContent?: HTMLElement | string;
 }
 declare let SpotElement: new () => HTMLElement;
 export { SpotElement };

package/dist/types/modules/spot/html/spot.element.shadow-root.d.ts

@@ -1,4 +1,5 @@
-export declare const SPOT_ELEMENT_SHADOW_ROOT: (width: number, height: number, hasCustomHtmlElement: boolean) => {
+export declare const SPOT_ELEMENT_SHADOW_ROOT: (width: number, height: number, hasCustomContent: boolean) => {
     style: HTMLStyleElement;
     wrapper: HTMLDivElement;
+    slot: HTMLSlotElement;
 };

package/dist/types/modules/spot/spot.constant.d.ts

@@ -1,3 +1,4 @@
 export declare const SPOT_ELEMENT_TAG = "spot-element";
+export declare const SPOT_ELEMENT_SLOT_NAME = "spot-element-custom-content";
 export declare const SPOTS_SELECTION_API_PATH = "/spots/selection";
 export declare const SPOT_EVENT_API_PATH = "/spots/event";

package/dist/types/modules/spot/spot.html.service.d.ts

@@ -9,7 +9,7 @@ export declare class SpotHtmlService implements ISpotHtmlService {
      * @param {ISpot} spot - The spot data.
      * @param {ICreateSpotElementConfig} config - The configuration object.
      * @param {ICreateSpotElementConfig.fluid} config.fluid - If the spot should be fluid or not.
-     * @param {ICreateSpotElementConfig.customHtmlElement} config.customHtmlElement - Use a custom html element.
+     * @param {ICreateSpotElementConfig.customContent} config.customContent - Use a custom html element/string.
      * @param {ICreateSpotElementConfig.redirectOnClick} config.redirectOnClick - If the spot should redirect on click.
      *
      * @return {HTMLElement | null} - The spot html element or null if the browser environment is not available.

package/dist/types/modules/spot/spot.interface.d.ts

@@ -33,7 +33,7 @@ export interface ISpot {
 }
 export interface ICreateSpotElementConfig {
     fluid?: boolean;
-    customHtmlElement?: HTMLElement;
+    customContent?: HTMLElement | string;
     redirectOnClick?: boolean;
 }
 export type ISpots = Record<SpotIdentifierType, ISpot[]>;

package/dist/types/rmn-client.d.ts

@@ -23,7 +23,7 @@ export declare class LiquidCommerceRmnClient implements IRmnClient {
      * @param {ISpot} spot - The spot data.
      * @param {ICreateSpotElementConfig} config - The configuration object.
      * @param {ICreateSpotElementConfig.fluid} config.fluid - If the spot should be fluid or not.
-     * @param {ICreateSpotElementConfig.customHtmlElement} config.customHtmlElement - Use a custom html element.
+     * @param {ICreateSpotElementConfig.customContent} config.customContent - Use a custom html element/string.
      * @param {ICreateSpotElementConfig.redirectOnClick} config.redirectOnClick - If the spot should redirect on click.
      *
      * @return {HTMLElement | null} - The spot html element or null if the browser environment is not available.
@@ -49,7 +49,7 @@ declare function RmnClient(apiKey: string, config: IRmnConfig): Promise<IRmnClie
  * @param {ISpot} spot - The spot data.
  * @param {ICreateSpotElementConfig} config - The configuration object.
  * @param {ICreateSpotElementConfig.fluid} config.fluid - If the spot should be fluid or not.
- * @param {ICreateSpotElementConfig.customHtmlElement} config.customHtmlElement - Use a custom html element.
+ * @param {ICreateSpotElementConfig.customContent} config.customContent - Use a custom html element/string.
  * @param {ICreateSpotElementConfig.redirectOnClick} config.redirectOnClick - If the spot should redirect on click.
  *
  * @return {HTMLElement | null} - The spot html element or null if the browser environment is not available.

package/package.json

@@ -2,7 +2,7 @@
   "name": "@liquidcommercedev/rmn-sdk",
   "description": "LiquidCommerce RMN SDK",
   "author": "LiquidCommerce Tech",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "homepage": "https://docs.liquidcommerce.co/rmn-sdk",
   "main": "./dist/index.cjs",
   "module": "./dist/index.esm.js",