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

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 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 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', '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';
@@ -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) => {
@@ -3483,47 +3542,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 +3550,13 @@
         Bonus,
         BonusBenefitsBlock,
         CardTransfer,
-        ComparisonTable,
         Calculator,
+        Carousel,
+        CarouselCard,
+        CarouselTariffsCard,
         Catalog,
         ContactsBlock,
+        ComparisonTable,
         ErrorBlock,
         ExchangeRateTile,
         Footer,
@@ -3568,8 +3589,6 @@
         TextBlock,
         Tile,
         VerticalLayout,
-        CarouselCard,
-        Carousel,
     };
 
     function style2className(style) {
@@ -3677,7 +3696,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.30";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;