@radix-ng/primitives 0.11.1 → 0.12.0

package/toggle/stories/toggle.stories.ts

@@ -0,0 +1,84 @@
+import { componentWrapperDecorator, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { Italic, LucideAngularModule } from 'lucide-angular';
+import { RdxToggleDirective } from '../src/toggle.directive';
+
+export default {
+    title: 'Primitives/Toggle',
+    decorators: [
+        moduleMetadata({
+            imports: [
+                RdxToggleDirective,
+                LucideAngularModule,
+                LucideAngularModule.pick({ Italic })
+            ]
+        }),
+        componentWrapperDecorator(
+            (story) =>
+                `<div class="radix-themes light light-theme"
+                      data-radius="medium"
+                      data-scaling="100%">${story}
+
+                        <style>
+                            button {
+                                all: unset;
+                            }
+                            .Toggle {
+                              background-color: white;
+                              color: var(--mauve-11);
+                              height: 35px;
+                              width: 35px;
+                              border-radius: 4px;
+                              display: flex;
+                              font-size: 15px;
+                              line-height: 1;
+                              align-items: center;
+                              justify-content: center;
+                              box-shadow: 0 2px 10px var(--black-a7);
+                            }
+                            .Toggle:hover {
+                              background-color: var(--violet-3);
+                            }
+                            .Toggle[data-state='on'] {
+                              background-color: var(--violet-6);
+                              color: var(--violet-12);
+                            }
+                            .Toggle:focus {
+                              box-shadow: 0 0 0 2px black;
+                            }
+                        </style>
+
+                      </div>`
+        )
+    ],
+    argTypes: {
+        pressed: {
+            control: 'boolean'
+        }
+    }
+} as Meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+    render: () => ({
+        template: `
+<button rdxToggle aria-label="Toggle italic" class="Toggle">
+    <lucide-angular name="italic" size="16"></lucide-angular>
+</button>
+`
+    })
+};
+
+export const State: Story = {
+    render: (args) => ({
+        props: {
+            ...args,
+            pressed: true
+        },
+        template: `
+<button rdxToggle [pressed]="pressed" aria-label="Toggle italic" class="Toggle">
+    <lucide-angular name="italic" size="16"></lucide-angular>
+</button>
+`
+    })
+};

package/toggle-group/ng-package.json

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

package/toggle-group/src/toggle-group-button.directive.ts

@@ -0,0 +1,73 @@
+import { booleanAttribute, Directive, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { RdxToggleGroupButtonToken } from './toggle-group-button.token';
+import { injectToggleGroup } from './toggle-group.token';
+
+@Directive({
+    selector: 'button[rdxToggleGroupButton]',
+    standalone: true,
+    providers: [{ provide: RdxToggleGroupButtonToken, useExisting: RdxToggleGroupButtonDirective }],
+    host: {
+        role: 'radio',
+        '[attr.aria-checked]': 'checked',
+        '[attr.aria-disabled]': 'disabled || toggleGroup.disabled',
+        '[attr.data-disabled]': 'disabled || toggleGroup.disabled',
+        '[attr.data-state]': 'checked ? "on" : "off"',
+        '[attr.data-orientation]': 'toggleGroup.orientation',
+
+        '(click)': 'toggle()'
+    }
+})
+export class RdxToggleGroupButtonDirective implements OnChanges {
+    /**
+     * Access the toggle group.
+     * @ignore
+     */
+    protected readonly toggleGroup = injectToggleGroup();
+
+    /**
+     * The value of this toggle button.
+     */
+    @Input({ required: true }) value!: string;
+
+    /**
+     * Whether this toggle button is disabled.
+     * @default false
+     */
+    @Input({ transform: booleanAttribute }) disabled = false;
+
+    /**
+     * Whether this toggle button is checked.
+     */
+    protected get checked(): boolean {
+        return this.toggleGroup.isSelected(this.value);
+    }
+
+    /**
+     * @ignore
+     */
+    ngOnChanges(changes: SimpleChanges): void {
+        if ('disabled' in changes) {
+            // TODO
+        }
+    }
+
+    /**
+     * @ignore
+     */
+    toggle(): void {
+        if (this.disabled) {
+            return;
+        }
+
+        this.toggleGroup.toggle(this.value);
+    }
+
+    /**
+     * Ensure the disabled state is propagated to the roving focus item.
+     * @internal
+     * @ignore
+     */
+    updateDisabled(): void {
+        // TODO
+    }
+}

package/toggle-group/src/toggle-group-button.token.ts

@@ -0,0 +1,8 @@
+import { inject, InjectionToken } from '@angular/core';
+import type { RdxToggleGroupButtonDirective } from './toggle-group-button.directive';
+
+export const RdxToggleGroupButtonToken = new InjectionToken<RdxToggleGroupButtonDirective>('RdxToggleGroupButtonToken');
+
+export function injectToggleGroupButton(): RdxToggleGroupButtonDirective {
+    return inject(RdxToggleGroupButtonToken);
+}

package/toggle-group/src/toggle-group-multi.directive.ts

@@ -0,0 +1,158 @@
+import {
+    AfterContentInit,
+    booleanAttribute,
+    ContentChildren,
+    Directive,
+    EventEmitter,
+    Input,
+    OnChanges,
+    QueryList,
+    SimpleChanges
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import type { RdxToggleGroupButtonDirective } from './toggle-group-button.directive';
+import { RdxToggleGroupButtonToken } from './toggle-group-button.token';
+import { RdxToggleGroupToken } from './toggle-group.token';
+
+@Directive({
+    selector: '[rdxToggleGroupMulti]',
+    standalone: true,
+    providers: [
+        { provide: RdxToggleGroupToken, useExisting: RdxToggleGroupMultiDirective },
+        { provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupMultiDirective, multi: true }
+    ],
+    host: {
+        role: 'group',
+        '[attr.data-orientation]': 'orientation',
+        '(focusout)': 'onTouched?.()'
+    }
+})
+export class RdxToggleGroupMultiDirective implements OnChanges, AfterContentInit, ControlValueAccessor {
+    /**
+     * The selected toggle button.
+     */
+    @Input('rdxToggleGroupMultiValue') value: ReadonlyArray<string> = [];
+
+    /**
+     * The orientation of the toggle group.
+     * @default 'horizontal'
+     */
+    @Input('rdxToggleGroupMultiOrientation') orientation: 'horizontal' | 'vertical' = 'horizontal';
+
+    /**
+     * Whether the toggle group is disabled.
+     * @default false
+     */
+    @Input({ alias: 'rdxToggleGroupMultiDisabled', transform: booleanAttribute }) disabled = false;
+
+    /**
+     * Whether the toggle group roving focus should wrap.
+     * @default true
+     */
+    @Input({ alias: 'rdxToggleGroupMultiWrap', transform: booleanAttribute }) wrap = true;
+
+    /**
+     * Event emitted when the selected toggle button changes.
+     */
+    @Input('rdxToggleGroupMultiValueChange') readonly valueChange = new EventEmitter<ReadonlyArray<string>>();
+
+    /**
+     * Access the buttons in the toggle group.
+     * @ignore
+     */
+    @ContentChildren(RdxToggleGroupButtonToken)
+    protected buttons?: QueryList<RdxToggleGroupButtonDirective>;
+
+    /**
+     * The value change callback.
+     * @ignore
+     */
+    private onChange?: (value: ReadonlyArray<string>) => void;
+
+    /**
+     * onTouch function registered via registerOnTouch (ControlValueAccessor).
+     * @ignore
+     */
+    protected onTouched?: () => void;
+
+    /**
+     * @ignore
+     */
+    ngOnChanges(changes: SimpleChanges): void {
+        if ('disabled' in changes) {
+            this.buttons?.forEach((button) => button.updateDisabled());
+        }
+    }
+
+    /**
+     * @ignore
+     */
+    ngAfterContentInit(): void {
+        if (this.disabled) {
+            this.buttons?.forEach((button) => button.updateDisabled());
+        }
+    }
+
+    /**
+     * Determine if a value is selected.
+     * @param value The value to check.
+     * @returns Whether the value is selected.
+     * @ignore
+     */
+    isSelected(value: string): boolean {
+        return this.value.includes(value);
+    }
+
+    /**
+     * Toggle a value.
+     * @param value The value to toggle.
+     * @ignore
+     */
+    toggle(value: string): void {
+        if (this.disabled) {
+            return;
+        }
+
+        this.value = this.value.includes(value) ? this.value.filter((v) => v !== value) : [...this.value, value];
+
+        this.valueChange.emit(this.value);
+        this.onChange?.(this.value);
+    }
+
+    /**
+     * Select a value from Angular forms.
+     * @param value The value to select.
+     * @ignore
+     */
+    writeValue(value: ReadonlyArray<string>): void {
+        this.value = value;
+    }
+
+    /**
+     * Register a callback to be called when the value changes.
+     * @param fn The callback to register.
+     * @ignore
+     */
+    registerOnChange(fn: (value: ReadonlyArray<string>) => void): void {
+        this.onChange = fn;
+    }
+
+    /**
+     * Register a callback to be called when the toggle group is touched.
+     * @param fn The callback to register.
+     * @ignore
+     */
+    registerOnTouched(fn: () => void): void {
+        this.onTouched = fn;
+    }
+
+    /**
+     * Set the disabled state of the toggle group.
+     * @param isDisabled Whether the toggle group is disabled.
+     * @ignore
+     */
+    setDisabledState(isDisabled: boolean): void {
+        this.disabled = isDisabled;
+        this.buttons?.forEach((button) => button.updateDisabled());
+    }
+}

package/toggle-group/src/toggle-group.directive.ts

@@ -0,0 +1,148 @@
+import {
+    AfterContentInit,
+    booleanAttribute,
+    ContentChildren,
+    Directive,
+    EventEmitter,
+    Input,
+    OnChanges,
+    QueryList,
+    SimpleChanges
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import type { RdxToggleGroupButtonDirective } from './toggle-group-button.directive';
+import { RdxToggleGroupButtonToken } from './toggle-group-button.token';
+import { RdxToggleGroupToken } from './toggle-group.token';
+
+@Directive({
+    selector: '[rdxToggleGroup]',
+    standalone: true,
+    providers: [
+        { provide: RdxToggleGroupToken, useExisting: RdxToggleGroupDirective },
+        { provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupDirective, multi: true }
+    ],
+    host: {
+        role: 'group',
+        '[attr.data-orientation]': 'orientation',
+        '(focusout)': 'onTouched?.()'
+    }
+})
+export class RdxToggleGroupDirective implements OnChanges, AfterContentInit, ControlValueAccessor {
+    /**
+     * The selected toggle button.
+     */
+    @Input() value: string | null = null;
+
+    /**
+     * The orientation of the toggle group.
+     * @default 'horizontal'
+     */
+    @Input() orientation: 'horizontal' | 'vertical' = 'horizontal';
+
+    /**
+     * Whether the toggle group is disabled.
+     * @default false
+     */
+    @Input({ transform: booleanAttribute }) disabled = false;
+
+    /**
+     * Whether the toggle group roving focus should wrap.
+     * @default true
+     */
+    @Input({ transform: booleanAttribute }) wrap = true;
+
+    /**
+     * Event emitted when the selected toggle button changes.
+     */
+    @Input() readonly valueChange = new EventEmitter<string | null>();
+
+    /**
+     * Access the buttons in the toggle group.
+     */
+    @ContentChildren(RdxToggleGroupButtonToken)
+    protected buttons?: QueryList<RdxToggleGroupButtonDirective>;
+
+    /**
+     * The value change callback.
+     */
+    private onChange?: (value: string | null) => void;
+
+    /**
+     * onTouch function registered via registerOnTouch (ControlValueAccessor).
+     */
+    protected onTouched?: () => void;
+
+    ngOnChanges(changes: SimpleChanges): void {
+        if ('disabled' in changes) {
+            this.buttons?.forEach((button) => button.updateDisabled());
+        }
+    }
+
+    ngAfterContentInit(): void {
+        if (this.disabled) {
+            this.buttons?.forEach((button) => button.updateDisabled());
+        }
+    }
+
+    /**
+     * Determine if a value is selected.
+     * @param value The value to check.
+     * @returns Whether the value is selected.
+     * @internal
+     */
+    isSelected(value: string): boolean {
+        return this.value === value;
+    }
+
+    /**
+     * Toggle a value.
+     * @param value The value to toggle.
+     * @internal
+     */
+    toggle(value: string): void {
+        if (this.disabled) {
+            return;
+        }
+
+        this.value = this.value === value ? null : value;
+        this.valueChange.emit(this.value);
+        this.onChange?.(this.value);
+    }
+
+    /**
+     * Select a value from Angular forms.
+     * @param value The value to select.
+     * @internal
+     */
+    writeValue(value: string): void {
+        this.value = value;
+    }
+
+    /**
+     * Register a callback to be called when the value changes.
+     * @param fn The callback to register.
+     * @internal
+     */
+    registerOnChange(fn: (value: string | null) => void): void {
+        this.onChange = fn;
+    }
+
+    /**
+     * Register a callback to be called when the toggle group is touched.
+     * @param fn The callback to register.
+     * @internal
+     */
+    registerOnTouched(fn: () => void): void {
+        this.onTouched = fn;
+    }
+
+    /**
+     * Set the disabled state of the toggle group.
+     * @param isDisabled Whether the toggle group is disabled.
+     * @internal
+     */
+    setDisabledState(isDisabled: boolean): void {
+        this.disabled = isDisabled;
+        this.buttons?.forEach((button) => button.updateDisabled());
+    }
+}

package/toggle-group/src/toggle-group.token.ts

@@ -0,0 +1,11 @@
+import { inject, InjectionToken } from '@angular/core';
+import type { RdxToggleGroupMultiDirective } from './toggle-group-multi.directive';
+import type { RdxToggleGroupDirective } from './toggle-group.directive';
+
+export const RdxToggleGroupToken = new InjectionToken<RdxToggleGroupDirective | RdxToggleGroupMultiDirective>(
+    'RdxToggleGroupToken'
+);
+
+export function injectToggleGroup(): RdxToggleGroupDirective | RdxToggleGroupMultiDirective {
+    return inject(RdxToggleGroupToken);
+}

package/toggle-group/stories/toggle-group.docs.mdx

@@ -0,0 +1,87 @@
+import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
+import * as ToggleGroupDirectiveStories from './toggle-group.stories';
+import { RdxToggleGroupDirective } from '../src/toggle-group.directive';
+import { RdxToggleGroupButtonDirective } from '../src/toggle-group-button.directive';
+
+<Meta title="Primitives/Toggle Group" />
+
+# Toggle Group
+
+#### A set of two-\_state buttons that can be toggled on or off.
+
+<Canvas sourceState="hidden" of={ToggleGroupDirectiveStories.Default} />
+
+## Features
+
+- ✅ Full keyboard navigation.
+- ✅ Supports horizontal/vertical orientation.
+- ✅ Support single and multiple pressed buttons.
+- ✅ Can be controlled or uncontrolled.
+
+## Import
+
+Get started with importing the directives:
+
+```typescript
+import {
+  RdxToggleGroupDirective,
+  RdxToggleGroupButtonDirective,
+  RdxToggleGroupMultiDirective
+} from '@radix-ng/primitives/toggle-group';
+```
+
+## Examples
+
+```html
+<div class="ToggleGroup" rdxToggleGroup value="center" aria-label="Text alignment">
+  <button class="ToggleGroupItem" rdxToggleGroupButton value="left" aria-label="Left aligned">
+    <lucide-icon name="align-left" size="16"></lucide-icon>
+  </button>
+  <button class="ToggleGroupItem" rdxToggleGroupButton value="center" aria-label="Center aligned">
+    <lucide-icon name="align-center" size="16"></lucide-icon>
+  </button>
+  <button class="ToggleGroupItem" rdxToggleGroupButton value="right" aria-label="Right aligned">
+    <lucide-icon name="align-right" size="16"></lucide-icon>
+  </button>
+</div>
+```
+
+## API Reference
+
+### RdxToggleGroupDirective
+
+<ArgTypes of={RdxToggleGroupDirective} />
+
+<Markdown>
+  {`
+  | Data Attribute | Value |
+  | ----------- | --------- |
+  | [data-orientation]       | "vertical" or "horizontal"   |
+  `}
+</Markdown>
+
+### RdxToggleGroupButtonDirective
+
+<ArgTypes of={RdxToggleGroupButtonDirective} />
+
+## Accessibility
+
+Uses [roving tabindex](https://www.w3.org/TR/wai-aria-practices-1.2/examples/radio/radio.html) to manage focus movement among items.
+
+### Keyboard Interactions
+
+<Markdown>
+  {`
+  | Key | Description |
+  | ----------- | --------- |
+  | Tab         | Moves focus to either the pressed item or the first item in the group. |
+  | Space       | Activates/deactivates the item.       |
+  | Enter       | Activates/deactivates the item.  |
+  | ArrowDown   |    Moves focus to the next item in the group. |
+  | ArrowRight  | Moves focus to the next item in the group. |
+  | ArrowUp     | Moves focus to the previous item in the group. |
+  | ArrowLeft   | Moves focus to the previous item in the group.  |
+  | Home        | Moves focus to the first item. |
+  | End         | Moves focus to the last item.  |
+  `}
+</Markdown>

package/toggle-group/stories/toggle-group.stories.ts

@@ -0,0 +1,95 @@
+import { componentWrapperDecorator, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { AlignCenter, AlignLeft, AlignRight, LucideAngularModule } from 'lucide-angular';
+import { RdxToggleGroupButtonDirective } from '../src/toggle-group-button.directive';
+import { RdxToggleGroupMultiDirective } from '../src/toggle-group-multi.directive';
+import { RdxToggleGroupDirective } from '../src/toggle-group.directive';
+
+export default {
+    title: 'Primitives/Toggle Group',
+    decorators: [
+        moduleMetadata({
+            imports: [
+                RdxToggleGroupDirective,
+                RdxToggleGroupButtonDirective,
+                RdxToggleGroupMultiDirective,
+                LucideAngularModule,
+                LucideAngularModule.pick({ AlignRight, AlignLeft, AlignCenter })
+            ]
+        }),
+        componentWrapperDecorator(
+            (story) =>
+                `<div class="radix-themes light light-theme"
+                      data-radius="medium"
+                      data-scaling="100%">${story}
+
+                        <style>
+                            button {
+                                all: unset;
+                            }
+                            .ToggleGroup {
+                              display: inline-flex;
+                              background-color: var(--mauve-6);
+                              border-radius: 4px;
+                              box-shadow: 0 2px 10px var(--black-a7);
+                            }
+
+                            .ToggleGroupItem {
+                              background-color: white;
+                              color: var(--mauve-11);
+                              height: 35px;
+                              width: 35px;
+                              display: flex;
+                              font-size: 15px;
+                              line-height: 1;
+                              align-items: center;
+                              justify-content: center;
+                              margin-left: 1px;
+                            }
+                            .ToggleGroupItem:first-child {
+                              margin-left: 0;
+                              border-top-left-radius: 4px;
+                              border-bottom-left-radius: 4px;
+                            }
+                            .ToggleGroupItem:last-child {
+                              border-top-right-radius: 4px;
+                              border-bottom-right-radius: 4px;
+                            }
+                            .ToggleGroupItem:hover {
+                              background-color: var(--violet-3);
+                            }
+                            .ToggleGroupItem[data-state='on'] {
+                              background-color: var(--violet-5);
+                              color: var(--violet-11);
+                            }
+                            .ToggleGroupItem:focus {
+                              position: relative;
+                              box-shadow: 0 0 0 2px black;
+                            }
+                        </style>
+
+                      </div>`
+        )
+    ]
+} as Meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+    render: () => ({
+        template: `
+
+    <div rdxToggleGroup value="center" aria-label="Text alignment" class="ToggleGroup">
+        <button rdxToggleGroupButton value="left" aria-label="Left aligned" class="ToggleGroupItem" >
+            <lucide-icon name="align-left" size="16"></lucide-icon>
+        </button>
+        <button rdxToggleGroupButton value="center" aria-label="Center aligned" class="ToggleGroupItem">
+            <lucide-icon name="align-center" size="16"></lucide-icon>
+        </button>
+        <button rdxToggleGroupButton value="right" aria-label="Right aligned" class="ToggleGroupItem">
+            <lucide-icon name="align-right" size="16"></lucide-icon>
+        </button>
+    </div>
+
+`
+    })
+};

package/tsconfig.doc.json

@@ -0,0 +1,11 @@
+{
+    "include": ["**/*.ts"],
+    "exclude": [
+        "**/*.spec.ts",
+        "test-setup.ts",
+        "jest.config.ts",
+        "**/*.test.ts",
+        "**/*.stories.ts",
+        "**/*.stories.js"
+    ]
+}