From 38311f757c26c171a3f0933fe4175f9705c268b7 Mon Sep 17 00:00:00 2001
From: MeenamAfzal <meenamafzal1@gmail.com>
Date: Sun, 26 May 2024 00:33:25 +0500
Subject: [PATCH 01/19] container padding updated

---
 .../autoCompleteComp/autoCompleteComp.tsx     |  1 -
 .../src/comps/generators/uiCompBuilder.tsx    | 35 ++++++++++++-------
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
index d639d2fc7..5b7d697eb 100644
--- a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
@@ -63,7 +63,6 @@ const InputStyle = styled(Input)<{ $style: InputLikeStyleType }>`
     ${getStyle(props.$style)}
     input {
       padding: ${props.style?.padding};
-      rotate: ${props?.$style?.rotation};
     }
     .ant-select-single {
       width: 100% !important;
diff --git a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
index 20196d4b2..c664ed682 100644
--- a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
+++ b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
@@ -221,14 +221,14 @@ function UIView(props: {
   const comp = props.comp;
   const childrenProps = childrenToProps(comp.children);
   const parentDisabled = useContext(DisabledContext);
-  const disabled = childrenProps["disabled"];
-  if (disabled !== undefined && typeof disabled === "boolean") {
-    childrenProps["disabled"] = disabled || parentDisabled;
+  const disabled = childrenProps['disabled'];
+  if (disabled !== undefined && typeof disabled === 'boolean') {
+    childrenProps['disabled'] = disabled || parentDisabled;
   }
 
   //ADDED BY FRED
   if (childrenProps.events) {
-    const events = childrenProps.events as { value?: any[] };
+    const events = childrenProps.events as {value?: any[]};
     if (!events.value || events.value.length === 0) {
       events.value = [];
     }
@@ -246,22 +246,31 @@ function UIView(props: {
     );
   }
 
+  let defaultChildren = comp.children;
+  const isNotContainer = defaultChildren.hasOwnProperty('style');
+  let rotationVal = null
+  if (isNotContainer) {
+    rotationVal = defaultChildren.style.children.rotation.valueAndMsg.value;
+  }
   return (
     <div
       ref={props.innerRef}
       className={childrenProps.className as string}
       data-testid={childrenProps.dataTestId as string}
       style={{
-        width: "100%",
-        height: "100%",
-        margin: "0px",
-        padding: "0px",
-      }}>
+        width: '100%',
+        height: '100%',
+        margin: '0px',
+        padding:
+          rotationVal === null
+            ? '0px'
+            : rotationVal === '' || rotationVal === '0deg'
+              ? '0px'
+              : '50% 0px',
+      }}
+    >
       <HidableView hidden={childrenProps.hidden as boolean}>
-        {props.viewFn(
-          childrenProps,
-          comp.dispatch
-        )}
+        {props.viewFn(childrenProps, comp.dispatch)}
       </HidableView>
     </div>
   );

From 3cedcedd996b9a0974de332dca38904be9cd3c7f Mon Sep 17 00:00:00 2001
From: MeenamAfzal <meenamafzal1@gmail.com>
Date: Tue, 28 May 2024 17:21:32 +0500
Subject: [PATCH 02/19] rotation improved

---
 .../comps/comps/containerComp/cardComp.tsx    |  1 +
 .../comps/containerComp/textContainerComp.tsx |  4 ++--
 .../responsiveLayout/responsiveLayout.tsx     | 12 ++++++------
 .../lowcoder/src/comps/comps/textComp.tsx     |  9 ++++-----
 .../triFloatTextContainer.tsx                 |  9 ++++-----
 .../comps/controls/styleControlConstants.tsx  | 19 +++++++++++++++++++
 .../src/comps/generators/uiCompBuilder.tsx    | 17 ++++++++++++-----
 7 files changed, 48 insertions(+), 23 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
index 2f927cfda..ac746e4c5 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
@@ -78,6 +78,7 @@ const Wrapper = styled.div<{
     border-style: ${props => props.$style?.borderStyle};
     border-radius: ${props => props.$style?.radius};
     border-width: ${props => props.$style?.borderWidth};
+    box-shadow: ${props=>`${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
     ${props=>props.$animationStyle}
   }
   .ant-card-body {
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/textContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/textContainerComp.tsx
index 1edf9c97b..22260ba00 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/textContainerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/textContainerComp.tsx
@@ -20,7 +20,7 @@ import { TriContainer } from "../triContainerComp/triFloatTextContainer";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { withDefault } from "comps/generators/simpleGenerators";
 import { styleControl } from "comps/controls/styleControl";
-import { AnimationStyle, TextStyle } from "comps/controls/styleControlConstants";
+import { AnimationStyle, TextContainerStyle } from "comps/controls/styleControlConstants";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 import { alignWithJustifyControl } from "comps/controls/alignControl";
@@ -62,7 +62,7 @@ export const ContainerBaseComp = (function () {
     float: dropdownControl(floatOptions, "left"),
     horizontalAlignment: alignWithJustifyControl(),
     width: withDefault(StringControl, "40"),
-    style: styleControl(TextStyle),
+    style: styleControl(TextContainerStyle),
     animationStyle: styleControl(AnimationStyle),
   };
   return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
diff --git a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
index f49772863..e7000ae10 100644
--- a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
@@ -91,7 +91,7 @@ const childrenMap = {
   autoHeight: AutoHeightControl,
   rowBreak: withDefault(BoolControl, false),
   matchColumnsHeight: withDefault(BoolControl, true),
-  rowStyle: withDefault(styleControl(ResponsiveLayoutRowStyle), {}),
+  style: withDefault(styleControl(ResponsiveLayoutRowStyle), {}),
   columnStyle: withDefault(styleControl(ResponsiveLayoutColStyle), {}),
   animationStyle:styleControl(AnimationStyle),
   columnPerRowLG: withDefault(NumberControl, 4),
@@ -127,7 +127,7 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
     dispatch,
     rowBreak,
     matchColumnsHeight,
-    rowStyle,
+    style,
     columnStyle,
     columnPerRowLG,
     columnPerRowMD,
@@ -138,11 +138,11 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
   } = props;
 
   return (
-    <BackgroundColorContext.Provider value={props.rowStyle.background}>
+    <BackgroundColorContext.Provider value={props.style.background}>
       <DisabledContext.Provider value={props.disabled}>
-        <div style={{padding: rowStyle.margin, height: '100%'}}>
+        <div style={{padding: style.margin, height: '100%'}}>
           <RowWrapper
-            $style={rowStyle}
+            $style={style}
             $animationStyle={animationStyle}
             wrap={rowBreak}
             gutter={[horizontalSpacing, verticalSpacing]}
@@ -247,7 +247,7 @@ export const ResponsiveLayoutBaseComp = (function () {
               })}
             </Section>
             <Section name={trans("responsiveLayout.rowStyle")}>
-              {children.rowStyle.getPropertyView()}
+              {children.style.getPropertyView()}
             </Section>
             <Section name={trans("responsiveLayout.columnStyle")}>
               {children.columnStyle.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx
index 18cf05727..0d101373d 100644
--- a/client/packages/lowcoder/src/comps/comps/textComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx
@@ -10,7 +10,7 @@ import { UICompBuilder } from "../generators";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing";
 import { markdownCompCss, TacoMarkDown } from "lowcoder-design";
 import { styleControl } from "comps/controls/styleControl";
-import { AnimationStyle, AnimationStyleType, TextStyle, TextStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
+import { AnimationStyle, AnimationStyleType, TextContainerStyle, TextContainerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { alignWithJustifyControl } from "comps/controls/alignControl";
@@ -21,7 +21,7 @@ import { PaddingControl } from "../controls/paddingControl";
 import React, { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 
-const getStyle = (style: TextStyleType) => {
+const getStyle = (style: TextContainerStyleType) => {
   return css`
     border-radius: ${(style.radius ? style.radius : "4px")};
     border: ${(style.borderWidth ? style.borderWidth : "0px")} solid ${style.border};
@@ -74,7 +74,7 @@ const getStyle = (style: TextStyleType) => {
 
 const TextContainer = styled.div<{
   $type: string;
-  $styleConfig: TextStyleType;
+  $styleConfig: TextContainerStyleType;
   $animationStyle:AnimationStyleType;
 }>`
   height: 100%;
@@ -130,7 +130,7 @@ let TextTmpComp = (function () {
     type: dropdownControl(typeOptions, "markdown"),
     horizontalAlignment: alignWithJustifyControl(),
     verticalAlignment: dropdownControl(VerticalAlignmentOptions, "center"),
-    style: styleControl(TextStyle),
+    style: styleControl(TextContainerStyle),
     animationStyle: styleControl(AnimationStyle),
     margin: MarginControl,
     padding: PaddingControl,
@@ -146,7 +146,6 @@ let TextTmpComp = (function () {
           justifyContent: props.horizontalAlignment,
           alignItems: props.autoHeight ? "center" : props.verticalAlignment,
           textAlign: props.horizontalAlignment,
-          rotate: props.style.rotation
         }}
       >
         {props.type === "markdown" ? <TacoMarkDown>{value}</TacoMarkDown> : value}
diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx
index 6179ae132..d87d9cf64 100644
--- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx
+++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx
@@ -1,5 +1,5 @@
 import {
-  TextStyleType,
+  TextContainerStyleType,
   ContainerStyleType,
   heightCalculator,
   widthCalculator,
@@ -17,12 +17,11 @@ import {
 } from "../containerComp/containerView";
 import { TriContainerViewProps } from "../triContainerComp/triContainerCompBuilder";
 
-const getStyle = (style: TextStyleType) => {
+const getStyle = (style: TextContainerStyleType) => {
   return css`
     border-radius: ${(style.radius ? style.radius : "4px")};
     border: ${(style.borderWidth ? style.borderWidth : "0px")} solid ${style.border};
     color: ${style.text};
-    rotate: ${style.rotation&&style.rotation};
     font-size: ${style.textSize} !important;
     font-weight: ${style.textWeight} !important;
     font-family: ${style.fontFamily} !important;
@@ -89,7 +88,7 @@ ${props=>props.$animationStyle&&props.$animationStyle}
   ${(props) => props.$style.backgroundImageOrigin && `background-origin: ${props.$style.backgroundImageOrigin};`}
 `;
 
-const FloatTextWrapper = styled.div<{ $style: TextStyleType, $horizontalAlignment : any }>`
+const FloatTextWrapper = styled.div<{ $style: TextContainerStyleType, $horizontalAlignment : any }>`
   ${(props) => props.$style && getStyle(props.$style)}
   text-align: ${(props) => props.$horizontalAlignment};
   padding: ${(props) => props.$style.padding};
@@ -146,7 +145,7 @@ export type TriContainerProps = TriContainerViewProps & {
   type: string;
   float: string;
   width: string;
-  style: TextStyleType;
+  style: TextContainerStyleType;
   horizontalAlignment: string;
   animationStyle?: AnimationStyleType;
 };
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index 80f910112..83d106ede 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -812,6 +812,24 @@ export const TextStyle = [
   },
 ] as const;
 
+export const TextContainerStyle = [
+  {
+    name: "background",
+    label: trans("style.background"),
+    depTheme: "canvas",
+    depType: DEP_TYPE.SELF,
+    transformer: toSelf,
+  },
+  ...STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='rotation'),
+  {
+    name: "links",
+    label: trans("style.links"),
+    depTheme: "primary",
+    depType: DEP_TYPE.SELF,
+    transformer: toSelf,
+  },
+] as const;
+
 export const MarginStyle = [
   {
     name: "margin",
@@ -1946,6 +1964,7 @@ export type ColorPickerStyleType = StyleConfigType<typeof ColorPickerStyle>;
 export type ButtonStyleType = StyleConfigType<typeof ButtonStyle>;
 export type ToggleButtonStyleType = StyleConfigType<typeof ToggleButtonStyle>;
 export type TextStyleType = StyleConfigType<typeof TextStyle>;
+export type TextContainerStyleType = StyleConfigType<typeof TextContainerStyle>;
 export type ContainerStyleType = StyleConfigType<typeof ContainerStyle>;
 export type ContainerHeaderStyleType = StyleConfigType<
   typeof ContainerHeaderStyle
diff --git a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
index c664ed682..8c80a7bc4 100644
--- a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
+++ b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
@@ -249,8 +249,10 @@ function UIView(props: {
   let defaultChildren = comp.children;
   const isNotContainer = defaultChildren.hasOwnProperty('style');
   let rotationVal = null
+  let boxShadowVal = null;
   if (isNotContainer) {
-    rotationVal = defaultChildren.style.children.rotation.valueAndMsg.value;
+    rotationVal = defaultChildren.style.children?.rotation?.valueAndMsg.value;
+    boxShadowVal = defaultChildren.style?.children?.boxShadow?.valueAndMsg?.value;
   }
   return (
     <div
@@ -262,11 +264,16 @@ function UIView(props: {
         height: '100%',
         margin: '0px',
         padding:
-          rotationVal === null
+          rotationVal === null || rotationVal === undefined
             ? '0px'
-            : rotationVal === '' || rotationVal === '0deg'
-              ? '0px'
-              : '50% 0px',
+            : boxShadowVal === null || boxShadowVal === undefined
+              ? rotationVal === '' || rotationVal === '0deg'
+                ? '0px'
+                : '50% 0px'
+              : (rotationVal === '' || rotationVal === '0deg') &&
+                  (boxShadowVal === '' || boxShadowVal === '0px')
+                ? '0px'
+                : '50% 0px',
       }}
     >
       <HidableView hidden={childrenProps.hidden as boolean}>

From d766a345bdfa05d3af9da431296423eeec4cea97 Mon Sep 17 00:00:00 2001
From: MenamAfzaal <meenam.afzal@frizhub.com>
Date: Wed, 29 May 2024 20:37:28 +0500
Subject: [PATCH 03/19] designed formula to calculate padding dynamically

---
 .../lowcoder/src/comps/comps/imageComp.tsx    |  1 +
 .../src/comps/generators/uiCompBuilder.tsx    | 30 ++++++++++++-------
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/imageComp.tsx b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
index 8c75e3718..fbb261f0e 100644
--- a/client/packages/lowcoder/src/comps/comps/imageComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
@@ -169,6 +169,7 @@ const childrenMap = {
   animationStyle: styleControl(AnimationStyle),
   autoHeight: withDefault(AutoHeightControl, "fixed"),
   supportPreview: BoolControl,
+  restrictPaddingOnRotation:withDefault(BoolControl, true)
 };
 
 let ImageBasicComp = new UICompBuilder(childrenMap, (props) => {
diff --git a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
index 8c80a7bc4..5732562d2 100644
--- a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
+++ b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
@@ -248,6 +248,7 @@ function UIView(props: {
 
   let defaultChildren = comp.children;
   const isNotContainer = defaultChildren.hasOwnProperty('style');
+  const restrictPaddingOnRotation = defaultChildren.hasOwnProperty('restrictPaddingOnRotation');
   let rotationVal = null
   let boxShadowVal = null;
   if (isNotContainer) {
@@ -263,17 +264,24 @@ function UIView(props: {
         width: '100%',
         height: '100%',
         margin: '0px',
-        padding:
-          rotationVal === null || rotationVal === undefined
-            ? '0px'
-            : boxShadowVal === null || boxShadowVal === undefined
-              ? rotationVal === '' || rotationVal === '0deg'
-                ? '0px'
-                : '50% 0px'
-              : (rotationVal === '' || rotationVal === '0deg') &&
-                  (boxShadowVal === '' || boxShadowVal === '0px')
-                ? '0px'
-                : '50% 0px',
+        // padding:'0px',
+        padding: (
+          rotationVal === null || rotationVal === undefined || restrictPaddingOnRotation
+          ? '0px'
+          : (
+            boxShadowVal === null || boxShadowVal === undefined
+            ? (
+              rotationVal === '' || rotationVal === '0deg'
+              ? '0px'
+              : `calc(min(50%, ${Math.min(50, Math.abs(rotationVal.replace('deg', '')) / 90) * 100}%)) 0px`
+            )
+            : (
+              (rotationVal === '' || rotationVal === '0deg') && (boxShadowVal === '' || boxShadowVal === '0px')
+              ? '0px'
+              : `calc(min(50%, ${Math.min(50, Math.abs(rotationVal.replace('deg', '')) / 90) * 100}%)) 0px`
+            )
+          )
+        )
       }}
     >
       <HidableView hidden={childrenProps.hidden as boolean}>

From a9070fa33c6331874574336913827135ec7c1c24 Mon Sep 17 00:00:00 2001
From: MeenamAfzal <meenamafzal1@gmail.com>
Date: Wed, 29 May 2024 23:42:17 +0500
Subject: [PATCH 04/19] childrenMap updated

---
 client/packages/lowcoder/src/comps/comps/imageComp.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/packages/lowcoder/src/comps/comps/imageComp.tsx b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
index fbb261f0e..8c75e3718 100644
--- a/client/packages/lowcoder/src/comps/comps/imageComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
@@ -169,7 +169,6 @@ const childrenMap = {
   animationStyle: styleControl(AnimationStyle),
   autoHeight: withDefault(AutoHeightControl, "fixed"),
   supportPreview: BoolControl,
-  restrictPaddingOnRotation:withDefault(BoolControl, true)
 };
 
 let ImageBasicComp = new UICompBuilder(childrenMap, (props) => {

From ce81b47c446027bcfc44d0404ea2665aae8512be Mon Sep 17 00:00:00 2001
From: MeenamAfzal <meenamafzal1@gmail.com>
Date: Wed, 29 May 2024 23:57:58 +0500
Subject: [PATCH 05/19] rotation edited

---
 .../lowcoder/src/comps/comps/textComp.tsx     | 40 ++++++++++---------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx
index 0d101373d..5d223009c 100644
--- a/client/packages/lowcoder/src/comps/comps/textComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx
@@ -10,7 +10,7 @@ import { UICompBuilder } from "../generators";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing";
 import { markdownCompCss, TacoMarkDown } from "lowcoder-design";
 import { styleControl } from "comps/controls/styleControl";
-import { AnimationStyle, AnimationStyleType, TextContainerStyle, TextContainerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
+import { AnimationStyle, AnimationStyleType, TextStyle, TextStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { alignWithJustifyControl } from "comps/controls/alignControl";
@@ -21,23 +21,24 @@ import { PaddingControl } from "../controls/paddingControl";
 import React, { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 
-const getStyle = (style: TextContainerStyleType) => {
+const getStyle = (style: TextStyleType) => {
   return css`
-    border-radius: ${(style.radius ? style.radius : "4px")};
-    border: ${(style.borderWidth ? style.borderWidth : "0px")} solid ${style.border};
+    border-radius: ${style.radius ? style.radius : '4px'};
+    border: ${style.borderWidth ? style.borderWidth : '0px'} solid
+      ${style.border};
     color: ${style.text};
-    text-transform:${style.textTransform} !important;
-    text-decoration:${style.textDecoration} !important;
+    text-transform: ${style.textTransform} !important;
+    text-decoration: ${style.textDecoration} !important;
     background-color: ${style.background};
     .markdown-body a {
       color: ${style.links};
     }
     .markdown-body {
-      margin: ${style.margin} !important;	
-      padding: ${style.padding};	
-      width: ${widthCalculator(style.margin)};	
+      margin: ${style.margin} !important;
+      padding: ${style.padding};
+      width: ${widthCalculator(style.margin)};
       font-family: ${style.fontFamily} !important;
-      font-style:${style.fontStyle} !important;
+      font-style: ${style.fontStyle} !important;
       font-size: ${style.textSize} !important;
       // height: ${heightCalculator(style.margin)};
       h1 {
@@ -74,15 +75,15 @@ const getStyle = (style: TextContainerStyleType) => {
 
 const TextContainer = styled.div<{
   $type: string;
-  $styleConfig: TextContainerStyleType;
-  $animationStyle:AnimationStyleType;
+  $styleConfig: TextStyleType;
+  $animationStyle: AnimationStyleType;
 }>`
   height: 100%;
   overflow: auto;
   margin: 0;
-  ${props=>props.$animationStyle}
+  ${(props) => props.$animationStyle}
   ${(props) =>
-    props.$type === "text" && "white-space:break-spaces;line-height: 1.9;"};
+    props.$type === 'text' && 'white-space:break-spaces;line-height: 1.9;'};
   ${(props) => props.$styleConfig && getStyle(props.$styleConfig)}
   display: flex;
   font-size: 13px;
@@ -123,14 +124,14 @@ let TextTmpComp = (function () {
 
   const childrenMap = {
     text: stringExposingStateControl(
-      "text",
-      trans("textShow.text", { name: "{{currentUser.name}}" })
+      'text',
+      trans('textShow.text', {name: '{{currentUser.name}}'})
     ),
     autoHeight: AutoHeightControl,
-    type: dropdownControl(typeOptions, "markdown"),
+    type: dropdownControl(typeOptions, 'markdown'),
     horizontalAlignment: alignWithJustifyControl(),
-    verticalAlignment: dropdownControl(VerticalAlignmentOptions, "center"),
-    style: styleControl(TextContainerStyle),
+    verticalAlignment: dropdownControl(VerticalAlignmentOptions, 'center'),
+    style: styleControl(TextStyle),
     animationStyle: styleControl(AnimationStyle),
     margin: MarginControl,
     padding: PaddingControl,
@@ -146,6 +147,7 @@ let TextTmpComp = (function () {
           justifyContent: props.horizontalAlignment,
           alignItems: props.autoHeight ? "center" : props.verticalAlignment,
           textAlign: props.horizontalAlignment,
+          rotate: props.style.rotation
         }}
       >
         {props.type === "markdown" ? <TacoMarkDown>{value}</TacoMarkDown> : value}

From 790d04d41fe84640eb7d26fbda2b42ee52d4ff0b Mon Sep 17 00:00:00 2001
From: MeenamAfzal <meenamafzal1@gmail.com>
Date: Thu, 30 May 2024 00:09:50 +0500
Subject: [PATCH 06/19] formatting removed

---
 .../lowcoder/src/comps/comps/textComp.tsx     | 27 +++++++++----------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx
index 5d223009c..2c51648b1 100644
--- a/client/packages/lowcoder/src/comps/comps/textComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx
@@ -23,22 +23,21 @@ import { EditorContext } from "comps/editorState";
 
 const getStyle = (style: TextStyleType) => {
   return css`
-    border-radius: ${style.radius ? style.radius : '4px'};
-    border: ${style.borderWidth ? style.borderWidth : '0px'} solid
-      ${style.border};
+    border-radius: ${(style.radius ? style.radius : "4px")};
+    border: ${(style.borderWidth ? style.borderWidth : "0px")} solid ${style.border};
     color: ${style.text};
-    text-transform: ${style.textTransform} !important;
-    text-decoration: ${style.textDecoration} !important;
+    text-transform:${style.textTransform} !important;
+    text-decoration:${style.textDecoration} !important;
     background-color: ${style.background};
     .markdown-body a {
       color: ${style.links};
     }
     .markdown-body {
-      margin: ${style.margin} !important;
-      padding: ${style.padding};
-      width: ${widthCalculator(style.margin)};
+       margin: ${style.margin} !important;	
+      padding: ${style.padding};	
+      width: ${widthCalculator(style.margin)};	
       font-family: ${style.fontFamily} !important;
-      font-style: ${style.fontStyle} !important;
+      font-style:${style.fontStyle} !important;
       font-size: ${style.textSize} !important;
       // height: ${heightCalculator(style.margin)};
       h1 {
@@ -76,14 +75,14 @@ const getStyle = (style: TextStyleType) => {
 const TextContainer = styled.div<{
   $type: string;
   $styleConfig: TextStyleType;
-  $animationStyle: AnimationStyleType;
+  $animationStyle:AnimationStyleType;
 }>`
   height: 100%;
   overflow: auto;
   margin: 0;
-  ${(props) => props.$animationStyle}
+  ${props=>props.$animationStyle}
   ${(props) =>
-    props.$type === 'text' && 'white-space:break-spaces;line-height: 1.9;'};
+    props.$type === "text" && "white-space:break-spaces;line-height: 1.9;"};
   ${(props) => props.$styleConfig && getStyle(props.$styleConfig)}
   display: flex;
   font-size: 13px;
@@ -128,9 +127,9 @@ let TextTmpComp = (function () {
       trans('textShow.text', {name: '{{currentUser.name}}'})
     ),
     autoHeight: AutoHeightControl,
-    type: dropdownControl(typeOptions, 'markdown'),
+    type: dropdownControl(typeOptions, "markdown"),
     horizontalAlignment: alignWithJustifyControl(),
-    verticalAlignment: dropdownControl(VerticalAlignmentOptions, 'center'),
+    verticalAlignment: dropdownControl(VerticalAlignmentOptions, "center"),
     style: styleControl(TextStyle),
     animationStyle: styleControl(AnimationStyle),
     margin: MarginControl,

From 36d4f06fcb2f3a07c3eba53e900daeed9385df7f Mon Sep 17 00:00:00 2001
From: MeenamAfzal <meenamafzal1@gmail.com>
Date: Thu, 30 May 2024 00:11:05 +0500
Subject: [PATCH 07/19] formatting removed -1

---
 client/packages/lowcoder/src/comps/comps/textComp.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx
index 2c51648b1..8f9ddf75a 100644
--- a/client/packages/lowcoder/src/comps/comps/textComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx
@@ -33,7 +33,7 @@ const getStyle = (style: TextStyleType) => {
       color: ${style.links};
     }
     .markdown-body {
-       margin: ${style.margin} !important;	
+      margin: ${style.margin} !important;	
       padding: ${style.padding};	
       width: ${widthCalculator(style.margin)};	
       font-family: ${style.fontFamily} !important;
@@ -123,8 +123,8 @@ let TextTmpComp = (function () {
 
   const childrenMap = {
     text: stringExposingStateControl(
-      'text',
-      trans('textShow.text', {name: '{{currentUser.name}}'})
+      "text",
+      trans("textShow.text", {name: "{{currentUser.name}}"})
     ),
     autoHeight: AutoHeightControl,
     type: dropdownControl(typeOptions, "markdown"),

From c8ba492c10fe41bd4a7b8238a0517204b7d3f3fa Mon Sep 17 00:00:00 2001
From: MeenamAfzal <meenamafzal1@gmail.com>
Date: Thu, 30 May 2024 00:11:48 +0500
Subject: [PATCH 08/19] formatting removed -2

---
 client/packages/lowcoder/src/comps/comps/textComp.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx
index 8f9ddf75a..18cf05727 100644
--- a/client/packages/lowcoder/src/comps/comps/textComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx
@@ -124,7 +124,7 @@ let TextTmpComp = (function () {
   const childrenMap = {
     text: stringExposingStateControl(
       "text",
-      trans("textShow.text", {name: "{{currentUser.name}}"})
+      trans("textShow.text", { name: "{{currentUser.name}}" })
     ),
     autoHeight: AutoHeightControl,
     type: dropdownControl(typeOptions, "markdown"),

From 17ed9255182eee6865c5281c1419e5a4dbe88961 Mon Sep 17 00:00:00 2001
From: MeenamAfzal <meenamafzal1@gmail.com>
Date: Thu, 30 May 2024 00:17:45 +0500
Subject: [PATCH 09/19] unused variable removed

---
 .../packages/lowcoder/src/comps/generators/uiCompBuilder.tsx   | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
index 5732562d2..828b27259 100644
--- a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
+++ b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
@@ -248,7 +248,6 @@ function UIView(props: {
 
   let defaultChildren = comp.children;
   const isNotContainer = defaultChildren.hasOwnProperty('style');
-  const restrictPaddingOnRotation = defaultChildren.hasOwnProperty('restrictPaddingOnRotation');
   let rotationVal = null
   let boxShadowVal = null;
   if (isNotContainer) {
@@ -266,7 +265,7 @@ function UIView(props: {
         margin: '0px',
         // padding:'0px',
         padding: (
-          rotationVal === null || rotationVal === undefined || restrictPaddingOnRotation
+          rotationVal === null || rotationVal === undefined
           ? '0px'
           : (
             boxShadowVal === null || boxShadowVal === undefined

From 0edac5c84b98f8544f6e6d6a3cbbeda259ff48a7 Mon Sep 17 00:00:00 2001
From: MeenamAfzal <meenamafzal1@gmail.com>
Date: Thu, 30 May 2024 01:28:14 +0500
Subject: [PATCH 10/19] rotation fixed

---
 client/packages/lowcoder/src/comps/comps/carouselComp.tsx   | 2 +-
 client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx | 6 ++++--
 client/packages/lowcoder/src/comps/comps/imageComp.tsx      | 1 +
 .../lowcoder/src/comps/comps/mediaComp/videoComp.tsx        | 1 +
 .../lowcoder/src/comps/comps/meetingComp/controlButton.tsx  | 2 ++
 client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx     | 6 ++++--
 .../lowcoder/src/comps/generators/uiCompBuilder.tsx         | 3 ++-
 7 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/carouselComp.tsx b/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
index 4a0d014fc..7babdd5e6 100644
--- a/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
@@ -47,7 +47,7 @@ let CarouselBasicComp = (function () {
     dotPosition: withDefault(PositionControl, "bottom"),
     style: styleControl(CarouselStyle),
     animationStyle: styleControl(AnimationStyle),
-
+    restrictPaddingOnRotation:withDefault(BoolControl, true),
     ...formDataChildren,
   };
   return new UICompBuilder(childrenMap, (props) => {
diff --git a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
index 8abdd3a38..03fbc7417 100644
--- a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
@@ -6,13 +6,14 @@ import { DocumentViewer } from "react-documents";
 import styled, { css } from "styled-components";
 import { Section, sectionNames } from "lowcoder-design";
 import { StringControl } from "../controls/codeControl";
-import { UICompBuilder } from "../generators";
+import { UICompBuilder, withDefault } from "../generators";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
+import { BoolControl } from "../controls/boolControl";
 
 const getStyle = (style: FileViewerStyleType) => {
   return css`
@@ -69,7 +70,8 @@ let FileViewerBasicComp = (function () {
   const childrenMap = {
     src: StringControl,
     style: styleControl(FileViewerStyle),
-    animationStyle:styleControl(AnimationStyle)
+    animationStyle: styleControl(AnimationStyle),
+    restrictPaddingOnRotation: withDefault(BoolControl, true),
   };
   return new UICompBuilder(childrenMap, (props) => {
     if (isEmpty(props.src)) {
diff --git a/client/packages/lowcoder/src/comps/comps/imageComp.tsx b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
index 8c75e3718..fbb261f0e 100644
--- a/client/packages/lowcoder/src/comps/comps/imageComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
@@ -169,6 +169,7 @@ const childrenMap = {
   animationStyle: styleControl(AnimationStyle),
   autoHeight: withDefault(AutoHeightControl, "fixed"),
   supportPreview: BoolControl,
+  restrictPaddingOnRotation:withDefault(BoolControl, true)
 };
 
 let ImageBasicComp = new UICompBuilder(childrenMap, (props) => {
diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
index 24980ca35..90872f76a 100644
--- a/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
@@ -120,6 +120,7 @@ const childrenMap = {
   playbackRate: RangeControl.closed(1, 2, 1),
   currentTimeStamp: numberExposingStateControl("currentTimeStamp", 0),
   duration: numberExposingStateControl("duration"),
+  restrictPaddingOnRotation:withDefault(BoolControl, true),
   ...mediaCommonChildren,
 };
  
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
index eb1f04a09..44561e4b6 100644
--- a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
+++ b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
@@ -39,6 +39,7 @@ import { useEffect, useRef, useState } from "react";
 import ReactResizeDetector from "react-resize-detector";
 
 import { useContext } from "react";
+import { BoolControl } from "@lowcoder-ee/index.sdk";
 
 const Container = styled.div<{ $style: any }>`
   height: 100%;
@@ -186,6 +187,7 @@ const childrenMap = {
   prefixIcon: IconControl,
   style: ButtonStyleControl,
   viewRef: RefControl<HTMLElement>,
+  restrictPaddingOnRotation:withDefault(BoolControl, true)
 };
 
 let ButtonTmpComp = (function () {
diff --git a/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx b/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx
index a457194f6..fe48bce57 100644
--- a/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx
@@ -14,6 +14,7 @@ import { StringControl } from "comps/controls/codeControl";
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
+import { withDefault } from "../generators";
 
 // TODO: add styling for image (size)
 // TODO: add styling for bouding box (individual backround)
@@ -26,12 +27,13 @@ const levelOptions = [
 ] as const;
 
 const childrenMap = {
-  value: stringExposingStateControl("value"),
-  level: dropdownControl(levelOptions, "L"),
+  value: stringExposingStateControl('value'),
+  level: dropdownControl(levelOptions, 'L'),
   includeMargin: BoolControl.DEFAULT_TRUE,
   image: StringControl,
   style: styleControl(QRCodeStyle),
   animationStyle: styleControl(AnimationStyle),
+  restrictPaddingOnRotation: withDefault(BoolControl, true),
 };
 
 const QRCodeView = (props: RecordConstructorToView<typeof childrenMap>) => {
diff --git a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
index 828b27259..5732562d2 100644
--- a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
+++ b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
@@ -248,6 +248,7 @@ function UIView(props: {
 
   let defaultChildren = comp.children;
   const isNotContainer = defaultChildren.hasOwnProperty('style');
+  const restrictPaddingOnRotation = defaultChildren.hasOwnProperty('restrictPaddingOnRotation');
   let rotationVal = null
   let boxShadowVal = null;
   if (isNotContainer) {
@@ -265,7 +266,7 @@ function UIView(props: {
         margin: '0px',
         // padding:'0px',
         padding: (
-          rotationVal === null || rotationVal === undefined
+          rotationVal === null || rotationVal === undefined || restrictPaddingOnRotation
           ? '0px'
           : (
             boxShadowVal === null || boxShadowVal === undefined

From e3f21446b4f1887aecc0cdcc98f0f22fd174aaf4 Mon Sep 17 00:00:00 2001
From: MenamAfzal <meenamafzal1@gmail.com>
Date: Thu, 30 May 2024 04:05:03 +0500
Subject: [PATCH 11/19] rotation and boxshadow conflict resolved

---
 .../src/comps/generators/uiCompBuilder.tsx    | 27 +++++++------------
 1 file changed, 10 insertions(+), 17 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
index 5732562d2..74a0c2518 100644
--- a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
+++ b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
@@ -264,24 +264,17 @@ function UIView(props: {
         width: '100%',
         height: '100%',
         margin: '0px',
-        // padding:'0px',
         padding: (
-          rotationVal === null || rotationVal === undefined || restrictPaddingOnRotation
-          ? '0px'
-          : (
-            boxShadowVal === null || boxShadowVal === undefined
-            ? (
-              rotationVal === '' || rotationVal === '0deg'
-              ? '0px'
-              : `calc(min(50%, ${Math.min(50, Math.abs(rotationVal.replace('deg', '')) / 90) * 100}%)) 0px`
-            )
-            : (
-              (rotationVal === '' || rotationVal === '0deg') && (boxShadowVal === '' || boxShadowVal === '0px')
-              ? '0px'
-              : `calc(min(50%, ${Math.min(50, Math.abs(rotationVal.replace('deg', '')) / 90) * 100}%)) 0px`
-            )
-          )
-        )
+          (rotationVal === null || rotationVal === undefined || restrictPaddingOnRotation) &&
+          (boxShadowVal === null || boxShadowVal === undefined || boxShadowVal === '0px')
+        ) ? '0px' // Both rotation and box-shadow are empty or restricted
+          : rotationVal !== '' && rotationVal !== '0deg' // Rotation applied
+            ? (boxShadowVal !== '' && boxShadowVal !== '0px') // Both rotation and box-shadow applied
+              ? `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '') + parseFloat(boxShadowVal.replace('px', ''))) / 90} * 100%)) 0px`
+            : `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '')) / 90} * 100%)) 0px` // Only rotation applied
+          : boxShadowVal !== '' && boxShadowVal !== '0px' // Box-shadow applied
+          ? `calc(min(50%, ${Math.abs(parseFloat(boxShadowVal.replace('px', ''))) / 90} * 100%)) 0px`
+          : '0px' // Default value if neither rotation nor box-shadow is applied
       }}
     >
       <HidableView hidden={childrenProps.hidden as boolean}>

From 1facfbc0a7f47e741d9deecbb20eddb15349f215 Mon Sep 17 00:00:00 2001
From: MeenamAfzal <meenamafzal1@gmail.com>
Date: Thu, 30 May 2024 23:41:59 +0500
Subject: [PATCH 12/19] condition updated

---
 .../packages/lowcoder/src/comps/generators/uiCompBuilder.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
index 74a0c2518..e98fced67 100644
--- a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
+++ b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
@@ -269,10 +269,10 @@ function UIView(props: {
           (boxShadowVal === null || boxShadowVal === undefined || boxShadowVal === '0px')
         ) ? '0px' // Both rotation and box-shadow are empty or restricted
           : rotationVal !== '' && rotationVal !== '0deg' // Rotation applied
-            ? (boxShadowVal !== '' && boxShadowVal !== '0px') // Both rotation and box-shadow applied
+            ? (boxShadowVal === null || boxShadowVal === undefined || boxShadowVal === '0px')?'0px':(boxShadowVal !== '' && boxShadowVal !== '0px') // Both rotation and box-shadow applied
               ? `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '') + parseFloat(boxShadowVal.replace('px', ''))) / 90} * 100%)) 0px`
             : `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '')) / 90} * 100%)) 0px` // Only rotation applied
-          : boxShadowVal !== '' && boxShadowVal !== '0px' // Box-shadow applied
+          : (boxShadowVal === null || boxShadowVal === undefined || boxShadowVal === '0px')?'0px':(boxShadowVal !== '' && boxShadowVal !== '0px') // Box-shadow applied
           ? `calc(min(50%, ${Math.abs(parseFloat(boxShadowVal.replace('px', ''))) / 90} * 100%)) 0px`
           : '0px' // Default value if neither rotation nor box-shadow is applied
       }}

From c7ed2c340776395c99a8010604e779ab25870c71 Mon Sep 17 00:00:00 2001
From: MeenamAfzal <meenamafzal1@gmail.com>
Date: Fri, 31 May 2024 19:24:06 +0500
Subject: [PATCH 13/19] condition updated

---
 client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
index e98fced67..45627e120 100644
--- a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
+++ b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
@@ -269,7 +269,7 @@ function UIView(props: {
           (boxShadowVal === null || boxShadowVal === undefined || boxShadowVal === '0px')
         ) ? '0px' // Both rotation and box-shadow are empty or restricted
           : rotationVal !== '' && rotationVal !== '0deg' // Rotation applied
-            ? (boxShadowVal === null || boxShadowVal === undefined || boxShadowVal === '0px')?'0px':(boxShadowVal !== '' && boxShadowVal !== '0px') // Both rotation and box-shadow applied
+            ? (boxShadowVal === null || boxShadowVal === undefined || boxShadowVal === '0px')?`calc(min(50%, ${Math.abs(rotationVal.replace('deg', '')) / 90} * 100%)) 0px`:(boxShadowVal !== '' && boxShadowVal !== '0px') // Both rotation and box-shadow applied
               ? `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '') + parseFloat(boxShadowVal.replace('px', ''))) / 90} * 100%)) 0px`
             : `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '')) / 90} * 100%)) 0px` // Only rotation applied
           : (boxShadowVal === null || boxShadowVal === undefined || boxShadowVal === '0px')?'0px':(boxShadowVal !== '' && boxShadowVal !== '0px') // Box-shadow applied

From c984e21a77a73c9cf63c096442803fcb2d92fd64 Mon Sep 17 00:00:00 2001
From: MeenamAfzal <meenamafzal1@gmail.com>
Date: Fri, 31 May 2024 21:46:09 +0500
Subject: [PATCH 14/19] condition updated

---
 .../lowcoder/src/comps/comps/carouselComp.tsx |  4 +-
 .../src/comps/comps/fileViewerComp.tsx        |  3 +-
 .../lowcoder/src/comps/comps/imageComp.tsx    |  3 +-
 .../src/comps/comps/mediaComp/videoComp.tsx   |  4 +-
 .../comps/comps/meetingComp/controlButton.tsx |  2 +-
 .../lowcoder/src/comps/comps/qrCodeComp.tsx   |  2 +-
 .../src/comps/generators/uiCompBuilder.tsx    | 48 ++++++++++++++-----
 7 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/carouselComp.tsx b/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
index 7babdd5e6..2d6197fea 100644
--- a/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
@@ -11,7 +11,7 @@ import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConst
 import { PositionControl } from "comps/controls/dropdownControl";
 import { useRef, useState } from "react";
 import ReactResizeDetector from "react-resize-detector";
-import { ArrayStringControl } from "comps/controls/codeControl";
+import { ArrayStringControl, StringControl } from "comps/controls/codeControl";
 import { styleControl } from "comps/controls/styleControl";
 import { AnimationStyle, AnimationStyleType, CarouselStyle } from "comps/controls/styleControlConstants";
 
@@ -47,7 +47,7 @@ let CarouselBasicComp = (function () {
     dotPosition: withDefault(PositionControl, "bottom"),
     style: styleControl(CarouselStyle),
     animationStyle: styleControl(AnimationStyle),
-    restrictPaddingOnRotation:withDefault(BoolControl, true),
+    restrictPaddingOnRotation:withDefault(StringControl, 'imageCarousel'),
     ...formDataChildren,
   };
   return new UICompBuilder(childrenMap, (props) => {
diff --git a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
index 03fbc7417..b9f4d705e 100644
--- a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
@@ -13,7 +13,6 @@ import { trans } from "i18n";
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
-import { BoolControl } from "../controls/boolControl";
 
 const getStyle = (style: FileViewerStyleType) => {
   return css`
@@ -71,7 +70,7 @@ let FileViewerBasicComp = (function () {
     src: StringControl,
     style: styleControl(FileViewerStyle),
     animationStyle: styleControl(AnimationStyle),
-    restrictPaddingOnRotation: withDefault(BoolControl, true),
+    restrictPaddingOnRotation: withDefault(StringControl, 'fileViewer'),
   };
   return new UICompBuilder(childrenMap, (props) => {
     if (isEmpty(props.src)) {
diff --git a/client/packages/lowcoder/src/comps/comps/imageComp.tsx b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
index fbb261f0e..fa42c1a30 100644
--- a/client/packages/lowcoder/src/comps/comps/imageComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
@@ -33,6 +33,7 @@ import { DEFAULT_IMG_URL } from "util/stringUtils";
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
+import { StringControl } from "../controls/codeControl";
 
 const Container = styled.div<{ $style: ImageStyleType | undefined,$animationStyle:AnimationStyleType }>`
   height: 100%;
@@ -169,7 +170,7 @@ const childrenMap = {
   animationStyle: styleControl(AnimationStyle),
   autoHeight: withDefault(AutoHeightControl, "fixed"),
   supportPreview: BoolControl,
-  restrictPaddingOnRotation:withDefault(BoolControl, true)
+  restrictPaddingOnRotation:withDefault(StringControl, 'image')
 };
 
 let ImageBasicComp = new UICompBuilder(childrenMap, (props) => {
diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
index 90872f76a..860abea22 100644
--- a/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
@@ -10,7 +10,7 @@ import { AnimationStyle, AnimationStyleType, AudioStyle, ImageStyle, ImageStyleT
 import { BoolControl } from "comps/controls/boolControl";
 import { withDefault } from "../../generators/simpleGenerators";
 import { playIcon } from "lowcoder-design";
-import { RangeControl } from "../../controls/codeControl";
+import { RangeControl, StringControl } from "../../controls/codeControl";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { Video } from "lowcoder-design";
@@ -120,7 +120,7 @@ const childrenMap = {
   playbackRate: RangeControl.closed(1, 2, 1),
   currentTimeStamp: numberExposingStateControl("currentTimeStamp", 0),
   duration: numberExposingStateControl("duration"),
-  restrictPaddingOnRotation:withDefault(BoolControl, true),
+  restrictPaddingOnRotation:withDefault(StringControl, 'video'),
   ...mediaCommonChildren,
 };
  
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
index 44561e4b6..07a3ab216 100644
--- a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
+++ b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
@@ -187,7 +187,7 @@ const childrenMap = {
   prefixIcon: IconControl,
   style: ButtonStyleControl,
   viewRef: RefControl<HTMLElement>,
-  restrictPaddingOnRotation:withDefault(BoolControl, true)
+  restrictPaddingOnRotation:withDefault(StringControl, 'controlButton')
 };
 
 let ButtonTmpComp = (function () {
diff --git a/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx b/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx
index fe48bce57..710f91674 100644
--- a/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx
@@ -33,7 +33,7 @@ const childrenMap = {
   image: StringControl,
   style: styleControl(QRCodeStyle),
   animationStyle: styleControl(AnimationStyle),
-  restrictPaddingOnRotation: withDefault(BoolControl, true),
+  restrictPaddingOnRotation: withDefault(StringControl, 'qrCode'),
 };
 
 const QRCodeView = (props: RecordConstructorToView<typeof childrenMap>) => {
diff --git a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
index 45627e120..b029c769d 100644
--- a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
+++ b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
@@ -251,9 +251,11 @@ function UIView(props: {
   const restrictPaddingOnRotation = defaultChildren.hasOwnProperty('restrictPaddingOnRotation');
   let rotationVal = null
   let boxShadowVal = null;
+  let restrictPaddingOnRotationVal=null;
   if (isNotContainer) {
     rotationVal = defaultChildren.style.children?.rotation?.valueAndMsg.value;
     boxShadowVal = defaultChildren.style?.children?.boxShadow?.valueAndMsg?.value;
+    restrictPaddingOnRotationVal = defaultChildren?.restrictPaddingOnRotation?.valueAndMsg?.value;
   }
   return (
     <div
@@ -264,17 +266,41 @@ function UIView(props: {
         width: '100%',
         height: '100%',
         margin: '0px',
-        padding: (
-          (rotationVal === null || rotationVal === undefined || restrictPaddingOnRotation) &&
-          (boxShadowVal === null || boxShadowVal === undefined || boxShadowVal === '0px')
-        ) ? '0px' // Both rotation and box-shadow are empty or restricted
-          : rotationVal !== '' && rotationVal !== '0deg' // Rotation applied
-            ? (boxShadowVal === null || boxShadowVal === undefined || boxShadowVal === '0px')?`calc(min(50%, ${Math.abs(rotationVal.replace('deg', '')) / 90} * 100%)) 0px`:(boxShadowVal !== '' && boxShadowVal !== '0px') // Both rotation and box-shadow applied
-              ? `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '') + parseFloat(boxShadowVal.replace('px', ''))) / 90} * 100%)) 0px`
-            : `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '')) / 90} * 100%)) 0px` // Only rotation applied
-          : (boxShadowVal === null || boxShadowVal === undefined || boxShadowVal === '0px')?'0px':(boxShadowVal !== '' && boxShadowVal !== '0px') // Box-shadow applied
-          ? `calc(min(50%, ${Math.abs(parseFloat(boxShadowVal.replace('px', ''))) / 90} * 100%)) 0px`
-          : '0px' // Default value if neither rotation nor box-shadow is applied
+        padding:
+          (rotationVal === null ||
+            rotationVal === undefined ||
+            restrictPaddingOnRotation) &&
+          (boxShadowVal === null ||
+            boxShadowVal === undefined ||
+            boxShadowVal === '0px')
+            ? restrictPaddingOnRotationVal === 'qrCode'
+              ? '50% 0px'
+              : restrictPaddingOnRotationVal === 'image'
+                ? '10% 0px'
+                : restrictPaddingOnRotationVal === 'imageCarousel'
+                  ? '35% 0px'
+                  : restrictPaddingOnRotationVal === 'fileViewer'
+                    ? '65% 0px'
+                    : restrictPaddingOnRotationVal === 'controlButton'
+                      ? '50% 0px'
+                      : restrictPaddingOnRotationVal === 'video'
+                        ? '26% 0px'
+                        : '0px' // Both rotation and box-shadow are empty or restricted
+            : rotationVal !== '' && rotationVal !== '0deg' // Rotation applied
+              ? boxShadowVal === null ||
+                boxShadowVal === undefined ||
+                boxShadowVal === '0px'
+                ? `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '')) / 90} * 100%)) 0px`
+                : boxShadowVal !== '' && boxShadowVal !== '0px' // Both rotation and box-shadow applied
+                  ? `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '') + parseFloat(boxShadowVal.replace('px', ''))) / 90} * 100%)) 0px`
+                  : `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '')) / 90} * 100%)) 0px` // Only rotation applied
+              : boxShadowVal === null ||
+                  boxShadowVal === undefined ||
+                  boxShadowVal === '0px'
+                ? '0px'
+                : boxShadowVal !== '' && boxShadowVal !== '0px' // Box-shadow applied
+                  ? `calc(min(50%, ${Math.abs(parseFloat(boxShadowVal.replace('px', ''))) / 90} * 100%)) 0px`
+                  : '0px', // Default value if neither rotation nor box-shadow is applied
       }}
     >
       <HidableView hidden={childrenProps.hidden as boolean}>

From af215e7ecfa9d16ea00bd256d98cad01144bef6e Mon Sep 17 00:00:00 2001
From: MeenamAfzal <meenamafzal1@gmail.com>
Date: Sat, 1 Jun 2024 01:33:16 +0500
Subject: [PATCH 15/19] padding on rotation

---
 .../lowcoder/src/comps/generators/uiCompBuilder.tsx  | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
index b029c769d..86cb9c938 100644
--- a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
+++ b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
@@ -274,17 +274,17 @@ function UIView(props: {
             boxShadowVal === undefined ||
             boxShadowVal === '0px')
             ? restrictPaddingOnRotationVal === 'qrCode'
-              ? '50% 0px'
+              ? rotationVal !== '' && rotationVal !== '0deg'?'50% 0px':'0px'
               : restrictPaddingOnRotationVal === 'image'
-                ? '10% 0px'
+                ? rotationVal !== '' && rotationVal !== '0deg'?'10% 0px':'0px'
                 : restrictPaddingOnRotationVal === 'imageCarousel'
-                  ? '35% 0px'
+                  ? rotationVal !== '' && rotationVal !== '0deg'?'35% 0px':'0px'
                   : restrictPaddingOnRotationVal === 'fileViewer'
-                    ? '65% 0px'
+                    ? rotationVal !== '' && rotationVal !== '0deg'?'65% 0px':'0px'
                     : restrictPaddingOnRotationVal === 'controlButton'
-                      ? '50% 0px'
+                      ? rotationVal !== '' && rotationVal !== '0deg'?'50% 0px':'0px'
                       : restrictPaddingOnRotationVal === 'video'
-                        ? '26% 0px'
+                        ? rotationVal !== '' && rotationVal !== '0deg'?'26% 0px':'0px'
                         : '0px' // Both rotation and box-shadow are empty or restricted
             : rotationVal !== '' && rotationVal !== '0deg' // Rotation applied
               ? boxShadowVal === null ||

From 380b47e0e8264e99f8752b580bf1c0c541627fe6 Mon Sep 17 00:00:00 2001
From: MeenamAfzal <meenamafzal1@gmail.com>
Date: Sat, 1 Jun 2024 01:41:25 +0500
Subject: [PATCH 16/19] padding updated

---
 client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
index 86cb9c938..644ace5e8 100644
--- a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
+++ b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
@@ -282,7 +282,7 @@ function UIView(props: {
                   : restrictPaddingOnRotationVal === 'fileViewer'
                     ? rotationVal !== '' && rotationVal !== '0deg'?'65% 0px':'0px'
                     : restrictPaddingOnRotationVal === 'controlButton'
-                      ? rotationVal !== '' && rotationVal !== '0deg'?'50% 0px':'0px'
+                      ? rotationVal !== '' && rotationVal !== '0deg'?'10% 0px':'0px'
                       : restrictPaddingOnRotationVal === 'video'
                         ? rotationVal !== '' && rotationVal !== '0deg'?'26% 0px':'0px'
                         : '0px' // Both rotation and box-shadow are empty or restricted

From 3d0daee2189fdec0a714e50b6775a42312b99d24 Mon Sep 17 00:00:00 2001
From: MeenamAfzal <meenamafzal1@gmail.com>
Date: Sat, 1 Jun 2024 01:46:44 +0500
Subject: [PATCH 17/19] function created

---
 .../src/comps/generators/uiCompBuilder.tsx    | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
index 644ace5e8..8f14ff955 100644
--- a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
+++ b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
@@ -257,17 +257,7 @@ function UIView(props: {
     boxShadowVal = defaultChildren.style?.children?.boxShadow?.valueAndMsg?.value;
     restrictPaddingOnRotationVal = defaultChildren?.restrictPaddingOnRotation?.valueAndMsg?.value;
   }
-  return (
-    <div
-      ref={props.innerRef}
-      className={childrenProps.className as string}
-      data-testid={childrenProps.dataTestId as string}
-      style={{
-        width: '100%',
-        height: '100%',
-        margin: '0px',
-        padding:
-          (rotationVal === null ||
+  const getPadding = () =>(rotationVal === null ||
             rotationVal === undefined ||
             restrictPaddingOnRotation) &&
           (boxShadowVal === null ||
@@ -300,7 +290,18 @@ function UIView(props: {
                 ? '0px'
                 : boxShadowVal !== '' && boxShadowVal !== '0px' // Box-shadow applied
                   ? `calc(min(50%, ${Math.abs(parseFloat(boxShadowVal.replace('px', ''))) / 90} * 100%)) 0px`
-                  : '0px', // Default value if neither rotation nor box-shadow is applied
+                  : '0px' // Default value if neither rotation nor box-shadow is applied
+  return (
+    <div
+      ref={props.innerRef}
+      className={childrenProps.className as string}
+      data-testid={childrenProps.dataTestId as string}
+      style={{
+        width: '100%',
+        height: '100%',
+        margin: '0px',
+        padding:getPadding()
+          
       }}
     >
       <HidableView hidden={childrenProps.hidden as boolean}>

From 15b4b8430e6038bfe00edc6ceecc1087f02c9581 Mon Sep 17 00:00:00 2001
From: MeenamAfzal <meenamafzal1@gmail.com>
Date: Sat, 1 Jun 2024 01:49:20 +0500
Subject: [PATCH 18/19] types added

---
 .../lowcoder/src/comps/generators/uiCompBuilder.tsx         | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
index 8f14ff955..cb033405a 100644
--- a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
+++ b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
@@ -249,9 +249,9 @@ function UIView(props: {
   let defaultChildren = comp.children;
   const isNotContainer = defaultChildren.hasOwnProperty('style');
   const restrictPaddingOnRotation = defaultChildren.hasOwnProperty('restrictPaddingOnRotation');
-  let rotationVal = null
-  let boxShadowVal = null;
-  let restrictPaddingOnRotationVal=null;
+  let rotationVal:any = null
+  let boxShadowVal:any = null;
+  let restrictPaddingOnRotationVal:any=null;
   if (isNotContainer) {
     rotationVal = defaultChildren.style.children?.rotation?.valueAndMsg.value;
     boxShadowVal = defaultChildren.style?.children?.boxShadow?.valueAndMsg?.value;

From f1ef6f5d1fc1fed53daa99eec69c4a4ce0fd2fe7 Mon Sep 17 00:00:00 2001
From: MeenamAfzal <meenamafzal1@gmail.com>
Date: Sat, 1 Jun 2024 02:40:08 +0500
Subject: [PATCH 19/19] padding updated

---
 client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
index cb033405a..9e3d55bec 100644
--- a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
+++ b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
@@ -264,7 +264,7 @@ function UIView(props: {
             boxShadowVal === undefined ||
             boxShadowVal === '0px')
             ? restrictPaddingOnRotationVal === 'qrCode'
-              ? rotationVal !== '' && rotationVal !== '0deg'?'50% 0px':'0px'
+              ? rotationVal !== '' && rotationVal !== '0deg'?'35% 0px':'0px'
               : restrictPaddingOnRotationVal === 'image'
                 ? rotationVal !== '' && rotationVal !== '0deg'?'10% 0px':'0px'
                 : restrictPaddingOnRotationVal === 'imageCarousel'