@solidstarters/solid-core-ui 1.1.210 → 1.1.212

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

@@ -0,0 +1,70 @@
+"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/common/AvatarWidget";
+
+export const SolidShortTextFieldAvatarWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const value = formik.values[fieldLayoutInfo.attrs.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) => {
+        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="mt-2 flex-column gap-2">
+            <p className="m-0 form-field-label font-medium">{fieldLabel}</p>
+            <div>
+                {value &&
+                    < 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,
+                            }}
+                        >
+                            {initials}
+                        </div>
+                        <span>{value}</span>
+                    </div>
+                }
+            </div>
+        </div>
+    );
+}

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

@@ -1 +1 @@
-{"version":3,"file":"CustomHtml.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/form/widgets/CustomHtml.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAI/C,eAAO,MAAM,UAAU,sDAAuD,oBAAoB,4CAYjG,CAAA"}
+{"version":3,"file":"CustomHtml.d.ts","sourceRoot":"./","sources":["components/core/form/widgets/CustomHtml.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAKzD,eAAO,MAAM,UAAU,sDAAuD,oBAAoB,4CAYjG,CAAA"}

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

@@ -1,15 +1,15 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import parse from 'html-react-parser';
-import Handlebars from "handlebars/dist/handlebars";
-export var CustomHtml = function (_a) {
-    var field = _a.field, formData = _a.formData, viewMetadata = _a.viewMetadata, fieldsMetadata = _a.fieldsMetadata;
-    var type = field.type, attrs = field.attrs, body = field.body, children = field.children;
+// import Handlebars from "handlebars/dist/handlebars";
+import * as Handlebars from "handlebars";
+export const CustomHtml = ({ field, formData, viewMetadata, fieldsMetadata }) => {
+    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.
-    var html = attrs.html;
+    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.
-    var template = Handlebars.compile(html);
+    const template = Handlebars.compile(html);
     return (_jsx("div", { className: attrs.className, children: parse(template(formData)) }));
 };
 //# sourceMappingURL=CustomHtml.js.map

package/dist/components/core/form/widgets/CustomHtml.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomHtml.js","sourceRoot":"","sources":["../../../../../src/components/core/form/widgets/CustomHtml.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,KAAK,MAAM,mBAAmB,CAAC;AACtC,OAAO,UAAU,MAAM,4BAA4B,CAAC;AAEpD,MAAM,CAAC,IAAM,UAAU,GAAG,UAAC,EAAuE;QAArE,KAAK,WAAA,EAAE,QAAQ,cAAA,EAAE,YAAY,kBAAA,EAAE,cAAc,oBAAA;IAChE,IAAA,IAAI,GAA4B,KAAK,KAAjC,EAAE,KAAK,GAAqB,KAAK,MAA1B,EAAE,IAAI,GAAe,KAAK,KAApB,EAAE,QAAQ,GAAK,KAAK,SAAV,CAAW;IAE5C,qLAAqL;IACrL,IAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;IAExB,8CAA8C;IAE9C,0GAA0G;IAC1G,IAAM,QAAQ,GAAG,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAE1C,OAAO,CAAC,cAAK,SAAS,EAAE,KAAK,CAAC,SAAS,YAAG,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,GAAO,CAAC,CAAA;AAC/E,CAAC,CAAA"}
+{"version":3,"file":"CustomHtml.js","sourceRoot":"./","sources":["components/core/form/widgets/CustomHtml.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,KAAK,MAAM,mBAAmB,CAAC;AACtC,uDAAuD;AACvD,OAAO,KAAK,UAAU,MAAM,YAAY,CAAC;AAEzC,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAwB,EAAE,EAAE;IAClG,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE5C,qLAAqL;IACrL,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;IAExB,8CAA8C;IAE9C,0GAA0G;IAC1G,MAAM,QAAQ,GAAG,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAE1C,OAAO,CAAC,cAAK,SAAS,EAAE,KAAK,CAAC,SAAS,YAAG,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,GAAO,CAAC,CAAA;AAC/E,CAAC,CAAA","sourcesContent":["\"use client\";\n\nimport { SolidFormWidgetProps } from \"../../../../types\";\nimport parse from 'html-react-parser';\n// import Handlebars from \"handlebars/dist/handlebars\";\nimport * as Handlebars from \"handlebars\";\n\nexport const CustomHtml = ({ field, formData, viewMetadata, fieldsMetadata }: SolidFormWidgetProps) => {\n    let { type, attrs, body, children } = field;\n    \n    // 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.\n    const html = attrs.html;\n\n    // TODO: run dompurify to avoid XSS attacks...\n\n    // TODO: assume the html is a handlebars template, we try to do variable replacement on it using formData.\n    const template = Handlebars.compile(html);\n\n    return (<div className={attrs.className}>{parse(template(formData))}</div>)\n}\n"]}

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

@@ -0,0 +1,20 @@
+"use client";
+
+import { SolidFormWidgetProps } from "../../../../types";
+import parse from 'html-react-parser';
+// import Handlebars from "handlebars/dist/handlebars";
+import * as 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>)
+}

package/dist/components/core/kanban/KanbanBoard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KanbanBoard.d.ts","sourceRoot":"","sources":["../../../../src/components/core/kanban/KanbanBoard.tsx"],"names":[],"mappings":"AA2BA,eAAO,MAAM,WAAW,2NAA4N,GAAG,4CAwHtP,CAAA;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"KanbanBoard.d.ts","sourceRoot":"./","sources":["components/core/kanban/KanbanBoard.tsx"],"names":[],"mappings":"AA2BA,eAAO,MAAM,WAAW,2NAA4N,GAAG,4CAwHtP,CAAA;AAED,eAAe,WAAW,CAAC"}

package/dist/components/core/kanban/KanbanBoard.js

@@ -1,25 +1,13 @@
 // @ts-nocheck
 '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);
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { DragDropContext } from "@hello-pangea/dnd";
 import KanbanColumn from "./KanbanColumn";
-export var KanbanBoard = function (_a) {
-    var groupByFieldName = _a.groupByFieldName, groupedView = _a.groupedView, kanbanViewData = _a.kanbanViewData, maxSwimLanesCount = _a.maxSwimLanesCount, solidKanbanViewMetaData = _a.solidKanbanViewMetaData, setKanbanViewData = _a.setKanbanViewData, handleLoadMore = _a.handleLoadMore, onDragEnd = _a.onDragEnd, handleSwimLanePagination = _a.handleSwimLanePagination, setLightboxUrls = _a.setLightboxUrls, setOpenLightbox = _a.setOpenLightbox, editButtonUrl = _a.editButtonUrl;
-    var _b = useState(true), loading = _b[0], setLoading = _b[1];
+export const KanbanBoard = ({ groupByFieldName, groupedView, kanbanViewData, maxSwimLanesCount, solidKanbanViewMetaData, setKanbanViewData, handleLoadMore, onDragEnd, handleSwimLanePagination, setLightboxUrls, setOpenLightbox, editButtonUrl }) => {
+    const [loading, setLoading] = useState(true);
     // State to manage the folded status of each column
-    var _c = useState({}), foldedStates = _c[0], setFoldedStates = _c[1];
+    const [foldedStates, setFoldedStates] = useState({});
     // Fetch data from the API
     // useEffect(() => {
     //     const fetchData = async (): Promise<void> => {
@@ -45,33 +33,32 @@ export var KanbanBoard = function (_a) {
     //     return <div>Loading...</div>;
     // }
     // Toggle fold (not yet implemented)
-    var toggleFold = function (status) {
-        setFoldedStates(function (prevFoldedStates) {
-            var _a;
-            return (__assign(__assign({}, prevFoldedStates), (_a = {}, _a[status] = !prevFoldedStates[status], _a)));
-        });
+    const toggleFold = (status) => {
+        setFoldedStates((prevFoldedStates) => ({
+            ...prevFoldedStates,
+            [status]: !prevFoldedStates[status],
+        }));
     };
     // Render the Kanban board
     return (
     //@ts-ignore
-    _jsx("div", { className: "solid-kanban-board-wrapper", children: _jsx(DragDropContext, { onDragEnd: onDragEnd, children: _jsxs("div", { className: "flex gap-4 px-4 md:px-5 py-3 md:py-4 solid-kanban-board-scroll-context", children: [kanbanViewData.map(function (data) {
-                        var _a;
+    _jsx("div", { className: "solid-kanban-board-wrapper", children: _jsx(DragDropContext, { onDragEnd: onDragEnd, children: _jsxs("div", { className: "flex gap-4 px-4 md:px-5 py-3 md:py-4 solid-kanban-board-scroll-context", children: [kanbanViewData.map((data) => {
                         // Find the displayName for the groupName from solidKanbanViewMetaData.solidFieldsMetadata
-                        var label = data.groupName;
-                        var fieldMeta = (_a = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.solidFieldsMetadata) === null || _a === void 0 ? void 0 : _a[groupByFieldName];
+                        let label = data.groupName;
+                        const fieldMeta = solidKanbanViewMetaData?.solidFieldsMetadata?.[groupByFieldName];
                         if (fieldMeta &&
                             fieldMeta.type === "selectionStatic" &&
                             Array.isArray(fieldMeta.selectionStaticValues)) {
-                            var match = fieldMeta.selectionStaticValues.find(function (v) {
-                                var _a = v.split(":"), value = _a[0], displayName = _a[1];
+                            const match = fieldMeta.selectionStaticValues.find((v) => {
+                                const [value, displayName] = v.split(":");
                                 return value === data.groupName;
                             });
                             if (match) {
                                 label = match.split(":")[1];
                             }
                         }
-                        var group = {
-                            label: label,
+                        const group = {
+                            label,
                             count: data.groupData.meta.totalRecords,
                             limit: data.groupData.meta.perPage,
                             currentPage: data.groupData.meta.currentPage,

package/dist/components/core/kanban/KanbanBoard.js.map

@@ -1 +1 @@
-{"version":3,"file":"KanbanBoard.js","sourceRoot":"","sources":["../../../../src/components/core/kanban/KanbanBoard.tsx"],"names":[],"mappings":"AAAA,cAAc;AACd,YAAY,CAAA;;;;;;;;;;;;;AAEZ,OAAc,EAAE,QAAQ,EAAa,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,eAAe,EAAc,MAAM,mBAAmB,CAAC;AAEhE,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAqB1C,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,EAA2N;QAAzN,gBAAgB,sBAAA,EAAE,WAAW,iBAAA,EAAE,cAAc,oBAAA,EAAE,iBAAiB,uBAAA,EAAE,uBAAuB,6BAAA,EAAE,iBAAiB,uBAAA,EAAE,cAAc,oBAAA,EAAE,SAAS,eAAA,EAAE,wBAAwB,8BAAA,EAAE,eAAe,qBAAA,EAAE,eAAe,qBAAA,EAAE,aAAa,mBAAA;IACtO,IAAA,KAAwB,QAAQ,CAAU,IAAI,CAAC,EAA9C,OAAO,QAAA,EAAE,UAAU,QAA2B,CAAC;IACtD,mDAAmD;IAC7C,IAAA,KAAkC,QAAQ,CAA0B,EAAE,CAAC,EAAtE,YAAY,QAAA,EAAE,eAAe,QAAyC,CAAC;IAE9E,0BAA0B;IAC1B,oBAAoB;IACpB,qDAAqD;IACrD,gBAAgB;IAChB,gCAAgC;IAChC,gEAAgE;IAChE,2EAA2E;IAC3E,uBAAuB;IACvB,qDAAqD;IACrD,uBAAuB;IACvB,oBAAoB;IACpB,iEAAiE;IACjE,kCAAkC;IAClC,4BAA4B;IAC5B,4DAA4D;IAC5D,sBAAsB;IACtB,iCAAiC;IACjC,YAAY;IACZ,SAAS;IAET,mBAAmB;IACnB,UAAU;IAEV,iBAAiB;IACjB,oCAAoC;IACpC,IAAI;IAKJ,oCAAoC;IACpC,IAAM,UAAU,GAAG,UAAC,MAAc;QAC9B,eAAe,CAAC,UAAC,gBAAgB;;YAAK,OAAA,uBAC/B,gBAAgB,gBAClB,MAAM,IAAG,CAAC,gBAAgB,CAAC,MAAM,CAAC,OACrC;QAHoC,CAGpC,CAAC,CAAC;IACR,CAAC,CAAC;IAEF,0BAA0B;IAC1B,OAAO;IACH,YAAY;IACZ,cAAK,SAAS,EAAC,4BAA4B,YACvC,KAAC,eAAe,IAAC,SAAS,EAAE,SAAS,YACjC,eAAK,SAAS,EAAC,wEAAwE,aAmBlF,cAAc,CAAC,GAAG,CAAC,UAAC,IAAI;;wBACrB,0FAA0F;wBAC1F,IAAI,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC;wBAC3B,IAAM,SAAS,GAAG,MAAA,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAE,mBAAmB,0CAAG,gBAAgB,CAAC,CAAC;wBACnF,IACI,SAAS;4BACT,SAAS,CAAC,IAAI,KAAK,iBAAiB;4BACpC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,qBAAqB,CAAC,EAChD;4BACE,IAAM,KAAK,GAAG,SAAS,CAAC,qBAAqB,CAAC,IAAI,CAC9C,UAAC,CAAS;gCACA,IAAA,KAAuB,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,EAAlC,KAAK,QAAA,EAAE,WAAW,QAAgB,CAAC;gCAC1C,OAAO,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC;4BACpC,CAAC,CACJ,CAAC;4BACF,IAAI,KAAK,EAAE;gCACP,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;6BAC/B;yBACJ;wBAED,IAAM,KAAK,GAAG;4BACV,KAAK,OAAA;4BACL,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY;4BACvC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO;4BAClC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW;4BAC5C,MAAM,EAAE,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,KAAK;yBAChD,CAAC;wBAEF,OAAO,CACH,KAAC,YAAY,IAET,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,IAAI,CAAC,SAAS,EAC5B,KAAK,EAAE,KAAK,EACZ,uBAAuB,EAAE,uBAAuB,EAChD,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,OAAO,EACjC,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,eAAe,EAAE,eAAe,EAChC,aAAa,EAAE,aAAa,IAVvB,IAAI,CAAC,SAAS,CAWrB,CACL,CAAC;oBACN,CAAC,CAAC,EACD,WAAW,KAAK,KAAK,IAAI,cAAc,CAAC,MAAM,GAAG,iBAAiB;wBAC/D,wBACI,aAAG,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,0BAA0B,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,IAAI,QAAC,OAAO,EAAE,wBAAwB,8BAAgB,iBAAiB,GAAG,cAAc,CAAC,MAAM,SAAM,GACvL,IAER,GACQ,GAChB,CACT,CAAC;AACN,CAAC,CAAA;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"KanbanBoard.js","sourceRoot":"./","sources":["components/core/kanban/KanbanBoard.tsx"],"names":[],"mappings":"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","sourcesContent":["// @ts-nocheck\n'use client'\n\nimport React, { useState, useEffect } from \"react\";\nimport { DragDropContext, DropResult } from \"@hello-pangea/dnd\";\nimport axios from \"axios\";\nimport KanbanColumn from \"./KanbanColumn\";\nimport { Button } from \"primereact/button\";\n\n// Define types for groupData and Grouped Data\ninterface Post {\n    id: string;\n    title: string;\n    status: string;\n}\n\ninterface GroupData {\n    count: number;\n    records: Post[];\n}\n\ninterface ApiResponse {\n    data: {\n        groupedData: Record<string, GroupData>;\n    };\n}\n\nexport const KanbanBoard = ({ groupByFieldName, groupedView, kanbanViewData, maxSwimLanesCount, solidKanbanViewMetaData, setKanbanViewData, handleLoadMore, onDragEnd, handleSwimLanePagination, setLightboxUrls, setOpenLightbox, editButtonUrl }: any) => {\n    const [loading, setLoading] = useState<boolean>(true);\n    // State to manage the folded status of each column\n    const [foldedStates, setFoldedStates] = useState<Record<string, boolean>>({});\n\n    // Fetch data from the API\n    // useEffect(() => {\n    //     const fetchData = async (): Promise<void> => {\n    //         try {\n    //             setLoading(true);\n    //             // const response = await axios.get<ApiResponse>(\n    //             //     \"http://localhost:3000/api/blog/group-kanban/status\",\n    //             //     {\n    //             //         headers: { accept: \"*/*\" },\n    //             //     }\n    //             // );\n    //             // setGroupedData(response.data.data.groupedData);\n    //             setGroupedData({});\n    //         } catch (error) {\n    //             console.error(\"Error fetching data:\", error);\n    //         } finally {\n    //             setLoading(false);\n    //         }\n    //     };\n\n    //     fetchData();\n    // }, []);\n\n    // if (loading) {\n    //     return <div>Loading...</div>;\n    // }\n\n\n\n\n    // Toggle fold (not yet implemented)\n    const toggleFold = (status: string): void => {\n        setFoldedStates((prevFoldedStates) => ({\n            ...prevFoldedStates,\n            [status]: !prevFoldedStates[status],\n        }));\n    };\n\n    // Render the Kanban board\n    return (\n        //@ts-ignore\n        <div className=\"solid-kanban-board-wrapper\">\n            <DragDropContext onDragEnd={onDragEnd}>\n                <div className=\"flex gap-4 px-4 md:px-5 py-3 md:py-4 solid-kanban-board-scroll-context\">\n                    {/* {Object.entries(kanbanViewData).map(([groupVal, data]) => {\n                    const group = {\n                        label: groupVal,\n                        count: data.count,\n                        folded: foldedStates[groupVal] || false,\n                    };\n\n                    return (\n                        <KanbanColumn\n                            key={groupVal}\n                            groupByField={groupVal}\n                            group={group}\n                            groupData={data.records}\n                            toggleFold={toggleFold}\n                            handleLoadMore={handleLoadMore}\n                        />\n                    );\n                })} */}\n                    {kanbanViewData.map((data) => {\n                        // Find the displayName for the groupName from solidKanbanViewMetaData.solidFieldsMetadata\n                        let label = data.groupName;\n                        const fieldMeta = solidKanbanViewMetaData?.solidFieldsMetadata?.[groupByFieldName];\n                        if (\n                            fieldMeta &&\n                            fieldMeta.type === \"selectionStatic\" &&\n                            Array.isArray(fieldMeta.selectionStaticValues)\n                        ) {\n                            const match = fieldMeta.selectionStaticValues.find(\n                                (v: string) => {\n                                    const [value, displayName] = v.split(\":\");\n                                    return value === data.groupName;\n                                }\n                            );\n                            if (match) {\n                                label = match.split(\":\")[1];\n                            }\n                        }\n\n                        const group = {\n                            label,\n                            count: data.groupData.meta.totalRecords,\n                            limit: data.groupData.meta.perPage,\n                            currentPage: data.groupData.meta.currentPage,\n                            folded: foldedStates[data.groupName] || false,\n                        };\n\n                        return (\n                            <KanbanColumn\n                                key={data.groupName}\n                                groupedView={groupedView}\n                                groupByField={data.groupName}\n                                group={group}\n                                solidKanbanViewMetaData={solidKanbanViewMetaData}\n                                groupData={data.groupData.records}\n                                toggleFold={toggleFold}\n                                handleLoadMore={handleLoadMore}\n                                setLightboxUrls={setLightboxUrls}\n                                setOpenLightbox={setOpenLightbox}\n                                editButtonUrl={editButtonUrl}\n                            />\n                        );\n                    })}\n                    {groupedView !== false && kanbanViewData.length < maxSwimLanesCount &&\n                        <div>\n                            <a size=\"small\" className=\"kaban-swimlane-load-more\" style={{ textWrap: 'nowrap' }} text onClick={handleSwimLanePagination}>Load More...({maxSwimLanesCount - kanbanViewData.length})</a>\n                        </div>\n                    }\n                </div>\n            </DragDropContext>\n        </div>\n    );\n}\n\nexport default KanbanBoard;\n"]}

package/dist/components/core/kanban/KanbanBoard.tsx

@@ -0,0 +1,150 @@
+// @ts-nocheck
+'use client'
+
+import React, { useState, useEffect } from "react";
+import { DragDropContext, DropResult } from "@hello-pangea/dnd";
+import axios from "axios";
+import KanbanColumn from "./KanbanColumn";
+import { Button } from "primereact/button";
+
+// Define types for groupData and Grouped Data
+interface Post {
+    id: string;
+    title: string;
+    status: string;
+}
+
+interface GroupData {
+    count: number;
+    records: Post[];
+}
+
+interface ApiResponse {
+    data: {
+        groupedData: Record<string, GroupData>;
+    };
+}
+
+export const KanbanBoard = ({ groupByFieldName, groupedView, kanbanViewData, maxSwimLanesCount, solidKanbanViewMetaData, setKanbanViewData, handleLoadMore, onDragEnd, handleSwimLanePagination, setLightboxUrls, setOpenLightbox, editButtonUrl }: any) => {
+    const [loading, setLoading] = useState<boolean>(true);
+    // State to manage the folded status of each column
+    const [foldedStates, setFoldedStates] = useState<Record<string, boolean>>({});
+
+    // Fetch data from the API
+    // useEffect(() => {
+    //     const fetchData = async (): Promise<void> => {
+    //         try {
+    //             setLoading(true);
+    //             // const response = await axios.get<ApiResponse>(
+    //             //     "http://localhost:3000/api/blog/group-kanban/status",
+    //             //     {
+    //             //         headers: { accept: "*/*" },
+    //             //     }
+    //             // );
+    //             // setGroupedData(response.data.data.groupedData);
+    //             setGroupedData({});
+    //         } catch (error) {
+    //             console.error("Error fetching data:", error);
+    //         } finally {
+    //             setLoading(false);
+    //         }
+    //     };
+
+    //     fetchData();
+    // }, []);
+
+    // if (loading) {
+    //     return <div>Loading...</div>;
+    // }
+
+
+
+
+    // Toggle fold (not yet implemented)
+    const toggleFold = (status: string): void => {
+        setFoldedStates((prevFoldedStates) => ({
+            ...prevFoldedStates,
+            [status]: !prevFoldedStates[status],
+        }));
+    };
+
+    // Render the Kanban board
+    return (
+        //@ts-ignore
+        <div className="solid-kanban-board-wrapper">
+            <DragDropContext onDragEnd={onDragEnd}>
+                <div className="flex gap-4 px-4 md:px-5 py-3 md:py-4 solid-kanban-board-scroll-context">
+                    {/* {Object.entries(kanbanViewData).map(([groupVal, data]) => {
+                    const group = {
+                        label: groupVal,
+                        count: data.count,
+                        folded: foldedStates[groupVal] || false,
+                    };
+
+                    return (
+                        <KanbanColumn
+                            key={groupVal}
+                            groupByField={groupVal}
+                            group={group}
+                            groupData={data.records}
+                            toggleFold={toggleFold}
+                            handleLoadMore={handleLoadMore}
+                        />
+                    );
+                })} */}
+                    {kanbanViewData.map((data) => {
+                        // Find the displayName for the groupName from solidKanbanViewMetaData.solidFieldsMetadata
+                        let label = data.groupName;
+                        const fieldMeta = solidKanbanViewMetaData?.solidFieldsMetadata?.[groupByFieldName];
+                        if (
+                            fieldMeta &&
+                            fieldMeta.type === "selectionStatic" &&
+                            Array.isArray(fieldMeta.selectionStaticValues)
+                        ) {
+                            const match = fieldMeta.selectionStaticValues.find(
+                                (v: string) => {
+                                    const [value, displayName] = v.split(":");
+                                    return value === data.groupName;
+                                }
+                            );
+                            if (match) {
+                                label = match.split(":")[1];
+                            }
+                        }
+
+                        const group = {
+                            label,
+                            count: data.groupData.meta.totalRecords,
+                            limit: data.groupData.meta.perPage,
+                            currentPage: data.groupData.meta.currentPage,
+                            folded: foldedStates[data.groupName] || false,
+                        };
+
+                        return (
+                            <KanbanColumn
+                                key={data.groupName}
+                                groupedView={groupedView}
+                                groupByField={data.groupName}
+                                group={group}
+                                solidKanbanViewMetaData={solidKanbanViewMetaData}
+                                groupData={data.groupData.records}
+                                toggleFold={toggleFold}
+                                handleLoadMore={handleLoadMore}
+                                setLightboxUrls={setLightboxUrls}
+                                setOpenLightbox={setOpenLightbox}
+                                editButtonUrl={editButtonUrl}
+                            />
+                        );
+                    })}
+                    {groupedView !== false && kanbanViewData.length < maxSwimLanesCount &&
+                        <div>
+                            <a size="small" className="kaban-swimlane-load-more" style={{ textWrap: 'nowrap' }} text onClick={handleSwimLanePagination}>Load More...({maxSwimLanesCount - kanbanViewData.length})</a>
+                        </div>
+                    }
+                </div>
+            </DragDropContext>
+        </div>
+    );
+}
+
+export default KanbanBoard;

package/dist/components/core/kanban/KanbanCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KanbanCard.d.ts","sourceRoot":"","sources":["../../../../src/components/core/kanban/KanbanCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAQtC,UAAU,IAAI;IACZ,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,eAAe;IACvB,IAAI,EAAE,IAAI,CAAC;IACX,uBAAuB,EAAE,GAAG,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;CACf;AA2BD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAqOzC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"KanbanCard.d.ts","sourceRoot":"./","sources":["components/core/kanban/KanbanCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAQtC,UAAU,IAAI;IACZ,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,eAAe;IACvB,IAAI,EAAE,IAAI,CAAC;IACX,uBAAuB,EAAE,GAAG,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;CACf;AA2BD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAqOzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/core/kanban/KanbanCard.js

@@ -1,16 +1,5 @@
 // @ts-nocheck
 '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);
-};
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 import { SolidKanbanViewFields } from "./SolidKanbanViewFields";
@@ -19,18 +8,18 @@ import { Button } from "primereact/button";
 import { OverlayPanel } from "primereact/overlaypanel";
 import { Draggable } from "@hello-pangea/dnd";
 // Render columns dynamically based on metadata
-var renderFieldsDynamically = function (field, data, solidKanbanViewMetaData, setLightboxUrls, setOpenLightbox, groupedView) {
+const renderFieldsDynamically = (field, data, solidKanbanViewMetaData, setLightboxUrls, setOpenLightbox, groupedView) => {
     if (!solidKanbanViewMetaData) {
         return;
     }
-    var solidView = solidKanbanViewMetaData.solidView;
-    var solidFieldsMetadata = solidKanbanViewMetaData.solidFieldsMetadata;
+    const solidView = solidKanbanViewMetaData.solidView;
+    const solidFieldsMetadata = solidKanbanViewMetaData.solidFieldsMetadata;
     if (!solidView || !solidFieldsMetadata) {
         return;
     }
-    var fieldMetadata = solidFieldsMetadata[field.attrs.name];
-    var fieldLayout = field;
-    return SolidKanbanViewFields({ solidKanbanViewMetaData: solidKanbanViewMetaData, fieldMetadata: fieldMetadata, fieldLayout: fieldLayout, data: data, setLightboxUrls: setLightboxUrls, setOpenLightbox: setOpenLightbox, groupedView: groupedView });
+    const fieldMetadata = solidFieldsMetadata[field.attrs.name];
+    const fieldLayout = field;
+    return SolidKanbanViewFields({ solidKanbanViewMetaData, fieldMetadata, fieldLayout, data, setLightboxUrls, setOpenLightbox, groupedView });
     // return solidView.layout.children?.map((column: any) => {
     //   const fieldMetadata = solidFieldsMetadata[column.attrs.name];
     //   if (!fieldMetadata) {
@@ -39,14 +28,12 @@ var renderFieldsDynamically = function (field, data, solidKanbanViewMetaData, se
     //   return SolidKanbanViewFields({ solidKanbanViewMetaData, fieldMetadata, column });
     // });
 };
-var KanbanCard = function (_a) {
-    var data = _a.data, solidKanbanViewMetaData = _a.solidKanbanViewMetaData, index = _a.index, setLightboxUrls = _a.setLightboxUrls, setOpenLightbox = _a.setOpenLightbox, editButtonUrl = _a.editButtonUrl, groupedView = _a.groupedView;
-    var router = useRouter();
-    var pathname = usePathname();
-    var searchParams = useSearchParams();
-    var SolidRow = function (_a) {
-        var children = _a.children, attrs = _a.attrs;
-        var className = attrs.className;
+const KanbanCard = ({ data, solidKanbanViewMetaData, index, setLightboxUrls, setOpenLightbox, editButtonUrl, groupedView }) => {
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const SolidRow = ({ children, attrs }) => {
+        const className = attrs.className;
         return (
         // <div className={`row ${className}`}>
         //   <div className="s_group">
@@ -56,11 +43,10 @@ var KanbanCard = function (_a) {
         //     </div>
         //   </div>
         // </div>
-        _jsxs(_Fragment, { children: [attrs.label && _jsx("p", { className: "", children: attrs.label }), _jsx("div", { className: "row ".concat(className), children: children })] }));
+        _jsxs(_Fragment, { children: [attrs.label && _jsx("p", { className: "", children: attrs.label }), _jsx("div", { className: `row ${className}`, children: children })] }));
     };
-    var SolidColumn = function (_a) {
-        var children = _a.children, attrs = _a.attrs;
-        var className = attrs.className;
+    const SolidColumn = ({ children, attrs }) => {
+        const className = attrs.className;
         return (
         // <div className={`${className}`}>
         //   <div className="s_group">
@@ -70,11 +56,10 @@ var KanbanCard = function (_a) {
         //     </div>
         //   </div>
         // </div>
-        _jsxs("div", { className: "".concat(className), children: [attrs.label && _jsx("p", { className: "", children: attrs.label }), children] }));
+        _jsxs("div", { className: `${className}`, children: [attrs.label && _jsx("p", { className: "", children: attrs.label }), children] }));
     };
-    var SolidImage = function (_a) {
-        var children = _a.children, attrs = _a.attrs;
-        var className = attrs.className;
+    const SolidImage = ({ children, attrs }) => {
+        const className = attrs.className;
         return (
         // <div className={`${className}`}>
         //   <div className="s_group">
@@ -84,10 +69,9 @@ var KanbanCard = function (_a) {
         //     </div>
         //   </div>
         // </div>
-        _jsxs("div", { className: "".concat(className), children: [attrs.label && _jsx("p", { className: "", children: attrs.label }), children] }));
+        _jsxs("div", { className: `${className}`, children: [attrs.label && _jsx("p", { className: "", children: attrs.label }), children] }));
     };
-    var SolidField = function (_a) {
-        var field = _a.field, data = _a.data, solidKanbanViewMetaData = _a.solidKanbanViewMetaData;
+    const SolidField = ({ field, data, solidKanbanViewMetaData }) => {
         return renderFieldsDynamically(field, data, solidKanbanViewMetaData, setLightboxUrls, setOpenLightbox, groupedView);
         // switch (solidKanbanViewMetaData[field.attrs.name].type) {
         //   case "mediaSingle":
@@ -96,85 +80,82 @@ var KanbanCard = function (_a) {
         //     return <p>{initialEntityData[field.attrs.name]}</p>
         // }
     };
-    var SolidCard = function (_a) {
-        var children = _a.children;
-        return (_jsx("div", { className: "p-fluid p-grid", children: children }));
-    };
+    const SolidCard = ({ children }) => (_jsx("div", { className: "p-fluid p-grid", children: children }));
     // Now render the form dynamically...
-    var renderFormElementDynamically = function (element, solidKanbanViewMetaData) {
-        var type = element.type, attrs = element.attrs, body = element.body, children = element.children;
+    const renderFormElementDynamically = (element, solidKanbanViewMetaData) => {
+        let { type, attrs, body, children } = element;
         // const key = attrs?.name ?? generateRandomKey();
-        var key = attrs === null || attrs === void 0 ? void 0 : attrs.name;
+        const key = attrs?.name;
         switch (type) {
             case "div":
                 if (!children)
                     children = [];
-                return _jsx("div", __assign({}, attrs, { children: children.map(function (element) { return renderFormElementDynamically(element, solidFormViewMetaData, formik); }) }), key);
+                return _jsx("div", { ...attrs, children: children.map((element) => renderFormElementDynamically(element, solidFormViewMetaData, formik)) }, key);
             case "span":
-                return _jsx("span", __assign({}, attrs, { children: body }), key);
+                return _jsx("span", { ...attrs, children: body }, key);
             case "p":
-                return _jsx("p", __assign({ className: attrs === null || attrs === void 0 ? void 0 : attrs.className }, attrs, { children: body }), key);
+                return _jsx("p", { className: attrs?.className, ...attrs, children: body }, key);
             case "h1":
-                return _jsx("h1", __assign({}, attrs, { children: body }), key);
+                return _jsx("h1", { ...attrs, children: body }, key);
             case "h2":
-                return _jsx("h2", __assign({}, attrs, { children: body }), key);
+                return _jsx("h2", { ...attrs, children: body }, key);
             case "ul":
                 if (!children)
                     children = [];
-                return _jsx("ul", __assign({}, attrs, { children: children.map(function (element) { return renderFormElementDynamically(element, solidFormViewMetaData, formik); }) }), key);
+                return _jsx("ul", { ...attrs, children: children.map((element) => renderFormElementDynamically(element, solidFormViewMetaData, formik)) }, key);
             case "li":
-                return _jsx("li", __assign({}, attrs, { children: body }), key);
+                return _jsx("li", { ...attrs, children: body }, key);
             case "card":
-                return _jsx(SolidCard, { children: children.map(function (element) { return renderFormElementDynamically(element, solidKanbanViewMetaData); }) }, key);
+                return _jsx(SolidCard, { children: children.map((element) => renderFormElementDynamically(element, solidKanbanViewMetaData)) }, key);
             case "row":
-                return _jsx(SolidRow, { attrs: attrs, children: children.map(function (element) { return renderFormElementDynamically(element, solidKanbanViewMetaData); }) }, key);
+                return _jsx(SolidRow, { attrs: attrs, children: children.map((element) => renderFormElementDynamically(element, solidKanbanViewMetaData)) }, key);
             case "column":
-                return _jsx(SolidColumn, { attrs: attrs, children: children.map(function (element) { return renderFormElementDynamically(element, solidKanbanViewMetaData); }) }, key);
+                return _jsx(SolidColumn, { attrs: attrs, children: children.map((element) => renderFormElementDynamically(element, solidKanbanViewMetaData)) }, key);
             case "image":
-                return _jsx(SolidImage, { attrs: attrs, children: children.map(function (element) { return renderFormElementDynamically(element, solidKanbanViewMetaData); }) }, key);
+                return _jsx(SolidImage, { attrs: attrs, children: children.map((element) => renderFormElementDynamically(element, solidKanbanViewMetaData)) }, key);
             case "field": {
                 // const fieldMetadata = solidFieldsMetadata[attrs.name];
-                var fieldMetadata = solidKanbanViewMetaData.solidFieldsMetadata[attrs.name];
+                const fieldMetadata = solidKanbanViewMetaData.solidFieldsMetadata[attrs.name];
                 return _jsx(SolidField, { field: element, fieldMetadata: fieldMetadata, data: data ? data : null, solidKanbanViewMetaData: solidKanbanViewMetaData }, key);
             }
             default:
                 return null;
         }
     };
-    var renderFormDynamically = function (solidKanbanViewMetaData) {
+    const renderFormDynamically = (solidKanbanViewMetaData) => {
         if (!solidKanbanViewMetaData) {
             return;
         }
-        var solidView = solidKanbanViewMetaData.solidView;
-        var solidFieldsMetadata = solidKanbanViewMetaData.solidFieldsMetadata;
+        const solidView = solidKanbanViewMetaData.solidView;
+        const solidFieldsMetadata = solidKanbanViewMetaData.solidFieldsMetadata;
         if (!solidView || !solidFieldsMetadata) {
             return;
         }
         if (!solidView || !solidFieldsMetadata) {
             return;
         }
-        var updatedLayout = solidView.layout.children;
-        var dynamicForm = updatedLayout.map(function (element) { return renderFormElementDynamically(element, solidKanbanViewMetaData); });
+        const updatedLayout = solidView.layout.children;
+        const dynamicForm = updatedLayout.map((element) => renderFormElementDynamically(element, solidKanbanViewMetaData));
         return dynamicForm;
     };
-    var kanbanActionRef = useRef(null);
-    var renderKanbanAction = function (data, groupedView) {
-        return (_jsxs("div", { className: "solid-kanban-action", onClick: function (e) { return e.stopPropagation(); }, children: [_jsx(Button, { size: "small", text: true, className: "text-sm p-0", icon: "pi pi-ellipsis-v", onClick: function (e) { return kanbanActionRef.current.toggle(e); }, style: { width: 25, height: 25 } }), _jsx(OverlayPanel, { ref: kanbanActionRef, className: "solid-custom-overlay", children: _jsxs("div", { className: "flex flex-column", children: [_jsx(Button, { type: "button", className: "w-8rem text-left gap-1", label: "Edit", size: "small", iconPos: "left", text: true, icon: "pi pi-pencil", onClick: function () { return router.push("".concat(editButtonUrl, "/").concat(data === null || data === void 0 ? void 0 : data.id)); } }), !groupedView &&
-                                _jsx("a", { href: data === null || data === void 0 ? void 0 : data.relativeUri, download: data === null || data === void 0 ? void 0 : data.originalFileName, target: "_blank", rel: "noopener noreferrer", children: _jsx(Button, { type: "button", className: "w-8rem text-left gap-1", label: "Download", size: "small", iconPos: "left", icon: "pi pi-download" }) })] }) })] }));
+    const kanbanActionRef = useRef(null);
+    const renderKanbanAction = (data, groupedView) => {
+        return (_jsxs("div", { className: "solid-kanban-action", onClick: (e) => e.stopPropagation(), children: [_jsx(Button, { size: "small", text: true, className: "text-sm p-0", icon: "pi pi-ellipsis-v", onClick: (e) => kanbanActionRef.current.toggle(e), style: { width: 25, height: 25 } }), _jsx(OverlayPanel, { ref: kanbanActionRef, className: "solid-custom-overlay", children: _jsxs("div", { className: "flex flex-column", children: [_jsx(Button, { type: "button", className: "w-8rem text-left gap-1", label: "Edit", size: "small", iconPos: "left", text: true, icon: "pi pi-pencil", onClick: () => router.push(`${editButtonUrl}/${data?.id}`) }), !groupedView &&
+                                _jsx("a", { href: data?.relativeUri, download: data?.originalFileName, target: "_blank", rel: "noopener noreferrer", children: _jsx(Button, { type: "button", className: "w-8rem text-left gap-1", label: "Download", size: "small", iconPos: "left", icon: "pi pi-download" }) })] }) })] }));
     };
-    return (_jsx(Draggable, { draggableId: String(data.id), index: index, isDragDisabled: !groupedView, children: function (provided, snapshot) { return (_jsx("div", __assign({ className: "", ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: __assign({ marginTop: "1rem" }, provided.draggableProps.style), className: "kanban-card-container", children: _jsxs("div", { style: {
+    return (_jsx(Draggable, { draggableId: String(data.id), index: index, isDragDisabled: !groupedView, children: (provided, snapshot) => (_jsx("div", { className: "", ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, style: { marginTop: "1rem", ...provided.draggableProps.style }, className: "kanban-card-container", children: _jsxs("div", { style: {
                     opacity: snapshot.isDragging ? 0.9 : 1,
                     transform: snapshot.isDragging ? "rotate(-2deg)" : "",
                     cursor: 'pointer'
-                }, elevation: snapshot.isDragging ? 3 : 1, className: "".concat(!groupedView ? 'solid-media-card' : 'solid-kanban-card'), onClick: function () {
+                }, elevation: snapshot.isDragging ? 3 : 1, className: `${!groupedView ? 'solid-media-card' : 'solid-kanban-card'}`, onClick: () => {
                     if (typeof window !== "undefined") {
                         // const queryString = searchParams.toString();
                         // const finalUrl = queryString ? `${pathname}?${queryString}` : pathname;
                         // sessionStorage.setItem("fromView", finalUrl);
                         sessionStorage.setItem("fromView", "kanban");
                     }
-                    router.push("".concat(editButtonUrl, "/").concat(data === null || data === void 0 ? void 0 : data.id));
-                }, children: [renderKanbanAction(data, groupedView), renderFormDynamically(solidKanbanViewMetaData)] }) }))); } }));
+                    router.push(`${editButtonUrl}/${data?.id}`);
+                }, children: [renderKanbanAction(data, groupedView), renderFormDynamically(solidKanbanViewMetaData)] }) })) }));
 };
 export default KanbanCard;
 //# sourceMappingURL=KanbanCard.js.map