@redneckz/wildless-cms-uni-blocks 0.14.595 → 0.14.597

package/bundle/bundle.umd.js

@@ -403,39 +403,58 @@
     ].join(' ');
 
     class EventBus {
-        subscribers = {};
+        subscribersMap = {};
         subjectsStateMap = {};
+        emitter = this;
+        observable = this;
         subscribe(type, listener) {
-            this.subscribers[type] = (this.subscribers[type] || []).concat(listener);
-            const latestEvent = this.subjectsStateMap[type];
-            if (latestEvent) {
-                listener(latestEvent);
-            }
+            this.subscribersMap[type] ||= [];
+            this.subscribersMap[type]?.push(listener);
+            this.fireSubscribers([listener], this.subjectsStateMap[type]);
             return () => {
                 this.unsubscribe(type, listener);
             };
         }
         unsubscribe(type, listener) {
-            this.subscribers[type] = this.subscribers[type]?.filter((s) => s !== listener);
+            const index = this.subscribersMap[type]?.indexOf(listener);
+            if (index && index !== -1) {
+                this.subscribersMap[type]?.splice(index, 1);
+            }
         }
         fire(type, event) {
             const isSubjectDeclared = type in this.subjectsStateMap;
             if (isSubjectDeclared) {
-                this.subjectsStateMap[type] = event;
+                this.subject(type, event);
+            }
+            else {
+                this.fireSubscribers(this.subscribersMap[type], event);
             }
-            this.subscribers[type]?.forEach((s) => s(event));
         }
         subject(type, event) {
-            this.subjectsStateMap[type] = event;
+            if (this.subjectsStateMap[type] !== event) {
+                this.subjectsStateMap[type] = event;
+                this.fireSubscribers(this.subscribersMap[type], event);
+            }
+            return () => {
+                delete this.subjectsStateMap[type];
+            };
+        }
+        fireSubscribers(subscribers, event) {
+            if (!subscribers || !event) {
+                return;
+            }
+            for (const _ of subscribers) {
+                _(event);
+            }
         }
     }
 
     const defaultEventBus = new EventBus();
 
     const useDialogManager = () => ({
-        open: (dialog, options = {}) => defaultEventBus.fire('dialog', { type: 'open', dialog, ...options }),
-        close: () => defaultEventBus.fire('dialog', { type: 'close' }),
-        closeAll: () => defaultEventBus.fire('dialog', { type: 'close', all: true }),
+        open: (dialog, options = {}) => defaultEventBus.emitter.fire('dialog', { type: 'open', dialog, ...options }),
+        close: () => defaultEventBus.emitter.fire('dialog', { type: 'close' }),
+        closeAll: () => defaultEventBus.emitter.fire('dialog', { type: 'close', all: true }),
     });
 
     const adjustBase = (href, basePath = '') => href.replace(basePath, '') || '/';
@@ -1090,6 +1109,7 @@
         { key: 'phone', text: 'Телефонный звонок' },
         { key: 'email', text: 'Электронное сообщение' },
     ];
+    // TODO Тоже надо рефакторить - файлик constants
     const OUT_SERVICE_URL = '/api/v1/outservice/outserviceregions';
 
     const getRegionUrl = (typeForm) => typeForm === 'OUTSERVICE' ? OUT_SERVICE_URL : undefined;
@@ -1193,15 +1213,22 @@
     const defaultStyle$1 = 'w-full border rounded-md text-primary-text outline-none p-m';
 
     const DEFAULT_HINTS_COUNT = 10;
-    const getResponseHandler = (response) => {
+    const defaultResponseItemHandler = (item) => item?.value || '';
+    const getResponseHandler = (itemHandler) => (response) => {
         const responseData = response?.suggestions || [];
-        return responseData.map((item) => ({
-            ...item,
-            processedValue: item?.value,
-        }));
+        return responseData.map((item) => {
+            const value = itemHandler(item);
+            return {
+                ...item,
+                processedValue: value,
+            };
+        });
     };
     const getDaDataHints = (options) => {
-        const { url, query, requestData = {} } = options;
+        const { url, query, queryPrefix, requestData = {}, responseItemHandler = defaultResponseItemHandler, } = options;
+        const responseHandler = getResponseHandler(responseItemHandler);
+        const queryPrefixValue = queryPrefix ? `${queryPrefix}, ` : '';
+        const combinedQuery = `${queryPrefixValue}${query}`;
         const result = fetch(`/api/v1/suggestions/${url}`, {
             method: 'POST',
             mode: 'cors',
@@ -1211,11 +1238,11 @@
             body: JSON.stringify({
                 count: DEFAULT_HINTS_COUNT,
                 ...requestData,
-                query,
+                query: combinedQuery,
             }),
         })
             .then((response) => response.json())
-            .then(getResponseHandler);
+            .then(responseHandler);
         return result;
     };
 
@@ -1243,11 +1270,33 @@
     const EMAIL_HINTS_LIST_OPTIONS = {
         url: 'suggest/email',
     };
+    const PASSPORT_FMS_HINTS_LIST_OPTIONS = {
+        url: 'suggest/fms_unit',
+    };
+    const PASSPORT_CODE_HINTS_LIST_OPTIONS = {
+        url: 'suggest/fms_unit',
+        responseItemHandler: (item) => item?.data?.code?.replace('-', '') || '',
+    };
+    const ORGANIZATION_NAME_HINTS_LIST_OPTIONS = {
+        url: 'suggest/party',
+    };
+    const ORGANIZATION_INN_HINTS_LIST_OPTIONS = {
+        url: 'suggest/party',
+        responseItemHandler: (item) => item?.data?.inn || '',
+    };
+    const ADDRESS_HINTS_LIST_OPTIONS = {
+        url: 'suggest/address',
+    };
     const hintsListsOptions = {
         name: NAME_HINTS_LIST_OPTIONS,
         surname: SURNAME_HINTS_LIST_OPTIONS,
         middleName: PATRONYMIC_HINTS_LIST_OPTIONS,
         email: EMAIL_HINTS_LIST_OPTIONS,
+        dulSubdivisionCode: PASSPORT_CODE_HINTS_LIST_OPTIONS,
+        dulIssuedBy: PASSPORT_FMS_HINTS_LIST_OPTIONS,
+        organizationName: ORGANIZATION_NAME_HINTS_LIST_OPTIONS,
+        inn: ORGANIZATION_INN_HINTS_LIST_OPTIONS,
+        participantAddress: ADDRESS_HINTS_LIST_OPTIONS,
     };
 
     const debounce = (fn, delay = 600) => {
@@ -1267,14 +1316,14 @@
     };
 
     const usePopupManager = () => ({
-        open: (popup, options) => defaultEventBus.fire('popup', { type: 'open', popup, ...options }),
-        update: (popup, options) => defaultEventBus.fire('popup', { type: 'update', popup, ...options }),
-        close: () => defaultEventBus.fire('popup', { type: 'close' }),
+        open: (popup, options) => defaultEventBus.emitter.fire('popup', { type: 'open', popup, ...options }),
+        update: (popup, options) => defaultEventBus.emitter.fire('popup', { type: 'update', popup, ...options }),
+        close: () => defaultEventBus.emitter.fire('popup', { type: 'close' }),
     });
 
-    const InputPopup = JSX(({ options, onChange }) => (jsx("div", { className: "bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-2xl", role: "list", children: options?.map((item, key) => (jsx("div", { className: "flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative", role: "listitem", onMouseDown: () => onChange(item.processedValue), children: jsx("span", { className: "min-h-6", children: item.processedValue }) }, key.toString()))) })));
+    const InputPopup = JSX(({ options, onChange }) => (jsx("div", { className: "bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-2xl", role: "list", children: options?.map((item, key) => (jsx("div", { className: "flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative", role: "listitem", onMouseDown: () => onChange(item), children: jsx("span", { className: "min-h-6", children: item.processedValue }) }, key.toString()))) })));
 
-    function useInputPopup({ isOpen, value, name, onChange }) {
+    function useInputPopup({ isOpen, value, name, onChange, onDaDataChange, daDataQueryPrefix, }) {
         const prevInputValue = useRef(value);
         const currentInputValue = useRef(value);
         const [hintsList, setHintsList] = useState([]);
@@ -1286,8 +1335,9 @@
         }, [value]);
         const handleChange = useCallback((option) => {
             close();
-            currentInputValue.current = option;
-            onChange && onChange(option);
+            currentInputValue.current = option.processedValue;
+            onChange && onChange(option.processedValue);
+            onDaDataChange && onDaDataChange(option);
         }, [close, onChange]);
         const inputRef = useRef(null);
         const getHintsList = useMemo(() => async (searchValue) => {
@@ -1296,15 +1346,17 @@
             }
             const result = await getDaDataHints({
                 url: defaultHintsListOptions.url,
+                responseItemHandler: defaultHintsListOptions.responseItemHandler,
                 requestData: {
                     ...defaultHintsListOptions?.requestData,
                 },
                 query: searchValue,
+                queryPrefix: daDataQueryPrefix,
             });
             if (result?.length) {
                 setHintsList(result);
             }
-        }, []);
+        }, [daDataQueryPrefix]);
         const debouncedGetHintsList = useMemo(() => debounce(getHintsList, 300), [getHintsList]);
         useEffect(() => {
             if (!isOpen || !inputRef.current || currentInputValue.current === value) {
@@ -1326,14 +1378,16 @@
         return inputRef;
     }
 
-    const InputControl = JSX(({ className, label, value = '', placeholder, error, errors, onChange = noop, onBlur, isTextarea, type, name = '', dadata = false, }) => {
+    const InputControl = JSX(({ className, label, value = '', placeholder, error, errors, onChange = noop, onDaDataChange, onBlur, isTextarea, type, name = '', daDataQueryPrefix, dadata = false, }) => {
         const [isOpen, { setFalse: close, setTrue: open }] = useBool();
         const popupRef = useOutsideClick(close);
         const inputRef = useInputPopup({
             isOpen: isOpen && dadata,
             name,
             value,
+            daDataQueryPrefix,
             onChange,
+            onDaDataChange,
         });
         return (jsxs("div", { className: style('shrink-0 w-full', className), ref: popupRef, onBlur: close, onFocus: open, children: [jsx("div", { ref: inputRef, children: jsx(Input, { type: type || 'text', "aria-label": label, label: getRequiredLabel({ label, errors }), valid: Boolean(!error), value: value, onChange: onChange, onBlur: onBlur, isTextarea: isTextarea, placeholder: getPlaceholder(placeholder, errors, label) }) }), renderErrorText(error)] }));
     });
@@ -1533,6 +1587,7 @@
         };
     };
 
+    // TODO Зачем это?
     const getValidation = (field, validator, required = false) => required ? withValidator(field, validator) : field;
 
     const ACQUIRING_TYPES = [
@@ -1949,13 +2004,24 @@
 
     const DulIssueDateField = JSX(({ field, input }) => (jsx(DatePickerControl, { label: "\u0414\u0430\u0442\u0430 \u0432\u044B\u0434\u0430\u0447\u0438", ...getValidation(field('dulIssueDateField'), validatorObj.dulIssueDateField, input?.required) })));
 
-    const DulIssuedBy = JSX(({ field, input }) => (jsx(InputControl, { label: "\u041A\u0435\u043C \u0432\u044B\u0434\u0430\u043D", ...getValidation(field('dulIssuedBy'), validatorObj.dulIssuedBy, input?.required) })));
+    const DulIssuedByField = JSX(({ field, input }) => {
+        const { value: dulSubdivisionCode, onChange: changeDulSubdivisionCode } = field('dulSubdivisionCode');
+        const onDaDataChange = useCallback((item) => {
+            changeDulSubdivisionCode?.(item?.data?.code?.replace('-', ''));
+        }, []);
+        return (jsx(InputControl, { label: "\u041A\u0435\u043C \u0432\u044B\u0434\u0430\u043D", ...input, ...getValidation(field('dulIssuedBy'), validatorObj.dulIssuedBy, input?.required), onDaDataChange: onDaDataChange, daDataQueryPrefix: dulSubdivisionCode }));
+    });
 
     const DulNumberField = JSX(({ field, input }) => (jsx(InputControl, { label: "\u041D\u043E\u043C\u0435\u0440 \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0430", type: "number", ...getValidation(field('dulNumber'), validatorObj.dulNumber, input?.required) })));
 
     const DulSerieField = JSX(({ field, input }) => (jsx(InputControl, { label: "\u0421\u0435\u0440\u0438\u044F \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0430", type: "number", ...getValidation(field('dulSerie'), validatorObj.dulSerie, input?.required) })));
 
-    const DulSubdivisionCode = JSX(({ field, input }) => (jsx(InputControl, { label: "\u041A\u043E\u0434 \u043F\u043E\u0434\u0440\u0430\u0437\u0434\u0435\u043B\u0435\u043D\u0438\u044F", type: "number", ...getValidation(field('dulSubdivisionCode'), validatorObj.dulSubdivisionCode, input?.required) })));
+    const DulSubdivisionCodeField = JSX(({ field, input }) => {
+        const onDaDataChange = useCallback((item) => {
+            field?.('dulIssuedBy')?.onChange?.(item?.data?.name);
+        }, []);
+        return (jsx(InputControl, { label: "\u041A\u043E\u0434 \u043F\u043E\u0434\u0440\u0430\u0437\u0434\u0435\u043B\u0435\u043D\u0438\u044F", type: "number", ...input, ...getValidation(field('dulSubdivisionCode'), validatorObj.dulSubdivisionCode, input?.required), onDaDataChange: onDaDataChange }));
+    });
 
     const EducationField = JSX(({ field, input }) => {
         const { data: education } = useLeadFormData('EDUCATION_LEVEL');
@@ -2006,7 +2072,13 @@
         return (jsx(SelectField, { field: field, source: housing, label: "\u0422\u0438\u043F \u0436\u0438\u043B\u044C\u044F", fieldName: "housing", input: input }));
     });
 
-    const InnField = JSX(({ field, input }) => (jsx(InputControl, { label: "\u0418\u041D\u041D", type: "number", ...getValidation(field('inn'), validatorObj.inn, input?.required) })));
+    const InnField = JSX(({ field, input }) => {
+        const onDaDataChange = useCallback((item) => {
+            field?.('organizationName')?.onChange?.(item.data?.name?.short_with_opf);
+            field?.('legalForm')?.onChange?.(item.data?.opf?.short);
+        }, []);
+        return (jsx(InputControl, { label: "\u0418\u041D\u041D", type: "number", ...input, ...getValidation(field('inn'), validatorObj.inn, input?.required), onDaDataChange: onDaDataChange }));
+    });
 
     const IsClientField = JSX(({ field }) => (jsx(CheckboxWithError, { ...field('isClient'), text: '\u042F\u0432\u043B\u044F\u044E\u0441\u044C \u043A\u043B\u0438\u0435\u043D\u0442\u043E\u043C \u0431\u0430\u043D\u043A\u0430 \u0410\u041E "\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A"' })));
 
@@ -2017,9 +2089,11 @@
     const LegalFormField = JSX(({ field, input }) => (jsx(InputControl, { label: "\u041E\u041F\u0424", placeholder: "\u041E\u041E\u041E, \u041F\u0410\u041E  \u0438 \u0434\u0440.", ...getValidation(field('legalForm'), validatorObj.legalForm, input?.required), ...input })));
 
     const REGIONS_URL = '/api/v1/regions';
+    const EMPTY_REGIONS = [];
+    // TODO Почему url можно менять? Разве смысл не в инкапсуляции api url. Тоже под рефакторинг попадает
     function useRegions(url = REGIONS_URL) {
         const { data } = useAsyncData(url, fetchJSONUnsafe);
-        return Array.isArray(data) ? data : [];
+        return Array.isArray(data) ? data : EMPTY_REGIONS;
     }
 
     const LocalitiesField = JSX(({ field, input }) => {
@@ -2049,7 +2123,13 @@
         return (jsx(SelectField, { field: field, source: organization, label: "\u0422\u0438\u043F \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", fieldName: "organization", input: input }));
     });
 
-    const OrganizationNameField = JSX(({ field, input }) => (jsx(InputControl, { label: "\u041D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", ...getValidation(field('organizationName'), validatorObj.organizationName, input?.required), ...input })));
+    const OrganizationNameField = JSX(({ field, input }) => {
+        const onDaDataChange = useCallback((item) => {
+            field?.('inn')?.onChange?.(item.data?.inn);
+            field?.('legalForm')?.onChange?.(item.data?.opf?.short);
+        }, []);
+        return (jsx(InputControl, { label: "\u041D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", ...input, ...getValidation(field('organizationName'), validatorObj.organizationName, input?.required), onDaDataChange: onDaDataChange }));
+    });
 
     const ParticipantAddressField = JSX(({ field, input }) => (jsx(InputControl, { label: "\u0410\u0434\u0440\u0435\u0441", ...getValidation(field('participantAddress'), validatorObj.participantAddress, input?.required), ...input })));
 
@@ -2284,8 +2364,8 @@
             dulSerie: jsx(DulSerieField, { field: field, input: input }),
             dulNumber: jsx(DulNumberField, { field: field, input: input }),
             dulIssueDateField: jsx(DulIssueDateField, { field: field, input: input }),
-            dulSubdivisionCode: jsx(DulSubdivisionCode, { field: field, input: input }),
-            dulIssuedBy: jsx(DulIssuedBy, { field: field, input: input }),
+            dulSubdivisionCode: jsx(DulSubdivisionCodeField, { field: field, input: input }),
+            dulIssuedBy: jsx(DulIssuedByField, { field: field, input: input }),
             participantAddress: jsx(ParticipantAddressField, { field: field, input: input }),
             participantDateRegistration: jsx(ParticipantDateRegistrationField, { field: field, input: input }),
         };
@@ -2543,6 +2623,14 @@
         return { ...formState, typeForm: { key: typeForm, text: '' } };
     };
 
+    const FoldableWrapper = JSX(({ className, children }) => (jsx("div", { className: className, role: "group", children: children })));
+    /**
+     * Какой то бесполезный компонент. Его можно заменить на useBool
+     * Лучше оставить только обёрточный div с необходимой атрибутикой
+     * и сделать пассивный компонент
+     *
+     * @deprecated
+     */
     const Foldable = JSX(({ className = '', isFoldButtonOnTop = false, unfoldedByDefault = false, renderFoldableSection, renderFoldButton, }) => {
         const [isUnfolded, setIsUnfolded] = useState(unfoldedByDefault);
         const onToggle = useCallback(() => {
@@ -2550,7 +2638,7 @@
         }, []);
         const sectionNode = renderFoldableSection({ isUnfolded, onToggle });
         const buttonNode = renderFoldButton ? renderFoldButton({ isUnfolded, onToggle }) : null;
-        return isFoldButtonOnTop ? (jsxs("div", { className: className, role: "group", children: [buttonNode, sectionNode] })) : (jsxs("div", { className: className, role: "group", children: [sectionNode, buttonNode] }));
+        return isFoldButtonOnTop ? (jsxs(FoldableWrapper, { className: className, children: [buttonNode, sectionNode] })) : (jsxs(FoldableWrapper, { className: className, children: [sectionNode, buttonNode] }));
     });
 
     function useResizeObserver(callback, deps) {
@@ -4640,31 +4728,37 @@
     const CarouselRecommendationCard = JSX(({ className, padding, description, additionalDescription, href, icon, isDotted, __html, socialMedia = [], target, title, align = 'text-left', benefits, imageOptions: { directionRight = true, isImageAlwaysOnRight = ImageAlwaysOnRight, isImageSecondary = false, } = {}, data, ...rest }) => (jsx(BlockWrapper, { className: style('relative min-h-28 group-data-gray:bg-main-divider/50', className), defaultPadding: "p-0", ...rest, children: jsx(LinkWrapper, { href: href, target: target, className: "h-full", data: getAspectsWithInclude(data), children: jsxs(BaseTile, { className: "h-full", defaultPadding: "p-2xl", padding: padding, insetTitle: jsx(Headline, { title: title, description: description, headlineVersion: "XS", isEmbedded: true, align: align }), ...leftOrRightImage(isIcon(icon) ? jsx(Img, { image: icon }) : null, directionRight), buttons: socialMedia.length ? (jsx(SocialMedia, { media: socialMedia, stretched: true, showButtonText: true, version: rest?.version })) : null, isImageAlwaysOnRight: isImageAlwaysOnRight, isImageSecondary: isImageSecondary, imageAlign: "center", children: [jsx(BenefitsList, { benefits: benefits }), __html ? jsx(RichText, { __html: __html, isDotted: isDotted, itemSize: "list-s" }) : null, renderAdditionalDescription(additionalDescription, align)] }) }) })));
     const renderAdditionalDescription = (additionalDescription, align) => additionalDescription ? (jsx(Paragraph, { size: "text-m", font: "font-light", color: "text-secondary-text group-data-secondary:text-white/80", align: align, children: additionalDescription })) : null;
 
+    const useSubjectState = (eventBus, type, initialState) => {
+        const [state, setState] = useState(initialState);
+        useEffect(() => eventBus.subscribe(type, setState), [eventBus, type]);
+        return state;
+    };
+
     const renderCardInfo = (cell, i) => {
         const { title, description, buttons } = cell;
         return (jsxs("div", { className: "py-lg border-b border-main-divider", children: [title ? (jsx("div", { className: "opacity-80", children: jsx(Text, { size: "text-m", color: "text-secondary-text", children: title }) })) : null, description ? (jsx("div", { className: "mt-2xs", children: jsx(Text, { size: "text-xl", color: "text-primary-text", children: description }) })) : null, buttons?.length ? (jsx("div", { className: "text-primary-main", children: renderButtonsSection(buttons) })) : null] }, String(i)));
     };
 
-    const CarouselTariffsCard = JSX(({ className = '', title, align = 'text-center', icon, button, visibleCellsCount = 1, cardCells = [], options, data, ...rest }) => {
-        const cellsNode = cardCells.map(renderCardInfo);
-        const [visibleCells, hiddenCells] = visibleCellsCount > 0
-            ? [cellsNode.slice(0, visibleCellsCount), cellsNode.slice(visibleCellsCount)]
-            : [cellsNode, []];
-        const [isVisible, setIsVisible] = useState(false);
-        useEffect(() => defaultEventBus.subscribe('fold', (event) => {
-            if (options?.parent !== undefined && event.parent === options?.parent) {
-                setIsVisible(event.isUnfolded);
-            }
-        }), [options?.parent]);
-        return (jsxs(BlockWrapper, { className: style('flex flex-col', className), defaultPadding: "p-2xl", ...rest, children: [isIcon(icon) ? (jsx("div", { className: "self-center", children: jsx(Img, { image: icon }) })) : null, title ? (jsx(Heading, { className: style('pt-xs', align), headingType: "h5", title: title })) : null, button?.text ? jsx(LinkButton, { className: "w-full mt-m mb-lg", ...button }) : null, hiddenCells.length ? (jsx(Foldable, { renderFoldableSection: () => (jsxs("div", { children: [visibleCells, jsx(FoldableSection, { isUnfolded: isVisible, children: hiddenCells })] })), renderFoldButton: cardCells.length >= visibleCellsCount
-                        ? renderFoldButton$3(options?.parent, data, isVisible)
-                        : null })) : (jsx("div", { children: visibleCells }))] }));
-    });
-    const renderFoldButton$3 = (parent, data, isUnfolded = false) => () => (jsxs("button", { className: "w-full cursor-pointer text-primary-main pt-lg flex justify-between items-center", onClick: () => {
-            if (parent !== undefined) {
-                defaultEventBus.fire('fold', { type: 'fold', isUnfolded: !isUnfolded, parent });
-            }
-        }, type: "button", ...(isUnfolded ? getAspectsAttributes(data) : {}), children: [jsx("div", { children: isUnfolded ? 'Скрыть' : 'Подробнее о тарифе' }), jsx(Icon, { className: "text-primary-text", name: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', width: "16", height: "16" })] }));
+    const CardCellsSection = JSX((props) => {
+        const { cardCells = [], visibleCellsCount = 1, isUnfolded } = props;
+        const [visibleCells, hiddenCells] = visibleCellsCount > 0 && cardCells.length >= visibleCellsCount
+            ? [cardCells.slice(0, visibleCellsCount), cardCells.slice(visibleCellsCount)]
+            : [cardCells, []];
+        return hiddenCells.length ? (jsxs(FoldableWrapper, { children: [jsxs("div", { children: [visibleCells.map(renderCardInfo), jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenCells.map(renderCardInfo) })] }), jsx(FoldButton, { ...props })] })) : (jsx("div", { children: visibleCells.map(renderCardInfo) }));
+    });
+    const FoldButton = JSX(({ isUnfolded, data, onToggle }) => (jsxs("button", { type: "button", className: "w-full cursor-pointer text-primary-main pt-lg flex justify-between items-center", ...(isUnfolded ? getAspectsAttributes(data) : {}), onClick: onToggle, children: [jsx("div", { children: isUnfolded ? 'Скрыть' : 'Подробнее о тарифе' }), jsx(Icon, { className: "text-primary-text", name: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', width: "16", height: "16" })] })));
+
+    const carouselTariffsCardEventBus = new EventBus();
+
+    const CarouselTariffsCard = JSX(({ className, title, align = 'text-center', icon, button, visibleCellsCount = 1, cardCells = [], options, data, ...rest }) => {
+        const { isUnfolded, parent: firedParent } = useSubjectState(carouselTariffsCardEventBus.observable, 'fold', {});
+        const isVisible = isUnfolded && firedParent === options?.parent;
+        const toggle = useCallback(() => carouselTariffsCardEventBus.emitter.fire('fold', {
+            isUnfolded: !isVisible,
+            parent: options?.parent,
+        }), [isVisible, options?.parent]);
+        return (jsxs(BlockWrapper, { className: style('flex flex-col', className), defaultPadding: "p-2xl", ...rest, children: [isIcon(icon) ? (jsx("div", { className: "self-center", children: jsx(Img, { image: icon }) })) : null, title ? (jsx(Heading, { className: style('pt-xs', align), headingType: "h5", title: title })) : null, button?.text ? jsx(LinkButton, { className: "w-full mt-m mb-lg", ...button }) : null, jsx(CardCellsSection, { cardCells: cardCells, visibleCellsCount: visibleCellsCount, isUnfolded: isVisible, data: data, onToggle: toggle })] }));
+    });
 
     const ContactsBlock = JSX(({ className, contacts, info, version = 'secondary', ...rest }) => (jsxs(BlockWrapper, { className: style('flex', className), defaultPadding: "p-6xl", version: version, ...rest, children: [info?.length ? renderBlocks(info) : null, contacts?.length ? renderBlocks(contacts) : null] })));
     const renderBlocks = (info) => (jsx("div", { className: "flex gap-5xl grow basis-0", children: info.map((column, i) => renderBlocksColumn({ column, i })) }));
@@ -4836,47 +4930,46 @@
     };
     const ErrorBlock = JSX(({ className = '', title, description, error, button, ...rest }) => (jsxs(BlockWrapper, { className: style('flex flex-col justify-center items-center', className), defaultPadding: style('p-6xl'), version: "transparent", ...rest, children: [jsx("div", { className: "flex justify-center", children: renderErrorContent(error) }), jsx(Headline, { title: title, description: description, headlineVersion: "XL", isEmbedded: true, className: "mb-2xl last:mb-0" }), button?.text ? (jsx(LinkButton, { version: button?.version, text: button?.text, ...button })) : null] })));
 
-    const useLatestEvent = (eventBus, type, initialEvent) => {
-        const [latestEvent, setLatestEvent] = useState(initialEvent || null);
-        useEffect(() => eventBus.subscribe(type, (_) => setLatestEvent(_)), [eventBus, type]);
-        const fireEvent = useCallback((_) => eventBus.fire(type, _), [eventBus, type]);
-        return [latestEvent, fireEvent];
-    };
+    function useSubject(eventBus, type, initialState) {
+        useEffect(() => {
+            const state = initialState instanceof Function ? initialState() : initialState;
+            if (state instanceof Promise) {
+                state.then((_) => eventBus.subject(type, _), console.warn);
+            }
+            else {
+                eventBus.subject(type, state);
+            }
+        }, [eventBus, type]);
+        return useCallback((_) => eventBus.fire(type, _), [eventBus, type]);
+    }
 
     const REGION_URL = '/api/v1/region';
     const LOCATION_STORAGE_KEY = 'location';
     function useLocation(defaultLocation = 'Москва') {
-        const [currentLocation, fireCurrentLocation] = useLatestEvent(defaultEventBus, 'location', restoreLocation() ?? { name: defaultLocation });
-        const selectCurrentLocation = useCallback((_) => {
-            storeLocation(_);
-            fireCurrentLocation(_);
-        }, []);
-        const { data } = useAsyncData(hasStoredLocation() ? null : REGION_URL, fetchJSONUnsafe);
-        useEffect(() => {
-            if (data && !hasStoredLocation()) {
-                fireCurrentLocation(data);
+        useEffect(() => defaultEventBus.subscribe('location', storeLocation), []);
+        return useSubject(defaultEventBus.emitter, 'location', restoreLocation(defaultLocation));
+    }
+    function useLocationState(defaultLocation = 'Москва') {
+        return useSubjectState(defaultEventBus.observable, 'location', { name: defaultLocation });
+    }
+    function restoreLocation(defaultLocation) {
+        return async () => {
+            if (!globalThis.localStorage?.hasItem(LOCATION_STORAGE_KEY)) {
+                storeLocation(await fetchJSON(REGION_URL));
+            }
+            const storedLocation = globalThis.localStorage?.getItem(LOCATION_STORAGE_KEY);
+            try {
+                return storedLocation && JSON.parse(storedLocation);
+            }
+            catch (ex) {
+                // Do nothing
             }
-        }, [data]);
-        return [currentLocation ?? { name: defaultLocation }, selectCurrentLocation];
+            return { name: defaultLocation };
+        };
+    }
+    function storeLocation(_) {
+        _ && globalThis.localStorage?.setItem(LOCATION_STORAGE_KEY, JSON.stringify(_));
     }
-    const hasStoredLocation = () => Boolean(globalThis.localStorage?.getItem(LOCATION_STORAGE_KEY));
-    const restoreLocation = () => {
-        try {
-            const data = globalThis.localStorage?.getItem(LOCATION_STORAGE_KEY);
-            return data && JSON.parse(data);
-        }
-        catch (ex) {
-            return null;
-        }
-    };
-    const storeLocation = (_) => {
-        try {
-            globalThis.localStorage?.setItem(LOCATION_STORAGE_KEY, JSON.stringify(_));
-        }
-        catch (ex) {
-            // Do nothing
-        }
-    };
 
     var Currency;
     (function (Currency) {
@@ -5018,7 +5111,7 @@
     }
 
     const ExchangeRateTile = JSX(({ className = '', title = 'Курсы обмена валют', button, ...rest }) => {
-        const [currentLocation] = useLocation();
+        const currentLocation = useLocationState();
         const exchangeRates = useFetchExchangeRateData(currentLocation);
         const currencyRates = getCurrencyRates(exchangeRates?.exchangeRate?.currencies);
         const currencyRatesBuy = currencyRates.filter((_) => _.buyExchangeRate);
@@ -5557,27 +5650,33 @@
         return (jsxs("form", { className: `font-sans relative ${className}`, children: [jsx("div", { className: "absolute rounded h-full flex items-center justify-center pl-m max-w-44 gap-s pointer-events-none", children: searchTerm ? null : (jsx("label", { htmlFor: "search-bar-input", className: `text-secondary-text `, children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0444\u0438\u043B\u0438\u0430\u043B\u0430\u043C" })) }), jsx("input", { id: "search-bar-input", className: style(inputValidStyle, `h-12 pl-m w-full peer text-l text-black rounded-md box-border`), value: searchTerm, onChange: (e) => onSearch(e.target.value.toLowerCase()), type: "text", name: "location-search-bar-input" })] }));
     });
 
-    const SEARCH_TERM_MIN_LENGTH = 3;
-    const LocationDialog = JSX(({ foreignOffices, branches }) => {
-        const [currentLocation, selectCurrentLocation] = useLocation(branches?.default);
+    const SelectedLocation = JSX(({ defaultLocation }) => {
+        const currentLocation = useLocationState(defaultLocation);
         const link = useLink();
         const { href } = link({ href: `/branches/${currentLocation.slug}` });
+        return currentLocation ? (jsx("div", { className: "mb-s", children: jsxs(Paragraph, { size: "text-l", color: "text-primary-text", children: ["\u0421\u0435\u0439\u0447\u0430\u0441 \u0432\u044B\u0431\u0440\u0430\u043D:", jsx(LinkWrapper, { href: href, className: "inline mx-2xs text-primary-main", children: currentLocation.name })] }) })) : null;
+    });
+
+    const SEARCH_TERM_MIN_LENGTH = 3;
+    const LocationDialog = JSX(({ foreignOffices, branches }) => {
+        const selectLocation = useLocation(branches?.default);
         const [query, setQuery] = useState('');
-        const regions = cleanUpRegions(useRegions()).sort((a, b) => a.name.localeCompare(b.name));
-        const regionsGroupByLetter = groupBy(regions, regionFirstLetter);
+        const rawRegions = useRegions();
+        const regions = useMemo(() => cleanUpRegions(rawRegions).sort((a, b) => (a.name ?? '').localeCompare(b.name ?? '')), [rawRegions]);
+        const regionsGroupByLetter = useMemo(() => groupBy(regions, regionFirstLetter), [regions]);
         const { close } = useDialogManager();
         const handleChangeLocation = useCallback((region) => {
-            selectCurrentLocation(region);
+            selectLocation(region);
             close();
         }, []);
-        return (jsxs(Dialog, { className: "pb-20", head: jsxs("div", { children: [jsx(Text, { size: "text-h4", color: "text-primary-text", children: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0444\u0438\u043B\u0438\u0430\u043B" }), currentLocation ? (jsx("div", { className: "mb-s", children: jsxs(Paragraph, { size: "text-l", color: "text-primary-text", children: ["\u0421\u0435\u0439\u0447\u0430\u0441 \u0432\u044B\u0431\u0440\u0430\u043D:", jsx(LinkWrapper, { href: href, className: "inline mx-2xs text-primary-main", children: currentLocation.name })] }) })) : null, jsx(SearchBar, { onSearch: setQuery, searchTerm: query })] }), children: [query && query.length >= SEARCH_TERM_MIN_LENGTH ? (jsx("div", { children: regions
+        return (jsxs(Dialog, { className: "pb-20", head: jsxs("div", { children: [jsx(Text, { size: "text-h4", color: "text-primary-text", children: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0444\u0438\u043B\u0438\u0430\u043B" }), jsx(SelectedLocation, { defaultLocation: branches?.default }), jsx(SearchBar, { onSearch: setQuery, searchTerm: query })] }), children: [query && query.length >= SEARCH_TERM_MIN_LENGTH ? (jsx("div", { children: regions
                         .filter(({ name }) => name && jaroWinklerDistance(name.toLowerCase())(query.toLowerCase()) >= 0.8)
                         .map(renderRegion(branches?.dataSelect, handleChangeLocation)) })) : (jsx("div", { className: "columns-1 sm:columns-3 md:columns-4 lg:columns-5", children: Array.from(regionsGroupByLetter.entries()).map(renderRegionGroup(handleChangeLocation, branches?.dataSelect)) })), renderForeignOffices(foreignOffices)] }));
     });
-    const regionFirstLetter = (region) => region.name?.charAt(0) || '';
+    const regionFirstLetter = (region) => region.name?.charAt(0) ?? '';
     const cleanUpRegions = (regions) => regions.map((region) => ({
         ...region,
-        name: region.name?.replace(/республика|область|край'/gi, '').trim() || '',
+        name: region.name?.replace(/республика|область|край'/gi, '').trim() ?? '',
     }));
 
     const useLocationDialog = (props) => {
@@ -5605,7 +5704,7 @@
 
     const HeaderSecondaryMenu = JSX(({ className, version, ...rest }) => {
         const iconVersion = version === 'transparent' ? 'white' : 'black';
-        const [currentLocation] = useLocation(rest?.branches?.default);
+        const currentLocation = useLocationState(rest?.branches?.default);
         const searchDialog = useSearchDialog(rest);
         const locationDialog = useLocationDialog(rest);
         const openSearchDialog = useCallback(() => searchDialog.open(), [searchDialog]);
@@ -6444,7 +6543,7 @@
         designDisabledPeople: (item) => Boolean(item.designDisabledPeople),
     };
     const AtmsMap = JSX(({ descriptionData, className }) => {
-        const [currentLocation] = useLocation();
+        const currentLocation = useLocationState();
         const regionCode = currentLocation?.code ?? '000';
         const { data: officesData, isLoad } = useAtms(regionCode);
         return (jsx(OfficesAtmsMapLayout, { className: className, filterItems: filterItems, data: officesData, isLoad: isLoad, initFilterState: INITIAL_FILTRATION_STATE, renderCard: renderAtmCard, getBalloon: getAtmPoint, title: `Банкоматы филиала ${currentLocation?.name}`, descriptionData: descriptionData }));
@@ -6663,7 +6762,7 @@
     };
 
     const OfficesMap = JSX(({ className }) => {
-        const [currentLocation] = useLocation();
+        const currentLocation = useLocationState();
         const regionCode = currentLocation?.code ?? '000';
         const { data, isLoad } = useOffices(regionCode);
         return (jsx(OfficesAtmsMapLayout, { className: className, data: data?.branches, isLoad: isLoad, remoteWorkplaces: data?.remoteWorkplaces, renderCard: renderOfficeCard, renderRemoteWorkplaceCard: renderRemoteWorkplaceCard, getBalloon: getOfficePoint, getBalloonRemoteWorkplaces: getRemoteWorkplacePoint, title: `Офисы филиала ${currentLocation?.name}` }));
@@ -7347,7 +7446,7 @@
             onClose && onClose(dialogs[dialogs.length - 1]);
             pop();
         }, [dialogs, onClose]);
-        useEffect(() => defaultEventBus.subscribe('dialog', (action) => {
+        useEffect(() => defaultEventBus.observable.subscribe('dialog', (action) => {
             switch (action.type) {
                 case 'open':
                     push(action);
@@ -7404,7 +7503,7 @@
         const close = useCallback(() => {
             setPopup(null);
         }, []);
-        useEffect(() => defaultEventBus.subscribe('popup', (action) => {
+        useEffect(() => defaultEventBus.observable.subscribe('popup', (action) => {
             switch (action.type) {
                 case 'open':
                 case 'update':
@@ -7459,7 +7558,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.594";
+    const packageVersion = "0.14.596";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;