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

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>
+    </>
+);

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

@@ -0,0 +1,57 @@
+import { ImageEditorInsertShape } 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 Shape Pane</h4>
+
+            <ImageEditorInsertShape contentHeight="860px">
+                <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: "165px", height: "54px", top: "140px", left: "165px" }}>
+                    <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>
+                    <span className="k-scale-handle k-resize-nw"></span>
+                    <span className="k-scale-handle k-resize-ne"></span>
+                    <span className="k-scale-handle k-resize-sw"></span>
+                    <span className="k-scale-handle k-resize-se"></span>
+                    <span className="k-resize-handle k-resize-n"></span>
+                    <span className="k-resize-handle k-resize-s"></span>
+                    <span className="k-resize-handle k-resize-w"></span>
+                    <span className="k-resize-handle k-resize-e"></span>
+                    <FloatingToolbar fillMode="flat" resizable offset={{ top: "62px", 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>
+            </ImageEditorInsertShape>
+
+        </div>
+    </>
+);

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

@@ -0,0 +1,51 @@
+import { ImageEditorInsertText } 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 Text Pane</h4>
+
+            <ImageEditorInsertText 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 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>
+                    <span className="k-scale-handle k-resize-nw"></span>
+                    <span className="k-scale-handle k-resize-ne"></span>
+                    <span className="k-scale-handle k-resize-sw"></span>
+                    <span className="k-scale-handle k-resize-se"></span>
+                    <span className="k-resize-handle k-resize-n"></span>
+                    <span className="k-resize-handle k-resize-s"></span>
+                    <span className="k-resize-handle k-resize-w"></span>
+                    <span className="k-resize-handle k-resize-e"></span>
+                    <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>
+            </ImageEditorInsertText>
+
+        </div>
+    </>
+);

package/src/imageeditor/tests/imageeditor-interactive-states.tsx

@@ -0,0 +1,79 @@
+import { ImageEditor, ImageEditorDisabled } from '..';
+import { ImageEditorPlaceholder } from '../imageeditor-placeholder';
+import { Loader } from '../../loader';
+
+export default () => (
+    <div id="test-area" className="k-d-grid k-grid-cols-1">
+
+        <span>Empty</span>
+        <ImageEditorDisabled
+            contentHeight="260px"
+            placeholder={
+                <ImageEditorPlaceholder
+                    icon="image-add"
+                    title="Ready to create?"
+                    text="Upload a JPEG or PNG image to unlock the full capabilities of ImageEditor."
+                />
+            }
+        />
+
+        <span>Loading</span>
+        <ImageEditorDisabled
+            contentHeight="260px"
+            placeholder={
+                <ImageEditorPlaceholder>
+                    <Loader
+                        animation="pulsing"
+                        themeColor="secondary"
+                        size="large"
+                        className="k-imageeditor-placeholder-loader"
+                    />
+                    <div className="k-imageeditor-placeholder-hint">
+                        <div className="k-imageeditor-placeholder-title">Getting your canvas ready...</div>
+                        <div className="k-imageeditor-placeholder-text">Just a moment while we load your image!</div>
+                    </div>
+                </ImageEditorPlaceholder>
+            }
+        />
+
+        <span>Exporting</span>
+        <ImageEditor contentHeight="260px" exporting>
+            <canvas
+                width="400"
+                height="200"
+                role="img"
+                aria-label="Image being edited"
+                style={{
+                    backgroundImage: "url('/packages/html/assets/sofia.jpg')",
+                    backgroundSize: "cover",
+                    backgroundPosition: "center"
+                }}
+            ></canvas>
+        </ImageEditor>
+
+        <span>Error - Failed Upload</span>
+        <ImageEditorDisabled
+            contentHeight="260px"
+            placeholder={
+                <ImageEditorPlaceholder
+                    icon="file-error"
+                    title="Upload failed!"
+                    text="Try again so you can get back to creating."
+                />
+            }
+        />
+
+        <span>Error - Unsupported File Format</span>
+        <ImageEditorDisabled
+            contentHeight="260px"
+            placeholder={
+                <ImageEditorPlaceholder
+                    icon="file-error"
+                    title="Unsupported file format"
+                    text="Please upload a JPEG or PNG file."
+                />
+            }
+        />
+
+    </div>
+);

package/src/imageeditor/tests/imageeditor-option-list-states.tsx

@@ -0,0 +1,17 @@
+import { ImageEditorOptionList, ImageEditorOptionPreview } from '..';
+
+export default () => (
+    <div id="test-area" className="k-d-grid k-grid-cols-1">
+
+        <h4>Option List / States</h4>
+        <ImageEditorOptionList>
+            <ImageEditorOptionPreview label="Normal" />
+            <ImageEditorOptionPreview label="Hover" hover />
+            <ImageEditorOptionPreview label="Focused" focus />
+            <ImageEditorOptionPreview label="Selected" selected />
+            <ImageEditorOptionPreview label="Selected + Hover" selected hover />
+            <ImageEditorOptionPreview label="Selected + Focused" selected focus />
+        </ImageEditorOptionList>
+
+    </div>
+);

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

@@ -0,0 +1,29 @@
+import { ImageEditorPixelate } from '..';
+
+
+export default () =>(
+    <>
+        <div id="test-area" className="k-d-grid k-grid-cols-1">
+
+            <h4>Image Editor Pixelate Pane &mdash; Rectangular Markee</h4>
+
+            <ImageEditorPixelate contentHeight="482px" shape="rectangular" intensity={24}>
+                <canvas width="494" height="307" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia-pixelated.jpg')", backgroundSize: "cover", imageRendering: "pixelated" }}></canvas>
+                <div className="k-imageeditor-crop-overlay">
+                    <div className="k-imageeditor-crop" style={{ borderStyle: "dashed" }}></div>
+                </div>
+            </ImageEditorPixelate>
+
+            <h4>Image Editor Pixelate Pane &mdash; Elliptical Markee</h4>
+
+            <ImageEditorPixelate contentHeight="482px" shape="elliptical" intensity={24}>
+                <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-pixelated.jpg')", backgroundSize: "cover", imageRendering: "pixelated", 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>
+            </ImageEditorPixelate>
+
+        </div>
+    </>
+);

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

@@ -6,7 +6,21 @@ export default () =>(
         <div id="test-area" className="k-d-grid k-grid-cols-1">
 
             <h4>Image Editor Resize Pane</h4>
-            <ImageEditorResize contentHeight="482px"></ImageEditorResize>
+
+            <ImageEditorResize contentHeight="482px">
+                <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">
+                    <span className="k-scale-handle k-resize-nw"></span>
+                    <span className="k-scale-handle k-resize-ne"></span>
+                    <span className="k-scale-handle k-resize-sw"></span>
+                    <span className="k-scale-handle k-resize-se"></span>
+                    <span className="k-resize-handle k-resize-n"></span>
+                    <span className="k-resize-handle k-resize-s"></span>
+                    <span className="k-resize-handle k-resize-w"></span>
+                    <span className="k-resize-handle k-resize-e"></span>
+                </div>
+            </ImageEditorResize>
+
         </div>
     </>
 );

package/src/imageeditor/tests/imageeditor-responsive.tsx

@@ -0,0 +1,71 @@
+import { ImageEditorNormal, ImageEditorInsertShape, ImageEditorResizeHandles } from '..';
+import { Button } from '../../button';
+import { FloatingToolbar } from '../../floating-toolbar/floating-toolbar.spec';
+
+// Tablet-width container (768px) - the plain desktop layout (left icon sidebar, right side panel)
+// simply reflows into the available width; no adaptive/bottom-sheet behaviour kicks in here.
+const styles = `
+    #test-area {
+        display: flex;
+        gap: 24px;
+        flex-wrap: wrap;
+    }
+    #test-area .k-imageeditor {
+        width: 768px;
+    }
+`;
+
+export default () => (
+    <>
+        <style>{styles}</style>
+        <div id="test-area">
+
+            <div>
+                <h4>Tablet / Responsive / Unselected Tool</h4>
+                <ImageEditorNormal contentHeight="841px">
+                    <canvas width="659" height="410" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover", backgroundPosition: "center", backgroundRepeat: "no-repeat" }}></canvas>
+                </ImageEditorNormal>
+            </div>
+
+            <div>
+                <h4>Tablet / Responsive / Selected Tool / Panel Opened</h4>
+                <ImageEditorInsertShape contentHeight="841px">
+                    <canvas width="338" height="211" 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: "130px", height: "43px", top: "84px", left: "105px" }}>
+                        <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: "13px",
+                                lineHeight: 1,
+                                color: "#4a4500",
+                                whiteSpace: "nowrap"
+                            }}>Shape text</p>
+                        </div>
+                        <ImageEditorResizeHandles variant="mixed" />
+                        <FloatingToolbar fillMode="flat" resizable offset={{ top: "51px", 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>
+                </ImageEditorInsertShape>
+            </div>
+
+        </div>
+    </>
+);

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

@@ -0,0 +1,27 @@
+import { ImageEditorRotate } from '..';
+
+
+export default () =>(
+    <>
+        <div id="test-area" className="k-d-grid k-grid-cols-1">
+
+            <h4>Image Editor Rotate Pane</h4>
+
+            <ImageEditorRotate contentHeight="482px">
+                <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">
+                    <div className="k-imageeditor-crop-grid"></div>
+                    <span className="k-scale-handle k-resize-nw"></span>
+                    <span className="k-scale-handle k-resize-n"></span>
+                    <span className="k-scale-handle k-resize-ne"></span>
+                    <span className="k-scale-handle k-resize-w"></span>
+                    <span className="k-scale-handle k-resize-e"></span>
+                    <span className="k-scale-handle k-resize-sw"></span>
+                    <span className="k-scale-handle k-resize-s"></span>
+                    <span className="k-scale-handle k-resize-se"></span>
+                </div>
+            </ImageEditorRotate>
+
+        </div>
+    </>
+);

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

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