adb-shared 1.0.16 → 1.0.19

package/bundles/adb-shared.umd.js

@@ -2,7 +2,7 @@
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@ngx-translate/core'), require('rxjs'), require('@angular/common/http'), require('@angular/router')) :
     typeof define === 'function' && define.amd ? define('adb-shared', ['exports', '@angular/common', '@angular/core', '@ngx-translate/core', 'rxjs', '@angular/common/http', '@angular/router'], factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["adb-shared"] = {}, global.ng.common, global.ng.core, global.i3, global.rxjs, global.ng.common.http, global.ng.router));
-})(this, (function (exports, i4, i0, i3, rxjs, i1, router) { 'use strict';
+})(this, (function (exports, i4, i0, i3, rxjs, i1, i1$1) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -26,6 +26,7 @@
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
+    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
 
     var EnvironmentService = /** @class */ (function () {
         function EnvironmentService(environment) {
@@ -132,7 +133,7 @@
         return ADBHeaderComponent;
     }());
     /** @nocollapse */ ADBHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: ADBHeaderComponent, deps: [{ token: i1__namespace.HttpClient }, { token: EnvironmentService }, { token: i3__namespace.TranslateService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ ADBHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: ADBHeaderComponent, selector: "adb-header2", inputs: { userName: "userName" }, outputs: { loginClicked: "loginClicked", logoutClicked: "logoutClicked", dropMenuChange: "dropMenuChange" }, ngImport: i0__namespace, 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\">Artfakta</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: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i3__namespace.TranslatePipe } });
+    /** @nocollapse */ ADBHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: ADBHeaderComponent, selector: "adb-header2", inputs: { userName: "userName" }, outputs: { loginClicked: "loginClicked", logoutClicked: "logoutClicked", dropMenuChange: "dropMenuChange" }, ngImport: i0__namespace, 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: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i3__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: ADBHeaderComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -213,13 +214,13 @@
     /** @nocollapse */ ADBHeaderModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: ADBHeaderModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
     /** @nocollapse */ ADBHeaderModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: ADBHeaderModule, declarations: [ADBHeaderComponent], imports: [i4.CommonModule,
             i1.HttpClientModule,
-            router.RouterModule,
+            i1$1.RouterModule,
             i3.TranslateModule,
             DirectivesModule], exports: [ADBHeaderComponent] });
     /** @nocollapse */ ADBHeaderModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: ADBHeaderModule, imports: [[
                 i4.CommonModule,
                 i1.HttpClientModule,
-                router.RouterModule,
+                i1$1.RouterModule,
                 i3.TranslateModule,
                 DirectivesModule
             ]] });
@@ -230,7 +231,7 @@
                         imports: [
                             i4.CommonModule,
                             i1.HttpClientModule,
-                            router.RouterModule,
+                            i1$1.RouterModule,
                             i3.TranslateModule,
                             DirectivesModule
                         ],
@@ -238,6 +239,48 @@
                     }]
             }] });
 
+    var InfiniteScrollComponent = /** @class */ (function () {
+        function InfiniteScrollComponent(_element) {
+            var _this = this;
+            this._element = _element;
+            this.onVisible = new i0.EventEmitter();
+            this.height = '1px';
+            this.checkForIntersection = function (entries) {
+                entries.forEach(function (entry) {
+                    var isIntersecting = entry.isIntersecting &&
+                        entry.target === _this._element.nativeElement;
+                    if (isIntersecting) {
+                        _this.onVisible.emit();
+                    }
+                });
+            };
+        }
+        InfiniteScrollComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            this._intersectionObserver = new IntersectionObserver(function (entries) {
+                _this.checkForIntersection(entries);
+            }, {});
+            this._intersectionObserver.observe(this._element.nativeElement);
+        };
+        InfiniteScrollComponent.prototype.ngOnDestroy = function () {
+            if (this._intersectionObserver) {
+                this._intersectionObserver.disconnect();
+            }
+        };
+        return InfiniteScrollComponent;
+    }());
+    /** @nocollapse */ InfiniteScrollComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: InfiniteScrollComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ InfiniteScrollComponent.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: InfiniteScrollComponent, selector: "[onVisible]", outputs: { onVisible: "onVisible" }, host: { properties: { "style.height": "this.height" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: InfiniteScrollComponent, decorators: [{
+                type: i0.Directive,
+                args: [{ selector: "[onVisible]" }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { onVisible: [{
+                    type: i0.Output
+                }], height: [{
+                    type: i0.HostBinding,
+                    args: ['style.height']
+                }] } });
+
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
 
@@ -556,58 +599,77 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
-    var InfiniteScrollComponent = /** @class */ (function () {
-        function InfiniteScrollComponent(host) {
-            this.host = host;
-            this.options = {};
-            this.scrolled = new i0.EventEmitter();
+    var PagerBaseDirective = /** @class */ (function () {
+        function PagerBaseDirective() {
+            this.limit = PagerBaseDirective.DEFAULT_LIMIT;
+            this.currentPage = 1;
         }
-        Object.defineProperty(InfiniteScrollComponent.prototype, "element", {
-            get: function () {
-                return this.host.nativeElement;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        InfiniteScrollComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            var options = Object.assign({ root: this.isHostScrollable() ? this.host.nativeElement : null }, this.options);
-            this.observer = new IntersectionObserver(function (_b) {
-                var _c = __read(_b, 1), entry = _c[0];
-                // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-                entry.isIntersecting && _this.scrolled.emit();
-            }, options);
-        };
-        InfiniteScrollComponent.prototype.ngAfterViewInit = function () {
-            this.observer.observe(this.anchor.nativeElement);
+        PagerBaseDirective.prototype.calculatePages = function () {
+            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
+                ];
+                var 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) {
+                var max = this.amountOfPages > PagerBaseDirective.VISIBLE_PAGES ? 5 : this.amountOfPages;
+                this.pages = Array(Math.ceil(max)).fill(1).map(function (x, i) { return i + 1; });
+            }
         };
-        InfiniteScrollComponent.prototype.isHostScrollable = function () {
-            var style = window.getComputedStyle(this.element);
-            return style.getPropertyValue('overflow') === 'auto' ||
-                style.getPropertyValue('overflow-y') === 'scroll';
+        return PagerBaseDirective;
+    }());
+    PagerBaseDirective.DEFAULT_LIMIT = 10;
+    PagerBaseDirective.VISIBLE_PAGES = 5;
+    PagerBaseDirective.SKIP_RESOURCE = 'offset';
+    /** @nocollapse */ PagerBaseDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: PagerBaseDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ PagerBaseDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: PagerBaseDirective, inputs: { totalCount: "totalCount", limit: "limit" }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: PagerBaseDirective, decorators: [{
+                type: i0.Directive
+            }], propDecorators: { totalCount: [{
+                    type: i0.Input
+                }], limit: [{
+                    type: i0.Input
+                }] } });
+
+    var PagerComponent = /** @class */ (function (_super) {
+        __extends(PagerComponent, _super);
+        function PagerComponent(activatedRoute) {
+            var _this = _super.call(this) || this;
+            _this.activatedRoute = activatedRoute;
+            _this.subscription = new rxjs.Subscription();
+            return _this;
+        }
+        PagerComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.subscription.add(this.activatedRoute.queryParams.subscribe(function (params) {
+                if (params.offset) {
+                    _this.currentPage = (+params.offset / _this.limit) + 1;
+                }
+                _this.calculatePages();
+            }));
         };
-        InfiniteScrollComponent.prototype.ngOnDestroy = function () {
-            var _a;
-            (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        PagerComponent.prototype.ngOnDestroy = function () {
+            this.subscription.unsubscribe();
         };
-        return InfiniteScrollComponent;
-    }());
-    /** @nocollapse */ InfiniteScrollComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: InfiniteScrollComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ InfiniteScrollComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: InfiniteScrollComponent, selector: "adb-infinite-scroll", inputs: { options: "options" }, outputs: { scrolled: "scrolled" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true }], ngImport: i0__namespace, template: '<ng-content></ng-content><div #anchor></div>', isInline: true });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: InfiniteScrollComponent, decorators: [{
+        return PagerComponent;
+    }(PagerBaseDirective));
+    /** @nocollapse */ PagerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: PagerComponent, deps: [{ token: i1__namespace$1.ActivatedRoute }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ PagerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: PagerComponent, selector: "adb-pager-nav", usesInheritance: true, ngImport: i0__namespace, 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: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: PagerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'adb-infinite-scroll',
-                        template: '<ng-content></ng-content><div #anchor></div>'
+                        selector: 'adb-pager-nav',
+                        templateUrl: 'pager.html'
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { options: [{
-                    type: i0.Input
-                }], scrolled: [{
-                    type: i0.Output
-                }], anchor: [{
-                    type: i0.ViewChild,
-                    args: ['anchor']
-                }] } });
+            }], ctorParameters: function () { return [{ type: i1__namespace$1.ActivatedRoute }]; } });
 
     var PagersModule = /** @class */ (function () {
         function PagersModule() {
@@ -615,14 +677,21 @@
         return PagersModule;
     }());
     /** @nocollapse */ PagersModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: PagersModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    /** @nocollapse */ PagersModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: PagersModule, declarations: [InfiniteScrollComponent], exports: [InfiniteScrollComponent] });
-    /** @nocollapse */ PagersModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: PagersModule, imports: [[]] });
+    /** @nocollapse */ PagersModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: PagersModule, declarations: [InfiniteScrollComponent, PagerComponent], imports: [i4.CommonModule,
+            i1$1.RouterModule], exports: [InfiniteScrollComponent, PagerComponent] });
+    /** @nocollapse */ PagersModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: PagersModule, imports: [[
+                i4.CommonModule,
+                i1$1.RouterModule
+            ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: PagersModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        imports: [],
-                        declarations: [InfiniteScrollComponent],
-                        exports: [InfiniteScrollComponent],
+                        imports: [
+                            i4.CommonModule,
+                            i1$1.RouterModule
+                        ],
+                        declarations: [InfiniteScrollComponent, PagerComponent],
+                        exports: [InfiniteScrollComponent, PagerComponent]
                     }]
             }] });
 
@@ -639,6 +708,7 @@
     exports.ClickOutsideDirective = ClickOutsideDirective;
     exports.DirectivesModule = DirectivesModule;
     exports.InfiniteScrollComponent = InfiniteScrollComponent;
+    exports.PagerComponent = PagerComponent;
     exports.PagersModule = PagersModule;
 
     Object.defineProperty(exports, '__esModule', { value: true });