@trimble-oss/moduswebcomponents
Version:
Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust
61 lines (60 loc) • 2.25 kB
TypeScript
import { EventEmitter } from '../../stencil-public-runtime';
import { DaisySize } from '../types';
export interface ICollapseOptions {
/** The description to render below the collapse header, visible only when the component is expanded. */
description?: string;
/** The Modus icon name to render at the end of the header. */
endIcon?: string;
/** The end icon's aria-label. */
endIconAriaLabel?: string;
/** The Modus icon name to render in the collapse header. */
icon?: string;
/** The icon's aria-label. */
iconAriaLabel?: string;
/** The Modus icon name to render before the chevron. */
startIcon?: string;
/** The start icon's aria-label. */
startIconAriaLabel?: string;
/** The size of the collapse header. */
size?: DaisySize;
/** The title to render in the collapse header. */
title: string;
}
/**
* A customizable collapse component used for showing and hiding content.
*
* The component supports a 'header' and 'content' `<slot>` for injecting custom HTML.
*/
export declare class ModusWcCollapse {
private inheritedAttributes;
private detailsRef?;
/** Reference to the host element */
el: HTMLElement;
/** When true, renders a border-bottom on the collapse component. */
bordered?: boolean;
/** Controls chevron placement. */
chevronPosition?: 'left' | 'right';
/** Custom CSS class to apply to the outer div. */
customClass?: string;
/** Controls whether the collapse is expanded or not. */
expanded?: boolean;
/** A unique identifier used to set the id attributes of various elements. */
collapseId?: string;
/**
* Configuration options for rendering the pre-laid out collapse component.
* Do not set this prop if you intend to use the 'header' slot.
*/
options?: ICollapseOptions;
/** Event emitted when the expanded prop is internally changed. */
expandedChange: EventEmitter<{
expanded: boolean;
}>;
expandedChanged(newValue: boolean): void;
componentWillLoad(): void;
private handleToggle;
private getOuterDivClasses;
private getTitleClasses;
private getTitleChildDivClasses;
private getDescriptionDivClasses;
render(): any;
}