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

package/mobile/bundle/bundle.umd.js

@@ -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'];
@@ -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.208";
+    const packageVersion = "0.14.209";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;