@redneckz/wildless-cms-uni-blocks 0.6.50 → 0.7.1

package/bundle/bundle.umd.js

@@ -393,7 +393,7 @@
         return ref;
     }
 
-    const BlockWrapper = JSX(({ className, block, tag = 'section', role, children }) => {
+    const BlockWrapper = JSX(({ className = '', block, tag = 'section', role, children }) => {
         const Tag = tag;
         const ref = useBlockIntersectionObserver(block);
         const [isVisible, setVisible] = useState(true);
@@ -1447,6 +1447,8 @@
         return Array.isArray(children) ? children.map(mapper) : mapper(children, 0);
     };
 
+    const style = (...atoms) => atoms.filter(Boolean).join(' ');
+
     const SwipeListItem = JSX(({ className = '', style, idx, activeIndex, observerOptions, children, onIntersection }) => {
         const observerCallback = useCallback((entries) => {
             if (entries.length && onIntersection) {
@@ -1458,7 +1460,7 @@
     });
 
     const childStyleMap = ['min-w-[100%]', 'min-w-[50%]', 'min-w-[33.33%]', 'min-w-[25%]'];
-    const SwipeListContainer = JSX(({ className = '', containerRef, activeIndex, visibleItemCount = 0, gap = 0, padding = 0, snapAlign = 'snap-center', children, onVisibleItemsChange, onVisibleIndicesChange, }) => {
+    const SwipeListContainer = JSX(({ className = '', containerRef, activeIndex, visibleItemCount = 0, gap = 0, padding = 0, listType = 'horizontal-list', snapAlign = 'snap-center', children, onVisibleItemsChange, onVisibleIndicesChange, }) => {
         const observerOptions = {
             sensitivity: 1,
             rootRef: containerRef,
@@ -1472,10 +1474,12 @@
             onVisibleIndicesChange && onVisibleIndicesChange(getVisibleIndices(itemsVisibilityList));
         }, [onVisibleItemsChange, onVisibleIndicesChange]);
         const additionPadding = visibleItemCount > 0 ? gap * Number(visibleItemCount) - 1 : 0;
-        return (jsx("div", { className: `box-border overflow-auto flex horizontal-list no-scrollbar ${className}`, style: {
-                ...getContainerStyle(padding, additionPadding),
-                gap: `${gap}px`,
-            }, role: "list", ref: containerRef, children: mapChildren((child, idx) => (jsx(SwipeListItem, { className: `${snapAlign} ${visibleItemCount ? childStyleMap[visibleItemCount - 1] : ''}`, style: getContainerStyle(padding / 4), activeIndex: activeIndex, idx: idx, observerOptions: observerOptions, onIntersection: handleIntersection, children: child }, String(idx))))(children) }));
+        const isHorizontalList = listType === 'horizontal-list';
+        const containerStyle = {
+            ...(isHorizontalList ? getContainerStyle(padding, additionPadding) : {}),
+            gap: `${gap}px`,
+        };
+        return (jsx("div", { className: style('box-border overflow-auto no-scrollbar', listType, className), style: containerStyle, role: "list", ref: containerRef, children: mapChildren((child, idx) => (jsx(SwipeListItem, { className: style(snapAlign, visibleItemCount ? childStyleMap[visibleItemCount - 1] : '', listType === 'vertical-list' ? 'h-full' : ''), style: isHorizontalList ? getContainerStyle(padding / 4) : {}, activeIndex: activeIndex, idx: idx, observerOptions: observerOptions, onIntersection: handleIntersection, children: child }, String(idx))))(children) }));
     });
     // Styles used to compensate outer container padding to get rid of clipping effect
     const getContainerStyle = (padding, additionalPadding = 0) => ({
@@ -1582,10 +1586,10 @@
 
     const BLOCK_CLASSES = 'absolute border border-solid border-gray w-full h-full';
     const CARD_WIDTH_MAP = {
-        normal: 'min-w-[1007px]',
+        normal: 'min-w-[970px]',
         mini: 'min-w-[355px]',
     };
-    const CarouselCard = JSX(({ className = '', button, description, title, version = 'normal' }) => (jsx("section", { className: `flex pb-9 pl-12 ${CARD_WIDTH_MAP[version]} ${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 py-6 px-10 border border-solid border-green-light", children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "M" }), button ? jsx("div", { className: "mt-6", children: renderButton({ button }) }) : null] })] }) })));
+    const CarouselCard = JSX(({ className = '', button, description, title, version = 'normal' }) => (jsx("section", { className: `flex pb-9 pl-12 border-box ${CARD_WIDTH_MAP[version]} ${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" }), button ? jsx("div", { className: "mt-14", children: renderButton({ button }) }) : null] })] }) })));
 
     const cardStyleMap$2 = {
         black: 'bg-black',
@@ -1700,7 +1704,7 @@
     const renderAdditionalDescription$2 = (additionalDescription, version = 'primary') => additionalDescription ? (jsx("div", { className: "mt-auto", children: jsx(Text, { size: "text-m", font: "font-light", color: descriptionStyleMap[version], children: additionalDescription }) })) : null;
     const renderItems$2 = (items, isDotted, version = 'primary') => items?.length ? (jsx(List, { className: `max-w-[308px] mt-2 text-s ${version === 'primary' ? '!text-secondary-text' : ''}`, itemClassName: "text-left", items: items.filter((item) => item?.text).map((item) => item.text), isDotted: isDotted, version: version })) : null;
 
-    const CarouselProgramsCard = JSX(({ className = '', title, icon, list = [], version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: `font-sans border border-gray flex min-w-[536px] ${VersionStyleMap[version]} ${className}`, ...rest, children: [jsxs("div", { className: "w-[200px] min-w-[200px] self-end", children: [icon?.icon ? jsx(ImgInner, { image: getIconWithVersion(icon), asSVG: true }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null] }), jsxs("div", { className: "p-8 pl-3 w-full", children: [title ? jsx(Heading, { className: " mb-3.5", headingType: "h5", title: title }) : null, list.length ? jsx("div", { className: "flex flex-col gap-3", children: list?.map(renderList$2) }) : null] })] })));
+    const CarouselProgramsCard = JSX(({ className = '', title, icon, list = [], version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: `font-sans border border-gray flex min-w-[536px] ${VersionStyleMap[version]} ${className}`, ...rest, children: [jsxs("div", { className: "w-[200px] min-w-[200px] self-center", children: [icon?.icon ? jsx(ImgInner, { image: getIconWithVersion(icon), asSVG: true }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null] }), jsxs("div", { className: "p-8 pl-3 w-full", children: [title ? jsx(Heading, { className: " mb-3.5", headingType: "h5", title: title }) : null, list.length ? jsx("div", { className: "flex flex-col gap-3", children: list?.map(renderList$2) }) : null] })] })));
     const renderList$2 = (_, i) => (jsxs("div", { className: "break-words", children: [_.title ? jsx("div", { className: `text-h6`, children: _.title }) : null, _.description ? jsx("span", { className: "text-l-light mt-1", children: _.description }) : null] }, String(i)));
 
     const ICONS_MAP = [
@@ -1761,19 +1765,20 @@
     });
     const getOmitVersion = (version) => version === 'gray' ? 'primary' : version;
 
-    const VISIBLE_ROWS_COUNT = 1;
-    const CarouselTariffsCard = JSX(({ className = '', title, icon, isHighlighting, button, rows = [], ...rest }) => {
-        const rowsNode = rows.map(renderCardInfo);
-        const visibleRows = rowsNode.slice(0, VISIBLE_ROWS_COUNT);
-        const hiddenRows = rowsNode.slice(VISIBLE_ROWS_COUNT);
-        return (jsxs(BlockWrapper, { className: `font-sans relative bg-white border border-gray min-w-[322px] p-8
+    const VISIBLE_CELLS_COUNT = 1;
+    const CarouselTariffsCard = JSX(({ className = '', title, icon, isHighlighting, button, cardCells = [], ...rest }) => {
+        const cellsNode = cardCells.map(renderCardInfo);
+        const visibleCells = cellsNode.slice(0, VISIBLE_CELLS_COUNT);
+        const hiddenCells = cellsNode.slice(VISIBLE_CELLS_COUNT);
+        return (jsxs(BlockWrapper, { className: `font-sans relative bg-white border border-gray min-w-[322px] p-8 flex flex-col
         ${getHitStyle(isHighlighting)}
-        ${className}`, ...rest, children: [isHighlighting ? renderHitIcon() : null, icon?.src ? jsx(ImgInner, { image: icon }) : null, title ? (jsx(Heading, { className: "text-primary-text text-center pt-2", headingType: "h5", title: title })) : null, button ? jsx(Button, { className: "w-full mt-4", ...button }) : null, rows.length ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs("div", { children: [visibleRows, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenRows })] })), renderFoldButton: rows.length > 1 ? renderFoldButton$1 : null })) : null] }));
+        ${className}`, ...rest, children: [isHighlighting ? renderHitIcon() : null, renderIconBlock(icon), title ? (jsx(Heading, { className: "text-primary-text text-center pt-2", headingType: "h5", title: title })) : null, button ? jsx(Button, { className: "w-full mt-4", ...button }) : null, cardCells.length ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs("div", { children: [visibleCells, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenCells })] })), renderFoldButton: cardCells.length > 1 ? renderFoldButton$1 : null })) : null] }));
     });
-    const getHitStyle = (isHighlighting) => isHighlighting ? 'mt-9 pt-[70px]' : 'mt-[70px] pt-9';
+    const renderIconBlock = (icon) => (jsxs("div", { className: "w-[267px] min-w-[267px] self-center", children: [icon?.src ? jsx(ImgInner, { image: icon }) : null, icon?.icon ? jsx(ImgInner, { image: getIconWithVersion(icon), asSVG: true }) : null] }));
+    const getHitStyle = (isHighlighting) => isHighlighting ? 'mt-9 pt-[70px]' : 'mt-[70px] pt-7';
     const renderFoldButton$1 = ({ isUnfolded, onToggle }) => (jsxs("button", { className: "w-full cursor-pointer text-primary-main pt-5 flex justify-between items-center", onClick: onToggle, children: [jsx("div", { children: isUnfolded ? 'Скрыть' : 'Подробнее о тарифе' }), jsx(Icon, { className: "text-primary-text", name: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', width: "16", height: "16", asSVG: true })] }));
     const renderCardInfo = (cell, i) => (jsxs("div", { className: "py-5 border-b border-main-divider", children: [cell?.title ? (jsx("div", { className: "text-secondary-text text-m-light opacity-80", children: cell.title })) : null, cell?.description ? (jsx("div", { className: "text-primary-text text-h6 mt-1", children: cell.description })) : null] }, String(i)));
-    const renderHitIcon = () => (jsxs("div", { className: "absolute -top-7 -right-4 h-[60px] w-[60px] bg-white flex flex-col items-center justify-center shadow-[0_4px_25px_rgba(0,0,0,0.07)]", children: [jsx(Icon, { iconVersion: "black", name: "HeartIcon", width: "23", height: "22", asSVG: true }), jsx("div", { className: "text-center", children: "\u0425\u0438\u0442" })] }));
+    const renderHitIcon = () => (jsxs("div", { className: "absolute -top-7 -right-4 h-[60px] w-[60px] bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]", children: [jsx(Icon, { iconVersion: "black", name: "HeartIcon", width: "23", height: "22", asSVG: true }), jsx(Paragraph, { size: "text-s", font: "font-normal", align: "text-center", color: "text-primary-text", children: "\u0425\u0418\u0422" })] }));
 
     const cardStyleMap$1 = {
         black: 'bg-black',
@@ -3654,6 +3659,52 @@
     const renderStepIcon = (styleMap, version) => ({ icon }, i) => (jsx("div", { className: "flex flex-col items-center text-center", children: jsx("div", { className: `h-[100px] w-[100px] min-w-[100px] min-h-[100px] rounded-full p-[26px] box-border z-10 flex justify-center items-center
             ${styleMap.iconBackground} ${styleMap.title}`, children: checkIsIconRenderable(icon) ? (jsx(ImgInner, { image: getIconWithVersion(icon || {}, version), width: "48", height: "48", asSVG: true })) : (jsx("span", { className: `text-h4 ${styleMap.iconText}`, children: i + 1 })) }) }, String(i)));
 
+    const containerStyles = {
+        'horizontal-list': 'mx-auto mt-5 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 bg-primary-main rounded-full transition-width duration-300';
+    const inactiveDotStyle = 'w-2 h-2 opacity-30';
+    const SwipeListControlDots = JSX(({ containerRef, activeIndex, dotCount = 0, listType = 'horizontal-list' }) => {
+        const handleClick = (idx) => {
+            if (idx !== activeIndex && containerRef?.current) {
+                containerRef.current.children[idx]?.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'nearest',
+                });
+            }
+        };
+        return dotCount ? (jsx("div", { className: `flex gap-2 ${containerStyles[listType]}`, children: new Array(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 DEFAULT_GAP = 14;
+    /*
+      Horizontal padding used on a container above SwipeListControl.
+      Same value used on a SwipeListControlChildren container to compensate it
+      and get rid of a clipping effect caused by overflow: hidden.
+     */
+    const DEFAULT_PADDING = 16;
+    const SwipeListControl = JSX(({ className = '', gap = DEFAULT_GAP, padding = DEFAULT_PADDING, showDots = true, children, onVisibleIndicesChange, listType = 'horizontal-list', }) => {
+        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: 1, gap: gap, padding: padding, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, listType: listType, children: children }), showDots ? (jsx(SwipeListControlDots, { containerRef: containerRef, activeIndex: activeIndex, dotCount: itemCount, listType: listType })) : null] }));
+    });
+
+    const SwipeListControlBlock = JSX(({ gap, listType, padding, showDots, options, ...rest }) => {
+        return (jsx(BlockWrapper, { ...rest, children: jsx(SwipeListControl, { gap: gap, listType: listType, padding: padding, showDots: showDots, children: renderChildren({ ...rest, options }) }) }));
+    });
+    SwipeListControlBlock.childrenTypes = {
+        exclude: ['SwipeListControlBlock'],
+    };
+
     const LINK_CLASSES = 'h-12 flex-1 flex items-center justify-center cursor-pointer';
     const ACTIVE_LINK_CLASSES = 'bg-primary-main';
     const INACTIVE_LINK_CLASSES = 'group bg-white';
@@ -4017,6 +4068,7 @@
         RollupItem,
         SafeDepositRental,
         StepsBlock,
+        SwipeListControlBlock,
         Tabs,
         TariffsTable,
         TextBlock,
@@ -4150,7 +4202,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.6.50";
+    const packageVersion = "0.7.1";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;