@redneckz/wildless-cms-uni-blocks 0.14.288 → 0.14.290

package/bundle/bundle.umd.js

@@ -881,9 +881,76 @@
             : { secondaryPhoneNumber: formatPhone(secondaryPhone) };
     };
 
+    const handleAspects = ({ aspectsAttributes, aspects, ev, formData }) => {
+        for (const { aspectName, params } of aspectsAttributes) {
+            const paramsData = aspectName === 'mindboxEvent' ? { ...params, eventJson: JSON.stringify(formData) } : params;
+            aspects[aspectName ?? '']?.(ev, paramsData);
+        }
+    };
+
+    const QUERY_STORAGE_KEY = 'rshb-query-params';
+    function saveSessionQuery() {
+        const result = globalThis.location?.search || globalThis.sessionStorage?.getItem(QUERY_STORAGE_KEY) || '';
+        if (result) {
+            globalThis.sessionStorage?.setItem(QUERY_STORAGE_KEY, result);
+        }
+        return result;
+    }
+
+    const adjustSessionQuery = (href) => {
+        const sessionQuery = saveSessionQuery();
+        if (!isURL(href) || !sessionQuery) {
+            return href;
+        }
+        const url = new URL(href);
+        for (const [key, value] of new URLSearchParams(sessionQuery)) {
+            url.searchParams.set(key, value);
+        }
+        return url.toString();
+    };
+
+    const tableFunc = (table) => (input) => {
+        const [, output] = table.find(([predicate]) => predicate(input)) || [];
+        return output;
+    };
+
+    const forwardQuery = (ev) => {
+        const anchor = ev.target?.closest('a');
+        if (isURL(anchor?.href) && !anchor?.href?.startsWith(globalThis.location?.origin)) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            const url = adjustSessionQuery(anchor?.href) || anchor?.href;
+            if (url) {
+                const transition = getTransition(anchor?.target);
+                transition?.(url);
+            }
+        }
+    };
+    const getTransition = tableFunc([
+        [(_) => _ === '_blank', (url) => globalThis.open(url, '_blank')],
+        [(_) => _ === '_parent', (url) => globalThis.parent && (globalThis.parent.location.href = url)],
+        [
+            (_) => _ === '_top',
+            (url) => {
+                globalThis.top && (globalThis.top.location.href = url);
+            },
+        ],
+        [() => true, (url) => globalThis.location && (globalThis.location.href = url)],
+    ]);
+
+    function useAspects() {
+        return useAspects._impl();
+    }
+    useAspects._impl = () => ({
+        forwardQuery,
+    });
+    useAspects.setup = (impl) => {
+        useAspects._impl = impl;
+    };
+
     const identity = (_) => _;
 
-    const useForm = (initialState, { resetOnSubmit, onSubmit } = {}) => {
+    const useForm = (initialState, { resetOnSubmit, onSubmit, } = {}) => {
         const [formState, setFormState] = useState(initialState);
         const [isDirtyForm, setDirtyForm] = useState(false);
         const [dirtyFieldsMap, setDirtyFieldsMap] = useState({});
@@ -912,10 +979,10 @@
             setDirtyForm(false);
             setDirtyFieldsMap({});
         }, [initialState]);
-        const handleSubmit = useCallback((e) => {
-            e.preventDefault();
+        const handleSubmit = useCallback((ev) => {
+            ev.preventDefault();
             resetOnSubmit ? reset() : setDirtyForm(true);
-            onSubmit && onSubmit(formState);
+            onSubmit && onSubmit(formState, ev);
         }, [onSubmit, formState]);
         return [
             formState,
@@ -1283,7 +1350,7 @@
         const handleBlur = useCallback((v) => {
             v === '+7 (' ? onChange && onChange('') : null;
         }, []);
-        return (jsx(Input, { ...inputProps, onChange: handleChange, onFocus: (e) => handleChange(e?.target?.value || ''), onBlur: (e) => handleBlur(e?.target?.value || ''), children: children }));
+        return (jsx(Input, { ...inputProps, onChange: handleChange, onFocus: (ev) => handleChange(ev?.target?.value || ''), onBlur: (ev) => handleBlur(ev?.target?.value || ''), children: children }));
     });
 
     const InputPhoneControl = JSX(({ className, label, value, error, onChange, onBlur, ...rest }) => (jsxs("div", { className: style('shrink-0 w-full', className), children: [jsx(PhoneInput, { "aria-label": label, label: rest?.errors ? `${label}*` : label, valid: Boolean(!error), value: value, onChange: onChange, onBlur: onBlur, placeholder: "+7 (___) ___-__-__" }), renderErrorText(error)] })));
@@ -1500,8 +1567,8 @@
         const inputStyle = {
             backgroundSize: `${percentage.toFixed(2)}% 100%`,
         };
-        return (jsxs("div", { children: [list.length ? (jsx("div", { className: "absolute w-full flex justify-between -bottom-[3px] px-m", children: list.map((_, i) => (jsx("div", { className: style('w-2 h-2 rounded-full', rangeValue <= i || disabled ? 'bg-gray' : 'bg-primary-main') }, String(i)))) })) : null, jsx("div", { className: "absolute inset-x-0 -bottom-1 px-m leading-[18px]", children: jsx("input", { className: "box-border w-full m-0 cursor-pointer slider relative z-10", style: inputStyle, type: "range", min: min, max: max, step: step, value: rangeValue, disabled: disabled, onInput: ((e) => {
-                            const rawValue = parseDecimal(e.target?.value);
+        return (jsxs("div", { children: [list.length ? (jsx("div", { className: "absolute w-full flex justify-between -bottom-[3px] px-m", children: list.map((_, i) => (jsx("div", { className: style('w-2 h-2 rounded-full', rangeValue <= i || disabled ? 'bg-gray' : 'bg-primary-main') }, String(i)))) })) : null, jsx("div", { className: "absolute inset-x-0 -bottom-1 px-m leading-[18px]", children: jsx("input", { className: "box-border w-full m-0 cursor-pointer slider relative z-10", style: inputStyle, type: "range", min: min, max: max, step: step, value: rangeValue, disabled: disabled, onInput: ((ev) => {
+                            const rawValue = parseDecimal(ev.target?.value);
                             const newValue = list.length ? list[rawValue] : rawValue;
                             onChange && onChange(newValue || 0);
                         }) }) })] }));
@@ -1516,8 +1583,8 @@
             normalize: (_ = 0) => list.length ? closestValue(list)(_) : clamp(_, min, max),
             format: toLocalNumberFormat(),
         });
-        const handleChange = useCallback((e) => {
-            onChange && onChange(parseDecimal(e.target?.value));
+        const handleChange = useCallback((ev) => {
+            onChange && onChange(parseDecimal(ev.target?.value));
         }, [onChange]);
         return (jsxs("div", { className: className, children: [jsxs("label", { className: "block relative", children: [title ? (jsx(Text, { size: "text-m", font: "font-light", color: "text-primary-text", children: title })) : null, jsx("input", { className: style('mt-xs font-sans text-h3 w-full h-14', 'border border-solid border-gray rounded-md outline-none', 'pl-m box-border', 'text-primary-text hover:border-primary-hover focus:border-primary-text', DISABLED_INPUT_CLASSES), disabled: disabled, onInput: handleChange, ...normalizedProps }), renderRangeWithTicks({ list, min, max, step, disabled, value, onChange })] }), renderRangeCaption(items)] }));
     });
@@ -1784,19 +1851,23 @@
     const renderContacts = () => (jsxs("div", { className: "space-y-m", children: [jsx(Heading, { headingType: "h6", title: "\u0418\u043B\u0438 \u0441\u0432\u044F\u0436\u0438\u0442\u0435\u0441\u044C \u0441 \u043D\u0430\u043C\u0438 \u0443\u0434\u043E\u0431\u043D\u044B\u043C \u0441\u043F\u043E\u0441\u043E\u0431\u043E\u043C", className: "@xl:text-center" }), jsxs("div", { className: "flex gap-xl", children: [jsxs("a", { className: "flex gap-s items-center text-primary-text no-underline", href: `tel:8 (800) 200-78-70`, "aria-label": "8 (800) 200-78-70", children: [jsx(Img, { image: { icon: 'PhoneIcon' }, width: "24", height: "24" }), jsx("span", { children: "8 (800) 200-78-70" })] }), jsxs("a", { className: "flex gap-s items-center text-primary-text no-underline", "aria-label": "ved@rshb.ru", href: `mailto:ved@rshb.ru`, children: [jsx(Img, { image: { icon: 'MailIcon' }, width: "24", height: "24" }), jsx("span", { children: "ved@rshb.ru" })] })] })] }));
 
     const API = LeadServiceAPI();
-    const ApplicationFormCustom = JSX(({ className, title, typeForm = '', sections = [], button, link, endpoint, additionalParams, isContacts, ...rest }) => {
+    const ApplicationFormCustom = JSX(({ className, title, typeForm = '', sections = [], button, link, endpoint, additionalParams, isContacts, data, ...rest }) => {
         const inputs = (sections?.flatMap((_) => _?.inputs) || []);
         const initialFormState = getInitialFormState(inputs, typeForm);
         const [responseType, setResponseType] = useState('');
-        const handleSubmit = useCallback(async (data) => {
-            const inputsFiltered = getFilteredInputs(inputs, data);
+        const handleSubmit = useCallback(async (formData, ev) => {
+            const inputsFiltered = getFilteredInputs(inputs, formData);
             const feedbackValidator = objectValidator(getObjectValidator(inputsFiltered));
-            if (!isValidationSuccess(feedbackValidator(data))) {
+            if (!isValidationSuccess(feedbackValidator(formData))) {
                 return 'Fail';
             }
-            const formatData = getFormatData({ ...data, ...additionalParams });
+            const formatData = getFormatData({ ...formData, ...additionalParams });
             const status = (await API.send(formatData, endpoint === 'lead')) ? 'OK' : 'Fail';
             setResponseType(status);
+            if (status === 'OK' && data) {
+                const aspects = useAspects();
+                handleAspects({ aspectsAttributes: data, aspects, ev, formData: formatData });
+            }
             return status;
         }, []);
         const [, { field, onSubmit, reset }] = useForm(initialFormState, { onSubmit: handleSubmit });
@@ -1806,8 +1877,9 @@
                 reset();
             }
         }, [responseType]);
-        return (jsxs(ApplicationFormLayout, { className: style('container space-y-m', className), title: title, responseType: responseType, ...rest, children: [jsxs("form", { onSubmit: onSubmit, children: [sections.map((_, i) => (jsxs("div", { className: style(inputColumnStyles(_.columns), 'grid gap-x-m'), children: [_?.title ? (jsx("div", { className: "@xl:text-center @xl:col-span-2 mb-m", children: jsx(Text, { size: "text-h6", children: _.title }) })) : null, (_?.inputs || [])?.map(getField(field, typeForm))] }, `section-${i}`))), renderAgreementSubmit(fieldName ? field('consentDataProcessing') : undefined, link, button)] }), isContacts ? renderContacts() : null] }));
+        return (jsxs(ApplicationFormLayout, { className: style('container space-y-m', className), title: title, responseType: responseType, ...rest, children: [jsxs("form", { onSubmit: onSubmit, children: [sections.map((_, i) => (jsxs("div", { className: style(inputColumnStyles(_.columns), 'grid gap-x-m'), children: [renderTitle(_.title), (_?.inputs || [])?.map(getField(field, typeForm))] }, `section-${i}`))), renderAgreementSubmit(fieldName ? field('consentDataProcessing') : undefined, link, button)] }), isContacts ? renderContacts() : null] }));
     });
+    const renderTitle = (title) => title ? (jsx("div", { className: "@xl:text-center @xl:col-span-2 mb-m", children: jsx(Text, { size: "text-h6", children: title }) })) : null;
     const inputColumnStyles = (column) => column === 2 ? '@xl:grid-cols-2' : '';
     const getConsentDataProcessing = (inputs) => inputs?.find((_) => _?.name === 'consentDataProcessing');
     const getFilteredInputs = (inputs, data) => inputs
@@ -1820,7 +1892,7 @@
                 : _ === (dataValue?.key ?? dataValue);
         }));
 
-    const ApplicationFormGrantSupport = UniBlock(({ className, title, button, regionSource, ...rest }) => {
+    const ApplicationFormGrantSupport = UniBlock(({ className, title, button, regionSource, data, ...rest }) => {
         const [region, setRegion] = useState({ key: '' });
         const regions = regionSource?.regions ?? [];
         const buttonStyle = getRegularButtonClasses({
@@ -1829,7 +1901,7 @@
         });
         const regionHref = regions?.find((_) => _.name === region.key)?.href;
         const buttonText = button?.text ? button.text : 'Перейти';
-        return (jsx(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: jsxs("div", { className: "container max-w-[978px] space-y-m", children: [title ? jsx(Heading, { headingType: "h3", title: title, className: "@xl:text-center" }) : null, regions ? (jsx(SelectControl, { label: "\u0412\u0430\u0448 \u0440\u0435\u0433\u0438\u043E\u043D", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043E\u043D", isSearch: true, options: regions.map(({ name = '' }) => ({ key: name, text: name })), value: region, onChange: setRegion })) : null, regionHref ? (jsx("div", { className: "text-center", children: jsx(LinkButton, { href: regionHref, target: "_blank", className: style('p-m w-full @xl:w-auto', buttonStyle), children: buttonText }) })) : null] }) }));
+        return (jsx(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: jsxs("div", { className: "container max-w-[978px] space-y-m", children: [title ? jsx(Heading, { headingType: "h3", title: title, className: "@xl:text-center" }) : null, regions ? (jsx(SelectControl, { label: "\u0412\u0430\u0448 \u0440\u0435\u0433\u0438\u043E\u043D", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043E\u043D", isSearch: true, options: regions.map(({ name = '' }) => ({ key: name, text: name })), value: region, onChange: setRegion })) : null, regionHref ? (jsx("div", { className: "text-center", children: jsx(LinkButton, { href: regionHref, target: "_blank", className: style('p-m w-full @xl:w-auto', buttonStyle), data: data, children: buttonText }) })) : null] }) }));
     });
 
     const joinList = (sep) => (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: `sep-${i}` }, el) : [el]), []);
@@ -3697,11 +3769,6 @@
     };
     const formatValue = (value) => value.replace(/[^\d.,]/g, '').replace(',', '.');
 
-    const tableFunc = (table) => (input) => {
-        const [, output] = table.find(([predicate]) => predicate(input)) || [];
-        return output;
-    };
-
     const callbackCurrencySelect = (props) => tableFunc([
         [
             (_) => _.value !== Currency.RUB && _.oppositeValue !== Currency.RUB,
@@ -4578,11 +4645,11 @@
         return `${parseFloat((bytes / Math.pow(KILO, i)).toFixed(decimals))} ${KILO_SIZES[i]}`;
     };
 
-    const LinkDocItem = JSX(({ icon, text, href, target, fileFormat, fileSize }) => {
+    const LinkDocItem = JSX(({ icon, text, href, target, fileFormat, data, fileSize }) => {
         const prefix = fileSize && fileFormat ? ',' : '';
         const size = fileSize ?? '';
         const format = fileFormat ? String(fileFormat) : '';
-        return (jsxs("a", { className: "flex box-border gap-s group/item h-fit w-fit text-primary-text no-underline hover:text-primary-main", href: href, target: target, children: [icon, text ? (jsxs(Text, { size: "text-l", font: "font-light", children: [text, " ", addSpace(size, format), jsx(Text, { color: "text-secondary-text", children: href && `${size + prefix + format}` })] })) : null] }));
+        return (jsxs("a", { className: "flex box-border gap-s group/item h-fit w-fit text-primary-text no-underline hover:text-primary-main", href: href, target: target, ...getAspectsAttributes(data), children: [icon, text ? (jsxs(Text, { size: "text-l", font: "font-light", children: [text, " ", addSpace(size, format), jsx(Text, { color: "text-secondary-text", children: href && `${size + prefix + format}` })] })) : null] }));
     });
     const addSpace = (size, format) => (size || format ? jsx("span", { children: ",\u00A0" }) : '');
 
@@ -4605,7 +4672,7 @@
             ? formatBytes(docBlockDef?.attachment?.fileSize || 0)
             : docBlockDef?.fileSize;
         const fileFormat = docBlockDef?.docType === 'Attachment' ? getExtFromHref(href) : docBlockDef?.fileFormat;
-        return (jsx("div", { role: "listitem", children: jsx(LinkDocItem, { text: docBlockDef?.text, target: docBlockDef?.target, href: href, fileFormat: fileFormat, fileSize: fileSize, icon: icon ? jsx(Img, { className: linkIconStyle, image: icon, width: "24", height: "24" }) : null }) }, String(i)));
+        return (jsx("div", { role: "listitem", children: jsx(LinkDocItem, { text: docBlockDef?.text, target: docBlockDef?.target, href: href, fileFormat: fileFormat, fileSize: fileSize, icon: icon ? jsx(Img, { className: linkIconStyle, image: icon, width: "24", height: "24" }) : null, data: docBlockDef?.data }) }, String(i)));
     };
     const getExtFromHref = (href) => {
         if (!href) {
@@ -5614,7 +5681,7 @@
     });
     const TabsLayoutButton = JSX(({ tab, className, onClick, isActive }) => {
         const buttonClassNames = getButtonClassNames(isActive);
-        return (jsxs("button", { type: "button", onClick: onClick, "aria-label": tab?.title, className: style('border border-gray cursor-pointer text-left border-b-0 mt-auto flex gap-2xs', buttonClassNames.btn, className), children: [tab?.icon ? (jsx(Img, { className: style('h-6 w-6 min-w-6 min-h-6', buttonClassNames.icon), image: {
+        return (jsxs("button", { type: "button", onClick: onClick, "aria-label": tab?.title, className: style('border border-gray cursor-pointer text-left border-b-0 mt-auto flex gap-2xs', buttonClassNames.btn, className), ...getAspectsAttributes(tab?.data), children: [tab?.icon ? (jsx(Img, { className: style('h-6 w-6 min-w-6 min-h-6', buttonClassNames.icon), image: {
                         ...tab?.icon,
                         iconVersion: tab?.icon?.iconVersion ?? buttonClassNames.iconVersion,
                     }, width: "24", height: "24" })) : null, jsxs("div", { className: "border-0", children: [tab?.title ? jsx("div", { className: buttonClassNames.title, children: tab.title }) : null, tab?.description ? jsx("div", { className: buttonClassNames.desc, children: tab.description }) : null] })] }));
@@ -5917,22 +5984,11 @@
         Video,
     };
 
-    const QUERY_STORAGE_KEY = 'rshb-query-params';
-    function saveSessionQuery() {
-        const result = globalThis.location?.search || globalThis.sessionStorage?.getItem(QUERY_STORAGE_KEY) || '';
-        if (result) {
-            globalThis.sessionStorage?.setItem(QUERY_STORAGE_KEY, result);
-        }
-        return result;
-    }
-
     const applyAspects = (aspects) => (ev) => {
         const element = ev.target?.closest('[data-aspects]');
         try {
             const aspectsAttributes = JSON.parse(element?.dataset?.aspects ?? '[]');
-            for (const { aspectName, params } of aspectsAttributes) {
-                aspects[aspectName ?? '']?.(ev, params);
-            }
+            handleAspects({ aspectsAttributes, aspects, ev });
         }
         catch (_) {
             // Do nothing
@@ -5941,52 +5997,6 @@
         aspects.forwardQuery?.(ev);
     };
 
-    const adjustSessionQuery = (href) => {
-        const sessionQuery = saveSessionQuery();
-        if (!isURL(href) || !sessionQuery) {
-            return href;
-        }
-        const url = new URL(href);
-        for (const [key, value] of new URLSearchParams(sessionQuery)) {
-            url.searchParams.set(key, value);
-        }
-        return url.toString();
-    };
-
-    const forwardQuery = (ev) => {
-        const anchor = ev.target?.closest('a');
-        if (isURL(anchor?.href) && !anchor?.href?.startsWith(globalThis.location?.origin)) {
-            ev.preventDefault();
-            ev.stopPropagation();
-            const url = adjustSessionQuery(anchor?.href) || anchor?.href;
-            if (url) {
-                const transition = getTransition(anchor?.target);
-                transition?.(url);
-            }
-        }
-    };
-    const getTransition = tableFunc([
-        [(_) => _ === '_blank', (url) => globalThis.open(url, '_blank')],
-        [(_) => _ === '_parent', (url) => globalThis.parent && (globalThis.parent.location.href = url)],
-        [
-            (_) => _ === '_top',
-            (url) => {
-                globalThis.top && (globalThis.top.location.href = url);
-            },
-        ],
-        [() => true, (url) => globalThis.location && (globalThis.location.href = url)],
-    ]);
-
-    function useAspects() {
-        return useAspects._impl();
-    }
-    useAspects._impl = () => ({
-        forwardQuery,
-    });
-    useAspects.setup = (impl) => {
-        useAspects._impl = impl;
-    };
-
     const useClickHandler = handlerDecorator(() => {
         useEffect(() => {
             saveSessionQuery(); //? Call first time for save query in sessionStorage
@@ -6145,7 +6155,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.287";
+    const packageVersion = "0.14.289";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;