@redneckz/wildless-cms-uni-blocks 0.14.814 → 0.14.815

package/bundle/bundle.umd.js

@@ -160,7 +160,7 @@
             // Adjusted by decorator block and blockClassName
             render: ({ block: adjustedBlock, blockClassName: adjustedBlockClassName }) => {
                 const { content } = adjustedBlock;
-                return BlockComponent ? (jsx(BlockComponent, { className: adjustedBlockClassName, block: block, options: options, ...content, ...extraProps }, key)) : null;
+                return BlockComponent ? (jsx(BlockComponent, { ...content, ...extraProps, className: style(adjustedBlockClassName, content?.className), block: block, options: options }, key)) : null;
             },
         }, key);
     }
@@ -621,13 +621,12 @@
         const handleClick = useCallback(() => router.back(), []);
         const backwardButtonText = rest.options?.page?.common?.backwardButton;
         const isBackBtn = backwardButton && !isMobile;
-        return (jsxs("div", { className: style('relative flex flex-col gap-3xl overflow-hidden', padding || defaultPadding, className), children: [isBackBtn && renderBackwardButton({ version, handleClick, text: backwardButtonText }), title ? jsx("div", { className: "relative h-full", children: title }) : null, jsxs("div", { className: style('grow relative flex flex-col @xl:flex-row gap-3xl w-full', {
+        return (jsxs("div", { className: style('relative flex flex-col gap-3xl overflow-hidden', padding || defaultPadding, className), children: [isBackBtn && renderBackwardButton({ version, handleClick, text: backwardButtonText }), title ? jsx("div", { className: "relative", children: title }) : null, jsxs("div", { className: style('grow relative flex flex-col @xl:flex-row gap-3xl w-full', {
                         'self-start @xl:w-auto': leftImage,
                     }), children: [renderImageContainer(leftImage, { imageAlign, className: 'mx-auto' }), jsxs("div", { className: style('grid gap-3xl items-center md:items-stretch', {
                                 '@xl:grid-cols-2 auto-cols-fr': rightImage,
                                 grow: !leftImage,
-                            }, 'h-full', //? fix issue https://github.com/redneckz/temp_wcms/issues/1254
-                            'auto-rows-[max-content_1fr]'), children: [jsxs("div", { className: "grow space-y-lg min-w-fit", children: [insetTitle, children] }), renderUnitContainer(renderChildren({ ...rest, extraProps: { className: '@container-normal' } })), renderImageContainer(rightImage, {
+                            }, 'h-auto'), children: [renderMiddleContent(insetTitle, children), renderUnitContainer(renderChildren({ ...rest, extraProps: { className: '@container-normal' } })), renderImageContainer(rightImage, {
                                     className: style('@xl:justify-self-end @xl:col-start-2', {
                                         [imageAlwaysOnRightContainerStyle(isImageAlwaysOnRight)]: buttons,
                                         'col-start-2 self-center': isImageAlwaysOnRight,
@@ -636,6 +635,7 @@
                                     imageAlign,
                                 }), buttons ? jsx("div", { className: "self-end", children: buttons }) : null] })] })] }));
     });
+    const renderMiddleContent = (insetTitle, children) => insetTitle || children ? (jsxs("div", { className: "grow space-y-lg min-w-fit", children: [insetTitle, children] })) : null;
     const imageAlwaysOnRightContainerStyle = (isImage) => style(isImage ? 'row-span-2' : '@xl:row-span-2');
     const renderUnitContainer = (childrenBlocks) => childrenBlocks?.length ? (jsx("div", { className: "flex items-start justify-end", children: childrenBlocks })) : null;
 
@@ -716,8 +716,15 @@
         const img = image?.src ? jsx(Img, { image: image }) : null;
         const headline = (jsx(Headline, { title: title, description: description, headlineVersion: headlineVersion, align: align, isEmbedded: true }));
         const filteredBenefits = benefits?.filter((_) => '__html' in _ || 'label' in _ || 'description' in _);
-        return (jsx(BaseTile, { className: className, padding: padding, defaultPadding: defaultPadding, ...(isFullWidthTitle ? { title: headline } : { insetTitle: headline }), ...leftOrRightImage(img, directionRight), isImageSecondary: isImageSecondary, imageAlign: imageAlign, isImageAlwaysOnRight: isImageAlwaysOnRight, buttons: renderButtonsSection(buttons), backwardButton: backwardButton, ...rest, children: jsxs("div", { className: "flex flex-col sm:gap-xl gap-4xl", children: [filteredBenefits?.length ? (jsx(BenefitsList, { benefitsVersion: benefitsVersion, isTabularBenefits: isTabularBenefits, benefits: filteredBenefits })) : null, __html ? (jsx(RichText, { richVersion: richVersion, __html: __html, isDotted: isDotted, itemSize: RICHTEXT_SIZE[headlineVersion] })) : null, children, priceList?.length ? jsx(PriceList, { priceList: priceList }) : null, renderTags(tags)] }) }));
+        return (jsx(BaseTile, { className: className, padding: padding, defaultPadding: defaultPadding, ...(isFullWidthTitle ? { title: headline } : { insetTitle: headline }), ...leftOrRightImage(img, directionRight), isImageSecondary: isImageSecondary, imageAlign: imageAlign, isImageAlwaysOnRight: isImageAlwaysOnRight, buttons: renderButtonsSection(buttons), backwardButton: backwardButton, ...rest, children: renderChildList(renderBenefits(filteredBenefits, { benefitsVersion, isTabularBenefits }), renderRichText(__html, { richVersion, isDotted, headlineVersion }), children, renderPriceList(priceList), renderTags(tags)) }));
     });
+    const renderBenefits = (benefits, { benefitsVersion, isTabularBenefits, } = {}) => benefits?.length ? (jsx(BenefitsList, { benefitsVersion: benefitsVersion, isTabularBenefits: isTabularBenefits, benefits: benefits })) : null;
+    const renderRichText = (__html, { richVersion, isDotted, headlineVersion, } = {}) => __html ? (jsx(RichText, { __html: __html, richVersion: richVersion, isDotted: isDotted, itemSize: RICHTEXT_SIZE[headlineVersion ?? 'L'] })) : null;
+    const renderPriceList = (priceList) => priceList?.length ? jsx(PriceList, { priceList: priceList }) : null;
+    const renderChildList = (...elements) => {
+        const cleanElements = elements.filter(Boolean);
+        return cleanElements.length ? (jsx("div", { className: "flex flex-col sm:gap-xl gap-4xl", children: cleanElements.map((_, i) => (jsx("div", { children: _ }, String(i)))) })) : null;
+    };
     const leftOrRightImage = (img, directionRight) => directionRight ? { rightImage: img } : { leftImage: img };
     const renderTags = (tags) => (tags?.length ? jsx(Tags, { tags: tags }) : null);
 
@@ -7390,7 +7397,7 @@
         black: 'bg-black',
         white: 'bg-white',
     };
-    const CarouselCatalogCard = JSX(({ className = '', title, description, image, price, button, colors = [], align = 'text-left', padding, ...rest }) => (jsx(BlockWrapper, { className: style('flex flex-col justify-left', className), defaultPadding: "p-2xl", ...rest, children: jsxs(BaseTile, { className: "h-full", padding: padding, title: jsx(Headline, { title: title, description: description, headlineVersion: "XS", isEmbedded: true, align: align }), rightImage: image?.src ? (jsx(Img, { className: "flex justify-center align-center mb-xl", image: image })) : null, buttons: renderButtonsSection([button], { buttonClassName: 'w-full self-end' }), children: [colors?.length ? (jsxs("div", { className: "flex text-secondary-text mb-m", children: [jsx("div", { className: "mr-xs", children: jsx(Text, { size: "text-s", align: "text-left", font: "font-light", children: "\u0426\u0432\u0435\u0442\u0430:" }) }), colors.map(renderColorOption)] })) : null, price ? (jsxs(Text, { size: "text-h3", align: "text-left", children: [price, "\u00A0\u20BD"] })) : null] }) })));
+    const CarouselCatalogCard = JSX(({ className = '', title, description, image, price, button, colors = [], align = 'text-left', padding, ...rest }) => (jsx(BlockWrapper, { className: style('flex flex-col justify-left', className), defaultPadding: "p-2xl", ...rest, children: jsxs(BaseTile, { className: "h-full", padding: padding, title: jsx(Headline, { title: title, description: description, headlineVersion: "XS", isEmbedded: true, align: align, className: "min-h-24" }), rightImage: image?.src ? (jsx(Img, { className: "flex justify-center align-center mb-xl", image: image })) : null, buttons: renderButtonsSection([button], { buttonClassName: 'w-full self-end' }), children: [colors?.length ? (jsxs("div", { className: "flex text-secondary-text mb-m", children: [jsx("div", { className: "mr-xs", children: jsx(Text, { size: "text-s", align: "text-left", font: "font-light", children: "\u0426\u0432\u0435\u0442\u0430:" }) }), colors.map(renderColorOption)] })) : null, price ? (jsxs(Text, { size: "text-h3", align: "text-left", children: [price, "\u00A0\u20BD"] })) : null] }) })));
     const renderColorOption = (color, i) => (jsx("figure", { className: `w-6 h-6 ml-s border border-solid border-main-divider rounded-full ${cardStyleMap[color]}` }, String(i)));
 
     const CarouselLinkButton = JSX(({ icon, ...linkProps }) => {
@@ -9889,6 +9896,77 @@
         return (jsxs(BlockWrapper, { tag: "footer", className: style('grid gap-y-xl p-4xl pb-24 lg:p-xl', className), ...rest, children: [renderLogoSearchBar(common, navigationItems), jsxs("div", { className: "flex flex-col lg:flex-row items-center @lg:items-stretch gap-lg lg:gap-6xl ", children: [jsx(Sitemap, { navigationItems: navigationItems }), jsx("div", { className: "border-t border-main-divider lg:hidden w-full" }), jsxs("div", { className: style(LEFT_COLUMN_STYLE, 'flex flex-col shrink-0 overflow-hidden space-y-xl'), children: [jsx(Contacts, { items: contacts }), feedbackButton ? (jsx(LinkButton, { className: "w-full", version: "primary", ...feedbackButton })) : null, mediaLinks.map((_, i) => (jsx(SocialMedia, { media: _?.links ?? [], showButtonText: false, stretched: true, children: _?.title }, String(i)))), otherLinks.map((_, i) => (jsx(Link, { className: "text-s font-light", ..._ }, `${_.href}_${i}`)))] })] }), jsx(HorizontalNavigation, { title: horizontalNavigationTitle, links: relatedEnterprises }), jsx(TextInformation, { links: documents, license: license })] }));
     });
 
+    const getInnerPadding = (isPadding = false) => isPadding ? {} : { padding: 'p-0' };
+
+    const gapStyles = {
+        XXL: 'gap-6xl',
+        XL: 'gap-5xl',
+        L: 'gap-3xl',
+        M: 'gap-m',
+        S: 'gap-xs',
+        XS: 'gap-2xs',
+        '': '',
+    };
+
+    const MIN_LENGTH_CHILD = 5;
+    const SHORT_TILE_INDEXES = [1, 2, 3, 4];
+    const LINK_SCHEMA = {
+        link: {
+            allOf: [
+                { $ref: `#/definitions/LinkCommonProps` },
+                {
+                    type: 'object',
+                    properties: {
+                        data: {
+                            type: 'array',
+                            items: { $ref: '#/definitions/AspectsDef' },
+                            title: 'Дополнительные атрибуты',
+                        },
+                    },
+                },
+            ],
+            title: 'Ссылка',
+            required: ['href'],
+        },
+    };
+    const GalleryLayout = UniBlock(({ className = '', padding = 'p-0', gap = '', isInnerPadding = true, version = 'transparent', isTheme = false, isCardBorder = false, ...rest }) => (jsx(BlockWrapper, { className: style('grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-4 lg:auto-rows-fr', gapStyles[gap], className), padding: padding, version: version, isTheme: isTheme, ...rest, children: renderChildren({
+            ...rest,
+            renderProps: getRenderProps({ isInnerPadding, isCardBorder }),
+        }) })), {
+        childrenTypes: ['ProductBlock'],
+        childSchema: () => LINK_SCHEMA,
+        allowRemoveChild: (slot) => (slot?.blocks ?? []).length > MIN_LENGTH_CHILD,
+    });
+    const getRenderProps = ({ isInnerPadding, isCardBorder, }) => (childBlock, childOptions, i) => renderBlock$1(childBlock, {
+        ...childOptions,
+        blockDecorator: blockDecoratorWrapper(childOptions.blockDecorator, i),
+    }, {
+        className: style('w-full', getBorderStyle(isCardBorder)),
+        ...getInnerPadding(isInnerPadding),
+    });
+    const blockDecoratorWrapper = (blockDecorator, idx = 0) => (props, i) => blockDecorator?.({
+        ...props,
+        render: (renderProps) => productBlockDecorator(idx)({ ...props, ...renderProps }, i),
+    }, `wrap_${i}`) ?? productBlockDecorator(idx)(props, i);
+    const productBlockDecorator = (idx) => ({ blockClassName, block, render }, i) => (jsx(LinkWrapper, { ...block.content?.link, className: getChildStyle(idx), children: render({
+            blockClassName: style(blockClassName, 'h-full'),
+            block: modifyBlock(block, idx),
+        }) }, i));
+    const getChildStyle = (index) => SHORT_TILE_INDEXES.includes(index)
+        ? 'lg:col-span-1 lg:row-span-1'
+        : 'lg:col-span-2 lg:row-span-2';
+    const modifyBlock = (block, i) => {
+        const content = { ...block.content };
+        if (SHORT_TILE_INDEXES.includes(i)) {
+            delete content.description;
+            delete content.benefits;
+        }
+        if (content.link?.href) {
+            delete content.buttons;
+        }
+        return { ...block, content };
+    };
+
     const GracePeriod = JSX(({ className = '', title, description, calendar, ...rest }) => (jsxs(BlockWrapper, { className: style('space-y-m', className), defaultPadding: "p-6xl", ...rest, children: [jsx(Headline, { title: title, description: description, headlineVersion: "M", isEmbedded: true }), calendar ? renderCalendar(calendar) : null] })));
     const renderCalendar = (calendar) => {
         const colCount = calendar.reduce((accumulator, currentValue) => currentValue?.month?.length ? accumulator + currentValue.month.length : accumulator, 0) || 1;
@@ -10225,18 +10303,6 @@
         common: page?.common ?? {},
     });
 
-    const getInnerPadding = (isPadding = false) => isPadding ? {} : { padding: 'p-0' };
-
-    const gapStyles = {
-        XXL: 'gap-6xl',
-        XL: 'gap-5xl',
-        L: 'gap-3xl',
-        M: 'gap-m',
-        S: 'gap-xs',
-        XS: 'gap-2xs',
-        '': '',
-    };
-
     const HorizontalLayout = UniBlock(({ className = '', padding = 'p-0', gap = 'XS', isInnerPadding = true, version = 'transparent', isTheme = false, isCardBorder, ...rest }) => (jsx(BlockWrapper, { className: style('relative', 'grid grid-cols-12', gapStyles[gap], className), padding: padding, version: version, isTheme: isTheme, ...rest, children: renderChildren({
             ...rest,
             extraProps: {
@@ -11342,6 +11408,7 @@
         ErrorBlock,
         ExchangeRateTile,
         Footer,
+        GalleryLayout,
         GracePeriod,
         GrantSupport,
         Header,
@@ -11514,7 +11581,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.813";
+    const packageVersion = "0.14.814";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;