@radix-ng/primitives 0.1.0 → 0.2.0

package/separator/stories/separator.stories.ts

@@ -1,91 +0,0 @@
-import { LabelDirective } from '../../label';
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { SeparatorDirective } from '../src/separator.directive';
-
-export default {
-    component: SeparatorDirective,
-    title: 'Primitives/Separator',
-    decorators: [
-        moduleMetadata({
-            imports: [SeparatorDirective, CommonModule]
-        })
-    ]
-} as Meta<LabelDirective>;
-
-type Story = StoryObj<LabelDirective>;
-
-export const Default: Story = {
-    parameters: {
-        backgrounds: {
-            default: 'black',
-            values: [
-                {
-                    name: 'black',
-                    value: 'linear-gradient(330deg,color(display-p3 0.523 0.318 0.751) 0,color(display-p3 0.276 0.384 0.837) 100%)'
-                }
-            ]
-        }
-    },
-    render: () => ({
-        template: `
-<style>
-
-.SeparatorRoot {
-  background-color: white;
-}
-.SeparatorRoot[data-orientation='horizontal'] {
-  height: 1px;
-  width: 100%;
-}
-.SeparatorRoot[data-orientation='vertical'] {
-  height: 100%;
-  width: 1px;
-}
-
-.Text {
-  color: white;
-  font-size: 15px;
-  line-height: 20px;
-}
-
-</style>
-<div style="width: 100%; max-width: 300px; margin: 0 15px;">
-    <div class="Text">
-      Radix Primitives
-    </div>
-    <div class="Text" style="font-weight: 500;">
-      An open-source UI component library.
-    </div>
-    <div rdxSeparator
-        class="SeparatorRoot"
-        style="margin: 15px 0;"
-    ></div>
-    <div style="display: flex; height: 1.25rem; align-items: center;">
-      <div class="Text">
-        Blog
-      </div>
-      <div rdxSeparator
-        class="SeparatorRoot"
-        rdxSeparatorDecorative="decorative"
-        rdxSeparatorOrientation="vertical"
-        style="margin: 0 15px;"
-      ></div>
-      <div class="Text">
-        Docs
-      </div>
-      <div rdxSeparator
-        class="SeparatorRoot"
-        rdxSeparatorDecorative="decorative"
-        rdxSeparatorOrientation="vertical"
-        style="margin: 0 15px;"
-      ></div>
-      <div class="Text">
-        Source
-      </div>
-    </div>
-  </div>
-
-`
-    })
-};

package/switch/ng-package.json

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

package/switch/src/switch-thumb.directive.ts

@@ -1,17 +0,0 @@
-import { Directive } from '@angular/core';
-import { injectSwitch } from './switch.token';
-
-@Directive({
-    selector: '[rdxSwitchThumb]',
-    standalone: true,
-    host: {
-        '[attr.data-state]': 'switch.checked ? "checked" : "unchecked"',
-        '[attr.data-disabled]': 'switch.disabled ? "true" : null'
-    }
-})
-export class SwitchThumbDirective {
-    /**
-     * Access the switch directive.
-     */
-    protected readonly switch = injectSwitch();
-}

package/switch/src/switch.directive.ts

@@ -1,132 +0,0 @@
-import {
-    Directive,
-    ElementRef,
-    EventEmitter,
-    HostListener,
-    Input,
-    Output,
-    booleanAttribute,
-    inject
-} from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { SwitchToken } from './switch.token';
-
-@Directive({
-    selector: '[rdxSwitch]',
-    standalone: true,
-    providers: [
-        { provide: SwitchToken, useExisting: SwitchDirective },
-        { provide: NG_VALUE_ACCESSOR, useExisting: SwitchDirective, multi: true }
-    ],
-    host: {
-        role: 'switch',
-        '[attr.type]': 'isButton ? "button" : null',
-        '[attr.aria-checked]': 'checked',
-        '[attr.data-state]': 'checked ? "checked" : "unchecked"',
-        '[attr.data-disabled]': 'disabled ? "true" : null',
-        '[attr.disabled]': 'isButton && disabled ? disabled : null',
-        '(focus)': 'onTouched?.()'
-    }
-})
-export class SwitchDirective implements ControlValueAccessor {
-    /**
-     * Access the element ref.
-     */
-    private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-
-    /**
-     * Determine if the switch is a button
-     */
-    protected isButton = this.elementRef.nativeElement.tagName === 'BUTTON';
-
-    /**
-     * Determine if the switch is checked.
-     * The controlled state of the switch.
-     * @default false
-     */
-    @Input({ transform: booleanAttribute }) checked = false;
-
-    /**
-     * Determine if the switch is disabled.
-     * When true, prevents the user from interacting with the switch.
-     * @default false
-     */
-    @Input({ transform: booleanAttribute }) disabled = false;
-
-    /**
-     * Event emitted when the checked state changes.
-     */
-    @Output() readonly checkedChange = new EventEmitter<boolean>();
-
-    /**
-     * Store the onChange callback.
-     */
-    private onChange?: (checked: boolean) => void;
-
-    /**
-     * Store the onTouched callback.
-     */
-    protected onTouched?: () => void;
-
-    /**
-     * Register the onChange callback.
-     * @param fn The onChange callback.
-     * @internal
-     */
-    registerOnChange(fn: (checked: boolean) => void): void {
-        this.onChange = fn;
-    }
-
-    /**
-     * Register the onTouched callback.
-     * @param fn The onTouched callback.
-     * @internal
-     */
-    registerOnTouched(fn: () => void): void {
-        this.onTouched = fn;
-    }
-
-    /**
-     * Write the value to the checked state.
-     * @param checked The checked state.
-     * @internal
-     */
-    writeValue(checked: boolean): void {
-        this.checked = checked;
-    }
-
-    /**
-     * Set the disabled state.
-     * @param isDisabled The disabled state.
-     * @internal
-     */
-    setDisabledState(isDisabled: boolean): void {
-        this.disabled = isDisabled;
-    }
-
-    /**
-     * Toggle the checked state.
-     */
-    @HostListener('click')
-    toggle(): void {
-        if (this.disabled) {
-            return;
-        }
-
-        this.checked = !this.checked;
-        this.checkedChange.emit(this.checked);
-        this.onChange?.(this.checked);
-    }
-
-    /**
-     * Handle the keydown event.
-     */
-    @HostListener('keydown.space')
-    protected onKeyDown(): void {
-        // If the switch is not a button then the space key will not toggle the checked state automatically,
-        // so we need to do it manually.
-        if (!this.isButton) {
-            this.toggle();
-        }
-    }
-}

package/switch/src/switch.token.ts

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

package/switch/stories/switch.docs.mdx

@@ -1,74 +0,0 @@
-import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/addon-docs';
-import * as SwitchDirectiveStories from "./switch.stories";
-import { SwitchDirective } from '../src/switch.directive';
-import { switchExclude } from '../../.docs/utils/storybook';
-
-<Meta
-    title="Primitives/Switch"
-/>
-
-# Switch
-#### A control that allows the user to toggle between checked and not checked.
-
-<Canvas sourceState='hidden' of={SwitchDirectiveStories.Default}></Canvas>
-
-## Features
-- ✅ Full keyboard navigation.
-- ✅ Can be controlled or uncontrolled.
-
-## Import
-
-Get started with importing the directives:
-
-```typescript
-import { SwitchDirective, SwitchThumbDirective } from '@radix-ng/primitives/switch';
-```
-
-## Examples
-
-```html
-<label rdxLabel htmlFor="airplane-mode">Airplane mode</label>
-<button rdxSwitch [(checked)]="checked" id="airplane-mode">
-    <span rdxSwitchThumb></span>
-</button>
-
-```
-## API Reference
-
-### SwitchDirective
-<ArgTypes exclude={switchExclude} of={SwitchDirective} />
-
-<Markdown>
-{`
-| Data Attribute | Value |
-| ----------- | --------- |
-| [data-state]       | "checked" or "unchecked"   |
-| [data-disabled]    | Present when disabled      |
-`}
-</Markdown>
-
-### ThumbDirective
-
-<Markdown>
-{`
-| Data Attribute | Value |
-| ----------- | --------- |
-| [data-state]       | "checked" or "unchecked"   |
-| [data-disabled]    | Present when disabled      |
-`}
-</Markdown>
-
-## Accessibility
-
-Adheres to the [`switch` role requirements](https://www.w3.org/WAI/ARIA/apg/patterns/switch).
-
-### Keyboard Interactions
-
-<Markdown>
-{`
-| Key | Description |
-| ----------- | --------- |
-| Space       | Toggles the component's state.        |
-| Enter       | Toggles the component's state.    |
-`}
-</Markdown>

package/switch/stories/switch.stories.ts

@@ -1,76 +0,0 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-
-import { LabelDirective } from '../../label';
-import { SwitchDirective } from '../src/switch.directive';
-import { SwitchThumbDirective } from '../src/switch-thumb.directive';
-
-export default {
-    title: 'Primitives/Switch',
-    decorators: [
-        moduleMetadata({
-            imports: [LabelDirective, SwitchDirective, SwitchThumbDirective]
-        })
-    ]
-} as Meta;
-
-type Story = StoryObj;
-
-export const Default: Story = {
-    render: () => ({
-        template: `
-<style>
-button {
-    all: unset;
-}
-
-.SwitchRoot {
-    width: 42px;
-    height: 25px;
-    background-color: color(display-p3 0 0 0/0.7);
-    border-radius: 9999px;
-    margin-left: 15px;
-    position: relative;
-    box-shadow: 0 2px 10px color(display-p3 0 0 0/0.5);
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-.SwitchRoot:focus {
-    box-shadow: 0 0 0 2px black;
-}
-.SwitchRoot[data-state='checked'] {
-    background-color: black;
-}
-
-.SwitchThumb {
-    display: block;
-    width: 21px;
-    height: 21px;
-    background-color: white;
-    border-radius: 9999px;
-    box-shadow: 0 2px 2px color(display-p3 0 0 0/0.5);
-    transition: transform 100ms;
-    transform: translateX(2px);
-    will-change: transform;
-}
-.SwitchThumb[data-state='checked'] {
-    transform: translateX(19px);
-}
-
-.Label {
-    color: white;
-    font-size: 15px;
-    line-height: 1;
-    display: flex;
-    align-items: center;
-}
-
-</style>
-
-<label rdxLabel htmlFor="airplane-mode" class="Label">
-    Airplane mode
-    <button rdxSwitch [(checked)]="checked" id="airplane-mode" class="SwitchRoot">
-        <span rdxSwitchThumb class="SwitchThumb"></span>
-    </button>
-</label>
-`
-    })
-};

package/test-setup.ts

@@ -1,8 +0,0 @@
-// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
-globalThis.ngJest = {
-    testEnvironmentOptions: {
-        errorOnUnknownElements: true,
-        errorOnUnknownProperties: true
-    }
-};
-import 'jest-preset-angular/setup-jest';

package/tsconfig.json

@@ -1,32 +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"
-        },
-        {
-            "path": "./.storybook/tsconfig.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,9 +0,0 @@
-{
-    "extends": "./tsconfig.lib.json",
-    "compilerOptions": {
-        "declarationMap": false
-    },
-    "angularCompilerOptions": {
-        "compilationMode": "partial"
-    }
-}

package/tsconfig.spec.json

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

package/visually-hidden/ng-package.json

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

package/visually-hidden/src/visually-hidden.directive.spec.ts

@@ -1,48 +0,0 @@
-import { VisuallyHiddenDirective } from './visually-hidden.directive';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Component, DebugElement } from '@angular/core';
-import { By } from '@angular/platform-browser';
-
-@Component({
-    template: '<span rdxVisuallyHidden>Hidden content</span>'
-})
-class TestComponent {}
-
-describe('VisuallyHiddenDirective', () => {
-    let component: TestComponent;
-    let fixture: ComponentFixture<TestComponent>;
-    let span: DebugElement;
-
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            declarations: [TestComponent],
-            imports: [VisuallyHiddenDirective]
-        }).compileComponents();
-    });
-
-    beforeEach(() => {
-        fixture = TestBed.createComponent(TestComponent);
-        component = fixture.componentInstance;
-        span = fixture.debugElement.query(By.css('span'));
-        fixture.detectChanges();
-    });
-
-    it('should set the element style to visually hide the content', () => {
-        const element = span.nativeElement as HTMLElement;
-        const styles = element.style;
-
-        expect(styles.position).toBe('absolute');
-        expect(styles.border).toBe('0px');
-        expect(styles.width).toBe('1px');
-        expect(styles.height).toBe('1px');
-        expect(styles.padding).toBe('0px');
-        expect(styles.margin).toBe('-1px');
-        expect(styles.overflow).toBe('hidden');
-        expect(styles.clip).toBe('rect(0px, 0px, 0px, 0px)');
-        expect(styles.whiteSpace).toBe('nowrap');
-        expect(styles.wordWrap).toBe('normal');
-        expect(styles.outline).toBe('none');
-        expect(styles.appearance).toBe('none');
-        expect(styles.left).toBe('0px');
-    });
-});

package/visually-hidden/src/visually-hidden.directive.ts

@@ -1,35 +0,0 @@
-import { Directive, ElementRef, OnInit, inject } from '@angular/core';
-
-@Directive({
-    selector: '[rdxVisuallyHidden]',
-    standalone: true
-})
-export class VisuallyHiddenDirective implements OnInit {
-    /**
-     * Access the element.
-     */
-    private readonly element = inject<ElementRef<HTMLElement>>(ElementRef);
-
-    ngOnInit(): void {
-        // hide the element
-        Object.assign(this.element.nativeElement.style, {
-            position: 'absolute',
-            border: 0,
-            width: '1px',
-            height: '1px',
-            padding: 0,
-            margin: '-1px',
-            overflow: 'hidden',
-            clip: 'rect(0, 0, 0, 0)',
-            whiteSpace: 'nowrap',
-            wordWrap: 'normal',
-            // Avoid browsers rendering the focus ring in some cases.
-            outline: 'none',
-            appearance: 'none',
-            // Avoid some cases where the browser will still render the native controls
-            '-webkit-appearance': 'none',
-            '-moz-appearance': 'none',
-            left: 0
-        });
-    }
-}

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

@@ -1,35 +0,0 @@
-import { ArgTypes, Meta } from '@storybook/addon-docs';
-
-<Meta
-    title="Utilities/Visually Hidden"
-/>
-
-# Visually Hidden
-#### Hides content from the screen in an accessible way.
-
-
-## Features
-- ✅ Visually hides content while preserving it for assistive technology.
-
-
-## Import
-
-Get started with importing the directive:
-
-```typescript
-import { VisuallyHiddenDirective } from '@radix-ng/primitives/visually-hidden';
-```
-
-## Examples
-
-```html
-<button aria-label="Open menu">
-    <span rdxVisuallyHidden>Open menu</span>
-    <svg> <!-- Menu Icon --> </svg>
-</button>
-
-```
-
-## Accessibility
-
-This is useful in certain scenarios as an alternative to traditional labelling with aria-label or aria-labelledby.