adb-shared 3.0.20 → 3.0.22

package/fesm2015/adb-shared.mjs

@@ -1,7 +1,7 @@
 import * as i2 from '@angular/common';
 import { CommonModule, DatePipe, formatDate } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, Inject, EventEmitter, Directive, Output, HostListener, Component, Input, HostBinding, NgModule, Pipe, forwardRef } from '@angular/core';
+import { Injectable, Inject, EventEmitter, Component, Output, Input, Directive, HostListener, HostBinding, NgModule, Pipe, forwardRef } from '@angular/core';
 import * as i1$1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { Subscription, Subject, of } from 'rxjs';
@@ -29,32 +29,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                     }] }];
     } });
 
-class ClickOutsideDirective {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        this.adbClickOutside = new EventEmitter();
-    }
-    onClick(target) {
-        const clickedInside = this.elementRef.nativeElement.contains(target);
-        if (!clickedInside) {
-            this.adbClickOutside.emit(target);
-        }
-    }
-}
-/** @nocollapse */ ClickOutsideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ ClickOutsideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: ClickOutsideDirective, selector: "[adbClickOutside]", outputs: { adbClickOutside: "adbClickOutside" }, host: { listeners: { "document:click": "onClick($event.target)" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClickOutsideDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[adbClickOutside]',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { adbClickOutside: [{
-                type: Output
-            }], onClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event.target']]
-            }] } });
-
 class ADBHeaderComponent {
     constructor(httpClient, envService, trans) {
         this.httpClient = httpClient;
@@ -137,10 +111,10 @@ class ADBHeaderComponent {
     }
 }
 /** @nocollapse */ ADBHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ADBHeaderComponent, deps: [{ token: i1.HttpClient }, { token: EnvironmentService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ ADBHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: ADBHeaderComponent, selector: "adb-header", inputs: { userName: "userName", artfakta: "artfakta" }, outputs: { loginClicked: "loginClicked", logoutClicked: "logoutClicked", dropMenuChange: "dropMenuChange" }, ngImport: i0, template: "<header (adbClickOutside)=\"showUserMenu=false;showMenuDropdown(false);\" >\r\n    <nav class=\"d-flex flex-wrap align-items-center px-3 gap-3\">\r\n        <div class=\"d-none d-md-block\">\r\n            <a href=\"https://www.artdatabanken.se/\" target=\"new\"><img src=\"/assets/images/logo.svg\" style=\"height: 3.2rem;\"></a>\r\n        </div>\r\n        <div class=\"logo d-sm-block d-md-none d-flex align-items-center\">\r\n            <img src=\"/assets/images/logo_sm_white.png\" style=\"height: 2rem;\">\r\n        </div>\r\n        <a [href]=\"artfakta?navigation?.artfaktaUrl:navigation?.artportalenUrl\" class=\"text-decoration-none\">\r\n            <strong style=\"font-size: 1.5rem;\" *ngIf=\"translationFinished\">{{(artfakta?'ADB_HEADER.TITLE':'ADB_HEADER.ARTPORTALEN_TITLE')|translate}}</strong>\r\n        </a>\r\n        <ng-container *ngIf=\"translationFinished\">\r\n            <nav class=\"flex-grow-1 d-none d-lg-flex align-items-center  pe-4 gap-4\" *ngIf=\"navigation\">\r\n                <ng-container *ngFor=\"let link of navigation.links\">\r\n                    <a href=\"{{link.url}}?lang={{trans.currentLang}}\" *ngIf=\"link.topLink\">\r\n                        {{link.transId|translate}}\r\n                    </a>\r\n                </ng-container>\r\n                <a class=\"ms-auto\"[href]=\"navigation.artportalenUrl\">\r\n                    {{'ADB_HEADER.ARTPORTALEN_TITLE'|translate}}\r\n                </a>\r\n            </nav>\r\n            <div class=\"d-block d-lg-none ms-auto\">\r\n                <button type=\"button\" class=\"btn btn-sm py-1 px-2 btn-primary\" (click)=\"showUserMenu = false;showMenuDropdown(!showMenu)\">\r\n                    {{'ADB_HEADER.MENY'|translate}}\r\n                    <i class=\"ms-1 fas\" [ngClass]=\"showMenu?'fa-chevron-up':'fa-chevron-down'\"></i>\r\n                </button>\r\n            </div>\r\n            <div class=\"d-none d-lg-block ms-auto\">\r\n                <button *ngIf=\"initials\" type=\"button\" class=\"btn initials\" (click)=\"showUserMenu = !showUserMenu;showMenuDropdown(false)\">{{initials}}</button>\r\n                <button *ngIf=\"!initials\" type=\"button\" (click)=\"showUserMenu = !showUserMenu;showMenuDropdown(false)\" class=\"btn btn-link\">\r\n                    {{'ADB_HEADER.LOGIN'|translate}}\r\n                </button>\r\n            </div>\r\n        </ng-container>\r\n    </nav>\r\n    <div class=\"position-relative\" *ngIf=\"showUserMenu\">\r\n        <div class=\"position-absolute end-0 bg-white border-1 shadow-sm p-2\" style=\"width:15rem\">\r\n            <ng-container *ngIf=\"initials\">\r\n                <div class=\"text-end\">\r\n                    <button type=\"button\" *ngIf=\"trans.currentLang==='en'\" (click)=\"setLanguage('sv')\" class=\"btn btn-sm btn-light\">\r\n                        <i class=\"fas fa-globe-europe\"></i> {{'ADB_HEADER.IN_SWEDISH'|translate}}\r\n                    </button>\r\n                    <button type=\"button\" *ngIf=\"trans.currentLang==='sv'\" (click)=\"setLanguage('en')\" class=\"btn btn-sm btn-light\">\r\n                        <i class=\"fas fa-globe-europe\"></i> {{'ADB_HEADER.IN_ENGLISH'|translate}}\r\n                    </button>\r\n                </div>\r\n                <hr class=\"mx-n2 my-2 text-muted\">\r\n                <div class=\"d-flex align-items-center gap-2 text-dark\">\r\n                    <span class=\"initials\">{{initials}}</span>\r\n                    <strong>{{fullName}}</strong>\r\n                </div>\r\n                <hr class=\"mx-n2 my-2 text-muted\">\r\n                <button (click)=\"logout()\" type=\"button\" class=\"btn btn-link px-0 py-1\">\r\n                    <i class=\"fas fa-sign-out-alt me-1\"></i>{{'ADB_HEADER.LOGOUT'|translate}}\r\n                </button>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!initials\">\r\n                <div class=\"d-flex justify-content-center\">\r\n                    <button type=\"button\" class=\"btn btn-primary\" (click)=\"login()\" id=\"start-login\">{{'ADB_HEADER.LOGIN'|translate}}</button>\r\n                </div>\r\n                <a *ngIf=\"navigation\" class=\"d-block mt-3\" href=\"{{navigation.createAccountLink}}?lang={{trans.currentLang}}&returnUrl={{url}}\">\r\n                    {{'ADB_HEADER.CREATE_USER'|translate}}\r\n                </a>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"bg-primary text-white\" *ngIf=\"showMenu\">\r\n        <ng-container *ngIf=\"navigation\">\r\n            <div class=\"px-3 pt-3 mb-1\">\r\n                <div class=\"d-flex justify-content-between flex-wrap gap-2 mb-2\">\r\n                    <div>\r\n                        <div class=\"d-flex d-md-none align-items-center gap-2\" *ngIf=\"initials\">\r\n                            <span class=\"initials me-2\">{{initials}}</span>\r\n                            <button type=\"button\" (click)=\"logout()\" class=\"btn btn-primary\">\r\n                                {{'ADB_HEADER.LOGOUT'|translate}}\r\n                            </button>\r\n                        </div>\r\n                        <div class=\"d-flex gap-2 d-md-none\" *ngIf=\"!initials\">\r\n                            <button type=\"button\" (click)=\"login()\" class=\"btn btn-primary\" id=\"login\">\r\n                                {{'ADB_HEADER.LOGIN'|translate}}\r\n                            </button>\r\n                            <a href=\"{{navigation.createAccountLink}}?lang={{trans.currentLang}}&returnUrl={{url}}\"\r\n                               class=\"btn btn-primary text-white\">\r\n                                {{'ADB_HEADER.CREATE_USER'|translate}}\r\n                            </a>\r\n                        </div>\r\n                    </div>\r\n                    <div>\r\n                        <button type=\"button\" *ngIf=\"trans.currentLang==='en'\" (click)=\"setLanguage('sv')\"\r\n                                class=\"btn btn-primary\">\r\n                            {{'ADB_HEADER.IN_SWEDISH'|translate}}\r\n                        </button>\r\n                        <button type=\"button\" *ngIf=\"trans.currentLang==='sv'\" (click)=\"setLanguage('en')\"\r\n                                class=\"btn btn-primary\">\r\n                            {{'ADB_HEADER.IN_ENGLISH'|translate}}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n                {{'ADB_HEADER.SERVICES'|translate}}\r\n            </div>\r\n            <div id=\"splash\">\r\n                <div class=\"px-3 d-flex flex-column\">\r\n                    <ul class=\"list-group ms-0 mb-0 ps-0\">\r\n                        <li class=\"mb-1 list-group-item p-0 rounded\" *ngFor=\"let link of navigation?.links\"\r\n                            [attr.aria-expanded]=\"link.transId===expandedLink?true:false\" role=\"button\">\r\n                            <div class=\"d-flex align-items-center justify-content-between\">\r\n                                <a href=\"{{link.url}}?lang={{trans.currentLang}}\" class=\"d-flex align-items-center flex-grow-1 p-2\">\r\n                                    <small class=\"fa-stack me-1\" *ngIf=\"link.icon\">\r\n                                        <span class=\"fas fa-circle fa-stack-2x text-primary\"></span>\r\n                                        <span class=\"fas fa-stack-1x fa-inverse\" [ngClass]=\"link.icon\"></span>\r\n                                    </small>\r\n                                    {{link.transId|translate}}\r\n                                </a>\r\n                                <button class=\"btn btn-light me-2\" *ngIf=\"link.children?.length>0\" (click)=\"onExpandLink($event,link.transId)\">\r\n                                    <i class=\"fas fa-chevron-up\" [ngClass]=\"link.transId===expandedLink?'d-block ':'d-none'\"></i>\r\n                                    <i class=\"fas fa-chevron-down\" [ngClass]=\"link.transId!==expandedLink?'d-block ':'d-none'\"></i>\r\n                                </button>\r\n                            </div>\r\n                            <ul class=\"list-unstyled\" [ngClass]=\"link.transId===expandedLink?'d-block':'d-none'\">\r\n                                <li class=\"py-1 m-0\" [class.pt-0]=\"first\" *ngFor=\"let subLink of link.children;let first = first\" style=\"padding-left:3rem;\">\r\n                                    <a class=\"w-100 d-block\" href=\"{{subLink.url}}?lang={{trans.currentLang}}\">\r\n                                        {{subLink.transId|translate}}\r\n                                    </a>\r\n                                </li>\r\n                            </ul>\r\n                        </li>\r\n                        <li class=\"mb-1 list-group-item p-0 rounded mt-2\">\r\n                            <a class=\"d-flex align-items-center flex-grow-1 p-2\" [href]=\"navigation?.artportalenUrl\">\r\n                                <small class=\"fa-stack me-1\">\r\n                                    <span class=\"fas fa-circle fa-stack-2x text-primary\"></span>\r\n                                    <span class=\"fas fa-stack-1x fa-inverse fa-binoculars\"></span>\r\n                                </small>\r\n                                {{'ADB_HEADER.ARTPORTALEN_TITLE'|translate}}\r\n                            </a>\r\n                        </li>\r\n                    </ul>\r\n                    <div *ngIf=\"navigation?.about\" class=\"mt-2 mb-auto\">\r\n                        <div class=\"mb-1\">{{'ADB_HEADER.CONTACT'|translate}}</div>\r\n                        <div class=\"mb-1 row\">\r\n                            <div class=\"col-sm-6 mb-2\">\r\n                                <div class=\"bg-white p-2 rounded\">\r\n                                    <small class=\"fa-stack\" *ngIf=\"navigation.about.icon\">\r\n                                        <span class=\"fas fa-circle fa-stack-2x text-primary\"></span>\r\n                                        <span class=\"fas fa-stack-1x fa-inverse fa-envelope\"></span>\r\n                                    </small>\r\n                                    <a class=\"bg-white p-2\" href=\"mailto:artfakta@artdatabanken.se\">artfakta@artdatabanken.se</a>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-sm-6 mb-2\">\r\n                                <div class=\"bg-white p-2 rounded\">\r\n                                    <small class=\"fa-stack\" *ngIf=\"navigation.about.icon\">\r\n                                        <span class=\"fas fa-circle fa-stack-2x text-primary\"></span>\r\n                                        <span class=\"fas fa-stack-1x fa-inverse\" [ngClass]=\"navigation.about.icon\"></span>\r\n                                    </small>\r\n                                    <a [href]=\"navigation.about.url\">{{navigation.about.transId|translate}}</a>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div style=\"height:10rem\"></div>\r\n                    <div class=\"mb-3\">\r\n                        {{'ADB_HEADER.DEVELOPED_BY'|translate}}\r\n                        <a href=\"https://www.artdatabanken.se/\" class=\"text-white\"><u>{{'ADB_HEADER.ARTDATABANKEN'|translate}}</u></a>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</header>", directives: [{ type: ClickOutsideDirective, selector: "[adbClickOutside]", outputs: ["adbClickOutside"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i1$1.TranslatePipe } });
+/** @nocollapse */ ADBHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: ADBHeaderComponent, selector: "adb-header", inputs: { userName: "userName", artfakta: "artfakta" }, outputs: { loginClicked: "loginClicked", logoutClicked: "logoutClicked", dropMenuChange: "dropMenuChange" }, ngImport: i0, template: "<header id=\"top-header\" (clickOutside)=\"showUserMenu=false;showMenuDropdown(false);\">\r\n    <nav class=\"d-flex flex-wrap px-3\">\r\n        <div class=\"flex-grow-1 d-flex align-items-center justify-content-between justify-content-md-start\">\r\n            <div class=\"logo d-none d-md-block\">\r\n                <a href=\"https://www.artdatabanken.se/\" target=\"new\"><img src=\"/assets/images/logo.svg\" style=\"height: 3.2rem;\"></a>\r\n            </div>\r\n            <div class=\"logo ps-2 d-sm-block d-md-none d-flex align-items-center\">\r\n                <img src=\"/assets/images/logo_sm_white.png\" style=\"height: 2rem;\">\r\n            </div>\r\n            <span *ngIf=\"('ADB_HEADER.TITLE'|translate)==='Artfakta'\" class=\"d-none d-md-block\"><a href=\"https://artfakta.se/artbestamning\" class=\"text-decoration-none\"><strong class=\"bigger\">{{'ADB_HEADER.TITLE'|translate}}</strong></a></span>\r\n            <span *ngIf=\"('ADB_HEADER.TITLE'|translate)==='Artfakta'\" class=\"d-sm-block d-md-none\"><strong class=\"bigger\">{{'ADB_HEADER.TITLE'|translate}}</strong></span>\r\n            <span *ngIf=\"('ADB_HEADER.TITLE'|translate)!=='Artfakta'\"><strong class=\"bigger\">{{'ADB_HEADER.TITLE'|translate}}</strong></span>\r\n        </div>\r\n        <div *ngIf=\"translationFinished\" class=\"flex-grow-1 d-flex justify-content-lg-between justify-content-end align-items-center\">\r\n            <div *ngIf=\"navigation\" class=\"d-flex align-items-center\">\r\n                <nav class=\"d-none align-items-center d-lg-flex pe-4 gap-4\" *ngIf=\"navigation\">\r\n                    <ng-container *ngFor=\"let link of navigation.links\">\r\n                        <a href=\"{{link.url}}?lang={{trans.currentLang}}\" *ngIf=\"link.topLink\" [ngClass]=\"{'d-none d-xl-block':link.transId==='ADB_HEADER.OBSERVATION'}\">\r\n                            {{link.transId|translate}}\r\n                        </a>\r\n                    </ng-container>\r\n                </nav>\r\n                <div>\r\n                    <button type=\"button\" class=\"btn btn-sm py-1 px-2 btn-primary\" (click)=\"showUserMenu = false;showMenuDropdown(!showMenu)\">\r\n                        {{'ADB_HEADER.MENY'|translate}}\r\n                        <i class=\"ms-1 fas\" [ngClass]=\"showMenu?'fa-chevron-up':'fa-chevron-down'\"></i>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-none d-md-block ps-4\">\r\n                <button *ngIf=\"initials\" type=\"button\" class=\"btn initials\" (click)=\"showUserMenu = !showUserMenu;showMenuDropdown(false)\">{{initials}}</button>\r\n                <button *ngIf=\"!initials\" type=\"button\" (click)=\"showUserMenu = !showUserMenu;showMenuDropdown(false)\" class=\"btn btn-link\">\r\n                    {{'ADB_HEADER.LOGIN'|translate}}\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </nav>\r\n    <div class=\"menu\" *ngIf=\"showUserMenu\">\r\n        <div class=\"menu-body bg-white p-3\" style=\"width:15rem\">\r\n            <ng-container *ngIf=\"initials\">\r\n                <div class=\"d-flex align-items-center gap-2 text-dark\">\r\n                    <span class=\"initials\">{{initials}}</span>\r\n                    <strong>{{fullName}}</strong>\r\n                </div>\r\n                <hr class=\"mx-n3 text-muted\">\r\n                <button (click)=\"logout()\" type=\"button\" class=\"btn btn-link p-0\">\r\n                    <i class=\"fas fa-sign-out-alt me-1\"></i>{{'ADB_HEADER.LOGOUT'|translate}}\r\n                </button>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!initials\">\r\n                <div class=\"d-flex justify-content-center\">\r\n                    <button type=\"button\" class=\"btn btn-primary\" (click)=\"login()\" id=\"start-login\">{{'ADB_HEADER.LOGIN'|translate}}</button>\r\n                </div>\r\n                <a *ngIf=\"navigation\" class=\"d-block mt-3\" href=\"{{navigation.createAccountLink}}?lang={{trans.currentLang}}&returnUrl={{url}}\">\r\n                    {{'ADB_HEADER.CREATE_USER'|translate}}\r\n                </a>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"menu\" *ngIf=\"showMenu\">\r\n        <div class=\"menu-body\" *ngIf=\"navigation\">\r\n            <div class=\"px-3 pt-3 mb-1\">\r\n                <div class=\"d-flex justify-content-between flex-wrap gap-2 mb-2\">\r\n                    <div>\r\n                        <div class=\"d-flex d-md-none align-items-center gap-2\" *ngIf=\"initials\">\r\n                            <span class=\"initials me-2\">{{initials}}</span>\r\n                            <button type=\"button\" (click)=\"logout()\" class=\"btn btn-primary\">\r\n                                {{'ADB_HEADER.LOGOUT'|translate}}\r\n                            </button>\r\n                        </div>\r\n                        <div class=\"d-flex gap-2 d-md-none\" *ngIf=\"!initials\">\r\n                            <button type=\"button\" (click)=\"login()\" class=\"btn btn-primary\" id=\"login\">\r\n                                {{'ADB_HEADER.LOGIN'|translate}}\r\n                            </button>\r\n                            <a href=\"{{navigation.createAccountLink}}?lang={{trans.currentLang}}&returnUrl={{url}}\"\r\n                               class=\"btn btn-primary text-white\">\r\n                                {{'ADB_HEADER.CREATE_USER'|translate}}\r\n                            </a>\r\n                        </div>\r\n                    </div>\r\n                    <div>\r\n                        <button type=\"button\" *ngIf=\"trans.currentLang==='en'\" (click)=\"setLanguage('sv')\"\r\n                                class=\"btn btn-primary\">\r\n                            {{'ADB_HEADER.IN_SWEDISH'|translate}}\r\n                        </button>\r\n                        <button type=\"button\" *ngIf=\"trans.currentLang==='sv'\" (click)=\"setLanguage('en')\"\r\n                                class=\"btn btn-primary\">\r\n                            {{'ADB_HEADER.IN_ENGLISH'|translate}}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n                {{'ADB_HEADER.SERVICES'|translate}}\r\n            </div>\r\n            <div id=\"splash\">\r\n                <div class=\"px-3 d-flex flex-column\">\r\n                    <ul class=\"list-group ms-0 mb-0 ps-0\">\r\n                        <li class=\"mb-1 list-group-item p-0 rounded\" *ngFor=\"let link of navigation.links\"\r\n                            [attr.aria-expanded]=\"link.transId===expandedLink?true:false\" role=\"button\">\r\n                            <div class=\"d-flex align-items-center justify-content-between\">\r\n                                <a href=\"{{link.url}}?lang={{trans.currentLang}}\" class=\"d-flex align-items-center flex-grow-1 p-2\">\r\n                                    <small class=\"fa-stack me-1\" *ngIf=\"link.icon\">\r\n                                        <span class=\"fas fa-circle fa-stack-2x text-primary\"></span>\r\n                                        <span class=\"fas fa-stack-1x fa-inverse\" [ngClass]=\"link.icon\"></span>\r\n                                    </small>\r\n                                    {{link.transId|translate}}\r\n                                </a>\r\n                                <button class=\"btn btn-expand me-2\" *ngIf=\"link.children?.length>0\" (click)=\"onExpandLink($event,link.transId)\">\r\n                                    <i class=\"fas fa-chevron-up\" [ngClass]=\"link.transId===expandedLink?'d-block ':'d-none'\"></i>\r\n                                    <i class=\"fas fa-chevron-down\" [ngClass]=\"link.transId!==expandedLink?'d-block ':'d-none'\"></i>\r\n                                </button>\r\n                            </div>\r\n                            <ul class=\"list-unstyled\" [ngClass]=\"link.transId===expandedLink?'d-block':'d-none'\">\r\n                                <li class=\"py-1 m-0\" [class.pt-0]=\"first\" *ngFor=\"let subLink of link.children;let first = first\" style=\"padding-left:3rem;\">\r\n                                    <a class=\"w-100 d-block\" href=\"{{subLink.url}}?lang={{trans.currentLang}}\">\r\n                                        {{subLink.transId|translate}}\r\n                                    </a>\r\n                                </li>\r\n                            </ul>\r\n                        </li>\r\n                    </ul>\r\n                    <div *ngIf=\"navigation.about\" class=\"mt-2 mb-auto\">\r\n                        <div class=\"mb-1\">{{'ADB_HEADER.CONTACT'|translate}}</div>\r\n                        <div class=\"mb-1 row\">\r\n                            <div class=\"col-sm-6 mb-2\">\r\n                                <div class=\"bg-white p-2 rounded\">\r\n                                    <small class=\"fa-stack\" *ngIf=\"navigation.about.icon\">\r\n                                        <span class=\"fas fa-circle fa-stack-2x text-primary\"></span>\r\n                                        <span class=\"fas fa-stack-1x fa-inverse fa-envelope\"></span>\r\n                                    </small>\r\n                                    <a class=\"bg-white p-2\" href=\"mailto:artfakta@artdatabanken.se\">artfakta@artdatabanken.se</a>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-sm-6 mb-2\">\r\n                                <div class=\"bg-white p-2 rounded\">\r\n                                    <small class=\"fa-stack\" *ngIf=\"navigation.about.icon\">\r\n                                        <span class=\"fas fa-circle fa-stack-2x text-primary\"></span>\r\n                                        <span class=\"fas fa-stack-1x fa-inverse\" [ngClass]=\"navigation.about.icon\"></span>\r\n                                    </small>\r\n                                    <a [href]=\"navigation.about.url\">{{navigation.about.transId|translate}}</a>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div style=\"height:10rem\"></div>\r\n                    <div class=\"mb-3\">\r\n                        {{'ADB_HEADER.DEVELOPED_BY'|translate}}\r\n                        <a href=\"https://www.artdatabanken.se/\" class=\"text-white\"><u>{{'ADB_HEADER.ARTDATABANKEN'|translate}}</u></a>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</header>\r\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i1$1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ADBHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'adb-header', template: "<header (adbClickOutside)=\"showUserMenu=false;showMenuDropdown(false);\" >\r\n    <nav class=\"d-flex flex-wrap align-items-center px-3 gap-3\">\r\n        <div class=\"d-none d-md-block\">\r\n            <a href=\"https://www.artdatabanken.se/\" target=\"new\"><img src=\"/assets/images/logo.svg\" style=\"height: 3.2rem;\"></a>\r\n        </div>\r\n        <div class=\"logo d-sm-block d-md-none d-flex align-items-center\">\r\n            <img src=\"/assets/images/logo_sm_white.png\" style=\"height: 2rem;\">\r\n        </div>\r\n        <a [href]=\"artfakta?navigation?.artfaktaUrl:navigation?.artportalenUrl\" class=\"text-decoration-none\">\r\n            <strong style=\"font-size: 1.5rem;\" *ngIf=\"translationFinished\">{{(artfakta?'ADB_HEADER.TITLE':'ADB_HEADER.ARTPORTALEN_TITLE')|translate}}</strong>\r\n        </a>\r\n        <ng-container *ngIf=\"translationFinished\">\r\n            <nav class=\"flex-grow-1 d-none d-lg-flex align-items-center  pe-4 gap-4\" *ngIf=\"navigation\">\r\n                <ng-container *ngFor=\"let link of navigation.links\">\r\n                    <a href=\"{{link.url}}?lang={{trans.currentLang}}\" *ngIf=\"link.topLink\">\r\n                        {{link.transId|translate}}\r\n                    </a>\r\n                </ng-container>\r\n                <a class=\"ms-auto\"[href]=\"navigation.artportalenUrl\">\r\n                    {{'ADB_HEADER.ARTPORTALEN_TITLE'|translate}}\r\n                </a>\r\n            </nav>\r\n            <div class=\"d-block d-lg-none ms-auto\">\r\n                <button type=\"button\" class=\"btn btn-sm py-1 px-2 btn-primary\" (click)=\"showUserMenu = false;showMenuDropdown(!showMenu)\">\r\n                    {{'ADB_HEADER.MENY'|translate}}\r\n                    <i class=\"ms-1 fas\" [ngClass]=\"showMenu?'fa-chevron-up':'fa-chevron-down'\"></i>\r\n                </button>\r\n            </div>\r\n            <div class=\"d-none d-lg-block ms-auto\">\r\n                <button *ngIf=\"initials\" type=\"button\" class=\"btn initials\" (click)=\"showUserMenu = !showUserMenu;showMenuDropdown(false)\">{{initials}}</button>\r\n                <button *ngIf=\"!initials\" type=\"button\" (click)=\"showUserMenu = !showUserMenu;showMenuDropdown(false)\" class=\"btn btn-link\">\r\n                    {{'ADB_HEADER.LOGIN'|translate}}\r\n                </button>\r\n            </div>\r\n        </ng-container>\r\n    </nav>\r\n    <div class=\"position-relative\" *ngIf=\"showUserMenu\">\r\n        <div class=\"position-absolute end-0 bg-white border-1 shadow-sm p-2\" style=\"width:15rem\">\r\n            <ng-container *ngIf=\"initials\">\r\n                <div class=\"text-end\">\r\n                    <button type=\"button\" *ngIf=\"trans.currentLang==='en'\" (click)=\"setLanguage('sv')\" class=\"btn btn-sm btn-light\">\r\n                        <i class=\"fas fa-globe-europe\"></i> {{'ADB_HEADER.IN_SWEDISH'|translate}}\r\n                    </button>\r\n                    <button type=\"button\" *ngIf=\"trans.currentLang==='sv'\" (click)=\"setLanguage('en')\" class=\"btn btn-sm btn-light\">\r\n                        <i class=\"fas fa-globe-europe\"></i> {{'ADB_HEADER.IN_ENGLISH'|translate}}\r\n                    </button>\r\n                </div>\r\n                <hr class=\"mx-n2 my-2 text-muted\">\r\n                <div class=\"d-flex align-items-center gap-2 text-dark\">\r\n                    <span class=\"initials\">{{initials}}</span>\r\n                    <strong>{{fullName}}</strong>\r\n                </div>\r\n                <hr class=\"mx-n2 my-2 text-muted\">\r\n                <button (click)=\"logout()\" type=\"button\" class=\"btn btn-link px-0 py-1\">\r\n                    <i class=\"fas fa-sign-out-alt me-1\"></i>{{'ADB_HEADER.LOGOUT'|translate}}\r\n                </button>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!initials\">\r\n                <div class=\"d-flex justify-content-center\">\r\n                    <button type=\"button\" class=\"btn btn-primary\" (click)=\"login()\" id=\"start-login\">{{'ADB_HEADER.LOGIN'|translate}}</button>\r\n                </div>\r\n                <a *ngIf=\"navigation\" class=\"d-block mt-3\" href=\"{{navigation.createAccountLink}}?lang={{trans.currentLang}}&returnUrl={{url}}\">\r\n                    {{'ADB_HEADER.CREATE_USER'|translate}}\r\n                </a>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"bg-primary text-white\" *ngIf=\"showMenu\">\r\n        <ng-container *ngIf=\"navigation\">\r\n            <div class=\"px-3 pt-3 mb-1\">\r\n                <div class=\"d-flex justify-content-between flex-wrap gap-2 mb-2\">\r\n                    <div>\r\n                        <div class=\"d-flex d-md-none align-items-center gap-2\" *ngIf=\"initials\">\r\n                            <span class=\"initials me-2\">{{initials}}</span>\r\n                            <button type=\"button\" (click)=\"logout()\" class=\"btn btn-primary\">\r\n                                {{'ADB_HEADER.LOGOUT'|translate}}\r\n                            </button>\r\n                        </div>\r\n                        <div class=\"d-flex gap-2 d-md-none\" *ngIf=\"!initials\">\r\n                            <button type=\"button\" (click)=\"login()\" class=\"btn btn-primary\" id=\"login\">\r\n                                {{'ADB_HEADER.LOGIN'|translate}}\r\n                            </button>\r\n                            <a href=\"{{navigation.createAccountLink}}?lang={{trans.currentLang}}&returnUrl={{url}}\"\r\n                               class=\"btn btn-primary text-white\">\r\n                                {{'ADB_HEADER.CREATE_USER'|translate}}\r\n                            </a>\r\n                        </div>\r\n                    </div>\r\n                    <div>\r\n                        <button type=\"button\" *ngIf=\"trans.currentLang==='en'\" (click)=\"setLanguage('sv')\"\r\n                                class=\"btn btn-primary\">\r\n                            {{'ADB_HEADER.IN_SWEDISH'|translate}}\r\n                        </button>\r\n                        <button type=\"button\" *ngIf=\"trans.currentLang==='sv'\" (click)=\"setLanguage('en')\"\r\n                                class=\"btn btn-primary\">\r\n                            {{'ADB_HEADER.IN_ENGLISH'|translate}}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n                {{'ADB_HEADER.SERVICES'|translate}}\r\n            </div>\r\n            <div id=\"splash\">\r\n                <div class=\"px-3 d-flex flex-column\">\r\n                    <ul class=\"list-group ms-0 mb-0 ps-0\">\r\n                        <li class=\"mb-1 list-group-item p-0 rounded\" *ngFor=\"let link of navigation?.links\"\r\n                            [attr.aria-expanded]=\"link.transId===expandedLink?true:false\" role=\"button\">\r\n                            <div class=\"d-flex align-items-center justify-content-between\">\r\n                                <a href=\"{{link.url}}?lang={{trans.currentLang}}\" class=\"d-flex align-items-center flex-grow-1 p-2\">\r\n                                    <small class=\"fa-stack me-1\" *ngIf=\"link.icon\">\r\n                                        <span class=\"fas fa-circle fa-stack-2x text-primary\"></span>\r\n                                        <span class=\"fas fa-stack-1x fa-inverse\" [ngClass]=\"link.icon\"></span>\r\n                                    </small>\r\n                                    {{link.transId|translate}}\r\n                                </a>\r\n                                <button class=\"btn btn-light me-2\" *ngIf=\"link.children?.length>0\" (click)=\"onExpandLink($event,link.transId)\">\r\n                                    <i class=\"fas fa-chevron-up\" [ngClass]=\"link.transId===expandedLink?'d-block ':'d-none'\"></i>\r\n                                    <i class=\"fas fa-chevron-down\" [ngClass]=\"link.transId!==expandedLink?'d-block ':'d-none'\"></i>\r\n                                </button>\r\n                            </div>\r\n                            <ul class=\"list-unstyled\" [ngClass]=\"link.transId===expandedLink?'d-block':'d-none'\">\r\n                                <li class=\"py-1 m-0\" [class.pt-0]=\"first\" *ngFor=\"let subLink of link.children;let first = first\" style=\"padding-left:3rem;\">\r\n                                    <a class=\"w-100 d-block\" href=\"{{subLink.url}}?lang={{trans.currentLang}}\">\r\n                                        {{subLink.transId|translate}}\r\n                                    </a>\r\n                                </li>\r\n                            </ul>\r\n                        </li>\r\n                        <li class=\"mb-1 list-group-item p-0 rounded mt-2\">\r\n                            <a class=\"d-flex align-items-center flex-grow-1 p-2\" [href]=\"navigation?.artportalenUrl\">\r\n                                <small class=\"fa-stack me-1\">\r\n                                    <span class=\"fas fa-circle fa-stack-2x text-primary\"></span>\r\n                                    <span class=\"fas fa-stack-1x fa-inverse fa-binoculars\"></span>\r\n                                </small>\r\n                                {{'ADB_HEADER.ARTPORTALEN_TITLE'|translate}}\r\n                            </a>\r\n                        </li>\r\n                    </ul>\r\n                    <div *ngIf=\"navigation?.about\" class=\"mt-2 mb-auto\">\r\n                        <div class=\"mb-1\">{{'ADB_HEADER.CONTACT'|translate}}</div>\r\n                        <div class=\"mb-1 row\">\r\n                            <div class=\"col-sm-6 mb-2\">\r\n                                <div class=\"bg-white p-2 rounded\">\r\n                                    <small class=\"fa-stack\" *ngIf=\"navigation.about.icon\">\r\n                                        <span class=\"fas fa-circle fa-stack-2x text-primary\"></span>\r\n                                        <span class=\"fas fa-stack-1x fa-inverse fa-envelope\"></span>\r\n                                    </small>\r\n                                    <a class=\"bg-white p-2\" href=\"mailto:artfakta@artdatabanken.se\">artfakta@artdatabanken.se</a>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-sm-6 mb-2\">\r\n                                <div class=\"bg-white p-2 rounded\">\r\n                                    <small class=\"fa-stack\" *ngIf=\"navigation.about.icon\">\r\n                                        <span class=\"fas fa-circle fa-stack-2x text-primary\"></span>\r\n                                        <span class=\"fas fa-stack-1x fa-inverse\" [ngClass]=\"navigation.about.icon\"></span>\r\n                                    </small>\r\n                                    <a [href]=\"navigation.about.url\">{{navigation.about.transId|translate}}</a>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div style=\"height:10rem\"></div>\r\n                    <div class=\"mb-3\">\r\n                        {{'ADB_HEADER.DEVELOPED_BY'|translate}}\r\n                        <a href=\"https://www.artdatabanken.se/\" class=\"text-white\"><u>{{'ADB_HEADER.ARTDATABANKEN'|translate}}</u></a>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</header>" }]
+            args: [{ selector: 'adb-header', template: "<header id=\"top-header\" (clickOutside)=\"showUserMenu=false;showMenuDropdown(false);\">\r\n    <nav class=\"d-flex flex-wrap px-3\">\r\n        <div class=\"flex-grow-1 d-flex align-items-center justify-content-between justify-content-md-start\">\r\n            <div class=\"logo d-none d-md-block\">\r\n                <a href=\"https://www.artdatabanken.se/\" target=\"new\"><img src=\"/assets/images/logo.svg\" style=\"height: 3.2rem;\"></a>\r\n            </div>\r\n            <div class=\"logo ps-2 d-sm-block d-md-none d-flex align-items-center\">\r\n                <img src=\"/assets/images/logo_sm_white.png\" style=\"height: 2rem;\">\r\n            </div>\r\n            <span *ngIf=\"('ADB_HEADER.TITLE'|translate)==='Artfakta'\" class=\"d-none d-md-block\"><a href=\"https://artfakta.se/artbestamning\" class=\"text-decoration-none\"><strong class=\"bigger\">{{'ADB_HEADER.TITLE'|translate}}</strong></a></span>\r\n            <span *ngIf=\"('ADB_HEADER.TITLE'|translate)==='Artfakta'\" class=\"d-sm-block d-md-none\"><strong class=\"bigger\">{{'ADB_HEADER.TITLE'|translate}}</strong></span>\r\n            <span *ngIf=\"('ADB_HEADER.TITLE'|translate)!=='Artfakta'\"><strong class=\"bigger\">{{'ADB_HEADER.TITLE'|translate}}</strong></span>\r\n        </div>\r\n        <div *ngIf=\"translationFinished\" class=\"flex-grow-1 d-flex justify-content-lg-between justify-content-end align-items-center\">\r\n            <div *ngIf=\"navigation\" class=\"d-flex align-items-center\">\r\n                <nav class=\"d-none align-items-center d-lg-flex pe-4 gap-4\" *ngIf=\"navigation\">\r\n                    <ng-container *ngFor=\"let link of navigation.links\">\r\n                        <a href=\"{{link.url}}?lang={{trans.currentLang}}\" *ngIf=\"link.topLink\" [ngClass]=\"{'d-none d-xl-block':link.transId==='ADB_HEADER.OBSERVATION'}\">\r\n                            {{link.transId|translate}}\r\n                        </a>\r\n                    </ng-container>\r\n                </nav>\r\n                <div>\r\n                    <button type=\"button\" class=\"btn btn-sm py-1 px-2 btn-primary\" (click)=\"showUserMenu = false;showMenuDropdown(!showMenu)\">\r\n                        {{'ADB_HEADER.MENY'|translate}}\r\n                        <i class=\"ms-1 fas\" [ngClass]=\"showMenu?'fa-chevron-up':'fa-chevron-down'\"></i>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-none d-md-block ps-4\">\r\n                <button *ngIf=\"initials\" type=\"button\" class=\"btn initials\" (click)=\"showUserMenu = !showUserMenu;showMenuDropdown(false)\">{{initials}}</button>\r\n                <button *ngIf=\"!initials\" type=\"button\" (click)=\"showUserMenu = !showUserMenu;showMenuDropdown(false)\" class=\"btn btn-link\">\r\n                    {{'ADB_HEADER.LOGIN'|translate}}\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </nav>\r\n    <div class=\"menu\" *ngIf=\"showUserMenu\">\r\n        <div class=\"menu-body bg-white p-3\" style=\"width:15rem\">\r\n            <ng-container *ngIf=\"initials\">\r\n                <div class=\"d-flex align-items-center gap-2 text-dark\">\r\n                    <span class=\"initials\">{{initials}}</span>\r\n                    <strong>{{fullName}}</strong>\r\n                </div>\r\n                <hr class=\"mx-n3 text-muted\">\r\n                <button (click)=\"logout()\" type=\"button\" class=\"btn btn-link p-0\">\r\n                    <i class=\"fas fa-sign-out-alt me-1\"></i>{{'ADB_HEADER.LOGOUT'|translate}}\r\n                </button>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!initials\">\r\n                <div class=\"d-flex justify-content-center\">\r\n                    <button type=\"button\" class=\"btn btn-primary\" (click)=\"login()\" id=\"start-login\">{{'ADB_HEADER.LOGIN'|translate}}</button>\r\n                </div>\r\n                <a *ngIf=\"navigation\" class=\"d-block mt-3\" href=\"{{navigation.createAccountLink}}?lang={{trans.currentLang}}&returnUrl={{url}}\">\r\n                    {{'ADB_HEADER.CREATE_USER'|translate}}\r\n                </a>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"menu\" *ngIf=\"showMenu\">\r\n        <div class=\"menu-body\" *ngIf=\"navigation\">\r\n            <div class=\"px-3 pt-3 mb-1\">\r\n                <div class=\"d-flex justify-content-between flex-wrap gap-2 mb-2\">\r\n                    <div>\r\n                        <div class=\"d-flex d-md-none align-items-center gap-2\" *ngIf=\"initials\">\r\n                            <span class=\"initials me-2\">{{initials}}</span>\r\n                            <button type=\"button\" (click)=\"logout()\" class=\"btn btn-primary\">\r\n                                {{'ADB_HEADER.LOGOUT'|translate}}\r\n                            </button>\r\n                        </div>\r\n                        <div class=\"d-flex gap-2 d-md-none\" *ngIf=\"!initials\">\r\n                            <button type=\"button\" (click)=\"login()\" class=\"btn btn-primary\" id=\"login\">\r\n                                {{'ADB_HEADER.LOGIN'|translate}}\r\n                            </button>\r\n                            <a href=\"{{navigation.createAccountLink}}?lang={{trans.currentLang}}&returnUrl={{url}}\"\r\n                               class=\"btn btn-primary text-white\">\r\n                                {{'ADB_HEADER.CREATE_USER'|translate}}\r\n                            </a>\r\n                        </div>\r\n                    </div>\r\n                    <div>\r\n                        <button type=\"button\" *ngIf=\"trans.currentLang==='en'\" (click)=\"setLanguage('sv')\"\r\n                                class=\"btn btn-primary\">\r\n                            {{'ADB_HEADER.IN_SWEDISH'|translate}}\r\n                        </button>\r\n                        <button type=\"button\" *ngIf=\"trans.currentLang==='sv'\" (click)=\"setLanguage('en')\"\r\n                                class=\"btn btn-primary\">\r\n                            {{'ADB_HEADER.IN_ENGLISH'|translate}}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n                {{'ADB_HEADER.SERVICES'|translate}}\r\n            </div>\r\n            <div id=\"splash\">\r\n                <div class=\"px-3 d-flex flex-column\">\r\n                    <ul class=\"list-group ms-0 mb-0 ps-0\">\r\n                        <li class=\"mb-1 list-group-item p-0 rounded\" *ngFor=\"let link of navigation.links\"\r\n                            [attr.aria-expanded]=\"link.transId===expandedLink?true:false\" role=\"button\">\r\n                            <div class=\"d-flex align-items-center justify-content-between\">\r\n                                <a href=\"{{link.url}}?lang={{trans.currentLang}}\" class=\"d-flex align-items-center flex-grow-1 p-2\">\r\n                                    <small class=\"fa-stack me-1\" *ngIf=\"link.icon\">\r\n                                        <span class=\"fas fa-circle fa-stack-2x text-primary\"></span>\r\n                                        <span class=\"fas fa-stack-1x fa-inverse\" [ngClass]=\"link.icon\"></span>\r\n                                    </small>\r\n                                    {{link.transId|translate}}\r\n                                </a>\r\n                                <button class=\"btn btn-expand me-2\" *ngIf=\"link.children?.length>0\" (click)=\"onExpandLink($event,link.transId)\">\r\n                                    <i class=\"fas fa-chevron-up\" [ngClass]=\"link.transId===expandedLink?'d-block ':'d-none'\"></i>\r\n                                    <i class=\"fas fa-chevron-down\" [ngClass]=\"link.transId!==expandedLink?'d-block ':'d-none'\"></i>\r\n                                </button>\r\n                            </div>\r\n                            <ul class=\"list-unstyled\" [ngClass]=\"link.transId===expandedLink?'d-block':'d-none'\">\r\n                                <li class=\"py-1 m-0\" [class.pt-0]=\"first\" *ngFor=\"let subLink of link.children;let first = first\" style=\"padding-left:3rem;\">\r\n                                    <a class=\"w-100 d-block\" href=\"{{subLink.url}}?lang={{trans.currentLang}}\">\r\n                                        {{subLink.transId|translate}}\r\n                                    </a>\r\n                                </li>\r\n                            </ul>\r\n                        </li>\r\n                    </ul>\r\n                    <div *ngIf=\"navigation.about\" class=\"mt-2 mb-auto\">\r\n                        <div class=\"mb-1\">{{'ADB_HEADER.CONTACT'|translate}}</div>\r\n                        <div class=\"mb-1 row\">\r\n                            <div class=\"col-sm-6 mb-2\">\r\n                                <div class=\"bg-white p-2 rounded\">\r\n                                    <small class=\"fa-stack\" *ngIf=\"navigation.about.icon\">\r\n                                        <span class=\"fas fa-circle fa-stack-2x text-primary\"></span>\r\n                                        <span class=\"fas fa-stack-1x fa-inverse fa-envelope\"></span>\r\n                                    </small>\r\n                                    <a class=\"bg-white p-2\" href=\"mailto:artfakta@artdatabanken.se\">artfakta@artdatabanken.se</a>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-sm-6 mb-2\">\r\n                                <div class=\"bg-white p-2 rounded\">\r\n                                    <small class=\"fa-stack\" *ngIf=\"navigation.about.icon\">\r\n                                        <span class=\"fas fa-circle fa-stack-2x text-primary\"></span>\r\n                                        <span class=\"fas fa-stack-1x fa-inverse\" [ngClass]=\"navigation.about.icon\"></span>\r\n                                    </small>\r\n                                    <a [href]=\"navigation.about.url\">{{navigation.about.transId|translate}}</a>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div style=\"height:10rem\"></div>\r\n                    <div class=\"mb-3\">\r\n                        {{'ADB_HEADER.DEVELOPED_BY'|translate}}\r\n                        <a href=\"https://www.artdatabanken.se/\" class=\"text-white\"><u>{{'ADB_HEADER.ARTDATABANKEN'|translate}}</u></a>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</header>\r\n" }]
         }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: EnvironmentService }, { type: i1$1.TranslateService }]; }, propDecorators: { loginClicked: [{
                 type: Output
             }], logoutClicked: [{
@@ -153,6 +127,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 type: Input
             }] } });
 
+class ClickOutsideDirective {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.adbClickOutside = new EventEmitter();
+    }
+    onClick(target) {
+        const clickedInside = this.elementRef.nativeElement.contains(target);
+        if (!clickedInside) {
+            this.adbClickOutside.emit(target);
+        }
+    }
+}
+/** @nocollapse */ ClickOutsideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ ClickOutsideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: ClickOutsideDirective, selector: "[adbClickOutside]", outputs: { adbClickOutside: "adbClickOutside" }, host: { listeners: { "document:click": "onClick($event.target)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[adbClickOutside]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { adbClickOutside: [{
+                type: Output
+            }], onClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event.target']]
+            }] } });
+
 class FileUploadDirective {
     constructor(el) {
         this.el = el;
@@ -356,6 +356,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 args: ['document:click', ['$event.target']]
             }] } });
 
+class InfiniteScrollComponent {
+    constructor(_element) {
+        this._element = _element;
+        this.onVisible = new EventEmitter();
+        this.onHidden = new EventEmitter();
+        this.height = '1px';
+        this.checkForIntersection = (entries) => {
+            entries.forEach((entry) => {
+                const isIntersecting = entry.isIntersecting &&
+                    entry.target === this._element.nativeElement;
+                if (isIntersecting) {
+                    this.onVisible.emit();
+                }
+                else {
+                    this.onHidden.emit();
+                }
+            });
+        };
+    }
+    ngAfterViewInit() {
+        this._intersectionObserver = new IntersectionObserver(entries => {
+            this.checkForIntersection(entries);
+        }, {});
+        this._intersectionObserver.observe(this._element.nativeElement);
+    }
+    ngOnDestroy() {
+        if (this._intersectionObserver) {
+            this._intersectionObserver.disconnect();
+        }
+    }
+}
+/** @nocollapse */ InfiniteScrollComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: InfiniteScrollComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ InfiniteScrollComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: InfiniteScrollComponent, selector: "[onVisible]", outputs: { onVisible: "onVisible", onHidden: "onHidden" }, host: { properties: { "style.height": "this.height" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: InfiniteScrollComponent, decorators: [{
+            type: Directive,
+            args: [{ selector: "[onVisible]" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onVisible: [{
+                type: Output
+            }], onHidden: [{
+                type: Output
+            }], height: [{
+                type: HostBinding,
+                args: ['style.height']
+            }] } });
+
 class ADBNavComponent {
     constructor(httpClient, trans) {
         this.httpClient = httpClient;
@@ -366,6 +411,7 @@ class ADBNavComponent {
         this.dropMenuChange = new EventEmitter();
         this.showPattern = false;
         this.translationFinished = false;
+        this.lastPosition = 0;
         this.artfakta = true;
         this.showMenu = false;
         this.showUserMenu = false;
@@ -390,6 +436,9 @@ class ADBNavComponent {
         }));
         this.initTranslations(baseUrl);
     }
+    onHideTop(show) {
+        this.shrink = show;
+    }
     initTranslations(baseUrl) {
         if (this.trans.store.translations[this.trans.currentLang]) {
             this.loadTranslation(baseUrl, this.trans.currentLang);
@@ -438,10 +487,10 @@ class ADBNavComponent {
     }
 }
 /** @nocollapse */ ADBNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ADBNavComponent, deps: [{ token: i1.HttpClient }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ ADBNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: ADBNavComponent, selector: "adb-nav", inputs: { showPattern: "showPattern", userName: "userName", artfakta: "artfakta" }, outputs: { loginClicked: "loginClicked", logoutClicked: "logoutClicked", dropMenuChange: "dropMenuChange" }, ngImport: i0, template: "<header class=\"bg-primary\" [attr.id]=\"showPattern?'pattern':''\" (adbClickOutside)=\"showUserMenu=false;showMenuDropdown(false);\">\r\n    <nav class=\"d-flex flex-wrap align-items-center p-2 gap-2\">\r\n        <div class=\"me-5\">\r\n            <a href=\"https://www.artdatabanken.se/\" target=\"new\"><img src=\"/assets/images/logo_sm_white.png\" style=\"height: 2rem;\"></a>\r\n        </div>\r\n        <ng-container *ngIf=\"translationFinished\">\r\n            <nav class=\"flex-grow-1 d-lg-flex align-items-center pe-4 gap-4\" *ngIf=\"navigation\">\r\n                <a class=\"text-white fs-5 me-3\" href=\"{{navigation.artfakta.url}}\">\r\n                    {{navigation.artfakta.transId|translate}}\r\n                </a>\r\n                <a class=\"text-white d-none d-lg-block\" href=\"{{navigation.artinfo.url}}\">\r\n                    {{navigation.artinfo.transId|translate}}\r\n                </a>\r\n                <a class=\"text-white d-none d-lg-block\" href=\"{{navigation.observations.url}}?lang={{trans.currentLang}}\">\r\n                    {{navigation.observations.transId|translate}}\r\n                </a>\r\n                <a class=\"text-white d-none d-lg-block\" href=\"{{navigation.nameAndRelationship.url}}?lang={{trans.currentLang}}\">\r\n                    {{navigation.nameAndRelationship.transId|translate}}\r\n                </a>\r\n                <a class=\"ms-auto text-white d-none d-lg-block\" [href]=\"navigation.artportalenUrl\">\r\n                    {{'ADB_HEADER.ARTPORTALEN_TITLE'|translate}}\r\n                </a>\r\n                <a class=\"text-white d-none d-lg-block\" [href]=\"navigation.supportUrl\">Support</a>\r\n            </nav>\r\n            <div class=\"ms-auto\">\r\n                <div class=\"d-flex gap-2\">\r\n                    <div class=\"btn-group no-caret\">\r\n                        <button adbDropdown class=\"btn btn-primary btn-sm dropdown-toggle\"><span class=\"far fa-globe\"></span></button>\r\n                        <ul class=\"dropdown-menu dropdown-menu-end py-1 bg-primary\">\r\n                            <li>\r\n                                <button type=\"button\" [class.pe-none]=\"trans.currentLang==='sv'\" (click)=\"setLanguage('sv')\" class=\"btn btn-link py-0 px-2 text-white\">\r\n                                    <span [class.fw-bold]=\"trans.currentLang==='sv'\">{{'ADB_HEADER.IN_SWEDISH'|translate}}</span>\r\n                                </button>\r\n                            </li>\r\n                            <div class=\"dropdown-divider my-1 opacity-25 bg-white\"></div>\r\n                            <li>\r\n                                <button type=\"button\" [class.pe-none]=\"trans.currentLang==='en'\" (click)=\"setLanguage('en')\" class=\"btn btn-link py-0 px-2 text-white\">\r\n                                    <span [class.fw-bold]=\"trans.currentLang==='en'\">{{'ADB_HEADER.IN_ENGLISH'|translate}}</span>\r\n                                </button>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                    <div class=\"btn-group no-caret d-none d-lg-block\">\r\n                        <button type=\"button\" adbDropdown class=\"btn btn-primary btn-sm dropdown-toggle\" [class.initials]=\"initials\" (click)=\"showMenuDropdown(!showMenu)\">\r\n                            <ng-container *ngIf=\"initials\">{{initials}}</ng-container>\r\n                            <ng-container *ngIf=\"!initials\">{{'ADB_HEADER.LOGIN'|translate}}</ng-container>\r\n                        </button>\r\n                        <ul class=\"dropdown-menu dropdown-menu-end py-1 bg-primary text-white\">\r\n                            <ng-container *ngIf=\"initials\">\r\n                                <li class=\"px-2 pb-1\">\r\n                                    <button (click)=\"logout()\" type=\"button\" class=\"btn btn-link p-0 text-white\">\r\n                                        <span class=\"fas fa-sign-out-alt me-1\"></span>{{'ADB_HEADER.LOGOUT'|translate}}\r\n                                    </button>\r\n                                </li>\r\n                                <hr class=\"my-0\">\r\n                                <li class=\"pt-1 px-2\">\r\n                                    <span class=\"fas fa-user me-1\"></span>\r\n                                    {{fullName}}\r\n                                </li>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"!initials\">\r\n                                <li>\r\n                                    <div class=\"text-center \">\r\n                                        <button type=\"button\" class=\"btn btn-primary\" (click)=\"login()\" id=\"start-login\">{{'ADB_HEADER.LOGIN'|translate}}</button>\r\n                                    </div>\r\n                                </li>\r\n                                <li>\r\n                                    <a *ngIf=\"navigation\" class=\"d-block text-center mt-2 text-white\" href=\"{{navigation.createAccountLink}}?lang={{trans.currentLang}}&returnUrl={{url}}\">\r\n                                        {{'ADB_HEADER.CREATE_USER'|translate}}\r\n                                    </a>\r\n                                </li>\r\n                            </ng-container>\r\n                        </ul>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-block d-lg-none\">\r\n                <button type=\"button\" class=\"btn btn-sm py-1 px-2 btn-primary\" (click)=\"showUserMenu = false;showMenuDropdown(!showMenu)\">\r\n                    {{'ADB_HEADER.MENY'|translate}}\r\n                    <i class=\"ms-1 fas\" [ngClass]=\"showMenu?'fa-chevron-up':'fa-chevron-down'\"></i>\r\n                </button>\r\n            </div>\r\n        </ng-container>\r\n    </nav>\r\n    <div class=\"mobile-menu d-flex flex-column d-lg-none bg-primary text-white\" *ngIf=\"showMenu&&navigation\">\r\n        <div class=\"p-2\">\r\n            <div class=\"d-flex justify-content-between align-items-center gap-2\" *ngIf=\"initials\">\r\n                <span class=\"initials me-2\">{{initials}}</span>\r\n                <button type=\"button\" (click)=\"logout()\" class=\"btn btn-primary\">\r\n                    {{'ADB_HEADER.LOGOUT'|translate}}\r\n                </button>\r\n            </div>\r\n            <div class=\"d-flex justify-content-between gap-2\" *ngIf=\"!initials\">\r\n                <button type=\"button\" (click)=\"login()\" class=\"btn btn-primary\" id=\"login\">\r\n                    {{'ADB_HEADER.LOGIN'|translate}}\r\n                </button>\r\n                <a href=\"{{navigation.createAccountLink}}?lang={{trans.currentLang}}&returnUrl={{url}}\"\r\n                    class=\"btn btn-primary text-white\">\r\n                    {{'ADB_HEADER.CREATE_USER'|translate}}\r\n                </a>\r\n            </div>\r\n        </div>\r\n        <div class=\"px-2\">\r\n            <hr class=\"my-0\">\r\n            <ul class=\"list-unstyled\">\r\n                <li>\r\n                    <a class=\"d-block py-1 text-white\" href=\"{{navigation.artinfo.url}}\">\r\n                        {{navigation.artinfo.transId|translate}}\r\n                    </a>\r\n                    <hr class=\"my-0\">\r\n                </li>\r\n                <li>\r\n                    <a class=\"d-block py-1 text-white\" href=\"{{navigation.observations.url}}?lang={{trans.currentLang}}\">\r\n                        {{navigation.observations.transId|translate}}\r\n                    </a>\r\n                    <hr class=\"my-0\">\r\n                </li>\r\n                <li>\r\n                    <a class=\"d-block py-1 text-white\" href=\"{{navigation.nameAndRelationship.url}}?lang={{trans.currentLang}}\">\r\n                        {{navigation.nameAndRelationship.transId|translate}}\r\n                    </a>\r\n                    <hr class=\"my-0\">\r\n                </li>\r\n                <li>\r\n                    <a class=\"d-block py-1 text-white\" [href]=\"navigation.about.url\">{{navigation.about.transId|translate}}</a>\r\n                    <hr class=\"my-0\">\r\n                </li>\r\n                <li>\r\n                    <a class=\"d-block py-1 text-white\" [href]=\"navigation.artportalenUrl\">\r\n                        {{'ADB_HEADER.ARTPORTALEN_TITLE'|translate}}\r\n                    </a>\r\n                    <hr class=\"my-0\">\r\n                </li>\r\n                <li>\r\n                    <small class=\"d-block text-white py-2\">\r\n                        {{'ADB_HEADER.DEVELOPED_BY'|translate}}\r\n                        <a href=\"https://www.artdatabanken.se/\" class=\"text-white\"><u>{{'ADB_HEADER.ARTDATABANKEN'|translate}}</u></a>\r\n                    </small>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n        <div class=\"mt-auto splash-height\" id=\"pattern\"></div>\r\n    </div>\r\n</header>", directives: [{ type: ClickOutsideDirective, selector: "[adbClickOutside]", outputs: ["adbClickOutside"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: AdbDropdownDirective, selector: "[adbDropdown]", inputs: ["insideClick"], outputs: ["adbDropdown"], exportAs: ["adbDropdown"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i1$1.TranslatePipe } });
+/** @nocollapse */ ADBNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: ADBNavComponent, selector: "adb-nav", inputs: { showPattern: "showPattern", userName: "userName", artfakta: "artfakta" }, outputs: { loginClicked: "loginClicked", logoutClicked: "logoutClicked", dropMenuChange: "dropMenuChange" }, ngImport: i0, template: "<!-- position-static -->\r\n<div class=\"bg-primary sticky-sm-top p-2\" [attr.id]=\"showPattern&&!showMenu?'pattern':''\" [class.shrink]=\"shrink\" (adbClickOutside)=\"showUserMenu=false;showMenuDropdown(false);\">\r\n    <header id=\"extra-header\">\r\n        <div class=\"d-flex flex-wrap gap-2\">\r\n            <nav class=\"d-flex gap-2\">\r\n                <div class=\"me-5\" style=\"display: block;margin-top: -0.4rem;\">\r\n                    <a href=\"https://www.artdatabanken.se/\" target=\"new\"><img src=\"/assets/images/logo.svg\" style=\"height: 2.5rem;\"></a>\r\n                </div>\r\n                <a class=\"text-white fw-bold fs-3\" href=\"/\">ARTFAKTA</a>\r\n            </nav>\r\n            <ng-container *ngIf=\"translationFinished\">\r\n                <div class=\"ms-auto d-flex gap-2\">\r\n                    <div class=\"btn-group d-block no-caret\">\r\n                        <button adbDropdown class=\"px-1 py-0 btn btn-primary btn-sm dropdown-toggle\"><span class=\"far fa-globe\"></span></button>\r\n                        <ul class=\"dropdown-menu dropdown-menu-end py-1 bg-primary\">\r\n                            <li>\r\n                                <button type=\"button\" [class.pe-none]=\"trans.currentLang==='sv'\" (click)=\"setLanguage('sv')\" class=\"btn btn-link py-0 px-2 text-white\">\r\n                                    <span [class.fw-bold]=\"trans.currentLang==='sv'\">{{'ADB_HEADER.IN_SWEDISH'|translate}}</span>\r\n                                </button>\r\n                            </li>\r\n                            <div class=\"dropdown-divider my-1 opacity-25 bg-white\"></div>\r\n                            <li>\r\n                                <button type=\"button\" [class.pe-none]=\"trans.currentLang==='en'\" (click)=\"setLanguage('en')\" class=\"btn btn-link py-0 px-2 text-white\">\r\n                                    <span [class.fw-bold]=\"trans.currentLang==='en'\">{{'ADB_HEADER.IN_ENGLISH'|translate}}</span>\r\n                                </button>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                    <a class=\"ms-auto text-white d-none d-md-block\" [href]=\"navigation.artportalenUrl\">\r\n                        {{'ADB_HEADER.ARTPORTALEN_TITLE'|translate}}\r\n                    </a>\r\n                    <a class=\"text-white d-none d-md-block\" [href]=\"navigation.supportUrl\">Support</a>\r\n\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </header>\r\n    <header class=\"d-flex align-items-center flex-wrap gap-2\" *ngIf=\"translationFinished\">\r\n        <nav *ngIf=\"navigation\" class=\"d-flex align-items-center gap-2\">\r\n            <a href=\"https://www.artdatabanken.se/\" class=\"home-link\" target=\"new\" style=\"margin-top: -0.4rem;\"><img src=\"/assets/images/logo_sm_white.png\" style=\"height: 1.6rem;\"></a>\r\n            <a class=\"text-white fw-bold me-3 home-link\" href=\"{{navigation.artfakta.url}}\">\r\n                {{navigation.artfakta.transId|translate}}\r\n            </a>\r\n            <a class=\"text-white d-none d-md-block\" href=\"{{navigation.artinfo.url}}\">\r\n                {{navigation.artinfo.transId|translate}}\r\n            </a>\r\n            <a class=\"text-white d-none d-md-block\" href=\"{{navigation.observations.url}}?lang={{trans.currentLang}}\">\r\n                {{navigation.observations.transId|translate}}\r\n            </a>\r\n            <a class=\"text-white d-none d-md-block\" href=\"{{navigation.nameAndRelationship.url}}?lang={{trans.currentLang}}\">\r\n                {{navigation.nameAndRelationship.transId|translate}}\r\n            </a>\r\n        </nav>\r\n        <div class=\"ms-auto\">\r\n            <div class=\"btn-group no-caret d-none d-md-block\">\r\n                <button type=\"button\" adbDropdown class=\"btn btn-primary btn-sm dropdown-toggle\" [class.initials]=\"initials\" (click)=\"showMenuDropdown(!showMenu)\">\r\n                    <ng-container *ngIf=\"initials\">{{initials}}</ng-container>\r\n                    <ng-container *ngIf=\"!initials\">{{'ADB_HEADER.LOGIN'|translate}}</ng-container>\r\n                </button>\r\n                <ul class=\"dropdown-menu dropdown-menu-end py-1 bg-primary text-white\">\r\n                    <ng-container *ngIf=\"initials\">\r\n                        <li class=\"px-2 pb-1\">\r\n                            <button (click)=\"logout()\" type=\"button\" class=\"btn btn-link p-0 text-white\">\r\n                                <span class=\"fas fa-sign-out-alt me-1\"></span>{{'ADB_HEADER.LOGOUT'|translate}}\r\n                            </button>\r\n                        </li>\r\n                        <hr class=\"my-0\">\r\n                        <li class=\"pt-1 px-2\">\r\n                            <span class=\"fas fa-user me-1\"></span>\r\n                            {{fullName}}\r\n                        </li>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"!initials\">\r\n                        <li>\r\n                            <div class=\"text-center \">\r\n                                <button type=\"button\" class=\"btn btn-primary\" (click)=\"login()\" id=\"start-login\">{{'ADB_HEADER.LOGIN'|translate}}</button>\r\n                            </div>\r\n                        </li>\r\n                        <li>\r\n                            <a *ngIf=\"navigation\" class=\"d-block text-center mt-2 text-white\" href=\"{{navigation.createAccountLink}}?lang={{trans.currentLang}}&returnUrl={{url}}\">\r\n                                {{'ADB_HEADER.CREATE_USER'|translate}}\r\n                            </a>\r\n                        </li>\r\n                    </ng-container>\r\n                </ul>\r\n            </div>\r\n            <div class=\"d-block d-md-none\">\r\n                <button type=\"button\" class=\"btn btn-sm py-1 px-2 btn-primary\" (click)=\"showUserMenu = false;showMenuDropdown(!showMenu)\">\r\n                    {{'ADB_HEADER.MENY'|translate}}\r\n                    <i class=\"ms-1 fas\" [ngClass]=\"showMenu?'fa-chevron-up':'fa-chevron-down'\"></i>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </header>\r\n    <div class=\"mobile-menu d-flex flex-column d-md-none bg-primary text-white\" *ngIf=\"showMenu&&navigation\">\r\n        <div class=\"p-2\">\r\n            <div class=\"d-flex justify-content-between align-items-center gap-2\" *ngIf=\"initials\">\r\n                <span class=\"initials me-2\">{{initials}}</span>\r\n                <button type=\"button\" (click)=\"logout()\" class=\"btn btn-primary\">\r\n                    {{'ADB_HEADER.LOGOUT'|translate}}\r\n                </button>\r\n            </div>\r\n            <div class=\"d-flex justify-content-between gap-2\" *ngIf=\"!initials\">\r\n                <button type=\"button\" (click)=\"login()\" class=\"btn btn-primary\" id=\"login\">\r\n                    {{'ADB_HEADER.LOGIN'|translate}}\r\n                </button>\r\n                <a href=\"{{navigation.createAccountLink}}?lang={{trans.currentLang}}&returnUrl={{url}}\"\r\n                    class=\"btn btn-primary text-white\">\r\n                    {{'ADB_HEADER.CREATE_USER'|translate}}\r\n                </a>\r\n            </div>\r\n        </div>\r\n        <div class=\"px-2\">\r\n            <hr class=\"my-0\">\r\n            <ul class=\"list-unstyled\">\r\n                <li>\r\n                    <a class=\"d-block py-1 text-white\" href=\"{{navigation.artinfo.url}}\">\r\n                        {{navigation.artinfo.transId|translate}}\r\n                    </a>\r\n                    <hr class=\"my-0\">\r\n                </li>\r\n                <li>\r\n                    <a class=\"d-block py-1 text-white\" href=\"{{navigation.observations.url}}?lang={{trans.currentLang}}\">\r\n                        {{navigation.observations.transId|translate}}\r\n                    </a>\r\n                    <hr class=\"my-0\">\r\n                </li>\r\n                <li>\r\n                    <a class=\"d-block py-1 text-white\" href=\"{{navigation.nameAndRelationship.url}}?lang={{trans.currentLang}}\">\r\n                        {{navigation.nameAndRelationship.transId|translate}}\r\n                    </a>\r\n                    <hr class=\"my-0\">\r\n                </li>\r\n                <li>\r\n                    <a class=\"d-block py-1 text-white\" [href]=\"navigation.about.url\">{{navigation.about.transId|translate}}</a>\r\n                    <hr class=\"my-0\">\r\n                </li>\r\n                <li>\r\n                    <a class=\"d-block py-1 text-white\" [href]=\"navigation.artportalenUrl\">\r\n                        {{'ADB_HEADER.ARTPORTALEN_TITLE'|translate}}\r\n                    </a>\r\n                    <hr class=\"my-0\">\r\n                </li>\r\n                <li>\r\n                    <small class=\"d-block text-white py-2\">\r\n                        {{'ADB_HEADER.DEVELOPED_BY'|translate}}\r\n                        <a href=\"https://www.artdatabanken.se/\" class=\"text-white\"><u>{{'ADB_HEADER.ARTDATABANKEN'|translate}}</u></a>\r\n                    </small>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n        <div class=\"mt-auto splash-height\" id=\"pattern\"></div>\r\n    </div>\r\n</div>\r\n<div (onVisible)=\"onHideTop(false)\" (onHidden)=\"onHideTop(true)\"></div>", directives: [{ type: ClickOutsideDirective, selector: "[adbClickOutside]", outputs: ["adbClickOutside"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: AdbDropdownDirective, selector: "[adbDropdown]", inputs: ["insideClick"], outputs: ["adbDropdown"], exportAs: ["adbDropdown"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: InfiniteScrollComponent, selector: "[onVisible]", outputs: ["onVisible", "onHidden"] }], pipes: { "translate": i1$1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ADBNavComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'adb-nav', template: "<header class=\"bg-primary\" [attr.id]=\"showPattern?'pattern':''\" (adbClickOutside)=\"showUserMenu=false;showMenuDropdown(false);\">\r\n    <nav class=\"d-flex flex-wrap align-items-center p-2 gap-2\">\r\n        <div class=\"me-5\">\r\n            <a href=\"https://www.artdatabanken.se/\" target=\"new\"><img src=\"/assets/images/logo_sm_white.png\" style=\"height: 2rem;\"></a>\r\n        </div>\r\n        <ng-container *ngIf=\"translationFinished\">\r\n            <nav class=\"flex-grow-1 d-lg-flex align-items-center pe-4 gap-4\" *ngIf=\"navigation\">\r\n                <a class=\"text-white fs-5 me-3\" href=\"{{navigation.artfakta.url}}\">\r\n                    {{navigation.artfakta.transId|translate}}\r\n                </a>\r\n                <a class=\"text-white d-none d-lg-block\" href=\"{{navigation.artinfo.url}}\">\r\n                    {{navigation.artinfo.transId|translate}}\r\n                </a>\r\n                <a class=\"text-white d-none d-lg-block\" href=\"{{navigation.observations.url}}?lang={{trans.currentLang}}\">\r\n                    {{navigation.observations.transId|translate}}\r\n                </a>\r\n                <a class=\"text-white d-none d-lg-block\" href=\"{{navigation.nameAndRelationship.url}}?lang={{trans.currentLang}}\">\r\n                    {{navigation.nameAndRelationship.transId|translate}}\r\n                </a>\r\n                <a class=\"ms-auto text-white d-none d-lg-block\" [href]=\"navigation.artportalenUrl\">\r\n                    {{'ADB_HEADER.ARTPORTALEN_TITLE'|translate}}\r\n                </a>\r\n                <a class=\"text-white d-none d-lg-block\" [href]=\"navigation.supportUrl\">Support</a>\r\n            </nav>\r\n            <div class=\"ms-auto\">\r\n                <div class=\"d-flex gap-2\">\r\n                    <div class=\"btn-group no-caret\">\r\n                        <button adbDropdown class=\"btn btn-primary btn-sm dropdown-toggle\"><span class=\"far fa-globe\"></span></button>\r\n                        <ul class=\"dropdown-menu dropdown-menu-end py-1 bg-primary\">\r\n                            <li>\r\n                                <button type=\"button\" [class.pe-none]=\"trans.currentLang==='sv'\" (click)=\"setLanguage('sv')\" class=\"btn btn-link py-0 px-2 text-white\">\r\n                                    <span [class.fw-bold]=\"trans.currentLang==='sv'\">{{'ADB_HEADER.IN_SWEDISH'|translate}}</span>\r\n                                </button>\r\n                            </li>\r\n                            <div class=\"dropdown-divider my-1 opacity-25 bg-white\"></div>\r\n                            <li>\r\n                                <button type=\"button\" [class.pe-none]=\"trans.currentLang==='en'\" (click)=\"setLanguage('en')\" class=\"btn btn-link py-0 px-2 text-white\">\r\n                                    <span [class.fw-bold]=\"trans.currentLang==='en'\">{{'ADB_HEADER.IN_ENGLISH'|translate}}</span>\r\n                                </button>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                    <div class=\"btn-group no-caret d-none d-lg-block\">\r\n                        <button type=\"button\" adbDropdown class=\"btn btn-primary btn-sm dropdown-toggle\" [class.initials]=\"initials\" (click)=\"showMenuDropdown(!showMenu)\">\r\n                            <ng-container *ngIf=\"initials\">{{initials}}</ng-container>\r\n                            <ng-container *ngIf=\"!initials\">{{'ADB_HEADER.LOGIN'|translate}}</ng-container>\r\n                        </button>\r\n                        <ul class=\"dropdown-menu dropdown-menu-end py-1 bg-primary text-white\">\r\n                            <ng-container *ngIf=\"initials\">\r\n                                <li class=\"px-2 pb-1\">\r\n                                    <button (click)=\"logout()\" type=\"button\" class=\"btn btn-link p-0 text-white\">\r\n                                        <span class=\"fas fa-sign-out-alt me-1\"></span>{{'ADB_HEADER.LOGOUT'|translate}}\r\n                                    </button>\r\n                                </li>\r\n                                <hr class=\"my-0\">\r\n                                <li class=\"pt-1 px-2\">\r\n                                    <span class=\"fas fa-user me-1\"></span>\r\n                                    {{fullName}}\r\n                                </li>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"!initials\">\r\n                                <li>\r\n                                    <div class=\"text-center \">\r\n                                        <button type=\"button\" class=\"btn btn-primary\" (click)=\"login()\" id=\"start-login\">{{'ADB_HEADER.LOGIN'|translate}}</button>\r\n                                    </div>\r\n                                </li>\r\n                                <li>\r\n                                    <a *ngIf=\"navigation\" class=\"d-block text-center mt-2 text-white\" href=\"{{navigation.createAccountLink}}?lang={{trans.currentLang}}&returnUrl={{url}}\">\r\n                                        {{'ADB_HEADER.CREATE_USER'|translate}}\r\n                                    </a>\r\n                                </li>\r\n                            </ng-container>\r\n                        </ul>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-block d-lg-none\">\r\n                <button type=\"button\" class=\"btn btn-sm py-1 px-2 btn-primary\" (click)=\"showUserMenu = false;showMenuDropdown(!showMenu)\">\r\n                    {{'ADB_HEADER.MENY'|translate}}\r\n                    <i class=\"ms-1 fas\" [ngClass]=\"showMenu?'fa-chevron-up':'fa-chevron-down'\"></i>\r\n                </button>\r\n            </div>\r\n        </ng-container>\r\n    </nav>\r\n    <div class=\"mobile-menu d-flex flex-column d-lg-none bg-primary text-white\" *ngIf=\"showMenu&&navigation\">\r\n        <div class=\"p-2\">\r\n            <div class=\"d-flex justify-content-between align-items-center gap-2\" *ngIf=\"initials\">\r\n                <span class=\"initials me-2\">{{initials}}</span>\r\n                <button type=\"button\" (click)=\"logout()\" class=\"btn btn-primary\">\r\n                    {{'ADB_HEADER.LOGOUT'|translate}}\r\n                </button>\r\n            </div>\r\n            <div class=\"d-flex justify-content-between gap-2\" *ngIf=\"!initials\">\r\n                <button type=\"button\" (click)=\"login()\" class=\"btn btn-primary\" id=\"login\">\r\n                    {{'ADB_HEADER.LOGIN'|translate}}\r\n                </button>\r\n                <a href=\"{{navigation.createAccountLink}}?lang={{trans.currentLang}}&returnUrl={{url}}\"\r\n                    class=\"btn btn-primary text-white\">\r\n                    {{'ADB_HEADER.CREATE_USER'|translate}}\r\n                </a>\r\n            </div>\r\n        </div>\r\n        <div class=\"px-2\">\r\n            <hr class=\"my-0\">\r\n            <ul class=\"list-unstyled\">\r\n                <li>\r\n                    <a class=\"d-block py-1 text-white\" href=\"{{navigation.artinfo.url}}\">\r\n                        {{navigation.artinfo.transId|translate}}\r\n                    </a>\r\n                    <hr class=\"my-0\">\r\n                </li>\r\n                <li>\r\n                    <a class=\"d-block py-1 text-white\" href=\"{{navigation.observations.url}}?lang={{trans.currentLang}}\">\r\n                        {{navigation.observations.transId|translate}}\r\n                    </a>\r\n                    <hr class=\"my-0\">\r\n                </li>\r\n                <li>\r\n                    <a class=\"d-block py-1 text-white\" href=\"{{navigation.nameAndRelationship.url}}?lang={{trans.currentLang}}\">\r\n                        {{navigation.nameAndRelationship.transId|translate}}\r\n                    </a>\r\n                    <hr class=\"my-0\">\r\n                </li>\r\n                <li>\r\n                    <a class=\"d-block py-1 text-white\" [href]=\"navigation.about.url\">{{navigation.about.transId|translate}}</a>\r\n                    <hr class=\"my-0\">\r\n                </li>\r\n                <li>\r\n                    <a class=\"d-block py-1 text-white\" [href]=\"navigation.artportalenUrl\">\r\n                        {{'ADB_HEADER.ARTPORTALEN_TITLE'|translate}}\r\n                    </a>\r\n                    <hr class=\"my-0\">\r\n                </li>\r\n                <li>\r\n                    <small class=\"d-block text-white py-2\">\r\n                        {{'ADB_HEADER.DEVELOPED_BY'|translate}}\r\n                        <a href=\"https://www.artdatabanken.se/\" class=\"text-white\"><u>{{'ADB_HEADER.ARTDATABANKEN'|translate}}</u></a>\r\n                    </small>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n        <div class=\"mt-auto splash-height\" id=\"pattern\"></div>\r\n    </div>\r\n</header>" }]
+            args: [{ selector: 'adb-nav', template: "<!-- position-static -->\r\n<div class=\"bg-primary sticky-sm-top p-2\" [attr.id]=\"showPattern&&!showMenu?'pattern':''\" [class.shrink]=\"shrink\" (adbClickOutside)=\"showUserMenu=false;showMenuDropdown(false);\">\r\n    <header id=\"extra-header\">\r\n        <div class=\"d-flex flex-wrap gap-2\">\r\n            <nav class=\"d-flex gap-2\">\r\n                <div class=\"me-5\" style=\"display: block;margin-top: -0.4rem;\">\r\n                    <a href=\"https://www.artdatabanken.se/\" target=\"new\"><img src=\"/assets/images/logo.svg\" style=\"height: 2.5rem;\"></a>\r\n                </div>\r\n                <a class=\"text-white fw-bold fs-3\" href=\"/\">ARTFAKTA</a>\r\n            </nav>\r\n            <ng-container *ngIf=\"translationFinished\">\r\n                <div class=\"ms-auto d-flex gap-2\">\r\n                    <div class=\"btn-group d-block no-caret\">\r\n                        <button adbDropdown class=\"px-1 py-0 btn btn-primary btn-sm dropdown-toggle\"><span class=\"far fa-globe\"></span></button>\r\n                        <ul class=\"dropdown-menu dropdown-menu-end py-1 bg-primary\">\r\n                            <li>\r\n                                <button type=\"button\" [class.pe-none]=\"trans.currentLang==='sv'\" (click)=\"setLanguage('sv')\" class=\"btn btn-link py-0 px-2 text-white\">\r\n                                    <span [class.fw-bold]=\"trans.currentLang==='sv'\">{{'ADB_HEADER.IN_SWEDISH'|translate}}</span>\r\n                                </button>\r\n                            </li>\r\n                            <div class=\"dropdown-divider my-1 opacity-25 bg-white\"></div>\r\n                            <li>\r\n                                <button type=\"button\" [class.pe-none]=\"trans.currentLang==='en'\" (click)=\"setLanguage('en')\" class=\"btn btn-link py-0 px-2 text-white\">\r\n                                    <span [class.fw-bold]=\"trans.currentLang==='en'\">{{'ADB_HEADER.IN_ENGLISH'|translate}}</span>\r\n                                </button>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                    <a class=\"ms-auto text-white d-none d-md-block\" [href]=\"navigation.artportalenUrl\">\r\n                        {{'ADB_HEADER.ARTPORTALEN_TITLE'|translate}}\r\n                    </a>\r\n                    <a class=\"text-white d-none d-md-block\" [href]=\"navigation.supportUrl\">Support</a>\r\n\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </header>\r\n    <header class=\"d-flex align-items-center flex-wrap gap-2\" *ngIf=\"translationFinished\">\r\n        <nav *ngIf=\"navigation\" class=\"d-flex align-items-center gap-2\">\r\n            <a href=\"https://www.artdatabanken.se/\" class=\"home-link\" target=\"new\" style=\"margin-top: -0.4rem;\"><img src=\"/assets/images/logo_sm_white.png\" style=\"height: 1.6rem;\"></a>\r\n            <a class=\"text-white fw-bold me-3 home-link\" href=\"{{navigation.artfakta.url}}\">\r\n                {{navigation.artfakta.transId|translate}}\r\n            </a>\r\n            <a class=\"text-white d-none d-md-block\" href=\"{{navigation.artinfo.url}}\">\r\n                {{navigation.artinfo.transId|translate}}\r\n            </a>\r\n            <a class=\"text-white d-none d-md-block\" href=\"{{navigation.observations.url}}?lang={{trans.currentLang}}\">\r\n                {{navigation.observations.transId|translate}}\r\n            </a>\r\n            <a class=\"text-white d-none d-md-block\" href=\"{{navigation.nameAndRelationship.url}}?lang={{trans.currentLang}}\">\r\n                {{navigation.nameAndRelationship.transId|translate}}\r\n            </a>\r\n        </nav>\r\n        <div class=\"ms-auto\">\r\n            <div class=\"btn-group no-caret d-none d-md-block\">\r\n                <button type=\"button\" adbDropdown class=\"btn btn-primary btn-sm dropdown-toggle\" [class.initials]=\"initials\" (click)=\"showMenuDropdown(!showMenu)\">\r\n                    <ng-container *ngIf=\"initials\">{{initials}}</ng-container>\r\n                    <ng-container *ngIf=\"!initials\">{{'ADB_HEADER.LOGIN'|translate}}</ng-container>\r\n                </button>\r\n                <ul class=\"dropdown-menu dropdown-menu-end py-1 bg-primary text-white\">\r\n                    <ng-container *ngIf=\"initials\">\r\n                        <li class=\"px-2 pb-1\">\r\n                            <button (click)=\"logout()\" type=\"button\" class=\"btn btn-link p-0 text-white\">\r\n                                <span class=\"fas fa-sign-out-alt me-1\"></span>{{'ADB_HEADER.LOGOUT'|translate}}\r\n                            </button>\r\n                        </li>\r\n                        <hr class=\"my-0\">\r\n                        <li class=\"pt-1 px-2\">\r\n                            <span class=\"fas fa-user me-1\"></span>\r\n                            {{fullName}}\r\n                        </li>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"!initials\">\r\n                        <li>\r\n                            <div class=\"text-center \">\r\n                                <button type=\"button\" class=\"btn btn-primary\" (click)=\"login()\" id=\"start-login\">{{'ADB_HEADER.LOGIN'|translate}}</button>\r\n                            </div>\r\n                        </li>\r\n                        <li>\r\n                            <a *ngIf=\"navigation\" class=\"d-block text-center mt-2 text-white\" href=\"{{navigation.createAccountLink}}?lang={{trans.currentLang}}&returnUrl={{url}}\">\r\n                                {{'ADB_HEADER.CREATE_USER'|translate}}\r\n                            </a>\r\n                        </li>\r\n                    </ng-container>\r\n                </ul>\r\n            </div>\r\n            <div class=\"d-block d-md-none\">\r\n                <button type=\"button\" class=\"btn btn-sm py-1 px-2 btn-primary\" (click)=\"showUserMenu = false;showMenuDropdown(!showMenu)\">\r\n                    {{'ADB_HEADER.MENY'|translate}}\r\n                    <i class=\"ms-1 fas\" [ngClass]=\"showMenu?'fa-chevron-up':'fa-chevron-down'\"></i>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </header>\r\n    <div class=\"mobile-menu d-flex flex-column d-md-none bg-primary text-white\" *ngIf=\"showMenu&&navigation\">\r\n        <div class=\"p-2\">\r\n            <div class=\"d-flex justify-content-between align-items-center gap-2\" *ngIf=\"initials\">\r\n                <span class=\"initials me-2\">{{initials}}</span>\r\n                <button type=\"button\" (click)=\"logout()\" class=\"btn btn-primary\">\r\n                    {{'ADB_HEADER.LOGOUT'|translate}}\r\n                </button>\r\n            </div>\r\n            <div class=\"d-flex justify-content-between gap-2\" *ngIf=\"!initials\">\r\n                <button type=\"button\" (click)=\"login()\" class=\"btn btn-primary\" id=\"login\">\r\n                    {{'ADB_HEADER.LOGIN'|translate}}\r\n                </button>\r\n                <a href=\"{{navigation.createAccountLink}}?lang={{trans.currentLang}}&returnUrl={{url}}\"\r\n                    class=\"btn btn-primary text-white\">\r\n                    {{'ADB_HEADER.CREATE_USER'|translate}}\r\n                </a>\r\n            </div>\r\n        </div>\r\n        <div class=\"px-2\">\r\n            <hr class=\"my-0\">\r\n            <ul class=\"list-unstyled\">\r\n                <li>\r\n                    <a class=\"d-block py-1 text-white\" href=\"{{navigation.artinfo.url}}\">\r\n                        {{navigation.artinfo.transId|translate}}\r\n                    </a>\r\n                    <hr class=\"my-0\">\r\n                </li>\r\n                <li>\r\n                    <a class=\"d-block py-1 text-white\" href=\"{{navigation.observations.url}}?lang={{trans.currentLang}}\">\r\n                        {{navigation.observations.transId|translate}}\r\n                    </a>\r\n                    <hr class=\"my-0\">\r\n                </li>\r\n                <li>\r\n                    <a class=\"d-block py-1 text-white\" href=\"{{navigation.nameAndRelationship.url}}?lang={{trans.currentLang}}\">\r\n                        {{navigation.nameAndRelationship.transId|translate}}\r\n                    </a>\r\n                    <hr class=\"my-0\">\r\n                </li>\r\n                <li>\r\n                    <a class=\"d-block py-1 text-white\" [href]=\"navigation.about.url\">{{navigation.about.transId|translate}}</a>\r\n                    <hr class=\"my-0\">\r\n                </li>\r\n                <li>\r\n                    <a class=\"d-block py-1 text-white\" [href]=\"navigation.artportalenUrl\">\r\n                        {{'ADB_HEADER.ARTPORTALEN_TITLE'|translate}}\r\n                    </a>\r\n                    <hr class=\"my-0\">\r\n                </li>\r\n                <li>\r\n                    <small class=\"d-block text-white py-2\">\r\n                        {{'ADB_HEADER.DEVELOPED_BY'|translate}}\r\n                        <a href=\"https://www.artdatabanken.se/\" class=\"text-white\"><u>{{'ADB_HEADER.ARTDATABANKEN'|translate}}</u></a>\r\n                    </small>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n        <div class=\"mt-auto splash-height\" id=\"pattern\"></div>\r\n    </div>\r\n</div>\r\n<div (onVisible)=\"onHideTop(false)\" (onHidden)=\"onHideTop(true)\"></div>" }]
         }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i1$1.TranslateService }]; }, propDecorators: { loginClicked: [{
                 type: Output
             }], logoutClicked: [{
@@ -471,90 +520,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 }]
         }] });
 
-class ADBHeaderModule {
-    static forRoot(environment) {
-        return {
-            ngModule: ADBHeaderModule,
-            providers: [
-                EnvironmentService,
-                {
-                    provide: 'env',
-                    useValue: environment
-                }
-            ]
-        };
-    }
-}
-/** @nocollapse */ ADBHeaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ADBHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ ADBHeaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ADBHeaderModule, declarations: [ADBHeaderComponent, ADBNavComponent], imports: [CommonModule,
-        HttpClientModule,
-        RouterModule,
-        TranslateModule,
-        AdbDirectivesModule,
-        AdbDropdownModule], exports: [ADBHeaderComponent, ADBNavComponent] });
-/** @nocollapse */ ADBHeaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ADBHeaderModule, imports: [[
-            CommonModule,
-            HttpClientModule,
-            RouterModule,
-            TranslateModule,
-            AdbDirectivesModule,
-            AdbDropdownModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ADBHeaderModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ADBHeaderComponent, ADBNavComponent],
-                    imports: [
-                        CommonModule,
-                        HttpClientModule,
-                        RouterModule,
-                        TranslateModule,
-                        AdbDirectivesModule,
-                        AdbDropdownModule
-                    ],
-                    exports: [ADBHeaderComponent, ADBNavComponent]
-                }]
-        }] });
-
-class InfiniteScrollComponent {
-    constructor(_element) {
-        this._element = _element;
-        this.onVisible = new EventEmitter();
-        this.height = '1px';
-        this.checkForIntersection = (entries) => {
-            entries.forEach((entry) => {
-                const isIntersecting = entry.isIntersecting &&
-                    entry.target === this._element.nativeElement;
-                if (isIntersecting) {
-                    this.onVisible.emit();
-                }
-            });
-        };
-    }
-    ngAfterViewInit() {
-        this._intersectionObserver = new IntersectionObserver(entries => {
-            this.checkForIntersection(entries);
-        }, {});
-        this._intersectionObserver.observe(this._element.nativeElement);
-    }
-    ngOnDestroy() {
-        if (this._intersectionObserver) {
-            this._intersectionObserver.disconnect();
-        }
-    }
-}
-/** @nocollapse */ InfiniteScrollComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: InfiniteScrollComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ InfiniteScrollComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: InfiniteScrollComponent, selector: "[onVisible]", outputs: { onVisible: "onVisible" }, host: { properties: { "style.height": "this.height" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: InfiniteScrollComponent, decorators: [{
-            type: Directive,
-            args: [{ selector: "[onVisible]" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onVisible: [{
-                type: Output
-            }], height: [{
-                type: HostBinding,
-                args: ['style.height']
-            }] } });
-
 class PagerBaseDirective {
     constructor() {
         this.limit = PagerBaseDirective.DEFAULT_LIMIT; //TODO: change to set method to update model
@@ -659,6 +624,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 }]
         }] });
 
+class ADBHeaderModule {
+    static forRoot(environment) {
+        return {
+            ngModule: ADBHeaderModule,
+            providers: [
+                EnvironmentService,
+                {
+                    provide: 'env',
+                    useValue: environment
+                }
+            ]
+        };
+    }
+}
+/** @nocollapse */ ADBHeaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ADBHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ ADBHeaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ADBHeaderModule, declarations: [ADBHeaderComponent, ADBNavComponent], imports: [CommonModule,
+        HttpClientModule,
+        RouterModule,
+        TranslateModule,
+        AdbDirectivesModule,
+        AdbDropdownModule,
+        AdbPagersModule], exports: [ADBHeaderComponent, ADBNavComponent] });
+/** @nocollapse */ ADBHeaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ADBHeaderModule, imports: [[
+            CommonModule,
+            HttpClientModule,
+            RouterModule,
+            TranslateModule,
+            AdbDirectivesModule,
+            AdbDropdownModule,
+            AdbPagersModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ADBHeaderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ADBHeaderComponent, ADBNavComponent],
+                    imports: [
+                        CommonModule,
+                        HttpClientModule,
+                        RouterModule,
+                        TranslateModule,
+                        AdbDirectivesModule,
+                        AdbDropdownModule,
+                        AdbPagersModule
+                    ],
+                    exports: [ADBHeaderComponent, ADBNavComponent]
+                }]
+        }] });
+
 class LocaleDatePipe {
     constructor(translate) {
         this.translate = translate;
@@ -1256,7 +1269,6 @@ class AdbToastService {
         toastMessage.delay = of(toastMessage).pipe(delay(time)).subscribe(toast => {
             this.remove(toast);
         });
-        console.log('toastMessage', toastMessage);
         this.toasts.push(toastMessage);
         this.toastsSubject.next(this.toasts);
     }