@solidstarters/solid-core-ui 1.1.210 → 1.1.211

package/dist/components/core/form/fields/SolidLongTextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidLongTextField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/form/fields/SolidLongTextField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAI3E,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAW/D,qBAAa,kBAAmB,YAAW,WAAW;IAElD,OAAO,CAAC,YAAY,CAAkB;gBAE1B,YAAY,EAAE,eAAe;IAIzC,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;IAOnD,YAAY,IAAI,GAAG;IASnB,gBAAgB,IAAI,MAAM;IA6B1B,MAAM,CAAC,MAAM,EAAE,YAAY;IAmC3B,yBAAyB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY;CAajE;AAED,eAAO,MAAM,6BAA6B,6BAA8B,yBAAyB,4CA8ChG,CAAA;AAED,eAAO,MAAM,+BAA+B,6BAA8B,yBAAyB,4CAwHlG,CAAA;AAED,eAAO,MAAM,+BAA+B,6BAA8B,yBAAyB,4CA2LlG,CAAC;AAEF,eAAO,MAAM,wBAAwB,6BAA8B,yBAAyB,4CAiD3F,CAAC;AAEF,eAAO,MAAM,gCAAgC,8BAG1C,yBAAyB,4CAkF3B,CAAC"}
+{"version":3,"file":"SolidLongTextField.d.ts","sourceRoot":"./","sources":["components/core/form/fields/SolidLongTextField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAI3E,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAUzE,qBAAa,kBAAmB,YAAW,WAAW;IAElD,OAAO,CAAC,YAAY,CAAkB;gBAE1B,YAAY,EAAE,eAAe;IAIzC,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;IAOnD,YAAY,IAAI,GAAG;IASnB,gBAAgB,IAAI,GAAG,CAAC,MAAM;IA6B9B,MAAM,CAAC,MAAM,EAAE,YAAY;IAmC3B,yBAAyB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY;CAajE;AAED,eAAO,MAAM,6BAA6B,6BAA8B,yBAAyB,4CA8ChG,CAAA;AAED,eAAO,MAAM,+BAA+B,6BAA8B,yBAAyB,4CAwHlG,CAAA;AAED,eAAO,MAAM,+BAA+B,6BAA8B,yBAAyB,4CA2LlG,CAAC;AAEF,eAAO,MAAM,wBAAwB,6BAA8B,yBAAyB,4CAiD3F,CAAC;AAEF,eAAO,MAAM,gCAAgC,8BAG1C,yBAAyB,4CAkF3B,CAAC"}

package/dist/components/core/form/fields/SolidLongTextField.js

@@ -1,24 +1,4 @@
 'use client';
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { InputTextarea } from "primereact/inputtextarea";
 import { Message } from "primereact/message";
@@ -33,29 +13,27 @@ import { Dropdown } from "primereact/dropdown";
 import { InputText } from "primereact/inputtext";
 import { Button } from "primereact/button";
 import { ERROR_MESSAGES } from "../../../../constants/error-messages";
-var SolidLongTextField = /** @class */ (function () {
-    function SolidLongTextField(fieldContext) {
+export class SolidLongTextField {
+    constructor(fieldContext) {
         this.fieldContext = fieldContext;
     }
-    SolidLongTextField.prototype.updateFormData = function (value, formData) {
-        var fieldLayoutInfo = this.fieldContext.field;
+    updateFormData(value, formData) {
+        const fieldLayoutInfo = this.fieldContext.field;
         if (value !== undefined && value !== null) {
             formData.append(fieldLayoutInfo.attrs.name, value);
         }
-    };
-    SolidLongTextField.prototype.initialValue = function () {
-        var _a, _b;
-        var fieldName = this.fieldContext.field.attrs.name;
-        var fieldDefaultValue = (_b = (_a = this.fieldContext) === null || _a === void 0 ? void 0 : _a.fieldMetadata) === null || _b === void 0 ? void 0 : _b.defaultValue;
-        var existingValue = this.fieldContext.data[fieldName];
+    }
+    initialValue() {
+        const fieldName = this.fieldContext.field.attrs.name;
+        const fieldDefaultValue = this.fieldContext?.fieldMetadata?.defaultValue;
+        const existingValue = this.fieldContext.data[fieldName];
         return existingValue !== undefined && existingValue !== null ? existingValue : fieldDefaultValue || '';
-    };
-    SolidLongTextField.prototype.validationSchema = function () {
-        var _a, _b;
-        var schema = Yup.string();
-        var fieldMetadata = this.fieldContext.fieldMetadata;
-        var fieldLayoutInfo = this.fieldContext.field;
-        var fieldLabel = (_a = fieldLayoutInfo.attrs.label) !== null && _a !== void 0 ? _a : fieldMetadata.displayName;
+    }
+    validationSchema() {
+        let schema = Yup.string();
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const fieldLayoutInfo = this.fieldContext.field;
+        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         // 1. required 
         if (fieldMetadata.required) {
             schema = schema.required(ERROR_MESSAGES.FIELD_REUQIRED(fieldLabel));
@@ -72,73 +50,64 @@ var SolidLongTextField = /** @class */ (function () {
         }
         // 3. regular expression
         if (fieldMetadata.regexPattern) {
-            var regexPatternNotMatchingErrorMsg = (_b = fieldMetadata.regexPatternNotMatchingErrorMsg) !== null && _b !== void 0 ? _b : "".concat(fieldLabel, " has invalid data.");
+            const regexPatternNotMatchingErrorMsg = fieldMetadata.regexPatternNotMatchingErrorMsg ?? `${fieldLabel} has invalid data.`;
             schema = schema.matches(fieldMetadata.regexPattern, regexPatternNotMatchingErrorMsg);
         }
         return schema;
-    };
-    SolidLongTextField.prototype.render = function (formik) {
-        var _a;
-        var fieldLayoutInfo = this.fieldContext.field;
-        var className = ((_a = fieldLayoutInfo.attrs) === null || _a === void 0 ? void 0 : _a.className) || 'field col-12';
-        var isFormFieldValid = function (formik, fieldName) { return formik.touched[fieldName] && formik.errors[fieldName]; };
-        var viewWidget = fieldLayoutInfo.attrs.viewWidget;
-        var editWidget = fieldLayoutInfo.attrs.editWidget;
+    }
+    render(formik) {
+        const fieldLayoutInfo = this.fieldContext.field;
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+        const isFormFieldValid = (formik, fieldName) => formik.touched[fieldName] && formik.errors[fieldName];
+        let viewWidget = fieldLayoutInfo.attrs.viewWidget;
+        let editWidget = fieldLayoutInfo.attrs.editWidget;
         if (!editWidget) {
             editWidget = 'DefaultLongTextFormEditWidget';
         }
         if (!viewWidget) {
             viewWidget = 'DefaultShortTextFormViewWidget';
         }
-        var viewMode = this.fieldContext.viewMode;
+        const viewMode = this.fieldContext.viewMode;
         return (_jsx(_Fragment, { children: _jsxs("div", { className: className, children: [viewMode === "view" &&
                         this.renderExtensionRenderMode(viewWidget, formik), viewMode === "edit" && (_jsx(_Fragment, { children: editWidget &&
                             this.renderExtensionRenderMode(editWidget, formik) }))] }) }));
-    };
-    SolidLongTextField.prototype.renderExtensionRenderMode = function (widget, formik) {
-        var DynamicWidget = getExtensionComponent(widget);
-        var widgetProps = {
+    }
+    renderExtensionRenderMode(widget, formik) {
+        let DynamicWidget = getExtensionComponent(widget);
+        const widgetProps = {
             formik: formik,
             fieldContext: this.fieldContext,
         };
-        return (_jsx(_Fragment, { children: DynamicWidget && _jsx(DynamicWidget, __assign({}, widgetProps)) }));
-    };
-    return SolidLongTextField;
-}());
-export { SolidLongTextField };
-export var DefaultLongTextFormEditWidget = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    var formik = _a.formik, fieldContext = _a.fieldContext;
-    var fieldMetadata = fieldContext.fieldMetadata;
-    var fieldLayoutInfo = fieldContext.field;
-    var fieldLabel = (_b = fieldLayoutInfo.attrs.label) !== null && _b !== void 0 ? _b : fieldMetadata.displayName;
-    var solidFormViewMetaData = fieldContext.solidFormViewMetaData;
-    var showFieldLabel = (_c = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _c === void 0 ? void 0 : _c.showLabel;
-    var readOnlyPermission = fieldContext.readOnly;
-    var fieldDisabled = (_d = fieldLayoutInfo.attrs) === null || _d === void 0 ? void 0 : _d.disabled;
-    var fieldReadonly = (_e = fieldLayoutInfo.attrs) === null || _e === void 0 ? void 0 : _e.readonly;
-    var formDisabled = (_h = (_g = (_f = solidFormViewMetaData.data.solidView) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.attrs) === null || _h === void 0 ? void 0 : _h.disabled;
-    var formReadonly = (_l = (_k = (_j = solidFormViewMetaData.data.solidView) === null || _j === void 0 ? void 0 : _j.layout) === null || _k === void 0 ? void 0 : _k.attrs) === null || _l === void 0 ? void 0 : _l.readonly;
-    var isFormFieldValid = function (formik, fieldName) { return formik.touched[fieldName] && formik.errors[fieldName]; };
+        return (_jsx(_Fragment, { children: DynamicWidget && _jsx(DynamicWidget, { ...widgetProps }) }));
+    }
+}
+export const DefaultLongTextFormEditWidget = ({ formik, fieldContext }) => {
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const solidFormViewMetaData = fieldContext.solidFormViewMetaData;
+    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+    const readOnlyPermission = fieldContext.readOnly;
+    const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
+    const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
+    const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
+    const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
+    const isFormFieldValid = (formik, fieldName) => formik.touched[fieldName] && formik.errors[fieldName];
     return (_jsxs("div", { className: "relative", children: [_jsxs("div", { className: "flex flex-column gap-2 mt-1 sm:mt-2 md:mt-3 lg:mt-4", children: [showFieldLabel != false &&
-                        _jsxs("label", { htmlFor: fieldLayoutInfo.attrs.name, className: "form-field-label", children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] }), _jsx(InputTextarea, { readOnly: formReadonly || fieldReadonly || readOnlyPermission, disabled: formDisabled || fieldDisabled, id: fieldLayoutInfo.attrs.name, "aria-describedby": "".concat(fieldLayoutInfo.attrs.name, "-help"), 
+                        _jsxs("label", { htmlFor: fieldLayoutInfo.attrs.name, className: "form-field-label", children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] }), _jsx(InputTextarea, { readOnly: formReadonly || fieldReadonly || readOnlyPermission, disabled: formDisabled || fieldDisabled, id: fieldLayoutInfo.attrs.name, "aria-describedby": `${fieldLayoutInfo.attrs.name}-help`, 
                         // onChange={formik.handleChange}
-                        onChange: function (e) { return fieldContext.onChange(e, 'onFieldChange'); }, value: formik.values[fieldLayoutInfo.attrs.name] || '', rows: 5, cols: 30 })] }), isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (_jsx("div", { className: "absolute mt-1", children: _jsx(Message, { severity: "error", text: (_m = formik === null || formik === void 0 ? void 0 : formik.errors[fieldLayoutInfo.attrs.name]) === null || _m === void 0 ? void 0 : _m.toString() }) }))] }));
+                        onChange: (e) => fieldContext.onChange(e, 'onFieldChange'), value: formik.values[fieldLayoutInfo.attrs.name] || '', rows: 5, cols: 30 })] }), isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (_jsx("div", { className: "absolute mt-1", children: _jsx(Message, { severity: "error", text: formik?.errors[fieldLayoutInfo.attrs.name]?.toString() }) }))] }));
 };
-export var DynamicJsonEditorFormViewWidget = function (_a) {
-    var _b, _c, _d, _e, _f;
-    var formik = _a.formik, fieldContext = _a.fieldContext;
-    var fieldMetadata = fieldContext.fieldMetadata;
-    var fieldLayoutInfo = fieldContext.field;
-    var fieldLabel = (_b = fieldLayoutInfo.attrs.label) !== null && _b !== void 0 ? _b : fieldMetadata.displayName;
-    var readOnly = ((_c = fieldLayoutInfo.attrs) === null || _c === void 0 ? void 0 : _c.readonly) || fieldContext.readOnly;
-    var disabled = (_d = fieldLayoutInfo.attrs) === null || _d === void 0 ? void 0 : _d.disabled;
+export const DynamicJsonEditorFormViewWidget = ({ formik, fieldContext }) => {
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const readOnly = fieldLayoutInfo.attrs?.readonly || fieldContext.readOnly;
+    const disabled = fieldLayoutInfo.attrs?.disabled;
     // Default to SQL
-    var language = fieldLayoutInfo.attrs.editorLanguage || 'ts';
-    var value = formik.values[fieldLayoutInfo.attrs.name] || '';
-    var isFormFieldValid = function (formik, fieldName) {
-        return formik.touched[fieldName] && formik.errors[fieldName];
-    };
+    const language = fieldLayoutInfo.attrs.editorLanguage || 'ts';
+    const value = formik.values[fieldLayoutInfo.attrs.name] || '';
+    const isFormFieldValid = (formik, fieldName) => formik.touched[fieldName] && formik.errors[fieldName];
     // Sample schema, this comes from the metadata...
     // {
     //     key1: {
@@ -156,14 +125,14 @@ export var DynamicJsonEditorFormViewWidget = function (_a) {
     //         ],
     //     },
     // };
-    var fieldJsonSchema = (_e = fieldLayoutInfo.attrs) === null || _e === void 0 ? void 0 : _e.jsonSchema;
+    const fieldJsonSchema = fieldLayoutInfo.attrs?.jsonSchema;
     if (!fieldJsonSchema) {
         return _jsx(Message, { severity: "error", text: "Field Layout Attributes are missing jsonSchema, cannot render with widget jsonEditor without specifying the schema." });
     }
-    var _g = useState(JSON.parse(value || '[]')), data = _g[0], setData = _g[1];
-    var renderInput = function (value, key, index) {
+    const [data, setData] = useState(JSON.parse(value || '[]'));
+    const renderInput = (value, key, index) => {
         // @ts-ignore
-        var meta = fieldJsonSchema[key];
+        const meta = fieldJsonSchema[key];
         if (!meta)
             return null;
         if (meta.type === "string" || meta.type === "shortText") {
@@ -178,33 +147,26 @@ export var DynamicJsonEditorFormViewWidget = function (_a) {
         if (meta.type === "selectionStatic") {
             return (_jsx(Dropdown, { value: value, 
                 // @ts-ignore
-                options: meta.allowedValues.map(function (v) { return ({ label: v, value: v }); }), placeholder: "Select...", readOnly: true, disabled: true }));
+                options: meta.allowedValues.map((v) => ({ label: v, value: v })), placeholder: "Select...", readOnly: true, disabled: true }));
         }
         return null;
     };
-    return (_jsxs("div", { className: "mt-4", children: [((_f = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _f === void 0 ? void 0 : _f.showLabel) !== false && (_jsxs("label", { className: "form-field-label mb-10", children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] })), _jsx("div", { className: "p-4 border-round surface-card shadow-1", children: _jsx("div", { className: "flex flex-column gap-2", children: 
+    return (_jsxs("div", { className: "mt-4", children: [fieldLayoutInfo?.attrs?.showLabel !== false && (_jsxs("label", { className: "form-field-label mb-10", children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] })), _jsx("div", { className: "p-4 border-round surface-card shadow-1", children: _jsx("div", { className: "flex flex-column gap-2", children: 
                     // @ts-ignore
-                    data.map(function (row, idx) {
-                        var _a, _b;
-                        return (_jsx("div", { className: "flex ".concat(((_a = fieldLayoutInfo.attrs) === null || _a === void 0 ? void 0 : _a.className) ? "flex-".concat((_b = fieldLayoutInfo.attrs) === null || _b === void 0 ? void 0 : _b.className) : 'flex-row', " border-1 border-round p-3 gap-2"), children: Object.keys(fieldJsonSchema).map(function (key) { return (_jsxs("div", { className: "flex flex-column gap-1", children: [_jsx("label", { children: key.charAt(0).toUpperCase() + key.slice(1) }), 
-                                    // @ts-ignore
-                                    renderInput(row[key], key, idx)] }, key)); }) }, idx));
-                    }) }) })] }));
+                    data.map((row, idx) => (_jsx("div", { className: `flex ${fieldLayoutInfo.attrs?.className ? `flex-${fieldLayoutInfo.attrs?.className}` : 'flex-row'} border-1 border-round p-3 gap-2`, children: Object.keys(fieldJsonSchema).map((key) => (_jsxs("div", { className: "flex flex-column gap-1", children: [_jsx("label", { children: key.charAt(0).toUpperCase() + key.slice(1) }), 
+                                // @ts-ignore
+                                renderInput(row[key], key, idx)] }, key))) }, idx))) }) })] }));
 };
-export var DynamicJsonEditorFormEditWidget = function (_a) {
-    var _b, _c, _d, _e, _f, _g;
-    var formik = _a.formik, fieldContext = _a.fieldContext;
-    var fieldMetadata = fieldContext.fieldMetadata;
-    var fieldLayoutInfo = fieldContext.field;
-    var fieldLabel = (_b = fieldLayoutInfo.attrs.label) !== null && _b !== void 0 ? _b : fieldMetadata.displayName;
-    var readOnly = ((_c = fieldLayoutInfo.attrs) === null || _c === void 0 ? void 0 : _c.readonly) || fieldContext.readOnly;
-    var disabled = (_d = fieldLayoutInfo.attrs) === null || _d === void 0 ? void 0 : _d.disabled;
+export const DynamicJsonEditorFormEditWidget = ({ formik, fieldContext }) => {
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const readOnly = fieldLayoutInfo.attrs?.readonly || fieldContext.readOnly;
+    const disabled = fieldLayoutInfo.attrs?.disabled;
     // Default to SQL
-    var language = fieldLayoutInfo.attrs.editorLanguage || 'ts';
-    var value = formik.values[fieldLayoutInfo.attrs.name] || '';
-    var isFormFieldValid = function (formik, fieldName) {
-        return formik.touched[fieldName] && formik.errors[fieldName];
-    };
+    const language = fieldLayoutInfo.attrs.editorLanguage || 'ts';
+    const value = formik.values[fieldLayoutInfo.attrs.name] || '';
+    const isFormFieldValid = (formik, fieldName) => formik.touched[fieldName] && formik.errors[fieldName];
     // Sample schema, this comes from the metadata...
     // {
     //     key1: {
@@ -222,131 +184,120 @@ export var DynamicJsonEditorFormEditWidget = function (_a) {
     //         ],
     //     },
     // };
-    var fieldJsonSchema = (_e = fieldLayoutInfo.attrs) === null || _e === void 0 ? void 0 : _e.jsonSchema;
+    const fieldJsonSchema = fieldLayoutInfo.attrs?.jsonSchema;
     if (!fieldJsonSchema) {
         return _jsx(Message, { severity: "error", text: "Field Layout Attributes are missing jsonSchema, cannot render with widget jsonEditor without specifying the schema." });
     }
-    var _h = useState(JSON.parse(value || '[]')), data = _h[0], setData = _h[1];
-    var handleAllChange = function (updated) {
+    const [data, setData] = useState(JSON.parse(value || '[]'));
+    const handleAllChange = (updated) => {
         setData(updated);
         formik.setFieldValue(fieldLayoutInfo.attrs.name, JSON.stringify(updated));
     };
-    var handleChange = function (index, key, value) {
-        var updated = __spreadArray([], data, true);
+    const handleChange = (index, key, value) => {
+        const updated = [...data];
         // @ts-ignore
         updated[index][key] = value;
         handleAllChange(updated);
     };
-    var handleAdd = function () {
-        var newItem = {};
-        Object.keys(fieldJsonSchema).forEach(function (key) {
+    const handleAdd = () => {
+        const newItem = {};
+        Object.keys(fieldJsonSchema).forEach((key) => {
             // @ts-ignore
             newItem[key] = "";
         });
         // @ts-ignore
-        handleAllChange(__spreadArray(__spreadArray([], data, true), [newItem], false));
+        handleAllChange([...data, newItem]);
     };
-    var handleRemove = function (index) {
-        var updated = __spreadArray([], data, true);
+    const handleRemove = (index) => {
+        const updated = [...data];
         updated.splice(index, 1);
         handleAllChange(updated);
     };
-    var renderInput = function (value, key, index) {
+    const renderInput = (value, key, index) => {
         // @ts-ignore
-        var meta = fieldJsonSchema[key];
+        const meta = fieldJsonSchema[key];
         if (!meta)
             return null;
         if (meta.type === "string" || meta.type === "shortText") {
-            return (_jsx(InputText, { value: value, onChange: function (e) { return handleChange(index, key, e.target.value); }, disabled: !!disabled, readOnly: !!readOnly }));
+            return (_jsx(InputText, { value: value, onChange: (e) => handleChange(index, key, e.target.value), disabled: !!disabled, readOnly: !!readOnly }));
         }
         if (meta.type === "longText") {
-            return (_jsx(InputTextarea, { onChange: function (e) { return handleChange(index, key, e.target.value); }, value: value, rows: 10, cols: 100 }));
+            return (_jsx(InputTextarea, { onChange: (e) => handleChange(index, key, e.target.value), value: value, rows: 10, cols: 100 }));
         }
         if (meta.type === "date" || meta.type === "datetime") {
-            return (_jsx(Calendar, { value: value ? new Date(value) : null, onChange: function (e) { return handleChange(index, key, e.value); }, showTime: meta.type === "datetime", dateFormat: "yy-mm-dd", disabled: !!disabled, readOnlyInput: !!readOnly }));
+            return (_jsx(Calendar, { value: value ? new Date(value) : null, onChange: (e) => handleChange(index, key, e.value), showTime: meta.type === "datetime", dateFormat: "yy-mm-dd", disabled: !!disabled, readOnlyInput: !!readOnly }));
         }
         if (meta.type === "selectionStatic") {
             return (_jsx(Dropdown, { value: value, 
                 // @ts-ignore
-                options: meta.allowedValues.map(function (v) { return ({ label: v, value: v }); }), onChange: function (e) { return handleChange(index, key, e.value); }, placeholder: "Select...", disabled: !!disabled, readOnly: !!readOnly }));
+                options: meta.allowedValues.map((v) => ({ label: v, value: v })), onChange: (e) => handleChange(index, key, e.value), placeholder: "Select...", disabled: !!disabled, readOnly: !!readOnly }));
         }
         return null;
     };
-    return (_jsxs("div", { className: "mt-4", children: [((_f = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _f === void 0 ? void 0 : _f.showLabel) !== false && (_jsxs("label", { className: "form-field-label mb-10", children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] })), _jsxs("div", { className: "p-4 border-round surface-card shadow-1", children: [_jsx("div", { className: "flex justify-content-between align-items-center mb-3", children: !disabled && !readOnly ? (_jsx(Button, { type: "button", label: "Add", icon: "pi pi-plus", onClick: handleAdd })) : null }), _jsx("div", { className: "flex flex-column gap-2", children: 
+    return (_jsxs("div", { className: "mt-4", children: [fieldLayoutInfo?.attrs?.showLabel !== false && (_jsxs("label", { className: "form-field-label mb-10", children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] })), _jsxs("div", { className: "p-4 border-round surface-card shadow-1", children: [_jsx("div", { className: "flex justify-content-between align-items-center mb-3", children: !disabled && !readOnly ? (_jsx(Button, { type: "button", label: "Add", icon: "pi pi-plus", onClick: handleAdd })) : null }), _jsx("div", { className: "flex flex-column gap-2", children: 
                         // @ts-ignore
-                        data.map(function (row, idx) {
-                            var _a, _b;
-                            return (_jsxs("div", { className: "flex ".concat(((_a = fieldLayoutInfo.attrs) === null || _a === void 0 ? void 0 : _a.className) ? "flex-".concat((_b = fieldLayoutInfo.attrs) === null || _b === void 0 ? void 0 : _b.className) : 'flex-row', " border-1 border-round p-3 gap-2"), children: [_jsx("div", { className: "flex gap-3 align-items-center", children: Object.keys(fieldJsonSchema).map(function (key) { return (_jsxs("div", { className: "flex flex-column gap-1", children: [_jsx("label", { children: key.charAt(0).toUpperCase() + key.slice(1) }), 
-                                                // @ts-ignore
-                                                renderInput(row[key], key, idx)] }, key)); }) }), !disabled && !readOnly ? (_jsx(Button, { type: "button", icon: "pi pi-minus", className: "ml-2 h-2rem w-2rem rounded-circle", onClick: function () { return handleRemove(idx); } })) : null] }, idx));
-                        }) }), ((_g = fieldLayoutInfo.attrs) === null || _g === void 0 ? void 0 : _g.jsonSchemaShowPreview) &&
+                        data.map((row, idx) => (_jsxs("div", { className: `flex ${fieldLayoutInfo.attrs?.className ? `flex-${fieldLayoutInfo.attrs?.className}` : 'flex-row'} border-1 border-round p-3 gap-2`, children: [_jsx("div", { className: "flex gap-3 align-items-center", children: Object.keys(fieldJsonSchema).map((key) => (_jsxs("div", { className: "flex flex-column gap-1", children: [_jsx("label", { children: key.charAt(0).toUpperCase() + key.slice(1) }), 
+                                            // @ts-ignore
+                                            renderInput(row[key], key, idx)] }, key))) }), !disabled && !readOnly ? (_jsx(Button, { type: "button", icon: "pi pi-minus", className: "ml-2 h-2rem w-2rem rounded-circle", onClick: () => handleRemove(idx) })) : null] }, idx))) }), fieldLayoutInfo.attrs?.jsonSchemaShowPreview &&
                         _jsx("pre", { className: "mt-4 bg-gray-100 p-3 border-round overflow-auto", children: JSON.stringify(data, null, 2) })] })] }));
 };
-export var CodeEditorFormEditWidget = function (_a) {
-    var _b, _c, _d, _e, _f;
-    var formik = _a.formik, fieldContext = _a.fieldContext;
-    var fieldMetadata = fieldContext.fieldMetadata;
-    var fieldLayoutInfo = fieldContext.field;
-    var fieldLabel = (_b = fieldLayoutInfo.attrs.label) !== null && _b !== void 0 ? _b : fieldMetadata.displayName;
-    var readOnly = ((_c = fieldLayoutInfo.attrs) === null || _c === void 0 ? void 0 : _c.readonly) || fieldContext.readOnly;
-    var disabled = (_d = fieldLayoutInfo.attrs) === null || _d === void 0 ? void 0 : _d.disabled;
+export const CodeEditorFormEditWidget = ({ formik, fieldContext }) => {
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const readOnly = fieldLayoutInfo.attrs?.readonly || fieldContext.readOnly;
+    const disabled = fieldLayoutInfo.attrs?.disabled;
     // Default to SQL
-    var language = fieldLayoutInfo.attrs.editorLanguage || 'ts';
-    var value = formik.values[fieldLayoutInfo.attrs.name] || '';
-    var isFormFieldValid = function (formik, fieldName) {
-        return formik.touched[fieldName] && formik.errors[fieldName];
-    };
-    return (_jsxs("div", { className: "mt-4", children: [((_e = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _e === void 0 ? void 0 : _e.showLabel) !== false && (_jsxs("label", { className: "form-field-label mb-10", children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] })), _jsx("div", { className: "border border-gray-300 rounded overflow-hidden", children: _jsx(Editor, { height: "200px", defaultLanguage: language, value: value, onChange: function (val) { return formik.setFieldValue(fieldLayoutInfo.attrs.name, val); }, options: {
-                        readOnly: readOnly,
+    const language = fieldLayoutInfo.attrs.editorLanguage || 'ts';
+    const value = formik.values[fieldLayoutInfo.attrs.name] || '';
+    const isFormFieldValid = (formik, fieldName) => formik.touched[fieldName] && formik.errors[fieldName];
+    return (_jsxs("div", { className: "mt-4", children: [fieldLayoutInfo?.attrs?.showLabel !== false && (_jsxs("label", { className: "form-field-label mb-10", children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] })), _jsx("div", { className: "border border-gray-300 rounded overflow-hidden", children: _jsx(Editor, { height: "200px", defaultLanguage: language, value: value, onChange: (val) => formik.setFieldValue(fieldLayoutInfo.attrs.name, val), options: {
+                        readOnly,
                         minimap: { enabled: false },
                         lineNumbers: 'on',
                         fontSize: 14,
                         scrollBeyondLastLine: false,
-                    } }) }), isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (_jsx("div", { className: "mt-1", children: _jsx(Message, { text: (_f = formik.errors[fieldLayoutInfo.attrs.name]) === null || _f === void 0 ? void 0 : _f.toString() }) }))] }));
+                    } }) }), isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (_jsx("div", { className: "mt-1", children: _jsx(Message, { text: formik.errors[fieldLayoutInfo.attrs.name]?.toString() }) }))] }));
 };
-export var DynamicSelectionStaticEditWidget = function (_a) {
-    var _b, _c;
-    var formik = _a.formik, fieldContext = _a.fieldContext;
-    var fieldLayoutInfo = fieldContext.field;
-    var fieldJsonSchema = fieldLayoutInfo.attrs.jsonSchema;
-    var name = fieldLayoutInfo.attrs.name;
-    var readOnly = ((_b = fieldLayoutInfo.attrs) === null || _b === void 0 ? void 0 : _b.readonly) || fieldContext.readOnly;
-    var disabled = (_c = fieldLayoutInfo.attrs) === null || _c === void 0 ? void 0 : _c.disabled;
-    var value = formik.values[name] || "{}";
-    var _d = useState(JSON.parse(value || "{}")), data = _d[0], setData = _d[1];
-    var handleChange = function (key, value) {
-        var _a;
-        var updated = __assign(__assign({}, data), (_a = {}, _a[key] = value, _a));
+export const DynamicSelectionStaticEditWidget = ({ formik, fieldContext, }) => {
+    const fieldLayoutInfo = fieldContext.field;
+    const fieldJsonSchema = fieldLayoutInfo.attrs.jsonSchema;
+    const name = fieldLayoutInfo.attrs.name;
+    const readOnly = fieldLayoutInfo.attrs?.readonly || fieldContext.readOnly;
+    const disabled = fieldLayoutInfo.attrs?.disabled;
+    const value = formik.values[name] || "{}";
+    const [data, setData] = useState(JSON.parse(value || "{}"));
+    const handleChange = (key, value) => {
+        const updated = { ...data, [key]: value };
         setData(updated);
         formik.setFieldValue(name, JSON.stringify(updated));
     };
-    var renderInput = function (key) {
-        var meta = fieldJsonSchema[key];
-        var val = data[key];
-        if ((meta === null || meta === void 0 ? void 0 : meta.type) === "selectionStatic") {
-            return (_jsx(Dropdown, { value: val, options: meta.allowedValues.map(function (v) { return ({
+    const renderInput = (key) => {
+        const meta = fieldJsonSchema[key];
+        const val = data[key];
+        if (meta?.type === "selectionStatic") {
+            return (_jsx(Dropdown, { value: val, options: meta.allowedValues.map((v) => ({
                     label: v,
                     value: v,
-                }); }), onChange: function (e) { return handleChange(key, e.value); }, placeholder: meta.placeHolder || "Select...", disabled: !!disabled, readOnly: !!readOnly, className: "w-full" }));
+                })), onChange: (e) => handleChange(key, e.value), placeholder: meta.placeHolder || "Select...", disabled: !!disabled, readOnly: !!readOnly, className: "w-full" }));
         }
         return null;
     };
-    var shouldShowField = function (key) {
-        var meta = fieldJsonSchema[key];
-        if (!(meta === null || meta === void 0 ? void 0 : meta.visibility))
+    const shouldShowField = (key) => {
+        const meta = fieldJsonSchema[key];
+        if (!meta?.visibility)
             return true; // default show
         if (meta.visibility === "parent") {
-            var parentKey = Object.keys(fieldJsonSchema)[0]; // assume first field is parent
+            const parentKey = Object.keys(fieldJsonSchema)[0]; // assume first field is parent
             return !!data[parentKey]; // show only if parent has value
         }
         return true;
     };
-    return (_jsx("div", { className: "flex gap-3 align-items-center", children: Object.keys(fieldJsonSchema).map(function (key) {
-            var _a;
-            var meta = fieldJsonSchema[key];
+    return (_jsx("div", { className: "flex gap-3 align-items-center", children: Object.keys(fieldJsonSchema).map((key) => {
+            const meta = fieldJsonSchema[key];
             if (!shouldShowField(key))
                 return null;
-            return (_jsxs("div", { className: "flex flex-column gap-2 " + (meta.className || ''), children: [(meta.headerText || meta.headerIcon) && (_jsxs("div", { className: "flex align-items-center gap-2", children: [meta.headerIcon && _jsx("i", { className: meta.headerIcon }), _jsx("span", { className: "font-semibold form-field-label font-medium", children: (_a = meta.headerText) !== null && _a !== void 0 ? _a : key })] })), meta.noteText && (_jsx("small", { className: "text-secondary mt-2", children: meta.noteText })), _jsxs("label", { className: "form-field-label font-medium", children: [key.charAt(0).toUpperCase() + key.slice(1), " ", meta.required && _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx("div", { className: "w-full mt-1 flex flex-row gap-2", children: renderInput(key) })] }, key));
+            return (_jsxs("div", { className: "flex flex-column gap-2 " + (meta.className || ''), children: [(meta.headerText || meta.headerIcon) && (_jsxs("div", { className: "flex align-items-center gap-2", children: [meta.headerIcon && _jsx("i", { className: meta.headerIcon }), _jsx("span", { className: "font-semibold form-field-label font-medium", children: meta.headerText ?? key })] })), meta.noteText && (_jsx("small", { className: "text-secondary mt-2", children: meta.noteText })), _jsxs("label", { className: "form-field-label font-medium", children: [key.charAt(0).toUpperCase() + key.slice(1), " ", meta.required && _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx("div", { className: "w-full mt-1 flex flex-row gap-2", children: renderInput(key) })] }, key));
         }) }));
 };
 //# sourceMappingURL=SolidLongTextField.js.map