@radix-ng/primitives 0.12.1 → 0.13.0

package/menubar/index.ts

@@ -1,38 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RdxMenuBarContentDirective } from './src/menubar-content.directive';
-import { RdxMenubarItemCheckboxDirective } from './src/menubar-item-checkbox.directive';
-import { RdxMenubarItemIndicatorDirective } from './src/menubar-item-indicator.directive';
-import { RdxMenubarItemRadioDirective } from './src/menubar-item-radio.directive';
-import { RdxMenuBarItemDirective } from './src/menubar-item.directive';
-import { RdxMenubarRadioGroupDirective } from './src/menubar-radio-group.directive';
-import { RdxMenuBarDirective } from './src/menubar-root.directive';
-import { RdxMenubarSeparatorDirective } from './src/menubar-separator.directive';
-import { RdxMenuBarTriggerDirective } from './src/menubar-trigger.directive';
-
-export * from './src/menubar-content.directive';
-export * from './src/menubar-item-checkbox.directive';
-export * from './src/menubar-item-indicator.directive';
-export * from './src/menubar-item-radio.directive';
-export * from './src/menubar-item.directive';
-export * from './src/menubar-radio-group.directive';
-export * from './src/menubar-root.directive';
-export * from './src/menubar-separator.directive';
-export * from './src/menubar-trigger.directive';
-
-const menubarImports = [
-    RdxMenuBarContentDirective,
-    RdxMenuBarTriggerDirective,
-    RdxMenubarSeparatorDirective,
-    RdxMenubarItemCheckboxDirective,
-    RdxMenuBarDirective,
-    RdxMenuBarItemDirective,
-    RdxMenubarItemIndicatorDirective,
-    RdxMenubarItemRadioDirective,
-    RdxMenubarRadioGroupDirective
-];
-
-@NgModule({
-    imports: [...menubarImports],
-    exports: [...menubarImports]
-})
-export class MenubarModule {}

package/menubar/ng-package.json

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

package/menubar/src/menubar-content.directive.ts

@@ -1,9 +0,0 @@
-import { CdkMenu } from '@angular/cdk/menu';
-import { Directive } from '@angular/core';
-
-@Directive({
-    selector: '[MenuBarContent]',
-    standalone: true,
-    hostDirectives: [CdkMenu]
-})
-export class RdxMenuBarContentDirective {}

package/menubar/src/menubar-item-checkbox.directive.ts

@@ -1,32 +0,0 @@
-import { BooleanInput } from '@angular/cdk/coercion';
-import { CdkMenuItemCheckbox } from '@angular/cdk/menu';
-import { booleanAttribute, computed, Directive, effect, inject, input, signal } from '@angular/core';
-
-@Directive({
-    selector: '[MenubarCheckboxItem]',
-    standalone: true,
-    hostDirectives: [CdkMenuItemCheckbox],
-    host: {
-        role: 'menuitemcheckbox',
-        '[attr.data-state]': 'checked() ? "checked": "unchecked"',
-        '[disabled]': 'disabledState()'
-    }
-})
-export class RdxMenubarItemCheckboxDirective {
-    private readonly cdkMenuItemCheckbox = inject(CdkMenuItemCheckbox, { host: true });
-
-    readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
-    readonly checked = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
-
-    protected readonly disabledState = computed(() => this.disabled || this.disabled$());
-
-    protected readonly checked$ = signal(this.cdkMenuItemCheckbox.checked);
-    protected readonly disabled$ = signal(this.cdkMenuItemCheckbox.disabled);
-
-    constructor() {
-        effect(() => {
-            this.cdkMenuItemCheckbox.checked = this.checked();
-            this.cdkMenuItemCheckbox.disabled = this.disabled();
-        });
-    }
-}

package/menubar/src/menubar-item-indicator.directive.ts

@@ -1,10 +0,0 @@
-import { Directive } from '@angular/core';
-
-@Directive({
-    selector: '[MenubarItemIndicator]',
-    standalone: true,
-    host: {
-        '[attr.data-state]': 'true'
-    }
-})
-export class RdxMenubarItemIndicatorDirective {}

package/menubar/src/menubar-item-radio.directive.ts

@@ -1,33 +0,0 @@
-import { BooleanInput } from '@angular/cdk/coercion';
-import { CdkMenuItemRadio } from '@angular/cdk/menu';
-import { booleanAttribute, computed, Directive, effect, inject, input, signal } from '@angular/core';
-
-@Directive({
-    selector: '[MenubarItemRadio]',
-    standalone: true,
-    hostDirectives: [CdkMenuItemRadio],
-    host: {
-        role: 'menuitemradio',
-        '[attr.aria-checked]': 'checked()',
-        '[attr.data-state]': 'checked() ? "checked": "unchecked"',
-        '[disabled]': 'disabledState()'
-    }
-})
-export class RdxMenubarItemRadioDirective {
-    private readonly cdkMenuItemRadio = inject(CdkMenuItemRadio, { host: true });
-
-    readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
-    readonly checked = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
-
-    protected readonly disabledState = computed(() => this.disabled || this.disabled$());
-
-    protected readonly checked$ = signal(this.cdkMenuItemRadio.checked);
-    protected readonly disabled$ = signal(this.cdkMenuItemRadio.disabled);
-
-    constructor() {
-        effect(() => {
-            this.cdkMenuItemRadio.checked = this.checked();
-            this.cdkMenuItemRadio.disabled = this.disabled();
-        });
-    }
-}

package/menubar/src/menubar-item.directive.ts

@@ -1,12 +0,0 @@
-import { BooleanInput } from '@angular/cdk/coercion';
-import { booleanAttribute, Directive, input } from '@angular/core';
-import { RdxMenuItemDirective } from '@radix-ng/primitives/menu';
-
-@Directive({
-    selector: '[MenuBarItem]',
-    standalone: true,
-    hostDirectives: [{ directive: RdxMenuItemDirective, inputs: ['rdxDisabled: disabled '] }]
-})
-export class RdxMenuBarItemDirective {
-    readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
-}

package/menubar/src/menubar-radio-group.directive.ts

@@ -1,9 +0,0 @@
-import { CdkMenuGroup } from '@angular/cdk/menu';
-import { Directive } from '@angular/core';
-
-@Directive({
-    selector: '[MenubarRadioGroup]',
-    standalone: true,
-    hostDirectives: [CdkMenuGroup]
-})
-export class RdxMenubarRadioGroupDirective {}

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

@@ -1,15 +0,0 @@
-import { CdkMenuBar } from '@angular/cdk/menu';
-import { Directive, input } from '@angular/core';
-
-@Directive({
-    selector: '[MenuBarRoot]',
-    standalone: true,
-    hostDirectives: [CdkMenuBar],
-    host: {
-        tabindex: '0',
-        '[attr.data-orientation]': 'orientation()'
-    }
-})
-export class RdxMenuBarDirective {
-    readonly orientation = input<'horizontal' | 'vertical'>('horizontal');
-}

package/menubar/src/menubar-separator.directive.ts

@@ -1,9 +0,0 @@
-import { Directive } from '@angular/core';
-import { RdxMenuSeparatorDirective } from '@radix-ng/primitives/menu';
-
-@Directive({
-    selector: '[MenubarSeparator]',
-    standalone: true,
-    hostDirectives: [RdxMenuSeparatorDirective]
-})
-export class RdxMenubarSeparatorDirective {}

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

@@ -1,40 +0,0 @@
-import { BooleanInput } from '@angular/cdk/coercion';
-import { CdkMenuTrigger } from '@angular/cdk/menu';
-import { booleanAttribute, Directive, inject, input } from '@angular/core';
-
-@Directive({
-    selector: '[MenuBarTrigger]',
-    standalone: true,
-    hostDirectives: [{ directive: CdkMenuTrigger, inputs: ['cdkMenuTriggerFor: MenuBarTrigger'] }],
-    host: {
-        type: 'button',
-        role: 'menuitem',
-        '[attr.aria-haspopup]': "'menu'",
-        '[attr.aria-expanded]': 'cdkTrigger.isOpen()',
-        '[attr.data-state]': "cdkTrigger.isOpen() ? 'open': 'closed'",
-        '[attr.data-disabled]': "disabled() ? '' : undefined",
-        '[disabled]': 'disabled()',
-
-        '(pointerdown)': 'onPointerDown($event)'
-    }
-})
-export class RdxMenuBarTriggerDirective {
-    protected readonly cdkTrigger = inject(CdkMenuTrigger, { host: true });
-
-    readonly disabled = input<boolean, BooleanInput>(false, {
-        transform: booleanAttribute
-    });
-
-    onPointerDown($event: MouseEvent) {
-        // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
-        // but not when the control key is pressed (avoiding MacOS right click)
-        if (!this.disabled() && $event.button === 0 && !$event.ctrlKey) {
-            /* empty */
-            if (!this.cdkTrigger.isOpen()) {
-                // prevent trigger focusing when opening
-                // this allows the content to be given focus without competition
-                $event.preventDefault();
-            }
-        }
-    }
-}

package/menubar/stories/menubar.stories.ts

@@ -1,229 +0,0 @@
-import { componentWrapperDecorator, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { Check, Dot, LucideAngularModule } from 'lucide-angular';
-import { MenubarModule } from '../index';
-
-export default {
-    title: 'Primitives/Menubar [In Progress]',
-    decorators: [
-        moduleMetadata({
-            imports: [MenubarModule, LucideAngularModule, LucideAngularModule.pick({ Check, Dot })]
-        }),
-        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 = {
-    render: () => ({
-        template: `
-<div MenuBarRoot class="MenubarRoot">
-  <button class="MenubarTrigger" MenuBarItem [MenuBarTrigger]="file">
-    File
-  </button>
-  <button class="MenubarTrigger" MenuBarItem [MenuBarTrigger]="edit">
-    Edit
-  </button>
-  <button class="MenubarTrigger" MenuBarItem [MenuBarTrigger]="view">
-    View
-  </button>
-  <button class="MenubarTrigger" MenuBarItem [MenuBarTrigger]="profiles">
-    Profiles
-  </button>
-</div>
-
-<ng-template #profiles>
-  <div class="MenubarContent" MenuBarContent>
-    <div MenubarRadioGroup>
-        <button class="MenubarRadioItem inset" MenubarItemRadio>
-            <lucide-icon class="MenubarItemIndicator" name="dot"/>Andy
-        </button>
-        <button class="MenubarRadioItem inset" MenubarItemRadio checked>
-            <lucide-icon class="MenubarItemIndicator" name="dot"/>Luis
-        </button>
-    </div>
-    <div MenubarSeparator class="MenubarSeparator"></div>
-    <button MenuBarItem class="MenubarItem inset">Edit</button>
-  </div>
-</ng-template>
-
-<ng-template #view>
-  <div class="MenubarContent" MenuBarContent>
-    <button class="MenubarCheckboxItem inset" MenubarCheckboxItem>
-        <lucide-icon class="MenubarItemIndicator" size="16" name="check" />Always Show Bookmarks Bar
-    </button>
-    <button class="MenubarCheckboxItem inset" MenubarCheckboxItem checked>
-        <lucide-icon class="MenubarItemIndicator" size="16" name="check" />Always Show Full URLs
-    </button>
-    <div MenubarSeparator class="MenubarSeparator"></div>
-    <button class="MenubarItem" MenuBarItem>Reload <div class="RightSlot">⌘ R</div></button>
-  </div>
-</ng-template>
-
-<ng-template #file>
-  <div class="MenubarContent" MenuBarContent>
-    <button class="MenubarItem" MenuBarItem>
-        New Tab <div class="RightSlot">⌘ T</div>
-    </button>
-    <button class="MenubarItem" MenuBarItem>
-        New Window <div class="RightSlot">⌘ N</div>
-    </button>
-    <button class="MenubarItem" MenuBarItem disabled>
-        New Incognito Window
-    </button>
-    <div MenubarSeparator class="MenubarSeparator"></div>
-    <button class="MenubarItem" MenuBarItem [MenuBarTrigger]="share">
-        Share <div class="RightSlot">></div>
-    </button>
-    <div MenubarSeparator class="MenubarSeparator"></div>
-    <button class="MenubarItem" MenuBarItem>
-        Print… <div class="RightSlot">⌘ P</div>
-    </button>
-  </div>
-</ng-template>
-
-<ng-template #edit>
-  <div class="MenubarContent" MenuBarContent>
-    <button class="MenubarItem" MenuBarItem>Undo <div class="RightSlot">⌘ Z</div></button>
-    <button class="MenubarItem" MenuBarItem>Redo <div class="RightSlot">⇧ ⌘ Z</div></button>
-    <div MenubarSeparator class="MenubarSeparator"></div>
-    <button class="MenubarItem" MenuBarItem>Cut</button>
-    <button class="MenubarItem" MenuBarItem>Copy</button>
-    <button class="MenubarItem" MenuBarItem>Paste</button>
-  </div>
-</ng-template>
-
-<ng-template #share>
-  <div class="MenubarSubContent" MenuBarContent>
-    <button class="MenubarItem" MenuBarItem>Undo</button>
-    <button class="MenubarItem" MenuBarItem>Redo</button>
-    <div MenubarSeparator class="MenubarSeparator"></div>
-    <button class="MenubarItem" MenuBarItem>Cut</button>
-    <button class="MenubarItem" MenuBarItem>Copy</button>
-    <button class="MenubarItem" MenuBarItem>Paste</button>
-  </div>
-</ng-template>
-
-<style>
-/* reset */
-button {
-  all: unset;
-}
-
-.MenubarRoot {
-  display: flex;
-  background-color: white;
-  padding: 3px;
-  border-radius: 6px;
-  box-shadow: 0 2px 10px var(--black-a7);
-}
-
-.MenubarTrigger {
-  padding: 8px 12px;
-  outline: none;
-  user-select: none;
-  font-weight: 500;
-  line-height: 1;
-  border-radius: 4px;
-  color: var(--violet-11);
-  font-size: 13px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 2px;
-}
-
-.MenubarTrigger[data-highlighted],
-.MenubarTrigger[data-state='open'] {
-  background-color: var(--violet-4);
-}
-
-.MenubarContent,
-.MenubarSubContent {
-  flex-direction: column;
-  display: inline-flex;
-  min-width: 220px;
-  background-color: white;
-  border-radius: 6px;
-  padding: 5px;
-  box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
-  will-change: transform, opacity;
-}
-
-.MenubarItem,
-.MenubarSubTrigger,
-.MenubarCheckboxItem,
-.MenubarRadioItem {
-  all: unset;
-  font-size: 13px;
-  line-height: 1;
-  color: var(--violet-11);
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  height: 25px;
-  padding: 0 10px;
-  position: relative;
-  user-select: none;
-}
-
-.MenubarItem.inset,
-.MenubarSubTrigger.inset,
-.MenubarCheckboxItem.inset,
-.MenubarRadioItem.inset {
-  padding-left: 20px;
-}
-
-.MenubarItem[data-disabled],
-.MenubarSubTrigger[data-disabled],
-.MenubarCheckboxItem[data-disabled],
-.MenubarRadioItem[data-disabled] {
-  color: var(--mauve-8);
-  pointer-events: none;
-}
-
-.MenubarItemIndicator {
-  position: absolute;
-  left: 0;
-  width: 20px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.MenubarRadioItem:hover,
-.MenubarCheckboxItem:hover,
-.MenubarItem:hover {
-  background-color: var(--violet-11);
-  color: white;
-}
-
-.MenubarSeparator {
-  height: 1px;
-  background-color: var(--violet-6);
-  margin: 5px;
-}
-
-.RightSlot {
-  margin-left: auto;
-  padding-left: 20px;
-  color: var(--mauve-9);
-  display: flex;
-  flex-direction: row;
-  flex: 1;
-  justify-content: flex-end;
-}
-
-</style>
-`
-    })
-};

package/ng-package.json

@@ -1,8 +0,0 @@
-{
-    "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-    "dest": "../../dist/primitives",
-    "lib": {
-        "entryFile": "index.ts"
-    },
-    "allowedNonPeerDependencies": []
-}

package/portal/stories/portal.docs.mdx

@@ -1,85 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-<Meta title="Utilities/Portal" />
-
-# Portal
-
-#### Renders an Angular component or template in a different part of the DOM.
-
-## Features
-
-- ✅ Render any Angular component or template outside of your App's main structure.
-- ✅ Appends to a custom container element, which can be configured as needed.
-
-## Installation
-
-To use the [Angular CDK Portal](https://material.angular.io/cdk/portal/overview), first install the CDK package:
-
-```bash
-npm install @angular/cdk
-```
-
-## Basic Usage
-
-### Defining a Portal
-
-First, create the component or template that you want to render in a different location:
-
-```typescript
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'component-portal-content',
-  standalone: true,
-  template: `
-    <p>This is portal content!</p>
-  `
-})
-export class PortalContentComponent {}
-```
-
-### Using the Portal
-
-In your main component, set up the portal and the outlet:
-
-```typescript
-// app.component.ts
-import { Component, ViewChild, AfterViewInit, inject, ApplicationRef, Injector, ViewContainerRef } from '@angular/core';
-import { CdkPortal, DomPortalOutlet } from '@angular/cdk/portal';
-import { PortalContentComponent } from './portal-content.component';
-
-@Component({
-  selector: 'app-root',
-  standalone: true,
-  template: `
-    <ng-template cdkPortal>
-      <app-portal-content></app-portal-content>
-    </ng-template>
-    <div #portalOutlet></div>
-  `
-})
-export class AppComponent implements AfterViewInit {
-  private readonly appRef = inject(ApplicationRef);
-  private readonly injector = inject(Injector);
-
-  @ViewChild(CdkPortal) portal: CdkPortal;
-  @ViewChild('portalOutlet', { read: ViewContainerRef }) portalOutlet: ViewContainerRef;
-
-  private host: DomPortalOutlet;
-
-  ngAfterViewInit() {
-    this.host = new DomPortalOutlet(this.portalOutlet.element.nativeElement, this.injector, this.appRef);
-    this.host.attach(this.portal);
-  }
-}
-```
-
-## Anatomy
-
-The Angular CDK Portal utility consists of a few key elements:
-
-1. **Portal**:
-   An Angular directive (`CdkPortal`) that defines the content to be rendered elsewhere.
-
-2. **Portal Outlet**:
-   An Angular directive (`CdkPortalOutlet`) or a host (`DomPortalOutlet`) where the portal content will be rendered.

package/presence/__test__/presence-test.component.ts

@@ -1,51 +0,0 @@
-import { Component, ElementRef, NgZone, OnInit } from '@angular/core';
-import { usePresence } from '../src/presence';
-import { CollapseContext, transitionCollapsing } from '../src/transitions/transition.collapse';
-
-@Component({
-    selector: 'app-presence',
-    template: `
-        <div #element>Presence Component</div>
-    `,
-    styles: [
-        `
-            .collapse {
-                transition: height 0.5s ease-in-out;
-            }
-            .collapsing {
-                height: 0px;
-            }
-            .show {
-                height: auto;
-            }
-        `
-
-    ]
-})
-export class PresenceComponent implements OnInit {
-    private context: CollapseContext = {
-        direction: 'show',
-        dimension: 'height'
-    };
-    private element!: HTMLElement;
-
-    constructor(
-        private zone: NgZone,
-        private elRef: ElementRef
-    ) {}
-
-    ngOnInit(): void {
-        this.element = this.elRef.nativeElement.querySelector('div');
-        const options = {
-            context: this.context,
-            animation: true,
-            state: 'stop' as const
-        };
-
-        usePresence(this.zone, this.element, transitionCollapsing, options).subscribe();
-    }
-
-    getContext(): CollapseContext {
-        return this.context;
-    }
-}

package/presence/__test__/presence.spec.ts

@@ -1,50 +0,0 @@
-import { NgZone } from '@angular/core';
-import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { PresenceComponent } from './presence-test.component';
-
-describe('presence', () => {
-    let component: PresenceComponent;
-    let fixture: ComponentFixture<PresenceComponent>;
-    let zone: NgZone;
-
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            declarations: [PresenceComponent],
-            providers: [{ provide: NgZone, useValue: new NgZone({ enableLongStackTrace: false }) }]
-        }).compileComponents();
-
-        fixture = TestBed.createComponent(PresenceComponent);
-        component = fixture.componentInstance;
-        zone = TestBed.inject(NgZone);
-
-        fixture.detectChanges(); // triggers ngOnInit
-    });
-
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
-
-    it('should initialize element and context correctly', () => {
-        const element = fixture.debugElement.query(By.css('div')).nativeElement;
-
-        const context = component.getContext();
-
-        expect(component['element']).toBe(element);
-        expect(context).toEqual({ direction: 'show', dimension: 'height', maxSize: '0px' });
-    });
-
-    it('should complete animation correctly', fakeAsync(() => {
-        const element = fixture.debugElement.query(By.css('div')).nativeElement;
-
-        zone.runOutsideAngular(() => {
-            element.dispatchEvent(new Event('transitionend'));
-        });
-
-        tick(600);
-        fixture.detectChanges();
-
-        expect(element.classList.contains('collapsing')).toBe(false);
-        expect(element.classList.contains('show')).toBe(true);
-    }));
-});

package/presence/index.ts

@@ -1,4 +0,0 @@
-export * from './src/presence';
-export * from './src/transitions/transition.collapse';
-export * from './src/transitions/transition.toast';
-export * from './src/types';