@liquidcommercedev/rmn-sdk 1.5.0-beta.36 → 1.5.0-beta.37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.esm.js CHANGED
@@ -81,6 +81,17 @@ var RMN_ENV;
81
81
  RMN_ENV["STAGING"] = "staging";
82
82
  RMN_ENV["PRODUCTION"] = "production";
83
83
  })(RMN_ENV || (RMN_ENV = {}));
84
+ var ENUM_TEXT_BLOCK_POSITION;
85
+ (function (ENUM_TEXT_BLOCK_POSITION) {
86
+ ENUM_TEXT_BLOCK_POSITION["LEFT"] = "left";
87
+ ENUM_TEXT_BLOCK_POSITION["RIGHT"] = "right";
88
+ ENUM_TEXT_BLOCK_POSITION["TOP_LEFT"] = "top-left";
89
+ ENUM_TEXT_BLOCK_POSITION["TOP_RIGHT"] = "top-right";
90
+ ENUM_TEXT_BLOCK_POSITION["BOTTOM_LEFT"] = "bottom-left";
91
+ ENUM_TEXT_BLOCK_POSITION["BOTTOM_RIGHT"] = "bottom-right";
92
+ ENUM_TEXT_BLOCK_POSITION["MIDDLE_LEFT"] = "middle-left";
93
+ ENUM_TEXT_BLOCK_POSITION["MIDDLE_RIGHT"] = "middle-right";
94
+ })(ENUM_TEXT_BLOCK_POSITION || (ENUM_TEXT_BLOCK_POSITION = {}));
84
95
 
85
96
  const REQUEST_CLOUD_PARTNER_SITE = 'X-Liquid-Partner-Site';
86
97
  const REQUEST_CLOUD_PROTECTED_KEY = 'X-Liquid-Protected';
@@ -17947,36 +17958,51 @@ class RbHomepageHeroFullImageSE extends BaseSpotComponent {
17947
17958
  constructor() {
17948
17959
  super();
17949
17960
  }
17961
+ getGradientDirection(position) {
17962
+ switch (position) {
17963
+ case ENUM_TEXT_BLOCK_POSITION.TOP_LEFT:
17964
+ case ENUM_TEXT_BLOCK_POSITION.TOP_RIGHT:
17965
+ return 'to bottom';
17966
+ case ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT:
17967
+ return 'to right';
17968
+ case ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT:
17969
+ return 'to left';
17970
+ case ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT:
17971
+ case ENUM_TEXT_BLOCK_POSITION.BOTTOM_RIGHT:
17972
+ return 'to top';
17973
+ default:
17974
+ return 'to top';
17975
+ }
17976
+ }
17950
17977
  template() {
17951
17978
  const prefix = this._config.prefix;
17952
- const { preHeader, header, description, ctaText } = this._data;
17979
+ const { preHeader, header, description, ctaText, textBlockPosition = ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT, } = this._data;
17953
17980
  return `
17954
- ${GFONT_PRECONNECT}
17955
- ${GFONT_SOURCE_SANS_3}
17956
- ${GFONT_CORMORANT}
17957
- <div class="${prefix}">
17958
- <div class="${prefix}__text">
17959
- ${preHeader ? `<h2 class="${prefix}__pre-header">${preHeader}</h2>` : ''}
17960
- ${header ? `<h2 class="${prefix}__header">${header}</h2>` : ''}
17961
- ${description ? `<p class="${prefix}__description">${description}</p>` : ''}
17962
- ${ctaText ? `<span class="${prefix}__cta-button">${ctaText}</span>` : ''}
17981
+ ${GFONT_PRECONNECT}
17982
+ ${GFONT_SOURCE_SANS_3}
17983
+ ${GFONT_CORMORANT}
17984
+ <div class="${prefix}">
17985
+ <div class="${prefix}__text ${prefix}__text-block--${textBlockPosition}">
17986
+ ${preHeader ? `<h2 class="${prefix}__pre-header">${preHeader}</h2>` : ''}
17987
+ ${header ? `<h2 class="${prefix}__header">${header}</h2>` : ''}
17988
+ ${description ? `<p class="${prefix}__description">${description}</p>` : ''}
17989
+ ${ctaText ? `<span class="${prefix}__cta-button">${ctaText}</span>` : ''}
17990
+ </div>
17963
17991
  </div>
17964
- </div>
17965
- `;
17992
+ `;
17966
17993
  }
17967
17994
  styles() {
17995
+ const { textBlockPosition = ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT } = this._data;
17996
+ const gradientDirection = this.getGradientDirection(textBlockPosition);
17968
17997
  const linearGradient = generateGradientColor(this._config.overlay, 'rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 40%');
17969
17998
  const { textColor = '#ffffff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, } = this._data;
17970
17999
  const prefix = this._config.prefix;
17971
18000
  return `
17972
18001
  .${prefix} {
17973
18002
  display: flex;
17974
- flex-direction: column;
17975
- justify-content: flex-end;
17976
- align-items: flex-start;
17977
18003
  width: 100%;
17978
18004
  height: 100%;
17979
- background-image: linear-gradient(to top, ${linearGradient}), url("${mobilePrimaryImage}");
18005
+ background-image: linear-gradient(${gradientDirection}, ${linearGradient}), url("${mobilePrimaryImage}");
17980
18006
  background-size: cover;
17981
18007
  background-repeat: no-repeat;
17982
18008
  background-position: center;
@@ -17984,6 +18010,7 @@ class RbHomepageHeroFullImageSE extends BaseSpotComponent {
17984
18010
  box-sizing: border-box;
17985
18011
  color: ${textColor};
17986
18012
  cursor: pointer;
18013
+ position: relative;
17987
18014
  }
17988
18015
 
17989
18016
  .${prefix}__text {
@@ -17994,6 +18021,45 @@ class RbHomepageHeroFullImageSE extends BaseSpotComponent {
17994
18021
  width: 100%;
17995
18022
  height: fit-content;
17996
18023
  gap: 8px;
18024
+ position: absolute;
18025
+ }
18026
+
18027
+ .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.TOP_LEFT} {
18028
+ top: 3%;
18029
+ left: 3%;
18030
+ }
18031
+
18032
+ .${prefix}text-block--${ENUM_TEXT_BLOCK_POSITION.TOP_RIGHT} {
18033
+ top: 3%;
18034
+ right: 3%;
18035
+ align-items: flex-end;
18036
+ text-align: right;
18037
+ }
18038
+
18039
+ .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT} {
18040
+ top: 50%;
18041
+ left: 3%;
18042
+ transform: translateY(-50%);
18043
+ }
18044
+
18045
+ .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT} {
18046
+ top: 50%;
18047
+ right: 3%;
18048
+ transform: translateY(-50%);
18049
+ align-items: flex-end;
18050
+ text-align: right;
18051
+ }
18052
+
18053
+ .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT} {
18054
+ bottom: 3%;
18055
+ left: 3%;
18056
+ }
18057
+
18058
+ .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.BOTTOM_RIGHT} {
18059
+ bottom: 3%;
18060
+ right: 3%;
18061
+ align-items: flex-end;
18062
+ text-align: right;
17997
18063
  }
17998
18064
 
17999
18065
  .${prefix}__pre-header {
@@ -18043,7 +18109,7 @@ class RbHomepageHeroFullImageSE extends BaseSpotComponent {
18043
18109
 
18044
18110
  @container (min-width: 640px) {
18045
18111
  .${prefix} {
18046
- background-image: linear-gradient(to top, ${linearGradient}), url("${primaryImage}");
18112
+ background-image: linear-gradient(${gradientDirection}, ${linearGradient}), url("${primaryImage}");
18047
18113
  }
18048
18114
 
18049
18115
  .${prefix}__text {
@@ -18052,22 +18118,6 @@ class RbHomepageHeroFullImageSE extends BaseSpotComponent {
18052
18118
  }
18053
18119
 
18054
18120
  @container (min-width: 768px) {
18055
- .${prefix}__primary-image {
18056
- width: 66.66666%;
18057
- height: 100%;
18058
- }
18059
-
18060
- .${prefix}__main {
18061
- flex-direction: column;
18062
- height: 100%;
18063
- width: 33.33333%;
18064
- }
18065
-
18066
- .${prefix}__secondary-image {
18067
- width: 100%;
18068
- height: 50%;
18069
- }
18070
-
18071
18121
  .${prefix}__description {
18072
18122
  font-size: 12px;
18073
18123
  }
@@ -18114,14 +18164,13 @@ class RbHomepageHeroThreeTileSE extends BaseSpotComponent {
18114
18164
  }
18115
18165
  template() {
18116
18166
  const prefix = this._config.prefix;
18117
- const { header, description, ctaText } = this._data;
18167
+ const { header, description, ctaText, textBlockPosition = ENUM_TEXT_BLOCK_POSITION.LEFT, } = this._data;
18118
18168
  return `
18119
18169
  ${GFONT_PRECONNECT}
18120
18170
  ${GFONT_SOURCE_SANS_3}
18121
18171
  ${GFONT_CORMORANT}
18122
18172
  <div class="${prefix}">
18123
- <div class="${prefix}__content">
18124
- <div class="${prefix}__primary-image"></div>
18173
+ <div class="${prefix}__content ${prefix}__text-block--${textBlockPosition}">
18125
18174
  <div class="${prefix}__main">
18126
18175
  <div class="${prefix}__secondary-image"></div>
18127
18176
  <div class="${prefix}__text">
@@ -18130,6 +18179,7 @@ class RbHomepageHeroThreeTileSE extends BaseSpotComponent {
18130
18179
  ${ctaText ? `<span class="${prefix}__cta-button">${ctaText}</span>` : ''}
18131
18180
  </div>
18132
18181
  </div>
18182
+ <div class="${prefix}__primary-image"></div>
18133
18183
  </div>
18134
18184
  </div>
18135
18185
  `;
@@ -18170,7 +18220,7 @@ class RbHomepageHeroThreeTileSE extends BaseSpotComponent {
18170
18220
  height: 40%;
18171
18221
  display: flex;
18172
18222
  flex-direction: row;
18173
- gap: 6px;
18223
+ gap: 6px;
18174
18224
  }
18175
18225
 
18176
18226
  .${prefix}__secondary-image {
@@ -18251,6 +18301,10 @@ class RbHomepageHeroThreeTileSE extends BaseSpotComponent {
18251
18301
  flex-direction: row;
18252
18302
  }
18253
18303
 
18304
+ .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.RIGHT} {
18305
+ flex-direction: row-reverse;
18306
+ }
18307
+
18254
18308
  .${prefix}__primary-image {
18255
18309
  width: 66.66666%;
18256
18310
  height: 100%;
@@ -18262,6 +18316,10 @@ class RbHomepageHeroThreeTileSE extends BaseSpotComponent {
18262
18316
  width: 33.33333%;
18263
18317
  }
18264
18318
 
18319
+ .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.RIGHT} .${prefix}__main {
18320
+ flex-direction: column;
18321
+ }
18322
+
18265
18323
  .${prefix}__secondary-image {
18266
18324
  width: 100%;
18267
18325
  height: 50%;
@@ -18271,12 +18329,15 @@ class RbHomepageHeroThreeTileSE extends BaseSpotComponent {
18271
18329
  width: 100%;
18272
18330
  height: 50%;
18273
18331
  }
18332
+
18274
18333
  .${prefix}__header {
18275
18334
  font-size: 22px;
18276
18335
  }
18336
+
18277
18337
  .${prefix}__description {
18278
18338
  font-size: 12px;
18279
18339
  }
18340
+
18280
18341
  .${prefix}__cta-button {
18281
18342
  font-size: 12px;
18282
18343
  }
@@ -18315,13 +18376,13 @@ class RbHomepageHeroTwoTileSE extends BaseSpotComponent {
18315
18376
  }
18316
18377
  template() {
18317
18378
  const prefix = this._config.prefix;
18318
- const { header, description, ctaText } = this._data;
18379
+ const { header, description, ctaText, textBlockPosition = ENUM_TEXT_BLOCK_POSITION.LEFT, } = this._data;
18319
18380
  return `
18320
18381
  ${GFONT_PRECONNECT}
18321
18382
  ${GFONT_SOURCE_SANS_3}
18322
18383
  ${GFONT_CORMORANT}
18323
18384
  <div class="${prefix}">
18324
- <div class="${prefix}__content">
18385
+ <div class="${prefix}__content ${prefix}__text-block--${textBlockPosition}">
18325
18386
  <div class="${prefix}__text">
18326
18387
  ${header ? `<h2 class="${prefix}__header">${header}</h2>` : ''}
18327
18388
  ${description ? `<p class="${prefix}__description">${description}</p>` : ''}
@@ -18426,20 +18487,29 @@ class RbHomepageHeroTwoTileSE extends BaseSpotComponent {
18426
18487
  .${prefix}__content {
18427
18488
  flex-direction: row;
18428
18489
  }
18490
+
18491
+ .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.RIGHT} {
18492
+ flex-direction: row-reverse;
18493
+ }
18494
+
18429
18495
  .${prefix}__image {
18430
18496
  width: 66.66666%;
18431
18497
  height: 100%;
18432
18498
  }
18499
+
18433
18500
  .${prefix}__text {
18434
18501
  width: 33.33333%;
18435
18502
  height: 100%;
18436
18503
  }
18504
+
18437
18505
  .${prefix}__header {
18438
18506
  font-size: 22px;
18439
18507
  }
18508
+
18440
18509
  .${prefix}__description {
18441
18510
  font-size: 12px;
18442
18511
  }
18512
+
18443
18513
  .${prefix}__cta-button {
18444
18514
  font-size: 12px;
18445
18515
  }
@@ -18453,7 +18523,7 @@ class RbHomepageHeroTwoTileSE extends BaseSpotComponent {
18453
18523
  font-size: 13px;
18454
18524
  }
18455
18525
  .${prefix}__cta-button {
18456
- font-size: 13px;
18526
+ font-size: 13px;
18457
18527
  }
18458
18528
  }
18459
18529
 
@@ -18517,13 +18587,13 @@ class RbLargeCategoryImageToutSE extends BaseSpotComponent {
18517
18587
  }
18518
18588
  template() {
18519
18589
  const prefix = this._config.prefix;
18520
- const { header, description, ctaText } = this._data;
18590
+ const { header, description, ctaText, textBlockPosition = ENUM_TEXT_BLOCK_POSITION.LEFT, } = this._data;
18521
18591
  return `
18522
18592
  ${GFONT_PRECONNECT}
18523
18593
  ${GFONT_SOURCE_SANS_3}
18524
18594
  ${GFONT_CORMORANT}
18525
18595
  <div class="${prefix}">
18526
- <div class="${prefix}__text">
18596
+ <div class="${prefix}__text ${prefix}__text-block--${textBlockPosition}">
18527
18597
  ${header ? `<h2 class="${prefix}__header">${header}</h2>` : ''}
18528
18598
  ${description ? `<p class="${prefix}__description">${description}</p>` : ''}
18529
18599
  ${ctaText ? `<span class="${prefix}__cta-button">${ctaText}</span>` : ''}
@@ -18550,6 +18620,7 @@ class RbLargeCategoryImageToutSE extends BaseSpotComponent {
18550
18620
  overflow: hidden;
18551
18621
  cursor: pointer;
18552
18622
  color: ${textColor};
18623
+ position: relative;
18553
18624
  }
18554
18625
 
18555
18626
  .${prefix}__text {
@@ -18559,6 +18630,22 @@ class RbLargeCategoryImageToutSE extends BaseSpotComponent {
18559
18630
  justify-content: center;
18560
18631
  align-items: flex-start;
18561
18632
  gap: 10px;
18633
+ position: absolute;
18634
+ bottom: 0;
18635
+ width: 100%;
18636
+ max-width: 50%;
18637
+ }
18638
+
18639
+ .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.LEFT} {
18640
+ left: 0;
18641
+ text-align: left;
18642
+ align-items: flex-start;
18643
+ }
18644
+
18645
+ .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.RIGHT} {
18646
+ right: 0;
18647
+ text-align: right;
18648
+ align-items: flex-end;
18562
18649
  }
18563
18650
 
18564
18651
  .${prefix}__header {
@@ -18819,15 +18906,31 @@ class RbLongToutTallSE extends BaseSpotComponent {
18819
18906
  constructor() {
18820
18907
  super();
18821
18908
  }
18909
+ getGradientDirection(position) {
18910
+ switch (position) {
18911
+ case ENUM_TEXT_BLOCK_POSITION.TOP_LEFT:
18912
+ case ENUM_TEXT_BLOCK_POSITION.TOP_RIGHT:
18913
+ return 'to bottom';
18914
+ case ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT:
18915
+ return 'to right';
18916
+ case ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT:
18917
+ return 'to left';
18918
+ case ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT:
18919
+ case ENUM_TEXT_BLOCK_POSITION.BOTTOM_RIGHT:
18920
+ return 'to top';
18921
+ default:
18922
+ return 'to top';
18923
+ }
18924
+ }
18822
18925
  template() {
18823
18926
  const prefix = this._config.prefix;
18824
- const { preHeader, header, description, ctaText } = this._data;
18927
+ const { preHeader, header, description, ctaText, textBlockPosition = ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT, } = this._data;
18825
18928
  return `
18826
18929
  ${GFONT_PRECONNECT}
18827
18930
  ${GFONT_SOURCE_SANS_3}
18828
18931
  ${GFONT_CORMORANT}
18829
18932
  <div class="${prefix}">
18830
- <div class="${prefix}__text">
18933
+ <div class="${prefix}__text ${prefix}__text-block--${textBlockPosition.toLowerCase().replace('_', '-')}">
18831
18934
  ${preHeader ? `<h2 class="${prefix}__pre-header">${preHeader}</h2>` : ''}
18832
18935
  ${header ? `<h2 class="${prefix}__header">${header}</h2>` : ''}
18833
18936
  ${description ? `<p class="${prefix}__description">${description}</p>` : ''}
@@ -18837,17 +18940,17 @@ class RbLongToutTallSE extends BaseSpotComponent {
18837
18940
  `;
18838
18941
  }
18839
18942
  styles() {
18943
+ const { textBlockPosition = ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT } = this._data;
18944
+ const gradientDirection = this.getGradientDirection(textBlockPosition);
18945
+ const linearGradient = generateGradientColor(this._config.overlay, 'rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 40%');
18840
18946
  const { textColor = '#ffffff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, } = this._data;
18841
18947
  const prefix = this._config.prefix;
18842
18948
  return `
18843
18949
  .${prefix} {
18844
18950
  display: flex;
18845
- flex-direction: column;
18846
- justify-content: space-around;
18847
- align-items: flex-start;
18848
18951
  width: 100%;
18849
18952
  height: 100%;
18850
- background-image: url("${mobilePrimaryImage}");
18953
+ background-image: linear-gradient(${gradientDirection}, ${linearGradient}), url("${mobilePrimaryImage}");
18851
18954
  background-size: cover;
18852
18955
  background-repeat: no-repeat;
18853
18956
  background-position: center;
@@ -18855,6 +18958,7 @@ class RbLongToutTallSE extends BaseSpotComponent {
18855
18958
  box-sizing: border-box;
18856
18959
  color: ${textColor};
18857
18960
  cursor: pointer;
18961
+ position: relative;
18858
18962
  }
18859
18963
 
18860
18964
  .${prefix}__text {
@@ -18865,6 +18969,51 @@ class RbLongToutTallSE extends BaseSpotComponent {
18865
18969
  width: 100%;
18866
18970
  height: fit-content;
18867
18971
  gap: 8px;
18972
+ position: absolute;
18973
+ }
18974
+
18975
+ .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.TOP_LEFT} {
18976
+ top: 3%;
18977
+ left: 3%;
18978
+ align-items: flex-start;
18979
+ text-align: left;
18980
+ }
18981
+
18982
+ .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.TOP_RIGHT} {
18983
+ top: 3%;
18984
+ right: 3%;
18985
+ align-items: flex-end;
18986
+ text-align: right;
18987
+ }
18988
+
18989
+ .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT} {
18990
+ top: 50%;
18991
+ left: 3%;
18992
+ transform: translateY(-50%);
18993
+ align-items: flex-start;
18994
+ text-align: left;
18995
+ }
18996
+
18997
+ .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT} {
18998
+ top: 50%;
18999
+ right: 3%;
19000
+ transform: translateY(-50%);
19001
+ align-items: flex-end;
19002
+ text-align: right;
19003
+ }
19004
+
19005
+ .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT} {
19006
+ bottom: 3%;
19007
+ left: 3%;
19008
+ align-items: flex-start;
19009
+ text-align: left;
19010
+ }
19011
+
19012
+ .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.BOTTOM_RIGHT} {
19013
+ bottom: 3%;
19014
+ right: 3%;
19015
+ align-items: flex-end;
19016
+ text-align: right;
18868
19017
  }
18869
19018
 
18870
19019
  .${prefix}__pre-header {
@@ -18914,7 +19063,7 @@ class RbLongToutTallSE extends BaseSpotComponent {
18914
19063
 
18915
19064
  @container (min-width: 640px) {
18916
19065
  .${prefix} {
18917
- background-image: url("${primaryImage}");
19066
+ background-image: linear-gradient(${gradientDirection}, ${linearGradient}), url("${primaryImage}");
18918
19067
  }
18919
19068
 
18920
19069
  .${prefix}__text {
@@ -18923,22 +19072,6 @@ class RbLongToutTallSE extends BaseSpotComponent {
18923
19072
  }
18924
19073
 
18925
19074
  @container (min-width: 768px) {
18926
- .${prefix}__primary-image {
18927
- width: 66.66666%;
18928
- height: 100%;
18929
- }
18930
-
18931
- .${prefix}__main {
18932
- flex-direction: column;
18933
- height: 100%;
18934
- width: 33.33333%;
18935
- }
18936
-
18937
- .${prefix}__secondary-image {
18938
- width: 100%;
18939
- height: 50%;
18940
- }
18941
-
18942
19075
  .${prefix}__description {
18943
19076
  font-size: 12px;
18944
19077
  }
@@ -21564,4 +21697,4 @@ function RmnEventManager() {
21564
21697
  };
21565
21698
  }
21566
21699
 
21567
- export { BrowserRmnClient, RMN_ENV, RMN_EVENT, RMN_FILTER_PROPERTIES, RMN_SPOT_EVENT, RMN_SPOT_TYPE, RmnClient, RmnEventManager, ServerRmnClient };
21700
+ export { BrowserRmnClient, ENUM_TEXT_BLOCK_POSITION, RMN_ENV, RMN_EVENT, RMN_FILTER_PROPERTIES, RMN_SPOT_EVENT, RMN_SPOT_TYPE, RmnClient, RmnEventManager, ServerRmnClient };
@@ -74,3 +74,13 @@ export declare enum RMN_ENV {
74
74
  STAGING = "staging",
75
75
  PRODUCTION = "production"
76
76
  }
77
+ export declare enum ENUM_TEXT_BLOCK_POSITION {
78
+ LEFT = "left",
79
+ RIGHT = "right",
80
+ TOP_LEFT = "top-left",
81
+ TOP_RIGHT = "top-right",
82
+ BOTTOM_LEFT = "bottom-left",
83
+ BOTTOM_RIGHT = "bottom-right",
84
+ MIDDLE_LEFT = "middle-left",
85
+ MIDDLE_RIGHT = "middle-right"
86
+ }
@@ -1,4 +1,4 @@
1
- import type { RMN_SPOT_EVENT, RMN_SPOT_TYPE } from 'enums';
1
+ import type { ENUM_TEXT_BLOCK_POSITION, RMN_SPOT_EVENT, RMN_SPOT_TYPE } from 'enums';
2
2
  import type { PlacementIdType, SpotVariantType } from 'modules/selection';
3
3
  import type { RmnFilterType, RmnSpotType } from 'types';
4
4
  export interface ISpotSelectionParams {
@@ -27,6 +27,7 @@ export interface ISpot {
27
27
  header?: string;
28
28
  description?: string;
29
29
  ctaText?: string;
30
+ textBlockPosition?: ENUM_TEXT_BLOCK_POSITION;
30
31
  textColor?: string;
31
32
  backgroundColor?: string;
32
33
  ctaTextColor?: string;
@@ -1,3 +1,4 @@
1
+ import type { ENUM_TEXT_BLOCK_POSITION } from 'enums';
1
2
  import type { ISpotTemplateBaseData } from './spot-template.interface';
2
3
  export interface ICollectionBannerWithoutTextBlockRbSpot extends ISpotTemplateBaseData {
3
4
  primaryImage: string;
@@ -13,6 +14,7 @@ export interface IHomepageHeroFullImageRbSpot extends ISpotTemplateBaseData {
13
14
  ctaBorderColor: string;
14
15
  primaryImage: string;
15
16
  mobilePrimaryImage?: string;
17
+ 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;
16
18
  }
17
19
  export interface IHomepageHeroThreeTileRbSpot extends ISpotTemplateBaseData {
18
20
  header: string;
@@ -25,6 +27,7 @@ export interface IHomepageHeroThreeTileRbSpot extends ISpotTemplateBaseData {
25
27
  mobilePrimaryImage?: string;
26
28
  secondaryImage: string;
27
29
  mobileSecondaryImage?: string;
30
+ textBlockPosition?: ENUM_TEXT_BLOCK_POSITION.LEFT | ENUM_TEXT_BLOCK_POSITION.RIGHT;
28
31
  }
29
32
  export interface IHomepageHeroTwoTileRbSpot extends ISpotTemplateBaseData {
30
33
  header: string;
@@ -35,6 +38,7 @@ export interface IHomepageHeroTwoTileRbSpot extends ISpotTemplateBaseData {
35
38
  ctaTextColor: string;
36
39
  primaryImage: string;
37
40
  mobilePrimaryImage?: string;
41
+ textBlockPosition?: ENUM_TEXT_BLOCK_POSITION.LEFT | ENUM_TEXT_BLOCK_POSITION.RIGHT;
38
42
  }
39
43
  export interface IInTextRbSpot extends ISpotTemplateBaseData {
40
44
  header: string;
@@ -50,6 +54,7 @@ export interface ILargeCategoryImageToutRbSpot extends ISpotTemplateBaseData {
50
54
  ctaBorderColor: string;
51
55
  primaryImage: string;
52
56
  mobilePrimaryImage?: string;
57
+ textBlockPosition?: ENUM_TEXT_BLOCK_POSITION.LEFT | ENUM_TEXT_BLOCK_POSITION.RIGHT;
53
58
  }
54
59
  export interface INavigationBannerRbSpot extends ISpotTemplateBaseData {
55
60
  header: string;
@@ -91,6 +96,7 @@ export interface ILongToutTallRbSpot extends ISpotTemplateBaseData {
91
96
  ctaBorderColor: string;
92
97
  primaryImage: string;
93
98
  mobilePrimaryImage?: string;
99
+ 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;
94
100
  }
95
101
  export interface IVideoPlayerRbSpot extends ISpotTemplateBaseData {
96
102
  video: {
@@ -2,6 +2,7 @@ import { BaseSpotComponent } from 'modules/element/component/spot';
2
2
  import type { IHomepageHeroFullImageRbSpot } from '../rb-template.interface';
3
3
  export declare class RbHomepageHeroFullImageSE extends BaseSpotComponent<IHomepageHeroFullImageRbSpot> {
4
4
  constructor();
5
+ private getGradientDirection;
5
6
  protected template(): string;
6
7
  protected styles(): string;
7
8
  }
@@ -2,6 +2,7 @@ import { BaseSpotComponent } from 'modules/element/component/spot';
2
2
  import type { ILongToutTallRbSpot } from '../rb-template.interface';
3
3
  export declare class RbLongToutTallSE extends BaseSpotComponent<ILongToutTallRbSpot> {
4
4
  constructor();
5
+ private getGradientDirection;
5
6
  protected template(): string;
6
7
  protected styles(): string;
7
8
  }
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@liquidcommercedev/rmn-sdk",
3
3
  "description": "LiquidCommerce RMN SDK",
4
4
  "author": "LiquidCommerce Tech",
5
- "version": "1.5.0-beta.36",
5
+ "version": "1.5.0-beta.37",
6
6
  "homepage": "https://docs.liquidcommerce.co/rmn-sdk",
7
7
  "main": "./dist/index.cjs",
8
8
  "module": "./dist/index.esm.js",