@radix-ng/primitives 0.11.0 → 0.12.0

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

@@ -0,0 +1,24 @@
+import { CdkTrapFocus } from '@angular/cdk/a11y';
+import { Directive, ElementRef, inject, Input, Renderer2 } from '@angular/core';
+
+@Directive({
+    selector: '[rdxAlertDialogContent]',
+    hostDirectives: [
+        {
+            directive: CdkTrapFocus
+        }
+    ],
+    standalone: true,
+    host: {
+        '[attr.data-state]': 'open',
+        '[attr.cdkTrapFocusAutoCapture]': 'true'
+    }
+})
+export class AlertDialogContentDirective {
+    private readonly renderer = inject(Renderer2);
+    private readonly elementRef = inject(ElementRef);
+
+    @Input() set maxWidth(value: string) {
+        this.renderer.setStyle(this.elementRef.nativeElement, 'maxWidth', value);
+    }
+}

package/alert-dialog/src/alert-dialog-root.directive.ts

@@ -0,0 +1,15 @@
+import { Directive, inject, Input, TemplateRef, ViewContainerRef } from '@angular/core';
+import { AlertDialogService } from './alert-dialog.service';
+
+@Directive({
+    selector: '[rdxAlertDialogRoot]',
+    standalone: true
+})
+export class AlertDialogRootDirective {
+    private readonly viewContainerRef = inject(ViewContainerRef);
+    private readonly alertDialogService = inject(AlertDialogService);
+
+    @Input() set content(template: TemplateRef<any>) {
+        this.alertDialogService.setDialogContent(this.viewContainerRef, template);
+    }
+}

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

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

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

@@ -0,0 +1,17 @@
+import { Directive, inject } from '@angular/core';
+import { AlertDialogService } from './alert-dialog.service';
+
+@Directive({
+    selector: '[rdxAlertDialogTrigger]',
+    standalone: true,
+    host: {
+        '(click)': 'handleClick()'
+    }
+})
+export class AlertDialogTriggerDirective {
+    private readonly alertDialogService = inject(AlertDialogService);
+
+    handleClick() {
+        this.alertDialogService.open();
+    }
+}

package/alert-dialog/src/alert-dialog.service.ts

@@ -0,0 +1,51 @@
+import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { Injectable, TemplateRef, ViewContainerRef } from '@angular/core';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AlertDialogService {
+    private overlayRef: OverlayRef | null | undefined;
+    private dialogContent:
+        | {
+              viewContainerRef: ViewContainerRef;
+              template: TemplateRef<any>;
+          }
+        | undefined;
+
+    constructor(private overlay: Overlay) {}
+
+    setDialogContent(viewContainerRef: ViewContainerRef, template: TemplateRef<any>) {
+        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;
+        }
+    }
+}

package/alert-dialog/stories/alert-dialog.stories.ts

@@ -0,0 +1,139 @@
+import { OverlayModule } from '@angular/cdk/overlay';
+import { PortalModule } from '@angular/cdk/portal';
+import { componentWrapperDecorator, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { AlertDialogCancelDirective } from '../src/alert-dialog-cancel.directive';
+import { AlertDialogContentDirective } from '../src/alert-dialog-content.directive';
+import { AlertDialogRootDirective } from '../src/alert-dialog-root.directive';
+import { AlertDialogTitleDirective } from '../src/alert-dialog-title.directive';
+import { AlertDialogTriggerDirective } from '../src/alert-dialog-trigger.directive';
+import { AlertDialogService } from '../src/alert-dialog.service';
+
+export default {
+    title: 'Primitives/Alert Dialog',
+    decorators: [
+        moduleMetadata({
+            imports: [
+                AlertDialogContentDirective,
+                AlertDialogRootDirective,
+                AlertDialogTitleDirective,
+                AlertDialogTriggerDirective,
+                AlertDialogCancelDirective,
+                OverlayModule,
+                PortalModule
+            ],
+            providers: [AlertDialogService]
+        }),
+        componentWrapperDecorator(
+            (story) =>
+                `
+                    <div class="radix-themes light light-theme"
+                      data-radius="medium"
+                      data-scaling="100%">${story}</div>`
+        )
+    ]
+} as Meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+    render: (args) => ({
+        props: args,
+        template: `
+
+<div rdxAlertDialogRoot [content]="alertDialogContent">
+    <button rdxAlertDialogTrigger class="Button violet">Delete account</button>
+    <ng-template #alertDialogContent>
+        <div rdxAlertDialogContent maxWidth="450" class="AlertDialogContent">
+            <h2 rdxAlertDialogTitle class="AlertDialogTitle">Are you absolutely sure?</h2>
+            <p class="AlertDialogDescription">
+               This action cannot be undone. This will permanently delete your account and remove your data from our servers.
+            </p>
+            <div style="display: flex; gap: 3px; margin-top: 4px; justify-content: flex-end;">
+                <button rdxAlertDialogCancel class="Button mauve">Cancel</button>
+                <button class="Button red">Revoke access</button>
+            </div>
+        </div>
+    </ng-template>
+</div>
+
+<style>
+
+.AlertDialogContent {
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.AlertDialogTitle {
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+}
+
+.AlertDialogDescription {
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+button {
+  all: unset;
+}
+Button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+}
+.Button.violet {
+  background-color: white;
+  color: var(--violet-11);
+  box-shadow: 0 2px 10px var(--black-a7);
+}
+.Button.violet:hover {
+  background-color: var(--mauve-3);
+}
+.Button.violet:focus {
+  box-shadow: 0 0 0 2px black;
+}
+.Button.red {
+  background-color: var(--red-4);
+  color: var(--red-11);
+}
+.Button.red:hover {
+  background-color: var(--red-5);
+}
+.Button.red:focus {
+  box-shadow: 0 0 0 2px var(--red-7);
+}
+.Button.mauve {
+  background-color: var(--mauve-4);
+  color: var(--mauve-11);
+}
+.Button.mauve:hover {
+  background-color: var(--mauve-5);
+}
+.Button.mauve:focus {
+  box-shadow: 0 0 0 2px var(--mauve-7);
+}
+</style>
+
+`
+    })
+};

package/avatar/__tests__/avatar-fallback.directive.spec.ts

@@ -0,0 +1,31 @@
+import { Component, PLATFORM_ID } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RdxAvatarFallbackDirective } from '../src/avatar-fallback.directive';
+import { RdxAvatarRootDirective } from '../src/avatar-root.directive';
+
+@Component({
+    selector: 'rdx-mock-component',
+    standalone: true,
+    imports: [RdxAvatarFallbackDirective, RdxAvatarRootDirective],
+    template: `
+        <span rdxAvatarRoot>
+            <span rdxAvatarFallback>fallback</span>
+            <span rdxAvatarFallback>fallback2</span>
+        </span>
+    `
+})
+class RdxMockComponent {}
+
+describe('RdxAvatarFallbackDirective', () => {
+    let component: RdxMockComponent;
+    let fixture: ComponentFixture<RdxMockComponent>;
+
+    beforeEach(() => {
+        fixture = TestBed.overrideProvider(PLATFORM_ID, { useValue: 'browser' }).createComponent(RdxMockComponent);
+        component = fixture.componentInstance;
+    });
+
+    it('should compile', () => {
+        expect(component).toBeTruthy();
+    });
+});

package/avatar/__tests__/avatar-image.directive.spec.ts

@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RdxAvatarFallbackDirective } from '../src/avatar-fallback.directive';
+import { RdxAvatarImageDirective } from '../src/avatar-image.directive';
+import { RdxAvatarRootDirective } from '../src/avatar-root.directive';
+
+@Component({
+    selector: 'rdx-mock-component',
+    standalone: true,
+    imports: [RdxAvatarImageDirective, RdxAvatarRootDirective, RdxAvatarFallbackDirective],
+    template: `
+        <span rdxAvatarRoot>
+            <img
+                rdxAvatarImage
+                alt="Angular Logo"
+                src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
+            />
+            <span rdxAvatarFallback>Angular Logo</span>
+        </span>
+    `
+})
+class RdxMockComponent {}
+
+describe('RdxAvatarImageDirective', () => {
+    let component: RdxMockComponent;
+    let fixture: ComponentFixture<RdxMockComponent>;
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(RdxMockComponent);
+        component = fixture.componentInstance;
+    });
+
+    it('should compile', () => {
+        expect(component).toBeTruthy();
+    });
+});

package/avatar/ng-package.json

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

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

@@ -0,0 +1,62 @@
+import { isPlatformBrowser } from '@angular/common';
+import { Directive, inject, Input, NgZone, numberAttribute, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
+import { injectAvatar } from './avatar-root.directive';
+import { injectAvatarConfig } from './avatar.config';
+
+export interface RdxAvatarFallbackProps {
+    delayMs?: number;
+}
+
+@Directive({
+    selector: 'span[rdxAvatarFallback]',
+    exportAs: 'rdxAvatarFallback',
+    standalone: true,
+    host: {
+        '[style.display]': 'visible ? null : "none"'
+    }
+})
+export class RdxAvatarFallbackDirective implements RdxAvatarFallbackProps, OnInit, OnDestroy {
+    private readonly avatar = injectAvatar();
+
+    private readonly config = injectAvatarConfig();
+
+    private readonly ngZone = inject(NgZone);
+
+    private readonly 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
+     */
+    @Input({ alias: 'rdxDelayMs', transform: numberAttribute }) delayMs: number = this.config.delayMs;
+
+    protected get visible(): boolean {
+        return this.delayElapsed && this.avatar._state() !== 'loaded';
+    }
+
+    /**
+     * Determine the delay has elapsed, and we can show the fallback.
+     */
+    private delayElapsed = false;
+
+    private timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+    ngOnInit(): void {
+        if (isPlatformBrowser(this.platformId)) {
+            this.ngZone.runOutsideAngular(() => {
+                this.timeoutId = globalThis.setTimeout(() => {
+                    this.ngZone.run(() => {
+                        this.delayElapsed = true;
+                    });
+                }, this.delayMs);
+            });
+        }
+    }
+
+    ngOnDestroy(): void {
+        if (isPlatformBrowser(this.platformId) && this.timeoutId !== null) {
+            globalThis.clearTimeout(this.timeoutId);
+        }
+    }
+}

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

@@ -0,0 +1,55 @@
+import { Directive, ElementRef, EventEmitter, inject, OnInit, Output } from '@angular/core';
+import { injectAvatar, RdxImageLoadingStatus } from './avatar-root.directive';
+
+export interface RdxAvatarImageProps {
+    onLoadingStatusChange?: EventEmitter<RdxImageLoadingStatus>;
+}
+
+@Directive({
+    selector: 'img[rdxAvatarImage]',
+    exportAs: 'rdxAvatarImage',
+    standalone: true,
+    host: {
+        '(load)': 'onLoad()',
+        '(error)': 'onError()'
+    }
+})
+export class RdxAvatarImageDirective implements RdxAvatarImageProps, OnInit {
+    private readonly avatar = injectAvatar();
+
+    private readonly elementRef = inject<ElementRef<HTMLImageElement>>(ElementRef);
+
+    /**
+     * By default, it will only render when it has loaded.
+     * You can use the `onLoadingStatusChange` handler if you need more control.
+     */
+    @Output() onLoadingStatusChange = new EventEmitter<RdxImageLoadingStatus>();
+
+    ngOnInit(): void {
+        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());
+    }
+
+    protected onLoad(): void {
+        this.avatar._setState('loaded');
+        this.onLoadingStatusChange.emit('loaded');
+    }
+
+    protected onError(): void {
+        this.avatar._setState('error');
+        this.onLoadingStatusChange.emit('error');
+    }
+
+    get nativeElement() {
+        return this.elementRef.nativeElement;
+    }
+}

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

@@ -0,0 +1,35 @@
+import { Directive, inject, InjectionToken, signal } from '@angular/core';
+
+const RdxAvatarToken = new InjectionToken<RdxAvatarRootDirective>('RdxAvatarToken');
+
+export function injectAvatar(): RdxAvatarRootDirective {
+    return inject(RdxAvatarToken);
+}
+
+export type RdxImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
+
+@Directive({
+    selector: 'span[rdxAvatarRoot]',
+    exportAs: 'rdxAvatarRoot',
+    standalone: true,
+    providers: [{ provide: RdxAvatarToken, useExisting: RdxAvatarRootDirective }]
+})
+export class RdxAvatarRootDirective {
+    /**
+     * 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
+     */
+    readonly _state = signal<RdxImageLoadingStatus>('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: RdxImageLoadingStatus): void {
+        this._state.set(state);
+    }
+}

package/avatar/src/avatar.config.ts

@@ -0,0 +1,29 @@
+import { inject, InjectionToken, Provider } from '@angular/core';
+
+export interface RdxAvatarConfig {
+    /**
+     * Define a delay before the fallback is shown.
+     * This is useful to only show the fallback for those with slower connections.
+     * @default 0
+     */
+    delayMs: number;
+}
+
+export const defaultAvatarConfig: RdxAvatarConfig = {
+    delayMs: 0
+};
+
+export const RdxAvatarConfigToken = new InjectionToken<RdxAvatarConfig>('RdxAvatarConfigToken');
+
+export function provideRdxAvatarConfig(config: Partial<RdxAvatarConfig>): Provider[] {
+    return [
+        {
+            provide: RdxAvatarConfigToken,
+            useValue: { ...defaultAvatarConfig, ...config }
+        }
+    ];
+}
+
+export function injectAvatarConfig(): RdxAvatarConfig {
+    return inject(RdxAvatarConfigToken, { optional: true }) ?? defaultAvatarConfig;
+}

package/avatar/stories/avatar.docs.mdx

@@ -0,0 +1,37 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as AvatarDirectiveStories from './avatar.stories';
+
+<Meta title="Primitives/Avatar" />
+
+# Avatar
+
+#### An image element with a fallback for representing the user.
+
+<Canvas sourceState="hidden" of={AvatarDirectiveStories.Default} />
+
+## Features
+
+- ✅ Automatic and manual control over when the image renders.
+- ✅ Fallback part accepts any children.
+- ✅ Optionally delayMs fallback rendering to avoid content flashing.
+
+## Global Configuration
+
+You can configure the default options for all avatars in your application by using the `provideRdxAvatarConfig` function in a providers array.
+
+```ts
+import { provideRdxAvatarConfig } from '@radix-ng/primitives/avatar';
+
+bootstrapApplication(AppComponent, {
+  providers: [provideRdxAvatarConfig({ delayMs: 1000 })]
+});
+```
+
+## Anatomy
+
+```html
+<span rdxAvatarRoot>
+  <img rdxAvatarImage src="..." alt="..." />
+  <span rdxAvatarFallback>Angular</span>
+</span>
+```

package/avatar/stories/avatar.stories.ts

@@ -0,0 +1,87 @@
+import { componentWrapperDecorator, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { RdxAvatarFallbackDirective } from '../src/avatar-fallback.directive';
+import { RdxAvatarImageDirective } from '../src/avatar-image.directive';
+import { RdxAvatarRootDirective } from '../src/avatar-root.directive';
+
+export default {
+    title: 'Primitives/Avatar',
+    decorators: [
+        moduleMetadata({
+            imports: [RdxAvatarRootDirective, RdxAvatarImageDirective, RdxAvatarFallbackDirective]
+        }),
+        componentWrapperDecorator(
+            (story) =>
+                `<div class="radix-themes light light-theme radix-themes-default-fonts"
+                      data-accent-color="indigo"
+                      data-radius="medium"
+                      data-scaling="100%">${story}</div>`
+        )
+    ]
+} as Meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+    render: () => ({
+        template: `
+<div style=" display: flex; gap: 20px">
+    <span rdxAvatarRoot class="AvatarRoot">
+      <img rdxAvatarImage
+            src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
+            alt="Colm Tuite"
+            class="AvatarImage" />
+      <span rdxAvatarFallback class="AvatarFallback" rdxDelayMs="600">CT</span>
+    </span>
+
+    <span rdxAvatarRoot class="AvatarRoot">
+          <img rdxAvatarImage
+            class="AvatarImage"
+            src="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80"
+            alt="Pedro Duarte"
+          />
+          <span rdxAvatarFallback class="AvatarFallback" rdxDelayMs="600">
+            JD
+          </span>
+        </span>
+    <span rdxAvatarRoot class="AvatarRoot">
+      <span rdxAvatarFallback class="AvatarFallback">PD</span>
+    </span>
+</div>
+<style>
+.AvatarRoot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  overflow: hidden;
+  user-select: none;
+  width: 45px;
+  height: 45px;
+  border-radius: 100%;
+  background-color: var(--black-a3);
+}
+
+.AvatarImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}
+
+.AvatarFallback {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: white;
+  color: var(--violet-11);
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+}
+
+</style>
+`
+    })
+};