ngwr 14.5.1 → 14.7.0

package/fesm2022/ngwr-image-cropper.mjs

@@ -2,7 +2,7 @@ import { coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
 import { signal, input, output, viewChild, inject, DestroyRef, computed, effect, ViewEncapsulation, Component } from '@angular/core';
 import { useI18nText } from 'ngwr/i18n';
-import { randomId, clamp } from 'ngwr/utils';
+import { clamp, randomId } from 'ngwr/utils';
 
 /**
  * @license
@@ -10,6 +10,17 @@ import { randomId, clamp } from 'ngwr/utils';
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
+/**
+ * `[maxOutputSize]`'s transform. Anything that is not a positive, finite number —
+ * `null`, an empty attribute, `0`, a typo — means "no cap" rather than a 1px export:
+ * a bad config should cost resolution nobody asked to lose, not the whole image.
+ */
+function coerceMaxOutputSize(value) {
+    if (value === null || value === undefined || value === '')
+        return null;
+    const n = coerceNumberProperty(value, Number.NaN);
+    return Number.isFinite(n) && n > 0 ? n : null;
+}
 /**
  * Stands in for the consumer input `useI18nText` expects. None of this
  * component's three strings has a `*Label` input behind it — the catalog is the
@@ -19,6 +30,67 @@ const NO_OVERRIDE = signal(null).asReadonly();
 /** Keyboard step in display pixels, and what Shift promotes it to. */
 const KEY_STEP = 1;
 const KEY_STEP_COARSE = 10;
+const NO_SIDES = { left: 0, top: 0, right: 0, bottom: 0 };
+/**
+ * The rect a resize gesture produces: a pure function of the rect the gesture started
+ * from and the TOTAL pointer offset, so the same pointer position always gives the same
+ * rect however the pointer got there.
+ *
+ * The anchor never moves. It is the edge or corner opposite the handle — for `se` the
+ * top-left corner, for `e` the west edge's line. The old version clamped `x`, `y`, `w`
+ * and `h` one at a time after deriving the second axis, so once the derived axis ran
+ * into the image edge the rect slid AWAY from its anchor and, past the far bound, off
+ * the image entirely.
+ *
+ * With a ratio the size is the largest along that ratio which fits from the anchor —
+ * the smaller of the width-limited and height-limited sizes — and no smaller than both
+ * minimums allow. Where the image cannot fit the minimum from this anchor, the bound
+ * wins: a crop past the edge of the image is worse than one under the minimum.
+ *
+ * An edge handle with a ratio also sizes the axis it does not drive, and that axis has
+ * the image's WHOLE extent to grow into: the rect stays centred on its old midline where
+ * it can and slides along that axis only as far as it must to stay on the image. Capping
+ * the size at twice the distance from the midline to the nearer side instead would leave
+ * a square crop resting against the top edge unable to widen at all.
+ */
+function resizeFrom(r, handle, dx, dy, bounds, min, ratio) {
+    const east = handle.includes('e');
+    const west = handle.includes('w');
+    const south = handle.includes('s');
+    const north = handle.includes('n');
+    const right = r.x + r.w;
+    const bottom = r.y + r.h;
+    if (!ratio || ratio <= 0) {
+        let { x, y, w, h } = r;
+        if (east)
+            w = clamp(r.w + dx, min.w, bounds.w - r.x);
+        if (west) {
+            w = clamp(r.w - dx, min.w, right);
+            x = right - w;
+        }
+        if (south)
+            h = clamp(r.h + dy, min.h, bounds.h - r.y);
+        if (north) {
+            h = clamp(r.h - dy, min.h, bottom);
+            y = bottom - h;
+        }
+        return { x, y, w, h };
+    }
+    // Room from the anchor to the image edge on each axis the handle drives; the whole
+    // image on an axis it does not.
+    const roomW = east ? bounds.w - r.x : west ? right : bounds.w;
+    const roomH = south ? bounds.h - r.y : north ? bottom : bounds.h;
+    // Corners follow the horizontal delta, as they always have; `n` / `s` the vertical one.
+    const wanted = east ? r.w + dx : west ? r.w - dx : (south ? r.h + dy : r.h - dy) * ratio;
+    const w = clamp(wanted, Math.max(min.w, min.h * ratio), Math.min(roomW, roomH * ratio));
+    const h = w / ratio;
+    return {
+        x: east ? r.x : west ? right - w : clamp(r.x + r.w / 2 - w / 2, 0, bounds.w - w),
+        y: south ? r.y : north ? bottom - h : clamp(r.y + r.h / 2 - h / 2, 0, bounds.h - h),
+        w,
+        h,
+    };
+}
 /**
  * Image crop UI. Pass `[src]` (URL, `File`, or `Blob`); the user drags
  * the crop window or any of its eight handles. Optionally lock the crop
@@ -31,12 +103,18 @@ const KEY_STEP_COARSE = 10;
  * freshly-rendered `Blob` of the cropped region. For one-off reads use
  * `toBlob()` / `toDataUrl()`.
  *
+ * A source the browser cannot decode fires `(loadError)` once, sets `status()` to
+ * `'failed'` and puts `wr-image-cropper--failed` on the host. The component renders
+ * no message of its own for it — what went wrong and what to do next is the host's
+ * to say.
+ *
  * @example
  * ```html
  * <wr-image-cropper
  *   [src]="file"
  *   [aspectRatio]="1"
  *   (cropped)="onBlob($event)"
+ *   (loadError)="onUnreadable($event)"
  * />
  * ```
  *
@@ -59,8 +137,23 @@ class WrImageCropper {
     /** JPEG / WebP quality for `(cropped)` in [0, 1]. @default 0.92 */
     outputQuality = input(0.92, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "outputQuality" }] : /* istanbul ignore next */ []));
+    /**
+     * Longest side of the exported image, in pixels — for `(cropped)`, `toBlob()` and
+     * `toDataUrl()` alike. A crop larger than this is scaled down to fit, keeping its
+     * aspect ratio; a smaller one is exported as it is, never upscaled. The crop itself
+     * — `cropRect()`, in source pixels — is not affected. `null` (or anything that is
+     * not a positive number) exports at the source image's own resolution.
+     * @default null
+     */
+    maxOutputSize = input(null, { ...(ngDevMode ? { debugName: "maxOutputSize" } : /* istanbul ignore next */ {}), transform: coerceMaxOutputSize });
     /** Emits a Blob after each drag end. */
     cropped = output();
+    /**
+     * Fires once when the browser cannot decode the current `src` — a format it does
+     * not support, a broken file, a URL that fails. Nothing is rendered for it; show
+     * your own message. A new `src` clears the failure.
+     */
+    loadError = output();
     imgEl = viewChild.required('img', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "imgEl" }] : /* istanbul ignore next */ []));
     /** Resolved object URL for `src` (so File / Blob render in `<img>`). */
@@ -96,7 +189,21 @@ class WrImageCropper {
     active = null;
     startPointer = { x: 0, y: 0 };
     startRect = { x: 0, y: 0, w: 0, h: 0 };
+    /** The element the live drag set pointer capture on, so the end releases that one. */
+    captureTarget = null;
+    /** The pointer the live drag belongs to. Every other pointer's events are ignored. */
+    pointerId = null;
+    /** How far past each side of the crop the live resize was pressed — see `onPointerMove`. */
+    overhang = NO_SIDES;
     destroyRef = inject(DestroyRef);
+    statusState = signal('empty', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "statusState" }] : /* istanbul ignore next */ []));
+    /**
+     * Where the source stands: `'empty'`, `'loading'`, `'loaded'` or `'failed'`. Reset
+     * to `'loading'` (or `'empty'`) whenever `src` changes, so a failure never outlives
+     * the source that caused it.
+     */
+    status = this.statusState.asReadonly();
     /** Resolved crop rect in natural (source) pixel coordinates. */
     cropRect = computed(() => {
         const display = this.display();
@@ -132,8 +239,13 @@ class WrImageCropper {
             this.resetGeometry();
             if (!src) {
                 this.objectUrl.set(null);
+                this.statusState.set('empty');
                 return;
             }
+            // A new source starts over: a failure belongs to the source that caused it, and
+            // left in place it would mark a perfectly good next image as broken until the
+            // browser answered for that one too.
+            this.statusState.set('loading');
             if (typeof src === 'string') {
                 this.objectUrl.set(src);
             }
@@ -175,11 +287,38 @@ class WrImageCropper {
             w: img.naturalWidth || display.w,
             h: img.naturalHeight || display.h,
         };
+        this.statusState.set('loaded');
         this.natural.set(natural);
         this.display.set(display);
         this.cropDisplay.set(this.initialCrop(display));
         this.watchResize(img);
     }
+    /**
+     * The `<img>` could not decode its source.
+     *
+     * Before this handler existed a failed decode left the component exactly as it
+     * looks while loading — an image with no size, no crop window, nothing emitted —
+     * so a host had no way to tell "still decoding" from "never going to", and a user
+     * who picked a `.heic` the browser cannot read saw an empty box and no reason.
+     *
+     * Once per source: `status` is reset by a new `src` and by nothing else, so a
+     * second `error` for the same source says nothing new and is not re-emitted.
+     */
+    onImageError() {
+        const url = this.objectUrl();
+        if (!url || this.statusState() === 'failed')
+            return;
+        this.statusState.set('failed');
+        this.resetGeometry();
+        const src = this.src();
+        const isBlob = typeof src !== 'string' && src !== null;
+        this.loadError.emit({
+            url,
+            name: typeof File !== 'undefined' && src instanceof File ? src.name : null,
+            type: isBlob ? src.type : null,
+            size: isBlob ? src.size : null,
+        });
+    }
     /**
      * Keep `display` on the box the image is actually rendered at.
      *
@@ -258,27 +397,98 @@ class WrImageCropper {
         event.preventDefault();
         event.stopPropagation();
         this.active = handle;
+        this.pointerId = event.pointerId;
         this.startPointer = { x: event.clientX, y: event.clientY };
         this.startRect = { ...this.cropDisplay() };
-        event.currentTarget.setPointerCapture(event.pointerId);
+        this.captureTarget = event.currentTarget;
+        this.captureTarget.setPointerCapture(event.pointerId);
+        this.overhang = handle === 'move' ? NO_SIDES : this.pastCrop(event);
     }
+    /**
+     * A resize ENDS when the pointer leaves the image, exactly as `pointerup` would end it:
+     * the move that carried it out is applied — clamped to the image like any other — and
+     * then the drag is over. Nothing after that resumes it or changes the crop, pointer
+     * back over the image or not, until a new `pointerdown`. A move drag is not affected:
+     * its size is fixed, so it simply rests against the edge.
+     *
+     * The move that leaves is applied rather than dropped because pointer moves are
+     * SAMPLES. Dropped, a quick drag toward a corner would stop wherever its last sample
+     * inside happened to fall — a single move from a handle to past the image would change
+     * nothing at all — and even a slow one would stop a fraction of a pixel short of the
+     * edge. A drag that leaves across one edge still ends there: heading for a corner at a
+     * slant that crosses the bottom first, the crop's right edge stays where it was then.
+     *
+     * "The image" is the `<img>`'s own box — the bounds `applyMove` / `applyResize` clamp
+     * the crop to — with its edges counting as inside, since the crop may reach them. The
+     * box is re-measured on every move and compared with `clientX` / `clientY`: both are
+     * viewport coordinates, so a scroll mid-drag cannot put them out of step. The moves
+     * outside reach this handler at all only because the drag holds pointer capture.
+     *
+     * One allowance, fixed at `pointerdown`: the box is widened on each side by however far
+     * past that side of the CROP the press landed — at most as far as the pressed handle
+     * reaches past it. Half of an edge handle, and three quarters of a corner handle, lies
+     * outside the crop, so a press there already has the pointer ahead of the edge it drags.
+     * Measured without the allowance, that pointer would leave the image while the crop was
+     * still short of the image's edge by the same distance, with nothing able to close the
+     * gap; and a handle resting on the image's edge, pressed on its outer part, would begin
+     * its drag already outside. A press on a handle's inner part widens nothing.
+     */
     onPointerMove(event) {
-        if (!this.active)
+        if (!this.active || event.pointerId !== this.pointerId)
             return;
         const dx = event.clientX - this.startPointer.x;
         const dy = event.clientY - this.startPointer.y;
-        if (this.active === 'move')
+        if (this.active === 'move') {
             this.applyMove(dx, dy);
-        else
-            this.applyResize(this.active, dx, dy);
+            return;
+        }
+        this.applyResize(this.active, dx, dy);
+        if (!this.withinImage(event))
+            this.onPointerUp(event);
     }
+    /**
+     * Ends the drag — for `pointerup`, `pointercancel`, a capture lost to something else,
+     * and a resize whose pointer left the image. Once per drag: the capture released here
+     * fires `lostpointercapture` afterwards, and by then there is nothing left to end.
+     *
+     * Only for the pointer that started it. A second finger is refused a drag of its own at
+     * `pointerdown`, but its moves and its lifting reach these handlers all the same, and
+     * would otherwise drive or end the first finger's drag.
+     */
     onPointerUp(event) {
-        if (!this.active)
+        if (!this.active || event.pointerId !== this.pointerId)
             return;
-        event.currentTarget.releasePointerCapture(event.pointerId);
+        const target = this.captureTarget;
         this.active = null;
+        this.pointerId = null;
+        this.captureTarget = null;
+        this.overhang = NO_SIDES;
+        // Asked first: a capture that is already gone has nothing to release, and releasing
+        // one for a pointer that is no longer active throws.
+        if (target?.hasPointerCapture(event.pointerId))
+            target.releasePointerCapture(event.pointerId);
         void this.emitCropped();
     }
+    /** How far past each side of the crop window the pointer is, in CSS pixels. */
+    pastCrop(event) {
+        const box = this.imgEl().nativeElement.getBoundingClientRect();
+        const c = this.startRect;
+        return {
+            left: Math.max(0, box.left + c.x - event.clientX),
+            top: Math.max(0, box.top + c.y - event.clientY),
+            right: Math.max(0, event.clientX - (box.left + c.x + c.w)),
+            bottom: Math.max(0, event.clientY - (box.top + c.y + c.h)),
+        };
+    }
+    /** Whether the pointer is on the image, edges and the press's `overhang` included. */
+    withinImage(event) {
+        const box = this.imgEl().nativeElement.getBoundingClientRect();
+        const o = this.overhang;
+        return (event.clientX >= box.left - o.left &&
+            event.clientX <= box.right + o.right &&
+            event.clientY >= box.top - o.top &&
+            event.clientY <= box.bottom + o.bottom);
+    }
     // Keyboard
     /** Whether a key has moved the crop since the last `keyup`. */
     keyboardDirty = false;
@@ -356,59 +566,8 @@ class WrImageCropper {
         this.cropDisplay.set(next);
     }
     applyResize(handle, dx, dy) {
-        const display = this.display();
         const min = { w: this.minWidth(), h: this.minHeight() };
-        const ratio = this.aspectRatio();
-        const r = this.startRect;
-        let x = r.x;
-        let y = r.y;
-        let w = r.w;
-        let h = r.h;
-        if (handle.includes('e'))
-            w = clamp(r.w + dx, min.w, display.w - r.x);
-        if (handle.includes('w')) {
-            const nextW = clamp(r.w - dx, min.w, r.x + r.w);
-            x = r.x + (r.w - nextW);
-            w = nextW;
-        }
-        if (handle.includes('s'))
-            h = clamp(r.h + dy, min.h, display.h - r.y);
-        if (handle.includes('n')) {
-            const nextH = clamp(r.h - dy, min.h, r.y + r.h);
-            y = r.y + (r.h - nextH);
-            h = nextH;
-        }
-        if (ratio && ratio > 0) {
-            // Lock the orthogonal axis to maintain ratio. For corner handles,
-            // pick whichever delta drives the larger change so we don't bounce.
-            if (handle === 'e' || handle === 'w') {
-                const newH = w / ratio;
-                const dh = newH - r.h;
-                if (handle === 'e' || handle === 'w') {
-                    y = r.y - dh / 2;
-                    h = newH;
-                }
-            }
-            else if (handle === 'n' || handle === 's') {
-                const newW = h * ratio;
-                const dw = newW - r.w;
-                x = r.x - dw / 2;
-                w = newW;
-            }
-            else {
-                // Corner — drive by width, then derive height.
-                const newH = w / ratio;
-                if (handle.includes('n'))
-                    y = r.y + r.h - newH;
-                h = newH;
-            }
-            // Re-clamp after ratio adjustment so we never spill out of the canvas.
-            x = clamp(x, 0, display.w - w);
-            y = clamp(y, 0, display.h - h);
-            w = clamp(w, min.w, display.w - x);
-            h = clamp(h, min.h, display.h - y);
-        }
-        this.cropDisplay.set({ x, y, w, h });
+        this.cropDisplay.set(resizeFrom(this.startRect, handle, dx, dy, this.display(), min, this.aspectRatio()));
     }
     // Public API
     /** Render the current crop as a Blob. */
@@ -432,12 +591,30 @@ class WrImageCropper {
         await this.emitCropped();
     }
     // Internals
+    /**
+     * The exported image's pixel size: the crop in source pixels, scaled down so its
+     * longer side fits `maxOutputSize`. `Math.min(1, …)` is the never-upscale rule — a
+     * crop already inside the cap keeps its own size, which is also the whole of the
+     * uncapped path.
+     */
+    outputSize(c) {
+        const cap = this.maxOutputSize();
+        const longest = Math.max(c.width, c.height);
+        const scale = cap === null || longest === 0 ? 1 : Math.min(1, cap / longest);
+        return {
+            width: Math.max(1, Math.round(c.width * scale)),
+            height: Math.max(1, Math.round(c.height * scale)),
+        };
+    }
     toCanvas() {
         const img = this.imgEl().nativeElement;
         const c = this.cropRect();
         const canvas = document.createElement('canvas');
-        canvas.width = Math.max(1, c.width);
-        canvas.height = Math.max(1, c.height);
+        const size = this.outputSize(c);
+        canvas.width = size.width;
+        canvas.height = size.height;
+        // The SOURCE rect stays the whole crop and the destination is the canvas, so a
+        // capped export is the same region drawn smaller rather than a smaller region.
         const ctx = canvas.getContext('2d');
         if (ctx)
             ctx.drawImage(img, c.x, c.y, c.width, c.height, 0, 0, canvas.width, canvas.height);
@@ -453,12 +630,15 @@ class WrImageCropper {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrImageCropper, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: WrImageCropper, isStandalone: true, selector: "wr-image-cropper", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, outputType: { classPropertyName: "outputType", publicName: "outputType", isSignal: true, isRequired: false, transformFunction: null }, outputQuality: { classPropertyName: "outputQuality", publicName: "outputQuality", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cropped: "cropped" }, host: { classAttribute: "wr-image-cropper" }, viewQueries: [{ propertyName: "imgEl", first: true, predicate: ["img"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (objectUrl(); as url) {\n  <div class=\"wr-image-cropper__canvas\">\n    <img #img class=\"wr-image-cropper__image\" [src]=\"url\" alt=\"\" draggable=\"false\" (load)=\"onImageLoad()\" />\n\n    @if (display().w > 0) {\n      <!-- Semi-transparent backdrop with a cut-out for the crop window. -->\n      <div\n        class=\"wr-image-cropper__backdrop\"\n        [style.clip-path]=\"`polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 ${cropDisplay().y}px, ${cropDisplay().x}px ${cropDisplay().y}px, ${cropDisplay().x}px ${cropDisplay().y + cropDisplay().h}px, ${cropDisplay().x + cropDisplay().w}px ${cropDisplay().y + cropDisplay().h}px, ${cropDisplay().x + cropDisplay().w}px ${cropDisplay().y}px, 0 ${cropDisplay().y}px)`\"\n      ></div>\n\n      <!--\n        Crop window \u2014 drag to move, with eight resize handles, and the ONE\n        keyboard control the component has (see `onWindowKeydown`). The eight\n        handles stay pointer-only and `aria-hidden`: eight extra tab stops per\n        cropper would be hostile. The keys resize from the east and south edges\n        only, so a west or north drag comes out as a resize plus a move rather\n        than as one gesture.\n\n        `role=\"group\"` rather than no role at all, because `aria-label` is\n        prohibited on a roleless `<div>` and this needs a name; and rather than\n        `role=\"application\"`, which would switch the reader out of its own\n        browse mode for the whole subtree \u2014 far more than one rectangle is worth.\n      -->\n      <div\n        class=\"wr-image-cropper__window\"\n        role=\"group\"\n        tabindex=\"0\"\n        [attr.aria-label]=\"resolvedWindowLabel()\"\n        [attr.aria-describedby]=\"helpId\"\n        [style.left.px]=\"cropDisplay().x\"\n        [style.top.px]=\"cropDisplay().y\"\n        [style.width.px]=\"cropDisplay().w\"\n        [style.height.px]=\"cropDisplay().h\"\n        (pointerdown)=\"onPointerDown('move', $event)\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerup)=\"onPointerUp($event)\"\n        (pointercancel)=\"onPointerUp($event)\"\n        (keydown)=\"onWindowKeydown($event)\"\n        (keyup)=\"onWindowKeyup()\"\n      >\n        @for (h of handles; track h) {\n          <span\n            aria-hidden=\"true\"\n            [class]=\"`wr-image-cropper__handle wr-image-cropper__handle--${h}`\"\n            (pointerdown)=\"onPointerDown(h, $event)\"\n            (pointermove)=\"onPointerMove($event)\"\n            (pointerup)=\"onPointerUp($event)\"\n            (pointercancel)=\"onPointerUp($event)\"\n          ></span>\n        }\n      </div>\n\n      <p class=\"wr-image-cropper__sr-only\" [id]=\"helpId\">{{ resolvedKeyHelp() }}</p>\n\n      <!--\n        The crop rect in SOURCE pixels, announced after a keyboard change only \u2014\n        a pointer drag already gives sighted feedback and would flood the region,\n        and the initial crop is not news. Deliberately bare numbers: a sentence\n        here would be a translated string the catalog does not carry, and the\n        reader has just been told what the four numbers mean by `helpId`.\n      -->\n      <p class=\"wr-image-cropper__sr-only\" role=\"status\">{{ announcement() }}</p>\n    }\n  </div>\n} @else {\n  <div class=\"wr-image-cropper__empty\">{{ emptyText() }}</div>\n}\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: WrImageCropper, isStandalone: true, selector: "wr-image-cropper", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, outputType: { classPropertyName: "outputType", publicName: "outputType", isSignal: true, isRequired: false, transformFunction: null }, outputQuality: { classPropertyName: "outputQuality", publicName: "outputQuality", isSignal: true, isRequired: false, transformFunction: null }, maxOutputSize: { classPropertyName: "maxOutputSize", publicName: "maxOutputSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cropped: "cropped", loadError: "loadError" }, host: { properties: { "class.wr-image-cropper--failed": "status() === 'failed'" }, classAttribute: "wr-image-cropper" }, viewQueries: [{ propertyName: "imgEl", first: true, predicate: ["img"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (objectUrl(); as url) {\n  <div class=\"wr-image-cropper__canvas\">\n    <img\n      #img\n      class=\"wr-image-cropper__image\"\n      [src]=\"url\"\n      alt=\"\"\n      draggable=\"false\"\n      (load)=\"onImageLoad()\"\n      (error)=\"onImageError()\"\n    />\n\n    @if (display().w > 0) {\n      <!-- Semi-transparent backdrop with a cut-out for the crop window. -->\n      <div\n        class=\"wr-image-cropper__backdrop\"\n        [style.clip-path]=\"`polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 ${cropDisplay().y}px, ${cropDisplay().x}px ${cropDisplay().y}px, ${cropDisplay().x}px ${cropDisplay().y + cropDisplay().h}px, ${cropDisplay().x + cropDisplay().w}px ${cropDisplay().y + cropDisplay().h}px, ${cropDisplay().x + cropDisplay().w}px ${cropDisplay().y}px, 0 ${cropDisplay().y}px)`\"\n      ></div>\n\n      <!--\n        Crop window \u2014 drag to move, with eight resize handles, and the ONE\n        keyboard control the component has (see `onWindowKeydown`). The eight\n        handles stay pointer-only and `aria-hidden`: eight extra tab stops per\n        cropper would be hostile. The keys resize from the east and south edges\n        only, so a west or north drag comes out as a resize plus a move rather\n        than as one gesture.\n\n        `role=\"group\"` rather than no role at all, because `aria-label` is\n        prohibited on a roleless `<div>` and this needs a name; and rather than\n        `role=\"application\"`, which would switch the reader out of its own\n        browse mode for the whole subtree \u2014 far more than one rectangle is worth.\n      -->\n      <div\n        class=\"wr-image-cropper__window\"\n        role=\"group\"\n        tabindex=\"0\"\n        [attr.aria-label]=\"resolvedWindowLabel()\"\n        [attr.aria-describedby]=\"helpId\"\n        [style.left.px]=\"cropDisplay().x\"\n        [style.top.px]=\"cropDisplay().y\"\n        [style.width.px]=\"cropDisplay().w\"\n        [style.height.px]=\"cropDisplay().h\"\n        (pointerdown)=\"onPointerDown('move', $event)\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerup)=\"onPointerUp($event)\"\n        (pointercancel)=\"onPointerUp($event)\"\n        (lostpointercapture)=\"onPointerUp($event)\"\n        (keydown)=\"onWindowKeydown($event)\"\n        (keyup)=\"onWindowKeyup()\"\n      >\n        @for (h of handles; track h) {\n          <span\n            aria-hidden=\"true\"\n            [class]=\"`wr-image-cropper__handle wr-image-cropper__handle--${h}`\"\n            (pointerdown)=\"onPointerDown(h, $event)\"\n            (pointermove)=\"onPointerMove($event)\"\n            (pointerup)=\"onPointerUp($event)\"\n            (pointercancel)=\"onPointerUp($event)\"\n            (lostpointercapture)=\"onPointerUp($event)\"\n          ></span>\n        }\n      </div>\n\n      <p class=\"wr-image-cropper__sr-only\" [id]=\"helpId\">{{ resolvedKeyHelp() }}</p>\n\n      <!--\n        The crop rect in SOURCE pixels, announced after a keyboard change only \u2014\n        a pointer drag already gives sighted feedback and would flood the region,\n        and the initial crop is not news. Deliberately bare numbers: a sentence\n        here would be a translated string the catalog does not carry, and the\n        reader has just been told what the four numbers mean by `helpId`.\n      -->\n      <p class=\"wr-image-cropper__sr-only\" role=\"status\">{{ announcement() }}</p>\n    }\n  </div>\n} @else {\n  <div class=\"wr-image-cropper__empty\">{{ emptyText() }}</div>\n}\n", encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrImageCropper, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-image-cropper', encapsulation: ViewEncapsulation.None, host: { class: 'wr-image-cropper' }, template: "@if (objectUrl(); as url) {\n  <div class=\"wr-image-cropper__canvas\">\n    <img #img class=\"wr-image-cropper__image\" [src]=\"url\" alt=\"\" draggable=\"false\" (load)=\"onImageLoad()\" />\n\n    @if (display().w > 0) {\n      <!-- Semi-transparent backdrop with a cut-out for the crop window. -->\n      <div\n        class=\"wr-image-cropper__backdrop\"\n        [style.clip-path]=\"`polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 ${cropDisplay().y}px, ${cropDisplay().x}px ${cropDisplay().y}px, ${cropDisplay().x}px ${cropDisplay().y + cropDisplay().h}px, ${cropDisplay().x + cropDisplay().w}px ${cropDisplay().y + cropDisplay().h}px, ${cropDisplay().x + cropDisplay().w}px ${cropDisplay().y}px, 0 ${cropDisplay().y}px)`\"\n      ></div>\n\n      <!--\n        Crop window \u2014 drag to move, with eight resize handles, and the ONE\n        keyboard control the component has (see `onWindowKeydown`). The eight\n        handles stay pointer-only and `aria-hidden`: eight extra tab stops per\n        cropper would be hostile. The keys resize from the east and south edges\n        only, so a west or north drag comes out as a resize plus a move rather\n        than as one gesture.\n\n        `role=\"group\"` rather than no role at all, because `aria-label` is\n        prohibited on a roleless `<div>` and this needs a name; and rather than\n        `role=\"application\"`, which would switch the reader out of its own\n        browse mode for the whole subtree \u2014 far more than one rectangle is worth.\n      -->\n      <div\n        class=\"wr-image-cropper__window\"\n        role=\"group\"\n        tabindex=\"0\"\n        [attr.aria-label]=\"resolvedWindowLabel()\"\n        [attr.aria-describedby]=\"helpId\"\n        [style.left.px]=\"cropDisplay().x\"\n        [style.top.px]=\"cropDisplay().y\"\n        [style.width.px]=\"cropDisplay().w\"\n        [style.height.px]=\"cropDisplay().h\"\n        (pointerdown)=\"onPointerDown('move', $event)\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerup)=\"onPointerUp($event)\"\n        (pointercancel)=\"onPointerUp($event)\"\n        (keydown)=\"onWindowKeydown($event)\"\n        (keyup)=\"onWindowKeyup()\"\n      >\n        @for (h of handles; track h) {\n          <span\n            aria-hidden=\"true\"\n            [class]=\"`wr-image-cropper__handle wr-image-cropper__handle--${h}`\"\n            (pointerdown)=\"onPointerDown(h, $event)\"\n            (pointermove)=\"onPointerMove($event)\"\n            (pointerup)=\"onPointerUp($event)\"\n            (pointercancel)=\"onPointerUp($event)\"\n          ></span>\n        }\n      </div>\n\n      <p class=\"wr-image-cropper__sr-only\" [id]=\"helpId\">{{ resolvedKeyHelp() }}</p>\n\n      <!--\n        The crop rect in SOURCE pixels, announced after a keyboard change only \u2014\n        a pointer drag already gives sighted feedback and would flood the region,\n        and the initial crop is not news. Deliberately bare numbers: a sentence\n        here would be a translated string the catalog does not carry, and the\n        reader has just been told what the four numbers mean by `helpId`.\n      -->\n      <p class=\"wr-image-cropper__sr-only\" role=\"status\">{{ announcement() }}</p>\n    }\n  </div>\n} @else {\n  <div class=\"wr-image-cropper__empty\">{{ emptyText() }}</div>\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], outputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputType", required: false }] }], outputQuality: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputQuality", required: false }] }], cropped: [{ type: i0.Output, args: ["cropped"] }], imgEl: [{ type: i0.ViewChild, args: ['img', { isSignal: true }] }] } });
+            args: [{ selector: 'wr-image-cropper', encapsulation: ViewEncapsulation.None, host: {
+                        class: 'wr-image-cropper',
+                        '[class.wr-image-cropper--failed]': "status() === 'failed'",
+                    }, template: "@if (objectUrl(); as url) {\n  <div class=\"wr-image-cropper__canvas\">\n    <img\n      #img\n      class=\"wr-image-cropper__image\"\n      [src]=\"url\"\n      alt=\"\"\n      draggable=\"false\"\n      (load)=\"onImageLoad()\"\n      (error)=\"onImageError()\"\n    />\n\n    @if (display().w > 0) {\n      <!-- Semi-transparent backdrop with a cut-out for the crop window. -->\n      <div\n        class=\"wr-image-cropper__backdrop\"\n        [style.clip-path]=\"`polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 ${cropDisplay().y}px, ${cropDisplay().x}px ${cropDisplay().y}px, ${cropDisplay().x}px ${cropDisplay().y + cropDisplay().h}px, ${cropDisplay().x + cropDisplay().w}px ${cropDisplay().y + cropDisplay().h}px, ${cropDisplay().x + cropDisplay().w}px ${cropDisplay().y}px, 0 ${cropDisplay().y}px)`\"\n      ></div>\n\n      <!--\n        Crop window \u2014 drag to move, with eight resize handles, and the ONE\n        keyboard control the component has (see `onWindowKeydown`). The eight\n        handles stay pointer-only and `aria-hidden`: eight extra tab stops per\n        cropper would be hostile. The keys resize from the east and south edges\n        only, so a west or north drag comes out as a resize plus a move rather\n        than as one gesture.\n\n        `role=\"group\"` rather than no role at all, because `aria-label` is\n        prohibited on a roleless `<div>` and this needs a name; and rather than\n        `role=\"application\"`, which would switch the reader out of its own\n        browse mode for the whole subtree \u2014 far more than one rectangle is worth.\n      -->\n      <div\n        class=\"wr-image-cropper__window\"\n        role=\"group\"\n        tabindex=\"0\"\n        [attr.aria-label]=\"resolvedWindowLabel()\"\n        [attr.aria-describedby]=\"helpId\"\n        [style.left.px]=\"cropDisplay().x\"\n        [style.top.px]=\"cropDisplay().y\"\n        [style.width.px]=\"cropDisplay().w\"\n        [style.height.px]=\"cropDisplay().h\"\n        (pointerdown)=\"onPointerDown('move', $event)\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerup)=\"onPointerUp($event)\"\n        (pointercancel)=\"onPointerUp($event)\"\n        (lostpointercapture)=\"onPointerUp($event)\"\n        (keydown)=\"onWindowKeydown($event)\"\n        (keyup)=\"onWindowKeyup()\"\n      >\n        @for (h of handles; track h) {\n          <span\n            aria-hidden=\"true\"\n            [class]=\"`wr-image-cropper__handle wr-image-cropper__handle--${h}`\"\n            (pointerdown)=\"onPointerDown(h, $event)\"\n            (pointermove)=\"onPointerMove($event)\"\n            (pointerup)=\"onPointerUp($event)\"\n            (pointercancel)=\"onPointerUp($event)\"\n            (lostpointercapture)=\"onPointerUp($event)\"\n          ></span>\n        }\n      </div>\n\n      <p class=\"wr-image-cropper__sr-only\" [id]=\"helpId\">{{ resolvedKeyHelp() }}</p>\n\n      <!--\n        The crop rect in SOURCE pixels, announced after a keyboard change only \u2014\n        a pointer drag already gives sighted feedback and would flood the region,\n        and the initial crop is not news. Deliberately bare numbers: a sentence\n        here would be a translated string the catalog does not carry, and the\n        reader has just been told what the four numbers mean by `helpId`.\n      -->\n      <p class=\"wr-image-cropper__sr-only\" role=\"status\">{{ announcement() }}</p>\n    }\n  </div>\n} @else {\n  <div class=\"wr-image-cropper__empty\">{{ emptyText() }}</div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], outputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputType", required: false }] }], outputQuality: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputQuality", required: false }] }], maxOutputSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxOutputSize", required: false }] }], cropped: [{ type: i0.Output, args: ["cropped"] }], loadError: [{ type: i0.Output, args: ["loadError"] }], imgEl: [{ type: i0.ViewChild, args: ['img', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.