@redneckz/wildless-cms-uni-blocks 0.9.11 → 0.9.13

package/bundle/bundle.umd.js

@@ -696,7 +696,7 @@
         useEffect(() => {
             setSelectedItem(value || { key: '', text: '' });
         }, [value]);
-        return (jsxs("div", { className: `${className}`, ref: wrapperRef, children: [label ? jsx("span", { className: "mb-2 flex text-primary-text", children: label }) : null, jsxs("div", { className: `relative ${isOpen ? 'z-20' : 'z-10'}`, children: [jsxs("div", { className: `text-l flex justify-between items-center mb-0.5 text-primary-text cursor-pointer
+        return (jsxs("div", { className: `${className}`, ref: wrapperRef, children: [label ? (jsx("div", { className: "mb-2", children: jsx(Text, { size: "text-m", color: "text-primary-text", font: "font-light", children: label }) })) : null, jsxs("div", { className: `relative ${isOpen ? 'z-20' : 'z-10'}`, children: [jsxs("div", { className: `text-l flex justify-between items-center mb-0.5 text-primary-text cursor-pointer
             ${getBorderStyle(isBorder)}`, onClick: () => setIsOpen(!isOpen), children: [jsx("p", { className: "p-4 pr-8 h-14 overflow-hidden text-ellipsis whitespace-nowrap", children: selectedItem?.text || placeholder }), jsx(Icon, { name: "ArrowUpIcon", width: "16", height: "16", className: `absolute right-3 ${isOpen ? '' : 'rotate-180'}` })] }), options?.length ? (jsx("div", { className: `h-0 ${renderOptionsStyle(isOpen)}`, children: jsx("div", { className: `bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]`, children: options.map(renderOption(choiceOption, isOpen, isSelected)) }) })) : null] })] }));
     });
     const renderOptionsStyle = (isOpen) => (isOpen ? '' : 'overflow-hidden');
@@ -849,7 +849,7 @@
 
     const getSanitizedValue = (_) => _.split(/\s+/).join('');
 
-    const DISABLED_INPUT_CLASSES = 'disabled:border-gray disabled:bg-main-divider';
+    const DISABLED_INPUT_CLASSES$1 = 'disabled:border-gray disabled:bg-main-divider';
     const InputRange = JSX(({ className, title, items = [], min = 1, max = 100, step = 1, value = min, disabled = false, onChange, }) => {
         const handleChange = (e) => {
             if (!onChange) {
@@ -861,9 +861,9 @@
             backgroundSize: `${(((value - min) * 100) / (max - min)).toFixed(2)}% 100%`,
         };
         return (jsxs("div", { className: className, children: [jsxs("label", { className: "block relative", children: [title ? jsx("span", { className: "text-m-light text-primary-text", children: title }) : null, jsx("input", { className: `m-0 mt-2 font-sans text-h3 w-full h-14 border border-solid border-gray rounded-md
-            outline-none p-0 pl-4 box-border text-primary-text hover:border-primary-hover focus:border-primary-text ${DISABLED_INPUT_CLASSES}`, value: addSpacesBetweenNumbers(value), disabled: disabled, onChange: handleChange, onBlur: handleChange }), jsx("div", { className: "absolute inset-x-0 -bottom-1 px-4 leading-[18px]", children: jsx("input", { className: "box-border w-full m-0 cursor-pointer slider", type: "range", min: min, max: max, step: step, value: value, disabled: disabled, onChange: handleChange, style: inputStyle }) })] }), renderRangeCaption(items)] }));
+            outline-none p-0 pl-4 box-border text-primary-text hover:border-primary-hover focus:border-primary-text ${DISABLED_INPUT_CLASSES$1}`, value: addSpacesBetweenNumbers(value), disabled: disabled, onChange: handleChange, onBlur: handleChange }), jsx("div", { className: "absolute inset-x-0 -bottom-1 px-4 leading-[18px]", children: jsx("input", { className: "box-border w-full m-0 cursor-pointer slider", type: "range", min: min, max: max, step: step, value: value, disabled: disabled, onChange: handleChange, style: inputStyle }) })] }), renderRangeCaption$1(items)] }));
     });
-    function renderRangeCaption(items) {
+    function renderRangeCaption$1(items) {
         return (jsx("div", { className: "flex justify-between my-2", children: items.map((item, i) => (jsx("span", { className: "text-s-light text-secondary-text", children: item }, String(i)))) }));
     }
 
@@ -1286,7 +1286,7 @@
         minSum: 50000,
         maxSum: 5000000,
         minMonths: 2,
-        maxMonths: 120,
+        maxMonths: 10,
         rate: 0,
         isMonthlyInterestPayment: true,
         isRemoteRegistration: true,
@@ -1416,6 +1416,23 @@
     const maxBy = (discriminator = defaultDiscriminator) => (list) => list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
     const max = maxBy();
 
+    const mergeIntervals = (intervals) => {
+        const result = [...intervals];
+        result.sort(([a], [c]) => a - c);
+        let i = 1;
+        while (i < result.length) {
+            const [a, b] = result[i - 1];
+            const [c, d] = result[i];
+            if (b >= c) {
+                result.splice(i - 1, 2, [a, Math.max(b, d)]);
+            }
+            else {
+                i++;
+            }
+        }
+        return result;
+    };
+
     const minBy = (discriminator = defaultDiscriminator) => maxBy((_) => -discriminator(_));
 
     const getRangeByKeys = ([minKey, maxKey], rows = []) => ({
@@ -1511,14 +1528,48 @@
     });
     const renderBusinessDepositParamsForm = ({ isDisabledOperatingDeposit, isReplenished, isPartialWithdrawal, isSmallBusiness, handleIsReplenished, handleIsPartialWithdrawal, handleIsSmallBusiness, }) => (jsxs("div", { children: [jsx(Checkbox, { text: "\u041F\u043E\u043F\u043E\u043B\u043D\u0435\u043D\u0438\u0435", disabled: isDisabledOperatingDeposit, checked: isReplenished, onChange: handleIsReplenished }), jsx(Checkbox, { className: "mt-3", disabled: isDisabledOperatingDeposit, text: "\u0427\u0430\u0441\u0442\u0438\u0447\u043D\u043E\u0435 \u0441\u043D\u044F\u0442\u0438\u0435", checked: isPartialWithdrawal, onChange: handleIsPartialWithdrawal }), jsx(Checkbox, { className: "mt-3", text: "\u042F\u0432\u043B\u044F\u044E\u0441\u044C \u043C\u0430\u043B\u044B\u043C \u043F\u0440\u0435\u0434\u043F\u0440\u0438\u044F\u0442\u0438\u0435\u043C", checked: isSmallBusiness, onChange: handleIsSmallBusiness })] }));
 
+    const DISABLED_INPUT_CLASSES = 'disabled:border-gray disabled:bg-main-divider';
+    const InputListRange = JSX(({ className, title, items = [], list = [], value = list[0], disabled = false, onChange }) => {
+        const min = 0;
+        const max = list.length - 1;
+        const step = 1;
+        const handleTextChange = (e) => {
+            if (!onChange) {
+                return;
+            }
+            const newValue = parseInt(e.target.value);
+            const closetValue = list.reduce(function (prev, curr) {
+                return Math.abs(curr - newValue) < Math.abs(prev - newValue) ? curr : prev;
+            });
+            onChange(Number(getSanitizedValue(closetValue.toString())));
+        };
+        const handleRangeChange = (e) => {
+            if (!onChange) {
+                return;
+            }
+            const val = list.at(clamp(parseInt(e.target.value), min, max)) || 0;
+            onChange(Number(getSanitizedValue(val.toString())));
+        };
+        const valueIndex = list.findIndex((item) => item === value) || 0;
+        const inputStyle = {
+            backgroundSize: `${(((valueIndex - min) * 100) / (max - min)).toFixed(2)}% 100%`,
+        };
+        return (jsxs("div", { className: className, children: [jsxs("label", { className: "block relative", children: [title ? jsx("span", { className: "text-m-light text-primary-text", children: title }) : null, jsx("input", { className: `m-0 mt-2 font-sans text-h3 w-full h-14 border border-solid border-gray rounded-md
+            outline-none p-0 pl-4 box-border text-primary-text hover:border-primary-hover focus:border-primary-text ${DISABLED_INPUT_CLASSES}`, value: addSpacesBetweenNumbers(value), disabled: disabled, onChange: handleTextChange, onBlur: handleTextChange }), list.length ? (jsx("div", { className: "absolute w-full flex justify-between -bottom-[3px] px-4", children: list.map(renderTick(valueIndex, disabled)) })) : null, jsx("div", { className: "absolute inset-x-0 -bottom-1 px-4 leading-[18px]", children: jsx("input", { className: "box-border w-full m-0 cursor-pointer slider relative z-10", type: "range", min: min, max: max, step: step, value: valueIndex, disabled: disabled, onChange: handleRangeChange, style: inputStyle }) })] }), renderRangeCaption(items)] }));
+    });
+    const renderTick = (valueIndex, disabled) => (value, i) => (jsx("span", { className: `w-2 h-2 rounded-full ${valueIndex <= i || disabled ? 'bg-gray' : 'bg-primary-main'}` }, String(i)));
+    function renderRangeCaption(items) {
+        return (jsx("div", { className: "flex justify-between my-2", children: items.map((item, i) => (jsx("span", { className: "text-s-light text-secondary-text", children: item }, String(i)))) }));
+    }
+
     const STEP_MONTHS = 1;
     function renderMonthsInput(title, params, callback) {
-        const { minMonths, maxMonths, monthsValue } = params;
+        const { minMonths, maxMonths, monthsValue, availableMonths } = params;
         const monthText = (month) => {
             const text = Number(month) % 10 === 1 ? 'месяца' : 'месяцев';
             return `${month} ${text}`;
         };
-        return (jsx(InputRange, { className: "mt-7", title: title, items: [`От ${monthText(minMonths)}`, `До ${monthText(maxMonths)}`], min: minMonths, max: maxMonths, step: STEP_MONTHS, value: clamp(monthsValue, minMonths, maxMonths), onChange: callback }));
+        return availableMonths?.length ? (jsx(InputListRange, { className: "mt-7", title: title, items: [`От ${monthText(minMonths)}`, `До ${monthText(maxMonths)}`], list: availableMonths, value: clamp(monthsValue, minMonths, maxMonths), onChange: callback })) : (jsx(InputRange, { className: "mt-7", title: title, items: [`От ${monthText(minMonths)}`, `До ${monthText(maxMonths)}`], min: minMonths, max: maxMonths, step: STEP_MONTHS, value: clamp(monthsValue, minMonths, maxMonths), onChange: callback }));
     }
 
     const ANNUITY = 'annuity';
@@ -1558,38 +1609,36 @@
     const useCreditCalculatorParams = (userInputParams, sourceBookDir, paramsViewSettings) => {
         const { moneyValue, monthsValue } = userInputParams;
         const data = useCalculatorParams(sourceBookDir || CREDIT_CALC_DEFAULT_DIR);
-        const creditCalculatorSourceBookParams = data?.rows?.find((row) => {
-            const isExcludeSalaryClient = !paramsViewSettings?.isShowSalaryClient;
-            const isExcludeStateEmployee = !paramsViewSettings?.isShowStateEmployee;
-            const isExcludePensionClient = !paramsViewSettings?.isShowPensionClient;
-            const isExcludeInsurance = !paramsViewSettings?.isShowInsurance;
-            return (checkRowByParam({
+        const isExcludeSalaryClient = !paramsViewSettings?.isShowSalaryClient;
+        const isExcludeStateEmployee = !paramsViewSettings?.isShowStateEmployee;
+        const isExcludePensionClient = !paramsViewSettings?.isShowPensionClient;
+        const isExcludeInsurance = !paramsViewSettings?.isShowInsurance;
+        const creditCalculatorSourceBookParams = data?.rows?.find((row) => checkRowByParam$1({
+            row,
+            userInputParams,
+            paramKey: 'isSalaryClient',
+            isExclude: isExcludeSalaryClient,
+        }) &&
+            checkRowByParam$1({
+                row,
+                userInputParams,
+                paramKey: 'isStateEmployee',
+                isExclude: isExcludeStateEmployee,
+            }) &&
+            checkRowByParam$1({
+                row,
+                userInputParams,
+                paramKey: 'isPensionClient',
+                isExclude: isExcludePensionClient,
+            }) &&
+            checkRowByParam$1({
                 row,
                 userInputParams,
-                paramKey: 'isSalaryClient',
-                isExclude: isExcludeSalaryClient,
+                paramKey: 'isInsurance',
+                isExclude: isExcludeInsurance,
             }) &&
-                checkRowByParam({
-                    row,
-                    userInputParams,
-                    paramKey: 'isStateEmployee',
-                    isExclude: isExcludeStateEmployee,
-                }) &&
-                checkRowByParam({
-                    row,
-                    userInputParams,
-                    paramKey: 'isPensionClient',
-                    isExclude: isExcludePensionClient,
-                }) &&
-                checkRowByParam({
-                    row,
-                    userInputParams,
-                    paramKey: 'isInsurance',
-                    isExclude: isExcludeInsurance,
-                }) &&
-                checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], row) &&
-                checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], row));
-        }) || DEFAULT_CREDIT_CALCULATOR_PARAMS;
+            checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], row) &&
+            checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], row)) || DEFAULT_CREDIT_CALCULATOR_PARAMS;
         const { rate } = creditCalculatorSourceBookParams;
         const monthlyPayment = getMonthlyPayment(rate, userInputParams);
         const sourceBookRows = data?.rows || [DEFAULT_CREDIT_CALCULATOR_PARAMS];
@@ -1601,7 +1650,7 @@
             monthlyPayment,
         };
     };
-    const checkRowByParam = ({ row, userInputParams, paramKey, isExclude }) => isExclude || userInputParams[paramKey] === row[paramKey];
+    const checkRowByParam$1 = ({ row, userInputParams, paramKey, isExclude }) => isExclude || userInputParams[paramKey] === row[paramKey];
 
     const CreditCalculatorForm = JSX(({ className = '', sourceBookDir, buttons, footnote, paramsViewSettings }) => {
         const [isAnnuity, toggleIsAnnuity] = useState(false);
@@ -1659,13 +1708,27 @@
         return (jsxs("div", { children: [title ? (jsx("div", { className: "mb-3", children: jsx(Text, { color: "text-secondary-text", font: "font-light", children: title }) })) : null, jsx("div", { children: jsx(RadioButtonGroup, { orientation: orientation, items: registrationTypeItems, checkedItem: isRemoteRegistration ? REMOTE_REGISTRATION : OFFICE_REGISTRATION, onChange: (text) => callback && callback(text === REMOTE_REGISTRATION) }) })] }));
     }
 
-    const useDepositCalculatorParams = (userInputParams, sourceBookDir) => {
-        const { isMonthlyInterestPayment, isRemoteRegistration, moneyValue, monthsValue } = userInputParams;
+    const arrayByRange = (start, stop, step = 1) => Array.from({ length: Math.abs(stop - start) / step + 1 }, (value, index) => stop >= start ? start + index * step : start - index * step);
+
+    const useDepositCalculatorParams = (userInputParams, sourceBookDir, paramsViewSettings) => {
+        const { moneyValue, monthsValue } = userInputParams;
         const data = useCalculatorParams(sourceBookDir || DEPOSIT_CALC_DEFAULT_DIR);
-        const depositCalculatorSourceBookParams = data?.rows?.find((_) => isMonthlyInterestPayment === _.isMonthlyInterestPayment &&
-            isRemoteRegistration === _.isRemoteRegistration &&
-            checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], _) &&
-            checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], _)) || DEFAULT_DEPOSIT_CALCULATOR_PARAMS;
+        const isExcludeMonthlyInterestPayment = !paramsViewSettings?.isShowMonthlyInterestPayment;
+        const isExcludeRemoteRegistration = !paramsViewSettings?.isShowRemoteRegistration;
+        const depositCalculatorSourceBookParams = data?.rows?.find((row) => checkRowByParam({
+            row,
+            userInputParams,
+            paramKey: 'isMonthlyInterestPayment',
+            isExclude: isExcludeMonthlyInterestPayment,
+        }) &&
+            checkRowByParam({
+                row,
+                userInputParams,
+                paramKey: 'isRemoteRegistration',
+                isExclude: isExcludeRemoteRegistration,
+            }) &&
+            checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], row) &&
+            checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], row)) || DEFAULT_DEPOSIT_CALCULATOR_PARAMS;
         const { rate } = depositCalculatorSourceBookParams;
         const income = getDepositIncome(rate, userInputParams);
         const finalSum = moneyValue + income;
@@ -1674,6 +1737,7 @@
             ...depositCalculatorSourceBookParams,
             ...getRangeByKeys(['minSum', 'maxSum'], sourceBookRows),
             ...getRangeByKeys(['minMonths', 'maxMonths'], sourceBookRows),
+            availableMonths: mergeIntervals(sourceBookRows.map((row) => [row['minMonths'], row['maxMonths']])).flatMap(([start, end]) => arrayByRange(start, end)),
             ...userInputParams,
             income,
             finalSum,
@@ -1691,8 +1755,9 @@
             return Math.round((moneyValue * rate * 30 * monthsValue) / 365 / 100);
         }
     };
+    const checkRowByParam = ({ row, userInputParams, paramKey, isExclude }) => isExclude || userInputParams[paramKey] === row[paramKey];
 
-    const DepositCalculatorForm = JSX(({ className = '', sourceBookDir, buttons, footnote }) => {
+    const DepositCalculatorForm = JSX(({ className = '', sourceBookDir, buttons, footnote, paramsViewSettings }) => {
         const [moneyValue, setMoneyValue] = useState(DEFAULT_SUM);
         const handleMoneyValue = useCallback((_) => setMoneyValue(_), []);
         const [monthsValue, setMonthsValue] = useState(DEFAULT_MONTHS);
@@ -1707,22 +1772,32 @@
             isRemoteRegistration,
         };
         const handleMonthsValue = useCallback((_) => setMonthsValue(_), []);
-        const calculatorParams = useDepositCalculatorParams(userInputParams, sourceBookDir);
+        const calculatorParams = useDepositCalculatorParams(userInputParams, sourceBookDir, paramsViewSettings);
         const { income, finalSum, rate } = calculatorParams;
         return (jsxs("section", { className: style('flex justify-between', className), children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput('Сумма вклада, ₽', {
                             ...calculatorParams,
                         }, handleMoneyValue), renderMonthsInput('Срок вклада, месяцев', {
                             ...calculatorParams,
-                        }, handleMonthsValue), jsxs("div", { className: "mt-7 flex flex-col  gap-y-7", children: [renderInterestPayment({
-                                    isMonthlyInterestPayment,
-                                    callback: handleIsMonthlyInterestPayment,
-                                    title: 'Выплата процентов',
-                                }), renderRegistrationType({
-                                    isRemoteRegistration,
-                                    callback: handleIsRemoteRegistration,
-                                    title: 'Оформление',
-                                })] })] }), jsx(Rate, { rate: rate, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-full max-w-[350px]", children: [jsx(CalculatorValueBlock, { title: "\u0414\u043E\u0445\u043E\u0434 \u043F\u043E \u0432\u043A\u043B\u0430\u0434\u0443", 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, { className: 'mt-7', isVertical: true }), renderFootnote(footnote)] })] }));
-    });
+                        }, handleMonthsValue), jsx("div", { className: "mt-7", children: renderDepositParamsForm({
+                                ...calculatorParams,
+                                ...paramsViewSettings,
+                                handleIsMonthlyInterestPayment,
+                                handleIsRemoteRegistration,
+                            }) })] }), jsx(Rate, { rate: rate, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-full max-w-[350px]", children: [jsx(CalculatorValueBlock, { title: "\u0414\u043E\u0445\u043E\u0434 \u043F\u043E \u0432\u043A\u043B\u0430\u0434\u0443", 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, { className: 'mt-7', isVertical: true }), renderFootnote(footnote)] })] }));
+    });
+    const renderDepositParamsForm = ({ isMonthlyInterestPayment, isRemoteRegistration, isShowMonthlyInterestPayment, isShowRemoteRegistration, handleIsMonthlyInterestPayment, handleIsRemoteRegistration, }) => (jsxs("div", { className: "flex flex-col gap-y-7", children: [isShowMonthlyInterestPayment
+                ? renderInterestPayment({
+                    isMonthlyInterestPayment,
+                    callback: handleIsMonthlyInterestPayment,
+                    title: 'Выплата процентов',
+                })
+                : null, isShowRemoteRegistration
+                ? renderRegistrationType({
+                    isRemoteRegistration,
+                    callback: handleIsRemoteRegistration,
+                    title: 'Оформление',
+                })
+                : null] }));
 
     const EmbeddableCalcBlocks = {
         CreditCalculatorForm,
@@ -4889,7 +4964,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.9.11";
+    const packageVersion = "0.9.13";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;