@myrmidon/cadmus-ui 14.0.0 → 15.1.0

package/fesm2022/myrmidon-cadmus-ui.mjs

@@ -1,24 +1,32 @@
 import * as i0 from '@angular/core';
-import { input, output, Component, effect, ViewChild, Injectable, Inject, model, computed, inject } from '@angular/core';
-import { MatButton, MatIconButton, MatAnchor } from '@angular/material/button';
-import { MatIcon } from '@angular/material/icon';
+import { input, output, Component, signal, effect, ViewChild, Injectable, Inject, inject, model, computed } from '@angular/core';
+import * as i2$1 from '@angular/material/button';
+import { MatButton, MatIconButton, MatButtonModule } from '@angular/material/button';
+import * as i5 from '@angular/material/icon';
+import { MatIcon, MatIconModule } from '@angular/material/icon';
 import { SafeHtmlPipe, deepCopy } from '@myrmidon/ngx-tools';
 import * as i1 from '@myrmidon/cadmus-core';
-import { MatTooltip } from '@angular/material/tooltip';
+import * as i6 from '@angular/material/tooltip';
+import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
 import * as i1$1 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule, PristineChangeEvent } from '@angular/forms';
-import { MatCheckbox } from '@angular/material/checkbox';
+import { FormsModule, ReactiveFormsModule, FormBuilder, FormControl, FormGroup, PristineChangeEvent } from '@angular/forms';
+import * as i3 from '@angular/material/checkbox';
+import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
 import * as i2 from '@myrmidon/ngx-mat-tools';
-import { AsyncPipe, NgClass } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { of, BehaviorSubject, map as map$1, Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, switchMap, map, take } from 'rxjs/operators';
 import { MatAutocomplete, MatAutocompleteTrigger } from '@angular/material/autocomplete';
 import { MatOption } from '@angular/material/core';
-import { MatFormField, MatLabel, MatSuffix } from '@angular/material/form-field';
-import { MatInput } from '@angular/material/input';
+import * as i4 from '@angular/material/form-field';
+import { MatFormField, MatFormFieldModule } from '@angular/material/form-field';
+import * as i4$1 from '@angular/material/input';
+import { MatInput, MatInputModule } from '@angular/material/input';
 import * as i1$2 from '@myrmidon/cadmus-api';
-import { NestedTreeControl } from '@angular/cdk/tree';
-import { MatTreeNestedDataSource, MatTree, MatTreeNodeDef, MatTreeNode, MatTreeNodeToggle, MatNestedTreeNode, MatTreeNodeOutlet } from '@angular/material/tree';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
+import * as i7 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { PagedTreeStore, BrowserTreeNodeComponent } from '@myrmidon/paged-data-browsers';
 import { AppRepository } from '@myrmidon/cadmus-state';
 import * as i1$3 from '@myrmidon/auth-jwt-login';
 
@@ -29,12 +37,12 @@ class CloseSaveButtonsComponent {
     close() {
         this.closeRequest.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CloseSaveButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", type: CloseSaveButtonsComponent, isStandalone: true, selector: "cadmus-close-save-buttons", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, noSave: { classPropertyName: "noSave", publicName: "noSave", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeRequest: "closeRequest" }, ngImport: i0, template: "@if (form()) {\r\n<div class=\"form-row\">\r\n  <button type=\"button\" mat-flat-button class=\"mat-warn\" (click)=\"close()\">\r\n    <mat-icon>cancel</mat-icon>\r\n    close\r\n  </button>\r\n  @if (!noSave()) {\r\n  <button\r\n    type=\"submit\"\r\n    [disabled]=\"form()?.invalid\"\r\n    mat-flat-button\r\n    class=\"mat-primary\"\r\n  >\r\n    <mat-icon>check_circle</mat-icon>\r\n    save\r\n  </button>\r\n  }\r\n</div>\r\n}\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CloseSaveButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: CloseSaveButtonsComponent, isStandalone: true, selector: "cadmus-close-save-buttons", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, noSave: { classPropertyName: "noSave", publicName: "noSave", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeRequest: "closeRequest" }, ngImport: i0, template: "@if (form()) {\n<div class=\"form-row\">\n  <button type=\"button\" mat-flat-button class=\"mat-warn\" (click)=\"close()\">\n    <mat-icon>cancel</mat-icon>\n    close\n  </button>\n  @if (!noSave()) {\n  <button\n    type=\"submit\"\n    [disabled]=\"form()?.invalid\"\n    mat-flat-button\n    class=\"mat-primary\"\n  >\n    <mat-icon>check_circle</mat-icon>\n    save\n  </button>\n  }\n</div>\n}\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CloseSaveButtonsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CloseSaveButtonsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cadmus-close-save-buttons', imports: [MatButton, MatIcon], template: "@if (form()) {\r\n<div class=\"form-row\">\r\n  <button type=\"button\" mat-flat-button class=\"mat-warn\" (click)=\"close()\">\r\n    <mat-icon>cancel</mat-icon>\r\n    close\r\n  </button>\r\n  @if (!noSave()) {\r\n  <button\r\n    type=\"submit\"\r\n    [disabled]=\"form()?.invalid\"\r\n    mat-flat-button\r\n    class=\"mat-primary\"\r\n  >\r\n    <mat-icon>check_circle</mat-icon>\r\n    save\r\n  </button>\r\n  }\r\n</div>\r\n}\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"] }]
+            args: [{ selector: 'cadmus-close-save-buttons', imports: [MatButton, MatIcon], template: "@if (form()) {\n<div class=\"form-row\">\n  <button type=\"button\" mat-flat-button class=\"mat-warn\" (click)=\"close()\">\n    <mat-icon>cancel</mat-icon>\n    close\n  </button>\n  @if (!noSave()) {\n  <button\n    type=\"submit\"\n    [disabled]=\"form()?.invalid\"\n    mat-flat-button\n    class=\"mat-primary\"\n  >\n    <mat-icon>check_circle</mat-icon>\n    save\n  </button>\n  }\n</div>\n}\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"] }]
         }] });
 
 /**
@@ -56,7 +64,7 @@ class DecoratedTokenTextComponent {
      * A selected token-based location.
      */
     selectedLocation = input(...(ngDevMode ? [undefined, { debugName: "selectedLocation" }] : []));
-    text; // rendered HTML text
+    text = signal(undefined, ...(ngDevMode ? [{ debugName: "text" }] : [])); // rendered HTML text
     constructor(_textLayerService) {
         this._textLayerService = _textLayerService;
         effect(() => {
@@ -67,14 +75,14 @@ class DecoratedTokenTextComponent {
         this.decorate(this.baseText(), this.locations(), this.selectedLocation());
     }
     decorate(text, locations, selectedLocation) {
-        this.text = this._textLayerService.render(text, locations, selectedLocation);
+        this.text.set(this._textLayerService.render(text, locations, selectedLocation));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: DecoratedTokenTextComponent, deps: [{ token: i1.TextLayerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.0", type: DecoratedTokenTextComponent, isStandalone: true, selector: "cadmus-decorated-token-text", inputs: { baseText: { classPropertyName: "baseText", publicName: "baseText", isSignal: true, isRequired: false, transformFunction: null }, locations: { classPropertyName: "locations", publicName: "locations", isSignal: true, isRequired: false, transformFunction: null }, selectedLocation: { classPropertyName: "selectedLocation", publicName: "selectedLocation", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_textElement", first: true, predicate: ["textElem"], descendants: true }], ngImport: i0, template: "<div [innerHtml]=\"text | safeHtml : 'html'\" id=\"text\" #textElem></div>\r\n", styles: [":host ::ng-deep div#text{counter-reset:text-y-counter}:host ::ng-deep div#text p:before{content:counter(text-y-counter);counter-increment:text-y-counter;margin-right:6px;color:#a0a0a0}:host ::ng-deep span.fr{background-color:#ff0;border:1px solid silver;border-radius:6px;padding:0 4px}:host ::ng-deep span.fr-sel{background-color:orange;font-weight:700;border:1px solid #404040}\n"], dependencies: [{ kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DecoratedTokenTextComponent, deps: [{ token: i1.TextLayerService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: DecoratedTokenTextComponent, isStandalone: true, selector: "cadmus-decorated-token-text", inputs: { baseText: { classPropertyName: "baseText", publicName: "baseText", isSignal: true, isRequired: false, transformFunction: null }, locations: { classPropertyName: "locations", publicName: "locations", isSignal: true, isRequired: false, transformFunction: null }, selectedLocation: { classPropertyName: "selectedLocation", publicName: "selectedLocation", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_textElement", first: true, predicate: ["textElem"], descendants: true }], ngImport: i0, template: "<div [innerHtml]=\"text() | safeHtml : 'html'\" id=\"text\" #textElem></div>\r\n", styles: [":host ::ng-deep div#text{counter-reset:text-y-counter}:host ::ng-deep div#text p:before{content:counter(text-y-counter);counter-increment:text-y-counter;margin-right:6px;color:#a0a0a0}:host ::ng-deep span.fr{background-color:#ff0;border:1px solid silver;border-radius:6px;padding:0 4px}:host ::ng-deep span.fr-sel{background-color:orange;font-weight:700;border:1px solid #404040}\n"], dependencies: [{ kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: DecoratedTokenTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DecoratedTokenTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cadmus-decorated-token-text', imports: [SafeHtmlPipe], template: "<div [innerHtml]=\"text | safeHtml : 'html'\" id=\"text\" #textElem></div>\r\n", styles: [":host ::ng-deep div#text{counter-reset:text-y-counter}:host ::ng-deep div#text p:before{content:counter(text-y-counter);counter-increment:text-y-counter;margin-right:6px;color:#a0a0a0}:host ::ng-deep span.fr{background-color:#ff0;border:1px solid silver;border-radius:6px;padding:0 4px}:host ::ng-deep span.fr-sel{background-color:orange;font-weight:700;border:1px solid #404040}\n"] }]
+            args: [{ selector: 'cadmus-decorated-token-text', imports: [SafeHtmlPipe], template: "<div [innerHtml]=\"text() | safeHtml : 'html'\" id=\"text\" #textElem></div>\r\n", styles: [":host ::ng-deep div#text{counter-reset:text-y-counter}:host ::ng-deep div#text p:before{content:counter(text-y-counter);counter-increment:text-y-counter;margin-right:6px;color:#a0a0a0}:host ::ng-deep span.fr{background-color:#ff0;border:1px solid silver;border-radius:6px;padding:0 4px}:host ::ng-deep span.fr-sel{background-color:orange;font-weight:700;border:1px solid #404040}\n"] }]
         }], ctorParameters: () => [{ type: i1.TextLayerService }], propDecorators: { _textElement: [{
                 type: ViewChild,
                 args: ['textElem']
@@ -82,12 +90,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
 
 class ErrorListComponent {
     errors = input(...(ngDevMode ? [undefined, { debugName: "errors" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ErrorListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", type: ErrorListComponent, isStandalone: true, selector: "cadmus-error-list", inputs: { errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (errors()?.length) {\r\n  <ul>\r\n    @for (error of errors(); track error) {\r\n      <li class=\"error\">{{error}}</li>\r\n    }\r\n  </ul>\r\n}\r\n", styles: [".error{color:red}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ErrorListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ErrorListComponent, isStandalone: true, selector: "cadmus-error-list", inputs: { errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (errors()?.length) {\n  <ul>\n    @for (error of errors(); track error) {\n      <li class=\"error\">{{error}}</li>\n    }\n  </ul>\n}\n", styles: [".error{color:red}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ErrorListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ErrorListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cadmus-error-list', template: "@if (errors()?.length) {\r\n  <ul>\r\n    @for (error of errors(); track error) {\r\n      <li class=\"error\">{{error}}</li>\r\n    }\r\n  </ul>\r\n}\r\n", styles: [".error{color:red}\n"] }]
+            args: [{ selector: 'cadmus-error-list', template: "@if (errors()?.length) {\n  <ul>\n    @for (error of errors(); track error) {\n      <li class=\"error\">{{error}}</li>\n    }\n  </ul>\n}\n", styles: [".error{color:red}\n"] }]
         }] });
 
 /**
@@ -233,10 +241,10 @@ class ColorService {
         const rgb = this.hslToRgb(h, s, l);
         return this.rgbToString(rgb.r, rgb.g, rgb.b);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ColorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ColorService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColorService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ColorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColorService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -247,9 +255,9 @@ class FacetBadgeComponent {
     _colorService;
     _facetColors;
     _facetTips;
-    color;
-    contrastColor;
-    tip;
+    color = signal('transparent', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    contrastColor = signal('black', ...(ngDevMode ? [{ debugName: "contrastColor" }] : []));
+    tip = signal(undefined, ...(ngDevMode ? [{ debugName: "tip" }] : []));
     /**
      * The facet data.
      */
@@ -260,8 +268,6 @@ class FacetBadgeComponent {
         this._colorService = _colorService;
         this._facetColors = {};
         this._facetTips = {};
-        this.color = 'transparent';
-        this.contrastColor = 'black';
         effect(() => {
             this.updateBadge(this.data());
         });
@@ -315,16 +321,16 @@ class FacetBadgeComponent {
     updateBadge(data) {
         this._facetColors = {};
         this._facetTips = {};
-        this.color = this.getFacetColor(data?.facetId || '');
-        this.contrastColor = this._colorService.getContrastColor(this.color);
-        this.tip = this.getFacetTip(data?.facetId || '') ?? undefined;
+        this.color.set(this.getFacetColor(data?.facetId || ''));
+        this.contrastColor.set(this._colorService.getContrastColor(this.color()));
+        this.tip.set(this.getFacetTip(data?.facetId || '') ?? undefined);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: FacetBadgeComponent, deps: [{ token: ColorService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.0", type: FacetBadgeComponent, isStandalone: true, selector: "cadmus-facet-badge", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span\r\n  class=\"model-type\"\r\n  [style.background-color]=\"color\"\r\n  [style.color]=\"contrastColor\"\r\n  matTooltip=\"{{ tip }}\"\r\n  >{{ data().facetId }}\r\n</span>\r\n", styles: ["span.model-type{padding:4px;border-radius:6px}\n"], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FacetBadgeComponent, deps: [{ token: ColorService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: FacetBadgeComponent, isStandalone: true, selector: "cadmus-facet-badge", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span\r\n  class=\"model-type\"\r\n  [style.background-color]=\"color()\"\r\n  [style.color]=\"contrastColor()\"\r\n  matTooltip=\"{{ tip() }}\"\r\n  >{{ data().facetId }}\r\n</span>\r\n", styles: ["span.model-type{padding:4px;border-radius:6px}\n"], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: FacetBadgeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FacetBadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cadmus-facet-badge', imports: [MatTooltip], template: "<span\r\n  class=\"model-type\"\r\n  [style.background-color]=\"color\"\r\n  [style.color]=\"contrastColor\"\r\n  matTooltip=\"{{ tip }}\"\r\n  >{{ data().facetId }}\r\n</span>\r\n", styles: ["span.model-type{padding:4px;border-radius:6px}\n"] }]
+            args: [{ selector: 'cadmus-facet-badge', imports: [MatTooltip], template: "<span\r\n  class=\"model-type\"\r\n  [style.background-color]=\"color()\"\r\n  [style.color]=\"contrastColor()\"\r\n  matTooltip=\"{{ tip() }}\"\r\n  >{{ data().facetId }}\r\n</span>\r\n", styles: ["span.model-type{padding:4px;border-radius:6px}\n"] }]
         }], ctorParameters: () => [{ type: ColorService }] });
 
 /**
@@ -332,8 +338,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
  * with the flag's color key.
  */
 class FlagsBadgeComponent {
-    badgeFlags = [];
     data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
+    badgeFlags = signal([], ...(ngDevMode ? [{ debugName: "badgeFlags" }] : []));
     constructor() {
         effect(() => {
             this.updateBadge(this.data());
@@ -343,17 +349,17 @@ class FlagsBadgeComponent {
         if (!data) {
             return;
         }
-        this.badgeFlags = data.definitions.filter((def) => {
+        this.badgeFlags.set(data.definitions.filter((def) => {
             // tslint:disable-next-line: no-bitwise
             return def.id & data.flags;
-        });
+        }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: FlagsBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", type: FlagsBadgeComponent, isStandalone: true, selector: "cadmus-flags-badge", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div>\r\n  @for (def of badgeFlags; track def.id) {\r\n  <span\r\n    class=\"badge-flag\"\r\n    [style.color]=\"'#' + def.colorKey\"\r\n    [matTooltip]=\"def.label\"\r\n  >\r\n    @if (def.isAdmin) { &#x25c6; } @else { &#x2b24; }\r\n  </span>\r\n  }\r\n</div>\r\n", styles: ["span.badge-flag{font-size:1rem;cursor:default}\n"], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FlagsBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: FlagsBadgeComponent, isStandalone: true, selector: "cadmus-flags-badge", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div>\r\n  @for (def of badgeFlags(); track def.id) {\r\n  <span\r\n    class=\"badge-flag\"\r\n    [style.color]=\"'#' + def.colorKey\"\r\n    [matTooltip]=\"def.label\"\r\n  >\r\n    @if (def.isAdmin) { &#x25c6; } @else { &#x2b24; }\r\n  </span>\r\n  }\r\n</div>\r\n", styles: ["span.badge-flag{font-size:1rem;cursor:default}\n"], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: FlagsBadgeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FlagsBadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cadmus-flags-badge', imports: [MatTooltip], template: "<div>\r\n  @for (def of badgeFlags; track def.id) {\r\n  <span\r\n    class=\"badge-flag\"\r\n    [style.color]=\"'#' + def.colorKey\"\r\n    [matTooltip]=\"def.label\"\r\n  >\r\n    @if (def.isAdmin) { &#x25c6; } @else { &#x2b24; }\r\n  </span>\r\n  }\r\n</div>\r\n", styles: ["span.badge-flag{font-size:1rem;cursor:default}\n"] }]
+            args: [{ selector: 'cadmus-flags-badge', imports: [MatTooltip], template: "<div>\r\n  @for (def of badgeFlags(); track def.id) {\r\n  <span\r\n    class=\"badge-flag\"\r\n    [style.color]=\"'#' + def.colorKey\"\r\n    [matTooltip]=\"def.label\"\r\n  >\r\n    @if (def.isAdmin) { &#x25c6; } @else { &#x2b24; }\r\n  </span>\r\n  }\r\n</div>\r\n", styles: ["span.badge-flag{font-size:1rem;cursor:default}\n"] }]
         }], ctorParameters: () => [] });
 
 class LayerHintsComponent {
@@ -381,9 +387,9 @@ class LayerHintsComponent {
         });
     }
     updateChecks(hints) {
-        this.checks.controls = [];
+        this.checks.clear();
         for (let i = 0; i < hints.length; i++) {
-            this.checks.push(this._formBuilder.control(false));
+            this.checks.push(this._formBuilder.control(false, { nonNullable: true }));
         }
     }
     emitRequestEdit(hint) {
@@ -419,20 +425,19 @@ class LayerHintsComponent {
             .subscribe((ok) => {
             if (ok) {
                 const patches = [];
-                for (let i = 0; i < this.checks.controls.length; i++) {
-                    const n = this.checks.controls[i].value;
-                    if (n) {
-                        patches.push(this.hints()[n - 1].patchOperation);
+                for (let i = 0; i < this.checks.length; i++) {
+                    if (this.checks.at(i).value) {
+                        patches.push(this.hints()[i].patchOperation);
                     }
                 }
                 this.requestPatch.emit(patches);
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: LayerHintsComponent, deps: [{ token: i1$1.FormBuilder }, { token: i2.DialogService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", type: LayerHintsComponent, isStandalone: true, selector: "cadmus-layer-hints", inputs: { hints: { classPropertyName: "hints", publicName: "hints", isSignal: true, isRequired: false, transformFunction: null }, targetLocation: { classPropertyName: "targetLocation", publicName: "targetLocation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { requestEdit: "requestEdit", requestDelete: "requestDelete", requestMove: "requestMove", requestPatch: "requestPatch" }, ngImport: i0, template: "@if (hints().length) {\r\n<form [formGroup]=\"form\" (submit)=\"emitRequestPatch()\">\r\n  <table class=\"patches\">\r\n    <thead>\r\n      <tr>\r\n        <th></th>\r\n        <th>location</th>\r\n        <th>description</th>\r\n        <th>patch</th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (hint of hints(); track hint; let i = $index) {\r\n      <tr>\r\n        @if (!readonly()) {\r\n        <td>\r\n          <button\r\n            type=\"button\"\r\n            mat-icon-button\r\n            matTooltip=\"Edit this fragment\"\r\n            [disabled]=\"disabled()\"\r\n          >\r\n            <mat-icon>edit</mat-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            mat-icon-button\r\n            matTooltip=\"Move this fragment to {{ targetLocation() }}\"\r\n            [disabled]=\"\r\n              disabled() || !targetLocation() || targetLocation() === hint.location\r\n            \"\r\n            (click)=\"emitRequestMove(hint)\"\r\n          >\r\n            <mat-icon>arrow_forward</mat-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            mat-icon-button\r\n            matTooltip=\"Delete this fragment\"\r\n            [disabled]=\"disabled()\"\r\n            (click)=\"emitRequestDelete(hint)\"\r\n          >\r\n            <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n          </button>\r\n        </td>\r\n        }\r\n        <td>{{ hint.location }}</td>\r\n        <td>{{ hint.description }}</td>\r\n        <td>\r\n          @if (hint.patchOperation) {\r\n          <mat-checkbox\r\n            matTooltip=\"Apply this patch\"\r\n            [disabled]=\"disabled()\"\r\n            [value]=\"(i + 1).toString()\"\r\n          >\r\n            {{ hint.patchOperation }}\r\n          </mat-checkbox>\r\n          }\r\n        </td>\r\n      </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n  @if (targetLocation()) {\r\n  <div>move target: {{ targetLocation() }}</div>\r\n  }\r\n  <button\r\n    type=\"submit\"\r\n    mat-flat-button\r\n    [disabled]=\"readonly() || disabled() || form.invalid\"\r\n  >\r\n    apply patches\r\n  </button>\r\n</form>\r\n}\r\n", styles: ["table.patches th{font-weight:400;color:#bdbdbd}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: LayerHintsComponent, deps: [{ token: i1$1.FormBuilder }, { token: i2.DialogService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: LayerHintsComponent, isStandalone: true, selector: "cadmus-layer-hints", inputs: { hints: { classPropertyName: "hints", publicName: "hints", isSignal: true, isRequired: false, transformFunction: null }, targetLocation: { classPropertyName: "targetLocation", publicName: "targetLocation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { requestEdit: "requestEdit", requestDelete: "requestDelete", requestMove: "requestMove", requestPatch: "requestPatch" }, ngImport: i0, template: "@if (hints().length) {\r\n<form [formGroup]=\"form\" (submit)=\"emitRequestPatch()\">\r\n  <table class=\"patches\">\r\n    <thead>\r\n      <tr>\r\n        <th></th>\r\n        <th>location</th>\r\n        <th>description</th>\r\n        <th>patch</th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (hint of hints(); track hint; let i = $index) {\r\n      <tr>\r\n        @if (!readonly()) {\r\n        <td>\r\n          <button\r\n            type=\"button\"\r\n            mat-icon-button\r\n            matTooltip=\"Edit this fragment\"\r\n            [disabled]=\"disabled()\"\r\n          >\r\n            <mat-icon>edit</mat-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            mat-icon-button\r\n            matTooltip=\"Move this fragment to {{ targetLocation() }}\"\r\n            [disabled]=\"\r\n              disabled() ||\r\n              !targetLocation() ||\r\n              targetLocation() === hint.location\r\n            \"\r\n            (click)=\"emitRequestMove(hint)\"\r\n          >\r\n            <mat-icon>arrow_forward</mat-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            mat-icon-button\r\n            matTooltip=\"Delete this fragment\"\r\n            [disabled]=\"disabled()\"\r\n            (click)=\"emitRequestDelete(hint)\"\r\n          >\r\n            <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n          </button>\r\n        </td>\r\n        }\r\n        <td>{{ hint.location }}</td>\r\n        <td>{{ hint.description }}</td>\r\n        <td>\r\n          @if (hint.patchOperation) {\r\n          <mat-checkbox\r\n            matTooltip=\"Apply this patch\"\r\n            [formControl]=\"checks.at(i)\"\r\n          >\r\n            {{ hint.patchOperation }}\r\n          </mat-checkbox>\r\n          }\r\n        </td>\r\n      </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n  @if (targetLocation()) {\r\n  <div>move target: {{ targetLocation() }}</div>\r\n  }\r\n  <button\r\n    type=\"submit\"\r\n    mat-flat-button\r\n    [disabled]=\"readonly() || disabled() || form.invalid\"\r\n  >\r\n    apply patches\r\n  </button>\r\n</form>\r\n}\r\n", styles: ["table.patches th{font-weight:400;color:#bdbdbd}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: LayerHintsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: LayerHintsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cadmus-layer-hints', imports: [
                         FormsModule,
@@ -442,7 +447,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
                         MatIcon,
                         MatCheckbox,
                         MatButton,
-                    ], template: "@if (hints().length) {\r\n<form [formGroup]=\"form\" (submit)=\"emitRequestPatch()\">\r\n  <table class=\"patches\">\r\n    <thead>\r\n      <tr>\r\n        <th></th>\r\n        <th>location</th>\r\n        <th>description</th>\r\n        <th>patch</th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (hint of hints(); track hint; let i = $index) {\r\n      <tr>\r\n        @if (!readonly()) {\r\n        <td>\r\n          <button\r\n            type=\"button\"\r\n            mat-icon-button\r\n            matTooltip=\"Edit this fragment\"\r\n            [disabled]=\"disabled()\"\r\n          >\r\n            <mat-icon>edit</mat-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            mat-icon-button\r\n            matTooltip=\"Move this fragment to {{ targetLocation() }}\"\r\n            [disabled]=\"\r\n              disabled() || !targetLocation() || targetLocation() === hint.location\r\n            \"\r\n            (click)=\"emitRequestMove(hint)\"\r\n          >\r\n            <mat-icon>arrow_forward</mat-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            mat-icon-button\r\n            matTooltip=\"Delete this fragment\"\r\n            [disabled]=\"disabled()\"\r\n            (click)=\"emitRequestDelete(hint)\"\r\n          >\r\n            <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n          </button>\r\n        </td>\r\n        }\r\n        <td>{{ hint.location }}</td>\r\n        <td>{{ hint.description }}</td>\r\n        <td>\r\n          @if (hint.patchOperation) {\r\n          <mat-checkbox\r\n            matTooltip=\"Apply this patch\"\r\n            [disabled]=\"disabled()\"\r\n            [value]=\"(i + 1).toString()\"\r\n          >\r\n            {{ hint.patchOperation }}\r\n          </mat-checkbox>\r\n          }\r\n        </td>\r\n      </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n  @if (targetLocation()) {\r\n  <div>move target: {{ targetLocation() }}</div>\r\n  }\r\n  <button\r\n    type=\"submit\"\r\n    mat-flat-button\r\n    [disabled]=\"readonly() || disabled() || form.invalid\"\r\n  >\r\n    apply patches\r\n  </button>\r\n</form>\r\n}\r\n", styles: ["table.patches th{font-weight:400;color:#bdbdbd}\n"] }]
+                    ], template: "@if (hints().length) {\r\n<form [formGroup]=\"form\" (submit)=\"emitRequestPatch()\">\r\n  <table class=\"patches\">\r\n    <thead>\r\n      <tr>\r\n        <th></th>\r\n        <th>location</th>\r\n        <th>description</th>\r\n        <th>patch</th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (hint of hints(); track hint; let i = $index) {\r\n      <tr>\r\n        @if (!readonly()) {\r\n        <td>\r\n          <button\r\n            type=\"button\"\r\n            mat-icon-button\r\n            matTooltip=\"Edit this fragment\"\r\n            [disabled]=\"disabled()\"\r\n          >\r\n            <mat-icon>edit</mat-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            mat-icon-button\r\n            matTooltip=\"Move this fragment to {{ targetLocation() }}\"\r\n            [disabled]=\"\r\n              disabled() ||\r\n              !targetLocation() ||\r\n              targetLocation() === hint.location\r\n            \"\r\n            (click)=\"emitRequestMove(hint)\"\r\n          >\r\n            <mat-icon>arrow_forward</mat-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            mat-icon-button\r\n            matTooltip=\"Delete this fragment\"\r\n            [disabled]=\"disabled()\"\r\n            (click)=\"emitRequestDelete(hint)\"\r\n          >\r\n            <mat-icon class=\"mat-warn\">delete</mat-icon>\r\n          </button>\r\n        </td>\r\n        }\r\n        <td>{{ hint.location }}</td>\r\n        <td>{{ hint.description }}</td>\r\n        <td>\r\n          @if (hint.patchOperation) {\r\n          <mat-checkbox\r\n            matTooltip=\"Apply this patch\"\r\n            [formControl]=\"checks.at(i)\"\r\n          >\r\n            {{ hint.patchOperation }}\r\n          </mat-checkbox>\r\n          }\r\n        </td>\r\n      </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n  @if (targetLocation()) {\r\n  <div>move target: {{ targetLocation() }}</div>\r\n  }\r\n  <button\r\n    type=\"submit\"\r\n    mat-flat-button\r\n    [disabled]=\"readonly() || disabled() || form.invalid\"\r\n  >\r\n    apply patches\r\n  </button>\r\n</form>\r\n}\r\n", styles: ["table.patches th{font-weight:400;color:#bdbdbd}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: i2.DialogService }] });
 
 /**
@@ -488,7 +493,7 @@ class LookupPinComponent {
     form;
     lookup;
     entries$;
-    entry;
+    entry = signal(undefined, ...(ngDevMode ? [{ debugName: "entry" }] : []));
     constructor(formBuilder, _itemService, _lookupDefs) {
         this._itemService = _itemService;
         this._lookupDefs = _lookupDefs;
@@ -555,7 +560,7 @@ class LookupPinComponent {
         });
     }
     clear() {
-        this.entry = undefined;
+        this.entry.set(undefined);
         this.lookup.setValue(null);
         this.entryChange.emit(null);
     }
@@ -563,16 +568,16 @@ class LookupPinComponent {
         return entry?.value;
     }
     pickEntry(entry) {
-        this.entry = entry;
+        this.entry.set(entry);
         this.entryChange.emit(entry);
         if (this.resetOnPick()) {
             this.clear();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: LookupPinComponent, deps: [{ token: i1$1.UntypedFormBuilder }, { token: i1$2.ItemService }, { token: 'indexLookupDefinitions' }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", type: LookupPinComponent, isStandalone: true, selector: "cadmus-lookup-pin", inputs: { initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, resetOnPick: { classPropertyName: "resetOnPick", publicName: "resetOnPick", isSignal: true, isRequired: false, transformFunction: null }, lookupKey: { classPropertyName: "lookupKey", publicName: "lookupKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { entryChange: "entryChange" }, ngImport: i0, template: "<form [formGroup]=\"form\">\r\n  <mat-autocomplete #lookupAuto=\"matAutocomplete\" [displayWith]=\"entryToName\">\r\n    @for (entry of entries$ | async; track entry) {\r\n    <mat-option [value]=\"entry\" (onSelectionChange)=\"pickEntry(entry)\">\r\n      {{ entry?.value }}\r\n    </mat-option>\r\n    }\r\n  </mat-autocomplete>\r\n\r\n  <mat-form-field>\r\n    <input\r\n      matInput\r\n      type=\"text\"\r\n      [placeholder]=\"label()\"\r\n      [formControl]=\"lookup\"\r\n      [matAutocomplete]=\"lookupAuto\"\r\n    />\r\n  </mat-form-field>\r\n  <button\r\n    type=\"button\"\r\n    mat-icon-button\r\n    (click)=\"clear()\"\r\n    [disabled]=\"!entry\"\r\n    matTooltip=\"Clear\"\r\n  >\r\n    <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n  </button>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: LookupPinComponent, deps: [{ token: i1$1.UntypedFormBuilder }, { token: i1$2.ItemService }, { token: 'indexLookupDefinitions' }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: LookupPinComponent, isStandalone: true, selector: "cadmus-lookup-pin", inputs: { initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, resetOnPick: { classPropertyName: "resetOnPick", publicName: "resetOnPick", isSignal: true, isRequired: false, transformFunction: null }, lookupKey: { classPropertyName: "lookupKey", publicName: "lookupKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { entryChange: "entryChange" }, ngImport: i0, template: "<form [formGroup]=\"form\">\r\n  <mat-autocomplete #lookupAuto=\"matAutocomplete\" [displayWith]=\"entryToName\">\r\n    @for (entry of entries$ | async; track entry) {\r\n    <mat-option [value]=\"entry\" (onSelectionChange)=\"pickEntry(entry)\">\r\n      {{ entry?.value }}\r\n    </mat-option>\r\n    }\r\n  </mat-autocomplete>\r\n\r\n  <mat-form-field>\r\n    <input\r\n      matInput\r\n      type=\"text\"\r\n      [placeholder]=\"label()\"\r\n      [formControl]=\"lookup\"\r\n      [matAutocomplete]=\"lookupAuto\"\r\n    />\r\n  </mat-form-field>\r\n  <button\r\n    type=\"button\"\r\n    mat-icon-button\r\n    (click)=\"clear()\"\r\n    [disabled]=\"!entry()\"\r\n    matTooltip=\"Clear\"\r\n  >\r\n    <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n  </button>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: LookupPinComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: LookupPinComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cadmus-lookup-pin', imports: [
                         FormsModule,
@@ -586,12 +591,393 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
                         MatTooltip,
                         MatIcon,
                         AsyncPipe,
-                    ], template: "<form [formGroup]=\"form\">\r\n  <mat-autocomplete #lookupAuto=\"matAutocomplete\" [displayWith]=\"entryToName\">\r\n    @for (entry of entries$ | async; track entry) {\r\n    <mat-option [value]=\"entry\" (onSelectionChange)=\"pickEntry(entry)\">\r\n      {{ entry?.value }}\r\n    </mat-option>\r\n    }\r\n  </mat-autocomplete>\r\n\r\n  <mat-form-field>\r\n    <input\r\n      matInput\r\n      type=\"text\"\r\n      [placeholder]=\"label()\"\r\n      [formControl]=\"lookup\"\r\n      [matAutocomplete]=\"lookupAuto\"\r\n    />\r\n  </mat-form-field>\r\n  <button\r\n    type=\"button\"\r\n    mat-icon-button\r\n    (click)=\"clear()\"\r\n    [disabled]=\"!entry\"\r\n    matTooltip=\"Clear\"\r\n  >\r\n    <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n  </button>\r\n</form>\r\n" }]
+                    ], template: "<form [formGroup]=\"form\">\r\n  <mat-autocomplete #lookupAuto=\"matAutocomplete\" [displayWith]=\"entryToName\">\r\n    @for (entry of entries$ | async; track entry) {\r\n    <mat-option [value]=\"entry\" (onSelectionChange)=\"pickEntry(entry)\">\r\n      {{ entry?.value }}\r\n    </mat-option>\r\n    }\r\n  </mat-autocomplete>\r\n\r\n  <mat-form-field>\r\n    <input\r\n      matInput\r\n      type=\"text\"\r\n      [placeholder]=\"label()\"\r\n      [formControl]=\"lookup\"\r\n      [matAutocomplete]=\"lookupAuto\"\r\n    />\r\n  </mat-form-field>\r\n  <button\r\n    type=\"button\"\r\n    mat-icon-button\r\n    (click)=\"clear()\"\r\n    [disabled]=\"!entry()\"\r\n    matTooltip=\"Clear\"\r\n  >\r\n    <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n  </button>\r\n</form>\r\n" }]
         }], ctorParameters: () => [{ type: i1$1.UntypedFormBuilder }, { type: i1$2.ItemService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['indexLookupDefinitions']
                 }] }] });
 
+/**
+ * A label rendering function which removes from a label
+ * all the characters past the last colon, trimming the result.
+ * This is a typical rendering when dealing with hierarchical
+ * thesaurus entries, e.g. "furniture: table: color", where
+ * we can shorten the label to just "color", as "furniture"
+ * and "table" are its ancestors.
+ */
+const renderLabelFromLastColon = (label) => {
+    if (!label) {
+        return label;
+    }
+    const i = label.lastIndexOf(':');
+    return i > -1 && i + 1 < label.length ? label.substring(i + 1).trim() : label;
+};
+/**
+ * A static paged tree store service for thesaurus entries.
+ * This builds the tree nodes from the thesaurus entries, assuming
+ * that entry IDs are hierarchical and separated by dots (.).
+ */
+class StaticThesPagedTreeStoreService {
+    _renderLabel;
+    _nodes = [];
+    _built = false;
+    _entries;
+    constructor(entries, _renderLabel) {
+        this._renderLabel = _renderLabel;
+        // assign a number to each entry for stable IDs
+        this._entries = entries.map((entry, index) => ({
+            ...entry,
+            n: index + 1,
+        }));
+    }
+    ensureNodes() {
+        // lazily build the nodes only once
+        if (this._built) {
+            return;
+        }
+        // map where key is node.id and value is max x value for that parent
+        // (0 is used for the virtual root)
+        const xMap = new Map();
+        for (const entry of this._entries) {
+            const hasDot = entry.id.includes('.');
+            const keyParts = entry.id.split('.');
+            // create the node
+            const node = {
+                id: entry.n,
+                label: hasDot && this._renderLabel
+                    ? this._renderLabel(entry.value)
+                    : entry.value,
+                key: entry.id,
+                value: entry.value,
+                paging: { pageNumber: 0, pageCount: 0, total: 0 },
+                y: hasDot ? keyParts.length : 1,
+                x: 0, // will be set later
+                parentId: undefined, // will be set later
+                hasChildren: false, // will be set later
+            };
+            // if it has a dot, find its parent and set parentId
+            if (hasDot) {
+                // build the parent key
+                const parentKey = keyParts.slice(0, keyParts.length - 1).join('.');
+                // find the parent node with that key
+                const parentNode = this._nodes.find((n) => n.key === parentKey);
+                // if found, set parentId and x in child and hasChildren in parent
+                if (parentNode) {
+                    node.parentId = parentNode.id;
+                    parentNode.hasChildren = true;
+                    if (xMap.has(parentNode.id)) {
+                        xMap.set(parentNode.id, xMap.get(parentNode.id) + 1);
+                    }
+                    else {
+                        xMap.set(parentNode.id, 1);
+                    }
+                    node.x = xMap.get(parentNode.id);
+                }
+                else {
+                    // parent not found, treat as root
+                    if (xMap.has(0)) {
+                        xMap.set(0, xMap.get(0) + 1);
+                    }
+                    else {
+                        xMap.set(0, 1);
+                    }
+                    node.x = xMap.get(0);
+                }
+            }
+            else {
+                // else it's a root node
+                if (xMap.has(0)) {
+                    xMap.set(0, xMap.get(0) + 1);
+                }
+                else {
+                    xMap.set(0, 1);
+                }
+                node.x = xMap.get(0);
+            }
+            this._nodes.push(node);
+        }
+        this._built = true;
+    }
+    /**
+     * Get the specified page of nodes.
+     * @param filter The filter.
+     * @param pageNumber The page number.
+     * @param pageSize The page size.
+     * @param hasMockRoot Whether the root node is a mock node. Not used here.
+     */
+    getNodes(filter, pageNumber, pageSize, hasMockRoot) {
+        this.ensureNodes();
+        // apply filtering
+        let nodes = this._nodes.filter((n) => {
+            if (filter.parentId !== undefined && filter.parentId !== null) {
+                if (n.parentId !== filter.parentId) {
+                    return false;
+                }
+            }
+            else {
+                if (n.parentId) {
+                    return false;
+                }
+            }
+            if (filter.label) {
+                const filterValue = filter.label.toLowerCase();
+                if (!n.label.toLowerCase().includes(filterValue)) {
+                    return false;
+                }
+            }
+            return true;
+        });
+        // apply paging
+        const startIndex = (pageNumber - 1) * pageSize;
+        const endIndex = startIndex + pageSize;
+        const pagedNodes = nodes.slice(startIndex, endIndex);
+        // page and return
+        const paged = nodes.slice((pageNumber - 1) * pageSize, pageNumber * pageSize);
+        return of({
+            items: paged,
+            pageNumber: pageNumber,
+            pageSize: pageSize,
+            pageCount: Math.ceil(nodes.length / pageSize),
+            total: nodes.length,
+        });
+    }
+}
+
+/**
+ * A filter to be used for thesaurus paged tree browsers.
+ */
+class ThesPagedTreeFilterComponent {
+    dialogRef = inject(MatDialogRef, {
+        optional: true,
+    });
+    data = inject(MAT_DIALOG_DATA, { optional: true });
+    /**
+     * The filter.
+     */
+    filter = model(...(ngDevMode ? [undefined, { debugName: "filter" }] : []));
+    wrapped = signal(false, ...(ngDevMode ? [{ debugName: "wrapped" }] : []));
+    label;
+    form;
+    constructor() {
+        const formBuilder = inject(FormBuilder);
+        const data = this.data;
+        // form
+        this.label = formBuilder.control(null);
+        this.form = formBuilder.group({
+            label: this.label,
+        });
+        // bind dialog data if any
+        if (this.dialogRef) {
+            this.wrapped.set(true);
+            if (data) {
+                this.filter.set(data.filter);
+            }
+        }
+        else {
+            this.wrapped.set(false);
+        }
+        // update form when filter changes
+        effect(() => {
+            this.updateForm(this.filter());
+        });
+    }
+    ngOnInit() {
+        this.updateForm(this.filter());
+    }
+    updateForm(filter) {
+        if (!filter) {
+            this.form.reset();
+            return;
+        }
+        this.label.setValue(filter.label ?? null);
+        this.form.markAsPristine();
+    }
+    getFilter() {
+        return {
+            label: this.label.value ?? undefined,
+        };
+    }
+    reset() {
+        this.form.reset();
+        this.filter.set(null);
+        this.dialogRef?.close(null);
+    }
+    apply() {
+        this.filter.set(this.getFilter());
+        this.dialogRef?.close(this.filter());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ThesPagedTreeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: ThesPagedTreeFilterComponent, isStandalone: true, selector: "cadmus-thes-paged-tree-filter", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filter: "filterChange" }, ngImport: i0, template: "<form\r\n  [formGroup]=\"form\"\r\n  [style.margin.px]=\"wrapped() ? 16 : 0\"\r\n  (submit)=\"apply()\"\r\n>\r\n  <div class=\"form-row\">\r\n    <!-- label -->\r\n    <mat-form-field>\r\n      <input matInput placeholder=\"label\" [formControl]=\"label\" />\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"form-row\">\r\n    <!-- buttons -->\r\n    <button type=\"button\" mat-icon-button matTooltip=\"Reset\" (click)=\"reset()\">\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"submit\"\r\n      mat-icon-button\r\n      matTooltip=\"Apply\"\r\n      [disabled]=\"form.invalid\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: ["form{margin:16px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.nr{width:6em}fieldset{border:1px solid silver;border-radius:6px;padding:8px 16px;margin:8px 0}legend{color:silver}th{text-align:left;font-weight:400}#tag-selector{width:8em}.tag-chip{border:2px solid transparent;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ThesPagedTreeFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cadmus-thes-paged-tree-filter', imports: [
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatIconModule,
+                        MatTooltipModule,
+                    ], template: "<form\r\n  [formGroup]=\"form\"\r\n  [style.margin.px]=\"wrapped() ? 16 : 0\"\r\n  (submit)=\"apply()\"\r\n>\r\n  <div class=\"form-row\">\r\n    <!-- label -->\r\n    <mat-form-field>\r\n      <input matInput placeholder=\"label\" [formControl]=\"label\" />\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"form-row\">\r\n    <!-- buttons -->\r\n    <button type=\"button\" mat-icon-button matTooltip=\"Reset\" (click)=\"reset()\">\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"submit\"\r\n      mat-icon-button\r\n      matTooltip=\"Apply\"\r\n      [disabled]=\"form.invalid\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: ["form{margin:16px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.nr{width:6em}fieldset{border:1px solid silver;border-radius:6px;padding:8px 16px;margin:8px 0}legend{color:silver}th{text-align:left;font-weight:400}#tag-selector{width:8em}.tag-chip{border:2px solid transparent;border-radius:6px}\n"] }]
+        }], ctorParameters: () => [] });
+
+class ThesPagedTreeBrowserComponent {
+    _dialog = inject(MatDialog);
+    _sub;
+    /**
+     * The service to use to load the nodes.
+     */
+    service = input(new StaticThesPagedTreeStoreService([], renderLabelFromLastColon), ...(ngDevMode ? [{ debugName: "service" }] : []));
+    /**
+     * Emitted when a node is clicked.
+     */
+    nodePick = output();
+    /**
+     * The store instance, built from the service.
+     */
+    store = computed(() => {
+        const service = this.service();
+        const store = new PagedTreeStore(service);
+        this.nodes$ = store.nodes$;
+        this.filter$ = store.filter$;
+        return store;
+    }, ...(ngDevMode ? [{ debugName: "store" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    debug = new FormControl(false, {
+        nonNullable: true,
+    });
+    hideLoc = new FormControl(false, {
+        nonNullable: true,
+    });
+    hideFilter = new FormControl(false, {
+        nonNullable: true,
+    });
+    filter$;
+    nodes$;
+    label = new FormControl(null);
+    form = new FormGroup({
+        label: this.label,
+    });
+    constructor() {
+        const store = this.store();
+        this.nodes$ = store.nodes$;
+        this.filter$ = store.filter$;
+    }
+    ngOnInit() {
+        if (!this.store().getNodes().length) {
+            this.loading.set(true);
+            this.store()
+                .setFilter({})
+                .finally(() => {
+                this.loading.set(false);
+                console.log('nodes loaded', this.store().getNodes());
+            });
+        }
+    }
+    ngOnDestroy() {
+        this._sub?.unsubscribe();
+    }
+    reset() {
+        this.loading.set(true);
+        this.store()
+            .reset()
+            .finally(() => {
+            this.loading.set(false);
+        });
+    }
+    onToggleExpanded(node) {
+        this.loading.set(true);
+        if (node.expanded) {
+            this.store()
+                .collapse(node.id)
+                .finally(() => {
+                this.loading.set(false);
+            });
+        }
+        else {
+            this.store()
+                .expand(node.id)
+                .finally(() => {
+                this.loading.set(false);
+            });
+        }
+    }
+    onPageChangeRequest(request) {
+        this.loading.set(true);
+        this.store()
+            .changePage(request.node.id, request.paging.pageNumber)
+            .finally(() => {
+            this.loading.set(false);
+        });
+    }
+    onFilterChange(filter) {
+        console.log('filter change', filter);
+        this.loading.set(true);
+        this.store()
+            .setFilter(filter || {})
+            .finally(() => {
+            this.loading.set(false);
+        });
+    }
+    onEditFilterRequest(node) {
+        const dialogRef = this._dialog.open(ThesPagedTreeFilterComponent, {
+            data: {
+                filter: node.filter,
+            },
+        });
+        dialogRef.afterClosed().subscribe((filter) => {
+            // undefined = user dismissed without changes
+            if (filter === null) {
+                this.store().setNodeFilter(node.id, null);
+            }
+            else if (filter) {
+                this.store().setNodeFilter(node.id, filter);
+            }
+        });
+    }
+    expandAll() {
+        this.store().expandAll();
+    }
+    collapseAll() {
+        this.store().collapseAll();
+    }
+    clear() {
+        this.store().clear();
+    }
+    onNodeClick(node) {
+        if (!node.hasChildren) {
+            this.nodePick.emit(node);
+        }
+    }
+    findLabels() {
+        if (!this.label.value) {
+            return;
+        }
+        this.store().findLabels(this.label.value);
+    }
+    removeHilites() {
+        this.store().removeHilites();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ThesPagedTreeBrowserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ThesPagedTreeBrowserComponent, isStandalone: true, selector: "cadmus-thes-paged-tree-browser", inputs: { service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodePick: "nodePick" }, ngImport: i0, template: "<div id=\"container\">\r\n  <!-- filters -->\r\n  <div id=\"filters\" class=\"form-row\">\r\n    <form [formGroup]=\"form\" (submit)=\"findLabels()\" class=\"form-row\">\r\n      <mat-form-field>\r\n        <mat-label>label</mat-label>\r\n        <input matInput [formControl]=\"label\" />\r\n        @if ($any(label).errors?.required && (label.dirty || label.touched)) {\r\n        <mat-error>label required</mat-error>\r\n        }\r\n      </mat-form-field>\r\n      <button type=\"submit\" mat-icon-button class=\"mat-primary\">\r\n        <mat-icon>search</mat-icon>\r\n      </button>\r\n      <button type=\"button\" mat-icon-button (click)=\"removeHilites()\">\r\n        <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n      </button>\r\n    </form>\r\n    <fieldset>\r\n      <legend>filter</legend>\r\n      <cadmus-thes-paged-tree-filter\r\n        [filter]=\"filter$ | async\"\r\n        (filterChange)=\"onFilterChange($event)\"\r\n      />\r\n    </fieldset>\r\n  </div>\r\n\r\n  <!-- tree -->\r\n  <div id=\"tree\">\r\n    <!-- progress -->\r\n    @if (loading()) {\r\n    <div>\r\n      <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n    </div>\r\n    }\r\n    <!-- nodes -->\r\n    @if (nodes$ | async; as nodes) {\r\n    <div>\r\n      @for (node of nodes; track node.id; let i = $index) {\r\n      <div class=\"button-row\" [class.hilite]=\"node.hilite\">\r\n        <pdb-browser-tree-node\r\n          [node]=\"node\"\r\n          [debug]=\"debug.value\"\r\n          [paging]=\"\r\n            node.expanded &&\r\n            i + 1 < nodes.length &&\r\n            nodes[i + 1].paging.pageCount > 1\r\n              ? nodes[i + 1].paging\r\n              : undefined\r\n          \"\r\n          [hideFilter]=\"hideFilter.value\"\r\n          [hideLoc]=\"hideLoc.value\"\r\n          (toggleExpandedRequest)=\"onToggleExpanded($any($event))\"\r\n          (changePageRequest)=\"onPageChangeRequest($event)\"\r\n          (editNodeFilterRequest)=\"onEditFilterRequest($any($event))\"\r\n        />\r\n        @if (!node.hasChildren) {\r\n        <button type=\"button\" mat-icon-button (click)=\"onNodeClick(node)\">\r\n          <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n        </button>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n    }\r\n    <div class=\"form-row\">\r\n      <mat-checkbox [formControl]=\"debug\">debug</mat-checkbox>\r\n      <mat-checkbox [formControl]=\"hideFilter\">no filter</mat-checkbox>\r\n      <mat-checkbox [formControl]=\"hideLoc\">no loc.</mat-checkbox>\r\n      <button\r\n        type=\"button\"\r\n        mat-flat-button\r\n        (click)=\"collapseAll()\"\r\n        style=\"margin-left: 24px\"\r\n      >\r\n        collapse\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["form{margin:16px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.nr{width:6em}fieldset{border:1px solid silver;border-radius:6px;padding:8px 16px;margin:8px 0}legend{color:silver}th{text-align:left;font-weight:400}#tag-selector{width:8em}.tag-chip{border:2px solid transparent;border-radius:6px}.button-row{display:flex;align-items:center;flex-wrap:wrap}.button-row *{flex:0 0 auto}.hilite{background-color:#ffffe0;border:2px solid gold;border-radius:6px;padding:2px 4px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: ThesPagedTreeFilterComponent, selector: "cadmus-thes-paged-tree-filter", inputs: ["filter"], outputs: ["filterChange"] }, { kind: "component", type: BrowserTreeNodeComponent, selector: "pdb-browser-tree-node", inputs: ["node", "paging", "debug", "hideLabel", "hideLoc", "hidePaging", "hideFilter", "indentSize", "rangeWidth"], outputs: ["toggleExpandedRequest", "changePageRequest", "editNodeFilterRequest"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ThesPagedTreeBrowserComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cadmus-thes-paged-tree-browser', imports: [
+                        AsyncPipe,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatCheckboxModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatProgressBarModule,
+                        MatTooltipModule,
+                        ThesPagedTreeFilterComponent,
+                        BrowserTreeNodeComponent,
+                    ], template: "<div id=\"container\">\r\n  <!-- filters -->\r\n  <div id=\"filters\" class=\"form-row\">\r\n    <form [formGroup]=\"form\" (submit)=\"findLabels()\" class=\"form-row\">\r\n      <mat-form-field>\r\n        <mat-label>label</mat-label>\r\n        <input matInput [formControl]=\"label\" />\r\n        @if ($any(label).errors?.required && (label.dirty || label.touched)) {\r\n        <mat-error>label required</mat-error>\r\n        }\r\n      </mat-form-field>\r\n      <button type=\"submit\" mat-icon-button class=\"mat-primary\">\r\n        <mat-icon>search</mat-icon>\r\n      </button>\r\n      <button type=\"button\" mat-icon-button (click)=\"removeHilites()\">\r\n        <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n      </button>\r\n    </form>\r\n    <fieldset>\r\n      <legend>filter</legend>\r\n      <cadmus-thes-paged-tree-filter\r\n        [filter]=\"filter$ | async\"\r\n        (filterChange)=\"onFilterChange($event)\"\r\n      />\r\n    </fieldset>\r\n  </div>\r\n\r\n  <!-- tree -->\r\n  <div id=\"tree\">\r\n    <!-- progress -->\r\n    @if (loading()) {\r\n    <div>\r\n      <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n    </div>\r\n    }\r\n    <!-- nodes -->\r\n    @if (nodes$ | async; as nodes) {\r\n    <div>\r\n      @for (node of nodes; track node.id; let i = $index) {\r\n      <div class=\"button-row\" [class.hilite]=\"node.hilite\">\r\n        <pdb-browser-tree-node\r\n          [node]=\"node\"\r\n          [debug]=\"debug.value\"\r\n          [paging]=\"\r\n            node.expanded &&\r\n            i + 1 < nodes.length &&\r\n            nodes[i + 1].paging.pageCount > 1\r\n              ? nodes[i + 1].paging\r\n              : undefined\r\n          \"\r\n          [hideFilter]=\"hideFilter.value\"\r\n          [hideLoc]=\"hideLoc.value\"\r\n          (toggleExpandedRequest)=\"onToggleExpanded($any($event))\"\r\n          (changePageRequest)=\"onPageChangeRequest($event)\"\r\n          (editNodeFilterRequest)=\"onEditFilterRequest($any($event))\"\r\n        />\r\n        @if (!node.hasChildren) {\r\n        <button type=\"button\" mat-icon-button (click)=\"onNodeClick(node)\">\r\n          <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n        </button>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n    }\r\n    <div class=\"form-row\">\r\n      <mat-checkbox [formControl]=\"debug\">debug</mat-checkbox>\r\n      <mat-checkbox [formControl]=\"hideFilter\">no filter</mat-checkbox>\r\n      <mat-checkbox [formControl]=\"hideLoc\">no loc.</mat-checkbox>\r\n      <button\r\n        type=\"button\"\r\n        mat-flat-button\r\n        (click)=\"collapseAll()\"\r\n        style=\"margin-left: 24px\"\r\n      >\r\n        collapse\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["form{margin:16px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.nr{width:6em}fieldset{border:1px solid silver;border-radius:6px;padding:8px 16px;margin:8px 0}legend{color:silver}th{text-align:left;font-weight:400}#tag-selector{width:8em}.tag-chip{border:2px solid transparent;border-radius:6px}.button-row{display:flex;align-items:center;flex-wrap:wrap}.button-row *{flex:0 0 auto}.hilite{background-color:#ffffe0;border:2px solid gold;border-radius:6px;padding:2px 4px}\n"] }]
+        }], ctorParameters: () => [] });
+
 var PartBadgeType;
 (function (PartBadgeType) {
     PartBadgeType[PartBadgeType["partAndRole"] = 0] = "partAndRole";
@@ -636,10 +1022,6 @@ function getPartIdName(typeId, roleId, typeThesaurus, noFallback = false) {
 class PartBadgeComponent {
     _facetService;
     _colorService;
-    typeName;
-    roleName;
-    color;
-    contrastColor;
     /**
      * The badge type: 0=part and role, 1=part only, 2=role only.
      */
@@ -656,11 +1038,13 @@ class PartBadgeComponent {
      * The part type IDs.
      */
     partTypeIds = input(...(ngDevMode ? [undefined, { debugName: "partTypeIds" }] : []));
+    typeName = signal(undefined, ...(ngDevMode ? [{ debugName: "typeName" }] : []));
+    roleName = signal(undefined, ...(ngDevMode ? [{ debugName: "roleName" }] : []));
+    color = signal('transparent', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    contrastColor = signal('black', ...(ngDevMode ? [{ debugName: "contrastColor" }] : []));
     constructor(_facetService, _colorService) {
         this._facetService = _facetService;
         this._colorService = _colorService;
-        this.color = 'transparent';
-        this.contrastColor = 'black';
         effect(() => {
             this.updateBadge(this.partTypeIds(), this.typeThesaurus(), this.facetDefinition());
         });
@@ -697,40 +1081,25 @@ class PartBadgeComponent {
     }
     updateBadge(partTypeIds, typeThesaurus, facetDefinition) {
         if (partTypeIds) {
-            this.color = this.getPartColor(partTypeIds.typeId, partTypeIds.roleId, facetDefinition);
-            this.typeName = getPartIdName(partTypeIds.typeId, partTypeIds.roleId, typeThesaurus);
-            this.roleName = this.getRoleIdName(partTypeIds.roleId, typeThesaurus);
+            this.color.set(this.getPartColor(partTypeIds.typeId, partTypeIds.roleId, facetDefinition));
+            this.typeName.set(getPartIdName(partTypeIds.typeId, partTypeIds.roleId, typeThesaurus));
+            this.roleName.set(this.getRoleIdName(partTypeIds.roleId, typeThesaurus));
         }
         else {
-            this.color = 'transparent';
-            this.typeName = undefined;
-            this.roleName = undefined;
+            this.color.set('transparent');
+            this.typeName.set(undefined);
+            this.roleName.set(undefined);
         }
-        this.contrastColor = this._colorService.getContrastColor(this.color);
+        this.contrastColor.set(this._colorService.getContrastColor(this.color()));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: PartBadgeComponent, deps: [{ token: i1$2.FacetService }, { token: ColorService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", type: PartBadgeComponent, isStandalone: true, selector: "cadmus-part-badge", inputs: { badgeType: { classPropertyName: "badgeType", publicName: "badgeType", isSignal: true, isRequired: false, transformFunction: null }, typeThesaurus: { classPropertyName: "typeThesaurus", publicName: "typeThesaurus", isSignal: true, isRequired: false, transformFunction: null }, facetDefinition: { classPropertyName: "facetDefinition", publicName: "facetDefinition", isSignal: true, isRequired: false, transformFunction: null }, partTypeIds: { classPropertyName: "partTypeIds", publicName: "partTypeIds", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (badgeType() !== 2) {\r\n<span\r\n  class=\"part-badge\"\r\n  [style.background-color]=\"color\"\r\n  [style.color]=\"contrastColor\"\r\n>\r\n  {{ typeName }}\r\n</span>\r\n} @if (badgeType() !== 1 && roleName) {\r\n<span class=\"role-badge\">\r\n  {{ roleName }}\r\n</span>\r\n}\r\n", styles: [".part-badge{padding:4px;border-radius:6px}.role-badge{padding:4px;border:1px solid silver;border-radius:6px}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PartBadgeComponent, deps: [{ token: i1$2.FacetService }, { token: ColorService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: PartBadgeComponent, isStandalone: true, selector: "cadmus-part-badge", inputs: { badgeType: { classPropertyName: "badgeType", publicName: "badgeType", isSignal: true, isRequired: false, transformFunction: null }, typeThesaurus: { classPropertyName: "typeThesaurus", publicName: "typeThesaurus", isSignal: true, isRequired: false, transformFunction: null }, facetDefinition: { classPropertyName: "facetDefinition", publicName: "facetDefinition", isSignal: true, isRequired: false, transformFunction: null }, partTypeIds: { classPropertyName: "partTypeIds", publicName: "partTypeIds", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (badgeType() !== 2) {\r\n<span\r\n  class=\"part-badge\"\r\n  [style.background-color]=\"color()\"\r\n  [style.color]=\"contrastColor()\"\r\n>\r\n  {{ typeName() }}\r\n</span>\r\n} @if (badgeType() !== 1 && roleName()) {\r\n<span class=\"role-badge\">\r\n  {{ roleName() }}\r\n</span>\r\n}\r\n", styles: [".part-badge{padding:4px;border-radius:6px}.role-badge{padding:4px;border:1px solid silver;border-radius:6px}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: PartBadgeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PartBadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cadmus-part-badge', template: "@if (badgeType() !== 2) {\r\n<span\r\n  class=\"part-badge\"\r\n  [style.background-color]=\"color\"\r\n  [style.color]=\"contrastColor\"\r\n>\r\n  {{ typeName }}\r\n</span>\r\n} @if (badgeType() !== 1 && roleName) {\r\n<span class=\"role-badge\">\r\n  {{ roleName }}\r\n</span>\r\n}\r\n", styles: [".part-badge{padding:4px;border-radius:6px}.role-badge{padding:4px;border:1px solid silver;border-radius:6px}\n"] }]
+            args: [{ selector: 'cadmus-part-badge', template: "@if (badgeType() !== 2) {\r\n<span\r\n  class=\"part-badge\"\r\n  [style.background-color]=\"color()\"\r\n  [style.color]=\"contrastColor()\"\r\n>\r\n  {{ typeName() }}\r\n</span>\r\n} @if (badgeType() !== 1 && roleName()) {\r\n<span class=\"role-badge\">\r\n  {{ roleName() }}\r\n</span>\r\n}\r\n", styles: [".part-badge{padding:4px;border-radius:6px}.role-badge{padding:4px;border:1px solid silver;border-radius:6px}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.FacetService }, { type: ColorService }] });
 
-/**
- * A label rendering function which removes from a label
- * all the characters past the last colon, trimming the result.
- * This is a typical rendering when dealing with hierarchical
- * thesaurus entries, e.g. "furniture: table: color", where
- * we can shorten the label to just "color", as "furniture"
- * and "table" are its ancestors.
- */
-const renderLabelFromLastColon = (label) => {
-    if (!label) {
-        return label;
-    }
-    const i = label.lastIndexOf(':');
-    return i > -1 && i + 1 < label.length ? label.substring(i + 1).trim() : label;
-};
 /**
  * Thesaurus tree component.
  * This component displays a set of hierarchical thesaurus entries
@@ -749,203 +1118,42 @@ class ThesaurusTreeComponent {
      * The thesaurus entries.
      */
     entries = input(...(ngDevMode ? [undefined, { debugName: "entries" }] : []));
-    /**
-     * The label for the root node.
-     */
-    rootLabel = input('-', ...(ngDevMode ? [{ debugName: "rootLabel" }] : []));
     /**
      * The optional node label rendering function.
      */
-    renderLabel = input(...(ngDevMode ? [undefined, { debugName: "renderLabel" }] : []));
+    renderLabel = input(renderLabelFromLastColon, ...(ngDevMode ? [{ debugName: "renderLabel" }] : []));
     /**
      * Fired when a thesaurus entry is selected.
      */
     entryChange = output();
-    root;
-    // TODO: use childrenAccessor: https://material.angular.io/cdk/tree/examples
-    treeControl;
-    treeDataSource;
-    filter;
-    form;
-    foundNodes;
-    hasChildren = (index, node) => {
-        return node && node.children && node.children.length > 0;
-    };
-    isRoot = (index, node) => {
-        return node && node.id === '@root';
-    };
-    constructor(formBuilder) {
-        // tree
-        this.treeControl = new NestedTreeControl((node) => node.children);
-        this.treeDataSource = new MatTreeNestedDataSource();
-        this.root = { id: '@root', label: '-', children: [] };
-        // filter
-        this.filter = formBuilder.control(null);
-        this.form = formBuilder.group({
-            filter: this.filter,
-        });
-        effect(() => {
-            this.initTree(this.entries());
-        });
-    }
-    ngOnInit() {
-        this.initTree();
-    }
-    initTree(entries) {
-        this.foundNodes = undefined;
-        this.root = this.buildTreeModel(entries || []);
-        this.treeDataSource.data = [this.root];
-        // https://github.com/angular/components/issues/12469
-        this.treeControl.dataNodes = this.treeDataSource.data;
-    }
-    getLabel(label) {
-        const renderer = this.renderLabel();
-        return renderer ? renderer(label) : label;
-    }
-    addNode(entry, separator, root) {
-        const components = entry.id.split(separator);
-        // walk the tree up to the last existing component
-        let i = 0;
-        let node = root;
-        const idParts = [];
-        // for each component:
-        while (i < components.length) {
-            idParts.push(components[i]);
-            // stop walking when the node has no more children
-            if (!node.children) {
-                break;
-            }
-            // find target among children
-            const targetId = idParts.join(separator);
-            const existing = node.children.find((c) => {
-                return c.id === targetId;
-            });
-            if (existing) {
-                node = existing;
-                i++;
-            }
-            else {
-                break;
-            }
-        }
-        // node is now the last existing component; use it as the ancestor
-        // for all the remaining components (starting from i)
-        while (i < components.length) {
-            if (!node.children) {
-                node.children = [];
-            }
-            const isLast = i + 1 === components.length;
-            const label = isLast ? entry.value : components[i];
-            const child = {
-                label: isLast ? this.getLabel(label) : label,
-                id: isLast ? entry.id : idParts.join(separator),
-                parent: node,
-                children: [],
-            };
-            if (label !== child.label) {
-                child.originalLabel = label;
-            }
-            node.children.push(child);
-            node = child;
-            i++;
-        }
-    }
     /**
-     * Build a tree model from a list of name=value pairs,
-     * where each value can include one or more components separated by
-     * the specified separator.
-     * @param entries The entries to add.
-     * @param separator string The separator string to use for values.
+     * The tree store service, dependent on the current entries and renderLabel.
      */
-    buildTreeModel(entries, separator = '.') {
-        const root = {
-            id: '@root',
-            label: this.rootLabel() || '-',
-        };
-        if (!entries) {
-            return root;
-        }
-        entries.forEach((entry) => {
-            this.addNode(entry, separator, root);
-        });
-        return root;
-    }
-    onTreeNodeClick(node) {
-        if (node.children && node.children.length > 0) {
-            return;
-        }
-        this.entryChange.emit({
-            id: node.id,
-            value: node.originalLabel || node.label,
-        });
-    }
-    expandAll() {
-        this.treeControl.expandAll();
-    }
-    collapseAll() {
-        this.treeControl.collapseAll();
-    }
-    expandFromNode(node) {
-        while (node.parent) {
-            node = node.parent;
-            this.treeControl.expand(node);
-        }
-    }
-    expandMatchingNodes(node, filter, found) {
-        if (node.label.toLowerCase().includes(filter)) {
-            found.push(node);
-            this.expandFromNode(node);
-        }
-        if (node.children?.length) {
-            node.children.forEach((child) => {
-                this.expandMatchingNodes(child, filter, found);
-            });
-        }
-    }
-    find() {
-        if (!this.filter.value?.length) {
-            return;
-        }
-        this.treeControl.collapseAll();
-        const foundNodes = [];
-        this.expandMatchingNodes(this.treeDataSource.data[0], this.filter.value.toLowerCase(), foundNodes);
-        this.foundNodes = foundNodes;
-    }
-    resetFilter() {
-        this.filter.reset();
-        this.foundNodes = undefined;
-    }
-    isFoundNode(node) {
-        if (!this.foundNodes) {
-            return false;
+    service = computed(() => {
+        const entries = this.entries();
+        return new StaticThesPagedTreeStoreService(entries || [], this.renderLabel());
+    }, ...(ngDevMode ? [{ debugName: "service" }] : []));
+    /**
+     * The filter component class to use.
+     */
+    filterComponent = ThesPagedTreeFilterComponent;
+    onNodePick(node) {
+        // only allow selection of leaf nodes (nodes without children)
+        if (!node.hasChildren) {
+            // find the original entry
+            const entry = this.entries()?.find((e) => e.id === node.key);
+            if (entry) {
+                this.entryChange.emit(entry);
+            }
         }
-        return this.foundNodes?.length > 0 && this.foundNodes.indexOf(node) > -1;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ThesaurusTreeComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", type: ThesaurusTreeComponent, isStandalone: true, selector: "cadmus-thesaurus-tree", inputs: { entries: { classPropertyName: "entries", publicName: "entries", isSignal: true, isRequired: false, transformFunction: null }, rootLabel: { classPropertyName: "rootLabel", publicName: "rootLabel", isSignal: true, isRequired: false, transformFunction: null }, renderLabel: { classPropertyName: "renderLabel", publicName: "renderLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { entryChange: "entryChange" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"find()\">\r\n  <button\r\n    type=\"button\"\r\n    mat-icon-button\r\n    matTooltip=\"Expand all\"\r\n    (click)=\"expandAll()\"\r\n  >\r\n    <mat-icon>unfold_more</mat-icon>\r\n  </button>\r\n  <button\r\n    type=\"button\"\r\n    mat-icon-button\r\n    matTooltip=\"Collapse all\"\r\n    (click)=\"collapseAll()\"\r\n  >\r\n    <mat-icon>unfold_less</mat-icon>\r\n  </button>\r\n  <mat-form-field>\r\n    <mat-label>find</mat-label>\r\n    <input matInput [formControl]=\"filter\" />\r\n    <button\r\n      type=\"button\"\r\n      matSuffix\r\n      mat-icon-button\r\n      (click)=\"resetFilter()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n  </mat-form-field>\r\n  @if (foundNodes) {\r\n  <span\r\n    [ngClass]=\"{\r\n      'found-count': foundNodes.length,\r\n      'not-found-count': foundNodes.length === 0\r\n    }\"\r\n    >{{ foundNodes.length }}</span\r\n  >\r\n  }\r\n</form>\r\n<mat-tree\r\n  [dataSource]=\"treeDataSource\"\r\n  [treeControl]=\"treeControl\"\r\n  class=\"th-tree\"\r\n>\r\n  <!-- leaf node -->\r\n  <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle>\r\n    <li>\r\n      <div class=\"mat-tree-node\">\r\n        <a\r\n          mat-button\r\n          (click)=\"onTreeNodeClick(node)\"\r\n          [class.hilite]=\"isFoundNode(node)\"\r\n        >\r\n          {{ node.label }}\r\n        </a>\r\n      </div>\r\n    </li>\r\n  </mat-tree-node>\r\n\r\n  <!-- root node -->\r\n  <mat-nested-tree-node *matTreeNodeDef=\"let node; when: isRoot\">\r\n    <div class=\"mat-tree-node\">\r\n      <button\r\n        type=\"button\"\r\n        mat-icon-button\r\n        matTreeNodeToggle\r\n        [attr.aria-label]=\"'Toggle ' + node.label\"\r\n      >\r\n        <mat-icon>\r\n          {{ treeControl.isExpanded(node) ? \"expand_more\" : \"chevron_right\" }}\r\n        </mat-icon>\r\n      </button>\r\n      {{ node.label }}\r\n    </div>\r\n    <ul class=\"tree-nested-node\">\r\n      @if (treeControl.isExpanded(node)) {\r\n      <div>\r\n        <ng-container matTreeNodeOutlet></ng-container>\r\n      </div>\r\n      }\r\n    </ul>\r\n  </mat-nested-tree-node>\r\n\r\n  <!-- parent node -->\r\n  <mat-nested-tree-node *matTreeNodeDef=\"let node; when: hasChildren\">\r\n    <li class=\"tree-container\">\r\n      <div class=\"mat-tree-node\">\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTreeNodeToggle\r\n          [attr.aria-label]=\"'Toggle ' + node.label\"\r\n        >\r\n          <mat-icon>\r\n            {{ treeControl.isExpanded(node) ? \"expand_more\" : \"chevron_right\" }}\r\n          </mat-icon>\r\n        </button>\r\n        <a mat-button (click)=\"onTreeNodeClick(node)\">\r\n          {{ node.label }}\r\n        </a>\r\n      </div>\r\n      <ul class=\"tree-nested-node\">\r\n        @if (treeControl.isExpanded(node)) {\r\n        <div>\r\n          <ng-container matTreeNodeOutlet></ng-container>\r\n        </div>\r\n        }\r\n      </ul>\r\n    </li>\r\n  </mat-nested-tree-node>\r\n</mat-tree>\r\n", styles: [".th-tree-progress-bar{margin-left:30px}.th-tree-nested-node{padding-left:30px}mat-tree{margin-left:40px}.mat-tree-node{padding:0;background-color:#fff}.mat-nested-tree-node{top:-24px}ul,li{list-style:none;margin:0;padding:0}li.th-tree-container{border-bottom:0}ul{padding-left:40px}li{padding-left:40px;border:1px dotted grey;border-width:0 0 1px 1px;position:relative;top:-24px}li.mat-tree-node,li div{margin:0;position:relative;top:24px}li ul{border-top:1px dotted grey;margin-left:-40px;padding-left:60px}.mat-nested-tree-node:last-child ul{border-left:1px solid white;margin-left:-41px}.mat-mdc-icon-button{z-index:100}span.found-count{margin:0 4px;padding:2px 4px;color:#fff;background-color:#0cc078;border-radius:6px}span.not-found-count{margin:0 4px;padding:2px 4px;color:#fff;background-color:#fb6962;border-radius:6px}.hilite{background-color:#fdfd96}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: MatAnchor, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ThesaurusTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ThesaurusTreeComponent, isStandalone: true, selector: "cadmus-thesaurus-tree", inputs: { entries: { classPropertyName: "entries", publicName: "entries", isSignal: true, isRequired: false, transformFunction: null }, renderLabel: { classPropertyName: "renderLabel", publicName: "renderLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { entryChange: "entryChange" }, ngImport: i0, template: "<div>\r\n  <!-- tree -->\r\n  @if (service() && entries()?.length) {\r\n  <div class=\"tree-wrapper\">\r\n    <cadmus-thes-paged-tree-browser\r\n      [service]=\"service()\"\r\n      (nodePick)=\"onNodePick($event)\"\r\n    />\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".th-tree-progress-bar{margin-left:30px}.th-tree-nested-node{padding-left:30px}mat-tree{margin-left:40px}.mat-tree-node{padding:0;background-color:#fff}.mat-nested-tree-node{top:-24px}ul,li{list-style:none;margin:0;padding:0}li.th-tree-container{border-bottom:0}ul{padding-left:40px}li{padding-left:40px;border:1px dotted grey;border-width:0 0 1px 1px;position:relative;top:-24px}li.mat-tree-node,li div{margin:0;position:relative;top:24px}li ul{border-top:1px dotted grey;margin-left:-40px;padding-left:60px}.mat-nested-tree-node:last-child ul{border-left:1px solid white;margin-left:-41px}.mat-mdc-icon-button{z-index:100}span.found-count{margin:0 4px;padding:2px 4px;color:#fff;background-color:#0cc078;border-radius:6px}span.not-found-count{margin:0 4px;padding:2px 4px;color:#fff;background-color:#fb6962;border-radius:6px}.hilite{background-color:#fdfd96}.filter-field{width:100%;margin-bottom:1rem}.tree-container{border:1px solid #e0e0e0;border-radius:4px;overflow:auto;max-height:500px}.tree-wrapper{border:1px solid #e0e0e0;border-radius:4px;overflow:hidden;background:#fff}.no-entries{text-align:center;padding:2rem;color:#666;font-style:italic;border:1px solid #e0e0e0;border-radius:4px;background:#f9f9f9}.no-entries p{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ThesPagedTreeBrowserComponent, selector: "cadmus-thes-paged-tree-browser", inputs: ["service"], outputs: ["nodePick"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ThesaurusTreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ThesaurusTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cadmus-thesaurus-tree', imports: [
-                        FormsModule,
-                        ReactiveFormsModule,
-                        MatIconButton,
-                        MatTooltip,
-                        MatIcon,
-                        MatFormField,
-                        MatLabel,
-                        MatInput,
-                        MatSuffix,
-                        NgClass,
-                        MatTree,
-                        MatTreeNodeDef,
-                        MatTreeNode,
-                        MatTreeNodeToggle,
-                        MatAnchor,
-                        MatNestedTreeNode,
-                        MatTreeNodeOutlet,
-                    ], template: "<form [formGroup]=\"form\" (submit)=\"find()\">\r\n  <button\r\n    type=\"button\"\r\n    mat-icon-button\r\n    matTooltip=\"Expand all\"\r\n    (click)=\"expandAll()\"\r\n  >\r\n    <mat-icon>unfold_more</mat-icon>\r\n  </button>\r\n  <button\r\n    type=\"button\"\r\n    mat-icon-button\r\n    matTooltip=\"Collapse all\"\r\n    (click)=\"collapseAll()\"\r\n  >\r\n    <mat-icon>unfold_less</mat-icon>\r\n  </button>\r\n  <mat-form-field>\r\n    <mat-label>find</mat-label>\r\n    <input matInput [formControl]=\"filter\" />\r\n    <button\r\n      type=\"button\"\r\n      matSuffix\r\n      mat-icon-button\r\n      (click)=\"resetFilter()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n  </mat-form-field>\r\n  @if (foundNodes) {\r\n  <span\r\n    [ngClass]=\"{\r\n      'found-count': foundNodes.length,\r\n      'not-found-count': foundNodes.length === 0\r\n    }\"\r\n    >{{ foundNodes.length }}</span\r\n  >\r\n  }\r\n</form>\r\n<mat-tree\r\n  [dataSource]=\"treeDataSource\"\r\n  [treeControl]=\"treeControl\"\r\n  class=\"th-tree\"\r\n>\r\n  <!-- leaf node -->\r\n  <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle>\r\n    <li>\r\n      <div class=\"mat-tree-node\">\r\n        <a\r\n          mat-button\r\n          (click)=\"onTreeNodeClick(node)\"\r\n          [class.hilite]=\"isFoundNode(node)\"\r\n        >\r\n          {{ node.label }}\r\n        </a>\r\n      </div>\r\n    </li>\r\n  </mat-tree-node>\r\n\r\n  <!-- root node -->\r\n  <mat-nested-tree-node *matTreeNodeDef=\"let node; when: isRoot\">\r\n    <div class=\"mat-tree-node\">\r\n      <button\r\n        type=\"button\"\r\n        mat-icon-button\r\n        matTreeNodeToggle\r\n        [attr.aria-label]=\"'Toggle ' + node.label\"\r\n      >\r\n        <mat-icon>\r\n          {{ treeControl.isExpanded(node) ? \"expand_more\" : \"chevron_right\" }}\r\n        </mat-icon>\r\n      </button>\r\n      {{ node.label }}\r\n    </div>\r\n    <ul class=\"tree-nested-node\">\r\n      @if (treeControl.isExpanded(node)) {\r\n      <div>\r\n        <ng-container matTreeNodeOutlet></ng-container>\r\n      </div>\r\n      }\r\n    </ul>\r\n  </mat-nested-tree-node>\r\n\r\n  <!-- parent node -->\r\n  <mat-nested-tree-node *matTreeNodeDef=\"let node; when: hasChildren\">\r\n    <li class=\"tree-container\">\r\n      <div class=\"mat-tree-node\">\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          matTreeNodeToggle\r\n          [attr.aria-label]=\"'Toggle ' + node.label\"\r\n        >\r\n          <mat-icon>\r\n            {{ treeControl.isExpanded(node) ? \"expand_more\" : \"chevron_right\" }}\r\n          </mat-icon>\r\n        </button>\r\n        <a mat-button (click)=\"onTreeNodeClick(node)\">\r\n          {{ node.label }}\r\n        </a>\r\n      </div>\r\n      <ul class=\"tree-nested-node\">\r\n        @if (treeControl.isExpanded(node)) {\r\n        <div>\r\n          <ng-container matTreeNodeOutlet></ng-container>\r\n        </div>\r\n        }\r\n      </ul>\r\n    </li>\r\n  </mat-nested-tree-node>\r\n</mat-tree>\r\n", styles: [".th-tree-progress-bar{margin-left:30px}.th-tree-nested-node{padding-left:30px}mat-tree{margin-left:40px}.mat-tree-node{padding:0;background-color:#fff}.mat-nested-tree-node{top:-24px}ul,li{list-style:none;margin:0;padding:0}li.th-tree-container{border-bottom:0}ul{padding-left:40px}li{padding-left:40px;border:1px dotted grey;border-width:0 0 1px 1px;position:relative;top:-24px}li.mat-tree-node,li div{margin:0;position:relative;top:24px}li ul{border-top:1px dotted grey;margin-left:-40px;padding-left:60px}.mat-nested-tree-node:last-child ul{border-left:1px solid white;margin-left:-41px}.mat-mdc-icon-button{z-index:100}span.found-count{margin:0 4px;padding:2px 4px;color:#fff;background-color:#0cc078;border-radius:6px}span.not-found-count{margin:0 4px;padding:2px 4px;color:#fff;background-color:#fb6962;border-radius:6px}.hilite{background-color:#fdfd96}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.FormBuilder }] });
+            args: [{ selector: 'cadmus-thesaurus-tree', imports: [FormsModule, ReactiveFormsModule, ThesPagedTreeBrowserComponent], template: "<div>\r\n  <!-- tree -->\r\n  @if (service() && entries()?.length) {\r\n  <div class=\"tree-wrapper\">\r\n    <cadmus-thes-paged-tree-browser\r\n      [service]=\"service()\"\r\n      (nodePick)=\"onNodePick($event)\"\r\n    />\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".th-tree-progress-bar{margin-left:30px}.th-tree-nested-node{padding-left:30px}mat-tree{margin-left:40px}.mat-tree-node{padding:0;background-color:#fff}.mat-nested-tree-node{top:-24px}ul,li{list-style:none;margin:0;padding:0}li.th-tree-container{border-bottom:0}ul{padding-left:40px}li{padding-left:40px;border:1px dotted grey;border-width:0 0 1px 1px;position:relative;top:-24px}li.mat-tree-node,li div{margin:0;position:relative;top:24px}li ul{border-top:1px dotted grey;margin-left:-40px;padding-left:60px}.mat-nested-tree-node:last-child ul{border-left:1px solid white;margin-left:-41px}.mat-mdc-icon-button{z-index:100}span.found-count{margin:0 4px;padding:2px 4px;color:#fff;background-color:#0cc078;border-radius:6px}span.not-found-count{margin:0 4px;padding:2px 4px;color:#fff;background-color:#fb6962;border-radius:6px}.hilite{background-color:#fdfd96}.filter-field{width:100%;margin-bottom:1rem}.tree-container{border:1px solid #e0e0e0;border-radius:4px;overflow:auto;max-height:500px}.tree-wrapper{border:1px solid #e0e0e0;border-radius:4px;overflow:hidden;background:#fff}.no-entries{text-align:center;padding:2rem;color:#666;font-style:italic;border:1px solid #e0e0e0;border-radius:4px;background:#f9f9f9}.no-entries p{margin:0}\n"] }]
+        }] });
 
 /**
  * Base class for part/fragment editors dumb components.
@@ -1178,10 +1386,10 @@ class ModelEditorComponentBase {
         // the form is no more dirty
         this.form.markAsPristine();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ModelEditorComponentBase, deps: [{ token: i1$3.AuthJwtService }, { token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.0", type: ModelEditorComponentBase, isStandalone: false, selector: "ng-component", inputs: { identity: { classPropertyName: "identity", publicName: "identity", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange", dirtyChange: "dirtyChange", editorClose: "editorClose" }, ngImport: i0, template: '', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ModelEditorComponentBase, deps: [{ token: i1$3.AuthJwtService }, { token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: ModelEditorComponentBase, isStandalone: false, selector: "ng-component", inputs: { identity: { classPropertyName: "identity", publicName: "identity", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange", dirtyChange: "dirtyChange", editorClose: "editorClose" }, ngImport: i0, template: '', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ModelEditorComponentBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ModelEditorComponentBase, decorators: [{
             type: Component,
             args: [{
                     template: '',
@@ -1263,10 +1471,10 @@ class UserRefLookupService {
     getName(item) {
         return item?.user?.userName;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: UserRefLookupService, deps: [{ token: i1$2.UserService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: UserRefLookupService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: UserRefLookupService, deps: [{ token: i1$2.UserService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: UserRefLookupService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: UserRefLookupService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: UserRefLookupService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1330,5 +1538,5 @@ const extractPristineChanges = (control) => {
  * Generated bundle index. Do not edit.
  */
 
-export { CloseSaveButtonsComponent, ColorService, CustomValidators, DecoratedTokenTextComponent, ErrorListComponent, FacetBadgeComponent, FlagsBadgeComponent, JsonValidators, LayerHintsComponent, LookupPinComponent, ModelEditorComponentBase, PartBadgeComponent, PartBadgeType, ThesaurusTreeComponent, UserRefLookupService, extractPristineChanges, extractTouchedChanges, getPartIdName, renderLabelFromLastColon };
+export { CloseSaveButtonsComponent, ColorService, CustomValidators, DecoratedTokenTextComponent, ErrorListComponent, FacetBadgeComponent, FlagsBadgeComponent, JsonValidators, LayerHintsComponent, LookupPinComponent, ModelEditorComponentBase, PartBadgeComponent, PartBadgeType, StaticThesPagedTreeStoreService, ThesPagedTreeBrowserComponent, ThesaurusTreeComponent, UserRefLookupService, extractPristineChanges, extractTouchedChanges, getPartIdName, renderLabelFromLastColon };
 //# sourceMappingURL=myrmidon-cadmus-ui.mjs.map