@redneckz/wildless-cms-uni-blocks 0.14.208 → 0.14.210

package/bundle/bundle.umd.js

@@ -1103,9 +1103,9 @@
             onClose: handleClose,
             iconVersion,
         });
-        return (jsxs("div", { className: style('space-y-xs', className), children: [renderLabel(label), jsxs("div", { className: style('relative', hasOpen ? 'z-20' : 'z-10'), ref: inputRef, children: [jsxs("div", { className: style('h-14 text-l flex justify-between items-center text-primary-text relative z-10', getStyle(isBorder, valid, isDisabled)), onClick: hasOpen ? handleClose : open, children: [jsx("p", { className: "p-m pr-8 flex items-center overflow-hidden text-ellipsis", children: formatOption(value) || placeholder }), renderIcon$1(hasOpen, iconVersion)] }), isSearch && hasOpen ? (jsx("div", { className: style('absolute top-0 w-full z-20'), children: jsx(Input, { type: "text", autoFocus: true, value: query, onChange: setQuery }) })) : null] })] }));
+        return (jsxs("div", { className: style('space-y-xs', className), children: [renderLabel(label), jsxs("div", { className: style('relative', hasOpen ? 'z-20' : 'z-10'), ref: inputRef, children: [jsxs("div", { className: style('h-14 [&>*]:p-m pr-8 text-l flex items-center justify-between text-primary-text relative z-10 overflow-hidden', getStyle(isBorder, valid, isDisabled)), onClick: hasOpen ? handleClose : open, children: [jsx("p", { className: "line-clamp-2 text-ellipsis", children: formatOption(value) || placeholder }), renderIcon$1(hasOpen, iconVersion)] }), isSearch && hasOpen ? (jsx("div", { className: style('absolute top-0 w-full z-20'), children: jsx(Input, { type: "text", autoFocus: true, value: query, onChange: setQuery }) })) : null] })] }));
     });
-    const renderIcon$1 = (isOpen, iconVersion) => (jsx(Icon, { className: style('absolute right-3', isOpen ? '' : 'rotate-180'), iconVersion: iconVersion, name: "ArrowUpIcon", width: "16", height: "16" }));
+    const renderIcon$1 = (isOpen, iconVersion) => (jsx(Icon, { className: style('absolute right-3 flex self-center', isOpen ? '' : 'rotate-180'), iconVersion: iconVersion, name: "ArrowUpIcon", width: "16", height: "16" }));
     const getStyle = (isBorder, valid, disabled) => style(isBorder ? 'border rounded-md ' : '', isBorder && !disabled ? 'hover:border-primary-hover' : '', disabled ? 'bg-main-divider' : 'cursor-pointer ', valid ? 'border-gray' : 'border-error');
 
     const SelectControl = JSX(({ className = '', label, error, ...rest }) => (jsxs("div", { className: className, children: [jsx(Select, { ...rest, valid: !error, label: rest?.errors ? `${label}*` : label }), renderErrorText(error)] })));
@@ -3061,7 +3061,7 @@
                 onScrollRight();
             }
         }, [scrollRight, onScrollRight, hasEdgeBlocks, canScrollLeft, activeIndex, itemCount]);
-        return (jsxs("div", { className: "hidden @lg:block", children: [renderBlur(scroll), canMoveLeft ? (jsx(ScrollLeftButton, { className: style(scrollButtonStyle$1, arrowsPadded ? 'left-1 @lg:left-8' : 'left-0'), onClick: handleScrollLeft })) : null, canMoveRight ? (jsx(ScrollRightButton, { className: style(scrollButtonStyle$1, arrowsPadded ? 'right-1 @lg:right-8' : 'right-0'), onClick: handleScrollRight })) : null] }));
+        return (jsxs("div", { className: "m:hidden block", children: [renderBlur(scroll), canMoveLeft ? (jsx(ScrollLeftButton, { className: style(scrollButtonStyle$1, arrowsPadded ? 'left-1 m:left-8' : 'left-0'), onClick: handleScrollLeft })) : null, canMoveRight ? (jsx(ScrollRightButton, { className: style(scrollButtonStyle$1, arrowsPadded ? 'right-1 m:right-8' : 'right-0'), onClick: handleScrollRight })) : null] }));
     });
     const renderBlur = (scroll) => (jsxs("div", { children: [scroll.canScrollLeft ? (jsx("div", { className: style(blurBaseStyle, 'left-0 bg-opacity-from-white group-data-secondary:bg-none') })) : null, scroll.canScrollRight ? (jsx("div", { className: style(blurBaseStyle, 'right-0 bg-opacity-to-white group-data-secondary:bg-none') })) : null] }));
 
@@ -3158,25 +3158,24 @@
     const CarouselCatalogCard = JSX(({ className = '', title, description, image, price, button, colors = [], align = 'text-left', padding, ...rest }) => (jsx(BlockWrapper, { className: style('flex flex-col justify-left', className), defaultPadding: "p-2xl", ...rest, children: jsxs(BaseTile, { className: "h-full", padding: padding, title: jsx(Headline, { title: title, description: description, headlineVersion: "XS", isEmbedded: true, align: align }), rightImage: image?.src ? (jsx(Img, { className: "flex justify-center align-center mb-xl", image: image })) : null, buttons: renderButtonsSection([button], { buttonClassName: 'w-full self-end' }), children: [colors?.length ? (jsxs("div", { className: "flex text-secondary-text mb-m", children: [jsx("div", { className: "mr-xs", children: jsx(Text, { size: "text-s", align: "text-left", font: "font-light", children: "\u0426\u0432\u0435\u0442\u0430:" }) }), colors.map(renderColorOption)] })) : null, price ? (jsxs(Text, { size: "text-h3", align: "text-left", children: [price, "\u00A0\u20BD"] })) : null] }) })));
     const renderColorOption = (color, i) => (jsx("figure", { className: `w-6 h-6 ml-s border border-solid border-main-divider rounded-full ${cardStyleMap[color]}` }, String(i)));
 
+    const IconSize = '24';
+    const IconVersion = 'black';
+
     const LINK_CLASS_NAME = `absolute border
-  bg-white flex justify-between group-hover/link:text-primary-main`;
-    const LINK_BORDER_CLASS_NAME = 'hidden xl:block absolute w-full h-full border border-white';
-    const CarouselLinkButton = JSX(({ className = '', ...linkProps }) => {
+  bg-white flex items-center justify-between group-hover/link:text-primary-main`;
+    const LINK_BORDER_CLASS_NAME = 'absolute w-full h-full border border-white';
+    const CarouselLinkButton = JSX(({ className = '', icon, ...linkProps }) => {
         const link = useLink();
         const { text, href, target, onClick } = link(linkProps);
-        return text ? (jsx("div", { className: style('flex relative group/link pl-s pb-s min-w-64 xl:min-w-72', className), children: jsxs("div", { className: "relative min-h-16 w-full", children: [jsxs("a", { className: style(LINK_CLASS_NAME, 'rounded-md lg:rounded-none w-full p-lg whitespace-nowrap z-10'), role: "link", href: href, target: target, onClick: onClick, children: [jsx(Text, { size: "text-l", font: "font-light", color: "text-primary-text", children: text }), jsx(Img, { className: "group-hover/link:brightness-100 hidden xl:block ml-2xs", image: { icon: 'ArrowRightIcon', iconVersion: 'black' }, imageClassName: "group-hover/link:text-primary-main hidden xl:block", width: "24", height: "24" })] }), jsx("div", { className: style(LINK_BORDER_CLASS_NAME, '-bottom-1.5 -left-1.5') }), jsx("div", { className: style(LINK_BORDER_CLASS_NAME, '-bottom-3 -left-3') })] }) })) : null;
+        return text ? (jsx("div", { className: style('flex relative group/link pl-s pb-s sm:pr-2xs min-w-64 sm:min-w-72', className), children: jsxs("div", { className: "relative min-h-16 w-full pb-lg sm:pb-0", children: [jsxs("a", { className: style(LINK_CLASS_NAME, 'flex rounded-md lg:rounded-none w-full w-full p-lg whitespace-nowrap z-10'), role: "link", href: href, target: target, onClick: onClick, children: [jsxs("div", { className: "flex items-center space-x-lg", children: [icon ? (jsx(Img, { imageClassName: "text-green-dark", image: icon, width: IconSize, height: IconSize })) : null, jsx(Text, { size: "text-l", font: "font-light", color: "text-primary-text", children: text })] }), jsx(Img, { className: "group-hover/link:brightness-100 sm:ml-2xs", image: { icon: 'ArrowRightIcon', iconVersion: IconVersion }, imageClassName: "group-hover/link:text-primary-main", width: IconSize, height: IconSize })] }), jsx("div", { className: style(LINK_BORDER_CLASS_NAME, '-bottom-1 -left-1') }), jsx("div", { className: style(LINK_BORDER_CLASS_NAME, '-bottom-2 -left-2') })] }) })) : null;
     });
 
-    const MAX_LINKS_COUNT = 10;
-
-    const CarouselLinks = JSX(({ className, additionalDescription, description, links, title, ...rest }) => (jsx(BlockWrapper, { className: style('overflow-hidden', className), ...rest, children: jsxs("div", { className: "flex flex-col @6xl:flex-row gap-m", children: [jsxs("div", { children: [jsx(Headline, { isEmbedded: true, title: title, description: description, as: "h1", align: "text-left" }), jsx(Headline, { className: "pt-m", description: additionalDescription, align: "text-left", isEmbedded: true })] }), links?.length ? renderLinks(links, '@6xl:min-w-[672px] p-0 justify-self-end') : null] }) })));
+    const CarouselLinks = JSX(({ className, additionalDescription, description, links, title, ...rest }) => (jsx(BlockWrapper, { defaultPadding: "p-5xl", className: style('overflow-hidden', className), ...rest, children: jsxs("div", { className: "flex flex-col m:flex-row gap-s justify-between", children: [jsxs("div", { className: "w-full m:w-1/3", children: [jsx(Headline, { isEmbedded: true, title: title, description: description, as: "h1", align: "text-left" }), jsx(Headline, { className: "pt-m", description: additionalDescription, align: "text-left", isEmbedded: true })] }), links?.length ? renderLinks(links, 'm:justify-self-end m:pt-s w-full m:w-2/3') : null] }) })));
     const renderLinks = (links, className = '') => {
-        const itemCount = Math.ceil(links.length / MAX_LINKS_COUNT);
-        return (jsx(Carousel, { className: className, version: "secondary", itemCount: itemCount, arrowsPadded: false, padding: "p-0", children: Array.from({ length: itemCount })
+        const itemCount = Math.ceil(links.length / 3);
+        return (jsx(Carousel, { className: className, version: "secondary", itemCount: itemCount, arrowsPadded: false, padding: "p-0", visibleItemCount: 0, children: Array.from({ length: itemCount })
                 .fill(null)
-                .map((_, groupIndex) => (jsx("div", { className: style('flex flex-wrap gap-2xs self-start xl:justify-center @5xl:grid @5xl:grid-cols-2'), children: links
-                    .slice(groupIndex * MAX_LINKS_COUNT, (groupIndex + 1) * MAX_LINKS_COUNT)
-                    .map((link, index) => (jsx(CarouselLinkButton, { ...link }, String(index)))) }, String(groupIndex)))) }));
+                .map((_, groupIndex) => (jsx("div", { className: style('flex flex-wrap gap-2xs m:justify-center'), children: links.slice(groupIndex * 3, (groupIndex + 1) * 3).map((link, index) => (jsx(CarouselLinkButton, { ...link }, String(index)))) }, String(groupIndex)))) }));
     };
 
     const LinkWrapper = JSX(({ className = '', href, target, isRemote = false, children }) => {
@@ -3737,7 +3736,7 @@
     };
 
     const icon = { icon: 'GpsIcon' };
-    const CurrentLocation = JSX(({ className = '', address }) => (jsxs("div", { className: `flex gap-s ${className}`, children: [jsx(RoundedIcon, { ...icon, iconBgVersion: "primary" }), jsxs("div", { className: "space-y-2xs", children: [address ? (jsx(Paragraph, { size: "text-l", color: "text-primary-main", children: address })) : null, jsx(Paragraph, { size: "text-m", color: "text-secondary-text", children: "\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0437\u0430\u0434\u0430\u043D\u043D\u043E\u0433\u043E \u043E\u0444\u0438\u0441\u0430" })] })] })));
+    const CurrentLocation = JSX(({ className = '', address }) => (jsxs("div", { className: `flex gap-s ${className}`, children: [jsx(RoundedIcon, { ...icon, iconBgVersion: "primary", className: "shrink-0" }), jsxs("div", { className: "space-y-2xs whitespace-pre-wrap", children: [address ? (jsx(Paragraph, { size: "text-l", color: "text-primary-main", children: address })) : null, jsx(Paragraph, { size: "text-m", color: "text-secondary-text", children: "\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0437\u0430\u0434\u0430\u043D\u043D\u043E\u0433\u043E \u043E\u0444\u0438\u0441\u0430" })] })] })));
 
     const roundTo = (value, precision = 2) => {
         const factor = 10 ** precision;
@@ -3789,7 +3788,7 @@
             selectBuy: currencyRatesSell?.[0]?.currency?.currency || Currency.USD,
         });
         const handleSetCalcState = useCallback((newState) => setCalcState((oldState) => ({ ...oldState, ...newState })), []);
-        return (jsxs("div", { className: `grid gap-m pt-2xl ${className}`, children: [renderInput({
+        return (jsxs("div", { className: `flex flex-col gap-m pt-2xl ${className}`, children: [renderInput({
                     placeholder: 'Хочу продать',
                     rates: currencyRatesSell,
                     selected: calcState.selectSell,
@@ -3859,7 +3858,7 @@
         currencyRatesBuy.unshift({ currency: { currency: Currency.RUB } });
         const currencyRatesSell = currencyRates.filter((_) => _.saleExchangeRate);
         currencyRatesSell.push({ currency: { currency: Currency.RUB } });
-        return (jsx(BlockWrapper, { className: style('box-border min-h-80', className), ...rest, children: jsx(BaseTile, { className: "h-full", title: jsx(Heading, { headingType: "h4", title: title, className: "whitespace-pre-wrap" }), children: jsxs("div", { className: "flex gap-6xl flex-wrap", children: [jsxs("div", { children: [currencyRates ? (jsx(CurrencyTable, { className: "mb-xl", exchangeCurrencyItems: currencyRates })) : null, jsx(CurrentLocation, { address: exchangeRates?.address })] }), currencyRates.length && currencyRatesBuy.length && currencyRatesSell.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow", currencyRatesBuy: currencyRatesBuy, currencyRatesSell: currencyRatesSell, button: button })) : null] }) }) }));
+        return (jsx(BlockWrapper, { className: style('box-border min-h-80', className), ...rest, children: jsx(BaseTile, { className: "h-full", title: jsx(Heading, { headingType: "h4", title: title, className: "whitespace-pre-wrap" }), children: jsxs("div", { className: "flex w-full gap-6xl flex-wrap sm:flex-nowrap", children: [jsxs("div", { className: "max-w-1/2", children: [currencyRates ? (jsx(CurrencyTable, { className: "mb-xl", exchangeCurrencyItems: currencyRates })) : null, jsx(CurrentLocation, { address: exchangeRates?.address })] }), currencyRates.length && currencyRatesBuy.length && currencyRatesSell.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow w-1/2", currencyRatesBuy: currencyRatesBuy, currencyRatesSell: currencyRatesSell, button: button })) : null] }) }) }));
     });
     const getCurrencyRates = (currencies) => {
         return currencies?.filter((_) => [1, 2, 3].includes(_?.currency?.id)) || [];
@@ -6055,7 +6054,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.207";
+    const packageVersion = "0.14.209";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;