@redneckz/wildless-cms-uni-blocks 0.8.2 → 0.8.4

package/bundle/bundle.umd.js

@@ -581,7 +581,7 @@
         const simpleKey = args[0];
         const fallbackData = fallback && typeof simpleKey === 'string' && fallback[simpleKey];
         return {
-            data: !data && !error && fallbackData ? fallbackData : data,
+            data: !data && fallbackData ? fallbackData : data,
             error,
             mutate: () => Promise.resolve(undefined),
             isValidating: false
@@ -656,12 +656,7 @@
     }
 
     const isURL = (href) => Boolean(href?.includes('//'));
-    const isLocalURL = (href, target) => Boolean(href &&
-        !isURL(href) &&
-        (projectSettings.BASE_PATH
-            ? href.startsWith(projectSettings.BASE_PATH)
-            : !href.startsWith('/')) &&
-        (!target || target === '_self'));
+    const isLocalURL = (href, target) => Boolean(href && !isURL(href) && (!target || target === '_self'));
     const isHash = (href) => Boolean(href?.startsWith('#'));
     const withoutQuery = (href) => (href || '').replace(/\/?\?.*/, '');
     const getOrigin = (href) => (isURL(href) ? new URL(href).origin : undefined);
@@ -706,11 +701,11 @@
         useRouter._impl = impl;
     };
 
-    function useLink() {
+    function useLink(isRemote) {
         const router = useRouter();
         const blockRouter = useBlockRouter();
         const handleLocalURL = (href, target) => (ev) => {
-            if (!isLocalURL(href, target)) {
+            if (isRemote || !isLocalURL(href, target)) {
                 // Proceed with native handle
                 return;
             }
@@ -1910,20 +1905,54 @@
         ];
     };
 
-    const ITEMS_GAP = 4;
+    const scrollButtonStyle$1 = 'absolute top-[calc(50%-24px)] z-50';
     const blurBaseStyle = 'absolute top-0 bottom-0 z-50 w-[84px] pointer-events-none';
-    const scrollButtonStyle$1 = 'absolute top-[calc(50%-12px)] z-50';
-    const Carousel = JSX(({ className = '', itemCount, visibleItemCount, isBlur = true, isCyclic = false, isPadding = true, ...rest }) => {
+    const CarouselScrollButtons = JSX(({ scroll, arrowsPadded, isBlur, onScrollLeft, onScrollRight, hasEdgeBlocks, activeIndex, itemCount, }) => {
+        const { canScrollLeft, canScrollRight, scrollLeft, scrollRight } = scroll;
+        const canMoveLeft = hasEdgeBlocks ? activeIndex > 0 : canScrollLeft;
+        const canMoveRight = hasEdgeBlocks ? activeIndex < itemCount - 1 : canScrollRight;
+        const handleScrollLeft = useCallback(() => {
+            if (!hasEdgeBlocks) {
+                scrollLeft();
+            }
+            else {
+                canScrollLeft && activeIndex !== itemCount - 1 && scrollLeft();
+                onScrollLeft();
+            }
+        }, [scrollLeft, onScrollLeft, hasEdgeBlocks, canScrollLeft, activeIndex, itemCount]);
+        const handleScrollRight = useCallback(() => {
+            if (!hasEdgeBlocks) {
+                scrollRight();
+            }
+            else {
+                canScrollRight && activeIndex !== 0 && scrollRight();
+                onScrollRight();
+            }
+        }, [scrollRight, onScrollRight, hasEdgeBlocks, canScrollLeft, activeIndex, itemCount]);
+        return (jsxs("div", { children: [renderBlur(isBlur, scroll), canMoveLeft ? (jsx(ScrollLeftButton, { className: style(scrollButtonStyle$1, arrowsPadded ? 'left-8' : 'left-0'), onClick: handleScrollLeft })) : null, canMoveRight ? (jsx(ScrollRightButton, { className: style(scrollButtonStyle$1, arrowsPadded ? 'right-8' : 'right-0'), onClick: handleScrollRight })) : null] }));
+    });
+    const renderBlur = (isBlur, scroll) => (scroll.canScrollLeft || scroll.canScrollRight) && isBlur ? (jsxs("div", { children: [jsx("div", { className: style(blurBaseStyle, 'left-0 bg-opacity-from-white') }), jsx("div", { className: style(blurBaseStyle, 'right-0 bg-opacity-to-white') })] })) : null;
+
+    const ITEMS_GAP = 4;
+    const Carousel = JSX(({ className = '', itemCount, visibleItemCount, isBlur = true, isCyclic = false, arrowsPadded = true, isPadding = true, ...rest }) => {
         const { blocks: childBlocks } = rest.block || {};
         const count = itemCount || childBlocks?.length || 0;
+        const [activeIndex, setActiveIndex] = useState(Math.floor((visibleItemCount || 0) / 2));
+        const increaseActiveIndex = useCallback(() => setActiveIndex((_) => _ + 1), []);
+        const decreaseActiveIndex = useCallback(() => setActiveIndex((_) => _ - 1), []);
         const [containerRef, scroll] = useSwipeListScroll({
             itemCount: count,
             isCyclic,
         });
-        return (jsx(BlockWrapper, { className: style(getPaddingStyle(isPadding), className), ...rest, children: jsxs("div", { className: "relative max-w-full", children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: ITEMS_GAP, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: renderChildren(rest) }), (scroll.canScrollLeft || scroll.canScrollRight) && isBlur ? (jsxs("div", { children: [jsx("div", { className: `${blurBaseStyle} left-0 bg-opacity-from-white` }), jsx("div", { className: `${blurBaseStyle} right-0 bg-opacity-to-white` })] })) : null, renderScrollButtons(scroll)] }) }));
+        const isBankHistoryCarousel = childBlocks && childBlocks[0]?.type === 'CarouselBankHistoryCard';
+        return (jsx(BlockWrapper, { className: style(getPaddingStyle(isPadding), className), ...rest, children: jsxs("div", { className: "relative max-w-full", children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: ITEMS_GAP, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: renderChildren({
+                            ...rest,
+                            block: { ...rest.block, blocks: buildBlocks(childBlocks, activeIndex) },
+                        }) }), jsx(CarouselScrollButtons, { scroll: scroll, isBlur: isBlur, arrowsPadded: arrowsPadded, onScrollLeft: decreaseActiveIndex, onScrollRight: increaseActiveIndex, hasEdgeBlocks: isBankHistoryCarousel, activeIndex: activeIndex, itemCount: count })] }) }));
     });
     Carousel.childrenTypes = [
         'CarouselCard',
+        'CarouselBankHistoryCard',
         'CarouselCatalogCard',
         'CarouselInvestmentCard',
         'CarouselProductCard',
@@ -1932,21 +1961,74 @@
         'CarouselTariffsCard',
         'CarouselInvestmentCard',
     ];
-    const renderScrollButtons = ({ scrollLeft, scrollRight, canScrollLeft, canScrollRight, }) => (jsxs("div", { children: [canScrollLeft ? (jsx(ScrollLeftButton, { className: `${scrollButtonStyle$1} left-8`, onClick: scrollLeft })) : null, canScrollRight ? (jsx(ScrollRightButton, { className: `${scrollButtonStyle$1} right-8`, onClick: scrollRight })) : null] }));
+    const buildBlocks = (blocks, activeIndex) => {
+        return blocks && blocks[0].type === 'CarouselBankHistoryCard'
+            ? blocks.map((_, i) => {
+                return {
+                    ..._,
+                    content: {
+                        ..._.content,
+                        orderNumber: i,
+                        isActive: activeIndex === i,
+                        blocksLength: blocks.length,
+                    },
+                };
+            })
+            : blocks;
+    };
     const getPaddingStyle = (isPadding) => (isPadding ? 'p-12' : '');
 
+    const CarouselBankHistoryCard = JSX(({ title, description, isActive, orderNumber = 0, blocksLength = 0 }) => {
+        return (jsx(BlockWrapper, { className: "flex h-[485px]", children: isActive ? (jsx("div", { className: "relative flex items-center w-full", children: jsx(Headline, { headlineVersion: "S", title: title, description: description, align: "text-left", className: style('absolute z-10 h-[385px] w-[440px] text-white shadow-dark-blue', getActiveBlockPosition(orderNumber, blocksLength), getBackgroundColor(orderNumber)) }) })) : (jsx("div", { className: "flex w-full items-center justify-center", children: jsx("div", { className: style('flex justify-center items-center h-[300px] w-[340px] font-mohave text-title-large tracking-[-0.03em]', getBackgroundColor(orderNumber)), children: jsx("span", { className: getTextColor(orderNumber), children: title }) }) })) }));
+    });
+    const getBackgroundColor = (orderNumber) => {
+        const division = orderNumber % 3;
+        switch (division) {
+            case 0:
+                return 'bg-primary-main';
+            case 1:
+                return 'bg-green-light';
+            case 2:
+                return 'bg-yellow-light';
+            default:
+                return 'bg-primary-main';
+        }
+    };
+    const getTextColor = (orderNumber) => {
+        const division = orderNumber % 3;
+        switch (division) {
+            case 1:
+                return 'gradient-color-text-on-yellow';
+            case 2:
+                return 'gradient-color-text-on-yellow';
+            default:
+                return 'gradient-color-text-on-green';
+        }
+    };
+    const getActiveBlockPosition = (orderNumber, blocksLength) => {
+        if (orderNumber === 0) {
+            return 'left-9';
+        }
+        else if (orderNumber === blocksLength - 1) {
+            return 'right-9';
+        }
+        else {
+            return '-left-[25px]';
+        }
+    };
+
     const BLOCK_CLASSES = 'absolute border border-solid border-gray w-full h-full';
     const CARD_WIDTH_MAP = {
         normal: 'min-w-[970px]',
         mini: 'min-w-[355px]',
     };
-    const CarouselCard = JSX(({ className = '', button, description, title, carouselVersion = 'normal' }) => (jsx("section", { className: `flex pb-9 pl-12 border-box ${CARD_WIDTH_MAP[carouselVersion]} ${className}`, children: jsxs("div", { className: "relative w-full", children: [jsx("div", { className: `${BLOCK_CLASSES} z-10 top-9 right-12 bg-green-dark` }), jsx("div", { className: `${BLOCK_CLASSES} z-10 top-6 right-8 bg-green` }), jsx("div", { className: `${BLOCK_CLASSES} z-10 top-3 right-4 bg-green-light` }), jsxs("div", { className: "relative bg-white z-10 p-10 border border-solid border-green-light", children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "L", align: "text-left" }), renderButtonsSection([button], { className: 'mt-14' })] })] }) })));
+    const CarouselCard = JSX(({ className = '', button, description, title, carouselVersion = 'normal' }) => (jsx("section", { className: `flex pb-9 pl-12 border-box h-full ${CARD_WIDTH_MAP[carouselVersion]} ${className}`, children: jsxs("div", { className: "relative w-full", children: [jsx("div", { className: `${BLOCK_CLASSES} z-10 top-9 right-12 bg-green-dark` }), jsx("div", { className: `${BLOCK_CLASSES} z-10 top-6 right-8 bg-green` }), jsx("div", { className: `${BLOCK_CLASSES} z-10 top-3 right-4 bg-green-light` }), jsxs("div", { className: "relative h-full bg-white z-10 p-10 border border-solid border-green-light", children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "L", align: "text-left" }), renderButtonsSection([button], { className: 'mt-14' })] })] }) })));
 
     const cardStyleMap$2 = {
         black: 'bg-black',
         white: 'bg-white',
     };
-    const CarouselCatalogCard = JSX(({ className = '', title, description, image, price, button, colors, ...rest }) => (jsxs(BlockWrapper, { className: `border box-border border-gray p-7 min-w-[392px] flex flex-col justify-left ${className}`, ...rest, children: [image?.src ? jsx(ImgInner, { className: "mb-5 flex justify-center", image: image }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left mb-1.5", title: title })) : null, description ? (jsx("div", { className: "mb-4", children: jsx(Paragraph, { size: "text-m", align: "text-left", font: "font-light", children: description }) })) : null, colors?.length ? (jsxs("div", { className: "flex mb-4 text-s-light text-secondary-text", children: [jsx("div", { className: "mr-1.5", children: jsx(Text, { children: "\u0414\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0435 \u0446\u0432\u0435\u0442\u0430: " }) }), colors.map(renderColorOption$1)] })) : null, price ? (jsxs(Text, { size: "text-h3", align: "text-left", children: [price, "\u00A0\u20BD"] })) : null, renderButtonsSection([button], { buttonClassName: 'mt-5 w-full' })] })));
+    const CarouselCatalogCard = JSX(({ className = '', title, description, image, price, button, colors, ...rest }) => (jsxs(BlockWrapper, { className: `border box-border border-gray p-7 min-w-[392px] h-full flex flex-col justify-left ${className}`, ...rest, children: [image?.src ? jsx(ImgInner, { className: "mb-5 flex justify-center", image: image }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left mb-1.5", title: title })) : null, description ? (jsx("div", { className: "mb-4", children: jsx(Paragraph, { size: "text-m", align: "text-left", font: "font-light", children: description }) })) : null, colors?.length ? (jsxs("div", { className: "flex mb-4 text-s-light text-secondary-text", children: [jsx("div", { className: "mr-1.5", children: jsx(Text, { children: "\u0414\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0435 \u0446\u0432\u0435\u0442\u0430: " }) }), colors.map(renderColorOption$1)] })) : null, price ? (jsxs(Text, { size: "text-h3", align: "text-left", children: [price, "\u00A0\u20BD"] })) : null, renderButtonsSection([button], { buttonClassName: 'mt-5 w-full' })] })));
     const renderColorOption$1 = (color, i) => (jsx("span", { className: `w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap$2[color]}` }, String(i)));
 
     const BaseTile = JSX(({ className = '', title = '', buttons, image, children }) => (jsxs("div", { className: `font-sans flex flex-col grow h-full items-start ${className}`, children: [title, jsxs("div", { className: "flex grow w-full justify-between", children: [jsxs("div", { className: "flex flex-col justify-between w-full", children: [jsx("div", { className: "h-full", children: children }), buttons ? jsx("div", { className: "mt-auto pt-8", children: buttons }) : null] }), image] })] })));
@@ -2072,13 +2154,13 @@
         return (jsx(Button, { className: style('group/media flex items-center justify-center box-border', buttonSizeStyles[buttonSize], rounded ? 'rounded-full' : 'rounded-md', 'border border-solid hover:border-transparent', 'group-data-primary:border-main-divider', 'hover:bg-primary-main hover:text-black', 'group-data-secondary:bg-white border-main-divider group-data-secondary:hover:bg-secondary-hover', 'group-data-gray:border-green', buttonSizeStyles[buttonSize]), "aria-label": label, target: "_blank", rel: "noopener noreferrer", version: version, ...rest, children: iconWithVersion ? (jsx(ImgInner, { image: iconWithVersion, imageClassName: "group-hover/media:text-white", width: "24", height: "24", asSVG: true })) : null }));
     });
 
-    const SocialMedia = JSX(({ className = '', media, children, buttonSize }) => (jsxs("div", { className: "font-sans", children: [jsx("div", { className: `flex gap-2.5 ${className}`, children: media?.map((_, index) => (jsx(MediaButton, { buttonSize: buttonSize, version: _.version, ..._ }, String(index)))) }), jsx("span", { className: "text-s-light text-secondary-text", children: children })] })));
+    const SocialMedia = JSX(({ className = '', media, children, buttonSize }) => (jsxs("div", { className: "font-sans", children: [jsx("div", { className: `flex gap-2.5 ${className}`, children: media?.map((_, index) => (jsx(MediaButton, { buttonSize: buttonSize, version: _.version, ..._ }, String(index)))) }), jsx(Text, { size: "text-s-light", color: "text-secondary-text", children: children })] })));
 
     const CarouselRecommendationCard = JSX(({ button, className = '', description, image, items = [], socialMedia = [], title, version = 'primary', ...rest }) => {
         const tileTitle = title ? (jsx(Heading, { headingType: "h5", as: "h3", className: "mb-3.5 z-10", title: title })) : null;
         const tileImage = image?.src ? (jsx(ImgInner, { className: "absolute bottom-0 right-0 m-0", image: image })) : null;
         const BORDER_STYLE = 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';
-        return (jsx(BlockWrapper, { className: style('relative p-7 min-w-[524px] text-left box-border group-data-gray:bg-main-divider/50', BORDER_STYLE, className), version: version, ...rest, children: jsx(BaseTile, { className: "flex justify-between", title: tileTitle, image: tileImage, children: jsxs("div", { className: "h-full flex flex-col justify-between", children: [description ? (jsx("span", { className: "mb-2 group-data-gray:text-secondary-text group-data-gray:max-w-[265px]", children: description })) : null, items.length ? (jsx(List, { className: "text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]", items: items })) : null, socialMedia.length ? jsx(SocialMedia, { className: "pt-10 pb-0", media: socialMedia }) : null, renderButtonsSection([button], { className: 'pt-2 mt-16' })] }) }) }));
+        return (jsx(BlockWrapper, { className: style('relative p-7 min-w-[524px] h-full text-left box-border group-data-gray:bg-main-divider/50', BORDER_STYLE, className), version: version, ...rest, children: jsx(BaseTile, { className: "flex justify-between", title: tileTitle, image: tileImage, children: jsxs("div", { className: "h-full flex flex-col justify-between", children: [description ? (jsx("span", { className: "mb-2 group-data-gray:text-secondary-text group-data-gray:max-w-[265px]", children: description })) : null, items.length ? (jsx(List, { className: "text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]", items: items })) : null, socialMedia.length ? jsx(SocialMedia, { className: "pt-10 pb-0", media: socialMedia }) : null, renderButtonsSection([button], { className: 'pt-2 mt-16' })] }) }) }));
     });
 
     const VISIBLE_CELLS_COUNT = 1;
@@ -2558,18 +2640,16 @@
     const renderMonthNames = (item, colSize) => item.month?.map((_, i) => (jsx("div", { style: { flexBasis: `${colSize}%` }, children: _.text }, `monthName-${i}`)));
     const renderMonthImages = (item) => item.month?.map((_) => _.image?.src ? (jsx("div", { className: "h-[207px] border-r pr-3 mr-3 border-main-divider last:border-r-0 last:pr-0 last:mr-0", children: jsx(ImgInner, { image: _.image, className: "flex" }) }, `monthImage-${_.image.src}`)) : null);
 
-    const adjustHref = (href) => href && projectSettings.BASE_PATH && !(isURL(href) || href.startsWith('/'))
-        ? `${projectSettings.BASE_PATH}${href}`
-        : href;
-
-    const isHrefActive = (href, router) => withoutQuery(isURL(href) ? router.href : getPathname(router.href)).startsWith(withoutQuery(adjustHref(href)));
-
-    const isSubItemActive = (router) => (subItem) => isHrefActive(subItem.href, router);
+    const isHrefActive = (router) => ({ href }) => {
+        const { BASE_PATH } = projectSettings;
+        const relativeHref = BASE_PATH && href?.startsWith(BASE_PATH) ? href.substring(BASE_PATH.length) : href;
+        return withoutQuery(isURL(href) ? router.href : router.pathname).startsWith(withoutQuery(relativeHref));
+    };
 
-    const isTopItemActive = (router) => (topItem) => topItem.items?.some(isSubItemActive(router)) || isHrefActive(topItem.href, router);
+    const isTopItemActive = (router) => (topItem) => topItem.items?.some(isHrefActive(router)) || isHrefActive(router)(topItem);
 
     const TopItem = JSX(({ className = '', active, flat, children, ...rest }) => {
-        const link = useLink();
+        const link = useLink(true);
         const { href, target, text, onClick } = link(rest);
         return (jsx("a", { className: style(getLinkStyle(active, flat), className), href: href, target: target, onClick: onClick, rel: "noopener noreferrer", "aria-label": text, children: jsx("span", { className: getTextStyle$1(active, flat), children: text || children }) }));
     });
@@ -2754,7 +2834,7 @@
     });
 
     const findActiveSubItem = (router) => (items = []) => {
-        const possibleActiveSubItems = items?.filter(isSubItemActive(router));
+        const possibleActiveSubItems = items?.filter(isHrefActive(router));
         return possibleActiveSubItems?.length
             ? maxBy((_) => _.href?.length || 0)(possibleActiveSubItems) // More specific item with max length
             : undefined;
@@ -4306,6 +4386,7 @@
         Calculator,
         CardTransfer,
         Carousel,
+        CarouselBankHistoryCard,
         CarouselCard,
         CarouselCatalogCard,
         CarouselInvestmentCard,
@@ -4481,7 +4562,7 @@
         return (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-lg sticky bottom-0 pointer-events-auto" }) }));
     }
 
-    const packageVersion = "0.8.2";
+    const packageVersion = "0.8.4";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;