@emeraldemperaur/vector-sigma 1.4.26 → 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 +205 -10
- package/lib/index.esm.js +205 -11
- package/lib/types/index.d.ts +1 -0
- 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
|
@@ -12741,8 +12741,15 @@ const formatBytes = (bytes, decimals = 2) => {
|
|
|
12741
12741
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
12742
12742
|
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
|
|
12743
12743
|
};
|
|
12744
|
-
|
|
12745
|
-
optionid: crypto.randomUUID()
|
|
12744
|
+
const InputOptionsPlaceholder = {
|
|
12745
|
+
optionid: crypto.randomUUID(),
|
|
12746
|
+
text: "",
|
|
12747
|
+
optionvalue: "",
|
|
12748
|
+
tag: "",
|
|
12749
|
+
score: 0,
|
|
12750
|
+
note: "",
|
|
12751
|
+
optionurl: ""
|
|
12752
|
+
};
|
|
12746
12753
|
|
|
12747
12754
|
const ButtonInput = (_a) => {
|
|
12748
12755
|
var { inputtype = 'button-outline', type = 'button', alias, readOnly, style, width, children, newRow, isHinted, hintText, hintUrl } = _a, props = __rest$1(_a, ["inputtype", "type", "alias", "readOnly", "style", "width", "children", "newRow", "isHinted", "hintText", "hintUrl"]);
|
|
@@ -48511,14 +48518,6 @@ const SectionTitle = ({ title, width = 12, newRow = true, size = "5", subsize =
|
|
|
48511
48518
|
} })))));
|
|
48512
48519
|
};
|
|
48513
48520
|
|
|
48514
|
-
const Container = (_a) => {
|
|
48515
|
-
var { fluid, children } = _a, props = __rest$1(_a, ["fluid", "children"]);
|
|
48516
|
-
if (fluid) {
|
|
48517
|
-
return (React.createElement(p$8, { width: "100%", px: "3", className: props.className }, children));
|
|
48518
|
-
}
|
|
48519
|
-
return (React.createElement(p$2, Object.assign({ size: "3", px: "3" }, props), children));
|
|
48520
|
-
};
|
|
48521
|
-
|
|
48522
48521
|
const Row = ({ children, className, gap = "4" }) => {
|
|
48523
48522
|
return (React.createElement(o$6, { columns: "12", gap: gap, width: "auto", className: className }, children));
|
|
48524
48523
|
};
|
|
@@ -48850,6 +48849,201 @@ const CodexControls = ({ nextStepId, prevStepId, nextLabel = "Continue", prevLab
|
|
|
48850
48849
|
finishLabel)))));
|
|
48851
48850
|
};
|
|
48852
48851
|
|
|
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
|
+
});
|
|
48883
|
+
const inputAlphaTrion = (inputAlias, inputType, inputWidth, inputLabel, inputMinValue, inputMaxValue, defaultValue, inputOptions, stepValue, inputHeight, toggledInput, newRow, inputPlaceholder, readOnly, isHinted, hintText, hintUrl, errorText, inputUID) => {
|
|
48884
|
+
if (inputWidth == null || inputWidth > 12)
|
|
48885
|
+
inputWidth = 4;
|
|
48886
|
+
if (inputHeight == null)
|
|
48887
|
+
inputHeight = 4;
|
|
48888
|
+
if (inputUID == null)
|
|
48889
|
+
inputUID = crypto.randomUUID();
|
|
48890
|
+
if (readOnlyMode)
|
|
48891
|
+
readOnly = true;
|
|
48892
|
+
const normalizedType = inputType.toLocaleLowerCase();
|
|
48893
|
+
switch (true) {
|
|
48894
|
+
case avatarInputType.includes(normalizedType):
|
|
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 });
|
|
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):
|
|
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 });
|
|
48900
|
+
case conditionalInputType.includes(normalizedType):
|
|
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 });
|
|
48902
|
+
case datePickerInputType.includes(normalizedType):
|
|
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 });
|
|
48904
|
+
case dateRangePickerInputType.includes(normalizedType):
|
|
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 });
|
|
48906
|
+
case dateTimePickerInputType.includes(normalizedType):
|
|
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 });
|
|
48908
|
+
case dropdownInputType.includes(normalizedType):
|
|
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 });
|
|
48910
|
+
case fileInputType.includes(normalizedType):
|
|
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 });
|
|
48912
|
+
case fileMultipleInputType.includes(normalizedType):
|
|
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 });
|
|
48914
|
+
case imageOutputType.includes(normalizedType):
|
|
48915
|
+
return React.createElement(ImageOutput, { id: inputAlias, src: defaultValue, alt: inputPlaceholder, width: inputWidth, height: inputHeight });
|
|
48916
|
+
case textInputType.includes(normalizedType):
|
|
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 });
|
|
48918
|
+
case passwordInputType.includes(normalizedType):
|
|
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 });
|
|
48920
|
+
case phoneInputType.includes(normalizedType):
|
|
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 });
|
|
48922
|
+
case creditCardInputType.includes(normalizedType):
|
|
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 });
|
|
48924
|
+
case currencyInputType.includes(normalizedType):
|
|
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 });
|
|
48926
|
+
case stockInputType.includes(normalizedType):
|
|
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 });
|
|
48928
|
+
case radioInputType.includes(normalizedType):
|
|
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 });
|
|
48930
|
+
case selectInputType.includes(normalizedType):
|
|
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 });
|
|
48932
|
+
case selectMultipleInputType.includes(normalizedType):
|
|
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 });
|
|
48934
|
+
case sliderInputType.includes(normalizedType):
|
|
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 });
|
|
48936
|
+
case rangeSliderInputType.includes(normalizedType):
|
|
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 });
|
|
48938
|
+
case toggleInputType.includes(normalizedType):
|
|
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 });
|
|
48940
|
+
default:
|
|
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 });
|
|
48942
|
+
}
|
|
48943
|
+
};
|
|
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,
|
|
49014
|
+
"Accordion Display",
|
|
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()));
|
|
49037
|
+
};
|
|
49038
|
+
|
|
49039
|
+
const Container = (_a) => {
|
|
49040
|
+
var { fluid, children } = _a, props = __rest$1(_a, ["fluid", "children"]);
|
|
49041
|
+
if (fluid) {
|
|
49042
|
+
return (React.createElement(p$8, { width: "100%", px: "3", className: props.className }, children));
|
|
49043
|
+
}
|
|
49044
|
+
return (React.createElement(p$2, Object.assign({ size: "3", px: "3" }, props), children));
|
|
49045
|
+
};
|
|
49046
|
+
|
|
48853
49047
|
/** A special constant with type `never` */
|
|
48854
49048
|
function $constructor(name, initializer, params) {
|
|
48855
49049
|
function init(inst, def) {
|
|
@@ -53405,6 +53599,7 @@ exports.Row = Row;
|
|
|
53405
53599
|
exports.SectionTitle = SectionTitle;
|
|
53406
53600
|
exports.SliderInput = SliderInput;
|
|
53407
53601
|
exports.StockInput = StockInput;
|
|
53602
|
+
exports.Teletraan1 = Teletraan1;
|
|
53408
53603
|
exports.Theme = R;
|
|
53409
53604
|
exports.ThemePanel = N;
|
|
53410
53605
|
exports.Toggle = Toggle;
|
package/lib/index.esm.js
CHANGED
|
@@ -12721,8 +12721,15 @@ const formatBytes = (bytes, decimals = 2) => {
|
|
|
12721
12721
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
12722
12722
|
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
|
|
12723
12723
|
};
|
|
12724
|
-
|
|
12725
|
-
optionid: crypto.randomUUID()
|
|
12724
|
+
const InputOptionsPlaceholder = {
|
|
12725
|
+
optionid: crypto.randomUUID(),
|
|
12726
|
+
text: "",
|
|
12727
|
+
optionvalue: "",
|
|
12728
|
+
tag: "",
|
|
12729
|
+
score: 0,
|
|
12730
|
+
note: "",
|
|
12731
|
+
optionurl: ""
|
|
12732
|
+
};
|
|
12726
12733
|
|
|
12727
12734
|
const ButtonInput = (_a) => {
|
|
12728
12735
|
var { inputtype = 'button-outline', type = 'button', alias, readOnly, style, width, children, newRow, isHinted, hintText, hintUrl } = _a, props = __rest$1(_a, ["inputtype", "type", "alias", "readOnly", "style", "width", "children", "newRow", "isHinted", "hintText", "hintUrl"]);
|
|
@@ -48491,14 +48498,6 @@ const SectionTitle = ({ title, width = 12, newRow = true, size = "5", subsize =
|
|
|
48491
48498
|
} })))));
|
|
48492
48499
|
};
|
|
48493
48500
|
|
|
48494
|
-
const Container = (_a) => {
|
|
48495
|
-
var { fluid, children } = _a, props = __rest$1(_a, ["fluid", "children"]);
|
|
48496
|
-
if (fluid) {
|
|
48497
|
-
return (React__default.createElement(p$8, { width: "100%", px: "3", className: props.className }, children));
|
|
48498
|
-
}
|
|
48499
|
-
return (React__default.createElement(p$2, Object.assign({ size: "3", px: "3" }, props), children));
|
|
48500
|
-
};
|
|
48501
|
-
|
|
48502
48501
|
const Row = ({ children, className, gap = "4" }) => {
|
|
48503
48502
|
return (React__default.createElement(o$6, { columns: "12", gap: gap, width: "auto", className: className }, children));
|
|
48504
48503
|
};
|
|
@@ -48830,6 +48829,201 @@ const CodexControls = ({ nextStepId, prevStepId, nextLabel = "Continue", prevLab
|
|
|
48830
48829
|
finishLabel)))));
|
|
48831
48830
|
};
|
|
48832
48831
|
|
|
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
|
+
});
|
|
48863
|
+
const inputAlphaTrion = (inputAlias, inputType, inputWidth, inputLabel, inputMinValue, inputMaxValue, defaultValue, inputOptions, stepValue, inputHeight, toggledInput, newRow, inputPlaceholder, readOnly, isHinted, hintText, hintUrl, errorText, inputUID) => {
|
|
48864
|
+
if (inputWidth == null || inputWidth > 12)
|
|
48865
|
+
inputWidth = 4;
|
|
48866
|
+
if (inputHeight == null)
|
|
48867
|
+
inputHeight = 4;
|
|
48868
|
+
if (inputUID == null)
|
|
48869
|
+
inputUID = crypto.randomUUID();
|
|
48870
|
+
if (readOnlyMode)
|
|
48871
|
+
readOnly = true;
|
|
48872
|
+
const normalizedType = inputType.toLocaleLowerCase();
|
|
48873
|
+
switch (true) {
|
|
48874
|
+
case avatarInputType.includes(normalizedType):
|
|
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 });
|
|
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):
|
|
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 });
|
|
48880
|
+
case conditionalInputType.includes(normalizedType):
|
|
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 });
|
|
48882
|
+
case datePickerInputType.includes(normalizedType):
|
|
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 });
|
|
48884
|
+
case dateRangePickerInputType.includes(normalizedType):
|
|
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 });
|
|
48886
|
+
case dateTimePickerInputType.includes(normalizedType):
|
|
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 });
|
|
48888
|
+
case dropdownInputType.includes(normalizedType):
|
|
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 });
|
|
48890
|
+
case fileInputType.includes(normalizedType):
|
|
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 });
|
|
48892
|
+
case fileMultipleInputType.includes(normalizedType):
|
|
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 });
|
|
48894
|
+
case imageOutputType.includes(normalizedType):
|
|
48895
|
+
return React__default.createElement(ImageOutput, { id: inputAlias, src: defaultValue, alt: inputPlaceholder, width: inputWidth, height: inputHeight });
|
|
48896
|
+
case textInputType.includes(normalizedType):
|
|
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 });
|
|
48898
|
+
case passwordInputType.includes(normalizedType):
|
|
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 });
|
|
48900
|
+
case phoneInputType.includes(normalizedType):
|
|
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 });
|
|
48902
|
+
case creditCardInputType.includes(normalizedType):
|
|
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 });
|
|
48904
|
+
case currencyInputType.includes(normalizedType):
|
|
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 });
|
|
48906
|
+
case stockInputType.includes(normalizedType):
|
|
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 });
|
|
48908
|
+
case radioInputType.includes(normalizedType):
|
|
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 });
|
|
48910
|
+
case selectInputType.includes(normalizedType):
|
|
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 });
|
|
48912
|
+
case selectMultipleInputType.includes(normalizedType):
|
|
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 });
|
|
48914
|
+
case sliderInputType.includes(normalizedType):
|
|
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 });
|
|
48916
|
+
case rangeSliderInputType.includes(normalizedType):
|
|
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 });
|
|
48918
|
+
case toggleInputType.includes(normalizedType):
|
|
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 });
|
|
48920
|
+
default:
|
|
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 });
|
|
48922
|
+
}
|
|
48923
|
+
};
|
|
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,
|
|
48994
|
+
"Accordion Display",
|
|
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()));
|
|
49017
|
+
};
|
|
49018
|
+
|
|
49019
|
+
const Container = (_a) => {
|
|
49020
|
+
var { fluid, children } = _a, props = __rest$1(_a, ["fluid", "children"]);
|
|
49021
|
+
if (fluid) {
|
|
49022
|
+
return (React__default.createElement(p$8, { width: "100%", px: "3", className: props.className }, children));
|
|
49023
|
+
}
|
|
49024
|
+
return (React__default.createElement(p$2, Object.assign({ size: "3", px: "3" }, props), children));
|
|
49025
|
+
};
|
|
49026
|
+
|
|
48833
49027
|
/** A special constant with type `never` */
|
|
48834
49028
|
function $constructor(name, initializer, params) {
|
|
48835
49029
|
function init(inst, def) {
|
|
@@ -53351,4 +53545,4 @@ const parseUuidFormat = (input) => {
|
|
|
53351
53545
|
return numbers;
|
|
53352
53546
|
};
|
|
53353
53547
|
|
|
53354
|
-
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, useStepper, vectorSigma, xFormSchema };
|
|
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 };
|
package/lib/types/index.d.ts
CHANGED
|
@@ -28,6 +28,7 @@ export * from './components/slider/slider';
|
|
|
28
28
|
export * from './components/slider/range';
|
|
29
29
|
export * from './components/toggle/toggle';
|
|
30
30
|
export * from './components/xtitle/xtitle';
|
|
31
|
+
export * from './teletraan1';
|
|
31
32
|
export * from './layouts/container/container';
|
|
32
33
|
export * from './layouts/column/column';
|
|
33
34
|
export * from './layouts/row/row';
|
|
@@ -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;
|