@underlayerdev/ui 0.10.1 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@underlayerdev/ui",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "peerDependencies": {
     "@angular/cdk": "^22.0.0",
     "@angular/common": "^22.0.0",

package/types/underlayerdev-ui.d.ts

@@ -885,14 +885,14 @@ type ImageCropperShape = 'rectangle' | 'round';
  * third-party crop mechanics never leak outside the design system —
  * consumers only ever see `ul-image-cropper`.
  *
- * Two interaction modes, chosen by whether `aspectRatio` is set:
- * - **Locked** (`aspectRatio` given, e.g. `1` for an avatar): a fixed-size
- *   frame; the user drags/zooms the photo underneath it. Best when every
- *   output needs the same ratio (avatars, thumbnails).
- * - **Free-form** (`aspectRatio` omitted, the default): a resizable frame
- *   over a static photo; the user drags its corners to trim/straighten with
- *   no ratio imposed. Best for listing photos, which keep their own shape
- *   today (see `um-image-upload`'s auto-width carousel).
+ * The frame is always what moves/resizes, never the photo: ngx-image-cropper
+ * only bounds-checks that path (`checkCropperWithinMaxSizeBounds`) — its
+ * alternative "drag the photo within a fixed frame" mode applies pan
+ * offsets with no clamping at all, so the photo could be dragged clean out
+ * of the frame. `aspectRatio` just decides whether that frame is locked to
+ * a ratio (e.g. `1` for an avatar) or freely resizable (the default — for
+ * listing photos, which keep their own shape today, see `um-image-upload`'s
+ * auto-width carousel).
  *
  * Emits a resized `File`, ready to hand to any upload call that accepts
  * one — this component only produces the file, it never uploads it.
@@ -922,11 +922,7 @@ declare class ImageCropperComponent {
     readonly imageFile: _angular_core.InputSignal<File | null>;
     /** Visual shape of the crop mask. */
     readonly shape: _angular_core.InputSignal<ImageCropperShape>;
-    /**
-     * Locks the crop frame to this width/height ratio and switches to
-     * pan-and-zoom mode. Omit (or pass null) for a free-form resizable frame
-     * with no ratio imposed.
-     */
+    /** Locks the crop frame to this width/height ratio. Omit (or pass null) for a free-form frame. */
     readonly aspectRatio: _angular_core.InputSignal<number | null>;
     /** Longest side (px) of the final output image; scales down without distorting. */
     readonly maxOutputSize: _angular_core.InputSignal<number>;
@@ -934,15 +930,11 @@ declare class ImageCropperComponent {
     readonly title: _angular_core.InputSignal<string>;
     /** Label for the confirm button. */
     readonly confirmLabel: _angular_core.InputSignal<string>;
-    /** Label for the cancel button. */
-    readonly cancelLabel: _angular_core.InputSignal<string>;
-    /** Label next to the zoom slider (locked-aspect mode only). */
-    readonly zoomLabel: _angular_core.InputSignal<string>;
     /** Accessible label for the crop frame. */
     readonly frameAriaLabel: _angular_core.InputSignal<string>;
     /** Emitted with the cropped, resized photo once the user confirms. */
     readonly cropped: _angular_core.OutputEmitterRef<File>;
-    /** Emitted when the user cancels or dismisses the modal without cropping. */
+    /** Emitted when the user dismisses the modal (backdrop, Escape, close button) without cropping. */
     readonly cancelled: _angular_core.OutputEmitterRef<void>;
     /** Emitted when the source photo fails to load in the cropper. */
     readonly loadFailed: _angular_core.OutputEmitterRef<void>;
@@ -952,22 +944,13 @@ declare class ImageCropperComponent {
     protected readonly isLocked: _angular_core.Signal<boolean>;
     /** ngx-image-cropper always wants a number here; unused while isLocked() is false. */
     protected readonly effectiveAspectRatio: _angular_core.Signal<number>;
-    protected readonly frameWidth: _angular_core.Signal<number | undefined>;
-    protected readonly frameHeight: _angular_core.Signal<number | undefined>;
-    protected readonly minZoom = 1;
-    protected readonly maxZoom = 3;
-    protected readonly zoomStep = 0.01;
-    protected readonly zoom: _angular_core.WritableSignal<number>;
-    protected readonly transform: _angular_core.Signal<{
-        scale: number;
-    }>;
+    protected readonly minFrameDimension = 40;
     protected readonly cropperReady: _angular_core.WritableSignal<boolean>;
     constructor();
-    protected onZoomInput(event: Event): void;
     protected onConfirm(): Promise<void>;
-    protected onCancel(): void;
+    protected onClosed(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ImageCropperComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ImageCropperComponent, "ul-image-cropper", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "imageFile": { "alias": "imageFile"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "aspectRatio": { "alias": "aspectRatio"; "required": false; "isSignal": true; }; "maxOutputSize": { "alias": "maxOutputSize"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "confirmLabel": { "alias": "confirmLabel"; "required": false; "isSignal": true; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; "isSignal": true; }; "zoomLabel": { "alias": "zoomLabel"; "required": false; "isSignal": true; }; "frameAriaLabel": { "alias": "frameAriaLabel"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "cropped": "cropped"; "cancelled": "cancelled"; "loadFailed": "loadFailed"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ImageCropperComponent, "ul-image-cropper", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "imageFile": { "alias": "imageFile"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "aspectRatio": { "alias": "aspectRatio"; "required": false; "isSignal": true; }; "maxOutputSize": { "alias": "maxOutputSize"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "confirmLabel": { "alias": "confirmLabel"; "required": false; "isSignal": true; }; "frameAriaLabel": { "alias": "frameAriaLabel"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "cropped": "cropped"; "cancelled": "cancelled"; "loadFailed": "loadFailed"; }, never, never, true, never>;
 }
 
 type InputType = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';