dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
96 lines (95 loc) • 3.98 kB
TypeScript
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<AccordionEventDetail>;
export type AccordionClosedEvent = CustomEvent<AccordionEventDetail>;
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 <body>.
* 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<any> | Map<PropertyKey, unknown>): 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 {};