@net7/components 3.7.0 → 3.8.0

package/fesm2015/net7-components.mjs

@@ -73,6 +73,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 type: Input
             }] } });
 
+//---------------------------
+class AvatarComponent {
+    onClick(payload) {
+        if (!this.emit)
+            return;
+        this.emit('click', payload);
+    }
+    onMouseEnter(payload) {
+        if (!this.emit)
+            return;
+        this.emit('mouseenter', payload);
+    }
+    onMouseLeave(payload) {
+        if (!this.emit)
+            return;
+        this.emit('mouseleave', payload);
+    }
+}
+AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AvatarComponent, selector: "n7-avatar", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div class=\"n7-avatar {{data.classes || ''}}\"\n     *ngIf=\"data\"\n     (click)=\"onClick(data.payload)\"\n     (mouseenter)=\"onMouseEnter(data.payload)\"\n     (mouseleave)=\"onMouseLeave(data.payload)\">\n    <div *ngIf=\"data.image\"\n         [ngClass]=\"'n7-avatar__background'\"\n         [ngStyle]=\"{\n            'background-image': 'url('+data.image.src+')',\n            'height': data.size,\n            'width': data.size\n            }\">\n    </div>\n    <div *ngIf=\"!data.image\"\n        [ngClass]=\"'n7-avatar__background'\"\n        [ngStyle]=\"{\n            'background': data.color,\n            'height': data.size,\n            'width': data.size\n        }\">\n        <p class=\"n7-avatar__label\" [ngStyle]=\"{\n            'color': data.labelColor || 'black',\n            'font-size': 'calc(' + data.size +  ' / 2)'\n            \n        }\">\n            {{ data.label }}\n        </p>\n    </div>\n</div>\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: AvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'n7-avatar', template: "<div class=\"n7-avatar {{data.classes || ''}}\"\n     *ngIf=\"data\"\n     (click)=\"onClick(data.payload)\"\n     (mouseenter)=\"onMouseEnter(data.payload)\"\n     (mouseleave)=\"onMouseLeave(data.payload)\">\n    <div *ngIf=\"data.image\"\n         [ngClass]=\"'n7-avatar__background'\"\n         [ngStyle]=\"{\n            'background-image': 'url('+data.image.src+')',\n            'height': data.size,\n            'width': data.size\n            }\">\n    </div>\n    <div *ngIf=\"!data.image\"\n        [ngClass]=\"'n7-avatar__background'\"\n        [ngStyle]=\"{\n            'background': data.color,\n            'height': data.size,\n            'width': data.size\n        }\">\n        <p class=\"n7-avatar__label\" [ngStyle]=\"{\n            'color': data.labelColor || 'black',\n            'font-size': 'calc(' + data.size +  ' / 2)'\n            \n        }\">\n            {{ data.label }}\n        </p>\n    </div>\n</div>\n" }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], emit: [{
+                type: Input
+            }] } });
+
 //---------------------------
 class BreadcrumbsComponent {
     onClick(payload) {
@@ -521,10 +550,10 @@ class CarouselComponent {
     }
 }
 CarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: CarouselComponent, selector: "n7-carousel", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<button *ngIf=\"data && data.classes === 'demo'\"\n        class=\"n7-btn\"\n        (click)=\"api.load.videos()\">api.load.videos()</button>\n\n<div *ngIf=\"data\"\n     class=\"n7-carousel {{ data.classes || '' }}\">\n  <!-- Warning: Do not style div.latte-carousel -->\n  <div id=\"{{data.containerId}}\"\n       class=\"latte-carousel\">\n    <ng-container *ngFor=\"let slide of data.slides; let index = index;\">\n      <ng-container *ngTemplateOutlet=\"carouselSlide; context:{slide: slide, index: index}\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<!-- ===== SLIDE WRAPPER ===== -->\n<ng-template #carouselSlide\n             let-slide=\"slide\"\n             let-slideID=\"index\">\n  <!-- Warning: Do not style div.latte-item -->\n  <div class=\"latte-item\">\n    <div class=\"n7-carousel__slide {{ slide.classes || ''}}\"\n         [ngClass]=\"{ 'has-image' : slide.background.image, 'has-video': slide.background.video }\"\n         [style.background-color]=\"slide.background.color ? slide.background.color : ''\"\n         [style.background-image]=\"slide.background.image ? 'url('+slide.background.image+')' : ''\">\n      <div class=\"n7-carousel__slide-content-wrapper\">\n        <div class=\"n7-carousel__slide-content\">\n          <div class=\"n7-carousel__slide-content-left\">\n            <ng-container *ngTemplateOutlet=\"slideForeground; context:{items: slide.items, slideID: slideID}\">\n            </ng-container>\n          </div>\n          <div class=\"n7-carousel__slide-content-right\"\n               *ngIf=\"slide.action\">\n            <n7-anchor-wrapper [data]=\"slide.action.anchor\"\n                               (clicked)=\"onClick($event)\">\n              <!-- Button ID's are used to dynamically reattach events after loading the carousel -->\n              <button id=\"{{data.containerId}}-{{slideID}}\"\n                      class=\"n7-hero__btn n7-btn n7-btn-cta n7-btn-l\">\n                {{slide.action.text}}\n              </button>\n            </n7-anchor-wrapper>\n          </div>\n        </div>\n      </div>\n      <ng-container *ngIf=\"slide.background\">\n        <ng-container *ngTemplateOutlet=\"slideBackground; context:{$implicit: slide.background}\">\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<!-- ===== SLIDE FOREGROUND ===== -->\n<ng-template #slideForeground\n             let-items=\"items\"\n             let-slideID=\"slideID\">\n  <ng-container *ngFor=\"let el of items; let itemID = index\">\n    <h1 class=\"n7-carousel__slide-title\"\n        *ngIf=\"el.title\">{{el.title}}</h1>\n    <div class=\"n7-carousel__slide-text\"\n          *ngIf=\"el.text\" [innerHTML]=\"el.text\"></div>\n    <div class=\"n7-carousel__slide-metadata-wrapper\"\n         *ngIf=\"el.metadata\">\n      <ng-container *ngFor=\"let m of el.metadata\">\n        <div class=\"n7-carousel__slide-metadata\">\n            <span class=\"n7-carousel__slide-metadata-label\"\n              *ngIf=\"m.key\">{{m.key}}</span>\n            <span class=\"n7-carousel__slide-metadata-value\"\n              *ngIf=\"m.value\">{{m.value}}</span>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n</ng-template>\n\n<!-- ===== VIDEO BACKGROUND ===== -->\n<ng-template #slideBackground\n             let-bg>\n  <ng-container *ngIf=\"bg.video as v\">\n    <video #video\n           class=\"n7-carousel__slide-video\"\n           [poster]=\"v.poster\"\n           [height]=\"v.height\"\n           [width]=\"v.width\"\n           loop\n           muted\n           autoplay\n           playsinline>\n      <source #source\n              class=\"lazy\"\n              [attr.data-src]=\"v.url\"\n              type=\"video/mp4\">\n    </video>\n    <div class=\"n7-carousel__slide-video-overlay\">\n\n    </div>\n  </ng-container>\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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+CarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: CarouselComponent, selector: "n7-carousel", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<button *ngIf=\"data && data.classes === 'demo'\"\n        class=\"n7-btn\"\n        (click)=\"api.load.videos()\">api.load.videos()</button>\n\n<div *ngIf=\"data\"\n     class=\"n7-carousel {{ data.classes || '' }}\">\n  <!-- Warning: Do not style div.latte-carousel -->\n  <div id=\"{{data.containerId}}\"\n       class=\"latte-carousel\">\n    <ng-container *ngFor=\"let slide of data.slides; let index = index;\">\n      <ng-container *ngTemplateOutlet=\"carouselSlide; context:{slide: slide, index: index}\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<!-- ===== SLIDE WRAPPER ===== -->\n<ng-template #carouselSlide\n             let-slide=\"slide\"\n             let-slideID=\"index\">\n  <!-- Warning: Do not style div.latte-item -->\n  <div class=\"latte-item\">\n    <div class=\"n7-carousel__slide {{ slide.classes || ''}}\"\n         [ngClass]=\"{ 'has-image' : slide.background.image, 'has-video': slide.background.video }\"\n         [style.background-color]=\"slide.background.color ? slide.background.color : ''\"\n         [style.background-image]=\"slide.background.image ? 'url('+slide.background.image+')' : ''\">\n      <div class=\"n7-carousel__slide-content-wrapper\">\n        <div class=\"n7-carousel__slide-content\">\n          <div class=\"n7-carousel__slide-content-left\">\n            <ng-container *ngTemplateOutlet=\"slideForeground; context:{items: slide.items, slideID: slideID}\">\n            </ng-container>\n          </div>\n          <div class=\"n7-carousel__slide-content-right\"\n               *ngIf=\"slide.action\">\n            <n7-anchor-wrapper [data]=\"slide.action.anchor\"\n                               (clicked)=\"onClick($event)\">\n              <!-- Button ID's are used to dynamically reattach events after loading the carousel -->\n              <button id=\"{{data.containerId}}-{{slideID}}\"\n                      class=\"n7-hero__btn n7-btn n7-btn-cta n7-btn-l\">\n                {{slide.action.text}}\n              </button>\n            </n7-anchor-wrapper>\n            <ng-container *ngTemplateOutlet=\"sideImage; context:{items: slide.items, slideID: slideID}\">\n            </ng-container>\n          </div>\n\n        </div>\n      </div>\n      <ng-container *ngIf=\"slide.background\">\n        <ng-container *ngTemplateOutlet=\"slideBackground; context:{$implicit: slide.background}\">\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<!-- ===== SLIDE FOREGROUND ===== -->\n<ng-template #slideForeground\n             let-items=\"items\"\n             let-slideID=\"slideID\">\n  <ng-container *ngFor=\"let el of items; let itemID = index\">\n    <!-- title -->\n    <h1 class=\"n7-carousel__slide-title\"\n        *ngIf=\"el.title\">{{el.title}}</h1>\n    <!-- text -->\n    <div class=\"n7-carousel__slide-text\"\n          *ngIf=\"el.text\" [innerHTML]=\"el.text\"></div>\n    <!-- image -->\n    <ng-container *ngIf=\"el.image as img\">\n        <img class=\"n7-carousel__slide-img\" [src]=\"img.src\" [alt]=\"img.alt ?? ''\" [ngClass]=\"img.classes\">\n    </ng-container>\n    <!-- metadata -->\n    <div class=\"n7-carousel__slide-metadata-wrapper\"\n         *ngIf=\"el.metadata\">\n      <ng-container *ngFor=\"let m of el.metadata\">\n        <div class=\"n7-carousel__slide-metadata\">\n            <span class=\"n7-carousel__slide-metadata-label\"\n              *ngIf=\"m.key\">{{m.key}}</span>\n            <span class=\"n7-carousel__slide-metadata-value\"\n              *ngIf=\"m.value\">{{m.value}}</span>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n</ng-template>\n\n\n<!-- ===== SIDE IMAGE ===== -->\n<ng-template #sideImage\n             let-items=\"items\"\n             let-slideID=\"slideID\">\n  <ng-container *ngFor=\"let el of items; let itemID = index\">   \n    <!-- image -->\n    <ng-container *ngIf=\"el.image as img\">\n        <img class=\"n7-carousel__side-img\" [src]=\"img.src\" [alt]=\"img.alt ?? ''\" [ngClass]=\"img.classes\">\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<!-- ===== VIDEO BACKGROUND ===== -->\n<ng-template #slideBackground\n             let-bg>\n  <ng-container *ngIf=\"bg.video as v\">\n    <video #video\n           class=\"n7-carousel__slide-video\"\n           [poster]=\"v.poster\"\n           [height]=\"v.height\"\n           [width]=\"v.width\"\n           loop\n           muted\n           autoplay\n           playsinline>\n      <source #source\n              class=\"lazy\"\n              [attr.data-src]=\"v.url\"\n              type=\"video/mp4\">\n    </video>\n    <div class=\"n7-carousel__slide-video-overlay\">\n\n    </div>\n  </ng-container>\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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'n7-carousel', template: "<button *ngIf=\"data && data.classes === 'demo'\"\n        class=\"n7-btn\"\n        (click)=\"api.load.videos()\">api.load.videos()</button>\n\n<div *ngIf=\"data\"\n     class=\"n7-carousel {{ data.classes || '' }}\">\n  <!-- Warning: Do not style div.latte-carousel -->\n  <div id=\"{{data.containerId}}\"\n       class=\"latte-carousel\">\n    <ng-container *ngFor=\"let slide of data.slides; let index = index;\">\n      <ng-container *ngTemplateOutlet=\"carouselSlide; context:{slide: slide, index: index}\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<!-- ===== SLIDE WRAPPER ===== -->\n<ng-template #carouselSlide\n             let-slide=\"slide\"\n             let-slideID=\"index\">\n  <!-- Warning: Do not style div.latte-item -->\n  <div class=\"latte-item\">\n    <div class=\"n7-carousel__slide {{ slide.classes || ''}}\"\n         [ngClass]=\"{ 'has-image' : slide.background.image, 'has-video': slide.background.video }\"\n         [style.background-color]=\"slide.background.color ? slide.background.color : ''\"\n         [style.background-image]=\"slide.background.image ? 'url('+slide.background.image+')' : ''\">\n      <div class=\"n7-carousel__slide-content-wrapper\">\n        <div class=\"n7-carousel__slide-content\">\n          <div class=\"n7-carousel__slide-content-left\">\n            <ng-container *ngTemplateOutlet=\"slideForeground; context:{items: slide.items, slideID: slideID}\">\n            </ng-container>\n          </div>\n          <div class=\"n7-carousel__slide-content-right\"\n               *ngIf=\"slide.action\">\n            <n7-anchor-wrapper [data]=\"slide.action.anchor\"\n                               (clicked)=\"onClick($event)\">\n              <!-- Button ID's are used to dynamically reattach events after loading the carousel -->\n              <button id=\"{{data.containerId}}-{{slideID}}\"\n                      class=\"n7-hero__btn n7-btn n7-btn-cta n7-btn-l\">\n                {{slide.action.text}}\n              </button>\n            </n7-anchor-wrapper>\n          </div>\n        </div>\n      </div>\n      <ng-container *ngIf=\"slide.background\">\n        <ng-container *ngTemplateOutlet=\"slideBackground; context:{$implicit: slide.background}\">\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<!-- ===== SLIDE FOREGROUND ===== -->\n<ng-template #slideForeground\n             let-items=\"items\"\n             let-slideID=\"slideID\">\n  <ng-container *ngFor=\"let el of items; let itemID = index\">\n    <h1 class=\"n7-carousel__slide-title\"\n        *ngIf=\"el.title\">{{el.title}}</h1>\n    <div class=\"n7-carousel__slide-text\"\n          *ngIf=\"el.text\" [innerHTML]=\"el.text\"></div>\n    <div class=\"n7-carousel__slide-metadata-wrapper\"\n         *ngIf=\"el.metadata\">\n      <ng-container *ngFor=\"let m of el.metadata\">\n        <div class=\"n7-carousel__slide-metadata\">\n            <span class=\"n7-carousel__slide-metadata-label\"\n              *ngIf=\"m.key\">{{m.key}}</span>\n            <span class=\"n7-carousel__slide-metadata-value\"\n              *ngIf=\"m.value\">{{m.value}}</span>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n</ng-template>\n\n<!-- ===== VIDEO BACKGROUND ===== -->\n<ng-template #slideBackground\n             let-bg>\n  <ng-container *ngIf=\"bg.video as v\">\n    <video #video\n           class=\"n7-carousel__slide-video\"\n           [poster]=\"v.poster\"\n           [height]=\"v.height\"\n           [width]=\"v.width\"\n           loop\n           muted\n           autoplay\n           playsinline>\n      <source #source\n              class=\"lazy\"\n              [attr.data-src]=\"v.url\"\n              type=\"video/mp4\">\n    </video>\n    <div class=\"n7-carousel__slide-video-overlay\">\n\n    </div>\n  </ng-container>\n</ng-template>\n" }]
+            args: [{ selector: 'n7-carousel', template: "<button *ngIf=\"data && data.classes === 'demo'\"\n        class=\"n7-btn\"\n        (click)=\"api.load.videos()\">api.load.videos()</button>\n\n<div *ngIf=\"data\"\n     class=\"n7-carousel {{ data.classes || '' }}\">\n  <!-- Warning: Do not style div.latte-carousel -->\n  <div id=\"{{data.containerId}}\"\n       class=\"latte-carousel\">\n    <ng-container *ngFor=\"let slide of data.slides; let index = index;\">\n      <ng-container *ngTemplateOutlet=\"carouselSlide; context:{slide: slide, index: index}\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<!-- ===== SLIDE WRAPPER ===== -->\n<ng-template #carouselSlide\n             let-slide=\"slide\"\n             let-slideID=\"index\">\n  <!-- Warning: Do not style div.latte-item -->\n  <div class=\"latte-item\">\n    <div class=\"n7-carousel__slide {{ slide.classes || ''}}\"\n         [ngClass]=\"{ 'has-image' : slide.background.image, 'has-video': slide.background.video }\"\n         [style.background-color]=\"slide.background.color ? slide.background.color : ''\"\n         [style.background-image]=\"slide.background.image ? 'url('+slide.background.image+')' : ''\">\n      <div class=\"n7-carousel__slide-content-wrapper\">\n        <div class=\"n7-carousel__slide-content\">\n          <div class=\"n7-carousel__slide-content-left\">\n            <ng-container *ngTemplateOutlet=\"slideForeground; context:{items: slide.items, slideID: slideID}\">\n            </ng-container>\n          </div>\n          <div class=\"n7-carousel__slide-content-right\"\n               *ngIf=\"slide.action\">\n            <n7-anchor-wrapper [data]=\"slide.action.anchor\"\n                               (clicked)=\"onClick($event)\">\n              <!-- Button ID's are used to dynamically reattach events after loading the carousel -->\n              <button id=\"{{data.containerId}}-{{slideID}}\"\n                      class=\"n7-hero__btn n7-btn n7-btn-cta n7-btn-l\">\n                {{slide.action.text}}\n              </button>\n            </n7-anchor-wrapper>\n            <ng-container *ngTemplateOutlet=\"sideImage; context:{items: slide.items, slideID: slideID}\">\n            </ng-container>\n          </div>\n\n        </div>\n      </div>\n      <ng-container *ngIf=\"slide.background\">\n        <ng-container *ngTemplateOutlet=\"slideBackground; context:{$implicit: slide.background}\">\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<!-- ===== SLIDE FOREGROUND ===== -->\n<ng-template #slideForeground\n             let-items=\"items\"\n             let-slideID=\"slideID\">\n  <ng-container *ngFor=\"let el of items; let itemID = index\">\n    <!-- title -->\n    <h1 class=\"n7-carousel__slide-title\"\n        *ngIf=\"el.title\">{{el.title}}</h1>\n    <!-- text -->\n    <div class=\"n7-carousel__slide-text\"\n          *ngIf=\"el.text\" [innerHTML]=\"el.text\"></div>\n    <!-- image -->\n    <ng-container *ngIf=\"el.image as img\">\n        <img class=\"n7-carousel__slide-img\" [src]=\"img.src\" [alt]=\"img.alt ?? ''\" [ngClass]=\"img.classes\">\n    </ng-container>\n    <!-- metadata -->\n    <div class=\"n7-carousel__slide-metadata-wrapper\"\n         *ngIf=\"el.metadata\">\n      <ng-container *ngFor=\"let m of el.metadata\">\n        <div class=\"n7-carousel__slide-metadata\">\n            <span class=\"n7-carousel__slide-metadata-label\"\n              *ngIf=\"m.key\">{{m.key}}</span>\n            <span class=\"n7-carousel__slide-metadata-value\"\n              *ngIf=\"m.value\">{{m.value}}</span>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n</ng-template>\n\n\n<!-- ===== SIDE IMAGE ===== -->\n<ng-template #sideImage\n             let-items=\"items\"\n             let-slideID=\"slideID\">\n  <ng-container *ngFor=\"let el of items; let itemID = index\">   \n    <!-- image -->\n    <ng-container *ngIf=\"el.image as img\">\n        <img class=\"n7-carousel__side-img\" [src]=\"img.src\" [alt]=\"img.alt ?? ''\" [ngClass]=\"img.classes\">\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<!-- ===== VIDEO BACKGROUND ===== -->\n<ng-template #slideBackground\n             let-bg>\n  <ng-container *ngIf=\"bg.video as v\">\n    <video #video\n           class=\"n7-carousel__slide-video\"\n           [poster]=\"v.poster\"\n           [height]=\"v.height\"\n           [width]=\"v.width\"\n           loop\n           muted\n           autoplay\n           playsinline>\n      <source #source\n              class=\"lazy\"\n              [attr.data-src]=\"v.url\"\n              type=\"video/mp4\">\n    </video>\n    <div class=\"n7-carousel__slide-video-overlay\">\n\n    </div>\n  </ng-container>\n</ng-template>\n" }]
         }], propDecorators: { data: [{
                 type: Input
             }], emit: [{
@@ -589,10 +618,10 @@ class DataWidgetComponent {
     }
 }
 DataWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DataWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DataWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DataWidgetComponent, selector: "n7-data-widget", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-data-widget {{ data.classes || '' }}\">\n    <div class=\"n7-data-widget__main\">\n        <span *ngIf=\"data.icon\"\n              class=\"n7-data-widget__main-icon {{data.icon}}\"\n              (mouseenter)=\"onMouseEnter(data.payload)\"\n              (mouseleave)=\"onMouseLeave(data.payload)\">\n        </span>\n        <h2 class=\"n7-data-widget__main-title\"\n            [innerHTML]=\"data.text\">\n        </h2>\n    </div>\n    \n    <div *ngIf=\"data.subtitle && (data.subtitle.text || data.subtitle.icon || data.subtitle.value)\"\n         class=\"n7-data-widget__sub\">\n        <p *ngIf=\"data.subtitle.text\"\n           class=\"n7-data-widget__sub-title\"\n           [innerHTML]=\"data.subtitle.text\">\n        </p>\n        <span *ngIf=\"data.subtitle.icon || data.subtitle.value\"\n              class=\"n7-data-widget__sub-info\"\n              (mouseenter)=\"onMouseEnter(data.subtitle.payload)\"\n              (mouseleave)=\"onMouseLeave(data.subtitle.payload)\">\n                <span *ngIf=\"data.subtitle.icon\"\n                class=\"n7-data-widget__sub-info-icon {{data.subtitle.icon}}\">\n          </span>\n          <span *ngIf=\"data.subtitle.value\"\n                class=\"n7-data-widget__sub-info-label\"\n                [innerHTML]=\"data.subtitle.value\">\n          </span>\n        </span>\n    </div>\n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+DataWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DataWidgetComponent, selector: "n7-data-widget", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-data-widget {{ data.classes || '' }}\">\n    <div class=\"n7-data-widget__main\">\n        <span *ngIf=\"data.icon\"\n              class=\"n7-data-widget__main-icon {{data.icon}}\"\n              (mouseenter)=\"onMouseEnter(data.payload)\"\n              (mouseleave)=\"onMouseLeave(data.payload)\">\n        </span>\n        <img class=\"n7-data-widget__second-icon\" *ngIf=\"data.imgIcon\"\n             [src]=\"data.imgIcon.path\"\n             [alt]=\"data.imgIcon.alt\"\n             (mouseenter)=\"onMouseEnter(data.payload)\"\n             (mouseleave)=\"onMouseLeave(data.payload)\">\n        <h2 class=\"n7-data-widget__main-title\"\n            [innerHTML]=\"data.text\">\n        </h2>\n    </div>\n    \n    <div *ngIf=\"data.subtitle && (data.subtitle.text || data.subtitle.icon || data.subtitle.value)\"\n         class=\"n7-data-widget__sub\">\n        <p *ngIf=\"data.subtitle.text\"\n           class=\"n7-data-widget__sub-title\"\n           [innerHTML]=\"data.subtitle.text\">\n        </p>\n        <span *ngIf=\"data.subtitle.icon || data.subtitle.value || data.subtitle.imgIcon\"\n              class=\"n7-data-widget__sub-info\"\n              (mouseenter)=\"onMouseEnter(data.subtitle.payload)\"\n              (mouseleave)=\"onMouseLeave(data.subtitle.payload)\">\n                <img *ngIf=\"data.subtitle.imgIcon\" \n                    [src]=\"data.subtitle.imgIcon.path\"\n                    [alt]=\"data.subtitle.imgIcon.alt\">\n                <span *ngIf=\"data.subtitle.icon\"\n                class=\"n7-data-widget__sub-info-icon {{data.subtitle.icon}}\">\n          </span>\n          <span *ngIf=\"data.subtitle.value\"\n                class=\"n7-data-widget__sub-info-label\"\n                [innerHTML]=\"data.subtitle.value\">\n          </span>\n        </span>\n    </div>\n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DataWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'n7-data-widget', template: "<div *ngIf=\"data\" class=\"n7-data-widget {{ data.classes || '' }}\">\n    <div class=\"n7-data-widget__main\">\n        <span *ngIf=\"data.icon\"\n              class=\"n7-data-widget__main-icon {{data.icon}}\"\n              (mouseenter)=\"onMouseEnter(data.payload)\"\n              (mouseleave)=\"onMouseLeave(data.payload)\">\n        </span>\n        <h2 class=\"n7-data-widget__main-title\"\n            [innerHTML]=\"data.text\">\n        </h2>\n    </div>\n    \n    <div *ngIf=\"data.subtitle && (data.subtitle.text || data.subtitle.icon || data.subtitle.value)\"\n         class=\"n7-data-widget__sub\">\n        <p *ngIf=\"data.subtitle.text\"\n           class=\"n7-data-widget__sub-title\"\n           [innerHTML]=\"data.subtitle.text\">\n        </p>\n        <span *ngIf=\"data.subtitle.icon || data.subtitle.value\"\n              class=\"n7-data-widget__sub-info\"\n              (mouseenter)=\"onMouseEnter(data.subtitle.payload)\"\n              (mouseleave)=\"onMouseLeave(data.subtitle.payload)\">\n                <span *ngIf=\"data.subtitle.icon\"\n                class=\"n7-data-widget__sub-info-icon {{data.subtitle.icon}}\">\n          </span>\n          <span *ngIf=\"data.subtitle.value\"\n                class=\"n7-data-widget__sub-info-label\"\n                [innerHTML]=\"data.subtitle.value\">\n          </span>\n        </span>\n    </div>\n</div>\n" }]
+            args: [{ selector: 'n7-data-widget', template: "<div *ngIf=\"data\" class=\"n7-data-widget {{ data.classes || '' }}\">\n    <div class=\"n7-data-widget__main\">\n        <span *ngIf=\"data.icon\"\n              class=\"n7-data-widget__main-icon {{data.icon}}\"\n              (mouseenter)=\"onMouseEnter(data.payload)\"\n              (mouseleave)=\"onMouseLeave(data.payload)\">\n        </span>\n        <img class=\"n7-data-widget__second-icon\" *ngIf=\"data.imgIcon\"\n             [src]=\"data.imgIcon.path\"\n             [alt]=\"data.imgIcon.alt\"\n             (mouseenter)=\"onMouseEnter(data.payload)\"\n             (mouseleave)=\"onMouseLeave(data.payload)\">\n        <h2 class=\"n7-data-widget__main-title\"\n            [innerHTML]=\"data.text\">\n        </h2>\n    </div>\n    \n    <div *ngIf=\"data.subtitle && (data.subtitle.text || data.subtitle.icon || data.subtitle.value)\"\n         class=\"n7-data-widget__sub\">\n        <p *ngIf=\"data.subtitle.text\"\n           class=\"n7-data-widget__sub-title\"\n           [innerHTML]=\"data.subtitle.text\">\n        </p>\n        <span *ngIf=\"data.subtitle.icon || data.subtitle.value || data.subtitle.imgIcon\"\n              class=\"n7-data-widget__sub-info\"\n              (mouseenter)=\"onMouseEnter(data.subtitle.payload)\"\n              (mouseleave)=\"onMouseLeave(data.subtitle.payload)\">\n                <img *ngIf=\"data.subtitle.imgIcon\" \n                    [src]=\"data.subtitle.imgIcon.path\"\n                    [alt]=\"data.subtitle.imgIcon.alt\">\n                <span *ngIf=\"data.subtitle.icon\"\n                class=\"n7-data-widget__sub-info-icon {{data.subtitle.icon}}\">\n          </span>\n          <span *ngIf=\"data.subtitle.value\"\n                class=\"n7-data-widget__sub-info-label\"\n                [innerHTML]=\"data.subtitle.value\">\n          </span>\n        </span>\n    </div>\n</div>\n" }]
         }], propDecorators: { data: [{
                 type: Input
             }], emit: [{
@@ -796,10 +825,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    <!-- 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"] }] });
+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        <n7-avatar [data]=\"data.user\" [emit]=\"this.emit\"></n7-avatar>\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"] }, { type: AvatarComponent, selector: "n7-avatar", 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    <!-- 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" }]
+            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        <n7-avatar [data]=\"data.user\" [emit]=\"this.emit\"></n7-avatar>\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: [{
@@ -1488,12 +1517,17 @@ class NavComponent {
             return;
         this.emit('click', payload);
     }
+    onMouseEnter(payload) {
+        if (!this.emit)
+            return;
+        this.emit('mouseenter', payload);
+    }
 }
 NavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: NavComponent, selector: "n7-nav", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<nav class=\"n7-nav {{data.classes || ''}}\" *ngIf=\"data\">\n    <ul class=\"n7-nav__list\">\n        <n7-anchor-wrapper \n        *ngFor=\"let item of data.items\"\n        [data]=\"item.anchor\" \n        [classes]=\"'n7-nav__link'\" \n        (clicked)=\"onClick($event)\">\n            <li class=\"n7-nav__item {{ item.classes || '' }}\">\n                <img class=\"n7-nav__image\" *ngIf=\"item.image\" src=\"{{ item.image }}\">\n                <span class=\"n7-nav__icon {{ item.icon }}\" *ngIf=\"item.icon\"></span>\n                <span class=\"n7-nav__label\">{{ item.text }}</span>\n            </li>\n        </n7-anchor-wrapper>\n    </ul>\n</nav>", 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"] }] });
+NavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: NavComponent, selector: "n7-nav", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<nav class=\"n7-nav {{data.classes || ''}}\"\n     *ngIf=\"data\">\n    <ul class=\"n7-nav__list\">\n        <n7-anchor-wrapper *ngFor=\"let item of data.items\"\n                           [data]=\"item.anchor\"\n                           [classes]=\"'n7-nav__link'\"\n                           (clicked)=\"onClick($event)\">\n            <li class=\"n7-nav__item {{ item.classes || '' }}\">\n                <!-- image -->\n                <img class=\"n7-nav__image\"\n                     *ngIf=\"item.image\"\n                     src=\"{{ item.image }}\">\n                <!-- primary icon -->\n                <span class=\"n7-nav__icon {{ item.icon.id }}\"\n                      *ngIf=\"item.icon\"\n                      (mouseenter)=\"onMouseEnter(item.icon.payload)\"></span>\n                <!-- element label -->\n                <span class=\"n7-nav__label\">{{ item.text }}</span>\n                <!-- secondary icon -->\n                <span class=\"n7-nav__icon-secondary {{ item.iconSecondary.id }}\"\n                      *ngIf=\"item.iconSecondary\"\n                      (mouseenter)=\"onMouseEnter(item.iconSecondary.payload)\"></span>\n            </li>\n        </n7-anchor-wrapper>\n    </ul>\n</nav>\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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NavComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'n7-nav', template: "<nav class=\"n7-nav {{data.classes || ''}}\" *ngIf=\"data\">\n    <ul class=\"n7-nav__list\">\n        <n7-anchor-wrapper \n        *ngFor=\"let item of data.items\"\n        [data]=\"item.anchor\" \n        [classes]=\"'n7-nav__link'\" \n        (clicked)=\"onClick($event)\">\n            <li class=\"n7-nav__item {{ item.classes || '' }}\">\n                <img class=\"n7-nav__image\" *ngIf=\"item.image\" src=\"{{ item.image }}\">\n                <span class=\"n7-nav__icon {{ item.icon }}\" *ngIf=\"item.icon\"></span>\n                <span class=\"n7-nav__label\">{{ item.text }}</span>\n            </li>\n        </n7-anchor-wrapper>\n    </ul>\n</nav>" }]
+            args: [{ selector: 'n7-nav', template: "<nav class=\"n7-nav {{data.classes || ''}}\"\n     *ngIf=\"data\">\n    <ul class=\"n7-nav__list\">\n        <n7-anchor-wrapper *ngFor=\"let item of data.items\"\n                           [data]=\"item.anchor\"\n                           [classes]=\"'n7-nav__link'\"\n                           (clicked)=\"onClick($event)\">\n            <li class=\"n7-nav__item {{ item.classes || '' }}\">\n                <!-- image -->\n                <img class=\"n7-nav__image\"\n                     *ngIf=\"item.image\"\n                     src=\"{{ item.image }}\">\n                <!-- primary icon -->\n                <span class=\"n7-nav__icon {{ item.icon.id }}\"\n                      *ngIf=\"item.icon\"\n                      (mouseenter)=\"onMouseEnter(item.icon.payload)\"></span>\n                <!-- element label -->\n                <span class=\"n7-nav__label\">{{ item.text }}</span>\n                <!-- secondary icon -->\n                <span class=\"n7-nav__icon-secondary {{ item.iconSecondary.id }}\"\n                      *ngIf=\"item.iconSecondary\"\n                      (mouseenter)=\"onMouseEnter(item.iconSecondary.payload)\"></span>\n            </li>\n        </n7-anchor-wrapper>\n    </ul>\n</nav>\n" }]
         }], propDecorators: { data: [{
                 type: Input
             }], emit: [{
@@ -1650,7 +1684,7 @@ class TextViewerComponent {
         setTimeout(() => {
             const key = target.__key;
             const element = document
-                .querySelector('body > app-root > components-examples > div > div:nth-child(4) > div > div > div > div > div.demo__component > n7-text-viewer > div > pb-page > app-drawer-layout > app-header-layout > main > pb-view:nth-child(4)')
+                .querySelector('#main-layout > div > main > mr-resource-layout > div > div.mr-resource__top > section.mr-resource__section.mr-resource__text-viewer > div > div > n7-text-viewer > div > pb-page > app-drawer-layout > app-header-layout > main > pb-view:nth-child(4)')
                 .shadowRoot.querySelector(`#${key}`);
             element.scrollIntoView({ behavior: 'smooth' });
         }, 300);
@@ -1693,10 +1727,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: "<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            <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 ? 'Vedi Comm.' : 'Vedi Indice'\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                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"] }] });
+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            <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                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            <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 ? 'Vedi Comm.' : 'Vedi Indice'\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                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" }]
+            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            <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                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: [{
@@ -1712,10 +1746,10 @@ class TagComponent {
     }
 }
 TagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TagComponent, selector: "n7-tag", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<span class=\"n7-tag {{data.classes || ''}}\" *ngIf=\"data\">\n    <span class=\"n7-tag__label\" *ngIf=\"data.label\">\n        {{ data.label }}\n    </span>\n    <span class=\"n7-tag__text\" *ngIf=\"data.text\">\n        {{ data.text }}\n    </span>\n    <span class=\"n7-tag__icon {{data.icon}}\" *ngIf=\"data.icon\" (click)=\"onClick(data.payload)\"></span>\n</span>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+TagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TagComponent, selector: "n7-tag", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<span class=\"n7-tag {{data.classes || ''}}\" *ngIf=\"data\">\n    <span class=\"n7-tag__icon {{data.preIcon.id}}\" *ngIf=\"data.preIcon?.id\" (click)=\"onClick(data.preIcon.payload)\"></span>\n    <span class=\"n7-tag__label\" *ngIf=\"data.label\">\n        {{ data.label }}\n    </span>\n    <span class=\"n7-tag__text\" *ngIf=\"data.text\">\n        {{ data.text }}\n    </span>\n    <span class=\"n7-tag__icon {{data.icon.id}}\" *ngIf=\"data.icon\" (click)=\"onClick(data.icon.payload)\"></span>\n</span>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'n7-tag', template: "<span class=\"n7-tag {{data.classes || ''}}\" *ngIf=\"data\">\n    <span class=\"n7-tag__label\" *ngIf=\"data.label\">\n        {{ data.label }}\n    </span>\n    <span class=\"n7-tag__text\" *ngIf=\"data.text\">\n        {{ data.text }}\n    </span>\n    <span class=\"n7-tag__icon {{data.icon}}\" *ngIf=\"data.icon\" (click)=\"onClick(data.payload)\"></span>\n</span>" }]
+            args: [{ selector: 'n7-tag', template: "<span class=\"n7-tag {{data.classes || ''}}\" *ngIf=\"data\">\n    <span class=\"n7-tag__icon {{data.preIcon.id}}\" *ngIf=\"data.preIcon?.id\" (click)=\"onClick(data.preIcon.payload)\"></span>\n    <span class=\"n7-tag__label\" *ngIf=\"data.label\">\n        {{ data.label }}\n    </span>\n    <span class=\"n7-tag__text\" *ngIf=\"data.text\">\n        {{ data.text }}\n    </span>\n    <span class=\"n7-tag__icon {{data.icon.id}}\" *ngIf=\"data.icon\" (click)=\"onClick(data.icon.payload)\"></span>\n</span>\n" }]
         }], propDecorators: { data: [{
                 type: Input
             }], emit: [{
@@ -1860,6 +1894,7 @@ const COMPONENTS = [
     AdvancedAutocompleteComponent,
     AlertComponent,
     AnchorWrapperComponent,
+    AvatarComponent,
     BreadcrumbsComponent,
     BubbleChartComponent,
     CarouselComponent,
@@ -1906,6 +1941,7 @@ DvComponentsLibModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", ve
 DvComponentsLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DvComponentsLibModule, declarations: [AdvancedAutocompleteComponent,
         AlertComponent,
         AnchorWrapperComponent,
+        AvatarComponent,
         BreadcrumbsComponent,
         BubbleChartComponent,
         CarouselComponent,
@@ -1947,6 +1983,7 @@ DvComponentsLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", v
         ProgressLineComponent], imports: [CommonModule, RouterModule], exports: [AdvancedAutocompleteComponent,
         AlertComponent,
         AnchorWrapperComponent,
+        AvatarComponent,
         BreadcrumbsComponent,
         BubbleChartComponent,
         CarouselComponent,
@@ -2112,6 +2149,18 @@ const ALERT_MOCK = {
     classes: 'is-warning'
 };
 
+const AVATAR_MOCK = {
+    // image: {
+    //   src: 'https://i.pravatar.cc/300',
+    //   alt: '',
+    // },
+    color: 'coral',
+    labelColor: 'white',
+    label: 'A',
+    payload: 'avatar',
+    size: '150px',
+};
+
 const BREADCRUMBS_MOCK = {
     items: [
         {
@@ -6189,6 +6238,7 @@ const CAROUSEL_MOCK = {
                 { text: 'Cum sociis natoque penatibus<br /> et magnis dis parturient montes, nascetur ridiculus mus.' },
                 { title: 'Lorem Donec sed odio dui.' },
                 { text: '<i>Morbi leo risus, porta ac consectetur ac</i>, vestibulum at eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.' },
+                { image: { src: 'assets/images/heart.svg', classes: 'some test classes' } },
                 {
                     metadata: [
                         { key: 'Metadato 1', value: 'Valore 1' },
@@ -6424,6 +6474,9 @@ const CONTENT_PLACEHOLDER_MOCK = {
 
 const DATA_WIDGET_MOCK = {
     icon: 'n7-icon-earth',
+    imgIcon: {
+        path: 'assets/images/heart.svg'
+    },
     text: '497 <em>Dipendenti</em>',
     subtitle: {
         text: 'In Crescita',
@@ -6722,9 +6775,17 @@ const HEADER_MOCK = {
         }
     ],
     user: {
-        img: 'https://placeimg.com/150/150/any/people',
+        // image: {
+        //   src: 'https://placeimg.com/150/150/any/people',
+        //   alt: 'profile picture'
+        // },
+        color: 'coral',
+        labelColor: 'white',
+        label: 'A',
+        size: '40px',
         name: 'Massimiliano Spinosa',
-        anchor: { href: '/user', target: '_blank' }
+        // anchor: { href: '/user', target: '_blank' }
+        payload: 'user'
     },
     menuToggle: {
         open: {
@@ -7391,7 +7452,14 @@ const NAV_MOCK = {
         {
             text: 'Stuff',
             image: 'http://placekitten.com/200/300',
-            icon: 'n7-icon-archway',
+            icon: {
+                id: 'n7-icon-archway',
+                payload: 'icon-primary',
+            },
+            iconSecondary: {
+                id: 'n7-icon-bell',
+                payload: 'icon-secondary',
+            },
             anchor: { href: '/examples', target: '_blank', payload: 'clicked!' }
         },
         { text: 'Other stuff', anchor: { payload: 'clicked!' } },
@@ -7712,7 +7780,14 @@ const TABLE_MOCK = {
 const TAG_MOCK = {
     label: 'label: ',
     text: 'text',
-    icon: 'n7-icon-close',
+    icon: {
+        id: 'n7-icon-close',
+        payload: 'close'
+    },
+    preIcon: {
+        id: 'n7-icon-angle-left',
+        payload: 'preicon'
+    },
     payload: 'tag-payload',
     classes: 'tag1-class',
 };
@@ -7757,8 +7832,8 @@ const TEXT_VIEWER_MOCK = {
             }
         },
         index: {
-            show: 'Comm.',
-            hide: 'Indice',
+            show: 'Riassunto',
+            hide: 'Indici',
         },
     },
     facsimile: {
@@ -8282,5 +8357,5 @@ const WIZARD_MOCK = {
  * Generated bundle index. Do not edit.
  */
 
-export { ADVANCED_AUTOCOMPLETE_MOCK, ALERT_MOCK, AdvancedAutocompleteComponent, AlertComponent, AnchorWrapperComponent, 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_TEXT_MOCK, ITEM_PREVIEW_MOCK, ImageViewerComponent, ImageViewerToolsComponent, InnerTitleComponent, InputCheckboxComponent, InputLinkComponent, InputSelectComponent, InputTextComponent, 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, 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_TEXT_MOCK, ITEM_PREVIEW_MOCK, ImageViewerComponent, ImageViewerToolsComponent, InnerTitleComponent, InputCheckboxComponent, InputLinkComponent, InputSelectComponent, InputTextComponent, 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