cambios esteticos input stepper

Author: reguer0

src/common/components/mock-components/front-rich-components/input-stepper.tsx

@@ -5,6 +5,8 @@ import { useGroupShapeProps } from '../mock-components.utils';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { ShapeType } from '@/core/model';
 import { ShapeProps } from '../shape.model';
+import { useShapeProps } from '../../shapes/use-shape-props.hook';
+import { INPUT_SHAPE } from '../front-components/shape.const';
 
 // Size restrictions (igual patrón que file-tree)
 export const inputStepperShapeRestrictions: ShapeSizeRestrictions = {
@@ -40,7 +42,10 @@ export const InputWithStepper = forwardRef<any, ShapeProps>((props, ref) => {
     shapeType,
     ref
   );
-
+  const { stroke, textColor, strokeStyle } = useShapeProps(
+    otherProps,
+    INPUT_SHAPE
+  );
   return (
     <Group {...commonGroupProps} {...shapeProps}>
       {/* Caja del input */}
@@ -49,8 +54,9 @@ export const InputWithStepper = forwardRef<any, ShapeProps>((props, ref) => {
         y={0}
         width={inputWidth / 2} // Reducir ancho a la mitad
         height={height}
+        strokeStyle={strokeStyle}
         fill="white"
-        stroke="black"
+        stroke={stroke}
         strokeWidth={2}
         cornerRadius={0} // Sin bordes redondeados
       />
@@ -62,6 +68,7 @@ export const InputWithStepper = forwardRef<any, ShapeProps>((props, ref) => {
         text={'0'}
         fontFamily="Arial"
         fontSize={16}
+        textColor={textColor}
         fill="black"
         align="right"
       />
@@ -95,7 +102,7 @@ export const InputWithStepper = forwardRef<any, ShapeProps>((props, ref) => {
           width={30}
           height={buttonHeight}
           fill="lightgray"
-          stroke="black"
+          stroke={stroke}
           strokeWidth={2}
         />
         <Text

src/pods/canvas/model/inline-editable.model.ts

@@ -40,6 +40,7 @@ const inlineEditableShapes = new Set<ShapeType>([
   'gauge',
   'loading-indicator',
   'fileTree',
+  'input-stepper',
 ]);
 
 // Check if a shape type allows inline editing
@@ -62,6 +63,7 @@ const shapeTypesWithDefaultText = new Set<ShapeType>([
   'listbox',
   'horizontal-menu',
   'vertical-menu',
+  'input-stepper',
   'heading1',
   'heading2',
   'heading3',
@@ -125,6 +127,7 @@ const defaultTextValueMap: Partial<Record<ShapeType, string>> = {
   browser: 'https://example.com',
   modalDialog: 'Title here...',
   'loading-indicator': 'Loading...',
+  'input-stepper': '0',
 };
 
 export const generateDefaultTextValue = (

src/pods/canvas/model/shape-other-props.utils.ts

@@ -49,6 +49,13 @@ export const generateDefaultOtherProps = (
         borderRadius: `${BASIC_SHAPE.DEFAULT_CORNER_RADIUS}`,
         activeElement: 0,
       };
+    case 'input-stepper':
+      return {
+        stroke: INPUT_SHAPE.DEFAULT_STROKE_COLOR,
+        backgroundColor: INPUT_SHAPE.DEFAULT_FILL_BACKGROUND,
+        textColor: INPUT_SHAPE.DEFAULT_FILL_TEXT,
+        strokeStyle: [],
+      };
     case 'datepickerinput':
     case 'timepickerinput':
       return {