@radix-ng/primitives 0.12.1 → 0.13.0

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

@@ -1,36 +0,0 @@
-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

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

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

@@ -1,62 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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>
-`
-    })
-};

package/button/src/button-abstract.directive.ts

@@ -1,46 +0,0 @@
-import { BooleanInput } from '@angular/cdk/coercion';
-import { booleanAttribute, Directive, ElementRef, EventEmitter, inject, input, Output } from '@angular/core';
-
-export type ButtonType = 'button' | 'submit' | 'reset';
-
-let nextId = 0;
-
-@Directive({
-    selector: '[rdxButton]',
-    standalone: true,
-    host: {
-        '[attr.id]': 'id()',
-        '[attr.role]': 'type()',
-        '[attr.disabled]': 'disabled() ? disabled() : null',
-        '(click)': 'onClick($event)',
-        '(blur)': 'onBlur()'
-    }
-})
-export abstract class RdxButtonAbstractDirective {
-    #elementRef = inject(ElementRef);
-
-    readonly id = input<string>(`rdx-button-${nextId++}`);
-
-    readonly type = input<ButtonType>('button');
-
-    readonly isLoading = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
-
-    readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
-
-    @Output() onClickHandler = new EventEmitter<MouseEvent>();
-
-    protected focused = false;
-
-    protected onClick(event: MouseEvent) {
-        this.onClickHandler.emit(event);
-        this.focused = false;
-    }
-
-    protected onBlur() {
-        this.focused = false;
-    }
-
-    get nativeElement() {
-        return this.#elementRef.nativeElement;
-    }
-}

package/checkbox/ng-package.json

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

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

@@ -1,26 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { injectCheckbox } from './checkbox.token';
-
-@Directive({
-    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'
-    }
-})
-export class RdxCheckboxButtonDirective {
-    protected readonly checkbox = injectCheckbox();
-
-    readonly id = input<string | null>(null);
-    protected readonly elementId = computed(() => (this.id() ? this.id() : `rdx-checkbox-${this.id()}`));
-}

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

@@ -1,16 +0,0 @@
-import { Directive } from '@angular/core';
-import { injectCheckbox } from './checkbox.token';
-
-@Directive({
-    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'
-    }
-})
-export class RdxCheckboxIndicatorDirective {
-    protected readonly checkbox = injectCheckbox();
-}

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

@@ -1,36 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { injectCheckbox } from './checkbox.token';
-
-@Directive({
-    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()'
-    }
-})
-export class RdxCheckboxInputDirective {
-    protected readonly checkbox = injectCheckbox();
-
-    readonly id = input<string>();
-    protected readonly elementId = computed(() => (this.id() ? this.id() : `rdx-checkbox-${this.id()}`));
-
-    protected readonly value = computed(() => {
-        const state = this.checkbox.state;
-        if (state === 'indeterminate') {
-            return '';
-        }
-
-        return state ? 'on' : 'off';
-    });
-}

package/checkbox/src/checkbox.directive.ts

@@ -1,146 +0,0 @@
-import { booleanAttribute, Directive, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { RdxCheckboxToken } from './checkbox.token';
-
-export type CheckboxState = 'unchecked' | 'checked' | 'indeterminate';
-
-@Directive({
-    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()'
-    }
-})
-export class RdxCheckboxDirective implements ControlValueAccessor, OnChanges {
-    /**
-     * The controlled checked state of the checkbox. Must be used in conjunction with onCheckedChange.
-     */
-    @Input({ transform: booleanAttribute }) checked = false;
-
-    /**
-     * Defines whether the checkbox is indeterminate.
-     */
-    @Input({ transform: booleanAttribute }) indeterminate = false;
-
-    /**
-     * Defines whether the checkbox is disabled.
-     */
-    @Input({ transform: booleanAttribute }) disabled = false;
-
-    @Input({ transform: booleanAttribute }) required = false;
-
-    /**
-     * Event emitted when the checkbox checked state changes.
-     */
-    @Output() readonly checkedChange = new EventEmitter<boolean>();
-
-    /**
-     * Event emitted when the indeterminate state changes.
-     */
-    @Output() readonly indeterminateChange = new EventEmitter<boolean>();
-
-    /**
-     * Determine the state
-     */
-    get state(): CheckboxState {
-        if (this.indeterminate) {
-            return 'indeterminate';
-        }
-        return this.checked ? 'checked' : 'unchecked';
-    }
-
-    /**
-     * Store the callback function that should be called when the checkbox checked state changes.
-     * @internal
-     */
-    private onChange?: (checked: boolean) => void;
-
-    /**
-     * Store the callback function that should be called when the checkbox is blurred.
-     * @internal
-     */
-    private onTouched?: () => void;
-
-    protected onKeyDown(event: KeyboardEvent): void {
-        // According to WAI ARIA, Checkboxes don't activate on enter keypress
-        if (event.key === 'Enter') {
-            event.preventDefault();
-        }
-    }
-
-    protected onClick($event: MouseEvent): void {
-        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();
-    }
-
-    protected onBlur(): void {
-        this.onTouched?.();
-    }
-
-    ngOnChanges(changes: SimpleChanges): void {
-        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: boolean): void {
-        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: (checked: boolean) => void): void {
-        this.onChange = fn;
-    }
-
-    /**
-     * Registers a callback function that should be called when the checkbox is blurred.
-     * @param fn The callback function.
-     * @internal
-     */
-    registerOnTouched(fn: () => void): void {
-        this.onTouched = fn;
-    }
-
-    /**
-     * Sets the disabled state of the checkbox.
-     * @param isDisabled The disabled state of the checkbox.
-     * @internal
-     */
-    setDisabledState(isDisabled: boolean): void {
-        this.disabled = isDisabled;
-    }
-}

package/checkbox/src/checkbox.token.ts

@@ -1,8 +0,0 @@
-import { inject, InjectionToken } from '@angular/core';
-import type { RdxCheckboxDirective } from './checkbox.directive';
-
-export const RdxCheckboxToken = new InjectionToken<RdxCheckboxDirective>('RdxCheckboxToken');
-
-export function injectCheckbox(): RdxCheckboxDirective {
-    return inject(RdxCheckboxToken);
-}