@indice/ng-components 0.2.151-beta → 0.2.152-beta.2

package/fesm2015/{indice-ng-components.js → indice-ng-components.mjs}

@@ -1,12 +1,13 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, PLATFORM_ID, Directive, Inject, Input, Output, Component, TemplateRef, ContentChild, ContentChildren, forwardRef, ViewChild, Injectable, InjectionToken, Injector, ElementRef, ViewChildren, Pipe, ViewEncapsulation, HostListener, Optional, NgModule } from '@angular/core';
+import { EventEmitter, PLATFORM_ID, Directive, Inject, Input, Output, Component, TemplateRef, ContentChild, ContentChildren, forwardRef, ViewChild, Injectable, ViewEncapsulation, ChangeDetectionStrategy, InjectionToken, Injector, ElementRef, ViewChildren, Pipe, HostListener, Optional, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/router';
-import { NavigationStart, Router, ActivationStart, RouterModule } from '@angular/router';
+import { Router, NavigationStart, ActivatedRoute, ActivationStart, RouterModule } from '@angular/router';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { BehaviorSubject, Subject, of, Observable, fromEvent } from 'rxjs';
-import { filter, map, debounceTime, distinctUntilChanged, startWith, catchError } from 'rxjs/operators';
+import { BehaviorSubject, Subject, of, fromEvent } from 'rxjs';
+import { filter, debounceTime, distinctUntilChanged, share, map } from 'rxjs/operators';
+import * as uuid from 'uuid';
 import * as i2 from '@indice/ng-auth';
 import { AuthService, IndiceAuthModule } from '@indice/ng-auth';
 
@@ -167,15 +168,17 @@ class ClickOutsideDirective {
         });
     }
 }
-ClickOutsideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive });
-ClickOutsideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.1", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: { clickOutsideEnabled: "clickOutsideEnabled", attachOutsideOnClick: "attachOutsideOnClick", delayClickOutsideInit: "delayClickOutsideInit", emitOnBlur: "emitOnBlur", exclude: "exclude", excludeBeforeClick: "excludeBeforeClick", clickOutsideEvents: "clickOutsideEvents" }, outputs: { clickOutside: "clickOutside" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+ClickOutsideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive });
+ClickOutsideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: { clickOutsideEnabled: "clickOutsideEnabled", attachOutsideOnClick: "attachOutsideOnClick", delayClickOutsideInit: "delayClickOutsideInit", emitOnBlur: "emitOnBlur", exclude: "exclude", excludeBeforeClick: "excludeBeforeClick", clickOutsideEvents: "clickOutsideEvents" }, outputs: { clickOutside: "clickOutside" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ClickOutsideDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[clickOutside]' }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }]; }, propDecorators: { clickOutsideEnabled: [{
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [PLATFORM_ID]
+                    }] }];
+    }, propDecorators: { clickOutsideEnabled: [{
                 type: Input
             }], attachOutsideOnClick: [{
                 type: Input
@@ -237,15 +240,11 @@ class DropDownMenuComponent {
         this.selectedChanged.emit(option.value);
     }
 }
-DropDownMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: DropDownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DropDownMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: { options: "options", selectedValue: ["selected", "selectedValue"], multiple: "multiple", placeholder: "placeholder" }, outputs: { selectedChange: "selectedChange", selectedChanged: "selectedChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dropdown-container\" (clickOutside)=\"onClickOutside($event)\">\r\n  <button\r\n    type=\"button\"\r\n    (click)=\"expanded = !expanded\"\r\n    class=\"dropdown-button\"\r\n    aria-haspopup=\"listbox\"\r\n    aria-expanded=\"true\"\r\n    aria-labelledby=\"listbox-label\"\r\n  >\r\n    <span class=\"dropdown-selected-text\">\r\n      {{ selectedOption?.text || placeholder }}\r\n    </span>\r\n    <span class=\"dropdown-button-icon\">\r\n      <!-- Heroicon name: solid/selector -->\r\n      <svg class=\"dropdown-arrow\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          d=\"M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z\"\r\n          clip-rule=\"evenodd\"\r\n        />\r\n      </svg>\r\n    </span>\r\n  </button>\r\n  <ul\r\n    *ngIf=\"expanded && options && options.length > 0\"\r\n    class=\"dropdown-ul\"\r\n    tabindex=\"-1\"\r\n    role=\"listbox\"\r\n    aria-labelledby=\"listbox-label\"\r\n    aria-activedescendant=\"listbox-option-3\"\r\n  >\r\n    <ng-container *ngFor=\"let option of options\">\r\n      <li\r\n        [class]=\"isSelected(option) ? 'dropdown-li-selected' : 'dropdown-li'\"\r\n        (click)=\"selectOption(option)\"\r\n        id=\"listbox-option-0\"\r\n        role=\"option\"\r\n      >\r\n        <span [class]=\"isSelected(option) ? 'dropdown-li-selected-text' : 'dropdown-li-text'\">\r\n          {{ option.text }}\r\n        </span>\r\n        <span *ngIf=\"isSelected(option)\" class=\"dropdown-li-selected-indicator-container\">\r\n          <!-- Heroicon name: solid/check -->\r\n          <svg\r\n            class=\"dropdown-li-selected-indicator\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            viewBox=\"0 0 20 20\"\r\n            fill=\"currentColor\"\r\n            aria-hidden=\"true\"\r\n          >\r\n            <path\r\n              fill-rule=\"evenodd\"\r\n              d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\r\n              clip-rule=\"evenodd\"\r\n            />\r\n          </svg>\r\n        </span>\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n</div>\r\n", directives: [{ type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: DropDownMenuComponent, decorators: [{
+DropDownMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DropDownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DropDownMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: { options: "options", selectedValue: ["selected", "selectedValue"], multiple: "multiple", placeholder: "placeholder" }, outputs: { selectedChange: "selectedChange", selectedChanged: "selectedChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dropdown-container\" (clickOutside)=\"onClickOutside($event)\">\r\n  <button\r\n    type=\"button\"\r\n    (click)=\"expanded = !expanded\"\r\n    class=\"dropdown-button\"\r\n    aria-haspopup=\"listbox\"\r\n    aria-expanded=\"true\"\r\n    aria-labelledby=\"listbox-label\"\r\n  >\r\n    <span class=\"dropdown-selected-text\">\r\n      {{ selectedOption?.text || placeholder }}\r\n    </span>\r\n    <span class=\"dropdown-button-icon\">\r\n      <!-- Heroicon name: solid/selector -->\r\n      <svg class=\"dropdown-arrow\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          d=\"M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z\"\r\n          clip-rule=\"evenodd\"\r\n        />\r\n      </svg>\r\n    </span>\r\n  </button>\r\n  <ul\r\n    *ngIf=\"expanded && options && options.length > 0\"\r\n    class=\"dropdown-ul\"\r\n    tabindex=\"-1\"\r\n    role=\"listbox\"\r\n    aria-labelledby=\"listbox-label\"\r\n    aria-activedescendant=\"listbox-option-3\"\r\n  >\r\n    <ng-container *ngFor=\"let option of options\">\r\n      <li\r\n        [class]=\"isSelected(option) ? 'dropdown-li-selected' : 'dropdown-li'\"\r\n        (click)=\"selectOption(option)\"\r\n        id=\"listbox-option-0\"\r\n        role=\"option\"\r\n      >\r\n        <span [class]=\"isSelected(option) ? 'dropdown-li-selected-text' : 'dropdown-li-text'\">\r\n          {{ option.text }}\r\n        </span>\r\n        <span *ngIf=\"isSelected(option)\" class=\"dropdown-li-selected-indicator-container\">\r\n          <!-- Heroicon name: solid/check -->\r\n          <svg\r\n            class=\"dropdown-li-selected-indicator\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            viewBox=\"0 0 20 20\"\r\n            fill=\"currentColor\"\r\n            aria-hidden=\"true\"\r\n          >\r\n            <path\r\n              fill-rule=\"evenodd\"\r\n              d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\r\n              clip-rule=\"evenodd\"\r\n            />\r\n          </svg>\r\n        </span>\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DropDownMenuComponent, decorators: [{
             type: Component,
-            args: [{
-                    // tslint:disable-next-line:component-selector
-                    selector: 'lib-drop-down-menu',
-                    templateUrl: './drop-down-menu.component.html',
-                }]
+            args: [{ selector: 'lib-drop-down-menu', template: "<div class=\"dropdown-container\" (clickOutside)=\"onClickOutside($event)\">\r\n  <button\r\n    type=\"button\"\r\n    (click)=\"expanded = !expanded\"\r\n    class=\"dropdown-button\"\r\n    aria-haspopup=\"listbox\"\r\n    aria-expanded=\"true\"\r\n    aria-labelledby=\"listbox-label\"\r\n  >\r\n    <span class=\"dropdown-selected-text\">\r\n      {{ selectedOption?.text || placeholder }}\r\n    </span>\r\n    <span class=\"dropdown-button-icon\">\r\n      <!-- Heroicon name: solid/selector -->\r\n      <svg class=\"dropdown-arrow\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          d=\"M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z\"\r\n          clip-rule=\"evenodd\"\r\n        />\r\n      </svg>\r\n    </span>\r\n  </button>\r\n  <ul\r\n    *ngIf=\"expanded && options && options.length > 0\"\r\n    class=\"dropdown-ul\"\r\n    tabindex=\"-1\"\r\n    role=\"listbox\"\r\n    aria-labelledby=\"listbox-label\"\r\n    aria-activedescendant=\"listbox-option-3\"\r\n  >\r\n    <ng-container *ngFor=\"let option of options\">\r\n      <li\r\n        [class]=\"isSelected(option) ? 'dropdown-li-selected' : 'dropdown-li'\"\r\n        (click)=\"selectOption(option)\"\r\n        id=\"listbox-option-0\"\r\n        role=\"option\"\r\n      >\r\n        <span [class]=\"isSelected(option) ? 'dropdown-li-selected-text' : 'dropdown-li-text'\">\r\n          {{ option.text }}\r\n        </span>\r\n        <span *ngIf=\"isSelected(option)\" class=\"dropdown-li-selected-indicator-container\">\r\n          <!-- Heroicon name: solid/check -->\r\n          <svg\r\n            class=\"dropdown-li-selected-indicator\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            viewBox=\"0 0 20 20\"\r\n            fill=\"currentColor\"\r\n            aria-hidden=\"true\"\r\n          >\r\n            <path\r\n              fill-rule=\"evenodd\"\r\n              d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\r\n              clip-rule=\"evenodd\"\r\n            />\r\n          </svg>\r\n        </span>\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { options: [{
                 type: Input
             }], selectedValue: [{
@@ -291,33 +290,38 @@ Icons.Expand = 'ms-Icon ms-Icon--ChevronDown';
 Icons.Collapse = 'ms-Icon ms-Icon--ChevronUp';
 Icons.SortAsc = 'ms-Icon ms-Icon--Ascending';
 Icons.SortDesc = 'ms-Icon ms-Icon--Descending';
-Icons.Details = ' ms-Icon ms-Icon--AccountActivity';
+Icons.Details = ' ms-Icon ms-Icon--AccountActivity';
+Icons.Messages = ' ms-Icon ms-Icon--Message';
+Icons.MessagesUnread = ' ms-Icon ms-Icon--MessageFill';
 
 class NavLink {
-    constructor(text, path, exact = false, external = false, icon, isRead, creationDate) {
-        this.isRead = false;
+    constructor(text, path, exact = false, external = false, icon, data) {
+        this.type = 'router';
         this.text = text;
         this.path = path;
         this.exact = exact;
         this.external = external;
         this.icon = icon;
-        this.isRead = isRead;
-        this.creationDate = creationDate;
+        this.data = data;
     }
 }
 class ExternalNavLink extends NavLink {
     constructor(text, path, openInNewTab, icon) {
         super(text, path, true, openInNewTab, icon);
+        this.type = 'external';
     }
 }
 class FragmentNavLink extends NavLink {
     constructor(text, path, icon) {
         super(text, path, true, true, icon);
+        this.type = 'fragment';
     }
 }
 class NotificationNavLink extends NavLink {
     constructor(text, path, isRead, creationDate) {
-        super(text, path, true, false, undefined, isRead, creationDate);
+        super(text, path, true, false, undefined);
+        this.isRead = isRead;
+        this.creationDate = creationDate;
     }
 }
 class ViewAction {
@@ -365,13 +369,19 @@ class MenuOption {
         this.icon = icon;
     }
 }
+var ShellLayoutType;
+(function (ShellLayoutType) {
+    ShellLayoutType["Stacked"] = "Stacked";
+    ShellLayoutType["Sidebar"] = "Sidebar";
+})(ShellLayoutType || (ShellLayoutType = {}));
 class DefaultShellConfig {
     constructor() {
+        this.layout = ShellLayoutType.Stacked;
         this.appLogo = 'https://tailwindui.com/img/logos/workflow-mark.svg?color=white';
         this.appLogoAlt = 'your app name here';
         this.showHeader = true;
         this.showUserNameOnHeader = false;
-        this.showNotifications = false;
+        this.showAlertsOnHeader = false;
         this.showFooter = true;
         this.fluid = false;
     }
@@ -494,14 +504,11 @@ class PagerComponent {
         this.sortdirChanged.emit(sortdir);
     }
 }
-PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: PagerComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: PagerComponent, selector: "lib-pager", inputs: { busy: "busy", count: "count", page: "page", pageSize: ["page-size", "pageSize"], pageSizeOptions: ["page-size-options", "pageSizeOptions"], sortOptions: ["sort-options", "sortOptions"], sort: "sort", sortdir: ["sort-dir", "sortdir"] }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", sortChanged: "sortChanged", sortdirChanged: "sortdirChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pager-container\">\r\n  <div class=\"pager-container-inner\">\r\n    <div class=\"inline-flex\" *ngIf=\"sortOptions && sortOptions.length > 0\">\r\n      <lib-drop-down-menu [options]=\"sortOptions\" [selected]=\"sort\" (selectedChanged)=\"sortOptionChanged($event)\"></lib-drop-down-menu>\r\n      <button (click)=\"toggleSortdir()\" [disabled]=\"!sort || busy\" class=\"pager-icon-button\">\r\n        <span class=\"sr-only\">sort direction</span>\r\n        <span class=\"inline-block relative\">\r\n          <i [class]=\"sortdirIcon\"></i>\r\n        </span>\r\n      </button>\r\n    </div>\r\n    <div class=\"pager-pages-container\">\r\n      <lib-drop-down-menu [options]=\"pageSizeOptions\" [selected]=\"pageSize\" (selectedChanged)=\"pageSizeOptionChanged($event)\"></lib-drop-down-menu>\r\n      <div class=\"mx-2\"  *ngIf=\"count !== null && count > pageSize\">\r\n        <button [disabled]=\"!canPreviousPage || busy\"  (click)=\"previousPage()\"\r\n                class=\"pager-arrow-button-left\">\r\n          <span class=\"sr-only\">Previous</span>\r\n          <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n            <path fill-rule=\"evenodd\" d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n          </svg>\r\n        </button>\r\n        <button [disabled]=\"!canNextPage || busy\"  (click)=\"nextPage()\"\r\n                class=\"pager-arrow-button-right\">\r\n          <span class=\"sr-only\">Next</span>\r\n          <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n            <path fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n      <lib-drop-down-menu *ngIf=\"(pages && pages.length > 0) && (count !== null && count > pageSize)\" [options]=\"pages\" [selected]=\"page\" (selectedChanged)=\"pageOptionChanged($event)\"></lib-drop-down-menu>\r\n    </div>\r\n  </div>\r\n</div>\r\n", components: [{ type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: ["options", "selected", "multiple", "placeholder"], outputs: ["selectedChange", "selectedChanged"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: PagerComponent, decorators: [{
+PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: PagerComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: PagerComponent, selector: "lib-pager", inputs: { busy: "busy", count: "count", page: "page", pageSize: ["page-size", "pageSize"], pageSizeOptions: ["page-size-options", "pageSizeOptions"], sortOptions: ["sort-options", "sortOptions"], sort: "sort", sortdir: ["sort-dir", "sortdir"] }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", sortChanged: "sortChanged", sortdirChanged: "sortdirChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pager-container\">\r\n  <div class=\"pager-container-inner\">\r\n    <div class=\"inline-flex\" *ngIf=\"sortOptions && sortOptions.length > 0\">\r\n      <lib-drop-down-menu [options]=\"sortOptions\" [selected]=\"sort\" (selectedChanged)=\"sortOptionChanged($event)\"></lib-drop-down-menu>\r\n      <button (click)=\"toggleSortdir()\" [disabled]=\"!sort || busy\" class=\"pager-icon-button\">\r\n        <span class=\"sr-only\">sort direction</span>\r\n        <span class=\"inline-block relative\">\r\n          <i [class]=\"sortdirIcon\"></i>\r\n        </span>\r\n      </button>\r\n    </div>\r\n    <div class=\"pager-pages-container\">\r\n      <lib-drop-down-menu [options]=\"pageSizeOptions\" [selected]=\"pageSize\" (selectedChanged)=\"pageSizeOptionChanged($event)\"></lib-drop-down-menu>\r\n      <div class=\"mx-2\"  *ngIf=\"count !== null && count > pageSize\">\r\n        <button [disabled]=\"!canPreviousPage || busy\"  (click)=\"previousPage()\"\r\n                class=\"pager-arrow-button-left\">\r\n          <span class=\"sr-only\">Previous</span>\r\n          <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n            <path fill-rule=\"evenodd\" d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n          </svg>\r\n        </button>\r\n        <button [disabled]=\"!canNextPage || busy\"  (click)=\"nextPage()\"\r\n                class=\"pager-arrow-button-right\">\r\n          <span class=\"sr-only\">Next</span>\r\n          <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n            <path fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n      <lib-drop-down-menu *ngIf=\"(pages && pages.length > 0) && (count !== null && count > pageSize)\" [options]=\"pages\" [selected]=\"page\" (selectedChanged)=\"pageOptionChanged($event)\"></lib-drop-down-menu>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: ["options", "selected", "multiple", "placeholder"], outputs: ["selectedChange", "selectedChanged"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: PagerComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'lib-pager',
-                    templateUrl: './pager.component.html'
-                }]
+            args: [{ selector: 'lib-pager', template: "<div class=\"pager-container\">\r\n  <div class=\"pager-container-inner\">\r\n    <div class=\"inline-flex\" *ngIf=\"sortOptions && sortOptions.length > 0\">\r\n      <lib-drop-down-menu [options]=\"sortOptions\" [selected]=\"sort\" (selectedChanged)=\"sortOptionChanged($event)\"></lib-drop-down-menu>\r\n      <button (click)=\"toggleSortdir()\" [disabled]=\"!sort || busy\" class=\"pager-icon-button\">\r\n        <span class=\"sr-only\">sort direction</span>\r\n        <span class=\"inline-block relative\">\r\n          <i [class]=\"sortdirIcon\"></i>\r\n        </span>\r\n      </button>\r\n    </div>\r\n    <div class=\"pager-pages-container\">\r\n      <lib-drop-down-menu [options]=\"pageSizeOptions\" [selected]=\"pageSize\" (selectedChanged)=\"pageSizeOptionChanged($event)\"></lib-drop-down-menu>\r\n      <div class=\"mx-2\"  *ngIf=\"count !== null && count > pageSize\">\r\n        <button [disabled]=\"!canPreviousPage || busy\"  (click)=\"previousPage()\"\r\n                class=\"pager-arrow-button-left\">\r\n          <span class=\"sr-only\">Previous</span>\r\n          <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n            <path fill-rule=\"evenodd\" d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n          </svg>\r\n        </button>\r\n        <button [disabled]=\"!canNextPage || busy\"  (click)=\"nextPage()\"\r\n                class=\"pager-arrow-button-right\">\r\n          <span class=\"sr-only\">Next</span>\r\n          <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n            <path fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n      <lib-drop-down-menu *ngIf=\"(pages && pages.length > 0) && (count !== null && count > pageSize)\" [options]=\"pages\" [selected]=\"page\" (selectedChanged)=\"pageOptionChanged($event)\"></lib-drop-down-menu>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: i1$1.Router }]; }, propDecorators: { busy: [{
                 type: Input
             }], count: [{
@@ -538,9 +545,9 @@ class ListTileComponent {
         this.template = null;
     }
 }
-ListTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ListTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ListTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ListTileComponent, selector: "lib-list-tile", queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ListTileComponent, decorators: [{
+ListTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ListTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ListTileComponent, selector: "lib-list-tile", queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListTileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-list-tile', template: '<ng-content></ng-content>' }]
         }], ctorParameters: function () { return []; }, propDecorators: { template: [{
@@ -556,9 +563,9 @@ class ListColumnComponent {
         this.template = null;
     }
 }
-ListColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ListColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ListColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ListColumnComponent, selector: "lib-list-column", inputs: { title: "title", fullWidth: ["full-width", "fullWidth"] }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ListColumnComponent, decorators: [{
+ListColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ListColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ListColumnComponent, selector: "lib-list-column", inputs: { title: "title", fullWidth: ["full-width", "fullWidth"] }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListColumnComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-list-column', template: '<ng-content></ng-content>' }]
         }], ctorParameters: function () { return []; }, propDecorators: { title: [{
@@ -576,9 +583,9 @@ class ListDetailsSectionComponent {
         this.template = null;
     }
 }
-ListDetailsSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ListDetailsSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ListDetailsSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ListDetailsSectionComponent, selector: "lib-list-details-section", queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ListDetailsSectionComponent, decorators: [{
+ListDetailsSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListDetailsSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ListDetailsSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ListDetailsSectionComponent, selector: "lib-list-details-section", queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListDetailsSectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-list-details-section', template: '<ng-content></ng-content>' }]
         }], ctorParameters: function () { return []; }, propDecorators: { template: [{
@@ -586,32 +593,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImpor
                 args: [TemplateRef]
             }] } });
 
-class SkeletonLoaderComponent {
-    constructor() {
-        this.count = 5;
-        this.type = 'tiles'; // 'large-tile', 'table'
-    }
-    ngOnInit() {
-    }
-    counter(i) {
-        return new Array(i);
-    }
-}
-SkeletonLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: SkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkeletonLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: SkeletonLoaderComponent, selector: "lib-skeleton-loader", inputs: { count: "count", type: "type" }, ngImport: i0, template: "<!-- <h1>SKELETON LOADER!</h1> -->\r\n<ng-container *ngSwitch=\"type\">\r\n  <div class=\"cards-deck-4\" *ngSwitchCase=\"'tiles'\">\r\n    <ng-container *ngFor=\"let i of counter(count)\">\r\n      <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\r\n        <div class=\"animate-pulse flex flex-col\">\r\n          <div class=\"rounded w-full h-32 bg-gray-200\"></div>\r\n          <div class=\"flex flex-col mt-5\">\r\n            <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1\">\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"flex items-center mt-5\">\r\n            <div>\r\n              <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\r\n            </div>\r\n            <div class=\"flex justify-between w-full ml-3\">\r\n              <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\r\n              <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"cards-deck-3\" *ngSwitchCase=\"'large-tiles'\">\r\n    <ng-container *ngFor=\"let i of counter(count)\">\r\n      <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\r\n        <div class=\"animate-pulse flex flex-col\">\r\n          <div class=\"rounded w-full h-52 bg-gray-200\"></div>\r\n          <div class=\"flex flex-col mt-5\">\r\n            <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1\">\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"flex items-center mt-5\">\r\n            <div>\r\n              <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\r\n            </div>\r\n            <div class=\"flex justify-between w-full ml-3\">\r\n              <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\r\n              <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"cards-deck-1\" *ngSwitchCase=\"'table'\">\r\n    <ng-container *ngFor=\"let i of counter(count)\">\r\n      <div class=\"border border-light-blue-300 shadow rounded-sm p-4 max-w-sm w-full mx-auto mb-4\">\r\n        <div class=\"animate-pulse flex space-x-4\">\r\n          <div class=\"rounded-full bg-light-blue-400 h-12 w-12\">&nbsp;</div>\r\n          <div class=\"flex-1 space-y-4 py-1\">\r\n            <div class=\"h-4 bg-light-blue-400 rounded w-3/4\">&nbsp;</div>\r\n            <div class=\"space-y-2\">\r\n              <div class=\"h-4 bg-light-blue-400 rounded\">&nbsp;</div>\r\n              <div class=\"h-4 bg-light-blue-400 rounded w-5/6\">&nbsp;</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"cards-deck-3\" *ngSwitchDefault>\r\n    <ng-container *ngFor=\"let i of counter(count)\">\r\n      <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\r\n        <div class=\"animate-pulse flex flex-col\">\r\n          <div class=\"rounded w-full h-52 bg-gray-200\"></div>\r\n          <div class=\"flex flex-col mt-5\">\r\n            <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1\">\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"flex items-center mt-5\">\r\n            <div>\r\n              <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\r\n            </div>\r\n            <div class=\"flex justify-between w-full ml-3\">\r\n              <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\r\n              <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-container>\r\n", directives: [{ type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: SkeletonLoaderComponent, decorators: [{
-            type: Component,
-            args: [{
-                    // tslint:disable-next-line:component-selector
-                    selector: 'lib-skeleton-loader',
-                    templateUrl: './skeleton-loader.component.html'
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { count: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }] } });
-
 class ListViewEmptyStateComponent {
     constructor() {
         this.title = 'Δεν βρέθηκαν εγγραφές.';
@@ -623,14 +604,11 @@ class ListViewEmptyStateComponent {
     ngOnInit() {
     }
 }
-ListViewEmptyStateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ListViewEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ListViewEmptyStateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: { title: "title", subTitle: ["sub-title", "subTitle"], newItemLabel: ["new-item-label", "newItemLabel"] }, ngImport: i0, template: "<div class=\"p-20\">\r\n  <div class=\"text-center p-2\">\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-auto h-12 w-12 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4\" />\r\n    </svg>\r\n    <h3 class=\"mt-2 text-sm font-medium text-gray-900\">{{title}}</h3>\r\n    <p class=\"mt-1 text-sm text-gray-500\">\r\n      {{subTitle}}\r\n    </p>\r\n    <div class=\"mt-6\" *ngIf=\"false\">\r\n      <button type=\"button\" class=\"inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-gray-500\">\r\n        <!-- Heroicon name: solid/plus -->\r\n        <svg class=\"-ml-1 mr-2 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n          <path vector-effect=\"non-scaling-stroke\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z\" />\r\n        </svg>\r\n        {{newItemLabel}}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ListViewEmptyStateComponent, decorators: [{
+ListViewEmptyStateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListViewEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ListViewEmptyStateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: { title: "title", subTitle: ["sub-title", "subTitle"], newItemLabel: ["new-item-label", "newItemLabel"] }, ngImport: i0, template: "<div class=\"p-20\">\n  <div class=\"text-center p-2\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-auto h-12 w-12 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4\" />\n    </svg>\n    <h3 class=\"mt-2 text-sm font-medium text-gray-900\">{{title}}</h3>\n    <p class=\"mt-1 text-sm text-gray-500\">\n      {{subTitle}}\n    </p>\n    <div class=\"mt-6\" *ngIf=\"false\">\n      <button type=\"button\" class=\"inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-gray-500\">\n        <!-- Heroicon name: solid/plus -->\n        <svg class=\"-ml-1 mr-2 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\n          <path vector-effect=\"non-scaling-stroke\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z\" />\n        </svg>\n        {{newItemLabel}}\n      </button>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListViewEmptyStateComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'lib-list-view-empty-state',
-                    templateUrl: './list-view-empty-state.component.html'
-                }]
+            args: [{ selector: 'lib-list-view-empty-state', template: "<div class=\"p-20\">\n  <div class=\"text-center p-2\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-auto h-12 w-12 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4\" />\n    </svg>\n    <h3 class=\"mt-2 text-sm font-medium text-gray-900\">{{title}}</h3>\n    <p class=\"mt-1 text-sm text-gray-500\">\n      {{subTitle}}\n    </p>\n    <div class=\"mt-6\" *ngIf=\"false\">\n      <button type=\"button\" class=\"inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-gray-500\">\n        <!-- Heroicon name: solid/plus -->\n        <svg class=\"-ml-1 mr-2 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\n          <path vector-effect=\"non-scaling-stroke\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z\" />\n        </svg>\n        {{newItemLabel}}\n      </button>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { title: [{
                 type: Input
             }], subTitle: [{
@@ -641,6 +619,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImpor
                 args: ['new-item-label']
             }] } });
 
+class SkeletonLoaderComponent {
+    constructor() {
+        this.count = 5;
+        this.type = 'tiles'; // 'large-tile', 'table'
+    }
+    ngOnInit() {
+    }
+    counter(i) {
+        return new Array(i);
+    }
+}
+SkeletonLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkeletonLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: SkeletonLoaderComponent, selector: "lib-skeleton-loader", inputs: { count: "count", type: "type" }, ngImport: i0, template: "<!-- <h1>SKELETON LOADER!</h1> -->\r\n<ng-container *ngSwitch=\"type\">\r\n  <div class=\"cards-deck-4\" *ngSwitchCase=\"'tiles'\">\r\n    <ng-container *ngFor=\"let i of counter(count)\">\r\n      <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\r\n        <div class=\"animate-pulse flex flex-col\">\r\n          <div class=\"rounded w-full h-32 bg-gray-200\"></div>\r\n          <div class=\"flex flex-col mt-5\">\r\n            <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1\">\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"flex items-center mt-5\">\r\n            <div>\r\n              <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\r\n            </div>\r\n            <div class=\"flex justify-between w-full ml-3\">\r\n              <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\r\n              <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"cards-deck-3\" *ngSwitchCase=\"'large-tiles'\">\r\n    <ng-container *ngFor=\"let i of counter(count)\">\r\n      <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\r\n        <div class=\"animate-pulse flex flex-col\">\r\n          <div class=\"rounded w-full h-52 bg-gray-200\"></div>\r\n          <div class=\"flex flex-col mt-5\">\r\n            <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1\">\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"flex items-center mt-5\">\r\n            <div>\r\n              <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\r\n            </div>\r\n            <div class=\"flex justify-between w-full ml-3\">\r\n              <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\r\n              <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"cards-deck-1\" *ngSwitchCase=\"'table'\">\r\n    <ng-container *ngFor=\"let i of counter(count)\">\r\n      <div class=\"border border-light-blue-300 shadow rounded-sm p-4 max-w-sm w-full mx-auto mb-4\">\r\n        <div class=\"animate-pulse flex space-x-4\">\r\n          <div class=\"rounded-full bg-light-blue-400 h-12 w-12\">&nbsp;</div>\r\n          <div class=\"flex-1 space-y-4 py-1\">\r\n            <div class=\"h-4 bg-light-blue-400 rounded w-3/4\">&nbsp;</div>\r\n            <div class=\"space-y-2\">\r\n              <div class=\"h-4 bg-light-blue-400 rounded\">&nbsp;</div>\r\n              <div class=\"h-4 bg-light-blue-400 rounded w-5/6\">&nbsp;</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"cards-deck-3\" *ngSwitchDefault>\r\n    <ng-container *ngFor=\"let i of counter(count)\">\r\n      <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\r\n        <div class=\"animate-pulse flex flex-col\">\r\n          <div class=\"rounded w-full h-52 bg-gray-200\"></div>\r\n          <div class=\"flex flex-col mt-5\">\r\n            <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1\">\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"flex items-center mt-5\">\r\n            <div>\r\n              <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\r\n            </div>\r\n            <div class=\"flex justify-between w-full ml-3\">\r\n              <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\r\n              <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SkeletonLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-skeleton-loader', template: "<!-- <h1>SKELETON LOADER!</h1> -->\r\n<ng-container *ngSwitch=\"type\">\r\n  <div class=\"cards-deck-4\" *ngSwitchCase=\"'tiles'\">\r\n    <ng-container *ngFor=\"let i of counter(count)\">\r\n      <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\r\n        <div class=\"animate-pulse flex flex-col\">\r\n          <div class=\"rounded w-full h-32 bg-gray-200\"></div>\r\n          <div class=\"flex flex-col mt-5\">\r\n            <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1\">\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"flex items-center mt-5\">\r\n            <div>\r\n              <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\r\n            </div>\r\n            <div class=\"flex justify-between w-full ml-3\">\r\n              <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\r\n              <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"cards-deck-3\" *ngSwitchCase=\"'large-tiles'\">\r\n    <ng-container *ngFor=\"let i of counter(count)\">\r\n      <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\r\n        <div class=\"animate-pulse flex flex-col\">\r\n          <div class=\"rounded w-full h-52 bg-gray-200\"></div>\r\n          <div class=\"flex flex-col mt-5\">\r\n            <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1\">\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"flex items-center mt-5\">\r\n            <div>\r\n              <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\r\n            </div>\r\n            <div class=\"flex justify-between w-full ml-3\">\r\n              <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\r\n              <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"cards-deck-1\" *ngSwitchCase=\"'table'\">\r\n    <ng-container *ngFor=\"let i of counter(count)\">\r\n      <div class=\"border border-light-blue-300 shadow rounded-sm p-4 max-w-sm w-full mx-auto mb-4\">\r\n        <div class=\"animate-pulse flex space-x-4\">\r\n          <div class=\"rounded-full bg-light-blue-400 h-12 w-12\">&nbsp;</div>\r\n          <div class=\"flex-1 space-y-4 py-1\">\r\n            <div class=\"h-4 bg-light-blue-400 rounded w-3/4\">&nbsp;</div>\r\n            <div class=\"space-y-2\">\r\n              <div class=\"h-4 bg-light-blue-400 rounded\">&nbsp;</div>\r\n              <div class=\"h-4 bg-light-blue-400 rounded w-5/6\">&nbsp;</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"cards-deck-3\" *ngSwitchDefault>\r\n    <ng-container *ngFor=\"let i of counter(count)\">\r\n      <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\r\n        <div class=\"animate-pulse flex flex-col\">\r\n          <div class=\"rounded w-full h-52 bg-gray-200\"></div>\r\n          <div class=\"flex flex-col mt-5\">\r\n            <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1\">\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n          </div>\r\n\r\n          <div class=\"flex items-center mt-5\">\r\n            <div>\r\n              <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\r\n            </div>\r\n            <div class=\"flex justify-between w-full ml-3\">\r\n              <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\r\n              <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-container>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { count: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }] } });
+
 class ListViewComponent {
     constructor() {
         // BUSY STATE
@@ -754,14 +754,11 @@ class ListViewComponent {
         }
     }
 }
-ListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ListViewComponent, selector: "lib-list-view", inputs: { busy: "busy", items: "items", showPager: ["show-pager", "showPager"], count: "count", page: "page", pageSize: ["page-size", "pageSize"], pageSizeOptions: ["page-size-options", "pageSizeOptions"], detailsSectionPropertyCount: ["details-section-property-count", "detailsSectionPropertyCount"], sortOptions: ["sort-options", "sortOptions"], sort: "sort", sortdir: ["sort-dir", "sortdir"], view: "view", tilesCount: ["tiles-count", "tilesCount"] }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", detailsOpened: "detailsOpened", sortChanged: "sortChanged", sortdirChanged: "sortdirChanged" }, queries: [{ propertyName: "tiles", first: true, predicate: ListTileComponent, descendants: true, read: ListTileComponent }, { propertyName: "details", first: true, predicate: ListDetailsSectionComponent, descendants: true, read: ListDetailsSectionComponent }, { propertyName: "cols", predicate: ListColumnComponent, read: ListColumnComponent }], usesOnChanges: true, ngImport: i0, template: "<div class=\"px-2\">\r\n\r\n  <lib-pager *ngIf=\"showPager\"\r\n             [page]=\"page\"\r\n             [page-size]=\"pageSize\"\r\n             [count]=\"count\"\r\n             [sort-options]=\"sortOptions\"\r\n             [sort]=\"sort\"\r\n             [sort-dir]=\"sortdir\"\r\n             [busy]=\"busy\"\r\n             (pageChanged)=\"emitPageChanged($event)\"\r\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n             (sortChanged)=\"emitSortChanged($event)\"\r\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n  </lib-pager>\r\n</div>\r\n\r\n<ng-container [ngSwitch]=\"view\">\r\n\r\n  <ng-container *ngSwitchCase=\"'tiles'\">\r\n    <div [class]=\"tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n      <ng-container *ngIf=\"items && items.length > 0\">\r\n        <ng-container *ngFor=\"let item of items\">\r\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n  <!-- *ngSwitchCase=\"'gallery'\" -->\r\n  <ng-container *ngSwitchCase=\"'gallery'\">\r\n    <ul role=\"list\" [class]=\"tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n      <ng-container *ngIf=\"!busy && items && items.length > 0\">\r\n        <ng-container *ngFor=\"let item of items\">\r\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ul>\r\n  </ng-container>\r\n\r\n  <!-- *ngSwitchCase=\"'table'\" -->\r\n  <ng-container *ngSwitchDefault>\r\n\r\n    <div class=\"list-view-container\">\r\n      <div class=\"list-view-container-inner\">\r\n        <table class=\"list-view-table\">\r\n          <thead class=\"list-view-thead\">\r\n            <tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <th class=\"list-view-th-details\"></th>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let col of columns\">\r\n                <th scope=\"col\"\r\n                    [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\r\n                  {{col.title}}\r\n                </th>\r\n              </ng-container>\r\n            </tr>\r\n          </thead>\r\n          <tbody class=\"list-view-tbody\" *ngIf=\"busy\">\r\n            <ng-container *ngFor=\"let item of loaderItems;let i=index\">\r\n              <tr class=\"list-view-tr\">\r\n                <ng-container *ngIf=\"detailsSectionSupported\">\r\n                  <td class=\"list-view-td-details\"\r\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n                    <button disabled\r\n                            type=\"button\"\r\n                            class=\"expand-collapse-button\">\r\n                      <!-- Heroicon name: solid/plus -->\r\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n                    </button>\r\n                  </td>\r\n                  <ng-template #hiddenDetailsButton>\r\n                    <td class=\"list-view-td-details\"></td>\r\n                  </ng-template>\r\n                </ng-container>\r\n                <td *ngFor=\"let col of columns\"\r\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n                    <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\r\n                </td>\r\n              </tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <tr *ngIf=\"item.detailsExpanded\">\r\n                  <td [colSpan]=\"columns.length + 1\"\r\n                      class=\"list-view-td bg-gray-100\">\r\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                  </td>\r\n                </tr>\r\n              </ng-container>\r\n            </ng-container>\r\n          </tbody>\r\n          <tbody class=\"list-view-tbody\" *ngIf=\"!busy\">\r\n            <ng-container *ngFor=\"let item of items;let i=index\">\r\n              <tr class=\"list-view-tr\">\r\n                <ng-container *ngIf=\"detailsSectionSupported\">\r\n                  <td class=\"list-view-td-details\"\r\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n                    <button (click)=\"toggleDetails(item)\"\r\n                            type=\"button\"\r\n                            class=\"expand-collapse-button\">\r\n                      <!-- Heroicon name: solid/plus -->\r\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n                    </button>\r\n                  </td>\r\n                  <ng-template #hiddenDetailsButton>\r\n                    <td class=\"list-view-td-details\"></td>\r\n                  </ng-template>\r\n                </ng-container>\r\n                <td *ngFor=\"let col of columns\"\r\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n                  <ng-template [ngTemplateOutlet]=\"col.template\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                </td>\r\n              </tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <tr *ngIf=\"item.detailsExpanded\">\r\n                  <td [colSpan]=\"columns.length + 1\"\r\n                      class=\"list-view-td bg-gray-100\">\r\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                  </td>\r\n                </tr>\r\n              </ng-container>\r\n            </ng-container>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!busy && items && items.length === 0\">\r\n    <div class=\"cards-deck-1\">\r\n      <lib-list-view-empty-state></lib-list-view-empty-state>\r\n    </div>\r\n  </ng-container>\r\n\r\n</ng-container>\r\n\r\n<ng-content></ng-content>\r\n", components: [{ type: PagerComponent, selector: "lib-pager", inputs: ["busy", "count", "page", "page-size", "page-size-options", "sort-options", "sort", "sort-dir"], outputs: ["pageChanged", "pageSizeChanged", "sortChanged", "sortdirChanged"] }, { type: SkeletonLoaderComponent, selector: "lib-skeleton-loader", inputs: ["count", "type"] }, { type: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: ["title", "sub-title", "new-item-label"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ListViewComponent, decorators: [{
+ListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ListViewComponent, selector: "lib-list-view", inputs: { busy: "busy", items: "items", showPager: ["show-pager", "showPager"], count: "count", page: "page", pageSize: ["page-size", "pageSize"], pageSizeOptions: ["page-size-options", "pageSizeOptions"], detailsSectionPropertyCount: ["details-section-property-count", "detailsSectionPropertyCount"], sortOptions: ["sort-options", "sortOptions"], sort: "sort", sortdir: ["sort-dir", "sortdir"], view: "view", tilesCount: ["tiles-count", "tilesCount"] }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", detailsOpened: "detailsOpened", sortChanged: "sortChanged", sortdirChanged: "sortdirChanged" }, queries: [{ propertyName: "tiles", first: true, predicate: ListTileComponent, descendants: true, read: ListTileComponent }, { propertyName: "details", first: true, predicate: ListDetailsSectionComponent, descendants: true, read: ListDetailsSectionComponent }, { propertyName: "cols", predicate: ListColumnComponent, read: ListColumnComponent }], usesOnChanges: true, ngImport: i0, template: "<div class=\"px-2\">\r\n\r\n  <lib-pager *ngIf=\"showPager\"\r\n             [page]=\"page\"\r\n             [page-size]=\"pageSize\"\r\n             [count]=\"count\"\r\n             [sort-options]=\"sortOptions\"\r\n             [sort]=\"sort\"\r\n             [sort-dir]=\"sortdir\"\r\n             [busy]=\"busy\"\r\n             (pageChanged)=\"emitPageChanged($event)\"\r\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n             (sortChanged)=\"emitSortChanged($event)\"\r\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n  </lib-pager>\r\n</div>\r\n\r\n<ng-container [ngSwitch]=\"view\">\r\n\r\n  <ng-container *ngSwitchCase=\"'tiles'\">\r\n    <div [class]=\"tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n      <ng-container *ngIf=\"items && items.length > 0\">\r\n        <ng-container *ngFor=\"let item of items\">\r\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n  <!-- *ngSwitchCase=\"'gallery'\" -->\r\n  <ng-container *ngSwitchCase=\"'gallery'\">\r\n    <ul role=\"list\" [class]=\"tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n      <ng-container *ngIf=\"!busy && items && items.length > 0\">\r\n        <ng-container *ngFor=\"let item of items\">\r\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ul>\r\n  </ng-container>\r\n\r\n  <!-- *ngSwitchCase=\"'table'\" -->\r\n  <ng-container *ngSwitchDefault>\r\n\r\n    <div class=\"list-view-container\">\r\n      <div class=\"list-view-container-inner\">\r\n        <table class=\"list-view-table\">\r\n          <thead class=\"list-view-thead\">\r\n            <tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <th class=\"list-view-th-details\"></th>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let col of columns\">\r\n                <th scope=\"col\"\r\n                    [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\r\n                  {{col.title}}\r\n                </th>\r\n              </ng-container>\r\n            </tr>\r\n          </thead>\r\n          <tbody class=\"list-view-tbody\" *ngIf=\"busy\">\r\n            <ng-container *ngFor=\"let item of loaderItems;let i=index\">\r\n              <tr class=\"list-view-tr\">\r\n                <ng-container *ngIf=\"detailsSectionSupported\">\r\n                  <td class=\"list-view-td-details\"\r\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n                    <button disabled\r\n                            type=\"button\"\r\n                            class=\"expand-collapse-button\">\r\n                      <!-- Heroicon name: solid/plus -->\r\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n                    </button>\r\n                  </td>\r\n                  <ng-template #hiddenDetailsButton>\r\n                    <td class=\"list-view-td-details\"></td>\r\n                  </ng-template>\r\n                </ng-container>\r\n                <td *ngFor=\"let col of columns\"\r\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n                    <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\r\n                </td>\r\n              </tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <tr *ngIf=\"item.detailsExpanded\">\r\n                  <td [colSpan]=\"columns.length + 1\"\r\n                      class=\"list-view-td bg-gray-100\">\r\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                  </td>\r\n                </tr>\r\n              </ng-container>\r\n            </ng-container>\r\n          </tbody>\r\n          <tbody class=\"list-view-tbody\" *ngIf=\"!busy\">\r\n            <ng-container *ngFor=\"let item of items;let i=index\">\r\n              <tr class=\"list-view-tr\">\r\n                <ng-container *ngIf=\"detailsSectionSupported\">\r\n                  <td class=\"list-view-td-details\"\r\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n                    <button (click)=\"toggleDetails(item)\"\r\n                            type=\"button\"\r\n                            class=\"expand-collapse-button\">\r\n                      <!-- Heroicon name: solid/plus -->\r\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n                    </button>\r\n                  </td>\r\n                  <ng-template #hiddenDetailsButton>\r\n                    <td class=\"list-view-td-details\"></td>\r\n                  </ng-template>\r\n                </ng-container>\r\n                <td *ngFor=\"let col of columns\"\r\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n                  <ng-template [ngTemplateOutlet]=\"col.template\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                </td>\r\n              </tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <tr *ngIf=\"item.detailsExpanded\">\r\n                  <td [colSpan]=\"columns.length + 1\"\r\n                      class=\"list-view-td bg-gray-100\">\r\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                  </td>\r\n                </tr>\r\n              </ng-container>\r\n            </ng-container>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!busy && items && items.length === 0\">\r\n    <div class=\"cards-deck-1\">\r\n      <lib-list-view-empty-state></lib-list-view-empty-state>\r\n    </div>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ng-content></ng-content>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: PagerComponent, selector: "lib-pager", inputs: ["busy", "count", "page", "page-size", "page-size-options", "sort-options", "sort", "sort-dir"], outputs: ["pageChanged", "pageSizeChanged", "sortChanged", "sortdirChanged"] }, { kind: "component", type: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: ["title", "sub-title", "new-item-label"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "lib-skeleton-loader", inputs: ["count", "type"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListViewComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'lib-list-view',
-                    templateUrl: './list-view.component.html'
-                }]
+            args: [{ selector: 'lib-list-view', template: "<div class=\"px-2\">\r\n\r\n  <lib-pager *ngIf=\"showPager\"\r\n             [page]=\"page\"\r\n             [page-size]=\"pageSize\"\r\n             [count]=\"count\"\r\n             [sort-options]=\"sortOptions\"\r\n             [sort]=\"sort\"\r\n             [sort-dir]=\"sortdir\"\r\n             [busy]=\"busy\"\r\n             (pageChanged)=\"emitPageChanged($event)\"\r\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n             (sortChanged)=\"emitSortChanged($event)\"\r\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n  </lib-pager>\r\n</div>\r\n\r\n<ng-container [ngSwitch]=\"view\">\r\n\r\n  <ng-container *ngSwitchCase=\"'tiles'\">\r\n    <div [class]=\"tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n      <ng-container *ngIf=\"items && items.length > 0\">\r\n        <ng-container *ngFor=\"let item of items\">\r\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n  <!-- *ngSwitchCase=\"'gallery'\" -->\r\n  <ng-container *ngSwitchCase=\"'gallery'\">\r\n    <ul role=\"list\" [class]=\"tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n      <ng-container *ngIf=\"!busy && items && items.length > 0\">\r\n        <ng-container *ngFor=\"let item of items\">\r\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ul>\r\n  </ng-container>\r\n\r\n  <!-- *ngSwitchCase=\"'table'\" -->\r\n  <ng-container *ngSwitchDefault>\r\n\r\n    <div class=\"list-view-container\">\r\n      <div class=\"list-view-container-inner\">\r\n        <table class=\"list-view-table\">\r\n          <thead class=\"list-view-thead\">\r\n            <tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <th class=\"list-view-th-details\"></th>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let col of columns\">\r\n                <th scope=\"col\"\r\n                    [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\r\n                  {{col.title}}\r\n                </th>\r\n              </ng-container>\r\n            </tr>\r\n          </thead>\r\n          <tbody class=\"list-view-tbody\" *ngIf=\"busy\">\r\n            <ng-container *ngFor=\"let item of loaderItems;let i=index\">\r\n              <tr class=\"list-view-tr\">\r\n                <ng-container *ngIf=\"detailsSectionSupported\">\r\n                  <td class=\"list-view-td-details\"\r\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n                    <button disabled\r\n                            type=\"button\"\r\n                            class=\"expand-collapse-button\">\r\n                      <!-- Heroicon name: solid/plus -->\r\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n                    </button>\r\n                  </td>\r\n                  <ng-template #hiddenDetailsButton>\r\n                    <td class=\"list-view-td-details\"></td>\r\n                  </ng-template>\r\n                </ng-container>\r\n                <td *ngFor=\"let col of columns\"\r\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n                    <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\r\n                </td>\r\n              </tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <tr *ngIf=\"item.detailsExpanded\">\r\n                  <td [colSpan]=\"columns.length + 1\"\r\n                      class=\"list-view-td bg-gray-100\">\r\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                  </td>\r\n                </tr>\r\n              </ng-container>\r\n            </ng-container>\r\n          </tbody>\r\n          <tbody class=\"list-view-tbody\" *ngIf=\"!busy\">\r\n            <ng-container *ngFor=\"let item of items;let i=index\">\r\n              <tr class=\"list-view-tr\">\r\n                <ng-container *ngIf=\"detailsSectionSupported\">\r\n                  <td class=\"list-view-td-details\"\r\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n                    <button (click)=\"toggleDetails(item)\"\r\n                            type=\"button\"\r\n                            class=\"expand-collapse-button\">\r\n                      <!-- Heroicon name: solid/plus -->\r\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n                    </button>\r\n                  </td>\r\n                  <ng-template #hiddenDetailsButton>\r\n                    <td class=\"list-view-td-details\"></td>\r\n                  </ng-template>\r\n                </ng-container>\r\n                <td *ngFor=\"let col of columns\"\r\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n                  <ng-template [ngTemplateOutlet]=\"col.template\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                </td>\r\n              </tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <tr *ngIf=\"item.detailsExpanded\">\r\n                  <td [colSpan]=\"columns.length + 1\"\r\n                      class=\"list-view-td bg-gray-100\">\r\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                  </td>\r\n                </tr>\r\n              </ng-container>\r\n            </ng-container>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!busy && items && items.length === 0\">\r\n    <div class=\"cards-deck-1\">\r\n      <lib-list-view-empty-state></lib-list-view-empty-state>\r\n    </div>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ng-content></ng-content>\r\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { busy: [{
                 type: Input
             }], items: [{
@@ -824,14 +821,11 @@ class CollapsiblePanelComponent {
     ngOnInit() {
     }
 }
-CollapsiblePanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: CollapsiblePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CollapsiblePanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: CollapsiblePanelComponent, selector: "lib-collapsible-panel", inputs: { title: "title" }, ngImport: i0, template: "<div class=\"collapsible-panel-container\">\r\n  <div class=\"collapsible-panel-container-shadow\">\r\n    <div class=\"collapsible-panel-container-inner\">\r\n      <button type=\"button\" class=\"collapsible-panel-button\" (click)=\"visible = !visible\">\r\n        <div class=\"collapsible-panel-button-content-container\">\r\n          <span>{{ title }} </span>\r\n          <span class=\"ico-plus\"></span>\r\n        </div>\r\n      </button>\r\n      <div class=\"collapsible-panel-content-container\" *ngIf=\"visible\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: CollapsiblePanelComponent, decorators: [{
+CollapsiblePanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: CollapsiblePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CollapsiblePanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: CollapsiblePanelComponent, selector: "lib-collapsible-panel", inputs: { title: "title" }, ngImport: i0, template: "<div class=\"collapsible-panel-container\">\r\n  <div class=\"collapsible-panel-container-shadow\">\r\n    <div class=\"collapsible-panel-container-inner\">\r\n      <button type=\"button\" class=\"collapsible-panel-button\" (click)=\"visible = !visible\">\r\n        <div class=\"collapsible-panel-button-content-container\">\r\n          <span>{{ title }} </span>\r\n          <span class=\"ico-plus\"></span>\r\n        </div>\r\n      </button>\r\n      <div class=\"collapsible-panel-content-container\" *ngIf=\"visible\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: CollapsiblePanelComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'lib-collapsible-panel',
-                    templateUrl: './collapsible-panel.component.html'
-                }]
+            args: [{ selector: 'lib-collapsible-panel', template: "<div class=\"collapsible-panel-container\">\r\n  <div class=\"collapsible-panel-container-shadow\">\r\n    <div class=\"collapsible-panel-container-inner\">\r\n      <button type=\"button\" class=\"collapsible-panel-button\" (click)=\"visible = !visible\">\r\n        <div class=\"collapsible-panel-button-content-container\">\r\n          <span>{{ title }} </span>\r\n          <span class=\"ico-plus\"></span>\r\n        </div>\r\n      </button>\r\n      <div class=\"collapsible-panel-content-container\" *ngIf=\"visible\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { title: [{
                 type: Input
             }] } });
@@ -853,14 +847,11 @@ class KpiTileComponent {
         return false;
     }
 }
-KpiTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: KpiTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-KpiTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: KpiTileComponent, selector: "lib-kpi-tile", inputs: { title: "title", busy: "busy", kpi: "kpi" }, outputs: { tileAction: "tile-action" }, ngImport: i0, template: "<div class=\"card\"\r\n     [ngClass]=\"{'card-deck-busy' : busy }\">\r\n  <div class=\"card-body\">\r\n    <div class=\"kpi-tile-title-container\">\r\n      <a href=\"#\"\r\n         class=\"kpi-tile-action\"\r\n         (click)=\"emitTileAction($event)\">{{title || '-'}}</a>\r\n    </div>\r\n    <p class=\"kpi-tile-value\">{{kpi || '-'}}</p>\r\n    <div class=\"card-footer\">\r\n      <div class=\"text-xs\">\r\n        <a href=\"#\"\r\n           class=\"kpi-tile-action\"\r\n           (click)=\"emitTileAction($event)\">\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: KpiTileComponent, decorators: [{
+KpiTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: KpiTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+KpiTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: KpiTileComponent, selector: "lib-kpi-tile", inputs: { title: "title", busy: "busy", kpi: "kpi" }, outputs: { tileAction: "tile-action" }, ngImport: i0, template: "<div class=\"card\"\r\n     [ngClass]=\"{'card-deck-busy' : busy }\">\r\n  <div class=\"card-body\">\r\n    <div class=\"kpi-tile-title-container\">\r\n      <a href=\"#\"\r\n         class=\"kpi-tile-action\"\r\n         (click)=\"emitTileAction($event)\">{{title || '-'}}</a>\r\n    </div>\r\n    <p class=\"kpi-tile-value\">{{kpi || '-'}}</p>\r\n    <div class=\"card-footer\">\r\n      <div class=\"text-xs\">\r\n        <a href=\"#\"\r\n           class=\"kpi-tile-action\"\r\n           (click)=\"emitTileAction($event)\">\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: KpiTileComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'lib-kpi-tile',
-                    templateUrl: './kpi-tile.component.html'
-                }]
+            args: [{ selector: 'lib-kpi-tile', template: "<div class=\"card\"\r\n     [ngClass]=\"{'card-deck-busy' : busy }\">\r\n  <div class=\"card-body\">\r\n    <div class=\"kpi-tile-title-container\">\r\n      <a href=\"#\"\r\n         class=\"kpi-tile-action\"\r\n         (click)=\"emitTileAction($event)\">{{title || '-'}}</a>\r\n    </div>\r\n    <p class=\"kpi-tile-value\">{{kpi || '-'}}</p>\r\n    <div class=\"card-footer\">\r\n      <div class=\"text-xs\">\r\n        <a href=\"#\"\r\n           class=\"kpi-tile-action\"\r\n           (click)=\"emitTileAction($event)\">\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>" }]
         }], ctorParameters: function () { return []; }, propDecorators: { title: [{
                 type: Input
             }], busy: [{
@@ -1097,27 +1088,23 @@ class DatepickerComponent {
         this.getDateFromInput();
     }
 }
-DatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: DatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: DatepickerComponent, selector: "lib-date-picker", inputs: { readonly: "readonly", disabled: "disabled", displayFormat: ["display-format", "displayFormat"], placeholder: "placeholder", value: "value" }, outputs: { valueChange: "valueChange" }, providers: [
+DatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: DatepickerComponent, selector: "lib-date-picker", inputs: { readonly: "readonly", disabled: "disabled", displayFormat: ["display-format", "displayFormat"], placeholder: "placeholder", value: "value" }, outputs: { valueChange: "valueChange" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => DatepickerComponent),
             multi: true
         }
-    ], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], ngImport: i0, template: "<div class=\"relative flex\"\r\n     (clickOutside)=\"closeCalendar()\">\r\n\r\n  <input type=\"text\"\r\n         #dateInput\r\n         [readonly]=\"readonly\"\r\n         name=\"dateInput\"\r\n         (blur)=\"onBlur($event)\"\r\n         id=\"dateInput\"\r\n         (focus)=\"showCalendar = false\"\r\n         [value]=\"value | date: displayFormat\"\r\n         class=\"w-full focus:ring-0 focus:outline-none rounded-none sm:text-sm border-gray-300  focus:border-0\"\r\n         [ngClass]=\"{'cursor-not-allowed': disabled}\"\r\n         [placeholder]=\"disabled ? '' : placeholder\">\r\n\r\n  <button type=\"button\"\r\n          class=\"relative inline-flex items-center px-2 py-2 border border-gray-300 text-sm font-medium rounded-r-sm text-gray-700 bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-gray-500 focus:border-gray-500\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"openCalendar()\"\r\n          [ngClass]=\"{'cursor-not-allowed': disabled}\">\r\n    <i class=\"ms-Icon ms-Icon--DateTime2\"></i>\r\n  </button>\r\n\r\n  <div *ngIf=\"showCalendar\"\r\n       class=\"bg-gray-100 mt-10 rounded-sm shadow-md p-4 absolute left-0 z-50 w-full\"\r\n       style=\"height:18rem;min-width:16rem;\"\r\n       name=\"calendar\">\r\n    <div class=\"flex justify-between items-center mb-2\">\r\n      <div>\r\n        <button type=\"button\"\r\n                (click)=\"openYears()\">\r\n          <span class=\"text-lg font-bold text-gray-800\">\r\n            {{monthNames[month]}}\r\n          </span>\r\n          <span class=\"ml-1 text-lg text-gray-600 font-normal\">\r\n            {{year}}</span>\r\n        </button>\r\n      </div>\r\n      <div *ngIf=\"!showYears; else showYearsPickerTmpl\">\r\n        <button type=\"button\"\r\n                class=\"transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full disabled:opacity-25\"\r\n                (click)=\"previousMonth();\">\r\n          <svg class=\"h-6 w-6 text-gray-500 inline-flex\"\r\n               fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M15 19l-7-7 7-7\" />\r\n          </svg>\r\n        </button>\r\n        <button type=\"button\"\r\n                class=\"transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full disabled:opacity-25\"\r\n                (click)=\"nextMonth()\">\r\n          <svg class=\"h-6 w-6 text-gray-500 inline-flex\"\r\n               fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M9 5l7 7-7 7\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n      <ng-template #showYearsPickerTmpl>\r\n        <div>\r\n          <button type=\"button\"\r\n                  class=\"transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full disabled:opacity-25 w-1/2\"\r\n                  (click)=\"previousYear();\">\r\n            <svg class=\"h-6 w-6 text-gray-500 inline-flex\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M15 19l-7-7 7-7\" />\r\n            </svg>\r\n          </button>\r\n          <button type=\"button\"\r\n                  class=\"transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full disabled:opacity-25 w-1/2\"\r\n                  (click)=\"nextYear()\">\r\n            <svg class=\"h-6 w-6 text-gray-500 inline-flex\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M9 5l7 7-7 7\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n\r\n    <div class=\"flex flex-wrap mb-3 -mx-1\"\r\n         *ngIf=\"!showYears; else showCalYearsTmpl\">\r\n      <div *ngFor=\"let day of dayNames\"\r\n           class=\"text-gray-800 font-medium text-center text-sm uppercase\"\r\n           style=\"width: 14.28%\">{{day}}</div>\r\n    </div>\r\n\r\n    <ng-template #showCalYearsTmpl>\r\n      <div class=\"flex flex-wrap -mx-1 items-center\">\r\n        <div *ngFor=\"let year of showCalendarYears\"\r\n             style=\"width: 18.28%\"\r\n             class=\"px-1 mb-1\">\r\n          <div (click)=\"selectYearValue(year)\"\r\n               class=\"cursor-pointer text-center hover:text-blue-600 text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100\"\r\n               [class]=\"year.selected  ? 'bg-gray-700 text-blue-600 font-medium' : 'text-gray-800 hover:bg-gray-800'\">{{year.year}}</div>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <div class=\"flex flex-wrap -mx-1 items-center\"\r\n         *ngIf=\"!showYears\">\r\n      <div *ngFor=\"let blankday of blankDays\"\r\n           style=\"width: 14.28%\"\r\n           class=\"text-center border p-1 border-transparent text-sm opacity-50\">{{blankday}}</div>\r\n      <div *ngFor=\"let date of calendarDates\"\r\n           style=\"width: 14.28%\"\r\n           class=\"px-1 mb-1\">\r\n        <div (click)=\"selectDateValue(date)\"\r\n             class=\"cursor-pointer text-center hover:text-blue-600 text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100\"\r\n             [class]=\"date.selected  ? 'bg-gray-700 text-blue-600 font-medium' : 'text-gray-800 hover:bg-gray-800'\">{{date.day}}</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n</div>", directives: [{ type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "date": i1.DatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: DatepickerComponent, decorators: [{
+    ], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], ngImport: i0, template: "<div class=\"relative flex\"\r\n     (clickOutside)=\"closeCalendar()\">\r\n\r\n  <input type=\"text\"\r\n         #dateInput\r\n         [readonly]=\"readonly\"\r\n         name=\"dateInput\"\r\n         (blur)=\"onBlur($event)\"\r\n         id=\"dateInput\"\r\n         (focus)=\"showCalendar = false\"\r\n         [value]=\"value | date: displayFormat\"\r\n         class=\"w-full focus:ring-0 focus:outline-none rounded-none sm:text-sm border-gray-300  focus:border-0\"\r\n         [ngClass]=\"{'cursor-not-allowed': disabled}\"\r\n         [placeholder]=\"disabled ? '' : placeholder\">\r\n\r\n  <button type=\"button\"\r\n          class=\"relative inline-flex items-center px-2 py-2 border border-gray-300 text-sm font-medium rounded-r-sm text-gray-700 bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-gray-500 focus:border-gray-500\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"openCalendar()\"\r\n          [ngClass]=\"{'cursor-not-allowed': disabled}\">\r\n    <i class=\"ms-Icon ms-Icon--DateTime2\"></i>\r\n  </button>\r\n\r\n  <div *ngIf=\"showCalendar\"\r\n       class=\"bg-gray-100 mt-10 rounded-sm shadow-md p-4 absolute left-0 z-50 w-full\"\r\n       style=\"height:18rem;min-width:16rem;\"\r\n       name=\"calendar\">\r\n    <div class=\"flex justify-between items-center mb-2\">\r\n      <div>\r\n        <button type=\"button\"\r\n                (click)=\"openYears()\">\r\n          <span class=\"text-lg font-bold text-gray-800\">\r\n            {{monthNames[month]}}\r\n          </span>\r\n          <span class=\"ml-1 text-lg text-gray-600 font-normal\">\r\n            {{year}}</span>\r\n        </button>\r\n      </div>\r\n      <div *ngIf=\"!showYears; else showYearsPickerTmpl\">\r\n        <button type=\"button\"\r\n                class=\"transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full disabled:opacity-25\"\r\n                (click)=\"previousMonth();\">\r\n          <svg class=\"h-6 w-6 text-gray-500 inline-flex\"\r\n               fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M15 19l-7-7 7-7\" />\r\n          </svg>\r\n        </button>\r\n        <button type=\"button\"\r\n                class=\"transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full disabled:opacity-25\"\r\n                (click)=\"nextMonth()\">\r\n          <svg class=\"h-6 w-6 text-gray-500 inline-flex\"\r\n               fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M9 5l7 7-7 7\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n      <ng-template #showYearsPickerTmpl>\r\n        <div>\r\n          <button type=\"button\"\r\n                  class=\"transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full disabled:opacity-25 w-1/2\"\r\n                  (click)=\"previousYear();\">\r\n            <svg class=\"h-6 w-6 text-gray-500 inline-flex\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M15 19l-7-7 7-7\" />\r\n            </svg>\r\n          </button>\r\n          <button type=\"button\"\r\n                  class=\"transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full disabled:opacity-25 w-1/2\"\r\n                  (click)=\"nextYear()\">\r\n            <svg class=\"h-6 w-6 text-gray-500 inline-flex\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M9 5l7 7-7 7\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n\r\n    <div class=\"flex flex-wrap mb-3 -mx-1\"\r\n         *ngIf=\"!showYears; else showCalYearsTmpl\">\r\n      <div *ngFor=\"let day of dayNames\"\r\n           class=\"text-gray-800 font-medium text-center text-sm uppercase\"\r\n           style=\"width: 14.28%\">{{day}}</div>\r\n    </div>\r\n\r\n    <ng-template #showCalYearsTmpl>\r\n      <div class=\"flex flex-wrap -mx-1 items-center\">\r\n        <div *ngFor=\"let year of showCalendarYears\"\r\n             style=\"width: 18.28%\"\r\n             class=\"px-1 mb-1\">\r\n          <div (click)=\"selectYearValue(year)\"\r\n               class=\"cursor-pointer text-center hover:text-blue-600 text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100\"\r\n               [class]=\"year.selected  ? 'bg-gray-700 text-blue-600 font-medium' : 'text-gray-800 hover:bg-gray-800'\">{{year.year}}</div>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <div class=\"flex flex-wrap -mx-1 items-center\"\r\n         *ngIf=\"!showYears\">\r\n      <div *ngFor=\"let blankday of blankDays\"\r\n           style=\"width: 14.28%\"\r\n           class=\"text-center border p-1 border-transparent text-sm opacity-50\">{{blankday}}</div>\r\n      <div *ngFor=\"let date of calendarDates\"\r\n           style=\"width: 14.28%\"\r\n           class=\"px-1 mb-1\">\r\n        <div (click)=\"selectDateValue(date)\"\r\n             class=\"cursor-pointer text-center hover:text-blue-600 text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100\"\r\n             [class]=\"date.selected  ? 'bg-gray-700 text-blue-600 font-medium' : 'text-gray-800 hover:bg-gray-800'\">{{date.day}}</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DatepickerComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'lib-date-picker',
-                    templateUrl: './date-picker.component.html',
-                    providers: [
+            args: [{ selector: 'lib-date-picker', providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => DatepickerComponent),
                             multi: true
                         }
-                    ]
-                }]
+                    ], template: "<div class=\"relative flex\"\r\n     (clickOutside)=\"closeCalendar()\">\r\n\r\n  <input type=\"text\"\r\n         #dateInput\r\n         [readonly]=\"readonly\"\r\n         name=\"dateInput\"\r\n         (blur)=\"onBlur($event)\"\r\n         id=\"dateInput\"\r\n         (focus)=\"showCalendar = false\"\r\n         [value]=\"value | date: displayFormat\"\r\n         class=\"w-full focus:ring-0 focus:outline-none rounded-none sm:text-sm border-gray-300  focus:border-0\"\r\n         [ngClass]=\"{'cursor-not-allowed': disabled}\"\r\n         [placeholder]=\"disabled ? '' : placeholder\">\r\n\r\n  <button type=\"button\"\r\n          class=\"relative inline-flex items-center px-2 py-2 border border-gray-300 text-sm font-medium rounded-r-sm text-gray-700 bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-gray-500 focus:border-gray-500\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"openCalendar()\"\r\n          [ngClass]=\"{'cursor-not-allowed': disabled}\">\r\n    <i class=\"ms-Icon ms-Icon--DateTime2\"></i>\r\n  </button>\r\n\r\n  <div *ngIf=\"showCalendar\"\r\n       class=\"bg-gray-100 mt-10 rounded-sm shadow-md p-4 absolute left-0 z-50 w-full\"\r\n       style=\"height:18rem;min-width:16rem;\"\r\n       name=\"calendar\">\r\n    <div class=\"flex justify-between items-center mb-2\">\r\n      <div>\r\n        <button type=\"button\"\r\n                (click)=\"openYears()\">\r\n          <span class=\"text-lg font-bold text-gray-800\">\r\n            {{monthNames[month]}}\r\n          </span>\r\n          <span class=\"ml-1 text-lg text-gray-600 font-normal\">\r\n            {{year}}</span>\r\n        </button>\r\n      </div>\r\n      <div *ngIf=\"!showYears; else showYearsPickerTmpl\">\r\n        <button type=\"button\"\r\n                class=\"transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full disabled:opacity-25\"\r\n                (click)=\"previousMonth();\">\r\n          <svg class=\"h-6 w-6 text-gray-500 inline-flex\"\r\n               fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M15 19l-7-7 7-7\" />\r\n          </svg>\r\n        </button>\r\n        <button type=\"button\"\r\n                class=\"transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full disabled:opacity-25\"\r\n                (click)=\"nextMonth()\">\r\n          <svg class=\"h-6 w-6 text-gray-500 inline-flex\"\r\n               fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M9 5l7 7-7 7\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n      <ng-template #showYearsPickerTmpl>\r\n        <div>\r\n          <button type=\"button\"\r\n                  class=\"transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full disabled:opacity-25 w-1/2\"\r\n                  (click)=\"previousYear();\">\r\n            <svg class=\"h-6 w-6 text-gray-500 inline-flex\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M15 19l-7-7 7-7\" />\r\n            </svg>\r\n          </button>\r\n          <button type=\"button\"\r\n                  class=\"transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full disabled:opacity-25 w-1/2\"\r\n                  (click)=\"nextYear()\">\r\n            <svg class=\"h-6 w-6 text-gray-500 inline-flex\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M9 5l7 7-7 7\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n\r\n    <div class=\"flex flex-wrap mb-3 -mx-1\"\r\n         *ngIf=\"!showYears; else showCalYearsTmpl\">\r\n      <div *ngFor=\"let day of dayNames\"\r\n           class=\"text-gray-800 font-medium text-center text-sm uppercase\"\r\n           style=\"width: 14.28%\">{{day}}</div>\r\n    </div>\r\n\r\n    <ng-template #showCalYearsTmpl>\r\n      <div class=\"flex flex-wrap -mx-1 items-center\">\r\n        <div *ngFor=\"let year of showCalendarYears\"\r\n             style=\"width: 18.28%\"\r\n             class=\"px-1 mb-1\">\r\n          <div (click)=\"selectYearValue(year)\"\r\n               class=\"cursor-pointer text-center hover:text-blue-600 text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100\"\r\n               [class]=\"year.selected  ? 'bg-gray-700 text-blue-600 font-medium' : 'text-gray-800 hover:bg-gray-800'\">{{year.year}}</div>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <div class=\"flex flex-wrap -mx-1 items-center\"\r\n         *ngIf=\"!showYears\">\r\n      <div *ngFor=\"let blankday of blankDays\"\r\n           style=\"width: 14.28%\"\r\n           class=\"text-center border p-1 border-transparent text-sm opacity-50\">{{blankday}}</div>\r\n      <div *ngFor=\"let date of calendarDates\"\r\n           style=\"width: 14.28%\"\r\n           class=\"px-1 mb-1\">\r\n        <div (click)=\"selectDateValue(date)\"\r\n             class=\"cursor-pointer text-center hover:text-blue-600 text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100\"\r\n             [class]=\"date.selected  ? 'bg-gray-700 text-blue-600 font-medium' : 'text-gray-800 hover:bg-gray-800'\">{{date.day}}</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n</div>" }]
         }], ctorParameters: function () { return []; }, propDecorators: { readonly: [{
                 type: Input
             }], disabled: [{
@@ -1146,9 +1133,9 @@ class ToasterService {
         this.subject.next({ type, title, body, delay });
     }
 }
-ToasterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ToasterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ToasterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ToasterService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ToasterService, decorators: [{
+ToasterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ToasterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ToasterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ToasterService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ToasterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1170,14 +1157,11 @@ class ToasterComponent {
         setTimeout(() => this.remove.emit(index), 100);
     }
 }
-ToasterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ToasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToasterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ToasterComponent, selector: "lib-toaster", inputs: { toast: "toast", i: "i" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div aria-live=\"assertive\"\r\n     [ngClass]=\"closed ? 'toast-closed': 'toast z-50'\"\r\n     [ngStyle]=\"isMobile ? { 'margin-bottom.px': i * 85 } : {'margin-top.px': i * 85 }\">\r\n  <div class=\"toast-container\">\r\n    <div class=\"toast-pill\">\r\n      <div class=\"toast-context-padding\">\r\n        <div class=\"toast-context\"\r\n             [ngSwitch]=\"toast?.type\">\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchCase=\"'info'\">\r\n            <svg class=\"h-5 w-5 text-blue-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 viewBox=\"0 0 20 20\"\r\n                 fill=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path fill-rule=\"evenodd\"\r\n                    d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\"\r\n                    clip-rule=\"evenodd\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchCase=\"'success'\">\r\n            <svg class=\"h-5 w-5 text-green-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchCase=\"'error'\">\r\n            <svg class=\"h-5 w-5 text-red-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 viewBox=\"0 0 20 20\"\r\n                 fill=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path fill-rule=\"evenodd\"\r\n                    d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\"\r\n                    clip-rule=\"evenodd\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchCase=\"'warning'\">\r\n            <svg class=\"h-5 w-5 text-yellow-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 viewBox=\"0 0 20 20\"\r\n                 fill=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path fill-rule=\"evenodd\"\r\n                    d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\"\r\n                    clip-rule=\"evenodd\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchDefault>\r\n            <svg class=\"h-5 w-5 text-green-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\r\n            </svg>\r\n          </div>\r\n\r\n          <div class=\"ml-3 w-0 flex-1\">\r\n            <p class=\"toast-title\"\r\n               *ngIf=\"toast?.title\">\r\n              {{toast?.title}}\r\n            </p>\r\n            <p class=\"toast-body\">\r\n              {{toast?.body}}\r\n            </p>\r\n          </div>\r\n          <div class=\"toast-close-icon\">\r\n            <button class=\"toast-close-button\"\r\n                    (click)=\"closeToast(i)\">\r\n              <span class=\"sr-only\">Close</span>\r\n              <!-- Heroicon name: solid/x -->\r\n              <svg class=\"h-5 w-5\"\r\n                   xmlns=\"http://www.w3.org/2000/svg\"\r\n                   viewBox=\"0 0 20 20\"\r\n                   fill=\"currentColor\"\r\n                   aria-hidden=\"true\">\r\n                <path fill-rule=\"evenodd\"\r\n                      d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\r\n                      clip-rule=\"evenodd\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ToasterComponent, decorators: [{
+ToasterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ToasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToasterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ToasterComponent, selector: "lib-toaster", inputs: { toast: "toast", i: "i" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div aria-live=\"assertive\"\r\n     [ngClass]=\"closed ? 'toast-closed': 'toast z-50'\"\r\n     [ngStyle]=\"isMobile ? { 'margin-bottom.px': i * 85 } : {'margin-top.px': i * 85 }\">\r\n  <div class=\"toast-container\">\r\n    <div class=\"toast-pill\">\r\n      <div class=\"toast-context-padding\">\r\n        <div class=\"toast-context\"\r\n             [ngSwitch]=\"toast?.type\">\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchCase=\"'info'\">\r\n            <svg class=\"h-5 w-5 text-blue-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 viewBox=\"0 0 20 20\"\r\n                 fill=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path fill-rule=\"evenodd\"\r\n                    d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\"\r\n                    clip-rule=\"evenodd\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchCase=\"'success'\">\r\n            <svg class=\"h-5 w-5 text-green-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchCase=\"'error'\">\r\n            <svg class=\"h-5 w-5 text-red-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 viewBox=\"0 0 20 20\"\r\n                 fill=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path fill-rule=\"evenodd\"\r\n                    d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\"\r\n                    clip-rule=\"evenodd\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchCase=\"'warning'\">\r\n            <svg class=\"h-5 w-5 text-yellow-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 viewBox=\"0 0 20 20\"\r\n                 fill=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path fill-rule=\"evenodd\"\r\n                    d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\"\r\n                    clip-rule=\"evenodd\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchDefault>\r\n            <svg class=\"h-5 w-5 text-green-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\r\n            </svg>\r\n          </div>\r\n\r\n          <div class=\"ml-3 w-0 flex-1\">\r\n            <p class=\"toast-title\"\r\n               *ngIf=\"toast?.title\">\r\n              {{toast?.title}}\r\n            </p>\r\n            <p class=\"toast-body\">\r\n              {{toast?.body}}\r\n            </p>\r\n          </div>\r\n          <div class=\"toast-close-icon\">\r\n            <button class=\"toast-close-button\"\r\n                    (click)=\"closeToast(i)\">\r\n              <span class=\"sr-only\">Close</span>\r\n              <!-- Heroicon name: solid/x -->\r\n              <svg class=\"h-5 w-5\"\r\n                   xmlns=\"http://www.w3.org/2000/svg\"\r\n                   viewBox=\"0 0 20 20\"\r\n                   fill=\"currentColor\"\r\n                   aria-hidden=\"true\">\r\n                <path fill-rule=\"evenodd\"\r\n                      d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\r\n                      clip-rule=\"evenodd\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ToasterComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'lib-toaster',
-                    templateUrl: './toaster.component.html'
-                }]
+            args: [{ selector: 'lib-toaster', template: "<div aria-live=\"assertive\"\r\n     [ngClass]=\"closed ? 'toast-closed': 'toast z-50'\"\r\n     [ngStyle]=\"isMobile ? { 'margin-bottom.px': i * 85 } : {'margin-top.px': i * 85 }\">\r\n  <div class=\"toast-container\">\r\n    <div class=\"toast-pill\">\r\n      <div class=\"toast-context-padding\">\r\n        <div class=\"toast-context\"\r\n             [ngSwitch]=\"toast?.type\">\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchCase=\"'info'\">\r\n            <svg class=\"h-5 w-5 text-blue-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 viewBox=\"0 0 20 20\"\r\n                 fill=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path fill-rule=\"evenodd\"\r\n                    d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\"\r\n                    clip-rule=\"evenodd\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchCase=\"'success'\">\r\n            <svg class=\"h-5 w-5 text-green-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchCase=\"'error'\">\r\n            <svg class=\"h-5 w-5 text-red-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 viewBox=\"0 0 20 20\"\r\n                 fill=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path fill-rule=\"evenodd\"\r\n                    d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\"\r\n                    clip-rule=\"evenodd\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchCase=\"'warning'\">\r\n            <svg class=\"h-5 w-5 text-yellow-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 viewBox=\"0 0 20 20\"\r\n                 fill=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path fill-rule=\"evenodd\"\r\n                    d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\"\r\n                    clip-rule=\"evenodd\" />\r\n            </svg>\r\n          </div>\r\n          <div class=\"toast-icon\"\r\n               *ngSwitchDefault>\r\n            <svg class=\"h-5 w-5 text-green-400\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\r\n            </svg>\r\n          </div>\r\n\r\n          <div class=\"ml-3 w-0 flex-1\">\r\n            <p class=\"toast-title\"\r\n               *ngIf=\"toast?.title\">\r\n              {{toast?.title}}\r\n            </p>\r\n            <p class=\"toast-body\">\r\n              {{toast?.body}}\r\n            </p>\r\n          </div>\r\n          <div class=\"toast-close-icon\">\r\n            <button class=\"toast-close-button\"\r\n                    (click)=\"closeToast(i)\">\r\n              <span class=\"sr-only\">Close</span>\r\n              <!-- Heroicon name: solid/x -->\r\n              <svg class=\"h-5 w-5\"\r\n                   xmlns=\"http://www.w3.org/2000/svg\"\r\n                   viewBox=\"0 0 20 20\"\r\n                   fill=\"currentColor\"\r\n                   aria-hidden=\"true\">\r\n                <path fill-rule=\"evenodd\"\r\n                      d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\r\n                      clip-rule=\"evenodd\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>" }]
         }], ctorParameters: function () { return []; }, propDecorators: { toast: [{
                 type: Input
             }], i: [{
@@ -1202,14 +1186,11 @@ class ToasterContainerComponent {
         this.toasts = this.toasts.slice(0, index).concat(this.toasts.slice(index + 1));
     }
 }
-ToasterContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ToasterContainerComponent, deps: [{ token: ToasterService }], target: i0.ɵɵFactoryTarget.Component });
-ToasterContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ToasterContainerComponent, selector: "lib-toaster-container", ngImport: i0, template: "<lib-toaster *ngFor=\"let toast of toasts; let i=index\" [toast]=\"toast\" [i]=\"i\" (remove)=\"remove($event)\"></lib-toaster>\r\n", components: [{ type: ToasterComponent, selector: "lib-toaster", inputs: ["toast", "i"], outputs: ["remove"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ToasterContainerComponent, decorators: [{
+ToasterContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ToasterContainerComponent, deps: [{ token: ToasterService }], target: i0.ɵɵFactoryTarget.Component });
+ToasterContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ToasterContainerComponent, selector: "lib-toaster-container", ngImport: i0, template: "<lib-toaster *ngFor=\"let toast of toasts; let i=index\" [toast]=\"toast\" [i]=\"i\" (remove)=\"remove($event)\"></lib-toaster>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ToasterComponent, selector: "lib-toaster", inputs: ["toast", "i"], outputs: ["remove"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ToasterContainerComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'lib-toaster-container',
-                    templateUrl: './toaster-container.component.html'
-                }]
+            args: [{ selector: 'lib-toaster-container', template: "<lib-toaster *ngFor=\"let toast of toasts; let i=index\" [toast]=\"toast\" [i]=\"i\" (remove)=\"remove($event)\"></lib-toaster>\r\n" }]
         }], ctorParameters: function () { return [{ type: ToasterService }]; } });
 
 class AvatarInitialsComponent {
@@ -1246,14 +1227,11 @@ class AvatarInitialsComponent {
         }
     }
 }
-AvatarInitialsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: AvatarInitialsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AvatarInitialsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: AvatarInitialsComponent, selector: "lib-avatar-initials", inputs: { name: "name", large: "large" }, ngImport: i0, template: "<div [ngClass]=\"large ? 'avatar-container-large': 'avatar-container'\">\r\n    <span [ngClass]=\"large ? 'avatar-text-large': 'avatar-text'\">{{ initials }}</span>\r\n</div>\r\n", directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: AvatarInitialsComponent, decorators: [{
+AvatarInitialsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AvatarInitialsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AvatarInitialsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: AvatarInitialsComponent, selector: "lib-avatar-initials", inputs: { name: "name", large: "large" }, ngImport: i0, template: "<div [ngClass]=\"large ? 'avatar-container-large': 'avatar-container'\">\r\n    <span [ngClass]=\"large ? 'avatar-text-large': 'avatar-text'\">{{ initials }}</span>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AvatarInitialsComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'lib-avatar-initials',
-                    templateUrl: './avatar-initials.component.html'
-                }]
+            args: [{ selector: 'lib-avatar-initials', template: "<div [ngClass]=\"large ? 'avatar-container-large': 'avatar-container'\">\r\n    <span [ngClass]=\"large ? 'avatar-text-large': 'avatar-text'\">{{ initials }}</span>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { name: [{
                 type: Input
             }], large: [{
@@ -1295,27 +1273,23 @@ class ToggleComponent {
         }
     }
 }
-ToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ToggleComponent, selector: "lib-toggle", inputs: { value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, providers: [
+ToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ToggleComponent, selector: "lib-toggle", inputs: { value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => ToggleComponent),
             multi: true
         }
-    ], ngImport: i0, template: "<button type=\"button\"\r\n        [ngClass]=\"value ? (disabled ? 'on disabled' : 'on') : 'off'\"\r\n        class=\"toggle-button\"\r\n        role=\"switch\"\r\n        aria-checked=\"false\"\r\n        aria-labelledby=\"isPrivate\"\r\n        (click)=\"changeValue()\"\r\n        (blur)=\"onBlur($event)\"\r\n        value=\"{{value}}\"\r\n        [disabled]=\"disabled\"\r\n        [title]=\"disabled ? '\u03A4\u03BF \u03B1\u03C1\u03C7\u03B5\u03AF\u03BF \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B9\u03B4\u03C9\u03C4\u03B9\u03BA\u03CC' : '\u0399\u03B4\u03B9\u03C9\u03C4\u03B9\u03BA\u03CC'\">\r\n    <span aria-hidden=\"true\"\r\n          [ngClass]=\"value ? 'enabled-anim' : 'disabled-anim'\"\r\n          class=\"toggle-span\"></span>\r\n</button>", directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ToggleComponent, decorators: [{
+    ], ngImport: i0, template: "<button type=\"button\"\r\n        [ngClass]=\"value ? (disabled ? 'on disabled' : 'on') : 'off'\"\r\n        class=\"toggle-button\"\r\n        role=\"switch\"\r\n        aria-checked=\"false\"\r\n        aria-labelledby=\"isPrivate\"\r\n        (click)=\"changeValue()\"\r\n        (blur)=\"onBlur($event)\"\r\n        value=\"{{value}}\"\r\n        [disabled]=\"disabled\"\r\n        [title]=\"disabled ? '\u03A4\u03BF \u03B1\u03C1\u03C7\u03B5\u03AF\u03BF \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B9\u03B4\u03C9\u03C4\u03B9\u03BA\u03CC' : '\u0399\u03B4\u03B9\u03C9\u03C4\u03B9\u03BA\u03CC'\">\r\n    <span aria-hidden=\"true\"\r\n          [ngClass]=\"value ? 'enabled-anim' : 'disabled-anim'\"\r\n          class=\"toggle-span\"></span>\r\n</button>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ToggleComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'lib-toggle',
-                    templateUrl: './toggle.component.html',
-                    providers: [
+            args: [{ selector: 'lib-toggle', providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => ToggleComponent),
                             multi: true
                         }
-                    ]
-                }]
+                    ], template: "<button type=\"button\"\r\n        [ngClass]=\"value ? (disabled ? 'on disabled' : 'on') : 'off'\"\r\n        class=\"toggle-button\"\r\n        role=\"switch\"\r\n        aria-checked=\"false\"\r\n        aria-labelledby=\"isPrivate\"\r\n        (click)=\"changeValue()\"\r\n        (blur)=\"onBlur($event)\"\r\n        value=\"{{value}}\"\r\n        [disabled]=\"disabled\"\r\n        [title]=\"disabled ? '\u03A4\u03BF \u03B1\u03C1\u03C7\u03B5\u03AF\u03BF \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B9\u03B4\u03C9\u03C4\u03B9\u03BA\u03CC' : '\u0399\u03B4\u03B9\u03C9\u03C4\u03B9\u03BA\u03CC'\">\r\n    <span aria-hidden=\"true\"\r\n          [ngClass]=\"value ? 'enabled-anim' : 'disabled-anim'\"\r\n          class=\"toggle-span\"></span>\r\n</button>" }]
         }], ctorParameters: function () { return []; }, propDecorators: { value: [{
                 type: Input
             }], disabled: [{
@@ -1376,26 +1350,262 @@ class SidePaneComponent {
         this.onComplete.emit(true);
     }
 }
-SidePaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: SidePaneComponent, deps: [{ token: i1$1.Router }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-SidePaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: SidePaneComponent, selector: "lib-side-pane", inputs: { showPane: ["visible", "showPane"] }, outputs: { onComplete: "onComplete" }, ngImport: i0, template: "<div *ngIf=\"showPane\" class=\"side-pane-outer-container\" aria-labelledby=\"slide-over\" role=\"dialog\" aria-modal=\"true\">\r\n  <div [class]=\"showPane ? overlayStyle : 'hidden'\" aria-hidden=\"true\"></div>\r\n  <div [class]=\"showPane ? 'side-pane-container' : 'hidden'\">\r\n    <div [class]=\"sizeContainerStyle\">\r\n      <div class=\"side-pane\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: SidePaneComponent, decorators: [{
+SidePaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SidePaneComponent, deps: [{ token: i1$1.Router }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+SidePaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: SidePaneComponent, selector: "lib-side-pane", inputs: { showPane: ["visible", "showPane"] }, outputs: { onComplete: "onComplete" }, ngImport: i0, template: "<div *ngIf=\"showPane\" class=\"side-pane-outer-container\" aria-labelledby=\"slide-over\" role=\"dialog\" aria-modal=\"true\">\r\n  <div [class]=\"showPane ? overlayStyle : 'hidden'\" aria-hidden=\"true\"></div>\r\n  <div [class]=\"showPane ? 'side-pane-container' : 'hidden'\">\r\n    <div [class]=\"sizeContainerStyle\">\r\n      <div class=\"side-pane\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SidePaneComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'lib-side-pane',
-                    templateUrl: './side-pane.component.html'
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }]; }, propDecorators: { showPane: [{
+            args: [{ selector: 'lib-side-pane', template: "<div *ngIf=\"showPane\" class=\"side-pane-outer-container\" aria-labelledby=\"slide-over\" role=\"dialog\" aria-modal=\"true\">\r\n  <div [class]=\"showPane ? overlayStyle : 'hidden'\" aria-hidden=\"true\"></div>\r\n  <div [class]=\"showPane ? 'side-pane-container' : 'hidden'\">\r\n    <div [class]=\"sizeContainerStyle\">\r\n      <div class=\"side-pane\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i1$1.Router }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }];
+    }, propDecorators: { showPane: [{
                 type: Input,
                 args: ['visible']
             }], onComplete: [{
                 type: Output
             }] } });
 
+class NavLinksListComponent {
+    constructor() {
+        // tslint:disable-next-line:no-input-rename
+        this.navLinkClass = 'nav-link';
+        // tslint:disable-next-line:no-input-rename
+        this.navLinkActiveClass = 'nav-link-active';
+        // tslint:disable-next-line:no-input-rename
+        this.containerClass = undefined;
+        // tslint:disable-next-line:no-input-rename
+        this.showIcons = false;
+    }
+    ngOnInit() {
+    }
+}
+NavLinksListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NavLinksListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NavLinksListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: { links: "links", activeFragment: ["active-fragment", "activeFragment"], navLinkClass: ["link-class", "navLinkClass"], navLinkActiveClass: ["link-active-class", "navLinkActiveClass"], containerClass: ["container-class", "containerClass"], showIcons: ["show-icons", "showIcons"] }, ngImport: i0, template: "\n<div [class]=\"containerClass ?? 'nav-link-list-container'\">\n  <div class=\"nav-link-list-container-inner\">\n    <ng-container *ngFor=\"let link of links | async\">\n      <ng-container [ngSwitch]=\"link.type\">\n        <a *ngSwitchCase=\"'router'\"\n          href=\"#\"\n          [routerLink]=\"[link.path]\"\n          [routerLinkActive]=\"navLinkActiveClass\"\n          [routerLinkActiveOptions]=\"{ exact: link.exact }\"\n          [class]=\"navLinkClass\">\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon + ' mr-3'\"></i>{{ link.text }}\n        </a>\n        <a *ngSwitchCase=\"'external'\"\n          [href]=\"link.path\"\n          [attr.target]=\"link.external ? '_blank' : '_self'\"\n          [class]=\"navLinkClass\">\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\n        </a>\n        <a *ngSwitchCase=\"'fragment'\"\n          routerLink=\".\"\n          [fragment]=\"link.path\"\n          [class.active]=\"(activeFragment | async) === link.path\"\n          [routerLinkActive]=\"navLinkActiveClass\"\n          [class]=\"navLinkClass\">\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\n        </a>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NavLinksListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-nav-links-list', template: "\n<div [class]=\"containerClass ?? 'nav-link-list-container'\">\n  <div class=\"nav-link-list-container-inner\">\n    <ng-container *ngFor=\"let link of links | async\">\n      <ng-container [ngSwitch]=\"link.type\">\n        <a *ngSwitchCase=\"'router'\"\n          href=\"#\"\n          [routerLink]=\"[link.path]\"\n          [routerLinkActive]=\"navLinkActiveClass\"\n          [routerLinkActiveOptions]=\"{ exact: link.exact }\"\n          [class]=\"navLinkClass\">\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon + ' mr-3'\"></i>{{ link.text }}\n        </a>\n        <a *ngSwitchCase=\"'external'\"\n          [href]=\"link.path\"\n          [attr.target]=\"link.external ? '_blank' : '_self'\"\n          [class]=\"navLinkClass\">\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\n        </a>\n        <a *ngSwitchCase=\"'fragment'\"\n          routerLink=\".\"\n          [fragment]=\"link.path\"\n          [class.active]=\"(activeFragment | async) === link.path\"\n          [routerLinkActive]=\"navLinkActiveClass\"\n          [class]=\"navLinkClass\">\n          <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\n        </a>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { links: [{
+                type: Input
+            }], activeFragment: [{
+                type: Input,
+                args: ['active-fragment']
+            }], navLinkClass: [{
+                type: Input,
+                args: ['link-class']
+            }], navLinkActiveClass: [{
+                type: Input,
+                args: ['link-active-class']
+            }], containerClass: [{
+                type: Input,
+                args: ['container-class']
+            }], showIcons: [{
+                type: Input,
+                args: ['show-icons']
+            }] } });
+
+class ComboboxComponent {
+    constructor() {
+        this._debouncer = new Subject();
+        this._items = [];
+        this._defaultItemsFilter = (item) => {
+            const selectedItem = this.selectedItems.find(x => x == item);
+            return selectedItem == null || selectedItem == undefined;
+        };
+        this.id = 'combobox';
+        this.itemTemplate = null;
+        this.selectedItemsFilter = () => true;
+        this.selectedItemTemplate = null;
+        this.busy = false;
+        this.debounceMs = 1000;
+        this.onSearch = new EventEmitter();
+        this.onItemSelected = new EventEmitter();
+        this.showOptions = false;
+        this.selectedItems = [];
+    }
+    set items(items) {
+        if (!this.itemTemplate) {
+            this._items = items.filter(this._defaultItemsFilter);
+        }
+        else {
+            this._items = items.filter(this.selectedItemsFilter);
+        }
+    }
+    get items() {
+        if (!this.itemTemplate) {
+            return this._items.filter(this._defaultItemsFilter);
+        }
+        else {
+            return this._items.filter(this.selectedItemsFilter);
+        }
+    }
+    ngOnInit() {
+        this.emitSearchEvent();
+        this._debouncer
+            .pipe(debounceTime(this.debounceMs), distinctUntilChanged())
+            .subscribe((value) => this.emitSearchEvent(value));
+    }
+    onInputClick() {
+        this.showOptions = true;
+    }
+    onInputClickOutside() {
+        this.showOptions = false;
+    }
+    onInputKeyUp(event) {
+        this._debouncer.next(event.currentTarget.value);
+    }
+    onListItemSelected(item) {
+        this.onItemSelected.emit(item);
+        this.selectedItems.push(item);
+    }
+    removeSelectedItem(item) {
+        const index = this.selectedItems.indexOf(item);
+        if (index > -1) {
+            this.selectedItems.splice(index, 1);
+        }
+    }
+    emitSearchEvent(searchTerm = undefined) {
+        this.onSearch.emit(searchTerm);
+    }
+}
+ComboboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ComboboxComponent, selector: "lib-combobox", inputs: { id: "id", items: "items", itemTemplate: "itemTemplate", selectedItemsFilter: "selectedItemsFilter", selectedItemTemplate: "selectedItemTemplate", busy: "busy", debounceMs: "debounceMs" }, outputs: { onSearch: "onSearch", onItemSelected: "onItemSelected" }, ngImport: i0, template: "<div class=\"relative mt-1\">\r\n    <form autocomplete=\"off\" [id]=\"id + '-form'\">\r\n        <input [id]=\"id + '-input'\" type=\"text\" (click)=\"onInputClick()\" (clickOutside)=\"onInputClickOutside()\" (keyup)=\"onInputKeyUp($event)\"\r\n            class=\"w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm\" role=\"combobox\" aria-controls=\"options\"\r\n            aria-expanded=\"false\" autocomplete=\"off\" list=\"autocomplete\">\r\n    </form>\r\n    <div class=\"absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none\">\r\n        <svg *ngIf=\"!busy\" xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\r\n        </svg>\r\n        <svg *ngIf=\"busy\" class=\"animate-spin h-6 w-6 text-gray-400\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n            <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\n            <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\r\n        </svg>\r\n    </div>\r\n    <ul [id]=\"id + '-options'\" *ngIf=\"showOptions\" class=\"absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm\" role=\"listbox\">\r\n        <li *ngFor=\"let item of items; let i = index;\" [id]=\"'option-'+ i\" (click)=\"onListItemSelected(item)\" role=\"option\" tabindex=\"-1\">\r\n            <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        </li>\r\n    </ul>\r\n</div>\r\n<ul *ngIf=\"selectedItems.length > 0\" role=\"list\" class=\"grid grid-cols-1\">\r\n    <li *ngFor=\"let item of selectedItems; let i = index;\" class=\"mt-3\">\r\n        <ng-container [ngTemplateOutlet]=\"selectedItemTemplate || defaultSelectedItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n    </li>\r\n</ul>\r\n<ng-template #defaultItemTemplate let-item>\r\n    <span class=\"hover:bg-gray-100 relative cursor-pointer select-none py-2 pl-3 pr-3 block truncate\">{{ item }}</span>\r\n</ng-template>\r\n<ng-template #defaultSelectedItemTemplate let-item>\r\n    <div class=\"grid grid-cols-1\">\r\n        <div class=\"relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400\">\r\n            <div class=\"flex-1 min-w-0\">\r\n                <div class=\"focus:outline-none\">\r\n                    <span class=\"absolute\" aria-hidden=\"true\"></span>\r\n                    <p class=\"text-sm font-medium text-gray-900\">{{ item }}</p>\r\n                </div>\r\n            </div>\r\n            <div class=\"ml-4 flex-shrink-0 flex\">\r\n                <button type=\"button\" (click)=\"removeSelectedItem(item)\" class=\"cursor-pointer bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500\">\r\n                    <span class=\"sr-only\">Close</span>\r\n                    <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                        <path fill-rule=\"evenodd\"\r\n                            d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\r\n                            clip-rule=\"evenodd\" />\r\n                    </svg>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ComboboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-combobox', template: "<div class=\"relative mt-1\">\r\n    <form autocomplete=\"off\" [id]=\"id + '-form'\">\r\n        <input [id]=\"id + '-input'\" type=\"text\" (click)=\"onInputClick()\" (clickOutside)=\"onInputClickOutside()\" (keyup)=\"onInputKeyUp($event)\"\r\n            class=\"w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm\" role=\"combobox\" aria-controls=\"options\"\r\n            aria-expanded=\"false\" autocomplete=\"off\" list=\"autocomplete\">\r\n    </form>\r\n    <div class=\"absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none\">\r\n        <svg *ngIf=\"!busy\" xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\r\n        </svg>\r\n        <svg *ngIf=\"busy\" class=\"animate-spin h-6 w-6 text-gray-400\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n            <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\n            <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\r\n        </svg>\r\n    </div>\r\n    <ul [id]=\"id + '-options'\" *ngIf=\"showOptions\" class=\"absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm\" role=\"listbox\">\r\n        <li *ngFor=\"let item of items; let i = index;\" [id]=\"'option-'+ i\" (click)=\"onListItemSelected(item)\" role=\"option\" tabindex=\"-1\">\r\n            <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        </li>\r\n    </ul>\r\n</div>\r\n<ul *ngIf=\"selectedItems.length > 0\" role=\"list\" class=\"grid grid-cols-1\">\r\n    <li *ngFor=\"let item of selectedItems; let i = index;\" class=\"mt-3\">\r\n        <ng-container [ngTemplateOutlet]=\"selectedItemTemplate || defaultSelectedItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n    </li>\r\n</ul>\r\n<ng-template #defaultItemTemplate let-item>\r\n    <span class=\"hover:bg-gray-100 relative cursor-pointer select-none py-2 pl-3 pr-3 block truncate\">{{ item }}</span>\r\n</ng-template>\r\n<ng-template #defaultSelectedItemTemplate let-item>\r\n    <div class=\"grid grid-cols-1\">\r\n        <div class=\"relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400\">\r\n            <div class=\"flex-1 min-w-0\">\r\n                <div class=\"focus:outline-none\">\r\n                    <span class=\"absolute\" aria-hidden=\"true\"></span>\r\n                    <p class=\"text-sm font-medium text-gray-900\">{{ item }}</p>\r\n                </div>\r\n            </div>\r\n            <div class=\"ml-4 flex-shrink-0 flex\">\r\n                <button type=\"button\" (click)=\"removeSelectedItem(item)\" class=\"cursor-pointer bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500\">\r\n                    <span class=\"sr-only\">Close</span>\r\n                    <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                        <path fill-rule=\"evenodd\"\r\n                            d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\r\n                            clip-rule=\"evenodd\" />\r\n                    </svg>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { id: [{
+                type: Input
+            }], items: [{
+                type: Input,
+                args: ['items']
+            }], itemTemplate: [{
+                type: Input
+            }], selectedItemsFilter: [{
+                type: Input
+            }], selectedItemTemplate: [{
+                type: Input
+            }], busy: [{
+                type: Input
+            }], debounceMs: [{
+                type: Input
+            }], onSearch: [{
+                type: Output
+            }], onItemSelected: [{
+                type: Output
+            }] } });
+
+class LibTabGroupComponent {
+    constructor() {
+        /** The inner tabs of the group. */
+        this.tabs = undefined;
+        /** Emmited when a step change occurs. */
+        this.tabChanged = new EventEmitter();
+    }
+    /** The current tab. */
+    get currentTab() {
+        var _a;
+        return (_a = this.tabs) === null || _a === void 0 ? void 0 : _a.find(x => x.isActive);
+    }
+    /** The index (starting from zero) of the current tab. */
+    get currentΤabIndex() {
+        var _a;
+        return ((_a = this.currentTab) === null || _a === void 0 ? void 0 : _a.index) || undefined;
+    }
+    ngOnInit() { }
+    ngAfterContentInit() {
+        if (!this.tabs) {
+            return;
+        }
+    }
+    ngAfterContentChecked() {
+        if (this.tabs && this.tabs.length > 0) {
+            const anyActive = this.tabs.filter(x => x.isActive).length > 0;
+            if (!anyActive) {
+                this.tabs.get(0).isActive = true;
+            }
+        }
+    }
+    onTabChanged(selectedTab) {
+        this.tabs.forEach((tab) => tab.isActive = tab.id === selectedTab.id);
+        this.tabChanged.emit(selectedTab);
+    }
+    onTabSelectChanged(selectedTabIndex) {
+        var _a;
+        this.tabs.forEach((tab, index) => tab.isActive = index === selectedTabIndex);
+        this.tabChanged.emit((_a = this.tabs) === null || _a === void 0 ? void 0 : _a.get(selectedTabIndex));
+    }
+}
+LibTabGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibTabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LibTabGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: LibTabGroupComponent, selector: "lib-tab-group", outputs: { tabChanged: "tabChanged" }, queries: [{ propertyName: "tabs", predicate: LibTabComponent, descendants: true }], ngImport: i0, template: "<div class=\"sm:hidden\">\r\n    <label for=\"tabs\" class=\"sr-only\">Select a tab</label>\r\n    <select id=\"tabs\" name=\"tabs\" (change)=\"onTabSelectChanged(+tabsSelect.value)\" class=\"tab-group-select\" #tabsSelect>\r\n        <option [value]=\"i\" *ngFor=\"let tab of tabs; let i = index\">{{ tab.label }}</option>\r\n    </select>\r\n</div>\r\n<div class=\"hidden sm:block\">\r\n    <div class=\"tab-group-container\">\r\n        <nav class=\"-mb-px flex space-x-8\" aria-label=\"Tabs\">\r\n            <a *ngFor=\"let tab of tabs\" href=\"javascript:void(0)\" [class.tab]=\"!tab.isActive\" [class.tab-active]=\"tab.isActive\" (click)=\"onTabChanged(tab)\">\r\n                {{ tab.label }}\r\n            </a>\r\n        </nav>\r\n    </div>\r\n</div>\r\n<div *ngIf=\"currentTab?.content\">\r\n    <ng-container [ngTemplateOutlet]=\"currentTab!.content\"></ng-container>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibTabGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-tab-group', template: "<div class=\"sm:hidden\">\r\n    <label for=\"tabs\" class=\"sr-only\">Select a tab</label>\r\n    <select id=\"tabs\" name=\"tabs\" (change)=\"onTabSelectChanged(+tabsSelect.value)\" class=\"tab-group-select\" #tabsSelect>\r\n        <option [value]=\"i\" *ngFor=\"let tab of tabs; let i = index\">{{ tab.label }}</option>\r\n    </select>\r\n</div>\r\n<div class=\"hidden sm:block\">\r\n    <div class=\"tab-group-container\">\r\n        <nav class=\"-mb-px flex space-x-8\" aria-label=\"Tabs\">\r\n            <a *ngFor=\"let tab of tabs\" href=\"javascript:void(0)\" [class.tab]=\"!tab.isActive\" [class.tab-active]=\"tab.isActive\" (click)=\"onTabChanged(tab)\">\r\n                {{ tab.label }}\r\n            </a>\r\n        </nav>\r\n    </div>\r\n</div>\r\n<div *ngIf=\"currentTab?.content\">\r\n    <ng-container [ngTemplateOutlet]=\"currentTab!.content\"></ng-container>\r\n</div>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { tabs: [{
+                type: ContentChildren,
+                args: [LibTabComponent, { descendants: true }]
+            }], tabChanged: [{
+                type: Output
+            }] } });
+
+class LibTabComponent {
+    constructor(_tabGroup) {
+        this._tabGroup = _tabGroup;
+        this._isActive = false;
+    }
+    /** Indicates the index of the tab. */
+    get index() {
+        var _a;
+        return ((_a = this._tabGroup.tabs) === null || _a === void 0 ? void 0 : _a.toArray().indexOf(this)) || undefined;
+    }
+    /** Indicates whether the tab is active. */
+    get isActive() {
+        return this._isActive;
+    }
+    /** Setter for LibTabComponent isActive property. */
+    set isActive(isActive) {
+        this._isActive = isActive;
+    }
+    ngOnInit() {
+        this.id = this.id || uuid.v4();
+    }
+}
+LibTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibTabComponent, deps: [{ token: forwardRef(() => LibTabGroupComponent) }], target: i0.ɵɵFactoryTarget.Component });
+LibTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: LibTabComponent, selector: "lib-tab", inputs: { label: "label", id: "id" }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `
+        <ng-template>
+            <ng-content></ng-content>
+        </ng-template>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibTabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-tab',
+                    template: `
+        <ng-template>
+            <ng-content></ng-content>
+        </ng-template>
+    `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () {
+        return [{ type: LibTabGroupComponent, decorators: [{
+                        type: Inject,
+                        args: [forwardRef(() => LibTabGroupComponent)]
+                    }] }];
+    }, propDecorators: { content: [{
+                type: ViewChild,
+                args: [TemplateRef, { static: true }]
+            }], label: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }] } });
+
 const APP_LINKS = new InjectionToken('APP_LINKS');
-const SHELL_CONFIG = new InjectionToken('SHELL_CONFIG');
+const APP_NOTIFICATIONS = new InjectionToken('APP_NOTIFICATIONS');
+const SHELL_CONFIG = new InjectionToken('SHELL_CONFIG');
+const APP_LANGUAGES = new InjectionToken('APP_LANGUAGES');
 
 class DynamicComponentHostDirective {
     constructor(viewContainerRef) {
@@ -1403,9 +1613,9 @@ class DynamicComponentHostDirective {
         this.hostName = '';
     }
 }
-DynamicComponentHostDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: DynamicComponentHostDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-DynamicComponentHostDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.1", type: DynamicComponentHostDirective, selector: "[appDynamicComponentHost]", inputs: { hostName: "hostName" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: DynamicComponentHostDirective, decorators: [{
+DynamicComponentHostDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DynamicComponentHostDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+DynamicComponentHostDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: DynamicComponentHostDirective, selector: "[appDynamicComponentHost]", inputs: { hostName: "hostName" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DynamicComponentHostDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[appDynamicComponentHost]' }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { hostName: [{
@@ -1636,74 +1846,215 @@ class ComponentLoaderFactory {
         return new ComponentLoader(viewContainerRef, this.componentFactoryResolver, this.applicationRef, this.injector);
     }
 }
-ComponentLoaderFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ComponentLoaderFactory, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
-ComponentLoaderFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ComponentLoaderFactory, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ComponentLoaderFactory, decorators: [{
+ComponentLoaderFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ComponentLoaderFactory, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
+ComponentLoaderFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ComponentLoaderFactory, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ComponentLoaderFactory, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i0.ApplicationRef }]; } });
 
-class ShellHeaderComponent {
+class NotificationsIndicatorComponent {
+    constructor(notifications, links) {
+        this.notifications = notifications;
+        this.links = links;
+        this.menuExpanded = false;
+        this.unreadCount = 0;
+        this.items = [];
+        this.inboxAction = undefined;
+        this.newArrival = false;
+    }
+    ngOnDestroy() {
+        if (this.notificationsSub$) {
+            this.notificationsSub$.unsubscribe();
+        }
+    }
+    ngOnInit() {
+        this.links['notifications'].subscribe(notificationsLink => {
+            this.allNotificationsLink = notificationsLink;
+        });
+        this.notificationsSub$ = this.notifications.messages.subscribe(result => {
+            if (result.items) {
+                this.newArrival = true;
+                this.unreadCount = result.count;
+                this.items = result.items;
+                setTimeout(() => { this.newArrival = false; }, 1000);
+            }
+        });
+    }
+    doInboxAction() {
+        if (this.notifications.inboxAction) {
+            this.notifications.inboxAction();
+        }
+        else {
+            this.menuExpanded = !this.menuExpanded;
+        }
+        this.unreadCount = 0;
+    }
+    removeItem(index) {
+        this.items.splice(index, 1);
+    }
+    // this.notificationsSub$ = this.links.notifications?.pipe(map(result => {
+    //   this.allItemsLink = result.allNotifications;
+    //   this.items = result.items;
+    //   this.unreadCount = result.count;
+    // }));
+    // [this.notificationsLinksPath] as Observable<NotificationNavLink[]>;
+    // this.allNotificationsLink = this.links[this.allNotificationsLinkPath] as Observable<NavLink>;
+    // this.unreadNotificationsCountObs = this.links[this.notificationsCounterLinksPath] as Observable<number>;
+    // this.getUnreadNotificationsCount();
+    // tslint:disable-next-line:typedef
+    onClickOutside($event) {
+        this.menuExpanded = false;
+    }
+}
+NotificationsIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NotificationsIndicatorComponent, deps: [{ token: APP_NOTIFICATIONS }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
+NotificationsIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator", ngImport: i0, template: "<div class=\"relative\"\r\n(clickOutside)=\"onClickOutside($event)\">\r\n  <!-- Notifications Button -->\r\n  <button type=\"button\"\r\n          (click)=\"doInboxAction()\"\r\n          aria-expanded=\"false\"\r\n          aria-haspopup=\"true\">\r\n    <span class=\"sr-only\">View notifications</span>\r\n    <span class=\"avatar-container\">\r\n      <span class=\"avatar-text\">\r\n        <i class=\"ms-Icon hover:text-blue-400\"\r\n          [class.ms-Icon--MessageFill]=\"unreadCount > 0\"\r\n          [class.text-sky-400]=\"unreadCount > 0\"\r\n          [class.animate-notification]=\"newArrival\"\r\n          [class.ms-Icon--Message]=\"unreadCount === 0\">\r\n        </i>\r\n      </span>\r\n      <span\r\n        *ngIf=\"unreadCount > 0\"\r\n        [class.animate-pulse]=\"newArrival\"\r\n        class=\"absolute top-0 right-0 inline-flex items-center justify-center -mt-1 ml-1 text-xs leading-none text-gray-100 ordinal\">\r\n        {{ unreadCount }}\r\n      </span>\r\n    </span>\r\n  </button>\r\n\r\n  <!-- Notifications dropdown -->\r\n  <div *ngIf=\"menuExpanded\" class=\"header-notifications-dropdown-with-username\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"messages-menu\">\r\n    <div class=\"max-h-64 overflow-y-auto notification-messages min-h\">\r\n      <ng-container *ngIf=\"!items; else messagesDropDown\" class=\"py-5\">\r\n        <div class=\"notifications-nav-link hover:bg-transparent\">\u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03BD\u03AD\u03B5\u03C2 \u03B5\u03B9\u03B4\u03BF\u03C0\u03BF\u03B9\u03AE\u03C3\u03B5\u03B9\u03C2</div>\r\n      </ng-container>\r\n      <ng-template #messagesDropDown>\r\n        <ul class=\"pr-1.5\">\r\n          <ng-container *ngIf=\"items; else loading\">\r\n            <ng-container *ngIf=\"items.length <= 0\" class=\"py-5\">\r\n              <div class=\"notifications-nav-link hover:bg-transparent\">\u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03BD\u03AD\u03B5\u03C2 \u03B5\u03B9\u03B4\u03BF\u03C0\u03BF\u03B9\u03AE\u03C3\u03B5\u03B9\u03C2</div>\r\n            </ng-container>\r\n            <ng-container *ngFor=\"let message of items; let i = index\">\r\n              <li class=\"mb-2\" [ngClass]=\"{ 'border-l-2 border-blue-500 bg-blue-50 hover:bg-blue-50': !message.data.isRead }\">\r\n                <div class=\"flex justify-between\">\r\n                  <div class=\"flex-grow\">\r\n                    <a\r\n                      [routerLink]=\"message.path\"\r\n                      (click)=\"removeItem(i)\"\r\n                      class=\"notifications-nav-link grid\"\r\n                      [ngClass]=\"!message.data.isRead ? ' hover:bg-blue-50' : 'border-b border-gray-100'\"\r\n                    >\r\n                      <div class=\"flex flex-col\">\r\n                        <div class=\"font-thin tracking-tighter\">\r\n                          {{ message.data.creationDate | date: \"EEE, d MMMM\" }}\r\n                        </div>\r\n                        <div class=\"font-bold\">\r\n                          {{ message.data.text }}\r\n                        </div>\r\n                      </div>\r\n                    </a>\r\n                  </div>\r\n                </div>\r\n              </li>\r\n            </ng-container>\r\n          </ng-container>\r\n\r\n          <ng-template #loading>\r\n            <div class=\"h-32 flex items-center justify-center\">\r\n              <div class=\"animate-pulse text-s text-gray-600\">Loading...</div>\r\n            </div>\r\n          </ng-template>\r\n        </ul>\r\n      </ng-template>\r\n    </div>\r\n    <div class=\"p-1 rounded-sm\">\r\n      <a [routerLink]=\"allNotificationsLink!.path\">\r\n        <button type=\"button\" class=\"header-notifications-dropdown-view-all-button\">{{allNotificationsLink!.text}}</button>\r\n      </a>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NotificationsIndicatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-notifications-indicator', template: "<div class=\"relative\"\r\n(clickOutside)=\"onClickOutside($event)\">\r\n  <!-- Notifications Button -->\r\n  <button type=\"button\"\r\n          (click)=\"doInboxAction()\"\r\n          aria-expanded=\"false\"\r\n          aria-haspopup=\"true\">\r\n    <span class=\"sr-only\">View notifications</span>\r\n    <span class=\"avatar-container\">\r\n      <span class=\"avatar-text\">\r\n        <i class=\"ms-Icon hover:text-blue-400\"\r\n          [class.ms-Icon--MessageFill]=\"unreadCount > 0\"\r\n          [class.text-sky-400]=\"unreadCount > 0\"\r\n          [class.animate-notification]=\"newArrival\"\r\n          [class.ms-Icon--Message]=\"unreadCount === 0\">\r\n        </i>\r\n      </span>\r\n      <span\r\n        *ngIf=\"unreadCount > 0\"\r\n        [class.animate-pulse]=\"newArrival\"\r\n        class=\"absolute top-0 right-0 inline-flex items-center justify-center -mt-1 ml-1 text-xs leading-none text-gray-100 ordinal\">\r\n        {{ unreadCount }}\r\n      </span>\r\n    </span>\r\n  </button>\r\n\r\n  <!-- Notifications dropdown -->\r\n  <div *ngIf=\"menuExpanded\" class=\"header-notifications-dropdown-with-username\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"messages-menu\">\r\n    <div class=\"max-h-64 overflow-y-auto notification-messages min-h\">\r\n      <ng-container *ngIf=\"!items; else messagesDropDown\" class=\"py-5\">\r\n        <div class=\"notifications-nav-link hover:bg-transparent\">\u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03BD\u03AD\u03B5\u03C2 \u03B5\u03B9\u03B4\u03BF\u03C0\u03BF\u03B9\u03AE\u03C3\u03B5\u03B9\u03C2</div>\r\n      </ng-container>\r\n      <ng-template #messagesDropDown>\r\n        <ul class=\"pr-1.5\">\r\n          <ng-container *ngIf=\"items; else loading\">\r\n            <ng-container *ngIf=\"items.length <= 0\" class=\"py-5\">\r\n              <div class=\"notifications-nav-link hover:bg-transparent\">\u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03BD\u03AD\u03B5\u03C2 \u03B5\u03B9\u03B4\u03BF\u03C0\u03BF\u03B9\u03AE\u03C3\u03B5\u03B9\u03C2</div>\r\n            </ng-container>\r\n            <ng-container *ngFor=\"let message of items; let i = index\">\r\n              <li class=\"mb-2\" [ngClass]=\"{ 'border-l-2 border-blue-500 bg-blue-50 hover:bg-blue-50': !message.data.isRead }\">\r\n                <div class=\"flex justify-between\">\r\n                  <div class=\"flex-grow\">\r\n                    <a\r\n                      [routerLink]=\"message.path\"\r\n                      (click)=\"removeItem(i)\"\r\n                      class=\"notifications-nav-link grid\"\r\n                      [ngClass]=\"!message.data.isRead ? ' hover:bg-blue-50' : 'border-b border-gray-100'\"\r\n                    >\r\n                      <div class=\"flex flex-col\">\r\n                        <div class=\"font-thin tracking-tighter\">\r\n                          {{ message.data.creationDate | date: \"EEE, d MMMM\" }}\r\n                        </div>\r\n                        <div class=\"font-bold\">\r\n                          {{ message.data.text }}\r\n                        </div>\r\n                      </div>\r\n                    </a>\r\n                  </div>\r\n                </div>\r\n              </li>\r\n            </ng-container>\r\n          </ng-container>\r\n\r\n          <ng-template #loading>\r\n            <div class=\"h-32 flex items-center justify-center\">\r\n              <div class=\"animate-pulse text-s text-gray-600\">Loading...</div>\r\n            </div>\r\n          </ng-template>\r\n        </ul>\r\n      </ng-template>\r\n    </div>\r\n    <div class=\"p-1 rounded-sm\">\r\n      <a [routerLink]=\"allNotificationsLink!.path\">\r\n        <button type=\"button\" class=\"header-notifications-dropdown-view-all-button\">{{allNotificationsLink!.text}}</button>\r\n      </a>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [APP_NOTIFICATIONS]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [APP_LINKS]
+                    }] }];
+    } });
+
+class LanguageSelectionComponent {
+    constructor(langsService) {
+        this.langsService = langsService;
+        this.menuExpanded = false;
+    }
+    ngOnInit() {
+    }
+    selectLang(option) {
+        var _a;
+        if ((_a = this.langsService) === null || _a === void 0 ? void 0 : _a.setSelected) {
+            this.langsService.setSelected(option.value);
+        }
+    }
+    onClickOutside($event) {
+        this.menuExpanded = false;
+    }
+}
+LanguageSelectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LanguageSelectionComponent, deps: [{ token: APP_LANGUAGES }], target: i0.ɵɵFactoryTarget.Component });
+LanguageSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: LanguageSelectionComponent, selector: "lib-language-selection", ngImport: i0, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\n  <button class=\"text-blue-300 hover:text-blue-400\" (click)=\"menuExpanded = !menuExpanded\">\n    <i class=\"text-xs mr-1 ms-Icon ms-Icon--Globe\"></i>\n    <span>{{langsService?.selected || langsService?.default}}</span>\n  </button>\n\n  <div\n    [class]=\"menuExpanded ? 'transition ease-out duration-200 origin-top-right z-30 absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none':'hidden transition ease-in duration-75 origin-top-right z-30 right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\n    <div class=\"py-1\" role=\"none\">\n      <ng-container *ngFor=\"let lang of langsService?.options | async\">\n        <a (click)=\"selectLang(lang)\" *ngIf=\"lang.value != langsService?.selected\" class=\"nav-link-profile\" role=\"menuitem\" tabindex=\"-1\" id=\"menu-item-0\">\n          <i class=\"text-xs mr-1 ms-Icon ms-Icon--GlobeFavorite\"></i>\n          {{lang.description}}\n        </a>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LanguageSelectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-language-selection', template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\n  <button class=\"text-blue-300 hover:text-blue-400\" (click)=\"menuExpanded = !menuExpanded\">\n    <i class=\"text-xs mr-1 ms-Icon ms-Icon--Globe\"></i>\n    <span>{{langsService?.selected || langsService?.default}}</span>\n  </button>\n\n  <div\n    [class]=\"menuExpanded ? 'transition ease-out duration-200 origin-top-right z-30 absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none':'hidden transition ease-in duration-75 origin-top-right z-30 right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\n    <div class=\"py-1\" role=\"none\">\n      <ng-container *ngFor=\"let lang of langsService?.options | async\">\n        <a (click)=\"selectLang(lang)\" *ngIf=\"lang.value != langsService?.selected\" class=\"nav-link-profile\" role=\"menuitem\" tabindex=\"-1\" id=\"menu-item-0\">\n          <i class=\"text-xs mr-1 ms-Icon ms-Icon--GlobeFavorite\"></i>\n          {{lang.description}}\n        </a>\n      </ng-container>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [APP_LANGUAGES]
+                    }] }];
+    } });
+
+class UserProfileMenuComponent {
     constructor(authService, router, links) {
         this.authService = authService;
         this.router = router;
         this.links = links;
         // tslint:disable-next-line:no-input-rename
+        this.showUserName = false;
+        this.userSub$ = null;
+        this.statusSub$ = null;
+        this.user = null;
+        this.avatarName = null;
+        this.userMenuExpanded = false;
+    }
+    ngOnInit() {
+        this.authService.loadUser().subscribe((user) => {
+            this.setCurrentUser(user);
+        }, error => {
+            console.error(error);
+        });
+        // Detect user changes and display / or not user info accordingly...
+        this.userSub$ = this.authService.user$.subscribe((user) => {
+            // console.log('ShellHeaderComponent user subscription');
+            this.setCurrentUser(user);
+        });
+    }
+    signin(event) {
+        if (event) {
+            event.preventDefault();
+        }
+        this.authService.signinRedirect();
+    }
+    setCurrentUser(user) {
+        var _a, _b;
+        this.user = user;
+        if (this.user && this.user.profile) {
+            this.avatarName = `${(_a = this.user.profile.given_name) === null || _a === void 0 ? void 0 : _a.charAt(0)}${(_b = this.user.profile.family_name) === null || _b === void 0 ? void 0 : _b.charAt(0)}`.toUpperCase();
+        }
+    }
+    // tslint:disable-next-line:typedef
+    onClickOutside($event) {
+        this.userMenuExpanded = false;
+    }
+}
+UserProfileMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: UserProfileMenuComponent, deps: [{ token: AuthService }, { token: Router }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
+UserProfileMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: { showUserName: ["show-user-name", "showUserName"] }, ngImport: i0, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\" (click)=\"userMenuExpanded = !userMenuExpanded\">\n\n  <div class=\"inline-flex\">\n    <!-- Username -->\n    <div [ngClass]=\"{'shell-header-profile': showUserName}\">\n      <div *ngIf=\"user && showUserName\" class=\"shell-header-profile-userName\">\n        {{ user.profile.name }}\n      </div>\n    </div>\n\n    <div [class.ml-2]=\"showUserName\">\n      <button type=\"button\" *ngIf=\"user\"\n              class=\"shell-header-profile-dropdown-button\"\n              id=\"user-menu\"\n              aria-expanded=\"false\"\n              aria-haspopup=\"true\">\n        <span class=\"sr-only\">Open user menu</span>\n        <span class=\"avatar-container\">\n          <span class=\"avatar-text\">{{this.avatarName}}</span>\n        </span>\n      </button>\n\n      <button type=\"button\"\n              *ngIf=\"!user\"\n              (click)=\"signin(null)\"\n              class=\"shell-header-profile-dropdown-button\"\n              id=\"user-menu\"\n              aria-expanded=\"false\"\n              aria-haspopup=\"true\">\n        <span class=\"sr-only\">sign in</span>\n        <span class=\"avatar-container\">\n          <span class=\"avatar-text\"><i class=\"ms-Icon ms-Icon--Signin\"></i></span>\n        </span>\n      </button>\n    </div>\n  </div>\n\n  <div [class]=\"userMenuExpanded ?\n    'transition ease-out duration-200 origin-top-right z-30 absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\n    :\n    'hidden transition ease-in duration-75 origin-top-right z-30 right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\"\n    role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\n         <lib-nav-links-list\n            [links]=\"links.profile\"\n            [link-class]=\"'nav-link-profile'\"\n            [link-active-class]=\"'nav-link-profile-active'\">\n         </lib-nav-links-list>\n  </div>\n\n</div>\n\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: UserProfileMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-user-profile-menu', template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\" (click)=\"userMenuExpanded = !userMenuExpanded\">\n\n  <div class=\"inline-flex\">\n    <!-- Username -->\n    <div [ngClass]=\"{'shell-header-profile': showUserName}\">\n      <div *ngIf=\"user && showUserName\" class=\"shell-header-profile-userName\">\n        {{ user.profile.name }}\n      </div>\n    </div>\n\n    <div [class.ml-2]=\"showUserName\">\n      <button type=\"button\" *ngIf=\"user\"\n              class=\"shell-header-profile-dropdown-button\"\n              id=\"user-menu\"\n              aria-expanded=\"false\"\n              aria-haspopup=\"true\">\n        <span class=\"sr-only\">Open user menu</span>\n        <span class=\"avatar-container\">\n          <span class=\"avatar-text\">{{this.avatarName}}</span>\n        </span>\n      </button>\n\n      <button type=\"button\"\n              *ngIf=\"!user\"\n              (click)=\"signin(null)\"\n              class=\"shell-header-profile-dropdown-button\"\n              id=\"user-menu\"\n              aria-expanded=\"false\"\n              aria-haspopup=\"true\">\n        <span class=\"sr-only\">sign in</span>\n        <span class=\"avatar-container\">\n          <span class=\"avatar-text\"><i class=\"ms-Icon ms-Icon--Signin\"></i></span>\n        </span>\n      </button>\n    </div>\n  </div>\n\n  <div [class]=\"userMenuExpanded ?\n    'transition ease-out duration-200 origin-top-right z-30 absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\n    :\n    'hidden transition ease-in duration-75 origin-top-right z-30 right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\"\n    role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\n         <lib-nav-links-list\n            [links]=\"links.profile\"\n            [link-class]=\"'nav-link-profile'\"\n            [link-active-class]=\"'nav-link-profile-active'\">\n         </lib-nav-links-list>\n  </div>\n\n</div>\n\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i2.AuthService, decorators: [{
+                        type: Inject,
+                        args: [AuthService]
+                    }] }, { type: i1$1.Router, decorators: [{
+                        type: Inject,
+                        args: [Router]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [APP_LINKS]
+                    }] }];
+    }, propDecorators: { showUserName: [{
+                type: Input,
+                args: ['show-user-name']
+            }] } });
+
+class ShellHeaderComponent {
+    constructor(authService, router, route, config, links) {
+        this.authService = authService;
+        this.router = router;
+        this.route = route;
+        this.config = config;
+        this.links = links;
+        // tslint:disable-next-line:no-input-rename
         this.sectionLinksPath = 'main';
-        this.notificationsLinksPath = 'notifications';
-        this.allNotificationsLinkPath = 'allNotifications';
-        this.notificationsCounterLinksPath = 'notificationsCounter';
-        this.border = true;
-        this.showNotifications = false;
-        this.showUserNameOnHeader = false;
-        this.notificationsMenuVisible = true;
+        // tslint:disable-next-line:no-input-rename
         this.profileMenuVisible = true;
+        // tslint:disable-next-line:no-input-rename
+        this.showUserNameOnHeader = false;
+        // tslint:disable-next-line:no-input-rename
+        this.showAlerts = false;
+        // tslint:disable-next-line:no-input-rename
+        this.shellLayout = ShellLayoutType.Stacked;
+        this.border = true;
         this.sectionLinks = of([]);
-        this.notifications = of([]);
-        this.allNotificationsLink = of();
-        this.unreadNotificationsCountObs = of(0);
         this.mobileMenuExpanded = false;
         this.userMenuExpanded = false;
-        this.notificationsMenuExpanded = false;
-        this.routeSubject = new Observable();
         this.routerSub$ = null;
         this.userSub$ = null;
         this.statusSub$ = null;
         this.user = null;
         this.avatarName = null;
-        this.unreadNotificationsCount = 0;
-    }
-    ngOnDestroy() {
-        if (this.routerSub$) {
-            this.routerSub$.unsubscribe();
-        }
-        // TODO: check authenticated user here before we start polling server status
-        if (this.statusSub$) {
-            this.statusSub$.unsubscribe();
-        }
-        if (this.userSub$) {
-            this.userSub$.unsubscribe();
-        }
+        this.activeFragment = null;
+        this.routeSubject = this.router.events.pipe(filter((event) => event instanceof NavigationStart));
     }
     ngOnInit() {
-        var _a, _b;
-        this.showNotifications = (_a = this.config) === null || _a === void 0 ? void 0 : _a.showNotifications;
-        this.showUserNameOnHeader = (_b = this.config) === null || _b === void 0 ? void 0 : _b.showUserNameOnHeader;
+        this.activeFragment = this.route.fragment.pipe(share());
         this.sectionLinks = this.links[this.sectionLinksPath];
-        this.notifications = this.links[this.notificationsLinksPath];
-        this.allNotificationsLink = this.links[this.allNotificationsLinkPath];
-        this.unreadNotificationsCountObs = this.links[this.notificationsCounterLinksPath];
-        this.getUnreadNotificationsCount();
-        this.routerSub$ = this.router.events.pipe(filter(event => event instanceof NavigationStart)).subscribe(event => {
+        this.routerSub$ = this.routeSubject.subscribe((event) => {
             this.mobileMenuExpanded = false;
             this.userMenuExpanded = false;
-            this.notificationsMenuExpanded = false;
         });
         this.authService.loadUser().subscribe((user) => {
-            console.log(user);
             this.setCurrentUser(user);
         }, error => {
-            console.log(error);
+            console.error(error);
         });
         // Detect user changes and display / or not user info accordingly...
         this.userSub$ = this.authService.user$.subscribe((user) => {
@@ -1711,75 +2062,73 @@ class ShellHeaderComponent {
             this.setCurrentUser(user);
         });
     }
-    setCurrentUser(user) {
-        var _a, _b;
-        this.user = user;
-        if (this.user && this.user.profile) {
-            this.avatarName = `${(_a = this.user.profile.given_name) === null || _a === void 0 ? void 0 : _a.charAt(0)}${(_b = this.user.profile.family_name) === null || _b === void 0 ? void 0 : _b.charAt(0)}`;
-            console.log('load user', this.avatarName);
+    ngOnDestroy() {
+        if (this.routerSub$) {
+            this.routerSub$.unsubscribe();
+        }
+        // TODO: check authenticated user here before we start polling server status
+        if (this.statusSub$) {
+            this.statusSub$.unsubscribe();
+        }
+        if (this.userSub$) {
+            this.userSub$.unsubscribe();
         }
     }
     // tslint:disable-next-line:typedef
-    onClickOutsideProfile($event) {
+    onClickOutside($event) {
         this.userMenuExpanded = false;
     }
-    // tslint:disable-next-line:typedef
-    onClickOutsideNotifications($event) {
-        this.notificationsMenuExpanded = false;
-    }
     signin(event) {
         if (event) {
             event.preventDefault();
         }
         this.authService.signinRedirect();
     }
-    expandUserMenu() {
-        this.userMenuExpanded = !this.userMenuExpanded;
-        this.notificationsMenuExpanded = false;
-    }
-    expandNotificationsMenu() {
-        this.notificationsMenuExpanded = !this.notificationsMenuExpanded;
-        this.userMenuExpanded = false;
-        this.getUnreadNotificationsCount();
-    }
-    getUnreadNotificationsCount() {
-        this.unreadNotificationsCountObs.subscribe(count => {
-            this.unreadNotificationsCount = count;
-        });
+    setCurrentUser(user) {
+        var _a, _b;
+        this.user = user;
+        if (this.user && this.user.profile) {
+            this.avatarName = `${(_a = this.user.profile.given_name) === null || _a === void 0 ? void 0 : _a.charAt(0)}${(_b = this.user.profile.family_name) === null || _b === void 0 ? void 0 : _b.charAt(0)}`.toUpperCase();
+        }
     }
 }
-ShellHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ShellHeaderComponent, deps: [{ token: AuthService }, { token: Router }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
-ShellHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ShellHeaderComponent, selector: "lib-shell-header", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], notificationsLinksPath: ["notifications-links", "notificationsLinksPath"], allNotificationsLinkPath: ["all-notifications", "allNotificationsLinkPath"], notificationsCounterLinksPath: ["notifications-counter", "notificationsCounterLinksPath"], config: "config", border: "border" }, ngImport: i0, template: "<nav>\r\n  <div class=\"shell-header-paddings\">\r\n    <div [class]=\"border ? 'shell-header-border' : ''\">\r\n      <div class=\"shell-header-menu-container\">\r\n        <div class=\"shell-header-links-no-grow-container\">\r\n          <div>\r\n            <a href=\"#\"\r\n               [routerLink]=\"['/']\"><img class=\"app-logo\"\r\n                   [src]=\"config.appLogo\"\r\n                   [alt]=\"config.appLogoAlt\" /></a>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"shell-header-link-container\">\r\n          <ng-container *ngFor=\"let link of sectionLinks | async\">\r\n            <a href=\"#\"\r\n               [routerLink]=\"[link.path]\"\r\n               [attr.target]=\"link.external ? '_blank' : '_self'\"\r\n               [routerLinkActive]=\"['nav-link-active']\"\r\n               [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n               class=\"nav-link\"\r\n               (click)=\"getUnreadNotificationsCount()\">\r\n              {{ link.text }}\r\n            </a>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <div class=\"shell-header-md-visible\">\r\n          <div class=\"shell-header-links-no-grow-container\">\r\n\r\n            <ng-container *ngFor=\"let link of links.profileActions | async\">\r\n              <a class=\"shell-header-menu-rounded-button\"\r\n                 (clickOutside)=\"onClickOutsideProfile($event)\"\r\n                 [attr.href]=\"link.path\"\r\n                 [attr.target]=\"link.external ? '_blank' : '_self'\">\r\n                <span class=\"sr-only\">{{ link.text }}</span>\r\n                <i *ngIf=\"link.icon\"\r\n                   [class]=\"link.icon\"></i>\r\n              </a>\r\n            </ng-container>\r\n\r\n            <!-- Profile dropdown -->\r\n            <div class=\"ml-2 relative\"\r\n                 (clickOutside)=\"onClickOutsideProfile($event)\"\r\n                 *ngIf=\"profileMenuVisible\">\r\n              <div [ngClass]=\"{'shell-header-profile': showUserNameOnHeader}\">\r\n                <div *ngIf=\"user && showUserNameOnHeader\"\r\n                     class=\"shell-header-profile-userName\">\r\n                  {{ user.profile.name }}\r\n                </div>\r\n                <button type=\"button\"\r\n                        *ngIf=\"user\"\r\n                        (click)=\"userMenuExpanded = !userMenuExpanded\"\r\n                        class=\"shell-header-profile-dropdown-button\"\r\n                        id=\"user-menu\"\r\n                        aria-expanded=\"false\"\r\n                        aria-haspopup=\"true\">\r\n                  <span class=\"sr-only\">Open user menu</span>\r\n                  <span class=\"avatar-container\">\r\n                    <span class=\"avatar-text\">{{this.avatarName}}</span>\r\n                  </span>\r\n                </button>\r\n\r\n                <button type=\"button\"\r\n                        *ngIf=\"!user\"\r\n                        (click)=\"signin(null)\"\r\n                        class=\"shell-header-profile-dropdown-button\"\r\n                        id=\"user-menu\"\r\n                        aria-expanded=\"false\"\r\n                        aria-haspopup=\"true\">\r\n                  <span class=\"sr-only\">sign in</span>\r\n                  <span class=\"avatar-container\">\r\n                    <span class=\"avatar-text\"><i class=\"ms-Icon ms-Icon--Signin\"></i></span>\r\n                  </span>\r\n                </button>\r\n\r\n                <div *ngIf=\"userMenuExpanded\"\r\n                     [ngClass]=\"showUserNameOnHeader ? 'shell-header-profile-dropdown-with-username' : 'shell-header-profile-dropdown'\"\r\n                     role=\"menu\"\r\n                     aria-orientation=\"vertical\"\r\n                     aria-labelledby=\"user-menu\">\r\n                  <!-- <a href=\"#\" class=\"block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100\" role=\"menuitem\">\u0391\u03C0\u03BF\u03C3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7</a> -->\r\n                  <ng-container *ngFor=\"let link of links.profile | async\">\r\n                    <!-- <a *ngIf=\"link.external\" [attr.href]=\"link.path\" [attr.target]=\"'_blank'\" class=\"nav-link-profile\">\r\n                      {{ link.text }}\r\n                    </a> -->\r\n                    <a [routerLink]=\"link.path\"\r\n                       [routerLinkActive]=\"['nav-link-profile-active']\"\r\n                       [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n                       class=\"nav-link-profile\">\r\n                      {{ link.text }}\r\n                    </a>\r\n                  </ng-container>\r\n                </div>\r\n\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Notifications dropdown -->\r\n            <div class=\"ml-2 relative\"\r\n                 (clickOutside)=\"onClickOutsideNotifications($event)\"\r\n                 *ngIf=\"notificationsMenuVisible\">\r\n              <!-- Notifications Button -->\r\n              <button type=\"button\"\r\n                      class=\"mobile-menu-rounded-button bg-transparent\"\r\n                      *ngIf=\"showNotifications\"\r\n                      (click)=\"expandNotificationsMenu()\"\r\n                      id=\"notifications-menu\"\r\n                      aria-expanded=\"false\"\r\n                      aria-haspopup=\"true\">\r\n                <span class=\"sr-only\">View notifications</span>\r\n                <span class=\"relative inline-block\">\r\n                  <!-- Heroicon name: outline/bell -->\r\n                  <svg class=\"mobile-menu-rounded-button-icon-style\"\r\n                       xmlns=\"http://www.w3.org/2000/svg\"\r\n                       fill=\"none\"\r\n                       viewBox=\"0 0 24 24\"\r\n                       stroke=\"currentColor\"\r\n                       aria-hidden=\"true\">\r\n                    <path stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                          stroke-width=\"2\"\r\n                          d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" />\r\n                  </svg>\r\n                  <span *ngIf=\"unreadNotificationsCount > 0\"\r\n                        class=\"absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-gray-100 transform translate-x-1/2 -translate-y-1/2 bg-gray-500 rounded-full\">{{unreadNotificationsCount}}</span>\r\n                </span>\r\n              </button>\r\n\r\n              <div *ngIf=\"notificationsMenuExpanded\"\r\n                   [ngClass]=\"showUserNameOnHeader ? 'shell-header-notifications-dropdown-with-username' : 'shell-header-notifications-dropdown'\"\r\n                   role=\"menu\"\r\n                   aria-orientation=\"vertical\"\r\n                   aria-labelledby=\"notifications-menu\">\r\n                <div class=\"max-h-64 overflow-y-auto notification-messages min-h\">\r\n                  <ng-container *ngIf=\"!notifications; else notificationsDropDown\"\r\n                                class=\"py-5\">\r\n                    <div class=\"nav-link-notifications hover:bg-transparent\">\r\n                      \u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03BD\u03AD\u03B5\u03C2 \u03B5\u03B9\u03B4\u03BF\u03C0\u03BF\u03B9\u03AE\u03C3\u03B5\u03B9\u03C2\r\n                    </div>\r\n                  </ng-container>\r\n                  <ng-template #notificationsDropDown>\r\n                    <ul class=\"pr-1.5\">\r\n                      <ng-container *ngIf=\"notifications | async as obs; else loading\">\r\n                        <ng-container *ngIf=\"obs.length <= 0\"\r\n                                      class=\"py-5\">\r\n                          <div class=\"nav-link-notifications hover:bg-transparent\">\r\n                            \u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03BD\u03AD\u03B5\u03C2 \u03B5\u03B9\u03B4\u03BF\u03C0\u03BF\u03B9\u03AE\u03C3\u03B5\u03B9\u03C2\r\n                          </div>\r\n                        </ng-container>\r\n                        <ng-container *ngFor=\"let link of obs\">\r\n                          <li class=\"mb-2\"\r\n                              [ngClass]=\"{'border-l-2 border-blue-500 bg-blue-50 hover:bg-blue-50': !link.isRead }\">\r\n                            <div class=\"flex justify-between\">\r\n                              <div class=\"flex-grow\">\r\n                                <a [routerLink]=\"link.path\"\r\n                                   class=\"nav-link-notifications grid\"\r\n                                   [ngClass]=\"!link.isRead ? ' hover:bg-blue-50' : 'border-b border-gray-100'\">\r\n                                  <div class=\"flex flex-col\">\r\n                                    <div class=\"font-thin tracking-tighter\">\r\n                                      {{ link.creationDate | date: 'EEE, d MMMM' }}\r\n                                    </div>\r\n                                    <div class=\"font-bold\">\r\n                                      {{ link.text }}\r\n                                    </div>\r\n                                  </div>\r\n                                </a>\r\n                              </div>\r\n                              <!-- <div class=\"flex-none font-thin tracking-tighter\">\r\n                                  <button type=\"button\"\r\n                                          title=\"\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE\"\r\n                                          class=\"text-red-600 hover:text-red-900\">\r\n                                    <span class=\"ms-Icon ms-Icon--Delete\"></span>\r\n                                  </button>\r\n                                </div> -->\r\n                            </div>\r\n                          </li>\r\n\r\n\r\n                        </ng-container>\r\n                      </ng-container>\r\n\r\n                      <ng-template #loading>\r\n                        <div class=\"h-32 flex items-center justify-center\">\r\n                          <div class=\"animate-pulse text-s text-gray-600\">Loading...</div>\r\n                        </div>\r\n                      </ng-template>\r\n\r\n\r\n                    </ul>\r\n                  </ng-template>\r\n                </div>\r\n                <div class=\"p-1 rounded-sm\">\r\n                  <a [routerLink]=\"(allNotificationsLink | async)?.path\">\r\n                    <button type=\"button\"\r\n                            class=\"shell-header-notifications-dropdown-view-all-button\">\u03A0\u03C1\u03BF\u03B2\u03BF\u03BB\u03AE \u03CC\u03BB\u03C9\u03BD</button>\r\n                  </a>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"mobile-menu-button-container\">\r\n          <!-- Mobile menu button -->\r\n          <button type=\"button\"\r\n                  (click)=\"mobileMenuExpanded = !mobileMenuExpanded\"\r\n                  class=\"mobile-menu-button\"\r\n                  aria-controls=\"mobile-menu\"\r\n                  [attr.aria-expanded]=\"mobileMenuExpanded\">\r\n            <span class=\"sr-only\">Open main menu</span>\r\n            <!--Heroicon name: outline/menu  Menu open: \"hidden\", Menu closed: \"block\"-->\r\n            <svg class=\"block h-6 w-6\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M4 6h16M4 12h16M4 18h16\" />\r\n            </svg>\r\n            <!--Heroicon name: outline/x Menu open: \"block\", Menu closed: \"hidden\"-->\r\n            <svg class=\"hidden h-6 w-6\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M6 18L18 6M6 6l12 12\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- Mobile menu, show/hide based on menu state. -->\r\n  <div class=\"mobile-menu-container\"\r\n       *ngIf=\"mobileMenuExpanded\"\r\n       id=\"mobile-menu\">\r\n    <div class=\"mobile-menu-link-container\">\r\n      <ng-container *ngFor=\"let link of sectionLinks | async\">\r\n        <a *ngIf=\"link.external\"\r\n           [attr.href]=\"link.path\"\r\n           [attr.target]=\"'_blank'\"\r\n           class=\"nav-link-mobile\">\r\n          {{ link.text }}\r\n        </a>\r\n        <a *ngIf=\"!link.external\"\r\n           [routerLink]=\"link.path\"\r\n           [routerLinkActive]=\"['nav-link-mobile-active']\"\r\n           [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n           class=\"nav-link-mobile\">\r\n          {{ link.text }}\r\n        </a>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!user\">\r\n        <a href=\"#\"\r\n           (click)=\"signin($event)\"\r\n           class=\"nav-link-mobile\">\r\n          <i class=\"ms-Icon ms-Icon--Signin mr-2\"></i>\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7\r\n        </a>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"mobile-menu-user-info-container\"\r\n         *ngIf=\"user\">\r\n      <div class=\"mobile-menu-user-info-container-inner\">\r\n        <div class=\"flex-shrink-0\">\r\n          <span class=\"mobile-menu-avatar-container\">\r\n            <span class=\"mobile-menu-avatar-name\">{{ this.avatarName }}</span>\r\n          </span>\r\n        </div>\r\n        <div class=\"ml-3\">\r\n          <div class=\"mobile-menu-user-name\">{{ user.profile.name }}</div>\r\n          <div class=\"mobile-menu-user-email\">{{ user.profile.email }}</div>\r\n        </div>\r\n        <a [routerLink]=\"(allNotificationsLink | async)?.path\">\r\n          <button class=\"mobile-menu-rounded-button\">\r\n            <span class=\"sr-only\">View notifications</span>\r\n            <!-- Heroicon name: outline/bell -->\r\n            <svg class=\"mobile-menu-rounded-button-icon-style\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" />\r\n            </svg>\r\n          </button>\r\n        </a>\r\n      </div>\r\n      <div class=\"mobile-menu-link-container\">\r\n        <ng-container *ngFor=\"let link of links.profile | async\">\r\n          <a *ngIf=\"link.external\"\r\n             [attr.href]=\"link.path\"\r\n             [attr.target]=\"'_blank'\"\r\n             class=\"nav-link-mobile\">\r\n            {{ link.text }}\r\n          </a>\r\n          <a [routerLink]=\"link.path\"\r\n             [routerLinkActive]=\"['nav-link-mobile-active']\"\r\n             [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n             class=\"nav-link-mobile\">\r\n            {{ link.text }}\r\n          </a>\r\n        </ng-container>\r\n        <!-- <a href=\"#\" class=\"block px-3 py-2 rounded-sm text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700\">\u0391\u03C0\u03BF\u03C3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7</a> -->\r\n      </div>\r\n    </div>\r\n  </div>\r\n</nav>\r\n", directives: [{ type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], exportAs: ["routerLinkActive"] }, { type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1.AsyncPipe, "date": i1.DatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ShellHeaderComponent, decorators: [{
+ShellHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellHeaderComponent, deps: [{ token: AuthService }, { token: Router }, { token: ActivatedRoute }, { token: SHELL_CONFIG }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
+ShellHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellHeaderComponent, selector: "lib-shell-header", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], profileMenuVisible: ["profile-menu", "profileMenuVisible"], showUserNameOnHeader: ["show-userName", "showUserNameOnHeader"], showAlerts: ["show-alerts", "showAlerts"], shellLayout: ["shell-layout", "shellLayout"], border: "border" }, ngImport: i0, template: "<nav>\r\n  <div class=\"shell-header-paddings\">\r\n    <div [class]=\"border ? 'shell-header-border' : ''\">\r\n      <div class=\"shell-header-menu-container\">\r\n        <div *ngIf=\"shellLayout==='Stacked'\" class=\"shell-header-logo-container\">\r\n          <div>\r\n            <a href=\"#\" [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"config.appLogo\" [alt]=\"config.appLogoAlt\" /></a>\r\n          </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"shellLayout==='Stacked'\" class=\"shell-header-link-container\">\r\n          <div class=\"shell-header-link-container-inner\">\r\n            <lib-nav-links-list\r\n              [links]=\"sectionLinks\"\r\n              [active-fragment]=\"activeFragment\"\r\n              [link-class]=\"'nav-link'\"\r\n              [link-active-class]=\"'nav-link-active'\">\r\n            </lib-nav-links-list>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"shell-header-md-visible\">\r\n\r\n          <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\r\n\r\n            <lib-nav-links-list\r\n              [links]=\"links.profileActions\"\r\n              [active-fragment]=\"activeFragment\"\r\n              [link-class]=\"'shell-header-menu-rounded-button'\"\r\n              [link-active-class]=\"'shell-header-menu-rounded-button-active'\">\r\n            </lib-nav-links-list>\r\n\r\n\r\n            <!-- Profile dropdown -->\r\n            <div *ngIf=\"profileMenuVisible\" class=\"ml-2\">\r\n              <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\"></lib-user-profile-menu>\r\n            </div>\r\n\r\n            <!-- Notifications dropdown -->\r\n            <div *ngIf=\"showAlerts && user\" class=\"ml-2\">\r\n              <lib-notifications-indicator></lib-notifications-indicator>\r\n            </div>\r\n\r\n            <!-- languages dropdown -->\r\n            <div *ngIf=\"config.showLangsOnHeader\" class=\"ml-2\">\r\n              <lib-language-selection></lib-language-selection>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"mobile-menu-button-container\" *ngIf=\"shellLayout === 'Stacked'\">\r\n          <!-- Mobile menu button -->\r\n          <button type=\"button\"\r\n                  (click)=\"mobileMenuExpanded = !mobileMenuExpanded\"\r\n                  class=\"mobile-menu-button\"\r\n                  aria-controls=\"mobile-menu\"\r\n                  [attr.aria-expanded]=\"mobileMenuExpanded\">\r\n            <span class=\"sr-only\">Open main menu</span>\r\n            <!--Heroicon name: outline/menu  Menu open: \"hidden\", Menu closed: \"block\"-->\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\"\r\n                 [class]=\"mobileMenuExpanded ? 'hidden':'block h-6 w-6'\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M4 6h16M4 12h16M4 18h16\" />\r\n            </svg>\r\n            <!--Heroicon name: outline/x Menu open: \"block\", Menu closed: \"hidden\"-->\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\"\r\n                 [class]=\"mobileMenuExpanded ? 'block h-6 w-6':'hidden'\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M6 18L18 6M6 6l12 12\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- Mobile menu, show/hide based on menu state. -->\r\n  <div class=\"mobile-menu-container\" *ngIf=\"mobileMenuExpanded\" id=\"mobile-menu\">\r\n    <lib-nav-links-list\r\n      [links]=\"sectionLinks\"\r\n      [active-fragment]=\"activeFragment\"\r\n      [link-class]=\"'nav-link-mobile'\"\r\n      [link-active-class]=\"'nav-link-mobile-active'\"\r\n      [container-class]=\"'mobile-menu-link-container'\">\r\n    </lib-nav-links-list>\r\n\r\n    <div *ngIf=\"!user\">\r\n      <a href=\"#\" (click)=\"signin($event)\" class=\"nav-link-mobile\">\r\n        <i class=\"ms-Icon ms-Icon--Signin mr-2\"></i>\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7\r\n      </a>\r\n    </div>\r\n\r\n    <div class=\"mobile-menu-user-info-container\" *ngIf=\"user\">\r\n      <div class=\"mobile-menu-user-info-container-inner\">\r\n        <div class=\"flex-shrink-0\">\r\n          <span class=\"mobile-menu-avatar-container\">\r\n            <span class=\"mobile-menu-avatar-name\">{{ this.avatarName }}</span>\r\n          </span>\r\n        </div>\r\n        <div class=\"ml-3\">\r\n          <div class=\"mobile-menu-user-name\">{{ user.profile.name }}</div>\r\n          <div class=\"mobile-menu-user-email\">{{ user.profile.email }}</div>\r\n        </div>\r\n        <!--\r\n        <button class=\"mobile-menu-rounded-button\">\r\n          <span class=\"sr-only\">View notifications</span>\r\n          <svg class=\"mobile-menu-rounded-button-icon-style\"\r\n               xmlns=\"http://www.w3.org/2000/svg\"\r\n               fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\"\r\n               aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" />\r\n          </svg>\r\n        </button>\r\n        -->\r\n      </div>\r\n    </div>\r\n\r\n    <lib-nav-links-list\r\n          [links]=\"links.profile\"\r\n          [active-fragment]=\"activeFragment\"\r\n          [link-class]=\"'nav-link-mobile'\"\r\n          [link-active-class]=\"'nav-link-mobile-active'\"\r\n          [container-class]=\"'mobile-menu-link-container'\">\r\n      </lib-nav-links-list>\r\n  </div>\r\n</nav>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }, { kind: "component", type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator" }, { kind: "component", type: LanguageSelectionComponent, selector: "lib-language-selection" }, { kind: "component", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: ["show-user-name"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellHeaderComponent, decorators: [{
             type: Component,
-            args: [{
-                    // tslint:disable-next-line:component-selector
-                    selector: 'lib-shell-header',
-                    templateUrl: './shell-header.component.html',
-                }]
-        }], ctorParameters: function () { return [{ type: i2.AuthService, decorators: [{
-                    type: Inject,
-                    args: [AuthService]
-                }] }, { type: i1$1.Router, decorators: [{
-                    type: Inject,
-                    args: [Router]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [APP_LINKS]
-                }] }]; }, propDecorators: { sectionLinksPath: [{
+            args: [{ selector: 'lib-shell-header', template: "<nav>\r\n  <div class=\"shell-header-paddings\">\r\n    <div [class]=\"border ? 'shell-header-border' : ''\">\r\n      <div class=\"shell-header-menu-container\">\r\n        <div *ngIf=\"shellLayout==='Stacked'\" class=\"shell-header-logo-container\">\r\n          <div>\r\n            <a href=\"#\" [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"config.appLogo\" [alt]=\"config.appLogoAlt\" /></a>\r\n          </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"shellLayout==='Stacked'\" class=\"shell-header-link-container\">\r\n          <div class=\"shell-header-link-container-inner\">\r\n            <lib-nav-links-list\r\n              [links]=\"sectionLinks\"\r\n              [active-fragment]=\"activeFragment\"\r\n              [link-class]=\"'nav-link'\"\r\n              [link-active-class]=\"'nav-link-active'\">\r\n            </lib-nav-links-list>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"shell-header-md-visible\">\r\n\r\n          <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\r\n\r\n            <lib-nav-links-list\r\n              [links]=\"links.profileActions\"\r\n              [active-fragment]=\"activeFragment\"\r\n              [link-class]=\"'shell-header-menu-rounded-button'\"\r\n              [link-active-class]=\"'shell-header-menu-rounded-button-active'\">\r\n            </lib-nav-links-list>\r\n\r\n\r\n            <!-- Profile dropdown -->\r\n            <div *ngIf=\"profileMenuVisible\" class=\"ml-2\">\r\n              <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\"></lib-user-profile-menu>\r\n            </div>\r\n\r\n            <!-- Notifications dropdown -->\r\n            <div *ngIf=\"showAlerts && user\" class=\"ml-2\">\r\n              <lib-notifications-indicator></lib-notifications-indicator>\r\n            </div>\r\n\r\n            <!-- languages dropdown -->\r\n            <div *ngIf=\"config.showLangsOnHeader\" class=\"ml-2\">\r\n              <lib-language-selection></lib-language-selection>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"mobile-menu-button-container\" *ngIf=\"shellLayout === 'Stacked'\">\r\n          <!-- Mobile menu button -->\r\n          <button type=\"button\"\r\n                  (click)=\"mobileMenuExpanded = !mobileMenuExpanded\"\r\n                  class=\"mobile-menu-button\"\r\n                  aria-controls=\"mobile-menu\"\r\n                  [attr.aria-expanded]=\"mobileMenuExpanded\">\r\n            <span class=\"sr-only\">Open main menu</span>\r\n            <!--Heroicon name: outline/menu  Menu open: \"hidden\", Menu closed: \"block\"-->\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\"\r\n                 [class]=\"mobileMenuExpanded ? 'hidden':'block h-6 w-6'\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M4 6h16M4 12h16M4 18h16\" />\r\n            </svg>\r\n            <!--Heroicon name: outline/x Menu open: \"block\", Menu closed: \"hidden\"-->\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\"\r\n                 [class]=\"mobileMenuExpanded ? 'block h-6 w-6':'hidden'\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M6 18L18 6M6 6l12 12\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- Mobile menu, show/hide based on menu state. -->\r\n  <div class=\"mobile-menu-container\" *ngIf=\"mobileMenuExpanded\" id=\"mobile-menu\">\r\n    <lib-nav-links-list\r\n      [links]=\"sectionLinks\"\r\n      [active-fragment]=\"activeFragment\"\r\n      [link-class]=\"'nav-link-mobile'\"\r\n      [link-active-class]=\"'nav-link-mobile-active'\"\r\n      [container-class]=\"'mobile-menu-link-container'\">\r\n    </lib-nav-links-list>\r\n\r\n    <div *ngIf=\"!user\">\r\n      <a href=\"#\" (click)=\"signin($event)\" class=\"nav-link-mobile\">\r\n        <i class=\"ms-Icon ms-Icon--Signin mr-2\"></i>\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7\r\n      </a>\r\n    </div>\r\n\r\n    <div class=\"mobile-menu-user-info-container\" *ngIf=\"user\">\r\n      <div class=\"mobile-menu-user-info-container-inner\">\r\n        <div class=\"flex-shrink-0\">\r\n          <span class=\"mobile-menu-avatar-container\">\r\n            <span class=\"mobile-menu-avatar-name\">{{ this.avatarName }}</span>\r\n          </span>\r\n        </div>\r\n        <div class=\"ml-3\">\r\n          <div class=\"mobile-menu-user-name\">{{ user.profile.name }}</div>\r\n          <div class=\"mobile-menu-user-email\">{{ user.profile.email }}</div>\r\n        </div>\r\n        <!--\r\n        <button class=\"mobile-menu-rounded-button\">\r\n          <span class=\"sr-only\">View notifications</span>\r\n          <svg class=\"mobile-menu-rounded-button-icon-style\"\r\n               xmlns=\"http://www.w3.org/2000/svg\"\r\n               fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\"\r\n               aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" />\r\n          </svg>\r\n        </button>\r\n        -->\r\n      </div>\r\n    </div>\r\n\r\n    <lib-nav-links-list\r\n          [links]=\"links.profile\"\r\n          [active-fragment]=\"activeFragment\"\r\n          [link-class]=\"'nav-link-mobile'\"\r\n          [link-active-class]=\"'nav-link-mobile-active'\"\r\n          [container-class]=\"'mobile-menu-link-container'\">\r\n      </lib-nav-links-list>\r\n  </div>\r\n</nav>\r\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i2.AuthService, decorators: [{
+                        type: Inject,
+                        args: [AuthService]
+                    }] }, { type: i1$1.Router, decorators: [{
+                        type: Inject,
+                        args: [Router]
+                    }] }, { type: i1$1.ActivatedRoute, decorators: [{
+                        type: Inject,
+                        args: [ActivatedRoute]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [SHELL_CONFIG]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [APP_LINKS]
+                    }] }];
+    }, propDecorators: { sectionLinksPath: [{
                 type: Input,
                 args: ['section-links']
-            }], notificationsLinksPath: [{
+            }], profileMenuVisible: [{
                 type: Input,
-                args: ['notifications-links']
-            }], allNotificationsLinkPath: [{
+                args: ['profile-menu']
+            }], showUserNameOnHeader: [{
                 type: Input,
-                args: ['all-notifications']
-            }], notificationsCounterLinksPath: [{
+                args: ['show-userName']
+            }], showAlerts: [{
                 type: Input,
-                args: ['notifications-counter']
-            }], config: [{
-                type: Input
+                args: ['show-alerts']
+            }], shellLayout: [{
+                type: Input,
+                args: ['shell-layout']
             }], border: [{
                 type: Input
             }] } });
@@ -1789,30 +2138,72 @@ class ShellFooterComponent {
         this.links = links;
     }
 }
-ShellFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ShellFooterComponent, deps: [{ token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
-ShellFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ShellFooterComponent, selector: "lib-shell-footer", ngImport: i0, template: "<footer class=\"shell-footer-component-container\">\r\n  <div class=\"shell-footer-paddings\">\r\n    <div class=\"shell-footer-component-container-inner\">\r\n      <div class=\"shell-footer-sections-container\">\r\n        <div class=\"shell-footer-section\">\r\n          <img class=\"shell-footer-logo-h\" src=\"assets/images/branding/indice.png\" alt=\"INDICE logo\" />\r\n          <nav class=\"mt-4\">\r\n            <ul class=\"space-y-2\">\r\n              <ng-container *ngFor=\"let link of links.brand | async\">\r\n                <li>\r\n                  <a [href]=\"link.path\" class=\"shell-footer-link\">{{ link.text }}</a>\r\n                </li>\r\n              </ng-container>\r\n            </ul>\r\n          </nav>\r\n        </div>\r\n        <div class=\"shell-footer-section-links\">\r\n          <h5 class=\"shell-footer-section-title\">Legal</h5>\r\n          <nav class=\"mt-4\">\r\n            <ul class=\"grid lg:grid-cols-2\">\r\n              <ng-container *ngFor=\"let link of links.legal | async\">\r\n                <li class=\"mb-2\">\r\n                  <a [href]=\"link.path\" class=\"shell-footer-link\">{{ link.text }}</a>\r\n                </li>\r\n              </ng-container>\r\n            </ul>\r\n          </nav>\r\n        </div>\r\n        <div class=\"shell-footer-section-links\">\r\n          <h5 class=\"shell-footer-section-title\">Follow us</h5>\r\n          <nav class=\"mt-4\">\r\n            <ul class=\"grid lg:grid-cols-2\">\r\n              <li class=\"mb-2\">\r\n                <a href=\"#\" class=\"shell-footer-social\">\r\n                  <svg  class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                    <path d=\"M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84\"/>\r\n                  </svg>\r\n                  <span> Twitter </span>\r\n                </a>\r\n              </li>\r\n              <li class=\"mb-2\">\r\n                <a href=\"#\" class=\"shell-footer-social\">\r\n                  <svg class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                    <path fill-rule=\"evenodd\" d=\"M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z\" clip-rule=\"evenodd\"/>\r\n                  </svg>\r\n                  <span> Instagram </span>\r\n                </a>\r\n              </li>\r\n              <li class=\"mb-2\">\r\n                <a href=\"#\" class=\"shell-footer-social\">\r\n                  <svg class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\" >\r\n                    <path fill-rule=\"evenodd\" d=\"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z\" clip-rule=\"evenodd\"/>\r\n                  </svg>\r\n                  <span> Facebook </span>\r\n                </a>\r\n              </li>\r\n            </ul>\r\n          </nav>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"shell-footer-copyright\">\r\n      <!--<nav class=\"flex flex-wrap justify-center space-x-6\">\r\n      <a href=\"#\" class=\"font-normal text-sm hover:text-gray-100 mb-2\">Cookie settings</a>\r\n    </nav>-->\r\n      <p class=\"text-sm text-center sm:text-right\">\r\n        \u00A9 2021 INDICE. All rights reserved.\r\n      </p>\r\n    </div>\r\n  </div>\r\n</footer>\r\n", directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i1.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ShellFooterComponent, decorators: [{
+ShellFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellFooterComponent, deps: [{ token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
+ShellFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellFooterComponent, selector: "lib-shell-footer", ngImport: i0, template: "<footer class=\"shell-footer-component-container\">\r\n  <div class=\"shell-footer-paddings\">\r\n    <div class=\"shell-footer-component-container-inner\">\r\n      <div class=\"shell-footer-sections-container\">\r\n        <div class=\"shell-footer-section\">\r\n          <img class=\"shell-footer-logo-h\" src=\"assets/images/branding/indice.png\" alt=\"INDICE logo\" />\r\n          <nav class=\"mt-4\">\r\n            <ul class=\"space-y-2\">\r\n              <ng-container *ngFor=\"let link of links.brand | async\">\r\n                <li>\r\n                  <a [href]=\"link.path\" class=\"shell-footer-link\">{{ link.text }}</a>\r\n                </li>\r\n              </ng-container>\r\n            </ul>\r\n          </nav>\r\n        </div>\r\n        <div class=\"shell-footer-section-links\">\r\n          <h5 class=\"shell-footer-section-title\">Legal</h5>\r\n          <nav class=\"mt-4\">\r\n            <ul class=\"grid lg:grid-cols-2\">\r\n              <ng-container *ngFor=\"let link of links.legal | async\">\r\n                <li class=\"mb-2\">\r\n                  <a [href]=\"link.path\" class=\"shell-footer-link\">{{ link.text }}</a>\r\n                </li>\r\n              </ng-container>\r\n            </ul>\r\n          </nav>\r\n        </div>\r\n        <div class=\"shell-footer-section-links\">\r\n          <h5 class=\"shell-footer-section-title\">Follow us</h5>\r\n          <nav class=\"mt-4\">\r\n            <ul class=\"grid lg:grid-cols-2\">\r\n              <li class=\"mb-2\">\r\n                <a href=\"#\" class=\"shell-footer-social\">\r\n                  <svg  class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                    <path d=\"M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84\"/>\r\n                  </svg>\r\n                  <span> Twitter </span>\r\n                </a>\r\n              </li>\r\n              <li class=\"mb-2\">\r\n                <a href=\"#\" class=\"shell-footer-social\">\r\n                  <svg class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                    <path fill-rule=\"evenodd\" d=\"M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z\" clip-rule=\"evenodd\"/>\r\n                  </svg>\r\n                  <span> Instagram </span>\r\n                </a>\r\n              </li>\r\n              <li class=\"mb-2\">\r\n                <a href=\"#\" class=\"shell-footer-social\">\r\n                  <svg class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\" >\r\n                    <path fill-rule=\"evenodd\" d=\"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z\" clip-rule=\"evenodd\"/>\r\n                  </svg>\r\n                  <span> Facebook </span>\r\n                </a>\r\n              </li>\r\n            </ul>\r\n          </nav>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"shell-footer-copyright\">\r\n      <!--<nav class=\"flex flex-wrap justify-center space-x-6\">\r\n      <a href=\"#\" class=\"font-normal text-sm hover:text-gray-100 mb-2\">Cookie settings</a>\r\n    </nav>-->\r\n      <p class=\"text-sm text-center sm:text-right\">\r\n        \u00A9 2021 INDICE. All rights reserved.\r\n      </p>\r\n    </div>\r\n  </div>\r\n</footer>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellFooterComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'lib-shell-footer',
-                    templateUrl: './shell-footer.component.html'
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [APP_LINKS]
-                }] }]; } });
+            args: [{ selector: 'lib-shell-footer', template: "<footer class=\"shell-footer-component-container\">\r\n  <div class=\"shell-footer-paddings\">\r\n    <div class=\"shell-footer-component-container-inner\">\r\n      <div class=\"shell-footer-sections-container\">\r\n        <div class=\"shell-footer-section\">\r\n          <img class=\"shell-footer-logo-h\" src=\"assets/images/branding/indice.png\" alt=\"INDICE logo\" />\r\n          <nav class=\"mt-4\">\r\n            <ul class=\"space-y-2\">\r\n              <ng-container *ngFor=\"let link of links.brand | async\">\r\n                <li>\r\n                  <a [href]=\"link.path\" class=\"shell-footer-link\">{{ link.text }}</a>\r\n                </li>\r\n              </ng-container>\r\n            </ul>\r\n          </nav>\r\n        </div>\r\n        <div class=\"shell-footer-section-links\">\r\n          <h5 class=\"shell-footer-section-title\">Legal</h5>\r\n          <nav class=\"mt-4\">\r\n            <ul class=\"grid lg:grid-cols-2\">\r\n              <ng-container *ngFor=\"let link of links.legal | async\">\r\n                <li class=\"mb-2\">\r\n                  <a [href]=\"link.path\" class=\"shell-footer-link\">{{ link.text }}</a>\r\n                </li>\r\n              </ng-container>\r\n            </ul>\r\n          </nav>\r\n        </div>\r\n        <div class=\"shell-footer-section-links\">\r\n          <h5 class=\"shell-footer-section-title\">Follow us</h5>\r\n          <nav class=\"mt-4\">\r\n            <ul class=\"grid lg:grid-cols-2\">\r\n              <li class=\"mb-2\">\r\n                <a href=\"#\" class=\"shell-footer-social\">\r\n                  <svg  class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                    <path d=\"M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84\"/>\r\n                  </svg>\r\n                  <span> Twitter </span>\r\n                </a>\r\n              </li>\r\n              <li class=\"mb-2\">\r\n                <a href=\"#\" class=\"shell-footer-social\">\r\n                  <svg class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                    <path fill-rule=\"evenodd\" d=\"M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z\" clip-rule=\"evenodd\"/>\r\n                  </svg>\r\n                  <span> Instagram </span>\r\n                </a>\r\n              </li>\r\n              <li class=\"mb-2\">\r\n                <a href=\"#\" class=\"shell-footer-social\">\r\n                  <svg class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\" >\r\n                    <path fill-rule=\"evenodd\" d=\"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z\" clip-rule=\"evenodd\"/>\r\n                  </svg>\r\n                  <span> Facebook </span>\r\n                </a>\r\n              </li>\r\n            </ul>\r\n          </nav>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"shell-footer-copyright\">\r\n      <!--<nav class=\"flex flex-wrap justify-center space-x-6\">\r\n      <a href=\"#\" class=\"font-normal text-sm hover:text-gray-100 mb-2\">Cookie settings</a>\r\n    </nav>-->\r\n      <p class=\"text-sm text-center sm:text-right\">\r\n        \u00A9 2021 INDICE. All rights reserved.\r\n      </p>\r\n    </div>\r\n  </div>\r\n</footer>\r\n" }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [APP_LINKS]
+                    }] }];
+    } });
+
+class ShellSidebarComponent {
+    constructor(router, route, links) {
+        this.router = router;
+        this.route = route;
+        this.links = links;
+        // tslint:disable-next-line:no-input-rename
+        this.sectionLinksPath = 'main';
+        this.sectionLinks = of([]);
+        // tslint:disable-next-line:no-input-rename
+        this.shellConfig = undefined;
+        this.activeFragment = null;
+    }
+    ngOnInit() {
+        this.activeFragment = this.route.fragment.pipe(share());
+        this.sectionLinks = this.links[this.sectionLinksPath];
+    }
+}
+ShellSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarComponent, deps: [{ token: Router }, { token: ActivatedRoute }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
+ShellSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], shellConfig: ["config", "shellConfig"] }, ngImport: i0, template: "<!-- Sidebar component, swap this element with another sidebar if you like -->\n<div class=\"flex w-full flex-col h-full min-h-0 bg-gray-800\">\n  <div class=\"flex items-center h-16 flex-shrink-0 px-4 bg-gray-900\">\n    <!-- <img class=\"h-8 w-auto\" src=\"https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg\" alt=\"Workflow\"> -->\n    <a href=\"#\" [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"shellConfig?.appLogo\" [alt]=\"shellConfig?.appLogoAlt\" /></a>\n  </div>\n  <div class=\"pt-4 px-2 sidebar\">\n    <lib-nav-links-list\n      [show-icons]=\"true\"\n      [links]=\"sectionLinks\"\n      [active-fragment]=\"activeFragment\"\n      [link-class]=\"'sidebar nav-link'\"\n      [link-active-class]=\"'sidebar nav-link-active'\">\n    </lib-nav-links-list>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "component", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-shell-sidebar', template: "<!-- Sidebar component, swap this element with another sidebar if you like -->\n<div class=\"flex w-full flex-col h-full min-h-0 bg-gray-800\">\n  <div class=\"flex items-center h-16 flex-shrink-0 px-4 bg-gray-900\">\n    <!-- <img class=\"h-8 w-auto\" src=\"https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg\" alt=\"Workflow\"> -->\n    <a href=\"#\" [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"shellConfig?.appLogo\" [alt]=\"shellConfig?.appLogoAlt\" /></a>\n  </div>\n  <div class=\"pt-4 px-2 sidebar\">\n    <lib-nav-links-list\n      [show-icons]=\"true\"\n      [links]=\"sectionLinks\"\n      [active-fragment]=\"activeFragment\"\n      [link-class]=\"'sidebar nav-link'\"\n      [link-active-class]=\"'sidebar nav-link-active'\">\n    </lib-nav-links-list>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i1$1.Router, decorators: [{
+                        type: Inject,
+                        args: [Router]
+                    }] }, { type: i1$1.ActivatedRoute, decorators: [{
+                        type: Inject,
+                        args: [ActivatedRoute]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [APP_LINKS]
+                    }] }];
+    }, propDecorators: { sectionLinksPath: [{
+                type: Input,
+                args: ['section-links']
+            }], shellConfig: [{
+                type: Input,
+                args: ['config']
+            }] } });
 
 class ShellLayoutComponent {
-    constructor(router, location, config, componentLoaderFactory) {
+    constructor(document, router, location, config, componentLoaderFactory) {
+        this.document = document;
         this.router = router;
         this.location = location;
         this.config = config;
         this.componentLoaderFactory = componentLoaderFactory;
         this.dynamicComponentHosts = null;
-        this.routerSub$ = null;
         this.showRightPaneSM = false;
+        this.routerSub$ = null;
         this.activeConfig = new DefaultShellConfig();
         this.loaded = false;
+        this.hideSidebar = false;
         if (!config) {
             config = new DefaultShellConfig();
         }
@@ -1823,16 +2214,16 @@ class ShellLayoutComponent {
     }
     ngOnInit() {
         this.routerSub$ = this.router.events.pipe(filter((event) => event instanceof ActivationStart)).subscribe((e) => {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b;
             // console.log('ShellLayoutComponent ActivationStart', e);
-            if ((_a = e) === null || _a === void 0 ? void 0 : _a.snapshot) {
+            if (e === null || e === void 0 ? void 0 : e.snapshot) {
                 // console.log('ShellLayoutComponent ActivationStart snapshot', (e as ActivationStart)?.snapshot);
-                if ((_c = (_b = e) === null || _b === void 0 ? void 0 : _b.snapshot) === null || _c === void 0 ? void 0 : _c.data) {
+                if ((_a = e === null || e === void 0 ? void 0 : e.snapshot) === null || _a === void 0 ? void 0 : _a.data) {
                     // console.log('ShellLayoutComponent ActivationStart snapshot data', (e as ActivationStart)?.snapshot.data);
-                    if ((_e = (_d = e) === null || _d === void 0 ? void 0 : _d.snapshot) === null || _e === void 0 ? void 0 : _e.data.shell) {
+                    if ((_b = e === null || e === void 0 ? void 0 : e.snapshot) === null || _b === void 0 ? void 0 : _b.data.shell) {
                         // console.log('ShellLayoutComponent ActivationStart snapshot data shell params',
                         // (e as ActivationStart)?.snapshot.data.shell);
-                        this.activeConfig = (_f = e) === null || _f === void 0 ? void 0 : _f.snapshot.data.shell;
+                        this.activeConfig = e === null || e === void 0 ? void 0 : e.snapshot.data.shell;
                         // console.log('ShellLayoutComponent activeConfig from route: ', this.activeConfig);
                         if (this.activeConfig.customHeaderComponent) {
                             this.initCustomComponents();
@@ -1871,19 +2262,20 @@ class ShellLayoutComponent {
         }
     }
 }
-ShellLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ShellLayoutComponent, deps: [{ token: i1$1.Router }, { token: i1.Location }, { token: SHELL_CONFIG }, { token: ComponentLoaderFactory }], target: i0.ɵɵFactoryTarget.Component });
-ShellLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ShellLayoutComponent, selector: "lib-shell-layout", viewQueries: [{ propertyName: "dynamicComponentHosts", predicate: DynamicComponentHostDirective, descendants: true }], ngImport: i0, template: "<div *ngIf=\"loaded\"\r\n     [style.display]=\"!loaded ? 'none':'block'\"\r\n     class=\"shell-container active-side-pane\">\r\n  <div class=\"shell-header-container\"\r\n       *ngIf=\"activeConfig.showHeader\">\r\n    <div [class]=\"activeConfig.fluid ? 'shell-header-container-inner-fluid' : 'shell-header-container-inner'\">\r\n\r\n      <ng-container *ngIf=\"activeConfig.customHeaderComponent\">\r\n        <div appDynamicComponentHost=\"Header\"></div>\r\n      </ng-container>\r\n\r\n      <lib-shell-header *ngIf=\"!activeConfig.customHeaderComponent\"\r\n                        [config]=\"activeConfig\"></lib-shell-header>\r\n    </div>\r\n  </div>\r\n\r\n  <main [class]=\"activeConfig.showHeader ? 'shell-content-container' : 'shell-content-container-no-header'\">\r\n    <div [class]=\"activeConfig.fluid ? 'shell-content-container-inner-fluid' : 'shell-content-container-inner'\">\r\n      <router-outlet></router-outlet>\r\n    </div>\r\n  </main>\r\n\r\n  <div class=\"shell-footer-container\"\r\n       *ngIf=\"activeConfig.showFooter\">\r\n    <div [class]=\"activeConfig.fluid ? 'shell-footer-container-inner-fluid' : 'shell-footer-container-inner'\">\r\n      <ng-container *ngIf=\"activeConfig.customFooterComponent\">\r\n        <div appDynamicComponentHost\r\n             hostName=\"Footer\"></div>\r\n      </ng-container>\r\n      <lib-shell-footer *ngIf=\"!activeConfig.customFooterComponent\"></lib-shell-footer>\r\n    </div>\r\n  </div>\r\n\r\n  <lib-side-pane #rightPane>\r\n    <router-outlet name=\"rightpane\"\r\n                   (activate)=\"rightPane.onSidePaneActivated($event)\"\r\n                   (deactivate)=\"rightPane.onSidePaneDeactivated($event)\"></router-outlet>\r\n  </lib-side-pane>\r\n\r\n  <lib-toaster-container></lib-toaster-container>\r\n\r\n</div>\r\n", components: [{ type: ShellHeaderComponent, selector: "lib-shell-header", inputs: ["section-links", "notifications-links", "all-notifications", "notifications-counter", "config", "border"] }, { type: ShellFooterComponent, selector: "lib-shell-footer" }, { type: SidePaneComponent, selector: "lib-side-pane", inputs: ["visible"], outputs: ["onComplete"] }, { type: ToasterContainerComponent, selector: "lib-toaster-container" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentHostDirective, selector: "[appDynamicComponentHost]", inputs: ["hostName"] }, { type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ShellLayoutComponent, decorators: [{
+ShellLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellLayoutComponent, deps: [{ token: DOCUMENT }, { token: i1$1.Router }, { token: i1.Location }, { token: SHELL_CONFIG }, { token: ComponentLoaderFactory }], target: i0.ɵɵFactoryTarget.Component });
+ShellLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellLayoutComponent, selector: "lib-shell-layout", viewQueries: [{ propertyName: "dynamicComponentHosts", predicate: DynamicComponentHostDirective, descendants: true }], ngImport: i0, template: "<div *ngIf=\"loaded && (activeConfig.layout === 'Stacked' || !activeConfig.layout)\" [style.display]=\"!loaded ? 'none':'block'\" class=\"shell-container active-side-pane\">\r\n\r\n  <div class=\"shell-header-container\" *ngIf=\"activeConfig.showHeader\">\r\n    <div [class]=\"activeConfig.fluid ? 'shell-header-container-inner-fluid' : 'shell-header-container-inner'\">\r\n      <ng-container *ngIf=\"activeConfig.customHeaderComponent\">\r\n        <div appDynamicComponentHost =\"Header\"></div>\r\n      </ng-container>\r\n      <lib-shell-header *ngIf=\"!activeConfig.customHeaderComponent\" [show-userName]=\"activeConfig.showUserNameOnHeader\"\r\n        [show-alerts]=\"activeConfig.showAlertsOnHeader\">\r\n      </lib-shell-header>\r\n    </div>\r\n  </div>\r\n\r\n  <main [class]=\"activeConfig.showHeader ? 'shell-content-container' : 'shell-content-container-no-header'\">\r\n    <div [class]=\"activeConfig.fluid ? 'shell-content-container-inner-fluid' : 'shell-content-container-inner'\">\r\n      <router-outlet *ngIf=\"loaded && (activeConfig.layout === 'Stacked' || !activeConfig.layout)\"></router-outlet>\r\n    </div>\r\n  </main>\r\n\r\n  <div class=\"shell-footer-container\" *ngIf=\"activeConfig.showFooter\">\r\n    <div [class]=\"activeConfig.fluid ? 'shell-footer-container-inner-fluid' : 'shell-footer-container-inner'\">\r\n      <ng-container *ngIf=\"activeConfig.customFooterComponent\">\r\n        <div appDynamicComponentHost hostName=\"Footer\"></div>\r\n      </ng-container>\r\n      <lib-shell-footer *ngIf=\"!activeConfig.customFooterComponent\"></lib-shell-footer>\r\n    </div>\r\n  </div>\r\n\r\n  <lib-side-pane #rightPane>\r\n    <router-outlet name=\"rightpane\" (activate)=\"rightPane.onSidePaneActivated($event)\" (deactivate)=\"rightPane.onSidePaneDeactivated($event)\"></router-outlet>\r\n  </lib-side-pane>\r\n\r\n  <lib-toaster-container></lib-toaster-container>\r\n</div>\r\n\r\n<!-- SIDEBAR LAYOUT -->\r\n\r\n<div *ngIf=\"loaded && activeConfig.layout === 'Sidebar'\" [style.display]=\"!loaded ? 'none':'block'\" class=\"sidebar shell-container active-side-pane\">\r\n\r\n  <!-- Static sidebar for desktop -->\r\n  <div class=\"hidden w-0 sm:w-64 flex-col inset-y-0 bg-gray-800\" [class.hidden]=\"hideSidebar\" [class.fixed]=\"!hideSidebar\">\r\n    <lib-shell-sidebar [config]=\"activeConfig\" ></lib-shell-sidebar>\r\n  </div>\r\n\r\n  <div class=\"flex flex-col\" [class.pl-64]=\"!hideSidebar\">\r\n    <div class=\"sticky top-0 z-10 flex-shrink-0 flex h-16 bg-gray-800\">\r\n\r\n      <button type=\"button\" class=\"hidden sm:block px-4 border-0 text-white focus:outline-none\" (click)=\"hideSidebar = !hideSidebar\">\r\n        <span class=\"sr-only\">Open sidebar</span>\r\n        <!-- Heroicon name: outline/menu-alt-2 -->\r\n        <svg class=\"h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h7\" />\r\n        </svg>\r\n      </button>\r\n\r\n      <button type=\"button\" class=\"block sm:hidden px-4 border-0 text-gray-200 focus:outline-none\" (click)=\"hideSidebar = !hideSidebar\">\r\n        <span class=\"sr-only\">Open sidebar</span>\r\n        <!-- Heroicon name: outline/menu-alt-2 --> 111\r\n        <svg class=\"h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h7\" />\r\n        </svg>\r\n      </button>\r\n\r\n      <div class=\"flex-1\">\r\n        <div class=\"shell-header-container\">\r\n            <lib-shell-header [shell-layout]=\"activeConfig.layout\"  [show-userName]=\"activeConfig.showUserNameOnHeader\" [show-alerts]=\"activeConfig.showAlertsOnHeader\"></lib-shell-header>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <main class=\"shell-content-container-sidebar\">\r\n      <div class=\"shell-content-container-inner\">\r\n        <router-outlet *ngIf=\"loaded && activeConfig.layout === 'Sidebar'\"></router-outlet>\r\n      </div>\r\n    </main>\r\n  </div>\r\n\r\n  <lib-side-pane #rightPane>\r\n    <router-outlet name=\"rightpane\" (activate)=\"rightPane.onSidePaneActivated($event)\" (deactivate)=\"rightPane.onSidePaneDeactivated($event)\"></router-outlet>\r\n  </lib-side-pane>\r\n\r\n  <lib-toaster-container></lib-toaster-container>\r\n\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: DynamicComponentHostDirective, selector: "[appDynamicComponentHost]", inputs: ["hostName"] }, { kind: "component", type: SidePaneComponent, selector: "lib-side-pane", inputs: ["visible"], outputs: ["onComplete"] }, { kind: "component", type: ToasterContainerComponent, selector: "lib-toaster-container" }, { kind: "component", type: ShellHeaderComponent, selector: "lib-shell-header", inputs: ["section-links", "profile-menu", "show-userName", "show-alerts", "shell-layout", "border"] }, { kind: "component", type: ShellFooterComponent, selector: "lib-shell-footer" }, { kind: "component", type: ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: ["section-links", "config"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellLayoutComponent, decorators: [{
             type: Component,
-            args: [{
-                    // tslint:disable-next-line:component-selector
-                    selector: 'lib-shell-layout',
-                    templateUrl: './shell-layout.component.html',
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: i1.Location }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [SHELL_CONFIG]
-                }] }, { type: ComponentLoaderFactory }]; }, propDecorators: { dynamicComponentHosts: [{
+            args: [{ selector: 'lib-shell-layout', template: "<div *ngIf=\"loaded && (activeConfig.layout === 'Stacked' || !activeConfig.layout)\" [style.display]=\"!loaded ? 'none':'block'\" class=\"shell-container active-side-pane\">\r\n\r\n  <div class=\"shell-header-container\" *ngIf=\"activeConfig.showHeader\">\r\n    <div [class]=\"activeConfig.fluid ? 'shell-header-container-inner-fluid' : 'shell-header-container-inner'\">\r\n      <ng-container *ngIf=\"activeConfig.customHeaderComponent\">\r\n        <div appDynamicComponentHost =\"Header\"></div>\r\n      </ng-container>\r\n      <lib-shell-header *ngIf=\"!activeConfig.customHeaderComponent\" [show-userName]=\"activeConfig.showUserNameOnHeader\"\r\n        [show-alerts]=\"activeConfig.showAlertsOnHeader\">\r\n      </lib-shell-header>\r\n    </div>\r\n  </div>\r\n\r\n  <main [class]=\"activeConfig.showHeader ? 'shell-content-container' : 'shell-content-container-no-header'\">\r\n    <div [class]=\"activeConfig.fluid ? 'shell-content-container-inner-fluid' : 'shell-content-container-inner'\">\r\n      <router-outlet *ngIf=\"loaded && (activeConfig.layout === 'Stacked' || !activeConfig.layout)\"></router-outlet>\r\n    </div>\r\n  </main>\r\n\r\n  <div class=\"shell-footer-container\" *ngIf=\"activeConfig.showFooter\">\r\n    <div [class]=\"activeConfig.fluid ? 'shell-footer-container-inner-fluid' : 'shell-footer-container-inner'\">\r\n      <ng-container *ngIf=\"activeConfig.customFooterComponent\">\r\n        <div appDynamicComponentHost hostName=\"Footer\"></div>\r\n      </ng-container>\r\n      <lib-shell-footer *ngIf=\"!activeConfig.customFooterComponent\"></lib-shell-footer>\r\n    </div>\r\n  </div>\r\n\r\n  <lib-side-pane #rightPane>\r\n    <router-outlet name=\"rightpane\" (activate)=\"rightPane.onSidePaneActivated($event)\" (deactivate)=\"rightPane.onSidePaneDeactivated($event)\"></router-outlet>\r\n  </lib-side-pane>\r\n\r\n  <lib-toaster-container></lib-toaster-container>\r\n</div>\r\n\r\n<!-- SIDEBAR LAYOUT -->\r\n\r\n<div *ngIf=\"loaded && activeConfig.layout === 'Sidebar'\" [style.display]=\"!loaded ? 'none':'block'\" class=\"sidebar shell-container active-side-pane\">\r\n\r\n  <!-- Static sidebar for desktop -->\r\n  <div class=\"hidden w-0 sm:w-64 flex-col inset-y-0 bg-gray-800\" [class.hidden]=\"hideSidebar\" [class.fixed]=\"!hideSidebar\">\r\n    <lib-shell-sidebar [config]=\"activeConfig\" ></lib-shell-sidebar>\r\n  </div>\r\n\r\n  <div class=\"flex flex-col\" [class.pl-64]=\"!hideSidebar\">\r\n    <div class=\"sticky top-0 z-10 flex-shrink-0 flex h-16 bg-gray-800\">\r\n\r\n      <button type=\"button\" class=\"hidden sm:block px-4 border-0 text-white focus:outline-none\" (click)=\"hideSidebar = !hideSidebar\">\r\n        <span class=\"sr-only\">Open sidebar</span>\r\n        <!-- Heroicon name: outline/menu-alt-2 -->\r\n        <svg class=\"h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h7\" />\r\n        </svg>\r\n      </button>\r\n\r\n      <button type=\"button\" class=\"block sm:hidden px-4 border-0 text-gray-200 focus:outline-none\" (click)=\"hideSidebar = !hideSidebar\">\r\n        <span class=\"sr-only\">Open sidebar</span>\r\n        <!-- Heroicon name: outline/menu-alt-2 --> 111\r\n        <svg class=\"h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h7\" />\r\n        </svg>\r\n      </button>\r\n\r\n      <div class=\"flex-1\">\r\n        <div class=\"shell-header-container\">\r\n            <lib-shell-header [shell-layout]=\"activeConfig.layout\"  [show-userName]=\"activeConfig.showUserNameOnHeader\" [show-alerts]=\"activeConfig.showAlertsOnHeader\"></lib-shell-header>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <main class=\"shell-content-container-sidebar\">\r\n      <div class=\"shell-content-container-inner\">\r\n        <router-outlet *ngIf=\"loaded && activeConfig.layout === 'Sidebar'\"></router-outlet>\r\n      </div>\r\n    </main>\r\n  </div>\r\n\r\n  <lib-side-pane #rightPane>\r\n    <router-outlet name=\"rightpane\" (activate)=\"rightPane.onSidePaneActivated($event)\" (deactivate)=\"rightPane.onSidePaneDeactivated($event)\"></router-outlet>\r\n  </lib-side-pane>\r\n\r\n  <lib-toaster-container></lib-toaster-container>\r\n\r\n</div>\r\n" }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }, { type: i1$1.Router }, { type: i1.Location }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [SHELL_CONFIG]
+                    }] }, { type: ComponentLoaderFactory }];
+    }, propDecorators: { dynamicComponentHosts: [{
                 type: ViewChildren,
                 args: [DynamicComponentHostDirective]
             }] } });
@@ -1954,14 +2346,11 @@ class ViewLayoutComponent {
         }
     }
 }
-ViewLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ViewLayoutComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-ViewLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: { header: ["show-header", "header"], fluid: "fluid", title: "title", icon: "icon", actions: "actions", busy: "busy", searchPlaceholder: ["search-placeholder", "searchPlaceholder"], view: "view", metaItems: ["meta-items", "metaItems"] }, outputs: { onAction: "onAction", onSearch: "onSearch" }, viewQueries: [{ propertyName: "searchInput$", first: true, predicate: ["search"], descendants: true }], ngImport: i0, template: "<header *ngIf=\"header\" class=\"view-layout-paddings\">\r\n\r\n  <div class=\"view-layout-title-container\">\r\n\r\n    <div class=\"view-layout-title-container-inner\">\r\n      <div class=\"flex items-center\">\r\n        <i *ngIf=\"icon\" [class]=\"icon + ' title-icon'\" aria-hidden=\"true\"></i>\r\n        <h1 [class]=\"busy ? 'view-layout-title-busy' : 'view-layout-title'\">{{title}}</h1>\r\n      </div>\r\n      <div *ngIf=\"metaItems && metaItems.length > 0\" class=\"meta-container\">\r\n        <ng-container *ngFor=\"let meta of metaItems\">\r\n          <div class=\"meta-item-container\">\r\n            <i *ngIf=\"meta.icon\" [class]=\"meta.icon + ' meta-icon'\" aria-hidden=\"true\"></i>\r\n            <span class=\"meta-text\">{{meta.text}}</span>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"flex items-center justify-end\">\r\n      <ng-container *ngFor=\"let action of actions\"  [ngSwitch]=\"action.type\">\r\n\r\n        <ng-container *ngSwitchCase=\"'switch-view'\">\r\n          <button [disabled]=\"view === action.param\" type=\"button\" href=\"#\" class=\"ml-1 disabled:opacity-50 btn-view-header\" (click)=\"switchViewActionClick(action)\">\r\n            <span class=\"inline-block relative\">\r\n              <i [class]=\"action.icon\"></i>\r\n              <span *ngIf=\"view === action.param\" class=\"selected-view-indicator\"></span>\r\n            </span>\r\n          </button>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'search'\">\r\n          <label for=\"search\" class=\"sr-only\">Search</label>\r\n          <div class=\"search-container\">\r\n            <div class=\"pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center\">\r\n              <!--<svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                <path fill-rule=\"evenodd\" d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\" clip-rule=\"evenodd\" />\r\n              </svg>-->\r\n            </div>\r\n            <input id=\"search\" #search class=\"search-input\" [placeholder]=\"searchPlaceholder\"\r\n                   type=\"search\" name=\"search\" (input)=\"searchActionType(search.value)\" (onsearch)=\"handleClear($event)\">\r\n          </div>\r\n          <button type=\"button\"  href=\"#\" class=\"btn-view-header rounded-l-none\" [title]=\"action.tooltip\" (click)=\"searchActionClick(action, search.value)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'router-link'\">\r\n          <button type=\"button\"  href=\"#\" class=\"ml-1 btn-view-header\" [title]=\"action.tooltip\" (click)=\"routerLinkActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n\r\n\r\n        <ng-container *ngSwitchDefault>\r\n          <button type=\"button\"  class=\"ml-1 btn-view-header\" [title]=\"action.tooltip\" (click)=\"emitActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</header>\r\n\r\n<!-- component -->\r\n<div [class]=\"fluid ? 'view-container-fluid' : 'view-container'\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ViewLayoutComponent, decorators: [{
+ViewLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ViewLayoutComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+ViewLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: { header: ["show-header", "header"], fluid: "fluid", title: "title", icon: "icon", actions: "actions", busy: "busy", searchPlaceholder: ["search-placeholder", "searchPlaceholder"], view: "view", metaItems: ["meta-items", "metaItems"] }, outputs: { onAction: "onAction", onSearch: "onSearch" }, viewQueries: [{ propertyName: "searchInput$", first: true, predicate: ["search"], descendants: true }], ngImport: i0, template: "<header *ngIf=\"header\" class=\"view-layout-paddings\">\r\n\r\n  <div class=\"view-layout-title-container\">\r\n\r\n    <div class=\"view-layout-title-container-inner\">\r\n      <div class=\"flex items-center\">\r\n        <i *ngIf=\"icon\" [class]=\"icon + ' title-icon'\" aria-hidden=\"true\"></i>\r\n        <h1 [class]=\"busy ? 'view-layout-title-busy' : 'view-layout-title'\">{{title}}</h1>\r\n      </div>\r\n      <div *ngIf=\"metaItems && metaItems.length > 0\" class=\"meta-container\">\r\n        <ng-container *ngFor=\"let meta of metaItems\">\r\n          <div class=\"meta-item-container\">\r\n            <i *ngIf=\"meta.icon\" [class]=\"meta.icon + ' meta-icon'\" aria-hidden=\"true\"></i>\r\n            <span class=\"meta-text\">{{meta.text}}</span>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"flex items-center justify-end\">\r\n      <ng-container *ngFor=\"let action of actions\"  [ngSwitch]=\"action.type\">\r\n\r\n        <ng-container *ngSwitchCase=\"'switch-view'\">\r\n          <button [disabled]=\"view === action.param\" type=\"button\" href=\"#\" class=\"ml-1 disabled:opacity-50 btn-view-header\" (click)=\"switchViewActionClick(action)\">\r\n            <span class=\"inline-block relative\">\r\n              <i [class]=\"action.icon\"></i>\r\n              <span *ngIf=\"view === action.param\" class=\"selected-view-indicator\"></span>\r\n            </span>\r\n          </button>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'search'\">\r\n          <label for=\"search\" class=\"sr-only\">Search</label>\r\n          <div class=\"search-container\">\r\n            <div class=\"pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center\">\r\n              <!--<svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                <path fill-rule=\"evenodd\" d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\" clip-rule=\"evenodd\" />\r\n              </svg>-->\r\n            </div>\r\n            <input id=\"search\" #search class=\"search-input\" [placeholder]=\"searchPlaceholder\"\r\n                   type=\"search\" name=\"search\" (input)=\"searchActionType(search.value)\" (onsearch)=\"handleClear($event)\">\r\n          </div>\r\n          <button type=\"button\"  href=\"#\" class=\"btn-view-header rounded-l-none\" [title]=\"action.tooltip\" (click)=\"searchActionClick(action, search.value)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'router-link'\">\r\n          <button type=\"button\"  href=\"#\" class=\"ml-1 btn-view-header\" [title]=\"action.tooltip\" (click)=\"routerLinkActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n\r\n\r\n        <ng-container *ngSwitchDefault>\r\n          <button type=\"button\"  class=\"ml-1 btn-view-header\" [title]=\"action.tooltip\" (click)=\"emitActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</header>\r\n\r\n<!-- component -->\r\n<div [class]=\"fluid ? 'view-container-fluid' : 'view-container'\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ViewLayoutComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'lib-view-layout',
-                    templateUrl: './view-layout.component.html'
-                }]
+            args: [{ selector: 'lib-view-layout', template: "<header *ngIf=\"header\" class=\"view-layout-paddings\">\r\n\r\n  <div class=\"view-layout-title-container\">\r\n\r\n    <div class=\"view-layout-title-container-inner\">\r\n      <div class=\"flex items-center\">\r\n        <i *ngIf=\"icon\" [class]=\"icon + ' title-icon'\" aria-hidden=\"true\"></i>\r\n        <h1 [class]=\"busy ? 'view-layout-title-busy' : 'view-layout-title'\">{{title}}</h1>\r\n      </div>\r\n      <div *ngIf=\"metaItems && metaItems.length > 0\" class=\"meta-container\">\r\n        <ng-container *ngFor=\"let meta of metaItems\">\r\n          <div class=\"meta-item-container\">\r\n            <i *ngIf=\"meta.icon\" [class]=\"meta.icon + ' meta-icon'\" aria-hidden=\"true\"></i>\r\n            <span class=\"meta-text\">{{meta.text}}</span>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"flex items-center justify-end\">\r\n      <ng-container *ngFor=\"let action of actions\"  [ngSwitch]=\"action.type\">\r\n\r\n        <ng-container *ngSwitchCase=\"'switch-view'\">\r\n          <button [disabled]=\"view === action.param\" type=\"button\" href=\"#\" class=\"ml-1 disabled:opacity-50 btn-view-header\" (click)=\"switchViewActionClick(action)\">\r\n            <span class=\"inline-block relative\">\r\n              <i [class]=\"action.icon\"></i>\r\n              <span *ngIf=\"view === action.param\" class=\"selected-view-indicator\"></span>\r\n            </span>\r\n          </button>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'search'\">\r\n          <label for=\"search\" class=\"sr-only\">Search</label>\r\n          <div class=\"search-container\">\r\n            <div class=\"pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center\">\r\n              <!--<svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                <path fill-rule=\"evenodd\" d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\" clip-rule=\"evenodd\" />\r\n              </svg>-->\r\n            </div>\r\n            <input id=\"search\" #search class=\"search-input\" [placeholder]=\"searchPlaceholder\"\r\n                   type=\"search\" name=\"search\" (input)=\"searchActionType(search.value)\" (onsearch)=\"handleClear($event)\">\r\n          </div>\r\n          <button type=\"button\"  href=\"#\" class=\"btn-view-header rounded-l-none\" [title]=\"action.tooltip\" (click)=\"searchActionClick(action, search.value)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'router-link'\">\r\n          <button type=\"button\"  href=\"#\" class=\"ml-1 btn-view-header\" [title]=\"action.tooltip\" (click)=\"routerLinkActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n\r\n\r\n        <ng-container *ngSwitchDefault>\r\n          <button type=\"button\"  class=\"ml-1 btn-view-header\" [title]=\"action.tooltip\" (click)=\"emitActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</header>\r\n\r\n<!-- component -->\r\n<div [class]=\"fluid ? 'view-container-fluid' : 'view-container'\">\r\n  <ng-content></ng-content>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }]; }, propDecorators: { searchInput$: [{
                 type: ViewChild,
                 args: ['search']
@@ -2009,26 +2398,20 @@ class ModelViewLayoutComponent {
     ngOnInit() {
     }
     onSidePaneActivated($event) {
-        //console.log('onSidePaneActivated', $event);
         this.showRightPaneSM = true;
     }
     onSidePaneDeactivated($event) {
-        //console.log('onSidePaneActivated', $event);
         this.showRightPaneSM = false;
     }
     closeSidePane() {
         this.location.back();
     }
 }
-ModelViewLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ModelViewLayoutComponent, deps: [{ token: i1.Location }], target: i0.ɵɵFactoryTarget.Component });
-ModelViewLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ModelViewLayoutComponent, selector: "lib-model-view-layout", inputs: { title: "title", primary: ["primary-links", "primary"], secondary: ["secondary-links", "secondary"], metaItems: ["meta-items", "metaItems"] }, ngImport: i0, template: "<lib-view-layout [title]=\"title\" [meta-items]=\"metaItems\">\r\n  <main class=\"model-view-container\">\r\n    <div class=\"model-view-container-inner\">\r\n      <aside class=\"model-view-aside\">\r\n        <section aria-labelledby=\"menu\" class=\"details-view-aside-header-section\">\r\n          <div class=\"model-view-aside-header-container\">\r\n            <div class=\"model-view-aside-header-container-inner\">\r\n              <ng-content></ng-content>\r\n            </div>\r\n            <!-- menu items -->\r\n            <div class=\"model-view-menu-container\">\r\n              <nav class=\"model-view-menu-nav\">\r\n                <div class=\"model-view-menu-item\">\r\n                  <ng-container *ngFor=\"let section of primary\">\r\n                    <a href=\"#\"\r\n                       [routerLinkActive]=\"['view-nav-link-active']\"\r\n                       [routerLink]=\"section.link\"\r\n                       class=\"view-nav-link\">\r\n                      {{section.text}}\r\n                    </a>\r\n                  </ng-container>\r\n                </div>\r\n                <div class=\"model-view-menu-item-far\">\r\n                  <ng-container *ngFor=\"let section of secondary\">\r\n                    <a href=\"#\"\r\n                       [routerLinkActive]=\"['view-nav-link-active']\"\r\n                       [routerLinkActiveOptions]=\"{ exact: true }\"\r\n                       [routerLink]=\"section.link\"\r\n                       class=\"view-nav-link\">\r\n                      {{section.text}}\r\n                    </a>\r\n                  </ng-container>\r\n                </div>\r\n              </nav>\r\n            </div>\r\n          </div>\r\n        </section>\r\n      </aside>\r\n      <div class=\"model-view-details-container\">\r\n        <router-outlet></router-outlet>\r\n      </div>\r\n    </div>\r\n  </main>\r\n", components: [{ type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], exportAs: ["routerLinkActive"] }, { type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ModelViewLayoutComponent, decorators: [{
+ModelViewLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ModelViewLayoutComponent, deps: [{ token: i1.Location }], target: i0.ɵɵFactoryTarget.Component });
+ModelViewLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ModelViewLayoutComponent, selector: "lib-model-view-layout", inputs: { title: "title", primary: ["primary-links", "primary"], secondary: ["secondary-links", "secondary"], metaItems: ["meta-items", "metaItems"] }, ngImport: i0, template: "<lib-view-layout [title]=\"title\" [meta-items]=\"metaItems\">\r\n  <main class=\"model-view-container\">\r\n    <div class=\"model-view-container-inner\">\r\n      <aside class=\"model-view-aside\">\r\n        <section aria-labelledby=\"menu\" class=\"details-view-aside-header-section\">\r\n          <div class=\"model-view-aside-header-container\">\r\n            <div class=\"model-view-aside-header-container-inner\">\r\n              <ng-content></ng-content>\r\n            </div>\r\n            <!-- menu items -->\r\n            <div class=\"model-view-menu-container\">\r\n              <nav class=\"model-view-menu-nav\">\r\n                <div class=\"model-view-menu-item\">\r\n                  <ng-container *ngFor=\"let section of primary\">\r\n                    <a href=\"#\"\r\n                       [routerLinkActive]=\"['view-nav-link-active']\"\r\n                       [routerLink]=\"section.link\"\r\n                       class=\"view-nav-link\">\r\n                      {{section.text}}\r\n                    </a>\r\n                  </ng-container>\r\n                </div>\r\n                <div class=\"model-view-menu-item-far\">\r\n                  <ng-container *ngFor=\"let section of secondary\">\r\n                    <a href=\"#\"\r\n                       [routerLinkActive]=\"['view-nav-link-active']\"\r\n                       [routerLinkActiveOptions]=\"{ exact: true }\"\r\n                       [routerLink]=\"section.link\"\r\n                       class=\"view-nav-link\">\r\n                      {{section.text}}\r\n                    </a>\r\n                  </ng-container>\r\n                </div>\r\n              </nav>\r\n            </div>\r\n          </div>\r\n        </section>\r\n      </aside>\r\n      <div class=\"model-view-details-container\">\r\n        <router-outlet></router-outlet>\r\n      </div>\r\n    </div>\r\n  </main>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ModelViewLayoutComponent, decorators: [{
             type: Component,
-            args: [{
-                    // tslint:disable-next-line:component-selector
-                    selector: 'lib-model-view-layout',
-                    templateUrl: './model-view-layout.component.html'
-                }]
+            args: [{ selector: 'lib-model-view-layout', template: "<lib-view-layout [title]=\"title\" [meta-items]=\"metaItems\">\r\n  <main class=\"model-view-container\">\r\n    <div class=\"model-view-container-inner\">\r\n      <aside class=\"model-view-aside\">\r\n        <section aria-labelledby=\"menu\" class=\"details-view-aside-header-section\">\r\n          <div class=\"model-view-aside-header-container\">\r\n            <div class=\"model-view-aside-header-container-inner\">\r\n              <ng-content></ng-content>\r\n            </div>\r\n            <!-- menu items -->\r\n            <div class=\"model-view-menu-container\">\r\n              <nav class=\"model-view-menu-nav\">\r\n                <div class=\"model-view-menu-item\">\r\n                  <ng-container *ngFor=\"let section of primary\">\r\n                    <a href=\"#\"\r\n                       [routerLinkActive]=\"['view-nav-link-active']\"\r\n                       [routerLink]=\"section.link\"\r\n                       class=\"view-nav-link\">\r\n                      {{section.text}}\r\n                    </a>\r\n                  </ng-container>\r\n                </div>\r\n                <div class=\"model-view-menu-item-far\">\r\n                  <ng-container *ngFor=\"let section of secondary\">\r\n                    <a href=\"#\"\r\n                       [routerLinkActive]=\"['view-nav-link-active']\"\r\n                       [routerLinkActiveOptions]=\"{ exact: true }\"\r\n                       [routerLink]=\"section.link\"\r\n                       class=\"view-nav-link\">\r\n                      {{section.text}}\r\n                    </a>\r\n                  </ng-container>\r\n                </div>\r\n              </nav>\r\n            </div>\r\n          </div>\r\n        </section>\r\n      </aside>\r\n      <div class=\"model-view-details-container\">\r\n        <router-outlet></router-outlet>\r\n      </div>\r\n    </div>\r\n  </main>\r\n" }]
         }], ctorParameters: function () { return [{ type: i1.Location }]; }, propDecorators: { title: [{
                 type: Input
             }], primary: [{
@@ -2098,14 +2481,11 @@ class SideViewLayoutComponent {
         }
     }
 }
-SideViewLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: SideViewLayoutComponent, deps: [{ token: i1.Location }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-SideViewLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: SideViewLayoutComponent, selector: "lib-side-view-layout", inputs: { title: "title", showActions: "showActions", disabled: "disabled", returnPath: ["return-path", "returnPath"], okLabel: ["ok-label", "okLabel"], okShow: ["ok-show", "okShow"], closeOnOk: ["ok-close-dialog", "closeOnOk"], cancelLabel: ["cancel-label", "cancelLabel"], cancelShow: ["cancel-show", "cancelShow"], forceLocationBack: ["force-location-back", "forceLocationBack"] }, outputs: { cancel: "cancel", ok: "ok" }, ngImport: i0, template: "<div class=\"side-view-layout-size-box\">\r\n  <div class=\"side-view-layout-container\">\r\n    <div class=\"side-view-layout-container-inner\">\r\n      <div class=\"side-view-layout-header-margins\">\r\n        <div class=\"side-view-layout-header-container\">\r\n          <h2 class=\"side-view-layout-header-title\" id=\"slide-over-title\">\r\n            {{title}}\r\n          </h2>\r\n          <div class=\"side-view-layout-close-button-container\">\r\n            <button (click)=\"emitClose()\" class=\"side-view-layout-close-button\">\r\n              <span class=\"sr-only\">Close panel</span>\r\n              <!-- Heroicon name: outline/x -->\r\n              <svg class=\"side-view-layout-close-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"side-view-layout-content-container\">\r\n        <!-- Replace with your content -->\r\n        <ng-content></ng-content>\r\n        <!-- /End replace -->\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"showActions\" class=\"side-view-layout-actions-container\">\r\n      <button *ngIf=\"cancelShow\" (click)=\"emitCancel()\" type=\"button\" class=\"side-view-layout-action-button-cancel\">\r\n        {{cancelLabel}}\r\n      </button>\r\n      <button *ngIf=\"okShow\" (click)=\"emitOK()\" class=\"side-view-layout-action-button-submit\" [disabled]=\"disabled\">\r\n        {{okLabel}}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: SideViewLayoutComponent, decorators: [{
+SideViewLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SideViewLayoutComponent, deps: [{ token: i1.Location }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+SideViewLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: SideViewLayoutComponent, selector: "lib-side-view-layout", inputs: { title: "title", showActions: "showActions", disabled: "disabled", returnPath: ["return-path", "returnPath"], okLabel: ["ok-label", "okLabel"], okShow: ["ok-show", "okShow"], closeOnOk: ["ok-close-dialog", "closeOnOk"], cancelLabel: ["cancel-label", "cancelLabel"], cancelShow: ["cancel-show", "cancelShow"], forceLocationBack: ["force-location-back", "forceLocationBack"] }, outputs: { cancel: "cancel", ok: "ok" }, ngImport: i0, template: "<div class=\"side-view-layout-size-box\">\r\n  <div class=\"side-view-layout-container\">\r\n    <div class=\"side-view-layout-container-inner\">\r\n      <div class=\"side-view-layout-header-margins\">\r\n        <div class=\"side-view-layout-header-container\">\r\n          <h2 class=\"side-view-layout-header-title\" id=\"slide-over-title\">\r\n            {{title}}\r\n          </h2>\r\n          <div class=\"side-view-layout-close-button-container\">\r\n            <button (click)=\"emitClose()\" class=\"side-view-layout-close-button\">\r\n              <span class=\"sr-only\">Close panel</span>\r\n              <!-- Heroicon name: outline/x -->\r\n              <svg class=\"side-view-layout-close-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"side-view-layout-content-container\">\r\n        <!-- Replace with your content -->\r\n        <ng-content></ng-content>\r\n        <!-- /End replace -->\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"showActions\" class=\"side-view-layout-actions-container\">\r\n      <button *ngIf=\"cancelShow\" (click)=\"emitCancel()\" type=\"button\" class=\"side-view-layout-action-button-cancel\">\r\n        {{cancelLabel}}\r\n      </button>\r\n      <button *ngIf=\"okShow\" (click)=\"emitOK()\" class=\"side-view-layout-action-button-submit\" [disabled]=\"disabled\">\r\n        {{okLabel}}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SideViewLayoutComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'lib-side-view-layout',
-                    templateUrl: './side-view-layout.component.html'
-                }]
+            args: [{ selector: 'lib-side-view-layout', template: "<div class=\"side-view-layout-size-box\">\r\n  <div class=\"side-view-layout-container\">\r\n    <div class=\"side-view-layout-container-inner\">\r\n      <div class=\"side-view-layout-header-margins\">\r\n        <div class=\"side-view-layout-header-container\">\r\n          <h2 class=\"side-view-layout-header-title\" id=\"slide-over-title\">\r\n            {{title}}\r\n          </h2>\r\n          <div class=\"side-view-layout-close-button-container\">\r\n            <button (click)=\"emitClose()\" class=\"side-view-layout-close-button\">\r\n              <span class=\"sr-only\">Close panel</span>\r\n              <!-- Heroicon name: outline/x -->\r\n              <svg class=\"side-view-layout-close-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"side-view-layout-content-container\">\r\n        <!-- Replace with your content -->\r\n        <ng-content></ng-content>\r\n        <!-- /End replace -->\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"showActions\" class=\"side-view-layout-actions-container\">\r\n      <button *ngIf=\"cancelShow\" (click)=\"emitCancel()\" type=\"button\" class=\"side-view-layout-action-button-cancel\">\r\n        {{cancelLabel}}\r\n      </button>\r\n      <button *ngIf=\"okShow\" (click)=\"emitOK()\" class=\"side-view-layout-action-button-submit\" [disabled]=\"disabled\">\r\n        {{okLabel}}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n" }]
         }], ctorParameters: function () { return [{ type: i1.Location }, { type: i1$1.Router }]; }, propDecorators: { title: [{
                 type: Input
             }], showActions: [{
@@ -2140,8 +2520,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImpor
             }] } });
 
 class FormLayoutComponent {
-    constructor(_router) {
-        this._router = _router;
+    constructor(router$) {
+        this.router$ = router$;
         this.title = null;
         // tslint:disable-next-line:no-input-rename
         this.searchPlaceholder = 'αναζήτηση';
@@ -2153,7 +2533,6 @@ class FormLayoutComponent {
         // tslint:disable-next-line:no-output-on-prefix
         this.onSearch = new EventEmitter();
         this.onComplete = new EventEmitter();
-        this.showRightPaneSM = false;
     }
     ngOnInit() {
         var _a;
@@ -2182,21 +2561,18 @@ class FormLayoutComponent {
     }
     routerLinkActionClick(action, relative = false) {
         if (action.outlet) {
-            this._router.navigate(['', { outlets: { formRightPane: action.link } }]);
+            this.router$.navigate(['', { outlets: { formRightPane: action.link } }]);
         }
         else {
-            this._router.navigate([action.link]);
+            this.router$.navigate([action.link]);
         }
     }
 }
-FormLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: FormLayoutComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-FormLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: FormLayoutComponent, selector: "lib-form-layout", inputs: { title: "title", searchPlaceholder: ["search-placeholder", "searchPlaceholder"], actions: "actions", subTitle: ["sub-title", "subTitle"] }, outputs: { onAction: "onAction", onSearch: "onSearch", onComplete: "onComplete" }, viewQueries: [{ propertyName: "searchInput$", first: true, predicate: ["search"], descendants: true }], ngImport: i0, template: "<div class=\"form-layout-container\">\r\n  <div class=\"form-header\" *ngIf=\"title || subTitle || actions\">\r\n    <div class=\"form-header-inner\">\r\n      <h3 class=\"form-title\">\r\n        {{ title }}\r\n      </h3>\r\n      <p class=\"form-subtitle\">\r\n        {{ subTitle }}\r\n      </p>\r\n    </div>\r\n    <div class=\"form-header-actions\">\r\n      <ng-container *ngFor=\"let action of actions\" [ngSwitch]=\"action.type\">\r\n        <ng-container *ngSwitchCase=\"'search'\">\r\n          <label for=\"search\" class=\"sr-only\">Search</label>\r\n          <div class=\"search-container\">\r\n            <div class=\"pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center\">\r\n              <!--<svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                            <path fill-rule=\"evenodd\" d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\" clip-rule=\"evenodd\" />\r\n                          </svg>-->\r\n            </div>\r\n            <input id=\"search\"\r\n                   #search\r\n                   class=\"form-search-input\"\r\n                   [placeholder]=\"searchPlaceholder\"\r\n                   type=\"search\"\r\n                   name=\"search\"\r\n                   (input)=\"searchActionType(search.value)\">\r\n          </div>\r\n          <button type=\"button\"\r\n                  href=\"#\"\r\n                  class=\"btn-form-view-header-search\"\r\n                  [title]=\"action.tooltip\"\r\n                  (click)=\"searchActionClick(action, search.value)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'router-link'\">\r\n          <button type=\"button\"\r\n                  href=\"#\"\r\n                  class=\"ml-1 btn-form-view-header\"\r\n                  [title]=\"action.tooltip\"\r\n                  (click)=\"routerLinkActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n          <button type=\"button\"\r\n                  class=\"ml-1 btn-form-view-header\"\r\n                  [title]=\"action.tooltip\"\r\n                  (click)=\"emitActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"form-content-container\">\r\n    <div [ngClass]=\"{'form-content-container-inner': actions}\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n  <lib-side-pane #formPane (onComplete)=\"onSidePaneDeactivated($event)\">\r\n    <router-outlet name=\"formRightPane\"\r\n                   (activate)=\"formPane.onSidePaneActivated($event)\"\r\n                   (deactivate)=\"formPane.onSidePaneDeactivated($event)\"></router-outlet>\r\n  </lib-side-pane>\r\n</div>\r\n", components: [{ type: SidePaneComponent, selector: "lib-side-pane", inputs: ["visible"], outputs: ["onComplete"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: FormLayoutComponent, decorators: [{
+FormLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: FormLayoutComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+FormLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: FormLayoutComponent, selector: "lib-form-layout", inputs: { title: "title", searchPlaceholder: ["search-placeholder", "searchPlaceholder"], actions: "actions", subTitle: ["sub-title", "subTitle"] }, outputs: { onAction: "onAction", onSearch: "onSearch", onComplete: "onComplete" }, viewQueries: [{ propertyName: "searchInput$", first: true, predicate: ["search"], descendants: true }], ngImport: i0, template: "<div class=\"form-layout-container\">\r\n  <div class=\"form-header\" *ngIf=\"title || subTitle || actions\">\r\n    <div class=\"form-header-inner\">\r\n      <h3 class=\"form-title\">\r\n        {{ title }}\r\n      </h3>\r\n      <p class=\"form-subtitle\">\r\n        {{ subTitle }}\r\n      </p>\r\n    </div>\r\n    <div class=\"form-header-actions\">\r\n      <ng-container *ngFor=\"let action of actions\" [ngSwitch]=\"action.type\">\r\n        <ng-container *ngSwitchCase=\"'search'\">\r\n          <label for=\"search\" class=\"sr-only\">Search</label>\r\n          <div class=\"search-container\">\r\n            <div class=\"pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center\">\r\n              <!--<svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                            <path fill-rule=\"evenodd\" d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\" clip-rule=\"evenodd\" />\r\n                          </svg>-->\r\n            </div>\r\n            <input id=\"search\"\r\n                   #search\r\n                   class=\"form-search-input\"\r\n                   [placeholder]=\"searchPlaceholder\"\r\n                   type=\"search\"\r\n                   name=\"search\"\r\n                   (input)=\"searchActionType(search.value)\">\r\n          </div>\r\n          <button type=\"button\"\r\n                  href=\"#\"\r\n                  class=\"btn-form-view-header-search\"\r\n                  [title]=\"action.tooltip\"\r\n                  (click)=\"searchActionClick(action, search.value)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'router-link'\">\r\n          <button type=\"button\"\r\n                  href=\"#\"\r\n                  class=\"ml-1 btn-form-view-header\"\r\n                  [title]=\"action.tooltip\"\r\n                  (click)=\"routerLinkActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n          <button type=\"button\"\r\n                  class=\"ml-1 btn-form-view-header\"\r\n                  [title]=\"action.tooltip\"\r\n                  (click)=\"emitActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"form-content-container\">\r\n    <div [ngClass]=\"{'form-content-container-inner': actions}\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n  <lib-side-pane #formPane (onComplete)=\"onSidePaneDeactivated($event)\">\r\n    <router-outlet name=\"formRightPane\"\r\n                   (activate)=\"formPane.onSidePaneActivated($event)\"\r\n                   (deactivate)=\"formPane.onSidePaneDeactivated($event)\"></router-outlet>\r\n  </lib-side-pane>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: SidePaneComponent, selector: "lib-side-pane", inputs: ["visible"], outputs: ["onComplete"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: FormLayoutComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'lib-form-layout',
-                    templateUrl: './form-layout.component.html'
-                }]
+            args: [{ selector: 'lib-form-layout', template: "<div class=\"form-layout-container\">\r\n  <div class=\"form-header\" *ngIf=\"title || subTitle || actions\">\r\n    <div class=\"form-header-inner\">\r\n      <h3 class=\"form-title\">\r\n        {{ title }}\r\n      </h3>\r\n      <p class=\"form-subtitle\">\r\n        {{ subTitle }}\r\n      </p>\r\n    </div>\r\n    <div class=\"form-header-actions\">\r\n      <ng-container *ngFor=\"let action of actions\" [ngSwitch]=\"action.type\">\r\n        <ng-container *ngSwitchCase=\"'search'\">\r\n          <label for=\"search\" class=\"sr-only\">Search</label>\r\n          <div class=\"search-container\">\r\n            <div class=\"pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center\">\r\n              <!--<svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                            <path fill-rule=\"evenodd\" d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\" clip-rule=\"evenodd\" />\r\n                          </svg>-->\r\n            </div>\r\n            <input id=\"search\"\r\n                   #search\r\n                   class=\"form-search-input\"\r\n                   [placeholder]=\"searchPlaceholder\"\r\n                   type=\"search\"\r\n                   name=\"search\"\r\n                   (input)=\"searchActionType(search.value)\">\r\n          </div>\r\n          <button type=\"button\"\r\n                  href=\"#\"\r\n                  class=\"btn-form-view-header-search\"\r\n                  [title]=\"action.tooltip\"\r\n                  (click)=\"searchActionClick(action, search.value)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'router-link'\">\r\n          <button type=\"button\"\r\n                  href=\"#\"\r\n                  class=\"ml-1 btn-form-view-header\"\r\n                  [title]=\"action.tooltip\"\r\n                  (click)=\"routerLinkActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n          <button type=\"button\"\r\n                  class=\"ml-1 btn-form-view-header\"\r\n                  [title]=\"action.tooltip\"\r\n                  (click)=\"emitActionClick(action)\">\r\n            <i [class]=\"action.icon\"></i>\r\n          </button>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"form-content-container\">\r\n    <div [ngClass]=\"{'form-content-container-inner': actions}\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n  <lib-side-pane #formPane (onComplete)=\"onSidePaneDeactivated($event)\">\r\n    <router-outlet name=\"formRightPane\"\r\n                   (activate)=\"formPane.onSidePaneActivated($event)\"\r\n                   (deactivate)=\"formPane.onSidePaneDeactivated($event)\"></router-outlet>\r\n  </lib-side-pane>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: i1$1.Router }]; }, propDecorators: { searchInput$: [{
                 type: ViewChild,
                 args: ['search']
@@ -2233,18 +2609,17 @@ class AuthCallbackComponent {
         });
     }
 }
-AuthCallbackComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: AuthCallbackComponent, deps: [{ token: AuthService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-AuthCallbackComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: AuthCallbackComponent, selector: "lib-auth-callback", ngImport: i0, template: "<lib-view-layout [title]=\"status\" [busy]=\"true\"></lib-view-layout>", components: [{ type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: AuthCallbackComponent, decorators: [{
+AuthCallbackComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AuthCallbackComponent, deps: [{ token: AuthService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+AuthCallbackComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: AuthCallbackComponent, selector: "lib-auth-callback", ngImport: i0, template: "<lib-view-layout [title]=\"status\" [busy]=\"true\"></lib-view-layout>", dependencies: [{ kind: "component", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AuthCallbackComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'lib-auth-callback',
-                    templateUrl: './auth-callback.component.html'
-                }]
-        }], ctorParameters: function () { return [{ type: i2.AuthService, decorators: [{
-                    type: Inject,
-                    args: [AuthService]
-                }] }, { type: i1$1.Router }]; } });
+            args: [{ selector: 'lib-auth-callback', template: "<lib-view-layout [title]=\"status\" [busy]=\"true\"></lib-view-layout>" }]
+        }], ctorParameters: function () {
+        return [{ type: i2.AuthService, decorators: [{
+                        type: Inject,
+                        args: [AuthService]
+                    }] }, { type: i1$1.Router }];
+    } });
 
 class AuthRenewComponent {
     constructor(authService, router) {
@@ -2259,18 +2634,20 @@ class AuthRenewComponent {
         });
     }
 }
-AuthRenewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: AuthRenewComponent, deps: [{ token: AuthService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-AuthRenewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: AuthRenewComponent, selector: "lib-auth-renew", ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: AuthRenewComponent, decorators: [{
+AuthRenewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AuthRenewComponent, deps: [{ token: AuthService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+AuthRenewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: AuthRenewComponent, selector: "lib-auth-renew", ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AuthRenewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-auth-renew',
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: i2.AuthService, decorators: [{
-                    type: Inject,
-                    args: [AuthService]
-                }] }, { type: i1$1.Router }]; } });
+        }], ctorParameters: function () {
+        return [{ type: i2.AuthService, decorators: [{
+                        type: Inject,
+                        args: [AuthService]
+                    }] }, { type: i1$1.Router }];
+    } });
 
 class LoggedOutComponent {
     constructor(authService) {
@@ -2285,19 +2662,17 @@ class LoggedOutComponent {
         });
     }
 }
-LoggedOutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: LoggedOutComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
-LoggedOutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: LoggedOutComponent, selector: "lib-logged-out", ngImport: i0, template: "<lib-view-layout title=\"\u0388\u03C7\u03B5\u03C4\u03B5 \u03B1\u03C0\u03BF\u03C3\u03C5\u03BD\u03B4\u03B5\u03B8\u03B5\u03AF \u03BC\u03B5 \u03B5\u03C0\u03B9\u03C4\u03C5\u03C7\u03AF\u03B1!\"></lib-view-layout>", components: [{ type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: LoggedOutComponent, decorators: [{
+LoggedOutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LoggedOutComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
+LoggedOutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: LoggedOutComponent, selector: "lib-logged-out", ngImport: i0, template: "<lib-view-layout title=\"\u0388\u03C7\u03B5\u03C4\u03B5 \u03B1\u03C0\u03BF\u03C3\u03C5\u03BD\u03B4\u03B5\u03B8\u03B5\u03AF \u03BC\u03B5 \u03B5\u03C0\u03B9\u03C4\u03C5\u03C7\u03AF\u03B1!\"></lib-view-layout>", dependencies: [{ kind: "component", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LoggedOutComponent, decorators: [{
             type: Component,
-            args: [{
-                    // tslint:disable-next-line:component-selector
-                    selector: 'lib-logged-out',
-                    templateUrl: './logged-out.component.html'
-                }]
-        }], ctorParameters: function () { return [{ type: i2.AuthService, decorators: [{
-                    type: Inject,
-                    args: [AuthService]
-                }] }]; } });
+            args: [{ selector: 'lib-logged-out', template: "<lib-view-layout title=\"\u0388\u03C7\u03B5\u03C4\u03B5 \u03B1\u03C0\u03BF\u03C3\u03C5\u03BD\u03B4\u03B5\u03B8\u03B5\u03AF \u03BC\u03B5 \u03B5\u03C0\u03B9\u03C4\u03C5\u03C7\u03AF\u03B1!\"></lib-view-layout>" }]
+        }], ctorParameters: function () {
+        return [{ type: i2.AuthService, decorators: [{
+                        type: Inject,
+                        args: [AuthService]
+                    }] }];
+    } });
 
 class ErrorComponent {
     constructor() {
@@ -2306,14 +2681,11 @@ class ErrorComponent {
     ngOnInit() {
     }
 }
-ErrorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ErrorComponent, selector: "lib-error", ngImport: i0, template: "<lib-view-layout [show-header]=\"false\" title=\"500 - \u03C0\u03B1\u03C1\u03BF\u03C5\u03C3\u03B9\u03AC\u03C3\u03C4\u03B7\u03BA\u03B5 \u03C3\u03C6\u03AC\u03BB\u03BC\u03B1!\">\r\n  <div class=\"bg-gray-600 view-container\">\r\n    <div class=\"max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\r\n      <h2 class=\"text-3xl font-extrabold text-white sm:text-4xl\">\r\n        <span class=\"block\">500</span>\r\n      </h2>\r\n      <p class=\"mt-4 text-lg leading-6 text-gray-200\">\u03C3\u03C6\u03AC\u03BB\u03BC\u03B1, \u03BA\u03B1\u03C4\u03B9 \u03B4\u03B5\u03BD \u03C0\u03AE\u03B3\u03B5 \u03BA\u03B1\u03BB\u03AC...!</p>\r\n      <a href=\"/\" class=\"mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-sm text-gray-600 bg-white hover:bg-gray-50 sm:w-auto\">\r\n        \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03C3\u03C4\u03C1\u03AD\u03C8\u03B5\u03C4\u03B5\r\n      </a>\r\n    </div>\r\n  </div>\r\n</lib-view-layout>\r\n", components: [{ type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ErrorComponent, decorators: [{
+ErrorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ErrorComponent, selector: "lib-error", ngImport: i0, template: "<lib-view-layout [show-header]=\"false\" title=\"500 - \u03C0\u03B1\u03C1\u03BF\u03C5\u03C3\u03B9\u03AC\u03C3\u03C4\u03B7\u03BA\u03B5 \u03C3\u03C6\u03AC\u03BB\u03BC\u03B1!\">\r\n  <div class=\"bg-gray-600 view-container\">\r\n    <div class=\"max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\r\n      <h2 class=\"text-3xl font-extrabold text-white sm:text-4xl\">\r\n        <span class=\"block\">500</span>\r\n      </h2>\r\n      <p class=\"mt-4 text-lg leading-6 text-gray-200\">\u03C3\u03C6\u03AC\u03BB\u03BC\u03B1, \u03BA\u03B1\u03C4\u03B9 \u03B4\u03B5\u03BD \u03C0\u03AE\u03B3\u03B5 \u03BA\u03B1\u03BB\u03AC...!</p>\r\n      <a href=\"/\" class=\"mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-sm text-gray-600 bg-white hover:bg-gray-50 sm:w-auto\">\r\n        \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03C3\u03C4\u03C1\u03AD\u03C8\u03B5\u03C4\u03B5\r\n      </a>\r\n    </div>\r\n  </div>\r\n</lib-view-layout>\r\n", dependencies: [{ kind: "component", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ErrorComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'lib-error',
-                    templateUrl: './error.component.html'
-                }]
+            args: [{ selector: 'lib-error', template: "<lib-view-layout [show-header]=\"false\" title=\"500 - \u03C0\u03B1\u03C1\u03BF\u03C5\u03C3\u03B9\u03AC\u03C3\u03C4\u03B7\u03BA\u03B5 \u03C3\u03C6\u03AC\u03BB\u03BC\u03B1!\">\r\n  <div class=\"bg-gray-600 view-container\">\r\n    <div class=\"max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\r\n      <h2 class=\"text-3xl font-extrabold text-white sm:text-4xl\">\r\n        <span class=\"block\">500</span>\r\n      </h2>\r\n      <p class=\"mt-4 text-lg leading-6 text-gray-200\">\u03C3\u03C6\u03AC\u03BB\u03BC\u03B1, \u03BA\u03B1\u03C4\u03B9 \u03B4\u03B5\u03BD \u03C0\u03AE\u03B3\u03B5 \u03BA\u03B1\u03BB\u03AC...!</p>\r\n      <a href=\"/\" class=\"mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-sm text-gray-600 bg-white hover:bg-gray-50 sm:w-auto\">\r\n        \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03C3\u03C4\u03C1\u03AD\u03C8\u03B5\u03C4\u03B5\r\n      </a>\r\n    </div>\r\n  </div>\r\n</lib-view-layout>\r\n" }]
         }] });
 
 class PageNotFoundComponent {
@@ -2321,28 +2693,22 @@ class PageNotFoundComponent {
     ngOnInit() {
     }
 }
-PageNotFoundComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: PageNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PageNotFoundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: PageNotFoundComponent, selector: "lib-page-not-found", ngImport: i0, template: "<lib-view-layout [show-header]=\"false\"\r\n                 title=\"404 - \u03B4\u03B5\u03BD \u03B2\u03C1\u03AD\u03B8\u03B7\u03BA\u03B5!\">\r\n  <div class=\"bg-gray-600 view-container\">\r\n    <div class=\"max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\r\n      <h2 class=\"text-3xl font-extrabold text-white sm:text-4xl\">\r\n        <span class=\"block\">404</span>\r\n      </h2>\r\n      <p class=\"mt-4 text-lg leading-6 text-gray-200\">\u03B4\u03B5\u03BD \u03B2\u03C1\u03AD\u03B8\u03B7\u03BA\u03B5 \u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1 \u03C0\u03BF\u03C5 \u03B6\u03B7\u03C4\u03AE\u03C3\u03B1\u03C4\u03B5!</p>\r\n      <a href=\"/\"\r\n         class=\"mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-sm text-gray-600 bg-white hover:bg-gray-50 sm:w-auto\">\r\n        \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03C3\u03C4\u03C1\u03AD\u03C8\u03B5\u03C4\u03B5\r\n      </a>\r\n    </div>\r\n  </div>\r\n</lib-view-layout>", components: [{ type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: PageNotFoundComponent, decorators: [{
+PageNotFoundComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: PageNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PageNotFoundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: PageNotFoundComponent, selector: "lib-page-not-found", ngImport: i0, template: "<lib-view-layout [show-header]=\"false\" title=\"404 - \u03B4\u03B5\u03BD \u03B2\u03C1\u03AD\u03B8\u03B7\u03BA\u03B5!\">\r\n  <div class=\"text-gray-900\">\r\n    <div class=\"max-w-4xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\r\n      <h2 class=\"text-3xl font-extrabold sm:text-4xl\">\r\n        <span class=\"block\">404</span>\r\n      </h2>\r\n      <p class=\"mt-4 text-lg leading-6 text-gray-800\">\u03B4\u03B5\u03BD \u03B2\u03C1\u03AD\u03B8\u03B7\u03BA\u03B5 \u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1 \u03C0\u03BF\u03C5 \u03B6\u03B7\u03C4\u03AE\u03C3\u03B1\u03C4\u03B5!</p>\r\n      <a href=\"/\"\r\n         class=\"mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-sm text-gray-600 bg-white hover:bg-gray-50 sm:w-auto\">\r\n        \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03C3\u03C4\u03C1\u03AD\u03C8\u03B5\u03C4\u03B5\r\n      </a>\r\n    </div>\r\n  </div>\r\n</lib-view-layout>\r\n", dependencies: [{ kind: "component", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: PageNotFoundComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'lib-page-not-found',
-                    templateUrl: './page-not-found.component.html'
-                }]
+            args: [{ selector: 'lib-page-not-found', template: "<lib-view-layout [show-header]=\"false\" title=\"404 - \u03B4\u03B5\u03BD \u03B2\u03C1\u03AD\u03B8\u03B7\u03BA\u03B5!\">\r\n  <div class=\"text-gray-900\">\r\n    <div class=\"max-w-4xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\r\n      <h2 class=\"text-3xl font-extrabold sm:text-4xl\">\r\n        <span class=\"block\">404</span>\r\n      </h2>\r\n      <p class=\"mt-4 text-lg leading-6 text-gray-800\">\u03B4\u03B5\u03BD \u03B2\u03C1\u03AD\u03B8\u03B7\u03BA\u03B5 \u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1 \u03C0\u03BF\u03C5 \u03B6\u03B7\u03C4\u03AE\u03C3\u03B1\u03C4\u03B5!</p>\r\n      <a href=\"/\"\r\n         class=\"mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-sm text-gray-600 bg-white hover:bg-gray-50 sm:w-auto\">\r\n        \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03C3\u03C4\u03C1\u03AD\u03C8\u03B5\u03C4\u03B5\r\n      </a>\r\n    </div>\r\n  </div>\r\n</lib-view-layout>\r\n" }]
         }], ctorParameters: function () { return []; } });
 
 class UnauthorizedComponent {
     constructor() { }
     ngOnInit() { }
 }
-UnauthorizedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: UnauthorizedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-UnauthorizedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: UnauthorizedComponent, selector: "lib-unauthorized", ngImport: i0, template: "<lib-view-layout [show-header]=\"false\" title=\"401 - \u03B4\u03B5\u03BD \u03B5\u03C0\u03B9\u03C4\u03C1\u03AD\u03C0\u03B5\u03C4\u03B1\u03B9 \u03B7 \u03C0\u03C1\u03CC\u03C3\u03B2\u03B1\u03C3\u03B7!\">\r\n  <div class=\"bg-gray-600 view-container\">\r\n    <div class=\"max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\r\n      <h2 class=\"text-3xl font-extrabold text-white sm:text-4xl\">\r\n        <span class=\"block\">401</span>\r\n      </h2>\r\n      <p class=\"mt-4 text-lg leading-6 text-gray-200\">\u03B4\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C4\u03B1 \u03BA\u03B1\u03C4\u03AC\u03BB\u03BB\u03B7\u03BB\u03B1 \u03B4\u03B9\u03BA\u03B1\u03B9\u03CE\u03BC\u03B1\u03C4\u03B1 \u03C0\u03C1\u03CC\u03C3\u03B2\u03B1\u03C3\u03B7\u03C2!</p>\r\n      <a href=\"/\" class=\"mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-sm text-gray-600 bg-white hover:bg-gray-50 sm:w-auto\">\r\n        \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03C3\u03C4\u03C1\u03AD\u03C8\u03B5\u03C4\u03B5\r\n      </a>\r\n    </div>\r\n  </div>\r\n  </lib-view-layout>\r\n\r\n\r\n", components: [{ type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: UnauthorizedComponent, decorators: [{
+UnauthorizedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: UnauthorizedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+UnauthorizedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: UnauthorizedComponent, selector: "lib-unauthorized", ngImport: i0, template: "<lib-view-layout [show-header]=\"false\" title=\"401 - \u03B4\u03B5\u03BD \u03B5\u03C0\u03B9\u03C4\u03C1\u03AD\u03C0\u03B5\u03C4\u03B1\u03B9 \u03B7 \u03C0\u03C1\u03CC\u03C3\u03B2\u03B1\u03C3\u03B7!\">\r\n  <div class=\"bg-gray-600 view-container\">\r\n    <div class=\"max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\r\n      <h2 class=\"text-3xl font-extrabold text-white sm:text-4xl\">\r\n        <span class=\"block\">401</span>\r\n      </h2>\r\n      <p class=\"mt-4 text-lg leading-6 text-gray-200\">\u03B4\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C4\u03B1 \u03BA\u03B1\u03C4\u03AC\u03BB\u03BB\u03B7\u03BB\u03B1 \u03B4\u03B9\u03BA\u03B1\u03B9\u03CE\u03BC\u03B1\u03C4\u03B1 \u03C0\u03C1\u03CC\u03C3\u03B2\u03B1\u03C3\u03B7\u03C2!</p>\r\n      <a href=\"/\" class=\"mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-sm text-gray-600 bg-white hover:bg-gray-50 sm:w-auto\">\r\n        \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03C3\u03C4\u03C1\u03AD\u03C8\u03B5\u03C4\u03B5\r\n      </a>\r\n    </div>\r\n  </div>\r\n  </lib-view-layout>\r\n\r\n\r\n", dependencies: [{ kind: "component", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: UnauthorizedComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'lib-unauthorized',
-                    templateUrl: './unauthorized.component.html'
-                }]
+            args: [{ selector: 'lib-unauthorized', template: "<lib-view-layout [show-header]=\"false\" title=\"401 - \u03B4\u03B5\u03BD \u03B5\u03C0\u03B9\u03C4\u03C1\u03AD\u03C0\u03B5\u03C4\u03B1\u03B9 \u03B7 \u03C0\u03C1\u03CC\u03C3\u03B2\u03B1\u03C3\u03B7!\">\r\n  <div class=\"bg-gray-600 view-container\">\r\n    <div class=\"max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\r\n      <h2 class=\"text-3xl font-extrabold text-white sm:text-4xl\">\r\n        <span class=\"block\">401</span>\r\n      </h2>\r\n      <p class=\"mt-4 text-lg leading-6 text-gray-200\">\u03B4\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C4\u03B1 \u03BA\u03B1\u03C4\u03AC\u03BB\u03BB\u03B7\u03BB\u03B1 \u03B4\u03B9\u03BA\u03B1\u03B9\u03CE\u03BC\u03B1\u03C4\u03B1 \u03C0\u03C1\u03CC\u03C3\u03B2\u03B1\u03C3\u03B7\u03C2!</p>\r\n      <a href=\"/\" class=\"mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-sm text-gray-600 bg-white hover:bg-gray-50 sm:w-auto\">\r\n        \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03C3\u03C4\u03C1\u03AD\u03C8\u03B5\u03C4\u03B5\r\n      </a>\r\n    </div>\r\n  </div>\r\n  </lib-view-layout>\r\n\r\n\r\n" }]
         }], ctorParameters: function () { return []; } });
 
 class AddressPipe {
@@ -2354,9 +2720,9 @@ class AddressPipe {
         return `${value.street || ''}${value.streetNumber ? ' ' + value.streetNumber : ''}${value.city ? ', ' + value.city : ''}${+value.postalCode ? ', ' + +value.postalCode : ''}`;
     }
 }
-AddressPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: AddressPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-AddressPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: AddressPipe, name: "address", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: AddressPipe, decorators: [{
+AddressPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AddressPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+AddressPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: AddressPipe, name: "address", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AddressPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'address',
@@ -2416,9 +2782,9 @@ class DurationFormatPipe {
         return undefined;
     }
 }
-DurationFormatPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: DurationFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-DurationFormatPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: DurationFormatPipe, name: "durationFormat", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: DurationFormatPipe, decorators: [{
+DurationFormatPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DurationFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+DurationFormatPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: DurationFormatPipe, name: "durationFormat", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DurationFormatPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'durationFormat',
@@ -2426,28 +2792,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImpor
                 }]
         }] });
 
-const defaultError = 'Something went wrong';
-class ObsWithStatusPipe {
-    transform(val) {
-        return val.pipe(map((value) => {
-            return {
-                loading: value.type === 'start',
-                error: value.type === 'error' ? defaultError : '',
-                value: value.type ? value.value : value,
-            };
-        }), startWith({ loading: true }), catchError(error => of({ loading: false, error: typeof error === 'string' ? error : defaultError })));
-    }
-}
-ObsWithStatusPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ObsWithStatusPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-ObsWithStatusPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ObsWithStatusPipe, name: "obsWithStatus", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ObsWithStatusPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'obsWithStatus',
-                    pure: false
-                }]
-        }] });
-
 class BaseListComponent {
     constructor(route$, router$) {
         this.route$ = route$;
@@ -2497,26 +2841,26 @@ class BaseListComponent {
             // changing the view mode does not require reloading...
             this.view = params.get('view') || ListViewType.Tiles;
             // console.log('route changes ', this.view);
-            // if (params.get('search') !== this.search) {
-            //   this.searchChanged(params.get('search'));
-            // }
-            // const page = +(params.get('page') || 1);
-            // if (page !== this.page) {
-            //   this.page = page;
-            // }
-            // const size = +(params.get('pagesize') || 20);
-            // if (this.pageSize !== size) {
-            //   this.pageSize = size;
-            // }
-            // if (params.get('search') !== this.search) {
-            //   this.search = params.get('search');
-            // }
-            // if (params.get('sort') !== this.sort) {
-            //   this.sort = params.get('sort');
-            // }
-            // if (params.get('sortdir') !== this.sortdir) {
-            //   this.sortdir = params.get('sortdir');
-            // }
+            if (params.get('search') !== this.search) {
+                this.searchChanged(params.get('search'));
+            }
+            const page = +(params.get('page') || 1);
+            if (page !== this.page) {
+                this.page = page;
+            }
+            const size = +(params.get('pagesize') || 20);
+            if (this.pageSize !== size) {
+                this.pageSize = size;
+            }
+            if (params.get('search') !== this.search) {
+                this.search = params.get('search');
+            }
+            if (params.get('sort') !== this.sort) {
+                this.sort = params.get('sort');
+            }
+            if (params.get('sortdir') !== this.sortdir) {
+                this.sortdir = params.get('sortdir');
+            }
         });
         // just to sync params in query
         this.setRouteParams(true);
@@ -2617,9 +2961,9 @@ class BaseListComponent {
         this.load();
     }
 }
-BaseListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: BaseListComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-BaseListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: BaseListComponent, selector: "ng-component", ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: BaseListComponent, decorators: [{
+BaseListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BaseListComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+BaseListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: BaseListComponent, selector: "ng-component", ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BaseListComponent, decorators: [{
             type: Component,
             args: [{ template: '' }]
         }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }]; } });
@@ -2662,9 +3006,9 @@ class ModalBackdropComponent {
         ((bs) => bs)(element.offsetHeight);
     }
 }
-ModalBackdropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ModalBackdropComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-ModalBackdropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ModalBackdropComponent, selector: "lib-modal-backdrop", host: { classAttribute: "modal-backdrop" }, ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ModalBackdropComponent, decorators: [{
+ModalBackdropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ModalBackdropComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+ModalBackdropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ModalBackdropComponent, selector: "lib-modal-backdrop", host: { classAttribute: "modal-backdrop" }, ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ModalBackdropComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-modal-backdrop',
@@ -2686,9 +3030,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImpor
  */
 class ModalOptions {
 }
-ModalOptions.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ModalOptions, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ModalOptions.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ModalOptions });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ModalOptions, decorators: [{
+ModalOptions.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ModalOptions, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ModalOptions.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ModalOptions });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ModalOptions, decorators: [{
             type: Injectable
         }] });
 /**
@@ -2791,15 +3135,15 @@ class ModalContainerComponent {
         }, this.animationsEnabled ? animationTime.modal : 0);
     }
 }
-ModalContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ModalContainerComponent, deps: [{ token: ModalOptions }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-ModalContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ModalContainerComponent, selector: "lib-modal-container", host: { attributes: { "role": "dialog", "tabindex": "-1" }, listeners: { "mousedown": "onClickStarted($event)", "click": "onClickStop($event)", "window:popstate": "onPopState()", "window:keydown.esc": "onEsc($event)" }, properties: { "attr.aria-modal": "true", "attr.aria-labelledby": "config.ariaLabelledBy", "attr.aria-describedby": "config.ariaDescribedby" }, classAttribute: "modal" }, ngImport: i0, template: `
+ModalContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ModalContainerComponent, deps: [{ token: ModalOptions }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+ModalContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ModalContainerComponent, selector: "lib-modal-container", host: { attributes: { "role": "dialog", "tabindex": "-1" }, listeners: { "mousedown": "onClickStarted($event)", "click": "onClickStop($event)", "window:popstate": "onPopState()", "window:keydown.esc": "onEsc($event)" }, properties: { "attr.aria-modal": "true", "attr.aria-labelledby": "config.ariaLabelledBy", "attr.aria-describedby": "config.ariaDescribedby" }, classAttribute: "modal" }, ngImport: i0, template: `
     <div [class]="'modal-dialog' + (config.class ? ' ' + config.class : '')" role="document" focusTrap>
       <div class="modal-content">
         <ng-content></ng-content>
       </div>
     </div>
   `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ModalContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ModalContainerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-modal-container',
@@ -2852,9 +3196,9 @@ class Modal {
         this.setClass = () => void 0;
     }
 }
-Modal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: Modal, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-Modal.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: Modal });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: Modal, decorators: [{
+Modal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: Modal, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+Modal.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: Modal });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: Modal, decorators: [{
             type: Injectable
         }] });
 
@@ -3053,19 +3397,21 @@ class ModalService {
         });
     }
 }
-ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ModalService, deps: [{ token: ComponentLoaderFactory }, { token: i0.RendererFactory2 }, { token: DOCUMENT }, { token: MODAL_CONFIG_DEFAULT_OVERRIDE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-ModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ModalService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ModalService, decorators: [{
+ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ModalService, deps: [{ token: ComponentLoaderFactory }, { token: i0.RendererFactory2 }, { token: DOCUMENT }, { token: MODAL_CONFIG_DEFAULT_OVERRIDE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+ModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ModalService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ModalService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: ComponentLoaderFactory }, { type: i0.RendererFactory2 }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: ModalOptions, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MODAL_CONFIG_DEFAULT_OVERRIDE]
-                }] }]; } });
+        }], ctorParameters: function () {
+        return [{ type: ComponentLoaderFactory }, { type: i0.RendererFactory2 }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }, { type: ModalOptions, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [MODAL_CONFIG_DEFAULT_OVERRIDE]
+                    }] }];
+    } });
 
 class IndiceComponentsModule {
     // tslint:disable-next-line:typedef
@@ -3076,12 +3422,12 @@ class IndiceComponentsModule {
         };
     }
 }
-IndiceComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: IndiceComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-IndiceComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: IndiceComponentsModule, declarations: [
-        // diectives
+IndiceComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: IndiceComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+IndiceComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: IndiceComponentsModule, declarations: [
+        // Directives
         ClickOutsideDirective,
         DynamicComponentHostDirective,
-        // controls
+        // Controls
         DropDownMenuComponent,
         PagerComponent,
         ListViewComponent,
@@ -3096,76 +3442,85 @@ IndiceComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         DatepickerComponent,
         AvatarInitialsComponent,
         ToggleComponent,
+        ComboboxComponent,
         // Toaster
         ToasterContainerComponent,
         ToasterComponent,
-        // shell layout
+        // Shell Layout
         ShellLayoutComponent,
         ShellHeaderComponent,
         ShellFooterComponent,
-        // view layouts
+        // View Layouts
         ViewLayoutComponent,
         SideViewLayoutComponent,
         ModelViewLayoutComponent,
         FormLayoutComponent,
-        // pages (common)
+        // Pages (common)
         AuthCallbackComponent,
         AuthRenewComponent,
         LoggedOutComponent,
         ErrorComponent,
         PageNotFoundComponent,
         UnauthorizedComponent,
-        // pipes
+        // Pipes
         AddressPipe,
         DurationFormatPipe,
-        ObsWithStatusPipe], imports: [CommonModule,
+        NavLinksListComponent,
+        NotificationsIndicatorComponent,
+        LanguageSelectionComponent,
+        UserProfileMenuComponent,
+        ShellSidebarComponent,
+        // Tab Group Component
+        LibTabGroupComponent,
+        LibTabComponent
+    ], imports: [CommonModule,
         RouterModule,
-        IndiceAuthModule], exports: [ClickOutsideDirective,
+        IndiceAuthModule], exports: [AddressPipe,
+        AuthCallbackComponent,
+        AuthRenewComponent,
+        AvatarInitialsComponent,
+        ClickOutsideDirective,
+        CollapsiblePanelComponent,
+        ComboboxComponent,
+        DatepickerComponent,
         DropDownMenuComponent,
-        PagerComponent,
-        ListViewComponent,
+        DurationFormatPipe,
+        ErrorComponent,
+        FormLayoutComponent,
+        KpiTileComponent,
+        LibTabComponent,
+        LibTabGroupComponent,
         ListColumnComponent,
-        ListTileComponent,
         ListDetailsSectionComponent,
+        ListTileComponent,
+        ListViewComponent,
         ListViewEmptyStateComponent,
-        KpiTileComponent,
-        SkeletonLoaderComponent,
-        ShellLayoutComponent,
-        ShellHeaderComponent,
-        ShellFooterComponent,
-        ViewLayoutComponent,
-        SideViewLayoutComponent,
-        ModelViewLayoutComponent,
-        FormLayoutComponent,
-        AuthCallbackComponent,
-        AuthRenewComponent,
         LoggedOutComponent,
-        ErrorComponent,
+        ModelViewLayoutComponent,
         PageNotFoundComponent,
-        UnauthorizedComponent,
-        AddressPipe,
-        DurationFormatPipe,
-        ObsWithStatusPipe,
-        CollapsiblePanelComponent,
+        PagerComponent,
+        ShellFooterComponent,
+        ShellHeaderComponent,
+        ShellLayoutComponent,
         SidePaneComponent,
-        DatepickerComponent,
-        ToasterContainerComponent,
+        SideViewLayoutComponent,
+        SkeletonLoaderComponent,
         ToasterComponent,
-        AvatarInitialsComponent,
-        ToggleComponent] });
-IndiceComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: IndiceComponentsModule, imports: [[
-            CommonModule,
-            RouterModule,
-            IndiceAuthModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: IndiceComponentsModule, decorators: [{
+        ToasterContainerComponent,
+        ToggleComponent,
+        UnauthorizedComponent,
+        ViewLayoutComponent] });
+IndiceComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: IndiceComponentsModule, imports: [CommonModule,
+        RouterModule,
+        IndiceAuthModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: IndiceComponentsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
-                        // diectives
+                        // Directives
                         ClickOutsideDirective,
                         DynamicComponentHostDirective,
-                        // controls
+                        // Controls
                         DropDownMenuComponent,
                         PagerComponent,
                         ListViewComponent,
@@ -3180,29 +3535,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImpor
                         DatepickerComponent,
                         AvatarInitialsComponent,
                         ToggleComponent,
+                        ComboboxComponent,
                         // Toaster
                         ToasterContainerComponent,
                         ToasterComponent,
-                        // shell layout
+                        // Shell Layout
                         ShellLayoutComponent,
                         ShellHeaderComponent,
                         ShellFooterComponent,
-                        // view layouts
+                        // View Layouts
                         ViewLayoutComponent,
                         SideViewLayoutComponent,
                         ModelViewLayoutComponent,
                         FormLayoutComponent,
-                        // pages (common)
+                        // Pages (common)
                         AuthCallbackComponent,
                         AuthRenewComponent,
                         LoggedOutComponent,
                         ErrorComponent,
                         PageNotFoundComponent,
                         UnauthorizedComponent,
-                        // pipes
+                        // Pipes
                         AddressPipe,
                         DurationFormatPipe,
-                        ObsWithStatusPipe
+                        NavLinksListComponent,
+                        NotificationsIndicatorComponent,
+                        LanguageSelectionComponent,
+                        UserProfileMenuComponent,
+                        ShellSidebarComponent,
+                        // Tab Group Component
+                        LibTabGroupComponent,
+                        LibTabComponent
                     ],
                     imports: [
                         CommonModule,
@@ -3210,39 +3573,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImpor
                         IndiceAuthModule
                     ],
                     exports: [
+                        AddressPipe,
+                        AuthCallbackComponent,
+                        AuthRenewComponent,
+                        AvatarInitialsComponent,
                         ClickOutsideDirective,
+                        CollapsiblePanelComponent,
+                        ComboboxComponent,
+                        DatepickerComponent,
                         DropDownMenuComponent,
-                        PagerComponent,
-                        ListViewComponent,
+                        DurationFormatPipe,
+                        ErrorComponent,
+                        FormLayoutComponent,
+                        KpiTileComponent,
+                        LibTabComponent,
+                        LibTabGroupComponent,
                         ListColumnComponent,
-                        ListTileComponent,
                         ListDetailsSectionComponent,
+                        ListTileComponent,
+                        ListViewComponent,
                         ListViewEmptyStateComponent,
-                        KpiTileComponent,
-                        SkeletonLoaderComponent,
-                        ShellLayoutComponent,
-                        ShellHeaderComponent,
-                        ShellFooterComponent,
-                        ViewLayoutComponent,
-                        SideViewLayoutComponent,
-                        ModelViewLayoutComponent,
-                        FormLayoutComponent,
-                        AuthCallbackComponent,
-                        AuthRenewComponent,
                         LoggedOutComponent,
-                        ErrorComponent,
+                        ModelViewLayoutComponent,
                         PageNotFoundComponent,
-                        UnauthorizedComponent,
-                        AddressPipe,
-                        DurationFormatPipe,
-                        ObsWithStatusPipe,
-                        CollapsiblePanelComponent,
+                        PagerComponent,
+                        ShellFooterComponent,
+                        ShellHeaderComponent,
+                        ShellLayoutComponent,
                         SidePaneComponent,
-                        DatepickerComponent,
-                        ToasterContainerComponent,
+                        SideViewLayoutComponent,
+                        SkeletonLoaderComponent,
                         ToasterComponent,
-                        AvatarInitialsComponent,
-                        ToggleComponent
+                        ToasterContainerComponent,
+                        ToggleComponent,
+                        UnauthorizedComponent,
+                        ViewLayoutComponent
                     ]
                 }]
         }] });
@@ -3253,5 +3618,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { APP_LINKS, AddressPipe, AuthCallbackComponent, AuthRenewComponent, AvatarInitialsComponent, BaseListComponent, ClickOutsideDirective, CollapsiblePanelComponent, ComponentLoaderFactory, DatepickerComponent, DefaultShellConfig, DropDownMenuComponent, DurationFormatPipe, ErrorComponent, ExternalNavLink, FormLayoutComponent, FragmentNavLink, HeaderMetaItem, Icons, IndiceComponentsModule, KpiTileComponent, ListColumnComponent, ListDetailsSectionComponent, ListTileComponent, ListViewComponent, ListViewEmptyStateComponent, ListViewType, LoggedOutComponent, MODAL_CONFIG_DEFAULT_OVERRIDE, MenuOption, Modal, ModalOptions, ModalService, ModelViewLayoutComponent, NULL_TOAST, NavLink, NotificationNavLink, ObsWithStatusPipe, PageNotFoundComponent, PagerComponent, RouterViewAction, SCREEN_SIZE, SHELL_CONFIG, ShellFooterComponent, ShellHeaderComponent, ShellLayoutComponent, SidePaneComponent, SidePaneOverlayType, SidePaneSize, SideViewLayoutComponent, SkeletonLoaderComponent, SwitchViewAction, ToastType, ToasterComponent, ToasterContainerComponent, ToasterService, ToggleComponent, UnauthorizedComponent, ViewAction, ViewLayoutComponent };
-//# sourceMappingURL=indice-ng-components.js.map
+export { APP_LANGUAGES, APP_LINKS, APP_NOTIFICATIONS, AddressPipe, AuthCallbackComponent, AuthRenewComponent, AvatarInitialsComponent, BaseListComponent, ClickOutsideDirective, CollapsiblePanelComponent, ComboboxComponent, ComponentLoaderFactory, DatepickerComponent, DefaultShellConfig, DropDownMenuComponent, DurationFormatPipe, ErrorComponent, ExternalNavLink, FormLayoutComponent, FragmentNavLink, HeaderMetaItem, Icons, IndiceComponentsModule, KpiTileComponent, LibTabComponent, LibTabGroupComponent, ListColumnComponent, ListDetailsSectionComponent, ListTileComponent, ListViewComponent, ListViewEmptyStateComponent, ListViewType, LoggedOutComponent, MODAL_CONFIG_DEFAULT_OVERRIDE, MenuOption, Modal, ModalOptions, ModalService, ModelViewLayoutComponent, NULL_TOAST, NavLink, NavLinksListComponent, NotificationNavLink, PageNotFoundComponent, PagerComponent, RouterViewAction, SCREEN_SIZE, SHELL_CONFIG, ShellFooterComponent, ShellHeaderComponent, ShellLayoutComponent, ShellLayoutType, SidePaneComponent, SidePaneOverlayType, SidePaneSize, SideViewLayoutComponent, SkeletonLoaderComponent, SwitchViewAction, ToastType, ToasterComponent, ToasterContainerComponent, ToasterService, ToggleComponent, UnauthorizedComponent, ViewAction, ViewLayoutComponent };
+//# sourceMappingURL=indice-ng-components.mjs.map