impaktapps-ui-builder 0.0.382460 → 1.0.0

package/widgetLibrary/CheckBoxContainerNative/panelConfig.tsx

@@ -0,0 +1,179 @@
+import i18n from "@/i18n/config";
+import { PanelConfig } from "@/page/App/components/InspectPanel/interface";
+import { VALIDATION_TYPES } from "@/utils/validationFactory";
+import { generatorEventHandlerConfig } from "../PublicSector/utils/generatorEventHandlerConfig";
+import {  CHECK_BOX_NATIVE_GROUP_EVENT_HANDLER_CONFIG } from "./eventHandlerConfig";
+const baseWidgetName = "input";
+export const CHECKBOX_NATIVE_PANEL_CONFIG: PanelConfig[] = [
+  {
+    id: `${baseWidgetName}-label`,
+    groupName: i18n.t("editor.inspect.setter_group.label"),
+    children: [
+      {
+        id: `${baseWidgetName}-label-label`,
+        labelName: i18n.t("editor.inspect.setter_label.label"),
+        attrName: "label",
+        setterType: "INPUT_SETTER",
+        expectedType: VALIDATION_TYPES.STRING,
+        defaultValue:"Check"
+      },
+      {
+        id: `${baseWidgetName}-options-default-value`,
+        labelName: i18n.t("editor.inspect.setter_label.default_value"),
+        labelDesc: i18n.t(
+          "editor.inspect.setter_tooltip.component_default_value",
+        ),
+        attrName: "value",
+        setterType: "INPUT_SETTER",
+        expectedType: VALIDATION_TYPES.BOOLEAN,
+      },
+    ],
+  },
+ 
+  {
+    id: `${baseWidgetName}-interaction`,
+    groupName: i18n.t("editor.inspect.setter_group.interaction"),
+    children: [
+      {
+        ...generatorEventHandlerConfig(
+          baseWidgetName,
+          CHECK_BOX_NATIVE_GROUP_EVENT_HANDLER_CONFIG.events,
+        ),
+      }
+    ],
+  },
+  // {
+  //   id: `${baseWidgetName}-Adornments`,
+  //   groupName: i18n.t("editor.inspect.setter_group.adornments"),
+  //   children: [
+  //     {
+  //       id: `${baseWidgetName}-adornments-tooltip`,
+  //       labelName: i18n.t("editor.inspect.setter_label.tooltip"),
+  //       labelDesc: i18n.t("editor.inspect.setter_tooltip.tooltip"),
+  //       attrName: "tooltipText",
+  //       setterType: "INPUT_SETTER",
+  //       expectedType: VALIDATION_TYPES.STRING,
+  //     }
+  //   ],
+  // },
+  {
+    id: `${baseWidgetName}-validation`,
+    groupName: i18n.t("editor.inspect.setter_group.validation"),
+    children: [
+      {
+        id: `${baseWidgetName}-validation-required`,
+        labelName: i18n.t("editor.inspect.setter_label.required_field"),
+        labelDesc: i18n.t("editor.inspect.setter_tooltip.required_field"),
+        setterType: "DYNAMIC_SWITCH_SETTER",
+        expectedType: VALIDATION_TYPES.BOOLEAN,
+        useCustomLayout: true,
+        openDynamic: true,
+        attrName: "required",
+      },
+      {
+        id: `${baseWidgetName}-validation-custom`,
+        labelName: i18n.t("editor.inspect.setter_label.custom_rule"),
+        labelDesc: i18n.t("editor.inspect.setter_tooltip.custom_rule"),
+        setterType: "INPUT_SETTER",
+        attrName: "customRule",
+        expectedType: VALIDATION_TYPES.STRING,
+      },
+      {
+        id: `${baseWidgetName}-validation-hide-message`,
+        labelName: i18n.t(
+          "editor.inspect.setter_label.hide_validation_message",
+        ),
+        labelDesc: i18n.t(
+          "editor.inspect.setter_tooltip.hide_validation_message",
+        ),
+        setterType: "DYNAMIC_SWITCH_SETTER",
+        expectedType: VALIDATION_TYPES.BOOLEAN,
+        useCustomLayout: true,
+        openDynamic: true,
+        attrName: "hideValidationMessage",
+      },
+      {
+        id: `${baseWidgetName}-validation-form-data-key`,
+        labelName: i18n.t("editor.inspect.setter_label.form_data_key"),
+        labelDesc: i18n.t("editor.inspect.setter_tooltip.form_data_key"),
+        setterType: "INPUT_SETTER",
+        expectedType: VALIDATION_TYPES.STRING,
+        attrName: "formDataKey",
+      },
+    ],
+  },
+  {
+    id: `${baseWidgetName}-style`,
+    groupName: i18n.t("editor.inspect.setter_group.style"),
+    children: [
+      {
+        id: `${baseWidgetName}-basic-type`,
+        labelName: "Placement",
+        labelDesc: "Placement",
+        attrName: "labelPlacement",
+        expectedType: VALIDATION_TYPES.STRING,
+        setterType: "SEARCH_SELECT_SETTER",
+        options: [
+          {
+            label: "End",
+            value: "end",
+          },
+          {
+            label: "Start",
+            value: "start",
+          },
+          {
+            label: "Bottom",
+            value: "bottom",
+          },
+          {
+            label: "Top",
+            value: "top",
+          },
+        ],
+      },
+      {
+        id: `${baseWidgetName}-style-list`,
+        setterType: "STYLE_CONTAINER_SETTER",
+        labelName: i18n.t("editor.inspect.setter_label.colors"),
+        attrName: "styles",
+        useCustomLayout: true,
+        childrenSetter: [
+          {
+            id: `${baseWidgetName}-style-bg`,
+            labelName:  i18n.t("editor.inspect.setter_label.theme_color"),
+            setterType: "COLOR_PICKER_SETTER",
+            useCustomLayout: true,
+            attrName: "colorScheme",
+            defaultValue: "blue",
+          },
+          {
+            id: `${baseWidgetName}-validation-classesCondition`,
+            labelName:"Style Class Condition",
+            labelDesc: i18n.t("editor.inspect.setter_tooltip.form_data_key"),
+            setterType: "INPUT_SETTER",
+            expectedType: VALIDATION_TYPES.BOOLEAN,
+            defaultValue:true,
+            attrName: "isClassTrue",
+          },
+          {
+            id: `${baseWidgetName}-style-classes`,
+            labelName: "Select True CSS Classes  :",
+            isSetterSingleRow:true,
+            attrName: "trueClasses",
+            setterType: "BASE_MULTI_SELECT_SETTER",
+            expectedType: VALIDATION_TYPES.ARRAY,
+          },
+          {
+            id: `${baseWidgetName}-style-classes`,
+            labelName: "Select false CSS Classes  :",
+            isSetterSingleRow:true,
+            attrName: "falseClasses",
+            setterType: "BASE_MULTI_SELECT_SETTER",
+            expectedType: VALIDATION_TYPES.ARRAY,
+          },
+        ],
+      },
+    ],
+  },
+];

package/widgetLibrary/CheckBoxContainerNative/widgetConfig.tsx

@@ -0,0 +1,17 @@
+import CheckboxWidgetIcon  from "@/assets/widgetCover/checkBox.svg";
+import { WidgetConfig } from "@/widgetLibrary/interface";
+
+export const CHECKBOX_NATIVE_WIDGET_CONFIG: WidgetConfig = {
+  type: "CHECKBOX_NATIVE_WIDGET",
+  displayName: "NativeCheckBox",
+  widgetName: "NativeCheckBox",
+  icon: <CheckboxWidgetIcon />,
+  keywords: ["NativeCheckBox", "文本输入框"],
+  sessionType: "INPUTS",
+  version: 0,
+  defaults: {
+    value: false,
+    label: "Check",
+    labelPlacement: "left",
+  },
+};

package/widgetLibrary/ContainerWidget/container.tsx

@@ -0,0 +1,207 @@
+import { FC, useCallback, useEffect, useMemo, useRef } from "react";
+import { ContainerProps } from "@/widgetLibrary/ContainerWidget/interface";
+// import { TooltipWrapper } from "@/widgetLibrary/PublicSector/TooltipWrapper"
+import { ContainerEmptyState } from "./emptyState";
+import { applyContainerWrapperStyle } from "./style";
+import RenderChildrenCanvas from "../RenderChildrenCanvas";
+import { useSelector } from "react-redux";
+import { getIsGridCanvas } from "@/redux/config/configSelector";
+import { getStyleMap } from "@/utils/getStyleMap";
+
+export const ContainerWidget: FC<ContainerProps> = (props) => {
+  const {
+    currentIndex,
+    updateComponentRuntimeProps,
+    
+    isClassTrue = true,
+    context,
+    trueClasses = [],
+    falseClasses=[],
+    // deleteComponentRuntimeProps,
+    viewList,
+    childrenNode,
+    columnNumber,
+    dynamicHeight = "auto",
+    triggerEventHandler,
+    updateComponentHeight,
+    linkWidgetDisplayName,
+    padding,
+    displayName,
+    handleUpdateMultiExecutionResult,
+  } = props;
+
+  const preCurrentViewIndex = useRef<number>(currentIndex);
+  const isGridContainer = useSelector(getIsGridCanvas);
+  useEffect(() => {
+    if (typeof preCurrentViewIndex.current !== "number") {
+      preCurrentViewIndex.current = currentIndex;
+    }
+    if (preCurrentViewIndex.current !== currentIndex) {
+      triggerEventHandler("change");
+      preCurrentViewIndex.current = currentIndex;
+    }
+  }, [currentIndex, triggerEventHandler]);
+
+  const handleOnClick = useCallback(() => {
+    triggerEventHandler("click");
+  }, [triggerEventHandler]);
+
+  const enableAutoHeight = useMemo(() => {
+    switch (dynamicHeight) {
+      case "auto":
+        return true;
+      case "limited":
+        return true;
+      case "fixed":
+      default:
+        return false;
+    }
+  }, [dynamicHeight]);
+
+  const handleUpdateHeight = useCallback(
+    (height: number) => {
+      if (!updateComponentHeight || !enableAutoHeight) return;
+      updateComponentHeight(height + 2);
+    },
+    [enableAutoHeight, updateComponentHeight]
+  );
+
+  const handleUpdateOriginalDSLAttrs = useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (updateSlice: Record<string, any>) => {
+      handleUpdateMultiExecutionResult([
+        {
+          displayName,
+          value: updateSlice,
+        },
+      ]);
+      if (linkWidgetDisplayName && linkWidgetDisplayName.length > 0) {
+        const curUpdateSlice = linkWidgetDisplayName.map((name) => ({
+          displayName: name,
+          value: updateSlice,
+        }));
+
+        handleUpdateMultiExecutionResult(curUpdateSlice);
+      }
+    },
+    [displayName, handleUpdateMultiExecutionResult, linkWidgetDisplayName]
+  );
+
+  useEffect(() => {
+    updateComponentRuntimeProps?.({
+      setCurrentViewKey: (key: string) => {
+        const index = viewList.findIndex((viewItem) => viewItem.key === key);
+        if (index === -1) return;
+        handleUpdateOriginalDSLAttrs({
+          currentIndex: index,
+          currentKey: key,
+        });
+      },
+      setCurrentViewIndex: (index: string) => {
+        const numberIndex = parseInt(index);
+        const view = viewList[numberIndex];
+        if (!view) return;
+        handleUpdateOriginalDSLAttrs({
+          currentIndex: numberIndex,
+          currentKey: view.key,
+        });
+      },
+      showNextView: (loop: boolean) => {
+        let newCurrentIndex = currentIndex + 1;
+        if (newCurrentIndex >= viewList.length) {
+          if (!loop) return;
+          newCurrentIndex = 0;
+        }
+        const currentView = viewList[newCurrentIndex];
+        handleUpdateOriginalDSLAttrs({
+          currentIndex: newCurrentIndex,
+          currentKey: currentView.key,
+        });
+      },
+      showNextVisibleView: (loop: boolean) => {
+        let newCurrentIndex = currentIndex + 1;
+        if (newCurrentIndex >= viewList.length) {
+          if (!loop) return;
+          newCurrentIndex = 0;
+        }
+        let currentView = viewList[newCurrentIndex];
+        while (currentView.hidden || currentView.disabled) {
+          newCurrentIndex++;
+          currentView = viewList[newCurrentIndex];
+          if (newCurrentIndex >= viewList.length) {
+            if (!loop) return;
+            newCurrentIndex = 0;
+          }
+        }
+        handleUpdateOriginalDSLAttrs({
+          currentIndex: newCurrentIndex,
+          currentKey: currentView.key,
+        });
+      },
+      showPreviousView: (loop: boolean) => {
+        let newCurrentIndex = currentIndex - 1;
+
+        if (newCurrentIndex < 0) {
+          if (!loop) return;
+          newCurrentIndex = viewList.length - 1;
+        }
+        const currentView = viewList[newCurrentIndex];
+        handleUpdateOriginalDSLAttrs({
+          currentIndex: newCurrentIndex,
+          currentKey: currentView.key,
+        });
+      },
+      showPreviousVisibleView: (loop: boolean) => {
+        let newCurrentIndex = currentIndex - 1;
+
+        if (newCurrentIndex < 0) {
+          if (!loop) return;
+          newCurrentIndex = viewList.length - 1;
+        }
+        let currentView = viewList[newCurrentIndex];
+        while (currentView.hidden || currentView.disabled) {
+          newCurrentIndex--;
+          currentView = viewList[newCurrentIndex];
+          if (newCurrentIndex < 0) {
+            if (!loop) return;
+            newCurrentIndex = viewList.length - 1;
+          }
+        }
+        handleUpdateOriginalDSLAttrs({
+          currentIndex: newCurrentIndex,
+          currentKey: currentView.key,
+        });
+      },
+    });
+    // return () => {
+    //   deleteComponentRuntimeProps()
+    // }
+  }, [
+    // deleteComponentRuntimeProps,
+    updateComponentRuntimeProps,
+    handleUpdateOriginalDSLAttrs,
+    viewList,
+    currentIndex,
+  ]);
+ const style  = useMemo(()=>{
+  return getStyleMap( trueClasses,falseClasses,isClassTrue,context)
+ },[trueClasses, falseClasses, isClassTrue, context])
+  return (
+    <div  css={style||applyContainerWrapperStyle} onClick={handleOnClick}>
+      {Array.isArray(childrenNode) && currentIndex < childrenNode.length ? (
+        <RenderChildrenCanvas
+          displayName={childrenNode[currentIndex]}
+          columnNumber={columnNumber}
+          handleUpdateHeight={handleUpdateHeight}
+          canResizeCanvas={false || enableAutoHeight}
+          containerPadding={padding?.size}
+          gridContainer={isGridContainer}
+        />
+      ) : (
+        <ContainerEmptyState />
+      )}
+    </div>
+  );
+};
+
+export default ContainerWidget;

package/widgetLibrary/ContainerWidget/emptyState.tsx

@@ -0,0 +1,41 @@
+import { FC } from "react";
+import {
+  applyEmptyStateWrapperStyle,
+  emptyStateStyle,
+} from "@/widgetLibrary/ContainerWidget/style";
+// import { getPaddingShape } from "@/page/app/components/DotPanel/components/Canvas/renderComponentCanvasContainer"
+import { getPaddingShape } from "@/page/App/components/dotPanel/utils/styleutils/padding";
+import { useSelector } from "react-redux";
+import { getIsIMPAKTEditMode, isShowDot } from "@/redux/config/configSelector";
+import { useTheme } from "@mui/material";
+export const ContainerEmptyState: FC<{
+  isInner?: boolean;
+  containerPadding?: string;
+  handleUpdateHeight?: (height: number) => void;
+  rowCount?: string;
+}> = ({
+  isInner,
+  containerPadding = "0",
+  rowCount = "1",
+}) => {
+  const canShowDot = useSelector(isShowDot);
+  const paddings = getPaddingShape(containerPadding);
+  const isEditMode = useSelector(getIsIMPAKTEditMode);
+  const paddingTopBottom = paddings.paddingTop + paddings.paddingBottom;
+const theme = useTheme()
+  return (
+    <div
+      css={applyEmptyStateWrapperStyle(
+        isInner,
+        paddingTopBottom,
+        isEditMode,
+        Number(rowCount),
+        theme,
+        canShowDot
+
+      )}
+    >
+      <span css={emptyStateStyle(theme)}>{isEditMode && !canShowDot && "Drag components here"}</span>
+    </div>
+  );
+};

package/widgetLibrary/ContainerWidget/eventHandlerConfig.ts

@@ -0,0 +1,22 @@
+// import i18n from "@/i18n/config"
+import { EventHandlerConfig } from "@/widgetLibrary/interface"
+export const CONTAINER_EVENT_HANDLER_CONFIG: EventHandlerConfig = {
+  events: [
+    {
+      label: "Click",
+      value: "click",
+    },
+    {
+      label: "Change",
+      value: "change",
+    },
+  ],
+  methods: [
+    "setCurrentViewKey",
+    "setCurrentViewIndex",
+    "showNextView",
+    "showNextVisibleView",
+    "showPreviousView",
+    "showPreviousVisibleView",
+  ],
+}

package/widgetLibrary/ContainerWidget/index.tsx

@@ -0,0 +1,3 @@
+export { CONTAINER_WIDGET_CONFIG } from "./widgetConfig"
+export { CONTAINER_PANEL_CONFIG } from "./panelConfig"
+export {ContainerWidget} from './container'

package/widgetLibrary/ContainerWidget/interface.ts

@@ -0,0 +1,53 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ComponentMapNode, PADDING_MODE } from "@/utils/generators/interface"
+import { BaseWidgetProps } from "@/widgetLibrary/interface"
+
+export interface viewListItemShaper {
+  id: string
+  key: string
+  label: string
+  disabled?: boolean
+  hidden?: boolean,
+  xs?: number,
+  sm?: number,
+  lg?: number,
+  md?: number,
+}
+
+export interface ContainerProps extends BaseWidgetProps {
+  currentIndex: number
+  componentNode: ComponentMapNode
+  viewList: viewListItemShaper[]
+  tooltipText?: string
+  xs?: string,
+  sm?: string,
+  md?: string,
+  lg?: string,
+  justifyContent?: string,
+  h: number
+
+  linkWidgetDisplayName?: string[]
+  unitH: number
+  columnSize?: number
+  gridGap?: number
+  columnNumber?: number
+  dynamicHeight?: "auto" | "fixed" | "limited"
+  dynamicMinHeight?: number
+  dynamicMaxHeight?: number
+  padding?: {
+    size: string
+    mode: PADDING_MODE
+  }
+  canvasId?: number
+  handleUpdateMultiAttrDSL?: any
+  handleUpdateOriginalDSLMultiAttr: (updateSlice: any
+    // Record<string, any>
+  ) => void,
+  handleUpdateOtherMultiAttrDSL?: any
+  Mobile:any,
+  Tablet:any,
+  Desktop:any,
+  attrPath?:string
+  isGridCanvas?:boolean
+ 
+}

package/widgetLibrary/ContainerWidget/panelConfig.tsx

@@ -0,0 +1,174 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import RadioIcon from "@/assets/radius-icon.svg"
+import i18n from "@/i18n/config"
+import { VALIDATION_TYPES } from "@/utils/validationFactory"
+
+const baseWidgetName = "Container"
+export const CONTAINER_PANEL_CONFIG: any[] = [
+  {
+    id: `${baseWidgetName}-views`,
+    groupName: i18n.t("editor.inspect.setter_group.views"),
+    children: [
+      {
+        id: `${baseWidgetName}-views-list`,
+        labelName: i18n.t("editor.inspect.setter_label.data_source"),
+        useCustomLayout: true,
+        attrName: "viewList",
+        setterType: "CONTAINER_VIEW_SETTER",
+        childrenSetter: [
+          {
+            id: `${baseWidgetName}-viewList-key`,
+            labelName: i18n.t("editor.inspect.setter_label.key"),
+            attrName: "key",
+            setterType: "INPUT_SETTER",
+            expectedType: VALIDATION_TYPES.STRING,
+          },
+          {
+            id: `${baseWidgetName}-viewList-label`,
+            labelName: i18n.t("editor.inspect.setter_label.label"),
+            attrName: "label",
+            setterType: "INPUT_SETTER",
+            expectedType: VALIDATION_TYPES.STRING,
+          },
+          {
+            id: `${baseWidgetName}-viewList-disabled`,
+            labelName: i18n.t("editor.inspect.setter_label.disabled"),
+            attrName: "disabled",
+            setterType: "INPUT_SETTER",
+            expectedType: VALIDATION_TYPES.BOOLEAN,
+          },
+          {
+            id: `${baseWidgetName}-viewList-hidden`,
+            labelName: i18n.t("editor.inspect.setter_label.hidden"),
+            attrName: "hidden",
+            setterType: "DYNAMIC_SWITCH_SETTER",
+            useCustomLayout: true,
+            openDynamic: true,
+            expectedType: VALIDATION_TYPES.BOOLEAN,
+          },
+        ],
+      },
+      {
+        id: `${baseWidgetName}-views-default`,
+        labelName: i18n.t("editor.inspect.setter_label.default_views"),
+        attrName: "defaultView",
+        setterType: "CONTAINER_DEFAULT_VIEW_SETTER",
+      },
+    ],
+  },
+  {
+    id: `${baseWidgetName}-interaction`,
+    groupName: i18n.t("editor.inspect.setter_group.interaction"),
+    children: [
+      // {
+      //   ...generatorEventHandlerConfig(
+      //     baseWidgetName,
+      //     CONTAINER_EVENT_HANDLER_CONFIG.events,
+      //   ),
+      // },
+    ],
+  },
+  {
+    id: `${baseWidgetName}-adornments`,
+    groupName: i18n.t("editor.inspect.setter_group.adornments"),
+    children: [
+      {
+        id: `${baseWidgetName}-adornments-tooltip`,
+        labelName: i18n.t("editor.inspect.setter_label.tooltip"),
+        labelDesc: i18n.t("editor.inspect.setter_tooltip.tooltip"),
+        attrName: "tooltipText",
+        expectedType: VALIDATION_TYPES.STRING,
+        setterType: "INPUT_SETTER",
+      },
+    ],
+  },
+  {
+    id: `${baseWidgetName}-layout`,
+    groupName: i18n.t("editor.inspect.setter_group.layout"),
+    children: [
+      {
+        id: `${baseWidgetName}-layout-height`,
+        labelName: i18n.t("editor.inspect.setter_label.height"),
+        attrName: "dynamicHeight",
+        setterType: "HEIGHT_MODE_SELECT",
+        options: [
+          {
+            label: i18n.t("editor.inspect.setter_option.fixed"),
+            value: "fixed",
+          },
+          {
+            label: i18n.t("editor.inspect.setter_option.auto_limited"),
+            value: "limited",
+          },
+          {
+            label: i18n.t("editor.inspect.setter_option.auto_height"),
+            value: "auto",
+          },
+        ],
+      },
+      {
+        id: `${baseWidgetName}-layout-hidden`,
+        labelName: i18n.t("editor.inspect.setter_label.hidden"),
+        labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"),
+        attrName: "hidden",
+        setterType: "DYNAMIC_SWITCH_SETTER",
+        useCustomLayout: true,
+        openDynamic: true,
+      },
+    ],
+  },
+  {
+    id: `${baseWidgetName}-styles`,
+    groupName: i18n.t("editor.inspect.setter_group.style"),
+    children: [
+      {
+        id: `${baseWidgetName}-styles-border`,
+        setterType: "BORDER_SETTER",
+        useCustomLayout: true,
+        attrName: "border",
+      },
+      {
+        id: `${baseWidgetName}-styles-color`,
+        setterType: "STYLE_CONTAINER_SETTER",
+        labelName: i18n.t("editor.inspect.setter_label.color"),
+        attrName: "style",
+        useCustomLayout: true,
+        childrenSetter: [
+          {
+            id: `${baseWidgetName}-validation-classesCondition`,
+            labelName:"Style Class Condition",
+            labelDesc: i18n.t("editor.inspect.setter_tooltip.form_data_key"),
+            setterType: "INPUT_SETTER",
+            expectedType: VALIDATION_TYPES.BOOLEAN,
+            defaultValue:true,
+            attrName: "isClassTrue",
+          },
+          {
+            id: `${baseWidgetName}-style-classes`,
+            labelName: "Select True CSS Classes  :",
+            isSetterSingleRow:true,
+            attrName: "trueClasses",
+            setterType: "BASE_MULTI_SELECT_SETTER",
+            expectedType: VALIDATION_TYPES.ARRAY,
+          },
+          {
+            id: `${baseWidgetName}-style-classes`,
+            labelName: "Select false CSS Classes  :",
+            isSetterSingleRow:true,
+            attrName: "falseClasses",
+            setterType: "BASE_MULTI_SELECT_SETTER",
+            expectedType: VALIDATION_TYPES.ARRAY,
+          },
+        ],
+
+      },
+      {
+        id: `${baseWidgetName}-styles-padding`,
+        setterType: "PADDING_INPUT_SETTER",
+        labelName: i18n.t("editor.inspect.setter_group.padding"),
+        attrName: "padding",
+        useCustomLayout: true,
+      },
+    ],
+  },
+]