@radix-ng/primitives 0.51.0 → 1.0.0-beta.1

package/types/radix-ng-primitives-cropper.d.ts

@@ -1,28 +1,21 @@
 import * as _angular_core from '@angular/core';
-import { InputSignal, WritableSignal, InjectionToken } from '@angular/core';
-import { NumberInput } from '@angular/cdk/coercion';
+import { InputSignal, Signal } from '@angular/core';
+import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
+import { NumberInput, BooleanInput } from '@radix-ng/primitives/core';
 import * as _radix_ng_primitives_cropper from '@radix-ng/primitives/cropper';
 
-interface CropperContextToken {
-    image: InputSignal<string>;
-    getImageProps: () => {
-        [key: string]: any;
-    };
-    getImageWrapperStyle: () => Record<string, string>;
-    getCropAreaStyle: () => Record<string, string>;
-    descriptionId: WritableSignal<string>;
-}
-declare const CROPPER_ROOT_CONTEXT: InjectionToken<CropperContextToken>;
-declare function injectCropperRootContext(): CropperContextToken;
-
+/** A crop rectangle in the source image's natural-pixel coordinate space. */
 type Area = {
     x: number;
     y: number;
     width: number;
     height: number;
 };
-declare class RdxCropperRootDirective implements CropperContextToken {
+
+declare class RdxCropperRootDirective {
     private readonly elementRef;
+    private readonly injector;
+    private readonly isBrowser;
     private readonly CROPPER_DESC_WARN_MESSAGE;
     readonly image: _angular_core.InputSignal<string>;
     readonly cropPadding: _angular_core.InputSignalWithTransform<number, unknown>;
@@ -30,29 +23,55 @@ declare class RdxCropperRootDirective implements CropperContextToken {
     readonly minZoom: _angular_core.InputSignalWithTransform<number, unknown>;
     readonly maxZoom: _angular_core.InputSignalWithTransform<number, unknown>;
     readonly zoomSensitivity: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Pan distance (px) per arrow-key press. */
     readonly keyboardStep: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Zoom delta per `+` / `-` / `PageUp` / `PageDown` press. */
+    readonly zoomKeyboardStep: _angular_core.InputSignalWithTransform<number, unknown>;
     readonly zoom: _angular_core.InputSignalWithTransform<number | undefined, NumberInput>;
+    /** Accessible name for the cropper widget. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Disables all interaction (drag, wheel/pinch zoom, keyboard); exposed as `data-disabled`. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
     readonly onCropChange: _angular_core.OutputEmitterRef<Area | null>;
     readonly onZoomChange: _angular_core.OutputEmitterRef<number>;
     private readonly imgWidth;
     private readonly imgHeight;
+    /** Raw content-box size (px) of the root, fed by the ResizeObserver / initial measure. */
+    private readonly containerSize;
+    /**
+     * Crop-area size derived from the container minus padding, fitted to `aspectRatio`. A `computed`
+     * (not a written signal) so it stays reactive to `aspectRatio` / `cropPadding` changes, not only
+     * to container resizes — previously these inputs were read inside the ResizeObserver closure and
+     * never recomputed until the next resize.
+     */
+    private readonly cropAreaSize;
     private readonly cropAreaWidth;
     private readonly cropAreaHeight;
     private readonly imageWrapperWidth;
     private readonly imageWrapperHeight;
-    private readonly offsetX;
-    private readonly offsetY;
+    /** Raw (unclamped) pan-offset intent (px) written by gestures; clamping lives in `clampedOffset`. */
+    private readonly offset;
     private readonly internalZoom;
-    private readonly isDragging;
-    readonly descriptionId: _angular_core.WritableSignal<string>;
+    protected readonly isDragging: _angular_core.WritableSignal<boolean>;
+    readonly descriptionId: string;
     private readonly isZoomControlled;
     protected readonly effectiveZoom: _angular_core.Signal<number>;
-    protected readonly zoomValueText: _angular_core.Signal<string>;
+    /**
+     * The applied pan offset (px): the raw intent clamped to keep the image covering the crop window
+     * at the current geometry/zoom. Derived (not an effect) so it self-corrects when the container
+     * resizes or the zoom/aspect-ratio changes — no write-back, no `untracked` re-entrancy. This is the
+     * value the view renders and the crop math reads.
+     */
+    private readonly clampedOffset;
+    /**
+     * Crop rectangle derived from the rendered pan/zoom — the single source of truth for emission.
+     * `onCropChange` fires from one effect watching this, so interactions/handlers never emit directly
+     * (which previously double-emitted). Value equality keeps it from notifying on equal results.
+     */
+    private readonly cropData;
     private readonly dragStartPoint;
     private readonly dragStartOffset;
-    private readonly latestRestrictedOffset;
     private readonly latestZoom;
-    private readonly isInitialSetupDone;
     private readonly initialPinchDistance;
     private readonly initialPinchZoom;
     private readonly isPinching;
@@ -62,75 +81,89 @@ declare class RdxCropperRootDirective implements CropperContextToken {
     private initializeContainerDimensions;
     private setupImageLoadEffect;
     private setupDimensionsEffects;
+    /** Current rendered geometry the crop math operates on, read from the state signals. */
+    private geometry;
     private restrictOffset;
-    private calculateCropData;
-    private setupCropCalculationEffect;
     private setupAccessibilityWarningEffect;
+    /**
+     * Single attachment point for every interaction listener. Re-runs on `disabled()`, so a disabled
+     * cropper has NO interaction listeners bound at all — there is no per-handler `disabled` check to
+     * forget, and a new gesture path can't accidentally bypass the gate. Uses `{ passive: false }` so
+     * the handlers can `preventDefault()` (wheel/touch scrolling, arrow-key page scroll).
+     */
     private setupEventListenersEffect;
-    private handleInteractionEnd;
+    private onMouseDown;
     /**
-     * @ignore
+     * Zoom toward an anchor point (coordinates relative to the root's center). `fromZoom`/`fromOffset`
+     * are the zoom/offset the anchor is measured against — the live state for wheel/keyboard, the
+     * gesture-start baseline for pinch. Emits the zoom request via {@link updateZoom}, then re-anchors
+     * the pan offset **only when the zoom is uncontrolled**: in controlled mode the rendered zoom does
+     * not change until the parent writes `zoom` back, so writing an offset for a not-yet-applied zoom
+     * would pan the image without rescaling it (`clampedOffset` re-derives once the new zoom applies).
      */
-    onMouseDown(e: MouseEvent): void;
+    private zoomToPoint;
     private handleWheel;
     private getPinchDistance;
     private getPinchCenter;
     private handleTouchStart;
     private handleTouchMove;
     private handleTouchEnd;
+    private onKeyDown;
+    /** Zoom by `delta` keeping the crop center fixed (the keyboard counterpart of wheel/pinch zoom). */
+    private zoomFromCenter;
     /**
-     * @ignore
+     * Inline style for the image wrapper: measured size, centered in the root, then translated and
+     * scaled by the current pan offset and zoom. A `computed` (not a method) so the `[style]` binding
+     * only re-applies when an input actually changes — a per-change-detection method call would
+     * allocate a new object every tick and force a constant re-bind.
      */
-    onKeyDown(e: KeyboardEvent): void;
-    /**
-     * @ignore
-     */
-    onKeyUp(e: KeyboardEvent): void;
-    /**
-     * @ignore
-     */
-    getImageProps(): {
-        [key: string]: any;
-    };
-    /**
-     * @ignore
-     */
-    getImageWrapperStyle(): Record<string, string>;
-    /**
-     * @ignore
-     */
-    getCropAreaStyle(): Record<string, string>;
+    readonly imageWrapperStyle: _angular_core.Signal<Record<string, string>>;
+    /** Inline style for the crop-area overlay (its measured width/height). */
+    readonly cropAreaStyle: _angular_core.Signal<Record<string, string>>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxCropperRootDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxCropperRootDirective, "[rdxCropperRoot]", never, { "image": { "alias": "image"; "required": true; "isSignal": true; }; "cropPadding": { "alias": "cropPadding"; "required": false; "isSignal": true; }; "aspectRatio": { "alias": "aspectRatio"; "required": false; "isSignal": true; }; "minZoom": { "alias": "minZoom"; "required": false; "isSignal": true; }; "maxZoom": { "alias": "maxZoom"; "required": false; "isSignal": true; }; "zoomSensitivity": { "alias": "zoomSensitivity"; "required": false; "isSignal": true; }; "keyboardStep": { "alias": "keyboardStep"; "required": false; "isSignal": true; }; "zoom": { "alias": "zoom"; "required": false; "isSignal": true; }; }, { "onCropChange": "onCropChange"; "onZoomChange": "onZoomChange"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxCropperRootDirective, "[rdxCropperRoot]", never, { "image": { "alias": "image"; "required": true; "isSignal": true; }; "cropPadding": { "alias": "cropPadding"; "required": false; "isSignal": true; }; "aspectRatio": { "alias": "aspectRatio"; "required": false; "isSignal": true; }; "minZoom": { "alias": "minZoom"; "required": false; "isSignal": true; }; "maxZoom": { "alias": "maxZoom"; "required": false; "isSignal": true; }; "zoomSensitivity": { "alias": "zoomSensitivity"; "required": false; "isSignal": true; }; "keyboardStep": { "alias": "keyboardStep"; "required": false; "isSignal": true; }; "zoomKeyboardStep": { "alias": "zoomKeyboardStep"; "required": false; "isSignal": true; }; "zoom": { "alias": "zoom"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "onCropChange": "onCropChange"; "onZoomChange": "onZoomChange"; }, never, never, true, never>;
 }
 
 declare class RdxCropperImageComponent {
-    protected readonly rootContext: _radix_ng_primitives_cropper.CropperContextToken;
+    protected readonly rootContext: _radix_ng_primitives_cropper.CropperRootContext;
     readonly imgClass: _angular_core.InputSignal<string | undefined>;
     readonly imgStyles: _angular_core.InputSignal<string | undefined>;
-    protected readonly imgClasses: _angular_core.Signal<string | undefined>;
-    protected readonly imgStyless: _angular_core.Signal<string | undefined>;
+    /**
+     * `alt` text for the rendered image. Defaults to `''` (decorative — screen readers skip it, since
+     * the cropper widget describes itself via the root's label/description). Set a non-empty value to
+     * give the image a meaningful accessible name.
+     */
+    readonly imgAlt: _angular_core.InputSignal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxCropperImageComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RdxCropperImageComponent, "[rdxCropperImage]", never, { "imgClass": { "alias": "imgClass"; "required": false; "isSignal": true; }; "imgStyles": { "alias": "imgStyles"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RdxCropperImageComponent, "[rdxCropperImage]", never, { "imgClass": { "alias": "imgClass"; "required": false; "isSignal": true; }; "imgStyles": { "alias": "imgStyles"; "required": false; "isSignal": true; }; "imgAlt": { "alias": "imgAlt"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class RdxCropperCropAreaDirective {
-    readonly rootContext: _radix_ng_primitives_cropper.CropperContextToken;
+    readonly rootContext: _radix_ng_primitives_cropper.CropperRootContext;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxCropperCropAreaDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxCropperCropAreaDirective, "[rdxCropperCropArea]", never, {}, {}, never, never, true, never>;
 }
 
 declare class RdxCropperDescriptionDirective {
-    readonly rootContext: _radix_ng_primitives_cropper.CropperContextToken;
+    readonly rootContext: _radix_ng_primitives_cropper.CropperRootContext;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxCropperDescriptionDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxCropperDescriptionDirective, "[rdxCropperDescription]", never, {}, {}, never, never, true, never>;
 }
 
+interface CropperRootContext {
+    image: InputSignal<string>;
+    imageWrapperStyle: Signal<Record<string, string>>;
+    cropAreaStyle: Signal<Record<string, string>>;
+    descriptionId: string;
+}
+declare const injectCropperRootContext: _radix_ng_primitives_core.InjectContext<CropperRootContext>;
+declare const provideCropperRootContext: (useFactory: () => CropperRootContext) => _angular_core.Provider;
+
 declare class RdxCropperModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxCropperModule, never>;
     static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxCropperModule, never, [typeof RdxCropperRootDirective, typeof RdxCropperImageComponent, typeof RdxCropperCropAreaDirective, typeof RdxCropperDescriptionDirective], [typeof RdxCropperRootDirective, typeof RdxCropperImageComponent, typeof RdxCropperCropAreaDirective, typeof RdxCropperDescriptionDirective]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<RdxCropperModule>;
 }
 
-export { CROPPER_ROOT_CONTEXT, RdxCropperCropAreaDirective, RdxCropperDescriptionDirective, RdxCropperImageComponent, RdxCropperModule, RdxCropperRootDirective, injectCropperRootContext };
-export type { Area, CropperContextToken };
+export { RdxCropperCropAreaDirective, RdxCropperDescriptionDirective, RdxCropperImageComponent, RdxCropperModule, RdxCropperRootDirective, injectCropperRootContext, provideCropperRootContext };
+export type { Area, CropperRootContext };

package/types/radix-ng-primitives-date-field.d.ts

@@ -1,19 +1,16 @@
 import * as _angular_core from '@angular/core';
-import { OnInit, AfterViewInit, InputSignal, ModelSignal, Signal, WritableSignal, InjectionToken } from '@angular/core';
+import { Signal, InjectionToken, InputSignal, ModelSignal, WritableSignal } from '@angular/core';
 import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
-import { DateMatcher, HourCycle, Granularity, DateStep, Formatter, SegmentValueObj, SegmentPart } from '@radix-ng/primitives/core';
-import { Direction } from '@angular/cdk/bidi';
-import { BooleanInput } from '@angular/cdk/coercion';
+import { DateMatcher, HourCycle, Granularity, Direction, BooleanInput, DateStep, Formatter, SegmentValueObj, SegmentPart } from '@radix-ng/primitives/core';
 import { DateValue } from '@internationalized/date';
 
-declare class RdxDateFieldRootDirective implements OnInit, AfterViewInit {
-    private readonly elementRef;
+declare class RdxDateFieldRootDirective {
     /**
-     * The controlled checked state of the calendar.
+     * The controlled value of the date field.
      */
     readonly value: _angular_core.ModelSignal<DateValue | undefined>;
     /**
-     * A callback fired when the date field's value is invalid.
+     * A matcher that marks specific dates as unavailable; a matched value makes the field invalid.
      */
     readonly isDateUnavailable: _angular_core.InputSignal<DateMatcher | undefined>;
     /**
@@ -51,43 +48,57 @@ declare class RdxDateFieldRootDirective implements OnInit, AfterViewInit {
      * The stepping interval for the time fields. Defaults to 1
      */
     readonly step: _angular_core.InputSignal<DateStep | undefined>;
-    readonly step$: _angular_core.Signal<DateStep>;
+    readonly step$: Signal<DateStep>;
     /**
+     * Locale- and hour-cycle-aware formatter. Recomputed whenever `locale` or
+     * `hourCycle` change so segments always render with the current settings.
      * @ignore
      */
-    readonly defaultDate: _angular_core.Signal<DateValue>;
+    readonly formatter: Signal<Formatter>;
+    /**
+     * @ignore
+     */
+    readonly defaultDate: Signal<DateValue>;
     /**
      * The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programmatically control the calendar view
      */
     readonly placeholder: _angular_core.ModelSignal<DateValue | undefined>;
     /**
+     * Segment input parts, collected from the projected content in DOM order. This
+     * stays in sync with `segmentContents()` (granularity / locale / value changes
+     * add or remove segments) instead of being captured once after view init.
      * @ignore
      */
-    readonly segmentElements: _angular_core.WritableSignal<Set<HTMLElement>>;
+    private readonly segmentInputs;
     /**
+     * The focusable (non-literal) segment elements, in DOM order.
      * @ignore
      */
-    readonly currentFocusedElement: _angular_core.WritableSignal<HTMLElement | null>;
+    readonly segmentElements: Signal<HTMLElement[]>;
     /**
      * @ignore
      */
-    formatter: Formatter;
+    readonly currentFocusedElement: _angular_core.WritableSignal<HTMLElement | null>;
     /**
      * @ignore
      */
-    readonly segmentValues: _angular_core.WritableSignal<SegmentValueObj>;
+    readonly inferredGranularity: Signal<Granularity | undefined>;
     /**
+     * The per-segment values. Writable so segment editing (via `useDateField`) can
+     * update individual parts, but re-synced from the model whenever the value,
+     * granularity or formatter change — so a controlled `value` set after init is
+     * reflected, and an empty field re-initializes when granularity changes.
      * @ignore
      */
-    readonly inferredGranularity: _angular_core.Signal<Granularity | undefined>;
+    readonly segmentValues: _angular_core.WritableSignal<SegmentValueObj>;
     /**
      * @ignore
      */
-    readonly isInvalid: _angular_core.Signal<boolean>;
+    readonly isInvalid: Signal<boolean>;
     /**
      * @ignore
      */
-    readonly allSegmentContent: _angular_core.Signal<{
+    readonly allSegmentContent: Signal<{
         obj: _radix_ng_primitives_core.SegmentContentObj;
         arr: {
             part: _radix_ng_primitives_core.SegmentPart;
@@ -97,29 +108,27 @@ declare class RdxDateFieldRootDirective implements OnInit, AfterViewInit {
     /**
      * An array of segments that should be readonly, which prevent user input on them.
      */
-    readonly segmentContents: _angular_core.Signal<{
+    readonly segmentContents: Signal<{
         part: _radix_ng_primitives_core.SegmentPart;
         value: string;
     }[]>;
     /**
      * @ignore
      */
-    readonly currentSegmentIndex: _angular_core.Signal<number>;
+    readonly currentSegmentIndex: Signal<number>;
     /**
      * @ignore
      */
-    readonly prevFocusableSegment: _angular_core.Signal<HTMLElement | null>;
+    readonly prevFocusableSegment: Signal<HTMLElement | null>;
     /**
      * @ignore
      */
-    readonly nextFocusableSegment: _angular_core.Signal<HTMLElement | null>;
+    readonly nextFocusableSegment: Signal<HTMLElement | null>;
     /**
      * @ignore
      */
     readonly focusNext: () => void;
     constructor();
-    ngOnInit(): void;
-    ngAfterViewInit(): void;
     /**
      * @ignore
      */
@@ -129,11 +138,17 @@ declare class RdxDateFieldRootDirective implements OnInit, AfterViewInit {
      */
     setFocusedElement(el: HTMLElement): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxDateFieldRootDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxDateFieldRootDirective, "[rdxDateFieldRoot]", ["rdxDateFieldRoot"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "isDateUnavailable": { "alias": "isDateUnavailable"; "required": false; "isSignal": true; }; "hourCycle": { "alias": "hourCycle"; "required": false; "isSignal": true; }; "granularity": { "alias": "granularity"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "dir": { "alias": "dir"; "required": false; "isSignal": true; }; "minValue": { "alias": "minValue"; "required": false; "isSignal": true; }; "maxValue": { "alias": "maxValue"; "required": false; "isSignal": true; }; "hideTimeZone": { "alias": "hideTimeZone"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "placeholder": "placeholderChange"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxDateFieldRootDirective, "[rdxDateFieldRoot]", ["rdxDateFieldRoot"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "isDateUnavailable": { "alias": "isDateUnavailable"; "required": false; "isSignal": true; }; "hourCycle": { "alias": "hourCycle"; "required": false; "isSignal": true; }; "granularity": { "alias": "granularity"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "dir": { "alias": "dir"; "required": false; "isSignal": true; }; "minValue": { "alias": "minValue"; "required": false; "isSignal": true; }; "maxValue": { "alias": "maxValue"; "required": false; "isSignal": true; }; "hideTimeZone": { "alias": "hideTimeZone"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "placeholder": "placeholderChange"; }, ["segmentInputs"], never, true, never>;
 }
 
 declare class RdxDateFieldInputDirective {
     private readonly elementRef;
+    /**
+     * The host element of this segment. Consumed by the root to collect focusable
+     * segments in DOM order.
+     * @ignore
+     */
+    readonly element: HTMLElement;
     private readonly rootContext;
     /**
      * The part of the date to render
@@ -162,15 +177,21 @@ declare class RdxDateFieldInputDirective {
     readonly lastKeyZero: _angular_core.WritableSignal<boolean>;
     private readonly fieldData;
     private readonly attributes;
+    /**
+     * Attribute keys applied imperatively on the previous effect run, so keys that
+     * disappear from `attributes()` are removed instead of lingering as stale state.
+     * @ignore
+     */
+    private appliedAttrs;
+    constructor();
     /**
      * @ignore
      */
-    handleSegmentClick: (e: Event) => void;
+    handleSegmentClick(event: Event): void;
     /**
      * @ignore
      */
-    handleSegmentKeydown: (e: Event) => void;
-    constructor();
+    handleSegmentKeydown(event: Event): void;
     /**
      * @ignore
      */
@@ -192,7 +213,7 @@ interface DateFieldContextToken {
     placeholder: ModelSignal<DateValue>;
     hourCycle: InputSignal<HourCycle>;
     step$: Signal<DateStep>;
-    formatter: Formatter;
+    formatter: Signal<Formatter>;
     segmentValues: WritableSignal<SegmentValueObj>;
     focusNext: () => void;
     setFocusedElement: (el: HTMLElement) => void;