@liquidcommercedev/rmn-sdk 1.5.0-beta.40 → 1.5.0-beta.42

package/dist/types/enums.d.ts

@@ -78,6 +78,9 @@ export declare enum RMN_ENV {
 export declare enum ENUM_TEXT_BLOCK_POSITION {
     LEFT = "left",
     RIGHT = "right",
+    TOP = "top",
+    BOTTOM = "bottom",
+    MIDDLE = "middle",
     TOP_LEFT = "top-left",
     TOP_RIGHT = "top-right",
     BOTTOM_LEFT = "bottom-left",

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

@@ -4,6 +4,8 @@ declare const BaseElement: typeof HTMLElement;
 export declare abstract class BaseSpotComponent<TData extends ISpotTemplateBaseData = ISpotTemplateBaseData, TConfig extends ICreateSpotConfig = ICreateSpotConfig> extends BaseElement {
     private initialized;
     private dataInitialized;
+    protected reRenderOnDeviceChange: boolean;
+    protected _isMobileDevice: boolean;
     protected readonly _data: TData;
     protected readonly _config: TConfig;
     protected _container: HTMLElement | ShadowRoot;
@@ -11,10 +13,12 @@ export declare abstract class BaseSpotComponent<TData extends ISpotTemplateBaseD
     initializeData(data: TData, config: TConfig): void;
     private render;
     private baseStyles;
+    private setupDeviceDetection;
     protected abstract template(): HTMLElement | string;
     protected abstract styles(): string;
     protected connected?(): void;
     protected disconnected?(): void;
+    protected onDeviceChange?(isMobile: boolean): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
 }

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

@@ -2,7 +2,7 @@ import type { RMN_FILTER_PROPERTIES, RMN_SPOT_TYPE } from 'enums';
 import type { ICarouselOptions, ICreateCarouselElementParams } from 'modules/element/component/carousel';
 import type { ICreateSkeletonElementParams } from 'modules/element/component/skeleton';
 import type { ICreateSpotElementParams } from 'modules/element/component/spot';
-import type { RmnFilterType } from 'modules/selection';
+import type { ISpots, RmnFilterType } from 'modules/selection';
 export interface ISpotColors {
     textColor?: string;
     backgroundColor?: string;
@@ -44,6 +44,11 @@ export interface IInjectSpotElementParams {
     inject: IInjectSpotElement[];
     config?: IInjectSpotElementConfig;
     filter?: Partial<RmnFilterType>;
+    /**
+     * By using this object, the sdk service will not fetch the spots data from the API.
+     * Instead, it will use the provided spots data to render the spot elements.
+     */
+    customSpots?: ISpots;
 }
 export interface IElementService {
     createSpotElement(params: ICreateSpotElementParams): HTMLElement | null;

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

@@ -27,7 +27,12 @@ export interface ISpot {
     header?: string;
     description?: string;
     ctaText?: string;
+    mobilePreHeader?: string;
+    mobileHeader?: string;
+    mobileDescription?: string;
+    mobileCtaText?: string;
     textBlockPosition?: ENUM_TEXT_BLOCK_POSITION;
+    mobileTextBlockPosition?: ENUM_TEXT_BLOCK_POSITION;
     textColor?: string;
     backgroundColor?: string;
     ctaTextColor?: string;
@@ -36,12 +41,15 @@ export interface ISpot {
     secondaryImage?: string;
     mobilePrimaryImage?: string;
     mobileSecondaryImage?: string;
+    enableMobileTexts?: boolean;
     productIds?: Array<string | number>;
     video?: {
         url?: string;
         poster?: string;
         posterTitle?: string;
         posterDescription?: string;
+        mobilePosterTitle?: string;
+        mobilePosterDescription?: string;
         autoplay?: boolean;
         mute?: boolean;
         loop?: boolean;

package/dist/types/modules/spot-template/rb-template.interface.d.ts

@@ -5,98 +5,127 @@ export interface ICollectionBannerWithoutTextBlockRbSpot extends ISpotTemplateBa
     mobilePrimaryImage?: string;
 }
 export interface IHomepageHeroFullImageRbSpot extends ISpotTemplateBaseData {
-    preHeader: string;
-    header: string;
-    description: string;
-    ctaText: string;
-    textColor: string;
-    ctaTextColor: string;
-    ctaBorderColor: string;
+    preHeader?: string;
+    header?: string;
+    description?: string;
+    ctaText?: string;
+    mobilePreHeader?: string;
+    mobileHeader?: string;
+    mobileDescription?: string;
+    mobileCtaText?: string;
+    textColor?: string;
+    ctaTextColor?: string;
+    ctaBorderColor?: string;
     primaryImage: string;
     mobilePrimaryImage?: string;
     textBlockPosition?: ENUM_TEXT_BLOCK_POSITION.TOP_LEFT | ENUM_TEXT_BLOCK_POSITION.TOP_RIGHT | ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT | ENUM_TEXT_BLOCK_POSITION.BOTTOM_RIGHT | ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT | ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT;
+    mobileTextBlockPosition?: ENUM_TEXT_BLOCK_POSITION.TOP_LEFT | ENUM_TEXT_BLOCK_POSITION.TOP_RIGHT | ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT | ENUM_TEXT_BLOCK_POSITION.BOTTOM_RIGHT | ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT | ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT;
 }
 export interface IHomepageHeroThreeTileRbSpot extends ISpotTemplateBaseData {
-    header: string;
-    description: string;
-    ctaText: string;
-    textColor: string;
-    backgroundColor: string;
-    ctaTextColor: string;
+    header?: string;
+    description?: string;
+    ctaText?: string;
+    mobileHeader?: string;
+    mobileDescription?: string;
+    mobileCtaText?: string;
+    textColor?: string;
+    backgroundColor?: string;
+    ctaTextColor?: string;
     primaryImage: string;
     mobilePrimaryImage?: string;
     secondaryImage: string;
     mobileSecondaryImage?: string;
     textBlockPosition?: ENUM_TEXT_BLOCK_POSITION.LEFT | ENUM_TEXT_BLOCK_POSITION.RIGHT;
+    mobileTextBlockPosition?: ENUM_TEXT_BLOCK_POSITION.LEFT | ENUM_TEXT_BLOCK_POSITION.RIGHT;
 }
 export interface IHomepageHeroTwoTileRbSpot extends ISpotTemplateBaseData {
-    header: string;
-    description: string;
-    ctaText: string;
-    textColor: string;
-    backgroundColor: string;
-    ctaTextColor: string;
+    header?: string;
+    description?: string;
+    ctaText?: string;
+    mobileHeader?: string;
+    mobileDescription?: string;
+    mobileCtaText?: string;
+    textColor?: string;
+    backgroundColor?: string;
+    ctaTextColor?: string;
     primaryImage: string;
     mobilePrimaryImage?: string;
     textBlockPosition?: ENUM_TEXT_BLOCK_POSITION.LEFT | ENUM_TEXT_BLOCK_POSITION.RIGHT;
+    mobileTextBlockPosition?: ENUM_TEXT_BLOCK_POSITION.TOP | ENUM_TEXT_BLOCK_POSITION.BOTTOM;
 }
 export interface IInTextRbSpot extends ISpotTemplateBaseData {
     header: string;
-    textColor: string;
-    backgroundColor: string;
+    mobileHeader?: string;
+    textColor?: string;
+    backgroundColor?: string;
 }
 export interface ILargeCategoryImageToutRbSpot extends ISpotTemplateBaseData {
-    header: string;
-    description: string;
-    ctaText: string;
-    textColor: string;
-    ctaTextColor: string;
-    ctaBorderColor: string;
+    header?: string;
+    description?: string;
+    ctaText?: string;
+    mobileHeader?: string;
+    mobileDescription?: string;
+    mobileCtaText?: string;
+    textColor?: string;
+    ctaTextColor?: string;
+    ctaBorderColor?: string;
     primaryImage: string;
     mobilePrimaryImage?: string;
     textBlockPosition?: ENUM_TEXT_BLOCK_POSITION.LEFT | ENUM_TEXT_BLOCK_POSITION.RIGHT;
 }
 export interface INavigationBannerRbSpot extends ISpotTemplateBaseData {
-    header: string;
-    textColor: string;
+    header?: string;
+    mobileHeader?: string;
+    textColor?: string;
     primaryImage: string;
     mobilePrimaryImage?: string;
 }
 export interface ISmallCategoryImageToutRbSpot extends ISpotTemplateBaseData {
-    header: string;
-    textColor: string;
+    header?: string;
+    mobileHeader?: string;
+    textColor?: string;
     primaryImage: string;
     mobilePrimaryImage?: string;
 }
 export interface ISmallDiscoverToutRbSpot extends ISpotTemplateBaseData {
-    header: string;
-    textColor: string;
-    backgroundColor: string;
+    header?: string;
+    mobileHeader?: string;
+    textColor?: string;
+    backgroundColor?: string;
     primaryImage: string;
     mobilePrimaryImage?: string;
 }
 export interface ILongToutShortRbSpot extends ISpotTemplateBaseData {
-    preHeader: string;
-    header: string;
-    description: string;
-    ctaText: string;
-    textColor: string;
-    ctaTextColor: string;
-    ctaBorderColor: string;
+    preHeader?: string;
+    header?: string;
+    description?: string;
+    ctaText?: string;
+    mobilePreHeader?: string;
+    mobileHeader?: string;
+    mobileDescription?: string;
+    mobileCtaText?: string;
+    textColor?: string;
+    ctaTextColor?: string;
+    ctaBorderColor?: string;
     primaryImage: string;
     mobilePrimaryImage?: string;
 }
 export interface ILongToutTallRbSpot extends ISpotTemplateBaseData {
-    preHeader: string;
-    header: string;
-    description: string;
-    ctaText: string;
-    textColor: string;
-    ctaTextColor: string;
-    ctaBorderColor: string;
+    preHeader?: string;
+    header?: string;
+    description?: string;
+    ctaText?: string;
+    mobilePreHeader?: string;
+    mobileHeader?: string;
+    mobileDescription?: string;
+    mobileCtaText?: string;
+    textColor?: string;
+    ctaTextColor?: string;
+    ctaBorderColor?: string;
     primaryImage: string;
     mobilePrimaryImage?: string;
     textBlockPosition?: ENUM_TEXT_BLOCK_POSITION.TOP_LEFT | ENUM_TEXT_BLOCK_POSITION.TOP_RIGHT | ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT | ENUM_TEXT_BLOCK_POSITION.BOTTOM_RIGHT | ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT | ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT;
+    mobileTextBlockPosition?: ENUM_TEXT_BLOCK_POSITION.TOP_LEFT | ENUM_TEXT_BLOCK_POSITION.TOP_RIGHT | ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT | ENUM_TEXT_BLOCK_POSITION.BOTTOM_RIGHT | ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT | ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT;
 }
 export interface IVideoPlayerRbSpot extends ISpotTemplateBaseData {
     video: {
@@ -104,6 +133,8 @@ export interface IVideoPlayerRbSpot extends ISpotTemplateBaseData {
         poster?: string;
         posterTitle?: string;
         posterDescription?: string;
+        mobilePosterTitle?: string;
+        mobilePosterDescription?: string;
         autoplay?: boolean;
         mute?: boolean;
         loop?: boolean;

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

@@ -1,8 +1,10 @@
 import { BaseSpotComponent } from 'modules/element/component/spot';
 import type { IHomepageHeroFullImageRbSpot } from '../rb-template.interface';
 export declare class RbHomepageHeroFullImageSE extends BaseSpotComponent<IHomepageHeroFullImageRbSpot> {
+    protected reRenderOnDeviceChange: boolean;
     constructor();
     private getGradientDirection;
     protected template(): string;
     protected styles(): string;
+    private get hasContent();
 }

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

@@ -1,7 +1,9 @@
 import { BaseSpotComponent } from 'modules/element/component/spot';
 import type { IHomepageHeroThreeTileRbSpot } from '../rb-template.interface';
 export declare class RbHomepageHeroThreeTileSE extends BaseSpotComponent<IHomepageHeroThreeTileRbSpot> {
+    protected reRenderOnDeviceChange: boolean;
     constructor();
     protected template(): string;
     protected styles(): string;
+    private get hasContent();
 }

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

@@ -1,7 +1,9 @@
 import { BaseSpotComponent } from 'modules/element/component/spot';
 import type { IHomepageHeroTwoTileRbSpot } from '../rb-template.interface';
 export declare class RbHomepageHeroTwoTileSE extends BaseSpotComponent<IHomepageHeroTwoTileRbSpot> {
+    protected reRenderOnDeviceChange: boolean;
     constructor();
     protected template(): string;
     protected styles(): string;
+    private get hasContent();
 }

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

@@ -1,7 +1,9 @@
 import { BaseSpotComponent } from 'modules/element/component/spot';
 import type { ILargeCategoryImageToutRbSpot } from '../rb-template.interface';
 export declare class RbLargeCategoryImageToutSE extends BaseSpotComponent<ILargeCategoryImageToutRbSpot> {
+    protected reRenderOnDeviceChange: boolean;
     constructor();
     protected template(): string;
     protected styles(): string;
+    private get hasContent();
 }

package/dist/types/modules/spot-template/reservebar/long-tout-short.template.d.ts

@@ -1,7 +1,9 @@
 import { BaseSpotComponent } from 'modules/element/component/spot';
 import type { ILongToutShortRbSpot } from '../rb-template.interface';
 export declare class RbLongToutShortSE extends BaseSpotComponent<ILongToutShortRbSpot> {
+    protected reRenderOnDeviceChange: boolean;
     constructor();
     protected template(): string;
     protected styles(): string;
+    private get hasContent();
 }

package/dist/types/modules/spot-template/reservebar/long-tout-tall.template.d.ts

@@ -1,8 +1,10 @@
 import { BaseSpotComponent } from 'modules/element/component/spot';
 import type { ILongToutTallRbSpot } from '../rb-template.interface';
 export declare class RbLongToutTallSE extends BaseSpotComponent<ILongToutTallRbSpot> {
+    protected reRenderOnDeviceChange: boolean;
     constructor();
     private getGradientDirection;
     protected template(): string;
     protected styles(): string;
+    private get hasContent();
 }

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

@@ -1,7 +1,9 @@
 import { BaseSpotComponent } from 'modules/element/component/spot';
 import type { INavigationBannerRbSpot } from '../rb-template.interface';
 export declare class RbNavigationBannerSE extends BaseSpotComponent<INavigationBannerRbSpot> {
+    protected reRenderOnDeviceChange: boolean;
     constructor();
     protected template(): string;
     protected styles(): string;
+    private get hasContent();
 }

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

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

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

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

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

@@ -1,3 +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 FONTS: {
+    readonly preconnect: "\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n";
+    readonly sourceSans: "\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";
+    readonly 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

@@ -10,4 +10,5 @@ export interface ISpotTemplateBaseData {
     variant: SpotVariantType;
     width: number;
     height: number;
+    enableMobileTexts?: boolean;
 }

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

@@ -1,3 +1,5 @@
 import type { ISpotOverlay } from 'types';
 export declare function convertHexToRgba(hex: string, opacity?: number): string;
 export declare function generateGradientColor(overlay?: ISpotOverlay, fallback?: string): string;
+export declare function importFonts(...fonts: Array<'sourceSans' | 'cormorant'>): string;
+export declare function renderElement(tag: string, className: string, content?: string): string;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@liquidcommercedev/rmn-sdk",
   "description": "LiquidCommerce RMN SDK",
   "author": "LiquidCommerce Tech",
-  "version": "1.5.0-beta.40",
+  "version": "1.5.0-beta.42",
   "homepage": "https://docs.liquidcommerce.co/rmn-sdk",
   "main": "./dist/index.cjs",
   "module": "./dist/index.esm.js",
@@ -41,6 +41,8 @@
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "lint": "eslint \"src/**/*.ts\"",
     "format": "prettier --write \"src/**/*.ts\"",
+    "clean": "rm -rf dist",
+    "clean:hard": "rm -rf dist node_modules && pnpm install",
     "docs": "typedoc --out docs src",
     "prepublishOnly": "pnpm run build"
   },
@@ -65,7 +67,7 @@
     "@commitlint/cli": "^19.6.1",
     "@commitlint/config-conventional": "^19.6.0",
     "@eslint/eslintrc": "^3.2.0",
-    "@eslint/js": "^9.17.0",
+    "@eslint/js": "^9.19.0",
     "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.1",
@@ -78,32 +80,32 @@
     "@types/core-js": "^2.5.8",
     "@types/crypto-js": "^4.2.2",
     "@types/eslint__js": "^8.42.3",
-    "@types/node": "^22.10.2",
-    "@typescript-eslint/eslint-plugin": "^8.18.1",
-    "@typescript-eslint/parser": "^8.18.1",
+    "@types/node": "^22.10.10",
+    "@typescript-eslint/eslint-plugin": "^8.21.0",
+    "@typescript-eslint/parser": "^8.21.0",
     "@vitest/coverage-v8": "^2.1.8",
     "conventional-changelog-cli": "^5.0.0",
     "crypto-js": "^4.2.0",
-    "eslint": "^9.17.0",
+    "eslint": "^9.19.0",
     "eslint-config-prettier": "^9.1.0",
     "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-prettier": "^5.2.3",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-sonarjs": "^2.0.4",
     "eslint-plugin-unicorn": "^56.0.1",
     "events": "^3.3.0",
     "prettier": "^3.4.2",
     "process": "^0.11.10",
-    "rollup": "^4.28.1",
+    "rollup": "^4.32.0",
     "rollup-plugin-polyfill-node": "^0.13.0",
     "rollup-plugin-typescript2": "^0.36.0",
-    "semantic-release": "^24.2.0",
+    "semantic-release": "^24.2.1",
     "ts-node": "^10.9.2",
     "typedoc": "^0.26.11",
-    "typescript": "^5.7.2",
-    "typescript-eslint": "^8.18.1"
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.21.0"
   },
   "engines": {
     "node": ">=20"