@radix-ng/primitives 0.11.1 → 0.12.0

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

@@ -0,0 +1,207 @@
+import { FocusKeyManager } from '@angular/cdk/a11y';
+import { DOWN_ARROW, ENTER, LEFT_ARROW, RIGHT_ARROW, SPACE, TAB, UP_ARROW } from '@angular/cdk/keycodes';
+import {
+    AfterContentInit,
+    booleanAttribute,
+    ContentChildren,
+    Directive,
+    EventEmitter,
+    Input,
+    OnDestroy,
+    Output,
+    QueryList
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Subject, takeUntil } from 'rxjs';
+import { RdxRadioItemDirective } from './radio-item.directive';
+import { RadioGroupDirective, RadioGroupProps, RDX_RADIO_GROUP } from './radio-tokens';
+
+@Directive({
+    selector: '[rdxRadioRoot]',
+    exportAs: 'rdxRadioRoot',
+    standalone: true,
+    providers: [
+        { provide: RDX_RADIO_GROUP, useExisting: RdxRadioGroupDirective },
+        { provide: NG_VALUE_ACCESSOR, useExisting: RdxRadioGroupDirective, multi: true }
+    ],
+    host: {
+        role: 'radiogroup',
+        '[attr.aria-orientation]': '_orientation',
+        '[attr.data-disabled]': 'disabled ? "" : null',
+        '[attr.tabindex]': '-1',
+        '[attr.dir]': 'dir',
+        '(keydown)': '_onKeydown($event)',
+        '(focusin)': '_onFocusin($event)'
+    }
+})
+export class RdxRadioGroupDirective
+    implements RadioGroupProps, RadioGroupDirective, ControlValueAccessor, AfterContentInit, OnDestroy
+{
+    @ContentChildren(RdxRadioItemDirective, { descendants: true }) radioItems!: QueryList<RdxRadioItemDirective>;
+    private focusKeyManager!: FocusKeyManager<RdxRadioItemDirective>;
+    private destroy$ = new Subject<void>();
+
+    name?: string | undefined;
+    @Input() value?: string;
+
+    @Input({ transform: booleanAttribute }) disabled = false;
+
+    @Input() dir?: string;
+
+    @Input() defaultValue?: string;
+
+    /**
+     * The orientation of the radio group only vertical.
+     * Horizontal radio buttons can sometimes be challenging to scan and localize.
+     * The horizontal arrangement of radio buttons may also lead to difficulties in determining which
+     * label corresponds to which button: whether the label is above or below the button.
+     * @default 'vertical'
+     */
+    readonly _orientation = 'vertical';
+
+    /**
+     * Event handler called when the value changes.
+     */
+    @Output() readonly onValueChange = new EventEmitter<string>();
+
+    /**
+     * The callback function to call when the value of the radio group changes.
+     */
+    private onChange: (value: string) => void = () => {
+        /* Empty */
+    };
+
+    /**
+     * The callback function to call when the radio group is touched.
+     */
+    onTouched: () => void = () => {
+        /* Empty */
+    };
+
+    ngAfterContentInit() {
+        this.focusKeyManager = new FocusKeyManager(this.radioItems).withWrap().withVerticalOrientation();
+
+        this.radioItems.changes.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            this.updateActiveItem();
+        });
+
+        this.updateActiveItem(false);
+    }
+
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+
+    /**
+     * Select a radio item.
+     * @param value The value of the radio item to select.
+     */
+    select(value: string): void {
+        this.value = value;
+        this.onValueChange.emit(value);
+        this.onChange?.(value);
+        this.updateActiveItem();
+        this.onTouched();
+    }
+
+    /**
+     * Update the value of the radio group.
+     * @param value The new value of the radio group.
+     * @internal
+     */
+    writeValue(value: string): void {
+        this.value = value;
+        if (this.radioItems) {
+            this.updateActiveItem(false);
+        }
+    }
+
+    /**
+     * Register a callback function to call when the value of the radio group changes.
+     * @param fn The callback function to call when the value of the radio group changes.
+     * @internal
+     */
+    registerOnChange(fn: (value: string) => void): void {
+        this.onChange = fn;
+    }
+
+    registerOnTouched(fn: () => void): void {
+        this.onTouched = fn;
+    }
+
+    /**
+     * Set the disabled state of the radio group.
+     * @param isDisabled Whether the radio group is disabled.
+     * @internal
+     */
+    setDisabledState(isDisabled: boolean): void {
+        this.disabled = isDisabled;
+    }
+
+    /**
+     * When focus leaves the radio group.
+     */
+    _onFocusin(event: FocusEvent): void {
+        const target = event.target as HTMLElement;
+        const radioItem = this.radioItems.find((item) => item.element.nativeElement === target);
+        if (radioItem) {
+            this.focusKeyManager.setActiveItem(radioItem);
+        }
+    }
+
+    _onKeydown(event: KeyboardEvent): void {
+        if (this.disabled) return;
+
+        switch (event.keyCode) {
+            case ENTER:
+            case SPACE:
+                event.preventDefault();
+                this.selectFocusedItem();
+                break;
+            case DOWN_ARROW:
+            case RIGHT_ARROW:
+                event.preventDefault();
+                this.focusKeyManager.setNextItemActive();
+                this.selectFocusedItem();
+                break;
+            case UP_ARROW:
+            case LEFT_ARROW:
+                event.preventDefault();
+                this.focusKeyManager.setPreviousItemActive();
+                this.selectFocusedItem();
+                break;
+            case TAB:
+                this.tabNavigation(event);
+                break;
+            default:
+                this.focusKeyManager.onKeydown(event);
+        }
+    }
+
+    private selectFocusedItem(): void {
+        const focusedItem = this.focusKeyManager.activeItem;
+        if (focusedItem) {
+            this.select(focusedItem.value);
+        }
+    }
+
+    private updateActiveItem(setFocus = true): void {
+        const activeItem = this.radioItems.find((item) => item.value === this.value);
+        if (activeItem) {
+            this.focusKeyManager.setActiveItem(activeItem);
+        } else if (this.radioItems.length > 0 && setFocus) {
+            this.focusKeyManager.setFirstItemActive();
+        }
+    }
+
+    private tabNavigation(event: KeyboardEvent): void {
+        event.preventDefault();
+        const checkedItem = this.radioItems.find((item) => item.checked);
+        if (checkedItem) {
+            checkedItem.focus();
+        } else if (this.radioItems.first) {
+            this.radioItems.first.focus();
+        }
+    }
+}

package/radio/src/{radio-tokens.d.ts → radio-tokens.ts}

@@ -1,12 +1,16 @@
 import { InjectionToken } from '@angular/core';
+
 export interface RadioGroupProps {
     name?: string;
     disabled?: boolean;
     defaultValue?: string;
     value?: string;
 }
+
 export interface RadioGroupDirective extends RadioGroupProps {
     select(value: string): void;
+
     onTouched(): void;
 }
-export declare const RDX_RADIO_GROUP: InjectionToken<RadioGroupDirective>;
+
+export const RDX_RADIO_GROUP = new InjectionToken<RadioGroupDirective>('RdxRadioGroup');

package/radio/stories/radio-group.component.ts

@@ -0,0 +1,39 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { RdxLabelDirective } from '@radix-ng/primitives/label';
+import { RdxRadioGroupDirective, RdxRadioIndicatorDirective, RdxRadioItemDirective } from '@radix-ng/primitives/radio';
+
+@Component({
+    selector: 'radio-groups-forms-example',
+    standalone: true,
+    template: `
+        <div class="RadioGroupRoot" [(ngModel)]="hotelRoom" rdxRadioRoot aria-label="View density">
+            @for (room of rooms; track room) {
+                <div class="RadioGroup">
+                    <button class="RadioGroupItem" [value]="room" [id]="room" rdxRadioItem>
+                        <div class="RadioGroupIndicator" rdxRadioIndicator></div>
+                        <input class="Input" rdxRadioIndicator type="radio" aria-hidden="true" tabindex="-1" />
+                    </button>
+                    <label class="Label" [htmlFor]="room" rdxLabel>
+                        {{ room }}
+                    </label>
+                </div>
+            }
+        </div>
+        <p>
+            <span>Your room is: {{ hotelRoom }}</span>
+        </p>
+    `,
+    styleUrl: 'radio-group.styles.scss',
+    imports: [
+        FormsModule,
+        RdxLabelDirective,
+        RdxRadioItemDirective,
+        RdxRadioIndicatorDirective,
+        RdxRadioGroupDirective
+    ]
+})
+export class RadioGroupComponent {
+    hotelRoom: string | undefined;
+    rooms = ['Default', 'Comfortable'];
+}

package/radio/stories/radio-group.styles.scss

@@ -0,0 +1,70 @@
+/* reset */
+button {
+    all: unset;
+}
+
+.RadioGroup {
+    display: flex;
+    align-items: center;
+}
+
+.RadioGroupRoot {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.RadioGroupItem {
+    background-color: white;
+    width: 25px;
+    height: 25px;
+    border-radius: 100%;
+    box-shadow: 0 2px 10px var(--black-a7);
+}
+
+.RadioGroupItem:hover {
+    background-color: var(--violet-3);
+}
+
+.RadioGroupItem:focus {
+    box-shadow: 0 0 0 2px black;
+}
+
+.RadioGroupIndicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+.RadioGroupIndicator::after {
+    content: '';
+    display: block;
+    width: 11px;
+    height: 11px;
+    border-radius: 50%;
+    background-color: var(--violet-11);
+}
+
+.RadioGroupIndicator[data-state='unchecked'] {
+    display: none;
+}
+
+.Input {
+    transform: translateX(-100%);
+    position: absolute;
+    pointer-events: none;
+    opacity: 0;
+    margin: 0;
+    width: 25px;
+    height: 25px;
+}
+
+.Label {
+    color: white;
+    font-size: 15px;
+    line-height: 1;
+    padding-left: 15px;
+}

package/radio/stories/radio.docs.mdx

@@ -0,0 +1,68 @@
+import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
+import * as RadioDirectiveStories from './radio.stories';
+import { RdxRadioGroupDirective } from '../src/radio-root.directive';
+import { RdxRadioItemDirective } from '../src/radio-item.directive';
+
+<Meta title="Primitives/Radio Group" />
+
+# Radio Group
+
+#### A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
+
+<Canvas sourceState="hidden" of={RadioDirectiveStories.Default} />
+
+## Features
+
+- ✅ Full keyboard navigation.
+- ✅ Supports horizontal/vertical orientation.
+- ✅ Can be controlled or uncontrolled.
+
+## Import
+
+Get started with importing the directives:
+
+```typescript
+import { RdxRadioIndicatorDirective, RadioItemDirectiveб } from '@radix-ng/primitives/radio';
+```
+
+## Anatomy
+
+```html
+<div rdxRadioRoot>
+  <button rdxRadioItem value="default">
+    <div rdxRadioIndicator></div>
+  </button>
+</div>
+```
+
+## API Reference
+
+### CheckboxGroupDirective
+
+<ArgTypes of={RdxRadioGroupDirective} />
+
+### CheckboxGroupItemDirective
+
+<ArgTypes of={RdxRadioItemDirective} />
+
+### RdxRadioIndicatorDirective
+
+## Accessibility
+
+Adheres to the [Radio Group WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton)
+and uses [roving tabindex](https://www.w3.org/TR/wai-aria-practices-1.2/examples/radio/radio.html) to manage focus movement among radio items.
+
+### Keyboard Interactions
+
+<Markdown>
+  {`
+  | Key | Description |
+  | ----------- | --------- |
+  | Tab         | Moves focus to either the checked radio item or the first radio item in the group. |
+  | Space       | When focus is on an unchecked radio item, checks it.        |
+  | ArrowDown   | Moves focus and checks the next radio item in the group.    |
+  | ArrowRight  |  Moves focus and checks the next radio item in the group.   |
+  | ArrowUp     |  Moves focus to the previous radio item in the group.       |
+  | ArrowLeft   |  Moves focus to the previous radio item in the group.       |
+  `}
+</Markdown>

package/radio/stories/radio.stories.ts

@@ -0,0 +1,155 @@
+import { componentWrapperDecorator, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { RdxLabelDirective } from '../../label';
+import { RdxRadioIndicatorDirective } from '../src/radio-indicator.directive';
+import { RdxRadioItemDirective } from '../src/radio-item.directive';
+import { RdxRadioGroupDirective } from '../src/radio-root.directive';
+import { RadioGroupComponent } from './radio-group.component';
+
+const html = String.raw;
+
+export default {
+    title: 'Primitives/Radio Group',
+    decorators: [
+        moduleMetadata({
+            imports: [
+                RdxLabelDirective,
+                RdxRadioItemDirective,
+                RdxRadioIndicatorDirective,
+                RdxRadioGroupDirective,
+                RadioGroupComponent
+            ]
+        }),
+        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: html`
+            <form>
+                <div class="RadioGroupRoot" rdxRadioRoot aria-label="View density">
+                    <div style="display: flex; align-items: center;">
+                        <button class="RadioGroupItem" id="r1" rdxRadioItem value="default">
+                            <div class="RadioGroupIndicator" rdxRadioIndicator></div>
+                            <input
+                                class="Input"
+                                rdxRadioIndicator
+                                type="radio"
+                                aria-hidden="true"
+                                tabindex="-1"
+                                value="default"
+                            />
+                        </button>
+                        <label class="Label" rdxLabel htmlFor="r1">Default</label>
+                    </div>
+                    <div style="display: flex; align-items: center;">
+                        <button class="RadioGroupItem" id="r2" rdxRadioItem value="comfortable">
+                            <div class="RadioGroupIndicator" rdxRadioIndicator></div>
+                            <input
+                                class="Input"
+                                rdxRadioIndicator
+                                type="radio"
+                                aria-hidden="true"
+                                tabindex="-1"
+                                value="comfortable"
+                            />
+                        </button>
+                        <label class="Label" rdxLabel htmlFor="r2">Comfortable</label>
+                    </div>
+                    <div style="display: flex; align-items: center;">
+                        <button class="RadioGroupItem" id="r3" rdxRadioItem value="compact">
+                            <div class="RadioGroupIndicator" rdxRadioIndicator></div>
+                            <input
+                                class="Input"
+                                rdxRadioIndicator
+                                type="radio"
+                                aria-hidden="true"
+                                tabindex="-1"
+                                value="compact"
+                            />
+                        </button>
+                        <label class="Label" rdxLabel htmlFor="r3">Compact</label>
+                    </div>
+                </div>
+            </form>
+
+            <style>
+                /* reset */
+                button {
+                    all: unset;
+                }
+
+                .RadioGroupRoot {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 10px;
+                }
+
+                .RadioGroupItem {
+                    background-color: white;
+                    width: 25px;
+                    height: 25px;
+                    border-radius: 100%;
+                    box-shadow: 0 2px 10px var(--black-a7);
+                }
+                .RadioGroupItem:hover {
+                    background-color: var(--violet-3);
+                }
+                .RadioGroupItem:focus {
+                    box-shadow: 0 0 0 2px black;
+                }
+
+                .RadioGroupIndicator {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 100%;
+                    height: 100%;
+                    position: relative;
+                }
+                .RadioGroupIndicator::after {
+                    content: '';
+                    display: block;
+                    width: 11px;
+                    height: 11px;
+                    border-radius: 50%;
+                    background-color: var(--violet-11);
+                }
+
+                .RadioGroupIndicator[data-state='unchecked'] {
+                    display: none;
+                }
+
+                .Input {
+                    transform: translateX(-100%);
+                    position: absolute;
+                    pointer-events: none;
+                    opacity: 0;
+                    margin: 0;
+                    width: 25px;
+                    height: 25px;
+                }
+
+                .Label {
+                    color: white;
+                    font-size: 15px;
+                    line-height: 1;
+                    padding-left: 15px;
+                }
+            </style>
+        `
+    })
+};
+
+export const RadioGroup: Story = {
+    render: () => ({
+        template: `<radio-groups-forms-example></radio-groups-forms-example>`
+    })
+};

package/separator/__tests__/separator.directive.spec.ts

@@ -0,0 +1,58 @@
+import { Component, DebugElement } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { Orientation, RdxSeparatorRootDirective } from '../src/separator.directive';
+
+@Component({
+    template: '<div rdxSeparatorRoot [orientation]="orientation" [decorative]="decorative"></div>'
+})
+class TestComponent {
+    orientation: Orientation = 'horizontal';
+    decorative = false;
+}
+
+describe('SeparatorDirective', () => {
+    let component: TestComponent;
+    let fixture: ComponentFixture<TestComponent>;
+    let div: DebugElement;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [TestComponent],
+            imports: [RdxSeparatorRootDirective]
+        }).compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(TestComponent);
+        component = fixture.componentInstance;
+        div = fixture.debugElement.query(By.css('div'));
+        fixture.detectChanges();
+    });
+
+    it('should create an instance', () => {
+        const directive = new RdxSeparatorRootDirective();
+        expect(directive).toBeTruthy();
+    });
+
+    it('should apply the correct role attribute based on decorative input', () => {
+        expect(div.nativeElement.getAttribute('role')).toBe('separator');
+        component.decorative = true;
+        fixture.detectChanges();
+        expect(div.nativeElement.getAttribute('role')).toBe('none');
+    });
+
+    it('should apply the correct aria-orientation attribute based on orientation input', () => {
+        expect(div.nativeElement.getAttribute('aria-orientation')).toBe(null);
+        component.orientation = 'vertical';
+        fixture.detectChanges();
+        expect(div.nativeElement.getAttribute('aria-orientation')).toBe('vertical');
+    });
+
+    it('should apply the correct data-orientation attribute based on orientation input', () => {
+        expect(div.nativeElement.getAttribute('data-orientation')).toBe('horizontal');
+        component.orientation = 'vertical';
+        fixture.detectChanges();
+        expect(div.nativeElement.getAttribute('data-orientation')).toBe('vertical');
+    });
+});

package/separator/ng-package.json

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

package/separator/src/separator.directive.ts

@@ -0,0 +1,35 @@
+import { booleanAttribute, Directive, Input } from '@angular/core';
+
+const DEFAULT_ORIENTATION = 'horizontal';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const ORIENTATIONS = ['horizontal', 'vertical'] as const;
+
+export type Orientation = (typeof ORIENTATIONS)[number];
+
+export interface SeparatorProps {
+    /**
+     * Either `vertical` or `horizontal`. Defaults to `horizontal`.
+     */
+    orientation?: Orientation;
+    /**
+     * Whether the component is purely decorative. When true, accessibility-related attributes
+     * are updated so that the rendered element is removed from the accessibility tree.
+     */
+    decorative?: boolean;
+}
+
+@Directive({
+    selector: 'div[rdxSeparatorRoot]',
+    standalone: true,
+    host: {
+        '[attr.role]': 'decorative ? "none" : "separator"',
+        // `aria-orientation` defaults to `horizontal` so we only need it if `orientation` is vertical
+        '[attr.aria-orientation]': '!decorative && orientation === "vertical" ? "vertical" : null',
+        '[attr.data-orientation]': 'orientation'
+    }
+})
+export class RdxSeparatorRootDirective implements SeparatorProps {
+    @Input() orientation: Orientation = DEFAULT_ORIENTATION;
+
+    @Input({ transform: booleanAttribute }) decorative = false;
+}

package/separator/stories/separator.docs.mdx

@@ -0,0 +1,37 @@
+import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
+import { RdxSeparatorRootDirective } from '../src/separator.directive';
+import * as SeparatorDirectiveStories from './separator.stories';
+
+<Meta title="Primitives/Separator" />
+
+# Separator
+
+#### Visually or semantically separates content.
+
+<Canvas sourceState="hidden" of={SeparatorDirectiveStories.Default} />
+
+## Features
+
+- ✅ Supports horizontal and vertical orientations.
+
+## Usage
+
+Get started with importing the directive:
+
+```typescript
+import { RdxSeparatorRootDirective } from '@radix-ng/primitives/separator';
+```
+
+## Examples
+
+```html
+<div rdxSeparatorRoot decorative="decorative" orientation="vertical"></div>
+```
+
+## API Reference
+
+<ArgTypes of={RdxSeparatorRootDirective} />
+
+## Accessibility
+
+Adheres to the [`separator` role requirements](https://www.w3.org/TR/wai-aria-1.2/#separator).