@emeraldemperaur/vector-sigma 1.3.1 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -2
- package/lib/index.cjs +313 -299
- package/lib/index.esm.js +312 -298
- package/lib/types/components/avatar/avatar.d.ts +2 -1
- package/lib/types/components/button/button.d.ts +4 -4
- package/lib/types/components/checkbox/checkbox.d.ts +3 -3
- package/lib/types/components/conditional/conditional.d.ts +2 -1
- package/lib/types/components/datepicker/datepicker.d.ts +3 -3
- package/lib/types/components/daterangepicker/daterangepicker.d.ts +3 -3
- package/lib/types/components/datetimepicker/datetimepicker.d.ts +3 -3
- package/lib/types/components/dropdown/dropdown.d.ts +3 -3
- package/lib/types/components/file/file.d.ts +5 -5
- package/lib/types/components/file/filemultiple.d.ts +4 -3
- package/lib/types/components/icons/flagicon.d.ts +1 -1
- package/lib/types/components/input/input.d.ts +25 -1
- package/lib/types/components/input/passwordInput.d.ts +3 -2
- package/lib/types/components/input/phoneInput.d.ts +2 -1
- package/lib/types/components/input/uuidInput.d.ts +20 -2
- package/lib/types/components/input/xCreditCardInput.d.ts +2 -1
- package/lib/types/components/inputcurrency/inputcurrency.d.ts +19 -1
- package/lib/types/components/inputcurrency/stockInput.d.ts +19 -2
- package/lib/types/components/radio/radio.d.ts +2 -1
- package/lib/types/components/select/select.d.ts +2 -1
- package/lib/types/components/selectmultiple/selectmultiple.d.ts +2 -1
- package/lib/types/components/slider/range.d.ts +2 -1
- package/lib/types/components/slider/slider.d.ts +2 -1
- package/lib/types/components/toggle/toggle.d.ts +1 -0
- package/lib/types/components/xtitle/xtitle.d.ts +13 -1
- package/package.json +2 -4
- package/lib/styles.css +0 -1
package/lib/index.cjs
CHANGED
|
@@ -9242,6 +9242,36 @@ const e$1={content:{type:"ReactNode",required:true},width:t$f.width,minWidth:t$f
|
|
|
9242
9242
|
|
|
9243
9243
|
const e=React__namespace.forwardRef((i,p)=>{const{children:r,className:n,open:s,defaultOpen:l,onOpenChange:m,delayDuration:a,disableHoverableContent:f,content:P,container:T,forceMount:c,...d}=v$3(i,e$1),C={open:s,defaultOpen:l,onOpenChange:m,delayDuration:a,disableHoverableContent:f};return React__namespace.createElement(Root3,{...C},React__namespace.createElement(Trigger,{asChild:true},r),React__namespace.createElement(Portal,{container:T,forceMount:c},React__namespace.createElement(R,{asChild:true},React__namespace.createElement(Content2,{sideOffset:4,collisionPadding:10,...d,asChild:false,ref:p,className:classNames("rt-TooltipContent",n)},React__namespace.createElement(p$d,{as:"p",className:"rt-TooltipText",size:"1"},P),React__namespace.createElement(Arrow2,{className:"rt-TooltipArrow"})))))});e.displayName="Tooltip";
|
|
9244
9244
|
|
|
9245
|
+
function styleInject(css, ref) {
|
|
9246
|
+
if ( ref === void 0 ) ref = {};
|
|
9247
|
+
var insertAt = ref.insertAt;
|
|
9248
|
+
|
|
9249
|
+
if (typeof document === 'undefined') { return; }
|
|
9250
|
+
|
|
9251
|
+
var head = document.head || document.getElementsByTagName('head')[0];
|
|
9252
|
+
var style = document.createElement('style');
|
|
9253
|
+
style.type = 'text/css';
|
|
9254
|
+
|
|
9255
|
+
if (insertAt === 'top') {
|
|
9256
|
+
if (head.firstChild) {
|
|
9257
|
+
head.insertBefore(style, head.firstChild);
|
|
9258
|
+
} else {
|
|
9259
|
+
head.appendChild(style);
|
|
9260
|
+
}
|
|
9261
|
+
} else {
|
|
9262
|
+
head.appendChild(style);
|
|
9263
|
+
}
|
|
9264
|
+
|
|
9265
|
+
if (style.styleSheet) {
|
|
9266
|
+
style.styleSheet.cssText = css;
|
|
9267
|
+
} else {
|
|
9268
|
+
style.appendChild(document.createTextNode(css));
|
|
9269
|
+
}
|
|
9270
|
+
}
|
|
9271
|
+
|
|
9272
|
+
var css_248z = "@import \"@radix-ui/themes/styles.css\" layer(radix);@layer radix, custom;@layer custom{:root{--text-main-color:#333}.core-input-label{text-align:start}.core-input-label-error{color:#800020;font-family:Montserrat;font-size:.8rem;font-weight:500;letter-spacing:.13em;margin-bottom:13px}.core-input-section-ribbon{border-radius:0;margin-bottom:33px;margin-top:33px}.core-input-section-text{font-family:Montserrat!important;font-weight:400;letter-spacing:.33em;margin-left:13px;padding-bottom:3px;padding-top:3px;text-align:left}.input-material{background-color:transparent!important;border-bottom:2px solid var(--gray-6)!important;border-radius:0!important;box-shadow:none!important}.input-material:focus-within{border-bottom-color:var(--accent-9)!important}.input-neumorphic{background:#e0e5ec!important;border:none!important;border-radius:12px!important;box-shadow:5px 5px 10px #b8b9be,-5px -5px 10px #fff!important}.input-neumorphic:focus-within{box-shadow:inset 5px 5px 10px #b8b9be,inset -5px -5px 10px #fff!important}}";
|
|
9273
|
+
styleInject(css_248z);
|
|
9274
|
+
|
|
9245
9275
|
const vectorSigma = (name) => {
|
|
9246
9276
|
return (React.createElement(React.Fragment, null,
|
|
9247
9277
|
React.createElement(R, null,
|
|
@@ -12172,7 +12202,7 @@ const xAvatar = (_a) => {
|
|
|
12172
12202
|
React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
|
|
12173
12203
|
hasError ?
|
|
12174
12204
|
React.createElement(React.Fragment, null,
|
|
12175
|
-
React.createElement("p", { id: errorId, className: 'core-input-label-error' },
|
|
12205
|
+
React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null))));
|
|
12176
12206
|
};
|
|
12177
12207
|
|
|
12178
12208
|
/**
|
|
@@ -12406,7 +12436,7 @@ const CheckboxGroup = (_a) => {
|
|
|
12406
12436
|
React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, props.inputLabel),
|
|
12407
12437
|
hasError ?
|
|
12408
12438
|
React.createElement(React.Fragment, null,
|
|
12409
|
-
React.createElement("p", { className: 'core-input-label-error' },
|
|
12439
|
+
React.createElement("p", { className: 'core-input-label-error' }, props.errorText || "Required field")) : null,
|
|
12410
12440
|
props.isHinted ?
|
|
12411
12441
|
React.createElement(React.Fragment, null,
|
|
12412
12442
|
React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
|
|
@@ -12488,7 +12518,8 @@ const ConditionalTrigger = (_a) => {
|
|
|
12488
12518
|
React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, props.inputLabel),
|
|
12489
12519
|
hasError ?
|
|
12490
12520
|
React.createElement(React.Fragment, null,
|
|
12491
|
-
React.createElement("p", { id: errorId, className: 'core-input-label-error' }, typeof meta.error === 'string' ?
|
|
12521
|
+
React.createElement("p", { id: errorId, className: 'core-input-label-error' }, typeof meta.error === 'string' ? React.createElement(React.Fragment, null, props.errorText || "Required field")
|
|
12522
|
+
: 'Invalid file selection')) : null,
|
|
12492
12523
|
props.isHinted ?
|
|
12493
12524
|
React.createElement(React.Fragment, null,
|
|
12494
12525
|
React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
|
|
@@ -20879,7 +20910,7 @@ const DatePicker = (_a) => {
|
|
|
20879
20910
|
React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, props.inputLabel),
|
|
20880
20911
|
hasError ?
|
|
20881
20912
|
React.createElement(React.Fragment, null,
|
|
20882
|
-
React.createElement("p", { className: 'core-input-label-error' },
|
|
20913
|
+
React.createElement("p", { className: 'core-input-label-error' }, props.errorText || "Required field")) : null,
|
|
20883
20914
|
props.isHinted ?
|
|
20884
20915
|
React.createElement(React.Fragment, null,
|
|
20885
20916
|
React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
|
|
@@ -20985,7 +21016,7 @@ const DateRangePicker = (_a) => {
|
|
|
20985
21016
|
React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, props.inputLabel),
|
|
20986
21017
|
hasError ?
|
|
20987
21018
|
React.createElement(React.Fragment, null,
|
|
20988
|
-
React.createElement("p", { className: 'core-input-label-error' },
|
|
21019
|
+
React.createElement("p", { className: 'core-input-label-error' }, props.errorText || "Required field")) : null,
|
|
20989
21020
|
props.isHinted ?
|
|
20990
21021
|
React.createElement(React.Fragment, null,
|
|
20991
21022
|
React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
|
|
@@ -21116,7 +21147,7 @@ const DateTimePicker = (_a) => {
|
|
|
21116
21147
|
React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, props.inputLabel),
|
|
21117
21148
|
hasError ?
|
|
21118
21149
|
React.createElement(React.Fragment, null,
|
|
21119
|
-
React.createElement("p", { id: errorId, className: 'core-input-label-error' },
|
|
21150
|
+
React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || "Required field")) : null,
|
|
21120
21151
|
props.isHinted ?
|
|
21121
21152
|
React.createElement(React.Fragment, null,
|
|
21122
21153
|
React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
|
|
@@ -21228,7 +21259,7 @@ const Dropdown = (_a) => {
|
|
|
21228
21259
|
React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, props.inputLabel),
|
|
21229
21260
|
hasError ?
|
|
21230
21261
|
React.createElement(React.Fragment, null,
|
|
21231
|
-
React.createElement("p", { className: 'core-input-label-error' },
|
|
21262
|
+
React.createElement("p", { className: 'core-input-label-error' }, props.errorText || "Required field")) : null,
|
|
21232
21263
|
props.isHinted ?
|
|
21233
21264
|
React.createElement(React.Fragment, null,
|
|
21234
21265
|
React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
|
|
@@ -21359,7 +21390,7 @@ const File$1 = (_a) => {
|
|
|
21359
21390
|
React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, props.inputLabel),
|
|
21360
21391
|
hasError ?
|
|
21361
21392
|
React.createElement(React.Fragment, null,
|
|
21362
|
-
React.createElement("p", { className: 'core-input-label-error' },
|
|
21393
|
+
React.createElement("p", { className: 'core-input-label-error' }, props.errorText || "Required field")) : null,
|
|
21363
21394
|
props.isHinted ?
|
|
21364
21395
|
React.createElement(React.Fragment, null,
|
|
21365
21396
|
React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
|
|
@@ -28682,43 +28713,41 @@ const Image = ({ id, src, alt = "Image", design = 'outline', layout = 'normal',
|
|
|
28682
28713
|
React.createElement(i$9, { ratio: aspectRatio }, content)));
|
|
28683
28714
|
};
|
|
28684
28715
|
|
|
28685
|
-
const Input$
|
|
28686
|
-
|
|
28687
|
-
|
|
28688
|
-
|
|
28689
|
-
|
|
28690
|
-
|
|
28691
|
-
|
|
28692
|
-
|
|
28693
|
-
|
|
28694
|
-
|
|
28695
|
-
|
|
28696
|
-
|
|
28697
|
-
|
|
28698
|
-
React.createElement(QuestionMarkCircledIcon, { height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null))));
|
|
28716
|
+
const Input$1 = (_a) => {
|
|
28717
|
+
var { alias, inputtype = "text", width, inputLabel, readOnly = false, placeholder = '', className, size = "2", style, inputVariant = 'input-outline' } = _a, props = __rest$1(_a, ["alias", "inputtype", "width", "inputLabel", "readOnly", "placeholder", "className", "size", "style", "inputVariant"]);
|
|
28718
|
+
const [inputField, meta] = formik.useField(alias);
|
|
28719
|
+
const hasError = Boolean(meta.touched && meta.error);
|
|
28720
|
+
const variantClass = inputVariant !== 'input-outline' ? `input-${inputVariant}` : '';
|
|
28721
|
+
return (React.createElement(Column, { span: width, newLine: props.newRow },
|
|
28722
|
+
React.createElement(u, Object.assign({ size: size, type: inputtype, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, readOnly: readOnly, placeholder: placeholder, color: hasError ? "red" : undefined, className: `${variantClass} ${className || ''}` }, inputField, props, { name: alias })),
|
|
28723
|
+
React.createElement("div", null,
|
|
28724
|
+
React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
|
|
28725
|
+
hasError && (React.createElement("p", { className: 'core-input-label-error' }, props.errorText || `Required field`)),
|
|
28726
|
+
props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
|
|
28727
|
+
React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
|
|
28728
|
+
React.createElement(QuestionMarkCircledIcon, { height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))))));
|
|
28699
28729
|
};
|
|
28700
28730
|
|
|
28701
|
-
const PasswordInput = (
|
|
28731
|
+
const PasswordInput = (_a) => {
|
|
28732
|
+
var { alias, inputLabel, width, readOnly = false, placeholder = '', inputVariant = 'input-outline', size = "2", className } = _a, props = __rest$1(_a, ["alias", "inputLabel", "width", "readOnly", "placeholder", "inputVariant", "size", "className"]);
|
|
28702
28733
|
const [showPassword, setShowPassword] = React.useState(false);
|
|
28703
28734
|
const toggleVisibility = () => setShowPassword(!showPassword);
|
|
28704
|
-
|
|
28705
|
-
|
|
28706
|
-
|
|
28707
|
-
|
|
28708
|
-
|
|
28709
|
-
|
|
28710
|
-
|
|
28711
|
-
|
|
28712
|
-
|
|
28713
|
-
|
|
28714
|
-
|
|
28715
|
-
|
|
28716
|
-
|
|
28717
|
-
|
|
28718
|
-
|
|
28719
|
-
|
|
28720
|
-
React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
|
|
28721
|
-
React.createElement(QuestionMarkCircledIcon, { height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null))));
|
|
28735
|
+
const [field, meta] = formik.useField(alias);
|
|
28736
|
+
const hasError = Boolean(meta.touched && meta.error);
|
|
28737
|
+
const variantClass = inputVariant !== 'input-outline' ? `input-${inputVariant}` : '';
|
|
28738
|
+
return (React.createElement(Column, { span: width, newLine: props.newRow },
|
|
28739
|
+
React.createElement(u, Object.assign({ size: size, type: showPassword ? "text" : "password", id: `${alias}FormInput`, readOnly: readOnly, "aria-describedby": `${alias}InputLabel`, placeholder: placeholder, color: hasError ? "red" : undefined, className: `${variantClass} ${className || ''}` }, field, props, { name: alias }),
|
|
28740
|
+
React.createElement(c, null,
|
|
28741
|
+
React.createElement(Icon, { name: "lockclosed", height: "16", width: "16" })),
|
|
28742
|
+
React.createElement(c, null,
|
|
28743
|
+
React.createElement(e, { content: showPassword ? "Hide password" : "Show password" },
|
|
28744
|
+
React.createElement(o$5, { size: "1", variant: "ghost", color: "gray", onClick: toggleVisibility, type: "button", "aria-label": showPassword ? "Hide password" : "Show password" }, showPassword ? (React.createElement(Icon, { name: "eyeopen", height: "16", width: "16" })) : (React.createElement(Icon, { name: "eyeclosed", height: "16", width: "16" })))))),
|
|
28745
|
+
React.createElement("div", null,
|
|
28746
|
+
React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
|
|
28747
|
+
hasError && (React.createElement("p", { className: 'core-input-label-error' }, props.errorText || `Required field`)),
|
|
28748
|
+
props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
|
|
28749
|
+
React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
|
|
28750
|
+
React.createElement(QuestionMarkCircledIcon, { height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))))));
|
|
28722
28751
|
};
|
|
28723
28752
|
|
|
28724
28753
|
// This file is a workaround for a bug in web browsers' "native"
|
|
@@ -30506,7 +30535,7 @@ function _objectWithoutPropertiesLoose$4(source, excluded) { if (source == null)
|
|
|
30506
30535
|
// format={value => ({ text: value, template: 'xxxxxxxx' })}/>
|
|
30507
30536
|
//
|
|
30508
30537
|
|
|
30509
|
-
function Input
|
|
30538
|
+
function Input(_ref, ref) {
|
|
30510
30539
|
var _ref$inputComponent = _ref.inputComponent,
|
|
30511
30540
|
InputComponent = _ref$inputComponent === void 0 ? 'input' : _ref$inputComponent,
|
|
30512
30541
|
parse = _ref.parse,
|
|
@@ -30534,8 +30563,8 @@ function Input$1(_ref, ref) {
|
|
|
30534
30563
|
return /*#__PURE__*/React.createElement(InputComponent, inputProps);
|
|
30535
30564
|
}
|
|
30536
30565
|
|
|
30537
|
-
Input
|
|
30538
|
-
Input
|
|
30566
|
+
Input = /*#__PURE__*/React.forwardRef(Input);
|
|
30567
|
+
Input.propTypes = {
|
|
30539
30568
|
// Parses a single characher of `<input/>` text.
|
|
30540
30569
|
parse: PropTypes.func.isRequired,
|
|
30541
30570
|
// Formats `value` into `<input/>` text.
|
|
@@ -35260,7 +35289,7 @@ function createInput$2(defaultMetadata) {
|
|
|
35260
35289
|
onKeyDown: onKeyDown,
|
|
35261
35290
|
inputFormat: inputFormat
|
|
35262
35291
|
});
|
|
35263
|
-
return /*#__PURE__*/React.createElement(Input
|
|
35292
|
+
return /*#__PURE__*/React.createElement(Input, _extends$3({}, rest, {
|
|
35264
35293
|
ref: ref,
|
|
35265
35294
|
parse: parsePhoneNumberCharacter_,
|
|
35266
35295
|
format: format,
|
|
@@ -35988,7 +36017,7 @@ function call(func, _arguments) {
|
|
|
35988
36017
|
return func.apply(this, args)
|
|
35989
36018
|
}
|
|
35990
36019
|
|
|
35991
|
-
var
|
|
36020
|
+
var PhoneInputInput = createInput(metadata$1);
|
|
35992
36021
|
|
|
35993
36022
|
function getCountries() {
|
|
35994
36023
|
return call(getCountries$1, arguments)
|
|
@@ -36259,61 +36288,57 @@ var en = {
|
|
|
36259
36288
|
"ZZ": "International"
|
|
36260
36289
|
};
|
|
36261
36290
|
|
|
36262
|
-
const PhoneInput = (
|
|
36291
|
+
const PhoneInput = (_a) => {
|
|
36292
|
+
var { alias, inputLabel, width, placeholder = "Phone Number", readOnly, inputVariant = 'input-outline', size = "2", className } = _a, props = __rest$1(_a, ["alias", "inputLabel", "width", "placeholder", "readOnly", "inputVariant", "size", "className"]);
|
|
36263
36293
|
const { setFieldValue, setFieldTouched } = formik.useFormikContext();
|
|
36264
36294
|
const [field, meta] = formik.useField(alias);
|
|
36265
|
-
const [country, setCountry] = React.useState('US');
|
|
36266
36295
|
const hasError = Boolean(meta.touched && meta.error);
|
|
36267
|
-
|
|
36268
|
-
|
|
36269
|
-
|
|
36270
|
-
|
|
36271
|
-
|
|
36272
|
-
|
|
36273
|
-
|
|
36274
|
-
|
|
36275
|
-
|
|
36276
|
-
|
|
36277
|
-
|
|
36278
|
-
|
|
36279
|
-
|
|
36280
|
-
|
|
36281
|
-
|
|
36282
|
-
|
|
36283
|
-
|
|
36284
|
-
|
|
36285
|
-
|
|
36286
|
-
|
|
36287
|
-
|
|
36288
|
-
|
|
36289
|
-
|
|
36290
|
-
|
|
36291
|
-
|
|
36292
|
-
|
|
36293
|
-
|
|
36294
|
-
|
|
36295
|
-
React.createElement(
|
|
36296
|
-
|
|
36297
|
-
|
|
36298
|
-
|
|
36299
|
-
|
|
36300
|
-
|
|
36301
|
-
|
|
36302
|
-
|
|
36303
|
-
|
|
36304
|
-
|
|
36305
|
-
|
|
36306
|
-
|
|
36307
|
-
|
|
36308
|
-
|
|
36309
|
-
|
|
36310
|
-
|
|
36311
|
-
|
|
36312
|
-
|
|
36313
|
-
React.createElement(React.Fragment, null,
|
|
36314
|
-
React.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
|
|
36315
|
-
React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
|
|
36316
|
-
React.createElement(QuestionMarkCircledIcon, { height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null)))));
|
|
36296
|
+
const [country, setCountry] = React.useState('US');
|
|
36297
|
+
const variantClass = inputVariant !== 'input-outline' ? `input-${inputVariant}` : '';
|
|
36298
|
+
return (React.createElement(Column, { span: width, newLine: props.newRow },
|
|
36299
|
+
React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
|
|
36300
|
+
React.createElement(u, Object.assign({ size: size, variant: "surface", id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, color: hasError ? "red" : undefined, className: `${variantClass} ${className || ''}` }, props, { name: alias }),
|
|
36301
|
+
React.createElement(c, { style: { padding: 0 } },
|
|
36302
|
+
React.createElement(C, { value: country, onValueChange: (value) => setCountry(value) },
|
|
36303
|
+
React.createElement(u$1, { variant: "ghost", style: {
|
|
36304
|
+
height: '100%',
|
|
36305
|
+
padding: '0 8px 0 12px',
|
|
36306
|
+
gap: '6px',
|
|
36307
|
+
borderTopRightRadius: 0,
|
|
36308
|
+
borderBottomRightRadius: 0
|
|
36309
|
+
} },
|
|
36310
|
+
React.createElement(p$5, { align: "center", gap: "2" },
|
|
36311
|
+
React.createElement(FlagIcon, { country: country }),
|
|
36312
|
+
React.createElement(p$d, { weight: "bold" },
|
|
36313
|
+
"+",
|
|
36314
|
+
getCountryCallingCode(country)),
|
|
36315
|
+
React.createElement(Icon, { name: "caret-down", style: { width: "12px", opacity: 0.5 } }))),
|
|
36316
|
+
React.createElement(g, { position: "popper", style: { minWidth: '240px', maxHeight: '300px' } }, getCountries().map((c) => (React.createElement(v, { key: c, value: c },
|
|
36317
|
+
React.createElement(p$5, { align: "center", gap: "2" },
|
|
36318
|
+
React.createElement(FlagIcon, { country: c }),
|
|
36319
|
+
React.createElement(p$d, null, en[c]),
|
|
36320
|
+
React.createElement(p$d, { color: "gray", size: "1" },
|
|
36321
|
+
"(+",
|
|
36322
|
+
getCountryCallingCode(c),
|
|
36323
|
+
")"))))))),
|
|
36324
|
+
React.createElement("div", { style: { width: '1px', height: '20px', backgroundColor: 'var(--gray-a4)', alignSelf: 'center' } })),
|
|
36325
|
+
React.createElement(PhoneInputInput, { country: country, value: field.value, onChange: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), placeholder: placeholder, readOnly: readOnly, style: {
|
|
36326
|
+
flex: 1,
|
|
36327
|
+
border: 'none',
|
|
36328
|
+
outline: 'none',
|
|
36329
|
+
backgroundColor: 'transparent',
|
|
36330
|
+
height: '100%',
|
|
36331
|
+
paddingLeft: '12px',
|
|
36332
|
+
color: 'var(--gray-12)',
|
|
36333
|
+
fontFamily: 'var(--default-font-family)',
|
|
36334
|
+
fontSize: 'var(--font-size-2)'
|
|
36335
|
+
} })),
|
|
36336
|
+
React.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
|
|
36337
|
+
React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
|
|
36338
|
+
hasError && (React.createElement(p$d, { size: "1", color: "red", className: 'core-input-label-error' }, props.errorText || `Required field`)),
|
|
36339
|
+
props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available" },
|
|
36340
|
+
React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
|
|
36341
|
+
React.createElement(QuestionMarkCircledIcon, { height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } }))))))));
|
|
36317
36342
|
};
|
|
36318
36343
|
|
|
36319
36344
|
/** Checks if value is string */
|
|
@@ -40103,54 +40128,48 @@ const parseUuidFormat = (input) => {
|
|
|
40103
40128
|
return numbers;
|
|
40104
40129
|
};
|
|
40105
40130
|
|
|
40106
|
-
const UUIDInput = (
|
|
40107
|
-
|
|
40108
|
-
|
|
40109
|
-
|
|
40110
|
-
|
|
40111
|
-
format = parseUuidFormat(type) || format;
|
|
40131
|
+
const UUIDInput = (_a) => {
|
|
40132
|
+
var { alias, type, inputLabel, width, delimiter = "-", format = [4, 4, 4, 4], placeholder = '', readOnly = false, inputVariant = 'input-outline', size = "2", className } = _a, props = __rest$1(_a, ["alias", "type", "inputLabel", "width", "delimiter", "format", "placeholder", "readOnly", "inputVariant", "size", "className"]);
|
|
40133
|
+
let activeFormat = format;
|
|
40134
|
+
if (type && type.toLowerCase().startsWith("uuid") && type.length > 4) {
|
|
40135
|
+
activeFormat = parseUuidFormat(type) || format;
|
|
40112
40136
|
}
|
|
40137
|
+
const maskPattern = activeFormat.map(len => '*'.repeat(len)).join(delimiter);
|
|
40113
40138
|
const { setFieldValue, setFieldTouched } = formik.useFormikContext();
|
|
40114
40139
|
const [field, meta] = formik.useField(alias);
|
|
40115
|
-
const [uuidFormat] = React.useState(format);
|
|
40116
|
-
const maskPattern = uuidFormat.map(len => '*'.repeat(len)).join(delimiter || "-");
|
|
40117
|
-
const [copied, setCopied] = React.useState(false);
|
|
40118
40140
|
const hasError = Boolean(meta.touched && meta.error);
|
|
40141
|
+
const [copied, setCopied] = React.useState(false);
|
|
40119
40142
|
const handleCopy = () => {
|
|
40120
40143
|
navigator.clipboard.writeText(field.value || '');
|
|
40121
40144
|
setCopied(true);
|
|
40122
40145
|
setTimeout(() => setCopied(false), 2000);
|
|
40123
40146
|
};
|
|
40124
|
-
|
|
40125
|
-
|
|
40126
|
-
|
|
40127
|
-
|
|
40128
|
-
|
|
40129
|
-
|
|
40130
|
-
|
|
40131
|
-
|
|
40132
|
-
|
|
40133
|
-
|
|
40134
|
-
|
|
40135
|
-
|
|
40136
|
-
|
|
40137
|
-
|
|
40138
|
-
|
|
40139
|
-
|
|
40140
|
-
|
|
40141
|
-
|
|
40142
|
-
|
|
40143
|
-
|
|
40144
|
-
|
|
40145
|
-
|
|
40146
|
-
|
|
40147
|
-
|
|
40148
|
-
|
|
40149
|
-
|
|
40150
|
-
React.createElement(React.Fragment, null,
|
|
40151
|
-
React.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
|
|
40152
|
-
React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
|
|
40153
|
-
React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null)))));
|
|
40147
|
+
const variantClass = inputVariant !== 'input-outline' ? `input-${inputVariant}` : '';
|
|
40148
|
+
return (React.createElement(Column, { span: width, newLine: props.newRow },
|
|
40149
|
+
React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
|
|
40150
|
+
React.createElement(u, Object.assign({ size: size, variant: "surface", color: hasError ? 'red' : undefined, className: `${variantClass} ${className || ''}` }, props),
|
|
40151
|
+
React.createElement(IMaskInput, { id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel`, readOnly: readOnly, mask: maskPattern, value: field.value || '', unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), placeholder: placeholder, style: {
|
|
40152
|
+
flex: 1,
|
|
40153
|
+
border: 'none',
|
|
40154
|
+
outline: 'none',
|
|
40155
|
+
backgroundColor: 'transparent',
|
|
40156
|
+
height: '100%',
|
|
40157
|
+
paddingLeft: '8px',
|
|
40158
|
+
color: 'var(--gray-12)',
|
|
40159
|
+
fontFamily: 'var(--code-font-family)',
|
|
40160
|
+
fontSize: 'var(--font-size-2)',
|
|
40161
|
+
textTransform: 'uppercase',
|
|
40162
|
+
width: '100%'
|
|
40163
|
+
}, autoComplete: "off" }),
|
|
40164
|
+
React.createElement(c, null,
|
|
40165
|
+
React.createElement(e, { content: copied ? "Copied!" : "Copy to clipboard" },
|
|
40166
|
+
React.createElement(o$5, { size: "1", variant: "ghost", color: copied ? "green" : "gray", onClick: handleCopy, type: "button", disabled: !field.value }, copied ? React.createElement(CheckIcon, null) : React.createElement(CopyIcon, null))))),
|
|
40167
|
+
React.createElement("div", null,
|
|
40168
|
+
React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
|
|
40169
|
+
hasError && (React.createElement("p", { className: 'core-input-label-error' }, props.errorText || `Required field`)),
|
|
40170
|
+
props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
|
|
40171
|
+
React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
|
|
40172
|
+
React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } }))))))));
|
|
40154
40173
|
};
|
|
40155
40174
|
|
|
40156
40175
|
var FaCcVisa = {};
|
|
@@ -41580,13 +41599,14 @@ function requireDist () {
|
|
|
41580
41599
|
var distExports = requireDist();
|
|
41581
41600
|
var cardValidator = /*@__PURE__*/getDefaultExportFromCjs(distExports);
|
|
41582
41601
|
|
|
41583
|
-
const
|
|
41584
|
-
var
|
|
41602
|
+
const CreditCardInput = (_a) => {
|
|
41603
|
+
var _b;
|
|
41604
|
+
var { alias, inputLabel, width, placeholder, readOnly = false, inputVariant = 'input-outline', className } = _a, props = __rest$1(_a, ["alias", "inputLabel", "width", "placeholder", "readOnly", "inputVariant", "className"]);
|
|
41585
41605
|
const { setFieldValue, setFieldTouched } = formik.useFormikContext();
|
|
41586
41606
|
const [field, meta] = formik.useField(alias);
|
|
41587
41607
|
const hasError = Boolean(meta.touched && meta.error);
|
|
41588
41608
|
const cardInfo = cardValidator.number(field.value || '');
|
|
41589
|
-
const cardType = (
|
|
41609
|
+
const cardType = (_b = cardInfo.card) === null || _b === void 0 ? void 0 : _b.type;
|
|
41590
41610
|
const maskPattern = cardType === 'american-express' ? '0000 000000 00000' : '0000 0000 0000 0000';
|
|
41591
41611
|
const getCardIcon = () => {
|
|
41592
41612
|
switch (cardType) {
|
|
@@ -41599,44 +41619,36 @@ const xCreditCardInput = (alias, inputLabel, width, defaultValue, newRow, placeh
|
|
|
41599
41619
|
default: return React.createElement(FaCreditCardExports.FaCreditCard, { color: "var(--gray-8)", size: "20" });
|
|
41600
41620
|
}
|
|
41601
41621
|
};
|
|
41602
|
-
|
|
41603
|
-
|
|
41604
|
-
|
|
41605
|
-
|
|
41622
|
+
const variantClass = inputVariant !== 'input-outline' ? `input-${inputVariant}` : '';
|
|
41623
|
+
const isOutline = inputVariant === 'input-outline';
|
|
41624
|
+
return (React.createElement(Column, { span: width, newLine: props.newRow },
|
|
41625
|
+
React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
|
|
41626
|
+
React.createElement(p$5, { align: "center", className: `rt-TextFieldRoot rt-r-size-2 rt-variant-surface ${variantClass} ${className || ''}`, style: {
|
|
41627
|
+
width: '100%',
|
|
41628
|
+
boxShadow: (isOutline && hasError) ? 'inset 0 0 0 1px var(--red-9)' : undefined,
|
|
41629
|
+
backgroundColor: isOutline ? 'var(--color-surface)' : undefined,
|
|
41630
|
+
paddingRight: '12px',
|
|
41631
|
+
cursor: 'text'
|
|
41632
|
+
} },
|
|
41633
|
+
React.createElement(IMaskInput, { id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel`, mask: maskPattern, readOnly: readOnly, value: field.value || '', unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), placeholder: placeholder || '0000 0000 0000 0000', inputMode: "numeric", autoComplete: "cc-number", style: {
|
|
41634
|
+
flex: 1,
|
|
41635
|
+
border: 'none',
|
|
41636
|
+
outline: 'none',
|
|
41637
|
+
backgroundColor: 'transparent',
|
|
41638
|
+
height: '100%',
|
|
41639
|
+
padding: '0 12px',
|
|
41640
|
+
color: 'var(--gray-12)',
|
|
41641
|
+
fontFamily: 'var(--code-font-family)',
|
|
41642
|
+
fontSize: 'var(--font-size-2)',
|
|
41606
41643
|
width: '100%',
|
|
41607
|
-
|
|
41608
|
-
|
|
41609
|
-
|
|
41610
|
-
|
|
41611
|
-
|
|
41612
|
-
|
|
41613
|
-
|
|
41614
|
-
|
|
41615
|
-
outline: 'none',
|
|
41616
|
-
backgroundColor: 'transparent',
|
|
41617
|
-
height: '100%',
|
|
41618
|
-
padding: '0 12px',
|
|
41619
|
-
color: 'var(--gray-12)',
|
|
41620
|
-
fontFamily: 'var(--code-font-family)',
|
|
41621
|
-
fontSize: 'var(--font-size-2)',
|
|
41622
|
-
width: '100%',
|
|
41623
|
-
}, inputMode: "numeric", autoComplete: "cc-number" }),
|
|
41624
|
-
React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
|
|
41625
|
-
" ",
|
|
41626
|
-
getCardIcon(),
|
|
41627
|
-
" ")),
|
|
41628
|
-
React.createElement("div", null,
|
|
41629
|
-
React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
|
|
41630
|
-
hasError ?
|
|
41631
|
-
React.createElement(React.Fragment, null,
|
|
41632
|
-
React.createElement("p", { className: 'core-input-label-error' },
|
|
41633
|
-
" ",
|
|
41634
|
-
meta.error)) : null,
|
|
41635
|
-
isHinted ?
|
|
41636
|
-
React.createElement(React.Fragment, null,
|
|
41637
|
-
React.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
|
|
41638
|
-
React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
|
|
41639
|
-
React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null)))));
|
|
41644
|
+
} }),
|
|
41645
|
+
React.createElement("div", { style: { display: 'flex', alignItems: 'center' } }, getCardIcon())),
|
|
41646
|
+
React.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
|
|
41647
|
+
React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
|
|
41648
|
+
hasError && (React.createElement(p$d, { size: "1", color: "red", className: 'core-input-label-error' }, props.errorText || `Required field`)),
|
|
41649
|
+
props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available" },
|
|
41650
|
+
React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
|
|
41651
|
+
React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } }))))))));
|
|
41640
41652
|
};
|
|
41641
41653
|
|
|
41642
41654
|
const CURRENCIES = {
|
|
@@ -41707,70 +41719,69 @@ const CURRENCIES = {
|
|
|
41707
41719
|
FJD: { code: 'FJD', country: 'FJ', symbol: 'FJ$', scale: 2 },
|
|
41708
41720
|
};
|
|
41709
41721
|
|
|
41710
|
-
const CurrencyInput = (
|
|
41722
|
+
const CurrencyInput = (_a) => {
|
|
41723
|
+
var { alias, inputtype = "currency", inputLabel, width, defaultValue, placeholder, readOnly = false, inputVariant = 'input-outline', className } = _a, props = __rest$1(_a, ["alias", "inputtype", "inputLabel", "width", "defaultValue", "placeholder", "readOnly", "inputVariant", "className"]);
|
|
41711
41724
|
const { setFieldValue, setFieldTouched } = formik.useFormikContext();
|
|
41712
41725
|
const [amountField, amountMeta] = formik.useField(alias);
|
|
41713
|
-
const
|
|
41726
|
+
const currencyFieldName = inputtype === "currency" ? "USD" : inputtype;
|
|
41727
|
+
const [currencyField] = formik.useField(currencyFieldName);
|
|
41714
41728
|
const hasError = Boolean(amountMeta.touched && amountMeta.error);
|
|
41715
41729
|
const activeCurrency = CURRENCIES[currencyField.value] || CURRENCIES.USD;
|
|
41716
|
-
|
|
41717
|
-
|
|
41718
|
-
|
|
41719
|
-
|
|
41720
|
-
|
|
41721
|
-
|
|
41722
|
-
|
|
41723
|
-
|
|
41724
|
-
|
|
41725
|
-
|
|
41726
|
-
|
|
41727
|
-
|
|
41728
|
-
padding: '0 8px 0 12px',
|
|
41729
|
-
gap: '6px',
|
|
41730
|
-
borderTopRightRadius: 0,
|
|
41731
|
-
borderBottomRightRadius: 0,
|
|
41732
|
-
backgroundColor: 'var(--gray-3)'
|
|
41733
|
-
} },
|
|
41734
|
-
React.createElement(p$5, { align: "center", gap: "2" },
|
|
41735
|
-
React.createElement(FlagIcon, { country: activeCurrency.country }),
|
|
41736
|
-
React.createElement(p$d, { weight: "bold", size: "2" }, activeCurrency.code),
|
|
41737
|
-
React.createElement(Icon, { name: "caret-down", style: { opacity: 0.5 } }))),
|
|
41738
|
-
React.createElement(g, { position: "popper" }, Object.values(CURRENCIES).map((c) => (React.createElement(v, { key: c.code, value: c.code },
|
|
41739
|
-
React.createElement(p$5, { align: "center", gap: "2" },
|
|
41740
|
-
React.createElement(FlagIcon, { country: c.country }),
|
|
41741
|
-
React.createElement(p$d, null, c.code),
|
|
41742
|
-
React.createElement(p$d, { color: "gray", size: "1" },
|
|
41743
|
-
"(",
|
|
41744
|
-
c.symbol,
|
|
41745
|
-
")"))))))),
|
|
41746
|
-
React.createElement(p$d, { color: "gray", size: "2", style: { paddingLeft: '12px', userSelect: 'none' } }, activeCurrency.symbol),
|
|
41747
|
-
React.createElement(IMaskInput, { id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel`, mask: Number, scale: activeCurrency.scale, defaultValue: defaultValue, readOnly: readOnly,
|
|
41748
|
-
// @ts-expect-error: known library type definition gap
|
|
41749
|
-
signed: false, thousandsSeparator: ",", padFractionalZeros: true, normalizeZeros: true, radix: ".", mapToRadix: ['.'],
|
|
41750
|
-
// Formik Binding
|
|
41751
|
-
value: amountField.value || value ? String(amountField.value || value) : '', unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias || value, true), placeholder: placeholder || '0.00', style: {
|
|
41752
|
-
flex: 1,
|
|
41753
|
-
border: 'none',
|
|
41754
|
-
outline: 'none',
|
|
41755
|
-
backgroundColor: 'transparent',
|
|
41730
|
+
const variantClass = inputVariant !== 'input-outline' ? `input-${inputVariant}` : '';
|
|
41731
|
+
const isOutline = inputVariant === 'input-outline';
|
|
41732
|
+
return (React.createElement(Column, { span: width, newLine: props.newRow },
|
|
41733
|
+
React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
|
|
41734
|
+
React.createElement(p$5, { align: "center", className: `rt-TextFieldRoot rt-r-size-2 rt-variant-surface ${variantClass} ${className || ''}`, style: {
|
|
41735
|
+
width: '100%',
|
|
41736
|
+
boxShadow: (isOutline && hasError) ? 'inset 0 0 0 1px var(--red-9)' : undefined,
|
|
41737
|
+
backgroundColor: isOutline ? 'var(--color-surface)' : undefined,
|
|
41738
|
+
cursor: 'text'
|
|
41739
|
+
} },
|
|
41740
|
+
React.createElement(C, { value: activeCurrency.code, onValueChange: (val) => setFieldValue(currencyFieldName, val) },
|
|
41741
|
+
React.createElement(u$1, { variant: "ghost", style: {
|
|
41756
41742
|
height: '100%',
|
|
41757
|
-
padding: '0
|
|
41758
|
-
|
|
41759
|
-
|
|
41760
|
-
|
|
41761
|
-
|
|
41762
|
-
|
|
41763
|
-
|
|
41764
|
-
|
|
41765
|
-
|
|
41766
|
-
|
|
41767
|
-
|
|
41768
|
-
|
|
41769
|
-
|
|
41770
|
-
|
|
41771
|
-
React.createElement(
|
|
41772
|
-
|
|
41773
|
-
|
|
41743
|
+
padding: '0 8px 0 12px',
|
|
41744
|
+
gap: '6px',
|
|
41745
|
+
borderTopRightRadius: 0,
|
|
41746
|
+
borderBottomRightRadius: 0,
|
|
41747
|
+
backgroundColor: 'var(--gray-3)'
|
|
41748
|
+
} },
|
|
41749
|
+
React.createElement(p$5, { align: "center", gap: "2" },
|
|
41750
|
+
React.createElement(FlagIcon, { country: activeCurrency.country }),
|
|
41751
|
+
React.createElement(p$d, { weight: "bold", size: "2" }, activeCurrency.code),
|
|
41752
|
+
React.createElement(Icon, { name: "caret-down", style: { opacity: 0.5 } }))),
|
|
41753
|
+
React.createElement(g, { position: "popper" }, Object.values(CURRENCIES).map((c) => (React.createElement(v, { key: c.code, value: c.code },
|
|
41754
|
+
React.createElement(p$5, { align: "center", gap: "2" },
|
|
41755
|
+
React.createElement(FlagIcon, { country: c.country }),
|
|
41756
|
+
React.createElement(p$d, null, c.code),
|
|
41757
|
+
React.createElement(p$d, { color: "gray", size: "1" },
|
|
41758
|
+
"(",
|
|
41759
|
+
c.symbol,
|
|
41760
|
+
")"))))))),
|
|
41761
|
+
React.createElement(p$d, { color: "gray", size: "2", style: { paddingLeft: '12px', userSelect: 'none' } }, activeCurrency.symbol),
|
|
41762
|
+
React.createElement(IMaskInput, { id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel`, mask: Number, scale: activeCurrency.scale, defaultValue: defaultValue, readOnly: readOnly,
|
|
41763
|
+
// @ts-expect-error: known library type definition gap
|
|
41764
|
+
signed: false, thousandsSeparator: ",", padFractionalZeros: true, normalizeZeros: true, radix: ".", mapToRadix: ['.'],
|
|
41765
|
+
// Bind to Amount Field
|
|
41766
|
+
value: amountField.value !== undefined && amountField.value !== null ? String(amountField.value) : '', unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), placeholder: placeholder || '0.00', style: {
|
|
41767
|
+
flex: 1,
|
|
41768
|
+
border: 'none',
|
|
41769
|
+
outline: 'none',
|
|
41770
|
+
backgroundColor: 'transparent',
|
|
41771
|
+
height: '100%',
|
|
41772
|
+
padding: '0 12px 0 4px',
|
|
41773
|
+
color: 'var(--gray-12)',
|
|
41774
|
+
fontFamily: 'var(--default-font-family)',
|
|
41775
|
+
fontSize: 'var(--font-size-2)',
|
|
41776
|
+
textAlign: 'right',
|
|
41777
|
+
width: '100%'
|
|
41778
|
+
}, inputMode: "decimal", autoComplete: "off" })),
|
|
41779
|
+
React.createElement("div", null,
|
|
41780
|
+
React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
|
|
41781
|
+
hasError && (React.createElement(p$d, { size: "1", color: "red", className: 'core-input-label-error' }, props.errorText || `Required field`)),
|
|
41782
|
+
props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available" },
|
|
41783
|
+
React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
|
|
41784
|
+
React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } }))))))));
|
|
41774
41785
|
};
|
|
41775
41786
|
|
|
41776
41787
|
var FaChartLine = {};
|
|
@@ -41790,61 +41801,59 @@ function requireFaChartLine () {
|
|
|
41790
41801
|
|
|
41791
41802
|
var FaChartLineExports = /*@__PURE__*/ requireFaChartLine();
|
|
41792
41803
|
|
|
41793
|
-
const StockInput = (
|
|
41804
|
+
const StockInput = (_a) => {
|
|
41805
|
+
var { alias, inputLabel, width, defaultValue, placeholder, readOnly = false, inputVariant = 'input-outline', className } = _a, props = __rest$1(_a, ["alias", "inputLabel", "width", "defaultValue", "placeholder", "readOnly", "inputVariant", "className"]);
|
|
41794
41806
|
const { setFieldValue, setFieldTouched } = formik.useFormikContext();
|
|
41795
41807
|
const [priceField, meta] = formik.useField(alias);
|
|
41796
41808
|
const hasError = Boolean(meta.touched && meta.error);
|
|
41797
|
-
|
|
41798
|
-
|
|
41799
|
-
|
|
41800
|
-
|
|
41801
|
-
|
|
41802
|
-
|
|
41803
|
-
|
|
41804
|
-
|
|
41805
|
-
|
|
41806
|
-
|
|
41807
|
-
|
|
41808
|
-
|
|
41809
|
-
|
|
41810
|
-
|
|
41811
|
-
|
|
41812
|
-
|
|
41813
|
-
|
|
41814
|
-
|
|
41815
|
-
|
|
41816
|
-
|
|
41817
|
-
|
|
41818
|
-
|
|
41819
|
-
|
|
41820
|
-
|
|
41821
|
-
|
|
41822
|
-
|
|
41823
|
-
|
|
41824
|
-
|
|
41825
|
-
|
|
41826
|
-
|
|
41827
|
-
|
|
41828
|
-
|
|
41829
|
-
|
|
41830
|
-
|
|
41831
|
-
|
|
41832
|
-
|
|
41833
|
-
|
|
41834
|
-
|
|
41835
|
-
|
|
41836
|
-
|
|
41837
|
-
|
|
41838
|
-
|
|
41839
|
-
|
|
41840
|
-
|
|
41841
|
-
|
|
41842
|
-
|
|
41843
|
-
|
|
41844
|
-
React.createElement(
|
|
41845
|
-
React.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
|
|
41846
|
-
React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
|
|
41847
|
-
React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null)))));
|
|
41809
|
+
const variantClass = inputVariant !== 'input-outline' ? `input-${inputVariant}` : '';
|
|
41810
|
+
const isOutline = inputVariant === 'input-outline';
|
|
41811
|
+
return (React.createElement(Column, { span: width, newLine: props.newRow },
|
|
41812
|
+
React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
|
|
41813
|
+
React.createElement(p$5, { align: "center", justify: "between", className: `rt-TextFieldRoot rt-r-size-2 rt-variant-surface ${variantClass} ${className || ''}`, style: {
|
|
41814
|
+
width: '100%',
|
|
41815
|
+
height: 'var(--space-6)',
|
|
41816
|
+
boxShadow: (isOutline)
|
|
41817
|
+
? (hasError ? 'inset 0 0 0 1px var(--red-9)' : 'inset 0 0 0 1px var(--gray-alpha-5)')
|
|
41818
|
+
: undefined,
|
|
41819
|
+
backgroundColor: isOutline ? 'var(--color-surface)' : undefined,
|
|
41820
|
+
padding: '4px',
|
|
41821
|
+
cursor: 'text',
|
|
41822
|
+
}, onClick: () => {
|
|
41823
|
+
const input = document.getElementById(`${alias}FormInput`);
|
|
41824
|
+
input === null || input === void 0 ? void 0 : input.focus();
|
|
41825
|
+
} },
|
|
41826
|
+
React.createElement(e$8, { size: "2", variant: "soft", color: "gray", style: {
|
|
41827
|
+
height: '100%',
|
|
41828
|
+
padding: '0 10px',
|
|
41829
|
+
borderRadius: 'var(--radius-1)',
|
|
41830
|
+
fontFamily: 'var(--code-font-family)',
|
|
41831
|
+
fontSize: 'var(--font-size-2)',
|
|
41832
|
+
letterSpacing: '0.05em',
|
|
41833
|
+
fontWeight: 600,
|
|
41834
|
+
userSelect: 'none'
|
|
41835
|
+
} }, defaultValue || React.createElement(FaChartLineExports.FaChartLine, null)),
|
|
41836
|
+
React.createElement(p$5, { align: "center", style: { flex: 1, height: '100%', justifyContent: 'flex-end' } },
|
|
41837
|
+
React.createElement(IMaskInput, { id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel`, mask: Number, scale: 2, readOnly: readOnly,
|
|
41838
|
+
// @ts-expect-error: known library type definition gap
|
|
41839
|
+
signed: false, thousandsSeparator: ",", padFractionalZeros: true, normalizeZeros: true, radix: ".", mapToRadix: ['.'], value: priceField.value !== undefined && priceField.value !== null ? String(priceField.value) : '', unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), placeholder: placeholder || "0.00", style: {
|
|
41840
|
+
border: 'none',
|
|
41841
|
+
outline: 'none',
|
|
41842
|
+
background: 'transparent',
|
|
41843
|
+
textAlign: 'right',
|
|
41844
|
+
width: '100%',
|
|
41845
|
+
minWidth: '60px',
|
|
41846
|
+
color: 'var(--gray-12)',
|
|
41847
|
+
fontSize: 'var(--font-size-3)',
|
|
41848
|
+
fontWeight: 500,
|
|
41849
|
+
fontFamily: 'var(--default-font-family)',
|
|
41850
|
+
}, inputMode: "decimal", autoComplete: "off" }))),
|
|
41851
|
+
React.createElement("div", null,
|
|
41852
|
+
React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
|
|
41853
|
+
hasError && (React.createElement("p", { className: 'core-input-label-error' }, props.errorText || `Required field`)),
|
|
41854
|
+
props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available" },
|
|
41855
|
+
React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
|
|
41856
|
+
React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } }))))))));
|
|
41848
41857
|
};
|
|
41849
41858
|
|
|
41850
41859
|
const xRadioGroup = (_a) => {
|
|
@@ -41919,7 +41928,7 @@ const xRadioGroup = (_a) => {
|
|
|
41919
41928
|
React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, props.inputLabel),
|
|
41920
41929
|
hasError ?
|
|
41921
41930
|
React.createElement(React.Fragment, null,
|
|
41922
|
-
React.createElement("p", { className: 'core-input-label-error' },
|
|
41931
|
+
React.createElement("p", { className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
|
|
41923
41932
|
props.isHinted ?
|
|
41924
41933
|
React.createElement(React.Fragment, null,
|
|
41925
41934
|
React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
|
|
@@ -42003,7 +42012,7 @@ const OptionSelect = (_a) => {
|
|
|
42003
42012
|
React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, props.inputLabel),
|
|
42004
42013
|
hasError ?
|
|
42005
42014
|
React.createElement(React.Fragment, null,
|
|
42006
|
-
React.createElement("p", { className: 'core-input-label-error' },
|
|
42015
|
+
React.createElement("p", { className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
|
|
42007
42016
|
props.isHinted ?
|
|
42008
42017
|
React.createElement(React.Fragment, null,
|
|
42009
42018
|
React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
|
|
@@ -42100,7 +42109,7 @@ const MultipleSelect = (_a) => {
|
|
|
42100
42109
|
React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, props.inputLabel),
|
|
42101
42110
|
hasError ?
|
|
42102
42111
|
React.createElement(React.Fragment, null,
|
|
42103
|
-
React.createElement("p", { className: 'core-input-label-error' },
|
|
42112
|
+
React.createElement("p", { className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
|
|
42104
42113
|
props.isHinted ?
|
|
42105
42114
|
React.createElement(React.Fragment, null,
|
|
42106
42115
|
React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
|
|
@@ -42198,7 +42207,7 @@ const xSlider = (_a) => {
|
|
|
42198
42207
|
React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, props.inputLabel),
|
|
42199
42208
|
hasError ?
|
|
42200
42209
|
React.createElement(React.Fragment, null,
|
|
42201
|
-
React.createElement("p", { className: 'core-input-label-error' },
|
|
42210
|
+
React.createElement("p", { className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
|
|
42202
42211
|
props.isHinted ?
|
|
42203
42212
|
React.createElement(React.Fragment, null,
|
|
42204
42213
|
React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
|
|
@@ -42276,7 +42285,7 @@ const RangeSlider = (_a) => {
|
|
|
42276
42285
|
React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, props.inputLabel),
|
|
42277
42286
|
hasError ?
|
|
42278
42287
|
React.createElement(React.Fragment, null,
|
|
42279
|
-
React.createElement("p", { className: 'core-input-label-error' },
|
|
42288
|
+
React.createElement("p", { className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
|
|
42280
42289
|
props.isHinted ?
|
|
42281
42290
|
React.createElement(React.Fragment, null,
|
|
42282
42291
|
React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
|
|
@@ -42385,15 +42394,20 @@ const Row = ({ children, className, gap = "4" }) => {
|
|
|
42385
42394
|
return (React.createElement(o$6, { columns: "12", gap: gap, width: "auto", className: className }, children));
|
|
42386
42395
|
};
|
|
42387
42396
|
|
|
42388
|
-
const xTitle = (
|
|
42397
|
+
const xTitle = (_a) => {
|
|
42398
|
+
var { title, iconname, textColor = "#FFFFFF", backgroundColor = "#000000", fontFamily } = _a, props = __rest$1(_a, ["title", "iconname", "textColor", "backgroundColor", "fontFamily"]);
|
|
42389
42399
|
return (React.createElement(React.Fragment, null,
|
|
42390
42400
|
React.createElement(Row, null,
|
|
42391
42401
|
React.createElement(Column, { span: 12, newLine: true },
|
|
42392
|
-
React.createElement("div", { style: { backgroundColor: backgroundColor }, className: 'core-input-section-ribbon' },
|
|
42402
|
+
React.createElement("div", { id: "", style: { backgroundColor: backgroundColor }, className: 'core-input-section-ribbon' },
|
|
42393
42403
|
React.createElement("p", { style: { color: textColor, fontFamily: fontFamily ? fontFamily : 'inherit' }, className: 'core-input-section-text' },
|
|
42394
|
-
React.createElement(Icon, { name: iconname }),
|
|
42404
|
+
React.createElement(Icon, { name: iconname || "input" }),
|
|
42395
42405
|
"\u00A0",
|
|
42396
|
-
title)
|
|
42406
|
+
title),
|
|
42407
|
+
props.subTitle ?
|
|
42408
|
+
React.createElement(React.Fragment, null,
|
|
42409
|
+
React.createElement("p", { style: { color: textColor, fontFamily: fontFamily ? fontFamily : 'inherit' }, className: 'core-input-section-text' }, props.subTitle))
|
|
42410
|
+
: null)))));
|
|
42397
42411
|
};
|
|
42398
42412
|
|
|
42399
42413
|
const Container = (_a) => {
|
|
@@ -46908,6 +46922,7 @@ exports.CheckboxGroup = CheckboxGroup;
|
|
|
46908
46922
|
exports.Column = Column;
|
|
46909
46923
|
exports.ConditionalTrigger = ConditionalTrigger;
|
|
46910
46924
|
exports.Container = Container;
|
|
46925
|
+
exports.CreditCardInput = CreditCardInput;
|
|
46911
46926
|
exports.CurrencyInput = CurrencyInput;
|
|
46912
46927
|
exports.DatePicker = DatePicker;
|
|
46913
46928
|
exports.DateRangePicker = DateRangePicker;
|
|
@@ -46917,7 +46932,7 @@ exports.File = File$1;
|
|
|
46917
46932
|
exports.FlagIcon = FlagIcon;
|
|
46918
46933
|
exports.Icon = Icon;
|
|
46919
46934
|
exports.Image = Image;
|
|
46920
|
-
exports.Input = Input$
|
|
46935
|
+
exports.Input = Input$1;
|
|
46921
46936
|
exports.MultipleSelect = MultipleSelect;
|
|
46922
46937
|
exports.OptionSelect = OptionSelect;
|
|
46923
46938
|
exports.PasswordInput = PasswordInput;
|
|
@@ -46932,7 +46947,6 @@ exports.primeMatrix = primeMatrix;
|
|
|
46932
46947
|
exports.vectorSigma = vectorSigma;
|
|
46933
46948
|
exports.xAvatar = xAvatar;
|
|
46934
46949
|
exports.xButton = xButton;
|
|
46935
|
-
exports.xCreditCardInput = xCreditCardInput;
|
|
46936
46950
|
exports.xFormSchema = xFormSchema;
|
|
46937
46951
|
exports.xRadioGroup = xRadioGroup;
|
|
46938
46952
|
exports.xSlider = xSlider;
|