@limetech/lime-elements
Version:
81 lines • 2.65 kB
TypeScript
import { Action } from './action';
import { Icon } from '../../global/shared-types/icon.types';
import { Languages } from '../date-picker/date.types';
/**
* A collapsible section can be used to group related content together
* and hide the group when not needed.
* Using this component can help to:
* - Save vertical space by hiding non-essential content
* - Improve content organization and scannability of the user interface
* - Reduce cognitive load by displaying only a set of relevant information at a time
* - Or disclose complex information, progressively to the user
*
* @slot - Content to put inside the collapsible section
* @slot header - Optional slot for custom header content
*
* @exampleComponent limel-example-collapsible-section-basic
* @exampleComponent limel-example-collapsible-section-actions
* @exampleComponent limel-example-collapsible-section-with-custom-header-component
* @exampleComponent limel-example-collapsible-section-external-control
* @exampleComponent limel-example-collapsible-section-with-slider
* @exampleComponent limel-example-collapsible-section-invalid
* @exampleComponent limel-example-collapsible-section-icon
* @exampleComponent limel-example-collapsible-section-css-props
*/
export declare class CollapsibleSection {
/**
* `true` if the section is expanded, `false` if collapsed.
*/
isOpen: boolean;
/**
* Text to display in the header of the section
*/
header: string;
/**
* Icon to display in the header of the section
*/
icon?: string | Icon;
/**
* `true` if the section is invalid, `false` if valid.
* This can be used to indicate that the content inside the section is invalid.
*/
invalid: boolean;
/**
* Actions to place to the far right inside the header
*/
actions: Action[];
/**
* Defines the language for translations.
* Will translate the translatable strings on the components.
*/
language: Languages;
/**
* Emitted when the section is expanded
*/
private open;
/**
* Emitted when the section is collapsed
*/
private close;
/**
* Emitted when an action is clicked inside the header
*/
private action;
private host;
private bodyId;
private headingId;
componentDidRender(): void;
disconnectedCallback(): void;
render(): any;
private onClick;
private handleInteraction;
private renderExpandCollapseSign;
private renderIcon;
private renderHeading;
private renderActions;
private renderHeaderSlot;
private renderActionButton;
private handleActionClick;
private getCollapsibleSectionAriaLabel;
}
//# sourceMappingURL=collapsible-section.d.ts.map