@radix-ng/primitives 0.10.0 → 0.11.0

package/fesm2022/radix-ng-primitives-accordion.mjs

@@ -1,430 +1,411 @@
-import * as i1 from '@angular/cdk/accordion';
-import { CdkAccordionItem, CdkAccordion } from '@angular/cdk/accordion';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, signal, input, effect, Directive, contentChild, Input, contentChildren } from '@angular/core';
-import { animationFrameScheduler } from 'rxjs';
+import { InjectionToken, inject, EventEmitter, booleanAttribute, Directive, Input, ContentChildren, forwardRef, Output, ElementRef, ChangeDetectorRef, ContentChild } from '@angular/core';
+import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
+import { Subject, merge, Subscription } from 'rxjs';
+import { FocusKeyManager } from '@angular/cdk/a11y';
+import { Directionality } from '@angular/cdk/bidi';
+import { ENTER, SPACE } from '@angular/cdk/keycodes';
 
-const RdxAccordionContentToken = new InjectionToken('RdxAccordionContentToken');
-class RdxAccordionContentDirective {
+const RdxAccordionRootToken = new InjectionToken('RdxAccordionRootDirective');
+let nextId$1 = 0;
+class RdxAccordionRootDirective {
     constructor() {
+        this.selectionDispatcher = inject(UniqueSelectionDispatcher);
+        this.dir = inject(Directionality, { optional: true });
+        this.id = `rdx-accordion-${nextId$1++}`;
+        this.openCloseAllActions = new Subject();
         /**
-         * @ignore
-         */
-        this.elementRef = inject(ElementRef);
-        /**
-         * @ignore
+         * The orientation of the accordion.
          */
-        this.initialized = signal(false);
-        /**
-         * Current item state
-         */
-        this.state = signal('closed');
-        /**
-         * When true, prevents the user from interacting with the accordion and all its items.
-         */
-        this.disabled = input(false);
+        this.orientation = 'vertical';
         /**
-         * @ignore
+         * Determines whether one or multiple items can be opened at the same time.
          */
-        this.accordionItem = inject(CdkAccordionItem);
+        this.type = 'single';
         /**
          * @ignore
          */
-        this.orientation = 'vertical';
-        effect(() => {
-            if (this.state()) {
-                this.setPresence();
-            }
-        });
+        this.collapsible = true;
+        this.onValueChange = new EventEmitter();
     }
-    /**
-     * @ignore
-     */
-    ngOnInit() {
-        this.togglePresence();
+    get isMultiple() {
+        return this.type === 'multiple';
     }
     /**
-     * @ignore
+     * The value of the item to expand when initially rendered and type is "single". Use when you do not need to control the state of the items.
      */
-    setOpen(state) {
-        if (this.disabled()) {
-            return;
-        }
-        if (state === undefined) {
-            this.state.update(() => (this.state() === 'open' ? 'closed' : 'open'));
-        }
-        else {
-            this.state.update(() => state);
+    set defaultValue(value) {
+        if (value !== this._defaultValue) {
+            this._defaultValue = Array.isArray(value) ? value : [value];
+            this.selectionDispatcher.notify(this.defaultValue, this.id);
         }
     }
-    /**
-     * @ignore
-     */
-    initialize() {
-        if (!this.initialized()) {
-            this.togglePresence();
-            animationFrameScheduler.schedule(() => {
-                this.elementRef.nativeElement.getAnimations().forEach((animation) => animation.cancel());
-                this.initialized.set(true);
-            });
-        }
+    get defaultValue() {
+        return this._defaultValue ?? this.defaultValue;
     }
     /**
-     * @ignore
+     * The controlled value of the item to expand
      */
-    setPresence() {
-        if (!this.initialized()) {
-            this.initialize();
-            return;
+    set value(value) {
+        if (value !== this._value) {
+            this._value = Array.isArray(value) ? value : [value];
+            this.selectionDispatcher.notify(this.value, this.id);
         }
-        animationFrameScheduler.schedule(() => {
-            const animations = this.elementRef.nativeElement.getAnimations();
-            const hidden = this.elementRef.nativeElement.hasAttribute('hidden');
-            if (hidden) {
-                this.show();
-                const rect = this.elementRef.nativeElement.getBoundingClientRect();
-                const height = `${this.elementRef.nativeElement.scrollHeight /*rect.height*/}px`;
-                const width = `${rect.width}px`;
-                this.elementRef.nativeElement.style.setProperty('--radix-accordion-content-height', height);
-                this.elementRef.nativeElement.style.setProperty('--radix-accordion-content-width', width);
-                this.hide();
-            }
-            Promise.all(animations.map((animation) => animation.finished)).then(() => {
-                this.togglePresence();
-            });
-        });
+    }
+    get value() {
+        return this._value ?? this.defaultValue;
     }
     /**
      * @ignore
      */
-    togglePresence() {
-        if (this.state() === 'open') {
-            this.show();
+    ngAfterContentInit() {
+        this.selectionDispatcher.notify(this.value, this.id);
+        this.keyManager = new FocusKeyManager(this.items).withHomeAndEnd();
+        if (this.orientation === 'horizontal') {
+            this.keyManager.withHorizontalOrientation(this.dir?.value || 'ltr');
         }
         else {
-            this.hide();
+            this.keyManager.withVerticalOrientation();
         }
+        this.onValueChangeSubscription = merge(...this.items.map((item) => item.expandedChange)).subscribe(() => this.onValueChange.emit());
     }
     /**
      * @ignore
      */
-    show() {
-        this.elementRef.nativeElement.removeAttribute('hidden');
+    ngOnDestroy() {
+        this.openCloseAllActions.complete();
+        this.onValueChangeSubscription.unsubscribe();
     }
     /**
      * @ignore
      */
-    hide() {
-        this.elementRef.nativeElement.setAttribute('hidden', '');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: RdxAccordionContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.1.2", type: RdxAccordionContentDirective, isStandalone: true, selector: "[rdxAccordionContent]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-state": "state()", "attr.data-disabled": "disabled() ? \"\" : undefined", "attr.data-orientation": "orientation" } }, providers: [{ provide: RdxAccordionContentToken, useExisting: RdxAccordionContentDirective }], exportAs: ["rdxAccordionContent"], hostDirectives: [{ directive: i1.CdkAccordionItem }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: RdxAccordionContentDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rdxAccordionContent]',
-                    standalone: true,
-                    exportAs: 'rdxAccordionContent',
-                    providers: [{ provide: RdxAccordionContentToken, useExisting: RdxAccordionContentDirective }],
-                    host: {
-                        '[attr.data-state]': 'state()',
-                        '[attr.data-disabled]': 'disabled() ? "" : undefined',
-                        '[attr.data-orientation]': 'orientation'
-                    },
-                    hostDirectives: [CdkAccordionItem]
-                }]
-        }], ctorParameters: () => [] });
-
-const RdxAccordionItemToken = new InjectionToken('RdxAccordionItemToken');
-function injectAccordionItem() {
-    return inject(RdxAccordionItemDirective);
-}
-class RdxAccordionItemDirective {
-    constructor() {
-        /**
-         * @ignore
-         */
-        this.accordionContent = contentChild.required(RdxAccordionContentToken);
-        /**
-         * Current item state
-         */
-        this.state = signal('closed');
-        /**
-         * When true, prevents the user from interacting with the item.
-         */
-        this.disabled = input(false);
-        /**
-         * @ignore
-         */
-        this.orientation = 'vertical';
-    }
-    /**
-     * Changes current item state
-     */
-    setOpen(state) {
-        if (this.disabled()) {
-            return;
+    handleKeydown(event) {
+        if (!this.keyManager.activeItem) {
+            this.keyManager.setFirstItemActive();
         }
-        if (state === undefined) {
-            this.state.update(() => (this.state() === 'open' ? 'closed' : 'open'));
+        const activeItem = this.keyManager.activeItem;
+        if ((event.keyCode === ENTER || event.keyCode === SPACE) &&
+            !this.keyManager.isTyping() &&
+            activeItem &&
+            !activeItem.disabled) {
+            event.preventDefault();
+            activeItem.toggle();
         }
         else {
-            this.state.update(() => state);
+            this.keyManager.onKeydown(event);
         }
-        this.accordionContent().setOpen(this.state());
+    }
+    /** Opens all enabled accordion items in an accordion where multi is enabled.
+     * @ignore
+     */
+    openAll() {
+        if (this.isMultiple) {
+            this.openCloseAllActions.next(true);
+        }
+    }
+    /** Closes all enabled accordion items.
+     * @ignore
+     */
+    closeAll() {
+        this.openCloseAllActions.next(false);
     }
     /**
      * @ignore
      */
-    setOrientation(orientation) {
-        this.orientation = orientation;
-        this.accordionContent().orientation = orientation;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: RdxAccordionItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.1.2", type: RdxAccordionItemDirective, isStandalone: true, selector: "[rdxAccordionItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-state": "state()", "attr.data-disabled": "disabled() ? \"\" : undefined", "attr.data-orientation": "orientation" } }, providers: [
-            {
-                provide: RdxAccordionItemToken,
-                useExisting: RdxAccordionItemDirective,
-                multi: true
-            }
-        ], queries: [{ propertyName: "accordionContent", first: true, predicate: RdxAccordionContentToken, descendants: true, isSignal: true }], exportAs: ["rdxAccordionItem"], hostDirectives: [{ directive: i1.CdkAccordion }], ngImport: i0 }); }
+    setActiveItem(item) {
+        this.keyManager.setActiveItem(item);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxAccordionRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.1", type: RdxAccordionRootDirective, isStandalone: true, selector: "[rdxAccordionRoot]", inputs: { disabled: ["disabled", "disabled", booleanAttribute], orientation: "orientation", defaultValue: "defaultValue", type: "type", collapsible: "collapsible", value: "value" }, outputs: { onValueChange: "onValueChange" }, host: { listeners: { "keydown": "handleKeydown($event)" }, properties: { "attr.data-orientation": "orientation" } }, providers: [
+            { provide: RdxAccordionRootToken, useExisting: RdxAccordionRootDirective },
+            { provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }
+        ], queries: [{ propertyName: "items", predicate: i0.forwardRef(() => RdxAccordionItemDirective), descendants: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: RdxAccordionItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxAccordionRootDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxAccordionItem]',
+                    selector: '[rdxAccordionRoot]',
                     standalone: true,
-                    exportAs: 'rdxAccordionItem',
                     providers: [
-                        {
-                            provide: RdxAccordionItemToken,
-                            useExisting: RdxAccordionItemDirective,
-                            multi: true
-                        }
+                        { provide: RdxAccordionRootToken, useExisting: RdxAccordionRootDirective },
+                        { provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }
                     ],
                     host: {
-                        '[attr.data-state]': 'state()',
-                        '[attr.data-disabled]': 'disabled() ? "" : undefined',
-                        '[attr.data-orientation]': 'orientation'
-                    },
-                    hostDirectives: [CdkAccordion]
+                        '[attr.data-orientation]': 'orientation',
+                        '(keydown)': 'handleKeydown($event)'
+                    }
                 }]
-        }], propDecorators: { value: [{
+        }], propDecorators: { disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], orientation: [{
                 type: Input
+            }], items: [{
+                type: ContentChildren,
+                args: [forwardRef(() => RdxAccordionItemDirective), { descendants: true }]
+            }], defaultValue: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], collapsible: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], onValueChange: [{
+                type: Output
             }] } });
 
-class RdxAccordionHeaderDirective {
+class RdxAccordionTriggerDirective {
     constructor() {
-        /**
-         * @ignore
-         */
-        this.accordionItem = injectAccordionItem();
-    }
-    /**
-     * @ignore
-     */
-    getState() {
-        return this.accordionItem.state();
+        this.nativeElement = inject(ElementRef).nativeElement;
+        this.accordionRoot = inject(RdxAccordionRootDirective);
+        this.item = inject(RdxAccordionItemDirective);
     }
     /**
-     * @ignore
+     * Fires when trigger clicked
      */
-    getDisabled() {
-        return this.accordionItem.disabled() ? '' : undefined;
+    onClick() {
+        if (!this.accordionRoot.collapsible && this.item.expanded)
+            return;
+        this.item.toggle();
+        this.accordionRoot.setActiveItem(this.item);
     }
-    /**
-     * @ignore
-     */
-    getOrientation() {
-        return this.accordionItem.orientation;
+    focus() {
+        this.nativeElement.focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: RdxAccordionHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: RdxAccordionHeaderDirective, isStandalone: true, selector: "[rdxAccordionHeader]", host: { properties: { "attr.data-state": "getState()", "attr.data-disabled": "getDisabled()", "attr.data-orientation": "getOrientation()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxAccordionTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: RdxAccordionTriggerDirective, isStandalone: true, selector: "[rdxAccordionTrigger]", host: { listeners: { "click": "onClick()" }, properties: { "attr.role": "\"button\"", "attr.aria-expanded": "item.expanded", "attr.data-state": "item.dataState", "attr.data-disabled": "item.disabled", "attr.disabled": "item.disabled ? \"\" : null", "attr.data-orientation": "item.orientation" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: RdxAccordionHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxAccordionTriggerDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxAccordionHeader]',
+                    selector: '[rdxAccordionTrigger]',
                     standalone: true,
                     host: {
-                        '[attr.data-state]': 'getState()',
-                        '[attr.data-disabled]': 'getDisabled()',
-                        '[attr.data-orientation]': 'getOrientation()'
+                        '[attr.role]': '"button"',
+                        '[attr.aria-expanded]': 'item.expanded',
+                        '[attr.data-state]': 'item.dataState',
+                        '[attr.data-disabled]': 'item.disabled',
+                        '[attr.disabled]': 'item.disabled ? "" : null',
+                        '[attr.data-orientation]': 'item.orientation',
+                        '(click)': 'onClick()'
                     }
                 }]
         }] });
 
-const RdxAccordionRootToken = new InjectionToken('RdxAccordionRootDirective');
-function injectAccordionRoot() {
-    return inject(RdxAccordionRootDirective);
-}
-class RdxAccordionRootDirective {
+let nextId = 0;
+class RdxAccordionItemDirective {
+    get dataState() {
+        return this.expanded ? 'open' : 'closed';
+    }
+    get orientation() {
+        return this.accordion.orientation;
+    }
+    /** Whether the AccordionItem is expanded. */
+    set expanded(expanded) {
+        // 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() {
+        return this._expanded;
+    }
+    set value(value) {
+        this._value = value;
+    }
+    get value() {
+        return this._value || this.id;
+    }
+    /** Whether the AccordionItem is disabled. */
+    set disabled(value) {
+        this._disabled = value;
+    }
+    get disabled() {
+        return this.accordion.disabled ?? this._disabled;
+    }
     constructor() {
+        this.accordion = inject(RdxAccordionRootToken, { skipSelf: true });
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.expansionDispatcher = inject(UniqueSelectionDispatcher);
         /**
-         * @private
+         * The unique AccordionItem id.
          * @ignore
          */
-        this.accordionItems = contentChildren(RdxAccordionItemToken);
+        this.id = `rdx-accordion-item-${nextId++}`;
+        this._expanded = false;
+        this._disabled = false;
+        /** Event emitted every time the AccordionItem is closed. */
+        this.closed = new EventEmitter();
+        /** Event emitted every time the AccordionItem is opened. */
+        this.opened = new EventEmitter();
+        /** Event emitted when the AccordionItem is destroyed. */
+        this.destroyed = new EventEmitter();
         /**
-         * @private
-         * @ignore
+         * Emits whenever the expanded state of the accordion changes.
+         * Primarily used to facilitate two-way binding.
+         * @docs-private
          */
-        this._orientation = 'vertical';
-        /**
-         * @private
-         * @ignore
-         */
-        this._value = [];
-        /**
-         * The value of the item to expand when initially rendered and type is "single". Use when you do not need to control the state of the items.
-         */
-        this.defaultValue = [];
-        /**
-         * Determines whether one or multiple items can be opened at the same time.
-         */
-        this.type = 'single';
-        /**
-         * @ignore
-         */
-        this.collapsible = true;
-    }
-    /**
-     * The controlled value of the item to expand
-     */
-    set value(value) {
-        if (value !== undefined) {
-            this._value = Array.isArray(value) ? value : [value];
-        }
-        else {
-            this._value = [];
+        this.expandedChange = new EventEmitter();
+        /** Subscription to openAll/closeAll events. */
+        this.openCloseAllSubscription = Subscription.EMPTY;
+        this.removeUniqueSelectionListener = this.expansionDispatcher.listen((id, accordionId) => {
+            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();
         }
-        this.onValueChange(this._value);
     }
-    /**
-     * The orientation of the accordion.
-     */
-    set orientation(orientation) {
-        this._orientation = orientation ?? 'vertical';
-        this.accordionItems().forEach((accordionItem) => accordionItem.setOrientation(this._orientation));
+    /** 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();
     }
-    /**
-     * @ignore
-     */
-    ngOnInit() {
-        if (this.defaultValue) {
-            this.value = this.defaultValue;
+    focus() {
+        this.trigger.focus();
+    }
+    /** Toggles the expanded state of the accordion item. */
+    toggle() {
+        if (!this.disabled) {
+            this.expanded = !this.expanded;
         }
     }
-    /**
-     * @ignore
-     */
-    onValueChange(value) {
-        if (this.type === 'single') {
-            const currentValue = value.length > 0 ? value[0] : undefined;
-            this.accordionItems().forEach((accordionItem) => {
-                if (accordionItem.value === currentValue) {
-                    accordionItem.setOpen();
-                }
-                else {
-                    accordionItem.setOpen('closed');
-                }
-            });
+    /** Sets the expanded state of the accordion item to false. */
+    close() {
+        if (!this.disabled) {
+            this.expanded = false;
         }
-        else {
-            value.forEach((valueItem) => {
-                this.accordionItems().forEach((accordionItem) => {
-                    if (accordionItem.value === valueItem) {
-                        accordionItem.setOpen();
-                    }
-                });
-            });
+    }
+    /** Sets the expanded state of the accordion item to true. */
+    open() {
+        if (!this.disabled) {
+            this.expanded = true;
         }
     }
-    /**
-     * @ignore
-     */
-    getOrientation() {
-        return this._orientation;
+    subscribeToOpenCloseAllActions() {
+        return this.accordion.openCloseAllActions.subscribe((expanded) => {
+            // Only change expanded state if item is enabled
+            if (!this.disabled) {
+                this.expanded = expanded;
+            }
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: RdxAccordionRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.1.2", type: RdxAccordionRootDirective, isStandalone: true, selector: "[rdxAccordionRoot]", inputs: { defaultValue: "defaultValue", type: "type", collapsible: "collapsible", value: "value", orientation: "orientation" }, host: { properties: { "attr.data-orientation": "getOrientation()" } }, providers: [{ provide: RdxAccordionRootToken, useExisting: RdxAccordionRootDirective }], queries: [{ propertyName: "accordionItems", predicate: RdxAccordionItemToken, isSignal: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxAccordionItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.1", type: RdxAccordionItemDirective, isStandalone: true, selector: "[rdxAccordionItem]", inputs: { expanded: ["expanded", "expanded", booleanAttribute], value: "value", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { closed: "closed", opened: "opened", expandedChange: "expandedChange" }, host: { properties: { "attr.data-state": "dataState", "attr.data-disabled": "disabled", "attr.data-orientation": "orientation" } }, providers: [
+            { provide: RdxAccordionRootToken, useValue: undefined }
+        ], queries: [{ propertyName: "trigger", first: true, predicate: RdxAccordionTriggerDirective, descendants: true }], exportAs: ["rdxAccordionItem"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: RdxAccordionRootDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxAccordionItemDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxAccordionRoot]',
+                    selector: '[rdxAccordionItem]',
                     standalone: true,
-                    providers: [{ provide: RdxAccordionRootToken, useExisting: RdxAccordionRootDirective }],
+                    exportAs: 'rdxAccordionItem',
                     host: {
-                        '[attr.data-orientation]': 'getOrientation()'
-                    }
+                        '[attr.data-state]': 'dataState',
+                        '[attr.data-disabled]': 'disabled',
+                        '[attr.data-orientation]': 'orientation'
+                    },
+                    providers: [
+                        { provide: RdxAccordionRootToken, useValue: undefined }
+                    ]
                 }]
-        }], propDecorators: { defaultValue: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], collapsible: [{
-                type: Input
+        }], ctorParameters: () => [], propDecorators: { trigger: [{
+                type: ContentChild,
+                args: [RdxAccordionTriggerDirective, { descendants: true }]
+            }], expanded: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], value: [{
                 type: Input
-            }], orientation: [{
-                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], closed: [{
+                type: Output
+            }], opened: [{
+                type: Output
+            }], expandedChange: [{
+                type: Output
             }] } });
 
-class RdxAccordionTriggerDirective {
+const RdxAccordionContentToken = new InjectionToken('RdxAccordionContentToken');
+class RdxAccordionContentDirective {
     constructor() {
-        /**
-         * @ignore
-         */
-        this.accordionRoot = injectAccordionRoot();
-        /**
-         * @ignore
-         */
-        this.accordionItem = injectAccordionItem();
+        this.item = inject(RdxAccordionItemDirective);
     }
-    /**
-     * Fires when trigger clicked
-     */
-    onClick() {
-        if (!this.accordionRoot.collapsible) {
-            return;
-        }
-        if (this.accordionItem.value) {
-            this.accordionRoot.value = [this.accordionItem.value];
+    get style() {
+        if (this.item.orientation === 'horizontal') {
+            return { width: this.item.expanded ? 'var(--rdx-accordion-content-width)' : 0 };
         }
+        return { height: this.item.expanded ? 'var(--rdx-accordion-content-height)' : 0 };
     }
-    /**
-     * @ignore
-     */
-    getState() {
-        return this.accordionItem.state();
-    }
-    /**
-     * @ignore
-     */
-    getDisabled() {
-        return this.accordionItem.disabled() || undefined;
-    }
-    /**
-     * @ignore
-     */
-    getOrientation() {
-        return this.accordionRoot.getOrientation();
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxAccordionContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: RdxAccordionContentDirective, isStandalone: true, selector: "[rdxAccordionContent]", host: { properties: { "attr.role": "\"region\"", "style": "style", "attr.data-state": "item.dataState", "attr.data-disabled": "item.disabled", "attr.data-orientation": "item.orientation" } }, exportAs: ["rdxAccordionContent"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxAccordionContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxAccordionContent]',
+                    standalone: true,
+                    exportAs: 'rdxAccordionContent',
+                    host: {
+                        '[attr.role]': '"region"',
+                        // todo need hide content after animation
+                        // '[style.display]': 'item.expanded ? "" : "none"',
+                        // '[attr.hidden]': 'hidden ? "" : null',
+                        '[style]': 'style',
+                        '[attr.data-state]': 'item.dataState',
+                        '[attr.data-disabled]': 'item.disabled',
+                        '[attr.data-orientation]': 'item.orientation'
+                    }
+                }]
+        }] });
+
+class RdxAccordionHeaderDirective {
+    constructor() {
+        this.item = inject(RdxAccordionItemDirective);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: RdxAccordionTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: RdxAccordionTriggerDirective, isStandalone: true, selector: "[rdxAccordionTrigger]", host: { listeners: { "click": "onClick()" }, properties: { "attr.data-state": "getState()", "attr.data-disabled": "getDisabled()", "attr.data-orientation": "getOrientation()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxAccordionHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: RdxAccordionHeaderDirective, isStandalone: true, selector: "[rdxAccordionHeader]", host: { properties: { "attr.data-state": "item.dataState", "attr.data-disabled": "item.disabled", "attr.data-orientation": "item.orientation" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: RdxAccordionTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxAccordionHeaderDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxAccordionTrigger]',
+                    selector: '[rdxAccordionHeader]',
                     standalone: true,
                     host: {
-                        '(click)': 'onClick()',
-                        '[attr.data-state]': 'getState()',
-                        '[attr.data-disabled]': 'getDisabled()',
-                        '[attr.data-orientation]': 'getOrientation()'
+                        '[attr.data-state]': 'item.dataState',
+                        '[attr.data-disabled]': 'item.disabled',
+                        '[attr.data-orientation]': 'item.orientation'
                     }
                 }]
         }] });
@@ -433,5 +414,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { RdxAccordionContentDirective, RdxAccordionContentToken, RdxAccordionHeaderDirective, RdxAccordionItemDirective, RdxAccordionItemToken, RdxAccordionRootDirective, RdxAccordionRootToken, RdxAccordionTriggerDirective, injectAccordionItem, injectAccordionRoot };
+export { RdxAccordionContentDirective, RdxAccordionContentToken, RdxAccordionHeaderDirective, RdxAccordionItemDirective, RdxAccordionRootDirective, RdxAccordionRootToken, RdxAccordionTriggerDirective };
 //# sourceMappingURL=radix-ng-primitives-accordion.mjs.map