adb-shared 3.0.38 → 4.0.1

package/fesm2015/adb-shared.mjs

@@ -1,14 +1,14 @@
-import * as i2 from '@angular/common';
+import * as i2$1 from '@angular/common';
 import { CommonModule, DatePipe, formatDate } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, Inject, EventEmitter, Component, Output, Input, Directive, HostListener, HostBinding, NgModule, Pipe, forwardRef } from '@angular/core';
-import * as i3 from '@ngx-translate/core';
+import { Injectable, Inject, EventEmitter, Directive, Output, HostListener, Input, HostBinding, NgModule, Component, 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';
 import * as i1 from '@angular/common/http';
 import { HttpClientModule } from '@angular/common/http';
-import * as i2$1 from '@angular/router';
+import * as i2 from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
+import { Subscription, Subject, of } from 'rxjs';
 import { startOfDay, subYears, endOfDay, addYears, getMonth, subMonths, addMonths, isSameYear, startOfMonth, endOfMonth, eachWeekOfInterval, getISOWeek, addDays, eachDayOfInterval, getHours, getMinutes, isSameDay, isSameMonth, isWithinInterval, isValid, parseISO } from 'date-fns';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { delay } from 'rxjs/operators';
@@ -29,106 +29,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                     }] }];
     } });
 
-class ADBHeaderComponent {
-    constructor(httpClient, envService, trans) {
-        this.httpClient = httpClient;
-        this.envService = envService;
-        this.trans = trans;
-        this.subscription = new Subscription();
-        this.loginClicked = new EventEmitter();
-        this.logoutClicked = new EventEmitter();
-        this.dropMenuChange = new EventEmitter();
-        this.artfakta = true;
-        this.translationFinished = false;
-        this.showMenu = false;
-        this.showUserMenu = false;
-    }
-    set userName(fullName) {
-        this.fullName = fullName;
-        const splitted = fullName.split(' ');
-        if ((splitted === null || splitted === void 0 ? void 0 : splitted.length) > 1) {
-            const initials = splitted.shift().charAt(0) + splitted.pop().charAt(0);
-            this.initials = initials.toUpperCase();
-        }
-        else {
-            this.initials = this.fullName ? this.fullName.charAt(0).toUpperCase() : this.fullName;
-        }
-    }
-    ;
-    ngOnInit() {
-        this.url = window.location.href;
-        const baseUrl = this.envService.environment.resourceUrl;
-        const url = this.artfakta ? '/assets/links.json' : '/assets/artportalen/links.json';
-        this.subscription.add(this.httpClient.get(baseUrl + url).subscribe(result => {
-            this.navigation = result;
-        }));
-        this.initTranslations(baseUrl);
-    }
-    initTranslations(baseUrl) {
-        if (this.trans.store.translations[this.trans.currentLang]) {
-            this.loadTranslation(baseUrl, this.trans.currentLang);
-        }
-        this.subscription.add(this.trans.onLangChange.subscribe((event) => {
-            this.translationFinished = false;
-            this.loadTranslation(baseUrl, event.lang);
-        }));
-    }
-    loadTranslation(baseUrl, lang) {
-        //TODO: Prepare for diffents lang then en sv (en-GB) or add more files in devcomponentserver :)
-        const url = this.artfakta ? baseUrl + `/assets/i18n/${lang}.json` : baseUrl + `/assets/artportalen/i18n/${lang}.json`;
-        this.subscription.add(this.httpClient.get(url).subscribe(translations => {
-            this.trans.setTranslation(lang, translations, true);
-            this.translationFinished = true;
-        }));
-    }
-    showMenuDropdown(show) {
-        if (this.showMenu !== show) {
-            this.showMenu = show;
-            this.dropMenuChange.emit(show);
-        }
-    }
-    setLanguage(lang) {
-        this.trans.use(lang);
-        this.showMenu = false;
-        this.dropMenuChange.emit(false);
-        //TODO: set localstorage/cookies or probaly event to main app
-    }
-    onExpandLink(event, transId) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (this.expandedLink === transId) {
-            this.expandedLink = null;
-            return;
-        }
-        this.expandedLink = transId;
-    }
-    login() {
-        this.loginClicked.emit();
-    }
-    logout() {
-        this.logoutClicked.emit();
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-    }
-}
-/** @nocollapse */ ADBHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ADBHeaderComponent, deps: [{ token: i1.HttpClient }, { token: EnvironmentService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ ADBHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: ADBHeaderComponent, selector: "adb-header", inputs: { artfakta: "artfakta", userName: "userName" }, 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            <ng-container *ngIf=\"translationFinished\">\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\r\n                            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            </ng-container>\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>", 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": i3.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ADBHeaderComponent, decorators: [{
-            type: Component,
-            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            <ng-container *ngIf=\"translationFinished\">\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\r\n                            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            </ng-container>\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>" }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: EnvironmentService }, { type: i3.TranslateService }]; }, propDecorators: { loginClicked: [{
-                type: Output
-            }], logoutClicked: [{
-                type: Output
-            }], dropMenuChange: [{
-                type: Output
-            }], artfakta: [{
-                type: Input
-            }], userName: [{
-                type: Input
-            }] } });
-
 class ClickOutsideDirective {
     constructor(elementRef) {
         this.elementRef = elementRef;
@@ -355,12 +255,12 @@ class ADBNavComponent {
         this.subscription.unsubscribe();
     }
 }
-/** @nocollapse */ ADBNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ADBNavComponent, deps: [{ token: i1.HttpClient }, { token: i2$1.Router }, { token: EnvironmentService }, { token: i3.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: "<div class=\"bg-primary adb-main-header\" [attr.id]=\"showPattern?'pattern':''\" (adbClickOutside)=\"showMenuDropdown(false);\">\r\n    <header class=\"container-lg d-flex align-items-center gap-2\" *ngIf=\"translationFinished\">\r\n        <nav class=\"d-flex flex-grow-1 align-items-center pe-2 py-2\">\r\n            <a class=\"text-white text-decoration-none d-flex gap-2\" href=\"https://www.artdatabanken.se/\" target=\"new\">\r\n                <img style=\"height: 2rem;\" src=\"/assets/images/logo_sm_white.png\" alt=\"logo\">\r\n                <div class=\"border-end d-none d-sm-block\"></div>\r\n                <div class=\"align-self-center d-none d-sm-block pe-5\">ARTDATABANKEN</div>\r\n            </a>\r\n            <a routerLink=\"/\" class=\"text-white text-decoration-none fs-1 fw-bold\">Artfakta</a>\r\n        </nav>\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n            <div><ng-content></ng-content></div>\r\n            <div>\r\n                <button class=\"btn btn-primary-dark btn-lg\" type=\"button\"\r\n                    attr.aria-label=\"{{'MENU'|translate}}\"\r\n                    (click)=\"showMenuDropdown(!showNavMenu)\">\r\n                    <i class=\"fas fa-bars\"></i>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </header>\r\n    <div *ngIf=\"navigation\" role=\"dialog\" class=\"offcanvas offcanvas-end bg-primary text-white\"\r\n        [class.show]=\"showNavMenu\" tabindex=\"-1\" aria-labelledby=\"offcanvasNav\">\r\n        <div class=\"offcanvas-header\">\r\n            <h1 class=\"offcanvas-title h-section mb-0\" id=\"offcanvasNav\">Artfakta</h1>\r\n            <button type=\"button\" class=\"btn-close btn-close-white\" attr.aria-label=\"{{'CLOSE'|translate}}\" (click)=\"showMenuDropdown(false)\"></button>\r\n        </div>\r\n        <div class=\"offcanvas-body p-0\">\r\n            <div class=\"d-flex flex-wrap justify-content-between align-items-center mb-2 gap-1 px-2\">\r\n                <ng-container *ngIf=\"initials\">\r\n                    <div>\r\n                        <button (click)=\"logout()\" type=\"button\" class=\"btn btn-primary-dark\">\r\n                            {{'ADB_HEADER.LOGOUT'|translate}}\r\n                        </button>\r\n                    </div>\r\n                    <div>{{fullName}}</div>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"!initials\">\r\n                    <div class=\"text-center\">\r\n                        <button type=\"button\" class=\"btn btn-primary-dark\" (click)=\"login()\" id=\"start-login\">{{'ADB_HEADER.LOGIN'|translate}}</button>\r\n                    </div>\r\n                    <a *ngIf=\"navigation\" class=\"text-white\" 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            <ul class=\"list-group list-group-flush border-top\">\r\n                <li class=\"list-group-item bg-primary\" [ngClass]=\"showArtfakta?'border-bottom-0 pb-0':''\">\r\n                    <div class=\"d-flex justify-content-between gap-2\">\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                        <button class=\"btn btn-sm btn-primary\" (click)=\"showArtfakta = !showArtfakta\"\r\n                            attr.aria-controls=\"artfakta-links\" attr.aria-expanded=\"{{showArtfakta}}\">\r\n                            <span class=\"fas\" [ngClass]=\"showArtfakta?'fa-chevron-up':'fa-chevron-down'\"></span>\r\n                        </button>\r\n                    </div>\r\n                </li>\r\n                <li class=\"list-group-item bg-primary pt-0 px-3\" *ngIf=\"showArtfakta\" id=\"artfakta-links\">\r\n                    <ul class=\"list-unstyled\">\r\n                        <li class=\"d-block py-1\">\r\n                            <a href=\"{{navigation.keys.url}}\" class=\"text-white\">\r\n                                {{navigation.keys.transId|translate}}\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"d-block py-1\">\r\n                            <a href=\"{{navigation.mySpecies.url}}\" class=\"text-white\">\r\n                                {{navigation.mySpecies.transId|translate}}\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"d-block py-1\">\r\n                            <a href=\"{{navigation.lists.url}}\" class=\"text-white\">\r\n                                {{navigation.lists.transId|translate}}\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"d-block py-1\">\r\n                            <a href=\"{{navigation.imageRec.url}}\" class=\"text-white\">\r\n                                {{navigation.imageRec.transId|translate}}\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"d-block py-1\">\r\n                            <a href=\"{{navigation.filter.url}}\" class=\"text-white\">\r\n                                {{navigation.filter.transId|translate}}\r\n                            </a>\r\n                        </li>\r\n                    </ul>\r\n                </li>\r\n                <li class=\"list-group-item bg-primary\">\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                </li>\r\n                <li class=\"list-group-item bg-primary\" [ngClass]=\"showNOS?'border-bottom-0 pb-0':''\">\r\n                    <div class=\"d-flex justify-content-between gap-2\">\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                        <button class=\"btn btn-sm btn-primary\" (click)=\"showNOS = !showNOS\"\r\n                            attr.aria-controls=\"nos-links\" attr.aria-expanded=\"{{showNOS}}\">\r\n                            <span class=\"fas\" [ngClass]=\"showNOS?'fa-chevron-up':'fa-chevron-down'\"></span>\r\n                        </button>\r\n                    </div>\r\n                </li>\r\n                <li class=\"list-group-item bg-primary pt-0 px-3\" *ngIf=\"showNOS\" id=\"nos-links\">\r\n                    <ul class=\"list-unstyled\">\r\n                        <li class=\"d-block py-1 text-white\">\r\n                            <a href=\"{{navigation.nameSearch.url}}\" class=\"text-white\">\r\n                                {{navigation.nameSearch.transId|translate}}\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"d-block py-1 text-white\">\r\n                            <a href=\"{{navigation.match.url}}\" class=\"text-white\">\r\n                                {{navigation.match.transId|translate}}\r\n                            </a>\r\n                        </li>\r\n                    </ul>\r\n                </li>\r\n                <li class=\"list-group-item bg-primary\">\r\n                    <a class=\"d-block py-1 text-white\" [href]=\"navigation.about.url\">{{navigation.about.transId|translate}}</a>\r\n                </li>\r\n                <li class=\"list-group-item bg-primary\">\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                </li>\r\n                <li class=\"list-group-item bg-primary\">\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>\r\n</div>", directives: [{ type: ClickOutsideDirective, selector: "[adbClickOutside]", outputs: ["adbClickOutside"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i3.TranslatePipe } });
+/** @nocollapse */ ADBNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ADBNavComponent, deps: [{ token: i1.HttpClient }, { token: i2.Router }, { token: EnvironmentService }, { 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: "<div class=\"bg-primary adb-main-header\" [attr.id]=\"showPattern?'pattern':''\" (adbClickOutside)=\"showMenuDropdown(false);\">\r\n    <header class=\"container-lg d-flex align-items-center gap-2\" *ngIf=\"translationFinished\">\r\n        <nav class=\"d-flex flex-grow-1 align-items-center pe-2 py-2\">\r\n            <a class=\"text-white text-decoration-none d-flex gap-2\" href=\"https://www.artdatabanken.se/\" target=\"new\">\r\n                <img style=\"height: 2rem;\" src=\"/assets/images/logo_sm_white.png\" alt=\"logo\">\r\n                <div class=\"border-end d-none d-sm-block\"></div>\r\n                <div class=\"align-self-center d-none d-sm-block pe-5\">ARTDATABANKEN</div>\r\n            </a>\r\n            <a routerLink=\"/\" class=\"text-white text-decoration-none fs-1 fw-bold\">Artfakta</a>\r\n        </nav>\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n            <div><ng-content></ng-content></div>\r\n            <div>\r\n                <button class=\"btn btn-primary-dark btn-lg\" type=\"button\"\r\n                    attr.aria-label=\"{{'ADB_HEADER.MENY'|translate}}\"\r\n                    (click)=\"showMenuDropdown(!showNavMenu)\">\r\n                    <i class=\"fas fa-bars\"></i>\r\n                    <small class=\"d-none ms-2 d-md-inline-block\">{{'ADB_HEADER.MENY'|translate}}</small>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </header>\r\n    <div *ngIf=\"navigation\" role=\"dialog\" class=\"offcanvas offcanvas-end bg-primary text-white\"\r\n        [class.show]=\"showNavMenu\" tabindex=\"-1\" aria-labelledby=\"offcanvasNav\">\r\n        <div class=\"offcanvas-header\">\r\n            <h1 class=\"offcanvas-title h-section mb-0\" id=\"offcanvasNav\">Artfakta</h1>\r\n            <button type=\"button\" class=\"btn-close btn-close-white\" attr.aria-label=\"{{'CLOSE'|translate}}\" (click)=\"showMenuDropdown(false)\"></button>\r\n        </div>\r\n        <div class=\"offcanvas-body d-flex flex-column p-0\">\r\n            <div class=\"d-flex flex-wrap justify-content-between align-items-center mb-2 gap-1 px-2\">\r\n                <ng-container *ngIf=\"initials\">\r\n                    <div>\r\n                        <button (click)=\"logout()\" type=\"button\" class=\"btn btn-primary-dark\">\r\n                            {{'ADB_HEADER.LOGOUT'|translate}}\r\n                        </button>\r\n                    </div>\r\n                    <div>{{fullName}}</div>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"!initials\">\r\n                    <div class=\"text-center\">\r\n                        <button type=\"button\" class=\"btn btn-primary-dark\" (click)=\"login()\" id=\"start-login\">{{'ADB_HEADER.LOGIN'|translate}}</button>\r\n                    </div>\r\n                    <a *ngIf=\"navigation\" class=\"text-white\" 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            <ul class=\"list-group list-group-flush border-top\">\r\n                <li class=\"list-group-item bg-primary\" [ngClass]=\"showArtfakta?'border-bottom-0 pb-0':''\">\r\n                    <div class=\"d-flex justify-content-between gap-2\">\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                        <button class=\"btn btn-sm btn-primary\" (click)=\"showArtfakta = !showArtfakta\"\r\n                            attr.aria-controls=\"artfakta-links\" attr.aria-expanded=\"{{showArtfakta}}\">\r\n                            <span class=\"fas\" [ngClass]=\"showArtfakta?'fa-chevron-up':'fa-chevron-down'\"></span>\r\n                        </button>\r\n                    </div>\r\n                </li>\r\n                <li class=\"list-group-item bg-primary pt-0 px-3\" *ngIf=\"showArtfakta\" id=\"artfakta-links\">\r\n                    <ul class=\"list-unstyled\">\r\n                        <li class=\"d-block py-1\">\r\n                            <a href=\"{{navigation.keys.url}}\" class=\"text-white\">\r\n                                {{navigation.keys.transId|translate}}\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"d-block py-1\">\r\n                            <a href=\"{{navigation.mySpecies.url}}\" class=\"text-white\">\r\n                                {{navigation.mySpecies.transId|translate}}\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"d-block py-1\">\r\n                            <a href=\"{{navigation.lists.url}}\" class=\"text-white\">\r\n                                {{navigation.lists.transId|translate}}\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"d-block py-1\">\r\n                            <a href=\"{{navigation.imageRec.url}}\" class=\"text-white\">\r\n                                {{navigation.imageRec.transId|translate}}\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"d-block py-1\">\r\n                            <a href=\"{{navigation.filter.url}}\" class=\"text-white\">\r\n                                {{navigation.filter.transId|translate}}\r\n                            </a>\r\n                        </li>\r\n                    </ul>\r\n                </li>\r\n                <li class=\"list-group-item bg-primary\">\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                </li>\r\n                <li class=\"list-group-item bg-primary\" [ngClass]=\"showNOS?'border-bottom-0 pb-0':''\">\r\n                    <div class=\"d-flex justify-content-between gap-2\">\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                        <button class=\"btn btn-sm btn-primary\" (click)=\"showNOS = !showNOS\"\r\n                            attr.aria-controls=\"nos-links\" attr.aria-expanded=\"{{showNOS}}\">\r\n                            <span class=\"fas\" [ngClass]=\"showNOS?'fa-chevron-up':'fa-chevron-down'\"></span>\r\n                        </button>\r\n                    </div>\r\n                </li>\r\n                <li class=\"list-group-item bg-primary pt-0 px-3\" *ngIf=\"showNOS\" id=\"nos-links\">\r\n                    <ul class=\"list-unstyled\">\r\n                        <li class=\"d-block py-1 text-white\">\r\n                            <a href=\"{{navigation.nameSearch.url}}\" class=\"text-white\">\r\n                                {{navigation.nameSearch.transId|translate}}\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"d-block py-1 text-white\">\r\n                            <a href=\"{{navigation.match.url}}\" class=\"text-white\">\r\n                                {{navigation.match.transId|translate}}\r\n                            </a>\r\n                        </li>\r\n                    </ul>\r\n                </li>\r\n                <li class=\"list-group-item bg-primary\">\r\n                    <a class=\"d-block py-1 text-white\" [href]=\"navigation.about.url\">{{navigation.about.transId|translate}}</a>\r\n                </li>\r\n                <li class=\"list-group-item bg-primary\">\r\n                    <a class=\"d-block py-1 text-white\" [href]=\"navigation.artportalenUrl\">\r\n                        {{'ADB_HEADER.ARTPORTALEN_TITLE'|translate}}\r\n                        <i class=\"fas fa-external-link\"></i>\r\n                    </a>\r\n                </li>\r\n            </ul>\r\n            <div id=\"pattern\" class=\"flex-grow-1 border-top\">\r\n                <small class=\"d-block text-white p-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            </div>\r\n        </div>\r\n    </div>\r\n</div>", directives: [{ type: ClickOutsideDirective, selector: "[adbClickOutside]", outputs: ["adbClickOutside"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], 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: "<div class=\"bg-primary adb-main-header\" [attr.id]=\"showPattern?'pattern':''\" (adbClickOutside)=\"showMenuDropdown(false);\">\r\n    <header class=\"container-lg d-flex align-items-center gap-2\" *ngIf=\"translationFinished\">\r\n        <nav class=\"d-flex flex-grow-1 align-items-center pe-2 py-2\">\r\n            <a class=\"text-white text-decoration-none d-flex gap-2\" href=\"https://www.artdatabanken.se/\" target=\"new\">\r\n                <img style=\"height: 2rem;\" src=\"/assets/images/logo_sm_white.png\" alt=\"logo\">\r\n                <div class=\"border-end d-none d-sm-block\"></div>\r\n                <div class=\"align-self-center d-none d-sm-block pe-5\">ARTDATABANKEN</div>\r\n            </a>\r\n            <a routerLink=\"/\" class=\"text-white text-decoration-none fs-1 fw-bold\">Artfakta</a>\r\n        </nav>\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n            <div><ng-content></ng-content></div>\r\n            <div>\r\n                <button class=\"btn btn-primary-dark btn-lg\" type=\"button\"\r\n                    attr.aria-label=\"{{'MENU'|translate}}\"\r\n                    (click)=\"showMenuDropdown(!showNavMenu)\">\r\n                    <i class=\"fas fa-bars\"></i>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </header>\r\n    <div *ngIf=\"navigation\" role=\"dialog\" class=\"offcanvas offcanvas-end bg-primary text-white\"\r\n        [class.show]=\"showNavMenu\" tabindex=\"-1\" aria-labelledby=\"offcanvasNav\">\r\n        <div class=\"offcanvas-header\">\r\n            <h1 class=\"offcanvas-title h-section mb-0\" id=\"offcanvasNav\">Artfakta</h1>\r\n            <button type=\"button\" class=\"btn-close btn-close-white\" attr.aria-label=\"{{'CLOSE'|translate}}\" (click)=\"showMenuDropdown(false)\"></button>\r\n        </div>\r\n        <div class=\"offcanvas-body p-0\">\r\n            <div class=\"d-flex flex-wrap justify-content-between align-items-center mb-2 gap-1 px-2\">\r\n                <ng-container *ngIf=\"initials\">\r\n                    <div>\r\n                        <button (click)=\"logout()\" type=\"button\" class=\"btn btn-primary-dark\">\r\n                            {{'ADB_HEADER.LOGOUT'|translate}}\r\n                        </button>\r\n                    </div>\r\n                    <div>{{fullName}}</div>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"!initials\">\r\n                    <div class=\"text-center\">\r\n                        <button type=\"button\" class=\"btn btn-primary-dark\" (click)=\"login()\" id=\"start-login\">{{'ADB_HEADER.LOGIN'|translate}}</button>\r\n                    </div>\r\n                    <a *ngIf=\"navigation\" class=\"text-white\" 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            <ul class=\"list-group list-group-flush border-top\">\r\n                <li class=\"list-group-item bg-primary\" [ngClass]=\"showArtfakta?'border-bottom-0 pb-0':''\">\r\n                    <div class=\"d-flex justify-content-between gap-2\">\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                        <button class=\"btn btn-sm btn-primary\" (click)=\"showArtfakta = !showArtfakta\"\r\n                            attr.aria-controls=\"artfakta-links\" attr.aria-expanded=\"{{showArtfakta}}\">\r\n                            <span class=\"fas\" [ngClass]=\"showArtfakta?'fa-chevron-up':'fa-chevron-down'\"></span>\r\n                        </button>\r\n                    </div>\r\n                </li>\r\n                <li class=\"list-group-item bg-primary pt-0 px-3\" *ngIf=\"showArtfakta\" id=\"artfakta-links\">\r\n                    <ul class=\"list-unstyled\">\r\n                        <li class=\"d-block py-1\">\r\n                            <a href=\"{{navigation.keys.url}}\" class=\"text-white\">\r\n                                {{navigation.keys.transId|translate}}\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"d-block py-1\">\r\n                            <a href=\"{{navigation.mySpecies.url}}\" class=\"text-white\">\r\n                                {{navigation.mySpecies.transId|translate}}\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"d-block py-1\">\r\n                            <a href=\"{{navigation.lists.url}}\" class=\"text-white\">\r\n                                {{navigation.lists.transId|translate}}\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"d-block py-1\">\r\n                            <a href=\"{{navigation.imageRec.url}}\" class=\"text-white\">\r\n                                {{navigation.imageRec.transId|translate}}\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"d-block py-1\">\r\n                            <a href=\"{{navigation.filter.url}}\" class=\"text-white\">\r\n                                {{navigation.filter.transId|translate}}\r\n                            </a>\r\n                        </li>\r\n                    </ul>\r\n                </li>\r\n                <li class=\"list-group-item bg-primary\">\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                </li>\r\n                <li class=\"list-group-item bg-primary\" [ngClass]=\"showNOS?'border-bottom-0 pb-0':''\">\r\n                    <div class=\"d-flex justify-content-between gap-2\">\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                        <button class=\"btn btn-sm btn-primary\" (click)=\"showNOS = !showNOS\"\r\n                            attr.aria-controls=\"nos-links\" attr.aria-expanded=\"{{showNOS}}\">\r\n                            <span class=\"fas\" [ngClass]=\"showNOS?'fa-chevron-up':'fa-chevron-down'\"></span>\r\n                        </button>\r\n                    </div>\r\n                </li>\r\n                <li class=\"list-group-item bg-primary pt-0 px-3\" *ngIf=\"showNOS\" id=\"nos-links\">\r\n                    <ul class=\"list-unstyled\">\r\n                        <li class=\"d-block py-1 text-white\">\r\n                            <a href=\"{{navigation.nameSearch.url}}\" class=\"text-white\">\r\n                                {{navigation.nameSearch.transId|translate}}\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"d-block py-1 text-white\">\r\n                            <a href=\"{{navigation.match.url}}\" class=\"text-white\">\r\n                                {{navigation.match.transId|translate}}\r\n                            </a>\r\n                        </li>\r\n                    </ul>\r\n                </li>\r\n                <li class=\"list-group-item bg-primary\">\r\n                    <a class=\"d-block py-1 text-white\" [href]=\"navigation.about.url\">{{navigation.about.transId|translate}}</a>\r\n                </li>\r\n                <li class=\"list-group-item bg-primary\">\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                </li>\r\n                <li class=\"list-group-item bg-primary\">\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>\r\n</div>" }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i2$1.Router }, { type: EnvironmentService }, { type: i3.TranslateService }]; }, propDecorators: { loginClicked: [{
+            args: [{ selector: 'adb-nav', template: "<div class=\"bg-primary adb-main-header\" [attr.id]=\"showPattern?'pattern':''\" (adbClickOutside)=\"showMenuDropdown(false);\">\r\n    <header class=\"container-lg d-flex align-items-center gap-2\" *ngIf=\"translationFinished\">\r\n        <nav class=\"d-flex flex-grow-1 align-items-center pe-2 py-2\">\r\n            <a class=\"text-white text-decoration-none d-flex gap-2\" href=\"https://www.artdatabanken.se/\" target=\"new\">\r\n                <img style=\"height: 2rem;\" src=\"/assets/images/logo_sm_white.png\" alt=\"logo\">\r\n                <div class=\"border-end d-none d-sm-block\"></div>\r\n                <div class=\"align-self-center d-none d-sm-block pe-5\">ARTDATABANKEN</div>\r\n            </a>\r\n            <a routerLink=\"/\" class=\"text-white text-decoration-none fs-1 fw-bold\">Artfakta</a>\r\n        </nav>\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n            <div><ng-content></ng-content></div>\r\n            <div>\r\n                <button class=\"btn btn-primary-dark btn-lg\" type=\"button\"\r\n                    attr.aria-label=\"{{'ADB_HEADER.MENY'|translate}}\"\r\n                    (click)=\"showMenuDropdown(!showNavMenu)\">\r\n                    <i class=\"fas fa-bars\"></i>\r\n                    <small class=\"d-none ms-2 d-md-inline-block\">{{'ADB_HEADER.MENY'|translate}}</small>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </header>\r\n    <div *ngIf=\"navigation\" role=\"dialog\" class=\"offcanvas offcanvas-end bg-primary text-white\"\r\n        [class.show]=\"showNavMenu\" tabindex=\"-1\" aria-labelledby=\"offcanvasNav\">\r\n        <div class=\"offcanvas-header\">\r\n            <h1 class=\"offcanvas-title h-section mb-0\" id=\"offcanvasNav\">Artfakta</h1>\r\n            <button type=\"button\" class=\"btn-close btn-close-white\" attr.aria-label=\"{{'CLOSE'|translate}}\" (click)=\"showMenuDropdown(false)\"></button>\r\n        </div>\r\n        <div class=\"offcanvas-body d-flex flex-column p-0\">\r\n            <div class=\"d-flex flex-wrap justify-content-between align-items-center mb-2 gap-1 px-2\">\r\n                <ng-container *ngIf=\"initials\">\r\n                    <div>\r\n                        <button (click)=\"logout()\" type=\"button\" class=\"btn btn-primary-dark\">\r\n                            {{'ADB_HEADER.LOGOUT'|translate}}\r\n                        </button>\r\n                    </div>\r\n                    <div>{{fullName}}</div>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"!initials\">\r\n                    <div class=\"text-center\">\r\n                        <button type=\"button\" class=\"btn btn-primary-dark\" (click)=\"login()\" id=\"start-login\">{{'ADB_HEADER.LOGIN'|translate}}</button>\r\n                    </div>\r\n                    <a *ngIf=\"navigation\" class=\"text-white\" 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            <ul class=\"list-group list-group-flush border-top\">\r\n                <li class=\"list-group-item bg-primary\" [ngClass]=\"showArtfakta?'border-bottom-0 pb-0':''\">\r\n                    <div class=\"d-flex justify-content-between gap-2\">\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                        <button class=\"btn btn-sm btn-primary\" (click)=\"showArtfakta = !showArtfakta\"\r\n                            attr.aria-controls=\"artfakta-links\" attr.aria-expanded=\"{{showArtfakta}}\">\r\n                            <span class=\"fas\" [ngClass]=\"showArtfakta?'fa-chevron-up':'fa-chevron-down'\"></span>\r\n                        </button>\r\n                    </div>\r\n                </li>\r\n                <li class=\"list-group-item bg-primary pt-0 px-3\" *ngIf=\"showArtfakta\" id=\"artfakta-links\">\r\n                    <ul class=\"list-unstyled\">\r\n                        <li class=\"d-block py-1\">\r\n                            <a href=\"{{navigation.keys.url}}\" class=\"text-white\">\r\n                                {{navigation.keys.transId|translate}}\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"d-block py-1\">\r\n                            <a href=\"{{navigation.mySpecies.url}}\" class=\"text-white\">\r\n                                {{navigation.mySpecies.transId|translate}}\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"d-block py-1\">\r\n                            <a href=\"{{navigation.lists.url}}\" class=\"text-white\">\r\n                                {{navigation.lists.transId|translate}}\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"d-block py-1\">\r\n                            <a href=\"{{navigation.imageRec.url}}\" class=\"text-white\">\r\n                                {{navigation.imageRec.transId|translate}}\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"d-block py-1\">\r\n                            <a href=\"{{navigation.filter.url}}\" class=\"text-white\">\r\n                                {{navigation.filter.transId|translate}}\r\n                            </a>\r\n                        </li>\r\n                    </ul>\r\n                </li>\r\n                <li class=\"list-group-item bg-primary\">\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                </li>\r\n                <li class=\"list-group-item bg-primary\" [ngClass]=\"showNOS?'border-bottom-0 pb-0':''\">\r\n                    <div class=\"d-flex justify-content-between gap-2\">\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                        <button class=\"btn btn-sm btn-primary\" (click)=\"showNOS = !showNOS\"\r\n                            attr.aria-controls=\"nos-links\" attr.aria-expanded=\"{{showNOS}}\">\r\n                            <span class=\"fas\" [ngClass]=\"showNOS?'fa-chevron-up':'fa-chevron-down'\"></span>\r\n                        </button>\r\n                    </div>\r\n                </li>\r\n                <li class=\"list-group-item bg-primary pt-0 px-3\" *ngIf=\"showNOS\" id=\"nos-links\">\r\n                    <ul class=\"list-unstyled\">\r\n                        <li class=\"d-block py-1 text-white\">\r\n                            <a href=\"{{navigation.nameSearch.url}}\" class=\"text-white\">\r\n                                {{navigation.nameSearch.transId|translate}}\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"d-block py-1 text-white\">\r\n                            <a href=\"{{navigation.match.url}}\" class=\"text-white\">\r\n                                {{navigation.match.transId|translate}}\r\n                            </a>\r\n                        </li>\r\n                    </ul>\r\n                </li>\r\n                <li class=\"list-group-item bg-primary\">\r\n                    <a class=\"d-block py-1 text-white\" [href]=\"navigation.about.url\">{{navigation.about.transId|translate}}</a>\r\n                </li>\r\n                <li class=\"list-group-item bg-primary\">\r\n                    <a class=\"d-block py-1 text-white\" [href]=\"navigation.artportalenUrl\">\r\n                        {{'ADB_HEADER.ARTPORTALEN_TITLE'|translate}}\r\n                        <i class=\"fas fa-external-link\"></i>\r\n                    </a>\r\n                </li>\r\n            </ul>\r\n            <div id=\"pattern\" class=\"flex-grow-1 border-top\">\r\n                <small class=\"d-block text-white p-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            </div>\r\n        </div>\r\n    </div>\r\n</div>" }]
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i2.Router }, { type: EnvironmentService }, { type: i1$1.TranslateService }]; }, propDecorators: { loginClicked: [{
                 type: Output
             }], logoutClicked: [{
                 type: Output
@@ -473,7 +373,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
 class AdbDropdownModule {
 }
 /** @nocollapse */ AdbDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ AdbDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDropdownModule, declarations: [AdbDropdownDirective], imports: [CommonModule, i3.TranslateModule, AdbDirectivesModule], exports: [AdbDropdownDirective] });
+/** @nocollapse */ AdbDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDropdownModule, declarations: [AdbDropdownDirective], imports: [CommonModule, i1$1.TranslateModule, AdbDirectivesModule], exports: [AdbDropdownDirective] });
 /** @nocollapse */ AdbDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDropdownModule, providers: [AdbDropdownService], imports: [[CommonModule, TranslateModule.forChild(), AdbDirectivesModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDropdownModule, decorators: [{
             type: NgModule,
@@ -602,12 +502,12 @@ class PagerComponent extends PagerBaseDirective {
         this.subscription.unsubscribe();
     }
 }
-/** @nocollapse */ PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: PagerComponent, deps: [{ token: i2$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: PagerComponent, selector: "adb-pager-nav", inputs: { offsetName: "offsetName", infiniteLimit: "infiniteLimit" }, usesInheritance: true, ngImport: i0, template: "<nav *ngIf=\"pages&&pages.length>1&&currentPage<=amountOfPages\" class=\"d-flex justify-content-end my-1\">\r\n    <ul class=\"pagination mb-0\">\r\n        <li class=\"page-item\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.first\" queryParamsHandling=\"merge\"\r\n                [ngClass]=\"{'pe-none opacity-50':currentPage===1}\" [attr.aria-disabled]=\"currentPage===1\">\r\n                <i class=\"fas fa-chevron-double-left\"></i>\r\n            </a>\r\n        </li>\r\n        <li class=\"page-item\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.prev\" queryParamsHandling=\"merge\"\r\n                [ngClass]=\"{'pe-none opacity-50':currentPage===1}\" [attr.aria-disabled]=\"currentPage===1\">\r\n                <i class=\"fas fa-chevron-left\"></i>\r\n            </a>\r\n        </li>\r\n        <li class=\"page-item\" [class.active]=\"currentPage===page.name\" *ngFor=\"let page of params.pages\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"page.params\"\r\n                queryParamsHandling=\"merge\">{{page.name}}</a>\r\n        </li>\r\n        <li class=\"page-item\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.next\" queryParamsHandling=\"merge\"\r\n                [ngClass]=\"{'pe-none opacity-50':currentPage>=amountOfPages}\" [attr.aria-disabled]=\"currentPage>=amountOfPages\">\r\n                <i class=\"fas fa-chevron-right\"></i>\r\n            </a>\r\n        </li>\r\n        <ng-container *ngIf=\"!infiniteLimit\">\r\n            <li *ngIf=\"(amountOfPages-1)*limit<10000\" class=\"page-item\">\r\n                <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.last\" queryParamsHandling=\"merge\"\r\n                    [attr.aria-disabled]=\"currentPage>=amountOfPages\" [ngClass]=\"{'pe-none opacity-50':currentPage>=amountOfPages}\">\r\n                    <i class=\"fas fa-chevron-double-right\"></i>\r\n                </a>\r\n            </li>\r\n        </ng-container>\r\n        <li class=\"page-item\" *ngIf=\"infiniteLimit\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.last\" queryParamsHandling=\"merge\"\r\n                [attr.aria-disabled]=\"currentPage>=amountOfPages\" [ngClass]=\"{'pe-none opacity-50':currentPage>=amountOfPages}\">\r\n                <i class=\"fas fa-chevron-double-right\"></i>\r\n            </a>\r\n        </li>\r\n    </ul>\r\n</nav>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+/** @nocollapse */ PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: PagerComponent, deps: [{ token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: PagerComponent, selector: "adb-pager-nav", inputs: { offsetName: "offsetName", infiniteLimit: "infiniteLimit" }, usesInheritance: true, ngImport: i0, template: "<nav *ngIf=\"pages&&pages.length>1&&currentPage<=amountOfPages\" class=\"d-flex justify-content-end my-1\">\r\n    <ul class=\"pagination mb-0\">\r\n        <li class=\"page-item\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.first\" queryParamsHandling=\"merge\"\r\n                [ngClass]=\"{'pe-none opacity-50':currentPage===1}\" [attr.aria-disabled]=\"currentPage===1\">\r\n                <i class=\"fas fa-chevron-double-left\"></i>\r\n            </a>\r\n        </li>\r\n        <li class=\"page-item\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.prev\" queryParamsHandling=\"merge\"\r\n                [ngClass]=\"{'pe-none opacity-50':currentPage===1}\" [attr.aria-disabled]=\"currentPage===1\">\r\n                <i class=\"fas fa-chevron-left\"></i>\r\n            </a>\r\n        </li>\r\n        <li class=\"page-item\" [class.active]=\"currentPage===page.name\" *ngFor=\"let page of params.pages\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"page.params\"\r\n                queryParamsHandling=\"merge\">{{page.name}}</a>\r\n        </li>\r\n        <li class=\"page-item\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.next\" queryParamsHandling=\"merge\"\r\n                [ngClass]=\"{'pe-none opacity-50':currentPage>=amountOfPages}\" [attr.aria-disabled]=\"currentPage>=amountOfPages\">\r\n                <i class=\"fas fa-chevron-right\"></i>\r\n            </a>\r\n        </li>\r\n        <ng-container *ngIf=\"!infiniteLimit\">\r\n            <li *ngIf=\"(amountOfPages-1)*limit<10000\" class=\"page-item\">\r\n                <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.last\" queryParamsHandling=\"merge\"\r\n                    [attr.aria-disabled]=\"currentPage>=amountOfPages\" [ngClass]=\"{'pe-none opacity-50':currentPage>=amountOfPages}\">\r\n                    <i class=\"fas fa-chevron-double-right\"></i>\r\n                </a>\r\n            </li>\r\n        </ng-container>\r\n        <li class=\"page-item\" *ngIf=\"infiniteLimit\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.last\" queryParamsHandling=\"merge\"\r\n                [attr.aria-disabled]=\"currentPage>=amountOfPages\" [ngClass]=\"{'pe-none opacity-50':currentPage>=amountOfPages}\">\r\n                <i class=\"fas fa-chevron-double-right\"></i>\r\n            </a>\r\n        </li>\r\n    </ul>\r\n</nav>", directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: PagerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'adb-pager-nav', template: "<nav *ngIf=\"pages&&pages.length>1&&currentPage<=amountOfPages\" class=\"d-flex justify-content-end my-1\">\r\n    <ul class=\"pagination mb-0\">\r\n        <li class=\"page-item\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.first\" queryParamsHandling=\"merge\"\r\n                [ngClass]=\"{'pe-none opacity-50':currentPage===1}\" [attr.aria-disabled]=\"currentPage===1\">\r\n                <i class=\"fas fa-chevron-double-left\"></i>\r\n            </a>\r\n        </li>\r\n        <li class=\"page-item\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.prev\" queryParamsHandling=\"merge\"\r\n                [ngClass]=\"{'pe-none opacity-50':currentPage===1}\" [attr.aria-disabled]=\"currentPage===1\">\r\n                <i class=\"fas fa-chevron-left\"></i>\r\n            </a>\r\n        </li>\r\n        <li class=\"page-item\" [class.active]=\"currentPage===page.name\" *ngFor=\"let page of params.pages\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"page.params\"\r\n                queryParamsHandling=\"merge\">{{page.name}}</a>\r\n        </li>\r\n        <li class=\"page-item\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.next\" queryParamsHandling=\"merge\"\r\n                [ngClass]=\"{'pe-none opacity-50':currentPage>=amountOfPages}\" [attr.aria-disabled]=\"currentPage>=amountOfPages\">\r\n                <i class=\"fas fa-chevron-right\"></i>\r\n            </a>\r\n        </li>\r\n        <ng-container *ngIf=\"!infiniteLimit\">\r\n            <li *ngIf=\"(amountOfPages-1)*limit<10000\" class=\"page-item\">\r\n                <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.last\" queryParamsHandling=\"merge\"\r\n                    [attr.aria-disabled]=\"currentPage>=amountOfPages\" [ngClass]=\"{'pe-none opacity-50':currentPage>=amountOfPages}\">\r\n                    <i class=\"fas fa-chevron-double-right\"></i>\r\n                </a>\r\n            </li>\r\n        </ng-container>\r\n        <li class=\"page-item\" *ngIf=\"infiniteLimit\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.last\" queryParamsHandling=\"merge\"\r\n                [attr.aria-disabled]=\"currentPage>=amountOfPages\" [ngClass]=\"{'pe-none opacity-50':currentPage>=amountOfPages}\">\r\n                <i class=\"fas fa-chevron-double-right\"></i>\r\n            </a>\r\n        </li>\r\n    </ul>\r\n</nav>" }]
-        }], ctorParameters: function () { return [{ type: i2$1.ActivatedRoute }]; }, propDecorators: { offsetName: [{
+        }], ctorParameters: function () { return [{ type: i2.ActivatedRoute }]; }, propDecorators: { offsetName: [{
                 type: Input
             }], infiniteLimit: [{
                 type: Input
@@ -644,7 +544,7 @@ class PagerInlineComponent extends PagerBaseDirective {
     }
 }
 /** @nocollapse */ PagerInlineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: PagerInlineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ PagerInlineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: PagerInlineComponent, selector: "adb-pager", outputs: { pageChanged: "pageChanged" }, usesInheritance: true, ngImport: i0, template: "<nav *ngIf=\"pages&&pages.length>1&&currentPage<=amountOfPages\" class=\"d-flex justify-content-end pr-2 my-1\">\r\n    <ul class=\"pagination\">\r\n        <li class=\"page-item\" [class.disabled]=\"currentPage==1\">\r\n            <button class=\"page-link\" (click)=\"onFirstClick()\">\r\n                <i class=\"fas fa-chevron-double-left\"></i>\r\n            </button>\r\n        </li>\r\n        <li class=\"page-item\" [class.disabled]=\"currentPage==1\">\r\n            <button class=\"page-link\" (click)=\"onPrevClick()\">\r\n                <i class=\"fas fa-chevron-left\"></i>\r\n            </button>\r\n        </li>\r\n        <li class=\"page-item\" [class.active]=\"currentPage==page\" *ngFor=\"let page of pages\">\r\n            <button class=\"page-link\" (click)=\"onPageClick(page)\">\r\n                {{page}}\r\n            </button>\r\n        </li>\r\n        <li class=\"page-item\" [class.disabled]=\"currentPage>=amountOfPages\">\r\n            <button class=\"page-link\" (click)=\"onNextClick()\">\r\n                <i class=\"fas fa-chevron-right\"></i>\r\n            </button>\r\n        </li>\r\n        <li class=\"page-item\" [class.disabled]=\"currentPage>=amountOfPages\">\r\n            <button class=\"page-link\" (click)=\"onLastClick()\">\r\n                <i class=\"fas fa-chevron-double-right\"></i>\r\n            </button>\r\n        </li>\r\n    </ul>\r\n</nav>\r\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+/** @nocollapse */ PagerInlineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: PagerInlineComponent, selector: "adb-pager", outputs: { pageChanged: "pageChanged" }, usesInheritance: true, ngImport: i0, template: "<nav *ngIf=\"pages&&pages.length>1&&currentPage<=amountOfPages\" class=\"d-flex justify-content-end pr-2 my-1\">\r\n    <ul class=\"pagination\">\r\n        <li class=\"page-item\" [class.disabled]=\"currentPage==1\">\r\n            <button class=\"page-link\" (click)=\"onFirstClick()\">\r\n                <i class=\"fas fa-chevron-double-left\"></i>\r\n            </button>\r\n        </li>\r\n        <li class=\"page-item\" [class.disabled]=\"currentPage==1\">\r\n            <button class=\"page-link\" (click)=\"onPrevClick()\">\r\n                <i class=\"fas fa-chevron-left\"></i>\r\n            </button>\r\n        </li>\r\n        <li class=\"page-item\" [class.active]=\"currentPage==page\" *ngFor=\"let page of pages\">\r\n            <button class=\"page-link\" (click)=\"onPageClick(page)\">\r\n                {{page}}\r\n            </button>\r\n        </li>\r\n        <li class=\"page-item\" [class.disabled]=\"currentPage>=amountOfPages\">\r\n            <button class=\"page-link\" (click)=\"onNextClick()\">\r\n                <i class=\"fas fa-chevron-right\"></i>\r\n            </button>\r\n        </li>\r\n        <li class=\"page-item\" [class.disabled]=\"currentPage>=amountOfPages\">\r\n            <button class=\"page-link\" (click)=\"onLastClick()\">\r\n                <i class=\"fas fa-chevron-double-right\"></i>\r\n            </button>\r\n        </li>\r\n    </ul>\r\n</nav>\r\n", directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: PagerInlineComponent, decorators: [{
             type: Component,
             args: [{ selector: 'adb-pager', template: "<nav *ngIf=\"pages&&pages.length>1&&currentPage<=amountOfPages\" class=\"d-flex justify-content-end pr-2 my-1\">\r\n    <ul class=\"pagination\">\r\n        <li class=\"page-item\" [class.disabled]=\"currentPage==1\">\r\n            <button class=\"page-link\" (click)=\"onFirstClick()\">\r\n                <i class=\"fas fa-chevron-double-left\"></i>\r\n            </button>\r\n        </li>\r\n        <li class=\"page-item\" [class.disabled]=\"currentPage==1\">\r\n            <button class=\"page-link\" (click)=\"onPrevClick()\">\r\n                <i class=\"fas fa-chevron-left\"></i>\r\n            </button>\r\n        </li>\r\n        <li class=\"page-item\" [class.active]=\"currentPage==page\" *ngFor=\"let page of pages\">\r\n            <button class=\"page-link\" (click)=\"onPageClick(page)\">\r\n                {{page}}\r\n            </button>\r\n        </li>\r\n        <li class=\"page-item\" [class.disabled]=\"currentPage>=amountOfPages\">\r\n            <button class=\"page-link\" (click)=\"onNextClick()\">\r\n                <i class=\"fas fa-chevron-right\"></i>\r\n            </button>\r\n        </li>\r\n        <li class=\"page-item\" [class.disabled]=\"currentPage>=amountOfPages\">\r\n            <button class=\"page-link\" (click)=\"onLastClick()\">\r\n                <i class=\"fas fa-chevron-double-right\"></i>\r\n            </button>\r\n        </li>\r\n    </ul>\r\n</nav>\r\n" }]
@@ -713,12 +613,12 @@ class ADBFooterComponent {
         this.subscription.unsubscribe();
     }
 }
-/** @nocollapse */ ADBFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ADBFooterComponent, deps: [{ token: i1.HttpClient }, { token: EnvironmentService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ ADBFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: ADBFooterComponent, selector: "adb-footer", inputs: { artfakta: "artfakta" }, ngImport: i0, template: "<footer class=\"bg-primary-dark py-2 mt-auto container-fluid\" *ngIf=\"translationFinished\">\r\n    <div class=\"d-flex justify-content-center\">\r\n        <div class=\"container py-3 justify-content-center\">\r\n            <div class=\"row mb-3\">\r\n                <div class=\"col-md-2\"></div>\r\n                <div class=\"col-md-4 px-md-2\">\r\n                    <a href=\"https://artfakta.se/om\" class=\"d-block text-white mb-2\">{{'FOOTER.ABOUT'|translate}}</a>\r\n                    <a href=\"https://artfakta.se/om\" fragment=\"accessability\" class=\"d-block text-white mb-2\">{{'FOOTER.WCAG'|translate}}</a>\r\n                    <a class=\"d-block text-white mb-2\" href=\"mailto:artfakta@artdatabanken.se\">{{'FOOTER.SUPPORT'|translate}}: artfakta@artdatabanken.se</a>\r\n                </div>\r\n                <div class=\"col-md-4 px-md-2\">\r\n                    <a class=\"d-block text-white mb-2\" href=\"https://www.artdatabanken.se/tjanster-och-miljodata/villkor-kontohavare/\" target=\"_blank\">{{'FOOTER.TERMS_OF_USE'|translate}} <span class=\"fas fa-external-link\"></span></a>\r\n                    <a class=\"d-block text-white mb-2\" href=\"https://www.artdatabanken.se/om-oss/behandling-av-personuppgifter\" target=\"_blank\">{{'FOOTER.PERSONAL_DATA'|translate}} <span\r\n                            class=\"fas fa-external-link\"></span></a>\r\n                    <a class=\"d-block text-white mb-2\" href=\"https://metadata.artfakta.se/dataproviders\" target=\"_blank\">{{'FOOTER.DATA_SOURCES'|translate}} <span class=\"fas fa-external-link\"></span></a>\r\n                    <a class=\"d-block text-white mb-2\" href=\"https://status.artdatabanken.se/status\" target=\"_blank\">{{'FOOTER.API'|translate}} <span class=\"fas fa-external-link\"></span></a>\r\n                </div>\r\n                <div class=\"col-md-2\"></div>\r\n            </div>\r\n            <div class=\"row\">\r\n                <div class=\"col-md-2\"></div>\r\n                <div class=\"col-md-8 px-md-2\">\r\n                    <div class=\"row\">\r\n                        <div class=\"col-lg-4\">\r\n                            <a class=\"text-white text-decoration-none d-flex gap-2 mb-3\" href=\"https://www.artdatabanken.se/\" target=\"new\">\r\n                                <img style=\"height: 2rem;\" src=\"/assets/images/logo_sm_white.png\">\r\n                                <div class=\"border-end\"></div>\r\n                                <div class=\"align-self-center\">ARTDATABANKEN</div>\r\n                            </a>\r\n                        </div>\r\n                        <div class=\"col-lg-8\">\r\n                            <div class=\"mb-2 text-white\">{{'FOOTER.INFO'|translate}}</div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-md-2\"></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</footer>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i3.TranslatePipe } });
+/** @nocollapse */ ADBFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ADBFooterComponent, deps: [{ token: i1.HttpClient }, { token: EnvironmentService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ ADBFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: ADBFooterComponent, selector: "adb-footer", inputs: { artfakta: "artfakta" }, ngImport: i0, template: "<footer class=\"bg-primary-dark py-2 mt-auto container-fluid\" *ngIf=\"translationFinished\">\r\n    <div class=\"d-flex justify-content-center\">\r\n        <div class=\"container py-3 justify-content-center\">\r\n            <div class=\"row mb-3\">\r\n                <div class=\"col-md-2\"></div>\r\n                <div class=\"col-md-4 px-md-2\">\r\n                    <a href=\"https://artfakta.se/om\" class=\"d-block text-white mb-2\">{{'FOOTER.ABOUT'|translate}}</a>\r\n                    <a href=\"https://artfakta.se/om\" fragment=\"accessability\" class=\"d-block text-white mb-2\">{{'FOOTER.WCAG'|translate}}</a>\r\n                    <a class=\"d-block text-white mb-2\" href=\"mailto:artfakta@artdatabanken.se\">{{'FOOTER.SUPPORT'|translate}}: artfakta@artdatabanken.se</a>\r\n                </div>\r\n                <div class=\"col-md-4 px-md-2\">\r\n                    <a class=\"d-block text-white mb-2\" href=\"https://www.artdatabanken.se/tjanster-och-miljodata/villkor-kontohavare/\" target=\"_blank\">{{'FOOTER.TERMS_OF_USE'|translate}} <span class=\"fas fa-external-link\"></span></a>\r\n                    <a class=\"d-block text-white mb-2\" href=\"https://www.artdatabanken.se/om-oss/behandling-av-personuppgifter\" target=\"_blank\">{{'FOOTER.PERSONAL_DATA'|translate}} <span\r\n                            class=\"fas fa-external-link\"></span></a>\r\n                    <a class=\"d-block text-white mb-2\" href=\"https://metadata.artfakta.se/dataproviders\" target=\"_blank\">{{'FOOTER.DATA_SOURCES'|translate}} <span class=\"fas fa-external-link\"></span></a>\r\n                    <a class=\"d-block text-white mb-2\" href=\"https://status.artdatabanken.se/status\" target=\"_blank\">{{'FOOTER.API'|translate}} <span class=\"fas fa-external-link\"></span></a>\r\n                </div>\r\n                <div class=\"col-md-2\"></div>\r\n            </div>\r\n            <div class=\"row\">\r\n                <div class=\"col-md-2\"></div>\r\n                <div class=\"col-md-4 px-md-2\">\r\n                    <div class=\"mb-2 text-white\">{{'FOOTER.INFO'|translate}}</div>\r\n                </div>\r\n                <div class=\"col-md-4\">\r\n                    <a class=\"text-white text-decoration-none d-flex gap-2 mb-3\" href=\"https://www.artdatabanken.se/\" target=\"new\">\r\n                        <img style=\"height: 2rem;\" src=\"/assets/images/logo_sm_white.png\">\r\n                        <div class=\"border-end\"></div>\r\n                        <div class=\"align-self-center\">ARTDATABANKEN</div>\r\n                    </a>\r\n                </div>\r\n                <div class=\"col-md-2\"></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</footer>", directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1$1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ADBFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'adb-footer', template: "<footer class=\"bg-primary-dark py-2 mt-auto container-fluid\" *ngIf=\"translationFinished\">\r\n    <div class=\"d-flex justify-content-center\">\r\n        <div class=\"container py-3 justify-content-center\">\r\n            <div class=\"row mb-3\">\r\n                <div class=\"col-md-2\"></div>\r\n                <div class=\"col-md-4 px-md-2\">\r\n                    <a href=\"https://artfakta.se/om\" class=\"d-block text-white mb-2\">{{'FOOTER.ABOUT'|translate}}</a>\r\n                    <a href=\"https://artfakta.se/om\" fragment=\"accessability\" class=\"d-block text-white mb-2\">{{'FOOTER.WCAG'|translate}}</a>\r\n                    <a class=\"d-block text-white mb-2\" href=\"mailto:artfakta@artdatabanken.se\">{{'FOOTER.SUPPORT'|translate}}: artfakta@artdatabanken.se</a>\r\n                </div>\r\n                <div class=\"col-md-4 px-md-2\">\r\n                    <a class=\"d-block text-white mb-2\" href=\"https://www.artdatabanken.se/tjanster-och-miljodata/villkor-kontohavare/\" target=\"_blank\">{{'FOOTER.TERMS_OF_USE'|translate}} <span class=\"fas fa-external-link\"></span></a>\r\n                    <a class=\"d-block text-white mb-2\" href=\"https://www.artdatabanken.se/om-oss/behandling-av-personuppgifter\" target=\"_blank\">{{'FOOTER.PERSONAL_DATA'|translate}} <span\r\n                            class=\"fas fa-external-link\"></span></a>\r\n                    <a class=\"d-block text-white mb-2\" href=\"https://metadata.artfakta.se/dataproviders\" target=\"_blank\">{{'FOOTER.DATA_SOURCES'|translate}} <span class=\"fas fa-external-link\"></span></a>\r\n                    <a class=\"d-block text-white mb-2\" href=\"https://status.artdatabanken.se/status\" target=\"_blank\">{{'FOOTER.API'|translate}} <span class=\"fas fa-external-link\"></span></a>\r\n                </div>\r\n                <div class=\"col-md-2\"></div>\r\n            </div>\r\n            <div class=\"row\">\r\n                <div class=\"col-md-2\"></div>\r\n                <div class=\"col-md-8 px-md-2\">\r\n                    <div class=\"row\">\r\n                        <div class=\"col-lg-4\">\r\n                            <a class=\"text-white text-decoration-none d-flex gap-2 mb-3\" href=\"https://www.artdatabanken.se/\" target=\"new\">\r\n                                <img style=\"height: 2rem;\" src=\"/assets/images/logo_sm_white.png\">\r\n                                <div class=\"border-end\"></div>\r\n                                <div class=\"align-self-center\">ARTDATABANKEN</div>\r\n                            </a>\r\n                        </div>\r\n                        <div class=\"col-lg-8\">\r\n                            <div class=\"mb-2 text-white\">{{'FOOTER.INFO'|translate}}</div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-md-2\"></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</footer>" }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: EnvironmentService }, { type: i3.TranslateService }]; }, propDecorators: { artfakta: [{
+            args: [{ selector: 'adb-footer', template: "<footer class=\"bg-primary-dark py-2 mt-auto container-fluid\" *ngIf=\"translationFinished\">\r\n    <div class=\"d-flex justify-content-center\">\r\n        <div class=\"container py-3 justify-content-center\">\r\n            <div class=\"row mb-3\">\r\n                <div class=\"col-md-2\"></div>\r\n                <div class=\"col-md-4 px-md-2\">\r\n                    <a href=\"https://artfakta.se/om\" class=\"d-block text-white mb-2\">{{'FOOTER.ABOUT'|translate}}</a>\r\n                    <a href=\"https://artfakta.se/om\" fragment=\"accessability\" class=\"d-block text-white mb-2\">{{'FOOTER.WCAG'|translate}}</a>\r\n                    <a class=\"d-block text-white mb-2\" href=\"mailto:artfakta@artdatabanken.se\">{{'FOOTER.SUPPORT'|translate}}: artfakta@artdatabanken.se</a>\r\n                </div>\r\n                <div class=\"col-md-4 px-md-2\">\r\n                    <a class=\"d-block text-white mb-2\" href=\"https://www.artdatabanken.se/tjanster-och-miljodata/villkor-kontohavare/\" target=\"_blank\">{{'FOOTER.TERMS_OF_USE'|translate}} <span class=\"fas fa-external-link\"></span></a>\r\n                    <a class=\"d-block text-white mb-2\" href=\"https://www.artdatabanken.se/om-oss/behandling-av-personuppgifter\" target=\"_blank\">{{'FOOTER.PERSONAL_DATA'|translate}} <span\r\n                            class=\"fas fa-external-link\"></span></a>\r\n                    <a class=\"d-block text-white mb-2\" href=\"https://metadata.artfakta.se/dataproviders\" target=\"_blank\">{{'FOOTER.DATA_SOURCES'|translate}} <span class=\"fas fa-external-link\"></span></a>\r\n                    <a class=\"d-block text-white mb-2\" href=\"https://status.artdatabanken.se/status\" target=\"_blank\">{{'FOOTER.API'|translate}} <span class=\"fas fa-external-link\"></span></a>\r\n                </div>\r\n                <div class=\"col-md-2\"></div>\r\n            </div>\r\n            <div class=\"row\">\r\n                <div class=\"col-md-2\"></div>\r\n                <div class=\"col-md-4 px-md-2\">\r\n                    <div class=\"mb-2 text-white\">{{'FOOTER.INFO'|translate}}</div>\r\n                </div>\r\n                <div class=\"col-md-4\">\r\n                    <a class=\"text-white text-decoration-none d-flex gap-2 mb-3\" href=\"https://www.artdatabanken.se/\" target=\"new\">\r\n                        <img style=\"height: 2rem;\" src=\"/assets/images/logo_sm_white.png\">\r\n                        <div class=\"border-end\"></div>\r\n                        <div class=\"align-self-center\">ARTDATABANKEN</div>\r\n                    </a>\r\n                </div>\r\n                <div class=\"col-md-2\"></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</footer>" }]
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: EnvironmentService }, { type: i1$1.TranslateService }]; }, propDecorators: { artfakta: [{
                 type: Input
             }] } });
 
@@ -737,13 +637,13 @@ class ADBHeaderModule {
     }
 }
 /** @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, ADBFooterComponent], imports: [CommonModule,
+/** @nocollapse */ ADBHeaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ADBHeaderModule, declarations: [ADBNavComponent, ADBFooterComponent], imports: [CommonModule,
         HttpClientModule,
         RouterModule,
         TranslateModule,
         AdbDirectivesModule,
         AdbDropdownModule,
-        AdbPagersModule], exports: [ADBHeaderComponent, ADBNavComponent, ADBFooterComponent] });
+        AdbPagersModule], exports: [ADBNavComponent, ADBFooterComponent] });
 /** @nocollapse */ ADBHeaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ADBHeaderModule, imports: [[
             CommonModule,
             HttpClientModule,
@@ -756,7 +656,7 @@ class ADBHeaderModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ADBHeaderModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [ADBHeaderComponent, ADBNavComponent, ADBFooterComponent],
+                    declarations: [ADBNavComponent, ADBFooterComponent],
                     imports: [
                         CommonModule,
                         HttpClientModule,
@@ -766,7 +666,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                         AdbDropdownModule,
                         AdbPagersModule
                     ],
-                    exports: [ADBHeaderComponent, ADBNavComponent, ADBFooterComponent]
+                    exports: [ADBNavComponent, ADBFooterComponent]
                 }]
         }] });
 
@@ -778,7 +678,7 @@ class LocaleDatePipe {
         return new DatePipe(this.translate.currentLang).transform(value, format, null, this.translate.currentLang);
     }
 }
-/** @nocollapse */ LocaleDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: LocaleDatePipe, deps: [{ token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ LocaleDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: LocaleDatePipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe });
 /** @nocollapse */ LocaleDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: LocaleDatePipe, name: "adbLocaleDate", pure: false });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: LocaleDatePipe, decorators: [{
             type: Pipe,
@@ -786,7 +686,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                     name: 'adbLocaleDate',
                     pure: false
                 }]
-        }], ctorParameters: function () { return [{ type: i3.TranslateService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.TranslateService }]; } });
 
 class EmptyValuePipe {
     transform(value) {
@@ -1036,12 +936,12 @@ class AdbDatePickerComponent {
 AdbDatePickerComponent.MONTHS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
 AdbDatePickerComponent.WEEK_DAYS = ['1', '2', '3', '4', '5', '6', '7'];
 AdbDatePickerComponent.YEAR_INTERVALL = 8;
-/** @nocollapse */ AdbDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ AdbDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: AdbDatePickerComponent, selector: "adb-date-picker", inputs: { initialDate: "initialDate", settings: "settings", toLeft: "toLeft", id: "id" }, outputs: { selectDate: "selectDate", hide: "hide" }, host: { properties: { "id": "this.id" } }, ngImport: i0, template: "<div class=\"position-relative\" [class.to-left]=\"toLeft\">\r\n    <nav class=\"bg-white shadow rounded position-absolute\" style=\"width:350px\">\r\n        <header class=\"bg-primary p-2 rounded-top d-flex justify-content-between align-items-center gap-1\">\r\n            <button tabIndex=\"-1\" class=\"btn btn-primary text-white  rounded-pill\" type=\"button\" (click)=\"onPrev()\" [disabled]=\"noYearMode&&currentMonth===0\"><span class=\"fa fa-chevron-left\"></span></button>\r\n            <ng-container *ngIf=\"!years&&!months\">\r\n                <button tabIndex=\"-1\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowMonth();$event.stopPropagation()\">{{selectedDate|adbLocaleDate:'MMM'}}</button>\r\n                <button *ngIf=\"!noYearMode\" tabIndex=\"-1\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowYear();$event.stopPropagation()\">{{selectedDate|date:'yyyy'}}</button>\r\n            </ng-container>\r\n            <button tabIndex=\"-1\" *ngIf=\"years\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"years=null;$event.stopPropagation()\">{{years[0].title}} - {{years[years.length-1].title}}</button>\r\n            <button tabIndex=\"-1\" *ngIf=\"months\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowYear();$event.stopPropagation()\">{{selectedDate|date:'yyyy'}}</button>\r\n            <button tabIndex=\"-1\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onNext()\" [disabled]=\"noYearMode&&currentMonth===11\"><span class=\"fa fa-chevron-right\"></span></button>\r\n        </header>\r\n        <div class=\"p-0 border calendar\">\r\n            <ul class=\"list-unstyled row\" *ngIf=\"years\">\r\n                <li class=\"col-3 text-center px-2 py-3\" *ngFor=\"let year of years\">\r\n                    <button type=\"button\" tabIndex=\"-1\" class=\"btn btn-sm btn-outline-secondary rounded-pill\" (click)=\"onSelectYear(year.value);$event.stopPropagation()\" [class.active]=\"year.hasObservation\" [ngClass]=\"{'border border-secondary':year.isThisYear}\">{{year.title}}</button>\r\n                </li>\r\n            </ul>\r\n            <ul class=\"list-unstyled row\" *ngIf=\"months\">\r\n                <li class=\"col-4 text-center px-2 py-3\" *ngFor=\"let month of months\">\r\n                    <button type=\"button\" tabIndex=\"-1\" class=\"btn btn-sm btn-outline-secondary rounded-pill\" (click)=\"onSelectMonth(month.value);$event.stopPropagation()\" [class.active]=\"month.observation\" [ngClass]=\"{'border border-secondary':month.isThisMonth}\">\r\n                        {{'MONTHS.'+(month.value+1)|translate}}\r\n                    </button>\r\n                </li>\r\n            </ul>\r\n            <div class=\"days\" *ngIf=\"!years&&!months\">\r\n                <div class=\"text-center border-bottom py-2 text-muted\" *ngFor=\"let weekDay of weekDays\">{{'WEEK_DAYS.'+weekDay|translate}}</div>\r\n                <ng-container *ngFor=\"let week of weeks\">\r\n                    <button tabIndex=\"-1\" class=\"btn rounded-circle p-0 m-2\" *ngFor=\"let day of week.days\" (click)=\"onSelectDate(day)\" type=\"button\" \r\n                        [class.border]=\"day.isToday\" [class.bg-primary]=\"day.isSelected\" [class.text-white]=\"day.isSelected\" [ngClass]=\"{'pe-none text-muted opacity-50':!day.inMonth||!day.isInRange}\">\r\n                        <small>{{day.value|date:'d'}}</small>\r\n                    </button>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </nav>\r\n</div>", 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: { "adbLocaleDate": LocaleDatePipe, "date": i2.DatePipe, "translate": i3.TranslatePipe } });
+/** @nocollapse */ AdbDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ AdbDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: AdbDatePickerComponent, selector: "adb-date-picker", inputs: { initialDate: "initialDate", settings: "settings", toLeft: "toLeft", id: "id" }, outputs: { selectDate: "selectDate", hide: "hide" }, host: { properties: { "id": "this.id" } }, ngImport: i0, template: "<div class=\"position-relative\" [class.to-left]=\"toLeft\">\r\n    <nav class=\"bg-white shadow rounded position-absolute\" style=\"width:350px\">\r\n        <header class=\"bg-primary p-2 rounded-top d-flex justify-content-between align-items-center gap-1\">\r\n            <button tabIndex=\"-1\" class=\"btn btn-primary text-white  rounded-pill\" type=\"button\" (click)=\"onPrev()\" [disabled]=\"noYearMode&&currentMonth===0\"><span class=\"fa fa-chevron-left\"></span></button>\r\n            <ng-container *ngIf=\"!years&&!months\">\r\n                <button tabIndex=\"-1\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowMonth();$event.stopPropagation()\">{{selectedDate|adbLocaleDate:'MMM'}}</button>\r\n                <button *ngIf=\"!noYearMode\" tabIndex=\"-1\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowYear();$event.stopPropagation()\">{{selectedDate|date:'yyyy'}}</button>\r\n            </ng-container>\r\n            <button tabIndex=\"-1\" *ngIf=\"years\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"years=null;$event.stopPropagation()\">{{years[0].title}} - {{years[years.length-1].title}}</button>\r\n            <button tabIndex=\"-1\" *ngIf=\"months\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowYear();$event.stopPropagation()\">{{selectedDate|date:'yyyy'}}</button>\r\n            <button tabIndex=\"-1\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onNext()\" [disabled]=\"noYearMode&&currentMonth===11\"><span class=\"fa fa-chevron-right\"></span></button>\r\n        </header>\r\n        <div class=\"p-0 border calendar\">\r\n            <ul class=\"list-unstyled row\" *ngIf=\"years\">\r\n                <li class=\"col-3 text-center px-2 py-3\" *ngFor=\"let year of years\">\r\n                    <button type=\"button\" tabIndex=\"-1\" class=\"btn btn-sm btn-outline-secondary rounded-pill\" (click)=\"onSelectYear(year.value);$event.stopPropagation()\" [class.active]=\"year.hasObservation\" [ngClass]=\"{'border border-secondary':year.isThisYear}\">{{year.title}}</button>\r\n                </li>\r\n            </ul>\r\n            <ul class=\"list-unstyled row\" *ngIf=\"months\">\r\n                <li class=\"col-4 text-center px-2 py-3\" *ngFor=\"let month of months\">\r\n                    <button type=\"button\" tabIndex=\"-1\" class=\"btn btn-sm btn-outline-secondary rounded-pill\" (click)=\"onSelectMonth(month.value);$event.stopPropagation()\" [class.active]=\"month.observation\" [ngClass]=\"{'border border-secondary':month.isThisMonth}\">\r\n                        {{'MONTHS.'+(month.value+1)|translate}}\r\n                    </button>\r\n                </li>\r\n            </ul>\r\n            <div class=\"days\" *ngIf=\"!years&&!months\">\r\n                <div class=\"text-center border-bottom py-2 text-muted\" *ngFor=\"let weekDay of weekDays\">{{'WEEK_DAYS.'+weekDay|translate}}</div>\r\n                <ng-container *ngFor=\"let week of weeks\">\r\n                    <button tabIndex=\"-1\" class=\"btn rounded-circle p-0 m-2\" *ngFor=\"let day of week.days\" (click)=\"onSelectDate(day)\" type=\"button\" \r\n                        [class.border]=\"day.isToday\" [class.bg-primary]=\"day.isSelected\" [class.text-white]=\"day.isSelected\" [ngClass]=\"{'pe-none text-muted opacity-50':!day.inMonth||!day.isInRange}\">\r\n                        <small>{{day.value|date:'d'}}</small>\r\n                    </button>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </nav>\r\n</div>", directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "adbLocaleDate": LocaleDatePipe, "date": i2$1.DatePipe, "translate": i1$1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDatePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'adb-date-picker', template: "<div class=\"position-relative\" [class.to-left]=\"toLeft\">\r\n    <nav class=\"bg-white shadow rounded position-absolute\" style=\"width:350px\">\r\n        <header class=\"bg-primary p-2 rounded-top d-flex justify-content-between align-items-center gap-1\">\r\n            <button tabIndex=\"-1\" class=\"btn btn-primary text-white  rounded-pill\" type=\"button\" (click)=\"onPrev()\" [disabled]=\"noYearMode&&currentMonth===0\"><span class=\"fa fa-chevron-left\"></span></button>\r\n            <ng-container *ngIf=\"!years&&!months\">\r\n                <button tabIndex=\"-1\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowMonth();$event.stopPropagation()\">{{selectedDate|adbLocaleDate:'MMM'}}</button>\r\n                <button *ngIf=\"!noYearMode\" tabIndex=\"-1\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowYear();$event.stopPropagation()\">{{selectedDate|date:'yyyy'}}</button>\r\n            </ng-container>\r\n            <button tabIndex=\"-1\" *ngIf=\"years\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"years=null;$event.stopPropagation()\">{{years[0].title}} - {{years[years.length-1].title}}</button>\r\n            <button tabIndex=\"-1\" *ngIf=\"months\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowYear();$event.stopPropagation()\">{{selectedDate|date:'yyyy'}}</button>\r\n            <button tabIndex=\"-1\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onNext()\" [disabled]=\"noYearMode&&currentMonth===11\"><span class=\"fa fa-chevron-right\"></span></button>\r\n        </header>\r\n        <div class=\"p-0 border calendar\">\r\n            <ul class=\"list-unstyled row\" *ngIf=\"years\">\r\n                <li class=\"col-3 text-center px-2 py-3\" *ngFor=\"let year of years\">\r\n                    <button type=\"button\" tabIndex=\"-1\" class=\"btn btn-sm btn-outline-secondary rounded-pill\" (click)=\"onSelectYear(year.value);$event.stopPropagation()\" [class.active]=\"year.hasObservation\" [ngClass]=\"{'border border-secondary':year.isThisYear}\">{{year.title}}</button>\r\n                </li>\r\n            </ul>\r\n            <ul class=\"list-unstyled row\" *ngIf=\"months\">\r\n                <li class=\"col-4 text-center px-2 py-3\" *ngFor=\"let month of months\">\r\n                    <button type=\"button\" tabIndex=\"-1\" class=\"btn btn-sm btn-outline-secondary rounded-pill\" (click)=\"onSelectMonth(month.value);$event.stopPropagation()\" [class.active]=\"month.observation\" [ngClass]=\"{'border border-secondary':month.isThisMonth}\">\r\n                        {{'MONTHS.'+(month.value+1)|translate}}\r\n                    </button>\r\n                </li>\r\n            </ul>\r\n            <div class=\"days\" *ngIf=\"!years&&!months\">\r\n                <div class=\"text-center border-bottom py-2 text-muted\" *ngFor=\"let weekDay of weekDays\">{{'WEEK_DAYS.'+weekDay|translate}}</div>\r\n                <ng-container *ngFor=\"let week of weeks\">\r\n                    <button tabIndex=\"-1\" class=\"btn rounded-circle p-0 m-2\" *ngFor=\"let day of week.days\" (click)=\"onSelectDate(day)\" type=\"button\" \r\n                        [class.border]=\"day.isToday\" [class.bg-primary]=\"day.isSelected\" [class.text-white]=\"day.isSelected\" [ngClass]=\"{'pe-none text-muted opacity-50':!day.inMonth||!day.isInRange}\">\r\n                        <small>{{day.value|date:'d'}}</small>\r\n                    </button>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </nav>\r\n</div>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i3.TranslateService }]; }, propDecorators: { initialDate: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.TranslateService }]; }, propDecorators: { initialDate: [{
                 type: Input
             }], settings: [{
                 type: Input
@@ -1210,7 +1110,7 @@ class AdbDatePickerDirective {
         return '' + Math.floor(Math.random() * Date.now());
     }
 }
-/** @nocollapse */ AdbDatePickerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDatePickerDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: AdbDatePickerService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ AdbDatePickerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDatePickerDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: AdbDatePickerService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Directive });
 /** @nocollapse */ AdbDatePickerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: AdbDatePickerDirective, selector: "input[adbDatepicker]", inputs: { format: "format", toLeft: "toLeft", settings: "settings", pickOnly: "pickOnly" }, host: { listeners: { "click": "onClick()", "keyup": "onKeyup($event)", "keyup.esc": "onHide()", "keydown": "handleKeyboardEvent($event)", "document:click": "onCheckOutSideClick($event.target)" }, properties: { "autocomplete": "this.autocomplete" } }, providers: [{
             provide: NG_VALUE_ACCESSOR, useExisting: forwardRef((() => AdbDatePickerDirective)),
             multi: true
@@ -1234,7 +1134,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                             multi: true,
                         },]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: AdbDatePickerService }, { type: i3.TranslateService }]; }, propDecorators: { autocomplete: [{
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: AdbDatePickerService }, { type: i1$1.TranslateService }]; }, propDecorators: { autocomplete: [{
                 type: HostBinding,
                 args: ['autocomplete']
             }], format: [{
@@ -1265,7 +1165,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
 class AdbDatePickerModule {
 }
 /** @nocollapse */ AdbDatePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ AdbDatePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDatePickerModule, declarations: [AdbDatePickerComponent, AdbDatePickerDirective], imports: [CommonModule, i3.TranslateModule, AdbPipesModule, AdbDirectivesModule], exports: [AdbDatePickerComponent, AdbDatePickerDirective] });
+/** @nocollapse */ AdbDatePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDatePickerModule, declarations: [AdbDatePickerComponent, AdbDatePickerDirective], imports: [CommonModule, i1$1.TranslateModule, AdbPipesModule, AdbDirectivesModule], exports: [AdbDatePickerComponent, AdbDatePickerDirective] });
 /** @nocollapse */ AdbDatePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDatePickerModule, providers: [AdbDatePickerService], imports: [[CommonModule, TranslateModule.forChild(), AdbPipesModule, AdbDirectivesModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDatePickerModule, decorators: [{
             type: NgModule,
@@ -1327,7 +1227,7 @@ class AdbConfirmModal {
     }
 }
 /** @nocollapse */ AdbConfirmModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbConfirmModal, deps: [{ token: AdbModalService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ AdbConfirmModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: AdbConfirmModal, selector: "ng-component", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"modal fade show\" *ngIf=\"model\">\r\n    <div class=\"modal-dialog modal-dialog-centered\">\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n                <h1 class=\"h-subsection mb-0 modal-title\" translate>{{model.header}}</h1>\r\n                <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\" (click)=\"onClose(false)\"></button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                {{model.text|translate}}\r\n                <div *ngIf=\"model.value\">\r\n                    <strong>{{model.value}}</strong>\r\n                </div>\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n                <div class=\"text-right\">\r\n                    <button type=\"button\" class=\"btn btn-primary me-2\"\r\n                        (click)=\"onClose(true)\">{{model.confirm|translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-secondary\"\r\n                        (click)=\"onClose(false)\">{{model.decline|translate}}</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i3.TranslatePipe } });
+/** @nocollapse */ AdbConfirmModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: AdbConfirmModal, selector: "ng-component", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"modal fade show\" *ngIf=\"model\">\r\n    <div class=\"modal-dialog modal-dialog-centered\">\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n                <h1 class=\"h-subsection mb-0 modal-title\" translate>{{model.header}}</h1>\r\n                <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\" (click)=\"onClose(false)\"></button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                {{model.text|translate}}\r\n                <div *ngIf=\"model.value\">\r\n                    <strong>{{model.value}}</strong>\r\n                </div>\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n                <div class=\"text-right\">\r\n                    <button type=\"button\" class=\"btn btn-primary me-2\"\r\n                        (click)=\"onClose(true)\">{{model.confirm|translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-secondary\"\r\n                        (click)=\"onClose(false)\">{{model.decline|translate}}</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i1$1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbConfirmModal, decorators: [{
             type: Component,
             args: [{ template: "<div class=\"modal fade show\" *ngIf=\"model\">\r\n    <div class=\"modal-dialog modal-dialog-centered\">\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n                <h1 class=\"h-subsection mb-0 modal-title\" translate>{{model.header}}</h1>\r\n                <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\" (click)=\"onClose(false)\"></button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                {{model.text|translate}}\r\n                <div *ngIf=\"model.value\">\r\n                    <strong>{{model.value}}</strong>\r\n                </div>\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n                <div class=\"text-right\">\r\n                    <button type=\"button\" class=\"btn btn-primary me-2\"\r\n                        (click)=\"onClose(true)\">{{model.confirm|translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-secondary\"\r\n                        (click)=\"onClose(false)\">{{model.decline|translate}}</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>" }]
@@ -1338,7 +1238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
 class AdbModalModule {
 }
 /** @nocollapse */ AdbModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ AdbModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbModalModule, declarations: [AdbConfirmModal], imports: [CommonModule, i3.TranslateModule, AdbDirectivesModule], exports: [AdbConfirmModal] });
+/** @nocollapse */ AdbModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbModalModule, declarations: [AdbConfirmModal], imports: [CommonModule, i1$1.TranslateModule, AdbDirectivesModule], exports: [AdbConfirmModal] });
 /** @nocollapse */ AdbModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbModalModule, providers: [AdbModalService], imports: [[CommonModule, TranslateModule.forChild(), AdbDirectivesModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbModalModule, decorators: [{
             type: NgModule,
@@ -1413,7 +1313,7 @@ class AdbToast {
     }
 }
 /** @nocollapse */ AdbToast.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbToast, deps: [{ token: AdbToastService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ AdbToast.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: AdbToast, selector: "ng-component", ngImport: i0, template: "<div class=\"position-fixed bottom-0 end-0\" style=\"z-index: 50000;min-width: 15rem;\">\r\n    <div class=\"text-white px-3 pb-3 pt-2 mb-2\" *ngFor=\"let toast of toasts\"\r\n        [class.bg-success]=\"toast.type===toastType.Success\" [class.bg-info]=\"toast.type===toastType.Info\" [class.bg-danger]=\"toast.type===toastType.Warn\">\r\n        <div class=\"d-flex align-items-center justify-content-between pb-1\" *ngIf=\"toast.header\">\r\n            <div class=\"fw-bold pb-1\">{{toast.header|translate}}</div>\r\n            <button class=\"btn top-0 end-0 btn p-0 ms-2 text-white\" (click)=\"onRemoveToast(toast)\"><i class=\"fas fa-times\"></i></button>\r\n        </div>\r\n        <div class=\"d-flex align-items-center justify-content-between mt-1\">\r\n            <div *ngIf=\"!toast.messageValue\">{{toast.message|translate}}</div>\r\n            <div *ngIf=\"toast.messageValue\">{{(toast.message|translate:{value:toast.messageValue} )}}</div>\r\n            <button *ngIf=\"!toast.header\" class=\"btn p-0 ms-2 text-white\" (click)=\"onRemoveToast(toast)\"><i class=\"fas fa-times\"></i></button>\r\n        </div>\r\n    </div>\r\n</div>", directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i3.TranslatePipe } });
+/** @nocollapse */ AdbToast.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: AdbToast, selector: "ng-component", ngImport: i0, template: "<div class=\"position-fixed bottom-0 end-0\" style=\"z-index: 50000;min-width: 15rem;\">\r\n    <div class=\"text-white px-3 pb-3 pt-2 mb-2\" *ngFor=\"let toast of toasts\"\r\n        [class.bg-success]=\"toast.type===toastType.Success\" [class.bg-info]=\"toast.type===toastType.Info\" [class.bg-danger]=\"toast.type===toastType.Warn\">\r\n        <div class=\"d-flex align-items-center justify-content-between pb-1\" *ngIf=\"toast.header\">\r\n            <div class=\"fw-bold pb-1\">{{toast.header|translate}}</div>\r\n            <button class=\"btn top-0 end-0 btn p-0 ms-2 text-white\" (click)=\"onRemoveToast(toast)\"><i class=\"fas fa-times\"></i></button>\r\n        </div>\r\n        <div class=\"d-flex align-items-center justify-content-between mt-1\">\r\n            <div *ngIf=\"!toast.messageValue\">{{toast.message|translate}}</div>\r\n            <div *ngIf=\"toast.messageValue\">{{(toast.message|translate:{value:toast.messageValue} )}}</div>\r\n            <button *ngIf=\"!toast.header\" class=\"btn p-0 ms-2 text-white\" (click)=\"onRemoveToast(toast)\"><i class=\"fas fa-times\"></i></button>\r\n        </div>\r\n    </div>\r\n</div>", directives: [{ type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1$1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbToast, decorators: [{
             type: Component,
             args: [{ template: "<div class=\"position-fixed bottom-0 end-0\" style=\"z-index: 50000;min-width: 15rem;\">\r\n    <div class=\"text-white px-3 pb-3 pt-2 mb-2\" *ngFor=\"let toast of toasts\"\r\n        [class.bg-success]=\"toast.type===toastType.Success\" [class.bg-info]=\"toast.type===toastType.Info\" [class.bg-danger]=\"toast.type===toastType.Warn\">\r\n        <div class=\"d-flex align-items-center justify-content-between pb-1\" *ngIf=\"toast.header\">\r\n            <div class=\"fw-bold pb-1\">{{toast.header|translate}}</div>\r\n            <button class=\"btn top-0 end-0 btn p-0 ms-2 text-white\" (click)=\"onRemoveToast(toast)\"><i class=\"fas fa-times\"></i></button>\r\n        </div>\r\n        <div class=\"d-flex align-items-center justify-content-between mt-1\">\r\n            <div *ngIf=\"!toast.messageValue\">{{toast.message|translate}}</div>\r\n            <div *ngIf=\"toast.messageValue\">{{(toast.message|translate:{value:toast.messageValue} )}}</div>\r\n            <button *ngIf=\"!toast.header\" class=\"btn p-0 ms-2 text-white\" (click)=\"onRemoveToast(toast)\"><i class=\"fas fa-times\"></i></button>\r\n        </div>\r\n    </div>\r\n</div>" }]
@@ -1422,7 +1322,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
 class AdbToastModule {
 }
 /** @nocollapse */ AdbToastModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ AdbToastModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbToastModule, declarations: [AdbToast], imports: [CommonModule, i3.TranslateModule, AdbDirectivesModule], exports: [AdbToast] });
+/** @nocollapse */ AdbToastModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbToastModule, declarations: [AdbToast], imports: [CommonModule, i1$1.TranslateModule, AdbDirectivesModule], exports: [AdbToast] });
 /** @nocollapse */ AdbToastModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbToastModule, providers: [AdbToastService], imports: [[CommonModule, TranslateModule.forChild(), AdbDirectivesModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbToastModule, decorators: [{
             type: NgModule,
@@ -1442,5 +1342,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ADBFooterComponent, ADBHeaderComponent, ADBHeaderModule, ADBNavComponent, AdbConfirmModal, AdbDatePickerComponent, AdbDatePickerDirective, AdbDatePickerModule, AdbDirectivesModule, AdbDropdownDirective, AdbDropdownModule, AdbModalModule, AdbModalService, AdbPagersModule, AdbPipesModule, AdbToast, AdbToastModule, AdbToastService, ClickOutsideDirective, EmptyValuePipe, FileUploadDirective, FocusDirective, HighlightPipe2, InfiniteScrollComponent, LocaleDatePipe, NumberSpacingPipe, PagerComponent, PagerInlineComponent, RedListBadgeClassDirective, ToastType };
+export { ADBFooterComponent, ADBHeaderModule, ADBNavComponent, AdbConfirmModal, AdbDatePickerComponent, AdbDatePickerDirective, AdbDatePickerModule, AdbDirectivesModule, AdbDropdownDirective, AdbDropdownModule, AdbModalModule, AdbModalService, AdbPagersModule, AdbPipesModule, AdbToast, AdbToastModule, AdbToastService, ClickOutsideDirective, EmptyValuePipe, FileUploadDirective, FocusDirective, HighlightPipe2, InfiniteScrollComponent, LocaleDatePipe, NumberSpacingPipe, PagerComponent, PagerInlineComponent, RedListBadgeClassDirective, ToastType };
 //# sourceMappingURL=adb-shared.mjs.map