@emeraldemperaur/vector-sigma 1.4.27 → 1.4.28
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 +149 -81
- package/lib/index.esm.js +149 -81
- package/lib/types/teletraan1.d.ts +7 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -96,7 +96,7 @@ const App = () => {
|
|
|
96
96
|
|
|
97
97
|
<li><strong>🧩Exported UI Components</strong></br>
|
|
98
98
|
<p align="justify">Explicitly exported reusable form UI components with material, outline and neumorphic design variants from package entry point <code>src/index.ts</code> to enable developer-friendly use as lightweight component library.</p>
|
|
99
|
-
<p><em>Container, Row, Column, Theme, Accordion, AccordionItem, Codex, CodexItem, CodexControls, AvatarInput, ButtonInput, CheckboxGroupInput, ConditionalTrigger, DatePicker, DateRangePicker, DateTimePicker, Dropdown, File, FileMultiple, FlagIcon, Icon, Image, Input, PasswordInput, PhoneInput, CreditCardInput, CurrencyInput, StockInput, RadioGroupInput, OptionSelect, MultipleSelect, RangeSlider, SliderInput, Toggle, SectionTitle,
|
|
99
|
+
<p><em>Container, Row, Column, Theme, Accordion, AccordionItem, Codex, CodexItem, CodexControls, AvatarInput, ButtonInput, CheckboxGroupInput, ConditionalTrigger, DatePicker, DateRangePicker, DateTimePicker, Dropdown, File, FileMultiple, FlagIcon, Icon, Image, Input, PasswordInput, PhoneInput, CreditCardInput, CurrencyInput, StockInput, RadioGroupInput, OptionSelect, MultipleSelect, RangeSlider, SliderInput, Toggle, SectionTitle, Teletraan1 (Render Matrix)</em></p>
|
|
100
100
|
|
|
101
101
|
```javascript
|
|
102
102
|
import { Container, Column, Row, CheckboxGroup, Dropdown, File, RangeSlider }
|
package/lib/index.cjs
CHANGED
|
@@ -48518,30 +48518,6 @@ const SectionTitle = ({ title, width = 12, newRow = true, size = "5", subsize =
|
|
|
48518
48518
|
} })))));
|
|
48519
48519
|
};
|
|
48520
48520
|
|
|
48521
|
-
const avatarInputType = ["avatar", "avatarinput", "avatar-input", "input-avatar", "inputavatar"];
|
|
48522
|
-
const buttonInputType = ["button", "buttoninput", "button-input", "input-button", "inputbutton"];
|
|
48523
|
-
const checkboxInputType = ["checkbox", "checkboxes", "checkboxinput", "chechbox-input", "input-checkbox", "inputcheckbox"];
|
|
48524
|
-
const datePickerInputType = ["datepicker", "datepickerinput", "datepicker-input", "input-datepicker", "inputdatepicker"];
|
|
48525
|
-
const dateRangePickerInputType = ["daterangepicker", "daterangepickerinput", "daterangepicker-input", "input-daterangepicker", "inputdaterangepicker"];
|
|
48526
|
-
const dateTimePickerInputType = ["datetimepicker", "datetimepickerinput", "datetimepicker-input", "input-datetimepicker", "inputdatetimepicker"];
|
|
48527
|
-
const dropdownInputType = ["dropdown", "dropdowninput", "dropdown-input", "input-dropdown", "inputdropdown"];
|
|
48528
|
-
const fileInputType = ["file", "fileinput", "file-input", "input-file", "inputfile"];
|
|
48529
|
-
const fileMultipleInputType = ["filemultiple", "filemultipleinput", "filemultiple-input", "input-filemultiple", "inputfilemultiple"];
|
|
48530
|
-
const imageOutputType = ["image", "imageoutput", "image-output", "output-image", "outputimage"];
|
|
48531
|
-
const textInputType = ["text", "textinput", "text-input", "input-text", "inputtext"];
|
|
48532
|
-
const passwordInputType = ["password", "passwordinput", "password-input", "input-password", "inputpassword"];
|
|
48533
|
-
const phoneInputType = ["phone", "phoneinput", "phone-input", "input-phone", "inputphone"];
|
|
48534
|
-
const creditCardInputType = ["creditcard", "creditcardinput", "creditcard-input", "input-creditcard", "inputcreditcard"];
|
|
48535
|
-
const currencyInputType = ["currency", "currencyinput", "currency-input", "input-currency", "inputcurrency"];
|
|
48536
|
-
const stockInputType = ["stock", "stockinput", "stock-input", "input-stock", "inputstock"];
|
|
48537
|
-
const radioInputType = ["radio", "radioinput", "radio-input", "input-radio", "inputradio"];
|
|
48538
|
-
const selectInputType = ["select", "selectinput", "select-input", "input-select", "inputselect"];
|
|
48539
|
-
const selectMultipleInputType = ["selectmultiple", "selectmultipleinput", "selectmultiple-input", "input-selectmultiple", "inputselectmultiple"];
|
|
48540
|
-
const sliderInputType = ["slider", "sliderinput", "slider-input", "input-slider", "inputslider"];
|
|
48541
|
-
const rangeSliderInputType = ["range", "rangeslider", "rangeinput", "rangesliderinput", "rangeslider-input", "range-input", "input-rangeslider", "inputrangeslider"];
|
|
48542
|
-
const toggleInputType = ["toggle", "switch", "toggleinput", "toggle-input", "input-toggle", "inputtoggle"];
|
|
48543
|
-
const conditionalInputType = ["conditional", "conditionaltoggle", "conditionalcheckbox", "conditionalselect", "conditional-toggle", "conditional-select", "conditional-checkbox"];
|
|
48544
|
-
|
|
48545
48521
|
const Row = ({ children, className, gap = "4" }) => {
|
|
48546
48522
|
return (React.createElement(o$6, { columns: "12", gap: gap, width: "auto", className: className }, children));
|
|
48547
48523
|
};
|
|
@@ -48873,8 +48849,37 @@ const CodexControls = ({ nextStepId, prevStepId, nextLabel = "Continue", prevLab
|
|
|
48873
48849
|
finishLabel)))));
|
|
48874
48850
|
};
|
|
48875
48851
|
|
|
48876
|
-
const
|
|
48877
|
-
|
|
48852
|
+
const avatarInputType = ["avatar", "avatarinput", "avatar-input", "input-avatar", "inputavatar"];
|
|
48853
|
+
const buttonInputType = ["button", "buttoninput", "button-input", "input-button", "inputbutton"];
|
|
48854
|
+
const checkboxInputType = ["checkbox", "checkboxes", "checkboxinput", "chechbox-input", "input-checkbox", "inputcheckbox"];
|
|
48855
|
+
const datePickerInputType = ["datepicker", "datepickerinput", "datepicker-input", "input-datepicker", "inputdatepicker"];
|
|
48856
|
+
const dateRangePickerInputType = ["daterangepicker", "daterangepickerinput", "daterangepicker-input", "input-daterangepicker", "inputdaterangepicker"];
|
|
48857
|
+
const dateTimePickerInputType = ["datetimepicker", "datetimepickerinput", "datetimepicker-input", "input-datetimepicker", "inputdatetimepicker"];
|
|
48858
|
+
const dropdownInputType = ["dropdown", "dropdowninput", "dropdown-input", "input-dropdown", "inputdropdown"];
|
|
48859
|
+
const fileInputType = ["file", "fileinput", "file-input", "input-file", "inputfile"];
|
|
48860
|
+
const fileMultipleInputType = ["filemultiple", "filemultipleinput", "filemultiple-input", "input-filemultiple", "inputfilemultiple"];
|
|
48861
|
+
const imageOutputType = ["image", "imageoutput", "image-output", "output-image", "outputimage"];
|
|
48862
|
+
const textInputType = ["text", "textinput", "text-input", "input-text", "inputtext"];
|
|
48863
|
+
const passwordInputType = ["password", "passwordinput", "password-input", "input-password", "inputpassword"];
|
|
48864
|
+
const phoneInputType = ["phone", "phoneinput", "phone-input", "input-phone", "inputphone"];
|
|
48865
|
+
const creditCardInputType = ["creditcard", "creditcardinput", "creditcard-input", "input-creditcard", "inputcreditcard"];
|
|
48866
|
+
const currencyInputType = ["currency", "currencyinput", "currency-input", "input-currency", "inputcurrency"];
|
|
48867
|
+
const stockInputType = ["stock", "stockinput", "stock-input", "input-stock", "inputstock"];
|
|
48868
|
+
const radioInputType = ["radio", "radioinput", "radio-input", "input-radio", "inputradio"];
|
|
48869
|
+
const selectInputType = ["select", "selectinput", "select-input", "input-select", "inputselect"];
|
|
48870
|
+
const selectMultipleInputType = ["selectmultiple", "selectmultipleinput", "selectmultiple-input", "input-selectmultiple", "inputselectmultiple"];
|
|
48871
|
+
const sliderInputType = ["slider", "sliderinput", "slider-input", "input-slider", "inputslider"];
|
|
48872
|
+
const rangeSliderInputType = ["range", "rangeslider", "rangeinput", "rangesliderinput", "rangeslider-input", "range-input", "input-rangeslider", "inputrangeslider"];
|
|
48873
|
+
const toggleInputType = ["toggle", "switch", "toggleinput", "toggle-input", "input-toggle", "inputtoggle"];
|
|
48874
|
+
const conditionalInputType = ["conditional", "conditionaltoggle", "conditionalcheckbox", "conditionalselect", "conditional-toggle", "conditional-select", "conditional-checkbox"];
|
|
48875
|
+
|
|
48876
|
+
const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice', brandColor = "#000000" }) => {
|
|
48877
|
+
const [dualToggled, setDualToggled] = React.useState(false);
|
|
48878
|
+
const [neuVars] = React.useState({
|
|
48879
|
+
'--neu-bg': '#ecf0f3',
|
|
48880
|
+
'--neu-shadow-light': '#ffffff',
|
|
48881
|
+
'--neu-shadow-dark': '#d1d9e6'
|
|
48882
|
+
});
|
|
48878
48883
|
const inputAlphaTrion = (inputAlias, inputType, inputWidth, inputLabel, inputMinValue, inputMaxValue, defaultValue, inputOptions, stepValue, inputHeight, toggledInput, newRow, inputPlaceholder, readOnly, isHinted, hintText, hintUrl, errorText, inputUID) => {
|
|
48879
48884
|
if (inputWidth == null || inputWidth > 12)
|
|
48880
48885
|
inputWidth = 4;
|
|
@@ -48884,88 +48889,151 @@ const teletraan1 = (xFormModel, readOnlyMode, displayMode, brandColor = "#000000
|
|
|
48884
48889
|
inputUID = crypto.randomUUID();
|
|
48885
48890
|
if (readOnlyMode)
|
|
48886
48891
|
readOnly = true;
|
|
48892
|
+
const normalizedType = inputType.toLocaleLowerCase();
|
|
48887
48893
|
switch (true) {
|
|
48888
|
-
case avatarInputType.includes(
|
|
48894
|
+
case avatarInputType.includes(normalizedType):
|
|
48889
48895
|
return React.createElement(AvatarInput, { alias: inputAlias, width: inputWidth, inputLabel: inputLabel, key: inputUID, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, errorText: errorText });
|
|
48890
|
-
case buttonInputType.includes(
|
|
48891
|
-
return React.createElement(ButtonInput, { alias: inputAlias, width: inputWidth, readOnly: readOnly, newRow: newRow,
|
|
48892
|
-
case checkboxInputType.includes(
|
|
48896
|
+
case buttonInputType.includes(normalizedType):
|
|
48897
|
+
return React.createElement(ButtonInput, { alias: inputAlias, width: inputWidth, readOnly: readOnly, newRow: newRow, key: inputUID }, defaultValue);
|
|
48898
|
+
case checkboxInputType.includes(normalizedType):
|
|
48893
48899
|
return React.createElement(CheckboxGroupInput, { alias: inputAlias, width: inputWidth, inputLabel: inputLabel, inputOptions: inputOptions, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48894
|
-
case conditionalInputType.includes(
|
|
48900
|
+
case conditionalInputType.includes(normalizedType):
|
|
48895
48901
|
return React.createElement(ConditionalTrigger, { alias: inputAlias, width: inputWidth, inputLabel: inputLabel, inputOptions: inputOptions, newRow: newRow, readOnly: readOnly, isHinted: isHinted, triggerValue: defaultValue, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText, children: toggledInput });
|
|
48896
|
-
case datePickerInputType.includes(
|
|
48902
|
+
case datePickerInputType.includes(normalizedType):
|
|
48897
48903
|
return React.createElement(DatePicker, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, placeholder: inputPlaceholder, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48898
|
-
case dateRangePickerInputType.includes(
|
|
48904
|
+
case dateRangePickerInputType.includes(normalizedType):
|
|
48899
48905
|
return React.createElement(DateRangePicker, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48900
|
-
case dateTimePickerInputType.includes(
|
|
48906
|
+
case dateTimePickerInputType.includes(normalizedType):
|
|
48901
48907
|
return React.createElement(DateRangePicker, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48902
|
-
case dropdownInputType.includes(
|
|
48908
|
+
case dropdownInputType.includes(normalizedType):
|
|
48903
48909
|
return React.createElement(Dropdown, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, inputOptions: inputOptions, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48904
|
-
case fileInputType.includes(
|
|
48910
|
+
case fileInputType.includes(normalizedType):
|
|
48905
48911
|
return React.createElement(File$1, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText, preview: true });
|
|
48906
|
-
case fileMultipleInputType.includes(
|
|
48912
|
+
case fileMultipleInputType.includes(normalizedType):
|
|
48907
48913
|
return React.createElement(FileMultiple, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, placeholder: inputPlaceholder, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText, preview: true });
|
|
48908
|
-
case imageOutputType.includes(
|
|
48914
|
+
case imageOutputType.includes(normalizedType):
|
|
48909
48915
|
return React.createElement(ImageOutput, { id: inputAlias, src: defaultValue, alt: inputPlaceholder, width: inputWidth, height: inputHeight });
|
|
48910
|
-
case textInputType.includes(
|
|
48916
|
+
case textInputType.includes(normalizedType):
|
|
48911
48917
|
return React.createElement(Input$2, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, placeholder: inputPlaceholder, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48912
|
-
case passwordInputType.includes(
|
|
48918
|
+
case passwordInputType.includes(normalizedType):
|
|
48913
48919
|
return React.createElement(PasswordInput, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, placeholder: inputPlaceholder, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48914
|
-
case phoneInputType.includes(
|
|
48920
|
+
case phoneInputType.includes(normalizedType):
|
|
48915
48921
|
return React.createElement(PhoneInput, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, placeholder: inputPlaceholder, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48916
|
-
case creditCardInputType.includes(
|
|
48922
|
+
case creditCardInputType.includes(normalizedType):
|
|
48917
48923
|
return React.createElement(CreditCardInput, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, placeholder: inputPlaceholder, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48918
|
-
case currencyInputType.includes(
|
|
48924
|
+
case currencyInputType.includes(normalizedType):
|
|
48919
48925
|
return React.createElement(CurrencyInput, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, placeholder: inputPlaceholder, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48920
|
-
case stockInputType.includes(
|
|
48926
|
+
case stockInputType.includes(normalizedType):
|
|
48921
48927
|
return React.createElement(StockInput, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, placeholder: inputPlaceholder, defaultvalue: defaultValue, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48922
|
-
case radioInputType.includes(
|
|
48928
|
+
case radioInputType.includes(normalizedType):
|
|
48923
48929
|
return React.createElement(RadioGroupInput, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, inputOptions: inputOptions, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48924
|
-
case selectInputType.includes(
|
|
48930
|
+
case selectInputType.includes(normalizedType):
|
|
48925
48931
|
return React.createElement(OptionSelect, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, inputOptions: inputOptions, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48926
|
-
case selectMultipleInputType.includes(
|
|
48932
|
+
case selectMultipleInputType.includes(normalizedType):
|
|
48927
48933
|
return React.createElement(MultipleSelect, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, inputOptions: inputOptions, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48928
|
-
case sliderInputType.includes(
|
|
48934
|
+
case sliderInputType.includes(normalizedType):
|
|
48929
48935
|
return React.createElement(SliderInput, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, stepvalue: Number(stepValue), minvalue: Number(inputMinValue), maxvalue: Number(inputMaxValue), newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48930
|
-
case rangeSliderInputType.includes(
|
|
48936
|
+
case rangeSliderInputType.includes(normalizedType):
|
|
48931
48937
|
return React.createElement(RangeSlider, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, stepvalue: Number(stepValue), minvalue: Number(inputMinValue), maxvalue: Number(inputMaxValue), newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48932
|
-
case toggleInputType.includes(
|
|
48938
|
+
case toggleInputType.includes(normalizedType):
|
|
48933
48939
|
return React.createElement(Toggle, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText, icon: defaultValue });
|
|
48934
48940
|
default:
|
|
48935
48941
|
return React.createElement(Input$2, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, placeholder: inputPlaceholder, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48936
48942
|
}
|
|
48937
48943
|
};
|
|
48938
|
-
|
|
48939
|
-
|
|
48940
|
-
|
|
48941
|
-
|
|
48942
|
-
|
|
48944
|
+
const renderQueries = (queries) => {
|
|
48945
|
+
if (!queries)
|
|
48946
|
+
return null;
|
|
48947
|
+
return queries.map((xFormelement) => (React.createElement(React.Fragment, { key: xFormelement.queryId }, inputAlphaTrion(xFormelement.inputAlias, xFormelement.inputType, xFormelement.inputWidth, xFormelement.inputLabel, Number(xFormelement.minValue), Number(xFormelement.maxValue), xFormelement.defaultValue, [InputOptionsPlaceholder], xFormelement.stepValue, xFormelement.inputHeight, xFormelement.toggledInput ? inputAlphaTrion(xFormelement.toggledInput.inputAlias, xFormelement.toggledInput.inputType, xFormelement.toggledInput.inputWidth, xFormelement.toggledInput.inputLabel, Number(xFormelement.toggledInput.minValue), Number(xFormelement.toggledInput.maxValue), xFormelement.toggledInput.defaultValue, [InputOptionsPlaceholder], xFormelement.toggledInput.stepValue, xFormelement.toggledInput.inputHeight, 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, xFormelement.newRow, xFormelement.inputPlaceholder, readOnlyMode, xFormelement.isHinted, xFormelement.hintText || "", xFormelement.hintUrl || "", xFormelement.errorText, String(xFormelement.queryId) || crypto.randomUUID()))));
|
|
48948
|
+
};
|
|
48949
|
+
const renderDisplayMode = () => {
|
|
48950
|
+
switch (displayMode) {
|
|
48951
|
+
case 'dual':
|
|
48952
|
+
return (React.createElement(React.Fragment, null,
|
|
48953
|
+
"Dual Display",
|
|
48954
|
+
React.createElement(Row, null,
|
|
48955
|
+
React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '12px' } },
|
|
48956
|
+
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) },
|
|
48957
|
+
React.createElement("style", { dangerouslySetInnerHTML: { __html: `
|
|
48958
|
+
.neu-toggle-wrapper {
|
|
48959
|
+
isolation: isolate;
|
|
48960
|
+
position: relative;
|
|
48961
|
+
height: 30px;
|
|
48962
|
+
width: 60px;
|
|
48963
|
+
border-radius: 15px;
|
|
48964
|
+
overflow: hidden;
|
|
48965
|
+
cursor: pointer;
|
|
48966
|
+
background: var(--neu-bg);
|
|
48967
|
+
box-shadow:
|
|
48968
|
+
-8px -4px 8px 0px var(--neu-shadow-light),
|
|
48969
|
+
8px 4px 12px 0px var(--neu-shadow-dark),
|
|
48970
|
+
4px 4px 4px 0px var(--neu-shadow-dark) inset,
|
|
48971
|
+
-4px -4px 4px 0px var(--neu-shadow-light) inset;
|
|
48972
|
+
}
|
|
48973
|
+
|
|
48974
|
+
.neu-toggle-state {
|
|
48975
|
+
display: none;
|
|
48976
|
+
}
|
|
48977
|
+
|
|
48978
|
+
.neu-indicator {
|
|
48979
|
+
height: 100%;
|
|
48980
|
+
width: 200%;
|
|
48981
|
+
background: var(--neu-bg);
|
|
48982
|
+
border-radius: 15px;
|
|
48983
|
+
transform: translate3d(-75%, 0, 0);
|
|
48984
|
+
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
|
|
48985
|
+
box-shadow:
|
|
48986
|
+
-8px -4px 8px 0px var(--neu-shadow-light),
|
|
48987
|
+
8px 4px 12px 0px var(--neu-shadow-dark);
|
|
48988
|
+
}
|
|
48989
|
+
|
|
48990
|
+
.neu-toggle-state:checked ~ .neu-indicator {
|
|
48991
|
+
transform: translate3d(25%, 0, 0);
|
|
48992
|
+
}
|
|
48993
|
+
` } }),
|
|
48994
|
+
React.createElement("input", { id: `teletraan1DualToggle`, className: "neu-toggle-state", type: "checkbox", checked: dualToggled, readOnly: true }),
|
|
48995
|
+
React.createElement("div", { className: "neu-indicator" })),
|
|
48996
|
+
React.createElement(Icon, { name: "stack", height: "20", width: "20", color: brandColor, style: {
|
|
48997
|
+
transition: 'color 0.3s ease',
|
|
48998
|
+
opacity: readOnlyMode ? 0.5 : 1,
|
|
48999
|
+
cursor: 'pointer'
|
|
49000
|
+
}, onClick: () => setDualToggled(!dualToggled) })),
|
|
49001
|
+
dualToggled ?
|
|
49002
|
+
React.createElement(React.Fragment, null,
|
|
49003
|
+
"Accordion Display",
|
|
49004
|
+
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 },
|
|
49005
|
+
React.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries)))))))
|
|
49006
|
+
:
|
|
49007
|
+
React.createElement(React.Fragment, null,
|
|
49008
|
+
"Codice Display",
|
|
49009
|
+
React.createElement(React.Fragment, { key: xFormModel.uuid }, xFormModel.model.map((formsection) => (React.createElement(React.Fragment, { key: formsection.sectionId || crypto.randomUUID() },
|
|
49010
|
+
React.createElement(SectionTitle, { title: formsection.title, icon: React.createElement(Icon, { name: String(formsection.icon) }) }),
|
|
49011
|
+
React.createElement(Row, null, renderQueries(formsection.queries))))))))));
|
|
49012
|
+
case 'accordion':
|
|
49013
|
+
return (React.createElement(React.Fragment, null,
|
|
48943
49014
|
"Accordion Display",
|
|
48944
|
-
React.createElement(Accordion, { allowMultiple: true, brandcolor: brandColor, titleColor: '#ffffff' }, xFormModel.model.map((formsection) => (React.createElement(
|
|
48945
|
-
React.createElement(
|
|
48946
|
-
|
|
48947
|
-
|
|
48948
|
-
|
|
48949
|
-
|
|
48950
|
-
|
|
48951
|
-
|
|
48952
|
-
React.createElement(
|
|
48953
|
-
|
|
48954
|
-
|
|
48955
|
-
|
|
48956
|
-
|
|
48957
|
-
|
|
48958
|
-
|
|
48959
|
-
|
|
48960
|
-
|
|
48961
|
-
|
|
48962
|
-
React.createElement(
|
|
48963
|
-
|
|
48964
|
-
|
|
48965
|
-
|
|
48966
|
-
React.createElement(Row, { key: formsection.sectionId }, formsection.queries ?
|
|
48967
|
-
formsection.queries.map((xFormelement) => (React.createElement(React.Fragment, { key: xFormelement.queryId }, inputAlphaTrion(xFormelement.inputAlias, xFormelement.inputType, xFormelement.inputWidth, xFormelement.inputLabel, Number(xFormelement.minValue), Number(xFormelement.maxValue), xFormelement.defaultValue, [InputOptionsPlaceholder], xFormelement.stepValue, xFormelement.inputHeight, xFormelement.toggledInput ? inputAlphaTrion(xFormelement.toggledInput.inputAlias, xFormelement.toggledInput.inputType, xFormelement.toggledInput.inputWidth, xFormelement.toggledInput.inputLabel, Number(xFormelement.toggledInput.minValue), Number(xFormelement.toggledInput.maxValue), xFormelement.toggledInput.defaultValue, [InputOptionsPlaceholder], xFormelement.toggledInput.stepValue, xFormelement.toggledInput.inputHeight, 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, xFormelement.newRow, xFormelement.inputPlaceholder, readOnlyMode, xFormelement.isHinted, xFormelement.hintText || "", xFormelement.hintUrl || "", xFormelement.errorText, String(xFormelement.queryId) || crypto.randomUUID()))))
|
|
48968
|
-
: null)))))))));
|
|
49015
|
+
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 },
|
|
49016
|
+
React.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries))))))));
|
|
49017
|
+
case 'codex':
|
|
49018
|
+
return (React.createElement(React.Fragment, null,
|
|
49019
|
+
"Codex Display",
|
|
49020
|
+
React.createElement(Codex, { brandColor: brandColor }, xFormModel.model.map((formsection, index, array) => {
|
|
49021
|
+
const prevStepId = index > 0 ? String(array[index - 1].sectionId) : undefined;
|
|
49022
|
+
const nextStepId = index < array.length - 1 ? String(array[index + 1].sectionId) : undefined;
|
|
49023
|
+
return (React.createElement(CodexItem, { key: formsection.sectionId, stepId: String(formsection.sectionId), title: formsection.title },
|
|
49024
|
+
React.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries)),
|
|
49025
|
+
React.createElement(CodexControls, { prevStepId: prevStepId, nextStepId: nextStepId, onPrev: () => console.log(`Teletraan-1 Codex :: ${formsection.title} :: onPrev()`), onNext: () => console.log(`Teletraan-1 Codex :: ${formsection.title} :: onNext()`), onFinish: () => console.log(`Teletraan-1 Codex :: ${formsection.title} :: onFinish()`) })));
|
|
49026
|
+
}))));
|
|
49027
|
+
case 'codice':
|
|
49028
|
+
default:
|
|
49029
|
+
return (React.createElement(React.Fragment, null,
|
|
49030
|
+
"Codice/Script Display",
|
|
49031
|
+
React.createElement(React.Fragment, { key: xFormModel.uuid }, xFormModel.model.map((formsection) => (React.createElement(React.Fragment, { key: formsection.sectionId || crypto.randomUUID() },
|
|
49032
|
+
React.createElement(SectionTitle, { title: formsection.title, icon: React.createElement(Icon, { name: String(formsection.icon) }) }),
|
|
49033
|
+
React.createElement(Row, null, renderQueries(formsection.queries))))))));
|
|
49034
|
+
}
|
|
49035
|
+
};
|
|
49036
|
+
return (React.createElement(Row, null, renderDisplayMode()));
|
|
48969
49037
|
};
|
|
48970
49038
|
|
|
48971
49039
|
const Container = (_a) => {
|
|
@@ -53531,13 +53599,13 @@ exports.Row = Row;
|
|
|
53531
53599
|
exports.SectionTitle = SectionTitle;
|
|
53532
53600
|
exports.SliderInput = SliderInput;
|
|
53533
53601
|
exports.StockInput = StockInput;
|
|
53602
|
+
exports.Teletraan1 = Teletraan1;
|
|
53534
53603
|
exports.Theme = R;
|
|
53535
53604
|
exports.ThemePanel = N;
|
|
53536
53605
|
exports.Toggle = Toggle;
|
|
53537
53606
|
exports.UUIDInput = UUIDInput;
|
|
53538
53607
|
exports.parseUuidFormat = parseUuidFormat;
|
|
53539
53608
|
exports.primeMatrix = primeMatrix;
|
|
53540
|
-
exports.teletraan1 = teletraan1;
|
|
53541
53609
|
exports.useStepper = useStepper;
|
|
53542
53610
|
exports.vectorSigma = vectorSigma;
|
|
53543
53611
|
exports.xFormSchema = xFormSchema;
|
package/lib/index.esm.js
CHANGED
|
@@ -48498,30 +48498,6 @@ const SectionTitle = ({ title, width = 12, newRow = true, size = "5", subsize =
|
|
|
48498
48498
|
} })))));
|
|
48499
48499
|
};
|
|
48500
48500
|
|
|
48501
|
-
const avatarInputType = ["avatar", "avatarinput", "avatar-input", "input-avatar", "inputavatar"];
|
|
48502
|
-
const buttonInputType = ["button", "buttoninput", "button-input", "input-button", "inputbutton"];
|
|
48503
|
-
const checkboxInputType = ["checkbox", "checkboxes", "checkboxinput", "chechbox-input", "input-checkbox", "inputcheckbox"];
|
|
48504
|
-
const datePickerInputType = ["datepicker", "datepickerinput", "datepicker-input", "input-datepicker", "inputdatepicker"];
|
|
48505
|
-
const dateRangePickerInputType = ["daterangepicker", "daterangepickerinput", "daterangepicker-input", "input-daterangepicker", "inputdaterangepicker"];
|
|
48506
|
-
const dateTimePickerInputType = ["datetimepicker", "datetimepickerinput", "datetimepicker-input", "input-datetimepicker", "inputdatetimepicker"];
|
|
48507
|
-
const dropdownInputType = ["dropdown", "dropdowninput", "dropdown-input", "input-dropdown", "inputdropdown"];
|
|
48508
|
-
const fileInputType = ["file", "fileinput", "file-input", "input-file", "inputfile"];
|
|
48509
|
-
const fileMultipleInputType = ["filemultiple", "filemultipleinput", "filemultiple-input", "input-filemultiple", "inputfilemultiple"];
|
|
48510
|
-
const imageOutputType = ["image", "imageoutput", "image-output", "output-image", "outputimage"];
|
|
48511
|
-
const textInputType = ["text", "textinput", "text-input", "input-text", "inputtext"];
|
|
48512
|
-
const passwordInputType = ["password", "passwordinput", "password-input", "input-password", "inputpassword"];
|
|
48513
|
-
const phoneInputType = ["phone", "phoneinput", "phone-input", "input-phone", "inputphone"];
|
|
48514
|
-
const creditCardInputType = ["creditcard", "creditcardinput", "creditcard-input", "input-creditcard", "inputcreditcard"];
|
|
48515
|
-
const currencyInputType = ["currency", "currencyinput", "currency-input", "input-currency", "inputcurrency"];
|
|
48516
|
-
const stockInputType = ["stock", "stockinput", "stock-input", "input-stock", "inputstock"];
|
|
48517
|
-
const radioInputType = ["radio", "radioinput", "radio-input", "input-radio", "inputradio"];
|
|
48518
|
-
const selectInputType = ["select", "selectinput", "select-input", "input-select", "inputselect"];
|
|
48519
|
-
const selectMultipleInputType = ["selectmultiple", "selectmultipleinput", "selectmultiple-input", "input-selectmultiple", "inputselectmultiple"];
|
|
48520
|
-
const sliderInputType = ["slider", "sliderinput", "slider-input", "input-slider", "inputslider"];
|
|
48521
|
-
const rangeSliderInputType = ["range", "rangeslider", "rangeinput", "rangesliderinput", "rangeslider-input", "range-input", "input-rangeslider", "inputrangeslider"];
|
|
48522
|
-
const toggleInputType = ["toggle", "switch", "toggleinput", "toggle-input", "input-toggle", "inputtoggle"];
|
|
48523
|
-
const conditionalInputType = ["conditional", "conditionaltoggle", "conditionalcheckbox", "conditionalselect", "conditional-toggle", "conditional-select", "conditional-checkbox"];
|
|
48524
|
-
|
|
48525
48501
|
const Row = ({ children, className, gap = "4" }) => {
|
|
48526
48502
|
return (React__default.createElement(o$6, { columns: "12", gap: gap, width: "auto", className: className }, children));
|
|
48527
48503
|
};
|
|
@@ -48853,8 +48829,37 @@ const CodexControls = ({ nextStepId, prevStepId, nextLabel = "Continue", prevLab
|
|
|
48853
48829
|
finishLabel)))));
|
|
48854
48830
|
};
|
|
48855
48831
|
|
|
48856
|
-
const
|
|
48857
|
-
|
|
48832
|
+
const avatarInputType = ["avatar", "avatarinput", "avatar-input", "input-avatar", "inputavatar"];
|
|
48833
|
+
const buttonInputType = ["button", "buttoninput", "button-input", "input-button", "inputbutton"];
|
|
48834
|
+
const checkboxInputType = ["checkbox", "checkboxes", "checkboxinput", "chechbox-input", "input-checkbox", "inputcheckbox"];
|
|
48835
|
+
const datePickerInputType = ["datepicker", "datepickerinput", "datepicker-input", "input-datepicker", "inputdatepicker"];
|
|
48836
|
+
const dateRangePickerInputType = ["daterangepicker", "daterangepickerinput", "daterangepicker-input", "input-daterangepicker", "inputdaterangepicker"];
|
|
48837
|
+
const dateTimePickerInputType = ["datetimepicker", "datetimepickerinput", "datetimepicker-input", "input-datetimepicker", "inputdatetimepicker"];
|
|
48838
|
+
const dropdownInputType = ["dropdown", "dropdowninput", "dropdown-input", "input-dropdown", "inputdropdown"];
|
|
48839
|
+
const fileInputType = ["file", "fileinput", "file-input", "input-file", "inputfile"];
|
|
48840
|
+
const fileMultipleInputType = ["filemultiple", "filemultipleinput", "filemultiple-input", "input-filemultiple", "inputfilemultiple"];
|
|
48841
|
+
const imageOutputType = ["image", "imageoutput", "image-output", "output-image", "outputimage"];
|
|
48842
|
+
const textInputType = ["text", "textinput", "text-input", "input-text", "inputtext"];
|
|
48843
|
+
const passwordInputType = ["password", "passwordinput", "password-input", "input-password", "inputpassword"];
|
|
48844
|
+
const phoneInputType = ["phone", "phoneinput", "phone-input", "input-phone", "inputphone"];
|
|
48845
|
+
const creditCardInputType = ["creditcard", "creditcardinput", "creditcard-input", "input-creditcard", "inputcreditcard"];
|
|
48846
|
+
const currencyInputType = ["currency", "currencyinput", "currency-input", "input-currency", "inputcurrency"];
|
|
48847
|
+
const stockInputType = ["stock", "stockinput", "stock-input", "input-stock", "inputstock"];
|
|
48848
|
+
const radioInputType = ["radio", "radioinput", "radio-input", "input-radio", "inputradio"];
|
|
48849
|
+
const selectInputType = ["select", "selectinput", "select-input", "input-select", "inputselect"];
|
|
48850
|
+
const selectMultipleInputType = ["selectmultiple", "selectmultipleinput", "selectmultiple-input", "input-selectmultiple", "inputselectmultiple"];
|
|
48851
|
+
const sliderInputType = ["slider", "sliderinput", "slider-input", "input-slider", "inputslider"];
|
|
48852
|
+
const rangeSliderInputType = ["range", "rangeslider", "rangeinput", "rangesliderinput", "rangeslider-input", "range-input", "input-rangeslider", "inputrangeslider"];
|
|
48853
|
+
const toggleInputType = ["toggle", "switch", "toggleinput", "toggle-input", "input-toggle", "inputtoggle"];
|
|
48854
|
+
const conditionalInputType = ["conditional", "conditionaltoggle", "conditionalcheckbox", "conditionalselect", "conditional-toggle", "conditional-select", "conditional-checkbox"];
|
|
48855
|
+
|
|
48856
|
+
const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice', brandColor = "#000000" }) => {
|
|
48857
|
+
const [dualToggled, setDualToggled] = useState(false);
|
|
48858
|
+
const [neuVars] = useState({
|
|
48859
|
+
'--neu-bg': '#ecf0f3',
|
|
48860
|
+
'--neu-shadow-light': '#ffffff',
|
|
48861
|
+
'--neu-shadow-dark': '#d1d9e6'
|
|
48862
|
+
});
|
|
48858
48863
|
const inputAlphaTrion = (inputAlias, inputType, inputWidth, inputLabel, inputMinValue, inputMaxValue, defaultValue, inputOptions, stepValue, inputHeight, toggledInput, newRow, inputPlaceholder, readOnly, isHinted, hintText, hintUrl, errorText, inputUID) => {
|
|
48859
48864
|
if (inputWidth == null || inputWidth > 12)
|
|
48860
48865
|
inputWidth = 4;
|
|
@@ -48864,88 +48869,151 @@ const teletraan1 = (xFormModel, readOnlyMode, displayMode, brandColor = "#000000
|
|
|
48864
48869
|
inputUID = crypto.randomUUID();
|
|
48865
48870
|
if (readOnlyMode)
|
|
48866
48871
|
readOnly = true;
|
|
48872
|
+
const normalizedType = inputType.toLocaleLowerCase();
|
|
48867
48873
|
switch (true) {
|
|
48868
|
-
case avatarInputType.includes(
|
|
48874
|
+
case avatarInputType.includes(normalizedType):
|
|
48869
48875
|
return React__default.createElement(AvatarInput, { alias: inputAlias, width: inputWidth, inputLabel: inputLabel, key: inputUID, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, errorText: errorText });
|
|
48870
|
-
case buttonInputType.includes(
|
|
48871
|
-
return React__default.createElement(ButtonInput, { alias: inputAlias, width: inputWidth, readOnly: readOnly, newRow: newRow,
|
|
48872
|
-
case checkboxInputType.includes(
|
|
48876
|
+
case buttonInputType.includes(normalizedType):
|
|
48877
|
+
return React__default.createElement(ButtonInput, { alias: inputAlias, width: inputWidth, readOnly: readOnly, newRow: newRow, key: inputUID }, defaultValue);
|
|
48878
|
+
case checkboxInputType.includes(normalizedType):
|
|
48873
48879
|
return React__default.createElement(CheckboxGroupInput, { alias: inputAlias, width: inputWidth, inputLabel: inputLabel, inputOptions: inputOptions, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48874
|
-
case conditionalInputType.includes(
|
|
48880
|
+
case conditionalInputType.includes(normalizedType):
|
|
48875
48881
|
return React__default.createElement(ConditionalTrigger, { alias: inputAlias, width: inputWidth, inputLabel: inputLabel, inputOptions: inputOptions, newRow: newRow, readOnly: readOnly, isHinted: isHinted, triggerValue: defaultValue, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText, children: toggledInput });
|
|
48876
|
-
case datePickerInputType.includes(
|
|
48882
|
+
case datePickerInputType.includes(normalizedType):
|
|
48877
48883
|
return React__default.createElement(DatePicker, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, placeholder: inputPlaceholder, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48878
|
-
case dateRangePickerInputType.includes(
|
|
48884
|
+
case dateRangePickerInputType.includes(normalizedType):
|
|
48879
48885
|
return React__default.createElement(DateRangePicker, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48880
|
-
case dateTimePickerInputType.includes(
|
|
48886
|
+
case dateTimePickerInputType.includes(normalizedType):
|
|
48881
48887
|
return React__default.createElement(DateRangePicker, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48882
|
-
case dropdownInputType.includes(
|
|
48888
|
+
case dropdownInputType.includes(normalizedType):
|
|
48883
48889
|
return React__default.createElement(Dropdown, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, inputOptions: inputOptions, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48884
|
-
case fileInputType.includes(
|
|
48890
|
+
case fileInputType.includes(normalizedType):
|
|
48885
48891
|
return React__default.createElement(File$1, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText, preview: true });
|
|
48886
|
-
case fileMultipleInputType.includes(
|
|
48892
|
+
case fileMultipleInputType.includes(normalizedType):
|
|
48887
48893
|
return React__default.createElement(FileMultiple, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, placeholder: inputPlaceholder, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText, preview: true });
|
|
48888
|
-
case imageOutputType.includes(
|
|
48894
|
+
case imageOutputType.includes(normalizedType):
|
|
48889
48895
|
return React__default.createElement(ImageOutput, { id: inputAlias, src: defaultValue, alt: inputPlaceholder, width: inputWidth, height: inputHeight });
|
|
48890
|
-
case textInputType.includes(
|
|
48896
|
+
case textInputType.includes(normalizedType):
|
|
48891
48897
|
return React__default.createElement(Input$2, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, placeholder: inputPlaceholder, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48892
|
-
case passwordInputType.includes(
|
|
48898
|
+
case passwordInputType.includes(normalizedType):
|
|
48893
48899
|
return React__default.createElement(PasswordInput, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, placeholder: inputPlaceholder, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48894
|
-
case phoneInputType.includes(
|
|
48900
|
+
case phoneInputType.includes(normalizedType):
|
|
48895
48901
|
return React__default.createElement(PhoneInput, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, placeholder: inputPlaceholder, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48896
|
-
case creditCardInputType.includes(
|
|
48902
|
+
case creditCardInputType.includes(normalizedType):
|
|
48897
48903
|
return React__default.createElement(CreditCardInput, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, placeholder: inputPlaceholder, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48898
|
-
case currencyInputType.includes(
|
|
48904
|
+
case currencyInputType.includes(normalizedType):
|
|
48899
48905
|
return React__default.createElement(CurrencyInput, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, placeholder: inputPlaceholder, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48900
|
-
case stockInputType.includes(
|
|
48906
|
+
case stockInputType.includes(normalizedType):
|
|
48901
48907
|
return React__default.createElement(StockInput, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, placeholder: inputPlaceholder, defaultvalue: defaultValue, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48902
|
-
case radioInputType.includes(
|
|
48908
|
+
case radioInputType.includes(normalizedType):
|
|
48903
48909
|
return React__default.createElement(RadioGroupInput, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, inputOptions: inputOptions, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48904
|
-
case selectInputType.includes(
|
|
48910
|
+
case selectInputType.includes(normalizedType):
|
|
48905
48911
|
return React__default.createElement(OptionSelect, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, inputOptions: inputOptions, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48906
|
-
case selectMultipleInputType.includes(
|
|
48912
|
+
case selectMultipleInputType.includes(normalizedType):
|
|
48907
48913
|
return React__default.createElement(MultipleSelect, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, inputOptions: inputOptions, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48908
|
-
case sliderInputType.includes(
|
|
48914
|
+
case sliderInputType.includes(normalizedType):
|
|
48909
48915
|
return React__default.createElement(SliderInput, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, stepvalue: Number(stepValue), minvalue: Number(inputMinValue), maxvalue: Number(inputMaxValue), newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48910
|
-
case rangeSliderInputType.includes(
|
|
48916
|
+
case rangeSliderInputType.includes(normalizedType):
|
|
48911
48917
|
return React__default.createElement(RangeSlider, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, stepvalue: Number(stepValue), minvalue: Number(inputMinValue), maxvalue: Number(inputMaxValue), newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48912
|
-
case toggleInputType.includes(
|
|
48918
|
+
case toggleInputType.includes(normalizedType):
|
|
48913
48919
|
return React__default.createElement(Toggle, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText, icon: defaultValue });
|
|
48914
48920
|
default:
|
|
48915
48921
|
return React__default.createElement(Input$2, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, placeholder: inputPlaceholder, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
|
|
48916
48922
|
}
|
|
48917
48923
|
};
|
|
48918
|
-
|
|
48919
|
-
|
|
48920
|
-
|
|
48921
|
-
|
|
48922
|
-
|
|
48924
|
+
const renderQueries = (queries) => {
|
|
48925
|
+
if (!queries)
|
|
48926
|
+
return null;
|
|
48927
|
+
return queries.map((xFormelement) => (React__default.createElement(React__default.Fragment, { key: xFormelement.queryId }, inputAlphaTrion(xFormelement.inputAlias, xFormelement.inputType, xFormelement.inputWidth, xFormelement.inputLabel, Number(xFormelement.minValue), Number(xFormelement.maxValue), xFormelement.defaultValue, [InputOptionsPlaceholder], xFormelement.stepValue, xFormelement.inputHeight, xFormelement.toggledInput ? inputAlphaTrion(xFormelement.toggledInput.inputAlias, xFormelement.toggledInput.inputType, xFormelement.toggledInput.inputWidth, xFormelement.toggledInput.inputLabel, Number(xFormelement.toggledInput.minValue), Number(xFormelement.toggledInput.maxValue), xFormelement.toggledInput.defaultValue, [InputOptionsPlaceholder], xFormelement.toggledInput.stepValue, xFormelement.toggledInput.inputHeight, 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, xFormelement.newRow, xFormelement.inputPlaceholder, readOnlyMode, xFormelement.isHinted, xFormelement.hintText || "", xFormelement.hintUrl || "", xFormelement.errorText, String(xFormelement.queryId) || crypto.randomUUID()))));
|
|
48928
|
+
};
|
|
48929
|
+
const renderDisplayMode = () => {
|
|
48930
|
+
switch (displayMode) {
|
|
48931
|
+
case 'dual':
|
|
48932
|
+
return (React__default.createElement(React__default.Fragment, null,
|
|
48933
|
+
"Dual Display",
|
|
48934
|
+
React__default.createElement(Row, null,
|
|
48935
|
+
React__default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '12px' } },
|
|
48936
|
+
React__default.createElement("div", { className: "neu-toggle-wrapper", style: Object.assign(Object.assign({}, neuVars), { opacity: readOnlyMode ? 0.6 : 1, pointerEvents: readOnlyMode ? 'none' : 'auto' }), onClick: () => setDualToggled(!dualToggled) },
|
|
48937
|
+
React__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
|
|
48938
|
+
.neu-toggle-wrapper {
|
|
48939
|
+
isolation: isolate;
|
|
48940
|
+
position: relative;
|
|
48941
|
+
height: 30px;
|
|
48942
|
+
width: 60px;
|
|
48943
|
+
border-radius: 15px;
|
|
48944
|
+
overflow: hidden;
|
|
48945
|
+
cursor: pointer;
|
|
48946
|
+
background: var(--neu-bg);
|
|
48947
|
+
box-shadow:
|
|
48948
|
+
-8px -4px 8px 0px var(--neu-shadow-light),
|
|
48949
|
+
8px 4px 12px 0px var(--neu-shadow-dark),
|
|
48950
|
+
4px 4px 4px 0px var(--neu-shadow-dark) inset,
|
|
48951
|
+
-4px -4px 4px 0px var(--neu-shadow-light) inset;
|
|
48952
|
+
}
|
|
48953
|
+
|
|
48954
|
+
.neu-toggle-state {
|
|
48955
|
+
display: none;
|
|
48956
|
+
}
|
|
48957
|
+
|
|
48958
|
+
.neu-indicator {
|
|
48959
|
+
height: 100%;
|
|
48960
|
+
width: 200%;
|
|
48961
|
+
background: var(--neu-bg);
|
|
48962
|
+
border-radius: 15px;
|
|
48963
|
+
transform: translate3d(-75%, 0, 0);
|
|
48964
|
+
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
|
|
48965
|
+
box-shadow:
|
|
48966
|
+
-8px -4px 8px 0px var(--neu-shadow-light),
|
|
48967
|
+
8px 4px 12px 0px var(--neu-shadow-dark);
|
|
48968
|
+
}
|
|
48969
|
+
|
|
48970
|
+
.neu-toggle-state:checked ~ .neu-indicator {
|
|
48971
|
+
transform: translate3d(25%, 0, 0);
|
|
48972
|
+
}
|
|
48973
|
+
` } }),
|
|
48974
|
+
React__default.createElement("input", { id: `teletraan1DualToggle`, className: "neu-toggle-state", type: "checkbox", checked: dualToggled, readOnly: true }),
|
|
48975
|
+
React__default.createElement("div", { className: "neu-indicator" })),
|
|
48976
|
+
React__default.createElement(Icon, { name: "stack", height: "20", width: "20", color: brandColor, style: {
|
|
48977
|
+
transition: 'color 0.3s ease',
|
|
48978
|
+
opacity: readOnlyMode ? 0.5 : 1,
|
|
48979
|
+
cursor: 'pointer'
|
|
48980
|
+
}, onClick: () => setDualToggled(!dualToggled) })),
|
|
48981
|
+
dualToggled ?
|
|
48982
|
+
React__default.createElement(React__default.Fragment, null,
|
|
48983
|
+
"Accordion Display",
|
|
48984
|
+
React__default.createElement(Accordion, { allowMultiple: true, brandcolor: brandColor, titleColor: '#ffffff' }, xFormModel.model.map((formsection) => (React__default.createElement(AccordionItem, { key: formsection.sectionId, sectionId: String(formsection.sectionId), title: formsection.title },
|
|
48985
|
+
React__default.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries)))))))
|
|
48986
|
+
:
|
|
48987
|
+
React__default.createElement(React__default.Fragment, null,
|
|
48988
|
+
"Codice Display",
|
|
48989
|
+
React__default.createElement(React__default.Fragment, { key: xFormModel.uuid }, xFormModel.model.map((formsection) => (React__default.createElement(React__default.Fragment, { key: formsection.sectionId || crypto.randomUUID() },
|
|
48990
|
+
React__default.createElement(SectionTitle, { title: formsection.title, icon: React__default.createElement(Icon, { name: String(formsection.icon) }) }),
|
|
48991
|
+
React__default.createElement(Row, null, renderQueries(formsection.queries))))))))));
|
|
48992
|
+
case 'accordion':
|
|
48993
|
+
return (React__default.createElement(React__default.Fragment, null,
|
|
48923
48994
|
"Accordion Display",
|
|
48924
|
-
React__default.createElement(Accordion, { allowMultiple: true, brandcolor: brandColor, titleColor: '#ffffff' }, xFormModel.model.map((formsection) => (React__default.createElement(
|
|
48925
|
-
React__default.createElement(
|
|
48926
|
-
|
|
48927
|
-
|
|
48928
|
-
|
|
48929
|
-
|
|
48930
|
-
|
|
48931
|
-
|
|
48932
|
-
React__default.createElement(
|
|
48933
|
-
|
|
48934
|
-
|
|
48935
|
-
|
|
48936
|
-
|
|
48937
|
-
|
|
48938
|
-
|
|
48939
|
-
|
|
48940
|
-
|
|
48941
|
-
|
|
48942
|
-
React__default.createElement(
|
|
48943
|
-
|
|
48944
|
-
|
|
48945
|
-
|
|
48946
|
-
React__default.createElement(Row, { key: formsection.sectionId }, formsection.queries ?
|
|
48947
|
-
formsection.queries.map((xFormelement) => (React__default.createElement(React__default.Fragment, { key: xFormelement.queryId }, inputAlphaTrion(xFormelement.inputAlias, xFormelement.inputType, xFormelement.inputWidth, xFormelement.inputLabel, Number(xFormelement.minValue), Number(xFormelement.maxValue), xFormelement.defaultValue, [InputOptionsPlaceholder], xFormelement.stepValue, xFormelement.inputHeight, xFormelement.toggledInput ? inputAlphaTrion(xFormelement.toggledInput.inputAlias, xFormelement.toggledInput.inputType, xFormelement.toggledInput.inputWidth, xFormelement.toggledInput.inputLabel, Number(xFormelement.toggledInput.minValue), Number(xFormelement.toggledInput.maxValue), xFormelement.toggledInput.defaultValue, [InputOptionsPlaceholder], xFormelement.toggledInput.stepValue, xFormelement.toggledInput.inputHeight, 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, xFormelement.newRow, xFormelement.inputPlaceholder, readOnlyMode, xFormelement.isHinted, xFormelement.hintText || "", xFormelement.hintUrl || "", xFormelement.errorText, String(xFormelement.queryId) || crypto.randomUUID()))))
|
|
48948
|
-
: null)))))))));
|
|
48995
|
+
React__default.createElement(Accordion, { allowMultiple: true, brandcolor: brandColor, titleColor: '#ffffff' }, xFormModel.model.map((formsection) => (React__default.createElement(AccordionItem, { key: formsection.sectionId, sectionId: String(formsection.sectionId), title: formsection.title },
|
|
48996
|
+
React__default.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries))))))));
|
|
48997
|
+
case 'codex':
|
|
48998
|
+
return (React__default.createElement(React__default.Fragment, null,
|
|
48999
|
+
"Codex Display",
|
|
49000
|
+
React__default.createElement(Codex, { brandColor: brandColor }, xFormModel.model.map((formsection, index, array) => {
|
|
49001
|
+
const prevStepId = index > 0 ? String(array[index - 1].sectionId) : undefined;
|
|
49002
|
+
const nextStepId = index < array.length - 1 ? String(array[index + 1].sectionId) : undefined;
|
|
49003
|
+
return (React__default.createElement(CodexItem, { key: formsection.sectionId, stepId: String(formsection.sectionId), title: formsection.title },
|
|
49004
|
+
React__default.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries)),
|
|
49005
|
+
React__default.createElement(CodexControls, { prevStepId: prevStepId, nextStepId: nextStepId, onPrev: () => console.log(`Teletraan-1 Codex :: ${formsection.title} :: onPrev()`), onNext: () => console.log(`Teletraan-1 Codex :: ${formsection.title} :: onNext()`), onFinish: () => console.log(`Teletraan-1 Codex :: ${formsection.title} :: onFinish()`) })));
|
|
49006
|
+
}))));
|
|
49007
|
+
case 'codice':
|
|
49008
|
+
default:
|
|
49009
|
+
return (React__default.createElement(React__default.Fragment, null,
|
|
49010
|
+
"Codice/Script Display",
|
|
49011
|
+
React__default.createElement(React__default.Fragment, { key: xFormModel.uuid }, xFormModel.model.map((formsection) => (React__default.createElement(React__default.Fragment, { key: formsection.sectionId || crypto.randomUUID() },
|
|
49012
|
+
React__default.createElement(SectionTitle, { title: formsection.title, icon: React__default.createElement(Icon, { name: String(formsection.icon) }) }),
|
|
49013
|
+
React__default.createElement(Row, null, renderQueries(formsection.queries))))))));
|
|
49014
|
+
}
|
|
49015
|
+
};
|
|
49016
|
+
return (React__default.createElement(Row, null, renderDisplayMode()));
|
|
48949
49017
|
};
|
|
48950
49018
|
|
|
48951
49019
|
const Container = (_a) => {
|
|
@@ -53477,4 +53545,4 @@ const parseUuidFormat = (input) => {
|
|
|
53477
53545
|
return numbers;
|
|
53478
53546
|
};
|
|
53479
53547
|
|
|
53480
|
-
export { Accordion, AccordionItem, AvatarInput, ButtonInput, CURRENCIES, CheckboxGroupInput, Codex, CodexControls, CodexItem, Column, ConditionalTrigger, Container, CreditCardInput, CurrencyInput, DatePicker, DateRangePicker, DateTimePicker, Dropdown, File$1 as File, FileMultiple, FlagIcon, Icon, ImageOutput, Input$2 as Input, MultipleSelect, OptionSelect, PasswordInput, PhoneInput, RadioGroupInput, RangeSlider, Row, SectionTitle, SliderInput, StockInput, R as Theme, N as ThemePanel, Toggle, UUIDInput, parseUuidFormat, primeMatrix,
|
|
53548
|
+
export { Accordion, AccordionItem, AvatarInput, ButtonInput, CURRENCIES, CheckboxGroupInput, Codex, CodexControls, CodexItem, Column, ConditionalTrigger, Container, CreditCardInput, CurrencyInput, DatePicker, DateRangePicker, DateTimePicker, Dropdown, File$1 as File, FileMultiple, FlagIcon, Icon, ImageOutput, Input$2 as Input, MultipleSelect, OptionSelect, PasswordInput, PhoneInput, RadioGroupInput, RangeSlider, Row, SectionTitle, SliderInput, StockInput, Teletraan1, R as Theme, N as ThemePanel, Toggle, UUIDInput, parseUuidFormat, primeMatrix, useStepper, vectorSigma, xFormSchema };
|
|
@@ -1,4 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { xForm } from 'utils/architect';
|
|
3
3
|
export type teletraan1Display = 'accordion' | 'codice' | 'codex' | 'dual';
|
|
4
|
-
export
|
|
4
|
+
export interface Teletraan1Props {
|
|
5
|
+
xFormModel: xForm;
|
|
6
|
+
readOnlyMode?: boolean;
|
|
7
|
+
displayMode?: teletraan1Display;
|
|
8
|
+
brandColor?: string;
|
|
9
|
+
}
|
|
10
|
+
export declare const Teletraan1: ({ xFormModel, readOnlyMode, displayMode, brandColor }: Teletraan1Props) => React.JSX.Element;
|