ng-hub-ui-accordion/lib/components/accordion/accordion.component.d.ts

A flexible, accessible, and customizable accordion component for Angular 19, part of the ng-hub-ui family.

import { ControlValueAccessor } from '@angular/forms';
import { CollapseEvent } from '../../models/collapse-event';
import { AccordionPanelComponent } from '../accordion-panel/accordion-panel.component';
import * as i0 from "@angular/core";
/**
 * A component that implements an accordion UI pattern, allowing users to show and hide
 * sections of related content. Supports single or multiple expanded panels and flush styling.
 * Implements ControlValueAccessor for form integration.
 *
 * @example
 * ```html
 * <hub-accordion [multiple]="true" [options]="{flush: true}">
 *   <hub-accordion-panel>...</hub-accordion-panel>
 *   <hub-accordion-panel>...</hub-accordion-panel>
 * </hub-accordion>
 * ```
 *
 * @implements {ControlValueAccessor}
 * @extends {SelectMultipleControlValueAccessor}
 */
export declare class AccordionComponent implements ControlValueAccessor {
    /**
     * The current value of the accordion component.
     * An array that may contain any type of data.
     */
    value: any[];
    /**
     * Input binding that configures the property or attribute to bind to.
     * Defines the property that will be bound to the value of the accordion.
     * @default undefined
     */
    bindValue: import("@angular/core").InputSignal<string | undefined>;
    /**
     * Configuration options for the accordion component.
     *
     * @property {Object} options - The options object for configuring the accordion.
     * @property {boolean} options.flush - When true, removes some borders and rounded corners to render
     * accordions edge-to-edge with their parent container. Defaults to false.
     */
    options: import("@angular/core").InputSignal<{
        flush: boolean;
    }>;
    /**
     * Defines a comparison function to determine if two accordion items are equal.
     * Used to track identity of objects in accordion selections.
     *
     * @param o1 First object to compare
     * @param o2 Second object to compare
     * @returns {boolean} True if objects are considered equal, false otherwise
     * @defaultValue Default implementation uses strict equality (===)
     */
    readonly compareWith: import("@angular/core").InputSignal<(o1: any, o2: any) => boolean>;
    /**
     * When true, expanding an accordion item will close all other expanded items.
     * Defaults to false.
     */
    multiple: import("@angular/core").InputSignal<boolean>;
    /**
     * Collection of child AccordionPanelComponent instances within this accordion.
     * Uses Angular's contentChildren query to obtain all panel components.
     * @type {QueryList<AccordionPanelComponent>}
     */
    panels: import("@angular/core").Signal<readonly AccordionPanelComponent[]>;
    /**
     * Effect that manages panel changes and their subscriptions.
     * Initializes panel indices and subscribes to collapse events for each panel.
     * This effect runs whenever the panels signal changes.
     *
     * For each panel:
     * - Sets its index based on array position
     * - Subscribes to panel collapse events to handle state changes
     */
    panelsChangeEffect: import("@angular/core").EffectRef;
    /**
     * Gets whether the accordion has the flush styling option enabled
     * @returns {boolean} True if the flush option is enabled, false otherwise
     */
    get haveFlushClass(): boolean;
    onChange: any;
    onTouch: any;
    /**
     * Implements the ControlValueAccessor interface to write a new value to the form control.
     * If multiple selection is not enabled, wraps the value in an array.
     * @param obj The value to be written to the form control
     */
    writeValue(obj: any): void;
    /**
     * Registers a callback function that is invoked when the control's value changes in the UI.
     * This is part of the ControlValueAccessor interface implementation.
     * @param fn - The callback function to register. This function will be called with the new value when the control's value changes.
     */
    registerOnChange(fn: any): void;
    /**
     * Registers a callback function that is called when the control receives a touch event.
     * Part of the ControlValueAccessor interface implementation.
     * @param fn - The callback function to register. Gets called when the control is touched.
     */
    registerOnTouched(fn: any): void;
    /**
     * Updates the collapse state of all panels based on the current value.
     * Each panel is collapsed if its value is not found in the accordion's value array using the compareWith function.
     * @internal
     */
    handleValue(): void;
    /**
     * Handles the collapse/expand event of an accordion panel.
     * If the panel is being expanded and multiple is enabled,
     * all other panels will be collapsed.
     *
     * @param {CollapseEvent} param0 - Object containing panel index and collapse state
     * @param {number} param0.index - The index of the panel being toggled
     * @param {boolean} param0.collapsed - The new collapse state of the panel
     * @param {boolean} param0.value - The panel value
     */
    handlePanelCollapse({ index, collapsed, value }: CollapseEvent): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<AccordionComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<AccordionComponent, "hub-accordion", never, { "bindValue": { "alias": "bindValue"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; }, {}, ["panels"], ["*"], true, never>;
}