ng-hub-ui-accordion
Version:
A flexible, accessible, and customizable accordion component for Angular 19, part of the ng-hub-ui family.
68 lines (67 loc) • 3.05 kB
TypeScript
import { TemplateRef } from '@angular/core';
import { CollapseEvent } from '../../models/collapse-event';
import * as i0 from "@angular/core";
/**
* A component that represents a single panel within an accordion.
* Each panel can be expanded or collapsed independently and contains a header and content section.
*
* @example
* ```html
* <hub-accordion-panel [title]="'Panel Title'" [value]="panelValue">
* <ng-template hubAccordionPanelHeader>Custom Header</ng-template>
* Panel Content
* </hub-accordion-panel>
* ```
*
* @implements {OnInit}
*
* @property {number} index - The position of this panel within its parent accordion
* @property {any} value - The value associated with this panel
* @property {WritableSignal<boolean>} collapsed - Signal controlling the panel's collapsed state
* @property {string} title - The title text displayed in the panel's header
* @property {TemplateRef<any>} headerTpt - Template reference for custom header content
*
* @emits {collapseEvent} collapsedChange - Fired when the panel's collapsed state changes
*/
export declare class AccordionPanelComponent {
/**
* The position of this panel within its parent accordion.
*
* @type {number}
*/
index: number;
value: any;
/**
* Signal that controls the collapsed state of the accordion panel.
* When true, the panel is collapsed. When false, the panel is expanded.
* @default true
*/
collapsed: import("@angular/core").ModelSignal<boolean>;
/**
* The title of the accordion panel.
*
* @type {string}
*/
title: import("@angular/core").InputSignal<unknown>;
/**
* Reference to the header template of the accordion panel.
* Uses contentChild query to find a template marked with AccordionPanelHeaderDirective.
* The template reference is read using TemplateRef.
*/
headerTpt: import("@angular/core").Signal<TemplateRef<any> | undefined>;
/**
* Event emitter that fires when the panel's collapsed state changes.
* Emits a collapseEvent object containing the collapse state and animation details.
* @event
*/
collapsedChange: import("@angular/core").OutputEmitterRef<CollapseEvent<any>>;
/**
* Toggles the collapse state of the accordion panel and emits the change event.
* The event includes the panel's index and its new collapsed state.
*
* @emits collapsedChange - Emits an object containing the panel index and collapsed state
*/
toggleCollapse(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<AccordionPanelComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<AccordionPanelComponent, "hub-accordion-panel", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; "collapsedChange": "collapsedChange"; }, ["headerTpt"], ["*"], true, never>;
}