@solidxai/core-ui 0.1.7-beta.1 → 0.1.7-beta.10

package/dist/components/core/form/fields/SolidSelectionStaticField.tsx

@@ -1,16 +1,19 @@
 
-import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
-import { Message } from "primereact/message";
+import { SolidAutocomplete } from "../../../shad-cn-ui/SolidAutocomplete";
+import { SolidRadioGroup } from "../../../shad-cn-ui/SolidRadioGroup";
+import { SolidSegmentedControl } from "../../../shad-cn-ui/SolidSegmentedControl";
+import { buildSyntheticChangeEvent } from "./fieldEventUtils";
+import styles from './solidFields.module.css';
 import { useMemo, useState } from "react";
 import * as Yup from 'yup';
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
 import { getExtensionComponent } from "../../../../helpers/registry";
 import { SolidFormFieldWidgetProps } from "../../../../types/solid-core";
-import { RadioButton } from "primereact/radiobutton";
 import { SolidFieldTooltip } from "../../../../components/common/SolidFieldTooltip";
-import { SelectButton } from "primereact/selectbutton";
 import { ERROR_MESSAGES } from "../../../../constants/error-messages";
 
+type AutoCompleteCompleteEvent = { query: string };
+
 export class SolidSelectionStaticField implements ISolidField {
 
     private fieldContext: SolidFieldProps;
@@ -84,7 +87,6 @@ export class SolidSelectionStaticField implements ISolidField {
         // Get display value for the final value
         // const displayValue = getDisplayValue(finalValue);
 
-        // return { label: displayValue ?? '', value: finalValue };
         return { label: getDisplayValue(finalValue), value: finalValue };
     }
 
@@ -184,18 +186,16 @@ export class SolidSelectionStaticField implements ISolidField {
 export const DefaultSelectionStaticAutocompleteFormEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
     const fieldMetadata = fieldContext.fieldMetadata;
     const fieldLayoutInfo = fieldContext.field;
-    const className = fieldLayoutInfo.attrs?.className || 'field col-12';
     const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-    const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
     const solidFormViewMetaData = fieldContext.solidFormViewMetaData;
-    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
-    const readOnlyPermission = fieldContext.readOnly;
-    const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
-    const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
+        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 isMultiSelect = fieldMetadata?.isMultiSelect;
+        const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
+        const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
+        const isMultiSelect = fieldMetadata?.isMultiSelect;
 
     const [selectionStaticItems, setSelectionStaticItems] = useState([]);
     const selectionStaticSearch = (event: AutoCompleteCompleteEvent) => {
@@ -211,45 +211,38 @@ export const DefaultSelectionStaticAutocompleteFormEditWidget = ({ formik, field
     const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
     return (
-        <div className="relative">
-            <div className="flex flex-column gap-2 mt-1 sm:mt-2 md:mt-3 lg:mt-4">
-                {showFieldLabel != false &&
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label font-medium">{fieldLabel}
-                        {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                        <SolidFieldTooltip fieldContext={fieldContext} />
-                        {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-                    </label>
-                }
-                <AutoComplete
-                    multiple={isMultiSelect}
-                    readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                    disabled={formDisabled || fieldDisabled}
-                    {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
-                    id={fieldLayoutInfo.attrs.name}
-                    name={fieldLayoutInfo.attrs.name}
-                    field="label"
-                    // value={formik.values[fieldLayoutInfo.attrs.name] || null}
-                    value={formik.values[fieldLayoutInfo.attrs.name] || (isMultiSelect ? [] : null)}
-                    dropdown
-                    suggestions={selectionStaticItems}
-                    completeMethod={selectionStaticSearch}
-                    // onChange={(e) => updateInputs(index, e.value)} />
-                    // onChange={formik.handleChange}
-                    onChange={(e) => fieldContext.onChange(e, 'onFieldChange')}
-                    className="solid-standard-autocomplete"
-                />
-            </div>
+        <div className={`${styles.fieldWrapper} ${isFormFieldValid(formik, fieldLayoutInfo.attrs.name) ? styles.fieldInvalid : ""}`}>
+            {showFieldLabel != false &&
+                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>
+                    {fieldLabel}
+                    {fieldMetadata.required && <span className="text-red-500">*</span>}
+                    <SolidFieldTooltip fieldContext={fieldContext} />
+                </label>
+            }
+            <SolidAutocomplete
+                multiple={isMultiSelect}
+                dropdown
+                field="label"
+                className={`solid-standard-autocomplete ${isFormFieldValid(formik, fieldLayoutInfo.attrs.name) ? styles.fieldInvalidControl : ""}`}
+                value={formik.values[fieldLayoutInfo.attrs.name] || (isMultiSelect ? [] : null)}
+                suggestions={selectionStaticItems}
+                completeMethod={(e) => selectionStaticSearch(e)}
+                onChange={({ value }) => {
+                    if (formReadonly || fieldReadonly || readOnlyPermission || formDisabled || fieldDisabled) return;
+                    const syntheticEvent = buildSyntheticChangeEvent(fieldLayoutInfo.attrs.name, value, "text");
+                    fieldContext.onChange(syntheticEvent, "onFieldChange");
+                }}
+                onSelect={({ value }) => {
+                    const syntheticEvent = buildSyntheticChangeEvent(fieldLayoutInfo.attrs.name, value, "text");
+                    fieldContext.onChange(syntheticEvent, "onFieldChange");
+                }}
+            />
             {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                <div className="absolute mt-1">
-                    <Message severity="error"
-                        text={
-                            // formik?.errors[fieldLayoutInfo.attrs.name]?.toString()
-                            typeof formik.errors[fieldLayoutInfo?.attrs?.name] === 'object'
-                                ? formik.errors[fieldLayoutInfo?.attrs?.name]?.value?.toString()
-                                : formik.errors[fieldLayoutInfo?.attrs?.name]?.toString()
-                        }
-                    />
-                </div>
+                <p className={styles.fieldError}>
+                    {typeof formik.errors[fieldLayoutInfo?.attrs?.name] === 'object'
+                        ? (formik.errors[fieldLayoutInfo?.attrs?.name] as any)?.value?.toString()
+                        : formik.errors[fieldLayoutInfo?.attrs?.name]?.toString()}
+                </p>
             )}
         </div>
     );
@@ -258,7 +251,6 @@ export const DefaultSelectionStaticAutocompleteFormEditWidget = ({ formik, field
 export const SolidSelectionStaticRadioFormEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
     const fieldMetadata = fieldContext.fieldMetadata;
     const fieldLayoutInfo = fieldContext.field;
-    const className = fieldLayoutInfo.attrs?.className || 'field col-12';
     const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
     const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
     const readOnlyPermission = fieldContext.readOnly;
@@ -281,60 +273,36 @@ export const SolidSelectionStaticRadioFormEditWidget = ({ formik, fieldContext }
 
     if (isMultiSelect) {
         return (
-            <div className={className}>
-                <Message
-                    severity="error"
-                    text={`This render mode is not supported for multi select.`}
-                />
-            </div>
+            <p className={styles.fieldError}>This render mode is not supported for multi select.</p>
         );
     }
 
     return (
-        <div className={className}>
-            <div className="relative">
-                <div className="flex flex-column gap-2 mt-1 sm:mt-2 md:mt-3 lg:mt-4">
-                    {showFieldLabel !== false && (
-                        <label htmlFor={fieldName} className="form-field-label font-medium">
-                            {fieldLabel}
-                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                            <SolidFieldTooltip fieldContext={fieldContext} />
-                        </label>
-                    )}
-                    <div className="flex flex-wrap gap-3">
-                        {radioOptions.map((option: any) => (
-                            <div key={option.value} className="flex items-center">
-                                <RadioButton
-                                    key={option.value}
-                                    id={`${fieldName}-${option.value}`}
-                                    name={fieldName}
-                                    value={{ label: option.label, value: option.value }}
-                                    checked={formik.values[fieldName]?.value === option.value}
-                                    // onChange={(e) => formik.setFieldValue(fieldName, e.value)} 
-                                    // onChange={(e) => fieldContext.onChange(e, 'onFieldChange')}
-                                    // onChange={(e) =>
-                                    //     formik.setFieldValue(fieldName, { label: option.label, value: option.value })
-                                    // }
-                                    onChange={(e) => {
-                                        formik.setFieldValue(fieldName, { label: option.label, value: option.value });
-                                        fieldContext.onChange(e, 'onFieldChange');
-                                    }}
-                                    disabled={formReadonly || fieldReadonly || readOnlyPermission || formDisabled || fieldDisabled}
-                                    className="mr-2"
-                                />
-                                <label htmlFor={`${fieldName}-${option.value}`} className="cursor-pointer">
-                                    {option.label}
-                                </label>
-                            </div>
-                        ))}
-                    </div>
-                </div>
-                {isFormFieldValid(formik, fieldName) && (
-                    <div className="absolute mt-1">
-                        <Message severity="error" text={formik?.errors[fieldName]?.toString()} />
-                    </div>
-                )}
-            </div>
+        <div className={styles.fieldWrapper}>
+            {showFieldLabel !== false && (
+                <label htmlFor={fieldName} className={styles.fieldLabel}>
+                    {fieldLabel}
+                    {fieldMetadata.required && <span className="text-red-500">*</span>}
+                    <SolidFieldTooltip fieldContext={fieldContext} />
+                </label>
+            )}
+            <SolidRadioGroup
+                name={fieldName}
+                options={radioOptions}
+                value={formik.values[fieldName]?.value ?? formik.values[fieldName]}
+                disabled={formReadonly || fieldReadonly || readOnlyPermission || formDisabled || fieldDisabled}
+                onChange={(nextValue) => {
+                    const selectedOption = radioOptions.find((opt: any) => opt.value === nextValue);
+                    if (selectedOption) {
+                        formik.setFieldValue(fieldName, selectedOption);
+                        const syntheticEvent = buildSyntheticChangeEvent(fieldName, selectedOption, "radio");
+                        fieldContext.onChange(syntheticEvent, "onFieldChange");
+                    }
+                }}
+            />
+            {isFormFieldValid(formik, fieldName) && (
+                <p className={styles.fieldError}>{formik?.errors[fieldName]?.toString()}</p>
+            )}
         </div>
     );
 }
@@ -342,7 +310,6 @@ export const SolidSelectionStaticRadioFormEditWidget = ({ formik, fieldContext }
 export const SolidSelectionStaticSelectButtonFormEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
     const fieldMetadata = fieldContext.fieldMetadata;
     const fieldLayoutInfo = fieldContext.field;
-    const className = fieldLayoutInfo.attrs?.className || 'field col-12';
     const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
     const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
     const readOnlyPermission = fieldContext.readOnly;
@@ -360,12 +327,7 @@ export const SolidSelectionStaticSelectButtonFormEditWidget = ({ formik, fieldCo
 
     if (isMultiSelect) {
         return (
-            <div className={className}>
-                <Message
-                    severity="error"
-                    text={`This render mode is not supported for multi select.`}
-                />
-            </div>
+            <p className={styles.fieldError}>This render mode is not supported for multi select.</p>
         );
     }
 
@@ -375,57 +337,33 @@ export const SolidSelectionStaticSelectButtonFormEditWidget = ({ formik, fieldCo
     });
 
     const currentValue = formik.values[fieldName];
-
-    // SelectButton needs only primitive "yes" or "no" to show active correctly
     const buttonValue =
         typeof currentValue === "object" ? currentValue.value : currentValue || null;
 
-
-    console.log("selection static options", options);
-
-
-
     return (
-        <div className={className}>
-            <div className="relative">
-                <div className="flex flex-column gap-2 mt-1 sm:mt-2 md:mt-3 lg:mt-4">
-                    {showFieldLabel !== false && (
-                        <label htmlFor={fieldName} className="form-field-label font-medium">
-                            {fieldLabel}
-                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                        </label>
-                    )}
-
-                    <SelectButton
-                        id={fieldName}
-                        name={fieldName}
-                        value={buttonValue}
-                        options={options}
-                        optionLabel="label"
-                        onChange={(e) => {
-                            // Always store object in Formik so validation works
-                            const selectedOption = options.find((opt: any) => opt.value === e.value);
-                            formik.setFieldValue(fieldName, selectedOption);
-                        }}
-                        disabled={
-                            formReadonly ||
-                            fieldReadonly ||
-                            readOnlyPermission ||
-                            formDisabled ||
-                            fieldDisabled
-                        }
-                    />
-                </div>
-
-                {isFormFieldValid(formik, fieldName) && (
-                    <div className="absolute mt-1">
-                        <Message
-                            severity="error"
-                            text={formik.errors[fieldName]?.toString()}
-                        />
-                    </div>
-                )}
-            </div>
+        <div className={styles.fieldWrapper}>
+            {showFieldLabel !== false && (
+                <label htmlFor={fieldName} className={styles.fieldLabel}>
+                    {fieldLabel}
+                    {fieldMetadata.required && <span className="text-red-500">*</span>}
+                </label>
+            )}
+            <SolidSegmentedControl
+                options={options}
+                value={buttonValue}
+                disabled={formReadonly || fieldReadonly || readOnlyPermission || formDisabled || fieldDisabled}
+                onChange={(nextValue) => {
+                    const selectedOption = options.find((opt: any) => opt.value === nextValue);
+                    if (selectedOption) {
+                        formik.setFieldValue(fieldName, selectedOption);
+                        const syntheticEvent = buildSyntheticChangeEvent(fieldName, selectedOption, "button");
+                        fieldContext.onChange(syntheticEvent, "onFieldChange");
+                    }
+                }}
+            />
+            {isFormFieldValid(formik, fieldName) && (
+                <p className={styles.fieldError}>{formik.errors[fieldName]?.toString()}</p>
+            )}
         </div>
     );
 };
@@ -440,23 +378,17 @@ export const DefaultSelectionStaticFormViewWidget = ({ formik, fieldContext }: S
     const isMultiSelect = fieldMetadata?.isMultiSelect;
     const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
     return (
-        // <div className="mt-2 flex-column gap-2">
-        //     <p className="m-0 form-field-label font-medium">{fieldLabel}</p>
-        //     <p className="m-0">{value && value.label && value.label}</p>
-        // </div>
-        <div className="mt-2 flex-column gap-2">
+        <div className={styles.fieldViewWrapper}>
             {showFieldLabel !== false && (
-                <p className="m-0 form-field-label font-medium">{fieldLabel}</p>
+                <p className={`${styles.fieldViewLabel} form-field-label`}>{fieldLabel}</p>
             )}
-            <p className="m-0">
+            <p className={styles.fieldViewValue}>
                 {isMultiSelect
                     ? Array.isArray(value)
-                        ? value.map(v => v?.label).filter(Boolean).join(', ')
+                        ? value.map((v: any) => v?.label).filter(Boolean).join(', ')
                         : ''
                     : value?.label || ''}
             </p>
         </div>
     );
 }
-
-

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

@@ -1 +1 @@
-{"version":3,"file":"SolidShortTextField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/form/fields/SolidShortTextField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE3E,OAAO,EAAE,yBAAyB,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAOpG,qBAAa,mBAAoB,YAAW,WAAW;IAEnD,OAAO,CAAC,YAAY,CAAkB;gBAE1B,YAAY,EAAE,eAAe;IAIzC,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;IAcnD,YAAY,IAAI,GAAG;IA6BnB,gBAAgB,IAAI,GAAG,CAAC,MAAM;IAsF9B,MAAM,CAAC,MAAM,EAAE,YAAY;IAmC3B,yBAAyB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY;CAYjE;AAGD,eAAO,MAAM,8BAA8B,6BAA8B,yBAAyB,4CA0EjG,CAAA;AAED,eAAO,MAAM,8BAA8B,6BAA8B,yBAAyB,4CAcjG,CAAA;AAGD,eAAO,MAAM,6BAA6B,8DAA+D,yBAAyB,4CAOjI,CAAC;AAGF,eAAO,MAAM,6BAA6B,6BAA8B,yBAAyB,4CAmBhG,CAAC;AAGF,eAAO,MAAM,6BAA6B,6BAA8B,yBAAyB,4CAyEhG,CAAC"}
+{"version":3,"file":"SolidShortTextField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/form/fields/SolidShortTextField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAE3B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE3E,OAAO,EAAE,yBAAyB,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAMpG,qBAAa,mBAAoB,YAAW,WAAW;IAEnD,OAAO,CAAC,YAAY,CAAkB;gBAE1B,YAAY,EAAE,eAAe;IAIzC,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;IAcnD,YAAY,IAAI,GAAG;IA6BnB,gBAAgB,IAAI,GAAG,CAAC,MAAM;IAsF9B,MAAM,CAAC,MAAM,EAAE,YAAY;IAmC3B,yBAAyB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY;CAYjE;AAGD,eAAO,MAAM,8BAA8B,6BAA8B,yBAAyB,4CA2CjG,CAAA;AAED,eAAO,MAAM,8BAA8B,6BAA8B,yBAAyB,4CAejG,CAAA;AAGD,eAAO,MAAM,6BAA6B,8DAA+D,yBAAyB,4CAOjI,CAAC;AAGF,eAAO,MAAM,6BAA6B,6BAA8B,yBAAyB,4CAgBhG,CAAC;AAGF,eAAO,MAAM,6BAA6B,6BAA8B,yBAAyB,4CA2ChG,CAAC"}

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

@@ -10,13 +10,12 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { InputText } from "primereact/inputtext";
-import { Message } from "primereact/message";
 import * as Yup from 'yup';
+import styles from './solidFields.module.css';
 import { getExtensionComponent } from "../../../../helpers/registry";
 import { SolidFieldTooltip } from "../../../../components/common/SolidFieldTooltip";
-import { Password } from "primereact/password";
 import { ERROR_MESSAGES } from "../../../../constants/error-messages";
+import { SolidInput, SolidPasswordInput } from "../../../shad-cn-ui";
 var SolidShortTextField = /** @class */ (function () {
     function SolidShortTextField(fieldContext) {
         Object.defineProperty(this, "fieldContext", {
@@ -197,32 +196,23 @@ var SolidShortTextField = /** @class */ (function () {
 }());
 export { SolidShortTextField };
 export var DefaultShortTextFormEditWidget = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     var formik = _a.formik, fieldContext = _a.fieldContext;
     var fieldMetadata = fieldContext.fieldMetadata;
     var fieldLayoutInfo = fieldContext.field;
-    var className = ((_b = fieldLayoutInfo.attrs) === null || _b === void 0 ? void 0 : _b.className) || 'field col-12';
-    var includeWrapper = ((_c = fieldLayoutInfo.attrs) === null || _c === void 0 ? void 0 : _c.includeWrapper) || 'yes';
-    var fieldLabel = (_d = fieldLayoutInfo.attrs.label) !== null && _d !== void 0 ? _d : fieldMetadata.displayName;
-    var fieldDescription = (_e = fieldLayoutInfo.attrs.description) !== null && _e !== void 0 ? _e : fieldMetadata.description;
+    var fieldLabel = (_b = fieldLayoutInfo.attrs.label) !== null && _b !== void 0 ? _b : fieldMetadata.displayName;
+    var fieldDescription = (_c = fieldLayoutInfo.attrs.description) !== null && _c !== void 0 ? _c : fieldMetadata.description;
     var solidFormViewMetaData = fieldContext.solidFormViewMetaData;
-    var showFieldLabel = (_f = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _f === void 0 ? void 0 : _f.showLabel;
+    var showFieldLabel = (_d = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _d === void 0 ? void 0 : _d.showLabel;
     var readOnlyPermission = fieldContext.readOnly;
     var isPrimaryKey = fieldMetadata.isPrimaryKey || false;
     var isFormFieldValid = function (formik, fieldName) { return formik.touched[fieldName] && formik.errors[fieldName]; };
-    var fieldDisabled = (_g = fieldLayoutInfo.attrs) === null || _g === void 0 ? void 0 : _g.disabled;
-    var fieldReadonly = (_h = fieldLayoutInfo.attrs) === null || _h === void 0 ? void 0 : _h.readonly;
-    var formDisabled = (_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.disabled;
-    var formReadonly = (_p = (_o = (_m = solidFormViewMetaData.data.solidView) === null || _m === void 0 ? void 0 : _m.layout) === null || _o === void 0 ? void 0 : _o.attrs) === null || _p === void 0 ? void 0 : _p.readonly;
-    return (_jsxs(_Fragment, { children: [includeWrapper === 'yes' &&
-                _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(InputText, { readOnly: formReadonly || fieldReadonly || readOnlyPermission || isPrimaryKey, disabled: formDisabled || fieldDisabled || isPrimaryKey, id: fieldLayoutInfo.attrs.name, name: fieldMetadata.name, "aria-describedby": "".concat(fieldLayoutInfo.attrs.name, "-help"), 
-                                    // onChange={formik.handleChange}
-                                    onChange: function (e) { return fieldContext.onChange(e, 'onFieldChange'); }, onBlur: function (e) { return fieldContext.onBlur(e, 'onFieldBlur'); }, value: formik.values[fieldLayoutInfo.attrs.name] || '' })] }), isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (_jsx("div", { className: "absolute mt-1", children: _jsx(Message, { severity: "error", text: (_q = formik === null || formik === void 0 ? void 0 : formik.errors[fieldLayoutInfo.attrs.name]) === null || _q === void 0 ? void 0 : _q.toString() }) }))] }), includeWrapper === 'no' &&
-                _jsxs(_Fragment, { 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(InputText, { readOnly: formReadonly || fieldReadonly || readOnlyPermission, disabled: formDisabled || fieldDisabled, id: fieldLayoutInfo.attrs.name, name: fieldMetadata.name, "aria-describedby": "".concat(fieldLayoutInfo.attrs.name, "-help"), 
-                            // onChange={formik.handleChange}
-                            onChange: function (e) { return fieldContext.onChange(e, 'onFieldChange'); }, onBlur: function (e) { return fieldContext.onBlur(e, 'onFieldBlur'); }, value: formik.values[fieldLayoutInfo.attrs.name] || '' })] })] }));
+    var fieldDisabled = (_e = fieldLayoutInfo.attrs) === null || _e === void 0 ? void 0 : _e.disabled;
+    var fieldReadonly = (_f = fieldLayoutInfo.attrs) === null || _f === void 0 ? void 0 : _f.readonly;
+    var formDisabled = (_j = (_h = (_g = solidFormViewMetaData.data.solidView) === null || _g === void 0 ? void 0 : _g.layout) === null || _h === void 0 ? void 0 : _h.attrs) === null || _j === void 0 ? void 0 : _j.disabled;
+    var formReadonly = (_m = (_l = (_k = solidFormViewMetaData.data.solidView) === null || _k === void 0 ? void 0 : _k.layout) === null || _l === void 0 ? void 0 : _l.attrs) === null || _m === void 0 ? void 0 : _m.readonly;
+    return (_jsxs("div", { className: styles.fieldWrapper, children: [showFieldLabel != false &&
+                _jsxs("label", { htmlFor: fieldLayoutInfo.attrs.name, className: "".concat(styles.fieldLabel, " form-field-label"), children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: "*" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] }), _jsx(SolidInput, { type: "text", readOnly: formReadonly || fieldReadonly || readOnlyPermission || isPrimaryKey, disabled: formDisabled || fieldDisabled || isPrimaryKey, id: fieldLayoutInfo.attrs.name, name: fieldMetadata.name, "aria-describedby": "".concat(fieldLayoutInfo.attrs.name, "-help"), onChange: function (e) { return fieldContext.onChange(e, 'onFieldChange'); }, onBlur: function (e) { return fieldContext.onBlur(e, 'onFieldBlur'); }, value: formik.values[fieldLayoutInfo.attrs.name] || '', className: styles.fieldInput }), isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (_jsx("p", { className: styles.fieldError, children: (_o = formik === null || formik === void 0 ? void 0 : formik.errors[fieldLayoutInfo.attrs.name]) === null || _o === void 0 ? void 0 : _o.toString() }))] }));
 };
 export var DefaultShortTextFormViewWidget = function (_a) {
     var _b, _c;
@@ -231,7 +221,8 @@ export var DefaultShortTextFormViewWidget = function (_a) {
     var fieldLayoutInfo = fieldContext.field;
     var fieldLabel = (_b = fieldLayoutInfo.attrs.label) !== null && _b !== void 0 ? _b : fieldMetadata.displayName;
     var showFieldLabel = (_c = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _c === void 0 ? void 0 : _c.showLabel;
-    return (_jsxs("div", { className: "mt-2 flex-column gap-2", children: [showFieldLabel !== false && (_jsx("p", { className: "m-0 form-field-label font-medium", children: fieldLabel })), _jsx("p", { className: "m-0", children: formik.values[fieldLayoutInfo.attrs.name] && typeof formik.values[fieldLayoutInfo.attrs.name] !== "object" && typeof formik.values[fieldLayoutInfo.attrs.name] == "string" && formik.values[fieldLayoutInfo.attrs.name] })] }));
+    var value = formik.values[fieldLayoutInfo.attrs.name];
+    return (_jsxs("div", { className: styles.fieldViewWrapper, children: [showFieldLabel !== false && (_jsx("p", { className: "".concat(styles.fieldViewLabel, " form-field-label"), children: fieldLabel })), _jsx("p", { className: styles.fieldViewValue, children: value && typeof value === "string" ? value : '' })] }));
 };
 // Masked ShortText - LIST
 export var MaskedShortTextListViewWidget = function (_a) {
@@ -249,32 +240,28 @@ export var MaskedShortTextFormViewWidget = function (_a) {
     var fieldLayoutInfo = fieldContext.field;
     var fieldLabel = (_b = fieldLayoutInfo.attrs.label) !== null && _b !== void 0 ? _b : fieldMetadata.displayName;
     var showFieldLabel = (_c = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _c === void 0 ? void 0 : _c.showLabel;
-    // Get actual value
     var rawValue = formik.values[fieldLayoutInfo.attrs.name] || '';
-    // Mask it (show same number of * as characters, or fixed length if you want)
     var maskedValue = rawValue ? '*'.repeat(rawValue.length) : '';
-    return (_jsxs("div", { className: "mt-2 flex-column gap-2", children: [showFieldLabel !== false && (_jsx("p", { className: "m-0 form-field-label font-medium", children: fieldLabel })), _jsx("p", { className: "m-0", children: maskedValue })] }));
+    return (_jsxs("div", { className: styles.fieldViewWrapper, children: [showFieldLabel !== false && (_jsx("p", { className: "".concat(styles.fieldViewLabel, " form-field-label"), children: fieldLabel })), _jsx("p", { className: styles.fieldViewValue, children: maskedValue })] }));
 };
 // Masked ShortText - EDIT
 export var MaskedShortTextFormEditWidget = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    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 includeWrapper = ((_b = fieldLayoutInfo.attrs) === null || _b === void 0 ? void 0 : _b.includeWrapper) || 'yes';
-    var fieldLabel = (_c = fieldLayoutInfo.attrs.label) !== null && _c !== void 0 ? _c : fieldMetadata.displayName;
+    var fieldLabel = (_b = fieldLayoutInfo.attrs.label) !== null && _b !== void 0 ? _b : fieldMetadata.displayName;
     var solidFormViewMetaData = fieldContext.solidFormViewMetaData;
-    var showFieldLabel = (_d = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _d === void 0 ? void 0 : _d.showLabel;
+    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 isPrimaryKey = fieldMetadata.isPrimaryKey || false;
     var isFormFieldValid = function (formik, fieldName) {
         return formik.touched[fieldName] && formik.errors[fieldName];
     };
-    var fieldDisabled = (_e = fieldLayoutInfo.attrs) === null || _e === void 0 ? void 0 : _e.disabled;
-    var fieldReadonly = (_f = fieldLayoutInfo.attrs) === null || _f === void 0 ? void 0 : _f.readonly;
-    var formDisabled = (_j = (_h = (_g = solidFormViewMetaData.data.solidView) === null || _g === void 0 ? void 0 : _g.layout) === null || _h === void 0 ? void 0 : _h.attrs) === null || _j === void 0 ? void 0 : _j.disabled;
-    var formReadonly = (_m = (_l = (_k = solidFormViewMetaData.data.solidView) === null || _k === void 0 ? void 0 : _k.layout) === null || _l === void 0 ? void 0 : _l.attrs) === null || _m === void 0 ? void 0 : _m.readonly;
-    var passwordField = (_jsx(Password, { toggleMask: true, feedback: false, readOnly: formReadonly || fieldReadonly || readOnlyPermission || isPrimaryKey, disabled: formDisabled || fieldDisabled || isPrimaryKey, id: fieldLayoutInfo.attrs.name, name: fieldMetadata.name, "aria-describedby": "".concat(fieldLayoutInfo.attrs.name, "-help"), onChange: function (e) { return fieldContext.onChange(e, 'onFieldChange'); }, onBlur: function (e) { return fieldContext.onBlur(e, 'onFieldBlur'); }, value: formik.values[fieldLayoutInfo.attrs.name] || '', className: "w-full" }));
-    return (_jsxs(_Fragment, { children: [includeWrapper === 'yes' && (_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 })] })), passwordField] }), isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (_jsx("div", { className: "absolute mt-1", children: _jsx(Message, { severity: "error", text: (_o = formik === null || formik === void 0 ? void 0 : formik.errors[fieldLayoutInfo.attrs.name]) === null || _o === void 0 ? void 0 : _o.toString() }) }))] })), includeWrapper === 'no' && (_jsxs(_Fragment, { 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 })] })), passwordField] }))] }));
+    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;
+    return (_jsxs("div", { className: styles.fieldWrapper, children: [showFieldLabel !== false && (_jsxs("label", { htmlFor: fieldLayoutInfo.attrs.name, className: styles.fieldLabel, children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: "*" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] })), _jsx(SolidPasswordInput, { toggle: true, readOnly: formReadonly || fieldReadonly || readOnlyPermission || isPrimaryKey, disabled: formDisabled || fieldDisabled || isPrimaryKey, id: fieldLayoutInfo.attrs.name, name: fieldMetadata.name, "aria-describedby": "".concat(fieldLayoutInfo.attrs.name, "-help"), onChange: function (e) { return fieldContext.onChange(e, 'onFieldChange'); }, onBlur: function (e) { return fieldContext.onBlur(e, 'onFieldBlur'); }, value: formik.values[fieldLayoutInfo.attrs.name] || '', className: "w-full" }), isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (_jsx("p", { className: styles.fieldError, children: (_m = formik === null || formik === void 0 ? void 0 : formik.errors[fieldLayoutInfo.attrs.name]) === null || _m === void 0 ? void 0 : _m.toString() }))] }));
 };
 //# sourceMappingURL=SolidShortTextField.js.map