@myrmidon/paged-data-browsers 0.0.1

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

@@ -0,0 +1,902 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+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 { BehaviorSubject, of, tap, switchMap, 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();
+    }
+    onFirst() {
+        this.paging = { ...this.paging, pageNumber: 1 };
+        this.pagingChange.emit(this.paging);
+    }
+    onPrevious() {
+        if (this.paging.pageNumber > 1) {
+            this.paging = { ...this.paging, pageNumber: this.paging.pageNumber - 1 };
+            this.pagingChange.emit(this.paging);
+        }
+    }
+    onNext() {
+        if (this.paging.pageNumber < this.paging.pageCount) {
+            this.paging = { ...this.paging, pageNumber: this.paging.pageNumber + 1 };
+            this.pagingChange.emit(this.paging);
+        }
+    }
+    onLast() {
+        if (this.paging.pageNumber < this.paging.pageCount) {
+            this.paging = { ...this.paging, pageNumber: this.paging.pageCount };
+            this.pagingChange.emit(this.paging);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: CompactPagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: CompactPagerComponent, selector: "pdb-compact-pager", inputs: { paging: "paging" }, outputs: { pagingChange: "pagingChange" }, ngImport: i0, template: "<div class=\"form-row\" *ngIf=\"paging.pageCount\">\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", 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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: CompactPagerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pdb-compact-pager', template: "<div class=\"form-row\" *ngIf=\"paging.pageCount\">\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", 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: function () { return []; }, propDecorators: { paging: [{
+                type: Input
+            }], pagingChange: [{
+                type: Output
+            }] } });
+
+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: "16.2.7", ngImport: i0, type: RangeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", 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"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", 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: function () { return []; }, propDecorators: { domain: [{
+                type: Input
+            }], range: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }] } });
+
+/**
+ * Browser tree node component view. This wraps some HTML content providing
+ * a toggle button to expand/collapse the node, a paging control for the
+ * node's children, and a button to edit the node's filter. You should then
+ * provide the HTML content to display the node's data inside this component, e.g.
+ * <pdb-browser-tree-node [node]="node">
+ *   <your-node-view [node]="node" />
+ * <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() {
+        this.toggleExpandedRequest = new EventEmitter();
+        this.changePageRequest = new EventEmitter();
+        this.editNodeFilterRequest = new EventEmitter();
+    }
+    onToggleExpanded() {
+        if (!this._node) {
+            return;
+        }
+        this.toggleExpandedRequest.emit(this._node);
+    }
+    onPagingChange(node, paging) {
+        this.changePageRequest.emit({
+            node,
+            paging,
+        });
+    }
+    onEditFilter() {
+        if (this._node) {
+            this.editNodeFilterRequest.emit(this._node);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: BrowserTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: BrowserTreeNodeComponent, selector: "pdb-browser-tree-node", inputs: { node: "node", paging: "paging", debug: "debug", hidePaging: "hidePaging" }, outputs: { toggleExpandedRequest: "toggleExpandedRequest", changePageRequest: "changePageRequest", editNodeFilterRequest: "editNodeFilterRequest" }, ngImport: i0, template: "<div id=\"node\" *ngIf=\"node\" [style.margin-left.px]=\"(node.y - 1) * 20\">\r\n  <!-- pager -->\r\n  <div\r\n    *ngIf=\"$any(node).expanded && paging && paging.pageCount > 1\"\r\n    id=\"pager\"\r\n    [style.display]=\"hidePaging ? 'inherit' : 'block'\"\r\n  >\r\n    <pdb-compact-pager\r\n      [paging]=\"paging\"\r\n      (pagingChange)=\"onPagingChange($any(node), $event)\"\r\n    />\r\n    <pdb-range-view\r\n      [width]=\"250\"\r\n      [domain]=\"[0, paging.pageCount]\"\r\n      [range]=\"[paging.pageNumber - 1, paging.pageNumber]\"\r\n    />\r\n  </div>\r\n  <!-- node -->\r\n  <div class=\"form-row\">\r\n    <!-- expand/collapse button -->\r\n    <button\r\n      *ngIf=\"node.y > 0\"\r\n      type=\"button\"\r\n      mat-icon-button\r\n      color=\"primary\"\r\n      [matTooltip]=\"$any(node).expanded ? 'Collapse' : 'Expand'\"\r\n      [disabled]=\"node.hasChildren === false\"\r\n      (click)=\"onToggleExpanded()\"\r\n    >\r\n      <mat-icon>{{\r\n        node.hasChildren === true || node.hasChildren === undefined\r\n          ? $any(node).expanded\r\n            ? \"expand_less\"\r\n            : \"expand_more\"\r\n          : \"stop\"\r\n      }}</mat-icon>\r\n    </button>\r\n    <!-- tag -->\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    <!-- loc and label -->\r\n    <span class=\"loc\">{{ node.y }}.{{ node.x }}</span> - {{ node.label }}\r\n\r\n    <!-- PROJECTED NODE -->\r\n    <ng-content></ng-content>\r\n\r\n    <!-- debug -->\r\n    <span *ngIf=\"debug\" class=\"debug\"\r\n      >#{{ node.id }}\r\n      <span\r\n        >| {{ $any(node).paging.pageNumber }}/{{\r\n          $any(node).paging.pageCount\r\n        }}\r\n        ({{ $any(node).paging.total }})</span\r\n      ></span\r\n    >\r\n\r\n    <!-- filter -->\r\n    <div class=\"muted\" *ngIf=\"!$any(node).filter && node.y\">\r\n      <button\r\n        type=\"button\"\r\n        mat-icon-button\r\n        matTooltip=\"Add filter\"\r\n        (click)=\"onEditFilter()\"\r\n      >\r\n        <mat-icon>filter_list</mat-icon>\r\n      </button>\r\n    </div>\r\n    <div class=\"muted\" *ngIf=\"$any(node).filter && node.y\">\r\n      <button type=\"button\" mat-icon-button (click)=\"onEditFilter()\">\r\n        <mat-icon [matBadge]=\"$any(node).filter ? 'F' : ''\"\r\n          >filter_alt</mat-icon\r\n        >\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\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 transparent;border-radius:6px}#node:hover{border:1px solid #98a8d4;border-radius:6px}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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", 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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: BrowserTreeNodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pdb-browser-tree-node', template: "<div id=\"node\" *ngIf=\"node\" [style.margin-left.px]=\"(node.y - 1) * 20\">\r\n  <!-- pager -->\r\n  <div\r\n    *ngIf=\"$any(node).expanded && paging && paging.pageCount > 1\"\r\n    id=\"pager\"\r\n    [style.display]=\"hidePaging ? 'inherit' : 'block'\"\r\n  >\r\n    <pdb-compact-pager\r\n      [paging]=\"paging\"\r\n      (pagingChange)=\"onPagingChange($any(node), $event)\"\r\n    />\r\n    <pdb-range-view\r\n      [width]=\"250\"\r\n      [domain]=\"[0, paging.pageCount]\"\r\n      [range]=\"[paging.pageNumber - 1, paging.pageNumber]\"\r\n    />\r\n  </div>\r\n  <!-- node -->\r\n  <div class=\"form-row\">\r\n    <!-- expand/collapse button -->\r\n    <button\r\n      *ngIf=\"node.y > 0\"\r\n      type=\"button\"\r\n      mat-icon-button\r\n      color=\"primary\"\r\n      [matTooltip]=\"$any(node).expanded ? 'Collapse' : 'Expand'\"\r\n      [disabled]=\"node.hasChildren === false\"\r\n      (click)=\"onToggleExpanded()\"\r\n    >\r\n      <mat-icon>{{\r\n        node.hasChildren === true || node.hasChildren === undefined\r\n          ? $any(node).expanded\r\n            ? \"expand_less\"\r\n            : \"expand_more\"\r\n          : \"stop\"\r\n      }}</mat-icon>\r\n    </button>\r\n    <!-- tag -->\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    <!-- loc and label -->\r\n    <span class=\"loc\">{{ node.y }}.{{ node.x }}</span> - {{ node.label }}\r\n\r\n    <!-- PROJECTED NODE -->\r\n    <ng-content></ng-content>\r\n\r\n    <!-- debug -->\r\n    <span *ngIf=\"debug\" class=\"debug\"\r\n      >#{{ node.id }}\r\n      <span\r\n        >| {{ $any(node).paging.pageNumber }}/{{\r\n          $any(node).paging.pageCount\r\n        }}\r\n        ({{ $any(node).paging.total }})</span\r\n      ></span\r\n    >\r\n\r\n    <!-- filter -->\r\n    <div class=\"muted\" *ngIf=\"!$any(node).filter && node.y\">\r\n      <button\r\n        type=\"button\"\r\n        mat-icon-button\r\n        matTooltip=\"Add filter\"\r\n        (click)=\"onEditFilter()\"\r\n      >\r\n        <mat-icon>filter_list</mat-icon>\r\n      </button>\r\n    </div>\r\n    <div class=\"muted\" *ngIf=\"$any(node).filter && node.y\">\r\n      <button type=\"button\" mat-icon-button (click)=\"onEditFilter()\">\r\n        <mat-icon [matBadge]=\"$any(node).filter ? 'F' : ''\"\r\n          >filter_alt</mat-icon\r\n        >\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\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 transparent;border-radius:6px}#node:hover{border:1px solid #98a8d4;border-radius:6px}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: function () { return []; }, propDecorators: { node: [{
+                type: Input
+            }], paging: [{
+                type: Input
+            }], debug: [{
+                type: Input
+            }], hidePaging: [{
+                type: Input
+            }], toggleExpandedRequest: [{
+                type: Output
+            }], changePageRequest: [{
+                type: Output
+            }], editNodeFilterRequest: [{
+                type: Output
+            }] } });
+
+/**
+ * A Least Recently Used cache that can be used to store any type of object.
+ * The cache works in two modes: considering the size of the objects or not.
+ * If the size is considered, the cache will have a maximum size and will
+ * remove the oldest objects when the maximum size is reached. Note that
+ * the size is only roughly estimated. This avoids removing too many
+ * entries from the cache when the maximum is reached.
+ * If the size is not considered, the cache will have a maximum number of
+ * objects and will remove the oldest objects when the maximum number is
+ * reached.
+ */
+class LRUCache {
+    /**
+     * Creates a new cache.
+     * @param maxSize The maximum size of the cache. This is either
+     * the maximum number of items in the cache (when considerSize
+     * is false) or the maximum total size of all items in the
+     * cache in bytes (when considerSize is true).
+     * @param considerSize True if the size of the objects should be
+     * considered.
+     */
+    constructor(maxSize, considerSize = false) {
+        this.maxSize = maxSize;
+        this.totalSize = 0;
+        this.considerSize = considerSize;
+        this.cache = new Map();
+        this.sizes = new Map();
+    }
+    /**
+     * Get an item from the cache.
+     * @param key The key of the item to get.
+     * @returns The item or undefined if the item is not in the cache.
+     */
+    get(key) {
+        let item = this.cache.get(key);
+        if (item) {
+            this.cache.delete(key);
+            this.cache.set(key, item);
+        }
+        return item;
+    }
+    /**
+     * Put an item in the cache.
+     * @param key The key of the item to put.
+     * @param item The item to put.
+     * @param size The estimated size of the item in bytes.
+     * This must be calculated by the caller but only when
+     * considerSize is true.
+     */
+    put(key, item, size) {
+        this.cache.delete(key);
+        this.cache.set(key, item);
+        this.sizes.set(key, size);
+        if (this.considerSize) {
+            this.totalSize += size;
+            while (this.totalSize > this.maxSize) {
+                const oldestKey = this.cache.keys().next().value;
+                let oldestSize = this.sizes.get(oldestKey);
+                if (oldestSize) {
+                    this.totalSize -= oldestSize;
+                }
+                this.cache.delete(oldestKey);
+                this.sizes.delete(oldestKey);
+            }
+        }
+        else {
+            while (this.cache.size > this.maxSize) {
+                const oldestKey = this.cache.keys().next().value;
+                this.cache.delete(oldestKey);
+                this.sizes.delete(oldestKey);
+            }
+        }
+    }
+    /**
+     * Clear the cache.
+     */
+    clear() {
+        this.cache.clear();
+        this.sizes.clear();
+        this.totalSize = 0;
+    }
+    /**
+     * Estimate the size of an object in bytes.
+     * @param obj The object to calculate the size of.
+     * @returns The estimated size of the object in bytes.
+     */
+    static calculateObjectSize(obj) {
+        if (!obj) {
+            return 0;
+        }
+        let totalSize = 0;
+        let keys = Object.keys(obj);
+        for (let key of keys) {
+            let value = obj[key];
+            if (typeof value === 'string') {
+                totalSize += value.length * 2;
+            }
+            else if (typeof value === 'number') {
+                totalSize += 8;
+            }
+            else if (typeof value === 'boolean') {
+                totalSize += 4;
+            }
+            else if (typeof value === 'object' && value !== null) {
+                totalSize += this.calculateObjectSize(value);
+            }
+        }
+        return totalSize;
+    }
+}
+
+/**
+ * Default options for the paged list store.
+ */
+const DEFAULT_PAGED_LIST_STORE_OPTIONS = {
+    pageSize: 20,
+    cacheSize: 50,
+};
+/**
+ * A generic paged list store using a filter object of type F
+ * and a list of elements of type E.
+ */
+class PagedListStore {
+    /**
+     * The size of nodes pages in this store. If you change it, the store
+     * is reset. The default value is 20.
+     */
+    get pageSize() {
+        return this._pageSize;
+    }
+    set pageSize(value) {
+        if (this._pageSize === value) {
+            return;
+        }
+        this._pageSize = value;
+        this.reset();
+    }
+    /**
+     * Create a new paged list store.
+     * @param options Options for the paged list store.
+     */
+    constructor(_service, options = DEFAULT_PAGED_LIST_STORE_OPTIONS) {
+        this._service = _service;
+        this._pageSize = options.pageSize;
+        this._cache = new LRUCache(options.cacheSize);
+        // page
+        this._page$ = new BehaviorSubject({
+            pageNumber: 0,
+            pageCount: 0,
+            pageSize: 0,
+            total: 0,
+            items: [],
+        });
+        this.page$ = this._page$.asObservable();
+        // filter
+        this._filter$ = new BehaviorSubject({});
+        this.filter$ = this._filter$.asObservable();
+    }
+    /**
+     * Returns true if the store is empty, false otherwise.
+     * @returns true if the store is empty, false otherwise.
+     */
+    isEmpty() {
+        return this._page$.value.items.length === 0;
+    }
+    /**
+     * Build the cache key for the given page number and filter.
+     * The default implementation just returns a stringified object
+     * containing the page number and the filter. You may override
+     * this method to provide a custom cache key.
+     * @param pageNumber The page number.
+     * @param filter The filter.
+     * @returns A string to be used as cache key.
+     */
+    buildCacheKey(pageNumber, filter) {
+        if (this._customCacheKeyBuilder) {
+            return this._customCacheKeyBuilder(pageNumber, filter);
+        }
+        return JSON.stringify({ pageNumber, ...filter });
+    }
+    /**
+     * Load the page with the given number.
+     * @param pageNumber the page number to load.
+     */
+    loadPage(pageNumber) {
+        return this._service.loadPage(pageNumber, this._pageSize, this._filter$.value);
+    }
+    /**
+     * Set the page with the given number.
+     * @param pageNumber The page number to load.
+     * @param pageSize The page size.
+     * @returns Promise which resolves when the page is loaded.
+     */
+    setPage(pageNumber, pageSize) {
+        if (pageSize && pageSize !== this._pageSize) {
+            this._pageSize = pageSize;
+        }
+        return new Promise((resolve, reject) => {
+            // if page is in cache, return it
+            const key = this.buildCacheKey(pageNumber, this._filter$.value);
+            const cachedPage = this._cache.get(key);
+            if (cachedPage) {
+                this._page$.next(cachedPage);
+                resolve();
+                return;
+            }
+            // else load page
+            this.loadPage(pageNumber).subscribe({
+                next: (page) => {
+                    this._page$.next(page);
+                    resolve();
+                },
+                error: reject,
+            });
+        });
+    }
+    /**
+     * Apply the given filter and load the first page.
+     * @param filter The filter to apply.
+     * @returns Promise which resolves when the page is loaded.
+     */
+    applyFilter(filter) {
+        return new Promise((resolve, reject) => {
+            this._filter$.next(filter);
+            this.setPage(1).then(resolve, reject);
+        });
+    }
+    /**
+     * Reset the filter and load the first page. The cache is cleared.
+     * @returns Promise which resolves when the page is loaded.
+     */
+    reset() {
+        this._cache.clear();
+        return this.applyFilter({});
+    }
+}
+
+/**
+ * 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.
+ * The store keeps a flat list of these tree nodes, allowing users to
+ * expand and collapse them.
+ * F is the type of the filter object, E is the type of the paged tree nodes.
+ */
+class PagedTreeStore {
+    /**
+     * The size of nodes pages in this store. If you change it, the store
+     * is reset. The default value is 20.
+     */
+    get pageSize() {
+        return this._pageSize;
+    }
+    set pageSize(value) {
+        if (this._pageSize === value) {
+            return;
+        }
+        this._pageSize = value;
+        this.reset(this._radix?.label || this._radixLabel);
+    }
+    /**
+     * Create an instance of the store.
+     * @param _service The service used to load nodes.
+     * @param options The options to configure this store.
+     */
+    constructor(_service, options = DEFAULT_PAGED_LIST_STORE_OPTIONS) {
+        this._service = _service;
+        this._pageSize = options.pageSize;
+        this._cache = new LRUCache(options.cacheSize);
+        this._customCacheKeyBuilder = options.buildCacheKey;
+        this._radixLabel = '(root)';
+        this._roots = [];
+        this._nodes$ = new BehaviorSubject([]);
+        this.nodes$ = this._nodes$.asObservable();
+        this._tags$ = new BehaviorSubject([]);
+        this.tags$ = this._tags$.asObservable();
+        this._filter$ = new BehaviorSubject({});
+        this.filter$ = this._filter$.asObservable();
+        this._dirty = true;
+        this.updateTags();
+    }
+    updateTags() {
+        this._service.getTags().subscribe((tags) => {
+            this._tags$.next(tags);
+        });
+    }
+    /**
+     * Gets the global filter eventually overridden with values
+     * from the specified node's filter.
+     * @param node The optional node.
+     * @returns The filter.
+     */
+    getFilter(node) {
+        return node?.filter
+            ? {
+                ...this._filter$.value,
+                ...node.filter,
+            }
+            : this._filter$.value;
+    }
+    /**
+     * Gets all the nodes in the store.
+     * @returns The nodes.
+     */
+    getNodes() {
+        return this._nodes$.value;
+    }
+    /**
+     * Gets the list of nodes tags.
+     * @returns The tags.
+     */
+    getTags() {
+        return this._tags$.value;
+    }
+    /**
+     * Build the cache key for the given page number and filter.
+     * The default implementation just returns a stringified object
+     * containing the page number and the filter. You may override
+     * this method to provide a custom cache key.
+     * @param pageNumber The page number.
+     * @param filter The filter.
+     * @returns A string to be used as cache key.
+     */
+    buildCacheKey(pageNumber, filter) {
+        if (this._customCacheKeyBuilder) {
+            return this._customCacheKeyBuilder(pageNumber, filter);
+        }
+        return JSON.stringify({ pageNumber, ...filter });
+    }
+    getPageFromCacheOrServer(filter, pageNumber) {
+        const key = this.buildCacheKey(pageNumber, filter);
+        const pageInCache = this._cache.get(key);
+        if (pageInCache) {
+            return of(pageInCache);
+        }
+        else {
+            return this._service.getNodes(filter, pageNumber, this._pageSize).pipe(tap((page) => {
+                this._cache.put(key, page, 0);
+            }));
+        }
+    }
+    createPageNodes(page) {
+        return page.items.map((n) => {
+            return {
+                ...n,
+                hasChildren: n.hasChildren,
+                paging: {
+                    pageNumber: page.pageNumber,
+                    pageCount: page.pageCount,
+                    total: page.total,
+                },
+            };
+        });
+    }
+    /**
+     * Applies the filter for this store. Whenever the filter is set,
+     * the store is reset.
+     * @param filter The filter.
+     * @param radixLabel The label of the radix node, if this needs to be set.
+     * @returns true if tree was changed, false otherwise.
+     */
+    applyFilter(filter, radixLabel) {
+        if (this._filter$.value === filter) {
+            return Promise.resolve(false);
+        }
+        this._filter$.next(filter);
+        this._dirty = true;
+        return this.reset(this._radix?.label || radixLabel || this._radixLabel);
+    }
+    /**
+     * Reset the store, loading the root nodes and their children.
+     * @param label The label of the radix node.
+     * @returns true if tree was changed, false otherwise.
+     */
+    reset(label) {
+        if (!this._dirty) {
+            return Promise.resolve(false);
+        }
+        this._cache.clear();
+        const filter = this._filter$.value;
+        this._radix = {
+            id: 0,
+            y: 0,
+            x: 1,
+            label: label,
+            paging: {
+                pageNumber: 0,
+                pageCount: 0,
+                total: 0,
+            },
+        };
+        return new Promise((resolve, reject) => {
+            this._service
+                .getRootNodes(filter.tags)
+                .pipe(switchMap((nodes) => {
+                // no roots, clear and return empty set
+                if (!nodes || nodes.length === 0) {
+                    this._roots = [];
+                    return of([]);
+                }
+                else {
+                    // got roots, set them and get their children
+                    this._roots = nodes.map((node) => ({
+                        ...node,
+                        paging: {
+                            pageNumber: 1,
+                            pageCount: 1,
+                            total: 1,
+                        },
+                    }));
+                    // fetch children for each root node
+                    return forkJoin(this._roots.map((root) => this.getPageFromCacheOrServer({ ...filter, parentId: root.id }, 1)));
+                }
+            }))
+                .subscribe({
+                next: (pages) => {
+                    this._dirty = false;
+                    if (pages.some((page) => page.total)) {
+                        // radix
+                        this._radix.hasChildren = true;
+                        this._radix.expanded = true;
+                        this._radix.paging = {
+                            pageNumber: 1,
+                            pageCount: 1,
+                            total: pages.length,
+                        };
+                        // roots
+                        this._roots.forEach((root, i) => {
+                            root.hasChildren = !!pages[i].total;
+                            root.expanded = !!pages[i].total;
+                        });
+                        const nodes = this._roots.flatMap((root, i) => [
+                            root,
+                            ...this.createPageNodes(pages[i]),
+                        ]);
+                        this._nodes$.next([this._radix, ...nodes]);
+                        resolve(true);
+                    }
+                    else {
+                        this._roots.forEach((root) => {
+                            root.hasChildren = false;
+                            root.expanded = false;
+                        });
+                        this._nodes$.next([this._radix, ...this._roots]);
+                        resolve(true);
+                    }
+                },
+                error: (error) => {
+                    reject(error);
+                },
+            });
+        });
+    }
+    /**
+     * Set the node filter for the node with the specified ID.
+     * @param id The node ID.
+     * @param filter The filter to set.
+     * @returns Promise with true if filter was set, false otherwise.
+     */
+    setNodeFilter(id, filter) {
+        if (!id) {
+            return Promise.resolve(false);
+        }
+        return new Promise((resolve, reject) => {
+            const node = this._nodes$.value.find((n) => n.id === id);
+            if (!node) {
+                reject(`Node ID ${id} not found in store`);
+            }
+            node.filter = filter || undefined;
+            return this.changePage(id, 1);
+        });
+    }
+    /**
+     * Expand the node with the specified ID. If the node is not expandable,
+     * or it is already expanded, this method does nothing.
+     * @param node The ID of the node to expand.
+     * @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) {
+                resolve(false);
+            }
+            this.getPageFromCacheOrServer({ ...this.getFilter(node), parentId: id }, 1).subscribe((page) => {
+                // no children, set hasChildren to false
+                if (!page.total) {
+                    node.hasChildren = false;
+                    resolve(false);
+                }
+                else {
+                    this._dirty = true;
+                    // insert page nodes after the current node
+                    const nodes = this._nodes$.value;
+                    const index = nodes.indexOf(node);
+                    if (index === -1) {
+                        reject(`Node ID ${id} not found in store`);
+                    }
+                    else {
+                        const pageNodes = this.createPageNodes(page);
+                        nodes.splice(index + 1, 0, ...pageNodes);
+                        this._nodes$.next(nodes);
+                        node.hasChildren = true;
+                        node.expanded = true;
+                        resolve(true);
+                    }
+                }
+            });
+        });
+    }
+    expandAll(id) {
+        if (!id) {
+            return Promise.resolve(false);
+        }
+        // get the parent node to start from
+        const nodes = this._nodes$.value;
+        const nodeIndex = nodes.findIndex((n) => n.id === id);
+        if (nodeIndex === -1) {
+            return Promise.resolve(false);
+        }
+        // collect all the descendant nodes IDs
+        let i = nodeIndex + 1;
+        while (i < nodes.length && nodes[i].y > nodes[nodeIndex].y) {
+            i++;
+        }
+        const nodesToExpand = nodes.slice(nodeIndex, i).map((n) => n.id);
+        // expand all the descendant nodes
+        return new Promise((resolve, reject) => {
+            nodesToExpand.forEach((id) => {
+                this.expand(id);
+                this.expandAll(id);
+            });
+            resolve(true);
+        });
+    }
+    getChildren(id) {
+        const node = this._nodes$.value.find((n) => n.id === id);
+        if (!node || node.hasChildren === false) {
+            return [];
+        }
+        const nodes = this._nodes$.value;
+        const index = nodes.indexOf(node);
+        if (index === -1) {
+            return [];
+        }
+        const children = [];
+        let i = index + 1;
+        while (i < nodes.length && nodes[i].y > node.y) {
+            children.push(nodes[i]);
+            i++;
+        }
+        return children;
+    }
+    removeDescendants(nodes, nodeIndex) {
+        let i = nodeIndex + 1;
+        while (i < nodes.length && nodes[i].y > nodes[nodeIndex].y) {
+            i++;
+        }
+        nodes.splice(nodeIndex + 1, i - nodeIndex - 1);
+    }
+    /**
+     * Collapse the node with the specified ID. If the node is not expandable,
+     * or it is already collapsed, this method does nothing.
+     * @param node The node to collapse.
+     * @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) {
+                resolve(false);
+            }
+            // remove all the descendant nodes after the current node
+            const nodes = this._nodes$.value;
+            const nodeIndex = nodes.indexOf(node);
+            if (nodeIndex === -1) {
+                reject(`Node ID ${id} not found in store`);
+            }
+            else {
+                this._dirty = true;
+                this.removeDescendants(nodes, nodeIndex);
+                this._nodes$.next(nodes);
+                node.expanded = false;
+                resolve(true);
+            }
+        });
+    }
+    /**
+     * Change the page including the node with the specified ID.
+     * @param node The parent node whose children are inside the page you want to change.
+     * @param pageNumber The new page number.
+     * @returns Promise with true if the page was changed, false otherwise.
+     */
+    changePage(parentId, pageNumber) {
+        return new Promise((resolve, reject) => {
+            const parentNode = this._nodes$.value.find((n) => n.id === parentId);
+            if (!parentNode) {
+                resolve(false);
+            }
+            this.getPageFromCacheOrServer({ ...this.getFilter(parentNode), parentId }, pageNumber).subscribe((page) => {
+                // if page is empty do nothing
+                if (!page.total) {
+                    resolve(false);
+                }
+                else {
+                    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--;
+                    }
+                    // find the last node of the node's page,
+                    // including all their descendants
+                    let end = nodeIndex + 1;
+                    while (end < nodes.length &&
+                        nodes[end].parentId === parentId &&
+                        nodes[end].paging.pageNumber === oldPageNr) {
+                        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;
+                    this._nodes$.next(nodes);
+                    resolve(true);
+                }
+            });
+        });
+    }
+    /**
+     * Collapse all the nodes in the store.
+     */
+    collapseAll() {
+        this._nodes$.next([this._radix, ...this._roots]);
+    }
+}
+
+class PagedDataBrowsersModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: PagedDataBrowsersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", 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: "16.2.7", 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: "16.2.7", 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
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BrowserTreeNodeComponent, CompactPagerComponent, DEFAULT_PAGED_LIST_STORE_OPTIONS, LRUCache, PagedDataBrowsersModule, PagedListStore, PagedTreeStore, RangeViewComponent };
+//# sourceMappingURL=myrmidon-paged-data-browsers.mjs.map