@myrmidon/paged-data-browsers 5.0.3 → 5.1.2

package/fesm2022/myrmidon-paged-data-browsers.mjs

@@ -12,9 +12,13 @@ import * as i5 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { ColorToContrastPipe, StringToColorPipe } from '@myrmidon/ngx-tools';
 import { BehaviorSubject, of, tap, forkJoin } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 class CompactPagerComponent {
     constructor() {
+        /**
+         * The current paging information.
+         */
         this.paging = input({ pageNumber: 0, pageCount: 0, total: 0 }, ...(ngDevMode ? [{ debugName: "paging" }] : []));
         /**
          * Emits the new paging information when the user changes the page.
@@ -48,13 +52,13 @@ class CompactPagerComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CompactPagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: CompactPagerComponent, isStandalone: true, selector: "pdb-compact-pager", inputs: { paging: { classPropertyName: "paging", publicName: "paging", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pagingChange: "pagingChange" }, ngImport: i0, template: "@if (paging().pageCount) {\n  <div class=\"form-row\">\n    <span id=\"pages\">{{ paging().pageNumber }}/{{ paging().pageCount }}</span>\n    <button\n      type=\"button\"\n      mat-icon-button\n      (click)=\"onFirst()\"\n      [disabled]=\"paging().pageNumber < 2\"\n      >\n      <mat-icon>first_page</mat-icon>\n    </button>\n    <button\n      type=\"button\"\n      mat-icon-button\n      (click)=\"onPrevious()\"\n      [disabled]=\"paging().pageNumber < 2\"\n      >\n      <mat-icon>navigate_before</mat-icon>\n    </button>\n    <button\n      type=\"button\"\n      mat-icon-button\n      (click)=\"onNext()\"\n      [disabled]=\"paging().pageNumber === paging().pageCount\"\n      >\n      <mat-icon>navigate_next</mat-icon>\n    </button>\n    <button\n      type=\"button\"\n      mat-icon-button\n      (click)=\"onLast()\"\n      [disabled]=\"paging().pageNumber === paging().pageCount\"\n      >\n      <mat-icon>last_page</mat-icon>\n    </button>\n    <span id=\"total\">{{ paging().total }} </span>\n  </div>\n}\n", styles: ["#pages,#total{color:silver}.form-row{display:flex;gap:2px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: CompactPagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: CompactPagerComponent, isStandalone: true, selector: "pdb-compact-pager", inputs: { paging: { classPropertyName: "paging", publicName: "paging", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pagingChange: "pagingChange" }, ngImport: i0, template: "@if (paging().pageCount) {\n  <div class=\"form-row\">\n    <span id=\"pages\">{{ paging().pageNumber }}/{{ paging().pageCount }}</span>\n    <button\n      type=\"button\"\n      mat-icon-button\n      (click)=\"onFirst()\"\n      [disabled]=\"paging().pageNumber < 2\"\n      >\n      <mat-icon>first_page</mat-icon>\n    </button>\n    <button\n      type=\"button\"\n      mat-icon-button\n      (click)=\"onPrevious()\"\n      [disabled]=\"paging().pageNumber < 2\"\n      >\n      <mat-icon>navigate_before</mat-icon>\n    </button>\n    <button\n      type=\"button\"\n      mat-icon-button\n      (click)=\"onNext()\"\n      [disabled]=\"paging().pageNumber === paging().pageCount\"\n      >\n      <mat-icon>navigate_next</mat-icon>\n    </button>\n    <button\n      type=\"button\"\n      mat-icon-button\n      (click)=\"onLast()\"\n      [disabled]=\"paging().pageNumber === paging().pageCount\"\n      >\n      <mat-icon>last_page</mat-icon>\n    </button>\n    <span id=\"total\">{{ paging().total }} </span>\n  </div>\n}\n", styles: ["#pages,#total{color:silver}.form-row{display:flex;gap:2px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CompactPagerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: CompactPagerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pdb-compact-pager', imports: [CommonModule, MatButtonModule, MatIconModule], template: "@if (paging().pageCount) {\n  <div class=\"form-row\">\n    <span id=\"pages\">{{ paging().pageNumber }}/{{ paging().pageCount }}</span>\n    <button\n      type=\"button\"\n      mat-icon-button\n      (click)=\"onFirst()\"\n      [disabled]=\"paging().pageNumber < 2\"\n      >\n      <mat-icon>first_page</mat-icon>\n    </button>\n    <button\n      type=\"button\"\n      mat-icon-button\n      (click)=\"onPrevious()\"\n      [disabled]=\"paging().pageNumber < 2\"\n      >\n      <mat-icon>navigate_before</mat-icon>\n    </button>\n    <button\n      type=\"button\"\n      mat-icon-button\n      (click)=\"onNext()\"\n      [disabled]=\"paging().pageNumber === paging().pageCount\"\n      >\n      <mat-icon>navigate_next</mat-icon>\n    </button>\n    <button\n      type=\"button\"\n      mat-icon-button\n      (click)=\"onLast()\"\n      [disabled]=\"paging().pageNumber === paging().pageCount\"\n      >\n      <mat-icon>last_page</mat-icon>\n    </button>\n    <span id=\"total\">{{ paging().total }} </span>\n  </div>\n}\n", styles: ["#pages,#total{color:silver}.form-row{display:flex;gap:2px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"] }]
-        }] });
+        }], propDecorators: { paging: [{ type: i0.Input, args: [{ isSignal: true, alias: "paging", required: false }] }], pagingChange: [{ type: i0.Output, args: ["pagingChange"] }] } });
 
 class RangeViewComponent {
     constructor() {
@@ -87,13 +91,13 @@ class RangeViewComponent {
             ];
         }, ...(ngDevMode ? [{ debugName: "scaledRange" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RangeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: RangeViewComponent, isStandalone: true, selector: "pdb-range-view", inputs: { domain: { classPropertyName: "domain", publicName: "domain", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg [attr.width]=\"width()\" [attr.height]=\"height()\">\n  <rect id=\"rdomain\" [attr.width]=\"width()\" [attr.height]=\"height()\" />\n  <rect\n    id=\"rrange\"\n    [attr.x]=\"scaledRange()[0]\"\n    [attr.y]=\"0\"\n    [attr.width]=\"scaledRange()[1] - scaledRange()[0]\"\n    [attr.height]=\"height()\"\n  />\n</svg>\n", styles: ["#rdomain{fill:#d3d3d3;stroke-width:3;stroke:#c1ba9b}#rrange{fill:#91aad3;stroke-width:3}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RangeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: RangeViewComponent, isStandalone: true, selector: "pdb-range-view", inputs: { domain: { classPropertyName: "domain", publicName: "domain", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg [attr.width]=\"width()\" [attr.height]=\"height()\">\n  <rect id=\"rdomain\" [attr.width]=\"width()\" [attr.height]=\"height()\" />\n  <rect\n    id=\"rrange\"\n    [attr.x]=\"scaledRange()[0]\"\n    [attr.y]=\"0\"\n    [attr.width]=\"scaledRange()[1] - scaledRange()[0]\"\n    [attr.height]=\"height()\"\n  />\n</svg>\n", styles: ["#rdomain{fill:#d3d3d3;stroke-width:3;stroke:#c1ba9b}#rrange{fill:#91aad3;stroke-width:3}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RangeViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RangeViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pdb-range-view', template: "<svg [attr.width]=\"width()\" [attr.height]=\"height()\">\n  <rect id=\"rdomain\" [attr.width]=\"width()\" [attr.height]=\"height()\" />\n  <rect\n    id=\"rrange\"\n    [attr.x]=\"scaledRange()[0]\"\n    [attr.y]=\"0\"\n    [attr.width]=\"scaledRange()[1] - scaledRange()[0]\"\n    [attr.height]=\"height()\"\n  />\n</svg>\n", styles: ["#rdomain{fill:#d3d3d3;stroke-width:3;stroke:#c1ba9b}#rrange{fill:#91aad3;stroke-width:3}\n"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { domain: [{ type: i0.Input, args: [{ isSignal: true, alias: "domain", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
 
 /**
  * Browser tree node component view. This wraps some HTML content providing
@@ -178,14 +182,14 @@ class BrowserTreeNodeComponent {
             this.editNodeFilterRequest.emit(this.node());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: BrowserTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: BrowserTreeNodeComponent, isStandalone: true, selector: "pdb-browser-tree-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, paging: { classPropertyName: "paging", publicName: "paging", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, hideLoc: { classPropertyName: "hideLoc", publicName: "hideLoc", isSignal: true, isRequired: false, transformFunction: null }, hidePaging: { classPropertyName: "hidePaging", publicName: "hidePaging", isSignal: true, isRequired: false, transformFunction: null }, hideFilter: { classPropertyName: "hideFilter", publicName: "hideFilter", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, rangeWidth: { classPropertyName: "rangeWidth", publicName: "rangeWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleExpandedRequest: "toggleExpandedRequest", changePageRequest: "changePageRequest", editNodeFilterRequest: "editNodeFilterRequest" }, ngImport: i0, template: "@if (node()) {\r\n<div id=\"node\" [style.margin-left.px]=\"(node()!.y - 1) * indentSize()\">\r\n  <!-- pager -->\r\n  @if (node()!.expanded && paging() && paging()!.pageCount > 1) {\r\n  <div id=\"pager\" [style.display]=\"hidePaging() ? 'inherit' : 'block'\">\r\n    <pdb-compact-pager\r\n      [paging]=\"paging()!\"\r\n      (pagingChange)=\"onPagingChange(node()!, $event)\"\r\n    />\r\n    <pdb-range-view\r\n      [width]=\"rangeWidth()\"\r\n      [domain]=\"[0, paging()!.pageCount]\"\r\n      [range]=\"[paging()!.pageNumber - 1, paging()!.pageNumber]\"\r\n    />\r\n  </div>\r\n  }\r\n  <!-- node -->\r\n  <div class=\"form-row\">\r\n    <!-- expand/collapse button -->\r\n    <button\r\n      type=\"button\"\r\n      mat-icon-button\r\n      [matTooltip]=\"node()?.expanded ? 'Collapse' : 'Expand'\"\r\n      i18n-matTooltip\r\n      [disabled]=\"node()!.hasChildren === false\"\r\n      (click)=\"onToggleExpanded()\"\r\n    >\r\n      <mat-icon class=\"mat-primary\" i18n>\r\n        @if (node()!.hasChildren === true) { @if (node()!.expanded) {\r\n        chevron_left } @else { chevron_right } } @else { stop }\r\n      </mat-icon>\r\n    </button>\r\n\r\n    <!-- tag -->\r\n    @if (!hideLabel()) {\r\n    <span\r\n      class=\"tag\"\r\n      [ngStyle]=\"{\r\n        'background-color': (node()!.tag | stringToColor),\r\n        color: node()!.tag | stringToColor | colorToContrast\r\n      }\"\r\n      >{{ node()!.tag }}</span\r\n    >\r\n\r\n    <!-- loc and label -->\r\n    @if (!hideLoc()) {\r\n    <span class=\"loc\">{{ node()!.y }}.{{ node()!.x }}</span> - }\r\n    {{ node()!.label }}\r\n    }\r\n\r\n    <!-- PROJECTED NODE -->\r\n    <ng-content></ng-content>\r\n\r\n    <!-- debug -->\r\n    @if (debug()) {\r\n    <span class=\"debug\"\r\n      >#{{ node()!.id }}\r\n      <span\r\n        >| {{ node()!.paging.pageNumber }}/{{ node()!.paging.pageCount }} ({{\r\n          node()!.paging.total\r\n        }})</span\r\n      ></span\r\n    >\r\n    }\r\n\r\n    <!-- filter -->\r\n    @if (!hideFilter()){ @if (!node()?.filter && node()?.y) {\r\n    <div class=\"muted\">\r\n      <button\r\n        type=\"button\"\r\n        mat-icon-button\r\n        matTooltip=\"Add filter\"\r\n        i18n-matTooltip\r\n        (click)=\"onEditFilter()\"\r\n      >\r\n        <mat-icon>filter_list</mat-icon>\r\n      </button>\r\n    </div>\r\n    } @if (node()?.filter && node()?.y) {\r\n    <div class=\"muted\">\r\n      <button type=\"button\" mat-icon-button (click)=\"onEditFilter()\">\r\n        <mat-icon [matBadge]=\"node()?.filter ? 'F' : ''\">filter_alt</mat-icon>\r\n      </button>\r\n    </div>\r\n    } }\r\n  </div>\r\n</div>\r\n}\r\n", styles: [":root{--browser-tree-node-margin-bottom: 4px;--browser-tree-node-padding: 4px 6px;--browser-tree-node-border: 1px solid #98a8d4;--browser-tree-node-border-radius: 6px;--browser-tree-node-hover-bg-color: #d6dee9}#node{margin-bottom:var(--browser-tree-node-margin-bottom);padding:var(--browser-tree-node-padding);border:var(--browser-tree-node-border);border-radius:var(--browser-tree-node-border-radius)}#node:hover{background-color:var(--browser-tree-node-hover-bg-color)}.form-row{display:flex;gap:8px;align-items:center}.form-row *{flex:0 0 auto}.form-row span{flex:0 1 auto;white-space:normal}#node #pager{display:none}#node:hover #pager{display:block}span.loc{font-size:.85em;color:#666;vertical-align:middle}span.tag{border:1px solid #aaa;border-radius:4px;padding:0 4px}fieldset{border:1px solid silver;border-radius:6px;padding:4px 6px;margin:4px 0}legend{color:silver}.muted{opacity:.3}.muted:hover{opacity:1}.debug{font-size:.85em;color:#9c3d3e}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i2$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: BrowserTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: BrowserTreeNodeComponent, isStandalone: true, selector: "pdb-browser-tree-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, paging: { classPropertyName: "paging", publicName: "paging", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, hideLoc: { classPropertyName: "hideLoc", publicName: "hideLoc", isSignal: true, isRequired: false, transformFunction: null }, hidePaging: { classPropertyName: "hidePaging", publicName: "hidePaging", isSignal: true, isRequired: false, transformFunction: null }, hideFilter: { classPropertyName: "hideFilter", publicName: "hideFilter", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, rangeWidth: { classPropertyName: "rangeWidth", publicName: "rangeWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleExpandedRequest: "toggleExpandedRequest", changePageRequest: "changePageRequest", editNodeFilterRequest: "editNodeFilterRequest" }, ngImport: i0, template: "@if (node()) {\r\n<div id=\"node\" [style.margin-left.px]=\"(node()!.y - 1) * indentSize()\">\r\n  <!-- pager -->\r\n  @if (node()!.expanded && paging() && paging()!.pageCount > 1) {\r\n  <div id=\"pager\" [style.display]=\"hidePaging() ? 'inherit' : 'block'\">\r\n    <pdb-compact-pager\r\n      [paging]=\"paging()!\"\r\n      (pagingChange)=\"onPagingChange(node()!, $event)\"\r\n    />\r\n    <pdb-range-view\r\n      [width]=\"rangeWidth()\"\r\n      [domain]=\"[0, paging()!.pageCount]\"\r\n      [range]=\"[paging()!.pageNumber - 1, paging()!.pageNumber]\"\r\n    />\r\n  </div>\r\n  }\r\n  <!-- node -->\r\n  <div class=\"form-row\">\r\n    <!-- expand/collapse button -->\r\n    <button\r\n      type=\"button\"\r\n      mat-icon-button\r\n      [matTooltip]=\"node()?.expanded ? 'Collapse' : 'Expand'\"\r\n      i18n-matTooltip\r\n      [disabled]=\"node()!.hasChildren === false\"\r\n      (click)=\"onToggleExpanded()\"\r\n    >\r\n      <mat-icon class=\"mat-primary\" i18n>\r\n        @if (node()!.hasChildren === true) { @if (node()!.expanded) {\r\n        chevron_left } @else { chevron_right } } @else { stop }\r\n      </mat-icon>\r\n    </button>\r\n\r\n    <!-- tag -->\r\n    @if (!hideLabel()) {\r\n    <span\r\n      class=\"tag\"\r\n      [ngStyle]=\"{\r\n        'background-color': (node()!.tag | stringToColor),\r\n        color: node()!.tag | stringToColor | colorToContrast\r\n      }\"\r\n      >{{ node()!.tag }}</span\r\n    >\r\n\r\n    <!-- loc and label -->\r\n    @if (!hideLoc()) {\r\n    <span class=\"loc\">{{ node()!.y }}.{{ node()!.x }}</span> - }\r\n    {{ node()!.label }}\r\n    }\r\n\r\n    <!-- PROJECTED NODE -->\r\n    <ng-content></ng-content>\r\n\r\n    <!-- debug -->\r\n    @if (debug()) {\r\n    <span class=\"debug\"\r\n      >#{{ node()!.id }}\r\n      <span\r\n        >| {{ node()!.paging.pageNumber }}/{{ node()!.paging.pageCount }} ({{\r\n          node()!.paging.total\r\n        }})</span\r\n      ></span\r\n    >\r\n    }\r\n\r\n    <!-- filter -->\r\n    @if (!hideFilter()){ @if (!node()?.filter && node()?.y) {\r\n    <div class=\"muted\">\r\n      <button\r\n        type=\"button\"\r\n        mat-icon-button\r\n        matTooltip=\"Add filter\"\r\n        i18n-matTooltip\r\n        (click)=\"onEditFilter()\"\r\n      >\r\n        <mat-icon>filter_list</mat-icon>\r\n      </button>\r\n    </div>\r\n    } @if (node()?.filter && node()?.y) {\r\n    <div class=\"muted\">\r\n      <button type=\"button\" mat-icon-button (click)=\"onEditFilter()\">\r\n        <mat-icon [matBadge]=\"node()?.filter ? 'F' : ''\">filter_alt</mat-icon>\r\n      </button>\r\n    </div>\r\n    } }\r\n  </div>\r\n</div>\r\n}\r\n", styles: [":root{--browser-tree-node-margin-bottom: 4px;--browser-tree-node-padding: 4px 6px;--browser-tree-node-border: 1px solid #98a8d4;--browser-tree-node-border-radius: 6px;--browser-tree-node-hover-bg-color: #d6dee9}#node{margin-bottom:var(--browser-tree-node-margin-bottom);padding:var(--browser-tree-node-padding);border:var(--browser-tree-node-border);border-radius:var(--browser-tree-node-border-radius)}#node:hover{background-color:var(--browser-tree-node-hover-bg-color)}.form-row{display:flex;gap:8px;align-items:center}.form-row *{flex:0 0 auto}.form-row span{flex:0 1 auto;white-space:normal}#node #pager{display:none}#node:hover #pager{display:block}span.loc{font-size:.85em;color:#666;vertical-align:middle}span.tag{border:1px solid #aaa;border-radius:4px;padding:0 4px}fieldset{border:1px solid silver;border-radius:6px;padding:4px 6px;margin:4px 0}legend{color:silver}.muted{opacity:.3}.muted:hover{opacity:1}.debug{font-size:.85em;color:#9c3d3e}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i2$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: 
                 // local
                 CompactPagerComponent, selector: "pdb-compact-pager", inputs: ["paging"], outputs: ["pagingChange"] }, { kind: "component", type: RangeViewComponent, selector: "pdb-range-view", inputs: ["domain", "range", "width", "height"] }, { kind: "pipe", type: 
                 // ngx-tools
                 ColorToContrastPipe, name: "colorToContrast" }, { kind: "pipe", type: StringToColorPipe, name: "stringToColor" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: BrowserTreeNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: BrowserTreeNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pdb-browser-tree-node', imports: [
                         CommonModule,
@@ -200,7 +204,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                         CompactPagerComponent,
                         RangeViewComponent,
                     ], template: "@if (node()) {\r\n<div id=\"node\" [style.margin-left.px]=\"(node()!.y - 1) * indentSize()\">\r\n  <!-- pager -->\r\n  @if (node()!.expanded && paging() && paging()!.pageCount > 1) {\r\n  <div id=\"pager\" [style.display]=\"hidePaging() ? 'inherit' : 'block'\">\r\n    <pdb-compact-pager\r\n      [paging]=\"paging()!\"\r\n      (pagingChange)=\"onPagingChange(node()!, $event)\"\r\n    />\r\n    <pdb-range-view\r\n      [width]=\"rangeWidth()\"\r\n      [domain]=\"[0, paging()!.pageCount]\"\r\n      [range]=\"[paging()!.pageNumber - 1, paging()!.pageNumber]\"\r\n    />\r\n  </div>\r\n  }\r\n  <!-- node -->\r\n  <div class=\"form-row\">\r\n    <!-- expand/collapse button -->\r\n    <button\r\n      type=\"button\"\r\n      mat-icon-button\r\n      [matTooltip]=\"node()?.expanded ? 'Collapse' : 'Expand'\"\r\n      i18n-matTooltip\r\n      [disabled]=\"node()!.hasChildren === false\"\r\n      (click)=\"onToggleExpanded()\"\r\n    >\r\n      <mat-icon class=\"mat-primary\" i18n>\r\n        @if (node()!.hasChildren === true) { @if (node()!.expanded) {\r\n        chevron_left } @else { chevron_right } } @else { stop }\r\n      </mat-icon>\r\n    </button>\r\n\r\n    <!-- tag -->\r\n    @if (!hideLabel()) {\r\n    <span\r\n      class=\"tag\"\r\n      [ngStyle]=\"{\r\n        'background-color': (node()!.tag | stringToColor),\r\n        color: node()!.tag | stringToColor | colorToContrast\r\n      }\"\r\n      >{{ node()!.tag }}</span\r\n    >\r\n\r\n    <!-- loc and label -->\r\n    @if (!hideLoc()) {\r\n    <span class=\"loc\">{{ node()!.y }}.{{ node()!.x }}</span> - }\r\n    {{ node()!.label }}\r\n    }\r\n\r\n    <!-- PROJECTED NODE -->\r\n    <ng-content></ng-content>\r\n\r\n    <!-- debug -->\r\n    @if (debug()) {\r\n    <span class=\"debug\"\r\n      >#{{ node()!.id }}\r\n      <span\r\n        >| {{ node()!.paging.pageNumber }}/{{ node()!.paging.pageCount }} ({{\r\n          node()!.paging.total\r\n        }})</span\r\n      ></span\r\n    >\r\n    }\r\n\r\n    <!-- filter -->\r\n    @if (!hideFilter()){ @if (!node()?.filter && node()?.y) {\r\n    <div class=\"muted\">\r\n      <button\r\n        type=\"button\"\r\n        mat-icon-button\r\n        matTooltip=\"Add filter\"\r\n        i18n-matTooltip\r\n        (click)=\"onEditFilter()\"\r\n      >\r\n        <mat-icon>filter_list</mat-icon>\r\n      </button>\r\n    </div>\r\n    } @if (node()?.filter && node()?.y) {\r\n    <div class=\"muted\">\r\n      <button type=\"button\" mat-icon-button (click)=\"onEditFilter()\">\r\n        <mat-icon [matBadge]=\"node()?.filter ? 'F' : ''\">filter_alt</mat-icon>\r\n      </button>\r\n    </div>\r\n    } }\r\n  </div>\r\n</div>\r\n}\r\n", styles: [":root{--browser-tree-node-margin-bottom: 4px;--browser-tree-node-padding: 4px 6px;--browser-tree-node-border: 1px solid #98a8d4;--browser-tree-node-border-radius: 6px;--browser-tree-node-hover-bg-color: #d6dee9}#node{margin-bottom:var(--browser-tree-node-margin-bottom);padding:var(--browser-tree-node-padding);border:var(--browser-tree-node-border);border-radius:var(--browser-tree-node-border-radius)}#node:hover{background-color:var(--browser-tree-node-hover-bg-color)}.form-row{display:flex;gap:8px;align-items:center}.form-row *{flex:0 0 auto}.form-row span{flex:0 1 auto;white-space:normal}#node #pager{display:none}#node:hover #pager{display:block}span.loc{font-size:.85em;color:#666;vertical-align:middle}span.tag{border:1px solid #aaa;border-radius:4px;padding:0 4px}fieldset{border:1px solid silver;border-radius:6px;padding:4px 6px;margin:4px 0}legend{color:silver}.muted{opacity:.3}.muted:hover{opacity:1}.debug{font-size:.85em;color:#9c3d3e}\n"] }]
-        }] });
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: false }] }], paging: [{ type: i0.Input, args: [{ isSignal: true, alias: "paging", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }], hideLoc: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLoc", required: false }] }], hidePaging: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePaging", required: false }] }], hideFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideFilter", required: false }] }], indentSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "indentSize", required: false }] }], rangeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeWidth", required: false }] }], toggleExpandedRequest: [{ type: i0.Output, args: ["toggleExpandedRequest"] }], changePageRequest: [{ type: i0.Output, args: ["changePageRequest"] }], editNodeFilterRequest: [{ type: i0.Output, args: ["editNodeFilterRequest"] }] } });
 
 /**
  * A Least Recently Used cache that can be used to store any type of object.
@@ -499,11 +503,13 @@ class PagedListStore {
 
 /**
  * A store for the node browser component. This store is used to keep a
- * list of nodes, and to load them from the API. It also keeps the root
- * node. Every tree node in the list is extended with page number,
- * page count and total items, plus expansion-related metadata.
+ * list of nodes, and to load them from the injected PagedTreeStoreService<F>.
+ * It also keeps the root node(s) in memory. Every tree node in the list
+ * is extended with page number, page count and total items, plus
+ * expansion-related metadata.
  * The store keeps a flat list of these tree nodes, allowing users to
- * expand and collapse them.
+ * expand and collapse them. Each node has its children paged, and optionally
+ * filtered.
  * F is the type of the filter object, E is the type of the paged tree nodes.
  */
 class PagedTreeStore {
@@ -539,7 +545,7 @@ class PagedTreeStore {
         this._hasMockRoot = options.hasMockRoot || false;
     }
     /**
-     * Gets the global filter, eventually overridden with values
+     * Gets the global filter, optionally overridden with values
      * from the specified node's filter.
      * @param node The optional node.
      * @returns The filter.
@@ -567,7 +573,8 @@ class PagedTreeStore {
         return this._nodes$.value;
     }
     /**
-     * Get the root node of the tree.
+     * Get the root node of the tree. Given that the store keeps a flat
+     * list, this is the first node in the list, if any.
      * @returns The root node of the tree or undefined if empty.
      */
     getRootNode() {
@@ -596,8 +603,11 @@ class PagedTreeStore {
      * @returns Observable of the page of nodes.
      */
     getPageFromCacheOrServer(filter, pageNumber) {
+        // try to get the page from cache
         const key = this.buildCacheKey(pageNumber, filter);
         const pageInCache = this._cache.get(key);
+        // if in cache, just return it; else, get it from the server and
+        // store it in cache
         if (pageInCache) {
             return of(pageInCache);
         }
@@ -653,10 +663,11 @@ class PagedTreeStore {
             this._service
                 .getNodes({
                 ...filter,
-                parentId: undefined,
+                parentId: undefined, // root have no parent
             }, 1, this._pageSize, this._hasMockRoot)
                 .subscribe({
                 next: (page) => {
+                    // update the nodes
                     this._nodes$.next(this.createPageNodes(page));
                     // get the children of each node thus calculating their hasChildren property
                     const childrenObservables = this._nodes$.value.map((node) => this.getPageFromCacheOrServer({ ...filter, parentId: node.id }, 1));
@@ -702,13 +713,17 @@ class PagedTreeStore {
      */
     expand(id) {
         return new Promise((resolve, reject) => {
+            // get the node to expand
             const node = this._nodes$.value.find((n) => n.id === id);
+            // if no node, or no children, or already expanded, do nothing
             if (!node || node.hasChildren === false || node.expanded) {
                 resolve(false);
             }
+            // get the first page of children for this node
             this.getPageFromCacheOrServer({ ...this.getFilter(node), parentId: id }, 1).subscribe((page) => {
                 // no children, set hasChildren to false
                 if (!page.total) {
+                    // no children, next time we won't try to expand
                     node.hasChildren = false;
                     resolve(false);
                 }
@@ -776,6 +791,11 @@ class PagedTreeStore {
         }
         return true;
     }
+    /**
+     * Get the children of the node with the specified ID.
+     * @param id The ID of the node whose children you want to get.
+     * @returns An array of child nodes.
+     */
     getChildren(id) {
         const node = this._nodes$.value.find((n) => n.id === id);
         if (!node || node.hasChildren === false) {
@@ -856,7 +876,8 @@ class PagedTreeStore {
         return Promise.resolve(true);
     }
     /**
-     * Change the page including the node with the specified ID.
+     * Change the page including the children of the parent node with
+     * the specified ID.
      * @param parentId The ID of the parent node whose children are inside the page
      * you want to change.
      * @param pageNumber The new page number.
@@ -866,45 +887,64 @@ class PagedTreeStore {
         return new Promise((resolve, reject) => {
             // get the parent node
             const parentNode = this._nodes$.value.find((n) => n.id === parentId);
+            // if parent not found, do nothing
             if (!parentNode) {
                 resolve(false);
+                return;
+            }
+            // parent should be expanded
+            if (!parentNode.expanded) {
+                resolve(false);
+                return;
             }
             // get the page
-            this.getPageFromCacheOrServer({ ...this.getFilter(parentNode), parentId }, pageNumber).subscribe((page) => {
-                // if page is empty do nothing
-                if (!page.total) {
-                    resolve(false);
-                }
-                else {
+            this.getPageFromCacheOrServer({ ...this.getFilter(parentNode), parentId }, pageNumber).subscribe({
+                next: (page) => {
+                    // if page is empty, collapse the parent
+                    if (!page.total) {
+                        parentNode.hasChildren = false;
+                        parentNode.expanded = false;
+                        this._nodes$.next(this._nodes$.value);
+                        resolve(false);
+                        return;
+                    }
                     this._dirty = true;
-                    // remove all the nodes in the same page of node
-                    // with all their descendants
                     const nodes = this._nodes$.value;
-                    const nodeIndex = nodes.indexOf(parentNode) + 1;
-                    const pageNodes = this.createPageNodes(page);
-                    // find the first node of the node's page
-                    let start = nodeIndex;
-                    const oldPageNr = nodes[start].paging.pageNumber;
-                    while (start > 0 &&
-                        nodes[start - 1].parentId === parentId &&
-                        nodes[start - 1].paging.pageNumber === oldPageNr) {
-                        start--;
+                    const parentIndex = nodes.indexOf(parentNode);
+                    if (parentIndex === -1) {
+                        reject(`Parent node ID ${parentId} not found in store`);
+                        return;
                     }
-                    // find the last node of the node's page,
-                    // including all their descendants
+                    const pageNodes = this.createPageNodes(page);
+                    // find the range of children to replace
+                    let start = parentIndex + 1;
                     let end = start;
-                    const y = nodes[start].y;
-                    while (end < nodes.length && nodes[end].y >= y) {
+                    // find all current children of this parent (at any page)
+                    while (end < nodes.length &&
+                        nodes[end].parentId === parentId &&
+                        nodes[end].y === parentNode.y + 1) {
+                        // skip descendants of children
+                        const childY = nodes[end].y;
                         end++;
+                        while (end < nodes.length && nodes[end].y > childY) {
+                            end++;
+                        }
                     }
-                    // replace all these nodes with the new ones
-                    nodes.splice(start, end - start);
-                    nodes.splice(start, 0, ...pageNodes);
-                    // update the parent node paging info
-                    parentNode.paging.pageNumber = page.pageNumber;
+                    // replace the children with the new page
+                    nodes.splice(start, end - start, ...pageNodes);
+                    // update parent paging info
+                    parentNode.paging = {
+                        pageNumber: page.pageNumber,
+                        pageCount: page.pageCount,
+                        total: page.total,
+                    };
                     this._nodes$.next(nodes);
                     resolve(true);
-                }
+                },
+                error: (error) => {
+                    console.error('Error changing page:', error);
+                    reject(error);
+                },
             });
         });
     }
@@ -953,24 +993,24 @@ class PagedTreeStore {
             this.removeHilites();
             return;
         }
-        // First remove all existing hilites
+        // first remove all existing hilites
         this.removeHilites();
         const searchLower = searchText.toLowerCase();
         const matchingNodes = [];
-        // Find all matching nodes (including those not currently visible)
-        // We need to search through all possible nodes, not just visible ones
+        // find all matching nodes (including those not currently visible):
+        // search through all possible nodes, not just visible ones
         await this.searchAllNodes(searchLower, matchingNodes);
-        // Highlight the matching nodes
+        // highlight the matching nodes
         matchingNodes.forEach((node) => {
             node.hilite = true;
         });
-        // Ensure all matching nodes are visible by expanding their ancestor paths
+        // ensure all matching nodes are visible by expanding their ancestor paths
         const expansionPromises = [];
         for (const node of matchingNodes) {
             expansionPromises.push(this.ensureNodeVisible(node.id));
         }
         await Promise.all(expansionPromises);
-        // Update the nodes observable
+        // update the nodes observable
         this._nodes$.next(this._nodes$.value);
     }
     /**
@@ -980,7 +1020,7 @@ class PagedTreeStore {
      * @param matchingNodes Array to collect matching nodes.
      */
     async searchAllNodes(searchLower, matchingNodes) {
-        // Start with root nodes
+        // start with root nodes
         const rootNodes = this._nodes$.value.filter((n) => n.parentId === undefined);
         for (const rootNode of rootNodes) {
             await this.searchNodeAndDescendants(rootNode, searchLower, matchingNodes);
@@ -993,17 +1033,17 @@ class PagedTreeStore {
      * @param matchingNodes Array to collect matching nodes.
      */
     async searchNodeAndDescendants(node, searchLower, matchingNodes) {
-        // Check if current node matches
+        // check if current node matches
         if (node.label.toLowerCase().includes(searchLower)) {
             matchingNodes.push(node);
         }
-        // If node has children, we need to load them to search through them
+        // if node has children, we need to load them to search through them
         if (node.hasChildren) {
             // Expand the node if not already expanded to load its children
             if (!node.expanded) {
                 await this.expand(node.id);
             }
-            // Get all direct children and search them recursively
+            // get all direct children and search them recursively
             const children = this.getChildren(node.id);
             for (const child of children) {
                 await this.searchNodeAndDescendants(child, searchLower, matchingNodes);
@@ -1019,14 +1059,14 @@ class PagedTreeStore {
         if (!node) {
             return;
         }
-        // Find the path from root to this node
+        // find the path from root to this node
         const ancestorPath = [];
         let currentNode = node;
         while (currentNode && currentNode.parentId !== undefined) {
             ancestorPath.unshift(currentNode.parentId);
             currentNode = this._nodes$.value.find((n) => n.id === currentNode.parentId);
         }
-        // Expand all ancestors in order
+        // expand all ancestors in order
         for (const ancestorId of ancestorPath) {
             const ancestor = this._nodes$.value.find((n) => n.id === ancestorId);
             if (ancestor && ancestor.hasChildren && !ancestor.expanded) {
@@ -1034,6 +1074,629 @@ class PagedTreeStore {
             }
         }
     }
+    get _isEditable() {
+        // check if the service supports editing
+        return 'saveChanges' in this._service;
+    }
+    get _editableService() {
+        return this._isEditable
+            ? this._service
+            : undefined;
+    }
+    /**
+     * Add a child node to the specified parent.
+     * @param parentId The ID of the parent node.
+     * @param child The child node to add (without ID).
+     * @param first If true, add as first child; otherwise add as last child.
+     * @returns The added node with temporary ID, or undefined if service doesn't support editing.
+     */
+    addChild(parentId, child, first = false) {
+        return new Promise((resolve, reject) => {
+            const editableService = this._editableService;
+            if (!editableService) {
+                resolve(undefined);
+                return;
+            }
+            const parent = this._nodes$.value.find((n) => n.id === parentId);
+            if (!parent) {
+                reject(`Parent node with ID ${parentId} not found`);
+                return;
+            }
+            // calculate position
+            const siblings = this.getChildren(parentId);
+            const position = first ? 1 : siblings.length + 1;
+            const y = parent.y + 1;
+            // adjust x values of existing siblings if inserting at beginning
+            if (first && siblings.length > 0) {
+                siblings.forEach((sibling) => {
+                    sibling.x++;
+                    editableService.updateNode(sibling.id, { x: sibling.x });
+                });
+            }
+            const newChild = {
+                ...child,
+                parentId,
+                y,
+                x: position,
+            };
+            const addedNode = editableService.addNode(newChild, parentId, position);
+            // update parent hasChildren if it was false
+            if (parent.hasChildren === false) {
+                parent.hasChildren = true;
+                editableService.updateNode(parentId, { hasChildren: true });
+            }
+            // if parent is expanded, add the node to the visible list
+            if (parent.expanded) {
+                const nodes = this._nodes$.value;
+                const parentIndex = nodes.indexOf(parent);
+                if (parentIndex !== -1) {
+                    const insertIndex = first
+                        ? parentIndex + 1
+                        : parentIndex + siblings.length + 1;
+                    const pagedNode = {
+                        ...addedNode,
+                        paging: parent.paging,
+                        expanded: false,
+                    };
+                    nodes.splice(insertIndex, 0, pagedNode);
+                    this._nodes$.next(nodes);
+                }
+            }
+            this._dirty = true;
+            this.invalidateCache(parentId);
+            resolve(addedNode);
+        });
+    }
+    /**
+     * Add a sibling node next to the anchor node.
+     * @param anchorId The ID of the anchor node.
+     * @param sibling The sibling node to add (without ID).
+     * @param before If true, add before anchor; otherwise add after anchor.
+     * @returns The added node with temporary ID, or undefined if service doesn't support editing.
+     */
+    addSibling(anchorId, sibling, before = false) {
+        return new Promise((resolve, reject) => {
+            const editableService = this._editableService;
+            if (!editableService) {
+                resolve(undefined);
+                return;
+            }
+            const anchor = this._nodes$.value.find((n) => n.id === anchorId);
+            if (!anchor) {
+                reject(`Anchor node with ID ${anchorId} not found`);
+                return;
+            }
+            // get all siblings of the anchor
+            const siblings = this._nodes$.value.filter((n) => n.parentId === anchor.parentId && n.y === anchor.y);
+            siblings.sort((a, b) => a.x - b.x);
+            const anchorIndex = siblings.findIndex((s) => s.id === anchorId);
+            const insertPosition = before ? anchor.x : anchor.x + 1;
+            // adjust x values of siblings that come after the insertion point
+            siblings.slice(before ? anchorIndex : anchorIndex + 1).forEach((s) => {
+                s.x++;
+                editableService.updateNode(s.id, { x: s.x });
+            });
+            const newSibling = {
+                ...sibling,
+                parentId: anchor.parentId,
+                y: anchor.y,
+                x: insertPosition,
+            };
+            const addedNode = editableService.addNode(newSibling, anchor.parentId);
+            // add to visible list if the parent is expanded
+            const nodes = this._nodes$.value;
+            const anchorVisibleIndex = nodes.indexOf(anchor);
+            if (anchorVisibleIndex !== -1) {
+                const insertIndex = before
+                    ? anchorVisibleIndex
+                    : anchorVisibleIndex + 1;
+                const pagedNode = {
+                    ...addedNode,
+                    paging: anchor.paging,
+                    expanded: false,
+                };
+                nodes.splice(insertIndex, 0, pagedNode);
+                this._nodes$.next(nodes);
+            }
+            this._dirty = true;
+            this.invalidateCache(anchor.parentId);
+            resolve(addedNode);
+        });
+    }
+    /**
+     * Remove a node from the tree.
+     * We only track the deletion and update visible siblings.
+     * Coordinate adjustments for non-visible nodes are handled by applyLocalChanges.
+     */
+    removeNode(nodeId) {
+        return new Promise((resolve, reject) => {
+            const editableService = this._editableService;
+            if (!editableService) {
+                resolve(false);
+                return;
+            }
+            const node = this._nodes$.value.find((n) => n.id === nodeId);
+            if (!node) {
+                resolve(false);
+                return;
+            }
+            const parentId = node.parentId;
+            const nodeY = node.y;
+            const nodeX = node.x;
+            // CRITICAL: ensure the node is in the editable service's cache
+            // before removing it, so its original data is preserved
+            if (!editableService.getNode(nodeId)) {
+                // pass the complete node including any extended properties (like 'key'):
+                // this preserves all data needed for persistence
+                editableService.updateNode(nodeId, node);
+                console.log('Added node to cache before deletion:', nodeId);
+            }
+            // remove all descendants first
+            const descendants = this.getDescendants(nodeId);
+            descendants.forEach((descendant) => {
+                // ensure each descendant is in cache before removing
+                if (!editableService.getNode(descendant.id)) {
+                    editableService.updateNode(descendant.id, descendant);
+                    console.log('Added descendant to cache before deletion:', descendant.id);
+                }
+                editableService.removeNode(descendant.id);
+            });
+            // remove the node itself
+            console.log('Removing node from editable service:', nodeId);
+            editableService.removeNode(nodeId);
+            // update ONLY visible siblings' x coordinates
+            // (Non-visible siblings will get adjusted by applyLocalChanges)
+            const visibleSiblings = this._nodes$.value.filter((n) => n.parentId === parentId && n.y === nodeY && n.x > nodeX);
+            visibleSiblings.forEach((sibling) => {
+                sibling.x--;
+                // this will succeed because these nodes ARE in the local cache
+                editableService.updateNode(sibling.id, { x: sibling.x });
+            });
+            // remove from visible list
+            const nodes = this._nodes$.value;
+            const nodeIndex = nodes.indexOf(node);
+            if (nodeIndex !== -1) {
+                let endIndex = nodeIndex + 1;
+                while (endIndex < nodes.length && nodes[endIndex].y > nodeY) {
+                    endIndex++;
+                }
+                nodes.splice(nodeIndex, endIndex - nodeIndex);
+            }
+            // update parent hasChildren if needed
+            if (parentId !== undefined) {
+                const parent = this._nodes$.value.find((n) => n.id === parentId);
+                if (parent && parent.paging.total === 1) {
+                    // this was the last child
+                    parent.hasChildren = false;
+                    parent.expanded = false;
+                    editableService.updateNode(parentId, { hasChildren: false });
+                    this._nodes$.next(nodes);
+                    this._dirty = true;
+                    this.invalidateCache(parentId);
+                    resolve(true);
+                    return;
+                }
+            }
+            this._nodes$.next(nodes);
+            this._dirty = true;
+            this.invalidateCache(parentId);
+            // reload the parent's current page to show the updated state
+            if (parentId !== undefined) {
+                const parent = this._nodes$.value.find((n) => n.id === parentId);
+                if (parent?.expanded && parent?.paging) {
+                    this.changePage(parentId, parent.paging.pageNumber)
+                        .then(() => resolve(true))
+                        .catch(reject);
+                    return;
+                }
+            }
+            resolve(true);
+        });
+    }
+    /**
+     * Replace a node with a new one.
+     * @param oldNodeId The ID of the node to replace.
+     * @param newNode The new node data (without ID).
+     * @param keepDescendants If true, keep descendants; otherwise remove them.
+     * @returns Promise that resolves to the new node, or undefined if service
+     * doesn't support editing.
+     */
+    replaceNode(oldNodeId, newNode, keepDescendants = true) {
+        return new Promise((resolve, reject) => {
+            const editableService = this._editableService;
+            if (!editableService) {
+                resolve(undefined);
+                return;
+            }
+            const oldNode = this._nodes$.value.find((n) => n.id === oldNodeId);
+            if (!oldNode) {
+                reject(`Node with ID ${oldNodeId} not found`);
+                return;
+            }
+            const updatedNode = {
+                ...newNode,
+                id: oldNodeId,
+                parentId: oldNode.parentId,
+                y: oldNode.y,
+                x: oldNode.x,
+            };
+            editableService.updateNode(oldNodeId, updatedNode);
+            // handle descendants
+            if (!keepDescendants) {
+                const descendants = this.getDescendants(oldNodeId);
+                descendants.forEach((descendant) => {
+                    editableService.removeNode(descendant.id);
+                });
+                // update hasChildren
+                editableService.updateNode(oldNodeId, { hasChildren: false });
+            }
+            // update in visible list
+            const nodes = this._nodes$.value;
+            const nodeIndex = nodes.findIndex((n) => n.id === oldNodeId);
+            if (nodeIndex !== -1) {
+                const pagedNode = nodes[nodeIndex];
+                Object.assign(pagedNode, updatedNode);
+                if (!keepDescendants) {
+                    pagedNode.hasChildren = false;
+                    pagedNode.expanded = false;
+                    // remove descendants from visible list
+                    let endIndex = nodeIndex + 1;
+                    while (endIndex < nodes.length && nodes[endIndex].y > oldNode.y) {
+                        endIndex++;
+                    }
+                    if (endIndex > nodeIndex + 1) {
+                        nodes.splice(nodeIndex + 1, endIndex - nodeIndex - 1);
+                    }
+                }
+                this._nodes$.next(nodes);
+            }
+            this._dirty = true;
+            this.invalidateCache(oldNode.parentId);
+            resolve(updatedNode);
+        });
+    }
+    /**
+     * Get all descendants of a node.
+     */
+    getDescendants(nodeId) {
+        const node = this._nodes$.value.find((n) => n.id === nodeId);
+        if (!node)
+            return [];
+        const descendants = [];
+        const nodes = this._nodes$.value;
+        const nodeIndex = nodes.indexOf(node);
+        if (nodeIndex !== -1) {
+            let i = nodeIndex + 1;
+            while (i < nodes.length && nodes[i].y > node.y) {
+                descendants.push(nodes[i]);
+                i++;
+            }
+        }
+        return descendants;
+    }
+    /**
+     * Invalidate cache for a specific parent and its ancestors.
+     */
+    invalidateCache(parentId) {
+        // clear cache entries that might be affected by the change
+        this._cache.clear();
+        // if we have a specific parent, we could be more selective about
+        // cache invalidation but for now, clearing all is safer
+    }
+    /**
+     * Save all pending changes if the service supports it.
+     * Preserves the current expansion state after saving.
+     * @returns Promise that resolves when save is complete,
+     * with ID mappings for new nodes.
+     */
+    saveChanges() {
+        return new Promise((resolve, reject) => {
+            const editableService = this._editableService;
+            if (!editableService) {
+                resolve(undefined);
+                return;
+            }
+            // capture current expansion state before saving
+            const expandedNodeIds = this._nodes$.value
+                .filter((n) => n.expanded)
+                .map((n) => n.id);
+            editableService.saveChanges().subscribe({
+                next: (idMap) => {
+                    // update temporary IDs to permanent IDs in the visible list
+                    if (idMap.size > 0) {
+                        const nodes = this._nodes$.value;
+                        // update node IDs
+                        nodes.forEach((node) => {
+                            const newId = idMap.get(node.id);
+                            if (newId !== undefined) {
+                                node.id = newId;
+                            }
+                        });
+                        // update parent IDs for children of replaced nodes
+                        nodes.forEach((node) => {
+                            if (node.parentId !== undefined) {
+                                const newParentId = idMap.get(node.parentId);
+                                if (newParentId !== undefined) {
+                                    node.parentId = newParentId;
+                                }
+                            }
+                        });
+                        this._nodes$.next(nodes);
+                    }
+                    // clear cache to force fresh data
+                    this._cache.clear();
+                    this._dirty = false;
+                    // restore expansion state by re-expanding previously expanded nodes
+                    const restoreExpansion = async () => {
+                        for (const oldId of expandedNodeIds) {
+                            const newId = idMap.get(oldId) ?? oldId;
+                            const node = this._nodes$.value.find((n) => n.id === newId);
+                            if (node && !node.expanded) {
+                                await this.expand(newId);
+                            }
+                        }
+                    };
+                    restoreExpansion().then(() => resolve(idMap));
+                },
+                error: (error) => reject(error),
+            });
+        });
+    }
+    /**
+     * Check if there are unsaved changes.
+     */
+    hasUnsavedChanges() {
+        return this._editableService?.hasChanges() || false;
+    }
+    /**
+     * Clear all unsaved changes.
+     */
+    clearUnsavedChanges() {
+        this._editableService?.clearChanges();
+        this._dirty = true;
+    }
+}
+
+/**
+ * Types of operations that can be performed on tree nodes.
+ */
+var ChangeOperationType;
+(function (ChangeOperationType) {
+    ChangeOperationType["ADD"] = "add";
+    ChangeOperationType["REMOVE"] = "remove";
+    ChangeOperationType["UPDATE"] = "update";
+})(ChangeOperationType || (ChangeOperationType = {}));
+/**
+ * Base implementation of EditablePagedTreeStoreService that handles change tracking
+ * and provides common editing functionality. Implementers only need to override
+ * the abstract methods for actual data persistence.
+ */
+class EditablePagedTreeStoreServiceBase {
+    constructor() {
+        this._changes = [];
+        this._nextTempId = -1;
+        this._nodes = new Map();
+        this._removedNodes = new Set();
+        this._hasChanges$ = new BehaviorSubject(false);
+        /**
+         * Observable that emits when the change state changes.
+         */
+        this.hasChanges$ = this._hasChanges$.asObservable();
+    }
+    /**
+     * Get nodes, including any local changes that haven't been saved yet.
+     */
+    getNodes(filter, pageNumber, pageSize, hasMockRoot) {
+        return this.fetchNodes(filter, pageNumber, pageSize, hasMockRoot).pipe(map((page) => this.applyLocalChanges(page, filter)));
+    }
+    /**
+     * Apply local changes to a page of nodes.
+     * This includes applying x-coordinate adjustments for siblings of deleted nodes.
+     */
+    applyLocalChanges(page, filter) {
+        let items = [...page.items];
+        // Step 1: Remove deleted nodes from the current page
+        items = items.filter((node) => !this._removedNodes.has(node.id));
+        // Step 2: Calculate x-coordinate adjustments for this page based on deletions
+        // For each removed node that would affect this page, adjust x coordinates
+        const xAdjustments = new Map(); // nodeId -> adjustment amount
+        this._removedNodes.forEach((removedId) => {
+            const removeChange = this._changes.find((c) => c.type === ChangeOperationType.REMOVE && c.id === removedId);
+            if (removeChange?.originalNode) {
+                const removedNode = removeChange.originalNode;
+                // For each item in current page that was a sibling after the removed node
+                items.forEach((item) => {
+                    if (item.parentId === removedNode.parentId &&
+                        item.y === removedNode.y &&
+                        item.x > removedNode.x) {
+                        // This sibling should have its x decreased
+                        const currentAdjustment = xAdjustments.get(item.id) || 0;
+                        xAdjustments.set(item.id, currentAdjustment - 1);
+                    }
+                });
+            }
+        });
+        // Step 3: Apply updates to existing nodes, including coordinate adjustments
+        items = items.map((node) => {
+            let result = { ...node };
+            // First apply any explicit updates from cache
+            const updated = this._nodes.get(node.id);
+            if (updated && !this._removedNodes.has(node.id)) {
+                result = { ...result, ...updated };
+            }
+            // Then apply calculated x-coordinate adjustments from deletions
+            const xAdjustment = xAdjustments.get(node.id);
+            if (xAdjustment !== undefined && xAdjustment !== 0) {
+                result.x = result.x + xAdjustment;
+            }
+            return result;
+        });
+        // Step 4: Add new nodes that belong to this specific page
+        const pageParentId = filter.parentId;
+        const newNodesForThisPage = Array.from(this._nodes.values()).filter((node) => node.id < 0 && // temporary ID (newly added)
+            !this._removedNodes.has(node.id) && // not removed
+            node.parentId === pageParentId && // belongs to the same parent
+            this.matchesFilter(node, filter) && // matches the filter
+            node.label !== undefined && // has all required properties
+            node.x !== undefined &&
+            node.y !== undefined);
+        items.push(...newNodesForThisPage);
+        // Step 5: Sort items by their position (x coordinate)
+        items.sort((a, b) => a.x - b.x);
+        // Step 6: Adjust total count to reflect deletions and additions for this parent
+        let totalAdjustment = 0;
+        // Count deletions that affect this parent
+        this._removedNodes.forEach((removedId) => {
+            const change = this._changes.find((c) => c.type === ChangeOperationType.REMOVE && c.id === removedId);
+            if (change?.originalNode?.parentId === pageParentId) {
+                totalAdjustment--;
+            }
+        });
+        // Count additions for this parent
+        totalAdjustment += newNodesForThisPage.length;
+        const adjustedTotal = Math.max(0, page.total + totalAdjustment);
+        const adjustedPageCount = Math.ceil(adjustedTotal / (page.pageSize || 20));
+        return {
+            ...page,
+            items: items,
+            total: adjustedTotal,
+            pageCount: adjustedPageCount,
+        };
+    }
+    /**
+     * Check if a node matches the given filter.
+     */
+    matchesFilter(node, filter) {
+        if (filter.parentId !== undefined && node.parentId !== filter.parentId) {
+            return false;
+        }
+        if (filter.tags &&
+            filter.tags.length > 0 &&
+            (!node.tag || !filter.tags.includes(node.tag))) {
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Add a new node to the tree.
+     */
+    addNode(node, parentId, position) {
+        const newNode = {
+            ...node,
+            id: this._nextTempId--,
+            parentId,
+        };
+        this._nodes.set(newNode.id, newNode);
+        this._changes.push({
+            type: ChangeOperationType.ADD,
+            id: newNode.id,
+            node: newNode,
+            parentId,
+            position,
+        });
+        this.updateHasChanges();
+        return newNode;
+    }
+    /**
+     * Remove a node from the tree.
+     */
+    removeNode(id) {
+        const node = this._nodes.get(id);
+        if (node || !this._removedNodes.has(id)) {
+            this._removedNodes.add(id);
+            this._changes.push({
+                type: ChangeOperationType.REMOVE,
+                id,
+                originalNode: node,
+            });
+            this.updateHasChanges();
+        }
+    }
+    /**
+     * Update an existing node.
+     * If the node is in cache, update it with the partial updates.
+     * If not in cache and updates is a complete TreeNode, add it to cache.
+     * Otherwise skip (normal for pagination).
+     */
+    updateNode(id, updates) {
+        const existing = this._nodes.get(id);
+        if (!existing) {
+            // Check if updates contains a complete TreeNode (used for deletion prep)
+            const isCompleteNode = updates.label !== undefined &&
+                updates.y !== undefined &&
+                updates.x !== undefined;
+            if (isCompleteNode) {
+                // Add the complete node to cache (used before deletion)
+                const completeNode = { ...updates, id };
+                this._nodes.set(id, completeNode);
+                // Don't add a change operation - this is just caching for later operations
+            }
+            // Otherwise silently skip - normal for pagination
+            return;
+        }
+        const updated = { ...existing, ...updates, id };
+        this._nodes.set(id, updated);
+        this._changes.push({
+            type: ChangeOperationType.UPDATE,
+            id,
+            node: updated,
+            originalNode: existing,
+        });
+        this.updateHasChanges();
+    }
+    /**
+     * Save all pending changes.
+     */
+    saveChanges() {
+        if (this._changes.length === 0) {
+            return of(new Map());
+        }
+        return this.persistChanges([...this._changes]).pipe(map((idMap) => {
+            // update temporary IDs with permanent ones
+            idMap.forEach((permanentId, tempId) => {
+                const node = this._nodes.get(tempId);
+                if (node) {
+                    this._nodes.delete(tempId);
+                    this._nodes.set(permanentId, { ...node, id: permanentId });
+                }
+            });
+            // clear changes after successful save
+            this._changes = [];
+            this._removedNodes.clear();
+            this.updateHasChanges();
+            return idMap;
+        }));
+    }
+    /**
+     * Check if there are unsaved changes.
+     */
+    hasChanges() {
+        return this._changes.length > 0;
+    }
+    /**
+     * Clear all pending changes.
+     */
+    clearChanges() {
+        this._changes = [];
+        this._nodes.clear();
+        this._removedNodes.clear();
+        this.updateHasChanges();
+    }
+    /**
+     * Get all pending changes.
+     */
+    getChanges() {
+        return [...this._changes];
+    }
+    /**
+     * Get a node by ID, including local changes.
+     */
+    getNode(id) {
+        return this._nodes.get(id);
+    }
+    updateHasChanges() {
+        this._hasChanges$.next(this._changes.length > 0);
+    }
 }
 
 /*
@@ -1044,5 +1707,5 @@ class PagedTreeStore {
  * Generated bundle index. Do not edit.
  */
 
-export { BrowserTreeNodeComponent, CompactPagerComponent, DEFAULT_PAGED_LIST_STORE_OPTIONS, LRUCache, PagedListStore, PagedTreeStore, RangeViewComponent };
+export { BrowserTreeNodeComponent, ChangeOperationType, CompactPagerComponent, DEFAULT_PAGED_LIST_STORE_OPTIONS, EditablePagedTreeStoreServiceBase, LRUCache, PagedListStore, PagedTreeStore, RangeViewComponent };
 //# sourceMappingURL=myrmidon-paged-data-browsers.mjs.map