@redneckz/wildless-cms-uni-blocks 0.6.29 → 0.6.31

package/bundle/bundle.umd.js

@@ -606,7 +606,7 @@
         if (version === 'link') {
             return '';
         }
-        const withTextStyle = `gap-2 ${aboveText ? 'py-2.5 px-7' : 'py-4 px-9'}`;
+        const withTextStyle = `gap-2 ${aboveText ? 'py-2.5 px-7' : 'py-4 px-4'}`;
         return [
             'group flex items-center justify-center',
             isWithText(props) ? withTextStyle : 'h-12 w-12',
@@ -1242,6 +1242,85 @@
         return (jsxs(BlockWrapper, { className: `p-[50px] flex flex-col items-center font-sans bg-white ${className}`, ...rest, children: [title ? jsx(Heading, { className: "max-w-[684px] pb-9", headingType: "h2", title: title }) : null, jsxs("form", { className: "w-[468px]", method: "POST", action: FORM_URL, children: [jsx(CurrencyInput, { name: AMOUNT_KEY, value: value, onChange: setValue, valid: value === '' || !isDisabled, placeholder: placeholder, label: label }), button?.text ? (jsx("button", { type: "submit", className: `w-full p-4 mt-6 ${buttonStyle} `, disabled: isDisabled, ...link(button), children: button.text })) : null] })] }));
     });
 
+    const useCarouselControls = ({ itemsCount, visibleItemCount = itemsCount, isCyclic, }) => {
+        const [activeIndex, setActiveIndex] = useState(0);
+        const inc = useCallback(() => setActiveIndex((_) => (isCyclic ? (_ + 1) % itemsCount : Math.min(_ + 1, itemsCount - 1))), [isCyclic, itemsCount]);
+        const dec = useCallback(() => setActiveIndex((_) => (isCyclic ? (itemsCount + _ - 1) % itemsCount : Math.max(_ - 1, 0))), [isCyclic, itemsCount]);
+        const isScrollAvailable = itemsCount > visibleItemCount;
+        const isCyclicAndScrollAvailable = isCyclic && isScrollAvailable;
+        const canInc = isCyclicAndScrollAvailable ||
+            (isScrollAvailable && itemsCount - activeIndex > visibleItemCount);
+        const canDec = isCyclicAndScrollAvailable || Boolean(isScrollAvailable && activeIndex > 0);
+        return [
+            activeIndex,
+            {
+                inc,
+                dec,
+                canInc,
+                canDec,
+            },
+        ];
+    };
+
+    const CarouselContainer = JSX(({ children, activeItem, cardFullViewCount, cardWidth }) => {
+        const cardFullViewStyles = cardFullViewCount === 1
+            ? `translateX(-${activeItem}00%)`
+            : `translateX(-${activeItem * Number(cardWidth)}px)`;
+        return (jsx("div", { className: "w-auto flex flex-1 duration-1000", style: { transform: `${cardFullViewStyles}` }, role: "list", children: children }));
+    });
+
+    const Carousel = JSX(({ cardFullViewCount = 1, children, cardWidth = '1007', className = '', isBlur = true, isCyclic = false, block, ...rest }) => {
+        const blurClasses = isBlur ? 'absolute top-0 bottom-0 w-[84px]' : '';
+        const { blocks: childBlocks } = block || {};
+        const childBlocksLength = childBlocks !== undefined ? childBlocks.length : 0;
+        const isScrollAvailable = childBlocksLength > cardFullViewCount;
+        const [activeIndex, controls] = useCarouselControls({
+            itemsCount: childBlocksLength,
+            visibleItemCount: cardFullViewCount,
+            isCyclic,
+        });
+        const { inc, dec, canDec, canInc } = controls;
+        return (jsxs(BlockWrapper, { className: `box-border h-full relative font-sans flex flex-col justify-center overflow-hidden ${className}`, ...rest, children: [jsx(CarouselContainer, { activeItem: activeIndex, cardFullViewCount: cardFullViewCount, cardWidth: cardWidth, children: children }), isScrollAvailable ? (jsx("div", { children: renderArrows({
+                        handler: [dec, inc],
+                        isShown: [canDec, canInc],
+                        btnClass: ['left-8', 'right-8'],
+                        className: 'top-1/2 z-10',
+                    }) })) : null, isScrollAvailable ? (jsxs("div", { children: [jsx("div", { className: `${blurClasses} left-0 bg-opacity-from-white` }), jsx("div", { className: `${blurClasses} right-0 bg-opacity-to-white` })] })) : null] }));
+    });
+    Carousel.childrenTypes = ['CarouselCard', 'CarouselTariffsCard'];
+
+    const BLOCK_CLASSES = 'absolute border border-solid border-main-stroke w-[100%] h-[100%]';
+    const CARD_STYLE_MAP = {
+        normal: 'min-w-[100%] justify-center items-center my-7 col-span-12',
+        mini: 'justify-center items-center mx-4 my-9 col-span-4',
+    };
+    const CARD_WIDTH_MAP = {
+        normal: 'w-[1007px]',
+        mini: 'w-[350px]',
+    };
+    const CarouselCard = JSX(({ button, className = '', description, title, version = 'normal' }) => {
+        return (jsx("section", { className: `flex ${CARD_STYLE_MAP[version]}`, children: jsxs("div", { className: `relative ${CARD_WIDTH_MAP[version]}`, children: [jsxs("div", { className: `relative bg-white py-6 px-10 z-10
+              border border-solid border-green-light ${className}`, children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "M", align: "center" }), button ? renderButton({ button, buttonClassName: 'mt-6 w-[158px]' }) : null] }), jsx("div", { className: `top-9 right-12 bg-green-dark ${BLOCK_CLASSES}` }), jsx("div", { className: `top-6 right-8 bg-green ${BLOCK_CLASSES}` }), jsx("div", { className: `top-3 right-4 bg-green-light ${BLOCK_CLASSES}` })] }) }));
+    });
+
+    const CarouselTariffsCard = JSX(({ className = '', title, icon, isHighlighting, button, rows = [], ...rest }) => {
+        const hitStyle = getHitStyle(Boolean(isHighlighting));
+        const rowsNode = rows.map(renderCardInfo);
+        const VISIBLE_ROWS_COUNT = 1;
+        const [visibleRows, hiddenRows] = [
+            rowsNode.slice(0, VISIBLE_ROWS_COUNT),
+            rowsNode.slice(VISIBLE_ROWS_COUNT),
+        ];
+        return (jsxs(BlockWrapper, { className: `font-sans bg-white p-[50px] p-8 border border-main-stroke relative w-[322px] min-w-[322px] -ml-[1px] ${hitStyle} ${className}`, ...rest, children: [isHighlighting ? renderHitIcon() : null, icon?.src ? jsx(ImgInner, { className: "flex justify-center", 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] }));
+    });
+    const getHitStyle = (isHighlighting) => isHighlighting ? 'mt-9 pt-[71px]' : 'mt-[70px] pt-9';
+    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) => (jsxs("div", { className: "py-5 border-b border-main-divider flex flex-col gap-1", 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", children: cell.description }) : null] }));
+    const renderHitIcon = () => {
+        const POSITION_STYLE = 'absolute -top-7 -right-4';
+        return (jsxs("div", { className: `h-[60px] w-[60px] bg-white flex flex-col items-center justify-center shadow-[0_4px_25px_rgba(0,0,0,0.07)] ${POSITION_STYLE}`, children: [jsx(Icon, { iconVersion: "black", name: "HeartIcon", width: "23", height: "22", asSVG: true }), jsx("div", { className: "text-center", children: "\u0425\u0438\u0442" })] }));
+    };
+
     const cardStyleMap$1 = {
         black: 'bg-black',
         white: 'bg-white',
@@ -1267,26 +1346,6 @@
                 }), jsx("div", { className: `${BLUR_BLOCK_CLASSES$2} left-0 bg-opacity-from-white` }), jsx("div", { className: `${BLUR_BLOCK_CLASSES$2} right-0 bg-opacity-to-white` })] }));
     });
 
-    const useCarouselControl = ({ itemsCount, visibleItemCount = itemsCount, isCyclic, }) => {
-        const [activeIndex, setActiveIndex] = useState(0);
-        const inc = useCallback(() => setActiveIndex((_) => (isCyclic ? (_ + 1) % itemsCount : Math.min(_ + 1, itemsCount - 1))), []);
-        const dec = useCallback(() => setActiveIndex((_) => (isCyclic ? (itemsCount + _ - 1) % itemsCount : Math.max(_ - 1, 0))), []);
-        const isScrollAvailable = itemsCount > visibleItemCount;
-        const isCyclicAndScrollAvailable = isCyclic && isScrollAvailable;
-        const canInc = isCyclicAndScrollAvailable ||
-            (isScrollAvailable && itemsCount - activeIndex > visibleItemCount);
-        const canDec = isCyclicAndScrollAvailable || Boolean(isScrollAvailable && activeIndex > 0);
-        return [
-            activeIndex,
-            {
-                inc,
-                dec,
-                canInc,
-                canDec,
-            },
-        ];
-    };
-
     const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
     const BORDER_CLASSES$1 = 'border-main-stroke border-solid border';
     const DIVIDER_CLASSES$1 = 'border-main-divider border border-t-0 border-x-0';
@@ -1339,7 +1398,7 @@
         }))
             .slice(0, isShowAllRow ? rowHeaders.length : visibleRowLength);
         const isScrollAvailable = colData.length > COLS_LENGTH_FOR_SCROLL$1;
-        const [activeIndex, controls] = useCarouselControl({
+        const [activeIndex, controls] = useCarouselControls({
             itemsCount: colData.length,
             visibleItemCount: COLS_LENGTH_FOR_SCROLL$1,
         });
@@ -2249,7 +2308,7 @@
         return (jsxs(BlockWrapper, { className: `flex justify-between font-sans p-9 box-border relative min-h-[320px]
         ${getTileMinHeight(className)}
         ${VersionStyleMap[version]}
-        ${className}`, ...rest, children: [jsxs(BaseTile, { className: "z-10", title: title ? (jsx(Heading, { headingType: headingType, as: "h3", title: title, className: `whitespace-pre-wrap max-w-[509px] mb-6
+        ${className}`, ...rest, children: [jsxs(BaseTile, { className: "z-10", title: title ? (jsx(Heading, { headingType: headingType, as: "h3", title: title, className: `whitespace-pre-wrap mb-6 w-full
                   ${textColorClass} ${AlignText[alignTitle]}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { buttons: buttonsWithClass, className: "flex gap-4", ...rest })) : null, children: [renderDescription$1(description), jsxs("div", { className: "flex flex-1 items-center", children: [qr?.src ? (jsx("div", { className: `flex justify-center mr-5 bg-white rounded-md ${containerStyle}`, children: jsx(ImgInner, { className: "w-fit", image: qr }) })) : null, renderList$1(version, items)] })] }), image?.src ? (jsx("div", { className: "absolute right-0 bottom-0", children: jsx(ImgInner, { image: image }) })) : null] }));
     });
     const renderList$1 = (version, items) => {
@@ -2786,12 +2845,14 @@
 
     const renderBenefit$1 = (version = 'primary', benefitsVersion = 'normal') => ({ icon, label, description }, i) => (jsx(BenefitItem, { icon: icon, label: label, description: description, version: version, benefitsVersion: benefitsVersion }, String(i)));
 
-    const ProductBlockInner = JSX(({ className = '', title, headlineVersion = 'L', description, benefits, benefitsVersion, buttons, image, items, version = 'primary', isDotted = true, textBlockClassName = '', ...rest }) => {
+    const ProductBlockInner = JSX(({ className = '', title, headlineVersion = 'L', description, benefitsCountOfRow = 3, benefits, benefitsVersion, buttons, image, items, version = 'primary', isDotted = true, textBlockClassName = '', ...rest }) => {
         const benefitsCount = benefits?.filter((_) => _.label)?.length;
-        const benefitsContainerStyles = getBenefitsContainerStyles(benefitsCount);
+        const benefitsContainerStyles = getBenefitsContainerStyles(benefitsCountOfRow);
         return (jsxs("div", { className: `flex grow justify-between items-stretch h-full ${className}`, children: [jsxs("div", { className: `flex flex-col ${textBlockClassName}`, children: [jsx(Headline, { title: title, description: description, className: `!p-0 max-w-[600px]`, bgColorHeadline: version, headlineVersion: headlineVersion, align: "left", ...rest }), jsxs(BaseTile, { buttons: buttons?.length ? (jsx(ButtonSection, { buttons: buttons, className: "flex gap-4", ...rest })) : null, children: [benefitsCount ? (jsx("div", { className: benefitsContainerStyles, children: benefits.map(renderBenefit$1(version, benefitsVersion)) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-h6", items: items, itemClassName: "mb-[7px]", version: version, isDotted: isDotted })) : null] })] }), image?.src && jsx(ImgInner, { className: "mt-[-50px]", image: image })] }));
     });
-    const getBenefitsContainerStyles = (benefitsCount = 0) => `gap-6 mt-6 ${benefitsCount > 3 ? 'inline-grid grid-cols-[auto_auto]' : 'flex'}`;
+    const getBenefitsContainerStyles = (benefitsCountOfRow = 2) => `gap-6 mt-6 ${benefitsCountOfRow > 2
+    ? 'inline-grid grid-cols-[auto_auto_auto]'
+    : 'inline-grid grid-cols-[auto_auto]'}`;
 
     function renderBackwardButton(button, version, className) {
         const { text, href, target, onClick } = button;
@@ -3355,7 +3416,7 @@
             }) }));
     });
 
-    const InnerTableHeader = JSX(({ currencies, linkToPDF, activeTabIndex, setActiveTabIndex }) => (jsxs("div", { className: "flex justify-between w-full pt-2.5 pb-3", children: [currencies && currencies.length > 1 ? (jsx("div", { className: "flex bg-secondary-light p-1.5 rounded-md", children: currencies.map((currency, idx) => (jsx("div", { className: `rounded-md text-xl-light px-4 py-3 cursor-pointer ${idx === activeTabIndex ? 'bg-primary-main text-white' : 'text-secondary-text'}`, onClick: () => setActiveTabIndex(idx), children: currency || idx + 1 }, currency))) })) : null, linkToPDF ? (jsx(Button, { href: linkToPDF, version: "secondary", target: "_blank", appendLeft: jsx(ImgInner, { image: "DocDownloadIcon", className: "mr-0.5", width: "20", height: "20", asSVG: true }), text: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0432 PDF" })) : null] })));
+    const InnerTableHeader = JSX(({ currencies, linkToPDF, activeTabIndex, setActiveTabIndex }) => (jsxs("div", { className: "flex justify-between w-full pt-2.5 pb-3", children: [currencies && currencies.length > 1 ? (jsx("div", { className: "flex bg-secondary-light p-1.5 rounded-md", children: currencies.map((currency, idx) => (jsx("div", { className: `rounded-md text-xl-light px-4 py-3 cursor-pointer ${idx === activeTabIndex ? 'bg-primary-main text-white' : 'text-secondary-text'}`, onClick: () => setActiveTabIndex(idx), children: currency || idx + 1 }, currency))) })) : null, linkToPDF ? (jsx(Button, { href: linkToPDF, version: "secondary", target: "_blank", appendLeft: jsx(Icon, { name: "DocDownloadIcon", iconVersion: "color", className: "mr-0.5", width: "20", height: "20", asSVG: true }), text: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0432 PDF" })) : null] })));
 
     const EMPTY_DATA = 'Данных нет';
     const InnerTable = JSX(({ dataUrl, pdfUrl, onClick }) => {
@@ -3382,7 +3443,7 @@
             data: colData.map((col) => col?.[i] || []),
         }));
         const columnsLength = colData.length;
-        const [activeIndex, controls] = useCarouselControl({
+        const [activeIndex, controls] = useCarouselControls({
             itemsCount: colData.length,
             visibleItemCount: COLS_LENGTH_FOR_SCROLL,
         });
@@ -3483,47 +3544,6 @@
         exclude: ['VerticalLayout'],
     };
 
-    const BLOCK_CLASSES = 'absolute border border-solid border-main-stroke w-[100%] h-[100%]';
-    const CARD_STYLE_MAP = {
-        normal: 'min-w-[100%] justify-center items-center my-7 col-span-12',
-        mini: 'w-1/3 justify-center items-center mx-4 my-9 col-span-4',
-    };
-    const CARD_WIDTH_MAP = {
-        normal: 'w-[1007px]',
-        mini: 'w-[350px]',
-    };
-    const CarouselCard = JSX(({ button, className = '', description, title, version = 'normal' }) => {
-        return (jsx("section", { className: `flex ${CARD_STYLE_MAP[version]}`, children: jsxs("div", { className: `relative ${CARD_WIDTH_MAP[version]}`, children: [jsxs("div", { className: `relative bg-white py-6 px-10 z-10
-              border border-solid border-green-light ${className}`, children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "M", align: "center" }), button ? renderButton({ button, buttonClassName: 'mt-6 w-[158px]' }) : null] }), jsx("div", { className: `top-9 right-12 bg-green-dark ${BLOCK_CLASSES}` }), jsx("div", { className: `top-6 right-8 bg-green ${BLOCK_CLASSES}` }), jsx("div", { className: `top-3 right-4 bg-green-light ${BLOCK_CLASSES}` })] }) }));
-    });
-
-    const CarouselContainer = JSX(({ children, activeItem, cardFullViewCount, cardWidth }) => {
-        const cardFullViewStyles = cardFullViewCount === 1
-            ? `translateX(-${activeItem}00%)`
-            : `translateX(-${activeItem * cardWidth}px)`;
-        return (jsx("div", { className: "w-auto flex flex-1 duration-1000", style: { transform: `${cardFullViewStyles}` }, role: "list", children: children }));
-    });
-
-    const Carousel = JSX(({ cardFullViewCount = 1, children, cardWidth = 1007, className = '', isBlur = true, isCyclic = false, block, ...rest }) => {
-        const blurClasses = isBlur ? 'absolute top-0 bottom-0 w-[84px]' : '';
-        const { blocks: childBlocks } = block || {};
-        const childBlocksLength = childBlocks !== undefined ? childBlocks.length : 0;
-        const isScrollAvailable = childBlocksLength > cardFullViewCount;
-        const [activeIndex, controls] = useCarouselControl({
-            itemsCount: childBlocksLength,
-            visibleItemCount: cardFullViewCount,
-            isCyclic,
-        });
-        const { inc, dec, canDec, canInc } = controls;
-        return (jsxs(BlockWrapper, { className: `box-border h-full relative font-sans flex flex-col justify-center overflow-hidden ${className}`, ...rest, children: [jsx(CarouselContainer, { activeItem: activeIndex, cardFullViewCount: cardFullViewCount, cardWidth: cardWidth, children: children }), isScrollAvailable ? (jsx("div", { children: renderArrows({
-                        handler: [dec, inc],
-                        isShown: [canDec, canInc],
-                        btnClass: ['left-8', 'right-8'],
-                        className: 'top-1/2 z-10',
-                    }) })) : null, isScrollAvailable ? (jsxs("div", { children: [jsx("div", { className: `${blurClasses} left-0 bg-opacity-from-white` }), jsx("div", { className: `${blurClasses} right-0 bg-opacity-to-white` })] })) : null] }));
-    });
-    Carousel.childrenTypes = ['CarouselCard'];
-
     const Blocks = {
         Accordion,
         AccordionItem,
@@ -3532,10 +3552,13 @@
         Bonus,
         BonusBenefitsBlock,
         CardTransfer,
-        ComparisonTable,
         Calculator,
+        Carousel,
+        CarouselCard,
+        CarouselTariffsCard,
         Catalog,
         ContactsBlock,
+        ComparisonTable,
         ErrorBlock,
         ExchangeRateTile,
         Footer,
@@ -3568,8 +3591,6 @@
         TextBlock,
         Tile,
         VerticalLayout,
-        CarouselCard,
-        Carousel,
     };
 
     function style2className(style) {
@@ -3677,7 +3698,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.29";
+    const packageVersion = "0.6.31";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;