@trafilea/afrodita-components 6.10.0 → 6.11.1

package/build/index.d.ts

@@ -2290,6 +2290,7 @@ declare type DropdownOption<T> = {
     label: string;
     value: T;
     disabled: boolean;
+    imageURL?: string;
 };
 declare type SizeOption = {
     label: string;
@@ -2525,6 +2526,7 @@ declare type CommonProps<T> = {
     testId?: string;
     required?: string;
     showRequiredPlaceholder?: boolean;
+    imageURL?: string;
 };
 declare type ControlledProps<T> = {
     value: Value<T>;
@@ -3480,6 +3482,12 @@ declare type SpinnerProps = {
 };
 declare const Spinner: React.FC<SpinnerProps>;
 
+declare type VideoProps = {
+    thumbnail: string;
+    source: string;
+};
+declare const Video: React.FC<VideoProps>;
+
 declare const useOnClickOutside: <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: (event: Event) => void) => void;
 
 declare type UseWindowDimensions = (breakpoints?: ThemeBreakpoints, options?: {
@@ -3505,21 +3513,20 @@ declare global {
     }
 }
 
+declare type BuildImageUrl = ({ src, width, }: {
+    cdn: string;
+    src: string;
+    width?: string | number;
+    height?: string | number;
+    quality?: string | number;
+}) => string;
+declare const buildImageUrl: BuildImageUrl;
+
 /**
  * @returns number formatted with "," and 2 decimals as string
  */
 declare const decimalFormat: (number: number) => string;
 
-declare const isEmpty: (value: string) => boolean;
-declare const isEmail: (value: string) => boolean;
-declare const isNumber: (value: string) => boolean;
-declare const isPhoneNumber: (value: string) => boolean;
-declare const isValidDate: (value: string) => boolean;
-
-declare const simulateMouseClick: (element: HTMLElement) => void;
-
-declare const sliceString: (str: string, maxLength: number) => string;
-
 declare const formatPrice: (value: number, { locale, currency }?: {
     locale?: string | undefined;
     currency?: string | undefined;
@@ -3529,4 +3536,14 @@ declare const getSrcSet: (imgLink: string, ...breakpoints: number[]) => string;
 
 declare const mediaQueries: facepaint.DynamicStyleFunction;
 
-export { AbsorbencyLevel, Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipV2, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, BuyNowPayLater, CTAProps, _default as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ColorPickerOption, ComponentPosition, ComponentSize, ContentType, index_d as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, HurryUp, HurryUpProps, Icon, IconButton, IconProps, IconWithOpacityProps, IconsWithTitle, Image, ImageCardWithDescription, ImageProps, Input, InputValidationType, Icon$1 as LibIcon, IconProps$1 as LibIconProps, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, Pattern, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, PriceLabelV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProgressBar, QuantityPicker, RadioGroupInput, RadioGroupOption, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchBarOptionItem, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeDropdown, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, SpinnerProps, StarList, StrengthBars, Tab, Tabs, Text, TextButton, TextWithImage, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeProviderProps, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, WithTestId, componentSizeMapper, decimalFormat, formatPrice, getSrcSet, imageVideoProps, isEmail, isEmpty, isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
+declare const simulateMouseClick: (element: HTMLElement) => void;
+
+declare const sliceString: (str: string, maxLength: number) => string;
+
+declare const isEmpty: (value: string) => boolean;
+declare const isEmail: (value: string) => boolean;
+declare const isNumber: (value: string) => boolean;
+declare const isPhoneNumber: (value: string) => boolean;
+declare const isValidDate: (value: string) => boolean;
+
+export { AbsorbencyLevel, Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipV2, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, BuyNowPayLater, CTAProps, _default as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ColorPickerOption, ComponentPosition, ComponentSize, ContentType, index_d as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, HurryUp, HurryUpProps, Icon, IconButton, IconProps, IconWithOpacityProps, IconsWithTitle, Image, ImageCardWithDescription, ImageProps, Input, InputValidationType, Icon$1 as LibIcon, IconProps$1 as LibIconProps, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, Pattern, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, PriceLabelV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProgressBar, QuantityPicker, RadioGroupInput, RadioGroupOption, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchBarOptionItem, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeDropdown, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, SpinnerProps, StarList, StrengthBars, Tab, Tabs, Text, TextButton, TextWithImage, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeProviderProps, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, Video, VideoProps, WithTestId, buildImageUrl, componentSizeMapper, decimalFormat, formatPrice, getSrcSet, imageVideoProps, isEmail, isEmpty, isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };

package/build/index.esm.js

@@ -3351,7 +3351,9 @@ var buildImageUrl = function (_a) {
         var source = "/external/".concat(baseUrl.host.replaceAll('.', ''));
         var width = getValidSize(widthString);
         var height = getValidSize(heightString);
-        return "".concat(cdn).concat(source, "/images").concat(baseUrl.pathname, "?width=").concat(width, "&height=").concat(height, "&quality=").concat(quality, "&url=").concat(url);
+        var format = src.includes('.svg') ? '&format=svg' : '';
+        var params = "width=".concat(width, "&height=").concat(height, "&quality=").concat(quality, "&url=").concat(url).concat(format);
+        return "".concat(cdn).concat(source, "/images").concat(baseUrl.pathname, "?").concat(params);
     }
     catch (e) {
         console.warn("[Afrodita][buildImageUrl] [src:".concat(src, "] ERROR:").concat(e));
@@ -4502,38 +4504,6 @@ var decimalFormat = function (number) {
     return number.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
 };
 
-var isEmpty = function (value) {
-    return value.length === 0;
-};
-var isEmail = function (value) {
-    return /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(value);
-};
-var isNumber$1 = function (value) {
-    return /^[0-9]*$/.test(value);
-};
-var isPhoneNumber = function (value) {
-    return /^\d{10}$/.test(value);
-};
-var isValidDate = function (value) {
-    return /^\d{4}-\d{2}-\d{2}$/.test(value);
-};
-
-var mouseClickEvents = ['mousedown', 'click', 'mouseup'];
-var simulateMouseClick = function (element) {
-    mouseClickEvents.forEach(function (mouseEventType) {
-        return element.dispatchEvent(new MouseEvent(mouseEventType, {
-            view: window,
-            bubbles: true,
-            cancelable: true,
-            buttons: 1,
-        }));
-    });
-};
-
-var sliceString = function (str, maxLength) {
-    return str.length > maxLength ? "".concat(str.slice(0, maxLength), "...") : str;
-};
-
 var getSrcSet = function (imgLink) {
     var breakpoints = [];
     for (var _i = 1; _i < arguments.length; _i++) {
@@ -4629,6 +4599,38 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
     literal: true,
 });
 
+var mouseClickEvents = ['mousedown', 'click', 'mouseup'];
+var simulateMouseClick = function (element) {
+    mouseClickEvents.forEach(function (mouseEventType) {
+        return element.dispatchEvent(new MouseEvent(mouseEventType, {
+            view: window,
+            bubbles: true,
+            cancelable: true,
+            buttons: 1,
+        }));
+    });
+};
+
+var sliceString = function (str, maxLength) {
+    return str.length > maxLength ? "".concat(str.slice(0, maxLength), "...") : str;
+};
+
+var isEmpty = function (value) {
+    return value.length === 0;
+};
+var isEmail = function (value) {
+    return /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(value);
+};
+var isNumber$1 = function (value) {
+    return /^[0-9]*$/.test(value);
+};
+var isPhoneNumber = function (value) {
+    return /^\d{10}$/.test(value);
+};
+var isValidDate = function (value) {
+    return /^\d{4}-\d{2}-\d{2}$/.test(value);
+};
+
 var ErrorText = newStyled.h3(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n  color: ", " !important;\n  font-size: 0.75rem;\n  font-weight: 600;\n  margin: 0;\n  font-height: 1rem;\n  margin-left: 0.313rem;\n"], ["\n  color: ", " !important;\n  font-size: 0.75rem;\n  font-weight: 600;\n  margin: 0;\n  font-height: 1rem;\n  margin-left: 0.313rem;\n"])), function (props) { return props.color; });
 var ErrorContainer = newStyled.div(templateObject_2$1c || (templateObject_2$1c = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-top: 12px;\n"], ["\n  display: flex;\n  align-items: center;\n  margin-top: 12px;\n"])));
 var Error$1 = function (_a) {
@@ -4718,7 +4720,7 @@ var BaseDropdownButton = function (_a) {
                             alignItems: 'flex-start',
                             whiteSpace: 'nowrap',
                             overflowX: 'hidden',
-                        } }, { children: [jsx("div", __assign$1({ css: { fontSize: '0.75rem', fontWeight: 400, margin: '0.125rem 0' } }, { children: label }), void 0), children] }), void 0)) : (children), jsxs(StyledIcon$1, __assign$1({ open: open }, { children: [jsx(CloseIcon, { testId: "CloseIcon", height: 0.875, width: 0.875, fill: "inherit" }, void 0), jsx(OpenIcon, { testId: "OpenIcon", height: 0.875, width: 0.875, fill: "inherit" }, void 0)] }), void 0)] }), void 0));
+                        } }, { children: [jsx("div", __assign$1({ css: { fontSize: '0.75rem', fontWeight: 400, margin: '0.125rem 0' } }, { children: label }), void 0), children] }), void 0)) : (jsx(Fragment, { children: children }, void 0)), jsxs(StyledIcon$1, __assign$1({ open: open }, { children: [jsx(CloseIcon, { testId: "CloseIcon", height: 0.875, width: 0.875, fill: "inherit" }, void 0), jsx(OpenIcon, { testId: "OpenIcon", height: 0.875, width: 0.875, fill: "inherit" }, void 0)] }), void 0)] }), void 0));
         } }), void 0));
 };
 var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
@@ -4919,12 +4921,12 @@ var Checkbox = function (_a) {
 var templateObject_1$1L, templateObject_2$1b;
 
 var CustomOption = newStyled.li(function (_a) {
-    var theme = _a.theme, selected = _a.selected, active = _a.active;
+    var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
     return ({
         listStyleType: 'none',
         display: 'flex',
         flexDirection: 'row',
-        alignItems: 'flex-start',
+        alignItems: hasImage ? 'center' : 'flex-start',
         margin: 0,
         cursor: 'pointer',
         padding: theme.component.dropdown.optionPadding,
@@ -4939,11 +4941,11 @@ var CustomOption = newStyled.li(function (_a) {
     });
 });
 function BaseDropdownOption(_a) {
-    var value = _a.value, disabled = _a.disabled, children = _a.children, _b = _a.hasCheckbox, hasCheckbox = _b === void 0 ? false : _b, isSelected = _a.isSelected;
+    var value = _a.value, disabled = _a.disabled, children = _a.children, _b = _a.hasCheckbox, hasCheckbox = _b === void 0 ? false : _b, isSelected = _a.isSelected, _c = _a.hasImage, hasImage = _c === void 0 ? false : _c;
     var theme = useTheme();
     return (jsx$1(BaseSelect$1.Option, __assign$1({ value: value, disabled: disabled, as: Fragment$1 }, { children: function (_a) {
             var selected = _a.selected, active = _a.active;
-            return (jsxs$1(CustomOption, __assign$1({ theme: theme, selected: isSelected || selected, active: active }, { children: [hasCheckbox && (jsx$1(Checkbox, { checked: isSelected || selected, text: "", id: value.key, onChange: console.log, size: ComponentSize.Small, variant: "primary" }, void 0)), children] }), void 0));
+            return (jsxs$1(CustomOption, __assign$1({ theme: theme, selected: isSelected || selected, active: active, hasImage: hasImage }, { children: [hasCheckbox && (jsx$1(Checkbox, { checked: isSelected || selected, text: "", id: value.key, onChange: console.log, size: ComponentSize.Small, variant: "primary" }, void 0)), children] }), void 0));
         } }), void 0));
 }
 
@@ -4996,7 +4998,7 @@ function SimpleDropdown(_a) {
         setSelectedValue(value);
     }, [value, options, initialValue]);
     var DropdownContainer = showRequiredPlaceholder ? Container$16 : Fragment$1;
-    return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: selectedOptionLabel }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
+    return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxs$1(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: [!!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.imageURL) && (jsx$1("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionLabel] }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxs$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsx$1("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
 }
 var templateObject_1$1K, templateObject_2$1a;
 
@@ -19824,5 +19826,5 @@ var Spinner = function (_a) {
     return (jsx$1(Container, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsx$1(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : ComponentSize.Small }, void 0)) }), void 0));
 };
 
-export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipV2, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, Card$2 as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, index$1 as CrossSell, DeliveryDetails, DiscountTag$1 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, PriceLabelV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, componentSizeMapper, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
+export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipV2, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, Card$2 as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, index$1 as CrossSell, DeliveryDetails, DiscountTag$1 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, PriceLabelV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, Video$1 as Video, buildImageUrl, componentSizeMapper, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
 //# sourceMappingURL=index.esm.js.map