@net7/components 3.1.1 → 3.4.0

package/fesm2020/net7-components.mjs

@@ -722,6 +722,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 type: Input
             }] } });
 
+//---------------------------
+class InputSelectComponent {
+    onChange(inputPayload, value) {
+        if (!this.emit)
+            return;
+        this.emit('change', { inputPayload, value });
+    }
+}
+InputSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+InputSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: InputSelectComponent, selector: "n7-input-select", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data as input\"\n     class=\"n7-input-select\">\n  <label *ngIf=\"input.label\"\n         for=\"{{ input.id }}\" [innerHTML]=\"input.label\"></label>\n  <select (change)=\"onChange(input.payload, $event.target.value)\"\n          id=\"{{ input.id }}\"\n          class=\"n7-facet__input-select {{ input.classes || '' }}\"\n          [disabled]=\"input.disabled\">\n    <option *ngFor=\"let option of input.options\"\n            [value]=\"option.value\"\n            [disabled]=\"option.disabled\"\n            [selected]=\"option.selected\">{{ option.label }}</option>\n  </select>\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: InputSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'n7-input-select', template: "<div *ngIf=\"data as input\"\n     class=\"n7-input-select\">\n  <label *ngIf=\"input.label\"\n         for=\"{{ input.id }}\" [innerHTML]=\"input.label\"></label>\n  <select (change)=\"onChange(input.payload, $event.target.value)\"\n          id=\"{{ input.id }}\"\n          class=\"n7-facet__input-select {{ input.classes || '' }}\"\n          [disabled]=\"input.disabled\">\n    <option *ngFor=\"let option of input.options\"\n            [value]=\"option.value\"\n            [disabled]=\"option.disabled\"\n            [selected]=\"option.selected\">{{ option.label }}</option>\n  </select>\n</div>\n" }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], emit: [{
+                type: Input
+            }] } });
+
 //---------------------------
 class FooterComponent {
     onClick(payload) {
@@ -731,10 +750,10 @@ class FooterComponent {
     }
 }
 FooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: FooterComponent, selector: "n7-footer", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-footer {{data.classes || ''}}\">\n    <div class=\"n7-footer__content\">\n        <!-- Loop footer content columns -->\n        <div class=\"n7-footer__column {{column.classes || ''}}\" *ngFor=\"let column of data.columns\">\n            <ng-container *ngTemplateOutlet=\"footerColumn; context:{$implicit: column}\"></ng-container>\n        </div>\n    </div>\n</div>\n\n<!-- Template: Columns -->\n<ng-template #footerColumn let-column>\n    <h2 *ngIf=\"column.title\" class=\"n7-footer__column-title\">\n        {{ column.title }}\n    </h2>\n    <p *ngIf=\"column.text\" \n       class=\"n7-footer__column-text\"\n       [innerHTML]=\"column.text\">\n    </p>\n    <div *ngIf=\"column.links\" class=\"n7-footer__column-nav\">\n        <ul class=\"n7-footer__column-nav-list\">\n            <li *ngFor=\"let link of column.links\"\n                class=\"n7-footer__column-nav-item {{link.classes || ''}}\">\n                <n7-anchor-wrapper [classes]=\"'n7-footer__column-nav-link'\"\n                [data]=\"link.anchor\"\n                (clicked)=\"onClick($event)\">\n                    {{ link.text }}\n                </n7-anchor-wrapper>\n            </li>\n        </ul>\n    </div>\n\n    <div *ngIf=\"column.images\" class=\"n7-footer__column-images\">\n        <n7-anchor-wrapper  *ngFor=\"let image of column.images\"\n        [classes]=\"image.classes || ''\"\n        [data]=\"image.anchor\"\n        (clicked)=\"onClick($event)\">\n            <img \n            [src]=\"image.url\" \n            [attr.alt]=\"image.alttext\" />\n        </n7-anchor-wrapper>\n    </div>\n</ng-template>", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: FooterComponent, selector: "n7-footer", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-footer {{data.classes || ''}}\">\n  <div class=\"n7-footer__content\">\n    <!-- Loop footer content columns -->\n    <div\n      class=\"n7-footer__column {{column.classes || ''}}\"\n      *ngFor=\"let column of data.columns\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"footerColumn; context:{$implicit: column}\"\n      ></ng-container>\n    </div>\n  </div>\n</div>\n\n<!-- Template: Columns -->\n<ng-template #footerColumn let-column>\n  <h2 *ngIf=\"column.title\" class=\"n7-footer__column-title\">\n    {{ column.title }}\n  </h2>\n  <p\n    *ngIf=\"column.text\"\n    class=\"n7-footer__column-text\"\n    [innerHTML]=\"column.text\"\n  ></p>\n  <div *ngIf=\"column.links\" class=\"n7-footer__column-nav\">\n    <ul class=\"n7-footer__column-nav-list\">\n      <li\n        *ngFor=\"let link of column.links\"\n        class=\"n7-footer__column-nav-item {{link.classes || ''}}\"\n      >\n        <n7-anchor-wrapper\n          [classes]=\"'n7-footer__column-nav-link'\"\n          [data]=\"link.anchor\"\n          (clicked)=\"onClick($event)\"\n        >\n          {{ link.text }}\n        </n7-anchor-wrapper>\n      </li>\n    </ul>\n  </div>\n\n  <div *ngIf=\"column.selects\" class=\"n7-footer__column-selects\">\n    <n7-input-select\n      *ngFor=\"let selectData of column.selects\"\n      [data]=\"selectData\"\n      [emit]=\"this.emit\"\n    >\n    </n7-input-select>\n  </div>\n\n  <div *ngIf=\"column.images\" class=\"n7-footer__column-images\">\n    <n7-anchor-wrapper\n      *ngFor=\"let image of column.images\"\n      [classes]=\"image.classes || ''\"\n      [data]=\"image.anchor\"\n      (clicked)=\"onClick($event)\"\n    >\n      <img [src]=\"image.url\" [attr.alt]=\"image.alttext\" />\n    </n7-anchor-wrapper>\n  </div>\n</ng-template>\n", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }, { type: InputSelectComponent, selector: "n7-input-select", inputs: ["data", "emit"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'n7-footer', template: "<div *ngIf=\"data\" class=\"n7-footer {{data.classes || ''}}\">\n    <div class=\"n7-footer__content\">\n        <!-- Loop footer content columns -->\n        <div class=\"n7-footer__column {{column.classes || ''}}\" *ngFor=\"let column of data.columns\">\n            <ng-container *ngTemplateOutlet=\"footerColumn; context:{$implicit: column}\"></ng-container>\n        </div>\n    </div>\n</div>\n\n<!-- Template: Columns -->\n<ng-template #footerColumn let-column>\n    <h2 *ngIf=\"column.title\" class=\"n7-footer__column-title\">\n        {{ column.title }}\n    </h2>\n    <p *ngIf=\"column.text\" \n       class=\"n7-footer__column-text\"\n       [innerHTML]=\"column.text\">\n    </p>\n    <div *ngIf=\"column.links\" class=\"n7-footer__column-nav\">\n        <ul class=\"n7-footer__column-nav-list\">\n            <li *ngFor=\"let link of column.links\"\n                class=\"n7-footer__column-nav-item {{link.classes || ''}}\">\n                <n7-anchor-wrapper [classes]=\"'n7-footer__column-nav-link'\"\n                [data]=\"link.anchor\"\n                (clicked)=\"onClick($event)\">\n                    {{ link.text }}\n                </n7-anchor-wrapper>\n            </li>\n        </ul>\n    </div>\n\n    <div *ngIf=\"column.images\" class=\"n7-footer__column-images\">\n        <n7-anchor-wrapper  *ngFor=\"let image of column.images\"\n        [classes]=\"image.classes || ''\"\n        [data]=\"image.anchor\"\n        (clicked)=\"onClick($event)\">\n            <img \n            [src]=\"image.url\" \n            [attr.alt]=\"image.alttext\" />\n        </n7-anchor-wrapper>\n    </div>\n</ng-template>" }]
+            args: [{ selector: 'n7-footer', template: "<div *ngIf=\"data\" class=\"n7-footer {{data.classes || ''}}\">\n  <div class=\"n7-footer__content\">\n    <!-- Loop footer content columns -->\n    <div\n      class=\"n7-footer__column {{column.classes || ''}}\"\n      *ngFor=\"let column of data.columns\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"footerColumn; context:{$implicit: column}\"\n      ></ng-container>\n    </div>\n  </div>\n</div>\n\n<!-- Template: Columns -->\n<ng-template #footerColumn let-column>\n  <h2 *ngIf=\"column.title\" class=\"n7-footer__column-title\">\n    {{ column.title }}\n  </h2>\n  <p\n    *ngIf=\"column.text\"\n    class=\"n7-footer__column-text\"\n    [innerHTML]=\"column.text\"\n  ></p>\n  <div *ngIf=\"column.links\" class=\"n7-footer__column-nav\">\n    <ul class=\"n7-footer__column-nav-list\">\n      <li\n        *ngFor=\"let link of column.links\"\n        class=\"n7-footer__column-nav-item {{link.classes || ''}}\"\n      >\n        <n7-anchor-wrapper\n          [classes]=\"'n7-footer__column-nav-link'\"\n          [data]=\"link.anchor\"\n          (clicked)=\"onClick($event)\"\n        >\n          {{ link.text }}\n        </n7-anchor-wrapper>\n      </li>\n    </ul>\n  </div>\n\n  <div *ngIf=\"column.selects\" class=\"n7-footer__column-selects\">\n    <n7-input-select\n      *ngFor=\"let selectData of column.selects\"\n      [data]=\"selectData\"\n      [emit]=\"this.emit\"\n    >\n    </n7-input-select>\n  </div>\n\n  <div *ngIf=\"column.images\" class=\"n7-footer__column-images\">\n    <n7-anchor-wrapper\n      *ngFor=\"let image of column.images\"\n      [classes]=\"image.classes || ''\"\n      [data]=\"image.anchor\"\n      (clicked)=\"onClick($event)\"\n    >\n      <img [src]=\"image.url\" [attr.alt]=\"image.alttext\" />\n    </n7-anchor-wrapper>\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { data: [{
                 type: Input
             }], emit: [{
@@ -778,10 +797,10 @@ class HeaderComponent {
     }
 }
 HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: HeaderComponent, selector: "n7-header", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<header *ngIf=\"data\" class=\"n7-header {{data.classes || ''}}\">\n    <div class=\"n7-header__content\">\n\n        <!-- Logo and title -->\n        <div class=\"n7-header__logo-title {{data.logo.classes || ''}}\">\n            <n7-anchor-wrapper [classes]=\"'n7-header__logo-link'\"\n            [data]=\"data.logo.anchor\"\n            (clicked)=\"onClick($event)\">\n                <img class=\"n7-header__logo\"\n                *ngIf=\"data.logo.image\"\n                [src]=\"data.logo.image\"\n                alt=\"{{ data.logo.title }}\" />\n                <div class=\"n7-header__title-subtitle\">\n                    <h1 class=\"n7-header__title\">\n                        {{ data.logo.title }}\n                    </h1>\n                    <h2 class=\"n7-header__subtitle\" *ngIf=\"data.logo.subtitle\">\n                        {{ data.logo.subtitle }}\n                    </h2>\n                </div>\n            </n7-anchor-wrapper>\n        </div>\n\n        <!-- Main menu -->\n        <nav class=\"n7-header__nav {{data.nav.classes || ''}}\" *ngIf=\"data.nav\">\n            <div class=\"n7-header__nav-content\">\n                <ul class=\"n7-header__nav-list\">\n                    <li class=\"n7-header__nav-item {{item.classes || ''}}\" *ngFor=\"let item of data.nav.items\">\n                        <n7-anchor-wrapper [classes]=\"'n7-header__nav-link'\"\n                        [data]=\"item.anchor\"\n                        (clicked)=\"onClick($event)\">\n                            <span class=\"n7-header__nav-icon {{item.icon}}\" *ngIf=\"item.icon\"></span>\n                            <span class=\"n7-header__nav-label\" *ngIf=\"item.text\">\n                                {{ item.text }}\n                            </span>\n                        </n7-anchor-wrapper>\n                        <!-- Sublevel -->\n                        <ul class=\"n7-header__subnav-list\" *ngIf=\"item.subnav\">\n                            <li class=\"n7-header__subnav-item {{subitem.classes || ''}}\" *ngFor=\"let subitem of item.subnav\">\n                                <n7-anchor-wrapper [classes]=\"'n7-header__subnav-link'\"\n                                [data]=\"subitem.anchor\"\n                                (clicked)=\"onClick($event)\">\n                                    <span class=\"n7-header__subnav-icon {{subitem.icon}}\" *ngIf=\"subitem.icon\"></span>\n                                    <span class=\"n7-header__subnav-label\" *ngIf=\"subitem.text\">\n                                        {{ subitem.text }}\n                                    </span>\n                                </n7-anchor-wrapper>\n                            </li>\n                        </ul>\n                    </li>\n                </ul>\n            </div>\n        </nav>\n\n        <!-- Mobile menu toggle -->\n        <div class=\"n7-header__mobile-menu-toggle\">\n            <span class=\"n7-header__mobile-menu-icon n7-icon-menu\" \n                (click)=\"onClick(data.menuToggle.open.payload)\"></span>\n        </div>\n\n        <!-- Mobile menu close -->\n        <span class=\"n7-header__mobile-menu-close n7-icon-close\" \n            (click)=\"onClick(data.menuToggle.close.payload)\"></span>\n\n        <!-- Tools: search, notifications, use profile or login/signup -->\n        <div class=\"n7-header__tools\">\n            \n            <div class=\"n7-header__search {{data.search.classes || ''}}\" *ngIf=\"data.search\">\n                <input class=\"n7-header__search-input\" \n                    type=\"search\" \n                    name=\"search\" \n                    placeholder=\"{{ data.search.hint || ''}}\" \n                    (keyup)=\"onKeyUp(data.search.payload, $event.keyCode, $event.target.value)\"/>\n                <button class=\"n7-header__search-btn\" type=\"submit\" (click)=\"onClick(data.search.payload)\">\n                    <span class=\"n7-header__search-btn-label\">\n                        Search\n                    </span>\n                </button>\n            </div>\n            \n            <div class=\"n7-header__actions\" *ngIf=\"data.actions\">\n                <n7-anchor-wrapper *ngFor=\"let action of data.actions\" \n                [classes]=\"'n7-header__action' + (action.classes || '')\"\n                [data]=\"action.anchor\"\n                (clicked)=\"onClick($event)\">\n                    <span class=\"n7-header__action-icon {{ action.icon }}\"></span>\n                    <span *ngIf=\"action.badge\" class=\"n7-header__action-badge {{ action.badge.text ? 'has-text' : '' }}\">\n                        {{ action.badge.text }}\n                    </span>\n                </n7-anchor-wrapper>\n            </div>\n\n            <div class=\"n7-header__buttons\" *ngIf=\"data.buttons\">\n                <n7-anchor-wrapper *ngFor=\"let button of data.buttons\"\n                [classes]=\"button.classes\" \n                [data]=\"button.anchor\"\n                (clicked)=\"onClick($event)\">\n                <span class=\"\" *ngIf=\"button.text\">\n                    {{ button.text }}\n                </span>\n                <span class=\"{{button.icon}}\" *ngIf=\"button.icon\"></span>\n                </n7-anchor-wrapper>\n            </div>\n\n            <div class=\"n7-header__user {{data.user.classes || ''}}\" *ngIf=\"data.user\">\n                <n7-anchor-wrapper [classes]=\"'n7-header__user-content'\"\n                [data]=\"data.user.anchor\"\n                (clicked)=\"onClick($event)\">\n                    <img *ngIf=\"data.user.img\"\n                    class=\"n7-header__user-img\"  \n                    [src]=\"data.user.img\"/>\n                    <p class=\"n7-header__user-name\" *ngIf=\"data.user.name\">\n                        <span class=\"n7-header__user-name-label\">\n                            {{ data.user.name }}\n                        </span>\n                    </p>\n                </n7-anchor-wrapper>\n            </div>\n        </div>\n\n    </div>\n</header>\n\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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: HeaderComponent, selector: "n7-header", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<header *ngIf=\"data\" class=\"n7-header {{data.classes || ''}}\">\n  <div class=\"n7-header__content\">\n    <!-- Logo and title -->\n    <div class=\"n7-header__logo-title {{data.logo.classes || ''}}\">\n      <n7-anchor-wrapper\n        [classes]=\"'n7-header__logo-link'\"\n        [data]=\"data.logo.anchor\"\n        (clicked)=\"onClick($event)\"\n      >\n        <img\n          class=\"n7-header__logo\"\n          *ngIf=\"data.logo.image\"\n          [src]=\"data.logo.image\"\n          alt=\"{{ data.logo.title }}\"\n        />\n        <div class=\"n7-header__title-subtitle\">\n          <h1 class=\"n7-header__title\">{{ data.logo.title }}</h1>\n          <h2 class=\"n7-header__subtitle\" *ngIf=\"data.logo.subtitle\">\n            {{ data.logo.subtitle }}\n          </h2>\n        </div>\n      </n7-anchor-wrapper>\n    </div>\n\n    <!-- Main menu -->\n    <nav class=\"n7-header__nav {{data.nav.classes || ''}}\" *ngIf=\"data.nav\">\n      <div class=\"n7-header__nav-content\">\n        <ul class=\"n7-header__nav-list\">\n          <li\n            class=\"n7-header__nav-item {{item.classes || ''}}\"\n            *ngFor=\"let item of data.nav.items\"\n          >\n            <n7-anchor-wrapper\n              [classes]=\"'n7-header__nav-link'\"\n              [data]=\"item.anchor\"\n              (clicked)=\"onClick($event)\"\n            >\n              <span\n                class=\"n7-header__nav-icon {{item.icon}}\"\n                *ngIf=\"item.icon\"\n              ></span>\n              <span class=\"n7-header__nav-label\" *ngIf=\"item.text\">\n                {{ item.text }}\n              </span>\n            </n7-anchor-wrapper>\n            <!-- Sublevel -->\n            <ul class=\"n7-header__subnav-list\" *ngIf=\"item.subnav\">\n              <li\n                class=\"n7-header__subnav-item {{subitem.classes || ''}}\"\n                *ngFor=\"let subitem of item.subnav\"\n              >\n                <n7-anchor-wrapper\n                  [classes]=\"'n7-header__subnav-link'\"\n                  [data]=\"subitem.anchor\"\n                  (clicked)=\"onClick($event)\"\n                >\n                  <span\n                    class=\"n7-header__subnav-icon {{subitem.icon}}\"\n                    *ngIf=\"subitem.icon\"\n                  ></span>\n                  <span class=\"n7-header__subnav-label\" *ngIf=\"subitem.text\">\n                    {{ subitem.text }}\n                  </span>\n                </n7-anchor-wrapper>\n              </li>\n            </ul>\n          </li>\n        </ul>\n      </div>\n    </nav>\n\n    <!-- Mobile menu toggle -->\n    <div class=\"n7-header__mobile-menu-toggle\">\n      <span\n        class=\"n7-header__mobile-menu-icon n7-icon-menu\"\n        (click)=\"onClick(data.menuToggle.open.payload)\"\n      ></span>\n    </div>\n\n    <!-- Mobile menu close -->\n    <span\n      class=\"n7-header__mobile-menu-close n7-icon-close\"\n      (click)=\"onClick(data.menuToggle.close.payload)\"\n    ></span>\n\n    <!-- Tools: search, notifications, use profile or login/signup -->\n    <div class=\"n7-header__tools\">\n      <div\n        class=\"n7-header__search {{data.search.classes || ''}}\"\n        *ngIf=\"data.search\"\n      >\n        <input\n          class=\"n7-header__search-input\"\n          type=\"search\"\n          name=\"search\"\n          placeholder=\"{{ data.search.hint || ''}}\"\n          (keyup)=\"onKeyUp(data.search.payload, $event.keyCode, $event.target.value)\"\n        />\n        <button\n          class=\"n7-header__search-btn\"\n          type=\"submit\"\n          (click)=\"onClick(data.search.payload)\"\n        >\n          <span class=\"n7-header__search-btn-label\"> Search </span>\n        </button>\n      </div>\n\n      <div class=\"n7-header__actions\" *ngIf=\"data.actions\">\n        <n7-anchor-wrapper\n          *ngFor=\"let action of data.actions\"\n          [classes]=\"'n7-header__action' + (action.classes || '')\"\n          [data]=\"action.anchor\"\n          (clicked)=\"onClick($event)\"\n        >\n          <span class=\"n7-header__action-icon {{ action.icon }}\"></span>\n          <span\n            *ngIf=\"action.badge\"\n            class=\"n7-header__action-badge {{ action.badge.text ? 'has-text' : '' }}\"\n          >\n            {{ action.badge.text }}\n          </span>\n        </n7-anchor-wrapper>\n      </div>\n\n      <div class=\"n7-header__buttons\" *ngIf=\"data.buttons\">\n        <n7-anchor-wrapper\n          *ngFor=\"let button of data.buttons\"\n          [classes]=\"button.classes\"\n          [data]=\"button.anchor\"\n          (clicked)=\"onClick($event)\"\n        >\n          <span class=\"\" *ngIf=\"button.text\"> {{ button.text }} </span>\n          <span class=\"{{button.icon}}\" *ngIf=\"button.icon\"></span>\n        </n7-anchor-wrapper>\n      </div>\n\n      <div class=\"n7-header__selects\" *ngIf=\"data.selects\">\n        <n7-input-select\n          *ngFor=\"let selectData of data.selects\"\n          [data]=\"selectData\"\n          [emit]=\"this.emit\"\n        >\n        </n7-input-select>\n      </div>\n\n      <div\n        class=\"n7-header__user {{data.user.classes || ''}}\"\n        *ngIf=\"data.user\"\n      >\n        <n7-anchor-wrapper\n          [classes]=\"'n7-header__user-content'\"\n          [data]=\"data.user.anchor\"\n          (clicked)=\"onClick($event)\"\n        >\n          <img\n            *ngIf=\"data.user.img\"\n            class=\"n7-header__user-img\"\n            [src]=\"data.user.img\"\n          />\n          <p class=\"n7-header__user-name\" *ngIf=\"data.user.name\">\n            <span class=\"n7-header__user-name-label\">\n              {{ data.user.name }}\n            </span>\n          </p>\n        </n7-anchor-wrapper>\n      </div>\n    </div>\n  </div>\n</header>\n", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }, { type: InputSelectComponent, selector: "n7-input-select", inputs: ["data", "emit"] }], 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: HeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'n7-header', template: "<header *ngIf=\"data\" class=\"n7-header {{data.classes || ''}}\">\n    <div class=\"n7-header__content\">\n\n        <!-- Logo and title -->\n        <div class=\"n7-header__logo-title {{data.logo.classes || ''}}\">\n            <n7-anchor-wrapper [classes]=\"'n7-header__logo-link'\"\n            [data]=\"data.logo.anchor\"\n            (clicked)=\"onClick($event)\">\n                <img class=\"n7-header__logo\"\n                *ngIf=\"data.logo.image\"\n                [src]=\"data.logo.image\"\n                alt=\"{{ data.logo.title }}\" />\n                <div class=\"n7-header__title-subtitle\">\n                    <h1 class=\"n7-header__title\">\n                        {{ data.logo.title }}\n                    </h1>\n                    <h2 class=\"n7-header__subtitle\" *ngIf=\"data.logo.subtitle\">\n                        {{ data.logo.subtitle }}\n                    </h2>\n                </div>\n            </n7-anchor-wrapper>\n        </div>\n\n        <!-- Main menu -->\n        <nav class=\"n7-header__nav {{data.nav.classes || ''}}\" *ngIf=\"data.nav\">\n            <div class=\"n7-header__nav-content\">\n                <ul class=\"n7-header__nav-list\">\n                    <li class=\"n7-header__nav-item {{item.classes || ''}}\" *ngFor=\"let item of data.nav.items\">\n                        <n7-anchor-wrapper [classes]=\"'n7-header__nav-link'\"\n                        [data]=\"item.anchor\"\n                        (clicked)=\"onClick($event)\">\n                            <span class=\"n7-header__nav-icon {{item.icon}}\" *ngIf=\"item.icon\"></span>\n                            <span class=\"n7-header__nav-label\" *ngIf=\"item.text\">\n                                {{ item.text }}\n                            </span>\n                        </n7-anchor-wrapper>\n                        <!-- Sublevel -->\n                        <ul class=\"n7-header__subnav-list\" *ngIf=\"item.subnav\">\n                            <li class=\"n7-header__subnav-item {{subitem.classes || ''}}\" *ngFor=\"let subitem of item.subnav\">\n                                <n7-anchor-wrapper [classes]=\"'n7-header__subnav-link'\"\n                                [data]=\"subitem.anchor\"\n                                (clicked)=\"onClick($event)\">\n                                    <span class=\"n7-header__subnav-icon {{subitem.icon}}\" *ngIf=\"subitem.icon\"></span>\n                                    <span class=\"n7-header__subnav-label\" *ngIf=\"subitem.text\">\n                                        {{ subitem.text }}\n                                    </span>\n                                </n7-anchor-wrapper>\n                            </li>\n                        </ul>\n                    </li>\n                </ul>\n            </div>\n        </nav>\n\n        <!-- Mobile menu toggle -->\n        <div class=\"n7-header__mobile-menu-toggle\">\n            <span class=\"n7-header__mobile-menu-icon n7-icon-menu\" \n                (click)=\"onClick(data.menuToggle.open.payload)\"></span>\n        </div>\n\n        <!-- Mobile menu close -->\n        <span class=\"n7-header__mobile-menu-close n7-icon-close\" \n            (click)=\"onClick(data.menuToggle.close.payload)\"></span>\n\n        <!-- Tools: search, notifications, use profile or login/signup -->\n        <div class=\"n7-header__tools\">\n            \n            <div class=\"n7-header__search {{data.search.classes || ''}}\" *ngIf=\"data.search\">\n                <input class=\"n7-header__search-input\" \n                    type=\"search\" \n                    name=\"search\" \n                    placeholder=\"{{ data.search.hint || ''}}\" \n                    (keyup)=\"onKeyUp(data.search.payload, $event.keyCode, $event.target.value)\"/>\n                <button class=\"n7-header__search-btn\" type=\"submit\" (click)=\"onClick(data.search.payload)\">\n                    <span class=\"n7-header__search-btn-label\">\n                        Search\n                    </span>\n                </button>\n            </div>\n            \n            <div class=\"n7-header__actions\" *ngIf=\"data.actions\">\n                <n7-anchor-wrapper *ngFor=\"let action of data.actions\" \n                [classes]=\"'n7-header__action' + (action.classes || '')\"\n                [data]=\"action.anchor\"\n                (clicked)=\"onClick($event)\">\n                    <span class=\"n7-header__action-icon {{ action.icon }}\"></span>\n                    <span *ngIf=\"action.badge\" class=\"n7-header__action-badge {{ action.badge.text ? 'has-text' : '' }}\">\n                        {{ action.badge.text }}\n                    </span>\n                </n7-anchor-wrapper>\n            </div>\n\n            <div class=\"n7-header__buttons\" *ngIf=\"data.buttons\">\n                <n7-anchor-wrapper *ngFor=\"let button of data.buttons\"\n                [classes]=\"button.classes\" \n                [data]=\"button.anchor\"\n                (clicked)=\"onClick($event)\">\n                <span class=\"\" *ngIf=\"button.text\">\n                    {{ button.text }}\n                </span>\n                <span class=\"{{button.icon}}\" *ngIf=\"button.icon\"></span>\n                </n7-anchor-wrapper>\n            </div>\n\n            <div class=\"n7-header__user {{data.user.classes || ''}}\" *ngIf=\"data.user\">\n                <n7-anchor-wrapper [classes]=\"'n7-header__user-content'\"\n                [data]=\"data.user.anchor\"\n                (clicked)=\"onClick($event)\">\n                    <img *ngIf=\"data.user.img\"\n                    class=\"n7-header__user-img\"  \n                    [src]=\"data.user.img\"/>\n                    <p class=\"n7-header__user-name\" *ngIf=\"data.user.name\">\n                        <span class=\"n7-header__user-name-label\">\n                            {{ data.user.name }}\n                        </span>\n                    </p>\n                </n7-anchor-wrapper>\n            </div>\n        </div>\n\n    </div>\n</header>\n\n" }]
+            args: [{ selector: 'n7-header', template: "<header *ngIf=\"data\" class=\"n7-header {{data.classes || ''}}\">\n  <div class=\"n7-header__content\">\n    <!-- Logo and title -->\n    <div class=\"n7-header__logo-title {{data.logo.classes || ''}}\">\n      <n7-anchor-wrapper\n        [classes]=\"'n7-header__logo-link'\"\n        [data]=\"data.logo.anchor\"\n        (clicked)=\"onClick($event)\"\n      >\n        <img\n          class=\"n7-header__logo\"\n          *ngIf=\"data.logo.image\"\n          [src]=\"data.logo.image\"\n          alt=\"{{ data.logo.title }}\"\n        />\n        <div class=\"n7-header__title-subtitle\">\n          <h1 class=\"n7-header__title\">{{ data.logo.title }}</h1>\n          <h2 class=\"n7-header__subtitle\" *ngIf=\"data.logo.subtitle\">\n            {{ data.logo.subtitle }}\n          </h2>\n        </div>\n      </n7-anchor-wrapper>\n    </div>\n\n    <!-- Main menu -->\n    <nav class=\"n7-header__nav {{data.nav.classes || ''}}\" *ngIf=\"data.nav\">\n      <div class=\"n7-header__nav-content\">\n        <ul class=\"n7-header__nav-list\">\n          <li\n            class=\"n7-header__nav-item {{item.classes || ''}}\"\n            *ngFor=\"let item of data.nav.items\"\n          >\n            <n7-anchor-wrapper\n              [classes]=\"'n7-header__nav-link'\"\n              [data]=\"item.anchor\"\n              (clicked)=\"onClick($event)\"\n            >\n              <span\n                class=\"n7-header__nav-icon {{item.icon}}\"\n                *ngIf=\"item.icon\"\n              ></span>\n              <span class=\"n7-header__nav-label\" *ngIf=\"item.text\">\n                {{ item.text }}\n              </span>\n            </n7-anchor-wrapper>\n            <!-- Sublevel -->\n            <ul class=\"n7-header__subnav-list\" *ngIf=\"item.subnav\">\n              <li\n                class=\"n7-header__subnav-item {{subitem.classes || ''}}\"\n                *ngFor=\"let subitem of item.subnav\"\n              >\n                <n7-anchor-wrapper\n                  [classes]=\"'n7-header__subnav-link'\"\n                  [data]=\"subitem.anchor\"\n                  (clicked)=\"onClick($event)\"\n                >\n                  <span\n                    class=\"n7-header__subnav-icon {{subitem.icon}}\"\n                    *ngIf=\"subitem.icon\"\n                  ></span>\n                  <span class=\"n7-header__subnav-label\" *ngIf=\"subitem.text\">\n                    {{ subitem.text }}\n                  </span>\n                </n7-anchor-wrapper>\n              </li>\n            </ul>\n          </li>\n        </ul>\n      </div>\n    </nav>\n\n    <!-- Mobile menu toggle -->\n    <div class=\"n7-header__mobile-menu-toggle\">\n      <span\n        class=\"n7-header__mobile-menu-icon n7-icon-menu\"\n        (click)=\"onClick(data.menuToggle.open.payload)\"\n      ></span>\n    </div>\n\n    <!-- Mobile menu close -->\n    <span\n      class=\"n7-header__mobile-menu-close n7-icon-close\"\n      (click)=\"onClick(data.menuToggle.close.payload)\"\n    ></span>\n\n    <!-- Tools: search, notifications, use profile or login/signup -->\n    <div class=\"n7-header__tools\">\n      <div\n        class=\"n7-header__search {{data.search.classes || ''}}\"\n        *ngIf=\"data.search\"\n      >\n        <input\n          class=\"n7-header__search-input\"\n          type=\"search\"\n          name=\"search\"\n          placeholder=\"{{ data.search.hint || ''}}\"\n          (keyup)=\"onKeyUp(data.search.payload, $event.keyCode, $event.target.value)\"\n        />\n        <button\n          class=\"n7-header__search-btn\"\n          type=\"submit\"\n          (click)=\"onClick(data.search.payload)\"\n        >\n          <span class=\"n7-header__search-btn-label\"> Search </span>\n        </button>\n      </div>\n\n      <div class=\"n7-header__actions\" *ngIf=\"data.actions\">\n        <n7-anchor-wrapper\n          *ngFor=\"let action of data.actions\"\n          [classes]=\"'n7-header__action' + (action.classes || '')\"\n          [data]=\"action.anchor\"\n          (clicked)=\"onClick($event)\"\n        >\n          <span class=\"n7-header__action-icon {{ action.icon }}\"></span>\n          <span\n            *ngIf=\"action.badge\"\n            class=\"n7-header__action-badge {{ action.badge.text ? 'has-text' : '' }}\"\n          >\n            {{ action.badge.text }}\n          </span>\n        </n7-anchor-wrapper>\n      </div>\n\n      <div class=\"n7-header__buttons\" *ngIf=\"data.buttons\">\n        <n7-anchor-wrapper\n          *ngFor=\"let button of data.buttons\"\n          [classes]=\"button.classes\"\n          [data]=\"button.anchor\"\n          (clicked)=\"onClick($event)\"\n        >\n          <span class=\"\" *ngIf=\"button.text\"> {{ button.text }} </span>\n          <span class=\"{{button.icon}}\" *ngIf=\"button.icon\"></span>\n        </n7-anchor-wrapper>\n      </div>\n\n      <div class=\"n7-header__selects\" *ngIf=\"data.selects\">\n        <n7-input-select\n          *ngFor=\"let selectData of data.selects\"\n          [data]=\"selectData\"\n          [emit]=\"this.emit\"\n        >\n        </n7-input-select>\n      </div>\n\n      <div\n        class=\"n7-header__user {{data.user.classes || ''}}\"\n        *ngIf=\"data.user\"\n      >\n        <n7-anchor-wrapper\n          [classes]=\"'n7-header__user-content'\"\n          [data]=\"data.user.anchor\"\n          (clicked)=\"onClick($event)\"\n        >\n          <img\n            *ngIf=\"data.user.img\"\n            class=\"n7-header__user-img\"\n            [src]=\"data.user.img\"\n          />\n          <p class=\"n7-header__user-name\" *ngIf=\"data.user.name\">\n            <span class=\"n7-header__user-name-label\">\n              {{ data.user.name }}\n            </span>\n          </p>\n        </n7-anchor-wrapper>\n      </div>\n    </div>\n  </div>\n</header>\n" }]
         }], propDecorators: { data: [{
                 type: Input
             }], emit: [{
@@ -1351,25 +1370,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 type: Input
             }] } });
 
-//---------------------------
-class InputSelectComponent {
-    onChange(inputPayload, value) {
-        if (!this.emit)
-            return;
-        this.emit('change', { inputPayload, value });
-    }
-}
-InputSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: InputSelectComponent, selector: "n7-input-select", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data as input\"\n     class=\"n7-input-select\">\n  <label *ngIf=\"input.label\"\n         for=\"{{ input.id }}\" [innerHTML]=\"input.label\"></label>\n  <select (change)=\"onChange(input.payload, $event.target.value)\"\n          id=\"{{ input.id }}\"\n          class=\"n7-facet__input-select {{ input.classes || '' }}\"\n          [disabled]=\"input.disabled\">\n    <option *ngFor=\"let option of input.options\"\n            [value]=\"option.value\"\n            [disabled]=\"option.disabled\"\n            [selected]=\"option.selected\">{{ option.label }}</option>\n  </select>\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: InputSelectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'n7-input-select', template: "<div *ngIf=\"data as input\"\n     class=\"n7-input-select\">\n  <label *ngIf=\"input.label\"\n         for=\"{{ input.id }}\" [innerHTML]=\"input.label\"></label>\n  <select (change)=\"onChange(input.payload, $event.target.value)\"\n          id=\"{{ input.id }}\"\n          class=\"n7-facet__input-select {{ input.classes || '' }}\"\n          [disabled]=\"input.disabled\">\n    <option *ngFor=\"let option of input.options\"\n            [value]=\"option.value\"\n            [disabled]=\"option.disabled\"\n            [selected]=\"option.selected\">{{ option.label }}</option>\n  </select>\n</div>\n" }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], emit: [{
-                type: Input
-            }] } });
-
 //---------------------------
 class InputTextComponent {
     onChange(inputPayload, value) {
@@ -1645,6 +1645,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
 
 //---------------------------
 class TextViewerComponent {
+    constructor() {
+        this.isDisplayed = false;
+    }
     ngOnInit() {
         if (!TextViewerComponent._loaded) {
             const s = document.createElement('script');
@@ -1654,6 +1657,13 @@ class TextViewerComponent {
             document.head.appendChild(s);
         }
     }
+    displayIndex() {
+        if (this.isDisplayed === false) {
+            this.isDisplayed = true;
+        }
+        else
+            this.isDisplayed = false;
+    }
     onScriptLoaded() {
         TextViewerComponent._loaded = true;
     }
@@ -1665,10 +1675,10 @@ class TextViewerComponent {
 }
 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: "<!-- NEW -->\n<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-load url=\"api/search\"></pb-load> -->\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    <!-- <pb-load url=\"api/mrcsearch?query=lepre&collection=murucademo\"></pb-load> -->\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          <!-- <pb-login id=\"loginElem\" auto=\"false\"></pb-login> -->\n          <app-toolbar\n            class=\"toolbar\"\n            sticky=\"sticky\"\n            style=\"transform: translate3d(0px, 0px, 0px)\"\n          >\n            <paper-icon-button\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 *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              <pb-i18n key=\"document.plain\">Plain Reading View</pb-i18n>\n            </pb-toggle-feature>\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            <!-- *ngIf=\"data.docs.length > 1\" -->\n            <pb-select-feature *ngIf=\"data.docs.length > 1\"\n              id=\"select-view1\"\n              name=\"view1\"\n              label=\"View\"\n              items='[\n                    {\"name\": \"View All Named Entities\", \"selectors\": [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": false}]},\n      {\"name\": \"View People\", \"selectors\": [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": true}]},\n      {\"name\": \"View Places\", \"selectors\": [{\"selector\": \".place\", \"state\": false}, {\"selector\": \".person\", \"state\": true}]}\n        ]'\n              subscribe=\"addChannel\"\n              emit=\"addChannel\"\n            ></pb-select-feature>\n           \n            <pb-download\n              *ngIf=\"data.docs && data.docs.length > 1\"\n              type=\"epub\"\n              [src]=\"data.docs[0].id\"\n              dialog=\"downloadDialog\"\n              title=\"Download ePub\"\n            >\n              <paper-button raised=\"\">Download ePub</paper-button>\n            </pb-download>\n\n\n            \n            <!-- <pb-search id=\"search-form\" action=\"search.search\" submitOnLoad=\"true\" data-template=\"pages:parse-params\">\n              <div class=\"buttons\">\n                  <paper-button slot=\"searchButton\"><pb-i18n key=\"search.search\"></pb-i18n></paper-button>\n                  <paper-button slot=\"resetButton\"><pb-i18n key=\"search.reset\"></pb-i18n></paper-button>\n              </div>\n            </pb-search>\n            <pb-load class=\"hidden\" url=\"api/search?query=Accompagnati&da&Alchifa&action=search\" auto=\"true\"></pb-load> -->\n            \n            \n            \n            <ng-container *ngIf=\"!data.docs[0].translation\">\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            <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        <pb-drawer\n          toggle=\"tocToggle\"\n          class=\"tocDrawer\"\n          emit=\"toc\"\n          subscribe=\"transcription\"\n        >\n          <div class=\"drawer-content\">\n            <h3>\n              <pb-i18n key=\"document.contents\">Contents</pb-i18n>\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              ><pb-i18n key=\"dialogs.loading\">Loading</pb-i18n></pb-load\n            > -->\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              *ngIf=\"doc.channel && !doc.translation\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              emit=\"addChannel\"\n              subscribe=\"addChannel\"\n              view=\"{{ doc.view }}\"\n            >\n              <pb-param name=\"mode\" value=\"commentary\"></pb-param>\n            </pb-view>\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"] }] });
+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: "<!-- NEW -->\n<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-load url=\"api/search\"></pb-load> -->\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    <!-- <pb-load url=\"api/mrcsearch?query=lepre&collection=murucademo\"></pb-load> -->\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          <!-- <pb-login id=\"loginElem\" auto=\"false\"></pb-login> -->\n          <app-toolbar\n            class=\"toolbar\"\n            sticky=\"sticky\"\n            style=\"transform: translate3d(0px, 0px, 0px)\"\n          >\n            <paper-icon-button\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              <pb-i18n key=\"document.plain\">Plain Reading View</pb-i18n>\n            </pb-toggle-feature>\n\n            <pb-download\n              *ngIf=\"data.docs && data.docs.length > 1\"\n              type=\"epub\"\n              [src]=\"data.docs[0].id\"\n              [url]=\"data.docs[0].download\"\n              dialog=\"downloadDialog\"\n              title=\"Download ePub\"\n            >\n              <paper-button raised=\"\">Download eBook</paper-button>\n            </pb-download>\n\n            <!-- <pb-download\n              *ngIf=\"data.docs && data.docs.length > 1\"\n              type=\"txt\"\n              [src]=\"data.docs[0].id\"\n              url=\"https://www.gutenberg.org/cache/epub/67735/pg67735.txt\"\n              dialog=\"downloadDialog\"\n              title=\"Download TXT\"\n            >\n              <paper-button raised=\"\">Download TXT</paper-button>\n            </pb-download>\n\n            <pb-download\n              *ngIf=\"data.docs && data.docs.length > 1\"\n              type=\"xml\"\n              [src]=\"data.docs[0].id\"\n              url=\"https://www.gutenberg.org/cache/epub/67735/pg67735.txt\"\n              dialog=\"downloadDialog\"\n              title=\"Download XML\"\n            >\n              <paper-button raised=\"\">Download XML</paper-button>\n            </pb-download> -->\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\n            <ng-container *ngIf=\"!data.docs[0].translation\">\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            <!-- *ngIf=\"data.docs.length > 1\" -->\n            <pb-select-feature\n              *ngIf=\"data.docs.length > 1\"\n              id=\"select-view2\"\n              name=\"view2\"\n              label=\"View\"\n              items='[\n                    {\"name\": \"View All Named Entities\", \"selectors\": [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": false}]},\n      {\"name\": \"View People\", \"selectors\": [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": true}]},\n      {\"name\": \"View Places\", \"selectors\": [{\"selector\": \".place\", \"state\": false}, {\"selector\": \".person\", \"state\": true}]}\n        ]'\n              subscribe=\"addChannel\"\n              emit=\"addChannel\"\n            ></pb-select-feature>\n\n           \n            <ng-container *ngIf=\"data.docs.length > 1 && data.docs[0].channel && data.facsimile\">\n              <paper-button raised=\"\" (click)=\"displayIndex()\"\n                >{{ !isDisplayed ? 'Mostra nomi / luoghi / motivi' : 'Nascondi nomi / luoghi / motivi'\n                }}</paper-button\n              >\n            </ng-container>\n       \n\n            <!-- <pb-search id=\"search-form\" action=\"search.search\" submitOnLoad=\"true\" data-template=\"pages:parse-params\">\n              <div class=\"buttons\">\n                  <paper-button slot=\"searchButton\"><pb-i18n key=\"search.search\"></pb-i18n></paper-button>\n                  <paper-button slot=\"resetButton\"><pb-i18n key=\"search.reset\"></pb-i18n></paper-button>\n              </div>\n            </pb-search>\n            <pb-load class=\"hidden\" url=\"api/search?query=Accompagnati&da&Alchifa&action=search\" auto=\"true\"></pb-load> -->\n\n            \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        <!-- <pb-drawer\n          toggle=\"tocToggle\"\n          class=\"tocDrawer\"\n          emit=\"toc\"\n          subscribe=\"transcription\"\n        >\n          <div class=\"drawer-content\">\n            <h3>\n              <pb-i18n key=\"document.contents\">Contents</pb-i18n>\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              ><pb-i18n key=\"dialogs.loading\">Loading</pb-i18n></pb-load\n            >\n          </div>\n        </pb-drawer> -->\n        <pb-drawer\n          toggle=\"tocToggle\"\n          class=\"tocDrawer\"\n          emit=\"toc\"\n          subscribe=\"transcription\"\n        >\n          <div class=\"drawer-content\">\n            <h3>\n              <pb-i18n key=\"document.contents\">Contents</pb-i18n>\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              ><pb-i18n key=\"dialogs.loading\">Loading</pb-i18n></pb-load\n            >\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              *ngIf=\"doc.channel && !doc.translation\"\n              (click)=\"displayIndex()\"\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\n              *ngIf=\"doc.channel && !doc.translation\"\n            >\n              <!--  -->\n              <pb-view\n                [hidden]=\"!isDisplayed\"\n                *ngIf=\"doc.channel && !doc.translation\"\n                [src]=\"doc.id\"\n                [odd]=\"doc.odd\"\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\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: "<!-- NEW -->\n<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-load url=\"api/search\"></pb-load> -->\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    <!-- <pb-load url=\"api/mrcsearch?query=lepre&collection=murucademo\"></pb-load> -->\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          <!-- <pb-login id=\"loginElem\" auto=\"false\"></pb-login> -->\n          <app-toolbar\n            class=\"toolbar\"\n            sticky=\"sticky\"\n            style=\"transform: translate3d(0px, 0px, 0px)\"\n          >\n            <paper-icon-button\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 *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              <pb-i18n key=\"document.plain\">Plain Reading View</pb-i18n>\n            </pb-toggle-feature>\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            <!-- *ngIf=\"data.docs.length > 1\" -->\n            <pb-select-feature *ngIf=\"data.docs.length > 1\"\n              id=\"select-view1\"\n              name=\"view1\"\n              label=\"View\"\n              items='[\n                    {\"name\": \"View All Named Entities\", \"selectors\": [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": false}]},\n      {\"name\": \"View People\", \"selectors\": [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": true}]},\n      {\"name\": \"View Places\", \"selectors\": [{\"selector\": \".place\", \"state\": false}, {\"selector\": \".person\", \"state\": true}]}\n        ]'\n              subscribe=\"addChannel\"\n              emit=\"addChannel\"\n            ></pb-select-feature>\n           \n            <pb-download\n              *ngIf=\"data.docs && data.docs.length > 1\"\n              type=\"epub\"\n              [src]=\"data.docs[0].id\"\n              dialog=\"downloadDialog\"\n              title=\"Download ePub\"\n            >\n              <paper-button raised=\"\">Download ePub</paper-button>\n            </pb-download>\n\n\n            \n            <!-- <pb-search id=\"search-form\" action=\"search.search\" submitOnLoad=\"true\" data-template=\"pages:parse-params\">\n              <div class=\"buttons\">\n                  <paper-button slot=\"searchButton\"><pb-i18n key=\"search.search\"></pb-i18n></paper-button>\n                  <paper-button slot=\"resetButton\"><pb-i18n key=\"search.reset\"></pb-i18n></paper-button>\n              </div>\n            </pb-search>\n            <pb-load class=\"hidden\" url=\"api/search?query=Accompagnati&da&Alchifa&action=search\" auto=\"true\"></pb-load> -->\n            \n            \n            \n            <ng-container *ngIf=\"!data.docs[0].translation\">\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            <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        <pb-drawer\n          toggle=\"tocToggle\"\n          class=\"tocDrawer\"\n          emit=\"toc\"\n          subscribe=\"transcription\"\n        >\n          <div class=\"drawer-content\">\n            <h3>\n              <pb-i18n key=\"document.contents\">Contents</pb-i18n>\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              ><pb-i18n key=\"dialogs.loading\">Loading</pb-i18n></pb-load\n            > -->\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              *ngIf=\"doc.channel && !doc.translation\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              emit=\"addChannel\"\n              subscribe=\"addChannel\"\n              view=\"{{ doc.view }}\"\n            >\n              <pb-param name=\"mode\" value=\"commentary\"></pb-param>\n            </pb-view>\n          </ng-container>\n        </main>\n      </app-header-layout>\n    </app-drawer-layout>\n  </pb-page>\n</div>\n" }]
+            args: [{ selector: 'n7-text-viewer', template: "<!-- NEW -->\n<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-load url=\"api/search\"></pb-load> -->\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    <!-- <pb-load url=\"api/mrcsearch?query=lepre&collection=murucademo\"></pb-load> -->\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          <!-- <pb-login id=\"loginElem\" auto=\"false\"></pb-login> -->\n          <app-toolbar\n            class=\"toolbar\"\n            sticky=\"sticky\"\n            style=\"transform: translate3d(0px, 0px, 0px)\"\n          >\n            <paper-icon-button\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              <pb-i18n key=\"document.plain\">Plain Reading View</pb-i18n>\n            </pb-toggle-feature>\n\n            <pb-download\n              *ngIf=\"data.docs && data.docs.length > 1\"\n              type=\"epub\"\n              [src]=\"data.docs[0].id\"\n              [url]=\"data.docs[0].download\"\n              dialog=\"downloadDialog\"\n              title=\"Download ePub\"\n            >\n              <paper-button raised=\"\">Download eBook</paper-button>\n            </pb-download>\n\n            <!-- <pb-download\n              *ngIf=\"data.docs && data.docs.length > 1\"\n              type=\"txt\"\n              [src]=\"data.docs[0].id\"\n              url=\"https://www.gutenberg.org/cache/epub/67735/pg67735.txt\"\n              dialog=\"downloadDialog\"\n              title=\"Download TXT\"\n            >\n              <paper-button raised=\"\">Download TXT</paper-button>\n            </pb-download>\n\n            <pb-download\n              *ngIf=\"data.docs && data.docs.length > 1\"\n              type=\"xml\"\n              [src]=\"data.docs[0].id\"\n              url=\"https://www.gutenberg.org/cache/epub/67735/pg67735.txt\"\n              dialog=\"downloadDialog\"\n              title=\"Download XML\"\n            >\n              <paper-button raised=\"\">Download XML</paper-button>\n            </pb-download> -->\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\n            <ng-container *ngIf=\"!data.docs[0].translation\">\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            <!-- *ngIf=\"data.docs.length > 1\" -->\n            <pb-select-feature\n              *ngIf=\"data.docs.length > 1\"\n              id=\"select-view2\"\n              name=\"view2\"\n              label=\"View\"\n              items='[\n                    {\"name\": \"View All Named Entities\", \"selectors\": [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": false}]},\n      {\"name\": \"View People\", \"selectors\": [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": true}]},\n      {\"name\": \"View Places\", \"selectors\": [{\"selector\": \".place\", \"state\": false}, {\"selector\": \".person\", \"state\": true}]}\n        ]'\n              subscribe=\"addChannel\"\n              emit=\"addChannel\"\n            ></pb-select-feature>\n\n           \n            <ng-container *ngIf=\"data.docs.length > 1 && data.docs[0].channel && data.facsimile\">\n              <paper-button raised=\"\" (click)=\"displayIndex()\"\n                >{{ !isDisplayed ? 'Mostra nomi / luoghi / motivi' : 'Nascondi nomi / luoghi / motivi'\n                }}</paper-button\n              >\n            </ng-container>\n       \n\n            <!-- <pb-search id=\"search-form\" action=\"search.search\" submitOnLoad=\"true\" data-template=\"pages:parse-params\">\n              <div class=\"buttons\">\n                  <paper-button slot=\"searchButton\"><pb-i18n key=\"search.search\"></pb-i18n></paper-button>\n                  <paper-button slot=\"resetButton\"><pb-i18n key=\"search.reset\"></pb-i18n></paper-button>\n              </div>\n            </pb-search>\n            <pb-load class=\"hidden\" url=\"api/search?query=Accompagnati&da&Alchifa&action=search\" auto=\"true\"></pb-load> -->\n\n            \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        <!-- <pb-drawer\n          toggle=\"tocToggle\"\n          class=\"tocDrawer\"\n          emit=\"toc\"\n          subscribe=\"transcription\"\n        >\n          <div class=\"drawer-content\">\n            <h3>\n              <pb-i18n key=\"document.contents\">Contents</pb-i18n>\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              ><pb-i18n key=\"dialogs.loading\">Loading</pb-i18n></pb-load\n            >\n          </div>\n        </pb-drawer> -->\n        <pb-drawer\n          toggle=\"tocToggle\"\n          class=\"tocDrawer\"\n          emit=\"toc\"\n          subscribe=\"transcription\"\n        >\n          <div class=\"drawer-content\">\n            <h3>\n              <pb-i18n key=\"document.contents\">Contents</pb-i18n>\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              ><pb-i18n key=\"dialogs.loading\">Loading</pb-i18n></pb-load\n            >\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              *ngIf=\"doc.channel && !doc.translation\"\n              (click)=\"displayIndex()\"\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\n              *ngIf=\"doc.channel && !doc.translation\"\n            >\n              <!--  -->\n              <pb-view\n                [hidden]=\"!isDisplayed\"\n                *ngIf=\"doc.channel && !doc.translation\"\n                [src]=\"doc.id\"\n                [odd]=\"doc.odd\"\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\n" }]
         }], propDecorators: { data: [{
                 type: Input
             }], emit: [{
@@ -6603,6 +6613,16 @@ const FOOTER_MOCK = {
         },
         {
             text: 'Arianna Web is powered by Hyperborea.<br><a href="#" target="_blank">www.hyperborea.com</a>',
+            selects: [{
+                    id: 'language',
+                    label: 'Select language',
+                    options: [
+                        { value: 'en', label: 'English' },
+                        { value: 'it', label: 'Italian' },
+                        { value: 'de', label: 'German' }
+                    ],
+                    payload: 'language'
+                }],
         }
     ]
 };
@@ -6656,6 +6676,16 @@ const HEADER_MOCK = {
             anchor: { payload: '/facebook' }
         }
     ],
+    selects: [{
+            id: 'language',
+            // label: 'Language',
+            options: [
+                { value: 'en', label: 'English' },
+                { value: 'it', label: 'Italian' },
+                { value: 'de', label: 'German' }
+            ],
+            payload: 'language'
+        }],
     buttons: [
         {
             text: 'Log In',
@@ -7217,7 +7247,7 @@ const ITEM_PREVIEW_MOCK = {
         href: '/examples',
         target: '_blank'
     },
-    classes: 'is-vertical has-image' // leave it empty for default horizontal layout or 'is-overlay'
+    classes: 'is-vertical is-frontpage has-image' // leave it empty for default horizontal layout or 'is-overlay'
 };
 
 const LOADER_MOCK = {
@@ -7676,37 +7706,41 @@ const TEXT_VIEWER_MOCK = {
     // endpoint: 'https://teipublisher.com/exist/apps/tei-publisher',
     docs: [
         // {
-        //   xml: 'playground/seniles_4.xml',
-        //   odd: 'muruca_1-0',
-        //   id: 'seniles',
+        //   xml: 'petrarca/seniles-1_1649330076.xml',
+        //   odd: 'petrarca_1-1',
+        //   id: 'seniles_5',
         //   view: 'div'
         // },
-        {
-            xml: 'murucademo/La_volpe_e_l_uva_1615547140.xml',
-            odd: 'demo_1-0',
-            id: 'seniles',
-            view: 'div',
-            channel: 'altrochannel',
-            translation: true
-        },
         // {
-        //   xml: 'playground/131_SFERAMUNDI1_1606152901..xml',
-        //   odd: 'sferamundi_1-0',
+        //   xml: 'murucademo/La_volpe_e_l_uva_1615547140.xml',
+        //   odd: 'demo_1-0',
         //   id: 'seniles',
-        //   view: 'page'
-        // },
-        // {
-        //   xml: 'playground/sferacomm.xml',
-        //   odd: 'sferamundi_1-0',
-        //   id: 'seniles2',
-        //   view: 'page',
-        //   channel: 'altrochannel'
+        //   view: 'div',
+        //   channel: 'altrochannel',
+        //   translation: true
         // },
+        {
+            // xml: 'mambrino/13_1_sm1_primi10caps-2_1623837525.xml',
+            xml: 'mambrino/SM1_source_def2.xml',
+            odd: 'test_index',
+            id: 'seniles',
+            view: 'page',
+            download: ''
+        },
+        {
+            xml: 'test/graves6.xml',
+            // xml: 'mambrino/SM1_commentary_def2.xml',
+            odd: 'test_index',
+            id: 'seniles2',
+            view: 'page',
+            channel: 'altrochannel'
+        },
     ],
-    // facsimile: {
-    //   uri: 'http://127.0.0.1:8182/iiif/2/',
-    //   scans: ['001r.tif', '001v.tif', '002r.tif', '002v.tif']
-    // }
+    facsimile: {
+        // uri: 'https://test-01.dlls.univr.it/cantaloupe/iiif/3/mambrino%2FCICLO%20DI%20AMADIS%2F13_2%20SFERAMUNDI%202%2F1560%20BNE%2F',
+        uri: 'http://127.0.0.1:8182/iiif/3/',
+        scans: []
+    }
 };
 
 const TIMELINE_MOCK = {