@redneckz/wildless-cms-uni-blocks 0.13.23 → 0.13.24

package/mobile/bundle/bundle.umd.js

@@ -614,7 +614,7 @@
         primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
         secondary: 'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active',
         white: 'text-primary-main bg-white hover:text-white hover:bg-primary-hover active:bg-white active:text-primary-main',
-        link: '',
+        link: 'text-primary-main',
         transparent: '',
         gray: 'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active',
         '': '',
@@ -634,7 +634,7 @@
         primary: 'group-hover/btn:brightness-0 group-hover/btn:invert',
         secondary: 'group-hover/btn:brightness-0 group-hover/btn:invert',
         white: 'group-hover/btn:brightness-0 group-hover/btn:invert',
-        link: '',
+        link: 'text-primary-main',
         transparent: '',
         gray: 'group-hover/btn:brightness-0 group-hover/btn:invert',
         '': '',
@@ -1335,12 +1335,19 @@
     const renderButtonsSection = (buttons, { className, buttonClassName, isVertical } = {}) => buttons?.length && buttons.some((_) => _?.text || _?.icon?.icon) ? (jsx("div", { className: style('flex', isVertical ? 'flex-col gap-xs justify-items-stretch' : 'flex-wrap gap-m', className), children: buttons.map(renderButton$1(buttonClassName)) })) : null;
     const renderButton$1 = (buttonClassName = '') => (button, index) => {
         const { text, icon, iconRight, version, ...rest } = button || {};
-        const iconVersionDefault = version === 'secondary' ? 'color' : 'white';
-        const iconVersion = icon?.iconVersion ? icon?.iconVersion : iconVersionDefault;
-        return text || icon?.icon ? (jsx(Button, { className: style('basis-full sm:basis-auto', buttonClassName), appendLeft: renderButtonIcon({ ...icon, iconVersion }), appendRight: renderButtonIcon({ ...iconRight, iconVersion }), version: version, text: text, ...rest }, index ? String(index) : '')) : null;
+        const iconVersion = getIconVersion(icon, version);
+        const iconRightVersion = getIconVersion(iconRight, version);
+        return text || icon?.icon ? (jsx(Button, { className: style('basis-full sm:basis-auto', buttonClassName), appendLeft: renderButtonIcon({ ...icon, iconVersion }), appendRight: renderButtonIcon({ ...iconRight, iconVersion: iconRightVersion }), version: version, text: text, ...rest }, index ? String(index) : '')) : null;
     };
     const DEFAULT_ICON_W = 24;
-    const renderButtonIcon = (icon) => icon?.icon || icon?.src ? (jsx(Img, { image: icon, width: String(icon?.size?.width || DEFAULT_ICON_W), height: String(DEFAULT_ICON_W) })) : null;
+    const getIconVersion = (icon, version = 'secondary') => {
+        const iconVersionDefault = version === 'secondary' ? 'color' : 'white';
+        return icon?.iconVersion ? icon?.iconVersion : iconVersionDefault;
+    };
+    const renderButtonIcon = (icon) => {
+        console.log(icon);
+        return icon?.icon || icon?.src ? (jsx(Img, { image: icon, width: String(icon?.size?.width || DEFAULT_ICON_W), height: String(DEFAULT_ICON_W) })) : null;
+    };
 
     const headlineVersionStyles = {
         XXL: {
@@ -2240,7 +2247,6 @@
             paramsViewSettings,
         });
         const { minSum, maxSum } = getLimitRangeByKeys(['minSum', 'maxSum'], sourceBookLimitParams, rateRows);
-        const { minSumOld, maxSumOld } = getLimitRangeByKeys(['minSumOld', 'maxSumOld'], sourceBookLimitParams, rateRows);
         const { minMonths, maxMonths } = getLimitRangeByKeys(['minMonths', 'maxMonths'], sourceBookLimitParams, rateRows);
         const refinancingCalculatorSourceBookRateParams = getRefinancingCalculatorRateParams({
             rateRows,
@@ -2259,8 +2265,6 @@
             ...userInputParams,
             minSum,
             maxSum,
-            minSumOld,
-            maxSumOld,
             minMonths,
             maxMonths,
             moneyValue,
@@ -2348,7 +2352,7 @@
         return tabs.map((tab, index) => (jsx(Foldable, { isFoldButtonOnTop: true, unfoldedByDefault: index === 0, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { isUnfolded: isUnfolded, children: jsx(BlockWrapper, { children: renderCalculator(tab) }) })), renderFoldButton: renderFoldButton$2(tab) }, index.toString())));
     };
     const renderFoldButton$2 = (tab) => ({ isUnfolded, onToggle }) => {
-        return (jsxs("button", { onClick: onToggle, className: "w-full p-xl bg-green flex items-center border-b border-white", children: [jsx("div", { className: "w-11 h-11 bg-white rounded-md flex justify-center items-center", children: jsx(Icon, { name: tab.nav?.icon?.icon, iconVersion: "color", width: "24", height: "24" }) }), jsxs("div", { className: "flex-1 flex flex-col pl-s", children: [jsx(Text, { align: "text-left", color: "text-white", children: tab.nav?.title }), jsx(Text, { align: "text-left", size: "text-s", color: "text-white", font: "font-light", children: tab.nav?.description })] }), jsx(Icon, { name: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', iconVersion: "white", width: "24", height: "24" })] }));
+        return (jsxs("button", { onClick: onToggle, className: "w-full p-xl bg-primary-main flex items-center border-b border-white", children: [jsx("div", { className: "w-11 h-11 bg-white rounded-md flex justify-center items-center", children: jsx(Icon, { name: tab.nav?.icon?.icon, iconVersion: "color", width: "24", height: "24" }) }), jsxs("div", { className: "flex-1 flex flex-col pl-s", children: [jsx(Text, { align: "text-left", color: "text-white", children: tab.nav?.title }), jsx(Text, { align: "text-left", size: "text-s", color: "text-white", font: "font-light", children: tab.nav?.description })] }), jsx(Icon, { name: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', iconVersion: "white", width: "24", height: "24" })] }));
     };
 
     const NumberInput = JSX((props) => {
@@ -2525,7 +2529,9 @@
         'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider');
     const isCardHighlighted = (_) => _?.content && 'isHighlighting' in _.content && _.content.isHighlighting;
 
-    const Carousel = JSX(({ className, itemCount, visibleItemCount = 0, noCardBorder, isAlignCenter, arrowsPadded = true, isGap = true, cardSize = 'normal', ...rest }) => {
+    const VISIBLE_ITEM_COUNT = 0;
+
+    const Carousel = JSX(({ className, itemCount, visibleItemCount = VISIBLE_ITEM_COUNT, noCardBorder, isAlignCenter, arrowsPadded = true, isGap = true, cardSize = 'normal', ...rest }) => {
         const { blocks: childBlocks = [] } = rest.block || {};
         const count = itemCount || childBlocks?.length;
         const [activeIndex, { inc: increaseActiveIndex, dec: decreaseActiveIndex }] = useCarouselControls({
@@ -2644,8 +2650,8 @@
         center: '@lg:self-center',
         end: '@lg:self-end',
     };
-    const BaseTile = JSX(({ className, defaultPadding, padding, title = '', insetTitle = '', buttons, leftImage, rightImage, imageAlign, backImage, children, }) => (jsxs("div", { className: style('relative flex flex-col gap-3xl font-sans overflow-hidden', padding || defaultPadding, className), children: [title ? jsx("div", { className: "relative", children: title }) : null, jsxs("div", { className: "grow relative flex flex-col @lg:flex-row justify-around @lg:justify-between items-stretch gap-3xl", children: [renderImageContainer(leftImage, { imageAlign }), jsxs("div", { className: style('flex flex-col gap-3xl max-w-[600px] @xl:max-w-[728px]', leftImage ? '' : 'grow'), children: [insetTitle, jsx("div", { className: "grow", children: children }), backImage ? (jsx("div", { className: "justify-center mx-auto sm:absolute sm:-z-10 sm:-bottom-4 sm:-right-4", children: backImage })) : null, buttons] }), renderImageContainer(rightImage, {
-                        className: '-order-1 @xl:order-1',
+    const BaseTile = JSX(({ className, defaultPadding, padding, title = '', insetTitle = '', buttons, leftImage, rightImage, imageAlign, backImage, isImageAlwaysOnRight = false, children, }) => (jsxs("div", { className: style('relative flex flex-col gap-3xl font-sans overflow-hidden', padding || defaultPadding, className), children: [title ? jsx("div", { className: "relative", children: title }) : null, jsxs("div", { className: style('grow relative flex justify-around @lg:justify-between items-stretch gap-3xl', isImageAlwaysOnRight ? 'flex-row' : 'flex-col @lg:flex-row'), children: [renderImageContainer(leftImage, { imageAlign }), jsxs("div", { className: style('flex flex-col gap-3xl max-w-[600px] @xl:max-w-[728px]', leftImage ? '' : 'grow'), children: [insetTitle, jsx("div", { className: "grow", children: children }), backImage ? (jsx("div", { className: "justify-center mx-auto sm:absolute sm:-z-10 sm:-bottom-4 sm:-right-4", children: backImage })) : null, buttons] }), renderImageContainer(rightImage, {
+                        className: isImageAlwaysOnRight ? '' : '-order-1 @xl:order-1',
                         imageAlign,
                     })] })] })));
     const renderImageContainer = (image, { className, imageAlign }) => image ? (jsx("div", { className: style('md:flex-shrink-0 self-center', imageAlign && imageAlignmentMap[imageAlign], className), children: image })) : null;
@@ -2660,9 +2666,11 @@
             ? 'bg-secondary-light text-primary-main'
             : 'bg-primary-main text-black group-data-secondary:bg-white/30 group-data-secondary:text-black'), children: jsx(Img, { className: "w-6 h-6", image: { ...icon, iconVersion: icon.iconVersion || benefitsVersion } }) })) : null;
 
+    const getHtmlText = (html) => html.replace(/<\/?[^>]+\/?>/g, '').trim();
+
     const RichText = JSX((props) => {
         const { __html = '', richVersion = '' } = props;
-        return (jsx("div", { className: style(richVersion, 'md-container'), dangerouslySetInnerHTML: { __html } }));
+        return getHtmlText(__html) ? (jsx("div", { className: style(richVersion, 'md-container'), dangerouslySetInnerHTML: { __html } })) : null;
     });
 
     const renderBenefitDescription = (description, i) => description ? (jsx(Paragraph, { font: "font-light", size: "text-m", color: "text-secondary-text group-data-secondary:text-white", children: description }, `description-${i}`)) : null;
@@ -2692,11 +2700,11 @@
     const Tags = JSX(({ className, tags }) => tags?.length ? (jsx("div", { className: style('flex flex-wrap gap-xs', className), role: "list", children: tags.map(renderTag) })) : null);
     const renderTag = (tag, key) => (jsx("div", { className: "p-xs border-solid border rounded-md border-gray", role: "listitem", children: jsx(Text, { size: "text-m", font: "font-light", children: tag }) }, String(key)));
 
-    const BaseProductTile = JSX(({ className, padding, defaultPadding, title, description, headlineVersion = 'L', align = 'text-left', benefitsVersion, isTabularBenefits, benefits, __html, isFullWidthTitle = true, items, isDotted = true, listItemSize, tags = [], buttons, image, imageOptions: { imageAlign = 'end', directionRight = true, isBackground } = {}, children, }) => {
+    const BaseProductTile = JSX(({ className, padding, defaultPadding, title, description, headlineVersion = 'L', align = 'text-left', benefitsVersion, isTabularBenefits, benefits, __html, isFullWidthTitle = true, items, isDotted = true, listItemSize, tags = [], buttons, image, imageOptions: { imageAlign = 'end', directionRight = true, isBackground, isImageAlwaysOnRight, } = {}, children, }) => {
         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((_) => _?.type === 'rte' || 'label' in _ || 'description' in _);
-        return (jsx(BaseTile, { className: className, padding: padding, defaultPadding: defaultPadding, ...(isFullWidthTitle ? { insetTitle: headline } : { title: headline }), ...(isBackground ? { backImage: img } : leftOrRightImage(img, directionRight)), imageAlign: imageAlign, buttons: renderButtonsSection(buttons), children: jsxs("div", { className: "flex flex-col gap-xl", children: [filteredBenefits?.length ? (jsx(BenefitsList, { benefitsVersion: benefitsVersion, isTabularBenefits: isTabularBenefits, benefits: filteredBenefits })) : null, __html ? jsx(RichText, { __html: __html }) : null, items?.length ? (jsx(List, { items: items, isDotted: isDotted, listItemSize: listItemSize })) : null, children, renderTags(tags)] }) }));
+        return (jsx(BaseTile, { className: className, padding: padding, defaultPadding: defaultPadding, ...(isFullWidthTitle ? { insetTitle: headline } : { title: headline }), ...(isBackground ? { backImage: img } : leftOrRightImage(img, directionRight)), imageAlign: imageAlign, isImageAlwaysOnRight: isImageAlwaysOnRight, buttons: renderButtonsSection(buttons), children: jsxs("div", { className: "flex flex-col gap-xl", children: [filteredBenefits?.length ? (jsx(BenefitsList, { benefitsVersion: benefitsVersion, isTabularBenefits: isTabularBenefits, benefits: filteredBenefits })) : null, __html ? jsx(RichText, { __html: __html }) : null, items?.length ? (jsx(List, { items: items, isDotted: isDotted, listItemSize: listItemSize })) : null, children, renderTags(tags)] }) }));
     });
     const leftOrRightImage = (img, directionRight) => directionRight ? { rightImage: img } : { leftImage: img };
     const renderTags = (tags) => (tags?.length ? jsx(Tags, { tags: tags }) : null);
@@ -2707,15 +2715,11 @@
                     description: _.description,
                 })) }) }) })));
 
-    const buttonSizeStyles = {
+    const buttonSizeStyle = {
         default: 'w-14 h-14',
         stretched: 'flex-1 h-14',
     };
 
-    const buttonStylesWithText = (text, buttonSize) => text
-        ? ''
-        : style('py-m group/media flex items-center justify-center box-border', buttonSizeStyles[buttonSize]);
-
     const ICONS_MAP = [
         {
             origins: ['t.me', 'telegram.org'],
@@ -2756,11 +2760,12 @@
 
     const findIconByHref = (href) => ICONS_MAP.find(({ origins }) => origins?.some((_) => href?.includes(_))) || {};
 
-    const MediaButton = JSX(({ buttonSize = 'default', rounded = false, icon, ...rest }) => {
-        const { href, version, text = '' } = rest;
+    //TODO: Refactor this.
+    const MediaButton = JSX(({ buttonSize = 'default', icon, ...rest }) => {
+        const { href } = rest;
         const { iconMapped, label } = findIconByHref(href);
         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 }));
+        return (jsx(Button, { className: style('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', 'py-m group/media flex items-center justify-center box-border', buttonSizeStyle[buttonSize]), "aria-label": label, rel: "noopener noreferrer", target: "_blank", ...rest, children: jsx(Img, { image: iconCustom, imageClassName: "group-hover/media:text-white", width: "24", height: "24" }) }));
     });
     const getFilteredIcon = (icon) => (icon?.src || icon?.icon ? icon : undefined);
 
@@ -3137,7 +3142,7 @@
         transparent: 'text-white',
     };
     const Logo = JSX(({ className, href = '/', logo, children, targetBlank, bgColor = 'bg-white', showTitle = true, }) => (jsxs("a", { className: style('inline-flex items-center font-sans no-underline', className), href: href, target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title || 'Россельхозбанк', children: [renderImage$1(bgColor, logo?.image, ICON_SIZE), showTitle
-                ? children ?? (jsx("div", { className: "ml-s", children: jsx(Text, { font: "font-medium", color: TEXT_COLOR[bgColor], size: logoTitleSizeStyle, children: logo?.title }) }))
+                ? children ?? (jsx("div", { className: "ml-s", children: jsx(Text, { font: "font-medium", color: TEXT_COLOR[bgColor], size: logoTitleSizeStyle, children: logo?.title || 'Россельхозбанк' }) }))
                 : null] })));
 
     const BUTTON_STYLE = {
@@ -3282,7 +3287,7 @@
         const iconVersion = version === 'primary' ? 'white' : 'black';
         const className = 'w-12 h-12 min-h-12 min-w-12 flex items-center justify-center';
         const text = 'Вернуться назад';
-        return (jsxs("div", { className: "flex items-center gap-s", children: [jsx("div", { className: getRegularButtonClasses({ className, version, rounded: true }), onClick: handleClick, children: jsx(Img, { className: "w-4 h-4", image: {
+        return (jsxs("div", { className: "hidden sm:flex items-center gap-s", children: [jsx("div", { className: getRegularButtonClasses({ className, version, rounded: true }), onClick: handleClick, children: jsx(Img, { className: "w-4 h-4", image: {
                             icon: 'ArrowLeftIcon',
                             iconVersion: iconVersion,
                         } }) }), jsx(Button, { version: "link", text: text, ariaLabel: text, onClick: handleClick })] }));
@@ -3305,10 +3310,19 @@
 
     const ProductTile = JSX(({ className, padding, headlineVersion = 'S', isTabularBenefits = true, additionalDescription, imageOptions, ...rest }) => (jsx(BlockWrapper, { className: className, padding: "p-0", ...rest, children: jsx(BaseProductTile, { className: "h-full", defaultPadding: "p-xl", padding: padding, headlineVersion: headlineVersion, isTabularBenefits: isTabularBenefits, imageOptions: { isBackground: true, ...imageOptions }, ...rest, children: additionalDescription ? (jsx(Paragraph, { size: "text-m", font: "font-light", color: "group-data-primary:text-secondary-text", children: additionalDescription })) : null }) })));
 
-    const RepresentativeOfficeInfo = JSX(({ address, email, telephone, button, className = '', __html, icon, title, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: style('box-border text-left space-y-s', className), version: version, ...rest, children: [jsxs("div", { className: "w-full flex justify-between flex-row-reverse", children: [renderIconBlock(icon), title ? jsx(Heading, { headingType: "h4", as: "h3", title: title }) : null] }), jsxs("div", { className: "w-full space-y-m", children: [__html ? renderDescriptionBlock(__html) : null, renderBlock('Адрес', address, 'GeolocationIcon'), renderBlock('Телефон', telephone, 'PhoneIcon'), renderBlock('E-mail', email, 'MailIcon'), button?.text ? renderButtonsSection([button]) : null] })] })));
+    const RepresentativeOfficeInfo = JSX(({ address, email, telephone, button, className = '', __html, icon, title, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: style('box-border text-left space-y-s', className), version: version, ...rest, children: [jsxs("div", { className: "w-full flex justify-between flex-row-reverse", children: [renderIconBlock(icon), title ? jsx(Heading, { headingType: "h3", as: "h3", title: title }) : null] }), jsxs("div", { className: "w-full space-y-m", children: [__html ? renderDescriptionBlock(__html) : null, renderBlock({
+                        label: 'Адрес',
+                        data: address,
+                        iconName: 'GeolocationIcon',
+                    }), renderBlock({ label: 'Телефон(факс)', data: telephone, iconName: 'PhoneIcon' }), renderBlock({
+                        label: 'E-mail',
+                        data: email,
+                        iconName: 'MailIcon',
+                        dataColor: 'text-primary-main',
+                    }), button?.text ? renderButtonsSection([button]) : null] })] })));
     const renderIconBlock = (icon) => (jsx("div", { className: 'w-10 h-7 sm:w-24 sm:h-16', children: icon?.src || icon?.icon ? jsx(Img, { image: icon }) : null }));
-    const renderDescriptionBlock = (__html) => (jsx("div", { className: "border-b border-main-divider", children: jsx(RichText, { __html: __html }) }));
-    const renderBlock = (blockName, data, iconName) => (jsxs("div", { className: "flex gap-m", children: [jsx(Icon, { iconVersion: "black", name: iconName, width: "24", height: "24" }), jsxs("div", { className: "flex flex-col", children: [jsx(Text, { size: "text-m", font: "font-light", children: blockName }), data ? (jsx(Text, { size: "text-h6", color: "text-green", children: data })) : null] })] }));
+    const renderDescriptionBlock = (__html) => (jsx("div", { className: "border-b border-main-divider pb-lg", children: jsx(RichText, { __html: __html }) }));
+    const renderBlock = ({ label, data, iconName, dataColor = '' }) => data ? (jsxs("div", { className: "flex gap-s", children: [jsx(Icon, { iconVersion: "black", name: iconName, width: "24", height: "24" }), jsxs("div", { className: "flex flex-col gap-2xs", children: [jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text", children: label }), jsx(Text, { size: "text-xl", color: dataColor, children: data })] })] })) : null;
 
     const RichTextBlock = JSX((props) => {
         const { __html, richVersion, ...rest } = props;
@@ -3745,7 +3759,7 @@
         const isImg = Boolean(step?.icon?.src);
         const iconAreaSize = STEPS_SIZE_MAP[size][isImg ? 'image' : 'icon'];
         const containerStyle = isImg ? '' : `rounded-md ${styleMap.iconBackground}`;
-        return (jsx("div", { className: style(iconAreaSize, containerStyle, 'z-10 mr-s flex justify-center content-center'), children: jsx("span", { className: "flex self-center text-h4 text-secondary-text group-data-secondary:text-white", children: checkCanRenderIcon(step?.icon) ? (jsx(Img, { image: { ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }, width: iconSize, height: iconSize })) : (jsx("span", { children: i + 1 })) }) }));
+        return (jsx("div", { className: style(iconAreaSize, containerStyle, 'z-10 mr-s flex justify-center content-center'), children: jsx("span", { className: "flex max-w-full max-h-full self-center text-h4 text-secondary-text group-data-secondary:text-white", children: checkCanRenderIcon(step?.icon) ? (jsx(Img, { image: { ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }, imageClassName: "max-w-full max-h-full", width: iconSize, height: iconSize })) : (jsx("span", { children: i + 1 })) }) }));
     };
 
     const isHrefActive = (router) => ({ href }) => !href
@@ -4718,7 +4732,7 @@
 
     const joinList = (sep) => (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: `sep-${i}` }, el) : [el]), []);
 
-    const packageVersion = "0.13.23";
+    const packageVersion = "0.13.24";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;