@liquidcommercedev/rmn-sdk 1.5.0-beta.32 → 1.5.0-beta.33

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

@@ -0,0 +1,7 @@
+import { BaseSpotComponent } from 'modules/element/component/spot';
+import type { ISmallCategoryImageToutRbSpot } from '../rb-template.interface';
+export declare class RbSmallCategoryImageToutSE extends BaseSpotComponent<ISmallCategoryImageToutRbSpot> {
+    constructor();
+    protected template(): string;
+    protected styles(): string;
+}

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

@@ -0,0 +1,7 @@
+import { BaseSpotComponent } from 'modules/element/component/spot';
+import type { ISmallDiscoverToutRbSpot } from '../rb-template.interface';
+export declare class RbSmallDiscoverToutSE extends BaseSpotComponent<ISmallDiscoverToutRbSpot> {
+    constructor();
+    protected template(): string;
+    protected styles(): string;
+}

package/dist/types/modules/spot-template/reservebar/video-player.template.d.ts

@@ -0,0 +1,35 @@
+import { BaseSpotComponent } from 'modules/element/component/spot';
+import type { IVideoPlayerRbSpot } from '../rb-template.interface';
+export declare class RbVideoPlayerSE extends BaseSpotComponent<IVideoPlayerRbSpot> {
+    private readonly videoSelector;
+    private readonly timelineSelector;
+    private readonly playButtonSelector;
+    private readonly muteButtonSelector;
+    private readonly volumeSliderSelector;
+    private video;
+    private timeline;
+    constructor();
+    private get container();
+    private bindEventHandlers;
+    private updatePlayIcon;
+    private updateMuteIcon;
+    private updateProgress;
+    private handlePlayPause;
+    private handleTimelineClick;
+    private handleVolumeChange;
+    private handleMuteToggle;
+    private formatTime;
+    private hideOverlay;
+    private getMuteIcon;
+    private getUnmuteIcon;
+    private getPlayIcon;
+    private getPauseIcon;
+    protected connected(): void;
+    protected disconnected(): void;
+    private initializeElements;
+    private setupAutoplay;
+    private attachEventListeners;
+    private removeEventListeners;
+    protected template(): string;
+    protected styles(): string;
+}

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

@@ -0,0 +1,3 @@
+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/spot-template/spot-template.interface.d.ts

@@ -0,0 +1,13 @@
+import type { RMN_SPOT_TYPE } from 'enums';
+import type { ISpotEvent, SpotVariantType } from 'modules/selection';
+import type { BaseSpotComponentConstructor } from '../element/component/spot';
+export type SpotTypeTemplate = Partial<Record<SpotVariantType, BaseSpotComponentConstructor>>;
+export type SpotTemplates = Partial<Record<RMN_SPOT_TYPE, SpotTypeTemplate>>;
+export interface ISpotTemplateBaseData {
+    id: string;
+    events: ISpotEvent[];
+    spot: RMN_SPOT_TYPE;
+    variant: SpotVariantType;
+    width: number;
+    height: number;
+}

package/dist/types/modules/spot-template/spot-template.service.d.ts

@@ -0,0 +1,13 @@
+import { RMN_SPOT_TYPE } from 'enums';
+import type { SpotVariantType } from 'modules/selection';
+import type { BaseSpotComponentConstructor } from '../element/component/spot';
+export declare class SpotTemplateService {
+    private readonly rbTemplates;
+    private readonly iabTemplates;
+    private constructor();
+    static getInstance(): SpotTemplateService;
+    getTemplateCustomElementClass(spotType: RMN_SPOT_TYPE, spotVariant: SpotVariantType): BaseSpotComponentConstructor | null;
+    private isRbSpot;
+    private initializeRbTemplates;
+    private initializeIabTemplates;
+}

package/dist/types/modules/spot-template/utils.d.ts

@@ -0,0 +1,3 @@
+import type { ISpotOverlay } from 'types';
+export declare function convertHexToRgba(hex: string, opacity?: number): string;
+export declare function generateGradientColor(overlay?: ISpotOverlay, fallback?: string): string;

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

@@ -1,17 +1,17 @@
 import type { IAuthCredentials } from 'modules/auth';
-import type { IInjectSpotElementParams, IRmnCreateSpotElementConfig } from 'modules/element';
+import type { IInjectSpotElementParams } from 'modules/element';
 import type { ISpot, ISpots, ISpotSelectionParams } from 'modules/selection';
 import type { IRmnClient, IRmnConfig, IRmnEventManager } from 'types';
 /**
- * LiquidCommerce Rmn Client
+ * The RmnClient for client-side.
+ * This client is used when you are initializing the client in a browser environment.
  *
  * @class
  */
-export declare class LiquidCommerceRmnClient implements IRmnClient {
+export declare class BrowserRmnClient implements IRmnClient {
     private readonly selectionService;
     private readonly elementService;
-    private readonly eventService;
-    private intersectionObserver;
+    private readonly spotManagerService;
     constructor(auth: IAuthCredentials);
     /**
      * Makes a selection request on our server based on the provided data.
@@ -41,6 +41,15 @@ export declare class LiquidCommerceRmnClient implements IRmnClient {
      * @return {Promise<void>} - A promise that resolves when the spot elements are injected.
      */
     injectSpotElement(params: IInjectSpotElementParams): Promise<void>;
+    /**
+     * Processes the placements that are within range and injects the spot elements into the provided placements.
+     *
+     * @param {IInjectSpotElementParams} params - Parameters for injecting spot elements.
+     * @param {string[]} placementIds - The placement IDs to process.
+     *
+     * @return {Promise<void>} - A promise that resolves when the spot elements are injected.
+     */
+    private processPlacements;
     /**
      * Injects a single spot element into the provided placement.
      *
@@ -71,13 +80,53 @@ export declare class LiquidCommerceRmnClient implements IRmnClient {
     private injectSpotSelectionRequest;
 }
 /**
- * Creates a new instance of the RmnClient.
- * Ensures the page is fully loaded before initializing.
+ * The RmnClient for server-side.
+ * This client is used when you are initializing the client in a non-browser environment.
+ *
+ * @class
+ */
+export declare class ServerRmnClient implements IRmnClient {
+    private readonly selectionService;
+    constructor(auth: IAuthCredentials);
+    /**
+     * Makes a selection request on our server based on the provided data.
+     *
+     * To create a spot html element, use the RmnCreateSpotElement function.
+     *
+     * @param {ISpotSelectionParams} params - Spots selection parameters.
+     *
+     * @return {Promise<ISpots | { error : string }>} - The spots response object.
+     */
+    spotSelection(params: ISpotSelectionParams): Promise<ISpots | {
+        error: string;
+    }>;
+    /**
+     * Publishes the spot data for a given placement ID to the RMN.
+     *
+     * @param {string} placementId - The unique identifier for the placement.
+     * @param {ISpot} spot - The spot data.
+     * @return {void} - Does not return any value.
+     */
+    publishSpotToRmn(placementId: string, spot: ISpot): void;
+    /**
+     * Injects the spot elements into their provided placement.
+     *
+     * @param {IInjectSpotElementParams} params - Parameters for injecting spot elements.
+     *
+     * @return {Promise<void>} - A promise that resolves when the spot elements are injected.
+     */
+    injectSpotElement(params: IInjectSpotElementParams): Promise<void>;
+}
+/**
+ * Creates a new instance of the appropriate RmnClient based on the environment.
+ *
+ * Initializes RmnClientBrowser for client-side.
+ * Initializes RmnClientServer for server-side.
  *
  * @param {string} apiKey - The api key.
  * @param {IRmnConfig} config - The configuration object.
  *
- * @return {Promise<IRmnClient>} - The RmnClient instance.
+ * @return {Promise<Partial<IRmnClient>>} - The appropriate RmnClient instance.
  */
 declare function RmnClient(apiKey: string, config: IRmnConfig): Promise<IRmnClient>;
 /**
@@ -86,17 +135,4 @@ declare function RmnClient(apiKey: string, config: IRmnConfig): Promise<IRmnClie
  * @return {IRmnEventManager} - The RmnEventManager instance.
  */
 declare function RmnEventManager(): IRmnEventManager;
-/**
- * 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, RmnEventManager };
+export { RmnClient, RmnEventManager };

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

@@ -1,5 +1,5 @@
-import type { IInjectSpotElement } from 'modules/element';
-import type { ISpots } from 'modules/selection';
+import type { IInjectSpotElement, ISpotColors } from 'modules/element';
+import type { ISpot } from 'modules/selection';
 /**
  * Checks if the current environment is a browser environment.
  *
@@ -29,8 +29,13 @@ export declare function clearPlacement(placementId: string): void;
  * @return {void}
  */
 export declare function prepareSpotPlacement(placement: HTMLElement): void;
-export declare function useSpotSelectionExample(inject: IInjectSpotElement[]): Promise<ISpots | {
-    error: string;
-}>;
+/**
+ * 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.
+ */
+export declare function overrideSpotColors(spot: ISpot, colors?: ISpotColors): ISpot;
 export declare function setUserId(): void;
-export declare function initDOMObserver(elementIds: string[], callback: (element: HTMLElement) => void): MutationObserver;

package/dist/types/types.d.ts

@@ -1,12 +1,12 @@
-export type { IInjectSpotElement, IInjectSpotElementConfig, IInjectSpotElementParams, IRmnCreateSpotElementConfig, ISpotColors, ISpotOverlay, } from 'modules/element';
+export type { IInjectSpotElement, IInjectSpotElementConfig, IInjectSpotElementParams, ISpotColors, ISpotOverlay, } from 'modules/element';
 export type { CarouselNavPositionType, ICarouselButtonOptions, ICarouselDotOptions, ICarouselOptions, } from 'modules/element/component/carousel';
-export type { ILifecycleState, ILSDisplayConfig, ILSDom, ILSIdentifier, ILSState, IRmnEventMap, IRmnSpotEvent, } from 'modules/event';
 export type { ISpots, RmnFilterType, RmnSpotType } from 'modules/selection';
 export { ISpot, ISpotEvent, ISpotSelectionParams } from 'modules/selection';
+export type { ILifecycleState, ILSDisplayConfig, ILSDom, ILSIdentifier, ILSState, IRmnEventMap, IRmnSpotEvent, } from 'modules/spot-manager';
 import type { RMN_ENV, RMN_EVENT } from 'enums';
 import type { IInjectSpotElementParams } from 'modules/element';
-import type { IRmnEventMap } from 'modules/event';
 import type { ISpot, ISpots, ISpotSelectionParams } from 'modules/selection';
+import type { IRmnEventMap } from 'modules/spot-manager';
 export interface IRmnClient {
     spotSelection(params: ISpotSelectionParams): Promise<ISpots | {
         error: string;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@liquidcommercedev/rmn-sdk",
   "description": "LiquidCommerce RMN SDK",
   "author": "LiquidCommerce Tech",
-  "version": "1.5.0-beta.32",
+  "version": "1.5.0-beta.33",
   "homepage": "https://docs.liquidcommerce.co/rmn-sdk",
   "main": "./dist/index.cjs",
   "module": "./dist/index.esm.js",
@@ -60,15 +60,16 @@
   ],
   "license": "",
   "dependencies": {
-    "axios": "^1.7.7",
+    "axios": "^1.7.9",
     "buffer": "^6.0.3",
-    "jose": "^5.9.6"
+    "jose": "^5.9.6",
+    "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.5.0",
-    "@commitlint/config-conventional": "^19.5.0",
+    "@commitlint/cli": "^19.6.0",
+    "@commitlint/config-conventional": "^19.6.0",
     "@eslint/eslintrc": "^3.2.0",
-    "@eslint/js": "^9.15.0",
+    "@eslint/js": "^9.16.0",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
@@ -82,28 +83,28 @@
     "@types/crypto-js": "^4.2.2",
     "@types/eslint__js": "^8.42.3",
     "@types/jest": "^29.5.14",
-    "@types/node": "^22.9.0",
-    "@typescript-eslint/eslint-plugin": "^8.15.0",
-    "@typescript-eslint/parser": "^8.15.0",
-    "@vitest/coverage-v8": "^2.1.5",
+    "@types/node": "^22.10.1",
+    "@typescript-eslint/eslint-plugin": "^8.18.0",
+    "@typescript-eslint/parser": "^8.18.0",
+    "@vitest/coverage-v8": "^2.1.8",
     "conventional-changelog-cli": "^5.0.0",
     "crypto-js": "^4.2.0",
-    "dotenv": "^16.4.5",
-    "eslint": "^9.15.0",
+    "dotenv": "^16.4.7",
+    "eslint": "^9.16.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.6.3",
+    "eslint-import-resolver-typescript": "^3.7.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-import-helpers": "^2.0.1",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-sonarjs": "^2.0.4",
-    "eslint-plugin-unicorn": "^56.0.0",
+    "eslint-plugin-unicorn": "^56.0.1",
     "events": "^3.3.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.2",
     "process": "^0.11.10",
-    "rollup": "^4.27.3",
+    "rollup": "^4.28.1",
     "rollup-plugin-livereload": "^2.0.5",
     "rollup-plugin-polyfill-node": "^0.13.0",
     "rollup-plugin-serve": "^1.1.1",
@@ -112,10 +113,10 @@
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
     "typedoc": "^0.26.11",
-    "typescript": "^5.6.3",
-    "typescript-eslint": "^8.15.0",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.18.0",
     "vite": "^5.4.11",
-    "vitest": "^2.1.5"
+    "vitest": "^2.1.8"
   },
   "engines": {
     "node": ">=20"