@radix-ng/primitives 0.11.0 → 0.12.0

package/accordion/src/accordion-root.directive.ts

@@ -0,0 +1,205 @@
+import { FocusKeyManager } from '@angular/cdk/a11y';
+import { Directionality } from '@angular/cdk/bidi';
+import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
+import { ENTER, SPACE } from '@angular/cdk/keycodes';
+import {
+    AfterContentInit,
+    booleanAttribute,
+    ContentChildren,
+    Directive,
+    EventEmitter,
+    forwardRef,
+    inject,
+    InjectionToken,
+    Input,
+    OnDestroy,
+    Output,
+    QueryList
+} from '@angular/core';
+import { merge, Subject, Subscription } from 'rxjs';
+import { RdxAccordionItemDirective } from './accordion-item.directive';
+
+export type RdxAccordionType = 'single' | 'multiple';
+export type RdxAccordionOrientation = 'horizontal' | 'vertical';
+
+export const RdxAccordionRootToken = new InjectionToken<RdxAccordionRootDirective>('RdxAccordionRootDirective');
+
+let nextId = 0;
+
+@Directive({
+    selector: '[rdxAccordionRoot]',
+    standalone: true,
+    providers: [
+        { provide: RdxAccordionRootToken, useExisting: RdxAccordionRootDirective },
+        { provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }
+    ],
+    host: {
+        '[attr.data-orientation]': 'orientation',
+        '(keydown)': 'handleKeydown($event)'
+    }
+})
+export class RdxAccordionRootDirective implements AfterContentInit, OnDestroy {
+    /**
+     * @ignore
+     */
+    protected readonly selectionDispatcher = inject(UniqueSelectionDispatcher);
+    /**
+     * @ignore
+     */
+    protected readonly dir = inject(Directionality, { optional: true });
+
+    /**
+     * @ignore
+     */
+    protected keyManager: FocusKeyManager<RdxAccordionItemDirective>;
+
+    /**
+     * @ignore
+     */
+    readonly id: string = `rdx-accordion-${nextId++}`;
+
+    /**
+     * @ignore
+     */
+    readonly openCloseAllActions = new Subject<boolean>();
+
+    get isMultiple(): boolean {
+        return this.type === 'multiple';
+    }
+
+    /** Whether the Accordion is disabled. */
+    @Input({ transform: booleanAttribute }) disabled: boolean;
+
+    /**
+     * The orientation of the accordion.
+     */
+    @Input() orientation: RdxAccordionOrientation = 'vertical';
+    /**
+     * @private
+     * @ignore
+     */
+    @ContentChildren(forwardRef(() => RdxAccordionItemDirective), { descendants: true })
+    items: QueryList<RdxAccordionItemDirective>;
+
+    /**
+     * The value of the item to expand when initially rendered and type is "single". Use when you do not need to control the state of the items.
+     */
+    @Input()
+    set defaultValue(value: string[] | string) {
+        if (value !== this._defaultValue) {
+            this._defaultValue = Array.isArray(value) ? value : [value];
+        }
+    }
+
+    get defaultValue(): string[] | string {
+        return this.isMultiple ? this._defaultValue : this._defaultValue[0];
+    }
+
+    /**
+     * Determines whether one or multiple items can be opened at the same time.
+     */
+    @Input() type: RdxAccordionType = 'single';
+    /**
+     * @ignore
+     */
+    @Input() collapsible = true;
+    /**
+     * The controlled value of the item to expand
+     */
+    @Input()
+    set value(value: string[] | string) {
+        if (value !== this._value) {
+            this._value = Array.isArray(value) ? value : [value];
+
+            this.selectionDispatcher.notify(this.value as unknown as string, this.id);
+        }
+    }
+
+    get value(): string[] | string {
+        if (this._value === undefined) {
+            return this.defaultValue;
+        }
+
+        return this.isMultiple ? this._value : this._value[0];
+    }
+
+    @Output() readonly onValueChange: EventEmitter<void> = new EventEmitter<void>();
+
+    private _value?: string[];
+    private _defaultValue: string[] | string = [];
+
+    private onValueChangeSubscription: Subscription;
+
+    /**
+     * @ignore
+     */
+    ngAfterContentInit(): void {
+        this.selectionDispatcher.notify((this._value ?? this._defaultValue) as unknown as string, this.id);
+
+        this.keyManager = new FocusKeyManager(this.items).withHomeAndEnd();
+
+        if (this.orientation === 'horizontal') {
+            this.keyManager.withHorizontalOrientation(this.dir?.value || 'ltr');
+        } else {
+            this.keyManager.withVerticalOrientation();
+        }
+
+        this.onValueChangeSubscription = merge(...this.items.map((item) => item.expandedChange)).subscribe(() =>
+            this.onValueChange.emit()
+        );
+    }
+
+    /**
+     * @ignore
+     */
+    ngOnDestroy() {
+        this.openCloseAllActions.complete();
+        this.onValueChangeSubscription.unsubscribe();
+    }
+
+    /**
+     * @ignore
+     */
+    handleKeydown(event: KeyboardEvent) {
+        if (!this.keyManager.activeItem) {
+            this.keyManager.setFirstItemActive();
+        }
+
+        const activeItem = this.keyManager.activeItem;
+
+        if (
+            (event.keyCode === ENTER || event.keyCode === SPACE) &&
+            !this.keyManager.isTyping() &&
+            activeItem &&
+            !activeItem.disabled
+        ) {
+            event.preventDefault();
+            activeItem.toggle();
+        } else {
+            this.keyManager.onKeydown(event);
+        }
+    }
+
+    /** Opens all enabled accordion items in an accordion where multi is enabled.
+     * @ignore
+     */
+    openAll(): void {
+        if (this.isMultiple) {
+            this.openCloseAllActions.next(true);
+        }
+    }
+
+    /** Closes all enabled accordion items.
+     * @ignore
+     */
+    closeAll(): void {
+        this.openCloseAllActions.next(false);
+    }
+
+    /**
+     * @ignore
+     */
+    setActiveItem(item: RdxAccordionItemDirective) {
+        this.keyManager.setActiveItem(item);
+    }
+}

package/accordion/src/accordion-trigger.directive.ts

@@ -0,0 +1,37 @@
+import { Directive, ElementRef, inject } from '@angular/core';
+import { RdxAccordionItemDirective } from './accordion-item.directive';
+import { RdxAccordionRootDirective } from './accordion-root.directive';
+
+@Directive({
+    selector: '[rdxAccordionTrigger]',
+    standalone: true,
+    host: {
+        '[attr.role]': '"button"',
+        '[attr.aria-expanded]': 'item.expanded',
+        '[attr.data-state]': 'item.dataState',
+        '[attr.data-disabled]': 'item.disabled',
+        '[attr.disabled]': 'item.disabled ? "" : null',
+        '[attr.data-orientation]': 'item.orientation',
+        '(click)': 'onClick()'
+    }
+})
+export class RdxAccordionTriggerDirective {
+    protected readonly nativeElement = inject(ElementRef).nativeElement;
+    protected readonly accordionRoot = inject(RdxAccordionRootDirective);
+    protected readonly item = inject(RdxAccordionItemDirective);
+
+    /**
+     * Fires when trigger clicked
+     */
+    onClick(): void {
+        if (!this.accordionRoot.collapsible && this.item.expanded) return;
+
+        this.item.toggle();
+
+        this.accordionRoot.setActiveItem(this.item);
+    }
+
+    focus() {
+        this.nativeElement.focus();
+    }
+}

package/accordion/stories/accordion.docs.mdx

@@ -0,0 +1,77 @@
+import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
+import * as AccordionStories from './accordion.stories';
+import { RdxAccordionRootDirective } from '../src/accordion-root.directive';
+import { RdxAccordionItemDirective } from '../src/accordion-item.directive';
+import { RdxAccordionTriggerDirective } from '../src/accordion-trigger.directive';
+import { RdxAccordionContentDirective } from '../src/accordion-content.directive';
+
+<Meta title="Primitives/Accordion" />
+
+# Accordion
+
+#### A vertically stacked set of interactive headings that each reveal an associated section of content.
+
+## Single
+
+<Canvas sourceState="hidden" of={AccordionStories.Default} />
+
+## Multiple
+
+<Canvas sourceState="hidden" of={AccordionStories.Multiple} />
+
+## Horizontal
+
+<Canvas sourceState="hidden" of={AccordionStories.Horizontal} />
+
+## Features
+
+- ✅ Full keyboard navigation.
+- ✅ Supports horizontal/vertical orientation.
+- ✅ Supports Right to Left direction.
+- ✅ Can expand one or multiple items.
+- ✅ Can be controlled or uncontrolled.
+
+## Anatomy
+
+```html
+<div rdxAccordionRoot>
+  <div rdxAccordionItem>
+    <div rdxAccordionHeader>
+      <button rdxAccordionTrigger></button>
+    </div>
+    <div rdxAccordionContent></div>
+  </div>
+</div>
+```
+
+## Import
+
+Get started with importing the directives:
+
+```typescript
+import {
+  RdxAccordionRootDirective,
+  RdxAccordionItemDirective,
+  RdxAccordionHeaderDirective,
+  RdxAccordionTriggerDirective,
+  RdxAccordionContentDirective
+} from '@radix-ng/primitives/accordion';
+```
+
+## API Reference
+
+## RdxAccordionRootDirective
+
+<ArgTypes of={RdxAccordionRootDirective} />
+
+## RdxAccordionItemDirective
+
+<ArgTypes of={RdxAccordionItemDirective} />
+
+## RdxAccordionTriggerDirective
+
+<ArgTypes of={RdxAccordionTriggerDirective} />
+
+## RdxAccordionContentDirective
+
+<ArgTypes of={RdxAccordionContentDirective} />

package/accordion/stories/accordion.stories.ts

@@ -0,0 +1,340 @@
+import { BrowserAnimationsModule, provideAnimations } from '@angular/platform-browser/animations';
+import { componentWrapperDecorator, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { ChevronDown, LucideAngularModule } from 'lucide-angular';
+import { RdxAccordionContentDirective } from '../src/accordion-content.directive';
+import { RdxAccordionHeaderDirective } from '../src/accordion-header.directive';
+import { RdxAccordionItemDirective } from '../src/accordion-item.directive';
+import { RdxAccordionRootDirective } from '../src/accordion-root.directive';
+import { RdxAccordionTriggerDirective } from '../src/accordion-trigger.directive';
+
+export default {
+    title: 'Primitives/Accordion',
+    decorators: [
+        moduleMetadata({
+            imports: [
+                RdxAccordionRootDirective,
+                RdxAccordionItemDirective,
+                RdxAccordionHeaderDirective,
+                RdxAccordionTriggerDirective,
+                RdxAccordionContentDirective,
+                BrowserAnimationsModule,
+                LucideAngularModule,
+                LucideAngularModule.pick({ ChevronDown })
+            ],
+            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>
+                    /* reset */
+                    button,
+                    h3 {
+                        all: unset;
+                    }
+
+                    .AccordionRoot {
+                        border-radius: 6px;
+                        background-color: var(--mauve-6);
+                        box-shadow: 0 2px 10px var(--black-a4);
+                    }
+
+                    .AccordionRoot[data-orientation="vertical"] {
+                        width: 300px;
+                    }
+
+                    .AccordionRoot[data-orientation="horizontal"] {
+                        height: 300px;
+
+                        display: flex;
+                        flex-direction: row;
+                    }
+
+                    .AccordionItem {
+                        overflow: hidden;
+                        margin-top: 1px;
+                    }
+
+                    .AccordionItem[data-orientation="horizontal"] {
+                        display: flex;
+                    }
+
+                    .AccordionItem[data-orientation="vertical"]:first-child {
+                        margin-top: 0;
+                        border-top-left-radius: 4px;
+                        border-top-right-radius: 4px;
+                    }
+
+                    .AccordionItem[data-orientation="vertical"]:last-child {
+                        border-bottom-left-radius: 4px;
+                        border-bottom-right-radius: 4px;
+                    }
+
+                    .AccordionItem[data-orientation="horizontal"]:first-child {
+                        margin-top: 0;
+                        border-top-left-radius: 4px;
+                        border-bottom-left-radius: 4px;
+                    }
+
+                    .AccordionItem[data-orientation="horizontal"]:last-child {
+                        border-top-right-radius: 4px;
+                        border-bottom-right-radius: 4px;
+                    }
+
+                    .AccordionItem:focus-within {
+                        position: relative;
+                        z-index: 1;
+                        box-shadow: 0 0 0 2px var(--mauve-12);
+                    }
+
+                    .AccordionHeader {
+                        display: flex;
+                    }
+
+                    .AccordionTrigger {
+                        font-family: inherit;
+                        padding: 0 20px;
+                        height: 45px;
+                        flex: 1;
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-between;
+                        font-size: 15px;
+                        line-height: 1;
+                        color: var(--violet-11);
+                        box-shadow: 0 1px 0 var(--mauve-6);
+                        background-color: white;
+                        cursor: default;
+                    }
+
+                    .AccordionTrigger[data-orientation="horizontal"] {
+                        height: 100%;
+                        padding: 20px;
+                        writing-mode: vertical-rl;
+                    }
+
+                    .AccordionTrigger[data-disabled="true"] {
+                        color: var(--gray-7);
+                    }
+
+                    .AccordionTrigger:hover {
+                        background-color: var(--mauve-2);
+                    }
+
+                    .AccordionContent {
+                        display: flex;
+                        overflow: hidden;
+                        font-size: 15px;
+                        color: var(--mauve-11);
+                        background-color: var(--mauve-2);
+                    }
+                    .AccordionContent[data-orientation='vertical'][data-state='open'] {
+                        animation: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
+                    }
+                    .AccordionContent[data-orientation='vertical'][data-state='closed'] {
+                        animation: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
+                    }
+
+                    .AccordionContent[data-orientation='horizontal'][data-state='open'] {
+                        animation: slideRight 300ms cubic-bezier(0.87, 0, 0.13, 1);
+                    }
+                    .AccordionContent[data-orientation='horizontal'][data-state='closed'] {
+                        animation: slideLeft 300ms cubic-bezier(0.87, 0, 0.13, 1);
+                    }
+
+                    .AccordionContentText {
+                        padding: 15px 20px;
+                    }
+
+                    .AccordionChevron {
+                        display: flex;
+                        color: var(--violet-10);
+                        transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
+                    }
+                    .AccordionTrigger[data-state='open'] > .AccordionChevron {
+                        transform: rotate(180deg);
+                    }
+
+                    .horizontal-flex-container {
+                        display: flex;
+                    }
+
+                    @keyframes slideDown {
+                        from {
+                            height: 0;
+                        }
+                        to {
+                            height: var(--radix-accordion-content-height);
+                        }
+                    }
+
+                    @keyframes slideUp {
+                        from {
+                            height: var(--radix-accordion-content-height);
+                        }
+                        to {
+                            height: 0;
+                        }
+                    }
+
+                    @keyframes slideRight {
+                        from {
+                            width: 0;
+                        }
+                        to {
+                            width: var(--radix-accordion-content-width);
+                        }
+                    }
+
+                    @keyframes slideLeft {
+                        from {
+                            width: var(--radix-accordion-content-width);
+                        }
+                        to {
+                            width: 0;
+                        }
+                    }
+                </style>`
+        )
+    ]
+} as Meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+    render: () => ({
+        template: `
+            <div class="AccordionRoot" rdxAccordionRoot [defaultValue]="'item-1'">
+                <div [value]="'item-1'" class="AccordionItem" rdxAccordionItem>
+                    <div class="AccordionHeader" rdxAccordionHeader>
+                        <button class="AccordionTrigger" type="button" rdxAccordionTrigger>Is it accessible?
+                            <lucide-icon class="AccordionChevron" aria-hidden size="16" name="chevron-down"/>
+                        </button>
+                    </div>
+                    <div class="AccordionContent" rdxAccordionContent>
+                        <div class="AccordionContentText">
+                            Yes. It adheres to the WAI-ARIA design pattern.
+                        </div>
+                    </div>
+                </div>
+
+                <div [value]="'item-2'" class="AccordionItem" rdxAccordionItem [disabled]="true">
+                    <div class="AccordionHeader" rdxAccordionHeader>
+                        <button class="AccordionTrigger" type="button" rdxAccordionTrigger>Is it unstyled?
+                            <lucide-icon class="AccordionChevron" aria-hidden size="16" name="chevron-down"/>
+                        </button>
+                    </div>
+                    <div class="AccordionContent" rdxAccordionContent>
+                        <div class="AccordionContentText">
+                            Yes. It's unstyled by default, giving you freedom over the look and feel.
+                        </div>
+                    </div>
+                </div>
+
+                <div [value]="'item-3'" class="AccordionItem" rdxAccordionItem>
+                    <div class="AccordionHeader" rdxAccordionHeader>
+                        <button class="AccordionTrigger" type="button" rdxAccordionTrigger>Can it be animated?
+                            <lucide-icon class="AccordionChevron" aria-hidden size="16" name="chevron-down"/>
+                        </button>
+                    </div>
+                    <div class="AccordionContent" rdxAccordionContent>
+                        <div class="AccordionContentText">
+                            Yes! You can animate the Accordion with CSS or JavaScript.
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `
+    })
+};
+
+export const Multiple: Story = {
+    render: () => ({
+        template: `
+            <div class="AccordionRoot" rdxAccordionRoot [value]="['item-2', 'item-3']" [type]="'multiple'">
+                <div [value]="'item-1'" class="AccordionItem" rdxAccordionItem>
+                    <div class="AccordionHeader" rdxAccordionHeader>
+                        <button class="AccordionTrigger" type="button" rdxAccordionTrigger>Is it accessible?</button>
+                    </div>
+                    <div class="AccordionContent" rdxAccordionContent >
+                        <div class="AccordionContentText">
+                            Yes. It adheres to the WAI-ARIA design pattern.
+                        </div>
+                    </div>
+                </div>
+
+                <div [value]="'item-2'" class="AccordionItem" rdxAccordionItem>
+                    <div class="AccordionHeader" rdxAccordionHeader>
+                        <button class="AccordionTrigger" type="button" rdxAccordionTrigger>Is it unstyled?</button>
+                    </div>
+                    <div class="AccordionContent" rdxAccordionContent>
+                        <div class="AccordionContentText">
+                            Yes. It's unstyled by default, giving you freedom over the look and feel.
+                        </div>
+                    </div>
+                </div>
+
+                <div [value]="'item-3'" class="AccordionItem" rdxAccordionItem>
+                    <div class="AccordionHeader" rdxAccordionHeader>
+                        <button class="AccordionTrigger" type="button" rdxAccordionTrigger>Can it be animated?</button>
+                    </div>
+                    <div class="AccordionContent" rdxAccordionContent>
+                        <div class="AccordionContentText">
+                            Yes! You can animate the Accordion with CSS or JavaScript.
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `
+    })
+};
+
+export const Horizontal: Story = {
+    render: () => ({
+        template: `
+            <div class="horizontal-flex-container">
+                <div class="AccordionRoot" rdxAccordionRoot [defaultValue]="'item-1'" [orientation]="'horizontal'">
+                    <div [value]="'item-1'" class="AccordionItem" rdxAccordionItem>
+                        <div class="AccordionHeader" rdxAccordionHeader>
+                            <button class="AccordionTrigger" type="button" rdxAccordionTrigger>Is it accessible?</button>
+                        </div>
+                        <div class="AccordionContent" rdxAccordionContent>
+                            <div class="AccordionContentText">
+                                Yes. It adheres to the WAI-ARIA design pattern.
+                            </div>
+                        </div>
+                    </div>
+
+                    <div [value]="'item-2'" class="AccordionItem" rdxAccordionItem [disabled]="true">
+                        <div class="AccordionHeader" rdxAccordionHeader>
+                            <button class="AccordionTrigger" type="button" rdxAccordionTrigger>Is it unstyled?</button>
+                        </div>
+                        <div class="AccordionContent" rdxAccordionContent>
+                            <div class="AccordionContentText">
+                                Yes. It's unstyled by default, giving you freedom over the look and feel.
+                            </div>
+                        </div>
+                    </div>
+
+                    <div [value]="'item-3'" class="AccordionItem" rdxAccordionItem>
+                        <div class="AccordionHeader" rdxAccordionHeader>
+                            <button class="AccordionTrigger" type="button" rdxAccordionTrigger>Can it be animated?</button>
+                        </div>
+                        <div class="AccordionContent" rdxAccordionContent>
+                            <div class="AccordionContentText">
+                                Yes! You can animate the Accordion with CSS or JavaScript.
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `
+    })
+};

package/alert-dialog/{index.d.ts → index.ts}

@@ -3,4 +3,5 @@ export * from './src/alert-dialog-content.directive';
 export * from './src/alert-dialog-root.directive';
 export * from './src/alert-dialog-title.directive';
 export * from './src/alert-dialog-trigger.directive';
+
 export * from './src/alert-dialog.service';

package/alert-dialog/ng-package.json

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

package/alert-dialog/src/alert-dialog-cancel.directive.ts

@@ -0,0 +1,17 @@
+import { Directive, inject } from '@angular/core';
+import { AlertDialogService } from './alert-dialog.service';
+
+@Directive({
+    selector: '[rdxAlertDialogCancel]',
+    standalone: true,
+    host: {
+        '(click)': 'onClick()'
+    }
+})
+export class AlertDialogCancelDirective {
+    private readonly alertDialogService = inject(AlertDialogService);
+
+    onClick() {
+        this.alertDialogService.close();
+    }
+}