@cloud-ru/uikit-product-calculator 0.33.3 → 0.33.5

package/dist/esm/components/Controls/ToggleControl/components/SwitchRow.js

@@ -0,0 +1,30 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { extractSupportProps } from '@sbercloud/uikit-product-utils';
+import { Switch } from '@snack-uikit/toggles';
+import { Tooltip } from '@snack-uikit/tooltip';
+import { parseKeyToDataTest } from '../../../../utils';
+import { ObjectDecorator } from '../../ObjectDecorator';
+import styles from './styles.module.css';
+export function SwitchRow(_a) {
+    var { label, description, checked, disabled, onChange, labelTooltip, labelTooltipPlacement, className, disabledToggleTip, loading, dataTestId } = _a, rest = __rest(_a, ["label", "description", "checked", "disabled", "onChange", "labelTooltip", "labelTooltipPlacement", "className", "disabledToggleTip", "loading", "dataTestId"]);
+    const handleChange = () => !disabled && onChange(!checked);
+    const handleKeyDown = e => {
+        if (e.code === 'Enter' || e.code === 'Space') {
+            handleChange();
+        }
+    };
+    const toggle = (_jsx(Switch, { size: 'm', checked: checked, disabled: disabled, "data-pointer": true, showIcon: false, tabIndex: -1, loading: loading }));
+    return (_jsxs("div", Object.assign({ className: cn(styles.switchRow, className), role: 'switch', "aria-checked": checked, tabIndex: disabled ? -1 : 0, onClick: handleChange, onKeyDown: handleKeyDown, "data-disabled": disabled || undefined, "data-loading": loading || undefined, "data-checked": checked || undefined, "data-mobile": true, "data-test-id": dataTestId }, extractSupportProps(rest), { children: [_jsxs("div", { className: styles.headline, children: [_jsx("div", { className: styles.titleLayout, children: _jsx("div", { className: styles.titleWrapper, "data-test-id": parseKeyToDataTest('toggle', 'title'), children: _jsx(ObjectDecorator, { label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement }) }) }), _jsx("div", { className: styles.wrap, children: disabled && disabledToggleTip ? (_jsx(Tooltip, { tip: disabledToggleTip, triggerClassName: styles.switchRowWrapper, children: toggle })) : (toggle) })] }), description && _jsx("span", { className: styles.description, children: description })] })));
+}

package/dist/esm/components/Controls/ToggleControl/components/index.d.ts

@@ -0,0 +1 @@
+export * from './SwitchRow';

package/dist/esm/components/Controls/ToggleControl/components/index.js

@@ -0,0 +1 @@
+export * from './SwitchRow';

package/dist/esm/components/Controls/ToggleControl/components/styles.module.css

@@ -0,0 +1,101 @@
+.description{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+
+.titleLayout{
+  font-family:var(--sans-title-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-title-m-font-weight, Semibold);
+  line-height:var(--sans-title-m-line-height, 24px);
+  font-size:var(--sans-title-m-font-size, 16px);
+  letter-spacing:var(--sans-title-m-letter-spacing, 0.15px);
+  paragraph-spacing:var(--sans-title-m-paragraph-spacing, 8.8px);
+  display:flex;
+  align-items:center;
+  justify-content:flex-start;
+  gap:4px;
+  flex-grow:0;
+  overflow:hidden;
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.headline{
+  position:relative;
+  display:flex;
+  align-items:flex-start;
+  gap:8px;
+  justify-content:space-between;
+}
+
+.switchRowWrapper{
+  display:inline-flex;
+}
+
+.switchRow{
+  padding-top:var(--space-accordion-collapse-block-primary-vertical-padding, 24px);
+  padding-bottom:var(--space-accordion-collapse-block-primary-vertical-padding, 24px);
+  padding-left:var(--space-accordion-collapse-block-primary-horizontal-padding, 24px);
+  padding-right:var(--space-accordion-collapse-block-primary-horizontal-padding, 24px);
+  gap:var(--space-accordion-collapse-block-primary-gap, 24px);
+  border-width:var(--border-width-accordion-collapse-block-primary, 1px);
+  border-radius:var(--radius-accordion-collapse-block-primary-round, 12px);
+  border-width:var(--border-width-accordion-collapse-block-primary, 1px);
+  box-sizing:border-box;
+  cursor:pointer;
+  position:relative;
+  overflow:hidden;
+  border:solid 1px var(--sys-neutral-decor-default, #dde0ea);
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+}
+.switchRow:focus-within, .switchRow:hover{
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+}
+.switchRow:focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  outline-color:var(--sys-available-complementary, #1c1c24);
+}
+.switchRow *[data-pointer]{
+  cursor:pointer;
+}
+.switchRow[data-loading]{
+  cursor:wait;
+}
+.switchRow[data-loading] *[data-pointer]{
+  cursor:wait;
+}
+.switchRow[data-disabled]{
+  cursor:not-allowed;
+  background-color:transparent;
+}
+.switchRow[data-disabled]::before{
+  background-color:var(--sys-neutral-accent-default, #787b8a);
+  opacity:0.08;
+}
+.switchRow[data-disabled] .titleLayout,
+.switchRow[data-disabled] .description{
+  color:var(--sys-neutral-text-disabled, #aaaebd);
+}
+.switchRow[data-disabled] *[data-pointer]{
+  cursor:not-allowed;
+}
+.switchRow[data-mobile]{
+  padding:16px;
+}
+
+.titleWrapper{
+  display:flex;
+  align-items:flex-start;
+  overflow:hidden;
+  gap:4px;
+}
+
+.wrap{
+  display:flex;
+}

package/dist/esm/components/Controls/ToggleControl/index.d.ts

@@ -0,0 +1 @@
+export * from './ToggleControl';

package/dist/esm/components/Controls/ToggleControl/index.js

@@ -0,0 +1 @@
+export * from './ToggleControl';

package/dist/esm/components/Controls/ToggleObjectControl/ToggleObjectControl.d.ts

@@ -0,0 +1,25 @@
+import { FormValues } from '../../../types';
+import { CONTROL } from '../constants';
+import { BaseControl, FormControl } from '../types';
+type UiProps = {
+    disabled?: boolean;
+};
+export type ToggleObjectControl = {
+    type: typeof CONTROL.ToggleObject;
+    /**
+     * Поле, для значения вкл/выкл контрола
+     *
+     * @example 'eipIsNeeded'
+     */
+    switchKey: string;
+    /** Конфигурация тела аккордеона */
+    control: FormControl;
+    onChangeFn?: never;
+} & Pick<BaseControl<UiProps>, 'decoratorProps' | 'uiProps' | 'watchedControls' | 'relateFn' | 'onChangePeriod' | 'canChangeWholePricePeriod'>;
+type ToggleObjectControlUiProps = ToggleObjectControl & {
+    value: FormValues;
+    onChange(value: FormValues): void;
+    watchedValues?: FormValues;
+};
+export declare function ToggleObjectControlUi({ decoratorProps, control, switchKey, relateFn, watchedValues, uiProps, }: ToggleObjectControlUiProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/esm/components/Controls/ToggleObjectControl/ToggleObjectControl.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { MobileAccordionPrimary } from '@sbercloud/uikit-product-mobile-accordion';
+import { Divider } from '@snack-uikit/divider';
+import { Switch } from '@snack-uikit/toggles';
+import { ProductContext, useCalculatorContext, useProductContext } from '../../../contexts';
+import { getValue, setValue } from '../../../utils';
+import { Control } from '../Control';
+import { ObjectDecorator } from '../ObjectDecorator';
+import styles from './styles.module.css';
+export function ToggleObjectControlUi({ decoratorProps, control, switchKey, relateFn, watchedValues, uiProps, }) {
+    var _a, _b;
+    const [expanded, setExpanded] = useState(undefined);
+    const { value: valueProp, onChange: onChangeProp } = useProductContext();
+    const { onAnalyticsClick } = useCalculatorContext();
+    const { decoratorProps: relatedDecoratorProps, uiProps: relatedUiProps } = useMemo(() => { var _a; return (_a = relateFn === null || relateFn === void 0 ? void 0 : relateFn(watchedValues !== null && watchedValues !== void 0 ? watchedValues : {})) !== null && _a !== void 0 ? _a : {}; }, [relateFn, watchedValues]);
+    const value = getValue(valueProp, switchKey);
+    const onChange = (newValue) => {
+        setValue(valueProp, switchKey, newValue);
+        onChangeProp(Object.assign({}, valueProp));
+    };
+    const AdaptiveAccordionPrimary = MobileAccordionPrimary;
+    const visible = (_b = (_a = relatedUiProps === null || relatedUiProps === void 0 ? void 0 : relatedUiProps.visible) !== null && _a !== void 0 ? _a : uiProps === null || uiProps === void 0 ? void 0 : uiProps.visible) !== null && _b !== void 0 ? _b : true;
+    if (!visible) {
+        return null;
+    }
+    return (_jsx(_Fragment, { children: _jsx(AdaptiveAccordionPrimary, { selectionMode: 'single', expanded: expanded, onExpandedChange: setExpanded, children: _jsx(AdaptiveAccordionPrimary.CollapseBlock, { outline: true, id: 'key', header: _jsx(ObjectDecorator, Object.assign({}, decoratorProps, relatedDecoratorProps)), actions: _jsx(Switch, { showIcon: false, checked: value, onChange: checked => {
+                        onAnalyticsClick(String(checked), `toggle-object-control-ui`);
+                        onChange(checked);
+                        checked && setExpanded('key');
+                    } }), children: _jsxs("div", { className: styles.content, children: [_jsx(Divider, {}), _jsx(ProductContext.Provider, { value: {
+                                value: valueProp,
+                                onChange: newValue => {
+                                    setValue(newValue, switchKey, true);
+                                    onChangeProp(Object.assign({}, newValue));
+                                },
+                            }, children: _jsx(Control, { formControl: Object.assign(Object.assign({}, control), { accessorKey: '' }) }) })] }) }) }) }));
+}

package/dist/esm/components/Controls/ToggleObjectControl/index.d.ts

@@ -0,0 +1 @@
+export * from './ToggleObjectControl';

package/dist/esm/components/Controls/ToggleObjectControl/index.js

@@ -0,0 +1 @@
+export * from './ToggleObjectControl';

package/dist/esm/components/Controls/ToggleObjectControl/styles.module.css

@@ -0,0 +1,11 @@
+.content{
+  display:flex;
+  flex-direction:column;
+  margin-top:var(--dimension-1m, 8px);
+  gap:var(--dimension-3m, 24px);
+  padding:var(--dimension-050m, 4px);
+}
+
+.tip{
+  max-width:var(--size-tooltip-container-max-width, 416px);
+}

package/dist/esm/components/Controls/constants.d.ts

@@ -0,0 +1,16 @@
+export declare const CONTROL: {
+    readonly Object: "object";
+    readonly Array: "array";
+    readonly ToggleObject: "toggle-object";
+    readonly SelectSingle: "select-single";
+    readonly SelectMultiple: "select-multiple";
+    readonly Segmented: "segmented";
+    readonly Carousel: "carousel";
+    readonly Toggle: "toggle";
+    readonly ToggleCards: "toggle-cards";
+    readonly Stepper: "stepper";
+    readonly Alert: "alert";
+    readonly Table: "table";
+    readonly Slider: "slider";
+    readonly StepperWithValues: "stepper-with-values";
+};

package/dist/esm/components/Controls/constants.js

@@ -0,0 +1,16 @@
+export const CONTROL = {
+    Object: 'object',
+    Array: 'array',
+    ToggleObject: 'toggle-object',
+    SelectSingle: 'select-single',
+    SelectMultiple: 'select-multiple',
+    Segmented: 'segmented',
+    Carousel: 'carousel',
+    Toggle: 'toggle',
+    ToggleCards: 'toggle-cards',
+    Stepper: 'stepper',
+    Alert: 'alert',
+    Table: 'table',
+    Slider: 'slider',
+    StepperWithValues: 'stepper-with-values',
+};

package/dist/esm/components/Controls/index.d.ts

@@ -0,0 +1,12 @@
+import { AlertControl } from './AlertControl';
+import { ArrayControl } from './ArrayControl';
+import { CarouselControl } from './CarouselControl';
+import { ObjectControl } from './ObjectControl';
+import { SegmentedControl } from './SegmentedControl';
+import { SelectMultipleControl, SelectSingleControl } from './SelectControl';
+import { StepperControl } from './StepperControl';
+import { ToggleControl } from './ToggleControl';
+import { ToggleObjectControl } from './ToggleObjectControl';
+export type { FormControl, FormConfig } from './types';
+export type { CarouselControl, SelectSingleControl, SelectMultipleControl, SegmentedControl, ToggleControl, StepperControl, ObjectControl, ArrayControl, ToggleObjectControl, AlertControl, };
+export * from './constants';

package/dist/esm/components/Controls/index.js

@@ -0,0 +1 @@
+export * from './constants';

package/dist/esm/components/Controls/types.d.ts

@@ -0,0 +1,141 @@
+import { ReactNode } from 'react';
+import { AnyType, FormValues, PRICE_PERIOD } from '../../types';
+import { AlertControl } from './AlertControl';
+import { ArrayControl } from './ArrayControl';
+import { CarouselControl } from './CarouselControl';
+import { ObjectControl } from './ObjectControl';
+import { SegmentedControl } from './SegmentedControl';
+import { SelectMultipleControl, SelectSingleControl } from './SelectControl';
+import { SliderControl } from './SliderControl';
+import { StepperControl } from './StepperControl';
+import { TableControl } from './TableControl';
+import { ToggleCardsControl } from './ToggleCardsControl';
+import { ToggleControl } from './ToggleControl';
+import { ToggleObjectControl } from './ToggleObjectControl';
+export type TooltipPlacement = 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
+/** Базовые параметры декоратора для поля */
+export type BaseDecoratorProps = {
+    /** Лейбл */
+    label?: string;
+    /** Дополнительный текст */
+    hint?: string;
+    /** Вспомогательный тултип */
+    labelTooltip?: ReactNode;
+    /** Расположение тултипа */
+    labelTooltipPlacement?: TooltipPlacement;
+    /** Дополтительный текст сверху */
+    caption?: string;
+    /** Флаг обязательное поле или нет */
+    required?: boolean;
+};
+export type WithVisible<T> = T & {
+    /** Флаг, отрисовывать элемент или нет */
+    visible?: boolean;
+};
+export type BaseControl<UiPropsT, DecoratorPropsT = BaseDecoratorProps> = {
+    /** Пропсы для декоратора
+     *
+     * @example
+     * {
+     *  label: 'Колличество vCpu',
+     *  labelToolTip: 'Виртуальные ядра'
+     * }
+     */
+    decoratorProps: DecoratorPropsT;
+    /**
+     * Специфичные пропсы для контролла
+     *
+     * @example
+     * {
+     *  min: 0;
+     *  max: 100;
+     *  visible: true;
+     * }
+     */
+    uiProps?: WithVisible<UiPropsT>;
+    /**
+     * Поле (полный путь),  куда будет сохраняться значение контролла
+     *
+     * @example 'esc.cpu'
+     */
+    accessorKey: string;
+    /**
+     * Функция для мутирования значения формы, eсли при изменении контролла, нужно изменить "явно" значения других
+     *
+     *
+     * @param {string} value - Новое значение, которое было установлено.
+     *
+     * @param {function(Array<[string, AnyType]>): void} setValue - Функция для установки нового значения.
+     *
+     * @returns {void}
+     *
+     * @example (value, setValue) => {
+     *  // Изменение значения текущего контролла
+     *  const arr = [['currentControlAccessorKey', value]];
+     *  // Некоторое условие
+     *  if(...someRule) {
+     *    // Задаем значения для других контроллов
+     *    arr.push(['someAnotherKey_1', someValue_1]);
+     *    arr.push(['someAnotherKey_2', someValue_2]);
+     * }
+     * // Мутируем конфигурацию формы, чтобы применить изменения
+     * setValue(arr);
+     * }
+     */
+    onChangeFn?(value: string, setValue: (arr: [string, AnyType][]) => void): void;
+    /**
+     * Отслеживаемые "более главные" поля
+     *
+     * @example { storageClass: 'storages[0].obs.storageClass' },
+     */
+    watchedControls?: Record<string, string>;
+    /**
+     * Функция для изменения параметров контролла
+     *
+     * @param watchedValues - вычисленные 'watchedControls'
+     *
+     * @example ({ storageClass }) => {
+     *    if (storageClass !== StorageClassItem.Cold) {
+     *      return {
+     *         uiProps: {
+     *           visible: false,
+     *        },
+     *      };
+     *    }
+     *  }
+     */
+    relateFn?(watchedValues: FormValues): {
+        decoratorProps?: Partial<DecoratorPropsT>;
+        uiProps?: Partial<WithVisible<UiPropsT>>;
+    } | undefined;
+    onChangePeriod?: (value: PRICE_PERIOD, setValue: (arr: [string, AnyType][]) => void) => void;
+    canChangeWholePricePeriod?: boolean;
+};
+export type BaseControlWithItems<ItemT, UiPropsT, DecoratorPropsT = BaseDecoratorProps> = Omit<BaseControl<UiPropsT, DecoratorPropsT>, 'relateFn'> & {
+    /** Массив перечисляемых опций */
+    items: ItemT[];
+    /**
+     * Функция для изменения параметров контролла
+     *
+     * @param watchedValues - вычисленные 'watchedControls'
+     *
+     * @example ({ storageClass }) => {
+     *    if (storageClass !== StorageClassItem.Cold) {
+     *      return {
+     *         uiProps: {
+     *           visible: false,
+     *        },
+     *      };
+     *    }
+     *  }```
+     */
+    relateFn?(watchedValues: FormValues): {
+        decoratorProps?: Partial<DecoratorPropsT>;
+        uiProps?: Partial<WithVisible<UiPropsT>>;
+        items?: ItemT[];
+    } | undefined;
+    onChangePeriod?: (value: PRICE_PERIOD, setValue: (arr: [string, AnyType][]) => void) => void;
+    canChangeWholePricePeriod?: boolean;
+};
+export type FormControl = CarouselControl | SelectSingleControl | SelectMultipleControl | SegmentedControl | ToggleControl | StepperControl | ObjectControl | ArrayControl | ToggleObjectControl | AlertControl | ToggleCardsControl | SliderControl | TableControl;
+export type FormConfig = Omit<ObjectControl, 'type'>;

package/dist/esm/components/Controls/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/Controls/utils.d.ts

@@ -0,0 +1,3 @@
+import { FormValues } from '../../types';
+import { FormControl } from './types';
+export declare function getDefaultValues(controls: Record<string, FormControl>): FormValues;

package/dist/esm/components/Controls/utils.js

@@ -0,0 +1,37 @@
+import { setValue } from '../../utils';
+import { CONTROL } from './constants';
+export function getDefaultValues(controls) {
+    const defaultValue = {};
+    function internalGetDefaultValues(controls) {
+        Object.entries(controls).forEach(([key, control]) => {
+            var _a;
+            if (control) {
+                switch (control.type) {
+                    case CONTROL.Object: {
+                        if (control.defaultValue !== undefined) {
+                            setValue(defaultValue, key, JSON.parse(JSON.stringify(control.defaultValue)));
+                        }
+                        internalGetDefaultValues(control.controls);
+                        break;
+                    }
+                    case CONTROL.ToggleObject: {
+                        setValue(defaultValue, control.switchKey, false);
+                        internalGetDefaultValues({ _: control.control });
+                        break;
+                    }
+                    case CONTROL.Alert: {
+                        break;
+                    }
+                    default: {
+                        if (control.defaultValue !== undefined) {
+                            const restedValue = JSON.parse(JSON.stringify(control.defaultValue));
+                            setValue(defaultValue, (_a = control === null || control === void 0 ? void 0 : control.accessorKey) !== null && _a !== void 0 ? _a : '', restedValue);
+                        }
+                    }
+                }
+            }
+        });
+    }
+    internalGetDefaultValues(controls);
+    return defaultValue;
+}

package/dist/esm/components/Disclaimer/Disclaimer.d.ts

@@ -0,0 +1,5 @@
+type DisclaimerProps = {
+    className?: string;
+};
+export declare function Disclaimer({ className }: DisclaimerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/Disclaimer/Disclaimer.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+import { Typography } from '@snack-uikit/typography';
+import { useCalculatorContext } from '../../contexts';
+import { CALCULATOR_TYPE } from '../../types';
+import { parseKeyToDataTest } from '../../utils';
+import styles from './styles.module.css';
+export function Disclaimer({ className }) {
+    const { layoutType, calculatorType } = useCalculatorContext();
+    const dataTestAttribute = parseKeyToDataTest('disclaimer');
+    return (_jsx("div", { className: cn(styles.footer, className), "data-mobile": layoutType === 'mobile' || undefined, "data-test-id": dataTestAttribute, children: calculatorType !== CALCULATOR_TYPE.Partners && (_jsx(Typography, { family: 'sans', purpose: 'body', size: layoutType === 'mobile' ? 's' : 'm', className: styles.text, children: "\u0420\u0430\u0441\u0441\u0447\u0438\u0442\u044B\u0432\u0430\u0435\u043C\u0430\u044F \u041A\u0430\u043B\u044C\u043A\u0443\u043B\u044F\u0442\u043E\u0440\u043E\u043C \u0441\u0442\u043E\u0438\u043C\u043E\u0441\u0442\u044C \u044F\u0432\u043B\u044F\u0435\u0442\u0441\u044F \u043F\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043B\u044C\u043D\u043E\u0439, \u043E\u0441\u043D\u043E\u0432\u0430\u043D\u043D\u043E\u0439 \u043D\u0430 \u0432\u043D\u0435\u0441\u0435\u043D\u043D\u044B\u0445 \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u0435\u043C \u0434\u0430\u043D\u043D\u044B\u0445, \u0438 \u043D\u0435 \u043C\u043E\u0436\u0435\u0442 \u0440\u0430\u0441\u0446\u0435\u043D\u0438\u0432\u0430\u0442\u044C\u0441\u044F \u043A\u0430\u043A \u043F\u0440\u0435\u0434\u043B\u043E\u0436\u0435\u043D\u0438\u0435 \u0437\u0430\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0434\u043E\u0433\u043E\u0432\u043E\u0440 \u043F\u043E \u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0435\u043D\u043D\u043E\u0439 \u041A\u0430\u043B\u044C\u043A\u0443\u043B\u044F\u0442\u043E\u0440\u043E\u043C \u0446\u0435\u043D\u0435 (\u043D\u0435\u00A0\u044F\u0432\u043B\u044F\u0435\u0442\u0441\u044F \u043E\u0444\u0435\u0440\u0442\u043E\u0439)." })) }));
+}

package/dist/esm/components/Disclaimer/index.d.ts

@@ -0,0 +1 @@
+export * from './Disclaimer';

package/dist/esm/components/Disclaimer/index.js

@@ -0,0 +1 @@
+export * from './Disclaimer';

package/dist/esm/components/Disclaimer/styles.module.css

@@ -0,0 +1,12 @@
+.footer{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-3m, 24px);
+  max-width:800px;
+  text-align:justify;
+}
+
+.text{
+  text-align:left;
+}

package/dist/esm/components/HeaderContainer/index.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+type HeaderContainerProps = {
+    children: ReactNode;
+    dataTestId?: string;
+};
+export declare const HeaderContainer: import("react").ForwardRefExoticComponent<HeaderContainerProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/esm/components/HeaderContainer/index.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { LAYOUT_TYPE } from '@sbercloud/uikit-product-utils';
+import { useCalculatorContext } from '../../contexts';
+import styles from './styles.module.css';
+export const HeaderContainer = forwardRef(({ children, dataTestId }, ref) => {
+    const { layoutType } = useCalculatorContext();
+    const isTablet = layoutType !== LAYOUT_TYPE.Desktop && layoutType !== LAYOUT_TYPE.DesktopSmall;
+    const isMobile = layoutType === LAYOUT_TYPE.Mobile;
+    return (_jsx("div", { className: styles.header, "data-mobile": isMobile || undefined, "data-tablet": isTablet || undefined, ref: ref, "data-test-id": dataTestId, children: children }));
+});

package/dist/esm/components/HeaderContainer/styles.module.css

@@ -0,0 +1,20 @@
+.header{
+  border-bottom:solid 1px var(--sys-neutral-decor-default, #dde0ea);
+  display:flex;
+  gap:var(--dimension-2m, 16px);
+  align-items:center;
+  justify-content:space-between;
+  box-sizing:border-box;
+  padding:var(--dimension-4m, 32px);
+  height:104px;
+}
+.header[data-tablet]{
+  flex-direction:column;
+  height:auto;
+  align-items:inherit;
+  justify-content:inherit;
+  padding:var(--dimension-3m, 24px);
+}
+.header[data-mobile]{
+  padding:var(--dimension-2m, 16px);
+}

package/dist/esm/components/PriceSummary/PriceSummary.d.ts

@@ -0,0 +1,10 @@
+export declare enum SummaryAppearance {
+    Welcome = "welcome",
+    Default = "default"
+}
+type PriceSummaryProps = {
+    className?: string;
+    appearance?: SummaryAppearance;
+};
+export declare function PriceSummary({ className, appearance }: PriceSummaryProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/PriceSummary/PriceSummary.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useDeferredValue, useMemo, useRef } from 'react';
+import { PlusSVG } from '@sbercloud/uikit-product-icons';
+import { LAYOUT_TYPE } from '@sbercloud/uikit-product-utils';
+import { ButtonFilled } from '@snack-uikit/button';
+import { Scroll } from '@snack-uikit/scroll';
+import { Tag } from '@snack-uikit/tag';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+import { PLATFORM } from '../../constants';
+import { useCalculatorContext } from '../../contexts';
+import { useProductClick, useProductDelete } from '../../hooks';
+import { formatNumber, getPrice, parseKeyToDataTest } from '../../utils';
+import { PricePeriodSelect, ProductCard, ProductListActions } from './components';
+import { useScrollListToActiveProduct } from './hooks';
+import styles from './styles.module.css';
+import { getTotalPrice, transformValueToProductCardData } from './utils';
+export var SummaryAppearance;
+(function (SummaryAppearance) {
+    SummaryAppearance["Welcome"] = "welcome";
+    SummaryAppearance["Default"] = "default";
+})(SummaryAppearance || (SummaryAppearance = {}));
+const PlatformSale = {
+    [PLATFORM.Evolution]: 25,
+    [PLATFORM.Advanced]: 25,
+    [PLATFORM.VmWare]: 20,
+};
+export function PriceSummary({ className, appearance = SummaryAppearance.Default }) {
+    const { layoutType, pricePeriod, setCatalogOpen, calculatorType, selectedProduct, products, config: { products: productsProp, platforms }, actions: { onCatalogOpen, onStartClick }, } = useCalculatorContext();
+    const isMobile = layoutType !== LAYOUT_TYPE.Desktop && layoutType !== LAYOUT_TYPE.DesktopSmall;
+    const isPartners = calculatorType === 'partners';
+    const TitleComponent = isMobile ? Typography.SansTitleL : Typography.SansHeadlineS;
+    const total = getPrice({ price: getTotalPrice(products), pricePeriod, partners: isPartners });
+    const productCards = useMemo(() => transformValueToProductCardData(productsProp, products), [products, productsProp]);
+    const hasPayaGo = useMemo(() => {
+        const payaProducts = Object.values(productsProp).filter(product => product.hasPayaGo);
+        return Object.keys(products).some(productId => payaProducts.find(product => product.id === productId));
+    }, [products, productsProp]);
+    const scrollRef = useRef(null);
+    const activeRef = useRef(null);
+    useScrollListToActiveProduct({ scrollRef, activeRef });
+    const handleProductDelete = useProductDelete();
+    const handleProductClick = useProductClick();
+    const deferredTotal = useDeferredValue(total);
+    const handleCatalogOpen = () => {
+        onCatalogOpen === null || onCatalogOpen === void 0 ? void 0 : onCatalogOpen();
+        setCatalogOpen(true);
+    };
+    const handleStartCatalog = () => {
+        onStartClick === null || onStartClick === void 0 ? void 0 : onStartClick();
+        setCatalogOpen(true);
+    };
+    const serviceButtonProps = {
+        size: 'm',
+        icon: _jsx(PlusSVG, {}),
+        label: 'Добавить сервис',
+        'data-test-id': parseKeyToDataTest('price', 'summary-button'),
+    };
+    return (_jsxs("div", { className: cn(styles.priceSummary, className), "data-mobile": isMobile || undefined, "data-test-id": parseKeyToDataTest('price', 'summary'), children: [_jsxs("div", { className: styles.headline, children: [_jsx(TitleComponent, { "data-test-id": parseKeyToDataTest('price', 'summary-title'), children: "\u0420\u0430\u0441\u0447\u0435\u0442" }), appearance === SummaryAppearance.Welcome && (_jsx(ButtonFilled, Object.assign({ appearance: 'primary', onClick: handleStartCatalog }, serviceButtonProps))), appearance === SummaryAppearance.Default && (_jsx(ButtonFilled, Object.assign({ appearance: 'primary', fullWidth: isMobile, onClick: handleCatalogOpen }, serviceButtonProps)))] }), _jsx(Scroll, { className: styles.scroll, ref: scrollRef, "data-test-id": parseKeyToDataTest('price', 'summary-products'), children: _jsx("div", { className: styles.content, children: Object.entries(productCards)
+                        .filter(([, products]) => products.length > 0)
+                        .map(([platformId, cards]) => {
+                        var _a;
+                        return (_jsxs("div", { className: styles.platform, children: [_jsxs(Typography.SansTitleM, { "data-test-id": parseKeyToDataTest('price', 'summary-platform'), children: ["\u041F\u043B\u0430\u0442\u0444\u043E\u0440\u043C\u0430 ", (_a = platforms.find(item => item.id === platformId)) === null || _a === void 0 ? void 0 : _a.label, ' ', isPartners && _jsx(Tag, { label: `${PlatformSale[platformId]}% скидка`, appearance: 'red', size: 'xs' })] }), _jsx("div", { className: styles.body, children: cards.map(({ id, idx, label }) => (_jsx("div", { ref: (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.id) === id && (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.idx) === idx ? activeRef : undefined, children: _jsx(ProductCard, { id: id, idx: idx, label: label, selectedProduct: selectedProduct, onProductClick: handleProductClick, onProductDelete: handleProductDelete }) }, id + idx))) })] }, platformId));
+                    }) }) }), _jsxs("div", { className: styles.footer, "data-test-id": parseKeyToDataTest('price', 'summary-footer'), children: [_jsxs("div", { children: [_jsx("div", { className: styles.caption, "data-test-id": parseKeyToDataTest('price', 'summary-title'), children: "\u041E\u0431\u0449\u0430\u044F \u0441\u0442\u043E\u0438\u043C\u043E\u0441\u0442\u044C \u0441\u00A0\u041D\u0414\u0421" }), _jsxs("div", { className: styles.footerHeadline, children: [_jsxs("div", { className: styles.total, "data-test-id": parseKeyToDataTest('price', 'summary-footer-total'), children: [_jsx(Typography.SansHeadlineS, { children: _jsx(TruncateString, { text: formatNumber(deferredTotal), maxLines: 1 }) }), _jsx(Typography.SansTitleL, { children: "\u20BD" })] }), _jsx(PricePeriodSelect, { hasPayaGo: hasPayaGo })] })] }), _jsx(ProductListActions, { disabled: appearance === SummaryAppearance.Welcome })] })] }));
+}