@redneckz/wildless-cms-uni-blocks 0.14.430 → 0.14.432

package/bundle/bundle.umd.js

@@ -2492,9 +2492,9 @@
     const CalculatorLayout = JSX(({ className, title, children, ...rest }) => (jsxs(BlockWrapper, { className: style('space-y-xl', className), defaultPadding: "p-4xl", ...rest, children: [title ? jsx(Heading, { className: "text-center", title: title }) : null, children] })));
 
     const CalculatorStyle = {
-        wrapper: 'flex flex-col justify-between @4xl:flex-row gap-x-m gap-y-7 @xl:gap-y-4xl',
-        input: 'flex flex-col @xl:max-w-md gap-2xl border-b border-b-main-divider @xl:border-none pb-3xl @xl:pb-0',
-        result: 'flex flex-col gap-y-xl @xl:w-96',
+        wrapper: 'flex flex-col justify-between @4xl:flex-row gap-x-s gap-y-7 @xl:gap-y-4xl',
+        input: 'flex flex-col lg:max-w-80 gap-2xl border-b border-b-main-divider @xl:border-none pb-3xl @xl:pb-0',
+        result: 'flex flex-col gap-y-xl',
     };
 
     const calculatorValueBlockStyle = 'flex justify-between @xl:flex-col';
@@ -2508,7 +2508,7 @@
 
     const UnknownRate = JSX(({ title = 'Ставка', isUnavailableByTerm = false }) => (jsxs("div", { className: "space-y-s", children: [jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: title }), jsx(Icon, { className: "w-10 h-10 @5xl:h-auto @5xl:w-40", name: "PercentIcon" }), jsx("div", { className: "w-64", children: isUnavailableByTerm ? (jsxs(Paragraph, { size: "text-xl", font: "font-light", color: "text-primary-text", children: ["\u041F\u0440\u043E\u0446\u0435\u043D\u0442\u043D\u0430\u044F \u0441\u0442\u0430\u0432\u043A\u0430 \u0434\u043B\u044F \u0441\u0440\u043E\u043A\u0430 ", jsx("strong", { children: "1-30 \u0434\u043D\u0435\u0439" }), " \u0443\u0441\u0442\u0430\u043D\u0430\u0432\u043B\u0438\u0432\u0430\u0435\u0442\u0441\u044F \u043F\u0440\u0438 \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0438 \u0432 \u0411\u0430\u043D\u043A"] })) : (jsx(Paragraph, { size: "text-xl", font: "font-light", color: "text-primary-text", children: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0434\u0440\u0443\u0433\u0443\u044E \u0441\u0443\u043C\u043C\u0443 \u0438\u043B\u0438 \u0441\u0440\u043E\u043A" })) })] })));
 
-    const renderRate = ({ title = 'Ставка', rate = 0, unit = '%', fractionDigits = 2, isUnknownRateShown = true, color = 'text-secondary-text', ...rest }) => isUnknownRateShown && rate === 0 ? (jsx(UnknownRate, { title: title, ...rest })) : (jsxs("div", { children: [jsx("div", { className: "hidden @xl:block", children: jsx(Rate, { title: title, rate: rate, unit: unit, fractionDigits: fractionDigits, color: color, ...rest }) }), jsx("div", { className: "@xl:hidden", children: jsx(CalculatorValueBlock, { title: title, value: rate, postfix: unit, fractionDigits: fractionDigits, fixed: true, color: color, ...rest }) })] }));
+    const renderRate = ({ title = 'Ставка', rate = 0, unit = '%', fractionDigits = 2, isUnknownRateShown = true, color = 'text-secondary-text', children, ...rest }) => isUnknownRateShown && rate === 0 ? (jsx(UnknownRate, { title: title, ...rest })) : (jsxs("div", { children: [jsx("div", { className: "hidden @xl:block min-w-96", children: jsx(Rate, { title: title, rate: rate, unit: unit, fractionDigits: fractionDigits, color: color, ...rest }) }), jsx("div", { className: "@xl:hidden", children: jsx(CalculatorValueBlock, { title: title, value: rate, postfix: unit, fractionDigits: fractionDigits, fixed: true, color: color, ...rest }) }), children] }));
 
     const DEFAULT_MONEY_STEP = 1000;
     function renderWantedSumInput({ isShowItems = true, step = DEFAULT_MONEY_STEP, ...rest }) {
@@ -2621,7 +2621,7 @@
     };
     const RadioButtonGroup = JSX(({ items, checkedItem, className, onChange: onChangeCheckedItem, orientation = 'horizontal', }) => (jsx("div", { className: style(`flex ${orientationStyleMap[orientation]}`, className), role: "radiogroup", children: items?.map(({ id, text }) => (jsx(Checkbox, { isRadio: true, text: text, value: checkedItem === id, onChange: () => onChangeCheckedItem && onChangeCheckedItem(id) }, String(id)))) })));
 
-    const renderBinaryRadioButtonGroup = ({ items, title, mobileTitle = title, orientation = 'horizontal', value, radioGroupClassName, onChange, }) => (jsxs("div", { className: "space-y-s", children: [title ? (jsx("div", { className: "hidden @5xl:block", children: jsx(Text, { color: "text-secondary-text", font: "font-light", children: title }) })) : null, mobileTitle ? (jsx("div", { className: "@5xl:hidden", children: jsx(Text, { color: "text-secondary-text", font: "font-light", children: mobileTitle }) })) : null, jsx(RadioButtonGroup, { orientation: orientation, items: items, checkedItem: items[value ? 0 : 1].id, className: style('flex-col sm:flex-row', radioGroupClassName), onChange: (_) => onChange && onChange(_ === items[0].id) })] }));
+    const renderBinaryRadioButtonGroup = ({ items, title, mobileTitle = title, orientation = 'horizontal', value, radioGroupClassName, onChange, }) => (jsxs("div", { className: "grid gap-s whitespace-nowrap", children: [title ? (jsx("div", { className: "hidden @5xl:block", children: jsx(Text, { color: "text-secondary-text", font: "font-light", children: title }) })) : null, mobileTitle ? (jsx("div", { className: "@5xl:hidden", children: jsx(Text, { color: "text-secondary-text", font: "font-light", children: mobileTitle }) })) : null, jsx(RadioButtonGroup, { orientation: orientation, items: items, checkedItem: items[value ? 0 : 1].id, className: radioGroupClassName, onChange: (_) => onChange && onChange(_ === items[0].id) })] }));
 
     const renderPayout = (props) => renderBinaryRadioButtonGroup({
         ...props,
@@ -2631,7 +2631,7 @@
         ],
     });
 
-    const renderDepositResult = ({ income, finalSum, buttons, footnotes = [], }) => (jsxs("div", { className: CalculatorStyle.result, children: [jsx(CalculatorValueBlock, { title: "\u0414\u043E\u0445\u043E\u0434 \u0432 \u043A\u043E\u043D\u0446\u0435 \u0441\u0440\u043E\u043A\u0430", value: income, postfix: "\u20BD", prefix: "+" }), jsx(CalculatorValueBlock, { title: "\u0421\u0443\u043C\u043C\u0430 \u0432 \u043A\u043E\u043D\u0446\u0435 \u0441\u0440\u043E\u043A\u0430", value: finalSum, postfix: "\u20BD" }), renderButtonsSection(buttons, { isVertical: true }), footnotes?.map(renderFootnote)] }));
+    const renderDepositResult = ({ income, finalSum, buttons = [], footnotes = [], }) => (jsxs("div", { className: CalculatorStyle.result, children: [jsx(CalculatorValueBlock, { title: "\u0414\u043E\u0445\u043E\u0434 \u0432 \u043A\u043E\u043D\u0446\u0435 \u0441\u0440\u043E\u043A\u0430", value: income, postfix: "\u20BD", prefix: "+" }), jsx(CalculatorValueBlock, { title: "\u0421\u0443\u043C\u043C\u0430 \u0432 \u043A\u043E\u043D\u0446\u0435 \u0441\u0440\u043E\u043A\u0430", value: finalSum, postfix: "\u20BD" }), renderButtonsSection(buttons, { isVertical: true }), footnotes?.map(renderFootnote)] }));
 
     const getLimitRangeByKeys = ([minKey, maxKey], limitParams, rateRows = []) => limitParams && limitParams[minKey] && limitParams[maxKey]
         ? {
@@ -3012,6 +3012,9 @@
         rate: 0,
         isMonthlyInterestPayment: true,
         isRemoteRegistration: true,
+        isReplenish: false,
+        isWithdrawn: false,
+        type: '',
     };
     const getDepositCalculatorParams = (userInputParams, calcSource, paramsViewSettings) => {
         const { moneyValue, monthsValue } = userInputParams;
@@ -3020,12 +3023,26 @@
             : 0;
         const isExcludeMonthlyInterestPayment = !paramsViewSettings?.isShowMonthlyInterestPayment;
         const isExcludeRemoteRegistration = !paramsViewSettings?.isShowRemoteRegistration;
+        const isExcludeReplenish = !paramsViewSettings?.isShowReplenish;
+        const isExcludeWithdrawn = !paramsViewSettings?.isShowWithdrawn;
         const depositCalculatorSourceBookParams = calcSource?.rateRows?.find((row) => checkRowByParam({
             row,
             userInputParams,
-            paramKey: 'isMonthlyInterestPayment',
-            isExclude: isExcludeMonthlyInterestPayment,
+            paramKey: 'isReplenish',
+            isExclude: isExcludeReplenish,
         }) &&
+            checkRowByParam({
+                row,
+                userInputParams,
+                paramKey: 'isWithdrawn',
+                isExclude: isExcludeWithdrawn,
+            }) &&
+            checkRowByParam({
+                row,
+                userInputParams,
+                paramKey: 'isMonthlyInterestPayment',
+                isExclude: isExcludeMonthlyInterestPayment,
+            }) &&
             checkRowByParam({
                 row,
                 userInputParams,
@@ -3072,22 +3089,64 @@
         ],
     });
 
+    const renderDepositParamsForm = (params, field) => (jsxs("div", { className: "grid gap-lg", children: [jsxs("div", { className: "flex gap-lg", children: [params.isShowReplenish
+                        ? renderBinaryRadioButtonGroup({
+                            title: 'Пополнение',
+                            ...field('isReplenish'),
+                            value: params.isReplenish,
+                            orientation: 'vertical',
+                            items: [
+                                { id: 'withReplenish', text: 'С пополнением' },
+                                { id: 'withoutReplenish', text: 'Без пополнения' },
+                            ],
+                        })
+                        : null, params.isShowWithdrawn
+                        ? renderBinaryRadioButtonGroup({
+                            title: 'Снятие',
+                            ...field('isWithdrawn'),
+                            value: params.isWithdrawn,
+                            orientation: 'vertical',
+                            items: [
+                                { id: 'wthDrawn', text: 'Со снятием' },
+                                { id: 'noWithdrawn', text: 'Без снятия' },
+                            ],
+                        })
+                        : null] }), jsx("div", { className: "border-b border-main-divider w-full" }), jsxs("div", { className: "flex gap-lg", children: [params.isShowMonthlyInterestPayment
+                        ? renderPayout({
+                            title: 'Выплата процентов',
+                            ...field('isMonthlyInterestPayment'),
+                            value: params.isMonthlyInterestPayment,
+                            orientation: 'vertical',
+                        })
+                        : null, params.isShowRemoteRegistration
+                        ? renderRegistrationType({
+                            title: 'Оформление',
+                            ...field('isRemoteRegistration'),
+                            value: params.isRemoteRegistration,
+                            orientation: 'vertical',
+                        })
+                        : null] })] }));
+
     const MAP = {
         isMonthlyInterestPayment: 'isMonthlyInterestPayment',
         isRemoteRegistration: 'isRemoteRegistration',
+        isReplenish: 'isReplenish',
+        isWithdrawn: 'isWithdrawn',
         moneyValue: 'minSum',
     };
     const DEPOSIT_DEFAULT_SUM = 20000;
-    const CalculatorDeposit = UniBlock(({ className, title, calcSource, buttons, footnote, paramsViewSettings, defaultParams, ...rest }) => {
+    const CalculatorDeposit = UniBlock(({ className, title, calcSource, buttons = [], footnote = '', paramsViewSettings, defaultParams, ...rest }) => {
         const defParams = getDefaultParamsMax(calcSource?.rateRows);
         const [userInputParams, { field }] = useForm({
             moneyValue: getMoneyDefaultValue(defaultParams, DEPOSIT_DEFAULT_SUM),
             monthsValue: getMonthsDefaultValue(defaultParams),
             isMonthlyInterestPayment: Boolean(defaultParams?.isMonthlyInterestPayment),
             isRemoteRegistration: Boolean(defaultParams?.isRemoteRegistration),
+            isReplenish: false,
+            isWithdrawn: Boolean(defaultParams?.isWithdrawn ?? false),
         });
         const calcParams = getDepositCalculatorParams(userInputParams, calcSource, paramsViewSettings);
-        const { defaultMonth, rate, income, finalSum } = calcParams;
+        const { defaultMonth, rate, income, finalSum, type = '' } = calcParams;
         const { onChange: setMonthsValue } = field('monthsValue');
         const { onChange: setMoneyValue } = field('moneyValue');
         useEffect(() => {
@@ -3097,17 +3156,19 @@
             setMoneyValue &&
                 setMoneyValue(clamp(userInputParams.moneyValue, calcParams.minSum, calcParams.maxSum));
         }, [calcParams.minSum, calcParams.maxSum]);
+        const handleDefaultParamsCals = () => setDefaultParamsCalc({
+            field,
+            defParams: defParams,
+            calcParams,
+            monthsValue: 'minMonths',
+            map: MAP,
+        });
         useEffect(() => {
             if (!isDefaultParams(defaultParams) && defParams) {
-                setDefaultParamsCalc({
-                    field,
-                    defParams: defParams,
-                    calcParams,
-                    monthsValue: 'minMonths',
-                    map: MAP,
-                });
+                handleDefaultParamsCals();
             }
         }, [calcSource, defaultParams]);
+        const isMaxRate = rate === defParams?.rate;
         return (jsx(CalculatorLayout, { className: className, title: title, ...rest, children: jsxs("section", { className: style(CalculatorStyle.wrapper, className), children: [jsxs("div", { className: CalculatorStyle.input, children: [renderWantedSumInput({
                                 title: 'Сумма, ₽',
                                 min: calcParams.minSum,
@@ -3123,21 +3184,20 @@
                                 value: calcParams.monthsValue,
                             }), renderDepositParamsForm({ ...calcParams, ...paramsViewSettings }, field)] }), renderRate({
                         rate,
-                    }), renderDepositResult({ income, finalSum, buttons, footnotes: [footnote] })] }) }));
-    });
-    const renderDepositParamsForm = (params, field) => (jsxs("div", { className: "flex flex-col gap-y-2xl", children: [params.isShowMonthlyInterestPayment
-                ? renderPayout({
-                    title: 'Выплата процентов',
-                    ...field('isMonthlyInterestPayment'),
-                    value: params.isMonthlyInterestPayment,
-                })
-                : null, params.isShowRemoteRegistration
-                ? renderRegistrationType({
-                    title: 'Оформление',
-                    ...field('isRemoteRegistration'),
-                    value: params.isRemoteRegistration,
-                })
-                : null] }));
+                        children: renderMaxRateButton(handleDefaultParamsCals, isMaxRate),
+                    }), renderDepositResult({
+                        income,
+                        finalSum,
+                        buttons: [...buttons, getTariffButton(calcSource?.buttons, type)],
+                        footnotes: [footnote],
+                    })] }) }));
+    });
+    const getTariffButton = (buttons = [], btnType = '') => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { type, ...button } = buttons.find((_) => _.type === btnType) ?? {};
+        return button;
+    };
+    const renderMaxRateButton = (handleDefaultParamsCals, isMaxRate = false) => isMaxRate ? null : (jsx(Button, { type: "button", version: "secondary", onClick: handleDefaultParamsCals, children: "\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u043C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0443\u044E \u0441\u0442\u0430\u0432\u043A\u0443" }));
 
     const checkRefinancingSourceBookRowCommonParams = (props) => checkRowParam({
         ...props,
@@ -4320,9 +4380,31 @@
     const DropdownMenu = JSX(({ className = '', items, activeItem, ariaLabel }) => {
         const [isVisible, { setFalse, toggle }] = useBool(false);
         const ref = useOutsideClick(setFalse);
-        return (jsxs("div", { className: style(isVisible ? 'bg-white rounded-md shadow-blue-gray' : '', className), ref: ref, role: "navigation", children: [jsx("button", { type: "button", className: "group/btn flex justify-between items-center h-6", "aria-label": ariaLabel, onClick: toggle, children: Array(3)
+        const dropdownRef = useRef(null);
+        const changeDropdownPosition = useCallback((isOpened, buttonRef, menuRef) => {
+            if (isOpened) {
+                const dropdownRect = menuRef?.current?.getBoundingClientRect();
+                const dropdownButtonRect = buttonRef?.current?.getBoundingClientRect();
+                if (menuRef.current && dropdownRect && dropdownButtonRect) {
+                    if (dropdownRect?.right >= globalThis.innerWidth) {
+                        menuRef.current.style.left = `${globalThis.innerWidth - dropdownRect.width}px`;
+                    }
+                    else if (dropdownButtonRect?.left > dropdownRect.left) {
+                        menuRef.current.style.left = `${globalThis.innerWidth - dropdownRect.width}px`;
+                    }
+                    else {
+                        menuRef.current.style.left = '';
+                    }
+                }
+            }
+        }, [isVisible]);
+        useEventListener(globalThis, 'resize', () => changeDropdownPosition(isVisible, ref, dropdownRef));
+        useEffect(() => {
+            changeDropdownPosition(isVisible, ref, dropdownRef);
+        }, [isVisible]);
+        return (jsxs("div", { className: style(isVisible ? 'rounded-md shadow-blue-gray' : '', className), ref: ref, role: "navigation", children: [jsx("button", { type: "button", className: "group/btn flex justify-between items-center h-6", "aria-label": ariaLabel, onClick: toggle, children: Array(3)
                         .fill(null)
-                        .map((_, i) => (jsx("div", { className: "w-[3px] h-[3px] rounded mr-2xs bg-primary-text group-hover/btn:bg-primary-hover group-data-transparent:bg-white" }, String(i)))) }), jsx("div", { className: style('absolute flex flex-col rounded-md bg-white p-xl pb-xs w-56 z-40 translate-x-[-100%]', isVisible ? '' : 'hidden'), "aria-hidden": !isVisible, children: items?.map((item, i) => (jsx(DropdownMenuItem, { isActive: item === activeItem, ...item }, item?.text ?? String(i)))) })] }));
+                        .map((_, i) => (jsx("div", { className: "w-[3px] h-[3px] rounded mr-2xs bg-primary-text group-hover/btn:bg-primary-hover group-data-transparent:bg-white" }, String(i)))) }), jsx("div", { ref: dropdownRef, className: style('absolute flex flex-col rounded-md bg-white p-xl pb-xs w-56 z-40', isVisible ? '' : 'hidden'), "aria-hidden": !isVisible, children: items?.map((item, i) => (jsx(DropdownMenuItem, { isActive: item === activeItem, ...item }, item?.text ?? String(i)))) })] }));
     });
     const DropdownMenuItem = JSX(({ isActive, ...rest }) => {
         const link = useLink();
@@ -6430,7 +6512,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.429";
+    const packageVersion = "0.14.431";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;