adb-shared 6.1.6 → 6.1.8

package/fesm2022/adb-shared.mjs

@@ -1,7 +1,7 @@
 import * as i2 from '@angular/common';
 import { CommonModule, DatePipe, formatDate } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Inject, Injectable, EventEmitter, HostListener, Output, Directive, Input, HostBinding, NgModule, Component, Pipe, forwardRef, InjectionToken } from '@angular/core';
+import { Inject, Injectable, EventEmitter, HostListener, Output, Directive, Input, HostBinding, NgModule, Component, Pipe, forwardRef, InjectionToken, TemplateRef, ContentChild } from '@angular/core';
 import * as i1$1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i1$2 from '@angular/common/http';
@@ -10,7 +10,7 @@ import * as i1 from '@angular/router';
 import { NavigationEnd, RouterModule, NavigationStart } from '@angular/router';
 import { Subscription, Subject, of, BehaviorSubject, catchError, throwError } from 'rxjs';
 import { endOfDay, addYears, startOfDay, subYears, getMonth, subMonths, addMonths, isSameYear, endOfMonth, startOfMonth, eachWeekOfInterval, getISOWeek, addDays, eachDayOfInterval, getHours, getMinutes, isSameDay, isWithinInterval, isSameMonth, isValid, parseISO, addSeconds, format } from 'date-fns';
-import * as i2$1 from '@angular/forms';
+import * as i1$3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
 import { delay } from 'rxjs/operators';
 
@@ -18,10 +18,10 @@ let EnvironmentService$1 = class EnvironmentService {
     constructor(environment) {
         this.environment = environment;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: EnvironmentService, deps: [{ token: 'env' }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: EnvironmentService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EnvironmentService, deps: [{ token: 'env' }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EnvironmentService }); }
 };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: EnvironmentService$1, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EnvironmentService$1, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -39,10 +39,10 @@ class ClickOutsideDirective {
             this.adbClickOutside.emit(target);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: ClickOutsideDirective, isStandalone: false, selector: "[adbClickOutside]", outputs: { adbClickOutside: "adbClickOutside" }, host: { listeners: { "document:click": "onClick($event.target)" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: ClickOutsideDirective, isStandalone: false, selector: "[adbClickOutside]", outputs: { adbClickOutside: "adbClickOutside" }, host: { listeners: { "document:click": "onClick($event.target)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ClickOutsideDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[adbClickOutside]',
@@ -74,10 +74,10 @@ class FileUploadDirective {
             this.click.emit(target);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FileUploadDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: FileUploadDirective, isStandalone: false, selector: "input[adbFileUpload]", outputs: { upload: "upload" }, host: { listeners: { "change": "onBeginUpload($event.target)", "click": "onClick($event.target)" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FileUploadDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: FileUploadDirective, isStandalone: false, selector: "input[adbFileUpload]", outputs: { upload: "upload" }, host: { listeners: { "change": "onBeginUpload($event.target)", "click": "onClick($event.target)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FileUploadDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FileUploadDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[adbFileUpload]',
@@ -110,10 +110,10 @@ class FocusDirective {
             setTimeout(() => this.element.nativeElement.focus(), 0);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: FocusDirective, isStandalone: false, selector: "[adbFocus]", inputs: { adbFocus: "adbFocus" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: FocusDirective, isStandalone: false, selector: "[adbFocus]", inputs: { adbFocus: "adbFocus" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FocusDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FocusDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[adbFocus]',
@@ -149,10 +149,10 @@ class RedListBadgeClassDirective {
         }
         return 'bg-redlist-lc border';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: RedListBadgeClassDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: RedListBadgeClassDirective, isStandalone: false, selector: "[adbRedListBadgeClass]", inputs: { redlistId: ["adbRedListBadgeClass", "redlistId"] }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RedListBadgeClassDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: RedListBadgeClassDirective, isStandalone: false, selector: "[adbRedListBadgeClass]", inputs: { redlistId: ["adbRedListBadgeClass", "redlistId"] }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: RedListBadgeClassDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RedListBadgeClassDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[adbRedListBadgeClass]',
@@ -185,10 +185,10 @@ class RiskClassDirective {
         }
         return 'text-dark';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: RiskClassDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: RiskClassDirective, isStandalone: false, selector: "[adbRiskClass]", inputs: { category: ["adbRiskClass", "category"] }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RiskClassDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: RiskClassDirective, isStandalone: false, selector: "[adbRiskClass]", inputs: { category: ["adbRiskClass", "category"] }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: RiskClassDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RiskClassDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[adbRiskClass]',
@@ -240,10 +240,10 @@ class RouterLinkActiveFragmentDirective {
             this.sub.unsubscribe();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: RouterLinkActiveFragmentDirective, deps: [{ token: i1.Router }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: RouterLinkActiveFragmentDirective, isStandalone: false, selector: "[adbActiveFragment]", inputs: { activeClass: ["adbActiveFragment", "activeClass"], fragment: "fragment" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RouterLinkActiveFragmentDirective, deps: [{ token: i1.Router }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: RouterLinkActiveFragmentDirective, isStandalone: false, selector: "[adbActiveFragment]", inputs: { activeClass: ["adbActiveFragment", "activeClass"], fragment: "fragment" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: RouterLinkActiveFragmentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RouterLinkActiveFragmentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[adbActiveFragment]',
@@ -309,10 +309,10 @@ class ImageLoaderDirective {
         this.translationSub?.unsubscribe();
         this.hideSpinner();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ImageLoaderDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: ImageLoaderDirective, isStandalone: false, selector: "img[adbImageLoader]", inputs: { fallbackKey: ["adbImageLoader", "fallbackKey"] }, host: { listeners: { "load": "onLoad()", "error": "onError()" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageLoaderDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: ImageLoaderDirective, isStandalone: false, selector: "img[adbImageLoader]", inputs: { fallbackKey: ["adbImageLoader", "fallbackKey"] }, host: { listeners: { "load": "onLoad()", "error": "onError()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ImageLoaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageLoaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'img[adbImageLoader]',
@@ -330,11 +330,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
             }] } });
 
 class AdbDirectivesModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbDirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: AdbDirectivesModule, declarations: [ClickOutsideDirective, FocusDirective, FileUploadDirective, RedListBadgeClassDirective, RiskClassDirective, ImageLoaderDirective, RouterLinkActiveFragmentDirective], exports: [ClickOutsideDirective, FocusDirective, FileUploadDirective, RedListBadgeClassDirective, RiskClassDirective, ImageLoaderDirective, RouterLinkActiveFragmentDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbDirectivesModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbDirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AdbDirectivesModule, declarations: [ClickOutsideDirective, FocusDirective, FileUploadDirective, RedListBadgeClassDirective, RiskClassDirective, ImageLoaderDirective, RouterLinkActiveFragmentDirective], exports: [ClickOutsideDirective, FocusDirective, FileUploadDirective, RedListBadgeClassDirective, RiskClassDirective, ImageLoaderDirective, RouterLinkActiveFragmentDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbDirectivesModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbDirectivesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbDirectivesModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [],
@@ -428,12 +428,12 @@ class ADBNavComponent {
     ngOnDestroy() {
         this.subscription.unsubscribe();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ADBNavComponent, deps: [{ token: i1$2.HttpClient }, { token: i1.Router }, { token: EnvironmentService$1 }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: ADBNavComponent, isStandalone: false, 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\" (adbClickOutside)=\"showMenuDropdown(false);\">\r\n    <header class=\"container-lg\" *ngIf=\"translationFinished\">\r\n        <div [attr.id]=\"showPattern?'banner':''\" class=\"d-flex align-items-center gap-2\">\r\n            <nav class=\"d-flex flex-grow-1 align-items-center pe-2 py-2 gap-1\">\r\n                <a class=\"d-flex 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/slu.svg\" alt=\"logo\">\r\n                    <div class=\"border-end d-none d-sm-block\"></div>\r\n                    <img class=\"d-none d-sm-block align-self-center pe-5\" style=\"height: 0.7rem;\" src=\"/assets/images/artdatabanken.svg\" alt=\"logo\">\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        </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 tabindex=\"-1\" class=\"offcanvas-body d-flex flex-column p-0\">\r\n            <div class=\"px-3\">\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                            <button class=\"btn btn-link p-0 text-white w-100 text-start\" (click)=\"showNOS = !showNOS\">\r\n                                {{navigation.nameAndRelationship.transId|translate}}\r\n                            </button>\r\n                            <button class=\"btn btn-sm btn-primary\" (click)=\"showNOS = !showNOS\" 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 fw-bold 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                    <li class=\"list-group-item bg-primary\">\r\n                        <small class=\"d-block text-white pt-1\">\r\n                            {{'ADB_HEADER.DEVELOPED_BY'|translate}}\r\n                            <a href=\"https://www.artdatabanken.se/\" class=\"text-white\"><u class=\"me-1\">{{'ADB_HEADER.ARTDATABANKEN'|translate}}</u> <span class=\"fas fa-external-link\"></span></a>\r\n                        </small>\r\n                    </li>\r\n                </ul>\r\n            </div>\r\n            <div id=\"pattern\" class=\"flex-grow-1\">\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[adbClickOutside]", outputs: ["adbClickOutside"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ADBNavComponent, deps: [{ token: i1$2.HttpClient }, { token: i1.Router }, { token: EnvironmentService$1 }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ADBNavComponent, isStandalone: false, 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\" (adbClickOutside)=\"showMenuDropdown(false);\">\r\n  @if (translationFinished) {\r\n    <header class=\"container-lg\">\r\n      <div [attr.id]=\"showPattern?'banner':''\" class=\"d-flex align-items-center gap-2\">\r\n        <nav class=\"d-flex flex-grow-1 align-items-center pe-2 py-2 gap-1\">\r\n          <a class=\"d-flex 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/slu.svg\" alt=\"logo\">\r\n            <div class=\"border-end d-none d-sm-block\"></div>\r\n            <img class=\"d-none d-sm-block align-self-center pe-5\" style=\"height: 0.7rem;\" src=\"/assets/images/artdatabanken.svg\" alt=\"logo\">\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      </div>\r\n    </header>\r\n  }\r\n  @if (navigation) {\r\n    <div 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 tabindex=\"-1\" class=\"offcanvas-body d-flex flex-column p-0\">\r\n        <div class=\"px-3\">\r\n          <div class=\"d-flex flex-wrap justify-content-between align-items-center mb-2 gap-1 px-2\">\r\n            @if (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            }\r\n            @if (!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              @if (navigation) {\r\n                <a class=\"text-white\" href=\"{{navigation.createAccountLink}}?lang={{trans.currentLang}}&returnUrl={{url}}\">\r\n                  {{'ADB_HEADER.CREATE_USER'|translate}}\r\n                </a>\r\n              }\r\n            }\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            @if (showArtfakta) {\r\n              <li class=\"list-group-item bg-primary pt-0 px-3\" 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            }\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                <button class=\"btn btn-link p-0 text-white w-100 text-start\" (click)=\"showNOS = !showNOS\">\r\n                  {{navigation.nameAndRelationship.transId|translate}}\r\n                </button>\r\n                <button class=\"btn btn-sm btn-primary\" (click)=\"showNOS = !showNOS\" 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            @if (showNOS) {\r\n              <li class=\"list-group-item bg-primary pt-0 px-3\" 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            }\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 fw-bold 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            <li class=\"list-group-item bg-primary\">\r\n              <small class=\"d-block text-white pt-1\">\r\n                {{'ADB_HEADER.DEVELOPED_BY'|translate}}\r\n                <a href=\"https://www.artdatabanken.se/\" class=\"text-white\"><u class=\"me-1\">{{'ADB_HEADER.ARTDATABANKEN'|translate}}</u> <span class=\"fas fa-external-link\"></span></a>\r\n              </small>\r\n            </li>\r\n          </ul>\r\n        </div>\r\n        <div id=\"pattern\" class=\"flex-grow-1\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[adbClickOutside]", outputs: ["adbClickOutside"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ADBNavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ADBNavComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'adb-nav', standalone: false, template: "<div class=\"bg-primary adb-main-header\" (adbClickOutside)=\"showMenuDropdown(false);\">\r\n    <header class=\"container-lg\" *ngIf=\"translationFinished\">\r\n        <div [attr.id]=\"showPattern?'banner':''\" class=\"d-flex align-items-center gap-2\">\r\n            <nav class=\"d-flex flex-grow-1 align-items-center pe-2 py-2 gap-1\">\r\n                <a class=\"d-flex 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/slu.svg\" alt=\"logo\">\r\n                    <div class=\"border-end d-none d-sm-block\"></div>\r\n                    <img class=\"d-none d-sm-block align-self-center pe-5\" style=\"height: 0.7rem;\" src=\"/assets/images/artdatabanken.svg\" alt=\"logo\">\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        </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 tabindex=\"-1\" class=\"offcanvas-body d-flex flex-column p-0\">\r\n            <div class=\"px-3\">\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                            <button class=\"btn btn-link p-0 text-white w-100 text-start\" (click)=\"showNOS = !showNOS\">\r\n                                {{navigation.nameAndRelationship.transId|translate}}\r\n                            </button>\r\n                            <button class=\"btn btn-sm btn-primary\" (click)=\"showNOS = !showNOS\" 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 fw-bold 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                    <li class=\"list-group-item bg-primary\">\r\n                        <small class=\"d-block text-white pt-1\">\r\n                            {{'ADB_HEADER.DEVELOPED_BY'|translate}}\r\n                            <a href=\"https://www.artdatabanken.se/\" class=\"text-white\"><u class=\"me-1\">{{'ADB_HEADER.ARTDATABANKEN'|translate}}</u> <span class=\"fas fa-external-link\"></span></a>\r\n                        </small>\r\n                    </li>\r\n                </ul>\r\n            </div>\r\n            <div id=\"pattern\" class=\"flex-grow-1\">\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>" }]
+            args: [{ selector: 'adb-nav', standalone: false, template: "<div class=\"bg-primary adb-main-header\" (adbClickOutside)=\"showMenuDropdown(false);\">\r\n  @if (translationFinished) {\r\n    <header class=\"container-lg\">\r\n      <div [attr.id]=\"showPattern?'banner':''\" class=\"d-flex align-items-center gap-2\">\r\n        <nav class=\"d-flex flex-grow-1 align-items-center pe-2 py-2 gap-1\">\r\n          <a class=\"d-flex 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/slu.svg\" alt=\"logo\">\r\n            <div class=\"border-end d-none d-sm-block\"></div>\r\n            <img class=\"d-none d-sm-block align-self-center pe-5\" style=\"height: 0.7rem;\" src=\"/assets/images/artdatabanken.svg\" alt=\"logo\">\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      </div>\r\n    </header>\r\n  }\r\n  @if (navigation) {\r\n    <div 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 tabindex=\"-1\" class=\"offcanvas-body d-flex flex-column p-0\">\r\n        <div class=\"px-3\">\r\n          <div class=\"d-flex flex-wrap justify-content-between align-items-center mb-2 gap-1 px-2\">\r\n            @if (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            }\r\n            @if (!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              @if (navigation) {\r\n                <a class=\"text-white\" href=\"{{navigation.createAccountLink}}?lang={{trans.currentLang}}&returnUrl={{url}}\">\r\n                  {{'ADB_HEADER.CREATE_USER'|translate}}\r\n                </a>\r\n              }\r\n            }\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            @if (showArtfakta) {\r\n              <li class=\"list-group-item bg-primary pt-0 px-3\" 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            }\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                <button class=\"btn btn-link p-0 text-white w-100 text-start\" (click)=\"showNOS = !showNOS\">\r\n                  {{navigation.nameAndRelationship.transId|translate}}\r\n                </button>\r\n                <button class=\"btn btn-sm btn-primary\" (click)=\"showNOS = !showNOS\" 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            @if (showNOS) {\r\n              <li class=\"list-group-item bg-primary pt-0 px-3\" 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            }\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 fw-bold 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            <li class=\"list-group-item bg-primary\">\r\n              <small class=\"d-block text-white pt-1\">\r\n                {{'ADB_HEADER.DEVELOPED_BY'|translate}}\r\n                <a href=\"https://www.artdatabanken.se/\" class=\"text-white\"><u class=\"me-1\">{{'ADB_HEADER.ARTDATABANKEN'|translate}}</u> <span class=\"fas fa-external-link\"></span></a>\r\n              </small>\r\n            </li>\r\n          </ul>\r\n        </div>\r\n        <div id=\"pattern\" class=\"flex-grow-1\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>" }]
         }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: i1.Router }, { type: EnvironmentService$1 }, { type: i1$1.TranslateService }], propDecorators: { loginClicked: [{
                 type: Output
             }], logoutClicked: [{
@@ -449,10 +449,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
             }] } });
 
 class AdbDropdownService {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbDropdownService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbDropdownService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbDropdownService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbDropdownService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbDropdownService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbDropdownService, decorators: [{
             type: Injectable
         }] });
 
@@ -517,10 +517,10 @@ class AdbDropdownDirective {
     getId() {
         return '' + Math.floor(Math.random() * Date.now());
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbDropdownDirective, deps: [{ token: i0.ElementRef }, { token: AdbDropdownService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: AdbDropdownDirective, isStandalone: false, selector: "[adbDropdown]", inputs: { insideClick: "insideClick" }, outputs: { adbDropdown: "adbDropdown" }, host: { listeners: { "click": "onClick()", "document:click": "onCheckOutSideClick($event.target)" }, properties: { "id": "this.id", "attr.data-toggle": "this.dataToggle", "attr.aria-haspopup": "this.haspPopup", "attr.aria-expanded": "this.expanded", "attr.aria-controls": "this.dropId" } }, exportAs: ["adbDropdown"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbDropdownDirective, deps: [{ token: i0.ElementRef }, { token: AdbDropdownService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: AdbDropdownDirective, isStandalone: false, selector: "[adbDropdown]", inputs: { insideClick: "insideClick" }, outputs: { adbDropdown: "adbDropdown" }, host: { listeners: { "click": "onClick()", "document:click": "onCheckOutSideClick($event.target)" }, properties: { "id": "this.id", "attr.data-toggle": "this.dataToggle", "attr.aria-haspopup": "this.haspPopup", "attr.aria-expanded": "this.expanded", "attr.aria-controls": "this.dropId" } }, exportAs: ["adbDropdown"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbDropdownDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbDropdownDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[adbDropdown]',
@@ -631,10 +631,10 @@ class AdbDropdown2Directive {
     getId() {
         return '' + Math.floor(Math.random() * Date.now());
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbDropdown2Directive, deps: [{ token: i0.ElementRef }, { token: AdbDropdownService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: AdbDropdown2Directive, isStandalone: false, selector: "[adbDropdown2]", inputs: { insideClick: "insideClick" }, outputs: { adbDropdown: "adbDropdown" }, host: { listeners: { "click": "onClick()", "document:click": "onCheckOutSideClick($event.target)", "window:scroll": "onWindowScroll()" }, properties: { "id": "this.id", "attr.data-toggle": "this.dataToggle", "attr.aria-haspopup": "this.haspPopup", "attr.aria-expanded": "this.expanded", "attr.aria-controls": "this.dropId" } }, exportAs: ["adbDropdown"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbDropdown2Directive, deps: [{ token: i0.ElementRef }, { token: AdbDropdownService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: AdbDropdown2Directive, isStandalone: false, selector: "[adbDropdown2]", inputs: { insideClick: "insideClick" }, outputs: { adbDropdown: "adbDropdown" }, host: { listeners: { "click": "onClick()", "document:click": "onCheckOutSideClick($event.target)", "window:scroll": "onWindowScroll()" }, properties: { "id": "this.id", "attr.data-toggle": "this.dataToggle", "attr.aria-haspopup": "this.haspPopup", "attr.aria-expanded": "this.expanded", "attr.aria-controls": "this.dropId" } }, exportAs: ["adbDropdown"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbDropdown2Directive, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbDropdown2Directive, decorators: [{
             type: Directive,
             args: [{
                     selector: '[adbDropdown2]',
@@ -672,11 +672,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
             }] } });
 
 class AdbDropdownModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: AdbDropdownModule, declarations: [AdbDropdownDirective, AdbDropdown2Directive], imports: [CommonModule, i1$1.TranslateModule, AdbDirectivesModule], exports: [AdbDropdownDirective, AdbDropdown2Directive] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbDropdownModule, providers: [AdbDropdownService], imports: [CommonModule, TranslateModule.forChild(), AdbDirectivesModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AdbDropdownModule, declarations: [AdbDropdownDirective, AdbDropdown2Directive], imports: [CommonModule, i1$1.TranslateModule, AdbDirectivesModule], exports: [AdbDropdownDirective, AdbDropdown2Directive] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbDropdownModule, providers: [AdbDropdownService], imports: [CommonModule, TranslateModule.forChild(), AdbDirectivesModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbDropdownModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbDropdownModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, TranslateModule.forChild(), AdbDirectivesModule],
@@ -716,10 +716,10 @@ class InfiniteScrollComponent {
             this._intersectionObserver.disconnect();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: InfiniteScrollComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: InfiniteScrollComponent, isStandalone: false, selector: "[onVisible]", outputs: { onVisible: "onVisible", onHidden: "onHidden" }, host: { properties: { "style.height": "this.height" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InfiniteScrollComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: InfiniteScrollComponent, isStandalone: false, selector: "[onVisible]", outputs: { onVisible: "onVisible", onHidden: "onHidden" }, host: { properties: { "style.height": "this.height" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: InfiniteScrollComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InfiniteScrollComponent, decorators: [{
             type: Directive,
             args: [{
                     selector: "[onVisible]",
@@ -775,10 +775,10 @@ class PagerBaseDirective {
             this.amountOfPages = 0;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PagerBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: PagerBaseDirective, isStandalone: true, inputs: { setTotalCount: ["totalCount", "setTotalCount"], setLimit: ["limit", "setLimit"] }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PagerBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: PagerBaseDirective, isStandalone: true, inputs: { setTotalCount: ["totalCount", "setTotalCount"], setLimit: ["limit", "setLimit"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PagerBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PagerBaseDirective, decorators: [{
             type: Directive
         }], propDecorators: { setTotalCount: [{
                 type: Input,
@@ -823,12 +823,12 @@ class PagerComponent extends PagerBaseDirective {
     ngOnDestroy() {
         this.subscription.unsubscribe();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PagerComponent, deps: [{ token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: PagerComponent, isStandalone: false, 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 flex-wrap 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>", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PagerComponent, deps: [{ token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PagerComponent, isStandalone: false, selector: "adb-pager-nav", inputs: { offsetName: "offsetName", infiniteLimit: "infiniteLimit" }, usesInheritance: true, ngImport: i0, template: "@if (pages&&pages.length>1&&currentPage<=amountOfPages) {\r\n  <nav class=\"d-flex justify-content-end my-1\">\r\n    <ul class=\"pagination flex-wrap 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      @for (page of params.pages; track page) {\r\n        <li class=\"page-item\" [class.active]=\"currentPage===page.name\">\r\n          <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"page.params\"\r\n          queryParamsHandling=\"merge\">{{page.name}}</a>\r\n        </li>\r\n      }\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      @if (!infiniteLimit) {\r\n        @if ((amountOfPages-1)*limit<10000) {\r\n          <li 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        }\r\n      }\r\n      @if (infiniteLimit) {\r\n        <li 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      }\r\n    </ul>\r\n  </nav>\r\n}", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PagerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PagerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'adb-pager-nav', standalone: false, template: "<nav *ngIf=\"pages&&pages.length>1&&currentPage<=amountOfPages\" class=\"d-flex justify-content-end my-1\">\r\n    <ul class=\"pagination flex-wrap 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>" }]
+            args: [{ selector: 'adb-pager-nav', standalone: false, template: "@if (pages&&pages.length>1&&currentPage<=amountOfPages) {\r\n  <nav class=\"d-flex justify-content-end my-1\">\r\n    <ul class=\"pagination flex-wrap 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      @for (page of params.pages; track page) {\r\n        <li class=\"page-item\" [class.active]=\"currentPage===page.name\">\r\n          <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"page.params\"\r\n          queryParamsHandling=\"merge\">{{page.name}}</a>\r\n        </li>\r\n      }\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      @if (!infiniteLimit) {\r\n        @if ((amountOfPages-1)*limit<10000) {\r\n          <li 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        }\r\n      }\r\n      @if (infiniteLimit) {\r\n        <li 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      }\r\n    </ul>\r\n  </nav>\r\n}" }]
         }], ctorParameters: () => [{ type: i1.ActivatedRoute }], propDecorators: { offsetName: [{
                 type: Input
             }], infiniteLimit: [{
@@ -868,12 +868,12 @@ class PagerInlineComponent extends PagerBaseDirective {
         this.pageChanged.emit(this.currentPage - 1);
         this.calculatePages();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PagerInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: PagerInlineComponent, isStandalone: false, selector: "adb-pager", inputs: { infiniteLimit: "infiniteLimit" }, 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 flex-wrap\">\r\n        <li class=\"page-item\">\r\n            <button class=\"page-link\" (click)=\"onFirstClick()\" [ngClass]=\"currentPage==1?'opacity-50 pe-none':''\" [disabled]=\"currentPage==1\">\r\n                <i class=\"fas fa-chevron-double-left\"></i>\r\n            </button>\r\n        </li>\r\n        <li class=\"page-item\">\r\n            <button class=\"page-link\" (click)=\"onPrevClick()\" [ngClass]=\"currentPage==1?'opacity-50 pe-none':''\" [disabled]=\"currentPage==1\">\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\">\r\n            <button class=\"page-link\" (click)=\"onNextClick()\" [ngClass]=\"currentPage>=amountOfPages?'opacity-50 pe-none':''\" [disabled]=\"currentPage>=amountOfPages\">\r\n                <i class=\"fas fa-chevron-right\"></i>\r\n            </button>\r\n        </li>\r\n        <ng-container *ngIf=\"!infiniteLimit\">\r\n            <li *ngIf=\"(amountOfPages-1)*limit<10000\" class=\"page-item\">\r\n                <button class=\"page-link\" (click)=\"onLastClick()\" [ngClass]=\"currentPage>=amountOfPages?'opacity-50 pe-none':''\" [disabled]=\"currentPage>=amountOfPages\">\r\n                    <i class=\"fas fa-chevron-double-right\"></i>\r\n                </button>\r\n            </li>\r\n        </ng-container>\r\n        <li class=\"page-item\" *ngIf=\"infiniteLimit\">\r\n            <button class=\"page-link\" (click)=\"onLastClick()\" [ngClass]=\"currentPage>=amountOfPages?'opacity-50 pe-none':''\" [disabled]=\"currentPage>=amountOfPages\">\r\n                <i class=\"fas fa-chevron-double-right\"></i>\r\n            </button>\r\n        </li>\r\n    </ul>\r\n</nav>\r\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PagerInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PagerInlineComponent, isStandalone: false, selector: "adb-pager", inputs: { infiniteLimit: "infiniteLimit" }, outputs: { pageChanged: "pageChanged" }, usesInheritance: true, ngImport: i0, template: "@if (pages&&pages.length>1&&currentPage<=amountOfPages) {\r\n  <nav class=\"d-flex justify-content-end pr-2 my-1\">\r\n    <ul class=\"pagination flex-wrap\">\r\n      <li class=\"page-item\">\r\n        <button class=\"page-link\" (click)=\"onFirstClick()\" [ngClass]=\"currentPage==1?'opacity-50 pe-none':''\" [disabled]=\"currentPage==1\">\r\n          <i class=\"fas fa-chevron-double-left\"></i>\r\n        </button>\r\n      </li>\r\n      <li class=\"page-item\">\r\n        <button class=\"page-link\" (click)=\"onPrevClick()\" [ngClass]=\"currentPage==1?'opacity-50 pe-none':''\" [disabled]=\"currentPage==1\">\r\n          <i class=\"fas fa-chevron-left\"></i>\r\n        </button>\r\n      </li>\r\n      @for (page of pages; track page) {\r\n        <li class=\"page-item\" [class.active]=\"currentPage==page\">\r\n          <button class=\"page-link\" (click)=\"onPageClick(page)\">\r\n            {{page}}\r\n          </button>\r\n        </li>\r\n      }\r\n      <li class=\"page-item\">\r\n        <button class=\"page-link\" (click)=\"onNextClick()\" [ngClass]=\"currentPage>=amountOfPages?'opacity-50 pe-none':''\" [disabled]=\"currentPage>=amountOfPages\">\r\n          <i class=\"fas fa-chevron-right\"></i>\r\n        </button>\r\n      </li>\r\n      @if (!infiniteLimit) {\r\n        @if ((amountOfPages-1)*limit<10000) {\r\n          <li class=\"page-item\">\r\n            <button class=\"page-link\" (click)=\"onLastClick()\" [ngClass]=\"currentPage>=amountOfPages?'opacity-50 pe-none':''\" [disabled]=\"currentPage>=amountOfPages\">\r\n              <i class=\"fas fa-chevron-double-right\"></i>\r\n            </button>\r\n          </li>\r\n        }\r\n      }\r\n      @if (infiniteLimit) {\r\n        <li class=\"page-item\">\r\n          <button class=\"page-link\" (click)=\"onLastClick()\" [ngClass]=\"currentPage>=amountOfPages?'opacity-50 pe-none':''\" [disabled]=\"currentPage>=amountOfPages\">\r\n            <i class=\"fas fa-chevron-double-right\"></i>\r\n          </button>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </nav>\r\n}\r\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PagerInlineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PagerInlineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'adb-pager', standalone: false, template: "<nav *ngIf=\"pages&&pages.length>1&&currentPage<=amountOfPages\" class=\"d-flex justify-content-end pr-2 my-1\">\r\n    <ul class=\"pagination flex-wrap\">\r\n        <li class=\"page-item\">\r\n            <button class=\"page-link\" (click)=\"onFirstClick()\" [ngClass]=\"currentPage==1?'opacity-50 pe-none':''\" [disabled]=\"currentPage==1\">\r\n                <i class=\"fas fa-chevron-double-left\"></i>\r\n            </button>\r\n        </li>\r\n        <li class=\"page-item\">\r\n            <button class=\"page-link\" (click)=\"onPrevClick()\" [ngClass]=\"currentPage==1?'opacity-50 pe-none':''\" [disabled]=\"currentPage==1\">\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\">\r\n            <button class=\"page-link\" (click)=\"onNextClick()\" [ngClass]=\"currentPage>=amountOfPages?'opacity-50 pe-none':''\" [disabled]=\"currentPage>=amountOfPages\">\r\n                <i class=\"fas fa-chevron-right\"></i>\r\n            </button>\r\n        </li>\r\n        <ng-container *ngIf=\"!infiniteLimit\">\r\n            <li *ngIf=\"(amountOfPages-1)*limit<10000\" class=\"page-item\">\r\n                <button class=\"page-link\" (click)=\"onLastClick()\" [ngClass]=\"currentPage>=amountOfPages?'opacity-50 pe-none':''\" [disabled]=\"currentPage>=amountOfPages\">\r\n                    <i class=\"fas fa-chevron-double-right\"></i>\r\n                </button>\r\n            </li>\r\n        </ng-container>\r\n        <li class=\"page-item\" *ngIf=\"infiniteLimit\">\r\n            <button class=\"page-link\" (click)=\"onLastClick()\" [ngClass]=\"currentPage>=amountOfPages?'opacity-50 pe-none':''\" [disabled]=\"currentPage>=amountOfPages\">\r\n                <i class=\"fas fa-chevron-double-right\"></i>\r\n            </button>\r\n        </li>\r\n    </ul>\r\n</nav>\r\n" }]
+            args: [{ selector: 'adb-pager', standalone: false, template: "@if (pages&&pages.length>1&&currentPage<=amountOfPages) {\r\n  <nav class=\"d-flex justify-content-end pr-2 my-1\">\r\n    <ul class=\"pagination flex-wrap\">\r\n      <li class=\"page-item\">\r\n        <button class=\"page-link\" (click)=\"onFirstClick()\" [ngClass]=\"currentPage==1?'opacity-50 pe-none':''\" [disabled]=\"currentPage==1\">\r\n          <i class=\"fas fa-chevron-double-left\"></i>\r\n        </button>\r\n      </li>\r\n      <li class=\"page-item\">\r\n        <button class=\"page-link\" (click)=\"onPrevClick()\" [ngClass]=\"currentPage==1?'opacity-50 pe-none':''\" [disabled]=\"currentPage==1\">\r\n          <i class=\"fas fa-chevron-left\"></i>\r\n        </button>\r\n      </li>\r\n      @for (page of pages; track page) {\r\n        <li class=\"page-item\" [class.active]=\"currentPage==page\">\r\n          <button class=\"page-link\" (click)=\"onPageClick(page)\">\r\n            {{page}}\r\n          </button>\r\n        </li>\r\n      }\r\n      <li class=\"page-item\">\r\n        <button class=\"page-link\" (click)=\"onNextClick()\" [ngClass]=\"currentPage>=amountOfPages?'opacity-50 pe-none':''\" [disabled]=\"currentPage>=amountOfPages\">\r\n          <i class=\"fas fa-chevron-right\"></i>\r\n        </button>\r\n      </li>\r\n      @if (!infiniteLimit) {\r\n        @if ((amountOfPages-1)*limit<10000) {\r\n          <li class=\"page-item\">\r\n            <button class=\"page-link\" (click)=\"onLastClick()\" [ngClass]=\"currentPage>=amountOfPages?'opacity-50 pe-none':''\" [disabled]=\"currentPage>=amountOfPages\">\r\n              <i class=\"fas fa-chevron-double-right\"></i>\r\n            </button>\r\n          </li>\r\n        }\r\n      }\r\n      @if (infiniteLimit) {\r\n        <li class=\"page-item\">\r\n          <button class=\"page-link\" (click)=\"onLastClick()\" [ngClass]=\"currentPage>=amountOfPages?'opacity-50 pe-none':''\" [disabled]=\"currentPage>=amountOfPages\">\r\n            <i class=\"fas fa-chevron-double-right\"></i>\r\n          </button>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </nav>\r\n}\r\n" }]
         }], ctorParameters: () => [], propDecorators: { pageChanged: [{
                 type: Output
             }], infiniteLimit: [{
@@ -881,13 +881,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
             }] } });
 
 class AdbPagersModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbPagersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: AdbPagersModule, declarations: [InfiniteScrollComponent, PagerComponent, PagerInlineComponent], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbPagersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AdbPagersModule, declarations: [InfiniteScrollComponent, PagerComponent, PagerInlineComponent], imports: [CommonModule,
             RouterModule], exports: [InfiniteScrollComponent, PagerComponent, PagerInlineComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbPagersModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbPagersModule, imports: [CommonModule,
             RouterModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbPagersModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbPagersModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -912,21 +912,21 @@ class ADBHeaderModule {
             ]
         };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ADBHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: ADBHeaderModule, declarations: [ADBNavComponent], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ADBHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: ADBHeaderModule, declarations: [ADBNavComponent], imports: [CommonModule,
             RouterModule,
             TranslateModule,
             AdbDirectivesModule,
             AdbDropdownModule,
             AdbPagersModule], exports: [ADBNavComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ADBHeaderModule, providers: [provideHttpClient(withInterceptorsFromDi())], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ADBHeaderModule, providers: [provideHttpClient(withInterceptorsFromDi())], imports: [CommonModule,
             RouterModule,
             TranslateModule,
             AdbDirectivesModule,
             AdbDropdownModule,
             AdbPagersModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ADBHeaderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ADBHeaderModule, decorators: [{
             type: NgModule,
             args: [{ declarations: [ADBNavComponent],
                     exports: [ADBNavComponent], imports: [CommonModule,
@@ -941,10 +941,10 @@ class EnvironmentService {
     constructor(environment) {
         this.environment = environment;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: EnvironmentService, deps: [{ token: 'env' }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: EnvironmentService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EnvironmentService, deps: [{ token: 'env' }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EnvironmentService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: EnvironmentService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EnvironmentService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -1035,12 +1035,12 @@ class ArtportalenNavComponent {
     ngOnDestroy() {
         this.subscription.unsubscribe();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ArtportalenNavComponent, deps: [{ token: i1$2.HttpClient }, { token: i1.Router }, { token: i1$1.TranslateService }, { token: EnvironmentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: ArtportalenNavComponent, isStandalone: false, selector: "adb-artportalen-nav", inputs: { showPattern: "showPattern", userName: "userName" }, outputs: { loginClicked: "loginClicked", logoutClicked: "logoutClicked", dropMenuChange: "dropMenuChange" }, ngImport: i0, template: "<div class=\"bg-primary adb-main-header position-static\" (adbClickOutside)=\"showMenuDropdown(false);\">\r\n    <header class=\"container-lg px-0\" *ngIf=\"translationFinished\">\r\n        <div [attr.id]=\"showPattern?'banner':''\" class=\"px-1 d-flex flex-wrap align-items-center gap-2\">\r\n            <nav class=\"d-flex flex-grow-1 align-items-center pe-2 py-2 gap-2\">\r\n                <a class=\"d-flex 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/slu.svg\" alt=\"logo\">\r\n                    <div class=\"border-end d-none d-sm-block\"></div>\r\n                    <img class=\"d-none d-sm-block align-self-center pe-5\" style=\"height: 0.7rem;\" src=\"/assets/images/artdatabanken.svg\" alt=\"logo\">\r\n                </a>\r\n                <a [href]=\"navigation?.home\" class=\"text-white text-decoration-none fs-1 fw-bold\">{{'HEADER.TITLE'|translate}}</a>\r\n            </nav>\r\n            <div class=\"ms-auto d-flex align-items-center gap-2\">\r\n                <div><ng-content></ng-content></div>\r\n                <div>\r\n                    <button class=\"d-none d-md-block btn btn-primary-dark btn-lg\" type=\"button\"\r\n                        title=\"{{(!fullName ? 'HEADER.LOGIN' : 'HEADER.LOGOUT')|translate}}\"\r\n                        attr.aria-label=\"{{(!fullName ? 'HEADER.LOGIN' : 'HEADER.LOGOUT')|translate}}\"\r\n                        (click)=\"onUserClick()\">\r\n                        <small>{{(!fullName ? 'HEADER.LOGIN' : 'HEADER.LOGOUT')|translate}}</small>\r\n                    </button>\r\n                </div>\r\n                <div>\r\n                    <button class=\"btn btn-primary-dark btn-lg\" type=\"button\" title=\"{{'HEADER.MENY'|translate}}\" attr.aria-label=\"{{'HEADER.MENY'|translate}}\" (click)=\"showMenuDropdown(!showNavMenu)\">\r\n                        <i class=\"fas fa-bars\"></i>\r\n                        <small class=\"ms-2 d-none d-md-inline-block\">{{'HEADER.MENY'|translate}}</small>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"d-flex justify-content-center d-md-none p-2 border-dark border-top\">\r\n            <button class=\"btn btn-primary-dark btn-lg\" type=\"button\"\r\n                title=\"{{(!fullName ? 'HEADER.LOGIN' : 'HEADER.LOGOUT')|translate}}\"\r\n                attr.aria-label=\"{{(!fullName ? 'HEADER.LOGIN' : 'HEADER.LOGOUT')|translate}}\" (click)=\"onUserClick()\">\r\n                <small>{{(!fullName ? 'HEADER.LOGIN' : 'HEADER.LOGOUT')|translate}}</small>\r\n            </button>\r\n        </div>\r\n    </header>\r\n    <div *ngIf=\"navigation\" role=\"dialog\" class=\"offcanvas offcanvas-end bg-primary text-white\" [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\"><a [href]=\"navigation.home\" class=\"text-white text-decoration-none\">{{'HEADER.TITLE'|translate}}</a></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=\"px-3\">\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=\"fullName\">\r\n                        <div>\r\n                            <button (click)=\"logout()\" type=\"button\" class=\"btn btn-primary-dark\">\r\n                                {{'HEADER.LOGOUT'|translate}}\r\n                            </button>\r\n                        </div>\r\n                        <div>{{fullName}}</div>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"!fullName\">\r\n                        <div class=\"text-center\">\r\n                            <button type=\"button\" class=\"btn btn-primary-dark\" (click)=\"login()\" id=\"start-login\">{{'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                            {{'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]=\"showReport?'border-bottom-0 pb-0':''\">\r\n                        <div class=\"d-flex justify-content-between gap-2\">\r\n                            <a class=\"py-1 text-white flex-grow-1\" href=\"{{navigation.report.url}}\">\r\n                                {{navigation.report.transId|translate}}\r\n                            </a>\r\n                            <button class=\"btn btn-sm btn-primary\" (click)=\"showReport = !showReport\" attr.aria-controls=\"report-links\" attr.aria-expanded=\"{{showReport}}\">\r\n                                <span class=\"fas\" [ngClass]=\"showReport?'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=\"showReport\" id=\"report-links\">\r\n                        <ul class=\"list-unstyled\">\r\n                            <li class=\"d-block py-1\">\r\n                                <div class=\"d-flex\">\r\n                                    <a href=\"{{navigation.checklist.url}}\" class=\"text-white flex-grow-1\">\r\n                                        {{navigation.checklist.transId|translate}}\r\n                                    </a>\r\n                                </div>\r\n                            </li>\r\n                            <a class=\"d-block py-1 text-white\" href=\"{{navigation.report.url}}\">\r\n                                {{'HEADER.REPORT'|translate}}\r\n                            </a>\r\n                            <li class=\"d-block py-1\">\r\n                                <div class=\"d-flex \">\r\n                                    <a href=\"{{navigation.wanted.url}}\" class=\"text-white flex-grow-1\">\r\n                                        {{navigation.wanted.transId|translate}}\r\n                                    </a>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </li>\r\n                    <li class=\"list-group-item bg-primary\" [ngClass]=\"showObservations?'border-bottom-0 pb-0':''\">\r\n                        <div class=\"d-flex justify-content-between gap-2\">\r\n                            <a class=\"py-1 text-white flex-grow-1\" href=\"{{navigation.observations.url}}\">\r\n                                {{navigation.observations.transId|translate}}\r\n                            </a>\r\n                            <button class=\"btn btn-sm btn-primary\" (click)=\"showObservations = !showObservations\" attr.aria-controls=\"observations-links\" attr.aria-expanded=\"{{showObservations}}\">\r\n                                <span class=\"fas\" [ngClass]=\"showObservations?'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=\"showObservations\" id=\"observations-links\">\r\n                        <ul class=\"list-unstyled\">\r\n                            <li class=\"d-block py-1\">\r\n                                <a class=\"d-block py-1 text-white\" href=\"{{navigation.observations.url}}\">\r\n                                    {{'HEADER.TODAYS_OBSERVATIONS'|translate}}\r\n                                </a>\r\n                            </li>\r\n                            <li class=\"d-block py-0\">\r\n                                <a class=\"d-block py-1 text-white\" href=\"{{navigation.fieldDiary.url}}\">\r\n                                    {{'HEADER.FIELD_DIARY'|translate}}\r\n                                </a>\r\n                            </li>\r\n                        </ul>\r\n                    </li>\r\n                    <li class=\"list-group-item bg-primary\" [ngClass]=\"showSubs?'border-bottom-0 pb-0':''\">\r\n                        <div class=\"d-flex justify-content-between gap-2\">\r\n                            <button class=\"btn btn-link p-0 text-white w-100 text-start\" (click)=\"showSubs = !showSubs\">\r\n                                {{navigation.subcriptions.transId|translate}}\r\n                            </button>\r\n                            <button class=\"btn btn-sm btn-primary\" (click)=\"showSubs = !showSubs\" attr.aria-controls=\"subs-links\" attr.aria-expanded=\"{{showSubs}}\">\r\n                                <span class=\"fas\" [ngClass]=\"showSubs?'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=\"showSubs\" id=\"subs-links\">\r\n                        <ul class=\"list-unstyled\">\r\n                            <li class=\"d-block py-1\">\r\n                                <a class=\"d-block py-1 text-white\" href=\"{{navigation.subcriptions.url}}\">\r\n                                    {{'HEADER.MY_SUBSCRIPTIONS'|translate}}\r\n                                </a>\r\n                            </li>\r\n                            <li class=\"py-1\">\r\n                                <div class=\"d-flex\">\r\n                                    <a href=\"{{navigation.events.url}}\" class=\"text-white flex-grow-1\">\r\n                                        {{navigation.events.transId|translate}}\r\n                                    </a>\r\n                                </div>\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.fyndregler.url}}\">\r\n                            {{navigation.fyndregler.transId|translate}}\r\n                        </a>\r\n                    </li>\r\n                    <li class=\"list-group-item bg-primary\">\r\n                        <a class=\"d-block fw-bold py-1 text-white\" [href]=\"navigation.artportalenUrl\">\r\n                            Artportalen.se\r\n                            <i class=\"fas fa-external-link\"></i>\r\n                        </a>\r\n                    </li>\r\n                    <li class=\"list-group-item bg-primary\">\r\n                        <a class=\"d-block fw-bold py-1 text-white\" [href]=\"navigation.artfaktaUrl\">\r\n                            {{'HEADER.ARTFAKTA'|translate}}\r\n                            <i class=\"fas fa-external-link\"></i>\r\n                        </a>\r\n                    </li>\r\n                    <li class=\"list-group-item bg-primary\">\r\n                        <small class=\"d-block text-white pt-1\">\r\n                            {{'HEADER.DEVELOPED_BY'|translate}}\r\n                            <a href=\"https://www.artdatabanken.se/\" class=\"text-white\">\r\n                                {{'HEADER.ARTDATABANKEN'|translate}}\r\n                                <span class=\"fas fa-external-link\"></span>\r\n                            </a>\r\n                        </small>\r\n                    </li>\r\n                </ul>\r\n            </div>\r\n            <div id=\"pattern\" class=\"flex-grow-1\"> </div>\r\n        </div>\r\n    </div>\r\n</div>", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[adbClickOutside]", outputs: ["adbClickOutside"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ArtportalenNavComponent, deps: [{ token: i1$2.HttpClient }, { token: i1.Router }, { token: i1$1.TranslateService }, { token: EnvironmentService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ArtportalenNavComponent, isStandalone: false, selector: "adb-artportalen-nav", inputs: { showPattern: "showPattern", userName: "userName" }, outputs: { loginClicked: "loginClicked", logoutClicked: "logoutClicked", dropMenuChange: "dropMenuChange" }, ngImport: i0, template: "<div class=\"bg-primary adb-main-header position-static\" (adbClickOutside)=\"showMenuDropdown(false);\">\r\n  @if (translationFinished) {\r\n    <header class=\"container-lg px-0\">\r\n      <div [attr.id]=\"showPattern?'banner':''\" class=\"px-1 d-flex flex-wrap align-items-center gap-2\">\r\n        <nav class=\"d-flex flex-grow-1 align-items-center pe-2 py-2 gap-2\">\r\n          <a class=\"d-flex 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/slu.svg\" alt=\"logo\">\r\n            <div class=\"border-end d-none d-sm-block\"></div>\r\n            <img class=\"d-none d-sm-block align-self-center pe-5\" style=\"height: 0.7rem;\" src=\"/assets/images/artdatabanken.svg\" alt=\"logo\">\r\n          </a>\r\n          <a [href]=\"navigation?.home\" class=\"text-white text-decoration-none fs-1 fw-bold\">{{'HEADER.TITLE'|translate}}</a>\r\n        </nav>\r\n        <div class=\"ms-auto d-flex align-items-center gap-2\">\r\n          <div><ng-content></ng-content></div>\r\n          <div>\r\n            <button class=\"d-none d-md-block btn btn-primary-dark btn-lg\" type=\"button\"\r\n              title=\"{{(!fullName ? 'HEADER.LOGIN' : 'HEADER.LOGOUT')|translate}}\"\r\n              attr.aria-label=\"{{(!fullName ? 'HEADER.LOGIN' : 'HEADER.LOGOUT')|translate}}\"\r\n              (click)=\"onUserClick()\">\r\n              <small>{{(!fullName ? 'HEADER.LOGIN' : 'HEADER.LOGOUT')|translate}}</small>\r\n            </button>\r\n          </div>\r\n          <div>\r\n            <button class=\"btn btn-primary-dark btn-lg\" type=\"button\" title=\"{{'HEADER.MENY'|translate}}\" attr.aria-label=\"{{'HEADER.MENY'|translate}}\" (click)=\"showMenuDropdown(!showNavMenu)\">\r\n              <i class=\"fas fa-bars\"></i>\r\n              <small class=\"ms-2 d-none d-md-inline-block\">{{'HEADER.MENY'|translate}}</small>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex justify-content-center d-md-none p-2 border-dark border-top\">\r\n        <button class=\"btn btn-primary-dark btn-lg\" type=\"button\"\r\n          title=\"{{(!fullName ? 'HEADER.LOGIN' : 'HEADER.LOGOUT')|translate}}\"\r\n          attr.aria-label=\"{{(!fullName ? 'HEADER.LOGIN' : 'HEADER.LOGOUT')|translate}}\" (click)=\"onUserClick()\">\r\n          <small>{{(!fullName ? 'HEADER.LOGIN' : 'HEADER.LOGOUT')|translate}}</small>\r\n        </button>\r\n      </div>\r\n    </header>\r\n  }\r\n  @if (navigation) {\r\n    <div role=\"dialog\" class=\"offcanvas offcanvas-end bg-primary text-white\" [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\"><a [href]=\"navigation.home\" class=\"text-white text-decoration-none\">{{'HEADER.TITLE'|translate}}</a></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=\"px-3\">\r\n          <div class=\"d-flex flex-wrap justify-content-between align-items-center mb-2 gap-1 px-2\">\r\n            @if (fullName) {\r\n              <div>\r\n                <button (click)=\"logout()\" type=\"button\" class=\"btn btn-primary-dark\">\r\n                  {{'HEADER.LOGOUT'|translate}}\r\n                </button>\r\n              </div>\r\n              <div>{{fullName}}</div>\r\n            }\r\n            @if (!fullName) {\r\n              <div class=\"text-center\">\r\n                <button type=\"button\" class=\"btn btn-primary-dark\" (click)=\"login()\" id=\"start-login\">{{'HEADER.LOGIN'|translate}}</button>\r\n              </div>\r\n              @if (navigation) {\r\n                <a class=\"text-white\" href=\"{{navigation.createAccountLink}}?lang={{trans.currentLang}}&returnUrl={{url}}\">\r\n                  {{'HEADER.CREATE_USER'|translate}}\r\n                </a>\r\n              }\r\n            }\r\n          </div>\r\n          <ul class=\"list-group list-group-flush border-top\">\r\n            <li class=\"list-group-item bg-primary\" [ngClass]=\"showReport?'border-bottom-0 pb-0':''\">\r\n              <div class=\"d-flex justify-content-between gap-2\">\r\n                <a class=\"py-1 text-white flex-grow-1\" href=\"{{navigation.report.url}}\">\r\n                  {{navigation.report.transId|translate}}\r\n                </a>\r\n                <button class=\"btn btn-sm btn-primary\" (click)=\"showReport = !showReport\" attr.aria-controls=\"report-links\" attr.aria-expanded=\"{{showReport}}\">\r\n                  <span class=\"fas\" [ngClass]=\"showReport?'fa-chevron-up':'fa-chevron-down'\"></span>\r\n                </button>\r\n              </div>\r\n            </li>\r\n            @if (showReport) {\r\n              <li class=\"list-group-item bg-primary pt-0 px-3\" id=\"report-links\">\r\n                <ul class=\"list-unstyled\">\r\n                  <li class=\"d-block py-1\">\r\n                    <div class=\"d-flex\">\r\n                      <a href=\"{{navigation.checklist.url}}\" class=\"text-white flex-grow-1\">\r\n                        {{navigation.checklist.transId|translate}}\r\n                      </a>\r\n                    </div>\r\n                  </li>\r\n                  <a class=\"d-block py-1 text-white\" href=\"{{navigation.report.url}}\">\r\n                    {{'HEADER.REPORT'|translate}}\r\n                  </a>\r\n                  <li class=\"d-block py-1\">\r\n                    <div class=\"d-flex \">\r\n                      <a href=\"{{navigation.wanted.url}}\" class=\"text-white flex-grow-1\">\r\n                        {{navigation.wanted.transId|translate}}\r\n                      </a>\r\n                    </div>\r\n                  </li>\r\n                </ul>\r\n              </li>\r\n            }\r\n            <li class=\"list-group-item bg-primary\" [ngClass]=\"showObservations?'border-bottom-0 pb-0':''\">\r\n              <div class=\"d-flex justify-content-between gap-2\">\r\n                <a class=\"py-1 text-white flex-grow-1\" href=\"{{navigation.observations.url}}\">\r\n                  {{navigation.observations.transId|translate}}\r\n                </a>\r\n                <button class=\"btn btn-sm btn-primary\" (click)=\"showObservations = !showObservations\" attr.aria-controls=\"observations-links\" attr.aria-expanded=\"{{showObservations}}\">\r\n                  <span class=\"fas\" [ngClass]=\"showObservations?'fa-chevron-up':'fa-chevron-down'\"></span>\r\n                </button>\r\n              </div>\r\n            </li>\r\n            @if (showObservations) {\r\n              <li class=\"list-group-item bg-primary pt-0 px-3\" id=\"observations-links\">\r\n                <ul class=\"list-unstyled\">\r\n                  <li class=\"d-block py-1\">\r\n                    <a class=\"d-block py-1 text-white\" href=\"{{navigation.observations.url}}\">\r\n                      {{'HEADER.TODAYS_OBSERVATIONS'|translate}}\r\n                    </a>\r\n                  </li>\r\n                  <li class=\"d-block py-0\">\r\n                    <a class=\"d-block py-1 text-white\" href=\"{{navigation.fieldDiary.url}}\">\r\n                      {{'HEADER.FIELD_DIARY'|translate}}\r\n                    </a>\r\n                  </li>\r\n                </ul>\r\n              </li>\r\n            }\r\n            <li class=\"list-group-item bg-primary\" [ngClass]=\"showSubs?'border-bottom-0 pb-0':''\">\r\n              <div class=\"d-flex justify-content-between gap-2\">\r\n                <button class=\"btn btn-link p-0 text-white w-100 text-start\" (click)=\"showSubs = !showSubs\">\r\n                  {{navigation.subcriptions.transId|translate}}\r\n                </button>\r\n                <button class=\"btn btn-sm btn-primary\" (click)=\"showSubs = !showSubs\" attr.aria-controls=\"subs-links\" attr.aria-expanded=\"{{showSubs}}\">\r\n                  <span class=\"fas\" [ngClass]=\"showSubs?'fa-chevron-up':'fa-chevron-down'\"></span>\r\n                </button>\r\n              </div>\r\n            </li>\r\n            @if (showSubs) {\r\n              <li class=\"list-group-item bg-primary pt-0 px-3\" id=\"subs-links\">\r\n                <ul class=\"list-unstyled\">\r\n                  <li class=\"d-block py-1\">\r\n                    <a class=\"d-block py-1 text-white\" href=\"{{navigation.subcriptions.url}}\">\r\n                      {{'HEADER.MY_SUBSCRIPTIONS'|translate}}\r\n                    </a>\r\n                  </li>\r\n                  <li class=\"py-1\">\r\n                    <div class=\"d-flex\">\r\n                      <a href=\"{{navigation.events.url}}\" class=\"text-white flex-grow-1\">\r\n                        {{navigation.events.transId|translate}}\r\n                      </a>\r\n                    </div>\r\n                  </li>\r\n                </ul>\r\n              </li>\r\n            }\r\n            <li class=\"list-group-item bg-primary\">\r\n              <a class=\"d-block py-1 text-white\" href=\"{{navigation.fyndregler.url}}\">\r\n                {{navigation.fyndregler.transId|translate}}\r\n              </a>\r\n            </li>\r\n            <li class=\"list-group-item bg-primary\">\r\n              <a class=\"d-block fw-bold py-1 text-white\" [href]=\"navigation.artportalenUrl\">\r\n                Artportalen.se\r\n                <i class=\"fas fa-external-link\"></i>\r\n              </a>\r\n            </li>\r\n            <li class=\"list-group-item bg-primary\">\r\n              <a class=\"d-block fw-bold py-1 text-white\" [href]=\"navigation.artfaktaUrl\">\r\n                {{'HEADER.ARTFAKTA'|translate}}\r\n                <i class=\"fas fa-external-link\"></i>\r\n              </a>\r\n            </li>\r\n            <li class=\"list-group-item bg-primary\">\r\n              <small class=\"d-block text-white pt-1\">\r\n                {{'HEADER.DEVELOPED_BY'|translate}}\r\n                <a href=\"https://www.artdatabanken.se/\" class=\"text-white\">\r\n                  {{'HEADER.ARTDATABANKEN'|translate}}\r\n                  <span class=\"fas fa-external-link\"></span>\r\n                </a>\r\n              </small>\r\n            </li>\r\n          </ul>\r\n        </div>\r\n        <div id=\"pattern\" class=\"flex-grow-1\"> </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[adbClickOutside]", outputs: ["adbClickOutside"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ArtportalenNavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ArtportalenNavComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'adb-artportalen-nav', standalone: false, template: "<div class=\"bg-primary adb-main-header position-static\" (adbClickOutside)=\"showMenuDropdown(false);\">\r\n    <header class=\"container-lg px-0\" *ngIf=\"translationFinished\">\r\n        <div [attr.id]=\"showPattern?'banner':''\" class=\"px-1 d-flex flex-wrap align-items-center gap-2\">\r\n            <nav class=\"d-flex flex-grow-1 align-items-center pe-2 py-2 gap-2\">\r\n                <a class=\"d-flex 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/slu.svg\" alt=\"logo\">\r\n                    <div class=\"border-end d-none d-sm-block\"></div>\r\n                    <img class=\"d-none d-sm-block align-self-center pe-5\" style=\"height: 0.7rem;\" src=\"/assets/images/artdatabanken.svg\" alt=\"logo\">\r\n                </a>\r\n                <a [href]=\"navigation?.home\" class=\"text-white text-decoration-none fs-1 fw-bold\">{{'HEADER.TITLE'|translate}}</a>\r\n            </nav>\r\n            <div class=\"ms-auto d-flex align-items-center gap-2\">\r\n                <div><ng-content></ng-content></div>\r\n                <div>\r\n                    <button class=\"d-none d-md-block btn btn-primary-dark btn-lg\" type=\"button\"\r\n                        title=\"{{(!fullName ? 'HEADER.LOGIN' : 'HEADER.LOGOUT')|translate}}\"\r\n                        attr.aria-label=\"{{(!fullName ? 'HEADER.LOGIN' : 'HEADER.LOGOUT')|translate}}\"\r\n                        (click)=\"onUserClick()\">\r\n                        <small>{{(!fullName ? 'HEADER.LOGIN' : 'HEADER.LOGOUT')|translate}}</small>\r\n                    </button>\r\n                </div>\r\n                <div>\r\n                    <button class=\"btn btn-primary-dark btn-lg\" type=\"button\" title=\"{{'HEADER.MENY'|translate}}\" attr.aria-label=\"{{'HEADER.MENY'|translate}}\" (click)=\"showMenuDropdown(!showNavMenu)\">\r\n                        <i class=\"fas fa-bars\"></i>\r\n                        <small class=\"ms-2 d-none d-md-inline-block\">{{'HEADER.MENY'|translate}}</small>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"d-flex justify-content-center d-md-none p-2 border-dark border-top\">\r\n            <button class=\"btn btn-primary-dark btn-lg\" type=\"button\"\r\n                title=\"{{(!fullName ? 'HEADER.LOGIN' : 'HEADER.LOGOUT')|translate}}\"\r\n                attr.aria-label=\"{{(!fullName ? 'HEADER.LOGIN' : 'HEADER.LOGOUT')|translate}}\" (click)=\"onUserClick()\">\r\n                <small>{{(!fullName ? 'HEADER.LOGIN' : 'HEADER.LOGOUT')|translate}}</small>\r\n            </button>\r\n        </div>\r\n    </header>\r\n    <div *ngIf=\"navigation\" role=\"dialog\" class=\"offcanvas offcanvas-end bg-primary text-white\" [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\"><a [href]=\"navigation.home\" class=\"text-white text-decoration-none\">{{'HEADER.TITLE'|translate}}</a></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=\"px-3\">\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=\"fullName\">\r\n                        <div>\r\n                            <button (click)=\"logout()\" type=\"button\" class=\"btn btn-primary-dark\">\r\n                                {{'HEADER.LOGOUT'|translate}}\r\n                            </button>\r\n                        </div>\r\n                        <div>{{fullName}}</div>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"!fullName\">\r\n                        <div class=\"text-center\">\r\n                            <button type=\"button\" class=\"btn btn-primary-dark\" (click)=\"login()\" id=\"start-login\">{{'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                            {{'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]=\"showReport?'border-bottom-0 pb-0':''\">\r\n                        <div class=\"d-flex justify-content-between gap-2\">\r\n                            <a class=\"py-1 text-white flex-grow-1\" href=\"{{navigation.report.url}}\">\r\n                                {{navigation.report.transId|translate}}\r\n                            </a>\r\n                            <button class=\"btn btn-sm btn-primary\" (click)=\"showReport = !showReport\" attr.aria-controls=\"report-links\" attr.aria-expanded=\"{{showReport}}\">\r\n                                <span class=\"fas\" [ngClass]=\"showReport?'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=\"showReport\" id=\"report-links\">\r\n                        <ul class=\"list-unstyled\">\r\n                            <li class=\"d-block py-1\">\r\n                                <div class=\"d-flex\">\r\n                                    <a href=\"{{navigation.checklist.url}}\" class=\"text-white flex-grow-1\">\r\n                                        {{navigation.checklist.transId|translate}}\r\n                                    </a>\r\n                                </div>\r\n                            </li>\r\n                            <a class=\"d-block py-1 text-white\" href=\"{{navigation.report.url}}\">\r\n                                {{'HEADER.REPORT'|translate}}\r\n                            </a>\r\n                            <li class=\"d-block py-1\">\r\n                                <div class=\"d-flex \">\r\n                                    <a href=\"{{navigation.wanted.url}}\" class=\"text-white flex-grow-1\">\r\n                                        {{navigation.wanted.transId|translate}}\r\n                                    </a>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </li>\r\n                    <li class=\"list-group-item bg-primary\" [ngClass]=\"showObservations?'border-bottom-0 pb-0':''\">\r\n                        <div class=\"d-flex justify-content-between gap-2\">\r\n                            <a class=\"py-1 text-white flex-grow-1\" href=\"{{navigation.observations.url}}\">\r\n                                {{navigation.observations.transId|translate}}\r\n                            </a>\r\n                            <button class=\"btn btn-sm btn-primary\" (click)=\"showObservations = !showObservations\" attr.aria-controls=\"observations-links\" attr.aria-expanded=\"{{showObservations}}\">\r\n                                <span class=\"fas\" [ngClass]=\"showObservations?'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=\"showObservations\" id=\"observations-links\">\r\n                        <ul class=\"list-unstyled\">\r\n                            <li class=\"d-block py-1\">\r\n                                <a class=\"d-block py-1 text-white\" href=\"{{navigation.observations.url}}\">\r\n                                    {{'HEADER.TODAYS_OBSERVATIONS'|translate}}\r\n                                </a>\r\n                            </li>\r\n                            <li class=\"d-block py-0\">\r\n                                <a class=\"d-block py-1 text-white\" href=\"{{navigation.fieldDiary.url}}\">\r\n                                    {{'HEADER.FIELD_DIARY'|translate}}\r\n                                </a>\r\n                            </li>\r\n                        </ul>\r\n                    </li>\r\n                    <li class=\"list-group-item bg-primary\" [ngClass]=\"showSubs?'border-bottom-0 pb-0':''\">\r\n                        <div class=\"d-flex justify-content-between gap-2\">\r\n                            <button class=\"btn btn-link p-0 text-white w-100 text-start\" (click)=\"showSubs = !showSubs\">\r\n                                {{navigation.subcriptions.transId|translate}}\r\n                            </button>\r\n                            <button class=\"btn btn-sm btn-primary\" (click)=\"showSubs = !showSubs\" attr.aria-controls=\"subs-links\" attr.aria-expanded=\"{{showSubs}}\">\r\n                                <span class=\"fas\" [ngClass]=\"showSubs?'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=\"showSubs\" id=\"subs-links\">\r\n                        <ul class=\"list-unstyled\">\r\n                            <li class=\"d-block py-1\">\r\n                                <a class=\"d-block py-1 text-white\" href=\"{{navigation.subcriptions.url}}\">\r\n                                    {{'HEADER.MY_SUBSCRIPTIONS'|translate}}\r\n                                </a>\r\n                            </li>\r\n                            <li class=\"py-1\">\r\n                                <div class=\"d-flex\">\r\n                                    <a href=\"{{navigation.events.url}}\" class=\"text-white flex-grow-1\">\r\n                                        {{navigation.events.transId|translate}}\r\n                                    </a>\r\n                                </div>\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.fyndregler.url}}\">\r\n                            {{navigation.fyndregler.transId|translate}}\r\n                        </a>\r\n                    </li>\r\n                    <li class=\"list-group-item bg-primary\">\r\n                        <a class=\"d-block fw-bold py-1 text-white\" [href]=\"navigation.artportalenUrl\">\r\n                            Artportalen.se\r\n                            <i class=\"fas fa-external-link\"></i>\r\n                        </a>\r\n                    </li>\r\n                    <li class=\"list-group-item bg-primary\">\r\n                        <a class=\"d-block fw-bold py-1 text-white\" [href]=\"navigation.artfaktaUrl\">\r\n                            {{'HEADER.ARTFAKTA'|translate}}\r\n                            <i class=\"fas fa-external-link\"></i>\r\n                        </a>\r\n                    </li>\r\n                    <li class=\"list-group-item bg-primary\">\r\n                        <small class=\"d-block text-white pt-1\">\r\n                            {{'HEADER.DEVELOPED_BY'|translate}}\r\n                            <a href=\"https://www.artdatabanken.se/\" class=\"text-white\">\r\n                                {{'HEADER.ARTDATABANKEN'|translate}}\r\n                                <span class=\"fas fa-external-link\"></span>\r\n                            </a>\r\n                        </small>\r\n                    </li>\r\n                </ul>\r\n            </div>\r\n            <div id=\"pattern\" class=\"flex-grow-1\"> </div>\r\n        </div>\r\n    </div>\r\n</div>" }]
+            args: [{ selector: 'adb-artportalen-nav', standalone: false, template: "<div class=\"bg-primary adb-main-header position-static\" (adbClickOutside)=\"showMenuDropdown(false);\">\r\n  @if (translationFinished) {\r\n    <header class=\"container-lg px-0\">\r\n      <div [attr.id]=\"showPattern?'banner':''\" class=\"px-1 d-flex flex-wrap align-items-center gap-2\">\r\n        <nav class=\"d-flex flex-grow-1 align-items-center pe-2 py-2 gap-2\">\r\n          <a class=\"d-flex 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/slu.svg\" alt=\"logo\">\r\n            <div class=\"border-end d-none d-sm-block\"></div>\r\n            <img class=\"d-none d-sm-block align-self-center pe-5\" style=\"height: 0.7rem;\" src=\"/assets/images/artdatabanken.svg\" alt=\"logo\">\r\n          </a>\r\n          <a [href]=\"navigation?.home\" class=\"text-white text-decoration-none fs-1 fw-bold\">{{'HEADER.TITLE'|translate}}</a>\r\n        </nav>\r\n        <div class=\"ms-auto d-flex align-items-center gap-2\">\r\n          <div><ng-content></ng-content></div>\r\n          <div>\r\n            <button class=\"d-none d-md-block btn btn-primary-dark btn-lg\" type=\"button\"\r\n              title=\"{{(!fullName ? 'HEADER.LOGIN' : 'HEADER.LOGOUT')|translate}}\"\r\n              attr.aria-label=\"{{(!fullName ? 'HEADER.LOGIN' : 'HEADER.LOGOUT')|translate}}\"\r\n              (click)=\"onUserClick()\">\r\n              <small>{{(!fullName ? 'HEADER.LOGIN' : 'HEADER.LOGOUT')|translate}}</small>\r\n            </button>\r\n          </div>\r\n          <div>\r\n            <button class=\"btn btn-primary-dark btn-lg\" type=\"button\" title=\"{{'HEADER.MENY'|translate}}\" attr.aria-label=\"{{'HEADER.MENY'|translate}}\" (click)=\"showMenuDropdown(!showNavMenu)\">\r\n              <i class=\"fas fa-bars\"></i>\r\n              <small class=\"ms-2 d-none d-md-inline-block\">{{'HEADER.MENY'|translate}}</small>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex justify-content-center d-md-none p-2 border-dark border-top\">\r\n        <button class=\"btn btn-primary-dark btn-lg\" type=\"button\"\r\n          title=\"{{(!fullName ? 'HEADER.LOGIN' : 'HEADER.LOGOUT')|translate}}\"\r\n          attr.aria-label=\"{{(!fullName ? 'HEADER.LOGIN' : 'HEADER.LOGOUT')|translate}}\" (click)=\"onUserClick()\">\r\n          <small>{{(!fullName ? 'HEADER.LOGIN' : 'HEADER.LOGOUT')|translate}}</small>\r\n        </button>\r\n      </div>\r\n    </header>\r\n  }\r\n  @if (navigation) {\r\n    <div role=\"dialog\" class=\"offcanvas offcanvas-end bg-primary text-white\" [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\"><a [href]=\"navigation.home\" class=\"text-white text-decoration-none\">{{'HEADER.TITLE'|translate}}</a></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=\"px-3\">\r\n          <div class=\"d-flex flex-wrap justify-content-between align-items-center mb-2 gap-1 px-2\">\r\n            @if (fullName) {\r\n              <div>\r\n                <button (click)=\"logout()\" type=\"button\" class=\"btn btn-primary-dark\">\r\n                  {{'HEADER.LOGOUT'|translate}}\r\n                </button>\r\n              </div>\r\n              <div>{{fullName}}</div>\r\n            }\r\n            @if (!fullName) {\r\n              <div class=\"text-center\">\r\n                <button type=\"button\" class=\"btn btn-primary-dark\" (click)=\"login()\" id=\"start-login\">{{'HEADER.LOGIN'|translate}}</button>\r\n              </div>\r\n              @if (navigation) {\r\n                <a class=\"text-white\" href=\"{{navigation.createAccountLink}}?lang={{trans.currentLang}}&returnUrl={{url}}\">\r\n                  {{'HEADER.CREATE_USER'|translate}}\r\n                </a>\r\n              }\r\n            }\r\n          </div>\r\n          <ul class=\"list-group list-group-flush border-top\">\r\n            <li class=\"list-group-item bg-primary\" [ngClass]=\"showReport?'border-bottom-0 pb-0':''\">\r\n              <div class=\"d-flex justify-content-between gap-2\">\r\n                <a class=\"py-1 text-white flex-grow-1\" href=\"{{navigation.report.url}}\">\r\n                  {{navigation.report.transId|translate}}\r\n                </a>\r\n                <button class=\"btn btn-sm btn-primary\" (click)=\"showReport = !showReport\" attr.aria-controls=\"report-links\" attr.aria-expanded=\"{{showReport}}\">\r\n                  <span class=\"fas\" [ngClass]=\"showReport?'fa-chevron-up':'fa-chevron-down'\"></span>\r\n                </button>\r\n              </div>\r\n            </li>\r\n            @if (showReport) {\r\n              <li class=\"list-group-item bg-primary pt-0 px-3\" id=\"report-links\">\r\n                <ul class=\"list-unstyled\">\r\n                  <li class=\"d-block py-1\">\r\n                    <div class=\"d-flex\">\r\n                      <a href=\"{{navigation.checklist.url}}\" class=\"text-white flex-grow-1\">\r\n                        {{navigation.checklist.transId|translate}}\r\n                      </a>\r\n                    </div>\r\n                  </li>\r\n                  <a class=\"d-block py-1 text-white\" href=\"{{navigation.report.url}}\">\r\n                    {{'HEADER.REPORT'|translate}}\r\n                  </a>\r\n                  <li class=\"d-block py-1\">\r\n                    <div class=\"d-flex \">\r\n                      <a href=\"{{navigation.wanted.url}}\" class=\"text-white flex-grow-1\">\r\n                        {{navigation.wanted.transId|translate}}\r\n                      </a>\r\n                    </div>\r\n                  </li>\r\n                </ul>\r\n              </li>\r\n            }\r\n            <li class=\"list-group-item bg-primary\" [ngClass]=\"showObservations?'border-bottom-0 pb-0':''\">\r\n              <div class=\"d-flex justify-content-between gap-2\">\r\n                <a class=\"py-1 text-white flex-grow-1\" href=\"{{navigation.observations.url}}\">\r\n                  {{navigation.observations.transId|translate}}\r\n                </a>\r\n                <button class=\"btn btn-sm btn-primary\" (click)=\"showObservations = !showObservations\" attr.aria-controls=\"observations-links\" attr.aria-expanded=\"{{showObservations}}\">\r\n                  <span class=\"fas\" [ngClass]=\"showObservations?'fa-chevron-up':'fa-chevron-down'\"></span>\r\n                </button>\r\n              </div>\r\n            </li>\r\n            @if (showObservations) {\r\n              <li class=\"list-group-item bg-primary pt-0 px-3\" id=\"observations-links\">\r\n                <ul class=\"list-unstyled\">\r\n                  <li class=\"d-block py-1\">\r\n                    <a class=\"d-block py-1 text-white\" href=\"{{navigation.observations.url}}\">\r\n                      {{'HEADER.TODAYS_OBSERVATIONS'|translate}}\r\n                    </a>\r\n                  </li>\r\n                  <li class=\"d-block py-0\">\r\n                    <a class=\"d-block py-1 text-white\" href=\"{{navigation.fieldDiary.url}}\">\r\n                      {{'HEADER.FIELD_DIARY'|translate}}\r\n                    </a>\r\n                  </li>\r\n                </ul>\r\n              </li>\r\n            }\r\n            <li class=\"list-group-item bg-primary\" [ngClass]=\"showSubs?'border-bottom-0 pb-0':''\">\r\n              <div class=\"d-flex justify-content-between gap-2\">\r\n                <button class=\"btn btn-link p-0 text-white w-100 text-start\" (click)=\"showSubs = !showSubs\">\r\n                  {{navigation.subcriptions.transId|translate}}\r\n                </button>\r\n                <button class=\"btn btn-sm btn-primary\" (click)=\"showSubs = !showSubs\" attr.aria-controls=\"subs-links\" attr.aria-expanded=\"{{showSubs}}\">\r\n                  <span class=\"fas\" [ngClass]=\"showSubs?'fa-chevron-up':'fa-chevron-down'\"></span>\r\n                </button>\r\n              </div>\r\n            </li>\r\n            @if (showSubs) {\r\n              <li class=\"list-group-item bg-primary pt-0 px-3\" id=\"subs-links\">\r\n                <ul class=\"list-unstyled\">\r\n                  <li class=\"d-block py-1\">\r\n                    <a class=\"d-block py-1 text-white\" href=\"{{navigation.subcriptions.url}}\">\r\n                      {{'HEADER.MY_SUBSCRIPTIONS'|translate}}\r\n                    </a>\r\n                  </li>\r\n                  <li class=\"py-1\">\r\n                    <div class=\"d-flex\">\r\n                      <a href=\"{{navigation.events.url}}\" class=\"text-white flex-grow-1\">\r\n                        {{navigation.events.transId|translate}}\r\n                      </a>\r\n                    </div>\r\n                  </li>\r\n                </ul>\r\n              </li>\r\n            }\r\n            <li class=\"list-group-item bg-primary\">\r\n              <a class=\"d-block py-1 text-white\" href=\"{{navigation.fyndregler.url}}\">\r\n                {{navigation.fyndregler.transId|translate}}\r\n              </a>\r\n            </li>\r\n            <li class=\"list-group-item bg-primary\">\r\n              <a class=\"d-block fw-bold py-1 text-white\" [href]=\"navigation.artportalenUrl\">\r\n                Artportalen.se\r\n                <i class=\"fas fa-external-link\"></i>\r\n              </a>\r\n            </li>\r\n            <li class=\"list-group-item bg-primary\">\r\n              <a class=\"d-block fw-bold py-1 text-white\" [href]=\"navigation.artfaktaUrl\">\r\n                {{'HEADER.ARTFAKTA'|translate}}\r\n                <i class=\"fas fa-external-link\"></i>\r\n              </a>\r\n            </li>\r\n            <li class=\"list-group-item bg-primary\">\r\n              <small class=\"d-block text-white pt-1\">\r\n                {{'HEADER.DEVELOPED_BY'|translate}}\r\n                <a href=\"https://www.artdatabanken.se/\" class=\"text-white\">\r\n                  {{'HEADER.ARTDATABANKEN'|translate}}\r\n                  <span class=\"fas fa-external-link\"></span>\r\n                </a>\r\n              </small>\r\n            </li>\r\n          </ul>\r\n        </div>\r\n        <div id=\"pattern\" class=\"flex-grow-1\"> </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>" }]
         }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: i1.Router }, { type: i1$1.TranslateService }, { type: EnvironmentService }], propDecorators: { loginClicked: [{
                 type: Output
             }], logoutClicked: [{
@@ -1086,12 +1086,12 @@ class ArtportalenFooterComponent {
     ngOnDestroy() {
         this.subscription.unsubscribe();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ArtportalenFooterComponent, deps: [{ token: i1$2.HttpClient }, { token: EnvironmentService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: ArtportalenFooterComponent, isStandalone: false, selector: "adb-artportalen-footer", 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 px-5 justify-content-center text-white\">\r\n            <div class=\"row mb-4\">\r\n                <div class=\"col-md-2\"></div>\r\n                <div class=\"col-md-4 mb-3\">\r\n                    <a href=\"https://www.slu.se/artdatabanken/rapportering-och-fynd/artportalen/om\" class=\"d-block text-white mb-2\">{{'FOOTER.ABOUT'|translate}}</a>\r\n                    <a href=\"https://www.slu.se/artdatabanken/rapportering-och-fynd/artportalen/artportalen-tillganglighetsredogorelse\" class=\"d-block text-white mb-2\">{{'FOOTER.WCAG'|translate}}</a>\r\n                    <a href=\"https://www.slu.se/artdatabanken/om-oss/kontakt/artportalen-support\" class=\"d-block text-white mb-2\"><span class=\"me-1\">{{'FOOTER.SUPPORT'|translate}}</span><span class=\"fas fa-external-link\"></span></a>\r\n                    <a href=\"https://www.slu.se/artdatabanken/rapportering-och-fynd/villkor-kontohavare\" class=\"d-block text-white mb-2\"><span class=\"me-1\">{{'FOOTER.TERMS_OF_USE'|translate}}</span><span class=\"fas fa-external-link\"></span></a>\r\n                    <a href=\"https://www.slu.se/artdatabanken/om-oss/behandling-av-personuppgifter\" class=\"d-block text-white mb-2\"><span class=\"me-1\">{{'FOOTER.PERSONAL_DATA'|translate}}</span><span class=\"fas fa-external-link\"></span></a>\r\n                </div>\r\n                <div class=\"col-md-4\">\r\n                    <div class=\"mb-2\" style=\"font-variant: small-caps;\"><sub><strong>{{'FOOTER.PARTNERS'|translate}}</strong></sub></div>\r\n                    <a href=\"https://birdlife.se\" class=\"d-block text-white mb-2\"><span class=\"me-1\">BirdLife Sverige</span><span class=\"fas fa-external-link\"></span></a>\r\n                    <a href=\"https://svenskbotanik.se\" class=\"d-block text-nowrap text-white mb-2\"><span class=\"me-1\">Svenska Botaniska F\u00F6reningen</span><span class=\"fas fa-external-link\"></span></a>\r\n                    <a href=\"https://www.sef.nu\" class=\"d-block text-nowrap text-white mb-2\"><span class=\"me-1\">Sveriges Entomologiska F\u00F6rening</span><span class=\"fas fa-external-link\"></span></a>\r\n                    <a href=\"https://www.svampar.se\" class=\"d-block text-nowrap text-white mb-2\"><span class=\"me-1\">Sveriges Mykologiska F\u00F6rening</span><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\">\r\n                    <div class=\"mb-3 text-white\">\r\n                        <div>{{'FOOTER.INFO'|translate}}</div>\r\n                        <div>{{'FOOTER.INFO2'|translate}}</div>\r\n                        <div>{{'FOOTER.INFO3'|translate}}\r\n                            <a href=\"https://www.naturvardsverket.se\" class=\"text-white mb-2\"><u class=\"me-1\">Naturv\u00E5rdsverket.</u><span class=\"fas fa-external-link\"></span></a>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"mb-3\">{{'FOOTER.INFO4'|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 class=\"d-block d-md-none\" style=\"height: 2.6rem;\" src=\"/assets/images/slu.svg\" alt=\"logo\">\r\n                        <img class=\"d-none d-md-block\" style=\"height: 2rem;\" src=\"/assets/images/slu.svg\" alt=\"logo\">\r\n                        <div class=\"border-end d-none d-sm-block\"></div>\r\n                        <div class=\"border-end d-block d-sm-none\"></div>\r\n                        <img class=\"d-none d-md-block align-self-center pe-5\" style=\"height: 0.7rem;\" src=\"/assets/images/artdatabanken.svg\" alt=\"logo\">\r\n                        <img class=\"d-block d-md-none align-self-center pe-5\" style=\"height: 0.8rem;\" src=\"/assets/images/artdatabanken.svg\" alt=\"logo\">\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>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ArtportalenFooterComponent, deps: [{ token: i1$2.HttpClient }, { token: EnvironmentService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ArtportalenFooterComponent, isStandalone: false, selector: "adb-artportalen-footer", ngImport: i0, template: "@if (translationFinished) {\r\n  <footer class=\"bg-primary-dark py-2 mt-auto container-fluid\">\r\n    <div class=\"d-flex justify-content-center\">\r\n      <div class=\"container py-3 px-5 justify-content-center text-white\">\r\n        <div class=\"row mb-4\">\r\n          <div class=\"col-md-2\"></div>\r\n          <div class=\"col-md-4 mb-3\">\r\n            <a href=\"https://www.slu.se/artdatabanken/rapportering-och-fynd/artportalen/om\" class=\"d-block text-white mb-2\">{{'FOOTER.ABOUT'|translate}}</a>\r\n            <a href=\"https://www.slu.se/artdatabanken/rapportering-och-fynd/artportalen/artportalen-tillganglighetsredogorelse\" class=\"d-block text-white mb-2\">{{'FOOTER.WCAG'|translate}}</a>\r\n            <a href=\"https://www.slu.se/artdatabanken/om-oss/kontakt/artportalen-support\" class=\"d-block text-white mb-2\"><span class=\"me-1\">{{'FOOTER.SUPPORT'|translate}}</span><span class=\"fas fa-external-link\"></span></a>\r\n            <a href=\"https://www.slu.se/artdatabanken/rapportering-och-fynd/villkor-kontohavare\" class=\"d-block text-white mb-2\"><span class=\"me-1\">{{'FOOTER.TERMS_OF_USE'|translate}}</span><span class=\"fas fa-external-link\"></span></a>\r\n            <a href=\"https://www.slu.se/artdatabanken/om-oss/behandling-av-personuppgifter\" class=\"d-block text-white mb-2\"><span class=\"me-1\">{{'FOOTER.PERSONAL_DATA'|translate}}</span><span class=\"fas fa-external-link\"></span></a>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <div class=\"mb-2\" style=\"font-variant: small-caps;\"><sub><strong>{{'FOOTER.PARTNERS'|translate}}</strong></sub></div>\r\n            <a href=\"https://birdlife.se\" class=\"d-block text-white mb-2\"><span class=\"me-1\">BirdLife Sverige</span><span class=\"fas fa-external-link\"></span></a>\r\n            <a href=\"https://svenskbotanik.se\" class=\"d-block text-nowrap text-white mb-2\"><span class=\"me-1\">Svenska Botaniska F\u00F6reningen</span><span class=\"fas fa-external-link\"></span></a>\r\n            <a href=\"https://www.sef.nu\" class=\"d-block text-nowrap text-white mb-2\"><span class=\"me-1\">Sveriges Entomologiska F\u00F6rening</span><span class=\"fas fa-external-link\"></span></a>\r\n            <a href=\"https://www.svampar.se\" class=\"d-block text-nowrap text-white mb-2\"><span class=\"me-1\">Sveriges Mykologiska F\u00F6rening</span><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\">\r\n            <div class=\"mb-3 text-white\">\r\n              <div>{{'FOOTER.INFO'|translate}}</div>\r\n              <div>{{'FOOTER.INFO2'|translate}}</div>\r\n              <div>{{'FOOTER.INFO3'|translate}}\r\n                <a href=\"https://www.naturvardsverket.se\" class=\"text-white mb-2\"><u class=\"me-1\">Naturv\u00E5rdsverket.</u><span class=\"fas fa-external-link\"></span></a>\r\n              </div>\r\n            </div>\r\n            <div class=\"mb-3\">{{'FOOTER.INFO4'|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 class=\"d-block d-md-none\" style=\"height: 2.6rem;\" src=\"/assets/images/slu.svg\" alt=\"logo\">\r\n              <img class=\"d-none d-md-block\" style=\"height: 2rem;\" src=\"/assets/images/slu.svg\" alt=\"logo\">\r\n              <div class=\"border-end d-none d-sm-block\"></div>\r\n              <div class=\"border-end d-block d-sm-none\"></div>\r\n              <img class=\"d-none d-md-block align-self-center pe-5\" style=\"height: 0.7rem;\" src=\"/assets/images/artdatabanken.svg\" alt=\"logo\">\r\n              <img class=\"d-block d-md-none align-self-center pe-5\" style=\"height: 0.8rem;\" src=\"/assets/images/artdatabanken.svg\" alt=\"logo\">\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>\r\n}", dependencies: [{ kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ArtportalenFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ArtportalenFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'adb-artportalen-footer', standalone: false, 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 px-5 justify-content-center text-white\">\r\n            <div class=\"row mb-4\">\r\n                <div class=\"col-md-2\"></div>\r\n                <div class=\"col-md-4 mb-3\">\r\n                    <a href=\"https://www.slu.se/artdatabanken/rapportering-och-fynd/artportalen/om\" class=\"d-block text-white mb-2\">{{'FOOTER.ABOUT'|translate}}</a>\r\n                    <a href=\"https://www.slu.se/artdatabanken/rapportering-och-fynd/artportalen/artportalen-tillganglighetsredogorelse\" class=\"d-block text-white mb-2\">{{'FOOTER.WCAG'|translate}}</a>\r\n                    <a href=\"https://www.slu.se/artdatabanken/om-oss/kontakt/artportalen-support\" class=\"d-block text-white mb-2\"><span class=\"me-1\">{{'FOOTER.SUPPORT'|translate}}</span><span class=\"fas fa-external-link\"></span></a>\r\n                    <a href=\"https://www.slu.se/artdatabanken/rapportering-och-fynd/villkor-kontohavare\" class=\"d-block text-white mb-2\"><span class=\"me-1\">{{'FOOTER.TERMS_OF_USE'|translate}}</span><span class=\"fas fa-external-link\"></span></a>\r\n                    <a href=\"https://www.slu.se/artdatabanken/om-oss/behandling-av-personuppgifter\" class=\"d-block text-white mb-2\"><span class=\"me-1\">{{'FOOTER.PERSONAL_DATA'|translate}}</span><span class=\"fas fa-external-link\"></span></a>\r\n                </div>\r\n                <div class=\"col-md-4\">\r\n                    <div class=\"mb-2\" style=\"font-variant: small-caps;\"><sub><strong>{{'FOOTER.PARTNERS'|translate}}</strong></sub></div>\r\n                    <a href=\"https://birdlife.se\" class=\"d-block text-white mb-2\"><span class=\"me-1\">BirdLife Sverige</span><span class=\"fas fa-external-link\"></span></a>\r\n                    <a href=\"https://svenskbotanik.se\" class=\"d-block text-nowrap text-white mb-2\"><span class=\"me-1\">Svenska Botaniska F\u00F6reningen</span><span class=\"fas fa-external-link\"></span></a>\r\n                    <a href=\"https://www.sef.nu\" class=\"d-block text-nowrap text-white mb-2\"><span class=\"me-1\">Sveriges Entomologiska F\u00F6rening</span><span class=\"fas fa-external-link\"></span></a>\r\n                    <a href=\"https://www.svampar.se\" class=\"d-block text-nowrap text-white mb-2\"><span class=\"me-1\">Sveriges Mykologiska F\u00F6rening</span><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\">\r\n                    <div class=\"mb-3 text-white\">\r\n                        <div>{{'FOOTER.INFO'|translate}}</div>\r\n                        <div>{{'FOOTER.INFO2'|translate}}</div>\r\n                        <div>{{'FOOTER.INFO3'|translate}}\r\n                            <a href=\"https://www.naturvardsverket.se\" class=\"text-white mb-2\"><u class=\"me-1\">Naturv\u00E5rdsverket.</u><span class=\"fas fa-external-link\"></span></a>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"mb-3\">{{'FOOTER.INFO4'|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 class=\"d-block d-md-none\" style=\"height: 2.6rem;\" src=\"/assets/images/slu.svg\" alt=\"logo\">\r\n                        <img class=\"d-none d-md-block\" style=\"height: 2rem;\" src=\"/assets/images/slu.svg\" alt=\"logo\">\r\n                        <div class=\"border-end d-none d-sm-block\"></div>\r\n                        <div class=\"border-end d-block d-sm-none\"></div>\r\n                        <img class=\"d-none d-md-block align-self-center pe-5\" style=\"height: 0.7rem;\" src=\"/assets/images/artdatabanken.svg\" alt=\"logo\">\r\n                        <img class=\"d-block d-md-none align-self-center pe-5\" style=\"height: 0.8rem;\" src=\"/assets/images/artdatabanken.svg\" alt=\"logo\">\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>" }]
+            args: [{ selector: 'adb-artportalen-footer', standalone: false, template: "@if (translationFinished) {\r\n  <footer class=\"bg-primary-dark py-2 mt-auto container-fluid\">\r\n    <div class=\"d-flex justify-content-center\">\r\n      <div class=\"container py-3 px-5 justify-content-center text-white\">\r\n        <div class=\"row mb-4\">\r\n          <div class=\"col-md-2\"></div>\r\n          <div class=\"col-md-4 mb-3\">\r\n            <a href=\"https://www.slu.se/artdatabanken/rapportering-och-fynd/artportalen/om\" class=\"d-block text-white mb-2\">{{'FOOTER.ABOUT'|translate}}</a>\r\n            <a href=\"https://www.slu.se/artdatabanken/rapportering-och-fynd/artportalen/artportalen-tillganglighetsredogorelse\" class=\"d-block text-white mb-2\">{{'FOOTER.WCAG'|translate}}</a>\r\n            <a href=\"https://www.slu.se/artdatabanken/om-oss/kontakt/artportalen-support\" class=\"d-block text-white mb-2\"><span class=\"me-1\">{{'FOOTER.SUPPORT'|translate}}</span><span class=\"fas fa-external-link\"></span></a>\r\n            <a href=\"https://www.slu.se/artdatabanken/rapportering-och-fynd/villkor-kontohavare\" class=\"d-block text-white mb-2\"><span class=\"me-1\">{{'FOOTER.TERMS_OF_USE'|translate}}</span><span class=\"fas fa-external-link\"></span></a>\r\n            <a href=\"https://www.slu.se/artdatabanken/om-oss/behandling-av-personuppgifter\" class=\"d-block text-white mb-2\"><span class=\"me-1\">{{'FOOTER.PERSONAL_DATA'|translate}}</span><span class=\"fas fa-external-link\"></span></a>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <div class=\"mb-2\" style=\"font-variant: small-caps;\"><sub><strong>{{'FOOTER.PARTNERS'|translate}}</strong></sub></div>\r\n            <a href=\"https://birdlife.se\" class=\"d-block text-white mb-2\"><span class=\"me-1\">BirdLife Sverige</span><span class=\"fas fa-external-link\"></span></a>\r\n            <a href=\"https://svenskbotanik.se\" class=\"d-block text-nowrap text-white mb-2\"><span class=\"me-1\">Svenska Botaniska F\u00F6reningen</span><span class=\"fas fa-external-link\"></span></a>\r\n            <a href=\"https://www.sef.nu\" class=\"d-block text-nowrap text-white mb-2\"><span class=\"me-1\">Sveriges Entomologiska F\u00F6rening</span><span class=\"fas fa-external-link\"></span></a>\r\n            <a href=\"https://www.svampar.se\" class=\"d-block text-nowrap text-white mb-2\"><span class=\"me-1\">Sveriges Mykologiska F\u00F6rening</span><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\">\r\n            <div class=\"mb-3 text-white\">\r\n              <div>{{'FOOTER.INFO'|translate}}</div>\r\n              <div>{{'FOOTER.INFO2'|translate}}</div>\r\n              <div>{{'FOOTER.INFO3'|translate}}\r\n                <a href=\"https://www.naturvardsverket.se\" class=\"text-white mb-2\"><u class=\"me-1\">Naturv\u00E5rdsverket.</u><span class=\"fas fa-external-link\"></span></a>\r\n              </div>\r\n            </div>\r\n            <div class=\"mb-3\">{{'FOOTER.INFO4'|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 class=\"d-block d-md-none\" style=\"height: 2.6rem;\" src=\"/assets/images/slu.svg\" alt=\"logo\">\r\n              <img class=\"d-none d-md-block\" style=\"height: 2rem;\" src=\"/assets/images/slu.svg\" alt=\"logo\">\r\n              <div class=\"border-end d-none d-sm-block\"></div>\r\n              <div class=\"border-end d-block d-sm-none\"></div>\r\n              <img class=\"d-none d-md-block align-self-center pe-5\" style=\"height: 0.7rem;\" src=\"/assets/images/artdatabanken.svg\" alt=\"logo\">\r\n              <img class=\"d-block d-md-none align-self-center pe-5\" style=\"height: 0.8rem;\" src=\"/assets/images/artdatabanken.svg\" alt=\"logo\">\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>\r\n}" }]
         }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: EnvironmentService }, { type: i1$1.TranslateService }] });
 
 class ArtportalenNavModule {
@@ -1107,8 +1107,8 @@ class ArtportalenNavModule {
             ]
         };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ArtportalenNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: ArtportalenNavModule, declarations: [ArtportalenNavComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ArtportalenNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: ArtportalenNavModule, declarations: [ArtportalenNavComponent,
             ArtportalenFooterComponent], imports: [CommonModule,
             RouterModule,
             TranslateModule,
@@ -1116,14 +1116,14 @@ class ArtportalenNavModule {
             AdbDropdownModule,
             AdbPagersModule], exports: [ArtportalenNavComponent,
             ArtportalenFooterComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ArtportalenNavModule, providers: [provideHttpClient(withInterceptorsFromDi())], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ArtportalenNavModule, providers: [provideHttpClient(withInterceptorsFromDi())], imports: [CommonModule,
             RouterModule,
             TranslateModule,
             AdbDirectivesModule,
             AdbDropdownModule,
             AdbPagersModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ArtportalenNavModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ArtportalenNavModule, decorators: [{
             type: NgModule,
             args: [{ declarations: [
                         ArtportalenNavComponent,
@@ -1148,10 +1148,10 @@ class LocaleDatePipe {
     transform(value, format) {
         return new DatePipe(this.translate.currentLang).transform(value, format, null, this.translate.currentLang);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LocaleDatePipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: LocaleDatePipe, isStandalone: false, name: "adbLocaleDate", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LocaleDatePipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: LocaleDatePipe, isStandalone: false, name: "adbLocaleDate", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LocaleDatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LocaleDatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'adbLocaleDate',
@@ -1170,10 +1170,10 @@ class EmptyValuePipe {
         }
         return value;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: EmptyValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: EmptyValuePipe, isStandalone: false, name: "adbEmptyValue" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EmptyValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: EmptyValuePipe, isStandalone: false, name: "adbEmptyValue" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: EmptyValuePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EmptyValuePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'adbEmptyValue',
@@ -1215,10 +1215,10 @@ class HighlightPipe {
     normalizeText(text) {
         return text?.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLocaleLowerCase();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: HighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: HighlightPipe, isStandalone: false, name: "adbHighlight" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: HighlightPipe, isStandalone: false, name: "adbHighlight" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: HighlightPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HighlightPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'adbHighlight',
@@ -1234,10 +1234,10 @@ class NumberSpacingPipe {
         }
         return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NumberSpacingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: NumberSpacingPipe, isStandalone: false, name: "adbSpacing", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NumberSpacingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: NumberSpacingPipe, isStandalone: false, name: "adbSpacing", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NumberSpacingPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NumberSpacingPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'adbSpacing',
@@ -1280,10 +1280,10 @@ class HighlightHtmlPipe {
     escapeRegExp(text) {
         return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: HighlightHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: HighlightHtmlPipe, isStandalone: false, name: "adbHighlightHtml" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HighlightHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: HighlightHtmlPipe, isStandalone: false, name: "adbHighlightHtml" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: HighlightHtmlPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HighlightHtmlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'adbHighlightHtml',
@@ -1292,11 +1292,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
         }] });
 
 class AdbPipesModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbPipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: AdbPipesModule, declarations: [HighlightPipe, HighlightHtmlPipe, NumberSpacingPipe, LocaleDatePipe, EmptyValuePipe], exports: [HighlightPipe, HighlightHtmlPipe, NumberSpacingPipe, LocaleDatePipe, EmptyValuePipe] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbPipesModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbPipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AdbPipesModule, declarations: [HighlightPipe, HighlightHtmlPipe, NumberSpacingPipe, LocaleDatePipe, EmptyValuePipe], exports: [HighlightPipe, HighlightHtmlPipe, NumberSpacingPipe, LocaleDatePipe, EmptyValuePipe] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbPipesModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbPipesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbPipesModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [],
@@ -1454,10 +1454,10 @@ class AdbDatePickerComponent {
             return null;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: AdbDatePickerComponent, isStandalone: false, selector: "adb-date-picker", inputs: { initialDate: "initialDate", settings: "settings", toLeft: "toLeft", id: "id" }, outputs: { selectDate: "selectDate" }, 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\">\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\" *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>\r\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleDatePipe, name: "adbLocaleDate" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AdbDatePickerComponent, isStandalone: false, selector: "adb-date-picker", inputs: { initialDate: "initialDate", settings: "settings", toLeft: "toLeft", id: "id" }, outputs: { selectDate: "selectDate" }, 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\">\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\" *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>\r\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleDatePipe, name: "adbLocaleDate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbDatePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbDatePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'adb-date-picker', standalone: false, template: "<div class=\"position-relative\" [class.to-left]=\"toLeft\">\r\n    <nav class=\"bg-white shadow rounded position-absolute\">\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\" *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>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.TranslateService }], propDecorators: { initialDate: [{
@@ -1476,10 +1476,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
             }] } });
 
 class AdbDatePickerService {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbDatePickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbDatePickerService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbDatePickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbDatePickerService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbDatePickerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbDatePickerService, decorators: [{
             type: Injectable
         }] });
 
@@ -1638,8 +1638,8 @@ class AdbDatePickerDirective {
     getId() {
         return '' + Math.floor(Math.random() * Date.now());
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", 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 */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: AdbDatePickerDirective, isStandalone: false, selector: "input[adbDatepicker]", inputs: { format: "format", toLeft: "toLeft", settings: "settings" }, outputs: { adbBlur: "adbBlur" }, host: { listeners: { "click": "onClick()", "keyup": "onKeyup($event)", "keydown.shift.tab": "onTabDown()", "keydown.tab": "onTabDown()", "keydown.esc": "onEscdOWN()", "document:click": "onCheckOutSideClick($event.target)" }, properties: { "autocomplete": "this.autocomplete" } }, providers: [{
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", 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 */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: AdbDatePickerDirective, isStandalone: false, selector: "input[adbDatepicker]", inputs: { format: "format", toLeft: "toLeft", settings: "settings" }, outputs: { adbBlur: "adbBlur" }, host: { listeners: { "click": "onClick()", "keyup": "onKeyup($event)", "keydown.shift.tab": "onTabDown()", "keydown.tab": "onTabDown()", "keydown.esc": "onEscdOWN()", "document:click": "onCheckOutSideClick($event.target)" }, properties: { "autocomplete": "this.autocomplete" } }, providers: [{
                 provide: NG_VALUE_ACCESSOR, useExisting: forwardRef((() => AdbDatePickerDirective)),
                 multi: true
             },
@@ -1649,7 +1649,7 @@ class AdbDatePickerDirective {
                 multi: true,
             },], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbDatePickerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbDatePickerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `input[adbDatepicker]`,
@@ -1696,11 +1696,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
             }] } });
 
 class AdbDatePickerModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: AdbDatePickerModule, declarations: [AdbDatePickerComponent, AdbDatePickerDirective], imports: [CommonModule, i1$1.TranslateModule, AdbPipesModule, AdbDirectivesModule], exports: [AdbDatePickerComponent, AdbDatePickerDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbDatePickerModule, providers: [AdbDatePickerService], imports: [CommonModule, TranslateModule.forChild(), AdbPipesModule, AdbDirectivesModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AdbDatePickerModule, declarations: [AdbDatePickerComponent, AdbDatePickerDirective], imports: [CommonModule, i1$1.TranslateModule, AdbPipesModule, AdbDirectivesModule], exports: [AdbDatePickerComponent, AdbDatePickerDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbDatePickerModule, providers: [AdbDatePickerService], imports: [CommonModule, TranslateModule.forChild(), AdbPipesModule, AdbDirectivesModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbDatePickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbDatePickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, TranslateModule.forChild(), AdbPipesModule, AdbDirectivesModule],
@@ -1746,10 +1746,10 @@ class AdbModalService {
         this.domElem = componentRef.hostView.rootNodes[0];
         document.body.appendChild(this.domElem);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbModalService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.RendererFactory2 }, { token: i0.ApplicationRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbModalService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbModalService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.RendererFactory2 }, { token: i0.ApplicationRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbModalService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbModalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbModalService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }, { type: i0.RendererFactory2 }, { type: i0.ApplicationRef }, { type: i0.Injector }] });
 
@@ -1767,22 +1767,22 @@ class AdbConfirmModal {
     onClose(confirm) {
         this.modalRef.hide(confirm);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbConfirmModal, deps: [{ token: AdbModalService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: AdbConfirmModal, isStandalone: false, selector: "ng-component", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"modal fade show\" *ngIf=\"model\" role=\"dialog\"\r\n    attr.aria-labelledby=\"mod_header\"\r\n    attr.aria-describedby=\"mod_desc\">\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\" id=\"mod_header\">{{model.header|translate}}</h1>\r\n                <button type=\"button\" class=\"btn-close\" id=\"modal-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\" (click)=\"onClose(false)\"></button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <div id=\"mod_desc\">{{model.text|translate}}</div>\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=\"d-flex gap-2 justify-content-end\">\r\n                    <button *ngIf=\"model.showDecline\" type=\"button\" class=\"btn btn-secondary\" (click)=\"onClose(false)\">{{model.decline|translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-primary\" (click)=\"onClose(true)\">{{model.confirm|translate}}</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbConfirmModal, deps: [{ token: AdbModalService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AdbConfirmModal, isStandalone: false, selector: "ng-component", inputs: { model: "model" }, ngImport: i0, template: "@if (model) {\r\n  <div class=\"modal fade show\" role=\"dialog\"\r\n    attr.aria-labelledby=\"mod_header\"\r\n    attr.aria-describedby=\"mod_desc\">\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\" id=\"mod_header\">{{model.header|translate}}</h1>\r\n          <button type=\"button\" class=\"btn-close\" id=\"modal-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\" (click)=\"onClose(false)\"></button>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n          <div id=\"mod_desc\">{{model.text|translate}}</div>\r\n          @if (model.value) {\r\n            <div>\r\n              <strong>{{model.value}}</strong>\r\n            </div>\r\n          }\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n          <div class=\"d-flex gap-2 justify-content-end\">\r\n            @if (model.showDecline) {\r\n              <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onClose(false)\">{{model.decline|translate}}</button>\r\n            }\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"onClose(true)\">{{model.confirm|translate}}</button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}", dependencies: [{ kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbConfirmModal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbConfirmModal, decorators: [{
             type: Component,
-            args: [{ standalone: false, template: "<div class=\"modal fade show\" *ngIf=\"model\" role=\"dialog\"\r\n    attr.aria-labelledby=\"mod_header\"\r\n    attr.aria-describedby=\"mod_desc\">\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\" id=\"mod_header\">{{model.header|translate}}</h1>\r\n                <button type=\"button\" class=\"btn-close\" id=\"modal-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\" (click)=\"onClose(false)\"></button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <div id=\"mod_desc\">{{model.text|translate}}</div>\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=\"d-flex gap-2 justify-content-end\">\r\n                    <button *ngIf=\"model.showDecline\" type=\"button\" class=\"btn btn-secondary\" (click)=\"onClose(false)\">{{model.decline|translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-primary\" (click)=\"onClose(true)\">{{model.confirm|translate}}</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>" }]
+            args: [{ standalone: false, template: "@if (model) {\r\n  <div class=\"modal fade show\" role=\"dialog\"\r\n    attr.aria-labelledby=\"mod_header\"\r\n    attr.aria-describedby=\"mod_desc\">\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\" id=\"mod_header\">{{model.header|translate}}</h1>\r\n          <button type=\"button\" class=\"btn-close\" id=\"modal-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\" (click)=\"onClose(false)\"></button>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n          <div id=\"mod_desc\">{{model.text|translate}}</div>\r\n          @if (model.value) {\r\n            <div>\r\n              <strong>{{model.value}}</strong>\r\n            </div>\r\n          }\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n          <div class=\"d-flex gap-2 justify-content-end\">\r\n            @if (model.showDecline) {\r\n              <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onClose(false)\">{{model.decline|translate}}</button>\r\n            }\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"onClose(true)\">{{model.confirm|translate}}</button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}" }]
         }], ctorParameters: () => [{ type: AdbModalService }, { type: i0.ElementRef }], propDecorators: { model: [{
                 type: Input
             }] } });
 
 class AdbModalModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: AdbModalModule, declarations: [AdbConfirmModal], imports: [CommonModule, i1$1.TranslateModule, AdbDirectivesModule], exports: [AdbConfirmModal] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbModalModule, providers: [AdbModalService], imports: [CommonModule, TranslateModule.forChild(), AdbDirectivesModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AdbModalModule, declarations: [AdbConfirmModal], imports: [CommonModule, i1$1.TranslateModule, AdbDirectivesModule], exports: [AdbConfirmModal] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbModalModule, providers: [AdbModalService], imports: [CommonModule, TranslateModule.forChild(), AdbDirectivesModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbModalModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbModalModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, TranslateModule.forChild(), AdbDirectivesModule],
@@ -1828,10 +1828,10 @@ class AdbToastService {
             this.container.prepend(element);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbToastService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.RendererFactory2 }, { token: i0.ApplicationRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbToastService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbToastService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.RendererFactory2 }, { token: i0.ApplicationRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbToastService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbToastService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbToastService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }, { type: i0.RendererFactory2 }, { type: i0.ApplicationRef }, { type: i0.Injector }] });
 var ToastType;
@@ -1853,20 +1853,20 @@ class AdbToast {
     onRemoveToast(toast) {
         this.toastService.remove(toast);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbToast, deps: [{ token: AdbToastService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: AdbToast, isStandalone: false, 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=\"alert alert-dismissible\" role=\"alert\" *ngFor=\"let toast of toasts\"\r\n        [class.alert-primary]=\"toast.type===toastType.Primary\"\r\n        [class.alert-success]=\"toast.type===toastType.Success\"\r\n        [class.alert-warning]=\"toast.type===toastType.Warn\"\r\n        [class.alert-danger]=\"toast.type===toastType.Danger\">\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\" *ngIf=\"!toast.headerValue\">{{toast.header|translate}}</div>\r\n            <div class=\"fw-bold pb-1\" *ngIf=\"toast.headerValue\">{{(toast.header|translate:toast.headerValue )}}</div>\r\n            <button type=\"button\" class=\"btn-close\" (click)=\"onRemoveToast(toast)\" data-bs-dismiss=\"alert\" aria-label=\"Close\"></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:toast.messageValue )}}</div>\r\n            <button type=\"button\" class=\"btn-close\" (click)=\"onRemoveToast(toast)\" data-bs-dismiss=\"alert\" aria-label=\"Close\"></button>\r\n        </div>\r\n    </div>\r\n</div>", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbToast, deps: [{ token: AdbToastService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AdbToast, isStandalone: false, selector: "ng-component", ngImport: i0, template: "<div class=\"position-fixed bottom-0 end-0\" style=\"z-index: 50000;min-width: 15rem;\">\r\n  @for (toast of toasts; track toast) {\r\n    <div class=\"alert alert-dismissible\" role=\"alert\"\r\n      [class.alert-primary]=\"toast.type===toastType.Primary\"\r\n      [class.alert-success]=\"toast.type===toastType.Success\"\r\n      [class.alert-warning]=\"toast.type===toastType.Warn\"\r\n      [class.alert-danger]=\"toast.type===toastType.Danger\">\r\n      @if (toast.header) {\r\n        <div class=\"d-flex align-items-center justify-content-between pb-1\">\r\n          @if (!toast.headerValue) {\r\n            <div class=\"fw-bold pb-1\">{{toast.header|translate}}</div>\r\n          }\r\n          @if (toast.headerValue) {\r\n            <div class=\"fw-bold pb-1\">{{(toast.header|translate:toast.headerValue )}}</div>\r\n          }\r\n          <button type=\"button\" class=\"btn-close\" (click)=\"onRemoveToast(toast)\" data-bs-dismiss=\"alert\" aria-label=\"Close\"></button>\r\n        </div>\r\n      }\r\n      <div class=\"d-flex align-items-center justify-content-between mt-1\">\r\n        @if (!toast.messageValue) {\r\n          <div>{{toast.message|translate}}</div>\r\n        }\r\n        @if (toast.messageValue) {\r\n          <div>{{(toast.message|translate:toast.messageValue )}}</div>\r\n        }\r\n        <button type=\"button\" class=\"btn-close\" (click)=\"onRemoveToast(toast)\" data-bs-dismiss=\"alert\" aria-label=\"Close\"></button>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>", dependencies: [{ kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbToast, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbToast, decorators: [{
             type: Component,
-            args: [{ standalone: false, template: "<div class=\"position-fixed bottom-0 end-0\" style=\"z-index: 50000;min-width: 15rem;\">\r\n    <div class=\"alert alert-dismissible\" role=\"alert\" *ngFor=\"let toast of toasts\"\r\n        [class.alert-primary]=\"toast.type===toastType.Primary\"\r\n        [class.alert-success]=\"toast.type===toastType.Success\"\r\n        [class.alert-warning]=\"toast.type===toastType.Warn\"\r\n        [class.alert-danger]=\"toast.type===toastType.Danger\">\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\" *ngIf=\"!toast.headerValue\">{{toast.header|translate}}</div>\r\n            <div class=\"fw-bold pb-1\" *ngIf=\"toast.headerValue\">{{(toast.header|translate:toast.headerValue )}}</div>\r\n            <button type=\"button\" class=\"btn-close\" (click)=\"onRemoveToast(toast)\" data-bs-dismiss=\"alert\" aria-label=\"Close\"></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:toast.messageValue )}}</div>\r\n            <button type=\"button\" class=\"btn-close\" (click)=\"onRemoveToast(toast)\" data-bs-dismiss=\"alert\" aria-label=\"Close\"></button>\r\n        </div>\r\n    </div>\r\n</div>" }]
+            args: [{ standalone: false, template: "<div class=\"position-fixed bottom-0 end-0\" style=\"z-index: 50000;min-width: 15rem;\">\r\n  @for (toast of toasts; track toast) {\r\n    <div class=\"alert alert-dismissible\" role=\"alert\"\r\n      [class.alert-primary]=\"toast.type===toastType.Primary\"\r\n      [class.alert-success]=\"toast.type===toastType.Success\"\r\n      [class.alert-warning]=\"toast.type===toastType.Warn\"\r\n      [class.alert-danger]=\"toast.type===toastType.Danger\">\r\n      @if (toast.header) {\r\n        <div class=\"d-flex align-items-center justify-content-between pb-1\">\r\n          @if (!toast.headerValue) {\r\n            <div class=\"fw-bold pb-1\">{{toast.header|translate}}</div>\r\n          }\r\n          @if (toast.headerValue) {\r\n            <div class=\"fw-bold pb-1\">{{(toast.header|translate:toast.headerValue )}}</div>\r\n          }\r\n          <button type=\"button\" class=\"btn-close\" (click)=\"onRemoveToast(toast)\" data-bs-dismiss=\"alert\" aria-label=\"Close\"></button>\r\n        </div>\r\n      }\r\n      <div class=\"d-flex align-items-center justify-content-between mt-1\">\r\n        @if (!toast.messageValue) {\r\n          <div>{{toast.message|translate}}</div>\r\n        }\r\n        @if (toast.messageValue) {\r\n          <div>{{(toast.message|translate:toast.messageValue )}}</div>\r\n        }\r\n        <button type=\"button\" class=\"btn-close\" (click)=\"onRemoveToast(toast)\" data-bs-dismiss=\"alert\" aria-label=\"Close\"></button>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>" }]
         }], ctorParameters: () => [{ type: AdbToastService }] });
 
 class AdbToastModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: AdbToastModule, declarations: [AdbToast], imports: [CommonModule, i1$1.TranslateModule, AdbDirectivesModule], exports: [AdbToast] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbToastModule, providers: [AdbToastService], imports: [CommonModule, TranslateModule.forChild(), AdbDirectivesModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AdbToastModule, declarations: [AdbToast], imports: [CommonModule, i1$1.TranslateModule, AdbDirectivesModule], exports: [AdbToast] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbToastModule, providers: [AdbToastService], imports: [CommonModule, TranslateModule.forChild(), AdbDirectivesModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbToastModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbToastModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, TranslateModule.forChild(), AdbDirectivesModule],
@@ -1907,12 +1907,12 @@ class AdbHelpButtonComponent {
         }
         this.showHelp = !this.showHelp;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbHelpButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: AdbHelpButtonComponent, isStandalone: false, selector: "adb-help-button", inputs: { buttonClass: "buttonClass", iconClass: "iconClass", label: "label" }, host: { listeners: { "document:click": "onClickDoc($event)" } }, ngImport: i0, template: "<button type=\"button\"\r\n    class=\"w-auto d-flex gap-1 align-items-baseline help-button\" \r\n    [ngClass]=\"buttonClass\"\r\n    [attr.aria-controls]=\"id\" aria-label=\"Help\" \r\n    [attr.aria-expanded]=\"showHelp\" (click)=\"onClose()\">\r\n    <span [ngClass]=\"iconClass\"></span>\r\n    {{label}}\r\n</button>\r\n<div>\r\n    <div *ngIf=\"showHelp\" [id]=\"id\" class=\"position-absolute start-0 w-100 adb-plate-primary text-start shadow\" style=\"z-index:4\">\r\n        <div class=\"d-flex align-items-center\">\r\n            <div class=\"flex-grow-1\"><ng-content></ng-content></div>\r\n            <div class=\"ms-auto align-self-start d-flex align-items-start\">\r\n                <button type=\"button\" class=\"btn-close p-1\" data-bs-dismiss=\"modal\" aria-label=\"Close\" (click)=\"showHelp=false\"></button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbHelpButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AdbHelpButtonComponent, isStandalone: false, selector: "adb-help-button", inputs: { buttonClass: "buttonClass", iconClass: "iconClass", label: "label" }, host: { listeners: { "document:click": "onClickDoc($event)" } }, ngImport: i0, template: "<button type=\"button\"\r\n  class=\"w-auto d-flex gap-1 align-items-baseline help-button\"\r\n  [ngClass]=\"buttonClass\"\r\n  [attr.aria-controls]=\"id\" aria-label=\"Help\"\r\n  [attr.aria-expanded]=\"showHelp\" (click)=\"onClose()\">\r\n  <span [ngClass]=\"iconClass\"></span>\r\n  {{label}}\r\n</button>\r\n<div>\r\n  @if (showHelp) {\r\n    <div [id]=\"id\" class=\"position-absolute start-0 w-100 adb-plate-primary text-start shadow\" style=\"z-index:4\">\r\n      <div class=\"d-flex align-items-center\">\r\n        <div class=\"flex-grow-1\"><ng-content></ng-content></div>\r\n        <div class=\"ms-auto align-self-start d-flex align-items-start\">\r\n          <button type=\"button\" class=\"btn-close p-1\" data-bs-dismiss=\"modal\" aria-label=\"Close\" (click)=\"showHelp=false\"></button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbHelpButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbHelpButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'adb-help-button', standalone: false, template: "<button type=\"button\"\r\n    class=\"w-auto d-flex gap-1 align-items-baseline help-button\" \r\n    [ngClass]=\"buttonClass\"\r\n    [attr.aria-controls]=\"id\" aria-label=\"Help\" \r\n    [attr.aria-expanded]=\"showHelp\" (click)=\"onClose()\">\r\n    <span [ngClass]=\"iconClass\"></span>\r\n    {{label}}\r\n</button>\r\n<div>\r\n    <div *ngIf=\"showHelp\" [id]=\"id\" class=\"position-absolute start-0 w-100 adb-plate-primary text-start shadow\" style=\"z-index:4\">\r\n        <div class=\"d-flex align-items-center\">\r\n            <div class=\"flex-grow-1\"><ng-content></ng-content></div>\r\n            <div class=\"ms-auto align-self-start d-flex align-items-start\">\r\n                <button type=\"button\" class=\"btn-close p-1\" data-bs-dismiss=\"modal\" aria-label=\"Close\" (click)=\"showHelp=false\"></button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>" }]
+            args: [{ selector: 'adb-help-button', standalone: false, template: "<button type=\"button\"\r\n  class=\"w-auto d-flex gap-1 align-items-baseline help-button\"\r\n  [ngClass]=\"buttonClass\"\r\n  [attr.aria-controls]=\"id\" aria-label=\"Help\"\r\n  [attr.aria-expanded]=\"showHelp\" (click)=\"onClose()\">\r\n  <span [ngClass]=\"iconClass\"></span>\r\n  {{label}}\r\n</button>\r\n<div>\r\n  @if (showHelp) {\r\n    <div [id]=\"id\" class=\"position-absolute start-0 w-100 adb-plate-primary text-start shadow\" style=\"z-index:4\">\r\n      <div class=\"d-flex align-items-center\">\r\n        <div class=\"flex-grow-1\"><ng-content></ng-content></div>\r\n        <div class=\"ms-auto align-self-start d-flex align-items-start\">\r\n          <button type=\"button\" class=\"btn-close p-1\" data-bs-dismiss=\"modal\" aria-label=\"Close\" (click)=\"showHelp=false\"></button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { buttonClass: [{
                 type: Input
             }], iconClass: [{
@@ -1925,11 +1925,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
             }] } });
 
 class AdbButtonsModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbButtonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: AdbButtonsModule, declarations: [AdbHelpButtonComponent], imports: [CommonModule, AdbDirectivesModule], exports: [AdbHelpButtonComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbButtonsModule, imports: [CommonModule, AdbDirectivesModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbButtonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AdbButtonsModule, declarations: [AdbHelpButtonComponent], imports: [CommonModule, AdbDirectivesModule], exports: [AdbHelpButtonComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbButtonsModule, imports: [CommonModule, AdbDirectivesModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbButtonsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbButtonsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, AdbDirectivesModule],
@@ -2025,18 +2025,18 @@ class AdbRichEditorComponent {
     }
     ngOnDestroy() {
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbRichEditorComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: AdbRichEditorComponent, isStandalone: false, selector: "adb-rich-editor", inputs: { hasTaxon: "hasTaxon", hasReference: "hasReference", rows: "rows" }, providers: [{
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbRichEditorComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AdbRichEditorComponent, isStandalone: false, selector: "adb-rich-editor", inputs: { hasTaxon: "hasTaxon", hasReference: "hasReference", rows: "rows" }, providers: [{
                 provide: NG_VALUE_ACCESSOR, useExisting: forwardRef((() => AdbRichEditorComponent)),
                 multi: true
-            }], ngImport: i0, template: "<div>\r\n    <div class=\"d-flex justify-content-end gap-3 mb-1\">\r\n        <button class=\"btn btn-secondary\" (click)=\"onItalicClick()\" title=\"Italic\" aria-label=\"Italic\" type=\"button\"><span class=\"fas fa-italic\"></span></button>\r\n        <button class=\"btn btn-secondary\" (click)=\"onBoldClick()\" title=\"Italic\" aria-label=\"strong\" type=\"button\"><span class=\"fas fa-bold\"></span></button>\r\n        <button *ngIf=\"hasTaxon\" class=\"btn btn-secondary\" (click)=\"onTaxonClick()\" title=\"Taxon\" aria-label=\"Taxon\" type=\"button\"><span class=\"fas fa-bug\"></span></button>\r\n        <button *ngIf=\"hasReference\" class=\"btn btn-secondary\" (click)=\"onReferenceClick()\" title=\"Reference\" aria-label=\"Reference\" type=\"button\"><span class=\"fas fa-asterisk\"></span></button>\r\n    </div>\r\n    <textarea class=\"form-control\" [(ngModel)]=\"text\" (ngModelChange)=\"onTextChange()\" [rows]=\"rows\" (dblclick)=\"onDoubleClick()\"></textarea>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+            }], ngImport: i0, template: "<div>\r\n  <div class=\"d-flex justify-content-end gap-3 mb-1\">\r\n    <button class=\"btn btn-secondary\" (click)=\"onItalicClick()\" title=\"Italic\" aria-label=\"Italic\" type=\"button\"><span class=\"fas fa-italic\"></span></button>\r\n    <button class=\"btn btn-secondary\" (click)=\"onBoldClick()\" title=\"Italic\" aria-label=\"strong\" type=\"button\"><span class=\"fas fa-bold\"></span></button>\r\n    @if (hasTaxon) {\r\n      <button class=\"btn btn-secondary\" (click)=\"onTaxonClick()\" title=\"Taxon\" aria-label=\"Taxon\" type=\"button\"><span class=\"fas fa-bug\"></span></button>\r\n    }\r\n    @if (hasReference) {\r\n      <button class=\"btn btn-secondary\" (click)=\"onReferenceClick()\" title=\"Reference\" aria-label=\"Reference\" type=\"button\"><span class=\"fas fa-asterisk\"></span></button>\r\n    }\r\n  </div>\r\n  <textarea class=\"form-control\" [(ngModel)]=\"text\" (ngModelChange)=\"onTextChange()\" [rows]=\"rows\" (dblclick)=\"onDoubleClick()\"></textarea>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbRichEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbRichEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'adb-rich-editor', providers: [{
                             provide: NG_VALUE_ACCESSOR, useExisting: forwardRef((() => AdbRichEditorComponent)),
                             multi: true
-                        }], standalone: false, template: "<div>\r\n    <div class=\"d-flex justify-content-end gap-3 mb-1\">\r\n        <button class=\"btn btn-secondary\" (click)=\"onItalicClick()\" title=\"Italic\" aria-label=\"Italic\" type=\"button\"><span class=\"fas fa-italic\"></span></button>\r\n        <button class=\"btn btn-secondary\" (click)=\"onBoldClick()\" title=\"Italic\" aria-label=\"strong\" type=\"button\"><span class=\"fas fa-bold\"></span></button>\r\n        <button *ngIf=\"hasTaxon\" class=\"btn btn-secondary\" (click)=\"onTaxonClick()\" title=\"Taxon\" aria-label=\"Taxon\" type=\"button\"><span class=\"fas fa-bug\"></span></button>\r\n        <button *ngIf=\"hasReference\" class=\"btn btn-secondary\" (click)=\"onReferenceClick()\" title=\"Reference\" aria-label=\"Reference\" type=\"button\"><span class=\"fas fa-asterisk\"></span></button>\r\n    </div>\r\n    <textarea class=\"form-control\" [(ngModel)]=\"text\" (ngModelChange)=\"onTextChange()\" [rows]=\"rows\" (dblclick)=\"onDoubleClick()\"></textarea>\r\n</div>\r\n" }]
+                        }], standalone: false, template: "<div>\r\n  <div class=\"d-flex justify-content-end gap-3 mb-1\">\r\n    <button class=\"btn btn-secondary\" (click)=\"onItalicClick()\" title=\"Italic\" aria-label=\"Italic\" type=\"button\"><span class=\"fas fa-italic\"></span></button>\r\n    <button class=\"btn btn-secondary\" (click)=\"onBoldClick()\" title=\"Italic\" aria-label=\"strong\" type=\"button\"><span class=\"fas fa-bold\"></span></button>\r\n    @if (hasTaxon) {\r\n      <button class=\"btn btn-secondary\" (click)=\"onTaxonClick()\" title=\"Taxon\" aria-label=\"Taxon\" type=\"button\"><span class=\"fas fa-bug\"></span></button>\r\n    }\r\n    @if (hasReference) {\r\n      <button class=\"btn btn-secondary\" (click)=\"onReferenceClick()\" title=\"Reference\" aria-label=\"Reference\" type=\"button\"><span class=\"fas fa-asterisk\"></span></button>\r\n    }\r\n  </div>\r\n  <textarea class=\"form-control\" [(ngModel)]=\"text\" (ngModelChange)=\"onTextChange()\" [rows]=\"rows\" (dblclick)=\"onDoubleClick()\"></textarea>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { hasTaxon: [{
                 type: Input
             }], hasReference: [{
@@ -2095,12 +2095,12 @@ class RichTextComponent {
         }
         return parts;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: RichTextComponent, deps: [{ token: RICH_MODULE_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: RichTextComponent, isStandalone: false, selector: "adb-rich-text", inputs: { text: "text" }, usesOnChanges: true, ngImport: i0, template: "<div style=\"white-space: pre-wrap;\">\r\n    <ng-container *ngFor=\"let part of parts\">\r\n      <span *ngIf=\"part.type === 'text'\">{{ part.content }}</span>\r\n      <em *ngIf=\"part.type === 'italic'\">{{ part.content }}</em>\r\n      <b *ngIf=\"part.type === 'bold'\">{{ part.content }}</b>\r\n      <a *ngIf=\"part.type === 'taxon'\" [href]=\"taxonUrl + part.id\">{{ part.content }}</a>\r\n      <span *ngIf=\"part.type === 'term'\">{{ part.content }}</span>\r\n      <span *ngIf=\"part.type === 'reference'\">{{ part.content }}</span>\r\n    </ng-container>\r\n  </div>\r\n  ", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RichTextComponent, deps: [{ token: RICH_MODULE_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: RichTextComponent, isStandalone: false, selector: "adb-rich-text", inputs: { text: "text" }, usesOnChanges: true, ngImport: i0, template: "<div style=\"white-space: pre-wrap;\">\r\n  @for (part of parts; track part) {\r\n    @if (part.type === 'text') {\r\n      <span>{{ part.content }}</span>\r\n    }\r\n    @if (part.type === 'italic') {\r\n      <em>{{ part.content }}</em>\r\n    }\r\n    @if (part.type === 'bold') {\r\n      <b>{{ part.content }}</b>\r\n    }\r\n    @if (part.type === 'taxon') {\r\n      <a [href]=\"taxonUrl + part.id\">{{ part.content }}</a>\r\n    }\r\n    @if (part.type === 'term') {\r\n      <span>{{ part.content }}</span>\r\n    }\r\n    @if (part.type === 'reference') {\r\n      <span>{{ part.content }}</span>\r\n    }\r\n  }\r\n</div>\r\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: RichTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RichTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'adb-rich-text', standalone: false, template: "<div style=\"white-space: pre-wrap;\">\r\n    <ng-container *ngFor=\"let part of parts\">\r\n      <span *ngIf=\"part.type === 'text'\">{{ part.content }}</span>\r\n      <em *ngIf=\"part.type === 'italic'\">{{ part.content }}</em>\r\n      <b *ngIf=\"part.type === 'bold'\">{{ part.content }}</b>\r\n      <a *ngIf=\"part.type === 'taxon'\" [href]=\"taxonUrl + part.id\">{{ part.content }}</a>\r\n      <span *ngIf=\"part.type === 'term'\">{{ part.content }}</span>\r\n      <span *ngIf=\"part.type === 'reference'\">{{ part.content }}</span>\r\n    </ng-container>\r\n  </div>\r\n  " }]
+            args: [{ selector: 'adb-rich-text', standalone: false, template: "<div style=\"white-space: pre-wrap;\">\r\n  @for (part of parts; track part) {\r\n    @if (part.type === 'text') {\r\n      <span>{{ part.content }}</span>\r\n    }\r\n    @if (part.type === 'italic') {\r\n      <em>{{ part.content }}</em>\r\n    }\r\n    @if (part.type === 'bold') {\r\n      <b>{{ part.content }}</b>\r\n    }\r\n    @if (part.type === 'taxon') {\r\n      <a [href]=\"taxonUrl + part.id\">{{ part.content }}</a>\r\n    }\r\n    @if (part.type === 'term') {\r\n      <span>{{ part.content }}</span>\r\n    }\r\n    @if (part.type === 'reference') {\r\n      <span>{{ part.content }}</span>\r\n    }\r\n  }\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [RICH_MODULE_CONFIG]
@@ -2117,11 +2117,11 @@ class AdbRichEditorModule {
             ]
         };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbRichEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: AdbRichEditorModule, declarations: [AdbRichEditorComponent, RichTextComponent], imports: [CommonModule, FormsModule], exports: [AdbRichEditorComponent, RichTextComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbRichEditorModule, imports: [CommonModule, FormsModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbRichEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AdbRichEditorModule, declarations: [AdbRichEditorComponent, RichTextComponent], imports: [CommonModule, FormsModule], exports: [AdbRichEditorComponent, RichTextComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbRichEditorModule, imports: [CommonModule, FormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbRichEditorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbRichEditorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, FormsModule],
@@ -2140,12 +2140,12 @@ class FilterSectionComponent {
     }
     ngOnDestroy() {
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FilterSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: FilterSectionComponent, isStandalone: false, selector: "adb-filter-section", inputs: { titleResource: "titleResource", helpResource: "helpResource", count: "count", expanded: "expanded" }, ngImport: i0, template: "<button [attr.aria-expanded]=\"expanded\" [attr.aria-controls]=\"id\"\r\n    class=\"btn btn-invisible px-1 bg-white\" type=\"button\" (click)=\"expanded = !expanded\">\r\n    <div class=\"d-flex align-items-center gap-1 flex-wrap \">\r\n        <div class=\"d-flex align-items-center\">\r\n            <i class=\"fas fa-fw\" [ngClass]=\"expanded?'fa-chevron-down':'fa-chevron-right'\"></i>\r\n            {{titleResource|translate}}\r\n        </div>\r\n        <adb-help-button *ngIf=\"helpResource\" (click)=\"$event.stopPropagation()\">{{helpResource|translate}}</adb-help-button>\r\n        <div class=\"ms-auto badge bg-dark\" *ngIf=\"count > 0\">{{count}}</div>\r\n    </div>\r\n</button>\r\n<div class=\"px-3 pb-3 border-bottom\" [id]=\"id\" [class.d-none]=\"!expanded\">\r\n    <ng-content></ng-content>\r\n</div>", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AdbHelpButtonComponent, selector: "adb-help-button", inputs: ["buttonClass", "iconClass", "label"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FilterSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FilterSectionComponent, isStandalone: false, selector: "adb-filter-section", inputs: { titleResource: "titleResource", helpResource: "helpResource", count: "count", expanded: "expanded" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<button [attr.aria-expanded]=\"expanded\" [attr.aria-controls]=\"id\" class=\"btn btn-invisible px-1 bg-white\" type=\"button\" (click)=\"expanded = !expanded\">\r\n    <div class=\"d-flex align-items-center gap-1 flex-wrap \">\r\n        <div class=\"d-flex align-items-center\">\r\n            <i class=\"fas fa-fw\" [ngClass]=\"expanded?'fa-chevron-down':'fa-chevron-right'\"></i>\r\n            {{titleResource|translate}}\r\n        </div>\r\n        @if(helpResource){\r\n        <adb-help-button (click)=\"$event.stopPropagation()\">{{helpResource|translate}}</adb-help-button>\r\n        }\r\n        @if(count > 0){\r\n        <div class=\"ms-auto badge bg-dark\">{{count}}</div>\r\n        }\r\n    </div>\r\n</button>\r\n@if (expanded) {\r\n@if (template) {\r\n<ng-container *ngTemplateOutlet=\"template\"></ng-container>\r\n} @else {\r\n<ng-content></ng-content>\r\n}\r\n}", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdbHelpButtonComponent, selector: "adb-help-button", inputs: ["buttonClass", "iconClass", "label"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FilterSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FilterSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'adb-filter-section', standalone: false, template: "<button [attr.aria-expanded]=\"expanded\" [attr.aria-controls]=\"id\"\r\n    class=\"btn btn-invisible px-1 bg-white\" type=\"button\" (click)=\"expanded = !expanded\">\r\n    <div class=\"d-flex align-items-center gap-1 flex-wrap \">\r\n        <div class=\"d-flex align-items-center\">\r\n            <i class=\"fas fa-fw\" [ngClass]=\"expanded?'fa-chevron-down':'fa-chevron-right'\"></i>\r\n            {{titleResource|translate}}\r\n        </div>\r\n        <adb-help-button *ngIf=\"helpResource\" (click)=\"$event.stopPropagation()\">{{helpResource|translate}}</adb-help-button>\r\n        <div class=\"ms-auto badge bg-dark\" *ngIf=\"count > 0\">{{count}}</div>\r\n    </div>\r\n</button>\r\n<div class=\"px-3 pb-3 border-bottom\" [id]=\"id\" [class.d-none]=\"!expanded\">\r\n    <ng-content></ng-content>\r\n</div>" }]
+            args: [{ selector: 'adb-filter-section', standalone: false, template: "<button [attr.aria-expanded]=\"expanded\" [attr.aria-controls]=\"id\" class=\"btn btn-invisible px-1 bg-white\" type=\"button\" (click)=\"expanded = !expanded\">\r\n    <div class=\"d-flex align-items-center gap-1 flex-wrap \">\r\n        <div class=\"d-flex align-items-center\">\r\n            <i class=\"fas fa-fw\" [ngClass]=\"expanded?'fa-chevron-down':'fa-chevron-right'\"></i>\r\n            {{titleResource|translate}}\r\n        </div>\r\n        @if(helpResource){\r\n        <adb-help-button (click)=\"$event.stopPropagation()\">{{helpResource|translate}}</adb-help-button>\r\n        }\r\n        @if(count > 0){\r\n        <div class=\"ms-auto badge bg-dark\">{{count}}</div>\r\n        }\r\n    </div>\r\n</button>\r\n@if (expanded) {\r\n@if (template) {\r\n<ng-container *ngTemplateOutlet=\"template\"></ng-container>\r\n} @else {\r\n<ng-content></ng-content>\r\n}\r\n}" }]
         }], propDecorators: { titleResource: [{
                 type: Input
             }], helpResource: [{
@@ -2154,14 +2154,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                 type: Input
             }], expanded: [{
                 type: Input
+            }], template: [{
+                type: ContentChild,
+                args: [TemplateRef]
             }] } });
 
 class AdbFilterSectionModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbFilterSectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: AdbFilterSectionModule, declarations: [FilterSectionComponent], imports: [CommonModule, FormsModule, TranslateModule, AdbButtonsModule], exports: [FilterSectionComponent, AdbButtonsModule] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbFilterSectionModule, imports: [CommonModule, FormsModule, TranslateModule, AdbButtonsModule, AdbButtonsModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbFilterSectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AdbFilterSectionModule, declarations: [FilterSectionComponent], imports: [CommonModule, FormsModule, TranslateModule, AdbButtonsModule], exports: [FilterSectionComponent, AdbButtonsModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbFilterSectionModule, imports: [CommonModule, FormsModule, TranslateModule, AdbButtonsModule, AdbButtonsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbFilterSectionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbFilterSectionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, FormsModule, TranslateModule, AdbButtonsModule],
@@ -2384,10 +2387,10 @@ class AdbUserService {
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbUserService, deps: [{ token: ADB_USER_SERVICE_CONFIG }, { token: i1$2.HttpClient }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbUserService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbUserService, deps: [{ token: ADB_USER_SERVICE_CONFIG }, { token: i1$2.HttpClient }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbUserService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbUserService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbUserService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -2433,10 +2436,10 @@ class AuthCallbackComponent {
             }
         }));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AuthCallbackComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i1$2.HttpClient }, { token: AdbUserService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: AuthCallbackComponent, isStandalone: false, selector: "ng-component", ngImport: i0, template: '<div class="loading-dead-spinner"></div>', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AuthCallbackComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i1$2.HttpClient }, { token: AdbUserService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AuthCallbackComponent, isStandalone: false, selector: "ng-component", ngImport: i0, template: '<div class="loading-dead-spinner"></div>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AuthCallbackComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AuthCallbackComponent, decorators: [{
             type: Component,
             args: [{
                     template: '<div class="loading-dead-spinner"></div>',
@@ -2478,10 +2481,10 @@ class AdbUserInterceptor {
         }
         return throwError(() => error);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbUserInterceptor, deps: [{ token: AdbUserService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbUserInterceptor }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbUserInterceptor, deps: [{ token: AdbUserService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbUserInterceptor }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbUserInterceptor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbUserInterceptor, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: AdbUserService }] });
 
@@ -2504,9 +2507,9 @@ class AdbUserModule {
             ],
         };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbUserModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: AdbUserModule, declarations: [AuthCallbackComponent], imports: [CommonModule, i1.RouterModule, i1$1.TranslateModule], exports: [AuthCallbackComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbUserModule, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbUserModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AdbUserModule, declarations: [AuthCallbackComponent], imports: [CommonModule, i1.RouterModule, i1$1.TranslateModule], exports: [AuthCallbackComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbUserModule, providers: [
             AdbUserService,
             {
                 provide: HTTP_INTERCEPTORS,
@@ -2515,7 +2518,7 @@ class AdbUserModule {
             }
         ], imports: [CommonModule, RouterModule.forChild(routes), TranslateModule.forChild()] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AdbUserModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdbUserModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, RouterModule.forChild(routes), TranslateModule.forChild()],