import { KbqAccordionModule } from '@koobiq/components/accordion';Default `KbqAccordionStateStore` implementation backed by `localStorage`. All access is guarded so it is safe on the server (SSR) and in environments where storage throws on access (private mode, sandboxed iframes) or contains corrupt JSON.
Selector: kbq-accordion-content, [kbq-accordion-content]
Selector: kbq-accordion-header, [kbq-accordion-header]
Selector: [kbqAccordionTrigger]
Selector: [kbqAccordionContent]
Exported as: kbqAccordionContentSelector: kbq-accordion-trigger, [kbq-accordion-trigger]
| Name | Description |
|---|---|
| isFill: boolean | |
| isHug: boolean | |
| isHugSpaceBetween: boolean |
Selector: kbq-accordion-item, [kbq-accordion-item]
| Name | Description |
|---|---|
@Input() disabled: boolean
|
Whether the AccordionItem is disabled. |
@Input() expanded: boolean
|
Whether the AccordionItem is expanded. |
@Output('closed')
closed: OutputEmitterRef |
Event emitted every time the AccordionItem is closed. |
@Output('opened')
opened: OutputEmitterRef |
Event emitted every time the AccordionItem is opened. |
| id: string | The unique AccordionItem id. |
| value: Signal |
The item's effective value — its own value, or the item id when none is provided. |
Selector: kbq-accordion, [kbq-accordion]
| Name | Description |
|---|---|
@Input() collapsible: InputSignal |
Whether an expanded item can be collapsed by the user. Defaults to `true`. |
@Input() defaultValue: InputSignal |
The value of the item(s) to expand when initially rendered. Use when you do not need to control the state of the items. |
@Input() disabled: InputSignalWithTransform |
Whether the whole accordion is disabled. |
@Input() level: InputSignalWithTransform |
The `aria-level` applied to the item headings. Defaults to `2`.
Set it to match the surrounding document outline (e.g. `3` when nested under an `` section). |
@Input() orientation: InputSignal |
The layout orientation of the accordion. Defaults to `vertical`. |
@Input() stateSavingKey: InputSignal |
A stable, consumer-provided key used to persist state when `useStateSaving` is enabled. Strongly recommended: without it the accordion falls back to an auto-generated, instantiation-order-dependent id that is unreliable under lazy/conditional/reordered rendering. |
@Input() type: InputSignal |
Determines whether one or multiple items can be expanded at the same time. |
@Input() useStateSaving: InputSignalWithTransform |
Whether the accordion persists the expanded state of its items across reloads. Defaults to `false`. |
@Input() variant: InputSignal |
The visual variant of the accordion. Defaults to `fill`. |
@Output('valueChange')
valueChange: OutputEmitterRef |
Emits the current value whenever the expanded state of the accordion changes. |
| hasSavedState: boolean | Whether a persisted state exists for this accordion. |
| id: string | The unique id of this accordion. |
| isMultiple: boolean | Whether multiple items can be expanded at the same time. |
| value: Signal |
The controlled value of the item(s) to expand, reshaped by mode. Supports `[(value)]`. Falls back to `defaultValue` while `value` is unbound. Always an array in `multiple` mode and always a string in `single` mode — an empty string when nothing is expanded, matching what `valueChange` emits. |
A snapshot of a single accordion item's persisted state.
| Name | Description |
|---|---|
| expanded: boolean | Whether the item is expanded. |
| value: string | The item's value. |
The persisted state of an accordion, keyed by accordion item id.
Strategy used by `KbqAccordion` to persist and restore the expanded state of its items while `useStateSaving` is enabled. Provide a custom implementation through the `KBQ_ACCORDION_STATE_STORE` token to change where the state is stored (e.g. `sessionStorage`, a backend, or an in-memory map).
type KbqAccordionItemState = 'open' | 'closed';
Available visual variants of the accordion.
type KbqAccordionVariant = 'fill' | 'hug' | 'hugSpaceBetween';
Determines whether one or multiple items can be expanded at the same time.
type KbqAccordionType = 'single' | 'multiple';
The layout orientation of the accordion.
type KbqAccordionOrientation = 'horizontal' | 'vertical';
Injection token for the store used to persist accordion state while `useStateSaving` is enabled. Defaults to a `localStorage`-backed implementation (`KbqAccordionLocalStorageStateStore`).
const KBQ_ACCORDION_STATE_STORE: InjectionToken<KbqAccordionStateStore>;