@redneckz/wildless-cms-uni-blocks 0.14.268 → 0.14.270

package/bundle/bundle.umd.js

@@ -467,7 +467,16 @@
         }
     }
 
-    const dataAttributes = (data = {}) => Object.entries(data).reduce((res, [k, v]) => ({ ...res, [`data-${k.toLowerCase()}`]: v }), {});
+    const getAspectsAttributes = (data) => {
+        try {
+            return {
+                'data-aspects': JSON.stringify(data),
+            };
+        }
+        catch (_) {
+            return {};
+        }
+    };
 
     /** @deprecated */
     const ButtonInner = JSX((props) => {
@@ -524,7 +533,7 @@
         const buttonInner = children ?? jsx(ButtonInner, { ...adjustedProps });
         return disabled ? (jsx(DisabledButton, { ...adjustedProps, children: buttonInner })) : (jsx(RegularButton, { ...adjustedProps, children: buttonInner }));
     });
-    const RegularButton = JSX(({ className = '', href, rel, target, ariaLabel, version, rounded, onClick, type, data, children, }) => (jsx("a", { className: getRegularButtonClasses({ className, version, rounded }), href: href, rel: rel, target: target, "aria-label": ariaLabel, role: href ? 'link' : 'button', onClick: onClick, type: type, ...dataAttributes(data), children: children })));
+    const RegularButton = JSX(({ className = '', href, rel, target, ariaLabel, version, rounded, onClick, type, data, children, }) => (jsx("a", { className: getRegularButtonClasses({ className, version, rounded }), href: href, rel: rel, target: target, "aria-label": ariaLabel, role: href ? 'link' : 'button', onClick: onClick, type: type, ...getAspectsAttributes(data), children: children })));
     const DisabledButton = JSX(({ className, ariaLabel, version, rounded, children }) => (jsx("button", { type: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabIndex: -1, className: getDisabledButtonClasses({ className, rounded, version }), children: children })));
 
     function renderBackwardButton(version, handleClick, alwaysVisible = false) {
@@ -3655,21 +3664,23 @@
     });
     const formatCurrency = (value) => (value ? currencyNumberFormat.format(value) : '');
 
-    const TABLE_HEAD_STYLE = 'text-left text-m font-light text-secondary-text';
-    const TABLE_HEAD_STYLE_WITH_PADDING = `${TABLE_HEAD_STYLE} pl-5xl`;
+    const TABLE_STYLE_BASE = 'text-m font-light text-secondary-text ';
+    const TABLE_HEAD_STYLE = `${TABLE_STYLE_BASE} text-left`;
+    const TABLE_HEAD_STYLE_CENTER = `${TABLE_STYLE_BASE} pl-5xl text-center`;
+    const TABLE_HEAD_STYLE_RIGHT = `${TABLE_STYLE_BASE} pl-5xl text-right`;
     const CURRENCY_ICONS_MAP = {
         USD: 'DollarIcon',
         EUR: 'EuroIcon',
         CNY: 'ChineseYuanRenminbiIcon',
     };
-    const CurrencyTable = JSX(({ className, exchangeCurrencyItems }) => (jsxs("table", { className: `h-fit w-fit ${className}`, children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { className: TABLE_HEAD_STYLE, children: jsx(Text, { size: "text-m", children: "\u0412\u0430\u043B\u044E\u0442\u0430" }) }), jsx("th", { className: TABLE_HEAD_STYLE_WITH_PADDING, children: jsx(Text, { size: "text-m", children: "\u041A\u0443\u043F\u0438\u0442\u044C" }) }), jsx("th", { className: TABLE_HEAD_STYLE_WITH_PADDING, children: jsx(Text, { size: "text-m", children: "\u041F\u0440\u043E\u0434\u0430\u0442\u044C" }) })] }) }), jsx("tbody", { children: exchangeCurrencyItems.map(renderCurrencyRow) })] })));
+    const CurrencyTable = JSX(({ className, exchangeCurrencyItems }) => (jsxs("table", { className: style('h-fit w-full', className), children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { className: TABLE_HEAD_STYLE, children: jsx(Text, { size: "text-m", children: "\u0412\u0430\u043B\u044E\u0442\u0430" }) }), jsx("th", { className: TABLE_HEAD_STYLE_CENTER, children: jsx(Text, { size: "text-m", children: "\u041A\u0443\u043F\u0438\u0442\u044C" }) }), jsx("th", { className: TABLE_HEAD_STYLE_RIGHT, children: jsx(Text, { size: "text-m", children: "\u041F\u0440\u043E\u0434\u0430\u0442\u044C" }) })] }) }), jsx("tbody", { children: exchangeCurrencyItems.map(renderCurrencyRow) })] })));
     const renderCurrencyRow = (exchangeCurrencyItem) => {
         const currency = exchangeCurrencyItem?.currency?.currency;
-        return (jsxs("tr", { className: "pb-2xs text-h6", children: [jsx("td", { className: "pt-m", children: jsxs("div", { className: "flex items-center gap-xs", children: [currency ? (jsx(Img, { image: { icon: CURRENCY_ICONS_MAP[currency] }, width: "24", height: "24" })) : null, jsx(Text, { size: "text-h6", children: currency })] }) }), jsx("td", { className: "pt-m pl-5xl", children: jsx(Text, { size: "text-h6", children: formatCurrency(exchangeCurrencyItem?.saleExchangeRate) }) }), jsx("td", { className: "pt-m pl-5xl", children: jsx(Text, { size: "text-h6", children: formatCurrency(exchangeCurrencyItem?.buyExchangeRate) }) })] }, currency));
+        return (jsxs("tr", { className: "pb-2xs text-h6", children: [jsx("td", { className: "pt-m m-auto flex text-left", children: jsxs("div", { className: "flex items-center gap-xs", children: [currency ? (jsx(Img, { image: { icon: CURRENCY_ICONS_MAP[currency] }, width: "24", height: "24" })) : null, jsx(Text, { size: "text-h6", children: currency })] }) }), jsx("td", { className: "pt-m pl-5xl text-center", children: jsx(Text, { size: "text-h6", children: formatCurrency(exchangeCurrencyItem?.saleExchangeRate) }) }), jsx("td", { className: "pt-m pl-5xl text-right", children: jsx(Text, { size: "text-h6", children: formatCurrency(exchangeCurrencyItem?.buyExchangeRate) }) })] }, currency));
     };
 
     const icon = { icon: 'GpsIcon' };
-    const CurrentLocation = JSX(({ className = '', address }) => (jsxs("div", { className: `flex gap-s ${className}`, children: [jsx(RoundedIcon, { ...icon, iconBgVersion: "primary", className: "shrink-0" }), jsxs("div", { className: "space-y-2xs whitespace-pre-wrap", children: [address ? (jsx(Paragraph, { size: "text-l", color: "text-primary-main", children: address })) : null, jsx(Paragraph, { size: "text-m", color: "text-secondary-text", children: "\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0437\u0430\u0434\u0430\u043D\u043D\u043E\u0433\u043E \u043E\u0444\u0438\u0441\u0430" })] })] })));
+    const CurrentLocation = JSX(({ className = '', address }) => (jsxs("div", { className: style('flex gap-s w-full justify-between @sm:justify-center', className), children: [jsx(RoundedIcon, { ...icon, iconBgVersion: "primary", className: "shrink-0" }), jsxs("div", { className: "space-y-2xs whitespace-pre-wrap", children: [address ? (jsx(Paragraph, { size: "text-l", color: "text-primary-main", children: address })) : null, jsx(Paragraph, { size: "text-m", color: "text-secondary-text", children: "\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0437\u0430\u0434\u0430\u043D\u043D\u043E\u0433\u043E \u043E\u0444\u0438\u0441\u0430" })] })] })));
 
     const roundTo = (value, precision = 2) => {
         const factor = 10 ** precision;
@@ -3791,7 +3802,7 @@
         currencyRatesBuy.unshift({ currency: { currency: Currency.RUB } });
         const currencyRatesSell = currencyRates.filter((_) => _.saleExchangeRate);
         currencyRatesSell.push({ currency: { currency: Currency.RUB } });
-        return (jsx(BlockWrapper, { className: style('box-border min-h-80', className), ...rest, children: jsx(BaseTile, { className: "h-full", title: jsx(Heading, { headingType: "h4", title: title, className: "whitespace-pre-wrap" }), children: jsxs("div", { className: "flex w-full gap-6xl flex-wrap sm:flex-nowrap", children: [jsxs("div", { className: "max-w-1/2", children: [currencyRates ? (jsx(CurrencyTable, { className: "mb-xl", exchangeCurrencyItems: currencyRates })) : null, jsx(CurrentLocation, { address: exchangeRates?.address })] }), currencyRates.length && currencyRatesBuy.length && currencyRatesSell.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow w-1/2", currencyRatesBuy: currencyRatesBuy, currencyRatesSell: currencyRatesSell, button: button })) : null] }) }) }));
+        return (jsx(BlockWrapper, { className: style('box-border min-h-80', className), ...rest, children: jsx(BaseTile, { className: "h-full", title: jsx(Heading, { headingType: "h4", title: title, className: "whitespace-pre-wrap" }), children: jsxs("div", { className: "flex w-full gap-6xl flex-wrap @lg:flex-nowrap", children: [jsxs("div", { className: "w-full @2xl:w-auto @5xl:w-1/2", children: [currencyRates ? (jsx(CurrencyTable, { className: "mb-xl", exchangeCurrencyItems: currencyRates })) : null, jsx(CurrentLocation, { address: exchangeRates?.address })] }), currencyRates.length && currencyRatesBuy.length && currencyRatesSell.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow w-1/2", currencyRatesBuy: currencyRatesBuy, currencyRatesSell: currencyRatesSell, button: button })) : null] }) }) }));
     });
     const getCurrencyRates = (currencies) => {
         return currencies?.filter((_) => [1, 2, 3].includes(_?.currency?.id)) || [];
@@ -5890,7 +5901,7 @@
     };
 
     const QUERY_STORAGE_KEY = 'rshb-query-params';
-    function getSessionQuery() {
+    function saveSessionQuery() {
         const result = globalThis.location?.search || globalThis.sessionStorage?.getItem(QUERY_STORAGE_KEY) || '';
         if (result) {
             globalThis.sessionStorage?.setItem(QUERY_STORAGE_KEY, result);
@@ -5898,8 +5909,23 @@
         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);
+            }
+        }
+        catch (_) {
+            // Do nothing
+        }
+        // legal aspect, use always
+        aspects.forwardQuery?.(ev);
+    };
+
     const adjustSessionQuery = (href) => {
-        const sessionQuery = getSessionQuery();
+        const sessionQuery = saveSessionQuery();
         if (!isURL(href) || !sessionQuery) {
             return href;
         }
@@ -5910,41 +5936,18 @@
         return url.toString();
     };
 
-    const useNavigateHandler = handlerDecorator(() => {
-        useEffect(() => {
-            getSessionQuery(); //? Call first time for save query in sessionStorage
-        }, []);
-        const loadBot = useChatBot(projectSettings.CHAT_BOT);
-        const reachGoalYM = (targetName) => {
-            const [ymID] = projectSettings.YANDEX_METRIKA_ID?.split(',').reverse() ?? [];
-            if ([ymID, targetName, globalThis.ym].every(Boolean)) {
-                globalThis.ym(ymID, 'reachGoal', targetName);
-            }
-        };
-        useEventListener(globalThis, 'click', navigationHandler({ loadBot, reachGoalYM }));
-    });
-    const navigationHandler = (methods) => (ev) => {
-        const element = getAnchorElement(ev.target);
-        for (const key in element?.dataset) {
-            getScenario(key)?.(element, methods);
-        }
-        if (isURL(element?.href) && !element?.href?.startsWith(globalThis.location?.origin)) {
+    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(element?.href) || element?.href;
+            const url = adjustSessionQuery(anchor?.href) || anchor?.href;
             if (url) {
-                const transition = getTransition(element?.target);
+                const transition = getTransition(anchor?.target);
                 transition?.(url);
             }
         }
     };
-    const getAnchorElement = (target) => {
-        let _target = target;
-        while (Boolean(_target) && _target.tagName !== 'A') {
-            _target = _target?.parentNode;
-        }
-        return _target;
-    };
     const getTransition = tableFunc([
         [(_) => _ === '_blank', (url) => globalThis.open(url, '_blank')],
         [(_) => _ === '_parent', (url) => globalThis.parent && (globalThis.parent.location.href = url)],
@@ -5956,10 +5959,24 @@
         ],
         [() => true, (url) => globalThis.location && (globalThis.location.href = url)],
     ]);
-    const getScenario = tableFunc([
-        [(_) => _ === 'ymtarget', (target, methods) => methods?.reachGoalYM(target?.dataset?.ymtarget)],
-        [(_) => _ === 'chatbot', (target, methods) => methods?.loadBot({ target })],
-    ]);
+
+    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
+        }, []);
+        const aspects = useAspects();
+        useEventListener(globalThis, 'click', applyAspects(aspects));
+    });
 
     const COOKIE_DIALOG_ID = 'cookie';
     const DIALOG_INITIAL_DELAY = 3 * 1000;
@@ -6089,7 +6106,7 @@
     const ContentPage = JSX(({ className, data = EMPTY_DATA, blocksRegistry, blockDecorator }) => {
         const { slots, blocks, fallback, ...pageContent } = data;
         const resolvedPageContent = useJSONRef(pageContent, fallback);
-        useNavigateHandler();
+        useClickHandler();
         const options = {
             key: '',
             page: { slots, blocks, fallback, ...resolvedPageContent },
@@ -6111,7 +6128,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.267";
+    const packageVersion = "0.14.269";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;