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

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { FieldSlider } from '@snack-uikit/fields';
+import { parseKeyToDataTest } from '../../../utils';
+export function SliderControlUi({ decoratorProps, uiProps, onChange, items: itemsProp, watchedValues, relateFn, accessorKey, value, }) {
+    var _a, _b;
+    const { items: relatedItems, 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 items = useMemo(() => relatedItems !== null && relatedItems !== void 0 ? relatedItems : itemsProp, [itemsProp, relatedItems]);
+    const dataTestAttribute = parseKeyToDataTest('slider', accessorKey);
+    const { marks } = useMemo(() => {
+        const marks = items
+            .sort((a, b) => a - b)
+            .reduce((res, item, idx) => {
+            res[idx + 1] = item;
+            return res;
+        }, {});
+        return { marks };
+    }, [items]);
+    const textInputValueFormatter = (value) => String(marks[value]);
+    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;
+    }
+    const currentValue = value ? items.findIndex(item => String(item) === value) + 1 : 1;
+    return (_jsx(FieldSlider, Object.assign({ range: false, size: 'm', value: currentValue, onChange: newValue => {
+            const valueByKey = String(marks[newValue]);
+            onChange === null || onChange === void 0 ? void 0 : onChange(valueByKey);
+        }, marks: marks, min: 1, max: items.length, step: null, textInputFormatter: textInputValueFormatter, "data-test-id": dataTestAttribute }, uiProps, relatedUiProps, decoratorProps, relatedDecoratorProps)));
+}

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

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

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

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

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

@@ -0,0 +1,26 @@
+import { FieldStepperProps } from '@snack-uikit/fields';
+import { FormValues } from '../../../types';
+import { CONTROL } from '../constants';
+import { BaseControl, WithVisible } from '../types';
+type StepperUiProps = Pick<FieldStepperProps, 'step' | 'min' | 'max' | 'allowMoreThanLimits' | 'disabled' | 'postfix' | 'size'> & {
+    showHint?: boolean;
+    /**
+     * Множитель для значения
+     * Например: надо реальное значение это 3 млн, а отображать надо как 3
+     */
+    multiplier?: number;
+    /** Массив допустимых значений. Если указан, то step игнорируется */
+    allowedValues?: number[];
+};
+export type StepperControl = {
+    type: typeof CONTROL.Stepper;
+    defaultValue?: number;
+    uiProps: WithVisible<StepperUiProps>;
+} & Omit<BaseControl<StepperUiProps>, 'uiProps'>;
+export type StepperControlUiProps = StepperControl & {
+    value?: number;
+    onChange?(value: number): void;
+    watchedValues?: FormValues;
+};
+export declare function StepperControlUi({ decoratorProps, uiProps, value, onChange, watchedValues, relateFn, accessorKey, }: StepperControlUiProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { FieldDecorator, FieldStepper } from '@snack-uikit/fields';
+import { parseKeyToDataTest } from '../../../utils';
+import { formatNumber } from '../../../utils/formatNumber';
+import styles from './styles.module.css';
+export function StepperControlUi({ decoratorProps, uiProps, value, onChange, watchedValues, relateFn, accessorKey, }) {
+    var _a, _b, _c, _d;
+    const [innerValue, setInnerValue] = useState(value !== null && value !== void 0 ? value : 0);
+    const [selectedIdx, setSelectedIdx] = useState(0);
+    const dataTestAttribute = parseKeyToDataTest('stepper', accessorKey);
+    useEffect(() => {
+        setInnerValue(value !== null && value !== void 0 ? value : 0);
+    }, [value]);
+    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 { min, max, multiplier = 1, step = 1, allowedValues } = Object.assign(Object.assign({}, uiProps), relatedUiProps);
+    useEffect(() => {
+        if (allowedValues) {
+            const idx = allowedValues.findIndex(item => item === value);
+            setSelectedIdx(idx >= 0 ? idx : 0);
+        }
+    }, [allowedValues, value]);
+    useEffect(() => {
+        if (min && Number((value !== null && value !== void 0 ? value : 0) / multiplier) < min) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(min * multiplier);
+            return;
+        }
+        if (max && Number((value !== null && value !== void 0 ? value : 0) / multiplier) > max) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(max * multiplier);
+            return;
+        }
+    }, [value, onChange, min, max, multiplier]);
+    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;
+    const showHint = (_d = (_c = relatedUiProps === null || relatedUiProps === void 0 ? void 0 : relatedUiProps.showHint) !== null && _c !== void 0 ? _c : uiProps.showHint) !== null && _d !== void 0 ? _d : true;
+    const handleValueChange = (rawInnerValue) => {
+        const innerValue = Number(rawInnerValue !== null && rawInnerValue !== void 0 ? rawInnerValue : 0);
+        if (allowedValues) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(innerValue);
+            return;
+        }
+        if (min && innerValue / multiplier <= min) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(min * multiplier);
+            setInnerValue(min);
+            return;
+        }
+        if (max && innerValue / multiplier >= max) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(max * multiplier);
+            setInnerValue(max);
+            return;
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(innerValue);
+    };
+    if (!visible) {
+        return null;
+    }
+    return (_jsxs(FieldDecorator, Object.assign({}, decoratorProps, relatedDecoratorProps, { size: 'm', children: [_jsx("div", { children: _jsx(FieldStepper, Object.assign({ size: 'm', value: (innerValue !== null && innerValue !== void 0 ? innerValue : 0) / multiplier, postfix: uiProps.postfix, onChange: value => {
+                        if (allowedValues) {
+                            const currentIdx = selectedIdx;
+                            const isIncrement = value > innerValue / multiplier;
+                            const newIdx = isIncrement
+                                ? Math.min(currentIdx + 1, allowedValues.length - 1)
+                                : Math.max(currentIdx - 1, 0);
+                            setSelectedIdx(newIdx);
+                            handleValueChange(allowedValues[newIdx] * multiplier);
+                            return;
+                        }
+                        if (Math.abs(value - innerValue / multiplier) === step) {
+                            handleValueChange === null || handleValueChange === void 0 ? void 0 : handleValueChange(value * multiplier);
+                            return;
+                        }
+                        setInnerValue === null || setInnerValue === void 0 ? void 0 : setInnerValue(value * multiplier);
+                    }, onBlur: () => {
+                        handleValueChange(innerValue);
+                    }, allowMoreThanLimits: false, "data-test-id": dataTestAttribute }, uiProps, relatedUiProps)) }), showHint && (_jsxs("div", { className: styles.hintWrapper, children: [_jsx("span", { className: styles.hint, children: formatNumber(min) }), _jsx("span", { className: styles.hint, children: formatNumber(max) })] }))] })));
+}

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

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

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

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

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

@@ -0,0 +1,18 @@
+.hintWrapper{
+  display:flex;
+  justify-content:space-between;
+  align-items:flex-start;
+  flex:1;
+  box-sizing:border-box;
+  padding:var(--dimension-050m, 4px);
+}
+
+.hint{
+  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);
+}

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

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import { FieldStepperProps } from '@snack-uikit/fields';
+import { FormValues, Price } from '../../../types';
+import { CONTROL } from '../constants';
+import { BaseDecoratorProps, TooltipPlacement } from '../types';
+type TableRow = {
+    label: string;
+    labelTooltip?: ReactNode;
+    labelTooltipPlacement?: TooltipPlacement;
+    accessorKey: string;
+    priceAccessorKey?: string;
+    allowedValues?: number[];
+    uiProps?: Pick<FieldStepperProps, 'step' | 'min' | 'max' | 'disabled' | 'postfix'>;
+};
+export type TableControl = {
+    type: typeof CONTROL.Table;
+    defaultValue?: FormValues;
+    accessorKey: string;
+    decoratorProps?: Pick<BaseDecoratorProps, 'label' | 'labelTooltip' | 'labelTooltipPlacement'>;
+    counter?: {
+        accessorKey: string;
+        label: string;
+        uiProps?: Pick<FieldStepperProps, 'step' | 'min' | 'max' | 'disabled' | 'postfix'>;
+    };
+    rows: TableRow[];
+    onChangeFn?: never;
+    relateFn?: never;
+    watchedControls?: never;
+};
+export type TableControlUiProps = {
+    value?: string;
+    onChange?(value?: string): void;
+    watchedValues?: FormValues;
+    priceList: Record<string, Price>;
+} & TableControl;
+export declare function TableControlUi({ rows, counter, decoratorProps, value: valueProp, onChange: onChangeProp, priceList, accessorKey, }: TableControlUiProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { Scroll } from '@snack-uikit/scroll';
+import { QuestionTooltip } from '@snack-uikit/tooltip';
+import { Typography } from '@snack-uikit/typography';
+import { useAdaptive } from '../../../hooks';
+import { formatNumber, getPrice, getValue, setValue } from '../../../utils';
+import { ObjectDecorator } from '../ObjectDecorator';
+import { StepperControlUi } from '../StepperControl';
+import { StepperWithAllowedValues } from './helperComponents';
+import styles from './styles.module.css';
+export function TableControlUi({ rows, counter, decoratorProps, value: valueProp, onChange: onChangeProp, priceList, accessorKey, }) {
+    const { isMobile } = useAdaptive();
+    const onChange = (accessorKey) => (newValue) => {
+        setValue(valueProp, accessorKey, newValue);
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(valueProp);
+    };
+    return (_jsxs("div", { className: styles.wrapper, children: [_jsxs("div", { className: styles.headline, "data-mobile": isMobile || undefined, children: [_jsx(ObjectDecorator, Object.assign({}, decoratorProps)), counter && (_jsxs("div", { className: styles.counter, children: [_jsxs(Typography.SansBodyS, { children: [" ", counter.label] }), _jsx(StepperControlUi, { value: getValue(valueProp, counter.accessorKey), onChange: onChange(counter.accessorKey), uiProps: Object.assign({ min: 1, size: 's', showHint: false }, counter.uiProps), accessorKey: accessorKey, type: 'stepper', decoratorProps: {} })] }))] }), _jsx("div", { className: styles.table, children: _jsxs(Scroll, { barHideStrategy: 'never', children: [_jsxs("div", { className: cn(styles.row, styles.header), children: [_jsx("div", { className: styles.cell, children: "\u0420\u0435\u0441\u0443\u0440\u0441" }), _jsx("div", { className: styles.cell, children: "\u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E" }), _jsx("div", { className: styles.cell, children: "\u0421\u0442\u043E\u0438\u043C\u043E\u0441\u0442\u044C \u0432 \u043C\u0435\u0441\u044F\u0446" })] }), rows.map(({ accessorKey, label, labelTooltip, labelTooltipPlacement, uiProps, allowedValues }) => (_jsxs("div", { className: styles.row, children: [_jsx("div", { className: styles.cell, children: _jsxs("span", { children: [label, "\u00A0", labelTooltip && (_jsx("span", { className: styles.tipWrapperInline, children: _jsx(QuestionTooltip, { "data-pointer": true, tip: labelTooltip, placement: labelTooltipPlacement, size: 'xs', tabIndex: -1 }) }))] }) }), _jsx("div", { className: styles.cell, children: allowedValues ? (_jsx(StepperWithAllowedValues, Object.assign({ value: getValue(valueProp, accessorKey), onChange: onChange(accessorKey), allowedValues: allowedValues }, uiProps))) : (_jsx(StepperControlUi, { value: getValue(valueProp, accessorKey), onChange: onChange(accessorKey), uiProps: Object.assign({ showHint: false, min: 0, size: 's' }, uiProps), type: 'stepper', decoratorProps: {}, accessorKey: accessorKey })) }), _jsx("div", { className: styles.cell, children: formatNumber(getPrice({
+                                        price: getValue(priceList, accessorKey),
+                                        pricePeriod: 'month',
+                                    })) + ' ₽' })] }, accessorKey)))] }) })] }));
+}

package/dist/esm/components/Controls/TableControl/helperComponents/StepperWithAllowedValues.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+type StepperWithAllowedValuesProps = {
+    value: number;
+    onChange(value: number): void;
+    allowedValues: number[];
+    postfix?: ReactNode;
+};
+export declare function StepperWithAllowedValues({ value, onChange, allowedValues, postfix }: StepperWithAllowedValuesProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/Controls/TableControl/helperComponents/StepperWithAllowedValues.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { MinusSVG, PlusSVG } from '@sbercloud/uikit-product-icons';
+import { ButtonFunction } from '@snack-uikit/button';
+import { InputPrivate } from '@snack-uikit/input-private';
+import styles from './styles.module.css';
+export function StepperWithAllowedValues({ value, onChange, allowedValues, postfix }) {
+    const [selectedIdx, setSelectedIdx] = useState(allowedValues.findIndex(item => item === value));
+    return (_jsxs("div", { className: styles.input, children: [_jsx(ButtonFunction, { icon: _jsx(MinusSVG, {}), onClick: () => {
+                    const newIdx = Math.max(selectedIdx - 1, 0);
+                    setSelectedIdx(newIdx);
+                    onChange(allowedValues[newIdx]);
+                } }), _jsxs("div", { className: styles.content, children: [_jsx("div", { style: {
+                            width: `${allowedValues[selectedIdx].toString().length * 8}px`,
+                        }, children: _jsx(InputPrivate, { readonly: true, value: String(allowedValues[selectedIdx]) }) }), postfix && _jsx("div", { className: styles.postfix, children: postfix })] }), _jsx(ButtonFunction, { icon: _jsx(PlusSVG, {}), onClick: () => {
+                    const newIdx = Math.min(selectedIdx + 1, allowedValues.length - 1);
+                    setSelectedIdx(newIdx);
+                    onChange(allowedValues[newIdx]);
+                } })] }));
+}

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

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

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

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

package/dist/esm/components/Controls/TableControl/helperComponents/styles.module.css

@@ -0,0 +1,64 @@
+.input{
+  border-radius:var(--radius-fields-s, 4px);
+  border-width:var(--border-width-fields-single, 1px);
+  padding-left:var(--space-fields-single-line-container-s-left, 7px);
+  gap:var(--space-fields-single-line-container-s-gap, 4px);
+  padding-right:var(--space-fields-single-line-container-s-right, 7px);
+  height:var(--size-fields-s, 32px);
+  display:grid;
+  grid-template-columns:auto 1fr auto;
+  align-items:center;
+  width:100%;
+  box-sizing:border-box;
+  border-style:solid;
+  border-color:var(--sys-neutral-decor-default, #dde0ea);
+  padding:0 2px;
+  gap:0;
+}
+.input:hover{
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+}
+.input:focus-within{
+  outline-width:var(--border-state-focus-m-border-width, 3px);
+  outline-style:var(--border-state-focus-m-border-style, solid);
+  outline-color:var(--border-state-focus-m-border-color, );
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-primary-accent-default, #389f74);
+  outline-color:var(--sys-primary-decor-activated, #99d7ba);
+}
+.input .content{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+  width:100%;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  gap:var(--dimension-050m, 4px);
+}
+.input .content input:-moz-read-only{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+  color:var(--sys-neutral-text-main, #41424e) !important;
+  cursor:default;
+}
+.input .content input:read-only{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+  color:var(--sys-neutral-text-main, #41424e) !important;
+  cursor:default;
+}
+.input .postfix{
+  color:var(--sys-neutral-text-support, #6d707f);
+}

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

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

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

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

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

@@ -0,0 +1,93 @@
+.tipWrapper{
+  display:inline-flex;
+  height:16px;
+  align-items:center;
+}
+
+.tipWrapperInline{
+  display:inline-flex;
+  height:16px;
+}
+.tipWrapperInline > span{
+  transform:translate(0, 3px);
+}
+
+.table{
+  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);
+  border-radius:var(--radius-table-container, 4px);
+  border:solid var(--border-width-table, 1px) var(--sys-neutral-decor-default, #dde0ea);
+  box-sizing:border-box;
+}
+
+.row{
+  border-top:var(--border-width-table, 1px);
+  border-bottom:var(--border-width-table, 1px);
+  min-height:var(--size-table-line-height, 40px);
+  height:auto;
+  min-height:var(--size-table-line-height, 40px);
+  display:grid;
+  grid-template-columns:2fr minmax(186px, 1fr) minmax(160px, 1fr);
+  align-items:center;
+  box-sizing:border-box;
+  min-width:500px;
+}
+
+.cell{
+  gap:var(--space-table-cell-gap, 4px);
+  padding-left:var(--space-table-cell-padding-horizontal, 12px);
+  padding-right:var(--space-table-cell-padding-horizontal, 12px);
+  padding-top:var(--space-table-cell-padding-vertical, 12px);
+  padding-bottom:var(--space-table-cell-padding-vertical, 12px);
+  box-sizing:border-box;
+  display:flex;
+  height:100%;
+  width:100%;
+  align-items:center;
+  color:var(--sys-neutral-text-main, #41424e);
+  padding-top:2px;
+  padding-bottom:2px;
+  border-right:solid var(--border-width-table, 1px) var(--sys-neutral-decor-default, #dde0ea);
+  border-bottom:solid var(--border-width-table, 1px) var(--sys-neutral-decor-default, #dde0ea);
+}
+
+.cell:last-child{
+  border-right:none;
+}
+
+.row.header .cell{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}
+
+.row:last-child .cell{
+  border-bottom:none;
+}
+
+.headline{
+  display:flex;
+  justify-content:space-between;
+  align-items:center;
+  gap:8px;
+  flex-direction:row;
+}
+.headline[data-mobile]{
+  align-items:flex-start;
+  flex-direction:column;
+}
+
+.counter{
+  display:grid;
+  grid-template-columns:1fr 120px;
+  gap:24px;
+  align-items:center;
+}
+
+.wrapper{
+  display:flex;
+  flex-direction:column;
+  gap:8px;
+}

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

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export type ToggleCardItem = {
+    value: string;
+    label?: string;
+    description?: ReactNode;
+    disabled?: boolean;
+    disabledReason?: ReactNode;
+    dataTestId?: string;
+};
+export declare function ToggleCard({ value, label, description, disabled, disabledReason, dataTestId }: ToggleCardItem): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Card } from '@snack-uikit/card';
+import { useToggleGroup } from '@snack-uikit/toggles';
+import { Tooltip } from '@snack-uikit/tooltip';
+import styles from './styles.module.css';
+export function ToggleCard({ value, label, description, disabled, disabledReason, dataTestId }) {
+    const { isChecked, handleClick } = useToggleGroup({ value });
+    return (_jsx(Tooltip, { open: disabled && disabled ? undefined : false, tip: disabledReason, children: _jsx(Card, { outline: true, checked: isChecked, onClick: handleClick, className: styles.card, disabled: disabled, "data-test-id": dataTestId, size: 's', children: _jsx(Card.Header, { title: label !== null && label !== void 0 ? label : value, description: description, truncate: {
+                    title: 10,
+                    description: 20,
+                } }) }) }));
+}

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

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

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

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

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

@@ -0,0 +1,10 @@
+.card{
+  min-height:100%;
+}
+.card div{
+  min-height:100%;
+  display:flex;
+  flex-direction:column;
+  flex:1;
+  width:100%;
+}

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

@@ -0,0 +1,18 @@
+import { CarouselProps } from '@snack-uikit/carousel';
+import { FormValues } from '../../../types';
+import { CONTROL } from '../constants';
+import { ToggleCardItem } from '../ToggleCard';
+import { BaseControlWithItems } from '../types';
+type UiProps = Pick<CarouselProps, 'transition' | 'scrollBy' | 'className' | 'swipe' | 'infiniteScroll' | 'arrows' | 'showItems' | 'pagination' | 'gap'>;
+export type ToggleCardsControl = {
+    type: typeof CONTROL.ToggleCards;
+    accessorKey?: string;
+    defaultValue?: string;
+} & BaseControlWithItems<ToggleCardItem, UiProps>;
+export type ToggleCardsControlUiProps = {
+    value?: string;
+    onChange?(value: string): void;
+    watchedValues?: FormValues;
+} & ToggleCardsControl;
+export declare function ToggleCardsControlUi(props: ToggleCardsControlUiProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { useEffect, useMemo } from 'react';
+import { FieldDecorator } from '@snack-uikit/fields';
+import { ToggleGroup } from '@snack-uikit/toggles';
+import { useAdaptive } from '../../../hooks';
+import { parseKeyToDataTest } from '../../../utils';
+import { CarouselControlUi } from '../CarouselControl';
+import { CONTROL } from '../constants';
+import { ToggleCard } from '../ToggleCard';
+import styles from './styles.module.css';
+function ToggleCardsControlUiDesktop({ items: itemsProp, uiProps, value, onChange, decoratorProps, relateFn, watchedValues, accessorKey, }) {
+    var _a, _b;
+    const { items: relatedItems, 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 items = useMemo(() => relatedItems !== null && relatedItems !== void 0 ? relatedItems : itemsProp, [itemsProp, relatedItems]);
+    const dataTestAttribute = parseKeyToDataTest('toggle-cards', accessorKey);
+    useEffect(() => {
+        var _a;
+        if (!items.find(item => String(item.value) === String(value))) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(String((_a = items === null || items === void 0 ? void 0 : items[0]) === null || _a === void 0 ? void 0 : _a.value));
+        }
+    }, [value, onChange, items, relatedItems]);
+    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("div", { className: styles.carousel, children: _jsx(FieldDecorator, Object.assign({ size: 'm' }, decoratorProps, relatedDecoratorProps, { "data-test-id": dataTestAttribute, children: _jsx(ToggleGroup, { selectionMode: 'single', value: value, onChange: value => {
+                    value && (onChange === null || onChange === void 0 ? void 0 : onChange(value));
+                }, children: _jsx("div", { className: styles.group, children: items.map(item => (_createElement(ToggleCard, Object.assign({}, item, { key: item.value })))) }) }) })) }));
+}
+export function ToggleCardsControlUi(props) {
+    const { isMobile } = useAdaptive();
+    if (isMobile) {
+        return _jsx(CarouselControlUi, Object.assign({}, props, { type: CONTROL.Carousel }));
+    }
+    return _jsx(ToggleCardsControlUiDesktop, Object.assign({}, props));
+}

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

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

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

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

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

@@ -0,0 +1,38 @@
+.carousel{
+  position:relative;
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-1m, 8px);
+}
+.carousel .headline{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+}
+.carousel .headline .label{
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.carousel .headline .label .tip{
+  transform:translateY(var(--dimension-050m, 4px));
+  margin-left:var(--dimension-050m, 4px);
+}
+.carousel ul{
+  margin:0;
+  padding:0 0 0 var(--dimension-2m, 16px);
+  list-style-type:disc;
+}
+.carousel li{
+  list-style-type:disc;
+}
+
+.group{
+  display:grid;
+  grid-template-columns:1fr 1fr;
+  gap:var(--dimension-2m, 16px);
+}

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

@@ -0,0 +1,18 @@
+import { AnyType, FormValues, PRICE_PERIOD } from '../../../types';
+import { CONTROL } from '../constants';
+import { BaseControl } from '../types';
+import { SwitchRowProps } from './components';
+type UiProps = Pick<SwitchRowProps, 'className' | 'disabled' | 'description'>;
+export type ToggleControl = {
+    type: typeof CONTROL.Toggle;
+    defaultValue?: boolean;
+} & BaseControl<UiProps>;
+export type ToggleControlUiProps = ToggleControl & {
+    value?: boolean;
+    onChange?(value: boolean): void;
+    onChangePeriod?: (value: PRICE_PERIOD, setValue: (arr: [string, AnyType][]) => void) => void;
+    canChangeWholePricePeriod?: boolean;
+    watchedValues?: FormValues;
+};
+export declare function ToggleControlUi({ decoratorProps, uiProps, value, onChange, watchedValues, relateFn, accessorKey, }: ToggleControlUiProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { parseKeyToDataTest } from '../../../utils';
+import { SwitchRow } from './components';
+const noop = () => { };
+export function ToggleControlUi({ decoratorProps, uiProps, value, onChange, watchedValues, relateFn, accessorKey, }) {
+    var _a, _b;
+    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 dataTestAttribute = parseKeyToDataTest('toggle', accessorKey);
+    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(SwitchRow, Object.assign({ checked: value || false, onChange: onChange !== null && onChange !== void 0 ? onChange : noop, dataTestId: dataTestAttribute }, decoratorProps, relatedDecoratorProps, uiProps, relatedUiProps)));
+}

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

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { TooltipPlacement } from '../../types';
+export type SwitchRowProps = {
+    label?: string;
+    description?: string;
+    checked: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    onChange(checked: boolean): void;
+    labelTooltip?: ReactNode;
+    labelTooltipPlacement?: TooltipPlacement;
+    disabledToggleTip?: ReactNode;
+    className?: string;
+    disableTitleTruncate?: boolean;
+    dataTestId: string;
+};
+export declare function SwitchRow({ label, description, checked, disabled, onChange, labelTooltip, labelTooltipPlacement, className, disabledToggleTip, loading, dataTestId, ...rest }: SwitchRowProps): import("react/jsx-runtime").JSX.Element;