@solidstarters/solid-core-ui 1.1.70 → 1.1.71

package/dist/components/core/form/fields/relations/SolidRelationOneToManyField.tsx

@@ -0,0 +1,311 @@
+'use client';
+import { SolidListView } from "@/components/core/list/SolidListView";
+import { camelCase } from "lodash";
+import { Dialog } from "primereact/dialog";
+import { useEffect, useState } from "react";
+import * as Yup from 'yup';
+import { Schema } from "yup";
+import SolidFormView from "../../SolidFormView";
+import { FormikObject, ISolidField, SolidFieldProps } from "../ISolidField";
+import { usePathname } from "next/navigation";
+import { getExtensionComponent } from "@/helpers/registry";
+import { SolidFormFieldWidgetProps } from "@/types/solid-core";
+import { Message } from "primereact/message";
+import FieldMetaData from "@/components/core/model/FieldMetaData";
+import { Chip } from "primereact/chip";
+
+
+export class SolidRelationOneToManyField implements ISolidField {
+
+    private fieldContext: SolidFieldProps;
+
+    constructor(fieldContext: SolidFieldProps) {
+        this.fieldContext = fieldContext;
+    }
+
+    initialValue(): any {
+
+        // const manyToOneFieldData = this.fieldContext.data[this.fieldContext.field.attrs.name];
+        // const fieldMetadata = this.fieldContext.fieldMetadata;
+        // const userKeyField = fieldMetadata.relationModel.userKeyField.name;
+        // const manyToOneColVal = manyToOneFieldData ? manyToOneFieldData[userKeyField] : '';
+
+        // return { label: manyToOneColVal || '', value: manyToOneFieldData?.id || '' };
+
+        return '';
+    }
+
+    updateFormData(value: any, formData: FormData): any {
+        const fieldLayoutInfo = this.fieldContext.field;
+        if (value) {
+            formData.append(`${fieldLayoutInfo.attrs.name}Id`, value.value);
+        }
+    }
+
+    validationSchema(): Schema {
+        let schema = Yup.object();
+
+        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(`${fieldLabel} is required.`);
+        }
+        return schema;
+    }
+
+    render(formik: FormikObject) {
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+
+        const fieldLayoutInfo = this.fieldContext.field;
+        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+
+        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
+
+        const userKeyFieldName = fieldMetadata.relationModel?.userKeyField?.name;
+
+        let DynamicWidget = getExtensionComponent("SolidFormFieldRelationViewModeWidget");
+        const widgetProps = {
+            label: fieldLabel,
+            value: (this.fieldContext.data?.[fieldLayoutInfo.attrs.name] || []).map(
+                (item: any) => ({ label: item[userKeyFieldName] ?? '' })
+            ),
+            layout: fieldLayoutInfo
+        }
+
+        DefaultRelationOneToManyFormEditWidget
+
+
+        let viewWidget = fieldLayoutInfo.attrs.viewWidget;
+        let editWidget = fieldLayoutInfo.attrs.editWidget;
+        if (!editWidget) {
+            editWidget = 'DefaultRelationManyToOneFormEditWidget';
+        }
+        if (!viewWidget) {
+            viewWidget = 'DefaultRelationOneToManyFormViewWidget';
+        }
+        const viewMode: string = this.fieldContext.viewMode;
+        return (
+            <>
+                <div className={className}>
+                    {viewMode === "view" &&
+                        this.renderExtensionRenderMode(viewWidget, formik)
+                    }
+                    {viewMode === "edit" && (
+                        <>
+                            {editWidget &&
+                                this.renderExtensionRenderMode(editWidget, formik)
+                            }
+                            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                                <div className="absolute mt-1">
+                                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                                </div>
+                            )}
+                        </>
+                    )
+                    }
+                </div>
+            </>
+        );
+
+    }
+
+    renderExtensionRenderMode(widget: string, formik: FormikObject) {
+        let DynamicWidget = getExtensionComponent(widget);
+        const widgetProps: SolidFormFieldWidgetProps = {
+            formik: formik,
+            fieldContext: this.fieldContext,
+        }
+        return (
+            <>
+                {DynamicWidget && <DynamicWidget {...widgetProps} />}
+            </>
+        )
+    }
+
+
+}
+
+
+export const DefaultRelationOneToManyFormEditWidget = ({ 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 [visibleCreateRelationEntity, setvisibleCreateRelationEntity] = useState(false);
+    const [listViewParams, setListViewParams] = useState<any>()
+    const [formViewParams, setformViewParams] = useState<any>()
+    const [refreshList, setRefreshList] = useState(false); // Added state for rerender
+    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+    const readOnlyPermission = fieldContext.readOnly;
+    const pathname = usePathname();
+    const lastPathSegment = pathname.split('/').pop();
+
+    const handlePopupOpen = (id: any) => {
+        const formviewparams = {
+            moduleName: fieldContext.fieldMetadata.relationModelModuleName,
+            id: id,
+            embeded: true,
+            isCustomCreate: false,
+            customLayout: fieldLayoutInfo?.attrs?.inlineCreateLayout,
+            modelName: camelCase(fieldContext.fieldMetadata.relationCoModelSingularName)
+        }
+        setformViewParams(formviewparams);
+        setvisibleCreateRelationEntity(true);
+
+    }
+
+    const handlePopupClose = () => {
+        setvisibleCreateRelationEntity(false);
+        setRefreshList((prev) => !prev);
+        const customFilter = fieldContext.fieldMetadata.relationCoModelFieldName ? fieldContext.fieldMetadata.relationCoModelFieldName : `${fieldContext.modelName}`
+        const lisviewparams = {
+            moduleName: fieldContext.fieldMetadata.relationModelModuleName,
+            modelName: camelCase(fieldContext.fieldMetadata.relationCoModelSingularName),
+            inlineCreate: readOnlyPermission === false ? true : false,
+            customLayout: fieldLayoutInfo?.attrs?.inlineListLayout,
+            embeded: true,
+            id: fieldContext.data ? fieldContext?.data?.id : 'new',
+            customFilter: {
+                [customFilter]: {
+                    id: {
+                        $eq: fieldContext.data ? fieldContext?.data?.id : -1
+                    }
+                }
+            }
+        }
+        setListViewParams(lisviewparams)
+    }
+    //Intial Params 
+    useEffect(() => {
+
+        const customFilter = fieldContext.fieldMetadata.relationCoModelFieldName ? fieldContext.fieldMetadata.relationCoModelFieldName : `${fieldContext.modelName}`
+        const listviewparams = {
+            moduleName: fieldContext.fieldMetadata.relationModelModuleName,
+            modelName: camelCase(fieldContext.fieldMetadata.relationCoModelSingularName),
+            inlineCreate: readOnlyPermission === false ? true : false,
+            customLayout: fieldLayoutInfo?.attrs?.inlineListLayout,
+            embeded: true,
+            id: fieldContext.data ? fieldContext?.data?.id : 'new',
+            customFilter: {
+                [customFilter]: {
+                    id: {
+                        $eq: fieldContext.data ? fieldContext?.data?.id : -1
+                    }
+                }
+            }
+        }
+        setListViewParams(listviewparams);
+        const formviewparams = {
+            moduleName: fieldContext.fieldMetadata.relationModelModuleName,
+            id: "new",
+            embeded: true,
+            isCustomCreate: false,
+            customLayout: fieldLayoutInfo?.attrs?.inlineCreateLayout,
+            modelName: camelCase(fieldContext.fieldMetadata.relationCoModelSingularName),
+        }
+        setformViewParams(formviewparams)
+
+    }, [readOnlyPermission])
+
+    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;
+
+    return (
+        <div>
+            {/* <div className="justify-content-center align-items-center"> */}
+            {showFieldLabel != false &&
+                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                    {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                </label>
+            }
+
+            {lastPathSegment === 'new' && <p>Please save the {solidFormViewMetaData.data.solidView.model.displayName} to be able to save {fieldMetadata.displayName}</p>}
+            {listViewParams && lastPathSegment !== 'new' &&
+                <SolidListView key={refreshList.toString()}  {...listViewParams} handlePopUpOpen={handlePopupOpen} />
+            }
+            {readOnlyPermission !== true &&
+                <RenderSolidFormEmbededView formik={formik} fieldContext={fieldContext} visibleCreateRelationEntity={visibleCreateRelationEntity} setvisibleCreateRelationEntity={setvisibleCreateRelationEntity} formViewParams={formViewParams} handlePopupClose={handlePopupClose}></RenderSolidFormEmbededView>
+            }
+
+        </div>
+    );
+}
+
+export const RenderSolidFormEmbededView = ({ formik, fieldContext, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity, formViewParams, handlePopupClose }: any) => {
+
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const className = fieldLayoutInfo.attrs?.className || 'col-12';
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+
+
+    return (
+        <div className="many-to-many-add" >
+            {/* <Button icon="pi pi-plus"
+                rounded
+                outlined
+                aria-label="Filter"
+                type="button"
+                onClick={() => setvisibleCreateRelationEntity(true)}
+            /> */}
+            <Dialog
+                header=""
+                showHeader={false}
+                visible={visibleCreateRelationEntity}
+                className="solid-dialog"
+                style={{ width: fieldLayoutInfo?.attrs?.inlineCreateLayout?.attrs?.width ?? "40vw" }}
+                onHide={() => {
+                    if (!visibleCreateRelationEntity) return;
+                    setvisibleCreateRelationEntity(false);
+                }}
+            >
+                {formViewParams &&
+                    < SolidFormView {...formViewParams} handlePopupClose={handlePopupClose} />
+                }
+            </Dialog>
+        </div>
+    )
+}
+
+export const DefaultRelationOneToManyFormViewWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
+
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const userKeyFieldName = fieldMetadata.relationModel?.userKeyField?.name;
+    const [fieldValue, setFieldValue] = useState<any>([]);
+    useEffect(() => {
+        const value = (fieldContext.data?.[fieldLayoutInfo.attrs.name] || []).map((item: any) => ({ label: item[userKeyFieldName] ?? '' }));
+        if (Array.isArray(value)) {
+
+            if (value.length > 0) {
+                const data = value.map((v: any) => v.label);
+                setFieldValue(data);
+            }
+        }
+        if (value && !Array.isArray(value) && typeof value === "object") {
+            setFieldValue([value.label]);
+        }
+    }, [fieldContext]);
+
+    return (
+        <div className="mt-2 flex-column">
+            <p className="m-0 form-field-label font-medium">{fieldLabel}</p>
+            <div className="flex flex-wrap gap-2 mt-2">
+                {fieldValue.map((v: any) => (
+                    <Chip key={v} label={v} className="view-widget-chip" />
+                ))}
+            </div>
+        </div>
+    );
+}

package/dist/components/core/form/fields/relations/widgets/SolidRelationManyToManyAutocompleteWidget.d.ts

@@ -1,3 +1,3 @@
-import { SolidRelationManyToManyFieldWidgetProps } from "@/types/solid-core";
+import { SolidRelationManyToManyFieldWidgetProps } from "../../../../../../types/solid-core";
 export declare const SolidRelationManyToManyAutocompleteWidget: ({ formik, fieldContext }: SolidRelationManyToManyFieldWidgetProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SolidRelationManyToManyAutocompleteWidget.d.ts.map

package/dist/components/core/form/fields/relations/widgets/SolidRelationManyToManyCheckboxWidget.d.ts

@@ -1,3 +1,3 @@
-import { SolidRelationManyToManyFieldWidgetProps } from "@/types/solid-core";
+import { SolidRelationManyToManyFieldWidgetProps } from "../../../../../../types/solid-core";
 export declare const SolidRelationManyToManyCheckboxWidget: ({ formik, fieldContext }: SolidRelationManyToManyFieldWidgetProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SolidRelationManyToManyCheckboxWidget.d.ts.map

package/dist/components/core/form/fields/relations/widgets/helpers/InlineRelationEntityDialog.tsx

@@ -0,0 +1,33 @@
+import { Dialog } from "primereact/dialog";
+import { camelCase } from "lodash";
+import SolidFormView from "@/components/core/form/SolidFormView";
+
+export const InlineRelationEntityDialog = ({ visible, setVisible, fieldContext, onCreate }: any) => {
+  const fieldLayoutInfo = fieldContext.field;
+
+  const params = {
+    moduleName: fieldContext.fieldMetadata.relationModelModuleName,
+    id: "new",
+    embeded: true,
+    layout: fieldLayoutInfo?.attrs?.inlineCreateLayout,
+    customCreateHandler: (values: any) => {
+      setVisible(false);
+      onCreate(values);
+    },
+    inlineCreateAutoSave: fieldLayoutInfo?.attrs?.inlineCreateAutoSave,
+    handlePopupClose: () => setVisible(false),
+    modelName: camelCase(fieldContext.fieldMetadata.relationCoModelSingularName)
+  };
+
+  return (
+    <Dialog
+      visible={visible}
+      showHeader={false}
+      style={{ width: fieldLayoutInfo?.attrs?.inlineCreateLayout?.attrs?.width ?? "60vw" }}
+      onHide={() => setVisible(false)}
+      className="solid-dialog"
+    >
+      <SolidFormView {...params} />
+    </Dialog>
+  );
+};

package/dist/components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler.ts

@@ -0,0 +1,64 @@
+import { useState } from "react";
+import qs from "qs";
+import { createSolidEntityApi } from "@/redux/api/solidEntityApi";
+
+export const useRelationEntityHandler = ({ fieldContext, formik, autoCompleteLimit = 1000 }: any) => {
+  const fieldMetadata = fieldContext.fieldMetadata;
+  const fieldLayoutInfo = fieldContext.field;
+
+  const entityApi = createSolidEntityApi(fieldMetadata.relationCoModelSingularName);
+  const { useLazyGetSolidEntitiesQuery } = entityApi;
+  const [triggerGetSolidEntities] = useLazyGetSolidEntitiesQuery();
+
+  const [autoCompleteItems, setAutoCompleteItems] = useState([]);
+
+  const fetchRelationEntities = async (query = "", limit = autoCompleteLimit) => {
+    const queryData = {
+      offset: 0,
+      limit: limit,
+      filters: {
+        [fieldMetadata?.relationModel?.userKeyField?.name]: {
+          '$containsi': query
+        }
+      }
+    };
+
+    const autocompleteQs = qs.stringify(queryData, { encodeValuesOnly: true });
+
+    const response = await triggerGetSolidEntities(autocompleteQs);
+    const data = response.data;
+
+    if (data) {
+      const mappedItems = data.records.map((item: any) => ({
+        label: item[fieldMetadata?.relationModel?.userKeyField?.name],
+        value: item['id'],
+        original: item
+      }));
+      setAutoCompleteItems(mappedItems);
+    }
+  };
+
+  const addNewRelation = (values: any) => {
+    const currentData = formik.values[fieldLayoutInfo.attrs.name] || [];
+    const jsonValues = Object.fromEntries(values.entries());
+    const newItem = {
+      label: jsonValues[fieldMetadata?.relationModel?.userKeyField?.name],
+      value: "new",
+      original: jsonValues,
+    };
+
+    formik.setFieldValue(fieldLayoutInfo.attrs.name, [...currentData, newItem]);
+
+    // Optionally add to autocomplete list
+    setAutoCompleteItems((prev: any) => {
+      const exists = prev.some((item: any) => item.label === newItem.label);
+      return exists ? prev : [...prev, newItem];
+    });
+  };
+
+  return {
+    autoCompleteItems,
+    fetchRelationEntities,
+    addNewRelation
+  };
+};

package/dist/components/core/form/fields/widgets/SolidBooleanCheckboxFieldWidget.d.ts

@@ -1,3 +1,3 @@
-import { SolidBooleanFieldWidgetProps } from "@/types/solid-core";
+import { SolidBooleanFieldWidgetProps } from "../../../../../types/solid-core";
 export declare const SolidBooleanFieldCheckboxWidget: ({ formik, fieldContext }: SolidBooleanFieldWidgetProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SolidBooleanCheckboxFieldWidget.d.ts.map

package/dist/components/core/form/fields/widgets/SolidBooleanSelectFieldWidget.d.ts

@@ -1,3 +1,3 @@
-import { SolidBooleanFieldWidgetProps } from "@/types/solid-core";
+import { SolidBooleanFieldWidgetProps } from "../../../../../types/solid-core";
 export declare const SolidBooleanFieldSelectWidget: ({ formik, fieldContext }: SolidBooleanFieldWidgetProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SolidBooleanSelectFieldWidget.d.ts.map

package/dist/components/core/form/fields/widgets/SolidFormFieldViewMediaMultipleWidget.d.ts

@@ -1,3 +1,3 @@
-import { SolidMediaSingleFieldWidgetProps } from "@/types/solid-core";
+import { SolidMediaSingleFieldWidgetProps } from "../../../../../types/solid-core";
 export declare const SolidFormFieldViewMediaMultipleWidget: ({ formik, fieldContext, setLightboxUrls, setOpenLightbox }: SolidMediaSingleFieldWidgetProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SolidFormFieldViewMediaMultipleWidget.d.ts.map

package/dist/components/core/form/fields/widgets/SolidFormFieldViewMediaSingleWidget.d.ts

@@ -1,3 +1,3 @@
-import { SolidMediaSingleFieldWidgetProps } from "@/types/solid-core";
+import { SolidMediaSingleFieldWidgetProps } from "../../../../../types/solid-core";
 export declare const SolidFormFieldViewMediaSingleWidget: ({ formik, fieldContext, setLightboxUrls, setOpenLightbox }: SolidMediaSingleFieldWidgetProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SolidFormFieldViewMediaSingleWidget.d.ts.map

package/dist/components/core/form/fields/widgets/SolidRelationFieldAvatarFormWidget.d.ts

@@ -0,0 +1,3 @@
+import { SolidFormFieldWidgetProps } from "../../../../../types/solid-core";
+export declare const SolidRelationFieldAvatarFormWidget: ({ formik, fieldContext }: SolidFormFieldWidgetProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SolidRelationFieldAvatarFormWidget.d.ts.map

package/dist/components/core/form/fields/widgets/SolidRelationFieldAvatarFormWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidRelationFieldAvatarFormWidget.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidRelationFieldAvatarFormWidget.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAG/D,eAAO,MAAM,kCAAkC,6BAA8B,yBAAyB,4CAmCrG,CAAA"}

package/dist/components/core/form/fields/widgets/SolidRelationFieldAvatarFormWidget.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { AvatarWidget } from "../../../../../components/core/list/widgets/SolidRelationAvatarWidget";
+export var SolidRelationFieldAvatarFormWidget = function (_a) {
+    var _b, _c, _d;
+    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 userKeyFieldName = (_d = (_c = fieldMetadata.relationModel) === null || _c === void 0 ? void 0 : _c.userKeyField) === null || _d === void 0 ? void 0 : _d.name;
+    var _e = useState([]), fieldValue = _e[0], setFieldValue = _e[1];
+    useEffect(function () {
+        var _a, _b;
+        console.log("fieldContext.data?.[fieldLayoutInfo.attrs.name]", (_a = fieldContext.data) === null || _a === void 0 ? void 0 : _a[fieldLayoutInfo.attrs.name]);
+        var value = (((_b = fieldContext.data) === null || _b === void 0 ? void 0 : _b[fieldLayoutInfo.attrs.name]) || []).map(function (item) { var _a; return ({ label: (_a = item[userKeyFieldName]) !== null && _a !== void 0 ? _a : '' }); });
+        if (Array.isArray(value)) {
+            if (value.length > 0) {
+                var data = value.map(function (v) { return v.label; });
+                setFieldValue(data);
+            }
+        }
+        if (value && !Array.isArray(value) && typeof value === "object") {
+            setFieldValue([value.label]);
+        }
+    }, [fieldContext]);
+    return (_jsxs("div", { className: "mt-2 flex-column", children: [_jsx("p", { className: "m-0 form-field-label font-medium", children: fieldLabel }), _jsx("div", { className: "flex flex-wrap gap-2 mt-2", children: fieldValue.map(function (v) { return (_jsx(AvatarWidget, { value: v })); }) })] }));
+};
+//# sourceMappingURL=SolidRelationFieldAvatarFormWidget.js.map

package/dist/components/core/form/fields/widgets/SolidRelationFieldAvatarFormWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidRelationFieldAvatarFormWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidRelationFieldAvatarFormWidget.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAO5C,OAAO,EAAE,YAAY,EAAE,MAAM,0DAA0D,CAAC;AAExF,MAAM,CAAC,IAAM,kCAAkC,GAAG,UAAC,EAAmD;;QAAjD,MAAM,YAAA,EAAE,YAAY,kBAAA;IAErE,IAAM,aAAa,GAAG,YAAY,CAAC,aAAa,CAAC;IACjD,IAAM,eAAe,GAAG,YAAY,CAAC,KAAK,CAAC;IAC3C,IAAM,UAAU,GAAG,MAAA,eAAe,CAAC,KAAK,CAAC,KAAK,mCAAI,aAAa,CAAC,WAAW,CAAC;IAC5E,IAAM,gBAAgB,GAAG,MAAA,MAAA,aAAa,CAAC,aAAa,0CAAE,YAAY,0CAAE,IAAI,CAAC;IACnE,IAAA,KAA8B,QAAQ,CAAM,EAAE,CAAC,EAA9C,UAAU,QAAA,EAAE,aAAa,QAAqB,CAAC;IACtD,SAAS,CAAC;;QACN,OAAO,CAAC,GAAG,CAAC,iDAAiD,EAAC,MAAA,YAAY,CAAC,IAAI,0CAAG,eAAe,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;QAE/G,IAAM,KAAK,GAAG,CAAC,CAAA,MAAA,YAAY,CAAC,IAAI,0CAAG,eAAe,CAAC,KAAK,CAAC,IAAI,CAAC,KAAI,EAAE,CAAC,CAAC,GAAG,CAAC,UAAC,IAAS,YAAK,OAAA,CAAC,EAAE,KAAK,EAAE,MAAA,IAAI,CAAC,gBAAgB,CAAC,mCAAI,EAAE,EAAE,CAAC,CAAA,EAAA,CAAC,CAAC;QACpI,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YAEtB,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBAClB,IAAM,IAAI,GAAG,KAAK,CAAC,GAAG,CAAC,UAAC,CAAM,IAAK,OAAA,CAAC,CAAC,KAAK,EAAP,CAAO,CAAC,CAAC;gBAC5C,aAAa,CAAC,IAAI,CAAC,CAAC;aACvB;SACJ;QACD,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7D,aAAa,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;SAChC;IACL,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAInB,OAAO,CACH,eAAK,SAAS,EAAC,kBAAkB,aAC7B,YAAG,SAAS,EAAC,kCAAkC,YAAE,UAAU,GAAK,EAChE,cAAK,SAAS,EAAC,2BAA2B,YACrC,UAAU,CAAC,GAAG,CAAC,UAAC,CAAM,IAAK,OAAA,CACxB,KAAC,YAAY,IAAC,KAAK,EAAE,CAAC,GAAI,CAC7B,EAF2B,CAE3B,CAAC,GACA,IACJ,CACT,CAAC;AACN,CAAC,CAAA"}

package/dist/components/core/form/fields/widgets/SolidRelationFieldAvatarFormWidget.tsx

@@ -0,0 +1,46 @@
+"use client";
+import { useEffect, useState } from "react";
+import { Message } from "primereact/message";
+import { classNames } from "primereact/utils";
+import { SelectButton } from "primereact/selectbutton";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+import { RadioButton } from "primereact/radiobutton";
+import { SolidFormFieldWidgetProps } from "@/types/solid-core";
+import { AvatarWidget } from "@/components/core/list/widgets/SolidRelationAvatarWidget";
+
+export const SolidRelationFieldAvatarFormWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
+
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const userKeyFieldName = fieldMetadata.relationModel?.userKeyField?.name;
+    const [fieldValue, setFieldValue] = useState<any>([]);
+    useEffect(() => {
+        console.log("fieldContext.data?.[fieldLayoutInfo.attrs.name]",fieldContext.data?.[fieldLayoutInfo.attrs.name]);
+        
+        const value = (fieldContext.data?.[fieldLayoutInfo.attrs.name] || []).map((item: any) => ({ label: item[userKeyFieldName] ?? '' }));
+        if (Array.isArray(value)) {
+
+            if (value.length > 0) {
+                const data = value.map((v: any) => v.label);
+                setFieldValue(data);
+            }
+        }
+        if (value && !Array.isArray(value) && typeof value === "object") {
+            setFieldValue([value.label]);
+        }
+    }, [fieldContext]);
+
+
+
+    return (
+        <div className="mt-2 flex-column">
+            <p className="m-0 form-field-label font-medium">{fieldLabel}</p>
+            <div className="flex flex-wrap gap-2 mt-2">
+                {fieldValue.map((v: any) => (
+                    <AvatarWidget value={v} />
+                ))}
+            </div>
+        </div>
+    );
+}

package/dist/components/core/form/fields/widgets/SolidSelectionStaticAutocompleteFieldWidget.d.ts

@@ -1,3 +1,3 @@
-import { SolidSelectionStaticFieldWidgetProps } from "@/types/solid-core";
+import { SolidSelectionStaticFieldWidgetProps } from "../../../../../types/solid-core";
 export declare const SolidSelectionStaticAutocompleteWidget: ({ formik, fieldContext }: SolidSelectionStaticFieldWidgetProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SolidSelectionStaticAutocompleteFieldWidget.d.ts.map

package/dist/components/core/form/fields/widgets/SolidSelectionStaticRadioFieldWidget.d.ts

@@ -1,3 +1,3 @@
-import { SolidSelectionStaticFieldWidgetProps } from "@/types/solid-core";
+import { SolidSelectionStaticFieldWidgetProps } from "../../../../../types/solid-core";
 export declare const SolidSelectionStaticRadioWidget: ({ formik, fieldContext }: SolidSelectionStaticFieldWidgetProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SolidSelectionStaticRadioFieldWidget.d.ts.map

package/dist/components/core/form/widgets/CustomHtml.d.ts

@@ -1,3 +1,3 @@
-import { SolidFormWidgetProps } from "@/types";
+import { SolidFormWidgetProps } from "../../../../types";
 export declare const CustomHtml: ({ field, formData, viewMetadata, fieldsMetadata }: SolidFormWidgetProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CustomHtml.d.ts.map

package/dist/components/core/form/widgets/CustomHtml.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { SolidFormWidgetProps } from "@/types";
+import parse from 'html-react-parser';
+import Handlebars from "handlebars";
+
+export const CustomHtml = ({ field, formData, viewMetadata, fieldsMetadata }: SolidFormWidgetProps) => {
+    let { type, attrs, body, children } = field;
+
+    // TODO: null check on this field required, show a proper error message on the UI suggesting that you are using a CustomHtml widget, however the html is not specified in the layout.
+    const html = attrs.html;
+
+    // TODO: run dompurify to avoid XSS attacks...
+
+    // TODO: assume the html is a handlebars template, we try to do variable replacement on it using formData.
+    const template = Handlebars.compile(html);
+
+    return (<div className={attrs.className}>{parse(template(formData))}</div>)
+}