AccordionApi

interface

Interface representing the API for an accordion component.

Methods
collapse

collapse(itemId): void

Given the itemId, will collapse the corresponding accordion-item.

If the itemId is not valid, nothing will happen.

Parameters
itemId

string

Returns

void

collapseAll

collapseAll(): void

It will collapse all the accordion-items in the accordion.

Returns

void

expand

expand(itemId): void

Given the itemId, will expand the corresponding accordion-item.

If the itemId is not valid, nothing will happen.

Parameters
itemId

string

Returns

void

expandAll

expandAll(): void

It will expand all the items in the accordion.

If closeOthers is true it will expand only the last accordion-item.

Returns

void

registerItem

registerItem(itemConfig?): AccordionItemWidget

Creates a new accordionItem.

Parameters
itemConfig?

PropsConfig<AccordionItemProps>

Returns

AccordionItemWidget

toggle

toggle(itemId): void

Given the itemId, will toggle the corresponding accordion-item.

If the itemId is not valid, nothing will happen.

Parameters
itemId

string

Returns

void

AccordionBodyDirective

class

Directive to represent the body of an accordion item.

This directive provides a template reference for the AccordionItemContext.

AccordionDirective

class

Directive for creating an accordion component.

This directive extends the BaseWidgetDirective and provides various inputs and outputs to customize the behavior and appearance of the accordion and its items.

Properties
className

readonly className: InputSignal<undefined | string>

CSS classes to be applied on the widget main container

Default Value

''

closeOthers

readonly closeOthers: InputSignalWithTransform<undefined | boolean, unknown>

If true, only one accordion-item at the time can stay open.

Default Value

false

itemAnimated

readonly itemAnimated: InputSignalWithTransform<undefined | boolean, unknown>

If true, accordion-item will be animated.

Default Value

true

itemBodyClassName

readonly itemBodyClassName: InputSignal<undefined | string>

CSS classes to add on the accordion-item body DOM element.

Default Value

''

itemBodyContainerClassName

readonly itemBodyContainerClassName: InputSignal<undefined | string>

CSS classes to add on the accordion-item body container DOM element. The accordion-item body container is the DOM element on what the itemTransition is applied.

Default Value

''

itemButtonClassName

readonly itemButtonClassName: InputSignal<undefined | string>

CSS classes to add on the accordion-item toggle button DOM element.

Default Value

''

itemClassName

readonly itemClassName: InputSignal<undefined | string>

CSS classes to add on the accordion-item DOM element.

Default Value

''

itemDestroyOnHide

readonly itemDestroyOnHide: InputSignalWithTransform<undefined | boolean, unknown>

If true, the accordion-item body container will be removed from the DOM when the accordion-item is collapsed. It will be just hidden otherwise.

Default Value

true

itemHeaderClassName

readonly itemHeaderClassName: InputSignal<undefined | string>

CSS classes to add on the accordion-item header DOM element.

Default Value

''

itemHeadingTag

readonly itemHeadingTag: InputSignal<undefined | string>

The html tag to use for the accordion-item-header.

Default Value

''

itemHidden

readonly itemHidden: OutputEmitterRef<string>

An event fired when an item is hidden.

Event payload is the id of the item.

Default Value
() => {}
itemShown

readonly itemShown: OutputEmitterRef<string>

An event fired when an item is shown.

Event payload is the id of the item.

Default Value
() => {}
itemStructure

readonly itemStructure: InputSignal<SlotContent<AccordionItemContext>>

Structure of the accordion-item. The default item structure is: accordion-item contains accordion header and accordion-item body container; the accordion header contains the accordion button (that contains header), while the accordion-item body container contains the accordion body (that contains children). The itemTransition is applied on this element.

It is a prop of the accordion-item.

itemTransition

readonly itemTransition: InputSignal<undefined | TransitionFn>

The transition to use for the accordion-item body-container when the accordion-item is toggled.

Default Value
collapseVerticalTransition
Accessors
api
Get Signature

get api(): W["api"]

Retrieves the widget api

Returns

W["api"]

the widget api

directives
Get Signature

get directives(): W["directives"]

Retrieves the widget directives

Returns

W["directives"]

the widget directives

state
Get Signature

get state(): AngularState<W>

Retrieves the widget state. Each property of the state is exposed through an Angular Signal

Returns

AngularState<W>

the widget state

AccordionDirectives

interface

Interface representing the directives used in the Accordion component.

Properties
accordionDirective

accordionDirective: Directive

Directive to put on the accordion DOM element

AccordionHeaderDirective

class

Directive to be used as an accordion header.

This directive provides a template reference for the AccordionItemContext.

AccordionItemApi

interface

Interface representing the API for an accordion item.

Methods
collapse

collapse(): void

It will collapse the accordion-item.

Returns

void

expand

expand(): void

It will expand the accordion-item.

Returns

void

initDone

initDone(): void

Method to be called after the initialization to allow animations.

Returns

void

toggle

toggle(): void

It will toggle the accordion-item.

Returns

void

AccordionItemComponent

class

AccordionItemComponent is a component that represents an item within an accordion.

Implements
Properties
animated

readonly animated: InputSignalWithTransform<undefined | boolean, unknown>

If true, accordion-item will be animated.

bodyClassName

readonly bodyClassName: InputSignal<undefined | string>

CSS classes to add on the accordion-item body DOM element.

bodyContainerClassName

readonly bodyContainerClassName: InputSignal<undefined | string>

CSS classes to add on the accordion-item body container DOM element. The accordion-item body container is the DOM element on what the itemTransition is applied.

buttonClassName

readonly buttonClassName: InputSignal<undefined | string>

CSS classes to add on the accordion-item collapse DOM element.

children

readonly children: InputSignal<SlotContent<AccordionItemContext>>

Content present in the accordion body.

It is a prop of the accordion-item.

className

readonly className: InputSignal<undefined | string>

CSS classes to be applied on the widget main container

Default Value

''

destroyOnHide

readonly destroyOnHide: InputSignalWithTransform<undefined | boolean, unknown>

If true, the accordion-item body container will be removed from the DOM when the accordion-item is collapsed. It will be just hidden otherwise.

disabled

readonly disabled: InputSignalWithTransform<undefined | boolean, unknown>

If true, the accordion-item will be disabled. It will not react to user's clicks, but still will be possible to toggle programmatically.

header

readonly header: InputSignal<SlotContent<AccordionItemContext>>

Content present in the accordion button inside the accordion header.

It is a prop of the accordion-item.

headerClassName

readonly headerClassName: InputSignal<undefined | string>

CSS classes to add on the accordion-item header DOM element.

headingTag

readonly headingTag: InputSignal<undefined | string>

The html tag to use for the accordion-item-header.

hidden

readonly hidden: OutputEmitterRef<void>

An event fired when an item is hidden.

id

readonly id: InputSignal<undefined | string>

The id of the accordion-item. It can be used for controlling the accordion-item via the accordion api.

shown

readonly shown: OutputEmitterRef<void>

An event fired when an item is shown.

structure

readonly structure: InputSignal<SlotContent<AccordionItemContext>>

Structure of the accordion-item. The default item structure is: accordion-item contains accordion header and accordion-item body container; the accordion header contains the accordion button (that contains header), while the accordion-item body container contains the accordion body (that contains children). The itemTransition is applied on this element.

It is a prop of the accordion-item.

transition

readonly transition: InputSignal<undefined | TransitionFn>

The transition to use for the accordion-item body-container when the accordion-item is toggled.

visible

readonly visible: InputSignalWithTransform<undefined | boolean, unknown>

If true, the accordion-item will be visible (expanded). Otherwise, it will be hidden (collapsed).

visibleChange

readonly visibleChange: OutputEmitterRef<boolean>

An event fired when the visible value changes.

Event payload is the new value of visible.

Accessors
api
Get Signature

get api(): W["api"]

Retrieves the widget api

Returns

W["api"]

the widget api

directives
Get Signature

get directives(): W["directives"]

Retrieves the widget directives

Returns

W["directives"]

the widget directives

state
Get Signature

get state(): AngularState<W>

Retrieves the widget state. Each property of the state is exposed through an Angular Signal

Returns

AngularState<W>

the widget state

Methods
ngAfterViewInit

ngAfterViewInit(): void

A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.

Returns

void

Implementation of

AfterViewInit.ngAfterViewInit

AccordionItemContext

interface

Represents the context for an accordion item within the accordion component.

Properties
api

api: AccordionItemApi

all the api functions to interact with the widget

directives

directives: AccordionItemDirectives

directives to be used on html elements in the template of the widget or in the slots

state

state: AngularState<AccordionItemWidget>

The state of the widget. Each property of the state is exposed through an Angular Signal

accordionItemDefaultSlotStructure

constant

const accordionItemDefaultSlotStructure: SlotContent<AccordionItemContext>

Represents the default slot structure for an accordion item.

AccordionItemDirectives

interface

Interface representing the directives used in an accordion item.

Properties
bodyContainerAttrsDirective

bodyContainerAttrsDirective: Directive

Directive to apply aria attributes to the expanded body panel

bodyContainerDirective

bodyContainerDirective: Directive

Directive to be put on the accordion-item body container. It will handle the animation.

bodyDirective

bodyDirective: Directive

Directive to put on the accordion-item body.

buttonDirective

buttonDirective: Directive

Directive to put on the button element that will control the collapsing of the accordion-item.

headerDirective

headerDirective: Directive

Directive to put on the accordion-item header that will contain the button element.

itemDirective

itemDirective: Directive

Directive to be put on the accordion-item. It will handle adding the accordion-item to the accordion.

toggleDirective

toggleDirective: Directive

Directive to use in special cases, if the accordion header does not use a button element to control the collapsing.

transitionDirective

transitionDirective: Directive

Directive to apply the itemTransition

AccordionItemProps

interface

Represents the properties for an Accordion item component.

Properties
animated

animated: boolean

If true, accordion-item will be animated.

bodyClassName

bodyClassName: string

CSS classes to add on the accordion-item body DOM element.

bodyContainerClassName

bodyContainerClassName: string

CSS classes to add on the accordion-item body container DOM element. The accordion-item body container is the DOM element on what the itemTransition is applied.

buttonClassName

buttonClassName: string

CSS classes to add on the accordion-item collapse DOM element.

children

children: SlotContent<AccordionItemContext>

Content present in the accordion body.

It is a prop of the accordion-item.

className

className: string

CSS classes to be applied on the widget main container

Default Value

''

destroyOnHide

destroyOnHide: boolean

If true, the accordion-item body container will be removed from the DOM when the accordion-item is collapsed. It will be just hidden otherwise.

disabled

disabled: boolean

If true, the accordion-item will be disabled. It will not react to user's clicks, but still will be possible to toggle programmatically.

header

header: SlotContent<AccordionItemContext>

Content present in the accordion button inside the accordion header.

It is a prop of the accordion-item.

headerClassName

headerClassName: string

CSS classes to add on the accordion-item header DOM element.

headingTag

headingTag: string

The html tag to use for the accordion-item-header.

id

id: string

The id of the accordion-item. It can be used for controlling the accordion-item via the accordion api.

onHidden

onHidden: () => void

An event fired when an item is hidden.

Returns

void

onShown

onShown: () => void

An event fired when an item is shown.

Returns

void

onVisibleChange

onVisibleChange: (visible) => void

An event fired when the visible value changes.

Event payload is the new value of visible.

Parameters
visible

boolean

Returns

void

structure

structure: SlotContent<AccordionItemContext>

Structure of the accordion-item. The default item structure is: accordion-item contains accordion header and accordion-item body container; the accordion header contains the accordion button (that contains header), while the accordion-item body container contains the accordion body (that contains children). The itemTransition is applied on this element.

It is a prop of the accordion-item.

transition

transition: TransitionFn

The transition to use for the accordion-item body-container when the accordion-item is toggled.

visible

visible: boolean

If true, the accordion-item will be visible (expanded). Otherwise, it will be hidden (collapsed).

AccordionItemState

interface

Represents the state of an accordion item, extending the core item state and additional properties specific to the accordion item.

Properties
bodyClassName

bodyClassName: string

CSS classes to add on the accordion-item body DOM element.

bodyContainerClassName

bodyContainerClassName: string

CSS classes to add on the accordion-item body container DOM element. The accordion-item body container is the DOM element on what the itemTransition is applied.

buttonClassName

buttonClassName: string

CSS classes to add on the accordion-item collapse DOM element.

children

children: SlotContent<AccordionItemContext>

Content present in the accordion body.

It is a prop of the accordion-item.

className

className: string

CSS classes to be applied on the widget main container

Default Value

''

disabled

disabled: boolean

If true, the accordion-item will be disabled. It will not react to user's clicks, but still will be possible to toggle programmatically.

header

header: SlotContent<AccordionItemContext>

Content present in the accordion button inside the accordion header.

It is a prop of the accordion-item.

headerClassName

headerClassName: string

CSS classes to add on the accordion-item header DOM element.

headingTag

headingTag: string

The html tag to use for the accordion-item-header.

id

id: string

The id of the accordion-item. It can be used for controlling the accordion-item via the accordion api.

shouldBeInDOM

shouldBeInDOM: boolean

If true the content of the accordion-item collapse should be in DOM. Its value depends on the value of the visible and destroyOnHide.

structure

structure: SlotContent<AccordionItemContext>

Structure of the accordion-item. The default item structure is: accordion-item contains accordion header and accordion-item body container; the accordion header contains the accordion button (that contains header), while the accordion-item body container contains the accordion body (that contains children). The itemTransition is applied on this element.

It is a prop of the accordion-item.

visible

visible: boolean

If true, the accordion-item will be visible (expanded). Otherwise, it will be hidden (collapsed).

AccordionItemStructureDirective

class

Directive that represents the structure of an accordion item.

This directive provides a template reference for the AccordionItemContext. It also includes a static method to guard the template context type.

AccordionItemWidget

type alias

AccordionItemWidget: Widget<AccordionItemProps, AccordionItemState, AccordionItemApi, AccordionItemDirectives>

Represents a widget for an accordion item.

AccordionProps

interface

Represents the state of an AccordionItem component.

Properties
className

className: string

CSS classes to be applied on the widget main container

Default Value

''

closeOthers

closeOthers: boolean

If true, only one accordion-item at the time can stay open.

Default Value

false

itemAnimated

itemAnimated: boolean

If true, accordion-item will be animated.

Default Value

true

itemBodyClassName

itemBodyClassName: string

CSS classes to add on the accordion-item body DOM element.

Default Value

''

itemBodyContainerClassName

itemBodyContainerClassName: string

CSS classes to add on the accordion-item body container DOM element. The accordion-item body container is the DOM element on what the itemTransition is applied.

Default Value

''

itemButtonClassName

itemButtonClassName: string

CSS classes to add on the accordion-item toggle button DOM element.

Default Value

''

itemClassName

itemClassName: string

CSS classes to add on the accordion-item DOM element.

Default Value

''

itemDestroyOnHide

itemDestroyOnHide: boolean

If true, the accordion-item body container will be removed from the DOM when the accordion-item is collapsed. It will be just hidden otherwise.

Default Value

true

itemHeaderClassName

itemHeaderClassName: string

CSS classes to add on the accordion-item header DOM element.

Default Value

''

itemHeadingTag

itemHeadingTag: string

The html tag to use for the accordion-item-header.

Default Value

''

itemStructure

itemStructure: SlotContent<AccordionItemContext>

Structure of the accordion-item. The default item structure is: accordion-item contains accordion header and accordion-item body container; the accordion header contains the accordion button (that contains header), while the accordion-item body container contains the accordion body (that contains children). The itemTransition is applied on this element.

It is a prop of the accordion-item.

itemTransition

itemTransition: TransitionFn

The transition to use for the accordion-item body-container when the accordion-item is toggled.

Default Value
collapseVerticalTransition
onItemHidden

onItemHidden: (itemId) => void

An event fired when an item is hidden.

Event payload is the id of the item.

Parameters
itemId

string

Returns

void

Default Value
() => {}
onItemShown

onItemShown: (itemId) => void

An event fired when an item is shown.

Event payload is the id of the item.

Parameters
itemId

string

Returns

void

Default Value
() => {}

AccordionState

interface

Represents the state of an Accordion component.

Properties
className

className: string

CSS classes to be applied on the widget main container

Default Value

''

itemStructure

itemStructure: SlotContent<AccordionItemContext>

Structure of the accordion-item. The default item structure is: accordion-item contains accordion header and accordion-item body container; the accordion header contains the accordion button (that contains header), while the accordion-item body container contains the accordion body (that contains children). The itemTransition is applied on this element.

It is a prop of the accordion-item.

itemWidgets

itemWidgets: AccordionItemWidget[]

Array containing all the accordion-items contained in the accordion.

AccordionWidget

type alias

AccordionWidget: Widget<AccordionProps, AccordionState, AccordionApi, AccordionDirectives>

Represents an Accordion widget type.

createAccordion

function

createAccordion(props?): AccordionWidget

Create an AccordionWidget with given config props

Parameters
props?

PropsConfig<AccordionProps>

Returns

AccordionWidget

an AccordionWidget

createAccordionItem

function

createAccordionItem(props?): AccordionItemWidget

Create an AccordionItemWidget with given config props

Parameters
props?

PropsConfig<AccordionItemProps>

Returns

AccordionItemWidget

an AccordionItemWidget

factoryCreateAccordion

function

factoryCreateAccordion(itemFactory?, accordionItemProps?, accordionConfig?, accordionValidator?): WidgetFactory<AccordionWidget>

Create an accordion WidgetFactory based on a item factory and the list of item props that should inherit from the parent accordion

Parameters
itemFactory?

WidgetFactory<AccordionItemWidget>

the item factory

accordionItemProps?

string[]

the list of item props

accordionConfig?

AccordionProps

the default accordion config

accordionValidator?

ConfigValidator<AccordionProps>

the validator of props

Returns

WidgetFactory<AccordionWidget>

the accordion widget factory

getAccordionDefaultConfig

function

getAccordionDefaultConfig(): AccordionProps

Retrieve a shallow copy of the default accordion config

Returns

AccordionProps

the default accordion config