@progress/kendo-themes-html 14.5.1-dev.7 → 14.5.1-dev.8

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

@@ -0,0 +1,143 @@
+import { ImageEditor, ImageEditorPane, ImageEditorResizeHandles } from "..";
+import { Button } from "../../button";
+import { ButtonGroup } from "../../button-group";
+import { Combobox } from "../../combobox";
+import { NumericTextbox } from "../../numerictextbox";
+import { ColorPicker } from "../../colorpicker";
+import { Form, FormField, Fieldset } from "../../form";
+import { Icon } from "../../icon";
+import { FloatingToolbar } from "../../floating-toolbar/floating-toolbar.spec";
+
+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 = (props: any) => (
+    <ImageEditor
+        sidebarItems={insertTextSidebarItems}
+        actionPane={
+            <ImageEditorPane title="Text" actions={
+                <>
+                    <Button>Remove</Button>
+                    <Button themeColor="primary">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="Trebuchet MS" /> }
+                    />
+                    <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="70" prefix={<Icon icon="font-size" />} /> }
+                        />
+                        <FormField
+                            label="Alignment"
+                            editor={
+                                <ButtonGroup>
+                                    <Button className="k-group-start" icon="align-left" aria-label="Align Left"></Button>
+                                    <Button icon="align-center" selected aria-label="Align Center"></Button>
+                                    <Button className="k-group-end" icon="align-right" aria-label="Align Right"></Button>
+                                </ButtonGroup>
+                            }
+                        />
+                    </Fieldset>
+                    <FormField
+                        label="Format"
+                        editor={
+                            <div className="k-imageeditor-controls">
+                                <Button icon="bold" aria-label="Bold"></Button>
+                                <Button icon="italic" aria-label="Italic"></Button>
+                                <Button icon="underline" aria-label="Underline"></Button>
+                                <Button icon="strikethrough" aria-label="Strikethrough"></Button>
+                                <Button icon="convert-uppercase" aria-label="Uppercase"></Button>
+                                <Button icon="convert-lowercase" aria-label="Lowercase"></Button>
+                            </div>
+                        }
+                    />
+                    <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                        <FormField
+                            label="Fill Color"
+                            editor={ <ColorPicker id="text-fill-color" value="#f5e93d" valueIconName="foreground-color" aria-label="Fill Color" /> }
+                        />
+                        <FormField
+                            label="Text Opacity"
+                            editor={ <NumericTextbox id="text-opacity" showSpinButton={false} value="70%" prefix={<Icon icon="transparency" />} aria-label="Text Opacity" /> }
+                        />
+                    </Fieldset>
+                    <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                        <FormField
+                            label="Align Horizontal"
+                            editor={
+                                <ButtonGroup>
+                                    <Button className="k-group-start" icon="align-items-start" aria-label="Align Left"></Button>
+                                    <Button icon="align-items-center" aria-label="Align Center"></Button>
+                                    <Button className="k-group-end" icon="align-items-end" aria-label="Align Right"></Button>
+                                </ButtonGroup>
+                            }
+                        />
+                        <FormField
+                            label="Align Vertical"
+                            editor={
+                                <ButtonGroup>
+                                    <Button className="k-group-start" icon="align-items-start-alt" aria-label="Align Top"></Button>
+                                    <Button icon="align-items-center-alt" aria-label="Align Middle"></Button>
+                                    <Button className="k-group-end" icon="align-items-end-alt" aria-label="Align Bottom"></Button>
+                                </ButtonGroup>
+                            }
+                        />
+                    </Fieldset>
+                </Form>
+            </ImageEditorPane>
+        }
+
+        children={
+            <>
+                <canvas width="494" height="307" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover" }}></canvas>
+                <div className="k-imageeditor-resize" style={{ width: "270px", height: "64px", top: "122px", left: "112px" }}>
+                    <p style={{
+                        margin: 0,
+                        width: "100%",
+                        height: "100%",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        fontFamily: "'Trebuchet MS', sans-serif",
+                        fontWeight: "bold",
+                        fontSize: "38px",
+                        lineHeight: 1,
+                        color: "#f5e93d",
+                        opacity: 0.7,
+                        textTransform: "uppercase",
+                        whiteSpace: "nowrap"
+                    }}>Text Example</p>
+                    <ImageEditorResizeHandles variant="mixed" />
+                    <FloatingToolbar fillMode="flat" offset={{ top: "72px", left: "0" }}>
+                        <Button fillMode="flat" icon="copy" aria-label="Duplicate"></Button>
+                        <Button fillMode="flat" icon="pencil" aria-label="Edit"></Button>
+                        <Button fillMode="flat" icon="flip-horizontal" aria-label="Flip Horizontal"></Button>
+                        <Button fillMode="flat" icon="flip-vertical" aria-label="Flip Vertical"></Button>
+                        <Button fillMode="flat" icon="trash" aria-label="Delete"></Button>
+                    </FloatingToolbar>
+                </div>
+            </>
+        }
+        {...props} />
+);
+
+export default ImageEditorInsertText;

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

@@ -1,5 +1,24 @@
 import { ImageEditor } from "..";
+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" aria-label="Zoom options" />
+    </ToolbarItem>,
+     <Button fillMode="flat" key="toolbar-button-6" icon="zoom-out" aria-label="Zoom Out"></Button>
+];
 
 export const ImageEditorNormal = (props: any) => (
-    <ImageEditor {...props} />
+    <ImageEditor toolbarItems={normalToolbarItems} {...props} />
 );

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

@@ -0,0 +1,92 @@
+import { ImageEditor, ImageEditorPane } from "..";
+import { Button } from "../../button";
+import { NumericTextbox } from "../../numerictextbox";
+import { Form, FormField } from "../../form";
+import { RadioGroup, RadioItem, RadioButtonWithLabelAfter } from "../../radio";
+import { SegmentedControl, SegmentedControlButton } from "../../segmented-control";
+import { Slider } from "../../slider";
+
+
+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 = ({ shape = "rectangular", intensity = 24, ...props }: any) => (
+    <ImageEditor
+        sidebarItems={pixelateSidebarItems}
+        actionPane={
+            <ImageEditorPane title="Pixelate" actions={
+                <>
+                    <Button>Reset</Button>
+                    <Button themeColor="primary">Apply</Button>
+                </>
+            }>
+                <SegmentedControl thumbStyles={{ width: "50%", left: "50%" }} stretched aria-label="Redaction Tool" style={{ flexShrink: 0 }}>
+                    <SegmentedControlButton icon="blur">Blur</SegmentedControlButton>
+                    <SegmentedControlButton icon="grid" selected>Pixelate</SegmentedControlButton>
+                </SegmentedControl>
+
+                <Form tag="div">
+                    <FormField
+                        label="Marquee Tool Shape"
+                        editor={
+                            <RadioGroup layout="horizontal">
+                                <RadioItem>
+                                    <RadioButtonWithLabelAfter id="pixelate-shape-rectangular" name="pixelate-shape" checked={shape === "rectangular"}>Rectangular</RadioButtonWithLabelAfter>
+                                </RadioItem>
+                                <RadioItem>
+                                    <RadioButtonWithLabelAfter id="pixelate-shape-elliptical" name="pixelate-shape" checked={shape === "elliptical"}>Elliptical</RadioButtonWithLabelAfter>
+                                </RadioItem>
+                            </RadioGroup>
+                        }
+                    />
+                    <FormField
+                        label="Pixelate Intensity"
+                        editorId="pixelate-intensity"
+                        editor={
+                            <div className="k-imageeditor-field-row">
+                                <Slider
+                                    style={{ flex: 1, "--kendo-slider-start": 0, "--kendo-slider-end": intensity } as React.CSSProperties}
+                                    aria-label="Pixelate Intensity"
+                                    showButtons={false}
+                                    showTicks={false}
+                                    value={intensity}
+                                    min={0}
+                                    max={100}
+                                />
+                                <NumericTextbox
+                                    id="pixelate-intensity"
+                                    style={{ width: "80px", flex: "none" }}
+                                    showClearButton={false}
+                                    showSpinButton={false}
+                                    value={String(intensity)}
+                                />
+                            </div>
+                        }
+                    />
+                </Form>
+            </ImageEditorPane>
+        }
+
+        children={
+            <>
+                <canvas width="494" height="307" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover" }}></canvas>
+                <div className="k-imageeditor-crop-overlay">
+                    <div className="k-imageeditor-crop" style={{ borderStyle: "dashed" }}></div>
+                </div>
+            </>
+        }
+        {...props} />
+);

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

@@ -1,68 +1,86 @@
-import { ImageEditor } from "..";
+import { ImageEditor, ImageEditorPane, ImageEditorResizeHandles } from "..";
 import { Button } from "../../button";
 import { CheckboxWithLabelAfter } from "../../checkbox";
-import { DropdownList } from "../../dropdownlist";
-import { FormNormal, Fieldset, FormField } from "../../form";
 import { NumericTextbox } from "../../numerictextbox";
-import { ToolbarSeparator, ToolbarItem } from "../../toolbar";
+import { Form, FormField, Fieldset } from "../../form";
+import { Icon } from "../../icon";
+import { RadioGroup, RadioItem, RadioButtonWithLabelAfter } from "../../radio";
+import { Tooltip } from "../../tooltip";
+
+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 = (props: any) => (
     <ImageEditor
-        toolbarItems={[
-            <Button key="toolbar-button-1" icon="upload" aria-label="Upload"></Button>,
-            <Button key="toolbar-button-2" icon="download" aria-label="Download"></Button>,
-            <ToolbarSeparator key="toolbar-separator-1"></ToolbarSeparator>,
-            <Button key="toolbar-button-3" disabled icon="undo" aria-label="Undo"></Button>,
-            <Button key="toolbar-button-4" disabled icon="redo" aria-label="Redo"></Button>,
-            <ToolbarSeparator key="toolbar-separator-2"></ToolbarSeparator>,
-            <Button key="toolbar-button-5" icon="crop" aria-label="Crop"></Button>,
-            <Button key="toolbar-button-6" icon="image-resize" aria-label="Resize"></Button>,
-            <Button key="toolbar-button-7" icon="zoom-in" aria-label="Zoom in"></Button>,
-            <Button key="toolbar-button-8" icon="zoom-out" aria-label="Zoom out"></Button>,
-            <ToolbarItem key="toolbar-item-1">
-                <DropdownList value="Zoom options" aria-label="Zoom options" />
-            </ToolbarItem>
-        ]}
+        sidebarItems={resizeSidebarItems}
         actionPane={
-            <FormNormal tag="div" className="k-imageeditor-pane-form" formButtons={
+            <ImageEditorPane title="Resize" actions={
                 <>
-                    <Button themeColor="primary" icon="check">Confirm</Button>
-                    <Button icon="cancel">Cancel</Button>
+                    <Button>Reset</Button>
+                    <Button themeColor="primary">Apply</Button>
                 </>
             }>
-                <Fieldset layout="grid" legend="Resize Image" cols={2} gutters={{cols: "8px"}}>
-                    <FormField
-                        colSpan="1"
-                        label="Width:"
-                        editorId="resize-width"
-                        editor={ <NumericTextbox id="resize-width" showClearButton={false} value="61" /> }
-                    />
-                    <FormField
-                        colSpan="1"
-                        label="&nbsp;"
-                        editor={ <DropdownList value="Pixels" aria-label="Width unit" /> }
-                    />
-                    <FormField
-                        colSpan="1"
-                        label="Height:"
-                        editorId="resize-height"
-                        editor={ <NumericTextbox id="resize-height" showClearButton={false} value="68" /> }
-                    />
-                    <FormField
-                        colSpan="1"
-                        label="&nbsp;"
-                        editor={ <DropdownList value="Pixels" aria-label="Height unit" /> }
-                    />
+                <Form tag="div">
                     <FormField
-                        colSpan="2"
-                        editor={ <CheckboxWithLabelAfter id="resize-lock">Lock aspect ratio</CheckboxWithLabelAfter> }
+                        label="Scale Unit"
+                        editor={
+                            <RadioGroup layout="horizontal">
+                                <RadioItem>
+                                    <RadioButtonWithLabelAfter id="resize-scale-unit-pixel" name="resize-scale-unit" checked>Pixel</RadioButtonWithLabelAfter>
+                                </RadioItem>
+                                <RadioItem>
+                                    <RadioButtonWithLabelAfter id="resize-scale-unit-percentage" name="resize-scale-unit">Percentage</RadioButtonWithLabelAfter>
+                                </RadioItem>
+                            </RadioGroup>
+                        }
                     />
-                </Fieldset>
-            </FormNormal>
+                    <Fieldset layout="grid" cols={2} gutters={{ cols: "8px" }}>
+                        <FormField
+                            label="Width"
+                            editorId="resize-width"
+                            editor={ <NumericTextbox id="resize-width" showClearButton={false} value="494" prefix={<Icon icon="arrows-left-right" />} /> }
+                        />
+                        <FormField
+                            label="Height"
+                            editorId="resize-height"
+                            editor={ <NumericTextbox id="resize-height" showClearButton={false} value="307" prefix={<Icon icon="arrows-top-bottom" />} /> }
+                        />
+                    </Fieldset>
+                    <FormField editor={ <CheckboxWithLabelAfter id="resize-lock" checked>Lock Aspect Ratio</CheckboxWithLabelAfter> } />
+                </Form>
+            </ImageEditorPane>
         }
 
         children={
-            <canvas width="61" height="68" role="img" aria-label="Image being edited"></canvas>
+            <>
+                <canvas width="494" height="307" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover" }}></canvas>
+                <div className="k-imageeditor-resize">
+                    <ImageEditorResizeHandles variant="mixed" />
+                </div>
+                <Tooltip
+                    themeColor="inverse"
+                    style={{ position: "absolute", insetBlockEnd: "-52px", insetInlineEnd: "0" }}
+                    content={
+                        <>
+                            <div>W: 494</div>
+                            <div>H: 307</div>
+                        </>
+                    }
+                ></Tooltip>
+            </>
         }
         {...props} />
 );

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

@@ -0,0 +1,98 @@
+import { ImageEditor, ImageEditorPane, ImageEditorResizeHandles } from "..";
+import { Button } from "../../button";
+import { NumericTextbox } from "../../numerictextbox";
+import { InputSuffixText } from "../../input";
+import { Form, FormField, Fieldset } from "../../form";
+import { Slider } from "../../slider";
+import { Tooltip } from "../../tooltip";
+
+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 = (props: any) => (
+    <ImageEditor
+        sidebarItems={rotateSidebarItems}
+        actionPane={
+            <ImageEditorPane title="Rotate" actions={
+                <>
+                    <Button>Reset</Button>
+                    <Button themeColor="primary">Apply</Button>
+                </>
+            }>
+                <Form tag="div">
+                    <FormField
+                        label="Rotation"
+                        editor={
+                            <div className="k-imageeditor-field-row">
+                                <Slider
+                                    style={{ width: "170px", flex: "none" }}
+                                    aria-label="Rotation"
+                                    showButtons={false}
+                                    showTicks={false}
+                                    value={85}
+                                    min={0}
+                                    max={360}
+                                />
+                                <NumericTextbox
+                                    style={{ width: "72px", flex: "none" }}
+                                    showClearButton={false}
+                                    showSpinButton={false}
+                                    separators={false}
+                                    value="85"
+                                    suffix={<InputSuffixText>°</InputSuffixText>}
+                                />
+                            </div>
+                        }
+                    />
+                    <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                        <FormField
+                            label="Rotate Options"
+                            editor={
+                                <div className="k-imageeditor-controls">
+                                    <Button icon="rotate-right" aria-label="Rotate Right"></Button>
+                                    <Button icon="rotate-left" aria-label="Rotate Left"></Button>
+                                </div>
+                            }
+                        />
+                        <FormField
+                            label="Flip Options"
+                            editor={
+                                <div className="k-imageeditor-controls">
+                                    <Button icon="flip-horizontal" aria-label="Flip Horizontal"></Button>
+                                    <Button icon="flip-vertical" aria-label="Flip Vertical"></Button>
+                                </div>
+                            }
+                        />
+                    </Fieldset>
+                </Form>
+            </ImageEditorPane>
+        }
+
+        children={
+            <>
+                <canvas width="494" height="307" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover" }}></canvas>
+                <div className="k-imageeditor-rotate">
+                    <ImageEditorResizeHandles variant="scale" grid />
+                </div>
+                <Tooltip
+                    themeColor="inverse"
+                    style={{ position: "absolute", insetBlockEnd: "-52px", insetInlineEnd: "0" }}
+                    content={<div>85°</div>}
+                ></Tooltip>
+            </>
+        }
+        {...props} />
+);

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

@@ -0,0 +1,96 @@
+import { ImageEditor, ImageEditorPane } from "..";
+import { Button } from "../../button";
+import { NumericTextbox } from "../../numerictextbox";
+import { ColorPicker } from "../../colorpicker";
+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 = 2,
+    positionY = -4,
+    blur = 32,
+    spread = 12,
+    color = "#232a36",
+    opacity = 32,
+    ...props
+}: any) => (
+    <ImageEditor
+        sidebarItems={shadowSidebarItems}
+        actionPane={
+            <ImageEditorPane title="Shadow" actions={
+                <>
+                    <Button>Reset</Button>
+                    <Button themeColor="primary">Apply</Button>
+                </>
+            }>
+                <Form tag="div">
+                    <FormField
+                        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" />
+                            </Fieldset>
+                        }
+                    />
+                    <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                        <FormField
+                            label="Blur"
+                            editorId="shadow-blur"
+                            editor={ <NumericTextbox id="shadow-blur" 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" />} /> }
+                        />
+                    </Fieldset>
+                    <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                        <FormField
+                            label="Color"
+                            editor={ <ColorPicker id="shadow-color" value={color} aria-label="Color" /> }
+                        />
+                        <FormField
+                            label="Opacity"
+                            editorId="shadow-opacity"
+                            editor={ <NumericTextbox id="shadow-opacity" showSpinButton={false} value={`${opacity}%`} prefix={<Icon icon="transparency" />} /> }
+                        />
+                    </Fieldset>
+                </Form>
+            </ImageEditorPane>
+        }
+
+        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>
+        }
+        {...props} />
+);