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

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

@@ -0,0 +1,373 @@
+import { ImageEditor, ImageEditorPane, ImageEditorOptionList, ImageEditorOptionPreview, 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 { SegmentedControl, SegmentedControlButton } from '../../segmented-control';
+import { ToolbarSeparator } from '../../toolbar';
+
+// Mobile top toolbar has no zoom-level combobox - just the 6 core icon actions, split into two edge-aligned groups
+const mobileToolbarItems = [
+    <Button fillMode="flat" key="mobile-toolbar-button-1" icon="image-add" aria-label="Image Add"></Button>,
+    <ToolbarSeparator key="mobile-toolbar-separator-1"></ToolbarSeparator>,
+    <Button fillMode="flat" key="mobile-toolbar-button-2" icon="undo" aria-label="Undo"></Button>,
+    <Button fillMode="flat" key="mobile-toolbar-button-3" icon="redo" aria-label="Redo"></Button>,
+    <ToolbarSeparator key="mobile-toolbar-separator-2"></ToolbarSeparator>,
+    <Button fillMode="flat" key="mobile-toolbar-button-4" icon="download" aria-label="Download"></Button>,
+    <div className="k-spacer" key="mobile-toolbar-spacer"></div>,
+    <Button fillMode="flat" key="mobile-toolbar-button-5" icon="zoom-in" aria-label="Zoom In"></Button>,
+    <Button fillMode="flat" key="mobile-toolbar-button-6" icon="zoom-out" aria-label="Zoom Out"></Button>
+];
+
+// Same 5 actions as the desktop FloatingToolbar (imageeditor-insert-shape.tsx) - on mobile they dock at the top instead of floating over the canvas
+const contextualToolbarItems = [
+    <Button fillMode="flat" key="contextual-button-1" icon="copy" aria-label="Duplicate"></Button>,
+    <Button fillMode="flat" key="contextual-button-2" icon="pencil" aria-label="Edit"></Button>,
+    <ToolbarSeparator key="contextual-separator-1"></ToolbarSeparator>,
+    <Button fillMode="flat" key="contextual-button-3" icon="flip-horizontal" aria-label="Flip Horizontal"></Button>,
+    <Button fillMode="flat" key="contextual-button-4" icon="flip-vertical" aria-label="Flip Vertical"></Button>,
+    <ToolbarSeparator key="contextual-separator-2"></ToolbarSeparator>,
+    <Button fillMode="flat" key="contextual-button-5" icon="trash" aria-label="Delete"></Button>
+];
+
+const shapeSidebarItems = [
+    <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" selected 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>
+];
+
+const shapeTypes = [
+    { label: "Square", icon: "checkbox" },
+    { label: "Rectangle", icon: "rectangle-shape" },
+    { label: "Circle", icon: "circle-shape" },
+    { label: "Oval", icon: "oval-shape" },
+    { label: "Triangle", icon: "kpi-status-hold" },
+    { label: "Star", icon: "star" },
+    { label: "Heart", icon: "heart" },
+    { label: "Diamond", icon: "kpi-status-deny" },
+    { label: "Hexagon", icon: "hexagon-shape" },
+    { label: "Pentagon", icon: "pentagon-shape" },
+    { label: "Arrow", icon: "arrow-right" }
+];
+
+const styles = `
+    #test-area {
+        display: flex;
+        gap: 24px;
+        flex-wrap: wrap;
+    }
+    #test-area .k-imageeditor-adaptive {
+        width: 360px;
+        height: 800px;
+    }
+`;
+
+export default () => (
+    <>
+        <style>{styles}</style>
+        <div id="test-area">
+
+            <div>
+                <h4>Mobile / Adaptive / Unselected Tool</h4>
+                <ImageEditor adaptive toolbarItems={mobileToolbarItems}>
+                    <canvas width="326" height="203" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover", backgroundPosition: "center", backgroundRepeat: "no-repeat" }}></canvas>
+                </ImageEditor>
+            </div>
+
+            <div>
+                <h4>Mobile / Adaptive / Selected Tool / Panel Opened</h4>
+                <ImageEditor
+                    adaptive
+                    toolbarItems={contextualToolbarItems}
+                    sidebarItems={shapeSidebarItems}
+                    actionPane={
+                        <ImageEditorPane adaptive title="Shape">
+                            <SegmentedControl thumbStyles={{ width: "50%" }} stretched aria-label="Shape or Line" style={{ flexShrink: 0 }}>
+                                <SegmentedControlButton icon="shapes" selected>Shape</SegmentedControlButton>
+                                <SegmentedControlButton icon="shape-line">Line</SegmentedControlButton>
+                            </SegmentedControl>
+
+                            <Form tag="div">
+                                <FormField
+                                    label="Type"
+                                    editor={
+                                        <ImageEditorOptionList scrollable scrollableEnd>
+                                            {shapeTypes.map((shape) => (
+                                                <ImageEditorOptionPreview key={shape.label} label={shape.label} selected={shape.label === "Oval"}>
+                                                    <div className="k-imageeditor-option-content">
+                                                        <Icon icon={shape.icon} />
+                                                        <span className="k-imageeditor-option-label">{shape.label}</span>
+                                                    </div>
+                                                </ImageEditorOptionPreview>
+                                            ))}
+                                        </ImageEditorOptionList>
+                                    }
+                                />
+                                <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                                    <FormField
+                                        label="Stroke Color"
+                                        editor={ <ColorPicker id="mobile-shape-stroke-color" value="#b0e855" aria-label="Stroke Color" /> }
+                                    />
+                                    <FormField
+                                        label="Stroke Width"
+                                        editorId="mobile-shape-stroke-width"
+                                        editor={ <NumericTextbox id="mobile-shape-stroke-width" showSpinButton={false} value="8" prefix={<Icon icon="border-width" />} /> }
+                                    />
+                                </Fieldset>
+                                <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                                    <FormField
+                                        label="Fill Color"
+                                        editor={ <ColorPicker id="mobile-shape-fill-color" value="#eae382" valueIconName="droplet" aria-label="Fill Color" /> }
+                                    />
+                                    <FormField
+                                        label="Text Color"
+                                        editor={ <ColorPicker id="mobile-shape-text-color" value="#4a4500" valueIconName="foreground-color" aria-label="Text Color" /> }
+                                    />
+                                </Fieldset>
+                                <FormField
+                                    label="Font Family"
+                                    editorId="mobile-shape-font-family"
+                                    editor={ <Combobox id="mobile-shape-font-family" prefix={<Icon icon="font-family" />} value="Trebuchet MS" /> }
+                                />
+                                <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                                    <FormField
+                                        label="Font Size"
+                                        editorId="mobile-shape-font-size"
+                                        editor={ <NumericTextbox id="mobile-shape-font-size" showSpinButton={false} value="24" 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="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>
+                    }
+                >
+                    <canvas width="326" height="203" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover", backgroundPosition: "center", backgroundRepeat: "no-repeat" }}></canvas>
+                    <div className="k-imageeditor-resize" style={{ width: "165px", height: "54px", top: "75px", left: "81px" }}>
+                        <div style={{
+                            width: "100%",
+                            height: "100%",
+                            borderRadius: "50%",
+                            background: "#eae382",
+                            border: "2px solid #b0e855",
+                            boxSizing: "border-box"
+                        }}>
+                            <p style={{
+                                margin: 0,
+                                width: "100%",
+                                height: "100%",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                fontFamily: "'Trebuchet MS', sans-serif",
+                                fontSize: "16px",
+                                lineHeight: 1,
+                                color: "#4a4500",
+                                whiteSpace: "nowrap"
+                            }}>Shape text</p>
+                        </div>
+                        <ImageEditorResizeHandles variant="mixed" />
+                    </div>
+                </ImageEditor>
+            </div>
+
+            <div>
+                <h4>Tablet / Adaptive / Selected Tool / Panel Opened</h4>
+                <ImageEditor
+                    adaptive
+                    style={{ width: "768px", height: "1024px" }}
+                    toolbarItems={contextualToolbarItems}
+                    sidebarItems={shapeSidebarItems}
+                    actionPane={
+                        <ImageEditorPane adaptive title="Shape">
+                            <SegmentedControl thumbStyles={{ width: "50%" }} stretched aria-label="Shape or Line" style={{ flexShrink: 0 }}>
+                                <SegmentedControlButton icon="shapes" selected>Shape</SegmentedControlButton>
+                                <SegmentedControlButton icon="shape-line">Line</SegmentedControlButton>
+                            </SegmentedControl>
+
+                            <Form tag="div">
+                                <FormField
+                                    label="Type"
+                                    editor={
+                                        <ImageEditorOptionList scrollable scrollableEnd>
+                                            {shapeTypes.map((shape) => (
+                                                <ImageEditorOptionPreview key={shape.label} label={shape.label} selected={shape.label === "Oval"}>
+                                                    <div className="k-imageeditor-option-content">
+                                                        <Icon icon={shape.icon} />
+                                                        <span className="k-imageeditor-option-label">{shape.label}</span>
+                                                    </div>
+                                                </ImageEditorOptionPreview>
+                                            ))}
+                                        </ImageEditorOptionList>
+                                    }
+                                />
+                                <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                                    <FormField
+                                        label="Stroke Color"
+                                        editor={ <ColorPicker id="tablet-shape-stroke-color" value="#b0e855" aria-label="Stroke Color" /> }
+                                    />
+                                    <FormField
+                                        label="Stroke Width"
+                                        editorId="tablet-shape-stroke-width"
+                                        editor={ <NumericTextbox id="tablet-shape-stroke-width" showSpinButton={false} value="8" prefix={<Icon icon="border-width" />} /> }
+                                    />
+                                </Fieldset>
+                                <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                                    <FormField
+                                        label="Fill Color"
+                                        editor={ <ColorPicker id="tablet-shape-fill-color" value="#eae382" valueIconName="droplet" aria-label="Fill Color" /> }
+                                    />
+                                    <FormField
+                                        label="Text Color"
+                                        editor={ <ColorPicker id="tablet-shape-text-color" value="#4a4500" valueIconName="foreground-color" aria-label="Text Color" /> }
+                                    />
+                                </Fieldset>
+                                <FormField
+                                    label="Font Family"
+                                    editorId="tablet-shape-font-family"
+                                    editor={ <Combobox id="tablet-shape-font-family" prefix={<Icon icon="font-family" />} value="Trebuchet MS" /> }
+                                />
+                                <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                                    <FormField
+                                        label="Font Size"
+                                        editorId="tablet-shape-font-size"
+                                        editor={ <NumericTextbox id="tablet-shape-font-size" showSpinButton={false} value="24" 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="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>
+                    }
+                >
+                    <canvas width="720" height="393" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover", backgroundPosition: "center", backgroundRepeat: "no-repeat" }}></canvas>
+                    <div className="k-imageeditor-resize" style={{ width: "234px", height: "77px", top: "156px", left: "243px" }}>
+                        <div style={{
+                            width: "100%",
+                            height: "100%",
+                            borderRadius: "50%",
+                            background: "#eae382",
+                            border: "2px solid #b0e855",
+                            boxSizing: "border-box"
+                        }}>
+                            <p style={{
+                                margin: 0,
+                                width: "100%",
+                                height: "100%",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                fontFamily: "'Trebuchet MS', sans-serif",
+                                fontSize: "16px",
+                                lineHeight: 1,
+                                color: "#4a4500",
+                                whiteSpace: "nowrap"
+                            }}>Shape text</p>
+                        </div>
+                        <ImageEditorResizeHandles variant="mixed" />
+                    </div>
+                </ImageEditor>
+            </div>
+
+        </div>
+    </>
+);

package/src/imageeditor/tests/imageeditor-adjustments-pane.tsx

@@ -0,0 +1,14 @@
+import { ImageEditorAdjustments } from '..';
+
+
+export default () => (
+    <>
+        <div id="test-area" className="k-d-grid k-grid-cols-1">
+
+            <h4>Image Editor Adjustments Pane</h4>
+
+            <ImageEditorAdjustments contentHeight="640px" />
+
+        </div>
+    </>
+);

package/src/imageeditor/tests/imageeditor-blur-pane.tsx

@@ -0,0 +1,29 @@
+import { ImageEditorBlur } from '..';
+
+
+export default () =>(
+    <>
+        <div id="test-area" className="k-d-grid k-grid-cols-1">
+
+            <h4>Image Editor Blur Pane &mdash; Rectangular Markee</h4>
+
+            <ImageEditorBlur contentHeight="482px" shape="rectangular" intensity={16}>
+                <canvas width="494" height="307" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover", filter: "blur(8px)" }}></canvas>
+                <div className="k-imageeditor-crop-overlay">
+                    <div className="k-imageeditor-crop" style={{ borderStyle: "dashed" }}></div>
+                </div>
+            </ImageEditorBlur>
+
+            <h4>Image Editor Blur Pane &mdash; Elliptical Markee</h4>
+
+            <ImageEditorBlur contentHeight="482px" shape="elliptical" intensity={18}>
+                <canvas width="494" height="307" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover" }}></canvas>
+                <canvas width="494" height="307" aria-hidden="true" style={{ position: "absolute", insetBlockStart: 0, insetInlineStart: 0, backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover", filter: "blur(8px)", clipPath: "ellipse(160px 98.5px at center)" }}></canvas>
+                <div className="k-imageeditor-crop-overlay">
+                    <div className="k-imageeditor-crop" style={{ width: "320px", height: "197px", borderStyle: "dashed", borderRadius: "50%", insetInlineStart: "50%", insetBlockStart: "50%", transform: "translate(-50%, -50%)" }}></div>
+                </div>
+            </ImageEditorBlur>
+
+        </div>
+    </>
+);

package/src/imageeditor/tests/imageeditor-crop-pane.tsx

@@ -3,14 +3,15 @@ import { ImageEditorCrop } from '..';
 
 export default () =>(
     <>
-        <div id="test-area" className="k-d-grid k-grid-cols-1">
+        <div id="test-area" className="k-d-grid">
 
             <h4>Image Editor Crop Pane</h4>
 
             <ImageEditorCrop contentHeight="482px">
-                <canvas width="700" height="400" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundPosition: "50px -350px" }}></canvas>
+                <canvas width="700" height="400" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundPosition: "50px -350px" }}></canvas>
                 <div className="k-imageeditor-crop-overlay">
                     <div className="k-imageeditor-crop" style={{ width: "400px", height: "400px", backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundClip: "content-box", backgroundPosition: "748px -350px" }}>
+                        <div className="k-imageeditor-crop-grid"></div>
                         <span className="k-resize-handle k-resize-nw"></span>
                         <span className="k-resize-handle k-resize-n"></span>
                         <span className="k-resize-handle k-resize-ne"></span>

package/src/imageeditor/tests/imageeditor-export-dialog.tsx

@@ -0,0 +1,85 @@
+import { ImageEditor } from '..';
+import { Button } from '../../button';
+import { Dialog } from '../../dialog';
+import { Form, FormField, FormHint } from '../../form';
+import { Textbox } from '../../textbox';
+import { RadioGroup, RadioItem, RadioButtonWithLabelAfter } from '../../radio';
+
+const styles = `
+    .k-dialog-wrapper {
+        position: absolute;
+    }
+    .k-overlay {
+        position: absolute;
+    }
+`;
+
+export default () => (
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-1">
+
+            <h4>Image Editor Export Dialog</h4>
+
+            <div className="k-pos-relative">
+                <ImageEditor contentHeight="482px">
+                    <canvas
+                        width="860"
+                        height="430"
+                        role="img"
+                        aria-label="Image being edited"
+                        style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover" }}
+                    ></canvas>
+                </ImageEditor>
+
+                <Dialog
+                    title="Export Image"
+                    actions={[ 'x' ]}
+                    actionButtonsAlign="end"
+                    style={{ width: "520px" }}
+                    actionButtons={
+                        <>
+                            <Button>Cancel</Button>
+                            <Button themeColor="primary">Export</Button>
+                        </>
+                    }
+                >
+                    <div className="k-imageeditor-dialog-row">
+                        <div>
+                            <img
+                                src="/packages/html/assets/sofia.jpg"
+                                alt="Preview of the exported image"
+                                style={{ width: "144px", height: "144px", objectFit: "cover", borderRadius: "4px", border: "1px solid var(--kendo-color-secondary, #9c27b0)" }}
+                            />
+                            <FormHint>Size: 12.34 MB</FormHint>
+                        </div>
+                        <Form tag="div" style={{ flex: "1" }}>
+                            <FormField
+                                label="File Name"
+                                editorId="export-file-name"
+                                editor={ <Textbox id="export-file-name" showClearButton={false} value="sofia" /> }
+                            />
+                            <FormField
+                                label="File Format"
+                                editor={
+                                    <RadioGroup layout="horizontal">
+                                        <RadioItem>
+                                            <RadioButtonWithLabelAfter id="export-format-jpeg" name="export-format" checked>JPEG</RadioButtonWithLabelAfter>
+                                        </RadioItem>
+                                        <RadioItem>
+                                            <RadioButtonWithLabelAfter id="export-format-png" name="export-format">PNG</RadioButtonWithLabelAfter>
+                                        </RadioItem>
+                                        <RadioItem>
+                                            <RadioButtonWithLabelAfter id="export-format-webp" name="export-format">WebP</RadioButtonWithLabelAfter>
+                                        </RadioItem>
+                                    </RadioGroup>
+                                }
+                            />
+                        </Form>
+                    </div>
+                </Dialog>
+            </div>
+
+        </div>
+    </>
+);

package/src/imageeditor/tests/imageeditor-filters-pane.tsx

@@ -0,0 +1,14 @@
+import { ImageEditorFilters } from '..';
+
+
+export default () => (
+    <>
+        <div id="test-area" className="k-d-grid k-grid-cols-1">
+
+            <h4>Image Editor Filters Pane &mdash; None Selected</h4>
+
+            <ImageEditorFilters contentHeight="640px" preset="none" />
+
+        </div>
+    </>
+);

package/src/imageeditor/tests/imageeditor-frames-pane.tsx

@@ -0,0 +1,22 @@
+import { ImageEditorFrames } from '..';
+
+
+export default () => (
+    <>
+        <div id="test-area" className="k-d-grid k-grid-cols-1">
+
+            <h4>Image Editor Frames Pane - None</h4>
+
+            <ImageEditorFrames contentHeight="640px" style="none" />
+
+            <h4>Image Editor Frames Pane - Single</h4>
+
+            <ImageEditorFrames contentHeight="640px" style="single" />
+
+            <h4>Image Editor Frames Pane - Multiple</h4>
+
+            <ImageEditorFrames contentHeight="640px" style="multiple" />
+
+        </div>
+    </>
+);

package/src/imageeditor/tests/imageeditor-insert-line-pane.tsx

@@ -0,0 +1,52 @@
+import { ImageEditorInsertLine } from '..';
+import { Button } from '../../button';
+import { FloatingToolbar } from '../../floating-toolbar/floating-toolbar.spec';
+
+
+export default () => (
+    <>
+        <div id="test-area" className="k-d-grid k-grid-cols-1">
+
+            <h4>Image Editor Insert Line Pane</h4>
+
+            <ImageEditorInsertLine contentHeight="640px">
+                <canvas width="494" height="307" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover" }}></canvas>
+                <div style={{ position: "absolute", top: "150px", left: "90px", width: "220px", height: "0" }}>
+                    <div style={{
+                        position: "absolute", left: "0", right: "0", top: "-1px", height: "2px",
+                        background: "#5558e8"
+                    }}></div>
+                    <div style={{
+                        position: "absolute", left: "0", right: "0", top: "-4px", height: "8px",
+                        backgroundImage: "radial-gradient(circle, #b0e855 45%, transparent 46%)",
+                        backgroundSize: "16px 8px", backgroundRepeat: "repeat-x", backgroundPosition: "left center"
+                    }}></div>
+                    <span style={{
+                        position: "absolute", left: "-7px", top: "-7px",
+                        width: "14px", height: "14px", borderRadius: "50%",
+                        background: "#fff", border: "2px solid #5558e8", boxSizing: "border-box"
+                    }}></span>
+                    <span style={{
+                        position: "absolute", right: "-9px", top: "-9px",
+                        width: "18px", height: "18px", transform: "rotate(45deg)",
+                        background: "#b0e855", border: "2px solid #5558e8", boxSizing: "border-box"
+                    }}>
+                        <span style={{
+                            position: "absolute", left: "50%", top: "50%",
+                            width: "5px", height: "5px", borderRadius: "50%",
+                            background: "#fff", transform: "translate(-50%, -50%)"
+                        }}></span>
+                    </span>
+                    <FloatingToolbar fillMode="flat" resizable offset={{ top: "36px", left: "-10px" }}>
+                        <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>
+            </ImageEditorInsertLine>
+
+        </div>
+    </>
+);