@radix-ng/primitives 0.11.1 → 0.12.1

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());
+        }
+    }
+}

package/tabs/stories/tabs.stories.ts

@@ -0,0 +1,213 @@
+import { componentWrapperDecorator, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { RdxTabsContentDirective } from '../src/tabs-content.directive';
+import { RdxTabsListDirective } from '../src/tabs-list.directive';
+import { RdxTabsRootDirective } from '../src/tabs-root.directive';
+import { RdxTabsTriggerDirective } from '../src/tabs-trigger.directive';
+
+export default {
+    title: 'Primitives/Tabs',
+    decorators: [
+        moduleMetadata({
+            imports: [
+                RdxTabsRootDirective,
+                RdxTabsListDirective,
+                RdxTabsTriggerDirective,
+                RdxTabsContentDirective
+            ]
+        }),
+        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 rdxTabsRoot defaultValue="tab1" class="TabsRoot">
+    <div rdxTabsList class="TabsList">
+        <button rdxTabsTrigger value="tab1" class="TabsTrigger">Account</button>
+        <button rdxTabsTrigger value="tab2" class="TabsTrigger">Password</button>
+    </div>
+    <div rdxTabsContent class="TabsContent" value="tab1">
+    <p class="Text">Make changes to your account here. Click save when you're done.</p>
+      <fieldset class="Fieldset">
+        <label class="Label" for="name">
+          Name
+        </label>
+        <input class="Input" id="name" value="Pedro Duarte" />
+      </fieldset>
+      <fieldset class="Fieldset">
+        <label class="Label" for="username">
+          Username
+        </label>
+        <input class="Input" id="username" value="@peduarte" />
+      </fieldset>
+      <div style="display: flex; margin-top: 20px; justify-content: flex-end; ">
+        <button class="Button green">Save changes</button>
+      </div>
+</div>
+    <div rdxTabsContent class="TabsContent" value="tab2">
+        <p class="Text">Change your password here. After saving, you'll be logged out.</p>
+        <fieldset class="Fieldset">
+            <label class="Label" for="currentPassword">
+              Current password
+            </label>
+            <input class="Input" id="currentPassword" type="password" />
+        </fieldset>
+        <fieldset class="Fieldset">
+            <label class="Label" for="newPassword">
+              New password
+            </label>
+            <input class="Input" id="newPassword" type="password" />
+          </fieldset>
+          <fieldset class="Fieldset">
+            <label class="Label" for="confirmPassword">
+              Confirm password
+            </label>
+            <input class="Input" id="confirmPassword" type="password" />
+          </fieldset>
+          <div style="display: flex; margin-top: 20px; justify-content: flex-end;">
+            <button class="Button green">Change password</button>
+          </div>
+    </div>
+</div>
+
+<style>
+/* reset */
+button,
+fieldset,
+input {
+    all: unset;
+}
+
+.TabsRoot {
+    display: flex;
+    flex-direction: column;
+    width: 300px;
+    box-shadow: 0 2px 10px var(--black-a4);
+}
+
+.TabsList {
+    flex-shrink: 0;
+    display: flex;
+    border-bottom: 1px solid var(--mauve-6);
+}
+
+.TabsTrigger {
+    font-family: inherit;
+    background-color: white;
+    padding: 0 20px;
+    height: 45px;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 15px;
+    line-height: 1;
+    color: var(--mauve-11);
+    user-select: none;
+}
+.TabsTrigger:first-child {
+    border-top-left-radius: 6px;
+}
+.TabsTrigger:last-child {
+    border-top-right-radius: 6px;
+}
+.TabsTrigger:hover {
+    color: var(--violet-11);
+}
+.TabsTrigger[data-state='active'] {
+    color: var(--violet-11);
+    box-shadow:
+        inset 0 -1px 0 0 currentColor,
+        0 1px 0 0 currentColor;
+}
+.TabsTrigger:focus {
+    position: relative;
+    box-shadow: 0 0 0 2px black;
+}
+
+.TabsContent {
+    flex-grow: 1;
+    padding: 20px;
+    background-color: white;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+    outline: none;
+}
+.TabsContent:focus {
+    box-shadow: 0 0 0 2px black;
+}
+
+.Text {
+  margin-top: 0;
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+.Fieldset {
+  margin-bottom: 15px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.Label {
+  font-size: 13px;
+  line-height: 1;
+  margin-bottom: 10px;
+  color: var(--violet-12);
+  display: block;
+}
+
+.Input {
+  flex: 1 0 auto;
+  border-radius: 4px;
+  padding: 0 10px;
+  font-size: 15px;
+  line-height: 1;
+  color: var(--violet-11);
+  box-shadow: 0 0 0 1px var(--violet-7);
+  height: 35px;
+}
+.Input:focus {
+  box-shadow: 0 0 0 2px var(--violet-8);
+}
+
+.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.green {
+  background-color: var(--green-4);
+  color: var(--green-11);
+}
+.Button.green:hover {
+  background-color: var(--green-5);
+}
+.Button.green:focus {
+  box-shadow: 0 0 0 2px var(--green-7);
+}
+
+</style>
+`
+    })
+};

package/test-setup.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';

package/toggle/__tests__/toggle.directive.spec.ts

@@ -0,0 +1,87 @@
+import { Component, DebugElement, Input } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { RdxToggleDirective } from '../src/toggle.directive';
+
+@Component({
+    template:
+        '<button rdxToggle [pressed]="pressed" [disabled]="disabled" (onPressedChange)="onToggle($event)">Toggle</button>'
+})
+class TestComponent {
+    @Input() pressed = false;
+    @Input() disabled = false;
+
+    onToggle(pressed: boolean) {
+        this.pressed = pressed;
+    }
+}
+
+describe('RdxToggleDirective', () => {
+    let component: TestComponent;
+    let fixture: ComponentFixture<TestComponent>;
+    let button: DebugElement;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [RdxToggleDirective],
+            declarations: [TestComponent]
+        }).compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(TestComponent);
+        component = fixture.componentInstance;
+        button = fixture.debugElement.query(By.css('button'));
+        fixture.detectChanges();
+    });
+
+    it('should initialize with default values', () => {
+        expect(component.pressed).toBe(false);
+        expect(component.disabled).toBe(false);
+    });
+
+    it('should apply the correct aria-pressed attribute', () => {
+        expect(button.nativeElement.getAttribute('aria-pressed')).toBe('false');
+        component.pressed = true;
+        fixture.detectChanges();
+        expect(button.nativeElement.getAttribute('aria-pressed')).toBe('true');
+    });
+
+    it('should apply the correct data-state attribute', () => {
+        expect(button.nativeElement.getAttribute('data-state')).toBe('off');
+        component.pressed = true;
+        fixture.detectChanges();
+        expect(button.nativeElement.getAttribute('data-state')).toBe('on');
+    });
+
+    it('should apply the correct data-disabled attribute', () => {
+        expect(button.nativeElement.getAttribute('data-disabled')).toBe('false');
+        component.disabled = true;
+        fixture.detectChanges();
+        expect(button.nativeElement.getAttribute('data-disabled')).toBe('true');
+    });
+
+    it('should toggle the pressed state on click', () => {
+        expect(component.pressed).toBe(false);
+        button.nativeElement.click();
+        expect(component.pressed).toBe(true);
+        button.nativeElement.click();
+        expect(component.pressed).toBe(false);
+    });
+
+    it('should not toggle the pressed state when disabled', () => {
+        component.disabled = true;
+        fixture.detectChanges();
+        expect(component.pressed).toBe(false);
+        button.nativeElement.click();
+        expect(component.pressed).toBe(false);
+    });
+
+    it('should emit the pressed state change event on toggle', () => {
+        const spy = jest.spyOn(component, 'onToggle');
+        button.nativeElement.click();
+        expect(spy).toHaveBeenCalledWith(true);
+        button.nativeElement.click();
+        expect(spy).toHaveBeenCalledWith(false);
+    });
+});

package/toggle/ng-package.json

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

package/toggle/src/toggle.directive.ts

@@ -0,0 +1,49 @@
+import { Directive, EventEmitter, input, model, Output } from '@angular/core';
+
+export interface ToggleProps {
+    /**
+     * The controlled state of the toggle.
+     */
+    pressed?: boolean;
+    /**
+     * The state of the toggle when initially rendered. Use `defaultPressed`
+     * if you do not need to control the state of the toggle.
+     * @defaultValue false
+     */
+    defaultPressed?: boolean;
+    /**
+     * The callback that fires when the state of the toggle changes.
+     */
+    onPressedChange?: EventEmitter<boolean>;
+}
+
+@Directive({
+    selector: 'button[rdxToggle]',
+    exportAs: 'rdxToggle',
+    standalone: true,
+    host: {
+        type: 'button',
+        '[attr.aria-pressed]': 'pressed()',
+        '[attr.data-state]': 'pressed() ? "on" : "off"',
+        '[attr.data-disabled]': 'disabled()',
+
+        '(click)': 'toggle()'
+    }
+})
+export class RdxToggleDirective {
+    readonly defaultPressed = input<boolean>(false);
+    readonly pressed = model<boolean>(this.defaultPressed());
+    readonly disabled = input<boolean>(false);
+
+    /**
+     * Event emitted when the toggle is pressed.
+     */
+    @Output() readonly onPressedChange = new EventEmitter<boolean>();
+
+    protected toggle(): void {
+        if (!this.disabled()) {
+            this.pressed.set(!this.pressed());
+            this.onPressedChange.emit(this.pressed());
+        }
+    }
+}

package/toggle/stories/toggle.docs.mdx

@@ -0,0 +1,60 @@
+import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
+import * as ToggleDirectiveStories from './toggle.stories';
+import { RdxToggleDirective } from '../src/toggle.directive';
+
+<Meta title="Primitives/Toggle" />
+
+# Toggle
+
+#### A two-\_state button that can be either on or off.
+
+<Canvas sourceState="hidden" of={ToggleDirectiveStories.Default} />
+
+## Features
+
+- ✅ Full keyboard navigation.
+- ✅ Can be controlled or uncontrolled.
+
+## Import
+
+Get started with importing the directives:
+
+```typescript
+import { RdxToggleDirective } from '@radix-ng/primitives/toggle';
+```
+
+## Examples
+
+```html
+<button rdxToggle aria-label="Toggle italic">
+  <icon />
+</button>
+```
+
+## API Reference
+
+### RdxToggleDirective
+
+<ArgTypes of={RdxToggleDirective} />
+
+<Markdown>
+  {`
+  | Data Attribute | Value |
+  | ----------- | --------- |
+  | [data-state]       | "on" or "off"   |
+  | [data-disabled]    | Present when disabled      |
+  `}
+</Markdown>
+
+## Accessibility
+
+### Keyboard Interactions
+
+<Markdown>
+  {`
+  | Key | Description |
+  | ----------- | --------- |
+  | Space       | Activates/deactivates the toggle.       |
+  | Enter       | Activates/deactivates the toggle.  |
+  `}
+</Markdown>