@radix-ng/primitives 0.12.1 → 0.13.0

package/fesm2022/radix-ng-primitives-alert-dialog.mjs

@@ -0,0 +1,159 @@
+import * as i0 from '@angular/core';
+import { Injectable, inject, Directive, Renderer2, ElementRef, Input, ViewContainerRef } from '@angular/core';
+import * as i1 from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import * as i1$1 from '@angular/cdk/a11y';
+import { CdkTrapFocus } from '@angular/cdk/a11y';
+
+class AlertDialogService {
+    constructor(overlay) {
+        this.overlay = overlay;
+    }
+    setDialogContent(viewContainerRef, template) {
+        this.dialogContent = { viewContainerRef, template };
+    }
+    open() {
+        if (!this.dialogContent) {
+            throw new Error('Dialog content is not set');
+        }
+        this.overlayRef = this.overlay.create({
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-dark-backdrop',
+            positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically()
+        });
+        const templatePortal = new TemplatePortal(this.dialogContent.template, this.dialogContent.viewContainerRef);
+        this.overlayRef.attach(templatePortal);
+        this.overlayRef.keydownEvents().subscribe((event) => {
+            if (event.key === 'Escape' || event.code === 'Escape') {
+                this.close();
+            }
+        });
+        this.overlayRef.backdropClick().subscribe(() => this.close());
+    }
+    close() {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: AlertDialogService, deps: [{ token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: AlertDialogService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: AlertDialogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.Overlay }] });
+
+class AlertDialogCancelDirective {
+    constructor() {
+        this.alertDialogService = inject(AlertDialogService);
+    }
+    onClick() {
+        this.alertDialogService.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: AlertDialogCancelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: AlertDialogCancelDirective, isStandalone: true, selector: "[rdxAlertDialogCancel]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: AlertDialogCancelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxAlertDialogCancel]',
+                    standalone: true,
+                    host: {
+                        '(click)': 'onClick()'
+                    }
+                }]
+        }] });
+
+class AlertDialogContentDirective {
+    constructor() {
+        this.renderer = inject(Renderer2);
+        this.elementRef = inject(ElementRef);
+    }
+    set maxWidth(value) {
+        this.renderer.setStyle(this.elementRef.nativeElement, 'maxWidth', value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: AlertDialogContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: AlertDialogContentDirective, isStandalone: true, selector: "[rdxAlertDialogContent]", inputs: { maxWidth: "maxWidth" }, host: { properties: { "attr.data-state": "open", "attr.cdkTrapFocusAutoCapture": "true" } }, hostDirectives: [{ directive: i1$1.CdkTrapFocus }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: AlertDialogContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxAlertDialogContent]',
+                    hostDirectives: [
+                        {
+                            directive: CdkTrapFocus
+                        }
+                    ],
+                    standalone: true,
+                    host: {
+                        '[attr.data-state]': 'open',
+                        '[attr.cdkTrapFocusAutoCapture]': 'true'
+                    }
+                }]
+        }], propDecorators: { maxWidth: [{
+                type: Input
+            }] } });
+
+class AlertDialogRootDirective {
+    constructor() {
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.alertDialogService = inject(AlertDialogService);
+    }
+    set content(template) {
+        this.alertDialogService.setDialogContent(this.viewContainerRef, template);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: AlertDialogRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: AlertDialogRootDirective, isStandalone: true, selector: "[rdxAlertDialogRoot]", inputs: { content: "content" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: AlertDialogRootDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxAlertDialogRoot]',
+                    standalone: true
+                }]
+        }], propDecorators: { content: [{
+                type: Input
+            }] } });
+
+class AlertDialogTitleDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: AlertDialogTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: AlertDialogTitleDirective, isStandalone: true, selector: "[rdxAlertDialogTitle]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: AlertDialogTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxAlertDialogTitle]',
+                    standalone: true
+                }]
+        }] });
+
+class AlertDialogTriggerDirective {
+    constructor() {
+        this.alertDialogService = inject(AlertDialogService);
+    }
+    handleClick() {
+        this.alertDialogService.open();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: AlertDialogTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: AlertDialogTriggerDirective, isStandalone: true, selector: "[rdxAlertDialogTrigger]", host: { listeners: { "click": "handleClick()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: AlertDialogTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxAlertDialogTrigger]',
+                    standalone: true,
+                    host: {
+                        '(click)': 'handleClick()'
+                    }
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AlertDialogCancelDirective, AlertDialogContentDirective, AlertDialogRootDirective, AlertDialogService, AlertDialogTitleDirective, AlertDialogTriggerDirective };
+//# sourceMappingURL=radix-ng-primitives-alert-dialog.mjs.map

package/fesm2022/radix-ng-primitives-alert-dialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radix-ng-primitives-alert-dialog.mjs","sources":["../../../packages/primitives/alert-dialog/src/alert-dialog.service.ts","../../../packages/primitives/alert-dialog/src/alert-dialog-cancel.directive.ts","../../../packages/primitives/alert-dialog/src/alert-dialog-content.directive.ts","../../../packages/primitives/alert-dialog/src/alert-dialog-root.directive.ts","../../../packages/primitives/alert-dialog/src/alert-dialog-title.directive.ts","../../../packages/primitives/alert-dialog/src/alert-dialog-trigger.directive.ts","../../../packages/primitives/alert-dialog/radix-ng-primitives-alert-dialog.ts"],"sourcesContent":["import { Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport { Injectable, TemplateRef, ViewContainerRef } from '@angular/core';\n\n@Injectable({\n    providedIn: 'root'\n})\nexport class AlertDialogService {\n    private overlayRef: OverlayRef | null | undefined;\n    private dialogContent:\n        | {\n              viewContainerRef: ViewContainerRef;\n              template: TemplateRef<any>;\n          }\n        | undefined;\n\n    constructor(private overlay: Overlay) {}\n\n    setDialogContent(viewContainerRef: ViewContainerRef, template: TemplateRef<any>) {\n        this.dialogContent = { viewContainerRef, template };\n    }\n\n    open() {\n        if (!this.dialogContent) {\n            throw new Error('Dialog content is not set');\n        }\n\n        this.overlayRef = this.overlay.create({\n            hasBackdrop: true,\n            backdropClass: 'cdk-overlay-dark-backdrop',\n            positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically()\n        });\n\n        const templatePortal = new TemplatePortal(this.dialogContent.template, this.dialogContent.viewContainerRef);\n        this.overlayRef.attach(templatePortal);\n\n        this.overlayRef.keydownEvents().subscribe((event) => {\n            if (event.key === 'Escape' || event.code === 'Escape') {\n                this.close();\n            }\n        });\n        this.overlayRef.backdropClick().subscribe(() => this.close());\n    }\n\n    close() {\n        if (this.overlayRef) {\n            this.overlayRef.dispose();\n            this.overlayRef = null;\n        }\n    }\n}\n","import { Directive, inject } from '@angular/core';\nimport { AlertDialogService } from './alert-dialog.service';\n\n@Directive({\n    selector: '[rdxAlertDialogCancel]',\n    standalone: true,\n    host: {\n        '(click)': 'onClick()'\n    }\n})\nexport class AlertDialogCancelDirective {\n    private readonly alertDialogService = inject(AlertDialogService);\n\n    onClick() {\n        this.alertDialogService.close();\n    }\n}\n","import { CdkTrapFocus } from '@angular/cdk/a11y';\nimport { Directive, ElementRef, inject, Input, Renderer2 } from '@angular/core';\n\n@Directive({\n    selector: '[rdxAlertDialogContent]',\n    hostDirectives: [\n        {\n            directive: CdkTrapFocus\n        }\n    ],\n    standalone: true,\n    host: {\n        '[attr.data-state]': 'open',\n        '[attr.cdkTrapFocusAutoCapture]': 'true'\n    }\n})\nexport class AlertDialogContentDirective {\n    private readonly renderer = inject(Renderer2);\n    private readonly elementRef = inject(ElementRef);\n\n    @Input() set maxWidth(value: string) {\n        this.renderer.setStyle(this.elementRef.nativeElement, 'maxWidth', value);\n    }\n}\n","import { Directive, inject, Input, TemplateRef, ViewContainerRef } from '@angular/core';\nimport { AlertDialogService } from './alert-dialog.service';\n\n@Directive({\n    selector: '[rdxAlertDialogRoot]',\n    standalone: true\n})\nexport class AlertDialogRootDirective {\n    private readonly viewContainerRef = inject(ViewContainerRef);\n    private readonly alertDialogService = inject(AlertDialogService);\n\n    @Input() set content(template: TemplateRef<any>) {\n        this.alertDialogService.setDialogContent(this.viewContainerRef, template);\n    }\n}\n","import { Directive } from '@angular/core';\n\n@Directive({\n    selector: '[rdxAlertDialogTitle]',\n    standalone: true\n})\nexport class AlertDialogTitleDirective {}\n","import { Directive, inject } from '@angular/core';\nimport { AlertDialogService } from './alert-dialog.service';\n\n@Directive({\n    selector: '[rdxAlertDialogTrigger]',\n    standalone: true,\n    host: {\n        '(click)': 'handleClick()'\n    }\n})\nexport class AlertDialogTriggerDirective {\n    private readonly alertDialogService = inject(AlertDialogService);\n\n    handleClick() {\n        this.alertDialogService.open();\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}

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

@@ -0,0 +1,166 @@
+import { isPlatformBrowser } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, signal, Directive, NgZone, PLATFORM_ID, numberAttribute, Input, ElementRef, EventEmitter, Output } from '@angular/core';
+
+const RdxAvatarToken = new InjectionToken('RdxAvatarToken');
+function injectAvatar() {
+    return inject(RdxAvatarToken);
+}
+class RdxAvatarRootDirective {
+    constructor() {
+        /**
+         * A readonly signal property that holds the current state of image loading.
+         * To set a new status, use the `setState` method of the component.
+         * @internal
+         */
+        this._state = signal('idle');
+    }
+    /**
+     * Set the avatar state.
+     * @param state The new image loading status to set. This value should be one of the predefined states
+     *              in the `ImageLoadingStatus`
+     * @returns void This method does not return a value.
+     * @internal
+     */
+    _setState(state) {
+        this._state.set(state);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxAvatarRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: RdxAvatarRootDirective, isStandalone: true, selector: "span[rdxAvatarRoot]", providers: [{ provide: RdxAvatarToken, useExisting: RdxAvatarRootDirective }], exportAs: ["rdxAvatarRoot"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxAvatarRootDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'span[rdxAvatarRoot]',
+                    exportAs: 'rdxAvatarRoot',
+                    standalone: true,
+                    providers: [{ provide: RdxAvatarToken, useExisting: RdxAvatarRootDirective }]
+                }]
+        }] });
+
+const defaultAvatarConfig = {
+    delayMs: 0
+};
+const RdxAvatarConfigToken = new InjectionToken('RdxAvatarConfigToken');
+function provideRdxAvatarConfig(config) {
+    return [
+        {
+            provide: RdxAvatarConfigToken,
+            useValue: { ...defaultAvatarConfig, ...config }
+        }
+    ];
+}
+function injectAvatarConfig() {
+    return inject(RdxAvatarConfigToken, { optional: true }) ?? defaultAvatarConfig;
+}
+
+class RdxAvatarFallbackDirective {
+    constructor() {
+        this.avatar = injectAvatar();
+        this.config = injectAvatarConfig();
+        this.ngZone = inject(NgZone);
+        this.platformId = inject(PLATFORM_ID);
+        /**
+         * Define a delay before the fallback is shown.
+         * This is useful to only show the fallback for those with slower connections.
+         * @default 0
+         */
+        this.delayMs = this.config.delayMs;
+        /**
+         * Determine the delay has elapsed, and we can show the fallback.
+         */
+        this.delayElapsed = false;
+        this.timeoutId = null;
+    }
+    get visible() {
+        return this.delayElapsed && this.avatar._state() !== 'loaded';
+    }
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.ngZone.runOutsideAngular(() => {
+                this.timeoutId = globalThis.setTimeout(() => {
+                    this.ngZone.run(() => {
+                        this.delayElapsed = true;
+                    });
+                }, this.delayMs);
+            });
+        }
+    }
+    ngOnDestroy() {
+        if (isPlatformBrowser(this.platformId) && this.timeoutId !== null) {
+            globalThis.clearTimeout(this.timeoutId);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxAvatarFallbackDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.1", type: RdxAvatarFallbackDirective, isStandalone: true, selector: "span[rdxAvatarFallback]", inputs: { delayMs: ["rdxDelayMs", "delayMs", numberAttribute] }, host: { properties: { "style.display": "visible ? null : \"none\"" } }, exportAs: ["rdxAvatarFallback"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxAvatarFallbackDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'span[rdxAvatarFallback]',
+                    exportAs: 'rdxAvatarFallback',
+                    standalone: true,
+                    host: {
+                        '[style.display]': 'visible ? null : "none"'
+                    }
+                }]
+        }], propDecorators: { delayMs: [{
+                type: Input,
+                args: [{ alias: 'rdxDelayMs', transform: numberAttribute }]
+            }] } });
+
+class RdxAvatarImageDirective {
+    constructor() {
+        this.avatar = injectAvatar();
+        this.elementRef = inject(ElementRef);
+        /**
+         * By default, it will only render when it has loaded.
+         * You can use the `onLoadingStatusChange` handler if you need more control.
+         */
+        this.onLoadingStatusChange = new EventEmitter();
+    }
+    ngOnInit() {
+        this.avatar._setState('loading');
+        if (!this.nativeElement.src) {
+            this.avatar._setState('error');
+        }
+        if (this.nativeElement.complete) {
+            this.avatar._setState('loaded');
+        }
+        this.onLoadingStatusChange.emit(this.avatar._state());
+    }
+    onLoad() {
+        this.avatar._setState('loaded');
+        this.onLoadingStatusChange.emit('loaded');
+    }
+    onError() {
+        this.avatar._setState('error');
+        this.onLoadingStatusChange.emit('error');
+    }
+    get nativeElement() {
+        return this.elementRef.nativeElement;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxAvatarImageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: RdxAvatarImageDirective, isStandalone: true, selector: "img[rdxAvatarImage]", outputs: { onLoadingStatusChange: "onLoadingStatusChange" }, host: { listeners: { "load": "onLoad()", "error": "onError()" } }, exportAs: ["rdxAvatarImage"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxAvatarImageDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'img[rdxAvatarImage]',
+                    exportAs: 'rdxAvatarImage',
+                    standalone: true,
+                    host: {
+                        '(load)': 'onLoad()',
+                        '(error)': 'onError()'
+                    }
+                }]
+        }], propDecorators: { onLoadingStatusChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RdxAvatarConfigToken, RdxAvatarFallbackDirective, RdxAvatarImageDirective, RdxAvatarRootDirective, defaultAvatarConfig, injectAvatar, injectAvatarConfig, provideRdxAvatarConfig };
+//# sourceMappingURL=radix-ng-primitives-avatar.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radix-ng-primitives-avatar.mjs","sources":["../../../packages/primitives/avatar/src/avatar-root.directive.ts","../../../packages/primitives/avatar/src/avatar.config.ts","../../../packages/primitives/avatar/src/avatar-fallback.directive.ts","../../../packages/primitives/avatar/src/avatar-image.directive.ts","../../../packages/primitives/avatar/radix-ng-primitives-avatar.ts"],"sourcesContent":["import { Directive, inject, InjectionToken, signal } from '@angular/core';\n\nconst RdxAvatarToken = new InjectionToken<RdxAvatarRootDirective>('RdxAvatarToken');\n\nexport function injectAvatar(): RdxAvatarRootDirective {\n    return inject(RdxAvatarToken);\n}\n\nexport type RdxImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';\n\n@Directive({\n    selector: 'span[rdxAvatarRoot]',\n    exportAs: 'rdxAvatarRoot',\n    standalone: true,\n    providers: [{ provide: RdxAvatarToken, useExisting: RdxAvatarRootDirective }]\n})\nexport class RdxAvatarRootDirective {\n    /**\n     * A readonly signal property that holds the current state of image loading.\n     * To set a new status, use the `setState` method of the component.\n     * @internal\n     */\n    readonly _state = signal<RdxImageLoadingStatus>('idle');\n\n    /**\n     * Set the avatar state.\n     * @param state The new image loading status to set. This value should be one of the predefined states\n     *              in the `ImageLoadingStatus`\n     * @returns void This method does not return a value.\n     * @internal\n     */\n    _setState(state: RdxImageLoadingStatus): void {\n        this._state.set(state);\n    }\n}\n","import { inject, InjectionToken, Provider } from '@angular/core';\n\nexport interface RdxAvatarConfig {\n    /**\n     * Define a delay before the fallback is shown.\n     * This is useful to only show the fallback for those with slower connections.\n     * @default 0\n     */\n    delayMs: number;\n}\n\nexport const defaultAvatarConfig: RdxAvatarConfig = {\n    delayMs: 0\n};\n\nexport const RdxAvatarConfigToken = new InjectionToken<RdxAvatarConfig>('RdxAvatarConfigToken');\n\nexport function provideRdxAvatarConfig(config: Partial<RdxAvatarConfig>): Provider[] {\n    return [\n        {\n            provide: RdxAvatarConfigToken,\n            useValue: { ...defaultAvatarConfig, ...config }\n        }\n    ];\n}\n\nexport function injectAvatarConfig(): RdxAvatarConfig {\n    return inject(RdxAvatarConfigToken, { optional: true }) ?? defaultAvatarConfig;\n}\n","import { isPlatformBrowser } from '@angular/common';\nimport { Directive, inject, Input, NgZone, numberAttribute, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';\nimport { injectAvatar } from './avatar-root.directive';\nimport { injectAvatarConfig } from './avatar.config';\n\nexport interface RdxAvatarFallbackProps {\n    delayMs?: number;\n}\n\n@Directive({\n    selector: 'span[rdxAvatarFallback]',\n    exportAs: 'rdxAvatarFallback',\n    standalone: true,\n    host: {\n        '[style.display]': 'visible ? null : \"none\"'\n    }\n})\nexport class RdxAvatarFallbackDirective implements RdxAvatarFallbackProps, OnInit, OnDestroy {\n    private readonly avatar = injectAvatar();\n\n    private readonly config = injectAvatarConfig();\n\n    private readonly ngZone = inject(NgZone);\n\n    private readonly platformId = inject(PLATFORM_ID);\n\n    /**\n     * Define a delay before the fallback is shown.\n     * This is useful to only show the fallback for those with slower connections.\n     * @default 0\n     */\n    @Input({ alias: 'rdxDelayMs', transform: numberAttribute }) delayMs: number = this.config.delayMs;\n\n    protected get visible(): boolean {\n        return this.delayElapsed && this.avatar._state() !== 'loaded';\n    }\n\n    /**\n     * Determine the delay has elapsed, and we can show the fallback.\n     */\n    private delayElapsed = false;\n\n    private timeoutId: ReturnType<typeof setTimeout> | null = null;\n\n    ngOnInit(): void {\n        if (isPlatformBrowser(this.platformId)) {\n            this.ngZone.runOutsideAngular(() => {\n                this.timeoutId = globalThis.setTimeout(() => {\n                    this.ngZone.run(() => {\n                        this.delayElapsed = true;\n                    });\n                }, this.delayMs);\n            });\n        }\n    }\n\n    ngOnDestroy(): void {\n        if (isPlatformBrowser(this.platformId) && this.timeoutId !== null) {\n            globalThis.clearTimeout(this.timeoutId);\n        }\n    }\n}\n","import { Directive, ElementRef, EventEmitter, inject, OnInit, Output } from '@angular/core';\nimport { injectAvatar, RdxImageLoadingStatus } from './avatar-root.directive';\n\nexport interface RdxAvatarImageProps {\n    onLoadingStatusChange?: EventEmitter<RdxImageLoadingStatus>;\n}\n\n@Directive({\n    selector: 'img[rdxAvatarImage]',\n    exportAs: 'rdxAvatarImage',\n    standalone: true,\n    host: {\n        '(load)': 'onLoad()',\n        '(error)': 'onError()'\n    }\n})\nexport class RdxAvatarImageDirective implements RdxAvatarImageProps, OnInit {\n    private readonly avatar = injectAvatar();\n\n    private readonly elementRef = inject<ElementRef<HTMLImageElement>>(ElementRef);\n\n    /**\n     * By default, it will only render when it has loaded.\n     * You can use the `onLoadingStatusChange` handler if you need more control.\n     */\n    @Output() onLoadingStatusChange = new EventEmitter<RdxImageLoadingStatus>();\n\n    ngOnInit(): void {\n        this.avatar._setState('loading');\n\n        if (!this.nativeElement.src) {\n            this.avatar._setState('error');\n        }\n\n        if (this.nativeElement.complete) {\n            this.avatar._setState('loaded');\n        }\n\n        this.onLoadingStatusChange.emit(this.avatar._state());\n    }\n\n    protected onLoad(): void {\n        this.avatar._setState('loaded');\n        this.onLoadingStatusChange.emit('loaded');\n    }\n\n    protected onError(): void {\n        this.avatar._setState('error');\n        this.onLoadingStatusChange.emit('error');\n    }\n\n    get nativeElement() {\n        return this.elementRef.nativeElement;\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,241 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, computed, Directive, EventEmitter, booleanAttribute, Input, Output } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+const RdxCheckboxToken = new InjectionToken('RdxCheckboxToken');
+function injectCheckbox() {
+    return inject(RdxCheckboxToken);
+}
+
+class RdxCheckboxButtonDirective {
+    constructor() {
+        this.checkbox = injectCheckbox();
+        this.id = input(null);
+        this.elementId = computed(() => (this.id() ? this.id() : `rdx-checkbox-${this.id()}`));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxCheckboxButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.1", type: RdxCheckboxButtonDirective, isStandalone: true, selector: "button[CheckboxButton]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button", "role": "checkbox", "tabindex": "-1" }, properties: { "checked": "checkbox.checked", "disabled": "checkbox.disabled", "required": "checkbox.required", "attr.id": "elementId()", "attr.aria-checked": "checkbox.indeterminate ? \"mixed\" : checkbox.checked", "attr.aria-required": "checkbox.required ? \"\" : null", "attr.data-state": "checkbox.state", "attr.data-disabled": "checkbox.disabled ? \"\" : null" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxCheckboxButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: 'button[CheckboxButton]',
+                    host: {
+                        type: 'button',
+                        role: 'checkbox',
+                        tabindex: '-1',
+                        '[checked]': 'checkbox.checked',
+                        '[disabled]': 'checkbox.disabled',
+                        '[required]': 'checkbox.required',
+                        '[attr.id]': 'elementId()',
+                        '[attr.aria-checked]': 'checkbox.indeterminate ? "mixed" : checkbox.checked',
+                        '[attr.aria-required]': 'checkbox.required ? "" : null',
+                        '[attr.data-state]': 'checkbox.state',
+                        '[attr.data-disabled]': 'checkbox.disabled ? "" : null'
+                    }
+                }]
+        }] });
+
+class RdxCheckboxIndicatorDirective {
+    constructor() {
+        this.checkbox = injectCheckbox();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxCheckboxIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: RdxCheckboxIndicatorDirective, isStandalone: true, selector: "[CheckboxIndicator]", host: { properties: { "style.pointer-events": "\"none\"", "attr.aria-checked": "checkbox.indeterminate ? \"mixed\" : checkbox.checked", "attr.data-state": "checkbox.state", "attr.data-disabled": "checkbox.disabled ? \"\" : null" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxCheckboxIndicatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[CheckboxIndicator]',
+                    standalone: true,
+                    host: {
+                        '[style.pointer-events]': '"none"',
+                        '[attr.aria-checked]': 'checkbox.indeterminate ? "mixed" : checkbox.checked',
+                        '[attr.data-state]': 'checkbox.state',
+                        '[attr.data-disabled]': 'checkbox.disabled ? "" : null'
+                    }
+                }]
+        }] });
+
+class RdxCheckboxInputDirective {
+    constructor() {
+        this.checkbox = injectCheckbox();
+        this.id = input();
+        this.elementId = computed(() => (this.id() ? this.id() : `rdx-checkbox-${this.id()}`));
+        this.value = computed(() => {
+            const state = this.checkbox.state;
+            if (state === 'indeterminate') {
+                return '';
+            }
+            return state ? 'on' : 'off';
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxCheckboxInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.1", type: RdxCheckboxInputDirective, isStandalone: true, selector: "input[CheckboxInput]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "checkbox", "tabindex": "-1" }, properties: { "checked": "checkbox.checked", "disabled": "checkbox.disabled", "required": "checkbox.required", "attr.id": "elementId()", "attr.aria-hidden": "true", "attr.aria-checked": "checkbox.indeterminate ? \"mixed\" : checkbox.checked", "attr.aria-required": "checkbox.required ? \"\" : null", "attr.data-state": "checkbox.state", "attr.data-disabled": "checkbox.disabled ? \"\" : null", "attr.value": "value()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxCheckboxInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: 'input[CheckboxInput]',
+                    host: {
+                        type: 'checkbox',
+                        tabindex: '-1',
+                        '[checked]': 'checkbox.checked',
+                        '[disabled]': 'checkbox.disabled',
+                        '[required]': 'checkbox.required',
+                        '[attr.id]': 'elementId()',
+                        '[attr.aria-hidden]': 'true',
+                        '[attr.aria-checked]': 'checkbox.indeterminate ? "mixed" : checkbox.checked',
+                        '[attr.aria-required]': 'checkbox.required ? "" : null',
+                        '[attr.data-state]': 'checkbox.state',
+                        '[attr.data-disabled]': 'checkbox.disabled ? "" : null',
+                        '[attr.value]': 'value()'
+                    }
+                }]
+        }] });
+
+class RdxCheckboxDirective {
+    constructor() {
+        /**
+         * The controlled checked state of the checkbox. Must be used in conjunction with onCheckedChange.
+         */
+        this.checked = false;
+        /**
+         * Defines whether the checkbox is indeterminate.
+         */
+        this.indeterminate = false;
+        /**
+         * Defines whether the checkbox is disabled.
+         */
+        this.disabled = false;
+        this.required = false;
+        /**
+         * Event emitted when the checkbox checked state changes.
+         */
+        this.checkedChange = new EventEmitter();
+        /**
+         * Event emitted when the indeterminate state changes.
+         */
+        this.indeterminateChange = new EventEmitter();
+    }
+    /**
+     * Determine the state
+     */
+    get state() {
+        if (this.indeterminate) {
+            return 'indeterminate';
+        }
+        return this.checked ? 'checked' : 'unchecked';
+    }
+    onKeyDown(event) {
+        // According to WAI ARIA, Checkboxes don't activate on enter keypress
+        if (event.key === 'Enter') {
+            event.preventDefault();
+        }
+    }
+    onClick($event) {
+        if (this.disabled) {
+            return;
+        }
+        this.checked = this.indeterminate ? true : !this.checked;
+        this.checkedChange.emit(this.checked);
+        this.onChange?.(this.checked);
+        if (this.indeterminate) {
+            this.indeterminate = false;
+            this.indeterminateChange.emit(this.indeterminate);
+        }
+        $event.preventDefault();
+    }
+    onBlur() {
+        this.onTouched?.();
+    }
+    ngOnChanges(changes) {
+        if (changes['checked'] && !changes['checked'].isFirstChange()) {
+            this.checkedChange.emit(this.checked);
+        }
+        if (changes['indeterminate'] && !changes['indeterminate'].isFirstChange()) {
+            this.indeterminateChange.emit(this.indeterminate);
+        }
+    }
+    /**
+     * Sets the checked state of the checkbox.
+     * @param checked The checked state of the checkbox.
+     * @internal
+     */
+    writeValue(checked) {
+        this.checked = checked;
+    }
+    /**
+     * Registers a callback function that should be called when the checkbox checked state changes.
+     * @param fn The callback function.
+     * @internal
+     */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /**
+     * Registers a callback function that should be called when the checkbox is blurred.
+     * @param fn The callback function.
+     * @internal
+     */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /**
+     * Sets the disabled state of the checkbox.
+     * @param isDisabled The disabled state of the checkbox.
+     * @internal
+     */
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxCheckboxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.1", type: RdxCheckboxDirective, isStandalone: true, selector: "[CheckboxRoot]", inputs: { checked: ["checked", "checked", booleanAttribute], indeterminate: ["indeterminate", "indeterminate", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute] }, outputs: { checkedChange: "checkedChange", indeterminateChange: "indeterminateChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "click": "onClick($event)", "blur": "onBlur()" }, properties: { "disabled": "disabled", "attr.data-disabled": "disabled ? \"\" : null", "attr.data-state": "state" } }, providers: [
+            { provide: RdxCheckboxToken, useExisting: RdxCheckboxDirective },
+            { provide: NG_VALUE_ACCESSOR, useExisting: RdxCheckboxDirective, multi: true }
+        ], usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxCheckboxDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[CheckboxRoot]',
+                    standalone: true,
+                    providers: [
+                        { provide: RdxCheckboxToken, useExisting: RdxCheckboxDirective },
+                        { provide: NG_VALUE_ACCESSOR, useExisting: RdxCheckboxDirective, multi: true }
+                    ],
+                    host: {
+                        '[disabled]': 'disabled',
+                        '[attr.data-disabled]': 'disabled ? "" : null',
+                        '[attr.data-state]': 'state',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(click)': 'onClick($event)',
+                        '(blur)': 'onBlur()'
+                    }
+                }]
+        }], propDecorators: { checked: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], indeterminate: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], required: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], checkedChange: [{
+                type: Output
+            }], indeterminateChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RdxCheckboxButtonDirective, RdxCheckboxDirective, RdxCheckboxIndicatorDirective, RdxCheckboxInputDirective, RdxCheckboxToken, injectCheckbox };
+//# sourceMappingURL=radix-ng-primitives-checkbox.mjs.map