@myrmidon/paged-data-browsers 2.0.5 → 4.0.0

package/README.md

@@ -6,6 +6,19 @@ There are currently two components, one for displaying a flat list of data, and
 
 Also, there is a LRU cache service and a compact pager used in the paged tree component.
 
+## Paged List
+
+Paged list support is provided by a single utility class, [PagedListStore](src/lib/services/paged-list.store.ts). This templated class provides logic for:
+
+- a filter object of type `F`;
+- a list element object of type `E`.
+
+So you need:
+
+- a filter class to represent your elements filter (for `F`).
+- an element item class (for `E`).
+- a service to fetch data, implementing interface [PagedListStoreService<F, E>](src/lib/services/paged-list.store.ts). In this shell, a [local service](../../../src/app/services/mock-paged-list-store.service.ts) provides mock data.
+
 ## Paged Tree
 
 ### Services

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

@@ -1,102 +1,99 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
-import * as i1 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i2 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
+import { input, output, Component, computed } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
 import * as i2$1 from '@angular/material/badge';
 import { MatBadgeModule } from '@angular/material/badge';
 import * as i5 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i8 from '@myrmidon/ng-tools';
-import { NgToolsModule } from '@myrmidon/ng-tools';
+import { ColorToContrastPipe, StringToColorPipe } from '@myrmidon/ngx-tools';
 import { BehaviorSubject, of, tap, forkJoin } from 'rxjs';
-import { ReactiveFormsModule } from '@angular/forms';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatSelectModule } from '@angular/material/select';
 
 class CompactPagerComponent {
     constructor() {
-        this.paging = {
-            pageNumber: 0,
-            pageCount: 0,
-            total: 0,
-        };
-        this.pagingChange = new EventEmitter();
+        this.paging = input({ pageNumber: 0, pageCount: 0, total: 0 });
+        /**
+         * Emits the new paging information when the user changes the page.
+         */
+        this.pagingChange = output();
     }
     onFirst() {
-        this.paging = { ...this.paging, pageNumber: 1 };
-        this.pagingChange.emit(this.paging);
+        this.pagingChange.emit({ ...this.paging(), pageNumber: 1 });
     }
     onPrevious() {
-        if (this.paging.pageNumber > 1) {
-            this.paging = { ...this.paging, pageNumber: this.paging.pageNumber - 1 };
-            this.pagingChange.emit(this.paging);
+        if (this.paging().pageNumber > 1) {
+            this.pagingChange.emit({
+                ...this.paging(),
+                pageNumber: this.paging().pageNumber - 1,
+            });
         }
     }
     onNext() {
-        if (this.paging.pageNumber < this.paging.pageCount) {
-            this.paging = { ...this.paging, pageNumber: this.paging.pageNumber + 1 };
-            this.pagingChange.emit(this.paging);
+        if (this.paging().pageNumber < this.paging().pageCount) {
+            this.pagingChange.emit({
+                ...this.paging(),
+                pageNumber: this.paging().pageNumber + 1,
+            });
         }
     }
     onLast() {
-        if (this.paging.pageNumber < this.paging.pageCount) {
-            this.paging = { ...this.paging, pageNumber: this.paging.pageCount };
-            this.pagingChange.emit(this.paging);
+        if (this.paging().pageNumber < this.paging().pageCount) {
+            this.pagingChange.emit({
+                ...this.paging(),
+                pageNumber: this.paging().pageCount,
+            });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CompactPagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: CompactPagerComponent, selector: "pdb-compact-pager", inputs: { paging: "paging" }, 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: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { 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: "19.0.0", ngImport: i0, type: CompactPagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.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]", exportAs: ["matButton"] }, { 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: "18.2.9", ngImport: i0, type: CompactPagerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: CompactPagerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdb-compact-pager', 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"] }]
-        }], ctorParameters: () => [], propDecorators: { paging: [{
-                type: Input
-            }], pagingChange: [{
-                type: Output
-            }] } });
+            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"] }]
+        }] });
 
 class RangeViewComponent {
     constructor() {
-        this.domain = [0, 100];
-        this.range = [0, 100];
-        this.width = 100;
-        this.height = 5;
-        this.scaledRange = [];
-    }
-    ngOnChanges() {
-        const domainWidth = this.domain[1] - this.domain[0];
-        const rangeWidth = this.range[1] - this.range[0];
-        const rangeStart = this.range[0] - this.domain[0];
-        this.scaledRange = [
-            (rangeStart / domainWidth) * this.width,
-            ((rangeStart + rangeWidth) / domainWidth) * this.width,
-        ];
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RangeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: RangeViewComponent, selector: "pdb-range-view", inputs: { domain: "domain", range: "range", width: "width", height: "height" }, usesOnChanges: true, 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"] }); }
+        /**
+         * The domain of the range view (start, limit).
+         */
+        this.domain = input([0, 100]);
+        /**
+         * The range of the range view (start, limit).
+         */
+        this.range = input([0, 100]);
+        /**
+         * The width of the component.
+         */
+        this.width = input(100);
+        /**
+         * The height of the component.
+         */
+        this.height = input(5);
+        this.scaledRange = computed(() => {
+            const domain = this.domain();
+            const range = this.range();
+            const width = this.width();
+            const domainWidth = domain[1] - domain[0];
+            const rangeWidth = range[1] - range[0];
+            const rangeStart = range[0] - domain[0];
+            return [
+                (rangeStart / domainWidth) * width,
+                ((rangeStart + rangeWidth) / domainWidth) * width,
+            ];
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: RangeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.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: "18.2.9", ngImport: i0, type: RangeViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.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: () => [], propDecorators: { domain: [{
-                type: Input
-            }], range: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }] } });
+            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: () => [] });
 
 /**
  * Browser tree node component view. This wraps some HTML content providing
@@ -108,32 +105,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
  * <pdb-browser-tree-node>
  */
 class BrowserTreeNodeComponent {
-    /**
-     * The node to display.
-     */
-    get node() {
-        return this._node;
-    }
-    set node(value) {
-        if (this._node === value) {
-            return;
-        }
-        this._node = value;
-    }
     constructor() {
+        /**
+         * The node to display.
+         */
+        this.node = input();
+        /**
+         * The paging information for the node's children.
+         */
+        this.paging = input();
+        /**
+         * True to show debug information.
+         */
+        this.debug = input();
+        /**
+         * True to hide the node's loc and label. This is useful if you want to
+         * provide your own view for the node, between the expansion toggle and
+         * the filter edit button. In this case, in your consumer template provide
+         * your own view as the content of this component. If instead you are fine
+         * with the default loc and label, and just want to add more data to
+         * the view, then you can just add your own content to this component's
+         * template, without setting this property to true.
+         */
+        this.hideLabel = input();
+        /**
+         * True to hide the node's location (y and x).
+         */
+        this.hideLoc = input();
+        /**
+         * True to hide the node's paging control unless hovered.
+         */
+        this.hidePaging = input();
+        /**
+         * True to hide the node's filter edit button.
+         */
+        this.hideFilter = input();
         /**
          * The indent size for the node's children.
          */
-        this.indentSize = 30;
-        this.toggleExpandedRequest = new EventEmitter();
-        this.changePageRequest = new EventEmitter();
-        this.editNodeFilterRequest = new EventEmitter();
+        this.indentSize = input(30);
+        /**
+         * Emits when the user wants to toggle the expanded state of the node.
+         */
+        this.toggleExpandedRequest = output();
+        /**
+         * Emits when the user wants to change the page number of the node's children.
+         */
+        this.changePageRequest = output();
+        /**
+         * Emits when the user wants to edit the node's filter.
+         */
+        this.editNodeFilterRequest = output();
     }
     onToggleExpanded() {
-        if (!this._node) {
+        if (!this.node()) {
             return;
         }
-        this.toggleExpandedRequest.emit(this._node);
+        this.toggleExpandedRequest.emit(this.node());
     }
     onPagingChange(node, paging) {
         this.changePageRequest.emit({
@@ -142,39 +170,33 @@ class BrowserTreeNodeComponent {
         });
     }
     onEditFilter() {
-        if (this._node) {
-            this.editNodeFilterRequest.emit(this._node);
+        if (this.node()) {
+            this.editNodeFilterRequest.emit(this.node());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BrowserTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: BrowserTreeNodeComponent, selector: "pdb-browser-tree-node", inputs: { node: "node", paging: "paging", debug: "debug", hideLabel: "hideLabel", hideLoc: "hideLoc", hidePaging: "hidePaging", hideFilter: "hideFilter", indentSize: "indentSize" }, outputs: { toggleExpandedRequest: "toggleExpandedRequest", changePageRequest: "changePageRequest", editNodeFilterRequest: "editNodeFilterRequest" }, ngImport: i0, template: "@if (node) {\n<div id=\"node\" [style.margin-left.px]=\"(node.y - 1) * indentSize\">\n  <!-- pager -->\n  @if ($any(node).expanded && paging && paging.pageCount > 1) {\n  <div id=\"pager\" [style.display]=\"hidePaging ? 'inherit' : 'block'\">\n    <pdb-compact-pager\n      [paging]=\"paging\"\n      (pagingChange)=\"onPagingChange($any(node), $event)\"\n    />\n    <pdb-range-view\n      [width]=\"250\"\n      [domain]=\"[0, paging.pageCount]\"\n      [range]=\"[paging.pageNumber - 1, paging.pageNumber]\"\n    />\n  </div>\n  }\n  <!-- node -->\n  <div class=\"form-row\">\n    <!-- expand/collapse button -->\n    <button\n      type=\"button\"\n      mat-icon-button\n      [matTooltip]=\"$any(node).expanded ? 'Collapse' : 'Expand'\"\n      i18n-matTooltip\n      [disabled]=\"node.hasChildren === false\"\n      (click)=\"onToggleExpanded()\"\n    >\n      <mat-icon class=\"mat-primary\" i18n>{{\n        node.hasChildren === true || node.hasChildren === undefined\n          ? $any(node).expanded\n            ? \"expand_less\"\n            : \"expand_more\"\n          : \"stop\"\n      }}</mat-icon>\n    </button>\n\n    <!-- tag -->\n    @if (!hideLabel) {\n    <span\n      class=\"tag\"\n      [ngStyle]=\"{\n        'background-color': (node.tag | stringToColor),\n        color: node.tag | stringToColor | colorToContrast\n      }\"\n      >{{ node.tag }}</span\n    >\n\n    <!-- loc and label -->\n    @if (!hideLoc) {\n    <span class=\"loc\">{{ node.y }}.{{ node.x }}</span> - }\n    {{ node.label }}\n    }\n\n    <!-- PROJECTED NODE -->\n    <ng-content></ng-content>\n\n    <!-- debug -->\n    @if (debug) {\n    <span class=\"debug\"\n      >#{{ node.id }}\n      <span\n        >| {{ $any(node).paging.pageNumber }}/{{\n          $any(node).paging.pageCount\n        }}\n        ({{ $any(node).paging.total }})</span\n      ></span\n    >\n    }\n\n    <!-- filter -->\n    @if (!hideFilter){ @if (!$any(node).filter && node.y) {\n    <div class=\"muted\">\n      <button\n        type=\"button\"\n        mat-icon-button\n        matTooltip=\"Add filter\"\n        i18n-matTooltip\n        (click)=\"onEditFilter()\"\n      >\n        <mat-icon>filter_list</mat-icon>\n      </button>\n    </div>\n    } @if ($any(node).filter && node.y) {\n    <div class=\"muted\">\n      <button type=\"button\" mat-icon-button (click)=\"onEditFilter()\">\n        <mat-icon [matBadge]=\"$any(node).filter ? 'F' : ''\"\n          >filter_alt</mat-icon\n        >\n      </button>\n    </div>\n    } }\n  </div>\n</div>\n}\n", styles: [".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}#node{margin-bottom:4px;padding:4px 6px;border:1px solid #98a8d4;border-radius:6px}#node:hover{background-color:#d6dee9}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: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: 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: i8.ColorToContrastPipe, name: "colorToContrast" }, { kind: "pipe", type: i8.StringToColorPipe, name: "stringToColor" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: BrowserTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.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 } }, outputs: { toggleExpandedRequest: "toggleExpandedRequest", changePageRequest: "changePageRequest", editNodeFilterRequest: "editNodeFilterRequest" }, ngImport: i0, template: "@if (node()) {\n<div id=\"node\" [style.margin-left.px]=\"(node()!.y - 1) * indentSize()\">\n  <!-- pager -->\n  @if (node()!.expanded && paging() && paging()!.pageCount > 1) {\n  <div id=\"pager\" [style.display]=\"hidePaging() ? 'inherit' : 'block'\">\n    <pdb-compact-pager\n      [paging]=\"paging()!\"\n      (pagingChange)=\"onPagingChange(node()!, $event)\"\n    />\n    <pdb-range-view\n      [width]=\"250\"\n      [domain]=\"[0, paging()!.pageCount]\"\n      [range]=\"[paging()!.pageNumber - 1, paging()!.pageNumber]\"\n    />\n  </div>\n  }\n  <!-- node -->\n  <div class=\"form-row\">\n    <!-- expand/collapse button -->\n    <button\n      type=\"button\"\n      mat-icon-button\n      [matTooltip]=\"node()?.expanded ? 'Collapse' : 'Expand'\"\n      i18n-matTooltip\n      [disabled]=\"node()!.hasChildren === false\"\n      (click)=\"onToggleExpanded()\"\n    >\n      <mat-icon class=\"mat-primary\" i18n>{{\n        node()!.hasChildren === true || node()!.hasChildren === undefined\n          ? node()?.expanded\n            ? \"expand_less\"\n            : \"expand_more\"\n          : \"stop\"\n      }}</mat-icon>\n    </button>\n\n    <!-- tag -->\n    @if (!hideLabel()) {\n    <span\n      class=\"tag\"\n      [ngStyle]=\"{\n        'background-color': (node()!.tag | stringToColor),\n        color: node()!.tag | stringToColor | colorToContrast\n      }\"\n      >{{ node()!.tag }}</span\n    >\n\n    <!-- loc and label -->\n    @if (!hideLoc()) {\n    <span class=\"loc\">{{ node()!.y }}.{{ node()!.x }}</span> - }\n    {{ node()!.label }}\n    }\n\n    <!-- PROJECTED NODE -->\n    <ng-content></ng-content>\n\n    <!-- debug -->\n    @if (debug()) {\n    <span class=\"debug\"\n      >#{{ node()!.id }}\n      <span\n        >| {{ node()!.paging.pageNumber }}/{{ node()!.paging.pageCount }} ({{\n          node()!.paging.total\n        }})</span\n      ></span\n    >\n    }\n\n    <!-- filter -->\n    @if (!hideFilter()){ @if (!node()?.filter && node()?.y) {\n    <div class=\"muted\">\n      <button\n        type=\"button\"\n        mat-icon-button\n        matTooltip=\"Add filter\"\n        i18n-matTooltip\n        (click)=\"onEditFilter()\"\n      >\n        <mat-icon>filter_list</mat-icon>\n      </button>\n    </div>\n    } @if (node()?.filter && node()?.y) {\n    <div class=\"muted\">\n      <button type=\"button\" mat-icon-button (click)=\"onEditFilter()\">\n        <mat-icon [matBadge]=\"node()?.filter ? 'F' : ''\">filter_alt</mat-icon>\n      </button>\n    </div>\n    } }\n  </div>\n</div>\n}\n", styles: [".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}#node{margin-bottom:4px;padding:4px 6px;border:1px solid #98a8d4;border-radius:6px}#node:hover{background-color:#d6dee9}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]", exportAs: ["matButton"] }, { 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: "pipe", type: 
+                // ngx-tools
+                ColorToContrastPipe, name: "colorToContrast" }, { kind: "pipe", type: StringToColorPipe, name: "stringToColor" }, { 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BrowserTreeNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: BrowserTreeNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdb-browser-tree-node', template: "@if (node) {\n<div id=\"node\" [style.margin-left.px]=\"(node.y - 1) * indentSize\">\n  <!-- pager -->\n  @if ($any(node).expanded && paging && paging.pageCount > 1) {\n  <div id=\"pager\" [style.display]=\"hidePaging ? 'inherit' : 'block'\">\n    <pdb-compact-pager\n      [paging]=\"paging\"\n      (pagingChange)=\"onPagingChange($any(node), $event)\"\n    />\n    <pdb-range-view\n      [width]=\"250\"\n      [domain]=\"[0, paging.pageCount]\"\n      [range]=\"[paging.pageNumber - 1, paging.pageNumber]\"\n    />\n  </div>\n  }\n  <!-- node -->\n  <div class=\"form-row\">\n    <!-- expand/collapse button -->\n    <button\n      type=\"button\"\n      mat-icon-button\n      [matTooltip]=\"$any(node).expanded ? 'Collapse' : 'Expand'\"\n      i18n-matTooltip\n      [disabled]=\"node.hasChildren === false\"\n      (click)=\"onToggleExpanded()\"\n    >\n      <mat-icon class=\"mat-primary\" i18n>{{\n        node.hasChildren === true || node.hasChildren === undefined\n          ? $any(node).expanded\n            ? \"expand_less\"\n            : \"expand_more\"\n          : \"stop\"\n      }}</mat-icon>\n    </button>\n\n    <!-- tag -->\n    @if (!hideLabel) {\n    <span\n      class=\"tag\"\n      [ngStyle]=\"{\n        'background-color': (node.tag | stringToColor),\n        color: node.tag | stringToColor | colorToContrast\n      }\"\n      >{{ node.tag }}</span\n    >\n\n    <!-- loc and label -->\n    @if (!hideLoc) {\n    <span class=\"loc\">{{ node.y }}.{{ node.x }}</span> - }\n    {{ node.label }}\n    }\n\n    <!-- PROJECTED NODE -->\n    <ng-content></ng-content>\n\n    <!-- debug -->\n    @if (debug) {\n    <span class=\"debug\"\n      >#{{ node.id }}\n      <span\n        >| {{ $any(node).paging.pageNumber }}/{{\n          $any(node).paging.pageCount\n        }}\n        ({{ $any(node).paging.total }})</span\n      ></span\n    >\n    }\n\n    <!-- filter -->\n    @if (!hideFilter){ @if (!$any(node).filter && node.y) {\n    <div class=\"muted\">\n      <button\n        type=\"button\"\n        mat-icon-button\n        matTooltip=\"Add filter\"\n        i18n-matTooltip\n        (click)=\"onEditFilter()\"\n      >\n        <mat-icon>filter_list</mat-icon>\n      </button>\n    </div>\n    } @if ($any(node).filter && node.y) {\n    <div class=\"muted\">\n      <button type=\"button\" mat-icon-button (click)=\"onEditFilter()\">\n        <mat-icon [matBadge]=\"$any(node).filter ? 'F' : ''\"\n          >filter_alt</mat-icon\n        >\n      </button>\n    </div>\n    } }\n  </div>\n</div>\n}\n", styles: [".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}#node{margin-bottom:4px;padding:4px 6px;border:1px solid #98a8d4;border-radius:6px}#node:hover{background-color:#d6dee9}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"] }]
-        }], ctorParameters: () => [], propDecorators: { node: [{
-                type: Input
-            }], paging: [{
-                type: Input
-            }], debug: [{
-                type: Input
-            }], hideLabel: [{
-                type: Input
-            }], hideLoc: [{
-                type: Input
-            }], hidePaging: [{
-                type: Input
-            }], hideFilter: [{
-                type: Input
-            }], indentSize: [{
-                type: Input
-            }], toggleExpandedRequest: [{
-                type: Output
-            }], changePageRequest: [{
-                type: Output
-            }], editNodeFilterRequest: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'pdb-browser-tree-node', imports: [
+                        CommonModule,
+                        MatBadgeModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatTooltipModule,
+                        // ngx-tools
+                        ColorToContrastPipe,
+                        StringToColorPipe,
+                        // local
+                        CompactPagerComponent,
+                        RangeViewComponent,
+                    ], template: "@if (node()) {\n<div id=\"node\" [style.margin-left.px]=\"(node()!.y - 1) * indentSize()\">\n  <!-- pager -->\n  @if (node()!.expanded && paging() && paging()!.pageCount > 1) {\n  <div id=\"pager\" [style.display]=\"hidePaging() ? 'inherit' : 'block'\">\n    <pdb-compact-pager\n      [paging]=\"paging()!\"\n      (pagingChange)=\"onPagingChange(node()!, $event)\"\n    />\n    <pdb-range-view\n      [width]=\"250\"\n      [domain]=\"[0, paging()!.pageCount]\"\n      [range]=\"[paging()!.pageNumber - 1, paging()!.pageNumber]\"\n    />\n  </div>\n  }\n  <!-- node -->\n  <div class=\"form-row\">\n    <!-- expand/collapse button -->\n    <button\n      type=\"button\"\n      mat-icon-button\n      [matTooltip]=\"node()?.expanded ? 'Collapse' : 'Expand'\"\n      i18n-matTooltip\n      [disabled]=\"node()!.hasChildren === false\"\n      (click)=\"onToggleExpanded()\"\n    >\n      <mat-icon class=\"mat-primary\" i18n>{{\n        node()!.hasChildren === true || node()!.hasChildren === undefined\n          ? node()?.expanded\n            ? \"expand_less\"\n            : \"expand_more\"\n          : \"stop\"\n      }}</mat-icon>\n    </button>\n\n    <!-- tag -->\n    @if (!hideLabel()) {\n    <span\n      class=\"tag\"\n      [ngStyle]=\"{\n        'background-color': (node()!.tag | stringToColor),\n        color: node()!.tag | stringToColor | colorToContrast\n      }\"\n      >{{ node()!.tag }}</span\n    >\n\n    <!-- loc and label -->\n    @if (!hideLoc()) {\n    <span class=\"loc\">{{ node()!.y }}.{{ node()!.x }}</span> - }\n    {{ node()!.label }}\n    }\n\n    <!-- PROJECTED NODE -->\n    <ng-content></ng-content>\n\n    <!-- debug -->\n    @if (debug()) {\n    <span class=\"debug\"\n      >#{{ node()!.id }}\n      <span\n        >| {{ node()!.paging.pageNumber }}/{{ node()!.paging.pageCount }} ({{\n          node()!.paging.total\n        }})</span\n      ></span\n    >\n    }\n\n    <!-- filter -->\n    @if (!hideFilter()){ @if (!node()?.filter && node()?.y) {\n    <div class=\"muted\">\n      <button\n        type=\"button\"\n        mat-icon-button\n        matTooltip=\"Add filter\"\n        i18n-matTooltip\n        (click)=\"onEditFilter()\"\n      >\n        <mat-icon>filter_list</mat-icon>\n      </button>\n    </div>\n    } @if (node()?.filter && node()?.y) {\n    <div class=\"muted\">\n      <button type=\"button\" mat-icon-button (click)=\"onEditFilter()\">\n        <mat-icon [matBadge]=\"node()?.filter ? 'F' : ''\">filter_alt</mat-icon>\n      </button>\n    </div>\n    } }\n  </div>\n</div>\n}\n", styles: [".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}#node{margin-bottom:4px;padding:4px 6px;border:1px solid #98a8d4;border-radius:6px}#node:hover{background-color:#d6dee9}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"] }]
+        }] });
 
 /**
  * A Least Recently Used cache that can be used to store any type of object.
@@ -241,6 +263,9 @@ class LRUCache {
             this._totalSize += size;
             while (this._totalSize > this._maxSize) {
                 const oldestKey = this._cache.keys().next().value;
+                if (!oldestKey) {
+                    break;
+                }
                 let oldestSize = this._sizes.get(oldestKey);
                 if (oldestSize) {
                     this._totalSize -= oldestSize;
@@ -252,6 +277,9 @@ class LRUCache {
         else {
             while (this._cache.size > this._maxSize) {
                 const oldestKey = this._cache.keys().next().value;
+                if (!oldestKey) {
+                    break;
+                }
                 this._cache.delete(oldestKey);
                 this._sizes.delete(oldestKey);
             }
@@ -554,7 +582,7 @@ class PagedTreeStore {
         if (this._customCacheKeyBuilder) {
             return this._customCacheKeyBuilder(pageNumber, filter);
         }
-        return JSON.stringify({ pageNumber, ...filter });
+        return JSON.stringify({ ...filter, pageNumber });
     }
     /**
      * Get the specified page of nodes, either from cache or from the server.
@@ -671,9 +699,6 @@ class PagedTreeStore {
      * @returns Promise with true if the node was expanded, false otherwise.
      */
     expand(id) {
-        if (!id) {
-            return Promise.resolve(false);
-        }
         return new Promise((resolve, reject) => {
             const node = this._nodes$.value.find((n) => n.id === id);
             if (!node || node.hasChildren === false || node.expanded) {
@@ -708,12 +733,22 @@ class PagedTreeStore {
     /**
      * Expand all the descendants of the node with the specified ID.
      *
-     * @param id The ID of the node to expand.
+     * @param id The ID of the node to expand, or undefined to expand the
+     * descendants of all the root level nodes.
      * @returns Promise.
      */
     expandAll(id) {
-        if (!id) {
-            return Promise.resolve(false);
+        if (id === undefined) {
+            // for each root level node call expandAll
+            const nodes = [...this._nodes$.value];
+            let i = 0;
+            while (i < nodes.length) {
+                if (nodes[i].parentId === undefined) {
+                    this.expandAll(nodes[i].id);
+                }
+                i++;
+            }
+            return Promise.resolve(true);
         }
         // get the parent node to start from
         const nodes = this._nodes$.value;
@@ -768,9 +803,6 @@ class PagedTreeStore {
      * @returns Promise with true if the node was collapsed, false otherwise.
      */
     collapse(id) {
-        if (!id) {
-            return Promise.resolve(false);
-        }
         return new Promise((resolve, reject) => {
             const node = this._nodes$.value.find((n) => n.id === id);
             if (!node || node.hasChildren === false || !node.expanded) {
@@ -785,12 +817,39 @@ class PagedTreeStore {
             else {
                 this._dirty = true;
                 this.removeDescendants(nodes, nodeIndex);
-                this._nodes$.next(nodes);
                 node.expanded = false;
+                // reset paging info
+                if (node?.paging) {
+                    node.paging.pageNumber = 1;
+                }
+                this._nodes$.next(nodes);
                 resolve(true);
             }
         });
     }
+    /**
+     * Collapse all the descendants of the node with the specified ID.
+     *
+     * @param id The ID of the node to collapse, or undefined to collapse the
+     * descendants of all the root level nodes.
+     * @returns Promise.
+     */
+    collapseAll(id) {
+        if (id === undefined) {
+            // for each expanded root level node
+            const nodes = [...this._nodes$.value.filter((n) => n.expanded)];
+            let i = 0;
+            while (i < nodes.length) {
+                if (nodes[i].parentId === undefined) {
+                    this.collapseAll(nodes[i].id);
+                }
+                i++;
+            }
+            return Promise.resolve(true);
+        }
+        this.collapse(id);
+        return Promise.resolve(true);
+    }
     /**
      * Change the page including the node with the specified ID.
      * @param parentId The ID of the parent node whose children are inside the page
@@ -844,17 +903,6 @@ class PagedTreeStore {
             });
         });
     }
-    /**
-     * Collapse all the nodes in the store.
-     */
-    collapseAll() {
-        if (this.isEmpty()) {
-            return;
-        }
-        // collapse the first node
-        const root = this._nodes$.value[0];
-        this.collapse(root.id);
-    }
     /**
      * Clear the store. The cache is cleared and the nodes are removed.
      */
@@ -881,79 +929,6 @@ class PagedTreeStore {
     }
 }
 
-class PagedDataBrowsersModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PagedDataBrowsersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: PagedDataBrowsersModule, declarations: [CompactPagerComponent,
-            RangeViewComponent,
-            BrowserTreeNodeComponent], imports: [CommonModule,
-            ReactiveFormsModule,
-            // material
-            MatBadgeModule,
-            MatButtonModule,
-            MatChipsModule,
-            MatDialogModule,
-            MatFormFieldModule,
-            MatIconModule,
-            MatInputModule,
-            MatPaginatorModule,
-            MatProgressBarModule,
-            MatSelectModule,
-            MatTooltipModule,
-            // myrmidon
-            NgToolsModule], exports: [CompactPagerComponent,
-            RangeViewComponent,
-            BrowserTreeNodeComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PagedDataBrowsersModule, imports: [CommonModule,
-            ReactiveFormsModule,
-            // material
-            MatBadgeModule,
-            MatButtonModule,
-            MatChipsModule,
-            MatDialogModule,
-            MatFormFieldModule,
-            MatIconModule,
-            MatInputModule,
-            MatPaginatorModule,
-            MatProgressBarModule,
-            MatSelectModule,
-            MatTooltipModule,
-            // myrmidon
-            NgToolsModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PagedDataBrowsersModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        CompactPagerComponent,
-                        RangeViewComponent,
-                        BrowserTreeNodeComponent,
-                    ],
-                    imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        // material
-                        MatBadgeModule,
-                        MatButtonModule,
-                        MatChipsModule,
-                        MatDialogModule,
-                        MatFormFieldModule,
-                        MatIconModule,
-                        MatInputModule,
-                        MatPaginatorModule,
-                        MatProgressBarModule,
-                        MatSelectModule,
-                        MatTooltipModule,
-                        // myrmidon
-                        NgToolsModule
-                    ],
-                    exports: [
-                        CompactPagerComponent,
-                        RangeViewComponent,
-                        BrowserTreeNodeComponent,
-                    ],
-                }]
-        }] });
-
 /*
  * Public API Surface of paged-data-browsers
  */
@@ -962,5 +937,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BrowserTreeNodeComponent, CompactPagerComponent, DEFAULT_PAGED_LIST_STORE_OPTIONS, LRUCache, PagedDataBrowsersModule, PagedListStore, PagedTreeStore, RangeViewComponent };
+export { BrowserTreeNodeComponent, CompactPagerComponent, DEFAULT_PAGED_LIST_STORE_OPTIONS, LRUCache, PagedListStore, PagedTreeStore, RangeViewComponent };
 //# sourceMappingURL=myrmidon-paged-data-browsers.mjs.map