@vchasno/ui-kit 0.3.23 → 0.3.25
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/CHANGELOG.md +18 -0
- package/dist/Datepicker/index.cjs.js +1 -1
- package/dist/Datepicker/index.js +1 -1
- package/dist/Datepicker/types/components/Paragraph/Paragraph.d.ts +1 -0
- package/dist/Datepicker/types/components/Select/utils.d.ts +2 -0
- package/dist/Menu/types/components/Paragraph/Paragraph.d.ts +1 -0
- package/dist/Menu/types/components/Select/utils.d.ts +2 -0
- package/dist/ProjectsPopover/types/components/Paragraph/Paragraph.d.ts +1 -0
- package/dist/ProjectsPopover/types/components/Select/utils.d.ts +2 -0
- package/dist/Select/index.cjs.js +10 -16
- package/dist/Select/index.cjs.js.map +1 -1
- package/dist/Select/index.js +10 -16
- package/dist/Select/index.js.map +1 -1
- package/dist/Select/types/components/Paragraph/Paragraph.d.ts +1 -0
- package/dist/Select/types/components/Select/utils.d.ts +2 -0
- package/dist/SelectCreatable/index.cjs.js +10 -16
- package/dist/SelectCreatable/index.cjs.js.map +1 -1
- package/dist/SelectCreatable/index.js +10 -16
- package/dist/SelectCreatable/index.js.map +1 -1
- package/dist/SelectCreatable/types/components/Paragraph/Paragraph.d.ts +1 -0
- package/dist/SelectCreatable/types/components/Select/utils.d.ts +2 -0
- package/dist/Snackbar/index.cjs.js +16 -17
- package/dist/Snackbar/index.cjs.js.map +1 -1
- package/dist/Snackbar/index.js +16 -17
- package/dist/Snackbar/index.js.map +1 -1
- package/dist/Snackbar/types/components/Paragraph/Paragraph.d.ts +1 -0
- package/dist/Snackbar/types/components/Select/utils.d.ts +2 -0
- package/dist/css/Input.global.css +1 -1
- package/dist/css/LabelText.global.css +1 -0
- package/dist/css/Paragraph.global.css +8 -0
- package/dist/css/Select.global.css +1 -1
- package/dist/css/Text.global.css +4 -0
- package/dist/css/TextAreaInput.global.css +7 -3
- package/dist/index.d.ts +1 -0
- package/dist/index.js +16 -17
- package/dist/index.js.map +1 -1
- package/dist/types/components/Paragraph/Paragraph.d.ts +1 -0
- package/dist/types/components/Select/utils.d.ts +2 -0
- package/package.json +1 -1
package/dist/Snackbar/index.js
CHANGED
|
@@ -243,7 +243,7 @@ var InputMeta = function (_a) {
|
|
|
243
243
|
error && React__default.createElement("span", { className: "vchasno-ui-meta__error" }, error)));
|
|
244
244
|
};
|
|
245
245
|
|
|
246
|
-
var css_248z$l = ".vchasno-ui-label-text {\n position: absolute;\n z-index: 1;\n top: 50%;\n left: 12px;\n display: inline-flex;\n max-width: calc(100% - 20px);\n align-self: flex-start;\n padding: 0 4px;\n background-color: var(--vchasno-ui-input-bg-color);\n color: var(--vchasno-ui-label-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n gap: 3px;\n line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n pointer-events: none;\n text-overflow: ellipsis;\n transform: translate(0, -50%);\n transition:\n color var(--vchasno-ui-transition-duration-sec, 0.3s),\n top 0.3s,\n font-size 0.3s;\n white-space: nowrap;\n}\n\n.vchasno-ui-select .vchasno-ui-label-text {\n max-width: calc(100% - 40px);\n}\n\n.vchasno-ui-select__floating-label,\n[class^='vchasno-ui-']:not(:placeholder-shown) + .vchasno-ui-label-text,\n[class^='vchasno-ui-']:focus:not(.--disabled) + .vchasno-ui-label-text {\n top: 0;\n font-size: 12px;\n}\n\nlabel[class^='vchasno-ui-']:not(.--error):focus-within .vchasno-ui-label-text {\n color: var(--vchasno-ui-label-color-focused);\n}\n\nlabel[class^='vchasno-ui-']:not(.--disabled).--error .vchasno-ui-label-text {\n color: var(--vchasno-ui-input-color-error);\n}\n\nlabel[class^='vchasno-ui-']:not(.--disabled).--required .vchasno-ui-label-text:hover {\n cursor: text;\n}\n\n.vchasno-ui-label-text sup {\n position: relative;\n top: -0.2em;\n display: none;\n color: var(--vchasno-ui-input-color-error);\n font-size: calc(var(--vchasno-ui-input-font-size) * 1.4);\n vertical-align: top;\n}\n\nlabel[class^='vchasno-ui-'].--required .vchasno-ui-label-text sup {\n display: inline-block;\n}\n\n.vchasno-ui-label-text__title-icon {\n display: none;\n color: var(--vchasno-ui-label-color-default);\n transform: scale(0.8);\n}\n\n.vchasno-ui-input[title] .vchasno-ui-label-text__title-icon {\n display: block;\n}\n\n.vchasno-ui-label-text__content {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n";
|
|
246
|
+
var css_248z$l = ".vchasno-ui-label-text {\n position: absolute;\n z-index: 1;\n top: 50%;\n left: 12px;\n display: inline-flex;\n max-width: calc(100% - 20px);\n align-self: flex-start;\n padding: 0 4px;\n border-radius: 4px;\n background-color: var(--vchasno-ui-input-bg-color);\n color: var(--vchasno-ui-label-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n gap: 3px;\n line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n pointer-events: none;\n text-overflow: ellipsis;\n transform: translate(0, -50%);\n transition:\n color var(--vchasno-ui-transition-duration-sec, 0.3s),\n top 0.3s,\n font-size 0.3s;\n white-space: nowrap;\n}\n\n.vchasno-ui-select .vchasno-ui-label-text {\n max-width: calc(100% - 40px);\n}\n\n.vchasno-ui-select__floating-label,\n[class^='vchasno-ui-']:not(:placeholder-shown) + .vchasno-ui-label-text,\n[class^='vchasno-ui-']:focus:not(.--disabled) + .vchasno-ui-label-text {\n top: 0;\n font-size: 12px;\n}\n\nlabel[class^='vchasno-ui-']:not(.--error):focus-within .vchasno-ui-label-text {\n color: var(--vchasno-ui-label-color-focused);\n}\n\nlabel[class^='vchasno-ui-']:not(.--disabled).--error .vchasno-ui-label-text {\n color: var(--vchasno-ui-input-color-error);\n}\n\nlabel[class^='vchasno-ui-']:not(.--disabled).--required .vchasno-ui-label-text:hover {\n cursor: text;\n}\n\n.vchasno-ui-label-text sup {\n position: relative;\n top: -0.2em;\n display: none;\n color: var(--vchasno-ui-input-color-error);\n font-size: calc(var(--vchasno-ui-input-font-size) * 1.4);\n vertical-align: top;\n}\n\nlabel[class^='vchasno-ui-'].--required .vchasno-ui-label-text sup {\n display: inline-block;\n}\n\n.vchasno-ui-label-text__title-icon {\n display: none;\n color: var(--vchasno-ui-label-color-default);\n transform: scale(0.8);\n}\n\n.vchasno-ui-input[title] .vchasno-ui-label-text__title-icon {\n display: block;\n}\n\n.vchasno-ui-label-text__content {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n";
|
|
247
247
|
styleInject(css_248z$l);
|
|
248
248
|
|
|
249
249
|
var LabelText = function (_a) {
|
|
@@ -260,7 +260,7 @@ var LabelText = function (_a) {
|
|
|
260
260
|
React__default.createElement("sup", null, "*")));
|
|
261
261
|
};
|
|
262
262
|
|
|
263
|
-
var css_248z$k = ".vchasno-ui-input {\n display: inline-flex;\n max-width: 100%;\n flex-direction: column;\n gap: 5px;\n}\n\n.vchasno-ui-input input::placeholder {\n color: var(--vchasno-ui-input-border-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-input .vchasno-ui-text-input,\n.vchasno-ui-input .vchasno-ui-mask-input {\n flex-grow: 1;\n}\n\n.vchasno-ui-input.--wide {\n width: 100%;\n}\n\n.vchasno-ui-input__wrapper {\n position: relative;\n display: flex;\n height: 50px;\n box-sizing: border-box;\n align-items: center;\n padding-right: 33px;\n padding-left: 16px;\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n border-radius: 8px;\n background-color: var(--vchasno-ui-input-bg-color);\n outline: solid 3px transparent;\n transition: border var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-input__wrapper > input {\n max-width: 100%;\n}\n\n.vchasno-ui-input__wrapper__start-element {\n display: flex;\n flex-grow: 0;\n flex-shrink: 0;\n align-items: center;\n font-size: var(--vchasno-ui-input-font-size, 14px);\n line-height: var(--vchasno-ui-input-font-size, 14px);\n}\n\n.vchasno-ui-input__feedback {\n position: absolute;\n top: 10px;\n right: 10px;\n display: block;\n width: 18px;\n height: 18px;\n}\n\n.vchasno-ui-input .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-input.--disabled .vchasno-ui-input__wrapper {\n background-color: var(--vchasno-ui-input-bg-color-disabled);\n color: var(--vchasno-ui-input-font-color-disabled);\n}\n\n.vchasno-ui-input:not(.--disabled) .vchasno-ui-input__wrapper:hover {\n cursor: text;\n}\n\n.vchasno-ui-input:not(.--disabled):hover .vchasno-ui-input__wrapper,\n.vchasno-ui-input:not(.--disabled):focus-within .vchasno-ui-input__wrapper {\n border-color: var(--vchasno-ui-input-border-color-focused);\n outline-color: var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-input:not(.--disabled).--error .vchasno-ui-input__wrapper {\n border-color: var(--vchasno-ui-input-color-error);\n outline-color: var(--vchasno-ui-input-outline-color-error);\n}\n\n.vchasno-ui-input.--disabled,\n.vchasno-ui-input.--disabled * {\n cursor: not-allowed;\n opacity: 0.8;\n}\n";
|
|
263
|
+
var css_248z$k = ".vchasno-ui-input {\n display: inline-flex;\n max-width: 100%;\n flex-direction: column;\n gap: 5px;\n}\n\n.vchasno-ui-input input::placeholder {\n color: var(--vchasno-ui-input-border-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-input .vchasno-ui-text-input,\n.vchasno-ui-input .vchasno-ui-mask-input {\n flex-grow: 1;\n}\n\n.vchasno-ui-input.--wide {\n width: 100%;\n}\n\n.vchasno-ui-input__wrapper {\n position: relative;\n display: flex;\n min-height: 50px;\n box-sizing: border-box;\n align-items: center;\n padding-right: 33px;\n padding-left: 16px;\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n border-radius: 8px;\n background-color: var(--vchasno-ui-input-bg-color);\n outline: solid 3px transparent;\n transition: border var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-input__wrapper > input {\n max-width: 100%;\n}\n\n.vchasno-ui-input__wrapper__start-element {\n display: flex;\n flex-grow: 0;\n flex-shrink: 0;\n align-items: center;\n font-size: var(--vchasno-ui-input-font-size, 14px);\n line-height: var(--vchasno-ui-input-font-size, 14px);\n}\n\n.vchasno-ui-input__feedback {\n position: absolute;\n top: 10px;\n right: 10px;\n display: block;\n width: 18px;\n height: 18px;\n}\n\n.vchasno-ui-input .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-input.--disabled .vchasno-ui-input__wrapper {\n background-color: var(--vchasno-ui-input-bg-color-disabled);\n color: var(--vchasno-ui-input-font-color-disabled);\n}\n\n.vchasno-ui-input:not(.--disabled) .vchasno-ui-input__wrapper:hover {\n cursor: text;\n}\n\n.vchasno-ui-input:not(.--disabled):hover .vchasno-ui-input__wrapper,\n.vchasno-ui-input:not(.--disabled):focus-within .vchasno-ui-input__wrapper {\n border-color: var(--vchasno-ui-input-border-color-focused);\n outline-color: var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-input:not(.--disabled).--error .vchasno-ui-input__wrapper {\n border-color: var(--vchasno-ui-input-color-error);\n outline-color: var(--vchasno-ui-input-outline-color-error);\n}\n\n.vchasno-ui-input.--disabled,\n.vchasno-ui-input.--disabled * {\n cursor: not-allowed;\n opacity: 0.8;\n}\n";
|
|
264
264
|
styleInject(css_248z$k);
|
|
265
265
|
|
|
266
266
|
var Input = function (_a) {
|
|
@@ -304,7 +304,7 @@ var TextInput = React__default.forwardRef(function (_a, ref) {
|
|
|
304
304
|
});
|
|
305
305
|
TextInput.displayName = 'TextInput';
|
|
306
306
|
|
|
307
|
-
var css_248z$g = ".vchasno-ui-text {\n color: var(--vchasno-ui-text-primary-color, #333);\n}\n\n.vchasno-ui-text.--ellipsis {\n display: inline-block;\n overflow: hidden;\n max-width: 100%;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.vchasno-ui-text.--secondary {\n color: var(--vchasno-ui-text-secondary-color, #6b8091);\n}\n\n.vchasno-ui-text.--success {\n color: var(--vchasno-ui-text-success-color, #1cb800);\n}\n\n.vchasno-ui-text.--warning {\n color: var(--vchasno-ui-text-warning-color, #ffb200);\n}\n\n.vchasno-ui-text.--danger {\n color: var(--vchasno-ui-text-error-color, #ff5937);\n}\n\n.vchasno-ui-text.--code {\n padding: 0.2em 0.4em 0.1em;\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n border-radius: 3px;\n margin: 0 0.2em;\n background: hsl(0deg 0% 58.8% / 10%);\n font-size: 85%;\n}\n\n.vchasno-ui-text.--inherit {\n font-size: inherit;\n}\n\n.vchasno-ui-text.--link,\n.vchasno-ui-text.--like-link {\n color: #087dc1;\n cursor: pointer;\n}\n\n.vchasno-ui-text.--link {\n text-decoration-line: underline;\n}\n\n.vchasno-ui-text.--normal {\n font-size: 1rem;\n line-height: 1.1rem;\n}\n\n.vchasno-ui-text.--small {\n font-size: 0.8rem;\n line-height: 0.9rem;\n}\n\n.vchasno-ui-text.--large {\n font-size: 1.2rem;\n line-height: 1.3rem;\n}\n\n.vchasno-ui-text.--required::after {\n position: relative;\n top: -3px;\n right: -2px;\n color: var(--vchasno-ui-text-error-color, #ff5937);\n content: '*';\n}\n";
|
|
307
|
+
var css_248z$g = ".vchasno-ui-text {\n color: var(--vchasno-ui-text-primary-color, #333);\n}\n\n.vchasno-ui-text.--ellipsis {\n display: inline-block;\n overflow: hidden;\n max-width: 100%;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.vchasno-ui-text.--secondary {\n color: var(--vchasno-ui-text-secondary-color, #6b8091);\n}\n\n.vchasno-ui-text.--success {\n color: var(--vchasno-ui-text-success-color, #1cb800);\n}\n\n.vchasno-ui-text.--warning {\n color: var(--vchasno-ui-text-warning-color, #ffb200);\n}\n\n.vchasno-ui-text.--danger {\n color: var(--vchasno-ui-text-error-color, #ff5937);\n}\n\n.vchasno-ui-text.--code {\n padding: 0.2em 0.4em 0.1em;\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n border-radius: 3px;\n margin: 0 0.2em;\n background: hsl(0deg 0% 58.8% / 10%);\n font-size: 85%;\n}\n\n.vchasno-ui-text.--inherit {\n font-size: inherit;\n}\n\n.vchasno-ui-text.--link,\n.vchasno-ui-text.--like-link {\n color: #087dc1;\n cursor: pointer;\n}\n\n.vchasno-ui-text.--link {\n text-decoration-line: underline;\n}\n\n.vchasno-ui-text.--normal {\n font-size: 1rem;\n line-height: 1.1rem;\n}\n\n.vchasno-ui-text.--small {\n font-size: 0.8rem;\n line-height: 0.9rem;\n}\n\n.vchasno-ui-text.--large {\n font-size: 1.2rem;\n line-height: 1.3rem;\n}\n\n.vchasno-ui-text.--required::after {\n position: relative;\n top: -3px;\n right: -2px;\n color: var(--vchasno-ui-text-error-color, #ff5937);\n content: '*';\n}\n\nstrong.vchasno-ui-text {\n font-weight: 700;\n}\n";
|
|
308
308
|
styleInject(css_248z$g);
|
|
309
309
|
|
|
310
310
|
var typeToCN = {
|
|
@@ -318,24 +318,24 @@ var typeToCN = {
|
|
|
318
318
|
};
|
|
319
319
|
var Text = React__default.forwardRef(function (_a, ref) {
|
|
320
320
|
var _b = _a.type, type = _b === void 0 ? 'default' : _b, className = _a.className, _c = _a.code, code = _c === void 0 ? false : _c, _d = _a.del, del = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, _f = _a.strong, strong = _f === void 0 ? false : _f, children = _a.children, ellipsis = _a.ellipsis, _g = _a.required, required = _g === void 0 ? false : _g, rest = __rest(_a, ["type", "className", "code", "del", "underline", "strong", "children", "ellipsis", "required"]);
|
|
321
|
-
var
|
|
321
|
+
var element = 'span';
|
|
322
322
|
if (del) {
|
|
323
|
-
|
|
323
|
+
element = 'del';
|
|
324
324
|
}
|
|
325
325
|
if (strong) {
|
|
326
|
-
|
|
326
|
+
element = 'strong';
|
|
327
327
|
}
|
|
328
328
|
if (underline) {
|
|
329
|
-
|
|
329
|
+
element = 'u';
|
|
330
330
|
}
|
|
331
331
|
if (code) {
|
|
332
|
-
|
|
332
|
+
element = 'code';
|
|
333
333
|
}
|
|
334
|
-
return
|
|
334
|
+
return React__default.createElement(element, __assign({ ref: ref, className: cn('vchasno-ui-text', className, typeToCN[type], {
|
|
335
335
|
'--code': code,
|
|
336
336
|
'--ellipsis': ellipsis,
|
|
337
337
|
'--required': required,
|
|
338
|
-
}), title: ellipsis && typeof children === 'string' ? children : undefined }, rest),
|
|
338
|
+
}), title: ellipsis && typeof children === 'string' ? children : undefined }, rest), children);
|
|
339
339
|
});
|
|
340
340
|
Text.displayName = 'Text';
|
|
341
341
|
|
|
@@ -364,12 +364,12 @@ var Title = React__default.forwardRef(function (_a, ref) {
|
|
|
364
364
|
});
|
|
365
365
|
Title.displayName = 'Title';
|
|
366
366
|
|
|
367
|
-
var css_248z$d = ".vchasno-ui-paragraph {\n color: var(--vchasno-ui-text-primary-color);\n}\n\n.vchasno-ui-paragraph.--ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n";
|
|
367
|
+
var css_248z$d = ".vchasno-ui-paragraph {\n color: var(--vchasno-ui-text-primary-color);\n}\n\n.vchasno-ui-paragraph.--ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.vchasno-ui-paragraph.--ellipsis-line {\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n white-space: unset;\n}\n";
|
|
368
368
|
styleInject(css_248z$d);
|
|
369
369
|
|
|
370
370
|
var Paragraph = React__default.forwardRef(function (_a, ref) {
|
|
371
|
-
var _b = _a.ellipsis, ellipsis = _b === void 0 ? false : _b, children = _a.children, className = _a.className, textAlign = _a.textAlign, rest = __rest(_a, ["ellipsis", "children", "className", "textAlign"]);
|
|
372
|
-
return (React__default.createElement("p", __assign({ ref: ref, title: ellipsis && typeof children === 'string' ? children : undefined, className: cn('vchasno-ui-paragraph', className, { '--ellipsis': ellipsis }, textAlign && "--text-".concat(textAlign)) }, rest), children));
|
|
371
|
+
var _b = _a.ellipsis, ellipsis = _b === void 0 ? false : _b, children = _a.children, className = _a.className, textAlign = _a.textAlign, ellipsisLine = _a.ellipsisLine, rest = __rest(_a, ["ellipsis", "children", "className", "textAlign", "ellipsisLine"]);
|
|
372
|
+
return (React__default.createElement("p", __assign({ ref: ref, title: ellipsis && typeof children === 'string' ? children : undefined, className: cn('vchasno-ui-paragraph', className, { '--ellipsis': ellipsis, '--ellipsis-line': ellipsisLine !== undefined }, textAlign && "--text-".concat(textAlign)) }, rest, { style: ellipsisLine ? { WebkitLineClamp: ellipsisLine } : undefined }), children));
|
|
373
373
|
});
|
|
374
374
|
Paragraph.displayName = 'Paragraph';
|
|
375
375
|
|
|
@@ -450,14 +450,13 @@ var TextareaAutosize = function TextareaAutosize(_ref, userRef) {
|
|
|
450
450
|
};
|
|
451
451
|
var index = /* #__PURE__ */React$1.forwardRef(TextareaAutosize);
|
|
452
452
|
|
|
453
|
-
var css_248z$c = ".vchasno-ui-textarea-input-container .vchasno-ui-input__wrapper {\n height: auto;\n min-height: 40px;\n padding-top: 10px;\n padding-bottom: 10px;\n}\n\n.vchasno-ui-textarea-input {\n width: 100%;\n border: 0;\n color: var(--vchasno-ui-text-primary-color);\n font-size: var(--vchasno-ui-input-font-size);\n line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n resize: none;\n}\n\n.vchasno-ui-textarea-input::placeholder {\n color: var(--vchasno-ui-input-border-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n visibility: hidden;\n}\n\n.vchasno-ui-textarea-input:focus::placeholder {\n visibility: visible;\n}\n\n.vchasno-ui-input__wrapper__label {\n transform: none;\n}\n\n.vchasno-ui-textarea-input + .vchasno-ui-label-text {\n top:
|
|
453
|
+
var css_248z$c = ".vchasno-ui-textarea-input-container .vchasno-ui-input__wrapper {\n height: auto;\n min-height: 40px;\n padding-top: 10px;\n padding-bottom: 10px;\n}\n\n.vchasno-ui-textarea-input {\n width: 100%;\n border: 0;\n color: var(--vchasno-ui-text-primary-color);\n font-size: var(--vchasno-ui-input-font-size);\n line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n resize: none;\n}\n\n.vchasno-ui-textarea-input::placeholder {\n color: var(--vchasno-ui-input-border-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n visibility: hidden;\n}\n\n.vchasno-ui-textarea-input:focus::placeholder {\n visibility: visible;\n}\n\n.vchasno-ui-input__wrapper__label {\n transform: none;\n}\n\n.vchasno-ui-textarea-input + .vchasno-ui-label-text {\n top: 0;\n transform: translateY(10px);\n transition:\n transform var(--vchasno-ui-transition-duration-sec, 0.3s),\n font-size var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-textarea-input:not(:placeholder-shown) + .vchasno-ui-label-text,\n.vchasno-ui-textarea-input:focus:not(.--disabled) + .vchasno-ui-label-text {\n top: 0;\n transform: translateY(-12px);\n}\n";
|
|
454
454
|
styleInject(css_248z$c);
|
|
455
455
|
|
|
456
456
|
var TextAreaInput = React__default.forwardRef(function (_a, ref) {
|
|
457
|
-
var className = _a.className, disabled = _a.disabled, startElement = _a.startElement, endElement = _a.endElement, error = _a.error, label = _a.label, hint = _a.hint, wide = _a.wide, required = _a.required, loading = _a.loading, textareaClassName = _a.textareaClassName, labelProps = _a.labelProps,
|
|
458
|
-
rest = __rest(_a, ["className", "disabled", "startElement", "endElement", "error", "label", "hint", "wide", "required", "loading", "textareaClassName", "labelProps", "placeholder"]);
|
|
457
|
+
var className = _a.className, disabled = _a.disabled, startElement = _a.startElement, endElement = _a.endElement, error = _a.error, label = _a.label, hint = _a.hint, wide = _a.wide, required = _a.required, loading = _a.loading, textareaClassName = _a.textareaClassName, labelProps = _a.labelProps, rest = __rest(_a, ["className", "disabled", "startElement", "endElement", "error", "label", "hint", "wide", "required", "loading", "textareaClassName", "labelProps"]);
|
|
459
458
|
return (React__default.createElement(Input, { required: required, wide: wide, className: cn(className, 'vchasno-ui-textarea-input-container'), loading: loading, disabled: disabled, label: label, error: error, hint: hint, endElement: endElement, labelProps: labelProps, startElement: startElement },
|
|
460
|
-
React__default.createElement(index, __assign({}, rest, {
|
|
459
|
+
React__default.createElement(index, __assign({}, rest, { title: rest.title, ref: ref, required: required, disabled: disabled, className: cn('vchasno-ui-textarea-input', textareaClassName) }))));
|
|
461
460
|
});
|
|
462
461
|
TextAreaInput.displayName = 'TextAreaInput';
|
|
463
462
|
|