@net7/components 3.10.1 → 3.12.0

package/fesm2020/net7-components.mjs

@@ -430,6 +430,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 type: Input
             }] } });
 
+//---------------------------
+class LoaderComponent {
+}
+LoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: LoaderComponent, selector: "n7-loader", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"n7-loader {{ data && data.classes ? data.classes : '' }}\">\n    Loading\n</div>" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'n7-loader', template: "<div class=\"n7-loader {{ data && data.classes ? data.classes : '' }}\">\n    Loading\n</div>" }]
+        }], propDecorators: { data: [{
+                type: Input
+            }] } });
+
+class IconComponent {
+    onClick(value) {
+        if (!this.emit)
+            return;
+        this.emit('click', value);
+    }
+}
+IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: IconComponent, selector: "n7-icon", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<ng-container *ngIf=\"data as icon\">\n    <span  class=\"n7-icon\" *ngIf=\"icon.id\"\n        [ngClass]=\"icon.id\"\n        [ngStyle]=\"icon.style\"\n        (click)=\"onClick(icon.payload)\">\n    </span>\n</ng-container>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'n7-icon', template: "<ng-container *ngIf=\"data as icon\">\n    <span  class=\"n7-icon\" *ngIf=\"icon.id\"\n        [ngClass]=\"icon.id\"\n        [ngStyle]=\"icon.style\"\n        (click)=\"onClick(icon.payload)\">\n    </span>\n</ng-container>\n" }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], emit: [{
+                type: Input
+            }] } });
+
+class ButtonComponent {
+    onClick(value) {
+        if (!this.emit)
+            return;
+        this.emit('click', value);
+    }
+}
+ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ButtonComponent, selector: "n7-button", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<ng-container *ngIf=\"data && data.anchor\">\n    <n7-anchor-wrapper [data]=\"data.anchor\"\n                       (clicked)=\"onClick($event)\">\n        <button class=\"n7-btn\"\n                [ngClass]=\"data.classes\"\n                [disabled]=\"data.isDisabled\"\n                [class.is-disabled]=\"data.isDisabled\"\n                [class.is-loading]=\"data.isLoading\">\n            <!-- loader -->\n            <n7-loader [data]=\"{classes: 'n7-btn__loader'}\"\n                       *ngIf=\"data.isLoading\"></n7-loader>\n            <!-- icon left -->\n            <n7-icon [data]=\"data.iconLeft\"\n                     *ngIf=\"data.iconLeft\">\n            </n7-icon>\n            <!-- button label -->\n            <span *ngIf=\"data.text\"\n                  class=\"n7-btn__text\">{{ data.text }}</span>\n            <!-- icon right -->\n            <n7-icon [data]=\"data.iconRight\"\n                     *ngIf=\"data.iconRight\">\n            </n7-icon>\n        </button>\n    </n7-anchor-wrapper>\n</ng-container>\n", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }, { type: LoaderComponent, selector: "n7-loader", inputs: ["data"] }, { type: IconComponent, selector: "n7-icon", inputs: ["data", "emit"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'n7-button', template: "<ng-container *ngIf=\"data && data.anchor\">\n    <n7-anchor-wrapper [data]=\"data.anchor\"\n                       (clicked)=\"onClick($event)\">\n        <button class=\"n7-btn\"\n                [ngClass]=\"data.classes\"\n                [disabled]=\"data.isDisabled\"\n                [class.is-disabled]=\"data.isDisabled\"\n                [class.is-loading]=\"data.isLoading\">\n            <!-- loader -->\n            <n7-loader [data]=\"{classes: 'n7-btn__loader'}\"\n                       *ngIf=\"data.isLoading\"></n7-loader>\n            <!-- icon left -->\n            <n7-icon [data]=\"data.iconLeft\"\n                     *ngIf=\"data.iconLeft\">\n            </n7-icon>\n            <!-- button label -->\n            <span *ngIf=\"data.text\"\n                  class=\"n7-btn__text\">{{ data.text }}</span>\n            <!-- icon right -->\n            <n7-icon [data]=\"data.iconRight\"\n                     *ngIf=\"data.iconRight\">\n            </n7-icon>\n        </button>\n    </n7-anchor-wrapper>\n</ng-container>\n" }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], emit: [{
+                type: Input
+            }] } });
+
 //---------------------------
 class CarouselComponent {
     constructor() {
@@ -1306,10 +1354,10 @@ class InnerTitleComponent {
     }
 }
 InnerTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InnerTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InnerTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: InnerTitleComponent, selector: "n7-inner-title", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-inner-title\">\n    <div class=\"n7-inner-title__left-wrapper\">\n        <ng-container *ngTemplateOutlet=\"icon; context:{$implicit: data.icon}\"></ng-container>\n        <div *ngIf=\"data.image\" \n             class=\"n7-inner-title__image-left\" \n             [ngStyle]=\"{'background-image': 'url(' + data.image + ')'}\"></div>\n\n        <div class=\"n7-inner-title__wrapper-texts\">\n            <div *ngIf=\"data.title.main\"\n            [innerHTML]=\"data.title.main.text\" \n            class=\"n7-inner-title__title {{data.title.main.classes || ''}}\">\n            </div>\n            <div *ngIf=\"data.title.secondary\" \n            [innerHTML]=\"data.title.secondary.text\" \n            class=\"n7-inner-title__subtitle {{data.title.secondary.classes || ''}}\">\n            </div>\n        </div>\n    </div>\n\n    <div class=\"n7-inner-title__tools\">\n        <!-- Toolbar label -->\n        <div *ngIf=\"data.tools\"\n            class=\"n7-inner-title__tools-label \">\n            {{data.tools}}\n        </div>\n        <!-- Actions -->\n        <ng-container *ngIf=\"data.actions\">\n            <ng-container *ngTemplateOutlet=\"actions; \n                        context:{$implicit: data.actions}\">\n            </ng-container>\n        </ng-container>\n    </div>\n\n</div>\n\n<!-- Template actions -->\n<ng-template #actions let-action>\n    <ng-container *ngIf=\"action.select\">\n        <ng-container *ngTemplateOutlet=\"select;\n                      context:{$implicit: action.select}\">\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"action.search\">\n        <ng-container *ngTemplateOutlet=\"search; \n                      context:{$implicit: action.search}\">\n        </ng-container>\n    </ng-container>\n    \n    <ng-container *ngIf=\"action.buttons\">\n        <ng-container *ngTemplateOutlet=\"buttons;\n                      context:{$implicit: action.buttons}\">\n        </ng-container>\n    </ng-container>\n</ng-template>\n    \n<!-- Template sorting -->\n<ng-template #select let-select>\n<div class=\"n7-inner-title__sorting\">\n    <span *ngIf=\"select.label\"\n          class=\"n7-inner-title__sorting-label \">\n        {{select.label}}\n    </span>\n    <select (change)=\"onChange(select.payload, $event.target.value)\"\n            class=\"n7-inner-title__sorting-select\">\n        <option *ngFor=\"let opt of select.options\"\n        value=\"{{opt.value}}\"\n        class=\"n7-inner-title__sorting-option\"\n        [selected]=\"opt.selected\"\n        [disabled]=\"opt.disabled\">\n            {{opt.text}}\n        </option>\n    </select>\n</div>\n</ng-template>\n\n<!-- Template search -->\n<ng-template #search let-search>\n    <div class=\"n7-inner-title__search\">\n        <input type=\"text\" \n            class=\"n7-inner-title__search-bar \" \n            placeholder=\"{{search.placeholder}}\"\n            (input)=\"onInputChange(search.payload, $event.target.value)\"\n            (keyup.enter)=\"onInputEnter(search.payload, $event.target.value)\">\n     <button *ngIf=\"search.button\" \n             (click)=\"onClick(search.button.payload)\"\n             class=\"n7-btn n7-inner-title__search-button \">\n         {{search.button.text}}\n     </button>\n    </div>\n</ng-template>\n\n<!-- Template buttons -->\n<ng-template #buttons let-buttons>\n    <div class=\"n7-inner-title__buttons-wrapper\">\n        <div *ngFor=\"let btn of buttons\"\n            class=\"n7-inner-title__single-button-wrapper\">\n            <n7-anchor-wrapper [classes]=\"'n7-btn n7-inner-title__buttons-action ' + btn.classes || ''\"\n            [data]=\"btn.anchor\"\n            (clicked)=\"onClick($event)\">\n                <span *ngIf=\"btn.icon\" class=\"n7-btn__icon {{btn.icon || ''}}\"></span>    \n                {{ btn.text }}\n            </n7-anchor-wrapper>\n        </div>\n    </div>\n</ng-template>\n\n<!-- Template Icon -->\n<ng-template #icon let-icon>\n    <!-- Complex icon -->\n    <span *ngIf=\"icon && icon.id\"\n          class=\"n7-inner-title__icon-left {{icon.id || ''}}\"\n          [ngStyle]=\"icon.style || {}\"></span>\n    <!-- Simple icon -->\n    <span *ngIf=\"icon && !icon.id\"\n          class=\"n7-inner-title__icon-left {{icon || ''}}\"></span>\n</ng-template>\n", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+InnerTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: InnerTitleComponent, selector: "n7-inner-title", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\"\n     class=\"n7-inner-title\"\n     [ngClass]=\"data.classes\">\n    <div class=\"n7-inner-title__left-wrapper\">\n        <ng-container *ngTemplateOutlet=\"icon; context:{$implicit: data.icon}\"></ng-container>\n        <div *ngIf=\"data.image\"\n             class=\"n7-inner-title__image-left\"\n             [ngStyle]=\"{'background-image': 'url(' + data.image + ')'}\">\n        </div>\n        <div class=\"n7-inner-title__wrapper-texts\">\n            <div *ngIf=\"data.title.main\"\n                 [innerHTML]=\"data.title.main.text\"\n                 class=\"n7-inner-title__title {{data.title.main.classes || ''}}\">\n            </div>\n            <div *ngIf=\"data.title.secondary\"\n                 [innerHTML]=\"data.title.secondary.text\"\n                 class=\"n7-inner-title__subtitle {{data.title.secondary.classes || ''}}\">\n            </div>\n        </div>\n    </div>\n\n    <div class=\"n7-inner-title__tools\"\n         *ngIf=\"data.tools || data.actions\">\n        <!-- Toolbar label -->\n        <div *ngIf=\"data.tools\"\n             class=\"n7-inner-title__tools-label \">\n            {{data.tools}}\n        </div>\n        <!-- Actions -->\n        <ng-container *ngIf=\"data.actions\">\n            <ng-container *ngTemplateOutlet=\"actions; \n                        context:{$implicit: data.actions}\">\n            </ng-container>\n        </ng-container>\n    </div>\n\n</div>\n\n<!-- Template actions -->\n<ng-template #actions\n             let-action>\n    <ng-container *ngIf=\"action.select\">\n        <ng-container *ngTemplateOutlet=\"select;\n                      context:{$implicit: action.select}\">\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"action.search\">\n        <ng-container *ngTemplateOutlet=\"search; \n                      context:{$implicit: action.search}\">\n        </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"action.buttons\">\n        <ng-container *ngTemplateOutlet=\"buttons;\n                      context:{$implicit: action.buttons}\">\n        </ng-container>\n    </ng-container>\n</ng-template>\n\n<!-- Template sorting -->\n<ng-template #select\n             let-select>\n    <div class=\"n7-inner-title__sorting\">\n        <span *ngIf=\"select.label\"\n              class=\"n7-inner-title__sorting-label \">\n            {{select.label}}\n        </span>\n        <select (change)=\"onChange(select.payload, $event.target.value)\"\n                class=\"n7-inner-title__sorting-select\">\n            <option *ngFor=\"let opt of select.options\"\n                    value=\"{{opt.value}}\"\n                    class=\"n7-inner-title__sorting-option\"\n                    [selected]=\"opt.selected\"\n                    [disabled]=\"opt.disabled\">\n                {{opt.text}}\n            </option>\n        </select>\n    </div>\n</ng-template>\n\n<!-- Template search -->\n<ng-template #search\n             let-search>\n    <div class=\"n7-inner-title__search\">\n        <input type=\"text\"\n               class=\"n7-inner-title__search-bar \"\n               placeholder=\"{{search.placeholder}}\"\n               (input)=\"onInputChange(search.payload, $event.target.value)\"\n               (keyup.enter)=\"onInputEnter(search.payload, $event.target.value)\">\n        <button *ngIf=\"search.button\"\n                (click)=\"onClick(search.button.payload)\"\n                class=\"n7-btn n7-inner-title__search-button \">\n            {{search.button.text}}\n        </button>\n    </div>\n</ng-template>\n\n<!-- Template buttons -->\n<ng-template #buttons\n             let-buttons>\n    <div class=\"n7-inner-title__buttons-wrapper\">\n        <div *ngFor=\"let btn of buttons\"\n             class=\"n7-inner-title__single-button-wrapper\">\n            <n7-anchor-wrapper [classes]=\"'n7-btn n7-inner-title__buttons-action ' + btn.classes || ''\"\n                               [data]=\"btn.anchor\"\n                               (clicked)=\"onClick($event)\">\n                <span *ngIf=\"btn.icon\"\n                      class=\"n7-btn__icon {{btn.icon || ''}}\"></span>\n                {{ btn.text }}\n            </n7-anchor-wrapper>\n        </div>\n    </div>\n</ng-template>\n\n<!-- Template Icon -->\n<ng-template #icon\n             let-icon>\n    <!-- Complex icon -->\n    <span *ngIf=\"icon && icon.id\"\n          class=\"n7-inner-title__icon-left {{icon.id || ''}}\"\n          [ngStyle]=\"icon.style || {}\"></span>\n    <!-- Simple icon -->\n    <span *ngIf=\"icon && !icon.id\"\n          class=\"n7-inner-title__icon-left {{icon || ''}}\"></span>\n</ng-template>\n", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InnerTitleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'n7-inner-title', template: "<div *ngIf=\"data\" class=\"n7-inner-title\">\n    <div class=\"n7-inner-title__left-wrapper\">\n        <ng-container *ngTemplateOutlet=\"icon; context:{$implicit: data.icon}\"></ng-container>\n        <div *ngIf=\"data.image\" \n             class=\"n7-inner-title__image-left\" \n             [ngStyle]=\"{'background-image': 'url(' + data.image + ')'}\"></div>\n\n        <div class=\"n7-inner-title__wrapper-texts\">\n            <div *ngIf=\"data.title.main\"\n            [innerHTML]=\"data.title.main.text\" \n            class=\"n7-inner-title__title {{data.title.main.classes || ''}}\">\n            </div>\n            <div *ngIf=\"data.title.secondary\" \n            [innerHTML]=\"data.title.secondary.text\" \n            class=\"n7-inner-title__subtitle {{data.title.secondary.classes || ''}}\">\n            </div>\n        </div>\n    </div>\n\n    <div class=\"n7-inner-title__tools\">\n        <!-- Toolbar label -->\n        <div *ngIf=\"data.tools\"\n            class=\"n7-inner-title__tools-label \">\n            {{data.tools}}\n        </div>\n        <!-- Actions -->\n        <ng-container *ngIf=\"data.actions\">\n            <ng-container *ngTemplateOutlet=\"actions; \n                        context:{$implicit: data.actions}\">\n            </ng-container>\n        </ng-container>\n    </div>\n\n</div>\n\n<!-- Template actions -->\n<ng-template #actions let-action>\n    <ng-container *ngIf=\"action.select\">\n        <ng-container *ngTemplateOutlet=\"select;\n                      context:{$implicit: action.select}\">\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"action.search\">\n        <ng-container *ngTemplateOutlet=\"search; \n                      context:{$implicit: action.search}\">\n        </ng-container>\n    </ng-container>\n    \n    <ng-container *ngIf=\"action.buttons\">\n        <ng-container *ngTemplateOutlet=\"buttons;\n                      context:{$implicit: action.buttons}\">\n        </ng-container>\n    </ng-container>\n</ng-template>\n    \n<!-- Template sorting -->\n<ng-template #select let-select>\n<div class=\"n7-inner-title__sorting\">\n    <span *ngIf=\"select.label\"\n          class=\"n7-inner-title__sorting-label \">\n        {{select.label}}\n    </span>\n    <select (change)=\"onChange(select.payload, $event.target.value)\"\n            class=\"n7-inner-title__sorting-select\">\n        <option *ngFor=\"let opt of select.options\"\n        value=\"{{opt.value}}\"\n        class=\"n7-inner-title__sorting-option\"\n        [selected]=\"opt.selected\"\n        [disabled]=\"opt.disabled\">\n            {{opt.text}}\n        </option>\n    </select>\n</div>\n</ng-template>\n\n<!-- Template search -->\n<ng-template #search let-search>\n    <div class=\"n7-inner-title__search\">\n        <input type=\"text\" \n            class=\"n7-inner-title__search-bar \" \n            placeholder=\"{{search.placeholder}}\"\n            (input)=\"onInputChange(search.payload, $event.target.value)\"\n            (keyup.enter)=\"onInputEnter(search.payload, $event.target.value)\">\n     <button *ngIf=\"search.button\" \n             (click)=\"onClick(search.button.payload)\"\n             class=\"n7-btn n7-inner-title__search-button \">\n         {{search.button.text}}\n     </button>\n    </div>\n</ng-template>\n\n<!-- Template buttons -->\n<ng-template #buttons let-buttons>\n    <div class=\"n7-inner-title__buttons-wrapper\">\n        <div *ngFor=\"let btn of buttons\"\n            class=\"n7-inner-title__single-button-wrapper\">\n            <n7-anchor-wrapper [classes]=\"'n7-btn n7-inner-title__buttons-action ' + btn.classes || ''\"\n            [data]=\"btn.anchor\"\n            (clicked)=\"onClick($event)\">\n                <span *ngIf=\"btn.icon\" class=\"n7-btn__icon {{btn.icon || ''}}\"></span>    \n                {{ btn.text }}\n            </n7-anchor-wrapper>\n        </div>\n    </div>\n</ng-template>\n\n<!-- Template Icon -->\n<ng-template #icon let-icon>\n    <!-- Complex icon -->\n    <span *ngIf=\"icon && icon.id\"\n          class=\"n7-inner-title__icon-left {{icon.id || ''}}\"\n          [ngStyle]=\"icon.style || {}\"></span>\n    <!-- Simple icon -->\n    <span *ngIf=\"icon && !icon.id\"\n          class=\"n7-inner-title__icon-left {{icon || ''}}\"></span>\n</ng-template>\n" }]
+            args: [{ selector: 'n7-inner-title', template: "<div *ngIf=\"data\"\n     class=\"n7-inner-title\"\n     [ngClass]=\"data.classes\">\n    <div class=\"n7-inner-title__left-wrapper\">\n        <ng-container *ngTemplateOutlet=\"icon; context:{$implicit: data.icon}\"></ng-container>\n        <div *ngIf=\"data.image\"\n             class=\"n7-inner-title__image-left\"\n             [ngStyle]=\"{'background-image': 'url(' + data.image + ')'}\">\n        </div>\n        <div class=\"n7-inner-title__wrapper-texts\">\n            <div *ngIf=\"data.title.main\"\n                 [innerHTML]=\"data.title.main.text\"\n                 class=\"n7-inner-title__title {{data.title.main.classes || ''}}\">\n            </div>\n            <div *ngIf=\"data.title.secondary\"\n                 [innerHTML]=\"data.title.secondary.text\"\n                 class=\"n7-inner-title__subtitle {{data.title.secondary.classes || ''}}\">\n            </div>\n        </div>\n    </div>\n\n    <div class=\"n7-inner-title__tools\"\n         *ngIf=\"data.tools || data.actions\">\n        <!-- Toolbar label -->\n        <div *ngIf=\"data.tools\"\n             class=\"n7-inner-title__tools-label \">\n            {{data.tools}}\n        </div>\n        <!-- Actions -->\n        <ng-container *ngIf=\"data.actions\">\n            <ng-container *ngTemplateOutlet=\"actions; \n                        context:{$implicit: data.actions}\">\n            </ng-container>\n        </ng-container>\n    </div>\n\n</div>\n\n<!-- Template actions -->\n<ng-template #actions\n             let-action>\n    <ng-container *ngIf=\"action.select\">\n        <ng-container *ngTemplateOutlet=\"select;\n                      context:{$implicit: action.select}\">\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"action.search\">\n        <ng-container *ngTemplateOutlet=\"search; \n                      context:{$implicit: action.search}\">\n        </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"action.buttons\">\n        <ng-container *ngTemplateOutlet=\"buttons;\n                      context:{$implicit: action.buttons}\">\n        </ng-container>\n    </ng-container>\n</ng-template>\n\n<!-- Template sorting -->\n<ng-template #select\n             let-select>\n    <div class=\"n7-inner-title__sorting\">\n        <span *ngIf=\"select.label\"\n              class=\"n7-inner-title__sorting-label \">\n            {{select.label}}\n        </span>\n        <select (change)=\"onChange(select.payload, $event.target.value)\"\n                class=\"n7-inner-title__sorting-select\">\n            <option *ngFor=\"let opt of select.options\"\n                    value=\"{{opt.value}}\"\n                    class=\"n7-inner-title__sorting-option\"\n                    [selected]=\"opt.selected\"\n                    [disabled]=\"opt.disabled\">\n                {{opt.text}}\n            </option>\n        </select>\n    </div>\n</ng-template>\n\n<!-- Template search -->\n<ng-template #search\n             let-search>\n    <div class=\"n7-inner-title__search\">\n        <input type=\"text\"\n               class=\"n7-inner-title__search-bar \"\n               placeholder=\"{{search.placeholder}}\"\n               (input)=\"onInputChange(search.payload, $event.target.value)\"\n               (keyup.enter)=\"onInputEnter(search.payload, $event.target.value)\">\n        <button *ngIf=\"search.button\"\n                (click)=\"onClick(search.button.payload)\"\n                class=\"n7-btn n7-inner-title__search-button \">\n            {{search.button.text}}\n        </button>\n    </div>\n</ng-template>\n\n<!-- Template buttons -->\n<ng-template #buttons\n             let-buttons>\n    <div class=\"n7-inner-title__buttons-wrapper\">\n        <div *ngFor=\"let btn of buttons\"\n             class=\"n7-inner-title__single-button-wrapper\">\n            <n7-anchor-wrapper [classes]=\"'n7-btn n7-inner-title__buttons-action ' + btn.classes || ''\"\n                               [data]=\"btn.anchor\"\n                               (clicked)=\"onClick($event)\">\n                <span *ngIf=\"btn.icon\"\n                      class=\"n7-btn__icon {{btn.icon || ''}}\"></span>\n                {{ btn.text }}\n            </n7-anchor-wrapper>\n        </div>\n    </div>\n</ng-template>\n\n<!-- Template Icon -->\n<ng-template #icon\n             let-icon>\n    <!-- Complex icon -->\n    <span *ngIf=\"icon && icon.id\"\n          class=\"n7-inner-title__icon-left {{icon.id || ''}}\"\n          [ngStyle]=\"icon.style || {}\"></span>\n    <!-- Simple icon -->\n    <span *ngIf=\"icon && !icon.id\"\n          class=\"n7-inner-title__icon-left {{icon || ''}}\"></span>\n</ng-template>\n" }]
         }], propDecorators: { data: [{
                 type: Input
             }], emit: [{
@@ -1354,6 +1402,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 type: Input
             }] } });
 
+class InputTextareaComponent {
+    onChange(inputPayload, value) {
+        if (!this.emit)
+            return;
+        this.emit('change', { inputPayload, value });
+    }
+}
+InputTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+InputTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: InputTextareaComponent, selector: "n7-input-textarea", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data as input\"\n     class=\"n7-input-textarea\">\n    <label *ngIf=\"input.label\"\n           class=\"n7-input-textarea__label\"\n           for=\"{{ input.id }}\"\n           [innerHTML]=\"input.label\">\n    </label>\n    <div class=\"n7-input-textarea__wrapper\"\n         [ngClass]=\"{\n            'has-icon': !!input.icon\n        }\">\n        <textarea id=\"{{ input.id }}\"\n               type=\"textarea\"\n               class=\"n7-input-textarea__text {{input.classes || ''}}\"\n               placeholder=\"{{input.placeholder || ''}}\"\n               [value]=\"input.value || null\"\n               [disabled]=\"input.disabled\"\n               (input)=\"onChange(input.inputPayload, $event.target.value)\"\n               (keyup.enter)=\"onChange(input.enterPayload, $event.target.value)\">\n        </textarea>\n    </div>\n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputTextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'n7-input-textarea', template: "<div *ngIf=\"data as input\"\n     class=\"n7-input-textarea\">\n    <label *ngIf=\"input.label\"\n           class=\"n7-input-textarea__label\"\n           for=\"{{ input.id }}\"\n           [innerHTML]=\"input.label\">\n    </label>\n    <div class=\"n7-input-textarea__wrapper\"\n         [ngClass]=\"{\n            'has-icon': !!input.icon\n        }\">\n        <textarea id=\"{{ input.id }}\"\n               type=\"textarea\"\n               class=\"n7-input-textarea__text {{input.classes || ''}}\"\n               placeholder=\"{{input.placeholder || ''}}\"\n               [value]=\"input.value || null\"\n               [disabled]=\"input.disabled\"\n               (input)=\"onChange(input.inputPayload, $event.target.value)\"\n               (keyup.enter)=\"onChange(input.enterPayload, $event.target.value)\">\n        </textarea>\n    </div>\n</div>\n" }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], emit: [{
+                type: Input
+            }] } });
+
 //---------------------------
 class InputTextComponent {
     onChange(inputPayload, value) {
@@ -1392,18 +1458,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 type: Input
             }] } });
 
-//---------------------------
-class LoaderComponent {
-}
-LoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: LoaderComponent, selector: "n7-loader", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"n7-loader {{ data && data.classes ? data.classes : '' }}\">\n    Loading\n</div>" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'n7-loader', template: "<div class=\"n7-loader {{ data && data.classes ? data.classes : '' }}\">\n    Loading\n</div>" }]
-        }], propDecorators: { data: [{
-                type: Input
-            }] } });
-
 //---------------------------
 class MapComponent {
     constructor() {
@@ -1525,6 +1579,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 type: Input
             }] } });
 
+//---------------------------
+class ProgressLineComponent {
+}
+ProgressLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ProgressLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ProgressLineComponent, selector: "n7-progress-line", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-progress-line\">\n    <div class=\"n7-progress-line__text-wrapper\">\n        <span class=\"n7-progress-line__label\" *ngIf=\"data.label\">\n            {{ data.label }}\n        </span>\n        <span class=\"n7-progress-line__value\" *ngIf=\"data.value || data.value===0\">\n            {{ data.value }}%\n        </span>\n    </div>\n    <div class=\"n7-progress-line__wrapper\">\n        <div class='n7-progress-line__bar' [ngStyle]=\"{'width.%':data.value}\"> {{data.value}}%\n        </div>\n    </div>\n</div>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressLineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'n7-progress-line', template: "<div *ngIf=\"data\" class=\"n7-progress-line\">\n    <div class=\"n7-progress-line__text-wrapper\">\n        <span class=\"n7-progress-line__label\" *ngIf=\"data.label\">\n            {{ data.label }}\n        </span>\n        <span class=\"n7-progress-line__value\" *ngIf=\"data.value || data.value===0\">\n            {{ data.value }}%\n        </span>\n    </div>\n    <div class=\"n7-progress-line__wrapper\">\n        <div class='n7-progress-line__bar' [ngStyle]=\"{'width.%':data.value}\"> {{data.value}}%\n        </div>\n    </div>\n</div>" }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], emit: [{
+                type: Input
+            }] } });
+
 //---------------------------
 class SidebarHeaderComponent {
     onClick(payload) {
@@ -1632,102 +1700,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 type: Input
             }] } });
 
-//---------------------------
-class TextViewerComponent {
-    constructor() {
-        this.isDisplayed = false;
-        document.addEventListener('pb-page-ready', () => {
-            document.addEventListener('pb-end-update', (ev) => {
-                this.scrollElementsIntoView(ev.detail, 'chapter', '#view1');
-            });
-        });
-    }
-    ngOnInit() {
-        if (!TextViewerComponent._loaded) {
-            const s = document.createElement('script');
-            s.setAttribute('src', '/assets/pb-components/dist/pb-components-bundle.js');
-            s.setAttribute('type', 'module');
-            s.onload = this.onScriptLoaded;
-            document.head.appendChild(s);
-        }
-    }
-    scrollElementsIntoView(target, type, view) {
-        setTimeout(() => {
-            let element;
-            if (type === 'chapter') {
-                if (document
-                    .querySelector('.n7-text-viewer #view0')
-                    .shadowRoot.querySelector('pb-highlight')) {
-                    const highlight = document
-                        .querySelector('.n7-text-viewer #view0')
-                        .shadowRoot.querySelectorAll('pb-highlight');
-                    const highlightId = highlight[highlight.length - 1].id; // s.x
-                    const fragmentNumber = highlightId.replace('.', '\\.');
-                    element = document
-                        .querySelector(view)
-                        .shadowRoot.querySelector(`#${fragmentNumber}`);
-                }
-            }
-            else if (type === 'entity') {
-                const key = target.__key;
-                element = document
-                    .querySelector(`.n7-text-viewer ${view}`)
-                    .shadowRoot.querySelector(`#${key}`);
-            }
-            const container = document.querySelector(`.n7-text-viewer ${view}`);
-            if (element) {
-                container.scrollTop = element.offsetTop;
-            }
-        }, 300);
-    }
-    displayIndex() {
-        if (this.isDisplayed === false) {
-            this.isDisplayed = true;
-        }
-        else
-            this.isDisplayed = false;
-    }
-    onScriptLoaded() {
-        TextViewerComponent._loaded = true;
-    }
-    onClick(payload) {
-        // FIXME: mettere logica onClick sul boilerplate / progetto
-        // if (!this.emit) return;
-        // this.emit('click', payload);
-        if (this.isDisplayed === false) {
-            let target;
-            let i = 0;
-            while (!target && i < payload.path.length - 1) {
-                if (payload.path[i].tagName === 'PB-HIGHLIGHT') {
-                    target = payload.path[i];
-                }
-                else {
-                    i += 1;
-                }
-            }
-            if (target.__key
-                && (target.className.includes('person')
-                    || target.className.includes('place'))) {
-                this.isDisplayed = true;
-                this.scrollElementsIntoView(target, 'entity', '#text-viewer-index');
-            }
-        }
-        else
-            this.isDisplayed = false;
-    }
-}
-TextViewerComponent._loaded = false;
-TextViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TextViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TextViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TextViewerComponent, selector: "n7-text-viewer", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div\n  class=\"n7-text-viewer {{data.classes || ''}}\"\n  *ngIf=\"data && data.endpoint\"\n>\n\n  <pb-page [attr.endpoint]=\"data.endpoint\" api-version=\"1.0.0\">\n    <pb-document\n      *ngFor=\"let doc of data.docs\"\n      [path]=\"doc.xml\"\n      [odd]=\"doc.odd\"\n      [id]=\"doc.id\"\n    >\n    </pb-document>\n\n    <app-drawer-layout force-narrow=\"force-narrow\" narrow=\"\">\n      <app-header-layout>\n        <app-header\n          fixed=\"fixed\"\n          data-template=\"browse:fix-links\"\n          style=\"\n            transition-duration: 0ms;\n            transform: translate3d(0px, 0px, 0px);\n            left: 0px;\n            right: 0.399994px;\n          \"\n        >\n          <app-toolbar\n            class=\"toolbar\"\n            sticky=\"sticky\"\n            style=\"transform: translate3d(0px, 0px, 0px)\"\n          >\n            <paper-icon-button\n              *ngIf=\"data.docs.length === 1\"\n              id=\"tocToggle\"\n              class=\"toc-toggle\"\n              icon=\"icons:view-list\"\n              role=\"button\"\n              tabindex=\"0\"\n              aria-disabled=\"false\"\n            ></paper-icon-button>\n\n            <pb-toggle-feature\n              *ngIf=\"data.docs.length === 1\"\n              name=\"highlight1\"\n              selector=\"tei-app,pb-popover,pb-highlight\"\n              default=\"off\"\n              action=\"disable\"\n              emit=\"transcription\"\n              subscribe=\"transcription\"\n            >\n              <ng-container *ngIf=\"data.labels && data.labels.view\">\n                {{data.labels.view}}\n              </ng-container>\n              <ng-container *ngIf=\"!data.labels || !data.labels.view\">\n                <pb-i18n key=\"document.plain\">Plain Reading View</pb-i18n>\n              </ng-container>\n            </pb-toggle-feature>\n\n            <ng-container\n              *ngIf=\"data.docs?.length == 1 || data.docs[0].translation\"\n            >\n              <pb-zoom\n                emit=\"transcription\"\n                direction=\"in\"\n                icon=\"icons:zoom-in\"\n              ></pb-zoom>\n              <pb-zoom\n                emit=\"transcription\"\n                direction=\"out\"\n                icon=\"icons:zoom-out\"\n              ></pb-zoom>\n            </ng-container>\n\n            <ng-container\n              *ngIf=\"!data.docs[0].translation && data.docs?.length == 1\"\n            >\n              <pb-navigation\n                emit=\"transcription\"\n                keyboard=\"left\"\n                subscribe=\"transcription\"\n                direction=\"backward\"\n                unit=\"page\"\n              >\n                <paper-icon-button\n                  icon=\"icons:chevron-left\"\n                  role=\"button\"\n                  tabindex=\"0\"\n                  aria-disabled=\"false\"\n                ></paper-icon-button>\n              </pb-navigation>\n              <pb-navigation\n                emit=\"transcription\"\n                keyboard=\"right\"\n                subscribe=\"transcription\"\n                direction=\"forward\"\n                unit=\"page\"\n              >\n                <paper-icon-button\n                  icon=\"icons:chevron-right\"\n                  role=\"button\"\n                  tabindex=\"0\"\n                  aria-disabled=\"false\"\n                ></paper-icon-button>\n              </pb-navigation>\n            </ng-container>\n\n            <ng-container *ngIf=\"data.docs?.length > 1\">\n              <div class=\"n7-text-viewer__toolbar-container-flex\">\n                <paper-icon-button\n                  *ngIf=\"data.docs?.length > 1\"\n                  id=\"tocToggle\"\n                  class=\"toc-toggle\"\n                  icon=\"icons:view-list\"\n                  role=\"button\"\n                  tabindex=\"0\"\n                  aria-disabled=\"false\"\n                ></paper-icon-button>\n              </div>\n            </ng-container>\n\n            <ng-container\n              *ngIf=\"!data.docs[0].translation && data.docs?.length > 1\"\n            >\n              <div class=\"n7-text-viewer__toolbar-container-flex\">\n                <pb-navigation\n                  emit=\"transcription\"\n                  keyboard=\"left\"\n                  subscribe=\"transcription\"\n                  direction=\"backward\"\n                  unit=\"page\"\n                >\n                  <paper-icon-button\n                    icon=\"icons:chevron-left\"\n                    role=\"button\"\n                    tabindex=\"0\"\n                    aria-disabled=\"false\"\n                  ></paper-icon-button>\n                </pb-navigation>\n              </div>\n\n              <div class=\"n7-text-viewer__toolbar-container-flex\">\n                <pb-navigation\n                  emit=\"transcription\"\n                  keyboard=\"right\"\n                  subscribe=\"transcription\"\n                  direction=\"forward\"\n                  unit=\"page\"\n                >\n                  <paper-icon-button\n                    icon=\"icons:chevron-right\"\n                    role=\"button\"\n                    tabindex=\"0\"\n                    aria-disabled=\"false\"\n                  ></paper-icon-button>\n                </pb-navigation>\n              </div>\n            </ng-container>\n\n            <ng-container\n              *ngIf=\"data.docs?.length > 1 && !data.docs[0].translation\"\n            >\n              <div class=\"n7-text-viewer__toolbar-container-flex\">\n                <pb-zoom\n                  emit=\"transcription\"\n                  direction=\"in\"\n                  icon=\"icons:zoom-in\"\n                ></pb-zoom>\n\n                <pb-zoom\n                  emit=\"transcription\"\n                  direction=\"out\"\n                  icon=\"icons:zoom-out\"\n                ></pb-zoom>\n              </div>\n            </ng-container>\n\n            <ng-container\n              *ngIf=\"data.docs.length > 1 && data.labels && data.labels.select.label\"\n            >\n              <div class=\"n7-text-viewer__toolbar-container-flex\">\n                <pb-select-feature\n                  id=\"select-view2\"\n                  name=\"view2\"\n                  [label]=\"data.labels && data.labels.select.label ? data.labels.select.label : 'Mostra entit\u00E0'\"\n                  [items]='[\n                            {\"name\": data.labels.select.type.all, \n                            \"selectors\": [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": false}]},\n                            {\"name\": data.labels.select.type.person, \n                            \"selectors\": \n                            [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": true}]},\n                            {\"name\": data.labels.select.type.place, \"selectors\": \n                            [{\"selector\": \".place\", \"state\": false}, {\"selector\": \".person\", \"state\": true}]}\n                ]'\n                  subscribe=\"addChannel\"\n                  emit=\"addChannel\"\n                ></pb-select-feature>\n              </div>\n            </ng-container>\n\n            <ng-container\n              *ngIf=\"data.docs.length > 1 && (!data.labels || !data.labels.select.label)\"\n            >\n              <div class=\"n7-text-viewer__toolbar-container-flex\">\n                <pb-select-feature\n                  id=\"select-view2\"\n                  name=\"view2\"\n                  label=\"Mostra entit\u00E0\"\n                  [items]='[\n                            {\"name\": \"Tutto\", \n                            \"selectors\": [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": false}]},\n                            {\"name\": \"Personaggi\", \n                            \"selectors\": \n                            [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": true}]},\n                            {\"name\": \"Luoghi\", \"selectors\": \n                            [{\"selector\": \".place\", \"state\": false}, {\"selector\": \".person\", \"state\": true}]}\n                ]'\n                  subscribe=\"addChannel\"\n                  emit=\"addChannel\"\n                ></pb-select-feature>\n              </div>\n            </ng-container>\n\n            <ng-container\n              *ngIf=\"data.docs?.length > 1 && data.docs[1].channel && data.facsimile\"\n            >\n              <ng-container *ngIf=\"data.labels && data.labels.index.hide\">\n                <div class=\"n7-text-viewer__toolbar-container-flex\">\n                  <paper-button raised=\"\" (click)=\"displayIndex()\"\n                    >{{ !isDisplayed ? data.labels.index.hide :\n                    data.labels.index.show }}</paper-button\n                  >\n                </div>\n              </ng-container>\n              <ng-container *ngIf=\"!data.labels || !data.labels.index.hide\">\n                <div class=\"n7-text-viewer__toolbar-container-flex\">\n                  <paper-button raised=\"\" (click)=\"displayIndex()\"\n                    >{{ !isDisplayed ? 'Indici' : 'Riassunto'\n                    }}</paper-button\n                  >\n                </div>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngIf=\"data.docs && data.download\">\n              <div class=\"n7-text-viewer__toolbar-container-flex\">\n                <pb-download\n                  [type]=\"data.download && data.download.format ? data.download.format: ''\"\n                  [src]=\"data.docs[0].id\"\n                  [url]=\"data.download && data.download.file ? data.download.file : ''\"\n                  dialog=\"downloadDialog\"\n                  [title]=\"data.download && data.download.format && data.download.label ? data.download.label + ' ' + data.download.format: ''\"\n                >\n                  <paper-button raised=\"\"\n                    >{{data.download && data.download.format &&\n                    data.download.label ? data.download.label + ' ' +\n                    data.download.format: ''}}</paper-button\n                  >\n                </pb-download>\n              </div>\n            </ng-container>\n\n            <pb-progress\n              subscribe=\"transcription\"\n              indeterminate=\"\"\n              bottom-item=\"bottom-item\"\n              style=\"visibility: hidden\"\n            ></pb-progress>\n          </app-toolbar>\n        </app-header>\n\n        <pb-drawer\n          toggle=\"tocToggle\"\n          class=\"tocDrawer\"\n          emit=\"toc\"\n          subscribe=\"transcription\"\n        >\n          <div class=\"drawer-content\">\n            <h3>\n              <ng-container *ngIf=\"data.labels && data.labels.toc\">\n                {{data.labels.toc}}\n              </ng-container>\n              <ng-container *ngIf=\"!data.labels || !data.labels.toc\">\n                <pb-i18n key=\"document.contents\">Contents</pb-i18n>\n              </ng-container>\n            </h3>\n            <pb-load\n              *ngIf=\"data.docs\"\n              id=\"toc\"\n              url=\"api/document/{doc}/contents?target=transcription&amp;icons=true\"\n              [src]=\"data.docs[0].id\"\n              subscribe=\"toc\"\n              emit=\"toc\"\n              expand=\"expand\"\n              auto=\"auto\"\n            >\n              <ng-container *ngIf=\"data.labels && data.labels.loading\">\n                {{data.labels.loading}}\n              </ng-container>\n              <ng-container *ngIf=\"!data.labels || !data.labels.loading\">\n                <pb-i18n key=\"dialogs.loading\">Loading</pb-i18n>\n              </ng-container>\n            </pb-load>\n          </div>\n        </pb-drawer>\n        <main class=\"content-body\">\n          <pb-facsimile\n            *ngIf=\"data.facsimile\"\n            id=\"facsimile\"\n            [attr.base-uri]=\"data.facsimile.uri\"\n            subscribe=\"transcription\"\n            default-zoom-level=\"0\"\n            show-navigation-control=\"show-navigation-control\"\n            show-navigator=\"show-navigator\"\n          >\n          </pb-facsimile>\n          <ng-container *ngFor=\"let doc of data.docs; index as $i;\">\n            <!-- NO CHANNEL -->\n            <pb-view\n              *ngIf=\"!doc.channel\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              subscribe=\"transcription\"\n              emit=\"transcription\"\n              [attr.wait-for]=\"data.facsimile ? '#facsimile' : null\"\n              column-separator=\".tei-cb\"\n              append-footnotes=\"append-footnotes\"\n              view=\"{{ doc.view }}\"\n            ></pb-view>\n            <!-- WITH CHANNEL / MURUCA DEMO -->\n            <pb-view\n              *ngIf=\"doc.channel && doc.translation\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              xpath=\"//text[@type='source']\"\n              emit=\"{{ doc.channel }}\"\n              subscribe=\"{{ doc.channel }}\"\n              view=\"{{ doc.view }}\"\n            >\n            </pb-view>\n            <pb-view\n              *ngIf=\"doc.channel && doc.translation\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              xpath=\"{{ doc.xpath }}\"\n              emit=\"{{ doc.channel }}\"\n              subscribe=\"{{ doc.channel }}\"\n              view=\"{{ doc.view }}\"\n            >\n              <pb-param name=\"mode\" value=\"commentary\"></pb-param>\n            </pb-view>\n            <!-- WITH CHANNEL / addChannel -->\n            <pb-view\n              [hidden]=\"isDisplayed\"\n              (click)=\"onClick($event)\"\n              *ngIf=\"doc.channel && !doc.translation\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              [odd]=\"doc.odd\"\n              emit=\"addChannel\"\n              subscribe=\"addChannel\"\n              view=\"{{ doc.view }}\"\n            >\n              <pb-param name=\"mode\" value=\"commentary\"></pb-param>\n            </pb-view>\n\n            <ng-container *ngIf=\"doc.channel && !doc.translation\">\n              <!--  -->\n              <pb-view\n                [hidden]=\"!isDisplayed\"\n                *ngIf=\"doc.channel && !doc.translation\"\n                [src]=\"doc.id\"\n                [odd]=\"doc.odd\"\n                id=\"text-viewer-index\"\n                subscribe=\"index\"\n                emit=\"letter\"\n              >\n                <pb-param name=\"mode\" value=\"facets\"></pb-param>\n              </pb-view>\n              <!--  -->\n            </ng-container>\n          </ng-container>\n        </main>\n      </app-header-layout>\n    </app-drawer-layout>\n  </pb-page>\n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TextViewerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'n7-text-viewer', template: "<div\n  class=\"n7-text-viewer {{data.classes || ''}}\"\n  *ngIf=\"data && data.endpoint\"\n>\n\n  <pb-page [attr.endpoint]=\"data.endpoint\" api-version=\"1.0.0\">\n    <pb-document\n      *ngFor=\"let doc of data.docs\"\n      [path]=\"doc.xml\"\n      [odd]=\"doc.odd\"\n      [id]=\"doc.id\"\n    >\n    </pb-document>\n\n    <app-drawer-layout force-narrow=\"force-narrow\" narrow=\"\">\n      <app-header-layout>\n        <app-header\n          fixed=\"fixed\"\n          data-template=\"browse:fix-links\"\n          style=\"\n            transition-duration: 0ms;\n            transform: translate3d(0px, 0px, 0px);\n            left: 0px;\n            right: 0.399994px;\n          \"\n        >\n          <app-toolbar\n            class=\"toolbar\"\n            sticky=\"sticky\"\n            style=\"transform: translate3d(0px, 0px, 0px)\"\n          >\n            <paper-icon-button\n              *ngIf=\"data.docs.length === 1\"\n              id=\"tocToggle\"\n              class=\"toc-toggle\"\n              icon=\"icons:view-list\"\n              role=\"button\"\n              tabindex=\"0\"\n              aria-disabled=\"false\"\n            ></paper-icon-button>\n\n            <pb-toggle-feature\n              *ngIf=\"data.docs.length === 1\"\n              name=\"highlight1\"\n              selector=\"tei-app,pb-popover,pb-highlight\"\n              default=\"off\"\n              action=\"disable\"\n              emit=\"transcription\"\n              subscribe=\"transcription\"\n            >\n              <ng-container *ngIf=\"data.labels && data.labels.view\">\n                {{data.labels.view}}\n              </ng-container>\n              <ng-container *ngIf=\"!data.labels || !data.labels.view\">\n                <pb-i18n key=\"document.plain\">Plain Reading View</pb-i18n>\n              </ng-container>\n            </pb-toggle-feature>\n\n            <ng-container\n              *ngIf=\"data.docs?.length == 1 || data.docs[0].translation\"\n            >\n              <pb-zoom\n                emit=\"transcription\"\n                direction=\"in\"\n                icon=\"icons:zoom-in\"\n              ></pb-zoom>\n              <pb-zoom\n                emit=\"transcription\"\n                direction=\"out\"\n                icon=\"icons:zoom-out\"\n              ></pb-zoom>\n            </ng-container>\n\n            <ng-container\n              *ngIf=\"!data.docs[0].translation && data.docs?.length == 1\"\n            >\n              <pb-navigation\n                emit=\"transcription\"\n                keyboard=\"left\"\n                subscribe=\"transcription\"\n                direction=\"backward\"\n                unit=\"page\"\n              >\n                <paper-icon-button\n                  icon=\"icons:chevron-left\"\n                  role=\"button\"\n                  tabindex=\"0\"\n                  aria-disabled=\"false\"\n                ></paper-icon-button>\n              </pb-navigation>\n              <pb-navigation\n                emit=\"transcription\"\n                keyboard=\"right\"\n                subscribe=\"transcription\"\n                direction=\"forward\"\n                unit=\"page\"\n              >\n                <paper-icon-button\n                  icon=\"icons:chevron-right\"\n                  role=\"button\"\n                  tabindex=\"0\"\n                  aria-disabled=\"false\"\n                ></paper-icon-button>\n              </pb-navigation>\n            </ng-container>\n\n            <ng-container *ngIf=\"data.docs?.length > 1\">\n              <div class=\"n7-text-viewer__toolbar-container-flex\">\n                <paper-icon-button\n                  *ngIf=\"data.docs?.length > 1\"\n                  id=\"tocToggle\"\n                  class=\"toc-toggle\"\n                  icon=\"icons:view-list\"\n                  role=\"button\"\n                  tabindex=\"0\"\n                  aria-disabled=\"false\"\n                ></paper-icon-button>\n              </div>\n            </ng-container>\n\n            <ng-container\n              *ngIf=\"!data.docs[0].translation && data.docs?.length > 1\"\n            >\n              <div class=\"n7-text-viewer__toolbar-container-flex\">\n                <pb-navigation\n                  emit=\"transcription\"\n                  keyboard=\"left\"\n                  subscribe=\"transcription\"\n                  direction=\"backward\"\n                  unit=\"page\"\n                >\n                  <paper-icon-button\n                    icon=\"icons:chevron-left\"\n                    role=\"button\"\n                    tabindex=\"0\"\n                    aria-disabled=\"false\"\n                  ></paper-icon-button>\n                </pb-navigation>\n              </div>\n\n              <div class=\"n7-text-viewer__toolbar-container-flex\">\n                <pb-navigation\n                  emit=\"transcription\"\n                  keyboard=\"right\"\n                  subscribe=\"transcription\"\n                  direction=\"forward\"\n                  unit=\"page\"\n                >\n                  <paper-icon-button\n                    icon=\"icons:chevron-right\"\n                    role=\"button\"\n                    tabindex=\"0\"\n                    aria-disabled=\"false\"\n                  ></paper-icon-button>\n                </pb-navigation>\n              </div>\n            </ng-container>\n\n            <ng-container\n              *ngIf=\"data.docs?.length > 1 && !data.docs[0].translation\"\n            >\n              <div class=\"n7-text-viewer__toolbar-container-flex\">\n                <pb-zoom\n                  emit=\"transcription\"\n                  direction=\"in\"\n                  icon=\"icons:zoom-in\"\n                ></pb-zoom>\n\n                <pb-zoom\n                  emit=\"transcription\"\n                  direction=\"out\"\n                  icon=\"icons:zoom-out\"\n                ></pb-zoom>\n              </div>\n            </ng-container>\n\n            <ng-container\n              *ngIf=\"data.docs.length > 1 && data.labels && data.labels.select.label\"\n            >\n              <div class=\"n7-text-viewer__toolbar-container-flex\">\n                <pb-select-feature\n                  id=\"select-view2\"\n                  name=\"view2\"\n                  [label]=\"data.labels && data.labels.select.label ? data.labels.select.label : 'Mostra entit\u00E0'\"\n                  [items]='[\n                            {\"name\": data.labels.select.type.all, \n                            \"selectors\": [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": false}]},\n                            {\"name\": data.labels.select.type.person, \n                            \"selectors\": \n                            [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": true}]},\n                            {\"name\": data.labels.select.type.place, \"selectors\": \n                            [{\"selector\": \".place\", \"state\": false}, {\"selector\": \".person\", \"state\": true}]}\n                ]'\n                  subscribe=\"addChannel\"\n                  emit=\"addChannel\"\n                ></pb-select-feature>\n              </div>\n            </ng-container>\n\n            <ng-container\n              *ngIf=\"data.docs.length > 1 && (!data.labels || !data.labels.select.label)\"\n            >\n              <div class=\"n7-text-viewer__toolbar-container-flex\">\n                <pb-select-feature\n                  id=\"select-view2\"\n                  name=\"view2\"\n                  label=\"Mostra entit\u00E0\"\n                  [items]='[\n                            {\"name\": \"Tutto\", \n                            \"selectors\": [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": false}]},\n                            {\"name\": \"Personaggi\", \n                            \"selectors\": \n                            [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": true}]},\n                            {\"name\": \"Luoghi\", \"selectors\": \n                            [{\"selector\": \".place\", \"state\": false}, {\"selector\": \".person\", \"state\": true}]}\n                ]'\n                  subscribe=\"addChannel\"\n                  emit=\"addChannel\"\n                ></pb-select-feature>\n              </div>\n            </ng-container>\n\n            <ng-container\n              *ngIf=\"data.docs?.length > 1 && data.docs[1].channel && data.facsimile\"\n            >\n              <ng-container *ngIf=\"data.labels && data.labels.index.hide\">\n                <div class=\"n7-text-viewer__toolbar-container-flex\">\n                  <paper-button raised=\"\" (click)=\"displayIndex()\"\n                    >{{ !isDisplayed ? data.labels.index.hide :\n                    data.labels.index.show }}</paper-button\n                  >\n                </div>\n              </ng-container>\n              <ng-container *ngIf=\"!data.labels || !data.labels.index.hide\">\n                <div class=\"n7-text-viewer__toolbar-container-flex\">\n                  <paper-button raised=\"\" (click)=\"displayIndex()\"\n                    >{{ !isDisplayed ? 'Indici' : 'Riassunto'\n                    }}</paper-button\n                  >\n                </div>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngIf=\"data.docs && data.download\">\n              <div class=\"n7-text-viewer__toolbar-container-flex\">\n                <pb-download\n                  [type]=\"data.download && data.download.format ? data.download.format: ''\"\n                  [src]=\"data.docs[0].id\"\n                  [url]=\"data.download && data.download.file ? data.download.file : ''\"\n                  dialog=\"downloadDialog\"\n                  [title]=\"data.download && data.download.format && data.download.label ? data.download.label + ' ' + data.download.format: ''\"\n                >\n                  <paper-button raised=\"\"\n                    >{{data.download && data.download.format &&\n                    data.download.label ? data.download.label + ' ' +\n                    data.download.format: ''}}</paper-button\n                  >\n                </pb-download>\n              </div>\n            </ng-container>\n\n            <pb-progress\n              subscribe=\"transcription\"\n              indeterminate=\"\"\n              bottom-item=\"bottom-item\"\n              style=\"visibility: hidden\"\n            ></pb-progress>\n          </app-toolbar>\n        </app-header>\n\n        <pb-drawer\n          toggle=\"tocToggle\"\n          class=\"tocDrawer\"\n          emit=\"toc\"\n          subscribe=\"transcription\"\n        >\n          <div class=\"drawer-content\">\n            <h3>\n              <ng-container *ngIf=\"data.labels && data.labels.toc\">\n                {{data.labels.toc}}\n              </ng-container>\n              <ng-container *ngIf=\"!data.labels || !data.labels.toc\">\n                <pb-i18n key=\"document.contents\">Contents</pb-i18n>\n              </ng-container>\n            </h3>\n            <pb-load\n              *ngIf=\"data.docs\"\n              id=\"toc\"\n              url=\"api/document/{doc}/contents?target=transcription&amp;icons=true\"\n              [src]=\"data.docs[0].id\"\n              subscribe=\"toc\"\n              emit=\"toc\"\n              expand=\"expand\"\n              auto=\"auto\"\n            >\n              <ng-container *ngIf=\"data.labels && data.labels.loading\">\n                {{data.labels.loading}}\n              </ng-container>\n              <ng-container *ngIf=\"!data.labels || !data.labels.loading\">\n                <pb-i18n key=\"dialogs.loading\">Loading</pb-i18n>\n              </ng-container>\n            </pb-load>\n          </div>\n        </pb-drawer>\n        <main class=\"content-body\">\n          <pb-facsimile\n            *ngIf=\"data.facsimile\"\n            id=\"facsimile\"\n            [attr.base-uri]=\"data.facsimile.uri\"\n            subscribe=\"transcription\"\n            default-zoom-level=\"0\"\n            show-navigation-control=\"show-navigation-control\"\n            show-navigator=\"show-navigator\"\n          >\n          </pb-facsimile>\n          <ng-container *ngFor=\"let doc of data.docs; index as $i;\">\n            <!-- NO CHANNEL -->\n            <pb-view\n              *ngIf=\"!doc.channel\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              subscribe=\"transcription\"\n              emit=\"transcription\"\n              [attr.wait-for]=\"data.facsimile ? '#facsimile' : null\"\n              column-separator=\".tei-cb\"\n              append-footnotes=\"append-footnotes\"\n              view=\"{{ doc.view }}\"\n            ></pb-view>\n            <!-- WITH CHANNEL / MURUCA DEMO -->\n            <pb-view\n              *ngIf=\"doc.channel && doc.translation\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              xpath=\"//text[@type='source']\"\n              emit=\"{{ doc.channel }}\"\n              subscribe=\"{{ doc.channel }}\"\n              view=\"{{ doc.view }}\"\n            >\n            </pb-view>\n            <pb-view\n              *ngIf=\"doc.channel && doc.translation\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              xpath=\"{{ doc.xpath }}\"\n              emit=\"{{ doc.channel }}\"\n              subscribe=\"{{ doc.channel }}\"\n              view=\"{{ doc.view }}\"\n            >\n              <pb-param name=\"mode\" value=\"commentary\"></pb-param>\n            </pb-view>\n            <!-- WITH CHANNEL / addChannel -->\n            <pb-view\n              [hidden]=\"isDisplayed\"\n              (click)=\"onClick($event)\"\n              *ngIf=\"doc.channel && !doc.translation\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              [odd]=\"doc.odd\"\n              emit=\"addChannel\"\n              subscribe=\"addChannel\"\n              view=\"{{ doc.view }}\"\n            >\n              <pb-param name=\"mode\" value=\"commentary\"></pb-param>\n            </pb-view>\n\n            <ng-container *ngIf=\"doc.channel && !doc.translation\">\n              <!--  -->\n              <pb-view\n                [hidden]=\"!isDisplayed\"\n                *ngIf=\"doc.channel && !doc.translation\"\n                [src]=\"doc.id\"\n                [odd]=\"doc.odd\"\n                id=\"text-viewer-index\"\n                subscribe=\"index\"\n                emit=\"letter\"\n              >\n                <pb-param name=\"mode\" value=\"facets\"></pb-param>\n              </pb-view>\n              <!--  -->\n            </ng-container>\n          </ng-container>\n        </main>\n      </app-header-layout>\n    </app-drawer-layout>\n  </pb-page>\n</div>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
-                type: Input
-            }], emit: [{
-                type: Input
-            }] } });
-
 //---------------------------
 class TagComponent {
     onClick(payload) {
@@ -1758,6 +1730,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 type: Input
             }] } });
 
+//---------------------------
+class TextViewerComponent {
+    ngOnInit() {
+        if (!TextViewerComponent._loaded) {
+            const s = document.createElement('script');
+            s.setAttribute('src', '/assets/pb-components/dist/pb-components-bundle.js');
+            s.setAttribute('type', 'module');
+            s.onload = this.onScriptLoaded;
+            document.head.appendChild(s);
+        }
+    }
+    displayIndex() {
+        if (!this.emit)
+            return;
+        this.emit('togglecolumn');
+    }
+    onScriptLoaded() {
+        TextViewerComponent._loaded = true;
+    }
+    onClick(payload) {
+        if (!this.emit)
+            return;
+        this.emit('click', payload);
+    }
+}
+TextViewerComponent._loaded = false;
+TextViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TextViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TextViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TextViewerComponent, selector: "n7-text-viewer", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div\n  class=\"n7-text-viewer {{data.classes || ''}}\"\n  *ngIf=\"data && data.endpoint\"\n>\n  <pb-page [attr.endpoint]=\"data.endpoint\" api-version=\"1.0.0\">\n    <pb-document\n      *ngFor=\"let doc of data.docs\"\n      [path]=\"doc.xml\"\n      [odd]=\"doc.odd\"\n      [id]=\"doc.id\"\n    >\n    </pb-document>\n\n    <app-drawer-layout force-narrow=\"force-narrow\" narrow=\"\">\n      <app-header-layout>\n        <app-header\n          fixed=\"fixed\"\n          data-template=\"browse:fix-links\"\n          style=\"\n            transition-duration: 0ms;\n            transform: translate3d(0px, 0px, 0px);\n            left: 0px;\n            right: 0.399994px;\n          \"\n        >\n          <app-toolbar\n            class=\"toolbar\"\n            sticky=\"sticky\"\n            style=\"transform: translate3d(0px, 0px, 0px)\"\n          >\n            <paper-icon-button\n              *ngIf=\"data.docs.length === 1\"\n              id=\"tocToggle\"\n              class=\"toc-toggle\"\n              icon=\"icons:view-list\"\n              role=\"button\"\n              tabindex=\"0\"\n              aria-disabled=\"false\"\n            ></paper-icon-button>\n\n            <pb-toggle-feature\n              *ngIf=\"data.docs.length === 1\"\n              name=\"highlight1\"\n              selector=\"tei-app,pb-popover,pb-highlight\"\n              default=\"off\"\n              action=\"disable\"\n              emit=\"transcription\"\n              subscribe=\"transcription\"\n            >\n              <ng-container *ngIf=\"data.labels && data.labels.view\">\n                {{data.labels.view}}\n              </ng-container>\n              <ng-container *ngIf=\"!data.labels || !data.labels.view\">\n                <pb-i18n key=\"document.plain\">Plain Reading View</pb-i18n>\n              </ng-container>\n            </pb-toggle-feature>\n\n            <!-- <pb-toggle-feature emit=\"transcription\" name=\"view\" on=\"page\" off=\"div\">Page View</pb-toggle-feature> -->\n\n            <ng-container\n              *ngIf=\"data.docs?.length == 1 || data.docs[0].translation\"\n            >\n              <pb-zoom\n                emit=\"transcription\"\n                direction=\"in\"\n                icon=\"icons:zoom-in\"\n              ></pb-zoom>\n              <pb-zoom\n                emit=\"transcription\"\n                direction=\"out\"\n                icon=\"icons:zoom-out\"\n              ></pb-zoom>\n            </ng-container>\n\n            <ng-container\n              *ngIf=\"!data.docs[0].translation && data.docs?.length == 1\"\n            >\n              <pb-navigation\n                emit=\"transcription\"\n                keyboard=\"left\"\n                subscribe=\"transcription\"\n                direction=\"backward\"\n                unit=\"page\"\n              >\n                <paper-icon-button\n                  icon=\"icons:chevron-left\"\n                  role=\"button\"\n                  tabindex=\"0\"\n                  aria-disabled=\"false\"\n                ></paper-icon-button>\n              </pb-navigation>\n              <pb-navigation\n                emit=\"transcription\"\n                keyboard=\"right\"\n                subscribe=\"transcription\"\n                direction=\"forward\"\n                unit=\"page\"\n              >\n                <paper-icon-button\n                  icon=\"icons:chevron-right\"\n                  role=\"button\"\n                  tabindex=\"0\"\n                  aria-disabled=\"false\"\n                ></paper-icon-button>\n              </pb-navigation>\n            </ng-container>\n\n            <ng-container *ngIf=\"data.docs?.length > 1\">\n              <div class=\"n7-text-viewer__toolbar-container-flex\">\n                <paper-icon-button\n                  *ngIf=\"data.docs?.length > 1\"\n                  id=\"tocToggle\"\n                  class=\"toc-toggle\"\n                  icon=\"icons:view-list\"\n                  role=\"button\"\n                  tabindex=\"0\"\n                  aria-disabled=\"false\"\n                ></paper-icon-button>\n              </div>\n            </ng-container>\n\n            <ng-container\n              *ngIf=\"!data.docs[0].translation && data.docs?.length > 1\"\n            >\n              <div class=\"n7-text-viewer__toolbar-container-flex\">\n                <pb-navigation\n                  emit=\"transcription\"\n                  keyboard=\"left\"\n                  subscribe=\"transcription\"\n                  direction=\"backward\"\n                  unit=\"page\"\n                >\n                  <paper-icon-button\n                    icon=\"icons:chevron-left\"\n                    role=\"button\"\n                    tabindex=\"0\"\n                    aria-disabled=\"false\"\n                  ></paper-icon-button>\n                </pb-navigation>\n              </div>\n\n              <div class=\"n7-text-viewer__toolbar-container-flex\">\n                <pb-navigation\n                  emit=\"transcription\"\n                  keyboard=\"right\"\n                  subscribe=\"transcription\"\n                  direction=\"forward\"\n                  unit=\"page\"\n                >\n                  <paper-icon-button\n                    icon=\"icons:chevron-right\"\n                    role=\"button\"\n                    tabindex=\"0\"\n                    aria-disabled=\"false\"\n                  ></paper-icon-button>\n                </pb-navigation>\n              </div>\n            </ng-container>\n\n            <ng-container\n              *ngIf=\"data.docs?.length > 1 && !data.docs[0].translation\"\n            >\n              <div class=\"n7-text-viewer__toolbar-container-flex\">\n                <pb-zoom\n                  emit=\"transcription\"\n                  direction=\"in\"\n                  icon=\"icons:zoom-in\"\n                ></pb-zoom>\n\n                <pb-zoom\n                  emit=\"transcription\"\n                  direction=\"out\"\n                  icon=\"icons:zoom-out\"\n                ></pb-zoom>\n              </div>\n            </ng-container>\n\n            <ng-container\n              *ngIf=\"data.docs.length > 1 && data.labels && data.labels.select.label\"\n            >\n              <div class=\"n7-text-viewer__toolbar-container-flex\">\n                <pb-select-feature\n                  id=\"select-view2\"\n                  name=\"view2\"\n                  [label]=\"data.labels && data.labels.select.label ? data.labels.select.label : 'Mostra entit\u00E0'\"\n                  [items]='[\n                            {\"name\": data.labels.select.type.all, \n                            \"selectors\": [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": false}]},\n                            {\"name\": data.labels.select.type.person, \n                            \"selectors\": \n                            [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": true}]},\n                            {\"name\": data.labels.select.type.place, \"selectors\": \n                            [{\"selector\": \".place\", \"state\": false}, {\"selector\": \".person\", \"state\": true}]}\n                ]'\n                  subscribe=\"addChannel\"\n                  emit=\"addChannel\"\n                ></pb-select-feature>\n              </div>\n            </ng-container>\n\n            <ng-container\n              *ngIf=\"data.docs.length > 1 && (!data.labels || !data.labels.select.label)\"\n            >\n              <div class=\"n7-text-viewer__toolbar-container-flex\">\n                <pb-select-feature\n                  id=\"select-view2\"\n                  name=\"view2\"\n                  label=\"Mostra entit\u00E0\"\n                  [items]='[\n                            {\"name\": \"Tutto\", \n                            \"selectors\": [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": false}]},\n                            {\"name\": \"Personaggi\", \n                            \"selectors\": \n                            [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": true}]},\n                            {\"name\": \"Luoghi\", \"selectors\": \n                            [{\"selector\": \".place\", \"state\": false}, {\"selector\": \".person\", \"state\": true}]}\n                ]'\n                  subscribe=\"addChannel\"\n                  emit=\"addChannel\"\n                ></pb-select-feature>\n              </div>\n            </ng-container>\n\n            <ng-container\n              *ngIf=\"data.docs?.length > 1 && data.docs[1].channel && data.facsimile\"\n            >\n              <ng-container *ngIf=\"data.labels && data.labels.index.hide\">\n                <div class=\"n7-text-viewer__toolbar-container-flex\">\n                  <paper-button raised=\"\" (click)=\"displayIndex()\"\n                    >{{ !data.toggleColumn ? data.labels.index.hide :\n                    data.labels.index.show }}</paper-button\n                  >\n                </div>\n              </ng-container>\n              <ng-container *ngIf=\"!data.labels || !data.labels.index.hide\">\n                <div class=\"n7-text-viewer__toolbar-container-flex\">\n                  <paper-button raised=\"\" (click)=\"displayIndex()\"\n                    >{{ !data.toggleColumn ? 'Indici' : 'Riassunto' }}</paper-button\n                  >\n                </div>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngIf=\"data.docs && data.download\">\n              <div class=\"n7-text-viewer__toolbar-container-flex\">\n                <pb-download\n                  [type]=\"data.download && data.download.format ? data.download.format: ''\"\n                  [src]=\"data.docs[0].id\"\n                  [url]=\"data.download && data.download.file ? data.download.file : ''\"\n                  dialog=\"downloadDialog\"\n                  [title]=\"data.download && data.download.format && data.download.label ? data.download.label + ' ' + data.download.format: ''\"\n                >\n                  <paper-button raised=\"\"\n                    >{{data.download && data.download.format &&\n                    data.download.label ? data.download.label + ' ' +\n                    data.download.format: ''}}</paper-button\n                  >\n                </pb-download>\n              </div>\n            </ng-container>\n\n            <pb-progress\n              subscribe=\"transcription\"\n              indeterminate=\"\"\n              bottom-item=\"bottom-item\"\n              style=\"visibility: hidden\"\n            ></pb-progress>\n          </app-toolbar>\n        </app-header>\n\n        <pb-drawer\n          toggle=\"tocToggle\"\n          class=\"tocDrawer\"\n          emit=\"toc\"\n          subscribe=\"transcription\"\n        >\n          <div class=\"drawer-content\">\n            <h3>\n              <ng-container *ngIf=\"data.labels && data.labels.toc\">\n                {{data.labels.toc}}\n              </ng-container>\n              <ng-container *ngIf=\"!data.labels || !data.labels.toc\">\n                <pb-i18n key=\"document.contents\">Contents</pb-i18n>\n              </ng-container>\n            </h3>\n            <pb-load\n              *ngIf=\"data.docs\"\n              id=\"toc\"\n              url=\"api/document/{doc}/contents?target=transcription&amp;icons=true\"\n              [src]=\"data.docs[0].id\"\n              subscribe=\"toc\"\n              emit=\"toc\"\n              expand=\"expand\"\n              auto=\"auto\"\n            >\n              <ng-container *ngIf=\"data.labels && data.labels.loading\">\n                {{data.labels.loading}}\n              </ng-container>\n              <ng-container *ngIf=\"!data.labels || !data.labels.loading\">\n                <pb-i18n key=\"dialogs.loading\">Loading</pb-i18n>\n              </ng-container>\n            </pb-load>\n          </div>\n        </pb-drawer>\n        <main class=\"content-body\">\n          <pb-facsimile\n            *ngIf=\"data.facsimile\"\n            id=\"facsimile\"\n            [attr.base-uri]=\"data.facsimile.uri\"\n            subscribe=\"transcription\"\n            default-zoom-level=\"0\"\n            show-navigation-control=\"show-navigation-control\"\n            show-navigator=\"show-navigator\"\n          >\n          </pb-facsimile>\n          <ng-container *ngFor=\"let doc of data.docs; index as $i;\">\n            <!-- NO CHANNEL -->\n            <pb-view\n              *ngIf=\"!doc.channel\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              subscribe=\"transcription\"\n              emit=\"transcription\"\n              [attr.wait-for]=\"data.facsimile ? '#facsimile' : null\"\n              column-separator=\".tei-cb\"\n              append-footnotes=\"append-footnotes\"\n              view=\"{{ doc.view }}\"\n            ></pb-view>\n            <!-- WITH CHANNEL / MURUCA DEMO -->\n            <pb-view\n              *ngIf=\"doc.channel && doc.translation\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              xpath=\"//text[@type='source']\"\n              emit=\"{{ doc.channel }}\"\n              subscribe=\"{{ doc.channel }}\"\n              view=\"{{ doc.view }}\"\n            >\n            </pb-view>\n            <pb-view\n              *ngIf=\"doc.channel && doc.translation\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              xpath=\"{{ doc.xpath }}\"\n              emit=\"{{ doc.channel }}\"\n              subscribe=\"{{ doc.channel }}\"\n              view=\"{{ doc.view }}\"\n            >\n              <pb-param name=\"mode\" value=\"commentary\"></pb-param>\n            </pb-view>\n            <!-- WITH CHANNEL / addChannel -->\n            <pb-view\n              [hidden]=\"data.toggleColumn\"\n              (click)=\"onClick($event)\"\n              *ngIf=\"doc.channel && !doc.translation\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              [odd]=\"doc.odd\"\n              emit=\"addChannel\"\n              subscribe=\"addChannel\"\n              view=\"{{ doc.view }}\"\n            >\n              <pb-param name=\"mode\" value=\"commentary\"></pb-param>\n            </pb-view>\n\n            <ng-container *ngIf=\"doc.channel && !doc.translation\">\n              <!--  -->\n              <pb-view\n                [hidden]=\"!data.toggleColumn\"\n                *ngIf=\"doc.channel && !doc.translation\"\n                [src]=\"doc.id\"\n                [odd]=\"doc.odd\"\n                id=\"text-viewer-index\"\n                subscribe=\"index\"\n                emit=\"letter\"\n              >\n                <pb-param name=\"mode\" value=\"facets\"></pb-param>\n              </pb-view>\n              <!--  -->\n            </ng-container>\n          </ng-container>\n        </main>\n      </app-header-layout>\n    </app-drawer-layout>\n  </pb-page>\n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TextViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'n7-text-viewer', template: "<div\n  class=\"n7-text-viewer {{data.classes || ''}}\"\n  *ngIf=\"data && data.endpoint\"\n>\n  <pb-page [attr.endpoint]=\"data.endpoint\" api-version=\"1.0.0\">\n    <pb-document\n      *ngFor=\"let doc of data.docs\"\n      [path]=\"doc.xml\"\n      [odd]=\"doc.odd\"\n      [id]=\"doc.id\"\n    >\n    </pb-document>\n\n    <app-drawer-layout force-narrow=\"force-narrow\" narrow=\"\">\n      <app-header-layout>\n        <app-header\n          fixed=\"fixed\"\n          data-template=\"browse:fix-links\"\n          style=\"\n            transition-duration: 0ms;\n            transform: translate3d(0px, 0px, 0px);\n            left: 0px;\n            right: 0.399994px;\n          \"\n        >\n          <app-toolbar\n            class=\"toolbar\"\n            sticky=\"sticky\"\n            style=\"transform: translate3d(0px, 0px, 0px)\"\n          >\n            <paper-icon-button\n              *ngIf=\"data.docs.length === 1\"\n              id=\"tocToggle\"\n              class=\"toc-toggle\"\n              icon=\"icons:view-list\"\n              role=\"button\"\n              tabindex=\"0\"\n              aria-disabled=\"false\"\n            ></paper-icon-button>\n\n            <pb-toggle-feature\n              *ngIf=\"data.docs.length === 1\"\n              name=\"highlight1\"\n              selector=\"tei-app,pb-popover,pb-highlight\"\n              default=\"off\"\n              action=\"disable\"\n              emit=\"transcription\"\n              subscribe=\"transcription\"\n            >\n              <ng-container *ngIf=\"data.labels && data.labels.view\">\n                {{data.labels.view}}\n              </ng-container>\n              <ng-container *ngIf=\"!data.labels || !data.labels.view\">\n                <pb-i18n key=\"document.plain\">Plain Reading View</pb-i18n>\n              </ng-container>\n            </pb-toggle-feature>\n\n            <!-- <pb-toggle-feature emit=\"transcription\" name=\"view\" on=\"page\" off=\"div\">Page View</pb-toggle-feature> -->\n\n            <ng-container\n              *ngIf=\"data.docs?.length == 1 || data.docs[0].translation\"\n            >\n              <pb-zoom\n                emit=\"transcription\"\n                direction=\"in\"\n                icon=\"icons:zoom-in\"\n              ></pb-zoom>\n              <pb-zoom\n                emit=\"transcription\"\n                direction=\"out\"\n                icon=\"icons:zoom-out\"\n              ></pb-zoom>\n            </ng-container>\n\n            <ng-container\n              *ngIf=\"!data.docs[0].translation && data.docs?.length == 1\"\n            >\n              <pb-navigation\n                emit=\"transcription\"\n                keyboard=\"left\"\n                subscribe=\"transcription\"\n                direction=\"backward\"\n                unit=\"page\"\n              >\n                <paper-icon-button\n                  icon=\"icons:chevron-left\"\n                  role=\"button\"\n                  tabindex=\"0\"\n                  aria-disabled=\"false\"\n                ></paper-icon-button>\n              </pb-navigation>\n              <pb-navigation\n                emit=\"transcription\"\n                keyboard=\"right\"\n                subscribe=\"transcription\"\n                direction=\"forward\"\n                unit=\"page\"\n              >\n                <paper-icon-button\n                  icon=\"icons:chevron-right\"\n                  role=\"button\"\n                  tabindex=\"0\"\n                  aria-disabled=\"false\"\n                ></paper-icon-button>\n              </pb-navigation>\n            </ng-container>\n\n            <ng-container *ngIf=\"data.docs?.length > 1\">\n              <div class=\"n7-text-viewer__toolbar-container-flex\">\n                <paper-icon-button\n                  *ngIf=\"data.docs?.length > 1\"\n                  id=\"tocToggle\"\n                  class=\"toc-toggle\"\n                  icon=\"icons:view-list\"\n                  role=\"button\"\n                  tabindex=\"0\"\n                  aria-disabled=\"false\"\n                ></paper-icon-button>\n              </div>\n            </ng-container>\n\n            <ng-container\n              *ngIf=\"!data.docs[0].translation && data.docs?.length > 1\"\n            >\n              <div class=\"n7-text-viewer__toolbar-container-flex\">\n                <pb-navigation\n                  emit=\"transcription\"\n                  keyboard=\"left\"\n                  subscribe=\"transcription\"\n                  direction=\"backward\"\n                  unit=\"page\"\n                >\n                  <paper-icon-button\n                    icon=\"icons:chevron-left\"\n                    role=\"button\"\n                    tabindex=\"0\"\n                    aria-disabled=\"false\"\n                  ></paper-icon-button>\n                </pb-navigation>\n              </div>\n\n              <div class=\"n7-text-viewer__toolbar-container-flex\">\n                <pb-navigation\n                  emit=\"transcription\"\n                  keyboard=\"right\"\n                  subscribe=\"transcription\"\n                  direction=\"forward\"\n                  unit=\"page\"\n                >\n                  <paper-icon-button\n                    icon=\"icons:chevron-right\"\n                    role=\"button\"\n                    tabindex=\"0\"\n                    aria-disabled=\"false\"\n                  ></paper-icon-button>\n                </pb-navigation>\n              </div>\n            </ng-container>\n\n            <ng-container\n              *ngIf=\"data.docs?.length > 1 && !data.docs[0].translation\"\n            >\n              <div class=\"n7-text-viewer__toolbar-container-flex\">\n                <pb-zoom\n                  emit=\"transcription\"\n                  direction=\"in\"\n                  icon=\"icons:zoom-in\"\n                ></pb-zoom>\n\n                <pb-zoom\n                  emit=\"transcription\"\n                  direction=\"out\"\n                  icon=\"icons:zoom-out\"\n                ></pb-zoom>\n              </div>\n            </ng-container>\n\n            <ng-container\n              *ngIf=\"data.docs.length > 1 && data.labels && data.labels.select.label\"\n            >\n              <div class=\"n7-text-viewer__toolbar-container-flex\">\n                <pb-select-feature\n                  id=\"select-view2\"\n                  name=\"view2\"\n                  [label]=\"data.labels && data.labels.select.label ? data.labels.select.label : 'Mostra entit\u00E0'\"\n                  [items]='[\n                            {\"name\": data.labels.select.type.all, \n                            \"selectors\": [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": false}]},\n                            {\"name\": data.labels.select.type.person, \n                            \"selectors\": \n                            [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": true}]},\n                            {\"name\": data.labels.select.type.place, \"selectors\": \n                            [{\"selector\": \".place\", \"state\": false}, {\"selector\": \".person\", \"state\": true}]}\n                ]'\n                  subscribe=\"addChannel\"\n                  emit=\"addChannel\"\n                ></pb-select-feature>\n              </div>\n            </ng-container>\n\n            <ng-container\n              *ngIf=\"data.docs.length > 1 && (!data.labels || !data.labels.select.label)\"\n            >\n              <div class=\"n7-text-viewer__toolbar-container-flex\">\n                <pb-select-feature\n                  id=\"select-view2\"\n                  name=\"view2\"\n                  label=\"Mostra entit\u00E0\"\n                  [items]='[\n                            {\"name\": \"Tutto\", \n                            \"selectors\": [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": false}]},\n                            {\"name\": \"Personaggi\", \n                            \"selectors\": \n                            [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": true}]},\n                            {\"name\": \"Luoghi\", \"selectors\": \n                            [{\"selector\": \".place\", \"state\": false}, {\"selector\": \".person\", \"state\": true}]}\n                ]'\n                  subscribe=\"addChannel\"\n                  emit=\"addChannel\"\n                ></pb-select-feature>\n              </div>\n            </ng-container>\n\n            <ng-container\n              *ngIf=\"data.docs?.length > 1 && data.docs[1].channel && data.facsimile\"\n            >\n              <ng-container *ngIf=\"data.labels && data.labels.index.hide\">\n                <div class=\"n7-text-viewer__toolbar-container-flex\">\n                  <paper-button raised=\"\" (click)=\"displayIndex()\"\n                    >{{ !data.toggleColumn ? data.labels.index.hide :\n                    data.labels.index.show }}</paper-button\n                  >\n                </div>\n              </ng-container>\n              <ng-container *ngIf=\"!data.labels || !data.labels.index.hide\">\n                <div class=\"n7-text-viewer__toolbar-container-flex\">\n                  <paper-button raised=\"\" (click)=\"displayIndex()\"\n                    >{{ !data.toggleColumn ? 'Indici' : 'Riassunto' }}</paper-button\n                  >\n                </div>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngIf=\"data.docs && data.download\">\n              <div class=\"n7-text-viewer__toolbar-container-flex\">\n                <pb-download\n                  [type]=\"data.download && data.download.format ? data.download.format: ''\"\n                  [src]=\"data.docs[0].id\"\n                  [url]=\"data.download && data.download.file ? data.download.file : ''\"\n                  dialog=\"downloadDialog\"\n                  [title]=\"data.download && data.download.format && data.download.label ? data.download.label + ' ' + data.download.format: ''\"\n                >\n                  <paper-button raised=\"\"\n                    >{{data.download && data.download.format &&\n                    data.download.label ? data.download.label + ' ' +\n                    data.download.format: ''}}</paper-button\n                  >\n                </pb-download>\n              </div>\n            </ng-container>\n\n            <pb-progress\n              subscribe=\"transcription\"\n              indeterminate=\"\"\n              bottom-item=\"bottom-item\"\n              style=\"visibility: hidden\"\n            ></pb-progress>\n          </app-toolbar>\n        </app-header>\n\n        <pb-drawer\n          toggle=\"tocToggle\"\n          class=\"tocDrawer\"\n          emit=\"toc\"\n          subscribe=\"transcription\"\n        >\n          <div class=\"drawer-content\">\n            <h3>\n              <ng-container *ngIf=\"data.labels && data.labels.toc\">\n                {{data.labels.toc}}\n              </ng-container>\n              <ng-container *ngIf=\"!data.labels || !data.labels.toc\">\n                <pb-i18n key=\"document.contents\">Contents</pb-i18n>\n              </ng-container>\n            </h3>\n            <pb-load\n              *ngIf=\"data.docs\"\n              id=\"toc\"\n              url=\"api/document/{doc}/contents?target=transcription&amp;icons=true\"\n              [src]=\"data.docs[0].id\"\n              subscribe=\"toc\"\n              emit=\"toc\"\n              expand=\"expand\"\n              auto=\"auto\"\n            >\n              <ng-container *ngIf=\"data.labels && data.labels.loading\">\n                {{data.labels.loading}}\n              </ng-container>\n              <ng-container *ngIf=\"!data.labels || !data.labels.loading\">\n                <pb-i18n key=\"dialogs.loading\">Loading</pb-i18n>\n              </ng-container>\n            </pb-load>\n          </div>\n        </pb-drawer>\n        <main class=\"content-body\">\n          <pb-facsimile\n            *ngIf=\"data.facsimile\"\n            id=\"facsimile\"\n            [attr.base-uri]=\"data.facsimile.uri\"\n            subscribe=\"transcription\"\n            default-zoom-level=\"0\"\n            show-navigation-control=\"show-navigation-control\"\n            show-navigator=\"show-navigator\"\n          >\n          </pb-facsimile>\n          <ng-container *ngFor=\"let doc of data.docs; index as $i;\">\n            <!-- NO CHANNEL -->\n            <pb-view\n              *ngIf=\"!doc.channel\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              subscribe=\"transcription\"\n              emit=\"transcription\"\n              [attr.wait-for]=\"data.facsimile ? '#facsimile' : null\"\n              column-separator=\".tei-cb\"\n              append-footnotes=\"append-footnotes\"\n              view=\"{{ doc.view }}\"\n            ></pb-view>\n            <!-- WITH CHANNEL / MURUCA DEMO -->\n            <pb-view\n              *ngIf=\"doc.channel && doc.translation\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              xpath=\"//text[@type='source']\"\n              emit=\"{{ doc.channel }}\"\n              subscribe=\"{{ doc.channel }}\"\n              view=\"{{ doc.view }}\"\n            >\n            </pb-view>\n            <pb-view\n              *ngIf=\"doc.channel && doc.translation\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              xpath=\"{{ doc.xpath }}\"\n              emit=\"{{ doc.channel }}\"\n              subscribe=\"{{ doc.channel }}\"\n              view=\"{{ doc.view }}\"\n            >\n              <pb-param name=\"mode\" value=\"commentary\"></pb-param>\n            </pb-view>\n            <!-- WITH CHANNEL / addChannel -->\n            <pb-view\n              [hidden]=\"data.toggleColumn\"\n              (click)=\"onClick($event)\"\n              *ngIf=\"doc.channel && !doc.translation\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              [odd]=\"doc.odd\"\n              emit=\"addChannel\"\n              subscribe=\"addChannel\"\n              view=\"{{ doc.view }}\"\n            >\n              <pb-param name=\"mode\" value=\"commentary\"></pb-param>\n            </pb-view>\n\n            <ng-container *ngIf=\"doc.channel && !doc.translation\">\n              <!--  -->\n              <pb-view\n                [hidden]=\"!data.toggleColumn\"\n                *ngIf=\"doc.channel && !doc.translation\"\n                [src]=\"doc.id\"\n                [odd]=\"doc.odd\"\n                id=\"text-viewer-index\"\n                subscribe=\"index\"\n                emit=\"letter\"\n              >\n                <pb-param name=\"mode\" value=\"facets\"></pb-param>\n              </pb-view>\n              <!--  -->\n            </ng-container>\n          </ng-container>\n        </main>\n      </app-header-layout>\n    </app-drawer-layout>\n  </pb-page>\n</div>\n" }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], emit: [{
+                type: Input
+            }] } });
+
 //---------------------------
 class TimelineComponent {
     constructor() {
@@ -1880,38 +1889,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 type: Input
             }] } });
 
-//---------------------------
-class ProgressLineComponent {
-}
-ProgressLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ProgressLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ProgressLineComponent, selector: "n7-progress-line", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-progress-line\">\n    <div class=\"n7-progress-line__text-wrapper\">\n        <span class=\"n7-progress-line__label\" *ngIf=\"data.label\">\n            {{ data.label }}\n        </span>\n        <span class=\"n7-progress-line__value\" *ngIf=\"data.value || data.value===0\">\n            {{ data.value }}%\n        </span>\n    </div>\n    <div class=\"n7-progress-line__wrapper\">\n        <div class='n7-progress-line__bar' [ngStyle]=\"{'width.%':data.value}\"> {{data.value}}%\n        </div>\n    </div>\n</div>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressLineComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'n7-progress-line', template: "<div *ngIf=\"data\" class=\"n7-progress-line\">\n    <div class=\"n7-progress-line__text-wrapper\">\n        <span class=\"n7-progress-line__label\" *ngIf=\"data.label\">\n            {{ data.label }}\n        </span>\n        <span class=\"n7-progress-line__value\" *ngIf=\"data.value || data.value===0\">\n            {{ data.value }}%\n        </span>\n    </div>\n    <div class=\"n7-progress-line__wrapper\">\n        <div class='n7-progress-line__bar' [ngStyle]=\"{'width.%':data.value}\"> {{data.value}}%\n        </div>\n    </div>\n</div>" }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], emit: [{
-                type: Input
-            }] } });
-
-class InputTextareaComponent {
-    onChange(inputPayload, value) {
-        if (!this.emit)
-            return;
-        this.emit('change', { inputPayload, value });
-    }
-}
-InputTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: InputTextareaComponent, selector: "n7-input-textarea", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data as input\"\n     class=\"n7-input-textarea\">\n    <label *ngIf=\"input.label\"\n           class=\"n7-input-textarea__label\"\n           for=\"{{ input.id }}\"\n           [innerHTML]=\"input.label\">\n    </label>\n    <div class=\"n7-input-textarea__wrapper\"\n         [ngClass]=\"{\n            'has-icon': !!input.icon\n        }\">\n        <textarea id=\"{{ input.id }}\"\n               type=\"textarea\"\n               class=\"n7-input-textarea__text {{input.classes || ''}}\"\n               placeholder=\"{{input.placeholder || ''}}\"\n               [value]=\"input.value || null\"\n               [disabled]=\"input.disabled\"\n               (input)=\"onChange(input.inputPayload, $event.target.value)\"\n               (keyup.enter)=\"onChange(input.enterPayload, $event.target.value)\">\n        </textarea>\n    </div>\n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputTextareaComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'n7-input-textarea', template: "<div *ngIf=\"data as input\"\n     class=\"n7-input-textarea\">\n    <label *ngIf=\"input.label\"\n           class=\"n7-input-textarea__label\"\n           for=\"{{ input.id }}\"\n           [innerHTML]=\"input.label\">\n    </label>\n    <div class=\"n7-input-textarea__wrapper\"\n         [ngClass]=\"{\n            'has-icon': !!input.icon\n        }\">\n        <textarea id=\"{{ input.id }}\"\n               type=\"textarea\"\n               class=\"n7-input-textarea__text {{input.classes || ''}}\"\n               placeholder=\"{{input.placeholder || ''}}\"\n               [value]=\"input.value || null\"\n               [disabled]=\"input.disabled\"\n               (input)=\"onChange(input.inputPayload, $event.target.value)\"\n               (keyup.enter)=\"onChange(input.enterPayload, $event.target.value)\">\n        </textarea>\n    </div>\n</div>\n" }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], emit: [{
-                type: Input
-            }] } });
-
 const COMPONENTS = [
     AdvancedAutocompleteComponent,
     AlertComponent,
@@ -1919,6 +1896,7 @@ const COMPONENTS = [
     AvatarComponent,
     BreadcrumbsComponent,
     BubbleChartComponent,
+    ButtonComponent,
     CarouselComponent,
     ChartComponent,
     ContentPlaceholderComponent,
@@ -1930,6 +1908,7 @@ const COMPONENTS = [
     FooterComponent,
     HeaderComponent,
     HeroComponent,
+    IconComponent,
     HistogramRangeComponent,
     ImageViewerComponent,
     ImageViewerToolsComponent,
@@ -1967,6 +1946,7 @@ DvComponentsLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", v
         AvatarComponent,
         BreadcrumbsComponent,
         BubbleChartComponent,
+        ButtonComponent,
         CarouselComponent,
         ChartComponent,
         ContentPlaceholderComponent,
@@ -1978,6 +1958,7 @@ DvComponentsLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", v
         FooterComponent,
         HeaderComponent,
         HeroComponent,
+        IconComponent,
         HistogramRangeComponent,
         ImageViewerComponent,
         ImageViewerToolsComponent,
@@ -2010,6 +1991,7 @@ DvComponentsLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", v
         AvatarComponent,
         BreadcrumbsComponent,
         BubbleChartComponent,
+        ButtonComponent,
         CarouselComponent,
         ChartComponent,
         ContentPlaceholderComponent,
@@ -2021,6 +2003,7 @@ DvComponentsLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", v
         FooterComponent,
         HeaderComponent,
         HeroComponent,
+        IconComponent,
         HistogramRangeComponent,
         ImageViewerComponent,
         ImageViewerToolsComponent,
@@ -6236,6 +6219,19 @@ const BUBBLECHART_MOCK = {
     ],
 };
 
+const BUTTON_MOCK = {
+    text: 'The Button\'s label',
+    // isDisabled: true,
+    isLoading: true,
+    anchor: {
+        payload: 'button-click',
+    },
+    classes: 'n7-btn-cta',
+    iconLeft: {
+        id: 'n7-icon-circle-full'
+    },
+};
+
 const CAROUSEL_MOCK = {
     containerId: 'carousel-root',
     classes: 'demo',
@@ -7091,6 +7087,14 @@ const HISTOGRAM_RANGE_MOCK = {
     ]
 };
 
+const ICON_MOCK = {
+    id: 'n7-icon-bell',
+    payload: 'bell-click',
+    style: {
+        color: 'tomato',
+    }
+};
+
 const IMAGE_VIEWER_TOOLS_MOCK = {
     images: [
         { thumb: 'http://placekitten.com/200/130', payload: 'img1-payload' },
@@ -7219,7 +7223,8 @@ const INNER_TITLE_MOCK = {
                 classes: 'n7-btn-cta'
             },
         ]
-    }
+    },
+    classes: 'mock-inner-title'
 };
 
 const INPUT_CHECKBOX_MOCK = {
@@ -7826,16 +7831,16 @@ const TEXT_VIEWER_MOCK = {
     docs: [
         {
             // xml: 'mambrino/13_1_sm1_primi10caps-2_1623837525.xml',
-            xml: 'mambrino/SM1_source_def2.xml',
-            odd: 'test_index',
+            xml: 'mambrino/sm1_source_def2-1_1658739951.xml',
+            odd: 'mambrino_2-0',
             id: 'seniles',
             view: 'page',
             download: '',
         },
         {
             // xml: 'test/graves6.xml',
-            xml: 'mambrino/1657101058_SM1_commentary_def2-1-20.xml',
-            odd: 'test_index',
+            xml: 'mambrino/1660136990_SM1_commentary_082022-2.xml',
+            odd: 'mambrino_2-0',
             id: 'seniles2',
             view: 'page',
             channel: 'altrochannel',
@@ -8388,5 +8393,5 @@ const WIZARD_MOCK = {
  * Generated bundle index. Do not edit.
  */
 
-export { ADVANCED_AUTOCOMPLETE_MOCK, ALERT_MOCK, AVATAR_MOCK, AdvancedAutocompleteComponent, AlertComponent, AnchorWrapperComponent, AvatarComponent, BREADCRUMBS_MOCK, BUBBLECHART_MOCK, BreadcrumbsComponent, BubbleChartComponent, CAROUSEL_MOCK, CHART_MOCK, CONTENT_PLACEHOLDER_MOCK, CarouselComponent, ChartComponent, ContentPlaceholderComponent, DATA_WIDGET_MOCK, DATEPICKER_MOCK, DataWidgetComponent, DatepickerComponent, DvComponentsLibModule, FACET_HEADER_MOCK, FACET_MOCK, FACET_YEAR_RANGE_MOCK, FOOTER_MOCK, FacetComponent, FacetHeaderComponent, FacetYearRangeComponent, FooterComponent, HEADER_MOCK, HERO_MOCK, HISTOGRAM_RANGE_MOCK, HeaderComponent, HeroComponent, HistogramRangeComponent, IMAGE_VIEWER_MOCK, IMAGE_VIEWER_TOOLS_MOCK, INNER_TITLE_MOCK, INPUT_CHECKBOX_MOCK, INPUT_LINK_MOCK, INPUT_SELECT_MOCK, INPUT_TEXTAREA_MOCK, INPUT_TEXT_MOCK, ITEM_PREVIEW_MOCK, ImageViewerComponent, ImageViewerToolsComponent, InnerTitleComponent, InputCheckboxComponent, InputLinkComponent, InputSelectComponent, InputTextComponent, InputTextareaComponent, ItemPreviewComponent, LOADER_MOCK, LoaderComponent, MAP_MOCK, METADATA_VIEWER_MOCK, MapComponent, MetadataViewerComponent, NAV_MOCK, NavComponent, PAGINATION_MOCK, PROGRESS_LINE_MOCK, PaginationComponent, ProgressLineComponent, SIDEBAR_HEADER_MOCK, SIGNUP_MOCK, SIMPLE_AUTOCOMPLETE_MOCK, SidebarHeaderComponent, SignupComponent, SimpleAutocompleteComponent, TABLE_MOCK, TAG_MOCK, TEXT_VIEWER_MOCK, TIMELINE_MOCK, TOAST_MOCK, TOOLTIP_CONTENT_MOCK, TREE_MOCK, TableComponent, TagComponent, TextViewerComponent, TimelineComponent, ToastComponent, TooltipContentComponent, TreeComponent, WIZARD_MOCK, WizardComponent };
+export { ADVANCED_AUTOCOMPLETE_MOCK, ALERT_MOCK, AVATAR_MOCK, AdvancedAutocompleteComponent, AlertComponent, AnchorWrapperComponent, AvatarComponent, BREADCRUMBS_MOCK, BUBBLECHART_MOCK, BUTTON_MOCK, BreadcrumbsComponent, BubbleChartComponent, ButtonComponent, CAROUSEL_MOCK, CHART_MOCK, CONTENT_PLACEHOLDER_MOCK, CarouselComponent, ChartComponent, ContentPlaceholderComponent, DATA_WIDGET_MOCK, DATEPICKER_MOCK, DataWidgetComponent, DatepickerComponent, DvComponentsLibModule, FACET_HEADER_MOCK, FACET_MOCK, FACET_YEAR_RANGE_MOCK, FOOTER_MOCK, FacetComponent, FacetHeaderComponent, FacetYearRangeComponent, FooterComponent, HEADER_MOCK, HERO_MOCK, HISTOGRAM_RANGE_MOCK, HeaderComponent, HeroComponent, HistogramRangeComponent, ICON_MOCK, IMAGE_VIEWER_MOCK, IMAGE_VIEWER_TOOLS_MOCK, INNER_TITLE_MOCK, INPUT_CHECKBOX_MOCK, INPUT_LINK_MOCK, INPUT_SELECT_MOCK, INPUT_TEXTAREA_MOCK, INPUT_TEXT_MOCK, ITEM_PREVIEW_MOCK, IconComponent, ImageViewerComponent, ImageViewerToolsComponent, InnerTitleComponent, InputCheckboxComponent, InputLinkComponent, InputSelectComponent, InputTextComponent, InputTextareaComponent, ItemPreviewComponent, LOADER_MOCK, LoaderComponent, MAP_MOCK, METADATA_VIEWER_MOCK, MapComponent, MetadataViewerComponent, NAV_MOCK, NavComponent, PAGINATION_MOCK, PROGRESS_LINE_MOCK, PaginationComponent, ProgressLineComponent, SIDEBAR_HEADER_MOCK, SIGNUP_MOCK, SIMPLE_AUTOCOMPLETE_MOCK, SidebarHeaderComponent, SignupComponent, SimpleAutocompleteComponent, TABLE_MOCK, TAG_MOCK, TEXT_VIEWER_MOCK, TIMELINE_MOCK, TOAST_MOCK, TOOLTIP_CONTENT_MOCK, TREE_MOCK, TableComponent, TagComponent, TextViewerComponent, TimelineComponent, ToastComponent, TooltipContentComponent, TreeComponent, WIZARD_MOCK, WizardComponent };
 //# sourceMappingURL=net7-components.mjs.map