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

package/src/imageeditor/index.ts

@@ -6,13 +6,13 @@ export * from './imageeditor-pane';
 export * from './imageeditor-option-preview';
 export * from './imageeditor-option-list';
 export * from './imageeditor-preview-thumbnail';
+export * from './imageeditor-canvas.spec';
 export * from './imageeditor-resize-handles';
 export * from './imageeditor-rotate-handle';
 export * from './templates/imageeditor-normal';
 export * from './templates/imageeditor-resize';
 export * from './templates/imageeditor-rotate';
 export * from './templates/imageeditor-crop';
-export * from './templates/imageeditor-disabled';
 export * from './templates/imageeditor-insert-text';
 export * from './templates/imageeditor-insert-shape';
 export * from './templates/imageeditor-insert-line';
@@ -22,4 +22,16 @@ export * from './templates/imageeditor-filters';
 export * from './templates/imageeditor-adjustments';
 export * from './templates/imageeditor-frames';
 export * from './templates/imageeditor-shadow';
+export * from './templates/imageeditor-resize-adaptive';
+export * from './templates/imageeditor-crop-adaptive';
+export * from './templates/imageeditor-rotate-adaptive';
+export * from './templates/imageeditor-insert-text-adaptive';
+export * from './templates/imageeditor-insert-shape-adaptive';
+export * from './templates/imageeditor-insert-line-adaptive';
+export * from './templates/imageeditor-blur-adaptive';
+export * from './templates/imageeditor-pixelate-adaptive';
+export * from './templates/imageeditor-adjustments-adaptive';
+export * from './templates/imageeditor-filters-adaptive';
+export * from './templates/imageeditor-frames-adaptive';
+export * from './templates/imageeditor-shadow-adaptive';
 

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

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

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

@@ -1,53 +1,9 @@
-import { ImageEditor, ImageEditorPane } from "..";
+import { ImageEditor, ImageEditorPane, ImageEditorCanvas } from "..";
 import { Button } from "../../button";
 import { NumericTextbox } from "../../numerictextbox";
 import { Form, FormField } from "../../form";
 import { Slider } from "../../slider";
 
-const adjustmentsSidebarItems = [
-    <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" selected 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 AdjustmentSlider = ({ id, label, value, min = 0, max = 100 }: { id: string; label: string; value: number; min?: number; max?: number }) => (
-    <FormField
-        label={label}
-        editorId={id}
-        editor={
-            <div className="k-imageeditor-adjustment-editor">
-                <Slider
-                    className="k-imageeditor-adjustment-slider"
-                    aria-label={label}
-                    showButtons={false}
-                    showTicks={false}
-                    value={value}
-                    min={min}
-                    max={max}
-                    style={{ "--kendo-slider-start": 0, "--kendo-slider-end": (value - min) / (max - min) * 100 } as React.CSSProperties}
-                />
-                <NumericTextbox
-                    id={id}
-                    style={{ width: "80px", flex: "none" }}
-                    showClearButton={false}
-                    showSpinButton={false}
-                    value={String(value)}
-                />
-            </div>
-        }
-    />
-);
-
 export const ImageEditorAdjustments = ({
     brightness = 0,
     contrast = 0,
@@ -56,32 +12,99 @@ export const ImageEditorAdjustments = ({
     exposure = 0,
     blur = 0,
     opacity = 100,
+    isPristine = brightness === 0 && contrast === 0 && saturation === 0 && hue === 0 && exposure === 0 && blur === 0 && opacity === 100,
+    adaptive,
+    imageSrc,
     ...props
 }: any) => (
     <ImageEditor
-        sidebarItems={adjustmentsSidebarItems}
+        adaptive={adaptive}
+        activeTool="Adjustments"
         actionPane={
-            <ImageEditorPane title="Adjustments" actions={
+            <ImageEditorPane title="Adjustments" adaptive={adaptive} confirmDisabled={isPristine} actions={
                 <>
-                    <Button>Reset</Button>
-                    <Button themeColor="primary">Apply</Button>
+                    <Button disabled={isPristine}>Reset</Button>
+                    <Button themeColor="primary" disabled={isPristine}>Apply</Button>
                 </>
             }>
                 <Form tag="div">
-                    <AdjustmentSlider id="adjustments-brightness" label="Brightness" value={brightness} min={-100} max={100} />
-                    <AdjustmentSlider id="adjustments-contrast" label="Contrast" value={contrast} min={-100} max={100} />
-                    <AdjustmentSlider id="adjustments-saturation" label="Saturation" value={saturation} min={-100} max={100} />
-                    <AdjustmentSlider id="adjustments-hue" label="Hue" value={hue} min={-100} max={100} />
-                    <AdjustmentSlider id="adjustments-exposure" label="Exposure" value={exposure} min={-100} max={100} />
-                    <AdjustmentSlider id="adjustments-blur" label="Blur" value={blur} />
-                    <AdjustmentSlider id="adjustments-opacity" label="Opacity" value={opacity} />
+                    <FormField
+                        label="Brightness"
+                        editorId="adjustments-brightness"
+                        editor={
+                            <div className="k-imageeditor-adjustment-editor">
+                                <Slider className="k-imageeditor-adjustment-slider" aria-label="Brightness" showButtons={false} showTicks={false} value={brightness} min={-100} max={100} style={{ "--kendo-slider-start": 0, "--kendo-slider-end": (brightness + 100) / 2 } as React.CSSProperties} />
+                                <NumericTextbox id="adjustments-brightness" style={{ width: "80px", flex: "none" }} showClearButton={false} showSpinButton={false} value={String(brightness)} />
+                            </div>
+                        }
+                    />
+                    <FormField
+                        label="Contrast"
+                        editorId="adjustments-contrast"
+                        editor={
+                            <div className="k-imageeditor-adjustment-editor">
+                                <Slider className="k-imageeditor-adjustment-slider" aria-label="Contrast" showButtons={false} showTicks={false} value={contrast} min={-100} max={100} style={{ "--kendo-slider-start": 0, "--kendo-slider-end": (contrast + 100) / 2 } as React.CSSProperties} />
+                                <NumericTextbox id="adjustments-contrast" style={{ width: "80px", flex: "none" }} showClearButton={false} showSpinButton={false} value={String(contrast)} />
+                            </div>
+                        }
+                    />
+                    <FormField
+                        label="Saturation"
+                        editorId="adjustments-saturation"
+                        editor={
+                            <div className="k-imageeditor-adjustment-editor">
+                                <Slider className="k-imageeditor-adjustment-slider" aria-label="Saturation" showButtons={false} showTicks={false} value={saturation} min={-100} max={100} style={{ "--kendo-slider-start": 0, "--kendo-slider-end": (saturation + 100) / 2 } as React.CSSProperties} />
+                                <NumericTextbox id="adjustments-saturation" style={{ width: "80px", flex: "none" }} showClearButton={false} showSpinButton={false} value={String(saturation)} />
+                            </div>
+                        }
+                    />
+                    <FormField
+                        label="Hue"
+                        editorId="adjustments-hue"
+                        editor={
+                            <div className="k-imageeditor-adjustment-editor">
+                                <Slider className="k-imageeditor-adjustment-slider" aria-label="Hue" showButtons={false} showTicks={false} value={hue} min={-100} max={100} style={{ "--kendo-slider-start": 0, "--kendo-slider-end": (hue + 100) / 2 } as React.CSSProperties} />
+                                <NumericTextbox id="adjustments-hue" style={{ width: "80px", flex: "none" }} showClearButton={false} showSpinButton={false} value={String(hue)} />
+                            </div>
+                        }
+                    />
+                    <FormField
+                        label="Exposure"
+                        editorId="adjustments-exposure"
+                        editor={
+                            <div className="k-imageeditor-adjustment-editor">
+                                <Slider className="k-imageeditor-adjustment-slider" aria-label="Exposure" showButtons={false} showTicks={false} value={exposure} min={-100} max={100} style={{ "--kendo-slider-start": 0, "--kendo-slider-end": (exposure + 100) / 2 } as React.CSSProperties} />
+                                <NumericTextbox id="adjustments-exposure" style={{ width: "80px", flex: "none" }} showClearButton={false} showSpinButton={false} value={String(exposure)} />
+                            </div>
+                        }
+                    />
+                    <FormField
+                        label="Blur"
+                        editorId="adjustments-blur"
+                        editor={
+                            <div className="k-imageeditor-adjustment-editor">
+                                <Slider className="k-imageeditor-adjustment-slider" aria-label="Blur" showButtons={false} showTicks={false} value={blur} min={0} max={100} style={{ "--kendo-slider-start": 0, "--kendo-slider-end": blur } as React.CSSProperties} />
+                                <NumericTextbox id="adjustments-blur" style={{ width: "80px", flex: "none" }} showClearButton={false} showSpinButton={false} value={String(blur)} />
+                            </div>
+                        }
+                    />
+                    <FormField
+                        label="Opacity"
+                        editorId="adjustments-opacity"
+                        editor={
+                            <div className="k-imageeditor-adjustment-editor">
+                                <Slider className="k-imageeditor-adjustment-slider" aria-label="Opacity" showButtons={false} showTicks={false} value={opacity} min={0} max={100} style={{ "--kendo-slider-start": 0, "--kendo-slider-end": opacity } as React.CSSProperties} />
+                                <NumericTextbox id="adjustments-opacity" style={{ width: "80px", flex: "none" }} showClearButton={false} showSpinButton={false} value={String(opacity)} />
+                            </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>
+                <ImageEditorCanvas adaptive={adaptive} imageSrc={imageSrc} />
             </>
         }
         {...props} />

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

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

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

@@ -1,4 +1,4 @@
-import { ImageEditor, ImageEditorPane } from "..";
+import { ImageEditor, ImageEditorPane, ImageEditorCanvas } from "..";
 import { Button } from "../../button";
 import { NumericTextbox } from "../../numerictextbox";
 import { Form, FormField } from "../../form";
@@ -7,34 +7,18 @@ import { SegmentedControl, SegmentedControlButton } from "../../segmented-contro
 import { Slider } from "../../slider";
 import { InputSuffixText } from "../../input";
 
-
-const blurSidebarItems = [
-    <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 ImageEditorBlur = ({ selected = false, shape = "rectangular", intensity = 16, ...props }: any) => (
+export const ImageEditorBlur = ({ selected = false, shape = "rectangular", intensity = 0, adaptive, imageSrc, ...props }: any) => (
     <ImageEditor
-        sidebarItems={blurSidebarItems}
+        adaptive={adaptive}
+        activeTool="Blur"
         actionPane={
-            <ImageEditorPane title="Blur" actions={
+            <ImageEditorPane title="Blur" adaptive={adaptive} confirmDisabled={!selected} actions={
                 <>
-                    <Button>Reset</Button>
-                    <Button themeColor="primary">Apply</Button>
+                    <Button disabled={!selected}>Reset</Button>
+                    <Button themeColor="primary" disabled={!selected}>Apply</Button>
                 </>
             }>
-                <SegmentedControl thumbStyles={{ width: "50%" }} stretched aria-label="Redaction Tool" style={{ flexShrink: 0 }}>
+                <SegmentedControl thumbStyles={{ width: "50%" }} stretched aria-label="Redaction Tool">
                     <SegmentedControlButton icon="blur" selected>Blur</SegmentedControlButton>
                     <SegmentedControlButton icon="grid">Pixelate</SegmentedControlButton>
                 </SegmentedControl>
@@ -109,7 +93,7 @@ export const ImageEditorBlur = ({ selected = false, shape = "rectangular", inten
         }
 
         children={
-            <canvas width="494" height="307" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover" }}></canvas>
+            <ImageEditorCanvas adaptive={adaptive} imageSrc={imageSrc} />
         }
         {...props} />
 );

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

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

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

@@ -1,4 +1,5 @@
-import { ImageEditor, ImageEditorPane, ImageEditorOptionList, ImageEditorOptionPreview, ImageEditorResizeHandles } from "..";
+import { ImageEditor, ImageEditorPane, ImageEditorOptionList, ImageEditorOptionPreview, ImageEditorResizeHandles, ImageEditorCanvas } from "..";
+import { IMAGEEDITOR_ADAPTIVE_CANVAS_SIZE, IMAGEEDITOR_CANVAS_SIZE } from "../constants";
 import { Button } from "../../button";
 import { CheckboxWithLabelAfter } from "../../checkbox";
 import { NumericTextbox } from "../../numerictextbox";
@@ -6,30 +7,23 @@ import { Form, FormField, Fieldset } from "../../form";
 import { Icon } from "../../icon";
 import { RadioGroup, RadioItem, RadioButtonWithLabelAfter } from "../../radio";
 
-const cropSidebarItems = [
-    <Button fillMode="flat" key="sidebar-button-1" icon="image-resize" aria-label="Resize"></Button>,
-    <Button fillMode="flat" key="sidebar-button-2" icon="crop" selected 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 ImageEditorCrop = ({ cropWidth = 494, cropHeight = 307, ...props }: any) => (
+export const ImageEditorCrop = ({
+    cropWidth = 494,
+    cropHeight = 307,
+    isPristine = cropWidth === 494 && cropHeight === 307,
+    adaptive,
+    canvas = adaptive ? IMAGEEDITOR_ADAPTIVE_CANVAS_SIZE : IMAGEEDITOR_CANVAS_SIZE,
+    imageSrc,
+    ...props
+}: any) => (
     <ImageEditor
-        sidebarItems={cropSidebarItems}
+        adaptive={adaptive}
+        activeTool="Crop"
         actionPane={
-            <ImageEditorPane title="Crop" actions={
+            <ImageEditorPane title="Crop" adaptive={adaptive} confirmDisabled={isPristine} actions={
                 <>
-                    <Button>Reset</Button>
-                    <Button themeColor="primary">Apply</Button>
+                    <Button disabled={isPristine}>Reset</Button>
+                    <Button themeColor="primary" disabled={isPristine}>Apply</Button>
                 </>
             }>
                 <Form tag="div">
@@ -49,7 +43,7 @@ export const ImageEditorCrop = ({ cropWidth = 494, cropHeight = 307, ...props }:
                     <FormField
                         label="Aspect Ratio"
                         editor={
-                            <ImageEditorOptionList scrollable scrollingPosition="both">
+                            <ImageEditorOptionList scrollable>
                                 <ImageEditorOptionPreview selected><span className="k-imageeditor-option-label">Original</span></ImageEditorOptionPreview>
                                 <ImageEditorOptionPreview><span className="k-imageeditor-option-label">1:1</span></ImageEditorOptionPreview>
                                 <ImageEditorOptionPreview><span className="k-imageeditor-option-label">3:2</span></ImageEditorOptionPreview>
@@ -65,12 +59,12 @@ export const ImageEditorCrop = ({ cropWidth = 494, cropHeight = 307, ...props }:
                         <FormField
                             label="Width"
                             editorId="crop-width"
-                            editor={ <NumericTextbox id="crop-width" showClearButton={false} value={String(cropWidth)} prefix={<Icon icon="arrows-left-right" />} /> }
+                            editor={ <NumericTextbox id="crop-width" showClearButton={false} showSpinButton={false} value={String(cropWidth)} prefix={<Icon icon="arrows-left-right" />} /> }
                         />
                         <FormField
                             label="Height"
                             editorId="crop-height"
-                            editor={ <NumericTextbox id="crop-height" showClearButton={false} value={String(cropHeight)} prefix={<Icon icon="arrows-top-bottom" />} /> }
+                            editor={ <NumericTextbox id="crop-height" showClearButton={false} showSpinButton={false} value={String(cropHeight)} prefix={<Icon icon="arrows-top-bottom" />} /> }
                         />
                     </Fieldset>
                     <FormField editor={ <CheckboxWithLabelAfter id="crop-lock" checked>Lock Aspect Ratio</CheckboxWithLabelAfter> } />
@@ -80,10 +74,10 @@ export const ImageEditorCrop = ({ cropWidth = 494, cropHeight = 307, ...props }:
 
         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" style={{ "--crop-x": "0px", "--crop-y": "0px", "--crop-w": "494px", "--crop-h": "307px" } as React.CSSProperties}>
+                <ImageEditorCanvas {...canvas} imageSrc={imageSrc} />
+                <div className="k-imageeditor-crop-overlay" style={{ "--crop-x": "0px", "--crop-y": "0px", "--crop-w": `${canvas.width}px`, "--crop-h": `${canvas.height}px` } as React.CSSProperties}>
                     <div className="k-imageeditor-crop-dim"></div>
-                    <div className="k-imageeditor-crop" style={{ width: "494px", height: "307px" }}>
+                    <div className="k-imageeditor-crop" style={{ width: `${canvas.width}px`, height: `${canvas.height}px` }}>
                         <ImageEditorResizeHandles variant="crop" grid />
                     </div>
                 </div>

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

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

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

@@ -1,59 +1,25 @@
-import { ImageEditor, ImageEditorPane, ImageEditorOptionPreview, ImageEditorPreviewThumbnail } from "..";
+import { ImageEditor, ImageEditorPane, ImageEditorOptionPreview, ImageEditorPreviewThumbnail, ImageEditorCanvas } from "..";
 import { Button } from "../../button";
 import { Form, FormField } from "../../form";
 
-const filtersSidebarItems = [
-    <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" selected 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 filterPresets: { [key: string]: { label: string } } = {
-    "none": { label: "None" },
-    "black-white": { label: "Black and White" },
-    "greyscale": { label: "Greyscale" },
-    "sepia": { label: "Sepia" },
-    "warm": { label: "Warm" },
-    "cold": { label: "Cold" },
-    "chrome": { label: "Chrome" },
-    "invert": { label: "Invert" }
-};
-
-const FilterPreview = ({ presetKey, selected }: { presetKey: string; selected: boolean }) => {
-    const preset = filterPresets[presetKey];
-
-    return (
-        <ImageEditorOptionPreview key={presetKey} selected={selected} aria-label={preset.label}>
-            <ImageEditorPreviewThumbnail label={preset.label} />
-        </ImageEditorOptionPreview>
-    );
-};
-
-export const ImageEditorFilters = ({ preset = "none", ...props }: any) => (
+export const ImageEditorFilters = ({ preset = "none", adaptive, imageSrc, ...props }: any) => (
     <ImageEditor
-        sidebarItems={filtersSidebarItems}
+        adaptive={adaptive}
+        activeTool="Filters"
         actionPane={
-            <ImageEditorPane title="Filters" actions={
+            <ImageEditorPane title="Filters" adaptive={adaptive} confirmDisabled={preset === "none"} actions={
                 <>
-                    <Button>Reset</Button>
-                    <Button themeColor="primary">Apply</Button>
+                    <Button disabled={preset === "none"}>Reset</Button>
+                    <Button themeColor="primary" disabled={preset === "none"}>Apply</Button>
                 </>
             }>
                 <Form tag="div">
                     <FormField
                         editor={
                             <div className="k-imageeditor-option-grid">
-                                <FilterPreview presetKey="none" selected={preset === "none"} />
+                                <ImageEditorOptionPreview selected={preset === "none"} aria-label="None">
+                                    <ImageEditorPreviewThumbnail label="None" imageSrc={imageSrc} />
+                                </ImageEditorOptionPreview>
                             </div>
                         }
                     />
@@ -61,9 +27,15 @@ export const ImageEditorFilters = ({ preset = "none", ...props }: any) => (
                         label="Monochrome"
                         editor={
                             <div className="k-imageeditor-option-grid">
-                                <FilterPreview presetKey="black-white" selected={preset === "black-white"} />
-                                <FilterPreview presetKey="greyscale" selected={preset === "greyscale"} />
-                                <FilterPreview presetKey="sepia" selected={preset === "sepia"} />
+                                <ImageEditorOptionPreview selected={preset === "black-white"} aria-label="Black and White">
+                                    <ImageEditorPreviewThumbnail label="Black and White" imageSrc={imageSrc} />
+                                </ImageEditorOptionPreview>
+                                <ImageEditorOptionPreview selected={preset === "greyscale"} aria-label="Greyscale">
+                                    <ImageEditorPreviewThumbnail label="Greyscale" imageSrc={imageSrc} />
+                                </ImageEditorOptionPreview>
+                                <ImageEditorOptionPreview selected={preset === "sepia"} aria-label="Sepia">
+                                    <ImageEditorPreviewThumbnail label="Sepia" imageSrc={imageSrc} />
+                                </ImageEditorOptionPreview>
                             </div>
                         }
                     />
@@ -71,9 +43,15 @@ export const ImageEditorFilters = ({ preset = "none", ...props }: any) => (
                         label="Color Temperature & Mood"
                         editor={
                             <div className="k-imageeditor-option-grid">
-                                <FilterPreview presetKey="warm" selected={preset === "warm"} />
-                                <FilterPreview presetKey="cold" selected={preset === "cold"} />
-                                <FilterPreview presetKey="chrome" selected={preset === "chrome"} />
+                                <ImageEditorOptionPreview selected={preset === "warm"} aria-label="Warm">
+                                    <ImageEditorPreviewThumbnail label="Warm" imageSrc={imageSrc} />
+                                </ImageEditorOptionPreview>
+                                <ImageEditorOptionPreview selected={preset === "cold"} aria-label="Cold">
+                                    <ImageEditorPreviewThumbnail label="Cold" imageSrc={imageSrc} />
+                                </ImageEditorOptionPreview>
+                                <ImageEditorOptionPreview selected={preset === "chrome"} aria-label="Chrome">
+                                    <ImageEditorPreviewThumbnail label="Chrome" imageSrc={imageSrc} />
+                                </ImageEditorOptionPreview>
                             </div>
                         }
                     />
@@ -81,7 +59,9 @@ export const ImageEditorFilters = ({ preset = "none", ...props }: any) => (
                         label="Color Reversal"
                         editor={
                             <div className="k-imageeditor-option-grid">
-                                <FilterPreview presetKey="invert" selected={preset === "invert"} />
+                                <ImageEditorOptionPreview selected={preset === "invert"} aria-label="Invert">
+                                    <ImageEditorPreviewThumbnail label="Invert" imageSrc={imageSrc} />
+                                </ImageEditorOptionPreview>
                             </div>
                         }
                     />
@@ -91,7 +71,7 @@ export const ImageEditorFilters = ({ preset = "none", ...props }: any) => (
 
         children={
             <>
-                <canvas width="494" height="307" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover" }}></canvas>
+                <ImageEditorCanvas adaptive={adaptive} imageSrc={imageSrc} />
             </>
         }
         {...props} />

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

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