ng-primitives 0.89.0 → 0.91.0

package/fesm2022/ng-primitives-accordion.mjs

@@ -1,125 +1,187 @@
 import * as i0 from '@angular/core';
-import { input, computed, afterRenderEffect, Directive, booleanAttribute, signal, inject, HOST_TAG_NAME, HostListener, InjectionToken, output } from '@angular/core';
+import { signal, computed, afterRenderEffect, input, Directive, booleanAttribute, inject, HOST_TAG_NAME, InjectionToken, output } from '@angular/core';
+import { safeTakeUntilDestroyed, uniqueId } from 'ng-primitives/utils';
 import { injectElementRef, injectDimensions, fromMutationObserver } from 'ng-primitives/internal';
-import { uniqueId, safeTakeUntilDestroyed } from 'ng-primitives/utils';
+import { createPrimitive, controlled, attrBinding, deprecatedSetter, dataBinding, listener } from 'ng-primitives/state';
 import { debounceTime } from 'rxjs/operators';
-import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
 
-/**
- * The state token  for the AccordionItem primitive.
- */
-const NgpAccordionItemStateToken = createStateToken('AccordionItem');
-/**
- * Provides the AccordionItem state.
- */
-const provideAccordionItemState = createStateProvider(NgpAccordionItemStateToken);
-/**
- * Injects the AccordionItem state.
- */
-const injectAccordionItemState = createStateInjector(NgpAccordionItemStateToken);
-/**
- * The AccordionItem state registration function.
- */
-const accordionItemState = createState(NgpAccordionItemStateToken);
-
-/**
- * The state token  for the Accordion primitive.
- */
-const NgpAccordionStateToken = createStateToken('Accordion');
-/**
- * Provides the Accordion state.
- */
-const provideAccordionState = createStateProvider(NgpAccordionStateToken);
-/**
- * Injects the Accordion state.
- */
-const injectAccordionState = createStateInjector(NgpAccordionStateToken);
-/**
- * The Accordion state registration function.
- */
-const accordionState = createState(NgpAccordionStateToken);
+const [NgpAccordionStateToken, ngpAccordion, _injectAccordionState, provideAccordionState] = createPrimitive('NgpAccordion', ({ type, collapsible, value: _value = signal(null), disabled: _disabled = signal(false), orientation: _orientation = signal('vertical'), onValueChange, }) => {
+    const element = injectElementRef();
+    // Create controlled signals
+    const value = controlled(_value);
+    const disabled = controlled(_disabled);
+    const orientation = controlled(_orientation);
+    // Host bindings extracted from directive
+    attrBinding(element, 'data-orientation', orientation);
+    attrBinding(element, 'data-disabled', disabled);
+    // Setter methods
+    function setDisabled(value) {
+        disabled.set(value);
+    }
+    function setOrientation(value) {
+        orientation.set(value);
+    }
+    function setValue(newValue) {
+        value.set(newValue);
+    }
+    // Methods extracted from directive
+    /**
+     * @param value The value to check. @returns Whether the value is open. @internal
+     */
+    function isOpen(itemValue) {
+        if (type() === 'multiple') {
+            return value()?.includes(itemValue) ?? false;
+        }
+        return value() === itemValue;
+    }
+    function toggle(itemValue) {
+        const open = isOpen(itemValue);
+        // if we are in single mode and the itemValue is already open and the accordion is not collapsible, do nothing
+        if (type() === 'single' && open && !collapsible()) {
+            return;
+        }
+        // if we are in single mode then toggle the itemValue
+        if (type() === 'single') {
+            const newValue = open ? null : itemValue;
+            value.set(newValue);
+            onValueChange?.(newValue);
+            return;
+        }
+        // if we are in multiple mode then toggle the itemValue
+        let values = value() ?? [];
+        if (open) {
+            values = values.filter(v => v !== itemValue);
+        }
+        else {
+            values = [...values, itemValue];
+        }
+        value.set(values);
+        onValueChange?.(values);
+    }
+    return {
+        value: deprecatedSetter(value, 'setValue'),
+        disabled: deprecatedSetter(disabled, 'setDisabled'),
+        orientation: deprecatedSetter(orientation, 'setOrientation'),
+        setDisabled,
+        setOrientation,
+        setValue,
+        isOpen,
+        toggle,
+    };
+});
+function injectAccordionState() {
+    return _injectAccordionState();
+}
 
-/**
- * Apply the `ngpAccordionContent` directive to an element that represents the content of an accordion item.
- */
-class NgpAccordionContent {
-    constructor() {
-        /**
-         * Access the accordion content element reference
-         */
-        this.elementRef = injectElementRef();
-        /**
-         * Access the accordion
-         */
-        this.accordion = injectAccordionState();
-        /**
-         * Access the accordion item
-         */
-        this.accordionItem = injectAccordionItemState();
-        /**
-         * The id of the content region
-         */
-        this.id = input(uniqueId('ngp-accordion-content'));
-        /**
-         * The dimensions of the content
-         */
-        this.dimensions = injectDimensions();
-        /**
-         * The hidden until-found state of the content
-         */
-        this.hidden = computed(() => !this.accordionItem().open() && this.dimensions().height === 0 ? 'until-found' : null);
-        this.accordionItem().content.set(this);
-        // any time the open state of the accordion item changes, update the dimensions
-        afterRenderEffect(() => this.updateDimensions());
-        // update dimensions when the content changes
-        fromMutationObserver(this.elementRef.nativeElement, {
-            childList: true,
-            subtree: true,
-            disabled: computed(() => !this.accordionItem().open()),
-        })
-            .pipe(debounceTime(0), safeTakeUntilDestroyed())
-            .subscribe(() => this.updateDimensions());
+const [NgpAccordionItemStateToken, ngpAccordionItem, _injectAccordionItemState, provideAccordionItemState,] = createPrimitive('NgpAccordionItem', ({ value, disabled: _disabled = signal(false) }) => {
+    const accordion = injectAccordionState();
+    const element = injectElementRef();
+    const disabled = controlled(_disabled);
+    // Whether the accordion item is expanded.
+    const open = computed(() => accordion().isOpen(value()), ...(ngDevMode ? [{ debugName: "open" }] : []));
+    const trigger = signal(undefined, ...(ngDevMode ? [{ debugName: "trigger" }] : []));
+    const content = signal(undefined, ...(ngDevMode ? [{ debugName: "content" }] : []));
+    // Setup host data bindings
+    dataBinding(element, 'data-orientation', accordion().orientation);
+    dataBinding(element, 'data-open', open);
+    dataBinding(element, 'data-disabled', () => disabled() || accordion().disabled());
+    // Set the disabled state of the accordion item.
+    function setDisabled(value) {
+        disabled.set(value);
+    }
+    function setTrigger(id) {
+        trigger.set(id);
+    }
+    function setContent(id) {
+        content.set(id);
     }
+    return {
+        value,
+        open,
+        disabled: deprecatedSetter(disabled, 'setDisabled'),
+        triggerId: deprecatedSetter(trigger, 'setTrigger'),
+        contentId: deprecatedSetter(content, 'setContent'),
+        setDisabled,
+        setTrigger,
+        setContent,
+    };
+});
+function injectAccordionItemState() {
+    return _injectAccordionItemState();
+}
+
+const [NgpAccordionContentStateToken, ngpAccordionContent, injectAccordionContentState, provideAccordionContentState,] = createPrimitive('NgpAccordionContent', ({ id = signal(uniqueId('ngp-accordion-content')) }) => {
+    const element = injectElementRef();
+    const accordion = injectAccordionState();
+    const accordionItem = injectAccordionItemState();
+    const dimensions = injectDimensions();
+    const hidden = computed(() => !accordionItem().open() && dimensions().height === 0 ? 'until-found' : null, ...(ngDevMode ? [{ debugName: "hidden" }] : []));
+    // Host bindings
+    attrBinding(element, 'role', 'region');
+    attrBinding(element, 'id', id);
+    attrBinding(element, 'aria-labelledby', accordionItem().triggerId);
+    attrBinding(element, 'hidden', hidden);
+    dataBinding(element, 'data-orientation', accordion().orientation);
+    dataBinding(element, 'data-open', accordionItem().open);
+    dataBinding(element, 'data-closed', () => !accordionItem().open());
+    listener(element, 'beforematch', onBeforeMatch);
+    // Register the content with the accordion item state
+    accordionItem().setContent(id());
     /**
      * Handle the beforematch event to automatically open the accordion item
      * when the browser's find-in-page functionality tries to reveal hidden content.
      */
-    onBeforeMatch() {
-        const isDisabled = this.accordion().disabled() || this.accordionItem().disabled();
-        if (isDisabled)
+    function onBeforeMatch() {
+        const isDisabled = accordion().disabled() || accordionItem().disabled();
+        if (isDisabled) {
             return;
-        this.accordion().toggle(this.accordionItem().value());
+        }
+        accordion().toggle(accordionItem().value());
     }
-    updateDimensions() {
-        if (this.accordionItem().open()) {
+    function updateDimensions() {
+        if (accordionItem().open()) {
             // remove the inline styles to reset them
-            this.elementRef.nativeElement.style.removeProperty('--ngp-accordion-content-width');
-            this.elementRef.nativeElement.style.removeProperty('--ngp-accordion-content-height');
+            element.nativeElement.style.removeProperty('--ngp-accordion-content-width');
+            element.nativeElement.style.removeProperty('--ngp-accordion-content-height');
             // set the dimensions based on the content
-            this.elementRef.nativeElement.style.setProperty('--ngp-accordion-content-width', `${this.elementRef.nativeElement.scrollWidth}px`);
-            this.elementRef.nativeElement.style.setProperty('--ngp-accordion-content-height', `${this.elementRef.nativeElement.scrollHeight}px`);
+            element.nativeElement.style.setProperty('--ngp-accordion-content-width', `${element.nativeElement.scrollWidth}px`);
+            element.nativeElement.style.setProperty('--ngp-accordion-content-height', `${element.nativeElement.scrollHeight}px`);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpAccordionContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpAccordionContent, isStandalone: true, selector: "[ngpAccordionContent]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "region" }, listeners: { "beforematch": "onBeforeMatch()" }, properties: { "id": "id()", "attr.data-orientation": "accordion().orientation()", "attr.data-open": "accordionItem().open() ? \"\" : null", "attr.data-closed": "accordionItem().open() ? null : \"\"", "attr.aria-labelledby": "accordionItem().triggerId()", "attr.hidden": "hidden()" } }, exportAs: ["ngpAccordionContent"], ngImport: i0 }); }
+    // any time the open state of the accordion item changes, update the dimensions
+    afterRenderEffect(() => updateDimensions());
+    // update dimensions when the content changes
+    fromMutationObserver(element.nativeElement, {
+        childList: true,
+        subtree: true,
+        disabled: computed(() => !accordionItem().open()),
+    })
+        .pipe(debounceTime(0), safeTakeUntilDestroyed())
+        .subscribe(() => updateDimensions());
+    return {};
+});
+
+/**
+ * Apply the `ngpAccordionContent` directive to an element that represents the content of an accordion item.
+ */
+class NgpAccordionContent {
+    constructor() {
+        /**
+         * The id of the content region
+         */
+        this.id = input(uniqueId('ngp-accordion-content'), ...(ngDevMode ? [{ debugName: "id" }] : []));
+        ngpAccordionContent({ id: this.id });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpAccordionContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpAccordionContent, isStandalone: true, selector: "[ngpAccordionContent]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["ngpAccordionContent"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpAccordionContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpAccordionContent, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpAccordionContent]',
                     exportAs: 'ngpAccordionContent',
-                    host: {
-                        role: 'region',
-                        '[id]': 'id()',
-                        '[attr.data-orientation]': 'accordion().orientation()',
-                        '[attr.data-open]': 'accordionItem().open() ? "" : null',
-                        '[attr.data-closed]': 'accordionItem().open() ? null : ""',
-                        '[attr.aria-labelledby]': 'accordionItem().triggerId()',
-                        '(beforematch)': 'onBeforeMatch()',
-                        '[attr.hidden]': 'hidden()',
-                    },
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
 /**
  * Apply the `ngpAccordionItem` directive to an element that represents an accordion item.
@@ -133,114 +195,95 @@ class NgpAccordionItem {
         /**
          * The value of the accordion item.
          */
-        this.value = input(uniqueId('ngp-accordion-item'), {
-            alias: 'ngpAccordionItemValue',
-        });
+        this.value = input(uniqueId('ngp-accordion-item'), ...(ngDevMode ? [{ debugName: "value", alias: 'ngpAccordionItemValue' }] : [{
+                alias: 'ngpAccordionItemValue',
+            }]));
         /**
          * Whether the accordion item is disabled.
          */
-        this.disabled = input(false, {
-            alias: 'ngpAccordionItemDisabled',
-            transform: booleanAttribute,
-        });
-        /**
-         * Access the accordion trigger
-         * @internal
-         */
-        this.trigger = signal(undefined);
-        /**
-         * Access the accordion content
-         * @internal
-         */
-        this.content = signal(undefined);
-        /**
-         * Whether the accordion item is expanded.
-         */
-        this.open = computed(() => this.accordion().isOpen(this.state.value()));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpAccordionItemDisabled',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpAccordionItemDisabled',
+                transform: booleanAttribute,
+            }]));
         /**
-         * The trigger id.
-         */
-        this.triggerId = computed(() => this.trigger()?.id());
-        /**
-         * The content id.
+         * The accordion item state.
          */
-        this.contentId = computed(() => this.content()?.id());
+        this.state = ngpAccordionItem({
+            value: this.value,
+            disabled: this.disabled,
+        });
         /**
-         * The accordion item state.
+         * The open state of the accordion item.
          */
-        this.state = accordionItemState(this);
+        this.open = this.state.open;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpAccordionItem, isStandalone: true, selector: "[ngpAccordionItem]", inputs: { value: { classPropertyName: "value", publicName: "ngpAccordionItemValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpAccordionItemDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-orientation": "accordion().orientation()", "attr.data-open": "state.open() ? \"\" : null", "attr.data-disabled": "state.disabled() || accordion().disabled() ? \"\" : null" } }, providers: [provideAccordionItemState()], exportAs: ["ngpAccordionItem"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpAccordionItem, isStandalone: true, selector: "[ngpAccordionItem]", inputs: { value: { classPropertyName: "value", publicName: "ngpAccordionItemValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpAccordionItemDisabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideAccordionItemState()], exportAs: ["ngpAccordionItem"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpAccordionItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpAccordionItem, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpAccordionItem]',
                     exportAs: 'ngpAccordionItem',
                     providers: [provideAccordionItemState()],
-                    host: {
-                        '[attr.data-orientation]': 'accordion().orientation()',
-                        '[attr.data-open]': 'state.open() ? "" : null',
-                        '[attr.data-disabled]': 'state.disabled() || accordion().disabled() ? "" : null',
-                    },
                 }]
-        }] });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpAccordionItemValue", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpAccordionItemDisabled", required: false }] }] } });
+
+const [NgpAccordionTriggerStateToken, ngpAccordionTrigger, injectAccordionTriggerState, provideAccordionTriggerState,] = createPrimitive('NgpAccordionTrigger', ({ id = signal(uniqueId('ngp-accordion-trigger')) }) => {
+    const element = injectElementRef();
+    const tagName = inject(HOST_TAG_NAME);
+    const accordion = injectAccordionState();
+    const accordionItem = injectAccordionItemState();
+    // Host bindings
+    attrBinding(element, 'id', id);
+    attrBinding(element, 'type', tagName === 'button' ? 'button' : null);
+    attrBinding(element, 'aria-controls', accordionItem().contentId);
+    attrBinding(element, 'aria-expanded', accordionItem().open);
+    dataBinding(element, 'data-orientation', accordion().orientation);
+    dataBinding(element, 'data-open', accordionItem().open);
+    dataBinding(element, 'data-disabled', () => accordionItem().disabled() || accordion().disabled());
+    // register the trigger with the accordion item
+    accordionItem().setTrigger(id());
+    // Methods
+    function toggle() {
+        if (accordionItem().disabled() || accordion().disabled()) {
+            return;
+        }
+        accordion().toggle(accordionItem().value());
+    }
+    // Event listeners
+    listener(element, 'click', toggle);
+    return { id, toggle };
+});
 
 /**
  * Apply the `ngpAccordionTrigger` directive to an element that represents the trigger for an accordion item, such as a button.
  */
 class NgpAccordionTrigger {
     constructor() {
-        /**
-         * The tag name of the element.
-         */
-        this.tagName = inject(HOST_TAG_NAME);
-        /**
-         * Access the parent accordion.
-         */
-        this.accordion = injectAccordionState();
-        /**
-         * The item instance.
-         */
-        this.accordionItem = injectAccordionItemState();
         /**
          * The id of the trigger.
          */
-        this.id = input(uniqueId('ngp-accordion-trigger'));
-        this.accordionItem().trigger.set(this);
+        this.id = input(uniqueId('ngp-accordion-trigger'), ...(ngDevMode ? [{ debugName: "id" }] : []));
+        this.state = ngpAccordionTrigger({ id: this.id });
     }
     /**
      * Toggle the accordion item.
      */
     toggle() {
-        if (this.accordionItem().disabled() || this.accordion().disabled()) {
-            return;
-        }
-        this.accordion().toggle(this.accordionItem().value());
+        this.state.toggle();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpAccordionTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpAccordionTrigger, isStandalone: true, selector: "[ngpAccordionTrigger]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "toggle()" }, properties: { "id": "id()", "attr.type": "tagName === \"button\" ? \"button\" : null", "attr.data-orientation": "accordion().orientation()", "attr.data-open": "accordionItem().open() ? \"\" : null", "attr.data-disabled": "accordionItem().disabled() || accordion().disabled() ? \"\" : null", "attr.aria-controls": "accordionItem().contentId()", "attr.aria-expanded": "accordionItem().open()" } }, exportAs: ["ngpAccordionTrigger"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpAccordionTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpAccordionTrigger, isStandalone: true, selector: "[ngpAccordionTrigger]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["ngpAccordionTrigger"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpAccordionTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpAccordionTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpAccordionTrigger]',
                     exportAs: 'ngpAccordionTrigger',
-                    host: {
-                        '[id]': 'id()',
-                        '[attr.type]': 'tagName === "button" ? "button" : null',
-                        '[attr.data-orientation]': 'accordion().orientation()',
-                        '[attr.data-open]': 'accordionItem().open() ? "" : null',
-                        '[attr.data-disabled]': 'accordionItem().disabled() || accordion().disabled() ? "" : null',
-                        '[attr.aria-controls]': 'accordionItem().contentId()',
-                        '[attr.aria-expanded]': 'accordionItem().open()',
-                    },
                 }]
-        }], ctorParameters: () => [], propDecorators: { toggle: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
 const defaultAccordionConfig = {
     type: 'single',
@@ -281,22 +324,23 @@ class NgpAccordion {
         /**
          * The type of the accordion.
          */
-        this.type = input(this.config.type, {
-            alias: 'ngpAccordionType',
-        });
+        this.type = input(this.config.type, ...(ngDevMode ? [{ debugName: "type", alias: 'ngpAccordionType' }] : [{
+                alias: 'ngpAccordionType',
+            }]));
         /**
          * Whether the accordion is collapsible.
          */
-        this.collapsible = input(this.config.collapsible, {
-            alias: 'ngpAccordionCollapsible',
-            transform: booleanAttribute,
-        });
+        this.collapsible = input(this.config.collapsible, ...(ngDevMode ? [{ debugName: "collapsible", alias: 'ngpAccordionCollapsible',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpAccordionCollapsible',
+                transform: booleanAttribute,
+            }]));
         /**
          * The value of the accordion.
          */
-        this.value = input(null, {
-            alias: 'ngpAccordionValue',
-        });
+        this.value = input(null, ...(ngDevMode ? [{ debugName: "value", alias: 'ngpAccordionValue' }] : [{
+                alias: 'ngpAccordionValue',
+            }]));
         /**
          * Event emitted when the accordion value changes.
          */
@@ -306,20 +350,28 @@ class NgpAccordion {
         /**
          * Whether the accordion is disabled.
          */
-        this.disabled = input(false, {
-            alias: 'ngpAccordionDisabled',
-            transform: booleanAttribute,
-        });
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpAccordionDisabled',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpAccordionDisabled',
+                transform: booleanAttribute,
+            }]));
         /**
          * The accordion orientation.
          */
-        this.orientation = input(this.config.orientation, {
-            alias: 'ngpAccordionOrientation',
-        });
+        this.orientation = input(this.config.orientation, ...(ngDevMode ? [{ debugName: "orientation", alias: 'ngpAccordionOrientation' }] : [{
+                alias: 'ngpAccordionOrientation',
+            }]));
         /**
          * The accordion state.
          */
-        this.state = accordionState(this);
+        this.state = ngpAccordion({
+            type: this.type,
+            collapsible: this.collapsible,
+            value: this.value,
+            disabled: this.disabled,
+            orientation: this.orientation,
+            onValueChange: value => this.valueChange.emit(value),
+        });
     }
     /**
      * @param value The value to check.
@@ -327,54 +379,26 @@ class NgpAccordion {
      * @internal
      */
     isOpen(value) {
-        if (this.state.type() === 'multiple') {
-            return this.state.value()?.includes(value) ?? false;
-        }
-        return this.state.value() === value;
+        return this.state.isOpen(value);
     }
     toggle(value) {
-        const isOpen = this.isOpen(value);
-        // if we are in single mode and the value is already open and the accordion is not collapsible, do nothing
-        if (this.state.type() === 'single' && isOpen && !this.state.collapsible()) {
-            return;
-        }
-        // if we are in single mode then toggle the value
-        if (this.state.type() === 'single') {
-            const newValue = isOpen ? null : value;
-            this.state.value.set(newValue);
-            this.valueChange.emit(newValue);
-            return;
-        }
-        // if we are in multiple mode then toggle the value
-        let values = this.state.value() ?? [];
-        if (isOpen) {
-            values = values.filter(v => v !== value);
-        }
-        else {
-            values = [...values, value];
-        }
-        this.state.value.set(values);
-        this.valueChange.emit(values);
+        this.state.toggle(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpAccordion, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpAccordion, isStandalone: true, selector: "[ngpAccordion]", inputs: { type: { classPropertyName: "type", publicName: "ngpAccordionType", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "ngpAccordionCollapsible", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "ngpAccordionValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpAccordionDisabled", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "ngpAccordionOrientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "ngpAccordionValueChange" }, host: { properties: { "attr.data-orientation": "state.orientation()", "attr.data-disabled": "state.disabled() ? \"\" : null" } }, providers: [provideAccordionState()], exportAs: ["ngpAccordion"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpAccordion, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpAccordion, isStandalone: true, selector: "[ngpAccordion]", inputs: { type: { classPropertyName: "type", publicName: "ngpAccordionType", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "ngpAccordionCollapsible", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "ngpAccordionValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpAccordionDisabled", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "ngpAccordionOrientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "ngpAccordionValueChange" }, providers: [provideAccordionState()], exportAs: ["ngpAccordion"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpAccordion, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpAccordion, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpAccordion]',
                     exportAs: 'ngpAccordion',
                     providers: [provideAccordionState()],
-                    host: {
-                        '[attr.data-orientation]': 'state.orientation()',
-                        '[attr.data-disabled]': 'state.disabled() ? "" : null',
-                    },
                 }]
-        }] });
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpAccordionType", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpAccordionCollapsible", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpAccordionValue", required: false }] }], valueChange: [{ type: i0.Output, args: ["ngpAccordionValueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpAccordionDisabled", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpAccordionOrientation", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgpAccordion, NgpAccordionContent, NgpAccordionItem, NgpAccordionTrigger, injectAccordionItemState, injectAccordionState, provideAccordionConfig, provideAccordionItemState, provideAccordionState };
+export { NgpAccordion, NgpAccordionContent, NgpAccordionContentStateToken, NgpAccordionItem, NgpAccordionItemStateToken, NgpAccordionStateToken, NgpAccordionTrigger, NgpAccordionTriggerStateToken, injectAccordionContentState, injectAccordionItemState, injectAccordionState, injectAccordionTriggerState, ngpAccordion, ngpAccordionContent, ngpAccordionItem, ngpAccordionTrigger, provideAccordionConfig, provideAccordionContentState, provideAccordionItemState, provideAccordionState, provideAccordionTriggerState };
 //# sourceMappingURL=ng-primitives-accordion.mjs.map