@salutejs/plasma-new-hope 0.329.1-canary.2074.16163189225.0 → 0.329.1-canary.2078.16193701703.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/cjs/components/Drawer/Drawer.css +2 -2
- package/cjs/components/Drawer/Drawer.styles.js +1 -1
- package/cjs/components/Drawer/Drawer.styles.js.map +1 -1
- package/cjs/components/Drawer/Drawer.styles_11rwbjh.css +2 -0
- package/cjs/components/TextArea/TextArea.js +22 -8
- package/cjs/components/TextArea/TextArea.js.map +1 -1
- package/cjs/components/TextArea/TextArea.styles.js +101 -64
- package/cjs/components/TextArea/TextArea.styles.js.map +1 -1
- package/cjs/components/TextArea/TextArea.styles_exqsyh.css +24 -0
- package/cjs/components/TextArea/TextArea.tokens.js +3 -1
- package/cjs/components/TextArea/TextArea.tokens.js.map +1 -1
- package/cjs/components/TextArea/TextArea_c31ipk.css +1 -0
- package/cjs/components/TextArea/ui/Hint/Hint.css +22 -18
- package/cjs/components/TextArea/variations/_clear/base.js +1 -1
- package/cjs/components/TextArea/variations/_clear/base_1vo4ba5.css +1 -0
- package/cjs/components/TextArea/variations/_disabled/base.js +1 -1
- package/cjs/components/TextArea/variations/_disabled/base_s6ttw.css +1 -0
- package/cjs/components/TextArea/variations/_read-only/base.js +1 -1
- package/cjs/components/TextArea/variations/_read-only/{base_1v0syh0.css → base_vk912g.css} +1 -1
- package/cjs/index.css +29 -25
- package/emotion/cjs/components/Drawer/Drawer.styles.js +5 -5
- package/emotion/cjs/components/TextArea/TextArea.js +20 -8
- package/emotion/cjs/components/TextArea/TextArea.styles.js +78 -41
- package/emotion/cjs/components/TextArea/TextArea.tokens.js +3 -1
- package/emotion/cjs/components/TextArea/mixins/applyDynamicLabel.js +2 -2
- package/emotion/es/components/Drawer/Drawer.styles.js +5 -5
- package/emotion/es/components/TextArea/TextArea.js +21 -9
- package/emotion/es/components/TextArea/TextArea.styles.js +66 -41
- package/emotion/es/components/TextArea/TextArea.tokens.js +3 -1
- package/emotion/es/components/TextArea/mixins/applyDynamicLabel.js +2 -2
- package/es/components/Drawer/Drawer.css +2 -2
- package/es/components/Drawer/Drawer.styles.js +1 -1
- package/es/components/Drawer/Drawer.styles.js.map +1 -1
- package/es/components/Drawer/Drawer.styles_11rwbjh.css +2 -0
- package/es/components/TextArea/TextArea.js +23 -9
- package/es/components/TextArea/TextArea.js.map +1 -1
- package/es/components/TextArea/TextArea.styles.js +100 -65
- package/es/components/TextArea/TextArea.styles.js.map +1 -1
- package/es/components/TextArea/TextArea.styles_exqsyh.css +24 -0
- package/es/components/TextArea/TextArea.tokens.js +3 -1
- package/es/components/TextArea/TextArea.tokens.js.map +1 -1
- package/es/components/TextArea/TextArea_c31ipk.css +1 -0
- package/es/components/TextArea/ui/Hint/Hint.css +22 -18
- package/es/components/TextArea/variations/_clear/base.js +1 -1
- package/es/components/TextArea/variations/_clear/base_1vo4ba5.css +1 -0
- package/es/components/TextArea/variations/_disabled/base.js +1 -1
- package/es/components/TextArea/variations/_disabled/base_s6ttw.css +1 -0
- package/es/components/TextArea/variations/_read-only/base.js +1 -1
- package/es/components/TextArea/variations/_read-only/{base_1v0syh0.css → base_vk912g.css} +1 -1
- package/es/index.css +29 -25
- package/package.json +4 -4
- package/styled-components/cjs/components/Drawer/Drawer.styles.js +3 -3
- package/styled-components/cjs/components/TextArea/TextArea.js +19 -7
- package/styled-components/cjs/components/TextArea/TextArea.styles.js +76 -28
- package/styled-components/cjs/components/TextArea/TextArea.tokens.js +3 -1
- package/styled-components/cjs/components/TextArea/mixins/applyDynamicLabel.js +2 -2
- package/styled-components/es/components/Drawer/Drawer.styles.js +3 -3
- package/styled-components/es/components/TextArea/TextArea.js +20 -8
- package/styled-components/es/components/TextArea/TextArea.styles.js +64 -28
- package/styled-components/es/components/TextArea/TextArea.tokens.js +3 -1
- package/styled-components/es/components/TextArea/mixins/applyDynamicLabel.js +2 -2
- package/types/components/Drawer/Drawer.styles.d.ts.map +1 -1
- package/types/components/TextArea/TextArea.d.ts.map +1 -1
- package/types/components/TextArea/TextArea.styles.d.ts +10 -1
- package/types/components/TextArea/TextArea.styles.d.ts.map +1 -1
- package/types/components/TextArea/TextArea.tokens.d.ts +2 -0
- package/types/components/TextArea/TextArea.tokens.d.ts.map +1 -1
- package/types/components/TextArea/TextArea.types.d.ts +5 -0
- package/types/components/TextArea/TextArea.types.d.ts.map +1 -1
- package/types/components/TextArea/mixins/applyDynamicLabel.d.ts.map +1 -1
- package/cjs/components/Drawer/Drawer.styles_1wcuvns.css +0 -2
- package/cjs/components/TextArea/TextArea.styles_1r7xix5.css +0 -20
- package/cjs/components/TextArea/TextArea_e0xkpd.css +0 -1
- package/cjs/components/TextArea/variations/_clear/base_16hm89e.css +0 -1
- package/cjs/components/TextArea/variations/_disabled/base_1bn0zc9.css +0 -1
- package/es/components/Drawer/Drawer.styles_1wcuvns.css +0 -2
- package/es/components/TextArea/TextArea.styles_1r7xix5.css +0 -20
- package/es/components/TextArea/TextArea_e0xkpd.css +0 -1
- package/es/components/TextArea/variations/_clear/base_16hm89e.css +0 -1
- package/es/components/TextArea/variations/_disabled/base_1bn0zc9.css +0 -1
@@ -9,6 +9,12 @@ function _export(target, all) {
|
|
9
9
|
});
|
10
10
|
}
|
11
11
|
_export(exports, {
|
12
|
+
get Divider () {
|
13
|
+
return Divider;
|
14
|
+
},
|
15
|
+
get DividerWrapper () {
|
16
|
+
return DividerWrapper;
|
17
|
+
},
|
12
18
|
get Hint () {
|
13
19
|
return Hint;
|
14
20
|
},
|
@@ -27,6 +33,12 @@ _export(exports, {
|
|
27
33
|
get StyledContent () {
|
28
34
|
return StyledContent;
|
29
35
|
},
|
36
|
+
get StyledContentWrapper () {
|
37
|
+
return StyledContentWrapper;
|
38
|
+
},
|
39
|
+
get StyledHeaderSlot () {
|
40
|
+
return StyledHeaderSlot;
|
41
|
+
},
|
30
42
|
get StyledHelpers () {
|
31
43
|
return StyledHelpers;
|
32
44
|
},
|
@@ -84,13 +96,13 @@ var mergedConfig = (0, _engines.mergeConfig)(_Tooltip.tooltipConfig);
|
|
84
96
|
var Tooltip = (0, _engines.component)(mergedConfig);
|
85
97
|
var Hint = (0, _styledcomponents.default)(Tooltip).withConfig({
|
86
98
|
displayName: "TextArea.styles__Hint",
|
87
|
-
componentId: "sc-
|
99
|
+
componentId: "sc-5fcd62a1-0"
|
88
100
|
})([
|
89
101
|
""
|
90
102
|
]);
|
91
103
|
var OuterLabelWrapper = _styledcomponents.default.div.withConfig({
|
92
104
|
displayName: "TextArea.styles__OuterLabelWrapper",
|
93
|
-
componentId: "sc-
|
105
|
+
componentId: "sc-5fcd62a1-1"
|
94
106
|
})([
|
95
107
|
"display:flex;align-items:center;max-width:",
|
96
108
|
";margin-bottom:",
|
@@ -104,7 +116,7 @@ var OuterLabelWrapper = _styledcomponents.default.div.withConfig({
|
|
104
116
|
});
|
105
117
|
var StyledLabel = _styledcomponents.default.div.withConfig({
|
106
118
|
displayName: "TextArea.styles__StyledLabel",
|
107
|
-
componentId: "sc-
|
119
|
+
componentId: "sc-5fcd62a1-2"
|
108
120
|
})([
|
109
121
|
"position:relative;display:inline-flex;color:var(",
|
110
122
|
",var(",
|
@@ -124,7 +136,7 @@ var StyledLabel = _styledcomponents.default.div.withConfig({
|
|
124
136
|
], _TextAreatokens.tokens.labelOuterColor, _TextAreatokens.tokens.inputColor, _TextAreatokens.tokens.labelOuterFontFamily, _TextAreatokens.tokens.inputFontFamily, _TextAreatokens.tokens.labelOuterFontSize, _TextAreatokens.tokens.inputFontSize, _TextAreatokens.tokens.labelOuterFontStyle, _TextAreatokens.tokens.inputFontStyle, _TextAreatokens.tokens.labelOuterFontWeight, _TextAreatokens.tokens.inputFontWeight, _TextAreatokens.tokens.labelOuterLetterSpacing, _TextAreatokens.tokens.inputLetterSpacing, _TextAreatokens.tokens.labelOuterLineHeight, _TextAreatokens.tokens.inputLineHeight);
|
125
137
|
var TitleCaption = _styledcomponents.default.div.withConfig({
|
126
138
|
displayName: "TextArea.styles__TitleCaption",
|
127
|
-
componentId: "sc-
|
139
|
+
componentId: "sc-5fcd62a1-3"
|
128
140
|
})([
|
129
141
|
"display:inline-block;margin-left:auto;font-family:var(",
|
130
142
|
");font-size:var(",
|
@@ -136,13 +148,13 @@ var TitleCaption = _styledcomponents.default.div.withConfig({
|
|
136
148
|
], _TextAreatokens.tokens.titleCaptionFontFamily, _TextAreatokens.tokens.titleCaptionFontSize, _TextAreatokens.tokens.titleCaptionFontStyle, _TextAreatokens.tokens.titleCaptionFontWeight, _TextAreatokens.tokens.titleCaptionLetterSpacing, _TextAreatokens.tokens.titleCaptionLineHeight);
|
137
149
|
var StyledIndicatorWrapper = _styledcomponents.default.div.withConfig({
|
138
150
|
displayName: "TextArea.styles__StyledIndicatorWrapper",
|
139
|
-
componentId: "sc-
|
151
|
+
componentId: "sc-5fcd62a1-4"
|
140
152
|
})([
|
141
153
|
"position:relative;display:inline-flex;align-items:center;"
|
142
154
|
]);
|
143
155
|
var StyledOptionalText = _styledcomponents.default.span.withConfig({
|
144
156
|
displayName: "TextArea.styles__StyledOptionalText",
|
145
|
-
componentId: "sc-
|
157
|
+
componentId: "sc-5fcd62a1-5"
|
146
158
|
})([
|
147
159
|
"color:var(",
|
148
160
|
");font-family:",
|
@@ -173,7 +185,7 @@ var StyledOptionalText = _styledcomponents.default.span.withConfig({
|
|
173
185
|
});
|
174
186
|
var StyledHintWrapper = _styledcomponents.default.div.withConfig({
|
175
187
|
displayName: "TextArea.styles__StyledHintWrapper",
|
176
|
-
componentId: "sc-
|
188
|
+
componentId: "sc-5fcd62a1-6"
|
177
189
|
})([
|
178
190
|
"display:inline-flex;line-height:0;margin:var(",
|
179
191
|
");&.",
|
@@ -182,7 +194,7 @@ var StyledHintWrapper = _styledcomponents.default.div.withConfig({
|
|
182
194
|
], _TextAreatokens.tokens.hintMargin, _TextAreatokens.classes.innerLabelPlacement, _TextAreatokens.tokens.hintInnerLabelPlacementOffset);
|
183
195
|
var HintTargetWrapper = _styledcomponents.default.div.withConfig({
|
184
196
|
displayName: "TextArea.styles__HintTargetWrapper",
|
185
|
-
componentId: "sc-
|
197
|
+
componentId: "sc-5fcd62a1-7"
|
186
198
|
})([
|
187
199
|
"color:var(",
|
188
200
|
");width:var(",
|
@@ -191,40 +203,76 @@ var HintTargetWrapper = _styledcomponents.default.div.withConfig({
|
|
191
203
|
], _TextAreatokens.tokens.hintIconColor, _TextAreatokens.tokens.hintTargetSize, _TextAreatokens.tokens.hintTargetSize);
|
192
204
|
var HintIconWrapper = _styledcomponents.default.div.withConfig({
|
193
205
|
displayName: "TextArea.styles__HintIconWrapper",
|
194
|
-
componentId: "sc-
|
206
|
+
componentId: "sc-5fcd62a1-8"
|
195
207
|
})([
|
196
208
|
""
|
197
209
|
]);
|
198
210
|
var StyledTextAreaWrapper = _styledcomponents.default.div.withConfig({
|
199
211
|
displayName: "TextArea.styles__StyledTextAreaWrapper",
|
200
|
-
componentId: "sc-
|
212
|
+
componentId: "sc-5fcd62a1-9"
|
201
213
|
})([
|
202
|
-
"background-color:var(",
|
203
|
-
");padding-top:
|
204
|
-
"
|
214
|
+
"display:flex;flex-direction:column;background-color:var(",
|
215
|
+
");padding-top:",
|
216
|
+
";padding-bottom:",
|
205
217
|
";border-radius:",
|
206
218
|
";"
|
207
|
-
], _TextAreatokens.tokens.inputBackgroundColor,
|
219
|
+
], _TextAreatokens.tokens.inputBackgroundColor, function(param) {
|
220
|
+
var hasHeader = param.hasHeader;
|
221
|
+
return hasHeader ? 'unset' : "var(".concat(_TextAreatokens.tokens.inputPaddingTop, ")");
|
222
|
+
}, function(param) {
|
208
223
|
var hasHelper = param.hasHelper;
|
209
224
|
return hasHelper ? "var(".concat(_TextAreatokens.tokens.inputPaddingBottomWithHelpers, ")") : "var(".concat(_TextAreatokens.tokens.inputPaddingBottom, ")");
|
210
225
|
}, function(param) {
|
211
226
|
var hasHelper = param.hasHelper;
|
212
227
|
return hasHelper ? "var(".concat(_TextAreatokens.tokens.borderRadiusWithHelpers, ")") : "var(".concat(_TextAreatokens.tokens.borderRadius, ")");
|
213
228
|
});
|
229
|
+
var StyledContentWrapper = _styledcomponents.default.div.withConfig({
|
230
|
+
displayName: "TextArea.styles__StyledContentWrapper",
|
231
|
+
componentId: "sc-5fcd62a1-10"
|
232
|
+
})([
|
233
|
+
"position:relative;width:100%;height:0;padding-top:",
|
234
|
+
";"
|
235
|
+
], function(param) {
|
236
|
+
var hasHeader = param.hasHeader;
|
237
|
+
return hasHeader ? "var(".concat(_TextAreatokens.tokens.inputPaddingTop, ")") : 'unset';
|
238
|
+
});
|
214
239
|
var StyledContent = _styledcomponents.default.div.withConfig({
|
215
240
|
displayName: "TextArea.styles__StyledContent",
|
216
|
-
componentId: "sc-
|
241
|
+
componentId: "sc-5fcd62a1-11"
|
217
242
|
})([
|
218
|
-
"position:absolute;display:flex;align-items:center;
|
243
|
+
"position:absolute;display:flex;align-items:center;z-index:1;color:var(",
|
219
244
|
",var(",
|
220
|
-
"));top:
|
221
|
-
"
|
245
|
+
"));top:",
|
246
|
+
";right:var(",
|
222
247
|
");height:var(",
|
223
248
|
");"
|
224
|
-
], _TextAreatokens.tokens.rightContentColor, _TextAreatokens.tokens.inputColor,
|
249
|
+
], _TextAreatokens.tokens.rightContentColor, _TextAreatokens.tokens.inputColor, function(param) {
|
250
|
+
var hasHeader = param.hasHeader;
|
251
|
+
return hasHeader ? "var(".concat(_TextAreatokens.tokens.inputPaddingTop, ")") : "var(".concat(_TextAreatokens.tokens.rightContentTop, ")");
|
252
|
+
}, _TextAreatokens.tokens.rightContentRight, _TextAreatokens.tokens.rightContentHeight);
|
253
|
+
var StyledHeaderSlot = _styledcomponents.default.div.withConfig({
|
254
|
+
displayName: "TextArea.styles__StyledHeaderSlot",
|
255
|
+
componentId: "sc-5fcd62a1-12"
|
256
|
+
})([
|
257
|
+
"display:flex;flex-direction:column;"
|
258
|
+
]);
|
259
|
+
var DividerWrapper = _styledcomponents.default.div.withConfig({
|
260
|
+
displayName: "TextArea.styles__DividerWrapper",
|
261
|
+
componentId: "sc-5fcd62a1-13"
|
262
|
+
})([
|
263
|
+
"background:var(",
|
264
|
+
");"
|
265
|
+
], _TextAreatokens.tokens.backgroundColor);
|
266
|
+
var Divider = _styledcomponents.default.div.withConfig({
|
267
|
+
displayName: "TextArea.styles__Divider",
|
268
|
+
componentId: "sc-5fcd62a1-14"
|
269
|
+
})([
|
270
|
+
"height:0.0625rem;background:var(",
|
271
|
+
");"
|
272
|
+
], _TextAreatokens.tokens.dividerColor);
|
225
273
|
var StyledContainer = _styledcomponents.default.div.withConfig({
|
226
274
|
displayName: "TextArea.styles__StyledContainer",
|
227
|
-
componentId: "sc-
|
275
|
+
componentId: "sc-5fcd62a1-15"
|
228
276
|
})([
|
229
277
|
"display:inline-flex;flex-direction:column;width:",
|
230
278
|
";position:relative;"
|
@@ -234,7 +282,7 @@ var StyledContainer = _styledcomponents.default.div.withConfig({
|
|
234
282
|
});
|
235
283
|
var StyledTextArea = _styledcomponents.default.textarea.withConfig({
|
236
284
|
displayName: "TextArea.styles__StyledTextArea",
|
237
|
-
componentId: "sc-
|
285
|
+
componentId: "sc-5fcd62a1-16"
|
238
286
|
})([
|
239
287
|
"display:block;box-sizing:border-box;outline:none;border:none;-webkit-appearance:none;background-color:transparent;color:var(",
|
240
288
|
");caret-color:var(",
|
@@ -297,7 +345,7 @@ var StyledTextArea = _styledcomponents.default.textarea.withConfig({
|
|
297
345
|
}, _TextAreatokens.tokens.inputFontFamily, _TextAreatokens.tokens.inputFontSize, _TextAreatokens.tokens.inputFontStyle, _TextAreatokens.tokens.inputFontWeight, _TextAreatokens.tokens.inputLetterSpacing, _TextAreatokens.tokens.inputLineHeight, _TextAreatokens.tokens.inputColorFocus, _TextAreatokens.tokens.scrollbarWidth, _TextAreatokens.tokens.scrollbarThumbBackgroundColor, _TextAreatokens.tokens.scrollbarBorderWidth, _TextAreatokens.tokens.scrollbarTrackBackgroundColor, _TextAreatokens.tokens.scrollbarBorderWidth);
|
298
346
|
var StyledHiddenTextArea = _styledcomponents.default.textarea.withConfig({
|
299
347
|
displayName: "TextArea.styles__StyledHiddenTextArea",
|
300
|
-
componentId: "sc-
|
348
|
+
componentId: "sc-5fcd62a1-17"
|
301
349
|
})([
|
302
350
|
"max-height:none !important;min-height:var(",
|
303
351
|
") !important;visibility:hidden !important;overflow:hidden !important;position:absolute !important;z-index:-1000 !important;top:0 !important;left:0 !important;right:0.0625rem !important;border-width:0;padding-right:",
|
@@ -315,7 +363,7 @@ var StyledHiddenTextArea = _styledcomponents.default.textarea.withConfig({
|
|
315
363
|
}, _TextAreatokens.tokens.inputPaddingLeft, _TextAreatokens.tokens.inputFontFamily, _TextAreatokens.tokens.inputFontSize, _TextAreatokens.tokens.inputFontStyle, _TextAreatokens.tokens.inputFontWeight, _TextAreatokens.tokens.inputLetterSpacing, _TextAreatokens.tokens.inputLineHeight);
|
316
364
|
var StyledHelpers = _styledcomponents.default.div.withConfig({
|
317
365
|
displayName: "TextArea.styles__StyledHelpers",
|
318
|
-
componentId: "sc-
|
366
|
+
componentId: "sc-5fcd62a1-18"
|
319
367
|
})([
|
320
368
|
"box-sizing:border-box;display:flex;justify-content:space-between;transition:background-color 0.1s ease-in-out;background-color:var(",
|
321
369
|
");padding-top:var(",
|
@@ -328,14 +376,14 @@ var StyledHelpers = _styledcomponents.default.div.withConfig({
|
|
328
376
|
], _TextAreatokens.tokens.helpersBackgroundColor, _TextAreatokens.tokens.helpersPaddingTop, _TextAreatokens.tokens.helpersPaddingRight, _TextAreatokens.tokens.helpersPaddingBottom, _TextAreatokens.tokens.helpersPaddingLeft, _TextAreatokens.tokens.borderRadius, _TextAreatokens.tokens.borderRadius);
|
329
377
|
var StyledOutsideHelpersWrapper = _styledcomponents.default.div.withConfig({
|
330
378
|
displayName: "TextArea.styles__StyledOutsideHelpersWrapper",
|
331
|
-
componentId: "sc-
|
379
|
+
componentId: "sc-5fcd62a1-19"
|
332
380
|
})([
|
333
381
|
"box-sizing:border-box;display:flex;justify-content:space-between;padding-top:var(",
|
334
382
|
");"
|
335
383
|
], _TextAreatokens.tokens.clearHelpersPaddingTop);
|
336
384
|
var StyledLeftHelper = _styledcomponents.default.span.withConfig({
|
337
385
|
displayName: "TextArea.styles__StyledLeftHelper",
|
338
|
-
componentId: "sc-
|
386
|
+
componentId: "sc-5fcd62a1-20"
|
339
387
|
})([
|
340
388
|
"",
|
341
389
|
";display:block;font-family:var(",
|
@@ -349,14 +397,14 @@ var StyledLeftHelper = _styledcomponents.default.span.withConfig({
|
|
349
397
|
], (0, _mixins.applyEllipsis)(), _TextAreatokens.tokens.helpersFontFamily, _TextAreatokens.tokens.helpersFontSize, _TextAreatokens.tokens.helpersFontStyle, _TextAreatokens.tokens.helpersFontWeight, _TextAreatokens.tokens.helpersLetterSpacing, _TextAreatokens.tokens.helpersLineHeight, _TextAreatokens.tokens.leftHelperColor);
|
350
398
|
var StyledRightHelper = (0, _styledcomponents.default)(StyledLeftHelper).withConfig({
|
351
399
|
displayName: "TextArea.styles__StyledRightHelper",
|
352
|
-
componentId: "sc-
|
400
|
+
componentId: "sc-5fcd62a1-21"
|
353
401
|
})([
|
354
402
|
"color:var(",
|
355
403
|
");margin-left:auto;"
|
356
404
|
], _TextAreatokens.tokens.rightHelperColor);
|
357
405
|
var StyledPlaceholder = _styledcomponents.default.label.withConfig({
|
358
406
|
displayName: "TextArea.styles__StyledPlaceholder",
|
359
|
-
componentId: "sc-
|
407
|
+
componentId: "sc-5fcd62a1-22"
|
360
408
|
})([
|
361
409
|
"box-sizing:border-box;position:absolute;pointer-events:none;display:inline-flex;align-items:center;transition:all 0.1s ease-in-out;transform-origin:top left;color:var(",
|
362
410
|
");width:100%;height:auto;top:var(",
|
@@ -375,7 +423,7 @@ var StyledPlaceholder = _styledcomponents.default.label.withConfig({
|
|
375
423
|
}, _TextAreatokens.tokens.inputFontFamily, _TextAreatokens.tokens.inputFontSize, _TextAreatokens.tokens.inputFontStyle, _TextAreatokens.tokens.inputFontWeight, _TextAreatokens.tokens.inputLetterSpacing, _TextAreatokens.tokens.inputLineHeight);
|
376
424
|
var StyledIndicator = _styledcomponents.default.div.withConfig({
|
377
425
|
displayName: "TextArea.styles__StyledIndicator",
|
378
|
-
componentId: "sc-
|
426
|
+
componentId: "sc-5fcd62a1-23"
|
379
427
|
})([
|
380
428
|
"position:absolute;border-radius:50%;background-color:var(",
|
381
429
|
");&.",
|
@@ -32,7 +32,9 @@ var classes = {
|
|
32
32
|
hasHint: 'textarea-has-hint',
|
33
33
|
hasRightContent: 'textarea-has-right-content',
|
34
34
|
hasDivider: 'textarea-has-divider',
|
35
|
-
requiredAlignRight: 'required-align-right'
|
35
|
+
requiredAlignRight: 'required-align-right',
|
36
|
+
hasHeaderSlot: 'textarea-has-header-slot',
|
37
|
+
styledContentWrapper: 'textarea-content-wrapper'
|
36
38
|
};
|
37
39
|
var tokens = {
|
38
40
|
/** Цвет фона для всего компонента */ backgroundColor: '--plasma-textarea-background-color',
|
@@ -9,5 +9,5 @@ Object.defineProperty(exports, "applyDynamicLabel", {
|
|
9
9
|
}
|
10
10
|
});
|
11
11
|
var _TextAreatokens = require("../TextArea.tokens");
|
12
|
-
var innerPlaceholderUp = _TextAreatokens.classes.innerPlaceholderUp, hidePlaceHolder = _TextAreatokens.classes.hidePlaceHolder, focusedOuterPlaceholderColor = _TextAreatokens.classes.focusedOuterPlaceholderColor, styledTextArea = _TextAreatokens.classes.styledTextArea, styledTextAreaWrapper = _TextAreatokens.classes.styledTextAreaWrapper, styledPlaceholder = _TextAreatokens.classes.styledPlaceholder;
|
13
|
-
var applyDynamicLabel = "\n .".concat(innerPlaceholderUp, " {\n .").concat(styledTextArea, " {\n height: calc(var(--plasma_private-textarea-input-actual-height) - var(").concat(_TextAreatokens.tokens.labelInnerTop, ") - var(").concat(_TextAreatokens.tokens.labelInnerTopHelper, ", 0px));\n }\n\n .").concat(styledTextAreaWrapper, " {\n padding-top: calc(calc(var(").concat(_TextAreatokens.tokens.labelInnerTop, ") + var(").concat(_TextAreatokens.tokens.labelInnerFontSize, ")) + var(").concat(_TextAreatokens.tokens.labelInnerMarginBottom, "));\n }\n\n .").concat(styledPlaceholder, " {\n font-family: var(").concat(_TextAreatokens.tokens.labelInnerFontFamily, ");\n font-size: var(").concat(_TextAreatokens.tokens.labelInnerFontSize, ");\n font-style: var(").concat(_TextAreatokens.tokens.labelInnerFontStyle, ");\n font-weight: var(").concat(_TextAreatokens.tokens.labelInnerFontWeight, ");\n letter-spacing: var(").concat(_TextAreatokens.tokens.labelInnerLetterSpacing, ");\n line-height: var(").concat(_TextAreatokens.tokens.labelInnerLineHeight, ");\n top: var(").concat(_TextAreatokens.tokens.labelInnerTop, ");\n }\n }\n\n .").concat(hidePlaceHolder, " .").concat(styledPlaceholder, " {\n display: none;\n }\n\n .").concat(focusedOuterPlaceholderColor, " .").concat(styledPlaceholder, " {\n color: var(").concat(_TextAreatokens.tokens.placeholderColorFocus, ");\n }\n");
|
12
|
+
var innerPlaceholderUp = _TextAreatokens.classes.innerPlaceholderUp, hidePlaceHolder = _TextAreatokens.classes.hidePlaceHolder, focusedOuterPlaceholderColor = _TextAreatokens.classes.focusedOuterPlaceholderColor, styledTextArea = _TextAreatokens.classes.styledTextArea, styledTextAreaWrapper = _TextAreatokens.classes.styledTextAreaWrapper, styledPlaceholder = _TextAreatokens.classes.styledPlaceholder, hasHeaderSlot = _TextAreatokens.classes.hasHeaderSlot, styledContentWrapper = _TextAreatokens.classes.styledContentWrapper;
|
13
|
+
var applyDynamicLabel = "\n .".concat(innerPlaceholderUp, " {\n .").concat(styledTextArea, " {\n height: calc(var(--plasma_private-textarea-input-actual-height) - var(").concat(_TextAreatokens.tokens.labelInnerTop, ") - var(").concat(_TextAreatokens.tokens.labelInnerTopHelper, ", 0px));\n }\n\n .").concat(styledTextAreaWrapper, " {\n padding-top: calc(calc(var(").concat(_TextAreatokens.tokens.labelInnerTop, ") + var(").concat(_TextAreatokens.tokens.labelInnerFontSize, ")) + var(").concat(_TextAreatokens.tokens.labelInnerMarginBottom, "));\n }\n \n .").concat(hasHeaderSlot, " {\n padding-top: unset;\n\n .").concat(styledContentWrapper, " {\n padding-top: calc(calc(var(").concat(_TextAreatokens.tokens.labelInnerTop, ") + var(").concat(_TextAreatokens.tokens.labelInnerFontSize, ")) + var(").concat(_TextAreatokens.tokens.labelInnerMarginBottom, "));\n }\n }\n\n .").concat(styledPlaceholder, " {\n font-family: var(").concat(_TextAreatokens.tokens.labelInnerFontFamily, ");\n font-size: var(").concat(_TextAreatokens.tokens.labelInnerFontSize, ");\n font-style: var(").concat(_TextAreatokens.tokens.labelInnerFontStyle, ");\n font-weight: var(").concat(_TextAreatokens.tokens.labelInnerFontWeight, ");\n letter-spacing: var(").concat(_TextAreatokens.tokens.labelInnerLetterSpacing, ");\n line-height: var(").concat(_TextAreatokens.tokens.labelInnerLineHeight, ");\n top: var(").concat(_TextAreatokens.tokens.labelInnerTop, ");\n }\n }\n\n .").concat(hidePlaceHolder, " .").concat(styledPlaceholder, " {\n display: none;\n }\n\n .").concat(focusedOuterPlaceholderColor, " .").concat(styledPlaceholder, " {\n color: var(").concat(_TextAreatokens.tokens.placeholderColorFocus, ");\n }\n");
|
@@ -59,7 +59,7 @@ var getAnimationStyles = function() {
|
|
59
59
|
};
|
60
60
|
export var StyledPanel = styled(Panel).withConfig({
|
61
61
|
displayName: "Drawer.styles__StyledPanel",
|
62
|
-
componentId: "sc-
|
62
|
+
componentId: "sc-8f0d02f6-0"
|
63
63
|
})([
|
64
64
|
"",
|
65
65
|
":var(",
|
@@ -67,10 +67,10 @@ export var StyledPanel = styled(Panel).withConfig({
|
|
67
67
|
], panelTokens.closeColor, tokens.closeIconColor);
|
68
68
|
export var StyledPopup = styled(Popup).withConfig({
|
69
69
|
displayName: "Drawer.styles__StyledPopup",
|
70
|
-
componentId: "sc-
|
70
|
+
componentId: "sc-8f0d02f6-1"
|
71
71
|
})([
|
72
72
|
"&&.",
|
73
|
-
"{animation:fadeIn 0.2s forwards;
|
73
|
+
"{animation:fadeIn 0.2s forwards;}&&.",
|
74
74
|
" .",
|
75
75
|
"{animation:fadeOut 0.2s forwards;}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}@keyframes fadeOut{from{opacity:1;}to{opacity:0;}}&& .",
|
76
76
|
",&& .",
|
@@ -118,7 +118,7 @@ import { cx, mergeRefs } from "../../utils";
|
|
118
118
|
import { useOutsideClick } from "../../hooks";
|
119
119
|
import { applyDynamicLabel } from "./mixins";
|
120
120
|
import { useAutoResize, ROOT_FONT_SIZE } from "./hooks";
|
121
|
-
import { StyledContent, StyledHelpers, StyledLeftHelper, StyledRightHelper, StyledLabel, StyledPlaceholder, StyledTextArea, StyledTextAreaWrapper, StyledContainer, StyledIndicator, StyledOptionalText, OuterLabelWrapper, StyledIndicatorWrapper, StyledHintWrapper, TitleCaption, StyledOutsideHelpersWrapper, StyledHiddenTextArea } from "./TextArea.styles";
|
121
|
+
import { StyledContent, StyledHelpers, StyledLeftHelper, StyledRightHelper, StyledLabel, StyledPlaceholder, StyledTextArea, StyledTextAreaWrapper, StyledContainer, StyledIndicator, StyledOptionalText, OuterLabelWrapper, StyledIndicatorWrapper, StyledHintWrapper, TitleCaption, StyledOutsideHelpersWrapper, StyledHiddenTextArea, StyledContentWrapper, StyledHeaderSlot } from "./TextArea.styles";
|
122
122
|
import { classes } from "./TextArea.tokens";
|
123
123
|
import { base as viewCSS } from "./variations/_view/base";
|
124
124
|
import { base as sizeCSS } from "./variations/_size/base";
|
@@ -128,7 +128,7 @@ import { base as disabledCSS } from "./variations/_disabled/base";
|
|
128
128
|
import { base as hintViewCSS } from "./variations/_hint-view/base";
|
129
129
|
import { base as hintSizeCSS } from "./variations/_hint-size/base";
|
130
130
|
import { HintComponent } from "./ui/Hint/Hint";
|
131
|
-
var innerPlaceholderUp = classes.innerPlaceholderUp, focusedOuterPlaceholderColor = classes.focusedOuterPlaceholderColor, hidePlaceHolder = classes.hidePlaceHolder, styledContainer = classes.styledContainer, styledTextArea = classes.styledTextArea, styledTextAreaWrapper = classes.styledTextAreaWrapper, styledPlaceholder = classes.styledPlaceholder, styledHelpers = classes.styledHelpers;
|
131
|
+
var innerPlaceholderUp = classes.innerPlaceholderUp, focusedOuterPlaceholderColor = classes.focusedOuterPlaceholderColor, hidePlaceHolder = classes.hidePlaceHolder, styledContainer = classes.styledContainer, styledTextArea = classes.styledTextArea, styledTextAreaWrapper = classes.styledTextAreaWrapper, styledPlaceholder = classes.styledPlaceholder, styledHelpers = classes.styledHelpers, hasHeaderSlot = classes.hasHeaderSlot, styledContentWrapper = classes.styledContentWrapper;
|
132
132
|
var optionalText = 'optional';
|
133
133
|
var base = css([
|
134
134
|
"",
|
@@ -162,10 +162,11 @@ export var getDynamicLabelClasses = function(props, focused) {
|
|
162
162
|
};
|
163
163
|
export var textAreaRoot = function(Root) {
|
164
164
|
return /*#__PURE__*/ forwardRef(function(props, innerRef) {
|
165
|
-
var helperText = props.helperText, status = props.status, resize = props.resize, rightHelper = props.rightHelper, leftHelper = props.leftHelper, _props_leftHelperPlacement = props.leftHelperPlacement, leftHelperPlacement = _props_leftHelperPlacement === void 0 ? 'inner' : _props_leftHelperPlacement, contentRight = props.contentRight, _props_autoResize = props.autoResize, autoResize = _props_autoResize === void 0 ? false : _props_autoResize, _props_minAuto = props.minAuto, minAuto = _props_minAuto === void 0 ? 0 : _props_minAuto, maxAuto = props.maxAuto, label = props.label, _props_labelPlacement = props.labelPlacement, labelPlacement = _props_labelPlacement === void 0 ? 'inner' : _props_labelPlacement, titleCaption = props.titleCaption, placeholder = props.placeholder, defaultValue = props.defaultValue, height = props.height, width = props.width, value = props.value, disabled = props.disabled, _props_required = props.required, required = _props_required === void 0 ? false : _props_required, _props_requiredPlacement = props.requiredPlacement, requiredPlacement = _props_requiredPlacement === void 0 ? 'right' : _props_requiredPlacement, _props_hasRequiredIndicator = props.hasRequiredIndicator, hasRequiredIndicator = _props_hasRequiredIndicator === void 0 ? true : _props_hasRequiredIndicator, _props_optional = props.optional, optional = _props_optional === void 0 ? false : _props_optional, clear = props.clear, hasDivider = props.hasDivider, size = props.size, view = props.view, id = props.id, style = props.style, className = props.className, readOnly = props.readOnly, rows = props.rows, cols = props.cols, _props_hintTrigger = props.hintTrigger, hintTrigger = _props_hintTrigger === void 0 ? 'hover' : _props_hintTrigger, hintText = props.hintText, _props_hintView = props.hintView, hintView = _props_hintView === void 0 ? 'default' : _props_hintView, _props_hintSize = props.hintSize, hintSize = _props_hintSize === void 0 ? 'm' : _props_hintSize, hintTargetIcon = props.hintTargetIcon, _props_hintPlacement = props.hintPlacement, hintPlacement = _props_hintPlacement === void 0 ? 'auto' : _props_hintPlacement, hintHasArrow = props.hintHasArrow, _props_hintOffset = props.hintOffset, hintOffset = _props_hintOffset === void 0 ? HINT_DEFAULT_OFFSET : _props_hintOffset, hintWidth = props.hintWidth, hintContentLeft = props.hintContentLeft, onChange = props.onChange, rest = _object_without_properties(props, [
|
165
|
+
var helperText = props.helperText, status = props.status, resize = props.resize, headerSlot = props.headerSlot, rightHelper = props.rightHelper, leftHelper = props.leftHelper, _props_leftHelperPlacement = props.leftHelperPlacement, leftHelperPlacement = _props_leftHelperPlacement === void 0 ? 'inner' : _props_leftHelperPlacement, contentRight = props.contentRight, _props_autoResize = props.autoResize, autoResize = _props_autoResize === void 0 ? false : _props_autoResize, _props_minAuto = props.minAuto, minAuto = _props_minAuto === void 0 ? 0 : _props_minAuto, maxAuto = props.maxAuto, label = props.label, _props_labelPlacement = props.labelPlacement, labelPlacement = _props_labelPlacement === void 0 ? 'inner' : _props_labelPlacement, titleCaption = props.titleCaption, placeholder = props.placeholder, defaultValue = props.defaultValue, height = props.height, width = props.width, value = props.value, disabled = props.disabled, _props_required = props.required, required = _props_required === void 0 ? false : _props_required, _props_requiredPlacement = props.requiredPlacement, requiredPlacement = _props_requiredPlacement === void 0 ? 'right' : _props_requiredPlacement, _props_hasRequiredIndicator = props.hasRequiredIndicator, hasRequiredIndicator = _props_hasRequiredIndicator === void 0 ? true : _props_hasRequiredIndicator, _props_optional = props.optional, optional = _props_optional === void 0 ? false : _props_optional, clear = props.clear, hasDivider = props.hasDivider, size = props.size, view = props.view, id = props.id, style = props.style, className = props.className, readOnly = props.readOnly, rows = props.rows, cols = props.cols, _props_hintTrigger = props.hintTrigger, hintTrigger = _props_hintTrigger === void 0 ? 'hover' : _props_hintTrigger, hintText = props.hintText, _props_hintView = props.hintView, hintView = _props_hintView === void 0 ? 'default' : _props_hintView, _props_hintSize = props.hintSize, hintSize = _props_hintSize === void 0 ? 'm' : _props_hintSize, hintTargetIcon = props.hintTargetIcon, _props_hintPlacement = props.hintPlacement, hintPlacement = _props_hintPlacement === void 0 ? 'auto' : _props_hintPlacement, hintHasArrow = props.hintHasArrow, _props_hintOffset = props.hintOffset, hintOffset = _props_hintOffset === void 0 ? HINT_DEFAULT_OFFSET : _props_hintOffset, hintWidth = props.hintWidth, hintContentLeft = props.hintContentLeft, onChange = props.onChange, rest = _object_without_properties(props, [
|
166
166
|
"helperText",
|
167
167
|
"status",
|
168
168
|
"resize",
|
169
|
+
"headerSlot",
|
169
170
|
"rightHelper",
|
170
171
|
"leftHelper",
|
171
172
|
"leftHelperPlacement",
|
@@ -229,6 +230,7 @@ export var textAreaRoot = function(Root) {
|
|
229
230
|
var hasOuterLabel = Boolean(label && labelPlacement === 'outer');
|
230
231
|
var hasInnerLabel = Boolean(label && labelPlacement === 'inner' && size !== 'xs');
|
231
232
|
var hasPlaceholderOptional = innerOptional && !hasOuterLabel;
|
233
|
+
var hasHeader = Boolean(headerSlot) && !clear;
|
232
234
|
var overriddenView = status !== undefined ? fallbackStatusMap[status] : view;
|
233
235
|
var textareaHelperId = id ? "".concat(id, "-helper") : undefined;
|
234
236
|
var applyCustomWidth = resize !== 'horizontal' && resize !== 'both' && !cols;
|
@@ -365,10 +367,20 @@ export var textAreaRoot = function(Root) {
|
|
365
367
|
handleHintHide: handleHintHide,
|
366
368
|
handleHintClick: handleHintClick,
|
367
369
|
isInnerLabel: true
|
368
|
-
}))),
|
369
|
-
className: cx(styledTextAreaWrapper),
|
370
|
-
hasHelper: hasHelper
|
371
|
-
|
370
|
+
}))), /*#__PURE__*/ React.createElement(StyledTextAreaWrapper, {
|
371
|
+
className: cx(styledTextAreaWrapper, hasHeader && hasHeaderSlot),
|
372
|
+
hasHelper: hasHelper,
|
373
|
+
hasHeader: hasHeader
|
374
|
+
}, headerSlot && !clear && /*#__PURE__*/ React.createElement(StyledHeaderSlot, null, headerSlot), contentRight && !hasHeader && /*#__PURE__*/ React.createElement(StyledContent, null, contentRight), hasHeader && /*#__PURE__*/ React.createElement(StyledContentWrapper, {
|
375
|
+
className: styledContentWrapper,
|
376
|
+
hasHeader: hasHeader
|
377
|
+
}, contentRight && /*#__PURE__*/ React.createElement(StyledContent, {
|
378
|
+
hasHeader: hasHeader
|
379
|
+
}, contentRight), headerSlot && placeholderLabel && /*#__PURE__*/ React.createElement(StyledPlaceholder, {
|
380
|
+
hasContentRight: Boolean(contentRight),
|
381
|
+
className: styledPlaceholder,
|
382
|
+
htmlFor: id
|
383
|
+
}, placeholderLabel, !hasOuterLabel && optionalTextNode)), /*#__PURE__*/ React.createElement(StyledTextArea, _object_spread({
|
372
384
|
className: cx(styledTextArea, hasRightContentClass),
|
373
385
|
id: id,
|
374
386
|
hasContentRight: Boolean(contentRight),
|
@@ -400,7 +412,7 @@ export var textAreaRoot = function(Root) {
|
|
400
412
|
id: textareaHelperId
|
401
413
|
}, isInnerLeftHelperPlacement && (leftHelper || helperText) && /*#__PURE__*/ React.createElement(StyledLeftHelper, null, leftHelper || helperText), rightHelper && /*#__PURE__*/ React.createElement(StyledRightHelper, {
|
402
414
|
"data-root": true
|
403
|
-
}, rightHelper)), placeholderLabel && /*#__PURE__*/ React.createElement(StyledPlaceholder, {
|
415
|
+
}, rightHelper)), !hasHeader && placeholderLabel && /*#__PURE__*/ React.createElement(StyledPlaceholder, {
|
404
416
|
hasContentRight: Boolean(contentRight),
|
405
417
|
className: styledPlaceholder,
|
406
418
|
htmlFor: id
|
@@ -7,13 +7,13 @@ var mergedConfig = mergeConfig(tooltipConfig);
|
|
7
7
|
var Tooltip = component(mergedConfig);
|
8
8
|
export var Hint = styled(Tooltip).withConfig({
|
9
9
|
displayName: "TextArea.styles__Hint",
|
10
|
-
componentId: "sc-
|
10
|
+
componentId: "sc-5fcd62a1-0"
|
11
11
|
})([
|
12
12
|
""
|
13
13
|
]);
|
14
14
|
export var OuterLabelWrapper = styled.div.withConfig({
|
15
15
|
displayName: "TextArea.styles__OuterLabelWrapper",
|
16
|
-
componentId: "sc-
|
16
|
+
componentId: "sc-5fcd62a1-1"
|
17
17
|
})([
|
18
18
|
"display:flex;align-items:center;max-width:",
|
19
19
|
";margin-bottom:",
|
@@ -27,7 +27,7 @@ export var OuterLabelWrapper = styled.div.withConfig({
|
|
27
27
|
});
|
28
28
|
export var StyledLabel = styled.div.withConfig({
|
29
29
|
displayName: "TextArea.styles__StyledLabel",
|
30
|
-
componentId: "sc-
|
30
|
+
componentId: "sc-5fcd62a1-2"
|
31
31
|
})([
|
32
32
|
"position:relative;display:inline-flex;color:var(",
|
33
33
|
",var(",
|
@@ -47,7 +47,7 @@ export var StyledLabel = styled.div.withConfig({
|
|
47
47
|
], tokens.labelOuterColor, tokens.inputColor, tokens.labelOuterFontFamily, tokens.inputFontFamily, tokens.labelOuterFontSize, tokens.inputFontSize, tokens.labelOuterFontStyle, tokens.inputFontStyle, tokens.labelOuterFontWeight, tokens.inputFontWeight, tokens.labelOuterLetterSpacing, tokens.inputLetterSpacing, tokens.labelOuterLineHeight, tokens.inputLineHeight);
|
48
48
|
export var TitleCaption = styled.div.withConfig({
|
49
49
|
displayName: "TextArea.styles__TitleCaption",
|
50
|
-
componentId: "sc-
|
50
|
+
componentId: "sc-5fcd62a1-3"
|
51
51
|
})([
|
52
52
|
"display:inline-block;margin-left:auto;font-family:var(",
|
53
53
|
");font-size:var(",
|
@@ -59,13 +59,13 @@ export var TitleCaption = styled.div.withConfig({
|
|
59
59
|
], tokens.titleCaptionFontFamily, tokens.titleCaptionFontSize, tokens.titleCaptionFontStyle, tokens.titleCaptionFontWeight, tokens.titleCaptionLetterSpacing, tokens.titleCaptionLineHeight);
|
60
60
|
export var StyledIndicatorWrapper = styled.div.withConfig({
|
61
61
|
displayName: "TextArea.styles__StyledIndicatorWrapper",
|
62
|
-
componentId: "sc-
|
62
|
+
componentId: "sc-5fcd62a1-4"
|
63
63
|
})([
|
64
64
|
"position:relative;display:inline-flex;align-items:center;"
|
65
65
|
]);
|
66
66
|
export var StyledOptionalText = styled.span.withConfig({
|
67
67
|
displayName: "TextArea.styles__StyledOptionalText",
|
68
|
-
componentId: "sc-
|
68
|
+
componentId: "sc-5fcd62a1-5"
|
69
69
|
})([
|
70
70
|
"color:var(",
|
71
71
|
");font-family:",
|
@@ -96,7 +96,7 @@ export var StyledOptionalText = styled.span.withConfig({
|
|
96
96
|
});
|
97
97
|
export var StyledHintWrapper = styled.div.withConfig({
|
98
98
|
displayName: "TextArea.styles__StyledHintWrapper",
|
99
|
-
componentId: "sc-
|
99
|
+
componentId: "sc-5fcd62a1-6"
|
100
100
|
})([
|
101
101
|
"display:inline-flex;line-height:0;margin:var(",
|
102
102
|
");&.",
|
@@ -105,7 +105,7 @@ export var StyledHintWrapper = styled.div.withConfig({
|
|
105
105
|
], tokens.hintMargin, classes.innerLabelPlacement, tokens.hintInnerLabelPlacementOffset);
|
106
106
|
export var HintTargetWrapper = styled.div.withConfig({
|
107
107
|
displayName: "TextArea.styles__HintTargetWrapper",
|
108
|
-
componentId: "sc-
|
108
|
+
componentId: "sc-5fcd62a1-7"
|
109
109
|
})([
|
110
110
|
"color:var(",
|
111
111
|
");width:var(",
|
@@ -114,40 +114,76 @@ export var HintTargetWrapper = styled.div.withConfig({
|
|
114
114
|
], tokens.hintIconColor, tokens.hintTargetSize, tokens.hintTargetSize);
|
115
115
|
export var HintIconWrapper = styled.div.withConfig({
|
116
116
|
displayName: "TextArea.styles__HintIconWrapper",
|
117
|
-
componentId: "sc-
|
117
|
+
componentId: "sc-5fcd62a1-8"
|
118
118
|
})([
|
119
119
|
""
|
120
120
|
]);
|
121
121
|
export var StyledTextAreaWrapper = styled.div.withConfig({
|
122
122
|
displayName: "TextArea.styles__StyledTextAreaWrapper",
|
123
|
-
componentId: "sc-
|
123
|
+
componentId: "sc-5fcd62a1-9"
|
124
124
|
})([
|
125
|
-
"background-color:var(",
|
126
|
-
");padding-top:
|
127
|
-
"
|
125
|
+
"display:flex;flex-direction:column;background-color:var(",
|
126
|
+
");padding-top:",
|
127
|
+
";padding-bottom:",
|
128
128
|
";border-radius:",
|
129
129
|
";"
|
130
|
-
], tokens.inputBackgroundColor,
|
130
|
+
], tokens.inputBackgroundColor, function(param) {
|
131
|
+
var hasHeader = param.hasHeader;
|
132
|
+
return hasHeader ? 'unset' : "var(".concat(tokens.inputPaddingTop, ")");
|
133
|
+
}, function(param) {
|
131
134
|
var hasHelper = param.hasHelper;
|
132
135
|
return hasHelper ? "var(".concat(tokens.inputPaddingBottomWithHelpers, ")") : "var(".concat(tokens.inputPaddingBottom, ")");
|
133
136
|
}, function(param) {
|
134
137
|
var hasHelper = param.hasHelper;
|
135
138
|
return hasHelper ? "var(".concat(tokens.borderRadiusWithHelpers, ")") : "var(".concat(tokens.borderRadius, ")");
|
136
139
|
});
|
140
|
+
export var StyledContentWrapper = styled.div.withConfig({
|
141
|
+
displayName: "TextArea.styles__StyledContentWrapper",
|
142
|
+
componentId: "sc-5fcd62a1-10"
|
143
|
+
})([
|
144
|
+
"position:relative;width:100%;height:0;padding-top:",
|
145
|
+
";"
|
146
|
+
], function(param) {
|
147
|
+
var hasHeader = param.hasHeader;
|
148
|
+
return hasHeader ? "var(".concat(tokens.inputPaddingTop, ")") : 'unset';
|
149
|
+
});
|
137
150
|
export var StyledContent = styled.div.withConfig({
|
138
151
|
displayName: "TextArea.styles__StyledContent",
|
139
|
-
componentId: "sc-
|
152
|
+
componentId: "sc-5fcd62a1-11"
|
140
153
|
})([
|
141
|
-
"position:absolute;display:flex;align-items:center;
|
154
|
+
"position:absolute;display:flex;align-items:center;z-index:1;color:var(",
|
142
155
|
",var(",
|
143
|
-
"));top:
|
144
|
-
"
|
156
|
+
"));top:",
|
157
|
+
";right:var(",
|
145
158
|
");height:var(",
|
146
159
|
");"
|
147
|
-
], tokens.rightContentColor, tokens.inputColor,
|
160
|
+
], tokens.rightContentColor, tokens.inputColor, function(param) {
|
161
|
+
var hasHeader = param.hasHeader;
|
162
|
+
return hasHeader ? "var(".concat(tokens.inputPaddingTop, ")") : "var(".concat(tokens.rightContentTop, ")");
|
163
|
+
}, tokens.rightContentRight, tokens.rightContentHeight);
|
164
|
+
export var StyledHeaderSlot = styled.div.withConfig({
|
165
|
+
displayName: "TextArea.styles__StyledHeaderSlot",
|
166
|
+
componentId: "sc-5fcd62a1-12"
|
167
|
+
})([
|
168
|
+
"display:flex;flex-direction:column;"
|
169
|
+
]);
|
170
|
+
export var DividerWrapper = styled.div.withConfig({
|
171
|
+
displayName: "TextArea.styles__DividerWrapper",
|
172
|
+
componentId: "sc-5fcd62a1-13"
|
173
|
+
})([
|
174
|
+
"background:var(",
|
175
|
+
");"
|
176
|
+
], tokens.backgroundColor);
|
177
|
+
export var Divider = styled.div.withConfig({
|
178
|
+
displayName: "TextArea.styles__Divider",
|
179
|
+
componentId: "sc-5fcd62a1-14"
|
180
|
+
})([
|
181
|
+
"height:0.0625rem;background:var(",
|
182
|
+
");"
|
183
|
+
], tokens.dividerColor);
|
148
184
|
export var StyledContainer = styled.div.withConfig({
|
149
185
|
displayName: "TextArea.styles__StyledContainer",
|
150
|
-
componentId: "sc-
|
186
|
+
componentId: "sc-5fcd62a1-15"
|
151
187
|
})([
|
152
188
|
"display:inline-flex;flex-direction:column;width:",
|
153
189
|
";position:relative;"
|
@@ -157,7 +193,7 @@ export var StyledContainer = styled.div.withConfig({
|
|
157
193
|
});
|
158
194
|
export var StyledTextArea = styled.textarea.withConfig({
|
159
195
|
displayName: "TextArea.styles__StyledTextArea",
|
160
|
-
componentId: "sc-
|
196
|
+
componentId: "sc-5fcd62a1-16"
|
161
197
|
})([
|
162
198
|
"display:block;box-sizing:border-box;outline:none;border:none;-webkit-appearance:none;background-color:transparent;color:var(",
|
163
199
|
");caret-color:var(",
|
@@ -220,7 +256,7 @@ export var StyledTextArea = styled.textarea.withConfig({
|
|
220
256
|
}, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight, tokens.inputColorFocus, tokens.scrollbarWidth, tokens.scrollbarThumbBackgroundColor, tokens.scrollbarBorderWidth, tokens.scrollbarTrackBackgroundColor, tokens.scrollbarBorderWidth);
|
221
257
|
export var StyledHiddenTextArea = styled.textarea.withConfig({
|
222
258
|
displayName: "TextArea.styles__StyledHiddenTextArea",
|
223
|
-
componentId: "sc-
|
259
|
+
componentId: "sc-5fcd62a1-17"
|
224
260
|
})([
|
225
261
|
"max-height:none !important;min-height:var(",
|
226
262
|
") !important;visibility:hidden !important;overflow:hidden !important;position:absolute !important;z-index:-1000 !important;top:0 !important;left:0 !important;right:0.0625rem !important;border-width:0;padding-right:",
|
@@ -238,7 +274,7 @@ export var StyledHiddenTextArea = styled.textarea.withConfig({
|
|
238
274
|
}, tokens.inputPaddingLeft, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
|
239
275
|
export var StyledHelpers = styled.div.withConfig({
|
240
276
|
displayName: "TextArea.styles__StyledHelpers",
|
241
|
-
componentId: "sc-
|
277
|
+
componentId: "sc-5fcd62a1-18"
|
242
278
|
})([
|
243
279
|
"box-sizing:border-box;display:flex;justify-content:space-between;transition:background-color 0.1s ease-in-out;background-color:var(",
|
244
280
|
");padding-top:var(",
|
@@ -251,14 +287,14 @@ export var StyledHelpers = styled.div.withConfig({
|
|
251
287
|
], tokens.helpersBackgroundColor, tokens.helpersPaddingTop, tokens.helpersPaddingRight, tokens.helpersPaddingBottom, tokens.helpersPaddingLeft, tokens.borderRadius, tokens.borderRadius);
|
252
288
|
export var StyledOutsideHelpersWrapper = styled.div.withConfig({
|
253
289
|
displayName: "TextArea.styles__StyledOutsideHelpersWrapper",
|
254
|
-
componentId: "sc-
|
290
|
+
componentId: "sc-5fcd62a1-19"
|
255
291
|
})([
|
256
292
|
"box-sizing:border-box;display:flex;justify-content:space-between;padding-top:var(",
|
257
293
|
");"
|
258
294
|
], tokens.clearHelpersPaddingTop);
|
259
295
|
export var StyledLeftHelper = styled.span.withConfig({
|
260
296
|
displayName: "TextArea.styles__StyledLeftHelper",
|
261
|
-
componentId: "sc-
|
297
|
+
componentId: "sc-5fcd62a1-20"
|
262
298
|
})([
|
263
299
|
"",
|
264
300
|
";display:block;font-family:var(",
|
@@ -272,14 +308,14 @@ export var StyledLeftHelper = styled.span.withConfig({
|
|
272
308
|
], applyEllipsis(), tokens.helpersFontFamily, tokens.helpersFontSize, tokens.helpersFontStyle, tokens.helpersFontWeight, tokens.helpersLetterSpacing, tokens.helpersLineHeight, tokens.leftHelperColor);
|
273
309
|
export var StyledRightHelper = styled(StyledLeftHelper).withConfig({
|
274
310
|
displayName: "TextArea.styles__StyledRightHelper",
|
275
|
-
componentId: "sc-
|
311
|
+
componentId: "sc-5fcd62a1-21"
|
276
312
|
})([
|
277
313
|
"color:var(",
|
278
314
|
");margin-left:auto;"
|
279
315
|
], tokens.rightHelperColor);
|
280
316
|
export var StyledPlaceholder = styled.label.withConfig({
|
281
317
|
displayName: "TextArea.styles__StyledPlaceholder",
|
282
|
-
componentId: "sc-
|
318
|
+
componentId: "sc-5fcd62a1-22"
|
283
319
|
})([
|
284
320
|
"box-sizing:border-box;position:absolute;pointer-events:none;display:inline-flex;align-items:center;transition:all 0.1s ease-in-out;transform-origin:top left;color:var(",
|
285
321
|
");width:100%;height:auto;top:var(",
|
@@ -298,7 +334,7 @@ export var StyledPlaceholder = styled.label.withConfig({
|
|
298
334
|
}, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
|
299
335
|
export var StyledIndicator = styled.div.withConfig({
|
300
336
|
displayName: "TextArea.styles__StyledIndicator",
|
301
|
-
componentId: "sc-
|
337
|
+
componentId: "sc-5fcd62a1-23"
|
302
338
|
})([
|
303
339
|
"position:absolute;border-radius:50%;background-color:var(",
|
304
340
|
");&.",
|
@@ -14,7 +14,9 @@ export var classes = {
|
|
14
14
|
hasHint: 'textarea-has-hint',
|
15
15
|
hasRightContent: 'textarea-has-right-content',
|
16
16
|
hasDivider: 'textarea-has-divider',
|
17
|
-
requiredAlignRight: 'required-align-right'
|
17
|
+
requiredAlignRight: 'required-align-right',
|
18
|
+
hasHeaderSlot: 'textarea-has-header-slot',
|
19
|
+
styledContentWrapper: 'textarea-content-wrapper'
|
18
20
|
};
|
19
21
|
export var tokens = {
|
20
22
|
/** Цвет фона для всего компонента */ backgroundColor: '--plasma-textarea-background-color',
|
@@ -1,3 +1,3 @@
|
|
1
1
|
import { classes, tokens } from "../TextArea.tokens";
|
2
|
-
var innerPlaceholderUp = classes.innerPlaceholderUp, hidePlaceHolder = classes.hidePlaceHolder, focusedOuterPlaceholderColor = classes.focusedOuterPlaceholderColor, styledTextArea = classes.styledTextArea, styledTextAreaWrapper = classes.styledTextAreaWrapper, styledPlaceholder = classes.styledPlaceholder;
|
3
|
-
export var applyDynamicLabel = "\n .".concat(innerPlaceholderUp, " {\n .").concat(styledTextArea, " {\n height: calc(var(--plasma_private-textarea-input-actual-height) - var(").concat(tokens.labelInnerTop, ") - var(").concat(tokens.labelInnerTopHelper, ", 0px));\n }\n\n .").concat(styledTextAreaWrapper, " {\n padding-top: calc(calc(var(").concat(tokens.labelInnerTop, ") + var(").concat(tokens.labelInnerFontSize, ")) + var(").concat(tokens.labelInnerMarginBottom, "));\n }\n\n .").concat(styledPlaceholder, " {\n font-family: var(").concat(tokens.labelInnerFontFamily, ");\n font-size: var(").concat(tokens.labelInnerFontSize, ");\n font-style: var(").concat(tokens.labelInnerFontStyle, ");\n font-weight: var(").concat(tokens.labelInnerFontWeight, ");\n letter-spacing: var(").concat(tokens.labelInnerLetterSpacing, ");\n line-height: var(").concat(tokens.labelInnerLineHeight, ");\n top: var(").concat(tokens.labelInnerTop, ");\n }\n }\n\n .").concat(hidePlaceHolder, " .").concat(styledPlaceholder, " {\n display: none;\n }\n\n .").concat(focusedOuterPlaceholderColor, " .").concat(styledPlaceholder, " {\n color: var(").concat(tokens.placeholderColorFocus, ");\n }\n");
|
2
|
+
var innerPlaceholderUp = classes.innerPlaceholderUp, hidePlaceHolder = classes.hidePlaceHolder, focusedOuterPlaceholderColor = classes.focusedOuterPlaceholderColor, styledTextArea = classes.styledTextArea, styledTextAreaWrapper = classes.styledTextAreaWrapper, styledPlaceholder = classes.styledPlaceholder, hasHeaderSlot = classes.hasHeaderSlot, styledContentWrapper = classes.styledContentWrapper;
|
3
|
+
export var applyDynamicLabel = "\n .".concat(innerPlaceholderUp, " {\n .").concat(styledTextArea, " {\n height: calc(var(--plasma_private-textarea-input-actual-height) - var(").concat(tokens.labelInnerTop, ") - var(").concat(tokens.labelInnerTopHelper, ", 0px));\n }\n\n .").concat(styledTextAreaWrapper, " {\n padding-top: calc(calc(var(").concat(tokens.labelInnerTop, ") + var(").concat(tokens.labelInnerFontSize, ")) + var(").concat(tokens.labelInnerMarginBottom, "));\n }\n \n .").concat(hasHeaderSlot, " {\n padding-top: unset;\n\n .").concat(styledContentWrapper, " {\n padding-top: calc(calc(var(").concat(tokens.labelInnerTop, ") + var(").concat(tokens.labelInnerFontSize, ")) + var(").concat(tokens.labelInnerMarginBottom, "));\n }\n }\n\n .").concat(styledPlaceholder, " {\n font-family: var(").concat(tokens.labelInnerFontFamily, ");\n font-size: var(").concat(tokens.labelInnerFontSize, ");\n font-style: var(").concat(tokens.labelInnerFontStyle, ");\n font-weight: var(").concat(tokens.labelInnerFontWeight, ");\n letter-spacing: var(").concat(tokens.labelInnerLetterSpacing, ");\n line-height: var(").concat(tokens.labelInnerLineHeight, ");\n top: var(").concat(tokens.labelInnerTop, ");\n }\n }\n\n .").concat(hidePlaceHolder, " .").concat(styledPlaceholder, " {\n display: none;\n }\n\n .").concat(focusedOuterPlaceholderColor, " .").concat(styledPlaceholder, " {\n color: var(").concat(tokens.placeholderColorFocus, ");\n }\n");
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.styles.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AA8FtD,eAAO,MAAM,WAAW,0OAEvB,CAAC;AAEF,eAAO,MAAM,WAAW;eACT,eAAe;YAClB,MAAM,GAAG,MAAM;aACd,MAAM,GAAG,MAAM;
|
1
|
+
{"version":3,"file":"Drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.styles.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AA8FtD,eAAO,MAAM,WAAW,0OAEvB,CAAC;AAEF,eAAO,MAAM,WAAW;eACT,eAAe;YAClB,MAAM,GAAG,MAAM;aACd,MAAM,GAAG,MAAM;kFAoC3B,CAAC"}
|