@kelvininc/ui-components
Version:
Kelvin UI Components
69 lines (68 loc) • 3.52 kB
TypeScript
import { EventEmitter } from '../../stencil-public-runtime';
import { EIconName } from '../icon/icon.types';
import { ETreeItemLabelSize, ETreeItemState } from './tree-item.types';
import { EBadgeState } from '../badge/badge.types';
/**
* @slot child-slot - Content is placed in the child subgroup and can be expanded and collapsed.
* @part children - The children container.
*/
export declare class KvTreeItem {
/** (optional) Defines the title of the tree item.*/
label?: string;
/** (optional) Defines the sub-title of the tree item, displayed under the title.*/
additionalLabel?: string;
/** (optional) Defines the placeholder of the tree item, displayed when title is not filled.*/
placeholder?: string;
/** (optional) Defines the font size of title and subtitle labels.*/
labelsSize?: ETreeItemLabelSize;
/** (optional) Defines the icon of the tree item. If set, an icon will be displayed before the label.*/
icon?: EIconName;
/** (optional) Defines the state of the icon.*/
iconState?: ETreeItemState;
/** (optional) Defines the counter info of the tree item. If set, an badge will be displayed in the end of tree item.*/
counter?: number;
/** (optional) Defines the state of the counter.*/
counterState?: EBadgeState;
/** (optional) Defines whether the tree node has children, even if currently no other tree nodes are slotted inside.
* This property is useful for showing big tree structures where not all nodes are initially loaded due to performance reasons.
* Set this to <code>true</code> for nodes you intend to load lazily, when the user clicks the expand button.
* It is not necessary to set this property otherwise. If a tree item has children, the expand button will be displayed anyway.
*/
hasChildren?: boolean;
/** (optional) Defines whether the tree node is expanded or collapsed. Only has visual effect for tree nodes with children.*/
expanded?: boolean;
/** (optional) Defines whether the tree node is disabled.*/
disabled?: boolean;
/** (optional) Defines whether the tree node is selected by the user.*/
selected?: boolean;
/** (optional) Defines whether the tree node is highlighted.*/
highlighted?: boolean;
/** (optional) Defines whether the tree node is spotlight.*/
spotlighted?: boolean;
/** (optional) Defines whether the label should be displayed as tooltip.*/
showTooltip?: boolean;
/** (optional) Delay to show tooltip in milliseconds. */
tooltipDelay?: number;
/** (optional) Defines whether the tree node is loading. */
loading?: boolean;
/** (optional) Defines if the item click event should prevent default behaviour. */
preventDefault?: boolean;
/** (optional) Defines if icon to use for expanding, should be and arrow like icon pointing up. */
expandIcon?: EIconName;
/** Emitted when the expand toggle is clicked */
toggleExpand: EventEmitter<MouseEvent>;
/** Emitted when the tree item is clicked */
itemClick: EventEmitter<MouseEvent>;
/** Don't propagate the children click event */
itemClickHandler(event: MouseEvent): void;
/** Don't propagate the children toggle event */
toggleExpandHandler(event: MouseEvent): void;
el: HTMLKvTreeItemElement;
private toggleClickThrottler;
private itemClickThrottler;
private get hasChildrenSlot();
get requiresToggleButton(): boolean;
connectedCallback(): void;
private onItemClick;
render(): any;
}