@radix-ng/primitives 0.12.1 → 0.13.0

package/dialog/stories/dialog.stories.ts

@@ -1,233 +0,0 @@
-import { applicationConfig, componentWrapperDecorator, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { RdxDialogCloseDirective } from '../src/dialog-close.directive';
-import { RdxDialogContentDirective } from '../src/dialog-content.directive';
-import { RdxDialogDescriptionDirective } from '../src/dialog-description.directive';
-import { RdxDialogTitleDirective } from '../src/dialog-title.directive';
-import { RdxDialogTriggerDirective } from '../src/dialog-trigger.directive';
-import { configureRdxDialog } from '../src/dialog.providers';
-
-const html = String.raw;
-
-export default {
-    title: 'Primitives/Dialog',
-    decorators: [
-        applicationConfig({
-            providers: [configureRdxDialog()]
-        }),
-        moduleMetadata({
-            imports: [
-                RdxDialogTriggerDirective,
-                RdxDialogContentDirective,
-                RdxDialogTitleDirective,
-                RdxDialogCloseDirective,
-                RdxDialogDescriptionDirective
-            ]
-        }),
-        componentWrapperDecorator(
-            (story) => `
-                <div class="radix-themes light light-theme radix-themes-default-fonts rt-Flex rt-r-ai-start rt-r-jc-center rt-r-position-relative"
-                    data-accent-color="indigo"
-                    data-radius="medium"
-                    data-scaling="100%"
-                >
-                    ${story}
-                </div>`
-        )
-    ]
-} as Meta;
-
-type Story = StoryObj;
-
-export const Default: Story = {
-    argTypes: {
-        mode: {
-            options: ['default', 'drawer', 'drawer-bottom'],
-            control: {
-                type: 'select'
-            }
-        }
-    },
-    render: (args) => ({
-        props: {
-            config: args
-        },
-        template: html`
-            <button class="Button violet" [rdxDialogConfig]="config" [rdxDialogTrigger]="dialog">Open Dialog</button>
-
-            <ng-template #dialog>
-                <div class="DialogContent" rdxDialogContent>
-                    <h2 class="DialogTitle" rdxDialogTitle>Edit profile</h2>
-                    <p class="DialogDescription" rdxDialogDescription>
-                        Make changes to your profile here. Click save when you're done.
-                    </p>
-                    <fieldset class="Fieldset">
-                        <label class="Label" htmlFor="name">Name</label>
-                        <input class="Input" id="name" defaultValue="Pedro Duarte" />
-                    </fieldset>
-                    <fieldset class="Fieldset">
-                        <label class="Label" htmlFor="username">Username</label>
-                        <input class="Input" id="username" defaultValue="@peduarte" />
-                    </fieldset>
-                    <div style="display:flex; margin-top: 25px; justify-content: flex-end;">
-                        <button class="Button green" rdxDialogClose>Save changes</button>
-                    </div>
-                    <button class="IconButton" rdxDialogClose aria-label="Close">X</button>
-                </div>
-            </ng-template>
-
-            <style>
-                /* reset */
-                button,
-                fieldset,
-                input {
-                    all: unset;
-                }
-
-                .DialogOverlay {
-                    background-color: var(--black-a9);
-                    position: fixed;
-                    inset: 0;
-                    animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
-                }
-
-                .DialogContent {
-                    background-color: white;
-                    border-radius: 6px;
-                    box-shadow:
-                        hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
-                        hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
-                    position: fixed;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%, -50%);
-                    width: 90vw;
-                    max-width: 450px;
-                    max-height: 85vh;
-                    padding: 25px;
-                    animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
-                }
-
-                .DialogContent:focus {
-                    outline: none;
-                }
-
-                .DialogTitle {
-                    margin: 0;
-                    font-weight: 500;
-                    color: var(--mauve-12);
-                    font-size: 17px;
-                }
-
-                .DialogDescription {
-                    margin: 10px 0 20px;
-                    color: var(--mauve-11);
-                    font-size: 15px;
-                    line-height: 1.5;
-                }
-
-                .Button {
-                    display: inline-flex;
-                    align-items: center;
-                    justify-content: center;
-                    border-radius: 4px;
-                    padding: 0 15px;
-                    font-size: 15px;
-                    line-height: 1;
-                    font-weight: 500;
-                    height: 35px;
-                }
-
-                .Button.violet {
-                    background-color: white;
-                    color: var(--violet-11);
-                    box-shadow: 0 2px 10px var(--black-a7);
-                }
-
-                .Button.violet:hover {
-                    background-color: var(--mauve-3);
-                }
-
-                .Button.violet:focus {
-                    box-shadow: 0 0 0 2px black;
-                }
-
-                .Button.green {
-                    background-color: var(--green-4);
-                    color: var(--green-11);
-                }
-
-                .Button.green:hover {
-                    background-color: var(--green-5);
-                }
-
-                .Button.green:focus {
-                    box-shadow: 0 0 0 2px var(--green-7);
-                }
-
-                .IconButton {
-                    font-family: inherit;
-                    border-radius: 100%;
-                    height: 25px;
-                    width: 25px;
-                    display: inline-flex;
-                    align-items: center;
-                    justify-content: center;
-                    color: var(--violet-11);
-                    position: absolute;
-                    top: 10px;
-                    right: 10px;
-                }
-
-                .IconButton:hover {
-                    background-color: var(--violet-4);
-                }
-
-                .IconButton:focus {
-                    box-shadow: 0 0 0 2px var(--violet-7);
-                }
-
-                .Fieldset {
-                    display: flex;
-                    gap: 20px;
-                    align-items: center;
-                    margin-bottom: 15px;
-                }
-
-                .Label {
-                    font-size: 15px;
-                    color: var(--violet-11);
-                    width: 90px;
-                    text-align: right;
-                }
-
-                .Input {
-                    width: 100%;
-                    flex: 1;
-                    display: inline-flex;
-                    align-items: center;
-                    justify-content: center;
-                    border-radius: 4px;
-                    padding: 0 10px;
-                    font-size: 15px;
-                    line-height: 1;
-                    color: var(--violet-11);
-                    box-shadow: 0 0 0 1px var(--violet-7);
-                    height: 35px;
-                }
-
-                .Input:focus {
-                    box-shadow: 0 0 0 2px var(--violet-8);
-                }
-            </style>
-        `
-    })
-};
-
-export const DrawerStory: Story = {
-    render: (args) => ({
-        props: {
-            config: args
-        },
-        template: html``
-    })
-};

package/dropdown-menu/index.ts

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

package/dropdown-menu/ng-package.json

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

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

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

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

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

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

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

package/dropdown-menu/src/dropdown-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: '[rdxDropdownMenuItemRadioGroup]',
-    standalone: true,
-    host: {
-        role: 'group'
-    },
-    providers: [{ provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }]
-})
-export class RdxDropdownMenuItemRadioGroupDirective<T> implements AfterContentInit {
-    private readonly selectionDispatcher = inject(UniqueSelectionDispatcher);
-
-    @Input()
-    set value(id: T | null) {
-        this._value = id;
-    }
-
-    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/dropdown-menu/src/dropdown-menu-item-radio.directive.ts

@@ -1,72 +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 { RdxDropdownMenuContentDirective } from './dropdown-menu-content.directive';
-import { RdxDropdownMenuItemRadioGroupDirective } from './dropdown-menu-item-radio-group.directive';
-import { RdxDropdownMenuSelectable } from './dropdown-menu-item-selectable';
-import { RdxDropdownMenuItemDirective } from './dropdown-menu-item.directive';
-
-/** Counter used to set a unique id and name for a selectable item */
-let nextId = 0;
-
-@Directive({
-    selector: '[rdxDropdownMenuItemRadio]',
-    standalone: true,
-    host: {
-        role: 'menuitemradio'
-    },
-    providers: [
-        { provide: RdxDropdownMenuSelectable, useExisting: RdxDropdownMenuItemRadioDirective },
-        { provide: RdxDropdownMenuItemDirective, useExisting: RdxDropdownMenuSelectable },
-        { provide: CdkMenuItem, useExisting: RdxDropdownMenuItemDirective },
-        { provide: CDK_MENU, useExisting: RdxDropdownMenuContentDirective }
-    ]
-})
-export class RdxDropdownMenuItemRadioDirective
-    extends RdxDropdownMenuSelectable
-    implements AfterContentInit, OnDestroy
-{
-    /** The unique selection dispatcher for this radio's `RdxDropdownMenuItemRadioGroupDirective`. */
-    private readonly selectionDispatcher = inject(UniqueSelectionDispatcher);
-
-    private readonly group = inject(RdxDropdownMenuItemRadioGroupDirective);
-
-    @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/dropdown-menu/src/dropdown-menu-item-selectable.ts

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

package/dropdown-menu/src/dropdown-menu-item.directive.ts

@@ -1,66 +0,0 @@
-import { CDK_MENU, CdkMenuItem } from '@angular/cdk/menu';
-import { booleanAttribute, Directive, ElementRef, EventEmitter, inject, Input, Output } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-
-import { RdxDropdownMenuContentDirective } from './dropdown-menu-content.directive';
-
-@Directive({
-    selector: '[rdxDropdownMenuItem]',
-    standalone: true,
-    host: {
-        type: 'button',
-        // todo horizontal ?
-        '[attr.data-orientation]': '"vertical"',
-        '[attr.data-highlighted]': 'highlighted ? "" : null',
-        '[attr.data-disabled]': 'disabled ? "" : null',
-        '[attr.disabled]': 'disabled ? "" : null',
-        '(pointermove)': 'onPointerMove()',
-        '(focus)': 'menu.highlighted.next(this)',
-        '(keydown)': 'onKeydown($event)'
-    },
-    providers: [
-        { provide: CdkMenuItem, useExisting: RdxDropdownMenuItemDirective },
-        { provide: CDK_MENU, useExisting: RdxDropdownMenuContentDirective }
-    ]
-})
-export class RdxDropdownMenuItemDirective extends CdkMenuItem {
-    protected readonly menu = inject(RdxDropdownMenuContentDirective);
-    protected readonly nativeElement = inject(ElementRef).nativeElement;
-
-    highlighted = false;
-
-    @Input({ transform: booleanAttribute }) override disabled: boolean = false;
-
-    @Output() readonly onSelect = new EventEmitter<void>();
-
-    constructor() {
-        super();
-
-        this.menu.highlighted.pipe(takeUntilDestroyed()).subscribe((value) => {
-            if (value !== this) {
-                this.highlighted = false;
-            }
-        });
-
-        this.triggered.subscribe(this.onSelect);
-    }
-
-    protected onPointerMove() {
-        this.nativeElement.focus({ preventScroll: true });
-        this.menu.updateActiveItem(this);
-    }
-
-    protected onKeydown(event: KeyboardEvent) {
-        if (this.nativeElement.tagName !== 'BUTTON' && ['Enter', ' '].includes(event.key)) {
-            event.preventDefault();
-        }
-
-        if (event.key === 'Escape') {
-            if (!this.menu.closeOnEscape) {
-                event.stopPropagation();
-            } else {
-                this.menu.onEscapeKeyDown(event);
-            }
-        }
-    }
-}

package/dropdown-menu/src/dropdown-menu-label.directive.ts

@@ -1,7 +0,0 @@
-import { Directive } from '@angular/core';
-
-@Directive({
-    selector: '[rdxDropdownMenuLabel]',
-    standalone: true
-})
-export class RdxDropdownMenuLabelDirective {}

package/dropdown-menu/src/dropdown-menu-separator.directive.ts

@@ -1,13 +0,0 @@
-import { Directive } from '@angular/core';
-import { RdxSeparatorRootDirective } from '@radix-ng/primitives/separator';
-
-@Directive({
-    selector: '[rdxDropdownMenuSeparator]',
-    standalone: true,
-    hostDirectives: [RdxSeparatorRootDirective],
-    host: {
-        role: 'separator',
-        '[attr.aria-orientation]': "'horizontal'"
-    }
-})
-export class RdxDropdownMenuSeparatorDirective {}