@itcase/ui 1.8.72 → 1.8.74
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{DatePicker_cjs_C5Scs-GL.js → DatePicker_cjs_DPe3TnXs.js} +1 -1
- package/dist/{DatePicker_es_Cn7l4eD0.js → DatePicker_es_DIFs7Wgs.js} +1 -1
- package/dist/Group_cjs_GqR99U0L.js +59 -0
- package/dist/Group_es_Bo7Y6JwT.js +55 -0
- package/dist/{Input_cjs_BGLd0EQu.js → Input_cjs_DSpBwtPv.js} +28 -3
- package/dist/{Input_es_D2mNCqiH.js → Input_es_3C_YhQFo.js} +28 -3
- package/dist/cjs/components/Avatar.js +1 -1
- package/dist/cjs/components/AvatarStack.js +2 -2
- package/dist/cjs/components/Checkmark.js +9 -0
- package/dist/cjs/components/Dadata.js +1 -1
- package/dist/cjs/components/DatePeriod.js +2 -2
- package/dist/cjs/components/DatePicker.js +2 -2
- package/dist/cjs/components/Drawer/stories/__mock__.js +10 -0
- package/dist/cjs/components/Drawer.js +2 -2
- package/dist/cjs/components/Group.js +1 -1
- package/dist/cjs/components/Input.js +1 -1
- package/dist/cjs/components/Radio.js +33 -8
- package/dist/cjs/components/Response.js +1 -1
- package/dist/cjs/components/Select.js +1 -1
- package/dist/cjs/components/Switch.js +6 -16
- package/dist/cjs/components/Textarea.js +28 -3
- package/dist/components/Avatar.js +1 -1
- package/dist/components/AvatarStack.js +2 -2
- package/dist/components/Checkmark.js +9 -0
- package/dist/components/Dadata.js +1 -1
- package/dist/components/DatePeriod.js +2 -2
- package/dist/components/DatePicker.js +2 -2
- package/dist/components/Drawer/stories/__mock__.js +8 -0
- package/dist/components/Drawer.js +2 -2
- package/dist/components/Group.js +1 -1
- package/dist/components/Input.js +1 -1
- package/dist/components/Radio.js +33 -8
- package/dist/components/Response.js +1 -1
- package/dist/components/Select.js +1 -1
- package/dist/components/Switch.js +6 -16
- package/dist/components/Textarea.js +28 -3
- package/dist/css/components/Input/Input.css +0 -4
- package/dist/css/components/Textarea/Textarea.css +0 -4
- package/dist/types/components/Avatar/appearance/avatarShape.d.ts +2 -2
- package/dist/types/components/Checkmark/appearance/checkmarkSurface.d.ts +9 -0
- package/dist/types/components/Input/appearance/inputShape.d.ts +25 -0
- package/dist/types/components/Radio/Radio.appearance.d.ts +22 -0
- package/dist/types/components/Radio/appearance/radioShape.d.ts +25 -0
- package/dist/types/components/Textarea/appearance/textareaShape.d.ts +25 -0
- package/package.json +5 -5
- package/dist/Group_cjs_D4QLNgcC.js +0 -50
- package/dist/Group_es_CruwH8Al.js +0 -46
- package/dist/{Avatar_cjs_CUv4th9V.js → Avatar_cjs_BHvgPTAY.js} +4 -4
- package/dist/{Avatar_es_CZbxsfMv.js → Avatar_es_DnqQ0yn6.js} +4 -4
|
@@ -11,7 +11,7 @@ var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDe
|
|
|
11
11
|
var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
|
|
12
12
|
var Button = require('./Button_cjs_CF3wei05.js');
|
|
13
13
|
var Icon = require('./Icon_cjs_BdX_3y6P.js');
|
|
14
|
-
var Input = require('./
|
|
14
|
+
var Input = require('./Input_cjs_DSpBwtPv.js');
|
|
15
15
|
var Label = require('./Label_cjs_DSSetg_A.js');
|
|
16
16
|
var Text = require('./Text_cjs_B8nNXWBA.js');
|
|
17
17
|
var _default = require('@itcase/icons/default');
|
|
@@ -9,7 +9,7 @@ import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevi
|
|
|
9
9
|
import { useStyles } from './hooks/useStyles/useStyles.js';
|
|
10
10
|
import { B as Button } from './Button_es_3cCwdJcQ.js';
|
|
11
11
|
import { I as Icon } from './Icon_es_Xh3eVHNS.js';
|
|
12
|
-
import { I as Input } from './
|
|
12
|
+
import { I as Input } from './Input_es_3C_YhQFo.js';
|
|
13
13
|
import { L as Label } from './Label_es_DnTcY7ih.js';
|
|
14
14
|
import { T as Text } from './Text_es_BvmOR4nv.js';
|
|
15
15
|
import { icons14 } from '@itcase/icons/default';
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var clsx = require('clsx');
|
|
6
|
+
var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
7
|
+
var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
8
|
+
var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
|
|
9
|
+
|
|
10
|
+
var groupAppearance = {
|
|
11
|
+
dev: {
|
|
12
|
+
direction: 'horizontal',
|
|
13
|
+
fill: 'surfacePrimary',
|
|
14
|
+
fillHover: 'surfacePrimaryHover',
|
|
15
|
+
borderColor: 'surfaceBorderPrimary',
|
|
16
|
+
borderWidth: 1,
|
|
17
|
+
},
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
var groupConfig = {
|
|
21
|
+
appearance: groupAppearance,
|
|
22
|
+
setAppearance: function (appearanceConfig) {
|
|
23
|
+
groupConfig.appearance = appearanceConfig;
|
|
24
|
+
},
|
|
25
|
+
};
|
|
26
|
+
var Group = React.forwardRef(function Group(props, ref) {
|
|
27
|
+
var id = props.id, className = props.className, name = props.name, appearance = props.appearance, dataTestId = props.dataTestId, dataTour = props.dataTour, htmlFor = props.htmlFor, scroll = props.scroll, style = props.style, isDisabled = props.isDisabled, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, isActive = props.isActive, onClick = props.onClick, onMouseDown = props.onMouseDown, children = props.children;
|
|
28
|
+
var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, groupConfig);
|
|
29
|
+
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
30
|
+
var directionClass = propsGenerator.directionClass, flexGrowClass = propsGenerator.flexGrowClass, justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorActiveClass = propsGenerator.borderColorActiveClass, borderColorActiveHoverClass = propsGenerator.borderColorActiveHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, fillDisabledClass = propsGenerator.fillDisabledClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorHoverClass = propsGenerator.textColorHoverClass, columnsClass = propsGenerator.columnsClass, elevationClass = propsGenerator.elevationClass, heightClass = propsGenerator.heightClass, iconFillHoverClass = propsGenerator.iconFillHoverClass, shapeClass = propsGenerator.shapeClass, stackingClass = propsGenerator.stackingClass, widthClass = propsGenerator.widthClass, wrapClass = propsGenerator.wrapClass;
|
|
31
|
+
// @ts-expect-error
|
|
32
|
+
var groupStyles = useStyles.useStyles(props).styles;
|
|
33
|
+
return (jsxRuntime.jsx(Tag, { id: id, className: clsx(className, 'group', widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), columnsClass && "group_columns_".concat(columnsClass), alignDirectionClass && "align_".concat(alignDirectionClass), directionClass && "group_direction_".concat(directionClass), alignClass && "align_".concat(alignClass), textColorClass && "group_text-color_".concat(textColorClass), textColorActiveClass &&
|
|
34
|
+
"group_text-color_active_".concat(textColorActiveClass), textColorHoverClass && "group_text-color_hover_".concat(textColorHoverClass), iconFillHoverClass && "group_icon_fill_hover_".concat(iconFillHoverClass), !isDisabled
|
|
35
|
+
? !isActive
|
|
36
|
+
? fillClass && "fill_".concat(fillClass)
|
|
37
|
+
: fillActiveClass && "fill_active_".concat(fillActiveClass)
|
|
38
|
+
: fillDisabledClass && "fill_".concat(fillDisabledClass), !isDisabled
|
|
39
|
+
? !isActive
|
|
40
|
+
? fillHoverClass && "fill_hover_".concat(fillHoverClass)
|
|
41
|
+
: fillActiveHoverClass &&
|
|
42
|
+
"fill_active_hover_".concat(fillActiveHoverClass)
|
|
43
|
+
: fillDisabledClass && "fill_".concat(fillDisabledClass), scroll && "group_scroll_".concat(scroll), stackingClass && "group_stacking_".concat(stackingClass), wrapClass && "group_wrap_".concat(wrapClass), flexGrowClass && "flex-grow_".concat(flexGrowClass), shapeClass && "group_shape_".concat(shapeClass), !isDisabled
|
|
44
|
+
? !isActive
|
|
45
|
+
? borderColorClass && "border-color_".concat(borderColorClass)
|
|
46
|
+
: borderColorActiveClass &&
|
|
47
|
+
"border-color_active_".concat(borderColorActiveClass)
|
|
48
|
+
: fillDisabledClass && "fill_".concat(fillDisabledClass), !isDisabled
|
|
49
|
+
? !isActive
|
|
50
|
+
? borderColorHoverClass &&
|
|
51
|
+
"border-color_hover_".concat(borderColorHoverClass)
|
|
52
|
+
: borderColorActiveHoverClass &&
|
|
53
|
+
"border-color_active_hover_".concat(borderColorActiveHoverClass)
|
|
54
|
+
: fillDisabledClass && "fill_".concat(fillDisabledClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), elevationClass && "elevation_".concat(elevationClass), justifyContentClass && "justify-content_".concat(justifyContentClass), onClick && 'cursor_type_pointer'), name: name, dataTestId: dataTestId, dataTour: dataTour, htmlFor: htmlFor, ref: ref, style: Object.assign({}, groupStyles, style), onClick: onClick, onMouseDown: onMouseDown, children: children }));
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
exports.Group = Group;
|
|
58
|
+
exports.groupAppearance = groupAppearance;
|
|
59
|
+
exports.groupConfig = groupConfig;
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import clsx from 'clsx';
|
|
4
|
+
import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
5
|
+
import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
6
|
+
import { useStyles } from './hooks/useStyles/useStyles.js';
|
|
7
|
+
|
|
8
|
+
var groupAppearance = {
|
|
9
|
+
dev: {
|
|
10
|
+
direction: 'horizontal',
|
|
11
|
+
fill: 'surfacePrimary',
|
|
12
|
+
fillHover: 'surfacePrimaryHover',
|
|
13
|
+
borderColor: 'surfaceBorderPrimary',
|
|
14
|
+
borderWidth: 1,
|
|
15
|
+
},
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
var groupConfig = {
|
|
19
|
+
appearance: groupAppearance,
|
|
20
|
+
setAppearance: function (appearanceConfig) {
|
|
21
|
+
groupConfig.appearance = appearanceConfig;
|
|
22
|
+
},
|
|
23
|
+
};
|
|
24
|
+
var Group = React.forwardRef(function Group(props, ref) {
|
|
25
|
+
var id = props.id, className = props.className, name = props.name, appearance = props.appearance, dataTestId = props.dataTestId, dataTour = props.dataTour, htmlFor = props.htmlFor, scroll = props.scroll, style = props.style, isDisabled = props.isDisabled, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, isActive = props.isActive, onClick = props.onClick, onMouseDown = props.onMouseDown, children = props.children;
|
|
26
|
+
var appearanceConfig = useAppearanceConfig(appearance, groupConfig);
|
|
27
|
+
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
28
|
+
var directionClass = propsGenerator.directionClass, flexGrowClass = propsGenerator.flexGrowClass, justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorActiveClass = propsGenerator.borderColorActiveClass, borderColorActiveHoverClass = propsGenerator.borderColorActiveHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, fillDisabledClass = propsGenerator.fillDisabledClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorHoverClass = propsGenerator.textColorHoverClass, columnsClass = propsGenerator.columnsClass, elevationClass = propsGenerator.elevationClass, heightClass = propsGenerator.heightClass, iconFillHoverClass = propsGenerator.iconFillHoverClass, shapeClass = propsGenerator.shapeClass, stackingClass = propsGenerator.stackingClass, widthClass = propsGenerator.widthClass, wrapClass = propsGenerator.wrapClass;
|
|
29
|
+
// @ts-expect-error
|
|
30
|
+
var groupStyles = useStyles(props).styles;
|
|
31
|
+
return (jsx(Tag, { id: id, className: clsx(className, 'group', widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), columnsClass && "group_columns_".concat(columnsClass), alignDirectionClass && "align_".concat(alignDirectionClass), directionClass && "group_direction_".concat(directionClass), alignClass && "align_".concat(alignClass), textColorClass && "group_text-color_".concat(textColorClass), textColorActiveClass &&
|
|
32
|
+
"group_text-color_active_".concat(textColorActiveClass), textColorHoverClass && "group_text-color_hover_".concat(textColorHoverClass), iconFillHoverClass && "group_icon_fill_hover_".concat(iconFillHoverClass), !isDisabled
|
|
33
|
+
? !isActive
|
|
34
|
+
? fillClass && "fill_".concat(fillClass)
|
|
35
|
+
: fillActiveClass && "fill_active_".concat(fillActiveClass)
|
|
36
|
+
: fillDisabledClass && "fill_".concat(fillDisabledClass), !isDisabled
|
|
37
|
+
? !isActive
|
|
38
|
+
? fillHoverClass && "fill_hover_".concat(fillHoverClass)
|
|
39
|
+
: fillActiveHoverClass &&
|
|
40
|
+
"fill_active_hover_".concat(fillActiveHoverClass)
|
|
41
|
+
: fillDisabledClass && "fill_".concat(fillDisabledClass), scroll && "group_scroll_".concat(scroll), stackingClass && "group_stacking_".concat(stackingClass), wrapClass && "group_wrap_".concat(wrapClass), flexGrowClass && "flex-grow_".concat(flexGrowClass), shapeClass && "group_shape_".concat(shapeClass), !isDisabled
|
|
42
|
+
? !isActive
|
|
43
|
+
? borderColorClass && "border-color_".concat(borderColorClass)
|
|
44
|
+
: borderColorActiveClass &&
|
|
45
|
+
"border-color_active_".concat(borderColorActiveClass)
|
|
46
|
+
: fillDisabledClass && "fill_".concat(fillDisabledClass), !isDisabled
|
|
47
|
+
? !isActive
|
|
48
|
+
? borderColorHoverClass &&
|
|
49
|
+
"border-color_hover_".concat(borderColorHoverClass)
|
|
50
|
+
: borderColorActiveHoverClass &&
|
|
51
|
+
"border-color_active_hover_".concat(borderColorActiveHoverClass)
|
|
52
|
+
: fillDisabledClass && "fill_".concat(fillDisabledClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), elevationClass && "elevation_".concat(elevationClass), justifyContentClass && "justify-content_".concat(justifyContentClass), onClick && 'cursor_type_pointer'), name: name, dataTestId: dataTestId, dataTour: dataTour, htmlFor: htmlFor, ref: ref, style: Object.assign({}, groupStyles, style), onClick: onClick, onMouseDown: onMouseDown, children: children }));
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
export { Group as G, groupAppearance as a, groupConfig as g };
|
|
@@ -92,6 +92,31 @@ var inputAppearanceRequire = {
|
|
|
92
92
|
},
|
|
93
93
|
};
|
|
94
94
|
|
|
95
|
+
var inputAppearanceShape = {
|
|
96
|
+
circular: {
|
|
97
|
+
shape: 'circular',
|
|
98
|
+
},
|
|
99
|
+
rounded: {
|
|
100
|
+
shape: 'rounded',
|
|
101
|
+
},
|
|
102
|
+
roundedS: {
|
|
103
|
+
shape: 'rounded',
|
|
104
|
+
shapeStrength: '0_5m',
|
|
105
|
+
},
|
|
106
|
+
roundedM: {
|
|
107
|
+
shape: 'rounded',
|
|
108
|
+
shapeStrength: '1m',
|
|
109
|
+
},
|
|
110
|
+
roundedL: {
|
|
111
|
+
shape: 'rounded',
|
|
112
|
+
shapeStrength: '1_5m',
|
|
113
|
+
},
|
|
114
|
+
roundedXL: {
|
|
115
|
+
shape: 'rounded',
|
|
116
|
+
shapeStrength: '2m',
|
|
117
|
+
},
|
|
118
|
+
};
|
|
119
|
+
|
|
95
120
|
var inputAppearanceSize = {
|
|
96
121
|
sizeXXL: {
|
|
97
122
|
size: 'xxl',
|
|
@@ -158,7 +183,7 @@ var inputAppearanceSuccess = {
|
|
|
158
183
|
},
|
|
159
184
|
};
|
|
160
185
|
|
|
161
|
-
var inputAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, inputAppearanceDefault), inputAppearanceError), inputAppearanceSuccess), inputAppearanceRequire), inputAppearanceDisabled), inputAppearanceSize), inputAppearanceStyle);
|
|
186
|
+
var inputAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, inputAppearanceDefault), inputAppearanceError), inputAppearanceShape), inputAppearanceSuccess), inputAppearanceRequire), inputAppearanceDisabled), inputAppearanceSize), inputAppearanceStyle);
|
|
162
187
|
|
|
163
188
|
var inputConfig = {
|
|
164
189
|
appearance: inputAppearance,
|
|
@@ -174,8 +199,8 @@ var Input = React.forwardRef(function Input(props, ref) {
|
|
|
174
199
|
var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, inputConfig);
|
|
175
200
|
// const stateConfig = state && inputConfig.state && inputConfig.state[state]
|
|
176
201
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
177
|
-
var fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorDisabledClass = propsGenerator.borderColorDisabledClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderWidthClass = propsGenerator.borderWidthClass, borderWidthDisabledClass = propsGenerator.borderWidthDisabledClass, textColorClass = propsGenerator.textColorClass, textColorDisabledClass = propsGenerator.textColorDisabledClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, placeholderTextColorDisabledClass = propsGenerator.placeholderTextColorDisabledClass, caretClass = propsGenerator.caretClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
|
|
178
|
-
return (jsxRuntime.jsx("input", { id: String(id), className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), shapeClass && "
|
|
202
|
+
var fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorDisabledClass = propsGenerator.borderColorDisabledClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderWidthClass = propsGenerator.borderWidthClass, borderWidthDisabledClass = propsGenerator.borderWidthDisabledClass, textColorClass = propsGenerator.textColorClass, textColorDisabledClass = propsGenerator.textColorDisabledClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, placeholderTextColorDisabledClass = propsGenerator.placeholderTextColorDisabledClass, caretClass = propsGenerator.caretClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
|
|
203
|
+
return (jsxRuntime.jsx("input", { id: String(id), className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), textColorClass && "text-color_".concat(textColorClass), textSizeClass && "text_size_".concat(textSizeClass), textWeightClass && "text-weight_".concat(textWeightClass), widthClass && "width_".concat(widthClass), sizeClass && "input_size_".concat(sizeClass), !isDisabled
|
|
179
204
|
? fillClass && "fill_".concat(fillClass)
|
|
180
205
|
: fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isDisabled
|
|
181
206
|
? borderWidthClass && "border-width_".concat(borderWidthClass)
|
|
@@ -90,6 +90,31 @@ var inputAppearanceRequire = {
|
|
|
90
90
|
},
|
|
91
91
|
};
|
|
92
92
|
|
|
93
|
+
var inputAppearanceShape = {
|
|
94
|
+
circular: {
|
|
95
|
+
shape: 'circular',
|
|
96
|
+
},
|
|
97
|
+
rounded: {
|
|
98
|
+
shape: 'rounded',
|
|
99
|
+
},
|
|
100
|
+
roundedS: {
|
|
101
|
+
shape: 'rounded',
|
|
102
|
+
shapeStrength: '0_5m',
|
|
103
|
+
},
|
|
104
|
+
roundedM: {
|
|
105
|
+
shape: 'rounded',
|
|
106
|
+
shapeStrength: '1m',
|
|
107
|
+
},
|
|
108
|
+
roundedL: {
|
|
109
|
+
shape: 'rounded',
|
|
110
|
+
shapeStrength: '1_5m',
|
|
111
|
+
},
|
|
112
|
+
roundedXL: {
|
|
113
|
+
shape: 'rounded',
|
|
114
|
+
shapeStrength: '2m',
|
|
115
|
+
},
|
|
116
|
+
};
|
|
117
|
+
|
|
93
118
|
var inputAppearanceSize = {
|
|
94
119
|
sizeXXL: {
|
|
95
120
|
size: 'xxl',
|
|
@@ -156,7 +181,7 @@ var inputAppearanceSuccess = {
|
|
|
156
181
|
},
|
|
157
182
|
};
|
|
158
183
|
|
|
159
|
-
var inputAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign({}, inputAppearanceDefault), inputAppearanceError), inputAppearanceSuccess), inputAppearanceRequire), inputAppearanceDisabled), inputAppearanceSize), inputAppearanceStyle);
|
|
184
|
+
var inputAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, inputAppearanceDefault), inputAppearanceError), inputAppearanceShape), inputAppearanceSuccess), inputAppearanceRequire), inputAppearanceDisabled), inputAppearanceSize), inputAppearanceStyle);
|
|
160
185
|
|
|
161
186
|
var inputConfig = {
|
|
162
187
|
appearance: inputAppearance,
|
|
@@ -172,8 +197,8 @@ var Input = React.forwardRef(function Input(props, ref) {
|
|
|
172
197
|
var appearanceConfig = useAppearanceConfig(appearance, inputConfig);
|
|
173
198
|
// const stateConfig = state && inputConfig.state && inputConfig.state[state]
|
|
174
199
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
175
|
-
var fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorDisabledClass = propsGenerator.borderColorDisabledClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderWidthClass = propsGenerator.borderWidthClass, borderWidthDisabledClass = propsGenerator.borderWidthDisabledClass, textColorClass = propsGenerator.textColorClass, textColorDisabledClass = propsGenerator.textColorDisabledClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, placeholderTextColorDisabledClass = propsGenerator.placeholderTextColorDisabledClass, caretClass = propsGenerator.caretClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
|
|
176
|
-
return (jsx("input", { id: String(id), className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), shapeClass && "
|
|
200
|
+
var fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorDisabledClass = propsGenerator.borderColorDisabledClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderWidthClass = propsGenerator.borderWidthClass, borderWidthDisabledClass = propsGenerator.borderWidthDisabledClass, textColorClass = propsGenerator.textColorClass, textColorDisabledClass = propsGenerator.textColorDisabledClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, placeholderTextColorDisabledClass = propsGenerator.placeholderTextColorDisabledClass, caretClass = propsGenerator.caretClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
|
|
201
|
+
return (jsx("input", { id: String(id), className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), textColorClass && "text-color_".concat(textColorClass), textSizeClass && "text_size_".concat(textSizeClass), textWeightClass && "text-weight_".concat(textWeightClass), widthClass && "width_".concat(widthClass), sizeClass && "input_size_".concat(sizeClass), !isDisabled
|
|
177
202
|
? fillClass && "fill_".concat(fillClass)
|
|
178
203
|
: fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isDisabled
|
|
179
204
|
? borderWidthClass && "border-width_".concat(borderWidthClass)
|
|
@@ -5,8 +5,8 @@ var clsx = require('clsx');
|
|
|
5
5
|
var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
6
6
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
7
7
|
var useStyles = require('../hooks/useStyles/useStyles.js');
|
|
8
|
-
var Avatar = require('../../
|
|
9
|
-
var Group = require('../../
|
|
8
|
+
var Avatar = require('../../Avatar_cjs_BHvgPTAY.js');
|
|
9
|
+
var Group = require('../../Group_cjs_GqR99U0L.js');
|
|
10
10
|
var Text = require('../../Text_cjs_B8nNXWBA.js');
|
|
11
11
|
var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
|
|
12
12
|
require('react');
|
|
@@ -89,6 +89,15 @@ var checkmarkAppearanceSurface = {
|
|
|
89
89
|
borderWidth: '2',
|
|
90
90
|
checkmarkFill: 'surfaceItemPrimary',
|
|
91
91
|
},
|
|
92
|
+
surfaceSecondary: {
|
|
93
|
+
fill: 'surfaceSecondary',
|
|
94
|
+
fillActive: 'surfacePrimary',
|
|
95
|
+
fillHover: 'surfaceHover',
|
|
96
|
+
borderColor: 'surfaceBorderTertiary',
|
|
97
|
+
borderColorHover: 'surfaceBorderPrimary',
|
|
98
|
+
borderWidth: '2',
|
|
99
|
+
checkmarkFill: 'surfaceItemPrimary',
|
|
100
|
+
},
|
|
92
101
|
};
|
|
93
102
|
|
|
94
103
|
var checkmarkAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, checkmarkAppearanceAccent), checkmarkAppearanceDisabled), checkmarkAppearanceStyle), checkmarkAppearanceSurface), checkmarkAppearanceSize);
|
|
@@ -5,7 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var clsx = require('clsx');
|
|
7
7
|
var reactDadata = require('react-dadata');
|
|
8
|
-
var Input = require('../../
|
|
8
|
+
var Input = require('../../Input_cjs_DSpBwtPv.js');
|
|
9
9
|
require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
10
10
|
require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
11
11
|
require('lodash/camelCase');
|
|
@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var clsx = require('clsx');
|
|
6
6
|
var common = require('@itcase/common');
|
|
7
|
-
var DatePicker = require('../../
|
|
7
|
+
var DatePicker = require('../../DatePicker_cjs_DPe3TnXs.js');
|
|
8
8
|
var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
9
9
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
10
10
|
var ChipsGroup = require('../../ChipsGroup_cjs_p5BbbozF.js');
|
|
@@ -30,7 +30,7 @@ require('../context/UrlAssetPrefix.js');
|
|
|
30
30
|
require('../../Link_cjs_BqT6eVl6.js');
|
|
31
31
|
require('../../Text_cjs_B8nNXWBA.js');
|
|
32
32
|
require('../../Loader_cjs_DlnM5Vzb.js');
|
|
33
|
-
require('../../
|
|
33
|
+
require('../../Input_cjs_DSpBwtPv.js');
|
|
34
34
|
require('../../Label_cjs_DSSetg_A.js');
|
|
35
35
|
require('@itcase/icons/default');
|
|
36
36
|
require('lodash/castArray');
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var DatePicker = require('../../
|
|
3
|
+
var DatePicker = require('../../DatePicker_cjs_DPe3TnXs.js');
|
|
4
4
|
require('../../tslib.es6_cjs_CCZ3TN_7.js');
|
|
5
5
|
require('react/jsx-runtime');
|
|
6
6
|
require('react');
|
|
@@ -30,7 +30,7 @@ require('../context/UrlAssetPrefix.js');
|
|
|
30
30
|
require('../../Link_cjs_BqT6eVl6.js');
|
|
31
31
|
require('../../Text_cjs_B8nNXWBA.js');
|
|
32
32
|
require('../../Loader_cjs_DlnM5Vzb.js');
|
|
33
|
-
require('../../
|
|
33
|
+
require('../../Input_cjs_DSpBwtPv.js');
|
|
34
34
|
require('../../Label_cjs_DSSetg_A.js');
|
|
35
35
|
require('@itcase/icons/default');
|
|
36
36
|
|
|
@@ -72,7 +72,7 @@ function Drawer(props) {
|
|
|
72
72
|
var prevIsOpenModalRef = React.useRef(null);
|
|
73
73
|
var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, drawerConfig);
|
|
74
74
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
75
|
-
var direction = propsGenerator.direction, size = propsGenerator.size, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, zeroPadding = propsGenerator.zeroPadding, closeIcon = propsGenerator.closeIcon, closeIconFill = propsGenerator.closeIconFill, closeIconFillIcon = propsGenerator.closeIconFillIcon, closeIconFillSize = propsGenerator.closeIconFillSize, closeIconShape = propsGenerator.closeIconShape, closeIconSize = propsGenerator.closeIconSize, closeIconSrc = propsGenerator.closeIconSrc;
|
|
75
|
+
var direction = propsGenerator.direction, size = propsGenerator.size, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, divider = propsGenerator.divider, zeroPadding = propsGenerator.zeroPadding, closeIcon = propsGenerator.closeIcon, closeIconFill = propsGenerator.closeIconFill, closeIconFillIcon = propsGenerator.closeIconFillIcon, closeIconFillSize = propsGenerator.closeIconFillSize, closeIconShape = propsGenerator.closeIconShape, closeIconSize = propsGenerator.closeIconSize, closeIconSrc = propsGenerator.closeIconSrc;
|
|
76
76
|
React.useEffect(function () {
|
|
77
77
|
if (onClose && prevIsOpenModalRef.current === true && !isOpenModal) {
|
|
78
78
|
onClose();
|
|
@@ -81,7 +81,7 @@ function Drawer(props) {
|
|
|
81
81
|
}, [isOpenModal, onClose]);
|
|
82
82
|
return (jsxRuntime.jsxs(ReactDrawer, { className: clsx('drawer', type && "drawer_type_".concat(type), className, dataTour && "dataTour-".concat(dataTour), stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), direction: direction || 'right', size: size || 600,
|
|
83
83
|
// Drawer set prefix "EZDrawer" for any id
|
|
84
|
-
customIdSuffix: dataTestId ? "_".concat(dataTestId) : undefined, dataTour: dataTour, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open: isOpenModal, onClose: onClickClose, children: [before && jsxRuntime.jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (jsxRuntime.jsx("div", { className: "drawer__close", children: jsxRuntime.jsx(Icon.Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon }) })), (title || desc) && (jsxRuntime.jsxs("div", { className: "drawer__header", children: [jsxRuntime.jsx(Icon.Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, children: title }), jsxRuntime.jsx(Text.Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), children && jsxRuntime.jsx("div", { className: "drawer__wrapper", children: children }), after && jsxRuntime.jsx("div", { className: "drawer__after", children: after })] }));
|
|
84
|
+
customIdSuffix: dataTestId ? "_".concat(dataTestId) : undefined, dataTour: dataTour, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open: isOpenModal, onClose: onClickClose, children: [before && jsxRuntime.jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (jsxRuntime.jsx("div", { className: "drawer__close", children: jsxRuntime.jsx(Icon.Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon }) })), (title || desc) && (jsxRuntime.jsxs("div", { className: "drawer__header", children: [jsxRuntime.jsx(Icon.Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, children: title }), jsxRuntime.jsx(Text.Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), divider && jsxRuntime.jsx(Divider, { width: "fill", fill: "surfaceTertiary" }), children && jsxRuntime.jsx("div", { className: "drawer__wrapper", children: children }), after && jsxRuntime.jsx("div", { className: "drawer__after", children: after })] }));
|
|
85
85
|
}
|
|
86
86
|
|
|
87
87
|
exports.Drawer = Drawer;
|
|
@@ -69,6 +69,31 @@ var radioAppearanceRequire = {
|
|
|
69
69
|
},
|
|
70
70
|
};
|
|
71
71
|
|
|
72
|
+
var radioAppearanceShape = {
|
|
73
|
+
circular: {
|
|
74
|
+
shape: 'circular',
|
|
75
|
+
},
|
|
76
|
+
rounded: {
|
|
77
|
+
shape: 'rounded',
|
|
78
|
+
},
|
|
79
|
+
roundedS: {
|
|
80
|
+
shape: 'rounded',
|
|
81
|
+
shapeStrength: '0_5m',
|
|
82
|
+
},
|
|
83
|
+
roundedM: {
|
|
84
|
+
shape: 'rounded',
|
|
85
|
+
shapeStrength: '1m',
|
|
86
|
+
},
|
|
87
|
+
roundedL: {
|
|
88
|
+
shape: 'rounded',
|
|
89
|
+
shapeStrength: '1_5m',
|
|
90
|
+
},
|
|
91
|
+
roundedXL: {
|
|
92
|
+
shape: 'rounded',
|
|
93
|
+
shapeStrength: '2m',
|
|
94
|
+
},
|
|
95
|
+
};
|
|
96
|
+
|
|
72
97
|
var radioAppearanceSize = {
|
|
73
98
|
sizeM: {
|
|
74
99
|
size: 'm',
|
|
@@ -113,7 +138,7 @@ var radioAppearanceSuccess = {
|
|
|
113
138
|
},
|
|
114
139
|
};
|
|
115
140
|
|
|
116
|
-
var radioAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, radioAppearanceDefault), radioAppearanceError), radioAppearanceSuccess), radioAppearanceRequire), radioAppearanceDisabled), radioAppearanceSize), radioAppearanceStyle);
|
|
141
|
+
var radioAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, radioAppearanceDefault), radioAppearanceError), radioAppearanceSuccess), radioAppearanceRequire), radioAppearanceDisabled), radioAppearanceSize), radioAppearanceShape), radioAppearanceStyle);
|
|
117
142
|
|
|
118
143
|
var radioConfig = {
|
|
119
144
|
appearance: radioAppearance,
|
|
@@ -122,23 +147,23 @@ var radioConfig = {
|
|
|
122
147
|
},
|
|
123
148
|
};
|
|
124
149
|
function Radio(props) {
|
|
125
|
-
var id = props.id, className = props.className, appearance = props.appearance, label = props.label, desc = props.desc, isDisabled = props.isDisabled, checked = props.checked, _a = props.tag, Tag = _a === void 0 ? 'label' : _a, isSkeleton = props.isSkeleton, onChange = props.onChange;
|
|
150
|
+
var id = props.id, className = props.className, appearance = props.appearance, label = props.label, desc = props.desc, isDisabled = props.isDisabled, checked = props.checked, _a = props.tag, Tag = _a === void 0 ? 'label' : _a, isActive = props.isActive, isSkeleton = props.isSkeleton, onChange = props.onChange;
|
|
126
151
|
var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, radioConfig);
|
|
127
152
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
128
|
-
var fillCheckmarkClass = propsGenerator.fillCheckmarkClass, fillClass = propsGenerator.fillClass, fillRadioActiveClass = propsGenerator.fillRadioActiveClass, fillRadioActiveHoverClass = propsGenerator.fillRadioActiveHoverClass, fillRadioClass = propsGenerator.fillRadioClass, fillRadioHoverClass = propsGenerator.fillRadioHoverClass, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWeight = propsGenerator.descTextWeight, borderColorClass = propsGenerator.borderColorClass, borderColorRadioActiveClass = propsGenerator.borderColorRadioActiveClass, borderColorRadioActiveHoverClass = propsGenerator.borderColorRadioActiveHoverClass, borderColorRadioClass = propsGenerator.borderColorRadioClass, borderColorRadioHoverClass = propsGenerator.borderColorRadioHoverClass,
|
|
129
|
-
return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'radio', fillClass && "fill_".concat(fillClass), borderColorClass && "border-color_".concat(borderColorClass), isSkeleton && 'radio_skeleton', sizeClass && "radio_size_".concat(sizeClass)), htmlFor: id, children: [jsxRuntime.jsxs("div", { className: "radio__item", children: [jsxRuntime.jsx("input", { id: id, className: "radio__input", type: "radio", disabled: isDisabled && 'disabled', checked: checked, onChange: onChange }), jsxRuntime.jsx("div", { className: clsx('radio__state', !checked
|
|
153
|
+
var fillCheckmarkClass = propsGenerator.fillCheckmarkClass, fillClass = propsGenerator.fillClass, fillRadioActiveClass = propsGenerator.fillRadioActiveClass, fillRadioActiveHoverClass = propsGenerator.fillRadioActiveHoverClass, fillRadioClass = propsGenerator.fillRadioClass, fillRadioHoverClass = propsGenerator.fillRadioHoverClass, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWeight = propsGenerator.descTextWeight, borderColorClass = propsGenerator.borderColorClass, borderColorRadioActiveClass = propsGenerator.borderColorRadioActiveClass, borderColorRadioActiveHoverClass = propsGenerator.borderColorRadioActiveHoverClass, borderColorRadioClass = propsGenerator.borderColorRadioClass, borderColorRadioHoverClass = propsGenerator.borderColorRadioHoverClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass;
|
|
154
|
+
return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'radio', fillClass && "fill_".concat(fillClass), borderColorClass && "border-color_".concat(borderColorClass), isSkeleton && 'radio_skeleton', sizeClass && "radio_size_".concat(sizeClass)), htmlFor: id, children: [jsxRuntime.jsxs("div", { className: "radio__item", children: [jsxRuntime.jsx("input", { id: id, className: "radio__input", type: "radio", disabled: isDisabled && 'disabled', checked: checked, onChange: onChange }), jsxRuntime.jsx("div", { className: clsx('radio__state', !checked || !isActive
|
|
130
155
|
? fillRadioClass && "fill_".concat(fillRadioClass)
|
|
131
|
-
: fillRadioActiveClass && "fill_active_".concat(fillRadioActiveClass), !checked
|
|
156
|
+
: fillRadioActiveClass && "fill_active_".concat(fillRadioActiveClass), !checked || !isActive
|
|
132
157
|
? fillRadioHoverClass && "fill_hover_".concat(fillRadioHoverClass)
|
|
133
158
|
: fillRadioActiveHoverClass &&
|
|
134
|
-
"fill_active_hover_".concat(fillRadioActiveHoverClass), !checked
|
|
159
|
+
"fill_active_hover_".concat(fillRadioActiveHoverClass), !checked || !isActive
|
|
135
160
|
? borderColorRadioClass && "border-color_".concat(borderColorRadioClass)
|
|
136
161
|
: borderColorRadioActiveClass &&
|
|
137
|
-
"border-color_active_".concat(borderColorRadioActiveClass), !checked
|
|
162
|
+
"border-color_active_".concat(borderColorRadioActiveClass), !checked || !isActive
|
|
138
163
|
? borderColorRadioHoverClass &&
|
|
139
164
|
"border-color_hover_".concat(borderColorRadioHoverClass)
|
|
140
165
|
: borderColorRadioActiveHoverClass &&
|
|
141
|
-
"border-color_active_hover_".concat(borderColorRadioActiveHoverClass), shapeClass && "shape_".concat(shapeClass)), children: "\u00A0" }), jsxRuntime.jsx("div", { className: clsx('radio__state-checkmark', checked && fillCheckmarkClass && "fill_".concat(fillCheckmarkClass)), children: "\u00A0" })] }), label && (jsxRuntime.jsx(Text.Text, { className: "radio__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "radio__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }))] }));
|
|
166
|
+
"border-color_active_hover_".concat(borderColorRadioActiveHoverClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass)), children: "\u00A0" }), jsxRuntime.jsx("div", { className: clsx('radio__state-checkmark', checked && fillCheckmarkClass && "fill_".concat(fillCheckmarkClass)), children: "\u00A0" })] }), label && (jsxRuntime.jsx(Text.Text, { className: "radio__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "radio__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }))] }));
|
|
142
167
|
}
|
|
143
168
|
|
|
144
169
|
exports.Radio = Radio;
|
|
@@ -10,7 +10,7 @@ var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceCon
|
|
|
10
10
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
11
11
|
var useStyles = require('../hooks/useStyles/useStyles.js');
|
|
12
12
|
var Button = require('../../Button_cjs_CF3wei05.js');
|
|
13
|
-
var Group = require('../../
|
|
13
|
+
var Group = require('../../Group_cjs_GqR99U0L.js');
|
|
14
14
|
var Text = require('../../Text_cjs_B8nNXWBA.js');
|
|
15
15
|
require('@itcase/common');
|
|
16
16
|
require('../context/UrlAssetPrefix.js');
|
|
@@ -10,7 +10,7 @@ var CreatableSelect = require('react-select/creatable');
|
|
|
10
10
|
var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
11
11
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
12
12
|
var Text = require('../../Text_cjs_B8nNXWBA.js');
|
|
13
|
-
var Group = require('../../
|
|
13
|
+
var Group = require('../../Group_cjs_GqR99U0L.js');
|
|
14
14
|
var Divider = require('../../Divider_cjs_rxMMBfLC.js');
|
|
15
15
|
require('react-inlinesvg');
|
|
16
16
|
require('../hoc/urlWithAssetPrefix.js');
|
|
@@ -119,30 +119,20 @@ var switchConfig = {
|
|
|
119
119
|
},
|
|
120
120
|
};
|
|
121
121
|
var Switch = React.forwardRef(function Switch(props, ref) {
|
|
122
|
-
var id = props.id, className = props.className, appearance = props.appearance, _a = props.align, align = _a === void 0 ? 'left' : _a, title = props.title, desc = props.desc,
|
|
122
|
+
var id = props.id, className = props.className, appearance = props.appearance, _a = props.align, align = _a === void 0 ? 'left' : _a, title = props.title, desc = props.desc, isDisabled = props.isDisabled, isChecked = props.isChecked, isActive = props.isActive, onChange = props.onChange;
|
|
123
123
|
var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, switchConfig);
|
|
124
124
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
125
125
|
var size = propsGenerator.size, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, fillToggleActiveClass = propsGenerator.fillToggleActiveClass, fillToggleActiveHoverClass = propsGenerator.fillToggleActiveHoverClass, fillToggleClass = propsGenerator.fillToggleClass, fillToggleHoverClass = propsGenerator.fillToggleHoverClass, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize;
|
|
126
|
-
return (jsxRuntime.jsxs("div", { className: clsx('switch', className, align && "switch_align_".concat(align), size && "switch_size_".concat(size)), children: [title && (jsxRuntime.jsx(Text.Text, { className: clsx('switch__title'), size: titleTextSize, textColor: titleTextColor, children: title })), desc && (jsxRuntime.jsx(Text.Text, { className: clsx('switch__desc'), size: descTextSize, textColor: descTextColor, children: desc })), jsxRuntime.jsxs("div", { className: 'switch__item', children: [jsxRuntime.jsx("input", { id: id, className: "switch__checkbox", type: "checkbox", disabled: disabled, checked:
|
|
126
|
+
return (jsxRuntime.jsxs("div", { className: clsx('switch', className, align && "switch_align_".concat(align), size && "switch_size_".concat(size)), children: [title && (jsxRuntime.jsx(Text.Text, { className: clsx('switch__title'), size: titleTextSize, textColor: titleTextColor, children: title })), desc && (jsxRuntime.jsx(Text.Text, { className: clsx('switch__desc'), size: descTextSize, textColor: descTextColor, children: desc })), jsxRuntime.jsxs("div", { className: 'switch__item', children: [jsxRuntime.jsx("input", { id: id, className: "switch__checkbox", type: "checkbox", disabled: isDisabled && 'disabled', checked: (isActive || isChecked) && 'checked',
|
|
127
127
|
// @ts-expect-error
|
|
128
|
-
ref: ref, onChange: onChange }), jsxRuntime.jsx("div", { className: clsx('switch__bg', !
|
|
128
|
+
ref: ref, onChange: onChange }), jsxRuntime.jsx("div", { className: clsx('switch__bg', !isActive || !isChecked
|
|
129
129
|
? fillClass && "fill_".concat(fillClass)
|
|
130
|
-
: fillActiveClass && "fill_active_".concat(fillActiveClass), !
|
|
130
|
+
: fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive || !isChecked
|
|
131
131
|
? fillHoverClass && "fill_hover_".concat(fillHoverClass)
|
|
132
132
|
: fillActiveHoverClass &&
|
|
133
|
-
"fill_active_hover_".concat(fillActiveHoverClass), !isActive
|
|
134
|
-
? fillClass && "fill_".concat(fillClass)
|
|
135
|
-
: fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive
|
|
136
|
-
? fillHoverClass && "fill_hover_".concat(fillHoverClass)
|
|
137
|
-
: fillActiveHoverClass &&
|
|
138
|
-
"fill_active_hover_".concat(fillActiveHoverClass)), children: "\u00A0" }), jsxRuntime.jsx("div", { className: clsx('switch__toggle', !checked
|
|
139
|
-
? fillToggleClass && "fill_".concat(fillToggleClass)
|
|
140
|
-
: fillToggleActiveClass && "fill_active_".concat(fillToggleActiveClass), !checked
|
|
141
|
-
? fillToggleHoverClass && "fill_hover_".concat(fillToggleHoverClass)
|
|
142
|
-
: fillToggleActiveHoverClass &&
|
|
143
|
-
"fill_active_hover_".concat(fillToggleActiveHoverClass), !isActive
|
|
133
|
+
"fill_active_hover_".concat(fillActiveHoverClass)), children: "\u00A0" }), jsxRuntime.jsx("div", { className: clsx('switch__toggle', !isActive || !isChecked
|
|
144
134
|
? fillToggleClass && "fill_".concat(fillToggleClass)
|
|
145
|
-
: fillToggleActiveClass && "fill_active_".concat(fillToggleActiveClass), !isActive
|
|
135
|
+
: fillToggleActiveClass && "fill_active_".concat(fillToggleActiveClass), !isActive || !isChecked
|
|
146
136
|
? fillToggleHoverClass && "fill_hover_".concat(fillToggleHoverClass)
|
|
147
137
|
: fillToggleActiveHoverClass &&
|
|
148
138
|
"fill_active_hover_".concat(fillToggleActiveHoverClass)), children: "\u00A0" })] })] }));
|
|
@@ -112,6 +112,31 @@ var textareaAppearanceRequire = {
|
|
|
112
112
|
},
|
|
113
113
|
};
|
|
114
114
|
|
|
115
|
+
var textareaAppearanceShape = {
|
|
116
|
+
circular: {
|
|
117
|
+
shape: 'circular',
|
|
118
|
+
},
|
|
119
|
+
rounded: {
|
|
120
|
+
shape: 'rounded',
|
|
121
|
+
},
|
|
122
|
+
roundedS: {
|
|
123
|
+
shape: 'rounded',
|
|
124
|
+
shapeStrength: '0_5m',
|
|
125
|
+
},
|
|
126
|
+
roundedM: {
|
|
127
|
+
shape: 'rounded',
|
|
128
|
+
shapeStrength: '1m',
|
|
129
|
+
},
|
|
130
|
+
roundedL: {
|
|
131
|
+
shape: 'rounded',
|
|
132
|
+
shapeStrength: '1_5m',
|
|
133
|
+
},
|
|
134
|
+
roundedXL: {
|
|
135
|
+
shape: 'rounded',
|
|
136
|
+
shapeStrength: '2m',
|
|
137
|
+
},
|
|
138
|
+
};
|
|
139
|
+
|
|
115
140
|
var textareaAppearanceSize = {
|
|
116
141
|
sizeXXL: {
|
|
117
142
|
size: 'xxl',
|
|
@@ -177,7 +202,7 @@ var textareaAppearanceSuccess = {
|
|
|
177
202
|
},
|
|
178
203
|
};
|
|
179
204
|
|
|
180
|
-
var textareaAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, textareaAppearanceDefault), textareaAppearanceError), textareaAppearanceSuccess), textareaAppearanceRequire), textareaAppearanceDisabled), textareaAppearanceSize), textareaAppearanceStyle);
|
|
205
|
+
var textareaAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, textareaAppearanceDefault), textareaAppearanceShape), textareaAppearanceError), textareaAppearanceSuccess), textareaAppearanceRequire), textareaAppearanceDisabled), textareaAppearanceSize), textareaAppearanceStyle);
|
|
181
206
|
|
|
182
207
|
var textareaConfig = {
|
|
183
208
|
appearance: textareaAppearance,
|
|
@@ -189,8 +214,8 @@ function Textarea(props) {
|
|
|
189
214
|
var id = props.id, className = props.className, appearance = props.appearance, isDisabled = props.isDisabled, placeholder = props.placeholder, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onKeyDown = props.onKeyDown;
|
|
190
215
|
var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, textareaConfig);
|
|
191
216
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
192
|
-
var fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, borderHoverClass = propsGenerator.borderHoverClass, borderWidthClass = propsGenerator.borderWidthClass, textColorClass = propsGenerator.textColorClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, caretClass = propsGenerator.caretClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
|
|
193
|
-
return (jsxRuntime.jsx("div", { className: clsx('textarea', className, sizeClass && "textarea_size_".concat(sizeClass)
|
|
217
|
+
var fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, borderHoverClass = propsGenerator.borderHoverClass, borderWidthClass = propsGenerator.borderWidthClass, textColorClass = propsGenerator.textColorClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, caretClass = propsGenerator.caretClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
|
|
218
|
+
return (jsxRuntime.jsx("div", { className: clsx('textarea', className, sizeClass && "textarea_size_".concat(sizeClass)), children: jsxRuntime.jsx("textarea", { id: id, className: clsx('textarea__input', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), fillClass && "fill_".concat(fillClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderHoverClass && "border-color_hover_".concat(borderHoverClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), placeholderTextColorClass &&
|
|
194
219
|
"placeholder-text-color_".concat(placeholderTextColorClass), textSizeClass && "text_size_".concat(textSizeClass), textColorClass && "text-color_".concat(textColorClass), textWeightClass && "text-weight_".concat(textWeightClass), widthClass && "width_".concat(widthClass)), disabled: isDisabled && 'disabled', placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onKeyDown: onKeyDown }) }));
|
|
195
220
|
}
|
|
196
221
|
|