@paperless/core 2.0.1-beta.2 → 2.0.1-beta.21

package/dist/cjs/p-cropper.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-02e05522.js');
+const index = require('./index-3f9bbc0c.js');
 const clsx = require('./clsx-fc789adc.js');
 
 const IS_BROWSER = typeof window !== 'undefined' && typeof window.document !== 'undefined';
@@ -546,9 +546,9 @@ class CropperElement extends HTMLElement {
         }
     }
 }
-CropperElement.$version = '2.0.0-beta.4';
+CropperElement.$version = '2.0.0';
 
-var style$7 = `:host{display:block;min-height:100px;min-width:200px;overflow:hidden;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([background]){background-color:#fff;background-image:repeating-linear-gradient(45deg,#ccc 25%,transparent 0,transparent 75%,#ccc 0,#ccc),repeating-linear-gradient(45deg,#ccc 25%,transparent 0,transparent 75%,#ccc 0,#ccc);background-image:repeating-conic-gradient(#ccc 0 25%,#fff 0 50%);background-position:0 0,.5rem .5rem;background-size:1rem 1rem}:host([disabled]){pointer-events:none}:host([disabled]):after{bottom:0;content:"";cursor:not-allowed;display:block;left:0;pointer-events:none;position:absolute;right:0;top:0}`;
+var style$7 = `:host{display:block;min-height:100px;min-width:200px;overflow:hidden;position:relative;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([background]){background-color:#fff;background-image:repeating-linear-gradient(45deg,#ccc 25%,transparent 0,transparent 75%,#ccc 0,#ccc),repeating-linear-gradient(45deg,#ccc 25%,transparent 0,transparent 75%,#ccc 0,#ccc);background-image:repeating-conic-gradient(#ccc 0 25%,#fff 0 50%);background-position:0 0,.5rem .5rem;background-size:1rem 1rem}:host([disabled]){pointer-events:none}:host([disabled]):after{bottom:0;content:"";cursor:not-allowed;display:block;left:0;pointer-events:none;position:absolute;right:0;top:0}`;
 
 class CropperCanvas extends CropperElement {
     constructor() {
@@ -991,11 +991,11 @@ class CropperCanvas extends CropperElement {
     }
 }
 CropperCanvas.$name = CROPPER_CANVAS;
-CropperCanvas.$version = '2.0.0-beta.4';
+CropperCanvas.$version = '2.0.0';
 
 var style$6 = `:host{display:inline-block}img{display:block;height:100%;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}`;
 
-const canvasCache$2 = new WeakMap();
+const canvasCache$3 = new WeakMap();
 const NATIVE_ATTRIBUTES = [
     'alt',
     'crossorigin',
@@ -1018,20 +1018,22 @@ class CropperImage extends CropperElement {
         this.$actionStartTarget = null;
         this.$style = style$6;
         this.$image = new Image();
-        this.rotatable = true;
-        this.scalable = true;
-        this.skewable = true;
+        this.initialCenterSize = 'contain';
+        this.rotatable = false;
+        this.scalable = false;
+        this.skewable = false;
         this.slottable = false;
-        this.translatable = true;
+        this.translatable = false;
     }
     set $canvas(element) {
-        canvasCache$2.set(this, element);
+        canvasCache$3.set(this, element);
     }
     get $canvas() {
-        return canvasCache$2.get(this);
+        return canvasCache$3.get(this);
     }
     static get observedAttributes() {
         return super.observedAttributes.concat(NATIVE_ATTRIBUTES, [
+            'initial-center-size',
             'rotatable',
             'scalable',
             'skewable',
@@ -1048,6 +1050,19 @@ class CropperImage extends CropperElement {
             this.$image.setAttribute(name, newValue);
         }
     }
+    $propertyChangedCallback(name, oldValue, newValue) {
+        if (Object.is(newValue, oldValue)) {
+            return;
+        }
+        super.$propertyChangedCallback(name, oldValue, newValue);
+        switch (name) {
+            case 'initialCenterSize':
+                this.$nextTick(() => {
+                    this.$center(newValue);
+                });
+                break;
+        }
+    }
     connectedCallback() {
         super.connectedCallback();
         const { $image } = this;
@@ -1105,7 +1120,7 @@ class CropperImage extends CropperElement {
             height: $image.naturalHeight,
         });
         if (this.$canvas) {
-            this.$center('cover');
+            this.$center(this.initialCenterSize);
         }
     }
     $handleAction(event) {
@@ -1131,13 +1146,18 @@ class CropperImage extends CropperElement {
             switch (action) {
                 case ACTION_MOVE:
                     if (this.translatable) {
-                        const cropperSelectionTagName = this.$getTagNameOf(CROPPER_SELECTION);
-                        let selection = $canvas.querySelector(cropperSelectionTagName);
-                        if (selection && selection.multiple && !selection.active) {
-                            selection = $canvas.querySelector(`${cropperSelectionTagName}[active]`);
+                        let $selection = null;
+                        if (relatedEvent) {
+                            $selection = relatedEvent.target.closest(this.$getTagNameOf(CROPPER_SELECTION));
+                        }
+                        if (!$selection) {
+                            $selection = $canvas.querySelector(this.$getTagNameOf(CROPPER_SELECTION));
                         }
-                        if (!selection || selection.hidden || !selection.movable
-                            || !(this.$actionStartTarget && selection.contains(this.$actionStartTarget))) {
+                        if ($selection && $selection.multiple && !$selection.active) {
+                            $selection = $canvas.querySelector(`${this.$getTagNameOf(CROPPER_SELECTION)}[active]`);
+                        }
+                        if (!$selection || $selection.hidden || !$selection.movable || $selection.dynamic
+                            || !(this.$actionStartTarget && $selection.contains(this.$actionStartTarget))) {
                             this.$move(detail.endX - detail.startX, detail.endY - detail.startY);
                         }
                     }
@@ -1156,8 +1176,13 @@ class CropperImage extends CropperElement {
                 case ACTION_SCALE:
                     if (this.scalable) {
                         if (relatedEvent) {
-                            const { x, y } = this.getBoundingClientRect();
-                            this.$zoom(detail.scale, relatedEvent.clientX - x, relatedEvent.clientY - y);
+                            const $selection = relatedEvent.target.closest(this.$getTagNameOf(CROPPER_SELECTION));
+                            if (!$selection
+                                || !$selection.zoomable
+                                || ($selection.zoomable && $selection.dynamic)) {
+                                const { x, y } = this.getBoundingClientRect();
+                                this.$zoom(detail.scale, relatedEvent.clientX - x, relatedEvent.clientY - y);
+                            }
                         }
                         else {
                             this.$zoom(detail.scale);
@@ -1192,7 +1217,7 @@ class CropperImage extends CropperElement {
                             const moveX = x - originX;
                             const moveY = y - originY;
                             const translateX = ((moveX * d) - (c * moveY)) / ((a * d) - (c * b));
-                            const translateY = (moveY - (b * translateX)) / d;
+                            const translateY = ((moveY * a) - (b * moveX)) / ((a * d) - (c * b));
                             /**
                              * Equals to
                              * this.$rotate(rotate, x, y);
@@ -1295,7 +1320,7 @@ class CropperImage extends CropperElement {
         if (this.translatable && isNumber(x) && isNumber(y)) {
             const [a, b, c, d] = this.$matrix;
             const e = ((x * d) - (c * y)) / ((a * d) - (c * b));
-            const f = (y - (b * e)) / d;
+            const f = ((y * a) - (b * x)) / ((a * d) - (c * b));
             this.$translate(e, f);
         }
         return this;
@@ -1310,7 +1335,7 @@ class CropperImage extends CropperElement {
         if (this.translatable && isNumber(x) && isNumber(y)) {
             const [a, b, c, d] = this.$matrix;
             const e = ((x * d) - (c * y)) / ((a * d) - (c * b));
-            const f = (y - (b * e)) / d;
+            const f = ((y * a) - (b * x)) / ((a * d) - (c * b));
             this.$setTransform(a, b, c, d, e, f);
         }
         return this;
@@ -1338,7 +1363,7 @@ class CropperImage extends CropperElement {
                 const moveX = x - originX;
                 const moveY = y - originY;
                 const translateX = ((moveX * d) - (c * moveY)) / ((a * d) - (c * b));
-                const translateY = (moveY - (b * translateX)) / d;
+                const translateY = ((moveY * a) - (b * moveX)) / ((a * d) - (c * b));
                 /**
                  * Equals to
                  * this.$translate(translateX, translateX);
@@ -1378,7 +1403,7 @@ class CropperImage extends CropperElement {
             const moveX = x - originX;
             const moveY = y - originY;
             const translateX = ((moveX * d) - (c * moveY)) / ((a * d) - (c * b));
-            const translateY = (moveY - (b * translateX)) / d;
+            const translateY = ((moveY * a) - (b * moveX)) / ((a * d) - (c * b));
             /**
              * Equals to
              * this.$translate(translateX, translateX);
@@ -1481,10 +1506,11 @@ class CropperImage extends CropperElement {
                 && isNumber(d)
                 && isNumber(e)
                 && isNumber(f)) {
+                const oldMatrix = [...this.$matrix];
                 const newMatrix = [a, b, c, d, e, f];
                 if (this.$emit(EVENT_TRANSFORM, {
                     matrix: newMatrix,
-                    oldMatrix: this.$matrix,
+                    oldMatrix,
                 }) === false) {
                     return this;
                 }
@@ -1512,11 +1538,11 @@ class CropperImage extends CropperElement {
     }
 }
 CropperImage.$name = CROPPER_IMAGE;
-CropperImage.$version = '2.0.0-beta.4';
+CropperImage.$version = '2.0.0';
 
 var style$5 = `:host{display:block;height:0;left:0;outline:var(--theme-color) solid 1px;position:relative;top:0;width:0}:host([transparent]){outline-color:transparent}`;
 
-const canvasCache$1 = new WeakMap();
+const canvasCache$2 = new WeakMap();
 class CropperShade extends CropperElement {
     constructor() {
         super(...arguments);
@@ -1532,10 +1558,10 @@ class CropperShade extends CropperElement {
         this.themeColor = 'rgba(0, 0, 0, 0.65)';
     }
     set $canvas(element) {
-        canvasCache$1.set(this, element);
+        canvasCache$2.set(this, element);
     }
     get $canvas() {
-        return canvasCache$1.get(this);
+        return canvasCache$2.get(this);
     }
     static get observedAttributes() {
         return super.observedAttributes.concat([
@@ -1641,7 +1667,7 @@ class CropperShade extends CropperElement {
     }
 }
 CropperShade.$name = CROPPER_SHADE;
-CropperShade.$version = '2.0.0-beta.4';
+CropperShade.$version = '2.0.0';
 
 var style$4 = `:host{background-color:var(--theme-color);display:block}:host([action=move]),:host([action=select]){height:100%;left:0;position:absolute;top:0;width:100%}:host([action=move]){cursor:move}:host([action=select]){cursor:crosshair}:host([action$=-resize]){background-color:transparent;height:15px;position:absolute;width:15px}:host([action$=-resize]):after{background-color:var(--theme-color);content:"";display:block;height:5px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:5px}:host([action=n-resize]),:host([action=s-resize]){cursor:ns-resize;left:50%;transform:translateX(-50%);width:100%}:host([action=n-resize]){top:-8px}:host([action=s-resize]){bottom:-8px}:host([action=e-resize]),:host([action=w-resize]){cursor:ew-resize;height:100%;top:50%;transform:translateY(-50%)}:host([action=e-resize]){right:-8px}:host([action=w-resize]){left:-8px}:host([action=ne-resize]){cursor:nesw-resize;right:-8px;top:-8px}:host([action=nw-resize]){cursor:nwse-resize;left:-8px;top:-8px}:host([action=se-resize]){bottom:-8px;cursor:nwse-resize;right:-8px}:host([action=se-resize]):after{height:15px;width:15px}@media (pointer:coarse){:host([action=se-resize]):after{height:10px;width:10px}}@media (pointer:fine){:host([action=se-resize]):after{height:5px;width:5px}}:host([action=sw-resize]){bottom:-8px;cursor:nesw-resize;left:-8px}:host([plain]){background-color:transparent}`;
 
@@ -1664,11 +1690,11 @@ class CropperHandle extends CropperElement {
     }
 }
 CropperHandle.$name = CROPPER_HANDLE;
-CropperHandle.$version = '2.0.0-beta.4';
+CropperHandle.$version = '2.0.0';
 
 var style$3 = `:host{display:block;left:0;position:relative;right:0}:host([outlined]){outline:1px solid var(--theme-color)}:host([multiple]){outline:1px dashed hsla(0,0%,100%,.5)}:host([multiple]):after{bottom:0;content:"";cursor:pointer;display:block;left:0;position:absolute;right:0;top:0}:host([multiple][active]){outline-color:var(--theme-color);z-index:1}:host([multiple])>*{visibility:hidden}:host([multiple][active])>*{visibility:visible}:host([multiple][active]):after{display:none}`;
 
-const canvasCache = new WeakMap();
+const canvasCache$1 = new WeakMap();
 class CropperSelection extends CropperElement {
     constructor() {
         super(...arguments);
@@ -1678,7 +1704,14 @@ class CropperSelection extends CropperElement {
         this.$onDocumentKeyDown = null;
         this.$action = '';
         this.$actionStartTarget = null;
+        this.$changing = false;
         this.$style = style$3;
+        this.$initialSelection = {
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0,
+        };
         this.x = 0;
         this.y = 0;
         this.width = 0;
@@ -1687,6 +1720,9 @@ class CropperSelection extends CropperElement {
         this.initialAspectRatio = NaN;
         this.initialCoverage = NaN;
         this.active = false;
+        // Deprecated as of v2.0.0-rc.0, use `dynamic` instead.
+        this.linked = false;
+        this.dynamic = false;
         this.movable = false;
         this.resizable = false;
         this.zoomable = false;
@@ -1696,19 +1732,21 @@ class CropperSelection extends CropperElement {
         this.precise = false;
     }
     set $canvas(element) {
-        canvasCache.set(this, element);
+        canvasCache$1.set(this, element);
     }
     get $canvas() {
-        return canvasCache.get(this);
+        return canvasCache$1.get(this);
     }
     static get observedAttributes() {
         return super.observedAttributes.concat([
             'active',
             'aspect-ratio',
+            'dynamic',
             'height',
             'initial-aspect-ratio',
             'initial-coverage',
             'keyboard',
+            'linked',
             'movable',
             'multiple',
             'outlined',
@@ -1726,20 +1764,28 @@ class CropperSelection extends CropperElement {
         }
         super.$propertyChangedCallback(name, oldValue, newValue);
         switch (name) {
-            case 'aspectRatio':
-                if (!isPositiveNumber(newValue)) {
-                    this.aspectRatio = NaN;
+            case 'x':
+            case 'y':
+            case 'width':
+            case 'height':
+                if (!this.$changing) {
+                    this.$nextTick(() => {
+                        this.$change(this.x, this.y, this.width, this.height, this.aspectRatio, true);
+                    });
                 }
                 break;
+            case 'aspectRatio':
             case 'initialAspectRatio':
-                if (!isPositiveNumber(newValue)) {
-                    this.initialAspectRatio = NaN;
-                }
+                this.$nextTick(() => {
+                    this.$initSelection();
+                });
                 break;
             case 'initialCoverage':
-                if (!isPositiveNumber(newValue) || newValue > 1) {
-                    this.initialCoverage = NaN;
-                }
+                this.$nextTick(() => {
+                    if (isPositiveNumber(newValue) && newValue <= 1) {
+                        this.$initSelection(true, true);
+                    }
+                });
                 break;
             case 'keyboard':
                 this.$nextTick(() => {
@@ -1782,6 +1828,17 @@ class CropperSelection extends CropperElement {
                     }
                 });
                 break;
+            case 'precise':
+                this.$nextTick(() => {
+                    this.$change(this.x, this.y);
+                });
+                break;
+            // Backwards compatible with 2.0.0-rc
+            case 'linked':
+                if (newValue) {
+                    this.dynamic = true;
+                }
+                break;
         }
     }
     connectedCallback() {
@@ -1796,23 +1853,12 @@ class CropperSelection extends CropperElement {
             if (!this.hidden) {
                 this.$render();
             }
-            const { initialCoverage, parentElement } = this;
-            if (isPositiveNumber(initialCoverage) && parentElement) {
-                const aspectRatio = this.aspectRatio || this.initialAspectRatio;
-                const { offsetWidth, offsetHeight } = parentElement;
-                let width = offsetWidth * initialCoverage;
-                let height = offsetHeight * initialCoverage;
-                if (isPositiveNumber(aspectRatio)) {
-                    ({ width, height } = getAdjustedSizes({ aspectRatio, width, height }));
-                }
-                this.$change(this.x, this.y, width, height);
-                this.$center();
-            }
+            this.$initSelection(true);
             this.$onCanvasActionStart = this.$handleActionStart.bind(this);
             this.$onCanvasActionEnd = this.$handleActionEnd.bind(this);
             this.$onCanvasAction = this.$handleAction.bind(this);
             on($canvas, EVENT_ACTION_START, this.$onCanvasActionStart);
-            on($canvas, EVENT_ACTION_END, this.$onCanvasActionStart);
+            on($canvas, EVENT_ACTION_END, this.$onCanvasActionEnd);
             on($canvas, EVENT_ACTION, this.$onCanvasAction);
         }
         else {
@@ -1844,11 +1890,34 @@ class CropperSelection extends CropperElement {
         }
         return selections;
     }
+    $initSelection(center = false, resize = false) {
+        const { initialCoverage, parentElement } = this;
+        if (isPositiveNumber(initialCoverage) && parentElement) {
+            const aspectRatio = this.aspectRatio || this.initialAspectRatio;
+            let width = (resize ? 0 : this.width) || parentElement.offsetWidth * initialCoverage;
+            let height = (resize ? 0 : this.height) || parentElement.offsetHeight * initialCoverage;
+            if (isPositiveNumber(aspectRatio)) {
+                ({ width, height } = getAdjustedSizes({ aspectRatio, width, height }));
+            }
+            this.$change(this.x, this.y, width, height);
+            if (center) {
+                this.$center();
+            }
+            // Overrides the initial position and size
+            this.$initialSelection = {
+                x: this.x,
+                y: this.y,
+                width: this.width,
+                height: this.height,
+            };
+        }
+    }
     $createSelection() {
         const newSelection = this.cloneNode(true);
         if (this.hasAttribute('id')) {
             newSelection.removeAttribute('id');
         }
+        newSelection.initialCoverage = NaN;
         this.active = false;
         if (this.parentElement) {
             this.parentElement.insertBefore(newSelection, this.nextSibling);
@@ -1874,8 +1943,7 @@ class CropperSelection extends CropperElement {
                 }
             }
             else {
-                this.$reset();
-                this.hidden = true;
+                this.$clear();
             }
         }
     }
@@ -1903,67 +1971,76 @@ class CropperSelection extends CropperElement {
     }
     $handleAction(event) {
         const { currentTarget, detail } = event;
-        if (currentTarget && detail) {
-            const { relatedEvent } = detail;
-            let { action } = detail;
-            // Switching to another selection
-            if (!action && this.multiple) {
-                // Get the `action` property from the focusing in selection
-                action = this.$action || (relatedEvent === null || relatedEvent === void 0 ? void 0 : relatedEvent.target.action);
-                this.$action = action;
-            }
-            if (!action
-                || (this.hidden && action !== ACTION_SELECT)
-                || (this.multiple && !this.active && action !== ACTION_SCALE)) {
-                return;
-            }
-            const moveX = detail.endX - detail.startX;
-            const moveY = detail.endY - detail.startY;
-            const { width, height } = this;
-            let { aspectRatio } = this;
-            // Locking aspect ratio by holding shift key
-            if (!isPositiveNumber(aspectRatio) && event.shiftKey) {
-                aspectRatio = isPositiveNumber(width) && isPositiveNumber(height) ? width / height : 1;
-            }
-            switch (action) {
-                case ACTION_SELECT: {
+        if (!currentTarget || !detail) {
+            return;
+        }
+        const { relatedEvent } = detail;
+        let { action } = detail;
+        // Switching to another selection
+        if (!action && this.multiple) {
+            // Get the `action` property from the focusing in selection
+            action = this.$action || (relatedEvent === null || relatedEvent === void 0 ? void 0 : relatedEvent.target.action);
+            this.$action = action;
+        }
+        if (!action
+            || (this.hidden && action !== ACTION_SELECT)
+            || (this.multiple && !this.active && action !== ACTION_SCALE)) {
+            return;
+        }
+        const moveX = detail.endX - detail.startX;
+        const moveY = detail.endY - detail.startY;
+        const { width, height } = this;
+        let { aspectRatio } = this;
+        // Locking aspect ratio by holding shift key
+        if (!isPositiveNumber(aspectRatio) && relatedEvent.shiftKey) {
+            aspectRatio = isPositiveNumber(width) && isPositiveNumber(height) ? width / height : 1;
+        }
+        switch (action) {
+            case ACTION_SELECT:
+                if (moveX !== 0 && moveY !== 0) {
                     const { $canvas } = this;
                     const offset = getOffset(currentTarget);
-                    (this.multiple && !this.hidden ? this.$createSelection() : this).$change(detail.startX - offset.left, detail.startY - offset.top, moveX, moveY, aspectRatio);
-                    action = ACTION_RESIZE_SOUTHEAST;
+                    (this.multiple && !this.hidden ? this.$createSelection() : this).$change(detail.startX - offset.left, detail.startY - offset.top, Math.abs(moveX), Math.abs(moveY), aspectRatio);
                     if (moveX < 0) {
-                        if (moveY > 0) {
-                            action = ACTION_RESIZE_SOUTHWEST;
-                        }
-                        else if (moveY < 0) {
+                        if (moveY < 0) {
+                            // ↖️
                             action = ACTION_RESIZE_NORTHWEST;
                         }
+                        else if (moveY > 0) {
+                            // ↙️
+                            action = ACTION_RESIZE_SOUTHWEST;
+                        }
                     }
                     else if (moveX > 0) {
                         if (moveY < 0) {
+                            // ↗️
                             action = ACTION_RESIZE_NORTHEAST;
                         }
+                        else if (moveY > 0) {
+                            // ↘️
+                            action = ACTION_RESIZE_SOUTHEAST;
+                        }
                     }
                     if ($canvas) {
                         $canvas.$action = action;
                     }
-                    break;
                 }
-                case ACTION_MOVE:
-                    if (this.movable
-                        && (this.$actionStartTarget && this.contains(this.$actionStartTarget))) {
-                        this.$move(moveX, moveY);
-                    }
-                    break;
-                case ACTION_SCALE:
-                    if (relatedEvent && this.zoomable) {
-                        const offset = getOffset(currentTarget);
-                        this.$zoom(detail.scale, relatedEvent.pageX - offset.left, relatedEvent.pageY - offset.top);
-                    }
-                    break;
-                default:
-                    this.$resize(action, moveX, moveY, aspectRatio);
-            }
+                break;
+            case ACTION_MOVE:
+                if (this.movable && (this.dynamic
+                    || (this.$actionStartTarget && this.contains(this.$actionStartTarget)))) {
+                    this.$move(moveX, moveY);
+                }
+                break;
+            case ACTION_SCALE:
+                if (relatedEvent && this.zoomable && (this.dynamic
+                    || this.contains(relatedEvent.target))) {
+                    const offset = getOffset(currentTarget);
+                    this.$zoom(detail.scale, relatedEvent.pageX - offset.left, relatedEvent.pageY - offset.top);
+                }
+                break;
+            default:
+                this.$resize(action, moveX, moveY, aspectRatio);
         }
     }
     $handleActionEnd() {
@@ -1977,6 +2054,12 @@ class CropperSelection extends CropperElement {
             || event.defaultPrevented) {
             return;
         }
+        const { activeElement } = document;
+        // Disable keyboard control when input something
+        if (activeElement && (['INPUT', 'TEXTAREA'].includes(activeElement.tagName)
+            || ['true', 'plaintext-only'].includes(activeElement.contentEditable))) {
+            return;
+        }
         switch (event.key) {
             case 'Backspace':
                 if (event.metaKey) {
@@ -2284,27 +2367,39 @@ class CropperSelection extends CropperElement {
      * @param {number} [width] The new width.
      * @param {number} [height] The new height.
      * @param {number} [aspectRatio] The new aspect ratio for this change only.
+     * @param {number} [_force] Force change.
      * @returns {CropperSelection} Returns `this` for chaining.
      */
-    $change(x, y, width = this.width, height = this.height, aspectRatio = this.aspectRatio) {
-        if (!isNumber(x) || !isNumber(y) || !isNumber(width) || !isNumber(height)) {
+    $change(x, y, width = this.width, height = this.height, aspectRatio = this.aspectRatio, _force = false) {
+        if (this.$changing
+            || !isNumber(x)
+            || !isNumber(y)
+            || !isNumber(width)
+            || !isNumber(height)
+            || width < 0
+            || height < 0) {
             return this;
         }
+        if (isPositiveNumber(aspectRatio)) {
+            ({ width, height } = getAdjustedSizes({ aspectRatio, width, height }, 'cover'));
+        }
         if (!this.precise) {
             x = Math.round(x);
             y = Math.round(y);
             width = Math.round(width);
             height = Math.round(height);
         }
-        if (x === this.x && y === this.y && width === this.width && height === this.height) {
+        if (x === this.x
+            && y === this.y
+            && width === this.width
+            && height === this.height
+            && Object.is(aspectRatio, this.aspectRatio)
+            && !_force) {
             return this;
         }
         if (this.hidden) {
             this.hidden = false;
         }
-        if (isPositiveNumber(aspectRatio)) {
-            ({ width, height } = getAdjustedSizes({ aspectRatio, width, height }, 'cover'));
-        }
         if (this.$emit(EVENT_CHANGE, {
             x,
             y,
@@ -2313,10 +2408,12 @@ class CropperSelection extends CropperElement {
         }) === false) {
             return this;
         }
+        this.$changing = true;
         this.x = x;
         this.y = y;
         this.width = width;
         this.height = height;
+        this.$changing = false;
         return this.$render();
     }
     /**
@@ -2324,7 +2421,17 @@ class CropperSelection extends CropperElement {
      * @returns {CropperSelection} Returns `this` for chaining.
      */
     $reset() {
-        return this.$change(0, 0, 0, 0);
+        const { x, y, width, height, } = this.$initialSelection;
+        return this.$change(x, y, width, height);
+    }
+    /**
+     * Clears the selection.
+     * @returns {CropperSelection} Returns `this` for chaining.
+     */
+    $clear() {
+        this.$change(0, 0, 0, 0, NaN, true);
+        this.hidden = true;
+        return this;
     }
     /**
      * Refreshes the position or size of the selection.
@@ -2381,7 +2488,7 @@ class CropperSelection extends CropperElement {
                     const offsetX = -this.x;
                     const offsetY = -this.y;
                     const translateX = ((offsetX * d) - (c * offsetY)) / ((a * d) - (c * b));
-                    const translateY = (offsetY - (b * translateX)) / d;
+                    const translateY = ((offsetY * a) - (b * offsetX)) / ((a * d) - (c * b));
                     let newE = a * translateX + c * translateY + e;
                     let newF = b * translateX + d * translateY + f;
                     let destWidth = image.naturalWidth;
@@ -2415,7 +2522,7 @@ class CropperSelection extends CropperElement {
     }
 }
 CropperSelection.$name = CROPPER_SELECTION;
-CropperSelection.$version = '2.0.0-beta.4';
+CropperSelection.$version = '2.0.0';
 
 var style$2 = `:host{display:flex;flex-direction:column;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([bordered]){border:1px dashed var(--theme-color)}:host([covered]){bottom:0;left:0;position:absolute;right:0;top:0}:host>span{display:flex;flex:1}:host>span+span{border-top:1px dashed var(--theme-color)}:host>span>span{flex:1}:host>span>span+span{border-left:1px dashed var(--theme-color)}`;
 
@@ -2444,7 +2551,9 @@ class CropperGrid extends CropperElement {
         }
         super.$propertyChangedCallback(name, oldValue, newValue);
         if (name === 'rows' || name === 'columns') {
-            this.$render();
+            this.$nextTick(() => {
+                this.$render();
+            });
         }
     }
     connectedCallback() {
@@ -2471,7 +2580,7 @@ class CropperGrid extends CropperElement {
     }
 }
 CropperGrid.$name = CROPPER_GIRD;
-CropperGrid.$version = '2.0.0-beta.4';
+CropperGrid.$version = '2.0.0';
 
 var style$1 = `:host{display:inline-block;height:1em;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:1em}:host:after,:host:before{background-color:var(--theme-color);content:"";display:block;position:absolute}:host:before{height:1px;left:0;top:50%;transform:translateY(-50%);width:100%}:host:after{height:100%;left:50%;top:0;transform:translateX(-50%);width:1px}:host([centered]){left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}`;
 
@@ -2490,10 +2599,11 @@ class CropperCrosshair extends CropperElement {
     }
 }
 CropperCrosshair.$name = CROPPER_CROSSHAIR;
-CropperCrosshair.$version = '2.0.0-beta.4';
+CropperCrosshair.$version = '2.0.0';
 
 var style = `:host{display:block;height:100%;overflow:hidden;position:relative;width:100%}`;
 
+const canvasCache = new WeakMap();
 const imageCache = new WeakMap();
 const selectionCache = new WeakMap();
 const sourceImageCache = new WeakMap();
@@ -2525,6 +2635,12 @@ class CropperViewer extends CropperElement {
     get $sourceImage() {
         return sourceImageCache.get(this);
     }
+    set $canvas(element) {
+        canvasCache.set(this, element);
+    }
+    get $canvas() {
+        return canvasCache.get(this);
+    }
     set $selection(element) {
         selectionCache.set(this, element);
     }
@@ -2552,6 +2668,7 @@ class CropperViewer extends CropperElement {
             on($selection, EVENT_CHANGE, this.$onSelectionChange);
             const $canvas = $selection.closest(this.$getTagNameOf(CROPPER_CANVAS));
             if ($canvas) {
+                this.$canvas = $canvas;
                 const $sourceImage = $canvas.querySelector(this.$getTagNameOf(CROPPER_IMAGE));
                 if ($sourceImage) {
                     this.$sourceImage = $sourceImage;
@@ -2593,18 +2710,31 @@ class CropperViewer extends CropperElement {
             $image.setAttribute('src', newSrc);
             $image.$ready(() => {
                 setTimeout(() => {
-                    const { x, y } = this.$selection;
-                    this.$transformImageByOffset($sourceImage.$getTransform(), -x, -y);
-                });
+                    this.$render();
+                }, 50);
             });
         }
     }
     $handleSourceImageTransform(event) {
-        const { x, y } = this.$selection;
-        this.$transformImageByOffset(event.detail.matrix, -x, -y);
-    }
-    $render(selection) {
-        const { x, y, width, height, } = selection || this.$selection;
+        this.$render(undefined, event.detail.matrix);
+    }
+    $render(selection, matrix) {
+        const { $canvas, $selection } = this;
+        if (!selection && !$selection.hidden) {
+            selection = $selection;
+        }
+        if (!selection || (selection.x === 0
+            && selection.y === 0
+            && selection.width === 0
+            && selection.height === 0)) {
+            selection = {
+                x: 0,
+                y: 0,
+                width: $canvas.offsetWidth,
+                height: $canvas.offsetHeight,
+            };
+        }
+        const { x, y, width, height, } = selection;
         const styles = {};
         const { clientWidth, clientHeight } = this;
         let newWidth = clientWidth;
@@ -2619,36 +2749,36 @@ class CropperViewer extends CropperElement {
                 styles.height = height;
                 break;
             case RESIZE_HORIZONTAL:
-                scale = clientHeight / height;
+                scale = height > 0 ? clientHeight / height : 0;
                 newWidth = width * scale;
                 styles.width = newWidth;
                 break;
             case RESIZE_VERTICAL:
-                scale = clientWidth / width;
+                scale = width > 0 ? clientWidth / width : 0;
                 newHeight = height * scale;
                 styles.height = newHeight;
                 break;
             case RESIZE_NONE:
             default:
                 if (clientWidth > 0) {
-                    scale = clientWidth / width;
+                    scale = width > 0 ? clientWidth / width : 0;
                 }
                 else if (clientHeight > 0) {
-                    scale = clientHeight / height;
+                    scale = height > 0 ? clientHeight / height : 0;
                 }
         }
         this.$scale = scale;
         this.$setStyles(styles);
         if (this.$sourceImage) {
-            this.$transformImageByOffset(this.$sourceImage.$getTransform(), -x, -y);
+            this.$transformImageByOffset(matrix !== null && matrix !== void 0 ? matrix : this.$sourceImage.$getTransform(), -x, -y);
         }
     }
     $transformImageByOffset(matrix, x, y) {
         const { $image, $scale, $sourceImage, } = this;
-        if ($sourceImage && $image && $scale > 0) {
+        if ($sourceImage && $image && $scale >= 0) {
             const [a, b, c, d, e, f] = matrix;
             const translateX = ((x * d) - (c * y)) / ((a * d) - (c * b));
-            const translateY = (y - (b * translateX)) / d;
+            const translateY = ((y * a) - (b * x)) / ((a * d) - (c * b));
             const newE = a * translateX + c * translateY + e;
             const newF = b * translateX + d * translateY + f;
             $image.$ready((image) => {
@@ -2662,9 +2792,9 @@ class CropperViewer extends CropperElement {
     }
 }
 CropperViewer.$name = CROPPER_VIEWER;
-CropperViewer.$version = '2.0.0-beta.4';
+CropperViewer.$version = '2.0.0';
 
-/*! Cropper.js v2.0.0-beta.4 | (c) 2015-present Chen Fengyuan | MIT */
+/*! Cropper.js v2.0.0 | (c) 2015-present Chen Fengyuan | MIT */
 CropperCanvas.$define();
 CropperCrosshair.$define();
 CropperGrid.$define();
@@ -2674,140 +2804,149 @@ CropperSelection.$define();
 CropperShade.$define();
 CropperViewer.$define();
 
-const cropperComponentCss = ".relative{position:relative!important}.-mt-\\[6px\\]{margin-top:-6px!important}.mb-6{margin-bottom:1.5rem!important}.flex{display:flex!important}.h-4{height:1rem!important}.h-\\[2px\\]{height:2px!important}.w-4{width:1rem!important}.w-full{width:100%!important}.appearance-none{appearance:none!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.justify-between{justify-content:space-between!important}.rounded-full{border-radius:9999px!important}.border-0{border-width:0!important}*{box-sizing:border-box}:host{align-items:center;display:flex;flex-direction:column;gap:1.5rem;justify-content:space-between;margin-bottom:1.5rem;width:100%}:host .p-input[type=range]{appearance:none;background-color:transparent;position:relative}:host .p-input[type=range]::-webkit-slider-runnable-track{--tw-bg-opacity:1;background-color:rgb(218 230 240/var(--tw-bg-opacity,1));height:2px}:host .p-input[type=range]::-moz-range-track{--tw-bg-opacity:1;background-color:rgb(218 230 240/var(--tw-bg-opacity,1));height:2px}:host .p-input[type=range]::-moz-range-thumb,:host .p-input[type=range]::-webkit-slider-thumb{--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity,1));border-radius:9999px;border-width:0;height:1rem;width:1rem}:host .p-input[type=range]::-webkit-slider-thumb{margin-top:-6px}.static{position:static!important}.hidden{display:none!important}.h-\\[17\\.5rem\\]{height:17.5rem!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.resize{resize:both!important}.gap-2{gap:.5rem!important}.rounded{border-radius:.25rem!important}.border-b{border-bottom-width:1px!important}.border-solid{border-style:solid!important}.border-mystic-medium{--tw-border-opacity:1!important;border-color:rgb(227 236 243/var(--tw-border-opacity,1))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.px-14{padding-left:3.5rem!important;padding-right:3.5rem!important}.text-storm-vague{--tw-text-opacity:1!important;color:rgb(152 154 183/var(--tw-text-opacity,1))!important}@media (min-width:40rem){.tablet\\:max-w-xs{max-width:20rem!important}.tablet\\:px-1{padding-left:.25rem!important;padding-right:.25rem!important}}";
+const cropperComponentCss = ".mb-6{margin-bottom:1.5rem!important}.flex{display:flex!important}.w-full{width:100%!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.justify-between{justify-content:space-between!important}*{box-sizing:border-box}:host{align-items:center;display:flex;flex-direction:column;gap:1.5rem;justify-content:space-between;margin-bottom:1.5rem;width:100%}.static{position:static!important}.hidden{display:none!important}.h-\\[17\\.5rem\\]{height:17.5rem!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.resize{resize:both!important}.gap-2{gap:.5rem!important}.rounded{border-radius:.25rem!important}.border-0{border-width:0!important}.border-b{border-bottom-width:1px!important}.border-solid{border-style:solid!important}.border-mystic-medium{--tw-border-opacity:1!important;border-color:rgb(227 236 243/var(--tw-border-opacity,1))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.px-14{padding-left:3.5rem!important;padding-right:3.5rem!important}.text-storm-vague{--tw-text-opacity:1!important;color:rgb(152 154 183/var(--tw-text-opacity,1))!important}@media (min-width:40rem){.tablet\\:max-w-xs{max-width:20rem!important}.tablet\\:px-1{padding-left:.25rem!important;padding-right:.25rem!important}}";
+const PCropperStyle0 = cropperComponentCss;
 
 const Cropper = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.valueChange = index.createEvent(this, "valueChange", 3);
-    this._maxScale = 0;
-    this._minScale = 0;
-    this.variant = 'user';
-    this.value = undefined;
-    this.returnType = 'base64';
-    this._loaded = false;
-    this._currentScale = 0;
-  }
-  onResize() {
-    if (this._resizeDebounceTimeout) {
-      clearTimeout(this._resizeDebounceTimeout);
-    }
-    this._resizeDebounceTimeout = setTimeout(() => {
-      this._selectionRef.$center();
-      this._imageRef.$center();
-    }, 200);
-  }
-  componentDidLoad() {
-    setTimeout(() => {
-      this._loaded = true;
-    }, 200);
-  }
-  render() {
-    return (index.h(index.Host, { class: "p-cropper" }, this._loaded && (index.h("cropper-canvas", { class: "h-[17.5rem] w-full border-0 border-b border-solid border-mystic-medium bg-white", onAction: () => this._onAction() }, index.h("cropper-image", { src: this.value, alt: "Picture", ref: (ref) => this._setImageRef(ref), scalable: true, crossorigin: "anonymous" }), index.h("cropper-shade", { class: clsx.clsx({
-        'rounded-round': this.variant === 'user',
-        rounded: this.variant === 'company',
-      }), "theme-color": "rgba(255, 255, 255, 0.5)", hidden: true }), index.h("cropper-selection", { "initial-coverage": "0.7", "aspect-ratio": "1", ref: (ref) => (this._selectionRef = ref) }), index.h("cropper-handle", { action: "move", plain: true }))), index.h("div", { class: "flex w-full items-center gap-2 px-14 text-storm-vague tablet:max-w-xs tablet:px-1" }, index.h("p-icon", { variant: "minus" }), index.h("input", { class: "p-input w-full", type: "range", min: "0", max: "100", value: this._currentScale, onInput: (ev) => this._onInput(ev.target.value), step: "0.5" }), index.h("p-icon", { variant: "plus" }))));
-  }
-  _setImageRef(ref) {
-    if (this._imageRef) {
-      return;
-    }
-    this._imageRef = ref;
-    this._imageRef.$ready((image) => setTimeout(() => this._setInitialState(image), 200));
-  }
-  _setInitialState(image) {
-    let scale;
-    if (image.naturalWidth > image.naturalHeight) {
-      // set scale by height
-      scale = 200 / image.naturalHeight;
-    }
-    if (image.naturalHeight >= image.naturalWidth) {
-      // set scale by width
-      scale = 200 / image.naturalWidth;
-    }
-    const current = this._imageRef.$getTransform();
-    this._minScale = scale;
-    this._maxScale = current[0];
-    this._selectionRef.$resize('nw-resize', 200, 200, 1);
-    this._selectionRef.$center();
-    this._setScale(scale);
-    this._toCanvas();
-  }
-  _onAction() {
-    this._setCurrentScale();
-    this._toCanvas();
-  }
-  _setScale(scale, setCenter = true, setCurrentScale = true) {
-    const transform = this._imageRef.$getTransform();
-    this._imageRef.$setTransform([
-      scale,
-      0,
-      0,
-      scale,
-      transform[4],
-      transform[5],
-    ]);
-    if (setCenter) {
-      this._imageRef.$center();
-    }
-    if (setCurrentScale) {
-      this._setCurrentScale();
-    }
-  }
-  _setCurrentScale() {
-    const transform = this._imageRef.$getTransform();
-    const current = transform[0];
-    if (current < this._minScale) {
-      this._setScale(this._minScale, true, false);
-      this._currentScale = 0;
-      return;
-    }
-    if (current > this._maxScale) {
-      this._setScale(this._maxScale, true, false);
-      this._currentScale = 100;
-      return;
-    }
-    if (current === this._minScale) {
-      this._currentScale = 0;
-      return;
-    }
-    if (current === this._maxScale) {
-      this._currentScale = 100;
-      return;
-    }
-    const minMaxDiff = this._maxScale - this._minScale;
-    const currentDiff = current - this._minScale;
-    const percentage = (currentDiff / minMaxDiff) * 100;
-    this._currentScale = percentage;
-  }
-  _onInput(value) {
-    const transform = this._imageRef.$getTransform();
-    const current = transform[0];
-    const minMaxDiff = this._maxScale - this._minScale;
-    const toSet = minMaxDiff * (value / 100);
-    if (toSet === current) {
-      return;
-    }
-    this._setScale(toSet + this._minScale, false, false);
-    this._currentScale = value;
-    this._toCanvas();
-  }
-  _toCanvas() {
-    if (this._toCanvasDebounceTimeout) {
-      clearTimeout(this._toCanvasDebounceTimeout);
-    }
-    this._toCanvasDebounceTimeout = setTimeout(async () => {
-      const canvas = await this._selectionRef.$toCanvas();
-      if (this.returnType === 'canvas') {
-        this.valueChange.emit(canvas);
-        return;
-      }
-      const data = canvas.toDataURL('image/png');
-      this.valueChange.emit(data);
-    }, 200);
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChange = index.createEvent(this, "valueChange", 3);
+        this.variant = 'user';
+        this.value = undefined;
+        this.returnType = 'base64';
+        this._loaded = false;
+        this._currentScale = 0;
+    }
+    /**
+     * Event when the value changes
+     */
+    valueChange;
+    _imageRef;
+    _selectionRef;
+    _maxScale = 0;
+    _minScale = 0;
+    _resizeDebounceTimeout;
+    _toCanvasDebounceTimeout;
+    onResize() {
+        if (this._resizeDebounceTimeout) {
+            clearTimeout(this._resizeDebounceTimeout);
+        }
+        this._resizeDebounceTimeout = setTimeout(() => {
+            this._selectionRef.$center();
+            this._imageRef.$center();
+        }, 200);
+    }
+    componentDidLoad() {
+        setTimeout(() => {
+            this._loaded = true;
+        }, 200);
+    }
+    render() {
+        return (index.h(index.Host, { key: 'afd5e10b35660436241cd4bf34804ff18d38e63c', class: 'p-cropper' }, this._loaded && (index.h("cropper-canvas", { key: 'b83a601fdc5e6dd0bdab4091dce8536dd8098abd', class: 'h-[17.5rem] w-full border-0 border-b border-solid border-mystic-medium bg-white', onAction: () => this._onAction() }, index.h("cropper-image", { key: '92f70e3d205a72e87c4454f6f2ffb3ecb7c2a2c4', src: this.value, alt: 'Picture', ref: ref => this._setImageRef(ref), scalable: true, crossorigin: 'anonymous' }), index.h("cropper-shade", { key: 'cb819b4d9a2e28263555c888b4db913d6d8d9f45', class: clsx.clsx({
+                'rounded-round': this.variant === 'user',
+                rounded: this.variant === 'company',
+            }), "theme-color": 'rgba(255, 255, 255, 0.5)', hidden: true }), index.h("cropper-selection", { key: '65e6df8e4166009cc27e83c173203c7dfe163bd8', "initial-coverage": '0.7', "aspect-ratio": '1', ref: ref => (this._selectionRef = ref) }), index.h("cropper-handle", { key: '2c7e8c3b91c7bf71ac9ab34f12d7533ac32686d1', action: 'move', plain: true }))), index.h("div", { key: 'f8bdfafaebb8ec4da34b01bbbefc8a56f34a9696', class: 'flex w-full items-center gap-2 px-14 text-storm-vague tablet:max-w-xs tablet:px-1' }, index.h("p-icon", { key: '883df6ef54a39ab1fbc2b1d3e1940aaec0f0d97f', variant: 'minus' }), index.h("input", { key: '8d39562d4df89cf00479cc3ff97194c14622fd31', class: 'p-input w-full', type: 'range', min: '0', max: '100', value: this._currentScale, onInput: ev => this._onInput(ev.target.value), step: '0.5' }), index.h("p-icon", { key: '9b0ba4eae79add1f148a884013f8ad3f8d7d75cd', variant: 'plus' }))));
+    }
+    _setImageRef(ref) {
+        if (this._imageRef) {
+            return;
+        }
+        this._imageRef = ref;
+        this._imageRef.$ready(image => setTimeout(() => this._setInitialState(image), 200));
+    }
+    _setInitialState(image) {
+        let scale;
+        if (image.naturalWidth > image.naturalHeight) {
+            // set scale by height
+            scale = 200 / image.naturalHeight;
+        }
+        if (image.naturalHeight >= image.naturalWidth) {
+            // set scale by width
+            scale = 200 / image.naturalWidth;
+        }
+        const current = this._imageRef.$getTransform();
+        this._minScale = scale;
+        this._maxScale = current[0];
+        this._selectionRef.$resize('nw-resize', 200, 200, 1);
+        this._selectionRef.$center();
+        this._setScale(scale);
+        this._toCanvas();
+    }
+    _onAction() {
+        this._setCurrentScale();
+        this._toCanvas();
+    }
+    _setScale(scale, setCenter = true, setCurrentScale = true) {
+        const transform = this._imageRef.$getTransform();
+        this._imageRef.$setTransform([
+            scale,
+            0,
+            0,
+            scale,
+            transform[4],
+            transform[5],
+        ]);
+        if (setCenter) {
+            this._imageRef.$center();
+        }
+        if (setCurrentScale) {
+            this._setCurrentScale();
+        }
+    }
+    _setCurrentScale() {
+        const transform = this._imageRef.$getTransform();
+        const current = transform[0];
+        if (current < this._minScale) {
+            this._setScale(this._minScale, true, false);
+            this._currentScale = 0;
+            return;
+        }
+        if (current > this._maxScale) {
+            this._setScale(this._maxScale, true, false);
+            this._currentScale = 100;
+            return;
+        }
+        if (current === this._minScale) {
+            this._currentScale = 0;
+            return;
+        }
+        if (current === this._maxScale) {
+            this._currentScale = 100;
+            return;
+        }
+        const minMaxDiff = this._maxScale - this._minScale;
+        const currentDiff = current - this._minScale;
+        const percentage = (currentDiff / minMaxDiff) * 100;
+        this._currentScale = percentage;
+    }
+    _onInput(value) {
+        const transform = this._imageRef.$getTransform();
+        const current = transform[0];
+        const minMaxDiff = this._maxScale - this._minScale;
+        const toSet = minMaxDiff * (value / 100);
+        if (toSet === current) {
+            return;
+        }
+        this._setScale(toSet + this._minScale, false, false);
+        this._currentScale = value;
+        this._toCanvas();
+    }
+    _toCanvas() {
+        if (this._toCanvasDebounceTimeout) {
+            clearTimeout(this._toCanvasDebounceTimeout);
+        }
+        this._toCanvasDebounceTimeout = setTimeout(async () => {
+            const canvas = await this._selectionRef.$toCanvas();
+            if (this.returnType === 'canvas') {
+                this.valueChange.emit(canvas);
+                return;
+            }
+            const data = canvas.toDataURL('image/png');
+            this.valueChange.emit(data);
+        }, 200);
+    }
 };
-Cropper.style = cropperComponentCss;
+Cropper.style = PCropperStyle0;
 
 exports.p_cropper = Cropper;