adb-shared 6.0.1 → 6.0.3

package/fesm2022/adb-shared.mjs

@@ -5,1683 +5,1911 @@ import { Injectable, Inject, EventEmitter, Directive, Output, HostListener, Inpu
 import * as i1$1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i1 from '@angular/common/http';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import * as i2 from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
 import { Subscription, Subject, of } from 'rxjs';
+import * as i1$2 from '@angular/platform-browser';
 import { startOfDay, subYears, endOfDay, addYears, getMonth, subMonths, addMonths, isSameYear, startOfMonth, endOfMonth, eachWeekOfInterval, getISOWeek, addDays, eachDayOfInterval, getHours, getMinutes, isSameDay, isSameMonth, isWithinInterval, isValid, parseISO } from 'date-fns';
-import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import * as i2$2 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
 import { delay } from 'rxjs/operators';
 
-let EnvironmentService$1 = class EnvironmentService {
-    constructor(environment) {
-        this.environment = environment;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EnvironmentService, deps: [{ token: 'env' }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EnvironmentService }); }
-};
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EnvironmentService$1, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: ['env']
-                }] }]; } });
+let EnvironmentService$1 = class EnvironmentService {
+    constructor(environment) {
+        this.environment = environment;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EnvironmentService, deps: [{ token: 'env' }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EnvironmentService }); }
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EnvironmentService$1, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['env']
+                }] }] });
 
-class ClickOutsideDirective {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        this.adbClickOutside = new EventEmitter();
-    }
-    onClick(target) {
-        const clickedInside = this.elementRef.nativeElement.contains(target);
-        if (!clickedInside) {
-            this.adbClickOutside.emit(target);
-        }
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ClickOutsideDirective, selector: "[adbClickOutside]", outputs: { adbClickOutside: "adbClickOutside" }, host: { listeners: { "document:click": "onClick($event.target)" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ClickOutsideDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[adbClickOutside]',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { adbClickOutside: [{
-                type: Output
-            }], onClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event.target']]
+class ClickOutsideDirective {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.adbClickOutside = new EventEmitter();
+    }
+    onClick(target) {
+        const clickedInside = this.elementRef.nativeElement.contains(target);
+        if (!clickedInside) {
+            this.adbClickOutside.emit(target);
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: ClickOutsideDirective, selector: "[adbClickOutside]", outputs: { adbClickOutside: "adbClickOutside" }, host: { listeners: { "document:click": "onClick($event.target)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[adbClickOutside]',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { adbClickOutside: [{
+                type: Output
+            }], onClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event.target']]
             }] } });
 
-class FileUploadDirective {
-    constructor(el) {
-        this.el = el;
-        this.upload = new EventEmitter();
-        this.click = new EventEmitter();
-    }
-    onBeginUpload(target) {
-        if (target) {
-            if (target.files && target.files[0]) {
-                this.upload.emit(target.files[0]);
-            }
-        }
-    }
-    onClick(target) {
-        this.el.nativeElement.value = '';
-        if (target) {
-            this.click.emit(target);
-        }
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileUploadDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FileUploadDirective, 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: "16.2.12", ngImport: i0, type: FileUploadDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'input[adbFileUpload]',
-                    host: {
-                        '(change)': 'onBeginUpload($event.target)',
-                        '(click)': 'onClick($event.target)'
-                    },
-                    outputs: ['upload']
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+class FileUploadDirective {
+    constructor(el) {
+        this.el = el;
+        this.upload = new EventEmitter();
+        this.click = new EventEmitter();
+    }
+    onBeginUpload(target) {
+        if (target) {
+            if (target.files && target.files[0]) {
+                this.upload.emit(target.files[0]);
+            }
+        }
+    }
+    onClick(target) {
+        this.el.nativeElement.value = '';
+        if (target) {
+            this.click.emit(target);
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FileUploadDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: FileUploadDirective, 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: "18.2.8", ngImport: i0, type: FileUploadDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[adbFileUpload]',
+                    host: {
+                        '(change)': 'onBeginUpload($event.target)',
+                        '(click)': 'onClick($event.target)'
+                    },
+                    outputs: ['upload']
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
 
-/* eslint-disable @angular-eslint/directive-selector */
-class FocusDirective {
-    set adbFocus(value) {
-        this.focused = value;
-        if (this.focused) {
-            this.element.nativeElement.focus();
-        }
-        else {
-            this.element.nativeElement.blur();
-        }
-    }
-    constructor(element) {
-        this.element = element;
-    }
-    ngAfterViewInit() {
-        // ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.
-        if (this.focused) {
-            setTimeout(() => this.element.nativeElement.focus(), 0);
-        }
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FocusDirective, selector: "[adbFocus]", inputs: { adbFocus: "adbFocus" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FocusDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[adbFocus]',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { adbFocus: [{
-                type: Input
+/* eslint-disable @angular-eslint/directive-selector */
+class FocusDirective {
+    set adbFocus(value) {
+        this.focused = value;
+        if (this.focused) {
+            this.element.nativeElement.focus();
+        }
+        else {
+            this.element.nativeElement.blur();
+        }
+    }
+    constructor(element) {
+        this.element = element;
+    }
+    ngAfterViewInit() {
+        // ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.
+        if (this.focused) {
+            setTimeout(() => this.element.nativeElement.focus(), 0);
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: FocusDirective, selector: "[adbFocus]", inputs: { adbFocus: "adbFocus" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FocusDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[adbFocus]',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { adbFocus: [{
+                type: Input
             }] } });
 
-class RedListBadgeClassDirective {
-    get hostClasses() {
-        this.redlistId = this.redlistId ? this.redlistId.replace('°', '') : '';
-        if (this.redlistId === 'EX' || this.redlistId === 'RE') {
-            return 'bg-redlist-re';
-        }
-        else if (this.redlistId === 'DD' || this.redlistId === 'NE' || this.redlistId === 'NA') {
-            return 'bg-redlist-dd';
-        }
-        else if (this.redlistId === 'CR') {
-            return 'bg-redlist-cr';
-        }
-        else if (this.redlistId === 'EN') {
-            return 'bg-redlist-en';
-        }
-        else if (this.redlistId === 'VU') {
-            return 'bg-redlist-vu';
-        }
-        else if (this.redlistId === 'NT') {
-            return 'bg-redlist-nt';
-        }
-        else if (this.redlistId === 'NONE') {
-            return '';
-        }
-        return 'bg-redlist-lc';
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RedListBadgeClassDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RedListBadgeClassDirective, selector: "[adbRedListBadgeClass]", inputs: { redlistId: ["adbRedListBadgeClass", "redlistId"] }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RedListBadgeClassDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[adbRedListBadgeClass]'
-                }]
-        }], propDecorators: { redlistId: [{
-                type: Input,
-                args: ['adbRedListBadgeClass']
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
+class RedListBadgeClassDirective {
+    get hostClasses() {
+        this.redlistId = this.redlistId ? this.redlistId.replace('°', '') : '';
+        if (this.redlistId === 'EX' || this.redlistId === 'RE') {
+            return 'bg-redlist-re';
+        }
+        else if (this.redlistId === 'DD' || this.redlistId === 'NE' || this.redlistId === 'NA') {
+            return 'bg-redlist-dd';
+        }
+        else if (this.redlistId === 'CR') {
+            return 'bg-redlist-cr';
+        }
+        else if (this.redlistId === 'EN') {
+            return 'bg-redlist-en';
+        }
+        else if (this.redlistId === 'VU') {
+            return 'bg-redlist-vu';
+        }
+        else if (this.redlistId === 'NT') {
+            return 'bg-redlist-nt';
+        }
+        else if (this.redlistId === 'NONE') {
+            return '';
+        }
+        return 'bg-redlist-lc';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RedListBadgeClassDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: RedListBadgeClassDirective, selector: "[adbRedListBadgeClass]", inputs: { redlistId: ["adbRedListBadgeClass", "redlistId"] }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RedListBadgeClassDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[adbRedListBadgeClass]'
+                }]
+        }], propDecorators: { redlistId: [{
+                type: Input,
+                args: ['adbRedListBadgeClass']
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
-class RiskClassDirective {
-    get hostClasses() {
-        if (this.category === 'NK') {
-            return 'bg-risk-class-nk text-dark border';
-        }
-        else if (this.category === 'LO') {
-            return 'bg-risk-class-lo border';
-        }
-        else if (this.category === 'PH') {
-            return 'bg-risk-class-ph border';
-        }
-        else if (this.category === 'HI') {
-            return 'bg-risk-class-hi border';
-        }
-        else if (this.category === 'SE') {
-            return 'bg-risk-class-se border';
-        }
-        return 'text-dark';
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RiskClassDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RiskClassDirective, selector: "[adbRiskClass]", inputs: { category: ["adbRiskClass", "category"] }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RiskClassDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[adbRiskClass]'
-                }]
-        }], propDecorators: { category: [{
-                type: Input,
-                args: ['adbRiskClass']
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
+class RiskClassDirective {
+    get hostClasses() {
+        if (this.category === 'NK') {
+            return 'bg-risk-class-nk text-dark border';
+        }
+        else if (this.category === 'LO') {
+            return 'bg-risk-class-lo border';
+        }
+        else if (this.category === 'PH') {
+            return 'bg-risk-class-ph border';
+        }
+        else if (this.category === 'HI') {
+            return 'bg-risk-class-hi border';
+        }
+        else if (this.category === 'SE') {
+            return 'bg-risk-class-se border';
+        }
+        return 'text-dark';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RiskClassDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: RiskClassDirective, selector: "[adbRiskClass]", inputs: { category: ["adbRiskClass", "category"] }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RiskClassDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[adbRiskClass]'
+                }]
+        }], propDecorators: { category: [{
+                type: Input,
+                args: ['adbRiskClass']
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
-class AdbDirectivesModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbDirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: AdbDirectivesModule, declarations: [ClickOutsideDirective, FocusDirective, FileUploadDirective, RedListBadgeClassDirective, RiskClassDirective], exports: [ClickOutsideDirective, FocusDirective, FileUploadDirective, RedListBadgeClassDirective, RiskClassDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbDirectivesModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbDirectivesModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [],
-                    declarations: [ClickOutsideDirective, FocusDirective, FileUploadDirective, RedListBadgeClassDirective, RiskClassDirective],
-                    exports: [ClickOutsideDirective, FocusDirective, FileUploadDirective, RedListBadgeClassDirective, RiskClassDirective]
-                }]
+class AdbDirectivesModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbDirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: AdbDirectivesModule, declarations: [ClickOutsideDirective, FocusDirective, FileUploadDirective, RedListBadgeClassDirective, RiskClassDirective], exports: [ClickOutsideDirective, FocusDirective, FileUploadDirective, RedListBadgeClassDirective, RiskClassDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbDirectivesModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbDirectivesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    declarations: [ClickOutsideDirective, FocusDirective, FileUploadDirective, RedListBadgeClassDirective, RiskClassDirective],
+                    exports: [ClickOutsideDirective, FocusDirective, FileUploadDirective, RedListBadgeClassDirective, RiskClassDirective]
+                }]
         }] });
 
-class ADBNavComponent {
-    set userName(fullName) {
-        this.fullName = fullName;
-        const splitted = fullName?.split(' ');
-        if (splitted?.length > 1) {
-            const initials = splitted.shift().charAt(0) + splitted.pop().charAt(0);
-            this.initials = initials.toUpperCase();
-        }
-        else {
-            this.initials = this.fullName ? this.fullName.charAt(0).toUpperCase() : this.fullName;
-        }
-    }
-    ;
-    constructor(httpClient, router, envService, trans) {
-        this.httpClient = httpClient;
-        this.router = router;
-        this.envService = envService;
-        this.trans = trans;
-        this.subscription = new Subscription();
-        this.loginClicked = new EventEmitter();
-        this.logoutClicked = new EventEmitter();
-        this.dropMenuChange = new EventEmitter();
-        this.showPattern = false;
-        this.translationFinished = false;
-        this.lastPosition = 0;
-        this.artfakta = true;
-        this.showNavMenu = false;
-        this.showUserMenu = false;
-        this.showArtfakta = true;
-        this.showNOS = true;
-    }
-    ngOnInit() {
-        this.url = window.location.href;
-        const baseUrl = this.envService.environment.resourceUrl;
-        const url = this.artfakta ? '/assets/links-ap3.json' : '/assets/artportalen/links-ap3.json';
-        this.subscription.add(this.httpClient.get(baseUrl + url).subscribe(result => {
-            this.navigation = result;
-        }));
-        this.initTranslations(baseUrl);
-        this.router.events.subscribe((event) => {
-            if (event instanceof NavigationEnd) {
-                this.showNavMenu = false;
-                this.dropMenuChange.emit(this.showNavMenu);
-            }
-        });
-    }
-    initTranslations(baseUrl) {
-        if (this.trans.store.translations[this.trans.currentLang]) {
-            this.loadTranslation(baseUrl, this.trans.currentLang);
-        }
-        this.subscription.add(this.trans.onLangChange.subscribe((event) => {
-            this.translationFinished = false;
-            this.loadTranslation(baseUrl, event.lang);
-        }));
-    }
-    loadTranslation(baseUrl, lang) {
-        //TODO: Prepare for diffents lang then en sv (en-GB) or add more files in devcomponentserver :)
-        const url = this.artfakta ? baseUrl + `/assets/i18n/${lang}.json` : baseUrl + `/assets/artportalen/i18n/${lang}.json`;
-        this.subscription.add(this.httpClient.get(url).subscribe(translations => {
-            this.trans.setTranslation(lang, translations, true);
-            this.translationFinished = true;
-        }));
-    }
-    showMenuDropdown(show) {
-        this.showUserMenu = false;
-        if (this.showNavMenu !== show) {
-            this.showNavMenu = show;
-            this.dropMenuChange.emit(show);
-        }
-    }
-    setLanguage(lang) {
-        this.trans.use(lang);
-        this.showNavMenu = false;
-        this.dropMenuChange.emit(false);
-        //TODO: set localstorage/cookies or probaly event to main app
-    }
-    login() {
-        this.loginClicked.emit();
-    }
-    logout() {
-        this.logoutClicked.emit();
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ADBNavComponent, deps: [{ token: i1.HttpClient }, { token: i2.Router }, { token: EnvironmentService$1 }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ADBNavComponent, selector: "adb-nav", inputs: { showPattern: "showPattern", userName: "userName", artfakta: "artfakta" }, outputs: { loginClicked: "loginClicked", logoutClicked: "logoutClicked", dropMenuChange: "dropMenuChange" }, ngImport: i0, template: "<div class=\"bg-primary adb-main-header\" (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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "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: "16.2.12", ngImport: i0, type: ADBNavComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'adb-nav', 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>" }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i2.Router }, { type: EnvironmentService$1 }, { type: i1$1.TranslateService }]; }, propDecorators: { loginClicked: [{
-                type: Output
-            }], logoutClicked: [{
-                type: Output
-            }], dropMenuChange: [{
-                type: Output
-            }], showPattern: [{
-                type: Input
-            }], userName: [{
-                type: Input
-            }], artfakta: [{
-                type: Input
+class ADBNavComponent {
+    set userName(fullName) {
+        this.fullName = fullName;
+        const splitted = fullName?.split(' ');
+        if (splitted?.length > 1) {
+            const initials = splitted.shift().charAt(0) + splitted.pop().charAt(0);
+            this.initials = initials.toUpperCase();
+        }
+        else {
+            this.initials = this.fullName ? this.fullName.charAt(0).toUpperCase() : this.fullName;
+        }
+    }
+    ;
+    constructor(httpClient, router, envService, trans) {
+        this.httpClient = httpClient;
+        this.router = router;
+        this.envService = envService;
+        this.trans = trans;
+        this.subscription = new Subscription();
+        this.loginClicked = new EventEmitter();
+        this.logoutClicked = new EventEmitter();
+        this.dropMenuChange = new EventEmitter();
+        this.showPattern = false;
+        this.translationFinished = false;
+        this.lastPosition = 0;
+        this.artfakta = true;
+        this.showNavMenu = false;
+        this.showUserMenu = false;
+        this.showArtfakta = true;
+        this.showNOS = true;
+    }
+    ngOnInit() {
+        this.url = window.location.href;
+        const baseUrl = this.envService.environment.resourceUrl;
+        const url = this.artfakta ? '/assets/links-ap3.json' : '/assets/artportalen/links-ap3.json';
+        this.subscription.add(this.httpClient.get(baseUrl + url).subscribe(result => {
+            this.navigation = result;
+        }));
+        this.initTranslations(baseUrl);
+        this.router.events.subscribe((event) => {
+            if (event instanceof NavigationEnd) {
+                this.showNavMenu = false;
+                this.dropMenuChange.emit(this.showNavMenu);
+            }
+        });
+    }
+    initTranslations(baseUrl) {
+        if (this.trans.store.translations[this.trans.currentLang]) {
+            this.loadTranslation(baseUrl, this.trans.currentLang);
+        }
+        this.subscription.add(this.trans.onLangChange.subscribe((event) => {
+            this.translationFinished = false;
+            this.loadTranslation(baseUrl, event.lang);
+        }));
+    }
+    loadTranslation(baseUrl, lang) {
+        //TODO: Prepare for diffents lang then en sv (en-GB) or add more files in devcomponentserver :)
+        const url = this.artfakta ? baseUrl + `/assets/i18n/${lang}.json` : baseUrl + `/assets/artportalen/i18n/${lang}.json`;
+        this.subscription.add(this.httpClient.get(url).subscribe(translations => {
+            this.trans.setTranslation(lang, translations, true);
+            this.translationFinished = true;
+        }));
+    }
+    showMenuDropdown(show) {
+        this.showUserMenu = false;
+        if (this.showNavMenu !== show) {
+            this.showNavMenu = show;
+            this.dropMenuChange.emit(show);
+        }
+    }
+    setLanguage(lang) {
+        this.trans.use(lang);
+        this.showNavMenu = false;
+        this.dropMenuChange.emit(false);
+        //TODO: set localstorage/cookies or probaly event to main app
+    }
+    login() {
+        this.loginClicked.emit();
+    }
+    logout() {
+        this.logoutClicked.emit();
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ADBNavComponent, deps: [{ token: i1.HttpClient }, { token: i2.Router }, { token: EnvironmentService$1 }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: ADBNavComponent, selector: "adb-nav", inputs: { showPattern: "showPattern", userName: "userName", artfakta: "artfakta" }, outputs: { loginClicked: "loginClicked", logoutClicked: "logoutClicked", dropMenuChange: "dropMenuChange" }, ngImport: i0, template: "<div class=\"bg-primary adb-main-header\" (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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: "18.2.8", ngImport: i0, type: ADBNavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'adb-nav', 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>" }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.Router }, { type: EnvironmentService$1 }, { type: i1$1.TranslateService }], propDecorators: { loginClicked: [{
+                type: Output
+            }], logoutClicked: [{
+                type: Output
+            }], dropMenuChange: [{
+                type: Output
+            }], showPattern: [{
+                type: Input
+            }], userName: [{
+                type: Input
+            }], artfakta: [{
+                type: Input
             }] } });
 
-class AdbDropdownService {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbDropdownService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbDropdownService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbDropdownService, decorators: [{
-            type: Injectable
+class AdbDropdownService {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbDropdownService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbDropdownService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbDropdownService, decorators: [{
+            type: Injectable
         }] });
 
-class AdbDropdownDirective {
-    constructor(elementRef, adbDropdownService) {
-        this.elementRef = elementRef;
-        this.adbDropdownService = adbDropdownService;
-        this.adbDropdown = new EventEmitter();
-        this.insideClick = false;
-        this.dataToggle = "dropdown";
-        this.haspPopup = true;
-        this.expanded = false;
-        this.id = this.getId();
-        this.dropId = this.getId();
-    }
-    onClick() {
-        this.adbDropdownService.currentMenuId = this.id;
-        const node = this.elementRef.nativeElement.parentNode;
-        const toggleButton = node.querySelector('.dropdown-toggle');
-        let style = `transform:translate3d(0px, ${toggleButton?.clientHeight + 1}px, 0px);`;
-        const menu = node.querySelector('.dropdown-menu');
-        if (menu) {
-            this.adbDropdownService.currentMenu = this.elementRef.nativeElement;
-            if (menu.classList?.contains('dropdown-menu-end')) {
-                style = style + 'inset: 0px 0px auto auto;';
-            }
-            menu.setAttribute('style', style);
-            menu.setAttribute('id', this.dropId);
-            if (menu.classList.contains('show')) {
-                menu.classList.remove('show');
-                this.expanded = false;
-            }
-            else {
-                this.adbDropdown.emit();
-                menu.classList.add('show');
-                this.expanded = true;
-            }
-        }
-    }
-    onCheckOutSideClick(target) {
-        if (this.adbDropdownService.currentMenuId === this.id) {
-            const parent = this.insideClick ? this.elementRef.nativeElement.parentNode : this.elementRef.nativeElement;
-            const clickedInside = parent.contains(target);
-            if (!clickedInside) {
-                const parent = this.elementRef.nativeElement.parentNode.querySelector('.dropdown-menu');
-                parent?.classList.remove('show');
-                this.expanded = false;
-            }
-        }
-        else {
-            const parent = this.elementRef.nativeElement.parentNode.querySelector('.dropdown-menu');
-            parent?.classList.remove('show');
-            this.expanded = false;
-        }
-    }
-    close() {
-        const node = this.elementRef.nativeElement.parentNode;
-        const menu = node.querySelector('.dropdown-menu');
-        menu.classList.remove('show');
-        this.expanded = false;
-    }
-    getId() {
-        return '' + Math.floor(Math.random() * Date.now());
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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: "16.2.12", type: AdbDropdownDirective, 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: "16.2.12", ngImport: i0, type: AdbDropdownDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[adbDropdown]',
-                    exportAs: 'adbDropdown'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: AdbDropdownService }]; }, propDecorators: { adbDropdown: [{
-                type: Output
-            }], insideClick: [{
-                type: Input
-            }], id: [{
-                type: HostBinding,
-                args: ['id']
-            }], dataToggle: [{
-                type: HostBinding,
-                args: ['attr.data-toggle']
-            }], haspPopup: [{
-                type: HostBinding,
-                args: ['attr.aria-haspopup']
-            }], expanded: [{
-                type: HostBinding,
-                args: ['attr.aria-expanded']
-            }], dropId: [{
-                type: HostBinding,
-                args: ['attr.aria-controls']
-            }], onClick: [{
-                type: HostListener,
-                args: ['click']
-            }], onCheckOutSideClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event.target']]
+class AdbDropdownDirective {
+    constructor(elementRef, adbDropdownService) {
+        this.elementRef = elementRef;
+        this.adbDropdownService = adbDropdownService;
+        this.adbDropdown = new EventEmitter();
+        this.insideClick = false;
+        this.dataToggle = "dropdown";
+        this.haspPopup = true;
+        this.expanded = false;
+        this.id = this.getId();
+        this.dropId = this.getId();
+    }
+    onClick() {
+        this.adbDropdownService.currentMenuId = this.id;
+        const node = this.elementRef.nativeElement.parentNode;
+        const toggleButton = node.querySelector('.dropdown-toggle');
+        let style = `transform:translate3d(0px, ${toggleButton?.clientHeight + 1}px, 0px);`;
+        const menu = node.querySelector('.dropdown-menu');
+        if (menu) {
+            this.adbDropdownService.currentMenu = this.elementRef.nativeElement;
+            if (menu.classList?.contains('dropdown-menu-end')) {
+                style = style + 'inset: 0px 0px auto auto;';
+            }
+            menu.setAttribute('style', style);
+            menu.setAttribute('id', this.dropId);
+            if (menu.classList.contains('show')) {
+                menu.classList.remove('show');
+                this.expanded = false;
+            }
+            else {
+                this.adbDropdown.emit();
+                menu.classList.add('show');
+                this.expanded = true;
+            }
+        }
+    }
+    onCheckOutSideClick(target) {
+        if (this.adbDropdownService.currentMenuId === this.id) {
+            const parent = this.insideClick ? this.elementRef.nativeElement.parentNode : this.elementRef.nativeElement;
+            const clickedInside = parent.contains(target);
+            if (!clickedInside) {
+                const parent = this.elementRef.nativeElement.parentNode.querySelector('.dropdown-menu');
+                parent?.classList.remove('show');
+                this.expanded = false;
+            }
+        }
+        else {
+            const parent = this.elementRef.nativeElement.parentNode.querySelector('.dropdown-menu');
+            parent?.classList.remove('show');
+            this.expanded = false;
+        }
+    }
+    close() {
+        const node = this.elementRef.nativeElement.parentNode;
+        const menu = node.querySelector('.dropdown-menu');
+        menu.classList.remove('show');
+        this.expanded = false;
+    }
+    getId() {
+        return '' + Math.floor(Math.random() * Date.now());
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", 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: "18.2.8", type: AdbDropdownDirective, 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: "18.2.8", ngImport: i0, type: AdbDropdownDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[adbDropdown]',
+                    exportAs: 'adbDropdown'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: AdbDropdownService }], propDecorators: { adbDropdown: [{
+                type: Output
+            }], insideClick: [{
+                type: Input
+            }], id: [{
+                type: HostBinding,
+                args: ['id']
+            }], dataToggle: [{
+                type: HostBinding,
+                args: ['attr.data-toggle']
+            }], haspPopup: [{
+                type: HostBinding,
+                args: ['attr.aria-haspopup']
+            }], expanded: [{
+                type: HostBinding,
+                args: ['attr.aria-expanded']
+            }], dropId: [{
+                type: HostBinding,
+                args: ['attr.aria-controls']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onCheckOutSideClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event.target']]
             }] } });
 
-class AdbDropdownModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: AdbDropdownModule, declarations: [AdbDropdownDirective], imports: [CommonModule, i1$1.TranslateModule, AdbDirectivesModule], exports: [AdbDropdownDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbDropdownModule, providers: [AdbDropdownService], imports: [CommonModule, TranslateModule.forChild(), AdbDirectivesModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbDropdownModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, TranslateModule.forChild(), AdbDirectivesModule],
-                    declarations: [AdbDropdownDirective],
-                    exports: [AdbDropdownDirective],
-                    providers: [AdbDropdownService]
-                }]
+class AdbDropdown2Directive {
+    constructor(elementRef, adbDropdownService) {
+        this.elementRef = elementRef;
+        this.adbDropdownService = adbDropdownService;
+        this.adbDropdown = new EventEmitter();
+        this.insideClick = false;
+        this.dataToggle = "dropdown";
+        this.haspPopup = true;
+        this.expanded = false;
+        this.id = this.getId();
+        this.dropId = this.getId();
+    }
+    onClick() {
+        this.adbDropdownService.currentMenuId = this.id;
+        const node = this.elementRef.nativeElement.parentNode;
+        const menu = node.querySelector('.dropdown-menu');
+        if (menu) {
+            this.adbDropdownService.currentMenu = this.elementRef.nativeElement;
+            this.setMenuPosition(node, menu);
+            menu.setAttribute('id', this.dropId);
+            if (menu.classList.contains('show')) {
+                menu.classList.remove('show');
+                this.expanded = false;
+            }
+            else {
+                this.adbDropdown.emit();
+                menu.classList.add('show');
+                this.expanded = true;
+            }
+        }
+    }
+    onCheckOutSideClick(target) {
+        if (this.adbDropdownService.currentMenuId === this.id) {
+            const parent = this.insideClick ? this.elementRef.nativeElement.parentNode : this.elementRef.nativeElement;
+            const clickedInside = parent.contains(target);
+            if (!clickedInside) {
+                const parent = this.elementRef.nativeElement.parentNode.querySelector('.dropdown-menu');
+                parent?.classList.remove('show');
+                this.expanded = false;
+            }
+        }
+        else {
+            const parent = this.elementRef.nativeElement.parentNode.querySelector('.dropdown-menu');
+            parent?.classList.remove('show');
+            this.expanded = false;
+        }
+    }
+    onWindowScroll() {
+        const node = this.elementRef.nativeElement.parentNode;
+        const menu = node.querySelector('.dropdown-menu');
+        if (menu.classList?.contains('show')) {
+            this.setMenuPosition(node, menu);
+        }
+    }
+    setMenuPosition(dropdownNode, menu) {
+        const toggleButton = dropdownNode.querySelector('.dropdown-toggle');
+        menu.setAttribute('style', 'visibility:hidden');
+        menu.setAttribute('style', 'display:block');
+        const menuWidth = menu.offsetWidth;
+        menu.setAttribute('style', 'visibility:visible');
+        menu.setAttribute('style', 'display:none');
+        const buttonRect = toggleButton.getBoundingClientRect();
+        let menuPosition = `top:${buttonRect.bottom}px;left:${buttonRect.left}px;position:fixed;`;
+        if (menu.classList?.contains('dropdown-menu-end')) {
+            menuPosition = `top:${buttonRect.bottom}px;left:${buttonRect.right - menuWidth}px;position:fixed;`;
+        }
+        menu.setAttribute('style', menuPosition);
+    }
+    close() {
+        const node = this.elementRef.nativeElement.parentNode;
+        const menu = node.querySelector('.dropdown-menu');
+        menu.classList.remove('show');
+        this.expanded = false;
+    }
+    getId() {
+        return '' + Math.floor(Math.random() * Date.now());
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", 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: "18.2.8", type: AdbDropdown2Directive, 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: "18.2.8", ngImport: i0, type: AdbDropdown2Directive, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[adbDropdown2]',
+                    exportAs: 'adbDropdown'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: AdbDropdownService }], propDecorators: { adbDropdown: [{
+                type: Output
+            }], insideClick: [{
+                type: Input
+            }], id: [{
+                type: HostBinding,
+                args: ['id']
+            }], dataToggle: [{
+                type: HostBinding,
+                args: ['attr.data-toggle']
+            }], haspPopup: [{
+                type: HostBinding,
+                args: ['attr.aria-haspopup']
+            }], expanded: [{
+                type: HostBinding,
+                args: ['attr.aria-expanded']
+            }], dropId: [{
+                type: HostBinding,
+                args: ['attr.aria-controls']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onCheckOutSideClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event.target']]
+            }], onWindowScroll: [{
+                type: HostListener,
+                args: ['window:scroll']
+            }] } });
+
+class AdbDropdownModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", 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: "18.2.8", ngImport: i0, type: AdbDropdownModule, providers: [AdbDropdownService], imports: [CommonModule, TranslateModule.forChild(), AdbDirectivesModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbDropdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, TranslateModule.forChild(), AdbDirectivesModule],
+                    declarations: [AdbDropdownDirective, AdbDropdown2Directive],
+                    exports: [AdbDropdownDirective, AdbDropdown2Directive],
+                    providers: [AdbDropdownService]
+                }]
         }] });
 
-class InfiniteScrollComponent {
-    constructor(_element) {
-        this._element = _element;
-        this.onVisible = new EventEmitter();
-        this.onHidden = new EventEmitter();
-        this.height = '1px';
-        this.checkForIntersection = (entries) => {
-            entries.forEach((entry) => {
-                const isIntersecting = entry.isIntersecting &&
-                    entry.target === this._element.nativeElement;
-                if (isIntersecting) {
-                    this.onVisible.emit();
-                }
-                else {
-                    this.onHidden.emit();
-                }
-            });
-        };
-    }
-    ngAfterViewInit() {
-        this._intersectionObserver = new IntersectionObserver(entries => {
-            this.checkForIntersection(entries);
-        }, {});
-        this._intersectionObserver.observe(this._element.nativeElement);
-    }
-    ngOnDestroy() {
-        if (this._intersectionObserver) {
-            this._intersectionObserver.disconnect();
-        }
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InfiniteScrollComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: InfiniteScrollComponent, selector: "[onVisible]", outputs: { onVisible: "onVisible", onHidden: "onHidden" }, host: { properties: { "style.height": "this.height" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InfiniteScrollComponent, decorators: [{
-            type: Directive,
-            args: [{ selector: "[onVisible]" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onVisible: [{
-                type: Output
-            }], onHidden: [{
-                type: Output
-            }], height: [{
-                type: HostBinding,
-                args: ['style.height']
+class InfiniteScrollComponent {
+    constructor(_element) {
+        this._element = _element;
+        this.onVisible = new EventEmitter();
+        this.onHidden = new EventEmitter();
+        this.height = '1px';
+        this.checkForIntersection = (entries) => {
+            entries.forEach((entry) => {
+                const isIntersecting = entry.isIntersecting &&
+                    entry.target === this._element.nativeElement;
+                if (isIntersecting) {
+                    this.onVisible.emit();
+                }
+                else {
+                    this.onHidden.emit();
+                }
+            });
+        };
+    }
+    ngAfterViewInit() {
+        this._intersectionObserver = new IntersectionObserver(entries => {
+            this.checkForIntersection(entries);
+        }, {});
+        this._intersectionObserver.observe(this._element.nativeElement);
+    }
+    ngOnDestroy() {
+        if (this._intersectionObserver) {
+            this._intersectionObserver.disconnect();
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InfiniteScrollComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: InfiniteScrollComponent, selector: "[onVisible]", outputs: { onVisible: "onVisible", onHidden: "onHidden" }, host: { properties: { "style.height": "this.height" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InfiniteScrollComponent, decorators: [{
+            type: Directive,
+            args: [{ selector: "[onVisible]" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onVisible: [{
+                type: Output
+            }], onHidden: [{
+                type: Output
+            }], height: [{
+                type: HostBinding,
+                args: ['style.height']
             }] } });
 
-class PagerBaseDirective {
-    constructor() {
-        this.limit = PagerBaseDirective.DEFAULT_LIMIT;
-        this.currentPage = 1;
-    }
-    static { this.DEFAULT_LIMIT = 10; }
-    static { this.VISIBLE_PAGES = 5; }
-    static { this.SKIP_RESOURCE = 'offset'; }
-    set setTotalCount(value) {
-        this.totalCount = value;
-        this.calculatePages();
-    }
-    set setLimit(value) {
-        this.limit = value ?? PagerBaseDirective.DEFAULT_LIMIT;
-        this.calculatePages();
-    }
-    calculatePages() {
-        if (this.totalCount >= 0 && this.limit > 0) {
-            this.amountOfPages = Math.ceil(this.totalCount / this.limit);
-            if ((this.currentPage + 1) > PagerBaseDirective.VISIBLE_PAGES) {
-                this.pages = [
-                    this.currentPage - 2,
-                    this.currentPage - 1, this.currentPage
-                ];
-                const above = this.amountOfPages - this.currentPage;
-                if (above >= 1) {
-                    this.pages.push(this.currentPage + 1);
-                }
-                if (above >= 2) {
-                    this.pages.push(this.currentPage + 2);
-                }
-            }
-            else if (this.totalCount) {
-                const max = this.amountOfPages > PagerBaseDirective.VISIBLE_PAGES ? 5 : this.amountOfPages;
-                this.pages = Array(Math.ceil(max)).fill(1).map((x, i) => i + 1);
-            }
-        }
-        else {
-            this.amountOfPages = 0;
-        }
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PagerBaseDirective, inputs: { setTotalCount: ["totalCount", "setTotalCount"], setLimit: ["limit", "setLimit"] }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerBaseDirective, decorators: [{
-            type: Directive
-        }], propDecorators: { setTotalCount: [{
-                type: Input,
-                args: ['totalCount']
-            }], setLimit: [{
-                type: Input,
-                args: ['limit']
+class PagerBaseDirective {
+    constructor() {
+        this.limit = PagerBaseDirective.DEFAULT_LIMIT;
+        this.currentPage = 1;
+    }
+    static { this.DEFAULT_LIMIT = 10; }
+    static { this.VISIBLE_PAGES = 5; }
+    static { this.SKIP_RESOURCE = 'offset'; }
+    set setTotalCount(value) {
+        this.totalCount = value;
+        this.calculatePages();
+    }
+    set setLimit(value) {
+        this.limit = value ?? PagerBaseDirective.DEFAULT_LIMIT;
+        this.calculatePages();
+    }
+    calculatePages() {
+        if (this.totalCount >= 0 && this.limit > 0) {
+            this.amountOfPages = Math.ceil(this.totalCount / this.limit);
+            if ((this.currentPage + 1) > PagerBaseDirective.VISIBLE_PAGES) {
+                this.pages = [
+                    this.currentPage - 2,
+                    this.currentPage - 1, this.currentPage
+                ];
+                const above = this.amountOfPages - this.currentPage;
+                if (above >= 1) {
+                    this.pages.push(this.currentPage + 1);
+                }
+                if (above >= 2) {
+                    this.pages.push(this.currentPage + 2);
+                }
+            }
+            else if (this.totalCount) {
+                const max = this.amountOfPages > PagerBaseDirective.VISIBLE_PAGES ? 5 : this.amountOfPages;
+                this.pages = Array(Math.ceil(max)).fill(1).map((x, i) => i + 1);
+            }
+        }
+        else {
+            this.amountOfPages = 0;
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: PagerBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: PagerBaseDirective, inputs: { setTotalCount: ["totalCount", "setTotalCount"], setLimit: ["limit", "setLimit"] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: PagerBaseDirective, decorators: [{
+            type: Directive
+        }], propDecorators: { setTotalCount: [{
+                type: Input,
+                args: ['totalCount']
+            }], setLimit: [{
+                type: Input,
+                args: ['limit']
             }] } });
 
-class PagerComponent extends PagerBaseDirective {
-    constructor(activatedRoute) {
-        super();
-        this.activatedRoute = activatedRoute;
-        this.subscription = new Subscription();
-        this.offsetName = "offset";
-        this.infiniteLimit = false;
-    }
-    ngOnInit() {
-        this.subscription.add(this.activatedRoute.queryParams.subscribe(params => {
-            if (params[this.offsetName]) {
-                this.currentPage = (+params[this.offsetName] / this.limit) + 1;
-            }
-            else {
-                this.currentPage = 1;
-            }
-            this.calculatePages();
-            //create model
-            this.params = {
-                first: { [this.offsetName]: 0 },
-                prev: { [this.offsetName]: (this.currentPage - 2) * this.limit },
-                pages: [],
-                next: { [this.offsetName]: this.currentPage * this.limit },
-                last: { [this.offsetName]: (this.amountOfPages - 1) * this.limit },
-            };
-            if (this.pages) {
-                for (const page of this.pages) {
-                    this.params.pages.push({ name: page, params: { [this.offsetName]: (page - 1) * this.limit } });
-                }
-            }
-        }));
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerComponent, deps: [{ token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerComponent, selector: "adb-pager-nav", inputs: { offsetName: "offsetName", infiniteLimit: "infiniteLimit" }, usesInheritance: true, ngImport: i0, template: "<nav *ngIf=\"pages&&pages.length>1&&currentPage<=amountOfPages\" class=\"d-flex justify-content-end my-1\">\r\n    <ul class=\"pagination mb-0\">\r\n        <li class=\"page-item\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.first\" queryParamsHandling=\"merge\"\r\n                [ngClass]=\"{'pe-none opacity-50':currentPage===1}\" [attr.aria-disabled]=\"currentPage===1\">\r\n                <i class=\"fas fa-chevron-double-left\"></i>\r\n            </a>\r\n        </li>\r\n        <li class=\"page-item\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.prev\" queryParamsHandling=\"merge\"\r\n                [ngClass]=\"{'pe-none opacity-50':currentPage===1}\" [attr.aria-disabled]=\"currentPage===1\">\r\n                <i class=\"fas fa-chevron-left\"></i>\r\n            </a>\r\n        </li>\r\n        <li class=\"page-item\" [class.active]=\"currentPage===page.name\" *ngFor=\"let page of params.pages\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"page.params\"\r\n                queryParamsHandling=\"merge\">{{page.name}}</a>\r\n        </li>\r\n        <li class=\"page-item\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.next\" queryParamsHandling=\"merge\"\r\n                [ngClass]=\"{'pe-none opacity-50':currentPage>=amountOfPages}\" [attr.aria-disabled]=\"currentPage>=amountOfPages\">\r\n                <i class=\"fas fa-chevron-right\"></i>\r\n            </a>\r\n        </li>\r\n        <ng-container *ngIf=\"!infiniteLimit\">\r\n            <li *ngIf=\"(amountOfPages-1)*limit<10000\" class=\"page-item\">\r\n                <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.last\" queryParamsHandling=\"merge\"\r\n                    [attr.aria-disabled]=\"currentPage>=amountOfPages\" [ngClass]=\"{'pe-none opacity-50':currentPage>=amountOfPages}\">\r\n                    <i class=\"fas fa-chevron-double-right\"></i>\r\n                </a>\r\n            </li>\r\n        </ng-container>\r\n        <li class=\"page-item\" *ngIf=\"infiniteLimit\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.last\" queryParamsHandling=\"merge\"\r\n                [attr.aria-disabled]=\"currentPage>=amountOfPages\" [ngClass]=\"{'pe-none opacity-50':currentPage>=amountOfPages}\">\r\n                <i class=\"fas fa-chevron-double-right\"></i>\r\n            </a>\r\n        </li>\r\n    </ul>\r\n</nav>", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'adb-pager-nav', template: "<nav *ngIf=\"pages&&pages.length>1&&currentPage<=amountOfPages\" class=\"d-flex justify-content-end my-1\">\r\n    <ul class=\"pagination mb-0\">\r\n        <li class=\"page-item\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.first\" queryParamsHandling=\"merge\"\r\n                [ngClass]=\"{'pe-none opacity-50':currentPage===1}\" [attr.aria-disabled]=\"currentPage===1\">\r\n                <i class=\"fas fa-chevron-double-left\"></i>\r\n            </a>\r\n        </li>\r\n        <li class=\"page-item\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.prev\" queryParamsHandling=\"merge\"\r\n                [ngClass]=\"{'pe-none opacity-50':currentPage===1}\" [attr.aria-disabled]=\"currentPage===1\">\r\n                <i class=\"fas fa-chevron-left\"></i>\r\n            </a>\r\n        </li>\r\n        <li class=\"page-item\" [class.active]=\"currentPage===page.name\" *ngFor=\"let page of params.pages\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"page.params\"\r\n                queryParamsHandling=\"merge\">{{page.name}}</a>\r\n        </li>\r\n        <li class=\"page-item\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.next\" queryParamsHandling=\"merge\"\r\n                [ngClass]=\"{'pe-none opacity-50':currentPage>=amountOfPages}\" [attr.aria-disabled]=\"currentPage>=amountOfPages\">\r\n                <i class=\"fas fa-chevron-right\"></i>\r\n            </a>\r\n        </li>\r\n        <ng-container *ngIf=\"!infiniteLimit\">\r\n            <li *ngIf=\"(amountOfPages-1)*limit<10000\" class=\"page-item\">\r\n                <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.last\" queryParamsHandling=\"merge\"\r\n                    [attr.aria-disabled]=\"currentPage>=amountOfPages\" [ngClass]=\"{'pe-none opacity-50':currentPage>=amountOfPages}\">\r\n                    <i class=\"fas fa-chevron-double-right\"></i>\r\n                </a>\r\n            </li>\r\n        </ng-container>\r\n        <li class=\"page-item\" *ngIf=\"infiniteLimit\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.last\" queryParamsHandling=\"merge\"\r\n                [attr.aria-disabled]=\"currentPage>=amountOfPages\" [ngClass]=\"{'pe-none opacity-50':currentPage>=amountOfPages}\">\r\n                <i class=\"fas fa-chevron-double-right\"></i>\r\n            </a>\r\n        </li>\r\n    </ul>\r\n</nav>" }]
-        }], ctorParameters: function () { return [{ type: i2.ActivatedRoute }]; }, propDecorators: { offsetName: [{
-                type: Input
-            }], infiniteLimit: [{
-                type: Input
+class PagerComponent extends PagerBaseDirective {
+    constructor(activatedRoute) {
+        super();
+        this.activatedRoute = activatedRoute;
+        this.subscription = new Subscription();
+        this.offsetName = "offset";
+        this.infiniteLimit = false;
+    }
+    ngOnInit() {
+        this.subscription.add(this.activatedRoute.queryParams.subscribe(params => {
+            if (params[this.offsetName]) {
+                this.currentPage = (+params[this.offsetName] / this.limit) + 1;
+            }
+            else {
+                this.currentPage = 1;
+            }
+            this.calculatePages();
+            //create model
+            this.params = {
+                first: { [this.offsetName]: 0 },
+                prev: { [this.offsetName]: (this.currentPage - 2) * this.limit },
+                pages: [],
+                next: { [this.offsetName]: this.currentPage * this.limit },
+                last: { [this.offsetName]: (this.amountOfPages - 1) * this.limit },
+            };
+            if (this.pages) {
+                for (const page of this.pages) {
+                    this.params.pages.push({ name: page, params: { [this.offsetName]: (page - 1) * this.limit } });
+                }
+            }
+        }));
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: PagerComponent, deps: [{ token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: PagerComponent, selector: "adb-pager-nav", inputs: { offsetName: "offsetName", infiniteLimit: "infiniteLimit" }, usesInheritance: true, ngImport: i0, template: "<nav *ngIf=\"pages&&pages.length>1&&currentPage<=amountOfPages\" class=\"d-flex justify-content-end my-1\">\r\n    <ul class=\"pagination mb-0\">\r\n        <li class=\"page-item\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.first\" queryParamsHandling=\"merge\"\r\n                [ngClass]=\"{'pe-none opacity-50':currentPage===1}\" [attr.aria-disabled]=\"currentPage===1\">\r\n                <i class=\"fas fa-chevron-double-left\"></i>\r\n            </a>\r\n        </li>\r\n        <li class=\"page-item\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.prev\" queryParamsHandling=\"merge\"\r\n                [ngClass]=\"{'pe-none opacity-50':currentPage===1}\" [attr.aria-disabled]=\"currentPage===1\">\r\n                <i class=\"fas fa-chevron-left\"></i>\r\n            </a>\r\n        </li>\r\n        <li class=\"page-item\" [class.active]=\"currentPage===page.name\" *ngFor=\"let page of params.pages\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"page.params\"\r\n                queryParamsHandling=\"merge\">{{page.name}}</a>\r\n        </li>\r\n        <li class=\"page-item\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.next\" queryParamsHandling=\"merge\"\r\n                [ngClass]=\"{'pe-none opacity-50':currentPage>=amountOfPages}\" [attr.aria-disabled]=\"currentPage>=amountOfPages\">\r\n                <i class=\"fas fa-chevron-right\"></i>\r\n            </a>\r\n        </li>\r\n        <ng-container *ngIf=\"!infiniteLimit\">\r\n            <li *ngIf=\"(amountOfPages-1)*limit<10000\" class=\"page-item\">\r\n                <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.last\" queryParamsHandling=\"merge\"\r\n                    [attr.aria-disabled]=\"currentPage>=amountOfPages\" [ngClass]=\"{'pe-none opacity-50':currentPage>=amountOfPages}\">\r\n                    <i class=\"fas fa-chevron-double-right\"></i>\r\n                </a>\r\n            </li>\r\n        </ng-container>\r\n        <li class=\"page-item\" *ngIf=\"infiniteLimit\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.last\" queryParamsHandling=\"merge\"\r\n                [attr.aria-disabled]=\"currentPage>=amountOfPages\" [ngClass]=\"{'pe-none opacity-50':currentPage>=amountOfPages}\">\r\n                <i class=\"fas fa-chevron-double-right\"></i>\r\n            </a>\r\n        </li>\r\n    </ul>\r\n</nav>", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: PagerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'adb-pager-nav', template: "<nav *ngIf=\"pages&&pages.length>1&&currentPage<=amountOfPages\" class=\"d-flex justify-content-end my-1\">\r\n    <ul class=\"pagination mb-0\">\r\n        <li class=\"page-item\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.first\" queryParamsHandling=\"merge\"\r\n                [ngClass]=\"{'pe-none opacity-50':currentPage===1}\" [attr.aria-disabled]=\"currentPage===1\">\r\n                <i class=\"fas fa-chevron-double-left\"></i>\r\n            </a>\r\n        </li>\r\n        <li class=\"page-item\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.prev\" queryParamsHandling=\"merge\"\r\n                [ngClass]=\"{'pe-none opacity-50':currentPage===1}\" [attr.aria-disabled]=\"currentPage===1\">\r\n                <i class=\"fas fa-chevron-left\"></i>\r\n            </a>\r\n        </li>\r\n        <li class=\"page-item\" [class.active]=\"currentPage===page.name\" *ngFor=\"let page of params.pages\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"page.params\"\r\n                queryParamsHandling=\"merge\">{{page.name}}</a>\r\n        </li>\r\n        <li class=\"page-item\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.next\" queryParamsHandling=\"merge\"\r\n                [ngClass]=\"{'pe-none opacity-50':currentPage>=amountOfPages}\" [attr.aria-disabled]=\"currentPage>=amountOfPages\">\r\n                <i class=\"fas fa-chevron-right\"></i>\r\n            </a>\r\n        </li>\r\n        <ng-container *ngIf=\"!infiniteLimit\">\r\n            <li *ngIf=\"(amountOfPages-1)*limit<10000\" class=\"page-item\">\r\n                <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.last\" queryParamsHandling=\"merge\"\r\n                    [attr.aria-disabled]=\"currentPage>=amountOfPages\" [ngClass]=\"{'pe-none opacity-50':currentPage>=amountOfPages}\">\r\n                    <i class=\"fas fa-chevron-double-right\"></i>\r\n                </a>\r\n            </li>\r\n        </ng-container>\r\n        <li class=\"page-item\" *ngIf=\"infiniteLimit\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"params.last\" queryParamsHandling=\"merge\"\r\n                [attr.aria-disabled]=\"currentPage>=amountOfPages\" [ngClass]=\"{'pe-none opacity-50':currentPage>=amountOfPages}\">\r\n                <i class=\"fas fa-chevron-double-right\"></i>\r\n            </a>\r\n        </li>\r\n    </ul>\r\n</nav>" }]
+        }], ctorParameters: () => [{ type: i2.ActivatedRoute }], propDecorators: { offsetName: [{
+                type: Input
+            }], infiniteLimit: [{
+                type: Input
             }] } });
 
-class PagerInlineComponent extends PagerBaseDirective {
-    constructor() {
-        super();
-        this.pageChanged = new EventEmitter();
-        this.infiniteLimit = false;
-    }
-    ngOnInit() {
-        this.calculatePages();
-    }
-    onFirstClick() {
-        this.currentPage = 1;
-        this.pageChanged.emit(this.currentPage - 1);
-        this.calculatePages();
-    }
-    onPrevClick() {
-        this.currentPage = this.currentPage - 1;
-        this.pageChanged.emit(this.currentPage - 1);
-        this.calculatePages();
-    }
-    onPageClick(page) {
-        this.currentPage = page;
-        this.pageChanged.emit(this.currentPage - 1);
-    }
-    onNextClick() {
-        this.currentPage = this.currentPage + 1;
-        this.pageChanged.emit(this.currentPage - 1);
-        this.calculatePages();
-    }
-    onLastClick() {
-        this.currentPage = this.amountOfPages;
-        this.pageChanged.emit(this.currentPage - 1);
-        this.calculatePages();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerInlineComponent, 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\">\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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerInlineComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'adb-pager', template: "<nav *ngIf=\"pages&&pages.length>1&&currentPage<=amountOfPages\" class=\"d-flex justify-content-end pr-2 my-1\">\r\n    <ul class=\"pagination\">\r\n        <li class=\"page-item\">\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" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { pageChanged: [{
-                type: Output
-            }], infiniteLimit: [{
-                type: Input
+class PagerInlineComponent extends PagerBaseDirective {
+    constructor() {
+        super();
+        this.pageChanged = new EventEmitter();
+        this.infiniteLimit = false;
+    }
+    ngOnInit() {
+        this.calculatePages();
+    }
+    onFirstClick() {
+        this.currentPage = 1;
+        this.pageChanged.emit(this.currentPage - 1);
+        this.calculatePages();
+    }
+    onPrevClick() {
+        this.currentPage = this.currentPage - 1;
+        this.pageChanged.emit(this.currentPage - 1);
+        this.calculatePages();
+    }
+    onPageClick(page) {
+        this.currentPage = page;
+        this.pageChanged.emit(this.currentPage - 1);
+    }
+    onNextClick() {
+        this.currentPage = this.currentPage + 1;
+        this.pageChanged.emit(this.currentPage - 1);
+        this.calculatePages();
+    }
+    onLastClick() {
+        this.currentPage = this.amountOfPages;
+        this.pageChanged.emit(this.currentPage - 1);
+        this.calculatePages();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: PagerInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: PagerInlineComponent, 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\">\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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: PagerInlineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'adb-pager', template: "<nav *ngIf=\"pages&&pages.length>1&&currentPage<=amountOfPages\" class=\"d-flex justify-content-end pr-2 my-1\">\r\n    <ul class=\"pagination\">\r\n        <li class=\"page-item\">\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" }]
+        }], ctorParameters: () => [], propDecorators: { pageChanged: [{
+                type: Output
+            }], infiniteLimit: [{
+                type: Input
             }] } });
 
-class AdbPagersModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbPagersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", 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: "16.2.12", ngImport: i0, type: AdbPagersModule, imports: [CommonModule,
-            RouterModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbPagersModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        RouterModule
-                    ],
-                    declarations: [InfiniteScrollComponent, PagerComponent, PagerInlineComponent],
-                    exports: [InfiniteScrollComponent, PagerComponent, PagerInlineComponent]
-                }]
+class AdbPagersModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbPagersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", 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: "18.2.8", ngImport: i0, type: AdbPagersModule, imports: [CommonModule,
+            RouterModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbPagersModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        RouterModule
+                    ],
+                    declarations: [InfiniteScrollComponent, PagerComponent, PagerInlineComponent],
+                    exports: [InfiniteScrollComponent, PagerComponent, PagerInlineComponent]
+                }]
         }] });
 
-class ADBHeaderModule {
-    static forRoot(environment) {
-        return {
-            ngModule: ADBHeaderModule,
-            providers: [
-                EnvironmentService$1,
-                {
-                    provide: 'env',
-                    useValue: environment
-                }
-            ]
-        };
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ADBHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ADBHeaderModule, declarations: [ADBNavComponent], imports: [CommonModule,
-            HttpClientModule,
-            RouterModule,
-            TranslateModule,
-            AdbDirectivesModule,
-            AdbDropdownModule,
-            AdbPagersModule], exports: [ADBNavComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ADBHeaderModule, imports: [CommonModule,
-            HttpClientModule,
-            RouterModule,
-            TranslateModule,
-            AdbDirectivesModule,
-            AdbDropdownModule,
-            AdbPagersModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ADBHeaderModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ADBNavComponent],
-                    imports: [
-                        CommonModule,
-                        HttpClientModule,
-                        RouterModule,
-                        TranslateModule,
-                        AdbDirectivesModule,
-                        AdbDropdownModule,
-                        AdbPagersModule
-                    ],
-                    exports: [ADBNavComponent]
-                }]
+class ADBHeaderModule {
+    static forRoot(environment) {
+        return {
+            ngModule: ADBHeaderModule,
+            providers: [
+                EnvironmentService$1,
+                {
+                    provide: 'env', // you can also use InjectionToken
+                    useValue: environment
+                }
+            ]
+        };
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ADBHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", 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: "18.2.8", ngImport: i0, type: ADBHeaderModule, providers: [provideHttpClient(withInterceptorsFromDi())], imports: [CommonModule,
+            RouterModule,
+            TranslateModule,
+            AdbDirectivesModule,
+            AdbDropdownModule,
+            AdbPagersModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ADBHeaderModule, decorators: [{
+            type: NgModule,
+            args: [{ declarations: [ADBNavComponent],
+                    exports: [ADBNavComponent], imports: [CommonModule,
+                        RouterModule,
+                        TranslateModule,
+                        AdbDirectivesModule,
+                        AdbDropdownModule,
+                        AdbPagersModule], providers: [provideHttpClient(withInterceptorsFromDi())] }]
         }] });
 
-class EnvironmentService {
-    constructor(environment) {
-        this.environment = environment;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EnvironmentService, deps: [{ token: 'env' }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EnvironmentService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EnvironmentService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: ['env']
-                }] }]; } });
+class EnvironmentService {
+    constructor(environment) {
+        this.environment = environment;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EnvironmentService, deps: [{ token: 'env' }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EnvironmentService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EnvironmentService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['env']
+                }] }] });
 
-class ArtportalenNavComponent {
-    set userName(fullName) {
-        this.fullName = fullName;
-    }
-    ;
-    constructor(httpClient, router, trans, envService) {
-        this.httpClient = httpClient;
-        this.router = router;
-        this.trans = trans;
-        this.envService = envService;
-        this.subscription = new Subscription();
-        this.loginClicked = new EventEmitter();
-        this.logoutClicked = new EventEmitter();
-        this.dropMenuChange = new EventEmitter();
-        this.showPattern = false;
-        this.translationFinished = false;
-        this.lastPosition = 0;
-        this.showNavMenu = false;
-        this.showUserMenu = false;
-        this.showReport = true;
-        this.showObservations = true;
-        this.showSubs = false;
-    }
-    ngOnInit() {
-        this.url = window.location.href;
-        const baseUrl = this.envService.environment.resourceUrl;
-        const url = '/assets/artportalen/links-ap3.json';
-        this.subscription.add(this.httpClient.get(baseUrl + url).subscribe(result => {
-            this.navigation = result;
-        }));
-        this.initTranslations(baseUrl);
-        this.router.events.subscribe((event) => {
-            if (event instanceof NavigationEnd) {
-                this.showNavMenu = false;
-                this.dropMenuChange.emit(this.showNavMenu);
-            }
-        });
-    }
-    showMenuDropdown(show) {
-        this.showUserMenu = false;
-        if (this.showNavMenu !== show) {
-            this.showNavMenu = show;
-            this.dropMenuChange.emit(show);
-        }
-    }
-    setLanguage(lang) {
-        this.trans.use(lang);
-        this.showNavMenu = false;
-        this.dropMenuChange.emit(false);
-    }
-    onUserClick() {
-        if (this.fullName) {
-            this.logout();
-        }
-        else {
-            this.login();
-        }
-    }
-    login() {
-        this.loginClicked.emit();
-    }
-    logout() {
-        this.logoutClicked.emit();
-    }
-    initTranslations(baseUrl) {
-        if (this.trans.store.translations[this.trans.currentLang]) {
-            this.loadTranslation(baseUrl, this.trans.currentLang);
-        }
-        this.subscription.add(this.trans.onLangChange.subscribe((event) => {
-            this.translationFinished = false;
-            this.loadTranslation(baseUrl, event.lang);
-        }));
-    }
-    loadTranslation(baseUrl, lang) {
-        //TODO: Prepare for diffents lang then en sv (en-GB) or add more files in devcomponentserver :)
-        const url = baseUrl + `/assets/artportalen/i18n/${lang}.json`;
-        this.subscription.add(this.httpClient.get(url).subscribe(translations => {
-            this.trans.setTranslation(lang, translations, true);
-            this.translationFinished = true;
-        }));
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ArtportalenNavComponent, deps: [{ token: i1.HttpClient }, { token: i2.Router }, { token: i1$1.TranslateService }, { token: EnvironmentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ArtportalenNavComponent, 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\">Artportalen beta</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\">Artportalen beta</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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[adbClickOutside]", outputs: ["adbClickOutside"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ArtportalenNavComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'adb-artportalen-nav', 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\">Artportalen beta</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\">Artportalen beta</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>" }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i2.Router }, { type: i1$1.TranslateService }, { type: EnvironmentService }]; }, propDecorators: { loginClicked: [{
-                type: Output
-            }], logoutClicked: [{
-                type: Output
-            }], dropMenuChange: [{
-                type: Output
-            }], showPattern: [{
-                type: Input
-            }], userName: [{
-                type: Input
+class ArtportalenNavComponent {
+    set userName(fullName) {
+        this.fullName = fullName;
+    }
+    ;
+    constructor(httpClient, router, trans, envService) {
+        this.httpClient = httpClient;
+        this.router = router;
+        this.trans = trans;
+        this.envService = envService;
+        this.subscription = new Subscription();
+        this.loginClicked = new EventEmitter();
+        this.logoutClicked = new EventEmitter();
+        this.dropMenuChange = new EventEmitter();
+        this.showPattern = false;
+        this.translationFinished = false;
+        this.lastPosition = 0;
+        this.showNavMenu = false;
+        this.showUserMenu = false;
+        this.showReport = true;
+        this.showObservations = true;
+        this.showSubs = false;
+    }
+    ngOnInit() {
+        this.url = window.location.href;
+        const baseUrl = this.envService.environment.resourceUrl;
+        const url = '/assets/artportalen/links-ap3.json';
+        this.subscription.add(this.httpClient.get(baseUrl + url).subscribe(result => {
+            this.navigation = result;
+        }));
+        this.initTranslations(baseUrl);
+        this.router.events.subscribe((event) => {
+            if (event instanceof NavigationEnd) {
+                this.showNavMenu = false;
+                this.dropMenuChange.emit(this.showNavMenu);
+            }
+        });
+    }
+    showMenuDropdown(show) {
+        this.showUserMenu = false;
+        if (this.showNavMenu !== show) {
+            this.showNavMenu = show;
+            this.dropMenuChange.emit(show);
+        }
+    }
+    setLanguage(lang) {
+        this.trans.use(lang);
+        this.showNavMenu = false;
+        this.dropMenuChange.emit(false);
+    }
+    onUserClick() {
+        if (this.fullName) {
+            this.logout();
+        }
+        else {
+            this.login();
+        }
+    }
+    login() {
+        this.loginClicked.emit();
+    }
+    logout() {
+        this.logoutClicked.emit();
+    }
+    initTranslations(baseUrl) {
+        if (this.trans.store.translations[this.trans.currentLang]) {
+            this.loadTranslation(baseUrl, this.trans.currentLang);
+        }
+        this.subscription.add(this.trans.onLangChange.subscribe((event) => {
+            this.translationFinished = false;
+            this.loadTranslation(baseUrl, event.lang);
+        }));
+    }
+    loadTranslation(baseUrl, lang) {
+        //TODO: Prepare for diffents lang then en sv (en-GB) or add more files in devcomponentserver :)
+        const url = baseUrl + `/assets/artportalen/i18n/${lang}.json`;
+        this.subscription.add(this.httpClient.get(url).subscribe(translations => {
+            this.trans.setTranslation(lang, translations, true);
+            this.translationFinished = true;
+        }));
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ArtportalenNavComponent, deps: [{ token: i1.HttpClient }, { token: i2.Router }, { token: i1$1.TranslateService }, { token: EnvironmentService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: ArtportalenNavComponent, 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\">Artportalen beta</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\">Artportalen beta</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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[adbClickOutside]", outputs: ["adbClickOutside"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ArtportalenNavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'adb-artportalen-nav', 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\">Artportalen beta</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\">Artportalen beta</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>" }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.Router }, { type: i1$1.TranslateService }, { type: EnvironmentService }], propDecorators: { loginClicked: [{
+                type: Output
+            }], logoutClicked: [{
+                type: Output
+            }], dropMenuChange: [{
+                type: Output
+            }], showPattern: [{
+                type: Input
+            }], userName: [{
+                type: Input
             }] } });
 
-class ArtportalenFooterComponent {
-    constructor(httpClient, envService, trans) {
-        this.httpClient = httpClient;
-        this.envService = envService;
-        this.trans = trans;
-        this.subscription = new Subscription();
-        this.translationFinished = false;
-    }
-    ngOnInit() {
-        this.url = window.location.href;
-        this.baseUrl = this.envService.environment.resourceUrl;
-        this.initTranslations(this.baseUrl);
-    }
-    initTranslations(baseUrl) {
-        if (this.trans.store.translations[this.trans.currentLang]) {
-            this.loadTranslation(baseUrl, this.trans.currentLang);
-        }
-        this.subscription.add(this.trans.onLangChange.subscribe((event) => {
-            this.translationFinished = false;
-            this.loadTranslation(baseUrl, event.lang);
-        }));
-    }
-    loadTranslation(baseUrl, lang) {
-        //TODO: Prepare for diffents lang then en sv (en-GB) or add more files in devcomponentserver :)
-        const url = baseUrl + `/assets/artportalen/i18n/${lang}.json`;
-        this.subscription.add(this.httpClient.get(url).subscribe(translations => {
-            this.trans.setTranslation(lang, translations, true);
-            this.translationFinished = true;
-        }));
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ArtportalenFooterComponent, deps: [{ token: i1.HttpClient }, { token: EnvironmentService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ArtportalenFooterComponent, 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.artdatabanken.se/artportalen/\" class=\"d-block text-white mb-2\">{{'FOOTER.ABOUT'|translate}}</a>\r\n                    <a href=\"https://www.artdatabanken.se/artportalen-tillganglighetsredogorelse\" class=\"d-block text-white mb-2\">{{'FOOTER.WCAG'|translate}}</a>\r\n                    <a href=\"https://www.artdatabanken.se/om-oss/kontakt/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.artdatabanken.se/tjanster-och-miljodata/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.artdatabanken.se/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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ArtportalenFooterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'adb-artportalen-footer', template: "<footer class=\"bg-primary-dark py-2 mt-auto container-fluid\" *ngIf=\"translationFinished\">\r\n    <div class=\"d-flex justify-content-center\">\r\n        <div class=\"container py-3 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.artdatabanken.se/artportalen/\" class=\"d-block text-white mb-2\">{{'FOOTER.ABOUT'|translate}}</a>\r\n                    <a href=\"https://www.artdatabanken.se/artportalen-tillganglighetsredogorelse\" class=\"d-block text-white mb-2\">{{'FOOTER.WCAG'|translate}}</a>\r\n                    <a href=\"https://www.artdatabanken.se/om-oss/kontakt/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.artdatabanken.se/tjanster-och-miljodata/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.artdatabanken.se/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>" }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: EnvironmentService }, { type: i1$1.TranslateService }]; } });
+class ArtportalenFooterComponent {
+    constructor(httpClient, envService, trans) {
+        this.httpClient = httpClient;
+        this.envService = envService;
+        this.trans = trans;
+        this.subscription = new Subscription();
+        this.translationFinished = false;
+    }
+    ngOnInit() {
+        this.url = window.location.href;
+        this.baseUrl = this.envService.environment.resourceUrl;
+        this.initTranslations(this.baseUrl);
+    }
+    initTranslations(baseUrl) {
+        if (this.trans.store.translations[this.trans.currentLang]) {
+            this.loadTranslation(baseUrl, this.trans.currentLang);
+        }
+        this.subscription.add(this.trans.onLangChange.subscribe((event) => {
+            this.translationFinished = false;
+            this.loadTranslation(baseUrl, event.lang);
+        }));
+    }
+    loadTranslation(baseUrl, lang) {
+        //TODO: Prepare for diffents lang then en sv (en-GB) or add more files in devcomponentserver :)
+        const url = baseUrl + `/assets/artportalen/i18n/${lang}.json`;
+        this.subscription.add(this.httpClient.get(url).subscribe(translations => {
+            this.trans.setTranslation(lang, translations, true);
+            this.translationFinished = true;
+        }));
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ArtportalenFooterComponent, deps: [{ token: i1.HttpClient }, { token: EnvironmentService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: ArtportalenFooterComponent, 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.artdatabanken.se/artportalen/\" class=\"d-block text-white mb-2\">{{'FOOTER.ABOUT'|translate}}</a>\r\n                    <a href=\"https://www.artdatabanken.se/artportalen-tillganglighetsredogorelse\" class=\"d-block text-white mb-2\">{{'FOOTER.WCAG'|translate}}</a>\r\n                    <a href=\"https://www.artdatabanken.se/om-oss/kontakt/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.artdatabanken.se/tjanster-och-miljodata/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.artdatabanken.se/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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ArtportalenFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'adb-artportalen-footer', template: "<footer class=\"bg-primary-dark py-2 mt-auto container-fluid\" *ngIf=\"translationFinished\">\r\n    <div class=\"d-flex justify-content-center\">\r\n        <div class=\"container py-3 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.artdatabanken.se/artportalen/\" class=\"d-block text-white mb-2\">{{'FOOTER.ABOUT'|translate}}</a>\r\n                    <a href=\"https://www.artdatabanken.se/artportalen-tillganglighetsredogorelse\" class=\"d-block text-white mb-2\">{{'FOOTER.WCAG'|translate}}</a>\r\n                    <a href=\"https://www.artdatabanken.se/om-oss/kontakt/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.artdatabanken.se/tjanster-och-miljodata/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.artdatabanken.se/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>" }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: EnvironmentService }, { type: i1$1.TranslateService }] });
 
-class ArtportalenNavModule {
-    static forRoot(environment) {
-        return {
-            ngModule: ArtportalenNavModule,
-            providers: [
-                EnvironmentService,
-                {
-                    provide: 'env',
-                    useValue: environment
-                }
-            ]
-        };
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ArtportalenNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ArtportalenNavModule, declarations: [ArtportalenNavComponent,
-            ArtportalenFooterComponent], imports: [CommonModule,
-            HttpClientModule,
-            RouterModule,
-            TranslateModule,
-            AdbDirectivesModule,
-            AdbDropdownModule,
-            AdbPagersModule], exports: [ArtportalenNavComponent,
-            ArtportalenFooterComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ArtportalenNavModule, imports: [CommonModule,
-            HttpClientModule,
-            RouterModule,
-            TranslateModule,
-            AdbDirectivesModule,
-            AdbDropdownModule,
-            AdbPagersModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ArtportalenNavModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        ArtportalenNavComponent,
-                        ArtportalenFooterComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        HttpClientModule,
-                        RouterModule,
-                        TranslateModule,
-                        AdbDirectivesModule,
-                        AdbDropdownModule,
-                        AdbPagersModule
-                    ],
-                    exports: [
-                        ArtportalenNavComponent,
-                        ArtportalenFooterComponent
-                    ]
-                }]
+class ArtportalenNavModule {
+    static forRoot(environment) {
+        return {
+            ngModule: ArtportalenNavModule,
+            providers: [
+                EnvironmentService,
+                {
+                    provide: 'env', // you can also use InjectionToken
+                    useValue: environment
+                }
+            ]
+        };
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ArtportalenNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: ArtportalenNavModule, declarations: [ArtportalenNavComponent,
+            ArtportalenFooterComponent], imports: [CommonModule,
+            RouterModule,
+            TranslateModule,
+            AdbDirectivesModule,
+            AdbDropdownModule,
+            AdbPagersModule], exports: [ArtportalenNavComponent,
+            ArtportalenFooterComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ArtportalenNavModule, providers: [provideHttpClient(withInterceptorsFromDi())], imports: [CommonModule,
+            RouterModule,
+            TranslateModule,
+            AdbDirectivesModule,
+            AdbDropdownModule,
+            AdbPagersModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ArtportalenNavModule, decorators: [{
+            type: NgModule,
+            args: [{ declarations: [
+                        ArtportalenNavComponent,
+                        ArtportalenFooterComponent
+                    ],
+                    exports: [
+                        ArtportalenNavComponent,
+                        ArtportalenFooterComponent
+                    ], imports: [CommonModule,
+                        RouterModule,
+                        TranslateModule,
+                        AdbDirectivesModule,
+                        AdbDropdownModule,
+                        AdbPagersModule], providers: [provideHttpClient(withInterceptorsFromDi())] }]
         }] });
 
-class LocaleDatePipe {
-    constructor(translate) {
-        this.translate = translate;
-    }
-    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: "16.2.12", ngImport: i0, type: LocaleDatePipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: LocaleDatePipe, name: "adbLocaleDate", pure: false }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocaleDatePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'adbLocaleDate',
-                    pure: false
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.TranslateService }]; } });
+class LocaleDatePipe {
+    constructor(translate) {
+        this.translate = translate;
+    }
+    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: "18.2.8", ngImport: i0, type: LocaleDatePipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: LocaleDatePipe, name: "adbLocaleDate", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: LocaleDatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'adbLocaleDate',
+                    pure: false
+                }]
+        }], ctorParameters: () => [{ type: i1$1.TranslateService }] });
 
-class EmptyValuePipe {
-    transform(value) {
-        if (!value) {
-            return '-';
-        }
-        if (value.trim() === '') {
-            return '-';
-        }
-        return value;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EmptyValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EmptyValuePipe, name: "adbEmptyValue" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EmptyValuePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'adbEmptyValue'
-                }]
+class EmptyValuePipe {
+    transform(value) {
+        if (!value) {
+            return '-';
+        }
+        if (value.trim() === '') {
+            return '-';
+        }
+        return value;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EmptyValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: EmptyValuePipe, name: "adbEmptyValue" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EmptyValuePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'adbEmptyValue'
+                }]
         }] });
 
-class HighlightPipe {
-    constructor() {
-        this.forbiddenSymbols = /[`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/;
-    }
-    transform(value, searchs) {
-        if (!value) {
-            return value;
-        }
-        value = value + '';
-        if (searchs) {
-            if (!Array.isArray(searchs)) {
-                searchs = searchs.split(' ').filter(s => s);
-            }
-            for (let search of searchs) {
-                if (this.forbiddenSymbols.test(search)) {
-                    search = search.replace(this.forbiddenSymbols, '');
-                }
-                const normalizedSearch = this.normalizeText(search);
-                const normalizedValue = this.normalizeText(value);
-                const start = normalizedValue ? normalizedValue.indexOf(normalizedSearch) : -1;
-                if (start !== -1) {
-                    const regex = new RegExp(`(${search})(?![^<]*>)`, 'gi');
-                    const match = value.match(regex);
-                    if (match) {
-                        value = value.replace(regex, '<mark>$1</mark>');
-                    }
-                }
-            }
-        }
-        return value;
-    }
-    normalizeText(text) {
-        return text?.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLocaleLowerCase();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: HighlightPipe, name: "adbHighlight" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HighlightPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'adbHighlight'
-                }]
+class HighlightPipe {
+    constructor() {
+        this.forbiddenSymbols = /[`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/;
+    }
+    transform(value, searchs) {
+        if (!value) {
+            return value;
+        }
+        value = value + '';
+        if (searchs) {
+            if (!Array.isArray(searchs)) {
+                searchs = searchs.split(' ').filter(s => s);
+            }
+            for (let search of searchs) {
+                if (this.forbiddenSymbols.test(search)) {
+                    search = search.replace(this.forbiddenSymbols, '');
+                }
+                const normalizedSearch = this.normalizeText(search);
+                const normalizedValue = this.normalizeText(value);
+                const start = normalizedValue ? normalizedValue.indexOf(normalizedSearch) : -1;
+                if (start !== -1) {
+                    const regex = new RegExp(`(${search})(?![^<]*>)`, 'gi');
+                    const match = value.match(regex);
+                    if (match) {
+                        value = value.replace(regex, '<mark>$1</mark>');
+                    }
+                }
+            }
+        }
+        return value;
+    }
+    normalizeText(text) {
+        return text?.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLocaleLowerCase();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: HighlightPipe, name: "adbHighlight" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HighlightPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'adbHighlight'
+                }]
         }] });
 
-class NumberSpacingPipe {
-    transform(value) {
-        // If value is empty, 0 is falsy so perform an extra check to not make '0' to an empty string
-        if (!value && value !== 0) {
-            return '';
-        }
-        return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumberSpacingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: NumberSpacingPipe, name: "adbSpacing", pure: false }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumberSpacingPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'adbSpacing',
-                    pure: false
-                }]
+class NumberSpacingPipe {
+    transform(value) {
+        // If value is empty, 0 is falsy so perform an extra check to not make '0' to an empty string
+        if (!value && value !== 0) {
+            return '';
+        }
+        return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: NumberSpacingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: NumberSpacingPipe, name: "adbSpacing", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: NumberSpacingPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'adbSpacing',
+                    pure: false
+                }]
         }] });
 
-class HighlightHtmlPipe {
-    constructor() {
-        this.forbiddenSymbols = /[`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/;
-    }
-    transform(value, searchs) {
-        if (!value) {
-            return value;
-        }
-        value = value + '';
-        if (searchs) {
-            if (!Array.isArray(searchs)) {
-                searchs = searchs.split(' ').filter(s => s);
-            }
-            for (let search of searchs) {
-                if (this.forbiddenSymbols.test(search)) {
-                    search = search.replace(this.forbiddenSymbols, '');
-                }
-                const normalizedSearch = this.normalizeText(search);
-                const normalizedValue = this.normalizeText(value);
-                const start = normalizedValue ? normalizedValue.indexOf(normalizedSearch) : -1;
-                if (start !== -1) {
-                    const regex = new RegExp(`([^<\\w]|^)(${this.escapeRegExp(search)})(?![^<]*>)`, 'gi');
-                    value = value.replace(regex, '$1<mark>$2</mark>');
-                }
-            }
-        }
-        return value;
-    }
-    normalizeText(text) {
-        return text?.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLocaleLowerCase();
-    }
-    escapeRegExp(text) {
-        return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HighlightHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: HighlightHtmlPipe, name: "adbHighlightHtml" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HighlightHtmlPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'adbHighlightHtml'
-                }]
+class HighlightHtmlPipe {
+    constructor() {
+        this.forbiddenSymbols = /[`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/;
+    }
+    transform(value, searchs) {
+        if (!value) {
+            return value;
+        }
+        value = value + '';
+        if (searchs) {
+            if (!Array.isArray(searchs)) {
+                searchs = searchs.split(' ').filter(s => s);
+            }
+            for (let search of searchs) {
+                if (this.forbiddenSymbols.test(search)) {
+                    search = search.replace(this.forbiddenSymbols, '');
+                }
+                const normalizedSearch = this.normalizeText(search);
+                const normalizedValue = this.normalizeText(value);
+                const start = normalizedValue ? normalizedValue.indexOf(normalizedSearch) : -1;
+                if (start !== -1) {
+                    const regex = new RegExp(`([^<\\w]|^)(${this.escapeRegExp(search)})(?![^<]*>)`, 'gi');
+                    value = value.replace(regex, '$1<mark>$2</mark>');
+                }
+            }
+        }
+        return value;
+    }
+    normalizeText(text) {
+        return text?.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLocaleLowerCase();
+    }
+    escapeRegExp(text) {
+        return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HighlightHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: HighlightHtmlPipe, name: "adbHighlightHtml" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HighlightHtmlPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'adbHighlightHtml'
+                }]
         }] });
 
-class AdbPipesModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbPipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", 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: "16.2.12", ngImport: i0, type: AdbPipesModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbPipesModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [],
-                    declarations: [HighlightPipe, HighlightHtmlPipe, NumberSpacingPipe, LocaleDatePipe, EmptyValuePipe],
-                    exports: [HighlightPipe, HighlightHtmlPipe, NumberSpacingPipe, LocaleDatePipe, EmptyValuePipe]
-                }]
+class RichPipe {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    transform(value, baseUrl) {
+        if (!value) {
+            return '';
+        }
+        const htmlContent = this.parseCustomMarkdown(value, baseUrl);
+        return this.sanitizer.bypassSecurityTrustHtml(htmlContent);
+    }
+    parseCustomMarkdown(input, baseUrl) {
+        const italicRegex = /_([^_]+)_/g;
+        const taxonRegex = /\[([^\]]+)\]\(taxon:([^)]+)\)/g;
+        const termRegex = /\[([^\]]+)\]\(term:([^)]+)\)/g;
+        const referenceRegex = /\[([^\]]+)\]\(reference:([^)]+)\)/g;
+        // Replace patterns with HTML tags and use baseUrl if needed
+        input = input.replace(italicRegex, '<em>$1</em>');
+        input = input.replace(taxonRegex, `<a href="${baseUrl}/taxa/$2" class="taxon">$1</a>`);
+        input = input.replace(termRegex, `<span> class="term">$1</span>`);
+        input = input.replace(referenceRegex, `<span> class="term">$1</span>`);
+        return input;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RichPipe, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: RichPipe, name: "rich" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RichPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'rich'
+                }]
+        }], ctorParameters: () => [{ type: i1$2.DomSanitizer }] });
+
+class AdbPipesModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbPipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: AdbPipesModule, declarations: [RichPipe, HighlightPipe, HighlightHtmlPipe, NumberSpacingPipe, LocaleDatePipe, EmptyValuePipe], exports: [RichPipe, HighlightPipe, HighlightHtmlPipe, NumberSpacingPipe, LocaleDatePipe, EmptyValuePipe] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbPipesModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbPipesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    declarations: [RichPipe, HighlightPipe, HighlightHtmlPipe, NumberSpacingPipe, LocaleDatePipe, EmptyValuePipe],
+                    exports: [RichPipe, HighlightPipe, HighlightHtmlPipe, NumberSpacingPipe, LocaleDatePipe, EmptyValuePipe]
+                }]
         }] });
 
-class AdbDatePickerComponent {
-    static { this.MONTHS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; }
-    static { this.WEEK_DAYS = ['1', '2', '3', '4', '5', '6', '7']; }
-    static { this.YEAR_INTERVALL = 8; }
-    ;
-    constructor(elementRef, translate) {
-        this.elementRef = elementRef;
-        this.translate = translate;
-        this.subscriptions = new Subscription();
-        this.currentdDate = new Date();
-        this.selectedDate = new Date();
-        this.weekDays = AdbDatePickerComponent.WEEK_DAYS;
-        this.noYearMode = false;
-        this.selectDate = new EventEmitter();
-    }
-    ngOnInit() {
-        if (this.settings) {
-            if (this.settings?.minDate || this.settings?.maxDate) {
-                const minDate = AdbDatePickerComponent.parseDate(this.settings.minDate);
-                const maxDate = AdbDatePickerComponent.parseDate(this.settings.maxDate);
-                this.range = {
-                    start: minDate ? startOfDay(minDate) : subYears(new Date(), 1000),
-                    end: maxDate ? endOfDay(maxDate) : addYears(new Date(), 1000)
-                };
-            }
-            if (this.settings.noYear) {
-                this.noYearMode = this.settings.noYear;
-            }
-        }
-        this.selectedDate = this.currentdDate = this.initialDate ?? new Date();
-        this.currentMonth = getMonth(this.selectedDate);
-        this.createCalendar();
-    }
-    onShowYear() {
-        this.months = null;
-        this.loadYearsInterval();
-    }
-    onShowMonth() {
-        this.years = null;
-        this.loadMonths();
-    }
-    onSelectYear(inYear) {
-        this.selectedDate.setFullYear(inYear.getFullYear());
-        this.loadMonths();
-        this.years = null;
-    }
-    onSelectMonth(inMonth) {
-        this.selectedDate.setMonth(inMonth);
-        this.currentMonth = getMonth(this.selectedDate);
-        this.createCalendar();
-        this.years = null;
-        this.months = null;
-    }
-    onPrev() {
-        if (this.years) {
-            this.selectedDate = subYears(this.selectedDate, AdbDatePickerComponent.YEAR_INTERVALL);
-            this.loadYearsInterval();
-        }
-        else if (this.months) {
-            this.selectedDate = subYears(this.selectedDate, 1);
-            this.loadMonths();
-        }
-        else {
-            this.selectedDate = subMonths(this.selectedDate, 1);
-            this.createCalendar();
-        }
-        this.currentMonth = getMonth(this.selectedDate);
-    }
-    onNext() {
-        if (this.years) {
-            this.selectedDate = addYears(this.selectedDate, AdbDatePickerComponent.YEAR_INTERVALL);
-            this.loadYearsInterval();
-        }
-        else if (this.months) {
-            this.selectedDate = addYears(this.selectedDate, 1);
-            this.loadMonths();
-        }
-        else {
-            this.selectedDate = addMonths(this.selectedDate, 1);
-            this.createCalendar();
-        }
-        this.currentMonth = getMonth(this.selectedDate);
-    }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
-    }
-    loadMonths() {
-        this.months = AdbDatePickerComponent.MONTHS.map(x => {
-            return {
-                value: x,
-                isThisMonth: getMonth(this.selectedDate) === x && isSameYear(this.currentdDate, this.selectedDate)
-            };
-        });
-    }
-    loadYearsInterval() {
-        let year = subYears(this.selectedDate, AdbDatePickerComponent.YEAR_INTERVALL);
-        const years = [];
-        for (let i = 0; i < 16; i++) {
-            years.push({
-                value: year,
-                title: year.getFullYear(),
-                isThisYear: isSameYear(year, this.currentdDate)
-            });
-            year = addYears(year, 1);
-        }
-        this.years = years;
-    }
-    onSelectDate(day) {
-        this.selectDate.emit(day.value);
-    }
-    createCalendar() {
-        const weeks = [];
-        const monthInterval = { start: startOfMonth(this.selectedDate), end: endOfMonth(this.selectedDate) };
-        var fnsWweeks = eachWeekOfInterval(monthInterval, { weekStartsOn: this.translate.currentLang === 'sv' || this.translate.currentLang === 'sv-SE' ? 1 : 0 });
-        for (const fnsWeek of fnsWweeks) {
-            const week = { weekNumber: 0, days: [] };
-            week.weekNumber = getISOWeek(new Date(fnsWeek));
-            const weekInterval = { start: new Date(fnsWeek), end: addDays(new Date(fnsWeek), 6) };
-            week.days = eachDayOfInterval(weekInterval).map(day => {
-                day.setHours(getHours(new Date()));
-                day.setMinutes(getMinutes(new Date()));
-                return {
-                    value: day,
-                    isSelected: isSameYear(day, this.initialDate) && isSameDay(day, this.initialDate) && isSameMonth(day, this.initialDate),
-                    isInRange: this.range ? isWithinInterval(day, this.range) : true,
-                    isToday: isSameDay(day, new Date()),
-                    inMonth: monthInterval.start.getMonth() === day.getMonth()
-                };
-            });
-            weeks.push(week);
-        }
-        this.weeks = weeks;
-    }
-    static parseDate(value) {
-        if (typeof value === 'string') {
-            if (isValid(parseISO(value))) {
-                return parseISO(value);
-            }
-            else {
-                return null;
-            }
-        }
-        else if (value instanceof Date) {
-            return value;
-        }
-        else {
-            return null;
-        }
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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: "16.2.12", type: AdbDatePickerComponent, 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\" style=\"width:350px\">\r\n        <header class=\"bg-primary p-2 rounded-top d-flex justify-content-between align-items-center gap-1\">\r\n            <button tabIndex=\"-1\" class=\"btn btn-primary text-white  rounded-pill\" type=\"button\" (click)=\"onPrev()\" [disabled]=\"noYearMode&&currentMonth===0\"><span class=\"fa fa-chevron-left\"></span></button>\r\n            <ng-container *ngIf=\"!years&&!months\">\r\n                <button tabIndex=\"-1\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowMonth();$event.stopPropagation()\">{{selectedDate|adbLocaleDate:'MMM'}}</button>\r\n                <button *ngIf=\"!noYearMode\" tabIndex=\"-1\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowYear();$event.stopPropagation()\">{{selectedDate|date:'yyyy'}}</button>\r\n            </ng-container>\r\n            <button tabIndex=\"-1\" *ngIf=\"years\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"years=null;$event.stopPropagation()\">{{years[0].title}} - {{years[years.length-1].title}}</button>\r\n            <button tabIndex=\"-1\" *ngIf=\"months\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowYear();$event.stopPropagation()\">{{selectedDate|date:'yyyy'}}</button>\r\n            <button tabIndex=\"-1\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onNext()\" [disabled]=\"noYearMode&&currentMonth===11\"><span class=\"fa fa-chevron-right\"></span></button>\r\n        </header>\r\n        <div class=\"p-0 border calendar\">\r\n            <ul class=\"list-unstyled row\" *ngIf=\"years\">\r\n                <li class=\"col-3 text-center px-2 py-3\" *ngFor=\"let year of years\">\r\n                    <button type=\"button\" tabIndex=\"-1\" class=\"btn btn-sm btn-outline-secondary rounded-pill\" (click)=\"onSelectYear(year.value);$event.stopPropagation()\" [class.active]=\"year.hasObservation\" [ngClass]=\"{'border border-secondary':year.isThisYear}\">{{year.title}}</button>\r\n                </li>\r\n            </ul>\r\n            <ul class=\"list-unstyled row\" *ngIf=\"months\">\r\n                <li class=\"col-4 text-center px-2 py-3\" *ngFor=\"let month of months\">\r\n                    <button type=\"button\" tabIndex=\"-1\" class=\"btn btn-sm btn-outline-secondary rounded-pill\" (click)=\"onSelectMonth(month.value);$event.stopPropagation()\" [class.active]=\"month.observation\" [ngClass]=\"{'border border-secondary':month.isThisMonth}\">\r\n                        {{'MONTHS.'+(month.value+1)|translate}}\r\n                    </button>\r\n                </li>\r\n            </ul>\r\n            <div class=\"days\" *ngIf=\"!years&&!months\">\r\n                <div class=\"text-center border-bottom py-2 text-muted\" *ngFor=\"let weekDay of weekDays\">{{'WEEK_DAYS.'+weekDay|translate}}</div>\r\n                <ng-container *ngFor=\"let week of weeks\">\r\n                    <button tabIndex=\"-1\" class=\"btn rounded-circle p-0 m-2\" *ngFor=\"let day of week.days\" (click)=\"onSelectDate(day)\" type=\"button\" \r\n                        [class.border]=\"day.isToday\" [class.bg-primary]=\"day.isSelected\" [class.text-white]=\"day.isSelected\" [ngClass]=\"{'pe-none text-muted opacity-50':!day.inMonth||!day.isInRange}\">\r\n                        <small>{{day.value|date:'d'}}</small>\r\n                    </button>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </nav>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleDatePipe, name: "adbLocaleDate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbDatePickerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'adb-date-picker', template: "<div class=\"position-relative\" [class.to-left]=\"toLeft\">\r\n    <nav class=\"bg-white shadow rounded position-absolute\" style=\"width:350px\">\r\n        <header class=\"bg-primary p-2 rounded-top d-flex justify-content-between align-items-center gap-1\">\r\n            <button tabIndex=\"-1\" class=\"btn btn-primary text-white  rounded-pill\" type=\"button\" (click)=\"onPrev()\" [disabled]=\"noYearMode&&currentMonth===0\"><span class=\"fa fa-chevron-left\"></span></button>\r\n            <ng-container *ngIf=\"!years&&!months\">\r\n                <button tabIndex=\"-1\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowMonth();$event.stopPropagation()\">{{selectedDate|adbLocaleDate:'MMM'}}</button>\r\n                <button *ngIf=\"!noYearMode\" tabIndex=\"-1\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowYear();$event.stopPropagation()\">{{selectedDate|date:'yyyy'}}</button>\r\n            </ng-container>\r\n            <button tabIndex=\"-1\" *ngIf=\"years\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"years=null;$event.stopPropagation()\">{{years[0].title}} - {{years[years.length-1].title}}</button>\r\n            <button tabIndex=\"-1\" *ngIf=\"months\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowYear();$event.stopPropagation()\">{{selectedDate|date:'yyyy'}}</button>\r\n            <button tabIndex=\"-1\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onNext()\" [disabled]=\"noYearMode&&currentMonth===11\"><span class=\"fa fa-chevron-right\"></span></button>\r\n        </header>\r\n        <div class=\"p-0 border calendar\">\r\n            <ul class=\"list-unstyled row\" *ngIf=\"years\">\r\n                <li class=\"col-3 text-center px-2 py-3\" *ngFor=\"let year of years\">\r\n                    <button type=\"button\" tabIndex=\"-1\" class=\"btn btn-sm btn-outline-secondary rounded-pill\" (click)=\"onSelectYear(year.value);$event.stopPropagation()\" [class.active]=\"year.hasObservation\" [ngClass]=\"{'border border-secondary':year.isThisYear}\">{{year.title}}</button>\r\n                </li>\r\n            </ul>\r\n            <ul class=\"list-unstyled row\" *ngIf=\"months\">\r\n                <li class=\"col-4 text-center px-2 py-3\" *ngFor=\"let month of months\">\r\n                    <button type=\"button\" tabIndex=\"-1\" class=\"btn btn-sm btn-outline-secondary rounded-pill\" (click)=\"onSelectMonth(month.value);$event.stopPropagation()\" [class.active]=\"month.observation\" [ngClass]=\"{'border border-secondary':month.isThisMonth}\">\r\n                        {{'MONTHS.'+(month.value+1)|translate}}\r\n                    </button>\r\n                </li>\r\n            </ul>\r\n            <div class=\"days\" *ngIf=\"!years&&!months\">\r\n                <div class=\"text-center border-bottom py-2 text-muted\" *ngFor=\"let weekDay of weekDays\">{{'WEEK_DAYS.'+weekDay|translate}}</div>\r\n                <ng-container *ngFor=\"let week of weeks\">\r\n                    <button tabIndex=\"-1\" class=\"btn rounded-circle p-0 m-2\" *ngFor=\"let day of week.days\" (click)=\"onSelectDate(day)\" type=\"button\" \r\n                        [class.border]=\"day.isToday\" [class.bg-primary]=\"day.isSelected\" [class.text-white]=\"day.isSelected\" [ngClass]=\"{'pe-none text-muted opacity-50':!day.inMonth||!day.isInRange}\">\r\n                        <small>{{day.value|date:'d'}}</small>\r\n                    </button>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </nav>\r\n</div>\r\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.TranslateService }]; }, propDecorators: { initialDate: [{
-                type: Input
-            }], settings: [{
-                type: Input
-            }], toLeft: [{
-                type: Input
-            }], id: [{
-                type: HostBinding,
-                args: ['id']
-            }, {
-                type: Input
-            }], selectDate: [{
-                type: Output
+class AdbDatePickerComponent {
+    static { this.MONTHS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; }
+    static { this.WEEK_DAYS = ['1', '2', '3', '4', '5', '6', '7']; }
+    static { this.YEAR_INTERVALL = 8; }
+    ;
+    constructor(elementRef, translate) {
+        this.elementRef = elementRef;
+        this.translate = translate;
+        this.subscriptions = new Subscription();
+        this.currentdDate = new Date();
+        this.selectedDate = new Date();
+        this.weekDays = AdbDatePickerComponent.WEEK_DAYS;
+        this.noYearMode = false;
+        this.selectDate = new EventEmitter();
+    }
+    ngOnInit() {
+        if (this.settings) {
+            if (this.settings?.minDate || this.settings?.maxDate) {
+                const minDate = AdbDatePickerComponent.parseDate(this.settings.minDate);
+                const maxDate = AdbDatePickerComponent.parseDate(this.settings.maxDate);
+                this.range = {
+                    start: minDate ? startOfDay(minDate) : subYears(new Date(), 1000),
+                    end: maxDate ? endOfDay(maxDate) : addYears(new Date(), 1000)
+                };
+            }
+            if (this.settings.noYear) {
+                this.noYearMode = this.settings.noYear;
+            }
+        }
+        this.selectedDate = this.currentdDate = this.initialDate ?? new Date();
+        this.currentMonth = getMonth(this.selectedDate);
+        this.createCalendar();
+    }
+    onShowYear() {
+        this.months = null;
+        this.loadYearsInterval();
+    }
+    onShowMonth() {
+        this.years = null;
+        this.loadMonths();
+    }
+    onSelectYear(inYear) {
+        this.selectedDate.setFullYear(inYear.getFullYear());
+        this.loadMonths();
+        this.years = null;
+    }
+    onSelectMonth(inMonth) {
+        this.selectedDate.setMonth(inMonth);
+        this.currentMonth = getMonth(this.selectedDate);
+        this.createCalendar();
+        this.years = null;
+        this.months = null;
+    }
+    onPrev() {
+        if (this.years) {
+            this.selectedDate = subYears(this.selectedDate, AdbDatePickerComponent.YEAR_INTERVALL);
+            this.loadYearsInterval();
+        }
+        else if (this.months) {
+            this.selectedDate = subYears(this.selectedDate, 1);
+            this.loadMonths();
+        }
+        else {
+            this.selectedDate = subMonths(this.selectedDate, 1);
+            this.createCalendar();
+        }
+        this.currentMonth = getMonth(this.selectedDate);
+    }
+    onNext() {
+        if (this.years) {
+            this.selectedDate = addYears(this.selectedDate, AdbDatePickerComponent.YEAR_INTERVALL);
+            this.loadYearsInterval();
+        }
+        else if (this.months) {
+            this.selectedDate = addYears(this.selectedDate, 1);
+            this.loadMonths();
+        }
+        else {
+            this.selectedDate = addMonths(this.selectedDate, 1);
+            this.createCalendar();
+        }
+        this.currentMonth = getMonth(this.selectedDate);
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    loadMonths() {
+        this.months = AdbDatePickerComponent.MONTHS.map(x => {
+            return {
+                value: x,
+                isThisMonth: getMonth(this.selectedDate) === x && isSameYear(this.currentdDate, this.selectedDate)
+            };
+        });
+    }
+    loadYearsInterval() {
+        let year = subYears(this.selectedDate, AdbDatePickerComponent.YEAR_INTERVALL);
+        const years = [];
+        for (let i = 0; i < 16; i++) {
+            years.push({
+                value: year,
+                title: year.getFullYear(),
+                isThisYear: isSameYear(year, this.currentdDate)
+            });
+            year = addYears(year, 1);
+        }
+        this.years = years;
+    }
+    onSelectDate(day) {
+        this.selectDate.emit(day.value);
+    }
+    createCalendar() {
+        const weeks = [];
+        const monthInterval = { start: startOfMonth(this.selectedDate), end: endOfMonth(this.selectedDate) };
+        var fnsWweeks = eachWeekOfInterval(monthInterval, { weekStartsOn: this.translate.currentLang === 'sv' || this.translate.currentLang === 'sv-SE' ? 1 : 0 });
+        for (const fnsWeek of fnsWweeks) {
+            const week = { weekNumber: 0, days: [] };
+            week.weekNumber = getISOWeek(new Date(fnsWeek));
+            const weekInterval = { start: new Date(fnsWeek), end: addDays(new Date(fnsWeek), 6) };
+            week.days = eachDayOfInterval(weekInterval).map(day => {
+                day.setHours(getHours(new Date()));
+                day.setMinutes(getMinutes(new Date()));
+                return {
+                    value: day,
+                    isSelected: isSameYear(day, this.initialDate) && isSameDay(day, this.initialDate) && isSameMonth(day, this.initialDate),
+                    isInRange: this.range ? isWithinInterval(day, this.range) : true,
+                    isToday: isSameDay(day, new Date()),
+                    inMonth: monthInterval.start.getMonth() === day.getMonth()
+                };
+            });
+            weeks.push(week);
+        }
+        this.weeks = weeks;
+    }
+    static parseDate(value) {
+        if (typeof value === 'string') {
+            if (isValid(parseISO(value))) {
+                return parseISO(value);
+            }
+            else {
+                return null;
+            }
+        }
+        else if (value instanceof Date) {
+            return value;
+        }
+        else {
+            return null;
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", 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: "18.2.8", type: AdbDatePickerComponent, 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\" style=\"width:350px\">\r\n        <header class=\"bg-primary p-2 rounded-top d-flex justify-content-between align-items-center gap-1\">\r\n            <button tabIndex=\"-1\" class=\"btn btn-primary text-white  rounded-pill\" type=\"button\" (click)=\"onPrev()\" [disabled]=\"noYearMode&&currentMonth===0\"><span class=\"fa fa-chevron-left\"></span></button>\r\n            <ng-container *ngIf=\"!years&&!months\">\r\n                <button tabIndex=\"-1\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowMonth();$event.stopPropagation()\">{{selectedDate|adbLocaleDate:'MMM'}}</button>\r\n                <button *ngIf=\"!noYearMode\" tabIndex=\"-1\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowYear();$event.stopPropagation()\">{{selectedDate|date:'yyyy'}}</button>\r\n            </ng-container>\r\n            <button tabIndex=\"-1\" *ngIf=\"years\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"years=null;$event.stopPropagation()\">{{years[0].title}} - {{years[years.length-1].title}}</button>\r\n            <button tabIndex=\"-1\" *ngIf=\"months\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowYear();$event.stopPropagation()\">{{selectedDate|date:'yyyy'}}</button>\r\n            <button tabIndex=\"-1\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onNext()\" [disabled]=\"noYearMode&&currentMonth===11\"><span class=\"fa fa-chevron-right\"></span></button>\r\n        </header>\r\n        <div class=\"p-0 border calendar\">\r\n            <ul class=\"list-unstyled row\" *ngIf=\"years\">\r\n                <li class=\"col-3 text-center px-2 py-3\" *ngFor=\"let year of years\">\r\n                    <button type=\"button\" tabIndex=\"-1\" class=\"btn btn-sm btn-outline-secondary rounded-pill\" (click)=\"onSelectYear(year.value);$event.stopPropagation()\" [class.active]=\"year.hasObservation\" [ngClass]=\"{'border border-secondary':year.isThisYear}\">{{year.title}}</button>\r\n                </li>\r\n            </ul>\r\n            <ul class=\"list-unstyled row\" *ngIf=\"months\">\r\n                <li class=\"col-4 text-center px-2 py-3\" *ngFor=\"let month of months\">\r\n                    <button type=\"button\" tabIndex=\"-1\" class=\"btn btn-sm btn-outline-secondary rounded-pill\" (click)=\"onSelectMonth(month.value);$event.stopPropagation()\" [class.active]=\"month.observation\" [ngClass]=\"{'border border-secondary':month.isThisMonth}\">\r\n                        {{'MONTHS.'+(month.value+1)|translate}}\r\n                    </button>\r\n                </li>\r\n            </ul>\r\n            <div class=\"days\" *ngIf=\"!years&&!months\">\r\n                <div class=\"text-center border-bottom py-2 text-muted\" *ngFor=\"let weekDay of weekDays\">{{'WEEK_DAYS.'+weekDay|translate}}</div>\r\n                <ng-container *ngFor=\"let week of weeks\">\r\n                    <button tabIndex=\"-1\" class=\"btn rounded-circle p-0 m-2\" *ngFor=\"let day of week.days\" (click)=\"onSelectDate(day)\" type=\"button\" \r\n                        [class.border]=\"day.isToday\" [class.bg-primary]=\"day.isSelected\" [class.text-white]=\"day.isSelected\" [ngClass]=\"{'pe-none text-muted opacity-50':!day.inMonth||!day.isInRange}\">\r\n                        <small>{{day.value|date:'d'}}</small>\r\n                    </button>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </nav>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleDatePipe, name: "adbLocaleDate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbDatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'adb-date-picker', template: "<div class=\"position-relative\" [class.to-left]=\"toLeft\">\r\n    <nav class=\"bg-white shadow rounded position-absolute\" style=\"width:350px\">\r\n        <header class=\"bg-primary p-2 rounded-top d-flex justify-content-between align-items-center gap-1\">\r\n            <button tabIndex=\"-1\" class=\"btn btn-primary text-white  rounded-pill\" type=\"button\" (click)=\"onPrev()\" [disabled]=\"noYearMode&&currentMonth===0\"><span class=\"fa fa-chevron-left\"></span></button>\r\n            <ng-container *ngIf=\"!years&&!months\">\r\n                <button tabIndex=\"-1\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowMonth();$event.stopPropagation()\">{{selectedDate|adbLocaleDate:'MMM'}}</button>\r\n                <button *ngIf=\"!noYearMode\" tabIndex=\"-1\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowYear();$event.stopPropagation()\">{{selectedDate|date:'yyyy'}}</button>\r\n            </ng-container>\r\n            <button tabIndex=\"-1\" *ngIf=\"years\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"years=null;$event.stopPropagation()\">{{years[0].title}} - {{years[years.length-1].title}}</button>\r\n            <button tabIndex=\"-1\" *ngIf=\"months\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowYear();$event.stopPropagation()\">{{selectedDate|date:'yyyy'}}</button>\r\n            <button tabIndex=\"-1\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onNext()\" [disabled]=\"noYearMode&&currentMonth===11\"><span class=\"fa fa-chevron-right\"></span></button>\r\n        </header>\r\n        <div class=\"p-0 border calendar\">\r\n            <ul class=\"list-unstyled row\" *ngIf=\"years\">\r\n                <li class=\"col-3 text-center px-2 py-3\" *ngFor=\"let year of years\">\r\n                    <button type=\"button\" tabIndex=\"-1\" class=\"btn btn-sm btn-outline-secondary rounded-pill\" (click)=\"onSelectYear(year.value);$event.stopPropagation()\" [class.active]=\"year.hasObservation\" [ngClass]=\"{'border border-secondary':year.isThisYear}\">{{year.title}}</button>\r\n                </li>\r\n            </ul>\r\n            <ul class=\"list-unstyled row\" *ngIf=\"months\">\r\n                <li class=\"col-4 text-center px-2 py-3\" *ngFor=\"let month of months\">\r\n                    <button type=\"button\" tabIndex=\"-1\" class=\"btn btn-sm btn-outline-secondary rounded-pill\" (click)=\"onSelectMonth(month.value);$event.stopPropagation()\" [class.active]=\"month.observation\" [ngClass]=\"{'border border-secondary':month.isThisMonth}\">\r\n                        {{'MONTHS.'+(month.value+1)|translate}}\r\n                    </button>\r\n                </li>\r\n            </ul>\r\n            <div class=\"days\" *ngIf=\"!years&&!months\">\r\n                <div class=\"text-center border-bottom py-2 text-muted\" *ngFor=\"let weekDay of weekDays\">{{'WEEK_DAYS.'+weekDay|translate}}</div>\r\n                <ng-container *ngFor=\"let week of weeks\">\r\n                    <button tabIndex=\"-1\" class=\"btn rounded-circle p-0 m-2\" *ngFor=\"let day of week.days\" (click)=\"onSelectDate(day)\" type=\"button\" \r\n                        [class.border]=\"day.isToday\" [class.bg-primary]=\"day.isSelected\" [class.text-white]=\"day.isSelected\" [ngClass]=\"{'pe-none text-muted opacity-50':!day.inMonth||!day.isInRange}\">\r\n                        <small>{{day.value|date:'d'}}</small>\r\n                    </button>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </nav>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.TranslateService }], propDecorators: { initialDate: [{
+                type: Input
+            }], settings: [{
+                type: Input
+            }], toLeft: [{
+                type: Input
+            }], id: [{
+                type: HostBinding,
+                args: ['id']
+            }, {
+                type: Input
+            }], selectDate: [{
+                type: Output
             }] } });
 
-class AdbDatePickerService {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbDatePickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbDatePickerService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbDatePickerService, decorators: [{
-            type: Injectable
+class AdbDatePickerService {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbDatePickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbDatePickerService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbDatePickerService, decorators: [{
+            type: Injectable
         }] });
 
-class AdbDatePickerDirective {
-    constructor(viewContainerRef, renderer, elementRef, adbDatePickerService, translate) {
-        this.viewContainerRef = viewContainerRef;
-        this.renderer = renderer;
-        this.elementRef = elementRef;
-        this.adbDatePickerService = adbDatePickerService;
-        this.translate = translate;
-        this.subscriptions = new Subscription();
-        this.autocomplete = 'off';
-        this.adbBlur = new EventEmitter();
-        this.format = 'yyyy-MM-dd';
-        this.settings = null;
-        this.onValidationChange = () => { };
-        //ControlValueAccessor
-        this.onChange = () => { };
-        this.onTouched = () => { };
-    }
-    ngOnInit() {
-        this.elementRef.nativeElement.setAttribute("placeholder", this.format);
-    }
-    onClick() {
-        if (this.adbDatePickerService.viewRef) {
-            this.adbDatePickerService.viewRef.destroy();
-        }
-        const viewRef = this.viewContainerRef.createComponent(AdbDatePickerComponent);
-        viewRef.instance.settings = this.settings;
-        viewRef.instance.toLeft = this.toLeft;
-        viewRef.instance.initialDate = this.currentDate;
-        this.id = this.getId();
-        viewRef.instance.id = this.id;
-        viewRef.instance.selectDate.subscribe((date) => {
-            this.renderer.setProperty(this.elementRef.nativeElement, 'value', formatDate(date, this.format, this.translate.currentLang));
-            this.onChange(date);
-            this.currentDate = date;
-            this.onHide();
-            this.adbBlur.emit(date);
-        });
-        this.adbDatePickerService.viewRef = viewRef;
-    }
-    onKeyup(event) {
-        const date = AdbDatePickerDirective.tryParse(event.target.value);
-        if (date) {
-            const now = new Date();
-            date.setHours(now.getHours());
-            date.setMinutes(now.getMinutes());
-            date.setSeconds(now.getSeconds());
-            this.onChange(date);
-        }
-        else {
-            this.onChange(event.target.value); //send inccorect values to form
-        }
-    }
-    onTabDown() {
-        this.updateValueOnLeave();
-        this.onHide();
-        this.adbBlur.emit(this.currentDate);
-    }
-    onEscdOWN() {
-        this.updateValueOnLeave();
-        this.onHide();
-    }
-    onHide() {
-        this.adbDatePickerService.viewRef = null;
-        this.viewContainerRef.detach();
-        this.viewContainerRef.clear();
-    }
-    onCheckOutSideClick(target) {
-        const nativeElement = this.adbDatePickerService.viewRef?.instance.elementRef.nativeElement ?? null;
-        if (nativeElement) {
-            if (nativeElement.id === this.id) {
-                if (!target.hasAttribute('adbdatepicker')) {
-                    const clickedInside = nativeElement.contains(target);
-                    if (!clickedInside) {
-                        this.updateValueOnLeave();
-                        this.onHide();
-                        this.adbBlur.emit(this.currentDate);
-                    }
-                }
-            }
-        }
-    }
-    updateValueOnLeave() {
-        if (this.isValid) {
-            if (this.currentDate) {
-                this.renderer.setProperty(this.elementRef.nativeElement, 'value', formatDate(this.currentDate, this.format, this.translate.currentLang));
-            }
-            else {
-                this.renderer.setProperty(this.elementRef.nativeElement, 'value', '');
-            }
-        }
-    }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
-    }
-    //Validator
-    validate(control) {
-        const value = control.value;
-        if (!value) {
-            this.currentDate = null;
-            this.isValid = true;
-            return null;
-        }
-        if (value instanceof Date) {
-            this.currentDate = value;
-            this.isValid = true;
-            return null;
-        }
-        if (typeof value === 'string' || value instanceof String) {
-            const date = AdbDatePickerDirective.tryParse(value);
-            if (!date) {
-                this.isValid = false;
-                return { date: true };
-            }
-        }
-        this.isValid = true;
-        return null;
-    }
-    registerOnValidatorChange(fn) {
-        this.onValidationChange = fn;
-    }
-    writeValue(value) {
-        if (!value) {
-            this.currentDate = null;
-            this.renderer.setProperty(this.elementRef.nativeElement, 'value', '');
-            return;
-        }
-        if (typeof value === 'string' || value instanceof String) {
-            const date = AdbDatePickerDirective.tryParse(value);
-            if (!date) {
-                this.renderer.setProperty(this.elementRef.nativeElement, 'value', value);
-                return;
-            }
-            value = date;
-        }
-        if (value instanceof Date) {
-            this.currentDate = value;
-            this.renderer.setProperty(this.elementRef.nativeElement, 'value', formatDate(this.currentDate, this.format, this.translate.currentLang));
-        }
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.viewContainerRef.clear();
-    }
-    static tryParse(dateString) {
-        const parsed = parseISO(dateString);
-        return isValid(parsed) ? parsed : null;
-    }
-    getId() {
-        return '' + Math.floor(Math.random() * Date.now());
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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: "16.2.12", type: AdbDatePickerDirective, 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
-            },
-            {
-                provide: NG_VALIDATORS,
-                useExisting: AdbDatePickerDirective,
-                multi: true,
-            },], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbDatePickerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: `input[adbDatepicker]`,
-                    providers: [{
-                            provide: NG_VALUE_ACCESSOR, useExisting: forwardRef((() => AdbDatePickerDirective)),
-                            multi: true
-                        },
-                        {
-                            provide: NG_VALIDATORS,
-                            useExisting: AdbDatePickerDirective,
-                            multi: true,
-                        },]
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: AdbDatePickerService }, { type: i1$1.TranslateService }]; }, propDecorators: { autocomplete: [{
-                type: HostBinding,
-                args: ['autocomplete']
-            }], adbBlur: [{
-                type: Output
-            }], format: [{
-                type: Input
-            }], toLeft: [{
-                type: Input
-            }], settings: [{
-                type: Input
-            }], onClick: [{
-                type: HostListener,
-                args: ['click']
-            }], onKeyup: [{
-                type: HostListener,
-                args: ['keyup', ['$event']]
-            }], onTabDown: [{
-                type: HostListener,
-                args: ['keydown.shift.tab']
-            }, {
-                type: HostListener,
-                args: ['keydown.tab']
-            }], onEscdOWN: [{
-                type: HostListener,
-                args: ['keydown.esc']
-            }], onCheckOutSideClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event.target']]
+class AdbDatePickerDirective {
+    constructor(viewContainerRef, renderer, elementRef, adbDatePickerService, translate) {
+        this.viewContainerRef = viewContainerRef;
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+        this.adbDatePickerService = adbDatePickerService;
+        this.translate = translate;
+        this.subscriptions = new Subscription();
+        this.autocomplete = 'off';
+        this.adbBlur = new EventEmitter();
+        this.format = 'yyyy-MM-dd';
+        this.settings = null;
+        //ControlValueAccessor
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        this.onValidationChange = () => { };
+    }
+    ngOnInit() {
+        this.elementRef.nativeElement.setAttribute("placeholder", this.format);
+    }
+    onClick() {
+        if (this.adbDatePickerService.viewRef) {
+            this.adbDatePickerService.viewRef.destroy();
+        }
+        const viewRef = this.viewContainerRef.createComponent(AdbDatePickerComponent);
+        viewRef.instance.settings = this.settings;
+        viewRef.instance.toLeft = this.toLeft;
+        viewRef.instance.initialDate = this.currentDate;
+        this.id = this.getId();
+        viewRef.instance.id = this.id;
+        viewRef.instance.selectDate.subscribe((date) => {
+            this.renderer.setProperty(this.elementRef.nativeElement, 'value', formatDate(date, this.format, this.translate.currentLang));
+            this.onChange(date);
+            this.currentDate = date;
+            this.onHide();
+            this.adbBlur.emit(date);
+        });
+        this.adbDatePickerService.viewRef = viewRef;
+    }
+    onKeyup(event) {
+        const date = AdbDatePickerDirective.tryParse(event.target.value);
+        if (date) {
+            const now = new Date();
+            date.setHours(now.getHours());
+            date.setMinutes(now.getMinutes());
+            date.setSeconds(now.getSeconds());
+            this.onChange(date);
+        }
+        else {
+            this.onChange(event.target.value); //send inccorect values to form
+        }
+    }
+    onTabDown() {
+        this.updateValueOnLeave();
+        this.onHide();
+        this.adbBlur.emit(this.currentDate);
+    }
+    onEscdOWN() {
+        this.updateValueOnLeave();
+        this.onHide();
+    }
+    onHide() {
+        this.adbDatePickerService.viewRef = null;
+        this.viewContainerRef.detach();
+        this.viewContainerRef.clear();
+    }
+    onCheckOutSideClick(target) {
+        const nativeElement = this.adbDatePickerService.viewRef?.instance.elementRef.nativeElement ?? null;
+        if (nativeElement) {
+            if (nativeElement.id === this.id) {
+                if (!target.hasAttribute('adbdatepicker')) {
+                    const clickedInside = nativeElement.contains(target);
+                    if (!clickedInside) {
+                        this.updateValueOnLeave();
+                        this.onHide();
+                        this.adbBlur.emit(this.currentDate);
+                    }
+                }
+            }
+        }
+    }
+    updateValueOnLeave() {
+        if (this.isValid) {
+            if (this.currentDate) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'value', formatDate(this.currentDate, this.format, this.translate.currentLang));
+            }
+            else {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'value', '');
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    //Validator
+    validate(control) {
+        const value = control.value;
+        if (!value) {
+            this.currentDate = null;
+            this.isValid = true;
+            return null;
+        }
+        if (value instanceof Date) {
+            this.currentDate = value;
+            this.isValid = true;
+            return null;
+        }
+        if (typeof value === 'string' || value instanceof String) {
+            const date = AdbDatePickerDirective.tryParse(value);
+            if (!date) {
+                this.isValid = false;
+                return { date: true };
+            }
+        }
+        this.isValid = true;
+        return null;
+    }
+    registerOnValidatorChange(fn) {
+        this.onValidationChange = fn;
+    }
+    writeValue(value) {
+        if (!value) {
+            this.currentDate = null;
+            this.renderer.setProperty(this.elementRef.nativeElement, 'value', '');
+            return;
+        }
+        if (typeof value === 'string' || value instanceof String) {
+            const date = AdbDatePickerDirective.tryParse(value);
+            if (!date) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'value', value);
+                return;
+            }
+            value = date;
+        }
+        if (value instanceof Date) {
+            this.currentDate = value;
+            this.renderer.setProperty(this.elementRef.nativeElement, 'value', formatDate(this.currentDate, this.format, this.translate.currentLang));
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.viewContainerRef.clear();
+    }
+    static tryParse(dateString) {
+        const parsed = parseISO(dateString);
+        return isValid(parsed) ? parsed : null;
+    }
+    getId() {
+        return '' + Math.floor(Math.random() * Date.now());
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbDatePickerDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: AdbDatePickerService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: AdbDatePickerDirective, 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
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: AdbDatePickerDirective,
+                multi: true,
+            },], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbDatePickerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `input[adbDatepicker]`,
+                    providers: [{
+                            provide: NG_VALUE_ACCESSOR, useExisting: forwardRef((() => AdbDatePickerDirective)),
+                            multi: true
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: AdbDatePickerDirective,
+                            multi: true,
+                        },]
+                }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: AdbDatePickerService }, { type: i1$1.TranslateService }], propDecorators: { autocomplete: [{
+                type: HostBinding,
+                args: ['autocomplete']
+            }], adbBlur: [{
+                type: Output
+            }], format: [{
+                type: Input
+            }], toLeft: [{
+                type: Input
+            }], settings: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onKeyup: [{
+                type: HostListener,
+                args: ['keyup', ['$event']]
+            }], onTabDown: [{
+                type: HostListener,
+                args: ['keydown.shift.tab']
+            }, {
+                type: HostListener,
+                args: ['keydown.tab']
+            }], onEscdOWN: [{
+                type: HostListener,
+                args: ['keydown.esc']
+            }], onCheckOutSideClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event.target']]
             }] } });
 
-class AdbDatePickerModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", 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: "16.2.12", ngImport: i0, type: AdbDatePickerModule, providers: [AdbDatePickerService], imports: [CommonModule, TranslateModule.forChild(), AdbPipesModule, AdbDirectivesModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbDatePickerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, TranslateModule.forChild(), AdbPipesModule, AdbDirectivesModule],
-                    declarations: [AdbDatePickerComponent, AdbDatePickerDirective],
-                    exports: [AdbDatePickerComponent, AdbDatePickerDirective],
-                    providers: [AdbDatePickerService]
-                }]
+class AdbDatePickerModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", 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: "18.2.8", ngImport: i0, type: AdbDatePickerModule, providers: [AdbDatePickerService], imports: [CommonModule, TranslateModule.forChild(), AdbPipesModule, AdbDirectivesModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbDatePickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, TranslateModule.forChild(), AdbPipesModule, AdbDirectivesModule],
+                    declarations: [AdbDatePickerComponent, AdbDatePickerDirective],
+                    exports: [AdbDatePickerComponent, AdbDatePickerDirective],
+                    providers: [AdbDatePickerService]
+                }]
         }] });
 
-class AdbModalService {
-    constructor(componentFactoryResolver, rendererFactory, appRef, injector) {
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.appRef = appRef;
-        this.injector = injector;
-        this.closeSubject = new Subject();
-        this.close$ = this.closeSubject.asObservable();
-        this.renderer = rendererFactory.createRenderer(null, null);
-    }
-    hide(confirm) {
-        this.closeSubject.next(confirm);
-        document.body.removeChild(this.domElem);
-        document.body.removeChild(this.backdrop);
-        var main = this.renderer.selectRootElement('main', true);
-        this.renderer.removeAttribute(main, 'inert');
-        this.closeSubject.unsubscribe();
-        this.closeSubject = new Subject();
-        this.close$ = this.closeSubject.asObservable();
-    }
-    showConfirm(model) {
-        var main = this.renderer.selectRootElement('main', true);
-        main.setAttribute('inert', '');
-        this.backdrop = this.renderer.createElement('div');
-        this.backdrop.classList.add('modal-backdrop', 'fade', 'show');
-        this.renderer.appendChild(document.body, this.backdrop);
-        let componentRef = this.componentFactoryResolver.resolveComponentFactory(AdbConfirmModal).create(this.injector);
-        model.header = model.header ?? 'NOT_SET';
-        model.text = model.text ?? 'NOT_SET';
-        model.confirm = model.confirm ?? 'OK';
-        model.decline = model.decline ?? 'CANCEL';
-        componentRef.instance.model = model;
-        this.appRef.attachView(componentRef.hostView);
-        this.domElem = componentRef.hostView.rootNodes[0];
-        document.body.appendChild(this.domElem);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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: "16.2.12", ngImport: i0, type: AdbModalService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbModalService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.RendererFactory2 }, { type: i0.ApplicationRef }, { type: i0.Injector }]; } });
+class AdbModalService {
+    constructor(componentFactoryResolver, rendererFactory, appRef, injector) {
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.appRef = appRef;
+        this.injector = injector;
+        this.closeSubject = new Subject();
+        this.close$ = this.closeSubject.asObservable();
+        this.renderer = rendererFactory.createRenderer(null, null);
+    }
+    hide(confirm) {
+        this.closeSubject.next(confirm);
+        document.body.removeChild(this.domElem);
+        document.body.removeChild(this.backdrop);
+        var main = this.renderer.selectRootElement('main', true);
+        this.renderer.removeAttribute(main, 'inert');
+        this.closeSubject.unsubscribe();
+        this.closeSubject = new Subject();
+        this.close$ = this.closeSubject.asObservable();
+    }
+    showConfirm(model) {
+        var main = this.renderer.selectRootElement('main', true);
+        main.setAttribute('inert', '');
+        this.backdrop = this.renderer.createElement('div');
+        this.backdrop.classList.add('modal-backdrop', 'fade', 'show');
+        this.renderer.appendChild(document.body, this.backdrop);
+        let componentRef = this.componentFactoryResolver.resolveComponentFactory(AdbConfirmModal).create(this.injector);
+        model.header = model.header ?? 'NOT_SET';
+        model.text = model.text ?? 'NOT_SET';
+        model.confirm = model.confirm ?? 'OK';
+        model.decline = model.decline ?? 'CANCEL';
+        componentRef.instance.model = model;
+        this.appRef.attachView(componentRef.hostView);
+        this.domElem = componentRef.hostView.rootNodes[0];
+        document.body.appendChild(this.domElem);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", 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: "18.2.8", ngImport: i0, type: AdbModalService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbModalService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }, { type: i0.RendererFactory2 }, { type: i0.ApplicationRef }, { type: i0.Injector }] });
 
-class AdbConfirmModal {
-    constructor(modalRef, elementRef) {
-        this.modalRef = modalRef;
-        this.elementRef = elementRef;
-    }
-    ngAfterViewInit() {
-        const element = this.elementRef.nativeElement.querySelector('#modal-close');
-        if (element) {
-            element.focus();
-        }
-    }
-    onClose(confirm) {
-        this.modalRef.hide(confirm);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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: "16.2.12", type: AdbConfirmModal, 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 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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbConfirmModal, decorators: [{
-            type: Component,
-            args: [{ 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 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>" }]
-        }], ctorParameters: function () { return [{ type: AdbModalService }, { type: i0.ElementRef }]; }, propDecorators: { model: [{
-                type: Input
+class AdbConfirmModal {
+    constructor(modalRef, elementRef) {
+        this.modalRef = modalRef;
+        this.elementRef = elementRef;
+    }
+    ngAfterViewInit() {
+        const element = this.elementRef.nativeElement.querySelector('#modal-close');
+        if (element) {
+            element.focus();
+        }
+    }
+    onClose(confirm) {
+        this.modalRef.hide(confirm);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", 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: "18.2.8", type: AdbConfirmModal, 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 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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbConfirmModal, decorators: [{
+            type: Component,
+            args: [{ 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 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>" }]
+        }], ctorParameters: () => [{ type: AdbModalService }, { type: i0.ElementRef }], propDecorators: { model: [{
+                type: Input
             }] } });
 
-class AdbModalModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", 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: "16.2.12", ngImport: i0, type: AdbModalModule, providers: [AdbModalService], imports: [CommonModule, TranslateModule.forChild(), AdbDirectivesModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbModalModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, TranslateModule.forChild(), AdbDirectivesModule],
-                    declarations: [AdbConfirmModal],
-                    exports: [AdbConfirmModal],
-                    providers: [AdbModalService]
-                }]
+class AdbModalModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", 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: "18.2.8", ngImport: i0, type: AdbModalModule, providers: [AdbModalService], imports: [CommonModule, TranslateModule.forChild(), AdbDirectivesModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbModalModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, TranslateModule.forChild(), AdbDirectivesModule],
+                    declarations: [AdbConfirmModal],
+                    exports: [AdbConfirmModal],
+                    providers: [AdbModalService]
+                }]
         }] });
 
-class AdbToastService {
-    constructor(componentFactoryResolver, rendererFactory, appRef, injector) {
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.rendererFactory = rendererFactory;
-        this.appRef = appRef;
-        this.injector = injector;
-        this.toasts = new Array();
-        this.toastsSubject = new Subject();
-        this.$toasts = this.toastsSubject.asObservable();
-    }
-    add(toastMessage, time = 4000) {
-        this.addContainer();
-        toastMessage.type = toastMessage.type ? toastMessage.type : ToastType.Primary;
-        toastMessage.index = this.toasts.length;
-        toastMessage.delay = of(toastMessage).pipe(delay(time)).subscribe(toast => {
-            this.remove(toast);
-        });
-        this.toasts.push(toastMessage);
-        this.toastsSubject.next(this.toasts);
-    }
-    remove(toast) {
-        this.toasts = this.toasts?.filter(x => x.index !== toast.index);
-        this.toastsSubject.next(this.toasts);
-    }
-    addContainer() {
-        if (!this.container) {
-            this.renderer = this.rendererFactory.createRenderer(null, null);
-            //create container i top
-            this.container = this.renderer.createElement('div');
-            this.renderer.appendChild(document.body, this.container);
-            let componentRef = this.componentFactoryResolver.resolveComponentFactory(AdbToast).create(this.injector);
-            this.appRef.attachView(componentRef.hostView);
-            const element = componentRef.hostView.rootNodes[0];
-            this.container.prepend(element);
-        }
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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: "16.2.12", ngImport: i0, type: AdbToastService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbToastService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.RendererFactory2 }, { type: i0.ApplicationRef }, { type: i0.Injector }]; } });
-var ToastType;
-(function (ToastType) {
-    ToastType[ToastType["Primary"] = 1] = "Primary";
-    ToastType[ToastType["Success"] = 2] = "Success";
-    ToastType[ToastType["Warn"] = 3] = "Warn";
-    ToastType[ToastType["Danger"] = 4] = "Danger";
+class AdbToastService {
+    constructor(componentFactoryResolver, rendererFactory, appRef, injector) {
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.rendererFactory = rendererFactory;
+        this.appRef = appRef;
+        this.injector = injector;
+        this.toasts = new Array();
+        this.toastsSubject = new Subject();
+        this.$toasts = this.toastsSubject.asObservable();
+    }
+    add(toastMessage, time = 4000) {
+        this.addContainer();
+        toastMessage.type = toastMessage.type ? toastMessage.type : ToastType.Primary;
+        toastMessage.index = this.toasts.length;
+        toastMessage.delay = of(toastMessage).pipe(delay(time)).subscribe(toast => {
+            this.remove(toast);
+        });
+        this.toasts.push(toastMessage);
+        this.toastsSubject.next(this.toasts);
+    }
+    remove(toast) {
+        this.toasts = this.toasts?.filter(x => x.index !== toast.index);
+        this.toastsSubject.next(this.toasts);
+    }
+    addContainer() {
+        if (!this.container) {
+            this.renderer = this.rendererFactory.createRenderer(null, null);
+            //create container i top
+            this.container = this.renderer.createElement('div');
+            this.renderer.appendChild(document.body, this.container);
+            let componentRef = this.componentFactoryResolver.resolveComponentFactory(AdbToast).create(this.injector);
+            this.appRef.attachView(componentRef.hostView);
+            const element = componentRef.hostView.rootNodes[0];
+            this.container.prepend(element);
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", 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: "18.2.8", ngImport: i0, type: AdbToastService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbToastService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }, { type: i0.RendererFactory2 }, { type: i0.ApplicationRef }, { type: i0.Injector }] });
+var ToastType;
+(function (ToastType) {
+    ToastType[ToastType["Primary"] = 1] = "Primary";
+    ToastType[ToastType["Success"] = 2] = "Success";
+    ToastType[ToastType["Warn"] = 3] = "Warn";
+    ToastType[ToastType["Danger"] = 4] = "Danger";
 })(ToastType || (ToastType = {}));
 
-class AdbToast {
-    constructor(toastService) {
-        this.toastService = toastService;
-        this.toastType = ToastType;
-        this.toastService.$toasts.subscribe(toasts => {
-            this.toasts = toasts;
-        });
-    }
-    onRemoveToast(toast) {
-        this.toastService.remove(toast);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbToast, deps: [{ token: AdbToastService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdbToast, selector: "ng-component", ngImport: i0, template: "<div class=\"position-fixed bottom-0 end-0\" style=\"z-index: 50000;min-width: 15rem;\">\r\n    <div class=\"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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbToast, decorators: [{
-            type: Component,
-            args: [{ template: "<div class=\"position-fixed bottom-0 end-0\" style=\"z-index: 50000;min-width: 15rem;\">\r\n    <div class=\"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>" }]
-        }], ctorParameters: function () { return [{ type: AdbToastService }]; } });
+class AdbToast {
+    constructor(toastService) {
+        this.toastService = toastService;
+        this.toastType = ToastType;
+        this.toastService.$toasts.subscribe(toasts => {
+            this.toasts = toasts;
+        });
+    }
+    onRemoveToast(toast) {
+        this.toastService.remove(toast);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbToast, deps: [{ token: AdbToastService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: AdbToast, selector: "ng-component", ngImport: i0, template: "<div class=\"position-fixed bottom-0 end-0\" style=\"z-index: 50000;min-width: 15rem;\">\r\n    <div class=\"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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbToast, decorators: [{
+            type: Component,
+            args: [{ template: "<div class=\"position-fixed bottom-0 end-0\" style=\"z-index: 50000;min-width: 15rem;\">\r\n    <div class=\"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>" }]
+        }], ctorParameters: () => [{ type: AdbToastService }] });
+
+class AdbToastModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", 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: "18.2.8", ngImport: i0, type: AdbToastModule, providers: [AdbToastService], imports: [CommonModule, TranslateModule.forChild(), AdbDirectivesModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbToastModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, TranslateModule.forChild(), AdbDirectivesModule],
+                    declarations: [AdbToast],
+                    exports: [AdbToast],
+                    providers: [AdbToastService]
+                }]
+        }] });
+
+class AdbHelpButtonComponent {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.showHelp = false;
+        this.label = '';
+    }
+    ngOnInit() {
+        this.id = +Math.floor(Math.random() * Date.now());
+    }
+    onClick() {
+        const node = this.elementRef.nativeElement.parentNode;
+        if (node) {
+            if (this.showHelp) {
+                node.classList.remove('position-relative');
+            }
+            else {
+                node.classList.add('position-relative');
+            }
+        }
+        this.showHelp = !this.showHelp;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbHelpButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: AdbHelpButtonComponent, selector: "adb-help-button", inputs: { label: "label" }, ngImport: i0, template: "<div>\r\n    <button type=\"button\" id=\"help-button\" tabindex=\"-1\" (adbClickOutside)=\"showHelp=false\"\r\n        class=\"w-auto btn btn-invisible p-0 w-auto d-flex gap-1 align-items-baseline\"\r\n        [attr.aria-controls]=\"id\" attr.aria-label=\"Help\" [attr.aria-expanded]=\"showHelp\" (click)=\"onClick()\">\r\n        <span class=\"fas fa-question-circle text-primary\"></span>\r\n        {{label}}\r\n    </button>\r\n</div>\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><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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[adbClickOutside]", outputs: ["adbClickOutside"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbHelpButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'adb-help-button', template: "<div>\r\n    <button type=\"button\" id=\"help-button\" tabindex=\"-1\" (adbClickOutside)=\"showHelp=false\"\r\n        class=\"w-auto btn btn-invisible p-0 w-auto d-flex gap-1 align-items-baseline\"\r\n        [attr.aria-controls]=\"id\" attr.aria-label=\"Help\" [attr.aria-expanded]=\"showHelp\" (click)=\"onClick()\">\r\n        <span class=\"fas fa-question-circle text-primary\"></span>\r\n        {{label}}\r\n    </button>\r\n</div>\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><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>" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{
+                type: Input
+            }] } });
 
-class AdbToastModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", 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: "16.2.12", ngImport: i0, type: AdbToastModule, providers: [AdbToastService], imports: [CommonModule, TranslateModule.forChild(), AdbDirectivesModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbToastModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, TranslateModule.forChild(), AdbDirectivesModule],
-                    declarations: [AdbToast],
-                    exports: [AdbToast],
-                    providers: [AdbToastService]
-                }]
+class AdbButtonsModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbButtonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: AdbButtonsModule, declarations: [AdbHelpButtonComponent], imports: [CommonModule, AdbDirectivesModule], exports: [AdbHelpButtonComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbButtonsModule, imports: [CommonModule, AdbDirectivesModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbButtonsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, AdbDirectivesModule],
+                    declarations: [AdbHelpButtonComponent],
+                    exports: [AdbHelpButtonComponent]
+                }]
         }] });
 
-class AdbHelpButtonComponent {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        this.showHelp = false;
-        this.label = '';
-    }
-    ngOnInit() {
-        this.id = +Math.floor(Math.random() * Date.now());
-    }
-    onClick() {
-        const node = this.elementRef.nativeElement.parentNode;
-        if (node) {
-            if (this.showHelp) {
-                node.classList.remove('position-relative');
-            }
-            else {
-                node.classList.add('position-relative');
-            }
-        }
-        this.showHelp = !this.showHelp;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbHelpButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdbHelpButtonComponent, selector: "adb-help-button", inputs: { label: "label" }, ngImport: i0, template: "<div>\r\n    <button type=\"button\" id=\"help-button\" tabindex=\"-1\" (adbClickOutside)=\"showHelp=false\"\r\n        class=\"w-auto btn btn-invisible p-0 w-auto d-flex gap-1 align-items-baseline\"\r\n        [attr.aria-controls]=\"id\" attr.aria-label=\"Help\" [attr.aria-expanded]=\"showHelp\" (click)=\"onClick()\">\r\n        <span class=\"fas fa-question-circle text-primary\"></span>\r\n        {{label}}\r\n    </button>\r\n</div>\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><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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[adbClickOutside]", outputs: ["adbClickOutside"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbHelpButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'adb-help-button', template: "<div>\r\n    <button type=\"button\" id=\"help-button\" tabindex=\"-1\" (adbClickOutside)=\"showHelp=false\"\r\n        class=\"w-auto btn btn-invisible p-0 w-auto d-flex gap-1 align-items-baseline\"\r\n        [attr.aria-controls]=\"id\" attr.aria-label=\"Help\" [attr.aria-expanded]=\"showHelp\" (click)=\"onClick()\">\r\n        <span class=\"fas fa-question-circle text-primary\"></span>\r\n        {{label}}\r\n    </button>\r\n</div>\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><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>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { label: [{
-                type: Input
+class AdbRichEditorComponent {
+    constructor(renderer, el) {
+        this.renderer = renderer;
+        this.el = el;
+        this.hasTaxon = true;
+        this.hasRefernce = true;
+        //ControlValueAccessor
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    onDoubleClick() {
+        const textarea = this.el.nativeElement.querySelector('textarea');
+        const selectionStart = textarea.selectionStart;
+        let selectionEnd = textarea.selectionEnd;
+        while (selectionEnd > selectionStart && textarea.value[selectionEnd - 1] === ' ') {
+            selectionEnd--;
+        }
+        textarea.setSelectionRange(selectionStart, selectionEnd);
+    }
+    onItalicClick() {
+        const textarea = this.el.nativeElement.querySelector('textarea');
+        if (textarea) {
+            const selectionStart = textarea.selectionStart;
+            const selectionEnd = textarea.selectionEnd;
+            let currentValue = textarea.value;
+            let modifiedText = `${currentValue.substring(0, selectionStart)}_${currentValue.substring(selectionStart, selectionEnd)}_${currentValue.substring(selectionEnd)}`;
+            this.text = modifiedText;
+            this.onChange(this.text);
+        }
+    }
+    onTaxonClick() {
+        const textarea = this.el.nativeElement.querySelector('textarea');
+        if (textarea) {
+            const start = textarea.selectionStart;
+            const end = textarea.selectionEnd;
+            const originalText = textarea.value;
+            const charBefore = start > 0 ? originalText[start - 1] : '';
+            const charAfter = end < originalText.length ? originalText[end] : '';
+            const spaceBefore = charBefore && !/\s/.test(charBefore) ? ' ' : '';
+            const spaceAfter = charAfter && !/\s/.test(charAfter) ? ' ' : '';
+            const newText = originalText.slice(0, start) + spaceBefore + '[Name](taxon:0)' + spaceAfter + originalText.slice(end);
+            this.text = newText;
+            this.onChange(this.text);
+        }
+    }
+    onTextChange() {
+        this.onChange(this.text);
+    }
+    writeValue(value) {
+        this.text = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+    }
+    ngOnDestroy() {
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbRichEditorComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: AdbRichEditorComponent, selector: "adb-rich-editor", inputs: { hasTaxon: "hasTaxon", hasRefernce: "hasRefernce" }, 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()\"><span class=\"fas fa-italic\"></span></button>\r\n        <button *ngIf=\"hasTaxon\" class=\"btn btn-secondary\" (click)=\"onTaxonClick()\"><span class=\"far fa-paw\"></span></button>\r\n    </div>\r\n    <textarea class=\"form-control\" [(ngModel)]=\"text\" (ngModelChange)=\"onTextChange()\" (dblclick)=\"onDoubleClick()\"></textarea>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbRichEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'adb-rich-editor', providers: [{
+                            provide: NG_VALUE_ACCESSOR, useExisting: forwardRef((() => AdbRichEditorComponent)),
+                            multi: true
+                        }], template: "<div>\r\n    <div class=\"d-flex justify-content-end gap-3 mb-1\">\r\n        <button class=\"btn btn-secondary\" (click)=\"onItalicClick()\"><span class=\"fas fa-italic\"></span></button>\r\n        <button *ngIf=\"hasTaxon\" class=\"btn btn-secondary\" (click)=\"onTaxonClick()\"><span class=\"far fa-paw\"></span></button>\r\n    </div>\r\n    <textarea class=\"form-control\" [(ngModel)]=\"text\" (ngModelChange)=\"onTextChange()\" (dblclick)=\"onDoubleClick()\"></textarea>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { hasTaxon: [{
+                type: Input
+            }], hasRefernce: [{
+                type: Input
             }] } });
 
-class AdbButtonsModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbButtonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: AdbButtonsModule, declarations: [AdbHelpButtonComponent], imports: [CommonModule, AdbDirectivesModule], exports: [AdbHelpButtonComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbButtonsModule, imports: [CommonModule, AdbDirectivesModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbButtonsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, AdbDirectivesModule],
-                    declarations: [AdbHelpButtonComponent],
-                    exports: [AdbHelpButtonComponent]
-                }]
+class AdbRichEditorModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbRichEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: AdbRichEditorModule, declarations: [AdbRichEditorComponent], imports: [CommonModule, FormsModule], exports: [AdbRichEditorComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbRichEditorModule, imports: [CommonModule, FormsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AdbRichEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, FormsModule],
+                    declarations: [AdbRichEditorComponent],
+                    exports: [AdbRichEditorComponent]
+                }]
         }] });
 
-/*
- * Public API Surface of artdata-shared
+/*
+ * Public API Surface of artdata-shared
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
-export { ADBHeaderModule, ADBNavComponent, AdbButtonsModule, AdbConfirmModal, AdbDatePickerComponent, AdbDatePickerDirective, AdbDatePickerModule, AdbDirectivesModule, AdbDropdownDirective, AdbDropdownModule, AdbHelpButtonComponent, AdbModalModule, AdbModalService, AdbPagersModule, AdbPipesModule, AdbToast, AdbToastModule, AdbToastService, ArtportalenFooterComponent, ArtportalenNavComponent, ArtportalenNavModule, ClickOutsideDirective, EmptyValuePipe, FileUploadDirective, FocusDirective, HighlightHtmlPipe, HighlightPipe, InfiniteScrollComponent, LocaleDatePipe, NumberSpacingPipe, PagerComponent, PagerInlineComponent, RedListBadgeClassDirective, RiskClassDirective, ToastType };
+export { ADBHeaderModule, ADBNavComponent, AdbButtonsModule, AdbConfirmModal, AdbDatePickerComponent, AdbDatePickerDirective, AdbDatePickerModule, AdbDirectivesModule, AdbDropdown2Directive, AdbDropdownDirective, AdbDropdownModule, AdbHelpButtonComponent, AdbModalModule, AdbModalService, AdbPagersModule, AdbPipesModule, AdbRichEditorComponent, AdbRichEditorModule, AdbToast, AdbToastModule, AdbToastService, ArtportalenFooterComponent, ArtportalenNavComponent, ArtportalenNavModule, ClickOutsideDirective, EmptyValuePipe, FileUploadDirective, FocusDirective, HighlightHtmlPipe, HighlightPipe, InfiniteScrollComponent, LocaleDatePipe, NumberSpacingPipe, PagerComponent, PagerInlineComponent, RedListBadgeClassDirective, RichPipe, RiskClassDirective, ToastType };
 //# sourceMappingURL=adb-shared.mjs.map