@radix-ng/primitives 0.36.0 → 0.38.0

package/collapsible/src/collapsible-root.directive.d.ts

@@ -1,22 +1,18 @@
 import { BooleanInput } from '@angular/cdk/coercion';
+import { InputSignal, ModelSignal, Signal } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare function injectCollapsible(): RdxCollapsibleRootDirective;
 export type RdxCollapsibleState = 'open' | 'closed';
+export interface CollapsibleRootContext {
+    contentId: InputSignal<string>;
+    open: ModelSignal<boolean>;
+    toggle: () => void;
+    disabled: Signal<boolean>;
+}
+export declare const injectCollapsibleRootContext: (optional?: boolean) => CollapsibleRootContext | null, provideCollapsibleRootContext: (useFactory: () => CollapsibleRootContext) => import("@angular/core").Provider;
 /**
  * @group Components
  */
 export declare class RdxCollapsibleRootDirective {
-    /**
-     * Reference to RdxCollapsibleContent directive
-     */
-    private readonly contentDirective;
-    /**
-     * Determines whether a directive is available for interaction.
-     * When true, prevents the user from interacting with the collapsible.
-     *
-     * @group Props
-     */
-    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
     /**
      * The controlled open state of the collapsible.
      * Sets the state of the directive. `true` - expanded, `false` - collapsed
@@ -24,12 +20,18 @@ export declare class RdxCollapsibleRootDirective {
      * @group Props
      * @defaultValue false
      */
-    set open(value: boolean);
-    get open(): boolean;
+    readonly open: ModelSignal<boolean>;
+    readonly contentId: InputSignal<string>;
     /**
-     * Stores collapsible state
+     * Determines whether a directive is available for interaction.
+     * When true, prevents the user from interacting with the collapsible.
+     *
+     * @group Props
      */
-    private _open;
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    readonly _disabled: import("@angular/core").WritableSignal<boolean>;
+    readonly isDisabled: Signal<boolean>;
+    readonly isOpen: Signal<boolean>;
     /**
      * Emitted with new value when directive state changed.
      * Event handler called when the open state of the collapsible changes.
@@ -37,26 +39,6 @@ export declare class RdxCollapsibleRootDirective {
      * @group Emits
      */
     readonly onOpenChange: import("@angular/core").OutputEmitterRef<boolean>;
-    /**
-     * Allows to change directive state
-     * @param {boolean | undefined} value
-     * @ignore
-     */
-    setOpen(value?: boolean): void;
-    /**
-     * Returns directive state (open | closed)
-     * @ignore
-     */
-    getState(): RdxCollapsibleState;
-    /**
-     * Returns current directive state
-     * @ignore
-     */
-    isOpen(): boolean;
-    /**
-     * Controls visibility of content
-     */
-    private setPresence;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxCollapsibleRootDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxCollapsibleRootDirective, "[rdxCollapsibleRoot]", ["collapsibleRoot"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; }; }, { "onOpenChange": "onOpenChange"; }, ["contentDirective"], never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxCollapsibleRootDirective, "[rdxCollapsibleRoot]", ["rdxCollapsibleRoot"], { "open": { "alias": "open"; "required": false; "isSignal": true; }; "contentId": { "alias": "contentId"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "onOpenChange": "onOpenChange"; }, never, never, true, never>;
 }

package/collapsible/src/collapsible-trigger.directive.d.ts

@@ -1,26 +1,6 @@
-import { RdxCollapsibleState } from './collapsible-root.directive';
 import * as i0 from "@angular/core";
 export declare class RdxCollapsibleTriggerDirective {
-    /**
-     * Reference to CollapsibleRoot
-     * @private
-     * @ignore
-     */
-    private readonly collapsible;
-    /**
-     * Called on trigger clicked
-     */
-    onOpenToggle(): void;
-    /**
-     * Returns current directive state (open | closed)
-     * @ignore
-     */
-    getState(): RdxCollapsibleState;
-    /**
-     * Returns current trigger state
-     * @ignore
-     */
-    getDisabled(): string | undefined;
+    protected readonly rootContext: import("./collapsible-root.directive").CollapsibleRootContext;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxCollapsibleTriggerDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<RdxCollapsibleTriggerDirective, "[rdxCollapsibleTrigger]", never, {}, {}, never, never, true, never>;
 }

package/core/index.d.ts

@@ -1,3 +1,4 @@
+export * from './src/accessor/control-value-accessor';
 export * from './src/accessor/provide-value-accessor';
 export * from './src/auto-focus.directive';
 export * from './src/clamp';
@@ -13,8 +14,12 @@ export * from './src/is-number';
 export * from './src/kbd-constants';
 export * from './src/provide-token';
 export * from './src/window';
+export * from './src/create-context';
 export * from './src/date-time';
 export * from './src/positioning/constants';
 export * from './src/positioning/types';
 export * from './src/positioning/utils';
+export * from './src/types';
+export * from './src/useArrowNavigation';
+export * from './src/useResizeObserver';
 export * from './src/watch';

package/core/src/accessor/control-value-accessor.d.ts

@@ -0,0 +1,67 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { ControlValueAccessor } from '@angular/forms';
+import * as i0 from "@angular/core";
+/**
+ * A reusable ControlValueAccessor implementation for form controls
+ * @template T The type of the control's value
+ */
+export declare class RdxControlValueAccessor<T> implements ControlValueAccessor {
+    /**
+     * Input for the control's value with alias 'value'
+     * @default undefined
+     */
+    readonly valueInput: import("@angular/core").InputSignal<T | undefined>;
+    /**
+     * Input for the disabled state with alias 'disabled'
+     * Uses booleanAttribute transform to convert string attributes to booleans
+     * @default false
+     */
+    readonly disabledInput: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    readonly valueChange: import("@angular/core").OutputEmitterRef<T>;
+    private readonly _value;
+    /**
+     * Readonly access to the current value
+     */
+    readonly value: import("@angular/core").Signal<T | undefined>;
+    private readonly _disabled;
+    /**
+     * Readonly access to the disabled state
+     */
+    readonly disabled: import("@angular/core").Signal<boolean>;
+    private onChange?;
+    private onTouched?;
+    /**
+     * Writes a new value to the control (ControlValueAccessor interface)
+     * @param value The new value for the control
+     */
+    writeValue(value: T | undefined): void;
+    /**
+     * Registers a callback for when the control value changes (ControlValueAccessor interface)
+     * @param fn The callback function
+     */
+    registerOnChange(fn: (value: T | undefined) => void): void;
+    /**
+     * Registers a callback for when the control is touched (ControlValueAccessor interface)
+     * @param fn The callback function
+     */
+    registerOnTouched(fn: () => void): void;
+    /**
+     * Sets the disabled state of the control (ControlValueAccessor interface)
+     * @param isDisabled Whether the control should be disabled
+     */
+    setDisabledState(isDisabled: boolean): void;
+    /**
+     * Updates the control's value and triggers change detection
+     * @param value The new value
+     */
+    setValue(value: T): void;
+    markAsTouched(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxControlValueAccessor<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxControlValueAccessor<any>, never, ["rdxControlValueAccessor"], { "valueInput": { "alias": "value"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+/**
+ * Provides a type-safe way to inject the RdxControlValueAccessor
+ * @template T The type of the control's value
+ * @returns An instance of RdxControlValueAccessor<T>
+ */
+export declare function injectControlValueAccessor<T>(): RdxControlValueAccessor<T>;

package/core/src/create-context.d.ts

@@ -0,0 +1,10 @@
+import { Provider } from '@angular/core';
+/**
+ * Creates a context with injector and provider functions for a given type
+ * @template T The type of the context value
+ * @param description Descriptive string for the context (used in token creation)
+ * @returns A tuple containing:
+ *   - injectContext: Function to retrieve the context value
+ *   - provideContext: Function to create a provider for the context
+ */
+export declare function createContext<T>(description: string): readonly [injectContext: (optional?: boolean) => T | null, provideContext: (useFactory: () => T) => Provider];

package/core/src/date-time/comparators.d.ts

@@ -1,4 +1,4 @@
-import { CalendarDateTime, type DateValue, ZonedDateTime } from '@internationalized/date';
+import { CalendarDateTime, type DateValue, Time, ZonedDateTime } from '@internationalized/date';
 import type { DateMatcher } from './types';
 /**
  * Given a `DateValue` object, convert it to a native `Date` object.
@@ -70,6 +70,7 @@ export declare function isBetween(date: DateValue, start: DateValue, end: DateVa
 export declare function getLastFirstDayOfWeek<T extends DateValue = DateValue>(date: T, firstDayOfWeek: number, locale: string): T;
 export declare function getNextLastDayOfWeek<T extends DateValue = DateValue>(date: T, firstDayOfWeek: number, locale: string): T;
 export declare function areAllDaysBetweenValid(start: DateValue, end: DateValue, isUnavailable: DateMatcher | undefined, isDisabled: DateMatcher | undefined): boolean;
+export type TimeValue = Time | CalendarDateTime | ZonedDateTime;
 export type Granularity = 'day' | 'hour' | 'minute' | 'second';
 export type TimeGranularity = 'hour' | 'minute' | 'second';
 type GetDefaultDateProps = {
@@ -89,4 +90,9 @@ type GetDefaultDateProps = {
  *
  */
 export declare function getDefaultDate(props: GetDefaultDateProps): DateValue;
+type GetDefaultTimeProps = {
+    defaultValue?: TimeValue | undefined;
+    defaultPlaceholder?: TimeValue | undefined;
+};
+export declare function getDefaultTime(props: GetDefaultTimeProps): TimeValue;
 export {};

package/core/src/date-time/useDateField.d.ts

@@ -5,14 +5,14 @@ import { HourCycle, SegmentPart, SegmentValueObj } from './types';
 export type UseDateFieldProps = {
     hasLeftFocus: WritableSignal<boolean>;
     lastKeyZero: WritableSignal<boolean>;
-    placeholder: ModelSignal<DateValue>;
+    placeholder: ModelSignal<DateValue> | WritableSignal<DateValue>;
     hourCycle: HourCycle;
     formatter: Formatter;
     segmentValues: WritableSignal<SegmentValueObj>;
     disabled: InputSignal<boolean>;
     readonly: InputSignal<boolean>;
     part: SegmentPart;
-    modelValue: ModelSignal<DateValue | undefined>;
+    modelValue: ModelSignal<DateValue | undefined> | WritableSignal<DateValue | undefined>;
     focusNext: () => void;
 };
 type SegmentAttrProps = {

package/core/src/types.d.ts

@@ -0,0 +1,24 @@
+export type DataOrientation = 'vertical' | 'horizontal';
+/**
+ * Nullable from `Type` adds `null` and `undefined`
+ *
+ * @example ```ts
+ *  // Expect: string | number | undefined | null
+ *  type Value = Nulling<string | number>;
+ * ```
+ */
+export type Nullable<Type> = null | Type | undefined;
+/**
+ * SafeFunction is a type for functions that accept any number of arguments of unknown types
+ * and return a value of an unknown type. This is useful when you want to define a function
+ * without being strict about the input or output types, maintaining flexibility.
+ *
+ * @example ```ts
+ *  const safeFn: SafeFunction = (...args) => {
+ *    return args.length > 0 ? args[0] : null;
+ *  };
+ *
+ *  const result = safeFn(1, 'hello'); // result: 1
+ * ```
+ */
+export type SafeFunction = (...args: unknown[]) => unknown;

package/{stepper/src/utils → core/src}/useArrowNavigation.d.ts

@@ -10,7 +10,7 @@ interface ArrowNavigationOptions {
     /**
      * The attribute name to find the collection items in the parent element.
      *
-     * @defaultValue "data-reka-collection-item"
+     * @defaultValue "data-rdx-collection-item"
      */
     attributeName?: string;
     /**
@@ -53,7 +53,7 @@ interface ArrowNavigationOptions {
     focus?: boolean;
 }
 /**
- * Allow arrow navigation for every html element with data-reka-collection-item tag
+ * Allow arrow navigation for every html element with data-rdx-collection-item tag
  *
  * @param e               Keyboard event
  * @param currentElement  Event initiator element or any element that wants to handle the navigation

package/core/src/useResizeObserver.d.ts

@@ -0,0 +1,15 @@
+import { EffectRef, ElementRef, Injector, Signal } from '@angular/core';
+/**
+ * Creates a resize observer effect for element
+ *
+ * @param options Configuration options
+ * @param options.injector Angular injector
+ * @param options.element Signal returning the element to observe
+ * @param options.onResize Callback when element is resized
+ * @returns EffectRef that can be destroyed when needed
+ */
+export declare function resizeEffect(options: {
+    injector: Injector;
+    element: Signal<ElementRef | HTMLElement | null | undefined>;
+    onResize: ResizeObserverCallback;
+}): EffectRef;

package/cropper/README.md

@@ -0,0 +1 @@
+# @radix-ng/primitives/cropper

package/cropper/index.d.ts

@@ -0,0 +1,15 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./src/cropper-root.directive";
+import * as i2 from "./src/cropper-image.component";
+import * as i3 from "./src/cropper-crop-area.directive";
+import * as i4 from "./src/cropper-description.directive";
+export * from './src/cropper-context.token';
+export * from './src/cropper-crop-area.directive';
+export * from './src/cropper-description.directive';
+export * from './src/cropper-image.component';
+export * from './src/cropper-root.directive';
+export declare class RdxCropperModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxCropperModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<RdxCropperModule, never, [typeof i1.RdxCropperRootDirective, typeof i2.RdxCropperImageComponent, typeof i3.RdxCropperCropAreaDirective, typeof i4.RdxCropperDescriptionDirective], [typeof i1.RdxCropperRootDirective, typeof i2.RdxCropperImageComponent, typeof i3.RdxCropperCropAreaDirective, typeof i4.RdxCropperDescriptionDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<RdxCropperModule>;
+}

package/cropper/src/cropper-context.token.d.ts

@@ -0,0 +1,12 @@
+import { InjectionToken, InputSignal, WritableSignal } from '@angular/core';
+export interface CropperContextToken {
+    image: InputSignal<string>;
+    getImageProps: () => {
+        [key: string]: any;
+    };
+    getImageWrapperStyle: () => Record<string, string>;
+    getCropAreaStyle: () => Record<string, string>;
+    descriptionId: WritableSignal<string>;
+}
+export declare const CROPPER_ROOT_CONTEXT: InjectionToken<CropperContextToken>;
+export declare function injectCropperRootContext(): CropperContextToken;

package/cropper/src/cropper-crop-area.directive.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class RdxCropperCropAreaDirective {
+    readonly rootContext: import("./cropper-context.token").CropperContextToken;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxCropperCropAreaDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxCropperCropAreaDirective, "[rdxCropperCropArea]", never, {}, {}, never, never, true, never>;
+}

package/cropper/src/cropper-description.directive.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class RdxCropperDescriptionDirective {
+    readonly rootContext: import("./cropper-context.token").CropperContextToken;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxCropperDescriptionDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxCropperDescriptionDirective, "[rdxCropperDescription]", never, {}, {}, never, never, true, never>;
+}

package/cropper/src/cropper-image.component.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+export declare class RdxCropperImageComponent {
+    protected readonly rootContext: import("./cropper-context.token").CropperContextToken;
+    readonly imgClass: import("@angular/core").InputSignal<string | undefined>;
+    readonly imgStyles: import("@angular/core").InputSignal<string | undefined>;
+    protected readonly imgClasses: import("@angular/core").Signal<string | undefined>;
+    protected readonly imgStyless: import("@angular/core").Signal<string | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxCropperImageComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RdxCropperImageComponent, "[rdxCropperImage]", never, { "imgClass": { "alias": "imgClass"; "required": false; "isSignal": true; }; "imgStyles": { "alias": "imgStyles"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/cropper/src/cropper-root.directive.d.ts

@@ -0,0 +1,91 @@
+import { NumberInput } from '@angular/cdk/coercion';
+import { CropperContextToken } from './cropper-context.token';
+import * as i0 from "@angular/core";
+export type Area = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export declare class RdxCropperRootDirective implements CropperContextToken {
+    private readonly elementRef;
+    private readonly CROPPER_DESC_WARN_MESSAGE;
+    readonly image: import("@angular/core").InputSignal<string>;
+    readonly cropPadding: import("@angular/core").InputSignalWithTransform<number, unknown>;
+    readonly aspectRatio: import("@angular/core").InputSignalWithTransform<number, unknown>;
+    readonly minZoom: import("@angular/core").InputSignalWithTransform<number, unknown>;
+    readonly maxZoom: import("@angular/core").InputSignalWithTransform<number, unknown>;
+    readonly zoomSensitivity: import("@angular/core").InputSignalWithTransform<number, unknown>;
+    readonly keyboardStep: import("@angular/core").InputSignalWithTransform<number, unknown>;
+    readonly zoom: import("@angular/core").InputSignalWithTransform<number | undefined, NumberInput>;
+    readonly onCropChange: import("@angular/core").OutputEmitterRef<Area | null>;
+    readonly onZoomChange: import("@angular/core").OutputEmitterRef<number>;
+    private readonly imgWidth;
+    private readonly imgHeight;
+    private readonly cropAreaWidth;
+    private readonly cropAreaHeight;
+    private readonly imageWrapperWidth;
+    private readonly imageWrapperHeight;
+    private readonly offsetX;
+    private readonly offsetY;
+    private readonly internalZoom;
+    private readonly isDragging;
+    readonly descriptionId: import("@angular/core").WritableSignal<string>;
+    private readonly isZoomControlled;
+    protected readonly effectiveZoom: import("@angular/core").Signal<number>;
+    protected readonly zoomValueText: import("@angular/core").Signal<string>;
+    private readonly dragStartPoint;
+    private readonly dragStartOffset;
+    private readonly latestRestrictedOffset;
+    private readonly latestZoom;
+    private readonly isInitialSetupDone;
+    private readonly initialPinchDistance;
+    private readonly initialPinchZoom;
+    private readonly isPinching;
+    private readonly hasWarned;
+    constructor();
+    private updateZoom;
+    private initializeContainerDimensions;
+    private setupImageLoadEffect;
+    private setupDimensionsEffects;
+    private restrictOffset;
+    private calculateCropData;
+    private setupCropCalculationEffect;
+    private setupAccessibilityWarningEffect;
+    private setupEventListenersEffect;
+    private handleInteractionEnd;
+    /**
+     * @ignore
+     */
+    onMouseDown(e: MouseEvent): void;
+    private handleWheel;
+    private getPinchDistance;
+    private getPinchCenter;
+    private handleTouchStart;
+    private handleTouchMove;
+    private handleTouchEnd;
+    /**
+     * @ignore
+     */
+    onKeyDown(e: KeyboardEvent): void;
+    /**
+     * @ignore
+     */
+    onKeyUp(e: KeyboardEvent): void;
+    /**
+     * @ignore
+     */
+    getImageProps(): {
+        [key: string]: any;
+    };
+    /**
+     * @ignore
+     */
+    getImageWrapperStyle(): Record<string, string>;
+    /**
+     * @ignore
+     */
+    getCropAreaStyle(): Record<string, string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxCropperRootDirective, never>;
+    static ɵdir: i0.ɵɵ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>;
+}