@underlayerdev/ui 0.11.0 → 0.13.0

package/package.json

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

package/styles/foundations.css

@@ -298,6 +298,33 @@ a:active {
   color: #a781ff;
 }
 
+.ul-image {
+  height: 100%;
+}
+.ul-image--not-found {
+  position: relative;
+}
+.ul-image--not-found::after {
+  display: flex;
+  place-items: center;
+  place-content: center;
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  font-family: "Ultra Icons";
+  font-size: 48px;
+  line-height: 48px;
+  color: rgba(255, 255, 255, 0.3);
+  content: "image_dashed";
+  visibility: visible;
+}
+.ul-image--not-found::after {
+  background-color: #232323;
+}
+
 @font-face {
   font-family: "Roboto Mono";
   src: url("fonts/RobotoMono.ttf") format("truetype");

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';
 
@@ -79,7 +80,7 @@ declare class AreaCodeComponent {
 
 type UiSize = 'sm' | 'md' | 'lg' | 'xl';
 type UiCheckboxSize = 'default' | 'sm' | 'lg';
-type UiTheme = 'fill-purple' | 'fill-white' | 'fill-yellow' | 'fill-red' | 'transparent-purple' | 'transparent-white' | 'transparent-red' | 'transparent-black' | 'ghost-purple' | 'ghost-white' | 'ghost-red' | 'ghost-green' | 'outline-white' | 'outline-purple' | 'outline-red' | 'outline-green';
+type UiTheme = 'fill-purple' | 'fill-white' | 'fill-yellow' | 'fill-red' | 'fill-green' | 'transparent-purple' | 'transparent-white' | 'transparent-red' | 'transparent-black' | 'ghost-purple' | 'ghost-white' | 'ghost-red' | 'ghost-green' | 'outline-white' | 'outline-purple' | 'outline-red' | 'outline-green';
 
 type IconSize$1 = '5' | '6' | '7' | '8' | '16';
 /**
@@ -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). */
@@ -885,14 +896,19 @@ type ImageCropperShape = 'rectangle' | 'round';
  * third-party crop mechanics never leak outside the design system —
  * consumers only ever see `ul-image-cropper`.
  *
- * 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).
+ * 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. 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. 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
  * one — this component only produces the file, it never uploads it.
@@ -922,7 +938,11 @@ 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. Omit (or pass null) for a free-form frame. */
+    /**
+     * 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.
+     */
     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>;
@@ -930,6 +950,8 @@ declare class ImageCropperComponent {
     readonly title: _angular_core.InputSignal<string>;
     /** Label for the confirm button. */
     readonly confirmLabel: _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. */
@@ -944,13 +966,29 @@ 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 minFrameDimension = 40;
+    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 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 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; }; "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';