@liquidcommercedev/rmn-sdk 1.4.4 → 1.4.5-beta.2

package/dist/index.esm.js

@@ -15150,60 +15150,56 @@ 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 GFONT_PRECONNECT = `
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+`;
+const GFONT_SOURCE_SANS_3 = `
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap">
+`;
+const GFONT_CORMORANT = `
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap">
+`;
+const SPOT_ELEMENT_TEMPLATE = (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 = () => `
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-`;
-const GFONT_SOURCE_SANS_3 = () => `
-    <link rel="stylesheet"
-        href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" 
-    >
-`;
-const GFONT_CORMORANT = () => `
-    <link rel="stylesheet"
-        href="https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap"
-    >
-`;
-
 const STYLES$i = ({ primaryImage, secondaryImage }) => `
     <style>
         .content {
@@ -15299,9 +15295,9 @@ const STYLES$i = ({ primaryImage, secondaryImage }) => `
 `;
 function billboardV1Template(spot) {
     return `
-        ${GFONT_PRECONNECT()}
-        ${GFONT_SOURCE_SANS_3()}
-        ${GFONT_CORMORANT()}
+        ${GFONT_PRECONNECT}
+        ${GFONT_SOURCE_SANS_3}
+        ${GFONT_CORMORANT}
         ${STYLES$i(spot)}
         <div class="content">
             <div class="big-image"></div>
@@ -15388,9 +15384,9 @@ const STYLES$h = ({ primaryImage }) => `
 `;
 function billboardV2Template(spot) {
     return `
-        ${GFONT_PRECONNECT()}
-        ${GFONT_SOURCE_SANS_3()}
-        ${GFONT_CORMORANT()}
+        ${GFONT_PRECONNECT}
+        ${GFONT_SOURCE_SANS_3}
+        ${GFONT_CORMORANT}
         ${STYLES$h(spot)}
         <div class="content">
             <div class="text-container">
@@ -15489,9 +15485,9 @@ const STYLES$g = ({ primaryImage }) => `
 `;
 function billboardV3Template(spot) {
     return `
-        ${GFONT_PRECONNECT()}
-        ${GFONT_SOURCE_SANS_3()}
-        ${GFONT_CORMORANT()}
+        ${GFONT_PRECONNECT}
+        ${GFONT_SOURCE_SANS_3}
+        ${GFONT_CORMORANT}
         ${STYLES$g(spot)}
         <div class="content">
             <div class="text">
@@ -15533,9 +15529,9 @@ const STYLES$f = () => `
 `;
 function inTextV1Template(spot) {
     return `
-        ${GFONT_PRECONNECT()}
-        ${GFONT_SOURCE_SANS_3()}
-        ${GFONT_CORMORANT()}
+        ${GFONT_PRECONNECT}
+        ${GFONT_SOURCE_SANS_3}
+        ${GFONT_CORMORANT}
         ${STYLES$f()}
         <div class="content">
             <span class="header">${spot.header}</span>
@@ -15623,9 +15619,9 @@ const STYLES$e = ({ primaryImage }) => `
 `;
 function largeLeaderboardV1Template(spot) {
     return `
-        ${GFONT_PRECONNECT()}
-        ${GFONT_SOURCE_SANS_3()}
-        ${GFONT_CORMORANT()}
+        ${GFONT_PRECONNECT}
+        ${GFONT_SOURCE_SANS_3}
+        ${GFONT_CORMORANT}
         ${STYLES$e(spot)}
         <div class="content">
             <div class="text">
@@ -15710,9 +15706,9 @@ const STYLES$d = ({ primaryImage }) => `
 `;
 function largeLeaderboardV2Template(spot) {
     return `
-        ${GFONT_PRECONNECT()}
-        ${GFONT_SOURCE_SANS_3()}
-        ${GFONT_CORMORANT()}
+        ${GFONT_PRECONNECT}
+        ${GFONT_SOURCE_SANS_3}
+        ${GFONT_CORMORANT}
         ${STYLES$d(spot)}
         <div class="content">
             <div class="text">
@@ -15769,9 +15765,9 @@ const STYLES$c = ({ primaryImage }) => `
 `;
 function largeRectangleV1Template(spot) {
     return `
-        ${GFONT_PRECONNECT()}
-        ${GFONT_SOURCE_SANS_3()}
-        ${GFONT_CORMORANT()}
+        ${GFONT_PRECONNECT}
+        ${GFONT_SOURCE_SANS_3}
+        ${GFONT_CORMORANT}
         ${STYLES$c(spot)}
          <div class="content">
             <div class="image"></div>
@@ -15867,9 +15863,9 @@ const STYLES$b = ({ primaryImage }) => `
 `;
 function squareV1Template(spot) {
     return `
-        ${GFONT_PRECONNECT()}
-        ${GFONT_SOURCE_SANS_3()}
-        ${GFONT_CORMORANT()}
+        ${GFONT_PRECONNECT}
+        ${GFONT_SOURCE_SANS_3}
+        ${GFONT_CORMORANT}
         ${STYLES$b(spot)}
         <div class="content">
             <div class="text">
@@ -15922,9 +15918,9 @@ const STYLES$a = ({ primaryImage }) => `
 `;
 function squareV2Template(spot) {
     return `
-        ${GFONT_PRECONNECT()}
-        ${GFONT_SOURCE_SANS_3()}
-        ${GFONT_CORMORANT()}
+        ${GFONT_PRECONNECT}
+        ${GFONT_SOURCE_SANS_3}
+        ${GFONT_CORMORANT}
         ${STYLES$a(spot)}
         <div class="content">
             <span class="header">${spot.header}</span>
@@ -15987,9 +15983,9 @@ const STYLES$9 = ({ primaryImage }) => `
 `;
 function verticalRectangleV1Template(spot) {
     return `
-        ${GFONT_PRECONNECT()}
-        ${GFONT_SOURCE_SANS_3()}
-        ${GFONT_CORMORANT()}
+        ${GFONT_PRECONNECT}
+        ${GFONT_SOURCE_SANS_3}
+        ${GFONT_CORMORANT}
         ${STYLES$9(spot)}
         <div class="content">
             <div class="text">
@@ -16051,7 +16047,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;
@@ -16169,9 +16165,9 @@ const STYLES$6 = ({ textColor = '#fff', ctaTextColor = textColor, ctaBorderColor
 `;
 function rbHomepageHeroFullImageTemplate(spot) {
     return `
-    ${GFONT_PRECONNECT()}
-    ${GFONT_SOURCE_SANS_3()}
-    ${GFONT_CORMORANT()}
+    ${GFONT_PRECONNECT}
+    ${GFONT_SOURCE_SANS_3}
+    ${GFONT_CORMORANT}
     ${STYLES$6(spot)}
     <div class="content">
         <div class="text">
@@ -16336,9 +16332,9 @@ const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
 `;
 function rbHomepageHeroThreeTileTemplate(spot) {
     return `
-    ${GFONT_PRECONNECT()}
-    ${GFONT_SOURCE_SANS_3()}
-    ${GFONT_CORMORANT()}
+    ${GFONT_PRECONNECT}
+    ${GFONT_SOURCE_SANS_3}
+    ${GFONT_CORMORANT}
     ${STYLES$5(spot)}
     <div class="content">
         <div class="primary-image"></div>
@@ -16479,9 +16475,9 @@ const STYLES$4 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
 `;
 function rbHomepageHeroTwoTileTemplate(spot) {
     return `
-    ${GFONT_PRECONNECT()}
-    ${GFONT_SOURCE_SANS_3()}
-    ${GFONT_CORMORANT()}
+    ${GFONT_PRECONNECT}
+    ${GFONT_SOURCE_SANS_3}
+    ${GFONT_CORMORANT}
     ${STYLES$4(spot)}
     <div class="content">
         <div class="text">
@@ -16494,7 +16490,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;
@@ -16601,9 +16597,9 @@ const STYLES$3 = ({ textColor = '#fff', ctaTextColor = textColor, ctaBorderColor
 `;
 function rbLargeCategoryImageToutTemplate(spot) {
     return `
-    ${GFONT_PRECONNECT()}
-    ${GFONT_SOURCE_SANS_3()}
-    ${GFONT_CORMORANT()}
+    ${GFONT_PRECONNECT}
+    ${GFONT_SOURCE_SANS_3}
+    ${GFONT_CORMORANT}
     ${STYLES$3(spot)}
     <div class="content">
       <div class="text">
@@ -16615,7 +16611,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;
@@ -16673,8 +16669,8 @@ const STYLES$2 = ({ textColor = '#fff', primaryImage, mobilePrimaryImage = prima
 `;
 function rbNavigationBannerTemplate(spot) {
     return `
-    ${GFONT_PRECONNECT()}
-    ${GFONT_SOURCE_SANS_3()}
+    ${GFONT_PRECONNECT}
+    ${GFONT_SOURCE_SANS_3}
     ${STYLES$2(spot)}
     <div class="content">
       <div class="text">
@@ -16684,7 +16680,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;
@@ -16716,6 +16712,7 @@ const STYLES$1 = ({ textColor = '#fff', primaryImage, mobilePrimaryImage = prima
       font-style: normal;
       font-weight: 400;
       line-height: normal;
+      margin: 0;
     }
     @media (min-width: 640px) {
       .content {
@@ -16726,8 +16723,8 @@ const STYLES$1 = ({ textColor = '#fff', primaryImage, mobilePrimaryImage = prima
 `;
 function rbSmallCategoryImageToutTemplate(spot) {
     return `
-    ${GFONT_PRECONNECT()}
-    ${GFONT_CORMORANT()}
+    ${GFONT_PRECONNECT}
+    ${GFONT_CORMORANT}
     ${STYLES$1(spot)}
     <div class="content">
       <div class="text">
@@ -16737,7 +16734,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;
@@ -16780,6 +16777,7 @@ const STYLES = ({ textColor = '#000', backgroundColor = 'transparent', primaryIm
       font-style: normal;
       font-weight: 400;
       line-height: normal;
+      margin: 0;
     }
     @media (min-width: 640px) {
       .image {
@@ -16790,8 +16788,8 @@ const STYLES = ({ textColor = '#000', backgroundColor = 'transparent', primaryIm
 `;
 function rbSmallDiscoverToutTemplate(spot) {
     return `
-    ${GFONT_PRECONNECT()}
-    ${GFONT_CORMORANT()}
+    ${GFONT_PRECONNECT}
+    ${GFONT_CORMORANT}
     ${STYLES(spot)}
     <div class="content">
       <div class="image"></div>
@@ -16887,16 +16885,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 +16908,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_TEMPLATE(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,47 +16944,37 @@ 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 response = await fetch(normalizedUrl, options);
+                const response = await fetch(eventUrl, options);
                 if (response.ok && event === RMN_SPOT_EVENT.CLICK && shouldRedirectOnClick) {
-                    window.location.href = this.getRedirectUrlFromPayload(normalizedUrl);
+                    window.location.href = this.getRedirectUrlFromPayload(eventUrl);
                 }
             }
             catch (error) {
                 console.error(`Rmn error sending ${event} event:`, error);
             }
         }
-        normalizeUrl(url) {
-            if (!this.data)
-                return url;
-            const rmnUrl = `${SDK_CONFIG.url[this.data.env]}/api${SPOT_EVENT_API_PATH}`;
-            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 +16995,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 +17014,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;
     }
@@ -17052,22 +17057,10 @@ class SpotSelectionService extends BaseApi {
         if (isOk && val && val.data && (val === null || val === void 0 ? void 0 : val.refresh.token)) {
             this.authInfo.authenticated = true;
             this.authInfo.token = val.refresh.token;
-            let spots = val.data.spots;
-            spots = this.addEnvToSpotData(spots, this.authInfo.env);
-            return spots;
+            return val.data.spots;
         }
         throw new Error('Spot selection response was not successful');
     }
-    addEnvToSpotData(spots, env) {
-        for (const key in spots) {
-            if (spots[key]) {
-                spots[key].forEach((spot) => {
-                    spot.env = env;
-                });
-            }
-        }
-        return spots;
-    }
 }
 
 class LiquidCommerceRmnClient {
@@ -17095,7 +17088,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 +17120,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/constants/html.constant.d.ts

@@ -0,0 +1,8 @@
+export declare const GFONT_PRECONNECT = "\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n";
+export declare const GFONT_SOURCE_SANS_3 = "\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap\">\n";
+export declare const GFONT_CORMORANT = "\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap\">\n";
+export declare const SPOT_ELEMENT_TEMPLATE: (width: number, height: number, hasCustomContent: boolean) => {
+    style: HTMLStyleElement;
+    wrapper: HTMLDivElement;
+    slot: HTMLSlotElement;
+};

package/dist/types/modules/spot/html/constants/index.d.ts

@@ -0,0 +1 @@
+export * from './html.constant';

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/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

@@ -1,4 +1,3 @@
-import type { RMN_ENV } from './../../enums';
 import type { RMN_SPOT_EVENT, RMN_SPOT_TYPE } from './spot.enum';
 import type { RmnFilterType, RmnSpotType, SpotIdentifierType, SpotVariantType } from './spot.type';
 export interface ISpotSelectionParams {
@@ -29,11 +28,10 @@ export interface ISpot {
     mobilePrimaryImage?: string;
     mobileSecondaryImage?: string;
     productUpcs?: string[];
-    env: RMN_ENV;
 }
 export interface ICreateSpotElementConfig {
     fluid?: boolean;
-    customHtmlElement?: HTMLElement;
+    customContent?: HTMLElement | string;
     redirectOnClick?: boolean;
 }
 export type ISpots = Record<SpotIdentifierType, ISpot[]>;

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

@@ -12,5 +12,4 @@ export declare class SpotSelectionService extends BaseApi implements ISpotSelect
      * @return {Promise<ISpots>} - The spots response object.
      */
     spotSelection(data: ISpotSelectionParams): Promise<ISpots>;
-    private addEnvToSpotData;
 }

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-beta.2",
   "homepage": "https://docs.liquidcommerce.co/rmn-sdk",
   "main": "./dist/index.cjs",
   "module": "./dist/index.esm.js",