wj-elements/dist/packages/wje-accordion-item/accordion-item.element.d.ts

WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.

import { default as WJElement } from '../wje-element/element.js';
/**
 * @summary This class represents an Accordion Item element, extending the WJElement class.
 * @documentation https://elements.webjet.sk/components/accordion-item
 * @status stable
 * @augments WJElement
 * @attribute {string} color - Applies a contextual color variant such as `primary`, `success`, `danger`, `warning`, `info`, or `complete`.
 * @slot headline - Slot for the clickable accordion headline content.
 * @slot description - Slot for supporting text shown below the headline.
 * @slot toggle - Slot for a custom toggle icon or toggle content.
 * @slot content - Slot for the expandable panel body.
 * @csspart native - The wrapper of the whole accordion item.
 * @csspart headline - The clickable headline area.
 * @csspart description - The description slot container inside the headline.
 * @csspart toggle - The toggle slot container and fallback chevron area.
 * @csspart content - The expandable content panel.
 * @cssproperty [--wje-accordion-background=var(--wje-color-contrast-0)] - Background color of the collapsed item wrapper.
 * @cssproperty [--wje-accordion-border=var(--wje-color-contrast-0)] - Border color of the collapsed item wrapper.
 * @cssproperty [--wje-accordion-border-radius=var(--wje-border-radius-large)] - Border radius of the item wrapper.
 * @cssproperty [--wje-accordion-background-hover=var(--wje-color-contrast-1)] - Background color used when the headline is hovered.
 * @cssproperty [--wje-accordion-border-hover=var(--wje-color-contrast-2)] - Border color used when the headline is hovered.
 * @cssproperty [--wje-accordion-background-expanded=var(--wje-color-contrast-0)] - Background color of the expanded item wrapper.
 * @cssproperty [--wje-accordion-border-expanded=var(--wje-color-contrast-0)] - Border color of the expanded item wrapper.
 * @cssproperty [--wje-accordion-headline-color=var(--wje-color-contrast-11)] - Text color of the headline area.
 * @cssproperty [--wje-accordion-content-color=var(--wje-color-contrast-6)] - Text color of the expandable content area.
 * @cssproperty [--wje-accordion-marker-rotate=0deg] - Rotation applied to the toggle marker icon.
 * // @fires wje-accordion-item:open - Dispatched when the item is expanded.
 * // @fires wje-accordion-item:close - Dispatched when the item is collapsed.
 * @tag wje-accordion-item
 */
export default class AccordionItem extends WJElement {
    static _instanceId: number;
    /**
     * Getter for the CSS stylesheet.
     * @returns {object} The styles for the Accordion Item element.
     */
    static get cssStyleSheet(): object;
    /**
     * Getter for the observed attributes.
     * @returns {Array} An array containing the name of the observed attribute.
     */
    static get observedAttributes(): any[];
    _instanceId: number;
    /**
     * Method to draw the Accordion Item element. This method returns a document fragment containing the drawn element.
     * @returns {object} The document fragment containing the drawn element.
     */
    draw(): object;
    headline: HTMLDivElement;
    toggle: HTMLSlotElement;
    content: HTMLDivElement;
    /**
     * Method to execute after the Accordion Item element is drawn.
     */
    afterDraw(): void;
    /**
     * Collapses the accordion item and updates the headline ARIA state.
     */
    collapse(): void;
    /**
     * Expands the accordion item and updates the headline ARIA state.
     */
    expand(): void;
}