impaktapps-ui-builder 1.0.200 → 1.0.202

package/src/impaktapps-ui-builder/runtime/services/service.ts

@@ -66,7 +66,7 @@ export default (funcParams: funcParamsProps) => {
   let executeEventsParameters: handlersProps = {
     config: {}, componentName: "",
     store: funcParams.store, dynamicData: funcParams.dynamicData, userValue: funcParams.userValue, service: funcParams.service,
-    serviceHolder: { downloadFile, download: downloadFileFromUrl, ...funcParams.functionsProvider }, eventGroups,
+    serviceHolder: { downloadFile, downloadFileFromUrl: downloadFileFromUrl, ...funcParams.functionsProvider }, eventGroups,
     functionsProvider: funcParams.functionsProvider, formDataHolder
   };
   return {
@@ -80,7 +80,7 @@ export default (funcParams: funcParamsProps) => {
       const config = pageData?.config;
       const uiSchema = pageData?.uiSchema;
       const event = new CustomEvent('pageNameChanged', {
-        detail: { pageName: config.label, hasBackIcon: config.hasBackIcon === "NO" ? false : true }
+        detail: { pageName: config.label, pageIconUrl: config.pageIconUrl, hasBackIcon: config.hasBackIcon === "NO" ? false : true }
       });
       window.dispatchEvent(event)
       const theme = funcParams?.store?.theme?.myTheme;
@@ -101,6 +101,7 @@ export default (funcParams: funcParamsProps) => {
           }
         }
       )
+
       executeRefreshHandler({
         config: {}, componentName: "",
         store: funcParams.store, dynamicData: funcParams.dynamicData, userValue: funcParams.userValue, service: funcParams.service,
@@ -111,6 +112,24 @@ export default (funcParams: funcParamsProps) => {
         funcParams.store.setUiSchema(uiSchema);
       });
     },
+    getStyle: () => {
+      const cloneEventGroup = _.cloneDeep(eventGroups)
+      if (cloneEventGroup.setStyle) {
+        let finalResponse = {};
+        const path = funcParams.dynamicData?.tableButtonPath || funcParams?.dynamicData.path?.split(".").pop();
+        if (cloneEventGroup?.setStyle?.[path]) {
+          for (const eventConfig of cloneEventGroup?.setStyle?.[path]) {
+            finalResponse = executeEvents({
+              ...executeEventsParameters,
+              config: eventConfig,
+              componentName: path
+            })
+          }
+          return finalResponse
+        }
+      }
+      return {}
+    },
     onCellRenderer: (cellParams) => {
       const cloneEventGroup = _.cloneDeep(eventGroups)
       if (cloneEventGroup.onCellRenderer) {
@@ -139,6 +158,9 @@ export default (funcParams: funcParamsProps) => {
     onFileDelete: async function () {
       this.callHandler("onFileDelete")
     },
+    onClose: function () {
+      this.callHandler("onClose")
+    },
     onMount: function () {
       this.callHandler("onMount")
     },
@@ -168,11 +190,19 @@ export default (funcParams: funcParamsProps) => {
         { key: "sorting", value: paginationValues.sorting || [] },
         { key: "filters", value: paginationValues.tableColumnConfig || [] },
         { key: "globalFilter", value: paginationValues.globalFilter ?? '' },
-        { key: "expandedRowIds", value: paginationValues.expandedRowIds ?? [] }
+        { key: "parentIds", value: paginationValues.parentIds},
+        { key: "isExpandAll", value: paginationValues.isExpandAll},
       ]
       const response = await this.callExecuteEvents(paginationValues, apiBody, "onLoad");
       return response?.data;
     },
+    onNodeExpandChange: async function (param) {
+      const apiBody = [
+        { key: "expandedNodeId", value: param.expandedNodeId }
+      ]
+      const response = await this.callExecuteEvents(param, apiBody, "onNodeExpandChange");
+      return response?.data;
+    },
     getSelectOptions: async function (param) {
       if (param.serachValue !== "" && param.serachValue !== undefined) {
         const apiBody = [
@@ -190,8 +220,7 @@ export default (funcParams: funcParamsProps) => {
 
       const promises = ChangeEventsKeysArray.flatMap((componentName: string) => {
         if (
-          funcParams.store?.formData[componentName] === funcParams.store.newData[componentName] ||
-          funcParams.store?.newData[componentName] === undefined
+          funcParams.store?.formData[componentName] === funcParams.store.newData[componentName] 
         ) {
           return [];
         }

package/dist/src/impaktapps-ui-builder/builder/build/buildDataCard.d.ts

@@ -1 +0,0 @@
-export declare const buildDataCard: (config: any, componentScope: any, store: any) => any;

package/dist/src/impaktapps-ui-builder/builder/build/uischema/dataCard.d.ts

@@ -1,320 +0,0 @@
-export default function DataCard(theme: any): {
-    type: string;
-    config: {
-        main: {};
-        style: {
-            wrapperStyle: {
-                position: string;
-                top: string;
-                transform: string;
-                marginBottom: number;
-                borderRadius: string;
-            };
-            componentsBoxStyle: {
-                boxShadow: string;
-                flexDirection: string;
-                overflow: string;
-                flexWrap: string;
-                width: string;
-                background: string;
-                border: string;
-                borderRadius: string;
-                padding: string;
-                height: string;
-                minHeight: string;
-                position: string;
-                marginLeft: string;
-                transition: string;
-                "&:hover": {
-                    transform: string;
-                    boxShadow: string;
-                };
-            };
-        };
-        layout: {
-            xs: number;
-            sm: number;
-            md: number;
-            lg: number;
-        };
-    };
-    elements: ({
-        type: string;
-        scope: string;
-        config: {
-            main: {
-                url: string;
-                heading?: undefined;
-                spacing?: undefined;
-                rowSpacing?: undefined;
-                columnSpacing?: undefined;
-                gap?: undefined;
-            };
-            style: {
-                containerStyle: {
-                    position: string;
-                    top: string;
-                    right: string;
-                    display: string;
-                    justifyContent: string;
-                    alignItems: string;
-                    background: string;
-                    borderRadius: string;
-                    width: string;
-                    height: string;
-                    padding: string;
-                };
-                imageStyle: {
-                    width: string;
-                    height: string;
-                    padding: string;
-                    margin: string;
-                    opacity: number;
-                };
-                color?: undefined;
-                justifyContent?: undefined;
-                background?: undefined;
-                margin?: undefined;
-                marginBottom?: undefined;
-                paddingRight?: undefined;
-                whiteSpace?: undefined;
-                wordWrap?: undefined;
-                overflowWrap?: undefined;
-                fontStyle?: undefined;
-                fontSize?: undefined;
-                fontWeight?: undefined;
-                letterSpacing?: undefined;
-                textTransform?: undefined;
-                fontFamily?: undefined;
-                maxWidth?: undefined;
-                lineHeight?: undefined;
-                height?: undefined;
-                display?: undefined;
-                width?: undefined;
-                opacity?: undefined;
-                componentsBoxStyle?: undefined;
-            };
-            layout?: undefined;
-        };
-        options: {
-            widget: string;
-        };
-        elements?: undefined;
-    } | {
-        type: string;
-        scope: string;
-        config: {
-            main: {
-                heading: string;
-                url?: undefined;
-                spacing?: undefined;
-                rowSpacing?: undefined;
-                columnSpacing?: undefined;
-                gap?: undefined;
-            };
-            style: {
-                color: string;
-                justifyContent: string;
-                background: string;
-                margin: string;
-                marginBottom: string;
-                paddingRight: string;
-                whiteSpace: string;
-                wordWrap: string;
-                overflowWrap: string;
-                fontStyle: string;
-                fontSize: string;
-                fontWeight: string;
-                letterSpacing: string;
-                textTransform: string;
-                fontFamily: string;
-                maxWidth: string;
-                lineHeight: string;
-                height: string;
-                containerStyle?: undefined;
-                imageStyle?: undefined;
-                display?: undefined;
-                width?: undefined;
-                opacity?: undefined;
-                componentsBoxStyle?: undefined;
-            };
-            layout?: undefined;
-        };
-        options: {
-            widget: string;
-        };
-        elements?: undefined;
-    } | {
-        type: string;
-        scope: string;
-        config: {
-            main: {
-                heading: string;
-                url?: undefined;
-                spacing?: undefined;
-                rowSpacing?: undefined;
-                columnSpacing?: undefined;
-                gap?: undefined;
-            };
-            style: {
-                color: string;
-                display: string;
-                fontSize: {
-                    xs: string;
-                    md: string;
-                };
-                fontWeight: string;
-                background: string;
-                justifyContent: string;
-                width: string;
-                margin: string;
-                marginBottom: string;
-                lineHeight: string;
-                maxWidth: string;
-                whiteSpace: string;
-                opacity: number;
-                containerStyle?: undefined;
-                imageStyle?: undefined;
-                paddingRight?: undefined;
-                wordWrap?: undefined;
-                overflowWrap?: undefined;
-                fontStyle?: undefined;
-                letterSpacing?: undefined;
-                textTransform?: undefined;
-                fontFamily?: undefined;
-                height?: undefined;
-                componentsBoxStyle?: undefined;
-            };
-            layout?: undefined;
-        };
-        options: {
-            widget: string;
-        };
-        elements?: undefined;
-    } | {
-        type: string;
-        config: {
-            main: {
-                spacing: number;
-                rowSpacing: number;
-                columnSpacing: number;
-                gap: number;
-                url?: undefined;
-                heading?: undefined;
-            };
-            style: {
-                componentsBoxStyle: {
-                    display: string;
-                    flexDirection: string;
-                    alignItems: string;
-                    justifyContent: string;
-                    background: string;
-                    borderRadius: string;
-                    padding: string;
-                    width: string;
-                    whiteSpace: string;
-                    gap: string;
-                    margin: string;
-                    paddingLeft: string;
-                    paddingRight: string;
-                };
-                containerStyle?: undefined;
-                imageStyle?: undefined;
-                color?: undefined;
-                justifyContent?: undefined;
-                background?: undefined;
-                margin?: undefined;
-                marginBottom?: undefined;
-                paddingRight?: undefined;
-                whiteSpace?: undefined;
-                wordWrap?: undefined;
-                overflowWrap?: undefined;
-                fontStyle?: undefined;
-                fontSize?: undefined;
-                fontWeight?: undefined;
-                letterSpacing?: undefined;
-                textTransform?: undefined;
-                fontFamily?: undefined;
-                maxWidth?: undefined;
-                lineHeight?: undefined;
-                height?: undefined;
-                display?: undefined;
-                width?: undefined;
-                opacity?: undefined;
-            };
-            layout: {
-                xs: string;
-            };
-        };
-        elements: ({
-            type: string;
-            scope: string;
-            config: {
-                main: {
-                    url: string;
-                    heading?: undefined;
-                };
-                style: {
-                    containerStyle: {
-                        display: string;
-                        alignItems: string;
-                        justifyContent: string;
-                        margin: string;
-                        padding: string;
-                    };
-                    imageStyle: {
-                        width: string;
-                        height: string;
-                        filter: string;
-                        display: string;
-                    };
-                    color?: undefined;
-                    fontSize?: undefined;
-                    fontWeight?: undefined;
-                    background?: undefined;
-                    margin?: undefined;
-                    padding?: undefined;
-                    lineHeight?: undefined;
-                    display?: undefined;
-                    alignItems?: undefined;
-                };
-                layout: {
-                    xs: string;
-                };
-            };
-            options: {
-                widget: string;
-            };
-        } | {
-            type: string;
-            scope: string;
-            config: {
-                main: {
-                    heading: string;
-                    url?: undefined;
-                };
-                style: {
-                    color: string;
-                    fontSize: string;
-                    fontWeight: string;
-                    background: string;
-                    margin: string;
-                    padding: string;
-                    lineHeight: string;
-                    display: string;
-                    alignItems: string;
-                    containerStyle?: undefined;
-                    imageStyle?: undefined;
-                };
-                layout: {
-                    xs: string;
-                };
-            };
-            options: {
-                widget: string;
-            };
-        })[];
-        scope?: undefined;
-        options?: undefined;
-    })[];
-};

package/src/impaktapps-ui-builder/builder/build/buildDataCard.tsx

@@ -1,44 +0,0 @@
-import DataCard from "./uischema/dataCard";
-import _ from "lodash";
-import { createLayoutFormat } from "./buildConfig";
-
-export const buildDataCard = (config,componentScope,store) =>{
-    const card: any = _.cloneDeep(DataCard(store.theme.myTheme));
-     if (config.style) {
-    const parsedStyle = JSON.parse(config.style);
-    card.config.wrapperStyle = parsedStyle;
-
-    card.elements[1].config.style = {...card.elements[1].config.style,...(parsedStyle.labelStyle ?? {}),};
-    card.elements[3].config.style.componentsBoxStyle = {...card.elements[3].config.style.componentsBoxStyle,...(parsedStyle.descriptionBoxStyle ?? {})};
-    card.elements[2].config.style = {...card.elements[2].config.style,...(parsedStyle.valueStyle ?? {})};
-    card.config.componentsBoxStyle = {...card.config.componentsBoxStyle,...(parsedStyle.componentsBoxStyle ?? {})};
-    card.elements[0].config.style.containerStyle = {...card.elements[0].config.style.containerStyle,...(parsedStyle.imageContainerStyle ?? {})};
-  }
-    card.elements[2].scope = `#/properties/${config.name}/properties/value`;
-    card.elements[0].scope = `#/properties/${config.name}/properties/url`;
-    card.elements[3].elements[1].scope = `#/properties/${config.name}/properties/description`;
-    card.elements[1].scope = `#/properties/${config.name}/properties/label`;
-    card.elements[3].elements[0].scope = `#/properties/${config.name}/properties/trendIconUrl`;
-    if(config.layout){
-      card.config.layout = createLayoutFormat(config.layout)
-    }
-    if(config.label){
-      card.elements[1].config.main.heading = config.label;
-    }
-    if(config.url){
-      card.elements[0].config.main.url = config.url;
-    }
-    if(config.description){
-      card.elements[3].elements[1].config.main.heading = config.description;
-    }
-    if(config.value){
-      card.elements[2].config.main.heading = config.value;
-    }
-    if (config.trendIconUrl) {
-    card.elements[3].elements[0].config.main.url = config.trendIconUrl;
-  }
-
-    return card;
-}
-
-

package/src/impaktapps-ui-builder/builder/build/uischema/dataCard.ts

@@ -1,207 +0,0 @@
-export default function DataCard(theme) {
-    const uiSchema = {
-        type: "WrapperLayout",
-        config: {
-            main: {},
-            style: {
-                wrapperStyle: {
-                    position: "relative",
-                    top: "50%",
-                    transform: "translateY(-50%)",
-                    marginBottom: 0,
-                    borderRadius: "8px",
-                },
-                componentsBoxStyle: {
-                    boxShadow: "0px 2px 6px rgba(0, 0, 0, 0.06)",
-                    flexDirection: "column",
-                    overflow: "hidden",
-                    flexWrap: "nowrap",
-                    width: "90% !important",
-                    background: "#F9FAFB",
-                    border: "2px solid #E5E7EB",
-                    borderRadius: "16px",
-                    padding: "24px 20px 20px 24px",
-                    height: "100%",
-                    minHeight: "140px",
-                    position: "relative",
-                    marginLeft: "0px",
-                    transition: "all 0.3s ease",
-                    "&:hover": {
-                        transform: "translateY(-6px)",
-                        boxShadow: "0px 8px 16px rgba(0, 0, 0, 0.08)",
-                    },
-                },
-            },
-            layout: { xs: 12, sm: 12, md: 6, lg: 3 },
-        },
-
-        elements: [
-            {
-                type: "Control",
-                scope: "#/properties/programType",
-                config: {
-                    main: {
-                        url: "https://unpkg.com/heroicons@2.0.18/24/outline/information-circle.svg",
-                    },
-                    style: {
-                        containerStyle: {
-                            position: "absolute",
-                            top: "20px",
-                            right: "20px",
-                            display: "flex",
-                            justifyContent: "center",
-                            alignItems: "center",
-                            background: "#F3F4F6",
-                            borderRadius: "20%",
-                            width: "48px",
-                            height: "48px",
-                            padding: "12px",
-                        },
-                        imageStyle: {
-                            width: "24px",
-                            height: "24px",
-                            padding: "0px",
-                            margin: "0px",
-                            opacity: 0.7,
-                        },
-                    },
-                },
-                options: { widget: "Image" },
-            },
-            {
-                type: "Control",
-                scope: "#/properties/programType",
-                config: {
-                    main: {
-                        heading: "METRIC",
-                    },
-                    style: {
-                        color: "#9CA3AF",
-                        justifyContent: "flex-start",
-                        background: "inherit",
-                        margin: "0px",
-                        marginBottom: "16px",
-                        paddingRight: "60px",
-
-                        whiteSpace: "normal",
-                        wordWrap: "break-word",
-                        overflowWrap: "break-word",
-
-                        fontStyle: "normal",
-                        fontSize: "12px",
-                        fontWeight: "600",
-                        letterSpacing: "0.3px",
-                        textTransform: "uppercase",
-                        fontFamily: "Arial",
-
-                        maxWidth: "24%",
-                        lineHeight: "1.2",
-                        height: "20px",
-                    },
-                },
-                options: { widget: "Box" },
-            },
-            {
-                type: "Control",
-                scope: "#/properties/programType",
-                config: {
-                    main: {
-                        heading: "--",
-                    },
-                    style: {
-                        color: "#111827",
-                        display: "flex",
-                        fontSize: { xs: "36px", md: "42px" },
-                        fontWeight: "700",
-                        background: "inherit",
-                        justifyContent: "flex-start",
-                        width: "100%",
-                        margin: "0px",
-                        marginBottom: "16px",
-                        lineHeight: "1",
-                        maxWidth: "200px",
-                        whiteSpace: "nowrap",
-                        opacity: 0.85,
-                    },
-                },
-                options: { widget: "Box" },
-            },
-            {
-                type: "WrapperLayout",
-                config: {
-                    main: { spacing: 0, rowSpacing: 0, columnSpacing: 0, gap: 0 },
-                    style: {
-                        componentsBoxStyle: {
-                            display: "flex",
-                            flexDirection: "row",
-                            alignItems: "center",
-                            justifyContent: "flex-start",
-                            background: "#E5E7EB",
-                            borderRadius: "999px",
-                            padding: "6px 14px",
-                            width: "fit-content",
-                            whiteSpace: "nowrap",
-                            gap: "6px",
-                            margin: "0px",
-                            paddingLeft: "20px",
-                            paddingRight: "20px",
-                        },
-                    },
-                    layout: { xs: "auto" },
-                },
-
-                elements: [
-                    {
-                        type: "Control",
-                        scope: "#/properties/programType",
-                        config: {
-                            main: {
-                                url: "https://unpkg.com/heroicons@2.0.18/24/outline/arrow-right.svg",
-                            },
-                            style: {
-                                containerStyle: {
-                                    display: "flex",
-                                    alignItems: "center",
-                                    justifyContent: "center",
-                                    margin: "0px",
-                                    padding: "0px",
-                                },
-                                imageStyle: {
-                                    width: "14px",
-                                    height: "14px",
-                                    filter: "brightness(0) invert(0.5)",
-                                    display: "block",
-                                },
-                            },
-                            layout: { xs: "auto" },
-                        },
-                        options: { widget: "Image" },
-                    },
-                    {
-                        type: "Control",
-                        scope: "#/properties/programType",
-                        config: {
-                            main: {
-                                heading: "—",
-                            },
-                            style: {
-                                color: "#6B7280",
-                                fontSize: "12px",
-                                fontWeight: "550",
-                                background: "transparent",
-                                margin: "0px",
-                                padding: "0px",
-                                lineHeight: "1",
-                                display: "flex",
-                                alignItems: "center",
-                            },
-                            layout: { xs: "auto" },
-                        },
-                        options: { widget: "Box" },
-                    },
-                ],
-            },
-        ],
-    };
-    return uiSchema
-}