@radix-ng/primitives 0.11.0 → 0.12.0

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

@@ -0,0 +1,212 @@
+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

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

package/jest.config.ts

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,99 @@
+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

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

package/label/src/label.directive.ts

@@ -0,0 +1,58 @@
+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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,76 @@
+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

@@ -0,0 +1,29 @@
+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

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

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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,44 @@
+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

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

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

@@ -0,0 +1,13 @@
+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 {}