@net7/components 3.0.2-rc.2 → 3.2.0

package/fesm2020/net7-components.mjs

@@ -21,9 +21,9 @@ class AnchorWrapperComponent {
         this.clicked.emit(payload);
     }
 }
-AnchorWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: AnchorWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AnchorWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: { data: "data", classes: "classes" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<ng-container *ngIf=\"data; else noData\">\n    <ng-container *ngIf=\"data.href && isExternal(data.href)\">\n      <ng-container *ngTemplateOutlet=\"externalUrl\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"data.href && !isExternal(data.href)\">\n      <ng-container *ngTemplateOutlet=\"internalUrl\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!data.href\">\n      <ng-container *ngTemplateOutlet=\"noUrl\"></ng-container>\n    </ng-container>\n</ng-container>\n\n<!-- No data template -->\n<ng-template #noData>\n  <a class=\"{{ classes || '' }}\"><ng-container *ngTemplateOutlet=\"content\"></ng-container></a>\n</ng-template>\n\n<!-- Internal URL template -->\n<ng-template #internalUrl>\n  <a \n  [routerLink]=\"data.href\" \n  [target]=\"data.target || '_self'\" \n  class=\"{{ classes || '' }}\"\n  [queryParams]=\"data.queryParams || null\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n</ng-template>\n\n<!-- External URL template -->\n<ng-template #externalUrl>\n  <a [href]=\"data.href\" [target]=\"data.target || '_self'\" class=\"{{ classes || '' }}\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n</ng-template>\n\n<!-- No URL template -->\n<ng-template #noUrl>\n  <a (click)=\"onClick(data.payload)\" class=\"{{ classes || '' }}\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n</ng-template>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: AnchorWrapperComponent, decorators: [{
+AnchorWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnchorWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AnchorWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: { data: "data", classes: "classes" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<ng-container *ngIf=\"data; else noData\">\n    <ng-container *ngIf=\"data.href && isExternal(data.href)\">\n      <ng-container *ngTemplateOutlet=\"externalUrl\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"data.href && !isExternal(data.href)\">\n      <ng-container *ngTemplateOutlet=\"internalUrl\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!data.href\">\n      <ng-container *ngTemplateOutlet=\"noUrl\"></ng-container>\n    </ng-container>\n</ng-container>\n\n<!-- No data template -->\n<ng-template #noData>\n  <a class=\"{{ classes || '' }}\"><ng-container *ngTemplateOutlet=\"content\"></ng-container></a>\n</ng-template>\n\n<!-- Internal URL template -->\n<ng-template #internalUrl>\n  <a \n  [routerLink]=\"data.href\" \n  [target]=\"data.target || '_self'\" \n  class=\"{{ classes || '' }}\"\n  [queryParams]=\"data.queryParams || null\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n</ng-template>\n\n<!-- External URL template -->\n<ng-template #externalUrl>\n  <a [href]=\"data.href\" [target]=\"data.target || '_self'\" class=\"{{ classes || '' }}\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n</ng-template>\n\n<!-- No URL template -->\n<ng-template #noUrl>\n  <a (click)=\"onClick(data.payload)\" class=\"{{ classes || '' }}\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n</ng-template>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AnchorWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'n7-anchor-wrapper', template: "<ng-container *ngIf=\"data; else noData\">\n    <ng-container *ngIf=\"data.href && isExternal(data.href)\">\n      <ng-container *ngTemplateOutlet=\"externalUrl\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"data.href && !isExternal(data.href)\">\n      <ng-container *ngTemplateOutlet=\"internalUrl\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!data.href\">\n      <ng-container *ngTemplateOutlet=\"noUrl\"></ng-container>\n    </ng-container>\n</ng-container>\n\n<!-- No data template -->\n<ng-template #noData>\n  <a class=\"{{ classes || '' }}\"><ng-container *ngTemplateOutlet=\"content\"></ng-container></a>\n</ng-template>\n\n<!-- Internal URL template -->\n<ng-template #internalUrl>\n  <a \n  [routerLink]=\"data.href\" \n  [target]=\"data.target || '_self'\" \n  class=\"{{ classes || '' }}\"\n  [queryParams]=\"data.queryParams || null\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n</ng-template>\n\n<!-- External URL template -->\n<ng-template #externalUrl>\n  <a [href]=\"data.href\" [target]=\"data.target || '_self'\" class=\"{{ classes || '' }}\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n</ng-template>\n\n<!-- No URL template -->\n<ng-template #noUrl>\n  <a (click)=\"onClick(data.payload)\" class=\"{{ classes || '' }}\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n</ng-template>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n" }]
         }], propDecorators: { data: [{
@@ -42,9 +42,9 @@ class AdvancedAutocompleteComponent {
         this.emit('click', payload);
     }
 }
-AdvancedAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: AdvancedAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AdvancedAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: AdvancedAutocompleteComponent, selector: "n7-advanced-autocomplete", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-advanced-autocomplete\"\n    [ngClass]=\"{ 'is-empty' : (data.results && data.results.length === 0), 'is-loading': !data.results }\">\n    <!-- If there are some results -->\n    <ng-container *ngIf=\"data.results && data.results.length > 0\">\n        <ng-container *ngTemplateOutlet=\"hasLoaded\"></ng-container>\n    </ng-container>\n    <!-- If no results are found -->\n    <ng-container *ngIf=\"data.results && data.results.length === 0\">\n        <ng-container *ngTemplateOutlet=\"isEmpty\"></ng-container>\n    </ng-container>\n    <!-- If is loading -->\n    <ng-container *ngIf=\"!data.results\">\n        <ng-container *ngTemplateOutlet=\"isLoading\"></ng-container>\n    </ng-container>\n</div>\n\n<!-- Template: Is empty -->\n<ng-template #isEmpty>\n    <div class=\"n7-advanced-autocomplete__empty\" [innerHTML]=\"data.fallback\"></div>\n    <!-- Render actions -->\n    <ng-container *ngTemplateOutlet=\"actions; context:{$implicit: data.actions}\"></ng-container>\n</ng-template>\n\n<!-- Template: Is loading -->\n<ng-template #isLoading>\n    <!-- Layout appends loader-component here -->\n    <span class=\"n7-advanced-autocomplete__loader\" id=\"n7-advanced-autocomplete__loader\"></span>\n</ng-template>\n\n<!-- Template: Has loaded -->\n<ng-template #hasLoaded>\n    <!-- Search results -->\n    <div class=\"n7-advanced-autocomplete__results\">\n        <!-- Render groups -->\n        <ng-container *ngFor=\"let res of data.results\">\n            <div *ngIf=\"res.group\" class=\"n7-advanced-autocomplete__group\">\n                <div class=\"n7-advanced-autocomplete__group-title-wrapper {{ res.group.classes || '' }}\">\n                    <n7-anchor-wrapper\n                        [data]=\"res.group.anchor\"\n                        (clicked)=\"onClick($event)\">\n                        <span *ngIf=\"res.group.icon\" class=\"n7-advanced-autocomplete__group-icon {{ res.group.icon }}\"></span>\n                        <span class=\"n7-advanced-autocomplete__group-title\">{{res.group.title}}</span>\n                    </n7-anchor-wrapper>\n                </div>\n                <!-- Render items -->\n                <div class=\"n7-advanced-autocomplete__items\">\n                    <ng-container *ngTemplateOutlet=\"items; context:{$implicit: res.items}\"></ng-container>\n                </div>\n            </div>\n            <div *ngIf=\"!res.group\" class=\"n7-advanced-autocomplete__nogroup\">\n                <ng-container *ngTemplateOutlet=\"items; context:{$implicit: res.items}\"></ng-container>\n            </div>\n        </ng-container>\n    </div>\n    <!-- Actions -->\n    <ng-container *ngTemplateOutlet=\"actions; context:{$implicit: data.actions}\"></ng-container>\n</ng-template>\n\n<!-- Template: Items -->\n<ng-template #items let-items>\n    <n7-anchor-wrapper *ngFor=\"let item of items\"\n    [data]=\"item.anchor\"\n    (clicked)=\"onClick($event)\"\n    [classes]=\"'n7-advanced-autocomplete__item'\">\n    <span *ngIf=\"item.title\" class=\"n7-advanced-autocomplete__item-title\" [innerHTML]=\"item.title\"></span>\n    <ng-container *ngIf=\"item.metadata\">\n        <span *ngFor=\"let meta of item.metadata\" class=\"n7-advanced-autocomplete__item-metadata\">\n            <span *ngIf=\"meta.key\" class=\"n7-advanced-autocomplete__item-metadata-key\">{{ meta.key }}</span>\n            <span *ngIf=\"meta.value\" class=\"n7-advanced-autocomplete__item-metadata-value\">{{ meta.value }}</span>\n        </span>\n    </ng-container>\n    </n7-anchor-wrapper>\n</ng-template>\n\n<!-- Template: Actions -->\n<ng-template #actions let-actions>\n    <div *ngIf=\"actions\" class=\"n7-advanced-autocomplete__action-bar\">\n        <n7-anchor-wrapper *ngIf=\"actions.advanced\" [data]=\"actions.advanced.anchor\"\n            (clicked)=\"onClick($event)\" [classes]=\"'n7-btn n7-advanced-autocomplete__advanced-search'\">\n            {{actions.advanced.text}}\n        </n7-anchor-wrapper>\n\n        <n7-anchor-wrapper *ngIf=\"actions.showMore\" [data]=\"actions.showMore.anchor\"\n            (clicked)=\"onClick($event)\" [classes]=\"'n7-btn n7-btn-cta n7-advanced-autocomplete__show-more'\">\n            {{actions.showMore.text}}\n        </n7-anchor-wrapper>\n    </div>\n</ng-template>\n", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: AdvancedAutocompleteComponent, decorators: [{
+AdvancedAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AdvancedAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AdvancedAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AdvancedAutocompleteComponent, selector: "n7-advanced-autocomplete", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-advanced-autocomplete\"\n    [ngClass]=\"{ 'is-empty' : (data.results && data.results.length === 0), 'is-loading': !data.results }\">\n    <!-- If there are some results -->\n    <ng-container *ngIf=\"data.results && data.results.length > 0\">\n        <ng-container *ngTemplateOutlet=\"hasLoaded\"></ng-container>\n    </ng-container>\n    <!-- If no results are found -->\n    <ng-container *ngIf=\"data.results && data.results.length === 0\">\n        <ng-container *ngTemplateOutlet=\"isEmpty\"></ng-container>\n    </ng-container>\n    <!-- If is loading -->\n    <ng-container *ngIf=\"!data.results\">\n        <ng-container *ngTemplateOutlet=\"isLoading\"></ng-container>\n    </ng-container>\n</div>\n\n<!-- Template: Is empty -->\n<ng-template #isEmpty>\n    <div class=\"n7-advanced-autocomplete__empty\" [innerHTML]=\"data.fallback\"></div>\n    <!-- Render actions -->\n    <ng-container *ngTemplateOutlet=\"actions; context:{$implicit: data.actions}\"></ng-container>\n</ng-template>\n\n<!-- Template: Is loading -->\n<ng-template #isLoading>\n    <!-- Layout appends loader-component here -->\n    <span class=\"n7-advanced-autocomplete__loader\" id=\"n7-advanced-autocomplete__loader\"></span>\n</ng-template>\n\n<!-- Template: Has loaded -->\n<ng-template #hasLoaded>\n    <!-- Search results -->\n    <div class=\"n7-advanced-autocomplete__results\">\n        <!-- Render groups -->\n        <ng-container *ngFor=\"let res of data.results\">\n            <div *ngIf=\"res.group\" class=\"n7-advanced-autocomplete__group\">\n                <div class=\"n7-advanced-autocomplete__group-title-wrapper {{ res.group.classes || '' }}\">\n                    <n7-anchor-wrapper\n                        [data]=\"res.group.anchor\"\n                        (clicked)=\"onClick($event)\">\n                        <span *ngIf=\"res.group.icon\" class=\"n7-advanced-autocomplete__group-icon {{ res.group.icon }}\"></span>\n                        <span class=\"n7-advanced-autocomplete__group-title\">{{res.group.title}}</span>\n                    </n7-anchor-wrapper>\n                </div>\n                <!-- Render items -->\n                <div class=\"n7-advanced-autocomplete__items\">\n                    <ng-container *ngTemplateOutlet=\"items; context:{$implicit: res.items}\"></ng-container>\n                </div>\n            </div>\n            <div *ngIf=\"!res.group\" class=\"n7-advanced-autocomplete__nogroup\">\n                <ng-container *ngTemplateOutlet=\"items; context:{$implicit: res.items}\"></ng-container>\n            </div>\n        </ng-container>\n    </div>\n    <!-- Actions -->\n    <ng-container *ngTemplateOutlet=\"actions; context:{$implicit: data.actions}\"></ng-container>\n</ng-template>\n\n<!-- Template: Items -->\n<ng-template #items let-items>\n    <n7-anchor-wrapper *ngFor=\"let item of items\"\n    [data]=\"item.anchor\"\n    (clicked)=\"onClick($event)\"\n    [classes]=\"'n7-advanced-autocomplete__item'\">\n    <span *ngIf=\"item.title\" class=\"n7-advanced-autocomplete__item-title\" [innerHTML]=\"item.title\"></span>\n    <ng-container *ngIf=\"item.metadata\">\n        <span *ngFor=\"let meta of item.metadata\" class=\"n7-advanced-autocomplete__item-metadata\">\n            <span *ngIf=\"meta.key\" class=\"n7-advanced-autocomplete__item-metadata-key\">{{ meta.key }}</span>\n            <span *ngIf=\"meta.value\" class=\"n7-advanced-autocomplete__item-metadata-value\">{{ meta.value }}</span>\n        </span>\n    </ng-container>\n    </n7-anchor-wrapper>\n</ng-template>\n\n<!-- Template: Actions -->\n<ng-template #actions let-actions>\n    <div *ngIf=\"actions\" class=\"n7-advanced-autocomplete__action-bar\">\n        <n7-anchor-wrapper *ngIf=\"actions.advanced\" [data]=\"actions.advanced.anchor\"\n            (clicked)=\"onClick($event)\" [classes]=\"'n7-btn n7-advanced-autocomplete__advanced-search'\">\n            {{actions.advanced.text}}\n        </n7-anchor-wrapper>\n\n        <n7-anchor-wrapper *ngIf=\"actions.showMore\" [data]=\"actions.showMore.anchor\"\n            (clicked)=\"onClick($event)\" [classes]=\"'n7-btn n7-btn-cta n7-advanced-autocomplete__show-more'\">\n            {{actions.showMore.text}}\n        </n7-anchor-wrapper>\n    </div>\n</ng-template>\n", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AdvancedAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'n7-advanced-autocomplete', template: "<div *ngIf=\"data\" class=\"n7-advanced-autocomplete\"\n    [ngClass]=\"{ 'is-empty' : (data.results && data.results.length === 0), 'is-loading': !data.results }\">\n    <!-- If there are some results -->\n    <ng-container *ngIf=\"data.results && data.results.length > 0\">\n        <ng-container *ngTemplateOutlet=\"hasLoaded\"></ng-container>\n    </ng-container>\n    <!-- If no results are found -->\n    <ng-container *ngIf=\"data.results && data.results.length === 0\">\n        <ng-container *ngTemplateOutlet=\"isEmpty\"></ng-container>\n    </ng-container>\n    <!-- If is loading -->\n    <ng-container *ngIf=\"!data.results\">\n        <ng-container *ngTemplateOutlet=\"isLoading\"></ng-container>\n    </ng-container>\n</div>\n\n<!-- Template: Is empty -->\n<ng-template #isEmpty>\n    <div class=\"n7-advanced-autocomplete__empty\" [innerHTML]=\"data.fallback\"></div>\n    <!-- Render actions -->\n    <ng-container *ngTemplateOutlet=\"actions; context:{$implicit: data.actions}\"></ng-container>\n</ng-template>\n\n<!-- Template: Is loading -->\n<ng-template #isLoading>\n    <!-- Layout appends loader-component here -->\n    <span class=\"n7-advanced-autocomplete__loader\" id=\"n7-advanced-autocomplete__loader\"></span>\n</ng-template>\n\n<!-- Template: Has loaded -->\n<ng-template #hasLoaded>\n    <!-- Search results -->\n    <div class=\"n7-advanced-autocomplete__results\">\n        <!-- Render groups -->\n        <ng-container *ngFor=\"let res of data.results\">\n            <div *ngIf=\"res.group\" class=\"n7-advanced-autocomplete__group\">\n                <div class=\"n7-advanced-autocomplete__group-title-wrapper {{ res.group.classes || '' }}\">\n                    <n7-anchor-wrapper\n                        [data]=\"res.group.anchor\"\n                        (clicked)=\"onClick($event)\">\n                        <span *ngIf=\"res.group.icon\" class=\"n7-advanced-autocomplete__group-icon {{ res.group.icon }}\"></span>\n                        <span class=\"n7-advanced-autocomplete__group-title\">{{res.group.title}}</span>\n                    </n7-anchor-wrapper>\n                </div>\n                <!-- Render items -->\n                <div class=\"n7-advanced-autocomplete__items\">\n                    <ng-container *ngTemplateOutlet=\"items; context:{$implicit: res.items}\"></ng-container>\n                </div>\n            </div>\n            <div *ngIf=\"!res.group\" class=\"n7-advanced-autocomplete__nogroup\">\n                <ng-container *ngTemplateOutlet=\"items; context:{$implicit: res.items}\"></ng-container>\n            </div>\n        </ng-container>\n    </div>\n    <!-- Actions -->\n    <ng-container *ngTemplateOutlet=\"actions; context:{$implicit: data.actions}\"></ng-container>\n</ng-template>\n\n<!-- Template: Items -->\n<ng-template #items let-items>\n    <n7-anchor-wrapper *ngFor=\"let item of items\"\n    [data]=\"item.anchor\"\n    (clicked)=\"onClick($event)\"\n    [classes]=\"'n7-advanced-autocomplete__item'\">\n    <span *ngIf=\"item.title\" class=\"n7-advanced-autocomplete__item-title\" [innerHTML]=\"item.title\"></span>\n    <ng-container *ngIf=\"item.metadata\">\n        <span *ngFor=\"let meta of item.metadata\" class=\"n7-advanced-autocomplete__item-metadata\">\n            <span *ngIf=\"meta.key\" class=\"n7-advanced-autocomplete__item-metadata-key\">{{ meta.key }}</span>\n            <span *ngIf=\"meta.value\" class=\"n7-advanced-autocomplete__item-metadata-value\">{{ meta.value }}</span>\n        </span>\n    </ng-container>\n    </n7-anchor-wrapper>\n</ng-template>\n\n<!-- Template: Actions -->\n<ng-template #actions let-actions>\n    <div *ngIf=\"actions\" class=\"n7-advanced-autocomplete__action-bar\">\n        <n7-anchor-wrapper *ngIf=\"actions.advanced\" [data]=\"actions.advanced.anchor\"\n            (clicked)=\"onClick($event)\" [classes]=\"'n7-btn n7-advanced-autocomplete__advanced-search'\">\n            {{actions.advanced.text}}\n        </n7-anchor-wrapper>\n\n        <n7-anchor-wrapper *ngIf=\"actions.showMore\" [data]=\"actions.showMore.anchor\"\n            (clicked)=\"onClick($event)\" [classes]=\"'n7-btn n7-btn-cta n7-advanced-autocomplete__show-more'\">\n            {{actions.showMore.text}}\n        </n7-anchor-wrapper>\n    </div>\n</ng-template>\n" }]
         }], propDecorators: { data: [{
@@ -61,9 +61,9 @@ class AlertComponent {
         this.emit('click', payload);
     }
 }
-AlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: AlertComponent, selector: "n7-alert", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div class=\"n7-alert {{data.classes || ''}} {{ data.icon ? 'has-icon' : '' }}\" *ngIf=\"data\" >\n    <span class=\"n7-alert__icon {{data.icon}}\" *ngIf=\"data.icon\"></span>\n    <div class=\"n7-alert__text\" [innerHTML]=\"data.text\">\n    </div>\n    <span class=\"n7-alert__close-button n7-icon-close\" \n          *ngIf=\"data.hasCloseButton\" \n          (click)=\"onClick(data.payload)\"></span>\n</div>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: AlertComponent, decorators: [{
+AlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AlertComponent, selector: "n7-alert", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div class=\"n7-alert {{data.classes || ''}} {{ data.icon ? 'has-icon' : '' }}\" *ngIf=\"data\" >\n    <span class=\"n7-alert__icon {{data.icon}}\" *ngIf=\"data.icon\"></span>\n    <div class=\"n7-alert__text\" [innerHTML]=\"data.text\">\n    </div>\n    <span class=\"n7-alert__close-button n7-icon-close\" \n          *ngIf=\"data.hasCloseButton\" \n          (click)=\"onClick(data.payload)\"></span>\n</div>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
             args: [{ selector: 'n7-alert', template: "<div class=\"n7-alert {{data.classes || ''}} {{ data.icon ? 'has-icon' : '' }}\" *ngIf=\"data\" >\n    <span class=\"n7-alert__icon {{data.icon}}\" *ngIf=\"data.icon\"></span>\n    <div class=\"n7-alert__text\" [innerHTML]=\"data.text\">\n    </div>\n    <span class=\"n7-alert__close-button n7-icon-close\" \n          *ngIf=\"data.hasCloseButton\" \n          (click)=\"onClick(data.payload)\"></span>\n</div>" }]
         }], propDecorators: { data: [{
@@ -80,9 +80,9 @@ class BreadcrumbsComponent {
         this.emit('click', payload);
     }
 }
-BreadcrumbsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: BreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BreadcrumbsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: BreadcrumbsComponent, selector: "n7-breadcrumbs", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-breadcrumbs {{ data.classes || '' }}\">\n    <nav class=\"n7-breadcrumbs__nav\">\n        <ol class=\"n7-breadcrumbs__list\">\n            <li *ngFor=\"let item of data.items\" class=\"n7-breadcrumbs__item {{ item.classes || '' }}\">\n                <n7-anchor-wrapper [classes]=\"'n7-breadcrumbs__label'\"\n                [data]=\"item.anchor\"\n                (clicked)=\"onClick($event)\">\n                    {{ item.label }}\n                </n7-anchor-wrapper>\n            </li>\n        </ol>\n    </nav>\n</div>\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.2", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
+BreadcrumbsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: BreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BreadcrumbsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: BreadcrumbsComponent, selector: "n7-breadcrumbs", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-breadcrumbs {{ data.classes || '' }}\">\n    <nav class=\"n7-breadcrumbs__nav\">\n        <ol class=\"n7-breadcrumbs__list\">\n            <li *ngFor=\"let item of data.items\" class=\"n7-breadcrumbs__item {{ item.classes || '' }}\">\n                <n7-anchor-wrapper [classes]=\"'n7-breadcrumbs__label'\"\n                [data]=\"item.anchor\"\n                (clicked)=\"onClick($event)\">\n                    {{ item.label }}\n                </n7-anchor-wrapper>\n            </li>\n        </ol>\n    </nav>\n</div>\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: BreadcrumbsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'n7-breadcrumbs', template: "<div *ngIf=\"data\" class=\"n7-breadcrumbs {{ data.classes || '' }}\">\n    <nav class=\"n7-breadcrumbs__nav\">\n        <ol class=\"n7-breadcrumbs__list\">\n            <li *ngFor=\"let item of data.items\" class=\"n7-breadcrumbs__item {{ item.classes || '' }}\">\n                <n7-anchor-wrapper [classes]=\"'n7-breadcrumbs__label'\"\n                [data]=\"item.anchor\"\n                (clicked)=\"onClick($event)\">\n                    {{ item.label }}\n                </n7-anchor-wrapper>\n            </li>\n        </ol>\n    </nav>\n</div>\n" }]
         }], propDecorators: { data: [{
@@ -95,10 +95,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
 class BubbleChartComponent {
     constructor() {
         this._loaded = false;
+        this.measureWidth = (text) => {
+            const context = document.createElement('canvas').getContext('2d');
+            // measure text with the correct font family and weight
+            if (this.data?.fontRendering?.label?.family && this.data?.fontRendering?.label?.weight) {
+                context.font = `${this.data.fontRendering.label.weight} ${this.data.fontRendering.label.family}`;
+            }
+            return context.measureText(text).width;
+        };
+        this.isValidNumber = (value) => !Number.isNaN(Number.parseFloat(value));
         this.draw = () => {
             const { d3 } = this;
             const { containerId, data, height, width, selected, transition, colorMatch, shuffle, fontRendering } = this.data;
             const closeIconPath = 'M -50,40 L-40,50 0,10 40,50 50,40 10,0 50,-40 40,-50 0,-10 -40,-50 -50,-40 -10,0 -50,40';
+            const defaultLineHeight = 13;
+            const ellipsisThreshold = 4; // words
+            const textScalingFactor = 0.95;
             if (!Array.isArray(data)) {
                 // Check if it is possible to draw with the current dataset
                 console.warn('(n7-bubble-chart) The data object is not in the expected format!');
@@ -134,19 +146,23 @@ class BubbleChartComponent {
             const svg = d3
                 .select(`#${containerId}`)
                 .attr('viewBox', [0, 0, width, height])
-                .attr('font-family', 'Verdana, Geneva, sans-serif')
+                // .attr('font-family', 'Verdana, Geneva, sans-serif')
+                // .attr('font-size', '10px')
+                .style('font', '10px Verdana, Geneva, sans-serif')
+                .style('height', 'auto')
+                .style('max-width', '100%')
                 .attr('text-anchor', 'middle');
             const leaf = svg.selectAll('g').data(root().leaves(), (d) => d.data.entity.id);
             leaf
                 .transition(t) // update transition on <g>
                 .attr('fill-opacity', 1)
-                .attr('transform', (d) => `translate(${d.x + 1},${d.y + 1})`)
-                .attr('font-size', (d) => {
-                let size = d.r / 5.5;
-                size *= 1;
-                size += 1;
-                return `${Math.round(size)}px`;
-            });
+                .attr('transform', (d) => `translate(${d.x + 1},${d.y + 1})`);
+            // .attr('font-size', (d) => {
+            //   let size = d.r / 5.5;
+            //   size *= 1;
+            //   size += 1;
+            //   return `${Math.round(size)}px`;
+            // });
             leaf.selectAll('.close-icon').remove(); // clear all existing close icons
             if (selected) {
                 leaf // render necessary close icons
@@ -167,86 +183,8 @@ class BubbleChartComponent {
                 .transition(t) // update transition on <circle>
                 .attr('fill-opacity', 1)
                 .attr('r', (d) => d.r);
-            leaf
-                .select('text')
-                .attr('font-family', () => {
-                if (fontRendering && fontRendering.label && fontRendering.label.family) {
-                    return fontRendering.label.family;
-                }
-                return 'inherit';
-            })
-                .attr('font-weight', () => {
-                if (fontRendering && fontRendering.label && fontRendering.label.weight) {
-                    return fontRendering.label.weight;
-                }
-                return 'inherit';
-            })
-                .selectAll('tspan')
-                .data((d) => {
-                if (d.r / 4 > 4.5) {
-                    // show text and number threshhold
-                    let label = (d.data.entity.label.charAt(0).toUpperCase()
-                        + d.data.entity.label.slice(1)).split(/ +/g);
-                    if (label.length > 3) {
-                        label = label.slice(0, 3);
-                        label[2] += '…';
-                    }
-                    return label;
-                }
-                if (d.r / 4 > 2.5) {
-                    // show text threshhold
-                    let label = (d.data.entity.label.charAt(0).toUpperCase()
-                        + d.data.entity.label.slice(1)).split(/ +/g);
-                    if (label.length > 3) {
-                        label = label.slice(0, 3);
-                        label[2] += '…';
-                    }
-                    return label;
-                }
-                return '';
-            })
-                .join('tspan')
-                .attr('x', 0)
-                .attr('y', (d, i, nodes) => `${i - (nodes.length + 1) / 2 + 0.97}em`)
-                .attr('fill', 'white')
-                .text((d) => d);
-            leaf
-                .select('.label-count')
-                .attr('font-family', () => {
-                if (fontRendering && fontRendering.counter && fontRendering.counter.family) {
-                    return fontRendering.counter.family;
-                }
-                return 'inherit';
-            })
-                .attr('font-weight', () => {
-                if (fontRendering && fontRendering.counter && fontRendering.counter.weight) {
-                    return fontRendering.counter.weight;
-                }
-                return 'inherit';
-            })
-                .attr('fill', 'white')
-                .text((d) => {
-                if (d.r / 4 > 2.5) {
-                    // show text and number threshhold
-                    return d.data.count;
-                }
-                return '';
-            })
-                .attr('y', (d) => {
-                let labelLength = d.data.entity.label.split(/ +/g);
-                if (labelLength.length > 3) {
-                    labelLength = labelLength.slice(0, 3);
-                }
-                return `${labelLength.length - (labelLength.length + 1) / 2 + 0.97}em`;
-            });
             const g = leaf.enter().append('g');
             g.attr('transform', (d) => `translate(${d.x + 1},${d.y + 1})`)
-                .attr('font-size', (d) => {
-                let size = d.r / 5.5;
-                size *= 1;
-                size += 1;
-                return `${Math.round(size)}px`;
-            })
                 .attr('cursor', 'pointer')
                 .on('click', (event, d) => {
                 this.onClick(d.data.entity.id);
@@ -263,6 +201,88 @@ class BubbleChartComponent {
                 .attr('id', (d) => { d.clipUid = `Clip-${d.data.entity.id}`; })
                 .append('use')
                 .attr('xlink:href', (d) => d.leafUid.href);
+            // g.append('text')
+            //   .attr('font-family', () => {
+            //     if (fontRendering && fontRendering.label && fontRendering.label.family) {
+            //       return fontRendering.label.family;
+            //     }
+            //     return 'inherit';
+            //   })
+            //   .attr('font-weight', () => {
+            //     if (fontRendering && fontRendering
+            //         && fontRendering.label && fontRendering.label.weight) {
+            //       return fontRendering.label.weight;
+            //     }
+            //     return 'inherit';
+            //   })
+            //   .selectAll('tspan')
+            //   .data((d) => {
+            //     if (d.r / 4 > 4.5) {
+            //       // show text and number threshhold
+            //       let label = (
+            //         d.data.entity.label.charAt(0).toUpperCase()
+            //         + d.data.entity.label.slice(1)
+            //       ).split(/ +/g);
+            //       if (label.length > 3) {
+            //         label = label.slice(0, 3);
+            //         label[2] += '…';
+            //       }
+            //       return label;
+            //     } if (d.r / 4 > 2.5) {
+            //       // show text threshhold
+            //       let label = (
+            //         d.data.entity.label.charAt(0).toUpperCase()
+            //         + d.data.entity.label.slice(1)
+            //       ).split(/ +/g);
+            //       if (label.length > 3) {
+            //         label = label.slice(0, 3);
+            //         label[2] += '…';
+            //       }
+            //       return label;
+            //     }
+            //     return '';
+            //   })
+            //   .join('tspan')
+            //   .attr('x', 0)
+            //   .attr('y', (d, i, nodes) => `${i - (nodes.length + 1) / 2 + 0.97}em`)
+            //   .attr('fill', 'white')
+            //   .text((d) => d)
+            //   .attr('fill-opacity', 0)
+            //   .transition(t) // enter() transition on <tspan>
+            //   .attr('fill-opacity', 1);
+            // g.append('text') // Count label
+            //   .attr('class', 'label-count')
+            //   .attr('font-family', () => {
+            //     if (fontRendering && fontRendering.counter && fontRendering.counter.family) {
+            //       return fontRendering.counter.family;
+            //     }
+            //     return 'inherit';
+            //   })
+            //   .attr('font-weight', () => {
+            //     if (fontRendering && fontRendering.counter && fontRendering.counter.weight) {
+            //       return fontRendering.counter.weight;
+            //     }
+            //     return 'inherit';
+            //   })
+            //   .attr('fill', 'white')
+            //   .text((d) => {
+            //     if (d.r / 4 > 2.5) {
+            //       // show text and number threshhold
+            //       return d.data.count;
+            //     }
+            //     return '';
+            //   })
+            //   .attr('y', (d) => {
+            //     let labelLength = d.data.entity.label.split(/ +/g);
+            //     if (labelLength.length > 3) {
+            //       labelLength = labelLength.slice(0, 3);
+            //     }
+            //     return `${labelLength.length - (labelLength.length + 1) / 2 + 0.97}em`;
+            //   })
+            //   .attr('fill-opacity', 0)
+            //   .transition(t) // enter() transition on <text>
+            //   .attr('fill-opacity', 1);
+            /** NEW TEXT LOGIC */
             g.append('text')
                 .attr('font-family', () => {
                 if (fontRendering && fontRendering.label && fontRendering.label.family) {
@@ -276,40 +296,83 @@ class BubbleChartComponent {
                 }
                 return 'inherit';
             })
-                .selectAll('tspan')
-                .data((d) => {
-                if (d.r / 4 > 4.5) {
-                    // show text and number threshhold
-                    let label = (d.data.entity.label.charAt(0).toUpperCase()
-                        + d.data.entity.label.slice(1)).split(/ +/g);
-                    if (label.length > 3) {
-                        label = label.slice(0, 3);
-                        label[2] += '…';
-                    }
-                    return label;
+                .attr('fill', 'white')
+                .each((d) => {
+                // Capitalize the first letter of the label
+                d.data.entity.label = d.data.entity
+                    .label.charAt(0).toUpperCase()
+                    + d.data.entity.label.slice(1);
+                // 1. initialize meta object
+                if (!d._meta || typeof d._meta !== 'object')
+                    d._meta = {};
+                // 2. tokenize label & count into words
+                const words = d.data.entity.label.split(/\s+/g); // To hyphenate: /\s+|(?<=-)/
+                // Truncate with ellipsis if the label is longer than the threshold
+                if (words.length > ellipsisThreshold) {
+                    words.splice(ellipsisThreshold, words.length - ellipsisThreshold);
+                    words[ellipsisThreshold - 1] += '…';
                 }
+                // add counter
                 if (d.r / 4 > 2.5) {
-                    // show text threshhold
-                    let label = (d.data.entity.label.charAt(0).toUpperCase()
-                        + d.data.entity.label.slice(1)).split(/ +/g);
-                    if (label.length > 3) {
-                        label = label.slice(0, 3);
-                        label[2] += '…';
+                    // show text threshold
+                    if (!words[words.length - 1])
+                        words.pop();
+                    if (!words[0])
+                        words.shift();
+                }
+                if (d.r / 4 > 4.5) {
+                    // show number threshold
+                    words.push(`${d.data.count}`);
+                }
+                d._meta.words = words;
+                d._meta.lineHeight = defaultLineHeight;
+                const targetWidth = Math.sqrt(this.measureWidth(d._meta.words.join(' ').trim()) * defaultLineHeight);
+                // 3. build lines of text
+                d._meta.lines = [];
+                let line;
+                let lineWidth0 = Infinity;
+                for (let i = 0, n = d._meta.words.length; i < n; i += 1) {
+                    const lineText1 = (line ? `${line.text} ` : '') + words[i];
+                    const lineWidth1 = this.measureWidth(lineText1);
+                    if ((lineWidth0 + lineWidth1) / 2 < targetWidth && i !== n - 1) {
+                        line.width = lineWidth0;
+                        lineWidth0 = lineWidth1;
+                        line.text = lineText1;
+                    }
+                    else {
+                        // if line is too long or this is the last line (counter), push to next line
+                        lineWidth0 = this.measureWidth(words[i]);
+                        line = { width: lineWidth0, text: words[i] };
+                        d._meta.lines.push(line);
                     }
-                    return label;
                 }
-                return '';
+                // 4. compute the bounding radius
+                let radius = 0;
+                for (let i = 0, n = d._meta.lines.length; i < n; i += 1) {
+                    const dy = (Math.abs(i - n / 2) + 0.8) * d._meta.lineHeight;
+                    const dx = d._meta.lines[i].width / 2;
+                    radius = Math.max(radius, Math.sqrt(dx * dx + dy * dy));
+                }
+                d._meta.textRadius = radius;
+                return d;
             })
-                .join('tspan')
+                .attr('transform', (d) => `scale(${(d.r / d._meta.textRadius) * textScalingFactor})`)
+                .filter((d) => (d.r / 4 > 2.5))
+                .selectAll('tspan')
+                .data((d) => d._meta.lines)
+                .enter()
+                .append('tspan')
                 .attr('x', 0)
-                .attr('y', (d, i, nodes) => `${i - (nodes.length + 1) / 2 + 0.97}em`)
-                .attr('fill', 'white')
-                .text((d) => d)
+                .attr('y', (d, i, n) => (i - n.length / 2 + 0.8) * defaultLineHeight)
+                .attr('class', (d, i, n) => (
+            // if it's the last label and a valid number, mark as counter
+            i === n.length - 1 && this.isValidNumber(d.text) ? 'label-counter' : 'label-text'))
+                .text((d) => d.text)
                 .attr('fill-opacity', 0)
                 .transition(t) // enter() transition on <tspan>
                 .attr('fill-opacity', 1);
-            g.append('text') // Count label
-                .attr('class', 'label-count')
+            // custom style for the counter
+            g.selectAll('tspan.label-counter')
                 .attr('font-family', () => {
                 if (fontRendering && fontRendering.counter && fontRendering.counter.family) {
                     return fontRendering.counter.family;
@@ -321,25 +384,7 @@ class BubbleChartComponent {
                     return fontRendering.counter.weight;
                 }
                 return 'inherit';
-            })
-                .attr('fill', 'white')
-                .text((d) => {
-                if (d.r / 4 > 2.5) {
-                    // show text and number threshhold
-                    return d.data.count;
-                }
-                return '';
-            })
-                .attr('y', (d) => {
-                let labelLength = d.data.entity.label.split(/ +/g);
-                if (labelLength.length > 3) {
-                    labelLength = labelLength.slice(0, 3);
-                }
-                return `${labelLength.length - (labelLength.length + 1) / 2 + 0.97}em`;
-            })
-                .attr('fill-opacity', 0)
-                .transition(t) // enter() transition on <text>
-                .attr('fill-opacity', 1);
+            });
             leaf
                 .exit() // EXIT CYCLE
                 .remove();
@@ -390,9 +435,9 @@ class BubbleChartComponent {
         this.emit('click', payload);
     }
 }
-BubbleChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: BubbleChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BubbleChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: BubbleChartComponent, selector: "n7-bubble-chart", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-bubble-chart {{ data.classes || '' }}\">\n    <svg #bubbleChart id=\"{{data.containerId}}\"></svg>\n</div>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: BubbleChartComponent, decorators: [{
+BubbleChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: BubbleChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BubbleChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: BubbleChartComponent, selector: "n7-bubble-chart", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-bubble-chart {{ data.classes || '' }}\">\n    <svg #bubbleChart id=\"{{data.containerId}}\"></svg>\n</div>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: BubbleChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'n7-bubble-chart', template: "<div *ngIf=\"data\" class=\"n7-bubble-chart {{ data.classes || '' }}\">\n    <svg #bubbleChart id=\"{{data.containerId}}\"></svg>\n</div>" }]
         }], propDecorators: { data: [{
@@ -473,9 +518,9 @@ class CarouselComponent {
         });
     }
 }
-CarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CarouselComponent, decorators: [{
+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"] }] });
+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" }]
         }], propDecorators: { data: [{
@@ -505,9 +550,9 @@ class ChartComponent {
         });
     }
 }
-ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: ChartComponent, selector: "n7-chart", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-chart {{ data.classes || '' }}\">\n    <div id=\"{{ data.containerId }}\"></div>\n</div>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ChartComponent, decorators: [{
+ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ChartComponent, selector: "n7-chart", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-chart {{ data.classes || '' }}\">\n    <div id=\"{{ data.containerId }}\"></div>\n</div>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'n7-chart', template: "<div *ngIf=\"data\" class=\"n7-chart {{ data.classes || '' }}\">\n    <div id=\"{{ data.containerId }}\"></div>\n</div>" }]
         }], propDecorators: { data: [{
@@ -519,9 +564,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
 //---------------------------
 class ContentPlaceholderComponent {
 }
-ContentPlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ContentPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ContentPlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: ContentPlaceholderComponent, selector: "n7-content-placeholder", inputs: { data: "data" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-content-placeholder\">\n  <ng-container *ngFor=\"let b of data.blocks\">\n    <div *ngIf=\"!b.image\" class=\"n7-content-placeholder__item {{b.classes || ''}}\"></div>\n    <img *ngIf=\"b.image\" class=\"n7-content-placeholder__image {{b.classes || ''}}\" src=\"{{b.image}}\" alt=\"{{ b.alt || '' }}\">\n  </ng-container>\n</div>", 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.2", ngImport: i0, type: ContentPlaceholderComponent, decorators: [{
+ContentPlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ContentPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ContentPlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ContentPlaceholderComponent, selector: "n7-content-placeholder", inputs: { data: "data" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-content-placeholder\">\n  <ng-container *ngFor=\"let b of data.blocks\">\n    <div *ngIf=\"!b.image\" class=\"n7-content-placeholder__item {{b.classes || ''}}\"></div>\n    <img *ngIf=\"b.image\" class=\"n7-content-placeholder__image {{b.classes || ''}}\" src=\"{{b.image}}\" alt=\"{{ b.alt || '' }}\">\n  </ng-container>\n</div>", 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: ContentPlaceholderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'n7-content-placeholder', template: "<div *ngIf=\"data\" class=\"n7-content-placeholder\">\n  <ng-container *ngFor=\"let b of data.blocks\">\n    <div *ngIf=\"!b.image\" class=\"n7-content-placeholder__item {{b.classes || ''}}\"></div>\n    <img *ngIf=\"b.image\" class=\"n7-content-placeholder__image {{b.classes || ''}}\" src=\"{{b.image}}\" alt=\"{{ b.alt || '' }}\">\n  </ng-container>\n</div>" }]
         }], propDecorators: { data: [{
@@ -541,9 +586,9 @@ class DataWidgetComponent {
         this.emit('mouseleave', payload);
     }
 }
-DataWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DataWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DataWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DataWidgetComponent, decorators: [{
+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"] }] });
+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" }]
         }], propDecorators: { data: [{
@@ -580,9 +625,9 @@ class DatepickerComponent {
         });
     }
 }
-DatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: DatepickerComponent, selector: "n7-datepicker", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-datepicker {{ data.classes || '' }}\">\n  <input type=\"text\" id=\"{{this.data.id}}\"/>\n</div>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DatepickerComponent, decorators: [{
+DatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DatepickerComponent, selector: "n7-datepicker", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-datepicker {{ data.classes || '' }}\">\n  <input type=\"text\" id=\"{{this.data.id}}\"/>\n</div>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'n7-datepicker', template: "<div *ngIf=\"data\" class=\"n7-datepicker {{ data.classes || '' }}\">\n  <input type=\"text\" id=\"{{this.data.id}}\"/>\n</div>" }]
         }], propDecorators: { data: [{
@@ -599,9 +644,9 @@ class FacetComponent {
         this.emit('change', { inputPayload, value });
     }
 }
-FacetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: FacetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FacetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: FacetComponent, selector: "n7-facet", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-facet\">\n    <div *ngFor=\"let section of data.sections\" class=\"n7-facet__section {{ section.classes || '' }}\">\n        <div *ngFor=\"let input of section.inputs\"\n            class=\"n7-facet__section-input n7-facet__section-input-{{ input.type }} {{ input.classes || '' }}\">\n\n            <ng-container [ngSwitch]=\"input.type\">\n\n                <!-- Checkbox -->\n                <ng-container *ngSwitchCase=\"'checkbox'\">\n                    <input type=\"checkbox\" id=\"{{ input.id }}\" class=\"n7-facet__input-checkbox-input\"\n                        [checked]=\"input.checked\"\n                        [disabled]=\"input.disabled\"\n                        (change)=\"onChange(input.payload, $event.target.checked)\">\n                    <label *ngIf=\"input.label\" class=\"n7-facet__checkbox-label\" for=\"{{ input.id }}\">\n                        {{ input.label }}\n                    </label>\n                </ng-container>\n\n                <!-- Text -->\n                <ng-container *ngSwitchCase=\"'text'\">\n                    <label *ngIf=\"input.label\" class=\"n7-facet__input-text-label\" for=\"{{ input.id }}\">\n                        {{ input.label }}\n                    </label>\n                    <div class=\"n7-facet__input-text-wrapper\">\n                        <input type=\"text\" id=\"{{ input.id }}\" class=\"n7-facet__input-text {{input.classes || ''}}\"\n                            placeholder=\"{{input.placeholder || ''}}\"\n                            [value]=\"input.value || null\"\n                            [disabled]=\"input.disabled\"\n                            (input)=\"onChange(input.inputPayload, $event.target.value)\"\n                            (keyup.enter)=\"onChange(input.enterPayload, $event.target.value)\">\n                        <span *ngIf=\"input.icon\" class=\"n7-facet__input-text-icon {{input.icon || ''}}\" \n                            (click)=\"onChange(input.iconPayload)\">\n                        </span>\n                    </div>\n                </ng-container>\n\n                <!-- Link -->\n                <ng-container *ngSwitchCase=\"'link'\">\n                    <div class=\"n7-facet__input-link {{ input.classes || '' }}\"\n                        (click)=\"onChange(input.payload)\">\n                        <span *ngIf=\"input.icon\" class=\"n7-facet__input-link-icon {{ input.icon }}\"></span>\n                        <span class=\"n7-facet__input-link-text\">{{ input.text }}</span>\n                        <span *ngIf=\"input.counter || input.counter === 0\" class=\"n7-facet__input-link-counter\">{{ input.counter }}</span>\n                    </div>\n                </ng-container>\n\n                <!-- Select -->\n                <ng-container *ngSwitchCase=\"'select'\">\n                    <label *ngIf=\"input.label\" for=\"{{ input.id }}\">{{ input.label }}</label>\n                    <select (change)=\"onChange(input.payload, $event.target.value)\" \n                        id=\"{{ input.id }}\"\n                        class=\"n7-facet__input-select {{ input.classes || '' }}\"\n                        [disabled]=\"input.disabled\">\n                        <option *ngFor=\"let option of input.options\" \n                            [value]=\"option.value\" \n                            [disabled]=\"option.disabled\" \n                            [selected]=\"option.selected\">{{ option.label }}</option>\n                    </select>\n                </ng-container>\n            </ng-container>\n\n        </div>\n    </div>\n</div>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: FacetComponent, decorators: [{
+FacetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FacetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FacetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: FacetComponent, selector: "n7-facet", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-facet\">\n    <div *ngFor=\"let section of data.sections\" class=\"n7-facet__section {{ section.classes || '' }}\">\n        <div *ngFor=\"let input of section.inputs\"\n            class=\"n7-facet__section-input n7-facet__section-input-{{ input.type }} {{ input.classes || '' }}\">\n\n            <ng-container [ngSwitch]=\"input.type\">\n\n                <!-- Checkbox -->\n                <ng-container *ngSwitchCase=\"'checkbox'\">\n                    <input type=\"checkbox\" id=\"{{ input.id }}\" class=\"n7-facet__input-checkbox-input\"\n                        [checked]=\"input.checked\"\n                        [disabled]=\"input.disabled\"\n                        (change)=\"onChange(input.payload, $event.target.checked)\">\n                    <label *ngIf=\"input.label\" class=\"n7-facet__checkbox-label\" for=\"{{ input.id }}\">\n                        {{ input.label }}\n                    </label>\n                </ng-container>\n\n                <!-- Text -->\n                <ng-container *ngSwitchCase=\"'text'\">\n                    <label *ngIf=\"input.label\" class=\"n7-facet__input-text-label\" for=\"{{ input.id }}\">\n                        {{ input.label }}\n                    </label>\n                    <div class=\"n7-facet__input-text-wrapper\">\n                        <input type=\"text\" id=\"{{ input.id }}\" class=\"n7-facet__input-text {{input.classes || ''}}\"\n                            placeholder=\"{{input.placeholder || ''}}\"\n                            [value]=\"input.value || null\"\n                            [disabled]=\"input.disabled\"\n                            (input)=\"onChange(input.inputPayload, $event.target.value)\"\n                            (keyup.enter)=\"onChange(input.enterPayload, $event.target.value)\">\n                        <span *ngIf=\"input.icon\" class=\"n7-facet__input-text-icon {{input.icon || ''}}\" \n                            (click)=\"onChange(input.iconPayload)\">\n                        </span>\n                    </div>\n                </ng-container>\n\n                <!-- Link -->\n                <ng-container *ngSwitchCase=\"'link'\">\n                    <div class=\"n7-facet__input-link {{ input.classes || '' }}\"\n                        (click)=\"onChange(input.payload)\">\n                        <span *ngIf=\"input.icon\" class=\"n7-facet__input-link-icon {{ input.icon }}\"></span>\n                        <span class=\"n7-facet__input-link-text\">{{ input.text }}</span>\n                        <span *ngIf=\"input.counter || input.counter === 0\" class=\"n7-facet__input-link-counter\">{{ input.counter }}</span>\n                    </div>\n                </ng-container>\n\n                <!-- Select -->\n                <ng-container *ngSwitchCase=\"'select'\">\n                    <label *ngIf=\"input.label\" for=\"{{ input.id }}\">{{ input.label }}</label>\n                    <select (change)=\"onChange(input.payload, $event.target.value)\" \n                        id=\"{{ input.id }}\"\n                        class=\"n7-facet__input-select {{ input.classes || '' }}\"\n                        [disabled]=\"input.disabled\">\n                        <option *ngFor=\"let option of input.options\" \n                            [value]=\"option.value\" \n                            [disabled]=\"option.disabled\" \n                            [selected]=\"option.selected\">{{ option.label }}</option>\n                    </select>\n                </ng-container>\n            </ng-container>\n\n        </div>\n    </div>\n</div>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FacetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'n7-facet', template: "<div *ngIf=\"data\" class=\"n7-facet\">\n    <div *ngFor=\"let section of data.sections\" class=\"n7-facet__section {{ section.classes || '' }}\">\n        <div *ngFor=\"let input of section.inputs\"\n            class=\"n7-facet__section-input n7-facet__section-input-{{ input.type }} {{ input.classes || '' }}\">\n\n            <ng-container [ngSwitch]=\"input.type\">\n\n                <!-- Checkbox -->\n                <ng-container *ngSwitchCase=\"'checkbox'\">\n                    <input type=\"checkbox\" id=\"{{ input.id }}\" class=\"n7-facet__input-checkbox-input\"\n                        [checked]=\"input.checked\"\n                        [disabled]=\"input.disabled\"\n                        (change)=\"onChange(input.payload, $event.target.checked)\">\n                    <label *ngIf=\"input.label\" class=\"n7-facet__checkbox-label\" for=\"{{ input.id }}\">\n                        {{ input.label }}\n                    </label>\n                </ng-container>\n\n                <!-- Text -->\n                <ng-container *ngSwitchCase=\"'text'\">\n                    <label *ngIf=\"input.label\" class=\"n7-facet__input-text-label\" for=\"{{ input.id }}\">\n                        {{ input.label }}\n                    </label>\n                    <div class=\"n7-facet__input-text-wrapper\">\n                        <input type=\"text\" id=\"{{ input.id }}\" class=\"n7-facet__input-text {{input.classes || ''}}\"\n                            placeholder=\"{{input.placeholder || ''}}\"\n                            [value]=\"input.value || null\"\n                            [disabled]=\"input.disabled\"\n                            (input)=\"onChange(input.inputPayload, $event.target.value)\"\n                            (keyup.enter)=\"onChange(input.enterPayload, $event.target.value)\">\n                        <span *ngIf=\"input.icon\" class=\"n7-facet__input-text-icon {{input.icon || ''}}\" \n                            (click)=\"onChange(input.iconPayload)\">\n                        </span>\n                    </div>\n                </ng-container>\n\n                <!-- Link -->\n                <ng-container *ngSwitchCase=\"'link'\">\n                    <div class=\"n7-facet__input-link {{ input.classes || '' }}\"\n                        (click)=\"onChange(input.payload)\">\n                        <span *ngIf=\"input.icon\" class=\"n7-facet__input-link-icon {{ input.icon }}\"></span>\n                        <span class=\"n7-facet__input-link-text\">{{ input.text }}</span>\n                        <span *ngIf=\"input.counter || input.counter === 0\" class=\"n7-facet__input-link-counter\">{{ input.counter }}</span>\n                    </div>\n                </ng-container>\n\n                <!-- Select -->\n                <ng-container *ngSwitchCase=\"'select'\">\n                    <label *ngIf=\"input.label\" for=\"{{ input.id }}\">{{ input.label }}</label>\n                    <select (change)=\"onChange(input.payload, $event.target.value)\" \n                        id=\"{{ input.id }}\"\n                        class=\"n7-facet__input-select {{ input.classes || '' }}\"\n                        [disabled]=\"input.disabled\">\n                        <option *ngFor=\"let option of input.options\" \n                            [value]=\"option.value\" \n                            [disabled]=\"option.disabled\" \n                            [selected]=\"option.selected\">{{ option.label }}</option>\n                    </select>\n                </ng-container>\n            </ng-container>\n\n        </div>\n    </div>\n</div>" }]
         }], propDecorators: { data: [{
@@ -618,9 +663,9 @@ class FacetHeaderComponent {
         this.emit('click', payload);
     }
 }
-FacetHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: FacetHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FacetHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: FacetHeaderComponent, selector: "n7-facet-header", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" \nclass=\"n7-facet-header {{ data.classes || '' }}\" \n(click)=\"onClick(data.payload)\">\n    <span *ngIf=\"data.iconLeft\"\n    class=\"n7-facet-header__icon-left {{ data.iconLeft }}\">\n    </span>\n    <span class=\"n7-facet-header__text-wrapper\">\n        <span class=\"n7-facet-header__text\">\n            {{data.text}}\n        </span>\n        <span class=\"n7-facet-header__secondary-text\" *ngIf=\"data.additionalText\">\n            {{data.additionalText}}\n        </span>\n    </span>\n    <span *ngIf=\"data.iconRight\" \n    class=\"n7-facet-header__icon-right {{ data.iconRight }}\">\n    </span>\n</div>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: FacetHeaderComponent, decorators: [{
+FacetHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FacetHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FacetHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: FacetHeaderComponent, selector: "n7-facet-header", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" \nclass=\"n7-facet-header {{ data.classes || '' }}\" \n(click)=\"onClick(data.payload)\">\n    <span *ngIf=\"data.iconLeft\"\n    class=\"n7-facet-header__icon-left {{ data.iconLeft }}\">\n    </span>\n    <span class=\"n7-facet-header__text-wrapper\">\n        <span class=\"n7-facet-header__text\">\n            {{data.text}}\n        </span>\n        <span class=\"n7-facet-header__secondary-text\" *ngIf=\"data.additionalText\">\n            {{data.additionalText}}\n        </span>\n    </span>\n    <span *ngIf=\"data.iconRight\" \n    class=\"n7-facet-header__icon-right {{ data.iconRight }}\">\n    </span>\n</div>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FacetHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'n7-facet-header', template: "<div *ngIf=\"data\" \nclass=\"n7-facet-header {{ data.classes || '' }}\" \n(click)=\"onClick(data.payload)\">\n    <span *ngIf=\"data.iconLeft\"\n    class=\"n7-facet-header__icon-left {{ data.iconLeft }}\">\n    </span>\n    <span class=\"n7-facet-header__text-wrapper\">\n        <span class=\"n7-facet-header__text\">\n            {{data.text}}\n        </span>\n        <span class=\"n7-facet-header__secondary-text\" *ngIf=\"data.additionalText\">\n            {{data.additionalText}}\n        </span>\n    </span>\n    <span *ngIf=\"data.iconRight\" \n    class=\"n7-facet-header__icon-right {{ data.iconRight }}\">\n    </span>\n</div>" }]
         }], propDecorators: { data: [{
@@ -666,9 +711,9 @@ class FacetYearRangeComponent {
         }
     }
 }
-FacetYearRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: FacetYearRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FacetYearRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: FacetYearRangeComponent, selector: "n7-facet-year-range", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-facet-year-range\">\n\n    <!-- Select starting year -->\n    <div class=\"n7-facet-year-range__in\">\n        <label class=\"n7-facet-year-range__in-label\">\n            {{ data.inDate.text }}\n        </label>\n        <select (change)=\"onChange(data.inDate.payload, $event.target.value)\"\n            class=\"n7-facet-year-range__in-select {{ data.inDate.classes || '' }}\">\n            <!-- Placeholder option -->\n            <option *ngIf=\"data.inDate.placeholder.length > 0\" value=\"{{ data.inDate.placeholder }}\" disabled selected>\n                {{ data.inDate.placeholder }}\n            </option>\n            <option *ngFor=\"let opt of data.inDate.options\" value=\"{{ opt.value }}\">\n                {{ opt.value }}\n            </option>\n        </select>\n    </div>\n\n    <!-- Select final year -->\n    <div class=\"n7-facet-year-range__out\">\n        <label class=\"n7-facet-year-range__out-label\">\n            {{ data.outDate.text }}\n        </label>\n        <select (change)=\"onChange(data.outDate.payload, $event.target.value)\"\n                class=\"n7-facet-year-range__out-select {{ data.outDate.classes || '' }}\"\n                formControlName=\"outDate\">\n            <!-- Placeholder option -->\n            <option *ngIf=\"data.outDate.placeholder.length > 0\" value=\"{{ data.outDate.placeholder }}\" disabled selected>\n                {{ data.outDate.placeholder }}\n            </option>\n            <option *ngFor=\"let opt of data.outDate.options\" value=\"{{ opt.value }}\">\n                {{ opt.value }}\n            </option>\n        </select>\n    </div>\n</div>", 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.2", ngImport: i0, type: FacetYearRangeComponent, decorators: [{
+FacetYearRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FacetYearRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FacetYearRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: FacetYearRangeComponent, selector: "n7-facet-year-range", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-facet-year-range\">\n\n    <!-- Select starting year -->\n    <div class=\"n7-facet-year-range__in\">\n        <label class=\"n7-facet-year-range__in-label\">\n            {{ data.inDate.text }}\n        </label>\n        <select (change)=\"onChange(data.inDate.payload, $event.target.value)\"\n            class=\"n7-facet-year-range__in-select {{ data.inDate.classes || '' }}\">\n            <!-- Placeholder option -->\n            <option *ngIf=\"data.inDate.placeholder.length > 0\" value=\"{{ data.inDate.placeholder }}\" disabled selected>\n                {{ data.inDate.placeholder }}\n            </option>\n            <option *ngFor=\"let opt of data.inDate.options\" value=\"{{ opt.value }}\">\n                {{ opt.value }}\n            </option>\n        </select>\n    </div>\n\n    <!-- Select final year -->\n    <div class=\"n7-facet-year-range__out\">\n        <label class=\"n7-facet-year-range__out-label\">\n            {{ data.outDate.text }}\n        </label>\n        <select (change)=\"onChange(data.outDate.payload, $event.target.value)\"\n                class=\"n7-facet-year-range__out-select {{ data.outDate.classes || '' }}\"\n                formControlName=\"outDate\">\n            <!-- Placeholder option -->\n            <option *ngIf=\"data.outDate.placeholder.length > 0\" value=\"{{ data.outDate.placeholder }}\" disabled selected>\n                {{ data.outDate.placeholder }}\n            </option>\n            <option *ngFor=\"let opt of data.outDate.options\" value=\"{{ opt.value }}\">\n                {{ opt.value }}\n            </option>\n        </select>\n    </div>\n</div>", 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: FacetYearRangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'n7-facet-year-range', template: "<div *ngIf=\"data\" class=\"n7-facet-year-range\">\n\n    <!-- Select starting year -->\n    <div class=\"n7-facet-year-range__in\">\n        <label class=\"n7-facet-year-range__in-label\">\n            {{ data.inDate.text }}\n        </label>\n        <select (change)=\"onChange(data.inDate.payload, $event.target.value)\"\n            class=\"n7-facet-year-range__in-select {{ data.inDate.classes || '' }}\">\n            <!-- Placeholder option -->\n            <option *ngIf=\"data.inDate.placeholder.length > 0\" value=\"{{ data.inDate.placeholder }}\" disabled selected>\n                {{ data.inDate.placeholder }}\n            </option>\n            <option *ngFor=\"let opt of data.inDate.options\" value=\"{{ opt.value }}\">\n                {{ opt.value }}\n            </option>\n        </select>\n    </div>\n\n    <!-- Select final year -->\n    <div class=\"n7-facet-year-range__out\">\n        <label class=\"n7-facet-year-range__out-label\">\n            {{ data.outDate.text }}\n        </label>\n        <select (change)=\"onChange(data.outDate.payload, $event.target.value)\"\n                class=\"n7-facet-year-range__out-select {{ data.outDate.classes || '' }}\"\n                formControlName=\"outDate\">\n            <!-- Placeholder option -->\n            <option *ngIf=\"data.outDate.placeholder.length > 0\" value=\"{{ data.outDate.placeholder }}\" disabled selected>\n                {{ data.outDate.placeholder }}\n            </option>\n            <option *ngFor=\"let opt of data.outDate.options\" value=\"{{ opt.value }}\">\n                {{ opt.value }}\n            </option>\n        </select>\n    </div>\n</div>" }]
         }], propDecorators: { data: [{
@@ -685,9 +730,9 @@ class FooterComponent {
         this.emit('click', payload);
     }
 }
-FooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: FooterComponent, selector: "n7-footer", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-footer {{data.classes || ''}}\">\n    <div class=\"n7-footer__content\">\n        <!-- Loop footer content columns -->\n        <div class=\"n7-footer__column {{column.classes || ''}}\" *ngFor=\"let column of data.columns\">\n            <ng-container *ngTemplateOutlet=\"footerColumn; context:{$implicit: column}\"></ng-container>\n        </div>\n    </div>\n</div>\n\n<!-- Template: Columns -->\n<ng-template #footerColumn let-column>\n    <h2 *ngIf=\"column.title\" class=\"n7-footer__column-title\">\n        {{ column.title }}\n    </h2>\n    <p *ngIf=\"column.text\" \n       class=\"n7-footer__column-text\"\n       [innerHTML]=\"column.text\">\n    </p>\n    <div *ngIf=\"column.links\" class=\"n7-footer__column-nav\">\n        <ul class=\"n7-footer__column-nav-list\">\n            <li *ngFor=\"let link of column.links\"\n                class=\"n7-footer__column-nav-item {{link.classes || ''}}\">\n                <n7-anchor-wrapper [classes]=\"'n7-footer__column-nav-link'\"\n                [data]=\"link.anchor\"\n                (clicked)=\"onClick($event)\">\n                    {{ link.text }}\n                </n7-anchor-wrapper>\n            </li>\n        </ul>\n    </div>\n\n    <div *ngIf=\"column.images\" class=\"n7-footer__column-images\">\n        <n7-anchor-wrapper  *ngFor=\"let image of column.images\"\n        [classes]=\"image.classes || ''\"\n        [data]=\"image.anchor\"\n        (clicked)=\"onClick($event)\">\n            <img \n            [src]=\"image.url\" \n            [attr.alt]=\"image.alttext\" />\n        </n7-anchor-wrapper>\n    </div>\n</ng-template>", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: FooterComponent, decorators: [{
+FooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: FooterComponent, selector: "n7-footer", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-footer {{data.classes || ''}}\">\n    <div class=\"n7-footer__content\">\n        <!-- Loop footer content columns -->\n        <div class=\"n7-footer__column {{column.classes || ''}}\" *ngFor=\"let column of data.columns\">\n            <ng-container *ngTemplateOutlet=\"footerColumn; context:{$implicit: column}\"></ng-container>\n        </div>\n    </div>\n</div>\n\n<!-- Template: Columns -->\n<ng-template #footerColumn let-column>\n    <h2 *ngIf=\"column.title\" class=\"n7-footer__column-title\">\n        {{ column.title }}\n    </h2>\n    <p *ngIf=\"column.text\" \n       class=\"n7-footer__column-text\"\n       [innerHTML]=\"column.text\">\n    </p>\n    <div *ngIf=\"column.links\" class=\"n7-footer__column-nav\">\n        <ul class=\"n7-footer__column-nav-list\">\n            <li *ngFor=\"let link of column.links\"\n                class=\"n7-footer__column-nav-item {{link.classes || ''}}\">\n                <n7-anchor-wrapper [classes]=\"'n7-footer__column-nav-link'\"\n                [data]=\"link.anchor\"\n                (clicked)=\"onClick($event)\">\n                    {{ link.text }}\n                </n7-anchor-wrapper>\n            </li>\n        </ul>\n    </div>\n\n    <div *ngIf=\"column.images\" class=\"n7-footer__column-images\">\n        <n7-anchor-wrapper  *ngFor=\"let image of column.images\"\n        [classes]=\"image.classes || ''\"\n        [data]=\"image.anchor\"\n        (clicked)=\"onClick($event)\">\n            <img \n            [src]=\"image.url\" \n            [attr.alt]=\"image.alttext\" />\n        </n7-anchor-wrapper>\n    </div>\n</ng-template>", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'n7-footer', template: "<div *ngIf=\"data\" class=\"n7-footer {{data.classes || ''}}\">\n    <div class=\"n7-footer__content\">\n        <!-- Loop footer content columns -->\n        <div class=\"n7-footer__column {{column.classes || ''}}\" *ngFor=\"let column of data.columns\">\n            <ng-container *ngTemplateOutlet=\"footerColumn; context:{$implicit: column}\"></ng-container>\n        </div>\n    </div>\n</div>\n\n<!-- Template: Columns -->\n<ng-template #footerColumn let-column>\n    <h2 *ngIf=\"column.title\" class=\"n7-footer__column-title\">\n        {{ column.title }}\n    </h2>\n    <p *ngIf=\"column.text\" \n       class=\"n7-footer__column-text\"\n       [innerHTML]=\"column.text\">\n    </p>\n    <div *ngIf=\"column.links\" class=\"n7-footer__column-nav\">\n        <ul class=\"n7-footer__column-nav-list\">\n            <li *ngFor=\"let link of column.links\"\n                class=\"n7-footer__column-nav-item {{link.classes || ''}}\">\n                <n7-anchor-wrapper [classes]=\"'n7-footer__column-nav-link'\"\n                [data]=\"link.anchor\"\n                (clicked)=\"onClick($event)\">\n                    {{ link.text }}\n                </n7-anchor-wrapper>\n            </li>\n        </ul>\n    </div>\n\n    <div *ngIf=\"column.images\" class=\"n7-footer__column-images\">\n        <n7-anchor-wrapper  *ngFor=\"let image of column.images\"\n        [classes]=\"image.classes || ''\"\n        [data]=\"image.anchor\"\n        (clicked)=\"onClick($event)\">\n            <img \n            [src]=\"image.url\" \n            [attr.alt]=\"image.alttext\" />\n        </n7-anchor-wrapper>\n    </div>\n</ng-template>" }]
         }], propDecorators: { data: [{
@@ -732,9 +777,9 @@ class HeaderComponent {
         this.emit('keyup', { payload, keyCode, value });
     }
 }
-HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: HeaderComponent, selector: "n7-header", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<header *ngIf=\"data\" class=\"n7-header {{data.classes || ''}}\">\n    <div class=\"n7-header__content\">\n\n        <!-- Logo and title -->\n        <div class=\"n7-header__logo-title {{data.logo.classes || ''}}\">\n            <n7-anchor-wrapper [classes]=\"'n7-header__logo-link'\"\n            [data]=\"data.logo.anchor\"\n            (clicked)=\"onClick($event)\">\n                <img class=\"n7-header__logo\"\n                *ngIf=\"data.logo.image\"\n                [src]=\"data.logo.image\"\n                alt=\"{{ data.logo.title }}\" />\n                <div class=\"n7-header__title-subtitle\">\n                    <h1 class=\"n7-header__title\">\n                        {{ data.logo.title }}\n                    </h1>\n                    <h2 class=\"n7-header__subtitle\" *ngIf=\"data.logo.subtitle\">\n                        {{ data.logo.subtitle }}\n                    </h2>\n                </div>\n            </n7-anchor-wrapper>\n        </div>\n\n        <!-- Main menu -->\n        <nav class=\"n7-header__nav {{data.nav.classes || ''}}\" *ngIf=\"data.nav\">\n            <div class=\"n7-header__nav-content\">\n                <ul class=\"n7-header__nav-list\">\n                    <li class=\"n7-header__nav-item {{item.classes || ''}}\" *ngFor=\"let item of data.nav.items\">\n                        <n7-anchor-wrapper [classes]=\"'n7-header__nav-link'\"\n                        [data]=\"item.anchor\"\n                        (clicked)=\"onClick($event)\">\n                            <span class=\"n7-header__nav-icon {{item.icon}}\" *ngIf=\"item.icon\"></span>\n                            <span class=\"n7-header__nav-label\" *ngIf=\"item.text\">\n                                {{ item.text }}\n                            </span>\n                        </n7-anchor-wrapper>\n                        <!-- Sublevel -->\n                        <ul class=\"n7-header__subnav-list\" *ngIf=\"item.subnav\">\n                            <li class=\"n7-header__subnav-item {{subitem.classes || ''}}\" *ngFor=\"let subitem of item.subnav\">\n                                <n7-anchor-wrapper [classes]=\"'n7-header__subnav-link'\"\n                                [data]=\"subitem.anchor\"\n                                (clicked)=\"onClick($event)\">\n                                    <span class=\"n7-header__subnav-icon {{subitem.icon}}\" *ngIf=\"subitem.icon\"></span>\n                                    <span class=\"n7-header__subnav-label\" *ngIf=\"subitem.text\">\n                                        {{ subitem.text }}\n                                    </span>\n                                </n7-anchor-wrapper>\n                            </li>\n                        </ul>\n                    </li>\n                </ul>\n            </div>\n        </nav>\n\n        <!-- Mobile menu toggle -->\n        <div class=\"n7-header__mobile-menu-toggle\">\n            <span class=\"n7-header__mobile-menu-icon n7-icon-menu\" \n                (click)=\"onClick(data.menuToggle.open.payload)\"></span>\n        </div>\n\n        <!-- Mobile menu close -->\n        <span class=\"n7-header__mobile-menu-close n7-icon-close\" \n            (click)=\"onClick(data.menuToggle.close.payload)\"></span>\n\n        <!-- Tools: search, notifications, use profile or login/signup -->\n        <div class=\"n7-header__tools\">\n            \n            <div class=\"n7-header__search {{data.search.classes || ''}}\" *ngIf=\"data.search\">\n                <input class=\"n7-header__search-input\" \n                    type=\"search\" \n                    name=\"search\" \n                    placeholder=\"{{ data.search.hint || ''}}\" \n                    (keyup)=\"onKeyUp(data.search.payload, $event.keyCode, $event.target.value)\"/>\n                <button class=\"n7-header__search-btn\" type=\"submit\" (click)=\"onClick(data.search.payload)\">\n                    <span class=\"n7-header__search-btn-label\">\n                        Search\n                    </span>\n                </button>\n            </div>\n            \n            <div class=\"n7-header__actions\" *ngIf=\"data.actions\">\n                <n7-anchor-wrapper *ngFor=\"let action of data.actions\" \n                [classes]=\"'n7-header__action' + (action.classes || '')\"\n                [data]=\"action.anchor\"\n                (clicked)=\"onClick($event)\">\n                    <span class=\"n7-header__action-icon {{ action.icon }}\"></span>\n                    <span *ngIf=\"action.badge\" class=\"n7-header__action-badge {{ action.badge.text ? 'has-text' : '' }}\">\n                        {{ action.badge.text }}\n                    </span>\n                </n7-anchor-wrapper>\n            </div>\n\n            <div class=\"n7-header__buttons\" *ngIf=\"data.buttons\">\n                <n7-anchor-wrapper *ngFor=\"let button of data.buttons\"\n                [classes]=\"button.classes\" \n                [data]=\"button.anchor\"\n                (clicked)=\"onClick($event)\">\n                <span class=\"\" *ngIf=\"button.text\">\n                    {{ button.text }}\n                </span>\n                <span class=\"{{button.icon}}\" *ngIf=\"button.icon\"></span>\n                </n7-anchor-wrapper>\n            </div>\n\n            <div class=\"n7-header__user {{data.user.classes || ''}}\" *ngIf=\"data.user\">\n                <n7-anchor-wrapper [classes]=\"'n7-header__user-content'\"\n                [data]=\"data.user.anchor\"\n                (clicked)=\"onClick($event)\">\n                    <img *ngIf=\"data.user.img\"\n                    class=\"n7-header__user-img\"  \n                    [src]=\"data.user.img\"/>\n                    <p class=\"n7-header__user-name\" *ngIf=\"data.user.name\">\n                        <span class=\"n7-header__user-name-label\">\n                            {{ data.user.name }}\n                        </span>\n                    </p>\n                </n7-anchor-wrapper>\n            </div>\n        </div>\n\n    </div>\n</header>\n\n", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: HeaderComponent, decorators: [{
+HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: HeaderComponent, selector: "n7-header", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<header *ngIf=\"data\" class=\"n7-header {{data.classes || ''}}\">\n    <div class=\"n7-header__content\">\n\n        <!-- Logo and title -->\n        <div class=\"n7-header__logo-title {{data.logo.classes || ''}}\">\n            <n7-anchor-wrapper [classes]=\"'n7-header__logo-link'\"\n            [data]=\"data.logo.anchor\"\n            (clicked)=\"onClick($event)\">\n                <img class=\"n7-header__logo\"\n                *ngIf=\"data.logo.image\"\n                [src]=\"data.logo.image\"\n                alt=\"{{ data.logo.title }}\" />\n                <div class=\"n7-header__title-subtitle\">\n                    <h1 class=\"n7-header__title\">\n                        {{ data.logo.title }}\n                    </h1>\n                    <h2 class=\"n7-header__subtitle\" *ngIf=\"data.logo.subtitle\">\n                        {{ data.logo.subtitle }}\n                    </h2>\n                </div>\n            </n7-anchor-wrapper>\n        </div>\n\n        <!-- Main menu -->\n        <nav class=\"n7-header__nav {{data.nav.classes || ''}}\" *ngIf=\"data.nav\">\n            <div class=\"n7-header__nav-content\">\n                <ul class=\"n7-header__nav-list\">\n                    <li class=\"n7-header__nav-item {{item.classes || ''}}\" *ngFor=\"let item of data.nav.items\">\n                        <n7-anchor-wrapper [classes]=\"'n7-header__nav-link'\"\n                        [data]=\"item.anchor\"\n                        (clicked)=\"onClick($event)\">\n                            <span class=\"n7-header__nav-icon {{item.icon}}\" *ngIf=\"item.icon\"></span>\n                            <span class=\"n7-header__nav-label\" *ngIf=\"item.text\">\n                                {{ item.text }}\n                            </span>\n                        </n7-anchor-wrapper>\n                        <!-- Sublevel -->\n                        <ul class=\"n7-header__subnav-list\" *ngIf=\"item.subnav\">\n                            <li class=\"n7-header__subnav-item {{subitem.classes || ''}}\" *ngFor=\"let subitem of item.subnav\">\n                                <n7-anchor-wrapper [classes]=\"'n7-header__subnav-link'\"\n                                [data]=\"subitem.anchor\"\n                                (clicked)=\"onClick($event)\">\n                                    <span class=\"n7-header__subnav-icon {{subitem.icon}}\" *ngIf=\"subitem.icon\"></span>\n                                    <span class=\"n7-header__subnav-label\" *ngIf=\"subitem.text\">\n                                        {{ subitem.text }}\n                                    </span>\n                                </n7-anchor-wrapper>\n                            </li>\n                        </ul>\n                    </li>\n                </ul>\n            </div>\n        </nav>\n\n        <!-- Mobile menu toggle -->\n        <div class=\"n7-header__mobile-menu-toggle\">\n            <span class=\"n7-header__mobile-menu-icon n7-icon-menu\" \n                (click)=\"onClick(data.menuToggle.open.payload)\"></span>\n        </div>\n\n        <!-- Mobile menu close -->\n        <span class=\"n7-header__mobile-menu-close n7-icon-close\" \n            (click)=\"onClick(data.menuToggle.close.payload)\"></span>\n\n        <!-- Tools: search, notifications, use profile or login/signup -->\n        <div class=\"n7-header__tools\">\n            \n            <div class=\"n7-header__search {{data.search.classes || ''}}\" *ngIf=\"data.search\">\n                <input class=\"n7-header__search-input\" \n                    type=\"search\" \n                    name=\"search\" \n                    placeholder=\"{{ data.search.hint || ''}}\" \n                    (keyup)=\"onKeyUp(data.search.payload, $event.keyCode, $event.target.value)\"/>\n                <button class=\"n7-header__search-btn\" type=\"submit\" (click)=\"onClick(data.search.payload)\">\n                    <span class=\"n7-header__search-btn-label\">\n                        Search\n                    </span>\n                </button>\n            </div>\n            \n            <div class=\"n7-header__actions\" *ngIf=\"data.actions\">\n                <n7-anchor-wrapper *ngFor=\"let action of data.actions\" \n                [classes]=\"'n7-header__action' + (action.classes || '')\"\n                [data]=\"action.anchor\"\n                (clicked)=\"onClick($event)\">\n                    <span class=\"n7-header__action-icon {{ action.icon }}\"></span>\n                    <span *ngIf=\"action.badge\" class=\"n7-header__action-badge {{ action.badge.text ? 'has-text' : '' }}\">\n                        {{ action.badge.text }}\n                    </span>\n                </n7-anchor-wrapper>\n            </div>\n\n            <div class=\"n7-header__buttons\" *ngIf=\"data.buttons\">\n                <n7-anchor-wrapper *ngFor=\"let button of data.buttons\"\n                [classes]=\"button.classes\" \n                [data]=\"button.anchor\"\n                (clicked)=\"onClick($event)\">\n                <span class=\"\" *ngIf=\"button.text\">\n                    {{ button.text }}\n                </span>\n                <span class=\"{{button.icon}}\" *ngIf=\"button.icon\"></span>\n                </n7-anchor-wrapper>\n            </div>\n\n            <div class=\"n7-header__user {{data.user.classes || ''}}\" *ngIf=\"data.user\">\n                <n7-anchor-wrapper [classes]=\"'n7-header__user-content'\"\n                [data]=\"data.user.anchor\"\n                (clicked)=\"onClick($event)\">\n                    <img *ngIf=\"data.user.img\"\n                    class=\"n7-header__user-img\"  \n                    [src]=\"data.user.img\"/>\n                    <p class=\"n7-header__user-name\" *ngIf=\"data.user.name\">\n                        <span class=\"n7-header__user-name-label\">\n                            {{ data.user.name }}\n                        </span>\n                    </p>\n                </n7-anchor-wrapper>\n            </div>\n        </div>\n\n    </div>\n</header>\n\n", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'n7-header', template: "<header *ngIf=\"data\" class=\"n7-header {{data.classes || ''}}\">\n    <div class=\"n7-header__content\">\n\n        <!-- Logo and title -->\n        <div class=\"n7-header__logo-title {{data.logo.classes || ''}}\">\n            <n7-anchor-wrapper [classes]=\"'n7-header__logo-link'\"\n            [data]=\"data.logo.anchor\"\n            (clicked)=\"onClick($event)\">\n                <img class=\"n7-header__logo\"\n                *ngIf=\"data.logo.image\"\n                [src]=\"data.logo.image\"\n                alt=\"{{ data.logo.title }}\" />\n                <div class=\"n7-header__title-subtitle\">\n                    <h1 class=\"n7-header__title\">\n                        {{ data.logo.title }}\n                    </h1>\n                    <h2 class=\"n7-header__subtitle\" *ngIf=\"data.logo.subtitle\">\n                        {{ data.logo.subtitle }}\n                    </h2>\n                </div>\n            </n7-anchor-wrapper>\n        </div>\n\n        <!-- Main menu -->\n        <nav class=\"n7-header__nav {{data.nav.classes || ''}}\" *ngIf=\"data.nav\">\n            <div class=\"n7-header__nav-content\">\n                <ul class=\"n7-header__nav-list\">\n                    <li class=\"n7-header__nav-item {{item.classes || ''}}\" *ngFor=\"let item of data.nav.items\">\n                        <n7-anchor-wrapper [classes]=\"'n7-header__nav-link'\"\n                        [data]=\"item.anchor\"\n                        (clicked)=\"onClick($event)\">\n                            <span class=\"n7-header__nav-icon {{item.icon}}\" *ngIf=\"item.icon\"></span>\n                            <span class=\"n7-header__nav-label\" *ngIf=\"item.text\">\n                                {{ item.text }}\n                            </span>\n                        </n7-anchor-wrapper>\n                        <!-- Sublevel -->\n                        <ul class=\"n7-header__subnav-list\" *ngIf=\"item.subnav\">\n                            <li class=\"n7-header__subnav-item {{subitem.classes || ''}}\" *ngFor=\"let subitem of item.subnav\">\n                                <n7-anchor-wrapper [classes]=\"'n7-header__subnav-link'\"\n                                [data]=\"subitem.anchor\"\n                                (clicked)=\"onClick($event)\">\n                                    <span class=\"n7-header__subnav-icon {{subitem.icon}}\" *ngIf=\"subitem.icon\"></span>\n                                    <span class=\"n7-header__subnav-label\" *ngIf=\"subitem.text\">\n                                        {{ subitem.text }}\n                                    </span>\n                                </n7-anchor-wrapper>\n                            </li>\n                        </ul>\n                    </li>\n                </ul>\n            </div>\n        </nav>\n\n        <!-- Mobile menu toggle -->\n        <div class=\"n7-header__mobile-menu-toggle\">\n            <span class=\"n7-header__mobile-menu-icon n7-icon-menu\" \n                (click)=\"onClick(data.menuToggle.open.payload)\"></span>\n        </div>\n\n        <!-- Mobile menu close -->\n        <span class=\"n7-header__mobile-menu-close n7-icon-close\" \n            (click)=\"onClick(data.menuToggle.close.payload)\"></span>\n\n        <!-- Tools: search, notifications, use profile or login/signup -->\n        <div class=\"n7-header__tools\">\n            \n            <div class=\"n7-header__search {{data.search.classes || ''}}\" *ngIf=\"data.search\">\n                <input class=\"n7-header__search-input\" \n                    type=\"search\" \n                    name=\"search\" \n                    placeholder=\"{{ data.search.hint || ''}}\" \n                    (keyup)=\"onKeyUp(data.search.payload, $event.keyCode, $event.target.value)\"/>\n                <button class=\"n7-header__search-btn\" type=\"submit\" (click)=\"onClick(data.search.payload)\">\n                    <span class=\"n7-header__search-btn-label\">\n                        Search\n                    </span>\n                </button>\n            </div>\n            \n            <div class=\"n7-header__actions\" *ngIf=\"data.actions\">\n                <n7-anchor-wrapper *ngFor=\"let action of data.actions\" \n                [classes]=\"'n7-header__action' + (action.classes || '')\"\n                [data]=\"action.anchor\"\n                (clicked)=\"onClick($event)\">\n                    <span class=\"n7-header__action-icon {{ action.icon }}\"></span>\n                    <span *ngIf=\"action.badge\" class=\"n7-header__action-badge {{ action.badge.text ? 'has-text' : '' }}\">\n                        {{ action.badge.text }}\n                    </span>\n                </n7-anchor-wrapper>\n            </div>\n\n            <div class=\"n7-header__buttons\" *ngIf=\"data.buttons\">\n                <n7-anchor-wrapper *ngFor=\"let button of data.buttons\"\n                [classes]=\"button.classes\" \n                [data]=\"button.anchor\"\n                (clicked)=\"onClick($event)\">\n                <span class=\"\" *ngIf=\"button.text\">\n                    {{ button.text }}\n                </span>\n                <span class=\"{{button.icon}}\" *ngIf=\"button.icon\"></span>\n                </n7-anchor-wrapper>\n            </div>\n\n            <div class=\"n7-header__user {{data.user.classes || ''}}\" *ngIf=\"data.user\">\n                <n7-anchor-wrapper [classes]=\"'n7-header__user-content'\"\n                [data]=\"data.user.anchor\"\n                (clicked)=\"onClick($event)\">\n                    <img *ngIf=\"data.user.img\"\n                    class=\"n7-header__user-img\"  \n                    [src]=\"data.user.img\"/>\n                    <p class=\"n7-header__user-name\" *ngIf=\"data.user.name\">\n                        <span class=\"n7-header__user-name-label\">\n                            {{ data.user.name }}\n                        </span>\n                    </p>\n                </n7-anchor-wrapper>\n            </div>\n        </div>\n\n    </div>\n</header>\n\n" }]
         }], propDecorators: { data: [{
@@ -767,9 +812,9 @@ class HeroComponent {
         this.emit('enter', { inputPayload: payload, value });
     }
 }
-HeroComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: HeroComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-HeroComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: HeroComponent, selector: "n7-hero", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<section *ngIf=\"data\" class=\"n7-hero {{data.classes || ''}}\" \n    [ngClass]=\"{ \n        'has-image' : !!data.image, \n        'has-background-image': !!data.backgroundImage \n    }\"\n    [ngStyle]=\"{ \n        'background-image': getBackgroundImageCssValue(data.backgroundImage)\n    }\">\n    <div class=\"n7-hero__content\">\n        \n        <div class=\"n7-hero__text-wrapper\">\n            <h1 class=\"n7-hero__title\" [innerHTML]=\"data.title\"></h1>\n            <div class=\"n7-hero__text\" *ngIf=\"data.text\" [innerHTML]=\"data.text\"></div>\n            <div class=\"n7-hero__input-wrapper\" *ngIf=\"data.input || data.button\">\n                <input type=\"text\" \n                       class=\"n7-hero__input\" \n                       placeholder=\"{{data.input.placeholder || ''}}\" \n                       *ngIf=\"data.input\" \n                       (input)=\"onInputChange(data.input.payload, $event.target.value)\" \n                       (keyup.enter)=\"onInputEnter(data.input.payload, $event.target.value)\">\n                <span class=\"n7-hero__input-icon {{data.input.icon || ''}}\" \n                      *ngIf=\"data.input && data.input.icon\" \n                      (click)=\"onClick(data.input.payload)\"></span>\n                <ng-container *ngIf=\"data.button\">\n                    <n7-anchor-wrapper [classes]=\"'n7-hero__btn n7-btn n7-btn-cta n7-btn-l'\"\n                    [data]=\"data.button.anchor\"\n                    (clicked)=\"onClick($event)\">\n                        {{data.button.text}}\n                    </n7-anchor-wrapper>\n                </ng-container>\n            </div>\n        </div>\n        \n        <div class=\"n7-hero__image-wrapper\" *ngIf=\"data.image\">\n            <img class=\"n7-hero__image\" src=\"{{data.image}}\" alt=\"\">\n        </div>\n\n    </div>\n</section>", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: HeroComponent, decorators: [{
+HeroComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: HeroComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+HeroComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: HeroComponent, selector: "n7-hero", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<section *ngIf=\"data\" class=\"n7-hero {{data.classes || ''}}\" \n    [ngClass]=\"{ \n        'has-image' : !!data.image, \n        'has-background-image': !!data.backgroundImage \n    }\"\n    [ngStyle]=\"{ \n        'background-image': getBackgroundImageCssValue(data.backgroundImage)\n    }\">\n    <div class=\"n7-hero__content\">\n        \n        <div class=\"n7-hero__text-wrapper\">\n            <h1 class=\"n7-hero__title\" [innerHTML]=\"data.title\"></h1>\n            <div class=\"n7-hero__text\" *ngIf=\"data.text\" [innerHTML]=\"data.text\"></div>\n            <div class=\"n7-hero__input-wrapper\" *ngIf=\"data.input || data.button\">\n                <input type=\"text\" \n                       class=\"n7-hero__input\" \n                       placeholder=\"{{data.input.placeholder || ''}}\" \n                       *ngIf=\"data.input\" \n                       (input)=\"onInputChange(data.input.payload, $event.target.value)\" \n                       (keyup.enter)=\"onInputEnter(data.input.payload, $event.target.value)\">\n                <span class=\"n7-hero__input-icon {{data.input.icon || ''}}\" \n                      *ngIf=\"data.input && data.input.icon\" \n                      (click)=\"onClick(data.input.payload)\"></span>\n                <ng-container *ngIf=\"data.button\">\n                    <n7-anchor-wrapper [classes]=\"'n7-hero__btn n7-btn n7-btn-cta n7-btn-l'\"\n                    [data]=\"data.button.anchor\"\n                    (clicked)=\"onClick($event)\">\n                        {{data.button.text}}\n                    </n7-anchor-wrapper>\n                </ng-container>\n            </div>\n        </div>\n        \n        <div class=\"n7-hero__image-wrapper\" *ngIf=\"data.image\">\n            <img class=\"n7-hero__image\" src=\"{{data.image}}\" alt=\"\">\n        </div>\n\n    </div>\n</section>", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: HeroComponent, decorators: [{
             type: Component,
             args: [{ selector: 'n7-hero', template: "<section *ngIf=\"data\" class=\"n7-hero {{data.classes || ''}}\" \n    [ngClass]=\"{ \n        'has-image' : !!data.image, \n        'has-background-image': !!data.backgroundImage \n    }\"\n    [ngStyle]=\"{ \n        'background-image': getBackgroundImageCssValue(data.backgroundImage)\n    }\">\n    <div class=\"n7-hero__content\">\n        \n        <div class=\"n7-hero__text-wrapper\">\n            <h1 class=\"n7-hero__title\" [innerHTML]=\"data.title\"></h1>\n            <div class=\"n7-hero__text\" *ngIf=\"data.text\" [innerHTML]=\"data.text\"></div>\n            <div class=\"n7-hero__input-wrapper\" *ngIf=\"data.input || data.button\">\n                <input type=\"text\" \n                       class=\"n7-hero__input\" \n                       placeholder=\"{{data.input.placeholder || ''}}\" \n                       *ngIf=\"data.input\" \n                       (input)=\"onInputChange(data.input.payload, $event.target.value)\" \n                       (keyup.enter)=\"onInputEnter(data.input.payload, $event.target.value)\">\n                <span class=\"n7-hero__input-icon {{data.input.icon || ''}}\" \n                      *ngIf=\"data.input && data.input.icon\" \n                      (click)=\"onClick(data.input.payload)\"></span>\n                <ng-container *ngIf=\"data.button\">\n                    <n7-anchor-wrapper [classes]=\"'n7-hero__btn n7-btn n7-btn-cta n7-btn-l'\"\n                    [data]=\"data.button.anchor\"\n                    (clicked)=\"onClick($event)\">\n                        {{data.button.text}}\n                    </n7-anchor-wrapper>\n                </ng-container>\n            </div>\n        </div>\n        \n        <div class=\"n7-hero__image-wrapper\" *ngIf=\"data.image\">\n            <img class=\"n7-hero__image\" src=\"{{data.image}}\" alt=\"\">\n        </div>\n\n    </div>\n</section>" }]
         }], propDecorators: { data: [{
@@ -844,6 +889,7 @@ class HistogramRangeComponent {
             const svg = d3
                 .select(`#${containerId}`)
                 .attr('viewBox', `0 0 ${width + margin.left + margin.right} ${height + margin.top + margin.bottom}`);
+            this.svg = svg;
             const scaleHeight = d3
                 .scaleSymlog() // most similar scale to the original
                 .domain([0, d3.max(items, (d) => d.value)])
@@ -892,7 +938,7 @@ class HistogramRangeComponent {
                 .attr('fill', 'url(#gradient)');
             barsLayer // catch bar events
                 .on('mousemove', (event) => {
-                const year = XtoLABEL(event.offsetX - margin.left);
+                const year = XtoLABEL(this.getEventCoords(event).x);
                 d3.selectAll('rect.bars').attr('fill', (d) => {
                     if (year === d.label)
                         return '#B0CCF8';
@@ -903,7 +949,7 @@ class HistogramRangeComponent {
                 d3.selectAll('rect.bars').attr('fill', (d) => colourBars(d));
             })
                 .on('click', (event) => {
-                const label = XtoLABEL(event.offsetX - margin.left);
+                const label = XtoLABEL(this.getEventCoords(event).x);
                 const xAxisValue = LABELtoX(label) + LABELtoX.bandwidth() / 2;
                 const newValue = {
                     x: xAxisValue,
@@ -969,8 +1015,8 @@ class HistogramRangeComponent {
             // eslint-disable-next-line @typescript-eslint/no-this-alias
             const self = this; // FIXME: Allow use of class "this" inside dragging update;
             /**
-             * Animate the elements while the user is dragging one of the range selectors
-             */
+           * Animate the elements while the user is dragging one of the range selectors
+           */
             function draggingUpdate(event, data) {
                 const label = XtoLABEL(event.x);
                 const xAxisValue = LABELtoX(label) + LABELtoX.bandwidth() / 2;
@@ -1082,20 +1128,22 @@ class HistogramRangeComponent {
             this.d3.selectAll('rect.bars').attr('fill', (d) => this.colourBars(d));
         };
         /** Public api that allows to dinamically change the slider position */
-        this.setSliders = ([startLabel, endLabel]) => {
+        this.setSliders = ([startLabel, endLabel], emit = true) => {
+            // setSliders([1450, 1575])
             this.data.setSliders = [`${startLabel}`, `${endLabel}`];
             this.draw();
             this.d3.selectAll('rect.bars').attr('fill', (d) => this.colourBars(d));
             const range = this.getSelectedRange();
-            this.emit('rangeselected', range);
+            if (emit)
+                this.emit('rangeselected', range);
             this.textCollision(this.sliders);
             return range;
         };
     }
     ngAfterContentChecked() {
         /*
-         Waits for the dom to be loaded, then fires the draw function
-         that renders the chart.
+             Waits for the dom to be loaded, then fires the draw function
+             that renders the chart.
         */
         if (this.data) {
             if (this._loaded)
@@ -1116,7 +1164,7 @@ class HistogramRangeComponent {
                         });
                     }
                     // eslint-disable-next-line dot-notation
-                    window['setSliders'] = this.setSliders;
+                    // window['setSliders'] = this.setSliders;
                 });
             });
         }
@@ -1130,6 +1178,17 @@ class HistogramRangeComponent {
             .paddingInner(0.17)
             .paddingOuter(1);
     }
+    /**
+     * Get an event with viewBox coordinates and
+     * parse them in absolute coordinates
+     */
+    getEventCoords(event) {
+        const m = event.target.getScreenCTM();
+        const point = this.svg.node().createSVGPoint();
+        point.x = event.clientX;
+        point.y = event.clientY;
+        return point.matrixTransform(m.inverse());
+    }
     /** Emits an event when the component has loaded */
     emitLoaded(payload) {
         if (!this.emit)
@@ -1137,9 +1196,9 @@ class HistogramRangeComponent {
         this.emit('loaded', payload);
     }
 }
-HistogramRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: HistogramRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-HistogramRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: HistogramRangeComponent, selector: "n7-histogram-range", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-histogram-range\">\n    <svg #histogramRange [id]=\"data.containerId\"></svg>\n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: HistogramRangeComponent, decorators: [{
+HistogramRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: HistogramRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+HistogramRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: HistogramRangeComponent, selector: "n7-histogram-range", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-histogram-range\">\n    <svg #histogramRange [id]=\"data.containerId\"></svg>\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: HistogramRangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'n7-histogram-range', template: "<div *ngIf=\"data\" class=\"n7-histogram-range\">\n    <svg #histogramRange [id]=\"data.containerId\"></svg>\n</div>\n" }]
         }], propDecorators: { data: [{
@@ -1187,9 +1246,9 @@ class ImageViewerComponent {
         this.emit('thumbclick', payload);
     }
 }
-ImageViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ImageViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ImageViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: ImageViewerComponent, selector: "n7-image-viewer", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-image-viewer {{data.classes || ''}}\">\n    <!-- OSD viewer -->\n    <div id=\"{{data.viewerId}}\" class=\"n7-image-viewer__viewer\">\n    </div>\n\n    <!-- Zoom controls -->\n    <div class=\"n7-image-viewer__controls\">\n        <ul class=\"n7-image-viewer__controls-list\">\n            <li class=\"n7-image-viewer__controls-item\" id=\"n7-image-viewer-zoom-in\">\n                <span class=\"n7-icon-search-plus\"></span>\n            </li>\n            <li class=\"n7-image-viewer__controls-item\" id=\"n7-image-viewer-zoom-out\">\n                <span class=\"n7-icon-search-minus\"></span>\n            </li>\n            <!--\n            <li class=\"n7-image-viewer__controls-item\" id=\"n7-image-viewer-full-screen\">\n                <span class=\"n7-icon-expand-arrows\"></span>\n            </li>\n            -->\n        </ul>\n    </div>\n\n    <!-- Navigation -->\n    <div *ngIf=\"!data.hideNavigation\" class=\"n7-image-viewer__prev\" id=\"n7-image-viewer-nav-prev\">\n        <span class=\"n7-icon-angle-left\"></span>\n    </div>\n\n    <div *ngIf=\"!data.hideNavigation\" class=\"n7-image-viewer__next\" id=\"n7-image-viewer-nav-next\">\n        <span class=\"n7-icon-angle-right\"></span>\n    </div>\n</div>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ImageViewerComponent, decorators: [{
+ImageViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ImageViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ImageViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ImageViewerComponent, selector: "n7-image-viewer", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-image-viewer {{data.classes || ''}}\">\n    <!-- OSD viewer -->\n    <div id=\"{{data.viewerId}}\" class=\"n7-image-viewer__viewer\">\n    </div>\n\n    <!-- Zoom controls -->\n    <div class=\"n7-image-viewer__controls\">\n        <ul class=\"n7-image-viewer__controls-list\">\n            <li class=\"n7-image-viewer__controls-item\" id=\"n7-image-viewer-zoom-in\">\n                <span class=\"n7-icon-search-plus\"></span>\n            </li>\n            <li class=\"n7-image-viewer__controls-item\" id=\"n7-image-viewer-zoom-out\">\n                <span class=\"n7-icon-search-minus\"></span>\n            </li>\n            <!--\n            <li class=\"n7-image-viewer__controls-item\" id=\"n7-image-viewer-full-screen\">\n                <span class=\"n7-icon-expand-arrows\"></span>\n            </li>\n            -->\n        </ul>\n    </div>\n\n    <!-- Navigation -->\n    <div *ngIf=\"!data.hideNavigation\" class=\"n7-image-viewer__prev\" id=\"n7-image-viewer-nav-prev\">\n        <span class=\"n7-icon-angle-left\"></span>\n    </div>\n\n    <div *ngIf=\"!data.hideNavigation\" class=\"n7-image-viewer__next\" id=\"n7-image-viewer-nav-next\">\n        <span class=\"n7-icon-angle-right\"></span>\n    </div>\n</div>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ImageViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'n7-image-viewer', template: "<div *ngIf=\"data\" class=\"n7-image-viewer {{data.classes || ''}}\">\n    <!-- OSD viewer -->\n    <div id=\"{{data.viewerId}}\" class=\"n7-image-viewer__viewer\">\n    </div>\n\n    <!-- Zoom controls -->\n    <div class=\"n7-image-viewer__controls\">\n        <ul class=\"n7-image-viewer__controls-list\">\n            <li class=\"n7-image-viewer__controls-item\" id=\"n7-image-viewer-zoom-in\">\n                <span class=\"n7-icon-search-plus\"></span>\n            </li>\n            <li class=\"n7-image-viewer__controls-item\" id=\"n7-image-viewer-zoom-out\">\n                <span class=\"n7-icon-search-minus\"></span>\n            </li>\n            <!--\n            <li class=\"n7-image-viewer__controls-item\" id=\"n7-image-viewer-full-screen\">\n                <span class=\"n7-icon-expand-arrows\"></span>\n            </li>\n            -->\n        </ul>\n    </div>\n\n    <!-- Navigation -->\n    <div *ngIf=\"!data.hideNavigation\" class=\"n7-image-viewer__prev\" id=\"n7-image-viewer-nav-prev\">\n        <span class=\"n7-icon-angle-left\"></span>\n    </div>\n\n    <div *ngIf=\"!data.hideNavigation\" class=\"n7-image-viewer__next\" id=\"n7-image-viewer-nav-next\">\n        <span class=\"n7-icon-angle-right\"></span>\n    </div>\n</div>" }]
         }], propDecorators: { data: [{
@@ -1209,11 +1268,11 @@ class ImageViewerToolsComponent {
         this.emit('click', payload); // click
     }
 }
-ImageViewerToolsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ImageViewerToolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ImageViewerToolsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: ImageViewerToolsComponent, selector: "n7-image-viewer-tools", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<!-- <div *ngIf=\"data\" class=\"n7-image-viewer-tools\">\n    <div class=\"n7-image-viewer-tools__bar\">\n        <div class=\"n7-image-viewer-tools__controls\">\n            <div class=\"n7-image-viewer-tools__btn-container\">\n                <ng-container *ngIf=\"data.controls.description\">\n                    <n7-anchor-wrapper \n                    class=\"n7-hero__btn n7-btn n7-btn-cta n7-btn-l n7-image-viewer-tools__btnDescription {{data.classes.description.className || ''}}\"\n                    [data]=\"data.controls.description.anchor\"\n                    (clicked)=\"onClick($event)\">\n                        <span class=\"{{data.controls.description.icon}}\"></span>\n                    </n7-anchor-wrapper>\n                </ng-container>\n            </div>\n\n            <div class=\"n7-image-viewer-tools__btn-container\">\n                <ng-container *ngIf=\"data.controls.thumbs\">\n                    <n7-anchor-wrapper \n                    class=\"n7-hero__btn n7-btn n7-btn-cta n7-btn-l n7-image-viewer-tools__btnThumbs {{data.classes.thumbs.className || ''}}\"\n                    [data]=\"data.controls.thumbs.anchor\"\n                    (clicked)=\"onClick($event)\">\n                        <span class=\"{{data.controls.thumbs.icon}}\"></span>\n                    </n7-anchor-wrapper>\n                </ng-container>\n            </div>\n        </div>\n\n        <div class=\"n7-image-viewer-tools__thumbs\" \n            *ngIf=\"data.isVisible.thumbnails && data.images\" >\n            <div *ngFor=\"let img of data.images; let imgIndex = index\" \n                class=\"n7-image-viewer-tools__thumb-container\"\n                [class.active]=\"imgIndex == data.initial\">\n                <img\n                    src=\"{{img.thumb}}\"\n                    (click)=\"onClick(img.payload)\" >\n            </div>\n        </div>\n\n        <div class=\"n7-image-viewer-tools__description\" \n            *ngIf=\"data.isVisible.description\" >\n            <div [innerHTML]=\"data.description\"></div>\n            <div class=\"n7-image-viewer-tools__description-closebtn\"\n                (click)=\"onClick(data.controls.closedescription.anchor.payload)\">\n                <span class=\"{{data.controls.closedescription.icon}}\"></span>\n            </div>\n        </div>\n    </div>\n</div> -->\n\n<!-- n7-hero__btn n7-btn n7-btn-cta n7-btn-l n7-image-viewer-tools__btnDescription -->\n<!-- n7-hero__btn n7-btn n7-btn-cta n7-btn-l n7-image-viewer-tools__btnThumbs -->\n\n<div *ngIf=\"data\" class=\"n7-image-viewer-tools {{data.classes || ''}}\">\n    <div class=\"n7-image-viewer-tools__bar\">\n        <div class=\"n7-image-viewer-tools__controls\">\n            <div class=\"n7-image-viewer-tools__control-wrapper\">\n                <ng-container *ngIf=\"data.controls.description && data.description\">\n                    <n7-anchor-wrapper \n                    class=\"n7-image-viewer-tools__control-btn\"\n                    [ngClass]=\"{\n                        'is-active': data.controls.description.isActive\n                    }\"\n                    [data]=\"data.controls.description.anchor\"\n                    (clicked)=\"onClick($event)\">\n                    <!-- $event -->\n                        <span class=\"n7-image-viewer-tools__control-btn-icon {{data.controls.description.icon}}\"></span>\n                    </n7-anchor-wrapper>\n                </ng-container>\n            </div>\n\n            <div class=\"n7-image-viewer-tools__control-wrapper\">\n                <ng-container *ngIf=\"data.controls.thumbs\">\n                    <n7-anchor-wrapper \n                    class=\"n7-image-viewer-tools__control-btn\"\n                    [ngClass]=\"{\n                        'is-active': data.controls.thumbs.isActive\n                    }\"\n                    [data]=\"data.controls.thumbs.anchor\"\n                    (clicked)=\"onClick($event)\">\n                    <!-- $event -->\n                        <span class=\"n7-image-viewer-tools__control-btn-icon {{data.controls.thumbs.icon}}\"></span>\n                    </n7-anchor-wrapper>\n                </ng-container>\n            </div>\n        </div>\n\n        <div class=\"n7-image-viewer-tools__thumbs-description\">\n            <div class=\"n7-image-viewer-tools__thumbs\" \n                *ngIf=\"data.isVisible.thumbnails && data.images\" >\n                <div class=\"n7-image-viewer-tools__thumbs-strip\">\n                    <div *ngFor=\"let img of data.images; let imgIndex = index\" \n                        class=\"n7-image-viewer-tools__thumb\"\n                        [class.active]=\"imgIndex == data.initial\">\n                        <img\n                            class=\"n7-image-viewer-tools__thumb-image\"\n                            src=\"{{img.thumb}}\"\n                            (click)=\"onClick(img.payload)\" >\n                    </div>\n                </div> \n                \n                <ng-container *ngIf=\"data.navigation\">\n                    <div\n                    class=\"{{ data.navigation.prev.classes || '' }}\"\n                    (click)=\"onClick(data.navigation.prev.payload)\">\n                    <!-- (click)=\"\" -->\n                        <span class=\"n7-icon-angle-left\"></span>\n                    </div>\n                    <div\n                    class=\"{{ data.navigation.next.classes || '' }}\"\n                    (click)=\"onClick(data.navigation.next.payload)\">\n                        <span class=\"n7-icon-angle-right\"></span>\n                    </div>\n                </ng-container>\n\n                <!-- <ng-container *ngIf=\"data.navigation as nav\">\n                    <div \n                    classes=\"{{ nav.prev.classes || '' }}\" \n                    (click)=\"onClick(nav.prev.payload)\">\n                        <span class=\"n7-icon-angle-left\"></span>\n                    </div>\n                    <div \n                    classes=\"{{ nav.next.classes || '' }}\" \n                    (click)=\"onClick(nav.next.payload)\">\n                        <span class=\"n7-icon-angle-right\"></span>\n                    </div>\n                </ng-container> -->\n\n                <!-- <ng-container *ngIf=\"data.navigation as nav\">\n                    <div \n                    classes=\"{{ nav.prev.classes || '' }}\" \n                    (click)=\"onClick(nav.prev.payload)\">\n                        <span class=\"n7-icon-angle-left\"></span>\n                    </div>\n                    <div \n                    classes=\"{{ nav.next.classes || '' }}\" \n                    (click)=\"onClick(nav.next.payload)\">\n                        <span class=\"n7-icon-angle-right\"></span>\n                    </div>\n                </ng-container> -->\n            </div>\n\n            <div class=\"n7-image-viewer-tools__description\" \n                *ngIf=\"data.isVisible.description\" >\n                <div class=\"n7-image-viewer-tools__description-close\"\n                    (click)=\"onClick(data.controls.closedescription.anchor.payload)\">\n                    <!-- data.controls.closedescription.anchor.payload -->\n                    <span class=\"{{data.controls.closedescription.icon}}\"></span>\n                </div>\n                <div class=\"n7-image-viewer-tools__description-text-wrapper\">\n                    <div class=\"n7-image-viewer-tools__description-text\" [innerHTML]=\"data.description\"></div>\n                </div>\n                \n            </div>\n        </div> \n    </div>\n</div>\n", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ImageViewerToolsComponent, decorators: [{
+ImageViewerToolsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ImageViewerToolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ImageViewerToolsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ImageViewerToolsComponent, selector: "n7-image-viewer-tools", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<!-- <div *ngIf=\"data\" class=\"n7-image-viewer-tools\">\n    <div class=\"n7-image-viewer-tools__bar\">\n        <div class=\"n7-image-viewer-tools__controls\">\n            <div class=\"n7-image-viewer-tools__btn-container\">\n                <ng-container *ngIf=\"data.controls.description\">\n                    <n7-anchor-wrapper \n                    class=\"n7-hero__btn n7-btn n7-btn-cta n7-btn-l n7-image-viewer-tools__btnDescription {{data.classes.description.className || ''}}\"\n                    [data]=\"data.controls.description.anchor\"\n                    (clicked)=\"onClick($event)\">\n                        <span class=\"{{data.controls.description.icon}}\"></span>\n                    </n7-anchor-wrapper>\n                </ng-container>\n            </div>\n\n            <div class=\"n7-image-viewer-tools__btn-container\">\n                <ng-container *ngIf=\"data.controls.thumbs\">\n                    <n7-anchor-wrapper \n                    class=\"n7-hero__btn n7-btn n7-btn-cta n7-btn-l n7-image-viewer-tools__btnThumbs {{data.classes.thumbs.className || ''}}\"\n                    [data]=\"data.controls.thumbs.anchor\"\n                    (clicked)=\"onClick($event)\">\n                        <span class=\"{{data.controls.thumbs.icon}}\"></span>\n                    </n7-anchor-wrapper>\n                </ng-container>\n            </div>\n        </div>\n\n        <div class=\"n7-image-viewer-tools__thumbs\" \n            *ngIf=\"data.isVisible.thumbnails && data.images\" >\n            <div *ngFor=\"let img of data.images; let imgIndex = index\" \n                class=\"n7-image-viewer-tools__thumb-container\"\n                [class.active]=\"imgIndex == data.initial\">\n                <img\n                    src=\"{{img.thumb}}\"\n                    (click)=\"onClick(img.payload)\" >\n            </div>\n        </div>\n\n        <div class=\"n7-image-viewer-tools__description\" \n            *ngIf=\"data.isVisible.description\" >\n            <div [innerHTML]=\"data.description\"></div>\n            <div class=\"n7-image-viewer-tools__description-closebtn\"\n                (click)=\"onClick(data.controls.closedescription.anchor.payload)\">\n                <span class=\"{{data.controls.closedescription.icon}}\"></span>\n            </div>\n        </div>\n    </div>\n</div> -->\n\n<!-- n7-hero__btn n7-btn n7-btn-cta n7-btn-l n7-image-viewer-tools__btnDescription -->\n<!-- n7-hero__btn n7-btn n7-btn-cta n7-btn-l n7-image-viewer-tools__btnThumbs -->\n\n<div *ngIf=\"data\" class=\"n7-image-viewer-tools {{data.classes || ''}}\">\n    <div class=\"n7-image-viewer-tools__bar\">\n        <div class=\"n7-image-viewer-tools__controls\">\n            <div class=\"n7-image-viewer-tools__control-wrapper\">\n                <ng-container *ngIf=\"data.controls.description && data.description\">\n                    <n7-anchor-wrapper \n                    class=\"n7-image-viewer-tools__control-btn\"\n                    [ngClass]=\"{\n                        'is-active': data.controls.description.isActive\n                    }\"\n                    [data]=\"data.controls.description.anchor\"\n                    (click)=\"onClick($event)\">\n                    <!-- $event -->\n                        <span class=\"n7-image-viewer-tools__control-btn-icon {{data.controls.description.icon}}\"></span>\n                    </n7-anchor-wrapper>\n                </ng-container>\n            </div>\n\n            <div class=\"n7-image-viewer-tools__control-wrapper\">\n                <ng-container *ngIf=\"data.controls.thumbs\">\n                    <n7-anchor-wrapper \n                    class=\"n7-image-viewer-tools__control-btn\"\n                    [ngClass]=\"{\n                        'is-active': data.controls.thumbs.isActive\n                    }\"\n                    [data]=\"data.controls.thumbs.anchor\"\n                    (click)=\"onClick($event)\">\n                    <!-- $event -->\n                        <span class=\"n7-image-viewer-tools__control-btn-icon {{data.controls.thumbs.icon}}\"></span>\n                    </n7-anchor-wrapper>\n                </ng-container>\n            </div>\n        </div>\n\n        <div class=\"n7-image-viewer-tools__thumbs-description\">\n            <div class=\"n7-image-viewer-tools__thumbs\" \n                *ngIf=\"data.isVisible.thumbnails && data.images\" >\n                <div class=\"n7-image-viewer-tools__thumbs-strip\">\n                    <div *ngFor=\"let img of data.images; let imgIndex = index\" \n                        class=\"n7-image-viewer-tools__thumb\"\n                        [class.active]=\"imgIndex == data.initial\">\n                        <img\n                            class=\"n7-image-viewer-tools__thumb-image\"\n                            src=\"{{img.thumb}}\"\n                            (click)=\"onClick(img.payload)\" >\n                    </div>\n                </div> \n                \n                <ng-container *ngIf=\"data.navigation\">\n                    <div\n                    class=\"{{ data.navigation.prev.classes || '' }}\"\n                    (click)=\"onClick(data.navigation.prev.payload)\">\n                    <!-- (click)=\"\" -->\n                        <span class=\"n7-icon-angle-left\"></span>\n                    </div>\n                    <div\n                    class=\"{{ data.navigation.next.classes || '' }}\"\n                    (click)=\"onClick(data.navigation.next.payload)\">\n                        <span class=\"n7-icon-angle-right\"></span>\n                    </div>\n                </ng-container>\n\n                <!-- <ng-container *ngIf=\"data.navigation as nav\">\n                    <div \n                    classes=\"{{ nav.prev.classes || '' }}\" \n                    (click)=\"onClick(nav.prev.payload)\">\n                        <span class=\"n7-icon-angle-left\"></span>\n                    </div>\n                    <div \n                    classes=\"{{ nav.next.classes || '' }}\" \n                    (click)=\"onClick(nav.next.payload)\">\n                        <span class=\"n7-icon-angle-right\"></span>\n                    </div>\n                </ng-container> -->\n\n                <!-- <ng-container *ngIf=\"data.navigation as nav\">\n                    <div \n                    classes=\"{{ nav.prev.classes || '' }}\" \n                    (click)=\"onClick(nav.prev.payload)\">\n                        <span class=\"n7-icon-angle-left\"></span>\n                    </div>\n                    <div \n                    classes=\"{{ nav.next.classes || '' }}\" \n                    (click)=\"onClick(nav.next.payload)\">\n                        <span class=\"n7-icon-angle-right\"></span>\n                    </div>\n                </ng-container> -->\n            </div>\n\n            <div class=\"n7-image-viewer-tools__description\" \n                *ngIf=\"data.isVisible.description\" >\n                <div class=\"n7-image-viewer-tools__description-close\"\n                    (click)=\"onClick(data.controls.closedescription.anchor.payload)\">\n                    <!-- data.controls.closedescription.anchor.payload -->\n                    <span class=\"{{data.controls.closedescription.icon}}\"></span>\n                </div>\n                <div class=\"n7-image-viewer-tools__description-text-wrapper\">\n                    <div class=\"n7-image-viewer-tools__description-text\" [innerHTML]=\"data.description\"></div>\n                </div>\n                \n            </div>\n        </div> \n    </div>\n</div>\n", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ImageViewerToolsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'n7-image-viewer-tools', template: "<!-- <div *ngIf=\"data\" class=\"n7-image-viewer-tools\">\n    <div class=\"n7-image-viewer-tools__bar\">\n        <div class=\"n7-image-viewer-tools__controls\">\n            <div class=\"n7-image-viewer-tools__btn-container\">\n                <ng-container *ngIf=\"data.controls.description\">\n                    <n7-anchor-wrapper \n                    class=\"n7-hero__btn n7-btn n7-btn-cta n7-btn-l n7-image-viewer-tools__btnDescription {{data.classes.description.className || ''}}\"\n                    [data]=\"data.controls.description.anchor\"\n                    (clicked)=\"onClick($event)\">\n                        <span class=\"{{data.controls.description.icon}}\"></span>\n                    </n7-anchor-wrapper>\n                </ng-container>\n            </div>\n\n            <div class=\"n7-image-viewer-tools__btn-container\">\n                <ng-container *ngIf=\"data.controls.thumbs\">\n                    <n7-anchor-wrapper \n                    class=\"n7-hero__btn n7-btn n7-btn-cta n7-btn-l n7-image-viewer-tools__btnThumbs {{data.classes.thumbs.className || ''}}\"\n                    [data]=\"data.controls.thumbs.anchor\"\n                    (clicked)=\"onClick($event)\">\n                        <span class=\"{{data.controls.thumbs.icon}}\"></span>\n                    </n7-anchor-wrapper>\n                </ng-container>\n            </div>\n        </div>\n\n        <div class=\"n7-image-viewer-tools__thumbs\" \n            *ngIf=\"data.isVisible.thumbnails && data.images\" >\n            <div *ngFor=\"let img of data.images; let imgIndex = index\" \n                class=\"n7-image-viewer-tools__thumb-container\"\n                [class.active]=\"imgIndex == data.initial\">\n                <img\n                    src=\"{{img.thumb}}\"\n                    (click)=\"onClick(img.payload)\" >\n            </div>\n        </div>\n\n        <div class=\"n7-image-viewer-tools__description\" \n            *ngIf=\"data.isVisible.description\" >\n            <div [innerHTML]=\"data.description\"></div>\n            <div class=\"n7-image-viewer-tools__description-closebtn\"\n                (click)=\"onClick(data.controls.closedescription.anchor.payload)\">\n                <span class=\"{{data.controls.closedescription.icon}}\"></span>\n            </div>\n        </div>\n    </div>\n</div> -->\n\n<!-- n7-hero__btn n7-btn n7-btn-cta n7-btn-l n7-image-viewer-tools__btnDescription -->\n<!-- n7-hero__btn n7-btn n7-btn-cta n7-btn-l n7-image-viewer-tools__btnThumbs -->\n\n<div *ngIf=\"data\" class=\"n7-image-viewer-tools {{data.classes || ''}}\">\n    <div class=\"n7-image-viewer-tools__bar\">\n        <div class=\"n7-image-viewer-tools__controls\">\n            <div class=\"n7-image-viewer-tools__control-wrapper\">\n                <ng-container *ngIf=\"data.controls.description && data.description\">\n                    <n7-anchor-wrapper \n                    class=\"n7-image-viewer-tools__control-btn\"\n                    [ngClass]=\"{\n                        'is-active': data.controls.description.isActive\n                    }\"\n                    [data]=\"data.controls.description.anchor\"\n                    (clicked)=\"onClick($event)\">\n                    <!-- $event -->\n                        <span class=\"n7-image-viewer-tools__control-btn-icon {{data.controls.description.icon}}\"></span>\n                    </n7-anchor-wrapper>\n                </ng-container>\n            </div>\n\n            <div class=\"n7-image-viewer-tools__control-wrapper\">\n                <ng-container *ngIf=\"data.controls.thumbs\">\n                    <n7-anchor-wrapper \n                    class=\"n7-image-viewer-tools__control-btn\"\n                    [ngClass]=\"{\n                        'is-active': data.controls.thumbs.isActive\n                    }\"\n                    [data]=\"data.controls.thumbs.anchor\"\n                    (clicked)=\"onClick($event)\">\n                    <!-- $event -->\n                        <span class=\"n7-image-viewer-tools__control-btn-icon {{data.controls.thumbs.icon}}\"></span>\n                    </n7-anchor-wrapper>\n                </ng-container>\n            </div>\n        </div>\n\n        <div class=\"n7-image-viewer-tools__thumbs-description\">\n            <div class=\"n7-image-viewer-tools__thumbs\" \n                *ngIf=\"data.isVisible.thumbnails && data.images\" >\n                <div class=\"n7-image-viewer-tools__thumbs-strip\">\n                    <div *ngFor=\"let img of data.images; let imgIndex = index\" \n                        class=\"n7-image-viewer-tools__thumb\"\n                        [class.active]=\"imgIndex == data.initial\">\n                        <img\n                            class=\"n7-image-viewer-tools__thumb-image\"\n                            src=\"{{img.thumb}}\"\n                            (click)=\"onClick(img.payload)\" >\n                    </div>\n                </div> \n                \n                <ng-container *ngIf=\"data.navigation\">\n                    <div\n                    class=\"{{ data.navigation.prev.classes || '' }}\"\n                    (click)=\"onClick(data.navigation.prev.payload)\">\n                    <!-- (click)=\"\" -->\n                        <span class=\"n7-icon-angle-left\"></span>\n                    </div>\n                    <div\n                    class=\"{{ data.navigation.next.classes || '' }}\"\n                    (click)=\"onClick(data.navigation.next.payload)\">\n                        <span class=\"n7-icon-angle-right\"></span>\n                    </div>\n                </ng-container>\n\n                <!-- <ng-container *ngIf=\"data.navigation as nav\">\n                    <div \n                    classes=\"{{ nav.prev.classes || '' }}\" \n                    (click)=\"onClick(nav.prev.payload)\">\n                        <span class=\"n7-icon-angle-left\"></span>\n                    </div>\n                    <div \n                    classes=\"{{ nav.next.classes || '' }}\" \n                    (click)=\"onClick(nav.next.payload)\">\n                        <span class=\"n7-icon-angle-right\"></span>\n                    </div>\n                </ng-container> -->\n\n                <!-- <ng-container *ngIf=\"data.navigation as nav\">\n                    <div \n                    classes=\"{{ nav.prev.classes || '' }}\" \n                    (click)=\"onClick(nav.prev.payload)\">\n                        <span class=\"n7-icon-angle-left\"></span>\n                    </div>\n                    <div \n                    classes=\"{{ nav.next.classes || '' }}\" \n                    (click)=\"onClick(nav.next.payload)\">\n                        <span class=\"n7-icon-angle-right\"></span>\n                    </div>\n                </ng-container> -->\n            </div>\n\n            <div class=\"n7-image-viewer-tools__description\" \n                *ngIf=\"data.isVisible.description\" >\n                <div class=\"n7-image-viewer-tools__description-close\"\n                    (click)=\"onClick(data.controls.closedescription.anchor.payload)\">\n                    <!-- data.controls.closedescription.anchor.payload -->\n                    <span class=\"{{data.controls.closedescription.icon}}\"></span>\n                </div>\n                <div class=\"n7-image-viewer-tools__description-text-wrapper\">\n                    <div class=\"n7-image-viewer-tools__description-text\" [innerHTML]=\"data.description\"></div>\n                </div>\n                \n            </div>\n        </div> \n    </div>\n</div>\n" }]
+            args: [{ selector: 'n7-image-viewer-tools', template: "<!-- <div *ngIf=\"data\" class=\"n7-image-viewer-tools\">\n    <div class=\"n7-image-viewer-tools__bar\">\n        <div class=\"n7-image-viewer-tools__controls\">\n            <div class=\"n7-image-viewer-tools__btn-container\">\n                <ng-container *ngIf=\"data.controls.description\">\n                    <n7-anchor-wrapper \n                    class=\"n7-hero__btn n7-btn n7-btn-cta n7-btn-l n7-image-viewer-tools__btnDescription {{data.classes.description.className || ''}}\"\n                    [data]=\"data.controls.description.anchor\"\n                    (clicked)=\"onClick($event)\">\n                        <span class=\"{{data.controls.description.icon}}\"></span>\n                    </n7-anchor-wrapper>\n                </ng-container>\n            </div>\n\n            <div class=\"n7-image-viewer-tools__btn-container\">\n                <ng-container *ngIf=\"data.controls.thumbs\">\n                    <n7-anchor-wrapper \n                    class=\"n7-hero__btn n7-btn n7-btn-cta n7-btn-l n7-image-viewer-tools__btnThumbs {{data.classes.thumbs.className || ''}}\"\n                    [data]=\"data.controls.thumbs.anchor\"\n                    (clicked)=\"onClick($event)\">\n                        <span class=\"{{data.controls.thumbs.icon}}\"></span>\n                    </n7-anchor-wrapper>\n                </ng-container>\n            </div>\n        </div>\n\n        <div class=\"n7-image-viewer-tools__thumbs\" \n            *ngIf=\"data.isVisible.thumbnails && data.images\" >\n            <div *ngFor=\"let img of data.images; let imgIndex = index\" \n                class=\"n7-image-viewer-tools__thumb-container\"\n                [class.active]=\"imgIndex == data.initial\">\n                <img\n                    src=\"{{img.thumb}}\"\n                    (click)=\"onClick(img.payload)\" >\n            </div>\n        </div>\n\n        <div class=\"n7-image-viewer-tools__description\" \n            *ngIf=\"data.isVisible.description\" >\n            <div [innerHTML]=\"data.description\"></div>\n            <div class=\"n7-image-viewer-tools__description-closebtn\"\n                (click)=\"onClick(data.controls.closedescription.anchor.payload)\">\n                <span class=\"{{data.controls.closedescription.icon}}\"></span>\n            </div>\n        </div>\n    </div>\n</div> -->\n\n<!-- n7-hero__btn n7-btn n7-btn-cta n7-btn-l n7-image-viewer-tools__btnDescription -->\n<!-- n7-hero__btn n7-btn n7-btn-cta n7-btn-l n7-image-viewer-tools__btnThumbs -->\n\n<div *ngIf=\"data\" class=\"n7-image-viewer-tools {{data.classes || ''}}\">\n    <div class=\"n7-image-viewer-tools__bar\">\n        <div class=\"n7-image-viewer-tools__controls\">\n            <div class=\"n7-image-viewer-tools__control-wrapper\">\n                <ng-container *ngIf=\"data.controls.description && data.description\">\n                    <n7-anchor-wrapper \n                    class=\"n7-image-viewer-tools__control-btn\"\n                    [ngClass]=\"{\n                        'is-active': data.controls.description.isActive\n                    }\"\n                    [data]=\"data.controls.description.anchor\"\n                    (click)=\"onClick($event)\">\n                    <!-- $event -->\n                        <span class=\"n7-image-viewer-tools__control-btn-icon {{data.controls.description.icon}}\"></span>\n                    </n7-anchor-wrapper>\n                </ng-container>\n            </div>\n\n            <div class=\"n7-image-viewer-tools__control-wrapper\">\n                <ng-container *ngIf=\"data.controls.thumbs\">\n                    <n7-anchor-wrapper \n                    class=\"n7-image-viewer-tools__control-btn\"\n                    [ngClass]=\"{\n                        'is-active': data.controls.thumbs.isActive\n                    }\"\n                    [data]=\"data.controls.thumbs.anchor\"\n                    (click)=\"onClick($event)\">\n                    <!-- $event -->\n                        <span class=\"n7-image-viewer-tools__control-btn-icon {{data.controls.thumbs.icon}}\"></span>\n                    </n7-anchor-wrapper>\n                </ng-container>\n            </div>\n        </div>\n\n        <div class=\"n7-image-viewer-tools__thumbs-description\">\n            <div class=\"n7-image-viewer-tools__thumbs\" \n                *ngIf=\"data.isVisible.thumbnails && data.images\" >\n                <div class=\"n7-image-viewer-tools__thumbs-strip\">\n                    <div *ngFor=\"let img of data.images; let imgIndex = index\" \n                        class=\"n7-image-viewer-tools__thumb\"\n                        [class.active]=\"imgIndex == data.initial\">\n                        <img\n                            class=\"n7-image-viewer-tools__thumb-image\"\n                            src=\"{{img.thumb}}\"\n                            (click)=\"onClick(img.payload)\" >\n                    </div>\n                </div> \n                \n                <ng-container *ngIf=\"data.navigation\">\n                    <div\n                    class=\"{{ data.navigation.prev.classes || '' }}\"\n                    (click)=\"onClick(data.navigation.prev.payload)\">\n                    <!-- (click)=\"\" -->\n                        <span class=\"n7-icon-angle-left\"></span>\n                    </div>\n                    <div\n                    class=\"{{ data.navigation.next.classes || '' }}\"\n                    (click)=\"onClick(data.navigation.next.payload)\">\n                        <span class=\"n7-icon-angle-right\"></span>\n                    </div>\n                </ng-container>\n\n                <!-- <ng-container *ngIf=\"data.navigation as nav\">\n                    <div \n                    classes=\"{{ nav.prev.classes || '' }}\" \n                    (click)=\"onClick(nav.prev.payload)\">\n                        <span class=\"n7-icon-angle-left\"></span>\n                    </div>\n                    <div \n                    classes=\"{{ nav.next.classes || '' }}\" \n                    (click)=\"onClick(nav.next.payload)\">\n                        <span class=\"n7-icon-angle-right\"></span>\n                    </div>\n                </ng-container> -->\n\n                <!-- <ng-container *ngIf=\"data.navigation as nav\">\n                    <div \n                    classes=\"{{ nav.prev.classes || '' }}\" \n                    (click)=\"onClick(nav.prev.payload)\">\n                        <span class=\"n7-icon-angle-left\"></span>\n                    </div>\n                    <div \n                    classes=\"{{ nav.next.classes || '' }}\" \n                    (click)=\"onClick(nav.next.payload)\">\n                        <span class=\"n7-icon-angle-right\"></span>\n                    </div>\n                </ng-container> -->\n            </div>\n\n            <div class=\"n7-image-viewer-tools__description\" \n                *ngIf=\"data.isVisible.description\" >\n                <div class=\"n7-image-viewer-tools__description-close\"\n                    (click)=\"onClick(data.controls.closedescription.anchor.payload)\">\n                    <!-- data.controls.closedescription.anchor.payload -->\n                    <span class=\"{{data.controls.closedescription.icon}}\"></span>\n                </div>\n                <div class=\"n7-image-viewer-tools__description-text-wrapper\">\n                    <div class=\"n7-image-viewer-tools__description-text\" [innerHTML]=\"data.description\"></div>\n                </div>\n                \n            </div>\n        </div> \n    </div>\n</div>\n" }]
         }], propDecorators: { data: [{
                 type: Input
             }], emit: [{
@@ -1243,9 +1302,9 @@ class InnerTitleComponent {
         this.emit('search', { inputPayload: payload, value });
     }
 }
-InnerTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: InnerTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InnerTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: InnerTitleComponent, selector: "n7-inner-title", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-inner-title\">\n    <div class=\"n7-inner-title__left-wrapper\">\n        <ng-container *ngTemplateOutlet=\"icon; context:{$implicit: data.icon}\"></ng-container>\n        <div *ngIf=\"data.image\" \n             class=\"n7-inner-title__image-left\" \n             [ngStyle]=\"{'background-image': 'url(' + data.image + ')'}\"></div>\n\n        <div class=\"n7-inner-title__wrapper-texts\">\n            <div *ngIf=\"data.title.main\"\n            [innerHTML]=\"data.title.main.text\" \n            class=\"n7-inner-title__title {{data.title.main.classes || ''}}\">\n            </div>\n            <div *ngIf=\"data.title.secondary\" \n            [innerHTML]=\"data.title.secondary.text\" \n            class=\"n7-inner-title__subtitle {{data.title.secondary.classes || ''}}\">\n            </div>\n        </div>\n    </div>\n\n    <div class=\"n7-inner-title__tools\">\n        <!-- Toolbar label -->\n        <div *ngIf=\"data.tools\"\n            class=\"n7-inner-title__tools-label \">\n            {{data.tools}}\n        </div>\n        <!-- Actions -->\n        <ng-container *ngIf=\"data.actions\">\n            <ng-container *ngTemplateOutlet=\"actions; \n                        context:{$implicit: data.actions}\">\n            </ng-container>\n        </ng-container>\n    </div>\n\n</div>\n\n<!-- Template actions -->\n<ng-template #actions let-action>\n    <ng-container *ngIf=\"action.select\">\n        <ng-container *ngTemplateOutlet=\"select;\n                      context:{$implicit: action.select}\">\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"action.search\">\n        <ng-container *ngTemplateOutlet=\"search; \n                      context:{$implicit: action.search}\">\n        </ng-container>\n    </ng-container>\n    \n    <ng-container *ngIf=\"action.buttons\">\n        <ng-container *ngTemplateOutlet=\"buttons;\n                      context:{$implicit: action.buttons}\">\n        </ng-container>\n    </ng-container>\n</ng-template>\n    \n<!-- Template sorting -->\n<ng-template #select let-select>\n<div class=\"n7-inner-title__sorting\">\n    <span *ngIf=\"select.label\"\n          class=\"n7-inner-title__sorting-label \">\n        {{select.label}}\n    </span>\n    <select (change)=\"onChange(select.payload, $event.target.value)\"\n            class=\"n7-inner-title__sorting-select\">\n        <option *ngFor=\"let opt of select.options\"\n        value=\"{{opt.value}}\"\n        class=\"n7-inner-title__sorting-option\"\n        [selected]=\"opt.selected\"\n        [disabled]=\"opt.disabled\">\n            {{opt.text}}\n        </option>\n    </select>\n</div>\n</ng-template>\n\n<!-- Template search -->\n<ng-template #search let-search>\n    <div class=\"n7-inner-title__search\">\n        <input type=\"text\" \n            class=\"n7-inner-title__search-bar \" \n            placeholder=\"{{search.placeholder}}\"\n            (input)=\"onInputChange(search.payload, $event.target.value)\"\n            (keyup.enter)=\"onInputEnter(search.payload, $event.target.value)\">\n     <button *ngIf=\"search.button\" \n             (click)=\"onClick(search.button.payload)\"\n             class=\"n7-btn n7-inner-title__search-button \">\n         {{search.button.text}}\n     </button>\n    </div>\n</ng-template>\n\n<!-- Template buttons -->\n<ng-template #buttons let-buttons>\n    <div class=\"n7-inner-title__buttons-wrapper\">\n        <div *ngFor=\"let btn of buttons\"\n            class=\"n7-inner-title__single-button-wrapper\">\n            <n7-anchor-wrapper [classes]=\"'n7-btn n7-inner-title__buttons-action ' + btn.classes || ''\"\n            [data]=\"btn.anchor\"\n            (clicked)=\"onClick($event)\">\n                <span *ngIf=\"btn.icon\" class=\"n7-btn__icon {{btn.icon || ''}}\"></span>    \n                {{ btn.text }}\n            </n7-anchor-wrapper>\n        </div>\n    </div>\n</ng-template>\n\n<!-- Template Icon -->\n<ng-template #icon let-icon>\n    <!-- Complex icon -->\n    <span *ngIf=\"icon && icon.id\"\n          class=\"n7-inner-title__icon-left {{icon.id || ''}}\"\n          [ngStyle]=\"icon.style || {}\"></span>\n    <!-- Simple icon -->\n    <span *ngIf=\"icon && !icon.id\"\n          class=\"n7-inner-title__icon-left {{icon || ''}}\"></span>\n</ng-template>\n", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: InnerTitleComponent, decorators: [{
+InnerTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InnerTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+InnerTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: InnerTitleComponent, selector: "n7-inner-title", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-inner-title\">\n    <div class=\"n7-inner-title__left-wrapper\">\n        <ng-container *ngTemplateOutlet=\"icon; context:{$implicit: data.icon}\"></ng-container>\n        <div *ngIf=\"data.image\" \n             class=\"n7-inner-title__image-left\" \n             [ngStyle]=\"{'background-image': 'url(' + data.image + ')'}\"></div>\n\n        <div class=\"n7-inner-title__wrapper-texts\">\n            <div *ngIf=\"data.title.main\"\n            [innerHTML]=\"data.title.main.text\" \n            class=\"n7-inner-title__title {{data.title.main.classes || ''}}\">\n            </div>\n            <div *ngIf=\"data.title.secondary\" \n            [innerHTML]=\"data.title.secondary.text\" \n            class=\"n7-inner-title__subtitle {{data.title.secondary.classes || ''}}\">\n            </div>\n        </div>\n    </div>\n\n    <div class=\"n7-inner-title__tools\">\n        <!-- Toolbar label -->\n        <div *ngIf=\"data.tools\"\n            class=\"n7-inner-title__tools-label \">\n            {{data.tools}}\n        </div>\n        <!-- Actions -->\n        <ng-container *ngIf=\"data.actions\">\n            <ng-container *ngTemplateOutlet=\"actions; \n                        context:{$implicit: data.actions}\">\n            </ng-container>\n        </ng-container>\n    </div>\n\n</div>\n\n<!-- Template actions -->\n<ng-template #actions let-action>\n    <ng-container *ngIf=\"action.select\">\n        <ng-container *ngTemplateOutlet=\"select;\n                      context:{$implicit: action.select}\">\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"action.search\">\n        <ng-container *ngTemplateOutlet=\"search; \n                      context:{$implicit: action.search}\">\n        </ng-container>\n    </ng-container>\n    \n    <ng-container *ngIf=\"action.buttons\">\n        <ng-container *ngTemplateOutlet=\"buttons;\n                      context:{$implicit: action.buttons}\">\n        </ng-container>\n    </ng-container>\n</ng-template>\n    \n<!-- Template sorting -->\n<ng-template #select let-select>\n<div class=\"n7-inner-title__sorting\">\n    <span *ngIf=\"select.label\"\n          class=\"n7-inner-title__sorting-label \">\n        {{select.label}}\n    </span>\n    <select (change)=\"onChange(select.payload, $event.target.value)\"\n            class=\"n7-inner-title__sorting-select\">\n        <option *ngFor=\"let opt of select.options\"\n        value=\"{{opt.value}}\"\n        class=\"n7-inner-title__sorting-option\"\n        [selected]=\"opt.selected\"\n        [disabled]=\"opt.disabled\">\n            {{opt.text}}\n        </option>\n    </select>\n</div>\n</ng-template>\n\n<!-- Template search -->\n<ng-template #search let-search>\n    <div class=\"n7-inner-title__search\">\n        <input type=\"text\" \n            class=\"n7-inner-title__search-bar \" \n            placeholder=\"{{search.placeholder}}\"\n            (input)=\"onInputChange(search.payload, $event.target.value)\"\n            (keyup.enter)=\"onInputEnter(search.payload, $event.target.value)\">\n     <button *ngIf=\"search.button\" \n             (click)=\"onClick(search.button.payload)\"\n             class=\"n7-btn n7-inner-title__search-button \">\n         {{search.button.text}}\n     </button>\n    </div>\n</ng-template>\n\n<!-- Template buttons -->\n<ng-template #buttons let-buttons>\n    <div class=\"n7-inner-title__buttons-wrapper\">\n        <div *ngFor=\"let btn of buttons\"\n            class=\"n7-inner-title__single-button-wrapper\">\n            <n7-anchor-wrapper [classes]=\"'n7-btn n7-inner-title__buttons-action ' + btn.classes || ''\"\n            [data]=\"btn.anchor\"\n            (clicked)=\"onClick($event)\">\n                <span *ngIf=\"btn.icon\" class=\"n7-btn__icon {{btn.icon || ''}}\"></span>    \n                {{ btn.text }}\n            </n7-anchor-wrapper>\n        </div>\n    </div>\n</ng-template>\n\n<!-- Template Icon -->\n<ng-template #icon let-icon>\n    <!-- Complex icon -->\n    <span *ngIf=\"icon && icon.id\"\n          class=\"n7-inner-title__icon-left {{icon.id || ''}}\"\n          [ngStyle]=\"icon.style || {}\"></span>\n    <!-- Simple icon -->\n    <span *ngIf=\"icon && !icon.id\"\n          class=\"n7-inner-title__icon-left {{icon || ''}}\"></span>\n</ng-template>\n", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InnerTitleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'n7-inner-title', template: "<div *ngIf=\"data\" class=\"n7-inner-title\">\n    <div class=\"n7-inner-title__left-wrapper\">\n        <ng-container *ngTemplateOutlet=\"icon; context:{$implicit: data.icon}\"></ng-container>\n        <div *ngIf=\"data.image\" \n             class=\"n7-inner-title__image-left\" \n             [ngStyle]=\"{'background-image': 'url(' + data.image + ')'}\"></div>\n\n        <div class=\"n7-inner-title__wrapper-texts\">\n            <div *ngIf=\"data.title.main\"\n            [innerHTML]=\"data.title.main.text\" \n            class=\"n7-inner-title__title {{data.title.main.classes || ''}}\">\n            </div>\n            <div *ngIf=\"data.title.secondary\" \n            [innerHTML]=\"data.title.secondary.text\" \n            class=\"n7-inner-title__subtitle {{data.title.secondary.classes || ''}}\">\n            </div>\n        </div>\n    </div>\n\n    <div class=\"n7-inner-title__tools\">\n        <!-- Toolbar label -->\n        <div *ngIf=\"data.tools\"\n            class=\"n7-inner-title__tools-label \">\n            {{data.tools}}\n        </div>\n        <!-- Actions -->\n        <ng-container *ngIf=\"data.actions\">\n            <ng-container *ngTemplateOutlet=\"actions; \n                        context:{$implicit: data.actions}\">\n            </ng-container>\n        </ng-container>\n    </div>\n\n</div>\n\n<!-- Template actions -->\n<ng-template #actions let-action>\n    <ng-container *ngIf=\"action.select\">\n        <ng-container *ngTemplateOutlet=\"select;\n                      context:{$implicit: action.select}\">\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"action.search\">\n        <ng-container *ngTemplateOutlet=\"search; \n                      context:{$implicit: action.search}\">\n        </ng-container>\n    </ng-container>\n    \n    <ng-container *ngIf=\"action.buttons\">\n        <ng-container *ngTemplateOutlet=\"buttons;\n                      context:{$implicit: action.buttons}\">\n        </ng-container>\n    </ng-container>\n</ng-template>\n    \n<!-- Template sorting -->\n<ng-template #select let-select>\n<div class=\"n7-inner-title__sorting\">\n    <span *ngIf=\"select.label\"\n          class=\"n7-inner-title__sorting-label \">\n        {{select.label}}\n    </span>\n    <select (change)=\"onChange(select.payload, $event.target.value)\"\n            class=\"n7-inner-title__sorting-select\">\n        <option *ngFor=\"let opt of select.options\"\n        value=\"{{opt.value}}\"\n        class=\"n7-inner-title__sorting-option\"\n        [selected]=\"opt.selected\"\n        [disabled]=\"opt.disabled\">\n            {{opt.text}}\n        </option>\n    </select>\n</div>\n</ng-template>\n\n<!-- Template search -->\n<ng-template #search let-search>\n    <div class=\"n7-inner-title__search\">\n        <input type=\"text\" \n            class=\"n7-inner-title__search-bar \" \n            placeholder=\"{{search.placeholder}}\"\n            (input)=\"onInputChange(search.payload, $event.target.value)\"\n            (keyup.enter)=\"onInputEnter(search.payload, $event.target.value)\">\n     <button *ngIf=\"search.button\" \n             (click)=\"onClick(search.button.payload)\"\n             class=\"n7-btn n7-inner-title__search-button \">\n         {{search.button.text}}\n     </button>\n    </div>\n</ng-template>\n\n<!-- Template buttons -->\n<ng-template #buttons let-buttons>\n    <div class=\"n7-inner-title__buttons-wrapper\">\n        <div *ngFor=\"let btn of buttons\"\n            class=\"n7-inner-title__single-button-wrapper\">\n            <n7-anchor-wrapper [classes]=\"'n7-btn n7-inner-title__buttons-action ' + btn.classes || ''\"\n            [data]=\"btn.anchor\"\n            (clicked)=\"onClick($event)\">\n                <span *ngIf=\"btn.icon\" class=\"n7-btn__icon {{btn.icon || ''}}\"></span>    \n                {{ btn.text }}\n            </n7-anchor-wrapper>\n        </div>\n    </div>\n</ng-template>\n\n<!-- Template Icon -->\n<ng-template #icon let-icon>\n    <!-- Complex icon -->\n    <span *ngIf=\"icon && icon.id\"\n          class=\"n7-inner-title__icon-left {{icon.id || ''}}\"\n          [ngStyle]=\"icon.style || {}\"></span>\n    <!-- Simple icon -->\n    <span *ngIf=\"icon && !icon.id\"\n          class=\"n7-inner-title__icon-left {{icon || ''}}\"></span>\n</ng-template>\n" }]
         }], propDecorators: { data: [{
@@ -1262,11 +1321,11 @@ class InputCheckboxComponent {
         this.emit('change', { inputPayload, value });
     }
 }
-InputCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: InputCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: InputCheckboxComponent, selector: "n7-input-checkbox", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-input-checkbox {{ data.classes || '' }}\">\n    <fieldset class=\"n7-input-checkbox__fieldset\">\n        <legend class=\"n7-input-checkbox__legend\" *ngIf=\"data.legend\">{{ data.legend }}</legend>\n        <ng-container *ngFor=\"let input of data.checkboxes\">\n            <div class=\"n7-input-checkbox__input-wrapper\">\n                <input type=\"checkbox\"\n                 id=\"{{ input.id }}\"\n                 class=\"n7-input-checkbox__input {{ input.classes || '' }}\"\n                 [checked]=\"input.checked\"\n                 [disabled]=\"input.disabled\"\n                 (change)=\"onChange(input.payload, $event.target.checked)\">\n                <label *ngIf=\"input.label\"\n                 class=\"n7-input-checkbox__label\"\n                 for=\"{{ input.id }}\">{{ input.label }}</label>\n            </div>          \n        </ng-container>\n    </fieldset>\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.2", ngImport: i0, type: InputCheckboxComponent, decorators: [{
+InputCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+InputCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: InputCheckboxComponent, selector: "n7-input-checkbox", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-input-checkbox {{ data.classes || '' }}\">\n    <fieldset class=\"n7-input-checkbox__fieldset\">\n        <legend class=\"n7-input-checkbox__legend\" *ngIf=\"data.legend\" [innerHTML]=\"data.legend\"></legend>\n        <ng-container *ngFor=\"let input of data.checkboxes\">\n            <div class=\"n7-input-checkbox__input-wrapper\">\n                <input type=\"checkbox\"\n                 id=\"{{ input.id }}\"\n                 class=\"n7-input-checkbox__input {{ input.classes || '' }}\"\n                 [checked]=\"input.checked\"\n                 [disabled]=\"input.disabled\"\n                 (change)=\"onChange(input.payload, $event.target.checked)\">\n                <label *ngIf=\"input.label\"\n                 class=\"n7-input-checkbox__label\"\n                 for=\"{{ input.id }}\">{{ input.label }}</label>\n            </div>          \n        </ng-container>\n    </fieldset>\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: InputCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'n7-input-checkbox', template: "<div *ngIf=\"data\" class=\"n7-input-checkbox {{ data.classes || '' }}\">\n    <fieldset class=\"n7-input-checkbox__fieldset\">\n        <legend class=\"n7-input-checkbox__legend\" *ngIf=\"data.legend\">{{ data.legend }}</legend>\n        <ng-container *ngFor=\"let input of data.checkboxes\">\n            <div class=\"n7-input-checkbox__input-wrapper\">\n                <input type=\"checkbox\"\n                 id=\"{{ input.id }}\"\n                 class=\"n7-input-checkbox__input {{ input.classes || '' }}\"\n                 [checked]=\"input.checked\"\n                 [disabled]=\"input.disabled\"\n                 (change)=\"onChange(input.payload, $event.target.checked)\">\n                <label *ngIf=\"input.label\"\n                 class=\"n7-input-checkbox__label\"\n                 for=\"{{ input.id }}\">{{ input.label }}</label>\n            </div>          \n        </ng-container>\n    </fieldset>\n</div>\n" }]
+            args: [{ selector: 'n7-input-checkbox', template: "<div *ngIf=\"data\" class=\"n7-input-checkbox {{ data.classes || '' }}\">\n    <fieldset class=\"n7-input-checkbox__fieldset\">\n        <legend class=\"n7-input-checkbox__legend\" *ngIf=\"data.legend\" [innerHTML]=\"data.legend\"></legend>\n        <ng-container *ngFor=\"let input of data.checkboxes\">\n            <div class=\"n7-input-checkbox__input-wrapper\">\n                <input type=\"checkbox\"\n                 id=\"{{ input.id }}\"\n                 class=\"n7-input-checkbox__input {{ input.classes || '' }}\"\n                 [checked]=\"input.checked\"\n                 [disabled]=\"input.disabled\"\n                 (change)=\"onChange(input.payload, $event.target.checked)\">\n                <label *ngIf=\"input.label\"\n                 class=\"n7-input-checkbox__label\"\n                 for=\"{{ input.id }}\">{{ input.label }}</label>\n            </div>          \n        </ng-container>\n    </fieldset>\n</div>\n" }]
         }], propDecorators: { data: [{
                 type: Input
             }], emit: [{
@@ -1281,9 +1340,9 @@ class InputLinkComponent {
         this.emit('change', payload);
     }
 }
-InputLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: InputLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: InputLinkComponent, selector: "n7-input-link", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\"\n     class=\"n7-input-link\">\n  <ng-container *ngFor=\"let input of data.links\">\n    <div class=\"n7-input-link__link {{ input.classes || '' }}\"\n         (click)=\"onChange(input.payload)\">\n      <span *ngIf=\"input.icon\"\n            class=\"n7-input-link__icon {{ input.icon }}\"></span>\n      <span class=\"n7-input-link__text\">{{ input.text }}</span>\n      <span *ngIf=\"input.counter || input.counter === 0\"\n            class=\"n7-input-link__counter\">{{ input.counter }}</span>\n    </div>\n  </ng-container>\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.2", ngImport: i0, type: InputLinkComponent, decorators: [{
+InputLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+InputLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: InputLinkComponent, selector: "n7-input-link", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\"\n     class=\"n7-input-link\">\n  <ng-container *ngFor=\"let input of data.links\">\n    <div class=\"n7-input-link__link {{ input.classes || '' }}\"\n         (click)=\"onChange(input.payload)\">\n      <span *ngIf=\"input.icon\"\n            class=\"n7-input-link__icon {{ input.icon }}\"></span>\n      <span class=\"n7-input-link__text\">{{ input.text }}</span>\n      <span *ngIf=\"input.counter || input.counter === 0\"\n            class=\"n7-input-link__counter\">{{ input.counter }}</span>\n    </div>\n  </ng-container>\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: InputLinkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'n7-input-link', template: "<div *ngIf=\"data\"\n     class=\"n7-input-link\">\n  <ng-container *ngFor=\"let input of data.links\">\n    <div class=\"n7-input-link__link {{ input.classes || '' }}\"\n         (click)=\"onChange(input.payload)\">\n      <span *ngIf=\"input.icon\"\n            class=\"n7-input-link__icon {{ input.icon }}\"></span>\n      <span class=\"n7-input-link__text\">{{ input.text }}</span>\n      <span *ngIf=\"input.counter || input.counter === 0\"\n            class=\"n7-input-link__counter\">{{ input.counter }}</span>\n    </div>\n  </ng-container>\n</div>\n" }]
         }], propDecorators: { data: [{
@@ -1300,11 +1359,11 @@ class InputSelectComponent {
         this.emit('change', { inputPayload, value });
     }
 }
-InputSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: InputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: InputSelectComponent, selector: "n7-input-select", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data as input\"\n     class=\"n7-input-select\">\n  <label *ngIf=\"input.label\"\n         for=\"{{ input.id }}\">{{ input.label }}</label>\n  <select (change)=\"onChange(input.payload, $event.target.value)\"\n          id=\"{{ input.id }}\"\n          class=\"n7-facet__input-select {{ input.classes || '' }}\"\n          [disabled]=\"input.disabled\">\n    <option *ngFor=\"let option of input.options\"\n            [value]=\"option.value\"\n            [disabled]=\"option.disabled\"\n            [selected]=\"option.selected\">{{ option.label }}</option>\n  </select>\n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: InputSelectComponent, decorators: [{
+InputSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+InputSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: InputSelectComponent, selector: "n7-input-select", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data as input\"\n     class=\"n7-input-select\">\n  <label *ngIf=\"input.label\"\n         for=\"{{ input.id }}\" [innerHTML]=\"input.label\"></label>\n  <select (change)=\"onChange(input.payload, $event.target.value)\"\n          id=\"{{ input.id }}\"\n          class=\"n7-facet__input-select {{ input.classes || '' }}\"\n          [disabled]=\"input.disabled\">\n    <option *ngFor=\"let option of input.options\"\n            [value]=\"option.value\"\n            [disabled]=\"option.disabled\"\n            [selected]=\"option.selected\">{{ option.label }}</option>\n  </select>\n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'n7-input-select', template: "<div *ngIf=\"data as input\"\n     class=\"n7-input-select\">\n  <label *ngIf=\"input.label\"\n         for=\"{{ input.id }}\">{{ input.label }}</label>\n  <select (change)=\"onChange(input.payload, $event.target.value)\"\n          id=\"{{ input.id }}\"\n          class=\"n7-facet__input-select {{ input.classes || '' }}\"\n          [disabled]=\"input.disabled\">\n    <option *ngFor=\"let option of input.options\"\n            [value]=\"option.value\"\n            [disabled]=\"option.disabled\"\n            [selected]=\"option.selected\">{{ option.label }}</option>\n  </select>\n</div>\n" }]
+            args: [{ selector: 'n7-input-select', template: "<div *ngIf=\"data as input\"\n     class=\"n7-input-select\">\n  <label *ngIf=\"input.label\"\n         for=\"{{ input.id }}\" [innerHTML]=\"input.label\"></label>\n  <select (change)=\"onChange(input.payload, $event.target.value)\"\n          id=\"{{ input.id }}\"\n          class=\"n7-facet__input-select {{ input.classes || '' }}\"\n          [disabled]=\"input.disabled\">\n    <option *ngFor=\"let option of input.options\"\n            [value]=\"option.value\"\n            [disabled]=\"option.disabled\"\n            [selected]=\"option.selected\">{{ option.label }}</option>\n  </select>\n</div>\n" }]
         }], propDecorators: { data: [{
                 type: Input
             }], emit: [{
@@ -1319,11 +1378,11 @@ class InputTextComponent {
         this.emit('change', { inputPayload, value });
     }
 }
-InputTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: InputTextComponent, selector: "n7-input-text", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data as input\"\n     class=\"n7-input-text\">\n    <label *ngIf=\"input.label\"\n        class=\"n7-input-text__label\"\n        for=\"{{ input.id }}\">\n        {{ input.label }}\n    </label>\n    <div class=\"n7-input-text__wrapper\"\n        [ngClass]=\"{\n            'has-icon': !!input.icon\n        }\">\n        <input id=\"{{ input.id }}\"\n            class=\"n7-input-text__text {{input.classes || ''}}\"\n            placeholder=\"{{input.placeholder || ''}}\"\n            [type]=\"input.type ? input.type : 'text'\"\n            [value]=\"input.value || null\"\n            [disabled]=\"input.disabled\"\n            [min]=\"input.type === 'number' && (input.min || input.min === 0) ? input.min : ''\"\n            [max]=\"input.type === 'number' && (input.max || input.max === 0) ? input.max : ''\"\n            (input)=\"onChange(input.inputPayload, $event.target.value)\"\n            (keyup.enter)=\"onChange(input.enterPayload, $event.target.value)\">\n        <span *ngIf=\"input.icon\"\n            class=\"n7-input-text__icon {{input.icon || ''}}\"\n            (click)=\"onChange(input.iconPayload)\">\n        </span>\n    </div>\n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: InputTextComponent, decorators: [{
+InputTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+InputTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: InputTextComponent, selector: "n7-input-text", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data as input\"\n     class=\"n7-input-text\">\n    <label *ngIf=\"input.label\"\n        class=\"n7-input-text__label\"\n        for=\"{{ input.id }}\" [innerHTML]=\"input.label\">\n    </label>\n    <div class=\"n7-input-text__wrapper\"\n        [ngClass]=\"{\n            'has-icon': !!input.icon\n        }\">\n        <input id=\"{{ input.id }}\"\n            class=\"n7-input-text__text {{input.classes || ''}}\"\n            placeholder=\"{{input.placeholder || ''}}\"\n            [type]=\"input.type ? input.type : 'text'\"\n            [value]=\"input.value || null\"\n            [disabled]=\"input.disabled\"\n            [min]=\"input.type === 'number' && (input.min || input.min === 0) ? input.min : ''\"\n            [max]=\"input.type === 'number' && (input.max || input.max === 0) ? input.max : ''\"\n            (input)=\"onChange(input.inputPayload, $event.target.value)\"\n            (keyup.enter)=\"onChange(input.enterPayload, $event.target.value)\">\n        <span *ngIf=\"input.icon\"\n            class=\"n7-input-text__icon {{input.icon || ''}}\"\n            (click)=\"onChange(input.iconPayload)\">\n        </span>\n    </div>\n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'n7-input-text', template: "<div *ngIf=\"data as input\"\n     class=\"n7-input-text\">\n    <label *ngIf=\"input.label\"\n        class=\"n7-input-text__label\"\n        for=\"{{ input.id }}\">\n        {{ input.label }}\n    </label>\n    <div class=\"n7-input-text__wrapper\"\n        [ngClass]=\"{\n            'has-icon': !!input.icon\n        }\">\n        <input id=\"{{ input.id }}\"\n            class=\"n7-input-text__text {{input.classes || ''}}\"\n            placeholder=\"{{input.placeholder || ''}}\"\n            [type]=\"input.type ? input.type : 'text'\"\n            [value]=\"input.value || null\"\n            [disabled]=\"input.disabled\"\n            [min]=\"input.type === 'number' && (input.min || input.min === 0) ? input.min : ''\"\n            [max]=\"input.type === 'number' && (input.max || input.max === 0) ? input.max : ''\"\n            (input)=\"onChange(input.inputPayload, $event.target.value)\"\n            (keyup.enter)=\"onChange(input.enterPayload, $event.target.value)\">\n        <span *ngIf=\"input.icon\"\n            class=\"n7-input-text__icon {{input.icon || ''}}\"\n            (click)=\"onChange(input.iconPayload)\">\n        </span>\n    </div>\n</div>\n" }]
+            args: [{ selector: 'n7-input-text', template: "<div *ngIf=\"data as input\"\n     class=\"n7-input-text\">\n    <label *ngIf=\"input.label\"\n        class=\"n7-input-text__label\"\n        for=\"{{ input.id }}\" [innerHTML]=\"input.label\">\n    </label>\n    <div class=\"n7-input-text__wrapper\"\n        [ngClass]=\"{\n            'has-icon': !!input.icon\n        }\">\n        <input id=\"{{ input.id }}\"\n            class=\"n7-input-text__text {{input.classes || ''}}\"\n            placeholder=\"{{input.placeholder || ''}}\"\n            [type]=\"input.type ? input.type : 'text'\"\n            [value]=\"input.value || null\"\n            [disabled]=\"input.disabled\"\n            [min]=\"input.type === 'number' && (input.min || input.min === 0) ? input.min : ''\"\n            [max]=\"input.type === 'number' && (input.max || input.max === 0) ? input.max : ''\"\n            (input)=\"onChange(input.inputPayload, $event.target.value)\"\n            (keyup.enter)=\"onChange(input.enterPayload, $event.target.value)\">\n        <span *ngIf=\"input.icon\"\n            class=\"n7-input-text__icon {{input.icon || ''}}\"\n            (click)=\"onChange(input.iconPayload)\">\n        </span>\n    </div>\n</div>\n" }]
         }], propDecorators: { data: [{
                 type: Input
             }], emit: [{
@@ -1338,9 +1397,9 @@ class ItemPreviewComponent {
         this.emit('click', payload);
     }
 }
-ItemPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ItemPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ItemPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: ItemPreviewComponent, selector: "n7-item-preview", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-item-preview {{data.classes || ''}}\" \n     [ngClass]=\"{\n         'has-image' : !!data.image,\n         'has-color' : !!data.color,\n         'has-link'  : !!data.anchor\n    }\">\n    <n7-anchor-wrapper\n    [data]=\"data.anchor\"\n    (clicked)=\"onClick($event)\"\n    [classes]=\"'n7-item-preview__inner'\">\n        <!-- Image, color -->\n        <div class=\"n7-item-preview__image n7-item-preview__color\"\n            *ngIf=\"data.image || data.color\"\n            [style.background-image] = \"data.image ? 'url(' + data.image + ')' : undefined\"\n            [style.background-color] = \"data.color\">\n        </div>\n        <div class=\"n7-item-preview__content\">\n            <!-- Title and text -->\n            <div class=\"n7-item-preview__title-text\">\n                <h1 class=\"n7-item-preview__title\" [innerHTML]=\"data.title\"></h1>\n                <p class=\"n7-item-preview__text\" *ngIf=\"data.text\" [innerHTML]=\"data.text\"></p>\n            </div>\n            <!-- Metadata -->\n            <div class=\"n7-item-preview__metadata\" *ngIf=\"data.metadata\">\n                <div class=\"n7-item-preview__metadata-group {{ meta.classes || '' }}\" *ngFor=\"let meta of data.metadata\">\n                    <h3 class=\"n7-item-preview__metadata-group-title\" *ngIf=\"meta.title\" [innerHTML]=\"meta.title\"></h3>\n                    <div class=\"n7-item-preview__metadata-item {{ item.classes || '' }}\" *ngFor=\"let item of meta.items\">\n                        <span class=\"n7-item-preview__metadata-item-icon {{item.icon}}\" *ngIf=\"item.icon\"></span>\n                        <span class=\"n7-item-preview__metadata-item-label\" *ngIf=\"item.label\" [innerHTML]=\"item.label\"></span>\n                        <span class=\"n7-item-preview__metadata-item-value\" *ngIf=\"item.value\" [innerHTML]=\"item.value\"></span>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </n7-anchor-wrapper>\n</div>\n", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ItemPreviewComponent, decorators: [{
+ItemPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ItemPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ItemPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ItemPreviewComponent, selector: "n7-item-preview", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-item-preview {{data.classes || ''}}\" \n     [ngClass]=\"{\n         'has-image' : !!data.image,\n         'has-color' : !!data.color,\n         'has-link'  : !!data.anchor\n    }\">\n    <n7-anchor-wrapper\n    [data]=\"data.anchor\"\n    (clicked)=\"onClick($event)\"\n    [classes]=\"'n7-item-preview__inner'\">\n        <!-- Image, color -->\n        <div class=\"n7-item-preview__image n7-item-preview__color\"\n            *ngIf=\"data.image || data.color\"\n            [style.background-image] = \"data.image ? 'url(' + data.image + ')' : undefined\"\n            [style.background-color] = \"data.color\">\n        </div>\n        <div class=\"n7-item-preview__content\">\n            <!-- Title and text -->\n            <div class=\"n7-item-preview__title-text\">\n                <h1 class=\"n7-item-preview__title\" [innerHTML]=\"data.title\"></h1>\n                <p class=\"n7-item-preview__text\" *ngIf=\"data.text\" [innerHTML]=\"data.text\"></p>\n            </div>\n            <!-- Metadata -->\n            <div class=\"n7-item-preview__metadata\" *ngIf=\"data.metadata\">\n                <div class=\"n7-item-preview__metadata-group {{ meta.classes || '' }}\" *ngFor=\"let meta of data.metadata\">\n                    <h3 class=\"n7-item-preview__metadata-group-title\" *ngIf=\"meta.title\" [innerHTML]=\"meta.title\"></h3>\n                    <div class=\"n7-item-preview__metadata-item {{ item.classes || '' }}\" *ngFor=\"let item of meta.items\">\n                        <span class=\"n7-item-preview__metadata-item-icon {{item.icon}}\" *ngIf=\"item.icon\"></span>\n                        <span class=\"n7-item-preview__metadata-item-label\" *ngIf=\"item.label\" [innerHTML]=\"item.label\"></span>\n                        <span class=\"n7-item-preview__metadata-item-value\" *ngIf=\"item.value\" [innerHTML]=\"item.value\"></span>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </n7-anchor-wrapper>\n</div>\n", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ItemPreviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'n7-item-preview', template: "<div *ngIf=\"data\" class=\"n7-item-preview {{data.classes || ''}}\" \n     [ngClass]=\"{\n         'has-image' : !!data.image,\n         'has-color' : !!data.color,\n         'has-link'  : !!data.anchor\n    }\">\n    <n7-anchor-wrapper\n    [data]=\"data.anchor\"\n    (clicked)=\"onClick($event)\"\n    [classes]=\"'n7-item-preview__inner'\">\n        <!-- Image, color -->\n        <div class=\"n7-item-preview__image n7-item-preview__color\"\n            *ngIf=\"data.image || data.color\"\n            [style.background-image] = \"data.image ? 'url(' + data.image + ')' : undefined\"\n            [style.background-color] = \"data.color\">\n        </div>\n        <div class=\"n7-item-preview__content\">\n            <!-- Title and text -->\n            <div class=\"n7-item-preview__title-text\">\n                <h1 class=\"n7-item-preview__title\" [innerHTML]=\"data.title\"></h1>\n                <p class=\"n7-item-preview__text\" *ngIf=\"data.text\" [innerHTML]=\"data.text\"></p>\n            </div>\n            <!-- Metadata -->\n            <div class=\"n7-item-preview__metadata\" *ngIf=\"data.metadata\">\n                <div class=\"n7-item-preview__metadata-group {{ meta.classes || '' }}\" *ngFor=\"let meta of data.metadata\">\n                    <h3 class=\"n7-item-preview__metadata-group-title\" *ngIf=\"meta.title\" [innerHTML]=\"meta.title\"></h3>\n                    <div class=\"n7-item-preview__metadata-item {{ item.classes || '' }}\" *ngFor=\"let item of meta.items\">\n                        <span class=\"n7-item-preview__metadata-item-icon {{item.icon}}\" *ngIf=\"item.icon\"></span>\n                        <span class=\"n7-item-preview__metadata-item-label\" *ngIf=\"item.label\" [innerHTML]=\"item.label\"></span>\n                        <span class=\"n7-item-preview__metadata-item-value\" *ngIf=\"item.value\" [innerHTML]=\"item.value\"></span>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </n7-anchor-wrapper>\n</div>\n" }]
         }], propDecorators: { data: [{
@@ -1352,9 +1411,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
 //---------------------------
 class LoaderComponent {
 }
-LoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: LoaderComponent, selector: "n7-loader", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"n7-loader {{ data && data.classes ? data.classes : '' }}\">\n    Loading\n</div>" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: LoaderComponent, decorators: [{
+LoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: LoaderComponent, selector: "n7-loader", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"n7-loader {{ data && data.classes ? data.classes : '' }}\">\n    Loading\n</div>" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'n7-loader', template: "<div class=\"n7-loader {{ data && data.classes ? data.classes : '' }}\">\n    Loading\n</div>" }]
         }], propDecorators: { data: [{
@@ -1409,9 +1468,9 @@ class MapComponent {
         });
     }
 }
-MapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: MapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: MapComponent, selector: "n7-map", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-map\">\n  <div class=\"n7-map__container\" [id]=\"data.containerId\"></div>\n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: MapComponent, decorators: [{
+MapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: MapComponent, selector: "n7-map", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-map\">\n  <div class=\"n7-map__container\" [id]=\"data.containerId\"></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: MapComponent, decorators: [{
             type: Component,
             args: [{ selector: 'n7-map', template: "<div *ngIf=\"data\" class=\"n7-map\">\n  <div class=\"n7-map__container\" [id]=\"data.containerId\"></div>\n</div>\n" }]
         }], propDecorators: { data: [{
@@ -1423,9 +1482,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
 //---------------------------
 class MetadataViewerComponent {
 }
-MetadataViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: MetadataViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MetadataViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: MetadataViewerComponent, selector: "n7-metadata-viewer", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-metadata-viewer\">\n    <!-- Metadata groups wrapper -->\n    <div class=\"n7-metadata-viewer__wrapper {{ data.classes  || ''}}\"\n          *ngFor=\"let grp of data.group\">\n        <!-- For each data group, render it -->\n        <ng-container *ngTemplateOutlet=\"group; context:{$implicit: grp}\"></ng-container>\n    </div>\n</div>\n\n<!-- Template for Metadata.group -->\n<ng-template #group let-grp>\n    <div *ngIf=\"grp.title || grp.items\" class=\"n7-metadata-viewer__group {{ grp.classes || '' }}\">\n        <div class=\"n7-metadata-viewer__group-title\" *ngIf=\"grp.title\">{{grp.title}}</div>\n        <div class=\"n7-metadata-viewer__group-content\" *ngIf=\"grp.items\">\n            <div class=\"n7-metadata-viewer__item\" *ngFor=\"let i of grp.items\">\n                <span *ngIf=\"i.label\" class=\"n7-metadata-viewer__item-label\">{{ i.label }}</span>\n                <span *ngIf=\"i.value\" class=\"n7-metadata-viewer__item-value\" [innerHTML]=\"i.value\"></span>\n            </div>\n        </div>\n    </div>\n    <!-- Render all child groups -->\n    <div *ngIf=\"grp.group\">\n        <div class=\"n7-metadata-viewer__group-wrapper\"\n              *ngFor=\"let grp of grp.group\">\n            <ng-container *ngTemplateOutlet=\"group; context:{$implicit: grp}\"></ng-container>\n        </div>\n    </div>\n</ng-template>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: MetadataViewerComponent, decorators: [{
+MetadataViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MetadataViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MetadataViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: MetadataViewerComponent, selector: "n7-metadata-viewer", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-metadata-viewer\">\n    <!-- Metadata groups wrapper -->\n    <div class=\"n7-metadata-viewer__wrapper {{ data.classes  || ''}}\"\n          *ngFor=\"let grp of data.group\">\n        <!-- For each data group, render it -->\n        <ng-container *ngTemplateOutlet=\"group; context:{$implicit: grp}\"></ng-container>\n    </div>\n</div>\n\n<!-- Template for Metadata.group -->\n<ng-template #group let-grp>\n    <div *ngIf=\"grp.title || grp.items\" class=\"n7-metadata-viewer__group {{ grp.classes || '' }}\">\n        <div class=\"n7-metadata-viewer__group-title\" *ngIf=\"grp.title\">{{grp.title}}</div>\n        <div class=\"n7-metadata-viewer__group-content\" *ngIf=\"grp.items\">\n            <div class=\"n7-metadata-viewer__item\" *ngFor=\"let i of grp.items\">\n                <span *ngIf=\"i.label\" class=\"n7-metadata-viewer__item-label\">{{ i.label }}</span>\n                <span *ngIf=\"i.value\" class=\"n7-metadata-viewer__item-value\" [innerHTML]=\"i.value\"></span>\n            </div>\n        </div>\n    </div>\n    <!-- Render all child groups -->\n    <div *ngIf=\"grp.group\">\n        <div class=\"n7-metadata-viewer__group-wrapper\"\n              *ngFor=\"let grp of grp.group\">\n            <ng-container *ngTemplateOutlet=\"group; context:{$implicit: grp}\"></ng-container>\n        </div>\n    </div>\n</ng-template>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MetadataViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'n7-metadata-viewer', template: "<div *ngIf=\"data\" class=\"n7-metadata-viewer\">\n    <!-- Metadata groups wrapper -->\n    <div class=\"n7-metadata-viewer__wrapper {{ data.classes  || ''}}\"\n          *ngFor=\"let grp of data.group\">\n        <!-- For each data group, render it -->\n        <ng-container *ngTemplateOutlet=\"group; context:{$implicit: grp}\"></ng-container>\n    </div>\n</div>\n\n<!-- Template for Metadata.group -->\n<ng-template #group let-grp>\n    <div *ngIf=\"grp.title || grp.items\" class=\"n7-metadata-viewer__group {{ grp.classes || '' }}\">\n        <div class=\"n7-metadata-viewer__group-title\" *ngIf=\"grp.title\">{{grp.title}}</div>\n        <div class=\"n7-metadata-viewer__group-content\" *ngIf=\"grp.items\">\n            <div class=\"n7-metadata-viewer__item\" *ngFor=\"let i of grp.items\">\n                <span *ngIf=\"i.label\" class=\"n7-metadata-viewer__item-label\">{{ i.label }}</span>\n                <span *ngIf=\"i.value\" class=\"n7-metadata-viewer__item-value\" [innerHTML]=\"i.value\"></span>\n            </div>\n        </div>\n    </div>\n    <!-- Render all child groups -->\n    <div *ngIf=\"grp.group\">\n        <div class=\"n7-metadata-viewer__group-wrapper\"\n              *ngFor=\"let grp of grp.group\">\n            <ng-container *ngTemplateOutlet=\"group; context:{$implicit: grp}\"></ng-container>\n        </div>\n    </div>\n</ng-template>" }]
         }], propDecorators: { data: [{
@@ -1441,9 +1500,9 @@ class NavComponent {
         this.emit('click', payload);
     }
 }
-NavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NavComponent, decorators: [{
+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"] }] });
+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>" }]
         }], propDecorators: { data: [{
@@ -1466,9 +1525,9 @@ class PaginationComponent {
         this.emit('change', { inputPayload: payload, value });
     }
 }
-PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: PaginationComponent, selector: "n7-pagination", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<nav class=\"n7-pagination {{data.classes || ''}}\" \n     *ngIf=\"data\"\n     [ngClass]=\"{ 'has-results-select' : data.select }\">\n    <ul class=n7-pagination__items>\n\n        <li class=\"n7-pagination__first {{data.first.classes || ''}}\" *ngIf=\"data.first\">\n            <ng-container *ngTemplateOutlet=\"button; context: {\n                type: 'first',\n                data: data.first,\n                iconClass: 'n7-icon-angle-double-left'\n            }\"></ng-container>\n        </li>\n        <li class=\"n7-pagination__prev {{data.prev.classes || ''}}\" *ngIf=\"data.prev\">\n            <ng-container *ngTemplateOutlet=\"button; context: {\n                type: 'prev',\n                data: data.prev,\n                iconClass: 'n7-icon-angle-left'\n            }\"></ng-container>\n        </li>\n\n        <li class=\"n7-pagination__page {{page.classes || ''}}\" *ngFor=\"let page of data.links\">\n            <ng-container *ngTemplateOutlet=\"button; context: {\n                type: 'page',\n                data: page,\n                clicked: onClick\n            }\"></ng-container>\n        </li>\n\n        <li class=\"n7-pagination__next {{data.next.classes || ''}}\" *ngIf=\"data.next\">\n            <ng-container *ngTemplateOutlet=\"button; context: {\n                type: 'next',\n                data: data.next,\n                iconClass: 'n7-icon-angle-right'\n            }\"></ng-container>\n        </li>\n        <li class=\"n7-pagination__last {{data.last.classes || ''}}\" *ngIf=\"data.last\">\n            <ng-container *ngTemplateOutlet=\"button; context: {\n                type: 'last',\n                data: data.last,\n                iconClass: 'n7-icon-angle-double-right'\n            }\"></ng-container>\n        </li>\n    </ul>\n    \n    <div class=\"n7-pagination__setting\"\n         *ngIf=\"data.select\">\n        <span class=\"n7-pagination__setting-label\"\n              *ngIf=\"data.select.label\">\n            {{data.select.label}}\n        </span>\n        <select *ngIf=\"data.select.options\" \n                name=\"n7-pagination__select-size\" \n                class=\"n7-pagination__setting-select\"\n                (change)=\"onChange(data.select.payload, $event.target.value)\"\n                [disabled]=\"data.select.disabled\">\n            <option *ngFor=\"let opt of data.select.options\"\n                    [disabled]=\"opt.disabled\"\n                    [selected]=\"opt.selected\">\n                {{opt.text}}\n            </option>\n        </select>\n    </div>\n</nav>\n\n<ng-template #button let-type=\"type\" let-data=\"data\" let-clicked=\"clicked\" let-iconClass=\"iconClass\">\n    <n7-anchor-wrapper \n    [classes]=\"'n7-pagination__' + type + '-link' + (data.text ? ' has-text' : '')\" \n    [data]=\"data.anchor\" \n    (clicked)=\"onClick($event)\">\n        <span class=\"n7-pagination__{{ type }}-label\" *ngIf=\"data.text\">\n            {{ data.text }}\n        </span>\n        <span *ngIf=\"iconClass\" class=\"n7-pagination__{{ type }}-icon {{ iconClass }}\"></span>\n    </n7-anchor-wrapper>\n</ng-template>", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: PaginationComponent, decorators: [{
+PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: PaginationComponent, selector: "n7-pagination", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<nav class=\"n7-pagination {{data.classes || ''}}\" \n     *ngIf=\"data\"\n     [ngClass]=\"{ 'has-results-select' : data.select }\">\n    <ul class=n7-pagination__items>\n\n        <li class=\"n7-pagination__first {{data.first.classes || ''}}\" *ngIf=\"data.first\">\n            <ng-container *ngTemplateOutlet=\"button; context: {\n                type: 'first',\n                data: data.first,\n                iconClass: 'n7-icon-angle-double-left'\n            }\"></ng-container>\n        </li>\n        <li class=\"n7-pagination__prev {{data.prev.classes || ''}}\" *ngIf=\"data.prev\">\n            <ng-container *ngTemplateOutlet=\"button; context: {\n                type: 'prev',\n                data: data.prev,\n                iconClass: 'n7-icon-angle-left'\n            }\"></ng-container>\n        </li>\n\n        <li class=\"n7-pagination__page {{page.classes || ''}}\" *ngFor=\"let page of data.links\">\n            <ng-container *ngTemplateOutlet=\"button; context: {\n                type: 'page',\n                data: page,\n                clicked: onClick\n            }\"></ng-container>\n        </li>\n\n        <li class=\"n7-pagination__next {{data.next.classes || ''}}\" *ngIf=\"data.next\">\n            <ng-container *ngTemplateOutlet=\"button; context: {\n                type: 'next',\n                data: data.next,\n                iconClass: 'n7-icon-angle-right'\n            }\"></ng-container>\n        </li>\n        <li class=\"n7-pagination__last {{data.last.classes || ''}}\" *ngIf=\"data.last\">\n            <ng-container *ngTemplateOutlet=\"button; context: {\n                type: 'last',\n                data: data.last,\n                iconClass: 'n7-icon-angle-double-right'\n            }\"></ng-container>\n        </li>\n    </ul>\n    \n    <div class=\"n7-pagination__setting\"\n         *ngIf=\"data.select\">\n        <span class=\"n7-pagination__setting-label\"\n              *ngIf=\"data.select.label\">\n            {{data.select.label}}\n        </span>\n        <select *ngIf=\"data.select.options\" \n                name=\"n7-pagination__select-size\" \n                class=\"n7-pagination__setting-select\"\n                (change)=\"onChange(data.select.payload, $event.target.value)\"\n                [disabled]=\"data.select.disabled\">\n            <option *ngFor=\"let opt of data.select.options\"\n                    [disabled]=\"opt.disabled\"\n                    [selected]=\"opt.selected\">\n                {{opt.text}}\n            </option>\n        </select>\n    </div>\n</nav>\n\n<ng-template #button let-type=\"type\" let-data=\"data\" let-clicked=\"clicked\" let-iconClass=\"iconClass\">\n    <n7-anchor-wrapper \n    [classes]=\"'n7-pagination__' + type + '-link' + (data.text ? ' has-text' : '')\" \n    [data]=\"data.anchor\" \n    (clicked)=\"onClick($event)\">\n        <span class=\"n7-pagination__{{ type }}-label\" *ngIf=\"data.text\">\n            {{ data.text }}\n        </span>\n        <span *ngIf=\"iconClass\" class=\"n7-pagination__{{ type }}-icon {{ iconClass }}\"></span>\n    </n7-anchor-wrapper>\n</ng-template>", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'n7-pagination', template: "<nav class=\"n7-pagination {{data.classes || ''}}\" \n     *ngIf=\"data\"\n     [ngClass]=\"{ 'has-results-select' : data.select }\">\n    <ul class=n7-pagination__items>\n\n        <li class=\"n7-pagination__first {{data.first.classes || ''}}\" *ngIf=\"data.first\">\n            <ng-container *ngTemplateOutlet=\"button; context: {\n                type: 'first',\n                data: data.first,\n                iconClass: 'n7-icon-angle-double-left'\n            }\"></ng-container>\n        </li>\n        <li class=\"n7-pagination__prev {{data.prev.classes || ''}}\" *ngIf=\"data.prev\">\n            <ng-container *ngTemplateOutlet=\"button; context: {\n                type: 'prev',\n                data: data.prev,\n                iconClass: 'n7-icon-angle-left'\n            }\"></ng-container>\n        </li>\n\n        <li class=\"n7-pagination__page {{page.classes || ''}}\" *ngFor=\"let page of data.links\">\n            <ng-container *ngTemplateOutlet=\"button; context: {\n                type: 'page',\n                data: page,\n                clicked: onClick\n            }\"></ng-container>\n        </li>\n\n        <li class=\"n7-pagination__next {{data.next.classes || ''}}\" *ngIf=\"data.next\">\n            <ng-container *ngTemplateOutlet=\"button; context: {\n                type: 'next',\n                data: data.next,\n                iconClass: 'n7-icon-angle-right'\n            }\"></ng-container>\n        </li>\n        <li class=\"n7-pagination__last {{data.last.classes || ''}}\" *ngIf=\"data.last\">\n            <ng-container *ngTemplateOutlet=\"button; context: {\n                type: 'last',\n                data: data.last,\n                iconClass: 'n7-icon-angle-double-right'\n            }\"></ng-container>\n        </li>\n    </ul>\n    \n    <div class=\"n7-pagination__setting\"\n         *ngIf=\"data.select\">\n        <span class=\"n7-pagination__setting-label\"\n              *ngIf=\"data.select.label\">\n            {{data.select.label}}\n        </span>\n        <select *ngIf=\"data.select.options\" \n                name=\"n7-pagination__select-size\" \n                class=\"n7-pagination__setting-select\"\n                (change)=\"onChange(data.select.payload, $event.target.value)\"\n                [disabled]=\"data.select.disabled\">\n            <option *ngFor=\"let opt of data.select.options\"\n                    [disabled]=\"opt.disabled\"\n                    [selected]=\"opt.selected\">\n                {{opt.text}}\n            </option>\n        </select>\n    </div>\n</nav>\n\n<ng-template #button let-type=\"type\" let-data=\"data\" let-clicked=\"clicked\" let-iconClass=\"iconClass\">\n    <n7-anchor-wrapper \n    [classes]=\"'n7-pagination__' + type + '-link' + (data.text ? ' has-text' : '')\" \n    [data]=\"data.anchor\" \n    (clicked)=\"onClick($event)\">\n        <span class=\"n7-pagination__{{ type }}-label\" *ngIf=\"data.text\">\n            {{ data.text }}\n        </span>\n        <span *ngIf=\"iconClass\" class=\"n7-pagination__{{ type }}-icon {{ iconClass }}\"></span>\n    </n7-anchor-wrapper>\n</ng-template>" }]
         }], propDecorators: { data: [{
@@ -1485,9 +1544,9 @@ class SidebarHeaderComponent {
         this.emit('click', payload);
     }
 }
-SidebarHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SidebarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SidebarHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: SidebarHeaderComponent, selector: "n7-sidebar-header", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-sidebar-header {{ data.classes || ''}}\">\n    <span class=\"n7-sidebar-header__icon-left {{ data.iconLeft }}\" \n          *ngIf=\"data.iconLeft\">\n    </span>\n    <span class=\"n7-sidebar-header__text-wrapper\"\n          *ngIf=\"data.text || data.additionalText\">\n        <span class=\"n7-sidebar-header__text\">\n            {{data.text}}\n        </span>\n        <span class=\"n7-sidebar-header__secondary-text\" \n              *ngIf=\"data.additionalText\">\n            {{data.additionalText}}\n        </span>\n    </span>\n    <span *ngIf=\"data.iconRight\"\n          class=\"n7-sidebar-header__icon-right {{ data.iconRight }}\" \n          (click)=\"onClick(data.payload)\"></span>\n</div>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SidebarHeaderComponent, decorators: [{
+SidebarHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SidebarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SidebarHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SidebarHeaderComponent, selector: "n7-sidebar-header", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-sidebar-header {{ data.classes || ''}}\">\n    <span class=\"n7-sidebar-header__icon-left {{ data.iconLeft }}\" \n          *ngIf=\"data.iconLeft\">\n    </span>\n    <span class=\"n7-sidebar-header__text-wrapper\"\n          *ngIf=\"data.text || data.additionalText\">\n        <span class=\"n7-sidebar-header__text\">\n            {{data.text}}\n        </span>\n        <span class=\"n7-sidebar-header__secondary-text\" \n              *ngIf=\"data.additionalText\">\n            {{data.additionalText}}\n        </span>\n    </span>\n    <span *ngIf=\"data.iconRight\"\n          class=\"n7-sidebar-header__icon-right {{ data.iconRight }}\" \n          (click)=\"onClick(data.payload)\"></span>\n</div>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SidebarHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'n7-sidebar-header', template: "<div *ngIf=\"data\" class=\"n7-sidebar-header {{ data.classes || ''}}\">\n    <span class=\"n7-sidebar-header__icon-left {{ data.iconLeft }}\" \n          *ngIf=\"data.iconLeft\">\n    </span>\n    <span class=\"n7-sidebar-header__text-wrapper\"\n          *ngIf=\"data.text || data.additionalText\">\n        <span class=\"n7-sidebar-header__text\">\n            {{data.text}}\n        </span>\n        <span class=\"n7-sidebar-header__secondary-text\" \n              *ngIf=\"data.additionalText\">\n            {{data.additionalText}}\n        </span>\n    </span>\n    <span *ngIf=\"data.iconRight\"\n          class=\"n7-sidebar-header__icon-right {{ data.iconRight }}\" \n          (click)=\"onClick(data.payload)\"></span>\n</div>" }]
         }], propDecorators: { data: [{
@@ -1524,9 +1583,9 @@ class SignupComponent {
         this.emit('focusout', payload);
     }
 }
-SignupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SignupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SignupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: SignupComponent, selector: "n7-signup", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<!-- Signup: login -->\n<section *ngIf=\"data && data.login\" class=\"n7-signup n7-signup--login\">\n    <form class=\"n7-signup__form\" novalidate>\n        <ng-container *ngTemplateOutlet=\"field; context: { $implicit: data.login.email }\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"\n        passwordField;\n        context: { $implicit: data.login.password }\n      \"></ng-container>\n        <div *ngIf=\"data.login.forgotPassword\" class=\"n7-signup__form-item n7-signup__form-item-forgot-password\">\n            <a (click)=\"onClick(data.login.forgotPassword.payload)\" title=\"{{ data.login.forgotPassword.title }}\"\n                [attr.aria-label]=\"data.login.forgotPassword.title\">{{ data.login.forgotPassword.label }}</a>\n        </div>\n        <ng-container *ngTemplateOutlet=\"submit; context: { $implicit: data.login.submit }\"></ng-container>\n    </form>\n    <ng-container *ngTemplateOutlet=\"footer; context: { $implicit: data.login.footer }\"></ng-container>\n</section>\n\n<!-- Signup: signup -->\n<section *ngIf=\"data && data.signup\" class=\"n7-signup n7-signup--signup\">\n    <form class=\"n7-signup__form\" novalidate>\n        <ng-container *ngTemplateOutlet=\"field; context: { $implicit: data.signup.name }\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"field; context: { $implicit: data.signup.email }\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"\n        passwordField;\n        context: { $implicit: data.signup.password }\n      \"></ng-container>\n        <ng-container *ngTemplateOutlet=\"\n        passwordField;\n        context: { $implicit: data.signup.rePassword }\n      \"></ng-container>\n        <ng-container *ngTemplateOutlet=\"submit; context: { $implicit: data.signup.submit }\"></ng-container>\n    </form>\n    <ng-container *ngTemplateOutlet=\"footer; context: { $implicit: data.signup.footer }\"></ng-container>\n</section>\n\n<!-- Signup: forgot password -->\n<section *ngIf=\"data && data.forgotPassword\" class=\"n7-signup n7-signup--forgot-password\">\n    <p class=\"n7-signup__text\">\n        {{ data.forgotPassword.description }}\n    </p>\n    <form class=\"n7-signup__form\" novalidate>\n        <ng-container *ngTemplateOutlet=\"\n        field;\n        context: { $implicit: data.forgotPassword.email }\n      \"></ng-container>\n\n        <ng-container *ngTemplateOutlet=\"\n        submit;\n        context: { $implicit: data.forgotPassword.submit }\n      \"></ng-container>\n\n      <!-- hidden submit button to prevent submit on enter -->\n      <button type=\"submit\" disabled style=\"display: none\" aria-hidden=\"true\"></button>\n    </form>\n    <ng-container *ngTemplateOutlet=\"\n      footer;\n      context: { $implicit: data.forgotPassword.footer }\n    \"></ng-container>\n</section>\n\n<!-- Template: field -->\n<ng-template #field let-field>\n    <div [ngClass]=\"{\n      'has-error': field.error,\n      'has-hint': field.hint\n    }\" class=\"n7-signup__form-item {{ field.classes || '' }}\">\n        <label class=\"n7-signup__form-item-label\" for=\"{{ field.id }}\">{{\n      field.label\n    }}</label>\n        <div *ngIf=\"field.hint\" class=\"n7-signup__form-item-hint\">\n            {{ field.hint }}\n        </div>\n        <div class=\"n7-signup__input-wrapper\">\n            <input (focus)=\"onFocus(field.payload)\" (focusout)=\"onFocusOut(field.payload)\"\n                (keyup.enter)=\"onInputEnter(field.payload, $event.target.value)\"\n                (input)=\"onChange(field.payload, $event.target.value)\" class=\"n7-signup__form-item-input\"\n                type=\"{{ field.inputType }}\" id=\"{{ field.id }}\" />\n        </div>\n        <div *ngIf=\"field.error\" class=\"n7-signup__form-error\">\n            {{ field.error }}\n        </div>\n    </div>\n</ng-template>\n\n<!-- Template: password-field -->\n<ng-template #passwordField let-field>\n    <div [ngClass]=\"{\n      'has-error': field.error,\n      'has-hint': field.hint\n    }\" class=\"n7-signup__form-item {{ field.classes || '' }}\">\n        <label class=\"n7-signup__form-item-label\" for=\"{{ field.id }}\">{{\n      field.label\n    }}</label>\n        <div *ngIf=\"field.hint\" class=\"n7-signup__form-item-hint\">\n            {{ field.hint }}\n        </div>\n        <div class=\"n7-signup__input-wrapper\">\n            <input (focus)=\"onFocus(field.payload)\" (focusout)=\"onFocusOut(field.payload)\"\n                (keyup.enter)=\"onInputEnter(field.payload, $event.target.value)\"\n                (input)=\"onChange(field.payload, $event.target.value)\" class=\"n7-signup__form-item-input\"\n                type=\"{{ field.inputType }}\" id=\"{{ field.id }}\" />\n            <button *ngIf=\"field.show\" type=\"button\" (click)=\"onClick(field.show.payload)\"\n                [attr.aria-label]=\"field.show.label\" class=\"n7-signup__form-item-show-password\">\n                <i [attr.aria-label]=\"field.show.label\" class=\"{{ field.show.icon }}\"></i>\n            </button>\n        </div>\n        <div *ngIf=\"field.error\" class=\"n7-signup__form-error\">\n            {{ field.error }}\n        </div>\n    </div>\n</ng-template>\n\n<!-- Template: footer -->\n<ng-template #footer let-footer>\n    <footer *ngIf=\"footer\" class=\"n7-signup__footer {{ footer.classes || '' }}\">\n        <div class=\"n7-signup__footer-text\">{{ footer.label }}</div>\n        <a *ngIf=\"footer.action\" (click)=\"onClick(footer.action.payload)\" title=\"{{ footer.action.label }}\"\n            class=\"n7-btn\">{{ footer.action.label }}</a>\n    </footer>\n</ng-template>\n\n<!-- Template: submit button -->\n<ng-template #submit let-submit>\n    <div [ngClass]=\"{\n      'has-error': submit.error\n    }\" class=\"n7-signup__form-item n7-signup__form-item-action {{\n      submit.classes || ''\n    }}\">\n        <button type=\"button\" (click)=\"onClick(submit.payload)\" [attr.aria-label]=\"submit.label\"\n            class=\"n7-btn n7-btn-cta\">\n            {{ submit.label }}\n        </button>\n        <div *ngIf=\"submit.error\" class=\"n7-signup__form-error\">\n            {{ submit.error }}\n        </div>\n    </div>\n</ng-template>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.2", ngImport: i0, type: SignupComponent, decorators: [{
+SignupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SignupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SignupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SignupComponent, selector: "n7-signup", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<!-- Signup: login -->\n<section *ngIf=\"data && data.login\" class=\"n7-signup n7-signup--login\">\n    <form class=\"n7-signup__form\" novalidate>\n        <ng-container *ngTemplateOutlet=\"field; context: { $implicit: data.login.email }\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"\n        passwordField;\n        context: { $implicit: data.login.password }\n      \"></ng-container>\n        <div *ngIf=\"data.login.forgotPassword\" class=\"n7-signup__form-item n7-signup__form-item-forgot-password\">\n            <a (click)=\"onClick(data.login.forgotPassword.payload)\" title=\"{{ data.login.forgotPassword.title }}\"\n                [attr.aria-label]=\"data.login.forgotPassword.title\">{{ data.login.forgotPassword.label }}</a>\n        </div>\n        <ng-container *ngTemplateOutlet=\"submit; context: { $implicit: data.login.submit }\"></ng-container>\n    </form>\n    <ng-container *ngTemplateOutlet=\"footer; context: { $implicit: data.login.footer }\"></ng-container>\n</section>\n\n<!-- Signup: signup -->\n<section *ngIf=\"data && data.signup\" class=\"n7-signup n7-signup--signup\">\n    <form class=\"n7-signup__form\" novalidate>\n        <ng-container *ngTemplateOutlet=\"field; context: { $implicit: data.signup.name }\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"field; context: { $implicit: data.signup.email }\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"\n        passwordField;\n        context: { $implicit: data.signup.password }\n      \"></ng-container>\n        <ng-container *ngTemplateOutlet=\"\n        passwordField;\n        context: { $implicit: data.signup.rePassword }\n      \"></ng-container>\n        <ng-container *ngTemplateOutlet=\"submit; context: { $implicit: data.signup.submit }\"></ng-container>\n    </form>\n    <ng-container *ngTemplateOutlet=\"footer; context: { $implicit: data.signup.footer }\"></ng-container>\n</section>\n\n<!-- Signup: forgot password -->\n<section *ngIf=\"data && data.forgotPassword\" class=\"n7-signup n7-signup--forgot-password\">\n    <p class=\"n7-signup__text\">\n        {{ data.forgotPassword.description }}\n    </p>\n    <form class=\"n7-signup__form\" novalidate>\n        <ng-container *ngTemplateOutlet=\"\n        field;\n        context: { $implicit: data.forgotPassword.email }\n      \"></ng-container>\n\n        <ng-container *ngTemplateOutlet=\"\n        submit;\n        context: { $implicit: data.forgotPassword.submit }\n      \"></ng-container>\n\n      <!-- hidden submit button to prevent submit on enter -->\n      <button type=\"submit\" disabled style=\"display: none\" aria-hidden=\"true\"></button>\n    </form>\n    <ng-container *ngTemplateOutlet=\"\n      footer;\n      context: { $implicit: data.forgotPassword.footer }\n    \"></ng-container>\n</section>\n\n<!-- Template: field -->\n<ng-template #field let-field>\n    <div [ngClass]=\"{\n      'has-error': field.error,\n      'has-hint': field.hint\n    }\" class=\"n7-signup__form-item {{ field.classes || '' }}\">\n        <label class=\"n7-signup__form-item-label\" for=\"{{ field.id }}\">{{\n      field.label\n    }}</label>\n        <div *ngIf=\"field.hint\" class=\"n7-signup__form-item-hint\">\n            {{ field.hint }}\n        </div>\n        <div class=\"n7-signup__input-wrapper\">\n            <input (focus)=\"onFocus(field.payload)\" (focusout)=\"onFocusOut(field.payload)\"\n                (keyup.enter)=\"onInputEnter(field.payload, $event.target.value)\"\n                (input)=\"onChange(field.payload, $event.target.value)\" class=\"n7-signup__form-item-input\"\n                type=\"{{ field.inputType }}\" id=\"{{ field.id }}\" />\n        </div>\n        <div *ngIf=\"field.error\" class=\"n7-signup__form-error\">\n            {{ field.error }}\n        </div>\n    </div>\n</ng-template>\n\n<!-- Template: password-field -->\n<ng-template #passwordField let-field>\n    <div [ngClass]=\"{\n      'has-error': field.error,\n      'has-hint': field.hint\n    }\" class=\"n7-signup__form-item {{ field.classes || '' }}\">\n        <label class=\"n7-signup__form-item-label\" for=\"{{ field.id }}\">{{\n      field.label\n    }}</label>\n        <div *ngIf=\"field.hint\" class=\"n7-signup__form-item-hint\">\n            {{ field.hint }}\n        </div>\n        <div class=\"n7-signup__input-wrapper\">\n            <input (focus)=\"onFocus(field.payload)\" (focusout)=\"onFocusOut(field.payload)\"\n                (keyup.enter)=\"onInputEnter(field.payload, $event.target.value)\"\n                (input)=\"onChange(field.payload, $event.target.value)\" class=\"n7-signup__form-item-input\"\n                type=\"{{ field.inputType }}\" id=\"{{ field.id }}\" />\n            <button *ngIf=\"field.show\" type=\"button\" (click)=\"onClick(field.show.payload)\"\n                [attr.aria-label]=\"field.show.label\" class=\"n7-signup__form-item-show-password\">\n                <i [attr.aria-label]=\"field.show.label\" class=\"{{ field.show.icon }}\"></i>\n            </button>\n        </div>\n        <div *ngIf=\"field.error\" class=\"n7-signup__form-error\">\n            {{ field.error }}\n        </div>\n    </div>\n</ng-template>\n\n<!-- Template: footer -->\n<ng-template #footer let-footer>\n    <footer *ngIf=\"footer\" class=\"n7-signup__footer {{ footer.classes || '' }}\">\n        <div class=\"n7-signup__footer-text\">{{ footer.label }}</div>\n        <a *ngIf=\"footer.action\" (click)=\"onClick(footer.action.payload)\" title=\"{{ footer.action.label }}\"\n            class=\"n7-btn\">{{ footer.action.label }}</a>\n    </footer>\n</ng-template>\n\n<!-- Template: submit button -->\n<ng-template #submit let-submit>\n    <div [ngClass]=\"{\n      'has-error': submit.error\n    }\" class=\"n7-signup__form-item n7-signup__form-item-action {{\n      submit.classes || ''\n    }}\">\n        <button type=\"button\" (click)=\"onClick(submit.payload)\" [attr.aria-label]=\"submit.label\"\n            class=\"n7-btn n7-btn-cta\">\n            {{ submit.label }}\n        </button>\n        <div *ngIf=\"submit.error\" class=\"n7-signup__form-error\">\n            {{ submit.error }}\n        </div>\n    </div>\n</ng-template>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: SignupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'n7-signup', template: "<!-- Signup: login -->\n<section *ngIf=\"data && data.login\" class=\"n7-signup n7-signup--login\">\n    <form class=\"n7-signup__form\" novalidate>\n        <ng-container *ngTemplateOutlet=\"field; context: { $implicit: data.login.email }\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"\n        passwordField;\n        context: { $implicit: data.login.password }\n      \"></ng-container>\n        <div *ngIf=\"data.login.forgotPassword\" class=\"n7-signup__form-item n7-signup__form-item-forgot-password\">\n            <a (click)=\"onClick(data.login.forgotPassword.payload)\" title=\"{{ data.login.forgotPassword.title }}\"\n                [attr.aria-label]=\"data.login.forgotPassword.title\">{{ data.login.forgotPassword.label }}</a>\n        </div>\n        <ng-container *ngTemplateOutlet=\"submit; context: { $implicit: data.login.submit }\"></ng-container>\n    </form>\n    <ng-container *ngTemplateOutlet=\"footer; context: { $implicit: data.login.footer }\"></ng-container>\n</section>\n\n<!-- Signup: signup -->\n<section *ngIf=\"data && data.signup\" class=\"n7-signup n7-signup--signup\">\n    <form class=\"n7-signup__form\" novalidate>\n        <ng-container *ngTemplateOutlet=\"field; context: { $implicit: data.signup.name }\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"field; context: { $implicit: data.signup.email }\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"\n        passwordField;\n        context: { $implicit: data.signup.password }\n      \"></ng-container>\n        <ng-container *ngTemplateOutlet=\"\n        passwordField;\n        context: { $implicit: data.signup.rePassword }\n      \"></ng-container>\n        <ng-container *ngTemplateOutlet=\"submit; context: { $implicit: data.signup.submit }\"></ng-container>\n    </form>\n    <ng-container *ngTemplateOutlet=\"footer; context: { $implicit: data.signup.footer }\"></ng-container>\n</section>\n\n<!-- Signup: forgot password -->\n<section *ngIf=\"data && data.forgotPassword\" class=\"n7-signup n7-signup--forgot-password\">\n    <p class=\"n7-signup__text\">\n        {{ data.forgotPassword.description }}\n    </p>\n    <form class=\"n7-signup__form\" novalidate>\n        <ng-container *ngTemplateOutlet=\"\n        field;\n        context: { $implicit: data.forgotPassword.email }\n      \"></ng-container>\n\n        <ng-container *ngTemplateOutlet=\"\n        submit;\n        context: { $implicit: data.forgotPassword.submit }\n      \"></ng-container>\n\n      <!-- hidden submit button to prevent submit on enter -->\n      <button type=\"submit\" disabled style=\"display: none\" aria-hidden=\"true\"></button>\n    </form>\n    <ng-container *ngTemplateOutlet=\"\n      footer;\n      context: { $implicit: data.forgotPassword.footer }\n    \"></ng-container>\n</section>\n\n<!-- Template: field -->\n<ng-template #field let-field>\n    <div [ngClass]=\"{\n      'has-error': field.error,\n      'has-hint': field.hint\n    }\" class=\"n7-signup__form-item {{ field.classes || '' }}\">\n        <label class=\"n7-signup__form-item-label\" for=\"{{ field.id }}\">{{\n      field.label\n    }}</label>\n        <div *ngIf=\"field.hint\" class=\"n7-signup__form-item-hint\">\n            {{ field.hint }}\n        </div>\n        <div class=\"n7-signup__input-wrapper\">\n            <input (focus)=\"onFocus(field.payload)\" (focusout)=\"onFocusOut(field.payload)\"\n                (keyup.enter)=\"onInputEnter(field.payload, $event.target.value)\"\n                (input)=\"onChange(field.payload, $event.target.value)\" class=\"n7-signup__form-item-input\"\n                type=\"{{ field.inputType }}\" id=\"{{ field.id }}\" />\n        </div>\n        <div *ngIf=\"field.error\" class=\"n7-signup__form-error\">\n            {{ field.error }}\n        </div>\n    </div>\n</ng-template>\n\n<!-- Template: password-field -->\n<ng-template #passwordField let-field>\n    <div [ngClass]=\"{\n      'has-error': field.error,\n      'has-hint': field.hint\n    }\" class=\"n7-signup__form-item {{ field.classes || '' }}\">\n        <label class=\"n7-signup__form-item-label\" for=\"{{ field.id }}\">{{\n      field.label\n    }}</label>\n        <div *ngIf=\"field.hint\" class=\"n7-signup__form-item-hint\">\n            {{ field.hint }}\n        </div>\n        <div class=\"n7-signup__input-wrapper\">\n            <input (focus)=\"onFocus(field.payload)\" (focusout)=\"onFocusOut(field.payload)\"\n                (keyup.enter)=\"onInputEnter(field.payload, $event.target.value)\"\n                (input)=\"onChange(field.payload, $event.target.value)\" class=\"n7-signup__form-item-input\"\n                type=\"{{ field.inputType }}\" id=\"{{ field.id }}\" />\n            <button *ngIf=\"field.show\" type=\"button\" (click)=\"onClick(field.show.payload)\"\n                [attr.aria-label]=\"field.show.label\" class=\"n7-signup__form-item-show-password\">\n                <i [attr.aria-label]=\"field.show.label\" class=\"{{ field.show.icon }}\"></i>\n            </button>\n        </div>\n        <div *ngIf=\"field.error\" class=\"n7-signup__form-error\">\n            {{ field.error }}\n        </div>\n    </div>\n</ng-template>\n\n<!-- Template: footer -->\n<ng-template #footer let-footer>\n    <footer *ngIf=\"footer\" class=\"n7-signup__footer {{ footer.classes || '' }}\">\n        <div class=\"n7-signup__footer-text\">{{ footer.label }}</div>\n        <a *ngIf=\"footer.action\" (click)=\"onClick(footer.action.payload)\" title=\"{{ footer.action.label }}\"\n            class=\"n7-btn\">{{ footer.action.label }}</a>\n    </footer>\n</ng-template>\n\n<!-- Template: submit button -->\n<ng-template #submit let-submit>\n    <div [ngClass]=\"{\n      'has-error': submit.error\n    }\" class=\"n7-signup__form-item n7-signup__form-item-action {{\n      submit.classes || ''\n    }}\">\n        <button type=\"button\" (click)=\"onClick(submit.payload)\" [attr.aria-label]=\"submit.label\"\n            class=\"n7-btn n7-btn-cta\">\n            {{ submit.label }}\n        </button>\n        <div *ngIf=\"submit.error\" class=\"n7-signup__form-error\">\n            {{ submit.error }}\n        </div>\n    </div>\n</ng-template>" }]
         }], propDecorators: { data: [{
@@ -1543,9 +1602,9 @@ class SimpleAutocompleteComponent {
         this.emit('click', payload);
     }
 }
-SimpleAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SimpleAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SimpleAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: SimpleAutocompleteComponent, selector: "n7-simple-autocomplete", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-simple-autocomplete\">\n    <ul class=\"n7-simple-autocomplete__list {{data.classes || ''}}\">\n        <li *ngFor=\"let suggestion of data.suggestion\" \n            class=\"n7-simple-autocomplete__item\">\n            <n7-anchor-wrapper\n            [classes]=\"'n7-simple-autocomplete__link'\"\n            [data]=\"suggestion.anchor\"\n            (clicked)=\"onClick($event)\">\n              <span class=\"n7-simple-autocomplete__label\" [innerHTML]=\"suggestion.text\"></span>\n            </n7-anchor-wrapper>\n        </li>\n    </ul> \n</div>", 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.2", ngImport: i0, type: SimpleAutocompleteComponent, decorators: [{
+SimpleAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SimpleAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SimpleAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SimpleAutocompleteComponent, selector: "n7-simple-autocomplete", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-simple-autocomplete\">\n    <ul class=\"n7-simple-autocomplete__list {{data.classes || ''}}\">\n        <li *ngFor=\"let suggestion of data.suggestion\" \n            class=\"n7-simple-autocomplete__item\">\n            <n7-anchor-wrapper\n            [classes]=\"'n7-simple-autocomplete__link'\"\n            [data]=\"suggestion.anchor\"\n            (clicked)=\"onClick($event)\">\n              <span class=\"n7-simple-autocomplete__label\" [innerHTML]=\"suggestion.text\"></span>\n            </n7-anchor-wrapper>\n        </li>\n    </ul> \n</div>", 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: SimpleAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'n7-simple-autocomplete', template: "<div *ngIf=\"data\" class=\"n7-simple-autocomplete\">\n    <ul class=\"n7-simple-autocomplete__list {{data.classes || ''}}\">\n        <li *ngFor=\"let suggestion of data.suggestion\" \n            class=\"n7-simple-autocomplete__item\">\n            <n7-anchor-wrapper\n            [classes]=\"'n7-simple-autocomplete__link'\"\n            [data]=\"suggestion.anchor\"\n            (clicked)=\"onClick($event)\">\n              <span class=\"n7-simple-autocomplete__label\" [innerHTML]=\"suggestion.text\"></span>\n            </n7-anchor-wrapper>\n        </li>\n    </ul> \n</div>" }]
         }], propDecorators: { data: [{
@@ -1573,9 +1632,9 @@ class TableComponent {
         this.emit('inputtextchange', textChangePayload);
     }
 }
-TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TableComponent, selector: "n7-table", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<section class=\"n7-table {{data.classes || ''}}\" *ngIf=\"data\">\n    <table class=\"n7-table__table\">\n    \t<thead class=\"n7-table__table-header\" *ngIf=\"data.head\">\n            <tr class=\"n7-table__table-header-row {{row.classes || ''}}\"\n                *ngFor=\"let row of data.head\">\n                <th class=\"n7-table__table-header-cell {{cell.classes || ''}}\"\n                    *ngFor=\"let cell of row.cells\"\n                    (click)=\"onCellClick(cell.payload)\"\n                    [innerHTML]=\"cell.content\">\n                </th>\n            </tr>\n        </thead>\n\n        <tbody class=\"n7-table__table-body\" *ngIf=\"data.body\">\n            <tr class=\"n7-table__table-body-row {{row.classes || ''}}\"\n                *ngFor=\"let row of data.body\">\n                <td class=\"n7-table__table-body-cell {{cell.classes || ''}}\"\n                    *ngFor=\"let cell of row.cells; let i = index\"\n                    (click)=\"onCellClick(cell.payload)\"\n                    (dblclick)=\"onCellDblClick(cell.payload)\"\n                    [attr.aria-label]=\"data.head[0].cells[i].content\"\n                    >\n                    <span   class=\"n7-table__table-body-cell-innerhtml\"\n                            *ngIf=\"!cell.type || cell.type=='html'\"\n                            [innerHTML]=\"cell.content\"></span>\n                    <input  class=\"n7-table__table-body-cell-inputtext\"\n                            *ngIf=\"cell.type=='input:text'\"\n                            type=\"text\" placeholder=\"{{cell.content}}\"\n                            id=\"{{cell._meta.inputId}}\"\n                            (keyup.enter)=\"onInputTextChange(cell.payload, $event.target.value)\"/>                        \n                </td>\n            </tr>\n        </tbody>\n\n        <tfoot class=\"n7-table__table-footer\" *ngIf=\"data.foot\">\n            <tr class=\"n7-table__table-footer-row {{row.classes || ''}}\"\n                *ngFor=\"let row of data.foot\">\n                <td class=\"n7-table__table-footer-cell {{cell.classes || ''}}\"\n                    *ngFor=\"let cell of row.cells\"\n                    (click)=\"onCellClick(cell.payload)\"\n                    [innerHTML]=\"cell.content\">\n                </td>\n            </tr>\n        </tfoot>        \n \t </table> \n</section>\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.2", ngImport: i0, type: TableComponent, decorators: [{
+TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TableComponent, selector: "n7-table", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<section class=\"n7-table {{data.classes || ''}}\" *ngIf=\"data\">\n    <table class=\"n7-table__table\">\n    \t<thead class=\"n7-table__table-header\" *ngIf=\"data.head\">\n            <tr class=\"n7-table__table-header-row {{row.classes || ''}}\"\n                *ngFor=\"let row of data.head\">\n                <th class=\"n7-table__table-header-cell {{cell.classes || ''}}\"\n                    *ngFor=\"let cell of row.cells\"\n                    (click)=\"onCellClick(cell.payload)\"\n                    [innerHTML]=\"cell.content\">\n                </th>\n            </tr>\n        </thead>\n\n        <tbody class=\"n7-table__table-body\" *ngIf=\"data.body\">\n            <tr class=\"n7-table__table-body-row {{row.classes || ''}}\"\n                *ngFor=\"let row of data.body\">\n                <td class=\"n7-table__table-body-cell {{cell.classes || ''}}\"\n                    *ngFor=\"let cell of row.cells; let i = index\"\n                    (click)=\"onCellClick(cell.payload)\"\n                    (dblclick)=\"onCellDblClick(cell.payload)\"\n                    [attr.aria-label]=\"data.head[0].cells[i].content\"\n                    >\n                    <span   class=\"n7-table__table-body-cell-innerhtml\"\n                            *ngIf=\"!cell.type || cell.type=='html'\"\n                            [innerHTML]=\"cell.content\"></span>\n                    <input  class=\"n7-table__table-body-cell-inputtext\"\n                            *ngIf=\"cell.type=='input:text'\"\n                            type=\"text\" placeholder=\"{{cell.content}}\"\n                            id=\"{{cell._meta.inputId}}\"\n                            (keyup.enter)=\"onInputTextChange(cell.payload, $event.target.value)\"/>                        \n                </td>\n            </tr>\n        </tbody>\n\n        <tfoot class=\"n7-table__table-footer\" *ngIf=\"data.foot\">\n            <tr class=\"n7-table__table-footer-row {{row.classes || ''}}\"\n                *ngFor=\"let row of data.foot\">\n                <td class=\"n7-table__table-footer-cell {{cell.classes || ''}}\"\n                    *ngFor=\"let cell of row.cells\"\n                    (click)=\"onCellClick(cell.payload)\"\n                    [innerHTML]=\"cell.content\">\n                </td>\n            </tr>\n        </tfoot>        \n \t </table> \n</section>\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: TableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'n7-table', template: "<section class=\"n7-table {{data.classes || ''}}\" *ngIf=\"data\">\n    <table class=\"n7-table__table\">\n    \t<thead class=\"n7-table__table-header\" *ngIf=\"data.head\">\n            <tr class=\"n7-table__table-header-row {{row.classes || ''}}\"\n                *ngFor=\"let row of data.head\">\n                <th class=\"n7-table__table-header-cell {{cell.classes || ''}}\"\n                    *ngFor=\"let cell of row.cells\"\n                    (click)=\"onCellClick(cell.payload)\"\n                    [innerHTML]=\"cell.content\">\n                </th>\n            </tr>\n        </thead>\n\n        <tbody class=\"n7-table__table-body\" *ngIf=\"data.body\">\n            <tr class=\"n7-table__table-body-row {{row.classes || ''}}\"\n                *ngFor=\"let row of data.body\">\n                <td class=\"n7-table__table-body-cell {{cell.classes || ''}}\"\n                    *ngFor=\"let cell of row.cells; let i = index\"\n                    (click)=\"onCellClick(cell.payload)\"\n                    (dblclick)=\"onCellDblClick(cell.payload)\"\n                    [attr.aria-label]=\"data.head[0].cells[i].content\"\n                    >\n                    <span   class=\"n7-table__table-body-cell-innerhtml\"\n                            *ngIf=\"!cell.type || cell.type=='html'\"\n                            [innerHTML]=\"cell.content\"></span>\n                    <input  class=\"n7-table__table-body-cell-inputtext\"\n                            *ngIf=\"cell.type=='input:text'\"\n                            type=\"text\" placeholder=\"{{cell.content}}\"\n                            id=\"{{cell._meta.inputId}}\"\n                            (keyup.enter)=\"onInputTextChange(cell.payload, $event.target.value)\"/>                        \n                </td>\n            </tr>\n        </tbody>\n\n        <tfoot class=\"n7-table__table-footer\" *ngIf=\"data.foot\">\n            <tr class=\"n7-table__table-footer-row {{row.classes || ''}}\"\n                *ngFor=\"let row of data.foot\">\n                <td class=\"n7-table__table-footer-cell {{cell.classes || ''}}\"\n                    *ngFor=\"let cell of row.cells\"\n                    (click)=\"onCellClick(cell.payload)\"\n                    [innerHTML]=\"cell.content\">\n                </td>\n            </tr>\n        </tfoot>        \n \t </table> \n</section>\n" }]
         }], propDecorators: { data: [{
@@ -1586,6 +1645,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
 
 //---------------------------
 class TextViewerComponent {
+    constructor() {
+        this.isDisplayed = false;
+    }
     ngOnInit() {
         if (!TextViewerComponent._loaded) {
             const s = document.createElement('script');
@@ -1595,6 +1657,13 @@ class TextViewerComponent {
             document.head.appendChild(s);
         }
     }
+    displayIndex() {
+        if (this.isDisplayed === false) {
+            this.isDisplayed = true;
+        }
+        else
+            this.isDisplayed = false;
+    }
     onScriptLoaded() {
         TextViewerComponent._loaded = true;
     }
@@ -1605,11 +1674,11 @@ class TextViewerComponent {
     }
 }
 TextViewerComponent._loaded = false;
-TextViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TextViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TextViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TextViewerComponent, selector: "n7-text-viewer", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<!-- NEW -->\n<div\n  class=\"n7-text-viewer {{data.classes || ''}}\"\n  *ngIf=\"data && data.endpoint\"\n>\n  <pb-page [attr.endpoint]=\"data.endpoint\" api-version=\"1.0.0\">\n    <!-- <pb-load url=\"api/search\"></pb-load> -->\n    <pb-document\n      *ngFor=\"let doc of data.docs\"\n      [path]=\"doc.xml\"\n      [odd]=\"doc.odd\"\n      [id]=\"doc.id\"\n    >\n    </pb-document>\n    \n    <!-- <pb-load url=\"api/mrcsearch?query=lepre&collection=murucademo\"></pb-load> -->\n\n    <app-drawer-layout force-narrow=\"force-narrow\" narrow=\"\">\n      <app-header-layout>\n        <app-header\n          fixed=\"fixed\"\n          data-template=\"browse:fix-links\"\n          style=\"\n            transition-duration: 0ms;\n            transform: translate3d(0px, 0px, 0px);\n            left: 0px;\n            right: 0.399994px;\n          \"\n        >\n          <!-- <pb-login id=\"loginElem\" auto=\"false\"></pb-login> -->\n          <app-toolbar\n            class=\"toolbar\"\n            sticky=\"sticky\"\n            style=\"transform: translate3d(0px, 0px, 0px)\"\n          >\n            <paper-icon-button\n              id=\"tocToggle\"\n              class=\"toc-toggle\"\n              icon=\"icons:view-list\"\n              role=\"button\"\n              tabindex=\"0\"\n              aria-disabled=\"false\"\n            ></paper-icon-button>\n\n            <pb-toggle-feature *ngIf=\"data.docs.length === 1\"\n              name=\"highlight1\"\n              selector=\"tei-app,pb-popover,pb-highlight\"\n              default=\"off\"\n              action=\"disable\"\n              emit=\"transcription\"\n              subscribe=\"transcription\"\n            >\n              <pb-i18n key=\"document.plain\">Plain Reading View</pb-i18n>\n            </pb-toggle-feature>\n\n            <pb-zoom\n              emit=\"transcription\"\n              direction=\"in\"\n              icon=\"icons:zoom-in\"\n            ></pb-zoom>\n            <pb-zoom\n              emit=\"transcription\"\n              direction=\"out\"\n              icon=\"icons:zoom-out\"\n            ></pb-zoom>\n            <!-- *ngIf=\"data.docs.length > 1\" -->\n            <pb-select-feature *ngIf=\"data.docs.length > 1\"\n              id=\"select-view1\"\n              name=\"view1\"\n              label=\"View\"\n              items='[\n                    {\"name\": \"View All Named Entities\", \"selectors\": [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": false}]},\n      {\"name\": \"View People\", \"selectors\": [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": true}]},\n      {\"name\": \"View Places\", \"selectors\": [{\"selector\": \".place\", \"state\": false}, {\"selector\": \".person\", \"state\": true}]}\n        ]'\n              subscribe=\"addChannel\"\n              emit=\"addChannel\"\n            ></pb-select-feature>\n           \n            <pb-download\n              *ngIf=\"data.docs && data.docs.length > 1\"\n              type=\"epub\"\n              [src]=\"data.docs[0].id\"\n              dialog=\"downloadDialog\"\n              title=\"Download ePub\"\n            >\n              <paper-button raised=\"\">Download ePub</paper-button>\n            </pb-download>\n\n\n            \n            <!-- <pb-search id=\"search-form\" action=\"search.search\" submitOnLoad=\"true\" data-template=\"pages:parse-params\">\n              <div class=\"buttons\">\n                  <paper-button slot=\"searchButton\"><pb-i18n key=\"search.search\"></pb-i18n></paper-button>\n                  <paper-button slot=\"resetButton\"><pb-i18n key=\"search.reset\"></pb-i18n></paper-button>\n              </div>\n            </pb-search>\n            <pb-load class=\"hidden\" url=\"api/search?query=Accompagnati&da&Alchifa&action=search\" auto=\"true\"></pb-load> -->\n            \n            \n            \n            <ng-container *ngIf=\"!data.docs[0].translation\">\n            <pb-navigation\n              emit=\"transcription\"\n              keyboard=\"left\"\n              subscribe=\"transcription\"\n              direction=\"backward\"\n              unit=\"page\"\n            >\n              <paper-icon-button\n                icon=\"icons:chevron-left\"\n                role=\"button\"\n                tabindex=\"0\"\n                aria-disabled=\"false\"\n              ></paper-icon-button>\n            </pb-navigation>\n            <pb-navigation\n              emit=\"transcription\"\n              keyboard=\"right\"\n              subscribe=\"transcription\"\n              direction=\"forward\"\n              unit=\"page\"\n            >\n              <paper-icon-button\n                icon=\"icons:chevron-right\"\n                role=\"button\"\n                tabindex=\"0\"\n                aria-disabled=\"false\"\n              ></paper-icon-button>\n            </pb-navigation>\n          </ng-container>\n\n            <pb-progress\n              subscribe=\"transcription\"\n              indeterminate=\"\"\n              bottom-item=\"bottom-item\"\n              style=\"visibility: hidden\"\n            ></pb-progress>\n          </app-toolbar>\n        </app-header>\n        <pb-drawer\n          toggle=\"tocToggle\"\n          class=\"tocDrawer\"\n          emit=\"toc\"\n          subscribe=\"transcription\"\n        >\n          <div class=\"drawer-content\">\n            <h3>\n              <pb-i18n key=\"document.contents\">Contents</pb-i18n>\n            </h3>\n            <!-- <pb-load\n              *ngIf=\"data.docs\"\n              id=\"toc\"\n              url=\"api/document/{doc}/contents?target=transcription&amp;icons=true\"\n              [src]=\"data.docs[0].id\"\n              subscribe=\"toc\"\n              emit=\"toc\"\n              expand=\"expand\"\n              auto=\"auto\"\n              ><pb-i18n key=\"dialogs.loading\">Loading</pb-i18n></pb-load\n            > -->\n          </div>\n        </pb-drawer>\n        <main class=\"content-body\">\n          <pb-facsimile\n            *ngIf=\"data.facsimile\"\n            id=\"facsimile\"\n            [attr.base-uri]=\"data.facsimile.uri\"\n            subscribe=\"transcription\"\n            default-zoom-level=\"0\"\n            show-navigation-control=\"show-navigation-control\"\n            show-navigator=\"show-navigator\"\n          >\n          </pb-facsimile>\n          <ng-container *ngFor=\"let doc of data.docs; index as $i;\">\n            <!-- NO CHANNEL -->\n            <pb-view\n              *ngIf=\"!doc.channel\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              subscribe=\"transcription\"\n              emit=\"transcription\"\n              [attr.wait-for]=\"data.facsimile ? '#facsimile' : null\"\n              column-separator=\".tei-cb\"\n              append-footnotes=\"append-footnotes\"\n              view=\"{{ doc.view }}\"\n            ></pb-view>\n            <!-- WITH CHANNEL / MURUCA DEMO -->\n            <pb-view\n              *ngIf=\"doc.channel && doc.translation\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              xpath=\"//text[@type='source']\"\n              emit=\"{{ doc.channel }}\"\n              subscribe=\"{{ doc.channel }}\"\n              view=\"{{ doc.view }}\"\n            >\n            </pb-view>\n            <pb-view\n              *ngIf=\"doc.channel && doc.translation\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              xpath=\"{{ doc.xpath }}\"\n              emit=\"{{ doc.channel }}\"\n              subscribe=\"{{ doc.channel }}\"\n              view=\"{{ doc.view }}\"\n            >\n              <pb-param name=\"mode\" value=\"commentary\"></pb-param>\n            </pb-view>\n            <!-- WITH CHANNEL / addChannel -->\n            <pb-view\n              *ngIf=\"doc.channel && !doc.translation\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              emit=\"addChannel\"\n              subscribe=\"addChannel\"\n              view=\"{{ doc.view }}\"\n            >\n              <pb-param name=\"mode\" value=\"commentary\"></pb-param>\n            </pb-view>\n          </ng-container>\n        </main>\n      </app-header-layout>\n    </app-drawer-layout>\n  </pb-page>\n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TextViewerComponent, decorators: [{
+TextViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TextViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TextViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TextViewerComponent, selector: "n7-text-viewer", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<!-- NEW -->\n<div\n  class=\"n7-text-viewer {{data.classes || ''}}\"\n  *ngIf=\"data && data.endpoint\"\n>\n  <pb-page [attr.endpoint]=\"data.endpoint\" api-version=\"1.0.0\">\n    <!-- <pb-load url=\"api/search\"></pb-load> -->\n    <pb-document\n      *ngFor=\"let doc of data.docs\"\n      [path]=\"doc.xml\"\n      [odd]=\"doc.odd\"\n      [id]=\"doc.id\"\n    >\n    </pb-document>\n\n    <!-- <pb-load url=\"api/mrcsearch?query=lepre&collection=murucademo\"></pb-load> -->\n\n    <app-drawer-layout force-narrow=\"force-narrow\" narrow=\"\">\n      <app-header-layout>\n        <app-header\n          fixed=\"fixed\"\n          data-template=\"browse:fix-links\"\n          style=\"\n            transition-duration: 0ms;\n            transform: translate3d(0px, 0px, 0px);\n            left: 0px;\n            right: 0.399994px;\n          \"\n        >\n          <!-- <pb-login id=\"loginElem\" auto=\"false\"></pb-login> -->\n          <app-toolbar\n            class=\"toolbar\"\n            sticky=\"sticky\"\n            style=\"transform: translate3d(0px, 0px, 0px)\"\n          >\n            <paper-icon-button\n              id=\"tocToggle\"\n              class=\"toc-toggle\"\n              icon=\"icons:view-list\"\n              role=\"button\"\n              tabindex=\"0\"\n              aria-disabled=\"false\"\n            ></paper-icon-button>\n\n            <pb-toggle-feature\n              *ngIf=\"data.docs.length === 1\"\n              name=\"highlight1\"\n              selector=\"tei-app,pb-popover,pb-highlight\"\n              default=\"off\"\n              action=\"disable\"\n              emit=\"transcription\"\n              subscribe=\"transcription\"\n            >\n              <pb-i18n key=\"document.plain\">Plain Reading View</pb-i18n>\n            </pb-toggle-feature>\n\n            <pb-download\n              *ngIf=\"data.docs && data.docs.length > 1\"\n              type=\"epub\"\n              [src]=\"data.docs[0].id\"\n              url=\"https://drive.google.com/u/1/uc?id=18tgok2xz4DN7QelWzKJXzGb-qhsAHhQw&export=download\"\n              dialog=\"downloadDialog\"\n              title=\"Download ePub\"\n            >\n              <paper-button raised=\"\">Download eBook</paper-button>\n            </pb-download>\n\n            <!-- <pb-download\n              *ngIf=\"data.docs && data.docs.length > 1\"\n              type=\"txt\"\n              [src]=\"data.docs[0].id\"\n              url=\"https://www.gutenberg.org/cache/epub/67735/pg67735.txt\"\n              dialog=\"downloadDialog\"\n              title=\"Download TXT\"\n            >\n              <paper-button raised=\"\">Download TXT</paper-button>\n            </pb-download>\n\n            <pb-download\n              *ngIf=\"data.docs && data.docs.length > 1\"\n              type=\"xml\"\n              [src]=\"data.docs[0].id\"\n              url=\"https://www.gutenberg.org/cache/epub/67735/pg67735.txt\"\n              dialog=\"downloadDialog\"\n              title=\"Download XML\"\n            >\n              <paper-button raised=\"\">Download XML</paper-button>\n            </pb-download> -->\n\n            <pb-zoom\n              emit=\"transcription\"\n              direction=\"in\"\n              icon=\"icons:zoom-in\"\n            ></pb-zoom>\n            <pb-zoom\n              emit=\"transcription\"\n              direction=\"out\"\n              icon=\"icons:zoom-out\"\n            ></pb-zoom>\n\n            <ng-container *ngIf=\"!data.docs[0].translation\">\n              <pb-navigation\n                emit=\"transcription\"\n                keyboard=\"left\"\n                subscribe=\"transcription\"\n                direction=\"backward\"\n                unit=\"page\"\n              >\n                <paper-icon-button\n                  icon=\"icons:chevron-left\"\n                  role=\"button\"\n                  tabindex=\"0\"\n                  aria-disabled=\"false\"\n                ></paper-icon-button>\n              </pb-navigation>\n              <pb-navigation\n                emit=\"transcription\"\n                keyboard=\"right\"\n                subscribe=\"transcription\"\n                direction=\"forward\"\n                unit=\"page\"\n              >\n                <paper-icon-button\n                  icon=\"icons:chevron-right\"\n                  role=\"button\"\n                  tabindex=\"0\"\n                  aria-disabled=\"false\"\n                ></paper-icon-button>\n              </pb-navigation>\n            </ng-container>\n\n            <!-- *ngIf=\"data.docs.length > 1\" -->\n            <pb-select-feature\n              *ngIf=\"data.docs.length > 1\"\n              id=\"select-view2\"\n              name=\"view2\"\n              label=\"View\"\n              items='[\n                    {\"name\": \"View All Named Entities\", \"selectors\": [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": false}]},\n      {\"name\": \"View People\", \"selectors\": [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": true}]},\n      {\"name\": \"View Places\", \"selectors\": [{\"selector\": \".place\", \"state\": false}, {\"selector\": \".person\", \"state\": true}]}\n        ]'\n              subscribe=\"addChannel\"\n              emit=\"addChannel\"\n            ></pb-select-feature>\n\n           \n            <ng-container *ngIf=\"data.docs.length > 1 && data.docs[0].channel && data.facsimile\">\n              <paper-button raised=\"\" (click)=\"displayIndex()\"\n                >{{ !isDisplayed ? 'Mostra nomi / luoghi / motivi' : 'Nascondi nomi / luoghi / motivi'\n                }}</paper-button\n              >\n            </ng-container>\n       \n\n            <!-- <pb-search id=\"search-form\" action=\"search.search\" submitOnLoad=\"true\" data-template=\"pages:parse-params\">\n              <div class=\"buttons\">\n                  <paper-button slot=\"searchButton\"><pb-i18n key=\"search.search\"></pb-i18n></paper-button>\n                  <paper-button slot=\"resetButton\"><pb-i18n key=\"search.reset\"></pb-i18n></paper-button>\n              </div>\n            </pb-search>\n            <pb-load class=\"hidden\" url=\"api/search?query=Accompagnati&da&Alchifa&action=search\" auto=\"true\"></pb-load> -->\n\n            \n\n            <pb-progress\n              subscribe=\"transcription\"\n              indeterminate=\"\"\n              bottom-item=\"bottom-item\"\n              style=\"visibility: hidden\"\n            ></pb-progress>\n          </app-toolbar>\n        </app-header>\n        <!-- <pb-drawer\n          toggle=\"tocToggle\"\n          class=\"tocDrawer\"\n          emit=\"toc\"\n          subscribe=\"transcription\"\n        >\n          <div class=\"drawer-content\">\n            <h3>\n              <pb-i18n key=\"document.contents\">Contents</pb-i18n>\n            </h3>\n            <pb-load\n              *ngIf=\"data.docs\"\n              id=\"toc\"\n              url=\"api/document/{doc}/contents?target=transcription&amp;icons=true\"\n              [src]=\"data.docs[0].id\"\n              subscribe=\"toc\"\n              emit=\"toc\"\n              expand=\"expand\"\n              auto=\"auto\"\n              ><pb-i18n key=\"dialogs.loading\">Loading</pb-i18n></pb-load\n            >\n          </div>\n        </pb-drawer> -->\n        <pb-drawer\n          toggle=\"tocToggle\"\n          class=\"tocDrawer\"\n          emit=\"toc\"\n          subscribe=\"transcription\"\n        >\n          <div class=\"drawer-content\">\n            <h3>\n              <pb-i18n key=\"document.contents\">Contents</pb-i18n>\n            </h3>\n            <pb-load\n              *ngIf=\"data.docs\"\n              id=\"toc\"\n              url=\"api/document/{doc}/contents?target=transcription&amp;icons=true\"\n              [src]=\"data.docs[0].id\"\n              subscribe=\"toc\"\n              emit=\"toc\"\n              expand=\"expand\"\n              auto=\"auto\"\n              ><pb-i18n key=\"dialogs.loading\">Loading</pb-i18n></pb-load\n            >\n          </div>\n        </pb-drawer>\n        <main class=\"content-body\">\n          <pb-facsimile\n            *ngIf=\"data.facsimile\"\n            id=\"facsimile\"\n            [attr.base-uri]=\"data.facsimile.uri\"\n            subscribe=\"transcription\"\n            default-zoom-level=\"0\"\n            show-navigation-control=\"show-navigation-control\"\n            show-navigator=\"show-navigator\"\n          >\n          </pb-facsimile>\n          <ng-container *ngFor=\"let doc of data.docs; index as $i;\">\n            <!-- NO CHANNEL -->\n            <pb-view\n              *ngIf=\"!doc.channel\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              subscribe=\"transcription\"\n              emit=\"transcription\"\n              [attr.wait-for]=\"data.facsimile ? '#facsimile' : null\"\n              column-separator=\".tei-cb\"\n              append-footnotes=\"append-footnotes\"\n              view=\"{{ doc.view }}\"\n            ></pb-view>\n            <!-- WITH CHANNEL / MURUCA DEMO -->\n            <pb-view\n              *ngIf=\"doc.channel && doc.translation\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              xpath=\"//text[@type='source']\"\n              emit=\"{{ doc.channel }}\"\n              subscribe=\"{{ doc.channel }}\"\n              view=\"{{ doc.view }}\"\n            >\n            </pb-view>\n            <pb-view\n              *ngIf=\"doc.channel && doc.translation\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              xpath=\"{{ doc.xpath }}\"\n              emit=\"{{ doc.channel }}\"\n              subscribe=\"{{ doc.channel }}\"\n              view=\"{{ doc.view }}\"\n            >\n              <pb-param name=\"mode\" value=\"commentary\"></pb-param>\n            </pb-view>\n            <!-- WITH CHANNEL / addChannel -->\n            <pb-view\n              *ngIf=\"doc.channel && !doc.translation\"\n              (click)=\"displayIndex()\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              [odd]=\"doc.odd\"\n              emit=\"addChannel\"\n              subscribe=\"addChannel\"\n              view=\"{{ doc.view }}\"\n            >\n              <pb-param name=\"mode\" value=\"commentary\"></pb-param>\n            </pb-view>\n\n            <ng-container\n              *ngIf=\"doc.channel && !doc.translation\"\n            >\n              <!--  -->\n              <pb-view\n                [hidden]=\"!isDisplayed\"\n                *ngIf=\"doc.channel && !doc.translation\"\n                [src]=\"doc.id\"\n                [odd]=\"doc.odd\"\n                subscribe=\"index\"\n                emit=\"letter\"\n              >\n                <pb-param name=\"mode\" value=\"facets\"></pb-param>\n              </pb-view>\n              <!--  -->\n            </ng-container>\n          </ng-container>\n        </main>\n      </app-header-layout>\n    </app-drawer-layout>\n  </pb-page>\n</div>\n\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TextViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'n7-text-viewer', template: "<!-- NEW -->\n<div\n  class=\"n7-text-viewer {{data.classes || ''}}\"\n  *ngIf=\"data && data.endpoint\"\n>\n  <pb-page [attr.endpoint]=\"data.endpoint\" api-version=\"1.0.0\">\n    <!-- <pb-load url=\"api/search\"></pb-load> -->\n    <pb-document\n      *ngFor=\"let doc of data.docs\"\n      [path]=\"doc.xml\"\n      [odd]=\"doc.odd\"\n      [id]=\"doc.id\"\n    >\n    </pb-document>\n    \n    <!-- <pb-load url=\"api/mrcsearch?query=lepre&collection=murucademo\"></pb-load> -->\n\n    <app-drawer-layout force-narrow=\"force-narrow\" narrow=\"\">\n      <app-header-layout>\n        <app-header\n          fixed=\"fixed\"\n          data-template=\"browse:fix-links\"\n          style=\"\n            transition-duration: 0ms;\n            transform: translate3d(0px, 0px, 0px);\n            left: 0px;\n            right: 0.399994px;\n          \"\n        >\n          <!-- <pb-login id=\"loginElem\" auto=\"false\"></pb-login> -->\n          <app-toolbar\n            class=\"toolbar\"\n            sticky=\"sticky\"\n            style=\"transform: translate3d(0px, 0px, 0px)\"\n          >\n            <paper-icon-button\n              id=\"tocToggle\"\n              class=\"toc-toggle\"\n              icon=\"icons:view-list\"\n              role=\"button\"\n              tabindex=\"0\"\n              aria-disabled=\"false\"\n            ></paper-icon-button>\n\n            <pb-toggle-feature *ngIf=\"data.docs.length === 1\"\n              name=\"highlight1\"\n              selector=\"tei-app,pb-popover,pb-highlight\"\n              default=\"off\"\n              action=\"disable\"\n              emit=\"transcription\"\n              subscribe=\"transcription\"\n            >\n              <pb-i18n key=\"document.plain\">Plain Reading View</pb-i18n>\n            </pb-toggle-feature>\n\n            <pb-zoom\n              emit=\"transcription\"\n              direction=\"in\"\n              icon=\"icons:zoom-in\"\n            ></pb-zoom>\n            <pb-zoom\n              emit=\"transcription\"\n              direction=\"out\"\n              icon=\"icons:zoom-out\"\n            ></pb-zoom>\n            <!-- *ngIf=\"data.docs.length > 1\" -->\n            <pb-select-feature *ngIf=\"data.docs.length > 1\"\n              id=\"select-view1\"\n              name=\"view1\"\n              label=\"View\"\n              items='[\n                    {\"name\": \"View All Named Entities\", \"selectors\": [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": false}]},\n      {\"name\": \"View People\", \"selectors\": [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": true}]},\n      {\"name\": \"View Places\", \"selectors\": [{\"selector\": \".place\", \"state\": false}, {\"selector\": \".person\", \"state\": true}]}\n        ]'\n              subscribe=\"addChannel\"\n              emit=\"addChannel\"\n            ></pb-select-feature>\n           \n            <pb-download\n              *ngIf=\"data.docs && data.docs.length > 1\"\n              type=\"epub\"\n              [src]=\"data.docs[0].id\"\n              dialog=\"downloadDialog\"\n              title=\"Download ePub\"\n            >\n              <paper-button raised=\"\">Download ePub</paper-button>\n            </pb-download>\n\n\n            \n            <!-- <pb-search id=\"search-form\" action=\"search.search\" submitOnLoad=\"true\" data-template=\"pages:parse-params\">\n              <div class=\"buttons\">\n                  <paper-button slot=\"searchButton\"><pb-i18n key=\"search.search\"></pb-i18n></paper-button>\n                  <paper-button slot=\"resetButton\"><pb-i18n key=\"search.reset\"></pb-i18n></paper-button>\n              </div>\n            </pb-search>\n            <pb-load class=\"hidden\" url=\"api/search?query=Accompagnati&da&Alchifa&action=search\" auto=\"true\"></pb-load> -->\n            \n            \n            \n            <ng-container *ngIf=\"!data.docs[0].translation\">\n            <pb-navigation\n              emit=\"transcription\"\n              keyboard=\"left\"\n              subscribe=\"transcription\"\n              direction=\"backward\"\n              unit=\"page\"\n            >\n              <paper-icon-button\n                icon=\"icons:chevron-left\"\n                role=\"button\"\n                tabindex=\"0\"\n                aria-disabled=\"false\"\n              ></paper-icon-button>\n            </pb-navigation>\n            <pb-navigation\n              emit=\"transcription\"\n              keyboard=\"right\"\n              subscribe=\"transcription\"\n              direction=\"forward\"\n              unit=\"page\"\n            >\n              <paper-icon-button\n                icon=\"icons:chevron-right\"\n                role=\"button\"\n                tabindex=\"0\"\n                aria-disabled=\"false\"\n              ></paper-icon-button>\n            </pb-navigation>\n          </ng-container>\n\n            <pb-progress\n              subscribe=\"transcription\"\n              indeterminate=\"\"\n              bottom-item=\"bottom-item\"\n              style=\"visibility: hidden\"\n            ></pb-progress>\n          </app-toolbar>\n        </app-header>\n        <pb-drawer\n          toggle=\"tocToggle\"\n          class=\"tocDrawer\"\n          emit=\"toc\"\n          subscribe=\"transcription\"\n        >\n          <div class=\"drawer-content\">\n            <h3>\n              <pb-i18n key=\"document.contents\">Contents</pb-i18n>\n            </h3>\n            <!-- <pb-load\n              *ngIf=\"data.docs\"\n              id=\"toc\"\n              url=\"api/document/{doc}/contents?target=transcription&amp;icons=true\"\n              [src]=\"data.docs[0].id\"\n              subscribe=\"toc\"\n              emit=\"toc\"\n              expand=\"expand\"\n              auto=\"auto\"\n              ><pb-i18n key=\"dialogs.loading\">Loading</pb-i18n></pb-load\n            > -->\n          </div>\n        </pb-drawer>\n        <main class=\"content-body\">\n          <pb-facsimile\n            *ngIf=\"data.facsimile\"\n            id=\"facsimile\"\n            [attr.base-uri]=\"data.facsimile.uri\"\n            subscribe=\"transcription\"\n            default-zoom-level=\"0\"\n            show-navigation-control=\"show-navigation-control\"\n            show-navigator=\"show-navigator\"\n          >\n          </pb-facsimile>\n          <ng-container *ngFor=\"let doc of data.docs; index as $i;\">\n            <!-- NO CHANNEL -->\n            <pb-view\n              *ngIf=\"!doc.channel\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              subscribe=\"transcription\"\n              emit=\"transcription\"\n              [attr.wait-for]=\"data.facsimile ? '#facsimile' : null\"\n              column-separator=\".tei-cb\"\n              append-footnotes=\"append-footnotes\"\n              view=\"{{ doc.view }}\"\n            ></pb-view>\n            <!-- WITH CHANNEL / MURUCA DEMO -->\n            <pb-view\n              *ngIf=\"doc.channel && doc.translation\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              xpath=\"//text[@type='source']\"\n              emit=\"{{ doc.channel }}\"\n              subscribe=\"{{ doc.channel }}\"\n              view=\"{{ doc.view }}\"\n            >\n            </pb-view>\n            <pb-view\n              *ngIf=\"doc.channel && doc.translation\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              xpath=\"{{ doc.xpath }}\"\n              emit=\"{{ doc.channel }}\"\n              subscribe=\"{{ doc.channel }}\"\n              view=\"{{ doc.view }}\"\n            >\n              <pb-param name=\"mode\" value=\"commentary\"></pb-param>\n            </pb-view>\n            <!-- WITH CHANNEL / addChannel -->\n            <pb-view\n              *ngIf=\"doc.channel && !doc.translation\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              emit=\"addChannel\"\n              subscribe=\"addChannel\"\n              view=\"{{ doc.view }}\"\n            >\n              <pb-param name=\"mode\" value=\"commentary\"></pb-param>\n            </pb-view>\n          </ng-container>\n        </main>\n      </app-header-layout>\n    </app-drawer-layout>\n  </pb-page>\n</div>\n" }]
+            args: [{ selector: 'n7-text-viewer', template: "<!-- NEW -->\n<div\n  class=\"n7-text-viewer {{data.classes || ''}}\"\n  *ngIf=\"data && data.endpoint\"\n>\n  <pb-page [attr.endpoint]=\"data.endpoint\" api-version=\"1.0.0\">\n    <!-- <pb-load url=\"api/search\"></pb-load> -->\n    <pb-document\n      *ngFor=\"let doc of data.docs\"\n      [path]=\"doc.xml\"\n      [odd]=\"doc.odd\"\n      [id]=\"doc.id\"\n    >\n    </pb-document>\n\n    <!-- <pb-load url=\"api/mrcsearch?query=lepre&collection=murucademo\"></pb-load> -->\n\n    <app-drawer-layout force-narrow=\"force-narrow\" narrow=\"\">\n      <app-header-layout>\n        <app-header\n          fixed=\"fixed\"\n          data-template=\"browse:fix-links\"\n          style=\"\n            transition-duration: 0ms;\n            transform: translate3d(0px, 0px, 0px);\n            left: 0px;\n            right: 0.399994px;\n          \"\n        >\n          <!-- <pb-login id=\"loginElem\" auto=\"false\"></pb-login> -->\n          <app-toolbar\n            class=\"toolbar\"\n            sticky=\"sticky\"\n            style=\"transform: translate3d(0px, 0px, 0px)\"\n          >\n            <paper-icon-button\n              id=\"tocToggle\"\n              class=\"toc-toggle\"\n              icon=\"icons:view-list\"\n              role=\"button\"\n              tabindex=\"0\"\n              aria-disabled=\"false\"\n            ></paper-icon-button>\n\n            <pb-toggle-feature\n              *ngIf=\"data.docs.length === 1\"\n              name=\"highlight1\"\n              selector=\"tei-app,pb-popover,pb-highlight\"\n              default=\"off\"\n              action=\"disable\"\n              emit=\"transcription\"\n              subscribe=\"transcription\"\n            >\n              <pb-i18n key=\"document.plain\">Plain Reading View</pb-i18n>\n            </pb-toggle-feature>\n\n            <pb-download\n              *ngIf=\"data.docs && data.docs.length > 1\"\n              type=\"epub\"\n              [src]=\"data.docs[0].id\"\n              url=\"https://drive.google.com/u/1/uc?id=18tgok2xz4DN7QelWzKJXzGb-qhsAHhQw&export=download\"\n              dialog=\"downloadDialog\"\n              title=\"Download ePub\"\n            >\n              <paper-button raised=\"\">Download eBook</paper-button>\n            </pb-download>\n\n            <!-- <pb-download\n              *ngIf=\"data.docs && data.docs.length > 1\"\n              type=\"txt\"\n              [src]=\"data.docs[0].id\"\n              url=\"https://www.gutenberg.org/cache/epub/67735/pg67735.txt\"\n              dialog=\"downloadDialog\"\n              title=\"Download TXT\"\n            >\n              <paper-button raised=\"\">Download TXT</paper-button>\n            </pb-download>\n\n            <pb-download\n              *ngIf=\"data.docs && data.docs.length > 1\"\n              type=\"xml\"\n              [src]=\"data.docs[0].id\"\n              url=\"https://www.gutenberg.org/cache/epub/67735/pg67735.txt\"\n              dialog=\"downloadDialog\"\n              title=\"Download XML\"\n            >\n              <paper-button raised=\"\">Download XML</paper-button>\n            </pb-download> -->\n\n            <pb-zoom\n              emit=\"transcription\"\n              direction=\"in\"\n              icon=\"icons:zoom-in\"\n            ></pb-zoom>\n            <pb-zoom\n              emit=\"transcription\"\n              direction=\"out\"\n              icon=\"icons:zoom-out\"\n            ></pb-zoom>\n\n            <ng-container *ngIf=\"!data.docs[0].translation\">\n              <pb-navigation\n                emit=\"transcription\"\n                keyboard=\"left\"\n                subscribe=\"transcription\"\n                direction=\"backward\"\n                unit=\"page\"\n              >\n                <paper-icon-button\n                  icon=\"icons:chevron-left\"\n                  role=\"button\"\n                  tabindex=\"0\"\n                  aria-disabled=\"false\"\n                ></paper-icon-button>\n              </pb-navigation>\n              <pb-navigation\n                emit=\"transcription\"\n                keyboard=\"right\"\n                subscribe=\"transcription\"\n                direction=\"forward\"\n                unit=\"page\"\n              >\n                <paper-icon-button\n                  icon=\"icons:chevron-right\"\n                  role=\"button\"\n                  tabindex=\"0\"\n                  aria-disabled=\"false\"\n                ></paper-icon-button>\n              </pb-navigation>\n            </ng-container>\n\n            <!-- *ngIf=\"data.docs.length > 1\" -->\n            <pb-select-feature\n              *ngIf=\"data.docs.length > 1\"\n              id=\"select-view2\"\n              name=\"view2\"\n              label=\"View\"\n              items='[\n                    {\"name\": \"View All Named Entities\", \"selectors\": [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": false}]},\n      {\"name\": \"View People\", \"selectors\": [{\"selector\": \".person\", \"state\": false}, {\"selector\": \".place\", \"state\": true}]},\n      {\"name\": \"View Places\", \"selectors\": [{\"selector\": \".place\", \"state\": false}, {\"selector\": \".person\", \"state\": true}]}\n        ]'\n              subscribe=\"addChannel\"\n              emit=\"addChannel\"\n            ></pb-select-feature>\n\n           \n            <ng-container *ngIf=\"data.docs.length > 1 && data.docs[0].channel && data.facsimile\">\n              <paper-button raised=\"\" (click)=\"displayIndex()\"\n                >{{ !isDisplayed ? 'Mostra nomi / luoghi / motivi' : 'Nascondi nomi / luoghi / motivi'\n                }}</paper-button\n              >\n            </ng-container>\n       \n\n            <!-- <pb-search id=\"search-form\" action=\"search.search\" submitOnLoad=\"true\" data-template=\"pages:parse-params\">\n              <div class=\"buttons\">\n                  <paper-button slot=\"searchButton\"><pb-i18n key=\"search.search\"></pb-i18n></paper-button>\n                  <paper-button slot=\"resetButton\"><pb-i18n key=\"search.reset\"></pb-i18n></paper-button>\n              </div>\n            </pb-search>\n            <pb-load class=\"hidden\" url=\"api/search?query=Accompagnati&da&Alchifa&action=search\" auto=\"true\"></pb-load> -->\n\n            \n\n            <pb-progress\n              subscribe=\"transcription\"\n              indeterminate=\"\"\n              bottom-item=\"bottom-item\"\n              style=\"visibility: hidden\"\n            ></pb-progress>\n          </app-toolbar>\n        </app-header>\n        <!-- <pb-drawer\n          toggle=\"tocToggle\"\n          class=\"tocDrawer\"\n          emit=\"toc\"\n          subscribe=\"transcription\"\n        >\n          <div class=\"drawer-content\">\n            <h3>\n              <pb-i18n key=\"document.contents\">Contents</pb-i18n>\n            </h3>\n            <pb-load\n              *ngIf=\"data.docs\"\n              id=\"toc\"\n              url=\"api/document/{doc}/contents?target=transcription&amp;icons=true\"\n              [src]=\"data.docs[0].id\"\n              subscribe=\"toc\"\n              emit=\"toc\"\n              expand=\"expand\"\n              auto=\"auto\"\n              ><pb-i18n key=\"dialogs.loading\">Loading</pb-i18n></pb-load\n            >\n          </div>\n        </pb-drawer> -->\n        <pb-drawer\n          toggle=\"tocToggle\"\n          class=\"tocDrawer\"\n          emit=\"toc\"\n          subscribe=\"transcription\"\n        >\n          <div class=\"drawer-content\">\n            <h3>\n              <pb-i18n key=\"document.contents\">Contents</pb-i18n>\n            </h3>\n            <pb-load\n              *ngIf=\"data.docs\"\n              id=\"toc\"\n              url=\"api/document/{doc}/contents?target=transcription&amp;icons=true\"\n              [src]=\"data.docs[0].id\"\n              subscribe=\"toc\"\n              emit=\"toc\"\n              expand=\"expand\"\n              auto=\"auto\"\n              ><pb-i18n key=\"dialogs.loading\">Loading</pb-i18n></pb-load\n            >\n          </div>\n        </pb-drawer>\n        <main class=\"content-body\">\n          <pb-facsimile\n            *ngIf=\"data.facsimile\"\n            id=\"facsimile\"\n            [attr.base-uri]=\"data.facsimile.uri\"\n            subscribe=\"transcription\"\n            default-zoom-level=\"0\"\n            show-navigation-control=\"show-navigation-control\"\n            show-navigator=\"show-navigator\"\n          >\n          </pb-facsimile>\n          <ng-container *ngFor=\"let doc of data.docs; index as $i;\">\n            <!-- NO CHANNEL -->\n            <pb-view\n              *ngIf=\"!doc.channel\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              subscribe=\"transcription\"\n              emit=\"transcription\"\n              [attr.wait-for]=\"data.facsimile ? '#facsimile' : null\"\n              column-separator=\".tei-cb\"\n              append-footnotes=\"append-footnotes\"\n              view=\"{{ doc.view }}\"\n            ></pb-view>\n            <!-- WITH CHANNEL / MURUCA DEMO -->\n            <pb-view\n              *ngIf=\"doc.channel && doc.translation\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              xpath=\"//text[@type='source']\"\n              emit=\"{{ doc.channel }}\"\n              subscribe=\"{{ doc.channel }}\"\n              view=\"{{ doc.view }}\"\n            >\n            </pb-view>\n            <pb-view\n              *ngIf=\"doc.channel && doc.translation\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              xpath=\"{{ doc.xpath }}\"\n              emit=\"{{ doc.channel }}\"\n              subscribe=\"{{ doc.channel }}\"\n              view=\"{{ doc.view }}\"\n            >\n              <pb-param name=\"mode\" value=\"commentary\"></pb-param>\n            </pb-view>\n            <!-- WITH CHANNEL / addChannel -->\n            <pb-view\n              *ngIf=\"doc.channel && !doc.translation\"\n              (click)=\"displayIndex()\"\n              id=\"view{{ $i }}\"\n              [src]=\"doc.id\"\n              [odd]=\"doc.odd\"\n              emit=\"addChannel\"\n              subscribe=\"addChannel\"\n              view=\"{{ doc.view }}\"\n            >\n              <pb-param name=\"mode\" value=\"commentary\"></pb-param>\n            </pb-view>\n\n            <ng-container\n              *ngIf=\"doc.channel && !doc.translation\"\n            >\n              <!--  -->\n              <pb-view\n                [hidden]=\"!isDisplayed\"\n                *ngIf=\"doc.channel && !doc.translation\"\n                [src]=\"doc.id\"\n                [odd]=\"doc.odd\"\n                subscribe=\"index\"\n                emit=\"letter\"\n              >\n                <pb-param name=\"mode\" value=\"facets\"></pb-param>\n              </pb-view>\n              <!--  -->\n            </ng-container>\n          </ng-container>\n        </main>\n      </app-header-layout>\n    </app-drawer-layout>\n  </pb-page>\n</div>\n\n" }]
         }], propDecorators: { data: [{
                 type: Input
             }], emit: [{
@@ -1624,9 +1693,9 @@ class TagComponent {
         this.emit('click', payload);
     }
 }
-TagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TagComponent, decorators: [{
+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"] }] });
+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>" }]
         }], propDecorators: { data: [{
@@ -1670,9 +1739,9 @@ class TimelineComponent {
         this.emit('click', payload);
     }
 }
-TimelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TimelineComponent, selector: "n7-timeline", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-timeline\">\n  <div [id]=\"data.containerID\" style=\"border: 1px solid #ddd\"></div> \n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TimelineComponent, decorators: [{
+TimelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TimelineComponent, selector: "n7-timeline", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-timeline\">\n  <div [id]=\"data.containerID\" style=\"border: 1px solid #ddd\"></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: TimelineComponent, decorators: [{
             type: Component,
             args: [{ selector: 'n7-timeline', template: "<div *ngIf=\"data\" class=\"n7-timeline\">\n  <div [id]=\"data.containerID\" style=\"border: 1px solid #ddd\"></div> \n</div>\n" }]
         }], propDecorators: { data: [{
@@ -1689,9 +1758,9 @@ class ToastComponent {
         this.emit('click', payload);
     }
 }
-ToastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: ToastComponent, selector: "n7-toast", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-toast\">\n    <div class=\"n7-toast__column {{data.classes || ''}}\">\n\n        <!-- Toast boxes -->\n        <div class=\"n7-toast__box\" \n             *ngFor=\"let box of data.toasts\"\n             [ngClass]=\"{ 'has-actions' : !! (box.actions || box.closeIcon) }\">\n        \n            <!-- Toast text -->\n            <div class=\"n7-toast__content {{box.classes || ''}}\" *ngIf=\"box.title || box.text\">\n                <span class=\"n7-toast__title\" *ngIf=\"box.title\">{{ box.title }}</span>\n                <span class=\"n7-toast__text\" *ngIf=\"box.text\">{{ box.text }}</span>\n            </div>\n\n            <!-- Toast actions -->\n            <div class=\"n7-toast__actions\" *ngIf=\"box.actions || box.closeIcon\">\n                <span\n                class=\"n7-toast__closeIcon {{ box.closeIcon.icon }}\" \n                *ngIf=\"box.closeIcon\" \n                (click)=\"onClick(box.closeIcon.payload)\">\n                </span>\n                <span class=\"n7-toast__action-wrapper\" *ngIf=\"box.actions\">\n                    <span class=\"n7-toast__action-content\" *ngFor=\"let action of box.actions\">\n                        <button class=\"n7-toast__action-button n7-btn n7-btn-s {{action.classes || ''}}\"\n                                (click)=\"onClick(action.payload)\">\n                                {{action.text}}\n                        </button>\n                    </span>\n                </span>\n            </div>\n        </div>\n    </div>\n</div>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ToastComponent, decorators: [{
+ToastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ToastComponent, selector: "n7-toast", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-toast\">\n    <div class=\"n7-toast__column {{data.classes || ''}}\">\n\n        <!-- Toast boxes -->\n        <div class=\"n7-toast__box\" \n             *ngFor=\"let box of data.toasts\"\n             [ngClass]=\"{ 'has-actions' : !! (box.actions || box.closeIcon) }\">\n        \n            <!-- Toast text -->\n            <div class=\"n7-toast__content {{box.classes || ''}}\" *ngIf=\"box.title || box.text\">\n                <span class=\"n7-toast__title\" *ngIf=\"box.title\">{{ box.title }}</span>\n                <span class=\"n7-toast__text\" *ngIf=\"box.text\">{{ box.text }}</span>\n            </div>\n\n            <!-- Toast actions -->\n            <div class=\"n7-toast__actions\" *ngIf=\"box.actions || box.closeIcon\">\n                <span\n                class=\"n7-toast__closeIcon {{ box.closeIcon.icon }}\" \n                *ngIf=\"box.closeIcon\" \n                (click)=\"onClick(box.closeIcon.payload)\">\n                </span>\n                <span class=\"n7-toast__action-wrapper\" *ngIf=\"box.actions\">\n                    <span class=\"n7-toast__action-content\" *ngFor=\"let action of box.actions\">\n                        <button class=\"n7-toast__action-button n7-btn n7-btn-s {{action.classes || ''}}\"\n                                (click)=\"onClick(action.payload)\">\n                                {{action.text}}\n                        </button>\n                    </span>\n                </span>\n            </div>\n        </div>\n    </div>\n</div>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
             args: [{ selector: 'n7-toast', template: "<div *ngIf=\"data\" class=\"n7-toast\">\n    <div class=\"n7-toast__column {{data.classes || ''}}\">\n\n        <!-- Toast boxes -->\n        <div class=\"n7-toast__box\" \n             *ngFor=\"let box of data.toasts\"\n             [ngClass]=\"{ 'has-actions' : !! (box.actions || box.closeIcon) }\">\n        \n            <!-- Toast text -->\n            <div class=\"n7-toast__content {{box.classes || ''}}\" *ngIf=\"box.title || box.text\">\n                <span class=\"n7-toast__title\" *ngIf=\"box.title\">{{ box.title }}</span>\n                <span class=\"n7-toast__text\" *ngIf=\"box.text\">{{ box.text }}</span>\n            </div>\n\n            <!-- Toast actions -->\n            <div class=\"n7-toast__actions\" *ngIf=\"box.actions || box.closeIcon\">\n                <span\n                class=\"n7-toast__closeIcon {{ box.closeIcon.icon }}\" \n                *ngIf=\"box.closeIcon\" \n                (click)=\"onClick(box.closeIcon.payload)\">\n                </span>\n                <span class=\"n7-toast__action-wrapper\" *ngIf=\"box.actions\">\n                    <span class=\"n7-toast__action-content\" *ngFor=\"let action of box.actions\">\n                        <button class=\"n7-toast__action-button n7-btn n7-btn-s {{action.classes || ''}}\"\n                                (click)=\"onClick(action.payload)\">\n                                {{action.text}}\n                        </button>\n                    </span>\n                </span>\n            </div>\n        </div>\n    </div>\n</div>" }]
         }], propDecorators: { data: [{
@@ -1708,9 +1777,9 @@ class TooltipContentComponent {
         this.emit('click', payload);
     }
 }
-TooltipContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TooltipContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TooltipContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TooltipContentComponent, selector: "n7-tooltip-content", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\"\n     class=\"n7-tooltip-content\">\n\n  <div *ngIf=\"data.title\">\n    {{data.title}}\n  </div>\n\n  <div *ngIf=\"data.text\"\n       [innerHTML]=\"data.text\">\n  </div>\n\n  <img *ngIf=\"data.image\"\n       [src]=\"data.image\">\n\n  <ng-container *ngFor=\"let btn of data.actions\">\n    <n7-anchor-wrapper [classes]=\"\"\n                       [data]=\"btn\"\n                       (clicked)=\"onClick(btn.anchor.payload)\">\n      <span *ngIf=\"data.text\" class=\"n7-btn\">\n        {{ btn.text }}\n      </span>\n    </n7-anchor-wrapper>\n  </ng-container>\n\n</div>\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.2", ngImport: i0, type: TooltipContentComponent, decorators: [{
+TooltipContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TooltipContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TooltipContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TooltipContentComponent, selector: "n7-tooltip-content", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\"\n     class=\"n7-tooltip-content\">\n\n  <div *ngIf=\"data.title\">\n    {{data.title}}\n  </div>\n\n  <div *ngIf=\"data.text\"\n       [innerHTML]=\"data.text\">\n  </div>\n\n  <img *ngIf=\"data.image\"\n       [src]=\"data.image\">\n\n  <ng-container *ngFor=\"let btn of data.actions\">\n    <n7-anchor-wrapper [classes]=\"\"\n                       [data]=\"btn\"\n                       (clicked)=\"onClick(btn.anchor.payload)\">\n      <span *ngIf=\"data.text\" class=\"n7-btn\">\n        {{ btn.text }}\n      </span>\n    </n7-anchor-wrapper>\n  </ng-container>\n\n</div>\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: TooltipContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'n7-tooltip-content', template: "<div *ngIf=\"data\"\n     class=\"n7-tooltip-content\">\n\n  <div *ngIf=\"data.title\">\n    {{data.title}}\n  </div>\n\n  <div *ngIf=\"data.text\"\n       [innerHTML]=\"data.text\">\n  </div>\n\n  <img *ngIf=\"data.image\"\n       [src]=\"data.image\">\n\n  <ng-container *ngFor=\"let btn of data.actions\">\n    <n7-anchor-wrapper [classes]=\"\"\n                       [data]=\"btn\"\n                       (clicked)=\"onClick(btn.anchor.payload)\">\n      <span *ngIf=\"data.text\" class=\"n7-btn\">\n        {{ btn.text }}\n      </span>\n    </n7-anchor-wrapper>\n  </ng-container>\n\n</div>\n" }]
         }], propDecorators: { data: [{
@@ -1727,9 +1796,9 @@ class TreeComponent {
         this.emit('click', payload);
     }
 }
-TreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TreeComponent, selector: "n7-tree", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-tree\">\n    <!-- Start recursive rendering -->\n    <ng-container *ngTemplateOutlet=\"recursiveTree; context:{$implicit: data.items}\"></ng-container>\n\n    <!-- Template for recursive children rendering -->\n    <ng-template #recursiveTree let-node>\n        <div class=\"n7-tree__item {{ item.classes || '' }}\" *ngFor=\"let item of node\">\n            <div class=\"n7-tree__item-contents\">\n                <!-- Render expand/collapse arrow -->\n                <span *ngIf=\"item.toggle\"\n                      class=\"n7-tree__item-toggle {{ item.toggle.icon }}\"\n                      (click)=\"onClick(item.toggle.payload)\">\n                </span>\n                <!-- Render the node -->\n                <n7-anchor-wrapper \n                [classes]=\"'n7-tree__item-details'\"\n                [data]=\"item.anchor\"\n                (clicked)=\"onClick($event)\">\n                    <span *ngIf=\"item.icon\" class=\"n7-tree__item-icon {{ item.icon }}\"></span>\n                    <img class=\"n7-tree__item-img\" *ngIf=\"item.img\" src=\"{{ item.img }}\" alt=\"{{ item.text }}\"/>\n                    <span class=\"n7-tree__item-text\">{{ item.text }}</span>\n                    <span class=\"n7-tree__item-right-icon {{ item.iconright }}\"></span>\n                </n7-anchor-wrapper>\n            </div>\n            <!-- Check for more child nodes and render them -->\n            <div class=\"n7-tree__children-wrapper\" *ngIf=\"item.items\">\n                <ng-container *ngTemplateOutlet=\"recursiveTree; context:{$implicit: item.items}\"></ng-container>\n            </div>\n        </div>\n    </ng-template>\n</div>", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TreeComponent, decorators: [{
+TreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TreeComponent, selector: "n7-tree", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-tree\">\n    <!-- Start recursive rendering -->\n    <ng-container *ngTemplateOutlet=\"recursiveTree; context:{$implicit: data.items}\"></ng-container>\n\n    <!-- Template for recursive children rendering -->\n    <ng-template #recursiveTree let-node>\n        <div class=\"n7-tree__item {{ item.classes || '' }}\" *ngFor=\"let item of node\">\n            <div class=\"n7-tree__item-contents\">\n                <!-- Render expand/collapse arrow -->\n                <span *ngIf=\"item.toggle\"\n                      class=\"n7-tree__item-toggle {{ item.toggle.icon }}\"\n                      (click)=\"onClick(item.toggle.payload)\">\n                </span>\n                <!-- Render the node -->\n                <n7-anchor-wrapper \n                [classes]=\"'n7-tree__item-details'\"\n                [data]=\"item.anchor\"\n                (clicked)=\"onClick($event)\">\n                    <span *ngIf=\"item.icon\" class=\"n7-tree__item-icon {{ item.icon }}\"></span>\n                    <img class=\"n7-tree__item-img\" *ngIf=\"item.img\" src=\"{{ item.img }}\" alt=\"{{ item.text }}\"/>\n                    <span class=\"n7-tree__item-text\">{{ item.text }}</span>\n                    <span class=\"n7-tree__item-right-icon {{ item.iconright }}\"></span>\n                </n7-anchor-wrapper>\n            </div>\n            <!-- Check for more child nodes and render them -->\n            <div class=\"n7-tree__children-wrapper\" *ngIf=\"item.items\">\n                <ng-container *ngTemplateOutlet=\"recursiveTree; context:{$implicit: item.items}\"></ng-container>\n            </div>\n        </div>\n    </ng-template>\n</div>", components: [{ type: AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TreeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'n7-tree', template: "<div *ngIf=\"data\" class=\"n7-tree\">\n    <!-- Start recursive rendering -->\n    <ng-container *ngTemplateOutlet=\"recursiveTree; context:{$implicit: data.items}\"></ng-container>\n\n    <!-- Template for recursive children rendering -->\n    <ng-template #recursiveTree let-node>\n        <div class=\"n7-tree__item {{ item.classes || '' }}\" *ngFor=\"let item of node\">\n            <div class=\"n7-tree__item-contents\">\n                <!-- Render expand/collapse arrow -->\n                <span *ngIf=\"item.toggle\"\n                      class=\"n7-tree__item-toggle {{ item.toggle.icon }}\"\n                      (click)=\"onClick(item.toggle.payload)\">\n                </span>\n                <!-- Render the node -->\n                <n7-anchor-wrapper \n                [classes]=\"'n7-tree__item-details'\"\n                [data]=\"item.anchor\"\n                (clicked)=\"onClick($event)\">\n                    <span *ngIf=\"item.icon\" class=\"n7-tree__item-icon {{ item.icon }}\"></span>\n                    <img class=\"n7-tree__item-img\" *ngIf=\"item.img\" src=\"{{ item.img }}\" alt=\"{{ item.text }}\"/>\n                    <span class=\"n7-tree__item-text\">{{ item.text }}</span>\n                    <span class=\"n7-tree__item-right-icon {{ item.iconright }}\"></span>\n                </n7-anchor-wrapper>\n            </div>\n            <!-- Check for more child nodes and render them -->\n            <div class=\"n7-tree__children-wrapper\" *ngIf=\"item.items\">\n                <ng-container *ngTemplateOutlet=\"recursiveTree; context:{$implicit: item.items}\"></ng-container>\n            </div>\n        </div>\n    </ng-template>\n</div>" }]
         }], propDecorators: { data: [{
@@ -1746,9 +1815,9 @@ class WizardComponent {
         this.emit('click', payload);
     }
 }
-WizardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: WizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-WizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: WizardComponent, selector: "n7-wizard", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-wizard {{ data.classes || '' }}\">\n  <ol class=\"n7-wizard__list\">\n      <li *ngFor=\"let item of data.items\" \n          class=\"n7-wizard__item {{ item.classes || '' }}\" \n          (click)=\"onClick(item.payload)\">\n            <span *ngIf=\"item.number\" class=\"n7-wizard__number\">{{ item.number }}</span>\n            <span *ngIf=\"item.text\" class=\"n7-wizard__text\">{{ item.text }}</span>\n      </li>\n  </ol>\n</div>", 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.2", ngImport: i0, type: WizardComponent, decorators: [{
+WizardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: WizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+WizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: WizardComponent, selector: "n7-wizard", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-wizard {{ data.classes || '' }}\">\n  <ol class=\"n7-wizard__list\">\n      <li *ngFor=\"let item of data.items\" \n          class=\"n7-wizard__item {{ item.classes || '' }}\" \n          (click)=\"onClick(item.payload)\">\n            <span *ngIf=\"item.number\" class=\"n7-wizard__number\">{{ item.number }}</span>\n            <span *ngIf=\"item.text\" class=\"n7-wizard__text\">{{ item.text }}</span>\n      </li>\n  </ol>\n</div>", 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: WizardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'n7-wizard', template: "<div *ngIf=\"data\" class=\"n7-wizard {{ data.classes || '' }}\">\n  <ol class=\"n7-wizard__list\">\n      <li *ngFor=\"let item of data.items\" \n          class=\"n7-wizard__item {{ item.classes || '' }}\" \n          (click)=\"onClick(item.payload)\">\n            <span *ngIf=\"item.number\" class=\"n7-wizard__number\">{{ item.number }}</span>\n            <span *ngIf=\"item.text\" class=\"n7-wizard__text\">{{ item.text }}</span>\n      </li>\n  </ol>\n</div>" }]
         }], propDecorators: { data: [{
@@ -1760,9 +1829,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
 //---------------------------
 class ProgressLineComponent {
 }
-ProgressLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ProgressLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ProgressLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: ProgressLineComponent, selector: "n7-progress-line", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-progress-line\">\n    <div class=\"n7-progress-line__text-wrapper\">\n        <span class=\"n7-progress-line__label\" *ngIf=\"data.label\">\n            {{ data.label }}\n        </span>\n        <span class=\"n7-progress-line__value\" *ngIf=\"data.value || data.value===0\">\n            {{ data.value }}%\n        </span>\n    </div>\n    <div class=\"n7-progress-line__wrapper\">\n        <div class='n7-progress-line__bar' [ngStyle]=\"{'width.%':data.value}\"> {{data.value}}%\n        </div>\n    </div>\n</div>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ProgressLineComponent, decorators: [{
+ProgressLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ProgressLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ProgressLineComponent, selector: "n7-progress-line", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\" class=\"n7-progress-line\">\n    <div class=\"n7-progress-line__text-wrapper\">\n        <span class=\"n7-progress-line__label\" *ngIf=\"data.label\">\n            {{ data.label }}\n        </span>\n        <span class=\"n7-progress-line__value\" *ngIf=\"data.value || data.value===0\">\n            {{ data.value }}%\n        </span>\n    </div>\n    <div class=\"n7-progress-line__wrapper\">\n        <div class='n7-progress-line__bar' [ngStyle]=\"{'width.%':data.value}\"> {{data.value}}%\n        </div>\n    </div>\n</div>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressLineComponent, decorators: [{
             type: Component,
             args: [{ selector: 'n7-progress-line', template: "<div *ngIf=\"data\" class=\"n7-progress-line\">\n    <div class=\"n7-progress-line__text-wrapper\">\n        <span class=\"n7-progress-line__label\" *ngIf=\"data.label\">\n            {{ data.label }}\n        </span>\n        <span class=\"n7-progress-line__value\" *ngIf=\"data.value || data.value===0\">\n            {{ data.value }}%\n        </span>\n    </div>\n    <div class=\"n7-progress-line__wrapper\">\n        <div class='n7-progress-line__bar' [ngStyle]=\"{'width.%':data.value}\"> {{data.value}}%\n        </div>\n    </div>\n</div>" }]
         }], propDecorators: { data: [{
@@ -1817,8 +1886,8 @@ const COMPONENTS = [
 ];
 class DvComponentsLibModule {
 }
-DvComponentsLibModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DvComponentsLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DvComponentsLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DvComponentsLibModule, declarations: [AdvancedAutocompleteComponent,
+DvComponentsLibModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DvComponentsLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DvComponentsLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DvComponentsLibModule, declarations: [AdvancedAutocompleteComponent,
         AlertComponent,
         AnchorWrapperComponent,
         BreadcrumbsComponent,
@@ -1901,8 +1970,8 @@ DvComponentsLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", v
         TreeComponent,
         WizardComponent,
         ProgressLineComponent] });
-DvComponentsLibModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DvComponentsLibModule, imports: [[CommonModule, RouterModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DvComponentsLibModule, decorators: [{
+DvComponentsLibModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DvComponentsLibModule, imports: [[CommonModule, RouterModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DvComponentsLibModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -6666,8 +6735,8 @@ const HISTOGRAM_RANGE_MOCK = {
         accent: '#2F528B',
     },
     margin: {
-        left: 30,
-        right: 0,
+        left: 25,
+        right: 5,
         top: 10,
         bottom: 45
     },
@@ -7617,37 +7686,40 @@ const TEXT_VIEWER_MOCK = {
     // endpoint: 'https://teipublisher.com/exist/apps/tei-publisher',
     docs: [
         // {
-        //   xml: 'playground/seniles_4.xml',
-        //   odd: 'muruca_1-0',
-        //   id: 'seniles',
+        //   xml: 'petrarca/seniles-1_1649330076.xml',
+        //   odd: 'petrarca_1-1',
+        //   id: 'seniles_5',
         //   view: 'div'
         // },
-        {
-            xml: 'murucademo/La_volpe_e_l_uva_1615547140.xml',
-            odd: 'demo_1-0',
-            id: 'seniles',
-            view: 'div',
-            channel: 'altrochannel',
-            translation: true
-        },
         // {
-        //   xml: 'playground/131_SFERAMUNDI1_1606152901..xml',
-        //   odd: 'sferamundi_1-0',
+        //   xml: 'murucademo/La_volpe_e_l_uva_1615547140.xml',
+        //   odd: 'demo_1-0',
         //   id: 'seniles',
-        //   view: 'page'
-        // },
-        // {
-        //   xml: 'playground/sferacomm.xml',
-        //   odd: 'sferamundi_1-0',
-        //   id: 'seniles2',
-        //   view: 'page',
-        //   channel: 'altrochannel'
+        //   view: 'div',
+        //   channel: 'altrochannel',
+        //   translation: true
         // },
+        {
+            // xml: 'mambrino/13_1_sm1_primi10caps-2_1623837525.xml',
+            xml: 'mambrino/SM1_source_def2.xml',
+            odd: 'test_index',
+            id: 'seniles',
+            view: 'page'
+        },
+        {
+            xml: 'test/graves6.xml',
+            // xml: 'mambrino/SM1_commentary_def2.xml',
+            odd: 'test_index',
+            id: 'seniles2',
+            view: 'page',
+            channel: 'altrochannel'
+        },
     ],
-    // facsimile: {
-    //   uri: 'http://127.0.0.1:8182/iiif/2/',
-    //   scans: ['001r.tif', '001v.tif', '002r.tif', '002v.tif']
-    // }
+    facsimile: {
+        // uri: 'https://test-01.dlls.univr.it/cantaloupe/iiif/3/mambrino%2FCICLO%20DI%20AMADIS%2F13_2%20SFERAMUNDI%202%2F1560%20BNE%2F',
+        uri: 'http://127.0.0.1:8182/iiif/3/',
+        scans: []
+    }
 };
 
 const TIMELINE_MOCK = {