@emeraldemperaur/vector-sigma 1.4.32 → 1.4.34
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 -1
- package/lib/index.cjs +223 -283
- package/lib/index.esm.js +223 -283
- package/lib/types/components/checkbox/checkbox.d.ts +5 -5
- package/lib/types/components/conditional/conditional.d.ts +5 -5
- package/lib/types/components/dropdown/dropdown.d.ts +6 -6
- package/lib/types/components/radio/radio.d.ts +9 -9
- package/package.json +1 -1
package/lib/index.cjs
CHANGED
|
@@ -15925,6 +15925,28 @@ var HamburgerMenuIcon = /*#__PURE__*/React.forwardRef(function (_ref, forwardedR
|
|
|
15925
15925
|
}));
|
|
15926
15926
|
});
|
|
15927
15927
|
|
|
15928
|
+
var _excluded$2u = ["color"];
|
|
15929
|
+
var HeadingIcon = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
|
|
15930
|
+
var _ref$color = _ref.color,
|
|
15931
|
+
color = _ref$color === void 0 ? 'currentColor' : _ref$color,
|
|
15932
|
+
props = _objectWithoutPropertiesLoose$7(_ref, _excluded$2u);
|
|
15933
|
+
|
|
15934
|
+
return React.createElement("svg", Object.assign({
|
|
15935
|
+
width: "15",
|
|
15936
|
+
height: "15",
|
|
15937
|
+
viewBox: "0 0 15 15",
|
|
15938
|
+
fill: "none",
|
|
15939
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
15940
|
+
}, props, {
|
|
15941
|
+
ref: forwardedRef
|
|
15942
|
+
}), React.createElement("path", {
|
|
15943
|
+
d: "M8.75432 2.0502C8.50579 2.0502 8.30432 2.25167 8.30432 2.5002C8.30432 2.74873 8.50579 2.9502 8.75432 2.9502H9.94997V7.05004H5.04997V2.9502H6.25432C6.50285 2.9502 6.70432 2.74873 6.70432 2.5002C6.70432 2.25167 6.50285 2.0502 6.25432 2.0502H2.75432C2.50579 2.0502 2.30432 2.25167 2.30432 2.5002C2.30432 2.74873 2.50579 2.9502 2.75432 2.9502H3.94997V12.0502H2.75432C2.50579 12.0502 2.30432 12.2517 2.30432 12.5002C2.30432 12.7487 2.50579 12.9502 2.75432 12.9502H6.25432C6.50285 12.9502 6.70432 12.7487 6.70432 12.5002C6.70432 12.2517 6.50285 12.0502 6.25432 12.0502H5.04997V7.95004H9.94997V12.0502H8.75432C8.50579 12.0502 8.30432 12.2517 8.30432 12.5002C8.30432 12.7487 8.50579 12.9502 8.75432 12.9502H12.2543C12.5028 12.9502 12.7043 12.7487 12.7043 12.5002C12.7043 12.2517 12.5028 12.0502 12.2543 12.0502H11.05V2.9502H12.2543C12.5028 2.9502 12.7043 2.74873 12.7043 2.5002C12.7043 2.25167 12.5028 2.0502 12.2543 2.0502H8.75432Z",
|
|
15944
|
+
fill: color,
|
|
15945
|
+
fillRule: "evenodd",
|
|
15946
|
+
clipRule: "evenodd"
|
|
15947
|
+
}));
|
|
15948
|
+
});
|
|
15949
|
+
|
|
15928
15950
|
var _excluded$2v = ["color"];
|
|
15929
15951
|
var HeartIcon = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
|
|
15930
15952
|
var _ref$color = _ref.color,
|
|
@@ -17259,7 +17281,8 @@ const iconMap = {
|
|
|
17259
17281
|
fontfamily: FontFamilyIcon,
|
|
17260
17282
|
video: VideoIcon,
|
|
17261
17283
|
shuffle: ShuffleIcon,
|
|
17262
|
-
loop: LoopIcon
|
|
17284
|
+
loop: LoopIcon,
|
|
17285
|
+
heading: HeadingIcon,
|
|
17263
17286
|
};
|
|
17264
17287
|
const Icon = (_a) => {
|
|
17265
17288
|
var { name } = _a, props = __rest$1(_a, ["name"]);
|
|
@@ -17640,7 +17663,7 @@ const CheckboxGroupInput = (_a) => {
|
|
|
17640
17663
|
const hasError = Boolean(fieldTouched && fieldError);
|
|
17641
17664
|
const containerRef = React.useRef(null);
|
|
17642
17665
|
const [neuVars, setNeuVars] = React.useState({});
|
|
17643
|
-
const inputId = `${alias}FormInput
|
|
17666
|
+
const inputId = `${alias}FormInput`;
|
|
17644
17667
|
const errorId = `${alias}-error`;
|
|
17645
17668
|
const handleCheckedChange = (checked, value) => {
|
|
17646
17669
|
let newValues = [...currentValues];
|
|
@@ -17651,7 +17674,7 @@ const CheckboxGroupInput = (_a) => {
|
|
|
17651
17674
|
newValues = newValues.filter((v) => String(v) !== String(value));
|
|
17652
17675
|
}
|
|
17653
17676
|
setFieldValue(alias, newValues);
|
|
17654
|
-
setTimeout(() => setFieldTouched(alias, true), 0);
|
|
17677
|
+
setTimeout(() => setFieldTouched(alias, true, false), 0);
|
|
17655
17678
|
};
|
|
17656
17679
|
React.useEffect(() => {
|
|
17657
17680
|
if (inputtype === 'checkbox-neumorphic' && containerRef.current) {
|
|
@@ -17665,35 +17688,33 @@ const CheckboxGroupInput = (_a) => {
|
|
|
17665
17688
|
}
|
|
17666
17689
|
}, [inputtype]);
|
|
17667
17690
|
return (React.createElement(Column, { span: width, newLine: newRow },
|
|
17668
|
-
React.createElement(p$5, { direction: "
|
|
17691
|
+
React.createElement(p$5, { direction: "row", gap: "2", width: "100%", ref: containerRef, style: style, className: className },
|
|
17669
17692
|
inputtype === 'checkbox-neumorphic' && (React.createElement("style", { dangerouslySetInnerHTML: { __html: `
|
|
17670
17693
|
.neu-checkbox .rt-CheckboxButton {
|
|
17671
17694
|
background-color: var(--neu-bg);
|
|
17672
17695
|
border: none;
|
|
17673
17696
|
box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light);
|
|
17674
17697
|
border-radius: 4px;
|
|
17675
|
-
width: 20px;
|
|
17676
|
-
height: 20px;
|
|
17677
|
-
transition: all 0.2s ease;
|
|
17698
|
+
width: 20px; height: 20px; transition: all 0.2s ease;
|
|
17678
17699
|
}
|
|
17679
|
-
/* Checked State: Pressed In */
|
|
17680
17700
|
.neu-checkbox[data-state='checked'] .rt-CheckboxButton {
|
|
17681
17701
|
box-shadow: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light);
|
|
17682
|
-
background-color: var(--neu-bg);
|
|
17683
|
-
}
|
|
17684
|
-
.neu-checkbox .rt-CheckboxIndicator {
|
|
17685
|
-
color: var(--neu-check-color);
|
|
17702
|
+
background-color: var(--neu-bg);
|
|
17686
17703
|
}
|
|
17704
|
+
.neu-checkbox .rt-CheckboxIndicator { color: var(--neu-check-color); }
|
|
17687
17705
|
` } })),
|
|
17688
|
-
React.createElement(o$6, { columns: columns || (direction === 'row' ? 'repeat(auto-fit, minmax(100px, 1fr))' : '1'), gap: "3", style: neuVars }, inputOptions.map((inputoption) => {
|
|
17689
|
-
const
|
|
17690
|
-
|
|
17706
|
+
React.createElement(o$6, { columns: columns || (direction === 'row' ? 'repeat(auto-fit, minmax(100px, 1fr))' : '1'), gap: "3", style: neuVars, id: inputId }, inputOptions.map((inputoption, idx) => {
|
|
17707
|
+
const optionVal = String(inputoption.optionvalue);
|
|
17708
|
+
const isChecked = currentValues.some(val => String(val) === optionVal);
|
|
17709
|
+
const itemKey = `${alias}-chk-${inputoption.optionid || idx}`;
|
|
17710
|
+
const itemId = `${alias}FormInput${inputoption.optionid || idx}`;
|
|
17711
|
+
return (React.createElement(p$d, { as: "label", key: itemKey, size: "2", style: {
|
|
17691
17712
|
display: 'flex',
|
|
17692
17713
|
alignItems: 'center',
|
|
17693
17714
|
gap: '8px',
|
|
17694
17715
|
cursor: 'pointer'
|
|
17695
17716
|
} },
|
|
17696
|
-
React.createElement(c$2, { name: alias, id:
|
|
17717
|
+
React.createElement(c$2, { name: alias, id: itemId, disabled: readOnly, value: optionVal, checked: isChecked, onCheckedChange: (checked) => handleCheckedChange(checked, optionVal), variant: inputtype === 'checkbox-outline' ? 'soft' : 'surface', className: inputtype === 'checkbox-neumorphic' ? 'neu-checkbox' : '', style: Object.assign({}, (inputtype === 'checkbox-outline' ? {
|
|
17697
17718
|
border: isChecked ? '2px solid var(--accent-9)' : '2px solid var(--gray-8)',
|
|
17698
17719
|
backgroundColor: 'transparent'
|
|
17699
17720
|
} : {})) }),
|
|
@@ -17702,14 +17723,10 @@ const CheckboxGroupInput = (_a) => {
|
|
|
17702
17723
|
React.createElement("div", null,
|
|
17703
17724
|
React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: inputId }, inputLabel),
|
|
17704
17725
|
"\u00A0",
|
|
17705
|
-
isHinted
|
|
17706
|
-
React.createElement(
|
|
17707
|
-
React.createElement(
|
|
17708
|
-
|
|
17709
|
-
React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
|
|
17710
|
-
hasError ?
|
|
17711
|
-
React.createElement(React.Fragment, null,
|
|
17712
|
-
React.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || "Required field")) : null))));
|
|
17726
|
+
isHinted && (React.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
|
|
17727
|
+
React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
|
|
17728
|
+
React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
|
|
17729
|
+
hasError && (React.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : "Required field")))))));
|
|
17713
17730
|
};
|
|
17714
17731
|
|
|
17715
17732
|
function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
|
|
@@ -31354,7 +31371,8 @@ const DatePicker = ({ alias, inputLabel, inputtype = 'datepicker-outline', width
|
|
|
31354
31371
|
const fieldValue = formik.getIn(values, alias);
|
|
31355
31372
|
const fieldTouched = formik.getIn(touched, alias);
|
|
31356
31373
|
const fieldError = formik.getIn(errors, alias);
|
|
31357
|
-
const inputId = `${alias}FormInput
|
|
31374
|
+
const inputId = `${alias}FormInput`;
|
|
31375
|
+
const labelId = `${alias}InputLabel`;
|
|
31358
31376
|
const hasError = Boolean(fieldTouched && fieldError);
|
|
31359
31377
|
const containerRef = React.useRef(null);
|
|
31360
31378
|
const [neuVars, setNeuVars] = React.useState({});
|
|
@@ -31424,11 +31442,11 @@ const DatePicker = ({ alias, inputLabel, inputtype = 'datepicker-outline', width
|
|
|
31424
31442
|
React.createElement(DatePicker$1, { id: `${alias}DatePicker`, selected: (fieldValue && new Date(fieldValue)) || null, onChange: (val) => {
|
|
31425
31443
|
setFieldValue(alias, val);
|
|
31426
31444
|
setFieldTouched(alias, true, false);
|
|
31427
|
-
}, disabled: readOnly, placeholderText: placeholder, dateFormat: "MMM d, yyyy", customInput: React.createElement(u, { id: inputId, variant: "surface", style: getInputStyles() },
|
|
31445
|
+
}, disabled: readOnly, placeholderText: placeholder, dateFormat: "MMM d, yyyy", "aria-labelledby": labelId, customInput: React.createElement(u, { id: inputId, variant: "surface", style: getInputStyles() },
|
|
31428
31446
|
React.createElement(c, null,
|
|
31429
31447
|
React.createElement(Icon, { name: "calendar", height: "16", width: "16", style: { color: 'var(--gray-10)' } }))) }),
|
|
31430
31448
|
React.createElement("div", null,
|
|
31431
|
-
inputLabel && React.createElement(p$d, { size: "2", weight: "bold", as: "
|
|
31449
|
+
inputLabel && React.createElement(p$d, { id: labelId, size: "2", weight: "bold", as: "div", style: { display: 'inline' } }, inputLabel),
|
|
31432
31450
|
isHinted && (React.createElement(e, { content: hintText || "No hint", align: "start" },
|
|
31433
31451
|
React.createElement("a", { href: hintUrl || "#", target: "_blank", rel: "noopener noreferrer", style: { marginLeft: 6 } },
|
|
31434
31452
|
React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
|
|
@@ -31436,9 +31454,10 @@ const DatePicker = ({ alias, inputLabel, inputtype = 'datepicker-outline', width
|
|
|
31436
31454
|
};
|
|
31437
31455
|
|
|
31438
31456
|
const Dropdown = (_a) => {
|
|
31439
|
-
var { inputtype = 'dropdown-outline', alias, readOnly, width, inputLabel, placeholder, inputOptions, style, newRow, isHinted, hintText, hintUrl, errorText, className, formikContext } = _a
|
|
31457
|
+
var { inputtype = 'dropdown-outline', alias, readOnly, width, inputLabel, placeholder, inputOptions, style, newRow, isHinted, hintText, hintUrl, errorText, className, formikContext, onValueChange } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "inputOptions", "style", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "className", "formikContext", "onValueChange"]);
|
|
31440
31458
|
const defaultFormikContext = formik.useFormikContext();
|
|
31441
31459
|
const activeContext = formikContext || defaultFormikContext;
|
|
31460
|
+
const RESET_ID = `__RESET__${alias}`;
|
|
31442
31461
|
if (!activeContext) {
|
|
31443
31462
|
console.error(`Dropdown '${alias}' must be used within a Formik provider or receive a formikContext prop.`);
|
|
31444
31463
|
return null;
|
|
@@ -31450,7 +31469,7 @@ const Dropdown = (_a) => {
|
|
|
31450
31469
|
const hasError = Boolean(fieldTouched && fieldError);
|
|
31451
31470
|
const triggerRef = React.useRef(null);
|
|
31452
31471
|
const [neuVars, setNeuVars] = React.useState({});
|
|
31453
|
-
const inputId = `${alias}FormInput
|
|
31472
|
+
const inputId = `${alias}FormInput`;
|
|
31454
31473
|
const errorId = `${alias}-error`;
|
|
31455
31474
|
React.useEffect(() => {
|
|
31456
31475
|
if (inputtype === 'dropdown-neumorphic' && triggerRef.current) {
|
|
@@ -31481,7 +31500,6 @@ const Dropdown = (_a) => {
|
|
|
31481
31500
|
borderRadius: '4px',
|
|
31482
31501
|
boxShadow: '0 5px 15px rgba(0,0,0,0.2)',
|
|
31483
31502
|
};
|
|
31484
|
-
// OUTLINE
|
|
31485
31503
|
const outlineTrigger = {
|
|
31486
31504
|
backgroundColor: 'transparent',
|
|
31487
31505
|
border: '2px solid var(--gray-7)',
|
|
@@ -31494,7 +31512,6 @@ const Dropdown = (_a) => {
|
|
|
31494
31512
|
borderRadius: '4px',
|
|
31495
31513
|
boxShadow: 'none',
|
|
31496
31514
|
};
|
|
31497
|
-
// NEUMORPHIC
|
|
31498
31515
|
const neumorphicTrigger = {
|
|
31499
31516
|
backgroundColor: 'var(--neu-bg)',
|
|
31500
31517
|
color: 'var(--neu-text)',
|
|
@@ -31518,50 +31535,45 @@ const Dropdown = (_a) => {
|
|
|
31518
31535
|
const activeContentStyle = inputtype === 'dropdown' ? materialContent :
|
|
31519
31536
|
inputtype === 'dropdown-material' ? materialContent :
|
|
31520
31537
|
inputtype === 'dropdown-outline' ? outlineContent : Object.assign(Object.assign({}, neumorphicContent), neuVars);
|
|
31521
|
-
return (React.createElement(
|
|
31522
|
-
React.createElement(
|
|
31523
|
-
React.createElement(
|
|
31524
|
-
|
|
31525
|
-
|
|
31526
|
-
|
|
31527
|
-
|
|
31528
|
-
|
|
31529
|
-
|
|
31530
|
-
|
|
31531
|
-
|
|
31532
|
-
}
|
|
31533
|
-
|
|
31534
|
-
|
|
31535
|
-
|
|
31536
|
-
|
|
31537
|
-
|
|
31538
|
-
|
|
31539
|
-
|
|
31540
|
-
|
|
31541
|
-
|
|
31542
|
-
|
|
31543
|
-
|
|
31544
|
-
|
|
31545
|
-
|
|
31546
|
-
React.createElement(
|
|
31547
|
-
|
|
31548
|
-
|
|
31549
|
-
|
|
31550
|
-
React.createElement(
|
|
31551
|
-
|
|
31552
|
-
:
|
|
31553
|
-
|
|
31554
|
-
React.createElement("
|
|
31555
|
-
|
|
31556
|
-
|
|
31557
|
-
|
|
31558
|
-
React.createElement(
|
|
31559
|
-
|
|
31560
|
-
React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
|
|
31561
|
-
React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
|
|
31562
|
-
hasError ?
|
|
31563
|
-
React.createElement(React.Fragment, null,
|
|
31564
|
-
React.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : "Required field"))) : null)))));
|
|
31538
|
+
return (React.createElement(Column, { span: width, newLine: newRow },
|
|
31539
|
+
React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
|
|
31540
|
+
inputtype === 'dropdown-neumorphic' && (React.createElement("style", { dangerouslySetInnerHTML: { __html: `
|
|
31541
|
+
.neu-select-trigger[data-state='open'] {
|
|
31542
|
+
box-shadow: inset 6px 6px 12px var(--neu-shadow-dark),
|
|
31543
|
+
inset -6px -6px 12px var(--neu-shadow-light) !important;
|
|
31544
|
+
}
|
|
31545
|
+
.neu-select-item:hover {
|
|
31546
|
+
background-color: rgba(0,0,0,0.05) !important;
|
|
31547
|
+
cursor: pointer;
|
|
31548
|
+
}
|
|
31549
|
+
` } })),
|
|
31550
|
+
React.createElement(C$1, { name: alias, disabled: readOnly, value: fieldValue || "", onValueChange: (val) => {
|
|
31551
|
+
const finalVal = val === RESET_ID ? "" : val;
|
|
31552
|
+
setFieldValue(alias, finalVal);
|
|
31553
|
+
setTimeout(() => setFieldTouched(alias, true, false), 0);
|
|
31554
|
+
if (onValueChange)
|
|
31555
|
+
onValueChange(finalVal);
|
|
31556
|
+
}, onOpenChange: (isOpen) => {
|
|
31557
|
+
if (!isOpen) {
|
|
31558
|
+
setFieldTouched(alias, true, false);
|
|
31559
|
+
}
|
|
31560
|
+
} },
|
|
31561
|
+
React.createElement(u$1, { id: inputId, ref: triggerRef, variant: "ghost", placeholder: placeholder || "Select an option", className: `${inputtype === 'dropdown-neumorphic' ? 'neu-select-trigger' : ''} ${className || ''}`, style: Object.assign(Object.assign({}, activeTriggerStyle), style) }),
|
|
31562
|
+
React.createElement(g, { position: "popper", sideOffset: 5, style: activeContentStyle },
|
|
31563
|
+
React.createElement(v, { value: RESET_ID, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '', style: { color: 'var(--gray-10)', fontStyle: 'italic' } }, placeholder || "Select an option"),
|
|
31564
|
+
React.createElement(o$2, { size: "4", style: { margin: '4px 0', opacity: 0.5 } }),
|
|
31565
|
+
inputOptions.map((inputoption, idx) => (React.createElement(React.Fragment, { key: `${alias}-opt-${inputoption.optionid || idx}` }, inputoption.optionurl ?
|
|
31566
|
+
React.createElement(v, { id: String(inputoption.optionid) || `${alias}-item-${idx}`, value: String(inputoption.optionvalue) || `__empty_${idx}`, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' },
|
|
31567
|
+
React.createElement("a", { onClick: (e) => { e.stopPropagation(); openLink(inputoption.optionurl || "#"); }, style: { textDecoration: 'none', color: 'inherit' } }, inputoption.text))
|
|
31568
|
+
:
|
|
31569
|
+
React.createElement(v, { id: String(inputoption.optionid) || `${alias}-item-${idx}`, value: String(inputoption.optionvalue) || `__empty_${idx}`, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' }, inputoption.text)))))),
|
|
31570
|
+
React.createElement("div", null,
|
|
31571
|
+
React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: inputId }, inputLabel),
|
|
31572
|
+
"\u00A0",
|
|
31573
|
+
isHinted ? (React.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
|
|
31574
|
+
React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
|
|
31575
|
+
React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
|
|
31576
|
+
hasError ? (React.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : "Required field"))) : null))));
|
|
31565
31577
|
};
|
|
31566
31578
|
|
|
31567
31579
|
const DateRangePicker = ({ alias, inputLabel, inputtype = 'daterangepicker-outline', width = 12, newRow, placeholder = "Select date range", isHinted, hintText, hintUrl, errorText, readOnly, className, formikContext }) => {
|
|
@@ -31576,7 +31588,8 @@ const DateRangePicker = ({ alias, inputLabel, inputtype = 'daterangepicker-outli
|
|
|
31576
31588
|
const fieldTouched = formik.getIn(touched, alias);
|
|
31577
31589
|
const fieldError = formik.getIn(errors, alias);
|
|
31578
31590
|
const hasError = Boolean(fieldTouched && fieldError);
|
|
31579
|
-
const inputId = `${alias}FormInput
|
|
31591
|
+
const inputId = `${alias}FormInput`;
|
|
31592
|
+
const labelId = `${alias}InputLabel`;
|
|
31580
31593
|
const getDates = () => {
|
|
31581
31594
|
const val = fieldValue;
|
|
31582
31595
|
if (!val)
|
|
@@ -31688,11 +31701,11 @@ const DateRangePicker = ({ alias, inputLabel, inputtype = 'daterangepicker-outli
|
|
|
31688
31701
|
if (start && end) {
|
|
31689
31702
|
setFieldTouched(alias, true, false);
|
|
31690
31703
|
}
|
|
31691
|
-
}, disabled: readOnly, placeholderText: placeholder, dateFormat: "MMM d, yyyy", customInput: React.createElement(u, { id: inputId, variant: "surface", style: getInputStyles() },
|
|
31704
|
+
}, disabled: readOnly, placeholderText: placeholder, dateFormat: "MMM d, yyyy", "aria-labelledby": labelId, customInput: React.createElement(u, { id: inputId, variant: "surface", style: getInputStyles() },
|
|
31692
31705
|
React.createElement(c, null,
|
|
31693
31706
|
React.createElement(Icon, { name: "calendar", height: "16", width: "16", style: { color: 'var(--gray-10)' } }))) }),
|
|
31694
31707
|
React.createElement("div", null,
|
|
31695
|
-
inputLabel && React.createElement(p$d, { size: "2", weight: "bold", as: "
|
|
31708
|
+
inputLabel && React.createElement(p$d, { id: labelId, size: "2", weight: "bold", as: "div", style: { display: 'inline' } }, inputLabel),
|
|
31696
31709
|
isHinted && (React.createElement(e, { content: hintText || "No hint", align: "start" },
|
|
31697
31710
|
React.createElement("a", { href: hintUrl || "#", target: "_blank", rel: "noopener noreferrer", style: { marginLeft: 6 } },
|
|
31698
31711
|
React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
|
|
@@ -32033,8 +32046,8 @@ const ImageOutput = ({ id, src, alt = "Image", design = 'outline', layout = 'nor
|
|
|
32033
32046
|
const containerStyles = getStyles(design, layout);
|
|
32034
32047
|
const iconColor = design === 'neumorphic' ? '#555' : 'var(--gray-9)';
|
|
32035
32048
|
const content = (React.createElement(p$8, { className: className, style: Object.assign(Object.assign(Object.assign({}, containerStyles), { width, height: height || 'auto' }), style), onClick: onClick }, src ? (React.createElement("img", { id: String(id), src: src, alt: alt, style: {
|
|
32036
|
-
width: '
|
|
32037
|
-
height: '
|
|
32049
|
+
width: '333px',
|
|
32050
|
+
height: '333px',
|
|
32038
32051
|
objectFit: 'cover',
|
|
32039
32052
|
display: 'block',
|
|
32040
32053
|
} })) : (React.createElement(p$5, { align: "center", justify: "center", style: {
|
|
@@ -52521,64 +52534,53 @@ const RadioGroupInput = (_a) => {
|
|
|
52521
52534
|
return (React.createElement(Column, { span: width, newLine: newRow },
|
|
52522
52535
|
React.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: className },
|
|
52523
52536
|
inputtype === 'radio-neumorphic' && (React.createElement("style", { dangerouslySetInnerHTML: { __html: `
|
|
52524
|
-
/* Target the specific Radio Item button class */
|
|
52525
52537
|
.neu-radio .rt-RadioGroupItem {
|
|
52526
52538
|
background-color: var(--neu-bg);
|
|
52527
52539
|
border: none;
|
|
52528
|
-
/* Circular Shadows */
|
|
52529
52540
|
box-shadow: 4px 4px 8px var(--neu-shadow-dark), -4px -4px 8px var(--neu-shadow-light);
|
|
52530
52541
|
width: 20px;
|
|
52531
52542
|
height: 20px;
|
|
52532
52543
|
transition: all 0.2s ease;
|
|
52533
52544
|
}
|
|
52534
|
-
|
|
52535
|
-
/* Checked State: Inset Shadow (Pressed In) */
|
|
52536
52545
|
.neu-radio .rt-RadioGroupItem[data-state='checked'] {
|
|
52537
52546
|
box-shadow: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light);
|
|
52538
52547
|
background-color: var(--neu-bg);
|
|
52539
52548
|
}
|
|
52540
|
-
|
|
52541
|
-
/* The Inner Dot Indicator */
|
|
52542
52549
|
.neu-radio .rt-RadioGroupIndicator {
|
|
52543
52550
|
background-color: var(--neu-check-color);
|
|
52544
52551
|
width: 50%;
|
|
52545
52552
|
height: 50%;
|
|
52546
52553
|
border-radius: 50%;
|
|
52547
52554
|
}
|
|
52548
|
-
|
|
52549
|
-
/* Hover Effect */
|
|
52550
52555
|
.neu-radio .rt-RadioGroupItem:hover {
|
|
52551
52556
|
transform: scale(1.05);
|
|
52552
52557
|
}
|
|
52553
52558
|
.neu-radio .rt-RadioGroupItem[data-state='checked']:hover {
|
|
52554
|
-
transform: none;
|
|
52559
|
+
transform: none;
|
|
52555
52560
|
}
|
|
52556
52561
|
` } })),
|
|
52557
|
-
React.createElement(I$1, { name: alias, id: `${alias}FormInput`, "aria-
|
|
52562
|
+
React.createElement(I$1, { name: alias, id: `${alias}FormInput`, "aria-labelledby": `${alias}InputLabel`, disabled: readOnly, value: fieldValue !== undefined && fieldValue !== null ? String(fieldValue) : "", onValueChange: (val) => {
|
|
52558
52563
|
setFieldValue(alias, val);
|
|
52559
52564
|
setTimeout(() => setFieldTouched(alias, true, false), 0);
|
|
52560
52565
|
} },
|
|
52561
|
-
React.createElement(o$6, { columns: columns || (direction === 'row' ? 'repeat(auto-fit, minmax(100px, 1fr))' : '1'), gap: "3", style: neuVars }, inputOptions.map((inputoption) => {
|
|
52562
|
-
const
|
|
52563
|
-
|
|
52566
|
+
React.createElement(o$6, { columns: columns || (direction === 'row' ? 'repeat(auto-fit, minmax(100px, 1fr))' : '1'), gap: "3", style: neuVars }, inputOptions.map((inputoption, idx) => {
|
|
52567
|
+
const optionValue = String(inputoption.optionvalue);
|
|
52568
|
+
const isChecked = String(fieldValue) === optionValue;
|
|
52569
|
+
return (React.createElement(p$5, { asChild: true, key: `${alias}-radio-${idx}`, align: "center", gap: "2" },
|
|
52564
52570
|
React.createElement(p$d, { as: "label", size: "2", style: { cursor: 'pointer' } },
|
|
52565
|
-
React.createElement(y$1, { value:
|
|
52571
|
+
React.createElement(y$1, { value: optionValue, className: inputtype === 'radio-neumorphic' ? 'neu-radio' : '', style: Object.assign({}, (inputtype === 'radio-outline' ? {
|
|
52566
52572
|
border: isChecked ? '2px solid var(--accent-9)' : '2px solid var(--gray-8)',
|
|
52567
52573
|
backgroundColor: 'transparent'
|
|
52568
52574
|
} : {})) }),
|
|
52569
52575
|
React.createElement("span", { style: { userSelect: 'none' } }, inputoption.text))));
|
|
52570
52576
|
}))),
|
|
52571
52577
|
React.createElement("div", null,
|
|
52572
|
-
React.createElement(p$d, { id: `${alias}InputLabel`, as: "
|
|
52578
|
+
React.createElement(p$d, { id: `${alias}InputLabel`, as: "div", size: "2", weight: "bold" }, inputLabel),
|
|
52573
52579
|
"\u00A0",
|
|
52574
|
-
isHinted
|
|
52575
|
-
React.createElement(
|
|
52576
|
-
React.createElement(
|
|
52577
|
-
|
|
52578
|
-
React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
|
|
52579
|
-
hasError ?
|
|
52580
|
-
React.createElement(React.Fragment, null,
|
|
52581
|
-
React.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`))) : null))));
|
|
52580
|
+
isHinted && (React.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
|
|
52581
|
+
React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
|
|
52582
|
+
React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
|
|
52583
|
+
hasError && (React.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`)))))));
|
|
52582
52584
|
};
|
|
52583
52585
|
|
|
52584
52586
|
const OptionSelect = (_a) => {
|
|
@@ -52595,6 +52597,7 @@ const OptionSelect = (_a) => {
|
|
|
52595
52597
|
const fieldValue = formik.getIn(values, alias);
|
|
52596
52598
|
const fieldTouched = formik.getIn(touched, alias);
|
|
52597
52599
|
const fieldError = formik.getIn(errors, alias);
|
|
52600
|
+
const RESET_ID = `__RESET__${alias}`;
|
|
52598
52601
|
const hasError = Boolean(fieldTouched && fieldError);
|
|
52599
52602
|
const errorId = `${alias}-error`;
|
|
52600
52603
|
React.useEffect(() => {
|
|
@@ -52674,7 +52677,7 @@ const OptionSelect = (_a) => {
|
|
|
52674
52677
|
}
|
|
52675
52678
|
` } })),
|
|
52676
52679
|
React.createElement(C$1, { name: alias, disabled: readOnly, value: fieldValue || "", onValueChange: (val) => {
|
|
52677
|
-
const finalVal = val ===
|
|
52680
|
+
const finalVal = val === RESET_ID ? "" : val;
|
|
52678
52681
|
setFieldValue(alias, finalVal);
|
|
52679
52682
|
setTimeout(() => setFieldTouched(alias, true, false), 0);
|
|
52680
52683
|
if (props.onValueChange)
|
|
@@ -52686,7 +52689,7 @@ const OptionSelect = (_a) => {
|
|
|
52686
52689
|
} },
|
|
52687
52690
|
React.createElement(u$1, Object.assign({ id: `${alias}FormInput`, ref: triggerRef, variant: "ghost", placeholder: placeholder || "Select an option", className: `${inputtype === 'dropdown-neumorphic' ? 'neu-select-trigger' : ''} ${props.className || ''}`, style: Object.assign(Object.assign({}, activeTriggerStyle), style) }, props)),
|
|
52688
52691
|
React.createElement(g, { position: "popper", sideOffset: 5, style: activeContentStyle },
|
|
52689
|
-
React.createElement(v, { value:
|
|
52692
|
+
React.createElement(v, { value: RESET_ID, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '', style: { color: 'var(--gray-10)', fontStyle: 'italic' } }, placeholder || "Select an option"),
|
|
52690
52693
|
React.createElement(o$2, { size: "4", style: { margin: '4px 0', opacity: 0.5 } }),
|
|
52691
52694
|
inputOptions.map((inputoption) => (React.createElement(React.Fragment, { key: inputoption.optionid || crypto.randomUUID() }, inputoption.optionurl ? (React.createElement(v, { id: String(inputoption.optionid) || '', value: String(inputoption.optionvalue) || `__empty_${inputoption.optionid}`, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' },
|
|
52692
52695
|
React.createElement("a", { onClick: (e) => { e.stopPropagation(); openLink(inputoption.optionurl || "#"); }, style: { textDecoration: 'none', color: 'inherit' } }, inputoption.text))) : (React.createElement(v, { id: String(inputoption.optionid) || '', value: String(inputoption.optionvalue) || `__empty_${inputoption.optionid}`, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' }, inputoption.text))))))),
|
|
@@ -52833,6 +52836,7 @@ const SliderInput = (_a) => {
|
|
|
52833
52836
|
const hasError = Boolean(fieldTouched && fieldError);
|
|
52834
52837
|
const containerRef = React.useRef(null);
|
|
52835
52838
|
const [neuVars, setNeuVars] = React.useState({});
|
|
52839
|
+
const labelId = `${alias}InputLabel`;
|
|
52836
52840
|
const errorId = `${alias}-error`;
|
|
52837
52841
|
React.useEffect(() => {
|
|
52838
52842
|
if (inputtype === 'slider-neumorphic' && containerRef.current) {
|
|
@@ -52906,13 +52910,13 @@ const SliderInput = (_a) => {
|
|
|
52906
52910
|
box-shadow: none;
|
|
52907
52911
|
}
|
|
52908
52912
|
` } }),
|
|
52909
|
-
React.createElement(s, { name: alias, id: `${alias}FormInput`, disabled: readOnly, "aria-
|
|
52913
|
+
React.createElement(s, { name: alias, id: `${alias}FormInput`, disabled: readOnly, "aria-labelledby": labelId, min: minvalue, max: maxvalue, step: stepvalue, value: fieldValue, onValueChange: (val) => {
|
|
52910
52914
|
setFieldValue(alias, val[0]);
|
|
52911
52915
|
}, onValueCommit: () => {
|
|
52912
52916
|
setFieldTouched(alias, true, false);
|
|
52913
52917
|
}, className: inputtype === 'slider-neumorphic' ? 'neu-slider' : inputtype === 'slider-outline' ? 'outline-slider' : '', style: neuVars }),
|
|
52914
52918
|
React.createElement("div", null,
|
|
52915
|
-
React.createElement(p$d, { id:
|
|
52919
|
+
React.createElement(p$d, { id: labelId, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel),
|
|
52916
52920
|
"\u00A0",
|
|
52917
52921
|
isHinted ?
|
|
52918
52922
|
React.createElement(React.Fragment, null,
|
|
@@ -52936,18 +52940,13 @@ const RangeSlider = (_a) => {
|
|
|
52936
52940
|
const fieldVal = formik.getIn(values, alias);
|
|
52937
52941
|
const fieldTouched = formik.getIn(touched, alias);
|
|
52938
52942
|
const fieldError = formik.getIn(errors, alias);
|
|
52939
|
-
// Range Formik Logic
|
|
52940
|
-
// Synopsis
|
|
52941
|
-
// Radix slider component requires an array.
|
|
52942
|
-
// If field value is [20, 80] pass [20, 80].
|
|
52943
|
-
// If field value is 50 we pass [50].
|
|
52944
|
-
// If field value is undefined, default to [min] or [min, max].
|
|
52945
52943
|
const isRange = Array.isArray(fieldVal);
|
|
52946
52944
|
const sliderValue = isRange ? fieldVal : [fieldVal || minvalue];
|
|
52947
52945
|
const hasError = Boolean(fieldTouched && fieldError);
|
|
52948
52946
|
const containerRef = React.useRef(null);
|
|
52949
52947
|
const [neuVars, setNeuVars] = React.useState({});
|
|
52950
52948
|
const errorId = `${alias}-error`;
|
|
52949
|
+
const labelId = `${alias}InputLabel`;
|
|
52951
52950
|
React.useEffect(() => {
|
|
52952
52951
|
if (inputtype === 'range-neumorphic' && containerRef.current) {
|
|
52953
52952
|
const parentBg = getNearestParentBackground(containerRef.current.parentElement);
|
|
@@ -52971,13 +52970,9 @@ const RangeSlider = (_a) => {
|
|
|
52971
52970
|
box-shadow: inset 2px 2px 5px var(--neu-shadow-dark), inset -2px -2px 5px var(--neu-shadow-light);
|
|
52972
52971
|
border-radius: 99px;
|
|
52973
52972
|
}
|
|
52974
|
-
.neu-slider .rt-SliderRange {
|
|
52975
|
-
background-color: var(--neu-accent);
|
|
52976
|
-
border-radius: 99px;
|
|
52977
|
-
}
|
|
52973
|
+
.neu-slider .rt-SliderRange { background-color: var(--neu-accent); border-radius: 99px; }
|
|
52978
52974
|
.neu-slider .rt-SliderThumb {
|
|
52979
|
-
background-color: var(--neu-bg);
|
|
52980
|
-
border: 2px solid var(--neu-bg);
|
|
52975
|
+
background-color: var(--neu-bg); border: 2px solid var(--neu-bg);
|
|
52981
52976
|
width: 24px; height: 24px;
|
|
52982
52977
|
box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light);
|
|
52983
52978
|
}
|
|
@@ -52985,31 +52980,22 @@ const RangeSlider = (_a) => {
|
|
|
52985
52980
|
.neu-slider .rt-SliderThumb:active { transform: scale(0.95); cursor: grabbing; }
|
|
52986
52981
|
|
|
52987
52982
|
/* Outline */
|
|
52988
|
-
.outline-slider .rt-SliderTrack {
|
|
52989
|
-
height: 4px; background-color: transparent; border: 1px solid var(--gray-8);
|
|
52990
|
-
}
|
|
52983
|
+
.outline-slider .rt-SliderTrack { height: 4px; background-color: transparent; border: 1px solid var(--gray-8); }
|
|
52991
52984
|
.outline-slider .rt-SliderRange { background-color: var(--accent-9); }
|
|
52992
|
-
.outline-slider .rt-SliderThumb {
|
|
52993
|
-
background-color: white; border: 2px solid var(--accent-9); box-shadow: none;
|
|
52994
|
-
}
|
|
52985
|
+
.outline-slider .rt-SliderThumb { background-color: white; border: 2px solid var(--accent-9); box-shadow: none; }
|
|
52995
52986
|
` } }),
|
|
52996
|
-
React.createElement(s, { name: alias, id: `${alias}FormInput`, disabled: readOnly, "aria-
|
|
52997
|
-
// LOGIC SYNOPSIS:
|
|
52998
|
-
// If Range, set value as array.
|
|
52999
|
-
// If Slider, set value as first value.
|
|
52987
|
+
React.createElement(s, { name: alias, id: `${alias}FormInput`, disabled: readOnly, "aria-labelledby": labelId, min: minvalue, max: maxvalue, step: stepvalue, minStepsBetweenThumbs: minStepsBetweenThumbs, value: sliderValue, onValueChange: (val) => {
|
|
53000
52988
|
setFieldValue(alias, isRange ? val : val[0]);
|
|
53001
52989
|
}, onValueCommit: () => setFieldTouched(alias, true, false), className: inputtype === 'range-neumorphic' ? 'neu-slider' : inputtype === 'range-outline' ? 'outline-slider' : '', style: neuVars }),
|
|
53002
52990
|
React.createElement("div", null,
|
|
53003
|
-
React.createElement(p$d, { id:
|
|
52991
|
+
React.createElement(p$d, { id: labelId, as: "div", size: "2", weight: "bold", style: { display: 'inline' } }, inputLabel),
|
|
53004
52992
|
"\u00A0",
|
|
53005
|
-
isHinted
|
|
53006
|
-
React.createElement(
|
|
53007
|
-
React.createElement(
|
|
53008
|
-
React.createElement(
|
|
53009
|
-
|
|
53010
|
-
|
|
53011
|
-
React.createElement(React.Fragment, null,
|
|
53012
|
-
React.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`))) : null))));
|
|
52993
|
+
isHinted && (React.createElement(React.Fragment, null,
|
|
52994
|
+
React.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
|
|
52995
|
+
React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
|
|
52996
|
+
React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } }))))),
|
|
52997
|
+
hasError && (React.createElement(React.Fragment, null,
|
|
52998
|
+
React.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`))))))));
|
|
53013
52999
|
};
|
|
53014
53000
|
|
|
53015
53001
|
const Toggle = (_a) => {
|
|
@@ -53180,7 +53166,7 @@ const ConditionalTrigger = (_a) => {
|
|
|
53180
53166
|
const fieldValue = formik.getIn(values, alias);
|
|
53181
53167
|
const fieldTouched = formik.getIn(touched, alias);
|
|
53182
53168
|
const fieldError = formik.getIn(errors, alias);
|
|
53183
|
-
const inputId = `${alias}FormInput
|
|
53169
|
+
const inputId = `${alias}FormInput`;
|
|
53184
53170
|
const errorId = `${alias}-error`;
|
|
53185
53171
|
// Trigger (Equality) Logic :: If current Field value === trigger value
|
|
53186
53172
|
const isOpen = fieldValue === triggerValue;
|
|
@@ -53191,19 +53177,19 @@ const ConditionalTrigger = (_a) => {
|
|
|
53191
53177
|
const isNeumorphic = inputtype.includes('neumorphic');
|
|
53192
53178
|
const hasError = Boolean(fieldTouched && fieldError);
|
|
53193
53179
|
const renderTrigger = () => {
|
|
53194
|
-
|
|
53195
|
-
|
|
53196
|
-
|
|
53197
|
-
|
|
53198
|
-
|
|
53199
|
-
|
|
53200
|
-
|
|
53201
|
-
|
|
53202
|
-
|
|
53203
|
-
|
|
53204
|
-
|
|
53205
|
-
|
|
53206
|
-
|
|
53180
|
+
if (inputtype.includes('conditionalcheckbox') || inputtype.includes('conditional-checkbox')) {
|
|
53181
|
+
return (React.createElement(p$5, { align: "center", gap: "2", style: { cursor: 'pointer' } },
|
|
53182
|
+
React.createElement(c$2, { name: alias, disabled: readOnly, checked: fieldValue === true, onCheckedChange: (checked) => handleChange(!!checked), id: inputId })));
|
|
53183
|
+
}
|
|
53184
|
+
else if (inputtype.includes('conditionalselect') || inputtype.includes('conditional-select')) {
|
|
53185
|
+
return (React.createElement(p$5, { direction: "column", gap: "1", style: { width: '100%' } },
|
|
53186
|
+
React.createElement(C$1, { name: alias, disabled: readOnly, value: fieldValue !== undefined ? String(fieldValue) : undefined, onValueChange: handleChange },
|
|
53187
|
+
React.createElement(u$1, { id: inputId, variant: isNeumorphic ? 'soft' : 'surface', style: { width: '100%' }, placeholder: placeholder || "Select" }),
|
|
53188
|
+
React.createElement(g, null, inputOptions.map((inputoption, idx) => (React.createElement(v, { key: `${alias}-opt-${inputoption.optionid || idx}`, value: String(inputoption.optionvalue) }, inputoption.text)))))));
|
|
53189
|
+
}
|
|
53190
|
+
else {
|
|
53191
|
+
return (React.createElement(p$5, { justify: "between", align: "center", style: { width: '100%' } },
|
|
53192
|
+
React.createElement(i$1, { id: inputId, name: alias, disabled: readOnly, checked: fieldValue === true, onCheckedChange: (checked) => handleChange(!!checked), variant: isNeumorphic ? 'soft' : 'surface' })));
|
|
53207
53193
|
}
|
|
53208
53194
|
};
|
|
53209
53195
|
const containerStyle = getDesignStyles(inputtype, isOpen);
|
|
@@ -53214,20 +53200,16 @@ const ConditionalTrigger = (_a) => {
|
|
|
53214
53200
|
React.createElement("div", { style: animationStyles.inner },
|
|
53215
53201
|
React.createElement(p$8, { style: {
|
|
53216
53202
|
paddingTop: '8px',
|
|
53217
|
-
borderTop: isOpen && !isNeumorphic ? '1px dashed var(--gray-6)' : 'none'
|
|
53218
|
-
} },
|
|
53219
|
-
|
|
53203
|
+
borderTop: isOpen && !isNeumorphic ? '1px dashed var(--gray-6)' : 'none',
|
|
53204
|
+
} },
|
|
53205
|
+
React.createElement("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: '16px', width: '100%' } }, children)))),
|
|
53206
|
+
React.createElement("div", { style: { marginTop: '8px' } },
|
|
53220
53207
|
React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: inputId, style: { cursor: 'pointer' } }, inputLabel),
|
|
53221
53208
|
"\u00A0",
|
|
53222
|
-
isHinted
|
|
53223
|
-
React.createElement(
|
|
53224
|
-
React.createElement(
|
|
53225
|
-
|
|
53226
|
-
React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
|
|
53227
|
-
hasError ?
|
|
53228
|
-
React.createElement(React.Fragment, null,
|
|
53229
|
-
React.createElement("p", { id: errorId, className: 'core-input-label-error' }, typeof fieldError === 'string' ? React.createElement(React.Fragment, null, errorText || "Required field")
|
|
53230
|
-
: 'Invalid file selection')) : null))));
|
|
53209
|
+
isHinted && (React.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
|
|
53210
|
+
React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
|
|
53211
|
+
React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
|
|
53212
|
+
hasError && (React.createElement("p", { id: errorId, className: 'core-input-label-error' }, typeof fieldError === 'string' ? React.createElement(React.Fragment, null, errorText || "Required field") : 'Invalid selection'))))));
|
|
53231
53213
|
};
|
|
53232
53214
|
|
|
53233
53215
|
const Row = ({ children, className, gap = "4" }) => {
|
|
@@ -53356,7 +53338,7 @@ const AccordionItem = ({ sectionId, title, children, disabled = false, icon }) =
|
|
|
53356
53338
|
React.createElement(p$d, { size: "3", weight: "bold", style: { color: 'var(--accordion-title-color, var(--gray-12))' } }, title)),
|
|
53357
53339
|
React.createElement(Icon, { name: "chevrondown", height: "20", width: "20", className: "v-accordion-chevron" }))),
|
|
53358
53340
|
React.createElement(Content2$3, { className: "v-accordion-content", style: { overflow: 'hidden' } },
|
|
53359
|
-
React.createElement("div", { style: { padding: '
|
|
53341
|
+
React.createElement("div", { style: { padding: '24px 16px 24px 16px' } },
|
|
53360
53342
|
React.createElement(p$d, { size: "2", color: "gray", as: "div" }, children)))));
|
|
53361
53343
|
};
|
|
53362
53344
|
|
|
@@ -53516,7 +53498,7 @@ const Codex = ({ design = 'outline', defaultStepId, brandColor, width = 12, newR
|
|
|
53516
53498
|
step.description && (React.createElement(p$d, { size: "1", color: "gray", style: { display: 'block', marginTop: '4px' } }, step.description)))),
|
|
53517
53499
|
index < steps.length - 1 && (React.createElement("div", { className: `v-step-line ${isCompleted ? 'completed' : 'pending'}` }))));
|
|
53518
53500
|
}))),
|
|
53519
|
-
React.createElement(p$8, { style: { position: 'relative' } }, children)))));
|
|
53501
|
+
React.createElement(p$8, { style: { position: 'relative', marginTop: '33px', marginBottom: '33px' } }, children)))));
|
|
53520
53502
|
};
|
|
53521
53503
|
const CodexItem = ({ stepId, children, }) => {
|
|
53522
53504
|
const { activeStepId } = React.useContext(CodexContext);
|
|
@@ -53525,7 +53507,7 @@ const CodexItem = ({ stepId, children, }) => {
|
|
|
53525
53507
|
return (React.createElement("div", { className: "v-step-content-animation", style: { width: '100%' } }, children));
|
|
53526
53508
|
};
|
|
53527
53509
|
|
|
53528
|
-
const CodexControls = ({ nextStepId, prevStepId, nextLabel = "Continue", prevLabel = "Back", finishLabel = "Submit", prevIcon = "doublearrowleft", nextIcon = "doublearrowright", finishIcon = "paperplane", onSubmit =
|
|
53510
|
+
const CodexControls = ({ nextStepId, prevStepId, nextLabel = "Continue", prevLabel = "Back", finishLabel = "Submit", prevIcon = "doublearrowleft", nextIcon = "doublearrowright", finishIcon = "paperplane", onSubmit = true, onNext, onPrev, onFinish }) => {
|
|
53529
53511
|
const { setActiveStepId, brandColor } = useStepper();
|
|
53530
53512
|
const handlePrev = () => {
|
|
53531
53513
|
if (onPrev)
|
|
@@ -53567,11 +53549,12 @@ const SectionTitle = ({ title, width = 12, newRow = true, size = "5", subsize =
|
|
|
53567
53549
|
center: 'center',
|
|
53568
53550
|
right: 'end'
|
|
53569
53551
|
};
|
|
53570
|
-
return (React.createElement(Column, { span: width, newLine: newRow },
|
|
53552
|
+
return (React.createElement(Column, { span: width, newLine: newRow, style: { marginBottom: '23px', marginTop: '23px' } },
|
|
53571
53553
|
React.createElement(p$5, { direction: "column", gap: "2", className: className, style: {
|
|
53572
53554
|
width: '100%',
|
|
53573
53555
|
boxSizing: 'border-box',
|
|
53574
|
-
|
|
53556
|
+
marginTop: '23px',
|
|
53557
|
+
marginBottom: '23px',
|
|
53575
53558
|
textAlign: align,
|
|
53576
53559
|
backgroundColor: backgroundColor || 'transparent',
|
|
53577
53560
|
padding: backgroundColor ? 'var(--space-3) var(--space-4)' : '0',
|
|
@@ -53638,158 +53621,114 @@ const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice',
|
|
|
53638
53621
|
if (readOnlyMode)
|
|
53639
53622
|
readOnly = true;
|
|
53640
53623
|
const normalizedType = inputType.toLocaleLowerCase();
|
|
53624
|
+
const layoutProps = {
|
|
53625
|
+
alias: inputAlias,
|
|
53626
|
+
width: inputWidth,
|
|
53627
|
+
inputLabel: inputLabel,
|
|
53628
|
+
key: inputUID,
|
|
53629
|
+
newRow: newRow,
|
|
53630
|
+
readOnly: readOnly,
|
|
53631
|
+
isHinted: isHinted,
|
|
53632
|
+
hintText: hintText,
|
|
53633
|
+
hintUrl: hintUrl,
|
|
53634
|
+
errorText: errorText
|
|
53635
|
+
};
|
|
53641
53636
|
switch (true) {
|
|
53642
53637
|
case avatarInputType.includes(normalizedType):
|
|
53643
|
-
return React.createElement(AvatarInput, {
|
|
53638
|
+
return React.createElement(AvatarInput, Object.assign({}, layoutProps));
|
|
53644
53639
|
case buttonInputType.includes(normalizedType):
|
|
53645
|
-
return React.createElement(ButtonInput, {
|
|
53640
|
+
return React.createElement(ButtonInput, Object.assign({}, layoutProps), defaultValue);
|
|
53646
53641
|
case checkboxInputType.includes(normalizedType):
|
|
53647
|
-
return React.createElement(CheckboxGroupInput, {
|
|
53642
|
+
return React.createElement(CheckboxGroupInput, Object.assign({}, layoutProps, { inputOptions: inputOptions || [InputOptionsPlaceholder] }));
|
|
53648
53643
|
case conditionalInputType.includes(normalizedType):
|
|
53649
|
-
return React.createElement(ConditionalTrigger, {
|
|
53644
|
+
return React.createElement(ConditionalTrigger, Object.assign({}, layoutProps, { inputOptions: inputOptions, triggerValue: triggerValue, children: toggledInput }));
|
|
53650
53645
|
case datePickerInputType.includes(normalizedType):
|
|
53651
|
-
return React.createElement(DatePicker, {
|
|
53646
|
+
return React.createElement(DatePicker, Object.assign({}, layoutProps, { placeholder: inputPlaceholder }));
|
|
53652
53647
|
case dateRangePickerInputType.includes(normalizedType):
|
|
53653
|
-
return React.createElement(DateRangePicker, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
53654
53648
|
case dateTimePickerInputType.includes(normalizedType):
|
|
53655
|
-
return React.createElement(DateRangePicker, {
|
|
53649
|
+
return React.createElement(DateRangePicker, Object.assign({}, layoutProps));
|
|
53656
53650
|
case dropdownInputType.includes(normalizedType):
|
|
53657
|
-
return React.createElement(Dropdown, {
|
|
53651
|
+
return React.createElement(Dropdown, Object.assign({}, layoutProps, { inputOptions: inputOptions || [InputOptionsPlaceholder] }));
|
|
53658
53652
|
case fileInputType.includes(normalizedType):
|
|
53659
|
-
return React.createElement(File$1, {
|
|
53653
|
+
return React.createElement(File$1, Object.assign({}, layoutProps, { preview: true }));
|
|
53660
53654
|
case fileMultipleInputType.includes(normalizedType):
|
|
53661
|
-
return React.createElement(FileMultiple, {
|
|
53655
|
+
return React.createElement(FileMultiple, Object.assign({}, layoutProps, { placeholder: inputPlaceholder, preview: true }));
|
|
53662
53656
|
case imageOutputType.includes(normalizedType):
|
|
53663
|
-
return React.createElement(ImageOutput, { id: inputAlias, src: defaultValue, alt: inputPlaceholder, width: inputWidth, height: inputHeight });
|
|
53657
|
+
return React.createElement(ImageOutput, { id: inputAlias, src: defaultValue, alt: inputPlaceholder, width: inputWidth, height: inputHeight, key: inputUID });
|
|
53664
53658
|
case textInputType.includes(normalizedType):
|
|
53665
|
-
return React.createElement(Input$2, {
|
|
53659
|
+
return React.createElement(Input$2, Object.assign({}, layoutProps, { placeholder: inputPlaceholder }));
|
|
53666
53660
|
case passwordInputType.includes(normalizedType):
|
|
53667
|
-
return React.createElement(PasswordInput, {
|
|
53661
|
+
return React.createElement(PasswordInput, Object.assign({}, layoutProps, { placeholder: inputPlaceholder }));
|
|
53668
53662
|
case phoneInputType.includes(normalizedType):
|
|
53669
|
-
return React.createElement(PhoneInput, {
|
|
53663
|
+
return React.createElement(PhoneInput, Object.assign({}, layoutProps, { placeholder: inputPlaceholder }));
|
|
53670
53664
|
case creditCardInputType.includes(normalizedType):
|
|
53671
|
-
return React.createElement(CreditCardInput, {
|
|
53665
|
+
return React.createElement(CreditCardInput, Object.assign({}, layoutProps, { placeholder: inputPlaceholder }));
|
|
53672
53666
|
case currencyInputType.includes(normalizedType):
|
|
53673
|
-
return React.createElement(CurrencyInput, {
|
|
53667
|
+
return React.createElement(CurrencyInput, Object.assign({}, layoutProps, { placeholder: inputPlaceholder }));
|
|
53674
53668
|
case stockInputType.includes(normalizedType):
|
|
53675
|
-
return React.createElement(StockInput, {
|
|
53669
|
+
return React.createElement(StockInput, Object.assign({}, layoutProps, { placeholder: inputPlaceholder, defaultvalue: defaultValue }));
|
|
53676
53670
|
case radioInputType.includes(normalizedType):
|
|
53677
|
-
return React.createElement(RadioGroupInput, {
|
|
53671
|
+
return React.createElement(RadioGroupInput, Object.assign({}, layoutProps, { inputOptions: inputOptions || [InputOptionsPlaceholder] }));
|
|
53678
53672
|
case selectInputType.includes(normalizedType):
|
|
53679
|
-
return React.createElement(OptionSelect, {
|
|
53673
|
+
return React.createElement(OptionSelect, Object.assign({}, layoutProps, { inputOptions: inputOptions || [InputOptionsPlaceholder] }));
|
|
53680
53674
|
case selectMultipleInputType.includes(normalizedType):
|
|
53681
|
-
return React.createElement(MultipleSelect, {
|
|
53675
|
+
return React.createElement(MultipleSelect, Object.assign({}, layoutProps, { inputOptions: inputOptions || [InputOptionsPlaceholder] }));
|
|
53682
53676
|
case sliderInputType.includes(normalizedType):
|
|
53683
|
-
return React.createElement(SliderInput, {
|
|
53677
|
+
return React.createElement(SliderInput, Object.assign({}, layoutProps, { stepvalue: Number(stepValue), minvalue: Number(inputMinValue), maxvalue: Number(inputMaxValue) }));
|
|
53684
53678
|
case rangeSliderInputType.includes(normalizedType):
|
|
53685
|
-
return React.createElement(RangeSlider, {
|
|
53679
|
+
return React.createElement(RangeSlider, Object.assign({}, layoutProps, { stepvalue: Number(stepValue), minvalue: Number(inputMinValue), maxvalue: Number(inputMaxValue) }));
|
|
53686
53680
|
case toggleInputType.includes(normalizedType):
|
|
53687
|
-
return React.createElement(Toggle, {
|
|
53681
|
+
return React.createElement(Toggle, Object.assign({}, layoutProps, { icon: "layers" }));
|
|
53688
53682
|
default:
|
|
53689
|
-
return React.createElement(Input$2, {
|
|
53683
|
+
return React.createElement(Input$2, Object.assign({}, layoutProps, { placeholder: inputPlaceholder }));
|
|
53690
53684
|
}
|
|
53691
53685
|
};
|
|
53692
53686
|
const renderQueries = (queries) => {
|
|
53693
53687
|
if (!queries)
|
|
53694
53688
|
return null;
|
|
53695
|
-
return queries.map((xFormelement) =>
|
|
53696
|
-
|
|
53697
|
-
|
|
53689
|
+
return queries.map((xFormelement) => {
|
|
53690
|
+
const childInput = xFormelement.toggledInput ? inputAlphaTrion(xFormelement.toggledInput.inputAlias, xFormelement.toggledInput.inputType, xFormelement.toggledInput.inputWidth, xFormelement.toggledInput.inputLabel, String(xFormelement.toggledInput.minValue), String(xFormelement.toggledInput.maxValue), xFormelement.toggledInput.defaultValue, xFormelement.toggledInput.inputOptions, xFormelement.toggledInput.stepValue, xFormelement.toggledInput.inputHeight, null, null, xFormelement.toggledInput.newRow, xFormelement.toggledInput.inputPlaceholder, readOnlyMode, xFormelement.toggledInput.isHinted, xFormelement.toggledInput.hintText || "", xFormelement.toggledInput.hintUrl || "", xFormelement.toggledInput.errorText, String(xFormelement.toggledInput.queryId) || crypto.randomUUID()) : null;
|
|
53691
|
+
return inputAlphaTrion(xFormelement.inputAlias, xFormelement.inputType, xFormelement.inputWidth, xFormelement.inputLabel, String(xFormelement.minValue), String(xFormelement.maxValue), xFormelement.defaultValue, xFormelement.inputOptions, xFormelement.stepValue, xFormelement.inputHeight, childInput, xFormelement.triggerValue, xFormelement.newRow, xFormelement.inputPlaceholder, readOnlyMode, xFormelement.isHinted, xFormelement.hintText || "", xFormelement.hintUrl || "", xFormelement.errorText, String(xFormelement.queryId) || crypto.randomUUID());
|
|
53692
|
+
});
|
|
53698
53693
|
};
|
|
53699
53694
|
const renderDisplayMode = () => {
|
|
53700
53695
|
switch (displayMode) {
|
|
53701
53696
|
case 'dual':
|
|
53702
53697
|
return (React.createElement(React.Fragment, null,
|
|
53703
|
-
"
|
|
53704
|
-
|
|
53705
|
-
React.createElement("div", { style: {
|
|
53706
|
-
React.createElement("
|
|
53707
|
-
|
|
53708
|
-
|
|
53709
|
-
|
|
53710
|
-
|
|
53711
|
-
|
|
53712
|
-
|
|
53713
|
-
|
|
53714
|
-
|
|
53715
|
-
|
|
53716
|
-
|
|
53717
|
-
|
|
53718
|
-
|
|
53719
|
-
|
|
53720
|
-
|
|
53721
|
-
|
|
53722
|
-
}
|
|
53723
|
-
|
|
53724
|
-
.neu-toggle-state {
|
|
53725
|
-
display: none;
|
|
53726
|
-
}
|
|
53727
|
-
|
|
53728
|
-
.neu-indicator {
|
|
53729
|
-
height: 100%;
|
|
53730
|
-
width: 200%;
|
|
53731
|
-
background: var(--neu-bg);
|
|
53732
|
-
border-radius: 15px;
|
|
53733
|
-
transform: translate3d(-75%, 0, 0);
|
|
53734
|
-
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
|
|
53735
|
-
box-shadow:
|
|
53736
|
-
-8px -4px 8px 0px var(--neu-shadow-light),
|
|
53737
|
-
8px 4px 12px 0px var(--neu-shadow-dark);
|
|
53738
|
-
}
|
|
53739
|
-
|
|
53740
|
-
.neu-toggle-state:checked ~ .neu-indicator {
|
|
53741
|
-
transform: translate3d(25%, 0, 0);
|
|
53742
|
-
}
|
|
53743
|
-
` } }),
|
|
53744
|
-
React.createElement("input", { id: `teletraan1DualToggle`, className: "neu-toggle-state", type: "checkbox", checked: dualToggled, readOnly: true }),
|
|
53745
|
-
React.createElement("div", { className: "neu-indicator" })),
|
|
53746
|
-
React.createElement(Icon, { name: "layers", height: "20", width: "20", color: brandColor, style: {
|
|
53747
|
-
transition: 'color 0.3s ease',
|
|
53748
|
-
opacity: readOnlyMode ? 0.5 : 1,
|
|
53749
|
-
cursor: 'pointer'
|
|
53750
|
-
}, onClick: () => setDualToggled(!dualToggled) })),
|
|
53751
|
-
dualToggled ?
|
|
53752
|
-
React.createElement(React.Fragment, null,
|
|
53753
|
-
"Accordion Display",
|
|
53754
|
-
React.createElement(Accordion, { allowMultiple: true, brandcolor: brandColor, titleColor: '#ffffff' }, xFormModel.model.map((formsection) => (React.createElement(AccordionItem, { key: formsection.sectionId, sectionId: String(formsection.sectionId), title: formsection.title },
|
|
53755
|
-
React.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries)))))))
|
|
53756
|
-
:
|
|
53757
|
-
React.createElement(React.Fragment, null,
|
|
53758
|
-
"Codice Display",
|
|
53759
|
-
React.createElement(React.Fragment, { key: xFormModel.uuid }, xFormModel.model.map((formsection) => (React.createElement(React.Fragment, { key: formsection.sectionId || crypto.randomUUID() },
|
|
53760
|
-
React.createElement(SectionTitle, { title: formsection.title, icon: React.createElement(Icon, { name: String(formsection.icon) }) }),
|
|
53761
|
-
React.createElement(Row, null, renderQueries(formsection.queries))))))))));
|
|
53698
|
+
React.createElement("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '12px', marginBottom: '20px' } },
|
|
53699
|
+
React.createElement("span", { style: { fontWeight: 600 } }, "Dual Display"),
|
|
53700
|
+
React.createElement("div", { className: "neu-toggle-wrapper", style: Object.assign(Object.assign({}, neuVars), { opacity: readOnlyMode ? 0.6 : 1, pointerEvents: readOnlyMode ? 'none' : 'auto' }), onClick: () => setDualToggled(!dualToggled) },
|
|
53701
|
+
React.createElement("style", { dangerouslySetInnerHTML: { __html: `
|
|
53702
|
+
.neu-toggle-wrapper { isolation: isolate; position: relative; height: 30px; width: 60px; border-radius: 15px; overflow: hidden; cursor: pointer; background: var(--neu-bg); box-shadow: -8px -4px 8px 0px var(--neu-shadow-light), 8px 4px 12px 0px var(--neu-shadow-dark), 4px 4px 4px 0px var(--neu-shadow-dark) inset, -4px -4px 4px 0px var(--neu-shadow-light) inset; }
|
|
53703
|
+
.neu-toggle-state { display: none; }
|
|
53704
|
+
.neu-indicator { height: 100%; width: 200%; background: var(--neu-bg); border-radius: 15px; transform: translate3d(-75%, 0, 0); transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35); box-shadow: -8px -4px 8px 0px var(--neu-shadow-light), 8px 4px 12px 0px var(--neu-shadow-dark); }
|
|
53705
|
+
.neu-toggle-state:checked ~ .neu-indicator { transform: translate3d(25%, 0, 0); }
|
|
53706
|
+
` } }),
|
|
53707
|
+
React.createElement("input", { className: "neu-toggle-state", type: "checkbox", checked: dualToggled, readOnly: true }),
|
|
53708
|
+
React.createElement("div", { className: "neu-indicator" })),
|
|
53709
|
+
React.createElement(Icon, { name: "layers", height: "20", width: "20", color: brandColor, style: { opacity: readOnlyMode ? 0.5 : 1, cursor: 'pointer' }, onClick: () => setDualToggled(!dualToggled) })),
|
|
53710
|
+
dualToggled ?
|
|
53711
|
+
React.createElement(Accordion, { allowMultiple: true, brandcolor: brandColor, titleColor: '#ffffff' }, xFormModel.model.map((formsection) => (React.createElement(AccordionItem, { key: formsection.sectionId, sectionId: String(formsection.sectionId), title: formsection.title, icon: React.createElement(Icon, { name: formsection.icon || "fontfamily" }) },
|
|
53712
|
+
React.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries))))))
|
|
53713
|
+
:
|
|
53714
|
+
xFormModel.model.map((formsection) => (React.createElement(React.Fragment, { key: formsection.sectionId || crypto.randomUUID() },
|
|
53715
|
+
React.createElement(SectionTitle, { title: formsection.title, icon: React.createElement(Icon, { name: formsection.icon || "fontfamily" }) }),
|
|
53716
|
+
React.createElement(Row, null, renderQueries(formsection.queries)))))));
|
|
53762
53717
|
case 'accordion':
|
|
53763
|
-
return (React.createElement(React.
|
|
53764
|
-
|
|
53765
|
-
React.createElement(Accordion, { allowMultiple: true, brandcolor: brandColor, titleColor: '#ffffff' }, xFormModel.model.map((formsection) => (React.createElement(AccordionItem, { key: formsection.sectionId, sectionId: String(formsection.sectionId), title: formsection.title },
|
|
53766
|
-
React.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries))))))));
|
|
53718
|
+
return (React.createElement(Accordion, { allowMultiple: true, brandcolor: brandColor, titleColor: '#ffffff' }, xFormModel.model.map((formsection) => (React.createElement(AccordionItem, { key: formsection.sectionId, sectionId: String(formsection.sectionId), title: formsection.title, icon: React.createElement(Icon, { name: formsection.icon || "fontfamily" }) },
|
|
53719
|
+
React.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries)))))));
|
|
53767
53720
|
case 'codex':
|
|
53768
|
-
return (React.createElement(React.
|
|
53769
|
-
|
|
53770
|
-
React.createElement(
|
|
53771
|
-
const prevStepId = index > 0 ? String(array[index - 1].sectionId) : undefined;
|
|
53772
|
-
const nextStepId = index < array.length - 1 ? String(array[index + 1].sectionId) : undefined;
|
|
53773
|
-
return (React.createElement(CodexItem, { key: formsection.sectionId, stepId: String(formsection.sectionId), title: formsection.title },
|
|
53774
|
-
React.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries)),
|
|
53775
|
-
React.createElement(CodexControls, { prevStepId: prevStepId, nextStepId: nextStepId, onPrev: () => {
|
|
53776
|
-
console.log(`Teletraan-1 Codex :: ${formsection.title} :: onPrev()`);
|
|
53777
|
-
}, onNext: () => {
|
|
53778
|
-
console.log(`Teletraan-1 Codex :: ${formsection.title} :: onNext()`);
|
|
53779
|
-
}, onFinish: () => {
|
|
53780
|
-
console.log(`Teletraan-1 Codex :: ${formsection.title} :: onFinish()`);
|
|
53781
|
-
} })));
|
|
53782
|
-
}))));
|
|
53721
|
+
return (React.createElement(Codex, { brandColor: brandColor }, xFormModel.model.map((formsection, index, array) => (React.createElement(CodexItem, { key: formsection.sectionId, stepId: String(formsection.sectionId), title: formsection.title, icon: React.createElement(Icon, { name: formsection.icon || "fontfamily" }) },
|
|
53722
|
+
React.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries)),
|
|
53723
|
+
React.createElement(CodexControls, { prevStepId: index > 0 ? String(array[index - 1].sectionId) : undefined, nextStepId: index < array.length - 1 ? String(array[index + 1].sectionId) : undefined, onPrev: onPrev, onNext: onNext, onFinish: onFinish }))))));
|
|
53783
53724
|
case 'codice':
|
|
53784
53725
|
default:
|
|
53785
|
-
return (React.createElement(React.Fragment,
|
|
53786
|
-
|
|
53787
|
-
React.createElement(
|
|
53788
|
-
React.createElement(SectionTitle, { title: formsection.title, icon: React.createElement(Icon, { name: String(formsection.icon) }) }),
|
|
53789
|
-
React.createElement(Row, null, renderQueries(formsection.queries))))))));
|
|
53726
|
+
return (React.createElement(React.Fragment, { key: xFormModel.uuid }, xFormModel.model.map((formsection) => (React.createElement(React.Fragment, { key: formsection.sectionId || crypto.randomUUID() },
|
|
53727
|
+
React.createElement(SectionTitle, { backgroundColor: brandColor, title: formsection.title, icon: React.createElement(Icon, { name: String(formsection.icon) }) }),
|
|
53728
|
+
React.createElement(Row, null, renderQueries(formsection.queries)))))));
|
|
53790
53729
|
}
|
|
53791
53730
|
};
|
|
53792
|
-
return (React.createElement(
|
|
53731
|
+
return (React.createElement(React.Fragment, null, renderDisplayMode()));
|
|
53793
53732
|
};
|
|
53794
53733
|
|
|
53795
53734
|
// ==========================================
|
|
@@ -54021,7 +53960,8 @@ const DateTimePicker = ({ alias, inputLabel, inputtype = 'datetimepicker-outline
|
|
|
54021
53960
|
const fieldValue = formik.getIn(values, alias);
|
|
54022
53961
|
const fieldTouched = formik.getIn(touched, alias);
|
|
54023
53962
|
const fieldError = formik.getIn(errors, alias);
|
|
54024
|
-
const inputId = `${alias}FormInput
|
|
53963
|
+
const inputId = `${alias}FormInput`;
|
|
53964
|
+
const labelId = `${alias}InputLabel`;
|
|
54025
53965
|
const hasError = Boolean(fieldTouched && fieldError);
|
|
54026
53966
|
const containerRef = React.useRef(null);
|
|
54027
53967
|
const [neuVars, setNeuVars] = React.useState({});
|
|
@@ -54130,11 +54070,11 @@ const DateTimePicker = ({ alias, inputLabel, inputtype = 'datetimepicker-outline
|
|
|
54130
54070
|
React.createElement(DatePicker$1, { id: `${alias}DatePicker`, selected: (fieldValue && new Date(fieldValue)) || null, onChange: (val) => {
|
|
54131
54071
|
setFieldValue(alias, val);
|
|
54132
54072
|
setFieldTouched(alias, true, false);
|
|
54133
|
-
}, showTimeSelect: true, timeFormat: "HH:mm", timeIntervals: 15, dateFormat: "MMM d, yyyy h:mm aa", disabled: readOnly, placeholderText: placeholder, customInput: React.createElement(u, { id: inputId, variant: "surface", style: getInputStyles() },
|
|
54073
|
+
}, showTimeSelect: true, timeFormat: "HH:mm", timeIntervals: 15, dateFormat: "MMM d, yyyy h:mm aa", disabled: readOnly, placeholderText: placeholder, "aria-labelledby": labelId, customInput: React.createElement(u, { id: inputId, variant: "surface", style: getInputStyles() },
|
|
54134
54074
|
React.createElement(c, null,
|
|
54135
54075
|
React.createElement(Icon, { name: "clock", height: "16", width: "16", style: { color: 'var(--gray-10)' } }))) }),
|
|
54136
54076
|
React.createElement("div", null,
|
|
54137
|
-
inputLabel && React.createElement(p$d, { size: "2", weight: "bold", as: "
|
|
54077
|
+
inputLabel && React.createElement(p$d, { id: labelId, size: "2", weight: "bold", as: "div", style: { display: 'inline' } }, inputLabel),
|
|
54138
54078
|
isHinted && (React.createElement(e, { content: hintText || "No hint", align: "start" },
|
|
54139
54079
|
React.createElement("a", { href: hintUrl || "#", target: "_blank", rel: "noopener noreferrer", style: { marginLeft: 6 } },
|
|
54140
54080
|
React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
|