@exadel/esl/modules/esl-panel/core/esl-panel.d.ts

Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components

import { ESLToggleable } from '../../esl-toggleable/core';
import type { ESLPanelGroup } from '../../esl-panel-group/core';
import type { ESLToggleableActionParams } from '../../esl-toggleable/core';
/** {@link ESLPanel} action params interface */
export interface ESLPanelActionParams extends ESLToggleableActionParams {
    /** Panel group */
    capturedBy?: ESLPanelGroup;
    /** Prevents collapsing/expanding animation */
    noAnimate?: boolean;
}
/**
 * ESLPanel component
 * @author Julia Murashko
 *
 * ESLPanel is a custom element that is used as a wrapper for content that can be shown or hidden.
 * Can use collapsing/expanding animation (smooth height change).
 * Can be used in conjunction with {@link ESLPanelGroup} to control a group of ESLPopups
 */
export declare class ESLPanel extends ESLToggleable {
    static is: string;
    /** Class(es) to be added for active state ('open' by default) */
    activeClass: string;
    /** Class(es) to be added during animation ('animate' by default) */
    animateClass: string;
    /** Class(es) to be added during animation after next render ('post-animate' by default) */
    postAnimateClass: string;
    /** CSS selector of the parent group (default: 'esl-panel-group') */
    panelGroupSel: string;
    /** Initial params for current ESLPanel instance */
    initialParams: ESLPanelActionParams;
    /** Active while animation in progress */
    animating: boolean;
    /** Inner height state that updates after show/hide actions but before show/hide events triggered */
    protected _initialHeight: number;
    /** @returns Previous active panel height at the start of the animation */
    get initialHeight(): number;
    /** @returns Closest panel group or null if not presented */
    get $group(): ESLPanelGroup | null;
    /** Process show action */
    protected onShow(params: ESLPanelActionParams): void;
    /** Process hide action */
    protected onHide(params: ESLPanelActionParams): void;
    /** Pre-processing animation action */
    protected beforeAnimate(): void;
    /** Handles post animation process to initiate after animate step */
    protected postAnimate(capturedBy?: ESLPanelGroup | null): void;
    /** Process animation */
    protected onAnimate(from: number, to: number): void;
    /** Checks if transition happens and runs afterAnimate step if transition is not presented*/
    protected fallbackAnimate(): void;
    /** Post-processing animation action */
    protected afterAnimate(): void;
    /** Clear animation properties */
    protected clearAnimation(): void;
    /** Catching CSS transition end event to start post-animate processing */
    protected _onTransitionEnd(e?: TransitionEvent): void;
    /** Merge params that are used by panel group for actions */
    protected mergeDefaultParams(params?: ESLToggleableActionParams): ESLToggleableActionParams;
}
declare global {
    export interface ESLLibrary {
        Panel: typeof ESLPanel;
    }
    export interface HTMLElementTagNameMap {
        'esl-panel': ESLPanel;
    }
}