@vchasno/ui-kit 0.2.7 → 0.2.8
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 +42 -27
- package/dist/Datepicker/index.cjs.js +10376 -0
- package/dist/Datepicker/index.cjs.js.map +1 -0
- package/dist/Datepicker/index.js.map +1 -1
- package/dist/Datepicker/types/components/BubbleBox/BubbleBox.d.ts +17 -0
- package/dist/Datepicker/types/components/BubbleBox/index.d.ts +2 -0
- package/dist/Datepicker/types/components/BubbleBox/useClientRect.d.ts +5 -0
- package/dist/Datepicker/types/components/BubbleBox/utils.d.ts +1 -0
- package/dist/Datepicker/types/components/index.d.ts +2 -0
- package/dist/Select/index.cjs.js +7746 -0
- package/dist/Select/index.cjs.js.map +1 -0
- package/dist/Select/index.js +12 -7
- package/dist/Select/index.js.map +1 -1
- package/dist/Select/types/components/BubbleBox/BubbleBox.d.ts +17 -0
- package/dist/Select/types/components/BubbleBox/index.d.ts +2 -0
- package/dist/Select/types/components/BubbleBox/useClientRect.d.ts +5 -0
- package/dist/Select/types/components/BubbleBox/utils.d.ts +1 -0
- package/dist/Select/types/components/index.d.ts +2 -0
- package/dist/SelectCreatable/index.cjs.js +7835 -0
- package/dist/SelectCreatable/index.cjs.js.map +1 -0
- package/dist/SelectCreatable/index.js +12 -7
- package/dist/SelectCreatable/index.js.map +1 -1
- package/dist/SelectCreatable/types/components/BubbleBox/BubbleBox.d.ts +17 -0
- package/dist/SelectCreatable/types/components/BubbleBox/index.d.ts +2 -0
- package/dist/SelectCreatable/types/components/BubbleBox/useClientRect.d.ts +5 -0
- package/dist/SelectCreatable/types/components/BubbleBox/utils.d.ts +1 -0
- package/dist/SelectCreatable/types/components/index.d.ts +2 -0
- package/dist/index.d.ts +16 -1
- package/dist/index.js +257 -154
- package/dist/index.js.map +1 -1
- package/dist/types/components/BubbleBox/BubbleBox.d.ts +17 -0
- package/dist/types/components/BubbleBox/index.d.ts +2 -0
- package/dist/types/components/BubbleBox/useClientRect.d.ts +5 -0
- package/dist/types/components/BubbleBox/utils.d.ts +1 -0
- package/dist/types/components/index.d.ts +2 -0
- package/package.json +43 -34
package/dist/index.js
CHANGED
|
@@ -1,5 +1,25 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
|
|
5
|
+
function _interopNamespaceDefault(e) {
|
|
6
|
+
var n = Object.create(null);
|
|
7
|
+
if (e) {
|
|
8
|
+
Object.keys(e).forEach(function (k) {
|
|
9
|
+
if (k !== 'default') {
|
|
10
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
11
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
12
|
+
enumerable: true,
|
|
13
|
+
get: function () { return e[k]; }
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
n.default = e;
|
|
19
|
+
return Object.freeze(n);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
3
23
|
|
|
4
24
|
/******************************************************************************
|
|
5
25
|
Copyright (c) Microsoft Corporation.
|
|
@@ -151,101 +171,101 @@ function styleInject(css, ref) {
|
|
|
151
171
|
}
|
|
152
172
|
}
|
|
153
173
|
|
|
154
|
-
var css_248z$
|
|
155
|
-
styleInject(css_248z$
|
|
174
|
+
var css_248z$i = ".vchasno-ui-flex-box {\n display: flex;\n flex-direction: row;\n align-content: flex-start;\n gap: 10px;\n}\n";
|
|
175
|
+
styleInject(css_248z$i);
|
|
156
176
|
|
|
157
|
-
var FlexBox =
|
|
177
|
+
var FlexBox = React.forwardRef(function (_a, ref) {
|
|
158
178
|
var className = _a.className, _b = _a.tagName, tagName = _b === void 0 ? 'div' : _b, children = _a.children, direction = _a.direction, gap = _a.gap, wrap = _a.wrap, align = _a.align, justify = _a.justify, grow = _a.grow, shrink = _a.shrink, _c = _a.style, style = _c === void 0 ? {} : _c, rest = __rest(_a, ["className", "tagName", "children", "direction", "gap", "wrap", "align", "justify", "grow", "shrink", "style"]);
|
|
159
|
-
return
|
|
179
|
+
return React.createElement(tagName, __assign({ ref: ref, className: cn('vchasno-ui-flex-box', className), style: __assign(__assign({}, style), { flexDirection: direction, gap: gap, flexWrap: wrap, justifyContent: justify, alignItems: align, alignContent: align, flexGrow: grow, flexShrink: shrink }) }, rest), children);
|
|
160
180
|
});
|
|
161
181
|
FlexBox.displayName = 'FlexBox';
|
|
162
182
|
|
|
163
|
-
var css_248z$
|
|
164
|
-
styleInject(css_248z$
|
|
183
|
+
var css_248z$h = ".vchasno-ui-spinner {\n position: relative;\n display: inline-block;\n width: 20px;\n height: 20px;\n}\n\n.vchasno-ui-spinner__svg {\n position: absolute;\n width: 100%;\n height: 100%;\n margin: auto;\n animation: spinner-rotate 1.3s linear infinite;\n inset: 0;\n transform-origin: center center;\n}\n\n.vchasno-ui-spinner__svg__circle {\n animation: spinner-rotate-dash 2s ease-in-out infinite;\n stroke-dasharray: 1, 200;\n stroke-dashoffset: 0;\n stroke-linecap: round;\n stroke-width: 5px;\n}\n\n@keyframes spinner-rotate {\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes spinner-rotate-dash {\n 0% {\n stroke-dasharray: 1, 200;\n stroke-dashoffset: 0;\n }\n\n 50% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -35px;\n }\n\n 100% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -124px;\n }\n}\n";
|
|
184
|
+
styleInject(css_248z$h);
|
|
165
185
|
|
|
166
186
|
var Spinner = function (_a) {
|
|
167
187
|
var _b = _a.color, color = _b === void 0 ? 'currentColor' : _b, width = _a.width, height = _a.height, className = _a.className, style = _a.style;
|
|
168
|
-
return (
|
|
169
|
-
|
|
170
|
-
|
|
188
|
+
return (React.createElement("span", { className: cn('vchasno-ui-spinner', className), style: __assign({ width: width, height: height }, style) },
|
|
189
|
+
React.createElement("svg", { className: "vchasno-ui-spinner__svg", viewBox: "25 25 50 50" },
|
|
190
|
+
React.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
|
|
171
191
|
};
|
|
172
192
|
|
|
173
|
-
var css_248z$
|
|
174
|
-
styleInject(css_248z$
|
|
193
|
+
var css_248z$g = ".vchasno-ui-button {\n display: inline-flex;\n min-height: 40px;\n align-items: center;\n justify-content: center;\n border: 0;\n border-radius: 3px;\n background-color: var(--vchasno-ui-btn-default-bg);\n color: var(--vchasno-ui-btn-default-color);\n font-size: var(--vchasno-ui-btn-font-size);\n font-weight: 700;\n gap: 5px;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n color var(--vchasno-ui-transition-duration-sec, 0.3s);\n user-select: none;\n}\n\n.vchasno-ui-button:disabled {\n cursor: not-allowed;\n opacity: 0.8;\n}\n\n.vchasno-ui-button:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-default-hover-bg);\n color: var(--vchasno-ui-btn-default-hover-color);\n cursor: pointer;\n}\n\n.vchasno-ui-button.--sm {\n padding: 0 15px;\n}\n\n.vchasno-ui-button.--md {\n min-width: 145px;\n padding: 0 20px;\n}\n\n.vchasno-ui-button.--lg {\n min-width: 200px;\n padding: 0 20px;\n}\n\n.vchasno-ui-button.--wide {\n width: 100%;\n}\n\n.vchasno-ui-button.--primary {\n border: 1px solid transparent;\n background-color: var(--vchasno-ui-btn-primary-bg);\n box-shadow: inset 0 -2px 0 rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary.--outline {\n border: 1px solid var(--vchasno-ui-btn-primary-bg);\n background-color: var(--vchasno-ui-btn-primary-color);\n box-shadow: none;\n color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--secondary {\n background-color: var(--vchasno-ui-btn-secondary-bg);\n box-shadow: inset 0 -2px 0 rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-secondary-color);\n}\n\n.vchasno-ui-button:disabled.--primary,\n.vchasno-ui-button:disabled.--secondary {\n border-color: #b6cadb;\n background-color: #b6cadb;\n box-shadow: inset 0 -2px 0 rgb(139 163 182 / 50%);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-primary-hover-bg);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-primary-bg);\n background-color: var(--vchasno-ui-btn-default-hover-bg);\n color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--secondary.--outline {\n border: 1px solid var(--vchasno-ui-btn-secondary-bg);\n background-color: var(--vchasno-ui-btn-secondary-color);\n box-shadow: none;\n color: var(--vchasno-ui-btn-secondary-bg);\n}\n\n.vchasno-ui-button.--secondary:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-secondary-hover-bg);\n color: var(--vchasno-ui-btn-secondary-color);\n}\n\n.vchasno-ui-button.--secondary.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-secondary-bg);\n background-color: rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-secondary-bg);\n}\n\n.vchasno-ui-button.--danger {\n border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n background-color: var(--vchasno-ui-btn-danger-bg, rgb(239 101 98 / 20%));\n box-shadow: none;\n color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button.--danger.--outline {\n border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n background-color: transparent;\n box-shadow: none;\n color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button:disabled.--danger {\n border: 1px solid #b6cadb;\n background-color: rgb(182 202 219 / 20%);\n color: #b6cadb;\n}\n\n.vchasno-ui-button.--danger:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-danger-hover-bg, #ef6562);\n color: var(--vchasno-ui-btn-danger-hover-color, #fff);\n}\n\n.vchasno-ui-button.--danger.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n background-color: rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button.--transparent .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-btn-default-color);\n transition: stroke var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-button.--transparent:hover .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-btn-default-hover-color);\n}\n\n.vchasno-ui-button:disabled.--transparent {\n color: #b6cadb;\n}\n\n.vchasno-ui-button.--light {\n border: 1px solid transparent;\n background-color: var(--vchasno-ui-btn-light-bg, #fff);\n box-shadow: 0 2px 4px rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-light-color);\n}\n\n.vchasno-ui-button:disabled.--light {\n border: none;\n background-color: rgb(182 202 219 / 20%);\n box-shadow: 0 2px 4px rgb(0 0 0 / 10%);\n color: #b6cadb;\n}\n\n.vchasno-ui-button.--light.--outline {\n border: 1px solid var(--vchasno-ui-btn-primary-bg);\n background-color: var(--vchasno-ui-btn-primary-color);\n box-shadow: none;\n color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--light:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-light-hover-bg);\n color: var(--vchasno-ui-btn-primary-bg);\n}\n";
|
|
194
|
+
styleInject(css_248z$g);
|
|
175
195
|
|
|
176
|
-
var Button =
|
|
196
|
+
var Button = React.forwardRef(function (_a, ref) {
|
|
177
197
|
var _b = _a.theme, theme = _b === void 0 ? "primary" : _b, _c = _a.type, type = _c === void 0 ? "button" : _c, _d = _a.size, size = _d === void 0 ? "md" : _d, _e = _a.outline, outline = _e === void 0 ? false : _e, _f = _a.loading, loading = _f === void 0 ? false : _f, _g = _a.wide, wide = _g === void 0 ? false : _g, className = _a.className, children = _a.children, rest = __rest(_a, ["theme", "type", "size", "outline", "loading", "wide", "className", "children"]);
|
|
178
|
-
return (
|
|
198
|
+
return (React.createElement("button", __assign({ ref: ref, type: type, className: cn("vchasno-ui-button", "--".concat(theme), "--".concat(size), {
|
|
179
199
|
"--outline": outline,
|
|
180
200
|
"--wide": wide,
|
|
181
201
|
"--loading": loading,
|
|
182
202
|
}, className) }, rest),
|
|
183
203
|
children,
|
|
184
|
-
loading &&
|
|
204
|
+
loading && React.createElement(Spinner, { height: "1rem" })));
|
|
185
205
|
});
|
|
186
206
|
Button.displayName = "Button";
|
|
187
207
|
|
|
188
|
-
var css_248z$
|
|
189
|
-
styleInject(css_248z$
|
|
208
|
+
var css_248z$f = ".vchasno-ui-meta {\n display: block;\n width: 100%;\n height: calc(var(--vchasno-ui-input-font-size) * 0.9);\n font-size: calc(var(--vchasno-ui-input-font-size) * 0.8);\n line-height: calc(var(--vchasno-ui-input-font-size) * 0.9);\n}\n\n.vchasno-ui-meta__hint {\n color: var(--vchasno-ui-label-color-default);\n}\n\n.vchasno-ui-meta__error {\n color: var(--vchasno-ui-input-color-error);\n}\n";
|
|
209
|
+
styleInject(css_248z$f);
|
|
190
210
|
|
|
191
211
|
var InputMeta = function (_a) {
|
|
192
212
|
var className = _a.className, error = _a.error, hint = _a.hint;
|
|
193
|
-
return (
|
|
194
|
-
!error && hint &&
|
|
195
|
-
error &&
|
|
213
|
+
return (React.createElement("span", { className: cn('vchasno-ui-meta', className) },
|
|
214
|
+
!error && hint && React.createElement("span", { className: "vchasno-ui-meta__hint" }, hint),
|
|
215
|
+
error && React.createElement("span", { className: "vchasno-ui-meta__error" }, error)));
|
|
196
216
|
};
|
|
197
217
|
|
|
198
|
-
var css_248z$
|
|
199
|
-
styleInject(css_248z$
|
|
218
|
+
var css_248z$e = ".vchasno-ui-label-text {\n position: relative;\n display: inline-flex;\n height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n align-self: flex-start;\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 text-overflow: ellipsis;\n transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n white-space: nowrap;\n}\n\n[class^='vchasno-ui-']:not(.--error):focus-within .vchasno-ui-label-text {\n color: var(--vchasno-ui-label-color-focused);\n}\n\n[class^='vchasno-ui-']:not(.--disabled).--required .vchasno-ui-label-text:hover {\n cursor: pointer;\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\n[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";
|
|
219
|
+
styleInject(css_248z$e);
|
|
200
220
|
|
|
201
221
|
var LabelText = function (_a) {
|
|
202
222
|
var className = _a.className, children = _a.children;
|
|
203
|
-
return (
|
|
204
|
-
|
|
205
|
-
|
|
223
|
+
return (React.createElement("span", { className: cn('vchasno-ui-label-text', className) },
|
|
224
|
+
React.createElement("svg", { className: "vchasno-ui-label-text__title-icon", width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
225
|
+
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15 7.5C15 11.6422 11.6423 15 7.5 15C3.3577 15 0 11.6422 0 7.5C0 3.35781 3.3577 0 7.5 0C11.6423 0 15 3.35781 15 7.5ZM5.87799 5.82184H8.52997V11.4711C8.52997 12.0179 8.08667 12.4612 7.53983 12.4612C6.99299 12.4612 6.54968 12.0179 6.54968 11.4711V7.57782H5.87799C5.39309 7.57782 5 7.18473 5 6.69983C5 6.21493 5.39309 5.82184 5.87799 5.82184ZM6.26221 3.66559C6.26221 3.50973 6.2899 3.36436 6.34483 3.22949C6.40431 3.09045 6.48466 2.97036 6.58636 2.86924C6.68805 2.76812 6.80655 2.6881 6.94229 2.62907C7.00404 2.603 7.06759 2.58269 7.13342 2.56813C7.21696 2.54984 7.30367 2.54059 7.39356 2.54059C7.54611 2.54059 7.69002 2.57004 7.82577 2.62907C7.86254 2.64499 7.89795 2.66248 7.932 2.68144C8.02416 2.73279 8.10724 2.79543 8.1817 2.86924C8.28339 2.97036 8.36375 3.09045 8.42322 3.22949C8.4541 3.29981 8.47725 3.37294 8.49178 3.44889C8.5054 3.51876 8.51221 3.59099 8.51221 3.66559C8.51221 3.74956 8.50358 3.83116 8.48633 3.91027C8.4718 3.97799 8.45046 4.0439 8.42322 4.108C8.36375 4.24287 8.28339 4.36081 8.1817 4.46194C8.12949 4.51374 8.07319 4.56001 8.01236 4.60076C7.95425 4.63947 7.89205 4.67333 7.82577 4.70211C7.69002 4.76113 7.54611 4.79059 7.39356 4.79059C7.31411 4.79059 7.23739 4.78348 7.16339 4.76914C7.08666 4.75447 7.01311 4.73213 6.94229 4.70211C6.80655 4.64308 6.68805 4.56306 6.58636 4.46194C6.48466 4.36081 6.40431 4.24287 6.34483 4.108C6.2899 3.96896 6.26221 3.82145 6.26221 3.66559Z", fill: "currentColor" })),
|
|
206
226
|
' ',
|
|
207
227
|
children,
|
|
208
228
|
" ",
|
|
209
|
-
|
|
229
|
+
React.createElement("sup", null, "*")));
|
|
210
230
|
};
|
|
211
231
|
|
|
212
|
-
var css_248z$
|
|
213
|
-
styleInject(css_248z$
|
|
232
|
+
var css_248z$d = ".vchasno-ui-input {\n display: inline-flex;\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: 40px;\n box-sizing: border-box;\n align-items: center;\n padding-right: 33px;\n padding-left: 10px;\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n border-radius: 4px;\n background-color: var(--vchasno-ui-input-bg-color);\n gap: 5px;\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}\n\n.vchasno-ui-input:not(.--disabled).--error .vchasno-ui-input__wrapper {\n border-color: var(--vchasno-ui-input-color-error);\n background-color: var(--vchasno-ui-input-bg-error);\n}\n\n.vchasno-ui-input.--disabled,\n.vchasno-ui-input.--disabled * {\n cursor: not-allowed;\n opacity: 0.8;\n}\n";
|
|
233
|
+
styleInject(css_248z$d);
|
|
214
234
|
|
|
215
235
|
var Input = function (_a) {
|
|
216
236
|
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, labelProps = _a.labelProps, children = _a.children;
|
|
217
|
-
return (
|
|
237
|
+
return (React.createElement("label", __assign({ className: cn('vchasno-ui-input', {
|
|
218
238
|
'--required': required,
|
|
219
239
|
'--disabled': disabled,
|
|
220
240
|
'--wide': wide,
|
|
221
241
|
'--error': error,
|
|
222
242
|
}, className) }, labelProps),
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
243
|
+
React.createElement(LabelText, null, label),
|
|
244
|
+
React.createElement("span", { className: "vchasno-ui-input__wrapper" },
|
|
245
|
+
React.createElement("span", { className: "vchasno-ui-input__wrapper__start-element" }, startElement),
|
|
226
246
|
children,
|
|
227
|
-
|
|
247
|
+
React.createElement("span", { className: "vchasno-ui-input__feedback" }, loading && React.createElement(Spinner, { height: "100%" })),
|
|
228
248
|
endElement),
|
|
229
|
-
|
|
249
|
+
React.createElement(InputMeta, { error: error, hint: hint })));
|
|
230
250
|
};
|
|
231
251
|
Input.displayName = 'Input';
|
|
232
252
|
|
|
233
253
|
var reactTextMask = {exports: {}};
|
|
234
254
|
|
|
235
255
|
(function (module, exports) {
|
|
236
|
-
!function(e,t){module.exports=t(React__default);}(commonjsGlobal,function(e){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){function n(e){return e&&e.__esModule?e:{default:e}}function o(e,t){var r={};for(var n in e)t.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n]);return r}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return !t||"object"!=typeof t&&"function"!=typeof t?e:t}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t);}Object.defineProperty(t,"__esModule",{value:!0}),t.conformToMask=void 0;var s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n]);}return e},l=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n);}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),f=r(3);Object.defineProperty(t,"conformToMask",{enumerable:!0,get:function(){return n(f).default}});var c=r(11),p=n(c),d=r(9),h=n(d),v=r(5),y=n(v),m=r(2),b=function(e){function t(){var e;i(this,t);for(var r=arguments.length,n=Array(r),o=0;o<r;o++)n[o]=arguments[o];var u=a(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(n)));return u.setRef=u.setRef.bind(u),u.onBlur=u.onBlur.bind(u),u.onChange=u.onChange.bind(u),u}return u(t,e),l(t,[{key:"setRef",value:function(e){this.inputElement=e;}},{key:"initTextMask",value:function(){var e=this.props,t=this.props.value;this.textMaskInputElement=(0, y.default)(s({inputElement:this.inputElement},e)),this.textMaskInputElement.update(t);}},{key:"componentDidMount",value:function(){this.initTextMask();}},{key:"componentDidUpdate",value:function(e){var t=this.props,r=t.value,n=t.pipe,o=t.mask,i=t.guide,a=t.placeholderChar,u=t.showMask,s={guide:i,placeholderChar:a,showMask:u},l="function"==typeof n&&"function"==typeof e.pipe?n.toString()!==e.pipe.toString():(0, m.isNil)(n)&&!(0, m.isNil)(e.pipe)||!(0, m.isNil)(n)&&(0, m.isNil)(e.pipe),f=o.toString()!==e.mask.toString(),c=Object.keys(s).some(function(t){return s[t]!==e[t]})||f||l,p=r!==this.inputElement.value;(p||c)&&this.initTextMask();}},{key:"render",value:function e(){var t=this.props,e=t.render,r=o(t,["render"]);return delete r.mask,delete r.guide,delete r.pipe,delete r.placeholderChar,delete r.keepCharPositions,delete r.value,delete r.onBlur,delete r.onChange,delete r.showMask,e(this.setRef,s({onBlur:this.onBlur,onChange:this.onChange,defaultValue:this.props.value},r))}},{key:"onChange",value:function(e){this.textMaskInputElement.update(),"function"==typeof this.props.onChange&&this.props.onChange(e);}},{key:"onBlur",value:function(e){"function"==typeof this.props.onBlur&&this.props.onBlur(e);}}]),t}(p.default.PureComponent);t.default=b,b.propTypes={mask:h.default.oneOfType([h.default.array,h.default.func,h.default.bool,h.default.shape({mask:h.default.oneOfType([h.default.array,h.default.func]),pipe:h.default.func})]).isRequired,guide:h.default.bool,value:h.default.oneOfType([h.default.string,h.default.number]),pipe:h.default.func,placeholderChar:h.default.string,keepCharPositions:h.default.bool,showMask:h.default.bool},b.defaultProps={render:function(e,t){return p.default.createElement("input",s({ref:e},t))}};},function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.placeholderChar="_",t.strFunction="function";},function(e,t,r){function n(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:f,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:l.placeholderChar;if(!o(e))throw new Error("Text-mask:convertMaskToPlaceholder; The mask property must be an array.");if(e.indexOf(t)!==-1)throw new Error("Placeholder character must not be used as part of the mask. Please specify a character that is not present in your mask as your placeholder character.\n\n"+("The placeholder character that was received is: "+JSON.stringify(t)+"\n\n")+("The mask that was received is: "+JSON.stringify(e)));return e.map(function(e){return e instanceof RegExp?t:e}).join("")}function o(e){return Array.isArray&&Array.isArray(e)||e instanceof Array}function i(e){return "string"==typeof e||e instanceof String}function a(e){return "number"==typeof e&&void 0===e.length&&!isNaN(e)}function u(e){return "undefined"==typeof e||null===e}function s(e){for(var t=[],r=void 0;r=e.indexOf(c),r!==-1;)t.push(r),e.splice(r,1);return {maskWithoutCaretTraps:e,indexes:t}}Object.defineProperty(t,"__esModule",{value:!0}),t.convertMaskToPlaceholder=n,t.isArray=o,t.isString=i,t.isNumber=a,t.isNil=u,t.processCaretTraps=s;var l=r(1),f=[],c="[]";},function(e,t,r){function n(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:s,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:u,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(!(0, i.isArray)(t)){if(("undefined"==typeof t?"undefined":o(t))!==a.strFunction)throw new Error("Text-mask:conformToMask; The mask property must be an array.");t=t(e,r),t=(0, i.processCaretTraps)(t).maskWithoutCaretTraps;}var n=r.guide,l=void 0===n||n,f=r.previousConformedValue,c=void 0===f?s:f,p=r.placeholderChar,d=void 0===p?a.placeholderChar:p,h=r.placeholder,v=void 0===h?(0, i.convertMaskToPlaceholder)(t,d):h,y=r.currentCaretPosition,m=r.keepCharPositions,b=l===!1&&void 0!==c,g=e.length,k=c.length,C=v.length,O=t.length,T=g-k,P=T>0,x=y+(P?-T:0),w=x+Math.abs(T);if(m===!0&&!P){for(var S=s,_=x;_<w;_++)v[_]===d&&(S+=d);e=e.slice(0,x)+S+e.slice(x,g);}for(var M=e.split(s).map(function(e,t){return {char:e,isNew:t>=x&&t<w}}),j=g-1;j>=0;j--){var E=M[j].char;if(E!==d){var R=j>=x&&k===O;E===v[R?j-T:j]&&M.splice(j,1);}}var V=s,N=!1;e:for(var A=0;A<C;A++){var B=v[A];if(B===d){if(M.length>0)for(;M.length>0;){var I=M.shift(),F=I.char,q=I.isNew;if(F===d&&b!==!0){V+=d;continue e}if(t[A].test(F)){if(m===!0&&q!==!1&&c!==s&&l!==!1&&P){for(var D=M.length,L=null,W=0;W<D;W++){var J=M[W];if(J.char!==d&&J.isNew===!1)break;if(J.char===d){L=W;break}}null!==L?(V+=F,M.splice(L,1)):A--;}else V+=F;continue e}N=!0;}b===!1&&(V+=v.substr(A,C));break}V+=B;}if(b&&P===!1){for(var U=null,H=0;H<V.length;H++)v[H]===d&&(U=H);V=null!==U?V.substr(0,U+1):s;}return {conformedValue:V,meta:{someCharsRejected:N}}}Object.defineProperty(t,"__esModule",{value:!0});var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.default=n;var i=r(2),a=r(1),u=[],s="";},function(e,t){function r(e){var t=e.previousConformedValue,r=void 0===t?o:t,i=e.previousPlaceholder,a=void 0===i?o:i,u=e.currentCaretPosition,s=void 0===u?0:u,l=e.conformedValue,f=e.rawValue,c=e.placeholderChar,p=e.placeholder,d=e.indexesOfPipedChars,h=void 0===d?n:d,v=e.caretTrapIndexes,y=void 0===v?n:v;if(0===s||!f.length)return 0;var m=f.length,b=r.length,g=p.length,k=l.length,C=m-b,O=C>0,T=0===b,P=C>1&&!O&&!T;if(P)return s;var x=O&&(r===l||l===p),w=0,S=void 0,_=void 0;if(x)w=s-C;else {var M=l.toLowerCase(),j=f.toLowerCase(),E=j.substr(0,s).split(o),R=E.filter(function(e){return M.indexOf(e)!==-1});_=R[R.length-1];var V=a.substr(0,R.length).split(o).filter(function(e){return e!==c}).length,N=p.substr(0,R.length).split(o).filter(function(e){return e!==c}).length,A=N!==V,B=void 0!==a[R.length-1]&&void 0!==p[R.length-2]&&a[R.length-1]!==c&&a[R.length-1]!==p[R.length-1]&&a[R.length-1]===p[R.length-2];!O&&(A||B)&&V>0&&p.indexOf(_)>-1&&void 0!==f[s]&&(S=!0,_=f[s]);for(var I=h.map(function(e){return M[e]}),F=I.filter(function(e){return e===_}).length,q=R.filter(function(e){return e===_}).length,D=p.substr(0,p.indexOf(c)).split(o).filter(function(e,t){return e===_&&f[t]!==e}).length,L=D+q+F+(S?1:0),W=0,J=0;J<k;J++){var U=M[J];if(w=J+1,U===_&&W++,W>=L)break}}if(O){for(var H=w,Y=w;Y<=g;Y++)if(p[Y]===c&&(H=Y),p[Y]===c||y.indexOf(Y)!==-1||Y===g)return H}else if(S){for(var z=w-1;z>=0;z--)if(l[z]===_||y.indexOf(z)!==-1||0===z)return z}else for(var G=w;G>=0;G--)if(p[G-1]===c||y.indexOf(G)!==-1||0===G)return G}Object.defineProperty(t,"__esModule",{value:!0}),t.default=r;var n=[],o="";},function(e,t,r){function n(e){return e&&e.__esModule?e:{default:e}}function o(e){var t={previousConformedValue:void 0,previousPlaceholder:void 0};return {state:t,update:function(r){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:e,o=n.inputElement,l=n.mask,c=n.guide,y=n.pipe,b=n.placeholderChar,g=void 0===b?h.placeholderChar:b,k=n.keepCharPositions,C=void 0!==k&&k,O=n.showMask,T=void 0!==O&&O;if("undefined"==typeof r&&(r=o.value),r!==t.previousConformedValue){("undefined"==typeof l?"undefined":s(l))===m&&void 0!==l.pipe&&void 0!==l.mask&&(y=l.pipe,l=l.mask);var P=void 0,x=void 0;if(l instanceof Array&&(P=(0, d.convertMaskToPlaceholder)(l,g)),l!==!1){var w=a(r),S=o.selectionEnd,_=t.previousConformedValue,M=t.previousPlaceholder,j=void 0;if(("undefined"==typeof l?"undefined":s(l))===h.strFunction){if(x=l(w,{currentCaretPosition:S,previousConformedValue:_,placeholderChar:g}),x===!1)return;var E=(0, d.processCaretTraps)(x),R=E.maskWithoutCaretTraps,V=E.indexes;x=R,j=V,P=(0, d.convertMaskToPlaceholder)(x,g);}else x=l;var N={previousConformedValue:_,guide:c,placeholderChar:g,pipe:y,placeholder:P,currentCaretPosition:S,keepCharPositions:C},A=(0, p.default)(w,x,N),B=A.conformedValue,I=("undefined"==typeof y?"undefined":s(y))===h.strFunction,F={};I&&(F=y(B,u({rawValue:w},N)),F===!1?F={value:_,rejected:!0}:(0, d.isString)(F)&&(F={value:F}));var q=I?F.value:B,D=(0, f.default)({previousConformedValue:_,previousPlaceholder:M,conformedValue:q,placeholder:P,rawValue:w,currentCaretPosition:S,placeholderChar:g,indexesOfPipedChars:F.indexesOfPipedChars,caretTrapIndexes:j}),L=q===P&&0===D,W=T?P:v,J=L?W:q;t.previousConformedValue=J,t.previousPlaceholder=P,o.value!==J&&(o.value=J,i(o,D));}}}}}function i(e,t){document.activeElement===e&&(b?g(function(){return e.setSelectionRange(t,t,y)},0):e.setSelectionRange(t,t,y));}function a(e){if((0, d.isString)(e))return e;if((0, d.isNumber)(e))return String(e);if(void 0===e||null===e)return v;throw new Error("The 'value' provided to Text Mask needs to be a string or a number. The value received was:\n\n "+JSON.stringify(e))}Object.defineProperty(t,"__esModule",{value:!0});var u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n]);}return e},s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.default=o;var l=r(4),f=n(l),c=r(3),p=n(c),d=r(2),h=r(1),v="",y="none",m="object",b="undefined"!=typeof navigator&&/Android/i.test(navigator.userAgent),g="undefined"!=typeof requestAnimationFrame?requestAnimationFrame:setTimeout;},function(e,t){function r(e){return function(){return e}}var n=function(){};n.thatReturns=r,n.thatReturnsFalse=r(!1),n.thatReturnsTrue=r(!0),n.thatReturnsNull=r(null),n.thatReturnsThis=function(){return this},n.thatReturnsArgument=function(e){return e},e.exports=n;},function(e,t,r){function n(e,t,r,n,i,a,u,s){if(!e){var l;if(void 0===t)l=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else {var f=[r,n,i,a,u,s],c=0;l=new Error(t.replace(/%s/g,function(){return f[c++]})),l.name="Invariant Violation";}throw l.framesToPop=1,l}}e.exports=n;},function(e,t,r){var n=r(6),o=r(7),i=r(10);e.exports=function(){function e(e,t,r,n,a,u){u!==i&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");}function t(){return e}e.isRequired=e;var r={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return r.checkPropTypes=n,r.PropTypes=r,r};},function(e,t,r){e.exports=r(8)();},function(e,t){var r="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";e.exports=r;},function(t,r){t.exports=e;}])});
|
|
256
|
+
!function(e,t){module.exports=t(React);}(commonjsGlobal,function(e){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){function n(e){return e&&e.__esModule?e:{default:e}}function o(e,t){var r={};for(var n in e)t.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n]);return r}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return !t||"object"!=typeof t&&"function"!=typeof t?e:t}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t);}Object.defineProperty(t,"__esModule",{value:!0}),t.conformToMask=void 0;var s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n]);}return e},l=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n);}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),f=r(3);Object.defineProperty(t,"conformToMask",{enumerable:!0,get:function(){return n(f).default}});var c=r(11),p=n(c),d=r(9),h=n(d),v=r(5),y=n(v),m=r(2),b=function(e){function t(){var e;i(this,t);for(var r=arguments.length,n=Array(r),o=0;o<r;o++)n[o]=arguments[o];var u=a(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(n)));return u.setRef=u.setRef.bind(u),u.onBlur=u.onBlur.bind(u),u.onChange=u.onChange.bind(u),u}return u(t,e),l(t,[{key:"setRef",value:function(e){this.inputElement=e;}},{key:"initTextMask",value:function(){var e=this.props,t=this.props.value;this.textMaskInputElement=(0, y.default)(s({inputElement:this.inputElement},e)),this.textMaskInputElement.update(t);}},{key:"componentDidMount",value:function(){this.initTextMask();}},{key:"componentDidUpdate",value:function(e){var t=this.props,r=t.value,n=t.pipe,o=t.mask,i=t.guide,a=t.placeholderChar,u=t.showMask,s={guide:i,placeholderChar:a,showMask:u},l="function"==typeof n&&"function"==typeof e.pipe?n.toString()!==e.pipe.toString():(0, m.isNil)(n)&&!(0, m.isNil)(e.pipe)||!(0, m.isNil)(n)&&(0, m.isNil)(e.pipe),f=o.toString()!==e.mask.toString(),c=Object.keys(s).some(function(t){return s[t]!==e[t]})||f||l,p=r!==this.inputElement.value;(p||c)&&this.initTextMask();}},{key:"render",value:function e(){var t=this.props,e=t.render,r=o(t,["render"]);return delete r.mask,delete r.guide,delete r.pipe,delete r.placeholderChar,delete r.keepCharPositions,delete r.value,delete r.onBlur,delete r.onChange,delete r.showMask,e(this.setRef,s({onBlur:this.onBlur,onChange:this.onChange,defaultValue:this.props.value},r))}},{key:"onChange",value:function(e){this.textMaskInputElement.update(),"function"==typeof this.props.onChange&&this.props.onChange(e);}},{key:"onBlur",value:function(e){"function"==typeof this.props.onBlur&&this.props.onBlur(e);}}]),t}(p.default.PureComponent);t.default=b,b.propTypes={mask:h.default.oneOfType([h.default.array,h.default.func,h.default.bool,h.default.shape({mask:h.default.oneOfType([h.default.array,h.default.func]),pipe:h.default.func})]).isRequired,guide:h.default.bool,value:h.default.oneOfType([h.default.string,h.default.number]),pipe:h.default.func,placeholderChar:h.default.string,keepCharPositions:h.default.bool,showMask:h.default.bool},b.defaultProps={render:function(e,t){return p.default.createElement("input",s({ref:e},t))}};},function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.placeholderChar="_",t.strFunction="function";},function(e,t,r){function n(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:f,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:l.placeholderChar;if(!o(e))throw new Error("Text-mask:convertMaskToPlaceholder; The mask property must be an array.");if(e.indexOf(t)!==-1)throw new Error("Placeholder character must not be used as part of the mask. Please specify a character that is not present in your mask as your placeholder character.\n\n"+("The placeholder character that was received is: "+JSON.stringify(t)+"\n\n")+("The mask that was received is: "+JSON.stringify(e)));return e.map(function(e){return e instanceof RegExp?t:e}).join("")}function o(e){return Array.isArray&&Array.isArray(e)||e instanceof Array}function i(e){return "string"==typeof e||e instanceof String}function a(e){return "number"==typeof e&&void 0===e.length&&!isNaN(e)}function u(e){return "undefined"==typeof e||null===e}function s(e){for(var t=[],r=void 0;r=e.indexOf(c),r!==-1;)t.push(r),e.splice(r,1);return {maskWithoutCaretTraps:e,indexes:t}}Object.defineProperty(t,"__esModule",{value:!0}),t.convertMaskToPlaceholder=n,t.isArray=o,t.isString=i,t.isNumber=a,t.isNil=u,t.processCaretTraps=s;var l=r(1),f=[],c="[]";},function(e,t,r){function n(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:s,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:u,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(!(0, i.isArray)(t)){if(("undefined"==typeof t?"undefined":o(t))!==a.strFunction)throw new Error("Text-mask:conformToMask; The mask property must be an array.");t=t(e,r),t=(0, i.processCaretTraps)(t).maskWithoutCaretTraps;}var n=r.guide,l=void 0===n||n,f=r.previousConformedValue,c=void 0===f?s:f,p=r.placeholderChar,d=void 0===p?a.placeholderChar:p,h=r.placeholder,v=void 0===h?(0, i.convertMaskToPlaceholder)(t,d):h,y=r.currentCaretPosition,m=r.keepCharPositions,b=l===!1&&void 0!==c,g=e.length,k=c.length,C=v.length,O=t.length,T=g-k,P=T>0,x=y+(P?-T:0),w=x+Math.abs(T);if(m===!0&&!P){for(var S=s,_=x;_<w;_++)v[_]===d&&(S+=d);e=e.slice(0,x)+S+e.slice(x,g);}for(var M=e.split(s).map(function(e,t){return {char:e,isNew:t>=x&&t<w}}),j=g-1;j>=0;j--){var E=M[j].char;if(E!==d){var R=j>=x&&k===O;E===v[R?j-T:j]&&M.splice(j,1);}}var V=s,N=!1;e:for(var A=0;A<C;A++){var B=v[A];if(B===d){if(M.length>0)for(;M.length>0;){var I=M.shift(),F=I.char,q=I.isNew;if(F===d&&b!==!0){V+=d;continue e}if(t[A].test(F)){if(m===!0&&q!==!1&&c!==s&&l!==!1&&P){for(var D=M.length,L=null,W=0;W<D;W++){var J=M[W];if(J.char!==d&&J.isNew===!1)break;if(J.char===d){L=W;break}}null!==L?(V+=F,M.splice(L,1)):A--;}else V+=F;continue e}N=!0;}b===!1&&(V+=v.substr(A,C));break}V+=B;}if(b&&P===!1){for(var U=null,H=0;H<V.length;H++)v[H]===d&&(U=H);V=null!==U?V.substr(0,U+1):s;}return {conformedValue:V,meta:{someCharsRejected:N}}}Object.defineProperty(t,"__esModule",{value:!0});var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.default=n;var i=r(2),a=r(1),u=[],s="";},function(e,t){function r(e){var t=e.previousConformedValue,r=void 0===t?o:t,i=e.previousPlaceholder,a=void 0===i?o:i,u=e.currentCaretPosition,s=void 0===u?0:u,l=e.conformedValue,f=e.rawValue,c=e.placeholderChar,p=e.placeholder,d=e.indexesOfPipedChars,h=void 0===d?n:d,v=e.caretTrapIndexes,y=void 0===v?n:v;if(0===s||!f.length)return 0;var m=f.length,b=r.length,g=p.length,k=l.length,C=m-b,O=C>0,T=0===b,P=C>1&&!O&&!T;if(P)return s;var x=O&&(r===l||l===p),w=0,S=void 0,_=void 0;if(x)w=s-C;else {var M=l.toLowerCase(),j=f.toLowerCase(),E=j.substr(0,s).split(o),R=E.filter(function(e){return M.indexOf(e)!==-1});_=R[R.length-1];var V=a.substr(0,R.length).split(o).filter(function(e){return e!==c}).length,N=p.substr(0,R.length).split(o).filter(function(e){return e!==c}).length,A=N!==V,B=void 0!==a[R.length-1]&&void 0!==p[R.length-2]&&a[R.length-1]!==c&&a[R.length-1]!==p[R.length-1]&&a[R.length-1]===p[R.length-2];!O&&(A||B)&&V>0&&p.indexOf(_)>-1&&void 0!==f[s]&&(S=!0,_=f[s]);for(var I=h.map(function(e){return M[e]}),F=I.filter(function(e){return e===_}).length,q=R.filter(function(e){return e===_}).length,D=p.substr(0,p.indexOf(c)).split(o).filter(function(e,t){return e===_&&f[t]!==e}).length,L=D+q+F+(S?1:0),W=0,J=0;J<k;J++){var U=M[J];if(w=J+1,U===_&&W++,W>=L)break}}if(O){for(var H=w,Y=w;Y<=g;Y++)if(p[Y]===c&&(H=Y),p[Y]===c||y.indexOf(Y)!==-1||Y===g)return H}else if(S){for(var z=w-1;z>=0;z--)if(l[z]===_||y.indexOf(z)!==-1||0===z)return z}else for(var G=w;G>=0;G--)if(p[G-1]===c||y.indexOf(G)!==-1||0===G)return G}Object.defineProperty(t,"__esModule",{value:!0}),t.default=r;var n=[],o="";},function(e,t,r){function n(e){return e&&e.__esModule?e:{default:e}}function o(e){var t={previousConformedValue:void 0,previousPlaceholder:void 0};return {state:t,update:function(r){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:e,o=n.inputElement,l=n.mask,c=n.guide,y=n.pipe,b=n.placeholderChar,g=void 0===b?h.placeholderChar:b,k=n.keepCharPositions,C=void 0!==k&&k,O=n.showMask,T=void 0!==O&&O;if("undefined"==typeof r&&(r=o.value),r!==t.previousConformedValue){("undefined"==typeof l?"undefined":s(l))===m&&void 0!==l.pipe&&void 0!==l.mask&&(y=l.pipe,l=l.mask);var P=void 0,x=void 0;if(l instanceof Array&&(P=(0, d.convertMaskToPlaceholder)(l,g)),l!==!1){var w=a(r),S=o.selectionEnd,_=t.previousConformedValue,M=t.previousPlaceholder,j=void 0;if(("undefined"==typeof l?"undefined":s(l))===h.strFunction){if(x=l(w,{currentCaretPosition:S,previousConformedValue:_,placeholderChar:g}),x===!1)return;var E=(0, d.processCaretTraps)(x),R=E.maskWithoutCaretTraps,V=E.indexes;x=R,j=V,P=(0, d.convertMaskToPlaceholder)(x,g);}else x=l;var N={previousConformedValue:_,guide:c,placeholderChar:g,pipe:y,placeholder:P,currentCaretPosition:S,keepCharPositions:C},A=(0, p.default)(w,x,N),B=A.conformedValue,I=("undefined"==typeof y?"undefined":s(y))===h.strFunction,F={};I&&(F=y(B,u({rawValue:w},N)),F===!1?F={value:_,rejected:!0}:(0, d.isString)(F)&&(F={value:F}));var q=I?F.value:B,D=(0, f.default)({previousConformedValue:_,previousPlaceholder:M,conformedValue:q,placeholder:P,rawValue:w,currentCaretPosition:S,placeholderChar:g,indexesOfPipedChars:F.indexesOfPipedChars,caretTrapIndexes:j}),L=q===P&&0===D,W=T?P:v,J=L?W:q;t.previousConformedValue=J,t.previousPlaceholder=P,o.value!==J&&(o.value=J,i(o,D));}}}}}function i(e,t){document.activeElement===e&&(b?g(function(){return e.setSelectionRange(t,t,y)},0):e.setSelectionRange(t,t,y));}function a(e){if((0, d.isString)(e))return e;if((0, d.isNumber)(e))return String(e);if(void 0===e||null===e)return v;throw new Error("The 'value' provided to Text Mask needs to be a string or a number. The value received was:\n\n "+JSON.stringify(e))}Object.defineProperty(t,"__esModule",{value:!0});var u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n]);}return e},s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.default=o;var l=r(4),f=n(l),c=r(3),p=n(c),d=r(2),h=r(1),v="",y="none",m="object",b="undefined"!=typeof navigator&&/Android/i.test(navigator.userAgent),g="undefined"!=typeof requestAnimationFrame?requestAnimationFrame:setTimeout;},function(e,t){function r(e){return function(){return e}}var n=function(){};n.thatReturns=r,n.thatReturnsFalse=r(!1),n.thatReturnsTrue=r(!0),n.thatReturnsNull=r(null),n.thatReturnsThis=function(){return this},n.thatReturnsArgument=function(e){return e},e.exports=n;},function(e,t,r){function n(e,t,r,n,i,a,u,s){if(!e){var l;if(void 0===t)l=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else {var f=[r,n,i,a,u,s],c=0;l=new Error(t.replace(/%s/g,function(){return f[c++]})),l.name="Invariant Violation";}throw l.framesToPop=1,l}}e.exports=n;},function(e,t,r){var n=r(6),o=r(7),i=r(10);e.exports=function(){function e(e,t,r,n,a,u){u!==i&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");}function t(){return e}e.isRequired=e;var r={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return r.checkPropTypes=n,r.PropTypes=r,r};},function(e,t,r){e.exports=r(8)();},function(e,t){var r="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";e.exports=r;},function(t,r){t.exports=e;}])});
|
|
237
257
|
} (reactTextMask));
|
|
238
258
|
|
|
239
259
|
var reactTextMaskExports = reactTextMask.exports;
|
|
240
260
|
var MaskedInput = /*@__PURE__*/getDefaultExportFromCjs(reactTextMaskExports);
|
|
241
261
|
|
|
242
|
-
var css_248z$
|
|
243
|
-
styleInject(css_248z$
|
|
262
|
+
var css_248z$c = ".vchasno-ui-mask-input {\n position: relative;\n font-size: var(--vchasno-ui-input-font-size);\n line-height: var(--vchasno-ui-input-font-size);\n}\n\n.vchasno-ui-mask-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-mask-input:focus::placeholder {\n color: transparent;\n}\n";
|
|
263
|
+
styleInject(css_248z$c);
|
|
244
264
|
|
|
245
265
|
var MaskInput = function (_a) {
|
|
246
266
|
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, inputClassName = _a.inputClassName, labelProps = _a.labelProps, rest = __rest(_a, ["className", "disabled", "startElement", "endElement", "error", "label", "hint", "wide", "required", "loading", "inputClassName", "labelProps"]);
|
|
247
|
-
return (
|
|
248
|
-
|
|
267
|
+
return (React.createElement(Input, { required: required, wide: wide, className: className, loading: loading, disabled: disabled, label: label, error: error, hint: hint, endElement: endElement, labelProps: labelProps, startElement: startElement },
|
|
268
|
+
React.createElement(MaskedInput, __assign({}, rest, { required: required, disabled: disabled, className: cn('vchasno-ui-mask-input', inputClassName) }))));
|
|
249
269
|
};
|
|
250
270
|
|
|
251
271
|
var composePaginationSteps = function (total, current) {
|
|
@@ -263,13 +283,13 @@ var composePaginationSteps = function (total, current) {
|
|
|
263
283
|
return display;
|
|
264
284
|
};
|
|
265
285
|
|
|
266
|
-
var css_248z$
|
|
267
|
-
styleInject(css_248z$
|
|
286
|
+
var css_248z$b = ".vchasno-ui-pagination {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n font-size: 14px;\n gap: 10px;\n}\n\n.vchasno-ui-pagination__item {\n min-width: var(--vchasno-ui-pagination-size);\n height: var(--vchasno-ui-pagination-size);\n flex-grow: 0;\n flex-shrink: 0;\n border: 1px solid transparent;\n border-radius: 6px;\n background-color: #fff;\n cursor: pointer;\n line-height: calc(var(--vchasno-ui-pagination-size) - 2px);\n outline: 0;\n text-align: center;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n border var(--vchasno-ui-transition-duration-sec, 0.3s);\n user-select: none;\n vertical-align: middle;\n}\n\n.vchasno-ui-pagination__item-arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.vchasno-ui-pagination__item:not(.vchasno-ui-pagination__item-disabled):hover {\n background-color: rgb(0 0 0 / 10%);\n}\n\n.vchasno-ui-pagination__item-active {\n border-color: var(--vchasno-ui-pagination-border-color, #6b5fff);\n}\n\n.vchasno-ui-pagination__item-disabled {\n cursor: not-allowed;\n opacity: 0.8;\n}\n";
|
|
287
|
+
styleInject(css_248z$b);
|
|
268
288
|
|
|
269
289
|
var Pagination = function (_a) {
|
|
270
290
|
var _b, _c;
|
|
271
291
|
var className = _a.className, _d = _a.initPage, initPage = _d === void 0 ? 1 : _d, _e = _a.total, total = _e === void 0 ? 1 : _e, hideOnSinglePage = _a.hideOnSinglePage, onChange = _a.onChange, current = _a.current, _f = _a.scrollOnChange, scrollOnChange = _f === void 0 ? true : _f;
|
|
272
|
-
var _g = useState(current || initPage), _currentPage = _g[0], setCurrentPage = _g[1];
|
|
292
|
+
var _g = React.useState(current || initPage), _currentPage = _g[0], setCurrentPage = _g[1];
|
|
273
293
|
var currentPage = current || _currentPage;
|
|
274
294
|
var setPage = function (page) {
|
|
275
295
|
setCurrentPage(page);
|
|
@@ -283,16 +303,16 @@ var Pagination = function (_a) {
|
|
|
283
303
|
if (hideOnSinglePage && total <= 1) {
|
|
284
304
|
return null;
|
|
285
305
|
}
|
|
286
|
-
return (
|
|
287
|
-
|
|
306
|
+
return (React.createElement("ul", { className: cn('vchasno-ui-pagination', className) },
|
|
307
|
+
React.createElement("li", { onClick: function () {
|
|
288
308
|
if (currentPage !== 1) {
|
|
289
309
|
setPage(currentPage <= 1 ? 1 : currentPage - 1);
|
|
290
310
|
}
|
|
291
311
|
}, className: cn('vchasno-ui-pagination__item', 'vchasno-ui-pagination__item-arrow', (_b = {},
|
|
292
312
|
_b['vchasno-ui-pagination__item-disabled'] = currentPage === 1,
|
|
293
313
|
_b)) },
|
|
294
|
-
|
|
295
|
-
|
|
314
|
+
React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
315
|
+
React.createElement("path", { d: "M7 9.99253C7 9.73253 7.1 9.48252 7.29 9.28253L11.29 5.29253C11.68 4.90253 12.32 4.90253 12.71 5.29253C13.1 5.68253 13.1 6.32253 12.71 6.71253L9.42 9.99253L12.71 13.2825C13.1 13.6725 13.1 14.3125 12.71 14.7025C12.32 15.0925 11.68 15.0925 11.29 14.7025L7.3 10.7125C7.1 10.5125 7 10.2525 7 9.99253Z", fill: "currentColor" }))),
|
|
296
316
|
composePaginationSteps(total, currentPage).map(function (item) {
|
|
297
317
|
var _a;
|
|
298
318
|
if (Array.isArray(item)) {
|
|
@@ -305,35 +325,35 @@ var Pagination = function (_a) {
|
|
|
305
325
|
setPage(currentPage + 5 >= total ? total : currentPage + 5);
|
|
306
326
|
}
|
|
307
327
|
};
|
|
308
|
-
return (
|
|
328
|
+
return (React.createElement("li", { key: isPrev_1 ? 'prev' : 'next', className: "vchasno-ui-pagination__item", onClick: handleClick }, "..."));
|
|
309
329
|
}
|
|
310
|
-
return (
|
|
330
|
+
return (React.createElement("li", { onClick: function () { return setPage(item); }, key: item, className: cn('vchasno-ui-pagination__item', (_a = {},
|
|
311
331
|
_a['vchasno-ui-pagination__item-active'] = item === currentPage,
|
|
312
332
|
_a)) }, item));
|
|
313
333
|
}),
|
|
314
|
-
|
|
334
|
+
React.createElement("li", { onClick: function () {
|
|
315
335
|
if (currentPage !== total) {
|
|
316
336
|
setPage(currentPage >= total - 1 ? total : currentPage + 1);
|
|
317
337
|
}
|
|
318
338
|
}, className: cn('vchasno-ui-pagination__item', 'vchasno-ui-pagination__item-arrow', (_c = {},
|
|
319
339
|
_c['vchasno-ui-pagination__item-disabled'] = currentPage === total,
|
|
320
340
|
_c)) },
|
|
321
|
-
|
|
322
|
-
|
|
341
|
+
React.createElement("svg", { style: { transform: 'rotate(180deg)', transformOrigin: 'center center' }, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
342
|
+
React.createElement("path", { d: "M7 9.99253C7 9.73253 7.1 9.48252 7.29 9.28253L11.29 5.29253C11.68 4.90253 12.32 4.90253 12.71 5.29253C13.1 5.68253 13.1 6.32253 12.71 6.71253L9.42 9.99253L12.71 13.2825C13.1 13.6725 13.1 14.3125 12.71 14.7025C12.32 15.0925 11.68 15.0925 11.29 14.7025L7.3 10.7125C7.1 10.5125 7 10.2525 7 9.99253Z", fill: "currentColor" })))));
|
|
323
343
|
};
|
|
324
344
|
|
|
325
|
-
var css_248z$
|
|
326
|
-
styleInject(css_248z$
|
|
345
|
+
var css_248z$a = ".vchasno-ui-text-input {\n font-size: var(--vchasno-ui-input-font-size);\n line-height: var(--vchasno-ui-input-font-size);\n}\n\n.vchasno-ui-text-input::-webkit-outer-spin-button,\n.vchasno-ui-text-input::-webkit-inner-spin-button {\n margin: 0;\n appearance: none;\n}\n\n/* Firefox */\n.vchasno-ui-text-input[type='number'] {\n appearance: textfield;\n}\n\n.vchasno-ui-text-input::placeholder {\n color: var(--vchasno-ui-input-border-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n line-height: var(--vchasno-ui-input-font-size);\n transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-text-input:focus::placeholder {\n color: transparent;\n}\n";
|
|
346
|
+
styleInject(css_248z$a);
|
|
327
347
|
|
|
328
|
-
var TextInput =
|
|
348
|
+
var TextInput = React.forwardRef(function (_a, ref) {
|
|
329
349
|
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, inputClassName = _a.inputClassName, labelProps = _a.labelProps, rest = __rest(_a, ["className", "disabled", "startElement", "endElement", "error", "label", "hint", "wide", "required", "loading", "inputClassName", "labelProps"]);
|
|
330
|
-
return (
|
|
331
|
-
|
|
350
|
+
return (React.createElement(Input, { required: required, wide: wide, className: className, loading: loading, disabled: disabled, label: label, error: error, hint: hint, endElement: endElement, startElement: startElement, labelProps: labelProps },
|
|
351
|
+
React.createElement("input", __assign({ disabled: disabled, className: cn('vchasno-ui-text-input', inputClassName), required: required, ref: ref }, rest))));
|
|
332
352
|
});
|
|
333
353
|
TextInput.displayName = 'TextInput';
|
|
334
354
|
|
|
335
|
-
var css_248z$
|
|
336
|
-
styleInject(css_248z$
|
|
355
|
+
var css_248z$9 = ".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";
|
|
356
|
+
styleInject(css_248z$9);
|
|
337
357
|
|
|
338
358
|
var typeToCN = {
|
|
339
359
|
warning: '--warning',
|
|
@@ -344,22 +364,22 @@ var typeToCN = {
|
|
|
344
364
|
link: '--link',
|
|
345
365
|
likeLink: '--like-link',
|
|
346
366
|
};
|
|
347
|
-
var Text =
|
|
367
|
+
var Text = React.forwardRef(function (_a, ref) {
|
|
348
368
|
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"]);
|
|
349
369
|
var content = children;
|
|
350
370
|
if (del) {
|
|
351
|
-
content =
|
|
371
|
+
content = React.createElement("del", null, content);
|
|
352
372
|
}
|
|
353
373
|
if (strong) {
|
|
354
|
-
content =
|
|
374
|
+
content = React.createElement("strong", null, content);
|
|
355
375
|
}
|
|
356
376
|
if (underline) {
|
|
357
|
-
content =
|
|
377
|
+
content = React.createElement("u", null, content);
|
|
358
378
|
}
|
|
359
379
|
if (code) {
|
|
360
|
-
content =
|
|
380
|
+
content = React.createElement("code", null, children);
|
|
361
381
|
}
|
|
362
|
-
return (
|
|
382
|
+
return (React.createElement("span", __assign({ ref: ref, className: cn('vchasno-ui-text', className, typeToCN[type], {
|
|
363
383
|
'--code': code,
|
|
364
384
|
'--ellipsis': ellipsis,
|
|
365
385
|
'--required': required,
|
|
@@ -367,34 +387,34 @@ var Text = React__default.forwardRef(function (_a, ref) {
|
|
|
367
387
|
});
|
|
368
388
|
Text.displayName = 'Text';
|
|
369
389
|
|
|
370
|
-
var css_248z$
|
|
371
|
-
styleInject(css_248z$
|
|
390
|
+
var css_248z$8 = ".vchasno-ui-title {\n color: var(--vchasno-ui-text-primary-color, #333);\n}\n\n.vchasno-ui-title.--ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nh1.vchasno-ui-title,\n.vchasno-ui-title h1 {\n font-size: 32px;\n font-weight: 500;\n line-height: 1.35;\n}\n\nh2.vchasno-ui-title,\n.vchasno-ui-title h2 {\n font-size: 30px;\n font-weight: 500;\n line-height: 1.35;\n}\n\nh3.vchasno-ui-title,\n.vchasno-ui-title h3 {\n font-size: 24px;\n font-weight: 500;\n line-height: 1.35;\n}\n\nh4.vchasno-ui-title,\n.vchasno-ui-title h4 {\n font-size: 20px;\n font-weight: 400;\n line-height: 1.4;\n}\n\nh5.vchasno-ui-title,\n.vchasno-ui-title h5 {\n font-size: 16px;\n font-weight: 400;\n line-height: 1.5;\n}\n";
|
|
391
|
+
styleInject(css_248z$8);
|
|
372
392
|
|
|
373
|
-
var Title =
|
|
393
|
+
var Title = React.forwardRef(function (_a, ref) {
|
|
374
394
|
var _b = _a.level, level = _b === void 0 ? 1 : _b, className = _a.className, _c = _a.ellipsis, ellipsis = _c === void 0 ? false : _c, rest = __rest(_a, ["level", "className", "ellipsis"]);
|
|
375
395
|
var classes = cn('vchasno-ui-title', className, { '--ellipsis': ellipsis });
|
|
376
396
|
switch (level) {
|
|
377
397
|
case 2:
|
|
378
|
-
return
|
|
398
|
+
return React.createElement("h2", __assign({}, rest, { ref: ref, className: classes }));
|
|
379
399
|
case 3:
|
|
380
|
-
return
|
|
400
|
+
return React.createElement("h3", __assign({}, rest, { ref: ref, className: classes }));
|
|
381
401
|
case 4:
|
|
382
|
-
return
|
|
402
|
+
return React.createElement("h4", __assign({}, rest, { ref: ref, className: classes }));
|
|
383
403
|
case 5:
|
|
384
|
-
return
|
|
404
|
+
return React.createElement("h5", __assign({}, rest, { ref: ref, className: classes }));
|
|
385
405
|
case 1:
|
|
386
406
|
default:
|
|
387
|
-
return
|
|
407
|
+
return React.createElement("h1", __assign({}, rest, { ref: ref, className: classes }));
|
|
388
408
|
}
|
|
389
409
|
});
|
|
390
410
|
Title.displayName = 'Title';
|
|
391
411
|
|
|
392
|
-
var css_248z$
|
|
393
|
-
styleInject(css_248z$
|
|
412
|
+
var css_248z$7 = ".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";
|
|
413
|
+
styleInject(css_248z$7);
|
|
394
414
|
|
|
395
|
-
var Paragraph =
|
|
415
|
+
var Paragraph = React.forwardRef(function (_a, ref) {
|
|
396
416
|
var _b = _a.ellipsis, ellipsis = _b === void 0 ? false : _b, children = _a.children, className = _a.className, rest = __rest(_a, ["ellipsis", "children", "className"]);
|
|
397
|
-
return (
|
|
417
|
+
return (React.createElement("p", __assign({ ref: ref, title: ellipsis && typeof children === 'string' ? children : undefined, className: cn('vchasno-ui-paragraph', className, { '--ellipsis': ellipsis }) }, rest), children));
|
|
398
418
|
});
|
|
399
419
|
Paragraph.displayName = 'Paragraph';
|
|
400
420
|
|
|
@@ -426,10 +446,10 @@ function _objectWithoutPropertiesLoose(source, excluded) {
|
|
|
426
446
|
return target;
|
|
427
447
|
}
|
|
428
448
|
|
|
429
|
-
var index$1 = typeof document !== 'undefined' ? useLayoutEffect : useEffect;
|
|
449
|
+
var index$1 = typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect;
|
|
430
450
|
|
|
431
451
|
var useLatest = function useLatest(value) {
|
|
432
|
-
var ref =
|
|
452
|
+
var ref = React__namespace.useRef(value);
|
|
433
453
|
index$1(function () {
|
|
434
454
|
ref.current = value;
|
|
435
455
|
});
|
|
@@ -445,8 +465,8 @@ var updateRef = function updateRef(ref, value) {
|
|
|
445
465
|
};
|
|
446
466
|
|
|
447
467
|
var useComposedRef = function useComposedRef(libRef, userRef) {
|
|
448
|
-
var prevUserRef = useRef();
|
|
449
|
-
return useCallback(function (instance) {
|
|
468
|
+
var prevUserRef = React.useRef();
|
|
469
|
+
return React.useCallback(function (instance) {
|
|
450
470
|
libRef.current = instance;
|
|
451
471
|
|
|
452
472
|
if (prevUserRef.current) {
|
|
@@ -585,7 +605,7 @@ var getSizingData = function getSizingData(node) {
|
|
|
585
605
|
|
|
586
606
|
function useListener(target, type, listener) {
|
|
587
607
|
var latestListener = useLatest(listener);
|
|
588
|
-
useLayoutEffect(function () {
|
|
608
|
+
React.useLayoutEffect(function () {
|
|
589
609
|
var handler = function handler(ev) {
|
|
590
610
|
return latestListener.current(ev);
|
|
591
611
|
};
|
|
@@ -621,10 +641,10 @@ var TextareaAutosize = function TextareaAutosize(_ref, userRef) {
|
|
|
621
641
|
}
|
|
622
642
|
}
|
|
623
643
|
var isControlled = props.value !== undefined;
|
|
624
|
-
var libRef = useRef(null);
|
|
644
|
+
var libRef = React.useRef(null);
|
|
625
645
|
var ref = useComposedRef(libRef, userRef);
|
|
626
|
-
var heightRef = useRef(0);
|
|
627
|
-
var measurementsCacheRef = useRef();
|
|
646
|
+
var heightRef = React.useRef(0);
|
|
647
|
+
var measurementsCacheRef = React.useRef();
|
|
628
648
|
var resizeTextarea = function resizeTextarea() {
|
|
629
649
|
var node = libRef.current;
|
|
630
650
|
var nodeSizingData = cacheMeasurements && measurementsCacheRef.current ? measurementsCacheRef.current : getSizingData(node);
|
|
@@ -650,73 +670,73 @@ var TextareaAutosize = function TextareaAutosize(_ref, userRef) {
|
|
|
650
670
|
onChange(event);
|
|
651
671
|
};
|
|
652
672
|
if (typeof document !== 'undefined') {
|
|
653
|
-
useLayoutEffect(resizeTextarea);
|
|
673
|
+
React.useLayoutEffect(resizeTextarea);
|
|
654
674
|
useWindowResizeListener(resizeTextarea);
|
|
655
675
|
useFontsLoadedListener(resizeTextarea);
|
|
656
676
|
}
|
|
657
|
-
return /*#__PURE__*/createElement("textarea", _extends({}, props, {
|
|
677
|
+
return /*#__PURE__*/React.createElement("textarea", _extends({}, props, {
|
|
658
678
|
onChange: handleChange,
|
|
659
679
|
ref: ref
|
|
660
680
|
}));
|
|
661
681
|
};
|
|
662
|
-
var index = /* #__PURE__ */forwardRef(TextareaAutosize);
|
|
682
|
+
var index = /* #__PURE__ */React.forwardRef(TextareaAutosize);
|
|
663
683
|
|
|
664
684
|
var TextareaAutosize$1 = index;
|
|
665
685
|
|
|
666
|
-
var css_248z$
|
|
667
|
-
styleInject(css_248z$
|
|
686
|
+
var css_248z$6 = ".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}\n\n.vchasno-ui-textarea-input:focus::placeholder {\n color: transparent;\n}\n";
|
|
687
|
+
styleInject(css_248z$6);
|
|
668
688
|
|
|
669
|
-
var TextAreaInput =
|
|
689
|
+
var TextAreaInput = React.forwardRef(function (_a, ref) {
|
|
670
690
|
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"]);
|
|
671
|
-
return (
|
|
672
|
-
|
|
691
|
+
return (React.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 },
|
|
692
|
+
React.createElement(TextareaAutosize$1, __assign({}, rest, { title: rest.title || 'Введіть текст', ref: ref, required: required, disabled: disabled, className: cn('vchasno-ui-textarea-input', textareaClassName) }))));
|
|
673
693
|
});
|
|
674
694
|
TextAreaInput.displayName = 'TextAreaInput';
|
|
675
695
|
|
|
676
|
-
var css_248z$
|
|
677
|
-
styleInject(css_248z$
|
|
696
|
+
var css_248z$5 = ".vchasno-ui-alert {\n display: inline-flex;\n min-height: 40px;\n box-sizing: border-box;\n align-items: center;\n padding: 10px;\n border: 1px solid transparent;\n border-radius: 3px;\n font-size: 14px;\n gap: 10px;\n}\n\n.vchasno-ui-alert.--wide {\n width: 100%;\n}\n\n.vchasno-ui-alert.--left-border {\n border-left-width: 3px;\n}\n\n.vchasno-ui-alert__icon-wrapper,\n.vchasno-ui-alert__close-icon {\n display: flex;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n}\n\n.vchasno-ui-alert.--info {\n border-color: var(--vchasno-ui-alert-info-color, #087dc1);\n background-color: var(--vchasno-ui-alert-info-bg, #e9f4ff);\n}\n\n.vchasno-ui-alert.--info .vchasno-ui-alert__icon-wrapper {\n color: var(--vchasno-ui-alert-info-color, #087dc1);\n}\n\n.vchasno-ui-alert.--warning {\n border-color: var(--vchasno-ui-alert-warning-color, #ffb200);\n background-color: var(--vchasno-ui-alert-warning-bg, rgb(255 201 123 / 20%));\n}\n\n.vchasno-ui-alert.--warning .vchasno-ui-alert__icon-wrapper {\n color: var(--vchasno-ui-alert-warning-color, #ffb200);\n}\n\n.vchasno-ui-alert.--error {\n border-color: var(--vchasno-ui-alert-error-color, #ef6562);\n background-color: var(--vchasno-ui-alert-error-bg, rgb(239 101 98 / 10%));\n}\n\n.vchasno-ui-alert.--error .vchasno-ui-alert__icon-wrapper {\n color: var(--vchasno-ui-alert-error-color, #ef6562);\n}\n\n.vchasno-ui-alert.--success {\n border-color: var(--vchasno-ui-alert-success-color, #1cb800);\n background-color: var(--vchasno-ui-alert-success-bg, rgb(28 184 0 / 10%));\n}\n\n.vchasno-ui-alert.--success .vchasno-ui-alert__icon-wrapper {\n color: var(--vchasno-ui-alert-success-color, #1cb800);\n}\n\n.vchasno-ui-alert__close-icon {\n border-radius: 3px;\n transition: background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-alert__close-icon:hover {\n background-color: rgb(0 0 0 / 10%);\n cursor: pointer;\n}\n\n.vchasno-ui-alert.--close {\n display: none;\n}\n";
|
|
697
|
+
styleInject(css_248z$5);
|
|
678
698
|
|
|
679
699
|
var iconMap = {
|
|
680
|
-
info: function () { return (
|
|
681
|
-
|
|
682
|
-
cross: function () { return (
|
|
683
|
-
|
|
684
|
-
error: function () { return (
|
|
685
|
-
|
|
686
|
-
warning: function () { return (
|
|
687
|
-
|
|
688
|
-
success: function () { return (
|
|
689
|
-
|
|
700
|
+
info: function () { return (React.createElement("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
701
|
+
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15 7.5C15 11.6422 11.6423 15 7.5 15C3.3577 15 0 11.6422 0 7.5C0 3.35781 3.3577 0 7.5 0C11.6423 0 15 3.35781 15 7.5ZM5.87799 5.82184H8.52997V11.4711C8.52997 12.0179 8.08667 12.4612 7.53983 12.4612C6.99298 12.4612 6.54968 12.0179 6.54968 11.4711V7.57782H5.87799C5.39309 7.57782 5 7.18473 5 6.69983C5 6.21493 5.39309 5.82184 5.87799 5.82184ZM6.26221 3.66559C6.26221 3.50973 6.2899 3.36436 6.34483 3.22949C6.40431 3.09045 6.48466 2.97036 6.58636 2.86924C6.68805 2.76812 6.80655 2.6881 6.94229 2.62907C7.00403 2.603 7.06759 2.58269 7.13342 2.56813C7.21696 2.54984 7.30367 2.54059 7.39356 2.54059C7.54611 2.54059 7.69002 2.57004 7.82577 2.62907C7.86254 2.64498 7.89795 2.66248 7.932 2.68144C8.02416 2.73279 8.10724 2.79543 8.1817 2.86924C8.28339 2.97036 8.36375 3.09045 8.42322 3.22949C8.4541 3.29981 8.47725 3.37294 8.49178 3.44889C8.5054 3.51876 8.51221 3.59099 8.51221 3.66559C8.51221 3.74956 8.50358 3.83116 8.48633 3.91027C8.4718 3.97799 8.45046 4.0439 8.42322 4.108C8.36375 4.24287 8.28339 4.36081 8.1817 4.46194C8.12949 4.51374 8.07319 4.56001 8.01236 4.60076C7.95425 4.63947 7.89205 4.67333 7.82577 4.70211C7.69002 4.76113 7.54611 4.79059 7.39356 4.79059C7.31411 4.79059 7.23739 4.78348 7.16339 4.76914C7.08666 4.75447 7.01311 4.73213 6.94229 4.70211C6.80655 4.64308 6.68805 4.56306 6.58636 4.46194C6.48466 4.36081 6.40431 4.24287 6.34483 4.108C6.2899 3.96896 6.26221 3.82145 6.26221 3.66559Z", fill: "currentColor" }))); },
|
|
702
|
+
cross: function () { return (React.createElement("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
703
|
+
React.createElement("path", { d: "M6.4 5L9.7 1.7C10.1 1.3 10.1 0.7 9.7 0.3C9.3 -0.1 8.7 -0.1 8.3 0.3L5 3.6L1.7 0.3C1.3 -0.1 0.7 -0.1 0.3 0.3C-0.1 0.7 -0.1 1.3 0.3 1.7L3.6 5L0.3 8.3C-0.1 8.7 -0.1 9.3 0.3 9.7C0.5 9.9 0.7 10 1 10C1.3 10 1.5 9.9 1.7 9.7L5 6.4L8.3 9.7C8.5 9.9 8.7 10 9 10C9.3 10 9.5 9.9 9.7 9.7C10.1 9.3 10.1 8.7 9.7 8.3L6.4 5Z", fill: "currentColor" }))); },
|
|
704
|
+
error: function () { return (React.createElement("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
705
|
+
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15 7.5C15 11.6421 11.6421 15 7.5 15C3.35786 15 0 11.6421 0 7.5C0 3.35786 3.35786 0 7.5 0C11.6421 0 15 3.35786 15 7.5ZM6.5625 8.125C6.5625 8.64277 6.98223 9.0625 7.5 9.0625C8.01777 9.0625 8.4375 8.64277 8.4375 8.125V3.75C8.4375 3.23223 8.01777 2.8125 7.5 2.8125C6.98223 2.8125 6.5625 3.23223 6.5625 3.75V8.125ZM6.5625 11.25C6.5625 11.7678 6.98223 12.1875 7.5 12.1875C8.01777 12.1875 8.4375 11.7678 8.4375 11.25C8.4375 10.7322 8.01777 10.3125 7.5 10.3125C6.98223 10.3125 6.5625 10.7322 6.5625 11.25Z", fill: "currentColor" }))); },
|
|
706
|
+
warning: function () { return (React.createElement("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
707
|
+
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15 7.5C15 11.6421 11.6421 15 7.5 15C3.35786 15 0 11.6421 0 7.5C0 3.35786 3.35786 0 7.5 0C11.6421 0 15 3.35786 15 7.5ZM6.5625 8.125C6.5625 8.64277 6.98223 9.0625 7.5 9.0625C8.01777 9.0625 8.4375 8.64277 8.4375 8.125V3.75C8.4375 3.23223 8.01777 2.8125 7.5 2.8125C6.98223 2.8125 6.5625 3.23223 6.5625 3.75V8.125ZM6.5625 11.25C6.5625 11.7678 6.98223 12.1875 7.5 12.1875C8.01777 12.1875 8.4375 11.7678 8.4375 11.25C8.4375 10.7322 8.01777 10.3125 7.5 10.3125C6.98223 10.3125 6.5625 10.7322 6.5625 11.25Z", fill: "currentColor" }))); },
|
|
708
|
+
success: function () { return (React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
709
|
+
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 15.5C12.1421 15.5 15.5 12.1421 15.5 8C15.5 3.85786 12.1421 0.5 8 0.5C3.85786 0.5 0.5 3.85786 0.5 8C0.5 12.1421 3.85786 15.5 8 15.5ZM10.427 5.39255C10.7106 5.0916 11.2362 5.14816 11.5278 5.39255C11.8534 5.66547 11.7932 6.11611 11.5278 6.39768L7.56268 10.6053C7.30802 10.8756 6.71524 10.8875 6.46185 10.6053L4.46953 8.38686C4.19295 8.07889 4.16113 7.68848 4.46953 7.38172C4.73477 7.1179 5.31108 7.09302 5.57035 7.38172L7.02551 9.00207L10.427 5.39255Z", fill: "currentColor" }))); },
|
|
690
710
|
};
|
|
691
711
|
var Alert = function (_a) {
|
|
692
712
|
var _b = _a.type, type = _b === void 0 ? 'info' : _b, _c = _a.leftBorder, leftBorder = _c === void 0 ? true : _c, icon = _a.icon, className = _a.className, children = _a.children, onClose = _a.onClose, wide = _a.wide, _d = _a.close, close = _d === void 0 ? false : _d;
|
|
693
713
|
var iconNode = null;
|
|
694
714
|
if (typeof icon === 'string') {
|
|
695
715
|
var Icon = iconMap[icon];
|
|
696
|
-
iconNode = (
|
|
697
|
-
|
|
716
|
+
iconNode = (React.createElement("span", { className: "vchasno-ui-alert__icon-wrapper" },
|
|
717
|
+
React.createElement(Icon, null)));
|
|
698
718
|
}
|
|
699
719
|
else if (icon) {
|
|
700
|
-
iconNode =
|
|
720
|
+
iconNode = React.createElement("span", { className: "vchasno-ui-alert__icon-wrapper" }, icon);
|
|
701
721
|
}
|
|
702
722
|
var closeNode = null;
|
|
703
723
|
if (typeof onClose === 'function') {
|
|
704
724
|
var CrossSvg = iconMap.cross;
|
|
705
|
-
closeNode = (
|
|
706
|
-
|
|
725
|
+
closeNode = (React.createElement("span", { className: "vchasno-ui-alert__close-icon", onClick: onClose },
|
|
726
|
+
React.createElement(CrossSvg, null)));
|
|
707
727
|
}
|
|
708
|
-
return (
|
|
728
|
+
return (React.createElement("span", { className: cn('vchasno-ui-alert', "--".concat(type), { '--close': close }, { '--wide': wide }, { '--left-border': leftBorder }, className) },
|
|
709
729
|
iconNode,
|
|
710
|
-
|
|
730
|
+
React.createElement("div", null, children),
|
|
711
731
|
closeNode));
|
|
712
732
|
};
|
|
713
733
|
|
|
714
|
-
var css_248z$
|
|
715
|
-
styleInject(css_248z$
|
|
734
|
+
var css_248z$4 = ".vchasno-ui-switch {\n display: inline-flex;\n align-content: center;\n cursor: pointer;\n line-height: 20px;\n}\n\n.vchasno-ui-switch--bg {\n position: relative;\n z-index: 0;\n display: inline-flex;\n width: 36px;\n height: 20px;\n box-sizing: border-box;\n flex-shrink: 0;\n border-radius: 100px;\n background: var(--vchasno-ui-switch-color-bg);\n box-shadow: inset 0 2px 0 rgb(57 96 131 / 20%);\n transition: background-color 0.3s;\n}\n\n.vchasno-ui-switch__active .vchasno-ui-switch--bg {\n background: var(--vchasno-ui-switch-active-color-bg);\n box-shadow: inset 0 2px 0 rgb(57 96 131 / 20%);\n}\n\n.vchasno-ui-switch__disabled {\n cursor: default;\n opacity: 0.7;\n}\n\n.vchasno-ui-switch--circle {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n width: 16px;\n height: 16px;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background-color: var(--vchasno-ui-switch-circle-color);\n transform: translate(2px, 2px);\n transition: transform 0.3s;\n}\n\n.vchasno-ui-switch--bg > input:checked + .vchasno-ui-switch--circle {\n transform: translate(18px, 2px);\n}\n\n.vchasno-ui-spinner {\n color: var(--vchasno-ui-switch-spinner-color);\n}\n\n.vchasno-ui-switch--label {\n margin-left: 12px;\n color: var(--vchasno-ui-input-font-color);\n font-size: var(--vchasno-ui-input-font-size);\n line-height: 20px;\n user-select: none;\n}\n";
|
|
735
|
+
styleInject(css_248z$4);
|
|
716
736
|
|
|
717
|
-
var Switch =
|
|
737
|
+
var Switch = React.forwardRef(function (_a, ref) {
|
|
718
738
|
var className = _a.className, label = _a.label, onChange = _a.onChange, onChecked = _a.onChecked, value = _a.value, _b = _a.defaultChecked, defaultChecked = _b === void 0 ? false : _b, disabled = _a.disabled, loading = _a.loading, id = _a.id, rest = __rest(_a, ["className", "label", "onChange", "onChecked", "value", "defaultChecked", "disabled", "loading", "id"]);
|
|
719
|
-
var _c = useState(defaultChecked), checked = _c[0], setChecked = _c[1];
|
|
739
|
+
var _c = React.useState(defaultChecked), checked = _c[0], setChecked = _c[1];
|
|
720
740
|
var isFullParentControlled = typeof value === 'boolean';
|
|
721
741
|
var inputChecked = isFullParentControlled ? value : checked;
|
|
722
742
|
var handleChange = function (event) {
|
|
@@ -726,28 +746,28 @@ var Switch = React__default.forwardRef(function (_a, ref) {
|
|
|
726
746
|
onChange === null || onChange === void 0 ? void 0 : onChange(event);
|
|
727
747
|
onChecked === null || onChecked === void 0 ? void 0 : onChecked(event.target.checked, event);
|
|
728
748
|
};
|
|
729
|
-
return (
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
label &&
|
|
749
|
+
return (React.createElement("label", { className: cn('vchasno-ui-switch', { 'vchasno-ui-switch__active': inputChecked, 'vchasno-ui-switch__disabled': disabled }, className) },
|
|
750
|
+
React.createElement("span", { className: "vchasno-ui-switch--bg" },
|
|
751
|
+
React.createElement("input", __assign({}, rest, { ref: ref, disabled: disabled, id: id, type: "checkbox", hidden: true, onChange: handleChange, checked: inputChecked })),
|
|
752
|
+
React.createElement("span", { className: "vchasno-ui-switch--circle" }, loading && React.createElement(Spinner, { width: 16 }))),
|
|
753
|
+
label && React.createElement("span", { className: "vchasno-ui-switch--label" }, label)));
|
|
734
754
|
});
|
|
735
755
|
Switch.displayName = 'Switch';
|
|
736
756
|
|
|
737
|
-
var css_248z$
|
|
738
|
-
styleInject(css_248z$
|
|
757
|
+
var css_248z$3 = ".vchasno-ui-tabs-wrapper {\n position: relative;\n width: 100%;\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n\n.vchasno-ui-tabs-wrapper::-webkit-scrollbar {\n display: none;\n}\n\n.--h-scroll {\n overflow: auto;\n}\n\n.vchasno-ui-tabs-wrapper-root {\n position: relative;\n}\n\n.vchasno-ui-tabs-wrapper-root::after,\n.vchasno-ui-tabs-wrapper-root::before {\n position: absolute;\n top: 0;\n bottom: 0;\n display: block;\n width: 30px;\n content: '';\n pointer-events: none;\n}\n\n.--ping-right::after {\n right: 0;\n box-shadow: inset -12px 0 8px -8px rgb(0 0 0 / 8%);\n}\n\n.--ping-left::before {\n left: 0;\n box-shadow: inset 12px 0 8px -8px rgb(0 0 0 / 8%);\n}\n\n.vchasno-ui-tabs {\n --active-color: var(--vchasno-ui-tabs-active-color, #087dc1);\n\n position: relative;\n display: flex;\n font-size: 16px;\n font-weight: 500;\n}\n\n.vchasno-ui-tabs__indicator {\n position: absolute;\n z-index: 1;\n bottom: -1px;\n left: 0;\n display: block;\n width: 10px;\n height: 3px;\n border-radius: 3px;\n background-color: var(--active-color);\n transition:\n width var(--vchasno-ui-transition-duration-sec, 0.3s),\n left var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.--h-scroll .vchasno-ui-tabs__indicator {\n display: none;\n}\n\n.vchasno-ui-tabs-wrapper-root.--skip-animation .vchasno-ui-tabs__indicator {\n transition: none;\n}\n\n.vchasno-ui-tabs__label-item {\n position: relative;\n display: inline-flex;\n height: 50px;\n flex-grow: 0;\n flex-shrink: 0;\n align-items: center;\n padding: 0 15px;\n color: #333;\n cursor: pointer;\n transition:\n color var(--vchasno-ui-transition-duration-sec),\n background-color var(--vchasno-ui-transition-duration-sec);\n user-select: none;\n}\n\n.vchasno-ui-tabs__label-item::after {\n position: absolute;\n z-index: 1;\n right: 0;\n bottom: 0;\n left: 0;\n display: block;\n height: 0;\n border-radius: 3px;\n background-color: var(--active-color);\n content: '';\n transition: height var(--vchasno-ui-transition-duration-sec);\n}\n\n.--h-scroll .vchasno-ui-tabs__label-item.--active::after {\n height: 3px;\n}\n\n.vchasno-ui-tabs-wrapper:not(.--h-scroll) .vchasno-ui-tabs {\n border-bottom: 1px solid #dbe5ea;\n}\n\n.vchasno-ui-tabs__label-item.--active {\n color: var(--active-color);\n}\n\n.vchasno-ui-tabs__label-item:not(.--disabled):hover {\n color: var(--active-color);\n}\n\n.vchasno-ui-tabs__label-item.--disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n";
|
|
758
|
+
styleInject(css_248z$3);
|
|
739
759
|
|
|
740
760
|
var Tabs = function (_a) {
|
|
741
761
|
var _b, _c;
|
|
742
762
|
var onChange = _a.onChange, items = _a.items, defaultActiveKey = _a.defaultActiveKey, activeTab = _a.activeTab, className = _a.className, isPending = _a.isPending;
|
|
743
|
-
var _d = useState(false), withScroll = _d[0], setWithScroll = _d[1];
|
|
744
|
-
var _e = useState(activeTab || defaultActiveKey || items[0].key), activeKey = _e[0], setActiveState = _e[1];
|
|
763
|
+
var _d = React.useState(false), withScroll = _d[0], setWithScroll = _d[1];
|
|
764
|
+
var _e = React.useState(activeTab || defaultActiveKey || items[0].key), activeKey = _e[0], setActiveState = _e[1];
|
|
745
765
|
var activeKeyValue = activeTab || activeKey;
|
|
746
|
-
var scrollContainerRef = useRef(null);
|
|
747
|
-
var containerRef = useRef(null);
|
|
748
|
-
var uiIndicatorRef = useRef(null);
|
|
749
|
-
var isSkipTransitionRef = useRef(true);
|
|
750
|
-
useEffect(function () {
|
|
766
|
+
var scrollContainerRef = React.useRef(null);
|
|
767
|
+
var containerRef = React.useRef(null);
|
|
768
|
+
var uiIndicatorRef = React.useRef(null);
|
|
769
|
+
var isSkipTransitionRef = React.useRef(true);
|
|
770
|
+
React.useEffect(function () {
|
|
751
771
|
if (containerRef.current && uiIndicatorRef.current) {
|
|
752
772
|
var containerReact = containerRef.current.getBoundingClientRect();
|
|
753
773
|
var list = Array.from(containerRef.current.querySelectorAll('li') || []);
|
|
@@ -760,7 +780,7 @@ var Tabs = function (_a) {
|
|
|
760
780
|
isSkipTransitionRef.current = false;
|
|
761
781
|
}
|
|
762
782
|
}, [activeKeyValue]);
|
|
763
|
-
useEffect(function () {
|
|
783
|
+
React.useEffect(function () {
|
|
764
784
|
if (containerRef.current && scrollContainerRef.current) {
|
|
765
785
|
var withScroll_1 = containerRef.current.scrollWidth > scrollContainerRef.current.clientWidth;
|
|
766
786
|
if (withScroll_1) {
|
|
@@ -769,18 +789,18 @@ var Tabs = function (_a) {
|
|
|
769
789
|
}
|
|
770
790
|
}, []);
|
|
771
791
|
var activeTabItem = items.find(function (item) { return item.key === activeKeyValue; });
|
|
772
|
-
return (
|
|
773
|
-
|
|
792
|
+
return (React.createElement(React.Fragment, null,
|
|
793
|
+
React.createElement("div", { className: cn('vchasno-ui-tabs-wrapper-root', (_b = {},
|
|
774
794
|
_b['--skip-animation'] = isSkipTransitionRef.current,
|
|
775
795
|
_b['--ping-left'] = withScroll && activeTabItem !== items[0],
|
|
776
796
|
_b['--ping-right'] = withScroll && activeTabItem !== items[items.length - 1],
|
|
777
797
|
_b)) },
|
|
778
|
-
|
|
798
|
+
React.createElement("div", { ref: scrollContainerRef, className: cn('vchasno-ui-tabs-wrapper', (_c = {},
|
|
779
799
|
_c['--h-scroll'] = withScroll,
|
|
780
800
|
_c)) },
|
|
781
|
-
|
|
801
|
+
React.createElement("ul", { className: cn('vchasno-ui-tabs', className), ref: containerRef },
|
|
782
802
|
items.map(function (item) {
|
|
783
|
-
return (
|
|
803
|
+
return (React.createElement("li", { "data-key": item.key, className: cn('vchasno-ui-tabs__label-item', item.className, {
|
|
784
804
|
'--active': item === activeTabItem,
|
|
785
805
|
'--disabled': item.disabled,
|
|
786
806
|
}), key: item.key, onClick: function (event) {
|
|
@@ -798,38 +818,121 @@ var Tabs = function (_a) {
|
|
|
798
818
|
}
|
|
799
819
|
} }, item.label));
|
|
800
820
|
}),
|
|
801
|
-
|
|
821
|
+
React.createElement("span", { ref: uiIndicatorRef, className: "vchasno-ui-tabs__indicator" })))),
|
|
802
822
|
!isPending && (activeTabItem === null || activeTabItem === void 0 ? void 0 : activeTabItem.children),
|
|
803
|
-
isPending && (
|
|
804
|
-
|
|
823
|
+
isPending && (React.createElement(FlexBox, { justify: "center", align: "center", style: { minHeight: 300 } },
|
|
824
|
+
React.createElement(Spinner, { color: "var(--vchasno-ui-tabs-active-color, #087dc1)" })))));
|
|
805
825
|
};
|
|
806
826
|
|
|
807
|
-
var css_248z$
|
|
808
|
-
styleInject(css_248z$
|
|
827
|
+
var css_248z$2 = ".vchasno-ui-checkbox {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n gap: 10px;\n user-select: none;\n}\n\n.vchasno-ui-checkbox__box {\n display: inline-flex;\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--vchasno-ui-checkbox-border-color, #b6cadb);\n border-radius: 3px;\n outline: 2px solid transparent;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n border var(--vchasno-ui-transition-duration-sec, 0.3s),\n outline var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-checkbox .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-checkbox-bg-color);\n}\n\n.vchasno-ui-checkbox__svg {\n color: transparent;\n transform: scale(0) translateZ(0);\n transition:\n color var(--vchasno-ui-transition-duration-sec),\n transform var(--vchasno-ui-transition-duration-sec) cubic-bezier(0.12, 0.4, 0.29, 1.46);\n}\n\n.vchasno-ui-checkbox.--loading .vchasno-ui-checkbox__svg {\n display: none;\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box {\n border-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n background-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box .vchasno-ui-checkbox__svg {\n color: var(--vchasno-ui-checkbox-icon-color);\n transform: scale(1) translateZ(0);\n}\n\n.vchasno-ui-checkbox:hover > input:not(:disabled) + .vchasno-ui-checkbox__box,\n.vchasno-ui-checkbox > input:not(:disabled):active + .vchasno-ui-checkbox__box {\n border-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n outline: 1.5px solid #ab9eff;\n}\n\n.vchasno-ui-checkbox > input:disabled:checked + .vchasno-ui-checkbox__box {\n background-color: var(--vchasno-ui-checkbox-disabled-bg, #b6cadb);\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-checkbox-icon-color);\n}\n\n.vchasno-ui-checkbox__label {\n font-size: var(--vchasno-ui-checkbox-font-size);\n line-height: 1;\n user-select: none;\n}\n\n.vchasno-ui-checkbox.--disabled {\n color: var(--vchasno-ui-checkbox-disabled-bg, #b6cadb);\n cursor: not-allowed;\n}\n";
|
|
828
|
+
styleInject(css_248z$2);
|
|
809
829
|
|
|
810
|
-
var Checkbox =
|
|
830
|
+
var Checkbox = React.forwardRef(function (_a, ref) {
|
|
811
831
|
var className = _a.className, label = _a.label, partial = _a.partial, disabled = _a.disabled, loading = _a.loading, rest = __rest(_a, ["className", "label", "partial", "disabled", "loading"]);
|
|
812
|
-
return (
|
|
832
|
+
return (React.createElement("label", { className: cn('vchasno-ui-checkbox', className, {
|
|
813
833
|
'--loading': loading,
|
|
814
834
|
'--disabled': disabled,
|
|
815
835
|
}) },
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
loading &&
|
|
819
|
-
partial ? (
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
label &&
|
|
836
|
+
React.createElement("input", __assign({ ref: ref, type: "checkbox", hidden: true, disabled: disabled }, rest)),
|
|
837
|
+
React.createElement("span", { className: "vchasno-ui-checkbox__box" },
|
|
838
|
+
loading && React.createElement(Spinner, { height: "90%" }),
|
|
839
|
+
partial ? (React.createElement("svg", { className: "vchasno-ui-checkbox__svg", width: "8", height: "2", viewBox: "0 0 8 2", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
840
|
+
React.createElement("rect", { width: "8", height: "2", rx: "1", fill: "currentColor" }))) : (React.createElement("svg", { className: "vchasno-ui-checkbox__svg", width: "10", height: "7", viewBox: "0 0 10 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
841
|
+
React.createElement("path", { d: "M4 7C3.8 7 3.5 6.9 3.3 6.7L0.3 3.7C-0.1 3.3 -0.1 2.7 0.3 2.3C0.7 1.9 1.3 1.9 1.7 2.3L4 4.6L8.3 0.3C8.7 -0.1 9.3 -0.1 9.7 0.3C10.1 0.7 10.1 1.3 9.7 1.7L4.7 6.7C4.5 6.9 4.3 7 4 7Z", fill: "currentColor" })))),
|
|
842
|
+
label && React.createElement("span", { className: "vchasno-ui-checkbox__label" }, label)));
|
|
823
843
|
});
|
|
824
844
|
Checkbox.displayName = 'Checkbox';
|
|
825
845
|
|
|
826
|
-
var css_248z = ".vchasno-ui-PulseDot {\n position: relative;\n width: var(--vchasno-ui-pulse-dot-size);\n height: var(--vchasno-ui-pulse-dot-size);\n border-radius: 50%;\n background-color: var(--vchasno-ui-pulse-dot-color);\n}\n\n.vchasno-ui-PulseDot::before,\n.vchasno-ui-PulseDot::after {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background: inherit;\n content: '';\n pointer-events: none;\n}\n\n.vchasno-ui-PulseDot::before {\n animation: pulse 2s ease-out infinite;\n}\n\n.vchasno-ui-PulseDot::after {\n animation: pulse 2s 1s ease-out infinite;\n}\n\n@keyframes pulse {\n 100% {\n opacity: 0;\n transform: scale(2);\n }\n}\n";
|
|
827
|
-
styleInject(css_248z);
|
|
846
|
+
var css_248z$1 = ".vchasno-ui-PulseDot {\n position: relative;\n width: var(--vchasno-ui-pulse-dot-size);\n height: var(--vchasno-ui-pulse-dot-size);\n border-radius: 50%;\n background-color: var(--vchasno-ui-pulse-dot-color);\n}\n\n.vchasno-ui-PulseDot::before,\n.vchasno-ui-PulseDot::after {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background: inherit;\n content: '';\n pointer-events: none;\n}\n\n.vchasno-ui-PulseDot::before {\n animation: pulse 2s ease-out infinite;\n}\n\n.vchasno-ui-PulseDot::after {\n animation: pulse 2s 1s ease-out infinite;\n}\n\n@keyframes pulse {\n 100% {\n opacity: 0;\n transform: scale(2);\n }\n}\n";
|
|
847
|
+
styleInject(css_248z$1);
|
|
828
848
|
|
|
829
849
|
var PulseDot = function (_a) {
|
|
830
850
|
var className = _a.className, color = _a.color, style = _a.style, size = _a.size, rest = __rest(_a, ["className", "color", "style", "size"]);
|
|
831
|
-
return (
|
|
851
|
+
return (React.createElement("div", __assign({ className: cn('vchasno-ui-PulseDot', className), style: __assign({ background: color, width: size, height: size }, style) }, rest)));
|
|
852
|
+
};
|
|
853
|
+
|
|
854
|
+
var useClientRect = function () {
|
|
855
|
+
var _a = React.useState(null), rect = _a[0], setRect = _a[1];
|
|
856
|
+
var ref = React.useRef(null);
|
|
857
|
+
React.useLayoutEffect(function () {
|
|
858
|
+
var handleResize = function () {
|
|
859
|
+
if (ref.current) {
|
|
860
|
+
setRect(ref.current.getBoundingClientRect());
|
|
861
|
+
}
|
|
862
|
+
};
|
|
863
|
+
handleResize();
|
|
864
|
+
if (window.ResizeObserver) {
|
|
865
|
+
var resizeObserver_1 = new ResizeObserver(handleResize);
|
|
866
|
+
if (ref.current) {
|
|
867
|
+
resizeObserver_1.observe(ref.current);
|
|
868
|
+
}
|
|
869
|
+
return function () {
|
|
870
|
+
if (ref.current) {
|
|
871
|
+
resizeObserver_1.unobserve(ref.current);
|
|
872
|
+
}
|
|
873
|
+
resizeObserver_1.disconnect();
|
|
874
|
+
};
|
|
875
|
+
}
|
|
876
|
+
window.addEventListener('resize', handleResize);
|
|
877
|
+
return function () {
|
|
878
|
+
window.removeEventListener('resize', handleResize);
|
|
879
|
+
};
|
|
880
|
+
}, []);
|
|
881
|
+
return { rect: rect, ref: ref };
|
|
882
|
+
};
|
|
883
|
+
|
|
884
|
+
var composeBubblePath = function (width, height, bubble, radiusOffset) {
|
|
885
|
+
return [
|
|
886
|
+
"M0 ".concat(radiusOffset),
|
|
887
|
+
"L0 ".concat(height - radiusOffset),
|
|
888
|
+
"Q0 ".concat(height, " ").concat(radiusOffset, " ").concat(height),
|
|
889
|
+
"H".concat(width - bubble - radiusOffset),
|
|
890
|
+
"Q".concat(width - bubble, " ").concat(height, " ").concat(width - bubble, " ").concat(height - radiusOffset),
|
|
891
|
+
"L".concat(width - bubble, " ").concat(height - bubble / 2),
|
|
892
|
+
"Q".concat(width - bubble, " ").concat(height - bubble, " ").concat(width - bubble / 2, " ").concat(height - bubble),
|
|
893
|
+
"H".concat(width - radiusOffset),
|
|
894
|
+
"Q".concat(width, " ").concat(height - bubble, " ").concat(width, " ").concat(height - bubble - radiusOffset),
|
|
895
|
+
"V".concat(radiusOffset),
|
|
896
|
+
"Q".concat(width, " 0 ").concat(width - radiusOffset, " 0"),
|
|
897
|
+
"H".concat(radiusOffset),
|
|
898
|
+
"Q0 0 0 ".concat(radiusOffset),
|
|
899
|
+
].join(' ');
|
|
900
|
+
};
|
|
901
|
+
|
|
902
|
+
var css_248z = ".vchasno-ui-BubbleBox {\n --vchasno-ui-bubble-height: 40px;\n --vchasno-ui-bubble-width: 40px;\n --vchasno-ui-bubble-shadow: 2px 4px 6px rgb(0 0 0 / 20%);\n\n position: relative;\n min-height: calc(var(--vchasno-ui-bubble-height) * 2);\n box-sizing: border-box;\n transition: var(--vchasno-ui-transition-duration-sec);\n}\n\n.vchasno-ui-BubbleBox__svg {\n position: absolute;\n z-index: -1;\n top: 0;\n left: 0;\n overflow: visible;\n pointer-events: none;\n transform: translateZ(0);\n transition: var(--vchasno-ui-transition-duration-sec);\n}\n\n.vchasno-ui-BubbleBox__svg path {\n transition: var(--vchasno-ui-transition-duration-sec);\n}\n\n.vchasno-ui-BubbleBox__svg.vchasno-ui-BubbleBox__shadow {\n filter: drop-shadow(var(--vchasno-ui-bubble-shadow));\n}\n\n.vchasno-ui-BubbleBox__bubble {\n position: absolute;\n z-index: 1;\n right: 0;\n bottom: 0;\n display: flex;\n width: var(--vchasno-ui-bubble-width);\n height: var(--vchasno-ui-bubble-height);\n align-items: center;\n justify-content: center;\n padding: 0;\n border: 0;\n border-radius: var(--vchasno-ui-bubble-width);\n margin: 0;\n cursor: pointer;\n transition: var(--vchasno-ui-transition-duration-sec);\n}\n";
|
|
903
|
+
styleInject(css_248z);
|
|
904
|
+
|
|
905
|
+
var BubbleBox = function (_a) {
|
|
906
|
+
var className = _a.className, controlClassName = _a.controlClassName, svgClassName = _a.svgClassName, control = _a.control, children = _a.children, backgroundColor = _a.backgroundColor, shadow = _a.shadow, _b = _a.bubbleSize, bubbleSize = _b === void 0 ? 40 : _b, borderColor = _a.borderColor, _c = _a.innerOffset, innerOffset = _c === void 0 ? 5 : _c, _d = _a.radiusOffset, radiusOffset = _d === void 0 ? 8 : _d, _e = _a.borderWith, borderWith = _e === void 0 ? 1 : _e, rest = __rest(_a, ["className", "controlClassName", "svgClassName", "control", "children", "backgroundColor", "shadow", "bubbleSize", "borderColor", "innerOffset", "radiusOffset", "borderWith"]);
|
|
907
|
+
var _f = useClientRect(), rect = _f.rect, ref = _f.ref;
|
|
908
|
+
var bubbleHeight = Array.isArray(bubbleSize) ? bubbleSize[1] : bubbleSize;
|
|
909
|
+
var bubbleWidth = Array.isArray(bubbleSize) ? bubbleSize[0] : bubbleSize;
|
|
910
|
+
var elementWidth = (rect === null || rect === void 0 ? void 0 : rect.width) || 0;
|
|
911
|
+
var height = (rect === null || rect === void 0 ? void 0 : rect.height) || 0;
|
|
912
|
+
var css = __assign({ '--vchasno-ui-bubble-width': "".concat(bubbleWidth, "px"), '--vchasno-ui-bubble-height': "".concat(bubbleHeight, "px") }, rest.style);
|
|
913
|
+
return (React.createElement("div", __assign({}, rest, { ref: ref, className: cn('vchasno-ui-BubbleBox', className), style: css }),
|
|
914
|
+
rect && (React.createElement("svg", { className: cn('vchasno-ui-BubbleBox__svg', { 'vchasno-ui-BubbleBox__shadow': shadow }, svgClassName), width: elementWidth, height: height, xmlns: "http://www.w3.org/2000/svg" },
|
|
915
|
+
React.createElement("path", { d: composeBubblePath(elementWidth, height, Math.max(bubbleHeight, bubbleWidth) + innerOffset * 2, radiusOffset), fill: backgroundColor || 'transparent', stroke: borderColor || backgroundColor || 'transparent', strokeLinejoin: "round", strokeLinecap: "round", strokeWidth: borderWith }))),
|
|
916
|
+
control && (React.createElement("div", { className: cn('vchasno-ui-BubbleBox__bubble', controlClassName) }, control)),
|
|
917
|
+
children));
|
|
832
918
|
};
|
|
833
919
|
|
|
834
|
-
|
|
920
|
+
exports.Alert = Alert;
|
|
921
|
+
exports.BubbleBox = BubbleBox;
|
|
922
|
+
exports.Button = Button;
|
|
923
|
+
exports.Checkbox = Checkbox;
|
|
924
|
+
exports.FlexBox = FlexBox;
|
|
925
|
+
exports.Input = Input;
|
|
926
|
+
exports.InputMeta = InputMeta;
|
|
927
|
+
exports.MaskInput = MaskInput;
|
|
928
|
+
exports.Pagination = Pagination;
|
|
929
|
+
exports.Paragraph = Paragraph;
|
|
930
|
+
exports.PulseDot = PulseDot;
|
|
931
|
+
exports.Spinner = Spinner;
|
|
932
|
+
exports.Switch = Switch;
|
|
933
|
+
exports.Tabs = Tabs;
|
|
934
|
+
exports.Text = Text;
|
|
935
|
+
exports.TextAreaInput = TextAreaInput;
|
|
936
|
+
exports.TextInput = TextInput;
|
|
937
|
+
exports.Title = Title;
|
|
835
938
|
//# sourceMappingURL=index.js.map
|