@exadel/esl

import { ESLBaseElement } from '../../esl-base-element/core'; import { ESLMediaRuleList } from '../../esl-media-query/core'; import { ESLPanel } from '../../esl-panel/core'; import type { ESLPanelActionParams } from '../../esl-panel/core'; /** * ESLPanelGroup component * @author Julia Murashko, Anastasia Lesun, Alexey Stsefanovich (ala'n) * * ESLPanelGroup is a custom element that is used as a container for a group of {@link ESLPanel}s */ export declare class ESLPanelGroup extends ESLBaseElement { static is: string; static observedAttributes: string[]; /** List of supported modes */ static supportedModes: string[]; /** Event that dispatched on instance mode change */ MODE_CHANGE_EVENT: string; /** Inner event that dispatched after group-handled animation end */ AFTER_ANIMATE_EVENT: string; /** Child panels selector (Default `esl-panel`) */ panelSel: string; /** Rendering mode of the component (takes values from the list of supported modes; 'accordion' by default) */ mode: string; /** Rendering mode class pattern. Uses {@link format} syntax for `mode` placeholder */ modeCls: string; /** Element {@link ESLTraversingQuery} selector to add class that identifies the rendering mode (ESLPanelGroup itself by default) */ modeClsTarget: string; /** * ESLMediaQuery string to define a list of media conditions * to disable collapse/expand animation (for both Group and Panel animations) */ noAnimate: string; /** Class(es) to be added during animation ('animate' by default) */ animationClass: string; /** Define minimum number of panels that could be opened */ minOpenItems: string; /** Define maximum number of panels that could be opened */ maxOpenItems: string; /** * Define active panel(s) behavior in case of configuration change (mode, min-open-items, max-open-items) * `last` (default) - try to preserve currently active panel(s) * `initial` - activates initially opened panel(s) * `open` - open max of available panels * `close` - close all the panels (to the min of open items) */ refreshStrategy: string; /** Action params to pass into panels when executing reset action (happens when mode is changed) */ transformParams: ESLPanelActionParams; /** Readonly attribute that indicates whether the panel group has opened panels */ hasOpened: boolean; /** Active while animation in progress */ animating: boolean; /** Height of previous active panel */ protected _previousHeight: number; protected connectedCallback(): void; protected attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void; /** Updates element state according to current mode */ protected refresh(): void; protected updateMarkers(): void; /** Updates mode class marker */ protected updateModeCls(): void; /** @returns ESLMediaRuleList instance of the mode mapping */ get modeRules(): ESLMediaRuleList<string>; /** @returns ESLMediaRuleList instance of the min-open-items mapping */ get minValueRules(): ESLMediaRuleList<number>; /** @returns ESLMediaRuleList instance of the max-open-items mapping */ get maxValueRules(): ESLMediaRuleList<number>; /** @returns ESLMediaRuleList instance of the refresh-strategy mapping */ get refreshRules(): ESLMediaRuleList<string>; /** @returns current mode */ get currentMode(): string; /** @returns current value of min-open-items */ get currentMinItems(): number; /** @returns current value of max-open-items */ get currentMaxItems(): number; /** @returns panels that are processed by the current panel group */ get $panels(): ESLPanel[]; /** @returns panels that are active */ get $activePanels(): ESLPanel[]; /** @returns panels that was initially opened */ get $initialPanels(): ESLPanel[]; /** @returns panels that requested to be opened on refresh */ get $resetStatePanels(): ESLPanel[]; /** @returns whether the collapse/expand animation should be handheld by the breakpoints */ get shouldAnimate(): boolean; /** @returns action params config that's used (inherited) by controlled {@link ESLPanel}s */ get panelConfig(): ESLPanelActionParams; /** @returns merged panel action params for show/hide requests from the group */ protected mergeActionParams(...params: ESLPanelActionParams[]): ESLPanelActionParams; /** Condition-guard to check if the passed target is a Panel that should be controlled by the Group */ includesPanel(target: any): target is ESLPanel; /** Shows all panels besides excluded ones */ showAll(excluded?: ESLPanel[], params?: ESLPanelActionParams): void; /** Hides all active panels besides excluded ones */ hideAll(excluded?: ESLPanel[], params?: ESLPanelActionParams): void; /** Resets to default state applicable to the current panel group configuration */ reset(): void; /** Animates the height of the component */ protected onAnimate(from: number, to: number): void; /** Checks if transition happens and runs afterAnimate step if transition is not presented */ protected fallbackAnimate(): void; /** Pre-processing animation action */ protected beforeAnimate(): void; /** Post-processing animation action */ protected afterAnimate(silent?: boolean): void; /** Process {@link ESLPanel} pre-show event */ protected _onBeforeShow(e: CustomEvent): void; /** Process {@link ESLPanel} show event */ protected _onStateChanged(e: CustomEvent): void; /** Process {@link ESLPanel} pre-hide event */ protected _onBeforeHide(e: CustomEvent): void; /** Catches CSS transition end event to start post-animate processing */ protected _onTransitionEnd(e?: TransitionEvent): void; /** Handles configuration change */ protected _onConfigChange(): void; } declare global { export interface ESLLibrary { PanelGroup: typeof ESLPanelGroup; } export interface HTMLElementTagNameMap { 'esl-panel-group': ESLPanelGroup; } }