@radix-ng/primitives 0.12.1 → 0.13.0

package/accordion/stories/accordion.stories.ts

@@ -1,340 +0,0 @@
-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/ng-package.json

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

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

@@ -1,17 +0,0 @@
-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();
-    }
-}

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

@@ -1,24 +0,0 @@
-import { CdkTrapFocus } from '@angular/cdk/a11y';
-import { Directive, ElementRef, inject, Input, Renderer2 } from '@angular/core';
-
-@Directive({
-    selector: '[rdxAlertDialogContent]',
-    hostDirectives: [
-        {
-            directive: CdkTrapFocus
-        }
-    ],
-    standalone: true,
-    host: {
-        '[attr.data-state]': 'open',
-        '[attr.cdkTrapFocusAutoCapture]': 'true'
-    }
-})
-export class AlertDialogContentDirective {
-    private readonly renderer = inject(Renderer2);
-    private readonly elementRef = inject(ElementRef);
-
-    @Input() set maxWidth(value: string) {
-        this.renderer.setStyle(this.elementRef.nativeElement, 'maxWidth', value);
-    }
-}

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

@@ -1,15 +0,0 @@
-import { Directive, inject, Input, TemplateRef, ViewContainerRef } from '@angular/core';
-import { AlertDialogService } from './alert-dialog.service';
-
-@Directive({
-    selector: '[rdxAlertDialogRoot]',
-    standalone: true
-})
-export class AlertDialogRootDirective {
-    private readonly viewContainerRef = inject(ViewContainerRef);
-    private readonly alertDialogService = inject(AlertDialogService);
-
-    @Input() set content(template: TemplateRef<any>) {
-        this.alertDialogService.setDialogContent(this.viewContainerRef, template);
-    }
-}

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

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

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

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

package/alert-dialog/src/alert-dialog.service.ts

@@ -1,51 +0,0 @@
-import { Overlay, OverlayRef } from '@angular/cdk/overlay';
-import { TemplatePortal } from '@angular/cdk/portal';
-import { Injectable, TemplateRef, ViewContainerRef } from '@angular/core';
-
-@Injectable({
-    providedIn: 'root'
-})
-export class AlertDialogService {
-    private overlayRef: OverlayRef | null | undefined;
-    private dialogContent:
-        | {
-              viewContainerRef: ViewContainerRef;
-              template: TemplateRef<any>;
-          }
-        | undefined;
-
-    constructor(private overlay: Overlay) {}
-
-    setDialogContent(viewContainerRef: ViewContainerRef, template: TemplateRef<any>) {
-        this.dialogContent = { viewContainerRef, template };
-    }
-
-    open() {
-        if (!this.dialogContent) {
-            throw new Error('Dialog content is not set');
-        }
-
-        this.overlayRef = this.overlay.create({
-            hasBackdrop: true,
-            backdropClass: 'cdk-overlay-dark-backdrop',
-            positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically()
-        });
-
-        const templatePortal = new TemplatePortal(this.dialogContent.template, this.dialogContent.viewContainerRef);
-        this.overlayRef.attach(templatePortal);
-
-        this.overlayRef.keydownEvents().subscribe((event) => {
-            if (event.key === 'Escape' || event.code === 'Escape') {
-                this.close();
-            }
-        });
-        this.overlayRef.backdropClick().subscribe(() => this.close());
-    }
-
-    close() {
-        if (this.overlayRef) {
-            this.overlayRef.dispose();
-            this.overlayRef = null;
-        }
-    }
-}

package/alert-dialog/stories/alert-dialog.stories.ts

@@ -1,139 +0,0 @@
-import { OverlayModule } from '@angular/cdk/overlay';
-import { PortalModule } from '@angular/cdk/portal';
-import { componentWrapperDecorator, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { AlertDialogCancelDirective } from '../src/alert-dialog-cancel.directive';
-import { AlertDialogContentDirective } from '../src/alert-dialog-content.directive';
-import { AlertDialogRootDirective } from '../src/alert-dialog-root.directive';
-import { AlertDialogTitleDirective } from '../src/alert-dialog-title.directive';
-import { AlertDialogTriggerDirective } from '../src/alert-dialog-trigger.directive';
-import { AlertDialogService } from '../src/alert-dialog.service';
-
-export default {
-    title: 'Primitives/Alert Dialog',
-    decorators: [
-        moduleMetadata({
-            imports: [
-                AlertDialogContentDirective,
-                AlertDialogRootDirective,
-                AlertDialogTitleDirective,
-                AlertDialogTriggerDirective,
-                AlertDialogCancelDirective,
-                OverlayModule,
-                PortalModule
-            ],
-            providers: [AlertDialogService]
-        }),
-        componentWrapperDecorator(
-            (story) =>
-                `
-                    <div class="radix-themes light light-theme"
-                      data-radius="medium"
-                      data-scaling="100%">${story}</div>`
-        )
-    ]
-} as Meta;
-
-type Story = StoryObj;
-
-export const Default: Story = {
-    render: (args) => ({
-        props: args,
-        template: `
-
-<div rdxAlertDialogRoot [content]="alertDialogContent">
-    <button rdxAlertDialogTrigger class="Button violet">Delete account</button>
-    <ng-template #alertDialogContent>
-        <div rdxAlertDialogContent maxWidth="450" class="AlertDialogContent">
-            <h2 rdxAlertDialogTitle class="AlertDialogTitle">Are you absolutely sure?</h2>
-            <p class="AlertDialogDescription">
-               This action cannot be undone. This will permanently delete your account and remove your data from our servers.
-            </p>
-            <div style="display: flex; gap: 3px; margin-top: 4px; justify-content: flex-end;">
-                <button rdxAlertDialogCancel class="Button mauve">Cancel</button>
-                <button class="Button red">Revoke access</button>
-            </div>
-        </div>
-    </ng-template>
-</div>
-
-<style>
-
-.AlertDialogContent {
-  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: 500px;
-  max-height: 85vh;
-  padding: 25px;
-  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.AlertDialogTitle {
-  margin: 0;
-  color: var(--mauve-12);
-  font-size: 17px;
-  font-weight: 500;
-}
-
-.AlertDialogDescription {
-  margin-bottom: 20px;
-  color: var(--mauve-11);
-  font-size: 15px;
-  line-height: 1.5;
-}
-
-button {
-  all: unset;
-}
-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.red {
-  background-color: var(--red-4);
-  color: var(--red-11);
-}
-.Button.red:hover {
-  background-color: var(--red-5);
-}
-.Button.red:focus {
-  box-shadow: 0 0 0 2px var(--red-7);
-}
-.Button.mauve {
-  background-color: var(--mauve-4);
-  color: var(--mauve-11);
-}
-.Button.mauve:hover {
-  background-color: var(--mauve-5);
-}
-.Button.mauve:focus {
-  box-shadow: 0 0 0 2px var(--mauve-7);
-}
-</style>
-
-`
-    })
-};

package/avatar/__tests__/avatar-fallback.directive.spec.ts

@@ -1,31 +0,0 @@
-import { Component, PLATFORM_ID } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { RdxAvatarFallbackDirective } from '../src/avatar-fallback.directive';
-import { RdxAvatarRootDirective } from '../src/avatar-root.directive';
-
-@Component({
-    selector: 'rdx-mock-component',
-    standalone: true,
-    imports: [RdxAvatarFallbackDirective, RdxAvatarRootDirective],
-    template: `
-        <span rdxAvatarRoot>
-            <span rdxAvatarFallback>fallback</span>
-            <span rdxAvatarFallback>fallback2</span>
-        </span>
-    `
-})
-class RdxMockComponent {}
-
-describe('RdxAvatarFallbackDirective', () => {
-    let component: RdxMockComponent;
-    let fixture: ComponentFixture<RdxMockComponent>;
-
-    beforeEach(() => {
-        fixture = TestBed.overrideProvider(PLATFORM_ID, { useValue: 'browser' }).createComponent(RdxMockComponent);
-        component = fixture.componentInstance;
-    });
-
-    it('should compile', () => {
-        expect(component).toBeTruthy();
-    });
-});