@radix-ng/primitives 0.11.0 → 0.12.0

package/core/src/accessor/provide-value-accessor.ts

@@ -0,0 +1,20 @@
+import { Provider, Type } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+/**
+ * Include in the providers section of a component which utilizes ControlValueAccessor to redundant code.
+ *
+ * ```ts
+ * @Directive({
+ *   providers: [provideValueAccessor(ExampleDirective)]
+ *}
+ * export class ExampleDirective{}
+ * ```
+ */
+export function provideValueAccessor(type: Type<never>): Provider {
+    return {
+        provide: NG_VALUE_ACCESSOR,
+        useExisting: type,
+        multi: true
+    };
+}

package/core/src/auto-focus.directive.ts

@@ -0,0 +1,81 @@
+import { booleanAttribute, Directive, ElementRef, inject, Input, NgZone } from '@angular/core';
+
+/*
+ * <div [rdxAutoFocus]="true"></div>
+ */
+
+@Directive({
+    selector: '[rdxAutoFocus]',
+    standalone: true
+})
+export class RdxAutoFocusDirective {
+    #elementRef = inject(ElementRef);
+    #ngZone = inject(NgZone);
+
+    private _autoSelect = false;
+
+    /**
+     * @default false
+     */
+    @Input({ alias: 'rdxAutoFocus', transform: booleanAttribute })
+    set autoFocus(value: boolean) {
+        if (value) {
+            // Note: Running this outside Angular's zone because `element.focus()` does not trigger change detection.
+            this.#ngZone.runOutsideAngular(() =>
+                // Note: `element.focus()` causes re-layout which might lead to frame drops on slower devices.
+                // https://gist.github.com/paulirish/5d52fb081b3570c81e3a#setting-focus
+                // `setTimeout` is a macrotask executed within the current rendering frame.
+                // Animation tasks are executed in the next rendering frame.
+                reqAnimationFrame(() => {
+                    this.#elementRef.nativeElement.focus();
+                    if (this._autoSelect && this.#elementRef.nativeElement.select) {
+                        this.#elementRef.nativeElement.select();
+                    }
+                })
+            );
+        }
+    }
+
+    // Setter for autoSelect attribute to enable text selection when autoFocus is true.
+    @Input({ transform: booleanAttribute })
+    set autoSelect(value: boolean) {
+        this._autoSelect = value;
+    }
+}
+
+const availablePrefixes = ['moz', 'ms', 'webkit'];
+
+function requestAnimationFramePolyfill(): typeof requestAnimationFrame {
+    let lastTime = 0;
+
+    return function (callback: FrameRequestCallback): number {
+        const currTime = new Date().getTime();
+        const timeToCall = Math.max(0, 16 - (currTime - lastTime));
+
+        const id = setTimeout(() => {
+            callback(currTime + timeToCall);
+        }, timeToCall) as any;
+
+        lastTime = currTime + timeToCall;
+
+        return id;
+    };
+}
+
+// Function to get the appropriate requestAnimationFrame method with fallback to polyfill.
+function getRequestAnimationFrame(): typeof requestAnimationFrame {
+    if (typeof window === 'undefined') {
+        return () => 0;
+    }
+    if (window.requestAnimationFrame) {
+        // https://github.com/vuejs/vue/issues/4465
+        return window.requestAnimationFrame.bind(window);
+    }
+
+    const prefix = availablePrefixes.filter((key) => `${key}RequestAnimationFrame` in window)[0];
+
+    return prefix ? (window as any)[`${prefix}RequestAnimationFrame`] : requestAnimationFramePolyfill();
+}
+
+// Get the requestAnimationFrame function or its polyfill.
+const reqAnimationFrame = getRequestAnimationFrame();

package/core/src/inject-ng-control.ts

@@ -0,0 +1,28 @@
+import { inject } from '@angular/core';
+import { FormControlDirective, FormControlName, NgControl, NgModel } from '@angular/forms';
+
+export function injectNgControl(params: {
+    optional: true;
+}): FormControlDirective | FormControlName | NgModel | undefined;
+export function injectNgControl(params: { optional: false }): FormControlDirective | FormControlName | NgModel;
+export function injectNgControl(): FormControlDirective | FormControlName | NgModel;
+
+export function injectNgControl(params?: { optional: true } | { optional: false }) {
+    const ngControl = inject(NgControl, { self: true, optional: true });
+
+    if (!params?.optional && !ngControl) throw new Error('NgControl not found');
+
+    if (
+        ngControl instanceof FormControlDirective ||
+        ngControl instanceof FormControlName ||
+        ngControl instanceof NgModel
+    ) {
+        return ngControl;
+    }
+
+    if (params?.optional) {
+        return undefined;
+    }
+
+    throw new Error('NgControl is not an instance of FormControlDirective, FormControlName or NgModel');
+}

package/core/src/mount.ts

@@ -0,0 +1,27 @@
+import { AfterViewInit, Directive } from '@angular/core';
+
+const callAll =
+    <T extends (...a: never[]) => void>(...fns: (T | undefined)[]) =>
+    (...a: Parameters<T>) => {
+        fns.forEach(function (fn) {
+            fn?.(...a);
+        });
+    };
+
+@Directive({
+    standalone: true
+})
+export class OnMountDirective implements AfterViewInit {
+    #onMountFns?: () => void;
+
+    onMount(fn: () => void) {
+        this.#onMountFns = callAll(this.#onMountFns, fn);
+    }
+
+    ngAfterViewInit() {
+        if (!this.#onMountFns) {
+            throw new Error('The onMount function must be called before the component is mounted.');
+        }
+        this.#onMountFns();
+    }
+}

package/dialog/README.md

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

package/dialog/__tests__/dialog-content.directive.spec.ts

@@ -0,0 +1,77 @@
+import { Component, DebugElement } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { Subject } from 'rxjs';
+import { RdxDialogContentDirective } from '../src/dialog-content.directive';
+import { RdxDialogRef } from '../src/dialog-ref';
+
+@Component({
+    template: '<div rdxDialogContent>Dialog Content</div>'
+})
+class TestComponent {}
+
+describe('RdxDialogContentDirective', () => {
+    let fixture: ComponentFixture<TestComponent>;
+    let directiveElement: DebugElement;
+    let directive: RdxDialogContentDirective;
+    let dialogRefMock: jest.Mocked<RdxDialogRef>;
+    let closedSubject: Subject<any>;
+
+    beforeEach(async () => {
+        closedSubject = new Subject();
+        dialogRefMock = {
+            closed$: closedSubject.asObservable(),
+            close: jest.fn(),
+            dismiss: jest.fn()
+        } as any;
+
+        await TestBed.configureTestingModule({
+            declarations: [TestComponent],
+            imports: [RdxDialogContentDirective],
+            providers: [
+                { provide: RdxDialogRef, useValue: dialogRefMock }]
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(TestComponent);
+        directiveElement = fixture.debugElement.query(By.directive(RdxDialogContentDirective));
+        directive = directiveElement.injector.get(RdxDialogContentDirective);
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(directive).toBeTruthy();
+    });
+
+    it('should have correct initial state', () => {
+        expect(directive['state']()).toBe('open');
+    });
+
+    it('should update state when dialog is closed', () => {
+        closedSubject.next(undefined);
+        fixture.detectChanges();
+        expect(directive['state']()).toBe('closed');
+    });
+
+    it('should call dialogRef.dismiss when dismiss method is called', () => {
+        directive.dismiss();
+        expect(dialogRefMock.dismiss).toHaveBeenCalled();
+    });
+
+    it('should call dialogRef.dismiss when dismiss method is called', () => {
+        directive.dismiss();
+        expect(dialogRefMock.dismiss).toHaveBeenCalled();
+    });
+
+    it('should have correct host bindings', () => {
+        const element = directiveElement.nativeElement;
+        expect(element.getAttribute('role')).toBe('dialog');
+        expect(element.getAttribute('aria-describedby')).toBe('true');
+        expect(element.getAttribute('aria-labelledby')).toBe('true');
+        expect(element.getAttribute('data-state')).toBe('open');
+
+        closedSubject.next(undefined);
+        fixture.detectChanges();
+
+        expect(element.getAttribute('data-state')).toBe('closed');
+    });
+});

package/dialog/__tests__/dialog-trigger.directive.spec.ts

@@ -0,0 +1,85 @@
+import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { of } from 'rxjs';
+import { RdxDialogRef } from '../src/dialog-ref';
+import { RdxDialogTriggerDirective } from '../src/dialog-trigger.directive';
+import { RdxDialogConfig } from '../src/dialog.config';
+import { RdxDialogService } from '../src/dialog.service';
+
+@Component({
+    template: `
+        <button [rdxDialogTrigger]="dialogTemplate" [rdxDialogConfig]="config">Open Dialog</button>
+        <ng-template #dialogTemplate>Dialog Content</ng-template>
+    `
+})
+class TestHostComponent implements OnInit {
+    @ViewChild('dialogTemplate') dialogTemplate: TemplateRef<any>;
+
+    config: RdxDialogConfig<unknown>;
+
+    ngOnInit() {
+        this.config = {
+            content: this.dialogTemplate,
+            modal: true,
+            ariaLabel: 'Test Dialog',
+            autoFocus: 'first-tabbable',
+            canClose: () => true,
+            canCloseWithBackdrop: true,
+            mode: 'default'
+        };
+    }
+}
+
+describe('RdxDialogTriggerDirective', () => {
+    let fixture: ComponentFixture<TestHostComponent>;
+    let directive: RdxDialogTriggerDirective;
+    let dialogServiceMock: jest.Mocked<RdxDialogService>;
+    let dialogRefMock: jest.Mocked<RdxDialogRef>;
+
+    beforeEach(async () => {
+        dialogRefMock = {
+            closed$: of(undefined)
+        } as any;
+
+        dialogServiceMock = {
+            open: jest.fn().mockReturnValue(dialogRefMock)
+        } as any;
+
+        await TestBed.configureTestingModule({
+            declarations: [TestHostComponent],
+            imports: [RdxDialogTriggerDirective],
+            providers: [
+                { provide: RdxDialogService, useValue: dialogServiceMock }]
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(TestHostComponent);
+        fixture.detectChanges();
+
+        const directiveEl = fixture.debugElement.query(By.directive(RdxDialogTriggerDirective));
+        directive = directiveEl.injector.get(RdxDialogTriggerDirective);
+    });
+
+    it('should create', () => {
+        expect(directive).toBeTruthy();
+    });
+
+    it('should have correct initial state', () => {
+        expect(directive.isOpen()).toBe(false);
+        expect(directive.state()).toBe('closed');
+    });
+
+    it('should have correct aria attributes', () => {
+        const button = fixture.debugElement.query(By.css('button'));
+        expect(button.nativeElement.getAttribute('aria-haspopup')).toBe('dialog');
+        expect(button.nativeElement.getAttribute('aria-expanded')).toBe('false');
+        expect(button.nativeElement.getAttribute('data-state')).toBe('closed');
+
+        button.nativeElement.click();
+
+        fixture.detectChanges();
+
+        expect(button.nativeElement.getAttribute('aria-expanded')).toBe('true');
+        expect(button.nativeElement.getAttribute('data-state')).toBe('open');
+    });
+});

package/dialog/index.ts

@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { RdxDialogCloseDirective } from './src/dialog-close.directive';
+import { RdxDialogContentDirective } from './src/dialog-content.directive';
+import { RdxDialogDescriptionDirective } from './src/dialog-description.directive';
+import { RdxDialogDismissDirective } from './src/dialog-dismiss.directive';
+import { RdxDialogTitleDirective } from './src/dialog-title.directive';
+import { RdxDialogTriggerDirective } from './src/dialog-trigger.directive';
+
+export * from './src/dialog-close.directive';
+export * from './src/dialog-content.directive';
+export * from './src/dialog-description.directive';
+export * from './src/dialog-dismiss.directive';
+export * from './src/dialog-ref';
+export * from './src/dialog-title.directive';
+export * from './src/dialog-trigger.directive';
+export * from './src/dialog.config';
+export * from './src/dialog.injectors';
+export * from './src/dialog.providers';
+export * from './src/dialog.service';
+
+const dialogImports = [
+    RdxDialogTriggerDirective,
+    RdxDialogContentDirective,
+    RdxDialogTitleDirective,
+    RdxDialogCloseDirective,
+    RdxDialogDescriptionDirective,
+    RdxDialogDismissDirective
+];
+
+@NgModule({ imports: [...dialogImports], exports: [...dialogImports] })
+export class RdxDialogModule {}

package/dialog/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "index.ts"
+    }
+}

package/dialog/src/dialog-close.directive.ts

@@ -0,0 +1,18 @@
+import { Directive, inject } from '@angular/core';
+import { RdxDialogRef } from './dialog-ref';
+
+@Directive({
+    selector: 'button[rdxDialogClose]',
+    standalone: true,
+    host: {
+        type: 'button',
+        '(click)': 'onClick()'
+    }
+})
+export class RdxDialogCloseDirective {
+    private readonly ref = inject<RdxDialogRef>(RdxDialogRef);
+
+    protected onClick(): void {
+        this.ref.close();
+    }
+}

package/dialog/src/dialog-content.directive.ts

@@ -0,0 +1,45 @@
+import { computed, DestroyRef, Directive, inject, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { RdxDialogRef } from './dialog-ref';
+import { getState, RdxDialogResult } from './dialog.config';
+
+@Directive({
+    selector: '[rdxDialogContent]',
+    standalone: true,
+    host: {
+        role: 'dialog',
+        '[attr.aria-describedby]': '"true"',
+        '[attr.aria-labelledby]': '"true"',
+        '[attr.data-state]': 'state()'
+    }
+})
+export class RdxDialogContentDirective<C = unknown> {
+    private readonly dialogRef = inject<RdxDialogRef<C>>(RdxDialogRef);
+    private readonly destroyRef = inject(DestroyRef);
+
+    private readonly isOpen = signal(true);
+
+    readonly state = computed(() => getState(this.isOpen()));
+
+    constructor() {
+        this.dialogRef.closed$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this.isOpen.set(false);
+        });
+    }
+
+    /**
+     * Closes the dialog with a specified result.
+     *
+     * @param result The result to be passed back when closing the dialog
+     */
+    close(result: RdxDialogResult<C>): void {
+        this.dialogRef.close(result);
+    }
+
+    /**
+     * Dismisses the dialog without a result.
+     */
+    dismiss(): void {
+        this.dialogRef.dismiss();
+    }
+}

package/dialog/src/dialog-description.directive.ts

@@ -0,0 +1,7 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+    selector: '[rdxDialogDescription]',
+    standalone: true
+})
+export class RdxDialogDescriptionDirective {}

package/dialog/src/dialog-dismiss.directive.ts

@@ -0,0 +1,18 @@
+import { Directive, inject } from '@angular/core';
+import { RdxDialogRef } from './dialog-ref';
+
+@Directive({
+    selector: 'button[rdxDialogDismiss]',
+    standalone: true,
+    host: {
+        type: 'button',
+        '(click)': 'onClick()'
+    }
+})
+export class RdxDialogDismissDirective {
+    private readonly ref = inject<RdxDialogRef>(RdxDialogRef);
+
+    protected onClick(): void {
+        this.ref.dismiss();
+    }
+}

package/dialog/src/dialog-ref.ts

@@ -0,0 +1,70 @@
+import { DialogRef } from '@angular/cdk/dialog';
+import { filter, isObservable, map, Observable, of, take } from 'rxjs';
+import { RdxDialogConfig, RdxDialogResult } from './dialog.config';
+
+export const DISMISSED_VALUE = {} as const;
+
+function isDismissed(v: unknown): v is typeof DISMISSED_VALUE {
+    return v === DISMISSED_VALUE;
+}
+
+/**
+ * Represents a reference to an open dialog.
+ * Provides methods and observables to interact with and monitor the dialog's state.
+ * @template C - The type of the dialog's content component
+ */
+export class RdxDialogRef<C = unknown> {
+    closed$: Observable<RdxDialogResult<C> | undefined> = this.cdkRef.closed.pipe(
+        map((res): RdxDialogResult<C> | undefined => (isDismissed(res) ? undefined : res))
+    );
+
+    dismissed$: Observable<void> = this.cdkRef.closed.pipe(
+        filter((res) => res === DISMISSED_VALUE),
+        map((): void => undefined)
+    );
+
+    result$: Observable<RdxDialogResult<C>> = this.cdkRef.closed.pipe(
+        filter((res): res is RdxDialogResult<C> => !isDismissed(res))
+    );
+
+    /**
+     * @param cdkRef - Reference to the underlying CDK dialog
+     * @param config - Configuration options for the dialog
+     */
+    constructor(
+        public readonly cdkRef: DialogRef<RdxDialogResult<C> | typeof DISMISSED_VALUE, C>,
+        public readonly config: RdxDialogConfig<C>
+    ) {}
+
+    get instance(): C | null {
+        return this.cdkRef.componentInstance;
+    }
+
+    /**
+     * Attempts to dismiss the dialog
+     * Checks the canClose condition before dismissing
+     */
+    dismiss(): void {
+        if (!this.instance) {
+            return;
+        }
+        const canClose = this.config.canClose?.(this.instance) ?? true;
+        const canClose$ = isObservable(canClose) ? canClose : of(canClose);
+        canClose$.pipe(take(1)).subscribe((close) => {
+            if (close) {
+                this.cdkRef.close(DISMISSED_VALUE);
+            }
+        });
+    }
+
+    close(result: RdxDialogResult<C>): void {
+        this.cdkRef.close(result);
+    }
+}
+
+/**
+ * Represents a simplified interface for dialog interaction
+ * Typically used by dialog content components
+ * @template R - The type of the result when closing the dialog
+ */
+export type RdxDialogSelfRef<R> = { dismiss(): void; close(res: R): void };

package/dialog/src/dialog-title.directive.ts

@@ -0,0 +1,7 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+    selector: '[rdxDialogTitle]',
+    standalone: true
+})
+export class RdxDialogTitleDirective {}

package/dialog/src/dialog-trigger.directive.ts

@@ -0,0 +1,52 @@
+import { computed, Directive, inject, Input, input, signal, TemplateRef } from '@angular/core';
+import { RdxDialogRef } from './dialog-ref';
+import { getState, RdxDialogConfig, RdxDialogState } from './dialog.config';
+import { provideRdxDialog } from './dialog.providers';
+import { RdxDialogService } from './dialog.service';
+
+let nextId = 0;
+
+// Primitive.button
+@Directive({
+    selector: '[rdxDialogTrigger]',
+    standalone: true,
+    providers: [provideRdxDialog()],
+    host: {
+        type: 'button',
+        '[attr.id]': 'id()',
+        '[attr.aria-haspopup]': '"dialog"',
+        '[attr.aria-expanded]': 'isOpen()',
+        '[attr.aria-controls]': 'dialogId()',
+        '[attr.data-state]': 'state()',
+        '(click)': 'onClick()'
+    }
+})
+export class RdxDialogTriggerDirective {
+    private readonly dialogService = inject(RdxDialogService);
+
+    readonly id = input(`rdx-dialog-trigger-${nextId++}`);
+    readonly dialogId = computed(() => `rdx-dialog-${this.id()}`);
+
+    @Input({ required: true, alias: 'rdxDialogTrigger' }) dialog: TemplateRef<void>;
+
+    @Input({ alias: 'rdxDialogConfig' }) dialogConfig: RdxDialogConfig<unknown>;
+
+    readonly isOpen = signal(false);
+    readonly state = computed<RdxDialogState>(() => getState(this.isOpen()));
+
+    private currentDialogRef: RdxDialogRef | null = null;
+
+    protected onClick() {
+        this.currentDialogRef = this.dialogService.open({
+            ...this.dialogConfig,
+            content: this.dialog
+        });
+
+        this.isOpen.set(true);
+
+        this.currentDialogRef.closed$.subscribe(() => {
+            this.isOpen.set(false);
+            this.currentDialogRef = null;
+        });
+    }
+}

package/dialog/src/dialog.config.ts

@@ -0,0 +1,55 @@
+import { AutoFocusTarget, DialogConfig } from '@angular/cdk/dialog';
+import { ComponentType } from '@angular/cdk/overlay';
+import { TemplateRef } from '@angular/core';
+import { Observable } from 'rxjs';
+
+const ɵdialogData = Symbol.for('rdxDialogData');
+const ɵdialogResult = Symbol.for('rdxDialogResult');
+
+export type ɵDialogDataFlag = { [ɵdialogData]: unknown };
+export type ɵDialogResultFlag<R> = { [ɵdialogResult]: R };
+
+export type RdxDialogData<T> = {
+    [K in keyof T]: T[K] extends ɵDialogDataFlag ? Omit<T[K], typeof ɵdialogData> : never;
+}[keyof T];
+
+type DialogRefProps<C> = { [K in keyof C]: C[K] extends ɵDialogResultFlag<unknown> ? K : never }[keyof C] & keyof C;
+export type RdxDialogResult<C> =
+    DialogRefProps<C> extends never ? void : C[DialogRefProps<C>] extends ɵDialogResultFlag<infer T> ? T : void;
+
+type RdxDialogMode = 'default' | 'drawer' | 'drawer-bottom';
+
+type RdxBaseDialogConfig<C> = {
+    content: ComponentType<C> | TemplateRef<C>;
+
+    data: RdxDialogData<C>;
+
+    modal?: boolean;
+
+    ariaLabel?: string;
+
+    autoFocus?: AutoFocusTarget | 'first-input' | string;
+
+    canClose?: (comp: C) => boolean | Observable<boolean>;
+
+    canCloseWithBackdrop?: boolean;
+
+    cdkConfigOverride?: Partial<DialogConfig<C>>;
+
+    mode?: RdxDialogMode;
+
+    backdropClass?: string;
+
+    panelClasses?: string[];
+};
+
+export type RdxDialogConfig<T> =
+    RdxDialogData<T> extends never
+        ? Omit<RdxBaseDialogConfig<T>, 'data'>
+        : RdxBaseDialogConfig<T> & { data: Required<RdxDialogData<T>> };
+
+export type RdxDialogState = 'open' | 'closed';
+
+export function getState(open: boolean): RdxDialogState {
+    return open ? 'open' : 'closed';
+}

package/dialog/src/dialog.injectors.ts

@@ -0,0 +1,12 @@
+import { DIALOG_DATA } from '@angular/cdk/dialog';
+import { inject } from '@angular/core';
+import { RdxDialogRef, RdxDialogSelfRef } from './dialog-ref';
+import { ɵDialogDataFlag, ɵDialogResultFlag } from './dialog.config';
+
+export function injectDialogData<TData>(): TData & ɵDialogDataFlag {
+    return inject<TData & ɵDialogDataFlag>(DIALOG_DATA);
+}
+
+export function injectDialogRef<R = void>(): RdxDialogSelfRef<R> & ɵDialogResultFlag<R> {
+    return inject<RdxDialogSelfRef<R>>(RdxDialogRef) as RdxDialogSelfRef<R> & ɵDialogResultFlag<R>;
+}