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

package/dist/types/enums.d.ts

@@ -38,6 +38,7 @@ export declare enum RMN_SPOT_TYPE {
 }
 export declare enum RMN_FILTER_PROPERTIES {
     KEYWORDS = "keywords",
+    PAGE_LOCATION = "pageLocation",
     PARENTCO = "parentCo",
     BRAND = "brand",
     CATEGORY = "category",

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

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

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

@@ -1,58 +1,3 @@
-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;
-}
+import type { ICustomCarouselElement } from './carousel.interface';
+declare let CarouselElement: new () => ICustomCarouselElement;
+export { CarouselElement };

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

@@ -0,0 +1,31 @@
+import type { ICreateElementConfig } from 'modules/element';
+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 | boolean;
+    useButtons?: ICarouselButtonOptions | boolean;
+}
+export type ICustomCarouselElementData = ICreateElementConfig & ICarouselOptions;
+export interface ICustomCarouselElement extends HTMLElement {
+    data: ICustomCarouselElementData;
+    slides: HTMLElement[];
+}
+export interface ICreateCarouselElementParams {
+    slides: HTMLElement[];
+    config: ICreateElementConfig;
+}

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

@@ -1 +1,2 @@
-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";
+import type { ICustomCarouselElementData } from './carousel.interface';
+export declare const CAROUSEL_COMPONENT_STYLE: ({ width, height, fluid }: ICustomCarouselElementData) => string;

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

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

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

@@ -0,0 +1,2 @@
+export * from './spot.component';
+export * from './spot.interface';

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

@@ -0,0 +1,3 @@
+import type { ICustomSpotElement } from './spot.interface';
+declare let SpotElement: new () => ICustomSpotElement;
+export { SpotElement };

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

@@ -0,0 +1,10 @@
+import type { ICreateElementConfig } from 'modules/element';
+export type ICustomSpotElementData = ICreateElementConfig;
+export interface ICustomSpotElement extends HTMLElement {
+    data: ICustomSpotElementData;
+    content: HTMLElement;
+}
+export interface ICreateSpotElementParams {
+    content: HTMLElement;
+    config: ICreateElementConfig;
+}

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

@@ -1,4 +1,5 @@
-export declare const ELEMENT_TAG = "spot-element";
+export declare const SPOT_ELEMENT_TAG = "spot-element";
+export declare const CAROUSEL_ELEMENT_TAG = "spot-carousel-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";

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

@@ -1,5 +1,7 @@
 import type { RMN_SPOT_TYPE } from 'enums';
-import type { ICarouselOptions } from './component/carousel';
+import type { ICarouselOptions, ICreateCarouselElementParams } from 'modules/element/component/carousel';
+import type { ICreateSpotElementParams } from 'modules/element/component/spot';
+import type { RmnFilterType } from 'modules/selection';
 export interface ISpotColors {
     textColor?: string;
     backgroundColor?: string;
@@ -10,34 +12,38 @@ export interface ISpotOverlay {
     color: string;
     colorStop: string;
 }
-export interface ISpotBaseConfig {
+export interface IInjectSpotElementConfig {
+    url?: string;
     colors?: ISpotColors;
     minScale?: number;
     overlay?: ISpotOverlay[];
+    carousel?: ICarouselOptions;
 }
 export interface IInjectSpotElement {
     placementId: string;
     spotType: RMN_SPOT_TYPE | string;
     count?: number;
+    config?: Omit<IInjectSpotElementConfig, 'url'>;
+    filter?: Partial<RmnFilterType>;
 }
-export interface IInjectSpotsConfig extends ISpotBaseConfig {
-    carousel?: ICarouselOptions;
-}
-export interface ICreateFinalElementConfig {
+export interface ICreateElementConfig {
     width: number;
     height: number;
     fluid?: boolean;
-    minScale?: number;
+    minScale: number;
 }
-export interface ICreateFinalElementParams {
-    content: HTMLElement | string;
-    config: ICreateFinalElementConfig;
+export interface IInjectSpotElementParams {
+    inject: IInjectSpotElement[];
+    config?: IInjectSpotElementConfig;
+    filter?: Partial<RmnFilterType>;
 }
 export interface IElementService {
-    createFinalElement(data: ICreateFinalElementParams): HTMLElement | null;
+    createSpotElement(params: ICreateSpotElementParams): HTMLElement | null;
+    createCarouselElement(params: ICreateCarouselElementParams): HTMLElement | null;
 }
-export type ICustomSpotElementData = ICreateFinalElementConfig;
-export interface ICustomSpotElement extends HTMLElement {
-    data: ICustomSpotElementData;
-    content: HTMLElement | string;
+export interface IRmnCreateSpotElementConfig {
+    fluid?: boolean;
+    colors?: ISpotColors;
+    overlay?: ISpotOverlay[];
+    minScale?: number;
 }

package/dist/types/modules/element/{spot.element.service.d.ts → element.service.d.ts}

@@ -1,5 +1,7 @@
 import type { ISpot } from 'modules/selection';
-import type { ICreateFinalElementParams, IElementService, ISpotColors } from './element.interface';
+import type { ICreateCarouselElementParams } from './component/carousel';
+import type { ICreateSpotElementParams } from './component/spot';
+import type { IElementService, ISpotColors } from './element.interface';
 export declare class ElementService implements IElementService {
     static getInstance(): ElementService;
     /**
@@ -7,11 +9,21 @@ export declare class ElementService implements IElementService {
      *
      * This method is only available in browser environments.
      *
-     * @param {ICreateFinalElementParams} params - The parameters to create the final element.
+     * @param {ICreateSpotElementParams} 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;
+    createSpotElement({ content, config }: ICreateSpotElementParams): HTMLElement | null;
+    /**
+     * Creates the carousel html element based on the provided slides and configs using shadow dom.
+     *
+     * This method is only available in browser environments.
+     *
+     * @param {ICreateCarouselElementParams} params - The parameters to create the final element.
+     *
+     * @return {HTMLElement | null} - The html element or null if the browser environment is not available.
+     */
+    createCarouselElement({ slides, config, }: ICreateCarouselElementParams): HTMLElement | null;
     /**
      * Overrides the spot colors with the provided colors.
      *

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

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

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

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

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

@@ -7,4 +7,4 @@ import type { ISpotTemplateConfig } from './template.type';
  *
  * @return {string} - The spot html string.
  */
-export declare const GET_SPOT_TEMPLATE_HTML_STRING: (spot: ISpot, config?: ISpotTemplateConfig) => string;
+export declare const SPOT_TEMPLATE_HTML_ELEMENT: (spot: ISpot, config?: ISpotTemplateConfig) => HTMLElement | null;

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

@@ -5,7 +5,7 @@ export interface IResizeSize {
 export interface IResizeOptions {
     element: HTMLElement;
     maxSize: IResizeSize;
-    minScale?: number;
+    minScale: number;
 }
 export interface ISizeChangedEvent extends CustomEvent {
     detail: {

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

@@ -1,5 +1,5 @@
 import type { RMN_SPOT_EVENT, RMN_SPOT_TYPE } from 'enums';
-import type { SpotIdentifierType, SpotVariantType } from 'modules/selection';
+import type { PlacementIdType, SpotVariantType } from 'modules/selection';
 import type { RmnFilterType, RmnSpotType } from 'types';
 export interface ISpotSelectionParams {
     url?: string;
@@ -30,7 +30,7 @@ export interface ISpot {
     mobileSecondaryImage?: string;
     productUpcs?: string[];
 }
-export type ISpots = Record<SpotIdentifierType, ISpot[]>;
+export type ISpots = Record<PlacementIdType, ISpot[]>;
 export interface ISelectionService {
     spotSelection(data: ISpotSelectionParams): Promise<ISpots>;
 }

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

@@ -2,12 +2,13 @@ import type { RMN_FILTER_PROPERTIES, RMN_SPOT_TYPE } from 'enums';
 export type RmnFilterType = {
     [key in RMN_FILTER_PROPERTIES]?: string[];
 };
+export type PlacementIdType = RMN_SPOT_TYPE | `${RMN_SPOT_TYPE}${number}` | string;
 export type SpotFilterType = {
+    placementId?: PlacementIdType;
     spot: RMN_SPOT_TYPE | string;
-    count: number;
+    count?: number;
     exactMatch?: string;
 } & Omit<RmnFilterType, RMN_FILTER_PROPERTIES.KEYWORDS>;
-export type SpotIdentifierType = RMN_SPOT_TYPE | `${RMN_SPOT_TYPE}${number}`;
 export type RmnSpotType = RMN_SPOT_TYPE | string | SpotFilterType;
 type RBSpotTypeKeys = keyof {
     [K in keyof typeof RMN_SPOT_TYPE as K extends `RB_${string}` ? K : never]: (typeof RMN_SPOT_TYPE)[K];

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

@@ -1,6 +1,6 @@
 import type { IAuthCredentials } from 'modules/auth';
-import type { IInjectSpotElement, IInjectSpotsConfig } from 'modules/element';
-import type { ISpots, ISpotSelectionParams } from 'modules/selection';
+import type { IInjectSpotElementParams, IRmnCreateSpotElementConfig } from 'modules/element';
+import type { ISpot, ISpots, ISpotSelectionParams } from 'modules/selection';
 import type { IRmnClient, IRmnConfig } from 'types';
 export declare class LiquidCommerceRmnClient implements IRmnClient {
     private readonly selectionService;
@@ -11,26 +11,33 @@ export declare class LiquidCommerceRmnClient implements IRmnClient {
      *
      * To create a spot html element, use the RmnCreateSpotElement function.
      *
-     * @param {ISpotSelectionParams} data - Spots selection parameters.
+     * @param {ISpotSelectionParams} params - Spots selection parameters.
      *
      * @return {Promise<ISpots>} - The spots response object.
      */
-    spotSelection(data: ISpotSelectionParams): Promise<ISpots>;
+    spotSelection(params: ISpotSelectionParams): Promise<ISpots>;
     /**
      * Injects the spot elements into their provided placement.
      *
-     * @param {IInjectSpotElement[]} data - The spot elements data.
-     * @param {IInjectSpotsConfig} config - The configuration object.
+     * @param {IInjectSpotElementParams} params - Parameters for injecting spot elements.
      *
      * @return {Promise<void>} - A promise that resolves when the spot elements are injected.
      */
-    injectSpotElement(data: IInjectSpotElement[], config?: IInjectSpotsConfig): Promise<void>;
+    injectSpotElement(params: IInjectSpotElementParams): Promise<void>;
+    /**
+     * Makes a selection request on our server based on the provided data.
+     *
+     * @param {IInjectSpotElementParams} params - Parameters for injecting spot elements.
+     *
+     * @return {Promise<ISpots>} - The spots response object.
+     */
+    private spotSelectionRequest;
     /**
      * 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.
+     * @param {IInjectSpotElementConfig} config - The configuration object.
      *
      * @return {void}
      */
@@ -41,19 +48,21 @@ export declare class LiquidCommerceRmnClient implements IRmnClient {
      * @param {IInjectSpotElement} injectItem - The inject item data.
      * @param {HTMLElement} placement - The placement element.
      * @param {ISpot} spot - The spot data.
-     * @param {IInjectSpotsConfig} config - The configuration object.
+     * @param {IInjectSpotElementConfig} config - The configuration object.
      *
      * @return {void}
      */
     private injectOneSpotElement;
     /**
-     * Normalizes the spot type data by adding a number suffix to the spot type.
+     * Prevents duplicate placement ids in the inject data.
+     *
+     * @param {IInjectSpotElement[]} inject - The inject data.
      *
-     * @param {IInjectSpotElement[]} spots - The spot type data.
+     * @throws {Error} - If a duplicate placement id is found.
      *
-     * @return {IInjectSpotElement[]} - The normalized spot type data.
+     * @return {void}
      */
-    private normalizeDataSpotType;
+    private preventDuplicateSpotPlacementIds;
 }
 /**
  * Creates a new instance of the RmnClient.
@@ -64,4 +73,17 @@ export declare class LiquidCommerceRmnClient implements IRmnClient {
  * @return {Promise<IRmnClient>} - The RmnClient instance.
  */
 declare function RmnClient(apiKey: string, config: IRmnConfig): Promise<IRmnClient>;
-export { RmnClient };
+/**
+ * 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 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 {IRmnCreateSpotElementConfig} config - The configuration object.
+ *
+ * @return {HTMLElement | null} - The spot html element or null if the browser environment is not available.
+ */
+declare function RmnCreateSpotElement(spot: ISpot, config?: IRmnCreateSpotElementConfig): HTMLElement | null;
+export { RmnClient, RmnCreateSpotElement };

package/dist/types/static.constant.d.ts

@@ -0,0 +1,3 @@
+import type { ISpotEvent, ISpots } from 'types';
+export declare const SPOT_EVENTS_EXAMPLE: ISpotEvent[];
+export declare const RB_SPOTS_SELECTION_EXAMPLE: Partial<ISpots>;

package/dist/types/types.d.ts

@@ -1,12 +1,12 @@
-export type { IInjectSpotsConfig } from 'modules/element';
+export type { IInjectSpotElement, IInjectSpotElementConfig, IRmnCreateSpotElementConfig, } 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 { IInjectSpotElementParams } from 'modules/element';
 import type { ISpots, ISpotSelectionParams } from 'modules/selection';
 export interface IRmnClient {
-    spotSelection(data: ISpotSelectionParams): Promise<ISpots>;
-    injectSpotElement(spots: IInjectSpotElement[], config?: IInjectSpotsConfig): Promise<void>;
+    spotSelection(params: ISpotSelectionParams): Promise<ISpots>;
+    injectSpotElement(params: IInjectSpotElementParams): 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.2",
+  "version": "1.4.6-beta.4",
   "homepage": "https://docs.liquidcommerce.co/rmn-sdk",
   "main": "./dist/index.cjs",
   "module": "./dist/index.esm.js",
@@ -42,7 +42,7 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
-    "lint": "eslint \"src/**/*.ts\" --fix",
+    "lint": "eslint \"src/**/*.ts\"",
     "format": "prettier --write \"src/**/*.ts\"",
     "docs": "typedoc --out docs src",
     "prepublishOnly": "pnpm run build"