@paperless/core 2.22.0-alpha.27 → 2.22.0-alpha.28

package/dist/esm/p-content-slider.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, d as getElement, h, e as Host } from './index-BDccsg1s.js';
-import { c as cn } from './cn-BniKgfyU.js';
+import { c as cn } from './cn-CsNqHcjL.js';
 import './clsx-ChV9xqsO.js';
 
 const contentSliderComponentCss = () => `.absolute{position:absolute}.relative{position:relative}.z-10{z-index:10}.-mx-16{margin-left:-4rem;margin-right:-4rem}.-my-4{margin-bottom:-1rem;margin-top:-1rem}.mt-3{margin-top:.75rem}.box-content{box-sizing:content-box}.flex{display:flex}.w-0{width:0}.w-full{width:100%}.translate-x-0{--tw-translate-x:0px;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))}.transform-gpu{transform:translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-grab{cursor:grab}.cursor-grabbing{cursor:grabbing}.flex-col{flex-direction:column}.flex-nowrap{flex-wrap:nowrap}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.px-1{padding-left:.25rem;padding-right:.25rem}.px-16{padding-left:4rem;padding-right:4rem}*{box-sizing:border-box}:host{display:flex;flex-direction:column;margin:-1rem -4rem;overflow:hidden;padding:1rem 4rem}:host .slider{box-sizing:content-box;overflow:visible;position:relative}:host .slider.draggable{cursor:grab}@media (min-width:64rem){:host .slider.draggable{cursor:auto}}:host .slider.draggable.dragging{cursor:grabbing}@media (min-width:64rem){:host .slider.draggable.dragging{cursor:auto}}:host .slider.draggable.dragging .inner-slider{transition-property:none}:host .slider .inner-slider{--tw-translate-x:0px;align-items:stretch;display:flex;flex-wrap:nowrap;gap:.5rem;position:absolute;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));transform:translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-duration:.15s;transition-duration:.5s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%;will-change:transform}@media (min-width:64rem){:host .slider .inner-slider{flex-wrap:wrap;gap:1rem}}:host .slider .inner-slider>::slotted(*){flex-shrink:0;position:relative;width:100%;z-index:10}@media (min-width:40rem){:host .slider .inner-slider>::slotted(*){width:calc(50% - .5rem)}}@media (min-width:64rem){:host .slider .inner-slider>::slotted(*){flex:1 1 0%;width:0}}:host .indicator{align-items:center;display:flex;justify-content:center}@media (min-width:64rem){:host .indicator{display:none}}:host .indicator .item{margin-top:.75rem;padding-left:.25rem;padding-right:.25rem;padding-top:.25rem}@media (min-width:64rem){.desktop-xs\\:hidden{display:none}.desktop-xs\\:flex-wrap{flex-wrap:wrap}}.visible{visibility:visible}.static{position:static}.block{display:block}.hidden{display:none}.h-2{height:.5rem}.w-2{width:.5rem}.cursor-pointer{cursor:pointer}.resize{resize:both}.rounded-full{border-radius:9999px}.bg-indigo-300{--tw-bg-opacity:1;background-color:rgb(187 209 253/var(--tw-bg-opacity,1))}.bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity,1))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}`;

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

@@ -202,6 +202,20 @@ const defaultEventOptions = {
 function emit(target, type, detail, options) {
     return target.dispatchEvent(new CustomEvent(type, Object.assign(Object.assign(Object.assign({}, defaultEventOptions), { detail }), options)));
 }
+/**
+ * Get the real event target by checking composed path.
+ * This is useful when dealing with events that can cross shadow DOM boundaries.
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath}
+ * @param {Event} event The event object.
+ * @returns {EventTarget | null} The first element in the composed path, or the original event target.
+ */
+function getComposedPathTarget(event) {
+    if (typeof event.composedPath === 'function') {
+        const path = event.composedPath();
+        return path.find(isElement) || event.target;
+    }
+    return event.target;
+}
 const resolvedPromise = Promise.resolve();
 /**
  * Defers the callback to be executed after the next DOM update cycle.
@@ -214,6 +228,23 @@ function nextTick(context, callback) {
         ? resolvedPromise.then(context ? callback.bind(context) : callback)
         : resolvedPromise;
 }
+/**
+ * Get the root document node.
+ * @param {Element} element The target element.
+ * @returns {Document|DocumentFragment|null} The document node.
+ */
+function getRootDocument(element) {
+    const rootNode = element.getRootNode();
+    switch (rootNode.nodeType) {
+        case 1:
+            return rootNode.ownerDocument;
+        case 9:
+            return rootNode;
+        case 11:
+            return rootNode;
+    }
+    return null;
+}
 /**
  * Get the offset base on the document.
  * @param {Element} element The target element.
@@ -430,12 +461,10 @@ class CropperElement extends HTMLElement {
                 },
             });
         });
-        const shadow = this.attachShadow({
+        const shadow = this.shadowRoot || this.attachShadow({
             mode: this.shadowRootMode || DEFAULT_SHADOW_ROOT_MODE,
         });
-        if (!this.shadowRoot) {
-            shadowRoots.set(this, shadow);
-        }
+        shadowRoots.set(this, shadow);
         styleSheets.set(this, this.$addStyles(this.$sharedStyle));
         if (this.$style) {
             this.$addStyles(this.$style);
@@ -543,7 +572,7 @@ class CropperElement extends HTMLElement {
         }
     }
 }
-CropperElement.$version = '2.0.0';
+CropperElement.$version = '2.1.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}`;
 
@@ -988,7 +1017,7 @@ class CropperCanvas extends CropperElement {
     }
 }
 CropperCanvas.$name = CROPPER_CANVAS;
-CropperCanvas.$version = '2.0.0';
+CropperCanvas.$version = '2.1.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%}`;
 
@@ -997,7 +1026,8 @@ const NATIVE_ATTRIBUTES = [
     'alt',
     'crossorigin',
     'decoding',
-    'importance',
+    'elementtiming',
+    'fetchpriority',
     'loading',
     'referrerpolicy',
     'sizes',
@@ -1021,6 +1051,17 @@ class CropperImage extends CropperElement {
         this.skewable = false;
         this.slottable = false;
         this.translatable = false;
+        // Native attributes
+        this.alt = '';
+        this.crossorigin = '';
+        this.decoding = '';
+        this.elementtiming = '';
+        this.fetchpriority = '';
+        this.loading = '';
+        this.referrerpolicy = '';
+        this.sizes = '';
+        this.src = '';
+        this.srcset = '';
     }
     set $canvas(element) {
         canvasCache$3.set(this, element);
@@ -1256,7 +1297,10 @@ class CropperImage extends CropperElement {
                 const onLoad = () => {
                     // eslint-disable-next-line @typescript-eslint/no-use-before-define
                     off($image, EVENT_ERROR, onError);
-                    resolve($image);
+                    // Ensure the image is fully rendered.
+                    setTimeout(() => {
+                        resolve($image);
+                    });
                 };
                 const onError = () => {
                     off($image, EVENT_LOAD, onLoad);
@@ -1535,7 +1579,7 @@ class CropperImage extends CropperElement {
     }
 }
 CropperImage.$name = CROPPER_IMAGE;
-CropperImage.$version = '2.0.0';
+CropperImage.$version = '2.1.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}`;
 
@@ -1543,9 +1587,9 @@ const canvasCache$2 = new WeakMap();
 class CropperShade extends CropperElement {
     constructor() {
         super(...arguments);
-        this.$onCanvasChange = null;
         this.$onCanvasActionEnd = null;
         this.$onCanvasActionStart = null;
+        this.$onSelectionChange = null;
         this.$style = style$5;
         this.x = 0;
         this.y = 0;
@@ -1586,8 +1630,8 @@ class CropperShade extends CropperElement {
                         this.hidden = true;
                     }
                 };
-                this.$onCanvasChange = (event) => {
-                    const { x, y, width, height, } = event.detail;
+                this.$onSelectionChange = (event) => {
+                    const { x, y, width, height, } = event.defaultPrevented ? $selection : event.detail;
                     this.$change(x, y, width, height);
                     if ($selection.hidden || (x === 0 && y === 0 && width === 0 && height === 0)) {
                         this.hidden = true;
@@ -1595,7 +1639,7 @@ class CropperShade extends CropperElement {
                 };
                 on($canvas, EVENT_ACTION_START, this.$onCanvasActionStart);
                 on($canvas, EVENT_ACTION_END, this.$onCanvasActionEnd);
-                on($canvas, EVENT_CHANGE, this.$onCanvasChange);
+                on($canvas, EVENT_CHANGE, this.$onSelectionChange);
             }
         }
         this.$render();
@@ -1611,9 +1655,9 @@ class CropperShade extends CropperElement {
                 off($canvas, EVENT_ACTION_END, this.$onCanvasActionEnd);
                 this.$onCanvasActionEnd = null;
             }
-            if (this.$onCanvasChange) {
-                off($canvas, EVENT_CHANGE, this.$onCanvasChange);
-                this.$onCanvasChange = null;
+            if (this.$onSelectionChange) {
+                off($canvas, EVENT_CHANGE, this.$onSelectionChange);
+                this.$onSelectionChange = null;
             }
         }
         super.disconnectedCallback();
@@ -1664,7 +1708,7 @@ class CropperShade extends CropperElement {
     }
 }
 CropperShade.$name = CROPPER_SHADE;
-CropperShade.$version = '2.0.0';
+CropperShade.$version = '2.1.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}`;
 
@@ -1687,7 +1731,7 @@ class CropperHandle extends CropperElement {
     }
 }
 CropperHandle.$name = CROPPER_HANDLE;
-CropperHandle.$version = '2.0.0';
+CropperHandle.$version = '2.1.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}`;
 
@@ -1973,10 +2017,13 @@ class CropperSelection extends CropperElement {
         }
         const { relatedEvent } = detail;
         let { action } = detail;
+        const relatedTarget = relatedEvent
+            ? getComposedPathTarget(relatedEvent)
+            : null;
         // 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);
+            action = this.$action || (relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.action);
             this.$action = action;
         }
         if (!action
@@ -1984,9 +2031,9 @@ class CropperSelection extends CropperElement {
             || (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 moveX = detail.endX - detail.startX;
+        let moveY = detail.endY - detail.startY;
         let { aspectRatio } = this;
         // Locking aspect ratio by holding shift key
         if (!isPositiveNumber(aspectRatio) && relatedEvent.shiftKey) {
@@ -1994,7 +2041,14 @@ class CropperSelection extends CropperElement {
         }
         switch (action) {
             case ACTION_SELECT:
-                if (moveX !== 0 && moveY !== 0) {
+                if (moveX !== 0 || moveY !== 0) {
+                    // Force to create a square selection for better user experience
+                    if (moveX === 0) {
+                        moveX = moveY;
+                    }
+                    else if (moveY === 0) {
+                        moveY = moveX;
+                    }
                     const { $canvas } = this;
                     const offset = getOffset(currentTarget);
                     (this.multiple && !this.hidden ? this.$createSelection() : this).$change(detail.startX - offset.left, detail.startY - offset.top, Math.abs(moveX), Math.abs(moveY), aspectRatio);
@@ -2519,7 +2573,7 @@ class CropperSelection extends CropperElement {
     }
 }
 CropperSelection.$name = CROPPER_SELECTION;
-CropperSelection.$version = '2.0.0';
+CropperSelection.$version = '2.1.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)}`;
 
@@ -2577,7 +2631,7 @@ class CropperGrid extends CropperElement {
     }
 }
 CropperGrid.$name = CROPPER_GIRD;
-CropperGrid.$version = '2.0.0';
+CropperGrid.$version = '2.1.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%)}`;
 
@@ -2596,7 +2650,7 @@ class CropperCrosshair extends CropperElement {
     }
 }
 CropperCrosshair.$name = CROPPER_CROSSHAIR;
-CropperCrosshair.$version = '2.0.0';
+CropperCrosshair.$version = '2.1.0';
 
 var style = `:host{display:block;height:100%;overflow:hidden;position:relative;width:100%}`;
 
@@ -2651,10 +2705,11 @@ class CropperViewer extends CropperElement {
         ]);
     }
     connectedCallback() {
+        var _a, _b;
         super.connectedCallback();
         let $selection = null;
         if (this.selection) {
-            $selection = this.ownerDocument.querySelector(this.selection);
+            $selection = (_b = (_a = getRootDocument(this)) === null || _a === void 0 ? void 0 : _a.querySelector(this.selection)) !== null && _b !== void 0 ? _b : null;
         }
         else {
             $selection = this.closest(this.$getTagNameOf(CROPPER_SELECTION));
@@ -2697,7 +2752,7 @@ class CropperViewer extends CropperElement {
         super.disconnectedCallback();
     }
     $handleSelectionChange(event) {
-        this.$render(event.detail);
+        this.$render(event.defaultPrevented ? this.$selection : event.detail);
     }
     $handleSourceImageLoad() {
         const { $image, $sourceImage } = this;
@@ -2706,9 +2761,7 @@ class CropperViewer extends CropperElement {
         if (newSrc && newSrc !== oldSrc) {
             $image.setAttribute('src', newSrc);
             $image.$ready(() => {
-                setTimeout(() => {
-                    this.$render();
-                }, 50);
+                this.$render();
             });
         }
     }
@@ -2767,7 +2820,10 @@ class CropperViewer extends CropperElement {
         this.$scale = scale;
         this.$setStyles(styles);
         if (this.$sourceImage) {
-            this.$transformImageByOffset(matrix !== null && matrix !== void 0 ? matrix : this.$sourceImage.$getTransform(), -x, -y);
+            // Transform the image by the selection offset after the next DOM update cycle
+            setTimeout(() => {
+                this.$transformImageByOffset(matrix !== null && matrix !== void 0 ? matrix : this.$sourceImage.$getTransform(), -x, -y);
+            });
         }
     }
     $transformImageByOffset(matrix, x, y) {
@@ -2789,7 +2845,7 @@ class CropperViewer extends CropperElement {
     }
 }
 CropperViewer.$name = CROPPER_VIEWER;
-CropperViewer.$version = '2.0.0';
+CropperViewer.$version = '2.1.0';
 
 /*! Cropper.js v2.0.0 | (c) 2015-present Chen Fengyuan | MIT */
 CropperCanvas.$define();