@progress/kendo-themes-html 14.7.0-dev.14 → 14.7.0-dev.16

package/src/imageeditor/templates/imageeditor-insert-text.tsx

@@ -1,5 +1,6 @@
-import { ImageEditor, ImageEditorPane } from "..";
+import { ImageEditor, ImageEditorPane, ImageEditorCanvas } from "..";
 import { Button } from "../../button";
+import { ToolbarSeparator } from "../../toolbar";
 import { ButtonGroup } from "../../button-group";
 import { Combobox } from "../../combobox";
 import { NumericTextbox } from "../../numerictextbox";
@@ -9,22 +10,6 @@ import { Icon } from "../../icon";
 import { InputSuffixText } from "../../input";
 import { Slider } from "../../slider";
 
-const insertTextSidebarItems = [
-    <Button fillMode="flat" key="sidebar-button-1" icon="image-resize" aria-label="Resize"></Button>,
-    <Button fillMode="flat" key="sidebar-button-2" icon="crop" aria-label="Crop"></Button>,
-    <Button fillMode="flat" key="sidebar-button-3" icon="rotate" aria-label="Rotate"></Button>,
-    <div className="k-separator" key="sidebar-separator-1"></div>,
-    <Button fillMode="flat" key="sidebar-button-4" icon="free-text" selected aria-label="Text"></Button>,
-    <Button fillMode="flat" key="sidebar-button-5" icon="shapes" aria-label="Shapes"></Button>,
-    <div className="k-separator" key="sidebar-separator-2"></div>,
-    <Button fillMode="flat" key="sidebar-button-6" icon="drop-half-pixelated" aria-label="Blur"></Button>,
-    <Button fillMode="flat" key="sidebar-button-7" icon="sliders-horizontal" aria-label="Adjustments"></Button>,
-    <Button fillMode="flat" key="sidebar-button-8" icon="circles-three-intersecting" aria-label="Filters"></Button>,
-    <div className="k-separator" key="sidebar-separator-3"></div>,
-    <Button fillMode="flat" key="sidebar-button-9" icon="frame-corners" aria-label="Frame"></Button>,
-    <Button fillMode="flat" key="sidebar-button-10" icon="circle-half-tilted" aria-label="Shadow"></Button>
-];
-
 export const ImageEditorInsertText = ({
     selected = false,
     fontFamily = "Trebuchet MS",
@@ -32,28 +17,42 @@ export const ImageEditorInsertText = ({
     alignment = "center",
     fillColor = "#000000",
     opacity = 100,
+    adaptive,
+    imageSrc,
     ...props
 }: any) => (
     <ImageEditor
-        sidebarItems={insertTextSidebarItems}
+        adaptive={adaptive}
+        activeTool="Text"
+        toolbarItems={adaptive && selected ? (
+            <>
+                <Button fillMode="flat" icon="squares-overlapping-plus" aria-label="Duplicate"></Button>
+                <Button fillMode="flat" icon="pencil" aria-label="Edit"></Button>
+                <ToolbarSeparator></ToolbarSeparator>
+                <Button fillMode="flat" icon="flip-horizontal" aria-label="Flip Horizontal"></Button>
+                <Button fillMode="flat" icon="flip-vertical" aria-label="Flip Vertical"></Button>
+                <ToolbarSeparator></ToolbarSeparator>
+                <Button fillMode="flat" icon="trash" aria-label="Delete"></Button>
+            </>
+        ) : undefined}
         actionPane={
-            <ImageEditorPane title="Text" actions={
+            <ImageEditorPane title="Text" adaptive={adaptive} confirmDisabled={!selected} actions={
                 <>
-                    <Button>Remove</Button>
-                    <Button themeColor="primary">Insert</Button>
+                    <Button disabled={!selected}>Remove</Button>
+                    <Button themeColor="primary" disabled={!selected}>Insert</Button>
                 </>
             }>
                 <Form tag="div">
                     <FormField
                         label="Font Family"
                         editorId="text-font-family"
-                        editor={ <Combobox id="text-font-family" prefix={<Icon icon="font-family" />} value={fontFamily} /> }
+                        editor={ <Combobox id="text-font-family" showClearButton={false} prefix={<Icon icon="font-family" />} value={fontFamily} /> }
                     />
                     <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
                         <FormField
                             label="Font Size"
                             editorId="text-font-size"
-                            editor={ <NumericTextbox id="text-font-size" showSpinButton={false} value={String(fontSize)} prefix={<Icon icon="font-size" />} /> }
+                            editor={ <NumericTextbox id="text-font-size" showClearButton={false} showSpinButton={false} value={String(fontSize)} prefix={<Icon icon="font-size" />} /> }
                         />
                         <FormField
                             label="Alignment"
@@ -86,7 +85,7 @@ export const ImageEditorInsertText = ({
                         />
                         <FormField
                             label="Text Opacity"
-                            editor={ <NumericTextbox id="text-opacity" showSpinButton={false} value={`${opacity}%`} prefix={<Icon icon="transparency" />} aria-label="Text Opacity" /> }
+                            editor={ <NumericTextbox id="text-opacity" showClearButton={false} showSpinButton={false} value={`${opacity}%`} prefix={<Icon icon="transparency" />} aria-label="Text Opacity" /> }
                         />
                     </Fieldset>
                     <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
@@ -163,7 +162,7 @@ export const ImageEditorInsertText = ({
         }
 
         children={
-            <canvas width="494" height="307" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover" }}></canvas>
+            <ImageEditorCanvas adaptive={adaptive} imageSrc={imageSrc} />
         }
         {...props} />
 );

package/src/imageeditor/templates/imageeditor-normal.tsx

@@ -1,36 +1,15 @@
 import { ImageEditor } from "..";
 import { ImageEditorPlaceholder } from "../imageeditor-placeholder";
-import { Button } from "../../button";
-import { Autocomplete } from "../../autocomplete";
-import { ToolbarItem, ToolbarSeparator } from "../../toolbar";
 
-// Freshly-loaded image: no edit history yet, so undo/redo are disabled
-const normalToolbarItems = [
-    <Button fillMode="flat" key="toolbar-button-1" icon="image-add" aria-label="Image Add"></Button>,
-    <ToolbarSeparator key="toolbar-separator-1"></ToolbarSeparator>,
-    <Button fillMode="flat" key="toolbar-button-2" disabled icon="undo" aria-label="Undo"></Button>,
-    <Button fillMode="flat" key="toolbar-button-3" disabled icon="redo" aria-label="Redo"></Button>,
-    <ToolbarSeparator key="toolbar-separator-2"></ToolbarSeparator>,
-    <Button fillMode="flat" key="toolbar-button-4" icon="download" aria-label="Download"></Button>,
-    <div className="k-spacer" key="toolbar-spacer"></div>,
-     <Button fillMode="flat" key="toolbar-button-5" icon="zoom-in" aria-label="Zoom In"></Button>,
-    <ToolbarItem key="toolbar-item-1">
-        <Autocomplete fillMode="flat" value="Fit" showClearButton={false} aria-label="Zoom options" />
-    </ToolbarItem>,
-     <Button fillMode="flat" key="toolbar-button-6" icon="zoom-out" aria-label="Zoom Out"></Button>
-];
-
-// Without an image the editor shows the upload placeholder; passing children (the canvas) replaces it
 export const ImageEditorNormal = (props: any) => (
     <ImageEditor
-        toolbarItems={normalToolbarItems}
-        placeholder={props.children ? undefined : (
+        placeholder={
             <ImageEditorPlaceholder
                 icon="image-add"
                 title="Ready to create?"
                 text="Upload a JPEG, PNG, or WebP file to unlock the full capabilities of ImageEditor."
                 buttonText="Upload Image"
             />
-        )}
+        }
         {...props} />
 );

package/src/imageeditor/templates/imageeditor-pixelate-adaptive.tsx

@@ -0,0 +1,3 @@
+import { ImageEditorPixelate } from "./imageeditor-pixelate";
+
+export const ImageEditorPixelateAdaptive = (props: any) => <ImageEditorPixelate adaptive {...props} />;

package/src/imageeditor/templates/imageeditor-pixelate.tsx

@@ -1,4 +1,4 @@
-import { ImageEditor, ImageEditorPane } from "..";
+import { ImageEditor, ImageEditorPane, ImageEditorCanvas } from "..";
 import { Button } from "../../button";
 import { NumericTextbox } from "../../numerictextbox";
 import { Form, FormField } from "../../form";
@@ -8,33 +8,18 @@ import { Slider } from "../../slider";
 import { InputSuffixText } from "../../input";
 
 
-const pixelateSidebarItems = [
-    <Button fillMode="flat" key="sidebar-button-1" icon="image-resize" aria-label="Resize"></Button>,
-    <Button fillMode="flat" key="sidebar-button-2" icon="crop" aria-label="Crop"></Button>,
-    <Button fillMode="flat" key="sidebar-button-3" icon="rotate" aria-label="Rotate"></Button>,
-    <div className="k-separator" key="sidebar-separator-1"></div>,
-    <Button fillMode="flat" key="sidebar-button-4" icon="free-text" aria-label="Text"></Button>,
-    <Button fillMode="flat" key="sidebar-button-5" icon="shapes" aria-label="Shapes"></Button>,
-    <div className="k-separator" key="sidebar-separator-2"></div>,
-    <Button fillMode="flat" key="sidebar-button-6" icon="drop-half-pixelated" selected aria-label="Blur"></Button>,
-    <Button fillMode="flat" key="sidebar-button-7" icon="sliders-horizontal" aria-label="Adjustments"></Button>,
-    <Button fillMode="flat" key="sidebar-button-8" icon="circles-three-intersecting" aria-label="Filters"></Button>,
-    <div className="k-separator" key="sidebar-separator-3"></div>,
-    <Button fillMode="flat" key="sidebar-button-9" icon="frame-corners" aria-label="Frame"></Button>,
-    <Button fillMode="flat" key="sidebar-button-10" icon="circle-half-tilted" aria-label="Shadow"></Button>
-];
-
-export const ImageEditorPixelate = ({ selected = false, shape = "elliptical", intensity = 24, ...props }: any) => (
+export const ImageEditorPixelate = ({ selected = false, shape = "elliptical", intensity = 0, adaptive, imageSrc, ...props }: any) => (
     <ImageEditor
-        sidebarItems={pixelateSidebarItems}
+        adaptive={adaptive}
+        activeTool="Blur"
         actionPane={
-            <ImageEditorPane title="Pixelate" actions={
+            <ImageEditorPane title="Pixelate" adaptive={adaptive} confirmDisabled={!selected} actions={
                 <>
-                    <Button>Reset</Button>
-                    <Button themeColor="primary">Apply</Button>
+                    <Button disabled={!selected}>Reset</Button>
+                    <Button themeColor="primary" disabled={!selected}>Apply</Button>
                 </>
             }>
-                <SegmentedControl thumbStyles={{ width: "50%", left: "50%" }} stretched aria-label="Redaction Tool" style={{ flexShrink: 0 }}>
+                <SegmentedControl thumbStyles={{ width: "50%", left: "50%" }} stretched aria-label="Redaction Tool">
                     <SegmentedControlButton icon="blur">Blur</SegmentedControlButton>
                     <SegmentedControlButton icon="grid" selected>Pixelate</SegmentedControlButton>
                 </SegmentedControl>
@@ -109,7 +94,7 @@ export const ImageEditorPixelate = ({ selected = false, shape = "elliptical", in
         }
 
         children={
-            <canvas width="494" height="307" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover" }}></canvas>
+            <ImageEditorCanvas adaptive={adaptive} imageSrc={imageSrc} />
         }
         {...props} />
 );

package/src/imageeditor/templates/imageeditor-resize-adaptive.tsx

@@ -0,0 +1,3 @@
+import { ImageEditorResize } from "./imageeditor-resize";
+
+export const ImageEditorResizeAdaptive = (props: any) => <ImageEditorResize adaptive {...props} />;

package/src/imageeditor/templates/imageeditor-resize.tsx

@@ -1,4 +1,4 @@
-import { ImageEditor, ImageEditorPane, ImageEditorResizeHandles } from "..";
+import { ImageEditor, ImageEditorPane, ImageEditorResizeHandles, ImageEditorCanvas } from "..";
 import { Button } from "../../button";
 import { CheckboxWithLabelAfter } from "../../checkbox";
 import { NumericTextbox } from "../../numerictextbox";
@@ -6,30 +6,15 @@ import { Form, FormField, Fieldset } from "../../form";
 import { Icon } from "../../icon";
 import { RadioGroup, RadioItem, RadioButtonWithLabelAfter } from "../../radio";
 
-const resizeSidebarItems = [
-    <Button fillMode="flat" key="sidebar-button-1" icon="image-resize" selected aria-label="Resize"></Button>,
-    <Button fillMode="flat" key="sidebar-button-2" icon="crop" aria-label="Crop"></Button>,
-    <Button fillMode="flat" key="sidebar-button-3" icon="rotate" aria-label="Rotate"></Button>,
-    <div className="k-separator" key="sidebar-separator-1"></div>,
-    <Button fillMode="flat" key="sidebar-button-4" icon="free-text" aria-label="Text"></Button>,
-    <Button fillMode="flat" key="sidebar-button-5" icon="shapes" aria-label="Shapes"></Button>,
-    <div className="k-separator" key="sidebar-separator-2"></div>,
-    <Button fillMode="flat" key="sidebar-button-6" icon="drop-half-pixelated" aria-label="Blur"></Button>,
-    <Button fillMode="flat" key="sidebar-button-7" icon="sliders-horizontal" aria-label="Adjustments"></Button>,
-    <Button fillMode="flat" key="sidebar-button-8" icon="circles-three-intersecting" aria-label="Filters"></Button>,
-    <div className="k-separator" key="sidebar-separator-3"></div>,
-    <Button fillMode="flat" key="sidebar-button-9" icon="frame-corners" aria-label="Frame"></Button>,
-    <Button fillMode="flat" key="sidebar-button-10" icon="circle-half-tilted" aria-label="Shadow"></Button>
-];
-
-export const ImageEditorResize = ({ scaleUnit = "percentage", ...props }: any) => (
+export const ImageEditorResize = ({ scaleUnit = "percentage", modified = false, adaptive, imageSrc, ...props }: any) => (
     <ImageEditor
-        sidebarItems={resizeSidebarItems}
+        adaptive={adaptive}
+        activeTool="Resize"
         actionPane={
-            <ImageEditorPane title="Resize" actions={
+            <ImageEditorPane title="Resize" adaptive={adaptive} confirmDisabled={!modified} actions={
                 <>
-                    <Button>Reset</Button>
-                    <Button themeColor="primary">Apply</Button>
+                    <Button disabled={!modified}>Reset</Button>
+                    <Button themeColor="primary" disabled={!modified}>Apply</Button>
                 </>
             }>
                 <Form tag="div">
@@ -50,12 +35,12 @@ export const ImageEditorResize = ({ scaleUnit = "percentage", ...props }: any) =
                         <FormField
                             label="Width"
                             editorId="resize-width"
-                            editor={ <NumericTextbox id="resize-width" showClearButton={false} value={scaleUnit === "percentage" ? "100%" : "494"} prefix={<Icon icon="arrows-left-right" />} /> }
+                            editor={ <NumericTextbox id="resize-width" showClearButton={false} showSpinButton={false} value={scaleUnit === "percentage" ? "100%" : "494"} prefix={<Icon icon="arrows-left-right" />} /> }
                         />
                         <FormField
                             label="Height"
                             editorId="resize-height"
-                            editor={ <NumericTextbox id="resize-height" showClearButton={false} value={scaleUnit === "percentage" ? "100%" : "307"} prefix={<Icon icon="arrows-top-bottom" />} /> }
+                            editor={ <NumericTextbox id="resize-height" showClearButton={false} showSpinButton={false} value={scaleUnit === "percentage" ? "100%" : "307"} prefix={<Icon icon="arrows-top-bottom" />} /> }
                         />
                     </Fieldset>
                     <FormField editor={ <CheckboxWithLabelAfter id="resize-lock" checked>Lock Aspect Ratio</CheckboxWithLabelAfter> } />
@@ -65,7 +50,7 @@ export const ImageEditorResize = ({ scaleUnit = "percentage", ...props }: any) =
 
         children={
             <>
-                <canvas width="494" height="307" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover" }}></canvas>
+                <ImageEditorCanvas adaptive={adaptive} imageSrc={imageSrc} />
                 <div className="k-imageeditor-resize">
                     <ImageEditorResizeHandles variant="mixed" />
                 </div>

package/src/imageeditor/templates/imageeditor-rotate-adaptive.tsx

@@ -0,0 +1,3 @@
+import { ImageEditorRotate } from "./imageeditor-rotate";
+
+export const ImageEditorRotateAdaptive = (props: any) => <ImageEditorRotate adaptive {...props} />;

package/src/imageeditor/templates/imageeditor-rotate.tsx

@@ -1,34 +1,19 @@
-import { ImageEditor, ImageEditorPane, ImageEditorResizeHandles, ImageEditorRotateHandle } from "..";
+import { ImageEditor, ImageEditorPane, ImageEditorResizeHandles, ImageEditorRotateHandle, ImageEditorCanvas } from "..";
 import { Button } from "../../button";
 import { NumericTextbox } from "../../numerictextbox";
 import { InputSuffixText } from "../../input";
 import { Form, FormField, Fieldset } from "../../form";
 import { Slider } from "../../slider";
 
-const rotateSidebarItems = [
-    <Button fillMode="flat" key="sidebar-button-1" icon="image-resize" aria-label="Resize"></Button>,
-    <Button fillMode="flat" key="sidebar-button-2" icon="crop" aria-label="Crop"></Button>,
-    <Button fillMode="flat" key="sidebar-button-3" icon="rotate" selected aria-label="Rotate"></Button>,
-    <div className="k-separator" key="sidebar-separator-1"></div>,
-    <Button fillMode="flat" key="sidebar-button-4" icon="free-text" aria-label="Text"></Button>,
-    <Button fillMode="flat" key="sidebar-button-5" icon="shapes" aria-label="Shapes"></Button>,
-    <div className="k-separator" key="sidebar-separator-2"></div>,
-    <Button fillMode="flat" key="sidebar-button-6" icon="drop-half-pixelated" aria-label="Blur"></Button>,
-    <Button fillMode="flat" key="sidebar-button-7" icon="sliders-horizontal" aria-label="Adjustments"></Button>,
-    <Button fillMode="flat" key="sidebar-button-8" icon="circles-three-intersecting" aria-label="Filters"></Button>,
-    <div className="k-separator" key="sidebar-separator-3"></div>,
-    <Button fillMode="flat" key="sidebar-button-9" icon="frame-corners" aria-label="Frame"></Button>,
-    <Button fillMode="flat" key="sidebar-button-10" icon="circle-half-tilted" aria-label="Shadow"></Button>
-];
-
-export const ImageEditorRotate = ({ rotation = 0, ...props }: any) => (
+export const ImageEditorRotate = ({ rotation = 0, adaptive, imageSrc, ...props }: any) => (
     <ImageEditor
-        sidebarItems={rotateSidebarItems}
+        adaptive={adaptive}
+        activeTool="Rotate"
         actionPane={
-            <ImageEditorPane title="Rotate" actions={
+            <ImageEditorPane title="Rotate" adaptive={adaptive} confirmDisabled={rotation === 0} actions={
                 <>
-                    <Button>Reset</Button>
-                    <Button themeColor="primary">Apply</Button>
+                    <Button disabled={rotation === 0}>Reset</Button>
+                    <Button themeColor="primary" disabled={rotation === 0}>Apply</Button>
                 </>
             }>
                 <Form tag="div">
@@ -82,7 +67,7 @@ export const ImageEditorRotate = ({ rotation = 0, ...props }: any) => (
 
         children={
             <>
-                <canvas width="494" height="307" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover" }}></canvas>
+                <ImageEditorCanvas adaptive={adaptive} imageSrc={imageSrc} />
                 <div className="k-imageeditor-rotate">
                     <ImageEditorResizeHandles variant="scale" grid />
                     <ImageEditorRotateHandle />

package/src/imageeditor/templates/imageeditor-shadow-adaptive.tsx

@@ -0,0 +1,3 @@
+import { ImageEditorShadow } from "./imageeditor-shadow";
+
+export const ImageEditorShadowAdaptive = (props: any) => <ImageEditorShadow adaptive {...props} />;

package/src/imageeditor/templates/imageeditor-shadow.tsx

@@ -1,4 +1,4 @@
-import { ImageEditor, ImageEditorPane } from "..";
+import { ImageEditor, ImageEditorPane, ImageEditorCanvas } from "..";
 import { Button } from "../../button";
 import { NumericTextbox } from "../../numerictextbox";
 import { ColorPicker } from "../../colorpicker";
@@ -6,46 +6,26 @@ import { Form, FormField, Fieldset } from "../../form";
 import { Icon } from "../../icon";
 import { InputPrefixText } from "../../input";
 
-const shadowSidebarItems = [
-    <Button fillMode="flat" key="sidebar-button-1" icon="image-resize" aria-label="Resize"></Button>,
-    <Button fillMode="flat" key="sidebar-button-2" icon="crop" aria-label="Crop"></Button>,
-    <Button fillMode="flat" key="sidebar-button-3" icon="rotate" aria-label="Rotate"></Button>,
-    <div className="k-separator" key="sidebar-separator-1"></div>,
-    <Button fillMode="flat" key="sidebar-button-4" icon="free-text" aria-label="Text"></Button>,
-    <Button fillMode="flat" key="sidebar-button-5" icon="shapes" aria-label="Shapes"></Button>,
-    <div className="k-separator" key="sidebar-separator-2"></div>,
-    <Button fillMode="flat" key="sidebar-button-6" icon="drop-half-pixelated" aria-label="Blur"></Button>,
-    <Button fillMode="flat" key="sidebar-button-7" icon="sliders-horizontal" aria-label="Adjustments"></Button>,
-    <Button fillMode="flat" key="sidebar-button-8" icon="circles-three-intersecting" aria-label="Filters"></Button>,
-    <div className="k-separator" key="sidebar-separator-3"></div>,
-    <Button fillMode="flat" key="sidebar-button-9" icon="frame-corners" aria-label="Frame"></Button>,
-    <Button fillMode="flat" key="sidebar-button-10" icon="circle-half-tilted" selected aria-label="Shadow"></Button>
-];
-
-const hexToRgba = (hex: string, alphaPercent: number) => {
-    const value = hex.replace("#", "");
-    const r = parseInt(value.substring(0, 2), 16);
-    const g = parseInt(value.substring(2, 4), 16);
-    const b = parseInt(value.substring(4, 6), 16);
-    return `rgba(${r}, ${g}, ${b}, ${alphaPercent / 100})`;
-};
-
 export const ImageEditorShadow = ({
     positionX = 0,
-    positionY = -4,
-    blur = 12,
+    positionY = 0,
+    blur = 0,
     spread = 0,
     color = "#000000",
-    opacity = 20,
+    opacity = 100,
+    isPristine = positionX === 0 && positionY === 0 && blur === 0 && spread === 0 && color === "#000000" && opacity === 100,
+    adaptive,
+    imageSrc,
     ...props
 }: any) => (
     <ImageEditor
-        sidebarItems={shadowSidebarItems}
+        adaptive={adaptive}
+        activeTool="Shadow"
         actionPane={
-            <ImageEditorPane title="Shadow" actions={
+            <ImageEditorPane title="Shadow" adaptive={adaptive} confirmDisabled={isPristine} actions={
                 <>
-                    <Button>Reset</Button>
-                    <Button themeColor="primary">Apply</Button>
+                    <Button disabled={isPristine}>Reset</Button>
+                    <Button themeColor="primary" disabled={isPristine}>Apply</Button>
                 </>
             }>
                 <Form tag="div">
@@ -53,8 +33,8 @@ export const ImageEditorShadow = ({
                         label="Position"
                         editor={
                             <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
-                                <NumericTextbox id="shadow-position-x" showSpinButton={false} value={String(positionX)} prefix={<InputPrefixText>X</InputPrefixText>} aria-label="Position X" />
-                                <NumericTextbox id="shadow-position-y" showSpinButton={false} value={String(positionY)} prefix={<InputPrefixText>Y</InputPrefixText>} aria-label="Position Y" />
+                                <NumericTextbox id="shadow-position-x" showClearButton={false} showSpinButton={false} value={String(positionX)} prefix={<InputPrefixText>X</InputPrefixText>} aria-label="Position X" />
+                                <NumericTextbox id="shadow-position-y" showClearButton={false} showSpinButton={false} value={String(positionY)} prefix={<InputPrefixText>Y</InputPrefixText>} aria-label="Position Y" />
                             </Fieldset>
                         }
                     />
@@ -62,12 +42,12 @@ export const ImageEditorShadow = ({
                         <FormField
                             label="Blur"
                             editorId="shadow-blur"
-                            editor={ <NumericTextbox id="shadow-blur" showSpinButton={false} value={String(blur)} prefix={<Icon icon="blur" />} /> }
+                            editor={ <NumericTextbox id="shadow-blur" showClearButton={false} showSpinButton={false} value={String(blur)} prefix={<Icon icon="blur" />} /> }
                         />
                         <FormField
                             label="Spread"
                             editorId="shadow-spread"
-                            editor={ <NumericTextbox id="shadow-spread" showSpinButton={false} value={String(spread)} prefix={<Icon icon="brightness-contrast" />} /> }
+                            editor={ <NumericTextbox id="shadow-spread" showClearButton={false} showSpinButton={false} value={String(spread)} prefix={<Icon icon="brightness-contrast" />} /> }
                         />
                     </Fieldset>
                     <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
@@ -78,7 +58,7 @@ export const ImageEditorShadow = ({
                         <FormField
                             label="Opacity"
                             editorId="shadow-opacity"
-                            editor={ <NumericTextbox id="shadow-opacity" showSpinButton={false} value={`${opacity}%`} prefix={<Icon icon="transparency" />} /> }
+                            editor={ <NumericTextbox id="shadow-opacity" showClearButton={false} showSpinButton={false} value={`${opacity}%`} prefix={<Icon icon="transparency" />} /> }
                         />
                     </Fieldset>
                 </Form>
@@ -86,11 +66,9 @@ export const ImageEditorShadow = ({
         }
 
         children={
-            <canvas width="494" height="307" role="img" aria-label="Image being edited" style={{
-                backgroundImage: "url('/packages/html/assets/sofia.jpg')",
-                backgroundSize: "cover",
-                boxShadow: `${positionX}px ${positionY}px ${blur}px ${spread}px ${hexToRgba(color, opacity)}`
-            }}></canvas>
+            <ImageEditorCanvas adaptive={adaptive} imageSrc={imageSrc} style={{
+                boxShadow: `${positionX}px ${positionY}px ${blur}px ${spread}px color-mix(in srgb, ${color} ${opacity}%, transparent)`
+            }} />
         }
         {...props} />
 );

package/src/imageeditor/tests/imageeditor-adaptive-panes.tsx

@@ -0,0 +1,85 @@
+import {
+    ImageEditorResizeAdaptive,
+    ImageEditorCropAdaptive,
+    ImageEditorRotateAdaptive,
+    ImageEditorInsertTextAdaptive,
+    ImageEditorInsertShapeAdaptive,
+    ImageEditorInsertLineAdaptive,
+    ImageEditorBlurAdaptive,
+    ImageEditorPixelateAdaptive,
+    ImageEditorAdjustmentsAdaptive,
+    ImageEditorFiltersAdaptive,
+    ImageEditorFramesAdaptive,
+    ImageEditorShadowAdaptive
+} from '..';
+import { IMAGEEDITOR_TEST_IMAGE_SRC } from '../constants';
+
+const styles = `
+    #test-area {
+        display: flex;
+        gap: 24px;
+        flex-wrap: wrap;
+    }
+    #test-area .k-imageeditor-adaptive {
+        width: 360px;
+        height: 800px;
+    }
+`;
+
+const image = { imageSrc: IMAGEEDITOR_TEST_IMAGE_SRC };
+
+export default () => (
+    <>
+        <style>{styles}</style>
+        <div id="test-area">
+            <div>
+                <h4>Mobile / Resize</h4>
+                <ImageEditorResizeAdaptive {...image} />
+            </div>
+            <div>
+                <h4>Mobile / Crop</h4>
+                <ImageEditorCropAdaptive {...image} />
+            </div>
+            <div>
+                <h4>Mobile / Rotate</h4>
+                <ImageEditorRotateAdaptive {...image} />
+            </div>
+            <div>
+                <h4>Mobile / Text</h4>
+                <ImageEditorInsertTextAdaptive {...image} />
+            </div>
+            <div>
+                <h4>Mobile / Shape</h4>
+                <ImageEditorInsertShapeAdaptive {...image} />
+            </div>
+            <div>
+                <h4>Mobile / Line</h4>
+                <ImageEditorInsertLineAdaptive {...image} />
+            </div>
+            <div>
+                <h4>Mobile / Blur</h4>
+                <ImageEditorBlurAdaptive {...image} />
+            </div>
+            <div>
+                <h4>Mobile / Pixelate</h4>
+                <ImageEditorPixelateAdaptive {...image} />
+            </div>
+            <div>
+                <h4>Mobile / Adjustments</h4>
+                <ImageEditorAdjustmentsAdaptive {...image} />
+            </div>
+            <div>
+                <h4>Mobile / Filters</h4>
+                <ImageEditorFiltersAdaptive {...image} />
+            </div>
+            <div>
+                <h4>Mobile / Frame</h4>
+                <ImageEditorFramesAdaptive {...image} />
+            </div>
+            <div>
+                <h4>Mobile / Shadow</h4>
+                <ImageEditorShadowAdaptive {...image} />
+            </div>
+        </div>
+    </>
+);