primeng
Version:
PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB
290 lines (286 loc) • 11 kB
TypeScript
import { AccordionPassThrough, AccordionContentPassThrough, AccordionHeaderPassThrough, AccordionPanelPassThrough } from 'primeng/types/accordion';
export * from 'primeng/types/accordion';
import * as _angular_core from '@angular/core';
import { InputSignalWithTransform, EventEmitter, TemplateRef } from '@angular/core';
import { MotionOptions } from '@primeuix/motion';
import * as i3 from 'primeng/api';
import { BlockableUI } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { BaseStyle } from 'primeng/base';
import * as i2 from 'primeng/ripple';
/**
*
* Accordion groups a collection of contents in tabs.
*
* [Live Demo](https://www.primeng.org/accordion/)
*
* @module accordionstyle
*
*/
declare enum AccordionClasses {
/**
* Class name of the root element
*/
root = "p-accordion",
/**
* Class name of the content wrapper
*/
contentwrapper = "p-accordioncontent",
/**
* Class name of the content
*/
content = "p-accordioncontent-content",
/**
* Class name of the header
*/
header = "p-accordionheader",
/**
* Class name of the toggle icon
*/
toggleicon = "p-accordionheader-toggle-icon",
/**
* Class name of the panel
*/
panel = "p-accordionpanel"
}
declare class AccordionStyle extends BaseStyle {
name: string;
style: string;
classes: {
root: string;
panel: ({ instance }: {
instance: any;
}) => (string | {
'p-accordionpanel-active': any;
'p-disabled': any;
})[];
header: string;
toggleicon: string;
contentContainer: string;
contentWrapper: string;
content: string;
};
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionStyle, never>;
static ɵprov: _angular_core.ɵɵInjectableDeclaration<AccordionStyle>;
}
interface AccordionStyle extends BaseStyle {
}
/**
* Custom tab open event.
* @see {@link onOpen}
* @group Interface
*/
interface AccordionTabOpenEvent {
/**
* Browser event.
*/
originalEvent: Event;
/**
* Opened tab index.
*/
index: number;
}
/**
* Custom tab close event.
* @see {@link onClose}
* @extends {AccordionTabOpenEvent}
* @group Interface
*/
interface AccordionTabCloseEvent extends AccordionTabOpenEvent {
}
/**
* Toggle icon template context.
* @group Interface
*/
interface AccordionToggleIconTemplateContext {
/**
* Represents the active status of the panel.
*/
active: boolean;
}
/**
* AccordionPanel is a helper component for Accordion component.
* @group Components
*/
declare class AccordionPanel extends BaseComponent<AccordionPanelPassThrough> {
$pcAccordionPanel: AccordionPanel | undefined;
bindDirectiveInstance: Bind;
componentName: string;
onAfterViewChecked(): void;
pcAccordion: any;
/**
* Value of the active tab.
* @defaultValue undefined
* @group Props
*/
value: _angular_core.ModelSignal<string | number | string[] | number[] | null | undefined>;
/**
* Disables the tab when enabled.
* @defaultValue false
* @group Props
*/
disabled: InputSignalWithTransform<any, boolean>;
active: _angular_core.Signal<boolean>;
valueEquals(currentValue: any, value: any): boolean;
_componentStyle: AccordionStyle;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionPanel, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionPanel, "p-accordion-panel, p-accordionpanel", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["*"], true, [{ directive: typeof i1.Bind; inputs: {}; outputs: {}; }]>;
}
/**
* AccordionHeader is a helper component for Accordion component.
* @group Components
*/
declare class AccordionHeader extends BaseComponent<AccordionHeaderPassThrough> {
$pcAccordionHeader: AccordionHeader | undefined;
bindDirectiveInstance: Bind;
componentName: string;
onAfterViewChecked(): void;
pcAccordion: any;
pcAccordionPanel: any;
id: _angular_core.Signal<string>;
active: _angular_core.Signal<any>;
disabled: _angular_core.Signal<any>;
ariaControls: _angular_core.Signal<string>;
/**
* Toggle icon template.
* @type {TemplateRef<AccordionToggleIconTemplateContext>} context - Context of the template
* @example
* ```html
* <ng-template #toggleicon let-active="active"> </ng-template>
* ```
* @see {@link AccordionToggleIconTemplateContext}
* @group Templates
*/
toggleicon: TemplateRef<AccordionToggleIconTemplateContext> | undefined;
onClick(event?: MouseEvent | KeyboardEvent): void;
onFocus(): void;
onKeydown(event: KeyboardEvent): void;
_componentStyle: AccordionStyle;
changeActiveValue(): void;
private findPanel;
private findHeader;
private findNextPanel;
private findPrevPanel;
private findFirstPanel;
private findLastPanel;
private changeFocusedPanel;
private arrowDownKey;
private arrowUpKey;
private onHomeKey;
private onEndKey;
private onEnterKey;
get dataP(): string | undefined;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionHeader, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionHeader, "p-accordion-header, p-accordionheader", never, {}, {}, ["toggleicon"], ["*"], true, [{ directive: typeof i2.Ripple; inputs: {}; outputs: {}; }, { directive: typeof i1.Bind; inputs: {}; outputs: {}; }]>;
}
declare class AccordionContent extends BaseComponent<AccordionContentPassThrough> {
$pcAccordionContent: AccordionContent | undefined;
bindDirectiveInstance: Bind;
componentName: string;
onAfterViewChecked(): void;
pcAccordion: any;
pcAccordionPanel: any;
active: _angular_core.Signal<any>;
ariaLabelledby: _angular_core.Signal<string>;
id: _angular_core.Signal<string>;
_componentStyle: AccordionStyle;
ptParams: _angular_core.Signal<{
context: any;
}>;
computedMotionOptions: _angular_core.Signal<MotionOptions>;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionContent, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionContent, "p-accordion-content, p-accordioncontent", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.Bind; inputs: {}; outputs: {}; }]>;
}
/**
* Accordion groups a collection of contents in tabs.
* @group Components
*/
declare class Accordion extends BaseComponent<AccordionPassThrough> implements BlockableUI {
componentName: string;
$pcAccordion: Accordion | undefined;
bindDirectiveInstance: Bind;
onAfterViewChecked(): void;
/**
* Value of the active tab.
* @defaultValue undefined
* @group Props
*/
value: _angular_core.ModelSignal<string | number | string[] | number[] | null | undefined>;
/**
* When enabled, multiple tabs can be activated at the same time.
* @defaultValue false
* @group Props
*/
multiple: InputSignalWithTransform<boolean, any>;
/**
* Class of the element.
* @deprecated since v20.0.0, use `class` instead.
* @group Props
*/
styleClass: string | undefined;
/**
* Icon of a collapsed tab.
* @group Props
*/
expandIcon: string | undefined;
/**
* Icon of an expanded tab.
* @group Props
*/
collapseIcon: string | undefined;
/**
* When enabled, the focused tab is activated.
* @defaultValue false
* @group Props
*/
selectOnFocus: InputSignalWithTransform<boolean, any>;
/**
* Transition options of the animation.
* @group Props
* @deprecated since v21.0.0, use `motionOptions` instead.
*/
transitionOptions: string;
/**
* The motion options.
* @group Props
*/
motionOptions: _angular_core.InputSignal<MotionOptions | undefined>;
computedMotionOptions: _angular_core.Signal<MotionOptions>;
/**
* Callback to invoke when an active tab is collapsed by clicking on the header.
* @param {AccordionTabCloseEvent} event - Custom tab close event.
* @group Emits
*/
onClose: EventEmitter<AccordionTabCloseEvent>;
/**
* Callback to invoke when a tab gets expanded.
* @param {AccordionTabOpenEvent} event - Custom tab open event.
* @group Emits
*/
onOpen: EventEmitter<AccordionTabOpenEvent>;
id: _angular_core.WritableSignal<string>;
_componentStyle: AccordionStyle;
onKeydown(event: any): void;
onTabArrowDownKey(event: any): void;
onTabArrowUpKey(event: any): void;
onTabHomeKey(event: any): void;
changeFocusedTab(element: any): void;
findNextHeaderAction(tabElement: any, selfCheck?: boolean): any;
findPrevHeaderAction(tabElement: any, selfCheck?: boolean): any;
findFirstHeaderAction(): any;
findLastHeaderAction(): any;
onTabEndKey(event: any): void;
getBlockableElement(): HTMLElement;
updateValue(value: string | number): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Accordion, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Accordion, "p-accordion", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "styleClass": { "alias": "styleClass"; "required": false; }; "expandIcon": { "alias": "expandIcon"; "required": false; }; "collapseIcon": { "alias": "collapseIcon"; "required": false; }; "selectOnFocus": { "alias": "selectOnFocus"; "required": false; "isSignal": true; }; "transitionOptions": { "alias": "transitionOptions"; "required": false; }; "motionOptions": { "alias": "motionOptions"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "onClose": "onClose"; "onOpen": "onOpen"; }, never, ["*"], true, [{ directive: typeof i1.Bind; inputs: {}; outputs: {}; }]>;
}
declare class AccordionModule {
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionModule, never>;
static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AccordionModule, never, [typeof Accordion, typeof i3.SharedModule, typeof AccordionPanel, typeof AccordionHeader, typeof AccordionContent, typeof i1.BindModule], [typeof Accordion, typeof i3.SharedModule, typeof AccordionPanel, typeof AccordionHeader, typeof AccordionContent, typeof i1.BindModule]>;
static ɵinj: _angular_core.ɵɵInjectorDeclaration<AccordionModule>;
}
export { Accordion, AccordionClasses, AccordionContent, AccordionHeader, AccordionModule, AccordionPanel, AccordionStyle };
export type { AccordionTabCloseEvent, AccordionTabOpenEvent, AccordionToggleIconTemplateContext };