@underlayerdev/ui 0.10.1 → 0.12.0

package/package.json

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

package/types/underlayerdev-ui.d.ts

@@ -4,6 +4,7 @@ import * as i1 from '@angular/cdk/accordion';
 import { CdkAccordionItem } from '@angular/cdk/accordion';
 import { FormValueControl, WithOptionalFieldTree, ValidationError, FormCheckboxControl } from '@angular/forms/signals';
 import Splide, { Options } from '@splidejs/splide';
+import { ImageTransform, Dimensions } from 'ngx-image-cropper';
 import { CurrencyPipe } from '@angular/common';
 import * as _underlayerdev_ui from '@underlayerdev/ui';
 
@@ -108,15 +109,25 @@ declare class AvatarComponent {
     alt: _angular_core.InputSignal<string>;
     /** Show a skeleton placeholder instead of content while loading. */
     loading: _angular_core.InputSignal<boolean>;
+    /**
+     * Marks this avatar as a photo picker: when there's no photo to show, a
+     * default person icon fills in for initials/icon, and a dimmed overlay
+     * with a photo icon is layered on top to signal it's clickable — shown
+     * even once a photo is set, so the user can tell they can still change
+     * it, not just add one the first time. Purely visual — wrap the avatar
+     * in your own button/link to actually handle the click.
+     */
+    editable: _angular_core.InputSignal<boolean>;
     /** Internal signal to track image loading errors */
     protected readonly imageError: _angular_core.WritableSignal<boolean>;
+    protected readonly hasPhoto: _angular_core.Signal<boolean>;
     /** Computed icon size based on avatar size */
     readonly iconSize: _angular_core.Signal<IconSize$1>;
     constructor();
     /** Handles image loading errors */
     protected handleImageError(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AvatarComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AvatarComponent, "ul-avatar", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "src": { "alias": "src"; "required": false; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AvatarComponent, "ul-avatar", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "src": { "alias": "src"; "required": false; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /** Icon size keys from design tokens (iconography.font.size). */
@@ -887,11 +898,16 @@ type ImageCropperShape = 'rectangle' | 'round';
  *
  * 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).
+ *   frame; the user drags/zooms the photo underneath it. ngx-image-cropper
+ *   applies that pan with *no bounds checking at all* (unlike its
+ *   frame-resize path, which does call `checkCropperWithinMaxSizeBounds`),
+ *   so this component clamps translateH/translateV itself — see
+ *   `clampPan()` — snapping the photo back to fully cover the frame the
+ *   moment a drag would otherwise leave a gap.
  * - **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
+ *   over a static photo; the user drags its corners to trim/straighten
+ *   with no ratio imposed. This path is already bounds-checked by the
+ *   library itself. Best 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
@@ -934,15 +950,13 @@ 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>;
@@ -958,16 +972,23 @@ declare class ImageCropperComponent {
     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 cropperReady: _angular_core.WritableSignal<boolean>;
+    private readonly baseImageSize;
+    private readonly pan;
+    protected readonly clampedPan: _angular_core.Signal<{
+        h: number;
+        v: number;
+    }>;
+    protected readonly transform: _angular_core.Signal<ImageTransform>;
     constructor();
+    protected onTransformChange(event: ImageTransform): void;
     protected onZoomInput(event: Event): void;
+    protected onCropperReady(size: Dimensions): void;
     protected onConfirm(): Promise<void>;
-    protected onCancel(): void;
+    protected onClosed(): void;
+    private clampPan;
     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; }; "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>;
 }
 
 type InputType = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';