ngwr 10.2.0 → 11.0.0

package/fesm2022/ngwr-image-cropper.mjs

@@ -97,6 +97,11 @@ class WrImageCropper {
                 URL.revokeObjectURL(this.previousObjectUrl);
                 this.previousObjectUrl = null;
             }
+            // The crop is measured against the image that WAS showing, and `cropRect` is a
+            // public signal a consumer can read at any moment. Left in place it kept
+            // reporting a rect scaled to the previous image for the whole gap between a new
+            // `src` and its load event — long enough to crop the wrong thing.
+            this.resetGeometry();
             if (!src) {
                 this.objectUrl.set(null);
                 return;
@@ -116,6 +121,20 @@ class WrImageCropper {
         });
     }
     // Image load
+    /**
+     * Back to "nothing measured yet", which is also what an absent `src` means.
+     *
+     * `display` is the field that gates everything downstream — the crop UI renders on
+     * `display().w > 0` and `cropRect` returns zeros without it — so it is the only one
+     * a test can observe. The other two are reset for coherence: anything that learns to
+     * set `display` from elsewhere (a resize observer is the obvious candidate for this
+     * component) would otherwise resurrect a crop measured against the previous image.
+     */
+    resetGeometry() {
+        this.natural.set({ w: 0, h: 0 });
+        this.display.set({ w: 0, h: 0 });
+        this.cropDisplay.set({ x: 0, y: 0, w: 0, h: 0 });
+    }
     onImageLoad() {
         const img = this.imgEl().nativeElement;
         const rect = img.getBoundingClientRect();
@@ -152,6 +171,10 @@ class WrImageCropper {
     // Drag handlers
     handles = ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'];
     onPointerDown(handle, event) {
+        // Any pointerdown used to start a drag, so the right button moved the crop window and
+        // a second finger could take over a drag already in progress.
+        if (event.button !== 0 || !event.isPrimary)
+            return;
         event.preventDefault();
         event.stopPropagation();
         this.active = handle;
@@ -284,10 +307,10 @@ class WrImageCropper {
             // Swallow — invalid state (image not loaded, crop empty, etc.).
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrImageCropper, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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      <!-- Crop window \u2014 drag to move, with eight resize handles. -->\n      <div\n        class=\"wr-image-cropper__window\"\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      >\n        @for (h of handles; track h) {\n          <span\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  </div>\n} @else {\n  <div class=\"wr-image-cropper__empty\">No image</div>\n}\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrImageCropper, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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      <!-- Crop window \u2014 drag to move, with eight resize handles. -->\n      <div\n        class=\"wr-image-cropper__window\"\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      >\n        @for (h of handles; track h) {\n          <span\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  </div>\n} @else {\n  <div class=\"wr-image-cropper__empty\">No image</div>\n}\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrImageCropper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", 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      <!-- Crop window \u2014 drag to move, with eight resize handles. -->\n      <div\n        class=\"wr-image-cropper__window\"\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      >\n        @for (h of handles; track h) {\n          <span\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  </div>\n} @else {\n  <div class=\"wr-image-cropper__empty\">No image</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 }] }] } });

package/fesm2022/ngwr-image-cropper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-image-cropper.mjs","sources":["../../../projects/lib/image-cropper/image-cropper.ts","../../../projects/lib/image-cropper/image-cropper.html","../../../projects/lib/image-cropper/ngwr-image-cropper.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceNumberProperty } from '@angular/cdk/coercion';\nimport {\n  Component,\n  DestroyRef,\n  type ElementRef,\n  ViewEncapsulation,\n  computed,\n  effect,\n  inject,\n  input,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core';\n\nimport { clamp } from 'ngwr/utils';\n\nimport type { WrCropHandle, WrCropRect, WrImageOutputType } from './interfaces';\n\ninterface RectPx {\n  x: number;\n  y: number;\n  w: number;\n  h: number;\n}\n\n/**\n * Image crop UI. Pass `[src]` (URL, `File`, or `Blob`); the user drags\n * the crop window or any of its eight handles. Optionally lock the crop\n * to a fixed `[aspectRatio]`.\n *\n * `(cropped)` fires after each drag end with a freshly-rendered `Blob`\n * of the cropped region. For one-off reads use `toBlob()` / `toDataUrl()`.\n *\n * @example\n * ```html\n * <wr-image-cropper\n *   [src]=\"file\"\n *   [aspectRatio]=\"1\"\n *   (cropped)=\"onBlob($event)\"\n * />\n * ```\n *\n * @see https://ngwr.dev/reference/components/image-cropper\n */\n@Component({\n  selector: 'wr-image-cropper',\n  templateUrl: './image-cropper.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-image-cropper' },\n})\nexport class WrImageCropper {\n  /** Image source — URL string, `File`, or `Blob`. */\n  readonly src = input<string | File | Blob | null>(null);\n\n  /** Aspect ratio (width / height). `null` = free. @default null */\n  readonly aspectRatio = input<number | null>(null);\n\n  /** Minimum crop width in display pixels. @default 32 */\n  readonly minWidth = input(32, { transform: (v: unknown): number => Math.max(8, coerceNumberProperty(v, 32)) });\n\n  /** Minimum crop height in display pixels. @default 32 */\n  readonly minHeight = input(32, { transform: (v: unknown): number => Math.max(8, coerceNumberProperty(v, 32)) });\n\n  /** Default output type for `(cropped)`. @default 'image/png' */\n  readonly outputType = input<WrImageOutputType>('image/png');\n\n  /** JPEG / WebP quality for `(cropped)` in [0, 1]. @default 0.92 */\n  readonly outputQuality = input(0.92);\n\n  /** Emits a Blob after each drag end. */\n  readonly cropped = output<Blob>();\n\n  protected readonly imgEl = viewChild.required<ElementRef<HTMLImageElement>>('img');\n\n  /** Resolved object URL for `src` (so File / Blob render in `<img>`). */\n  protected readonly objectUrl = signal<string | null>(null);\n\n  /** Previous object URL we created — kept off-signal so the resolve\n   *  effect doesn't depend on its own writes (which would loop). */\n  private previousObjectUrl: string | null = null;\n\n  /** Natural (source) pixel dimensions. */\n  protected readonly natural = signal<{ w: number; h: number }>({ w: 0, h: 0 });\n\n  /** Display (rendered) pixel dimensions. */\n  protected readonly display = signal<{ w: number; h: number }>({ w: 0, h: 0 });\n\n  /** Crop rect in display coordinates. */\n  protected readonly cropDisplay = signal<RectPx>({ x: 0, y: 0, w: 0, h: 0 });\n\n  /** Currently active drag handle. */\n  private active: WrCropHandle | null = null;\n  private startPointer: { x: number; y: number } = { x: 0, y: 0 };\n  private startRect: RectPx = { x: 0, y: 0, w: 0, h: 0 };\n\n  private readonly destroyRef = inject(DestroyRef);\n\n  /** Resolved crop rect in natural (source) pixel coordinates. */\n  readonly cropRect = computed<WrCropRect>(() => {\n    const display = this.display();\n    const natural = this.natural();\n    const c = this.cropDisplay();\n    if (display.w === 0 || display.h === 0) return { x: 0, y: 0, width: 0, height: 0 };\n    const sx = natural.w / display.w;\n    const sy = natural.h / display.h;\n    return {\n      x: Math.round(c.x * sx),\n      y: Math.round(c.y * sy),\n      width: Math.round(c.w * sx),\n      height: Math.round(c.h * sy),\n    };\n  });\n\n  constructor() {\n    // Resolve the source into a usable URL the <img> can render.\n    // We only read `src()` here — `previousObjectUrl` is a plain field, so\n    // writing to `objectUrl` doesn't re-trigger this effect (and hang the\n    // tab on file upload).\n    effect(() => {\n      const src = this.src();\n      if (this.previousObjectUrl) {\n        URL.revokeObjectURL(this.previousObjectUrl);\n        this.previousObjectUrl = null;\n      }\n      if (!src) {\n        this.objectUrl.set(null);\n        return;\n      }\n      if (typeof src === 'string') {\n        this.objectUrl.set(src);\n      } else {\n        const url = URL.createObjectURL(src);\n        this.previousObjectUrl = url;\n        this.objectUrl.set(url);\n      }\n    });\n\n    this.destroyRef.onDestroy(() => {\n      if (this.previousObjectUrl) URL.revokeObjectURL(this.previousObjectUrl);\n    });\n  }\n\n  // Image load\n\n  protected onImageLoad(): void {\n    const img = this.imgEl().nativeElement;\n    const rect = img.getBoundingClientRect();\n    const display = { w: rect.width, h: rect.height };\n    // Some SVGs and odd images report zero natural dimensions — fall back\n    // to the rendered size so the crop math stays well-defined.\n    const natural = {\n      w: img.naturalWidth || display.w,\n      h: img.naturalHeight || display.h,\n    };\n    this.natural.set(natural);\n    this.display.set(display);\n    this.cropDisplay.set(this.initialCrop(display));\n  }\n\n  /** Compute a sensible initial crop — centered, respecting aspectRatio. */\n  private initialCrop(display: { w: number; h: number }): RectPx {\n    const ratio = this.aspectRatio();\n    let w = display.w * 0.6;\n    let h = display.h * 0.6;\n    if (ratio && ratio > 0) {\n      const candidate = w / ratio;\n      if (candidate > h) w = h * ratio;\n      else h = w / ratio;\n    }\n    return {\n      x: (display.w - w) / 2,\n      y: (display.h - h) / 2,\n      w,\n      h,\n    };\n  }\n\n  // Drag handlers\n\n  protected readonly handles: readonly WrCropHandle[] = ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'];\n\n  protected onPointerDown(handle: WrCropHandle, event: PointerEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n    this.active = handle;\n    this.startPointer = { x: event.clientX, y: event.clientY };\n    this.startRect = { ...this.cropDisplay() };\n    (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);\n  }\n\n  protected onPointerMove(event: PointerEvent): void {\n    if (!this.active) return;\n    const dx = event.clientX - this.startPointer.x;\n    const dy = event.clientY - this.startPointer.y;\n    if (this.active === 'move') this.applyMove(dx, dy);\n    else this.applyResize(this.active, dx, dy);\n  }\n\n  protected onPointerUp(event: PointerEvent): void {\n    if (!this.active) return;\n    (event.currentTarget as HTMLElement).releasePointerCapture(event.pointerId);\n    this.active = null;\n    void this.emitCropped();\n  }\n\n  private applyMove(dx: number, dy: number): void {\n    const display = this.display();\n    const r = this.startRect;\n    const next = {\n      x: clamp(r.x + dx, 0, display.w - r.w),\n      y: clamp(r.y + dy, 0, display.h - r.h),\n      w: r.w,\n      h: r.h,\n    };\n    this.cropDisplay.set(next);\n  }\n\n  private applyResize(handle: WrCropHandle, dx: number, dy: number): void {\n    const display = this.display();\n    const min = { w: this.minWidth(), h: this.minHeight() };\n    const ratio = this.aspectRatio();\n    const r = this.startRect;\n    let x = r.x;\n    let y = r.y;\n    let w = r.w;\n    let h = r.h;\n\n    if (handle.includes('e')) w = clamp(r.w + dx, min.w, display.w - r.x);\n    if (handle.includes('w')) {\n      const nextW = clamp(r.w - dx, min.w, r.x + r.w);\n      x = r.x + (r.w - nextW);\n      w = nextW;\n    }\n    if (handle.includes('s')) h = clamp(r.h + dy, min.h, display.h - r.y);\n    if (handle.includes('n')) {\n      const nextH = clamp(r.h - dy, min.h, r.y + r.h);\n      y = r.y + (r.h - nextH);\n      h = nextH;\n    }\n\n    if (ratio && ratio > 0) {\n      // Lock the orthogonal axis to maintain ratio. For corner handles,\n      // pick whichever delta drives the larger change so we don't bounce.\n      if (handle === 'e' || handle === 'w') {\n        const newH = w / ratio;\n        const dh = newH - r.h;\n        if (handle === 'e' || handle === 'w') {\n          y = r.y - dh / 2;\n          h = newH;\n        }\n      } else if (handle === 'n' || handle === 's') {\n        const newW = h * ratio;\n        const dw = newW - r.w;\n        x = r.x - dw / 2;\n        w = newW;\n      } else {\n        // Corner — drive by width, then derive height.\n        const newH = w / ratio;\n        if (handle.includes('n')) y = r.y + r.h - newH;\n        h = newH;\n      }\n      // Re-clamp after ratio adjustment so we never spill out of the canvas.\n      x = clamp(x, 0, display.w - w);\n      y = clamp(y, 0, display.h - h);\n      w = clamp(w, min.w, display.w - x);\n      h = clamp(h, min.h, display.h - y);\n    }\n\n    this.cropDisplay.set({ x, y, w, h });\n  }\n\n  // Public API\n\n  /** Render the current crop as a Blob. */\n  async toBlob(type: WrImageOutputType = this.outputType(), quality: number = this.outputQuality()): Promise<Blob> {\n    const canvas = this.toCanvas();\n    return new Promise<Blob>((resolve, reject) => {\n      canvas.toBlob(\n        blob => {\n          if (blob) resolve(blob);\n          else reject(new Error('toBlob returned null'));\n        },\n        type,\n        quality\n      );\n    });\n  }\n\n  /** Render the current crop as a data URL. */\n  toDataUrl(type: WrImageOutputType = this.outputType(), quality: number = this.outputQuality()): string {\n    return this.toCanvas().toDataURL(type, quality);\n  }\n\n  /** Re-emit the crop without waiting for a drag (e.g. after a programmatic change). */\n  async refresh(): Promise<void> {\n    await this.emitCropped();\n  }\n\n  // Internals\n\n  private toCanvas(): HTMLCanvasElement {\n    const img = this.imgEl().nativeElement;\n    const c = this.cropRect();\n    const canvas = document.createElement('canvas');\n    canvas.width = Math.max(1, c.width);\n    canvas.height = Math.max(1, c.height);\n    const ctx = canvas.getContext('2d');\n    if (ctx) ctx.drawImage(img, c.x, c.y, c.width, c.height, 0, 0, canvas.width, canvas.height);\n    return canvas;\n  }\n\n  private async emitCropped(): Promise<void> {\n    try {\n      const blob = await this.toBlob();\n      this.cropped.emit(blob);\n    } catch {\n      // Swallow — invalid state (image not loaded, crop empty, etc.).\n    }\n  }\n}\n","@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      <!-- Crop window — drag to move, with eight resize handles. -->\n      <div\n        class=\"wr-image-cropper__window\"\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      >\n        @for (h of handles; track h) {\n          <span\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  </div>\n} @else {\n  <div class=\"wr-image-cropper__empty\">No image</div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngwr-image-cropper.mjs","sources":["../../../projects/lib/image-cropper/image-cropper.ts","../../../projects/lib/image-cropper/image-cropper.html","../../../projects/lib/image-cropper/ngwr-image-cropper.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceNumberProperty } from '@angular/cdk/coercion';\nimport {\n  Component,\n  DestroyRef,\n  type ElementRef,\n  ViewEncapsulation,\n  computed,\n  effect,\n  inject,\n  input,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core';\n\nimport { clamp } from 'ngwr/utils';\n\nimport type { WrCropHandle, WrCropRect, WrImageOutputType } from './interfaces';\n\ninterface RectPx {\n  x: number;\n  y: number;\n  w: number;\n  h: number;\n}\n\n/**\n * Image crop UI. Pass `[src]` (URL, `File`, or `Blob`); the user drags\n * the crop window or any of its eight handles. Optionally lock the crop\n * to a fixed `[aspectRatio]`.\n *\n * `(cropped)` fires after each drag end with a freshly-rendered `Blob`\n * of the cropped region. For one-off reads use `toBlob()` / `toDataUrl()`.\n *\n * @example\n * ```html\n * <wr-image-cropper\n *   [src]=\"file\"\n *   [aspectRatio]=\"1\"\n *   (cropped)=\"onBlob($event)\"\n * />\n * ```\n *\n * @see https://ngwr.dev/reference/components/image-cropper\n */\n@Component({\n  selector: 'wr-image-cropper',\n  templateUrl: './image-cropper.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-image-cropper' },\n})\nexport class WrImageCropper {\n  /** Image source — URL string, `File`, or `Blob`. */\n  readonly src = input<string | File | Blob | null>(null);\n\n  /** Aspect ratio (width / height). `null` = free. @default null */\n  readonly aspectRatio = input<number | null>(null);\n\n  /** Minimum crop width in display pixels. @default 32 */\n  readonly minWidth = input(32, { transform: (v: unknown): number => Math.max(8, coerceNumberProperty(v, 32)) });\n\n  /** Minimum crop height in display pixels. @default 32 */\n  readonly minHeight = input(32, { transform: (v: unknown): number => Math.max(8, coerceNumberProperty(v, 32)) });\n\n  /** Default output type for `(cropped)`. @default 'image/png' */\n  readonly outputType = input<WrImageOutputType>('image/png');\n\n  /** JPEG / WebP quality for `(cropped)` in [0, 1]. @default 0.92 */\n  readonly outputQuality = input(0.92);\n\n  /** Emits a Blob after each drag end. */\n  readonly cropped = output<Blob>();\n\n  protected readonly imgEl = viewChild.required<ElementRef<HTMLImageElement>>('img');\n\n  /** Resolved object URL for `src` (so File / Blob render in `<img>`). */\n  protected readonly objectUrl = signal<string | null>(null);\n\n  /** Previous object URL we created — kept off-signal so the resolve\n   *  effect doesn't depend on its own writes (which would loop). */\n  private previousObjectUrl: string | null = null;\n\n  /** Natural (source) pixel dimensions. */\n  protected readonly natural = signal<{ w: number; h: number }>({ w: 0, h: 0 });\n\n  /** Display (rendered) pixel dimensions. */\n  protected readonly display = signal<{ w: number; h: number }>({ w: 0, h: 0 });\n\n  /** Crop rect in display coordinates. */\n  protected readonly cropDisplay = signal<RectPx>({ x: 0, y: 0, w: 0, h: 0 });\n\n  /** Currently active drag handle. */\n  private active: WrCropHandle | null = null;\n  private startPointer: { x: number; y: number } = { x: 0, y: 0 };\n  private startRect: RectPx = { x: 0, y: 0, w: 0, h: 0 };\n\n  private readonly destroyRef = inject(DestroyRef);\n\n  /** Resolved crop rect in natural (source) pixel coordinates. */\n  readonly cropRect = computed<WrCropRect>(() => {\n    const display = this.display();\n    const natural = this.natural();\n    const c = this.cropDisplay();\n    if (display.w === 0 || display.h === 0) return { x: 0, y: 0, width: 0, height: 0 };\n    const sx = natural.w / display.w;\n    const sy = natural.h / display.h;\n    return {\n      x: Math.round(c.x * sx),\n      y: Math.round(c.y * sy),\n      width: Math.round(c.w * sx),\n      height: Math.round(c.h * sy),\n    };\n  });\n\n  constructor() {\n    // Resolve the source into a usable URL the <img> can render.\n    // We only read `src()` here — `previousObjectUrl` is a plain field, so\n    // writing to `objectUrl` doesn't re-trigger this effect (and hang the\n    // tab on file upload).\n    effect(() => {\n      const src = this.src();\n      if (this.previousObjectUrl) {\n        URL.revokeObjectURL(this.previousObjectUrl);\n        this.previousObjectUrl = null;\n      }\n      // The crop is measured against the image that WAS showing, and `cropRect` is a\n      // public signal a consumer can read at any moment. Left in place it kept\n      // reporting a rect scaled to the previous image for the whole gap between a new\n      // `src` and its load event — long enough to crop the wrong thing.\n      this.resetGeometry();\n      if (!src) {\n        this.objectUrl.set(null);\n        return;\n      }\n      if (typeof src === 'string') {\n        this.objectUrl.set(src);\n      } else {\n        const url = URL.createObjectURL(src);\n        this.previousObjectUrl = url;\n        this.objectUrl.set(url);\n      }\n    });\n\n    this.destroyRef.onDestroy(() => {\n      if (this.previousObjectUrl) URL.revokeObjectURL(this.previousObjectUrl);\n    });\n  }\n\n  // Image load\n\n  /**\n   * Back to \"nothing measured yet\", which is also what an absent `src` means.\n   *\n   * `display` is the field that gates everything downstream — the crop UI renders on\n   * `display().w > 0` and `cropRect` returns zeros without it — so it is the only one\n   * a test can observe. The other two are reset for coherence: anything that learns to\n   * set `display` from elsewhere (a resize observer is the obvious candidate for this\n   * component) would otherwise resurrect a crop measured against the previous image.\n   */\n  private resetGeometry(): void {\n    this.natural.set({ w: 0, h: 0 });\n    this.display.set({ w: 0, h: 0 });\n    this.cropDisplay.set({ x: 0, y: 0, w: 0, h: 0 });\n  }\n\n  protected onImageLoad(): void {\n    const img = this.imgEl().nativeElement;\n    const rect = img.getBoundingClientRect();\n    const display = { w: rect.width, h: rect.height };\n    // Some SVGs and odd images report zero natural dimensions — fall back\n    // to the rendered size so the crop math stays well-defined.\n    const natural = {\n      w: img.naturalWidth || display.w,\n      h: img.naturalHeight || display.h,\n    };\n    this.natural.set(natural);\n    this.display.set(display);\n    this.cropDisplay.set(this.initialCrop(display));\n  }\n\n  /** Compute a sensible initial crop — centered, respecting aspectRatio. */\n  private initialCrop(display: { w: number; h: number }): RectPx {\n    const ratio = this.aspectRatio();\n    let w = display.w * 0.6;\n    let h = display.h * 0.6;\n    if (ratio && ratio > 0) {\n      const candidate = w / ratio;\n      if (candidate > h) w = h * ratio;\n      else h = w / ratio;\n    }\n    return {\n      x: (display.w - w) / 2,\n      y: (display.h - h) / 2,\n      w,\n      h,\n    };\n  }\n\n  // Drag handlers\n\n  protected readonly handles: readonly WrCropHandle[] = ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'];\n\n  protected onPointerDown(handle: WrCropHandle, event: PointerEvent): void {\n    // Any pointerdown used to start a drag, so the right button moved the crop window and\n    // a second finger could take over a drag already in progress.\n    if (event.button !== 0 || !event.isPrimary) return;\n    event.preventDefault();\n    event.stopPropagation();\n    this.active = handle;\n    this.startPointer = { x: event.clientX, y: event.clientY };\n    this.startRect = { ...this.cropDisplay() };\n    (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);\n  }\n\n  protected onPointerMove(event: PointerEvent): void {\n    if (!this.active) return;\n    const dx = event.clientX - this.startPointer.x;\n    const dy = event.clientY - this.startPointer.y;\n    if (this.active === 'move') this.applyMove(dx, dy);\n    else this.applyResize(this.active, dx, dy);\n  }\n\n  protected onPointerUp(event: PointerEvent): void {\n    if (!this.active) return;\n    (event.currentTarget as HTMLElement).releasePointerCapture(event.pointerId);\n    this.active = null;\n    void this.emitCropped();\n  }\n\n  private applyMove(dx: number, dy: number): void {\n    const display = this.display();\n    const r = this.startRect;\n    const next = {\n      x: clamp(r.x + dx, 0, display.w - r.w),\n      y: clamp(r.y + dy, 0, display.h - r.h),\n      w: r.w,\n      h: r.h,\n    };\n    this.cropDisplay.set(next);\n  }\n\n  private applyResize(handle: WrCropHandle, dx: number, dy: number): void {\n    const display = this.display();\n    const min = { w: this.minWidth(), h: this.minHeight() };\n    const ratio = this.aspectRatio();\n    const r = this.startRect;\n    let x = r.x;\n    let y = r.y;\n    let w = r.w;\n    let h = r.h;\n\n    if (handle.includes('e')) w = clamp(r.w + dx, min.w, display.w - r.x);\n    if (handle.includes('w')) {\n      const nextW = clamp(r.w - dx, min.w, r.x + r.w);\n      x = r.x + (r.w - nextW);\n      w = nextW;\n    }\n    if (handle.includes('s')) h = clamp(r.h + dy, min.h, display.h - r.y);\n    if (handle.includes('n')) {\n      const nextH = clamp(r.h - dy, min.h, r.y + r.h);\n      y = r.y + (r.h - nextH);\n      h = nextH;\n    }\n\n    if (ratio && ratio > 0) {\n      // Lock the orthogonal axis to maintain ratio. For corner handles,\n      // pick whichever delta drives the larger change so we don't bounce.\n      if (handle === 'e' || handle === 'w') {\n        const newH = w / ratio;\n        const dh = newH - r.h;\n        if (handle === 'e' || handle === 'w') {\n          y = r.y - dh / 2;\n          h = newH;\n        }\n      } else if (handle === 'n' || handle === 's') {\n        const newW = h * ratio;\n        const dw = newW - r.w;\n        x = r.x - dw / 2;\n        w = newW;\n      } else {\n        // Corner — drive by width, then derive height.\n        const newH = w / ratio;\n        if (handle.includes('n')) y = r.y + r.h - newH;\n        h = newH;\n      }\n      // Re-clamp after ratio adjustment so we never spill out of the canvas.\n      x = clamp(x, 0, display.w - w);\n      y = clamp(y, 0, display.h - h);\n      w = clamp(w, min.w, display.w - x);\n      h = clamp(h, min.h, display.h - y);\n    }\n\n    this.cropDisplay.set({ x, y, w, h });\n  }\n\n  // Public API\n\n  /** Render the current crop as a Blob. */\n  async toBlob(type: WrImageOutputType = this.outputType(), quality: number = this.outputQuality()): Promise<Blob> {\n    const canvas = this.toCanvas();\n    return new Promise<Blob>((resolve, reject) => {\n      canvas.toBlob(\n        blob => {\n          if (blob) resolve(blob);\n          else reject(new Error('toBlob returned null'));\n        },\n        type,\n        quality\n      );\n    });\n  }\n\n  /** Render the current crop as a data URL. */\n  toDataUrl(type: WrImageOutputType = this.outputType(), quality: number = this.outputQuality()): string {\n    return this.toCanvas().toDataURL(type, quality);\n  }\n\n  /** Re-emit the crop without waiting for a drag (e.g. after a programmatic change). */\n  async refresh(): Promise<void> {\n    await this.emitCropped();\n  }\n\n  // Internals\n\n  private toCanvas(): HTMLCanvasElement {\n    const img = this.imgEl().nativeElement;\n    const c = this.cropRect();\n    const canvas = document.createElement('canvas');\n    canvas.width = Math.max(1, c.width);\n    canvas.height = Math.max(1, c.height);\n    const ctx = canvas.getContext('2d');\n    if (ctx) ctx.drawImage(img, c.x, c.y, c.width, c.height, 0, 0, canvas.width, canvas.height);\n    return canvas;\n  }\n\n  private async emitCropped(): Promise<void> {\n    try {\n      const blob = await this.toBlob();\n      this.cropped.emit(blob);\n    } catch {\n      // Swallow — invalid state (image not loaded, crop empty, etc.).\n    }\n  }\n}\n","@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      <!-- Crop window — drag to move, with eight resize handles. -->\n      <div\n        class=\"wr-image-cropper__window\"\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      >\n        @for (h of handles; track h) {\n          <span\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  </div>\n} @else {\n  <div class=\"wr-image-cropper__empty\">No image</div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;AAAA;;;;;AAKG;AA4BH;;;;;;;;;;;;;;;;;;AAkBG;MAOU,cAAc,CAAA;;IAEhB,GAAG,GAAG,KAAK,CAA8B,IAAI;4EAAC;;IAG9C,WAAW,GAAG,KAAK,CAAgB,IAAI;oFAAC;;IAGxC,QAAQ,GAAG,KAAK,CAAC,EAAE,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,UAAA,EAAA,8BAAA,EAAA,CAAA,EAAI,SAAS,EAAE,CAAC,CAAU,KAAa,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,oBAAoB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAA,CAAG;;IAGrG,SAAS,GAAG,KAAK,CAAC,EAAE,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,WAAA,EAAA,8BAAA,EAAA,CAAA,EAAI,SAAS,EAAE,CAAC,CAAU,KAAa,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,oBAAoB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAA,CAAG;;IAGtG,UAAU,GAAG,KAAK,CAAoB,WAAW;mFAAC;;IAGlD,aAAa,GAAG,KAAK,CAAC,IAAI;sFAAC;;IAG3B,OAAO,GAAG,MAAM,EAAQ;AAEd,IAAA,KAAK,GAAG,SAAS,CAAC,QAAQ,CAA+B,KAAK;8EAAC;;IAG/D,SAAS,GAAG,MAAM,CAAgB,IAAI;kFAAC;AAE1D;AACkE;IAC1D,iBAAiB,GAAkB,IAAI;;IAG5B,OAAO,GAAG,MAAM,CAA2B,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;gFAAC;;IAG1D,OAAO,GAAG,MAAM,CAA2B,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;gFAAC;;AAG1D,IAAA,WAAW,GAAG,MAAM,CAAS,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;oFAAC;;IAGnE,MAAM,GAAwB,IAAI;IAClC,YAAY,GAA6B,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACvD,IAAA,SAAS,GAAW,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAErC,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;;AAGvC,IAAA,QAAQ,GAAG,QAAQ,CAAa,MAAK;AAC5C,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE;AAC9B,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE;AAC9B,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE;QAC5B,IAAI,OAAO,CAAC,CAAC,KAAK,CAAC,IAAI,OAAO,CAAC,CAAC,KAAK,CAAC;AAAE,YAAA,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;QAClF,MAAM,EAAE,GAAG,OAAO,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC;QAChC,MAAM,EAAE,GAAG,OAAO,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC;QAChC,OAAO;YACL,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;YACvB,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;YACvB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;YAC3B,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;SAC7B;IACH,CAAC;iFAAC;AAEF,IAAA,WAAA,GAAA;;;;;QAKE,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE;AACtB,YAAA,IAAI,IAAI,CAAC,iBAAiB,EAAE;AAC1B,gBAAA,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,iBAAiB,CAAC;AAC3C,gBAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI;YAC/B;;;;;YAKA,IAAI,CAAC,aAAa,EAAE;YACpB,IAAI,CAAC,GAAG,EAAE;AACR,gBAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC;gBACxB;YACF;AACA,YAAA,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;AAC3B,gBAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC;YACzB;iBAAO;gBACL,MAAM,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC;AACpC,gBAAA,IAAI,CAAC,iBAAiB,GAAG,GAAG;AAC5B,gBAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC;YACzB;AACF,QAAA,CAAC,CAAC;AAEF,QAAA,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,MAAK;YAC7B,IAAI,IAAI,CAAC,iBAAiB;AAAE,gBAAA,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,iBAAiB,CAAC;AACzE,QAAA,CAAC,CAAC;IACJ;;AAIA;;;;;;;;AAQG;IACK,aAAa,GAAA;AACnB,QAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;AAChC,QAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;QAChC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;IAClD;IAEU,WAAW,GAAA;QACnB,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,aAAa;AACtC,QAAA,MAAM,IAAI,GAAG,GAAG,CAAC,qBAAqB,EAAE;AACxC,QAAA,MAAM,OAAO,GAAG,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE;;;AAGjD,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,CAAC,EAAE,GAAG,CAAC,YAAY,IAAI,OAAO,CAAC,CAAC;AAChC,YAAA,CAAC,EAAE,GAAG,CAAC,aAAa,IAAI,OAAO,CAAC,CAAC;SAClC;AACD,QAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;AACzB,QAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;AACzB,QAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IACjD;;AAGQ,IAAA,WAAW,CAAC,OAAiC,EAAA;AACnD,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE;AAChC,QAAA,IAAI,CAAC,GAAG,OAAO,CAAC,CAAC,GAAG,GAAG;AACvB,QAAA,IAAI,CAAC,GAAG,OAAO,CAAC,CAAC,GAAG,GAAG;AACvB,QAAA,IAAI,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE;AACtB,YAAA,MAAM,SAAS,GAAG,CAAC,GAAG,KAAK;YAC3B,IAAI,SAAS,GAAG,CAAC;AAAE,gBAAA,CAAC,GAAG,CAAC,GAAG,KAAK;;AAC3B,gBAAA,CAAC,GAAG,CAAC,GAAG,KAAK;QACpB;QACA,OAAO;YACL,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC;YACtB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC;YACtB,CAAC;YACD,CAAC;SACF;IACH;;AAImB,IAAA,OAAO,GAA4B,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;IAExF,aAAa,CAAC,MAAoB,EAAE,KAAmB,EAAA;;;QAG/D,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS;YAAE;QAC5C,KAAK,CAAC,cAAc,EAAE;QACtB,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,MAAM,GAAG,MAAM;AACpB,QAAA,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE;QAC1D,IAAI,CAAC,SAAS,GAAG,EAAE,GAAG,IAAI,CAAC,WAAW,EAAE,EAAE;QACzC,KAAK,CAAC,aAA6B,CAAC,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC;IACzE;AAEU,IAAA,aAAa,CAAC,KAAmB,EAAA;QACzC,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE;QAClB,MAAM,EAAE,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC;QAC9C,MAAM,EAAE,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC;AAC9C,QAAA,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM;AAAE,YAAA,IAAI,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,CAAC;;YAC7C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC;IAC5C;AAEU,IAAA,WAAW,CAAC,KAAmB,EAAA;QACvC,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE;QACjB,KAAK,CAAC,aAA6B,CAAC,qBAAqB,CAAC,KAAK,CAAC,SAAS,CAAC;AAC3E,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI;AAClB,QAAA,KAAK,IAAI,CAAC,WAAW,EAAE;IACzB;IAEQ,SAAS,CAAC,EAAU,EAAE,EAAU,EAAA;AACtC,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE;AAC9B,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS;AACxB,QAAA,MAAM,IAAI,GAAG;AACX,YAAA,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AACtC,YAAA,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;YACtC,CAAC,EAAE,CAAC,CAAC,CAAC;YACN,CAAC,EAAE,CAAC,CAAC,CAAC;SACP;AACD,QAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC;IAC5B;AAEQ,IAAA,WAAW,CAAC,MAAoB,EAAE,EAAU,EAAE,EAAU,EAAA;AAC9D,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE;AAC9B,QAAA,MAAM,GAAG,GAAG,EAAE,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE;AACvD,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE;AAChC,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS;AACxB,QAAA,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AACX,QAAA,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AACX,QAAA,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AACX,QAAA,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AAEX,QAAA,IAAI,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC;YAAE,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AACrE,QAAA,IAAI,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;YACxB,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AAC/C,YAAA,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;YACvB,CAAC,GAAG,KAAK;QACX;AACA,QAAA,IAAI,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC;YAAE,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AACrE,QAAA,IAAI,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;YACxB,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AAC/C,YAAA,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;YACvB,CAAC,GAAG,KAAK;QACX;AAEA,QAAA,IAAI,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE;;;YAGtB,IAAI,MAAM,KAAK,GAAG,IAAI,MAAM,KAAK,GAAG,EAAE;AACpC,gBAAA,MAAM,IAAI,GAAG,CAAC,GAAG,KAAK;AACtB,gBAAA,MAAM,EAAE,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC;gBACrB,IAAI,MAAM,KAAK,GAAG,IAAI,MAAM,KAAK,GAAG,EAAE;oBACpC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC;oBAChB,CAAC,GAAG,IAAI;gBACV;YACF;iBAAO,IAAI,MAAM,KAAK,GAAG,IAAI,MAAM,KAAK,GAAG,EAAE;AAC3C,gBAAA,MAAM,IAAI,GAAG,CAAC,GAAG,KAAK;AACtB,gBAAA,MAAM,EAAE,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC;gBACrB,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC;gBAChB,CAAC,GAAG,IAAI;YACV;iBAAO;;AAEL,gBAAA,MAAM,IAAI,GAAG,CAAC,GAAG,KAAK;AACtB,gBAAA,IAAI,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC;oBAAE,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI;gBAC9C,CAAC,GAAG,IAAI;YACV;;AAEA,YAAA,CAAC,GAAG,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC;AAC9B,YAAA,CAAC,GAAG,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC;AAC9B,YAAA,CAAC,GAAG,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC;AAClC,YAAA,CAAC,GAAG,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC;QACpC;AAEA,QAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;IACtC;;;AAKA,IAAA,MAAM,MAAM,CAAC,IAAA,GAA0B,IAAI,CAAC,UAAU,EAAE,EAAE,OAAA,GAAkB,IAAI,CAAC,aAAa,EAAE,EAAA;AAC9F,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,EAAE;QAC9B,OAAO,IAAI,OAAO,CAAO,CAAC,OAAO,EAAE,MAAM,KAAI;AAC3C,YAAA,MAAM,CAAC,MAAM,CACX,IAAI,IAAG;AACL,gBAAA,IAAI,IAAI;oBAAE,OAAO,CAAC,IAAI,CAAC;;AAClB,oBAAA,MAAM,CAAC,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;AAChD,YAAA,CAAC,EACD,IAAI,EACJ,OAAO,CACR;AACH,QAAA,CAAC,CAAC;IACJ;;IAGA,SAAS,CAAC,IAAA,GAA0B,IAAI,CAAC,UAAU,EAAE,EAAE,OAAA,GAAkB,IAAI,CAAC,aAAa,EAAE,EAAA;QAC3F,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC;IACjD;;AAGA,IAAA,MAAM,OAAO,GAAA;AACX,QAAA,MAAM,IAAI,CAAC,WAAW,EAAE;IAC1B;;IAIQ,QAAQ,GAAA;QACd,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,aAAa;AACtC,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE;QACzB,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC;AAC/C,QAAA,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC;AACnC,QAAA,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC;QACrC,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC;AACnC,QAAA,IAAI,GAAG;AAAE,YAAA,GAAG,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC;AAC3F,QAAA,OAAO,MAAM;IACf;AAEQ,IAAA,MAAM,WAAW,GAAA;AACvB,QAAA,IAAI;AACF,YAAA,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,MAAM,EAAE;AAChC,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;QACzB;AAAE,QAAA,MAAM;;QAER;IACF;uGAnSW,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAd,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,6iCC1D3B,utDAsCA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDoBa,cAAc,EAAA,UAAA,EAAA,CAAA;kBAN1B,SAAS;+BACE,kBAAkB,EAAA,aAAA,EAEb,iBAAiB,CAAC,IAAI,QAC/B,EAAE,KAAK,EAAE,kBAAkB,EAAE,EAAA,QAAA,EAAA,utDAAA,EAAA;4tBAwByC,KAAK,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AEhFnF;;AAEG;;;;"}

package/fesm2022/ngwr-input-number-testing.mjs

@@ -0,0 +1,306 @@
+import { ComponentHarness, HarnessPredicate, TestKey } from '@angular/cdk/testing';
+
+/**
+ * @license
+ *
+ * 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
+ */
+/** The decimal + grouping characters `Intl` formats `locale` with. */
+function separatorsFor(locale) {
+    const parts = new Intl.NumberFormat(locale).formatToParts(12345.6);
+    return {
+        decimal: parts.find(part => part.type === 'decimal')?.value ?? '.',
+        group: parts.find(part => part.type === 'group')?.value ?? '',
+    };
+}
+/**
+ * Locale-formatted text back into a number — `null` when the text is empty or is
+ * not a number at all.
+ *
+ * The same two-step the component parses with: drop the grouping character, then
+ * normalise the decimal one to `.`. Doing it in that order matters, because in
+ * half the world's locales the two are swapped and `Number('1.234,5')` is `NaN`
+ * either way.
+ */
+function parseNumber(text, locale) {
+    const trimmed = text.trim();
+    if (!trimmed)
+        return null;
+    const { decimal, group } = separatorsFor(locale);
+    let normalised = group ? trimmed.split(group).join('') : trimmed;
+    if (decimal !== '.')
+        normalised = normalised.split(decimal).join('.');
+    const parsed = Number(normalised);
+    return Number.isFinite(parsed) ? parsed : null;
+}
+/**
+ * Test harness for `<wr-input-number>`.
+ *
+ * The control is a `type="text"` field plus a ▲▼ stepper column — deliberately
+ * NOT an `<input type="number">` and NOT a `role="spinbutton"`, because it renders
+ * grouped, locale-formatted text that a numeric input cannot hold. Two things
+ * follow, and they shape this whole harness:
+ *
+ * - There is no `aria-valuenow` / `aria-valuemin` / `aria-valuemax` trio, and no
+ *   `min` / `max` / `step` attribute, anywhere in the DOM. So the value is read
+ *   out of the field's TEXT, and the bounds are read off the stepper buttons'
+ *   disabled state — which is precisely what a user is given, and the reason
+ *   {@link isIncrementDisabled} is named after the button rather than after "at
+ *   the maximum".
+ * - The text and the value are different things, and the gap between them is this
+ *   control's trap. {@link getValueText} answers the raw characters;
+ *   {@link getValue} answers the number they spell. Mid-type the two disagree
+ *   with the MODEL as well: the component clamps and rounds on every keystroke
+ *   but leaves the typed text alone until blur, so a field showing `999` under
+ *   `[max]="10"` has already committed `10`. Call {@link blur} — which is also
+ *   what emits `touch` — to make the field re-render from the committed value,
+ *   and assert the host's own signal when what you mean is "the model".
+ *
+ * Stepping has two paths and both are here: {@link increment} / {@link decrement}
+ * click the buttons, {@link stepUp} / {@link stepDown} press ArrowUp / ArrowDown
+ * on the field. The keyboard is the accessible path, and in a unit test it is
+ * also the honest one — jsdom has no layout, so nothing that needs a hit test can
+ * be driven by coordinates. `{ shift: true }` is this control's page-up: it steps
+ * by ten. There is deliberately no `pageUp()` / `home()` / `end()`, because the
+ * component handles the two arrow keys and nothing else.
+ *
+ * @example
+ * ```ts
+ * const qty = await loader.getHarness(WrInputNumberHarness.with({ placeholder: 'Quantity' }));
+ *
+ * await qty.setValue(4);
+ * await qty.increment();
+ * expect(await qty.getValue()).toBe(5);
+ *
+ * await qty.stepUp({ shift: true });
+ * expect(await qty.isIncrementDisabled()).toBe(true); // [max]="15"
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+class WrInputNumberHarness extends ComponentHarness {
+    static hostSelector = 'wr-input-number';
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options = {}) {
+        return new HarnessPredicate(WrInputNumberHarness, options)
+            .addOption('text', options.text, (harness, text) => HarnessPredicate.stringMatches(harness.getValueText(), text))
+            .addOption('value', options.value, async (harness, value) => (await harness.parsedValue()) === value)
+            .addOption('placeholder', options.placeholder, (harness, placeholder) => HarnessPredicate.stringMatches(harness.getPlaceholder(), placeholder))
+            .addOption('disabled', options.disabled, async (harness, disabled) => (await harness.isDisabled()) === disabled);
+    }
+    field = this.locatorFor('input[wrInput]');
+    /** The raw characters in the field — mid-typed, ungrouped or nonsense included. */
+    async getValueText() {
+        return (await this.field()).getProperty('value');
+    }
+    /**
+     * The number the field is SHOWING, or `null` when it is empty.
+     *
+     * Empty is `null` rather than `0` because the control draws that distinction
+     * too — a required-field check has to be able to tell "nothing entered" from "a
+     * deliberate zero". Text that is not a number throws instead: answering `null`
+     * there would report a half-typed `-` as an empty field.
+     *
+     * `locale` defaults to the test runtime's, which for a stock Node run is the
+     * same `en-US` Angular's `LOCALE_ID` defaults to. The component formats with
+     * `LOCALE_ID` and a harness cannot reach that injector, so an app that provides
+     * its own must pass it: `getValue('de-DE')`. Reading `'1.234,5'` as en-US
+     * silently answers `1.2345`.
+     */
+    async getValue(locale) {
+        const text = await this.getValueText();
+        if (!text.trim())
+            return null;
+        const parsed = parseNumber(text, locale);
+        if (parsed === null) {
+            throw new Error(`WrInputNumberHarness.getValue(): the field is showing ${JSON.stringify(text)}, which is not a number in ` +
+                `${locale ? `locale "${locale}"` : "the test runtime's locale"}. Mid-type the field holds text the ` +
+                'control has not accepted — read getValueText() for the characters, or blur() to make it re-render from ' +
+                'the committed value. If the app provides a LOCALE_ID of its own, pass it: getValue("de-DE").');
+        }
+        return parsed;
+    }
+    /**
+     * Type a number into the field, replacing whatever is there.
+     *
+     * Written with the LOCALE's decimal separator rather than with `String(value)`:
+     * in a comma-decimal locale `'1.5'` is read as `15`, because `.` is that
+     * locale's THOUSANDS separator. Grouping is deliberately not added — nothing
+     * requires it, and the field regroups itself on blur anyway.
+     *
+     * The field is cleared first, so the value passes through `null` on the way, as
+     * it does for a user who selects all and types over it. The control parses every
+     * keystroke, so `min` / `max` / `decimals` are applied AS YOU TYPE while the
+     * text is left exactly as typed — see {@link getValue}.
+     */
+    async setValue(value, locale) {
+        if (!Number.isFinite(value)) {
+            throw new Error(`WrInputNumberHarness.setValue(${value}): a field can only be typed a finite number. Use clear() to empty it.`);
+        }
+        const { decimal } = separatorsFor(locale);
+        await this.setValueText(decimal === '.' ? String(value) : String(value).replace('.', decimal));
+    }
+    /**
+     * Type raw characters into the field, replacing whatever is there.
+     *
+     * For everything a number cannot express: a partial entry (`'-'`, `'1.'`), an
+     * already-grouped string, or plain nonsense. Nothing is normalised on the way
+     * in, and — as with {@link setValue} — the field is cleared first.
+     */
+    async setValueText(text) {
+        const field = await this.field();
+        await field.clear();
+        // `sendKeys('')` throws — clearing was the whole request.
+        if (text)
+            await field.sendKeys(text);
+    }
+    /** Empty the field, which sets the value to `null` — not to `0`. */
+    async clear() {
+        await (await this.field()).clear();
+    }
+    /** Whether the ▲▼ column is rendered at all — `[showSteppers]="false"` drops it. */
+    async hasSteppers() {
+        return (await this.locatorForOptional('.wr-input-number__steppers')()) !== null;
+    }
+    /**
+     * Click ▲ once: up by `step`, clamped to `max`.
+     *
+     * A button at its bound — or on a disabled / readonly control — is `disabled`,
+     * and the CDK does not deliver a click to a disabled element, so this is a
+     * quiet no-op there rather than a throw. Ask {@link isIncrementDisabled} rather
+     * than inferring the bound from a value that did not move. It throws only when
+     * there is no stepper column to click.
+     */
+    async increment() {
+        await (await this.stepButton(1, 'increment')).click();
+    }
+    /** Click ▼ once: down by `step`, clamped to `min`. See {@link increment}. */
+    async decrement() {
+        await (await this.stepButton(-1, 'decrement')).click();
+    }
+    /**
+     * Whether ▲ refuses to step.
+     *
+     * Deliberately not named `isAtMax()`: the button is disabled at the maximum AND
+     * on a disabled or readonly control, and it cannot tell you which. That
+     * conflation is the control's own — it is what the user is offered — and the
+     * name says so rather than promising a bound the DOM never publishes.
+     */
+    async isIncrementDisabled() {
+        return (await this.stepButton(1, 'isIncrementDisabled')).getProperty('disabled');
+    }
+    /** Whether ▼ refuses to step — at the minimum, or on a locked control. */
+    async isDecrementDisabled() {
+        return (await this.stepButton(-1, 'isDecrementDisabled')).getProperty('disabled');
+    }
+    /**
+     * Press ArrowUp on the field: up by `step`, or by TEN steps with
+     * `{ shift: true }` — the control's page-up, since it handles no other keys.
+     */
+    async stepUp(options = {}) {
+        await (await this.field()).sendKeys({ shift: options.shift === true }, TestKey.UP_ARROW);
+    }
+    /** Press ArrowDown on the field. See {@link stepUp} for the `shift` multiplier. */
+    async stepDown(options = {}) {
+        await (await this.field()).sendKeys({ shift: options.shift === true }, TestKey.DOWN_ARROW);
+    }
+    /** The `[prefix]` label (`'$'`), or `null` when the field has none. */
+    async getPrefix() {
+        const prefix = await this.locatorForOptional('.wr-input-group__affix--prefix')();
+        return prefix ? prefix.text() : null;
+    }
+    /**
+     * The `[suffix]` label (`'kg'`), or `null` when the field has none.
+     *
+     * The stepper column rides in the same suffix slot and carries the same affix
+     * class, so it is excluded here by name: a bare `--suffix` query answers with
+     * the buttons' (empty) text for every field that has steppers and no suffix.
+     */
+    async getSuffix() {
+        const suffix = await this.locatorForOptional('.wr-input-group__affix--suffix:not(.wr-input-number__steppers)')();
+        return suffix ? suffix.text() : null;
+    }
+    /** The field's placeholder. */
+    async getPlaceholder() {
+        return (await this.field()).getProperty('placeholder');
+    }
+    /**
+     * The field's accessible name, or `null` when it has none of its own.
+     *
+     * Read from the native input, not from the host: an `aria-label` on a component
+     * element does not reach the control inside it, which is why the component
+     * takes an `ariaLabel` input and forwards it here (falling back to the
+     * placeholder). Inside a `<wr-form-field>` the name comes from the label's
+     * `for`, and `null` here is then correct rather than a missing name.
+     */
+    async getAriaLabel() {
+        return (await this.field()).getAttribute('aria-label');
+    }
+    /**
+     * Whether the field refuses interaction.
+     *
+     * The native control's `disabled` property, not the host's
+     * `wr-input-number--disabled` modifier: the modifier is the styling hook, the
+     * property is what actually blocks typing, drops the field out of the tab order
+     * and is reported to assistive technology.
+     */
+    async isDisabled() {
+        return (await this.field()).getProperty('disabled');
+    }
+    /** Whether the field refuses new values while staying focusable and readable. */
+    async isReadonly() {
+        return (await this.field()).getProperty('readOnly');
+    }
+    /** Move focus to the field. While it is focused the control stops reformatting the text. */
+    async focus() {
+        return (await this.field()).focus();
+    }
+    /**
+     * Blur the field, which is what commits the display: the control re-renders the
+     * text from its value — grouping it and applying `decimals` — and emits `touch`
+     * so a bound `[formField]` can mark itself touched.
+     */
+    async blur() {
+        return (await this.field()).blur();
+    }
+    /** Whether the field currently has focus. */
+    async isFocused() {
+        return (await this.field()).isFocused();
+    }
+    /**
+     * The shown value for predicates: `null` for an empty field AND for text that is
+     * not a number, so a mid-typed field matches no `value` filter instead of
+     * throwing the whole query.
+     */
+    async parsedValue() {
+        return parseNumber(await this.getValueText());
+    }
+    /**
+     * One of the two stepper buttons, BY POSITION — ▲ first, ▼ second.
+     *
+     * Not by `aria-label`: those strings ("Increment" / "Decrement") are still
+     * hard-coded English, so keying on them would make this harness the thing that
+     * breaks when they move into the i18n catalog — the same call
+     * `WrTimePanelHarness` makes about its own columns. Order is the layout
+     * contract, and the spec pins it by asserting which way each button moves the
+     * value.
+     */
+    async stepButton(direction, method) {
+        const buttons = await this.locatorForAll('.wr-input-number__step')();
+        const button = buttons[direction === 1 ? 0 : 1];
+        if (!button) {
+            throw new Error(`WrInputNumberHarness.${method}(): this field has no stepper column — it was rendered with ` +
+                '[showSteppers]="false". Type a value with setValue(), or step it from the keyboard with stepUp() / ' +
+                'stepDown(), which work either way.');
+        }
+        return button;
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrInputNumberHarness };
+//# sourceMappingURL=ngwr-input-number-testing.mjs.map

package/fesm2022/ngwr-input-number-testing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-input-number-testing.mjs","sources":["../../../projects/lib/input-number/testing/wr-input-number-harness.ts","../../../projects/lib/input-number/testing/ngwr-input-number-testing.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { ComponentHarness, HarnessPredicate, TestKey, type TestElement } from '@angular/cdk/testing';\n\nimport type { WrInputNumberHarnessFilters } from './interfaces';\n\n/** The decimal + grouping characters `Intl` formats `locale` with. */\nfunction separatorsFor(locale?: string): { decimal: string; group: string } {\n  const parts = new Intl.NumberFormat(locale).formatToParts(12345.6);\n  return {\n    decimal: parts.find(part => part.type === 'decimal')?.value ?? '.',\n    group: parts.find(part => part.type === 'group')?.value ?? '',\n  };\n}\n\n/**\n * Locale-formatted text back into a number — `null` when the text is empty or is\n * not a number at all.\n *\n * The same two-step the component parses with: drop the grouping character, then\n * normalise the decimal one to `.`. Doing it in that order matters, because in\n * half the world's locales the two are swapped and `Number('1.234,5')` is `NaN`\n * either way.\n */\nfunction parseNumber(text: string, locale?: string): number | null {\n  const trimmed = text.trim();\n  if (!trimmed) return null;\n\n  const { decimal, group } = separatorsFor(locale);\n  let normalised = group ? trimmed.split(group).join('') : trimmed;\n  if (decimal !== '.') normalised = normalised.split(decimal).join('.');\n\n  const parsed = Number(normalised);\n  return Number.isFinite(parsed) ? parsed : null;\n}\n\n/**\n * Test harness for `<wr-input-number>`.\n *\n * The control is a `type=\"text\"` field plus a ▲▼ stepper column — deliberately\n * NOT an `<input type=\"number\">` and NOT a `role=\"spinbutton\"`, because it renders\n * grouped, locale-formatted text that a numeric input cannot hold. Two things\n * follow, and they shape this whole harness:\n *\n * - There is no `aria-valuenow` / `aria-valuemin` / `aria-valuemax` trio, and no\n *   `min` / `max` / `step` attribute, anywhere in the DOM. So the value is read\n *   out of the field's TEXT, and the bounds are read off the stepper buttons'\n *   disabled state — which is precisely what a user is given, and the reason\n *   {@link isIncrementDisabled} is named after the button rather than after \"at\n *   the maximum\".\n * - The text and the value are different things, and the gap between them is this\n *   control's trap. {@link getValueText} answers the raw characters;\n *   {@link getValue} answers the number they spell. Mid-type the two disagree\n *   with the MODEL as well: the component clamps and rounds on every keystroke\n *   but leaves the typed text alone until blur, so a field showing `999` under\n *   `[max]=\"10\"` has already committed `10`. Call {@link blur} — which is also\n *   what emits `touch` — to make the field re-render from the committed value,\n *   and assert the host's own signal when what you mean is \"the model\".\n *\n * Stepping has two paths and both are here: {@link increment} / {@link decrement}\n * click the buttons, {@link stepUp} / {@link stepDown} press ArrowUp / ArrowDown\n * on the field. The keyboard is the accessible path, and in a unit test it is\n * also the honest one — jsdom has no layout, so nothing that needs a hit test can\n * be driven by coordinates. `{ shift: true }` is this control's page-up: it steps\n * by ten. There is deliberately no `pageUp()` / `home()` / `end()`, because the\n * component handles the two arrow keys and nothing else.\n *\n * @example\n * ```ts\n * const qty = await loader.getHarness(WrInputNumberHarness.with({ placeholder: 'Quantity' }));\n *\n * await qty.setValue(4);\n * await qty.increment();\n * expect(await qty.getValue()).toBe(5);\n *\n * await qty.stepUp({ shift: true });\n * expect(await qty.isIncrementDisabled()).toBe(true); // [max]=\"15\"\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrInputNumberHarness extends ComponentHarness {\n  static hostSelector = 'wr-input-number';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrInputNumberHarnessFilters = {}): HarnessPredicate<WrInputNumberHarness> {\n    return new HarnessPredicate(WrInputNumberHarness, options)\n      .addOption('text', options.text, (harness, text) => HarnessPredicate.stringMatches(harness.getValueText(), text))\n      .addOption('value', options.value, async (harness, value) => (await harness.parsedValue()) === value)\n      .addOption('placeholder', options.placeholder, (harness, placeholder) =>\n        HarnessPredicate.stringMatches(harness.getPlaceholder(), placeholder)\n      )\n      .addOption('disabled', options.disabled, async (harness, disabled) => (await harness.isDisabled()) === disabled);\n  }\n\n  private readonly field = this.locatorFor('input[wrInput]');\n\n  /** The raw characters in the field — mid-typed, ungrouped or nonsense included. */\n  async getValueText(): Promise<string> {\n    return (await this.field()).getProperty<string>('value');\n  }\n\n  /**\n   * The number the field is SHOWING, or `null` when it is empty.\n   *\n   * Empty is `null` rather than `0` because the control draws that distinction\n   * too — a required-field check has to be able to tell \"nothing entered\" from \"a\n   * deliberate zero\". Text that is not a number throws instead: answering `null`\n   * there would report a half-typed `-` as an empty field.\n   *\n   * `locale` defaults to the test runtime's, which for a stock Node run is the\n   * same `en-US` Angular's `LOCALE_ID` defaults to. The component formats with\n   * `LOCALE_ID` and a harness cannot reach that injector, so an app that provides\n   * its own must pass it: `getValue('de-DE')`. Reading `'1.234,5'` as en-US\n   * silently answers `1.2345`.\n   */\n  async getValue(locale?: string): Promise<number | null> {\n    const text = await this.getValueText();\n    if (!text.trim()) return null;\n\n    const parsed = parseNumber(text, locale);\n    if (parsed === null) {\n      throw new Error(\n        `WrInputNumberHarness.getValue(): the field is showing ${JSON.stringify(text)}, which is not a number in ` +\n          `${locale ? `locale \"${locale}\"` : \"the test runtime's locale\"}. Mid-type the field holds text the ` +\n          'control has not accepted — read getValueText() for the characters, or blur() to make it re-render from ' +\n          'the committed value. If the app provides a LOCALE_ID of its own, pass it: getValue(\"de-DE\").'\n      );\n    }\n\n    return parsed;\n  }\n\n  /**\n   * Type a number into the field, replacing whatever is there.\n   *\n   * Written with the LOCALE's decimal separator rather than with `String(value)`:\n   * in a comma-decimal locale `'1.5'` is read as `15`, because `.` is that\n   * locale's THOUSANDS separator. Grouping is deliberately not added — nothing\n   * requires it, and the field regroups itself on blur anyway.\n   *\n   * The field is cleared first, so the value passes through `null` on the way, as\n   * it does for a user who selects all and types over it. The control parses every\n   * keystroke, so `min` / `max` / `decimals` are applied AS YOU TYPE while the\n   * text is left exactly as typed — see {@link getValue}.\n   */\n  async setValue(value: number, locale?: string): Promise<void> {\n    if (!Number.isFinite(value)) {\n      throw new Error(\n        `WrInputNumberHarness.setValue(${value}): a field can only be typed a finite number. Use clear() to empty it.`\n      );\n    }\n\n    const { decimal } = separatorsFor(locale);\n    await this.setValueText(decimal === '.' ? String(value) : String(value).replace('.', decimal));\n  }\n\n  /**\n   * Type raw characters into the field, replacing whatever is there.\n   *\n   * For everything a number cannot express: a partial entry (`'-'`, `'1.'`), an\n   * already-grouped string, or plain nonsense. Nothing is normalised on the way\n   * in, and — as with {@link setValue} — the field is cleared first.\n   */\n  async setValueText(text: string): Promise<void> {\n    const field = await this.field();\n    await field.clear();\n    // `sendKeys('')` throws — clearing was the whole request.\n    if (text) await field.sendKeys(text);\n  }\n\n  /** Empty the field, which sets the value to `null` — not to `0`. */\n  async clear(): Promise<void> {\n    await (await this.field()).clear();\n  }\n\n  /** Whether the ▲▼ column is rendered at all — `[showSteppers]=\"false\"` drops it. */\n  async hasSteppers(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-input-number__steppers')()) !== null;\n  }\n\n  /**\n   * Click ▲ once: up by `step`, clamped to `max`.\n   *\n   * A button at its bound — or on a disabled / readonly control — is `disabled`,\n   * and the CDK does not deliver a click to a disabled element, so this is a\n   * quiet no-op there rather than a throw. Ask {@link isIncrementDisabled} rather\n   * than inferring the bound from a value that did not move. It throws only when\n   * there is no stepper column to click.\n   */\n  async increment(): Promise<void> {\n    await (await this.stepButton(1, 'increment')).click();\n  }\n\n  /** Click ▼ once: down by `step`, clamped to `min`. See {@link increment}. */\n  async decrement(): Promise<void> {\n    await (await this.stepButton(-1, 'decrement')).click();\n  }\n\n  /**\n   * Whether ▲ refuses to step.\n   *\n   * Deliberately not named `isAtMax()`: the button is disabled at the maximum AND\n   * on a disabled or readonly control, and it cannot tell you which. That\n   * conflation is the control's own — it is what the user is offered — and the\n   * name says so rather than promising a bound the DOM never publishes.\n   */\n  async isIncrementDisabled(): Promise<boolean> {\n    return (await this.stepButton(1, 'isIncrementDisabled')).getProperty<boolean>('disabled');\n  }\n\n  /** Whether ▼ refuses to step — at the minimum, or on a locked control. */\n  async isDecrementDisabled(): Promise<boolean> {\n    return (await this.stepButton(-1, 'isDecrementDisabled')).getProperty<boolean>('disabled');\n  }\n\n  /**\n   * Press ArrowUp on the field: up by `step`, or by TEN steps with\n   * `{ shift: true }` — the control's page-up, since it handles no other keys.\n   */\n  async stepUp(options: { shift?: boolean } = {}): Promise<void> {\n    await (await this.field()).sendKeys({ shift: options.shift === true }, TestKey.UP_ARROW);\n  }\n\n  /** Press ArrowDown on the field. See {@link stepUp} for the `shift` multiplier. */\n  async stepDown(options: { shift?: boolean } = {}): Promise<void> {\n    await (await this.field()).sendKeys({ shift: options.shift === true }, TestKey.DOWN_ARROW);\n  }\n\n  /** The `[prefix]` label (`'$'`), or `null` when the field has none. */\n  async getPrefix(): Promise<string | null> {\n    const prefix = await this.locatorForOptional('.wr-input-group__affix--prefix')();\n    return prefix ? prefix.text() : null;\n  }\n\n  /**\n   * The `[suffix]` label (`'kg'`), or `null` when the field has none.\n   *\n   * The stepper column rides in the same suffix slot and carries the same affix\n   * class, so it is excluded here by name: a bare `--suffix` query answers with\n   * the buttons' (empty) text for every field that has steppers and no suffix.\n   */\n  async getSuffix(): Promise<string | null> {\n    const suffix = await this.locatorForOptional('.wr-input-group__affix--suffix:not(.wr-input-number__steppers)')();\n    return suffix ? suffix.text() : null;\n  }\n\n  /** The field's placeholder. */\n  async getPlaceholder(): Promise<string> {\n    return (await this.field()).getProperty<string>('placeholder');\n  }\n\n  /**\n   * The field's accessible name, or `null` when it has none of its own.\n   *\n   * Read from the native input, not from the host: an `aria-label` on a component\n   * element does not reach the control inside it, which is why the component\n   * takes an `ariaLabel` input and forwards it here (falling back to the\n   * placeholder). Inside a `<wr-form-field>` the name comes from the label's\n   * `for`, and `null` here is then correct rather than a missing name.\n   */\n  async getAriaLabel(): Promise<string | null> {\n    return (await this.field()).getAttribute('aria-label');\n  }\n\n  /**\n   * Whether the field refuses interaction.\n   *\n   * The native control's `disabled` property, not the host's\n   * `wr-input-number--disabled` modifier: the modifier is the styling hook, the\n   * property is what actually blocks typing, drops the field out of the tab order\n   * and is reported to assistive technology.\n   */\n  async isDisabled(): Promise<boolean> {\n    return (await this.field()).getProperty<boolean>('disabled');\n  }\n\n  /** Whether the field refuses new values while staying focusable and readable. */\n  async isReadonly(): Promise<boolean> {\n    return (await this.field()).getProperty<boolean>('readOnly');\n  }\n\n  /** Move focus to the field. While it is focused the control stops reformatting the text. */\n  async focus(): Promise<void> {\n    return (await this.field()).focus();\n  }\n\n  /**\n   * Blur the field, which is what commits the display: the control re-renders the\n   * text from its value — grouping it and applying `decimals` — and emits `touch`\n   * so a bound `[formField]` can mark itself touched.\n   */\n  async blur(): Promise<void> {\n    return (await this.field()).blur();\n  }\n\n  /** Whether the field currently has focus. */\n  async isFocused(): Promise<boolean> {\n    return (await this.field()).isFocused();\n  }\n\n  /**\n   * The shown value for predicates: `null` for an empty field AND for text that is\n   * not a number, so a mid-typed field matches no `value` filter instead of\n   * throwing the whole query.\n   */\n  private async parsedValue(): Promise<number | null> {\n    return parseNumber(await this.getValueText());\n  }\n\n  /**\n   * One of the two stepper buttons, BY POSITION — ▲ first, ▼ second.\n   *\n   * Not by `aria-label`: those strings (\"Increment\" / \"Decrement\") are still\n   * hard-coded English, so keying on them would make this harness the thing that\n   * breaks when they move into the i18n catalog — the same call\n   * `WrTimePanelHarness` makes about its own columns. Order is the layout\n   * contract, and the spec pins it by asserting which way each button moves the\n   * value.\n   */\n  private async stepButton(direction: 1 | -1, method: string): Promise<TestElement> {\n    const buttons = await this.locatorForAll('.wr-input-number__step')();\n    const button = buttons[direction === 1 ? 0 : 1];\n    if (!button) {\n      throw new Error(\n        `WrInputNumberHarness.${method}(): this field has no stepper column — it was rendered with ` +\n          '[showSteppers]=\"false\". Type a value with setValue(), or step it from the keyboard with stepUp() / ' +\n          'stepDown(), which work either way.'\n      );\n    }\n\n    return button;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}