igniteui-webcomponents
Version:
Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.
84 lines (83 loc) • 3.31 kB
TypeScript
import { LitElement } from 'lit';
import type { Constructor } from '../common/mixins/constructor.js';
export interface IgcExpansionPanelComponentEventMap {
igcOpening: CustomEvent<IgcExpansionPanelComponent>;
igcOpened: CustomEvent<IgcExpansionPanelComponent>;
igcClosing: CustomEvent<IgcExpansionPanelComponent>;
igcClosed: CustomEvent<IgcExpansionPanelComponent>;
}
declare const IgcExpansionPanelComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcExpansionPanelComponentEventMap>> & Constructor<LitElement>;
/**
* The Expansion Panel Component provides a way to display information in a toggleable way -
* compact summary view containing title and description and expanded detail view containing
* additional content to the summary header.
*
* @element igc-expansion-panel
*
* @slot - renders the default content of the panel
* @slot title - renders the title of the panel's header
* @slot subtitle - renders the subtitle of the panel's header
* @slot indicator - renders the expand/collapsed indicator
* @slot indicator-expanded - renders the expanded state of the indicator
*
* @fires igcOpening - Emitted before opening the expansion panel.
* @fires igcOpened - Emitted after the expansion panel is opened.
* @fires igcClosing - Emitted before closing the expansion panel.
* @fires igcClosed - Emitted after the expansion panel is closed.
*
* @csspart header - The container of the expansion indicator, title and subtitle.
* @csspart title - The title container.
* @csspart subtitle - The subtitle container.
* @csspart indicator - The indicator container.
* @csspart content - The expansion panel's content wrapper.
*/
export default class IgcExpansionPanelComponent extends IgcExpansionPanelComponent_base {
static readonly tagName = "igc-expansion-panel";
static styles: import("lit").CSSResult[];
static register(): void;
private static readonly increment;
private _panelId;
private headerRef;
private contentRef;
private animationPlayer;
private _indicatorExpandedElements;
/**
* Indicates whether the contents of the control should be visible.
* @attr
*/
open: boolean;
/**
* Get/Set whether the expansion panel is disabled. Disabled panels are ignored for user interactions.
* @attr
*/
disabled: boolean;
/**
* The indicator position of the expansion panel.
* @attr indicator-position
*/
indicatorPosition: 'start' | 'end' | 'none';
constructor();
protected createRenderRoot(): HTMLElement | DocumentFragment;
connectedCallback(): void;
private handleClick;
private toggleWithEvent;
private toggleAnimation;
private openWithEvent;
private closeWithEvent;
/** Toggles the panel open/close state. */
toggle(): Promise<boolean>;
/** Hides the panel content. */
hide(): Promise<boolean>;
/** Shows the panel content. */
show(): Promise<boolean>;
private renderIndicatorTemplate;
private renderHeaderTemplate;
private renderContentTemplate;
protected render(): import("lit-html").TemplateResult<1>;
}
declare global {
interface HTMLElementTagNameMap {
'igc-expansion-panel': IgcExpansionPanelComponent;
}
}
export {};