@arsedizioni/ars-utils 18.1.70 → 18.1.72

package/fesm2022/arsedizioni-ars-utils-help.mjs

@@ -1,137 +1,35 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Output, Injectable, ViewEncapsulation, Inject, ViewChild, NgModule } from '@angular/core';
+import { Injectable, inject, ChangeDetectorRef, signal, computed, Component, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { FlatTreeControl } from '@angular/cdk/tree';
-import * as i2$1 from '@angular/material/dialog';
-import { MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import * as i11 from '@angular/material/sidenav';
+import { NgStyle, NgClass } from '@angular/common';
+import * as i2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogContent } from '@angular/material/dialog';
+import * as i4 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i5 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i7 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import * as i12 from '@angular/material/tree';
+import * as i3 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i8 from '@angular/material/tree';
 import { MatTreeFlattener, MatTreeFlatDataSource, MatTreeModule } from '@angular/material/tree';
 import { SystemUtils, SafeHtmlPipe } from '@arsedizioni/ars-utils/core';
-import { BehaviorSubject, Subject, of, fromEvent } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import * as i8 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i7 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i6 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i5$1 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i5 from '@ngbracket/ngx-layout/flex';
-import { FlexModule } from '@ngbracket/ngx-layout/flex';
-import * as i3 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import * as i2 from '@arsedizioni/ars-utils/ui';
-import * as i10 from '@ngbracket/ngx-layout/extended';
+import * as i2$1 from '@arsedizioni/ars-utils/ui';
+import { DialogService } from '@arsedizioni/ars-utils/ui';
+import * as i6 from '@ngbracket/ngx-layout/extended';
 import { ExtendedModule } from '@ngbracket/ngx-layout/extended';
-import * as i9 from '@angular/material/progress-bar';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { NgStyle, NgClass } from '@angular/common';
-import * as i7$1 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i1 from '@ngbracket/ngx-layout';
+import * as i1 from '@ngbracket/ngx-layout/flex';
+import { FlexModule } from '@ngbracket/ngx-layout/flex';
+import { BehaviorSubject, Subject, of, fromEvent } from 'rxjs';
+import { takeUntil, debounceTime } from 'rxjs/operators';
 import * as i1$1 from '@angular/common/http';
 
-class HelpSearchQueryBuilderComponent {
-    constructor($dialog, dialog) {
-        this.$dialog = $dialog;
-        this.dialog = dialog;
-        this.done = new EventEmitter();
-        this.queryAnd = '';
-        this.queryOr = '';
-        this.queryNot = '';
-        this.queryPhrase = '';
-        this.queryStart = '';
-    }
-    ngOnInit() { }
-    /**
-     * Clear
-     */
-    clear() {
-        this.queryAnd = null;
-        this.queryOr = null;
-        this.queryNot = null;
-        this.queryPhrase = null;
-        this.queryStart = null;
-    }
-    /**
-     * Submit search
-     */
-    ok() {
-        let query = '';
-        // Phrase
-        if (this.queryPhrase.length > 0) {
-            if (query.length > 0)
-                query += ' ';
-            query += '+"';
-            query += this.queryPhrase.replace('"', '').trim();
-            query += '"';
-            query += ' ';
-        }
-        // And
-        if (this.queryAnd.length > 0) {
-            let parts = this.queryAnd.split(',');
-            for (let i = 0; i < parts.length; i++) {
-                if (query.length > 0)
-                    query += ' ';
-                query += '+';
-                query += parts[i].replace('"', '').trim();
-            }
-            query += ' ';
-        }
-        // Or
-        if (this.queryOr.length > 0) {
-            let parts = this.queryOr.split(',');
-            for (let i = 0; i < parts.length; i++) {
-                if (query.length > 0)
-                    query += ' ';
-                query += parts[i].replace('"', '').trim();
-            }
-            query += ' ';
-        }
-        // Start with
-        if (this.queryStart.length > 0) {
-            if (query.length > 0)
-                query += ' ';
-            query += '+';
-            query += this.queryStart.replace('"', '').trim();
-            query += '*';
-            query += ' ';
-        }
-        // Not
-        if (this.queryNot.length > 0) {
-            if (query.length === 0) {
-                // Invalid query
-                this.$dialog.error("L'operatore di esclusione funziona solo se prima è stato inserito un valore in almeno uno degli altri quattro campi.");
-                return;
-            }
-            let parts = this.queryNot.split(',');
-            for (let i = 0; i < parts.length; i++) {
-                if (query.length > 0)
-                    query += ' ';
-                query += '-';
-                query += parts[i].replace('"', '').trim();
-            }
-            query += ' ';
-        }
-        // Notify
-        if (query.length > 0)
-            this.done.emit({ query: query });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: HelpSearchQueryBuilderComponent, deps: [{ token: i2.DialogService }, { token: i2$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: HelpSearchQueryBuilderComponent, isStandalone: true, selector: "ng-component", outputs: { done: "done" }, host: { attributes: { "Bind": SystemUtils.generateUUID() } }, ngImport: i0, template: "<h2 mat-dialog-title>Trova gli elementi che contengono...</h2>\r\n<div mat-dialog-content>\r\n  <form name=\"form\" #f=\"ngForm\" (keyup.Enter)=\"!f.form.invalid ? ok() : null\" novalidate>\r\n    <div fxLayout=\"column\">\r\n      <mat-form-field>\r\n        <mat-label>Questa esatta parola o frase</mat-label>\r\n        <input matInput name=\"queryPhrase\" [(ngModel)]=\"queryPhrase\" maxlength=\"200\" />\r\n        @if (queryPhrase) {\r\n<a  matSuffix mat-icon-button aria-label=\"Azzera\"\r\n          (click)=\"queryPhrase=''\">\r\n          <mat-icon>close</mat-icon>\r\n        </a>\r\n}\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>Tutte queste parole</mat-label>\r\n        <input matInput name=\"queryAnd\" [(ngModel)]=\"queryAnd\" maxlength=\"200\" />\r\n        @if (queryAnd) {\r\n<a  matSuffix mat-icon-button aria-label=\"Azzera\" (click)=\"queryAnd=''\">\r\n          <mat-icon>close</mat-icon>\r\n        </a>\r\n}\r\n        <mat-hint>Separate da virgola</mat-hint>\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>Una qualunque di queste parole</mat-label>\r\n        <input matInput name=\"queryOr\" [(ngModel)]=\"queryOr\" maxlength=\"200\" />\r\n        @if (queryOr) {\r\n<a  matSuffix mat-icon-button aria-label=\"Azzera\" (click)=\"queryOr=''\">\r\n          <mat-icon>close</mat-icon>\r\n        </a>\r\n}\r\n        <mat-hint>Separate da virgola</mat-hint>\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>Parole che iniziano con</mat-label>\r\n        <input matInput name=\"queryStart\" [(ngModel)]=\"queryStart\" maxlength=\"200\" />\r\n        @if (queryStart) {\r\n<a  matSuffix mat-icon-button aria-label=\"Azzera\"\r\n          (click)=\"queryStart=''\">\r\n          <mat-icon>close</mat-icon>\r\n        </a>\r\n}\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>Nessuna qualunque di queste parole</mat-label>\r\n        <input matInput name=\"queryNot\" [(ngModel)]=\"queryNot\" maxlength=\"200\" />\r\n        @if (queryNot) {\r\n<a  matSuffix mat-icon-button aria-label=\"Azzera\" (click)=\"queryNot=''\">\r\n          <mat-icon>close</mat-icon>\r\n        </a>\r\n}\r\n        <mat-hint>Separate da virgola. L'operatore di esclusione funziona solo se prima \u00E8 stato inserito un valore in\r\n          almeno uno degli altri quattro campi. </mat-hint>\r\n      </mat-form-field>\r\n    </div>\r\n  </form>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n    <div fxFlex=\"30\" fxLayoutAlign=\"start\">\r\n      <button type=\"button\" mat-button (click)=\"clear()\" color=\"primary\">PULISCI</button>\r\n    </div>\r\n    <div fxFlex=\"70\" fxLayoutAlign=\"end\">\r\n      <button mat-flat-button color=\"primary\" (click)=\"ok()\">OK</button>\r\n      <button mat-button [mat-dialog-close]=\"true\" color=\"primary\">CHIUDI</button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FlexModule }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i5.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] }); }
+class IndexInfo {
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: HelpSearchQueryBuilderComponent, decorators: [{
-            type: Component,
-            args: [{ host: { 'Bind': SystemUtils.generateUUID() }, standalone: true, imports: [MatDialogTitle, MatDialogContent, FormsModule, FlexModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatIconModule, MatDialogActions, MatDialogClose], template: "<h2 mat-dialog-title>Trova gli elementi che contengono...</h2>\r\n<div mat-dialog-content>\r\n  <form name=\"form\" #f=\"ngForm\" (keyup.Enter)=\"!f.form.invalid ? ok() : null\" novalidate>\r\n    <div fxLayout=\"column\">\r\n      <mat-form-field>\r\n        <mat-label>Questa esatta parola o frase</mat-label>\r\n        <input matInput name=\"queryPhrase\" [(ngModel)]=\"queryPhrase\" maxlength=\"200\" />\r\n        @if (queryPhrase) {\r\n<a  matSuffix mat-icon-button aria-label=\"Azzera\"\r\n          (click)=\"queryPhrase=''\">\r\n          <mat-icon>close</mat-icon>\r\n        </a>\r\n}\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>Tutte queste parole</mat-label>\r\n        <input matInput name=\"queryAnd\" [(ngModel)]=\"queryAnd\" maxlength=\"200\" />\r\n        @if (queryAnd) {\r\n<a  matSuffix mat-icon-button aria-label=\"Azzera\" (click)=\"queryAnd=''\">\r\n          <mat-icon>close</mat-icon>\r\n        </a>\r\n}\r\n        <mat-hint>Separate da virgola</mat-hint>\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>Una qualunque di queste parole</mat-label>\r\n        <input matInput name=\"queryOr\" [(ngModel)]=\"queryOr\" maxlength=\"200\" />\r\n        @if (queryOr) {\r\n<a  matSuffix mat-icon-button aria-label=\"Azzera\" (click)=\"queryOr=''\">\r\n          <mat-icon>close</mat-icon>\r\n        </a>\r\n}\r\n        <mat-hint>Separate da virgola</mat-hint>\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>Parole che iniziano con</mat-label>\r\n        <input matInput name=\"queryStart\" [(ngModel)]=\"queryStart\" maxlength=\"200\" />\r\n        @if (queryStart) {\r\n<a  matSuffix mat-icon-button aria-label=\"Azzera\"\r\n          (click)=\"queryStart=''\">\r\n          <mat-icon>close</mat-icon>\r\n        </a>\r\n}\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>Nessuna qualunque di queste parole</mat-label>\r\n        <input matInput name=\"queryNot\" [(ngModel)]=\"queryNot\" maxlength=\"200\" />\r\n        @if (queryNot) {\r\n<a  matSuffix mat-icon-button aria-label=\"Azzera\" (click)=\"queryNot=''\">\r\n          <mat-icon>close</mat-icon>\r\n        </a>\r\n}\r\n        <mat-hint>Separate da virgola. L'operatore di esclusione funziona solo se prima \u00E8 stato inserito un valore in\r\n          almeno uno degli altri quattro campi. </mat-hint>\r\n      </mat-form-field>\r\n    </div>\r\n  </form>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n    <div fxFlex=\"30\" fxLayoutAlign=\"start\">\r\n      <button type=\"button\" mat-button (click)=\"clear()\" color=\"primary\">PULISCI</button>\r\n    </div>\r\n    <div fxFlex=\"70\" fxLayoutAlign=\"end\">\r\n      <button mat-flat-button color=\"primary\" (click)=\"ok()\">OK</button>\r\n      <button mat-button [mat-dialog-close]=\"true\" color=\"primary\">CHIUDI</button>\r\n    </div>\r\n  </div>\r\n</div>" }]
-        }], ctorParameters: () => [{ type: i2.DialogService }, { type: i2$1.MatDialog }], propDecorators: { done: [{
-                type: Output
-            }] } });
-
-class FolderInfo {
-}
-class FolderNode extends FolderInfo {
+class IndexNode extends IndexInfo {
     constructor(item, level) {
         super();
         // Flattened implementation
@@ -144,13 +42,13 @@ class FolderNode extends FolderInfo {
         this.parent = item.parent;
     }
 }
-class FolderTree {
-    get data() {
-        return this.dataChange.value;
-    }
+class IndexTreeDataSource {
     constructor() {
         this.dataChange = new BehaviorSubject([]);
     }
+    get data() {
+        return this.dataChange.value;
+    }
     ngOnDestroy() {
         this.dataChange.unsubscribe();
     }
@@ -241,83 +139,94 @@ class FolderTree {
     update() {
         this.dataChange.next(this.data);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: FolderTree, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: FolderTree }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: IndexTreeDataSource, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: IndexTreeDataSource }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: FolderTree, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: IndexTreeDataSource, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [] });
+        }] });
 class HelpViewerComponent {
-    constructor(media, tree, $dialog, $help, dialogRef, _data) {
-        this.media = media;
-        this.tree = tree;
-        this.$dialog = $dialog;
-        this.$help = $help;
-        this.dialogRef = dialogRef;
-        this.__d$ = new Subject();
-        this.dialogTab = 1;
-        this.busy = false;
-        this.id = null;
-        this.title = 'Guida';
-        this.page = null;
-        this.history = [];
-        this.sidenavMode = 'side';
-        this.sidenavClosed = false;
-        this.sidenavVisible = false;
-        this.searchText = null;
-        this.hits = 0;
-        this.hit = 0;
-        this.mq = '';
-        this.contentHeight = null;
-        this.currentFolder = null;
-        this.folders = null;
+    constructor() {
+        this.unsubscribe = new Subject();
+        this.changeDetector = inject(ChangeDetectorRef);
+        this.dialogRef = inject((MatDialogRef));
+        this.dialogData = inject(MAT_DIALOG_DATA) ?? { id: "1" };
+        this.dialogService = inject(DialogService);
+        this.helpService = inject(HelpService);
+        this.breakpointObserver = inject(BreakpointObserver);
+        this.busy = signal(false);
+        this.page = signal(null);
+        this.indexId = null;
+        this.indexPaneClosed = false;
+        this.indexNode = null;
+        this.history = signal([]);
+        this.canGoBack = computed(() => {
+            return this.history()?.length > 1;
+        });
+        this.height = signal(-1);
+        this.tree = inject(IndexTreeDataSource);
         /**
          * Manage flat tree view
          */
-        this._getChildren = (node) => of(node.subFolders);
-        this._getLevel = (node) => node.level;
-        this._isExpandable = (node) => node.expandable;
+        this.folders = null;
+        this.getChildren = (node) => of(node.subFolders);
+        this.getLevel = (node) => node.level;
+        this.isExpandable = (node) => node.expandable;
         this.hasChild = (_, _node) => _node.expandable;
         this.transformer = (item, level) => {
-            return new FolderNode(item, level);
+            return new IndexNode(item, level);
         };
-        this.id = _data && _data.id ? _data.id : '1';
+    }
+    ngOnInit() {
         // Setup tree structure
-        this.treeFlattener = new MatTreeFlattener(this.transformer, this._getLevel, this._isExpandable, this._getChildren);
-        this.treeControl = new FlatTreeControl(this._getLevel, this._isExpandable);
+        this.treeFlattener = new MatTreeFlattener(this.transformer, this.getLevel, this.isExpandable, this.getChildren);
+        this.treeControl = new FlatTreeControl(this.getLevel, this.isExpandable);
         this.treeData = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
         // Subscribe data change
-        tree.dataChange
-            .pipe(takeUntil(this.__d$))
+        this.tree.dataChange
+            .pipe(takeUntil(this.unsubscribe))
             .subscribe(data => (this.treeData.data = data));
-    }
-    ngOnInit() {
-        // Initialize sidenav visibility
-        if (this.sidenav)
-            this.sidenav.opened =
-                this.mq !== 'xs' && this.mq !== 'sm';
-        // React to media query changes
-        this.media
-            .asObservable()
-            .pipe(takeUntil(this.__d$))
-            .subscribe((changes) => {
-            this.updateSidenavVisibilty(changes[0].mqAlias);
+        // Observe layout changes
+        this.breakpointObserver
+            .observe([
+            Breakpoints.XSmall,
+            Breakpoints.Small,
+            Breakpoints.Medium,
+            Breakpoints.Large,
+            Breakpoints.XLarge,
+        ])
+            .pipe(takeUntil(this.unsubscribe))
+            .subscribe((result) => {
+            for (const query of Object.keys(result.breakpoints)) {
+                if (result.breakpoints[query]) {
+                    this.handleFilterPaneVisibility();
+                }
+            }
         });
         // React to window size change
         fromEvent(window, 'resize')
-            .pipe(takeUntil(this.__d$))
+            .pipe(takeUntil(this.unsubscribe), debounceTime(500))
             .subscribe(() => {
             // Update view
             this.updateView();
         });
         this.adjustView();
         this.getToc();
-        if (this.id)
-            this.getChapter(this.id);
+        this.indexId = this.dialogData.indexId;
+        if (this.indexId) {
+            this.getChapter(this.indexId);
+        }
     }
     ngOnDestroy() {
-        this.__d$.next();
-        this.__d$.complete();
+        this.unsubscribe.next();
+        this.unsubscribe.complete();
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.handleFilterPaneVisibility();
+            this.indexPaneClosed = !this.indexPane.opened;
+        }, 0);
+        this.changeDetector.detectChanges();
     }
     /**
      * Adjust view
@@ -325,7 +234,7 @@ class HelpViewerComponent {
     adjustView() {
         setTimeout(() => {
             this.updateView();
-        }, 50);
+        }, 100);
     }
     /**
      * Update view
@@ -339,51 +248,33 @@ class HelpViewerComponent {
         let hb = b[0].clientHeight;
         if (hb === 0)
             this.adjustView();
-        this.contentHeight = a - (hb + 50);
-    }
-    /**
-     * Update sidenav visibility
-     * @param mq : the current media query
-     */
-    updateSidenavVisibilty(mq = null) {
-        if (!mq)
-            mq = this.mq;
-        if (mq === 'xs' || mq === 'sm') {
-            this.sidenavVisible = false;
-            //this.sidenavMode = 'over';
-            if (this.sidenav && this.sidenav.opened)
-                this.sidenav.close();
-        }
-        else {
-            //this.sidenavMode = 'side';
-            if (this.sidenav && !this.sidenavClosed) {
-                this.sidenav.toggle(true);
-                this.sidenavVisible = true;
+        this.height.set(a - (hb + 50));
+    }
+    /**
+  * Handle filter pane visibility
+  */
+    handleFilterPaneVisibility() {
+        if (this.indexPane) {
+            if (this.breakpointObserver.isMatched(Breakpoints.XSmall) ||
+                this.breakpointObserver.isMatched(Breakpoints.Small) ||
+                this.breakpointObserver.isMatched(Breakpoints.Medium)) {
+                if (this.indexPane.opened) {
+                    this.indexPane.close();
+                }
+            }
+            else {
+                if (!this.indexPane.opened && !this.indexPaneClosed) {
+                    this.indexPane.open();
+                }
             }
         }
     }
     /**
-     * Open sidebar
+     * Show hide index pane manually
      */
-    sidenavOpen() {
-        this.sidenavClosed = false;
-        this.sidenav.open();
-    }
-    /**
-     * Close sidebar
-     */
-    sidenavClose() {
-        this.sidenavClosed = true;
-        this.sidenav.close();
-    }
-    /**
-     * Toggle sidenav
-     */
-    sidenavToggle() {
-        if (this.sidenavClosed || !this.sidenav.opened)
-            this.sidenavOpen();
-        else
-            this.sidenavClose();
+    toggleIndexPane() {
+        this.indexPaneClosed = !this.indexPaneClosed;
+        this.indexPane?.toggle();
     }
     /**
      * Close dialog
@@ -395,13 +286,13 @@ class HelpViewerComponent {
      * Get the toc
      */
     getToc() {
-        this.busy = true;
-        this.$help
+        this.busy.set(true);
+        this.helpService
             .getToc()
             .subscribe({
             next: (r) => {
                 if (!r.success) {
-                    this.$dialog.error(r.message);
+                    this.dialogService.error(r.message);
                 }
                 else {
                     this.folders = r.value.subFolders;
@@ -409,7 +300,7 @@ class HelpViewerComponent {
                 }
             },
             complete: () => {
-                this.busy = false;
+                this.busy.set(false);
             }
         });
     }
@@ -456,11 +347,11 @@ class HelpViewerComponent {
      * Expand current fodler node
      */
     expandCurrentFolder() {
-        if (this.currentFolder) {
-            this.treeControl.expand(SystemUtils.arrayFindByKey(this.treeControl.dataNodes, 'id', this.currentFolder.id));
-            if (this.currentFolder.parent) {
+        if (this.indexNode) {
+            this.treeControl.expand(SystemUtils.arrayFindByKey(this.treeControl.dataNodes, 'id', this.indexNode.id));
+            if (this.indexNode.parent) {
                 // Apply previous selection
-                let n = this.currentFolder.parent;
+                let n = this.indexNode.parent;
                 while (n) {
                     this.treeControl.expand(SystemUtils.arrayFindByKey(this.treeControl.dataNodes, 'id', n.id));
                     n = n.parent;
@@ -482,26 +373,23 @@ class HelpViewerComponent {
             id = id.substring(0, p);
         }
         if (id !== '.') {
-            this.busy = true;
-            this.$help.getChapter(id, this.searchText)
+            this.busy.set(true);
+            this.helpService.getChapter(id)
                 .subscribe({
                 next: (r) => {
                     let found = false;
                     if (!r.success) {
-                        this.$dialog.error("Capitolo non trovato.");
+                        this.dialogService.error("Capitolo non trovato.");
                     }
                     else {
                         if (!position)
-                            this.history.push({ id: this.id, position: this.getPosition() });
-                        this.id = id;
-                        this.title = r.value.chapter?.name;
-                        this.page = r.value.data;
-                        this.hits = r.value.hits;
-                        this.hit = 0;
-                        found = this.title?.length > 0;
+                            this.history().push({ id: this.indexId, position: this.getPosition() });
+                        this.indexId = id;
+                        this.page.set(r.value.data);
+                        found = r.value.chapter?.name?.length > 0;
                         if (found) {
                             // Update folder
-                            this.currentFolder = this.findFolder(id);
+                            this.indexNode = this.findFolder(id);
                             this.expandCurrentFolder();
                             // Handle positioning
                             this.gotoPosition(anchor, position);
@@ -512,13 +400,13 @@ class HelpViewerComponent {
                     }
                 },
                 complete: () => {
-                    this.busy = false;
+                    this.busy.set(false);
                 }
             });
         }
         else {
             if (!position)
-                this.history.push({ id: this.id, position: this.getPosition() });
+                this.history().push({ id: this.indexId, position: this.getPosition() });
             // Move on the same chapter
             this.gotoPosition(anchor, position);
         }
@@ -571,86 +459,19 @@ class HelpViewerComponent {
     back() {
         if (!this.history || this.history.length === 0)
             return;
-        let n = this.history.pop();
+        let n = this.history().pop();
         this.getChapter(n.id, n.position + 1);
     }
-    /**
-     * Compose a free text search query
-     */
-    composeSearch() {
-        let d = this.$dialog.open(HelpSearchQueryBuilderComponent, {
-            ariaLabel: 'costruisci ricerca',
-            autoFocus: false,
-            restoreFocus: true,
-            disableClose: false,
-            minWidth: '375px',
-            maxWidth: '600px',
-            width: '99%'
-        });
-        d.componentInstance.done.subscribe((r) => {
-            this.searchText = r.query;
-            // Finished
-            d.close();
-        });
-    }
-    /**
-     * Perform search
-     */
-    search() {
-        this.busy = true;
-        this.$help.search({ text: this.searchText })
-            .subscribe({
-            next: (r) => {
-                if (!r.success) {
-                    this.$dialog.error("Errore di sintassi.");
-                }
-                else {
-                    this.searchResult = r.value;
-                }
-            },
-            complete: () => {
-                this.busy = false;
-            }
-        });
-    }
-    /**
-     * Goto next relevant item
-     */
-    nextHit() {
-        const i = this.hit + 1;
-        if (i <= this.hits) {
-            let elms = document.getElementsByClassName('help-word-hit-' + i);
-            if (elms) {
-                this.setPosition(elms[0].offsetTop - 50);
-                this.hit++;
-            }
-        }
-    }
-    /**
-     * Goto previous relevant item
-     */
-    previousHit() {
-        const i = this.hit - 1;
-        if (i > 0) {
-            let elms = document.getElementsByClassName('help-word-hit-' + i);
-            if (elms) {
-                this.setPosition(elms[0].offsetTop - 50);
-                this.hit--;
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: HelpViewerComponent, deps: [{ token: i1.MediaObserver }, { token: FolderTree }, { token: i2.DialogService }, { token: HelpService }, { token: i2$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: HelpViewerComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "Bind": SystemUtils.generateUUID() } }, providers: [FolderTree], viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true }], ngImport: i0, template: "<div class=\"help-viewer-fixed\">\r\n  <div class=\"help-viewer-header\">\r\n    <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n      <div fxFlexAlign=\"center\">\r\n        <button type=\"button\" mat-icon-button matTooltip=\"Mostra menu\" [attr.aria-label]=\"'Mostra indice'\"\r\n          (click)=\"sidenavToggle()\">\r\n          <mat-icon>menu</mat-icon>\r\n        </button>\r\n      </div>\r\n      <div fxFlex=\"100\" fxFlexAlign=\"center\">\r\n        <h2 class=\"mat-dialog-title truncated\">\r\n          <div>Guida</div>\r\n        </h2>\r\n      </div>\r\n      <div fxFlex=\"100px\" fxLayoutAlign=\"end\">\r\n        @if (history && history.length > 1) {\r\n        <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button matTooltip=\"Indietro\" (click)=\"back()\"\r\n          color=\"primary\">\r\n          <mat-icon>arrow_back</mat-icon>\r\n        </button>\r\n        }\r\n        <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button matTooltip=\"Chiudi\" (click)=\"close()\"\r\n          color=\"primary\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div style=\"height:5px\">\r\n    @if (busy) {\r\n    <mat-progress-bar class=\"sidenav-loader\" mode=\"indeterminate\"></mat-progress-bar>\r\n    }\r\n  </div>\r\n</div>\r\n<div mat-dialog-content [ngStyle]=\"{'min-height.px': contentHeight}\" style=\"padding: 0 0 0 24px\">\r\n  <mat-sidenav-container [ngStyle]=\"{'height.px': contentHeight}\">\r\n    <mat-sidenav #sidenav [mode]=\"sidenavMode\" [autoFocus]=\"false\" class=\"sidenav sidenav-help\">\r\n      <div fxLayout=\"column\" fxFill>\r\n        <div fxFlex=\"*\" class=\"scrollbox\">\r\n          <mat-tree [dataSource]=\"treeData\" [treeControl]=\"treeControl\" class=\"scrollable-content tree\"\r\n            style=\"max-width:310px\">\r\n            <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding\r\n              [matTreeNodePaddingIndent]=\"20\" class=\"tree-node tree-node-simple tree-node-style\"\r\n              (click)=\"getChapter(node.id);\"\r\n              [ngClass]=\"{'tree-node-activated': currentFolder && currentFolder.id === node.id}\" [disabled]=\"busy\">\r\n              <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill class=\"small\">\r\n                <button type=\"button\" fxFlexAlign=\"center\" mat-icon-button disabled class=\"small-icon-button\"></button>\r\n                <div fxFlex=\"*\" fxFlexAlign=\"center\" style=\"text-transform:uppercase; \">{{node.name}}</div>\r\n              </div>\r\n            </mat-tree-node>\r\n            <mat-tree-node *matTreeNodeDef=\"let node;when: hasChild\" matTreeNodePadding [matTreeNodePaddingIndent]=\"20\"\r\n              class=\"tree-node tree-node-simple tree-node-style\"\r\n              [ngClass]=\"{'tree-node-activated': currentFolder && currentFolder.id === node.id }\"\r\n              (click)=\"getChapter(node.id)\" [disabled]=\"busy\">\r\n              <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill class=\"small\">\r\n                <button type=\"button\" fxFlexAlign=\"center\" mat-icon-button matTreeNodeToggle\r\n                  [attr.aria-label]=\"'Apri/chiudi ' + node.name\" class=\"small-icon-button\">\r\n                  <mat-icon class=\"mat-icon-rtl-mirror\">\r\n                    {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}\r\n                  </mat-icon>\r\n                </button>\r\n                <div fxFlex=\"*\" fxFlexAlign=\"center\" style=\"text-transform:uppercase; \">{{node.name}}</div>\r\n              </div>\r\n            </mat-tree-node>\r\n          </mat-tree>\r\n        </div>\r\n      </div>\r\n    </mat-sidenav>\r\n    <mat-sidenav-content id=\"help-page-container\">\r\n      <div [ngStyle]=\"{'height.px': contentHeight }\">\r\n        <div fxLayout=\"column\" fxFill>\r\n          <div style=\"padding: 0 15px;\" (click)=\"gotoChapter($event)\" [innerHtml]=\"(page ?? '') | safeHtml\"></div>\r\n        </div>\r\n      </div>\r\n    </mat-sidenav-content>\r\n  </mat-sidenav-container>\r\n</div>", styles: [":root{--ars-color-link: #03A9F4;--ars-color-link-low: #0288D1;--ars-color-accent: #7894ae;--ars-color-accent-low: #456179;--ars-color-primary: #00a293;--ars-color-primary-low: #006a60;--ars-color-primary-hi: #12c0ae;--ars-color-secondary: #4a635f;--ars-color-secondary-low: #27403c;--ars-color-error: #ff5449;--ars-color-error-low: #a80710;--ars-color-ok: #388E3C;--ars-color-ok-low: #29692c;--ars-color-warning: #FFC107;--ars-color-warning-low: #FFA000;--ars-item-hover-background-color: #eaecef;--ars-item-selected-background-color: #ced1d2;--ars-item-opaque-background-color: rgba(255, 255, 255, .75);--ars-filterbox-filtered-background-color: #f9fbe7}.dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}b{font-weight:700}.large{font-size:large!important}.small{font-size:small!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (prefers-color-scheme: dark){:root{--ars-color-link: #03A9F4;--ars-color-link-low: #0288D1;--ars-color-accent: #adcae6;--ars-color-accent-low: #5e7a93;--ars-color-primary: #53dbc9;--ars-color-primary-low: #008679;--ars-color-primary-hi: #74f8e5;--ars-color-secondary: #b1ccc6;--ars-color-secondary-low: #627c77;--ars-color-error: #ff5449;--ars-color-error-low: #a80710;--ars-color-ok: #4CAF50;--ars-color-ok-low: #3f8f41;--ars-color-warning: #FFC107;--ars-color-warning-low: #FFA000;--ars-item-hover-background-color: #262a29;--ars-item-selected-background-color: #3f4342;--ars-item-opaque-background-color: rgba(0, 0, 0, .65);--ars-filterbox-filtered-background-color: #c6c7b8}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b{font-weight:600}}a.help-link,.help-link>a{text-decoration:none;color:#2a91e0}.help-title-2,.help-title-1{font-weight:600!important}.help-word-hit{font-size:inherit;background-color:#ff0;border:1px solid silver;padding:0 4px}.help-hint{margin:10px;padding:5px 20px;background-color:#fafad2;border-radius:12px}.help-summary{margin:10px;padding:5px 20px;background-color:#e6e6fa;border-radius:12px}.help-img{display:flex;align-items:center;justify-content:center;margin:10px}.help-img-200,.help-img-300,.help-img-400,.help-img-500,.help-img-700,.help-img-800{width:100%}.help-img-200{max-width:200px}.help-img-300{max-width:300px}.help-img-400{max-width:400px}.help-img-500{max-width:500px}.help-img-600{max-width:600px}.help-img-700{max-width:700px}.help-img-800{max-width:800px}.help-filter-box{background-color:#f9fbe7;border-radius:12px;padding:6px;display:inline-block;margin:0 0 8px 10px}.sidenav-help{width:320px}.tree-node-style:hover{background-color:#f8f8f8!important}::ng-deep .sidenav-help>.mat-drawer-inner-container{overflow-x:hidden!important}\n"], dependencies: [{ kind: "ngmodule", type: FlexModule }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i5.DefaultFlexAlignDirective, selector: "  [fxFlexAlign], [fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md],  [fxFlexAlign.lg], [fxFlexAlign.xl], [fxFlexAlign.lt-sm], [fxFlexAlign.lt-md],  [fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl], [fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm],  [fxFlexAlign.gt-md], [fxFlexAlign.gt-lg]", inputs: ["fxFlexAlign", "fxFlexAlign.xs", "fxFlexAlign.sm", "fxFlexAlign.md", "fxFlexAlign.lg", "fxFlexAlign.xl", "fxFlexAlign.lt-sm", "fxFlexAlign.lt-md", "fxFlexAlign.lt-lg", "fxFlexAlign.lt-xl", "fxFlexAlign.gt-xs", "fxFlexAlign.gt-sm", "fxFlexAlign.gt-md", "fxFlexAlign.gt-lg"] }, { kind: "directive", type: i5.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ExtendedModule }, { kind: "directive", type: i10.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i10.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i11.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i11.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i11.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i12.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i12.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i12.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i12.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i12.MatTreeNode, selector: "mat-tree-node", inputs: ["disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: HelpViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: HelpViewerComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "Bind": SystemUtils.generateUUID() } }, providers: [IndexTreeDataSource], viewQueries: [{ propertyName: "indexPane", first: true, predicate: ["indexPane"], descendants: true }], ngImport: i0, template: "<div class=\"help-viewer-fixed\">\r\n  <div class=\"help-viewer-header\">\r\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\" fxFill >\r\n      <div class=\"dialog-menu\">\r\n        <button type=\"button\" mat-icon-button matTooltip=\"Mostra menu\" [attr.aria-label]=\"'Mostra indice'\"\r\n          (click)=\"toggleIndexPane()\">\r\n          <mat-icon>menu</mat-icon>\r\n        </button>\r\n      </div>\r\n      <div fxFlex=\"*\" >\r\n        <h2 mat-dialog-title>Guida</h2>\r\n      </div>\r\n      <div fxFlex=\"100px\" fxLayoutAlign=\"end\" class=\"dialog-close\">\r\n        @if (canGoBack()) {\r\n        <button fxFlexAlign=\"start\" type=\"button\" mat-icon-button matTooltip=\"Indietro\" (click)=\"back()\">\r\n          <mat-icon>arrow_back</mat-icon>\r\n        </button>\r\n        }\r\n        <button fxFlexAlign=\"start\" type=\"button\" mat-icon-button matTooltip=\"Chiudi\" (click)=\"close()\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div style=\"height:5px\">\r\n    @if (busy()) {\r\n    <mat-progress-bar z-index=\"11\" mode=\"indeterminate\"></mat-progress-bar>\r\n    }\r\n  </div>\r\n</div>\r\n<div mat-dialog-content [ngStyle]=\"{'min-height.px': height()}\" style=\"padding: 0 0 0 24px\">\r\n  <mat-sidenav-container [ngStyle]=\"{'height.px': height()}\">\r\n    <mat-sidenav #indexPane mode=\"side\" [autoFocus]=\"false\" class=\"helpbrowser-index \">\r\n      <div fxLayout=\"column\" fxFill>\r\n        <div fxFlex=\"*\" class=\"scroll-hidden\">\r\n          <mat-tree [dataSource]=\"treeData\" [treeControl]=\"treeControl\" class=\"scroll-auto tree \"\r\n            style=\"max-width:310px\">\r\n            <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding\r\n              [matTreeNodePaddingIndent]=\"20\" class=\"tree-node tree-node-simple tree-node-style\"\r\n              (click)=\"getChapter(node.id);\"\r\n              [ngClass]=\"{'tree-node-activated': indexNode && indexNode.id === node.id}\" [disabled]=\"busy()\">\r\n              <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill class=\"small uppercase\">\r\n                <button type=\"button\" fxFlexAlign=\"center\" mat-icon-button disabled class=\"small-icon-button\"></button>\r\n                <div fxFlex=\"*\" fxFlexAlign=\"center\">{{node.name}}</div>\r\n              </div>\r\n            </mat-tree-node>\r\n            <mat-tree-node *matTreeNodeDef=\"let node;when: hasChild\" matTreeNodePadding [matTreeNodePaddingIndent]=\"20\"\r\n              class=\"tree-node tree-node-simple tree-node-style\"\r\n              [ngClass]=\"{'tree-node-activated': indexNode && indexNode.id === node.id }\"\r\n              (click)=\"getChapter(node.id)\" [disabled]=\"busy()\">\r\n              <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill class=\"small uppercase\">\r\n                <button type=\"button\" fxFlexAlign=\"center\" mat-icon-button matTreeNodeToggle\r\n                  [attr.aria-label]=\"'Apri/chiudi ' + node.name\" class=\"small-icon-button\">\r\n                  <mat-icon class=\"mat-icon-rtl-mirror\">\r\n                    {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}\r\n                  </mat-icon>\r\n                </button>\r\n                <div fxFlex=\"*\" fxFlexAlign=\"center\">{{node.name}}</div>\r\n              </div>\r\n            </mat-tree-node>\r\n          </mat-tree>\r\n        </div>\r\n      </div>\r\n    </mat-sidenav>\r\n    <mat-sidenav-content id=\"help-page-container\">\r\n      <div [ngStyle]=\"{'height.px': height() }\">\r\n        <div fxLayout=\"column\" fxFill>\r\n          <div style=\"padding: 0 15px;\" (click)=\"gotoChapter($event)\" [innerHtml]=\"(page() ?? '') | safeHtml\"></div>\r\n        </div>\r\n      </div>\r\n    </mat-sidenav-content>\r\n  </mat-sidenav-container>\r\n</div>", styles: [":root{--ars-color-link: #03A9F4;--ars-color-link-low: #0288D1;--ars-color-accent: #7894ae;--ars-color-accent-low: #456179;--ars-color-primary: #00a293;--ars-color-primary-low: #006a60;--ars-color-primary-hi: #12c0ae;--ars-color-secondary: #4a635f;--ars-color-secondary-low: #27403c;--ars-color-error: #ff5449;--ars-color-error-low: #a80710;--ars-color-ok: #388E3C;--ars-color-ok-low: #29692c;--ars-color-warning: #FFC107;--ars-color-warning-low: #FFA000;--ars-item-hover-background-color: #eaecef;--ars-item-selected-background-color: #ced1d2;--ars-item-opaque-background-color: rgba(255, 255, 255, .75);--ars-filterbox-filtered-background-color: #f9fbe7}.dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-close{margin-right:10px;margin-top:10px}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.scroll-auto{overflow:auto}.scroll-hidden{overflow:hidden}b{font-weight:700}.large{font-size:large!important}.small{font-size:small!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (prefers-color-scheme: dark){:root{--ars-color-link: #03A9F4;--ars-color-link-low: #0288D1;--ars-color-accent: #adcae6;--ars-color-accent-low: #5e7a93;--ars-color-primary: #53dbc9;--ars-color-primary-low: #008679;--ars-color-primary-hi: #74f8e5;--ars-color-secondary: #b1ccc6;--ars-color-secondary-low: #627c77;--ars-color-error: #ff5449;--ars-color-error-low: #a80710;--ars-color-ok: #4CAF50;--ars-color-ok-low: #3f8f41;--ars-color-warning: #FFC107;--ars-color-warning-low: #FFA000;--ars-item-hover-background-color: #262a29;--ars-item-selected-background-color: #3f4342;--ars-item-opaque-background-color: rgba(0, 0, 0, .65);--ars-filterbox-filtered-background-color: #c6c7b8}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b{font-weight:600}}a.help-link,.help-link>a{text-decoration:none;color:#2a91e0}.help-title-2,.help-title-1{font-weight:600!important}.help-word-hit{font-size:inherit;background-color:#ff0;border:1px solid silver;padding:0 4px}.help-hint{margin:10px;padding:5px 20px;background-color:#fafad2;border-radius:12px}.help-summary{margin:10px;padding:5px 20px;background-color:#e6e6fa;border-radius:12px}.help-img{display:flex;align-items:center;justify-content:center;margin:10px}.help-img-200,.help-img-300,.help-img-400,.help-img-500,.help-img-700,.help-img-800{width:100%}.help-img-200{max-width:200px}.help-img-300{max-width:300px}.help-img-400{max-width:400px}.help-img-500{max-width:500px}.help-img-600{max-width:600px}.help-img-700{max-width:700px}.help-img-800{max-width:800px}.help-filter-box{background-color:#f9fbe7;border-radius:12px;padding:6px;display:inline-block;margin:0 0 8px 10px}.helpbrowser-index{width:320px}.helpbrowser-index>.mat-drawer-inner-container{overflow-x:hidden!important}.tree{overflow-x:hidden}.tree-node{min-height:36px!important;padding-right:12px;margin-right:0}.tree-node .small-icon-button{width:2rem!important;height:2rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.tree-node .small-icon-button .mat-mdc-button-touch-target{width:2rem!important;height:2rem!important}.tree-node:hover{cursor:pointer;background-color:var(--mat-menu-item-hover-state-layer-color, transparent);border-radius:24px}.tree-node-simple,.tree-node-simple>div{min-height:36px!important}.tree-node-activated,.tree-node-activated>div{min-height:36px!important;font-weight:700!important}\n"], dependencies: [{ kind: "ngmodule", type: FlexModule }, { kind: "directive", type: i1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i1.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i1.DefaultFlexAlignDirective, selector: "  [fxFlexAlign], [fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md],  [fxFlexAlign.lg], [fxFlexAlign.xl], [fxFlexAlign.lt-sm], [fxFlexAlign.lt-md],  [fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl], [fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm],  [fxFlexAlign.gt-md], [fxFlexAlign.gt-lg]", inputs: ["fxFlexAlign", "fxFlexAlign.xs", "fxFlexAlign.sm", "fxFlexAlign.md", "fxFlexAlign.lg", "fxFlexAlign.xl", "fxFlexAlign.lt-sm", "fxFlexAlign.lt-md", "fxFlexAlign.lt-lg", "fxFlexAlign.lt-xl", "fxFlexAlign.gt-xs", "fxFlexAlign.gt-sm", "fxFlexAlign.gt-md", "fxFlexAlign.gt-lg"] }, { kind: "directive", type: i1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ExtendedModule }, { kind: "directive", type: i6.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i6.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i7.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i7.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i7.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i8.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i8.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i8.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i8.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i8.MatTreeNode, selector: "mat-tree-node", inputs: ["disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: HelpViewerComponent, decorators: [{
             type: Component,
-            args: [{ host: { 'Bind': SystemUtils.generateUUID() }, encapsulation: ViewEncapsulation.None, providers: [FolderTree], standalone: true, imports: [FlexModule, MatButtonModule, MatTooltipModule, MatIconModule, MatProgressBarModule, MatDialogContent, NgStyle, ExtendedModule, MatSidenavModule, MatTreeModule, NgClass, SafeHtmlPipe], template: "<div class=\"help-viewer-fixed\">\r\n  <div class=\"help-viewer-header\">\r\n    <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n      <div fxFlexAlign=\"center\">\r\n        <button type=\"button\" mat-icon-button matTooltip=\"Mostra menu\" [attr.aria-label]=\"'Mostra indice'\"\r\n          (click)=\"sidenavToggle()\">\r\n          <mat-icon>menu</mat-icon>\r\n        </button>\r\n      </div>\r\n      <div fxFlex=\"100\" fxFlexAlign=\"center\">\r\n        <h2 class=\"mat-dialog-title truncated\">\r\n          <div>Guida</div>\r\n        </h2>\r\n      </div>\r\n      <div fxFlex=\"100px\" fxLayoutAlign=\"end\">\r\n        @if (history && history.length > 1) {\r\n        <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button matTooltip=\"Indietro\" (click)=\"back()\"\r\n          color=\"primary\">\r\n          <mat-icon>arrow_back</mat-icon>\r\n        </button>\r\n        }\r\n        <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button matTooltip=\"Chiudi\" (click)=\"close()\"\r\n          color=\"primary\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div style=\"height:5px\">\r\n    @if (busy) {\r\n    <mat-progress-bar class=\"sidenav-loader\" mode=\"indeterminate\"></mat-progress-bar>\r\n    }\r\n  </div>\r\n</div>\r\n<div mat-dialog-content [ngStyle]=\"{'min-height.px': contentHeight}\" style=\"padding: 0 0 0 24px\">\r\n  <mat-sidenav-container [ngStyle]=\"{'height.px': contentHeight}\">\r\n    <mat-sidenav #sidenav [mode]=\"sidenavMode\" [autoFocus]=\"false\" class=\"sidenav sidenav-help\">\r\n      <div fxLayout=\"column\" fxFill>\r\n        <div fxFlex=\"*\" class=\"scrollbox\">\r\n          <mat-tree [dataSource]=\"treeData\" [treeControl]=\"treeControl\" class=\"scrollable-content tree\"\r\n            style=\"max-width:310px\">\r\n            <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding\r\n              [matTreeNodePaddingIndent]=\"20\" class=\"tree-node tree-node-simple tree-node-style\"\r\n              (click)=\"getChapter(node.id);\"\r\n              [ngClass]=\"{'tree-node-activated': currentFolder && currentFolder.id === node.id}\" [disabled]=\"busy\">\r\n              <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill class=\"small\">\r\n                <button type=\"button\" fxFlexAlign=\"center\" mat-icon-button disabled class=\"small-icon-button\"></button>\r\n                <div fxFlex=\"*\" fxFlexAlign=\"center\" style=\"text-transform:uppercase; \">{{node.name}}</div>\r\n              </div>\r\n            </mat-tree-node>\r\n            <mat-tree-node *matTreeNodeDef=\"let node;when: hasChild\" matTreeNodePadding [matTreeNodePaddingIndent]=\"20\"\r\n              class=\"tree-node tree-node-simple tree-node-style\"\r\n              [ngClass]=\"{'tree-node-activated': currentFolder && currentFolder.id === node.id }\"\r\n              (click)=\"getChapter(node.id)\" [disabled]=\"busy\">\r\n              <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill class=\"small\">\r\n                <button type=\"button\" fxFlexAlign=\"center\" mat-icon-button matTreeNodeToggle\r\n                  [attr.aria-label]=\"'Apri/chiudi ' + node.name\" class=\"small-icon-button\">\r\n                  <mat-icon class=\"mat-icon-rtl-mirror\">\r\n                    {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}\r\n                  </mat-icon>\r\n                </button>\r\n                <div fxFlex=\"*\" fxFlexAlign=\"center\" style=\"text-transform:uppercase; \">{{node.name}}</div>\r\n              </div>\r\n            </mat-tree-node>\r\n          </mat-tree>\r\n        </div>\r\n      </div>\r\n    </mat-sidenav>\r\n    <mat-sidenav-content id=\"help-page-container\">\r\n      <div [ngStyle]=\"{'height.px': contentHeight }\">\r\n        <div fxLayout=\"column\" fxFill>\r\n          <div style=\"padding: 0 15px;\" (click)=\"gotoChapter($event)\" [innerHtml]=\"(page ?? '') | safeHtml\"></div>\r\n        </div>\r\n      </div>\r\n    </mat-sidenav-content>\r\n  </mat-sidenav-container>\r\n</div>", styles: [":root{--ars-color-link: #03A9F4;--ars-color-link-low: #0288D1;--ars-color-accent: #7894ae;--ars-color-accent-low: #456179;--ars-color-primary: #00a293;--ars-color-primary-low: #006a60;--ars-color-primary-hi: #12c0ae;--ars-color-secondary: #4a635f;--ars-color-secondary-low: #27403c;--ars-color-error: #ff5449;--ars-color-error-low: #a80710;--ars-color-ok: #388E3C;--ars-color-ok-low: #29692c;--ars-color-warning: #FFC107;--ars-color-warning-low: #FFA000;--ars-item-hover-background-color: #eaecef;--ars-item-selected-background-color: #ced1d2;--ars-item-opaque-background-color: rgba(255, 255, 255, .75);--ars-filterbox-filtered-background-color: #f9fbe7}.dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}b{font-weight:700}.large{font-size:large!important}.small{font-size:small!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (prefers-color-scheme: dark){:root{--ars-color-link: #03A9F4;--ars-color-link-low: #0288D1;--ars-color-accent: #adcae6;--ars-color-accent-low: #5e7a93;--ars-color-primary: #53dbc9;--ars-color-primary-low: #008679;--ars-color-primary-hi: #74f8e5;--ars-color-secondary: #b1ccc6;--ars-color-secondary-low: #627c77;--ars-color-error: #ff5449;--ars-color-error-low: #a80710;--ars-color-ok: #4CAF50;--ars-color-ok-low: #3f8f41;--ars-color-warning: #FFC107;--ars-color-warning-low: #FFA000;--ars-item-hover-background-color: #262a29;--ars-item-selected-background-color: #3f4342;--ars-item-opaque-background-color: rgba(0, 0, 0, .65);--ars-filterbox-filtered-background-color: #c6c7b8}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b{font-weight:600}}a.help-link,.help-link>a{text-decoration:none;color:#2a91e0}.help-title-2,.help-title-1{font-weight:600!important}.help-word-hit{font-size:inherit;background-color:#ff0;border:1px solid silver;padding:0 4px}.help-hint{margin:10px;padding:5px 20px;background-color:#fafad2;border-radius:12px}.help-summary{margin:10px;padding:5px 20px;background-color:#e6e6fa;border-radius:12px}.help-img{display:flex;align-items:center;justify-content:center;margin:10px}.help-img-200,.help-img-300,.help-img-400,.help-img-500,.help-img-700,.help-img-800{width:100%}.help-img-200{max-width:200px}.help-img-300{max-width:300px}.help-img-400{max-width:400px}.help-img-500{max-width:500px}.help-img-600{max-width:600px}.help-img-700{max-width:700px}.help-img-800{max-width:800px}.help-filter-box{background-color:#f9fbe7;border-radius:12px;padding:6px;display:inline-block;margin:0 0 8px 10px}.sidenav-help{width:320px}.tree-node-style:hover{background-color:#f8f8f8!important}::ng-deep .sidenav-help>.mat-drawer-inner-container{overflow-x:hidden!important}\n"] }]
-        }], ctorParameters: () => [{ type: i1.MediaObserver }, { type: FolderTree }, { type: i2.DialogService }, { type: HelpService }, { type: i2$1.MatDialogRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }], propDecorators: { sidenav: [{
+            args: [{ host: { 'Bind': SystemUtils.generateUUID() }, changeDetection: ChangeDetectionStrategy.OnPush, providers: [IndexTreeDataSource], standalone: true, imports: [FlexModule, MatButtonModule, MatTooltipModule, MatIconModule, MatProgressBarModule, MatDialogContent,
+                        NgStyle, ExtendedModule, MatSidenavModule, MatTreeModule, NgClass, SafeHtmlPipe], template: "<div class=\"help-viewer-fixed\">\r\n  <div class=\"help-viewer-header\">\r\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\" fxFill >\r\n      <div class=\"dialog-menu\">\r\n        <button type=\"button\" mat-icon-button matTooltip=\"Mostra menu\" [attr.aria-label]=\"'Mostra indice'\"\r\n          (click)=\"toggleIndexPane()\">\r\n          <mat-icon>menu</mat-icon>\r\n        </button>\r\n      </div>\r\n      <div fxFlex=\"*\" >\r\n        <h2 mat-dialog-title>Guida</h2>\r\n      </div>\r\n      <div fxFlex=\"100px\" fxLayoutAlign=\"end\" class=\"dialog-close\">\r\n        @if (canGoBack()) {\r\n        <button fxFlexAlign=\"start\" type=\"button\" mat-icon-button matTooltip=\"Indietro\" (click)=\"back()\">\r\n          <mat-icon>arrow_back</mat-icon>\r\n        </button>\r\n        }\r\n        <button fxFlexAlign=\"start\" type=\"button\" mat-icon-button matTooltip=\"Chiudi\" (click)=\"close()\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div style=\"height:5px\">\r\n    @if (busy()) {\r\n    <mat-progress-bar z-index=\"11\" mode=\"indeterminate\"></mat-progress-bar>\r\n    }\r\n  </div>\r\n</div>\r\n<div mat-dialog-content [ngStyle]=\"{'min-height.px': height()}\" style=\"padding: 0 0 0 24px\">\r\n  <mat-sidenav-container [ngStyle]=\"{'height.px': height()}\">\r\n    <mat-sidenav #indexPane mode=\"side\" [autoFocus]=\"false\" class=\"helpbrowser-index \">\r\n      <div fxLayout=\"column\" fxFill>\r\n        <div fxFlex=\"*\" class=\"scroll-hidden\">\r\n          <mat-tree [dataSource]=\"treeData\" [treeControl]=\"treeControl\" class=\"scroll-auto tree \"\r\n            style=\"max-width:310px\">\r\n            <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding\r\n              [matTreeNodePaddingIndent]=\"20\" class=\"tree-node tree-node-simple tree-node-style\"\r\n              (click)=\"getChapter(node.id);\"\r\n              [ngClass]=\"{'tree-node-activated': indexNode && indexNode.id === node.id}\" [disabled]=\"busy()\">\r\n              <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill class=\"small uppercase\">\r\n                <button type=\"button\" fxFlexAlign=\"center\" mat-icon-button disabled class=\"small-icon-button\"></button>\r\n                <div fxFlex=\"*\" fxFlexAlign=\"center\">{{node.name}}</div>\r\n              </div>\r\n            </mat-tree-node>\r\n            <mat-tree-node *matTreeNodeDef=\"let node;when: hasChild\" matTreeNodePadding [matTreeNodePaddingIndent]=\"20\"\r\n              class=\"tree-node tree-node-simple tree-node-style\"\r\n              [ngClass]=\"{'tree-node-activated': indexNode && indexNode.id === node.id }\"\r\n              (click)=\"getChapter(node.id)\" [disabled]=\"busy()\">\r\n              <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill class=\"small uppercase\">\r\n                <button type=\"button\" fxFlexAlign=\"center\" mat-icon-button matTreeNodeToggle\r\n                  [attr.aria-label]=\"'Apri/chiudi ' + node.name\" class=\"small-icon-button\">\r\n                  <mat-icon class=\"mat-icon-rtl-mirror\">\r\n                    {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}\r\n                  </mat-icon>\r\n                </button>\r\n                <div fxFlex=\"*\" fxFlexAlign=\"center\">{{node.name}}</div>\r\n              </div>\r\n            </mat-tree-node>\r\n          </mat-tree>\r\n        </div>\r\n      </div>\r\n    </mat-sidenav>\r\n    <mat-sidenav-content id=\"help-page-container\">\r\n      <div [ngStyle]=\"{'height.px': height() }\">\r\n        <div fxLayout=\"column\" fxFill>\r\n          <div style=\"padding: 0 15px;\" (click)=\"gotoChapter($event)\" [innerHtml]=\"(page() ?? '') | safeHtml\"></div>\r\n        </div>\r\n      </div>\r\n    </mat-sidenav-content>\r\n  </mat-sidenav-container>\r\n</div>", styles: [":root{--ars-color-link: #03A9F4;--ars-color-link-low: #0288D1;--ars-color-accent: #7894ae;--ars-color-accent-low: #456179;--ars-color-primary: #00a293;--ars-color-primary-low: #006a60;--ars-color-primary-hi: #12c0ae;--ars-color-secondary: #4a635f;--ars-color-secondary-low: #27403c;--ars-color-error: #ff5449;--ars-color-error-low: #a80710;--ars-color-ok: #388E3C;--ars-color-ok-low: #29692c;--ars-color-warning: #FFC107;--ars-color-warning-low: #FFA000;--ars-item-hover-background-color: #eaecef;--ars-item-selected-background-color: #ced1d2;--ars-item-opaque-background-color: rgba(255, 255, 255, .75);--ars-filterbox-filtered-background-color: #f9fbe7}.dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-close{margin-right:10px;margin-top:10px}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.scroll-auto{overflow:auto}.scroll-hidden{overflow:hidden}b{font-weight:700}.large{font-size:large!important}.small{font-size:small!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (prefers-color-scheme: dark){:root{--ars-color-link: #03A9F4;--ars-color-link-low: #0288D1;--ars-color-accent: #adcae6;--ars-color-accent-low: #5e7a93;--ars-color-primary: #53dbc9;--ars-color-primary-low: #008679;--ars-color-primary-hi: #74f8e5;--ars-color-secondary: #b1ccc6;--ars-color-secondary-low: #627c77;--ars-color-error: #ff5449;--ars-color-error-low: #a80710;--ars-color-ok: #4CAF50;--ars-color-ok-low: #3f8f41;--ars-color-warning: #FFC107;--ars-color-warning-low: #FFA000;--ars-item-hover-background-color: #262a29;--ars-item-selected-background-color: #3f4342;--ars-item-opaque-background-color: rgba(0, 0, 0, .65);--ars-filterbox-filtered-background-color: #c6c7b8}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b{font-weight:600}}a.help-link,.help-link>a{text-decoration:none;color:#2a91e0}.help-title-2,.help-title-1{font-weight:600!important}.help-word-hit{font-size:inherit;background-color:#ff0;border:1px solid silver;padding:0 4px}.help-hint{margin:10px;padding:5px 20px;background-color:#fafad2;border-radius:12px}.help-summary{margin:10px;padding:5px 20px;background-color:#e6e6fa;border-radius:12px}.help-img{display:flex;align-items:center;justify-content:center;margin:10px}.help-img-200,.help-img-300,.help-img-400,.help-img-500,.help-img-700,.help-img-800{width:100%}.help-img-200{max-width:200px}.help-img-300{max-width:300px}.help-img-400{max-width:400px}.help-img-500{max-width:500px}.help-img-600{max-width:600px}.help-img-700{max-width:700px}.help-img-800{max-width:800px}.help-filter-box{background-color:#f9fbe7;border-radius:12px;padding:6px;display:inline-block;margin:0 0 8px 10px}.helpbrowser-index{width:320px}.helpbrowser-index>.mat-drawer-inner-container{overflow-x:hidden!important}.tree{overflow-x:hidden}.tree-node{min-height:36px!important;padding-right:12px;margin-right:0}.tree-node .small-icon-button{width:2rem!important;height:2rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.tree-node .small-icon-button .mat-mdc-button-touch-target{width:2rem!important;height:2rem!important}.tree-node:hover{cursor:pointer;background-color:var(--mat-menu-item-hover-state-layer-color, transparent);border-radius:24px}.tree-node-simple,.tree-node-simple>div{min-height:36px!important}.tree-node-activated,.tree-node-activated>div{min-height:36px!important;font-weight:700!important}\n"] }]
+        }], propDecorators: { indexPane: [{
                 type: ViewChild,
-                args: ['sidenav']
+                args: ['indexPane']
             }] } });
 
 class HelpService {
@@ -722,7 +543,7 @@ class HelpService {
             height: '99%'
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: HelpService, deps: [{ token: i1$1.HttpClient }, { token: i2.DialogService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: HelpService, deps: [{ token: i1$1.HttpClient }, { token: i2$1.DialogService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: HelpService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: HelpService, decorators: [{
@@ -730,7 +551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i2.DialogService }] });
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i2$1.DialogService }] });
 
 class ArsHelpModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ArsHelpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -749,5 +570,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ArsHelpModule, FolderInfo, FolderNode, FolderTree, HelpService, HelpViewerComponent };
+export { ArsHelpModule, HelpService, HelpViewerComponent, IndexInfo, IndexNode, IndexTreeDataSource };
 //# sourceMappingURL=arsedizioni-ars-utils-help.mjs.map