@liquidcommercedev/rmn-sdk 1.4.6-beta.1 → 1.4.6-beta.2

package/dist/types/enums.d.ts

@@ -1,4 +1,60 @@
-export * from './modules/spot/spot.enum';
+export declare enum RMN_SPOT_TYPE {
+    RB_HOMEPAGE_HERO_THREE_TILE = "rbHomepageHeroThreeTile",
+    RB_HOMEPAGE_HERO_TWO_TILE = "rbHomepageHeroTwoTile",
+    RB_HOMEPAGE_HERO_FULL_IMAGE = "rbHomepageHeroFullImage",
+    RB_LARGE_CATEGORY_IMAGE_TOUT = "rbLargeCategoryImageTout",
+    RB_SMALL_DISCOVER_TOUT = "rbSmallDiscoverTout",
+    RB_SMALL_CATEGORY_IMAGE_TOUT = "rbSmallCategoryImageTout",
+    RB_COLLECTION_BANNER_WITHOUT_TEXT_BLOCK = "rbCollectionBannerWithoutTextBlock",
+    RB_PRODUCT_UPCS = "rbProductUpcs",
+    RB_NAVIGATION_BANNER = "rbNavigationBanner",
+    BILLBOARD = "billboard",
+    LARGE_RECTANGLE = "largeRectangle",
+    VERTICAL_RECTANGLE = "verticalRectangle",
+    SQUARE = "square",
+    LARGE_LEADERBOARD = "largeLeaderboard",
+    WIDE_SKYSCRAPER = "wideSkyscraper",
+    IN_TEXT = "inText",
+    SMALL_RECTANGLE = "smallRectangle",
+    MEDIUM_RECTANGLE = "mediumRectangle",
+    BANNER = "banner",
+    LEADERBOARD = "leaderboard",
+    SKYSCRAPER = "skyscraper",
+    HALF_PAGE = "halfPage",
+    SMALL_SQUARE = "smallSquare",
+    VERTICAL_BANNER = "verticalBanner",
+    BUTTON_2 = "button2",
+    MICRO_BAR = "microBar",
+    POP_UP = "popUp",
+    PORTRAIT = "portrait",
+    SMARTPHONE_BANNER_1 = "smartphoneBanner1",
+    SMARTPHONE_BANNER_2 = "smartphoneBanner2",
+    MOBILE_PHONE_INTERSTITIAL_1 = "mobilePhoneInterstitial1",
+    MOBILE_PHONE_INTERSTITIAL_2 = "mobilePhoneInterstitial2",
+    MOBILE_PHONE_INTERSTITIAL_3 = "mobilePhoneInterstitial3",
+    FEATURE_PHONE_SMALL_BANNER = "featurePhoneSmallBanner",
+    FEATURE_PHONE_MEDIUM_BANNER = "featurePhoneMediumBanner",
+    FEATURE_PHONE_LARGE_BANNER = "featurePhoneLargeBanner"
+}
+export declare enum RMN_FILTER_PROPERTIES {
+    KEYWORDS = "keywords",
+    PARENTCO = "parentCo",
+    BRAND = "brand",
+    CATEGORY = "category",
+    TYPE = "type",
+    CLASSIFICATION = "classification",
+    HOLIDAY = "holiday",
+    PUBLISHERS = "publishers",
+    SECTION = "section"
+}
+export declare enum RMN_SPOT_EVENT {
+    IMPRESSION = "IMPRESSION",
+    CLICK = "CLICK",
+    PURCHASE = "PURCHASE",
+    ADD_TO_CART = "ADD_TO_CART",
+    ADD_TO_WISHLIST = "ADD_TO_WISHLIST",
+    BUY_NOW = "BUY_NOW"
+}
 export declare enum RMN_ENV {
     LOCAL = "local",
     DEVELOPMENT = "development",

package/dist/types/index.umd.d.ts

@@ -1,2 +1,2 @@
-import { RmnClient, RmnCreateSpotElement } from './index';
-export { RmnClient, RmnCreateSpotElement };
+import { RmnClient } from './index';
+export { RmnClient };

package/dist/types/modules/element/component/carousel/carousel.component.d.ts

@@ -0,0 +1,58 @@
+export type CarouselNavPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'middle-left' | 'middle-right' | 'middle-sides';
+export interface ICarouselDotOptions {
+    position: CarouselNavPosition;
+    color: string;
+    activeColor: string;
+}
+export interface ICarouselButtonOptions {
+    position: CarouselNavPosition;
+    together: boolean;
+    textColor: string;
+    backgroundColor: string;
+    borderRadius: string;
+    prev: string;
+    next: string;
+}
+export interface ICarouselOptions {
+    autoplay?: boolean;
+    interval?: number;
+    useDots?: ICarouselDotOptions | false;
+    useButtons?: ICarouselButtonOptions | false;
+}
+export declare class CarouselComponent {
+    private readonly carousel;
+    private readonly shadowRoot;
+    private readonly slidesContainer;
+    private readonly slides;
+    private readonly autoplay;
+    private readonly interval;
+    private readonly dotsOptions;
+    private readonly buttonsOptions;
+    private currentSlide;
+    private dotElements;
+    private prevButton;
+    private nextButton;
+    private autoplayInterval;
+    constructor(slides: Array<HTMLElement | string>, options?: ICarouselOptions);
+    getElement(): HTMLElement;
+    private render;
+    private setupCarousel;
+    private renderSlides;
+    private renderDots;
+    private renderButtons;
+    private setupDots;
+    private setupButtons;
+    private nextSlide;
+    private prevSlide;
+    private goToSlide;
+    private updateCarousel;
+    private updateDots;
+    private startAutoplay;
+    private stopAutoplay;
+    private resetAutoplay;
+    private initializeDotOptions;
+    private initializeButtonOptions;
+    private validateOptions;
+    private validateDotsPosition;
+    private validateButtonsPosition;
+}

package/dist/types/modules/element/component/carousel/carousel.style.d.ts

@@ -0,0 +1 @@
+export declare const CAROUSEL_COMPONENT_STYLE = "\n    :host {\n        position: relative;\n        display: inline-block;\n        margin: 0;\n        overflow: hidden;\n        height: 100%;\n        width: 100%;\n    }\n\n    .carousel-slides {\n        position: relative;\n        height: 100%;\n        width: 100%;\n    }\n\n    .carousel-slide {\n        display: none;\n\n        justify-content: center;\n        align-items: center;\n        height: 100%;\n        width: 100%;\n    }\n\n    .carousel-slide.active {\n        display: flex;\n    }\n\n    .carousel-dots {\n        position: absolute;\n        display: flex;\n        align-items: center;\n        gap: 8px;\n    }\n\n    .carousel-dots .dot {\n        width: 12px;\n        height: 12px;\n        border-radius: 50%;\n        cursor: pointer;\n        transition: all 0.3s ease;\n    }\n\n    .carousel-dots.top-left,\n    .carousel-dots.bottom-left {\n        left: 10px;\n    }\n\n    .carousel-dots.top-center,\n    .carousel-dots.bottom-center {\n        left: 50%;\n        transform: translateX(-50%);\n    }\n\n    .carousel-dots.top-right,\n    .carousel-dots.bottom-right {\n        right: 10px;\n    }\n\n    .carousel-dots.top-left,\n    .carousel-dots.top-center,\n    .carousel-dots.top-right {\n        top: 10px;\n    }\n\n    .carousel-dots.bottom-left,\n    .carousel-dots.bottom-center,\n    .carousel-dots.bottom-right {\n        bottom: 10px;\n    }\n\n    .carousel-dots.middle-left {\n        left: 10px;\n        top: 50%;\n        transform: translateY(-50%);\n        flex-direction: column;\n    }\n\n    .carousel-dots.middle-right {\n        right: 10px;\n        top: 50%;\n        transform: translateY(-50%);\n        flex-direction: column;\n    }\n\n    .carousel-buttons button {\n        background-color: #00000080;\n        color: #fff;\n        border: none;\n        padding: 10px;\n        cursor: pointer;\n        transition: background-color 0.3s ease;\n    }\n\n    .carousel-buttons button:hover {\n        background-color: #000000b3;\n    }\n\n    .carousel-buttons.buttons-separate button {\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n    }\n\n    .carousel-buttons.buttons-separate .prev-button {\n        left: 10px;\n    }\n\n    .carousel-buttons.buttons-separate .next-button {\n        right: 10px;\n    }\n\n    .carousel-buttons.buttons-together {\n        position: absolute;\n        display: flex;\n        gap: 10px;\n    }\n\n    .carousel-buttons.buttons-together.top-left,\n    .carousel-buttons.buttons-together.bottom-left {\n        left: 10px;\n    }\n\n    .carousel-buttons.buttons-together.top-center,\n    .carousel-buttons.buttons-together.bottom-center {\n        left: 50%;\n        transform: translateX(-50%);\n    }\n\n    .carousel-buttons.buttons-together.top-right,\n    .carousel-buttons.buttons-together.bottom-right {\n        right: 10px;\n    }\n\n    .carousel-buttons.buttons-together.top-left,\n    .carousel-buttons.buttons-together.top-center,\n    .carousel-buttons.buttons-together.top-right {\n        top: 10px;\n    }\n\n    .carousel-buttons.buttons-together.bottom-left,\n    .carousel-buttons.buttons-together.bottom-center,\n    .carousel-buttons.buttons-together.bottom-right {\n        bottom: 10px;\n    }\n\n    .carousel-buttons.buttons-together.middle-left,\n    .carousel-buttons.buttons-together.middle-right {\n        top: 50%;\n        transform: translateY(-50%);\n        flex-direction: column;\n    }\n\n    .carousel-buttons.buttons-together.middle-left {\n        left: 10px;\n    }\n\n    .carousel-buttons.buttons-together.middle-right {\n        right: 10px;\n    }\n\n    @media (max-width: 768px) {\n        .carousel-buttons button {\n            padding: 8px 12px;\n            font-size: 14px;\n        }\n\n        .carousel-dots .dot {\n            width: 8px;\n            height: 8px;\n        }\n    }\n";

package/dist/types/modules/element/component/carousel/index.d.ts

@@ -0,0 +1,2 @@
+export * from './carousel.component';
+export * from './carousel.style';

package/dist/types/modules/{spot/html/constants/html.constant.d.ts → element/element.constant.d.ts}

@@ -1,8 +1,4 @@
+export declare const ELEMENT_TAG = "spot-element";
 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/element/element.interface.d.ts

@@ -0,0 +1,43 @@
+import type { RMN_SPOT_TYPE } from 'enums';
+import type { ICarouselOptions } from './component/carousel';
+export interface ISpotColors {
+    textColor?: string;
+    backgroundColor?: string;
+    ctaTextColor?: string;
+    ctaBorderColor?: string;
+}
+export interface ISpotOverlay {
+    color: string;
+    colorStop: string;
+}
+export interface ISpotBaseConfig {
+    colors?: ISpotColors;
+    minScale?: number;
+    overlay?: ISpotOverlay[];
+}
+export interface IInjectSpotElement {
+    placementId: string;
+    spotType: RMN_SPOT_TYPE | string;
+    count?: number;
+}
+export interface IInjectSpotsConfig extends ISpotBaseConfig {
+    carousel?: ICarouselOptions;
+}
+export interface ICreateFinalElementConfig {
+    width: number;
+    height: number;
+    fluid?: boolean;
+    minScale?: number;
+}
+export interface ICreateFinalElementParams {
+    content: HTMLElement | string;
+    config: ICreateFinalElementConfig;
+}
+export interface IElementService {
+    createFinalElement(data: ICreateFinalElementParams): HTMLElement | null;
+}
+export type ICustomSpotElementData = ICreateFinalElementConfig;
+export interface ICustomSpotElement extends HTMLElement {
+    data: ICustomSpotElementData;
+    content: HTMLElement | string;
+}

package/dist/types/modules/element/index.d.ts

@@ -0,0 +1,3 @@
+export * from './element.constant';
+export * from './element.interface';
+export * from './spot.element.service';

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

@@ -0,0 +1,2 @@
+declare let SpotElement: new () => HTMLElement;
+export { SpotElement };

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

@@ -0,0 +1,28 @@
+import type { ISpot } from 'modules/selection';
+import type { ICreateFinalElementParams, IElementService, ISpotColors } from './element.interface';
+export declare class ElementService implements IElementService {
+    static getInstance(): ElementService;
+    /**
+     * Creates the html element based on the provided data, content and configs using shadow dom.
+     *
+     * This method is only available in browser environments.
+     *
+     * @param {ICreateFinalElementParams} params - The parameters to create the final element.
+     *
+     * @return {HTMLElement | null} - The html element or null if the browser environment is not available.
+     */
+    createFinalElement({ content, config }: ICreateFinalElementParams): HTMLElement | null;
+    /**
+     * Overrides the spot colors with the provided colors.
+     *
+     * @param {ISpot} spot - The spot data.
+     * @param {ISpotColors} colors - The colors to override.
+     *
+     * @return {ISpot} - The spot data with the colors overridden.
+     */
+    overrideSpotColors(spot: ISpot, colors?: ISpotColors): ISpot;
+    /**
+     * @returns {boolean} - True if the browser environment is available and the element is defined.
+     */
+    private ensureBrowserEnvironmentAndDefineElement;
+}

package/dist/types/modules/element/template/helper.d.ts

@@ -0,0 +1,2 @@
+import type { ISpotOverlay } from '../element.interface';
+export declare function linearGradientColorStop(overlay: ISpotOverlay[], fallback: string): string;

package/dist/types/modules/element/template/index.d.ts

@@ -0,0 +1 @@
+export * from './template.service';

package/dist/types/modules/element/template/reservebar/collection-banner-without-text-block.template.d.ts

@@ -0,0 +1,3 @@
+import type { ISpot } from 'types';
+import type { ISpotTemplateConfig } from '../template.type';
+export declare function rbCollectionBannerWithoutTextBlockTemplate(spot: ISpot, config: ISpotTemplateConfig): string;

package/dist/types/modules/element/template/reservebar/homepage-hero-full-image.template.d.ts

@@ -0,0 +1,3 @@
+import type { ISpot } from 'types';
+import type { ISpotTemplateConfig } from '../template.type';
+export declare function rbHomepageHeroFullImageTemplate(spot: ISpot, config: ISpotTemplateConfig): string;

package/dist/types/modules/element/template/reservebar/homepage-hero-three-tile.template.d.ts

@@ -0,0 +1,3 @@
+import type { ISpot } from 'types';
+import type { ISpotTemplateConfig } from '../template.type';
+export declare function rbHomepageHeroThreeTileTemplate(spot: ISpot, config: ISpotTemplateConfig): string;

package/dist/types/modules/element/template/reservebar/homepage-hero-two-tile.template.d.ts

@@ -0,0 +1,3 @@
+import type { ISpot } from 'types';
+import type { ISpotTemplateConfig } from '../template.type';
+export declare function rbHomepageHeroTwoTileTemplate(spot: ISpot, config: ISpotTemplateConfig): string;

package/dist/types/modules/element/template/reservebar/large-category-image-tout.template.d.ts

@@ -0,0 +1,3 @@
+import type { ISpot } from 'types';
+import type { ISpotTemplateConfig } from '../template.type';
+export declare function rbLargeCategoryImageToutTemplate(spot: ISpot, config: ISpotTemplateConfig): string;

package/dist/types/modules/element/template/reservebar/navigation-banner.template.d.ts

@@ -0,0 +1,3 @@
+import type { ISpot } from 'types';
+import type { ISpotTemplateConfig } from '../template.type';
+export declare function rbNavigationBannerTemplate(spot: ISpot, config: ISpotTemplateConfig): string;

package/dist/types/modules/element/template/reservebar/small-category-image-tout.template.d.ts

@@ -0,0 +1,3 @@
+import type { ISpot } from 'types';
+import type { ISpotTemplateConfig } from '../template.type';
+export declare function rbSmallCategoryImageToutTemplate(spot: ISpot, config: ISpotTemplateConfig): string;

package/dist/types/modules/element/template/reservebar/small-discover-tout.template.d.ts

@@ -0,0 +1,3 @@
+import type { ISpot } from 'types';
+import type { ISpotTemplateConfig } from '../template.type';
+export declare function rbSmallDiscoverToutTemplate(spot: ISpot, config: ISpotTemplateConfig): string;

package/dist/types/modules/element/template/template.service.d.ts

@@ -0,0 +1,10 @@
+import type { ISpot } from 'types';
+import type { ISpotTemplateConfig } from './template.type';
+/**
+ * Creates the spot html string based on the provided spot data.
+ *
+ * @param {ISpot} spot - The spot data.
+ *
+ * @return {string} - The spot html string.
+ */
+export declare const GET_SPOT_TEMPLATE_HTML_STRING: (spot: ISpot, config?: ISpotTemplateConfig) => string;

package/dist/types/modules/element/template/template.type.d.ts

@@ -0,0 +1,11 @@
+import type { RMN_SPOT_TYPE } from 'enums';
+import type { SpotVariantType } from 'modules/selection';
+import type { ISpot } from 'types';
+import type { ISpotOverlay } from '../element.interface';
+export interface ISpotTemplateConfig {
+    overlay?: ISpotOverlay[];
+    prefix?: string;
+}
+export type TemplateFunction = (spot: ISpot, config: ISpotTemplateConfig) => string;
+export type SpotTypeTemplate = Partial<Record<SpotVariantType, TemplateFunction>>;
+export type SpotTemplates = Record<RMN_SPOT_TYPE, SpotTypeTemplate>;

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

@@ -0,0 +1 @@
+export declare const EVENT_API_PATH = "/spots/event";

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

@@ -0,0 +1,5 @@
+import type { RMN_SPOT_EVENT } from 'enums';
+export interface IFireEventParams {
+    event: RMN_SPOT_EVENT;
+    eventUrl: string;
+}

package/dist/types/modules/event/event.service.d.ts

@@ -0,0 +1,5 @@
+import type { IFireEventParams } from './event.interface';
+export declare class EventService {
+    fireEvent({ event, eventUrl }: IFireEventParams): Promise<void>;
+    private getRedirectUrlFromPayload;
+}

package/dist/types/modules/event/helpers/index.d.ts

@@ -0,0 +1,2 @@
+export * from './intersection.service';
+export * from './resize.service';

package/dist/types/modules/event/helpers/intersection.service.d.ts

@@ -0,0 +1,8 @@
+export declare class IntersectionObserverService {
+    private observers;
+    private defaultOptions;
+    constructor(defaultOptions?: IntersectionObserverInit);
+    observe(element: HTMLElement, callback: (entry: IntersectionObserverEntry) => void, options?: IntersectionObserverInit): void;
+    unobserve(element: HTMLElement): void;
+    unobserveAll(): void;
+}

package/dist/types/modules/event/helpers/resize.service.d.ts

@@ -0,0 +1,30 @@
+export interface IResizeSize {
+    width: number;
+    height: number;
+}
+export interface IResizeOptions {
+    element: HTMLElement;
+    maxSize: IResizeSize;
+    minScale?: number;
+}
+export interface ISizeChangedEvent extends CustomEvent {
+    detail: {
+        width: number;
+        height: number;
+        newWidth: number;
+        newHeight: number;
+        scale: number;
+    };
+}
+export declare class ResizeObserverService {
+    private element;
+    private container;
+    private resizeObserver;
+    private maxSize;
+    private minSize;
+    private aspectRatio;
+    constructor({ element, maxSize, minScale }: IResizeOptions);
+    private setDimensions;
+    private updateElementSize;
+    disconnect(): void;
+}

package/dist/types/modules/event/index.d.ts

@@ -0,0 +1,3 @@
+export * from './event.constant';
+export * from './event.interface';
+export * from './event.service';

package/dist/types/modules/selection/index.d.ts

@@ -0,0 +1,4 @@
+export * from './selection.constant';
+export * from './selection.interface';
+export * from './selection.service';
+export * from './selection.type';

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

@@ -0,0 +1 @@
+export declare const SELECTION_API_PATH = "/spots/selection";

package/dist/types/modules/{spot/spot.interface.d.ts → selection/selection.interface.d.ts}

@@ -1,5 +1,6 @@
-import type { RMN_SPOT_EVENT, RMN_SPOT_TYPE } from './spot.enum';
-import type { RmnFilterType, RmnSpotType, SpotIdentifierType, SpotVariantType } from './spot.type';
+import type { RMN_SPOT_EVENT, RMN_SPOT_TYPE } from 'enums';
+import type { SpotIdentifierType, SpotVariantType } from 'modules/selection';
+import type { RmnFilterType, RmnSpotType } from 'types';
 export interface ISpotSelectionParams {
     url?: string;
     spots: RmnSpotType[];
@@ -29,15 +30,7 @@ export interface ISpot {
     mobileSecondaryImage?: string;
     productUpcs?: string[];
 }
-export interface ICreateSpotElementConfig {
-    fluid?: boolean;
-    customContent?: HTMLElement | string;
-    redirectOnClick?: boolean;
-}
 export type ISpots = Record<SpotIdentifierType, ISpot[]>;
-export interface ISpotSelectionService {
+export interface ISelectionService {
     spotSelection(data: ISpotSelectionParams): Promise<ISpots>;
 }
-export interface ISpotHtmlService {
-    createSpotHtmlElement(spot: ISpot, config?: ICreateSpotElementConfig): HTMLElement | null;
-}

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

@@ -0,0 +1,16 @@
+import { BaseApi } from 'common/http';
+import type { IAuthCredentials } from 'modules/auth';
+import type { ISpots } from 'modules/selection';
+import type { ISelectionService, ISpotSelectionParams } from './selection.interface';
+export declare class SelectionService extends BaseApi implements ISelectionService {
+    private constructor();
+    static getInstance(auth: IAuthCredentials): SelectionService;
+    /**
+     * Makes a selection request on our server based on the provided data.
+     *
+     * @param {ISpotSelectionParams} data - Spots selection parameters.
+     *
+     * @return {Promise<ISpots>} - The spots response object.
+     */
+    spotSelection(data: ISpotSelectionParams): Promise<ISpots>;
+}

package/dist/types/modules/{spot/spot.type.d.ts → selection/selection.type.d.ts}

@@ -1,4 +1,4 @@
-import type { RMN_FILTER_PROPERTIES, RMN_SPOT_TYPE } from './spot.enum';
+import type { RMN_FILTER_PROPERTIES, RMN_SPOT_TYPE } from 'enums';
 export type RmnFilterType = {
     [key in RMN_FILTER_PROPERTIES]?: string[];
 };

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

@@ -1,9 +1,10 @@
-import type { IAuthCredentials } from './modules/auth';
-import type { ICreateSpotElementConfig, ISpot, ISpots, ISpotSelectionParams } from './modules/spot';
-import type { IRmnClient, IRmnConfig } from './types';
+import type { IAuthCredentials } from 'modules/auth';
+import type { IInjectSpotElement, IInjectSpotsConfig } from 'modules/element';
+import type { ISpots, ISpotSelectionParams } from 'modules/selection';
+import type { IRmnClient, IRmnConfig } from 'types';
 export declare class LiquidCommerceRmnClient implements IRmnClient {
-    private readonly spotSelectionService;
-    private readonly spotHtmlService;
+    private readonly selectionService;
+    private readonly elementService;
     constructor(auth: IAuthCredentials);
     /**
      * Makes a selection request on our server based on the provided data.
@@ -16,19 +17,43 @@ export declare class LiquidCommerceRmnClient implements IRmnClient {
      */
     spotSelection(data: ISpotSelectionParams): Promise<ISpots>;
     /**
-     * Creates the spot html element based on the provided data using shadow dom.
+     * Injects the spot elements into their provided placement.
      *
-     * This method is useful when you are initializing the client in a browser environment, so you can create the spot html element directly from the RmnClient instance.
+     * @param {IInjectSpotElement[]} data - The spot elements data.
+     * @param {IInjectSpotsConfig} config - The configuration object.
      *
+     * @return {Promise<void>} - A promise that resolves when the spot elements are injected.
+     */
+    injectSpotElement(data: IInjectSpotElement[], config?: IInjectSpotsConfig): Promise<void>;
+    /**
+     * Injects a carousel element with the provided spots into the placement.
+     *
+     * @param {HTMLElement} placement - The placement element.
+     * @param {ISpot[]} spots - The spot data.
+     * @param {IInjectSpotsConfig} config - The configuration object.
+     *
+     * @return {void}
+     */
+    private injectCarouselSpotElement;
+    /**
+     * Injects a single spot element into the provided placement.
+     *
+     * @param {IInjectSpotElement} injectItem - The inject item data.
+     * @param {HTMLElement} placement - The placement element.
      * @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.customContent} config.customContent - Use a custom html element/string.
-     * @param {ICreateSpotElementConfig.redirectOnClick} config.redirectOnClick - If the spot should redirect on click.
+     * @param {IInjectSpotsConfig} config - The configuration object.
+     *
+     * @return {void}
+     */
+    private injectOneSpotElement;
+    /**
+     * Normalizes the spot type data by adding a number suffix to the spot type.
      *
-     * @return {HTMLElement | null} - The spot html element or null if the browser environment is not available.
+     * @param {IInjectSpotElement[]} spots - The spot type data.
+     *
+     * @return {IInjectSpotElement[]} - The normalized spot type data.
      */
-    createSpotElement(spot: ISpot, config?: ICreateSpotElementConfig): HTMLElement | null;
+    private normalizeDataSpotType;
 }
 /**
  * Creates a new instance of the RmnClient.
@@ -39,20 +64,4 @@ export declare class LiquidCommerceRmnClient implements IRmnClient {
  * @return {Promise<IRmnClient>} - The RmnClient instance.
  */
 declare function RmnClient(apiKey: string, config: IRmnConfig): Promise<IRmnClient>;
-/**
- * Creates the spot html element based on the provided data using shadow dom.
- *
- * This method is useful when you are initializing the client in a non-browser environment.
- * When you request a spot selection, you will receive the spot data in server-side and return them back to the client.
- * Then you can use this function to create the spot html element based on the provided data without the need of the RmnClient instance.
- *
- * @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.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.
- */
-declare function RmnCreateSpotElement(spot: ISpot, config?: ICreateSpotElementConfig): HTMLElement | null;
-export { RmnClient, RmnCreateSpotElement };
+export { RmnClient };

package/dist/types/types.d.ts

@@ -1,10 +1,12 @@
-export type { ICreateSpotElementConfig, ISpotEvent, ISpots, RmnFilterType, RmnSpotType, } from './modules/spot';
-export { ISpot, ISpotSelectionParams } from './modules/spot';
-import type { RMN_ENV } from './enums';
-import type { ICreateSpotElementConfig, ISpot, ISpots, ISpotSelectionParams } from './modules/spot';
+export type { IInjectSpotsConfig } from 'modules/element';
+export type { ISpots, RmnFilterType, RmnSpotType } from 'modules/selection';
+export { ISpot, ISpotEvent, ISpotSelectionParams } from 'modules/selection';
+import type { RMN_ENV } from 'enums';
+import type { IInjectSpotElement, IInjectSpotsConfig } from 'modules/element';
+import type { ISpots, ISpotSelectionParams } from 'modules/selection';
 export interface IRmnClient {
     spotSelection(data: ISpotSelectionParams): Promise<ISpots>;
-    createSpotElement(spot: ISpot, config?: ICreateSpotElementConfig): HTMLElement | null;
+    injectSpotElement(spots: IInjectSpotElement[], config?: IInjectSpotsConfig): Promise<void>;
 }
 export interface IRmnConfig {
     env: RMN_ENV;

package/package.json

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