import { PropertyValueMap, TemplateResult } from 'lit'; import { AccordionVariant } from '../../common/types'; import { HeadingLevel, LabelPlacement } from '../../dap-design-system'; import { DdsElement } from '../../internal/dds-hu-element'; export interface AccordionEventDetail { open: boolean; item: AccordionBaseElement; } export type AccordionOpenedEvent = CustomEvent; export type AccordionClosedEvent = CustomEvent; declare const AccordionBaseWithSized: typeof DdsElement & { new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface; prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface; }; export declare class AccordionBaseElement extends AccordionBaseWithSized { static readonly styles: import('lit').CSSResult; private static nextId; private readonly accordionId; private readonly buttonId; private readonly contentId; private _headingLevel; private _variant; /** Query for the accordion button element */ protected button?: HTMLButtonElement; /** * The element that actually takes focus -- the toggle button inside the shadow root. * * Without this, `accordionElement.focus()` silently does nothing: the host has no * tabindex and does not delegate focus, so a caller trying to move focus to an * accordion header (after committing an inline edit, say) drops focus to . * Mirrors the `focusElement` contract that FocusableMixin defines and that * dap-ds-modal's focus trap already looks for. */ get focusElement(): HTMLElement; focus(options?: FocusOptions): void; blur(): void; /** Query for the accordion content element */ protected content?: HTMLDivElement; /** Display size for accordion styling (sm or lg); other effective sizes map to sm. */ private get accordionDisplaySize(); /** The heading level of the accordion * @type { 1 | 2 | 3 | 4 | 5 | 6 } */ get headingLevel(): HeadingLevel; set headingLevel(value: HeadingLevel); /** Whether the accordion is opened */ opened: boolean; /** Whether the accordion is disabled */ disabled: boolean; /** Whether the accordion is in loading state */ loading: boolean; /** The heading text of the accordion, this will be used as the aria label of the heading also if ariaLabel is not provided */ heading?: string; /** The loading aria label of the accordion */ loadingAriaLabel?: string; /** The location of the icon * @type { 'left' | 'right' } */ iconLocation: LabelPlacement; /** The variant of the accordion * @type { 'default' | 'collapsed' | 'clean' | 'clean-collapsed' } */ get variant(): AccordionVariant; set variant(value: AccordionVariant); /** Whether this is the last item in an accordion group */ lastItem: boolean; constructor(); /** * Renders the heading content. Override in subclasses to customize heading rendering. * @returns Template result for heading content */ protected headingRender(): TemplateResult; /** * Renders additional content. Override in subclasses to add custom content. * @returns Template result for additional content */ protected contentRender(): TemplateResult; validateProperties(): void; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; private onChange; private toggle; private handleKeyDown; private handleClick; private get accordionClasses(); private renderIconOrSpinner; private renderButtons; private renderContent; private renderHeading; /** * Renders the complete accordion component. Override in subclasses to customize the entire accordion structure. * @returns Template result for the complete accordion */ renderAccordion(): TemplateResult; } export {};