@redneckz/wildless-cms-uni-blocks 0.14.533 → 0.14.535

package/bundle/bundle.umd.js

@@ -412,7 +412,7 @@
         '': '',
     };
     /** @deprecated */
-    const buttonStyle = 'text-center font-sans select-none';
+    const buttonStyle$2 = 'text-center font-sans select-none';
     /** @deprecated */
     const iconStyleMap = {
         primary: 'group-hover/btn:brightness-0 group-hover/btn:invert',
@@ -426,7 +426,7 @@
 
     /** @deprecated */
     const getRegularButtonClasses = ({ className, rounded, version, }) => [
-        buttonStyle,
+        buttonStyle$2,
         'border border-transparent inline-block cursor-pointer no-underline focus:border-primary-text focus:border h-fit',
         version ? buttonStyleMap$1[version] : '',
         rounded ? 'rounded-full' : 'rounded-md',
@@ -527,9 +527,9 @@
     const ButtonInner = JSX((props) => {
         const { text, aboveText, appendLeft, appendRight, version = 'primary' } = props;
         const iconHideStyle = isWithText(props) ? 'hidden lg:block' : '';
-        return (jsxs("div", { className: style(getButtonStyle(props), 'flex gap-xs'), children: [appendLeft ? (jsx("div", { className: style(iconHideStyle, iconStyleMap[version]), children: appendLeft })) : null, isWithText(props) ? (jsxs("div", { className: "whitespace-pre", children: [aboveText ? jsx("div", { className: "text-xs font-light text-left", children: aboveText }) : null, jsx("div", { className: `text-left ${aboveText ? 'text-s -mt-3xs' : 'text-l'}`, children: text })] })) : null, appendRight ? (jsx("div", { className: style(iconHideStyle, iconStyleMap[version]), children: appendRight })) : null] }));
+        return (jsxs("div", { className: style(buttonStyle$1(props), 'flex gap-xs'), children: [appendLeft ? (jsx("div", { className: style(iconHideStyle, iconStyleMap[version]), children: appendLeft })) : null, isWithText(props) ? (jsxs("div", { className: "whitespace-pre", children: [aboveText ? jsx("div", { className: "text-xs font-light text-left", children: aboveText }) : null, jsx("div", { className: `text-left ${aboveText ? 'text-s -mt-3xs' : 'text-l'}`, children: text })] })) : null, appendRight ? (jsx("div", { className: style(iconHideStyle, iconStyleMap[version]), children: appendRight })) : null] }));
     });
-    const getButtonStyle = (props) => {
+    const buttonStyle$1 = (props) => {
         const { version, aboveText, rounded } = props;
         if (version === 'link') {
             return '';
@@ -544,7 +544,7 @@
     /** @deprecated */
     const getDisabledButtonClasses = ({ className, rounded, version, }) => [
         'inline-block',
-        buttonStyle,
+        buttonStyle$2,
         version ? buttonDisabledStyleMap[version] : '',
         rounded ? 'rounded-full' : 'rounded-md',
         className,
@@ -873,7 +873,7 @@
         return OutputComponent;
     }
 
-    const ProductBlock = UniBlock(({ className, padding, ...rest }) => (jsx(BlockWrapper, { className: style('overflow-hidden flex flex-col gap-3xl box-border', className), padding: "p-0", ...rest, children: jsx(BaseProductTile, { defaultPadding: "p-6xl", padding: padding, className: "grow h-full", ...rest }) })), { childrenTypes: ['UnitBlock'] });
+    const ProductBlock = UniBlock(({ className, padding, defaultPadding, ...rest }) => (jsx(BlockWrapper, { className: style('overflow-hidden flex flex-col gap-3xl box-border', className), padding: "p-0", ...rest, children: jsx(BaseProductTile, { defaultPadding: defaultPadding || 'p-6xl', padding: padding, className: "grow h-full", ...rest }) })), { childrenTypes: ['UnitBlock'] });
 
     const AdTile = JSX((props) => {
         const { items } = (props.options?.page?.adSourceBook ?? {});
@@ -2123,46 +2123,25 @@
         .filter(([_]) => _ && _.intersectionRatio >= 0.9)
         .map(([, i]) => i);
 
-    const containerStyles = {
-        'horizontal-list': 'mx-auto mt-lg w-fit',
-        'vertical-list': 'absolute flex-col justify-center h-full top-0 left-4',
-    };
     const activeDotStyles = {
         'horizontal-list': 'w-6',
         'vertical-list': 'h-6',
     };
     const dotStyle = 'cursor-pointer rounded-full transition-width duration-300 bg-primary-main group-data-secondary:bg-white';
     const inactiveDotStyle = 'w-2 h-2 opacity-30';
-    const SwipeListDots = JSX(({ className = '', containerRef, activeIndex, dotCount = 0, listType = 'horizontal-list', version, }) => {
-        const handleClick = (idx) => {
-            if (idx !== activeIndex && containerRef?.current) {
-                containerRef.current.children[idx]?.scrollIntoView({
-                    behavior: 'smooth',
-                    block: 'nearest',
-                });
-            }
-        };
-        return dotCount ? (jsx("div", { className: style('flex gap-xs', containerStyles[listType], version ? 'group' : '', className), "data-ver": version, children: Array.from({ length: dotCount })
-                .fill(null)
-                .map((_, idx) => (jsx("div", { className: `${dotStyle} ${idx === activeIndex ? activeDotStyles[listType] : inactiveDotStyle}`, role: "button", "aria-hidden": true, onClick: () => handleClick(idx) }, String(idx)))) })) : null;
-    });
+    const renderDotButton = ({ activeIndex, onClick, listType = 'horizontal-list' }) => (_, idx) => (jsx("div", { className: style(dotStyle, idx === activeIndex ? activeDotStyles[listType] : inactiveDotStyle), role: "button", "aria-hidden": true, onClick: () => onClick(idx) }, String(idx)));
 
-    /** @deprecated */
-    const ArrowButton = JSX(({ className, disabled, ...rest }) => (jsx(LinkButton, { rounded: true, className: style('group/btn w-12 h-12 min-h-12 max-h-12 flex items-center justify-center shadow-main-black', disabled
-            ? 'bg-secondary-light text-secondary-text'
-            : 'bg-white text-primary-text hover:text-primary-main', className || ''), disabled: disabled, ...rest, children: jsx(Img, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border", image: { icon: 'ArrowLeftIcon', iconVersion: 'black' }, imageClassName: "group-hover/btn:text-primary-main", width: "16", height: "16" }) })));
-    /** @deprecated */
-    const ScrollLeftButton = JSX((props) => (jsx(ArrowButton, { ...props, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left" })));
-    /** @deprecated */
-    const ScrollRightButton = JSX((props) => (jsx(ArrowButton, { ...props, className: `${props.className || ''} rotate-180`, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right" })));
-
-    const scrollButtonStyle$2 = 'absolute top-[calc(50%-24px)] z-40';
-    const blurBaseStyle = 'absolute top-0 bottom-0 z-40 hidden @lg:block w-20 pointer-events-none';
-    const SwipeListScrollButtons = JSX(({ className, scroll, hasBlur, arrowsPadded }) => {
-        const { canScrollLeft, canScrollRight, scrollLeft, scrollRight } = scroll;
-        return (jsxs("div", { className: style(className), children: [hasBlur ? renderBlur(scroll) : null, canScrollLeft ? (jsx(ScrollLeftButton, { className: style(scrollButtonStyle$2, arrowsPadded ? 'left-1' : 'left-0'), onClick: scrollLeft })) : null, canScrollRight ? (jsx(ScrollRightButton, { className: style(scrollButtonStyle$2, arrowsPadded ? 'right-1' : 'right-0'), onClick: scrollRight })) : 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] }));
+    const renderNavButton$3 = ({ activeIndex, onClick }) => (nav, i) => {
+        const isActive = i === activeIndex;
+        const btnClassName = isActive
+            ? 'min-w-[350px] bg-white shadow-dark-blue border-none p-6'
+            : 'min-w-72 ease-in duration-300 bg-white/10 px-xl py-lg hover:backdrop-blur';
+        const btnTitleClassName = isActive
+            ? 'text-primary-text text-h6 py-xs'
+            : 'text-l pb-2xs text-secondary-text group-data-secondary:text-white';
+        const btnDescClassName = isActive ? 'text-l' : 'text-m group-data-secondary:text-white/80';
+        return (jsxs("button", { type: "button", onClick: () => onClick(i), "aria-label": nav?.title, className: style('max-h-28 mt-xs ml-xs relative px-xl box-border overflow-hidden text-left grow basis-0 border border-gray group-data-secondary:border-white/50 whitespace-nowrap', btnClassName), children: [jsx("div", { className: btnTitleClassName, children: nav?.title }), jsx("div", { className: style('text-secondary-text font-light', btnDescClassName), children: nav?.description })] }, String(i)));
+    };
 
     const areArraysEqual = (as, bs) => as === bs || Boolean(as && bs && as?.length === bs?.length && as.every((_, i) => _ === bs[i]));
 
@@ -2192,7 +2171,7 @@
         const handleVisibleIndicesChange = useCallback((indices) => {
             setVisibleIndices((prevIndices) => areArraysEqual(prevIndices, indices) ? prevIndices : indices);
             onVisibleIndicesChange && onVisibleIndicesChange(indices);
-        }, [itemCount]);
+        }, [onVisibleIndicesChange]);
         const [minIndex, maxIndex] = visibleIndices.length
             ? [minBy()(visibleIndices), maxBy()(visibleIndices)]
             : [-1, -1];
@@ -2243,6 +2222,58 @@
         ];
     };
 
+    const containerStyles = {
+        'horizontal-list': 'mx-auto mt-lg w-fit',
+        'vertical-list': 'absolute flex-col justify-center h-full top-0 left-4',
+    };
+    const SwipeListDots = JSX(({ className = '', activeIndex = 0, dotCount = 0, listType = 'horizontal-list', version, navButtons = [], containerRef, containerScroll, }) => {
+        const isMobileMode = useMobileMode();
+        const [navRef, navScroll] = useSwipeListScroll({
+            itemCount: navButtons.length,
+        });
+        const scrollOption = getOptions(Boolean(navButtons?.length));
+        useEffect(() => {
+            if (navButtons?.length && activeIndex >= 0 && navRef?.current) {
+                navScroll.scrollTo(activeIndex, scrollOption);
+            }
+        }, [activeIndex]);
+        const onChangeActiveIndex = useCallback((idx) => {
+            if (idx !== activeIndex && containerRef?.current) {
+                containerScroll?.scrollTo(idx, scrollOption);
+            }
+        }, [containerRef?.current]);
+        if (navButtons?.length && !isMobileMode) {
+            return (jsx(SwipeListContainer, { containerRef: navRef, snapAlign: "snap-start", itemClassName: "h-36 flex items-stretch w-screen", gap: 8, children: navButtons.map(renderNavButton$3({ activeIndex, onClick: onChangeActiveIndex })) }));
+        }
+        else if (dotCount) {
+            return (jsx("div", { className: style('flex gap-xs', containerStyles[listType], version ? 'group' : '', className, { 'pb-xl': navButtons?.length && isMobileMode }), "data-ver": version, children: Array.from({ length: dotCount })
+                    .fill(null)
+                    .map(renderDotButton({ activeIndex, onClick: onChangeActiveIndex, listType })) }));
+        }
+        return null;
+    });
+    const getOptions = (isAuto = false) => ({
+        behavior: isAuto ? 'auto' : 'smooth',
+    });
+
+    /** @deprecated */
+    const ArrowButton = JSX(({ className, disabled, ...rest }) => (jsx(LinkButton, { rounded: true, className: style('group/btn w-12 h-12 min-h-12 max-h-12 flex items-center justify-center shadow-main-black', disabled
+            ? 'bg-secondary-light text-secondary-text'
+            : 'bg-white text-primary-text hover:text-primary-main', className || ''), disabled: disabled, ...rest, children: jsx(Img, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border", image: { icon: 'ArrowLeftIcon', iconVersion: 'black' }, imageClassName: "group-hover/btn:text-primary-main", width: "16", height: "16" }) })));
+    /** @deprecated */
+    const ScrollLeftButton = JSX((props) => (jsx(ArrowButton, { ...props, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left" })));
+    /** @deprecated */
+    const ScrollRightButton = JSX((props) => (jsx(ArrowButton, { ...props, className: `${props.className || ''} rotate-180`, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right" })));
+
+    const blurBaseStyle = 'absolute top-0 bottom-0 z-40 hidden @lg:block w-20 pointer-events-none';
+    const SwipeListScrollButtons = JSX(({ className, scroll, hasBlur, arrowsPadded, isBottom }) => {
+        const { canScrollLeft, canScrollRight, scrollLeft, scrollRight } = scroll;
+        const isArrowPadded = arrowsPadded && !isBottom;
+        return (jsxs("div", { className: className, children: [hasBlur ? renderBlur(scroll) : null, canScrollLeft ? (jsx(ScrollLeftButton, { className: style(buttonStyle(isBottom), isArrowPadded ? 'left-1' : 'left-0'), onClick: scrollLeft })) : null, canScrollRight ? (jsx(ScrollRightButton, { className: style(buttonStyle(isBottom), isArrowPadded ? 'right-1' : 'right-0'), onClick: scrollRight })) : 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] }));
+    const buttonStyle = (isBottom = false) => style('absolute z-40', isBottom ? 'bottom-[56px]' : 'top-[calc(50%-24px)]');
+
     const DEFAULT_GAP = 14;
     /*
       Horizontal padding used on a container above SwipeListControl.
@@ -2250,14 +2281,14 @@
       and get rid of a clipping effect caused by overflow: hidden.
      */
     const DEFAULT_PADDING = 16;
-    const SwipeListControl = JSX(({ className, version, gap = DEFAULT_GAP, padding = DEFAULT_PADDING, visibleItemCount = 1, listType = 'horizontal-list', snapAlign, minHeight, showArrows, hasBlur, arrowsPadded, showDots, children, onVisibleIndicesChange, }) => {
+    const SwipeListControl = JSX(({ className, version, gap = DEFAULT_GAP, padding = DEFAULT_PADDING, visibleItemCount = 1, listType = 'horizontal-list', snapAlign, minHeight, showArrows, hasBlur, arrowsPadded, showDots, children, onVisibleIndicesChange, navButtons, }) => {
         const itemCount = Array.isArray(children) ? children.length : 0;
         const [containerRef, scroll] = useSwipeListScroll({
             itemCount,
             onVisibleIndicesChange,
         });
         const [activeIndex] = scroll.visibleIndicesRange;
-        return (jsxs("div", { className: style(className, listType === 'vertical-list' ? 'relative h-full' : ''), children: [jsx(SwipeListContainer, { containerRef: containerRef, activeIndex: activeIndex, visibleItemCount: visibleItemCount, gap: gap, padding: padding, listType: listType, snapAlign: snapAlign, minHeight: minHeight, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: children }), jsx(SwipeListScrollButtons, { className: style(!showArrows && 'hidden lg:block'), scroll: scroll, hasBlur: hasBlur, arrowsPadded: arrowsPadded }), jsx(SwipeListDots, { className: style(!showDots && 'lg:hidden'), containerRef: containerRef, activeIndex: activeIndex, dotCount: itemCount, listType: listType, version: version })] }));
+        return (jsxs("div", { className: style(className, listType === 'vertical-list' ? 'relative h-full' : ''), children: [jsx(SwipeListContainer, { containerRef: containerRef, activeIndex: activeIndex, visibleItemCount: visibleItemCount, gap: gap, padding: padding, listType: listType, snapAlign: snapAlign, minHeight: minHeight, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: children }), jsx(SwipeListScrollButtons, { className: style(!showArrows && 'hidden lg:block'), scroll: scroll, hasBlur: hasBlur, arrowsPadded: arrowsPadded, isBottom: Boolean(navButtons?.length) }), jsx(SwipeListDots, { className: style(!showDots && 'lg:hidden'), activeIndex: activeIndex, dotCount: itemCount, listType: listType, version: version, navButtons: navButtons, containerRef: containerRef, containerScroll: scroll })] }));
     });
 
     const renderCarouselBlocks = ({ blocksToRender, ...rest }) => (jsx(SwipeListControl, { visibleItemCount: 0, gap: 0, arrowsPadded: true, children: renderBlocksList(blocksToRender, {
@@ -3456,9 +3487,10 @@
         normal: 'lg:min-w-80 xl:min-w-96',
         big: 'lg:min-w-[515px]',
     };
-    const renderCarouselCards = ({ noCardBorder, cardSize = 'normal', ...rest }) => {
+    const renderCarouselCards = ({ noCardBorder, cardSize = 'normal', isNavButtons = false, ...rest }) => {
         const { blocks: childBlocks } = rest.block || {};
         const someCardsHighlighted = childBlocks?.some(isCardHighlighted);
+        const defaultPadding = isNavButtons ? { defaultPadding: 'p-6xl pb-m' } : {};
         return renderChildren({
             ...rest,
             renderProps: (block, options, blockIndex) => (jsxs("div", { className: cardWrapperStyle(block, { someCardsHighlighted }), children: [renderBlock$1(block, options, {
@@ -3467,6 +3499,7 @@
                             showBorder: !noCardBorder,
                             cardSize,
                         }),
+                        ...defaultPadding,
                         blockIndex,
                     }), isCardHighlighted(block)
                         ? renderCardHighlight({ className: 'absolute top-0 -right-4 z-40' })
@@ -3480,9 +3513,7 @@
 
     const VISIBLE_ITEM_COUNT = 1;
 
-    const Carousel = UniBlock(({ className, visibleItemCount = VISIBLE_ITEM_COUNT, noCardBorder, arrowsPadded = true, isGap = true, cardSize = 'normal', ...rest }) => {
-        return (jsx(BlockWrapper, { className: style(className), defaultPadding: "p-6xl", ...rest, children: jsx(SwipeListControl, { className: style('relative max-w-full'), visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: isGap ? ITEMS_GAP : 0, padding: 0, arrowsPadded: arrowsPadded, hasBlur: true, children: renderCarouselCards({ noCardBorder, cardSize, ...rest }) }) }));
-    }, {
+    const Carousel = UniBlock(({ className, visibleItemCount = VISIBLE_ITEM_COUNT, noCardBorder, arrowsPadded = true, isGap = true, cardSize = 'normal', isNavButtons = false, ...rest }) => (jsx(BlockWrapper, { className: style(className), defaultPadding: "p-6xl", ...rest, children: jsx(SwipeListControl, { className: style('relative max-w-full'), visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: isGap ? ITEMS_GAP : 0, padding: 0, arrowsPadded: arrowsPadded, navButtons: isNavButtons ? getNavButton(rest?.block?.blocks) : [], hasBlur: true, children: renderCarouselCards({ noCardBorder, cardSize, isNavButtons, ...rest }) }) })), {
         childrenTypes: [
             'CarouselCard',
             'CarouselCatalogCard',
@@ -3498,6 +3529,13 @@
             },
         }),
     });
+    const getNavButton = (blocks) => blocks?.map((_) => {
+        const content = _?.content;
+        return {
+            title: content?.title,
+            description: content?.additionalDescription || content?.description,
+        };
+    }) ?? [];
 
     const titleSize = 'XS';
 
@@ -6461,7 +6499,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.532";
+    const packageVersion = "0.14.534";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;