@liquidcommercedev/rmn-sdk 1.5.0-beta.12 → 1.5.0-beta.14

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

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

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

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

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

@@ -0,0 +1,13 @@
+import type { RMN_SPOT_TYPE } from 'enums';
+export interface ICustomSkeletonElementData {
+    fluid: boolean;
+    width: number;
+    height: number;
+}
+export interface ICustomSkeletonElement extends HTMLElement {
+    data: ICustomSkeletonElementData;
+}
+export interface ICreateSkeletonElementParams {
+    fluid: boolean;
+    spotType: RMN_SPOT_TYPE;
+}

package/dist/types/modules/element/component/skeleton/skeleton.template.d.ts

@@ -0,0 +1,2 @@
+import type { ICustomSkeletonElementData } from './skeleton.interface';
+export declare function SkeletonTemplate({ fluid, width, height }: ICustomSkeletonElementData): string;

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

@@ -1,5 +1,8 @@
+import type { SpotDimensionsType } from 'modules/selection';
 export declare const SPOT_ELEMENT_TAG = "spot-element";
 export declare const CAROUSEL_ELEMENT_TAG = "spot-carousel-element";
+export declare const SKELETON_ELEMENT_TAG = "spot-skeleton-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_DIMENSIONS: SpotDimensionsType;

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

@@ -1,5 +1,6 @@
 import type { ISpot } from 'modules/selection';
 import type { ICreateCarouselElementParams } from './component/carousel';
+import type { ICreateSkeletonElementParams } from './component/skeleton';
 import type { ICreateSpotElementParams } from './component/spot';
 import type { IElementService, ISpotColors } from './element.interface';
 export declare class ElementService implements IElementService {
@@ -24,6 +25,16 @@ export declare class ElementService implements IElementService {
      * @return {HTMLElement | null} - The html element or null if the browser environment is not available.
      */
     createCarouselElement({ slides, config, }: ICreateCarouselElementParams): HTMLElement | null;
+    /**
+     * Creates the skeleton html element based on the provided data using shadow dom.
+     *
+     * This method is only available in browser environments.
+     *
+     * @param {ICreateSkeletonElementParams} params - The parameters to create the final element.
+     *
+     * @return {HTMLElement | null} - The html element or null if the browser environment is not available.
+     */
+    createSkeletonElement(params: ICreateSkeletonElementParams): HTMLElement | null;
     /**
      * Overrides the spot colors with the provided colors.
      *

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

@@ -1,4 +1,8 @@
 import type { RMN_SPOT_EVENT } from 'enums';
+export interface IDataLayerEvent {
+    event: string;
+    [key: string]: any;
+}
 export interface INormalizedEventData {
     event: RMN_SPOT_EVENT;
     productIds: Array<string | number>;

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

@@ -6,6 +6,7 @@ export declare class LiquidCommerceRmnClient implements IRmnClient {
     private readonly selectionService;
     private readonly elementService;
     private readonly eventService;
+    private intersectionObserver;
     constructor(auth: IAuthCredentials);
     /**
      * Makes a selection request on our server based on the provided data.
@@ -27,14 +28,7 @@ export declare class LiquidCommerceRmnClient implements IRmnClient {
      * @return {Promise<void>} - A promise that resolves when the spot elements are injected.
      */
     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 | {error: string}>} - The spots response object.
-     */
-    private spotSelectionRequest;
+    /** ========================= HELPER METHODS ========================= **/
     /**
      * Injects a carousel element with the provided spots into the placement.
      *
@@ -56,6 +50,22 @@ export declare class LiquidCommerceRmnClient implements IRmnClient {
      * @return {void}
      */
     private injectOneSpotElement;
+    /**
+     * Clears the placement element by removing all its children.
+     *
+     * @param {string} placementId - The placement id.
+     *
+     * @return {void}
+     */
+    private clearPlacement;
+    /**
+     * Makes a selection request on our server based on the provided data.
+     *
+     * @param {IInjectSpotElementParams} params - Parameters for injecting spot elements.
+     *
+     * @return {Promise<ISpots | {error: string}>} - The spots response object.
+     */
+    private spotSelectionRequest;
     /**
      * Prevents duplicate placement ids in the inject data.
      *
@@ -66,8 +76,13 @@ export declare class LiquidCommerceRmnClient implements IRmnClient {
      * @return {void}
      */
     private preventDuplicateSpotPlacementIds;
+    /**
+     * Prevents non-existent spot types in the inject data.
+     *
+     * @param {IInjectSpotElement[]} inject - The inject data.
+     * @return {IInjectSpotElement[]} - The filtered inject data.
+     */
     private preventNonExistentSpotTypes;
-    private updateSpotsState;
     private useSpotSelectionExample;
 }
 /**

package/package.json

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