@micromag/screen-urbania-recommendation 0.4.48 → 0.4.50

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 (2) hide show
  1. package/es/index.js +298 -278
  2. package/package.json +14 -14
package/es/index.js CHANGED
@@ -3,8 +3,8 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
3
3
  import _objectSpread from '@babel/runtime/helpers/objectSpread2';
4
4
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
5
5
  import classNames from 'classnames';
6
- import React, { useState, useMemo, useEffect, useCallback } from 'react';
7
- import { Close, ScreenElement, PlaceholderImage, MuteIcon, FullscreenIcon, PlaceholderText, PlaceholderTitle } from '@micromag/core/components';
6
+ import { useState, useMemo, useEffect, useCallback } from 'react';
7
+ import { Close, ScreenElement, MuteIcon, FullscreenIcon, PlaceholderImage, PlaceholderText, PlaceholderTitle } from '@micromag/core/components';
8
8
  import { useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useViewerInteraction, useScreenRenderContext } from '@micromag/core/contexts';
9
9
  import { useTrackScreenEvent, useResizeObserver } from '@micromag/core/hooks';
10
10
  import { isTextFilled, isHeaderFilled, isFooterFilled, getFooterProps, getColorAsString, getStyleFromBox, getStyleFromText } from '@micromag/core/utils';
@@ -18,6 +18,7 @@ import Layout, { Spacer } from '@micromag/element-layout';
18
18
  import Scroll from '@micromag/element-scroll';
19
19
  import Text from '@micromag/element-text';
20
20
  import Visual from '@micromag/element-visual';
21
+ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
21
22
 
22
23
  var styles = {"container":"micromag-screen-urbania-recommendation-container","background":"micromag-screen-urbania-recommendation-background","backgroundTextContainer":"micromag-screen-urbania-recommendation-backgroundTextContainer","backgroundText":"micromag-screen-urbania-recommendation-backgroundText","hidden":"micromag-screen-urbania-recommendation-hidden","didAnimate":"micromag-screen-urbania-recommendation-didAnimate","animateFromBottom":"micromag-screen-urbania-recommendation-animateFromBottom","animateFromTop":"micromag-screen-urbania-recommendation-animateFromTop","content":"micromag-screen-urbania-recommendation-content","scroll":"micromag-screen-urbania-recommendation-scroll","empty":"micromag-screen-urbania-recommendation-empty","emptyText":"micromag-screen-urbania-recommendation-emptyText","emptyVisual":"micromag-screen-urbania-recommendation-emptyVisual","emptyCategory":"micromag-screen-urbania-recommendation-emptyCategory","footer":"micromag-screen-urbania-recommendation-footer","disabled":"micromag-screen-urbania-recommendation-disabled","close":"micromag-screen-urbania-recommendation-close","closeIcon":"micromag-screen-urbania-recommendation-closeIcon","textCard":"micromag-screen-urbania-recommendation-textCard","isPlaceholder":"micromag-screen-urbania-recommendation-isPlaceholder","appear":"micromag-screen-urbania-recommendation-appear","visualContainer":"micromag-screen-urbania-recommendation-visualContainer","visualBottom":"micromag-screen-urbania-recommendation-visualBottom","modalOpened":"micromag-screen-urbania-recommendation-modalOpened","sponsor":"micromag-screen-urbania-recommendation-sponsor","hasVisual":"micromag-screen-urbania-recommendation-hasVisual","sponsorPlaceholder":"micromag-screen-urbania-recommendation-sponsorPlaceholder","visualWrapper":"micromag-screen-urbania-recommendation-visualWrapper","visualButton":"micromag-screen-urbania-recommendation-visualButton","transitioning":"micromag-screen-urbania-recommendation-transitioning","iconContainer":"micromag-screen-urbania-recommendation-iconContainer","icon":"micromag-screen-urbania-recommendation-icon","text":"micromag-screen-urbania-recommendation-text","categoryContainer":"micromag-screen-urbania-recommendation-categoryContainer","category":"micromag-screen-urbania-recommendation-category","categoryPlaceholder":"micromag-screen-urbania-recommendation-categoryPlaceholder","textContent":"micromag-screen-urbania-recommendation-textContent","withoutCategory":"micromag-screen-urbania-recommendation-withoutCategory","title":"micromag-screen-urbania-recommendation-title","description":"micromag-screen-urbania-recommendation-description","location":"micromag-screen-urbania-recommendation-location","date":"micromag-screen-urbania-recommendation-date","titleContainer":"micromag-screen-urbania-recommendation-titleContainer","border":"micromag-screen-urbania-recommendation-border","descriptionPlaceholder":"micromag-screen-urbania-recommendation-descriptionPlaceholder","layout":"micromag-screen-urbania-recommendation-layout"};
23
24
 
@@ -179,7 +180,9 @@ function UrbaniaRecommendation(_ref) {
179
180
 
180
181
  // @TODO: move container div here to avoid double map
181
182
  var textElements = (textArray || []).map(function (line) {
182
- return /*#__PURE__*/React.createElement("span", null, line);
183
+ return /*#__PURE__*/jsx("span", {
184
+ children: line
185
+ });
183
186
  });
184
187
  return textElements;
185
188
  }, [backgroundTextBody]);
@@ -407,283 +410,300 @@ function UrbaniaRecommendation(_ref) {
407
410
  var finalBorderColor = useMemo(function () {
408
411
  return lineColor !== null ? getColorAsString(lineColor) : titleColor;
409
412
  }, [lineColor, titleColor]);
410
- return /*#__PURE__*/React.createElement("div", {
413
+ return /*#__PURE__*/jsxs("div", {
411
414
  className: classNames([styles.container, className, _defineProperty({}, styles.isPlaceholder, isPlaceholder)]),
412
- "data-screen-ready": true
413
- }, /*#__PURE__*/React.createElement(Container, {
414
- width: width,
415
- height: height,
416
- className: styles.content
417
- }, /*#__PURE__*/React.createElement(Scroll, {
418
- width: width,
419
- height: height,
420
- disabled: scrollingDisabled,
421
- onScrolledTrigger: onScrolledTrigger,
422
- onScrolledBottom: onScrolledBottom,
423
- onScrolledNotBottom: onScrolledNotBottom,
424
- verticalAlign: "middle",
425
- withShadow: !visualModalOpened,
426
- withArrow: !visualModalOpened,
427
- className: styles.scroll
428
- }, /*#__PURE__*/React.createElement(Layout, {
429
- className: styles.layout,
430
- width: width,
431
- style: !isPlaceholder ? {
432
- padding: spacing,
433
- paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing / 2,
434
- paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing / 2,
435
- minHeight: height // probably not the best
436
- } : null
437
- }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
438
- key: "header",
439
- style: {
440
- paddingBottom: spacing
441
- },
442
- className: classNames([styles.headerContainer])
443
- }, /*#__PURE__*/React.createElement(Header, header)) : null, !isPlaceholder ? /*#__PURE__*/React.createElement(Spacer, {
444
- key: "spacer-cta-top"
445
- }) : null, visualModalOpened ? /*#__PURE__*/React.createElement(Button, {
446
- className: styles.close,
447
- onClick: onCloseModal
448
- }, /*#__PURE__*/React.createElement(Close, {
449
- className: styles.closeIcon
450
- })) : null, hasTextCard || isPlaceholder || isEdit ? /*#__PURE__*/React.createElement(Container, {
451
- className: classNames([styles.textCard, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.isPlaceholder, isPlaceholder), styles.visualBottom, layout === 'bottom'), styles.appear, backgroundAnimationStarted), styles.modalOpened, visualModalTransitioning || visualModalOpened), styles.hidden, !current && isView && !isPreview)]),
452
- style: _objectSpread(_objectSpread({}, layoutStyle), withoutCorners ? {
453
- borderRadius: 0
454
- } : null)
455
- }, /*#__PURE__*/React.createElement("div", {
456
- className: classNames([styles.visualContainer, _defineProperty({}, styles.modalOpened, visualModalTransitioning || visualModalOpened)]),
457
- style: layoutBorderRadius !== null ? layout === 'bottom' ? {
458
- borderBottomLeftRadius: layoutBorderRadius,
459
- borderBottomRightRadius: layoutBorderRadius
460
- } : {
461
- borderTopLeftRadius: layoutBorderRadius,
462
- borderTopRightRadius: layoutBorderRadius
463
- } : null
464
- }, /*#__PURE__*/React.createElement(ScreenElement, {
465
- key: "visual",
466
- placeholder: /*#__PURE__*/React.createElement(PlaceholderImage, {
467
- className: styles.visualPlaceholder
468
- }),
469
- emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
470
- id: "JzSBzL",
471
- defaultMessage: [{
472
- "type": 0,
473
- "value": "Visual"
474
- }]
475
- }),
476
- emptyClassName: classNames([styles.empty, styles.emptyVisual]),
477
- isEmpty: !hasVisual
478
- }, hasVisual ? /*#__PURE__*/React.createElement("div", {
479
- className: classNames([styles.visualWrapper, _defineProperty({}, styles.modalOpened, visualModalTransitioning || visualModalOpened)]),
480
- style: visualModalTransitioning || visualModalOpened ? {
415
+ "data-screen-ready": true,
416
+ children: [/*#__PURE__*/jsx(Container, {
481
417
  width: width,
482
- height: height
483
- } : {
484
- width: textContainerWidth,
485
- height: 'auto'
486
- }
487
- }, /*#__PURE__*/React.createElement(Button, {
488
- className: classNames([styles.visualButton, _defineProperty(_defineProperty({}, styles.transitioning, visualModalTransitioning), styles.disabled, withoutZoom)]),
489
- onClick: onClickVisual,
490
- disabled: isPreview || backgroundAnimationStarted || visualModalOpened || withoutZoom,
491
- focusable: current && !isPreview && !visualModalOpened,
492
- "aria-label": intl.formatMessage({
493
- id: "XHO5Ua",
494
- defaultMessage: [{
495
- "type": 0,
496
- "value": "Expand visual"
497
- }]
498
- }),
499
- "aria-pressed": visualModalOpened,
500
- style: {
501
- transform: visualModalTransitioning ? "scale(".concat(width / textContainerWidth, ")") : null
502
- }
503
- }, isVideo ? /*#__PURE__*/React.createElement(Visual, {
504
- media: image,
505
- mediaRef: mediaRef,
506
- width: visualModalTransitioning || visualModalOpened ? width : (width - 40) * 0.9 + 1 // ((width - margins) * card width + gapfix )
507
- ,
508
- height: visualModalTransitioning || visualModalOpened ? height : 250,
509
- resolution: resolution,
510
- objectFit: {
511
- fit: (visualModalTransitioning || visualModalOpened) && isVideoLandscape ? 'contain' : 'cover'
512
- },
513
- shouldLoad: mediaShouldLoad,
514
- muted: muted || !visualModalOpened,
515
- withoutVideo: isPreview,
516
- playing: videoPlaying
517
- }) : /*#__PURE__*/React.createElement(Visual, {
518
- media: image,
519
- width: visualModalOpened ? width : textContainerWidth,
520
- resolution: resolution,
521
- active: active,
522
- shouldLoad: mediaShouldLoad
523
- }), visualModalClosed ? /*#__PURE__*/React.createElement("div", {
524
- className: classNames([styles.iconContainer, _defineProperty(_defineProperty({}, styles.visualBottom, layout === 'bottom'), styles.hidden, withoutZoom)])
525
- }, isVideo ? /*#__PURE__*/React.createElement(MuteIcon, {
526
- color: "#000",
527
- className: styles.icon
528
- }) : /*#__PURE__*/React.createElement(FullscreenIcon, {
529
- color: "#000",
530
- className: styles.icon
531
- })) : null)) : null), /*#__PURE__*/React.createElement(ScreenElement, {
532
- key: "sponsor",
533
- placeholder: /*#__PURE__*/React.createElement(PlaceholderText, {
534
- className: styles.sponsorPlaceholder
535
- })
536
- }, hasSponsor ? /*#__PURE__*/React.createElement(Text, Object.assign({
537
- className: classNames([styles.sponsor, _defineProperty({}, styles.hasVisual, hasVisual)])
538
- }, sponsor, {
539
- textStyle: _objectSpread(_objectSpread({}, sponsorTextStyle), {}, {
540
- fontStyle: sponsorFontStyle
541
- })
542
- })) : null)), /*#__PURE__*/React.createElement("div", {
543
- ref: textContainerRef,
544
- className: styles.text
545
- }, /*#__PURE__*/React.createElement(ScreenElement, {
546
- key: "category",
547
- placeholder: /*#__PURE__*/React.createElement(PlaceholderTitle, {
548
- className: styles.categoryPlaceholder
549
- }),
550
- emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
551
- id: "I5+AHN",
552
- defaultMessage: [{
553
- "type": 0,
554
- "value": "Category"
555
- }]
556
- }),
557
- emptyClassName: styles.emptyCategory,
558
- isEmpty: !hasCategory
559
- }, hasCategory ? /*#__PURE__*/React.createElement("div", {
560
- className: styles.categoryContainer,
561
- style: {
562
- width: textContainerHeight
563
- }
564
- }, /*#__PURE__*/React.createElement(Heading, Object.assign({
565
- className: styles.category
566
- }, category, {
567
- textStyle: _objectSpread(_objectSpread({}, categoryTextStyle), {}, {
568
- fontWeight: categoryFontWeight,
569
- fontStyle: categoryFontStyle
570
- })
571
- }))) : null), /*#__PURE__*/React.createElement("div", {
572
- className: classNames([styles.textContent, _defineProperty(_defineProperty({}, styles.isPlaceholder, isPlaceholder), styles.withoutCategory, !hasCategory)])
573
- }, /*#__PURE__*/React.createElement(ScreenElement, {
574
- key: "title",
575
- placeholder: "title",
576
- emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
577
- id: "2c1WFV",
578
- defaultMessage: [{
579
- "type": 0,
580
- "value": "Title"
581
- }]
582
- }),
583
- emptyClassName: styles.emptyText,
584
- isEmpty: !hasTitle
585
- }, hasTitle ? /*#__PURE__*/React.createElement("div", {
586
- className: styles.titleContainer
587
- }, /*#__PURE__*/React.createElement(Heading, Object.assign({
588
- className: styles.title
589
- }, title, {
590
- textStyle: _objectSpread(_objectSpread({}, titleTextStyle), {}, {
591
- fontWeight: titleFontWeight,
592
- fontStyle: titleFontStyle
593
- })
594
- })), /*#__PURE__*/React.createElement("hr", {
595
- className: styles.border,
596
- style: {
597
- borderColor: finalBorderColor
598
- }
599
- })) : null), /*#__PURE__*/React.createElement(ScreenElement, {
600
- key: "date",
601
- placeholder: /*#__PURE__*/React.createElement(PlaceholderText, {
602
- className: styles.datePlaceholder
603
- })
604
- }, hasDate ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, Object.assign({
605
- className: styles.date
606
- }, date, {
607
- textStyle: _objectSpread(_objectSpread({}, dateTextStyle), {}, {
608
- fontStyle: dateFontStyle
609
- })
610
- })), /*#__PURE__*/React.createElement("hr", {
611
- className: styles.border,
612
- style: {
613
- borderColor: finalBorderColor
614
- }
615
- })) : null), /*#__PURE__*/React.createElement(ScreenElement, {
616
- key: "location",
617
- placeholder: /*#__PURE__*/React.createElement(PlaceholderText, {
618
- className: styles.locationPlaceholder
619
- })
620
- }, hasLocation ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, Object.assign({
621
- className: styles.location
622
- }, location, {
623
- textStyle: _objectSpread(_objectSpread({}, locationTextStyle), {}, {
624
- fontStyle: locationFontStyle
625
- })
626
- })), /*#__PURE__*/React.createElement("hr", {
627
- className: styles.border,
628
- style: {
629
- borderColor: finalBorderColor
630
- }
631
- })) : null), /*#__PURE__*/React.createElement(ScreenElement, {
632
- key: "description",
633
- placeholder: /*#__PURE__*/React.createElement(PlaceholderText, {
634
- className: styles.descriptionPlaceholder
635
- }),
636
- emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
637
- id: "EQdIAR",
638
- defaultMessage: [{
639
- "type": 0,
640
- "value": "Description"
641
- }]
642
- }),
643
- emptyClassName: styles.emptyText,
644
- isEmpty: !hasDescription
645
- }, hasDescription ? /*#__PURE__*/React.createElement(Text, Object.assign({
646
- className: styles.description
647
- }, description, {
648
- textStyle: _objectSpread(_objectSpread({}, descriptionTextStyle), {}, {
649
- fontWeight: descriptionFontWeight
650
- })
651
- })) : null)))) : null, !isPlaceholder ? /*#__PURE__*/React.createElement(Spacer, {
652
- key: "spacer-cta-bottom"
653
- }) : null, !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
654
- key: "footer",
655
- className: classNames([styles.footer, _defineProperty({}, styles.disabled, !scrolledBottom && !visualModalOpened)]),
656
- style: {
657
- paddingTop: spacing,
658
- paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
659
- paddingRight: Math.max(0, viewerBottomSidesWidth - spacing)
660
- }
661
- }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null))), !isPlaceholder ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Background, {
662
- background: background,
663
- width: width,
664
- height: height,
665
- resolution: resolution,
666
- playing: backgroundPlaying && !visualModalOpened,
667
- muted: muted || visualModalOpened,
668
- shouldLoad: mediaShouldLoad,
669
- mediaRef: mediaRef,
670
- withoutVideo: isPreview,
671
- className: styles.background
672
- }), backgroundText !== null && finalBackgroundText.length > 0 ? /*#__PURE__*/React.createElement(Container, {
673
- width: width,
674
- height: height,
675
- className: styles.backgroundTextContainer
676
- }, (finalBackgroundText || []).map(function (line, i) {
677
- return /*#__PURE__*/React.createElement("div", {
678
- key: "reco-background-text-".concat(i + 1),
679
- className: classNames([styles.backgroundText], _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.hidden, !current && isView && !isPreview), styles.didAnimate, didAnimate), styles.animateFromBottom, backgroundAnimationStarted && i % 2 !== 0), styles.animateFromTop, backgroundAnimationStarted && i % 2 === 0)),
680
- style: _objectSpread({
681
- animationDelay: "".concat(i * 100, "ms")
682
- }, getStyleFromText(_objectSpread(_objectSpread({}, backgroundTextStyle), {}, {
683
- fontStyle: backgroundFontStyle
684
- })))
685
- }, line);
686
- })) : null) : null);
418
+ height: height,
419
+ className: styles.content,
420
+ children: /*#__PURE__*/jsx(Scroll, {
421
+ width: width,
422
+ height: height,
423
+ disabled: scrollingDisabled,
424
+ onScrolledTrigger: onScrolledTrigger,
425
+ onScrolledBottom: onScrolledBottom,
426
+ onScrolledNotBottom: onScrolledNotBottom,
427
+ verticalAlign: "middle",
428
+ withShadow: !visualModalOpened,
429
+ withArrow: !visualModalOpened,
430
+ className: styles.scroll,
431
+ children: /*#__PURE__*/jsxs(Layout, {
432
+ className: styles.layout,
433
+ width: width,
434
+ style: !isPlaceholder ? {
435
+ padding: spacing,
436
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing / 2,
437
+ paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing / 2,
438
+ minHeight: height // probably not the best
439
+ } : null,
440
+ children: [!isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
441
+ style: {
442
+ paddingBottom: spacing
443
+ },
444
+ className: classNames([styles.headerContainer]),
445
+ children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
446
+ }, "header") : null, !isPlaceholder ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-top") : null, visualModalOpened ? /*#__PURE__*/jsx(Button, {
447
+ className: styles.close,
448
+ onClick: onCloseModal,
449
+ children: /*#__PURE__*/jsx(Close, {
450
+ className: styles.closeIcon
451
+ })
452
+ }) : null, hasTextCard || isPlaceholder || isEdit ? /*#__PURE__*/jsxs(Container, {
453
+ className: classNames([styles.textCard, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.isPlaceholder, isPlaceholder), styles.visualBottom, layout === 'bottom'), styles.appear, backgroundAnimationStarted), styles.modalOpened, visualModalTransitioning || visualModalOpened), styles.hidden, !current && isView && !isPreview)]),
454
+ style: _objectSpread(_objectSpread({}, layoutStyle), withoutCorners ? {
455
+ borderRadius: 0
456
+ } : null),
457
+ children: [/*#__PURE__*/jsxs("div", {
458
+ className: classNames([styles.visualContainer, _defineProperty({}, styles.modalOpened, visualModalTransitioning || visualModalOpened)]),
459
+ style: layoutBorderRadius !== null ? layout === 'bottom' ? {
460
+ borderBottomLeftRadius: layoutBorderRadius,
461
+ borderBottomRightRadius: layoutBorderRadius
462
+ } : {
463
+ borderTopLeftRadius: layoutBorderRadius,
464
+ borderTopRightRadius: layoutBorderRadius
465
+ } : null,
466
+ children: [/*#__PURE__*/jsx(ScreenElement, {
467
+ placeholder: /*#__PURE__*/jsx(PlaceholderImage, {
468
+ className: styles.visualPlaceholder
469
+ }),
470
+ emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
471
+ id: "JzSBzL",
472
+ defaultMessage: [{
473
+ "type": 0,
474
+ "value": "Visual"
475
+ }]
476
+ }),
477
+ emptyClassName: classNames([styles.empty, styles.emptyVisual]),
478
+ isEmpty: !hasVisual,
479
+ children: hasVisual ? /*#__PURE__*/jsx("div", {
480
+ className: classNames([styles.visualWrapper, _defineProperty({}, styles.modalOpened, visualModalTransitioning || visualModalOpened)]),
481
+ style: visualModalTransitioning || visualModalOpened ? {
482
+ width: width,
483
+ height: height
484
+ } : {
485
+ width: textContainerWidth,
486
+ height: 'auto'
487
+ },
488
+ children: /*#__PURE__*/jsxs(Button, {
489
+ className: classNames([styles.visualButton, _defineProperty(_defineProperty({}, styles.transitioning, visualModalTransitioning), styles.disabled, withoutZoom)]),
490
+ onClick: onClickVisual,
491
+ disabled: isPreview || backgroundAnimationStarted || visualModalOpened || withoutZoom,
492
+ focusable: current && !isPreview && !visualModalOpened,
493
+ "aria-label": intl.formatMessage({
494
+ id: "XHO5Ua",
495
+ defaultMessage: [{
496
+ "type": 0,
497
+ "value": "Expand visual"
498
+ }]
499
+ }),
500
+ "aria-pressed": visualModalOpened,
501
+ style: {
502
+ transform: visualModalTransitioning ? "scale(".concat(width / textContainerWidth, ")") : null
503
+ },
504
+ children: [isVideo ? /*#__PURE__*/jsx(Visual, {
505
+ media: image,
506
+ mediaRef: mediaRef,
507
+ width: visualModalTransitioning || visualModalOpened ? width : (width - 40) * 0.9 + 1 // ((width - margins) * card width + gapfix )
508
+ ,
509
+ height: visualModalTransitioning || visualModalOpened ? height : 250,
510
+ resolution: resolution,
511
+ objectFit: {
512
+ fit: (visualModalTransitioning || visualModalOpened) && isVideoLandscape ? 'contain' : 'cover'
513
+ },
514
+ shouldLoad: mediaShouldLoad,
515
+ muted: muted || !visualModalOpened,
516
+ withoutVideo: isPreview,
517
+ playing: videoPlaying
518
+ }) : /*#__PURE__*/jsx(Visual, {
519
+ media: image,
520
+ width: visualModalOpened ? width : textContainerWidth,
521
+ resolution: resolution,
522
+ active: active,
523
+ shouldLoad: mediaShouldLoad
524
+ }), visualModalClosed ? /*#__PURE__*/jsx("div", {
525
+ className: classNames([styles.iconContainer, _defineProperty(_defineProperty({}, styles.visualBottom, layout === 'bottom'), styles.hidden, withoutZoom)]),
526
+ children: isVideo ? /*#__PURE__*/jsx(MuteIcon, {
527
+ color: "#000",
528
+ className: styles.icon
529
+ }) : /*#__PURE__*/jsx(FullscreenIcon, {
530
+ color: "#000",
531
+ className: styles.icon
532
+ })
533
+ }) : null]
534
+ })
535
+ }) : null
536
+ }, "visual"), /*#__PURE__*/jsx(ScreenElement, {
537
+ placeholder: /*#__PURE__*/jsx(PlaceholderText, {
538
+ className: styles.sponsorPlaceholder
539
+ }),
540
+ children: hasSponsor ? /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({
541
+ className: classNames([styles.sponsor, _defineProperty({}, styles.hasVisual, hasVisual)])
542
+ }, sponsor), {}, {
543
+ textStyle: _objectSpread(_objectSpread({}, sponsorTextStyle), {}, {
544
+ fontStyle: sponsorFontStyle
545
+ })
546
+ })) : null
547
+ }, "sponsor")]
548
+ }), /*#__PURE__*/jsxs("div", {
549
+ ref: textContainerRef,
550
+ className: styles.text,
551
+ children: [/*#__PURE__*/jsx(ScreenElement, {
552
+ placeholder: /*#__PURE__*/jsx(PlaceholderTitle, {
553
+ className: styles.categoryPlaceholder
554
+ }),
555
+ emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
556
+ id: "I5+AHN",
557
+ defaultMessage: [{
558
+ "type": 0,
559
+ "value": "Category"
560
+ }]
561
+ }),
562
+ emptyClassName: styles.emptyCategory,
563
+ isEmpty: !hasCategory,
564
+ children: hasCategory ? /*#__PURE__*/jsx("div", {
565
+ className: styles.categoryContainer,
566
+ style: {
567
+ width: textContainerHeight
568
+ },
569
+ children: /*#__PURE__*/jsx(Heading, _objectSpread(_objectSpread({
570
+ className: styles.category
571
+ }, category), {}, {
572
+ textStyle: _objectSpread(_objectSpread({}, categoryTextStyle), {}, {
573
+ fontWeight: categoryFontWeight,
574
+ fontStyle: categoryFontStyle
575
+ })
576
+ }))
577
+ }) : null
578
+ }, "category"), /*#__PURE__*/jsxs("div", {
579
+ className: classNames([styles.textContent, _defineProperty(_defineProperty({}, styles.isPlaceholder, isPlaceholder), styles.withoutCategory, !hasCategory)]),
580
+ children: [/*#__PURE__*/jsx(ScreenElement, {
581
+ placeholder: "title",
582
+ emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
583
+ id: "2c1WFV",
584
+ defaultMessage: [{
585
+ "type": 0,
586
+ "value": "Title"
587
+ }]
588
+ }),
589
+ emptyClassName: styles.emptyText,
590
+ isEmpty: !hasTitle,
591
+ children: hasTitle ? /*#__PURE__*/jsxs("div", {
592
+ className: styles.titleContainer,
593
+ children: [/*#__PURE__*/jsx(Heading, _objectSpread(_objectSpread({
594
+ className: styles.title
595
+ }, title), {}, {
596
+ textStyle: _objectSpread(_objectSpread({}, titleTextStyle), {}, {
597
+ fontWeight: titleFontWeight,
598
+ fontStyle: titleFontStyle
599
+ })
600
+ })), /*#__PURE__*/jsx("hr", {
601
+ className: styles.border,
602
+ style: {
603
+ borderColor: finalBorderColor
604
+ }
605
+ })]
606
+ }) : null
607
+ }, "title"), /*#__PURE__*/jsx(ScreenElement, {
608
+ placeholder: /*#__PURE__*/jsx(PlaceholderText, {
609
+ className: styles.datePlaceholder
610
+ }),
611
+ children: hasDate ? /*#__PURE__*/jsxs(Fragment, {
612
+ children: [/*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({
613
+ className: styles.date
614
+ }, date), {}, {
615
+ textStyle: _objectSpread(_objectSpread({}, dateTextStyle), {}, {
616
+ fontStyle: dateFontStyle
617
+ })
618
+ })), /*#__PURE__*/jsx("hr", {
619
+ className: styles.border,
620
+ style: {
621
+ borderColor: finalBorderColor
622
+ }
623
+ })]
624
+ }) : null
625
+ }, "date"), /*#__PURE__*/jsx(ScreenElement, {
626
+ placeholder: /*#__PURE__*/jsx(PlaceholderText, {
627
+ className: styles.locationPlaceholder
628
+ }),
629
+ children: hasLocation ? /*#__PURE__*/jsxs(Fragment, {
630
+ children: [/*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({
631
+ className: styles.location
632
+ }, location), {}, {
633
+ textStyle: _objectSpread(_objectSpread({}, locationTextStyle), {}, {
634
+ fontStyle: locationFontStyle
635
+ })
636
+ })), /*#__PURE__*/jsx("hr", {
637
+ className: styles.border,
638
+ style: {
639
+ borderColor: finalBorderColor
640
+ }
641
+ })]
642
+ }) : null
643
+ }, "location"), /*#__PURE__*/jsx(ScreenElement, {
644
+ placeholder: /*#__PURE__*/jsx(PlaceholderText, {
645
+ className: styles.descriptionPlaceholder
646
+ }),
647
+ emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
648
+ id: "EQdIAR",
649
+ defaultMessage: [{
650
+ "type": 0,
651
+ "value": "Description"
652
+ }]
653
+ }),
654
+ emptyClassName: styles.emptyText,
655
+ isEmpty: !hasDescription,
656
+ children: hasDescription ? /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({
657
+ className: styles.description
658
+ }, description), {}, {
659
+ textStyle: _objectSpread(_objectSpread({}, descriptionTextStyle), {}, {
660
+ fontWeight: descriptionFontWeight
661
+ })
662
+ })) : null
663
+ }, "description")]
664
+ })]
665
+ })]
666
+ }) : null, !isPlaceholder ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-bottom") : null, !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
667
+ className: classNames([styles.footer, _defineProperty({}, styles.disabled, !scrolledBottom && !visualModalOpened)]),
668
+ style: {
669
+ paddingTop: spacing,
670
+ paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
671
+ paddingRight: Math.max(0, viewerBottomSidesWidth - spacing)
672
+ },
673
+ children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
674
+ }, "footer") : null]
675
+ })
676
+ })
677
+ }), !isPlaceholder ? /*#__PURE__*/jsxs(Fragment, {
678
+ children: [/*#__PURE__*/jsx(Background, {
679
+ background: background,
680
+ width: width,
681
+ height: height,
682
+ resolution: resolution,
683
+ playing: backgroundPlaying && !visualModalOpened,
684
+ muted: muted || visualModalOpened,
685
+ shouldLoad: mediaShouldLoad,
686
+ mediaRef: mediaRef,
687
+ withoutVideo: isPreview,
688
+ className: styles.background
689
+ }), backgroundText !== null && finalBackgroundText.length > 0 ? /*#__PURE__*/jsx(Container, {
690
+ width: width,
691
+ height: height,
692
+ className: styles.backgroundTextContainer,
693
+ children: (finalBackgroundText || []).map(function (line, i) {
694
+ return /*#__PURE__*/jsx("div", {
695
+ className: classNames([styles.backgroundText], _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.hidden, !current && isView && !isPreview), styles.didAnimate, didAnimate), styles.animateFromBottom, backgroundAnimationStarted && i % 2 !== 0), styles.animateFromTop, backgroundAnimationStarted && i % 2 === 0)),
696
+ style: _objectSpread({
697
+ animationDelay: "".concat(i * 100, "ms")
698
+ }, getStyleFromText(_objectSpread(_objectSpread({}, backgroundTextStyle), {}, {
699
+ fontStyle: backgroundFontStyle
700
+ }))),
701
+ children: line
702
+ }, "reco-background-text-".concat(i + 1));
703
+ })
704
+ }) : null]
705
+ }) : null]
706
+ });
687
707
  }
688
708
 
689
709
  var definition = [{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-urbania-recommendation",
3
- "version": "0.4.48",
3
+ "version": "0.4.50",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -61,18 +61,18 @@
61
61
  },
62
62
  "dependencies": {
63
63
  "@babel/runtime": "^7.28.6",
64
- "@micromag/core": "^0.4.48",
65
- "@micromag/element-background": "^0.4.48",
66
- "@micromag/element-button": "^0.4.48",
67
- "@micromag/element-container": "^0.4.48",
68
- "@micromag/element-footer": "^0.4.48",
69
- "@micromag/element-header": "^0.4.48",
70
- "@micromag/element-heading": "^0.4.48",
71
- "@micromag/element-layout": "^0.4.48",
72
- "@micromag/element-scroll": "^0.4.48",
73
- "@micromag/element-text": "^0.4.48",
74
- "@micromag/element-visual": "^0.4.48",
75
- "@micromag/transforms": "^0.4.48",
64
+ "@micromag/core": "^0.4.50",
65
+ "@micromag/element-background": "^0.4.50",
66
+ "@micromag/element-button": "^0.4.50",
67
+ "@micromag/element-container": "^0.4.50",
68
+ "@micromag/element-footer": "^0.4.50",
69
+ "@micromag/element-header": "^0.4.50",
70
+ "@micromag/element-heading": "^0.4.50",
71
+ "@micromag/element-layout": "^0.4.50",
72
+ "@micromag/element-scroll": "^0.4.50",
73
+ "@micromag/element-text": "^0.4.50",
74
+ "@micromag/element-visual": "^0.4.50",
75
+ "@micromag/transforms": "^0.4.50",
76
76
  "classnames": "^2.2.6",
77
77
  "lodash": "^4.17.23",
78
78
  "react-intl": "^8.1.3 || ^10.0.0",
@@ -82,6 +82,6 @@
82
82
  "access": "public",
83
83
  "registry": "https://registry.npmjs.org/"
84
84
  },
85
- "gitHead": "d6772865be1ee3f2d19288ebfbf4b9b6860f4cd7",
85
+ "gitHead": "940d5ca98f8f448b79eaa3e2fa685c3ee95185b8",
86
86
  "types": "es/index.d.ts"
87
87
  }