@radix-ng/primitives 0.1.0 → 0.2.0

package/progress/src/progress.directive.ts

@@ -1,51 +0,0 @@
-import { Directive, Input, numberAttribute } from '@angular/core';
-import { ProgressToken } from './progress.token';
-
-@Directive({
-    selector: '[rdxProgress]',
-    standalone: true,
-    providers: [{ provide: ProgressToken, useExisting: ProgressDirective }],
-    host: {
-        role: 'progressbar',
-        '[attr.aria-valuemax]': 'max',
-        '[attr.aria-valuemin]': '0',
-        '[attr.aria-valuenow]': 'value',
-        '[attr.aria-valuetext]': 'valueLabel(value, max)',
-        '[attr.data-state]': 'state',
-        '[attr.data-value]': 'value',
-        '[attr.data-max]': 'max'
-    }
-})
-export class ProgressDirective {
-    /**
-     * Define the progress value.
-     */
-    @Input({ alias: 'rdxProgressValue', transform: numberAttribute }) value = 0;
-
-    /**
-     * Define the progress max value.
-     * @default 100
-     */
-    @Input({ alias: 'rdxProgressMax', transform: numberAttribute }) max = 100;
-
-    /**
-     * Define a function that returns the progress value label.
-     */
-    @Input('rdxProgressValueLabel') valueLabel: (value: number, max: number) => string = (
-        value,
-        max
-    ) => `${Math.round((value / max) * 100)}%`;
-
-    /**
-     * Get the state of the progress bar.
-     * @returns 'indeterminate' | 'loading' | 'complete'
-     * @internal
-     */
-    get state(): 'indeterminate' | 'loading' | 'complete' {
-        return this.value == null
-            ? 'indeterminate'
-            : this.value === this.max
-            ? 'complete'
-            : 'loading';
-    }
-}

package/progress/src/progress.token.ts

@@ -1,8 +0,0 @@
-import { InjectionToken, inject } from '@angular/core';
-import type { ProgressDirective } from './progress.directive';
-
-export const ProgressToken = new InjectionToken<ProgressDirective>('ProgressDirective');
-
-export function injectProgress(): ProgressDirective {
-    return inject(ProgressToken);
-}

package/progress/stories/progress.docs.mdx

@@ -1,66 +0,0 @@
-import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/addon-docs';
-import { ProgressDirective } from '../src/progress.directive';
-import { ProgressIndicatorDirective } from '../src/progress-indicator.directive';
-import * as ProgressDirectiveStories from "./progress.stories";
-
-<Meta
-    title="Primitives/Progress"
-/>
-
-# Progress
-#### Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
-
-<Canvas sourceState='hidden' of={ProgressDirectiveStories.Default}></Canvas>
-
-## Features
-- ✅ Provides context for assistive technology to read the progress of a task.
-
-## Usage
-
-Get started with importing the directive:
-
-```typescript
-import { ProgressDirective, ProgressIndicatorDirective } from '@radix-ng/primitives/progress';
-```
-
-## Example
-
-```html
-<div rdxProgress [rdxProgressValue]="progress" class="ProgressRoot">
-    <div rdxProgressIndicator
-        [style.transform]="'translateX(-' + (100 - progress) +'%)'"
-        class="ProgressIndicator"
-    ></div>
-</div>
-```
-## API Reference
-
-### ProgressDirective
-<ArgTypes of={ProgressDirective} />
-
-<Markdown>
-    {`
-| Data Attribute | Value |
-| ----------- | --------- |
-| [data-state]    | "complete" or "indeterminate" or "loading"   |
-| [data-value]    | The current value          |
-| [data-max] |  The max value     |
-`}
-</Markdown>
-
-### ProgressIndicatorDirective
-Used to show the progress visually. It also makes progress accessible to assistive technologies.
-
-<Markdown>
-    {`
-| Data Attribute | Value |
-| ----------- | --------- |
-| [data-state]    | "complete" or "indeterminate" or "loading"   |
-| [data-value]    | The current value          |
-| [data-max] |  The max value     |
-`}
-</Markdown>
-
-## Accessibility
-
-Adheres to the [`progressbar` role requirements](https://www.w3.org/WAI/ARIA/apg/patterns/meter).

package/progress/stories/progress.stories.ts

@@ -1,61 +0,0 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { ProgressDirective } from '../src/progress.directive';
-import { ProgressIndicatorDirective } from '../src/progress-indicator.directive';
-
-export default {
-    title: 'Primitives/Progress',
-    decorators: [
-        moduleMetadata({
-            imports: [ProgressDirective, ProgressIndicatorDirective]
-        })
-    ],
-    argTypes: {
-        progress: {
-            options: ['10', '30', '70', '95'],
-            control: { type: 'select' }
-        }
-    }
-} as Meta;
-
-type Story = StoryObj;
-
-export const Default: Story = {
-    args: {
-        progress: 70
-    },
-    render: (args) => ({
-        props: args,
-        template: `
-<style>
-.ProgressRoot {
-  position: relative;
-  overflow: hidden;
-  background: color(display-p3 0 0 0 / 0.7);;
-  border-radius: 99999px;
-  width: 300px;
-  height: 25px;
-
-  /* Fix overflow clipping in Safari */
-  /* https://gist.github.com/domske/b66047671c780a238b51c51ffde8d3a0 */
-  transform: translateZ(0);
-}
-
-.ProgressIndicator {
-  background-color: white;
-  width: 100%;
-  height: 100%;
-  transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
-}
-</style>
-
-<div rdxProgress [rdxProgressValue]="progress" class="ProgressRoot">
-    <div rdxProgressIndicator
-        [style.transform]="'translateX(-' + (100 - progress) +'%)'"
-        class="ProgressIndicator"
-    ></div>
-</div>
-`
-    })
-};
-
-//style(transform: \`translateX(-${100 - progress}%)\`)

package/project.json

@@ -1,90 +0,0 @@
-{
-    "name": "primitives",
-    "$schema": "../../node_modules/nx/schemas/project-schema.json",
-    "sourceRoot": "packages/primitives",
-    "prefix": "rdx",
-    "tags": [],
-    "projectType": "library",
-    "targets": {
-        "build": {
-            "executor": "@nx/angular:package",
-            "outputs": [
-                "{workspaceRoot}/dist/{projectRoot}"
-            ],
-            "options": {
-                "project": "packages/primitives/ng-package.json"
-            },
-            "configurations": {
-                "production": {
-                    "tsConfig": "packages/primitives/tsconfig.lib.prod.json"
-                },
-                "development": {
-                    "tsConfig": "packages/primitives/tsconfig.lib.json"
-                }
-            },
-            "defaultConfiguration": "production"
-        },
-        "test": {
-            "executor": "@nx/jest:jest",
-            "outputs": [
-                "{workspaceRoot}/coverage/{projectRoot}"
-            ],
-            "options": {
-                "jestConfig": "packages/primitives/jest.config.ts"
-            }
-        },
-        "lint": {
-            "executor": "@nx/eslint:lint",
-            "outputs": [
-                "{options.outputFile}"
-            ]
-        },
-        "storybook": {
-            "executor": "@storybook/angular:start-storybook",
-            "options": {
-                "port": 4400,
-                "configDir": "packages/primitives/.storybook",
-                "browserTarget": "primitives:build-storybook",
-                "compodoc": false
-            },
-            "configurations": {
-                "ci": {
-                    "quiet": true
-                }
-            }
-        },
-        "build-storybook": {
-            "executor": "@storybook/angular:build-storybook",
-            "outputs": ["{options.outputDir}"],
-            "options": {
-                "outputDir": "dist/storybook/primitives",
-                "configDir": "packages/primitives/.storybook",
-                "browserTarget": "primitives:build-storybook",
-                "compodoc": false
-            },
-            "configurations": {
-                "ci": {
-                    "quiet": true
-                }
-            }
-        },
-        "test-storybook": {
-            "executor": "nx:run-commands",
-            "options": {
-                "command": "test-storybook -c packages/primitives/.storybook --url=http://localhost:4400"
-            }
-        },
-        "static-storybook": {
-            "executor": "@nx/web:file-server",
-            "options": {
-                "buildTarget": "primitives:build-storybook",
-                "staticFilePath": "dist/storybook/primitives"
-            },
-            "configurations": {
-                "ci": {
-                    "buildTarget": "primitives:build-storybook:ci"
-                }
-            }
-        }
-    }
-}

package/roving-focus/ng-package.json

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

package/roving-focus/src/roving-focus-group.directive.ts

@@ -1,135 +0,0 @@
-import { FocusKeyManager } from '@angular/cdk/a11y';
-import { Directionality } from '@angular/cdk/bidi';
-import {
-    DestroyRef,
-    Directive,
-    Input,
-    OnChanges,
-    OnDestroy,
-    OnInit,
-    QueryList,
-    SimpleChanges,
-    booleanAttribute,
-    inject
-} from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { filter } from 'rxjs';
-import type { RovingFocusItemDirective } from './roving-focus-item.directive';
-import { RovingFocusGroupToken } from './roving-focus-group.token';
-
-@Directive({
-    selector: '[rdxRovingFocusGroup]',
-    standalone: true,
-    providers: [{ provide: RovingFocusGroupToken, useExisting: RovingFocusGroupDirective }]
-})
-export class RovingFocusGroupDirective implements OnInit, OnChanges, OnDestroy {
-    private readonly directionality = inject(Directionality);
-
-    private readonly destroyRef = inject(DestroyRef);
-
-    /**
-     * Create a query list of all the roving focus items.
-     * We don't use ContentChildren as dynamically added items may not be in the correct order.
-     */
-    private readonly items = new QueryList<RovingFocusItemDirective>();
-
-    /**
-     * Create the focus key manager instance.
-     * @internal
-     */
-    readonly keyManager = new FocusKeyManager<RovingFocusItemDirective>(this.items);
-
-    /**
-     * Determine the orientation of the roving focus group.
-     * @default vertical
-     */
-    @Input() orientation: 'horizontal' | 'vertical' = 'vertical';
-
-    /**
-     * Determine if focus should wrap when the end or beginning is reached.
-     * @default true
-     */
-    @Input({ transform: booleanAttribute }) wrap = true;
-
-    ngOnInit(): void {
-        this.keyManager.withWrap(this.wrap);
-
-        this.setOrientation(this.orientation);
-
-        // update the key manager orientation if the document direction changes
-        this.directionality.change
-            .pipe(
-                filter(() => this.orientation === 'horizontal'),
-                takeUntilDestroyed(this.destroyRef)
-            )
-            .subscribe((direction) => this.keyManager.withHorizontalOrientation(direction));
-    }
-
-    ngOnChanges(changes: SimpleChanges): void {
-        if ('orientation' in changes) {
-            this.setOrientation(this.orientation);
-        }
-
-        if ('wrap' in changes) {
-            this.keyManager.withWrap(this.wrap);
-        }
-    }
-
-    ngOnDestroy(): void {
-        this.keyManager.destroy();
-    }
-
-    /**
-     * Register a roving focus item.
-     * @param item The roving focus item to register.
-     */
-    register(item: RovingFocusItemDirective): void {
-        // add the item to the query list by sort the items based on their order
-        this.items.reset([...this.items.toArray(), item].sort((a, b) => a.order - b.order));
-
-        // if this is the first item, make it the active item
-        if (this.items.length === 1) {
-            this.keyManager.updateActiveItem(item);
-        }
-    }
-
-    /**
-     * Unregister a roving focus item.
-     * @param item The roving focus item to unregister.
-     */
-    unregister(item: RovingFocusItemDirective): void {
-        // determine if the item being removed is the active item
-        const isActive = this.keyManager.activeItem === item;
-
-        // remove the item from the query list
-        this.items.reset(this.items.toArray().filter((i) => i !== item));
-
-        // if the item being removed is the active item, make the first item the active item
-        if (isActive) {
-            this.keyManager.updateActiveItem(0);
-        }
-    }
-
-    /**
-     * Handle key events on the roving focus items.
-     * @param event The key event.
-     * @internal
-     */
-    onKeydown(event: KeyboardEvent): void {
-        this.keyManager.onKeydown(event);
-    }
-
-    /**
-     * Set the orientation of the roving focus group.
-     * @param orientation The orientation of the roving focus group.
-     */
-    setOrientation(orientation: 'horizontal' | 'vertical'): void {
-        this.orientation = orientation;
-
-        if (orientation === 'horizontal') {
-            this.keyManager.withHorizontalOrientation(this.directionality.value);
-        } else {
-            this.keyManager.withVerticalOrientation();
-        }
-    }
-}

package/roving-focus/src/roving-focus-group.token.ts

@@ -1,13 +0,0 @@
-import { InjectionToken, inject } from '@angular/core';
-import type { RovingFocusGroupDirective } from './roving-focus-group.directive';
-
-export const RovingFocusGroupToken = new InjectionToken<RovingFocusGroupDirective>(
-    'RovingFocusToken'
-);
-
-/**
- * Inject the roving focus directive instance.
- */
-export function injectRovingFocusGroup(): RovingFocusGroupDirective {
-    return inject(RovingFocusGroupToken);
-}

package/roving-focus/src/roving-focus-item.directive.ts

@@ -1,98 +0,0 @@
-import { FocusableOption } from '@angular/cdk/a11y';
-import {
-    ChangeDetectorRef,
-    DestroyRef,
-    Directive,
-    ElementRef,
-    HostBinding,
-    HostListener,
-    Input,
-    OnDestroy,
-    OnInit,
-    booleanAttribute,
-    inject,
-    numberAttribute
-} from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { injectRovingFocusGroup } from './roving-focus-group.token';
-import { RovingFocusItemToken } from './roving-focus-item.token';
-
-@Directive({
-    selector: '[rdxRovingFocusItem]',
-    standalone: true,
-    providers: [{ provide: RovingFocusItemToken, useExisting: RovingFocusItemDirective }]
-})
-export class RovingFocusItemDirective implements OnInit, OnDestroy, FocusableOption {
-    /**
-     * Access the group the roving focus item belongs to.
-     */
-    private readonly group = injectRovingFocusGroup();
-
-    /**
-     * Access the element reference of the roving focus item.
-     */
-    private readonly elementRef = inject(ElementRef<HTMLElement>);
-
-    /**
-     * Access the destroyRef
-     */
-    private readonly destroyRef = inject(DestroyRef);
-
-    /**
-     * Access the change detector ref
-     */
-    private readonly changeDetectorRef = inject(ChangeDetectorRef);
-
-    /**
-     * Define the order of the roving focus item in the group.
-     */
-    @Input({ transform: numberAttribute }) order = 0;
-
-    /**
-     * Define if the item is disabled.
-     */
-    @Input({ transform: booleanAttribute }) disabled = false;
-
-    /**
-     * Derive the tabindex of the roving focus item.
-     * @internal
-     */
-    @HostBinding('attr.tabindex')
-    get tabindex(): number {
-        return this.group.keyManager.activeItem === this ? 0 : -1;
-    }
-
-    ngOnInit(): void {
-        // register the roving focus item with the group
-        this.group.register(this);
-
-        // listen for changes to the active item and run change detection
-        this.group.keyManager.change
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.changeDetectorRef.markForCheck());
-    }
-
-    ngOnDestroy(): void {
-        // unregister the roving focus item with the group
-        this.group.unregister(this);
-    }
-
-    /**
-     * Handle key events on the roving focus item.
-     * @param event The key event.
-     * @internal
-     */
-    @HostListener('keydown', ['$event'])
-    onKeydown(event: KeyboardEvent): void {
-        this.group.onKeydown(event);
-    }
-
-    /**
-     * Focus the roving focus item.
-     * @param origin The origin of the focus request.
-     * @internal
-     */
-    focus(): void {
-        this.elementRef?.nativeElement.focus();
-    }
-}

package/roving-focus/src/roving-focus-item.token.ts

@@ -1,10 +0,0 @@
-import { InjectionToken, inject } from '@angular/core';
-import type { RovingFocusItemDirective } from './roving-focus-item.directive';
-
-export const RovingFocusItemToken = new InjectionToken<RovingFocusItemDirective>(
-    'RovingFocusItemToken'
-);
-
-export function injectRovingFocusItem(): RovingFocusItemDirective {
-    return inject(RovingFocusItemToken);
-}

package/separator/ng-package.json

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

package/separator/src/separator.directive.spec.ts

@@ -1,59 +0,0 @@
-import { SeparatorDirective } from './separator.directive';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Component, DebugElement } from '@angular/core';
-import { By } from '@angular/platform-browser';
-
-@Component({
-    template:
-        '<div rdxSeparator [rdxSeparatorOrientation]="orientation" [rdxSeparatorDecorative]="decorative"></div>'
-})
-class TestComponent {
-    orientation: 'horizontal' | 'vertical' = 'horizontal';
-    decorative = false;
-}
-
-describe('SeparatorDirective', () => {
-    let component: TestComponent;
-    let fixture: ComponentFixture<TestComponent>;
-    let div: DebugElement;
-
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            declarations: [TestComponent],
-            imports: [SeparatorDirective]
-        }).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 SeparatorDirective();
-        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/src/separator.directive.ts

@@ -1,24 +0,0 @@
-import { Directive, Input, booleanAttribute } from '@angular/core';
-
-@Directive({
-    selector: '[rdxSeparator]',
-    standalone: true,
-    host: {
-        '[attr.role]': 'decorative ? "none" : "separator"',
-        '[attr.aria-orientation]': '!decorative && orientation === "vertical" ? "vertical" : null',
-        '[attr.data-orientation]': 'orientation'
-    }
-})
-export class SeparatorDirective {
-    /**
-     * The orientation of the separator.
-     * @default 'horizontal'
-     */
-    @Input('rdxSeparatorOrientation') orientation: 'horizontal' | 'vertical' = 'horizontal';
-
-    /**
-     * Whether the separator is for decoration purposes. If true, the separator will not be included in the accessibility tree.
-     * @default false
-     */
-    @Input({ alias: 'rdxSeparatorDecorative', transform: booleanAttribute }) decorative = false;
-}

package/separator/stories/separator.docs.mdx

@@ -1,38 +0,0 @@
-import { ArgTypes, Canvas, Meta } from '@storybook/addon-docs';
-import { SeparatorDirective } 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}></Canvas>
-
-## Features
-- ✅ Supports horizontal and vertical orientations.
-
-## Usage
-
-Get started with importing the directive:
-
-```typescript
-import { SeparatorDirective } from '@radix-ng/primitives/separator';
-```
-
-## Examples
-
-```html
-<div rdxSeparator
-     rdxSeparatorDecorative="decorative"
-     rdxSeparatorOrientation="vertical"></div>
-```
-## API Reference
-
-<ArgTypes of={SeparatorDirective} />
-
-## Accessibility
-
-Adheres to the [`separator` role requirements](https://www.w3.org/TR/wai-aria-1.2/#separator).