@radix-ng/primitives 0.11.0 → 0.12.0

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

@@ -0,0 +1,24 @@
+import { Directive } from '@angular/core';
+import { injectSwitch } from './switch-root.directive';
+
+@Directive({
+    selector: 'input[rdxSwitchInput]',
+    exportAs: 'rdxSwitchInput',
+    standalone: true,
+    host: {
+        type: 'checkbox',
+        tabindex: '-1',
+        '[attr.defaultChecked]': 'switchRoot.checked()',
+        '[attr.aria-checked]': 'switchRoot.checked()',
+        '[attr.aria-hidden]': 'true',
+        '[attr.aria-required]': 'switchRoot.required()',
+        '[attr.data-state]': 'switchRoot.checked() ? "checked" : "unchecked"',
+        '[attr.data-disabled]': 'switchRoot.disabledState() ? "true" : null',
+        '[attr.disabled]': 'switchRoot.disabledState() ? switchRoot.disabledState() : null',
+        '[attr.value]': 'switchRoot.checked() ? "on" : "off"',
+        style: 'transform: translateX(-100%); position: absolute; overflow: hidden; pointerEvents: none; opacity: 0; margin: 0;'
+    }
+})
+export class RdxSwitchInputDirective {
+    protected readonly switchRoot = injectSwitch();
+}

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

@@ -0,0 +1,127 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import {
+    booleanAttribute,
+    computed,
+    Directive,
+    EventEmitter,
+    inject,
+    InjectionToken,
+    input,
+    InputSignalWithTransform,
+    model,
+    ModelSignal,
+    Output
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+export const RdxSwitchToken = new InjectionToken<RdxSwitchRootDirective>('RdxSwitchToken');
+
+export function injectSwitch(): RdxSwitchRootDirective {
+    return inject(RdxSwitchToken);
+}
+
+export interface SwitchProps {
+    checked?: ModelSignal<boolean>;
+    defaultChecked?: boolean;
+    required?: InputSignalWithTransform<boolean, BooleanInput>;
+    onCheckedChange?: EventEmitter<boolean>;
+}
+
+let idIterator = 0;
+
+@Directive({
+    selector: 'button[rdxSwitchRoot]',
+    exportAs: 'rdxSwitchRoot',
+    standalone: true,
+    providers: [
+        { provide: RdxSwitchToken, useExisting: RdxSwitchRootDirective },
+        { provide: NG_VALUE_ACCESSOR, useExisting: RdxSwitchRootDirective, multi: true }
+    ],
+    host: {
+        role: 'switch',
+        type: 'button',
+        '[id]': 'elementId()',
+        '[attr.aria-checked]': 'checked()',
+        '[attr.aria-required]': 'required',
+        '[attr.data-state]': 'checked() ? "checked" : "unchecked"',
+        '[attr.data-disabled]': 'disabledState() ? "true" : null',
+        '[attr.disabled]': 'disabledState() ? disabledState() : null',
+
+        '(focus)': '_onTouched?.()',
+        '(click)': 'toggle()'
+    }
+})
+export class RdxSwitchRootDirective implements SwitchProps, ControlValueAccessor {
+    readonly id = input<string>(`rdx-switch-${idIterator++}`);
+    protected readonly elementId = computed(() => (this.id() ? this.id() : null));
+
+    // When true, indicates that the user must check
+    // the switch before the owning form can be submitted.
+    readonly required = input<boolean, BooleanInput>(false, {
+        transform: booleanAttribute
+    });
+
+    // The controlled state of the switch
+    readonly checked = model<boolean>(false);
+
+    // When true, prevents the user from interacting with the switch.
+    readonly disabled = input<boolean, BooleanInput>(false, {
+        transform: booleanAttribute
+    });
+
+    /*
+     * @ignore
+     */
+    readonly disabledState = computed(() => this.disabled());
+
+    @Output() onCheckedChange = new EventEmitter<boolean>();
+
+    /**
+     * The method to be called in order to update ngModel.
+     */
+    _onChange?: (checked: boolean) => void;
+
+    /**
+     * onTouch function registered via registerOnTouch (ControlValueAccessor).
+     */
+    _onTouched?: () => void;
+
+    /**
+     * Registers a function to call when the checked state changes.
+     * @param fn Function to call on change.
+     */
+    registerOnChange(fn: (checked: boolean) => void): void {
+        this._onChange = fn;
+    }
+
+    /**
+     * Registers a function to call when the component is touched.
+     * @param fn Function to call on touch.
+     */
+    registerOnTouched(fn: () => void): void {
+        this._onTouched = fn;
+    }
+
+    /**
+     * Writes a new value to the model.
+     * @param checked The new checked value.
+     */
+    writeValue(checked: boolean): void {
+        this.checked.set(checked);
+    }
+
+    /**
+     * Toggles the checked state of the switch.
+     * If the switch is disabled, the function returns early.
+     */
+    protected toggle(): void {
+        if (this.disabledState()) {
+            return;
+        }
+
+        this.checked.set(!this.checked());
+        this._onChange?.(this.checked());
+
+        this.onCheckedChange.emit(this.checked());
+    }
+}

package/switch/src/switch-thumb.directive.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { injectSwitch } from './switch-root.directive';
+
+@Directive({
+    selector: 'span[rdxSwitchThumb]',
+    exportAs: 'rdxSwitchThumb',
+    standalone: true,
+    host: {
+        '[attr.data-disabled]': 'switchRoot.disabledState() ? "true" : null',
+        '[attr.data-state]': 'switchRoot.checked() ? "checked" : "unchecked"'
+    }
+})
+export class RdxSwitchThumbDirective {
+    protected readonly switchRoot = injectSwitch();
+}

package/switch/stories/switch.docs.mdx

@@ -0,0 +1,83 @@
+import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
+import { switchExclude } from '../../../../apps/storybook-radix/docs/utils/storybook';
+import { RdxSwitchRootDirective } from '../src/switch-root.directive';
+import * as SwitchDirectiveStories from './switch.stories';
+
+<Meta title="Primitives/Switch" />
+
+# Switch
+
+#### A control that allows the user to toggle between checked and not checked.
+
+<Canvas sourceState="hidden" of={SwitchDirectiveStories.Default} />
+
+## Features
+
+- ✅ Full keyboard navigation.
+- ✅ Can be controlled or uncontrolled.
+
+## Import
+
+Get started with importing the directives:
+
+```typescript
+import { RdxSwitchRootDirective, RdxSwitchThumbDirective, RdxSwitchInputDirective } from '@radix-ng/primitives/switch';
+```
+
+## Examples
+
+```html
+<label rdxLabel htmlFor="airplane-mode">Airplane mode</label>
+<button id="airplane-mode" rdxSwitchRoot [(checked)]="checked">
+  <span rdxSwitchThumb></span>
+</button>
+```
+
+```html
+<label rdxLabel htmlFor="airplane-mode">Airplane mode</label>
+<button id="airplane-mode" rdxSwitchRoot [(checked)]="checked">
+  <input rdxSwitchInput />
+  <span rdxSwitchThumb></span>
+</button>
+```
+
+## API Reference
+
+### RdxSwitchRootDirective
+
+<ArgTypes exclude={switchExclude} of={RdxSwitchRootDirective} />
+
+<Markdown>
+  {`
+  | Data Attribute | Value |
+  | ----------- | --------- |
+  | [data-state]       | "checked" or "unchecked"   |
+  | [data-disabled]    | Present when disabled      |
+  `}
+</Markdown>
+
+### ThumbDirective
+
+<Markdown>
+  {`
+  | Data Attribute | Value |
+  | ----------- | --------- |
+  | [data-state]       | "checked" or "unchecked"   |
+  | [data-disabled]    | Present when disabled      |
+  `}
+</Markdown>
+
+## Accessibility
+
+Adheres to the [`switch` role requirements](https://www.w3.org/WAI/ARIA/apg/patterns/switch).
+
+### Keyboard Interactions
+
+<Markdown>
+  {`
+  | Key | Description |
+  | ----------- | --------- |
+  | Space       | Toggles the component's state.        |
+  | Enter       | Toggles the component's state.    |
+  `}
+</Markdown>

package/switch/stories/switch.stories.ts

@@ -0,0 +1,149 @@
+import { componentWrapperDecorator, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { RdxLabelDirective } from '../../label';
+import { RdxSwitchInputDirective } from '../src/switch-input.directive';
+import { RdxSwitchRootDirective } from '../src/switch-root.directive';
+import { RdxSwitchThumbDirective } from '../src/switch-thumb.directive';
+
+export default {
+    title: 'Primitives/Switch',
+    decorators: [
+        moduleMetadata({
+            imports: [
+                RdxLabelDirective,
+                RdxSwitchRootDirective,
+                RdxSwitchInputDirective,
+                RdxSwitchThumbDirective
+            ]
+        }),
+        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: () => ({
+        template: `
+<style>
+button {
+    all: unset;
+}
+
+.SwitchRoot {
+    width: 42px;
+    height: 25px;
+    background-color: var(--black-a9);
+    border-radius: 9999px;
+    margin-left: 15px;
+    position: relative;
+    box-shadow: 0 2px 10px var(--black-a7);
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.SwitchRoot:focus {
+    box-shadow: 0 0 0 2px black;
+}
+.SwitchRoot[data-state='checked'] {
+    background-color: black;
+}
+
+.SwitchThumb {
+    display: block;
+    width: 21px;
+    height: 21px;
+    background-color: white;
+    border-radius: 9999px;
+    box-shadow: 0 2px 2px var(--black-a7);
+    transition: transform 100ms;
+    transform: translateX(2px);
+    will-change: transform;
+}
+.SwitchThumb[data-state='checked'] {
+    transform: translateX(19px);
+}
+
+.Label {
+    color: white;
+    font-size: 15px;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+}
+
+</style>
+
+<label rdxLabel htmlFor="airplane-mode" class="Label">
+    Airplane mode
+    <button rdxSwitchRoot [(checked)]="checked" id="airplane-mode" class="SwitchRoot">
+        <span rdxSwitchThumb class="SwitchThumb"></span>
+    </button>
+</label>
+`
+    })
+};
+
+export const DefaultInput: Story = {
+    name: 'With Input',
+    render: () => ({
+        template: `
+<style>
+button {
+    all: unset;
+}
+
+.SwitchRoot {
+    width: 42px;
+    height: 25px;
+    background-color: var(--black-a9);
+    border-radius: 9999px;
+    margin-left: 15px;
+    position: relative;
+    box-shadow: 0 2px 10px var(--black-a7);
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.SwitchRoot:focus {
+    box-shadow: 0 0 0 2px black;
+}
+.SwitchRoot[data-state='checked'] {
+    background-color: black;
+}
+
+.SwitchThumb {
+    display: block;
+    width: 21px;
+    height: 21px;
+    background-color: white;
+    border-radius: 9999px;
+    box-shadow: 0 2px 2px var(--black-a7);
+    transition: transform 100ms;
+    transform: translateX(2px);
+    will-change: transform;
+}
+.SwitchThumb[data-state='checked'] {
+    transform: translateX(19px);
+}
+
+.Label {
+    color: white;
+    font-size: 15px;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+}
+
+</style>
+
+<label rdxLabel htmlFor="airplane-mode" class="Label">
+    Airplane mode
+    <button rdxSwitchRoot [(checked)]="checked" id="airplane-mode" class="SwitchRoot">
+        <input rdxSwitchInput />
+        <span rdxSwitchThumb class="SwitchThumb"></span>
+    </button>
+</label>
+`
+    })
+};

package/tabs/__tests__/tabs-context.service.spec.ts

@@ -0,0 +1,35 @@
+import { TestBed } from '@angular/core/testing';
+import { RdxTabsContextService } from '../src/tabs-context.service';
+
+describe('TabsContextService', () => {
+    let service: RdxTabsContextService;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({});
+        service = TestBed.inject(RdxTabsContextService);
+    });
+
+    it('should be created', () => {
+        expect(service).toBeTruthy();
+    });
+
+    it('should generate a base ID', () => {
+        const baseId = service.getBaseId();
+        expect(baseId).toMatch(/^tabs-/);
+    });
+
+    it('should set and get the value correctly', () => {
+        service.setValue('test');
+        expect(service.value$()).toBe('test');
+    });
+
+    it('should set and get the orientation correctly', () => {
+        service.setOrientation('vertical');
+        expect(service.orientation$()).toBe('vertical');
+    });
+
+    it('should set and get the direction correctly', () => {
+        service.setDir('rtl');
+        expect(service.dir$()).toBe('rtl');
+    });
+});

package/tabs/index.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { RdxTabsContentDirective } from './src/tabs-content.directive';
+import { RdxTabsContextService } from './src/tabs-context.service';
+import { RdxTabsListDirective } from './src/tabs-list.directive';
+import { RdxTabsRootDirective } from './src/tabs-root.directive';
+import { RdxTabsTriggerDirective } from './src/tabs-trigger.directive';
+
+export * from './src/tabs-content.directive';
+export * from './src/tabs-context.service';
+export * from './src/tabs-list.directive';
+export * from './src/tabs-root.directive';
+export * from './src/tabs-trigger.directive';
+
+const tabsImports = [
+    RdxTabsRootDirective,
+    RdxTabsContentDirective,
+    RdxTabsListDirective,
+    RdxTabsTriggerDirective
+];
+
+@NgModule({
+    imports: [...tabsImports],
+    exports: [...tabsImports],
+    providers: [RdxTabsContextService]
+})
+export class RdxTabsModule {}

package/tabs/ng-package.json

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

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

@@ -0,0 +1,23 @@
+import { computed, Directive, inject, input } from '@angular/core';
+import { TABS_CONTEXT_TOKEN } from './tabs-context.service';
+
+@Directive({
+    selector: '[rdxTabsContent]',
+    standalone: true,
+    host: {
+        role: 'tabpanel',
+        tabindex: '0',
+        '[id]': 'tabsContext.getBaseId()',
+        '[attr.aria-labelledby]': 'tabsContext.getBaseId()',
+        '[attr.data-state]': 'selected() ? "active" : "inactive"',
+        '[attr.data-orientation]': 'tabsContext.orientation$()',
+        '[hidden]': '!selected()'
+    }
+})
+export class RdxTabsContentDirective {
+    protected readonly tabsContext = inject(TABS_CONTEXT_TOKEN);
+
+    readonly value = input.required<string>();
+
+    protected readonly selected = computed(() => this.tabsContext.value$() === this.value());
+}

package/tabs/src/tabs-context.service.ts

@@ -0,0 +1,43 @@
+import { computed, Injectable, InjectionToken, signal } from '@angular/core';
+
+export const TABS_CONTEXT_TOKEN = new InjectionToken<RdxTabsContextService>('TabsContext');
+
+@Injectable({
+    providedIn: 'root'
+})
+export class RdxTabsContextService {
+    private baseId = this.generateId();
+    private value = signal<string | undefined>(undefined);
+    private orientation = signal<string>('horizontal');
+    private dir = signal<string | undefined>(undefined);
+    private activationMode = signal<string>('automatic');
+
+    readonly value$ = computed(() => this.value());
+    readonly orientation$ = computed(() => this.orientation());
+    readonly dir$ = computed(() => this.dir());
+    readonly activationMode$ = computed(() => this.activationMode());
+
+    setValue(value: string) {
+        this.value.set(value);
+    }
+
+    setOrientation(orientation: string) {
+        this.orientation.set(orientation);
+    }
+
+    setDir(dir: string) {
+        this.dir.set(dir);
+    }
+
+    setActivationMode(mode: string) {
+        this.activationMode.set(mode);
+    }
+
+    getBaseId() {
+        return this.baseId;
+    }
+
+    private generateId() {
+        return `tabs-${Math.random().toString(36).substr(2, 9)}`;
+    }
+}

package/tabs/src/tabs-list.directive.ts

@@ -0,0 +1,21 @@
+import { Directive, inject } from '@angular/core';
+import { TABS_CONTEXT_TOKEN } from './tabs-context.service';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+interface TabsListProps {
+    // When true, keyboard navigation will loop from last tab to first, and vice versa.
+    loop?: boolean;
+}
+
+@Directive({
+    selector: '[rdxTabsList]',
+    standalone: true,
+    host: {
+        role: 'tablist',
+        '[attr.aria-orientation]': 'tabsContext.orientation$()',
+        '[attr.data-orientation]': 'tabsContext.orientation$()'
+    }
+})
+export class RdxTabsListDirective {
+    protected readonly tabsContext = inject(TABS_CONTEXT_TOKEN);
+}

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

@@ -0,0 +1,70 @@
+import { Directive, effect, EventEmitter, inject, Input, OnInit, Output } from '@angular/core';
+import { RdxTabsContextService, TABS_CONTEXT_TOKEN } from './tabs-context.service';
+
+export interface TabsProps {
+    /** The value for the selected tab, if controlled */
+    value?: string;
+    /** The value of the tab to select by default, if uncontrolled */
+    defaultValue?: string;
+    /** A function called when a new tab is selected */
+    onValueChange?: (value: string) => void;
+    /**
+     * The orientation the tabs are layed out.
+     * Mainly so arrow navigation is done accordingly (left & right vs. up & down)
+     * @defaultValue horizontal
+     */
+    orientation?: string;
+    /**
+     * The direction of navigation between toolbar items.
+     */
+    dir?: string;
+    /**
+     * Whether a tab is activated automatically or manually.
+     * @defaultValue automatic
+     * */
+    activationMode?: 'automatic' | 'manual';
+}
+
+@Directive({
+    selector: '[rdxTabsRoot]',
+    standalone: true,
+    providers: [{ provide: TABS_CONTEXT_TOKEN, useExisting: RdxTabsContextService }],
+    host: {
+        '[attr.data-orientation]': 'orientation',
+        '[attr.dir]': 'dir'
+    }
+})
+export class RdxTabsRootDirective implements OnInit {
+    private readonly tabsContext = inject(TABS_CONTEXT_TOKEN);
+
+    @Input() value?: string;
+    @Input() defaultValue?: string;
+    @Input() orientation = 'horizontal';
+    @Input() dir?: string;
+
+    // Event handler called when the value changes.
+    @Output() onValueChange = new EventEmitter<string>();
+
+    constructor() {
+        effect(() => {
+            const value = this.tabsContext.value$();
+            if (value !== undefined) {
+                this.onValueChange.emit(value);
+            }
+        });
+    }
+
+    ngOnInit() {
+        this.tabsContext.setOrientation(this.orientation);
+
+        if (this.dir) {
+            this.tabsContext.setDir(this.dir);
+        }
+
+        if (this.value) {
+            this.tabsContext.setValue(this.value);
+        } else if (this.defaultValue) {
+            this.tabsContext.setValue(this.defaultValue);
+        }
+    }
+}

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

@@ -0,0 +1,55 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { booleanAttribute, computed, Directive, inject, input, InputSignalWithTransform } from '@angular/core';
+import { TABS_CONTEXT_TOKEN } from './tabs-context.service';
+
+interface TabsTriggerProps {
+    // When true, prevents the user from interacting with the tab.
+    disabled: InputSignalWithTransform<boolean, BooleanInput>;
+}
+
+@Directive({
+    selector: '[rdxTabsTrigger]',
+    standalone: true,
+    host: {
+        type: 'button',
+        role: 'tab',
+        '[id]': 'triggerId',
+        '[attr.aria-selected]': 'selected()',
+        '[attr.aria-controls]': 'contentId()',
+        '[attr.data-disabled]': "disabled() ? '' : undefined",
+        '[attr.data-state]': "selected() ? 'active' : 'inactive'",
+        '(mousedown)': 'onMouseDown($event)',
+        '(keydown)': 'onKeyDown($event)'
+    }
+})
+export class RdxTabsTriggerDirective implements TabsTriggerProps {
+    protected readonly tabsContext = inject(TABS_CONTEXT_TOKEN);
+
+    // A unique value that associates the trigger with a content.
+    readonly value = input.required<string>();
+
+    // When true, prevents the user from interacting with the tab.
+    readonly disabled = input<boolean, BooleanInput>(false, {
+        transform: booleanAttribute
+    });
+
+    protected readonly contentId = computed(() => `${this.tabsContext.getBaseId()}-content-${this.value()}`);
+    protected readonly triggerId = computed(() => `${this.tabsContext.getBaseId()}-trigger-${this.value}`);
+
+    protected readonly selected = computed(() => this.tabsContext.value$() === this.value());
+
+    protected onMouseDown(event: MouseEvent) {
+        if (!this.disabled() && event.button === 0 && !event.ctrlKey) {
+            this.tabsContext?.setValue(this.value());
+        } else {
+            // prevent focus to avoid accidental activation
+            event.preventDefault();
+        }
+    }
+
+    protected onKeyDown(event: KeyboardEvent) {
+        if ([' ', 'Enter'].includes(event.key)) {
+            this.tabsContext?.setValue(this.value());
+        }
+    }
+}