ngssm-tree 19.3.0 → 19.3.2

package/fesm2022/ngssm-tree.mjs

@@ -1,35 +1,34 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Inject, Optional, Injectable, Input, ChangeDetectionStrategy, Component, ViewContainerRef, ViewChild, makeEnvironmentProviders, EventEmitter, Output } from '@angular/core';
+import { InjectionToken, Inject, Optional, Injectable, inject, signal, input, effect, untracked, ChangeDetectionStrategy, Component, ChangeDetectorRef, viewChild, ViewContainerRef, makeEnvironmentProviders, ElementRef, output } from '@angular/core';
 import * as i1 from 'ngssm-store';
-import { NgSsmFeatureState, NgSsmComponent, provideReducers, provideEffects } from 'ngssm-store';
+import { NgSsmFeatureState, Store, createSignal, provideReducers, provideEffects } from 'ngssm-store';
 import { DataStatus } from 'ngssm-remote-data';
 import { __decorate } from 'tslib';
 import update from 'immutability-helper';
 import { defaultRegexEditorValidator, NgssmComponentDisplayDirective } from 'ngssm-toolkit';
-import * as i2 from '@angular/common';
+import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from '@angular/cdk/scrolling';
+import * as i2 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
-import * as i4 from '@angular/material/card';
-import { MatCardModule } from '@angular/material/card';
-import * as i3$1 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i6 from '@angular/material/progress-spinner';
+import * as i6 from '@angular/material/card';
+import { MatCardModule, MatCard, MatCardContent } from '@angular/material/card';
+import * as i1$2 from '@angular/material/icon';
+import { MatIconModule, MatIcon } from '@angular/material/icon';
+import * as i5 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { BehaviorSubject, combineLatest, take, filter, takeUntil, switchMap, Subject } from 'rxjs';
-import * as i4$1 from '@angular/material/button';
+import * as i2$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i3$2 from '@angular/forms';
-import { FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
-import * as i6$1 from '@angular/material/dialog';
+import * as i1$3 from '@angular/forms';
+import { FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i4 from '@angular/material/dialog';
 import { MatDialogModule } from '@angular/material/dialog';
-import * as i4$2 from '@angular/material/form-field';
+import * as i2$2 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i5 from '@angular/material/input';
+import * as i3 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i5$1 from '@angular/material/divider';
-import { MatDividerModule } from '@angular/material/divider';
-import * as i4$3 from '@angular/material/menu';
+import * as i3$1 from '@angular/material/divider';
+import { MatDividerModule, MatDivider } from '@angular/material/divider';
+import * as i2$3 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 
 var NgssmTreeActionType;
@@ -225,10 +224,10 @@ class TreeNodeLoadingEffect {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TreeNodeLoadingEffect, deps: [{ token: NGSSM_TREE_DATA_SERVICE, optional: true }, { token: i1.Logger }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TreeNodeLoadingEffect }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreeNodeLoadingEffect, deps: [{ token: NGSSM_TREE_DATA_SERVICE, optional: true }, { token: i1.Logger }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreeNodeLoadingEffect }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TreeNodeLoadingEffect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreeNodeLoadingEffect, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -237,129 +236,128 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                     type: Optional
                 }] }, { type: i1.Logger }] });
 
-class NgssmTreeComponent extends NgSsmComponent {
-    constructor(store) {
-        super(store);
-        this._treeConfig$ = new BehaviorSubject(undefined);
-        this._displayedItems$ = new BehaviorSubject([]);
-        this._selectedNodeId$ = new BehaviorSubject(undefined);
+class NgssmTreeComponent {
+    constructor() {
+        this.store = inject(Store);
+        this.trees = createSignal((state) => selectNgssmTreeState(state).trees);
+        this.tree = signal(undefined);
+        this.treeConfig = input();
         this.dataStatus = DataStatus;
-    }
-    set treeConfig(value) {
-        if (value) {
-            this._treeConfig$.next({ ...value });
-            this.treeSubscription?.unsubscribe();
-            this.treeSubscription = this.watch((s) => selectNgssmTreeState(s).trees[value.treeId]).subscribe((tree) => {
-                const config = this._treeConfig$.getValue();
-                if (!tree || !config) {
-                    this._displayedItems$.next([]);
-                    return;
+        this.displayedItems = signal([]);
+        this.selectedNodeId = signal(undefined);
+        effect(() => {
+            const currentConfig = this.treeConfig();
+            const currentTrees = this.trees();
+            if (currentConfig) {
+                this.tree.set(currentTrees[currentConfig.treeId]);
+            }
+            else {
+                this.tree.set(undefined);
+            }
+        });
+        effect(() => {
+            const currentTree = this.tree();
+            const config = untracked(() => this.treeConfig());
+            if (!currentTree || !config) {
+                this.displayedItems.set([]);
+                return;
+            }
+            const alwaysTrue = () => true;
+            const filter = config.filter ?? alwaysTrue;
+            const canSearch = config.canSearch ?? alwaysTrue;
+            const items = [];
+            let hiddenLevel = -1;
+            const nodesToFindSelected = new Map();
+            (currentTree.nodes ?? []).forEach((t) => {
+                if (t.node.isExpandable && t.isExpanded === false && hiddenLevel === -1) {
+                    hiddenLevel = t.level;
                 }
-                const alwaysTrue = () => true;
-                const filter = config.filter ?? alwaysTrue;
-                const canSearch = config.canSearch ?? alwaysTrue;
-                const items = [];
-                let hiddenLevel = -1;
-                const nodesToFindSelected = new Map();
-                (tree.nodes ?? []).forEach((t) => {
-                    if (t.node.isExpandable && t.isExpanded === false && hiddenLevel === -1) {
-                        hiddenLevel = t.level;
-                    }
-                    if (hiddenLevel === -1 || t.level <= hiddenLevel) {
-                        if (filter(t.node)) {
-                            items.push({
-                                node: t,
-                                canSearch: canSearch(t.node)
-                            });
-                            nodesToFindSelected.set(t.node.nodeId, { isDisplayed: true, node: t });
-                        }
+                if (hiddenLevel === -1 || t.level <= hiddenLevel) {
+                    if (filter(t.node)) {
+                        items.push({
+                            node: t,
+                            canSearch: canSearch(t.node)
+                        });
+                        nodesToFindSelected.set(t.node.nodeId, { isDisplayed: true, node: t });
                     }
-                    if (t.node.isExpandable && t.level <= hiddenLevel) {
-                        hiddenLevel = t.isExpanded === true ? -1 : t.level;
-                    }
-                    if (!nodesToFindSelected.has(t.node.nodeId)) {
-                        nodesToFindSelected.set(t.node.nodeId, { isDisplayed: false, node: t });
-                    }
-                });
-                this._displayedItems$.next(items);
-                let selectedNode = tree.selectedNode;
-                if (!selectedNode) {
-                    this._selectedNodeId$.next(undefined);
                 }
-                else {
-                    while (selectedNode) {
-                        const item = nodesToFindSelected.get(selectedNode);
-                        if (item?.isDisplayed !== true) {
-                            selectedNode = item?.node.node.parentNodeId;
-                        }
-                        else {
-                            break;
-                        }
-                    }
-                    this._selectedNodeId$.next(selectedNode);
+                if (t.node.isExpandable && t.level <= hiddenLevel) {
+                    hiddenLevel = t.isExpanded === true ? -1 : t.level;
+                }
+                if (!nodesToFindSelected.has(t.node.nodeId)) {
+                    nodesToFindSelected.set(t.node.nodeId, { isDisplayed: false, node: t });
                 }
             });
-        }
-    }
-    get treeConfig$() {
-        return this._treeConfig$.asObservable();
-    }
-    get displayedItems$() {
-        return this._displayedItems$.asObservable();
-    }
-    get selectedNodeId$() {
-        return this._selectedNodeId$.asObservable();
+            this.displayedItems.set(items);
+            let selectedNode = currentTree.selectedNode;
+            if (!selectedNode) {
+                this.selectedNodeId.set(undefined);
+            }
+            else {
+                while (selectedNode) {
+                    const item = nodesToFindSelected.get(selectedNode);
+                    if (item?.isDisplayed !== true) {
+                        selectedNode = item?.node.node.parentNodeId;
+                    }
+                    else {
+                        break;
+                    }
+                }
+                this.selectedNodeId.set(selectedNode);
+            }
+        });
     }
     getItemId(_, node) {
         return node.node.node.nodeId;
     }
     expand(node) {
-        const treeId = this._treeConfig$.getValue()?.treeId;
+        const treeId = this.treeConfig()?.treeId;
         if (treeId) {
-            this.dispatchAction(new ExpandNodeAction(treeId, node.node.nodeId));
+            this.store.dispatchAction(new ExpandNodeAction(treeId, node.node.nodeId));
         }
     }
     collapse(node) {
-        const treeId = this._treeConfig$.getValue()?.treeId;
+        const treeId = this.treeConfig()?.treeId;
         if (treeId) {
-            this.dispatchAction(new CollapseNodeAction(treeId, node.node.nodeId));
+            this.store.dispatchAction(new CollapseNodeAction(treeId, node.node.nodeId));
         }
     }
     selectNode(node) {
-        const treeId = this._treeConfig$.getValue()?.treeId;
+        const treeId = this.treeConfig()?.treeId;
         if (treeId) {
-            this.dispatchAction(new SelectNodeAction(treeId, node.node.nodeId));
+            this.store.dispatchAction(new SelectNodeAction(treeId, node.node.nodeId));
         }
     }
     displaySearchDialog(node) {
-        const treeId = this._treeConfig$.getValue()?.treeId;
+        const treeId = this.treeConfig()?.treeId;
         if (treeId) {
-            this.dispatchAction(new DisplaySearchDialogAction(treeId, node.node.nodeId));
+            this.store.dispatchAction(new DisplaySearchDialogAction(treeId, node.node.nodeId));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: NgssmTreeComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: NgssmTreeComponent, isStandalone: true, selector: "ngssm-tree", inputs: { treeConfig: "treeConfig" }, usesInheritance: true, ngImport: i0, template: "<mat-card class=\"flex-column-stretch fxFlex\">\n  <mat-card-content class=\"flex-column-stretch fxFlex\" *ngIf=\"treeConfig$ | async as treeConfig\">\n    <cdk-virtual-scroll-viewport itemSize=\"30\" class=\"fxFlex\">\n      <div\n        *cdkVirtualFor=\"let item of displayedItems$ | async; trackBy: getItemId\"\n        class=\"ngssm-tree-node\"\n        [style.padding-left.px]=\"item.node.level * 20\"\n        (click)=\"selectNode(item.node)\"\n        aria-hidden=\"true\"\n        (keyup.enter)=\"selectNode(item.node)\"\n        [ngClass]=\"{ selected: (selectedNodeId$ | async) === item.node.node.nodeId }\">\n        <mat-icon\n          class=\"fa-solid fa-chevron-right\"\n          *ngIf=\"item.node.node.isExpandable && item.node.isExpanded === false && item.node.status !== dataStatus.loading\"\n          (click)=\"$event.stopPropagation(); expand(item.node)\"></mat-icon>\n        <mat-icon\n          class=\"fa-solid fa-chevron-down\"\n          *ngIf=\"item.node.node.isExpandable && item.node.isExpanded && item.node.status !== dataStatus.loading\"\n          (click)=\"$event.stopPropagation(); collapse(item.node)\"></mat-icon>\n        <mat-spinner diameter=\"20\" *ngIf=\"item.node.node.isExpandable && item.node.status === dataStatus.loading\"></mat-spinner>\n        <span *ngIf=\"!item.node.node.isExpandable\" class=\"not-expandable-padding\"></span>\n\n        <mat-icon class=\"{{ treeConfig.iconClasses[item.node.node.type] }}\" color=\"primary\"></mat-icon>\n\n        <span class=\"ngssm-tree-node-label\">\n          {{ item.node.node.label }}\n        </span>\n        <span class=\"fxFlex\"></span>\n        <i\n          class=\"fa-solid fa-magnifying-glass search-icon\"\n          *ngIf=\"item.canSearch\"\n          (click)=\"$event.stopPropagation(); displaySearchDialog(item.node)\">\n        </i>\n      </div>\n    </cdk-virtual-scroll-viewport>\n  </mat-card-content>\n</mat-card>\n", styles: [":host{display:flex;flex-direction:column}:host .ngssm-tree-node{height:30px;display:flex;flex-direction:row;align-items:center;padding-right:12px}:host .ngssm-tree-node .fa-folder{margin-right:4px}:host .ngssm-tree-node .fa-chevron-right:hover{cursor:pointer}:host .ngssm-tree-node.selected{background-color:#e4e6f1}:host .ngssm-tree-node:hover{cursor:pointer}:host .ngssm-tree-node:hover .search-icon{display:unset}:host .ngssm-tree-node:hover:not(.selected){background-color:#f3f3f3}:host .not-expandable-padding{width:24px}:host .search-icon{font-size:12px;display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NgssmTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: NgssmTreeComponent, isStandalone: true, selector: "ngssm-tree", inputs: { treeConfig: { classPropertyName: "treeConfig", publicName: "treeConfig", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-card class=\"flex-column-stretch fxFlex\">\n  @if (treeConfig(); as config) {\n    <mat-card-content class=\"flex-column-stretch fxFlex\">\n      <cdk-virtual-scroll-viewport itemSize=\"30\" class=\"fxFlex\">\n        <div\n          *cdkVirtualFor=\"let item of displayedItems(); trackBy: getItemId\"\n          class=\"ngssm-tree-node\"\n          [style.padding-left.px]=\"item.node.level * 20\"\n          (click)=\"selectNode(item.node)\"\n          aria-hidden=\"true\"\n          (keyup.enter)=\"selectNode(item.node)\"\n          [ngClass]=\"{ selected: selectedNodeId() === item.node.node.nodeId }\">\n          @if (item.node.node.isExpandable) {\n            @if (item.node.status === dataStatus.loading) {\n              <mat-spinner diameter=\"20\"></mat-spinner>\n            } @else {\n              @if (item.node.isExpanded) {\n                <mat-icon class=\"fa-solid fa-chevron-down\" (click)=\"$event.stopPropagation(); collapse(item.node)\"></mat-icon>\n              } @else {\n                <mat-icon class=\"fa-solid fa-chevron-right\" (click)=\"$event.stopPropagation(); expand(item.node)\"></mat-icon>\n              }\n            }\n          } @else {\n            <span class=\"not-expandable-padding\"></span>\n          }\n\n          <mat-icon class=\"{{ config.iconClasses[item.node.node.type] }}\" color=\"primary\"></mat-icon>\n\n          <span class=\"ngssm-tree-node-label\">\n            {{ item.node.node.label }}\n          </span>\n          <span class=\"fxFlex\"></span>\n          @if (item.canSearch) {\n            <i class=\"fa-solid fa-magnifying-glass search-icon\" (click)=\"$event.stopPropagation(); displaySearchDialog(item.node)\"> </i>\n          }\n        </div>\n      </cdk-virtual-scroll-viewport>\n    </mat-card-content>\n  }\n</mat-card>\n", styles: [":host{display:flex;flex-direction:column}:host .ngssm-tree-node{height:30px;display:flex;flex-direction:row;align-items:center;padding-right:12px}:host .ngssm-tree-node .fa-folder{margin-right:4px}:host .ngssm-tree-node .fa-chevron-right:hover{cursor:pointer}:host .ngssm-tree-node.selected{background-color:#e4e6f1}:host .ngssm-tree-node:hover{cursor:pointer}:host .ngssm-tree-node:hover .search-icon{display:unset}:host .ngssm-tree-node:hover:not(.selected){background-color:#f3f3f3}:host .not-expandable-padding{width:24px}:host .search-icon{font-size:12px;display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i6.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i6.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: NgssmTreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NgssmTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngssm-tree', imports: [CommonModule, ScrollingModule, MatCardModule, MatIconModule, MatProgressSpinnerModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card class=\"flex-column-stretch fxFlex\">\n  <mat-card-content class=\"flex-column-stretch fxFlex\" *ngIf=\"treeConfig$ | async as treeConfig\">\n    <cdk-virtual-scroll-viewport itemSize=\"30\" class=\"fxFlex\">\n      <div\n        *cdkVirtualFor=\"let item of displayedItems$ | async; trackBy: getItemId\"\n        class=\"ngssm-tree-node\"\n        [style.padding-left.px]=\"item.node.level * 20\"\n        (click)=\"selectNode(item.node)\"\n        aria-hidden=\"true\"\n        (keyup.enter)=\"selectNode(item.node)\"\n        [ngClass]=\"{ selected: (selectedNodeId$ | async) === item.node.node.nodeId }\">\n        <mat-icon\n          class=\"fa-solid fa-chevron-right\"\n          *ngIf=\"item.node.node.isExpandable && item.node.isExpanded === false && item.node.status !== dataStatus.loading\"\n          (click)=\"$event.stopPropagation(); expand(item.node)\"></mat-icon>\n        <mat-icon\n          class=\"fa-solid fa-chevron-down\"\n          *ngIf=\"item.node.node.isExpandable && item.node.isExpanded && item.node.status !== dataStatus.loading\"\n          (click)=\"$event.stopPropagation(); collapse(item.node)\"></mat-icon>\n        <mat-spinner diameter=\"20\" *ngIf=\"item.node.node.isExpandable && item.node.status === dataStatus.loading\"></mat-spinner>\n        <span *ngIf=\"!item.node.node.isExpandable\" class=\"not-expandable-padding\"></span>\n\n        <mat-icon class=\"{{ treeConfig.iconClasses[item.node.node.type] }}\" color=\"primary\"></mat-icon>\n\n        <span class=\"ngssm-tree-node-label\">\n          {{ item.node.node.label }}\n        </span>\n        <span class=\"fxFlex\"></span>\n        <i\n          class=\"fa-solid fa-magnifying-glass search-icon\"\n          *ngIf=\"item.canSearch\"\n          (click)=\"$event.stopPropagation(); displaySearchDialog(item.node)\">\n        </i>\n      </div>\n    </cdk-virtual-scroll-viewport>\n  </mat-card-content>\n</mat-card>\n", styles: [":host{display:flex;flex-direction:column}:host .ngssm-tree-node{height:30px;display:flex;flex-direction:row;align-items:center;padding-right:12px}:host .ngssm-tree-node .fa-folder{margin-right:4px}:host .ngssm-tree-node .fa-chevron-right:hover{cursor:pointer}:host .ngssm-tree-node.selected{background-color:#e4e6f1}:host .ngssm-tree-node:hover{cursor:pointer}:host .ngssm-tree-node:hover .search-icon{display:unset}:host .ngssm-tree-node:hover:not(.selected){background-color:#f3f3f3}:host .not-expandable-padding{width:24px}:host .search-icon{font-size:12px;display:none}\n"] }]
-        }], ctorParameters: () => [{ type: i1.Store }], propDecorators: { treeConfig: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'ngssm-tree', imports: [CommonModule, ScrollingModule, MatCardModule, MatIconModule, MatProgressSpinnerModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card class=\"flex-column-stretch fxFlex\">\n  @if (treeConfig(); as config) {\n    <mat-card-content class=\"flex-column-stretch fxFlex\">\n      <cdk-virtual-scroll-viewport itemSize=\"30\" class=\"fxFlex\">\n        <div\n          *cdkVirtualFor=\"let item of displayedItems(); trackBy: getItemId\"\n          class=\"ngssm-tree-node\"\n          [style.padding-left.px]=\"item.node.level * 20\"\n          (click)=\"selectNode(item.node)\"\n          aria-hidden=\"true\"\n          (keyup.enter)=\"selectNode(item.node)\"\n          [ngClass]=\"{ selected: selectedNodeId() === item.node.node.nodeId }\">\n          @if (item.node.node.isExpandable) {\n            @if (item.node.status === dataStatus.loading) {\n              <mat-spinner diameter=\"20\"></mat-spinner>\n            } @else {\n              @if (item.node.isExpanded) {\n                <mat-icon class=\"fa-solid fa-chevron-down\" (click)=\"$event.stopPropagation(); collapse(item.node)\"></mat-icon>\n              } @else {\n                <mat-icon class=\"fa-solid fa-chevron-right\" (click)=\"$event.stopPropagation(); expand(item.node)\"></mat-icon>\n              }\n            }\n          } @else {\n            <span class=\"not-expandable-padding\"></span>\n          }\n\n          <mat-icon class=\"{{ config.iconClasses[item.node.node.type] }}\" color=\"primary\"></mat-icon>\n\n          <span class=\"ngssm-tree-node-label\">\n            {{ item.node.node.label }}\n          </span>\n          <span class=\"fxFlex\"></span>\n          @if (item.canSearch) {\n            <i class=\"fa-solid fa-magnifying-glass search-icon\" (click)=\"$event.stopPropagation(); displaySearchDialog(item.node)\"> </i>\n          }\n        </div>\n      </cdk-virtual-scroll-viewport>\n    </mat-card-content>\n  }\n</mat-card>\n", styles: [":host{display:flex;flex-direction:column}:host .ngssm-tree-node{height:30px;display:flex;flex-direction:row;align-items:center;padding-right:12px}:host .ngssm-tree-node .fa-folder{margin-right:4px}:host .ngssm-tree-node .fa-chevron-right:hover{cursor:pointer}:host .ngssm-tree-node.selected{background-color:#e4e6f1}:host .ngssm-tree-node:hover{cursor:pointer}:host .ngssm-tree-node:hover .search-icon{display:unset}:host .ngssm-tree-node:hover:not(.selected){background-color:#f3f3f3}:host .not-expandable-padding{width:24px}:host .search-icon{font-size:12px;display:none}\n"] }]
+        }], ctorParameters: () => [] });
 
-class NgssmBreadcrumbComponent extends NgSsmComponent {
-    constructor(store) {
-        super(store);
-        this._treeId$ = new BehaviorSubject(undefined);
-        this._nodes$ = new BehaviorSubject([]);
-        combineLatest([this._treeId$, this.watch((s) => selectNgssmTreeState(s))]).subscribe((values) => {
-            if (!values[0]) {
-                this._nodes$.next([]);
+class NgssmBreadcrumbComponent {
+    constructor() {
+        this.store = inject(Store);
+        this.treeState = createSignal((state) => selectNgssmTreeState(state));
+        this.treeId = input(undefined);
+        this.nodes = signal([]);
+        effect(() => {
+            const currentTreeId = this.treeId();
+            if (!currentTreeId) {
+                this.nodes.set([]);
                 return;
             }
-            const tree = values[1]?.trees[values[0]];
+            const state = this.treeState();
+            const tree = state?.trees[currentTreeId];
             if (!tree) {
-                this._nodes$.next([]);
+                this.nodes.set([]);
                 return;
             }
             const nodesPerId = new Map(tree.nodes.map((n) => [n.node.nodeId, n.node]));
@@ -372,70 +370,50 @@ class NgssmBreadcrumbComponent extends NgSsmComponent {
             if (path.length === 0 && tree.nodes.length > 0) {
                 path.push(tree.nodes[0]?.node);
             }
-            this._nodes$.next(path);
+            this.nodes.set(path);
         });
     }
-    set treeId(value) {
-        this._treeId$.next(value);
-    }
-    get nodes$() {
-        return this._nodes$.asObservable();
-    }
     selectNode(node) {
-        const treeId = this._treeId$.getValue();
+        const treeId = this.treeId();
         if (treeId) {
-            this.dispatchAction(new SelectNodeAction(treeId, node.nodeId));
+            this.store.dispatchAction(new SelectNodeAction(treeId, node.nodeId));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: NgssmBreadcrumbComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: NgssmBreadcrumbComponent, isStandalone: true, selector: "ngssm-breadcrumb", inputs: { treeId: "treeId" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex-row-center\">\n    <mat-icon class=\"fa-solid fa-folder-tree\" color=\"primary\"></mat-icon>\n    <span *ngFor=\"let node of nodes$ | async; last as last\" class=\"flex-row-center\">\n\n        <button mat-button [disabled]=\"last\" (click)=\"selectNode(node)\">\n            {{node.label}}\n        </button>\n\n        <div class=\"ngssm-breadcrumb-separator\" *ngIf=\"!last\">/</div>\n    </span>\n</div>", styles: [".ngssm-breadcrumb-separator{font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NgssmBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: NgssmBreadcrumbComponent, isStandalone: true, selector: "ngssm-breadcrumb", inputs: { treeId: { classPropertyName: "treeId", publicName: "treeId", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex-row-center\">\n  <mat-icon class=\"fa-solid fa-folder-tree\" color=\"primary\"></mat-icon>\n  @for (node of nodes(); track node; let last = $last) {\n    <span class=\"flex-row-center\">\n      <button mat-button [disabled]=\"last\" (click)=\"selectNode(node)\">\n        {{ node.label }}\n      </button>\n\n      @if (!last) {\n        <div class=\"ngssm-breadcrumb-separator\">/</div>\n      }\n    </span>\n  }\n</div>\n", styles: [".ngssm-breadcrumb-separator{font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: NgssmBreadcrumbComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NgssmBreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngssm-breadcrumb', imports: [CommonModule, MatIconModule, MatButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex-row-center\">\n    <mat-icon class=\"fa-solid fa-folder-tree\" color=\"primary\"></mat-icon>\n    <span *ngFor=\"let node of nodes$ | async; last as last\" class=\"flex-row-center\">\n\n        <button mat-button [disabled]=\"last\" (click)=\"selectNode(node)\">\n            {{node.label}}\n        </button>\n\n        <div class=\"ngssm-breadcrumb-separator\" *ngIf=\"!last\">/</div>\n    </span>\n</div>", styles: [".ngssm-breadcrumb-separator{font-weight:700}\n"] }]
-        }], ctorParameters: () => [{ type: i1.Store }], propDecorators: { treeId: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'ngssm-breadcrumb', imports: [CommonModule, MatIconModule, MatButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex-row-center\">\n  <mat-icon class=\"fa-solid fa-folder-tree\" color=\"primary\"></mat-icon>\n  @for (node of nodes(); track node; let last = $last) {\n    <span class=\"flex-row-center\">\n      <button mat-button [disabled]=\"last\" (click)=\"selectNode(node)\">\n        {{ node.label }}\n      </button>\n\n      @if (!last) {\n        <div class=\"ngssm-breadcrumb-separator\">/</div>\n      }\n    </span>\n  }\n</div>\n", styles: [".ngssm-breadcrumb-separator{font-weight:700}\n"] }]
+        }], ctorParameters: () => [] });
 
-class NgssmTreeSearchDialogComponent extends NgSsmComponent {
-    constructor(store, dataServices, changeDetectorRef) {
-        super(store);
-        this.dataServices = dataServices;
-        this.changeDetectorRef = changeDetectorRef;
-        this._currentSearchedPath$ = new BehaviorSubject('');
+class NgssmTreeSearchDialogComponent {
+    constructor() {
+        this.store = inject(Store);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.dataServices = inject(NGSSM_TREE_DATA_SERVICE, {
+            optional: true
+        });
+        this.resultsViewerContainer = viewChild('resultsViewerContainer', { read: ViewContainerRef });
         this.searchStatus = SearchStatus;
-        this.searchRootPathControl = new FormControl(undefined);
+        this.searchRootPath = createSignal((state) => selectNgssmTreeState(state).treeNodesSearch.rootSearchPath ?? '');
+        this.currentSearchedPath = createSignal((state) => selectNgssmTreeState(state).treeNodesSearch.toProcess[0]?.fullPath ?? '');
+        this.currentSearchStatus = createSignal((state) => selectNgssmTreeState(state).treeNodesSearch.searchStatus);
         this.searchPatternControl = new FormControl(undefined, [
             Validators.required,
             (c) => this.validatedRegex(c)
         ]);
-        this.watch((s) => selectNgssmTreeState(s).treeNodesSearch.rootSearchPath)
-            .pipe(take(1))
-            .subscribe((v) => this.searchRootPathControl.setValue(v));
-        this.watch((s) => selectNgssmTreeState(s).treeNodesSearch.toProcess[0]).subscribe((node) => {
-            if (node) {
-                this._currentSearchedPath$.next(node.fullPath);
-            }
-            else {
-                this._currentSearchedPath$.next('');
+        const effectRef = effect(() => {
+            const container = this.resultsViewerContainer();
+            if (!container) {
+                return;
             }
-        });
-    }
-    get searchStatus$() {
-        return this.watch((s) => selectNgssmTreeState(s).treeNodesSearch.searchStatus);
-    }
-    get currentSearchedPath$() {
-        return this._currentSearchedPath$.asObservable();
-    }
-    ngAfterViewInit() {
-        this.watch((s) => selectNgssmTreeState(s))
-            .pipe(take(1))
-            .subscribe((state) => {
-            const treeId = state.treeNodesSearch.treeId;
+            const treeState = selectNgssmTreeState(this.store.state());
+            const treeId = treeState.treeNodesSearch.treeId;
             if (!treeId) {
                 return;
             }
-            const treeType = state.trees[treeId]?.type;
+            const treeType = treeState.trees[treeId]?.type;
             if (!treeType) {
                 return;
             }
@@ -443,21 +421,22 @@ class NgssmTreeSearchDialogComponent extends NgSsmComponent {
             if (!dataService?.searchResultViewer) {
                 return;
             }
-            this.resultsViewerContainer?.createComponent(dataService.searchResultViewer);
+            this.resultsViewerContainer()?.createComponent(dataService.searchResultViewer);
             this.changeDetectorRef.markForCheck();
+            effectRef.destroy();
         });
     }
     close() {
-        this.dispatchActionType(NgssmTreeActionType.closeSearchDialog);
+        this.store.dispatchActionType(NgssmTreeActionType.closeSearchDialog);
     }
     search() {
         const searchPattern = this.searchPatternControl.value;
         if (searchPattern) {
-            this.dispatchAction(new SearchTreeNodesAction(searchPattern));
+            this.store.dispatchAction(new SearchTreeNodesAction(searchPattern));
         }
     }
     abort() {
-        this.dispatchActionType(NgssmTreeActionType.abortTreeNodesSearch);
+        this.store.dispatchActionType(NgssmTreeActionType.abortTreeNodesSearch);
     }
     validatedRegex(control) {
         const result = defaultRegexEditorValidator.validatePattern(control.value);
@@ -468,13 +447,14 @@ class NgssmTreeSearchDialogComponent extends NgSsmComponent {
             regex: result.error
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: NgssmTreeSearchDialogComponent, deps: [{ token: i1.Store }, { token: NGSSM_TREE_DATA_SERVICE, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: NgssmTreeSearchDialogComponent, isStandalone: true, selector: "ngssm-ngssm-tree-search-dialog", viewQueries: [{ propertyName: "resultsViewerContainer", first: true, predicate: ["resultsViewerContainer"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<h1 mat-dialog-title>Tree search dialog</h1>\n<mat-dialog-content class=\"flex-column-stretch fxFlex\">\n    <mat-card class=\"flex-column-stretch\">\n        <mat-card-content class=\"flex-row-center\">\n            <mat-form-field class=\"with-margin-right-12 fxFlex\">\n                <mat-label>Starts search in</mat-label>\n                <input matInput readonly [formControl]=\"searchRootPathControl\">\n            </mat-form-field>\n\n            <mat-form-field class=\"fxFlex with-margin-right-12\">\n                <mat-label>Search pattern</mat-label>\n                <input matInput [formControl]=\"searchPatternControl\">\n                <mat-error *ngIf=\"searchPatternControl.errors?.['regex']\">\n                    {{searchPatternControl.errors?.['regex']}}\n                </mat-error>\n            </mat-form-field>\n\n            <button mat-stroked-button color=\"primary\" [disabled]=\"searchPatternControl.invalid\" (click)=\"search()\"\n                *ngIf=\"(searchStatus$ | async) !== searchStatus.inProgress\">\n                <mat-icon class=\"fa-solid fa-magnifying-glass\"></mat-icon>\n                Search\n            </button>\n\n            <button mat-raised-button color=\"accent\" (click)=\"abort()\"\n                *ngIf=\"(searchStatus$ | async) === searchStatus.inProgress\">\n                <mat-icon class=\"fa-solid fa-ban\"></mat-icon>\n                Abort\n            </button>\n        </mat-card-content>\n        <mat-card-footer class=\"flex-row-center\" *ngIf=\"(searchStatus$ | async) === searchStatus.inProgress\">\n            <mat-spinner [diameter]=\"20\"></mat-spinner>\n            {{ currentSearchedPath$ | async }}\n        </mat-card-footer>\n    </mat-card>\n    <mat-card class=\"flex-column-stretch fxFlex with-margin-top-8\">\n        <ng-container #resultsViewerContainer></ng-container>\n    </mat-card>\n</mat-dialog-content>\n<mat-dialog-actions class=\"flex-row-center\">\n    <span class=\"fxFlex\"></span>\n    <button mat-button (click)=\"close()\">Close</button>\n</mat-dialog-actions>", styles: [":host{display:flex;flex-direction:column;height:100%}:host .mat-mdc-dialog-content{max-height:unset!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i6$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i6$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i6$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i4.MatCardFooter, selector: "mat-card-footer" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NgssmTreeSearchDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: NgssmTreeSearchDialogComponent, isStandalone: true, selector: "ngssm-ngssm-tree-search-dialog", viewQueries: [{ propertyName: "resultsViewerContainer", first: true, predicate: ["resultsViewerContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<h1 mat-dialog-title>Tree search dialog</h1>\n@let searchInProgress = currentSearchStatus() === searchStatus.inProgress;\n<mat-dialog-content class=\"flex-column-stretch fxFlex\">\n  <mat-card class=\"flex-column-stretch\">\n    <mat-card-content class=\"flex-row-center\">\n      <mat-form-field class=\"with-margin-right-12 fxFlex\">\n        <mat-label>Starts search in</mat-label>\n        <input matInput readonly [ngModel]=\"searchRootPath()\" />\n      </mat-form-field>\n\n      <mat-form-field class=\"fxFlex with-margin-right-12\">\n        <mat-label>Search pattern</mat-label>\n        <input matInput [formControl]=\"searchPatternControl\" />\n        @if (searchPatternControl.errors?.['regex']; as error) {\n          <mat-error>\n            {{ error }}\n          </mat-error>\n        }\n      </mat-form-field>\n\n      @if (!searchInProgress) {\n        <button mat-stroked-button color=\"primary\" [disabled]=\"searchPatternControl.invalid\" (click)=\"search()\">\n          <mat-icon class=\"fa-solid fa-magnifying-glass\"></mat-icon>\n          Search\n        </button>\n      } @else {\n        <button mat-raised-button color=\"accent\" (click)=\"abort()\">\n          <mat-icon class=\"fa-solid fa-ban\"></mat-icon>\n          Abort\n        </button>\n      }\n    </mat-card-content>\n    @if (searchInProgress) {\n      <mat-card-footer class=\"flex-row-center\">\n        <mat-spinner [diameter]=\"20\"></mat-spinner>\n        {{ currentSearchedPath() }}\n      </mat-card-footer>\n    }\n  </mat-card>\n  <mat-card class=\"flex-column-stretch fxFlex with-margin-top-8\">\n    <ng-container #resultsViewerContainer></ng-container>\n  </mat-card>\n</mat-dialog-content>\n<mat-dialog-actions class=\"flex-row-center\">\n  <span class=\"fxFlex\"></span>\n  <button mat-button (click)=\"close()\">Close</button>\n</mat-dialog-actions>\n", styles: [":host{display:flex;flex-direction:column;height:100%}:host .mat-mdc-dialog-content{max-height:unset!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i6.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i6.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i6.MatCardFooter, selector: "mat-card-footer" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: NgssmTreeSearchDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NgssmTreeSearchDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngssm-ngssm-tree-search-dialog', imports: [
                         CommonModule,
+                        FormsModule,
                         ReactiveFormsModule,
                         MatFormFieldModule,
                         MatInputModule,
@@ -483,16 +463,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                         MatCardModule,
                         MatIconModule,
                         MatProgressSpinnerModule
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<h1 mat-dialog-title>Tree search dialog</h1>\n<mat-dialog-content class=\"flex-column-stretch fxFlex\">\n    <mat-card class=\"flex-column-stretch\">\n        <mat-card-content class=\"flex-row-center\">\n            <mat-form-field class=\"with-margin-right-12 fxFlex\">\n                <mat-label>Starts search in</mat-label>\n                <input matInput readonly [formControl]=\"searchRootPathControl\">\n            </mat-form-field>\n\n            <mat-form-field class=\"fxFlex with-margin-right-12\">\n                <mat-label>Search pattern</mat-label>\n                <input matInput [formControl]=\"searchPatternControl\">\n                <mat-error *ngIf=\"searchPatternControl.errors?.['regex']\">\n                    {{searchPatternControl.errors?.['regex']}}\n                </mat-error>\n            </mat-form-field>\n\n            <button mat-stroked-button color=\"primary\" [disabled]=\"searchPatternControl.invalid\" (click)=\"search()\"\n                *ngIf=\"(searchStatus$ | async) !== searchStatus.inProgress\">\n                <mat-icon class=\"fa-solid fa-magnifying-glass\"></mat-icon>\n                Search\n            </button>\n\n            <button mat-raised-button color=\"accent\" (click)=\"abort()\"\n                *ngIf=\"(searchStatus$ | async) === searchStatus.inProgress\">\n                <mat-icon class=\"fa-solid fa-ban\"></mat-icon>\n                Abort\n            </button>\n        </mat-card-content>\n        <mat-card-footer class=\"flex-row-center\" *ngIf=\"(searchStatus$ | async) === searchStatus.inProgress\">\n            <mat-spinner [diameter]=\"20\"></mat-spinner>\n            {{ currentSearchedPath$ | async }}\n        </mat-card-footer>\n    </mat-card>\n    <mat-card class=\"flex-column-stretch fxFlex with-margin-top-8\">\n        <ng-container #resultsViewerContainer></ng-container>\n    </mat-card>\n</mat-dialog-content>\n<mat-dialog-actions class=\"flex-row-center\">\n    <span class=\"fxFlex\"></span>\n    <button mat-button (click)=\"close()\">Close</button>\n</mat-dialog-actions>", styles: [":host{display:flex;flex-direction:column;height:100%}:host .mat-mdc-dialog-content{max-height:unset!important}\n"] }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [NGSSM_TREE_DATA_SERVICE]
-                }, {
-                    type: Optional
-                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { resultsViewerContainer: [{
-                type: ViewChild,
-                args: ['resultsViewerContainer', { read: ViewContainerRef }]
-            }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<h1 mat-dialog-title>Tree search dialog</h1>\n@let searchInProgress = currentSearchStatus() === searchStatus.inProgress;\n<mat-dialog-content class=\"flex-column-stretch fxFlex\">\n  <mat-card class=\"flex-column-stretch\">\n    <mat-card-content class=\"flex-row-center\">\n      <mat-form-field class=\"with-margin-right-12 fxFlex\">\n        <mat-label>Starts search in</mat-label>\n        <input matInput readonly [ngModel]=\"searchRootPath()\" />\n      </mat-form-field>\n\n      <mat-form-field class=\"fxFlex with-margin-right-12\">\n        <mat-label>Search pattern</mat-label>\n        <input matInput [formControl]=\"searchPatternControl\" />\n        @if (searchPatternControl.errors?.['regex']; as error) {\n          <mat-error>\n            {{ error }}\n          </mat-error>\n        }\n      </mat-form-field>\n\n      @if (!searchInProgress) {\n        <button mat-stroked-button color=\"primary\" [disabled]=\"searchPatternControl.invalid\" (click)=\"search()\">\n          <mat-icon class=\"fa-solid fa-magnifying-glass\"></mat-icon>\n          Search\n        </button>\n      } @else {\n        <button mat-raised-button color=\"accent\" (click)=\"abort()\">\n          <mat-icon class=\"fa-solid fa-ban\"></mat-icon>\n          Abort\n        </button>\n      }\n    </mat-card-content>\n    @if (searchInProgress) {\n      <mat-card-footer class=\"flex-row-center\">\n        <mat-spinner [diameter]=\"20\"></mat-spinner>\n        {{ currentSearchedPath() }}\n      </mat-card-footer>\n    }\n  </mat-card>\n  <mat-card class=\"flex-column-stretch fxFlex with-margin-top-8\">\n    <ng-container #resultsViewerContainer></ng-container>\n  </mat-card>\n</mat-dialog-content>\n<mat-dialog-actions class=\"flex-row-center\">\n  <span class=\"fxFlex\"></span>\n  <button mat-button (click)=\"close()\">Close</button>\n</mat-dialog-actions>\n", styles: [":host{display:flex;flex-direction:column;height:100%}:host .mat-mdc-dialog-content{max-height:unset!important}\n"] }]
+        }], ctorParameters: () => [] });
 
 class TreeNodesSearchingEffect {
     constructor(matDialog, logger) {
@@ -560,12 +532,12 @@ class TreeNodesSearchingEffect {
         this.dialog?.close();
         this.dialog = undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TreeNodesSearchingEffect, deps: [{ token: i6$1.MatDialog }, { token: i1.Logger }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TreeNodesSearchingEffect }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreeNodesSearchingEffect, deps: [{ token: i4.MatDialog }, { token: i1.Logger }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreeNodesSearchingEffect }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TreeNodesSearchingEffect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreeNodesSearchingEffect, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i6$1.MatDialog }, { type: i1.Logger }] });
+        }], ctorParameters: () => [{ type: i4.MatDialog }, { type: i1.Logger }] });
 
 let TreeNodeExpandReducer$1 = class TreeNodeExpandReducer {
     constructor() {
@@ -685,10 +657,10 @@ let TreeNodeExpandReducer$1 = class TreeNodeExpandReducer {
         }
         return state;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TreeNodeExpandReducer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TreeNodeExpandReducer }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreeNodeExpandReducer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreeNodeExpandReducer }); }
 };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TreeNodeExpandReducer$1, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreeNodeExpandReducer$1, decorators: [{
             type: Injectable
         }] });
 
@@ -711,10 +683,10 @@ class TreeNodeSelectionReducer {
         }
         return state;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TreeNodeSelectionReducer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TreeNodeSelectionReducer }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreeNodeSelectionReducer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreeNodeSelectionReducer }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TreeNodeSelectionReducer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreeNodeSelectionReducer, decorators: [{
             type: Injectable
         }] });
 
@@ -795,10 +767,10 @@ class TreeNodesSearchReducer {
         }
         return state;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TreeNodesSearchReducer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TreeNodesSearchReducer }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreeNodesSearchReducer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreeNodesSearchReducer }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TreeNodesSearchReducer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreeNodesSearchReducer, decorators: [{
             type: Injectable
         }] });
 
@@ -842,10 +814,10 @@ class TreeNodesReducer {
         }
         return state;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TreeNodesReducer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TreeNodesReducer }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreeNodesReducer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreeNodesReducer }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TreeNodesReducer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreeNodesReducer, decorators: [{
             type: Injectable
         }] });
 
@@ -884,10 +856,10 @@ let TreesReducer$1 = class TreesReducer {
         }
         return state;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TreesReducer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TreesReducer }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreesReducer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreesReducer }); }
 };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TreesReducer$1, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreesReducer$1, decorators: [{
             type: Injectable
         }] });
 
@@ -1092,10 +1064,10 @@ class TreesReducer {
         }
         return state;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TreesReducer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TreesReducer }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreesReducer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreesReducer }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TreesReducer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreesReducer, decorators: [{
             type: Injectable
         }] });
 
@@ -1177,10 +1149,10 @@ class TreeNodeExpandReducer {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TreeNodeExpandReducer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TreeNodeExpandReducer }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreeNodeExpandReducer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreeNodeExpandReducer }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TreeNodeExpandReducer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreeNodeExpandReducer, decorators: [{
             type: Injectable
         }] });
 
@@ -1299,10 +1271,10 @@ class TreeNodeEditionReducer {
             isExpanded: true
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TreeNodeEditionReducer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TreeNodeEditionReducer }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreeNodeEditionReducer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreeNodeEditionReducer }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TreeNodeEditionReducer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreeNodeEditionReducer, decorators: [{
             type: Injectable
         }] });
 
@@ -1407,10 +1379,10 @@ class CutAndPasteReducer {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CutAndPasteReducer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CutAndPasteReducer }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CutAndPasteReducer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CutAndPasteReducer }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CutAndPasteReducer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CutAndPasteReducer, decorators: [{
             type: Injectable
         }] });
 
@@ -1425,277 +1397,213 @@ const getDefaultCutAndPaste = () => ({
     canPasteInside: false,
     canPasteAfter: false
 });
-class NgssmExpressionTreeNodeComponent extends NgSsmComponent {
-    constructor(store) {
-        super(store);
-        this._nodeId$ = new BehaviorSubject(undefined);
-        this._treeConfig$ = new BehaviorSubject(undefined);
-        this._nodeLabel$ = new BehaviorSubject('');
-        this._nodeCssIcon$ = new BehaviorSubject(undefined);
-        this._nodeDescription$ = new BehaviorSubject(undefined);
-        this._componentAction$ = new BehaviorSubject(undefined);
-        this._componentToDisplay$ = new BehaviorSubject(undefined);
-        this._cutAndPaste$ = new BehaviorSubject(getDefaultCutAndPaste());
-        combineLatest([this._nodeId$, this._treeConfig$])
-            .pipe(filter((v) => v[0] !== undefined && v[1] !== undefined), takeUntil(this.unsubscribeAll$), switchMap((v) => combineLatest([
-            this.watch((s) => selectNgssmExpressionTreeState(s).trees[v[1]?.treeId ?? 'unknown']?.data[v[0] ?? 'unknown']),
-            this.watch((s) => selectNgssmExpressionTreeState(s).trees[v[1]?.treeId ?? 'unknown']?.nodes),
-            this.watch((s) => selectNgssmExpressionTreeState(s).trees[v[1]?.treeId ?? 'unknown']?.nodeCut)
-        ])), takeUntil(this.unsubscribeAll$))
-            .subscribe((values) => {
-            const node = (values[1] ?? []).find((v) => v.data.id === this._nodeId$.getValue());
-            const treeConfig = this._treeConfig$.getValue();
-            const nodeValue = values[0];
+class NgssmExpressionTreeNodeComponent {
+    constructor() {
+        this.store = inject(Store);
+        this.trees = createSignal((state) => selectNgssmExpressionTreeState(state).trees);
+        this.tree = signal(undefined);
+        this.nodeId = input();
+        this.treeConfig = input(undefined);
+        this.nodeLabel = signal('');
+        this.nodeCssIcon = signal(undefined);
+        this.nodeDescription = signal(undefined);
+        this.cutAndPaste = signal(getDefaultCutAndPaste());
+        this.componentAction = signal(undefined);
+        this.componentToDisplay = signal(undefined);
+        effect(() => {
+            const currentNodeId = this.nodeId();
+            const config = this.treeConfig();
+            if (!currentNodeId || !config) {
+                this.tree.set(undefined);
+                return;
+            }
+            this.tree.set(this.trees()[config.treeId]);
+        });
+        effect(() => {
+            const currentNodeId = this.nodeId();
+            const config = this.treeConfig();
+            if (!currentNodeId || !config) {
+                return;
+            }
+            this.componentAction.set((c) => c.setup(config.treeId, currentNodeId));
+            this.componentToDisplay.set(config.nodeDescriptionComponent);
+        });
+        effect(() => {
+            const currentTree = this.tree();
+            const currentNodeId = untracked(() => this.nodeId());
+            const currentConfig = untracked(() => this.treeConfig());
+            if (!currentNodeId || !currentTree || !currentConfig) {
+                return;
+            }
+            const node = currentTree.nodes.find((v) => v.data.id === currentNodeId);
+            const nodeValue = currentTree.data[currentNodeId];
             const cutAndPaste = getDefaultCutAndPaste();
-            if (node && treeConfig && nodeValue) {
-                this._nodeLabel$.next(treeConfig.getNodeLabel?.(node, nodeValue) ?? '');
-                this._nodeCssIcon$.next(treeConfig.getNodeCssIcon?.(node, nodeValue) ?? undefined);
-                this._nodeDescription$.next(treeConfig.getNodeDescription?.(node, nodeValue));
-                cutAndPaste.canCut = treeConfig.canCut?.(node) ?? true;
-                if (values[2]) {
-                    cutAndPaste.isPartOfCut = values[2].data.id === node.data.id || node.path.includes(values[2].data.id);
+            const nodeCut = currentTree.nodeCut;
+            if (node && currentConfig && nodeValue) {
+                this.nodeLabel.set(currentConfig.getNodeLabel?.(node, nodeValue) ?? '');
+                this.nodeCssIcon.set(currentConfig.getNodeCssIcon?.(node, nodeValue) ?? undefined);
+                this.nodeDescription.set(currentConfig.getNodeDescription?.(node, nodeValue));
+                cutAndPaste.canCut = currentConfig.canCut?.(node) ?? true;
+                if (nodeCut) {
+                    cutAndPaste.isPartOfCut = nodeCut.data.id === node.data.id || node.path.includes(nodeCut.data.id);
                     if (!cutAndPaste.isPartOfCut) {
-                        cutAndPaste.canPasteInside = treeConfig.canPaste?.(values[2], node, 'Inside') ?? false;
-                        cutAndPaste.canPasteAfter = treeConfig.canPaste?.(values[2], node, 'After') ?? false;
+                        cutAndPaste.canPasteInside = currentConfig.canPaste?.(nodeCut, node, 'Inside') ?? false;
+                        cutAndPaste.canPasteAfter = currentConfig.canPaste?.(nodeCut, node, 'After') ?? false;
                     }
                 }
             }
-            cutAndPaste.isCutAndPasteInProgress = !!values[2];
-            this._cutAndPaste$.next(cutAndPaste);
+            cutAndPaste.isCutAndPasteInProgress = !!nodeCut;
+            this.cutAndPaste.set(cutAndPaste);
         });
-        combineLatest([this._nodeId$, this._treeConfig$])
-            .pipe(takeUntil(this.unsubscribeAll$))
-            .subscribe((values) => {
-            const treeConfig = values[1];
-            const nodeId = values[0];
-            if (treeConfig && nodeId) {
-                this._componentAction$.next((c) => c.setup(treeConfig.treeId, nodeId));
-                this._componentToDisplay$.next(treeConfig.nodeDescriptionComponent);
-            }
-        });
-    }
-    set nodeId(value) {
-        if (!value) {
-            return;
-        }
-        this._nodeId$.next(value);
-    }
-    set treeConfig(value) {
-        if (!value) {
-            return;
-        }
-        this._treeConfig$.next(value);
-    }
-    get treeConfig() {
-        return this._treeConfig$.getValue();
-    }
-    get nodeLabel$() {
-        return this._nodeLabel$.asObservable();
-    }
-    get nodeCssIcon$() {
-        return this._nodeCssIcon$.asObservable();
-    }
-    get nodeDescription$() {
-        return this._nodeDescription$.asObservable();
-    }
-    get componentAction$() {
-        return this._componentAction$.asObservable();
-    }
-    get componentToDisplay$() {
-        return this._componentToDisplay$.asObservable();
-    }
-    get cutAndPaste$() {
-        return this._cutAndPaste$.asObservable();
     }
     expandAll() {
-        const treeId = this._treeConfig$.getValue()?.treeId;
+        const treeId = this.treeConfig()?.treeId;
         if (treeId) {
-            this.dispatchAction(new NgssmExpandAllExpressionTreeNodesAction(treeId));
+            this.store.dispatchAction(new NgssmExpandAllExpressionTreeNodesAction(treeId));
         }
     }
     collapseAll() {
-        const treeId = this._treeConfig$.getValue()?.treeId;
+        const treeId = this.treeConfig()?.treeId;
         if (treeId) {
-            this.dispatchAction(new NgssmCollapseAllExpressionTreeNodesAction(treeId));
+            this.store.dispatchAction(new NgssmCollapseAllExpressionTreeNodesAction(treeId));
         }
     }
     cut() {
-        const treeId = this._treeConfig$.getValue()?.treeId;
-        const nodeId = this._nodeId$.getValue();
+        const treeId = this.treeConfig()?.treeId;
+        const nodeId = this.nodeId();
         if (treeId && nodeId) {
-            this.dispatchAction(new NgssmCutExpressionTreeNodeAction(treeId, nodeId));
+            this.store.dispatchAction(new NgssmCutExpressionTreeNodeAction(treeId, nodeId));
         }
     }
     cancelCut() {
-        const treeId = this._treeConfig$.getValue()?.treeId;
+        const treeId = this.treeConfig()?.treeId;
         if (treeId) {
-            this.dispatchAction(new NgssmCancelCutExpressionTreeNodeAction(treeId));
+            this.store.dispatchAction(new NgssmCancelCutExpressionTreeNodeAction(treeId));
         }
     }
     paste(target) {
-        const treeId = this._treeConfig$.getValue()?.treeId;
-        const nodeId = this._nodeId$.getValue();
+        const treeId = this.treeConfig()?.treeId;
+        const nodeId = this.nodeId();
         if (treeId && nodeId) {
-            this.dispatchAction(new NgssmPasteExpressionTreeNodeAction(treeId, nodeId, target));
+            this.store.dispatchAction(new NgssmPasteExpressionTreeNodeAction(treeId, nodeId, target));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: NgssmExpressionTreeNodeComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: NgssmExpressionTreeNodeComponent, isStandalone: true, selector: "ngssm-expression-tree-node", inputs: { nodeId: "nodeId", treeConfig: "treeConfig" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ngssm-expression-tree-node-icon\" *ngIf=\"(nodeCssIcon$ | async) !== undefined\" id=\"treeNodeIcon\">\n  <mat-icon class=\"{{ nodeCssIcon$ | async }}\"></mat-icon>\n</div>\n\n<div\n  class=\"ngssm-expression-tree-node-label\"\n  [matMenuTriggerFor]=\"contextMenu\"\n  [class.ngssm-expression-tree-node-to-cut]=\"(cutAndPaste$ | async)?.isPartOfCut === true\"\n  id=\"treeNodeLabel\">\n  {{ nodeLabel$ | async }}\n</div>\n\n<div class=\"ngssm-expression-tree-node-description\" [innerHTML]=\"nodeDescription$ | async\"></div>\n\n@let component = componentToDisplay$ | async;\n@if (component) {\n  <div\n    class=\"ngssm-expression-tree-node-description-component\"\n    [ngssmComponentDisplay]=\"component\"\n    [ngssmComponentAction]=\"componentAction$ | async\"></div>\n}\n\n<mat-menu #contextMenu=\"matMenu\" [class]=\"'ngssm-expression-tree-popup-menu'\">\n  <div class=\"flex-column-stretch\" *ngIf=\"treeConfig?.displayCutAndPasteMenus === true && (cutAndPaste$ | async) as cutAndPasteSetup\">\n    <button\n      mat-menu-item\n      (click)=\"cut()\"\n      *ngIf=\"cutAndPasteSetup.isCutAndPasteInProgress === false\"\n      [disabled]=\"cutAndPasteSetup.canCut !== true\">\n      <mat-icon class=\"fa-solid fa-scissors\"></mat-icon>\n      <span>Cut</span>\n    </button>\n    <button mat-menu-item *ngIf=\"cutAndPasteSetup.isCutAndPasteInProgress === true\" (click)=\"cancelCut()\">\n      <mat-icon class=\"fa-solid fa-slash\"></mat-icon>\n      <span>Cancel cut</span>\n    </button>\n    <button mat-menu-item [disabled]=\"cutAndPasteSetup.canPasteInside !== true\" (click)=\"paste('Inside')\">\n      <mat-icon class=\"fa-solid fa-paste\"></mat-icon>\n      <span>Paste inside</span>\n    </button>\n    <button mat-menu-item [disabled]=\"cutAndPasteSetup.canPasteAfter !== true\" (click)=\"paste('After')\">\n      <mat-icon class=\"fa-solid fa-paste\"></mat-icon>\n      <span>Paste after</span>\n    </button>\n    <mat-divider></mat-divider>\n  </div>\n\n  <button mat-menu-item (click)=\"expandAll()\">\n    <mat-icon class=\"fa-solid fa-up-right-and-down-left-from-center\"></mat-icon>\n    <span>Expand all</span>\n  </button>\n  <button mat-menu-item (click)=\"collapseAll()\">\n    <mat-icon class=\"fa-solid fa-down-left-and-up-right-to-center\"></mat-icon>\n    <span>Collapse all</span>\n  </button>\n</mat-menu>\n", styles: [":host{display:flex;flex-direction:row;align-items:center;flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgssmComponentDisplayDirective, selector: "[ngssmComponentDisplay]", inputs: ["ngssmComponentDisplay", "ngssmComponentAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NgssmExpressionTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: NgssmExpressionTreeNodeComponent, isStandalone: true, selector: "ngssm-expression-tree-node", inputs: { nodeId: { classPropertyName: "nodeId", publicName: "nodeId", isSignal: true, isRequired: false, transformFunction: null }, treeConfig: { classPropertyName: "treeConfig", publicName: "treeConfig", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (nodeCssIcon(); as css) {\n  <div class=\"ngssm-expression-tree-node-icon\" id=\"treeNodeIcon\">\n    <mat-icon class=\"{{ css }}\"></mat-icon>\n  </div>\n}\n\n<div\n  class=\"ngssm-expression-tree-node-label\"\n  [matMenuTriggerFor]=\"contextMenu\"\n  [class.ngssm-expression-tree-node-to-cut]=\"cutAndPaste().isPartOfCut === true\"\n  id=\"treeNodeLabel\">\n  {{ nodeLabel() }}\n</div>\n\n<div class=\"ngssm-expression-tree-node-description\" [innerHTML]=\"nodeDescription()\"></div>\n\n@let component = componentToDisplay();\n@if (component) {\n  <div\n    class=\"ngssm-expression-tree-node-description-component\"\n    [ngssmComponentDisplay]=\"component\"\n    [ngssmComponentAction]=\"componentAction()\"></div>\n}\n\n<mat-menu #contextMenu=\"matMenu\" [class]=\"'ngssm-expression-tree-popup-menu'\">\n  @let cutAndPasteSetup = cutAndPaste();\n  @if (treeConfig()?.displayCutAndPasteMenus === true && cutAndPasteSetup) {\n    <div class=\"flex-column-stretch\">\n      @if (cutAndPasteSetup.isCutAndPasteInProgress === false) {\n        <button mat-menu-item (click)=\"cut()\" [disabled]=\"cutAndPasteSetup.canCut !== true\">\n          <mat-icon class=\"fa-solid fa-scissors\"></mat-icon>\n          <span>Cut</span>\n        </button>\n      } @else {\n        <button mat-menu-item (click)=\"cancelCut()\">\n          <mat-icon class=\"fa-solid fa-slash\"></mat-icon>\n          <span>Cancel cut</span>\n        </button>\n      }\n\n      <button mat-menu-item [disabled]=\"cutAndPasteSetup.canPasteInside !== true\" (click)=\"paste('Inside')\">\n        <mat-icon class=\"fa-solid fa-paste\"></mat-icon>\n        <span>Paste inside</span>\n      </button>\n      <button mat-menu-item [disabled]=\"cutAndPasteSetup.canPasteAfter !== true\" (click)=\"paste('After')\">\n        <mat-icon class=\"fa-solid fa-paste\"></mat-icon>\n        <span>Paste after</span>\n      </button>\n      <mat-divider></mat-divider>\n    </div>\n  }\n\n  <button mat-menu-item (click)=\"expandAll()\">\n    <mat-icon class=\"fa-solid fa-up-right-and-down-left-from-center\"></mat-icon>\n    <span>Expand all</span>\n  </button>\n  <button mat-menu-item (click)=\"collapseAll()\">\n    <mat-icon class=\"fa-solid fa-down-left-and-up-right-to-center\"></mat-icon>\n    <span>Collapse all</span>\n  </button>\n</mat-menu>\n", styles: [":host{display:flex;flex-direction:row;align-items:center;flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2$3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgssmComponentDisplayDirective, selector: "[ngssmComponentDisplay]", inputs: ["ngssmComponentDisplay", "ngssmComponentAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: NgssmExpressionTreeNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NgssmExpressionTreeNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngssm-expression-tree-node', imports: [CommonModule, MatIconModule, MatMenuModule, MatDividerModule, NgssmComponentDisplayDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ngssm-expression-tree-node-icon\" *ngIf=\"(nodeCssIcon$ | async) !== undefined\" id=\"treeNodeIcon\">\n  <mat-icon class=\"{{ nodeCssIcon$ | async }}\"></mat-icon>\n</div>\n\n<div\n  class=\"ngssm-expression-tree-node-label\"\n  [matMenuTriggerFor]=\"contextMenu\"\n  [class.ngssm-expression-tree-node-to-cut]=\"(cutAndPaste$ | async)?.isPartOfCut === true\"\n  id=\"treeNodeLabel\">\n  {{ nodeLabel$ | async }}\n</div>\n\n<div class=\"ngssm-expression-tree-node-description\" [innerHTML]=\"nodeDescription$ | async\"></div>\n\n@let component = componentToDisplay$ | async;\n@if (component) {\n  <div\n    class=\"ngssm-expression-tree-node-description-component\"\n    [ngssmComponentDisplay]=\"component\"\n    [ngssmComponentAction]=\"componentAction$ | async\"></div>\n}\n\n<mat-menu #contextMenu=\"matMenu\" [class]=\"'ngssm-expression-tree-popup-menu'\">\n  <div class=\"flex-column-stretch\" *ngIf=\"treeConfig?.displayCutAndPasteMenus === true && (cutAndPaste$ | async) as cutAndPasteSetup\">\n    <button\n      mat-menu-item\n      (click)=\"cut()\"\n      *ngIf=\"cutAndPasteSetup.isCutAndPasteInProgress === false\"\n      [disabled]=\"cutAndPasteSetup.canCut !== true\">\n      <mat-icon class=\"fa-solid fa-scissors\"></mat-icon>\n      <span>Cut</span>\n    </button>\n    <button mat-menu-item *ngIf=\"cutAndPasteSetup.isCutAndPasteInProgress === true\" (click)=\"cancelCut()\">\n      <mat-icon class=\"fa-solid fa-slash\"></mat-icon>\n      <span>Cancel cut</span>\n    </button>\n    <button mat-menu-item [disabled]=\"cutAndPasteSetup.canPasteInside !== true\" (click)=\"paste('Inside')\">\n      <mat-icon class=\"fa-solid fa-paste\"></mat-icon>\n      <span>Paste inside</span>\n    </button>\n    <button mat-menu-item [disabled]=\"cutAndPasteSetup.canPasteAfter !== true\" (click)=\"paste('After')\">\n      <mat-icon class=\"fa-solid fa-paste\"></mat-icon>\n      <span>Paste after</span>\n    </button>\n    <mat-divider></mat-divider>\n  </div>\n\n  <button mat-menu-item (click)=\"expandAll()\">\n    <mat-icon class=\"fa-solid fa-up-right-and-down-left-from-center\"></mat-icon>\n    <span>Expand all</span>\n  </button>\n  <button mat-menu-item (click)=\"collapseAll()\">\n    <mat-icon class=\"fa-solid fa-down-left-and-up-right-to-center\"></mat-icon>\n    <span>Collapse all</span>\n  </button>\n</mat-menu>\n", styles: [":host{display:flex;flex-direction:row;align-items:center;flex:1}\n"] }]
-        }], ctorParameters: () => [{ type: i1.Store }], propDecorators: { nodeId: [{
-                type: Input
-            }], treeConfig: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'ngssm-expression-tree-node', imports: [CommonModule, MatIconModule, MatMenuModule, MatDividerModule, NgssmComponentDisplayDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (nodeCssIcon(); as css) {\n  <div class=\"ngssm-expression-tree-node-icon\" id=\"treeNodeIcon\">\n    <mat-icon class=\"{{ css }}\"></mat-icon>\n  </div>\n}\n\n<div\n  class=\"ngssm-expression-tree-node-label\"\n  [matMenuTriggerFor]=\"contextMenu\"\n  [class.ngssm-expression-tree-node-to-cut]=\"cutAndPaste().isPartOfCut === true\"\n  id=\"treeNodeLabel\">\n  {{ nodeLabel() }}\n</div>\n\n<div class=\"ngssm-expression-tree-node-description\" [innerHTML]=\"nodeDescription()\"></div>\n\n@let component = componentToDisplay();\n@if (component) {\n  <div\n    class=\"ngssm-expression-tree-node-description-component\"\n    [ngssmComponentDisplay]=\"component\"\n    [ngssmComponentAction]=\"componentAction()\"></div>\n}\n\n<mat-menu #contextMenu=\"matMenu\" [class]=\"'ngssm-expression-tree-popup-menu'\">\n  @let cutAndPasteSetup = cutAndPaste();\n  @if (treeConfig()?.displayCutAndPasteMenus === true && cutAndPasteSetup) {\n    <div class=\"flex-column-stretch\">\n      @if (cutAndPasteSetup.isCutAndPasteInProgress === false) {\n        <button mat-menu-item (click)=\"cut()\" [disabled]=\"cutAndPasteSetup.canCut !== true\">\n          <mat-icon class=\"fa-solid fa-scissors\"></mat-icon>\n          <span>Cut</span>\n        </button>\n      } @else {\n        <button mat-menu-item (click)=\"cancelCut()\">\n          <mat-icon class=\"fa-solid fa-slash\"></mat-icon>\n          <span>Cancel cut</span>\n        </button>\n      }\n\n      <button mat-menu-item [disabled]=\"cutAndPasteSetup.canPasteInside !== true\" (click)=\"paste('Inside')\">\n        <mat-icon class=\"fa-solid fa-paste\"></mat-icon>\n        <span>Paste inside</span>\n      </button>\n      <button mat-menu-item [disabled]=\"cutAndPasteSetup.canPasteAfter !== true\" (click)=\"paste('After')\">\n        <mat-icon class=\"fa-solid fa-paste\"></mat-icon>\n        <span>Paste after</span>\n      </button>\n      <mat-divider></mat-divider>\n    </div>\n  }\n\n  <button mat-menu-item (click)=\"expandAll()\">\n    <mat-icon class=\"fa-solid fa-up-right-and-down-left-from-center\"></mat-icon>\n    <span>Expand all</span>\n  </button>\n  <button mat-menu-item (click)=\"collapseAll()\">\n    <mat-icon class=\"fa-solid fa-down-left-and-up-right-to-center\"></mat-icon>\n    <span>Collapse all</span>\n  </button>\n</mat-menu>\n", styles: [":host{display:flex;flex-direction:row;align-items:center;flex:1}\n"] }]
+        }], ctorParameters: () => [] });
 
-class NgssmExpressionTreeNodeDetailsComponent extends NgSsmComponent {
-    constructor(store, elementRef) {
-        super(store);
-        this.elementRef = elementRef;
-        this._nodeId$ = new Subject();
-        this._treeConfig$ = new Subject();
-        this._componentAction$ = new BehaviorSubject(undefined);
-        this._componentToDisplay$ = new BehaviorSubject(undefined);
-        this.initialized = false;
-        this.heightChanged = new EventEmitter();
-        combineLatest([this._nodeId$, this._treeConfig$])
-            .pipe(take(1))
-            .subscribe((values) => {
-            this.initialized = true;
-            this._componentAction$.next((c) => c.setup(values[1].treeId, values[0]));
-            this._componentToDisplay$.next(values[1].nodeDetailComponent);
+class NgssmExpressionTreeNodeDetailsComponent {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.nodeId = input();
+        this.treeConfig = input();
+        this.heightChanged = output();
+        this.componentAction = signal(undefined);
+        this.componentToDisplay = signal(undefined);
+        effect(() => {
+            const currentNodeId = this.nodeId();
+            const currentConfig = this.treeConfig();
+            if (!currentNodeId || !currentConfig) {
+                return;
+            }
+            this.componentAction.set((c) => c.setup(currentConfig.treeId, currentNodeId));
+            this.componentToDisplay.set(currentConfig.nodeDetailComponent);
             setTimeout(() => {
                 this.heightChanged.emit(this.elementRef?.nativeElement.getBoundingClientRect().height ?? 0);
             });
         });
     }
-    set nodeId(value) {
-        if (!value) {
-            return;
-        }
-        if (this.initialized) {
-            throw new Error('Component NgssmExpressionTreeNodeDetailsComponent is already initialized.');
-        }
-        this._nodeId$.next(value);
-    }
-    set treeConfig(value) {
-        if (!value) {
-            return;
-        }
-        if (this.initialized) {
-            throw new Error('Component NgssmExpressionTreeNodeDetailsComponent is already initialized.');
-        }
-        this._treeConfig$.next(value);
-    }
-    get componentAction$() {
-        return this._componentAction$.asObservable();
-    }
-    get componentToDisplay$() {
-        return this._componentToDisplay$.asObservable();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: NgssmExpressionTreeNodeDetailsComponent, deps: [{ token: i1.Store }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: NgssmExpressionTreeNodeDetailsComponent, isStandalone: true, selector: "ngssm-expression-tree-node-details", inputs: { nodeId: "nodeId", treeConfig: "treeConfig" }, outputs: { heightChanged: "heightChanged" }, usesInheritance: true, ngImport: i0, template: "@let component = componentToDisplay$ | async;\n@if (component){\n    <div [ngssmComponentDisplay]=\"component\" [ngssmComponentAction]=\"componentAction$ | async\"></div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "directive", type: NgssmComponentDisplayDirective, selector: "[ngssmComponentDisplay]", inputs: ["ngssmComponentDisplay", "ngssmComponentAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NgssmExpressionTreeNodeDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: NgssmExpressionTreeNodeDetailsComponent, isStandalone: true, selector: "ngssm-expression-tree-node-details", inputs: { nodeId: { classPropertyName: "nodeId", publicName: "nodeId", isSignal: true, isRequired: false, transformFunction: null }, treeConfig: { classPropertyName: "treeConfig", publicName: "treeConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { heightChanged: "heightChanged" }, ngImport: i0, template: "@if (componentToDisplay(); as component) {\n  <div [ngssmComponentDisplay]=\"component\" [ngssmComponentAction]=\"componentAction()\"></div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgssmComponentDisplayDirective, selector: "[ngssmComponentDisplay]", inputs: ["ngssmComponentDisplay", "ngssmComponentAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: NgssmExpressionTreeNodeDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NgssmExpressionTreeNodeDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngssm-expression-tree-node-details', imports: [CommonModule, NgssmComponentDisplayDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let component = componentToDisplay$ | async;\n@if (component){\n    <div [ngssmComponentDisplay]=\"component\" [ngssmComponentAction]=\"componentAction$ | async\"></div>\n}\n" }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: i0.ElementRef }], propDecorators: { heightChanged: [{
-                type: Output
-            }], nodeId: [{
-                type: Input
-            }], treeConfig: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'ngssm-expression-tree-node-details', imports: [CommonModule, NgssmComponentDisplayDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (componentToDisplay(); as component) {\n  <div [ngssmComponentDisplay]=\"component\" [ngssmComponentAction]=\"componentAction()\"></div>\n}\n" }]
+        }], ctorParameters: () => [] });
 
-class NgssmExpressionTreeComponent extends NgSsmComponent {
-    constructor(store, changeDetectorRef) {
-        super(store);
-        this.changeDetectorRef = changeDetectorRef;
-        this._tree$ = new BehaviorSubject(undefined);
-        this._displayedNodes$ = new BehaviorSubject([]);
-        this._treeConfig$ = new BehaviorSubject(undefined);
-        this._tree$.pipe(takeUntil(this.unsubscribeAll$)).subscribe((tree) => {
-            const displayedNodes = [];
+class NgssmExpressionTreeComponent {
+    constructor() {
+        this.store = inject(Store);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.trees = createSignal((state) => selectNgssmExpressionTreeState(state).trees);
+        this.treeConfig = input(undefined, {
+            transform: (value) => {
+                if (!value) {
+                    return value;
+                }
+                const config = {
+                    ...value
+                };
+                if (!config.getNodeLabel) {
+                    config.getNodeLabel = (node) => node.data.id;
+                }
+                if (!config.expandIconClass) {
+                    config.expandIconClass = 'fa-solid fa-chevron-right';
+                }
+                if (!config.collapseIconClass) {
+                    config.collapseIconClass = 'fa-solid fa-chevron-down';
+                }
+                return config;
+            }
+        });
+        this.displayedNodes = signal([]);
+        effect(() => {
+            const config = this.treeConfig();
+            if (!config) {
+                this.displayedNodes.set([]);
+                return;
+            }
+            const nodes = [];
             const collapsedNodes = new Set();
-            (tree?.nodes ?? []).forEach((node) => {
+            (this.trees()[config.treeId]?.nodes ?? []).forEach((node) => {
                 if (node.data.isExpandable === true && node.isExpanded === false) {
                     collapsedNodes.add(node.data.id);
                 }
                 if (!node.data.parentId || node.path.findIndex((p) => collapsedNodes.has(p)) === -1) {
-                    displayedNodes.push(node);
+                    nodes.push(node);
                 }
             });
-            this._displayedNodes$.next(displayedNodes);
+            this.displayedNodes.set(nodes);
         });
     }
-    set treeConfig(value) {
-        this._treeSubscription?.unsubscribe();
-        if (!value) {
-            this._treeConfig$.next(undefined);
-            return;
-        }
-        const config = {
-            ...value
-        };
-        if (!config.getNodeLabel) {
-            config.getNodeLabel = (node) => node.data.id;
-        }
-        if (!config.expandIconClass) {
-            config.expandIconClass = 'fa-solid fa-chevron-right';
-        }
-        if (!config.collapseIconClass) {
-            config.collapseIconClass = 'fa-solid fa-chevron-down';
-        }
-        this._treeConfig$.next(config);
-        this._treeSubscription = this.watch((s) => selectNgssmExpressionTreeState(s).trees[value.treeId]).subscribe((tree) => this._tree$.next(tree));
-    }
-    get treeConfig$() {
-        return this._treeConfig$.asObservable();
-    }
-    get displayedNodes$() {
-        return this._displayedNodes$.asObservable();
-    }
     getItemId(_, node) {
         return node.data.id;
     }
-    getDefaultPadding() {
-        return this._treeConfig$.getValue()?.nodePadding ?? 20;
-    }
     expand(node) {
-        const treeId = this._treeConfig$.getValue()?.treeId;
+        const treeId = this.treeConfig()?.treeId;
         if (treeId) {
-            this.dispatchAction(new NgssmExpandExpressionTreeNodeAction(treeId, node.data.id));
+            this.store.dispatchAction(new NgssmExpandExpressionTreeNodeAction(treeId, node.data.id));
         }
     }
     collapse(node) {
-        const treeId = this._treeConfig$.getValue()?.treeId;
+        const treeId = this.treeConfig()?.treeId;
         if (treeId) {
-            this.dispatchAction(new NgssmCollapseExpressionTreeNodeAction(treeId, node.data.id));
+            this.store.dispatchAction(new NgssmCollapseExpressionTreeNodeAction(treeId, node.data.id));
         }
     }
     forceRefresh() {
         this.changeDetectorRef.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: NgssmExpressionTreeComponent, deps: [{ token: i1.Store }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: NgssmExpressionTreeComponent, isStandalone: true, selector: "ngssm-expression-tree", inputs: { treeConfig: "treeConfig" }, usesInheritance: true, ngImport: i0, template: "<mat-card class=\"flex-column-stretch fxFlex ngssm-expression-tree\">\n    <mat-card-content class=\"flex-column-stretch fxFlex ngssm-expression-tree-content\"\n        *ngIf=\"(treeConfig$ | async) as treeConfig\">\n        <cdk-virtual-scroll-viewport [itemSize]=\"treeConfig.rowSize ?? 30\" class=\"fxFlex\"\n            *ngIf=\"treeConfig.disableVirtualization !== true\">\n            <div *cdkVirtualFor=\"let item of displayedNodes$ | async; trackBy: getItemId\"\n                class=\"ngssm-expression-tree-node\" id=\"{{'node_' + item.data.id}}\">\n                <ng-container *ngTemplateOutlet=\"nodeTemplate;context: {treeConfig, item}\"></ng-container>\n            </div>\n        </cdk-virtual-scroll-viewport>\n        <div class=\"ngssm-expression-tree-nodes-container\" *ngIf=\"treeConfig.disableVirtualization === true\">\n            <div *ngFor=\"let item of displayedNodes$ | async; trackBy: getItemId\" class=\"ngssm-expression-tree-node\"\n                id=\"{{'node_' + item.data.id}}\">\n                <ng-container *ngTemplateOutlet=\"nodeTemplate;context: {treeConfig, item}\"></ng-container>\n            </div>\n        </div>\n    </mat-card-content>\n</mat-card>\n\n<ng-template #nodeTemplate let-treeConfig=\"treeConfig\" let-item=\"item\">\n    <div class=\"flex-row-center fxFlex\" [style.height.px]=\"treeConfig.rowSize ?? 30\">\n        <mat-divider [vertical]=\"true\" class=\"ngssm-expression-tree-node-divider\"\n            [style.height.px]=\"treeConfig.rowSize ?? 30\" *ngFor=\"let part of item.path\"\n            [style.margin-right.px]=\"getDefaultPadding()\">\n        </mat-divider>\n        <mat-icon class=\"{{treeConfig.expandIconClass}}\"\n            *ngIf=\"(item.data.isExpandable || item.data.hasRowDetail) && item.isExpanded === false\"\n            (click)=\"$event.stopPropagation();expand(item);\" id=\"expandIcon\">\n        </mat-icon>\n        <mat-icon class=\"{{treeConfig.collapseIconClass}}\"\n            *ngIf=\"(item.data.isExpandable || item.data.hasRowDetail) && item.isExpanded === true\"\n            (click)=\"$event.stopPropagation();collapse(item);\" id=\"collapseIcon\">\n        </mat-icon>\n        <ngssm-expression-tree-node [nodeId]=\"item.data.id\" [treeConfig]=\"treeConfig\">\n        </ngssm-expression-tree-node>\n    </div>\n    <div *ngIf=\"item.data.hasRowDetail === true && item.isExpanded === true\" class=\"flex-row-center fxFlex\">\n        <mat-divider [vertical]=\"true\" class=\"ngssm-expression-tree-node-divider\"\n            [style.height.px]=\"detailContainer.getBoundingClientRect().height\" *ngFor=\" let part of item.path\"\n            [style.margin-right.px]=\"getDefaultPadding()\">\n        </mat-divider>\n\n        <div #detailContainer class=\"ngssm-expression-tree-node-detail-component\">\n            <ngssm-expression-tree-node-details [nodeId]=\"item.data.id\" [treeConfig]=\"treeConfig\"\n                (heightChanged)=\"forceRefresh()\">\n            </ngssm-expression-tree-node-details>\n        </div>\n    </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NgssmExpressionTreeNodeComponent, selector: "ngssm-expression-tree-node", inputs: ["nodeId", "treeConfig"] }, { kind: "component", type: NgssmExpressionTreeNodeDetailsComponent, selector: "ngssm-expression-tree-node-details", inputs: ["nodeId", "treeConfig"], outputs: ["heightChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NgssmExpressionTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: NgssmExpressionTreeComponent, isStandalone: true, selector: "ngssm-expression-tree", inputs: { treeConfig: { classPropertyName: "treeConfig", publicName: "treeConfig", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let defaultPadding = treeConfig()?.nodePadding ?? 20;\n\n<mat-card class=\"flex-column-stretch fxFlex ngssm-expression-tree\">\n  @if (treeConfig(); as config) {\n    <mat-card-content class=\"flex-column-stretch fxFlex ngssm-expression-tree-content\">\n      @if (config.disableVirtualization) {\n        <div class=\"ngssm-expression-tree-nodes-container\">\n          @for (item of displayedNodes(); track item.data.id) {\n            <div class=\"ngssm-expression-tree-node\" id=\"{{ 'node_' + item.data.id }}\">\n              <ng-container *ngTemplateOutlet=\"nodeTemplate; context: { config, item }\"></ng-container>\n            </div>\n          }\n        </div>\n      } @else {\n        <cdk-virtual-scroll-viewport [itemSize]=\"config.rowSize ?? 30\" class=\"fxFlex\">\n          <div\n            *cdkVirtualFor=\"let item of displayedNodes(); trackBy: getItemId\"\n            class=\"ngssm-expression-tree-node\"\n            id=\"{{ 'node_' + item.data.id }}\">\n            <ng-container *ngTemplateOutlet=\"nodeTemplate; context: { config, item }\"></ng-container>\n          </div>\n        </cdk-virtual-scroll-viewport>\n      }\n    </mat-card-content>\n  }\n</mat-card>\n\n<ng-template #nodeTemplate let-config=\"config\" let-item=\"item\">\n  <div class=\"flex-row-center fxFlex\" [style.height.px]=\"config.rowSize ?? 30\">\n    @for (part of item.path; track part) {\n      <mat-divider\n        [vertical]=\"true\"\n        class=\"ngssm-expression-tree-node-divider\"\n        [style.height.px]=\"config.rowSize ?? 30\"\n        [style.margin-right.px]=\"defaultPadding\">\n      </mat-divider>\n    }\n    @if ((item.data.isExpandable || item.data.hasRowDetail) && item.isExpanded === false) {\n      <mat-icon class=\"{{ config.expandIconClass }}\" (click)=\"$event.stopPropagation(); expand(item)\" id=\"expandIcon\"> </mat-icon>\n    }\n\n    @if ((item.data.isExpandable || item.data.hasRowDetail) && item.isExpanded === true) {\n      <mat-icon class=\"{{ config.collapseIconClass }}\" (click)=\"$event.stopPropagation(); collapse(item)\" id=\"collapseIcon\"> </mat-icon>\n    }\n\n    <ngssm-expression-tree-node [nodeId]=\"item.data.id\" [treeConfig]=\"config\"> </ngssm-expression-tree-node>\n  </div>\n  @if (item.data.hasRowDetail === true && item.isExpanded === true) {\n    <div class=\"flex-row-center fxFlex\">\n      @for (part of item.path; track part) {\n        <mat-divider\n          [vertical]=\"true\"\n          class=\"ngssm-expression-tree-node-divider\"\n          [style.height.px]=\"detailContainer.getBoundingClientRect().height\"\n          [style.margin-right.px]=\"defaultPadding\">\n        </mat-divider>\n      }\n\n      <div #detailContainer class=\"ngssm-expression-tree-node-detail-component\">\n        <ngssm-expression-tree-node-details [nodeId]=\"item.data.id\" [treeConfig]=\"config\" (heightChanged)=\"forceRefresh()\">\n        </ngssm-expression-tree-node-details>\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NgssmExpressionTreeNodeComponent, selector: "ngssm-expression-tree-node", inputs: ["nodeId", "treeConfig"] }, { kind: "component", type: NgssmExpressionTreeNodeDetailsComponent, selector: "ngssm-expression-tree-node-details", inputs: ["nodeId", "treeConfig"], outputs: ["heightChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: NgssmExpressionTreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NgssmExpressionTreeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngssm-expression-tree', imports: [
                         CommonModule,
                         ScrollingModule,
-                        MatCardModule,
-                        MatDividerModule,
-                        MatIconModule,
+                        MatCard,
+                        MatCardContent,
+                        MatDivider,
+                        MatIcon,
                         NgssmExpressionTreeNodeComponent,
                         NgssmExpressionTreeNodeDetailsComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card class=\"flex-column-stretch fxFlex ngssm-expression-tree\">\n    <mat-card-content class=\"flex-column-stretch fxFlex ngssm-expression-tree-content\"\n        *ngIf=\"(treeConfig$ | async) as treeConfig\">\n        <cdk-virtual-scroll-viewport [itemSize]=\"treeConfig.rowSize ?? 30\" class=\"fxFlex\"\n            *ngIf=\"treeConfig.disableVirtualization !== true\">\n            <div *cdkVirtualFor=\"let item of displayedNodes$ | async; trackBy: getItemId\"\n                class=\"ngssm-expression-tree-node\" id=\"{{'node_' + item.data.id}}\">\n                <ng-container *ngTemplateOutlet=\"nodeTemplate;context: {treeConfig, item}\"></ng-container>\n            </div>\n        </cdk-virtual-scroll-viewport>\n        <div class=\"ngssm-expression-tree-nodes-container\" *ngIf=\"treeConfig.disableVirtualization === true\">\n            <div *ngFor=\"let item of displayedNodes$ | async; trackBy: getItemId\" class=\"ngssm-expression-tree-node\"\n                id=\"{{'node_' + item.data.id}}\">\n                <ng-container *ngTemplateOutlet=\"nodeTemplate;context: {treeConfig, item}\"></ng-container>\n            </div>\n        </div>\n    </mat-card-content>\n</mat-card>\n\n<ng-template #nodeTemplate let-treeConfig=\"treeConfig\" let-item=\"item\">\n    <div class=\"flex-row-center fxFlex\" [style.height.px]=\"treeConfig.rowSize ?? 30\">\n        <mat-divider [vertical]=\"true\" class=\"ngssm-expression-tree-node-divider\"\n            [style.height.px]=\"treeConfig.rowSize ?? 30\" *ngFor=\"let part of item.path\"\n            [style.margin-right.px]=\"getDefaultPadding()\">\n        </mat-divider>\n        <mat-icon class=\"{{treeConfig.expandIconClass}}\"\n            *ngIf=\"(item.data.isExpandable || item.data.hasRowDetail) && item.isExpanded === false\"\n            (click)=\"$event.stopPropagation();expand(item);\" id=\"expandIcon\">\n        </mat-icon>\n        <mat-icon class=\"{{treeConfig.collapseIconClass}}\"\n            *ngIf=\"(item.data.isExpandable || item.data.hasRowDetail) && item.isExpanded === true\"\n            (click)=\"$event.stopPropagation();collapse(item);\" id=\"collapseIcon\">\n        </mat-icon>\n        <ngssm-expression-tree-node [nodeId]=\"item.data.id\" [treeConfig]=\"treeConfig\">\n        </ngssm-expression-tree-node>\n    </div>\n    <div *ngIf=\"item.data.hasRowDetail === true && item.isExpanded === true\" class=\"flex-row-center fxFlex\">\n        <mat-divider [vertical]=\"true\" class=\"ngssm-expression-tree-node-divider\"\n            [style.height.px]=\"detailContainer.getBoundingClientRect().height\" *ngFor=\" let part of item.path\"\n            [style.margin-right.px]=\"getDefaultPadding()\">\n        </mat-divider>\n\n        <div #detailContainer class=\"ngssm-expression-tree-node-detail-component\">\n            <ngssm-expression-tree-node-details [nodeId]=\"item.data.id\" [treeConfig]=\"treeConfig\"\n                (heightChanged)=\"forceRefresh()\">\n            </ngssm-expression-tree-node-details>\n        </div>\n    </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column}\n"] }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: i0.ChangeDetectorRef }], propDecorators: { treeConfig: [{
-                type: Input
-            }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let defaultPadding = treeConfig()?.nodePadding ?? 20;\n\n<mat-card class=\"flex-column-stretch fxFlex ngssm-expression-tree\">\n  @if (treeConfig(); as config) {\n    <mat-card-content class=\"flex-column-stretch fxFlex ngssm-expression-tree-content\">\n      @if (config.disableVirtualization) {\n        <div class=\"ngssm-expression-tree-nodes-container\">\n          @for (item of displayedNodes(); track item.data.id) {\n            <div class=\"ngssm-expression-tree-node\" id=\"{{ 'node_' + item.data.id }}\">\n              <ng-container *ngTemplateOutlet=\"nodeTemplate; context: { config, item }\"></ng-container>\n            </div>\n          }\n        </div>\n      } @else {\n        <cdk-virtual-scroll-viewport [itemSize]=\"config.rowSize ?? 30\" class=\"fxFlex\">\n          <div\n            *cdkVirtualFor=\"let item of displayedNodes(); trackBy: getItemId\"\n            class=\"ngssm-expression-tree-node\"\n            id=\"{{ 'node_' + item.data.id }}\">\n            <ng-container *ngTemplateOutlet=\"nodeTemplate; context: { config, item }\"></ng-container>\n          </div>\n        </cdk-virtual-scroll-viewport>\n      }\n    </mat-card-content>\n  }\n</mat-card>\n\n<ng-template #nodeTemplate let-config=\"config\" let-item=\"item\">\n  <div class=\"flex-row-center fxFlex\" [style.height.px]=\"config.rowSize ?? 30\">\n    @for (part of item.path; track part) {\n      <mat-divider\n        [vertical]=\"true\"\n        class=\"ngssm-expression-tree-node-divider\"\n        [style.height.px]=\"config.rowSize ?? 30\"\n        [style.margin-right.px]=\"defaultPadding\">\n      </mat-divider>\n    }\n    @if ((item.data.isExpandable || item.data.hasRowDetail) && item.isExpanded === false) {\n      <mat-icon class=\"{{ config.expandIconClass }}\" (click)=\"$event.stopPropagation(); expand(item)\" id=\"expandIcon\"> </mat-icon>\n    }\n\n    @if ((item.data.isExpandable || item.data.hasRowDetail) && item.isExpanded === true) {\n      <mat-icon class=\"{{ config.collapseIconClass }}\" (click)=\"$event.stopPropagation(); collapse(item)\" id=\"collapseIcon\"> </mat-icon>\n    }\n\n    <ngssm-expression-tree-node [nodeId]=\"item.data.id\" [treeConfig]=\"config\"> </ngssm-expression-tree-node>\n  </div>\n  @if (item.data.hasRowDetail === true && item.isExpanded === true) {\n    <div class=\"flex-row-center fxFlex\">\n      @for (part of item.path; track part) {\n        <mat-divider\n          [vertical]=\"true\"\n          class=\"ngssm-expression-tree-node-divider\"\n          [style.height.px]=\"detailContainer.getBoundingClientRect().height\"\n          [style.margin-right.px]=\"defaultPadding\">\n        </mat-divider>\n      }\n\n      <div #detailContainer class=\"ngssm-expression-tree-node-detail-component\">\n        <ngssm-expression-tree-node-details [nodeId]=\"item.data.id\" [treeConfig]=\"config\" (heightChanged)=\"forceRefresh()\">\n        </ngssm-expression-tree-node-details>\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column}\n"] }]
+        }], ctorParameters: () => [] });
 
 /*
  * Public API Surface of ngssm-tree