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