@trafilea/afrodita-components 6.21.1 → 6.21.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +1 -0
- package/build/index.esm.js +16 -10
- package/build/index.esm.js.map +1 -1
- package/build/index.js +16 -10
- package/build/index.js.map +1 -1
- package/build/theme/thespadr.theme.js +1 -1
- package/package.json +1 -1
package/build/index.d.ts
CHANGED
|
@@ -3673,6 +3673,7 @@ declare type VideoProps = {
|
|
|
3673
3673
|
thumbnail: string;
|
|
3674
3674
|
source: string;
|
|
3675
3675
|
height?: string;
|
|
3676
|
+
withProgressBar?: boolean;
|
|
3676
3677
|
} & DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>;
|
|
3677
3678
|
declare const Video: React.FC<VideoProps>;
|
|
3678
3679
|
|
package/build/index.esm.js
CHANGED
|
@@ -11924,10 +11924,16 @@ var SliderNavigation = function (_a) {
|
|
|
11924
11924
|
} }, { children: jsx(StyledSlider, __assign$1({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop && dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles && styles.dotsSpacing }, { children: children }), void 0) }), void 0));
|
|
11925
11925
|
};
|
|
11926
11926
|
|
|
11927
|
-
var Image$1 = newStyled.img(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n ", "\n\n width:
|
|
11927
|
+
var Image$1 = newStyled.img(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n ", "\n\n width: ", ";\n height: ", ";\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: ", ";\n height: ", ";\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
11928
11928
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11929
11929
|
return borderRadiusVariant &&
|
|
11930
11930
|
"\n border-radius: 20px;\n ";
|
|
11931
|
+
}, function (_a) {
|
|
11932
|
+
var theme = _a.theme;
|
|
11933
|
+
return theme.component.gallery.thumbnail.desktop.width;
|
|
11934
|
+
}, function (_a) {
|
|
11935
|
+
var theme = _a.theme;
|
|
11936
|
+
return theme.component.gallery.thumbnail.desktop.height;
|
|
11931
11937
|
}, function (_a) {
|
|
11932
11938
|
var selected = _a.selected, theme = _a.theme, previewImgBorderColor = _a.previewImgBorderColor;
|
|
11933
11939
|
return selected
|
|
@@ -13585,12 +13591,12 @@ var templateObject_1$11, templateObject_2$J, templateObject_3$A, templateObject_
|
|
|
13585
13591
|
|
|
13586
13592
|
var Video$1 = function (_a) {
|
|
13587
13593
|
var _b, _c, _d, _e;
|
|
13588
|
-
var source = _a.source, thumbnail = _a.thumbnail, height = _a.height, className = _a.className, rest = __rest(_a, ["source", "thumbnail", "height", "className"]);
|
|
13594
|
+
var source = _a.source, thumbnail = _a.thumbnail, height = _a.height, className = _a.className, _f = _a.withProgressBar, withProgressBar = _f === void 0 ? true : _f, rest = __rest(_a, ["source", "thumbnail", "height", "className", "withProgressBar"]);
|
|
13589
13595
|
var videoRef = useRef(null);
|
|
13590
|
-
var
|
|
13591
|
-
var
|
|
13592
|
-
var
|
|
13593
|
-
var
|
|
13596
|
+
var _g = useState(true), isLoading = _g[0], setIsLoading = _g[1];
|
|
13597
|
+
var _h = useState(false), isPlaying = _h[0], setIsPlaying = _h[1];
|
|
13598
|
+
var _j = useState(0), videoProgress = _j[0], setVideoProgress = _j[1];
|
|
13599
|
+
var _k = useState(false), debouncePlay = _k[0], setDebouncePlay = _k[1];
|
|
13594
13600
|
var isStarted = videoProgress > 0;
|
|
13595
13601
|
var progress = videoProgress / ((_c = (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.duration) !== null && _c !== void 0 ? _c : 0);
|
|
13596
13602
|
var hideProgressBar = videoProgress === ((_e = (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.duration) !== null && _e !== void 0 ? _e : 0) || videoProgress === 0;
|
|
@@ -13620,7 +13626,7 @@ var Video$1 = function (_a) {
|
|
|
13620
13626
|
setVideoProgress(videoRef.current.currentTime);
|
|
13621
13627
|
}
|
|
13622
13628
|
};
|
|
13623
|
-
return (jsxs$1(Container$O, __assign$1({ className: className }, { children: [!isLoading && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), jsxs$1(HTMLVideo, __assign$1({}, rest, { "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
13629
|
+
return (jsxs$1(Container$O, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), jsxs$1(HTMLVideo, __assign$1({}, rest, { "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
13624
13630
|
};
|
|
13625
13631
|
|
|
13626
13632
|
var Container$N = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"], ["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"])), function (_a) {
|
|
@@ -13650,7 +13656,7 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
13650
13656
|
return (jsxs$1(Container$N, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxs$1(Fragment$2, { children: [withZoom ? (jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
|
|
13651
13657
|
alt: content.alt,
|
|
13652
13658
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13653
|
-
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0)) : (jsx$1(Image$3, { width: position == 'horizontal' ? '360px' : '530px', height:
|
|
13659
|
+
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0)) : (jsx$1(Image$3, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager" }, void 0)), jsx$1(TopTagContainer$6, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$6, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer$1, { children: topRightTag }, void 0)] }, void 0)), isVideo && jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13654
13660
|
};
|
|
13655
13661
|
|
|
13656
13662
|
var Container$M = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"], ["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"])));
|
|
@@ -20256,10 +20262,10 @@ var ProductGalleryMobileV4 = function (_a) {
|
|
|
20256
20262
|
}, []);
|
|
20257
20263
|
return (jsx$1(Container$4, __assign$1({ "data-testid": "product-gallery-mobile" }, { children: jsxs$1(SliderContainer, __assign$1({ "data-testid": productImageDataTestId, ref: sliderWrapper }, { children: [jsx$1(Slider, __assign$1({}, SETTINGS, { lazyLoad: "progressive", nextArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button, { children: jsx$1(Icon.Arrows.ChevronRight, { height: "21px", width: "21px", fill: colors.shades[700].color }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button, { children: jsx$1(Icon.Arrows.ChevronLeft, { height: "21px", width: "21px", fill: colors.shades[700].color }, void 0) }, void 0) }, void 0), asNavFor: nav2, ref: function (slider) { return (slick.current = slider); } }, { children: images.map(function (_a) {
|
|
20258
20264
|
var url = _a.url, key = _a.key, alt = _a.alt;
|
|
20259
|
-
return (jsxs$1("div", { children: [jsx$1(StyledImage, { alt: alt, src: url, objectFit: "cover", width: theme.component.gallery.mainImgWidth, height: theme.component.gallery.mainImgHeight }, void 0), jsx$1(TopTagContainer$2, __assign$1({ "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$2, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, key));
|
|
20265
|
+
return (jsxs$1("div", { children: [jsx$1(StyledImage, { alt: alt, src: url, objectFit: "cover", width: theme.component.gallery.mainImgWidth, height: theme.component.gallery.mainImgHeight, loading: "eager" }, void 0), jsx$1(TopTagContainer$2, __assign$1({ "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$2, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, key));
|
|
20260
20266
|
}) }), void 0), jsx$1(SliderThumbnail, __assign$1({ asNavFor: nav1, ref: function (slider) { return (thumbnailRef.current = slider); } }, (thumbnailSettings || THUMBNAIL_SETTINGS), { lazyLoad: "progressive" }, { children: images.map(function (_a) {
|
|
20261
20267
|
var url = _a.url, key = _a.key, alt = _a.alt;
|
|
20262
|
-
return (jsx$1(SlideItem, __assign$1({ paddingRight: imagesSliderConfig === null || imagesSliderConfig === void 0 ? void 0 : imagesSliderConfig.spacesBetweenImages }, { children: jsx$1(ThumbnailImage, __assign$1({ alt: "".concat(alt, "-thumbnail"), src: url }, imagesSliderConfig), void 0) }), key));
|
|
20268
|
+
return (jsx$1(SlideItem, __assign$1({ paddingRight: imagesSliderConfig === null || imagesSliderConfig === void 0 ? void 0 : imagesSliderConfig.spacesBetweenImages }, { children: jsx$1(ThumbnailImage, __assign$1({ alt: "".concat(alt, "-thumbnail"), src: url }, imagesSliderConfig, { loading: "eager" }), void 0) }), key));
|
|
20263
20269
|
}) }), void 0)] }), void 0) }), void 0));
|
|
20264
20270
|
};
|
|
20265
20271
|
|