@radix-ng/primitives 0.11.0 → 0.12.0

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"
+    ]
+}

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+    "compilerOptions": {
+        "target": "es2022",
+        "useDefineForClassFields": false,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ],
+    "extends": "../../tsconfig.base.json",
+    "angularCompilerOptions": {
+        "enableI18nLegacyMessageIdFormat": false,
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "strictTemplates": true
+    }
+}

package/tsconfig.lib.json

@@ -0,0 +1,19 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../dist/out-tsc",
+        "declaration": true,
+        "declarationMap": true,
+        "inlineSources": true,
+        "types": []
+    },
+    "exclude": [
+        "**/*.spec.ts",
+        "test-setup.ts",
+        "jest.config.ts",
+        "**/*.test.ts",
+        "**/*.stories.ts",
+        "**/*.stories.js"
+    ],
+    "include": ["**/*.ts"]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,12 @@
+{
+    "extends": "./tsconfig.lib.json",
+    "compilerOptions": {
+        "declarationMap": false,
+        "paths": {
+            "@radix-ng/primitives/*": ["./dist/primitives/*"]
+        }
+    },
+    "angularCompilerOptions": {
+        "compilationMode": "partial"
+    }
+}

package/tsconfig.spec.json

@@ -0,0 +1,11 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../dist/out-tsc",
+        "module": "commonjs",
+        "target": "es2016",
+        "types": ["jest", "node"]
+    },
+    "files": ["test-setup.ts"],
+    "include": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"]
+}

package/visually-hidden/README.md

@@ -0,0 +1,3 @@
+# @radix-ng/primitives/visually-hidden
+
+Secondary entry point of `@radix-ng/primitives`. It can be used by importing from `@radix-ng/primitives/visually-hidden`.

package/visually-hidden/stories/visually-hidden.docs.mdx

@@ -0,0 +1,36 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Utilities/Visually Hidden" />
+
+# Visually Hidden
+
+#### Hides content from the screen in an accessible way.
+
+#### You can use also [a11y](https://material.angular.io/cdk/a11y), they also have an auxiliary class for this.
+
+## Features
+
+- ✅ Visually hides content while preserving it for assistive technology.
+
+## Import
+
+Screen readers and other assistive technology skip elements that have display: none, visibility: hidden, opacity: 0, height: 0, or width: 0. In some cases you may need to visually hide an element while keeping it available to assistive technology.
+You can do so using the a11y-visually-hidden Sass mixin, which emits the .cdk-visually-hidden CSS class:
+
+```scss
+@use '@angular/cdk';
+
+@include cdk.a11y-visually-hidden();
+```
+
+## Examples
+
+```html
+<div class="custom-checkbox">
+  <input class="cdk-visually-hidden" type="checkbox" />
+</div>
+```
+
+## Accessibility
+
+This is useful in certain scenarios as an alternative to traditional labelling with aria-label or aria-labelledby.

package/accordion/src/accordion-content.directive.d.ts

@@ -1,16 +0,0 @@
-import { InjectionToken } from '@angular/core';
-import { RdxAccordionItemDirective } from './accordion-item.directive';
-import * as i0 from "@angular/core";
-export declare const RdxAccordionContentToken: InjectionToken<RdxAccordionContentDirective>;
-export declare class RdxAccordionContentDirective {
-    protected readonly item: RdxAccordionItemDirective;
-    get style(): {
-        width: string | number;
-        height?: undefined;
-    } | {
-        height: string | number;
-        width?: undefined;
-    };
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxAccordionContentDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxAccordionContentDirective, "[rdxAccordionContent]", ["rdxAccordionContent"], {}, {}, never, never, true, never>;
-}

package/accordion/src/accordion-header.directive.d.ts

@@ -1,7 +0,0 @@
-import { RdxAccordionItemDirective } from './accordion-item.directive';
-import * as i0 from "@angular/core";
-export declare class RdxAccordionHeaderDirective {
-    protected readonly item: RdxAccordionItemDirective;
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxAccordionHeaderDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxAccordionHeaderDirective, "[rdxAccordionHeader]", never, {}, {}, never, never, true, never>;
-}