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

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

package/src/imageeditor/tests/imageeditor-sidebar-scrollable.tsx

@@ -0,0 +1,97 @@
+import { ImageEditor } from '..';
+import { Button } from '../../button';
+
+const sidebarItems = [
+    <Button fillMode="flat" key="sidebar-button-1" icon="image-resize" aria-label="Resize" />,
+    <Button fillMode="flat" key="sidebar-button-2" icon="crop" aria-label="Crop" />,
+    <Button fillMode="flat" key="sidebar-button-3" icon="rotate" aria-label="Rotate" />,
+    <div className="k-separator" key="sidebar-separator-1" />,
+    <Button fillMode="flat" key="sidebar-button-4" icon="free-text" aria-label="Text" />,
+    <Button fillMode="flat" key="sidebar-button-5" icon="shapes" aria-label="Shapes" />,
+    <Button fillMode="flat" key="sidebar-button-6" icon="drop-half-pixelated" aria-label="Blur" />,
+    <Button fillMode="flat" key="sidebar-button-7" icon="sliders-horizontal" aria-label="Adjustments" />,
+    <Button fillMode="flat" key="sidebar-button-8" icon="circles-three-intersecting" aria-label="Filters" />,
+    <div className="k-separator" key="sidebar-separator-2" />,
+    <Button fillMode="flat" key="sidebar-button-9" icon="frame-corners" aria-label="Frame" />,
+    <Button fillMode="flat" key="sidebar-button-10" icon="circle-half-tilted" aria-label="Shadow" />,
+    <Button fillMode="flat" key="sidebar-button-11" icon="image-resize" aria-label="Resize 2" />,
+    <Button fillMode="flat" key="sidebar-button-12" icon="crop" aria-label="Crop 2" />,
+    <Button fillMode="flat" key="sidebar-button-13" icon="rotate" aria-label="Rotate 2" />,
+];
+
+const styles = `
+    .k-imageeditor {
+        width: 500px;
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-1" style={{ gap: '40px' }}>
+
+            <div>
+                <h3>Vertical Scrollable Sidebar (Scroll Start)</h3>
+                <ImageEditor
+                    sidebarItems={sidebarItems}
+                    sidebarScrollable
+                    sidebarScrollingPosition="start"
+                    contentHeight="300px"
+                />
+            </div>
+
+            <div>
+                <h3>Vertical Scrollable Sidebar (Scroll End)</h3>
+                <ImageEditor
+                    sidebarItems={sidebarItems}
+                    sidebarScrollable
+                    sidebarScrollingPosition="end"
+                    contentHeight="300px"
+                />
+            </div>
+
+            <div>
+                <h3>Vertical Scrollable Sidebar (Scroll Both)</h3>
+                <ImageEditor
+                    sidebarItems={sidebarItems}
+                    sidebarScrollable
+                    sidebarScrollingPosition="both"
+                    contentHeight="300px"
+                />
+            </div>
+
+            <div>
+                <h3>Horizontal Scrollable Sidebar - Adaptive (Scroll Start)</h3>
+                <ImageEditor
+                    adaptive
+                    sidebarItems={sidebarItems}
+                    sidebarScrollable
+                    sidebarScrollingPosition="start"
+                    contentHeight="300px"
+                />
+            </div>
+
+            <div>
+                <h3>Horizontal Scrollable Sidebar - Adaptive (Scroll End)</h3>
+                <ImageEditor
+                    adaptive
+                    sidebarItems={sidebarItems}
+                    sidebarScrollable
+                    sidebarScrollingPosition="end"
+                    contentHeight="300px"
+                />
+            </div>
+
+            <div>
+                <h3>Horizontal Scrollable Sidebar - Adaptive (Scroll Both)</h3>
+                <ImageEditor
+                    adaptive
+                    sidebarItems={sidebarItems}
+                    sidebarScrollable
+                    sidebarScrollingPosition="both"
+                    contentHeight="300px"
+                />
+            </div>
+        </div>
+    </>
+);

package/src/numerictextbox/numerictextbox.spec.tsx

@@ -73,10 +73,10 @@ const defaultOptions = {
  * @ux {Format} The value is displayed using the configured number format.
  * @ux {Disabled state} When disabled, the input and spin buttons are non-interactive.
  */
-export const NumericTextbox: KendoComponent<KendoNumericTextboxProps & KendoNumericTextboxState & React.HTMLAttributes<HTMLSpanElement>> = (
+export const NumericTextbox: KendoComponent<KendoNumericTextboxProps & KendoNumericTextboxState & Omit<React.HTMLAttributes<HTMLSpanElement>, 'prefix'>> = (
     props: KendoNumericTextboxProps &
         KendoNumericTextboxState &
-        React.HTMLAttributes<HTMLSpanElement>
+        Omit<React.HTMLAttributes<HTMLSpanElement>, 'prefix'>
 ) => {
     const {
         size,