Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 | 35x 35x 35x 5x 5x 5x 23x 23x 3x 3x 162x 162x 1x 1x | /**
* Copyright (c) Siemens 2016 - 2025
* SPDX-License-Identifier: MIT
*/
import { MenuItem as MenuItemLegacy } from '@siemens/element-ng/common';
import { MenuItem } from '@siemens/element-ng/menu';
import { TranslatableString } from '@siemens/element-translate-ng/translate';
import { Observable } from 'rxjs';
import type { SiTreeViewComponent } from './si-tree-view.component';
/**
* The folder state of a tree item.
*/
export type TreeItemFolderState = 'collapsed' | 'expanding' | 'expanded' | 'leaf';
/**
* The check box state of a tree item.
*/
export type CheckboxState = 'unchecked' | 'checked' | 'indeterminate';
export type MenuItemsProvider = (
item: TreeItem
) => (MenuItemLegacy | MenuItem)[] | Observable<(MenuItemLegacy | MenuItem)[]> | null;
/**
* Defines the data for a tree item. All properties are optional.
*/
export interface TreeItem<T = any> {
/**
* Indicates if the item is active, the last clicked item is active always; only one item can be active.
*/
active?: boolean;
/**
* Defines the content of the optional badge. Should be a number or something like "100+".
* If undefined or empty string, no badge is displayed.
*/
badge?: string | number;
/**
* Defines the background color of the badge. Use the status color names as
* inputs.
* @see https://element.siemens.io/components/status-notifications/badges/
*/
badgeColor?: string;
/**
* The state of the checkbox/optionbox.
*/
checked?: CheckboxState;
/**
* The child tree items.
*/
children?: TreeItem<T>[];
/**
* Any custom data that can be used in custom templates. Not shown by default.
*/
customData?: T;
/**
* The text shown for the tree item data field 1.
*/
dataField1?: TranslatableString;
/**
* The text shown for the tree item data field 2.
*/
dataField2?: TranslatableString;
/**
* The hierarchy level of the node. This will be auto-calculated by the tree view control.
*/
level?: number;
/**
* The web font icon class name (e.g. element-building). The icon is shown on the left (in LTR) side of the label.
*/
icon?: string;
/**
* The text shown for the tree item label (header).
*/
label?: TranslatableString;
/**
* The parent tree item. This will be automatically set by the tree view control.
*/
parent?: TreeItem<T>;
/**
* Indicates if the tree item is selectable or not.
*/
selectable?: boolean;
/**
* If the item is selected (note that the tree view component supports single and multi-selection).
*/
selected?: boolean;
/**
* If the tree item shall show a checkbox.
*/
showCheckbox?: boolean;
/**
* If the tree item shall show an optionbox.
*/
showOptionbox?: boolean;
/**
* The folder state of the tree item.
*/
state?: TreeItemFolderState;
/**
* The color of the state pipe; formatted as CSS value ('red' or '#FF0000' or 'rgb(255, 0, 0)').
*/
stateIndicatorColor?: string;
/**
* The name of the template to apply.
*/
templateName?: string;
}
export interface TreeViewIconSet {
headerHome: string;
headerArrow: string;
itemMenu: string;
itemCollapsed: string;
itemCollapsedFlat: string;
itemCollapsedLeft: string;
itemExpanded: string;
itemExpandedFlat: string;
itemExpandedLeft: string;
}
export class FolderStateEventArgs {
constructor(
public treeItem: TreeItem,
public oldState: TreeItemFolderState,
public newState: TreeItemFolderState
) {}
}
export class CheckboxClickEventArgs {
public constructor(
public target: TreeItem,
public oldState: CheckboxState,
public newState: CheckboxState
) {}
}
export class ClickEventArgs {
public constructor(
public target: TreeItem,
public mouseEvent: MouseEvent | KeyboardEvent
) {}
}
export class LoadChildrenEventArgs {
public constructor(
public treeItem: TreeItem,
public callback: (treeItem: TreeItem, children: TreeItem[]) => void
) {}
}
export class ItemsVirtualizedArgs {
public constructor(
public treeItems: TreeItem[],
public virtualized: boolean
) {}
}
export const DEFAULT_TREE_ICON_SET: TreeViewIconSet = {
headerHome: 'element-home',
headerArrow: 'element-left-2 flip-rtl',
itemMenu: 'element-options-vertical',
itemCollapsed: 'element-down-2',
itemCollapsedFlat: 'element-right-2 flip-rtl',
itemCollapsedLeft: 'element-right-2 flip-rtl',
itemExpanded: 'element-up-2',
itemExpandedFlat: 'element-down-3',
itemExpandedLeft: 'element-down-2'
};
export const DEFAULT_CHILDREN_INDENTATION = 14;
export type TreeItemContext = {
treeItem: TreeItem;
index: number;
parent: SiTreeViewComponent;
};
|