@signalplus/params-about 0.1.3 → 0.1.6

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/index.d.ts CHANGED
@@ -32,6 +32,7 @@ interface ParamValueStruct {
32
32
  interface ParamRendererProps extends BaseInputProps {
33
33
  valueType?: ParamType;
34
34
  value?: ParamValueStruct;
35
+ expiriesOptions?: string[];
35
36
  onChange?(val: ParamValueStruct): void;
36
37
  }
37
38
  declare class ParamRenderer extends PureComponent<ParamRendererProps> {
@@ -48,9 +49,12 @@ declare class ParamRenderer extends PureComponent<ParamRendererProps> {
48
49
  }
49
50
 
50
51
  interface ParentSelectorOption {
51
- label: string;
52
- value: string;
52
+ $paramId: string | number;
53
+ name: string;
54
+ disabled?: boolean;
55
+ valueType?: ParamType;
53
56
  children?: ParentSelectorOption[];
57
+ [key: string]: any;
54
58
  }
55
59
  interface ParentSelectorProps extends BaseInputProps {
56
60
  parentOptions?: ParentSelectorOption[];
@@ -73,13 +77,13 @@ interface ParamFormData {
73
77
  interface ParamFormProps {
74
78
  parentOptions: ParentSelectorProps['parentOptions'];
75
79
  expiriesOptions: string[];
76
- initialValues?: ParamFormData;
80
+ initialValues?: Partial<ParamFormData>;
77
81
  onChange?(data: ParamFormData): void;
78
- onSubmit?(data: ParamFormData): Promise<any>;
82
+ onSubmit?(data: ParamFormData): any;
79
83
  }
80
84
  declare class ParamForm extends PureComponent<ParamFormProps> {
81
85
  ref: React.RefObject<any>;
82
- formItems: {
86
+ get formItems(): {
83
87
  label: string;
84
88
  name: string;
85
89
  Comp: React.ComponentType<BaseInputProps>;
@@ -93,7 +97,9 @@ declare class ParamFormModalEl extends PureComponent<ParamFormProps & Required<P
93
97
  ref: React.RefObject<ParamForm>;
94
98
  state: {
95
99
  visible: boolean;
100
+ pending: boolean;
96
101
  };
102
+ get isEdit(): boolean;
97
103
  onShow: () => void;
98
104
  onHide: () => void;
99
105
  onSubmit: () => any;
@@ -123,12 +129,11 @@ interface ParamValueEditorProps {
123
129
  valueType: ParamType;
124
130
  initialValues: ParamValueEditorData;
125
131
  onChange?(data: ParamValueEditorData): void;
126
- onSubmit?(data: ParamValueEditorData): Promise<any>;
132
+ onSubmit?(data: ParamValueEditorData): any;
127
133
  }
128
134
  declare class ParamValueEditor extends PureComponent<ParamValueEditorProps> {
129
- componentDidMount(): void;
130
135
  ref: React.RefObject<any>;
131
- formItems: {
136
+ get formItems(): {
132
137
  label: string;
133
138
  name: string;
134
139
  Comp: React.ComponentType<BaseInputProps>;
@@ -142,6 +147,7 @@ declare class ParamValueEditorModalEl extends PureComponent<ParamValueEditorProp
142
147
  ref: React.RefObject<ParamValueEditor>;
143
148
  state: {
144
149
  visible: boolean;
150
+ pending: boolean;
145
151
  };
146
152
  onShow: () => void;
147
153
  onHide: () => void;
@@ -154,6 +160,117 @@ declare class ParamValueEditorModal {
154
160
  static hide(): Promise<void>;
155
161
  }
156
162
 
163
+ interface ImageUploadProps extends BaseInputProps {
164
+ value?: string;
165
+ onChange?(val?: string): void;
166
+ getSignedUrl(key: string): Promise<string>;
167
+ /**
168
+ * 返回图片的 key
169
+ * */
170
+ handleUpload(file: Blob): Promise<string>;
171
+ }
172
+
173
+ interface ParamGroupEditorData {
174
+ parentId: string;
175
+ paramId?: string;
176
+ name: string;
177
+ descriptionUrl?: string;
178
+ }
179
+ interface ParamGroupEditorProps extends Required<Pick<ImageUploadProps, 'getSignedUrl' | 'handleUpload'>> {
180
+ /**
181
+ * 传了表示为有父级
182
+ * */
183
+ allParams?: ParentSelectorProps['parentOptions'];
184
+ initialValues?: Partial<ParamGroupEditorData>;
185
+ onChange?(data: ParamGroupEditorData): void;
186
+ onSubmit?(data: ParamGroupEditorData): any;
187
+ }
188
+ declare class ParamGroupEditor extends PureComponent<ParamGroupEditorProps> {
189
+ ref: React.RefObject<any>;
190
+ get formItems(): {
191
+ label: string;
192
+ name: string;
193
+ Comp: React.ComponentType<BaseInputProps>;
194
+ required?: boolean | undefined;
195
+ validator?(_: any, val: any): Promise<any>;
196
+ }[];
197
+ onChange: (changed: any, data: any) => void;
198
+ render(): JSX.Element;
199
+ }
200
+ declare class ParamGroupEditorModalEl extends PureComponent<ParamGroupEditorProps & Required<Pick<ParamGroupEditorProps, 'onSubmit'>>> {
201
+ ref: React.RefObject<ParamGroupEditor>;
202
+ state: {
203
+ visible: boolean;
204
+ pending: boolean;
205
+ };
206
+ get isEdit(): boolean;
207
+ onShow: () => void;
208
+ onHide: () => void;
209
+ onSubmit: () => any;
210
+ render(): JSX.Element;
211
+ }
212
+ declare class ParamGroupEditorModal {
213
+ static el: ReactGlobalComp<ParamGroupEditorProps & Required<Pick<ParamGroupEditorProps, "onSubmit">>>;
214
+ static show(props: Omit<ComponentProps<typeof ParamGroupEditorModalEl>, 'visible'>): Promise<void>;
215
+ static hide(): Promise<void>;
216
+ }
217
+
218
+ interface ParamMoverData {
219
+ parentId: string;
220
+ }
221
+ interface ParamMoverProps {
222
+ /**
223
+ * 需要确保 targetParams 的元素之间无父子或者祖先子孙关系
224
+ * */
225
+ targetParams: string[];
226
+ allParams: NonNullable<ParentSelectorProps['parentOptions']>;
227
+ onSubmit?(params: NonNullable<ParentSelectorProps['parentOptions']>): any;
228
+ }
229
+ declare function initState(props: ParamMoverProps): {
230
+ preProps: ParamMoverProps;
231
+ options: any[];
232
+ paramsMap: Record<string, ParentSelectorOption>;
233
+ };
234
+ declare type ParamMoverState = ReturnType<typeof initState>;
235
+ declare class ParamMover extends PureComponent<ParamMoverProps, ParamMoverState> {
236
+ static getDerivedStateFromProps(props: ParamMoverProps, state: ParamMoverState): {
237
+ preProps: ParamMoverProps;
238
+ options: any[];
239
+ paramsMap: Record<string, ParentSelectorOption>;
240
+ };
241
+ get newParams(): ParentSelectorOption[];
242
+ state: {
243
+ preProps: ParamMoverProps;
244
+ options: any[];
245
+ paramsMap: Record<string, ParentSelectorOption>;
246
+ };
247
+ ref: React.RefObject<any>;
248
+ get formItems(): {
249
+ label: string;
250
+ name: string;
251
+ Comp: React.ComponentType<BaseInputProps>;
252
+ required?: boolean | undefined;
253
+ validator?(_: any, val: any): Promise<any>;
254
+ }[];
255
+ render(): JSX.Element;
256
+ }
257
+ declare class ParamMoverModalEl extends PureComponent<ParamMoverProps & Required<Pick<ParamMoverProps, 'onSubmit'>>> {
258
+ ref: React.RefObject<ParamMover>;
259
+ state: {
260
+ visible: boolean;
261
+ pending: boolean;
262
+ };
263
+ onShow: () => void;
264
+ onHide: () => void;
265
+ onSubmit: () => any;
266
+ render(): JSX.Element;
267
+ }
268
+ declare class ParamMoverModal {
269
+ static el: ReactGlobalComp<ParamMoverProps & Required<Pick<ParamMoverProps, "onSubmit">>>;
270
+ static show(props: Omit<ComponentProps<typeof ParamMoverModalEl>, 'visible'>): Promise<void>;
271
+ static hide(): Promise<void>;
272
+ }
273
+
157
274
  declare const ParamTypeConfig: Record<ParamType, {
158
275
  name: string;
159
276
  key?: string;
@@ -183,8 +300,8 @@ declare function numRangeValidator(val: {
183
300
  }, enableEmpty?: boolean): string;
184
301
  declare function expiryValidator(val: string, enableEmpty?: boolean): "Should not be empty" | "" | "Out of format";
185
302
  declare function expiriesValidator(val: string[]): string;
186
- declare function keyValidator(val: string): string;
303
+ declare function keyValidator(val: string): "Should not be empty" | "" | "Out of format: should be a combination of the following chars `_.0-9a-zA-Z`";
187
304
  declare function isExpired(val?: string): boolean;
188
305
  declare function validatorCvt(validator: (val: any, values: any) => ValidateInfo['string'], form?: () => any): (_: any, val: any) => Promise<any>;
189
306
 
190
- export { BaseInputProps, ParamForm, ParamFormData, ParamFormModal, ParamFormProps, ParamRenderer, ParamRendererProps, ParamType, ParamTypeConfig, ParamTypeOptions, ParamValueEditor, ParamValueEditorData, ParamValueEditorModal, ParamValueEditorModalEl, ParamValueEditorProps, ParamValueStruct, ValidateInfo, emptyValidator, expiriesValidator, expiryValidator, formatNum, isExpired, isNullLike, keyValidator, numRangeValidator, paramValidator, validatorCvt };
307
+ export { BaseInputProps, ParamForm, ParamFormData, ParamFormModal, ParamFormProps, ParamGroupEditor, ParamGroupEditorData, ParamGroupEditorModal, ParamGroupEditorModalEl, ParamGroupEditorProps, ParamMover, ParamMoverData, ParamMoverModal, ParamMoverModalEl, ParamMoverProps, ParamMoverState, ParamRenderer, ParamRendererProps, ParamType, ParamTypeConfig, ParamTypeOptions, ParamValueEditor, ParamValueEditorData, ParamValueEditorModal, ParamValueEditorModalEl, ParamValueEditorProps, ParamValueStruct, ValidateInfo, emptyValidator, expiriesValidator, expiryValidator, formatNum, isExpired, isNullLike, keyValidator, numRangeValidator, paramValidator, validatorCvt };
package/lib/css/Num.scss CHANGED
@@ -5,9 +5,6 @@
5
5
  display: flex;
6
6
  align-items: center;
7
7
  height: $input-height;
8
- }
9
-
10
- .param-number {
11
8
 
12
9
  &.readonly {
13
10
 
@@ -5,9 +5,6 @@
5
5
  display: flex;
6
6
  align-items: center;
7
7
  height: $input-height;
8
- }
9
-
10
- .param-number-range {
11
8
 
12
9
  .param-number {
13
10
  height: 100%;
@@ -12,30 +12,14 @@
12
12
 
13
13
  .ant-form-item-label {
14
14
  width: 80px;
15
- text-align: left;
15
+ padding: 0 15px 0 0;
16
16
 
17
17
  > label {
18
18
  height: $input-height;
19
19
 
20
- &:before {
21
- content: none !important;
22
- }
23
-
24
20
  &:after {
25
21
  content: none !important;
26
22
  }
27
-
28
- &.ant-form-item-required {
29
-
30
- &:after {
31
- display: inline-block;
32
- margin-left: 4px;
33
- color: #ff4d4f;
34
- font-size: 14px;
35
- line-height: 1;
36
- content: "*" !important;
37
- }
38
- }
39
23
  }
40
24
  }
41
25
 
@@ -53,4 +37,23 @@
53
37
  min-height: $input-height;
54
38
  padding: 9px 10px;
55
39
  }
40
+
41
+ .ant-form-item.ant-form-item:not(.ant-form-item-with-help) {
42
+ margin: 0 0 12px;
43
+ }
44
+
45
+ .ant-form-item-explain.ant-form-item-explain {
46
+ height: auto;
47
+ min-height: auto;
48
+ margin: 0 0 12px;
49
+ font-size: 12px;
50
+ line-height: 14px;
51
+ }
52
+ }
53
+
54
+ .param-image-upload.param-image-upload {
55
+
56
+ .react-file-input {
57
+ border-color: $border-color;
58
+ }
56
59
  }
@@ -15,13 +15,13 @@
15
15
  width: 160px;
16
16
  }
17
17
 
18
- &:first-child:last-child {
19
-
20
- .param-arr-ops-del {
21
- visibility: hidden;
22
- pointer-events: none;
23
- }
24
- }
18
+ //&:first-child:last-child {
19
+ //
20
+ // .param-arr-ops-del {
21
+ // visibility: hidden;
22
+ // pointer-events: none;
23
+ // }
24
+ //}
25
25
  }
26
26
 
27
27
  .param-arr-ops {
package/lib/css/index.css CHANGED
@@ -1 +1 @@
1
- .param-parent-selector.readonly .ant-select-selector{padding:0 !important;border-color:transparent !important;background:transparent !important;cursor:initial !important}.param-parent-selector.readonly .ant-select-selection-item{color:#333 !important}.param-parent-selector.readonly .ant-select-arrow{display:none !important}.param-form.param-value-editor .ant-form-item-label,.param-value-editor.param-value-editor .ant-form-item-label{width:100px}.param-form .ant-form-item-label,.param-value-editor .ant-form-item-label{width:80px;text-align:left}.param-form .ant-form-item-label>label,.param-value-editor .ant-form-item-label>label{height:40px}.param-form .ant-form-item-label>label:before,.param-value-editor .ant-form-item-label>label:before{content:none !important}.param-form .ant-form-item-label>label:after,.param-value-editor .ant-form-item-label>label:after{content:none !important}.param-form .ant-form-item-label>label.ant-form-item-required:after,.param-value-editor .ant-form-item-label>label.ant-form-item-required:after{display:inline-block;margin-left:4px;color:#ff4d4f;font-size:14px;line-height:1;content:"*" !important}.param-form input.ant-input.ant-input,.param-form .ant-select-selector.ant-select-selector,.param-form .ant-cascader.ant-cascader,.param-value-editor input.ant-input.ant-input,.param-value-editor .ant-select-selector.ant-select-selector,.param-value-editor .ant-cascader.ant-cascader{height:40px !important}.param-form input.ant-input.ant-input input,.param-form input.ant-input.ant-input .ant-select-selection-placeholder,.param-form input.ant-input.ant-input .ant-select-selection-item,.param-form .ant-select-selector.ant-select-selector input,.param-form .ant-select-selector.ant-select-selector .ant-select-selection-placeholder,.param-form .ant-select-selector.ant-select-selector .ant-select-selection-item,.param-form .ant-cascader.ant-cascader input,.param-form .ant-cascader.ant-cascader .ant-select-selection-placeholder,.param-form .ant-cascader.ant-cascader .ant-select-selection-item,.param-value-editor input.ant-input.ant-input input,.param-value-editor input.ant-input.ant-input .ant-select-selection-placeholder,.param-value-editor input.ant-input.ant-input .ant-select-selection-item,.param-value-editor .ant-select-selector.ant-select-selector input,.param-value-editor .ant-select-selector.ant-select-selector .ant-select-selection-placeholder,.param-value-editor .ant-select-selector.ant-select-selector .ant-select-selection-item,.param-value-editor .ant-cascader.ant-cascader input,.param-value-editor .ant-cascader.ant-cascader .ant-select-selection-placeholder,.param-value-editor .ant-cascader.ant-cascader .ant-select-selection-item{height:calc(40px - 2px) !important;line-height:calc(40px - 2px) !important}.param-form textarea.ant-input.ant-input,.param-value-editor textarea.ant-input.ant-input{height:100px;min-height:40px;padding:9px 10px}.param-bool{flex:1;display:flex;align-items:center;height:40px}.param-bool-option{display:inline-flex;align-items:center;margin:0 16px 0 0;cursor:pointer}.param-bool-option>svg{margin:0 5px 0 0}.param-expiries{position:relative;flex:1;max-width:100%;min-width:calc(7em + 24px + 2px);height:40px;padding:0 calc(1em + 14px) 0 10px;line-height:0;border:1px solid #d9d9d9;border-radius:2px;cursor:pointer;background:#fff}.param-expiries.readonly{padding:0;border-color:transparent;overflow:initial;white-space:initial;cursor:default;background:transparent}.param-expiries.multiple{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.param-expiries-arrow{position:absolute;top:50%;right:7px;margin:-0.5em 0 0;color:#d9d9d9 !important}.param-expiries-val{display:inline-block;margin:calc((40px - 20px - 2px) / 2) 6px 0 0;line-height:20px}.param-expiries-placeholder{display:inline-block;margin:calc((40px - 20px - 2px) / 2) 6px 0 0;line-height:20px;color:rgba(0,0,0,0.25);max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.param-expiries-multi-val{display:inline-block;margin:calc((40px - 20px - 2px) / 2) 6px 0 0;padding:0 3px 0 8px;line-height:20px;border-radius:2px;background:rgba(0,0,0,0.1)}.param-expiries-multi-val svg{display:inline-block;margin:0 0 0 4px;color:#999;cursor:pointer}.param-expiries-popover .ant-popover-inner-content{max-height:50vh;overflow-y:auto}.param-expiries-option{display:flex;align-items:center;justify-content:space-between;width:240px;margin:0 -16px;padding:0 16px;line-height:30px;color:rgba(51,51,51,0.6);cursor:pointer}.param-expiries-option.param-expiries-option-checked{font-weight:bold;color:#333}.param-expiries-option.param-expiries-option-disabled{cursor:not-allowed;opacity:0.5}.param-expiries-option:hover{color:#333;background:rgba(0,0,0,0.1)}.param-expiries-option svg{color:#57be6a}.param-expiries-limit{padding:calc((40px - 20px) / 2) 0}.param-expiries-limit .param-number-range{margin:0 0 0 10px}.param-expiries-limit .param-number-range-prefix{display:none}.param-expiries-limit .param-number-suffix{padding:0 7px}.param-expiries-limit-val{display:block}.param-expiries-limit-val:after{content:';'}.param-expiries-limit-val-sep{padding:0 4px;color:#999}.param-expiries-limit-inputs{display:grid;grid-row-gap:10px;grid-column-gap:10px;grid-template-rows:auto;grid-template-columns:auto auto auto auto}.param-expiries-limit-inputs .param-expiries,.param-expiries-limit-inputs .param-number-range,.param-expiries-limit-inputs .param-arr-ops{height:30px;margin:0}.param-expiries-limit-inputs .param-expiries.readonly,.param-expiries-limit-inputs .param-number-range.readonly,.param-expiries-limit-inputs .param-arr-ops.readonly{height:20px;line-height:18px}.param-expiries-limit-inputs .param-expiries.readonly .param-expiries-val,.param-expiries-limit-inputs .param-number-range.readonly .param-expiries-val,.param-expiries-limit-inputs .param-arr-ops.readonly .param-expiries-val{margin-top:0}.param-expiries-limit-inputs .param-expiries .param-expiries-placeholder,.param-expiries-limit-inputs .param-expiries .param-expiries-val,.param-expiries-limit-inputs .param-number-range .param-expiries-placeholder,.param-expiries-limit-inputs .param-number-range .param-expiries-val,.param-expiries-limit-inputs .param-arr-ops .param-expiries-placeholder,.param-expiries-limit-inputs .param-arr-ops .param-expiries-val{margin-top:4px}.param-expiries-limit-inputs .param-expiries .param-number-range-sep,.param-expiries-limit-inputs .param-number-range .param-number-range-sep,.param-expiries-limit-inputs .param-arr-ops .param-number-range-sep{margin:0 6px}.param-expiries-limit-inputs .param-arr-ops{padding:0}.param-expiries-popover{padding:0 !important}.param-expiries-popover .ant-popover-arrow{display:none}.param-number{flex:1;display:flex;align-items:center;height:40px}.param-number.readonly .param-number-suffix{padding:0;margin:0 0 0 1px;border:none;background:none}.param-number-val{position:relative;z-index:1;margin:0}.param-number-suffix{display:flex;align-items:center;justify-content:center;position:relative;z-index:0;flex:none;height:100%;padding:0 14px;margin:0 0 0 -2px;border-radius:2px;border:1px solid #d9d9d9;background:#f2f2f2}.param-number-range{flex:1;display:flex;align-items:center;height:40px}.param-number-range .param-number{height:100%}.param-number-range.readonly .param-number{flex:none}.param-number-range .param-number-range-prefix{margin:0 8px 0 0}.param-number-range .param-number-range-sep{margin:0 10px}.param-text-array{padding:calc((40px - 30px) / 2) 0}.param-arr-item{display:flex;align-items:center;height:30px;margin:0 0 4px}.param-arr-item>input{flex:none;width:160px}.param-arr-item:first-child:last-child .param-arr-ops-del{visibility:hidden;pointer-events:none}.param-arr-ops{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;height:100%;padding:0 10px}.param-arr-ops .param-arr-ops-add,.param-arr-ops .param-arr-ops-del{display:flex;align-items:center;justify-content:center;width:30px;height:100%;border-radius:4px;color:#006FA7}.param-arr-ops .param-arr-ops-add:hover,.param-arr-ops .param-arr-ops-del:hover{background:rgba(0,0,0,0.1)}.param-arr-ops .param-arr-ops-del{color:#d51414}.param-renderer{box-sizing:border-box;margin:0;line-height:20px;color:#333}.param-renderer.readonly input,.param-renderer.readonly select,.param-renderer.readonly .select{padding:0;border:none;box-shadow:none}.param-renderer *{box-sizing:border-box}.param-renderer input,.param-renderer select,.param-renderer .select{flex:1;width:50px;height:100%;padding:0 10px;border:1px solid #d9d9d9;border-radius:2px;outline:none;box-shadow:none;background:#fff}.param-renderer input::placeholder,.param-renderer select::placeholder,.param-renderer .select::placeholder{color:rgba(0,0,0,0.25)}.param-renderer input:hover,.param-renderer select:hover,.param-renderer .select:hover{border-color:#006FA7}.param-renderer input:focus,.param-renderer select:focus,.param-renderer .select:focus{border-color:#006FA7;box-shadow:0 0 0 2px rgba(0,111,167,0.1)}
1
+ .param-parent-selector.readonly .ant-select-selector{padding:0 !important;border-color:transparent !important;background:transparent !important;cursor:initial !important}.param-parent-selector.readonly .ant-select-selection-item{color:#333 !important}.param-parent-selector.readonly .ant-select-arrow{display:none !important}.param-form.param-value-editor .ant-form-item-label,.param-value-editor.param-value-editor .ant-form-item-label{width:100px}.param-form .ant-form-item-label,.param-value-editor .ant-form-item-label{width:80px;padding:0 15px 0 0}.param-form .ant-form-item-label>label,.param-value-editor .ant-form-item-label>label{height:40px}.param-form .ant-form-item-label>label:after,.param-value-editor .ant-form-item-label>label:after{content:none !important}.param-form input.ant-input.ant-input,.param-form .ant-select-selector.ant-select-selector,.param-form .ant-cascader.ant-cascader,.param-value-editor input.ant-input.ant-input,.param-value-editor .ant-select-selector.ant-select-selector,.param-value-editor .ant-cascader.ant-cascader{height:40px !important}.param-form input.ant-input.ant-input input,.param-form input.ant-input.ant-input .ant-select-selection-placeholder,.param-form input.ant-input.ant-input .ant-select-selection-item,.param-form .ant-select-selector.ant-select-selector input,.param-form .ant-select-selector.ant-select-selector .ant-select-selection-placeholder,.param-form .ant-select-selector.ant-select-selector .ant-select-selection-item,.param-form .ant-cascader.ant-cascader input,.param-form .ant-cascader.ant-cascader .ant-select-selection-placeholder,.param-form .ant-cascader.ant-cascader .ant-select-selection-item,.param-value-editor input.ant-input.ant-input input,.param-value-editor input.ant-input.ant-input .ant-select-selection-placeholder,.param-value-editor input.ant-input.ant-input .ant-select-selection-item,.param-value-editor .ant-select-selector.ant-select-selector input,.param-value-editor .ant-select-selector.ant-select-selector .ant-select-selection-placeholder,.param-value-editor .ant-select-selector.ant-select-selector .ant-select-selection-item,.param-value-editor .ant-cascader.ant-cascader input,.param-value-editor .ant-cascader.ant-cascader .ant-select-selection-placeholder,.param-value-editor .ant-cascader.ant-cascader .ant-select-selection-item{height:calc(40px - 2px) !important;line-height:calc(40px - 2px) !important}.param-form textarea.ant-input.ant-input,.param-value-editor textarea.ant-input.ant-input{height:100px;min-height:40px;padding:9px 10px}.param-form .ant-form-item.ant-form-item:not(.ant-form-item-with-help),.param-value-editor .ant-form-item.ant-form-item:not(.ant-form-item-with-help){margin:0 0 12px}.param-form .ant-form-item-explain.ant-form-item-explain,.param-value-editor .ant-form-item-explain.ant-form-item-explain{height:auto;min-height:auto;margin:0 0 12px;font-size:12px;line-height:14px}.param-image-upload.param-image-upload .react-file-input{border-color:#d9d9d9}.param-bool{flex:1;display:flex;align-items:center;height:40px}.param-bool-option{display:inline-flex;align-items:center;margin:0 16px 0 0;cursor:pointer}.param-bool-option>svg{margin:0 5px 0 0}.param-expiries{position:relative;flex:1;max-width:100%;min-width:calc(7em + 24px + 2px);height:40px;padding:0 calc(1em + 14px) 0 10px;line-height:0;border:1px solid #d9d9d9;border-radius:2px;cursor:pointer;background:#fff}.param-expiries.readonly{padding:0;border-color:transparent;overflow:initial;white-space:initial;cursor:default;background:transparent}.param-expiries.multiple{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.param-expiries-arrow{position:absolute;top:50%;right:7px;margin:-0.5em 0 0;color:#d9d9d9 !important}.param-expiries-val{display:inline-block;margin:calc((40px - 20px - 2px) / 2) 6px 0 0;line-height:20px}.param-expiries-placeholder{display:inline-block;margin:calc((40px - 20px - 2px) / 2) 6px 0 0;line-height:20px;color:rgba(0,0,0,0.25);max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.param-expiries-multi-val{display:inline-block;margin:calc((40px - 20px - 2px) / 2) 6px 0 0;padding:0 3px 0 8px;line-height:20px;border-radius:2px;background:rgba(0,0,0,0.1)}.param-expiries-multi-val svg{display:inline-block;margin:0 0 0 4px;color:#999;cursor:pointer}.param-expiries-popover .ant-popover-inner-content{max-height:50vh;overflow-y:auto}.param-expiries-option{display:flex;align-items:center;justify-content:space-between;width:240px;margin:0 -16px;padding:0 16px;line-height:30px;color:rgba(51,51,51,0.6);cursor:pointer}.param-expiries-option.param-expiries-option-checked{font-weight:bold;color:#333}.param-expiries-option.param-expiries-option-disabled{cursor:not-allowed;opacity:0.5}.param-expiries-option:hover{color:#333;background:rgba(0,0,0,0.1)}.param-expiries-option svg{color:#57be6a}.param-expiries-limit{padding:calc((40px - 20px) / 2) 0}.param-expiries-limit .param-number-range{margin:0 0 0 10px}.param-expiries-limit .param-number-range-prefix{display:none}.param-expiries-limit .param-number-suffix{padding:0 7px}.param-expiries-limit-val{display:block}.param-expiries-limit-val:after{content:';'}.param-expiries-limit-val-sep{padding:0 4px;color:#999}.param-expiries-limit-inputs{display:grid;grid-row-gap:10px;grid-column-gap:10px;grid-template-rows:auto;grid-template-columns:auto auto auto auto}.param-expiries-limit-inputs .param-expiries,.param-expiries-limit-inputs .param-number-range,.param-expiries-limit-inputs .param-arr-ops{height:30px;margin:0}.param-expiries-limit-inputs .param-expiries.readonly,.param-expiries-limit-inputs .param-number-range.readonly,.param-expiries-limit-inputs .param-arr-ops.readonly{height:20px;line-height:18px}.param-expiries-limit-inputs .param-expiries.readonly .param-expiries-val,.param-expiries-limit-inputs .param-number-range.readonly .param-expiries-val,.param-expiries-limit-inputs .param-arr-ops.readonly .param-expiries-val{margin-top:0}.param-expiries-limit-inputs .param-expiries .param-expiries-placeholder,.param-expiries-limit-inputs .param-expiries .param-expiries-val,.param-expiries-limit-inputs .param-number-range .param-expiries-placeholder,.param-expiries-limit-inputs .param-number-range .param-expiries-val,.param-expiries-limit-inputs .param-arr-ops .param-expiries-placeholder,.param-expiries-limit-inputs .param-arr-ops .param-expiries-val{margin-top:4px}.param-expiries-limit-inputs .param-expiries .param-number-range-sep,.param-expiries-limit-inputs .param-number-range .param-number-range-sep,.param-expiries-limit-inputs .param-arr-ops .param-number-range-sep{margin:0 6px}.param-expiries-limit-inputs .param-arr-ops{padding:0}.param-expiries-popover{padding:0 !important}.param-expiries-popover .ant-popover-arrow{display:none}.param-number{flex:1;display:flex;align-items:center;height:40px}.param-number.readonly .param-number-suffix{padding:0;margin:0 0 0 1px;border:none;background:none}.param-number-val{position:relative;z-index:1;margin:0}.param-number-suffix{display:flex;align-items:center;justify-content:center;position:relative;z-index:0;flex:none;height:100%;padding:0 14px;margin:0 0 0 -2px;border-radius:2px;border:1px solid #d9d9d9;background:#f2f2f2}.param-number-range{flex:1;display:flex;align-items:center;height:40px}.param-number-range .param-number{height:100%}.param-number-range.readonly .param-number{flex:none}.param-number-range .param-number-range-prefix{margin:0 8px 0 0}.param-number-range .param-number-range-sep{margin:0 10px}.param-text-array{padding:calc((40px - 30px) / 2) 0}.param-arr-item{display:flex;align-items:center;height:30px;margin:0 0 4px}.param-arr-item>input{flex:none;width:160px}.param-arr-ops{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;height:100%;padding:0 10px}.param-arr-ops .param-arr-ops-add,.param-arr-ops .param-arr-ops-del{display:flex;align-items:center;justify-content:center;width:30px;height:100%;border-radius:4px;color:#006FA7}.param-arr-ops .param-arr-ops-add:hover,.param-arr-ops .param-arr-ops-del:hover{background:rgba(0,0,0,0.1)}.param-arr-ops .param-arr-ops-del{color:#d51414}.param-renderer{box-sizing:border-box;margin:0;line-height:20px;color:#333}.param-renderer.readonly input,.param-renderer.readonly select,.param-renderer.readonly .select{padding:0;border:none;box-shadow:none}.param-renderer *{box-sizing:border-box}.param-renderer input,.param-renderer select,.param-renderer .select{flex:1;width:50px;height:100%;padding:0 10px;border:1px solid #d9d9d9;border-radius:2px;outline:none;box-shadow:none;background:#fff}.param-renderer input::placeholder,.param-renderer select::placeholder,.param-renderer .select::placeholder{color:rgba(0,0,0,0.25)}.param-renderer input:hover,.param-renderer select:hover,.param-renderer .select:hover{border-color:#006FA7}.param-renderer input:focus,.param-renderer select:focus,.param-renderer .select:focus{border-color:#006FA7;box-shadow:0 0 0 2px rgba(0,111,167,0.1)}