@siemens/element-ng 47.3.0 → 47.5.0

package/fesm2022/siemens-element-ng-tree-view.mjs

@@ -0,0 +1,2936 @@
+import * as i0 from '@angular/core';
+import { input, inject, TemplateRef, Directive, InjectionToken, Injectable, ElementRef, ChangeDetectorRef, signal, computed, HostListener, HostBinding, ViewChild, Component, EventEmitter, ViewContainerRef, IterableDiffers, Injector, booleanAttribute, output, ContentChildren, ContentChild, ViewChildren, NgModule } from '@angular/core';
+import { CdkContextMenuTrigger, CdkMenuTrigger } from '@angular/cdk/menu';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { correctKeyRTL, buildTrackByIdentity } from '@siemens/element-ng/common';
+import { SiLoadingSpinnerComponent } from '@siemens/element-ng/loading-spinner';
+import { SiMenuFactoryComponent } from '@siemens/element-ng/menu';
+import * as i1 from '@siemens/element-translate-ng/translate';
+import { SiTranslateModule } from '@siemens/element-translate-ng/translate';
+import { Subject, asyncScheduler, defer, fromEvent, merge } from 'rxjs';
+import { takeUntil, take, withLatestFrom, map } from 'rxjs/operators';
+import { FocusKeyManager } from '@angular/cdk/a11y';
+import * as i2 from '@angular/cdk/scrolling';
+import { CdkScrollableModule } from '@angular/cdk/scrolling';
+import { ResizeObserverService } from '@siemens/element-ng/resize-observer';
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiTreeViewItemTemplateDirective {
+    /** @defaultValue undefined */
+    name = input(undefined, { alias: 'siTreeViewItemTemplate' });
+    /** @internal */
+    template = inject((TemplateRef));
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTreeViewItemTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: SiTreeViewItemTemplateDirective, isStandalone: true, selector: "[siTreeViewItemTemplate]", inputs: { name: { classPropertyName: "name", publicName: "siTreeViewItemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTreeViewItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[siTreeViewItemTemplate]'
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+const TREE_ITEM_CONTEXT = new InjectionToken('TREE_ITEM_CONTEXT');
+
+class FolderStateEventArgs {
+    treeItem;
+    oldState;
+    newState;
+    constructor(treeItem, oldState, newState) {
+        this.treeItem = treeItem;
+        this.oldState = oldState;
+        this.newState = newState;
+    }
+}
+class CheckboxClickEventArgs {
+    target;
+    oldState;
+    newState;
+    constructor(target, oldState, newState) {
+        this.target = target;
+        this.oldState = oldState;
+        this.newState = newState;
+    }
+}
+class ClickEventArgs {
+    target;
+    mouseEvent;
+    constructor(target, mouseEvent) {
+        this.target = target;
+        this.mouseEvent = mouseEvent;
+    }
+}
+class LoadChildrenEventArgs {
+    treeItem;
+    callback;
+    constructor(treeItem, callback) {
+        this.treeItem = treeItem;
+        this.callback = callback;
+    }
+}
+class ItemsVirtualizedArgs {
+    treeItems;
+    virtualized;
+    constructor(treeItems, virtualized) {
+        this.treeItems = treeItems;
+        this.virtualized = virtualized;
+    }
+}
+const DEFAULT_TREE_ICON_SET = {
+    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'
+};
+const DEFAULT_CHILDREN_INDENTATION = 14;
+
+const ROOT_LEVEL = -1;
+const childrenLoaded = (item) => (item.children?.length ?? 0) > 0;
+const hasChildren = (item) => item.state !== 'leaf';
+const removeUndefinedState = (state) => state ?? 'collapsed';
+/**
+ * Collapses the tree item except for leaf items.
+ */
+const collapse = (item) => {
+    if (item?.state !== 'leaf') {
+        item.state = 'collapsed';
+    }
+};
+/**
+ * Expands the tree item except for leaf items.
+ */
+const expand = (item) => {
+    if (item?.state !== 'leaf') {
+        item.state = 'expanded';
+    }
+};
+const expandRecursive = (item) => {
+    if (item.parent) {
+        expand(item.parent);
+        expandRecursive(item.parent);
+    }
+};
+const boxClicked = (treeItem, inheritChecked) => {
+    if (treeItem.showCheckbox) {
+        treeItem.checked = treeItem.checked === 'checked' ? 'unchecked' : 'checked';
+        if (inheritChecked) {
+            checkAllChildren(treeItem, treeItem.checked);
+            updateCheckStateOfParents(treeItem);
+        }
+    }
+    if (treeItem.showOptionbox && treeItem.checked === 'unchecked') {
+        treeItem.parent?.children?.forEach(item => (item.checked = 'unchecked'));
+        treeItem.checked = 'checked';
+    }
+};
+/**
+ * Changes the folder state to a new state based on the old state.
+ * If a client calls this method, the same is responsible to load the children in case the new state is 'expanding'!!!
+ *
+ * @param deleteChildrenOnCollapse - If set to true, the children are deleted upon collapsing the item.
+ */
+const doFolderStateChange = (item, deleteChildrenOnCollapse, newState) => {
+    if (item?.state === 'collapsed' && (!newState || newState === 'expanded')) {
+        item.state = childrenLoaded(item) ? 'expanded' : 'expanding';
+    }
+    else if (item?.state === 'expanding' && (!newState || newState === 'collapsed')) {
+        item.state = 'collapsed';
+    }
+    else if (item?.state === 'expanded' && (!newState || newState === 'collapsed')) {
+        if (deleteChildrenOnCollapse) {
+            item.children = [];
+        }
+        item.state = 'collapsed';
+    }
+};
+const enableCheckboxRecursive = (item, enable) => {
+    item.showCheckbox = enable;
+    if (childrenLoaded(item)) {
+        item.children?.forEach(child => enableCheckboxRecursive(child, enable));
+    }
+};
+const enableOptionboxRecursive = (item, enable) => {
+    item.showOptionbox = enable;
+    if (childrenLoaded(item)) {
+        item.children?.forEach(child => enableOptionboxRecursive(child, enable));
+    }
+};
+const parentCountRecursive = (item, stackLevel) => {
+    if (item?.parent && item.parent.level !== ROOT_LEVEL) {
+        return parentCountRecursive(item.parent, stackLevel + 1);
+    }
+    return stackLevel;
+};
+const selectItemsBetween = (roots, start, end) => {
+    if (start === end) {
+        return;
+    }
+    const foundItems = [];
+    const inBetweenState = { startIsFirst: false, inBetween: false, done: false };
+    for (const root of roots) {
+        getItemsBetweenRecursive(foundItems, root, start, end, inBetweenState);
+        if (inBetweenState.done) {
+            break;
+        }
+    }
+    foundItems.forEach(item => {
+        if (item.selectable) {
+            item.selected = true;
+        }
+    });
+    return foundItems;
+};
+const selectRecursive = (item, select) => {
+    if (item.selectable) {
+        item.selected = select;
+    }
+    if (childrenLoaded(item)) {
+        item.children?.forEach(child => selectRecursive(child, select));
+    }
+};
+const setBoxStateRecursive = (item, state) => {
+    item.checked = state;
+    if (childrenLoaded(item)) {
+        item.children?.forEach(child => setBoxStateRecursive(child, state));
+    }
+};
+/**
+ * Sets the item to be active or not; all other items of the tree are reset.
+ */
+const setActive = (item, active) => {
+    const getRoot = (treeItem) => treeItem.parent ? getRoot(treeItem.parent) : treeItem;
+    resetActive(getRoot(item));
+    item.active = active;
+};
+const resetActive = (item) => {
+    item.active = false;
+    if (childrenLoaded(item)) {
+        item.children?.forEach(childItem => resetActive(childItem));
+    }
+};
+/**
+ * Sets the treeItem as selectable or not
+ */
+const setSelectable = (item, selectable) => {
+    item.selectable = selectable;
+    if (item.selected && !item.selectable) {
+        item.selected = selectable;
+    }
+};
+const deleteItem = (item) => {
+    if (item.parent) {
+        const idx = item.parent.children?.indexOf(item) ?? -1;
+        if (idx < 0) {
+            return;
+        }
+        item.parent.children?.splice(idx, 1);
+    }
+};
+const addChildItem = (parent, child, position, callback) => {
+    addChildItems(parent, [child], position, callback);
+};
+const addChildItems = (parent, children, position, callback) => {
+    const itemCount = parent.children?.length ?? 0;
+    position ??= itemCount;
+    // Negative position insert items counting from the last item
+    if (position < 0) {
+        position = itemCount + (position % itemCount);
+    }
+    initializeTreeItemsRecursive(children, parent, callback);
+    if (!parent.children) {
+        parent.children = [];
+        parent.children.push(...children);
+        return;
+    }
+    if (position >= parent.children.length) {
+        parent.children.push(...children);
+        return;
+    }
+    parent.children.splice(position, 0, ...children);
+};
+const initializeTreeItemsRecursive = (items, parent, callback) => {
+    const level = (parent.level ?? -1) + 1;
+    for (const item of items) {
+        item.parent = parent;
+        item.level = level;
+        setTreeItemDefaults(item, callback);
+        if (item.children?.length) {
+            initializeTreeItemsRecursive(item.children, item, callback);
+        }
+    }
+};
+const setTreeItemDefaults = (item, callback) => {
+    item.children ??= [];
+    item.state ??= 'collapsed';
+    item.active ??= false;
+    item.checked ??= 'unchecked';
+    item.selected ??= false;
+    item.selectable ??= true;
+    if (callback) {
+        callback(item);
+    }
+};
+const checkAllChildren = (treeItem, check) => {
+    if (childrenLoaded(treeItem)) {
+        treeItem.children?.forEach(item => {
+            item.checked = check;
+            checkAllChildren(item, check);
+        });
+    }
+};
+const getItemsBetweenRecursive = (found, current, start, end, inBetweenState) => {
+    if (inBetweenState.done) {
+        return;
+    }
+    if (current === start && !inBetweenState.inBetween) {
+        // This is the first found tree item within the selection, the start tree item (the item which is clicked first) is ordered
+        // before the end tree item (the item which is clicked second).
+        // The recursive function is from now on handling tree node which are in between the two selections.
+        // Note, we don't need to select it, as it is already selected with previous click
+        inBetweenState.startIsFirst = true;
+        inBetweenState.inBetween = true;
+    }
+    else if (current === end && !inBetweenState.inBetween) {
+        // This is the first found tree item within the selection, the end tree item (the item which is clicked second) is ordered
+        // before the start tree item (the item which is clicked first).
+        // The recursive function is from now on handling tree node which are in between the two selections.
+        inBetweenState.startIsFirst = false;
+        inBetweenState.inBetween = true;
+        found.push(current);
+    }
+    else if (current === end && inBetweenState.inBetween) {
+        found.push(current);
+        inBetweenState.inBetween = false;
+        inBetweenState.done = true;
+        return; // the end of the search
+    }
+    else if (current === start && inBetweenState.inBetween) {
+        inBetweenState.inBetween = false;
+        inBetweenState.done = true;
+        return; // the end of the search
+    }
+    else if (inBetweenState.inBetween) {
+        found.push(current);
+    }
+    if (current.state === 'expanded') {
+        current.children?.forEach(item => getItemsBetweenRecursive(found, item, start, end, inBetweenState));
+    }
+};
+const updateCheckStateOfParents = (treeItem) => {
+    if (treeItem.parent) {
+        let allChecked = true;
+        let allUnchecked = true;
+        for (const item of treeItem.parent?.children ?? []) {
+            if (item.checked === 'indeterminate') {
+                treeItem.parent.checked = 'indeterminate';
+                updateCheckStateOfParents(treeItem.parent);
+                return;
+            }
+            if (item.checked === 'checked') {
+                allUnchecked = false;
+            }
+            if (item.checked === 'unchecked') {
+                allChecked = false;
+            }
+            if (!allChecked && !allUnchecked) {
+                treeItem.parent.checked = 'indeterminate';
+                updateCheckStateOfParents(treeItem.parent);
+                return;
+            }
+        }
+        if (allChecked) {
+            treeItem.parent.checked = 'checked';
+        }
+        else {
+            treeItem.parent.checked = 'unchecked';
+        }
+        updateCheckStateOfParents(treeItem.parent);
+    }
+};
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Supports communication between the TreeViewComponent and the TreeViewItemComponent and the services.
+ * Stores tree specific settings.
+ * One instance per TreeViewComponent exists.
+ */
+class SiTreeViewService {
+    /** Emits when a tree item is clicked. */
+    clickEvent = new Subject();
+    /** Emits when a folder item is clicked. */
+    folderClickEvent = new Subject();
+    /** Emits when checkbox is clicked. */
+    checkboxClickEvent = new Subject();
+    /** Emits when on tree item expansion to load child items. */
+    loadChildrenEvent = new Subject();
+    /** Emits when the consumer want a node to be scrolled into view. */
+    scrollIntoViewEvent = new Subject();
+    /** Emits when the parent shall become focused. */
+    focusParentEvent = new Subject();
+    /** Emits when the child shall become focused. */
+    focusFirstChildEvent = new Subject();
+    /**
+     * Shows or hides context menu button.
+     *
+     * @defaultValue true
+     */
+    enableContextMenuButton = true;
+    /**
+     * Child padding in pixel (px).
+     *
+     * @defaultValue 14
+     */
+    childrenIndentation = 14;
+    /**
+     * Visualize tree as grouped list, the child padding will have no effect.
+     *
+     * @defaultValue false
+     */
+    groupedList = false;
+    /** @internal */
+    triggerMarkForCheck = new Subject();
+    /** @internal */
+    scroll$;
+    /** Indicate whether item is a group item. */
+    isGroupedItem(item) {
+        return (!item.parent || item.parent.level === ROOT_LEVEL) && this.groupedList;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTreeViewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTreeViewService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTreeViewService, decorators: [{
+            type: Injectable
+        }] });
+
+class SiTreeViewItemComponent {
+    element = inject(ElementRef);
+    siTreeViewService = inject(SiTreeViewService);
+    cdRef = inject(ChangeDetectorRef);
+    treeItemContext = inject(TREE_ITEM_CONTEXT);
+    treeViewComponent = this.treeItemContext.parent;
+    /** @internal */
+    treeItem = this.treeItemContext.record.item;
+    scrollIntoView = this.treeViewComponent.scrollChildIntoView;
+    childrenLoaded = this.treeViewComponent.childrenLoaded;
+    templates = this.treeViewComponent.templates;
+    _contextMenuItems = this.treeViewComponent.contextMenuItems;
+    contextMenuItems = signal([]);
+    isContextMenuButtonVisible = computed(() => {
+        return (this.enableContextMenuButton() &&
+            !!this._contextMenuItems() &&
+            !!this.contextMenuItems()?.length);
+    });
+    stickyEndItems = this.treeViewComponent.horizontalScrolling;
+    displayFolderState = this.treeViewComponent.hasAnyChildren;
+    icons = this.treeViewComponent.computedIcons;
+    savedElement;
+    subscriptions = [];
+    indentLevel = this.treeItem.level ?? 0;
+    nextSiblingElement;
+    menuTrigger;
+    get ariaLevel() {
+        return (this.treeItem.level ?? 0) + 1;
+    }
+    get ariaSetsize() {
+        return this.treeItem.parent?.children?.length ?? 1;
+    }
+    ariaPosinset;
+    get ariaSelected() {
+        return this.enableSelection() && this.treeItem.selectable ? !!this.treeItem.selected : null;
+    }
+    get ariaChecked() {
+        return this.showCheckOrOptionBox && this.treeItem.selectable
+            ? this.treeItem.checked === 'checked'
+            : null;
+    }
+    get ariaExpanded() {
+        if (this.treeItem.state === 'leaf') {
+            return null;
+        }
+        return this.treeItem.state === 'expanded';
+    }
+    ngOnInit() {
+        this.subscriptions.push(this.scrollIntoView.subscribe(event => this.onScrollIntoViewByConsumer(event)));
+        this.subscriptions.push(this.childrenLoaded.subscribe(event => this.childrenLoadingDone(event)));
+        this.subscriptions.push(this.siTreeViewService.triggerMarkForCheck.subscribe(() => this.cdRef.markForCheck()));
+        this.updateContextMenuItem();
+    }
+    ngDoCheck() {
+        if (this.treeItem.parent?.children && this.ariaPosinset) {
+            if (this.treeItem.parent.children[this.ariaPosinset] !== this.treeItem) {
+                this.ariaPosinset = this.treeItem.parent.children.indexOf(this.treeItem) + 1;
+            }
+        }
+        else if (this.treeItem.parent?.children) {
+            this.ariaPosinset = this.treeItem.parent.children.indexOf(this.treeItem) + 1;
+        }
+        else {
+            this.ariaPosinset = 1;
+        }
+    }
+    ngAfterViewInit() {
+        if (this.savedElement) {
+            this.siTreeViewService.scrollIntoViewEvent.next(this.savedElement);
+            this.savedElement = undefined;
+        }
+        this.nextSiblingElement = this.element.nativeElement?.nextElementSibling;
+    }
+    ngOnDestroy() {
+        this.subscriptions
+            .filter(subscription => !!subscription)
+            .forEach(subscription => subscription.unsubscribe());
+    }
+    enableSelection = this.treeViewComponent.enableSelection;
+    enableContextMenuButton = this.treeViewComponent.enableContextMenuButton;
+    enableDataField1 = this.treeViewComponent.enableDataField1;
+    enableDataField2 = this.treeViewComponent.enableDataField2;
+    deleteChildrenOnCollapse = this.treeViewComponent.deleteChildrenOnCollapse;
+    get paddingStart() {
+        return this.siTreeViewService.groupedList
+            ? '0'
+            : this.indentLevel * this.siTreeViewService.childrenIndentation + 'px';
+    }
+    get biggerPaddingStart() {
+        const basePadding = this.showFolderStateStart ? 24 : 0;
+        return ((this.siTreeViewService.groupedList
+            ? basePadding
+            : this.indentLevel * this.siTreeViewService.childrenIndentation + basePadding) + 'px');
+    }
+    get isGroupedItem() {
+        return this.siTreeViewService.isGroupedItem(this.treeItem);
+    }
+    get showFolderStateStart() {
+        return (this.displayFolderState &&
+            this.treeViewComponent.folderStateStart() &&
+            !this.treeViewComponent.flatTree() &&
+            (!!this.isGroupedItem || !this.siTreeViewService.groupedList));
+    }
+    get showFolderStateEnd() {
+        return this.displayFolderState && !this.showFolderStateStart;
+    }
+    get isExpanding() {
+        return this.treeItem.state === 'expanding';
+    }
+    showStateIndicator = this.treeViewComponent.enableStateIndicator;
+    showIcon = computed(() => {
+        return this.treeViewComponent.enableIcon() && !!this.treeItem.icon;
+    });
+    get showCheckOrOptionBox() {
+        return !!this.treeItem.showCheckbox || !!this.treeItem.showOptionbox;
+    }
+    updateContextMenuItem() {
+        const contextMenuItems = this._contextMenuItems();
+        if (contextMenuItems) {
+            if (Array.isArray(contextMenuItems)) {
+                this.contextMenuItems.set(contextMenuItems);
+            }
+            else {
+                const menuItems = contextMenuItems(this.treeItem);
+                if (Array.isArray(menuItems)) {
+                    this.contextMenuItems.set(menuItems);
+                }
+                else if (menuItems) {
+                    this.subscriptions.push(menuItems.subscribe(items => {
+                        this.contextMenuItems.set(items);
+                    }));
+                }
+            }
+        }
+    }
+    getItemFolderStateClass() {
+        if (this.treeItem.state === 'collapsed') {
+            if (this.treeViewComponent.flatTree()) {
+                // flat tree mode
+                return this.icons().itemCollapsedFlat;
+            }
+            else if (this.treeViewComponent.folderStateStart()) {
+                // normal tree mode; folder state icon shown on the left (in LTR) side
+                return this.icons().itemCollapsedLeft; // si-tree-view-item-collapsed
+            }
+            else {
+                // normal tree mode; folder state icon shown on the right (in LTR) side
+                return this.icons().itemCollapsed; // si-tree-view-item-collapsed
+            }
+        }
+        else if (this.treeItem.state === 'expanding') {
+            return 'si-tree-view-item-expanding'; // because empty is treated as disabled
+        }
+        else if (this.treeItem.state === 'expanded') {
+            if (this.treeViewComponent.flatTree()) {
+                // flat tree mode
+                return this.icons().itemExpandedFlat;
+            }
+            else if (this.treeViewComponent.folderStateStart()) {
+                // normal tree mode; folder state icon shown on the left (in LTR) side
+                return this.icons().itemExpandedLeft; // si-tree-view-item-expanded
+            }
+            else {
+                // normal tree mode; folder state icon shown on the right (in LTR) side
+                return this.icons().itemExpanded; // si-tree-view-item-expanded
+            }
+        }
+        return '';
+    }
+    /**
+     * Show icon if the item is selected.
+     * Per default the `filled` icon is used, this can be configured using {@link disableFilledIcons}.
+     **/
+    getIconClass() {
+        let iconClass = this.treeItem.icon;
+        if (this.treeItem.selected && this.treeItem.selectable && this.enableSelection()) {
+            iconClass =
+                iconClass +
+                    (!this.treeViewComponent.disableFilledIcons() ? ' ' + iconClass + '-filled' : '');
+        }
+        return iconClass ?? '';
+    }
+    getStateIndicatorColor() {
+        return this.treeItem ? (this.treeItem.stateIndicatorColor ?? '') : '';
+    }
+    onItemFolderClicked(newState) {
+        this.nextSiblingElement = this.element.nativeElement?.nextElementSibling;
+        const oldState = removeUndefinedState(this.treeItem.state);
+        doFolderStateChange(this.treeItem, this.deleteChildrenOnCollapse(), newState);
+        this.siTreeViewService.folderClickEvent.next(new FolderStateEventArgs(this.treeItem, oldState, removeUndefinedState(this.treeItem.state)));
+        if (this.treeItem.state === 'expanding') {
+            this.siTreeViewService.loadChildrenEvent.next(this.treeItem);
+        }
+        if (this.treeItem.state === 'expanded') {
+            this.scrollChildNodeIntoViewPort();
+        }
+    }
+    childrenLoadingDone(item) {
+        if (item === this.treeItem) {
+            asyncScheduler.schedule(() => this.scrollChildNodeIntoViewPort(), 0);
+        }
+    }
+    scrollChildNodeIntoViewPort() {
+        const task = () => {
+            const container = this.element.nativeElement.closest('.si-tree-view');
+            const first = this.element.nativeElement;
+            this.nextSiblingElement =
+                this.nextSiblingElement?.previousElementSibling ?? this.nextSiblingElement;
+            const last = container?.contains(this.nextSiblingElement)
+                ? this.nextSiblingElement
+                : this.element.nativeElement.parentElement?.lastElementChild;
+            const fits = container?.offsetHeight -
+                (last?.offsetTop + last?.getBoundingClientRect().height - first?.offsetTop) >=
+                0;
+            const targetElement = fits ? last : first;
+            if (targetElement) {
+                const observer = new window.IntersectionObserver(([entry]) => {
+                    requestAnimationFrame(() => {
+                        const scrollElement = targetElement.firstChild ?? targetElement;
+                        if (fits) {
+                            scrollElement.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+                        }
+                        else {
+                            // scrollIntoView messes up with page scroll when body also has a scroll for { block : 'start' }
+                            const totalScrollTop = container?.scrollTop +
+                                first?.getBoundingClientRect().top -
+                                container?.getBoundingClientRect().top;
+                            container?.scrollTo({ top: totalScrollTop, behavior: 'smooth' });
+                        }
+                    });
+                    observer.disconnect();
+                }, {
+                    root: null,
+                    threshold: 1
+                });
+                observer.observe(targetElement);
+            }
+        };
+        asyncScheduler.schedule(task, 0);
+    }
+    onItemClicked(event) {
+        const previousActive = this.treeItem.active;
+        this.siTreeViewService.clickEvent.next(new ClickEventArgs(this.treeItem, event));
+        if (!this.enableSelection() &&
+            (this.treeViewComponent.enableCheckbox() || this.treeViewComponent.enableOptionbox())) {
+            this.onBoxClicked();
+        }
+        // Toggle expand when item is collapsed, collapse only if the node is active
+        const toggle = (this.treeItem.state === 'expanded' && previousActive) || this.treeItem.state === 'collapsed';
+        if (this.expandOnClick() && toggle) {
+            this.onItemFolderClicked();
+        }
+    }
+    onMouseDownTreeItem(event) {
+        if (event.shiftKey) {
+            // let selection: Selection = window.getSelection();
+            // selection.removeAllRanges();
+            // we do not want the tree item text selected: thus we prevent the default behavior in this situation
+            event.preventDefault();
+        }
+    }
+    onToggleContextMenuOpen() {
+        setActive(this.treeItem, true);
+        this.siTreeViewService.scroll$
+            .pipe(takeUntil(this.menuTrigger.closed), take(1))
+            .subscribe(() => this.menuTrigger?.close());
+    }
+    onToggleContextMenuClose() {
+        setTimeout(() => this.element.nativeElement.focus());
+    }
+    getInputType() {
+        // This method will be called only when either of the showCheckbox or showOptionBox is true, thus
+        // following condition can be shortened
+        return this.treeItem.showCheckbox ? 'checkbox' : 'radio';
+    }
+    onBoxClicked() {
+        if (!this.treeItem.selectable) {
+            return;
+        }
+        const oldState = this.treeItem.checked ?? 'unchecked';
+        boxClicked(this.treeItem, this.treeViewComponent.inheritChecked());
+        this.siTreeViewService.checkboxClickEvent.next(new CheckboxClickEventArgs(this.treeItem, oldState, this.treeItem.checked ?? 'unchecked'));
+    }
+    renderMatchingTemplate(treeItem) {
+        // we check in the HTML template if templates exist.
+        const templateDirective = this.templates.find(td => td.name() === treeItem.templateName);
+        return templateDirective ? templateDirective.template : this.templates.toArray()[0].template;
+    }
+    onContextMenu(event) {
+        this.handleContextMenuEvent(event);
+        return false;
+    }
+    onKeydown(event) {
+        const rtlCorrectedKey = correctKeyRTL(event.key);
+        if (rtlCorrectedKey === 'Enter') {
+            event.preventDefault();
+            this.onItemClicked(event);
+        }
+        else if (rtlCorrectedKey === 'ContextMenu' || (rtlCorrectedKey === 'F10' && event.shiftKey)) {
+            this.handleContextMenuEvent(event);
+        }
+        else if (rtlCorrectedKey === 'ArrowLeft') {
+            if ((!this.treeViewComponent.flatTree() &&
+                this.showFolderStateStart &&
+                (this.treeItem.state !== 'leaf' || this.isGroupedItem)) ||
+                this.showFolderStateEnd) {
+                event.preventDefault();
+                if (this.treeItem.state !== 'collapsed' && this.treeItem.state !== 'leaf') {
+                    this.onItemFolderClicked('collapsed');
+                    return;
+                }
+            }
+            this.siTreeViewService.focusParentEvent.next(this.treeItem);
+        }
+        else if (rtlCorrectedKey === 'ArrowRight') {
+            if ((this.showFolderStateStart && (this.treeItem.state !== 'leaf' || this.isGroupedItem)) ||
+                this.showFolderStateEnd) {
+                event.preventDefault();
+                if (this.treeItem.state !== 'expanded') {
+                    this.onItemFolderClicked('expanded');
+                    return;
+                }
+            }
+            this.siTreeViewService.focusFirstChildEvent.next(this.treeItem);
+        }
+        else if (this.showCheckOrOptionBox &&
+            (rtlCorrectedKey === 'Space' || rtlCorrectedKey === ' ')) {
+            event.preventDefault();
+            this.onBoxClicked();
+        }
+    }
+    handleContextMenuEvent(event) {
+        if (this.isContextMenuButtonVisible() &&
+            this.contextMenuItems()?.some(item => (!item.type && !item.disabled && !item.isHeading && item.title !== '-') ||
+                (item.type !== 'divider' &&
+                    item.type !== 'header' &&
+                    (item.type !== 'radio-group' ||
+                        item.children.some(radioItem => radioItem.type === 'radio' && !radioItem.disabled)) &&
+                    item.type !== 'radio-group' &&
+                    !item.disabled))) {
+            event.preventDefault();
+            event.stopPropagation();
+            // Without the setTimeout in Firefox native menu will open as well.
+            // Event suppression does not work.
+            // Re-check in the future if FF fixes it.
+            setTimeout(() => {
+                this.menuTrigger?.open();
+                this.menuTrigger?.getMenu().focusFirstItem('keyboard');
+            });
+        }
+        else {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+    /**
+     * Focusses the tree item.
+     */
+    focus() {
+        this.element.nativeElement.focus();
+    }
+    /**
+     * Get tree item label.
+     */
+    getLabel() {
+        return this.treeItem?.label ?? '';
+    }
+    /**
+     * Called by the consumer when they want a node to be scrolled into view.
+     */
+    onScrollIntoViewByConsumer(item) {
+        if (item === this.treeItem) {
+            this.savedElement = this.element;
+            this.siTreeViewService.scrollIntoViewEvent.next(this.element);
+        }
+    }
+    expandOnClick() {
+        return (this.treeViewComponent.expandOnClick() &&
+            this.treeItem.state !== 'leaf' &&
+            !!this.treeItem.selectable &&
+            !this.treeViewComponent.flatTree());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTreeViewItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiTreeViewItemComponent, isStandalone: true, selector: "si-tree-view-item", host: { attributes: { "role": "treeitem" }, listeners: { "contextmenu": "onContextMenu($event)", "keydown": "onKeydown($event)" }, properties: { "attr.tabindex": "treeItemContext.record.currentIndex === treeViewComponent.activeIndex ? 0 : -1", "class.focus-none": "true", "class.si-tree-ellipsis": "treeViewComponent.horizontalScrolling()", "class.si-tree-view-top-level-item": "!treeViewComponent.compactMode() && (treeViewComponent.flatTree() || (treeItem.level ?? 0) < 1)", "attr.aria-haspopup": "isContextMenuButtonVisible()", "attr.aria-level": "this.ariaLevel", "attr.aria-setsize": "this.ariaSetsize", "attr.aria-posinset": "this.ariaPosinset", "attr.aria-selected": "this.ariaSelected", "attr.aria-checked": "this.ariaChecked", "attr.aria-expanded": "this.ariaExpanded" } }, viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: CdkMenuTrigger, descendants: true }], ngImport: i0, template: "@if (!isGroupedItem) {\n  <div\n    #contextMenuTrigger=\"cdkContextMenuTriggerFor\"\n    class=\"si-tree-view-li si-tree-view-li-item focus-direct-sub-inside\"\n    [class.si-tree-view-item-context-menu-visible]=\"\n      !!(contextMenuTrigger.isOpen() || menuTrigger?.isOpen())\n    \"\n    [class.si-tree-view-item-active]=\"treeItem.active\"\n    [class.si-tree-view-item-selected]=\"enableSelection() && treeItem.selected\"\n    [class.si-tree-view-item-not-selectable]=\"!treeItem.selectable\"\n    [style.padding-inline-start]=\"biggerPaddingStart\"\n    [cdkContextMenuTriggerFor]=\"contextMenu\"\n    [cdkContextMenuDisabled]=\"!isContextMenuButtonVisible() || !treeItem.selectable\"\n    (cdkContextMenuOpened)=\"onToggleContextMenuOpen()\"\n    (cdkContextMenuClosed)=\"onToggleContextMenuClose()\"\n  >\n    <div class=\"si-tree-view-item\" (mousedown)=\"onMouseDownTreeItem($event)\">\n      @if (showFolderStateStart && treeItem.state !== 'leaf') {\n        <a\n          class=\"si-tree-stretch-center si-tree-view-item-toggle\"\n          tabindex=\"-1\"\n          [style.margin-inline-start]=\"'-' + biggerPaddingStart\"\n          [style.padding-inline-start]=\"paddingStart\"\n          (click)=\"onItemFolderClicked()\"\n        >\n          @if (isExpanding) {\n            <si-loading-spinner [@.disabled]=\"true\" />\n          }\n          @if (!isExpanding) {\n            <i\n              aria-hidden=\"true\"\n              class=\"si-tree-view-item-dropdown-caret\"\n              [ngClass]=\"getItemFolderStateClass()\"\n            ></i>\n          }\n        </a>\n      }\n      @if (showCheckOrOptionBox) {\n        <a class=\"form-check input-box\" tabindex=\"-1\">\n          <input\n            class=\"form-check-input\"\n            tabindex=\"-1\"\n            [type]=\"getInputType()\"\n            [indeterminate]=\"this.treeItem.checked === 'indeterminate' ? true : null\"\n            [checked]=\"this.treeItem.checked === 'checked'\"\n            [disabled]=\"!treeItem.selectable\"\n            [attr.aria-label]=\"treeItem.label | translate\"\n            (click)=\"onBoxClicked()\"\n          />\n        </a>\n      }\n      <div\n        class=\"si-tree-view-item-main d-flex flex-grow-1 align-self-stretch grab-area\"\n        (click)=\"onItemClicked($event)\"\n      >\n        @if (showIcon()) {\n          <div class=\"si-tree-stretch-center\">\n            <span class=\"si-tree-view-item-icon\" [ngClass]=\"getIconClass()\"></span>\n          </div>\n        }\n        <div\n          class=\"si-tree-view-item-object-data d-flex flex-column justify-content-center overflow-hidden\"\n        >\n          @if (!templates.length) {\n            <h5 class=\"text-truncate\">{{ treeItem.label | translate }}</h5>\n          }\n          @if (templates.length) {\n            <div>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  renderMatchingTemplate(treeItem);\n                  context: { $implicit: treeItem }\n                \"\n              />\n            </div>\n          }\n          @if (enableDataField1() && treeItem.dataField1) {\n            <p class=\"si-tree-view-item-object-data-field-1 text-truncate\">{{\n              treeItem.dataField1 | translate\n            }}</p>\n          }\n          @if (enableDataField2() && treeItem.dataField2) {\n            <p class=\"si-tree-view-item-object-data-field-2 text-truncate\">{{\n              treeItem.dataField2 | translate\n            }}</p>\n          }\n        </div>\n        @if (treeItem.badge) {\n          <span\n            class=\"badge flex-shrink-0\"\n            [ngClass]=\"'bg-' + (treeItem.badgeColor || 'default')\"\n            >{{ treeItem.badge }}</span\n          >\n        }\n      </div>\n      <div\n        class=\"si-tree-view-item-end-icons d-flex ms-2 align-items-center\"\n        [class.si-tree-view-item-end-icons-sticky]=\"stickyEndItems()\"\n      >\n        @if (showStateIndicator() && getStateIndicatorColor()) {\n          <div\n            class=\"si-tree-view-state-indicator\"\n            [style.background-color]=\"getStateIndicatorColor()\"\n            [class.si-tree-view-state-indicator-endmost]=\"\n              !enableContextMenuButton() && !showFolderStateEnd\n            \"\n          ></div>\n        }\n        @if (isContextMenuButtonVisible()) {\n          <div class=\"si-tree-stretch-center si-tree-context-menu-btn\">\n            <div\n              #menuTrigger=\"cdkMenuTriggerFor\"\n              tabindex=\"-1\"\n              aria-hidden=\"true\"\n              [cdkMenuTriggerFor]=\"contextMenu\"\n              (cdkMenuOpened)=\"onToggleContextMenuOpen()\"\n              (cdkMenuClosed)=\"onToggleContextMenuClose()\"\n            >\n              <i\n                aria-hidden=\"true\"\n                class=\"si-tree-view-item-icon si-tree-view-menu-btn\"\n                [ngClass]=\"icons().itemMenu\"\n              ></i>\n            </div>\n          </div>\n        }\n        @if (showFolderStateEnd && treeItem.state !== 'leaf') {\n          <a\n            class=\"si-tree-stretch-center si-tree-view-item-toggle si-tree-view-item-toggle-end\"\n            tabindex=\"-1\"\n            [class.disabled]=\"!getItemFolderStateClass()\"\n            (click)=\"onItemFolderClicked()\"\n          >\n            @if (isExpanding) {\n              <si-loading-spinner class=\"si-tree-view-item-icon\" />\n            }\n            @if (!isExpanding) {\n              <i\n                aria-hidden=\"true\"\n                class=\"si-tree-view-item-icon\"\n                [ngClass]=\"getItemFolderStateClass()\"\n              ></i>\n            }\n          </a>\n        }\n        @if (showFolderStateEnd && treeItem.state === 'leaf') {\n          <div class=\"si-tree-stretch-center si-tree-view-item-toggle si-tree-view-item-toggle-end\">\n            <i aria-hidden=\"true\" class=\"si-tree-view-item-icon si-tree-view-item-icon-spacer\"></i>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n@if (isGroupedItem) {\n  <div class=\"si-tree-view-li focus-direct-sub-inside\">\n    <div class=\"si-tree-view-item-group\">\n      @if (showFolderStateStart) {\n        <a\n          class=\"si-tree-stretch-center si-tree-view-item-toggle\"\n          tabindex=\"-1\"\n          (click)=\"onItemFolderClicked()\"\n        >\n          @if (isExpanding) {\n            <si-loading-spinner />\n          }\n          @if (!isExpanding) {\n            <i\n              aria-hidden=\"true\"\n              class=\"si-tree-view-item-icon\"\n              [ngClass]=\"getItemFolderStateClass()\"\n            ></i>\n          }\n        </a>\n      }\n      @if (showCheckOrOptionBox) {\n        <a class=\"form-check input-box\" tabindex=\"-1\">\n          <input\n            class=\"form-check-input\"\n            tabindex=\"-1\"\n            [type]=\"getInputType()\"\n            [indeterminate]=\"this.treeItem.checked === 'indeterminate' ? true : null\"\n            [checked]=\"this.treeItem.checked === 'checked'\"\n            [attr.aria-label]=\"treeItem.label | translate\"\n            (click)=\"onBoxClicked()\"\n          />\n        </a>\n      }\n      <p class=\"mb-0\">{{ treeItem.label | translate }}</p>\n      @if (showFolderStateEnd) {\n        <a\n          class=\"si-tree-stretch-center\"\n          tabindex=\"-1\"\n          [class.disabled]=\"!getItemFolderStateClass()\"\n          (click)=\"onItemFolderClicked()\"\n        >\n          @if (isExpanding) {\n            <si-loading-spinner />\n          }\n          @if (!isExpanding) {\n            <i\n              aria-hidden=\"true\"\n              class=\"si-tree-view-item-icon\"\n              [ngClass]=\"getItemFolderStateClass()\"\n            ></i>\n          }\n        </a>\n      }\n    </div>\n  </div>\n}\n\n<ng-template #contextMenu>\n  <si-menu-factory class=\"me-5\" [items]=\"contextMenuItems()!\" [actionParam]=\"treeItem\" />\n</ng-template>\n", styles: [":host{--si-tree-view-background: var(--element-base-1);--si-tree-view-border-color: var(--element-ui-4);--si-tree-view-icon-size: 24px;--si-tree-view-padding-base-horizontal: 8px;--si-tree-view-padding-base-vertical: 8px;--si-tree-view-item-hover-color: var(--element-base-1-hover);--si-tree-view-item-select-color: var(--element-base-1-selected);--si-tree-view-item-line-height: 1.143;--si-tree-view-item-min-height: 40px;--si-tree-view-item-object-data-field-1-color: var(--element-text-secondary);--si-tree-view-item-object-data-h5-font-size: .875rem;--si-tree-view-item-object-data-h5-font-weight: normal}:host-context(.tree-sm){--si-tree-view-item-min-height: 32px;--si-tree-view-padding-base-vertical: 0px}:host-context(.tree-xs){--si-tree-view-item-min-height: 24px;--si-tree-view-padding-base-vertical: 0px}:host{display:block}:host.cdk-drag-placeholder{block-size:0;margin-inline:8px;margin-block:0!important;opacity:1;min-block-size:0;position:relative;z-index:999}:host.cdk-drag-placeholder:after{position:absolute;inline-size:100%;block-size:2px;content:\"\";background-color:var(--element-focus-default)!important}:host.cdk-drag-placeholder>*{display:none}:host.cdk-drag:not(.cdk-drag-placeholder){transform:none!important}:host.cdk-drop-list-dragging *:hover,:host.cdk-drop-list-dragging .si-tree-view-item-end-icons,:host.cdk-drop-list-dragging .si-tree-view-item-context-menu-visible,:host .cdk-drop-list-dragging *:hover,:host .cdk-drop-list-dragging .si-tree-view-item-end-icons,:host .cdk-drop-list-dragging .si-tree-view-item-context-menu-visible{background-color:transparent!important}:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item{padding-inline-start:8px!important;padding-inline-end:12px!important}:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item .si-tree-view-item-toggle{padding-inline-start:12px!important}:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item .badge{margin-inline-end:0}:host.cdk-drag-preview .si-tree-view-item-end-icons,:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item{background-color:var(--element-base-3)!important}.si-tree-view-li.si-tree-view-li-item{position:relative}.si-tree-view-li.si-tree-view-li-item:hover,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-context-menu-visible,.si-tree-view-li.si-tree-view-li-item:hover .si-tree-view-item-end-icons,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-context-menu-visible .si-tree-view-item-end-icons{background-color:var(--si-tree-view-item-hover-color)}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-selected,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-selected .si-tree-view-item-end-icons{background-color:var(--si-tree-view-item-select-color)}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-selected>.si-tree-view-item>.si-tree-view-item-main>.si-tree-view-item-object-data>h5{font-weight:700}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable:hover,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-end-icons{background-color:unset}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item:hover{cursor:default;background-color:unset}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-dropdown-caret{cursor:pointer}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-context-menu-btn>div[role=button]{cursor:pointer}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-toggle-end{cursor:pointer}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-toggle-end .si-tree-view-item-icon{color:var(--element-text-primary)}.si-tree-view-li.si-tree-view-li-item .si-tree-view-item-end-icons{background-color:var(--si-tree-view-background)}.si-tree-view-item-group,.si-tree-view-item{display:flex;align-items:center}.si-tree-stretch-center{align-self:stretch;display:flex;align-items:center;justify-content:center;margin:0;text-decoration:none}.si-tree-view-item-toggle.disabled .si-tree-view-item-icon{inline-size:24px}.si-tree-stretch-center+.si-tree-view-item-toggle-end .si-tree-view-item-icon{margin-inline-start:-4px}.si-tree-view-item-icon{padding-inline-end:8px}.si-tree-view-item-icon.si-tree-view-item-icon-spacer{box-sizing:content-box;inline-size:var(--si-tree-view-icon-size)}.si-tree-view-item-object-data,.si-tree-view-item-icon{margin-block:0;margin-inline:calc(var(--si-tree-view-padding-base-horizontal) / 4)}.si-tree-view-item{justify-content:space-between;min-block-size:var(--si-tree-view-item-min-height);padding-inline:var(--si-tree-view-padding-base-horizontal) calc(var(--si-tree-view-padding-base-horizontal) / 4)}.si-tree-view-item:hover{cursor:pointer}:host-context(.si-tree-view-flat) .si-tree-view-item{padding-inline-start:calc(var(--si-tree-view-padding-base-horizontal) / 2)}.si-tree-view-state-indicator{margin-block:0;margin-inline:calc(var(--si-tree-view-padding-base-horizontal) * .75);min-inline-size:6px;block-size:6px;border-radius:50%}.si-tree-view-state-indicator.si-tree-view-state-indicator-endmost{margin-inline-end:calc(var(--si-tree-view-padding-base-horizontal) * 1.75)}.si-tree-view-item-group{padding-block:calc(2 * var(--si-tree-view-padding-base-vertical));padding-inline:calc(var(--si-tree-view-padding-base-horizontal) / 2);cursor:default}.si-tree-view-item-group .si-tree-view-item-dropdown-caret:hover,.si-tree-view-item-group .si-tree-view-item-icon:hover{cursor:pointer}.si-tree-view-item-dropdown-caret,.si-tree-view-item-dropdown-caret:hover,.si-tree-view-item-icon,.si-tree-view-item-icon:hover{color:var(--element-text-primary);text-decoration:none;font-size:var(--si-tree-view-icon-size)}.si-tree-view-item-main{overflow-x:hidden}.si-tree-view-item-main>.badge{margin-block:auto}.si-tree-view-item-object-data>.si-tree-view-item-object-data-field-1{color:var(--si-tree-view-item-object-data-field-1-color)}:host.si-tree-ellipsis .si-tree-view-item-object-data{overflow-x:hidden}.si-tree-view-item-object-data>*{white-space:nowrap;margin-block:0;line-height:var(--si-tree-view-item-line-height)}:host.si-tree-ellipsis .si-tree-view-item-object-data>*{overflow:hidden;text-overflow:ellipsis}.si-tree-view-item-object-data>h5{font-size:var(--si-tree-view-item-object-data-h5-font-size);font-weight:var(--si-tree-view-item-object-data-h5-font-weight)}.si-tree-view-menu-btn{pointer-events:none}.si-tree-view-item-end-icons{block-size:calc(var(--si-tree-view-item-min-height) - 2 * (var(--element-button-focus-width) + var(--element-button-focus-overlay-width)))}.si-tree-view-item-end-icons.si-tree-view-item-end-icons-sticky{position:sticky;inset-inline-end:0}.input-box{margin-inline:2px 12px}.form-check-input{display:block}si-loading-spinner{--loading-spinner-size: var(--si-tree-view-icon-size)}\n"], dependencies: [{ kind: "directive", type: CdkContextMenuTrigger, selector: "[cdkContextMenuTriggerFor]", inputs: ["cdkContextMenuTriggerFor", "cdkContextMenuPosition", "cdkContextMenuTriggerData", "cdkContextMenuDisabled"], outputs: ["cdkContextMenuOpened", "cdkContextMenuClosed"], exportAs: ["cdkContextMenuTriggerFor"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiLoadingSpinnerComponent, selector: "si-loading-spinner", inputs: ["isBlockingSpinner", "isSpinnerOverlay", "ariaLabel"] }, { kind: "component", type: SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTreeViewItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-tree-view-item', imports: [
+                        CdkContextMenuTrigger,
+                        CdkMenuTrigger,
+                        NgClass,
+                        NgTemplateOutlet,
+                        SiLoadingSpinnerComponent,
+                        SiMenuFactoryComponent,
+                        SiTranslateModule
+                    ], host: {
+                        role: 'treeitem',
+                        '[attr.tabindex]': 'treeItemContext.record.currentIndex === treeViewComponent.activeIndex ? 0 : -1',
+                        '[class.focus-none]': 'true',
+                        '[class.si-tree-ellipsis]': 'treeViewComponent.horizontalScrolling()',
+                        '[class.si-tree-view-top-level-item]': '!treeViewComponent.compactMode() && (treeViewComponent.flatTree() || (treeItem.level ?? 0) < 1)',
+                        '[attr.aria-haspopup]': 'isContextMenuButtonVisible()'
+                    }, template: "@if (!isGroupedItem) {\n  <div\n    #contextMenuTrigger=\"cdkContextMenuTriggerFor\"\n    class=\"si-tree-view-li si-tree-view-li-item focus-direct-sub-inside\"\n    [class.si-tree-view-item-context-menu-visible]=\"\n      !!(contextMenuTrigger.isOpen() || menuTrigger?.isOpen())\n    \"\n    [class.si-tree-view-item-active]=\"treeItem.active\"\n    [class.si-tree-view-item-selected]=\"enableSelection() && treeItem.selected\"\n    [class.si-tree-view-item-not-selectable]=\"!treeItem.selectable\"\n    [style.padding-inline-start]=\"biggerPaddingStart\"\n    [cdkContextMenuTriggerFor]=\"contextMenu\"\n    [cdkContextMenuDisabled]=\"!isContextMenuButtonVisible() || !treeItem.selectable\"\n    (cdkContextMenuOpened)=\"onToggleContextMenuOpen()\"\n    (cdkContextMenuClosed)=\"onToggleContextMenuClose()\"\n  >\n    <div class=\"si-tree-view-item\" (mousedown)=\"onMouseDownTreeItem($event)\">\n      @if (showFolderStateStart && treeItem.state !== 'leaf') {\n        <a\n          class=\"si-tree-stretch-center si-tree-view-item-toggle\"\n          tabindex=\"-1\"\n          [style.margin-inline-start]=\"'-' + biggerPaddingStart\"\n          [style.padding-inline-start]=\"paddingStart\"\n          (click)=\"onItemFolderClicked()\"\n        >\n          @if (isExpanding) {\n            <si-loading-spinner [@.disabled]=\"true\" />\n          }\n          @if (!isExpanding) {\n            <i\n              aria-hidden=\"true\"\n              class=\"si-tree-view-item-dropdown-caret\"\n              [ngClass]=\"getItemFolderStateClass()\"\n            ></i>\n          }\n        </a>\n      }\n      @if (showCheckOrOptionBox) {\n        <a class=\"form-check input-box\" tabindex=\"-1\">\n          <input\n            class=\"form-check-input\"\n            tabindex=\"-1\"\n            [type]=\"getInputType()\"\n            [indeterminate]=\"this.treeItem.checked === 'indeterminate' ? true : null\"\n            [checked]=\"this.treeItem.checked === 'checked'\"\n            [disabled]=\"!treeItem.selectable\"\n            [attr.aria-label]=\"treeItem.label | translate\"\n            (click)=\"onBoxClicked()\"\n          />\n        </a>\n      }\n      <div\n        class=\"si-tree-view-item-main d-flex flex-grow-1 align-self-stretch grab-area\"\n        (click)=\"onItemClicked($event)\"\n      >\n        @if (showIcon()) {\n          <div class=\"si-tree-stretch-center\">\n            <span class=\"si-tree-view-item-icon\" [ngClass]=\"getIconClass()\"></span>\n          </div>\n        }\n        <div\n          class=\"si-tree-view-item-object-data d-flex flex-column justify-content-center overflow-hidden\"\n        >\n          @if (!templates.length) {\n            <h5 class=\"text-truncate\">{{ treeItem.label | translate }}</h5>\n          }\n          @if (templates.length) {\n            <div>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  renderMatchingTemplate(treeItem);\n                  context: { $implicit: treeItem }\n                \"\n              />\n            </div>\n          }\n          @if (enableDataField1() && treeItem.dataField1) {\n            <p class=\"si-tree-view-item-object-data-field-1 text-truncate\">{{\n              treeItem.dataField1 | translate\n            }}</p>\n          }\n          @if (enableDataField2() && treeItem.dataField2) {\n            <p class=\"si-tree-view-item-object-data-field-2 text-truncate\">{{\n              treeItem.dataField2 | translate\n            }}</p>\n          }\n        </div>\n        @if (treeItem.badge) {\n          <span\n            class=\"badge flex-shrink-0\"\n            [ngClass]=\"'bg-' + (treeItem.badgeColor || 'default')\"\n            >{{ treeItem.badge }}</span\n          >\n        }\n      </div>\n      <div\n        class=\"si-tree-view-item-end-icons d-flex ms-2 align-items-center\"\n        [class.si-tree-view-item-end-icons-sticky]=\"stickyEndItems()\"\n      >\n        @if (showStateIndicator() && getStateIndicatorColor()) {\n          <div\n            class=\"si-tree-view-state-indicator\"\n            [style.background-color]=\"getStateIndicatorColor()\"\n            [class.si-tree-view-state-indicator-endmost]=\"\n              !enableContextMenuButton() && !showFolderStateEnd\n            \"\n          ></div>\n        }\n        @if (isContextMenuButtonVisible()) {\n          <div class=\"si-tree-stretch-center si-tree-context-menu-btn\">\n            <div\n              #menuTrigger=\"cdkMenuTriggerFor\"\n              tabindex=\"-1\"\n              aria-hidden=\"true\"\n              [cdkMenuTriggerFor]=\"contextMenu\"\n              (cdkMenuOpened)=\"onToggleContextMenuOpen()\"\n              (cdkMenuClosed)=\"onToggleContextMenuClose()\"\n            >\n              <i\n                aria-hidden=\"true\"\n                class=\"si-tree-view-item-icon si-tree-view-menu-btn\"\n                [ngClass]=\"icons().itemMenu\"\n              ></i>\n            </div>\n          </div>\n        }\n        @if (showFolderStateEnd && treeItem.state !== 'leaf') {\n          <a\n            class=\"si-tree-stretch-center si-tree-view-item-toggle si-tree-view-item-toggle-end\"\n            tabindex=\"-1\"\n            [class.disabled]=\"!getItemFolderStateClass()\"\n            (click)=\"onItemFolderClicked()\"\n          >\n            @if (isExpanding) {\n              <si-loading-spinner class=\"si-tree-view-item-icon\" />\n            }\n            @if (!isExpanding) {\n              <i\n                aria-hidden=\"true\"\n                class=\"si-tree-view-item-icon\"\n                [ngClass]=\"getItemFolderStateClass()\"\n              ></i>\n            }\n          </a>\n        }\n        @if (showFolderStateEnd && treeItem.state === 'leaf') {\n          <div class=\"si-tree-stretch-center si-tree-view-item-toggle si-tree-view-item-toggle-end\">\n            <i aria-hidden=\"true\" class=\"si-tree-view-item-icon si-tree-view-item-icon-spacer\"></i>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n@if (isGroupedItem) {\n  <div class=\"si-tree-view-li focus-direct-sub-inside\">\n    <div class=\"si-tree-view-item-group\">\n      @if (showFolderStateStart) {\n        <a\n          class=\"si-tree-stretch-center si-tree-view-item-toggle\"\n          tabindex=\"-1\"\n          (click)=\"onItemFolderClicked()\"\n        >\n          @if (isExpanding) {\n            <si-loading-spinner />\n          }\n          @if (!isExpanding) {\n            <i\n              aria-hidden=\"true\"\n              class=\"si-tree-view-item-icon\"\n              [ngClass]=\"getItemFolderStateClass()\"\n            ></i>\n          }\n        </a>\n      }\n      @if (showCheckOrOptionBox) {\n        <a class=\"form-check input-box\" tabindex=\"-1\">\n          <input\n            class=\"form-check-input\"\n            tabindex=\"-1\"\n            [type]=\"getInputType()\"\n            [indeterminate]=\"this.treeItem.checked === 'indeterminate' ? true : null\"\n            [checked]=\"this.treeItem.checked === 'checked'\"\n            [attr.aria-label]=\"treeItem.label | translate\"\n            (click)=\"onBoxClicked()\"\n          />\n        </a>\n      }\n      <p class=\"mb-0\">{{ treeItem.label | translate }}</p>\n      @if (showFolderStateEnd) {\n        <a\n          class=\"si-tree-stretch-center\"\n          tabindex=\"-1\"\n          [class.disabled]=\"!getItemFolderStateClass()\"\n          (click)=\"onItemFolderClicked()\"\n        >\n          @if (isExpanding) {\n            <si-loading-spinner />\n          }\n          @if (!isExpanding) {\n            <i\n              aria-hidden=\"true\"\n              class=\"si-tree-view-item-icon\"\n              [ngClass]=\"getItemFolderStateClass()\"\n            ></i>\n          }\n        </a>\n      }\n    </div>\n  </div>\n}\n\n<ng-template #contextMenu>\n  <si-menu-factory class=\"me-5\" [items]=\"contextMenuItems()!\" [actionParam]=\"treeItem\" />\n</ng-template>\n", styles: [":host{--si-tree-view-background: var(--element-base-1);--si-tree-view-border-color: var(--element-ui-4);--si-tree-view-icon-size: 24px;--si-tree-view-padding-base-horizontal: 8px;--si-tree-view-padding-base-vertical: 8px;--si-tree-view-item-hover-color: var(--element-base-1-hover);--si-tree-view-item-select-color: var(--element-base-1-selected);--si-tree-view-item-line-height: 1.143;--si-tree-view-item-min-height: 40px;--si-tree-view-item-object-data-field-1-color: var(--element-text-secondary);--si-tree-view-item-object-data-h5-font-size: .875rem;--si-tree-view-item-object-data-h5-font-weight: normal}:host-context(.tree-sm){--si-tree-view-item-min-height: 32px;--si-tree-view-padding-base-vertical: 0px}:host-context(.tree-xs){--si-tree-view-item-min-height: 24px;--si-tree-view-padding-base-vertical: 0px}:host{display:block}:host.cdk-drag-placeholder{block-size:0;margin-inline:8px;margin-block:0!important;opacity:1;min-block-size:0;position:relative;z-index:999}:host.cdk-drag-placeholder:after{position:absolute;inline-size:100%;block-size:2px;content:\"\";background-color:var(--element-focus-default)!important}:host.cdk-drag-placeholder>*{display:none}:host.cdk-drag:not(.cdk-drag-placeholder){transform:none!important}:host.cdk-drop-list-dragging *:hover,:host.cdk-drop-list-dragging .si-tree-view-item-end-icons,:host.cdk-drop-list-dragging .si-tree-view-item-context-menu-visible,:host .cdk-drop-list-dragging *:hover,:host .cdk-drop-list-dragging .si-tree-view-item-end-icons,:host .cdk-drop-list-dragging .si-tree-view-item-context-menu-visible{background-color:transparent!important}:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item{padding-inline-start:8px!important;padding-inline-end:12px!important}:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item .si-tree-view-item-toggle{padding-inline-start:12px!important}:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item .badge{margin-inline-end:0}:host.cdk-drag-preview .si-tree-view-item-end-icons,:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item{background-color:var(--element-base-3)!important}.si-tree-view-li.si-tree-view-li-item{position:relative}.si-tree-view-li.si-tree-view-li-item:hover,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-context-menu-visible,.si-tree-view-li.si-tree-view-li-item:hover .si-tree-view-item-end-icons,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-context-menu-visible .si-tree-view-item-end-icons{background-color:var(--si-tree-view-item-hover-color)}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-selected,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-selected .si-tree-view-item-end-icons{background-color:var(--si-tree-view-item-select-color)}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-selected>.si-tree-view-item>.si-tree-view-item-main>.si-tree-view-item-object-data>h5{font-weight:700}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable:hover,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-end-icons{background-color:unset}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item:hover{cursor:default;background-color:unset}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-dropdown-caret{cursor:pointer}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-context-menu-btn>div[role=button]{cursor:pointer}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-toggle-end{cursor:pointer}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-toggle-end .si-tree-view-item-icon{color:var(--element-text-primary)}.si-tree-view-li.si-tree-view-li-item .si-tree-view-item-end-icons{background-color:var(--si-tree-view-background)}.si-tree-view-item-group,.si-tree-view-item{display:flex;align-items:center}.si-tree-stretch-center{align-self:stretch;display:flex;align-items:center;justify-content:center;margin:0;text-decoration:none}.si-tree-view-item-toggle.disabled .si-tree-view-item-icon{inline-size:24px}.si-tree-stretch-center+.si-tree-view-item-toggle-end .si-tree-view-item-icon{margin-inline-start:-4px}.si-tree-view-item-icon{padding-inline-end:8px}.si-tree-view-item-icon.si-tree-view-item-icon-spacer{box-sizing:content-box;inline-size:var(--si-tree-view-icon-size)}.si-tree-view-item-object-data,.si-tree-view-item-icon{margin-block:0;margin-inline:calc(var(--si-tree-view-padding-base-horizontal) / 4)}.si-tree-view-item{justify-content:space-between;min-block-size:var(--si-tree-view-item-min-height);padding-inline:var(--si-tree-view-padding-base-horizontal) calc(var(--si-tree-view-padding-base-horizontal) / 4)}.si-tree-view-item:hover{cursor:pointer}:host-context(.si-tree-view-flat) .si-tree-view-item{padding-inline-start:calc(var(--si-tree-view-padding-base-horizontal) / 2)}.si-tree-view-state-indicator{margin-block:0;margin-inline:calc(var(--si-tree-view-padding-base-horizontal) * .75);min-inline-size:6px;block-size:6px;border-radius:50%}.si-tree-view-state-indicator.si-tree-view-state-indicator-endmost{margin-inline-end:calc(var(--si-tree-view-padding-base-horizontal) * 1.75)}.si-tree-view-item-group{padding-block:calc(2 * var(--si-tree-view-padding-base-vertical));padding-inline:calc(var(--si-tree-view-padding-base-horizontal) / 2);cursor:default}.si-tree-view-item-group .si-tree-view-item-dropdown-caret:hover,.si-tree-view-item-group .si-tree-view-item-icon:hover{cursor:pointer}.si-tree-view-item-dropdown-caret,.si-tree-view-item-dropdown-caret:hover,.si-tree-view-item-icon,.si-tree-view-item-icon:hover{color:var(--element-text-primary);text-decoration:none;font-size:var(--si-tree-view-icon-size)}.si-tree-view-item-main{overflow-x:hidden}.si-tree-view-item-main>.badge{margin-block:auto}.si-tree-view-item-object-data>.si-tree-view-item-object-data-field-1{color:var(--si-tree-view-item-object-data-field-1-color)}:host.si-tree-ellipsis .si-tree-view-item-object-data{overflow-x:hidden}.si-tree-view-item-object-data>*{white-space:nowrap;margin-block:0;line-height:var(--si-tree-view-item-line-height)}:host.si-tree-ellipsis .si-tree-view-item-object-data>*{overflow:hidden;text-overflow:ellipsis}.si-tree-view-item-object-data>h5{font-size:var(--si-tree-view-item-object-data-h5-font-size);font-weight:var(--si-tree-view-item-object-data-h5-font-weight)}.si-tree-view-menu-btn{pointer-events:none}.si-tree-view-item-end-icons{block-size:calc(var(--si-tree-view-item-min-height) - 2 * (var(--element-button-focus-width) + var(--element-button-focus-overlay-width)))}.si-tree-view-item-end-icons.si-tree-view-item-end-icons-sticky{position:sticky;inset-inline-end:0}.input-box{margin-inline:2px 12px}.form-check-input{display:block}si-loading-spinner{--loading-spinner-size: var(--si-tree-view-icon-size)}\n"] }]
+        }], propDecorators: { menuTrigger: [{
+                type: ViewChild,
+                args: [CdkMenuTrigger]
+            }], ariaLevel: [{
+                type: HostBinding,
+                args: ['attr.aria-level']
+            }], ariaSetsize: [{
+                type: HostBinding,
+                args: ['attr.aria-setsize']
+            }], ariaPosinset: [{
+                type: HostBinding,
+                args: ['attr.aria-posinset']
+            }], ariaSelected: [{
+                type: HostBinding,
+                args: ['attr.aria-selected']
+            }], ariaChecked: [{
+                type: HostBinding,
+                args: ['attr.aria-checked']
+            }], ariaExpanded: [{
+                type: HostBinding,
+                args: ['attr.aria-expanded']
+            }], onContextMenu: [{
+                type: HostListener,
+                args: ['contextmenu', ['$event']]
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Provides the functionality to flatten the hierarchical tree structure into a flat one dimensional array; called flattenedTrees.
+ * The TreeViewComponent uses this flattened trees (the array) to bind the contained tree/list items to the GUI into a list.
+ * In addition the service provides the number of 'normal' list items and the number of group items.
+ * Important:
+ * The coupling to the TreeViewComponent is high, thus the service is provided only by the TreeViewComponent.
+ */
+class SiTreeViewConverterService {
+    /**
+     * The flattened tree array; filled upon calling the method 'fillFlattenedTree'
+     *
+     * @defaultValue []
+     */
+    flattenedTrees = [];
+    /**
+     * The number of group items of the flattened tree.
+     *
+     * @defaultValue 0
+     */
+    groupItemsCount = 0;
+    /**
+     * The total items count of the flattened tree.
+     *
+     * @defaultValue 0
+     */
+    itemsTotal = 0;
+    siTreeViewService = inject(SiTreeViewService);
+    /**
+     * Flattens the tree handed over as parameter.
+     * Takes the mode of the tree into consideration:
+     * In case of a flat tree: only the first level of the items parameter is copied into the flattenedTrees array.
+     * In case of a grouped tree: only the first two levels are copied into the flattenedTrees array
+     * In the other cases all tree nodes are copied into the flattenedTrees array.
+     */
+    fillFlattenedTree(items, isFlatTree) {
+        if (isFlatTree === false) {
+            this.flattenedTrees = [];
+            if (this.siTreeViewService.groupedList) {
+                this.fillFlattenedTreeRecursive(items, 2, 0);
+            }
+            else {
+                this.fillFlattenedTreeRecursive(items);
+            }
+        }
+        else {
+            this.flattenedTrees = items;
+            this.groupItemsCount = 0;
+        }
+        this.itemsTotal = items.length;
+    }
+    fillFlattenedTreeRecursive(items, noOfLevels, stackLevel) {
+        if (noOfLevels !== undefined && stackLevel !== undefined && noOfLevels <= stackLevel) {
+            return;
+        }
+        stackLevel = stackLevel ?? 0;
+        for (const current of items) {
+            this.flattenedTrees.push(current);
+            if (this.siTreeViewService.isGroupedItem(current)) {
+                this.groupItemsCount++;
+            }
+            if (current.state === 'expanded') {
+                this.fillFlattenedTreeRecursive(current.children ?? [], noOfLevels, stackLevel + 1);
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTreeViewConverterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTreeViewConverterService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTreeViewConverterService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * This service provides helper functionality for the tree view to read the height of the tree/list items and
+ * the group list items out of the DOM.
+ *
+ * Important: The coupling to the TreeViewComponent is very high as the service contains knowledge on the HTML structure!!!
+ * Thus the service is provided only by the TreeViewComponent.
+ *
+ * Constraint: The height of the items (DOM elements) must be all the same; The height of the grouped items (DOM elements)
+ * must be all the same;
+ */
+class SiTreeViewItemHeightService {
+    /**
+     * The height of a tree list item.
+     * Can be undefined if the tree list has not been layout rendered yet.
+     */
+    itemHeight;
+    /**
+     * The height of a grouped list item.
+     * Can be undefined if the tree list has not been layout rendered yet or if it does not contain group items.
+     */
+    groupItemHeight;
+    /**
+     * Emitter for itemHeight changes.
+     */
+    itemHeightChange = new EventEmitter();
+    siTreeViewService = inject(SiTreeViewService);
+    /**
+     * Updates the height of a list item, if an appropriate item is in the DOM.
+     *
+     * @returns The new height of the list item; or undefined if no list item is in the DOM yet.
+     */
+    updateItemHeight(elementList, flattenedTrees, itemsBase, virtualizedItems) {
+        let newHeight;
+        let itemsTop = itemsBase + virtualizedItems;
+        if (itemsTop > flattenedTrees.length) {
+            itemsTop = flattenedTrees.length;
+        }
+        for (let i = itemsBase; i < itemsTop; i++) {
+            if (this.siTreeViewService.isGroupedItem(flattenedTrees[i]) === false) {
+                newHeight = this.getItemHeightOfListElement(elementList, i - itemsBase);
+                break;
+            }
+        }
+        if (newHeight !== undefined && this.itemHeight !== newHeight) {
+            this.itemHeight = newHeight;
+            this.itemHeightChange.emit(newHeight);
+        }
+        return newHeight;
+    }
+    /**
+     * Updates the height of a group item, if an appropriate item is in the DOM.
+     *
+     * @returns The new height of the group item; or undefined if no group item is in the DOM yet.
+     */
+    updateGroupedItemHeight(elementList, flattenedTrees, itemsBase, virtualizedItems) {
+        let newHeight;
+        let itemsTop = itemsBase + virtualizedItems;
+        if (itemsTop > flattenedTrees.length) {
+            itemsTop = flattenedTrees.length;
+        }
+        for (let i = itemsBase; i < itemsTop; i++) {
+            if (this.siTreeViewService.isGroupedItem(flattenedTrees[i])) {
+                newHeight = this.getItemHeightOfListElement(elementList, i - itemsBase);
+                break;
+            }
+        }
+        if (newHeight !== undefined) {
+            this.groupItemHeight = newHeight;
+        }
+        return newHeight;
+    }
+    getItemHeightOfListElement(elementList, index) {
+        const items = elementList.querySelectorAll('si-tree-view-item');
+        if (index < items.length) {
+            return items.item(index).getBoundingClientRect().height;
+        }
+        return undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTreeViewItemHeightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTreeViewItemHeightService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTreeViewItemHeightService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiTreeViewItemDirective {
+    templateRef = inject(TemplateRef);
+    viewContainerRef = inject(ViewContainerRef);
+    parent = inject(SiTreeViewComponent);
+    differs = inject(IterableDiffers);
+    cdRef = inject(ChangeDetectorRef);
+    differ = null;
+    subscription;
+    itemsVirtualizedDirty = true;
+    ngAfterViewInit() {
+        if (this.itemsVirtualizedDirty) {
+            this.itemsVirtualizedDirty = false;
+            const value = this.parent.itemsVirtualized;
+            if (!this.differ && value) {
+                this.differ = this.differs.find(value).create((_index, item) => item);
+            }
+        }
+        this.evaluateDiffer();
+        this.subscription = this.parent.evaluateForTreeItemsDiffer.subscribe(_ => this.evaluateDiffer());
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+    evaluateDiffer() {
+        if (this.differ) {
+            const changes = this.differ.diff(this.parent.itemsVirtualized);
+            if (changes)
+                this.applyChanges(changes);
+        }
+    }
+    applyChanges(changes) {
+        const viewContainer = this.viewContainerRef;
+        changes.forEachOperation((record, adjustedPreviousIndex, currentIndex) => {
+            if (record.previousIndex == null) {
+                viewContainer.createEmbeddedView(this.templateRef, {
+                    treeItem: record.item,
+                    index: record.currentIndex,
+                    parent: this.parent
+                }, {
+                    injector: Injector.create({
+                        providers: [
+                            {
+                                provide: TREE_ITEM_CONTEXT,
+                                useValue: {
+                                    record,
+                                    parent: this.parent
+                                }
+                            }
+                        ]
+                    }),
+                    index: currentIndex ?? undefined
+                });
+            }
+            else if (currentIndex == null) {
+                viewContainer.remove(adjustedPreviousIndex ?? undefined);
+            }
+            else if (adjustedPreviousIndex !== null) {
+                const view = viewContainer.get(adjustedPreviousIndex);
+                viewContainer.move(view, currentIndex);
+                view.context = {
+                    treeItem: record.item,
+                    index: record.currentIndex,
+                    parent: this.parent
+                };
+            }
+            this.cdRef.detectChanges();
+        });
+        for (let i = 0, ilen = viewContainer.length; i < ilen; i++) {
+            const viewRef = viewContainer.get(i);
+            const context = viewRef.context;
+            context.index = i;
+        }
+        changes.forEachIdentityChange((record) => {
+            if (record.currentIndex) {
+                const viewRef = viewContainer.get(record.currentIndex);
+                viewRef.context = {
+                    treeItem: record.item,
+                    index: record.currentIndex,
+                    parent: this.parent
+                };
+                this.cdRef.detectChanges();
+            }
+        });
+    }
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTreeViewItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: SiTreeViewItemDirective, isStandalone: true, selector: "[siTreeViewItem]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTreeViewItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[siTreeViewItem]'
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Provides helper functionality to virtualize a list of items.
+ * The number of virtualized items is the product of the pageSize and the pagesVirtualized (no of pages virtualized);
+ * The paging algorithm works as follows:
+ * If scrolling down, between two and three pages are kept above the 'visible' area;
+ * The trigger is therefore if more than three pages are above the visible area, one page is removed from the top and added at the bottom.
+ * If scrolling up, between one and two pages are kept above the 'visible' area;
+ * The trigger is therefore if less than one page is above the visible area, one page is added on top and removed from the bottom.
+ * All remaining items which are not virtualized, need to be simulated with two div-elements whose height can be set with the calculated
+ * properties heightBefore and heightAfter.
+ * See the test client for further information on the  usage.
+ * Constraint:
+ * The virtualization calculation works correct only when all list items are of the same height!
+ * If the 'group' mode is enabled, the corresponding group-items can have a different height, but for all group-items it must be the same.
+ */
+class SiTreeViewVirtualizationService {
+    /**
+     * The number of list items of a virtualized page.
+     * Choose a value, which is roughly half of the number of items you expect to be displayed on the visible screen.
+     *
+     * @defaultValue 10
+     */
+    pageSize = 10;
+    /**
+     * The number of pages to be virtualized.
+     *
+     * @defaultValue 6
+     */
+    pagesVirtualized = 6;
+    /**
+     * Emits when the virtualized items have changed (added/removed).
+     */
+    itemsVirtualizedChanged = new Subject();
+    /**
+     * The total height of the 'simulated' list items which are ordered before the virtualized list items.
+     */
+    _heightBefore = 0;
+    /**
+     * The total height of the 'simulated' list items which are ordered after the virtualized list items.
+     */
+    _heightAfter = 0;
+    _pageBase = 0;
+    scrollTopPrev = 0;
+    _itemsVirtualized = [];
+    groupItemsCountBefore = 0;
+    listItemsCountBefore = 0;
+    groupItemsCountAfter = 0;
+    listItemsCountAfter = 0;
+    groupItemsCountVirtualized = 0;
+    listItemsCountVirtualized = 0;
+    listItemsPerVirtPage = [];
+    groupItemsPerVirtPage = [];
+    siTreeViewService = inject(SiTreeViewService);
+    siTreeViewItemHeightService = inject(SiTreeViewItemHeightService);
+    /**
+     * Returns the virtualized items.
+     */
+    get itemsVirtualized() {
+        return this._itemsVirtualized;
+    }
+    /**
+     * The total height of the 'simulated' list items which are ordered before the virtualized list items.
+     */
+    get heightBefore() {
+        return this._heightBefore;
+    }
+    /**
+     * The total height of the 'simulated' list items which are ordered after the virtualized list items.
+     */
+    get heightAfter() {
+        return this._heightAfter;
+    }
+    /**
+     * The index of the first (base) page being virtualized.
+     */
+    get pageBase() {
+        return this._pageBase;
+    }
+    /**
+     * The list item index of the base page.
+     */
+    get itemBaseIdx() {
+        return this._pageBase * this.pageSize;
+    }
+    /**
+     * Returns the number of virtualized items.
+     */
+    get itemsVirtualizedCount() {
+        return this.itemsVirtualized.length;
+    }
+    /**
+     * Call this method upon scroll handler notifications!
+     *
+     * @param scrollTop - the scrollTop value retrieved form the event target
+     * @param itemsAll - all items of the list
+     */
+    handleScroll(scrollTop, itemsAll) {
+        if (this.siTreeViewService.groupedList) {
+            this.handleScrollGrouped(scrollTop, itemsAll);
+        }
+        else {
+            this.handleScrollSimple(scrollTop, itemsAll);
+        }
+    }
+    /**
+     * Resets the virtualization to 'show' the items of the first page onwards.
+     */
+    resetVirtualizedItemList(itemsAll) {
+        this._pageBase = 0;
+        this.updateVirtualizedItemListIntern(itemsAll);
+    }
+    /**
+     * Updates the virtualized items. Call this method for use cases such as:
+     * - The list items array contains added or removed items which could be in the 'visible' area
+     * - The item height has changed.
+     */
+    updateVirtualizedItemList(itemsAll) {
+        this.updateVirtualizedItemListIntern(itemsAll);
+    }
+    /**
+     * Checks if the specified item is currently virtualized.
+     * If not, the virtualization is recalculated in order that the item is part of the virtualized items.
+     */
+    virtualizeItem(item, itemsAll) {
+        if (this.checkIfItemDisplayed(item) === false) {
+            this.setBasePageForItemToDisplay(item, itemsAll);
+        }
+    }
+    /**
+     * Calculates the first visible tree item based on current scroll position.
+     */
+    calculateFirstVisibleTreeItem() {
+        let item;
+        let totalItemHeight = 0;
+        // Approx Y-position of the middle of the first visible (top) tree item
+        const topItemPos = this.scrollTopPrev +
+            (this.siTreeViewItemHeightService.itemHeight ?? 0) / 2 -
+            this.heightBefore;
+        for (let idx = 0; idx < this._itemsVirtualized.length && totalItemHeight < topItemPos; idx++) {
+            item = this._itemsVirtualized[idx];
+            totalItemHeight += this.isGroupItem(item)
+                ? (this.siTreeViewItemHeightService.groupItemHeight ?? 0)
+                : (this.siTreeViewItemHeightService.itemHeight ?? 0);
+        }
+        return item;
+    }
+    get listItemsCountTotal() {
+        return this.listItemsCountBefore + this.listItemsCountVirtualized + this.listItemsCountAfter;
+    }
+    get groupItemsCountTotal() {
+        return this.groupItemsCountBefore + this.groupItemsCountVirtualized + this.groupItemsCountAfter;
+    }
+    get itemsCountTotal() {
+        return this.listItemsCountTotal + this.groupItemsCountTotal;
+    }
+    get itemsCountVirtualizedMax() {
+        return this.pageSize * this.pagesVirtualized;
+    }
+    updateVirtualizedItemListIntern(itemsAll, scrolledPages) {
+        // Note!!!:
+        // The order of functionality within this method must be maintained as state of this object is changed!!!
+        const itemsVirtualizedOld = this._itemsVirtualized.slice();
+        this._itemsVirtualized = itemsAll.slice(this.pageBase * this.pageSize, this.itemsCountVirtualizedMax + this.pageBase * this.pageSize);
+        this.updateItemsTypeCount(itemsAll, scrolledPages);
+        if (this.siTreeViewService.groupedList) {
+            this.calculateBeforeAndAfterForGroupList();
+        }
+        else {
+            this.calculateBeforeAndAfter();
+        }
+        this.maintainVirtualizationNotifies(itemsVirtualizedOld);
+    }
+    /**
+     * Notifies a consumer about changes of virtualized tree/list items in case of a pageBase change.
+     * One notification is sent for every tree/list item
+     * that went out of the virtualized items list or came into the virtualized items.
+     */
+    maintainVirtualizationNotifies(itemsVirtualizedOld) {
+        const itemsAdded = [];
+        const itemsRemoved = [];
+        for (const item of itemsVirtualizedOld) {
+            if (!this._itemsVirtualized.includes(item)) {
+                itemsRemoved.push(item);
+            }
+        }
+        for (const item of this._itemsVirtualized) {
+            if (!itemsVirtualizedOld.includes(item)) {
+                itemsAdded.push(item);
+            }
+        }
+        if (itemsRemoved.length > 0) {
+            this.itemsVirtualizedChanged.next(new ItemsVirtualizedArgs(itemsRemoved, false));
+        }
+        if (itemsAdded.length > 0) {
+            this.itemsVirtualizedChanged.next(new ItemsVirtualizedArgs(itemsAdded, true));
+        }
+    }
+    calculateBasePage(idx) {
+        this._pageBase = Math.floor(idx / this.pageSize - this.pagesVirtualized / 2);
+        if (this.pageBase < 0) {
+            this._pageBase = 0;
+        }
+    }
+    /**
+     * Calculates the height [px] for the divs before and after the tree list in case of 'grouped' mode!
+     */
+    calculateBeforeAndAfterForGroupList() {
+        const groupItemHeight = this.siTreeViewItemHeightService.groupItemHeight ?? 0;
+        const listItemHeight = this.siTreeViewItemHeightService.itemHeight ?? 0;
+        const scrollHeight = this.listItemsCountTotal * listItemHeight + this.groupItemsCountTotal * groupItemHeight;
+        this._heightBefore =
+            this.listItemsCountBefore * listItemHeight + this.groupItemsCountBefore * groupItemHeight;
+        this._heightAfter =
+            scrollHeight -
+                this.heightBefore -
+                (this.listItemsCountVirtualized * listItemHeight +
+                    this.groupItemsCountVirtualized * groupItemHeight);
+    }
+    /**
+     * Calculates the height [px] for the divs before and after the tree list in case of 'non-grouped' mode!
+     */
+    calculateBeforeAndAfter() {
+        if (this.siTreeViewItemHeightService.itemHeight === undefined ||
+            this.siTreeViewItemHeightService.itemHeight === 0) {
+            return;
+        }
+        const scrollHeight = this.itemsCountTotal * this.siTreeViewItemHeightService.itemHeight;
+        this._heightBefore =
+            this.pageBase * this.pageSize * this.siTreeViewItemHeightService.itemHeight;
+        this._heightAfter =
+            scrollHeight -
+                this.heightBefore -
+                this.itemsVirtualizedCount * this.siTreeViewItemHeightService.itemHeight;
+    }
+    checkIfItemDisplayed(currentItem) {
+        for (const item of this._itemsVirtualized) {
+            if (item === currentItem) {
+                return true;
+            }
+        }
+        return false;
+    }
+    setBasePageForItemToDisplay(item, itemsAll) {
+        for (let i = 0; i < itemsAll.length; i++) {
+            if (itemsAll[i] === item) {
+                this.calculateBasePage(i);
+                this.updateVirtualizedItemListIntern(itemsAll);
+                return;
+            }
+        }
+    }
+    /**
+     * Updates the number of grouped items and list items for the whole list for the different areas:
+     * - The not virtualized items on top of the list (represented by the 'beforeHeight')
+     * - The virtualized items
+     * - The not virtualized items on the bottom of the list (represented by the 'afterHeight')
+     */
+    updateItemsTypeCount(itemsAll, scrolledPages) {
+        if (this.siTreeViewService.groupedList) {
+            this.updateItemsTypeCountForGroupList(itemsAll, scrolledPages);
+        }
+        else {
+            this.groupItemsCountBefore = 0;
+            this.groupItemsCountVirtualized = 0;
+            this.groupItemsCountAfter = 0;
+            this.listItemsCountBefore = this.itemBaseIdx;
+            this.listItemsCountVirtualized = this.itemsVirtualizedCount;
+            this.listItemsCountAfter =
+                itemsAll.length - this.listItemsCountBefore - this.listItemsCountVirtualized;
+        }
+        this.updateItemsTypeCountPerVirtPage();
+        if (this.itemsCountTotal !== itemsAll.length) {
+            console.error('TreeListVirtualizationService: updateVirtualizedItemList().updateListItemsTypeCount() calculation error!');
+        }
+    }
+    /**
+     * Updates the number of grouped items and list items per virtualized page.
+     */
+    updateItemsTypeCountPerVirtPage() {
+        this.listItemsPerVirtPage = [];
+        this.groupItemsPerVirtPage = [];
+        for (let basePgIdx = 0; basePgIdx < this.pagesVirtualized; basePgIdx++) {
+            const baseIdx = basePgIdx * this.pageSize;
+            let groupItemsCount = 0;
+            let listItemsCount = 0;
+            for (let idx = baseIdx; idx < baseIdx + this.pageSize; idx++) {
+                if (idx < this.itemsVirtualized.length) {
+                    const item = this.itemsVirtualized[idx];
+                    if (this.isGroupItem(item)) {
+                        groupItemsCount++;
+                    }
+                    else {
+                        listItemsCount++;
+                    }
+                }
+                else {
+                    break;
+                }
+            }
+            this.listItemsPerVirtPage.push(listItemsCount);
+            this.groupItemsPerVirtPage.push(groupItemsCount);
+        }
+    }
+    calculateVirtPageHeight(index) {
+        if (index >= this.groupItemsPerVirtPage.length) {
+            return 0;
+        }
+        if (this.siTreeViewService.groupedList) {
+            if (this.siTreeViewItemHeightService.itemHeight !== undefined) {
+                return (this.listItemsPerVirtPage[index] * this.siTreeViewItemHeightService.itemHeight +
+                    this.groupItemsPerVirtPage[index] *
+                        (this.siTreeViewItemHeightService.groupItemHeight ?? 0));
+            }
+            else {
+                return (this.groupItemsPerVirtPage[index] *
+                    (this.siTreeViewItemHeightService.groupItemHeight ?? 0));
+            }
+        }
+        else {
+            return this.listItemsPerVirtPage[index] * (this.siTreeViewItemHeightService.itemHeight ?? 0);
+        }
+    }
+    updateItemsTypeCountForGroupList(itemsAll, scrolledPages) {
+        if (scrolledPages !== undefined && scrolledPages !== 0) {
+            this.updateItemsTypeCountForGroupListScrolling(itemsAll, scrolledPages);
+        }
+        else {
+            this.updateListItemsTypeCountForGroupListFull(itemsAll);
+        }
+    }
+    updateItemsTypeCountForGroupListScrolling(itemsAll, scrolledPages) {
+        // this method optimizes the update of the type counters in regards of performance in case of scrolling
+        // the method considers the difference of the pageBase for the calculation of the counters.
+        scrolledPages = scrolledPages ?? 0;
+        const oldBaseIndex = (this.pageBase - scrolledPages) * this.pageSize;
+        const newBaseIndex = this.pageBase * this.pageSize;
+        this.groupItemsCountAfter = this.groupItemsCountAfter + this.groupItemsCountVirtualized;
+        this.listItemsCountAfter = this.listItemsCountAfter + this.listItemsCountVirtualized;
+        this.groupItemsCountVirtualized = 0;
+        this.listItemsCountVirtualized = 0;
+        if (scrolledPages > 0) {
+            for (let idx = oldBaseIndex; idx < newBaseIndex; idx++) {
+                if (this.isGroupItem(itemsAll[idx])) {
+                    this.groupItemsCountBefore++;
+                    this.groupItemsCountAfter--;
+                }
+                else {
+                    this.listItemsCountBefore++;
+                    this.listItemsCountAfter--;
+                }
+            }
+        }
+        else {
+            for (let idx = newBaseIndex; idx < oldBaseIndex; idx++) {
+                if (this.isGroupItem(itemsAll[idx])) {
+                    this.groupItemsCountBefore--;
+                    this.groupItemsCountAfter++;
+                }
+                else {
+                    this.listItemsCountBefore--;
+                    this.listItemsCountAfter++;
+                }
+            }
+        }
+        const upper = newBaseIndex + this.itemsVirtualizedCount;
+        for (let vi = newBaseIndex; vi < upper; vi++) {
+            if (this.isGroupItem(itemsAll[vi])) {
+                this.groupItemsCountVirtualized++;
+            }
+            else {
+                this.listItemsCountVirtualized++;
+            }
+        }
+        this.groupItemsCountAfter = this.groupItemsCountAfter - this.groupItemsCountVirtualized;
+        this.listItemsCountAfter = this.listItemsCountAfter - this.listItemsCountVirtualized;
+    }
+    updateListItemsTypeCountForGroupListFull(itemsAll) {
+        // does fully update the counters for the whole list.
+        this.groupItemsCountBefore = 0;
+        this.groupItemsCountVirtualized = 0;
+        this.groupItemsCountAfter = 0;
+        const virtTop = this.itemBaseIdx + this.itemsVirtualizedCount;
+        for (let i = 0; i < itemsAll.length; i++) {
+            if (this.isGroupItem(itemsAll[i])) {
+                if (i < this.itemBaseIdx) {
+                    this.groupItemsCountBefore++;
+                }
+                else if (i < virtTop) {
+                    this.groupItemsCountVirtualized++;
+                }
+                else {
+                    this.groupItemsCountAfter++;
+                }
+            }
+        }
+        this.listItemsCountBefore = this.itemBaseIdx - this.groupItemsCountBefore;
+        this.listItemsCountVirtualized = this.itemsVirtualizedCount - this.groupItemsCountVirtualized;
+        this.listItemsCountAfter =
+            itemsAll.length -
+                this.listItemsCountBefore -
+                this.listItemsCountVirtualized -
+                this.groupItemsCountBefore -
+                this.groupItemsCountVirtualized -
+                this.groupItemsCountAfter;
+    }
+    isGroupItem(item) {
+        return !item.parent && this.siTreeViewService.groupedList;
+    }
+    handleScrollSimple(scrollTop, itemsAll) {
+        // Notes:
+        // This method is used in case all tree list items are of the same height.
+        // This allows for an optimized and proper calculation of the pageBase.
+        // pageBase stores the index of the first page which is virtualized.
+        // totalDeltaScrollVirt corresponds to the total virtualized items height above the visible are!
+        const totalDeltaScrollVirt = scrollTop - this.heightBefore;
+        let updateVirtList = false;
+        const pageHeight = this.pageSize * (this.siTreeViewItemHeightService.itemHeight ?? 0);
+        const pageBaseOld = this.pageBase;
+        const pageChangeDownTrigger = 3;
+        if (this.scrollTopPrev < scrollTop) {
+            // Scroll down:
+            // We do keep always between two and three pages virtualized above the view, when scrolling down.
+            // => We remove pages from the top only when more than three pages are 'above' the visible view
+            // => It is mandatory, that the trigger points are calculated exactly in order to get a nice scrolling behavior for all situations
+            if (totalDeltaScrollVirt > pageChangeDownTrigger * pageHeight) {
+                const pagesOutsideView = totalDeltaScrollVirt / pageHeight;
+                // Two pages shall remain 'above' the view;
+                // It is important that this number is higher than the trigger when scrolling up (which is one page, see the next else statement)
+                // Thus we have a hysteresis of one page in order to avoid scrollbar jitters!!
+                this._pageBase = this.pageBase + Math.floor(pagesOutsideView) - (pageChangeDownTrigger - 1);
+                updateVirtList = true;
+            }
+        }
+        else if (this.scrollTopPrev > scrollTop) {
+            // scroll up
+            if (totalDeltaScrollVirt < pageHeight) {
+                // we add pages to the top as soon as only one page (or smaller) is 'above' the visible view
+                const pagesOutsideView = totalDeltaScrollVirt / pageHeight;
+                this._pageBase = this.pageBase + Math.floor(pagesOutsideView) - (pageChangeDownTrigger - 2);
+                if (this.pageBase < 0) {
+                    this._pageBase = 0; // pageBase cannot be lower than 0; if pageBase=0 then we have no pages above the visible view.
+                }
+                if (this._pageBase !== pageBaseOld) {
+                    updateVirtList = true;
+                }
+            }
+        }
+        this.scrollTopPrev = scrollTop;
+        if (updateVirtList) {
+            this.updateVirtualizedItemListIntern(itemsAll, this.pageBase - pageBaseOld);
+        }
+    }
+    handleScrollGrouped(scrollTop, itemsAll) {
+        // Notes:
+        // This method is used in case the tree list is grouped => the group items have a different height than the other items.
+        // This allows for an optimized and avaeraged calculation of the new pageBase.
+        // pageBase stores the index of the first page which is virtualized.
+        // totalDeltaScrollVirt corresponds to the total virtualized items height above the visible are!
+        const totalDeltaScrollVirt = scrollTop - this.heightBefore;
+        const pageHeightFirst3 = this.calculateVirtPageHeight(0) +
+            this.calculateVirtPageHeight(1) +
+            this.calculateVirtPageHeight(2);
+        let updateVirtList = false;
+        const pageHeightFirst1 = this.calculateVirtPageHeight(0);
+        const pageHeightAvg = pageHeightFirst3 / 3;
+        const pageBaseOld = this.pageBase;
+        if (this.scrollTopPrev < scrollTop) {
+            // Scroll down:
+            // We do keep always between two and three pages virtualized above the view, when scrolling down.
+            // => We remove pages from the top only when more than three pages are 'above' the visible view.
+            // => It is mandatory, that the trigger points are calculated exactly in order to get a nice scrolling behavior for all situations.
+            if (totalDeltaScrollVirt > pageHeightFirst3) {
+                // Next calculation is averaged. It seems not needed to properly calculate it based on the all the real items.
+                const pagesOutsideView = totalDeltaScrollVirt / pageHeightAvg;
+                // Two pages shall remain 'above' the view;
+                // It is important that this number is higher than the trigger when scrolling up (which is one page, see next else).
+                // Thus we have a hysteresis of one page in order to avoid scrollbar jitters!!
+                this._pageBase = this.pageBase + Math.floor(pagesOutsideView) - 2;
+                updateVirtList = true;
+            }
+        }
+        else if (this.scrollTopPrev > scrollTop) {
+            // scroll up
+            if (totalDeltaScrollVirt < pageHeightFirst1) {
+                // we add pages to the top as soon as only one page (or smaller) is 'above' the visible view
+                const pagesOutsideView = totalDeltaScrollVirt / pageHeightAvg;
+                this._pageBase = this.pageBase + Math.floor(pagesOutsideView) - 1;
+                if (this.pageBase < 0) {
+                    this._pageBase = 0; // pageBase cannot be lower than 0; if pageBase=0 then we have no pages above the visible view.
+                }
+                if (this._pageBase !== pageBaseOld) {
+                    updateVirtList = true;
+                }
+            }
+        }
+        this.scrollTopPrev = scrollTop;
+        if (updateVirtList) {
+            this.updateVirtualizedItemListIntern(itemsAll, this.pageBase - pageBaseOld);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTreeViewVirtualizationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTreeViewVirtualizationService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTreeViewVirtualizationService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/*
+ * WARNING: Parts of this component are made to be used in conjunction with Bootstrap.
+ * Bootstrap is not included with this package and has to be installed separately.
+ */
+const rootDefaults = {
+    label: 'root',
+    level: ROOT_LEVEL,
+    state: 'expanded',
+    selectable: false
+};
+/**
+ * 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.
+ */
+class SiTreeViewComponent {
+    /**
+     * 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 []
+     */
+    contextMenuItems = input([]);
+    /**
+     * The indentation in pixel for the children in respect to its parent.
+     *
+     * @defaultValue DEFAULT_CHILDREN_INDENTATION
+     */
+    childrenIndentation = input(DEFAULT_CHILDREN_INDENTATION);
+    /**
+     * Enable horizontal scrolling. When disabled (the default), an ellipsis is used for overflowing text
+     *
+     * @defaultValue false
+     */
+    horizontalScrolling = input(false, { transform: booleanAttribute });
+    /**
+     * Enable the compact mode, making it more vertically compact.
+     *
+     * @defaultValue false
+     */
+    compactMode = input(false, { transform: booleanAttribute });
+    /**
+     * Enable buttons for collapse and expand all.
+     * Does not work when `flatTree` is enabled.
+     *
+     * @defaultValue false
+     */
+    expandCollapseAll = input(false, { transform: booleanAttribute });
+    /**
+     * Tooltip text shown for the expand all icon.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_TREE_VIEW.EXPAND_ALL:Expand all`
+     * ```
+     */
+    expandAllTooltip = input($localize `:@@SI_TREE_VIEW.EXPAND_ALL:Expand all`);
+    /**
+     * Tooltip text shown for the collapse all icon.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_TREE_VIEW.COLLAPSE_ALL:Collapse all`
+     * ```
+     */
+    collapseAllTooltip = input($localize `:@@SI_TREE_VIEW.COLLAPSE_ALL:Collapse all`);
+    /**
+     * Customize icons for treeview.
+     */
+    icons = input();
+    /**
+     * 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>()
+     * ```
+     */
+    trackByFunction = input(buildTrackByIdentity());
+    /**
+     * Number of rows per page. Used for the virtualization of rows (number of
+     * rows per page).
+     * @defaultValue 10
+     * @defaultref {@link SiTreeViewVirtualizationService#pageSize}
+     */
+    pageSize = input(10, {
+        transform: (value) => (value < 5 ? 5 : value)
+    });
+    /**
+     * Number of pages which are virtualized.
+     * @defaultValue 6
+     * @defaultref {@link SiTreeViewVirtualizationService#pagesVirtualized}
+     */
+    pagesVirtualized = input(6, {
+        transform: (value) => (value < 5 ? 5 : value)
+    });
+    /**
+     * Whether "filled" icons should not be used when a tree item is selected.
+     * Per default filled icons are used when available.
+     * @defaultValue false
+     */
+    disableFilledIcons = input(false, { transform: booleanAttribute });
+    /**
+     * 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
+     */
+    folderStateStart = input(true, { transform: booleanAttribute });
+    /**
+     * 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
+     */
+    isVirtualized = input(true, { transform: booleanAttribute });
+    /**
+     * Sets the root tree items of all the trees (Required).
+     * @defaultValue []
+     * @defaultref {@link _items}
+     */
+    items = input([]);
+    /**
+     * Sets the tree item to be selected.
+     */
+    selectedItem = input();
+    /**
+     * Sets if the tree shall force single tree item selection.
+     * @defaultValue false
+     */
+    singleSelectMode = input(false, { transform: booleanAttribute });
+    /**
+     * Shows or hides additional information below the label.
+     * @defaultValue false
+     */
+    enableDataField1 = input(false, { transform: booleanAttribute });
+    /**
+     * Shows or hides additional information below the label.
+     * @defaultValue false
+     * @defaultref {@link SiTreeViewService#enableDataField2}
+     */
+    enableDataField2 = input(false, { transform: booleanAttribute });
+    /**
+     * Shows or hides state pipe.
+     * @defaultValue true
+     */
+    enableStateIndicator = input(true, { transform: booleanAttribute });
+    /**
+     * Shows or hides icon
+     * @defaultValue true
+     */
+    enableIcon = input(true, { transform: booleanAttribute });
+    /**
+     * Shows or hides context menu button.
+     * @defaultValue true
+     * @defaultref {@link SiTreeViewService#enableContextMenuButton}
+     */
+    enableContextMenuButton = input(true, { transform: booleanAttribute });
+    /**
+     * Allows / disabled selecting of tree items by clicking on them.
+     * @defaultValue false
+     */
+    enableSelection = input(false, { transform: booleanAttribute });
+    /**
+     * 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
+     */
+    deleteChildrenOnCollapse = input(false, { transform: booleanAttribute });
+    /**
+     * 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}
+     */
+    flatTree = input(false);
+    /**
+     * 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}
+     */
+    groupedList = input(false, { transform: booleanAttribute });
+    /**
+     * Sets if the tree items shall show a checkbox.
+     * @defaultValue false
+     * @defaultref {@link SiTreeViewService#enableCheckbox}
+     */
+    enableCheckbox = input(false, { transform: booleanAttribute });
+    /**
+     * Sets if the tree items shall show an optionbox.
+     * @defaultValue false
+     */
+    enableOptionbox = input(false, { transform: booleanAttribute });
+    /**
+     * 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
+     */
+    expandOnClick = input(false, { transform: booleanAttribute });
+    /**
+     * Sets if the checkbox state of a tree item is inherited to its children/parent.
+     * @defaultValue true
+     */
+    inheritChecked = input(true, { transform: booleanAttribute });
+    /**
+     * String to be shown when there are no content actions.
+     *
+     * @defaultValue 'No actions available'
+     */
+    noActionsString = input('No actions available');
+    /** Aria label for the tree view. Needed for a11y, alternatively use {@link ariaLabelledBy}. */
+    ariaLabel = input();
+    /** Aria labelled by for the tree view. Needed for a11y, alternatively use {@link ariaLabel}. */
+    ariaLabelledBy = input();
+    /**
+     * Triggered upon virtualization (or unvirtualization) of a tree item.
+     */
+    itemsVirtualizedChanged = output();
+    /**
+     * Triggered upon clicking the folder of a tree item.
+     */
+    treeItemFolderClicked = output();
+    /**
+     * Triggered upon a state change of the folder of a tree item.
+     */
+    treeItemFolderStateChanged = output();
+    /**
+     * Triggered upon clicking the label of a tree item.
+     */
+    treeItemClicked = output();
+    /**
+     * Triggered upon clicking the checkbox of a tree item.
+     */
+    treeItemCheckboxClicked = output();
+    /**
+     * Triggered upon the request of loading the children of a tree item.
+     */
+    loadChildren = output();
+    /**
+     * Triggered upon the selection of a tree item (multi selection supported).
+     */
+    treeItemsSelected = output();
+    /**
+     * The injected content with included SiTreeViewItemTemplateDirective.
+     */
+    templates;
+    initialized = false;
+    updateTreeItemHeightRequired = true; // must be set to true so the height is initially calculated once at least
+    updateGroupItemHeightRequired = true; // must be set to true so the height is initially calculated once at least
+    selectedTreeItems = [];
+    manuallySelectedTreeItems = false;
+    latestFolderChanged;
+    breadCrumbTreeItems = [];
+    subscriptions = [];
+    multiSelectionStart;
+    _multiSelectionActive = false;
+    domChangeObserver;
+    scroll$;
+    element = inject(ElementRef);
+    siTreeViewService = inject(SiTreeViewService);
+    siTreeViewConverterService = inject(SiTreeViewConverterService);
+    siTreeViewVirtualizationService = inject(SiTreeViewVirtualizationService);
+    siTreeViewItemHeightService = inject(SiTreeViewItemHeightService);
+    cdRef = inject(ChangeDetectorRef);
+    resizeObserver = inject(ResizeObserverService);
+    /**
+     * 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.
+     */
+    virtualRoot = { ...rootDefaults };
+    _items = signal(this.items());
+    updateTreeItemDefaults(item) {
+        item.showCheckbox ??= this.enableCheckbox();
+        item.showOptionbox ??= this.enableOptionbox();
+    }
+    /**
+     * @internal
+     */
+    computedIcons = computed(() => {
+        return {
+            ...DEFAULT_TREE_ICON_SET,
+            ...this.icons()
+        };
+    });
+    /** @internal */
+    scrollChildIntoView = new Subject();
+    /** @internal */
+    childrenLoaded = new Subject();
+    /**
+     * @internal
+     * Used internally by `SiTreeViewItemDirective` to determine if the items have changed,
+     * and render the new items.
+     */
+    evaluateForTreeItemsDiffer = new Subject();
+    /** @internal */
+    hasAnyChildren = true;
+    /**
+     * Gets the height of the div above the virtualized rows.
+     */
+    get heightBefore() {
+        return this.siTreeViewVirtualizationService.heightBefore + 'px';
+    }
+    /**
+     * Gets the height of the div below the virtualized rows.
+     */
+    get heightAfter() {
+        return this.siTreeViewVirtualizationService.heightAfter + 'px';
+    }
+    /**
+     * @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() {
+        return this.isVirtualized()
+            ? this.siTreeViewVirtualizationService.itemsVirtualized
+            : this.siTreeViewConverterService.flattenedTrees;
+    }
+    children;
+    treeItemContentTemplate;
+    nextItmes;
+    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() {
+        // This method is called before afterViewInit. Everywhere else keymanager can be expected to exist.
+        return this.keyManager?.activeItemIndex;
+    }
+    /** Can be used for [cdkDropListData] when using cdk drag and drop. */
+    get dropListItems() {
+        return this.itemsVirtualized;
+    }
+    ngOnChanges(changes) {
+        // Compact mode change the CSS margins so it is necessary to
+        // re-calc the tree item height
+        if (changes.compactMode || changes.enableDataField1 || changes.enableDataField2) {
+            this.updateTreeItemHeightRequired = true;
+        }
+        if (changes.flatTree) {
+            this.handleTreeMode();
+        }
+        if (changes.pageSize) {
+            this.siTreeViewVirtualizationService.pageSize = this.pageSize();
+            this.resetVirtualizedItemList();
+        }
+        if (changes.pagesVirtualized) {
+            this.siTreeViewVirtualizationService.pagesVirtualized = this.pagesVirtualized();
+            this.resetVirtualizedItemList();
+        }
+        if (changes.enableCheckbox) {
+            for (const element of this._items()) {
+                enableCheckboxRecursive(element, this.enableCheckbox());
+            }
+        }
+        if (changes.enableOptionbox) {
+            for (const element of this._items()) {
+                enableOptionboxRecursive(element, this.enableOptionbox());
+            }
+        }
+        if (changes.groupedList) {
+            this.siTreeViewService.groupedList = this.groupedList();
+            if (this.groupedList()) {
+                this.updateGroupItemHeightRequired = true;
+            }
+            this.fillFlattenedTree(this._items(), true);
+        }
+        if (changes.items) {
+            this.treeItemsUpdated();
+        }
+        if (changes.selectedItem) {
+            this.selectTreeItems(this.selectedItem());
+        }
+    }
+    ngOnInit() {
+        this.scroll$ = defer(() => fromEvent(this.treeViewInnerElement.nativeElement, 'scroll'));
+        this.siTreeViewService.scroll$ = this.scroll$;
+        if (this.isVirtualized()) {
+            this.subscriptions.push(this.scroll$.subscribe(event => this.onScroll(event)));
+        }
+        this.subscriptions.push(this.siTreeViewService.clickEvent.subscribe(event => this.onItemClicked(event)));
+        this.subscriptions.push(this.siTreeViewService.folderClickEvent.subscribe(event => this.onItemFolderClicked(event)));
+        this.subscriptions.push(this.siTreeViewService.checkboxClickEvent.subscribe(event => this.onItemCheckboxClicked(event)));
+        this.subscriptions.push(this.siTreeViewService.loadChildrenEvent.subscribe(event => this.onLoadChildren(event)));
+        this.subscriptions.push(this.siTreeViewService.scrollIntoViewEvent.subscribe(event => this.onScrollIntoView(event)));
+        this.subscriptions.push(this.siTreeViewService.focusParentEvent.subscribe(event => {
+            if (!this.flatTree()) {
+                this.focusParentItem(event);
+                return;
+            }
+            this.onFlatTreeNavigateUp();
+        }));
+        this.subscriptions.push(this.siTreeViewService.focusFirstChildEvent.subscribe(event => this.focusFirstChildItem(event)));
+        this.subscriptions.push(this.siTreeViewVirtualizationService.itemsVirtualizedChanged.subscribe((event) => {
+            this.itemsVirtualizedChanged.emit(event);
+            this.evaluateForTreeItemsDiffer.next();
+            this.cdRef.markForCheck();
+        }));
+        this.initialized = true;
+        this.handleTreeMode();
+    }
+    ngAfterViewInit() {
+        this.addClassObserver();
+        this.subscriptions.push(this.monitorTreeSizeChanges().subscribe(d => this.updatePageSize(d)));
+        this.keyManager = new FocusKeyManager(this.getChildren())
+            .withWrap()
+            .withAllowedModifierKeys(['shiftKey'])
+            .withHomeAndEnd()
+            .withTypeAhead();
+        queueMicrotask(() => this.keyManager.updateActiveItem(0));
+    }
+    ngAfterViewChecked() {
+        if (this.updateTreeItemHeightRequired &&
+            this.siTreeViewConverterService.flattenedTrees.length > 0) {
+            const oldHeight = this.siTreeViewItemHeightService.itemHeight;
+            let newHeight;
+            if (this.isVirtualized()) {
+                newHeight = this.siTreeViewItemHeightService.updateItemHeight(this.treeViewInnerElement.nativeElement, this.siTreeViewConverterService.flattenedTrees, this.siTreeViewVirtualizationService.itemBaseIdx, this.siTreeViewVirtualizationService.itemsVirtualizedCount);
+            }
+            else {
+                newHeight = this.siTreeViewItemHeightService.updateItemHeight(this.treeViewInnerElement.nativeElement, this.siTreeViewConverterService.flattenedTrees, 0, this.siTreeViewConverterService.flattenedTrees.length);
+            }
+            if (newHeight !== undefined && newHeight > 0) {
+                this.updateTreeItemHeightRequired = false;
+                if (oldHeight !== newHeight) {
+                    const task = () => {
+                        this.updateVirtualizedItemList();
+                        this.cdRef.markForCheck();
+                    };
+                    asyncScheduler.schedule(task, 0);
+                }
+            }
+        }
+        if (this.updateGroupItemHeightRequired &&
+            this.siTreeViewConverterService.flattenedTrees.length > 0) {
+            const oldHeight = this.siTreeViewItemHeightService.groupItemHeight;
+            let newHeight;
+            if (this.isVirtualized()) {
+                newHeight = this.siTreeViewItemHeightService.updateGroupedItemHeight(this.treeViewInnerElement.nativeElement, this.siTreeViewConverterService.flattenedTrees, this.siTreeViewVirtualizationService.itemBaseIdx, this.siTreeViewVirtualizationService.itemsVirtualizedCount);
+            }
+            else {
+                newHeight = this.siTreeViewItemHeightService.updateGroupedItemHeight(this.treeViewInnerElement.nativeElement, this.siTreeViewConverterService.flattenedTrees, 0, this.siTreeViewConverterService.flattenedTrees.length);
+            }
+            if (newHeight !== undefined) {
+                this.updateGroupItemHeightRequired = false;
+                if (oldHeight !== newHeight) {
+                    const task = () => {
+                        this.updateVirtualizedItemList();
+                        this.cdRef.markForCheck();
+                    };
+                    asyncScheduler.schedule(task, 0);
+                }
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.subscriptions
+            .filter(subscription => !!subscription)
+            .forEach(subscription => subscription.unsubscribe());
+        this.domChangeObserver?.disconnect();
+    }
+    /**
+     * Returns the last breadcrumb tree item. Can be null in case the flat tree
+     * shows the root.
+     */
+    get lastBreadCrumbItem() {
+        const item = this.breadCrumbTreeItems[this.breadCrumbTreeItems.length - 1];
+        return item ? item : null;
+    }
+    /**
+     * Returns true if the header shows the root/home of the tree.
+     */
+    get headerShowsRoot() {
+        return this.lastBreadCrumbItem == null;
+    }
+    /**
+     * Called by the owner of the tree upon returning the retrieved children of a
+     * 'load children' request.
+     */
+    childrenLoadingDone(item, children) {
+        const oldState = item.state ?? 'collapsed';
+        if (item?.state === 'expanding') {
+            initializeTreeItemsRecursive(children, item, itemToUpdate => this.updateTreeItemDefaults(itemToUpdate));
+            item.children = children;
+            item.state = 'expanded';
+        }
+        const newState = item.state ?? 'collapsed';
+        this.updateBreadCrumb(this.evalLowestBreadCrumbNode());
+        if (this.flatTree()) {
+            this.fillFlattenedTree(children);
+            this.focusFirstItemFlattened();
+        }
+        else {
+            this.fillFlattenedTree(this._items());
+        }
+        if (oldState !== newState) {
+            this.treeItemFolderStateChanged.emit(new FolderStateEventArgs(item, oldState, newState));
+        }
+        this.childrenLoaded.next(item);
+        this.cdRef.markForCheck();
+    }
+    onFlatTreeNavigateUp() {
+        if (this.lastBreadCrumbItem) {
+            const last = this.lastBreadCrumbItem;
+            this.onBreadCrumbItemClicked(last.parent);
+            setTimeout(() => this.focusItem(last));
+        }
+    }
+    onFlatTreeNavigateHome() {
+        this.onBreadCrumbItemClicked();
+        this.focusFirstItemFlattened();
+    }
+    getChildren() {
+        return !this.treeItemContentTemplate ? this.children : this.nextItmes;
+    }
+    focusItem(item) {
+        const children = this.getChildren();
+        const component = children?.find(child => child.treeItem === item);
+        if (component) {
+            this.keyManager.setActiveItem(component);
+        }
+    }
+    focusParentItem(item) {
+        const parent = item.parent;
+        if (parent && parent.level !== ROOT_LEVEL) {
+            this.focusItem(parent);
+        }
+    }
+    focusFirstChildItem(item) {
+        const firstChild = item.children?.[0];
+        if (firstChild) {
+            const children = this.getChildren();
+            const firstChildComponent = children?.find(child => child.treeItem === firstChild);
+            if (firstChildComponent) {
+                this.keyManager.setActiveItem(firstChildComponent);
+            }
+        }
+    }
+    /**
+     * 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) {
+        this.doShowTreeItem(item);
+        const task = () => {
+            this.scrollChildIntoView.next(item);
+            this.cdRef.markForCheck();
+        };
+        asyncScheduler.schedule(task, 0);
+    }
+    doShowTreeItem(item, collapseOtherNodes = true) {
+        if (item.parent && item.parent.level !== ROOT_LEVEL) {
+            this.expandTreeItem(item.parent);
+            if (item.parent.parent && item.parent.parent.level !== ROOT_LEVEL) {
+                this.doShowTreeItem(item.parent, collapseOtherNodes);
+            }
+            else if (collapseOtherNodes) {
+                const myRoot = item.parent;
+                for (const root of this._items()) {
+                    if (myRoot !== root) {
+                        this.collapseTreeItem(root);
+                    }
+                }
+            }
+        }
+    }
+    /**
+     * Expands all tree items.
+     * @param items - Optional param for recursion, will expand these items. If empty, all tree items will be expanded.
+     */
+    expandAll(items) {
+        (items ?? this._items()).forEach(item => {
+            if (hasChildren(item) && childrenLoaded(item)) {
+                if (item.state === 'collapsed') {
+                    this.expandTreeItem(item);
+                }
+                this.expandAll(item.children);
+            }
+        });
+    }
+    /**
+     * Expands the provided tree item.
+     * @param item - The tree item to be expanded.
+     */
+    expandTreeItem(item) {
+        const oldState = removeUndefinedState(item.state);
+        expand(item);
+        this.latestFolderChanged = item;
+        this.siTreeViewService.folderClickEvent.next(new FolderStateEventArgs(item, oldState, removeUndefinedState(item.state)));
+    }
+    /**
+     * Collapses all tree items.
+     * @param items - Optional param for recursion, will collapse these items. If empty, all tree items will be collapsed.
+     */
+    collapseAll(items) {
+        (items ?? this._items()).forEach(item => {
+            if (hasChildren(item)) {
+                if (item.state === 'expanded' || item.state === 'expanding') {
+                    this.collapseTreeItem(item);
+                }
+                this.collapseAll(item.children);
+            }
+        });
+        this.resetVirtualizedItemList();
+    }
+    /**
+     * Collapses the provided tree item.
+     * @param item - The tree item to be collapsed.
+     */
+    collapseTreeItem(item) {
+        const oldState = item.state ?? 'collapsed';
+        collapse(item);
+        this.latestFolderChanged = item;
+        this.siTreeViewService.folderClickEvent.next(new FolderStateEventArgs(item, oldState, removeUndefinedState(item.state)));
+    }
+    /**
+     * 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, parent, position) {
+        addChildItems(parent ?? this.virtualRoot, children, position, item => this.updateTreeItemDefaults(item));
+        this.refresh();
+    }
+    /**
+     * 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() {
+        if (!this.flatTree()) {
+            this.fillFlattenedTree(this._items());
+        }
+        else {
+            this.fillFlattenedTree(this.evalListItemsForFlatTreeMode());
+        }
+        this.cdRef.markForCheck();
+    }
+    /**
+     * Scrolls the specified tree item into view. Tree items will be expanded if
+     * required.
+     */
+    scrollItemIntoView(treeItem) {
+        this.onScrollIntoViewByConsumer(treeItem);
+    }
+    evalListItemsForFlatTreeMode() {
+        return this.lastBreadCrumbItem ? (this.lastBreadCrumbItem.children ?? []) : this._items();
+    }
+    collapseChildrenFlatTreeModeOnly(items) {
+        this.collapseChildren(items, true);
+    }
+    collapseChildren(items, flatModeOnly = false) {
+        if (flatModeOnly && !this.flatTree()) {
+            return;
+        }
+        for (const item of items) {
+            if (item.state === 'expanded' || item.state === 'expanding') {
+                const oldState = item.state;
+                collapse(item);
+                this.latestFolderChanged = item;
+                this.treeItemFolderStateChanged.emit(new FolderStateEventArgs(item, oldState, item.state));
+            }
+        }
+    }
+    onKeyUpShift() {
+        if (this._multiSelectionActive) {
+            this._multiSelectionActive = false;
+            this.emitSelectedItems();
+        }
+    }
+    onKeyUpCtrl() {
+        if (this._multiSelectionActive) {
+            this._multiSelectionActive = false;
+            this.emitSelectedItems();
+        }
+    }
+    onKeyUpMeta() {
+        if (this._multiSelectionActive) {
+            this._multiSelectionActive = false;
+            this.emitSelectedItems();
+        }
+    }
+    onMouseLeave() {
+        if (this._multiSelectionActive) {
+            this._multiSelectionActive = false;
+            this.emitSelectedItems();
+        }
+    }
+    handleKeydown(event) {
+        this.keyManager.onKeydown(event);
+    }
+    onItemClicked(event) {
+        let skipFocus = false;
+        if (!event.target.selectable) {
+            return;
+        }
+        this.manuallySelectedTreeItems = true;
+        if ((event.mouseEvent.ctrlKey ||
+            (navigator.userAgent.includes('Mac') && event.mouseEvent.metaKey)) &&
+            !this.singleSelectMode()) {
+            this._multiSelectionActive = true;
+            this.multiSelectionStart = event.target;
+            if (event.target.selected) {
+                skipFocus = true;
+            }
+            event.target.selected = !event.target.selected;
+            if (event.target.selected && !this.singleSelectMode()) {
+                this.selectedTreeItems.push(event.target);
+            }
+            else {
+                const idx = this.selectedTreeItems.indexOf(event.target);
+                if (idx !== -1) {
+                    this.selectedTreeItems.splice(idx, 1);
+                }
+            }
+        }
+        else if (event.mouseEvent.shiftKey && !this.singleSelectMode()) {
+            this._multiSelectionActive = true;
+            // If the anchor has not been established, set it to the first item in the selected
+            // items list if defined ELSE the first item in the tree
+            if (!this.multiSelectionStart) {
+                this.multiSelectionStart = this.selectedTreeItems?.[0] ?? this._items()?.[0];
+            }
+            // If the tree is in flat mode, ensure the anchor is inside the currently selected folder
+            if (this.flatTree()) {
+                const treeItems = (event.target.parent ? event.target.parent.children : this._items()) ?? [];
+                if (treeItems.findIndex(ti => ti === this.multiSelectionStart) < 0) {
+                    // Move anchor to top-level item in current folder!
+                    this.multiSelectionStart = treeItems[0];
+                }
+            }
+            for (const element of this._items()) {
+                selectRecursive(element, false);
+            }
+            this.multiSelectionStart.selected = true;
+            const selectedItems = selectItemsBetween(this._items(), this.multiSelectionStart, event.target);
+            this.selectedTreeItems = [this.multiSelectionStart];
+            if (selectedItems) {
+                this.selectedTreeItems.push(...selectedItems);
+            }
+        }
+        else {
+            this.multiSelectionStart = event.target;
+            for (const element of this._items()) {
+                selectRecursive(element, false);
+            }
+            event.target.selected = true;
+            this.selectedTreeItems = [event.target];
+        }
+        for (const element of this._items()) {
+            resetActive(element);
+        }
+        if (!skipFocus) {
+            setActive(event.target, true);
+        }
+        this.treeItemClicked.emit(event.target);
+        if (!this._multiSelectionActive) {
+            this.emitSelectedItems();
+            // Note, if multi selection would be active, we would emit the selected items only upon 'keyup' event for Shift and Control
+            // and upon document.mouseleave event
+        }
+        this.cdRef.markForCheck();
+        this.siTreeViewService.triggerMarkForCheck.next();
+    }
+    emitSelectedItems() {
+        if (this.enableSelection()) {
+            if (this.siTreeViewService.groupedList) {
+                const filtered = this.selectedTreeItems.filter(item => !this.siTreeViewService.isGroupedItem(item));
+                this.treeItemsSelected.emit(filtered);
+            }
+            else {
+                this.treeItemsSelected.emit(this.selectedTreeItems);
+            }
+        }
+    }
+    handleTreeMode() {
+        let ti;
+        if (this.isVirtualized()) {
+            ti = this.siTreeViewVirtualizationService.calculateFirstVisibleTreeItem();
+        }
+        if (this.flatTree()) {
+            this.siTreeViewService.childrenIndentation = 0;
+            if (this.selectedTreeItems.length && this.manuallySelectedTreeItems) {
+                // manually selected items => display the (children of) parent of the (highest or first) selected item,
+                // if there is no parent display the root node
+                const sorted = this.selectedTreeItems.sort((itemA, itemB) => (itemA.level ?? 0) - (itemB.level ?? 0));
+                this.fillFlattenedTree(sorted[0].parent?.children ?? this._items(), true);
+            }
+            else if (!this.latestFolderChanged) {
+                // no folder state change of any tree item so far => display the root item in the list
+                this.fillFlattenedTree(this._items(), true);
+            }
+            else if (this.latestFolderChanged.state === 'expanded') {
+                this.fillFlattenedTree(this.latestFolderChanged.children ?? [], true);
+            }
+            else if (this.latestFolderChanged.parent) {
+                this.fillFlattenedTree(this.latestFolderChanged.parent?.children ?? [], true);
+            }
+            else {
+                this.fillFlattenedTree(this._items(), true);
+            }
+            this.updateBreadCrumb(this.evalLowestBreadCrumbNode());
+            if (ti && !this.siTreeViewConverterService.flattenedTrees.includes(ti, 0)) {
+                ti = this.siTreeViewConverterService.flattenedTrees[0];
+            }
+        }
+        else {
+            this.siTreeViewService.childrenIndentation = this.childrenIndentation();
+            this.fillFlattenedTree(this._items(), true);
+        }
+        this.onScrollIntoViewByConsumer(ti);
+    }
+    evalLowestBreadCrumbNode() {
+        if (this.latestFolderChanged) {
+            return this.latestFolderChanged.state === 'expanded'
+                ? this.latestFolderChanged
+                : this.latestFolderChanged.parent;
+        }
+        return undefined;
+    }
+    treeViewInnerElement;
+    onItemFolderClicked(eventArgs) {
+        this.treeItemFolderClicked.emit(eventArgs);
+        this.treeItemFolderStateChanged.emit(eventArgs);
+        this.latestFolderChanged = eventArgs.treeItem;
+        this.updateBreadCrumb(this.evalLowestBreadCrumbNode());
+        if (!this.flatTree()) {
+            this.fillFlattenedTree(this._items());
+        }
+        else if (this.latestFolderChanged.state === 'expanded') {
+            this.fillFlattenedTree(this.latestFolderChanged.children ?? []);
+            this.focusFirstItemFlattened();
+        }
+    }
+    updateBreadCrumb(treeItem) {
+        if (!treeItem || treeItem.level === ROOT_LEVEL) {
+            this.breadCrumbTreeItems = [];
+        }
+        else {
+            this.breadCrumbTreeItems = [treeItem];
+            this.pushParentItemsIntoBreadCrumbRecursive(treeItem);
+            this.breadCrumbTreeItems = this.breadCrumbTreeItems.reverse();
+        }
+    }
+    pushParentItemsIntoBreadCrumbRecursive(treeItem) {
+        if (treeItem?.parent && treeItem?.parent?.level !== ROOT_LEVEL) {
+            this.breadCrumbTreeItems.push(treeItem.parent);
+            this.pushParentItemsIntoBreadCrumbRecursive(treeItem.parent);
+        }
+    }
+    onItemCheckboxClicked(eventArgs) {
+        this.siTreeViewService.triggerMarkForCheck.next();
+        this.treeItemCheckboxClicked.emit(eventArgs);
+    }
+    onLoadChildren(treeItem) {
+        this.loadChildren.emit(new LoadChildrenEventArgs(treeItem, (item, children) => this.childrenLoadingDone(item, children)));
+    }
+    setFlatTreeSelectedFolder(treeItem) {
+        if (this.flatTree()) {
+            this.latestFolderChanged = treeItem;
+            if (treeItem) {
+                expand(treeItem);
+            }
+            this.onBreadCrumbItemClicked(treeItem);
+        }
+    }
+    onBreadCrumbItemClicked(treeItem) {
+        if (treeItem && treeItem.level !== ROOT_LEVEL) {
+            this.fillFlattenedTree(treeItem.children ?? [], true);
+            this.focusFirstItemFlattened();
+        }
+        else {
+            this.fillFlattenedTree(this._items(), true);
+            this.focusFirstItemFlattened();
+        }
+        this.updateBreadCrumb(treeItem);
+    }
+    onScroll(event) {
+        if (this.isVirtualized()) {
+            const scrollTop = event.target.scrollTop;
+            this.siTreeViewVirtualizationService.handleScroll(scrollTop, this.siTreeViewConverterService.flattenedTrees);
+        }
+    }
+    /**
+     * Called by the consumer when he wants a node to be scrolled into view.
+     */
+    onScrollIntoViewByConsumer(treeItem) {
+        if (treeItem) {
+            if (this.isVirtualized()) {
+                this.siTreeViewVirtualizationService.virtualizeItem(treeItem, this.siTreeViewConverterService.flattenedTrees);
+            }
+            // wait one cycle until the new children (in case of page virtualization) are created
+            const task = () => {
+                this.doShowTreeItem(treeItem, false); // keep previously opened nodes as it is
+                asyncScheduler.schedule(() => {
+                    this.scrollChildIntoView.next(treeItem);
+                    this.cdRef.markForCheck();
+                }, 0);
+            };
+            asyncScheduler.schedule(task, 0);
+        }
+    }
+    onScrollIntoView(elementTreeItem) {
+        const clientRectNode = elementTreeItem.nativeElement.getBoundingClientRect();
+        const clientRect = this.element.nativeElement.getBoundingClientRect();
+        if (clientRectNode.top < clientRect.top ||
+            clientRectNode.top + this.siTreeViewItemHeightService.itemHeight > clientRect.bottom) {
+            elementTreeItem.nativeElement.scrollIntoView();
+        }
+        this.cdRef.markForCheck();
+    }
+    fillFlattenedTree(items, resetVirtualization = false) {
+        this.collapseChildrenFlatTreeModeOnly(items);
+        this.siTreeViewConverterService.fillFlattenedTree(items, this.flatTree());
+        if (resetVirtualization) {
+            this.resetVirtualizedItemList();
+        }
+        else {
+            this.updateVirtualizedItemList();
+        }
+        this.evaluateForTreeItemsDiffer.next();
+    }
+    focusFirstItemFlattened() {
+        setTimeout(() => this.keyManager.setFirstItemActive());
+    }
+    updateHasChildren() {
+        this.hasAnyChildren = !!this.siTreeViewConverterService.flattenedTrees?.some(item => hasChildren(item));
+    }
+    updateVirtualizedItemList() {
+        this.updateHasChildren();
+        if (this.isVirtualized() && this.initialized) {
+            this.siTreeViewVirtualizationService.updateVirtualizedItemList(this.siTreeViewConverterService.flattenedTrees);
+            this.cdRef.markForCheck();
+        }
+    }
+    resetVirtualizedItemList() {
+        this.updateHasChildren();
+        if (this.isVirtualized() && this.initialized) {
+            this.siTreeViewVirtualizationService.resetVirtualizedItemList(this.siTreeViewConverterService.flattenedTrees);
+        }
+    }
+    /**
+     * 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.
+     */
+    addClassObserver() {
+        this.domChangeObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                this.updateTreeItemHeightRequired = true;
+                if (this.groupedList()) {
+                    this.updateGroupItemHeightRequired = true;
+                }
+                this.cdRef.markForCheck();
+            });
+        });
+        this.domChangeObserver.observe(this.element.nativeElement, {
+            attributeFilter: ['class', 'style']
+        });
+    }
+    /**
+     * 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.
+     */
+    monitorTreeSizeChanges() {
+        const resize = this.resizeObserver.observe(this.element.nativeElement, 100, true, true);
+        const merged = merge(resize, this.siTreeViewItemHeightService.itemHeightChange);
+        return merged.pipe(withLatestFrom(resize), map(x => x[1]));
+    }
+    /**
+     * Dynamically calculate and update the virtual pageSize to render the correct amount of tree items.
+     * @param dimension - current tree dimensions.
+     */
+    updatePageSize(dimension) {
+        if (this.isVirtualized()) {
+            // Re-calc number of virtualized items based on the visible component dimensions
+            const itemHeight = this.siTreeViewItemHeightService.itemHeight;
+            // Proceeding with itemHeight==0 leads to an error in
+            // SiTreeViewVirtualizationService.updateListItemsTypeCount. It happens
+            // when the component is created but not yet visible.
+            if (!itemHeight) {
+                return;
+            }
+            // Set page size to half the no. of items visible on the screen following
+            // the recommendations in SiTreeViewVirtualizationService.
+            const pageSize = Math.floor(dimension.height / itemHeight / 2);
+            // Once the pageSize is initialized we are only allowed to increase
+            // the number of virtualized items but do never reduce the size.
+            // Since this would lead to a incorrect calculation of heightAfter
+            // (see calculateBeforeAndAfter)
+            if (pageSize > 0 && pageSize > this.siTreeViewVirtualizationService.pageSize) {
+                this.siTreeViewVirtualizationService.pageSize = pageSize;
+            }
+        }
+    }
+    /**
+     * Make sure to always have a single item for single selection or if there is only one item in the array.
+     */
+    coerceToSelectionType(treeItem) {
+        if (Array.isArray(treeItem) && (treeItem.length <= 1 || this.singleSelectMode())) {
+            // If array is empty, this will set it to undefined
+            return treeItem[0];
+        }
+        return treeItem;
+    }
+    treeItemsUpdated() {
+        this.selectedTreeItems = [];
+        const items = this.items();
+        this._items.set(items);
+        this.virtualRoot = { ...rootDefaults, children: items };
+        setTreeItemDefaults(this.virtualRoot, item => this.updateTreeItemDefaults(item));
+        initializeTreeItemsRecursive(items, this.virtualRoot, item => this.updateTreeItemDefaults(item));
+        this.fillFlattenedTree(items, true);
+        this.latestFolderChanged = items[0];
+    }
+    selectTreeItems(treeItem) {
+        const items = this.coerceToSelectionType(treeItem);
+        const isMultipleTreeItems = Array.isArray(items);
+        if ((isMultipleTreeItems && items.length) ||
+            (!isMultipleTreeItems && items) ||
+            this.selectedTreeItems.length) {
+            this.manuallySelectedTreeItems = false;
+        }
+        if (!isMultipleTreeItems && items && !items.selectable) {
+            return;
+        }
+        for (const element of this._items()) {
+            selectRecursive(element, false);
+        }
+        this.selectedTreeItems = [];
+        if (!items) {
+            this.siTreeViewService.triggerMarkForCheck.next();
+            return;
+        }
+        // If this is single select or multi select with only one item
+        if (!isMultipleTreeItems) {
+            items.selected = true;
+            this.selectedTreeItems.push(items);
+            this.setFlatTreeSelectedFolder(items.parent);
+            if (this.isVirtualized()) {
+                this.siTreeViewVirtualizationService.virtualizeItem(items, this.siTreeViewConverterService.flattenedTrees);
+            }
+            // wait one cycle until the new children (in case of page virtualization) are created
+            const task = () => {
+                this.scrollChildIntoView.next(items);
+                this.cdRef.markForCheck();
+                this.siTreeViewService.triggerMarkForCheck.next();
+            };
+            asyncScheduler.schedule(task, 0);
+        }
+        else {
+            // Multi select with multiple items
+            const task = () => {
+                for (const item of items) {
+                    if (item.selectable === false) {
+                        continue;
+                    }
+                    item.selected = true;
+                    this.selectedTreeItems.push(item);
+                }
+                this.cdRef.markForCheck();
+                this.siTreeViewService.triggerMarkForCheck.next();
+            };
+            asyncScheduler.schedule(task, 0);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTreeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiTreeViewComponent, isStandalone: true, selector: "si-tree-view", inputs: { contextMenuItems: { classPropertyName: "contextMenuItems", publicName: "contextMenuItems", isSignal: true, isRequired: false, transformFunction: null }, childrenIndentation: { classPropertyName: "childrenIndentation", publicName: "childrenIndentation", isSignal: true, isRequired: false, transformFunction: null }, horizontalScrolling: { classPropertyName: "horizontalScrolling", publicName: "horizontalScrolling", isSignal: true, isRequired: false, transformFunction: null }, compactMode: { classPropertyName: "compactMode", publicName: "compactMode", isSignal: true, isRequired: false, transformFunction: null }, expandCollapseAll: { classPropertyName: "expandCollapseAll", publicName: "expandCollapseAll", isSignal: true, isRequired: false, transformFunction: null }, expandAllTooltip: { classPropertyName: "expandAllTooltip", publicName: "expandAllTooltip", isSignal: true, isRequired: false, transformFunction: null }, collapseAllTooltip: { classPropertyName: "collapseAllTooltip", publicName: "collapseAllTooltip", isSignal: true, isRequired: false, transformFunction: null }, icons: { classPropertyName: "icons", publicName: "icons", isSignal: true, isRequired: false, transformFunction: null }, trackByFunction: { classPropertyName: "trackByFunction", publicName: "trackByFunction", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pagesVirtualized: { classPropertyName: "pagesVirtualized", publicName: "pagesVirtualized", isSignal: true, isRequired: false, transformFunction: null }, disableFilledIcons: { classPropertyName: "disableFilledIcons", publicName: "disableFilledIcons", isSignal: true, isRequired: false, transformFunction: null }, folderStateStart: { classPropertyName: "folderStateStart", publicName: "folderStateStart", isSignal: true, isRequired: false, transformFunction: null }, isVirtualized: { classPropertyName: "isVirtualized", publicName: "isVirtualized", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selectedItem: { classPropertyName: "selectedItem", publicName: "selectedItem", isSignal: true, isRequired: false, transformFunction: null }, singleSelectMode: { classPropertyName: "singleSelectMode", publicName: "singleSelectMode", isSignal: true, isRequired: false, transformFunction: null }, enableDataField1: { classPropertyName: "enableDataField1", publicName: "enableDataField1", isSignal: true, isRequired: false, transformFunction: null }, enableDataField2: { classPropertyName: "enableDataField2", publicName: "enableDataField2", isSignal: true, isRequired: false, transformFunction: null }, enableStateIndicator: { classPropertyName: "enableStateIndicator", publicName: "enableStateIndicator", isSignal: true, isRequired: false, transformFunction: null }, enableIcon: { classPropertyName: "enableIcon", publicName: "enableIcon", isSignal: true, isRequired: false, transformFunction: null }, enableContextMenuButton: { classPropertyName: "enableContextMenuButton", publicName: "enableContextMenuButton", isSignal: true, isRequired: false, transformFunction: null }, enableSelection: { classPropertyName: "enableSelection", publicName: "enableSelection", isSignal: true, isRequired: false, transformFunction: null }, deleteChildrenOnCollapse: { classPropertyName: "deleteChildrenOnCollapse", publicName: "deleteChildrenOnCollapse", isSignal: true, isRequired: false, transformFunction: null }, flatTree: { classPropertyName: "flatTree", publicName: "flatTree", isSignal: true, isRequired: false, transformFunction: null }, groupedList: { classPropertyName: "groupedList", publicName: "groupedList", isSignal: true, isRequired: false, transformFunction: null }, enableCheckbox: { classPropertyName: "enableCheckbox", publicName: "enableCheckbox", isSignal: true, isRequired: false, transformFunction: null }, enableOptionbox: { classPropertyName: "enableOptionbox", publicName: "enableOptionbox", isSignal: true, isRequired: false, transformFunction: null }, expandOnClick: { classPropertyName: "expandOnClick", publicName: "expandOnClick", isSignal: true, isRequired: false, transformFunction: null }, inheritChecked: { classPropertyName: "inheritChecked", publicName: "inheritChecked", isSignal: true, isRequired: false, transformFunction: null }, noActionsString: { classPropertyName: "noActionsString", publicName: "noActionsString", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemsVirtualizedChanged: "itemsVirtualizedChanged", treeItemFolderClicked: "treeItemFolderClicked", treeItemFolderStateChanged: "treeItemFolderStateChanged", treeItemClicked: "treeItemClicked", treeItemCheckboxClicked: "treeItemCheckboxClicked", loadChildren: "loadChildren", treeItemsSelected: "treeItemsSelected" }, host: { listeners: { "document:keyup.shift": "onKeyUpShift()", "document:keyup.control": "onKeyUpCtrl()", "document:keyup.meta": "onKeyUpMeta()", "document:mouseleave": "onMouseLeave()", "keydown": "handleKeydown($event)" } }, providers: [
+            SiTreeViewConverterService,
+            SiTreeViewItemHeightService,
+            SiTreeViewService,
+            SiTreeViewVirtualizationService
+        ], queries: [{ propertyName: "treeItemContentTemplate", first: true, predicate: SiTreeViewItemDirective, descendants: true, read: TemplateRef }, { propertyName: "templates", predicate: SiTreeViewItemTemplateDirective }, { propertyName: "nextItmes", predicate: SiTreeViewItemComponent, descendants: true }], viewQueries: [{ propertyName: "treeViewInnerElement", first: true, predicate: ["treeViewInner"], descendants: true, read: ElementRef, static: true }, { propertyName: "children", predicate: SiTreeViewItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (!flatTree() && expandCollapseAll()) {\n  <div class=\"si-tree-view-expand-collapse-container p-4\">\n    <button\n      class=\"btn btn-sm btn-circle btn-tertiary\"\n      type=\"button\"\n      [title]=\"expandAllTooltip() | translate\"\n      (click)=\"expandAll()\"\n    >\n      <span class=\"element-expand-all\"></span>\n    </button>\n    <button\n      class=\"btn btn-sm btn-circle btn-tertiary ms-4\"\n      type=\"button\"\n      [title]=\"collapseAllTooltip() | translate\"\n      (click)=\"collapseAll()\"\n    >\n      <span class=\"element-collapse-all\"></span>\n    </button>\n  </div>\n}\n@if (flatTree()) {\n  <div class=\"si-tree-view-header\">\n    <span\n      class=\"si-tree-view-header-btn si-tree-view-header-root\"\n      tabindex=\"0\"\n      [class.disabled]=\"headerShowsRoot\"\n      [ngClass]=\"computedIcons().headerHome\"\n      (click)=\"onFlatTreeNavigateHome()\"\n      (keydown.enter)=\"onFlatTreeNavigateHome()\"\n    ></span>\n    @if (lastBreadCrumbItem) {\n      <span\n        class=\"si-tree-view-header-btn\"\n        tabindex=\"0\"\n        [class.disabled]=\"headerShowsRoot\"\n        [ngClass]=\"computedIcons().headerArrow\"\n        (click)=\"onFlatTreeNavigateUp()\"\n        (keydown.enter)=\"onFlatTreeNavigateUp()\"\n      ></span>\n    }\n    @if (lastBreadCrumbItem) {\n      <span class=\"text-center text-truncate\">{{ lastBreadCrumbItem.label | translate }}</span>\n    }\n  </div>\n}\n<div\n  #treeViewInner\n  cdkScrollable\n  class=\"si-tree-view focus-inside\"\n  role=\"tree\"\n  [attr.aria-multiselectable]=\"!singleSelectMode()\"\n  [attr.aria-label]=\"ariaLabel() ? (ariaLabel() | translate) : undefined\"\n  [attr.aria-labelledby]=\"ariaLabelledBy()\"\n  [class.si-tree-horizontal-scroll]=\"horizontalScrolling()\"\n  [class.si-tree-view-flat]=\"flatTree()\"\n  [class.si-tree-expand-collapse]=\"!flatTree() && expandCollapseAll()\"\n>\n  @if (isVirtualized()) {\n    <div [class.w-100]=\"horizontalScrolling()\" [style.height]=\"heightBefore\"></div>\n  }\n  @if (itemsVirtualized) {\n    <div class=\"si-tree-view-root-ul\">\n      <ng-content select=\"[cdkDropList], [siTreeViewItem]\" />\n      @if (!treeItemContentTemplate) {\n        <si-tree-view-item *siTreeViewItem=\"let index = index; let treeItem = treeItem\" />\n      }\n    </div>\n  }\n  @if (isVirtualized()) {\n    <div [class.w-100]=\"horizontalScrolling()\" [style.height]=\"heightAfter\"></div>\n  }\n</div>\n", styles: [":host{--si-tree-view-background: var(--element-base-1);--si-tree-view-border-color: var(--element-ui-4);--si-tree-view-icon-size: 24px;--si-tree-view-padding-base-horizontal: 8px;--si-tree-view-padding-base-vertical: 8px;--si-tree-view-item-hover-color: var(--element-base-1-hover);--si-tree-view-item-select-color: var(--element-base-1-selected);--si-tree-view-item-line-height: 1.143;--si-tree-view-item-min-height: 40px;--si-tree-view-item-object-data-field-1-color: var(--element-text-secondary);--si-tree-view-item-object-data-h5-font-size: .875rem;--si-tree-view-item-object-data-h5-font-weight: normal}:host-context(.tree-sm){--si-tree-view-item-min-height: 32px;--si-tree-view-padding-base-vertical: 0px}:host-context(.tree-xs){--si-tree-view-item-min-height: 24px;--si-tree-view-padding-base-vertical: 0px}:host{display:flex;flex-direction:column;background-color:var(--si-tree-view-background)}.si-tree-view-header{padding:calc(var(--si-tree-view-padding-base-horizontal) / 2);border-block-end:1px solid var(--si-tree-view-border-color)}.si-tree-view-header>*{align-self:center}.si-tree-view-header-btn{cursor:pointer;margin-inline-end:calc(var(--si-tree-view-padding-base-horizontal) / 2);font-size:var(--si-tree-view-icon-size)}.si-tree-view-header-root{margin-inline-end:0}.si-tree-view{overflow:auto;flex:1 0 0;min-block-size:0}.si-tree-view.si-tree-horizontal-scroll{display:flex;flex-wrap:wrap;align-content:flex-start}.si-tree-view-root-ul{list-style:none;padding:0;margin:0;flex:1 1 auto}::ng-deep .si-tree-view-top-level-item{margin-block-start:8px}.si-tree-expand-collapse ::ng-deep .si-tree-view-top-level-item:first-child{margin-block-start:0}@supports (-webkit-touch-callout: none){.si-tree-horizontal-scroll{transform:translateZ(0)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }, { kind: "component", type: SiTreeViewItemComponent, selector: "si-tree-view-item" }, { kind: "ngmodule", type: CdkScrollableModule }, { kind: "directive", type: i2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: SiTreeViewItemDirective, selector: "[siTreeViewItem]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTreeViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-tree-view', providers: [
+                        SiTreeViewConverterService,
+                        SiTreeViewItemHeightService,
+                        SiTreeViewService,
+                        SiTreeViewVirtualizationService
+                    ], imports: [
+                        NgClass,
+                        SiTranslateModule,
+                        SiTreeViewItemComponent,
+                        CdkScrollableModule,
+                        SiTreeViewItemDirective
+                    ], template: "@if (!flatTree() && expandCollapseAll()) {\n  <div class=\"si-tree-view-expand-collapse-container p-4\">\n    <button\n      class=\"btn btn-sm btn-circle btn-tertiary\"\n      type=\"button\"\n      [title]=\"expandAllTooltip() | translate\"\n      (click)=\"expandAll()\"\n    >\n      <span class=\"element-expand-all\"></span>\n    </button>\n    <button\n      class=\"btn btn-sm btn-circle btn-tertiary ms-4\"\n      type=\"button\"\n      [title]=\"collapseAllTooltip() | translate\"\n      (click)=\"collapseAll()\"\n    >\n      <span class=\"element-collapse-all\"></span>\n    </button>\n  </div>\n}\n@if (flatTree()) {\n  <div class=\"si-tree-view-header\">\n    <span\n      class=\"si-tree-view-header-btn si-tree-view-header-root\"\n      tabindex=\"0\"\n      [class.disabled]=\"headerShowsRoot\"\n      [ngClass]=\"computedIcons().headerHome\"\n      (click)=\"onFlatTreeNavigateHome()\"\n      (keydown.enter)=\"onFlatTreeNavigateHome()\"\n    ></span>\n    @if (lastBreadCrumbItem) {\n      <span\n        class=\"si-tree-view-header-btn\"\n        tabindex=\"0\"\n        [class.disabled]=\"headerShowsRoot\"\n        [ngClass]=\"computedIcons().headerArrow\"\n        (click)=\"onFlatTreeNavigateUp()\"\n        (keydown.enter)=\"onFlatTreeNavigateUp()\"\n      ></span>\n    }\n    @if (lastBreadCrumbItem) {\n      <span class=\"text-center text-truncate\">{{ lastBreadCrumbItem.label | translate }}</span>\n    }\n  </div>\n}\n<div\n  #treeViewInner\n  cdkScrollable\n  class=\"si-tree-view focus-inside\"\n  role=\"tree\"\n  [attr.aria-multiselectable]=\"!singleSelectMode()\"\n  [attr.aria-label]=\"ariaLabel() ? (ariaLabel() | translate) : undefined\"\n  [attr.aria-labelledby]=\"ariaLabelledBy()\"\n  [class.si-tree-horizontal-scroll]=\"horizontalScrolling()\"\n  [class.si-tree-view-flat]=\"flatTree()\"\n  [class.si-tree-expand-collapse]=\"!flatTree() && expandCollapseAll()\"\n>\n  @if (isVirtualized()) {\n    <div [class.w-100]=\"horizontalScrolling()\" [style.height]=\"heightBefore\"></div>\n  }\n  @if (itemsVirtualized) {\n    <div class=\"si-tree-view-root-ul\">\n      <ng-content select=\"[cdkDropList], [siTreeViewItem]\" />\n      @if (!treeItemContentTemplate) {\n        <si-tree-view-item *siTreeViewItem=\"let index = index; let treeItem = treeItem\" />\n      }\n    </div>\n  }\n  @if (isVirtualized()) {\n    <div [class.w-100]=\"horizontalScrolling()\" [style.height]=\"heightAfter\"></div>\n  }\n</div>\n", styles: [":host{--si-tree-view-background: var(--element-base-1);--si-tree-view-border-color: var(--element-ui-4);--si-tree-view-icon-size: 24px;--si-tree-view-padding-base-horizontal: 8px;--si-tree-view-padding-base-vertical: 8px;--si-tree-view-item-hover-color: var(--element-base-1-hover);--si-tree-view-item-select-color: var(--element-base-1-selected);--si-tree-view-item-line-height: 1.143;--si-tree-view-item-min-height: 40px;--si-tree-view-item-object-data-field-1-color: var(--element-text-secondary);--si-tree-view-item-object-data-h5-font-size: .875rem;--si-tree-view-item-object-data-h5-font-weight: normal}:host-context(.tree-sm){--si-tree-view-item-min-height: 32px;--si-tree-view-padding-base-vertical: 0px}:host-context(.tree-xs){--si-tree-view-item-min-height: 24px;--si-tree-view-padding-base-vertical: 0px}:host{display:flex;flex-direction:column;background-color:var(--si-tree-view-background)}.si-tree-view-header{padding:calc(var(--si-tree-view-padding-base-horizontal) / 2);border-block-end:1px solid var(--si-tree-view-border-color)}.si-tree-view-header>*{align-self:center}.si-tree-view-header-btn{cursor:pointer;margin-inline-end:calc(var(--si-tree-view-padding-base-horizontal) / 2);font-size:var(--si-tree-view-icon-size)}.si-tree-view-header-root{margin-inline-end:0}.si-tree-view{overflow:auto;flex:1 0 0;min-block-size:0}.si-tree-view.si-tree-horizontal-scroll{display:flex;flex-wrap:wrap;align-content:flex-start}.si-tree-view-root-ul{list-style:none;padding:0;margin:0;flex:1 1 auto}::ng-deep .si-tree-view-top-level-item{margin-block-start:8px}.si-tree-expand-collapse ::ng-deep .si-tree-view-top-level-item:first-child{margin-block-start:0}@supports (-webkit-touch-callout: none){.si-tree-horizontal-scroll{transform:translateZ(0)}}\n"] }]
+        }], propDecorators: { templates: [{
+                type: ContentChildren,
+                args: [SiTreeViewItemTemplateDirective]
+            }], children: [{
+                type: ViewChildren,
+                args: [SiTreeViewItemComponent]
+            }], treeItemContentTemplate: [{
+                type: ContentChild,
+                args: [SiTreeViewItemDirective, { read: TemplateRef }]
+            }], nextItmes: [{
+                type: ContentChildren,
+                args: [SiTreeViewItemComponent, { descendants: true }]
+            }], onKeyUpShift: [{
+                type: HostListener,
+                args: ['document:keyup.shift']
+            }], onKeyUpCtrl: [{
+                type: HostListener,
+                args: ['document:keyup.control']
+            }], onKeyUpMeta: [{
+                type: HostListener,
+                args: ['document:keyup.meta']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['document:mouseleave']
+            }], handleKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], treeViewInnerElement: [{
+                type: ViewChild,
+                args: ['treeViewInner', { read: ElementRef, static: true }]
+            }] } });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiTreeViewModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTreeViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SiTreeViewModule, imports: [SiTreeViewComponent,
+            SiTreeViewItemComponent,
+            SiTreeViewItemDirective,
+            SiTreeViewItemTemplateDirective], exports: [SiTreeViewComponent,
+            SiTreeViewItemComponent,
+            SiTreeViewItemDirective,
+            SiTreeViewItemTemplateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTreeViewModule, imports: [SiTreeViewComponent,
+            SiTreeViewItemComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTreeViewModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        SiTreeViewComponent,
+                        SiTreeViewItemComponent,
+                        SiTreeViewItemDirective,
+                        SiTreeViewItemTemplateDirective
+                    ],
+                    exports: [
+                        SiTreeViewComponent,
+                        SiTreeViewItemComponent,
+                        SiTreeViewItemDirective,
+                        SiTreeViewItemTemplateDirective
+                    ]
+                }]
+        }] });
+
+/**
+ *
+ * @param treeItems - TreeItem array which is used with the si-tree-view.
+ * @param event - event object which is emitted by cdkDropListDropped.
+ * @returns reordered TreeItems list.
+ */
+const reorderTreeItem = (treeItems, event) => {
+    if (event.currentIndex === event.previousIndex) {
+        return treeItems;
+    }
+    const targetIndex = event.currentIndex < event.previousIndex ? event.currentIndex - 1 : event.currentIndex;
+    modifyTreeStructure(treeItems, event, treeItems, targetIndex);
+    return treeItems;
+};
+/**
+ *
+ * @param sourceTreeItems - TreeItem array of the source tree from where item is being dragged.
+ * @param targetTreeItems - TreeItem array of the target tree where item is being dropped.
+ * @param event - event object which is emitted by cdkDropListDropped.
+ * @param removeFromSource - whether to remove item from its source tree after moving to target.
+ * @returns modified TreeItems list of source and target trees.
+ */
+const transferTreeItem = (sourceTreeItems, targetTreeItems, event, removeFromSource = false) => {
+    modifyTreeStructure(sourceTreeItems, event, targetTreeItems, event.currentIndex - 1, removeFromSource);
+    return {
+        sourceTree: sourceTreeItems,
+        targetTree: targetTreeItems
+    };
+};
+/**
+ *
+ * @param sourceTree - TreeItems array from where item needs to be removed.
+ * @param itemToRemove - TreeItem which needs to be removed.
+ * @returns Updated TreeItems array.
+ */
+const removeItemFromTree = (sourceTree, itemToRemove) => {
+    const sourceItem = findTreeItem(sourceTree, itemToRemove);
+    const itemParent = sourceItem?.parent;
+    if (!itemParent) {
+        console.error('Item parent not found.');
+        return sourceTree;
+    }
+    if (itemParent.children) {
+        const itemIndex = itemParent.children.indexOf(itemToRemove);
+        itemParent.children?.splice(itemIndex, 1);
+    }
+    return sourceTree;
+};
+const findTreeItem = (array, targetItem) => {
+    for (const obj of array) {
+        // Check if the current item reference is the same as the target object reference
+        if (obj === targetItem) {
+            return obj; // Found the item, return it
+        }
+        // If the current item has nested children, recursively search within them
+        const key = 'children';
+        if (Array.isArray(obj[key])) {
+            const found = findTreeItem(obj[key], targetItem);
+            if (found)
+                return found; // If found in nested array, return it
+        }
+    }
+    return null; // Object not found
+};
+const modifyTreeStructure = (sourceItems, event, targetItems, targetIndex, removeFromSource = true) => {
+    const sourceTreeItem = findTreeItem(sourceItems, event.previousContainer.data[event.previousIndex]);
+    if (!sourceTreeItem) {
+        console.error('Source tree item not found');
+        return;
+    }
+    const sourceTreeItemCopy = structuredClone(sourceTreeItem);
+    const targetTreeItem = findTreeItem(targetItems, event.container.data[targetIndex < 0 ? 0 : targetIndex]);
+    if (!targetTreeItem) {
+        console.error('Target tree item not found');
+        return;
+    }
+    if (findTreeItem(sourceTreeItem.children, targetTreeItem)) {
+        console.error('Cannot move parent into its own child');
+        return;
+    }
+    const targetItemParent = targetTreeItem?.parent;
+    if (targetIndex < 0) {
+        sourceTreeItemCopy.parent = targetItemParent;
+        sourceTreeItemCopy.level = targetItemParent?.level ? targetItemParent.level + 1 : 0;
+        targetItemParent?.children?.splice(0, 0, sourceTreeItemCopy);
+    }
+    else if (targetTreeItem?.state === 'expanded') {
+        sourceTreeItemCopy.parent = targetTreeItem;
+        sourceTreeItemCopy.level = targetTreeItem.level ? targetTreeItem.level + 1 : 0;
+        if (targetTreeItem.children?.length) {
+            targetTreeItem.children = [sourceTreeItemCopy, ...targetTreeItem.children];
+        }
+        else {
+            targetTreeItem.children = [sourceTreeItemCopy];
+        }
+    }
+    else {
+        if (targetItemParent) {
+            const targetItemIndex = targetItemParent.children?.indexOf(targetTreeItem) ?? -1;
+            sourceTreeItemCopy.parent = targetItemParent;
+            sourceTreeItemCopy.level = targetItemParent.level ? targetItemParent.level + 1 : 0;
+            targetItemParent?.children?.splice(targetItemIndex + 1, 0, sourceTreeItemCopy);
+        }
+    }
+    const sourceTreeItemParent = sourceTreeItem.parent;
+    if (removeFromSource && sourceTreeItemParent) {
+        const sourceItemIndex = sourceTreeItemParent.children?.indexOf(sourceTreeItem) ?? -1;
+        sourceTreeItemParent?.children?.splice(sourceItemIndex, 1);
+    }
+};
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CheckboxClickEventArgs, ClickEventArgs, DEFAULT_CHILDREN_INDENTATION, DEFAULT_TREE_ICON_SET, FolderStateEventArgs, ItemsVirtualizedArgs, LoadChildrenEventArgs, ROOT_LEVEL, SiTreeViewComponent, SiTreeViewItemComponent, SiTreeViewItemDirective, SiTreeViewItemTemplateDirective, SiTreeViewModule, addChildItem, addChildItems, boxClicked, childrenLoaded, collapse, deleteItem, doFolderStateChange, enableCheckboxRecursive, enableOptionboxRecursive, expand, expandRecursive, hasChildren, initializeTreeItemsRecursive, parentCountRecursive, removeItemFromTree, removeUndefinedState, reorderTreeItem, resetActive, selectItemsBetween, selectRecursive, setActive, setBoxStateRecursive, setSelectable, setTreeItemDefaults, transferTreeItem };
+//# sourceMappingURL=siemens-element-ng-tree-view.mjs.map