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

package/mobile/bundle/bundle.umd.js

@@ -1111,9 +1111,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)] })));
@@ -2974,9 +2974,9 @@
         if (isSingleTab) {
             return renderCalculator(tabs[0]);
         }
-        return tabs.map((tab, index) => (jsx(Foldable, { isFoldButtonOnTop: true, unfoldedByDefault: index === 0, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { isUnfolded: isUnfolded, children: renderCalculator(tab) })), renderFoldButton: renderFoldButton$4(tab) }, index.toString())));
+        return tabs.map((tab, index) => (jsx(Foldable, { isFoldButtonOnTop: true, unfoldedByDefault: index === 0, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { isUnfolded: isUnfolded, children: renderCalculator(tab) })), renderFoldButton: renderFoldButton$3(tab) }, index.toString())));
     };
-    const renderFoldButton$4 = (tab) => ({ isUnfolded, onToggle }) => {
+    const renderFoldButton$3 = (tab) => ({ isUnfolded, onToggle }) => {
         const align = tab.nav?.align || 'text-left';
         return (jsxs("button", { type: "button", onClick: onToggle, className: "w-full p-xl bg-primary-main flex items-center border-b border-white", children: [jsx("div", { className: "w-11 h-11 bg-white rounded-md flex justify-center items-center", children: jsx(Icon, { name: tab.nav?.icon?.icon, iconVersion: "color", width: "24", height: "24" }) }), jsxs("div", { className: "flex-1 flex flex-col pl-s", children: [jsx(Text, { align: align, color: "text-white", children: tab.nav?.title }), jsx(Text, { align: align, size: "text-s", color: "text-white", font: "font-light", children: tab.nav?.description })] }), jsx(Icon, { name: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', iconVersion: "white", width: "24", height: "24" })] }));
     };
@@ -3070,7 +3070,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] }));
 
@@ -3161,38 +3161,25 @@
     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 TextWithIcon = JSX(({ textNode, iconNode, tag, onClick, justifyContent = 'between', className, role, ...rest }) => {
-        const Tag = tag;
-        return (jsxs(Tag, { tag: tag, className: style('flex items-center w-full gap-1', justifyContent === 'between' ? 'justify-between' : 'justify-center', className), onClick: onClick, role: role, ...rest, children: [textNode ? jsx("div", { children: textNode }) : null, iconNode ? jsx("div", { children: iconNode }) : null] }));
-    });
-
-    const DefaultFoldButton = JSX(({ className = '', label, icon, dataTheme = '', disabled = false, onClick }) => (jsx(TextWithIcon, { tag: "button", onClick: onClick, disabled: disabled, "data-theme": dataTheme, justifyContent: "center", role: "button", className: style('py-4 border border-transparent outline-none focus:border-primary-text space-x-s', disabled
-            ? 'bg-main-divider text-main-disabled hover:bg-main-divider'
-            : 'bg-primary-main text-white hover:bg-primary-hove', className), textNode: jsx(Text, { size: "text-h4", children: label }), iconNode: icon ? (jsx(Img, { image: {
-                icon,
-                iconVersion: 'white',
-            }, className: "my-auto", width: "20", height: "20" })) : null })));
-    const renderDefaultFoldButton = ({ isUnfolded, onToggle }) => {
-        const labels = ['Развернуть', 'Скрыть'];
-        const icons = ['ArrowDownIcon', 'ArrowUpIcon'];
-        return (jsx(DefaultFoldButton, { icon: icons[Number(isUnfolded)], label: labels[Number(isUnfolded)], onClick: onToggle }));
-    };
+    const IconSize = '20';
+    const IconVersion = 'color';
 
+    const LINK_CLASS_NAME = `absolute border
+  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('w-full pb-lg', className), children: jsxs("a", { className: "bg-white flex justify-between rounded-md w-full p-lg whitespace-nowrap", 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: "20", height: "20" })) : null, jsx(Text, { size: "text-l", font: "font-light", color: "text-primary-text", children: text })] }), jsx(Icon, { className: "text-green", name: "ArrowRightIcon", width: "20", height: "20" })] }) })) : 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 CarouselLinks = JSX(({ className, additionalDescription, description, links = [], title, ...rest }) => (jsxs(BlockWrapper, { className: className, ...rest, 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) : null] })));
-    const renderLinks = (links, visibleLinksNum = 3) => {
-        const carouselLinks = (links || []).map((link, index) => (jsx(CarouselLinkButton, { ...link }, String(index))));
-        const [visibleLinks, hiddenLinks] = visibleLinksNum > 0
-            ? [carouselLinks.slice(0, visibleLinksNum), carouselLinks.slice(visibleLinksNum)]
-            : [carouselLinks, []];
-        return (jsx("div", { className: "mt-4xl", children: hiddenLinks.length > 0 ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs("div", { children: [jsx("div", { className: "mb-1", children: visibleLinks }), jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenLinks })] })), renderFoldButton: renderFoldButton$3 })) : (jsx("div", { children: visibleLinks })) }));
+    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 / 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 m:justify-center'), children: links.slice(groupIndex * 3, (groupIndex + 1) * 3).map((link, index) => (jsx(CarouselLinkButton, { ...link }, String(index)))) }, String(groupIndex)))) }));
     };
-    const renderFoldButton$3 = ({ isUnfolded, onToggle }) => isUnfolded ? null : (jsx(DefaultFoldButton, { className: "border-t-main-divider/50", icon: "PlusIcon", label: "\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0435\u0449\u0435", onClick: onToggle }));
 
     const LinkWrapper = JSX(({ className = '', href, target, isRemote = false, children }) => {
         const link = useLink({ isRemote });
@@ -3323,6 +3310,23 @@
 
     const isOdd = (n) => n % 2 !== 0;
 
+    const TextWithIcon = JSX(({ textNode, iconNode, tag, onClick, justifyContent = 'between', className, role, ...rest }) => {
+        const Tag = tag;
+        return (jsxs(Tag, { tag: tag, className: style('flex items-center w-full gap-1', justifyContent === 'between' ? 'justify-between' : 'justify-center', className), onClick: onClick, role: role, ...rest, children: [textNode ? jsx("div", { children: textNode }) : null, iconNode ? jsx("div", { children: iconNode }) : null] }));
+    });
+
+    const DefaultFoldButton = JSX(({ className = '', label, icon, dataTheme = '', disabled = false, onClick }) => (jsx(TextWithIcon, { tag: "button", onClick: onClick, disabled: disabled, "data-theme": dataTheme, justifyContent: "center", role: "button", className: style('py-4 border border-transparent outline-none focus:border-primary-text space-x-s', disabled
+            ? 'bg-main-divider text-main-disabled hover:bg-main-divider'
+            : 'bg-primary-main text-white hover:bg-primary-hove', className), textNode: jsx(Text, { size: "text-h4", children: label }), iconNode: icon ? (jsx(Img, { image: {
+                icon,
+                iconVersion: 'white',
+            }, className: "my-auto", width: "20", height: "20" })) : null })));
+    const renderDefaultFoldButton = ({ isUnfolded, onToggle }) => {
+        const labels = ['Развернуть', 'Скрыть'];
+        const icons = ['ArrowDownIcon', 'ArrowUpIcon'];
+        return (jsx(DefaultFoldButton, { icon: icons[Number(isUnfolded)], label: labels[Number(isUnfolded)], onClick: onToggle }));
+    };
+
     const NotFound = JSX(({ title, description }) => (jsxs("div", { className: "bg-white p-6xl py-20 flex gap-s flex-col @xl:items-center", children: [jsx(Img, { image: { icon: 'MagnifierIcon', iconVersion: 'normal' }, width: "120", height: "120" }), jsx(Headline, { title: title, description: description, headlineVersion: "S", isEmbedded: true, align: AlignStyles })] })));
 
     const ICONS$1 = ['ArrowDownIcon', 'ArrowUpIcon'];
@@ -3552,7 +3556,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;
@@ -3604,7 +3608,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,
@@ -3674,7 +3678,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)) || [];
@@ -5676,7 +5680,7 @@
 
     const joinList = (sep) => (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: `sep-${i}` }, el) : [el]), []);
 
-    const packageVersion = "0.14.207";
+    const packageVersion = "0.14.209";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;