@siemens/element-ng 47.3.0 → 47.5.0

package/tree-view/si-tree-view.component.d.ts

@@ -0,0 +1,466 @@
+import { AfterViewChecked, AfterViewInit, ElementRef, OnChanges, OnDestroy, OnInit, QueryList, SimpleChanges, TemplateRef } from '@angular/core';
+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 { Subject } from 'rxjs';
+import { SiTreeViewItemTemplateDirective } from './si-tree-view-item-template.directive';
+import { SiTreeViewItemComponent } from './si-tree-view-item/si-tree-view-item.component';
+import { CheckboxClickEventArgs, FolderStateEventArgs, ItemsVirtualizedArgs, LoadChildrenEventArgs, MenuItemsProvider, TreeItem, TreeViewIconSet } from './si-tree-view.model';
+import * as i0 from "@angular/core";
+/**
+ * Implements a tree view with the following main capabilities:
+ * Showing multiple trees. The data of the trees is set via the input property 'items'.
+ * Showing the trees in a flat mode with navigation/bread/crumb on top.
+ * A tree/list item is composed of a 'folder' icon, any item icon, the label, two additional datafields and a context menu button.
+ * Children of parent nodes are lazy loaded upon request (in case they are not yet available in model.)
+ * Context menu support via context menu item: the context menu items can be set via input properties.
+ * Multi selection and focus support.
+ * Checkboxes and / or option boxes per tree node.
+ * Virtualization support: Input properties allow to set the page size and the number of pages to be virtualized.
+ * Current limitation is roughly half a million of nodes. This is due to some 'strange' behavior with flex containers.
+ * Set the input properties 'pageSize' and 'pagesVirtualized' to a reasonable amount of virtualized items.
+ * The number of virtualized items is the product of the pageSize and the pagesVirtualized (no of pages virtualized).
+ * Choose a value in the area of 50 virtualized items, dependent on the screen size. Check at runtime if appropriate!
+ * Grouped List support: The component does also support grouped lists.
+ * See the test client implementation of this package for all functionality.
+ */
+export declare class SiTreeViewComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit, AfterViewChecked {
+    /**
+     * The context menu items which are bound to the context menu of all tree items,
+     * or a menu item provider function that is invoked for each tree item once.
+     *
+     * @defaultValue []
+     */
+    readonly contextMenuItems: import("@angular/core").InputSignal<MenuItemsProvider | (MenuItemLegacy | MenuItem)[]>;
+    /**
+     * The indentation in pixel for the children in respect to its parent.
+     *
+     * @defaultValue DEFAULT_CHILDREN_INDENTATION
+     */
+    readonly childrenIndentation: import("@angular/core").InputSignal<number>;
+    /**
+     * Enable horizontal scrolling. When disabled (the default), an ellipsis is used for overflowing text
+     *
+     * @defaultValue false
+     */
+    readonly horizontalScrolling: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Enable the compact mode, making it more vertically compact.
+     *
+     * @defaultValue false
+     */
+    readonly compactMode: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Enable buttons for collapse and expand all.
+     * Does not work when `flatTree` is enabled.
+     *
+     * @defaultValue false
+     */
+    readonly expandCollapseAll: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Tooltip text shown for the expand all icon.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_TREE_VIEW.EXPAND_ALL:Expand all`
+     * ```
+     */
+    readonly expandAllTooltip: import("@angular/core").InputSignal<TranslatableString>;
+    /**
+     * Tooltip text shown for the collapse all icon.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_TREE_VIEW.COLLAPSE_ALL:Collapse all`
+     * ```
+     */
+    readonly collapseAllTooltip: import("@angular/core").InputSignal<TranslatableString>;
+    /**
+     * Customize icons for treeview.
+     */
+    readonly icons: import("@angular/core").InputSignal<TreeViewIconSet | undefined>;
+    /**
+     * Track-by function for tree items. By default, items are tracked by their identity.
+     *
+     * @deprecated has no effect and will be removed
+     *
+     * @defaultValue
+     * ```
+     * buildTrackByIdentity<TreeItem>()
+     * ```
+     */
+    readonly trackByFunction: import("@angular/core").InputSignal<import("@angular/core").TrackByFunction<TreeItem<any>>>;
+    /**
+     * Number of rows per page. Used for the virtualization of rows (number of
+     * rows per page).
+     * @defaultValue 10
+     * @defaultref {@link SiTreeViewVirtualizationService#pageSize}
+     */
+    readonly pageSize: import("@angular/core").InputSignalWithTransform<number, number>;
+    /**
+     * Number of pages which are virtualized.
+     * @defaultValue 6
+     * @defaultref {@link SiTreeViewVirtualizationService#pagesVirtualized}
+     */
+    readonly pagesVirtualized: import("@angular/core").InputSignalWithTransform<number, number>;
+    /**
+     * Whether "filled" icons should not be used when a tree item is selected.
+     * Per default filled icons are used when available.
+     * @defaultValue false
+     */
+    readonly disableFilledIcons: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Sets if the folder state icon shall be shown on the left (in LTR) or on the right (in LTR) side
+     * of the tree item. Per default the icon will be shown on the left (in LTR). Has no
+     * effect if flatTree is enabled.
+     * @defaultValue true
+     */
+    readonly folderStateStart: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Sets if the tree list shall virtualize the tree items.
+     * This input field must be set at startup and shall not be changed afterwards.
+     * @defaultValue true
+     */
+    readonly isVirtualized: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Sets the root tree items of all the trees (Required).
+     * @defaultValue []
+     * @defaultref {@link _items}
+     */
+    readonly items: import("@angular/core").InputSignal<TreeItem<any>[]>;
+    /**
+     * Sets the tree item to be selected.
+     */
+    readonly selectedItem: import("@angular/core").InputSignal<TreeItem<any> | TreeItem<any>[] | undefined>;
+    /**
+     * Sets if the tree shall force single tree item selection.
+     * @defaultValue false
+     */
+    readonly singleSelectMode: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Shows or hides additional information below the label.
+     * @defaultValue false
+     */
+    readonly enableDataField1: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Shows or hides additional information below the label.
+     * @defaultValue false
+     * @defaultref {@link SiTreeViewService#enableDataField2}
+     */
+    readonly enableDataField2: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Shows or hides state pipe.
+     * @defaultValue true
+     */
+    readonly enableStateIndicator: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Shows or hides icon
+     * @defaultValue true
+     */
+    readonly enableIcon: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Shows or hides context menu button.
+     * @defaultValue true
+     * @defaultref {@link SiTreeViewService#enableContextMenuButton}
+     */
+    readonly enableContextMenuButton: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Allows / disabled selecting of tree items by clicking on them.
+     * @defaultValue false
+     */
+    readonly enableSelection: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Sets if children are deleted upon collapsing tree items. This feature might
+     * be used, if children shall be lazy loaded always upon expanding a tree
+     * item.
+     * @defaultValue false
+     */
+    readonly deleteChildrenOnCollapse: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Sets if the tree view shall be displayed as flat tree list with a
+     * breadcrumb. A flat tree only shows the one level at the time and lists the
+     * tree items of the current level as a list.
+     * @defaultValue false
+     * @defaultref {@link SiTreeViewService#flatTree}
+     */
+    readonly flatTree: import("@angular/core").InputSignal<boolean>;
+    /**
+     * Sets if the tree view is displayed as a grouped list.
+     * Important: In this mode, only the first two hierarchies of the tree model
+     * are considered!
+     * @defaultValue false
+     * @defaultref {@link SiTreeViewService#groupedList}
+     */
+    readonly groupedList: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Sets if the tree items shall show a checkbox.
+     * @defaultValue false
+     * @defaultref {@link SiTreeViewService#enableCheckbox}
+     */
+    readonly enableCheckbox: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Sets if the tree items shall show an optionbox.
+     * @defaultValue false
+     */
+    readonly enableOptionbox: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Sets if the tree items should expand/collapse when clicking on them.
+     * Does not work when `flatTree` is enabled or the tree item is not selectable.
+     * @defaultValue false
+     */
+    readonly expandOnClick: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Sets if the checkbox state of a tree item is inherited to its children/parent.
+     * @defaultValue true
+     */
+    readonly inheritChecked: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * String to be shown when there are no content actions.
+     *
+     * @defaultValue 'No actions available'
+     */
+    readonly noActionsString: import("@angular/core").InputSignal<string>;
+    /** Aria label for the tree view. Needed for a11y, alternatively use {@link ariaLabelledBy}. */
+    readonly ariaLabel: import("@angular/core").InputSignal<TranslatableString | undefined>;
+    /** Aria labelled by for the tree view. Needed for a11y, alternatively use {@link ariaLabel}. */
+    readonly ariaLabelledBy: import("@angular/core").InputSignal<string | undefined>;
+    /**
+     * Triggered upon virtualization (or unvirtualization) of a tree item.
+     */
+    readonly itemsVirtualizedChanged: import("@angular/core").OutputEmitterRef<ItemsVirtualizedArgs>;
+    /**
+     * Triggered upon clicking the folder of a tree item.
+     */
+    readonly treeItemFolderClicked: import("@angular/core").OutputEmitterRef<FolderStateEventArgs>;
+    /**
+     * Triggered upon a state change of the folder of a tree item.
+     */
+    readonly treeItemFolderStateChanged: import("@angular/core").OutputEmitterRef<FolderStateEventArgs>;
+    /**
+     * Triggered upon clicking the label of a tree item.
+     */
+    readonly treeItemClicked: import("@angular/core").OutputEmitterRef<TreeItem<any>>;
+    /**
+     * Triggered upon clicking the checkbox of a tree item.
+     */
+    readonly treeItemCheckboxClicked: import("@angular/core").OutputEmitterRef<CheckboxClickEventArgs>;
+    /**
+     * Triggered upon the request of loading the children of a tree item.
+     */
+    readonly loadChildren: import("@angular/core").OutputEmitterRef<LoadChildrenEventArgs>;
+    /**
+     * Triggered upon the selection of a tree item (multi selection supported).
+     */
+    readonly treeItemsSelected: import("@angular/core").OutputEmitterRef<TreeItem<any>[]>;
+    /**
+     * The injected content with included SiTreeViewItemTemplateDirective.
+     */
+    templates: QueryList<SiTreeViewItemTemplateDirective>;
+    private initialized;
+    private updateTreeItemHeightRequired;
+    private updateGroupItemHeightRequired;
+    private selectedTreeItems;
+    private manuallySelectedTreeItems;
+    private latestFolderChanged?;
+    private breadCrumbTreeItems;
+    private subscriptions;
+    private multiSelectionStart;
+    private _multiSelectionActive;
+    private domChangeObserver?;
+    private scroll$;
+    private element;
+    private siTreeViewService;
+    private siTreeViewConverterService;
+    private siTreeViewVirtualizationService;
+    private siTreeViewItemHeightService;
+    private cdRef;
+    private resizeObserver;
+    /**
+     * Create a virtual root node so there is just a single root node. This makes sure the tree
+     * can be fully traversed starting from any node. This is needed e.g. for recursively
+     * removing the "active" state from other nodes.
+     */
+    private virtualRoot;
+    private readonly _items;
+    private updateTreeItemDefaults;
+    /**
+     * @internal
+     */
+    readonly computedIcons: import("@angular/core").Signal<{
+        headerHome: string;
+        headerArrow: string;
+        itemMenu: string;
+        itemCollapsed: string;
+        itemCollapsedFlat: string;
+        itemCollapsedLeft: string;
+        itemExpanded: string;
+        itemExpandedFlat: string;
+        itemExpandedLeft: string;
+    }>;
+    /** @internal */
+    scrollChildIntoView: Subject<TreeItem>;
+    /** @internal */
+    childrenLoaded: Subject<TreeItem>;
+    /**
+     * @internal
+     * Used internally by `SiTreeViewItemDirective` to determine if the items have changed,
+     * and render the new items.
+     */
+    evaluateForTreeItemsDiffer: Subject<void>;
+    /** @internal */
+    hasAnyChildren: boolean;
+    /**
+     * Gets the height of the div above the virtualized rows.
+     */
+    protected get heightBefore(): string;
+    /**
+     * Gets the height of the div below the virtualized rows.
+     */
+    protected get heightAfter(): string;
+    /**
+     * @internal
+     * This is meant to be used for internal purpose.
+     * Returns the virtualized items in the tree list uses virtualization, otherwise all items are returned as a flat list.
+     * Bind these to the HTML.
+     */
+    get itemsVirtualized(): TreeItem[];
+    protected children: QueryList<SiTreeViewItemComponent>;
+    protected treeItemContentTemplate: TemplateRef<any>;
+    private nextItmes;
+    private keyManager;
+    /**
+     * @internal
+     * Returns index of the currently active Tree Item element in DOM
+     * or null if there is no active tree item element
+     */
+    get activeIndex(): number | null;
+    /** Can be used for [cdkDropListData] when using cdk drag and drop. */
+    get dropListItems(): TreeItem[];
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngAfterViewChecked(): void;
+    ngOnDestroy(): void;
+    /**
+     * Returns the last breadcrumb tree item. Can be null in case the flat tree
+     * shows the root.
+     */
+    protected get lastBreadCrumbItem(): TreeItem | null;
+    /**
+     * Returns true if the header shows the root/home of the tree.
+     */
+    protected get headerShowsRoot(): boolean;
+    /**
+     * Called by the owner of the tree upon returning the retrieved children of a
+     * 'load children' request.
+     */
+    private childrenLoadingDone;
+    protected onFlatTreeNavigateUp(): void;
+    protected onFlatTreeNavigateHome(): void;
+    private getChildren;
+    private focusItem;
+    private focusParentItem;
+    private focusFirstChildItem;
+    /**
+     * Updates the tree to visualize the provided tree item by expanding all its parent items, collapsing all
+     * other first level tree items and scroll to the provided item.
+     * @param item - The tree item that shall be visible.
+     */
+    showTreeItem(item: TreeItem): void;
+    private doShowTreeItem;
+    /**
+     * Expands all tree items.
+     * @param items - Optional param for recursion, will expand these items. If empty, all tree items will be expanded.
+     */
+    expandAll(items?: TreeItem[]): void;
+    /**
+     * Expands the provided tree item.
+     * @param item - The tree item to be expanded.
+     */
+    expandTreeItem(item: TreeItem): void;
+    /**
+     * Collapses all tree items.
+     * @param items - Optional param for recursion, will collapse these items. If empty, all tree items will be collapsed.
+     */
+    collapseAll(items?: TreeItem[]): void;
+    /**
+     * Collapses the provided tree item.
+     * @param item - The tree item to be collapsed.
+     */
+    collapseTreeItem(item: TreeItem): void;
+    /**
+     * Add tree items as root elements or as children of an existing tree item.
+     * @param children - Tree items to add.
+     * @param parent - Optional parent tree item to which the items shall be added.
+     * @param position - Optional position where to insert the tree items among their siblings.
+     */
+    addChildItems(children: TreeItem[], parent?: TreeItem, position?: number): void;
+    /**
+     * Forces a refresh of the view considering the current tree item model. Needs
+     * to be called when tree items have been added, removed, or updated via model
+     * in ways that do not trigger an automatic update of the view.
+     */
+    refresh(): void;
+    /**
+     * Scrolls the specified tree item into view. Tree items will be expanded if
+     * required.
+     */
+    scrollItemIntoView(treeItem: TreeItem): void;
+    private evalListItemsForFlatTreeMode;
+    private collapseChildrenFlatTreeModeOnly;
+    private collapseChildren;
+    protected onKeyUpShift(): void;
+    protected onKeyUpCtrl(): void;
+    protected onKeyUpMeta(): void;
+    protected onMouseLeave(): void;
+    protected handleKeydown(event: KeyboardEvent): void;
+    private onItemClicked;
+    private emitSelectedItems;
+    private handleTreeMode;
+    private evalLowestBreadCrumbNode;
+    protected treeViewInnerElement: ElementRef<HTMLDivElement>;
+    private onItemFolderClicked;
+    private updateBreadCrumb;
+    private pushParentItemsIntoBreadCrumbRecursive;
+    private onItemCheckboxClicked;
+    private onLoadChildren;
+    private setFlatTreeSelectedFolder;
+    private onBreadCrumbItemClicked;
+    private onScroll;
+    /**
+     * Called by the consumer when he wants a node to be scrolled into view.
+     */
+    private onScrollIntoViewByConsumer;
+    private onScrollIntoView;
+    private fillFlattenedTree;
+    private focusFirstItemFlattened;
+    private updateHasChildren;
+    protected updateVirtualizedItemList(): void;
+    private resetVirtualizedItemList;
+    /**
+     * Track class changes since adding classes like `.tree-sm` or `.tree-xs` change the item height.
+     * Changes have to trigger the SiTreeViewItemHeightService otherwise the virtualized items are
+     * calculated incorrectly which cause rendering issues.
+     */
+    private addClassObserver;
+    /**
+     * Create an observable to track visible dimensions and item height of the tree view.
+     * It's necessary to dynamically increase the `pageSize` to render the correct amount
+     * of visible tree items.
+     * @returns observable with the current tree dimensions.
+     */
+    private monitorTreeSizeChanges;
+    /**
+     * Dynamically calculate and update the virtual pageSize to render the correct amount of tree items.
+     * @param dimension - current tree dimensions.
+     */
+    private updatePageSize;
+    /**
+     * Make sure to always have a single item for single selection or if there is only one item in the array.
+     */
+    private coerceToSelectionType;
+    private treeItemsUpdated;
+    private selectTreeItems;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiTreeViewComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiTreeViewComponent, "si-tree-view", never, { "contextMenuItems": { "alias": "contextMenuItems"; "required": false; "isSignal": true; }; "childrenIndentation": { "alias": "childrenIndentation"; "required": false; "isSignal": true; }; "horizontalScrolling": { "alias": "horizontalScrolling"; "required": false; "isSignal": true; }; "compactMode": { "alias": "compactMode"; "required": false; "isSignal": true; }; "expandCollapseAll": { "alias": "expandCollapseAll"; "required": false; "isSignal": true; }; "expandAllTooltip": { "alias": "expandAllTooltip"; "required": false; "isSignal": true; }; "collapseAllTooltip": { "alias": "collapseAllTooltip"; "required": false; "isSignal": true; }; "icons": { "alias": "icons"; "required": false; "isSignal": true; }; "trackByFunction": { "alias": "trackByFunction"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pagesVirtualized": { "alias": "pagesVirtualized"; "required": false; "isSignal": true; }; "disableFilledIcons": { "alias": "disableFilledIcons"; "required": false; "isSignal": true; }; "folderStateStart": { "alias": "folderStateStart"; "required": false; "isSignal": true; }; "isVirtualized": { "alias": "isVirtualized"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "selectedItem": { "alias": "selectedItem"; "required": false; "isSignal": true; }; "singleSelectMode": { "alias": "singleSelectMode"; "required": false; "isSignal": true; }; "enableDataField1": { "alias": "enableDataField1"; "required": false; "isSignal": true; }; "enableDataField2": { "alias": "enableDataField2"; "required": false; "isSignal": true; }; "enableStateIndicator": { "alias": "enableStateIndicator"; "required": false; "isSignal": true; }; "enableIcon": { "alias": "enableIcon"; "required": false; "isSignal": true; }; "enableContextMenuButton": { "alias": "enableContextMenuButton"; "required": false; "isSignal": true; }; "enableSelection": { "alias": "enableSelection"; "required": false; "isSignal": true; }; "deleteChildrenOnCollapse": { "alias": "deleteChildrenOnCollapse"; "required": false; "isSignal": true; }; "flatTree": { "alias": "flatTree"; "required": false; "isSignal": true; }; "groupedList": { "alias": "groupedList"; "required": false; "isSignal": true; }; "enableCheckbox": { "alias": "enableCheckbox"; "required": false; "isSignal": true; }; "enableOptionbox": { "alias": "enableOptionbox"; "required": false; "isSignal": true; }; "expandOnClick": { "alias": "expandOnClick"; "required": false; "isSignal": true; }; "inheritChecked": { "alias": "inheritChecked"; "required": false; "isSignal": true; }; "noActionsString": { "alias": "noActionsString"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; }, { "itemsVirtualizedChanged": "itemsVirtualizedChanged"; "treeItemFolderClicked": "treeItemFolderClicked"; "treeItemFolderStateChanged": "treeItemFolderStateChanged"; "treeItemClicked": "treeItemClicked"; "treeItemCheckboxClicked": "treeItemCheckboxClicked"; "loadChildren": "loadChildren"; "treeItemsSelected": "treeItemsSelected"; }, ["treeItemContentTemplate", "templates", "nextItmes"], ["[cdkDropList], [siTreeViewItem]"], true, never>;
+}

package/tree-view/si-tree-view.model.d.ts

@@ -0,0 +1,146 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+import { MenuItem as MenuItemLegacy } from '@siemens/element-ng/common';
+import { MenuItem } from '@siemens/element-ng/menu';
+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?: string;
+    /**
+     * The text shown for the tree item data field 2.
+     */
+    dataField2?: string;
+    /**
+     * 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?: string;
+    /**
+     * 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 declare class FolderStateEventArgs {
+    treeItem: TreeItem;
+    oldState: TreeItemFolderState;
+    newState: TreeItemFolderState;
+    constructor(treeItem: TreeItem, oldState: TreeItemFolderState, newState: TreeItemFolderState);
+}
+export declare class CheckboxClickEventArgs {
+    target: TreeItem;
+    oldState: CheckboxState;
+    newState: CheckboxState;
+    constructor(target: TreeItem, oldState: CheckboxState, newState: CheckboxState);
+}
+export declare class ClickEventArgs {
+    target: TreeItem;
+    mouseEvent: MouseEvent | KeyboardEvent;
+    constructor(target: TreeItem, mouseEvent: MouseEvent | KeyboardEvent);
+}
+export declare class LoadChildrenEventArgs {
+    treeItem: TreeItem;
+    callback: (treeItem: TreeItem, children: TreeItem[]) => void;
+    constructor(treeItem: TreeItem, callback: (treeItem: TreeItem, children: TreeItem[]) => void);
+}
+export declare class ItemsVirtualizedArgs {
+    treeItems: TreeItem[];
+    virtualized: boolean;
+    constructor(treeItems: TreeItem[], virtualized: boolean);
+}
+export declare const DEFAULT_TREE_ICON_SET: TreeViewIconSet;
+export declare const DEFAULT_CHILDREN_INDENTATION = 14;
+export type TreeItemContext = {
+    treeItem: TreeItem;
+    index: number;
+    parent: SiTreeViewComponent;
+};

package/tree-view/si-tree-view.module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./si-tree-view.component";
+import * as i2 from "./si-tree-view-item/si-tree-view-item.component";
+import * as i3 from "./si-tree-view-item/si-tree-view-item.directive";
+import * as i4 from "./si-tree-view-item-template.directive";
+export declare class SiTreeViewModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiTreeViewModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SiTreeViewModule, never, [typeof i1.SiTreeViewComponent, typeof i2.SiTreeViewItemComponent, typeof i3.SiTreeViewItemDirective, typeof i4.SiTreeViewItemTemplateDirective], [typeof i1.SiTreeViewComponent, typeof i2.SiTreeViewItemComponent, typeof i3.SiTreeViewItemDirective, typeof i4.SiTreeViewItemTemplateDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SiTreeViewModule>;
+}

package/tree-view/si-tree-view.service.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+import { ElementRef } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import { CheckboxClickEventArgs, ClickEventArgs, FolderStateEventArgs, TreeItem } from './si-tree-view.model';
+import * as i0 from "@angular/core";
+/**
+ * Supports communication between the TreeViewComponent and the TreeViewItemComponent and the services.
+ * Stores tree specific settings.
+ * One instance per TreeViewComponent exists.
+ */
+export declare class SiTreeViewService {
+    /** Emits when a tree item is clicked. */
+    clickEvent: Subject<ClickEventArgs>;
+    /** Emits when a folder item is clicked. */
+    folderClickEvent: Subject<FolderStateEventArgs>;
+    /** Emits when checkbox is clicked. */
+    checkboxClickEvent: Subject<CheckboxClickEventArgs>;
+    /** Emits when on tree item expansion to load child items. */
+    loadChildrenEvent: Subject<TreeItem>;
+    /** Emits when the consumer want a node to be scrolled into view. */
+    scrollIntoViewEvent: Subject<ElementRef>;
+    /** Emits when the parent shall become focused. */
+    focusParentEvent: Subject<TreeItem>;
+    /** Emits when the child shall become focused. */
+    focusFirstChildEvent: Subject<TreeItem>;
+    /**
+     * Shows or hides context menu button.
+     *
+     * @defaultValue true
+     */
+    enableContextMenuButton: boolean;
+    /**
+     * Child padding in pixel (px).
+     *
+     * @defaultValue 14
+     */
+    childrenIndentation: number;
+    /**
+     * Visualize tree as grouped list, the child padding will have no effect.
+     *
+     * @defaultValue false
+     */
+    groupedList: boolean;
+    /** @internal */
+    triggerMarkForCheck: Subject<void>;
+    /** @internal */
+    scroll$: Observable<Event>;
+    /** Indicate whether item is a group item. */
+    isGroupedItem(item: TreeItem): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiTreeViewService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SiTreeViewService>;
+}