@radix-ng/primitives 0.11.1 → 0.12.1

package/.compodocrc.json

@@ -0,0 +1,12 @@
+{
+    "$schema": "../../node_modules/@compodoc/compodoc/src/config/schema.json",
+    "tsconfig": "tsconfig.doc.json",
+    "output": "../../dist/primitives/compodoc",
+    "exportFormat": "json",
+    "hideGenerator": true,
+    "disableCoverage": true,
+    "disablePrivate": true,
+    "disableInternal": true,
+    "disableLifeCycleHooks": true,
+    "disableDependencies": true
+}

package/CHANGELOG.md

@@ -0,0 +1,189 @@
+## 0.12.1 (2024-09-19)
+
+
+### 🩹 Fixes
+
+- publish script ([1ecaf0c](https://github.com/radix-ng/primitives/commit/1ecaf0c))
+
+## 0.12.0 (2024-09-19)
+
+
+### 🚀 Features
+
+- **dialog:** added Dialog primitive ([#101](https://github.com/radix-ng/primitives/pull/101))
+
+- **radio:** added prefix rdx ([e5ebbc6](https://github.com/radix-ng/primitives/commit/e5ebbc6))
+
+- **ci:** added eslint support ([#103](https://github.com/radix-ng/primitives/pull/103))
+
+- **context-menu:** added context menu ([#2865](https://github.com/radix-ng/primitives/pull/2865), [#104](https://github.com/radix-ng/primitives/pull/104))
+
+
+### 🩹 Fixes
+
+- **avatar:** supported SSR ([c50ce18](https://github.com/radix-ng/primitives/commit/c50ce18))
+
+- **dropdown-menu:** navigation ([#106](https://github.com/radix-ng/primitives/pull/106))
+
+## 0.11.1 (2024-09-10)
+
+
+### 🩹 Fixes
+
+- shadcn/ui accordion example ([ee300bb](https://github.com/radix-ng/primitives/commit/ee300bb))
+
+- animation in accordion-content.directive ([#94](https://github.com/radix-ng/primitives/pull/94))
+
+## 0.11.0 (2024-09-06)
+
+
+### 🚀 Features
+
+- radix documentation - Astro and MDX ([#69](https://github.com/radix-ng/primitives/pull/69))
+
+- accordion (#DS-2773) ([#92](https://github.com/radix-ng/primitives/pull/92))
+
+- **collapsible:** rename onOpenChange and added content attributes ([24baf80](https://github.com/radix-ng/primitives/commit/24baf80))
+
+
+### 🩹 Fixes
+
+- **radio-group:** added focusKeyManager ([#95](https://github.com/radix-ng/primitives/pull/95))
+
+## 0.10.0 (2024-08-21)
+
+
+### 🚀 Features
+
+- **primitives:** added rdx suffix for separator directive ([be5f9a5](https://github.com/radix-ng/primitives/commit/be5f9a5))
+
+
+### 🩹 Fixes
+
+- extend in trigger and menu + onEscapeKeyDown ([#86](https://github.com/radix-ng/primitives/pull/86))
+
+## 0.9.1 (2024-08-15)
+
+
+### 🩹 Fixes
+
+- use extend for CdkMenuItem ([#85](https://github.com/radix-ng/primitives/pull/85))
+
+## 0.9.0 (2024-08-13)
+
+
+### 🚀 Features
+
+- added stylelint support ([#64](https://github.com/radix-ng/primitives/pull/64))
+
+- added prettier support for ts files ([#80](https://github.com/radix-ng/primitives/pull/80))
+
+- added prettier support for mdx files ([#81](https://github.com/radix-ng/primitives/pull/81))
+
+- **primitives:** dropdown menu, added parameters – side, align and offsets ([#65](https://github.com/radix-ng/primitives/pull/65))
+
+- **primitives:** avatar - added prefix ([908bce1](https://github.com/radix-ng/primitives/commit/908bce1))
+
+- **primitives:** updated prefix and documentation ([a2e5d34](https://github.com/radix-ng/primitives/commit/a2e5d34))
+
+- **primitives:** dropdown menu ([#79](https://github.com/radix-ng/primitives/pull/79))
+
+## 0.8.2 (2024-07-20)
+
+
+### 🚀 Features
+
+- **primitives:** upd Checkbox added input primitive and upd docs for imdeterminate ([e7d1279](https://github.com/radix-ng/primitives/commit/e7d1279))
+
+- **shadcn:** updated checkbox indeterminate state ([497659d](https://github.com/radix-ng/primitives/commit/497659d))
+
+## 0.8.1 (2024-07-10)
+
+This was a version bump only for primitives to align it with other projects, there were no code changes.
+
+## 0.7.2 (2024-07-06)
+
+
+### 🚀 Features
+
+- added Menubar base primitive ([0db991f](https://github.com/radix-ng/primitives/commit/0db991f))
+
+- added Menu base primitive ([c7e395e](https://github.com/radix-ng/primitives/commit/c7e395e))
+
+- **menubar:** added MenuBar ([#44](https://github.com/radix-ng/primitives/pull/44))
+
+## 0.7.1 (2024-06-30)
+
+This was a version bump only for primitives to align it with other projects, there were no code changes.
+
+## 0.7.0 (2024-06-29)
+
+
+### 🚀 Features
+
+- **tabs:** added Tabs ([#38](https://github.com/radix-ng/primitives/pull/38))
+
+## 0.6.0 (2024-06-20)
+
+
+### 🚀 Features
+
+- based for Textarea ([fcd14e1](https://github.com/radix-ng/primitives/commit/fcd14e1))
+
+- added beta presence ([55b4a75](https://github.com/radix-ng/primitives/commit/55b4a75))
+
+- **alert-dialog:** poc code ([f314588](https://github.com/radix-ng/primitives/commit/f314588))
+
+## 0.5.0 (2024-04-26)
+
+
+### 🚀 Features
+
+- added Accordion primitive ([2e95121](https://github.com/radix-ng/primitives/commit/2e95121))
+
+- **toggle-group:** added Toggle Group primitive ([88a38d3](https://github.com/radix-ng/primitives/commit/88a38d3))
+
+
+### 🩹 Fixes
+
+- **label:** added setter for UniqueId ([774c82f](https://github.com/radix-ng/primitives/commit/774c82f))
+
+## 0.4.0 (2024-04-22)
+
+
+### 🚀 Features
+
+- **toggle:** added Toggle primitive ([f9a98dc](https://github.com/radix-ng/primitives/commit/f9a98dc))
+
+## 0.3.0 (2024-04-20)
+
+
+### 🚀 Features
+
+- added overlay and tooltip ([e993fb3](https://github.com/radix-ng/primitives/commit/e993fb3))
+
+- **avatar:** added primitive ([f76e8e9](https://github.com/radix-ng/primitives/commit/f76e8e9))
+
+## 0.2.0 (2024-04-16)
+
+### 🚀 Features
+
+-   **radio:** added Radio Group ([f0b0eed](https://github.com/radix-ng/primitives/commit/f0b0eed))
+
+### 🩹 Fixes
+
+-   **checkbox:** updated story and styles ([7999532](https://github.com/radix-ng/primitives/commit/7999532))
+
+-   **styles:** radix variables ([532a6d1](https://github.com/radix-ng/primitives/commit/532a6d1))
+
+## 0.1.1 (2024-04-14)
+
+### 🩹 Fixes
+
+-   nx release publish target ([a27032f](https://github.com/radix-ng/primitives/commit/a27032f))
+
+## 0.1.0 (2024-04-14)
+
+### 🚀 Features
+
+-   **progress:** added progress meter ([17f3ffb](https://github.com/radix-ng/primitives/commit/17f3ffb))

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 radix-ng
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,5 +1,7 @@
 # Primitives
 
-> Radix-NG is an unofficial Angular port of [Radix UI](https://www.radix-ui.com/), thus we share the same principal and vision when building primitives.
+> Radix-NG is an unofficial Angular port of [Radix UI](https://www.radix-ui.com/),
+> thus we share the same principal and vision when building primitives.
 
-Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience. You can use these components either as the base layer of your design system, or adopt them incrementally.
+Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience.
+You can use these components either as the base layer of your design system, or adopt them incrementally.

package/accordion/__tests__/accordion-content.directive.spec.ts

@@ -0,0 +1,8 @@
+import { RdxAccordionContentDirective } from '../src/accordion-content.directive';
+
+xdescribe('RdxAccordionContentDirective', () => {
+    it('should create an instance', () => {
+        const directive = new RdxAccordionContentDirective();
+        expect(directive).toBeTruthy();
+    });
+});

package/accordion/__tests__/accordion-header.directive.spec.ts

@@ -0,0 +1,8 @@
+import { RdxAccordionHeaderDirective } from '../src/accordion-header.directive';
+
+xdescribe('RdxAccordionHeaderDirective', () => {
+    it('should create an instance', () => {
+        const directive = new RdxAccordionHeaderDirective();
+        expect(directive).toBeTruthy();
+    });
+});

package/accordion/__tests__/accordion-item.directive.spec.ts

@@ -0,0 +1,8 @@
+import { RdxAccordionItemDirective } from '../src/accordion-item.directive';
+
+xdescribe('RdxAccordionItemDirective', () => {
+    it('should create an instance', () => {
+        const directive = new RdxAccordionItemDirective();
+        expect(directive).toBeTruthy();
+    });
+});

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

@@ -0,0 +1,8 @@
+import { RdxAccordionRootDirective } from '../src/accordion-root.directive';
+
+xdescribe('RdxAccordionRootDirective', () => {
+    it('should create an instance', () => {
+        const directive = new RdxAccordionRootDirective();
+        expect(directive).toBeTruthy();
+    });
+});

package/accordion/__tests__/accordion-trigger.directive.spec.ts

@@ -0,0 +1,8 @@
+import { RdxAccordionTriggerDirective } from '../src/accordion-trigger.directive';
+
+xdescribe('RdxAccordionTriggerDirective', () => {
+    it('should create an instance', () => {
+        const directive = new RdxAccordionTriggerDirective();
+        expect(directive).toBeTruthy();
+    });
+});

package/accordion/ng-package.json

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

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

@@ -0,0 +1,46 @@
+import { Directive, ElementRef, inject } from '@angular/core';
+import { RdxAccordionItemDirective } from './accordion-item.directive';
+
+@Directive({
+    selector: '[rdxAccordionContent]',
+    standalone: true,
+    exportAs: 'rdxAccordionContent',
+    host: {
+        '[attr.role]': '"region"',
+        '[style.display]': 'hidden ? "none" : ""',
+        '[attr.data-state]': 'item.dataState',
+        '[attr.data-disabled]': 'item.disabled',
+        '[attr.data-orientation]': 'item.orientation',
+        '(animationend)': 'onAnimationEnd()'
+    }
+})
+export class RdxAccordionContentDirective {
+    protected readonly item = inject(RdxAccordionItemDirective);
+    protected readonly nativeElement = inject(ElementRef).nativeElement;
+
+    protected hidden = false;
+
+    protected onAnimationEnd() {
+        this.hidden = !this.item.expanded;
+
+        const { height, width } = this.nativeElement.getBoundingClientRect();
+
+        this.nativeElement.style.setProperty('--radix-collapsible-content-height', `${height}px`);
+        this.nativeElement.style.setProperty('--radix-collapsible-content-width', `${width}px`);
+
+        this.nativeElement.style.setProperty(
+            '--radix-accordion-content-height',
+            'var(--radix-collapsible-content-height)'
+        );
+        this.nativeElement.style.setProperty(
+            '--radix-accordion-content-width',
+            'var(--radix-collapsible-content-width)'
+        );
+    }
+
+    onToggle() {
+        if (!this.item.expanded) {
+            this.hidden = false;
+        }
+    }
+}

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

@@ -0,0 +1,15 @@
+import { Directive, inject } from '@angular/core';
+import { RdxAccordionItemDirective } from './accordion-item.directive';
+
+@Directive({
+    selector: '[rdxAccordionHeader]',
+    standalone: true,
+    host: {
+        '[attr.data-state]': 'item.dataState',
+        '[attr.data-disabled]': 'item.disabled',
+        '[attr.data-orientation]': 'item.orientation'
+    }
+})
+export class RdxAccordionHeaderDirective {
+    protected readonly item = inject(RdxAccordionItemDirective);
+}

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

@@ -0,0 +1,216 @@
+import { FocusableOption } from '@angular/cdk/a11y';
+import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
+import {
+    booleanAttribute,
+    ChangeDetectorRef,
+    ContentChild,
+    Directive,
+    EventEmitter,
+    forwardRef,
+    inject,
+    Input,
+    OnDestroy,
+    Output
+} from '@angular/core';
+import { Subscription } from 'rxjs';
+import { RdxAccordionContentDirective } from './accordion-content.directive';
+import { RdxAccordionOrientation, RdxAccordionRootToken } from './accordion-root.directive';
+import { RdxAccordionTriggerDirective } from './accordion-trigger.directive';
+
+export type RdxAccordionItemState = 'open' | 'closed';
+
+let nextId = 0;
+
+@Directive({
+    selector: '[rdxAccordionItem]',
+    standalone: true,
+    exportAs: 'rdxAccordionItem',
+    host: {
+        '[attr.data-state]': 'dataState',
+        '[attr.data-disabled]': 'disabled',
+        '[attr.data-orientation]': 'orientation'
+    },
+    providers: [
+        { provide: RdxAccordionRootToken, useValue: undefined }]
+})
+export class RdxAccordionItemDirective implements FocusableOption, OnDestroy {
+    /**
+     * @ignore
+     */
+    protected readonly accordion = inject(RdxAccordionRootToken, { skipSelf: true });
+    /**
+     * @ignore
+     */
+    protected readonly changeDetectorRef = inject(ChangeDetectorRef);
+    /**
+     * @ignore
+     */
+    protected readonly expansionDispatcher = inject(UniqueSelectionDispatcher);
+
+    /**
+     * @ignore
+     */
+    @ContentChild(RdxAccordionTriggerDirective, { descendants: true }) trigger: RdxAccordionTriggerDirective;
+
+    /**
+     * @ignore
+     */
+    @ContentChild(forwardRef(() => RdxAccordionContentDirective), { descendants: true })
+    content: RdxAccordionContentDirective;
+
+    get dataState(): RdxAccordionItemState {
+        return this.expanded ? 'open' : 'closed';
+    }
+
+    /**
+     * The unique AccordionItem id.
+     * @ignore
+     */
+    readonly id: string = `rdx-accordion-item-${nextId++}`;
+
+    get orientation(): RdxAccordionOrientation {
+        return this.accordion.orientation;
+    }
+
+    /** Whether the AccordionItem is expanded. */
+    @Input({ transform: booleanAttribute })
+    set expanded(expanded: boolean) {
+        // Only emit events and update the internal value if the value changes.
+        if (this._expanded !== expanded) {
+            this._expanded = expanded;
+            this.expandedChange.emit(expanded);
+
+            if (expanded) {
+                this.opened.emit();
+                /**
+                 * In the unique selection dispatcher, the id parameter is the id of the CdkAccordionItem,
+                 * the name value is the id of the accordion.
+                 */
+                const accordionId = this.accordion ? this.accordion.id : this.value;
+                this.expansionDispatcher.notify(this.value, accordionId);
+            } else {
+                this.closed.emit();
+            }
+
+            // Ensures that the animation will run when the value is set outside of an `@Input`.
+            // This includes cases like the open, close and toggle methods.
+            this.changeDetectorRef.markForCheck();
+        }
+    }
+
+    get expanded(): boolean {
+        return this._expanded;
+    }
+
+    private _expanded = false;
+
+    @Input()
+    set value(value: string) {
+        this._value = value;
+    }
+
+    get value(): string {
+        return this._value || this.id;
+    }
+
+    private _value?: string;
+
+    /** Whether the AccordionItem is disabled. */
+    @Input({ transform: booleanAttribute })
+    set disabled(value: boolean) {
+        this._disabled = value;
+    }
+
+    get disabled(): boolean {
+        return this.accordion.disabled ?? this._disabled;
+    }
+
+    private _disabled = false;
+
+    /** Event emitted every time the AccordionItem is closed. */
+    @Output() readonly closed: EventEmitter<void> = new EventEmitter<void>();
+    /** Event emitted every time the AccordionItem is opened. */
+    @Output() readonly opened: EventEmitter<void> = new EventEmitter<void>();
+
+    /**
+     * Event emitted when the AccordionItem is destroyed.
+     * @ignore
+     */
+    readonly destroyed: EventEmitter<void> = new EventEmitter<void>();
+
+    /**
+     * Emits whenever the expanded state of the accordion changes.
+     * Primarily used to facilitate two-way binding.
+     * @docs-private
+     */
+    @Output() readonly expandedChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+    /** Unregister function for expansionDispatcher. */
+    private removeUniqueSelectionListener: () => void;
+
+    /** Subscription to openAll/closeAll events. */
+    private openCloseAllSubscription = Subscription.EMPTY;
+
+    constructor() {
+        this.removeUniqueSelectionListener = this.expansionDispatcher.listen((id: string, accordionId: string) => {
+            if (this.accordion.isMultiple) {
+                if (this.accordion.id === accordionId && id.includes(this.value)) {
+                    this.expanded = true;
+                }
+            } else {
+                this.expanded = this.accordion.id === accordionId && id.includes(this.value);
+            }
+        });
+
+        // When an accordion item is hosted in an accordion, subscribe to open/close events.
+        if (this.accordion) {
+            this.openCloseAllSubscription = this.subscribeToOpenCloseAllActions();
+        }
+    }
+
+    /** Emits an event for the accordion item being destroyed. */
+    ngOnDestroy() {
+        this.opened.complete();
+        this.closed.complete();
+        this.destroyed.emit();
+        this.destroyed.complete();
+        this.removeUniqueSelectionListener();
+        this.openCloseAllSubscription.unsubscribe();
+    }
+
+    focus(): void {
+        this.trigger.focus();
+    }
+
+    /** Toggles the expanded state of the accordion item. */
+    toggle(): void {
+        if (!this.disabled) {
+            this.content.onToggle();
+
+            this.expanded = !this.expanded;
+        }
+    }
+
+    /** Sets the expanded state of the accordion item to false. */
+    close(): void {
+        if (!this.disabled) {
+            this.expanded = false;
+        }
+    }
+
+    /** Sets the expanded state of the accordion item to true. */
+    open(): void {
+        if (!this.disabled) {
+            this.expanded = true;
+        }
+    }
+
+    private subscribeToOpenCloseAllActions(): Subscription {
+        return this.accordion.openCloseAllActions.subscribe((expanded) => {
+            // Only change expanded state if item is enabled
+            if (!this.disabled) {
+                this.expanded = expanded;
+            }
+        });
+    }
+}