@solidstarters/solid-core-ui 1.1.70 → 1.1.71

package/dist/components/core/list/columns/relations/SolidRelationOneToManyColumn.tsx

@@ -0,0 +1,111 @@
+'use client';
+import { FilterMatchMode } from 'primereact/api';
+import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
+import { FormEvent } from "primereact/ts-helpers";
+import { SolidListViewColumnParams } from '../../SolidListViewColumn';
+import { InputTypes, SolidVarInputsFilterElement } from "../../SolidVarInputsFilterElement";
+import { Button } from 'primereact/button';
+import { SolidListFieldWidgetProps } from '@/types/solid-core';
+import { getExtensionComponent } from '@/helpers/registry';
+
+const SolidRelationOneToManyColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
+    const filterable = column.attrs.filterable;
+    const showFilterOperator = false;
+    const filterMatchModeOptions = [
+        { label: 'In', value: FilterMatchMode.IN },
+        { label: 'Not In', value: FilterMatchMode.NOT_IN },
+    ];
+    const columnDataType = undefined;
+    const filterTemplate = (options: ColumnFilterElementTemplateOptions) => {
+
+        return (
+            <SolidVarInputsFilterElement
+                values={options.value}
+                onChange={(e: FormEvent<HTMLInputElement>) => options.filterCallback(e, options.index)}
+                inputType={InputTypes.RelationManyToOne}
+                solidListViewMetaData={solidListViewMetaData}
+                fieldMetadata={fieldMetadata}
+                column={column}
+            >
+            </SolidVarInputsFilterElement>
+        )
+    };
+
+    const header = column.attrs.label ?? fieldMetadata.displayName;
+
+    return (
+        <Column
+            key={fieldMetadata.name}
+            field={fieldMetadata.name}
+            header={header}
+            // className="text-sm"
+            sortable={column.attrs.sortable}
+            // filter={filterable}
+            dataType={columnDataType}
+            showFilterOperator={showFilterOperator}
+            filterMatchModeOptions={filterMatchModeOptions}
+            filterElement={filterTemplate}
+            body={(rowData) => {
+                let viewWidget = column.attrs.viewWidget;
+                if (!viewWidget) {
+                    viewWidget = 'DefaultRelationOneToManyListWidget';
+                }
+                let DynamicWidget = getExtensionComponent(viewWidget);
+                const widgetProps: SolidListFieldWidgetProps = {
+                    rowData,
+                    solidListViewMetaData,
+                    fieldMetadata,
+                    column
+                }
+                return (
+                    <>
+                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
+                    </>
+                )
+            }
+            }
+            filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
+            style={{ minWidth: "12rem" }}
+            headerClassName="table-header-fs"
+        ></Column>
+    );
+
+};
+
+export default SolidRelationOneToManyColumn;
+
+
+
+
+export const DefaultRelationOneToManyListWidget = ({ rowData, solidListViewMetaData, fieldMetadata, column }: SolidListFieldWidgetProps) => {
+    const manyToManyFieldData = rowData[column.attrs.name];
+
+    // This is the userkey that will be present within the rowData.
+    if (manyToManyFieldData) {
+        // Since this is a many-to-one field, we fetch the user key field of the associated model.
+        const userKeyField = fieldMetadata?.relationModel?.userKeyField?.name;
+
+        const manyToManyColVal = manyToManyFieldData.map((f: any) => f[userKeyField]);
+
+        // TODO: change this to use an anchor tag so that on click we open that entity form view. 
+        return (
+
+            <>
+                {manyToManyColVal.length > 0 &&
+                    <p>
+                        {manyToManyColVal[0]}
+                        <Button text className="kaban-load-more" style={{ padding: 0, paddingBottom: "3px" }} size="small"
+                            onClick={() => { }}
+                            label={manyToManyColVal.length - 1 > 0 ? `...${manyToManyColVal.length - 1} more` : ""}
+                        />
+
+                    </p >
+                }
+            </>
+
+        )
+    }
+    else {
+        return <span></span>
+    }
+};

package/dist/components/core/list/widgets/SolidRelationAvatarWidget.d.ts

@@ -0,0 +1,4 @@
+import { SolidListFieldWidgetProps } from "../../../../types/solid-core";
+export declare const AvatarWidget: ({ value }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const SolidRelationAvatarWidget: ({ rowData, solidListViewMetaData, fieldMetadata, column }: SolidListFieldWidgetProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SolidRelationAvatarWidget.d.ts.map

package/dist/components/core/list/widgets/SolidRelationAvatarWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidRelationAvatarWidget.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/list/widgets/SolidRelationAvatarWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAG/D,eAAO,MAAM,YAAY,cAAe,GAAG,4CAqD1C,CAAC;AAMF,eAAO,MAAM,yBAAyB,8DAA+D,yBAAyB,4CA0B7H,CAAC"}

package/dist/components/core/list/widgets/SolidRelationAvatarWidget.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export var AvatarWidget = function (_a) {
+    // use "widget": "SolidUserNameAvatarWidget" in the list view field 
+    var value = _a.value;
+    var getInitials = function (value) {
+        if (value) {
+            var names = value === null || value === void 0 ? void 0 : value.trim().split(' ');
+            var initials_1 = names.length === 1
+                ? names[0][0]
+                : names[0][0] + names[names.length - 1][0];
+            return initials_1.toUpperCase();
+        }
+        else {
+            return "";
+        }
+    };
+    var getColorFromInitials = function (initials) {
+        var hash = 0;
+        for (var i = 0; i < initials.length; i++) {
+            hash = initials.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        var hue = Math.abs(hash) % 360;
+        return "hsl(".concat(hue, ", 60%, 60%)"); // nice pastel color
+    };
+    var initials = getInitials(value);
+    var bgColor = getColorFromInitials(initials);
+    return (_jsx("div", { className: "solid-table-row", children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem' }, children: [_jsx("div", { style: {
+                        width: 20,
+                        height: 20,
+                        borderRadius: '50%',
+                        backgroundColor: bgColor,
+                        color: 'white',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        fontWeight: 600,
+                        fontSize: 12,
+                        boxShadow: '0 0 0 2px rgba(0,0,0,0.1)',
+                    }, children: initials }), _jsx("span", { children: value })] }) }));
+};
+export var SolidRelationAvatarWidget = function (_a) {
+    var _b, _c;
+    var rowData = _a.rowData, solidListViewMetaData = _a.solidListViewMetaData, fieldMetadata = _a.fieldMetadata, column = _a.column;
+    var manyToManyFieldData = rowData[column.attrs.name];
+    // This is the userkey that will be present within the rowData.
+    if (manyToManyFieldData) {
+        // Since this is a many-to-one field, we fetch the user key field of the associated model.
+        var userKeyField_1 = (_c = (_b = fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.relationModel) === null || _b === void 0 ? void 0 : _b.userKeyField) === null || _c === void 0 ? void 0 : _c.name;
+        var manyToManyColVal = manyToManyFieldData.map(function (f) { return f[userKeyField_1]; });
+        // TODO: change this to use an anchor tag so that on click we open that entity form view. 
+        return (_jsx(_Fragment, { children: manyToManyColVal.length > 0 &&
+                manyToManyColVal.map(function (m) {
+                    return _jsx(AvatarWidget, { value: m });
+                }) }));
+    }
+    else {
+        return _jsx("span", {});
+    }
+};
+//# sourceMappingURL=SolidRelationAvatarWidget.js.map

package/dist/components/core/list/widgets/SolidRelationAvatarWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidRelationAvatarWidget.js","sourceRoot":"","sources":["../../../../../src/components/core/list/widgets/SolidRelationAvatarWidget.tsx"],"names":[],"mappings":"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"}

package/dist/components/core/list/widgets/SolidRelationAvatarWidget.tsx

@@ -0,0 +1,89 @@
+import { SolidListFieldWidgetProps } from "@/types/solid-core";
+
+
+export const AvatarWidget = ({ value }: any) => {
+    // use "widget": "SolidUserNameAvatarWidget" in the list view field 
+
+
+    const getInitials = (value: string) => {
+        if (value) {
+            const names = value?.trim().split(' ');
+            const initials =
+                names.length === 1
+                    ? names[0][0]
+                    : names[0][0] + names[names.length - 1][0];
+            return initials.toUpperCase();
+        } else {
+            return ""
+        }
+    };
+
+    const getColorFromInitials = (initials: string) => {
+        let hash = 0;
+        for (let i = 0; i < initials.length; i++) {
+            hash = initials.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        const hue = Math.abs(hash) % 360;
+        return `hsl(${hue}, 60%, 60%)`; // nice pastel color
+    };
+
+    const initials = getInitials(value);
+    const bgColor = getColorFromInitials(initials);
+
+    return (
+        <div className="solid-table-row">
+            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                <div
+                    style={{
+                        width: 20,
+                        height: 20,
+                        borderRadius: '50%',
+                        backgroundColor: bgColor,
+                        color: 'white',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        fontWeight: 600,
+                        fontSize: 12,
+                        boxShadow: '0 0 0 2px rgba(0,0,0,0.1)',
+                    }}
+                >
+                    {initials}
+                </div>
+                <span>{value}</span>
+            </div>
+        </div>
+    );
+};
+
+
+
+
+
+export const SolidRelationAvatarWidget = ({ rowData, solidListViewMetaData, fieldMetadata, column }: SolidListFieldWidgetProps) => {
+    const manyToManyFieldData = rowData[column.attrs.name];
+
+    // This is the userkey that will be present within the rowData.
+    if (manyToManyFieldData) {
+        // Since this is a many-to-one field, we fetch the user key field of the associated model.
+        const userKeyField = fieldMetadata?.relationModel?.userKeyField?.name;
+
+        const manyToManyColVal = manyToManyFieldData.map((f: any) => f[userKeyField]);
+
+        // TODO: change this to use an anchor tag so that on click we open that entity form view. 
+        return (
+            <>
+                {manyToManyColVal.length > 0 &&
+
+                    manyToManyColVal.map((m: any) =>
+                        <AvatarWidget value={m}></AvatarWidget>
+
+                    )
+                }
+            </>
+        )
+    }
+    else {
+        return <span></span>
+    }
+};

package/dist/components/core/list/widgets/SolidShortTextAvatarWidget.d.ts

@@ -0,0 +1,3 @@
+import { SolidListFieldWidgetProps } from "../../../../types/solid-core";
+export declare const SolidShortTextAvatarWidget: ({ rowData, solidListViewMetaData, fieldMetadata, column }: SolidListFieldWidgetProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SolidShortTextAvatarWidget.d.ts.map

package/dist/components/core/list/widgets/SolidShortTextAvatarWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidShortTextAvatarWidget.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/list/widgets/SolidShortTextAvatarWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAG/D,eAAO,MAAM,0BAA0B,8DAA+D,yBAAyB,4CAsD9H,CAAC"}

package/dist/components/core/list/widgets/SolidShortTextAvatarWidget.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var SolidShortTextAvatarWidget = function (_a) {
+    // use "widget": "SolidUserNameAvatarWidget" in the list view field 
+    var rowData = _a.rowData, solidListViewMetaData = _a.solidListViewMetaData, fieldMetadata = _a.fieldMetadata, column = _a.column;
+    var value = rowData[fieldMetadata.name];
+    var getInitials = function (value) {
+        if (value) {
+            var names = value === null || value === void 0 ? void 0 : value.trim().split(' ');
+            var initials_1 = names.length === 1
+                ? names[0][0]
+                : names[0][0] + names[names.length - 1][0];
+            return initials_1.toUpperCase();
+        }
+        else {
+            return "";
+        }
+    };
+    var getColorFromInitials = function (initials) {
+        var hash = 0;
+        for (var i = 0; i < initials.length; i++) {
+            hash = initials.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        var hue = Math.abs(hash) % 360;
+        return "hsl(".concat(hue, ", 60%, 60%)"); // nice pastel color
+    };
+    var initials = getInitials(value);
+    var bgColor = getColorFromInitials(initials);
+    return (_jsx("div", { className: "solid-table-row", children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem' }, children: [_jsx("div", { style: {
+                        width: 20,
+                        height: 20,
+                        borderRadius: '50%',
+                        backgroundColor: bgColor,
+                        color: 'white',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        fontWeight: 600,
+                        fontSize: 12,
+                        boxShadow: '0 0 0 2px rgba(0,0,0,0.1)',
+                    }, children: initials }), _jsx("span", { children: value })] }) }));
+};
+//# sourceMappingURL=SolidShortTextAvatarWidget.js.map

package/dist/components/core/list/widgets/SolidShortTextAvatarWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidShortTextAvatarWidget.js","sourceRoot":"","sources":["../../../../../src/components/core/list/widgets/SolidShortTextAvatarWidget.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,IAAM,0BAA0B,GAAG,UAAC,EAAoF;IAC3H,oEAAoE;QAD3B,OAAO,aAAA,EAAE,qBAAqB,2BAAA,EAAE,aAAa,mBAAA,EAAE,MAAM,YAAA;IAG9F,IAAM,KAAK,GAAG,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAE1C,IAAM,WAAW,GAAG,UAAC,KAAa;QAC9B,IAAI,KAAK,EAAE;YACP,IAAM,KAAK,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;YACvC,IAAM,UAAQ,GACV,KAAK,CAAC,MAAM,KAAK,CAAC;gBACd,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACb,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACnD,OAAO,UAAQ,CAAC,WAAW,EAAE,CAAC;SACjC;aAAM;YACH,OAAO,EAAE,CAAA;SACZ;IACL,CAAC,CAAC;IAEF,IAAM,oBAAoB,GAAG,UAAC,QAAgB;QAC1C,IAAI,IAAI,GAAG,CAAC,CAAC;QACb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACtC,IAAI,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;SACxD;QACD,IAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC;QACjC,OAAO,cAAO,GAAG,gBAAa,CAAC,CAAC,oBAAoB;IACxD,CAAC,CAAC;IAEF,IAAM,QAAQ,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;IACpC,IAAM,OAAO,GAAG,oBAAoB,CAAC,QAAQ,CAAC,CAAC;IAE/C,OAAO,CACH,cAAK,SAAS,EAAC,iBAAiB,YAC5B,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,aAChE,cACI,KAAK,EAAE;wBACH,KAAK,EAAE,EAAE;wBACT,MAAM,EAAE,EAAE;wBACV,YAAY,EAAE,KAAK;wBACnB,eAAe,EAAE,OAAO;wBACxB,KAAK,EAAE,OAAO;wBACd,OAAO,EAAE,MAAM;wBACf,UAAU,EAAE,QAAQ;wBACpB,cAAc,EAAE,QAAQ;wBACxB,UAAU,EAAE,GAAG;wBACf,QAAQ,EAAE,EAAE;wBACZ,SAAS,EAAE,2BAA2B;qBACzC,YAEA,QAAQ,GACP,EACN,yBAAO,KAAK,GAAQ,IAClB,GACJ,CACT,CAAC;AACN,CAAC,CAAC"}

package/{src/components/core/list/widgets/SolidUserNameAvatarWidget.tsx → dist/components/core/list/widgets/SolidShortTextAvatarWidget.tsx}

@@ -1,15 +1,22 @@
+import { SolidListFieldWidgetProps } from "@/types/solid-core";
 
-export const SolidUserNameAvatarWidget = ({ value }: any) => {
 
+export const SolidShortTextAvatarWidget = ({ rowData, solidListViewMetaData, fieldMetadata, column }: SolidListFieldWidgetProps) => {
     // use "widget": "SolidUserNameAvatarWidget" in the list view field 
 
-    const getInitials = (fullName: string) => {
-        const names = fullName.trim().split(' ');
-        const initials =
-            names.length === 1
-                ? names[0][0]
-                : names[0][0] + names[names.length - 1][0];
-        return initials.toUpperCase();
+    const value = rowData[fieldMetadata.name];
+
+    const getInitials = (value: string) => {
+        if (value) {
+            const names = value?.trim().split(' ');
+            const initials =
+                names.length === 1
+                    ? names[0][0]
+                    : names[0][0] + names[names.length - 1][0];
+            return initials.toUpperCase();
+        } else {
+            return ""
+        }
     };
 
     const getColorFromInitials = (initials: string) => {
@@ -29,8 +36,8 @@ export const SolidUserNameAvatarWidget = ({ value }: any) => {
             <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
                 <div
                     style={{
-                        width: 25,
-                        height: 25,
+                        width: 20,
+                        height: 20,
                         borderRadius: '50%',
                         backgroundColor: bgColor,
                         color: 'white',
@@ -38,7 +45,7 @@ export const SolidUserNameAvatarWidget = ({ value }: any) => {
                         alignItems: 'center',
                         justifyContent: 'center',
                         fontWeight: 600,
-                        fontSize: 25 * 0.4,
+                        fontSize: 12,
                         boxShadow: '0 0 0 2px rgba(0,0,0,0.1)',
                     }}
                 >

package/dist/components/core/list/widgets/SolidShortTextFieldImageRenderModeWidget.d.ts

@@ -1,2 +1,3 @@
-export declare const SolidShortTextFieldImageRenderModeWidget: ({ value, setLightboxUrls, setOpenLightbox }: any) => import("react/jsx-runtime").JSX.Element;
+import { SolidMediaListFieldWidgetProps } from "../../../../types/solid-core";
+export declare const SolidShortTextFieldImageListWidget: ({ rowData, solidListViewMetaData, fieldMetadata, column, setLightboxUrls, setOpenLightbox }: SolidMediaListFieldWidgetProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SolidShortTextFieldImageRenderModeWidget.d.ts.map

package/dist/components/core/list/widgets/SolidShortTextFieldImageRenderModeWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidShortTextFieldImageRenderModeWidget.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/list/widgets/SolidShortTextFieldImageRenderModeWidget.tsx"],"names":[],"mappings":"AACA,eAAO,MAAM,wCAAwC,gDAAiD,GAAG,4CAgBxG,CAAC"}
+{"version":3,"file":"SolidShortTextFieldImageRenderModeWidget.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/list/widgets/SolidShortTextFieldImageRenderModeWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,8BAA8B,EAAE,MAAM,oBAAoB,CAAC;AAEpE,eAAO,MAAM,kCAAkC,gGAAiG,8BAA8B,4CAiB7K,CAAC"}

package/dist/components/core/list/widgets/SolidShortTextFieldImageRenderModeWidget.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export var SolidShortTextFieldImageRenderModeWidget = function (_a) {
-    var value = _a.value, setLightboxUrls = _a.setLightboxUrls, setOpenLightbox = _a.setOpenLightbox;
-    return (_jsx("img", { src: value, alt: "product-image-single", className: "shadow-2 border-round", width: 40, height: 40, style: { objectFit: "cover" }, onClick: function (event) {
+export var SolidShortTextFieldImageListWidget = function (_a) {
+    var rowData = _a.rowData, solidListViewMetaData = _a.solidListViewMetaData, fieldMetadata = _a.fieldMetadata, column = _a.column, setLightboxUrls = _a.setLightboxUrls, setOpenLightbox = _a.setOpenLightbox;
+    return (_jsx("img", { src: rowData[fieldMetadata.name], alt: "product-image-single", className: "shadow-2 border-round", width: 40, height: 40, style: { objectFit: "cover" }, onClick: function (event) {
             event.stopPropagation();
-            setLightboxUrls([{ src: value, downloadUrl: value }]);
+            setLightboxUrls([{ src: rowData[fieldMetadata.name], downloadUrl: rowData[fieldMetadata.name] }]);
             setOpenLightbox(true);
         } }));
 };

package/dist/components/core/list/widgets/SolidShortTextFieldImageRenderModeWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidShortTextFieldImageRenderModeWidget.js","sourceRoot":"","sources":["../../../../../src/components/core/list/widgets/SolidShortTextFieldImageRenderModeWidget.tsx"],"names":[],"mappings":";AACA,MAAM,CAAC,IAAM,wCAAwC,GAAG,UAAC,EAAgD;QAA9C,KAAK,WAAA,EAAE,eAAe,qBAAA,EAAE,eAAe,qBAAA;IAC9F,OAAO,CACH,cACI,GAAG,EAAE,KAAK,EACV,GAAG,EAAC,sBAAsB,EAC1B,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,EAC7B,OAAO,EAAE,UAAC,KAAK;YACX,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,eAAe,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;YACtD,eAAe,CAAC,IAAI,CAAC,CAAC;QAC1B,CAAC,GACH,CACL,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"SolidShortTextFieldImageRenderModeWidget.js","sourceRoot":"","sources":["../../../../../src/components/core/list/widgets/SolidShortTextFieldImageRenderModeWidget.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,IAAM,kCAAkC,GAAG,UAAC,EAA2H;QAAzH,OAAO,aAAA,EAAE,qBAAqB,2BAAA,EAAE,aAAa,mBAAA,EAAE,MAAM,YAAA,EAAE,eAAe,qBAAA,EAAE,eAAe,qBAAA;IAExI,OAAO,CACH,cACI,GAAG,EAAE,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,EAChC,GAAG,EAAC,sBAAsB,EAC1B,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,EAC7B,OAAO,EAAE,UAAC,KAAK;YACX,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,eAAe,CAAC,CAAC,EAAE,GAAG,EAAE,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,WAAW,EAAE,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;YAClG,eAAe,CAAC,IAAI,CAAC,CAAC;QAC1B,CAAC,GACH,CACL,CAAC;AACN,CAAC,CAAC"}

package/dist/components/core/list/widgets/SolidShortTextFieldImageRenderModeWidget.tsx

@@ -0,0 +1,21 @@
+import { SolidMediaListFieldWidgetProps } from "@/types/solid-core";
+
+export const SolidShortTextFieldImageListWidget = ({ rowData, solidListViewMetaData, fieldMetadata, column, setLightboxUrls, setOpenLightbox }: SolidMediaListFieldWidgetProps) => {
+
+    return (
+        <img
+            src={rowData[fieldMetadata.name]}
+            alt="product-image-single"
+            className="shadow-2 border-round"
+            width={40}
+            height={40}
+            style={{ objectFit: "cover" }}
+            onClick={(event) => {
+                event.stopPropagation();
+                setLightboxUrls([{ src: rowData[fieldMetadata.name], downloadUrl: rowData[fieldMetadata.name] }]);
+                setOpenLightbox(true);
+            }}
+        />
+    );
+};
+