@radix-ng/primitives 0.36.0 → 0.37.0

package/avatar/index.d.ts

@@ -5,8 +5,8 @@ import * as i3 from "./src/avatar-image.directive";
 export * from './src/avatar-fallback.directive';
 export * from './src/avatar-image.directive';
 export * from './src/avatar-root.directive';
-export type { RdxImageLoadingStatus } from './src/avatar-root.directive';
 export * from './src/avatar.config';
+export type { RdxImageLoadingStatus } from './src/types';
 export declare class RdxCheckboxModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxCheckboxModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<RdxCheckboxModule, never, [typeof i1.RdxAvatarRootDirective, typeof i2.RdxAvatarFallbackDirective, typeof i3.RdxAvatarImageDirective], [typeof i1.RdxAvatarRootDirective, typeof i2.RdxAvatarFallbackDirective, typeof i3.RdxAvatarImageDirective]>;

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

@@ -0,0 +1,7 @@
+import { InjectionToken, WritableSignal } from '@angular/core';
+import { RdxImageLoadingStatus } from './types';
+export interface AvatarContextToken {
+    imageLoadingStatus: WritableSignal<RdxImageLoadingStatus>;
+}
+export declare const AVATAR_ROOT_CONTEXT: InjectionToken<AvatarContextToken>;
+export declare function injectAvatarRootContext(): AvatarContextToken;

package/avatar/src/avatar-fallback.directive.d.ts

@@ -1,12 +1,10 @@
-import { OnDestroy } from '@angular/core';
-import { RdxAvatarRootContext } from './avatar-root.directive';
 import * as i0 from "@angular/core";
 /**
  * @group Components
  */
-export declare class RdxAvatarFallbackDirective implements OnDestroy {
-    protected readonly avatarRoot: RdxAvatarRootContext;
+export declare class RdxAvatarFallbackDirective {
     private readonly config;
+    protected readonly rootContext: import("./avatar-context.token").AvatarContextToken;
     /**
      * Useful for delaying rendering so it only appears for those with slower connections.
      *
@@ -14,13 +12,9 @@ export declare class RdxAvatarFallbackDirective implements OnDestroy {
      * @defaultValue 0
      */
     readonly delayMs: import("@angular/core").InputSignal<number>;
-    readonly shouldRender: import("@angular/core").Signal<boolean>;
     protected readonly canRender: import("@angular/core").WritableSignal<boolean>;
-    private timeoutId;
+    private timeout;
     constructor();
-    private startDelayTimer;
-    private clearDelayTimer;
-    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxAvatarFallbackDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<RdxAvatarFallbackDirective, "span[rdxAvatarFallback]", ["rdxAvatarFallback"], { "delayMs": { "alias": "delayMs"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/avatar/src/avatar-image.directive.d.ts

@@ -1,16 +1,17 @@
-import { OnInit } from '@angular/core';
-import { RdxImageLoadingStatus } from './avatar-root.directive';
+import { OnDestroy, OnInit } from '@angular/core';
+import { HTMLAttributeReferrerPolicy, RdxImageLoadingStatus } from './types';
 import * as i0 from "@angular/core";
 /**
  * @group Components
  */
-export declare class RdxAvatarImageDirective implements OnInit {
-    private readonly avatarRoot;
-    private readonly elementRef;
+export declare class RdxAvatarImageDirective implements OnInit, OnDestroy {
+    private readonly platformId;
+    protected readonly rootContext: import("./avatar-context.token").AvatarContextToken;
     /**
      * @group Props
      */
     readonly src: import("@angular/core").InputSignal<string | undefined>;
+    readonly referrerPolicy: import("@angular/core").InputSignal<HTMLAttributeReferrerPolicy | undefined>;
     /**
      * A callback providing information about the loading status of the image.
      * This is useful in case you want to control more precisely what to render as the image is loading.
@@ -18,12 +19,11 @@ export declare class RdxAvatarImageDirective implements OnInit {
      * @group Emits
      */
     readonly onLoadingStatusChange: import("@angular/core").OutputEmitterRef<RdxImageLoadingStatus>;
-    protected readonly imageLoadingStatus: import("@angular/core").Signal<RdxImageLoadingStatus>;
+    private readonly isMounted;
+    private readonly loadingStatus;
+    constructor();
     ngOnInit(): void;
-    onLoad(): void;
-    onError(): void;
-    private setImageStatus;
-    get nativeElement(): any;
+    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxAvatarImageDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxAvatarImageDirective, "img[rdxAvatarImage]", ["rdxAvatarImage"], { "src": { "alias": "src"; "required": false; "isSignal": true; }; }, { "onLoadingStatusChange": "onLoadingStatusChange"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxAvatarImageDirective, "img[rdxAvatarImage]", ["rdxAvatarImage"], { "src": { "alias": "src"; "required": false; "isSignal": true; }; "referrerPolicy": { "alias": "referrerPolicy"; "required": false; "isSignal": true; }; }, { "onLoadingStatusChange": "onLoadingStatusChange"; }, never, never, true, never>;
 }

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

@@ -1,11 +1,8 @@
+import { AvatarContextToken } from './avatar-context.token';
+import { RdxImageLoadingStatus } from './types';
 import * as i0 from "@angular/core";
-export type RdxImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
-export declare class RdxAvatarRootContext {
+export declare class RdxAvatarRootDirective implements AvatarContextToken {
     readonly imageLoadingStatus: import("@angular/core").WritableSignal<RdxImageLoadingStatus>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxAvatarRootContext, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<RdxAvatarRootContext>;
-}
-export declare class RdxAvatarRootDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxAvatarRootDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<RdxAvatarRootDirective, "span[rdxAvatarRoot]", ["rdxAvatarRoot"], {}, {}, never, never, true, never>;
 }

package/avatar/src/types.d.ts

@@ -0,0 +1,2 @@
+export type RdxImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
+export type HTMLAttributeReferrerPolicy = '' | 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';

package/checkbox/index.d.ts

@@ -11,6 +11,6 @@ export type { CheckboxState } from './src/checkbox.directive';
 export * from './src/checkbox.token';
 export declare class RdxCheckboxModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxCheckboxModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<RdxCheckboxModule, never, [typeof i1.RdxCheckboxInputDirective, typeof i2.RdxCheckboxDirective, typeof i3.RdxCheckboxButtonDirective, typeof i4.RdxCheckboxIndicatorDirective], [typeof i1.RdxCheckboxInputDirective, typeof i2.RdxCheckboxDirective, typeof i3.RdxCheckboxButtonDirective, typeof i4.RdxCheckboxIndicatorDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<RdxCheckboxModule, never, [typeof i1.RdxCheckboxInputDirective, typeof i2.RdxCheckboxRootDirective, typeof i3.RdxCheckboxButtonDirective, typeof i4.RdxCheckboxIndicatorDirective], [typeof i1.RdxCheckboxInputDirective, typeof i2.RdxCheckboxRootDirective, typeof i3.RdxCheckboxButtonDirective, typeof i4.RdxCheckboxIndicatorDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<RdxCheckboxModule>;
 }

package/checkbox/src/checkbox-button.directive.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
 export declare class RdxCheckboxButtonDirective {
-    protected readonly checkbox: import("@radix-ng/primitives/checkbox").RdxCheckboxDirective;
+    protected readonly checkbox: import("@radix-ng/primitives/checkbox").RdxCheckboxRootDirective;
     readonly id: import("@angular/core").InputSignal<string | null>;
     protected readonly elementId: import("@angular/core").Signal<string | null>;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxCheckboxButtonDirective, never>;

package/checkbox/src/checkbox-indicator.directive.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
 export declare class RdxCheckboxIndicatorDirective {
-    protected readonly checkbox: import("@radix-ng/primitives/checkbox").RdxCheckboxDirective;
+    protected readonly checkbox: import("@radix-ng/primitives/checkbox").RdxCheckboxRootDirective;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxCheckboxIndicatorDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<RdxCheckboxIndicatorDirective, "[rdxCheckboxIndicator]", never, {}, {}, never, never, true, never>;
 }

package/checkbox/src/checkbox-input.directive.d.ts

@@ -1,7 +1,7 @@
 import * as i0 from "@angular/core";
 import * as i1 from "@radix-ng/primitives/visually-hidden";
 export declare class RdxCheckboxInputDirective {
-    protected readonly checkbox: import("@radix-ng/primitives/checkbox").RdxCheckboxDirective;
+    protected readonly checkbox: import("@radix-ng/primitives/checkbox").RdxCheckboxRootDirective;
     readonly id: import("@angular/core").InputSignal<string | undefined>;
     protected readonly elementId: import("@angular/core").Signal<string | undefined>;
     protected readonly value: import("@angular/core").Signal<"" | "on" | "off">;

package/checkbox/src/checkbox.directive.d.ts

@@ -5,7 +5,7 @@ export type CheckboxState = 'unchecked' | 'checked' | 'indeterminate';
 /**
  * @group Components
  */
-export declare class RdxCheckboxDirective implements ControlValueAccessor, OnChanges {
+export declare class RdxCheckboxRootDirective implements ControlValueAccessor, OnChanges {
     /**
      * The controlled checked state of the checkbox. Must be used in conjunction with onCheckedChange.
      * @group Props
@@ -77,8 +77,8 @@ export declare class RdxCheckboxDirective implements ControlValueAccessor, OnCha
      * @internal
      */
     setDisabledState(isDisabled: boolean): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxCheckboxDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxCheckboxDirective, "[rdxCheckboxRoot]", never, { "checked": { "alias": "checked"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; }, { "checkedChange": "checkedChange"; "indeterminateChange": "indeterminateChange"; }, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxCheckboxRootDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxCheckboxRootDirective, "[rdxCheckboxRoot]", never, { "checked": { "alias": "checked"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; }, { "checkedChange": "checkedChange"; "indeterminateChange": "indeterminateChange"; }, never, never, true, never>;
     static ngAcceptInputType_checked: unknown;
     static ngAcceptInputType_indeterminate: unknown;
     static ngAcceptInputType_disabled: unknown;

package/checkbox/src/checkbox.token.d.ts

@@ -1,4 +1,4 @@
 import { InjectionToken } from '@angular/core';
-import type { RdxCheckboxDirective } from './checkbox.directive';
-export declare const RdxCheckboxToken: InjectionToken<RdxCheckboxDirective>;
-export declare function injectCheckbox(): RdxCheckboxDirective;
+import type { RdxCheckboxRootDirective } from './checkbox.directive';
+export declare const RdxCheckboxToken: InjectionToken<RdxCheckboxRootDirective>;
+export declare function injectCheckbox(): RdxCheckboxRootDirective;

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>;
+}

package/fesm2022/radix-ng-primitives-avatar.mjs

@@ -1,29 +1,12 @@
 import * as i0 from '@angular/core';
-import { signal, Injectable, Directive, InjectionToken, inject, input, computed, effect, ElementRef, output, NgModule } from '@angular/core';
+import { InjectionToken, inject, input, signal, Directive, PLATFORM_ID, output, NgModule } from '@angular/core';
+import { watch, provideToken } from '@radix-ng/primitives/core';
+import { isPlatformBrowser } from '@angular/common';
 
-class RdxAvatarRootContext {
-    constructor() {
-        this.imageLoadingStatus = signal('loading');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxAvatarRootContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxAvatarRootContext }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxAvatarRootContext, decorators: [{
-            type: Injectable
-        }] });
-class RdxAvatarRootDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxAvatarRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", type: RdxAvatarRootDirective, isStandalone: true, selector: "span[rdxAvatarRoot]", providers: [RdxAvatarRootContext], exportAs: ["rdxAvatarRoot"], ngImport: i0 }); }
+const AVATAR_ROOT_CONTEXT = new InjectionToken('AVATAR_ROOT_CONTEXT');
+function injectAvatarRootContext() {
+    return inject(AVATAR_ROOT_CONTEXT);
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxAvatarRootDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'span[rdxAvatarRoot]',
-                    exportAs: 'rdxAvatarRoot',
-                    standalone: true,
-                    providers: [RdxAvatarRootContext]
-                }]
-        }] });
 
 const defaultAvatarConfig = {
     delayMs: 0
@@ -46,8 +29,8 @@ function injectAvatarConfig() {
  */
 class RdxAvatarFallbackDirective {
     constructor() {
-        this.avatarRoot = inject(RdxAvatarRootContext);
         this.config = injectAvatarConfig();
+        this.rootContext = injectAvatarRootContext();
         /**
          * Useful for delaying rendering so it only appears for those with slower connections.
          *
@@ -55,51 +38,32 @@ class RdxAvatarFallbackDirective {
          * @defaultValue 0
          */
         this.delayMs = input(this.config.delayMs);
-        this.shouldRender = computed(() => this.canRender() && this.avatarRoot.imageLoadingStatus() !== 'loaded');
         this.canRender = signal(false);
-        this.timeoutId = null;
-        effect(() => {
-            const status = this.avatarRoot.imageLoadingStatus();
-            if (status === 'loading') {
-                this.startDelayTimer();
-            }
-            else {
-                this.clearDelayTimer();
-                this.canRender.set(true);
+        watch([this.rootContext.imageLoadingStatus], ([value]) => {
+            if (value === 'loading') {
+                this.canRender.set(false);
+                if (this.delayMs()) {
+                    this.timeout = setTimeout(() => {
+                        this.canRender.set(true);
+                        clearTimeout(this.timeout);
+                    }, this.delayMs());
+                }
+                else {
+                    this.canRender.set(true);
+                }
             }
         });
     }
-    startDelayTimer() {
-        this.clearDelayTimer();
-        if (this.delayMs() > 0) {
-            this.timeoutId = setTimeout(() => {
-                this.canRender.set(true);
-            }, this.delayMs());
-        }
-        else {
-            this.canRender.set(true);
-        }
-    }
-    clearDelayTimer() {
-        if (this.timeoutId !== null) {
-            clearTimeout(this.timeoutId);
-            this.timeoutId = null;
-        }
-    }
-    ngOnDestroy() {
-        this.clearDelayTimer();
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxAvatarFallbackDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.4", type: RdxAvatarFallbackDirective, isStandalone: true, selector: "span[rdxAvatarFallback]", inputs: { delayMs: { classPropertyName: "delayMs", publicName: "delayMs", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "shouldRender() ? null : \"none\" " } }, exportAs: ["rdxAvatarFallback"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.4", type: RdxAvatarFallbackDirective, isStandalone: true, selector: "span[rdxAvatarFallback]", inputs: { delayMs: { classPropertyName: "delayMs", publicName: "delayMs", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "canRender() && rootContext.imageLoadingStatus() !== \"loaded\" ? null : \"none\" " } }, exportAs: ["rdxAvatarFallback"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxAvatarFallbackDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'span[rdxAvatarFallback]',
-                    standalone: true,
                     exportAs: 'rdxAvatarFallback',
                     host: {
-                        '[style.display]': 'shouldRender() ? null : "none" '
+                        '[style.display]': 'canRender() && rootContext.imageLoadingStatus() !== "loaded" ? null : "none" '
                     }
                 }]
         }], ctorParameters: () => [] });
@@ -109,12 +73,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
  */
 class RdxAvatarImageDirective {
     constructor() {
-        this.avatarRoot = inject(RdxAvatarRootContext);
-        this.elementRef = inject((ElementRef));
+        this.platformId = inject(PLATFORM_ID);
+        this.rootContext = injectAvatarRootContext();
         /**
          * @group Props
          */
         this.src = input();
+        this.referrerPolicy = input();
         /**
          * A callback providing information about the loading status of the image.
          * This is useful in case you want to control more precisely what to render as the image is loading.
@@ -122,48 +87,79 @@ class RdxAvatarImageDirective {
          * @group Emits
          */
         this.onLoadingStatusChange = output();
-        this.imageLoadingStatus = computed(() => this.avatarRoot.imageLoadingStatus());
-    }
-    ngOnInit() {
-        this.nativeElement.src = this.src();
-        if (!this.nativeElement.src) {
-            this.setImageStatus('error');
-        }
-        else if (this.nativeElement.complete) {
-            this.setImageStatus('loaded');
+        this.isMounted = signal(false);
+        this.loadingStatus = signal('idle');
+        const updateStatus = (status) => () => {
+            if (this.isMounted()) {
+                this.loadingStatus.set(status);
+            }
+        };
+        if (isPlatformBrowser(this.platformId)) {
+            watch([this.src, this.referrerPolicy], ([src, referrer]) => {
+                if (this.isMounted()) {
+                    if (!src) {
+                        this.loadingStatus.set('error');
+                    }
+                    else {
+                        const image = new window.Image();
+                        this.loadingStatus.set('loading');
+                        image.onload = updateStatus('loaded');
+                        image.onerror = updateStatus('error');
+                        image.src = src;
+                        if (referrer) {
+                            image.referrerPolicy = referrer;
+                        }
+                    }
+                }
+            });
+            watch([this.loadingStatus], ([value]) => {
+                this.onLoadingStatusChange.emit(value);
+                if (value !== 'idle') {
+                    this.rootContext.imageLoadingStatus.set(value);
+                }
+            });
         }
         else {
-            this.setImageStatus('loading');
+            this.loadingStatus.set('idle');
         }
     }
-    onLoad() {
-        this.setImageStatus('loaded');
-    }
-    onError() {
-        this.setImageStatus('error');
-    }
-    setImageStatus(status) {
-        this.avatarRoot.imageLoadingStatus.set(status);
-        this.onLoadingStatusChange.emit(status);
+    ngOnInit() {
+        this.isMounted.set(true);
     }
-    get nativeElement() {
-        return this.elementRef.nativeElement;
+    ngOnDestroy() {
+        this.isMounted.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxAvatarImageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.4", type: RdxAvatarImageDirective, isStandalone: true, selector: "img[rdxAvatarImage]", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onLoadingStatusChange: "onLoadingStatusChange" }, host: { listeners: { "load": "onLoad()", "error": "onError()" }, properties: { "style.display": "(imageLoadingStatus() === \"loaded\")? null : \"none\"" } }, exportAs: ["rdxAvatarImage"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.4", type: RdxAvatarImageDirective, isStandalone: true, selector: "img[rdxAvatarImage]", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, referrerPolicy: { classPropertyName: "referrerPolicy", publicName: "referrerPolicy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onLoadingStatusChange: "onLoadingStatusChange" }, host: { attributes: { "role": "img" }, properties: { "attr.src": "src()", "attr.referrer-policy": "referrerPolicy()", "style.display": "(rootContext.imageLoadingStatus() === \"loaded\") ? null : \"none\"" } }, exportAs: ["rdxAvatarImage"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxAvatarImageDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'img[rdxAvatarImage]',
-                    standalone: true,
                     exportAs: 'rdxAvatarImage',
                     host: {
-                        '(load)': 'onLoad()',
-                        '(error)': 'onError()',
-                        '[style.display]': '(imageLoadingStatus() === "loaded")? null : "none"'
+                        role: 'img',
+                        '[attr.src]': 'src()',
+                        '[attr.referrer-policy]': 'referrerPolicy()',
+                        '[style.display]': '(rootContext.imageLoadingStatus() === "loaded") ? null : "none"'
                     }
                 }]
+        }], ctorParameters: () => [] });
+
+class RdxAvatarRootDirective {
+    constructor() {
+        this.imageLoadingStatus = signal('loading');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxAvatarRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", type: RdxAvatarRootDirective, isStandalone: true, selector: "span[rdxAvatarRoot]", providers: [provideToken(AVATAR_ROOT_CONTEXT, RdxAvatarRootDirective)], exportAs: ["rdxAvatarRoot"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxAvatarRootDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'span[rdxAvatarRoot]',
+                    exportAs: 'rdxAvatarRoot',
+                    providers: [provideToken(AVATAR_ROOT_CONTEXT, RdxAvatarRootDirective)]
+                }]
         }] });
 
 const _imports = [
@@ -192,5 +188,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { RdxAvatarConfigToken, RdxAvatarFallbackDirective, RdxAvatarImageDirective, RdxAvatarRootContext, RdxAvatarRootDirective, RdxCheckboxModule, defaultAvatarConfig, injectAvatarConfig, provideRdxAvatarConfig };
+export { RdxAvatarConfigToken, RdxAvatarFallbackDirective, RdxAvatarImageDirective, RdxAvatarRootDirective, RdxCheckboxModule, defaultAvatarConfig, injectAvatarConfig, provideRdxAvatarConfig };
 //# sourceMappingURL=radix-ng-primitives-avatar.mjs.map