@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.cjs +198 -65
- package/dist/index.esm.js +199 -66
- package/dist/types/enums.d.ts +10 -0
- package/dist/types/modules/selection/selection.interface.d.ts +2 -1
- package/dist/types/modules/spot-template/rb-template.interface.d.ts +6 -0
- package/dist/types/modules/spot-template/reservebar/homepage-hero-full-image.template.d.ts +1 -0
- package/dist/types/modules/spot-template/reservebar/long-tout-tall.template.d.ts +1 -0
- package/package.json +1 -1
- package/umd/liquidcommerce-rmn-sdk.min.js +1 -1
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
|
-
|
17955
|
-
|
17956
|
-
|
17957
|
-
|
17958
|
-
|
17959
|
-
|
17960
|
-
|
17961
|
-
|
17962
|
-
|
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
|
-
|
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(
|
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(
|
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
|
-
|
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
|
-
|
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 };
|
package/dist/types/enums.d.ts
CHANGED
@@ -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.
|
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",
|