@radix-ng/primitives 0.12.1 → 0.13.0

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

@@ -1,158 +0,0 @@
-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

@@ -1,148 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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

@@ -1,95 +0,0 @@
-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

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

package/tsconfig.json

@@ -1,29 +0,0 @@
-{
-    "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

@@ -1,19 +0,0 @@
-{
-    "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

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

package/tsconfig.spec.json

@@ -1,11 +0,0 @@
-{
-    "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

@@ -1,3 +0,0 @@
-# @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

@@ -1,36 +0,0 @@
-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.