From 3fddd6eb16be205339db3e19543775dc576804c6 Mon Sep 17 00:00:00 2001
From: oleojake <oleojake@gmail.com>
Date: Mon, 23 Dec 2024 11:12:30 +0100
Subject: [PATCH 1/6] #585 define disabled property

---
 .../front-components/shape.const.ts             | 17 +++++++++++++++++
 .../components/shapes/use-shape-props.hook.ts   |  6 ++++++
 src/core/model/index.ts                         |  1 +
 3 files changed, 24 insertions(+)

diff --git a/src/common/components/mock-components/front-components/shape.const.ts b/src/common/components/mock-components/front-components/shape.const.ts
index 63656560..163d2222 100644
--- a/src/common/components/mock-components/front-components/shape.const.ts
+++ b/src/common/components/mock-components/front-components/shape.const.ts
@@ -16,6 +16,7 @@ const DEFAULT_FONT_VARIANT = 'normal';
 const DEFAULT_FONT_STYLE = 'normal';
 const DEFAULT_TEXT_DECORATION = 'none';
 const DEFAULT_TEXT_ALIGNMENT = 'left';
+const DEFAULT_DISABLED = false;
 
 export interface DefaultStyleShape {
   DEFAULT_CORNER_RADIUS: number;
@@ -34,6 +35,7 @@ export interface DefaultStyleShape {
   DEFAULT_FONT_STYLE: string;
   DEFAULT_TEXT_DECORATION: string;
   DEFAULT_TEXT_ALIGNMENT: 'left' | 'center' | 'right';
+  DEFAULT_DISABLED: boolean;
 }
 
 export const BASIC_SHAPE: DefaultStyleShape = {
@@ -53,6 +55,7 @@ export const BASIC_SHAPE: DefaultStyleShape = {
   DEFAULT_FONT_STYLE,
   DEFAULT_TEXT_DECORATION,
   DEFAULT_TEXT_ALIGNMENT,
+  DEFAULT_DISABLED,
 };
 
 export const INPUT_SHAPE: DefaultStyleShape = {
@@ -72,6 +75,7 @@ export const INPUT_SHAPE: DefaultStyleShape = {
   DEFAULT_FONT_STYLE,
   DEFAULT_TEXT_DECORATION,
   DEFAULT_TEXT_ALIGNMENT,
+  DEFAULT_DISABLED,
 };
 
 //! maybe a function to calc max height base on the text
@@ -92,6 +96,7 @@ export const POSTIT_SHAPE: DefaultStyleShape = {
   DEFAULT_FONT_STYLE,
   DEFAULT_TEXT_DECORATION,
   DEFAULT_TEXT_ALIGNMENT,
+  DEFAULT_DISABLED,
 };
 
 interface FontValues {
@@ -114,6 +119,18 @@ export const FONT_SIZE_VALUES: FontValues = {
   LINK: 20,
 };
 
+interface DisabledValues {
+  DEFAULT_STROKE_COLOR: string;
+  DEFAULT_BACKGROUND_COLOR: string;
+  DEFAULT_TEXT_COLOR: string;
+}
+
+export const DISABLED_COLOR_VALUES: DisabledValues = {
+  DEFAULT_STROKE_COLOR: '#D9D9D9',
+  DEFAULT_BACKGROUND_COLOR: '#F5F5F5',
+  DEFAULT_TEXT_COLOR: '#B0B0B0',
+};
+
 export const LINK_SHAPE: DefaultStyleShape = {
   ...BASIC_SHAPE,
   DEFAULT_FILL_TEXT: '#0000FF',
diff --git a/src/common/components/shapes/use-shape-props.hook.ts b/src/common/components/shapes/use-shape-props.hook.ts
index f3d79f85..7ff7d990 100644
--- a/src/common/components/shapes/use-shape-props.hook.ts
+++ b/src/common/components/shapes/use-shape-props.hook.ts
@@ -73,6 +73,11 @@ export const useShapeProps = (
     [otherProps?.selectedBackgroundColor]
   );
 
+  const disabled = useMemo(
+    () => otherProps?.disabled ?? defaultStyleShape.DEFAULT_DISABLED,
+    [otherProps?.disabled]
+  );
+
   return {
     stroke,
     fill,
@@ -87,5 +92,6 @@ export const useShapeProps = (
     fontSize,
     textDecoration,
     textAlignment,
+    disabled,
   };
 };
diff --git a/src/core/model/index.ts b/src/core/model/index.ts
index c4580e2c..97a63845 100644
--- a/src/core/model/index.ts
+++ b/src/core/model/index.ts
@@ -175,6 +175,7 @@ export interface OtherProps {
   activeElement?: number;
   selectedBackgroundColor?: string;
   textAlignment?: 'left' | 'center' | 'right';
+  disabled?: boolean;
 }
 
 export const BASE_ICONS_URL = '/icons/';

From 50654f91313a6c242bb690e5a9ee118e0100bca6 Mon Sep 17 00:00:00 2001
From: oleojake <oleojake@gmail.com>
Date: Mon, 23 Dec 2024 11:13:22 +0100
Subject: [PATCH 2/6] #585 create disabled option on rigth panel

---
 .../disabled-selector.component.module.css    | 17 ++++++++++++++
 .../disabled/disabled-selector.component.tsx  | 23 +++++++++++++++++++
 .../properties/components/disabled/index.ts   |  1 +
 src/pods/properties/components/index.ts       |  1 +
 src/pods/properties/properties.pod.tsx        | 20 +++++++++++++++-
 5 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 src/pods/properties/components/disabled/disabled-selector.component.module.css
 create mode 100644 src/pods/properties/components/disabled/disabled-selector.component.tsx
 create mode 100644 src/pods/properties/components/disabled/index.ts

diff --git a/src/pods/properties/components/disabled/disabled-selector.component.module.css b/src/pods/properties/components/disabled/disabled-selector.component.module.css
new file mode 100644
index 00000000..7982c5e5
--- /dev/null
+++ b/src/pods/properties/components/disabled/disabled-selector.component.module.css
@@ -0,0 +1,17 @@
+.container {
+  display: flex;
+  gap: 0.5em;
+  align-items: center;
+  padding: var(--space-xs) var(--space-md);
+  border-bottom: 1px solid var(--primary-300);
+}
+
+.container :first-child {
+  flex: 1;
+}
+
+.checkbox {
+  width: var(--space-md);
+  height: var(--space-md);
+  cursor: pointer;
+}
diff --git a/src/pods/properties/components/disabled/disabled-selector.component.tsx b/src/pods/properties/components/disabled/disabled-selector.component.tsx
new file mode 100644
index 00000000..0ec2c2b2
--- /dev/null
+++ b/src/pods/properties/components/disabled/disabled-selector.component.tsx
@@ -0,0 +1,23 @@
+import classes from './disabled-selector.component.module.css';
+
+interface Props {
+  label: string;
+  disabled: boolean;
+  onChange: (disabled: boolean) => void;
+}
+
+export const Disabled: React.FC<Props> = props => {
+  const { label, disabled, onChange } = props;
+
+  return (
+    <div className={classes.container}>
+      <p>{label}</p>
+      <input
+        type="checkbox"
+        checked={disabled}
+        onChange={() => onChange(!disabled)}
+        className={classes.checkbox}
+      />
+    </div>
+  );
+};
diff --git a/src/pods/properties/components/disabled/index.ts b/src/pods/properties/components/disabled/index.ts
new file mode 100644
index 00000000..449a424a
--- /dev/null
+++ b/src/pods/properties/components/disabled/index.ts
@@ -0,0 +1 @@
+export * from './disabled-selector.component';
diff --git a/src/pods/properties/components/index.ts b/src/pods/properties/components/index.ts
index 5f822f0e..19fe8681 100644
--- a/src/pods/properties/components/index.ts
+++ b/src/pods/properties/components/index.ts
@@ -4,3 +4,4 @@ export * from './color-picker';
 export * from './icon-selector';
 export * from './progress';
 export * from './border-radius';
+export * from './disabled';
diff --git a/src/pods/properties/properties.pod.tsx b/src/pods/properties/properties.pod.tsx
index 43b719a9..e8549d23 100644
--- a/src/pods/properties/properties.pod.tsx
+++ b/src/pods/properties/properties.pod.tsx
@@ -3,7 +3,7 @@ import classes from './properties.pod.module.css';
 import { ZIndexOptions } from './components/zindex/zindex-option.component';
 import { ColorPicker } from './components/color-picker/color-picker.component';
 import { Checked } from './components/checked/checked.component';
-import { SelectSize, SelectIcon, BorderRadius } from './components';
+import { SelectSize, SelectIcon, BorderRadius, Disabled } from './components';
 import { StrokeStyle } from './components/stroke-style/stroke.style.component';
 import { ImageSrc } from './components/image-src/image-selector.component';
 import { ImageBlackAndWhite } from './components/image-black-and-white/image-black-and-white-selector.component';
@@ -224,6 +224,24 @@ export const PropertiesPod = () => {
             }
           />
         </ShowProp>
+        <ShowProp
+          singleSelection={isSingleSelection}
+          multipleSelectionPropsInCommon={multipleSelectionPropsInCommon}
+          propKey="disabled"
+          propValue={selectedShapeData?.otherProps?.disabled}
+        >
+          <Disabled
+            label="Disabled"
+            disabled={selectedShapeData?.otherProps?.disabled ?? false}
+            onChange={Disabled =>
+              updateOtherPropsOnSelected(
+                'disabled',
+                Disabled,
+                isMultipleSelection
+              )
+            }
+          />
+        </ShowProp>
         <ShowProp
           singleSelection={isSingleSelection}
           multipleSelectionPropsInCommon={multipleSelectionPropsInCommon}

From d05da12e3ff717815ea874be181d40e323a5a17c Mon Sep 17 00:00:00 2001
From: oleojake <oleojake@gmail.com>
Date: Mon, 23 Dec 2024 11:14:00 +0100
Subject: [PATCH 3/6] #585 add disabled property to proper components

---
 src/pods/canvas/model/shape-other-props.utils.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/pods/canvas/model/shape-other-props.utils.ts b/src/pods/canvas/model/shape-other-props.utils.ts
index 62f09261..838463ff 100644
--- a/src/pods/canvas/model/shape-other-props.utils.ts
+++ b/src/pods/canvas/model/shape-other-props.utils.ts
@@ -17,6 +17,7 @@ export const generateDefaultOtherProps = (
         textColor: INPUT_SHAPE.DEFAULT_FILL_TEXT,
         strokeStyle: [],
         borderRadius: `${INPUT_SHAPE.DEFAULT_CORNER_RADIUS}`,
+        disabled: INPUT_SHAPE.DEFAULT_DISABLED,
       };
     case 'tooltip':
       return {
@@ -33,6 +34,7 @@ export const generateDefaultOtherProps = (
         textColor: BASIC_SHAPE.DEFAULT_FILL_TEXT,
         strokeStyle: [],
         borderRadius: `${BASIC_SHAPE.DEFAULT_CORNER_RADIUS}`,
+        disabled: BASIC_SHAPE.DEFAULT_DISABLED,
       };
     case 'vertical-menu':
     case 'horizontal-menu':
@@ -52,6 +54,7 @@ export const generateDefaultOtherProps = (
         textColor: BASIC_SHAPE.DEFAULT_FILL_TEXT,
         strokeStyle: [],
         borderRadius: `${INPUT_SHAPE.DEFAULT_CORNER_RADIUS}`,
+        disabled: BASIC_SHAPE.DEFAULT_DISABLED,
       };
     case 'combobox':
       return {
@@ -60,6 +63,7 @@ export const generateDefaultOtherProps = (
         textColor: BASIC_SHAPE.DEFAULT_FILL_TEXT,
         strokeStyle: [],
         borderRadius: `${INPUT_SHAPE.DEFAULT_CORNER_RADIUS}`,
+        disabled: BASIC_SHAPE.DEFAULT_DISABLED,
       };
     case 'modal':
     case 'buttonBar':
@@ -190,6 +194,7 @@ export const generateDefaultOtherProps = (
       return {
         checked: true,
         textColor: '#000000',
+        disabled: BASIC_SHAPE.DEFAULT_DISABLED,
       };
 
     case 'appBar':

From 5c8064eb1f7eb49e40c9ca8cf33c4c0df5dd3eba Mon Sep 17 00:00:00 2001
From: oleojake <oleojake@gmail.com>
Date: Mon, 23 Dec 2024 11:14:50 +0100
Subject: [PATCH 4/6] #585 define components behavior when disabled

---
 .../front-components/button-shape.tsx         | 13 +++++------
 .../front-components/checkbox-shape.tsx       | 22 ++++++++++++++-----
 .../front-components/combobox-shape.tsx       | 16 ++++++--------
 .../datepickerinput-shape.tsx                 | 16 +++++++++-----
 .../front-components/input-shape.tsx          | 14 +++++-------
 .../front-components/radiobutton-shape.tsx    | 20 ++++++++++++-----
 .../front-components/textarea-shape.tsx       | 14 +++++-------
 .../timepickerinput/timepickerinput-shape.tsx | 19 +++++++++-------
 8 files changed, 77 insertions(+), 57 deletions(-)

diff --git a/src/common/components/mock-components/front-components/button-shape.tsx b/src/common/components/mock-components/front-components/button-shape.tsx
index 2b53430b..9c04b2f1 100644
--- a/src/common/components/mock-components/front-components/button-shape.tsx
+++ b/src/common/components/mock-components/front-components/button-shape.tsx
@@ -6,6 +6,7 @@ import { Group, Rect, Text } from 'react-konva';
 import { BASIC_SHAPE } from './shape.const';
 import { useShapeProps } from '../../shapes/use-shape-props.hook';
 import { useGroupShapeProps } from '../mock-components.utils';
+import { DISABLED_COLOR_VALUES } from '@/common/components/mock-components/front-components/shape.const';
 
 const buttonShapeRestrictions: ShapeSizeRestrictions = {
   minWidth: 50,
@@ -41,10 +42,8 @@ export const ButtonShape = forwardRef<any, ShapeProps>((props, ref) => {
 
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { stroke, strokeStyle, fill, textColor, borderRadius } = useShapeProps(
-    otherProps,
-    BASIC_SHAPE
-  );
+  const { stroke, strokeStyle, fill, textColor, borderRadius, disabled } =
+    useShapeProps(otherProps, BASIC_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -61,10 +60,10 @@ export const ButtonShape = forwardRef<any, ShapeProps>((props, ref) => {
         width={restrictedWidth}
         height={restrictedHeight}
         cornerRadius={borderRadius}
-        stroke={stroke}
+        stroke={disabled ? DISABLED_COLOR_VALUES.DEFAULT_STROKE_COLOR : stroke}
         dash={strokeStyle}
         strokeWidth={1.5}
-        fill={fill}
+        fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_BACKGROUND_COLOR : fill}
       />
       <Text
         x={0}
@@ -75,7 +74,7 @@ export const ButtonShape = forwardRef<any, ShapeProps>((props, ref) => {
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={15}
         lineHeight={1.25}
-        fill={textColor}
+        fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR : textColor}
         align="center"
         ellipsis={true}
         wrap="none"
diff --git a/src/common/components/mock-components/front-components/checkbox-shape.tsx b/src/common/components/mock-components/front-components/checkbox-shape.tsx
index 468a65a1..7619f00d 100644
--- a/src/common/components/mock-components/front-components/checkbox-shape.tsx
+++ b/src/common/components/mock-components/front-components/checkbox-shape.tsx
@@ -4,7 +4,7 @@ import { ShapeProps } from '../shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { Group, Rect, Line, Text } from 'react-konva';
 import { useShapeProps } from '../../shapes/use-shape-props.hook';
-import { BASIC_SHAPE } from './shape.const';
+import { BASIC_SHAPE, DISABLED_COLOR_VALUES } from './shape.const';
 import { useGroupShapeProps } from '../mock-components.utils';
 
 const CHECKBOX_DEFAULT_HEIGHT = 20;
@@ -48,7 +48,7 @@ export const CheckBoxShape = forwardRef<any, ShapeProps>((props, ref) => {
 
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { isOn, textColor } = useShapeProps(otherProps, BASIC_SHAPE);
+  const { isOn, textColor, disabled } = useShapeProps(otherProps, BASIC_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -65,9 +65,15 @@ export const CheckBoxShape = forwardRef<any, ShapeProps>((props, ref) => {
         width={boxTickWidth}
         height={restrictedHeight}
         cornerRadius={BASIC_SHAPE.DEFAULT_CORNER_RADIUS}
-        stroke={BASIC_SHAPE.DEFAULT_STROKE_COLOR}
+        stroke={
+          disabled
+            ? DISABLED_COLOR_VALUES.DEFAULT_STROKE_COLOR
+            : BASIC_SHAPE.DEFAULT_STROKE_COLOR
+        }
         strokeWidth={BASIC_SHAPE.DEFAULT_STROKE_WIDTH}
-        fill="white"
+        fill={
+          disabled ? DISABLED_COLOR_VALUES.DEFAULT_BACKGROUND_COLOR : 'white'
+        }
       />
       {isOn && (
         <Line
@@ -81,7 +87,11 @@ export const CheckBoxShape = forwardRef<any, ShapeProps>((props, ref) => {
             tickWidth - marginTick,
             marginTick,
           ]}
-          stroke={BASIC_SHAPE.DEFAULT_STROKE_COLOR}
+          stroke={
+            disabled
+              ? DISABLED_COLOR_VALUES.DEFAULT_STROKE_COLOR
+              : BASIC_SHAPE.DEFAULT_STROKE_COLOR
+          }
           strokeWidth={BASIC_SHAPE.DEFAULT_STROKE_WIDTH}
           lineCap="round"
           lineJoin="round"
@@ -95,7 +105,7 @@ export const CheckBoxShape = forwardRef<any, ShapeProps>((props, ref) => {
         text={text}
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={15}
-        fill={textColor}
+        fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR : textColor}
         align="left"
         verticalAlign="middle"
         ellipsis={true}
diff --git a/src/common/components/mock-components/front-components/combobox-shape.tsx b/src/common/components/mock-components/front-components/combobox-shape.tsx
index eca50f46..83e8fa2e 100644
--- a/src/common/components/mock-components/front-components/combobox-shape.tsx
+++ b/src/common/components/mock-components/front-components/combobox-shape.tsx
@@ -4,7 +4,7 @@ import { ShapeProps } from '../shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { Group, Text, Rect, Line } from 'react-konva';
 import { useShapeProps } from '../../shapes/use-shape-props.hook';
-import { BASIC_SHAPE } from './shape.const';
+import { BASIC_SHAPE, DISABLED_COLOR_VALUES } from './shape.const';
 import { useGroupShapeProps } from '../mock-components.utils';
 
 const comboBoxShapeRestrictions: ShapeSizeRestrictions = {
@@ -40,10 +40,8 @@ export const ComboBoxShape = forwardRef<any, ShapeProps>((props, ref) => {
   );
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { stroke, strokeStyle, fill, textColor, borderRadius } = useShapeProps(
-    otherProps,
-    BASIC_SHAPE
-  );
+  const { stroke, strokeStyle, fill, textColor, borderRadius, disabled } =
+    useShapeProps(otherProps, BASIC_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -60,10 +58,10 @@ export const ComboBoxShape = forwardRef<any, ShapeProps>((props, ref) => {
         width={restrictedWidth}
         height={restrictedHeight}
         cornerRadius={borderRadius}
-        stroke={stroke}
+        stroke={disabled ? DISABLED_COLOR_VALUES.DEFAULT_STROKE_COLOR : stroke}
         dash={strokeStyle}
         strokeWidth={BASIC_SHAPE.DEFAULT_STROKE_WIDTH}
-        fill={fill}
+        fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_BACKGROUND_COLOR : fill}
       />
       <Text
         x={BASIC_SHAPE.DEFAULT_PADDING}
@@ -73,7 +71,7 @@ export const ComboBoxShape = forwardRef<any, ShapeProps>((props, ref) => {
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={15}
         lineHeight={BASIC_SHAPE.DEFAULT_LINE_HEIGHT}
-        fill={textColor}
+        fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR : textColor}
         align="left"
         ellipsis={true}
         wrap="none"
@@ -89,7 +87,7 @@ export const ComboBoxShape = forwardRef<any, ShapeProps>((props, ref) => {
           restrictedWidth - 15,
           0,
         ]}
-        fill="black"
+        fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR : 'black'}
         closed={true}
       />
     </Group>
diff --git a/src/common/components/mock-components/front-components/datepickerinput-shape.tsx b/src/common/components/mock-components/front-components/datepickerinput-shape.tsx
index 17d64b21..f35a37ad 100644
--- a/src/common/components/mock-components/front-components/datepickerinput-shape.tsx
+++ b/src/common/components/mock-components/front-components/datepickerinput-shape.tsx
@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import { ShapeProps } from '../shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { Group, Rect, Text, Image } from 'react-konva';
-import { INPUT_SHAPE } from './shape.const';
+import { DISABLED_COLOR_VALUES, INPUT_SHAPE } from './shape.const';
 import { useShapeProps } from '../../shapes/use-shape-props.hook';
 import { useGroupShapeProps } from '../mock-components.utils';
 
@@ -44,7 +44,7 @@ export const DatepickerInputShape = forwardRef<any, ShapeProps>(
 
     const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-    const { stroke, fill, textColor, strokeStyle, borderRadius } =
+    const { stroke, fill, textColor, strokeStyle, borderRadius, disabled } =
       useShapeProps(otherProps, INPUT_SHAPE);
 
     const commonGroupProps = useGroupShapeProps(
@@ -75,10 +75,14 @@ export const DatepickerInputShape = forwardRef<any, ShapeProps>(
           width={restrictedWidth}
           height={restrictedHeight}
           cornerRadius={borderRadius}
-          stroke={stroke}
+          stroke={
+            disabled ? DISABLED_COLOR_VALUES.DEFAULT_STROKE_COLOR : stroke
+          }
           dash={strokeStyle}
           strokeWidth={2}
-          fill={fill}
+          fill={
+            disabled ? DISABLED_COLOR_VALUES.DEFAULT_BACKGROUND_COLOR : fill
+          }
         />
         {/* Background of Date Label */}
         <Rect
@@ -95,14 +99,14 @@ export const DatepickerInputShape = forwardRef<any, ShapeProps>(
           x={13}
           y={-5}
           fontSize={labelFontSize}
-          fill={stroke}
+          fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR : stroke}
           align="center"
           color={stroke}
         />
         {/* Main Text */}
         <Text
           text={text}
-          fill={textColor}
+          fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR : textColor}
           x={10}
           y={(restrictedHeight - fontSize) / 2 + 2}
           width={availableWidth}
diff --git a/src/common/components/mock-components/front-components/input-shape.tsx b/src/common/components/mock-components/front-components/input-shape.tsx
index 959c66e8..47b5f31c 100644
--- a/src/common/components/mock-components/front-components/input-shape.tsx
+++ b/src/common/components/mock-components/front-components/input-shape.tsx
@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import { ShapeProps } from '../shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { Group, Rect, Text } from 'react-konva';
-import { INPUT_SHAPE } from './shape.const';
+import { DISABLED_COLOR_VALUES, INPUT_SHAPE } from './shape.const';
 import { useShapeProps } from '../../shapes/use-shape-props.hook';
 import { useGroupShapeProps } from '../mock-components.utils';
 
@@ -41,10 +41,8 @@ export const InputShape = forwardRef<any, ShapeProps>((props, ref) => {
 
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { stroke, fill, textColor, strokeStyle, borderRadius } = useShapeProps(
-    otherProps,
-    INPUT_SHAPE
-  );
+  const { stroke, fill, textColor, strokeStyle, borderRadius, disabled } =
+    useShapeProps(otherProps, INPUT_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -61,10 +59,10 @@ export const InputShape = forwardRef<any, ShapeProps>((props, ref) => {
         width={restrictedWidth}
         height={restrictedHeight}
         cornerRadius={borderRadius}
-        stroke={stroke}
+        stroke={disabled ? DISABLED_COLOR_VALUES.DEFAULT_STROKE_COLOR : stroke}
         dash={strokeStyle}
         strokeWidth={INPUT_SHAPE.DEFAULT_STROKE_WIDTH}
-        fill={fill}
+        fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_BACKGROUND_COLOR : fill}
       />
       <Text
         x={INPUT_SHAPE.DEFAULT_PADDING}
@@ -74,7 +72,7 @@ export const InputShape = forwardRef<any, ShapeProps>((props, ref) => {
         fontFamily={INPUT_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={INPUT_SHAPE.DEFAULT_FONT_SIZE}
         lineHeight={INPUT_SHAPE.DEFAULT_LINE_HEIGHT}
-        fill={textColor}
+        fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR : textColor}
         align="left"
         ellipsis={true}
         wrap="none"
diff --git a/src/common/components/mock-components/front-components/radiobutton-shape.tsx b/src/common/components/mock-components/front-components/radiobutton-shape.tsx
index 3ff27f7a..9c2ff8ad 100644
--- a/src/common/components/mock-components/front-components/radiobutton-shape.tsx
+++ b/src/common/components/mock-components/front-components/radiobutton-shape.tsx
@@ -4,7 +4,7 @@ import { Group, Circle, Text } from 'react-konva';
 import { ShapeProps } from '../shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { useShapeProps } from '../../shapes/use-shape-props.hook';
-import { BASIC_SHAPE } from './shape.const';
+import { BASIC_SHAPE, DISABLED_COLOR_VALUES } from './shape.const';
 import { useGroupShapeProps } from '../mock-components.utils';
 
 const RADIO_BUTTON_DEFAULT_HEIGHT = 18;
@@ -45,7 +45,7 @@ export const RadioButtonShape = forwardRef<any, ShapeProps>((props, ref) => {
 
   const radius = restrictedHeight / 2;
 
-  const { isOn, textColor } = useShapeProps(otherProps, BASIC_SHAPE);
+  const { isOn, textColor, disabled } = useShapeProps(otherProps, BASIC_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -61,7 +61,11 @@ export const RadioButtonShape = forwardRef<any, ShapeProps>((props, ref) => {
         x={radius}
         y={radius}
         radius={radius}
-        stroke={BASIC_SHAPE.DEFAULT_STROKE_COLOR}
+        stroke={
+          disabled
+            ? DISABLED_COLOR_VALUES.DEFAULT_STROKE_COLOR
+            : BASIC_SHAPE.DEFAULT_STROKE_COLOR
+        }
         strokeWidth={BASIC_SHAPE.DEFAULT_STROKE_WIDTH}
       />
 
@@ -70,7 +74,13 @@ export const RadioButtonShape = forwardRef<any, ShapeProps>((props, ref) => {
         x={radius}
         y={radius}
         radius={radius * 0.6}
-        fill={isOn ? 'black' : 'white'}
+        fill={
+          isOn
+            ? disabled
+              ? DISABLED_COLOR_VALUES.DEFAULT_STROKE_COLOR
+              : 'black'
+            : 'white'
+        }
       />
 
       {/* Text */}
@@ -82,7 +92,7 @@ export const RadioButtonShape = forwardRef<any, ShapeProps>((props, ref) => {
         height={restrictedHeight}
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={15}
-        fill={textColor}
+        fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR : textColor}
         align="left"
         verticalAlign="middle"
         ellipsis={true}
diff --git a/src/common/components/mock-components/front-components/textarea-shape.tsx b/src/common/components/mock-components/front-components/textarea-shape.tsx
index 60ee95c9..eca8beb0 100644
--- a/src/common/components/mock-components/front-components/textarea-shape.tsx
+++ b/src/common/components/mock-components/front-components/textarea-shape.tsx
@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import { ShapeProps } from '../shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { Group, Rect, Text } from 'react-konva';
-import { BASIC_SHAPE } from './shape.const';
+import { BASIC_SHAPE, DISABLED_COLOR_VALUES } from './shape.const';
 import { useShapeProps } from '../../shapes/use-shape-props.hook';
 import { useGroupShapeProps } from '../mock-components.utils';
 
@@ -40,10 +40,8 @@ export const TextAreaShape = forwardRef<any, ShapeProps>((props, ref) => {
   );
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { stroke, strokeStyle, fill, textColor, borderRadius } = useShapeProps(
-    otherProps,
-    BASIC_SHAPE
-  );
+  const { stroke, strokeStyle, fill, textColor, borderRadius, disabled } =
+    useShapeProps(otherProps, BASIC_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -60,9 +58,9 @@ export const TextAreaShape = forwardRef<any, ShapeProps>((props, ref) => {
         width={restrictedWidth}
         height={restrictedHeight}
         cornerRadius={borderRadius}
-        stroke={stroke}
+        stroke={disabled ? DISABLED_COLOR_VALUES.DEFAULT_STROKE_COLOR : stroke}
         strokeWidth={2}
-        fill={fill}
+        fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_BACKGROUND_COLOR : fill}
         dash={strokeStyle}
       />
       <Text
@@ -73,7 +71,7 @@ export const TextAreaShape = forwardRef<any, ShapeProps>((props, ref) => {
         text={text}
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={15}
-        fill={textColor}
+        fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR : textColor}
         align="left"
         ellipsis={true}
       />
diff --git a/src/common/components/mock-components/front-components/timepickerinput/timepickerinput-shape.tsx b/src/common/components/mock-components/front-components/timepickerinput/timepickerinput-shape.tsx
index a0ec43c8..abe2cfce 100644
--- a/src/common/components/mock-components/front-components/timepickerinput/timepickerinput-shape.tsx
+++ b/src/common/components/mock-components/front-components/timepickerinput/timepickerinput-shape.tsx
@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import { ShapeProps } from '../../shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { Group, Rect, Text, Image } from 'react-konva';
-import { BASIC_SHAPE } from '../shape.const';
+import { BASIC_SHAPE, DISABLED_COLOR_VALUES } from '../shape.const';
 import { useShapeProps } from '../../../shapes/use-shape-props.hook';
 import { useGroupShapeProps } from '../../mock-components.utils';
 import { splitCSVContent, setTime } from './timepickerinput-shape.business';
@@ -45,10 +45,8 @@ export const TimepickerInputShape = forwardRef<any, ShapeProps>(
     );
     const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-    const { stroke, strokeStyle, fill, borderRadius } = useShapeProps(
-      otherProps,
-      BASIC_SHAPE
-    );
+    const { stroke, strokeStyle, fill, borderRadius, disabled, textColor } =
+      useShapeProps(otherProps, BASIC_SHAPE);
 
     const commonGroupProps = useGroupShapeProps(
       props,
@@ -81,10 +79,14 @@ export const TimepickerInputShape = forwardRef<any, ShapeProps>(
           width={restrictedWidth}
           height={restrictedHeight}
           cornerRadius={borderRadius}
-          stroke={stroke}
+          stroke={
+            disabled ? DISABLED_COLOR_VALUES.DEFAULT_STROKE_COLOR : stroke
+          }
           dash={strokeStyle}
           strokeWidth={BASIC_SHAPE.DEFAULT_STROKE_WIDTH}
-          fill={fill}
+          fill={
+            disabled ? DISABLED_COLOR_VALUES.DEFAULT_BACKGROUND_COLOR : fill
+          }
         />
         {/* Background of Time Label */}
         <Rect
@@ -103,7 +105,7 @@ export const TimepickerInputShape = forwardRef<any, ShapeProps>(
           y={-5}
           fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
           fontSize={BASIC_SHAPE.DEFAULT_FONT_SIZE - 4}
-          fill={stroke}
+          fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR : stroke}
           align="center"
           color={stroke}
         />
@@ -119,6 +121,7 @@ export const TimepickerInputShape = forwardRef<any, ShapeProps>(
           align="left"
           ellipsis={true}
           wrap="none"
+          fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR : textColor}
         />
         {/* Error Text */}
         {isError && (

From b06e7e7b152f3d943f4d637b95bf38953ef6dbb4 Mon Sep 17 00:00:00 2001
From: Braulio <braulio.diez@gmail.com>
Date: Wed, 25 Dec 2024 13:27:12 +0100
Subject: [PATCH 5/6] listbox disabled

---
 .../listbox/listbox-shape.tsx                 | 24 ++++++++++++++-----
 .../canvas/model/shape-other-props.utils.ts   |  1 +
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/common/components/mock-components/front-components/listbox/listbox-shape.tsx b/src/common/components/mock-components/front-components/listbox/listbox-shape.tsx
index 838234ae..9f5467d8 100644
--- a/src/common/components/mock-components/front-components/listbox/listbox-shape.tsx
+++ b/src/common/components/mock-components/front-components/listbox/listbox-shape.tsx
@@ -6,7 +6,7 @@ import {
   calculateDynamicContentSizeRestriction,
   mapListboxTextToItems,
 } from './listbox-shape.business';
-import { BASIC_SHAPE } from '../shape.const';
+import { BASIC_SHAPE, DISABLED_COLOR_VALUES } from '../shape.const';
 import { useShapeProps } from '../../../shapes/use-shape-props.hook';
 import { useGroupShapeProps } from '../../mock-components.utils';
 
@@ -76,6 +76,7 @@ export const ListBoxShape = forwardRef<any, ListBoxShapeProps>((props, ref) => {
     borderRadius,
     textColor,
     selectedBackgroundColor,
+    disabled,
   } = useShapeProps(otherProps, BASIC_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
@@ -85,6 +86,19 @@ export const ListBoxShape = forwardRef<any, ListBoxShapeProps>((props, ref) => {
     ref
   );
 
+  const calculateItemBackground = (index: number) => {
+    if (disabled) return DISABLED_COLOR_VALUES.DEFAULT_BACKGROUND_COLOR;
+
+    return selectedItem === index ? selectedBackgroundColor : fill;
+  };
+
+  const calculateItemStroke = (index: number) => {
+    if (disabled && selectedItem === index)
+      return DISABLED_COLOR_VALUES.DEFAULT_STROKE_COLOR;
+
+    return selectedItem === index ? selectedBackgroundColor : 'transparent';
+  };
+
   return (
     <Group {...commonGroupProps} {...shapeProps}>
       {/* Listbox Item rectanble */}
@@ -98,7 +112,7 @@ export const ListBoxShape = forwardRef<any, ListBoxShapeProps>((props, ref) => {
         stroke={stroke}
         strokeWidth={2}
         dash={strokeStyle}
-        fill={fill}
+        fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_BACKGROUND_COLOR : fill}
       />
 
       {/* Listbox Items */}
@@ -110,10 +124,8 @@ export const ListBoxShape = forwardRef<any, ListBoxShapeProps>((props, ref) => {
               y={0 + index * singleHeaderHeight}
               width={restrictedWidth}
               height={singleHeaderHeight}
-              fill={selectedItem === index ? selectedBackgroundColor : fill}
-              stroke={
-                selectedItem === index ? selectedBackgroundColor : 'transparent'
-              }
+              fill={calculateItemBackground(index)}
+              stroke={calculateItemStroke(index)}
               strokeWidth={selectedItem === index ? 1 : 0}
             />
             <Text
diff --git a/src/pods/canvas/model/shape-other-props.utils.ts b/src/pods/canvas/model/shape-other-props.utils.ts
index 838463ff..299492e0 100644
--- a/src/pods/canvas/model/shape-other-props.utils.ts
+++ b/src/pods/canvas/model/shape-other-props.utils.ts
@@ -94,6 +94,7 @@ export const generateDefaultOtherProps = (
         backgroundColor: '#ffffff',
         textColor: '#000000',
         selectedBackgroundColor: '#add8e6',
+        disabled: false,
       };
 
     case 'circle':

From 78d81afe1f3bb3cf08bbcdacae6eeb134a5f9cf8 Mon Sep 17 00:00:00 2001
From: Braulio <braulio.diez@gmail.com>
Date: Wed, 25 Dec 2024 13:31:53 +0100
Subject: [PATCH 6/6] added disabled to common properties

---
 src/pods/properties/properties.model.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pods/properties/properties.model.ts b/src/pods/properties/properties.model.ts
index ca1fce59..cd2686ef 100644
--- a/src/pods/properties/properties.model.ts
+++ b/src/pods/properties/properties.model.ts
@@ -18,6 +18,7 @@ export const multiSelectEnabledProperties: (keyof OtherProps)[] = [
   'borderRadius',
   'selectedBackgroundColor',
   'textAlignment',
+  'disabled',
 ];
 
 export type PropsValueTypes =