@redneckz/wildless-cms-uni-blocks 0.10.7 → 0.10.8

package/mobile/bundle/bundle.umd.js

@@ -642,7 +642,7 @@
         const { close } = useDialog();
         return (props) => ({
             ...props,
-            href: isRemote ? props.href : adjustHref(router)(props.href, basePath),
+            href: isRemote && !basePath ? props.href : adjustHref(router)(props.href, basePath),
             'aria-label': props.text,
             onClick: handlerDecorator(handleHref(props), props),
         });
@@ -809,6 +809,144 @@
     const getAlignStyle = (isAlignCenter) => isAlignCenter ? 'flex justify-center' : '';
     const renderDots = (containerRef, dotsActiveIndex, itemCount) => (jsx(SwipeListControlDots, { containerRef: containerRef, activeIndex: dotsActiveIndex, dotCount: itemCount, listType: 'horizontal-list' }));
 
+    const LinkWrapper = JSX(({ className = '', href, target, isRemote = false, children }) => {
+        const link = useLink({ isRemote });
+        const linkProps = link({ href, target });
+        const Tag = href ? 'a' : 'div';
+        return (jsx(Tag, { className: style('block', className), ...(href ? linkProps : {}), children: children }));
+    });
+
+    const DOT_SIZE_MAP = {
+        L: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-4',
+        M: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-3',
+        S: 'w-1 h-1 min-w-1 min-h-1 mr-2',
+    };
+    const ListItem = JSX(({ className = '', isDotted = true, children, size = 'M' }) => (jsxs("div", { className: `font-sans flex items-baseline ${className}`, role: "listitem", children: [isDotted ? (jsx("div", { children: jsx("div", { className: `rounded-full align-middle inline-block bg-primary-text group-data-secondary:bg-white ${DOT_SIZE_MAP[size]}` }) })) : null, jsx("span", { children: children })] })));
+
+    const TEXT_SIZE_MAP = {
+        S: 'text-l-light',
+        M: 'text-h6',
+        L: 'text-h5',
+    };
+    const ITEM_INDENT_MAP = {
+        S: 'ml-2',
+        M: 'ml-3',
+        L: 'ml-4',
+    };
+    const List = JSX(({ className = '', hasIndent, isDotted, itemClassName = '', items, listItemSize = 'M' }) => items?.length ? (jsx("section", { className: `text-primary-text group-data-secondary:text-white group-data-gray:text-secondary-text ${TEXT_SIZE_MAP[listItemSize]} ${hasIndent ? ITEM_INDENT_MAP[listItemSize] : ''} ${className}`, role: "list", children: items.map((item, i) => (jsx(ListItem, { className: itemClassName, isDotted: isDotted, size: listItemSize, children: item }, String(i)))) })) : null);
+
+    const ICONS_MAP = [
+        {
+            origins: ['t.me', 'telegram.org'],
+            iconMapped: { icon: 'TelegramIcon' },
+            label: 'Телеграм',
+        },
+        {
+            origins: ['vk.com'],
+            iconMapped: { icon: 'VKIcon' },
+            label: 'ВКонтакте',
+        },
+        {
+            origins: ['ok.ru'],
+            iconMapped: { icon: 'OkIcon' },
+            label: 'Одноклассники',
+        },
+        {
+            origins: ['apps.apple.com'],
+            iconMapped: { icon: 'AppleIcon' },
+            label: 'App Store',
+        },
+        {
+            origins: ['play.google.com'],
+            iconMapped: { icon: 'PlayMarketIcon' },
+            label: 'Google Play',
+        },
+        {
+            origins: ['youtube.com'],
+            iconMapped: { icon: 'YoutubeIcon' },
+            label: 'Youtube',
+        },
+    ];
+    const buttonSizeStyles = {
+        default: 'w-14 h-14',
+        small: 'w-12 h-12',
+    };
+    const buttonStylesWithText = (text, buttonSize) => text
+        ? ''
+        : `group/media flex items-center justify-center box-border ${buttonSizeStyles[buttonSize]}`;
+    const MediaButton = JSX(({ buttonSize = 'default', rounded = false, icon, ...rest }) => {
+        const { href, version, text = '' } = rest;
+        const { iconMapped, label } = ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
+        const iconCustom = getFilteredIcon(icon) ?? iconMapped;
+        return (jsx(Button, { className: style(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', buttonStylesWithText(text, buttonSize)), "aria-label": label, rel: "noopener noreferrer", target: "_blank", text: text, version: version, ...rest, children: iconCustom && !text ? (jsx(Img, { image: iconCustom, imageClassName: "group-hover/media:text-white", width: "24", height: "24" })) : null }));
+    });
+    const getFilteredIcon = (icon) => (icon?.src || icon?.icon ? icon : undefined);
+
+    const SocialMedia = JSX(({ className = '', media }) => (jsx("div", { className: `flex gap-2 items-start justify-start ${className}`, children: media?.map((_, index) => (jsx(MediaButton, { ..._ }, String(index)))) })));
+
+    const HeadingClass = {
+        h0: 'text-m-title',
+        h1: 'text-m-title',
+        h2: 'text-m-title',
+        h3: 'text-h6',
+        h4: 'text-m-title-xs',
+        h5: 'text-m-title-xs',
+        h6: 'text-m-title-xs',
+    };
+    const Heading = JSX((props) => {
+        const { className, headingType = 'h3', title, as: Tag = 'h3' } = props;
+        return (jsx(Tag, { className: `font-sans font-medium m-0 ${HeadingClass[headingType]} ${className || ''}`, children: title }));
+    });
+
+    const Paragraph = JSX(({ children, ...style }) => (jsx("p", { className: ['font-sans', ...Object.values(style)].join(' '), children: children })));
+
+    const headlineVersionStyles = {
+        XXL: {
+            title: { headingType: 'h0', as: 'h1' },
+            descriptionSize: 'text-h5',
+            descriptionStyle: 'mt-5',
+        },
+        XL: {
+            title: { headingType: 'h1', as: 'h1' },
+            descriptionSize: 'text-xl-light',
+            descriptionStyle: 'mt-4',
+        },
+        L: {
+            title: { headingType: 'h2', as: 'h2' },
+            descriptionSize: 'text-xl-light',
+            descriptionStyle: 'mt-4',
+        },
+        M: {
+            title: { headingType: 'h3', as: 'h3' },
+            descriptionSize: 'text-xl-light',
+            descriptionStyle: 'mt-3',
+        },
+        S: {
+            title: { headingType: 'h4', as: 'h4' },
+            descriptionSize: 'text-xl-light',
+            descriptionStyle: 'mt-2',
+        },
+        XS: {
+            title: { headingType: 'h5', as: 'h5' },
+            descriptionSize: 'text-l-light',
+            descriptionStyle: 'mt-2',
+        },
+    };
+
+    const Headline = JSX(({ className, title, description, headlineVersion = 'XL', align = 'text-center', as, isPadding = true, isTheme = false, version = '', ...rest }) => {
+        const versionStyle = headlineVersionStyles[headlineVersion];
+        const paddingStyle = isPadding ? 'p-default' : '';
+        const descriptionStyle = { marginTop: versionStyle.descriptionStyle };
+        return (jsxs(BlockWrapper, { className: style(paddingStyle, className), version: version, isTheme: isTheme, ...rest, children: [title ? (jsx(Heading, { className: style('whitespace-pre-wrap', align), ...versionStyle?.title, as: as || versionStyle?.title.as, title: title })) : null, description ? (jsx(Paragraph, { size: versionStyle.descriptionSize, align: align, ...descriptionStyle, children: description })) : null] }));
+    });
+
+    const BORDER_STYLE = 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';
+
+    const CarouselRecommendationCard = JSX(({ className = '', description, href, icon, items = [], socialMedia = [], target, title, align = 'text-left', ...rest }) => {
+        return (jsx(BlockWrapper, { className: style('relative box-border p-default group-data-gray:bg-main-divider/50', BORDER_STYLE, className), ...rest, children: jsxs(LinkWrapper, { href: href, target: target, children: [jsx(Headline, { className: "mb-2", title: title, description: description, headlineVersion: "S", isPadding: false, align: align }), items.length ? (jsx(List, { className: "flex flex-col gap-2", items: items, listItemSize: "S" })) : null, renderIcon$1(icon), socialMedia.length ? jsx(SocialMedia, { className: "mt-5", media: socialMedia }) : null] }) }));
+    });
+    const renderIcon$1 = (icon) => icon?.src || icon?.icon ? (jsx("div", { children: jsx(Img, { image: icon }) })) : null;
+
     const Foldable = JSX(({ className = '', isFoldButtonOnTop = false, unfoldedByDefault = false, renderFoldableSection, renderFoldButton, }) => {
         const [isUnfolded, setIsUnfolded] = useState(unfoldedByDefault);
         const onToggle = useCallback(() => {
@@ -831,23 +969,7 @@
         return (jsx("div", { ref: containerRef, className: `transition-max-h duration-300 overflow-hidden ${containerRef.current || !isUnfolded ? 'max-h-0' : ''} ${className}`, children: children }));
     });
 
-    const HeadingClass = {
-        h0: 'text-m-title',
-        h1: 'text-m-title',
-        h2: 'text-m-title',
-        h3: 'text-h6',
-        h4: 'text-m-title-xs',
-        h5: 'text-m-title-xs',
-        h6: 'text-m-title-xs',
-    };
-    const Heading = JSX((props) => {
-        const { className, headingType = 'h3', title, as: Tag = 'h3' } = props;
-        return (jsx(Tag, { className: `font-sans font-medium m-0 ${HeadingClass[headingType]} ${className || ''}`, children: title }));
-    });
-
-    const Paragraph = JSX(({ children, ...style }) => (jsx("p", { className: ['font-sans', ...Object.values(style)].join(' '), children: children })));
-
-    const getPaddingStyle = (isHighlighting) => isHighlighting ? 'p-default mt-6' : 'p-default mt-6';
+    const getPaddingStyle = (isHighlighting = false) => isHighlighting ? 'p-default mt-6' : 'mt-6 p-default'; // Хак для мобильной версии т.к. контракт должен быть идентичный
 
     const renderButtonsSection = (buttons, { className = '', buttonClassName, isVertical } = {}) => buttons?.length && buttons.some((_) => _?.text || _?.icon?.icon) ? (jsx("div", { className: style('flex', isVertical ? 'flex-col gap-2' : 'gap-4', className), children: buttons.map(renderButton(buttonClassName)) })) : null;
     const renderButton = (buttonClassName = '') => (button, index) => {
@@ -1407,55 +1529,6 @@
 
     const HorizontalNavigation = JSX(({ title, links, className = '' }) => (jsxs("div", { className: className, children: [jsx("span", { className: "text-primary-text text-s font-medium", children: title }), links?.length ? (jsx("div", { className: "flex flex-col gap-2 pt-3", children: links.map((_, i) => (jsx(HorizontalNavigationLink, { index: i, className: "text-s", ..._ }, String(i)))) })) : null] })));
 
-    const ICONS_MAP = [
-        {
-            origins: ['t.me', 'telegram.org'],
-            iconMapped: { icon: 'TelegramIcon' },
-            label: 'Телеграм',
-        },
-        {
-            origins: ['vk.com'],
-            iconMapped: { icon: 'VKIcon' },
-            label: 'ВКонтакте',
-        },
-        {
-            origins: ['ok.ru'],
-            iconMapped: { icon: 'OkIcon' },
-            label: 'Одноклассники',
-        },
-        {
-            origins: ['apps.apple.com'],
-            iconMapped: { icon: 'AppleIcon' },
-            label: 'App Store',
-        },
-        {
-            origins: ['play.google.com'],
-            iconMapped: { icon: 'PlayMarketIcon' },
-            label: 'Google Play',
-        },
-        {
-            origins: ['youtube.com'],
-            iconMapped: { icon: 'YoutubeIcon' },
-            label: 'Youtube',
-        },
-    ];
-    const buttonSizeStyles = {
-        default: 'w-14 h-14',
-        small: 'w-12 h-12',
-    };
-    const buttonStylesWithText = (text, buttonSize) => text
-        ? ''
-        : `group/media flex items-center justify-center box-border ${buttonSizeStyles[buttonSize]}`;
-    const MediaButton = JSX(({ buttonSize = 'default', rounded = false, icon, ...rest }) => {
-        const { href, version, text = '' } = rest;
-        const { iconMapped, label } = ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
-        const iconCustom = getFilteredIcon(icon) ?? iconMapped;
-        return (jsx(Button, { className: style(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', buttonStylesWithText(text, buttonSize)), "aria-label": label, rel: "noopener noreferrer", target: "_blank", text: text, version: version, ...rest, children: iconCustom && !text ? (jsx(Img, { image: iconCustom, imageClassName: "group-hover/media:text-white", width: "24", height: "24" })) : null }));
-    });
-    const getFilteredIcon = (icon) => (icon?.src || icon?.icon ? icon : undefined);
-
-    const SocialMedia = JSX(({ className = '', media }) => (jsx("div", { className: `flex gap-2 items-start justify-start pt-6 pb-6 ${className}`, children: media?.map((_, index) => (jsx(MediaButton, { ..._ }, String(index)))) })));
-
     const TextInformationLink = JSX(({ className = '', index, ...rest }) => {
         const link = useLink({ isRemote: true });
         const { href, target, text, onClick } = link(rest);
@@ -1470,7 +1543,7 @@
         const fallback = rest.options?.page?.fallback;
         const sitemap = useSWRResource(projectSettings.SITEMAP || 'sitemap', fallback);
         const { documents, relatedEnterprises, contacts, socialMedia, horizontalNavigationTitle } = useSWRResource(projectSettings.FOOTER || 'footer', fallback);
-        return (jsxs(BlockWrapper, { tag: "footer", className: `px-4 py-[26px] ${className}`, ...rest, children: [jsx(Contacts, { className: "overflow-hidden", items: contacts, hasButton: true }), jsx("div", { className: "m-0 p-0", children: sitemap.topItems?.map((item, i) => (jsx(RollupItem, { label: item?.text, children: jsx(LinkList, { documents: item.items }) }, String(i)))) }), jsx("div", { className: "mt-4", children: sitemap?.dispositions?.map(renderSubMenuItem) }), jsx(MobileAppTile, { title: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435", description: "\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0434\u043B\u044F IOS \u0438 Android", ...rest }), jsx(SearchBar, { className: "grow" }), jsx(SocialMedia, { className: "pb-4", media: socialMedia }), jsx(HorizontalNavigation, { title: horizontalNavigationTitle, links: relatedEnterprises }), jsx(TextInformation, { links: documents })] }));
+        return (jsxs(BlockWrapper, { tag: "footer", className: `px-4 py-[26px] ${className}`, ...rest, children: [jsx(Contacts, { className: "overflow-hidden", items: contacts, hasButton: true }), jsx("div", { className: "m-0 p-0", children: sitemap.topItems?.map((item, i) => (jsx(RollupItem, { label: item?.text, children: jsx(LinkList, { documents: item.items }) }, String(i)))) }), jsx("div", { className: "mt-4", children: sitemap?.dispositions?.map(renderSubMenuItem) }), jsx(MobileAppTile, { title: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435", description: "\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0434\u043B\u044F IOS \u0438 Android", ...rest }), jsx(SearchBar, { className: "grow" }), jsx(SocialMedia, { className: "pt-6 pb-6", media: socialMedia }), jsx(HorizontalNavigation, { title: horizontalNavigationTitle, links: relatedEnterprises }), jsx(TextInformation, { links: documents })] }));
     });
     const renderSubMenuItem = (menu, i) => {
         const { icon, href, text } = menu;
@@ -1568,46 +1641,6 @@
         return (jsxs(BlockWrapper, { tag: "header", version: version, ...rest, children: [jsxs("div", { className: "container px-4 py-0 box-border", children: [jsx(HeaderTop, { onClick: handleBurgerMenuShow, bgColor: bgColor, logo: logo }), jsx("nav", { className: "flex items-center m-0 p-0 overflow-y-hidden w-full h-12", children: jsx("div", { className: "flex no-scrollbar horizontal-list h-full items-center", children: subItems?.map((_, i) => (jsx(HeaderItem, { className: "mr-8 whitespace-nowrap text-s", active: _ === activeSubItem, ..._ }, String(i)))) }) })] }), burgerMenuShow ? (jsx(HeaderBurger, { onClick: handleBurgerMenuShow, burgerSubMenu: dispositions, defaultLocation: defaultLocation, children: jsx("div", { className: "list-none m-0 p-0", children: topItems?.map((item, i) => (jsx(RollupItem, { label: item.text, children: jsx(LinkList, { documents: item.items }) }, String(i)))) }) })) : null] }));
     });
 
-    const headlineVersionStyles = {
-        XXL: {
-            title: { headingType: 'h0', as: 'h1' },
-            descriptionSize: 'text-h5',
-            descriptionStyle: 'mt-5',
-        },
-        XL: {
-            title: { headingType: 'h1', as: 'h1' },
-            descriptionSize: 'text-xl-light',
-            descriptionStyle: 'mt-4',
-        },
-        L: {
-            title: { headingType: 'h2', as: 'h2' },
-            descriptionSize: 'text-xl-light',
-            descriptionStyle: 'mt-4',
-        },
-        M: {
-            title: { headingType: 'h3', as: 'h3' },
-            descriptionSize: 'text-xl-light',
-            descriptionStyle: 'mt-3',
-        },
-        S: {
-            title: { headingType: 'h4', as: 'h4' },
-            descriptionSize: 'text-xl-light',
-            descriptionStyle: 'mt-2',
-        },
-        XS: {
-            title: { headingType: 'h5', as: 'h5' },
-            descriptionSize: 'text-l-light',
-            descriptionStyle: 'mt-2',
-        },
-    };
-
-    const Headline = JSX(({ className, title, description, headlineVersion = 'XL', align = 'text-center', as, isPadding = true, isTheme = false, version = '', ...rest }) => {
-        const versionStyle = headlineVersionStyles[headlineVersion];
-        const paddingStyle = isPadding ? 'p-default' : '';
-        const descriptionStyle = { marginTop: versionStyle.descriptionStyle };
-        return (jsxs(BlockWrapper, { className: style(paddingStyle, className), version: version, isTheme: isTheme, ...rest, children: [title ? (jsx(Heading, { className: style('whitespace-pre-wrap', align), ...versionStyle?.title, as: as || versionStyle?.title.as, title: title })) : null, description ? (jsx(Paragraph, { size: versionStyle.descriptionSize, align: align, ...descriptionStyle, children: description })) : null] }));
-    });
-
     const ImgBlock = JSX((props) => {
         const { className, image, ...rest } = props;
         return (jsx(BlockWrapper, { className: className, ...rest, children: jsx(Img, { image: image }) }));
@@ -1688,25 +1721,6 @@
     const renderShimmerItem = (width, index) => (jsx("div", { style: { width: `${width || 100}%` }, className: "h-4 mt-2 bg-secondary-light" }, String(index)));
     const goldenSequence = (first, size) => [first].concat(size > 0 ? goldenSequence(first / GOLDEN_RATIO, size - 1) : []);
 
-    const DOT_SIZE_MAP = {
-        L: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-4',
-        M: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-3',
-        S: 'w-1 h-1 min-w-1 min-h-1 mr-2',
-    };
-    const ListItem = JSX(({ className = '', isDotted = true, children, size = 'M' }) => (jsxs("div", { className: `font-sans flex items-baseline ${className}`, role: "listitem", children: [isDotted ? (jsx("div", { children: jsx("div", { className: `rounded-full align-middle inline-block bg-primary-text group-data-secondary:bg-white ${DOT_SIZE_MAP[size]}` }) })) : null, jsx("span", { children: children })] })));
-
-    const TEXT_SIZE_MAP = {
-        S: 'text-l-light',
-        M: 'text-h6',
-        L: 'text-h5',
-    };
-    const ITEM_INDENT_MAP = {
-        S: 'ml-2',
-        M: 'ml-3',
-        L: 'ml-4',
-    };
-    const List = JSX(({ className = '', hasIndent, isDotted, itemClassName = '', items, listItemSize = 'M' }) => items?.length ? (jsx("section", { className: `text-primary-text group-data-secondary:text-white group-data-gray:text-secondary-text ${TEXT_SIZE_MAP[listItemSize]} ${hasIndent ? ITEM_INDENT_MAP[listItemSize] : ''} ${className}`, role: "list", children: items.map((item, i) => (jsx(ListItem, { className: itemClassName, isDotted: isDotted, size: listItemSize, children: item }, String(i)))) })) : null);
-
     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] })] })));
 
     const BenefitItem = JSX((props) => {
@@ -1900,6 +1914,7 @@
         RichTextBlock,
         RollupItem,
         VerticalLayout,
+        CarouselRecommendationCard,
     };
 
     const debounce = (fn, delay = 600) => {
@@ -1957,13 +1972,6 @@
         }, [scrollTarget]);
     }
 
-    const LinkWrapper = JSX(({ className = '', href, target, isRemote = false, children }) => {
-        const link = useLink({ isRemote });
-        const linkProps = link({ href, target });
-        const Tag = href ? 'a' : 'div';
-        return (jsx(Tag, { className: style('block', className), ...(href ? linkProps : {}), children: children }));
-    });
-
     const COOKIE_DIALOG_ID = 'cookie';
     const LOCAL_STORAGE_NAME = 'cookieClose';
     const CookiePopup = JSX(({ termLink, personalDataPolicyLink }) => {
@@ -2053,7 +2061,7 @@
         return (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: i }, el) : [el]), []);
     }
 
-    const packageVersion = "0.10.7";
+    const packageVersion = "0.10.8";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;