@salutejs/sdds-cs 0.335.0-canary.2368.19872331595.0 → 0.335.0-canary.2368.19905223880.0
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/README.mdx +1 -1
- package/components/Mask/Mask.d.ts +17 -33
- package/components/Radiobox/Radiobox.d.ts +2 -2
- package/components/TextField/TextField.clear.config.d.ts +32 -0
- package/components/TextField/TextField.clear.config.js +298 -0
- package/components/TextField/TextField.config.d.ts +0 -3
- package/components/TextField/TextField.config.js +26 -50
- package/components/TextField/TextField.d.ts +835 -7
- package/components/TextField/TextField.js +28 -5
- package/emotion/cjs/components/TextField/TextField.clear.config.js +298 -0
- package/emotion/cjs/components/TextField/TextField.config.js +26 -50
- package/emotion/cjs/components/TextField/TextField.js +28 -5
- package/emotion/es/components/TextField/TextField.clear.config.js +288 -0
- package/emotion/es/components/TextField/TextField.config.js +26 -50
- package/emotion/es/components/TextField/TextField.js +15 -5
- package/es/components/TextField/TextField.clear.config.js +288 -0
- package/es/components/TextField/TextField.config.js +26 -50
- package/es/components/TextField/TextField.js +15 -5
- package/package.json +7 -16
|
@@ -0,0 +1,288 @@
|
|
|
1
|
+
function _tagged_template_literal(strings, raw) {
|
|
2
|
+
if (!raw) {
|
|
3
|
+
raw = strings.slice(0);
|
|
4
|
+
}
|
|
5
|
+
return Object.freeze(Object.defineProperties(strings, {
|
|
6
|
+
raw: {
|
|
7
|
+
value: Object.freeze(raw)
|
|
8
|
+
}
|
|
9
|
+
}));
|
|
10
|
+
}
|
|
11
|
+
function _templateObject() {
|
|
12
|
+
var data = _tagged_template_literal([
|
|
13
|
+
"\n ",
|
|
14
|
+
": var(--text-primary);\n\n ",
|
|
15
|
+
": var(--text-secondary);\n ",
|
|
16
|
+
": var(--text-tertiary);\n\n ",
|
|
17
|
+
": transparent;\n ",
|
|
18
|
+
": transparent;\n ",
|
|
19
|
+
": transparent;\n ",
|
|
20
|
+
": var(--text-accent);\n ",
|
|
21
|
+
": var(--text-tertiary);\n ",
|
|
22
|
+
": var(--text-tertiary);\n ",
|
|
23
|
+
": var(--text-primary);\n ",
|
|
24
|
+
": var(--text-secondary);\n ",
|
|
25
|
+
": var(--text-secondary);\n ",
|
|
26
|
+
": var(--text-secondary);\n\n ",
|
|
27
|
+
": var(--text-secondary);\n ",
|
|
28
|
+
": var(--text-secondary-hover);\n ",
|
|
29
|
+
": var(--text-secondary-active);\n ",
|
|
30
|
+
": var(--text-accent);\n ",
|
|
31
|
+
": var(--text-accent-minor);\n ",
|
|
32
|
+
": var(--text-accent-active);\n\n ",
|
|
33
|
+
": var(--outline-solid-primary);\n ",
|
|
34
|
+
": var(--text-secondary);\n ",
|
|
35
|
+
": var(--surface-accent);\n\n ",
|
|
36
|
+
": var(--text-accent);\n ",
|
|
37
|
+
": var(--surface-negative);\n ",
|
|
38
|
+
": var(--text-tertiary);\n "
|
|
39
|
+
]);
|
|
40
|
+
_templateObject = function _templateObject() {
|
|
41
|
+
return data;
|
|
42
|
+
};
|
|
43
|
+
return data;
|
|
44
|
+
}
|
|
45
|
+
function _templateObject1() {
|
|
46
|
+
var data = _tagged_template_literal([
|
|
47
|
+
"\n ",
|
|
48
|
+
": var(--text-negative);\n\n ",
|
|
49
|
+
": var(--text-negative);\n ",
|
|
50
|
+
": var(--text-negative);\n\n ",
|
|
51
|
+
": transparent;\n ",
|
|
52
|
+
": transparent;\n ",
|
|
53
|
+
": transparent;\n ",
|
|
54
|
+
": var(--text-accent);\n ",
|
|
55
|
+
": var(--text-secondary);\n ",
|
|
56
|
+
": var(--text-secondary);\n ",
|
|
57
|
+
": var(--text-primary);\n ",
|
|
58
|
+
": var(--text-negative);\n ",
|
|
59
|
+
": var(--text-secondary);\n ",
|
|
60
|
+
": var(--text-secondary);\n\n ",
|
|
61
|
+
": var(--text-negative);\n ",
|
|
62
|
+
": var(--text-negative-hover);\n ",
|
|
63
|
+
": var(--text-negative-active);\n\n ",
|
|
64
|
+
": var(--text-secondary);\n ",
|
|
65
|
+
": var(--text-secondary-hover);\n ",
|
|
66
|
+
": var(--text-secondary-active);\n\n ",
|
|
67
|
+
": var(--surface-negative);\n ",
|
|
68
|
+
": var(--surface-negative);\n ",
|
|
69
|
+
": var(--surface-accent);\n\n ",
|
|
70
|
+
": var(--text-negative);\n ",
|
|
71
|
+
": var(--surface-negative);\n ",
|
|
72
|
+
": var(--text-tertiary);\n "
|
|
73
|
+
]);
|
|
74
|
+
_templateObject1 = function _templateObject() {
|
|
75
|
+
return data;
|
|
76
|
+
};
|
|
77
|
+
return data;
|
|
78
|
+
}
|
|
79
|
+
function _templateObject2() {
|
|
80
|
+
var data = _tagged_template_literal([
|
|
81
|
+
"\n ",
|
|
82
|
+
": 2.5rem;\n ",
|
|
83
|
+
": 0.6875rem 0;\n ",
|
|
84
|
+
": 0.375rem 0;\n ",
|
|
85
|
+
": 0;\n\n ",
|
|
86
|
+
": -0.1875rem 0.25rem -0.1875rem 0;\n ",
|
|
87
|
+
": -0.1875rem 0 -0.1875rem 0.75rem;\n\n ",
|
|
88
|
+
": var(--plasma-typo-body-m-font-family);\n ",
|
|
89
|
+
": var(--plasma-typo-body-m-font-size);\n ",
|
|
90
|
+
": var(--plasma-typo-body-m-font-style);\n ",
|
|
91
|
+
": var(--plasma-typo-body-m-font-weight);\n ",
|
|
92
|
+
": var(--plasma-typo-body-m-letter-spacing);\n ",
|
|
93
|
+
": var(--plasma-typo-body-m-line-height);\n\n ",
|
|
94
|
+
": 0.5rem;\n ",
|
|
95
|
+
": var(--plasma-typo-body-s-font-family);\n ",
|
|
96
|
+
": var(--plasma-typo-body-s-font-size);\n ",
|
|
97
|
+
": var(--plasma-typo-body-s-font-style);\n ",
|
|
98
|
+
": var(--plasma-typo-body-s-font-weight);\n ",
|
|
99
|
+
": var(--plasma-typo-body-s-letter-spacing);\n ",
|
|
100
|
+
": var(--plasma-typo-body-s-line-height);\n\n ",
|
|
101
|
+
": -0.688rem -0.5rem;\n ",
|
|
102
|
+
": 2.375rem;\n ",
|
|
103
|
+
": 0.062rem -2.1063rem auto auto;\n\n ",
|
|
104
|
+
": 0.25rem;\n ",
|
|
105
|
+
": var(--plasma-typo-body-xs-font-family);\n ",
|
|
106
|
+
": var(--plasma-typo-body-xs-font-size);\n ",
|
|
107
|
+
": var(--plasma-typo-body-xs-font-style);\n ",
|
|
108
|
+
": var(--plasma-typo-body-xs-font-weight);\n ",
|
|
109
|
+
": var(--plasma-typo-body-xs-letter-spacing);\n ",
|
|
110
|
+
": var(--plasma-typo-body-xs-line-height);\n\n ",
|
|
111
|
+
": 0.25rem;\n ",
|
|
112
|
+
": var(--plasma-typo-body-s-font-family);\n ",
|
|
113
|
+
": var(--plasma-typo-body-s-font-size);\n ",
|
|
114
|
+
": var(--plasma-typo-body-s-font-style);\n ",
|
|
115
|
+
": var(--plasma-typo-body-s-font-weight);\n ",
|
|
116
|
+
": var(--plasma-typo-body-s-letter-spacing);\n ",
|
|
117
|
+
": var(--plasma-typo-body-s-line-height);\n\n ",
|
|
118
|
+
": 0.3125rem 0 0 0;\n ",
|
|
119
|
+
": 1.0625rem 0 0.3125rem 0;\n ",
|
|
120
|
+
": 0 0.25rem 0 0;\n ",
|
|
121
|
+
": 0 0 0 0.25rem;\n\n ",
|
|
122
|
+
": 0.25rem;\n ",
|
|
123
|
+
": 0.25rem;\n ",
|
|
124
|
+
": auto;\n ",
|
|
125
|
+
": 1.75rem;\n ",
|
|
126
|
+
": 0 0.5rem 0 0.75rem;\n ",
|
|
127
|
+
": 0.375rem;\n ",
|
|
128
|
+
": 0rem;\n ",
|
|
129
|
+
": 1rem;\n ",
|
|
130
|
+
": var(--plasma-typo-body-s-font-family);\n ",
|
|
131
|
+
": var(--plasma-typo-body-s-font-size);\n ",
|
|
132
|
+
": var(--plasma-typo-body-s-font-style);\n ",
|
|
133
|
+
": var(--plasma-typo-body-s-font-weight);\n ",
|
|
134
|
+
": var(--plasma-typo-body-s-letter-spacing);\n ",
|
|
135
|
+
": var(--plasma-typo-body-s-line-height);\n\n ",
|
|
136
|
+
": 0.375rem;\n ",
|
|
137
|
+
": 0.375rem;\n ",
|
|
138
|
+
": 1.063rem auto auto -0.75rem;\n ",
|
|
139
|
+
": 0.3125rem auto auto -0.6875rem;\n ",
|
|
140
|
+
": 1.063rem -0.75rem auto auto;\n ",
|
|
141
|
+
": 0.25rem -0.625rem auto auto;\n "
|
|
142
|
+
]);
|
|
143
|
+
_templateObject2 = function _templateObject() {
|
|
144
|
+
return data;
|
|
145
|
+
};
|
|
146
|
+
return data;
|
|
147
|
+
}
|
|
148
|
+
function _templateObject3() {
|
|
149
|
+
var data = _tagged_template_literal([
|
|
150
|
+
""
|
|
151
|
+
]);
|
|
152
|
+
_templateObject3 = function _templateObject() {
|
|
153
|
+
return data;
|
|
154
|
+
};
|
|
155
|
+
return data;
|
|
156
|
+
}
|
|
157
|
+
function _templateObject4() {
|
|
158
|
+
var data = _tagged_template_literal([
|
|
159
|
+
"\n ",
|
|
160
|
+
": var(--surface-solid-card-brightness);\n ",
|
|
161
|
+
": var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08));\n ",
|
|
162
|
+
": var(--text-primary);\n ",
|
|
163
|
+
": var(--surface-solid-card-brightness);\n "
|
|
164
|
+
]);
|
|
165
|
+
_templateObject4 = function _templateObject() {
|
|
166
|
+
return data;
|
|
167
|
+
};
|
|
168
|
+
return data;
|
|
169
|
+
}
|
|
170
|
+
function _templateObject5() {
|
|
171
|
+
var data = _tagged_template_literal([
|
|
172
|
+
"\n ",
|
|
173
|
+
": 0.6875rem;\n ",
|
|
174
|
+
": 0.875rem;\n ",
|
|
175
|
+
": 0.6875rem;\n ",
|
|
176
|
+
": 0.875rem;\n\n ",
|
|
177
|
+
": 2.5rem;\n ",
|
|
178
|
+
": 0.625rem;\n\n ",
|
|
179
|
+
": var(--plasma-typo-body-s-font-family);\n ",
|
|
180
|
+
": var(--plasma-typo-body-s-font-size);\n ",
|
|
181
|
+
": var(--plasma-typo-body-s-font-style);\n ",
|
|
182
|
+
": var(--plasma-typo-body-s-font-weight);\n ",
|
|
183
|
+
": var(--plasma-typo-body-s-letter-spacing);\n ",
|
|
184
|
+
": var(--plasma-typo-body-s-line-height);\n\n ",
|
|
185
|
+
": 0.375rem;\n\n ",
|
|
186
|
+
": 1.25rem;\n ",
|
|
187
|
+
": 1.25rem;\n ",
|
|
188
|
+
': url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg==");\n ',
|
|
189
|
+
": 0.5rem;\n ",
|
|
190
|
+
": 0.625rem;\n "
|
|
191
|
+
]);
|
|
192
|
+
_templateObject5 = function _templateObject() {
|
|
193
|
+
return data;
|
|
194
|
+
};
|
|
195
|
+
return data;
|
|
196
|
+
}
|
|
197
|
+
function _templateObject6() {
|
|
198
|
+
var data = _tagged_template_literal([
|
|
199
|
+
"\n ",
|
|
200
|
+
": 0.5rem;\n ",
|
|
201
|
+
": 0.75rem;\n ",
|
|
202
|
+
": 0.5rem;\n ",
|
|
203
|
+
": 0.75rem;\n\n ",
|
|
204
|
+
": 2rem;\n ",
|
|
205
|
+
": 0.5rem;\n\n ",
|
|
206
|
+
": var(--plasma-typo-body-xs-font-family);\n ",
|
|
207
|
+
": var(--plasma-typo-body-xs-font-size);\n ",
|
|
208
|
+
": var(--plasma-typo-body-xs-font-style);\n ",
|
|
209
|
+
": var(--plasma-typo-body-xs-font-weight);\n ",
|
|
210
|
+
": var(--plasma-typo-body-xs-letter-spacing);\n ",
|
|
211
|
+
": var(--plasma-typo-body-xs-line-height);\n\n ",
|
|
212
|
+
": 0.25rem;\n\n ",
|
|
213
|
+
": 1rem;\n ",
|
|
214
|
+
": 1rem;\n ",
|
|
215
|
+
': url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+");\n ',
|
|
216
|
+
": 0.375rem;\n ",
|
|
217
|
+
": 0.5625rem;\n "
|
|
218
|
+
]);
|
|
219
|
+
_templateObject6 = function _templateObject() {
|
|
220
|
+
return data;
|
|
221
|
+
};
|
|
222
|
+
return data;
|
|
223
|
+
}
|
|
224
|
+
function _templateObject7() {
|
|
225
|
+
var data = _tagged_template_literal([
|
|
226
|
+
"\n ",
|
|
227
|
+
": 1;\n ",
|
|
228
|
+
": var(--surface-solid-primary);\n ",
|
|
229
|
+
": var(--surface-solid-primary);\n ",
|
|
230
|
+
": var(--surface-solid-primary);\n ",
|
|
231
|
+
": var(--text-secondary);\n "
|
|
232
|
+
]);
|
|
233
|
+
_templateObject7 = function _templateObject() {
|
|
234
|
+
return data;
|
|
235
|
+
};
|
|
236
|
+
return data;
|
|
237
|
+
}
|
|
238
|
+
function _templateObject8() {
|
|
239
|
+
var data = _tagged_template_literal([
|
|
240
|
+
"\n ",
|
|
241
|
+
": 1;\n ",
|
|
242
|
+
": var(--text-primary);\n ",
|
|
243
|
+
": var(--surface-clear);\n ",
|
|
244
|
+
": var(--text-secondary);\n ",
|
|
245
|
+
": var(--text-secondary);\n ",
|
|
246
|
+
": var(--text-secondary);\n ",
|
|
247
|
+
": var(--text-primary);\n ",
|
|
248
|
+
": var(--outline-solid-secondary);\n ",
|
|
249
|
+
": 0.4;\n "
|
|
250
|
+
]);
|
|
251
|
+
_templateObject8 = function _templateObject() {
|
|
252
|
+
return data;
|
|
253
|
+
};
|
|
254
|
+
return data;
|
|
255
|
+
}
|
|
256
|
+
import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
|
|
257
|
+
export var config = {
|
|
258
|
+
defaults: {
|
|
259
|
+
view: 'default',
|
|
260
|
+
size: 's',
|
|
261
|
+
labelPlacement: 'outer'
|
|
262
|
+
},
|
|
263
|
+
variations: {
|
|
264
|
+
view: {
|
|
265
|
+
default: css(_templateObject(), tokens.color, tokens.placeholderColor, tokens.placeholderColorFocus, tokens.backgroundColor, tokens.backgroundColorHover, tokens.backgroundColorFocus, tokens.caretColor, tokens.textBeforeColor, tokens.textAfterColor, tokens.labelColor, tokens.leftHelperColor, tokens.titleCaptionColor, tokens.hintIconColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.contentSlotRightColor, tokens.contentSlotRightColorHover, tokens.contentSlotRightColorActive, tokens.dividerColor, tokens.dividerColorHover, tokens.dividerColorFocus, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor),
|
|
266
|
+
negative: css(_templateObject1(), tokens.color, tokens.placeholderColor, tokens.placeholderColorFocus, tokens.backgroundColor, tokens.backgroundColorHover, tokens.backgroundColorFocus, tokens.caretColor, tokens.textBeforeColor, tokens.textAfterColor, tokens.labelColor, tokens.leftHelperColor, tokens.titleCaptionColor, tokens.hintIconColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.contentSlotRightColor, tokens.contentSlotRightColorHover, tokens.contentSlotRightColorActive, tokens.dividerColor, tokens.dividerColorHover, tokens.dividerColorFocus, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor)
|
|
267
|
+
},
|
|
268
|
+
size: {
|
|
269
|
+
s: css(_templateObject2(), tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.hintMargin, tokens.hintTargetSize, tokens.hintInnerLabelPlacementOffset, tokens.titleCaptionInnerLabelOffset, tokens.titleCaptionFontFamily, tokens.titleCaptionFontSize, tokens.titleCaptionFontStyle, tokens.titleCaptionFontWeight, tokens.titleCaptionLetterSpacing, tokens.titleCaptionLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.textBeforeMargin, tokens.textAfterMargin, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPadding, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.indicatorSizeInner, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementInnerRight, tokens.indicatorLabelPlacementOuterRight)
|
|
270
|
+
},
|
|
271
|
+
labelPlacement: {
|
|
272
|
+
outer: css(_templateObject3())
|
|
273
|
+
},
|
|
274
|
+
hintView: {
|
|
275
|
+
default: css(_templateObject4(), tokens.tooltipBackgroundColor, tokens.tooltipBoxShadow, tokens.tooltipColor, tokens.tooltipArrowBackground)
|
|
276
|
+
},
|
|
277
|
+
hintSize: {
|
|
278
|
+
m: css(_templateObject5(), tokens.tooltipPaddingTop, tokens.tooltipPaddingRight, tokens.tooltipPaddingBottom, tokens.tooltipPaddingLeft, tokens.tooltipMinHeight, tokens.tooltipBorderRadius, tokens.tooltipTextFontFamily, tokens.tooltipTextFontSize, tokens.tooltipTextFontStyle, tokens.tooltipTextFontWeight, tokens.tooltipTextFontLetterSpacing, tokens.tooltipTextFontLineHeight, tokens.tooltipContentLeftMargin, tokens.tooltipArrowMaskWidth, tokens.tooltipArrowMaskHeight, tokens.tooltipArrowMaskImage, tokens.tooltipArrowHeight, tokens.tooltipArrowEdgeMargin),
|
|
279
|
+
s: css(_templateObject6(), tokens.tooltipPaddingTop, tokens.tooltipPaddingRight, tokens.tooltipPaddingBottom, tokens.tooltipPaddingLeft, tokens.tooltipMinHeight, tokens.tooltipBorderRadius, tokens.tooltipTextFontFamily, tokens.tooltipTextFontSize, tokens.tooltipTextFontStyle, tokens.tooltipTextFontWeight, tokens.tooltipTextFontLetterSpacing, tokens.tooltipTextFontLineHeight, tokens.tooltipContentLeftMargin, tokens.tooltipArrowMaskWidth, tokens.tooltipArrowMaskHeight, tokens.tooltipArrowMaskImage, tokens.tooltipArrowHeight, tokens.tooltipArrowEdgeMargin)
|
|
280
|
+
},
|
|
281
|
+
disabled: {
|
|
282
|
+
true: css(_templateObject7(), tokens.disabledOpacity, tokens.dividerColor, tokens.dividerColorHover, tokens.dividerColorFocus, tokens.color)
|
|
283
|
+
},
|
|
284
|
+
readOnly: {
|
|
285
|
+
true: css(_templateObject8(), tokens.readOnlyOpacity, tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.placeholderColorReadOnly, tokens.leftHelperColorReadOnly, tokens.titleCaptionColorReadOnly, tokens.labelColorReadOnly, tokens.dividerColorReadOnly, tokens.contentSlotRightOpacityReadOnly)
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
};
|
|
@@ -12,15 +12,12 @@ function _templateObject() {
|
|
|
12
12
|
var data = _tagged_template_literal([
|
|
13
13
|
"\n ",
|
|
14
14
|
": var(--text-primary);\n ",
|
|
15
|
-
": var(--text-primary);\n ",
|
|
16
15
|
": var(--surface-solid-card);\n ",
|
|
17
16
|
": var(--surface-solid-card-active);\n ",
|
|
18
17
|
": var(--text-accent);\n ",
|
|
19
18
|
": var(--text-secondary);\n ",
|
|
20
19
|
": var(--text-tertiary);\n ",
|
|
21
20
|
": var(--text-secondary);\n ",
|
|
22
|
-
": var(--text-tertiary);\n ",
|
|
23
|
-
": var(--text-secondary);\n ",
|
|
24
21
|
": var(--text-secondary);\n ",
|
|
25
22
|
": var(--text-primary);\n ",
|
|
26
23
|
": var(--text-secondary);\n ",
|
|
@@ -32,9 +29,6 @@ function _templateObject() {
|
|
|
32
29
|
": var(--text-accent);\n ",
|
|
33
30
|
": var(--text-accent-minor);\n ",
|
|
34
31
|
": var(--text-accent-active);\n\n ",
|
|
35
|
-
": var(--outline-solid-primary);\n ",
|
|
36
|
-
": var(--text-secondary);\n ",
|
|
37
|
-
": var(--surface-accent);\n\n ",
|
|
38
32
|
": var(--text-secondary);\n ",
|
|
39
33
|
": var(--text-secondary);\n ",
|
|
40
34
|
": var(--text-primary);\n ",
|
|
@@ -65,23 +59,23 @@ function _templateObject1() {
|
|
|
65
59
|
var data = _tagged_template_literal([
|
|
66
60
|
"\n ",
|
|
67
61
|
": var(--text-primary);\n ",
|
|
68
|
-
": var(--text-negative);\n ",
|
|
69
62
|
": var(--surface-solid-card);\n ",
|
|
70
63
|
": var(--surface-solid-card-active);\n ",
|
|
71
64
|
": var(--text-accent);\n ",
|
|
72
65
|
": var(--text-secondary);\n ",
|
|
73
|
-
": var(--text-negative);\n ",
|
|
74
66
|
": var(--text-tertiary);\n ",
|
|
75
|
-
": var(--text-negative);\n ",
|
|
76
67
|
": var(--text-secondary);\n ",
|
|
77
68
|
": var(--text-secondary);\n ",
|
|
78
69
|
": var(--text-primary);\n ",
|
|
79
70
|
": var(--text-negative);\n ",
|
|
80
71
|
": var(--text-secondary);\n ",
|
|
81
72
|
": var(--text-secondary);\n\n ",
|
|
82
|
-
": var(--
|
|
83
|
-
": var(--
|
|
84
|
-
": var(--
|
|
73
|
+
": var(--text-negative);\n ",
|
|
74
|
+
": var(--text-negative-hover);\n ",
|
|
75
|
+
": var(--text-negative-active);\n ",
|
|
76
|
+
": var(--text-accent);\n ",
|
|
77
|
+
": var(--text-accent-minor);\n ",
|
|
78
|
+
": var(--text-accent-active);\n\n ",
|
|
85
79
|
": var(--text-secondary);\n ",
|
|
86
80
|
": var(--text-secondary);\n ",
|
|
87
81
|
": var(--text-primary);\n ",
|
|
@@ -125,7 +119,6 @@ function _templateObject2() {
|
|
|
125
119
|
": var(--plasma-typo-body-m-letter-spacing);\n ",
|
|
126
120
|
": var(--plasma-typo-body-m-line-height);\n\n ",
|
|
127
121
|
": 0.5rem;\n ",
|
|
128
|
-
": 0.5rem;\n ",
|
|
129
122
|
": var(--plasma-typo-body-s-font-family);\n ",
|
|
130
123
|
": var(--plasma-typo-body-s-font-size);\n ",
|
|
131
124
|
": var(--plasma-typo-body-s-font-style);\n ",
|
|
@@ -134,8 +127,7 @@ function _templateObject2() {
|
|
|
134
127
|
": var(--plasma-typo-body-s-line-height);\n\n ",
|
|
135
128
|
": -0.688rem -0.5rem;\n ",
|
|
136
129
|
": 2.375rem;\n ",
|
|
137
|
-
": 0.563rem -2.938rem auto auto;\n ",
|
|
138
|
-
": 0.062rem -2.063rem auto auto;\n\n ",
|
|
130
|
+
": 0.563rem -2.938rem auto auto;\n\n ",
|
|
139
131
|
": 0.25rem;\n ",
|
|
140
132
|
": var(--plasma-typo-body-xs-font-family);\n ",
|
|
141
133
|
": var(--plasma-typo-body-xs-font-size);\n ",
|
|
@@ -171,9 +163,7 @@ function _templateObject2() {
|
|
|
171
163
|
": 0 0 0 0;\n ",
|
|
172
164
|
": 0.3125rem auto auto -0.6875rem;\n ",
|
|
173
165
|
": 0 0 auto auto;\n ",
|
|
174
|
-
": 0.25rem -0.625rem auto auto;\n
|
|
175
|
-
": 1.063rem auto auto -0.75rem;\n ",
|
|
176
|
-
": 1.063rem -0.75rem auto auto;\n "
|
|
166
|
+
": 0.25rem -0.625rem auto auto;\n "
|
|
177
167
|
]);
|
|
178
168
|
_templateObject2 = function _templateObject() {
|
|
179
169
|
return data;
|
|
@@ -190,28 +180,19 @@ function _templateObject3() {
|
|
|
190
180
|
return data;
|
|
191
181
|
}
|
|
192
182
|
function _templateObject4() {
|
|
193
|
-
var data = _tagged_template_literal([
|
|
194
|
-
""
|
|
195
|
-
]);
|
|
196
|
-
_templateObject4 = function _templateObject() {
|
|
197
|
-
return data;
|
|
198
|
-
};
|
|
199
|
-
return data;
|
|
200
|
-
}
|
|
201
|
-
function _templateObject5() {
|
|
202
183
|
var data = _tagged_template_literal([
|
|
203
184
|
"\n ",
|
|
204
185
|
": var(--surface-solid-card-brightness);\n ",
|
|
205
|
-
": 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08);\n ",
|
|
186
|
+
": var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08));\n ",
|
|
206
187
|
": var(--text-primary);\n ",
|
|
207
188
|
": var(--surface-solid-card-brightness);\n "
|
|
208
189
|
]);
|
|
209
|
-
|
|
190
|
+
_templateObject4 = function _templateObject() {
|
|
210
191
|
return data;
|
|
211
192
|
};
|
|
212
193
|
return data;
|
|
213
194
|
}
|
|
214
|
-
function
|
|
195
|
+
function _templateObject5() {
|
|
215
196
|
var data = _tagged_template_literal([
|
|
216
197
|
"\n ",
|
|
217
198
|
": 0.6875rem;\n ",
|
|
@@ -233,12 +214,12 @@ function _templateObject6() {
|
|
|
233
214
|
": 0.5rem;\n ",
|
|
234
215
|
": 0.625rem;\n "
|
|
235
216
|
]);
|
|
236
|
-
|
|
217
|
+
_templateObject5 = function _templateObject() {
|
|
237
218
|
return data;
|
|
238
219
|
};
|
|
239
220
|
return data;
|
|
240
221
|
}
|
|
241
|
-
function
|
|
222
|
+
function _templateObject6() {
|
|
242
223
|
var data = _tagged_template_literal([
|
|
243
224
|
"\n ",
|
|
244
225
|
": 0.5rem;\n ",
|
|
@@ -260,12 +241,12 @@ function _templateObject7() {
|
|
|
260
241
|
": 0.375rem;\n ",
|
|
261
242
|
": 0.5625rem;\n "
|
|
262
243
|
]);
|
|
263
|
-
|
|
244
|
+
_templateObject6 = function _templateObject() {
|
|
264
245
|
return data;
|
|
265
246
|
};
|
|
266
247
|
return data;
|
|
267
248
|
}
|
|
268
|
-
function
|
|
249
|
+
function _templateObject7() {
|
|
269
250
|
var data = _tagged_template_literal([
|
|
270
251
|
"\n ",
|
|
271
252
|
": 1;\n ",
|
|
@@ -276,12 +257,12 @@ function _templateObject8() {
|
|
|
276
257
|
": var(--surface-solid-primary);\n ",
|
|
277
258
|
": var(--text-secondary);\n "
|
|
278
259
|
]);
|
|
279
|
-
|
|
260
|
+
_templateObject7 = function _templateObject() {
|
|
280
261
|
return data;
|
|
281
262
|
};
|
|
282
263
|
return data;
|
|
283
264
|
}
|
|
284
|
-
function
|
|
265
|
+
function _templateObject8() {
|
|
285
266
|
var data = _tagged_template_literal([
|
|
286
267
|
"\n ",
|
|
287
268
|
": 1;\n ",
|
|
@@ -291,10 +272,9 @@ function _templateObject9() {
|
|
|
291
272
|
": var(--text-secondary);\n ",
|
|
292
273
|
": var(--text-secondary);\n ",
|
|
293
274
|
": var(--text-secondary);\n ",
|
|
294
|
-
": var(--outline-solid-secondary);\n ",
|
|
295
275
|
": 0.4;\n "
|
|
296
276
|
]);
|
|
297
|
-
|
|
277
|
+
_templateObject8 = function _templateObject() {
|
|
298
278
|
return data;
|
|
299
279
|
};
|
|
300
280
|
return data;
|
|
@@ -308,31 +288,27 @@ export var config = {
|
|
|
308
288
|
},
|
|
309
289
|
variations: {
|
|
310
290
|
view: {
|
|
311
|
-
default: css(_templateObject(), tokens.color, tokens.
|
|
312
|
-
negative: css(_templateObject1(), tokens.color, tokens.
|
|
291
|
+
default: css(_templateObject(), tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.placeholderColorFocus, tokens.textBeforeColor, tokens.textAfterColor, tokens.labelColor, tokens.leftHelperColor, tokens.titleCaptionColor, tokens.hintIconColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.contentSlotRightColor, tokens.contentSlotRightColorHover, tokens.contentSlotRightColorActive, tokens.chipCloseIconColor, tokens.chipCloseIconColorReadonly, tokens.chipCloseIconColorHover, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor, tokens.borderColor, tokens.borderColorFocus, tokens.borderColorHover, tokens.indicatorColor, tokens.optionalColor),
|
|
292
|
+
negative: css(_templateObject1(), tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.placeholderColorFocus, tokens.textBeforeColor, tokens.textAfterColor, tokens.labelColor, tokens.leftHelperColor, tokens.titleCaptionColor, tokens.hintIconColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.contentSlotRightColor, tokens.contentSlotRightColorHover, tokens.contentSlotRightColorActive, tokens.chipCloseIconColor, tokens.chipCloseIconColorReadonly, tokens.chipCloseIconColorHover, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.borderColor, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor)
|
|
313
293
|
},
|
|
314
294
|
size: {
|
|
315
|
-
s: css(_templateObject2(), tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.borderWidth, tokens.leftContentMargin, tokens.rightContentMargin, tokens.textBeforeMargin, tokens.textAfterMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.
|
|
295
|
+
s: css(_templateObject2(), tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.borderWidth, tokens.leftContentMargin, tokens.rightContentMargin, tokens.textBeforeMargin, tokens.textAfterMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.hintMargin, tokens.hintTargetSize, tokens.hintInnerLabelPlacementOffset, tokens.titleCaptionInnerLabelOffset, tokens.titleCaptionFontFamily, tokens.titleCaptionFontSize, tokens.titleCaptionFontStyle, tokens.titleCaptionFontWeight, tokens.titleCaptionLetterSpacing, tokens.titleCaptionLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPadding, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.indicatorSizeInner, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementInnerRight, tokens.indicatorLabelPlacementOuterRight)
|
|
316
296
|
},
|
|
317
297
|
labelPlacement: {
|
|
318
298
|
outer: css(_templateObject3())
|
|
319
299
|
},
|
|
320
|
-
clear: {
|
|
321
|
-
true: css(_templateObject4())
|
|
322
|
-
},
|
|
323
300
|
hintView: {
|
|
324
|
-
|
|
325
|
-
default: css(_templateObject5(), tokens.tooltipBackgroundColor, tokens.tooltipBoxShadow, tokens.tooltipColor, tokens.tooltipArrowBackground)
|
|
301
|
+
default: css(_templateObject4(), tokens.tooltipBackgroundColor, tokens.tooltipBoxShadow, tokens.tooltipColor, tokens.tooltipArrowBackground)
|
|
326
302
|
},
|
|
327
303
|
hintSize: {
|
|
328
|
-
m: css(
|
|
329
|
-
s: css(
|
|
304
|
+
m: css(_templateObject5(), tokens.tooltipPaddingTop, tokens.tooltipPaddingRight, tokens.tooltipPaddingBottom, tokens.tooltipPaddingLeft, tokens.tooltipMinHeight, tokens.tooltipBorderRadius, tokens.tooltipTextFontFamily, tokens.tooltipTextFontSize, tokens.tooltipTextFontStyle, tokens.tooltipTextFontWeight, tokens.tooltipTextFontLetterSpacing, tokens.tooltipTextFontLineHeight, tokens.tooltipContentLeftMargin, tokens.tooltipArrowMaskWidth, tokens.tooltipArrowMaskHeight, tokens.tooltipArrowMaskImage, tokens.tooltipArrowHeight, tokens.tooltipArrowEdgeMargin),
|
|
305
|
+
s: css(_templateObject6(), tokens.tooltipPaddingTop, tokens.tooltipPaddingRight, tokens.tooltipPaddingBottom, tokens.tooltipPaddingLeft, tokens.tooltipMinHeight, tokens.tooltipBorderRadius, tokens.tooltipTextFontFamily, tokens.tooltipTextFontSize, tokens.tooltipTextFontStyle, tokens.tooltipTextFontWeight, tokens.tooltipTextFontLetterSpacing, tokens.tooltipTextFontLineHeight, tokens.tooltipContentLeftMargin, tokens.tooltipArrowMaskWidth, tokens.tooltipArrowMaskHeight, tokens.tooltipArrowMaskImage, tokens.tooltipArrowHeight, tokens.tooltipArrowEdgeMargin)
|
|
330
306
|
},
|
|
331
307
|
disabled: {
|
|
332
|
-
true: css(
|
|
308
|
+
true: css(_templateObject7(), tokens.disabledOpacity, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.color)
|
|
333
309
|
},
|
|
334
310
|
readOnly: {
|
|
335
|
-
true: css(
|
|
311
|
+
true: css(_templateObject8(), tokens.readOnlyOpacity, tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.placeholderColorReadOnly, tokens.leftHelperColorReadOnly, tokens.titleCaptionColorReadOnly, tokens.labelColorReadOnly, tokens.contentSlotRightOpacityReadOnly)
|
|
336
312
|
}
|
|
337
313
|
}
|
|
338
314
|
};
|
|
@@ -1,6 +1,16 @@
|
|
|
1
|
-
import { textFieldConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/emotion';
|
|
1
|
+
import { textFieldConfig, component, mergeConfig, createConditionalComponent } from '@salutejs/plasma-new-hope/emotion';
|
|
2
2
|
import { config } from './TextField.config';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
import { config as clearConfig } from './TextField.clear.config';
|
|
4
|
+
var mergedConfigDefault = mergeConfig(textFieldConfig, config);
|
|
5
|
+
export var TextFieldDefault = component(mergedConfigDefault);
|
|
6
|
+
var mergedConfigClear = mergeConfig(textFieldConfig, clearConfig);
|
|
7
|
+
export var TextFieldClear = component(mergedConfigClear);
|
|
8
|
+
export var TextField = createConditionalComponent(TextFieldDefault, [
|
|
9
|
+
{
|
|
10
|
+
conditions: {
|
|
11
|
+
prop: 'appearance',
|
|
12
|
+
value: 'clear'
|
|
13
|
+
},
|
|
14
|
+
component: TextFieldClear
|
|
15
|
+
}
|
|
16
|
+
]);
|