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

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.
Files changed (7) hide show
  1. package/dist/index.cjs +420 -293
  2. package/dist/index.esm.js +420 -293
  3. package/dist/types/enums.d.ts +3 -0
  4. package/dist/types/modules/selection/selection.interface.d.ts +1 -0
  5. package/dist/types/modules/spot-template/rb-template.interface.d.ts +4 -0
  6. package/package.json +1 -1
  7. package/umd/liquidcommerce-rmn-sdk.min.js +1 -1
package/dist/index.esm.js CHANGED
@@ -86,6 +86,9 @@ var ENUM_TEXT_BLOCK_POSITION;
86
86
  (function (ENUM_TEXT_BLOCK_POSITION) {
87
87
  ENUM_TEXT_BLOCK_POSITION["LEFT"] = "left";
88
88
  ENUM_TEXT_BLOCK_POSITION["RIGHT"] = "right";
89
+ ENUM_TEXT_BLOCK_POSITION["TOP"] = "top";
90
+ ENUM_TEXT_BLOCK_POSITION["BOTTOM"] = "bottom";
91
+ ENUM_TEXT_BLOCK_POSITION["MIDDLE"] = "middle";
89
92
  ENUM_TEXT_BLOCK_POSITION["TOP_LEFT"] = "top-left";
90
93
  ENUM_TEXT_BLOCK_POSITION["TOP_RIGHT"] = "top-right";
91
94
  ENUM_TEXT_BLOCK_POSITION["BOTTOM_LEFT"] = "bottom-left";
@@ -18019,13 +18022,13 @@ class RbHomepageHeroFullImageSE extends BaseSpotComponent {
18019
18022
  }
18020
18023
  template() {
18021
18024
  const prefix = this._config.prefix;
18022
- const { preHeader, header, description, ctaText, textBlockPosition = ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT, } = this._data;
18025
+ const { preHeader, header, description, ctaText, textBlockPosition = ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT, mobileTextBlockPosition = textBlockPosition, } = this._data;
18023
18026
  return `
18024
18027
  ${GFONT_PRECONNECT}
18025
18028
  ${GFONT_SOURCE_SANS_3}
18026
18029
  ${GFONT_CORMORANT}
18027
18030
  <div class="${prefix}">
18028
- <div class="${prefix}__text ${prefix}__text-block--${textBlockPosition}">
18031
+ <div class="${prefix}__text ${prefix}__text-block--${textBlockPosition} ${prefix}__text-block-mobile--${mobileTextBlockPosition}">
18029
18032
  ${preHeader ? `<h2 class="${prefix}__pre-header">${preHeader}</h2>` : ''}
18030
18033
  ${header ? `<h2 class="${prefix}__header">${header}</h2>` : ''}
18031
18034
  ${description ? `<p class="${prefix}__description">${description}</p>` : ''}
@@ -18035,8 +18038,9 @@ class RbHomepageHeroFullImageSE extends BaseSpotComponent {
18035
18038
  `;
18036
18039
  }
18037
18040
  styles() {
18038
- const { textBlockPosition = ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT } = this._data;
18039
- const gradientDirection = this.getGradientDirection(textBlockPosition);
18041
+ const { textBlockPosition = ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT, mobileTextBlockPosition = textBlockPosition, } = this._data;
18042
+ const desktopGradientDirection = this.getGradientDirection(textBlockPosition);
18043
+ const mobileGradientDirection = this.getGradientDirection(mobileTextBlockPosition);
18040
18044
  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%');
18041
18045
  const { textColor = '#ffffff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, } = this._data;
18042
18046
  const prefix = this._config.prefix;
@@ -18045,7 +18049,7 @@ class RbHomepageHeroFullImageSE extends BaseSpotComponent {
18045
18049
  display: flex;
18046
18050
  width: 100%;
18047
18051
  height: 100%;
18048
- background-image: linear-gradient(${gradientDirection}, ${linearGradient}), url("${mobilePrimaryImage}");
18052
+ background-image: linear-gradient(${mobileGradientDirection}, ${linearGradient}), url("${mobilePrimaryImage}");
18049
18053
  background-size: cover;
18050
18054
  background-repeat: no-repeat;
18051
18055
  background-position: center;
@@ -18067,42 +18071,50 @@ class RbHomepageHeroFullImageSE extends BaseSpotComponent {
18067
18071
  position: absolute;
18068
18072
  }
18069
18073
 
18070
- .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.TOP_LEFT} {
18071
- top: 3%;
18072
- left: 3%;
18073
- }
18074
+ @container (max-width: 639px) {
18075
+ .${prefix}__text-block-mobile--${ENUM_TEXT_BLOCK_POSITION.TOP_LEFT} {
18076
+ top: 3%;
18077
+ left: 3%;
18078
+ align-items: flex-start;
18079
+ text-align: left;
18080
+ }
18074
18081
 
18075
- .${prefix}text-block--${ENUM_TEXT_BLOCK_POSITION.TOP_RIGHT} {
18076
- top: 3%;
18077
- right: 3%;
18078
- align-items: flex-end;
18079
- text-align: right;
18080
- }
18082
+ .${prefix}__text-block-mobile--${ENUM_TEXT_BLOCK_POSITION.TOP_RIGHT} {
18083
+ top: 3%;
18084
+ right: 3%;
18085
+ align-items: flex-end;
18086
+ text-align: right;
18087
+ }
18081
18088
 
18082
- .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT} {
18083
- top: 50%;
18084
- left: 3%;
18085
- transform: translateY(-50%);
18086
- }
18089
+ .${prefix}__text-block-mobile--${ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT} {
18090
+ top: 50%;
18091
+ left: 3%;
18092
+ transform: translateY(-50%);
18093
+ align-items: flex-start;
18094
+ text-align: left;
18095
+ }
18087
18096
 
18088
- .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT} {
18089
- top: 50%;
18090
- right: 3%;
18091
- transform: translateY(-50%);
18092
- align-items: flex-end;
18093
- text-align: right;
18094
- }
18097
+ .${prefix}__text-block-mobile--${ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT} {
18098
+ top: 50%;
18099
+ right: 3%;
18100
+ transform: translateY(-50%);
18101
+ align-items: flex-end;
18102
+ text-align: right;
18103
+ }
18095
18104
 
18096
- .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT} {
18097
- bottom: 3%;
18098
- left: 3%;
18099
- }
18105
+ .${prefix}__text-block-mobile--${ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT} {
18106
+ bottom: 3%;
18107
+ left: 3%;
18108
+ align-items: flex-start;
18109
+ text-align: left;
18110
+ }
18100
18111
 
18101
- .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.BOTTOM_RIGHT} {
18102
- bottom: 3%;
18103
- right: 3%;
18104
- align-items: flex-end;
18105
- text-align: right;
18112
+ .${prefix}__text-block-mobile--${ENUM_TEXT_BLOCK_POSITION.BOTTOM_RIGHT} {
18113
+ bottom: 3%;
18114
+ right: 3%;
18115
+ align-items: flex-end;
18116
+ text-align: right;
18117
+ }
18106
18118
  }
18107
18119
 
18108
18120
  .${prefix}__pre-header {
@@ -18152,12 +18164,56 @@ class RbHomepageHeroFullImageSE extends BaseSpotComponent {
18152
18164
 
18153
18165
  @container (min-width: 640px) {
18154
18166
  .${prefix} {
18155
- background-image: linear-gradient(${gradientDirection}, ${linearGradient}), url("${primaryImage}");
18167
+ background-image: linear-gradient(${desktopGradientDirection}, ${linearGradient}), url("${primaryImage}");
18156
18168
  }
18157
18169
 
18158
18170
  .${prefix}__text {
18159
18171
  width: 70%;
18160
18172
  }
18173
+
18174
+ .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.TOP_LEFT} {
18175
+ top: 3%;
18176
+ left: 3%;
18177
+ align-items: flex-start;
18178
+ text-align: left;
18179
+ }
18180
+
18181
+ .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.TOP_RIGHT} {
18182
+ top: 3%;
18183
+ right: 3%;
18184
+ align-items: flex-end;
18185
+ text-align: right;
18186
+ }
18187
+
18188
+ .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT} {
18189
+ top: 50%;
18190
+ left: 3%;
18191
+ transform: translateY(-50%);
18192
+ align-items: flex-start;
18193
+ text-align: left;
18194
+ }
18195
+
18196
+ .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT} {
18197
+ top: 50%;
18198
+ right: 3%;
18199
+ transform: translateY(-50%);
18200
+ align-items: flex-end;
18201
+ text-align: right;
18202
+ }
18203
+
18204
+ .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT} {
18205
+ bottom: 3%;
18206
+ left: 3%;
18207
+ align-items: flex-start;
18208
+ text-align: left;
18209
+ }
18210
+
18211
+ .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.BOTTOM_RIGHT} {
18212
+ bottom: 3%;
18213
+ right: 3%;
18214
+ align-items: flex-end;
18215
+ text-align: right;
18216
+ }
18161
18217
  }
18162
18218
 
18163
18219
  @container (min-width: 768px) {
@@ -18207,38 +18263,38 @@ class RbHomepageHeroThreeTileSE extends BaseSpotComponent {
18207
18263
  }
18208
18264
  template() {
18209
18265
  const prefix = this._config.prefix;
18210
- const { header, description, ctaText, textBlockPosition = ENUM_TEXT_BLOCK_POSITION.LEFT, } = this._data;
18266
+ const { header, description, ctaText, textBlockPosition = ENUM_TEXT_BLOCK_POSITION.LEFT, mobileTextBlockPosition = textBlockPosition, } = this._data;
18211
18267
  return `
18212
- ${GFONT_PRECONNECT}
18213
- ${GFONT_SOURCE_SANS_3}
18214
- ${GFONT_CORMORANT}
18215
- <div class="${prefix}">
18216
- <div class="${prefix}__content ${prefix}__text-block--${textBlockPosition}">
18217
- <div class="${prefix}__main">
18218
- <div class="${prefix}__secondary-image"></div>
18219
- <div class="${prefix}__text">
18220
- ${header ? `<h2 class="${prefix}__header">${header}</h2>` : ''}
18221
- ${description ? `<p class="${prefix}__description">${description}</p>` : ''}
18222
- ${ctaText ? `<span class="${prefix}__cta-button">${ctaText}</span>` : ''}
18223
- </div>
18224
- </div>
18225
- <div class="${prefix}__primary-image"></div>
18268
+ ${GFONT_PRECONNECT}
18269
+ ${GFONT_SOURCE_SANS_3}
18270
+ ${GFONT_CORMORANT}
18271
+ <div class="${prefix}">
18272
+ <div class="${prefix}__content ${prefix}__text-block--${textBlockPosition} ${prefix}__text-block-mobile--${mobileTextBlockPosition}">
18273
+ <div class="${prefix}__main">
18274
+ <div class="${prefix}__secondary-image"></div>
18275
+ <div class="${prefix}__text">
18276
+ ${header ? `<h2 class="${prefix}__header">${header}</h2>` : ''}
18277
+ ${description ? `<p class="${prefix}__description">${description}</p>` : ''}
18278
+ ${ctaText ? `<span class="${prefix}__cta-button">${ctaText}</span>` : ''}
18226
18279
  </div>
18280
+ </div>
18281
+ <div class="${prefix}__primary-image"></div>
18227
18282
  </div>
18283
+ </div>
18228
18284
  `;
18229
18285
  }
18230
18286
  styles() {
18231
18287
  const { textColor = '#212121', backgroundColor = '#e8e6de', ctaTextColor = textColor, primaryImage, mobilePrimaryImage = primaryImage, secondaryImage, mobileSecondaryImage = secondaryImage, } = this._data;
18232
18288
  const prefix = this._config.prefix;
18233
18289
  return `
18234
- .${prefix} {
18290
+ .${prefix} {
18235
18291
  width: 100%;
18236
18292
  height: 100%;
18237
18293
  display: block;
18238
18294
  position: relative;
18239
- }
18295
+ }
18240
18296
 
18241
- .${prefix}__content {
18297
+ .${prefix}__content {
18242
18298
  width: 100%;
18243
18299
  height: 100%;
18244
18300
  display: flex;
@@ -18247,35 +18303,45 @@ class RbHomepageHeroThreeTileSE extends BaseSpotComponent {
18247
18303
  gap: 6px;
18248
18304
  color: inherit;
18249
18305
  cursor: pointer;
18250
- }
18306
+ }
18251
18307
 
18252
- .${prefix}__primary-image {
18308
+ .${prefix}__primary-image {
18253
18309
  width: 100%;
18254
18310
  height: 60%;
18255
18311
  background-image: url("${mobilePrimaryImage}");
18256
18312
  background-position: center;
18257
18313
  background-repeat: no-repeat;
18258
18314
  background-size: cover;
18259
- }
18315
+ }
18260
18316
 
18261
- .${prefix}__main {
18317
+ .${prefix}__main {
18262
18318
  width: 100%;
18263
18319
  height: 40%;
18264
18320
  display: flex;
18265
18321
  flex-direction: row;
18266
18322
  gap: 6px;
18267
- }
18323
+ }
18268
18324
 
18269
- .${prefix}__secondary-image {
18325
+ @container (max-width: 767px) {
18326
+ .${prefix}__text-block-mobile--${ENUM_TEXT_BLOCK_POSITION.LEFT} .${prefix}__main {
18327
+ flex-direction: row;
18328
+ }
18329
+
18330
+ .${prefix}__text-block-mobile--${ENUM_TEXT_BLOCK_POSITION.RIGHT} .${prefix}__main {
18331
+ flex-direction: row-reverse;
18332
+ }
18333
+ }
18334
+
18335
+ .${prefix}__secondary-image {
18270
18336
  width: 50%;
18271
18337
  height: 100%;
18272
18338
  background-image: url("${mobileSecondaryImage}");
18273
18339
  background-position: center;
18274
18340
  background-repeat: no-repeat;
18275
18341
  background-size: cover;
18276
- }
18342
+ }
18277
18343
 
18278
- .${prefix}__text {
18344
+ .${prefix}__text {
18279
18345
  color: ${textColor};
18280
18346
  background-color: ${backgroundColor};
18281
18347
  text-align: center;
@@ -18288,9 +18354,9 @@ class RbHomepageHeroThreeTileSE extends BaseSpotComponent {
18288
18354
  gap: 10px;
18289
18355
  padding: 0 10px;
18290
18356
  box-sizing: border-box;
18291
- }
18357
+ }
18292
18358
 
18293
- .${prefix}__header {
18359
+ .${prefix}__header {
18294
18360
  color: inherit;
18295
18361
  margin: 0;
18296
18362
  font-size: 18px;
@@ -18298,18 +18364,18 @@ class RbHomepageHeroThreeTileSE extends BaseSpotComponent {
18298
18364
  font-style: normal;
18299
18365
  font-weight: 700;
18300
18366
  line-height: normal;
18301
- }
18367
+ }
18302
18368
 
18303
- .${prefix}__description {
18369
+ .${prefix}__description {
18304
18370
  color: inherit;
18305
18371
  margin: 0;
18306
18372
  font-size: 10px;
18307
18373
  font-family: "Source Sans 3", system-ui;
18308
18374
  font-style: normal;
18309
18375
  font-weight: 400;
18310
- }
18376
+ }
18311
18377
 
18312
- .${prefix}__cta-button {
18378
+ .${prefix}__cta-button {
18313
18379
  color: ${ctaTextColor};
18314
18380
  background-color: transparent;
18315
18381
  font-size: 8px;
@@ -18323,92 +18389,92 @@ class RbHomepageHeroThreeTileSE extends BaseSpotComponent {
18323
18389
  cursor: pointer;
18324
18390
  padding: 0;
18325
18391
  transition: opacity 0.3s ease;
18326
- }
18392
+ }
18327
18393
 
18328
- .${prefix}__content:hover .${prefix}__cta-button {
18394
+ .${prefix}__content:hover .${prefix}__cta-button {
18329
18395
  opacity: 0.8;
18330
- }
18396
+ }
18331
18397
 
18332
- @container (min-width: 640px) {
18398
+ @container (min-width: 640px) {
18333
18399
  .${prefix}__primary-image {
18334
- background-image: url("${primaryImage}");
18400
+ background-image: url("${primaryImage}");
18335
18401
  }
18336
18402
 
18337
18403
  .${prefix}__secondary-image {
18338
- background-image: url("${secondaryImage}");
18404
+ background-image: url("${secondaryImage}");
18339
18405
  }
18340
- }
18406
+ }
18341
18407
 
18342
- @container (min-width: 768px) {
18408
+ @container (min-width: 768px) {
18343
18409
  .${prefix}__content {
18344
- flex-direction: row;
18410
+ flex-direction: row;
18411
+ }
18412
+
18413
+ .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.LEFT} {
18414
+ flex-direction: row;
18345
18415
  }
18346
18416
 
18347
18417
  .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.RIGHT} {
18348
- flex-direction: row-reverse;
18418
+ flex-direction: row-reverse;
18349
18419
  }
18350
18420
 
18351
18421
  .${prefix}__primary-image {
18352
- width: 66.66666%;
18353
- height: 100%;
18422
+ width: 66.66666%;
18423
+ height: 100%;
18354
18424
  }
18355
18425
 
18356
18426
  .${prefix}__main {
18357
- flex-direction: column;
18358
- height: 100%;
18359
- width: 33.33333%;
18360
- }
18361
-
18362
- .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.RIGHT} .${prefix}__main {
18363
- flex-direction: column;
18427
+ flex-direction: column;
18428
+ height: 100%;
18429
+ width: 33.33333%;
18364
18430
  }
18365
18431
 
18366
18432
  .${prefix}__secondary-image {
18367
- width: 100%;
18368
- height: 50%;
18433
+ width: 100%;
18434
+ height: 50%;
18369
18435
  }
18370
18436
 
18371
18437
  .${prefix}__text {
18372
- width: 100%;
18373
- height: 50%;
18438
+ width: 100%;
18439
+ height: 50%;
18374
18440
  }
18375
18441
 
18376
18442
  .${prefix}__header {
18377
- font-size: 22px;
18443
+ font-size: 22px;
18378
18444
  }
18379
18445
 
18380
18446
  .${prefix}__description {
18381
- font-size: 12px;
18447
+ font-size: 12px;
18382
18448
  }
18383
18449
 
18384
18450
  .${prefix}__cta-button {
18385
- font-size: 12px;
18451
+ font-size: 12px;
18386
18452
  }
18387
- }
18453
+ }
18388
18454
 
18389
- @container (min-width: 1024px) {
18455
+ @container (min-width: 1024px) {
18390
18456
  .${prefix}__header {
18391
- font-size: 24px;
18457
+ font-size: 24px;
18392
18458
  }
18393
18459
  .${prefix}__description {
18394
- font-size: 13px;
18460
+ font-size: 13px;
18395
18461
  }
18396
18462
  .${prefix}__cta-button {
18397
18463
  font-size: 13px;
18398
18464
  }
18399
- }
18465
+ }
18400
18466
 
18401
- @container (min-width: 1280px) {
18467
+ @container (min-width: 1280px) {
18402
18468
  .${prefix}__header {
18403
- font-size: 28px;
18469
+ font-size: 28px;
18404
18470
  }
18405
18471
  .${prefix}__description {
18406
- font-size: 14px;
18472
+ font-size: 14px;
18407
18473
  }
18408
18474
  .${prefix}__cta-button {
18409
- font-size: 14px;
18475
+ font-size: 14px;
18410
18476
  }
18411
- }
18477
+ }
18412
18478
  `;
18413
18479
  }
18414
18480
  }
@@ -18419,13 +18485,13 @@ class RbHomepageHeroTwoTileSE extends BaseSpotComponent {
18419
18485
  }
18420
18486
  template() {
18421
18487
  const prefix = this._config.prefix;
18422
- const { header, description, ctaText, textBlockPosition = ENUM_TEXT_BLOCK_POSITION.LEFT, } = this._data;
18488
+ const { header, description, ctaText, textBlockPosition = ENUM_TEXT_BLOCK_POSITION.LEFT, mobileTextBlockPosition = ENUM_TEXT_BLOCK_POSITION.TOP, } = this._data;
18423
18489
  return `
18424
18490
  ${GFONT_PRECONNECT}
18425
18491
  ${GFONT_SOURCE_SANS_3}
18426
18492
  ${GFONT_CORMORANT}
18427
18493
  <div class="${prefix}">
18428
- <div class="${prefix}__content ${prefix}__text-block--${textBlockPosition}">
18494
+ <div class="${prefix}__content ${prefix}__text-block--${textBlockPosition} ${prefix}__text-block-mobile--${mobileTextBlockPosition}">
18429
18495
  <div class="${prefix}__text">
18430
18496
  ${header ? `<h2 class="${prefix}__header">${header}</h2>` : ''}
18431
18497
  ${description ? `<p class="${prefix}__description">${description}</p>` : ''}
@@ -18434,153 +18500,167 @@ class RbHomepageHeroTwoTileSE extends BaseSpotComponent {
18434
18500
  <div class="${prefix}__image"></div>
18435
18501
  </div>
18436
18502
  </div>
18437
- `;
18503
+ `;
18438
18504
  }
18439
18505
  styles() {
18440
18506
  const { textColor = '#212121', backgroundColor = '#e8e6de', ctaTextColor = textColor, primaryImage, mobilePrimaryImage = primaryImage, } = this._data;
18441
18507
  const prefix = this._config.prefix;
18442
18508
  return `
18443
- .${prefix} {
18444
- width: 100%;
18445
- height: 100%;
18446
- background-color: transparent;
18447
- cursor: pointer;
18448
- position: relative;
18449
- }
18509
+ .${prefix} {
18510
+ width: 100%;
18511
+ height: 100%;
18512
+ background-color: transparent;
18513
+ cursor: pointer;
18514
+ position: relative;
18515
+ }
18450
18516
 
18451
- .${prefix}__content {
18452
- width: 100%;
18453
- height: 100%;
18454
- display: flex;
18455
- flex-direction: column-reverse;
18456
- background-color: transparent;
18457
- gap: 6px;
18458
- }
18517
+ .${prefix}__content {
18518
+ width: 100%;
18519
+ height: 100%;
18520
+ display: flex;
18521
+ flex-direction: column-reverse;
18522
+ background-color: transparent;
18523
+ gap: 6px;
18524
+ }
18459
18525
 
18460
- .${prefix}__image {
18461
- width: 100%;
18462
- height: 100%;
18463
- background-image: url("${mobilePrimaryImage}");
18464
- background-position: center;
18465
- background-repeat: no-repeat;
18466
- background-size: cover;
18467
- }
18526
+ .${prefix}__image {
18527
+ width: 100%;
18528
+ height: 100%;
18529
+ background-image: url("${mobilePrimaryImage}");
18530
+ background-position: center;
18531
+ background-repeat: no-repeat;
18532
+ background-size: cover;
18533
+ }
18468
18534
 
18469
- .${prefix}__text {
18470
- color: ${textColor};
18471
- background-color: ${backgroundColor};
18472
- text-align: center;
18473
- display: flex;
18474
- flex-direction: column;
18475
- justify-content: center;
18476
- align-items: center;
18477
- width: 100%;
18478
- height: 100%;
18479
- gap: 10px;
18480
- padding: 0 10px;
18481
- box-sizing: border-box;
18482
- }
18535
+ .${prefix}__text {
18536
+ color: ${textColor};
18537
+ background-color: ${backgroundColor};
18538
+ text-align: center;
18539
+ display: flex;
18540
+ flex-direction: column;
18541
+ justify-content: center;
18542
+ align-items: center;
18543
+ width: 100%;
18544
+ height: 100%;
18545
+ gap: 10px;
18546
+ padding: 0 10px;
18547
+ box-sizing: border-box;
18548
+ }
18483
18549
 
18484
- .${prefix}__header {
18485
- font-size: 18px;
18486
- margin: 0;
18487
- color: inherit;
18488
- font-family: "Cormorant", system-ui;
18489
- font-style: normal;
18490
- font-weight: 700;
18491
- line-height: normal;
18492
- }
18550
+ @container (max-width: 767px) {
18551
+ .${prefix}__text-block-mobile--${ENUM_TEXT_BLOCK_POSITION.BOTTOM} {
18552
+ flex-direction: column-reverse;
18553
+ }
18493
18554
 
18494
- .${prefix}__description {
18495
- color: inherit;
18496
- margin: 0;
18497
- font-size: 10px;
18498
- font-family: "Source Sans 3", system-ui;
18499
- font-style: normal;
18500
- font-weight: 400;
18501
- }
18555
+ .${prefix}__text-block-mobile--${ENUM_TEXT_BLOCK_POSITION.TOP} {
18556
+ flex-direction: column;
18557
+ }
18558
+ }
18502
18559
 
18503
- .${prefix}__cta-button {
18504
- color: ${ctaTextColor};
18505
- background-color: transparent;
18506
- font-size: 8px;
18507
- font-style: normal;
18508
- font-weight: 700;
18509
- font-family: "Source Sans 3", system-ui;
18510
- text-decoration-line: underline;
18511
- text-transform: uppercase;
18512
- letter-spacing: 1.4px;
18513
- border: none;
18514
- cursor: pointer;
18515
- padding: 0;
18516
- transition: opacity 0.3s ease;
18517
- }
18560
+ .${prefix}__header {
18561
+ font-size: 18px;
18562
+ margin: 0;
18563
+ color: inherit;
18564
+ font-family: "Cormorant", system-ui;
18565
+ font-style: normal;
18566
+ font-weight: 700;
18567
+ line-height: normal;
18568
+ }
18518
18569
 
18519
- .${prefix}__content:hover .${prefix}__cta-button {
18520
- opacity: 0.8;
18521
- }
18570
+ .${prefix}__description {
18571
+ color: inherit;
18572
+ margin: 0;
18573
+ font-size: 10px;
18574
+ font-family: "Source Sans 3", system-ui;
18575
+ font-style: normal;
18576
+ font-weight: 400;
18577
+ }
18522
18578
 
18523
- @container (min-width: 640px) {
18524
- .${prefix}__image {
18525
- background-image: url("${primaryImage}");
18526
- }
18527
- }
18579
+ .${prefix}__cta-button {
18580
+ color: ${ctaTextColor};
18581
+ background-color: transparent;
18582
+ font-size: 8px;
18583
+ font-style: normal;
18584
+ font-weight: 700;
18585
+ font-family: "Source Sans 3", system-ui;
18586
+ text-decoration-line: underline;
18587
+ text-transform: uppercase;
18588
+ letter-spacing: 1.4px;
18589
+ border: none;
18590
+ cursor: pointer;
18591
+ padding: 0;
18592
+ transition: opacity 0.3s ease;
18593
+ }
18528
18594
 
18529
- @container (min-width: 768px) {
18530
- .${prefix}__content {
18531
- flex-direction: row;
18532
- }
18595
+ .${prefix}__content:hover .${prefix}__cta-button {
18596
+ opacity: 0.8;
18597
+ }
18533
18598
 
18534
- .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.RIGHT} {
18535
- flex-direction: row-reverse;
18536
- }
18599
+ @container (min-width: 640px) {
18600
+ .${prefix}__image {
18601
+ background-image: url("${primaryImage}");
18602
+ }
18603
+ }
18537
18604
 
18538
- .${prefix}__image {
18539
- width: 66.66666%;
18540
- height: 100%;
18541
- }
18605
+ @container (min-width: 768px) {
18606
+ .${prefix}__content {
18607
+ flex-direction: row;
18608
+ }
18542
18609
 
18543
- .${prefix}__text {
18544
- width: 33.33333%;
18545
- height: 100%;
18546
- }
18610
+ .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.LEFT} {
18611
+ flex-direction: row;
18612
+ }
18547
18613
 
18548
- .${prefix}__header {
18549
- font-size: 22px;
18550
- }
18614
+ .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.RIGHT} {
18615
+ flex-direction: row-reverse;
18616
+ }
18551
18617
 
18552
- .${prefix}__description {
18553
- font-size: 12px;
18554
- }
18618
+ .${prefix}__image {
18619
+ width: 66.66666%;
18620
+ height: 100%;
18621
+ }
18555
18622
 
18556
- .${prefix}__cta-button {
18557
- font-size: 12px;
18558
- }
18559
- }
18623
+ .${prefix}__text {
18624
+ width: 33.33333%;
18625
+ height: 100%;
18626
+ }
18560
18627
 
18561
- @container (min-width: 1024px) {
18562
- .${prefix}__header {
18563
- font-size: 24px;
18564
- }
18565
- .${prefix}__description {
18566
- font-size: 13px;
18567
- }
18568
- .${prefix}__cta-button {
18569
- font-size: 13px;
18570
- }
18571
- }
18628
+ .${prefix}__header {
18629
+ font-size: 22px;
18630
+ }
18572
18631
 
18573
- @container (min-width: 1280px) {
18574
- .${prefix}__header {
18575
- font-size: 28px;
18576
- }
18577
- .${prefix}__description {
18578
- font-size: 14px;
18579
- }
18580
- .${prefix}__cta-button {
18581
- font-size: 14px;
18582
- }
18583
- }
18632
+ .${prefix}__description {
18633
+ font-size: 12px;
18634
+ }
18635
+
18636
+ .${prefix}__cta-button {
18637
+ font-size: 12px;
18638
+ }
18639
+ }
18640
+
18641
+ @container (min-width: 1024px) {
18642
+ .${prefix}__header {
18643
+ font-size: 24px;
18644
+ }
18645
+ .${prefix}__description {
18646
+ font-size: 13px;
18647
+ }
18648
+ .${prefix}__cta-button {
18649
+ font-size: 13px;
18650
+ }
18651
+ }
18652
+
18653
+ @container (min-width: 1280px) {
18654
+ .${prefix}__header {
18655
+ font-size: 28px;
18656
+ }
18657
+ .${prefix}__description {
18658
+ font-size: 14px;
18659
+ }
18660
+ .${prefix}__cta-button {
18661
+ font-size: 14px;
18662
+ }
18663
+ }
18584
18664
  `;
18585
18665
  }
18586
18666
  }
@@ -18967,24 +19047,25 @@ class RbLongToutTallSE extends BaseSpotComponent {
18967
19047
  }
18968
19048
  template() {
18969
19049
  const prefix = this._config.prefix;
18970
- const { preHeader, header, description, ctaText, textBlockPosition = ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT, } = this._data;
19050
+ const { preHeader, header, description, ctaText, textBlockPosition = ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT, mobileTextBlockPosition = textBlockPosition, } = this._data;
18971
19051
  return `
18972
- ${GFONT_PRECONNECT}
18973
- ${GFONT_SOURCE_SANS_3}
18974
- ${GFONT_CORMORANT}
18975
- <div class="${prefix}">
18976
- <div class="${prefix}__text ${prefix}__text-block--${textBlockPosition.toLowerCase().replace('_', '-')}">
18977
- ${preHeader ? `<h2 class="${prefix}__pre-header">${preHeader}</h2>` : ''}
18978
- ${header ? `<h2 class="${prefix}__header">${header}</h2>` : ''}
18979
- ${description ? `<p class="${prefix}__description">${description}</p>` : ''}
18980
- ${ctaText ? `<span class="${prefix}__cta-button">${ctaText}</span>` : ''}
19052
+ ${GFONT_PRECONNECT}
19053
+ ${GFONT_SOURCE_SANS_3}
19054
+ ${GFONT_CORMORANT}
19055
+ <div class="${prefix}">
19056
+ <div class="${prefix}__text ${prefix}__text-block--${textBlockPosition} ${prefix}__text-block-mobile--${mobileTextBlockPosition}">
19057
+ ${preHeader ? `<h2 class="${prefix}__pre-header">${preHeader}</h2>` : ''}
19058
+ ${header ? `<h2 class="${prefix}__header">${header}</h2>` : ''}
19059
+ ${description ? `<p class="${prefix}__description">${description}</p>` : ''}
19060
+ ${ctaText ? `<span class="${prefix}__cta-button">${ctaText}</span>` : ''}
19061
+ </div>
18981
19062
  </div>
18982
- </div>
18983
- `;
19063
+ `;
18984
19064
  }
18985
19065
  styles() {
18986
- const { textBlockPosition = ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT } = this._data;
18987
- const gradientDirection = this.getGradientDirection(textBlockPosition);
19066
+ const { textBlockPosition = ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT, mobileTextBlockPosition = textBlockPosition, } = this._data;
19067
+ const desktopGradientDirection = this.getGradientDirection(textBlockPosition);
19068
+ const mobileGradientDirection = this.getGradientDirection(mobileTextBlockPosition);
18988
19069
  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%');
18989
19070
  const { textColor = '#ffffff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, } = this._data;
18990
19071
  const prefix = this._config.prefix;
@@ -18993,7 +19074,7 @@ class RbLongToutTallSE extends BaseSpotComponent {
18993
19074
  display: flex;
18994
19075
  width: 100%;
18995
19076
  height: 100%;
18996
- background-image: linear-gradient(${gradientDirection}, ${linearGradient}), url("${mobilePrimaryImage}");
19077
+ background-image: linear-gradient(${mobileGradientDirection}, ${linearGradient}), url("${mobilePrimaryImage}");
18997
19078
  background-size: cover;
18998
19079
  background-repeat: no-repeat;
18999
19080
  background-position: center;
@@ -19015,48 +19096,104 @@ class RbLongToutTallSE extends BaseSpotComponent {
19015
19096
  position: absolute;
19016
19097
  }
19017
19098
 
19018
- .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.TOP_LEFT} {
19019
- top: 3%;
19020
- left: 3%;
19021
- align-items: flex-start;
19022
- text-align: left;
19023
- }
19099
+ @container (max-width: 639px) {
19100
+ .${prefix}__text-block-mobile--${ENUM_TEXT_BLOCK_POSITION.TOP_LEFT} {
19101
+ top: 3%;
19102
+ left: 3%;
19103
+ align-items: flex-start;
19104
+ text-align: left;
19105
+ }
19024
19106
 
19025
- .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.TOP_RIGHT} {
19026
- top: 3%;
19027
- right: 3%;
19028
- align-items: flex-end;
19029
- text-align: right;
19030
- }
19107
+ .${prefix}__text-block-mobile--${ENUM_TEXT_BLOCK_POSITION.TOP_RIGHT} {
19108
+ top: 3%;
19109
+ right: 3%;
19110
+ align-items: flex-end;
19111
+ text-align: right;
19112
+ }
19031
19113
 
19032
- .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT} {
19033
- top: 50%;
19034
- left: 3%;
19035
- transform: translateY(-50%);
19036
- align-items: flex-start;
19037
- text-align: left;
19038
- }
19114
+ .${prefix}__text-block-mobile--${ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT} {
19115
+ top: 50%;
19116
+ left: 3%;
19117
+ transform: translateY(-50%);
19118
+ align-items: flex-start;
19119
+ text-align: left;
19120
+ }
19039
19121
 
19040
- .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT} {
19041
- top: 50%;
19042
- right: 3%;
19043
- transform: translateY(-50%);
19044
- align-items: flex-end;
19045
- text-align: right;
19046
- }
19122
+ .${prefix}__text-block-mobile--${ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT} {
19123
+ top: 50%;
19124
+ right: 3%;
19125
+ transform: translateY(-50%);
19126
+ align-items: flex-end;
19127
+ text-align: right;
19128
+ }
19047
19129
 
19048
- .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT} {
19049
- bottom: 3%;
19050
- left: 3%;
19051
- align-items: flex-start;
19052
- text-align: left;
19130
+ .${prefix}__text-block-mobile--${ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT} {
19131
+ bottom: 3%;
19132
+ left: 3%;
19133
+ align-items: flex-start;
19134
+ text-align: left;
19135
+ }
19136
+
19137
+ .${prefix}__text-block-mobile--${ENUM_TEXT_BLOCK_POSITION.BOTTOM_RIGHT} {
19138
+ bottom: 3%;
19139
+ right: 3%;
19140
+ align-items: flex-end;
19141
+ text-align: right;
19142
+ }
19053
19143
  }
19054
19144
 
19055
- .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.BOTTOM_RIGHT} {
19056
- bottom: 3%;
19057
- right: 3%;
19058
- align-items: flex-end;
19059
- text-align: right;
19145
+ @container (min-width: 640px) {
19146
+ .${prefix} {
19147
+ background-image: linear-gradient(${desktopGradientDirection}, ${linearGradient}), url("${primaryImage}");
19148
+ }
19149
+
19150
+ .${prefix}__text {
19151
+ width: 70%;
19152
+ }
19153
+
19154
+ .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.TOP_LEFT} {
19155
+ top: 3%;
19156
+ left: 3%;
19157
+ align-items: flex-start;
19158
+ text-align: left;
19159
+ }
19160
+
19161
+ .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.TOP_RIGHT} {
19162
+ top: 3%;
19163
+ right: 3%;
19164
+ align-items: flex-end;
19165
+ text-align: right;
19166
+ }
19167
+
19168
+ .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT} {
19169
+ top: 50%;
19170
+ left: 3%;
19171
+ transform: translateY(-50%);
19172
+ align-items: flex-start;
19173
+ text-align: left;
19174
+ }
19175
+
19176
+ .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT} {
19177
+ top: 50%;
19178
+ right: 3%;
19179
+ transform: translateY(-50%);
19180
+ align-items: flex-end;
19181
+ text-align: right;
19182
+ }
19183
+
19184
+ .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT} {
19185
+ bottom: 3%;
19186
+ left: 3%;
19187
+ align-items: flex-start;
19188
+ text-align: left;
19189
+ }
19190
+
19191
+ .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.BOTTOM_RIGHT} {
19192
+ bottom: 3%;
19193
+ right: 3%;
19194
+ align-items: flex-end;
19195
+ text-align: right;
19196
+ }
19060
19197
  }
19061
19198
 
19062
19199
  .${prefix}__pre-header {
@@ -19104,16 +19241,6 @@ class RbLongToutTallSE extends BaseSpotComponent {
19104
19241
  background-color: ${ctaBorderColor.length === 7 ? `${ctaBorderColor}15` : `${ctaBorderColor}`};
19105
19242
  }
19106
19243
 
19107
- @container (min-width: 640px) {
19108
- .${prefix} {
19109
- background-image: linear-gradient(${gradientDirection}, ${linearGradient}), url("${primaryImage}");
19110
- }
19111
-
19112
- .${prefix}__text {
19113
- width: 70%;
19114
- }
19115
- }
19116
-
19117
19244
  @container (min-width: 768px) {
19118
19245
  .${prefix}__description {
19119
19246
  font-size: 12px;