@dosgato/dialog 0.0.33 → 0.0.35

package/cropper/FieldCropper.svelte

@@ -0,0 +1,219 @@
+<script>import { resize, ScreenReaderOnly } from '@txstate-mws/svelte-components';
+import { isNotBlank, randomid } from 'txstate-utils';
+import FieldStandard from '../FieldStandard.svelte';
+import { CropperStore } from './cropper';
+export let id = undefined;
+export let path;
+export let imageSrc;
+export let selectionAspectRatio = 1;
+export let minSelection = 0; // percentage of image, a value 0-1
+export let label = '';
+export let required = false;
+export let conditional = undefined;
+export let helptext = undefined;
+const store = new CropperStore({ width: 0, height: 0, minSelection, targetAspect: selectionAspectRatio });
+const { output, selection } = store;
+let setVal;
+let value;
+function init(spValue, spSetVal) {
+    setVal = spSetVal;
+    value = spValue;
+}
+$: store.setOutput(value);
+$: setVal?.($output);
+let rect;
+function updateRect(..._) {
+    if (!container)
+        return false;
+    rect = container.getBoundingClientRect();
+    store.updateDimensions(rect.width, rect.height);
+    return true;
+}
+function isInside(clientX, clientY) {
+    return !(clientX < rect.left || clientX > rect.right || clientY > rect.bottom || clientY < rect.top);
+}
+function relativeToRect(clientX, clientY) {
+    return [Math.min(Math.max(0, clientX - rect.left), rect.width), Math.min(Math.max(0, clientY - rect.top), rect.height)];
+}
+let container;
+function onMouseDown(e) {
+    if (!updateRect())
+        return;
+    if (e instanceof TouchEvent && e.touches.length > 1)
+        return;
+    const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
+    const clientY = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY;
+    if (isInside(clientX, clientY)) {
+        e.preventDefault();
+        store.startDrag(clientX - rect.left, clientY - rect.top);
+    }
+}
+function onMouseMove(e) {
+    if (!updateRect())
+        return;
+    if (e instanceof TouchEvent && e.touches.length > 1)
+        return;
+    const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
+    const clientY = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY;
+    if (e instanceof MouseEvent && !e.buttons && $store.drag)
+        store.endDrag();
+    if (isInside(clientX, clientY) || $store.drag)
+        store.mouseMove(...relativeToRect(clientX, clientY));
+}
+function onMouseUp(e) {
+    if (!updateRect())
+        return;
+    store.endDrag();
+    const clientX = e instanceof MouseEvent ? e.clientX : e.changedTouches[0].clientX;
+    const clientY = e instanceof MouseEvent ? e.clientY : e.changedTouches[0].clientY;
+    if (isInside(clientX, clientY)) {
+        store.mouseMove(...relativeToRect(clientX, clientY));
+        container?.querySelector('.selectionHilite')?.focus();
+    }
+}
+function onMaximize() {
+    if (!updateRect())
+        return;
+    store.maximize();
+}
+function onKeyDown(type) {
+    return (e) => {
+        const tl = type === 'tl';
+        const tr = type === 'tr';
+        const bl = type === 'bl';
+        const br = type === 'br';
+        const left = e.key === 'ArrowLeft';
+        const right = e.key === 'ArrowRight';
+        const up = e.key === 'ArrowUp';
+        const down = e.key === 'ArrowDown';
+        if (left || right || up || down) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        else
+            return;
+        const step = e.shiftKey ? (e.altKey || e.metaKey ? 80 : 20) : (e.altKey || e.metaKey ? 40 : 1);
+        if (type === 'move') {
+            store.move(left ? -1 * step : (right ? step : 0), up ? -1 * step : (down ? step : 0));
+        }
+        else {
+            store.expand(type, ((tl || bl) && right) || ((tl || tr) && down) || ((tr || br) && left) || ((bl || br) && up) ? -1 * step : step);
+        }
+    };
+}
+$: updateRect(container);
+const descid = randomid();
+const movedescid = randomid();
+let focusWithin = false;
+</script>
+
+<svelte:window on:mousemove={onMouseMove} on:mouseup={onMouseUp} on:touchend={onMouseUp} on:touchcancel={onMouseUp} />
+<FieldStandard bind:id {label} {path} {required} {conditional} {helptext} {descid} let:value let:setVal let:helptextid>
+  {@const _ = init(value, setVal)}
+  {#if isNotBlank(imageSrc)}
+    <div on:focusin={() => { focusWithin = true }} on:focusout={() => { focusWithin = false }}>
+      <div bind:this={container} use:resize on:resize={() => updateRect()} class="crop-image-container" on:mousedown={onMouseDown} on:touchstart={onMouseDown} on:touchmove={onMouseMove} style:cursor={$store.cursor}>
+        <img class="crop-image" src={imageSrc} alt="" />
+        {#if $selection && $output}
+          <div class='crop-bg'>
+            <img class='crop-image clipped' src={imageSrc} alt="" style:clip-path="polygon({$output.left}% {$output.top}%, {100 - $output.right}% {$output.top}%, {100 - $output.right}% {100 - $output.bottom}%, {$output.left}% {100 - $output.bottom}%, {$output.left}% {$output.top}%)" />
+          </div>
+          <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+          <div class='selectionHilite' {id} tabindex="0" on:keydown={onKeyDown('move')}
+            aria-labelledby={descid}
+            aria-describedby="{movedescid} {helptextid ?? ''}"
+            style:left="{$selection.left}px"
+            style:top="{$selection.top}px"
+            style:width="{$selection.right - $selection.left}px"
+            style:height="{$selection.bottom - $selection.top}px"
+          >
+            <ScreenReaderOnly id={movedescid}>arrows move crop selection, hold shift and/or cmd/alt for bigger steps</ScreenReaderOnly>
+            {#if focusWithin}
+              <ScreenReaderOnly arialive="polite">top left x y coordinate is ({Math.round($selection.left)}, {Math.round($selection.top)}) bottom right x y coordinate is ({Math.round($selection.right)}, {Math.round($selection.bottom)})</ScreenReaderOnly>
+              <ScreenReaderOnly arialive="polite">crop area is {Math.round($store.width)} pixels wide by {Math.round($store.height)} pixels tall</ScreenReaderOnly>
+            {/if}
+            <div class='selectionCorner tl'
+              tabindex="0"
+              on:keydown={onKeyDown('tl')}
+            >
+              <ScreenReaderOnly>arrows adjust crop size, bottom right is fixed, hold shift and/or cmd/alt for bigger steps</ScreenReaderOnly>
+            </div>
+            <div class='selectionCorner tr'
+              tabindex="0"
+              on:keydown={onKeyDown('tr')}
+            >
+              <ScreenReaderOnly>arrows adjust crop size, bottom left is fixed, hold shift and/or cmd/alt for bigger steps</ScreenReaderOnly>
+            </div>
+            <div class='selectionCorner bl'
+              tabindex="0"
+              on:keydown={onKeyDown('bl')}
+            >
+              <ScreenReaderOnly>arrows adjust crop size, top right is fixed, hold shift and/or cmd/alt for bigger steps</ScreenReaderOnly>
+            </div>
+            <div class='selectionCorner br'
+              tabindex="0"
+              on:keydown={onKeyDown('br')}
+            >
+              <ScreenReaderOnly>arrows adjust crop size, top left is fixed, hold shift and/or cmd/alt for bigger steps</ScreenReaderOnly>
+            </div>
+          </div>
+        {/if}
+      </div>
+      <div class="action-buttons">
+        <button type="button" class='btn-center-max' on:click={onMaximize}>Center and Maximize</button>
+        <button type="button" class='btn-clear' on:click={() => store.reset()}>Clear</button>
+      </div>
+      <div class="cropper-instructions">
+        Click and drag to select a section of your image to use.
+      </div>
+    </div>
+  {:else}
+    Image not selected
+  {/if}
+</FieldStandard>
+
+<style>
+  .crop-image-container {
+    position: relative;
+    user-select: none;
+  }
+  .crop-image {
+    width: 100%;
+    display: block;
+    user-select: none;
+  }
+  .crop-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+  }
+  .selectionHilite {
+    position: absolute;
+    border: 1px dashed white;
+  }
+  .selectionCorner {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+  }
+  .selectionCorner.tl {
+    top: 0;
+    left: 0;
+  }
+  .selectionCorner.tr {
+    top: 0;
+    right: 0;
+  }
+  .selectionCorner.bl {
+    bottom: 0;
+    left: 0;
+  }
+  .selectionCorner.br {
+    bottom: 0;
+    right: 0;
+  }
+
+</style>

package/cropper/FieldCropper.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        path: string;
+        imageSrc: string;
+        selectionAspectRatio?: number | undefined;
+        minSelection?: number | undefined;
+        label?: string | undefined;
+        required?: boolean | undefined;
+        conditional?: boolean | undefined;
+        helptext?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FieldCropperProps = typeof __propDef.props;
+export type FieldCropperEvents = typeof __propDef.events;
+export type FieldCropperSlots = typeof __propDef.slots;
+export default class FieldCropper extends SvelteComponentTyped<FieldCropperProps, FieldCropperEvents, FieldCropperSlots> {
+}
+export {};

package/cropper/cropper.d.ts

@@ -0,0 +1,78 @@
+import { Store } from '@txstate-mws/svelte-store';
+export interface CropOutput {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+}
+export interface CropSelectionPx {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+}
+export interface ICropperStore {
+    width: number;
+    height: number;
+    targetAspect: number;
+    minSelection: number;
+    selection?: CropOutput;
+    cursor: 'crosshair' | 'move' | 'ew-resize' | 'ns-resize' | 'nesw-resize' | 'nwse-resize' | 'grabbing';
+    drag?: {
+        start: {
+            x: number;
+            y: number;
+        };
+        selection?: CropSelectionPx;
+        edge: {
+            left: boolean;
+            right: boolean;
+            top: boolean;
+            bottom: boolean;
+        };
+    };
+}
+export declare class CropperStore extends Store<ICropperStore> {
+    selection: import("@txstate-mws/svelte-store").DerivedStore<{
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+    } | undefined, ICropperStore>;
+    output: import("@txstate-mws/svelte-store").DerivedStore<CropOutput | undefined, ICropperStore>;
+    constructor(initialValue: Omit<ICropperStore, 'cursor'>);
+    setOutput(selection?: CropOutput): void;
+    updateDimensions(width: number, height: number): void;
+    /**
+     * The svelte component is responsible for making sure x and y are relative to the drawing area,
+     * e.g. (0, 0) is the top left corner of the drawing area
+     *
+     * negative coordinates are not allowed
+     */
+    startDrag(x: number, y: number): void;
+    endDrag(): void;
+    reset(): void;
+    maximize(): void;
+    convertToPct(sel: CropSelectionPx | undefined, width: number, height: number): {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+    } | undefined;
+    convertToPx(output: CropOutput | undefined, width: number, height: number): {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+    } | undefined;
+    determineSelection(startX: number, startY: number, x: number, y: number, v: ICropperStore): CropSelectionPx;
+    /**
+     * The svelte component is responsible for making sure x and y are relative to the drawing area,
+     * e.g. (0, 0) is the top left corner of the drawing area
+     *
+     * negative coordinates are not allowed
+     */
+    mouseMove(x: number, y: number): void;
+    move(dx: number, dy: number): void;
+    expand(type: 'tl' | 'tr' | 'bl' | 'br', by: number): void;
+}

package/cropper/cropper.js

@@ -0,0 +1,220 @@
+import { Store, derivedStore } from '@txstate-mws/svelte-store';
+import { clone } from 'txstate-utils';
+const edgeSensitivity = 4;
+export class CropperStore extends Store {
+    // coordinates of the selection edges relative to the top left of the draw area, in pixels
+    // e.g. { left: 0, right: 10 } means the selection is 10 pixels wide
+    selection = derivedStore(this, v => {
+        return this.convertToPx(v.selection, v.width, v.height);
+    });
+    output = derivedStore(this, 'selection');
+    constructor(initialValue) {
+        super({ ...initialValue, cursor: 'crosshair' });
+    }
+    setOutput(selection) {
+        this.update(v => ({ ...v, selection }));
+    }
+    updateDimensions(width, height) {
+        this.update(v => ({ ...v, width, height }));
+    }
+    /**
+     * The svelte component is responsible for making sure x and y are relative to the drawing area,
+     * e.g. (0, 0) is the top left corner of the drawing area
+     *
+     * negative coordinates are not allowed
+     */
+    startDrag(x, y) {
+        this.update(v => {
+            const r = clone(v);
+            const selection = this.convertToPx(r.selection, r.width, r.height);
+            r.drag = { start: { x, y }, edge: { left: false, top: false, right: false, bottom: false } };
+            if (selection) {
+                r.drag.edge = {
+                    left: Math.abs(x - selection.left) < edgeSensitivity,
+                    top: Math.abs(y - selection.top) < edgeSensitivity,
+                    right: Math.abs(selection.right - x) < edgeSensitivity,
+                    bottom: Math.abs(selection.bottom - y) < edgeSensitivity
+                };
+                if ((r.drag.edge.left && r.drag.edge.top) ||
+                    (r.drag.edge.top && r.drag.edge.right) ||
+                    (r.drag.edge.right && r.drag.edge.bottom) ||
+                    (r.drag.edge.bottom && r.drag.edge.left) ||
+                    (x > selection.left && x < selection.right &&
+                        y > selection.top && y < selection.bottom))
+                    r.drag.selection = selection;
+            }
+            return r;
+        });
+    }
+    endDrag() {
+        this.update(v => ({ ...v, drag: undefined }));
+    }
+    reset() {
+        this.update(v => ({ ...v, selection: undefined }));
+    }
+    maximize() {
+        this.update(v => {
+            const ar = v.width / v.height;
+            const s = {};
+            if (ar > v.targetAspect) { // draw area is wider than aspect, fill height
+                s.left = 100 * (ar - v.targetAspect) / (2 * ar);
+                s.right = s.left;
+                s.top = 0;
+                s.bottom = 0;
+            }
+            else { // draw area is taller than aspect, fill width
+                s.left = 0;
+                s.right = 0;
+                s.top = 100 * (v.targetAspect - ar) / (2 * v.targetAspect);
+                s.bottom = s.top;
+            }
+            return { ...v, selection: s };
+        });
+    }
+    convertToPct(sel, width, height) {
+        if (!sel)
+            return undefined;
+        return {
+            left: 100.0 * sel.left / width,
+            right: 100.0 * (width - sel.right) / width,
+            top: 100.0 * sel.top / height,
+            bottom: 100.0 * (height - sel.bottom) / height
+        };
+    }
+    convertToPx(output, width, height) {
+        if (!output)
+            return undefined;
+        return {
+            left: output.left * width / 100.0,
+            right: width - output.right * width / 100.0,
+            top: output.top * height / 100.0,
+            bottom: height - output.bottom * height / 100.0
+        };
+    }
+    determineSelection(startX, startY, x, y, v) {
+        x = Math.min(v.width, Math.max(0, x));
+        y = Math.min(v.height, Math.max(0, y));
+        const dx = x - startX;
+        const dy = y - startY;
+        const dragar = Math.abs(dx / dy);
+        if (dragar > v.targetAspect) { // too wide, dy is dominant
+            const dragdx = Math.abs(dy * v.targetAspect);
+            return {
+                left: dx < 0 ? startX - dragdx : startX,
+                right: dx < 0 ? startX : startX + dragdx,
+                top: dy < 0 ? y : startY,
+                bottom: dy < 0 ? startY : y
+            };
+        }
+        else { // too tall, dx is dominant
+            const dragdy = Math.abs(dx / v.targetAspect);
+            return {
+                left: dx < 0 ? x : startX,
+                right: dx < 0 ? startX : x,
+                top: dy < 0 ? startY - dragdy : startY,
+                bottom: dy < 0 ? startY : startY + dragdy
+            };
+        }
+    }
+    /**
+     * The svelte component is responsible for making sure x and y are relative to the drawing area,
+     * e.g. (0, 0) is the top left corner of the drawing area
+     *
+     * negative coordinates are not allowed
+     */
+    mouseMove(x, y) {
+        this.update(v => {
+            const r = { ...v };
+            if (v.drag) {
+                let s = {};
+                const dx = x - v.drag.start.x;
+                const dy = y - v.drag.start.y;
+                if (v.drag.selection) { // adjust the selection
+                    r.cursor = 'grabbing';
+                    const old = v.drag.selection;
+                    if (v.drag.edge.left && v.drag.edge.top) { // expanding
+                        s = this.determineSelection(v.drag.selection.right, v.drag.selection.bottom, x, y, v);
+                    }
+                    else if (v.drag.edge.left && v.drag.edge.bottom) { // expanding
+                        s = this.determineSelection(v.drag.selection.right, v.drag.selection.top, x, y, v);
+                    }
+                    else if (v.drag.edge.right && v.drag.edge.top) { // expanding
+                        s = this.determineSelection(v.drag.selection.left, v.drag.selection.bottom, x, y, v);
+                    }
+                    else if (v.drag.edge.right && v.drag.edge.bottom) { // expanding
+                        s = this.determineSelection(v.drag.selection.left, v.drag.selection.top, x, y, v);
+                    }
+                    else { // moving
+                        const maxdx = Math.max(Math.min(v.width - old.right, dx), -1 * old.left);
+                        const maxdy = Math.max(Math.min(v.height - old.bottom, dy), -1 * old.top);
+                        s.left = old.left + maxdx;
+                        s.right = old.right + maxdx;
+                        s.top = old.top + maxdy;
+                        s.bottom = old.bottom + maxdy;
+                    }
+                }
+                else { // drawing a new selection
+                    s = this.determineSelection(v.drag.start.x, v.drag.start.y, x, y, v);
+                }
+                return { ...r, selection: this.convertToPct(s, v.width, v.height) };
+            }
+            else {
+                r.cursor = 'crosshair';
+                if (r.selection) {
+                    const selection = this.convertToPx(r.selection, r.width, r.height);
+                    const left = Math.abs(x - selection.left) < edgeSensitivity;
+                    const top = Math.abs(y - selection.top) < edgeSensitivity;
+                    const right = Math.abs(selection.right - x) < edgeSensitivity;
+                    const bottom = Math.abs(selection.bottom - y) < edgeSensitivity;
+                    const inside = x > selection.left && x < selection.right && y > selection.top && y < selection.bottom;
+                    if ((left && top) || (right && bottom))
+                        r.cursor = 'nwse-resize';
+                    else if ((right && top) || (left && bottom))
+                        r.cursor = 'nesw-resize';
+                    else if (inside)
+                        r.cursor = 'move';
+                }
+            }
+            return r;
+        });
+    }
+    move(dx, dy) {
+        this.update(v => {
+            if (!v.selection)
+                return v;
+            const selection = this.convertToPx(v.selection, v.width, v.height);
+            if (dx < 0 && Math.abs(dx) > selection.left)
+                dx = -1 * selection.left;
+            if (dx > 0 && dx > v.width - selection.right)
+                dx = v.width - selection.right;
+            if (dy < 0 && Math.abs(dy) > selection.top)
+                dy = -1 * selection.top;
+            if (dy > 0 && dy > v.height - selection.bottom)
+                dy = v.height - selection.bottom;
+            selection.left += dx;
+            selection.right += dx;
+            selection.top += dy;
+            selection.bottom += dy;
+            return { ...v, selection: this.convertToPct(selection, v.width, v.height) };
+        });
+    }
+    expand(type, by) {
+        this.update(v => {
+            if (!v.selection)
+                return v;
+            const curr = this.convertToPx(v.selection, v.width, v.height);
+            const dx = by * v.targetAspect;
+            const dy = by / v.targetAspect;
+            let s;
+            if (type === 'tl')
+                s = this.determineSelection(curr.right, curr.bottom, curr.left - dx, curr.top - dy, v);
+            else if (type === 'tr')
+                s = this.determineSelection(curr.left, curr.bottom, curr.right + dx, curr.top - dy, v);
+            else if (type === 'bl')
+                s = this.determineSelection(curr.right, curr.top, curr.left - dx, curr.bottom + dy, v);
+            else if (type === 'br')
+                s = this.determineSelection(curr.left, curr.top, curr.right + dx, curr.bottom + dy, v);
+            return { ...v, selection: this.convertToPct(s, v.width, v.height) };
+        });
+    }
+}

package/cropper/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FieldCropper } from './FieldCropper.svelte';
+export * from './cropper.js';

package/cropper/index.js

@@ -0,0 +1,2 @@
+export { default as FieldCropper } from './FieldCropper.svelte';
+export * from './cropper.js';

package/helpers.d.ts

@@ -1 +1 @@
-export declare function getDescribedBy(ids: string[]): string;
+export declare function getDescribedBy(ids: (string | undefined)[]): string | null;

package/iconpicker/FieldIconPicker.svelte

@@ -105,7 +105,7 @@ function onKeyDown(e) {
 
 <FieldStandard bind:id {path} {descid} {label} {required} {defaultValue} {conditional} {helptext} let:value let:valid let:invalid let:id let:onBlur let:setVal let:messagesid let:helptextid>
   <Icon icon={`${value.prefix === 'fab' ? 'fa-brands' : 'fa-solid'}:${value.icon.slice(3)}`}/>
-  <button id="btnSelectIcon" on:click={() => { modalOpen = true }} aria-describedby={getDescribedBy([descid, messagesid, helptextid])}>Select New Icon</button>
+  <button type="button" id="btnSelectIcon" on:click={() => { modalOpen = true }} aria-describedby={getDescribedBy([descid, messagesid, helptextid])}>Select New Icon</button>
   {#if modalOpen}
   <Modal>
     <section>
@@ -117,7 +117,7 @@ function onKeyDown(e) {
           <div class="filters">
             <div class="search-wrapper">
               <input bind:value={searchVal} id="search_for" placeholder="Search Icons" on:keyup={onSearch}/>
-              <label for="search_for" class="fa fa-search" rel="tooltip" title="search"></label>
+              <label for="search_for" class="fa fa-search" title="search"></label>
             </div>
             <select bind:value={category} class="icon-category" aria-label="Select Category" on:change={onSelectCategory}>
               <option value="all">All</option>
@@ -143,8 +143,8 @@ function onKeyDown(e) {
         </div>
       </div>
       <footer class="actions">
-        <button aria-describedby="{labelid} {descid}" on:click={onCancel(value)}>Cancel</button>
-        <button aria-describedby="{labelid} {descid}" on:click={onSaveIconSelection(setVal)}>Save Changes</button>
+        <button type="button" aria-describedby="{labelid} {descid}" on:click={onCancel(value)}>Cancel</button>
+        <button type="button" aria-describedby="{labelid} {descid}" on:click={onSaveIconSelection(setVal)}>Save Changes</button>
       </footer>
     </section>
   </Modal>
@@ -192,7 +192,7 @@ function onKeyDown(e) {
   }
 
   .icon-modal-content fieldset {
-    max-height: 80%;
+    max-height: 75vh;
     overflow-y: scroll;
   }
 

package/iconpicker/FieldIconPicker.svelte.d.ts

@@ -3,12 +3,12 @@ declare const __propDef: {
     props: {
         id?: string | undefined;
         path: string;
-        label?: string;
-        required?: boolean;
+        label?: string | undefined;
+        required?: boolean | undefined;
         defaultValue?: {
             icon: string;
             prefix: string;
-        };
+        } | undefined;
         conditional?: boolean | undefined;
         helptext?: string | undefined;
     };

package/index.d.ts

@@ -40,4 +40,4 @@ export * from './iconpicker/index.js';
 export * from './colorpicker/index.js';
 export * from './helpers.js';
 export * from './tree/index.js';
-export * from './imagecropper/index.js';
+export * from './cropper/index.js';

package/index.js

@@ -40,4 +40,4 @@ export * from './iconpicker/index.js';
 export * from './colorpicker/index.js';
 export * from './helpers.js';
 export * from './tree/index.js';
-export * from './imagecropper/index.js';
+export * from './cropper/index.js';