@radix-ng/primitives 0.12.1 → 0.13.0

package/dropdown-menu/stories/dropdown.stories.ts

@@ -1,212 +0,0 @@
-import { componentWrapperDecorator, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { Check, Dot, LucideAngularModule, Menu } from 'lucide-angular';
-
-import { RdxDropdownMenuContentDirective } from '../src/dropdown-menu-content.directive';
-import { RdxDropdownMenuItemCheckboxDirective } from '../src/dropdown-menu-item-checkbox.directive';
-import { RdxDropdownMenuItemIndicatorDirective } from '../src/dropdown-menu-item-indicator.directive';
-import { RdxDropdownMenuItemDirective } from '../src/dropdown-menu-item.directive';
-import { RdxDropdownMenuSeparatorDirective } from '../src/dropdown-menu-separator.directive';
-import { RdxDropdownMenuTriggerDirective } from '../src/dropdown-menu-trigger.directive';
-import { DropdownMenuItemCheckboxExampleComponent } from './dropdown-menu-item-checkbox.component';
-import { DropdownMenuItemRadioExampleComponent } from './dropdown-menu-item-radio.component';
-
-export default {
-    title: 'Primitives/Dropdown Menu',
-    decorators: [
-        moduleMetadata({
-            imports: [
-                RdxDropdownMenuTriggerDirective,
-                RdxDropdownMenuItemDirective,
-                RdxDropdownMenuItemCheckboxDirective,
-                RdxDropdownMenuItemIndicatorDirective,
-                RdxDropdownMenuSeparatorDirective,
-                RdxDropdownMenuContentDirective,
-                LucideAngularModule,
-                LucideAngularModule.pick({ Menu, Check, Dot }),
-                DropdownMenuItemCheckboxExampleComponent,
-                DropdownMenuItemRadioExampleComponent
-            ]
-        }),
-        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: `
-<button [rdxDropdownMenuTrigger]="menu"
-        sideOffset="4"
-        alignOffset="-5"
-        class="IconButton" aria-label="Customise options">
-    <lucide-angular size="16" name="menu" style="height: 1.2rem;"></lucide-angular>
-</button>
-
-<ng-template #menu>
-  <div class="DropdownMenuContent" rdxDropdownMenuContent>
-    <button class="DropdownMenuItem" rdxDropdownMenuItem>
-        New Tab <div class="RightSlot">⌘ T</div>
-    </button>
-    <button class="DropdownMenuItem" rdxDropdownMenuItem disabled>
-        New Window <div class="RightSlot">⌘ N</div>
-    </button>
-    <button class="DropdownMenuItem" rdxDropdownMenuItem>
-        New Incognito Window
-    </button>
-    <div rdxDropdownMenuSeparator class="DropdownMenuSeparator"></div>
-    <div class="DropdownMenuLabel" rdxDropdownMenuLabel>
-        Label
-    </div>
-    <button
-        class="DropdownMenuItem"
-        rdxDropdownMenuItem
-        [rdxDropdownMenuTrigger]="share"
-        [side]="'right'"
-    >
-        Share <div class="RightSlot">></div>
-    </button>
-    <div rdxDropdownMenuSeparator class="DropdownMenuSeparator"></div>
-    <button class="DropdownMenuItem" rdxDropdownMenuItem>
-        Print… <div class="RightSlot">⌘ P</div>
-    </button>
-  </div>
-</ng-template>
-
-<ng-template #share>
-  <div class="DropdownMenuContent" rdxDropdownMenuContent>
-    <button class="DropdownMenuItem" rdxDropdownMenuItem>Undo</button>
-    <button class="DropdownMenuItem" rdxDropdownMenuItem>Redo</button>
-    <div rdxDropdownMenuSeparator class="DropdownMenuSeparator"></div>
-    <button class="DropdownMenuItem" rdxDropdownMenuItem>Cut</button>
-    <button class="DropdownMenuItem" rdxDropdownMenuItem>Copy</button>
-    <button class="DropdownMenuItem" rdxDropdownMenuItem>Paste</button>
-  </div>
-</ng-template>
-
-<style>
-/* reset */
-button {
-  all: unset;
-}
-
-.DropdownMenuContent {
-  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;
-}
-
-.DropdownMenuItem,
-.DropdownMenuCheckboxItem,
-.DropdownMenuRadioItem {
-  font-size: 13px;
-  line-height: 1;
-  color: var(--violet-11);
-  border-radius: 3px;
-  display: flex;
-  align-items: center;
-  height: 25px;
-  position: relative;
-  padding: 0 5px 0 25px;
-  user-select: none;
-  outline: none;
-}
-
-.DropdownMenuItem[data-disabled],
-.DropdownMenuCheckboxItem[data-disabled],
-.DropdownMenuRadioItem[data-disabled] {
-  color: var(--mauve-8);
-  pointer-events: none;
-}
-.DropdownMenuItem[data-highlighted],
-.DropdownMenuCheckboxItem[data-highlighted],
-.DropdownMenuRadioItem[data-highlighted] {
-  background-color: var(--violet-9);
-  color: var(--violet-1);
-}
-
-.DropdownMenuSeparator {
-  height: 1px;
-  background-color: var(--violet-6);
-  margin: 5px;
-}
-
-.DropdownMenuLabel {
-  padding-left: 25px;
-  font-size: 12px;
-  line-height: 25px;
-  color: var(--mauve-11);
-}
-
-.IconButton {
-  font-family: inherit;
-  border-radius: 100%;
-  height: 35px;
-  width: 35px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--violet-11);
-  background-color: white;
-  box-shadow: 0 2px 10px var(--black-a7);
-}
-
-.DropdownMenuItemIndicator {
-  position: absolute;
-  left: 4px;
-  width: 25px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.IconButton:hover {
-  background-color: var(--violet-3);
-}
-
-.IconButton:focus {
-  box-shadow: 0 0 0 2px black;
-}
-
-.RightSlot {
-  margin-left: auto;
-  padding-left: 20px;
-  color: var(--mauve-9);
-  display: flex;
-  flex-direction: row;
-  flex: 1;
-  justify-content: flex-end;
-}
-
-</style>
-`
-    })
-};
-
-export const DropdownMenuItemCheckbox: Story = {
-    name: 'Checkbox',
-    render: () => ({
-        template: `<dropdown-menu-item-checkbox/>`
-    })
-};
-
-export const DropdownMenuItemRadio: Story = {
-    name: 'Radio',
-    render: () => ({
-        template: `<dropdown-menu-item-radio/>`
-    })
-};

package/form-field/index.ts

@@ -1 +0,0 @@
-export * from './src/form-field-control';

package/jest.config.ts

@@ -1,21 +0,0 @@
-export default {
-    displayName: 'primitives',
-    preset: '../../jest.preset.cjs',
-    setupFilesAfterEnv: ['<rootDir>/test-setup.ts'],
-    coverageDirectory: '../../coverage/packages/primitives',
-    transform: {
-        '^.+\\.(ts|mjs|js|html)$': [
-            'jest-preset-angular',
-            {
-                tsconfig: '<rootDir>/tsconfig.spec.json',
-                stringifyContentPathRegex: '\\.(html|svg)$'
-            }
-        ]
-    },
-    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
-    snapshotSerializers: [
-        'jest-preset-angular/build/serializers/no-ng-attributes',
-        'jest-preset-angular/build/serializers/ng-snapshot',
-        'jest-preset-angular/build/serializers/html-comment'
-    ]
-};

package/label/__tests__/label-root.directive.spec.ts

@@ -1,99 +0,0 @@
-import { Component, DebugElement } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { RdxLabelDirective } from '../src/label.directive';
-
-/* Explanation:
-
-    Environment Setup: In addition to the label, the template now includes a div and an input button to test interaction with different types of elements.
-
-    Double-click Prevention: Tests whether the directive correctly prevents default actions during a double-click, except on form elements like buttons.
-
-    Single Click Handling: Verifies that the directive does not interfere with default actions on single clicks.
-
-    Interaction with Children: Checks that double-clicks on non-form elements like divs also trigger prevention of default actions.*/
-@Component({
-    template: `
-        <label rdxLabel>
-            Test Label
-            <div>Click Me</div>
-            <input type="button" value="Button" />
-        </label>
-    `
-})
-class TestComponent {}
-
-describe('RdxLabelDirective', () => {
-    let fixture: ComponentFixture<TestComponent>;
-    let labelElement: DebugElement;
-    let inputElement: DebugElement;
-    let divElement: DebugElement;
-
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            imports: [RdxLabelDirective],
-            declarations: [TestComponent]
-        }).compileComponents();
-
-        fixture = TestBed.createComponent(TestComponent);
-        fixture.detectChanges();
-        labelElement = fixture.debugElement.query(By.directive(RdxLabelDirective));
-        inputElement = fixture.debugElement.query(By.css('input'));
-        divElement = fixture.debugElement.query(By.css('div'));
-    });
-
-    it('should create an instance of the directive', () => {
-        expect(labelElement).toBeTruthy();
-    });
-
-    it('should prevent default action on double-clicking the label, not on input elements', () => {
-        const mockEventLabel = new MouseEvent('mousedown', {
-            bubbles: true,
-            cancelable: true,
-            detail: 2
-        });
-        Object.defineProperty(mockEventLabel, 'target', { value: labelElement.nativeElement });
-        jest.spyOn(mockEventLabel, 'preventDefault');
-
-        labelElement.triggerEventHandler('mousedown', mockEventLabel);
-        expect(mockEventLabel.preventDefault).toHaveBeenCalled();
-
-        // Double-click event targeting the input element
-        const mockEventInput = new MouseEvent('mousedown', {
-            bubbles: true,
-            cancelable: true,
-            detail: 2
-        });
-        Object.defineProperty(mockEventInput, 'target', { value: inputElement.nativeElement });
-        jest.spyOn(mockEventInput, 'preventDefault');
-
-        labelElement.triggerEventHandler('mousedown', mockEventInput);
-        expect(mockEventInput.preventDefault).not.toHaveBeenCalled();
-    });
-
-    it('should not prevent default action on single clicks', () => {
-        const mockEvent = new MouseEvent('mousedown', {
-            bubbles: true,
-            cancelable: true,
-            detail: 1
-        });
-        Object.defineProperty(mockEvent, 'target', { value: labelElement.nativeElement });
-        jest.spyOn(mockEvent, 'preventDefault');
-
-        labelElement.triggerEventHandler('mousedown', mockEvent);
-        expect(mockEvent.preventDefault).not.toHaveBeenCalled();
-    });
-
-    it('should prevent default action when double-clicking non-button/input/select/textarea elements within the label', () => {
-        const mockEvent = new MouseEvent('mousedown', {
-            bubbles: true,
-            cancelable: true,
-            detail: 2
-        });
-        Object.defineProperty(mockEvent, 'target', { value: divElement.nativeElement });
-        jest.spyOn(mockEvent, 'preventDefault');
-
-        labelElement.triggerEventHandler('mousedown', mockEvent);
-        expect(mockEvent.preventDefault).toHaveBeenCalled();
-    });
-});

package/label/ng-package.json

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

package/label/src/label.directive.ts

@@ -1,58 +0,0 @@
-import { computed, Directive, ElementRef, inject, input, InputSignal } from '@angular/core';
-
-let idIterator = 0;
-
-@Directive({
-    selector: 'label[rdxLabel]',
-    exportAs: 'rdxLabel',
-    standalone: true,
-    host: {
-        '[attr.id]': 'this.elementId()',
-        '[attr.for]': 'htmlFor ? htmlFor() : null',
-        '(mousedown)': 'onMouseDown($event)'
-    }
-})
-export class RdxLabelDirective {
-    /**
-     * @type string
-     * @default 'rdx-label-{idIterator}'
-     */
-    readonly id: InputSignal<string> = input<string>(`rdx-label-${idIterator++}`);
-
-    /**
-     * @ignore
-     */
-    protected readonly elementId = computed(() => (this.id() ? this.id() : null));
-
-    /**
-     * The id of the element the label is associated with.
-     * @type string
-     * @default false
-     */
-    readonly htmlFor: InputSignal<string> = input<string>('');
-
-    /**
-     * @ignore
-     */
-    private readonly elementRef = inject(ElementRef<HTMLElement>);
-
-    // prevent text selection when double-clicking label
-    // The main problem with double-clicks in a web app is that
-    // you will have to create special code to handle this on touch enabled devices.
-    /**
-     * @ignore
-     */
-    onMouseDown(event: MouseEvent): void {
-        const target = event.target as HTMLElement;
-
-        // only prevent text selection if clicking inside the label itself
-        if (['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) {
-            return;
-        }
-
-        // prevent text selection when double-clicking label
-        if (this.elementRef.nativeElement.contains(target) && !event.defaultPrevented && event.detail > 1) {
-            event.preventDefault();
-        }
-    }
-}

package/label/stories/label.docs.mdx

@@ -1,40 +0,0 @@
-import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
-import { RdxLabelDirective } from '../src/label.directive';
-import * as LabelDirectiveStories from './label.stories';
-
-<Meta title="Primitives/Label" />
-
-# Label
-
-#### Renders an accessible label associated with controls.
-
-<Canvas sourceState="hidden" of={LabelDirectiveStories.Default} />
-
-## Features
-
-- ✅ Text selection is prevented when double-clicking label.
-
-## Import
-
-Get started with importing the directive:
-
-```typescript
-import { RdxLabelDirective } from '@radix-ng/primitives/label';
-```
-
-## Examples
-
-```html
-<label rdxLabel htmlFor="uniqId">First name</label>
-<input class="Input" id="uniqId" type="text" />
-```
-
-## API Reference
-
-<ArgTypes of={RdxLabelDirective} />
-
-## Accessibility
-
-This component is based on the native `label` element, it will automatically apply the correct labelling
-when wrapping controls or using the `for` attribute. For your own custom controls
-to work correctly, ensure they use native elements such as `button` or `input` as a base.

package/label/stories/label.stories.ts

@@ -1,76 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { componentWrapperDecorator, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { labelExclude } from '../../../../apps/storybook-radix/docs/utils/storybook';
-import { RdxLabelDirective } from '../src/label.directive';
-
-export default {
-    component: RdxLabelDirective,
-    title: 'Primitives/Label',
-    parameters: {
-        controls: {
-            exclude: labelExclude
-        }
-    },
-    decorators: [
-        moduleMetadata({
-            imports: [RdxLabelDirective, CommonModule]
-        }),
-        componentWrapperDecorator(
-            (story) =>
-                `<div class="radix-themes light light-theme"
-                      data-radius="medium"
-                      data-scaling="100%">${story}</div>`
-        )
-    ]
-} as Meta<RdxLabelDirective>;
-
-type Story = StoryObj<RdxLabelDirective>;
-
-export const Default: Story = {
-    render: (args) => ({
-        props: {
-            ...args
-        },
-        template: `
-<label rdxLabel htmlFor="uniqId">First Name </label>
-<input type="text" class="Input" id="uniqId" />
-
-<style>
-input {
-  all: unset;
-}
-
-.Input {
-  width: 200px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  padding: 0 10px;
-  margin-left: 10px;
-  height: 35px;
-  font-size: 15px;
-  line-height: 1;
-  color: white;
-  background-color: var(--black-a5);
-  box-shadow: 0 0 0 1px var(--black-a9);
-}
-
-.Input:focus {
-  box-shadow: 0 0 0 2px black;
-}
-.Input::selection {
-  background-color: var(--black-a9);
-  color: white;
-}
-
-label {
-    color: white;
-    font-size: 15px;
-    line-height: 35px;
-    font-weight: 500;
-}
-</style>
-`
-    })
-};

package/menu/index.ts

@@ -1,29 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RdxMenuContentDirective } from './src/menu-content.directive';
-import { RdxMenuDirective } from './src/menu-directive';
-import { RdxMenuGroupDirective } from './src/menu-group.directive';
-import { RdxMenuItemDirective } from './src/menu-item.directive';
-import { RdxMenuLabelDirective } from './src/menu-label.directive';
-import { RdxMenuSeparatorDirective } from './src/menu-separator.directive';
-
-export * from './src/menu-content.directive';
-export * from './src/menu-directive';
-export * from './src/menu-group.directive';
-export * from './src/menu-item.directive';
-export * from './src/menu-label.directive';
-export * from './src/menu-separator.directive';
-
-const menuImports = [
-    RdxMenuDirective,
-    RdxMenuGroupDirective,
-    RdxMenuItemDirective,
-    RdxMenuSeparatorDirective,
-    RdxMenuContentDirective,
-    RdxMenuLabelDirective
-];
-
-@NgModule({
-    imports: [...menuImports],
-    exports: [...menuImports]
-})
-export class MenuModule {}

package/menu/ng-package.json

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

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

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

package/menu/src/menu-directive.ts

@@ -1,10 +0,0 @@
-import { CdkMenu } from '@angular/cdk/menu';
-import { Directive } from '@angular/core';
-
-@Directive({
-    selector: '[Menu],[MenuSub]',
-    standalone: true,
-    host: {},
-    hostDirectives: [CdkMenu]
-})
-export class RdxMenuDirective {}

package/menu/src/menu-group.directive.ts

@@ -1,12 +0,0 @@
-import { CdkMenuGroup } from '@angular/cdk/menu';
-import { Directive } from '@angular/core';
-
-@Directive({
-    selector: '[MenuGroup]',
-    standalone: true,
-    hostDirectives: [CdkMenuGroup],
-    host: {
-        role: 'group'
-    }
-})
-export class RdxMenuGroupDirective {}

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

@@ -1,44 +0,0 @@
-import { BooleanInput } from '@angular/cdk/coercion';
-import { CdkMenuItem } from '@angular/cdk/menu';
-import { booleanAttribute, computed, Directive, effect, inject, input, Output } from '@angular/core';
-
-// type radixProps = {
-//     disabled: boolean;
-//     onSelect: () => {};
-// };
-
-@Directive({
-    selector: '[MenuItem]',
-    standalone: true,
-    hostDirectives: [CdkMenuItem],
-    host: {
-        role: 'menuitem',
-        type: 'button',
-        tabindex: '0',
-        '[attr.data-orientation]': "'horizontal'",
-        //'[attr.data-highlighted]': "",
-        '[attr.data-disabled]': "disabledState() ? '' : undefined",
-        '[disabled]': 'disabledState()'
-    }
-})
-export class RdxMenuItemDirective {
-    private readonly cdkMenuItem = inject(CdkMenuItem, { host: true });
-
-    // When true, prevents the user from interacting with the item.
-    readonly disabled = input<boolean, BooleanInput>(false, {
-        transform: booleanAttribute,
-        alias: 'rdxDisabled'
-    });
-
-    protected readonly disabledState = computed(() => this.disabled());
-
-    // Event handler called when the user selects an item (via mouse or keyboard).
-    @Output()
-    onSelect = this.cdkMenuItem.triggered;
-
-    constructor() {
-        effect(() => {
-            this.cdkMenuItem.disabled = this.disabled();
-        });
-    }
-}

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

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

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

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