@myrmidon/cadmus-thesaurus-store 0.0.1

package/fesm2022/myrmidon-cadmus-thesaurus-store.mjs

@@ -0,0 +1,1329 @@
+import * as i0 from '@angular/core';
+import { inject, model, signal, effect, Component, Optional, Inject, input, output, computed, untracked } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormBuilder, ReactiveFormsModule, FormControl, Validators, FormGroup, FormsModule } from '@angular/forms';
+import { AsyncPipe } from '@angular/common';
+import { of } from 'rxjs';
+import * as i1$1 from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
+import * as i8 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i2 from '@angular/material/button';
+import { MatButtonModule, MatIconButton } from '@angular/material/button';
+import * as i3 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i5 from '@angular/material/icon';
+import { MatIconModule, MatIcon } from '@angular/material/icon';
+import * as i6$1 from '@angular/material/tooltip';
+import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
+import * as i6 from '@angular/material/input';
+import { MatInputModule, MatInput } from '@angular/material/input';
+import * as i4 from '@angular/material/form-field';
+import { MatFormFieldModule, MatFormField } from '@angular/material/form-field';
+import * as i7 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { DialogService } from '@myrmidon/ngx-mat-tools';
+import { PagedTreeStore, BrowserTreeNodeComponent, EditablePagedTreeStoreServiceBase, ChangeOperationType } from '@myrmidon/paged-data-browsers';
+import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
+import { MatChipListbox, MatChipOption, MatChipRemove } from '@angular/material/chips';
+import { MatExpansionPanel } from '@angular/material/expansion';
+
+/**
+ * A filter to be used for thesaurus paged tree browsers.
+ */
+class ThesaurusPagedTreeFilterComponent {
+    constructor() {
+        this.dialogRef = inject(MatDialogRef, {
+            optional: true,
+        });
+        this.data = inject(MAT_DIALOG_DATA, { optional: true });
+        /**
+         * The filter.
+         */
+        this.filter = model(...(ngDevMode ? [undefined, { debugName: "filter" }] : []));
+        this.wrapped = signal(false, ...(ngDevMode ? [{ debugName: "wrapped" }] : []));
+        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() {
+        const filter = this.getFilter();
+        this.filter.set(filter);
+        this.dialogRef?.close(filter);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ThesaurusPagedTreeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: ThesaurusPagedTreeFilterComponent, isStandalone: true, selector: "cadmus-thesaurus-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\r\n    <!-- buttons -->\r\n    <div class=\"button-row\">\r\n      <button\r\n        type=\"button\"\r\n        mat-icon-button\r\n        matTooltip=\"Reset\"\r\n        (click)=\"reset()\"\r\n      >\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  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.button-row{display:flex;align-items:center;flex-wrap:wrap}.button-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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.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: i6.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$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ThesaurusPagedTreeFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cadmus-thesaurus-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\r\n    <!-- buttons -->\r\n    <div class=\"button-row\">\r\n      <button\r\n        type=\"button\"\r\n        mat-icon-button\r\n        matTooltip=\"Reset\"\r\n        (click)=\"reset()\"\r\n      >\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  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.button-row{display:flex;align-items:center;flex-wrap:wrap}.button-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: () => [], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }, { type: i0.Output, args: ["filterChange"] }] } });
+
+/**
+ * A dialog component to edit a thesaurus entry.
+ */
+class ThesEntryEditorComponent {
+    constructor(dialogRef, data, formBuilder) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.entry = model(...(ngDevMode ? [undefined, { debugName: "entry" }] : []));
+        this.wrapped = false;
+        // bind to data properties if any
+        if (data) {
+            this.entry.set(data);
+            this.wrapped = true;
+        }
+        // custom validator for ID existence
+        const idExistsValidator = (control) => {
+            const entry = this.entry();
+            if (!entry || entry.idLocked || !entry.idExists) {
+                return null;
+            }
+            const id = control.value?.trim();
+            if (!id) {
+                return null;
+            }
+            // if editing, allow the current id (do not check against itself)
+            if (entry.id === id) {
+                return null;
+            }
+            return entry.idExists(id) ? { idExists: true } : null;
+        };
+        // custom validator for hierarchical ID prefix
+        const hierarchicalIdValidator = (control) => {
+            const entry = this.entry();
+            if (!entry || entry.idLocked || !entry.hierarchical || !entry.parentId) {
+                return null;
+            }
+            const id = control.value?.trim();
+            if (!id) {
+                return null;
+            }
+            const prefix = entry.parentId + '.';
+            if (!id.startsWith(prefix) || id.length <= prefix.length) {
+                return { hierarchicalPrefix: { requiredPrefix: prefix } };
+            }
+            return null;
+        };
+        // form controls
+        this.id = new FormControl(data?.id || '', {
+            nonNullable: true,
+            validators: [
+                Validators.required,
+                Validators.maxLength(300),
+                idExistsValidator,
+                hierarchicalIdValidator,
+            ],
+        });
+        this.value = new FormControl(data?.value || '', {
+            nonNullable: true,
+            validators: [Validators.required, Validators.maxLength(500)],
+        });
+        this.form = formBuilder.group({
+            id: this.id,
+            value: this.value,
+        });
+    }
+    cancel() {
+        this.dialogRef?.close();
+    }
+    save() {
+        if (this.form.invalid) {
+            return;
+        }
+        const old = this.entry();
+        // save data and close the dialog
+        this.dialogRef?.close({
+            id: old.idLocked ? old.id : this.id.value?.trim(),
+            value: this.value.value?.trim(),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ThesEntryEditorComponent, deps: [{ token: i1$1.MatDialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }, { token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: ThesEntryEditorComponent, isStandalone: true, selector: "cadmus-thesaurus-entry-editor", inputs: { entry: { classPropertyName: "entry", publicName: "entry", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { entry: "entryChange" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\" [class.wrapped]=\"wrapped\">\r\n  <fieldset>\r\n    <legend>entry</legend>\r\n    <div class=\"form-row\">\r\n      <!-- id -->\r\n      @if (entry()!.idLocked) {\r\n      <span class=\"readonly\">{{ entry()!.id }}</span>\r\n      } @else {\r\n      <mat-form-field>\r\n        <mat-label>ID</mat-label>\r\n        <input matInput [formControl]=\"id\" />\r\n        @if ($any(id).errors?.required && (id.dirty || id.touched)) {\r\n        <mat-error>ID required</mat-error>\r\n        } @if ($any(id).errors?.maxLength && (id.dirty || id.touched)) {\r\n        <mat-error>ID too long</mat-error>\r\n        } @if ($any(id).errors?.idExists && (id.dirty || id.touched)) {\r\n        <mat-error>ID already exists</mat-error>\r\n        } @if ($any(id).errors?.requiredPrefix && (id.dirty || id.touched)) {\r\n        <mat-error>ID must start with \"{{ entry()!.parentId }}.\"</mat-error>\r\n        }\r\n        <!-- hint -->\r\n        @if (entry()?.parentId) {\r\n        <mat-hint>parent: {{ entry()!.parentId }}</mat-hint>\r\n        }\r\n      </mat-form-field>\r\n      }\r\n      <!-- value -->\r\n      <mat-form-field>\r\n        <mat-label>value</mat-label>\r\n        <input matInput [formControl]=\"value\" />\r\n        @if ($any(value).errors?.required && (value.dirty || value.touched)) {\r\n        <mat-error>value required</mat-error>\r\n        } @if ($any(value).errors?.maxLength && (value.dirty || value.touched))\r\n        {\r\n        <mat-error>value too long</mat-error>\r\n        }\r\n      </mat-form-field>\r\n    </div>\r\n    <!-- buttons -->\r\n    <div>\r\n      <button\r\n        type=\"button\"\r\n        mat-icon-button\r\n        matTooltip=\"Discard changes\"\r\n        (click)=\"cancel()\"\r\n      >\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=\"Accept changes\"\r\n        [disabled]=\"form.invalid || form.pristine\"\r\n      >\r\n        <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n      </button>\r\n    </div>\r\n  </fieldset>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center}.form-row *{flex:0 0 auto}.readonly{color:silver}.wrapped{padding:16px}fieldset{border:1px solid silver;border-radius:6px;padding:6px}legend{color:silver}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.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: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: i6.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: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ThesEntryEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cadmus-thesaurus-entry-editor', imports: [
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatTooltipModule,
+                    ], template: "<form [formGroup]=\"form\" (submit)=\"save()\" [class.wrapped]=\"wrapped\">\r\n  <fieldset>\r\n    <legend>entry</legend>\r\n    <div class=\"form-row\">\r\n      <!-- id -->\r\n      @if (entry()!.idLocked) {\r\n      <span class=\"readonly\">{{ entry()!.id }}</span>\r\n      } @else {\r\n      <mat-form-field>\r\n        <mat-label>ID</mat-label>\r\n        <input matInput [formControl]=\"id\" />\r\n        @if ($any(id).errors?.required && (id.dirty || id.touched)) {\r\n        <mat-error>ID required</mat-error>\r\n        } @if ($any(id).errors?.maxLength && (id.dirty || id.touched)) {\r\n        <mat-error>ID too long</mat-error>\r\n        } @if ($any(id).errors?.idExists && (id.dirty || id.touched)) {\r\n        <mat-error>ID already exists</mat-error>\r\n        } @if ($any(id).errors?.requiredPrefix && (id.dirty || id.touched)) {\r\n        <mat-error>ID must start with \"{{ entry()!.parentId }}.\"</mat-error>\r\n        }\r\n        <!-- hint -->\r\n        @if (entry()?.parentId) {\r\n        <mat-hint>parent: {{ entry()!.parentId }}</mat-hint>\r\n        }\r\n      </mat-form-field>\r\n      }\r\n      <!-- value -->\r\n      <mat-form-field>\r\n        <mat-label>value</mat-label>\r\n        <input matInput [formControl]=\"value\" />\r\n        @if ($any(value).errors?.required && (value.dirty || value.touched)) {\r\n        <mat-error>value required</mat-error>\r\n        } @if ($any(value).errors?.maxLength && (value.dirty || value.touched))\r\n        {\r\n        <mat-error>value too long</mat-error>\r\n        }\r\n      </mat-form-field>\r\n    </div>\r\n    <!-- buttons -->\r\n    <div>\r\n      <button\r\n        type=\"button\"\r\n        mat-icon-button\r\n        matTooltip=\"Discard changes\"\r\n        (click)=\"cancel()\"\r\n      >\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=\"Accept changes\"\r\n        [disabled]=\"form.invalid || form.pristine\"\r\n      >\r\n        <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n      </button>\r\n    </div>\r\n  </fieldset>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center}.form-row *{flex:0 0 auto}.readonly{color:silver}.wrapped{padding:16px}fieldset{border:1px solid silver;border-radius:6px;padding:6px}legend{color:silver}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialogRef, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1.FormBuilder }], propDecorators: { entry: [{ type: i0.Input, args: [{ isSignal: true, alias: "entry", required: false }] }, { type: i0.Output, args: ["entryChange"] }] } });
+
+/**
+ * An editable paged tree browser for thesaurus entries. Editing happens in memory
+ * and when complete, the changes can be committed to the underlying data store
+ * via the EditableStaticThesaurusPagedTreeStoreService.
+ */
+class EditableThesaurusBrowserComponent {
+    constructor() {
+        this._dialog = inject(MatDialog);
+        this._snackBar = inject(MatSnackBar);
+        this._dialogService = inject(DialogService);
+        /**
+         * The editable service to use to load the nodes.
+         */
+        this.service = input(...(ngDevMode ? [undefined, { debugName: "service" }] : []));
+        /**
+         * True to show the tree root nodes filter.
+         */
+        this.hasRootFilter = input(false, ...(ngDevMode ? [{ debugName: "hasRootFilter" }] : []));
+        /**
+         * Emitted when a node is clicked.
+         */
+        this.nodePick = output();
+        /**
+         * Emitted when the changes state changes.
+         */
+        this.changesStateChange = output();
+        /**
+         * The store instance, built from the service.
+         */
+        this.store = computed(() => {
+            const service = this.service();
+            if (!service) {
+                return null;
+            }
+            const store = new PagedTreeStore(service);
+            return store;
+        }, ...(ngDevMode ? [{ debugName: "store" }] : []));
+        this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        this.selectedNode = signal(null, ...(ngDevMode ? [{ debugName: "selectedNode" }] : []));
+        this.debug = new FormControl(false, {
+            nonNullable: true,
+        });
+        this.hideLoc = new FormControl(false, {
+            nonNullable: true,
+        });
+        this.hideFilter = new FormControl(false, {
+            nonNullable: true,
+        });
+        this.filter$ = of({});
+        this.nodes$ = of([]);
+        this.label = new FormControl(null);
+        this.form = new FormGroup({
+            label: this.label,
+        });
+    }
+    ngOnInit() {
+        const store = this.store();
+        if (!store) {
+            console.error('Store not available - service input is required');
+            return;
+        }
+        // setup observables (delayed because we require store to be available)
+        this.nodes$ = store.nodes$;
+        this.filter$ = store.filter$;
+        if (!store.getNodes().length) {
+            this.loading.set(true);
+            store.setFilter({}).finally(() => {
+                this.loading.set(false);
+                console.log('nodes loaded', store.getNodes());
+            });
+        }
+        // subscribe to changes state
+        const service = this.service();
+        if (service) {
+            this._sub = service.hasChanges$.subscribe((hasChanges) => {
+                this.changesStateChange.emit(hasChanges);
+            });
+        }
+    }
+    ngOnDestroy() {
+        this._sub?.unsubscribe();
+    }
+    reset() {
+        const store = this.store();
+        if (!store)
+            return;
+        this.loading.set(true);
+        store.reset().finally(() => {
+            this.loading.set(false);
+        });
+    }
+    onToggleExpanded(node) {
+        const store = this.store();
+        if (!store)
+            return;
+        this.loading.set(true);
+        if (node.expanded) {
+            store.collapse(node.id).finally(() => {
+                this.loading.set(false);
+            });
+        }
+        else {
+            store.expand(node.id).finally(() => {
+                this.loading.set(false);
+            });
+        }
+    }
+    onPageChangeRequest(request) {
+        const store = this.store();
+        if (!store)
+            return;
+        this.loading.set(true);
+        store.changePage(request.node.id, request.paging.pageNumber).finally(() => {
+            this.loading.set(false);
+        });
+    }
+    onFilterChange(filter) {
+        const store = this.store();
+        if (!store)
+            return;
+        console.log('filter change', filter);
+        this.loading.set(true);
+        store.setFilter(filter || {}).finally(() => {
+            this.loading.set(false);
+        });
+    }
+    onEditFilterRequest(node) {
+        const store = this.store();
+        if (!store)
+            return;
+        const dialogRef = this._dialog.open(ThesaurusPagedTreeFilterComponent, {
+            data: {
+                filter: node.filter,
+            },
+        });
+        dialogRef.afterClosed().subscribe((filter) => {
+            if (filter === null) {
+                store.setNodeFilter(node.id, null);
+            }
+            else if (filter) {
+                store.setNodeFilter(node.id, filter);
+            }
+        });
+    }
+    expandAll() {
+        const store = this.store();
+        if (!store)
+            return;
+        store.expandAll();
+    }
+    collapseAll() {
+        const store = this.store();
+        if (!store)
+            return;
+        store.collapseAll();
+    }
+    clear() {
+        const store = this.store();
+        if (!store)
+            return;
+        store.clear();
+    }
+    onNodeClick(node) {
+        this.selectedNode.set(node);
+        if (!node.hasChildren) {
+            this.nodePick.emit(node);
+        }
+    }
+    findLabels() {
+        const store = this.store();
+        if (!store || !this.label.value)
+            return;
+        store.findLabels(this.label.value);
+    }
+    removeHilites() {
+        const store = this.store();
+        if (!store)
+            return;
+        store.removeHilites();
+    }
+    // editing operations
+    editEntry(entry) {
+        return new Promise((resolve) => {
+            const dialogRef = this._dialog.open(ThesEntryEditorComponent, {
+                data: entry,
+            });
+            dialogRef.afterClosed().subscribe((result) => {
+                resolve(result);
+            });
+        });
+    }
+    async addChild() {
+        const store = this.store();
+        const selected = this.selectedNode();
+        if (!store || !selected) {
+            this._snackBar.open('Please select a node first', 'Close', {
+                duration: 2000,
+            });
+            return;
+        }
+        // get the current entries to check for duplicates
+        const currentService = this.service();
+        if (!currentService)
+            return;
+        // determine the parent ID for the new child
+        const parentKey = selected.key; // original entry ID
+        // edit the new entry
+        const newEntry = await this.editEntry({
+            id: '',
+            value: '',
+            hierarchical: true,
+            parentId: parentKey,
+            idExists: (id) => currentService.getCurrentEntries().some((e) => e.id === id),
+        });
+        if (!newEntry) {
+            return;
+        }
+        store
+            .addChild(selected.id, {
+            label: newEntry.value,
+            y: 0, // will be calculated by the store
+            x: 0, // will be calculated by the store
+            tag: selected.tag,
+        })
+            .then((result) => {
+            if (result) {
+                // update the temporary node with the user-provided ID,
+                // this will be handled in the service's nodeToEntry method
+                result._userProvidedId = newEntry.id;
+                this._snackBar.open('Child added successfully', 'Close', {
+                    duration: 2000,
+                });
+            }
+        });
+    }
+    async addSibling() {
+        const store = this.store();
+        const selected = this.selectedNode();
+        if (!store || !selected) {
+            this._snackBar.open('Please select a node first', 'Close', {
+                duration: 2000,
+            });
+            return;
+        }
+        // get the current entries to check for duplicates
+        const currentService = this.service();
+        if (!currentService)
+            return;
+        const currentEntries = currentService.getCurrentEntries();
+        const selectedKey = selected.key; // original entry ID
+        // determine the parent ID for the new sibling
+        const selectedParts = selectedKey.split('.');
+        const parentKey = selectedParts.length > 1 ? selectedParts.slice(0, -1).join('.') : '';
+        const newEntry = await this.editEntry({
+            id: '',
+            value: '',
+            hierarchical: true,
+            parentId: parentKey,
+            idExists: (id) => currentService.getCurrentEntries().some((e) => e.id === id),
+        });
+        if (!newEntry) {
+            return;
+        }
+        // check that the new ID has the same depth
+        if (newEntry.id.split('.').length !== selectedParts.length) {
+            this._snackBar.open(`Sibling must have same depth as "${selectedKey}"`, 'Close', { duration: 3000 });
+            return;
+        }
+        store
+            .addSibling(selected.id, {
+            label: newEntry.value,
+            tag: selected.tag,
+        })
+            .then((result) => {
+            if (result) {
+                // update the temporary node with the user-provided ID
+                result._userProvidedId = newEntry.id;
+                this._snackBar.open('Sibling added successfully', 'Close', {
+                    duration: 2000,
+                });
+            }
+        });
+    }
+    removeNode() {
+        const store = this.store();
+        const selected = this.selectedNode();
+        if (!store || !selected) {
+            this._snackBar.open('Please select a node first', 'Close', {
+                duration: 2000,
+            });
+            return;
+        }
+        const selectedKey = selected.key || `temp_${selected.id}`;
+        this._dialogService
+            .confirm('Confirm Deletion', `Delete "${selectedKey}" (${selected.label}) and all its descendants?`)
+            .subscribe((result) => {
+            if (!result) {
+                return;
+            }
+            store.removeNode(selected.id).then((result) => {
+                if (result) {
+                    this.selectedNode.set(null);
+                    this._snackBar.open('Node removed successfully', 'Close', {
+                        duration: 2000,
+                    });
+                }
+            });
+        });
+    }
+    async editNode() {
+        const currentService = this.service();
+        if (!currentService)
+            return;
+        const store = this.store();
+        const selected = this.selectedNode();
+        if (!store || !selected) {
+            this._snackBar.open('Please select a node first', 'Close', {
+                duration: 2000,
+            });
+            return;
+        }
+        const selectedKey = selected.key;
+        const isNewNode = selected.id < 0; // temporary ID means it's a new node
+        const newEntry = await this.editEntry({
+            id: selectedKey || '',
+            value: selected.label,
+            idLocked: !isNewNode,
+            idExists: (id) => currentService.getCurrentEntries().some((entry) => entry.id === id),
+        });
+        if (!newEntry)
+            return;
+        store
+            .replaceNode(selected.id, {
+            label: newEntry.value,
+            tag: selected.tag,
+        })
+            .then((result) => {
+            if (result) {
+                // update the temporary node with the user-provided ID if it's a new node
+                if (isNewNode) {
+                    result._userProvidedId = newEntry.id;
+                }
+                this._snackBar.open('Node updated successfully', 'Close', {
+                    duration: 2000,
+                });
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EditableThesaurusBrowserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: EditableThesaurusBrowserComponent, isStandalone: true, selector: "cadmus-editable-thesaurus-browser", inputs: { service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: false, transformFunction: null }, hasRootFilter: { classPropertyName: "hasRootFilter", publicName: "hasRootFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodePick: "nodePick", changesStateChange: "changesStateChange" }, ngImport: i0, template: "<div id=\"container\">\r\n  <!-- filters -->\r\n  <div id=\"filters\" class=\"form-row\">\r\n    <form [formGroup]=\"form\" (submit)=\"findLabels()\">\r\n      <fieldset>\r\n        <legend>finder</legend>\r\n        <div 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            {\r\n            <mat-error>label required</mat-error>\r\n            }\r\n          </mat-form-field>\r\n          <div class=\"form-row\" style=\"gap: 0\">\r\n            <button type=\"submit\" mat-icon-button class=\"mat-primary\">\r\n              <mat-icon>search</mat-icon>\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              mat-icon-button\r\n              (click)=\"removeHilites()\"\r\n              class=\"mat-warn\"\r\n            >\r\n              <mat-icon>clear</mat-icon>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </fieldset>\r\n    </form>\r\n    @if (hasRootFilter()) {\r\n    <fieldset>\r\n      <legend>global filter</legend>\r\n      <cadmus-thesaurus-paged-tree-filter\r\n        [filter]=\"filter$ | async\"\r\n        (filterChange)=\"onFilterChange($event)\"\r\n      />\r\n    </fieldset>\r\n    }\r\n  </div>\r\n\r\n  <!-- editing actions -->\r\n  <div class=\"editing-actions\">\r\n    <button\r\n      type=\"button\"\r\n      mat-raised-button\r\n      color=\"primary\"\r\n      [disabled]=\"!selectedNode()\"\r\n      [matMenuTriggerFor]=\"addMenu\"\r\n    >\r\n      <mat-icon>add</mat-icon>\r\n      add\r\n    </button>\r\n\r\n    <mat-menu #addMenu=\"matMenu\">\r\n      <button type=\"button\" mat-menu-item (click)=\"addChild()\">\r\n        <mat-icon>subdirectory_arrow_right</mat-icon>\r\n        add child\r\n      </button>\r\n      <button type=\"button\" mat-menu-item (click)=\"addSibling()\">\r\n        <mat-icon>arrow_right_alt</mat-icon>\r\n        add sibling\r\n      </button>\r\n    </mat-menu>\r\n\r\n    <button\r\n      type=\"button\"\r\n      mat-stroked-button\r\n      color=\"accent\"\r\n      [disabled]=\"!selectedNode()\"\r\n      (click)=\"editNode()\"\r\n    >\r\n      <mat-icon>edit</mat-icon>\r\n      edit\r\n    </button>\r\n\r\n    <button\r\n      type=\"button\"\r\n      mat-stroked-button\r\n      color=\"warn\"\r\n      [disabled]=\"!selectedNode()\"\r\n      (click)=\"removeNode()\"\r\n    >\r\n      <mat-icon>delete</mat-icon>\r\n      remove\r\n    </button>\r\n\r\n    @if (selectedNode()) {\r\n    <span class=\"selected-info\"> selected: {{ selectedNode()!.label }} </span>\r\n    }\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\r\n        class=\"button-row\"\r\n        [class.hilite]=\"node.hilite\"\r\n        [class.selected]=\"selectedNode()?.id === node.id\"\r\n        (click)=\"onNodeClick(node)\"\r\n      >\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      </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: ["#container{padding:16px}.form-row{display:flex;align-items:center;gap:8px;margin-bottom:16px}.editing-actions{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:12px;border:1px solid #e0e0e0;border-radius:4px;background-color:#fafafa}.selected-info{margin-left:auto;font-style:italic;color:#666}.button-row{cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s}.button-row:hover{background-color:#f5f5f5}.button-row.selected{background-color:#e3f2fd;border:1px solid #2196f3}.button-row.hilite{background-color:#fff3e0}#tree{overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.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.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: i6.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: MatMenuModule }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i8.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: ThesaurusPagedTreeFilterComponent, selector: "cadmus-thesaurus-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: "21.1.0", ngImport: i0, type: EditableThesaurusBrowserComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cadmus-editable-thesaurus-browser', imports: [
+                        AsyncPipe,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatCheckboxModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatMenuModule,
+                        MatProgressBarModule,
+                        MatTooltipModule,
+                        ThesaurusPagedTreeFilterComponent,
+                        BrowserTreeNodeComponent,
+                    ], template: "<div id=\"container\">\r\n  <!-- filters -->\r\n  <div id=\"filters\" class=\"form-row\">\r\n    <form [formGroup]=\"form\" (submit)=\"findLabels()\">\r\n      <fieldset>\r\n        <legend>finder</legend>\r\n        <div 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            {\r\n            <mat-error>label required</mat-error>\r\n            }\r\n          </mat-form-field>\r\n          <div class=\"form-row\" style=\"gap: 0\">\r\n            <button type=\"submit\" mat-icon-button class=\"mat-primary\">\r\n              <mat-icon>search</mat-icon>\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              mat-icon-button\r\n              (click)=\"removeHilites()\"\r\n              class=\"mat-warn\"\r\n            >\r\n              <mat-icon>clear</mat-icon>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </fieldset>\r\n    </form>\r\n    @if (hasRootFilter()) {\r\n    <fieldset>\r\n      <legend>global filter</legend>\r\n      <cadmus-thesaurus-paged-tree-filter\r\n        [filter]=\"filter$ | async\"\r\n        (filterChange)=\"onFilterChange($event)\"\r\n      />\r\n    </fieldset>\r\n    }\r\n  </div>\r\n\r\n  <!-- editing actions -->\r\n  <div class=\"editing-actions\">\r\n    <button\r\n      type=\"button\"\r\n      mat-raised-button\r\n      color=\"primary\"\r\n      [disabled]=\"!selectedNode()\"\r\n      [matMenuTriggerFor]=\"addMenu\"\r\n    >\r\n      <mat-icon>add</mat-icon>\r\n      add\r\n    </button>\r\n\r\n    <mat-menu #addMenu=\"matMenu\">\r\n      <button type=\"button\" mat-menu-item (click)=\"addChild()\">\r\n        <mat-icon>subdirectory_arrow_right</mat-icon>\r\n        add child\r\n      </button>\r\n      <button type=\"button\" mat-menu-item (click)=\"addSibling()\">\r\n        <mat-icon>arrow_right_alt</mat-icon>\r\n        add sibling\r\n      </button>\r\n    </mat-menu>\r\n\r\n    <button\r\n      type=\"button\"\r\n      mat-stroked-button\r\n      color=\"accent\"\r\n      [disabled]=\"!selectedNode()\"\r\n      (click)=\"editNode()\"\r\n    >\r\n      <mat-icon>edit</mat-icon>\r\n      edit\r\n    </button>\r\n\r\n    <button\r\n      type=\"button\"\r\n      mat-stroked-button\r\n      color=\"warn\"\r\n      [disabled]=\"!selectedNode()\"\r\n      (click)=\"removeNode()\"\r\n    >\r\n      <mat-icon>delete</mat-icon>\r\n      remove\r\n    </button>\r\n\r\n    @if (selectedNode()) {\r\n    <span class=\"selected-info\"> selected: {{ selectedNode()!.label }} </span>\r\n    }\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\r\n        class=\"button-row\"\r\n        [class.hilite]=\"node.hilite\"\r\n        [class.selected]=\"selectedNode()?.id === node.id\"\r\n        (click)=\"onNodeClick(node)\"\r\n      >\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      </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: ["#container{padding:16px}.form-row{display:flex;align-items:center;gap:8px;margin-bottom:16px}.editing-actions{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:12px;border:1px solid #e0e0e0;border-radius:4px;background-color:#fafafa}.selected-info{margin-left:auto;font-style:italic;color:#666}.button-row{cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s}.button-row:hover{background-color:#f5f5f5}.button-row.selected{background-color:#e3f2fd;border:1px solid #2196f3}.button-row.hilite{background-color:#fff3e0}#tree{overflow-y:auto}\n"] }]
+        }], propDecorators: { service: [{ type: i0.Input, args: [{ isSignal: true, alias: "service", required: false }] }], hasRootFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasRootFilter", required: false }] }], nodePick: [{ type: i0.Output, args: ["nodePick"] }], changesStateChange: [{ type: i0.Output, args: ["changesStateChange"] }] } });
+
+/**
+ * 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.
+ */
+function 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 tree nodes from all the thesaurus entries from a specific
+ * thesaurus, assuming that entry IDs are hierarchical and
+ * separated by dots (.).
+ * Nodes are received all at once for a thesaurus, so this is essentially
+ * an adapter to the paged tree store service interface.
+ * The entries are a flat list where hierarchy is implied by the IDs:
+ * for instance, "animal.mammal.dog" is a child of "animal.mammal"
+ * which is a child of "animal". Numeric IDs are added to each node
+ * based on the order of entries to ensure stable IDs.
+ * The label of each node can be rendered as-is from the entry value,
+ * or a custom rendering function can be provided to the constructor.
+ */
+class StaticThesaurusPagedTreeStoreService {
+    /**
+     * Constructor.
+     * @param entries The thesaurus entries.
+     * @param _renderLabel An optional function to render the label
+     * of each node.
+     */
+    constructor(entries, _renderLabel) {
+        this._renderLabel = _renderLabel;
+        this._nodes = [];
+        this._built = false;
+        // assign a number to each entry for stable IDs
+        this._entries = entries.map((entry, index) => ({
+            ...entry,
+            n: index + 1,
+        }));
+    }
+    /**
+     * Ensure that nodes have been built from entries.
+     */
+    ensureNodes() {
+        // lazily build the nodes only once
+        if (this._built) {
+            return;
+        }
+        // create a map of sibling numbers (x) where:
+        // - key=node.id (0 is used for the virtual root);
+        // - value=max x value for that parent.
+        const xMap = new Map();
+        // build nodes from entries
+        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) => {
+            // filter by parentId (required by tree structure)
+            if (filter.parentId !== undefined && filter.parentId !== null) {
+                if (n.parentId !== filter.parentId) {
+                    return false;
+                }
+            }
+            else {
+                if (n.parentId) {
+                    return false;
+                }
+            }
+            // filter by label
+            if (filter.label) {
+                const filterValue = filter.label.toLowerCase();
+                if (!n.label.toLowerCase().includes(filterValue)) {
+                    return false;
+                }
+            }
+            return true;
+        });
+        // 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 readonly paged tree browser for thesaurus entries. This is a lower-level component
+ * used as an adapter between the generic paged tree browser and the thesaurus entries
+ * data model.
+ */
+class ThesaurusBrowserComponent {
+    constructor() {
+        this._dialog = inject(MatDialog);
+        /**
+         * The service to use to load the nodes.
+         */
+        this.service = input(new StaticThesaurusPagedTreeStoreService([], renderLabelFromLastColon), ...(ngDevMode ? [{ debugName: "service" }] : []));
+        /**
+         * Emitted when a node is clicked.
+         */
+        this.nodePick = output();
+        /**
+         * The store instance, built from the service.
+         */
+        this.store = computed(() => {
+            const service = this.service();
+            const store = new PagedTreeStore(service);
+            this.nodes$ = store.nodes$;
+            this.filter$ = store.filter$;
+            return store;
+        }, ...(ngDevMode ? [{ debugName: "store" }] : []));
+        this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        this.debug = new FormControl(false, {
+            nonNullable: true,
+        });
+        this.hideLoc = new FormControl(false, {
+            nonNullable: true,
+        });
+        this.hideFilter = new FormControl(false, {
+            nonNullable: true,
+        });
+        this.label = new FormControl(null);
+        this.form = new FormGroup({
+            label: this.label,
+        });
+        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(ThesaurusPagedTreeFilterComponent, {
+            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 { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ThesaurusBrowserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: ThesaurusBrowserComponent, isStandalone: true, selector: "cadmus-thesaurus-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\r\n        type=\"button\"\r\n        mat-icon-button\r\n        (click)=\"removeHilites()\"\r\n        class=\"mat-warn\"\r\n      >\r\n        <mat-icon>clear</mat-icon>\r\n      </button>\r\n    </form>\r\n    <fieldset>\r\n      <legend>filter</legend>\r\n      <cadmus-thesaurus-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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.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.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: i6.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: i8.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: ThesaurusPagedTreeFilterComponent, selector: "cadmus-thesaurus-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: "21.1.0", ngImport: i0, type: ThesaurusBrowserComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cadmus-thesaurus-browser', imports: [
+                        AsyncPipe,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatCheckboxModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatProgressBarModule,
+                        MatTooltipModule,
+                        ThesaurusPagedTreeFilterComponent,
+                        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\r\n        type=\"button\"\r\n        mat-icon-button\r\n        (click)=\"removeHilites()\"\r\n        class=\"mat-warn\"\r\n      >\r\n        <mat-icon>clear</mat-icon>\r\n      </button>\r\n    </form>\r\n    <fieldset>\r\n      <legend>filter</legend>\r\n      <cadmus-thesaurus-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: () => [], propDecorators: { service: [{ type: i0.Input, args: [{ isSignal: true, alias: "service", required: false }] }], nodePick: [{ type: i0.Output, args: ["nodePick"] }] } });
+
+/**
+ * Thesaurus tree component.
+ * This component displays a set of hierarchical thesaurus entries
+ * in a tree, provided that each entry marks its hierarchy with
+ * dots. For instance, say you have the hierarchy "furniture" -
+ * "type" - "color". You might have an entry whose ID is
+ * "furniture.table.red", with a sibling "furniture.table.green",
+ * and a parent "furniture.table". This parent is there only to
+ * provide a label to the parent node, but only leaf nodes can be
+ * picked by the user. Whenever one is picked, the entryChange
+ * event is emitted.
+ */
+class ThesaurusTreeComponent {
+    constructor() {
+        /**
+         * The thesaurus entries.
+         */
+        this.entries = input(...(ngDevMode ? [undefined, { debugName: "entries" }] : []));
+        /**
+         * The optional node label rendering function. Note that even if you
+         * specify a label renderer function, the entryChange event always
+         * emits the original label.
+         */
+        this.renderLabel = input(renderLabelFromLastColon, ...(ngDevMode ? [{ debugName: "renderLabel" }] : []));
+        /**
+         * Fired when a thesaurus entry is selected.
+         */
+        this.entryChange = output();
+        /**
+         * The tree store service, dependent on the current entries and renderLabel.
+         */
+        this.service = computed(() => {
+            const entries = this.entries();
+            return new StaticThesaurusPagedTreeStoreService(entries || [], this.renderLabel());
+        }, ...(ngDevMode ? [{ debugName: "service" }] : []));
+        /**
+         * The filter component class to use.
+         */
+        this.filterComponent = ThesaurusPagedTreeFilterComponent;
+    }
+    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);
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ThesaurusTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.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-thesaurus-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: ThesaurusBrowserComponent, selector: "cadmus-thesaurus-browser", inputs: ["service"], outputs: ["nodePick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ThesaurusTreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cadmus-thesaurus-tree', imports: [FormsModule, ReactiveFormsModule, ThesaurusBrowserComponent], template: "<div>\r\n  <!-- tree -->\r\n  @if (service() && entries()?.length) {\r\n  <div class=\"tree-wrapper\">\r\n    <cadmus-thesaurus-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"] }]
+        }], propDecorators: { entries: [{ type: i0.Input, args: [{ isSignal: true, alias: "entries", required: false }] }], renderLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderLabel", required: false }] }], entryChange: [{ type: i0.Output, args: ["entryChange"] }] } });
+
+/**
+ * The prefix added to custom entries' IDs.
+ */
+const CUSTOM_ENTRY_PREFIX = '$';
+/**
+ * A picker component for thesaurus entries.
+ * This component allows picking one or more entries from a given thesaurus.
+ * In its collapsed state, it shows the picked entries as chips; when
+ * expanded, it shows the thesaurus tree to pick from. Custom entries
+ * (not in the thesaurus) can be optionally allowed.
+ */
+class ThesaurusEntriesPickerComponent {
+    constructor(formBuilder) {
+        /**
+         * The thesaurus entries to pick from (required).
+         */
+        this.availableEntries = input.required(...(ngDevMode ? [{ debugName: "availableEntries" }] : []));
+        /**
+         * The picked entries.
+         */
+        this.entries = model([], ...(ngDevMode ? [{ debugName: "entries" }] : []));
+        /**
+         * True to show the entries with labels shortened according to
+         * their hierarchy.
+         */
+        this.hierarchicLabels = input(false, ...(ngDevMode ? [{ debugName: "hierarchicLabels" }] : []));
+        /**
+         * True to automatically sort the picked entries (disables drag-and-drop).
+         * When false, entries can be manually reordered via drag-and-drop.
+         */
+        this.autoSort = input(false, ...(ngDevMode ? [{ debugName: "autoSort" }] : []));
+        /**
+         * True to allow custom values (not in the entries list).
+         */
+        this.allowCustom = input(false, ...(ngDevMode ? [{ debugName: "allowCustom" }] : []));
+        /**
+         * The minimum number of entries to pick.
+         */
+        this.minEntries = input(0, ...(ngDevMode ? [{ debugName: "minEntries" }] : []));
+        /**
+         * The maximum number of entries to pick (0=unlimited).
+         */
+        this.maxEntries = input(0, ...(ngDevMode ? [{ debugName: "maxEntries" }] : []));
+        /**
+         * True when the picker is expanded (showing the entries list).
+         */
+        this.expanded = model(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+        /**
+         * The message to show when there are no picked entries.
+         */
+        this.emptyMessage = input('no entries', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
+        /**
+         * The number of remaining entries that can be picked (0=unlimited).
+         * This is displayed only if maxEntries > 1.
+         */
+        this.remaining = computed(() => {
+            if (this.maxEntries() > 0) {
+                return this.maxEntries() - this.entries().length;
+            }
+            return 0;
+        }, ...(ngDevMode ? [{ debugName: "remaining" }] : []));
+        // need arrow function to use 'this'
+        this.renderLabel = (label) => {
+            return this.hierarchicLabels() ? renderLabelFromLastColon(label) : label;
+        };
+        this.id = formBuilder.control('', {
+            validators: [Validators.required, Validators.maxLength(100)],
+            nonNullable: true,
+        });
+        this.value = formBuilder.control('', {
+            validators: [Validators.required, Validators.maxLength(500)],
+            nonNullable: true,
+        });
+        this.form = formBuilder.group({
+            id: this.id,
+            value: this.value,
+        });
+        // if auto-sort is turned on and we have entries, sort them
+        effect(() => {
+            // only track autoSort() changes, not entries()
+            const shouldSort = this.autoSort();
+            if (shouldSort) {
+                // use untracked to read entries without creating a dependency
+                const currentEntries = untracked(() => this.entries());
+                if (currentEntries.length > 1) {
+                    const entries = [...currentEntries];
+                    this.sortEntries(entries);
+                    this.entries.set(entries);
+                }
+            }
+        });
+    }
+    sortEntries(entries) {
+        entries.sort((a, b) => {
+            const aIsCustom = a.id?.startsWith(CUSTOM_ENTRY_PREFIX) ?? false;
+            const bIsCustom = b.id?.startsWith(CUSTOM_ENTRY_PREFIX) ?? false;
+            if (aIsCustom !== bIsCustom) {
+                // place custom entries after non-custom ones
+                return aIsCustom ? 1 : -1;
+            }
+            // same kind: sort by label/value
+            return a.value.localeCompare(b.value);
+        });
+    }
+    onEntryChange(entry) {
+        // check if already present
+        if (this.entries().some((e) => e.id === entry.id)) {
+            return;
+        }
+        // check if limit is reached
+        if (this.maxEntries() && this.entries().length >= this.maxEntries()) {
+            return;
+        }
+        const entries = [...this.entries()];
+        entries.push(entry);
+        if (this.autoSort()) {
+            this.sortEntries(entries);
+        }
+        this.entries.set(entries);
+    }
+    addCustomEntry() {
+        if (this.form.invalid) {
+            return;
+        }
+        // create the custom entry
+        const customEntry = {
+            id: CUSTOM_ENTRY_PREFIX + this.id.value,
+            value: this.value.value,
+        };
+        // check if already present
+        if (this.entries().some((e) => e.id === customEntry.id)) {
+            return;
+        }
+        // check if limit is reached
+        if (this.maxEntries() && this.entries().length >= this.maxEntries()) {
+            return;
+        }
+        const entries = [...this.entries()];
+        entries.push(customEntry);
+        if (this.autoSort()) {
+            this.sortEntries(entries);
+        }
+        this.entries.set(entries);
+        this.form.reset();
+    }
+    removeEntry(entry) {
+        const entries = [...this.entries().filter((e) => e.id !== entry.id)];
+        this.entries.set(entries);
+    }
+    clear() {
+        this.entries.set([]);
+        // if min > 0, expand the picker
+        if (this.minEntries() > 0 && !this.expanded()) {
+            setTimeout(() => {
+                this.expanded.set(true);
+            }, 0);
+        }
+    }
+    onDrop(event) {
+        const entries = [...this.entries()];
+        moveItemInArray(entries, event.previousIndex, event.currentIndex);
+        this.entries.set(entries);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ThesaurusEntriesPickerComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: ThesaurusEntriesPickerComponent, isStandalone: true, selector: "cadmus-thesaurus-entries-picker", inputs: { availableEntries: { classPropertyName: "availableEntries", publicName: "availableEntries", isSignal: true, isRequired: true, transformFunction: null }, entries: { classPropertyName: "entries", publicName: "entries", isSignal: true, isRequired: false, transformFunction: null }, hierarchicLabels: { classPropertyName: "hierarchicLabels", publicName: "hierarchicLabels", isSignal: true, isRequired: false, transformFunction: null }, autoSort: { classPropertyName: "autoSort", publicName: "autoSort", isSignal: true, isRequired: false, transformFunction: null }, allowCustom: { classPropertyName: "allowCustom", publicName: "allowCustom", isSignal: true, isRequired: false, transformFunction: null }, minEntries: { classPropertyName: "minEntries", publicName: "minEntries", isSignal: true, isRequired: false, transformFunction: null }, maxEntries: { classPropertyName: "maxEntries", publicName: "maxEntries", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { entries: "entriesChange", expanded: "expandedChange" }, ngImport: i0, template: "<div id=\"container\">\r\n  <!-- picked entries -->\r\n  <div id=\"picked\" class=\"form-row\">\r\n    <!-- count -->\r\n    <span class=\"nr\" [class.error]=\"entries().length < minEntries()\">{{\r\n      entries().length\r\n    }}</span>\r\n    <!-- max-->\r\n    @if (maxEntries() > 1) {\r\n    <span class=\"muted\">/{{ maxEntries() }}</span>\r\n    @if (remaining()) {\r\n    <span class=\"muted\">: -{{ remaining() }}</span>\r\n    } }\r\n    <!-- min -->\r\n    @if (minEntries()) {\r\n    <!-- min with error -->\r\n    @if (entries().length < minEntries()) {\r\n    <span class=\"error\"> (min {{ minEntries() }})</span>\r\n    }\r\n    <!-- min without error -->\r\n    @else {\r\n    <span class=\"muted\"> (min {{ minEntries() }})</span>\r\n    } }\r\n    <!-- list -->\r\n    <mat-chip-listbox\r\n      [cdkDropListDisabled]=\"autoSort()\"\r\n      cdkDropList\r\n      cdkDropListOrientation=\"horizontal\"\r\n      (cdkDropListDropped)=\"onDrop($event)\"\r\n      class=\"chip-list\"\r\n    >\r\n      @for (e of entries(); track e.id; let idx = $index) {\r\n      <div class=\"chip-wrapper\">\r\n        <mat-chip-option\r\n          [cdkDragDisabled]=\"autoSort()\"\r\n          cdkDrag\r\n          [class.error]=\"!allowCustom() && e.id.startsWith('$')\"\r\n        >\r\n          {{ renderLabel(e.value) }}\r\n          <button\r\n            type=\"button\"\r\n            matChipRemove\r\n            (click)=\"removeEntry(e)\"\r\n            aria-label=\"Remove entry\"\r\n          >\r\n            <mat-icon class=\"mat-warn\">cancel</mat-icon>\r\n          </button>\r\n        </mat-chip-option>\r\n      </div>\r\n      } @empty {\r\n      <span class=\"muted empty-message\">{{ emptyMessage() }}</span>\r\n      }\r\n    </mat-chip-listbox>\r\n\r\n    <!-- clear -->\r\n    @if (entries().length > 0) {\r\n    <button\r\n      type=\"button\"\r\n      mat-icon-button\r\n      matTooltip=\"Remove all entries\"\r\n      (click)=\"clear()\"\r\n      [disabled]=\"entries().length === 0\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    }\r\n    <!-- toggler -->\r\n    <button\r\n      type=\"button\"\r\n      mat-icon-button\r\n      matTooltip=\"Toggle picker\"\r\n      (click)=\"expanded.set(!expanded())\"\r\n    >\r\n      @if (expanded()) {\r\n      <mat-icon class=\"mat-primary\">publish</mat-icon>\r\n      } @if (!expanded()) {\r\n      <mat-icon class=\"mat-primary\">get_app</mat-icon>\r\n      }\r\n    </button>\r\n  </div>\r\n\r\n  <!-- entries picker -->\r\n  <div id=\"picker\">\r\n    <mat-expansion-panel\r\n      [expanded]=\"expanded()\"\r\n      (expandedChange)=\"expanded.set($event)\"\r\n    >\r\n      <div>\r\n        <fieldset>\r\n          <legend>available</legend>\r\n          <cadmus-thesaurus-tree\r\n            [entries]=\"availableEntries()\"\r\n            [renderLabel]=\"renderLabel\"\r\n            (entryChange)=\"onEntryChange($event)\"\r\n          />\r\n        </fieldset>\r\n      </div>\r\n      @if (allowCustom()) {\r\n      <div>\r\n        <form [formGroup]=\"form\" (submit)=\"addCustomEntry()\">\r\n          <fieldset>\r\n            <legend>custom</legend>\r\n            <div class=\"form-row\">\r\n              <mat-form-field>\r\n                <input\r\n                  matInput\r\n                  type=\"text\"\r\n                  [formControl]=\"id\"\r\n                  placeholder=\"ID\"\r\n                />\r\n              </mat-form-field>\r\n              <mat-form-field>\r\n                <input\r\n                  matInput\r\n                  type=\"text\"\r\n                  [formControl]=\"value\"\r\n                  placeholder=\"label\"\r\n                />\r\n              </mat-form-field>\r\n              <button\r\n                type=\"submit\"\r\n                mat-icon-button\r\n                matTooltip=\"Add custom entry\"\r\n                [disabled]=\"\r\n                  !form.valid ||\r\n                  (maxEntries() > 0 && entries().length >= maxEntries())\r\n                \"\r\n              >\r\n                <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n              </button>\r\n            </div>\r\n          </fieldset>\r\n        </form>\r\n      </div>\r\n      }\r\n    </mat-expansion-panel>\r\n  </div>\r\n</div>\r\n", styles: ["#container{width:100%}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.error{color:#8b0000}.nr{font-weight:700}.muted{color:gray}fieldset{border:1px solid silver;border-radius:8px;padding:8px 16px}.chip-list{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:4px}.chip-wrapper{display:inline-flex;position:relative;margin:2px}.chip-list mat-chip-option:not([cdkDragDisabled]){cursor:grab}.chip-list mat-chip-option:not([cdkDragDisabled]):active{cursor:grabbing}.chip-list mat-chip-option[cdkDragDisabled]{cursor:default}.chip-list .empty-message{margin-left:0}.chip-list mat-chip-option.mat-mdc-chip-selected{background-color:inherit}.chip-list mat-chip-option:not(.error).mat-mdc-chip-selected{background-color:#e0e0e0}mat-chip-option.error{background-color:#ffebee!important;border:1px solid darkred}.cdk-drag-preview{opacity:.95;box-shadow:0 8px 20px #0006;transform:rotate(3deg)}.drag-placeholder{width:4px;background:#1976d2;border-radius:2px;height:36px;box-shadow:0 0 8px #1976d299;animation:pulse .5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.6;transform:scaleY(1)}50%{opacity:1;transform:scaleY(1.1)}}.chip-list .cdk-drag-placeholder{opacity:0;width:4px;min-width:4px}.chip-wrapper{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .chip-wrapper:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .chip-wrapper{will-change:transform}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ThesaurusTreeComponent, selector: "cadmus-thesaurus-tree", inputs: ["entries", "renderLabel"], outputs: ["entryChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ThesaurusEntriesPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cadmus-thesaurus-entries-picker', imports: [
+                        ReactiveFormsModule,
+                        CdkDropList,
+                        CdkDrag,
+                        MatChipListbox,
+                        MatChipOption,
+                        MatChipRemove,
+                        MatExpansionPanel,
+                        MatFormField,
+                        MatIconButton,
+                        MatIcon,
+                        MatInput,
+                        MatTooltip,
+                        ThesaurusTreeComponent,
+                    ], template: "<div id=\"container\">\r\n  <!-- picked entries -->\r\n  <div id=\"picked\" class=\"form-row\">\r\n    <!-- count -->\r\n    <span class=\"nr\" [class.error]=\"entries().length < minEntries()\">{{\r\n      entries().length\r\n    }}</span>\r\n    <!-- max-->\r\n    @if (maxEntries() > 1) {\r\n    <span class=\"muted\">/{{ maxEntries() }}</span>\r\n    @if (remaining()) {\r\n    <span class=\"muted\">: -{{ remaining() }}</span>\r\n    } }\r\n    <!-- min -->\r\n    @if (minEntries()) {\r\n    <!-- min with error -->\r\n    @if (entries().length < minEntries()) {\r\n    <span class=\"error\"> (min {{ minEntries() }})</span>\r\n    }\r\n    <!-- min without error -->\r\n    @else {\r\n    <span class=\"muted\"> (min {{ minEntries() }})</span>\r\n    } }\r\n    <!-- list -->\r\n    <mat-chip-listbox\r\n      [cdkDropListDisabled]=\"autoSort()\"\r\n      cdkDropList\r\n      cdkDropListOrientation=\"horizontal\"\r\n      (cdkDropListDropped)=\"onDrop($event)\"\r\n      class=\"chip-list\"\r\n    >\r\n      @for (e of entries(); track e.id; let idx = $index) {\r\n      <div class=\"chip-wrapper\">\r\n        <mat-chip-option\r\n          [cdkDragDisabled]=\"autoSort()\"\r\n          cdkDrag\r\n          [class.error]=\"!allowCustom() && e.id.startsWith('$')\"\r\n        >\r\n          {{ renderLabel(e.value) }}\r\n          <button\r\n            type=\"button\"\r\n            matChipRemove\r\n            (click)=\"removeEntry(e)\"\r\n            aria-label=\"Remove entry\"\r\n          >\r\n            <mat-icon class=\"mat-warn\">cancel</mat-icon>\r\n          </button>\r\n        </mat-chip-option>\r\n      </div>\r\n      } @empty {\r\n      <span class=\"muted empty-message\">{{ emptyMessage() }}</span>\r\n      }\r\n    </mat-chip-listbox>\r\n\r\n    <!-- clear -->\r\n    @if (entries().length > 0) {\r\n    <button\r\n      type=\"button\"\r\n      mat-icon-button\r\n      matTooltip=\"Remove all entries\"\r\n      (click)=\"clear()\"\r\n      [disabled]=\"entries().length === 0\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n    </button>\r\n    }\r\n    <!-- toggler -->\r\n    <button\r\n      type=\"button\"\r\n      mat-icon-button\r\n      matTooltip=\"Toggle picker\"\r\n      (click)=\"expanded.set(!expanded())\"\r\n    >\r\n      @if (expanded()) {\r\n      <mat-icon class=\"mat-primary\">publish</mat-icon>\r\n      } @if (!expanded()) {\r\n      <mat-icon class=\"mat-primary\">get_app</mat-icon>\r\n      }\r\n    </button>\r\n  </div>\r\n\r\n  <!-- entries picker -->\r\n  <div id=\"picker\">\r\n    <mat-expansion-panel\r\n      [expanded]=\"expanded()\"\r\n      (expandedChange)=\"expanded.set($event)\"\r\n    >\r\n      <div>\r\n        <fieldset>\r\n          <legend>available</legend>\r\n          <cadmus-thesaurus-tree\r\n            [entries]=\"availableEntries()\"\r\n            [renderLabel]=\"renderLabel\"\r\n            (entryChange)=\"onEntryChange($event)\"\r\n          />\r\n        </fieldset>\r\n      </div>\r\n      @if (allowCustom()) {\r\n      <div>\r\n        <form [formGroup]=\"form\" (submit)=\"addCustomEntry()\">\r\n          <fieldset>\r\n            <legend>custom</legend>\r\n            <div class=\"form-row\">\r\n              <mat-form-field>\r\n                <input\r\n                  matInput\r\n                  type=\"text\"\r\n                  [formControl]=\"id\"\r\n                  placeholder=\"ID\"\r\n                />\r\n              </mat-form-field>\r\n              <mat-form-field>\r\n                <input\r\n                  matInput\r\n                  type=\"text\"\r\n                  [formControl]=\"value\"\r\n                  placeholder=\"label\"\r\n                />\r\n              </mat-form-field>\r\n              <button\r\n                type=\"submit\"\r\n                mat-icon-button\r\n                matTooltip=\"Add custom entry\"\r\n                [disabled]=\"\r\n                  !form.valid ||\r\n                  (maxEntries() > 0 && entries().length >= maxEntries())\r\n                \"\r\n              >\r\n                <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n              </button>\r\n            </div>\r\n          </fieldset>\r\n        </form>\r\n      </div>\r\n      }\r\n    </mat-expansion-panel>\r\n  </div>\r\n</div>\r\n", styles: ["#container{width:100%}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}.error{color:#8b0000}.nr{font-weight:700}.muted{color:gray}fieldset{border:1px solid silver;border-radius:8px;padding:8px 16px}.chip-list{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:4px}.chip-wrapper{display:inline-flex;position:relative;margin:2px}.chip-list mat-chip-option:not([cdkDragDisabled]){cursor:grab}.chip-list mat-chip-option:not([cdkDragDisabled]):active{cursor:grabbing}.chip-list mat-chip-option[cdkDragDisabled]{cursor:default}.chip-list .empty-message{margin-left:0}.chip-list mat-chip-option.mat-mdc-chip-selected{background-color:inherit}.chip-list mat-chip-option:not(.error).mat-mdc-chip-selected{background-color:#e0e0e0}mat-chip-option.error{background-color:#ffebee!important;border:1px solid darkred}.cdk-drag-preview{opacity:.95;box-shadow:0 8px 20px #0006;transform:rotate(3deg)}.drag-placeholder{width:4px;background:#1976d2;border-radius:2px;height:36px;box-shadow:0 0 8px #1976d299;animation:pulse .5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.6;transform:scaleY(1)}50%{opacity:1;transform:scaleY(1.1)}}.chip-list .cdk-drag-placeholder{opacity:0;width:4px;min-width:4px}.chip-wrapper{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .chip-wrapper:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .chip-wrapper{will-change:transform}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { availableEntries: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableEntries", required: true }] }], entries: [{ type: i0.Input, args: [{ isSignal: true, alias: "entries", required: false }] }, { type: i0.Output, args: ["entriesChange"] }], hierarchicLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "hierarchicLabels", required: false }] }], autoSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSort", required: false }] }], allowCustom: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustom", required: false }] }], minEntries: [{ type: i0.Input, args: [{ isSignal: true, alias: "minEntries", required: false }] }], maxEntries: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxEntries", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }] } });
+
+/**
+ * Editable version of the static thesaurus paged tree store service.
+ * This service allows editing operations on the flat ThesaurusEntry list
+ * while maintaining the tree structure implied by the hierarchical IDs.
+ */
+class EditableStaticThesaurusPagedTreeStoreService extends EditablePagedTreeStoreServiceBase {
+    constructor(entries, renderLabel) {
+        super();
+        this._entries = [...entries];
+        this._renderLabel = renderLabel;
+        this._staticService = new StaticThesaurusPagedTreeStoreService(this._entries, renderLabel);
+    }
+    fetchNodes(filter, pageNumber, pageSize, hasMockRoot) {
+        // update the static service with current entries and delegate,
+        // preserving the renderLabel function
+        this._staticService = new StaticThesaurusPagedTreeStoreService(this._entries, this._renderLabel);
+        return this._staticService.getNodes(filter, pageNumber, pageSize, hasMockRoot);
+    }
+    persistChanges(changes) {
+        console.log('=== SAVING CHANGES ===');
+        console.log('Changes to persist:', changes);
+        const idMap = new Map();
+        // process changes to update the flat entries list
+        for (const change of changes) {
+            switch (change.type) {
+                case ChangeOperationType.ADD:
+                    if (change.node) {
+                        const newEntry = this.nodeToEntry(change.node);
+                        if (newEntry) {
+                            const existingIndex = this._entries.findIndex((e) => e.id === newEntry.id);
+                            if (existingIndex === -1) {
+                                this._entries.push(newEntry);
+                                // map temporary ID to the new permanent ID (array index + 1)
+                                if (change.node.id < 0) {
+                                    const permanentId = this._entries.length;
+                                    idMap.set(change.node.id, permanentId);
+                                }
+                                console.log('Added entry:', newEntry);
+                            }
+                            else {
+                                console.log('Entry already exists, skipping:', newEntry.id);
+                            }
+                        }
+                    }
+                    break;
+                case ChangeOperationType.REMOVE:
+                    if (change.originalNode) {
+                        // use the 'key' property which contains the ThesaurusEntry string ID
+                        const nodeWithKey = change.originalNode;
+                        const entryKey = nodeWithKey.key;
+                        if (entryKey) {
+                            this.removeEntryAndDescendants(entryKey);
+                            console.log('Removed entry and descendants:', entryKey);
+                        }
+                        else {
+                            console.warn('Node missing key property:', change.originalNode);
+                        }
+                    }
+                    else if (change.id < 0) {
+                        console.log('Removed temporary node that was never persisted:', change.id);
+                    }
+                    else {
+                        console.warn('Remove operation missing originalNode for ID:', change.id);
+                    }
+                    break;
+                case ChangeOperationType.UPDATE:
+                    if (change.node && change.originalNode) {
+                        const nodeWithKey = change.originalNode;
+                        const entryKey = nodeWithKey.key;
+                        if (entryKey) {
+                            const entryToUpdate = this._entries.find((e) => e.id === entryKey);
+                            if (entryToUpdate) {
+                                const updatedEntry = this.nodeToEntry(change.node);
+                                if (updatedEntry) {
+                                    // preserve the original hierarchical ID
+                                    updatedEntry.id = entryToUpdate.id;
+                                    const index = this._entries.findIndex((e) => e.id === entryToUpdate.id);
+                                    if (index !== -1) {
+                                        this._entries[index] = updatedEntry;
+                                        console.log('Updated entry:', updatedEntry);
+                                    }
+                                }
+                            }
+                            else {
+                                console.warn('Could not find entry to update with key:', entryKey);
+                            }
+                        }
+                        else {
+                            console.warn('Update node missing key property:', change.originalNode);
+                        }
+                    }
+                    else if (change.id < 0) {
+                        console.log('Updated temporary node:', change.id);
+                    }
+                    break;
+            }
+        }
+        // Validate no duplicate IDs
+        const ids = this._entries.map((e) => e.id);
+        const duplicates = ids.filter((id, index) => ids.indexOf(id) !== index);
+        if (duplicates.length > 0) {
+            console.error('Duplicate IDs found:', duplicates);
+        }
+        console.log('Final entries after changes:', this._entries);
+        console.log('ID mappings:', idMap);
+        console.log('=== END SAVING CHANGES ===');
+        return of(idMap);
+    }
+    /**
+     * Convert a TreeNode back to a ThesaurusEntry.
+     */
+    nodeToEntry(node) {
+        // For nodes with the key property, use it directly
+        const nodeWithKey = node;
+        if (nodeWithKey.key) {
+            return {
+                id: nodeWithKey.key,
+                value: node.label,
+            };
+        }
+        // For temporary nodes (negative IDs), construct a hierarchical ID
+        if (node.id < 0) {
+            // Check for user-provided ID
+            const userProvidedId = nodeWithKey._userProvidedId;
+            if (userProvidedId) {
+                return {
+                    id: userProvidedId,
+                    value: node.label,
+                };
+            }
+            // Find parent to construct the ID
+            if (node.parentId) {
+                const parentNode = this._nodes.get(node.parentId);
+                const parentKey = parentNode?.key;
+                if (parentKey) {
+                    return {
+                        id: `${parentKey}.temp${Math.abs(node.id)}`,
+                        value: node.label,
+                    };
+                }
+            }
+            // No parent, create a root-level temporary entry
+            return {
+                id: `temp${Math.abs(node.id)}`,
+                value: node.label,
+            };
+        }
+        console.warn('Could not convert node to entry:', node);
+        return null;
+    }
+    /**
+     * Remove an entry and all its descendants from the entries list.
+     */
+    removeEntryAndDescendants(entryId) {
+        const toRemove = [];
+        // find the entry and all its descendants
+        for (const entry of this._entries) {
+            if (entry.id === entryId || entry.id.startsWith(entryId + '.')) {
+                toRemove.push(entry.id);
+            }
+        }
+        // remove them from the list
+        for (const id of toRemove) {
+            const index = this._entries.findIndex((e) => e.id === id);
+            if (index !== -1) {
+                this._entries.splice(index, 1);
+            }
+        }
+    }
+    /**
+     * Get current entries (for demonstration purposes).
+     */
+    getCurrentEntries() {
+        return [...this._entries];
+    }
+}
+
+/*
+ * Public API Surface of cadmus-thesaurus-store
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CUSTOM_ENTRY_PREFIX, EditableStaticThesaurusPagedTreeStoreService, EditableThesaurusBrowserComponent, StaticThesaurusPagedTreeStoreService, ThesEntryEditorComponent, ThesaurusBrowserComponent, ThesaurusEntriesPickerComponent, ThesaurusPagedTreeFilterComponent, ThesaurusTreeComponent, renderLabelFromLastColon };
+//# sourceMappingURL=myrmidon-cadmus-thesaurus-store.mjs.map