@radix-ng/primitives 0.12.1 → 0.13.0

package/collapsible/stories/collapsible-animation.component.ts

@@ -1,116 +0,0 @@
-import { animate, state, style, transition, trigger } from '@angular/animations';
-import { Component } from '@angular/core';
-import { LucideAngularModule } from 'lucide-angular';
-import { RdxCollapsibleContentDirective } from '../src/collapsible-content.directive';
-import { RdxCollapsibleRootDirective } from '../src/collapsible-root.directive';
-import { RdxCollapsibleTriggerDirective } from '../src/collapsible-trigger.directive';
-
-@Component({
-    selector: 'rdx-collapsible-animation',
-    standalone: true,
-    imports: [
-        RdxCollapsibleRootDirective,
-        RdxCollapsibleTriggerDirective,
-        RdxCollapsibleContentDirective,
-        LucideAngularModule
-    ],
-    // prettier-ignore
-    animations: [
-        trigger('contentExpansion', [
-            state('expanded', style({ height: '*', opacity: 1, visibility: 'visible' })),
-            state('collapsed', style({ height: '0px', opacity: 0, visibility: 'hidden' })),
-            transition('expanded <=> collapsed', animate('200ms cubic-bezier(.37,1.04,.68,.98)'))
-        ])
-    ],
-    styles: `
-        button {
-            all: unset;
-        }
-
-        .CollapsibleRoot {
-            width: 300px;
-        }
-
-        .IconButton {
-            font-family: inherit;
-            border-radius: 100%;
-            height: 25px;
-            width: 25px;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            color: var(--violet-11);
-            box-shadow: 0 2px 10px var(--black-a7);
-        }
-
-        .IconButton[data-state='closed'] {
-            background-color: white;
-        }
-
-        .IconButton[data-state='open'] {
-            background-color: var(--violet-3);
-        }
-
-        .IconButton:hover {
-            background-color: var(--violet-3);
-        }
-
-        .IconButton:focus {
-            box-shadow: 0 0 0 2px black;
-        }
-
-        .Text {
-            color: var(--violet-11);
-            font-size: 15px;
-            line-height: 25px;
-        }
-
-        .Repository {
-            background-color: white;
-            border-radius: 4px;
-            margin: 10px 0;
-            padding: 10px;
-            box-shadow: 0 2px 10px var(--black-a7);
-        }
-    `,
-    template: `
-        <div
-            class="CollapsibleRoot"
-            #collapsibleRoot="collapsibleRoot"
-            [open]="open"
-            (onOpenChange)="onOpenChange($event)"
-            rdxCollapsibleRoot
-        >
-            <div style="display: flex; align-items: center; justify-content: space-between;">
-                <span class="Text" style="color: white">&#64;peduarte starred 3 repositories</span>
-                <button class="IconButton" rdxCollapsibleTrigger>
-                    @if (open) {
-                        <lucide-angular size="16" name="x" style="display: flex;" />
-                    } @else {
-                        <lucide-angular size="16" name="unfold-vertical" style="display: flex;" />
-                    }
-                </button>
-            </div>
-
-            <div class="Repository">
-                <span class="Text">&#64;radix-ui/primitives</span>
-            </div>
-
-            <div [@contentExpansion]="collapsibleRoot.isOpen() ? 'expanded' : 'collapsed'" rdxCollapsibleContent>
-                <div class="Repository">
-                    <span class="Text">&#64;radix-ui/colors</span>
-                </div>
-                <div class="Repository">
-                    <span class="Text">&#64;stitches/react</span>
-                </div>
-            </div>
-        </div>
-    `
-})
-export class RdxCollapsibleAnimationComponent {
-    open = true;
-
-    onOpenChange($event: boolean) {
-        this.open = $event;
-    }
-}

package/collapsible/stories/collapsible-external-triggering.component.ts

@@ -1,86 +0,0 @@
-import { Component } from '@angular/core';
-import { LucideAngularModule } from 'lucide-angular';
-import { RdxCollapsibleContentDirective } from '../src/collapsible-content.directive';
-import { RdxCollapsibleRootDirective } from '../src/collapsible-root.directive';
-
-@Component({
-    selector: 'rdx-collapsible-external-triggering',
-    standalone: true,
-    imports: [
-        RdxCollapsibleRootDirective,
-        RdxCollapsibleContentDirective,
-        LucideAngularModule
-    ],
-    styles: `
-        .CollapsibleRoot {
-            width: 300px;
-        }
-
-        .ExternalTrigger {
-            font-family: inherit;
-            border-radius: 8px;
-
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            color: var(--violet-11);
-            box-shadow: 0 2px 10px var(--black-a7);
-            margin-bottom: 10px;
-            padding: 4px;
-        }
-
-        .ExternalTrigger[data-state='closed'] {
-            background-color: white;
-        }
-
-        .ExternalTrigger[data-state='open'] {
-            background-color: var(--violet-3);
-        }
-
-        .ExternalTrigger:hover {
-            background-color: var(--violet-3);
-        }
-
-        .ExternalTrigger:focus {
-            box-shadow: 0 0 0 2px black;
-        }
-
-        .Text {
-            color: var(--violet-11);
-            font-size: 15px;
-            line-height: 25px;
-        }
-
-        .Repository {
-            background-color: white;
-            border-radius: 4px;
-            margin: 10px 0;
-            padding: 10px;
-            box-shadow: 0 2px 10px var(--black-a7);
-        }
-    `,
-    template: `
-        <button class="ExternalTrigger" (click)="open = !open">External Trigger</button>
-        <div class="CollapsibleRoot" #collapsibleRoot="collapsibleRoot" [open]="open" rdxCollapsibleRoot>
-            <div style="display: flex; align-items: center; justify-content: space-between;">
-                <span class="Text" style="color: white">&#64;peduarte starred 3 repositories</span>
-            </div>
-
-            <div class="Repository">
-                <span class="Text">&#64;radix-ui/primitives</span>
-            </div>
-
-            <div rdxCollapsibleContent>
-                <div class="Repository">
-                    <span class="Text">&#64;radix-ui/colors</span>
-                </div>
-                <div class="Repository">
-                    <span class="Text">&#64;stitches/react</span>
-                </div>
-            </div>
-        </div>
-    `
-})
-export class RdxCollapsibleExternalTriggeringComponent {
-    open = true;
-}

package/collapsible/stories/collapsible.docs.mdx

@@ -1,53 +0,0 @@
-import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
-import * as CollapsibleStories from './collapsible.stories';
-import { RdxCollapsibleRootDirective } from '../src/collapsible-root.directive';
-import { RdxCollapsibleTriggerDirective } from '../src/collapsible-trigger.directive';
-import { RdxCollapsibleContentDirective } from '../src/collapsible-content.directive';
-
-<Meta title="Primitives/Collapsible" />
-
-# Collapsible
-
-#### An interactive component which expands/collapses a panel.
-
-<Canvas sourceState="hidden" of={CollapsibleStories.Default} />
-
-## Features
-
-- ✅ Full keyboard navigation.
-- ✅ Can be controlled or uncontrolled.
-
-## Anatomy
-
-```html
-<div rdxCollapsibleRoot [open]="...">
-  <button rdxCollapsibleTrigger>Trigger</button>
-  <div rdxCollapsibleContent>Content</div>
-</div>
-```
-
-## Import
-
-Get started with importing the directives:
-
-```typescript
-import {
-  RdxCollapsibleRootDirective,
-  RdxCollapsibleTriggerDirective,
-  RdxCollapsibleContentDirective
-} from '@radix-ng/primitives/collapsible';
-```
-
-## API Reference
-
-## RdxCollapsibleRootDirective
-
-<ArgTypes of={RdxCollapsibleRootDirective} />
-
-## RdxCollapsibleTriggerDirective
-
-<ArgTypes of={RdxCollapsibleTriggerDirective} />
-
-## RdxCollapsibleContentDirective
-
-<ArgTypes of={RdxCollapsibleContentDirective} />

package/collapsible/stories/collapsible.stories.ts

@@ -1,151 +0,0 @@
-import { BrowserAnimationsModule, provideAnimations } from '@angular/platform-browser/animations';
-import { componentWrapperDecorator, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { LucideAngularModule, UnfoldVertical, X } from 'lucide-angular';
-import { RdxCollapsibleContentDirective } from '../src/collapsible-content.directive';
-import { RdxCollapsibleRootDirective } from '../src/collapsible-root.directive';
-import { RdxCollapsibleTriggerDirective } from '../src/collapsible-trigger.directive';
-import { RdxCollapsibleAnimationComponent } from './collapsible-animation.component';
-import { RdxCollapsibleExternalTriggeringComponent } from './collapsible-external-triggering.component';
-
-export default {
-    title: 'Primitives/Collapsible',
-    decorators: [
-        moduleMetadata({
-            imports: [
-                RdxCollapsibleRootDirective,
-                RdxCollapsibleTriggerDirective,
-                RdxCollapsibleContentDirective,
-                RdxCollapsibleExternalTriggeringComponent,
-                RdxCollapsibleAnimationComponent,
-                BrowserAnimationsModule,
-                LucideAngularModule,
-                LucideAngularModule.pick({ X, UnfoldVertical })
-            ],
-            providers: [provideAnimations()]
-        }),
-        componentWrapperDecorator(
-            (story) => `
-                <div class="radix-themes light light-theme radix-themes-default-fonts"
-                    data-accent-color="indigo"
-                    data-radius="medium"
-                    data-scaling="100%"
-                >
-                    ${story}
-                </div>
-
-                <style>
-                    button {
-                        all: unset;
-                    }
-                    .CollapsibleRoot {
-                        width: 300px;
-                    }
-
-                    .IconButton {
-                        font-family: inherit;
-                        border-radius: 100%;
-                        height: 25px;
-                        width: 25px;
-                        display: inline-flex;
-                        align-items: center;
-                        justify-content: center;
-                        color: var(--violet-11);
-                        box-shadow: 0 2px 10px var(--black-a7);
-                    }
-
-                    .IconButton[data-state='closed'] {
-                        background-color: white;
-                    }
-
-                    .IconButton[data-state='open'] {
-                        background-color: var(--violet-3);
-                    }
-
-                    .IconButton:hover {
-                        background-color: var(--violet-3);
-                    }
-
-                    .IconButton:focus {
-                        box-shadow: 0 0 0 2px black;
-                    }
-
-                    .Text {
-                        color: var(--violet-11);
-                        font-size: 15px;
-                        line-height: 25px;
-                    }
-
-                    .Repository {
-                        background-color: white;
-                        border-radius: 4px;
-                        margin: 10px 0;
-                        padding: 10px;
-                        box-shadow: 0 2px 10px var(--black-a7);
-                    }
-                </style>`
-        )
-    ]
-} as Meta;
-
-type Story = StoryObj;
-
-export const Default: Story = {
-    render: () => ({
-        template: `
-            <div class="CollapsibleRoot" rdxCollapsibleRoot [open]="true" #collapsibleRoot="collapsibleRoot">
-
-                <div style="display: flex; align-items: center; justify-content: space-between;">
-                    <span class="Text" style="color: white">&#64;peduarte starred 3 repositories</span>
-                    <button class="IconButton" rdxCollapsibleTrigger>
-                        @if (collapsibleRoot.isOpen()) {
-                            <lucide-angular size="16" name="x" style="display: flex;"></lucide-angular>
-                        } @else {
-                            <lucide-angular size="16" name="unfold-vertical" style="display: flex;"></lucide-angular>
-                        }
-                    </button>
-                </div>
-
-                <div class="Repository">
-                    <span class="Text">&#64;radix-ui/primitives</span>
-                </div>
-
-                <div rdxCollapsibleContent>
-                    <div class="Repository">
-                        <span class="Text">&#64;radix-ui/colors</span>
-                    </div>
-                    <div class="Repository">
-                        <span class="Text">&#64;stitches/react</span>
-                    </div>
-                </div>
-            </div>
-        `
-    })
-};
-
-export const ExternalTrigger: Story = {
-    render: () => ({
-        template: `
-            <div class="radix-themes light light-theme radix-themes-default-fonts"
-                data-accent-color="indigo"
-                data-radius="medium"
-                data-scaling="100%"
-            >
-                <rdx-collapsible-external-triggering></rdx-collapsible-external-triggering>
-            </div>
-        `
-    })
-};
-
-export const Animation: Story = {
-    render: () => ({
-        template: `
-            <div class="radix-themes light light-theme radix-themes-default-fonts"
-                data-accent-color="indigo"
-                data-radius="medium"
-                data-scaling="100%"
-            >
-                <rdx-collapsible-animation></rdx-collapsible-animation>
-            </div>
-        `
-    })
-};

package/context-menu/index.ts

@@ -1,10 +0,0 @@
-export * from './src/context-menu-content.directive';
-export * from './src/context-menu-item-checkbox.directive';
-export * from './src/context-menu-item-indicator.directive';
-export * from './src/context-menu-item-radio-group.directive';
-export * from './src/context-menu-item-radio.directive';
-export * from './src/context-menu-item-selectable';
-export * from './src/context-menu-item.directive';
-export * from './src/context-menu-label.directive';
-export * from './src/context-menu-separator.directive';
-export * from './src/context-menu-trigger.directive';

package/context-menu/ng-package.json

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

package/context-menu/src/context-menu-content.directive.ts

@@ -1,47 +0,0 @@
-import { CdkMenu, CdkMenuItem } from '@angular/cdk/menu';
-import { Directive, inject, Input } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { pairwise, startWith, Subject } from 'rxjs';
-import { RdxContextMenuItemDirective } from './context-menu-item.directive';
-import { RdxContextMenuTriggerDirective } from './context-menu-trigger.directive';
-
-@Directive({
-    selector: '[rdxContextMenuContent]',
-    standalone: true,
-    host: {
-        '[attr.role]': "'menu'",
-        '[attr.data-state]': "menuTrigger.isOpen() ? 'open': 'closed'",
-        '[attr.data-orientation]': 'orientation'
-    },
-    providers: [
-        {
-            provide: CdkMenu,
-            useExisting: RdxContextMenuContentDirective
-        }
-    ]
-})
-export class RdxContextMenuContentDirective extends CdkMenu {
-    readonly highlighted = new Subject<RdxContextMenuItemDirective>();
-    readonly menuTrigger = inject(RdxContextMenuTriggerDirective, { optional: true });
-
-    @Input() onEscapeKeyDown: (event?: Event) => void = () => undefined;
-    @Input() closeOnEscape = true;
-
-    constructor() {
-        super();
-
-        this.highlighted.pipe(startWith(null), pairwise(), takeUntilDestroyed()).subscribe(([prev, item]) => {
-            if (prev) {
-                prev.highlighted = false;
-            }
-
-            if (item) {
-                item.highlighted = true;
-            }
-        });
-    }
-
-    updateActiveItem(item: CdkMenuItem) {
-        this.keyManager.updateActiveItem(item);
-    }
-}

package/context-menu/src/context-menu-item-checkbox.directive.ts

@@ -1,30 +0,0 @@
-import { CDK_MENU, CdkMenuItem } from '@angular/cdk/menu';
-import { Directive } from '@angular/core';
-import { RdxContextMenuContentDirective } from './context-menu-content.directive';
-import { RdxContextMenuSelectable } from './context-menu-item-selectable';
-import { RdxContextMenuItemDirective } from './context-menu-item.directive';
-
-@Directive({
-    selector: '[rdxContextMenuItemCheckbox]',
-    standalone: true,
-    host: {
-        role: 'menuitemcheckbox'
-    },
-    providers: [
-        { provide: RdxContextMenuSelectable, useExisting: RdxContextMenuItemCheckboxDirective },
-        { provide: RdxContextMenuItemDirective, useExisting: RdxContextMenuSelectable },
-        { provide: CdkMenuItem, useExisting: RdxContextMenuItemDirective },
-        { provide: CDK_MENU, useExisting: RdxContextMenuContentDirective }
-    ]
-})
-export class RdxContextMenuItemCheckboxDirective extends RdxContextMenuSelectable {
-    override trigger(options?: { keepOpen: boolean }) {
-        if (!this.disabled) {
-            this.checked = !this.checked;
-
-            this.checkedChange.emit(this.checked);
-        }
-
-        super.trigger(options);
-    }
-}

package/context-menu/src/context-menu-item-indicator.directive.ts

@@ -1,14 +0,0 @@
-import { Directive, inject } from '@angular/core';
-import { RdxContextMenuSelectable } from './context-menu-item-selectable';
-
-@Directive({
-    selector: '[rdxContextMenuItemIndicator]',
-    standalone: true,
-    host: {
-        '[style.display]': "item.checked ? 'block' : 'none'",
-        '[attr.data-state]': "item.checked ? 'checked' : 'unchecked'"
-    }
-})
-export class RdxContextMenuItemIndicatorDirective {
-    item = inject(RdxContextMenuSelectable);
-}

package/context-menu/src/context-menu-item-radio-group.directive.ts

@@ -1,31 +0,0 @@
-import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
-import { AfterContentInit, Directive, EventEmitter, inject, Input, Output } from '@angular/core';
-
-@Directive({
-    selector: '[rdxContextMenuItemRadioGroup]',
-    standalone: true,
-    host: {
-        role: 'group'
-    },
-    providers: [{ provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }]
-})
-export class RdxContextMenuItemRadioGroupDirective<T> implements AfterContentInit {
-    private readonly selectionDispatcher = inject(UniqueSelectionDispatcher);
-
-    @Input()
-    set value(value: T | null) {
-        this._value = value;
-    }
-
-    get value(): T | null {
-        return this._value;
-    }
-
-    private _value: T | null = null;
-
-    @Output() readonly valueChange = new EventEmitter();
-
-    ngAfterContentInit(): void {
-        this.selectionDispatcher.notify(this.value as string, '');
-    }
-}

package/context-menu/src/context-menu-item-radio.directive.ts

@@ -1,69 +0,0 @@
-import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
-import { CDK_MENU, CdkMenuItem } from '@angular/cdk/menu';
-import { AfterContentInit, Directive, inject, Input, OnDestroy } from '@angular/core';
-import { RdxContextMenuContentDirective } from './context-menu-content.directive';
-import { RdxContextMenuItemRadioGroupDirective } from './context-menu-item-radio-group.directive';
-import { RdxContextMenuSelectable } from './context-menu-item-selectable';
-import { RdxContextMenuItemDirective } from './context-menu-item.directive';
-
-/** Counter used to set a unique id and name for a selectable item */
-let nextId = 0;
-
-@Directive({
-    selector: '[rdxContextMenuItemRadio]',
-    standalone: true,
-    host: {
-        role: 'menuitemradio'
-    },
-    providers: [
-        { provide: RdxContextMenuSelectable, useExisting: RdxContextMenuItemRadioDirective },
-        { provide: RdxContextMenuItemDirective, useExisting: RdxContextMenuSelectable },
-        { provide: CdkMenuItem, useExisting: RdxContextMenuItemDirective },
-        { provide: CDK_MENU, useExisting: RdxContextMenuContentDirective }
-    ]
-})
-export class RdxContextMenuItemRadioDirective extends RdxContextMenuSelectable implements AfterContentInit, OnDestroy {
-    /** The unique selection dispatcher for this radio's `RdxContextMenuItemRadioGroupDirective`. */
-    private readonly selectionDispatcher = inject(UniqueSelectionDispatcher);
-
-    private readonly group = inject(RdxContextMenuItemRadioGroupDirective);
-
-    @Input()
-    get value() {
-        return this._value || this.id;
-    }
-
-    set value(value: string) {
-        this._value = value;
-    }
-
-    private _value: string | undefined;
-
-    /** An ID to identify this radio item to the `UniqueSelectionDispatcher`. */
-    private id = `${nextId++}`;
-
-    private removeDispatcherListener!: () => void;
-
-    constructor() {
-        super();
-
-        this.triggered.subscribe(() => {
-            if (!this.disabled) {
-                this.selectionDispatcher.notify(this.value, '');
-
-                this.group.valueChange.emit(this.value);
-            }
-        });
-    }
-
-    ngAfterContentInit() {
-        this.removeDispatcherListener = this.selectionDispatcher.listen((id: string) => {
-            this.checked = this.value === id;
-        });
-    }
-
-    override ngOnDestroy() {
-        super.ngOnDestroy();
-        this.removeDispatcherListener();
-    }
-}

package/context-menu/src/context-menu-item-selectable.ts

@@ -1,18 +0,0 @@
-import { booleanAttribute, Directive, EventEmitter, Input, Output } from '@angular/core';
-import { RdxContextMenuItemDirective } from './context-menu-item.directive';
-
-/** Base class providing checked state for selectable ContextMenuItems. */
-@Directive({
-    standalone: true,
-    host: {
-        '[attr.aria-checked]': '!!checked',
-        '[attr.aria-disabled]': 'disabled || null',
-        '[attr.data-state]': 'checked ? "checked" : "unchecked"'
-    }
-})
-export class RdxContextMenuSelectable extends RdxContextMenuItemDirective {
-    /** Whether the element is checked */
-    @Input({ transform: booleanAttribute }) checked = false;
-
-    @Output() readonly checkedChange = new EventEmitter<boolean>();
-}