adb-shared 1.0.21 → 2.0.1

package/fesm2020/adb-shared.mjs

@@ -0,0 +1,724 @@
+import * as i3$1 from '@angular/common';
+import { CommonModule, DatePipe, formatDate } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, Inject, EventEmitter, Component, Output, Input, Directive, HostListener, NgModule, HostBinding, Pipe, forwardRef } from '@angular/core';
+import * as i3 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { Subscription, Subject, BehaviorSubject } from 'rxjs';
+import * as i1 from '@angular/common/http';
+import { HttpClientModule } from '@angular/common/http';
+import * as i1$1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import { startOfDay, endOfDay, subYears, subMonths, addYears, addMonths, getMonth, isSameYear, startOfMonth, endOfMonth, eachWeekOfInterval, getISOWeek, addDays, eachDayOfInterval, getHours, getMinutes, isWithinInterval, isSameDay, isValid, parseISO } from 'date-fns';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+class EnvironmentService {
+    constructor(environment) {
+        this.environment = environment;
+    }
+}
+/** @nocollapse */ EnvironmentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: EnvironmentService, deps: [{ token: 'env' }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ EnvironmentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: EnvironmentService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: EnvironmentService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['env']
+                }] }]; } });
+
+class ADBHeaderComponent {
+    constructor(httpClient, envService, trans) {
+        this.httpClient = httpClient;
+        this.envService = envService;
+        this.trans = trans;
+        this.subscription = new Subscription();
+        this.loginClicked = new EventEmitter();
+        this.logoutClicked = new EventEmitter();
+        this.dropMenuChange = new EventEmitter();
+        this.translationFinished = false;
+        this.showMenu = false;
+        this.showUserMenu = false;
+    }
+    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;
+        }
+    }
+    ;
+    ngOnInit() {
+        this.url = window.location.href;
+        const baseUrl = this.envService.environment.resourceUrl;
+        this.subscription.add(this.httpClient.get(baseUrl + '/assets/links.json').subscribe(result => {
+            this.navigation = result;
+        }));
+        this.initTranslations(baseUrl);
+    }
+    initTranslations(baseUrl) {
+        if (this.trans.store.translations[this.trans.currentLang]) {
+            this.loadTranslation(baseUrl, this.trans.currentLang);
+        }
+        this.subscription.add(this.trans.onLangChange.subscribe((event) => {
+            this.translationFinished = false;
+            this.loadTranslation(baseUrl, event.lang);
+        }));
+    }
+    loadTranslation(baseUrl, lang) {
+        //TODO: Prepare for diffents lang then en sv (en-GB) or add more files in devcomponentserver :)
+        this.subscription.add(this.httpClient.get(baseUrl + `/assets/i18n/${lang}.json`).subscribe(translations => {
+            this.trans.setTranslation(lang, translations, true);
+            this.translationFinished = true;
+        }));
+    }
+    showMenuDropdown(show) {
+        if (this.showMenu !== show) {
+            this.showMenu = show;
+            this.dropMenuChange.emit(show);
+        }
+    }
+    setLanguage(lang) {
+        this.trans.use(lang);
+        this.showMenu = false;
+        this.dropMenuChange.emit(false);
+        //TODO: set localstorage/cookies or probaly event to main app
+    }
+    onExpandLink(event, transId) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.expandedLink === transId) {
+            this.expandedLink = null;
+            return;
+        }
+        this.expandedLink = transId;
+    }
+    login() {
+        this.loginClicked.emit();
+    }
+    logout() {
+        this.logoutClicked.emit();
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+}
+/** @nocollapse */ ADBHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ADBHeaderComponent, deps: [{ token: i1.HttpClient }, { token: EnvironmentService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ ADBHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: ADBHeaderComponent, selector: "adb-header2", inputs: { userName: "userName" }, outputs: { loginClicked: "loginClicked", logoutClicked: "logoutClicked", dropMenuChange: "dropMenuChange" }, ngImport: i0, template: "<header id=\"top-header\" (clickOutside)=\"showUserMenu=false;showMenuDropdown(false);\">\r\n    <nav class=\"d-flex flex-wrap px-3\">\r\n        <div class=\"flex-grow-1 d-flex align-items-center justify-content-between justify-content-md-start\">\r\n            <div class=\"logo d-none d-md-block\">\r\n                <img src=\"/assets/images/logo.svg\" style=\"height: 3.2rem;\">\r\n            </div>\r\n            <div class=\"logo ps-2 d-sm-block d-md-none d-flex align-items-center\">\r\n                <img src=\"/assets/images/logo_sm_white.png\" style=\"height: 2rem;\">\r\n            </div>\r\n            <strong class=\"bigger\">{{'ADB_HEADER.TITLE'|translate}}</strong>\r\n        </div>\r\n        <div *ngIf=\"translationFinished\" class=\"flex-grow-1 d-flex justify-content-lg-between justify-content-end align-items-center\">\r\n            <div *ngIf=\"navigation\" class=\"d-flex align-items-center\">\r\n                <nav class=\"d-none align-items-center d-lg-flex pe-4 gap-4\" *ngIf=\"navigation\">\r\n                    <ng-container *ngFor=\"let link of navigation.links\">\r\n                        <a href=\"{{link.url}}?lang={{trans.currentLang}}\" *ngIf=\"link.topLink\" [ngClass]=\"{'d-none d-xl-block':link.transId==='ADB_HEADER.OBSERVATION'}\">\r\n                            {{link.transId|translate}}\r\n                        </a>\r\n                    </ng-container>\r\n                </nav>\r\n                <div>\r\n                    <button type=\"button\" class=\"btn btn-sm py-1 px-2 btn-primary\" (click)=\"showUserMenu = false;showMenuDropdown(!showMenu)\">\r\n                        {{'ADB_HEADER.MENY'|translate}}\r\n                        <i class=\"ms-1 fas\" [ngClass]=\"showMenu?'fa-chevron-up':'fa-chevron-down'\"></i>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-none d-md-block ps-4\">\r\n                <button *ngIf=\"initials\" type=\"button\" class=\"btn initials\" (click)=\"showUserMenu = !showUserMenu;showMenuDropdown(false)\">{{initials}}</button>\r\n                <button *ngIf=\"!initials\" type=\"button\" (click)=\"showUserMenu = !showUserMenu;showMenuDropdown(false)\" class=\"btn btn-link\">\r\n                    {{'ADB_HEADER.LOGIN'|translate}}\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </nav>\r\n    <div class=\"menu\" *ngIf=\"showUserMenu\">\r\n        <div class=\"menu-body bg-white p-3\" style=\"width:15rem\">\r\n            <ng-container *ngIf=\"initials\">\r\n                <div class=\"d-flex align-items-center gap-2 text-dark\">\r\n                    <span class=\"initials\">{{initials}}</span>\r\n                    <strong>{{fullName}}</strong>\r\n                </div>\r\n                <hr class=\"mx-n3 text-muted\">\r\n                <button (click)=\"logout()\" type=\"button\" class=\"btn btn-link p-0\">\r\n                    <i class=\"fas fa-sign-out-alt me-1\"></i>{{'ADB_HEADER.LOGOUT'|translate}}\r\n                </button>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!initials\">\r\n                <div class=\"d-flex justify-content-center\">\r\n                    <button type=\"button\" class=\"btn btn-primary\" (click)=\"login()\" id=\"start-login\">{{'ADB_HEADER.LOGIN'|translate}}</button>\r\n                </div>\r\n                <a *ngIf=\"navigation\" class=\"d-block mt-3\" href=\"{{navigation.createAccountLink}}?lang={{trans.currentLang}}&returnUrl={{url}}\">\r\n                    {{'ADB_HEADER.CREATE_USER'|translate}}\r\n                </a>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"menu\" *ngIf=\"showMenu\">\r\n        <div class=\"menu-body\" *ngIf=\"navigation\">\r\n            <div class=\"px-3 pt-3 mb-1\">\r\n                <div class=\"d-flex justify-content-between flex-wrap gap-2 mb-2\">\r\n                    <div>\r\n                        <div class=\"d-flex d-md-none align-items-center gap-2\" *ngIf=\"initials\">\r\n                            <span class=\"initials me-2\">{{initials}}</span>\r\n                            <button type=\"button\" (click)=\"logout()\" class=\"btn btn-primary\">\r\n                                {{'ADB_HEADER.LOGOUT'|translate}}\r\n                            </button>\r\n                        </div>\r\n                        <div class=\"d-flex gap-2 d-md-none\" *ngIf=\"!initials\">\r\n                            <button type=\"button\" (click)=\"login()\" class=\"btn btn-primary\" id=\"login\">\r\n                                {{'ADB_HEADER.LOGIN'|translate}}\r\n                            </button>\r\n                            <a href=\"{{navigation.createAccountLink}}?lang={{trans.currentLang}}&returnUrl={{url}}\"\r\n                               class=\"btn btn-primary text-white\">\r\n                                {{'ADB_HEADER.CREATE_USER'|translate}}\r\n                            </a>\r\n                        </div>\r\n                    </div>\r\n                    <div>\r\n                        <button type=\"button\" *ngIf=\"trans.currentLang==='en'\" (click)=\"setLanguage('sv')\"\r\n                                class=\"btn btn-primary\">\r\n                            {{'ADB_HEADER.IN_SWEDISH'|translate}}\r\n                        </button>\r\n                        <button type=\"button\" *ngIf=\"trans.currentLang==='sv'\" (click)=\"setLanguage('en')\"\r\n                                class=\"btn btn-primary\">\r\n                            {{'ADB_HEADER.IN_ENGLISH'|translate}}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n                {{'ADB_HEADER.SERVICES'|translate}}\r\n            </div>\r\n            <div id=\"splash\">\r\n                <div class=\"px-3 d-flex flex-column\">\r\n                    <ul class=\"list-group ms-0 mb-0 ps-0\">\r\n                        <li class=\"mb-1 list-group-item p-0 rounded\" *ngFor=\"let link of navigation.links\"\r\n                            [attr.aria-expanded]=\"link.transId===expandedLink?true:false\" role=\"button\">\r\n                            <div class=\"d-flex align-items-center justify-content-between\">\r\n                                <a href=\"{{link.url}}?lang={{trans.currentLang}}\" class=\"d-flex align-items-center flex-grow-1 p-2\">\r\n                                    <small class=\"fa-stack me-1\" *ngIf=\"link.icon\">\r\n                                        <span class=\"fas fa-circle fa-stack-2x text-primary\"></span>\r\n                                        <span class=\"fas fa-stack-1x fa-inverse\" [ngClass]=\"link.icon\"></span>\r\n                                    </small>\r\n                                    {{link.transId|translate}}\r\n                                </a>\r\n                                <button class=\"btn btn-expand me-2\" *ngIf=\"link.children?.length>0\" (click)=\"onExpandLink($event,link.transId)\">\r\n                                    <i class=\"fas fa-chevron-up\" [ngClass]=\"link.transId===expandedLink?'d-block ':'d-none'\"></i>\r\n                                    <i class=\"fas fa-chevron-down\" [ngClass]=\"link.transId!==expandedLink?'d-block ':'d-none'\"></i>\r\n                                </button>\r\n                            </div>\r\n                            <ul class=\"list-unstyled\" [ngClass]=\"link.transId===expandedLink?'d-block':'d-none'\">\r\n                                <li class=\"py-1 m-0\" [class.pt-0]=\"first\" *ngFor=\"let subLink of link.children;let first = first\" style=\"padding-left:3rem;\">\r\n                                    <a class=\"w-100 d-block\" href=\"{{subLink.url}}?lang={{trans.currentLang}}\">\r\n                                        {{subLink.transId|translate}}\r\n                                    </a>\r\n                                </li>\r\n                            </ul>\r\n                        </li>\r\n                    </ul>\r\n                    <div *ngIf=\"navigation.about\" class=\"mt-2 mb-auto\">\r\n                        <div class=\"mb-1\">{{'ADB_HEADER.CONTACT'|translate}}</div>\r\n                        <div class=\"mb-1 row\">\r\n                            <div class=\"col-sm-6 mb-2\">\r\n                                <div class=\"bg-white p-2 rounded\">\r\n                                    <small class=\"fa-stack\" *ngIf=\"navigation.about.icon\">\r\n                                        <span class=\"fas fa-circle fa-stack-2x text-primary\"></span>\r\n                                        <span class=\"fas fa-stack-1x fa-inverse fa-envelope\"></span>\r\n                                    </small>\r\n                                    <a class=\"bg-white p-2\" href=\"mailto:artfakta@artdatabanken.se\">artfakta@artdatabanken.se</a>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-sm-6 mb-2\">\r\n                                <div class=\"bg-white p-2 rounded\">\r\n                                    <small class=\"fa-stack\" *ngIf=\"navigation.about.icon\">\r\n                                        <span class=\"fas fa-circle fa-stack-2x text-primary\"></span>\r\n                                        <span class=\"fas fa-stack-1x fa-inverse\" [ngClass]=\"navigation.about.icon\"></span>\r\n                                    </small>\r\n                                    <a [href]=\"navigation.about.url\">{{navigation.about.transId|translate}}</a>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div style=\"height:10rem\"></div>\r\n                    <div class=\"mb-3\">\r\n                        {{'ADB_HEADER.DEVELOPED_BY'|translate}}\r\n                        <a href=\"https://www.artdatabanken.se/\" class=\"text-white\"><u>{{'ADB_HEADER.ARTDATABANKEN'|translate}}</u></a>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</header>\r\n", directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ADBHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'adb-header2', template: "<header id=\"top-header\" (clickOutside)=\"showUserMenu=false;showMenuDropdown(false);\">\r\n    <nav class=\"d-flex flex-wrap px-3\">\r\n        <div class=\"flex-grow-1 d-flex align-items-center justify-content-between justify-content-md-start\">\r\n            <div class=\"logo d-none d-md-block\">\r\n                <img src=\"/assets/images/logo.svg\" style=\"height: 3.2rem;\">\r\n            </div>\r\n            <div class=\"logo ps-2 d-sm-block d-md-none d-flex align-items-center\">\r\n                <img src=\"/assets/images/logo_sm_white.png\" style=\"height: 2rem;\">\r\n            </div>\r\n            <strong class=\"bigger\">{{'ADB_HEADER.TITLE'|translate}}</strong>\r\n        </div>\r\n        <div *ngIf=\"translationFinished\" class=\"flex-grow-1 d-flex justify-content-lg-between justify-content-end align-items-center\">\r\n            <div *ngIf=\"navigation\" class=\"d-flex align-items-center\">\r\n                <nav class=\"d-none align-items-center d-lg-flex pe-4 gap-4\" *ngIf=\"navigation\">\r\n                    <ng-container *ngFor=\"let link of navigation.links\">\r\n                        <a href=\"{{link.url}}?lang={{trans.currentLang}}\" *ngIf=\"link.topLink\" [ngClass]=\"{'d-none d-xl-block':link.transId==='ADB_HEADER.OBSERVATION'}\">\r\n                            {{link.transId|translate}}\r\n                        </a>\r\n                    </ng-container>\r\n                </nav>\r\n                <div>\r\n                    <button type=\"button\" class=\"btn btn-sm py-1 px-2 btn-primary\" (click)=\"showUserMenu = false;showMenuDropdown(!showMenu)\">\r\n                        {{'ADB_HEADER.MENY'|translate}}\r\n                        <i class=\"ms-1 fas\" [ngClass]=\"showMenu?'fa-chevron-up':'fa-chevron-down'\"></i>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-none d-md-block ps-4\">\r\n                <button *ngIf=\"initials\" type=\"button\" class=\"btn initials\" (click)=\"showUserMenu = !showUserMenu;showMenuDropdown(false)\">{{initials}}</button>\r\n                <button *ngIf=\"!initials\" type=\"button\" (click)=\"showUserMenu = !showUserMenu;showMenuDropdown(false)\" class=\"btn btn-link\">\r\n                    {{'ADB_HEADER.LOGIN'|translate}}\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </nav>\r\n    <div class=\"menu\" *ngIf=\"showUserMenu\">\r\n        <div class=\"menu-body bg-white p-3\" style=\"width:15rem\">\r\n            <ng-container *ngIf=\"initials\">\r\n                <div class=\"d-flex align-items-center gap-2 text-dark\">\r\n                    <span class=\"initials\">{{initials}}</span>\r\n                    <strong>{{fullName}}</strong>\r\n                </div>\r\n                <hr class=\"mx-n3 text-muted\">\r\n                <button (click)=\"logout()\" type=\"button\" class=\"btn btn-link p-0\">\r\n                    <i class=\"fas fa-sign-out-alt me-1\"></i>{{'ADB_HEADER.LOGOUT'|translate}}\r\n                </button>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!initials\">\r\n                <div class=\"d-flex justify-content-center\">\r\n                    <button type=\"button\" class=\"btn btn-primary\" (click)=\"login()\" id=\"start-login\">{{'ADB_HEADER.LOGIN'|translate}}</button>\r\n                </div>\r\n                <a *ngIf=\"navigation\" class=\"d-block mt-3\" href=\"{{navigation.createAccountLink}}?lang={{trans.currentLang}}&returnUrl={{url}}\">\r\n                    {{'ADB_HEADER.CREATE_USER'|translate}}\r\n                </a>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"menu\" *ngIf=\"showMenu\">\r\n        <div class=\"menu-body\" *ngIf=\"navigation\">\r\n            <div class=\"px-3 pt-3 mb-1\">\r\n                <div class=\"d-flex justify-content-between flex-wrap gap-2 mb-2\">\r\n                    <div>\r\n                        <div class=\"d-flex d-md-none align-items-center gap-2\" *ngIf=\"initials\">\r\n                            <span class=\"initials me-2\">{{initials}}</span>\r\n                            <button type=\"button\" (click)=\"logout()\" class=\"btn btn-primary\">\r\n                                {{'ADB_HEADER.LOGOUT'|translate}}\r\n                            </button>\r\n                        </div>\r\n                        <div class=\"d-flex gap-2 d-md-none\" *ngIf=\"!initials\">\r\n                            <button type=\"button\" (click)=\"login()\" class=\"btn btn-primary\" id=\"login\">\r\n                                {{'ADB_HEADER.LOGIN'|translate}}\r\n                            </button>\r\n                            <a href=\"{{navigation.createAccountLink}}?lang={{trans.currentLang}}&returnUrl={{url}}\"\r\n                               class=\"btn btn-primary text-white\">\r\n                                {{'ADB_HEADER.CREATE_USER'|translate}}\r\n                            </a>\r\n                        </div>\r\n                    </div>\r\n                    <div>\r\n                        <button type=\"button\" *ngIf=\"trans.currentLang==='en'\" (click)=\"setLanguage('sv')\"\r\n                                class=\"btn btn-primary\">\r\n                            {{'ADB_HEADER.IN_SWEDISH'|translate}}\r\n                        </button>\r\n                        <button type=\"button\" *ngIf=\"trans.currentLang==='sv'\" (click)=\"setLanguage('en')\"\r\n                                class=\"btn btn-primary\">\r\n                            {{'ADB_HEADER.IN_ENGLISH'|translate}}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n                {{'ADB_HEADER.SERVICES'|translate}}\r\n            </div>\r\n            <div id=\"splash\">\r\n                <div class=\"px-3 d-flex flex-column\">\r\n                    <ul class=\"list-group ms-0 mb-0 ps-0\">\r\n                        <li class=\"mb-1 list-group-item p-0 rounded\" *ngFor=\"let link of navigation.links\"\r\n                            [attr.aria-expanded]=\"link.transId===expandedLink?true:false\" role=\"button\">\r\n                            <div class=\"d-flex align-items-center justify-content-between\">\r\n                                <a href=\"{{link.url}}?lang={{trans.currentLang}}\" class=\"d-flex align-items-center flex-grow-1 p-2\">\r\n                                    <small class=\"fa-stack me-1\" *ngIf=\"link.icon\">\r\n                                        <span class=\"fas fa-circle fa-stack-2x text-primary\"></span>\r\n                                        <span class=\"fas fa-stack-1x fa-inverse\" [ngClass]=\"link.icon\"></span>\r\n                                    </small>\r\n                                    {{link.transId|translate}}\r\n                                </a>\r\n                                <button class=\"btn btn-expand me-2\" *ngIf=\"link.children?.length>0\" (click)=\"onExpandLink($event,link.transId)\">\r\n                                    <i class=\"fas fa-chevron-up\" [ngClass]=\"link.transId===expandedLink?'d-block ':'d-none'\"></i>\r\n                                    <i class=\"fas fa-chevron-down\" [ngClass]=\"link.transId!==expandedLink?'d-block ':'d-none'\"></i>\r\n                                </button>\r\n                            </div>\r\n                            <ul class=\"list-unstyled\" [ngClass]=\"link.transId===expandedLink?'d-block':'d-none'\">\r\n                                <li class=\"py-1 m-0\" [class.pt-0]=\"first\" *ngFor=\"let subLink of link.children;let first = first\" style=\"padding-left:3rem;\">\r\n                                    <a class=\"w-100 d-block\" href=\"{{subLink.url}}?lang={{trans.currentLang}}\">\r\n                                        {{subLink.transId|translate}}\r\n                                    </a>\r\n                                </li>\r\n                            </ul>\r\n                        </li>\r\n                    </ul>\r\n                    <div *ngIf=\"navigation.about\" class=\"mt-2 mb-auto\">\r\n                        <div class=\"mb-1\">{{'ADB_HEADER.CONTACT'|translate}}</div>\r\n                        <div class=\"mb-1 row\">\r\n                            <div class=\"col-sm-6 mb-2\">\r\n                                <div class=\"bg-white p-2 rounded\">\r\n                                    <small class=\"fa-stack\" *ngIf=\"navigation.about.icon\">\r\n                                        <span class=\"fas fa-circle fa-stack-2x text-primary\"></span>\r\n                                        <span class=\"fas fa-stack-1x fa-inverse fa-envelope\"></span>\r\n                                    </small>\r\n                                    <a class=\"bg-white p-2\" href=\"mailto:artfakta@artdatabanken.se\">artfakta@artdatabanken.se</a>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-sm-6 mb-2\">\r\n                                <div class=\"bg-white p-2 rounded\">\r\n                                    <small class=\"fa-stack\" *ngIf=\"navigation.about.icon\">\r\n                                        <span class=\"fas fa-circle fa-stack-2x text-primary\"></span>\r\n                                        <span class=\"fas fa-stack-1x fa-inverse\" [ngClass]=\"navigation.about.icon\"></span>\r\n                                    </small>\r\n                                    <a [href]=\"navigation.about.url\">{{navigation.about.transId|translate}}</a>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div style=\"height:10rem\"></div>\r\n                    <div class=\"mb-3\">\r\n                        {{'ADB_HEADER.DEVELOPED_BY'|translate}}\r\n                        <a href=\"https://www.artdatabanken.se/\" class=\"text-white\"><u>{{'ADB_HEADER.ARTDATABANKEN'|translate}}</u></a>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</header>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: EnvironmentService }, { type: i3.TranslateService }]; }, propDecorators: { loginClicked: [{
+                type: Output
+            }], logoutClicked: [{
+                type: Output
+            }], dropMenuChange: [{
+                type: Output
+            }], userName: [{
+                type: Input
+            }] } });
+
+class ClickOutsideDirective {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.adbClickOutside = new EventEmitter();
+    }
+    onClick(target) {
+        const clickedInside = this.elementRef.nativeElement.contains(target);
+        if (!clickedInside) {
+            this.adbClickOutside.emit(target);
+        }
+    }
+}
+/** @nocollapse */ ClickOutsideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ ClickOutsideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: ClickOutsideDirective, selector: "[adbClickOutside]", outputs: { adbClickOutside: "adbClickOutside" }, host: { listeners: { "document:click": "onClick($event.target)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[adbClickOutside]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { adbClickOutside: [{
+                type: Output
+            }], onClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event.target']]
+            }] } });
+
+/* eslint-disable @angular-eslint/directive-selector */
+class FocusDirective {
+    constructor(element) {
+        this.element = element;
+        this.focused = false;
+    }
+    ngAfterViewInit() {
+        // ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.
+        if (this.focused) {
+            setTimeout(() => this.element.nativeElement.focus(), 0);
+        }
+    }
+}
+/** @nocollapse */ FocusDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: FocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ FocusDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: FocusDirective, selector: "[adbFocus]", inputs: { focused: ["adbFocus", "focused"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: FocusDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[adbFocus]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { focused: [{
+                type: Input,
+                args: ['adbFocus']
+            }] } });
+
+class DirectivesModule {
+}
+/** @nocollapse */ DirectivesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: DirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ DirectivesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: DirectivesModule, declarations: [ClickOutsideDirective, FocusDirective], exports: [ClickOutsideDirective, FocusDirective] });
+/** @nocollapse */ DirectivesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: DirectivesModule, imports: [[]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: DirectivesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    declarations: [ClickOutsideDirective, FocusDirective],
+                    exports: [ClickOutsideDirective, FocusDirective]
+                }]
+        }] });
+
+class ADBHeaderModule {
+    static forRoot(environment) {
+        return {
+            ngModule: ADBHeaderModule,
+            providers: [
+                EnvironmentService,
+                {
+                    provide: 'env',
+                    useValue: environment
+                }
+            ]
+        };
+    }
+}
+/** @nocollapse */ ADBHeaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ADBHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ ADBHeaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ADBHeaderModule, declarations: [ADBHeaderComponent], imports: [CommonModule,
+        HttpClientModule,
+        RouterModule,
+        TranslateModule,
+        DirectivesModule], exports: [ADBHeaderComponent] });
+/** @nocollapse */ ADBHeaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ADBHeaderModule, imports: [[
+            CommonModule,
+            HttpClientModule,
+            RouterModule,
+            TranslateModule,
+            DirectivesModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ADBHeaderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ADBHeaderComponent],
+                    imports: [
+                        CommonModule,
+                        HttpClientModule,
+                        RouterModule,
+                        TranslateModule,
+                        DirectivesModule
+                    ],
+                    exports: [ADBHeaderComponent]
+                }]
+        }] });
+
+class InfiniteScrollComponent {
+    constructor(_element) {
+        this._element = _element;
+        this.onVisible = new EventEmitter();
+        this.height = '1px';
+        this.checkForIntersection = (entries) => {
+            entries.forEach((entry) => {
+                const isIntersecting = entry.isIntersecting &&
+                    entry.target === this._element.nativeElement;
+                if (isIntersecting) {
+                    this.onVisible.emit();
+                }
+            });
+        };
+    }
+    ngAfterViewInit() {
+        this._intersectionObserver = new IntersectionObserver(entries => {
+            this.checkForIntersection(entries);
+        }, {});
+        this._intersectionObserver.observe(this._element.nativeElement);
+    }
+    ngOnDestroy() {
+        if (this._intersectionObserver) {
+            this._intersectionObserver.disconnect();
+        }
+    }
+}
+/** @nocollapse */ InfiniteScrollComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: InfiniteScrollComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ InfiniteScrollComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: InfiniteScrollComponent, selector: "[onVisible]", outputs: { onVisible: "onVisible" }, host: { properties: { "style.height": "this.height" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: InfiniteScrollComponent, decorators: [{
+            type: Directive,
+            args: [{ selector: "[onVisible]" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onVisible: [{
+                type: Output
+            }], height: [{
+                type: HostBinding,
+                args: ['style.height']
+            }] } });
+
+class PagerBaseDirective {
+    constructor() {
+        this.limit = PagerBaseDirective.DEFAULT_LIMIT;
+        this.currentPage = 1;
+    }
+    calculatePages() {
+        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);
+        }
+    }
+}
+PagerBaseDirective.DEFAULT_LIMIT = 10;
+PagerBaseDirective.VISIBLE_PAGES = 5;
+PagerBaseDirective.SKIP_RESOURCE = 'offset';
+/** @nocollapse */ PagerBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: PagerBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ PagerBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: PagerBaseDirective, inputs: { totalCount: "totalCount", limit: "limit" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: PagerBaseDirective, decorators: [{
+            type: Directive
+        }], propDecorators: { totalCount: [{
+                type: Input
+            }], limit: [{
+                type: Input
+            }] } });
+
+class PagerComponent extends PagerBaseDirective {
+    constructor(activatedRoute) {
+        super();
+        this.activatedRoute = activatedRoute;
+        this.subscription = new Subscription();
+    }
+    ngOnInit() {
+        this.subscription.add(this.activatedRoute.queryParams.subscribe(params => {
+            if (params.offset) {
+                this.currentPage = (+params.offset / this.limit) + 1;
+            }
+            this.calculatePages();
+        }));
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+}
+/** @nocollapse */ PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: PagerComponent, deps: [{ token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: PagerComponent, selector: "adb-pager-nav", usesInheritance: true, ngImport: i0, template: "<nav *ngIf=\"pages&&pages.length>1&&currentPage<=amountOfPages\" class=\"d-flex justify-content-end pe-2 my-1\">\r\n    <ul class=\"pagination mb-0\">\r\n        <li class=\"page-item\" [class.disabled]=\"currentPage===1\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"{ offset: 0}\" queryParamsHandling=\"merge\">\r\n                <i class=\"fas fa-chevron-double-left\"></i>\r\n            </a>\r\n        </li>\r\n        <li class=\"page-item\" [class.disabled]=\"currentPage===1\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"{ offset: (currentPage-2)*limit}\"\r\n                queryParamsHandling=\"merge\">\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\" *ngFor=\"let page of pages\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"{ offset: (page-1)*limit}\"\r\n                queryParamsHandling=\"merge\">{{page}}</a>\r\n        </li>\r\n        <li class=\"page-item\" [class.disabled]=\"currentPage>=amountOfPages\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"{ offset: currentPage*limit}\"\r\n                queryParamsHandling=\"merge\">\r\n                <i class=\"fas fa-chevron-right\"></i>\r\n            </a>\r\n        </li>\r\n        <li *ngIf=\"(amountOfPages-1)*limit<10000\" class=\"page-item\" [class.disabled]=\"currentPage>=amountOfPages\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"{ offset: (amountOfPages-1)*limit}\"\r\n                queryParamsHandling=\"merge\">\r\n                <i class=\"fas fa-chevron-double-right\"></i>\r\n            </a>\r\n        </li>\r\n    </ul>\r\n</nav>", directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: PagerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'adb-pager-nav', template: "<nav *ngIf=\"pages&&pages.length>1&&currentPage<=amountOfPages\" class=\"d-flex justify-content-end pe-2 my-1\">\r\n    <ul class=\"pagination mb-0\">\r\n        <li class=\"page-item\" [class.disabled]=\"currentPage===1\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"{ offset: 0}\" queryParamsHandling=\"merge\">\r\n                <i class=\"fas fa-chevron-double-left\"></i>\r\n            </a>\r\n        </li>\r\n        <li class=\"page-item\" [class.disabled]=\"currentPage===1\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"{ offset: (currentPage-2)*limit}\"\r\n                queryParamsHandling=\"merge\">\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\" *ngFor=\"let page of pages\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"{ offset: (page-1)*limit}\"\r\n                queryParamsHandling=\"merge\">{{page}}</a>\r\n        </li>\r\n        <li class=\"page-item\" [class.disabled]=\"currentPage>=amountOfPages\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"{ offset: currentPage*limit}\"\r\n                queryParamsHandling=\"merge\">\r\n                <i class=\"fas fa-chevron-right\"></i>\r\n            </a>\r\n        </li>\r\n        <li *ngIf=\"(amountOfPages-1)*limit<10000\" class=\"page-item\" [class.disabled]=\"currentPage>=amountOfPages\">\r\n            <a class=\"page-link\" [routerLink]=\"[]\" [queryParams]=\"{ offset: (amountOfPages-1)*limit}\"\r\n                queryParamsHandling=\"merge\">\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: i1$1.ActivatedRoute }]; } });
+
+class PagersModule {
+}
+/** @nocollapse */ PagersModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: PagersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ PagersModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: PagersModule, declarations: [InfiniteScrollComponent, PagerComponent], imports: [CommonModule,
+        RouterModule], exports: [InfiniteScrollComponent, PagerComponent] });
+/** @nocollapse */ PagersModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: PagersModule, imports: [[
+            CommonModule,
+            RouterModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: PagersModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        RouterModule
+                    ],
+                    declarations: [InfiniteScrollComponent, PagerComponent],
+                    exports: [InfiniteScrollComponent, PagerComponent]
+                }]
+        }] });
+
+class LocaleDatePipe {
+    constructor(translate) {
+        this.translate = translate;
+    }
+    transform(value, format) {
+        return new DatePipe(this.translate.currentLang).transform(value, format, null, this.translate.currentLang);
+    }
+}
+/** @nocollapse */ LocaleDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: LocaleDatePipe, deps: [{ token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ LocaleDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: LocaleDatePipe, name: "adbLocaleDate", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: LocaleDatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'adbLocaleDate',
+                    pure: false
+                }]
+        }], ctorParameters: function () { return [{ type: i3.TranslateService }]; } });
+
+class HighlightPipe {
+    constructor() {
+        this.format = /[`!@#$%*\\()_+\-=\[\]{};':"\\|,<>\/?~]/g;
+    }
+    transform(value, searchs) {
+        if (!value) {
+            return value;
+        }
+        if (searchs) {
+            if (!Array.isArray(searchs)) {
+                searchs = searchs.split(' ').filter((s) => s);
+            }
+            for (let search of searchs) {
+                if (this.format.test(search)) {
+                    search = search.replace(this.format, '');
+                }
+                const reText = new RegExp(search, 'gi');
+                value = value.replace(reText, '<mark>$&</mark>');
+            }
+        }
+        return value;
+    }
+}
+/** @nocollapse */ HighlightPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: HighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ HighlightPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: HighlightPipe, name: "adbHighlight" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.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 */ NumberSpacingPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: NumberSpacingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ NumberSpacingPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: NumberSpacingPipe, name: "adbSpacing", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: NumberSpacingPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'adbSpacing',
+                    pure: false
+                }]
+        }] });
+
+class PipesModule {
+}
+/** @nocollapse */ PipesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: PipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ PipesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: PipesModule, declarations: [HighlightPipe, NumberSpacingPipe, LocaleDatePipe], exports: [HighlightPipe, NumberSpacingPipe, LocaleDatePipe] });
+/** @nocollapse */ PipesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: PipesModule, imports: [[]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: PipesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    declarations: [HighlightPipe, NumberSpacingPipe, LocaleDatePipe],
+                    exports: [HighlightPipe, NumberSpacingPipe, LocaleDatePipe]
+                }]
+        }] });
+
+class AdbDatePickerService {
+    constructor() {
+        this.dateSubject = new Subject();
+        this.date$ = this.dateSubject.asObservable();
+        this.hideSubject = new Subject();
+        this.hide$ = this.hideSubject.asObservable();
+        this.settingSubject = new BehaviorSubject(null);
+        this.settings$ = this.settingSubject.asObservable();
+    }
+    selectDate(date) {
+        this.dateSubject.next(date);
+    }
+    setSetting(settings) {
+        this.settingSubject.next(settings);
+    }
+    hide() {
+        this.hideSubject.next();
+    }
+}
+/** @nocollapse */ AdbDatePickerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDatePickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ AdbDatePickerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDatePickerService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDatePickerService, decorators: [{
+            type: Injectable
+        }] });
+
+class AdbDatePickerComponent {
+    constructor(adbDatePickerService) {
+        this.adbDatePickerService = adbDatePickerService;
+        this.subscriptions = new Subscription();
+        this.currentdDate = new Date();
+        this.selectedDate = new Date();
+        this.weekDays = AdbDatePickerComponent.WEEK_DAYS;
+    }
+    ngOnInit() {
+        this.subscriptions.add(this.adbDatePickerService.settings$.subscribe(settings => {
+            this.range = {
+                start: settings?.minDate ? startOfDay(settings.minDate) : null,
+                end: settings?.maxDate ? endOfDay(settings.maxDate) : null
+            };
+            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.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();
+        }
+    }
+    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();
+        }
+    }
+    onHide(target) {
+        if (!target.hasAttribute('adbdatepicker')) {
+            this.adbDatePickerService.hide();
+        }
+    }
+    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.adbDatePickerService.selectDate(day.value);
+    }
+    createCalendar() {
+        const weeks = [];
+        const monthInterval = { start: startOfMonth(this.selectedDate), end: endOfMonth(this.selectedDate) };
+        var fnsWweeks = eachWeekOfInterval(monthInterval);
+        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,
+                    isInRange: isWithinInterval(day, this.range),
+                    isToday: isSameDay(day, this.currentdDate),
+                    inMonth: monthInterval.start.getMonth() === day.getMonth()
+                };
+            });
+            weeks.push(week);
+        }
+        this.weeks = weeks;
+    }
+}
+AdbDatePickerComponent.MONTHS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+AdbDatePickerComponent.WEEK_DAYS = ['1', '2', '3', '4', '5', '6', '7'];
+AdbDatePickerComponent.YEAR_INTERVALL = 8;
+/** @nocollapse */ AdbDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDatePickerComponent, deps: [{ token: AdbDatePickerService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ AdbDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: AdbDatePickerComponent, selector: "adb-date-picker", ngImport: i0, template: "<nav class=\"bg-white shadow rounded\" style=\"width:350px\" (adbClickOutside)=\"onHide($event)\">\r\n    <header class=\"bg-primary p-2 rounded-top d-flex justify-content-between align-items-center gap-1\">\r\n        <button class=\"btn btn-primary text-white  rounded-pill\" type=\"button\" (click)=\"onPrev()\"><span class=\"fa fa-chevron-left\"></span></button>\r\n        <ng-container *ngIf=\"!years&&!months\">\r\n            <button class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowMonth()\">{{selectedDate|date:'MMM'}}</button>\r\n            <button class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowYear()\">{{selectedDate|date:'yyyy'}}</button>\r\n        </ng-container>\r\n        <button *ngIf=\"years\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"years=null\">{{years[0].title}} - {{years[years.length-1].title}}</button>\r\n        <button *ngIf=\"months\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowYear()\">{{selectedDate|date:'yyyy'}}</button>\r\n        <button class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onNext()\"><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 class=\"btn btn-sm btn-outline-secondary rounded-pill\" (click)=\"onSelectYear(year.value)\" [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 class=\"btn btn-sm btn-outline-secondary rounded-pill\" (click)=\"onSelectMonth(month.value)\" [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\">\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 class=\"btn rounded-circle p-0 m-2\" *ngFor=\"let day of week.days\" (click)=\"onSelectDate(day)\"\r\n                    [class.border]=\"day.isToday\" [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>", directives: [{ type: ClickOutsideDirective, selector: "[adbClickOutside]", outputs: ["adbClickOutside"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "date": i3$1.DatePipe, "translate": i3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'adb-date-picker', template: "<nav class=\"bg-white shadow rounded\" style=\"width:350px\" (adbClickOutside)=\"onHide($event)\">\r\n    <header class=\"bg-primary p-2 rounded-top d-flex justify-content-between align-items-center gap-1\">\r\n        <button class=\"btn btn-primary text-white  rounded-pill\" type=\"button\" (click)=\"onPrev()\"><span class=\"fa fa-chevron-left\"></span></button>\r\n        <ng-container *ngIf=\"!years&&!months\">\r\n            <button class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowMonth()\">{{selectedDate|date:'MMM'}}</button>\r\n            <button class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowYear()\">{{selectedDate|date:'yyyy'}}</button>\r\n        </ng-container>\r\n        <button *ngIf=\"years\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"years=null\">{{years[0].title}} - {{years[years.length-1].title}}</button>\r\n        <button *ngIf=\"months\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowYear()\">{{selectedDate|date:'yyyy'}}</button>\r\n        <button class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onNext()\"><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 class=\"btn btn-sm btn-outline-secondary rounded-pill\" (click)=\"onSelectYear(year.value)\" [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 class=\"btn btn-sm btn-outline-secondary rounded-pill\" (click)=\"onSelectMonth(month.value)\" [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\">\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 class=\"btn rounded-circle p-0 m-2\" *ngFor=\"let day of week.days\" (click)=\"onSelectDate(day)\"\r\n                    [class.border]=\"day.isToday\" [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>" }]
+        }], ctorParameters: function () { return [{ type: AdbDatePickerService }]; } });
+
+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.format = 'yyyy-MM-dd';
+        //TODO: convert to getter if this would become dynamic from server 
+        this.settings = null;
+        //ControlValueAccessor
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    ngOnInit() {
+        this.subscriptions.add(this.adbDatePickerService.date$.subscribe({
+            next: date => {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'value', formatDate(date, this.format, this.translate.currentLang));
+                this.onChange(date);
+                this.onHide();
+            }
+        }));
+        this.subscriptions.add(this.adbDatePickerService.hide$.subscribe({
+            next: () => {
+                this.onHide();
+            }
+        }));
+        if (this.settings?.maxDate || this.settings?.minDate) {
+            this.adbDatePickerService.setSetting({
+                minDate: AdbDatePickerDirective.parseDate(this.settings.minDate),
+                maxDate: AdbDatePickerDirective.parseDate(this.settings.maxDate)
+            });
+        }
+    }
+    onClick() {
+        if (!this.viewRef) {
+            this.viewRef = this.viewContainerRef.createComponent(AdbDatePickerComponent);
+        }
+    }
+    onHide() {
+        this.viewRef = null;
+        this.viewContainerRef.detach();
+        this.viewContainerRef.clear();
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    writeValue(value) {
+        if (value) {
+            let initialDate = AdbDatePickerDirective.parseDate(value);
+            if (initialDate) {
+                this.renderer.setProperty(this.elementRef.nativeElement, 'value', formatDate(initialDate, this.format, this.translate.currentLang));
+            }
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.viewContainerRef.clear();
+    }
+    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 */ AdbDatePickerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDatePickerDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: AdbDatePickerService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ AdbDatePickerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: AdbDatePickerDirective, selector: "input[adbDatepicker]", inputs: { format: "format", settings: "settings" }, host: { listeners: { "click": "onClick()", "keyup.esc": "onHide()" } }, providers: [{
+            provide: NG_VALUE_ACCESSOR, useExisting: forwardRef((() => AdbDatePickerDirective)),
+            multi: true
+        }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDatePickerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `input[adbDatepicker]`,
+                    providers: [{
+                            provide: NG_VALUE_ACCESSOR, useExisting: forwardRef((() => AdbDatePickerDirective)),
+                            multi: true
+                        }]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: AdbDatePickerService }, { type: i3.TranslateService }]; }, propDecorators: { format: [{
+                type: Input
+            }], settings: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onHide: [{
+                type: HostListener,
+                args: ['keyup.esc']
+            }] } });
+
+class AdbDatePickerModule {
+}
+/** @nocollapse */ AdbDatePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ AdbDatePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDatePickerModule, declarations: [AdbDatePickerComponent, AdbDatePickerDirective], imports: [CommonModule, TranslateModule, PipesModule, DirectivesModule], exports: [AdbDatePickerComponent, AdbDatePickerDirective] });
+/** @nocollapse */ AdbDatePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDatePickerModule, providers: [AdbDatePickerService], imports: [[CommonModule, TranslateModule, PipesModule, DirectivesModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AdbDatePickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, TranslateModule, PipesModule, DirectivesModule],
+                    declarations: [AdbDatePickerComponent, AdbDatePickerDirective],
+                    exports: [AdbDatePickerComponent, AdbDatePickerDirective],
+                    providers: [AdbDatePickerService]
+                }]
+        }] });
+
+/*
+ * Public API Surface of artdata-shared
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ADBHeaderComponent, ADBHeaderModule, AdbDatePickerComponent, AdbDatePickerDirective, AdbDatePickerModule, ClickOutsideDirective, DirectivesModule, FocusDirective, HighlightPipe, InfiniteScrollComponent, LocaleDatePipe, NumberSpacingPipe, PagerComponent, PagersModule, PipesModule };
+//# sourceMappingURL=adb-shared.mjs.map