procode-lowcode-core 1.0.13 → 1.0.14

package/dist/types/UIElement/UIElementDefinations/BaseScreenElement.d.ts

@@ -17,10 +17,17 @@ type ValidationProps = {
     screenDataField: string;
     executeMode: ExecuteMode;
 };
+export type EffectiveStyle = {
+    selector: string;
+    target: string;
+    important?: boolean;
+};
 export type Style = {
     id?: string;
     className?: string;
     inline?: React.CSSProperties;
+    important?: boolean;
+    effectiveStyles?: EffectiveStyle[];
 };
 export interface BaseScreenElement {
     id: number | string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "procode-lowcode-core",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "ProCode Core Library - React framework for low-code applications",
   "type": "module",
   "main": "dist/index.js",

package/src/Renderer/CellRenderer/index.tsx

@@ -32,6 +32,7 @@ const CellRenderer = ({
     <div
       id={widgetStyle?.id || ""}
       className={widgetStyle?.className || ""}
+      data-prc-col-important={widgetStyle?.important ? widgetStyle?.className || undefined : undefined}
       style={styles}
     >
       {children.map((element) => (

package/src/Renderer/ContainerRenderer/Container.tsx

@@ -16,6 +16,7 @@ export default function Container({
     <div
       id={widgetStyle?.id ?? ""}
       className={`${widgetStyle?.className ?? ""}`}
+      data-prc-col-important={widgetStyle?.important ? widgetStyle?.className || undefined : undefined}
       style={{ ...(widgetStyle?.inline ?? {}) }}
     >
       {children.map((element) => (

package/src/Renderer/DrawerRenderer/Drawer.tsx

@@ -19,6 +19,7 @@ const Drawer = ({
     <div
       id={widgetStyle?.id ?? ""}
       className={`prc-drawer ${widgetStyle?.className ?? ""}`}
+      data-prc-col-important={widgetStyle?.important ? widgetStyle?.className || undefined : undefined}
       style={{ ...(widgetStyle?.inline ?? {}) }}
     >
       {children?.map((element: ScreenElement) => (

package/src/Renderer/DrawerRenderer/index.tsx

@@ -7,6 +7,7 @@ const DrawerRenderer = (props: DrawerElement) => {
       id={props.overlay.widgetStyle?.id ?? ""}
       style={{ ...(props.overlay.widgetStyle?.inline ?? {}) }}
       className={`prc-drawer-shield ${props.overlay.widgetStyle?.className ?? ""}`}
+      data-prc-col-important={props.overlay.widgetStyle?.important ? props.overlay.widgetStyle?.className || undefined : undefined}
     >
       <Drawer {...props} />
     </div>

package/src/Renderer/FormRenderer/index.tsx

@@ -23,6 +23,7 @@ const FormRenderer = ({
         e.preventDefault();
       }}
       className={widgetStyle?.className || ""}
+      data-prc-col-important={widgetStyle?.important ? widgetStyle?.className || undefined : undefined}
       id={widgetStyle?.id || ""}
       style={{ ...(widgetStyle?.inline || {}) }}
     >

package/src/Renderer/LayoutRenderer/ColumnLayoutRenderer/index.tsx

@@ -18,6 +18,7 @@ const LayoutRenderer = ({
     <div
       id={widgetStyle?.id || ""}
       className={`${widgetStyle?.className || ""}`}
+      data-prc-col-important={widgetStyle?.important ? widgetStyle?.className || undefined : undefined}
       style={{
         ...(widgetStyle?.inline || {}),
         display: "grid",

package/src/Renderer/LayoutRenderer/GenericLayoutRenderer/index.tsx

@@ -18,6 +18,7 @@ const GenericLayoutRenderer = ({
     <div
       id={widgetStyle?.id || ""}
       className={`${widgetStyle?.className || ""}`}
+      data-prc-col-important={widgetStyle?.important ? widgetStyle?.className || undefined : undefined}
       style={{
         ...(widgetStyle?.inline || {}),
         display: "grid",

package/src/Renderer/WidgetRenderer/Widget.tsx

@@ -39,10 +39,23 @@ const Widget: React.FC<WidgetInjectorProps> = ({
     .getCustomWidgetProvider()
     ?.getWidgets();
 
-  const WidgetComponent =
-    customWidgets?.get?.(widgetProps.widgetType) ??
-    templateWidgets?.get?.(widgetProps.widgetType) ??
-    standardWidgets?.get?.(widgetProps.widgetType);
+  let WidgetComponent: React.FC<any> | undefined;
+
+  const targetFactory = widgetProps.targetWidgetFactory;
+  if (targetFactory === "CUSTOM") {
+    WidgetComponent = customWidgets?.get?.(widgetProps.widgetType);
+  } else if (targetFactory === "TEMPLATE") {
+    WidgetComponent = templateWidgets?.get?.(widgetProps.widgetType);
+  } else if (targetFactory === "DEFAULT") {
+    WidgetComponent = standardWidgets?.get?.(widgetProps.widgetType);
+  }
+
+  if (!WidgetComponent) {
+    WidgetComponent =
+      customWidgets?.get?.(widgetProps.widgetType) ??
+      templateWidgets?.get?.(widgetProps.widgetType) ??
+      standardWidgets?.get?.(widgetProps.widgetType);
+  }
 
   if (!WidgetComponent) {
     return (

package/src/Renderer/WidgetRenderer/useWidgetProps.ts

@@ -48,7 +48,6 @@ export const useWidgetProps = (
       validations: getValidationProperty(),
       eventService: eventService,
       viewModel: viewModel,
-      "sssss":"ss",
       ...events,
       dynamicEvents: events,
     });

package/src/UIElement/UIElementDefinations/BaseScreenElement.ts

@@ -17,10 +17,18 @@ type ValidationProps = {
   executeMode: ExecuteMode;
 };
 
+export type EffectiveStyle = {
+  selector: string;
+  target: string;
+  important?: boolean;
+};
+
 export type Style = {
   id?: string;
   className?: string;
   inline?: React.CSSProperties;
+  important?: boolean;
+  effectiveStyles?: EffectiveStyle[];
 };
 
 export interface BaseScreenElement {