@indice/ng-components 0.2.142-beta → 0.2.142

package/fesm2020/indice-ng-components.mjs

@@ -0,0 +1,3225 @@
+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 * as i1 from '@angular/common';
+import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
+import * as i1$1 from '@angular/router';
+import { NavigationStart, Router, ActivatedRoute, ActivationStart, RouterModule } from '@angular/router';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { BehaviorSubject, Subject, of, fromEvent } from 'rxjs';
+import { filter, share, map, debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import * as i2 from '@indice/ng-auth';
+import { AuthService, IndiceAuthModule } from '@indice/ng-auth';
+
+//
+// tslint:disable-next-line:directive-selector
+class ClickOutsideDirective {
+    constructor(
+    // tslint:disable-next-line:variable-name
+    _el, 
+    // tslint:disable-next-line:variable-name
+    _ngZone, platformId) {
+        this._el = _el;
+        this._ngZone = _ngZone;
+        this.platformId = platformId;
+        this.clickOutsideEnabled = true;
+        this.attachOutsideOnClick = false;
+        this.delayClickOutsideInit = false;
+        this.emitOnBlur = false;
+        this.exclude = '';
+        this.excludeBeforeClick = false;
+        this.clickOutsideEvents = '';
+        this.clickOutside = new EventEmitter();
+        // tslint:disable-next-line:variable-name
+        this._nodesExcluded = [];
+        // tslint:disable-next-line:variable-name
+        this._events = ['click'];
+        this._initOnClickBody = this._initOnClickBody.bind(this);
+        this._onClickBody = this._onClickBody.bind(this);
+        this._onWindowBlur = this._onWindowBlur.bind(this);
+    }
+    ngOnInit() {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        this._init();
+    }
+    ngOnDestroy() {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        this._removeClickOutsideListener();
+        this._removeAttachOutsideOnClickListener();
+        this._removeWindowBlurListener();
+    }
+    ngOnChanges(changes) {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        // tslint:disable-next-line:no-string-literal
+        if (changes['attachOutsideOnClick'] || changes['exclude'] || changes['emitOnBlur']) {
+            this._init();
+        }
+    }
+    _init() {
+        if (this.clickOutsideEvents !== '') {
+            this._events = this.clickOutsideEvents.split(',').map(e => e.trim());
+        }
+        this._excludeCheck();
+        if (this.attachOutsideOnClick) {
+            this._initAttachOutsideOnClickListener();
+        }
+        else {
+            this._initOnClickBody();
+        }
+        if (this.emitOnBlur) {
+            this._initWindowBlurListener();
+        }
+    }
+    _initOnClickBody() {
+        if (this.delayClickOutsideInit) {
+            setTimeout(this._initClickOutsideListener.bind(this));
+        }
+        else {
+            this._initClickOutsideListener();
+        }
+    }
+    _excludeCheck() {
+        if (this.exclude) {
+            try {
+                const nodes = Array.from(document.querySelectorAll(this.exclude));
+                if (nodes) {
+                    this._nodesExcluded = nodes;
+                }
+            }
+            catch (err) {
+                console.error('[ng-click-outside] Check your exclude selector syntax.', err);
+            }
+        }
+    }
+    _onClickBody(ev) {
+        if (!this.clickOutsideEnabled) {
+            return;
+        }
+        if (this.excludeBeforeClick) {
+            this._excludeCheck();
+        }
+        if (!this._el.nativeElement.contains(ev.target) && !this._shouldExclude(ev.target)) {
+            this._emit(ev);
+            if (this.attachOutsideOnClick) {
+                this._removeClickOutsideListener();
+            }
+        }
+    }
+    /**
+     * Resolves problem with outside click on iframe
+     * @see https://github.com/arkon/ng-click-outside/issues/32
+     */
+    _onWindowBlur(ev) {
+        setTimeout(() => {
+            if (!document.hidden) {
+                this._emit(ev);
+            }
+        });
+    }
+    _emit(ev) {
+        if (!this.clickOutsideEnabled) {
+            return;
+        }
+        this._ngZone.run(() => this.clickOutside.emit(ev));
+    }
+    _shouldExclude(target) {
+        // tslint:disable-next-line:prefer-const
+        for (let excludedNode of this._nodesExcluded) {
+            if (excludedNode.contains(target)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    _initClickOutsideListener() {
+        this._ngZone.runOutsideAngular(() => {
+            this._events.forEach(e => document.addEventListener(e, this._onClickBody));
+        });
+    }
+    _removeClickOutsideListener() {
+        this._ngZone.runOutsideAngular(() => {
+            this._events.forEach(e => document.removeEventListener(e, this._onClickBody));
+        });
+    }
+    _initAttachOutsideOnClickListener() {
+        this._ngZone.runOutsideAngular(() => {
+            this._events.forEach(e => this._el.nativeElement.addEventListener(e, this._initOnClickBody));
+        });
+    }
+    _removeAttachOutsideOnClickListener() {
+        this._ngZone.runOutsideAngular(() => {
+            this._events.forEach(e => this._el.nativeElement.removeEventListener(e, this._initOnClickBody));
+        });
+    }
+    _initWindowBlurListener() {
+        this._ngZone.runOutsideAngular(() => {
+            window.addEventListener('blur', this._onWindowBlur);
+        });
+    }
+    _removeWindowBlurListener() {
+        this._ngZone.runOutsideAngular(() => {
+            window.removeEventListener('blur', this._onWindowBlur);
+        });
+    }
+}
+ClickOutsideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", 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: "13.3.9", 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: "13.3.9", 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: [{
+                type: Input
+            }], attachOutsideOnClick: [{
+                type: Input
+            }], delayClickOutsideInit: [{
+                type: Input
+            }], emitOnBlur: [{
+                type: Input
+            }], exclude: [{
+                type: Input
+            }], excludeBeforeClick: [{
+                type: Input
+            }], clickOutsideEvents: [{
+                type: Input
+            }], clickOutside: [{
+                type: Output
+            }] } });
+
+class DropDownMenuComponent {
+    constructor() {
+        this.options = [];
+        // tslint:disable-next-line:no-input-rename
+        this.selectedValue = null;
+        this.multiple = false;
+        this.placeholder = 'Παρακαλώ επιλέξτε...';
+        this.selectedOption$ = null;
+        this.selectedChange = new EventEmitter();
+        this.selectedChanged = new EventEmitter();
+        this.expanded$ = false;
+    }
+    get selectedOption() {
+        return this.selectedOption$;
+    }
+    set selectedOption(option) {
+        this.selectedOption$ = option;
+        this.selectedValue = option ? option.value : null;
+        this.expanded = false;
+    }
+    get expanded() {
+        return this.expanded$;
+    }
+    set expanded(value) {
+        this.expanded$ = value;
+    }
+    ngOnChanges(changes) {
+        if (this.options && this.options.length > 0 && this.selectedValue !== null && this.selectedValue !== undefined) {
+            this.selectedOption$ = this.options.filter((o) => o.value === this.selectedValue)[0];
+        }
+    }
+    ngOnInit() { }
+    isSelected(option) {
+        return option != null && this.selectedValue != null && option.value === this.selectedValue;
+    }
+    onClickOutside($event) {
+        this.expanded = false;
+    }
+    selectOption(option) {
+        this.selectedOption = option;
+        this.selectedChange.emit(option.value);
+        this.selectedChanged.emit(option.value);
+    }
+}
+DropDownMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DropDownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DropDownMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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)\">\n  <button\n    type=\"button\"\n    (click)=\"expanded = !expanded\"\n    class=\"dropdown-button\"\n    aria-haspopup=\"listbox\"\n    aria-expanded=\"true\"\n    aria-labelledby=\"listbox-label\"\n  >\n    <span class=\"dropdown-selected-text\">\n      {{ selectedOption?.text || placeholder }}\n    </span>\n    <span class=\"dropdown-button-icon\">\n      <!-- Heroicon name: solid/selector -->\n      <svg class=\"dropdown-arrow\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n        <path\n          fill-rule=\"evenodd\"\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\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </span>\n  </button>\n  <ul\n    *ngIf=\"expanded && options && options.length > 0\"\n    class=\"dropdown-ul\"\n    tabindex=\"-1\"\n    role=\"listbox\"\n    aria-labelledby=\"listbox-label\"\n    aria-activedescendant=\"listbox-option-3\"\n  >\n    <ng-container *ngFor=\"let option of options\">\n      <li\n        [class]=\"isSelected(option) ? 'dropdown-li-selected' : 'dropdown-li'\"\n        (click)=\"selectOption(option)\"\n        id=\"listbox-option-0\"\n        role=\"option\"\n      >\n        <span [class]=\"isSelected(option) ? 'dropdown-li-selected-text' : 'dropdown-li-text'\">\n          {{ option.text }}\n        </span>\n        <span *ngIf=\"isSelected(option)\" class=\"dropdown-li-selected-indicator-container\">\n          <!-- Heroicon name: solid/check -->\n          <svg\n            class=\"dropdown-li-selected-indicator\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              fill-rule=\"evenodd\"\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\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </span>\n      </li>\n    </ng-container>\n  </ul>\n</div>\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: "13.3.9", ngImport: i0, type: DropDownMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-drop-down-menu', template: "<div class=\"dropdown-container\" (clickOutside)=\"onClickOutside($event)\">\n  <button\n    type=\"button\"\n    (click)=\"expanded = !expanded\"\n    class=\"dropdown-button\"\n    aria-haspopup=\"listbox\"\n    aria-expanded=\"true\"\n    aria-labelledby=\"listbox-label\"\n  >\n    <span class=\"dropdown-selected-text\">\n      {{ selectedOption?.text || placeholder }}\n    </span>\n    <span class=\"dropdown-button-icon\">\n      <!-- Heroicon name: solid/selector -->\n      <svg class=\"dropdown-arrow\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n        <path\n          fill-rule=\"evenodd\"\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\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </span>\n  </button>\n  <ul\n    *ngIf=\"expanded && options && options.length > 0\"\n    class=\"dropdown-ul\"\n    tabindex=\"-1\"\n    role=\"listbox\"\n    aria-labelledby=\"listbox-label\"\n    aria-activedescendant=\"listbox-option-3\"\n  >\n    <ng-container *ngFor=\"let option of options\">\n      <li\n        [class]=\"isSelected(option) ? 'dropdown-li-selected' : 'dropdown-li'\"\n        (click)=\"selectOption(option)\"\n        id=\"listbox-option-0\"\n        role=\"option\"\n      >\n        <span [class]=\"isSelected(option) ? 'dropdown-li-selected-text' : 'dropdown-li-text'\">\n          {{ option.text }}\n        </span>\n        <span *ngIf=\"isSelected(option)\" class=\"dropdown-li-selected-indicator-container\">\n          <!-- Heroicon name: solid/check -->\n          <svg\n            class=\"dropdown-li-selected-indicator\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              fill-rule=\"evenodd\"\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\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </span>\n      </li>\n    </ng-container>\n  </ul>\n</div>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { options: [{
+                type: Input
+            }], selectedValue: [{
+                type: Input,
+                args: ['selected']
+            }], multiple: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], selectedChange: [{
+                type: Output
+            }], selectedChanged: [{
+                type: Output
+            }] } });
+
+class Icons {
+}
+// https://uifabricicons.azurewebsites.net/
+Icons.Dashboard = `ms-Icon ms-Icon--HomeGroup `;
+Icons.Locations = `ms-Icon ms-Icon--MapPin `;
+Icons.ChargePoints = `ms-Icon ms-Icon--ChatBot `;
+Icons.Transations = `ms-Icon ms-Icon--PaymentCard `;
+Icons.Badges = `ms-Icon ms-Icon--IDBadge `;
+Icons.Information = `ms-Icon ms-Icon--Info`;
+Icons.Refresh = `ms-Icon ms-Icon--Refresh`;
+Icons.Search = `ms-Icon ms-Icon--Search`;
+Icons.Add = `ms-Icon ms-Icon--Add`;
+Icons.Delete = `ms-Icon ms-Icon--Delete`;
+Icons.SendEmail = `ms-Icon ms-Icon--NewMail`;
+Icons.Filter = `ms-Icon ms-Icon--Filter`;
+Icons.Export = `ms-Icon ms-Icon--ExcelDocument`;
+Icons.Import = `ms-Icon ms-Icon--PeopleAdd`;
+Icons.TilesView = `ms-Icon ms-Icon--AppIconDefault`;
+Icons.TableView = `ms-Icon ms-Icon--Table`;
+Icons.MapView = `ms-Icon ms-Icon--MapPin`;
+Icons.EntryView = `ms-Icon ms-Icon--EntryView`;
+Icons.Separator = `ms-Icon ms-Icon--Separator text-white`;
+Icons.ItemsCount = 'ms-Icon ms-Icon--Boards';
+Icons.Heart = 'ms-Icon ms-Icon--Heart';
+Icons.HeartBroken = 'ms-Icon ms-Icon--HeartBroken';
+Icons.DateTime = 'ms-Icon ms-Icon--ReminderTime';
+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';
+
+class NavLink {
+    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.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);
+        this.isRead = isRead;
+        this.creationDate = creationDate;
+    }
+}
+class ViewAction {
+    constructor(type, key, param, icon, tooltip) {
+        this.type = type;
+        this.key = key;
+        this.param = param;
+        this.icon = icon;
+        this.tooltip = tooltip;
+    }
+}
+class ListViewType {
+}
+ListViewType.Tiles = 'tiles';
+ListViewType.Table = 'table';
+ListViewType.Map = 'map';
+ListViewType.Gallery = 'gallery';
+class RouterViewAction extends ViewAction {
+    constructor(icon, link, outlet, tooltip) {
+        super('router-link', null, null, icon, tooltip);
+        this.outlet = null;
+        this.link = null;
+        this.outlet = outlet;
+        this.link = link;
+    }
+}
+class SwitchViewAction extends ViewAction {
+    constructor(view, icon, tooltip) {
+        super('switch-view', null, view, icon, tooltip);
+    }
+}
+class HeaderMetaItem {
+    constructor() {
+        this.key = null;
+        this.icon = null;
+        this.text = null;
+    }
+}
+class MenuOption {
+    constructor(text, value, description, data, icon) {
+        this.text = text;
+        this.value = value;
+        this.description = description;
+        this.data = data;
+        this.icon = icon;
+    }
+}
+class DefaultShellConfig {
+    constructor() {
+        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.showAlertsOnHeader = false;
+        this.showFooter = true;
+        this.fluid = false;
+    }
+}
+var SCREEN_SIZE;
+(function (SCREEN_SIZE) {
+    SCREEN_SIZE[SCREEN_SIZE["XS"] = 0] = "XS";
+    SCREEN_SIZE[SCREEN_SIZE["SM"] = 1] = "SM";
+    SCREEN_SIZE[SCREEN_SIZE["MD"] = 2] = "MD";
+    SCREEN_SIZE[SCREEN_SIZE["LG"] = 3] = "LG";
+    SCREEN_SIZE[SCREEN_SIZE["XL"] = 4] = "XL";
+})(SCREEN_SIZE || (SCREEN_SIZE = {}));
+var ToastType;
+(function (ToastType) {
+    ToastType["Info"] = "info";
+    ToastType["Success"] = "success";
+    ToastType["Error"] = "error";
+    ToastType["Warning"] = "warning";
+})(ToastType || (ToastType = {}));
+const NULL_TOAST = { title: '_____NULL_____' };
+var SidePaneSize;
+(function (SidePaneSize) {
+    SidePaneSize["Default"] = "";
+    SidePaneSize["Small25"] = "25%";
+    SidePaneSize["Medium50"] = "50%";
+    SidePaneSize["Large75"] = "75%";
+})(SidePaneSize || (SidePaneSize = {}));
+var SidePaneOverlayType;
+(function (SidePaneOverlayType) {
+    SidePaneOverlayType["Default"] = "";
+    SidePaneOverlayType["None"] = "-opacity-0";
+    SidePaneOverlayType["Light"] = "";
+    SidePaneOverlayType["Dark"] = "-opacity-50";
+})(SidePaneOverlayType || (SidePaneOverlayType = {}));
+
+class PagerComponent {
+    constructor(router) {
+        this.router = router;
+        // BUSY STATE
+        this.busy = false;
+        // PAGING
+        this.count = null;
+        this.page = 1;
+        // tslint:disable-next-line:no-input-rename
+        this.pageSize = 20;
+        // tslint:disable-next-line:no-input-rename
+        this.pageSizeOptions = [
+            new MenuOption('10', 10),
+            new MenuOption('20', 20),
+            new MenuOption('30', 30),
+            new MenuOption('50', 50),
+            new MenuOption('100', 100)
+        ];
+        this.pages = [];
+        this.pageChanged = new EventEmitter();
+        this.pageSizeChanged = new EventEmitter();
+        this.canPreviousPage = false;
+        this.canNextPage = false;
+        // SORTING
+        // tslint:disable-next-line:no-input-rename
+        this.sortOptions = [];
+        // tslint:disable-next-line:no-input-rename
+        this.sort = null;
+        // tslint:disable-next-line:no-input-rename
+        this.sortdir = 'desc';
+        this.sortChanged = new EventEmitter();
+        this.sortdirChanged = new EventEmitter();
+        this.sortdirIcon = Icons.SortDesc;
+    }
+    ngOnChanges(changes) {
+        this.calcPages();
+    }
+    ngOnInit() {
+    }
+    calcPages() {
+        this.pages = [];
+        if (this.count && this.count > 0) {
+            const pageCount = this.count / this.pageSize;
+            for (let i = 0; i < pageCount; i++) {
+                this.pages.push(new MenuOption(i + 1 + '', i + 1));
+            }
+        }
+        this.canPreviousPage = this.page > 1;
+        this.canNextPage = this.page < this.pages.length;
+    }
+    nextPage() {
+        const next = this.page + 1;
+        this.gotoPage(next);
+    }
+    previousPage() {
+        const previous = this.page - 1;
+        this.gotoPage(previous);
+    }
+    gotoPage(page) {
+        this.page = page;
+        this.pageChanged.emit(page);
+        this.calcPages();
+    }
+    pageSizeOptionChanged(pageSize) {
+        this.pageSizeChanged.emit(pageSize);
+        this.calcPages();
+    }
+    pageOptionChanged(page) {
+        this.pageChanged.emit(page);
+        this.calcPages();
+    }
+    sortOptionChanged(sort) {
+        this.sortChanged.emit(sort);
+    }
+    toggleSortdir() {
+        let sortdir = 'desc';
+        if (this.sortdir === 'desc') {
+            sortdir = 'asc';
+            this.sortdirIcon = Icons.SortAsc;
+        }
+        else {
+            sortdir = 'desc';
+            this.sortdirIcon = Icons.SortDesc;
+        }
+        this.sortdirChanged.emit(sortdir);
+    }
+}
+PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PagerComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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\">\n  <div class=\"pager-container-inner\">\n    <div class=\"inline-flex\" *ngIf=\"sortOptions && sortOptions.length > 0\">\n      <lib-drop-down-menu [options]=\"sortOptions\" [selected]=\"sort\" (selectedChanged)=\"sortOptionChanged($event)\"></lib-drop-down-menu>\n      <button (click)=\"toggleSortdir()\" [disabled]=\"!sort || busy\" class=\"pager-icon-button\">\n        <span class=\"sr-only\">sort direction</span>\n        <span class=\"inline-block relative\">\n          <i [class]=\"sortdirIcon\"></i>\n        </span>\n      </button>\n    </div>\n    <div class=\"pager-pages-container\">\n      <lib-drop-down-menu [options]=\"pageSizeOptions\" [selected]=\"pageSize\" (selectedChanged)=\"pageSizeOptionChanged($event)\"></lib-drop-down-menu>\n      <div class=\"mx-2\"  *ngIf=\"count !== null && count > pageSize\">\n        <button [disabled]=\"!canPreviousPage || busy\"  (click)=\"previousPage()\"\n                class=\"pager-arrow-button-left\">\n          <span class=\"sr-only\">Previous</span>\n          <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\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\" />\n          </svg>\n        </button>\n        <button [disabled]=\"!canNextPage || busy\"  (click)=\"nextPage()\"\n                class=\"pager-arrow-button-right\">\n          <span class=\"sr-only\">Next</span>\n          <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\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\" />\n          </svg>\n        </button>\n      </div>\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>\n    </div>\n  </div>\n</div>\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: "13.3.9", ngImport: i0, type: PagerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-pager', template: "<div class=\"pager-container\">\n  <div class=\"pager-container-inner\">\n    <div class=\"inline-flex\" *ngIf=\"sortOptions && sortOptions.length > 0\">\n      <lib-drop-down-menu [options]=\"sortOptions\" [selected]=\"sort\" (selectedChanged)=\"sortOptionChanged($event)\"></lib-drop-down-menu>\n      <button (click)=\"toggleSortdir()\" [disabled]=\"!sort || busy\" class=\"pager-icon-button\">\n        <span class=\"sr-only\">sort direction</span>\n        <span class=\"inline-block relative\">\n          <i [class]=\"sortdirIcon\"></i>\n        </span>\n      </button>\n    </div>\n    <div class=\"pager-pages-container\">\n      <lib-drop-down-menu [options]=\"pageSizeOptions\" [selected]=\"pageSize\" (selectedChanged)=\"pageSizeOptionChanged($event)\"></lib-drop-down-menu>\n      <div class=\"mx-2\"  *ngIf=\"count !== null && count > pageSize\">\n        <button [disabled]=\"!canPreviousPage || busy\"  (click)=\"previousPage()\"\n                class=\"pager-arrow-button-left\">\n          <span class=\"sr-only\">Previous</span>\n          <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\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\" />\n          </svg>\n        </button>\n        <button [disabled]=\"!canNextPage || busy\"  (click)=\"nextPage()\"\n                class=\"pager-arrow-button-right\">\n          <span class=\"sr-only\">Next</span>\n          <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\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\" />\n          </svg>\n        </button>\n      </div>\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>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$1.Router }]; }, propDecorators: { busy: [{
+                type: Input
+            }], count: [{
+                type: Input
+            }], page: [{
+                type: Input
+            }], pageSize: [{
+                type: Input,
+                args: ['page-size']
+            }], pageSizeOptions: [{
+                type: Input,
+                args: ['page-size-options']
+            }], pageChanged: [{
+                type: Output
+            }], pageSizeChanged: [{
+                type: Output
+            }], sortOptions: [{
+                type: Input,
+                args: ['sort-options']
+            }], sort: [{
+                type: Input,
+                args: ['sort']
+            }], sortdir: [{
+                type: Input,
+                args: ['sort-dir']
+            }], sortChanged: [{
+                type: Output
+            }], sortdirChanged: [{
+                type: Output
+            }] } });
+
+class ListTileComponent {
+    constructor() {
+        this.template = null;
+    }
+}
+ListTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ListTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ListTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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: "13.3.9", ngImport: i0, type: ListTileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-list-tile', template: '<ng-content></ng-content>' }]
+        }], ctorParameters: function () { return []; }, propDecorators: { template: [{
+                type: ContentChild,
+                args: [TemplateRef]
+            }] } });
+
+class ListColumnComponent {
+    constructor() {
+        this.title = null;
+        // tslint:disable-next-line:no-input-rename
+        this.fullWidth = false;
+        this.template = null;
+    }
+}
+ListColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ListColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ListColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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: "13.3.9", ngImport: i0, type: ListColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-list-column', template: '<ng-content></ng-content>' }]
+        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input,
+                args: ['full-width']
+            }], template: [{
+                type: ContentChild,
+                args: [TemplateRef]
+            }] } });
+
+class ListDetailsSectionComponent {
+    constructor() {
+        this.template = null;
+    }
+}
+ListDetailsSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ListDetailsSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ListDetailsSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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: "13.3.9", ngImport: i0, type: ListDetailsSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-list-details-section', template: '<ng-content></ng-content>' }]
+        }], ctorParameters: function () { return []; }, propDecorators: { template: [{
+                type: ContentChild,
+                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: "13.3.9", ngImport: i0, type: SkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkeletonLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: SkeletonLoaderComponent, selector: "lib-skeleton-loader", inputs: { count: "count", type: "type" }, ngImport: i0, template: "<!-- <h1>SKELETON LOADER!</h1> -->\n<ng-container *ngSwitch=\"type\">\n  <div class=\"cards-deck-4\" *ngSwitchCase=\"'tiles'\">\n    <ng-container *ngFor=\"let i of counter(count)\">\n      <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\n        <div class=\"animate-pulse flex flex-col\">\n          <div class=\"rounded w-full h-32 bg-gray-200\"></div>\n          <div class=\"flex flex-col mt-5\">\n            <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\n            <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\n            <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\n          </div>\n\n          <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1\">\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\n          </div>\n\n          <div class=\"flex items-center mt-5\">\n            <div>\n              <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\n            </div>\n            <div class=\"flex justify-between w-full ml-3\">\n              <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\n              <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"cards-deck-3\" *ngSwitchCase=\"'large-tiles'\">\n    <ng-container *ngFor=\"let i of counter(count)\">\n      <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\n        <div class=\"animate-pulse flex flex-col\">\n          <div class=\"rounded w-full h-52 bg-gray-200\"></div>\n          <div class=\"flex flex-col mt-5\">\n            <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\n            <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\n            <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\n          </div>\n\n          <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1\">\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\n          </div>\n\n          <div class=\"flex items-center mt-5\">\n            <div>\n              <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\n            </div>\n            <div class=\"flex justify-between w-full ml-3\">\n              <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\n              <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"cards-deck-1\" *ngSwitchCase=\"'table'\">\n    <ng-container *ngFor=\"let i of counter(count)\">\n      <div class=\"border border-light-blue-300 shadow rounded-sm p-4 max-w-sm w-full mx-auto mb-4\">\n        <div class=\"animate-pulse flex space-x-4\">\n          <div class=\"rounded-full bg-light-blue-400 h-12 w-12\">&nbsp;</div>\n          <div class=\"flex-1 space-y-4 py-1\">\n            <div class=\"h-4 bg-light-blue-400 rounded w-3/4\">&nbsp;</div>\n            <div class=\"space-y-2\">\n              <div class=\"h-4 bg-light-blue-400 rounded\">&nbsp;</div>\n              <div class=\"h-4 bg-light-blue-400 rounded w-5/6\">&nbsp;</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"cards-deck-3\" *ngSwitchDefault>\n    <ng-container *ngFor=\"let i of counter(count)\">\n      <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\n        <div class=\"animate-pulse flex flex-col\">\n          <div class=\"rounded w-full h-52 bg-gray-200\"></div>\n          <div class=\"flex flex-col mt-5\">\n            <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\n            <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\n            <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\n          </div>\n\n          <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1\">\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\n          </div>\n\n          <div class=\"flex items-center mt-5\">\n            <div>\n              <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\n            </div>\n            <div class=\"flex justify-between w-full ml-3\">\n              <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\n              <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-container>\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: "13.3.9", ngImport: i0, type: SkeletonLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-skeleton-loader', template: "<!-- <h1>SKELETON LOADER!</h1> -->\n<ng-container *ngSwitch=\"type\">\n  <div class=\"cards-deck-4\" *ngSwitchCase=\"'tiles'\">\n    <ng-container *ngFor=\"let i of counter(count)\">\n      <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\n        <div class=\"animate-pulse flex flex-col\">\n          <div class=\"rounded w-full h-32 bg-gray-200\"></div>\n          <div class=\"flex flex-col mt-5\">\n            <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\n            <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\n            <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\n          </div>\n\n          <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1\">\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\n          </div>\n\n          <div class=\"flex items-center mt-5\">\n            <div>\n              <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\n            </div>\n            <div class=\"flex justify-between w-full ml-3\">\n              <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\n              <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"cards-deck-3\" *ngSwitchCase=\"'large-tiles'\">\n    <ng-container *ngFor=\"let i of counter(count)\">\n      <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\n        <div class=\"animate-pulse flex flex-col\">\n          <div class=\"rounded w-full h-52 bg-gray-200\"></div>\n          <div class=\"flex flex-col mt-5\">\n            <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\n            <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\n            <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\n          </div>\n\n          <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1\">\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\n          </div>\n\n          <div class=\"flex items-center mt-5\">\n            <div>\n              <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\n            </div>\n            <div class=\"flex justify-between w-full ml-3\">\n              <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\n              <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"cards-deck-1\" *ngSwitchCase=\"'table'\">\n    <ng-container *ngFor=\"let i of counter(count)\">\n      <div class=\"border border-light-blue-300 shadow rounded-sm p-4 max-w-sm w-full mx-auto mb-4\">\n        <div class=\"animate-pulse flex space-x-4\">\n          <div class=\"rounded-full bg-light-blue-400 h-12 w-12\">&nbsp;</div>\n          <div class=\"flex-1 space-y-4 py-1\">\n            <div class=\"h-4 bg-light-blue-400 rounded w-3/4\">&nbsp;</div>\n            <div class=\"space-y-2\">\n              <div class=\"h-4 bg-light-blue-400 rounded\">&nbsp;</div>\n              <div class=\"h-4 bg-light-blue-400 rounded w-5/6\">&nbsp;</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"cards-deck-3\" *ngSwitchDefault>\n    <ng-container *ngFor=\"let i of counter(count)\">\n      <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\n        <div class=\"animate-pulse flex flex-col\">\n          <div class=\"rounded w-full h-52 bg-gray-200\"></div>\n          <div class=\"flex flex-col mt-5\">\n            <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\n            <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\n            <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\n          </div>\n\n          <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1\">\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\n            <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\n          </div>\n\n          <div class=\"flex items-center mt-5\">\n            <div>\n              <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\n            </div>\n            <div class=\"flex justify-between w-full ml-3\">\n              <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\n              <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-container>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { count: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }] } });
+
+class ListViewEmptyStateComponent {
+    constructor() {
+        this.title = 'Δεν βρέθηκαν εγγραφές.';
+        // tslint:disable-next-line:no-input-rename
+        this.subTitle = 'Παρακαλώ αλλάξτε τα κριτήρια αναζήτησης σας ή ξεκινήστε προσθέτοντας μια νέα εγγραφή';
+        // tslint:disable-next-line:no-input-rename
+        this.newItemLabel = 'Νέα εγγραφή';
+    }
+    ngOnInit() {
+    }
+}
+ListViewEmptyStateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ListViewEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ListViewEmptyStateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ListViewEmptyStateComponent, decorators: [{
+            type: Component,
+            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: [{
+                type: Input,
+                args: ['sub-title']
+            }], newItemLabel: [{
+                type: Input,
+                args: ['new-item-label']
+            }] } });
+
+class ListViewComponent {
+    constructor() {
+        // BUSY STATE
+        this.busy = false;
+        this.expandIcon = Icons.Expand;
+        this.collapseIcon = Icons.Collapse;
+        // tslint:disable-next-line:no-input-rename
+        this.showPager = true;
+        // PAGING - pass through for pager component
+        this.count = null;
+        this.page = 1;
+        // tslint:disable-next-line:no-input-rename
+        this.pageSize = 20;
+        // tslint:disable-next-line:no-input-rename
+        this.pageSizeOptions = [];
+        this.pageChanged = new EventEmitter();
+        this.pageSizeChanged = new EventEmitter();
+        this.detailsOpened = new EventEmitter();
+        this.tableViewSupported = false;
+        this.multipleFullWidth = false;
+        this.fullWidthTHClass = 'list-view-th-full';
+        this.fullWidthTDClass = 'list-view-td-full';
+        this.tilesViewSupported = false;
+        this.detailsSectionSupported = false;
+        this.loaderItems = [];
+        // DETAILS SECTION
+        // Check if details section and button should be displayed according to the count of the value given
+        // tslint:disable-next-line:no-input-rename
+        this.detailsSectionPropertyCount = null;
+        // SORTING - pass through for pager component
+        // tslint:disable-next-line:no-input-rename
+        this.sortOptions = [];
+        this.sort = null;
+        // tslint:disable-next-line:no-input-rename
+        this.sortdir = '-';
+        this.sortChanged = new EventEmitter();
+        this.sortdirChanged = new EventEmitter();
+        this.view = ListViewType.Table;
+        // COLUMNS
+        this.columns = [];
+        this.tilesDeckClass = 'cards-deck-4';
+        // tslint:disable-next-line:no-input-rename
+        this.tilesCount = 4;
+        this.tileTemplate = null;
+        this.detailsTemplate = null;
+        for (let i = 0; i < 5; i++) {
+            this.loaderItems.push({});
+        }
+    }
+    set cols(refs) {
+        this.columns = refs?.toArray();
+        if (this.columns && this.columns.length > 0) {
+            this.tableViewSupported = true;
+        }
+        this.multipleFullWidth = this.columns.filter(c => c.fullWidth).length > 1;
+        this.fullWidthTHClass = this.multipleFullWidth ? 'list-view-th-half' : 'list-view-th-full';
+        this.fullWidthTDClass = this.multipleFullWidth ? 'list-view-td-half' : 'list-view-td-full';
+    }
+    set tiles(ref) {
+        this.tileTemplate = ref;
+        if (this.tileTemplate) {
+            this.tilesViewSupported = true;
+        }
+    }
+    set details(ref) {
+        this.detailsTemplate = ref;
+        if (this.detailsTemplate) {
+            this.detailsSectionSupported = true;
+        }
+    }
+    ngOnChanges(changes) {
+        const tilesCountChange = changes['tiles-count'] || changes.tilesCount;
+        if (tilesCountChange) {
+            this.setTilesDeckClass(tilesCountChange.currentValue);
+        }
+    }
+    // events
+    emitPageChanged($event) {
+        this.pageChanged.emit($event);
+    }
+    emitPageSizeChanged($event) {
+        this.pageSizeChanged.emit($event);
+    }
+    emitSortChanged($event) {
+        this.sortChanged.emit($event);
+    }
+    emitSortdirChanged($event) {
+        this.sortdirChanged.emit($event);
+    }
+    toggleDetails(item) {
+        item.detailsExpanded = !item.detailsExpanded;
+        this.detailsOpened.emit({ item, open: item.detailsExpanded });
+    }
+    // helpers
+    setTilesDeckClass(tiles) {
+        if (tiles >= 1 && tiles <= 4) {
+            this.tilesDeckClass =
+                this.view !== ListViewType.Gallery
+                    ? `cards-deck-${tiles}`
+                    : this.items && this.items.length > 0
+                        ? `gallery-deck-${tiles}`
+                        : 'gallery-deck';
+        }
+        else {
+            this.tilesDeckClass =
+                this.view !== ListViewType.Gallery
+                    ? 'cards-deck-3'
+                    : this.items && this.items.length > 0
+                        ? 'gallery-deck-3'
+                        : 'gallery-deck';
+        }
+    }
+}
+ListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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\">\n\n  <lib-pager *ngIf=\"showPager\"\n             [page]=\"page\"\n             [page-size]=\"pageSize\"\n             [count]=\"count\"\n             [sort-options]=\"sortOptions\"\n             [sort]=\"sort\"\n             [sort-dir]=\"sortdir\"\n             [busy]=\"busy\"\n             (pageChanged)=\"emitPageChanged($event)\"\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\n             (sortChanged)=\"emitSortChanged($event)\"\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\n  </lib-pager>\n</div>\n\n<ng-container [ngSwitch]=\"view\">\n\n  <ng-container *ngSwitchCase=\"'tiles'\">\n    <div [class]=\"tilesDeckClass\">\n\n      <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\n\n      <ng-container *ngIf=\"items && items.length > 0\">\n        <ng-container *ngFor=\"let item of items\">\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n        </ng-container>\n      </ng-container>\n\n    </div>\n  </ng-container>\n\n\n  <!-- *ngSwitchCase=\"'gallery'\" -->\n  <ng-container *ngSwitchCase=\"'gallery'\">\n    <ul role=\"list\" [class]=\"tilesDeckClass\">\n\n      <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\n\n      <ng-container *ngIf=\"!busy && items && items.length > 0\">\n        <ng-container *ngFor=\"let item of items\">\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n        </ng-container>\n      </ng-container>\n    </ul>\n  </ng-container>\n\n  <!-- *ngSwitchCase=\"'table'\" -->\n  <ng-container *ngSwitchDefault>\n\n    <div class=\"list-view-container\">\n      <div class=\"list-view-container-inner\">\n        <table class=\"list-view-table\">\n          <thead class=\"list-view-thead\">\n            <tr>\n              <ng-container *ngIf=\"detailsSectionSupported\">\n                <th class=\"list-view-th-details\"></th>\n              </ng-container>\n              <ng-container *ngFor=\"let col of columns\">\n                <th scope=\"col\"\n                    [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\n                  {{col.title}}\n                </th>\n              </ng-container>\n            </tr>\n          </thead>\n          <tbody class=\"list-view-tbody\" *ngIf=\"busy\">\n            <ng-container *ngFor=\"let item of loaderItems;let i=index\">\n              <tr class=\"list-view-tr\">\n                <ng-container *ngIf=\"detailsSectionSupported\">\n                  <td class=\"list-view-td-details\"\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\n                    <button disabled\n                            type=\"button\"\n                            class=\"expand-collapse-button\">\n                      <!-- Heroicon name: solid/plus -->\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\n                    </button>\n                  </td>\n                  <ng-template #hiddenDetailsButton>\n                    <td class=\"list-view-td-details\"></td>\n                  </ng-template>\n                </ng-container>\n                <td *ngFor=\"let col of columns\"\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\n                    <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\n                </td>\n              </tr>\n              <ng-container *ngIf=\"detailsSectionSupported\">\n                <tr *ngIf=\"item.detailsExpanded\">\n                  <td [colSpan]=\"columns.length + 1\"\n                      class=\"list-view-td bg-gray-100\">\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n                  </td>\n                </tr>\n              </ng-container>\n            </ng-container>\n          </tbody>\n          <tbody class=\"list-view-tbody\" *ngIf=\"!busy\">\n            <ng-container *ngFor=\"let item of items;let i=index\">\n              <tr class=\"list-view-tr\">\n                <ng-container *ngIf=\"detailsSectionSupported\">\n                  <td class=\"list-view-td-details\"\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\n                    <button (click)=\"toggleDetails(item)\"\n                            type=\"button\"\n                            class=\"expand-collapse-button\">\n                      <!-- Heroicon name: solid/plus -->\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\n                    </button>\n                  </td>\n                  <ng-template #hiddenDetailsButton>\n                    <td class=\"list-view-td-details\"></td>\n                  </ng-template>\n                </ng-container>\n                <td *ngFor=\"let col of columns\"\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\n                  <ng-template [ngTemplateOutlet]=\"col.template\"\n                               [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n                </td>\n              </tr>\n              <ng-container *ngIf=\"detailsSectionSupported\">\n                <tr *ngIf=\"item.detailsExpanded\">\n                  <td [colSpan]=\"columns.length + 1\"\n                      class=\"list-view-td bg-gray-100\">\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n                  </td>\n                </tr>\n              </ng-container>\n            </ng-container>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!busy && items && items.length === 0\">\n    <div class=\"cards-deck-1\">\n      <lib-list-view-empty-state></lib-list-view-empty-state>\n    </div>\n  </ng-container>\n</ng-container>\n\n<ng-content></ng-content>\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: "13.3.9", ngImport: i0, type: ListViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-list-view', template: "<div class=\"px-2\">\n\n  <lib-pager *ngIf=\"showPager\"\n             [page]=\"page\"\n             [page-size]=\"pageSize\"\n             [count]=\"count\"\n             [sort-options]=\"sortOptions\"\n             [sort]=\"sort\"\n             [sort-dir]=\"sortdir\"\n             [busy]=\"busy\"\n             (pageChanged)=\"emitPageChanged($event)\"\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\n             (sortChanged)=\"emitSortChanged($event)\"\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\n  </lib-pager>\n</div>\n\n<ng-container [ngSwitch]=\"view\">\n\n  <ng-container *ngSwitchCase=\"'tiles'\">\n    <div [class]=\"tilesDeckClass\">\n\n      <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\n\n      <ng-container *ngIf=\"items && items.length > 0\">\n        <ng-container *ngFor=\"let item of items\">\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n        </ng-container>\n      </ng-container>\n\n    </div>\n  </ng-container>\n\n\n  <!-- *ngSwitchCase=\"'gallery'\" -->\n  <ng-container *ngSwitchCase=\"'gallery'\">\n    <ul role=\"list\" [class]=\"tilesDeckClass\">\n\n      <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\n\n      <ng-container *ngIf=\"!busy && items && items.length > 0\">\n        <ng-container *ngFor=\"let item of items\">\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n        </ng-container>\n      </ng-container>\n    </ul>\n  </ng-container>\n\n  <!-- *ngSwitchCase=\"'table'\" -->\n  <ng-container *ngSwitchDefault>\n\n    <div class=\"list-view-container\">\n      <div class=\"list-view-container-inner\">\n        <table class=\"list-view-table\">\n          <thead class=\"list-view-thead\">\n            <tr>\n              <ng-container *ngIf=\"detailsSectionSupported\">\n                <th class=\"list-view-th-details\"></th>\n              </ng-container>\n              <ng-container *ngFor=\"let col of columns\">\n                <th scope=\"col\"\n                    [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\n                  {{col.title}}\n                </th>\n              </ng-container>\n            </tr>\n          </thead>\n          <tbody class=\"list-view-tbody\" *ngIf=\"busy\">\n            <ng-container *ngFor=\"let item of loaderItems;let i=index\">\n              <tr class=\"list-view-tr\">\n                <ng-container *ngIf=\"detailsSectionSupported\">\n                  <td class=\"list-view-td-details\"\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\n                    <button disabled\n                            type=\"button\"\n                            class=\"expand-collapse-button\">\n                      <!-- Heroicon name: solid/plus -->\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\n                    </button>\n                  </td>\n                  <ng-template #hiddenDetailsButton>\n                    <td class=\"list-view-td-details\"></td>\n                  </ng-template>\n                </ng-container>\n                <td *ngFor=\"let col of columns\"\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\n                    <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\n                </td>\n              </tr>\n              <ng-container *ngIf=\"detailsSectionSupported\">\n                <tr *ngIf=\"item.detailsExpanded\">\n                  <td [colSpan]=\"columns.length + 1\"\n                      class=\"list-view-td bg-gray-100\">\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n                  </td>\n                </tr>\n              </ng-container>\n            </ng-container>\n          </tbody>\n          <tbody class=\"list-view-tbody\" *ngIf=\"!busy\">\n            <ng-container *ngFor=\"let item of items;let i=index\">\n              <tr class=\"list-view-tr\">\n                <ng-container *ngIf=\"detailsSectionSupported\">\n                  <td class=\"list-view-td-details\"\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\n                    <button (click)=\"toggleDetails(item)\"\n                            type=\"button\"\n                            class=\"expand-collapse-button\">\n                      <!-- Heroicon name: solid/plus -->\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\n                    </button>\n                  </td>\n                  <ng-template #hiddenDetailsButton>\n                    <td class=\"list-view-td-details\"></td>\n                  </ng-template>\n                </ng-container>\n                <td *ngFor=\"let col of columns\"\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\n                  <ng-template [ngTemplateOutlet]=\"col.template\"\n                               [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n                </td>\n              </tr>\n              <ng-container *ngIf=\"detailsSectionSupported\">\n                <tr *ngIf=\"item.detailsExpanded\">\n                  <td [colSpan]=\"columns.length + 1\"\n                      class=\"list-view-td bg-gray-100\">\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n                  </td>\n                </tr>\n              </ng-container>\n            </ng-container>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!busy && items && items.length === 0\">\n    <div class=\"cards-deck-1\">\n      <lib-list-view-empty-state></lib-list-view-empty-state>\n    </div>\n  </ng-container>\n</ng-container>\n\n<ng-content></ng-content>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { busy: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], showPager: [{
+                type: Input,
+                args: ['show-pager']
+            }], count: [{
+                type: Input
+            }], page: [{
+                type: Input
+            }], pageSize: [{
+                type: Input,
+                args: ['page-size']
+            }], pageSizeOptions: [{
+                type: Input,
+                args: ['page-size-options']
+            }], pageChanged: [{
+                type: Output
+            }], pageSizeChanged: [{
+                type: Output
+            }], detailsOpened: [{
+                type: Output
+            }], detailsSectionPropertyCount: [{
+                type: Input,
+                args: ['details-section-property-count']
+            }], sortOptions: [{
+                type: Input,
+                args: ['sort-options']
+            }], sort: [{
+                type: Input
+            }], sortdir: [{
+                type: Input,
+                args: ['sort-dir']
+            }], sortChanged: [{
+                type: Output
+            }], sortdirChanged: [{
+                type: Output
+            }], view: [{
+                type: Input
+            }], cols: [{
+                type: ContentChildren,
+                args: [ListColumnComponent, { read: ListColumnComponent }]
+            }], tilesCount: [{
+                type: Input,
+                args: ['tiles-count']
+            }], tiles: [{
+                type: ContentChild,
+                args: [ListTileComponent, { read: ListTileComponent }]
+            }], details: [{
+                type: ContentChild,
+                args: [ListDetailsSectionComponent, { read: ListDetailsSectionComponent }]
+            }] } });
+
+class CollapsiblePanelComponent {
+    constructor() {
+        this.title = null;
+        this.visible = false;
+    }
+    ngOnInit() {
+    }
+}
+CollapsiblePanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CollapsiblePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CollapsiblePanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: CollapsiblePanelComponent, selector: "lib-collapsible-panel", inputs: { title: "title" }, ngImport: i0, template: "<div class=\"collapsible-panel-container\">\n  <div class=\"collapsible-panel-container-shadow\">\n    <div class=\"collapsible-panel-container-inner\">\n      <button type=\"button\" class=\"collapsible-panel-button\" (click)=\"visible = !visible\">\n        <div class=\"collapsible-panel-button-content-container\">\n          <span>{{ title }} </span>\n          <span class=\"ico-plus\"></span>\n        </div>\n      </button>\n      <div class=\"collapsible-panel-content-container\" *ngIf=\"visible\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CollapsiblePanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-collapsible-panel', template: "<div class=\"collapsible-panel-container\">\n  <div class=\"collapsible-panel-container-shadow\">\n    <div class=\"collapsible-panel-container-inner\">\n      <button type=\"button\" class=\"collapsible-panel-button\" (click)=\"visible = !visible\">\n        <div class=\"collapsible-panel-button-content-container\">\n          <span>{{ title }} </span>\n          <span class=\"ico-plus\"></span>\n        </div>\n      </button>\n      <div class=\"collapsible-panel-content-container\" *ngIf=\"visible\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
+                type: Input
+            }] } });
+
+class KpiTileComponent {
+    constructor() {
+        this.title = undefined;
+        this.busy = false;
+        this.kpi = undefined;
+        // tslint:disable-next-line:no-output-rename
+        this.tileAction = new EventEmitter();
+    }
+    ngOnInit() {
+    }
+    emitTileAction($event) {
+        $event.preventDefault();
+        $event.stopPropagation();
+        this.tileAction.emit($event);
+        return false;
+    }
+}
+KpiTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: KpiTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+KpiTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: KpiTileComponent, selector: "lib-kpi-tile", inputs: { title: "title", busy: "busy", kpi: "kpi" }, outputs: { tileAction: "tile-action" }, ngImport: i0, template: "<div class=\"card\"\n     [ngClass]=\"{'card-deck-busy' : busy }\">\n  <div class=\"card-body\">\n    <div class=\"kpi-tile-title-container\">\n      <a href=\"#\"\n         class=\"kpi-tile-action\"\n         (click)=\"emitTileAction($event)\">{{title || '-'}}</a>\n    </div>\n    <p class=\"kpi-tile-value\">{{kpi || '-'}}</p>\n    <div class=\"card-footer\">\n      <div class=\"text-xs\">\n        <a href=\"#\"\n           class=\"kpi-tile-action\"\n           (click)=\"emitTileAction($event)\">\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1</a>\n      </div>\n    </div>\n  </div>\n</div>", directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: KpiTileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-kpi-tile', template: "<div class=\"card\"\n     [ngClass]=\"{'card-deck-busy' : busy }\">\n  <div class=\"card-body\">\n    <div class=\"kpi-tile-title-container\">\n      <a href=\"#\"\n         class=\"kpi-tile-action\"\n         (click)=\"emitTileAction($event)\">{{title || '-'}}</a>\n    </div>\n    <p class=\"kpi-tile-value\">{{kpi || '-'}}</p>\n    <div class=\"card-footer\">\n      <div class=\"text-xs\">\n        <a href=\"#\"\n           class=\"kpi-tile-action\"\n           (click)=\"emitTileAction($event)\">\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1</a>\n      </div>\n    </div>\n  </div>\n</div>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
+                type: Input
+            }], busy: [{
+                type: Input
+            }], kpi: [{
+                type: Input
+            }], tileAction: [{
+                type: Output,
+                args: ['tile-action']
+            }] } });
+
+// freaksly simple date picker : https://tailwind-elements.com/docs/standard/forms/datepicker/
+class DatepickerComponent {
+    constructor() {
+        this.readonly = false;
+        this.disabled = false;
+        this.displayFormat = 'dd/MM/yyyy';
+        this.placeholder = '';
+        this.value = null;
+        this.valueChange = new EventEmitter();
+        this.showCalendar = false;
+        this.showYears = false;
+        this.monthNames = [
+            'Ιανουάριος',
+            'Φεβρουάριος',
+            'Μάρτιος',
+            'Απρίλιος',
+            'Μάϊος',
+            'Ιούνιος',
+            'Ιούλιος',
+            'Αύγουστος',
+            'Σεπτέμβριος',
+            'Οκτώβριος',
+            'Νοεμβριος',
+            'Δεκέμβριος',
+        ];
+        this.dayNames = ['Κυρ', 'Δευ', 'Τρι', 'Τετ', 'Πεμ', 'Παρ', 'Σαβ'];
+        this.month = -1;
+        this.year = -1;
+        this.calendarDates = [];
+        this.calendarYears = [];
+        this.showCalendarYears = [];
+        this.blankDays = [];
+        this.calendarYearPage = 1;
+        this.yearsPerPage = 30;
+        this.onChange$ = undefined;
+        this.onTouched$ = undefined;
+    }
+    ngOnInit() {
+        let today = new Date();
+        this.month = today.getMonth();
+        this.year = today.getFullYear();
+        this.calendarDates = [{ day: this.value, today: this.value, selected: this.value }];
+        this.calendarYears = [{ year: this.value?.getFullYear(), today: this.value, selected: this.value }];
+        const yearsArray = [];
+        for (let i = 1950; i <= today.getFullYear() + 2; i++) {
+            yearsArray.push({ year: i, today: this.compareDates(today, null, i), selected: i == this.value?.getFullYear() });
+        }
+        this.calendarYears = yearsArray;
+        this.showCalendarYears = this.paginate(this.calendarYears, 1);
+        this.calcDays();
+    }
+    writeValue(obj) {
+        if (obj) {
+            this.value = new Date(obj);
+            this.month = this.value.getMonth();
+            this.year = this.value.getFullYear();
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange$ = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched$ = fn;
+    }
+    onBlur(event) {
+        if (this.onTouched$) {
+            this.onTouched$();
+        }
+        this.getDateFromInput();
+    }
+    selectDateValue(date) {
+        // This should be in UTC
+        let selectedDate = new Date(this.year, this.month, date.day, 3, 0, 0, 0);
+        this.value = selectedDate;
+        this.valueChange.emit(this.value);
+        if (this.onChange$) {
+            this.onChange$(this.value);
+        }
+        this.updateDays();
+        if (this.onTouched$) {
+            this.onTouched$();
+        }
+        this.showCalendar = false;
+    }
+    selectYearValue(year) {
+        // This should be in UTC
+        let selectedDate = new Date(year.year, this.month ?? 1, this.calendarDates?.find(x => x.selected == true).day ?? 1, 3, 0, 0, 0);
+        this.year = year.year;
+        this.value = selectedDate;
+        this.valueChange.emit(this.value);
+        if (this.onChange$) {
+            this.onChange$(this.value);
+        }
+        this.updateDays();
+        if (this.onTouched$) {
+            this.onTouched$();
+        }
+        this.showYears = false;
+        this.showCalendar = true;
+        this.calcDays();
+    }
+    previousMonth() {
+        if (this.month !== 0) {
+            this.month = this.month - 1;
+            this.calcDays();
+        }
+        else {
+            this.month = 11;
+            this.year = this.year - 1;
+            this.calcDays();
+        }
+        if (this.onTouched$) {
+            this.onTouched$();
+        }
+    }
+    nextMonth() {
+        if (this.month !== 11) {
+            this.month = this.month + 1;
+            this.calcDays();
+        }
+        else {
+            this.month = 0;
+            this.year = this.year + 1;
+            this.calcDays();
+        }
+        if (this.onTouched$) {
+            this.onTouched$();
+        }
+    }
+    previousYear() {
+        this.showCalendarYears = this.paginate(this.calendarYears, this.calendarYearPage > 1 ? --this.calendarYearPage : 1);
+        this.calcDays();
+        if (this.onTouched$) {
+            this.onTouched$();
+        }
+    }
+    nextYear() {
+        this.showCalendarYears = this.paginate(this.calendarYears, this.calendarYearPage <= this.calendarYears.length / this.yearsPerPage
+            ? ++this.calendarYearPage
+            : this.calendarYearPage);
+        this.calcDays();
+        if (this.onTouched$) {
+            this.onTouched$();
+        }
+    }
+    compareDates(date1, day, year) {
+        if (!date1) {
+            return false;
+        }
+        const d = new Date(year ?? this.year, this.month, day ?? this.value?.getDay());
+        return date1.toDateString() === d.toDateString();
+    }
+    ;
+    calcDays() {
+        const daysInMonth = new Date(this.year, this.month + 1, 0).getDate();
+        // find where to start calendar day of week
+        const dayOfWeek = new Date(this.year, this.month).getDay();
+        const blankdaysArray = new Array();
+        for (var i = 1; i <= dayOfWeek; i++) {
+            // check if month is February
+            blankdaysArray.push(this.month != 2 ? (32 - i) : (29 - i));
+            blankdaysArray.reverse().sort();
+        }
+        const daysArray = [];
+        const today = new Date();
+        for (var i = 1; i <= daysInMonth; i++) {
+            daysArray.push({ day: i, today: this.compareDates(today, i, null), selected: this.compareDates(this.value ?? today, i, null) });
+        }
+        const yearsArray = [];
+        for (let i = 1950; i <= today.getFullYear() + 2; i++) {
+            yearsArray.push({ year: i, today: this.compareDates(today, null, i), selected: i == this.year });
+        }
+        this.calendarYears = yearsArray;
+        this.blankDays = blankdaysArray;
+        this.calendarDates = daysArray;
+    }
+    updateDays() {
+        const today = new Date();
+        this.calendarDates.forEach(d => {
+            d.today = this.compareDates(today, d, this.year);
+            d.selected = this.compareDates(this.value, d, this.year);
+        });
+    }
+    paginate(array, page_number) {
+        return array.slice((page_number - 1) * this.yearsPerPage, page_number * this.yearsPerPage);
+    }
+    getDateFromInput() {
+        if (this.dateInput?.nativeElement.value !== '') {
+            var dateParts = this.dateInput?.nativeElement.value.split("/");
+            let dateInGrFormat = new Date(+dateParts[2], dateParts[1] - 1, +dateParts[0], 3, 0, 0);
+            if (dateInGrFormat.toString() !== 'Invalid Date') {
+                this.writeValue(dateInGrFormat);
+                this.calcDays();
+                this.valueChange.emit(dateInGrFormat);
+            }
+            if (this.onChange$) {
+                this.onChange$(this.value);
+            }
+            this.updateDays();
+            if (this.onTouched$) {
+                this.onTouched$();
+            }
+        }
+        this.showCalendar = false;
+    }
+    openYears() {
+        this.showYears = !this.showYears;
+        this.calendarYearPage = Math.ceil(this.calendarYears.map(x => x.year).indexOf(this.year) / this.yearsPerPage);
+        this.showCalendarYears = this.paginate(this.calendarYears, this.calendarYearPage !== 0 ? this.calendarYearPage : 1);
+        this.calcDays();
+    }
+    openCalendar() {
+        this.showCalendar = !this.showCalendar;
+        this.calcDays();
+    }
+    closeCalendar() {
+        this.showCalendar = false;
+        this.getDateFromInput();
+    }
+}
+DatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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\"\n     (clickOutside)=\"closeCalendar()\">\n\n  <input type=\"text\"\n         #dateInput\n         [readonly]=\"readonly\"\n         name=\"dateInput\"\n         (blur)=\"onBlur($event)\"\n         id=\"dateInput\"\n         (focus)=\"showCalendar = false\"\n         [value]=\"value | date: displayFormat\"\n         class=\"w-full focus:ring-0 focus:outline-none rounded-none sm:text-sm border-gray-300  focus:border-0\"\n         [ngClass]=\"{'cursor-not-allowed': disabled}\"\n         [placeholder]=\"disabled ? '' : placeholder\">\n\n  <button type=\"button\"\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\"\n          [disabled]=\"disabled\"\n          (click)=\"openCalendar()\"\n          [ngClass]=\"{'cursor-not-allowed': disabled}\">\n    <i class=\"ms-Icon ms-Icon--DateTime2\"></i>\n  </button>\n\n  <div *ngIf=\"showCalendar\"\n       class=\"bg-gray-100 mt-10 rounded-sm shadow-md p-4 absolute left-0 z-50 w-full\"\n       style=\"height:18rem;min-width:16rem;\"\n       name=\"calendar\">\n    <div class=\"flex justify-between items-center mb-2\">\n      <div>\n        <button type=\"button\"\n                (click)=\"openYears()\">\n          <span class=\"text-lg font-bold text-gray-800\">\n            {{monthNames[month]}}\n          </span>\n          <span class=\"ml-1 text-lg text-gray-600 font-normal\">\n            {{year}}</span>\n        </button>\n      </div>\n      <div *ngIf=\"!showYears; else showYearsPickerTmpl\">\n        <button type=\"button\"\n                class=\"transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full disabled:opacity-25\"\n                (click)=\"previousMonth();\">\n          <svg class=\"h-6 w-6 text-gray-500 inline-flex\"\n               fill=\"none\"\n               viewBox=\"0 0 24 24\"\n               stroke=\"currentColor\">\n            <path stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M15 19l-7-7 7-7\" />\n          </svg>\n        </button>\n        <button type=\"button\"\n                class=\"transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full disabled:opacity-25\"\n                (click)=\"nextMonth()\">\n          <svg class=\"h-6 w-6 text-gray-500 inline-flex\"\n               fill=\"none\"\n               viewBox=\"0 0 24 24\"\n               stroke=\"currentColor\">\n            <path stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M9 5l7 7-7 7\" />\n          </svg>\n        </button>\n      </div>\n      <ng-template #showYearsPickerTmpl>\n        <div>\n          <button type=\"button\"\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\"\n                  (click)=\"previousYear();\">\n            <svg class=\"h-6 w-6 text-gray-500 inline-flex\"\n                 fill=\"none\"\n                 viewBox=\"0 0 24 24\"\n                 stroke=\"currentColor\">\n              <path stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M15 19l-7-7 7-7\" />\n            </svg>\n          </button>\n          <button type=\"button\"\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\"\n                  (click)=\"nextYear()\">\n            <svg class=\"h-6 w-6 text-gray-500 inline-flex\"\n                 fill=\"none\"\n                 viewBox=\"0 0 24 24\"\n                 stroke=\"currentColor\">\n              <path stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M9 5l7 7-7 7\" />\n            </svg>\n          </button>\n        </div>\n      </ng-template>\n    </div>\n\n    <div class=\"flex flex-wrap mb-3 -mx-1\"\n         *ngIf=\"!showYears; else showCalYearsTmpl\">\n      <div *ngFor=\"let day of dayNames\"\n           class=\"text-gray-800 font-medium text-center text-sm uppercase\"\n           style=\"width: 14.28%\">{{day}}</div>\n    </div>\n\n    <ng-template #showCalYearsTmpl>\n      <div class=\"flex flex-wrap -mx-1 items-center\">\n        <div *ngFor=\"let year of showCalendarYears\"\n             style=\"width: 18.28%\"\n             class=\"px-1 mb-1\">\n          <div (click)=\"selectYearValue(year)\"\n               class=\"cursor-pointer text-center hover:text-blue-600 text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100\"\n               [class]=\"year.selected  ? 'bg-gray-700 text-blue-600 font-medium' : 'text-gray-800 hover:bg-gray-800'\">{{year.year}}</div>\n        </div>\n      </div>\n    </ng-template>\n\n    <div class=\"flex flex-wrap -mx-1 items-center\"\n         *ngIf=\"!showYears\">\n      <div *ngFor=\"let blankday of blankDays\"\n           style=\"width: 14.28%\"\n           class=\"text-center border p-1 border-transparent text-sm opacity-50\">{{blankday}}</div>\n      <div *ngFor=\"let date of calendarDates\"\n           style=\"width: 14.28%\"\n           class=\"px-1 mb-1\">\n        <div (click)=\"selectDateValue(date)\"\n             class=\"cursor-pointer text-center hover:text-blue-600 text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100\"\n             [class]=\"date.selected  ? 'bg-gray-700 text-blue-600 font-medium' : 'text-gray-800 hover:bg-gray-800'\">{{date.day}}</div>\n      </div>\n    </div>\n  </div>\n\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: "13.3.9", ngImport: i0, type: DatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-date-picker', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DatepickerComponent),
+                            multi: true
+                        }
+                    ], template: "<div class=\"relative flex\"\n     (clickOutside)=\"closeCalendar()\">\n\n  <input type=\"text\"\n         #dateInput\n         [readonly]=\"readonly\"\n         name=\"dateInput\"\n         (blur)=\"onBlur($event)\"\n         id=\"dateInput\"\n         (focus)=\"showCalendar = false\"\n         [value]=\"value | date: displayFormat\"\n         class=\"w-full focus:ring-0 focus:outline-none rounded-none sm:text-sm border-gray-300  focus:border-0\"\n         [ngClass]=\"{'cursor-not-allowed': disabled}\"\n         [placeholder]=\"disabled ? '' : placeholder\">\n\n  <button type=\"button\"\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\"\n          [disabled]=\"disabled\"\n          (click)=\"openCalendar()\"\n          [ngClass]=\"{'cursor-not-allowed': disabled}\">\n    <i class=\"ms-Icon ms-Icon--DateTime2\"></i>\n  </button>\n\n  <div *ngIf=\"showCalendar\"\n       class=\"bg-gray-100 mt-10 rounded-sm shadow-md p-4 absolute left-0 z-50 w-full\"\n       style=\"height:18rem;min-width:16rem;\"\n       name=\"calendar\">\n    <div class=\"flex justify-between items-center mb-2\">\n      <div>\n        <button type=\"button\"\n                (click)=\"openYears()\">\n          <span class=\"text-lg font-bold text-gray-800\">\n            {{monthNames[month]}}\n          </span>\n          <span class=\"ml-1 text-lg text-gray-600 font-normal\">\n            {{year}}</span>\n        </button>\n      </div>\n      <div *ngIf=\"!showYears; else showYearsPickerTmpl\">\n        <button type=\"button\"\n                class=\"transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full disabled:opacity-25\"\n                (click)=\"previousMonth();\">\n          <svg class=\"h-6 w-6 text-gray-500 inline-flex\"\n               fill=\"none\"\n               viewBox=\"0 0 24 24\"\n               stroke=\"currentColor\">\n            <path stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M15 19l-7-7 7-7\" />\n          </svg>\n        </button>\n        <button type=\"button\"\n                class=\"transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full disabled:opacity-25\"\n                (click)=\"nextMonth()\">\n          <svg class=\"h-6 w-6 text-gray-500 inline-flex\"\n               fill=\"none\"\n               viewBox=\"0 0 24 24\"\n               stroke=\"currentColor\">\n            <path stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M9 5l7 7-7 7\" />\n          </svg>\n        </button>\n      </div>\n      <ng-template #showYearsPickerTmpl>\n        <div>\n          <button type=\"button\"\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\"\n                  (click)=\"previousYear();\">\n            <svg class=\"h-6 w-6 text-gray-500 inline-flex\"\n                 fill=\"none\"\n                 viewBox=\"0 0 24 24\"\n                 stroke=\"currentColor\">\n              <path stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M15 19l-7-7 7-7\" />\n            </svg>\n          </button>\n          <button type=\"button\"\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\"\n                  (click)=\"nextYear()\">\n            <svg class=\"h-6 w-6 text-gray-500 inline-flex\"\n                 fill=\"none\"\n                 viewBox=\"0 0 24 24\"\n                 stroke=\"currentColor\">\n              <path stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M9 5l7 7-7 7\" />\n            </svg>\n          </button>\n        </div>\n      </ng-template>\n    </div>\n\n    <div class=\"flex flex-wrap mb-3 -mx-1\"\n         *ngIf=\"!showYears; else showCalYearsTmpl\">\n      <div *ngFor=\"let day of dayNames\"\n           class=\"text-gray-800 font-medium text-center text-sm uppercase\"\n           style=\"width: 14.28%\">{{day}}</div>\n    </div>\n\n    <ng-template #showCalYearsTmpl>\n      <div class=\"flex flex-wrap -mx-1 items-center\">\n        <div *ngFor=\"let year of showCalendarYears\"\n             style=\"width: 18.28%\"\n             class=\"px-1 mb-1\">\n          <div (click)=\"selectYearValue(year)\"\n               class=\"cursor-pointer text-center hover:text-blue-600 text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100\"\n               [class]=\"year.selected  ? 'bg-gray-700 text-blue-600 font-medium' : 'text-gray-800 hover:bg-gray-800'\">{{year.year}}</div>\n        </div>\n      </div>\n    </ng-template>\n\n    <div class=\"flex flex-wrap -mx-1 items-center\"\n         *ngIf=\"!showYears\">\n      <div *ngFor=\"let blankday of blankDays\"\n           style=\"width: 14.28%\"\n           class=\"text-center border p-1 border-transparent text-sm opacity-50\">{{blankday}}</div>\n      <div *ngFor=\"let date of calendarDates\"\n           style=\"width: 14.28%\"\n           class=\"px-1 mb-1\">\n        <div (click)=\"selectDateValue(date)\"\n             class=\"cursor-pointer text-center hover:text-blue-600 text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100\"\n             [class]=\"date.selected  ? 'bg-gray-700 text-blue-600 font-medium' : 'text-gray-800 hover:bg-gray-800'\">{{date.day}}</div>\n      </div>\n    </div>\n  </div>\n\n</div>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { readonly: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], displayFormat: [{
+                type: Input,
+                args: ['display-format']
+            }], placeholder: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], dateInput: [{
+                type: ViewChild,
+                args: ['dateInput']
+            }] } });
+
+class ToasterService {
+    constructor() {
+        this.subject = new BehaviorSubject(NULL_TOAST);
+        this.toast$ = this.subject.asObservable()
+            .pipe(filter(toast => toast !== null && toast.title !== NULL_TOAST.title));
+    }
+    show(type, title, body, delay) {
+        this.subject.next({ type, title, body, delay });
+    }
+}
+ToasterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ToasterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ToasterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ToasterService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ToasterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class ToasterComponent {
+    constructor() {
+        this.i = 0;
+        this.remove = new EventEmitter();
+        this.isMobile = false;
+        this.closed = false;
+    }
+    ngOnInit() {
+        window.screen.width > 640 ? this.isMobile = false : this.isMobile = true;
+    }
+    closeToast(index) {
+        this.closed = true;
+        setTimeout(() => this.remove.emit(index), 100);
+    }
+}
+ToasterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ToasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToasterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ToasterComponent, selector: "lib-toaster", inputs: { toast: "toast", i: "i" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div aria-live=\"assertive\"\n     [ngClass]=\"closed ? 'toast-closed': 'toast z-50'\"\n     [ngStyle]=\"isMobile ? { 'margin-bottom.px': i * 85 } : {'margin-top.px': i * 85 }\">\n  <div class=\"toast-container\">\n    <div class=\"toast-pill\">\n      <div class=\"toast-context-padding\">\n        <div class=\"toast-context\"\n             [ngSwitch]=\"toast?.type\">\n          <div class=\"toast-icon\"\n               *ngSwitchCase=\"'info'\">\n            <svg class=\"h-5 w-5 text-blue-400\"\n                 xmlns=\"http://www.w3.org/2000/svg\"\n                 viewBox=\"0 0 20 20\"\n                 fill=\"currentColor\"\n                 aria-hidden=\"true\">\n              <path fill-rule=\"evenodd\"\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\"\n                    clip-rule=\"evenodd\" />\n            </svg>\n          </div>\n          <div class=\"toast-icon\"\n               *ngSwitchCase=\"'success'\">\n            <svg class=\"h-5 w-5 text-green-400\"\n                 xmlns=\"http://www.w3.org/2000/svg\"\n                 fill=\"none\"\n                 viewBox=\"0 0 24 24\"\n                 stroke=\"currentColor\"\n                 aria-hidden=\"true\">\n              <path stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\n            </svg>\n          </div>\n          <div class=\"toast-icon\"\n               *ngSwitchCase=\"'error'\">\n            <svg class=\"h-5 w-5 text-red-400\"\n                 xmlns=\"http://www.w3.org/2000/svg\"\n                 viewBox=\"0 0 20 20\"\n                 fill=\"currentColor\"\n                 aria-hidden=\"true\">\n              <path fill-rule=\"evenodd\"\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\"\n                    clip-rule=\"evenodd\" />\n            </svg>\n          </div>\n          <div class=\"toast-icon\"\n               *ngSwitchCase=\"'warning'\">\n            <svg class=\"h-5 w-5 text-yellow-400\"\n                 xmlns=\"http://www.w3.org/2000/svg\"\n                 viewBox=\"0 0 20 20\"\n                 fill=\"currentColor\"\n                 aria-hidden=\"true\">\n              <path fill-rule=\"evenodd\"\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\"\n                    clip-rule=\"evenodd\" />\n            </svg>\n          </div>\n          <div class=\"toast-icon\"\n               *ngSwitchDefault>\n            <svg class=\"h-5 w-5 text-green-400\"\n                 xmlns=\"http://www.w3.org/2000/svg\"\n                 fill=\"none\"\n                 viewBox=\"0 0 24 24\"\n                 stroke=\"currentColor\"\n                 aria-hidden=\"true\">\n              <path stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\n            </svg>\n          </div>\n\n          <div class=\"ml-3 w-0 flex-1\">\n            <p class=\"toast-title\"\n               *ngIf=\"toast?.title\">\n              {{toast?.title}}\n            </p>\n            <p class=\"toast-body\">\n              {{toast?.body}}\n            </p>\n          </div>\n          <div class=\"toast-close-icon\">\n            <button class=\"toast-close-button\"\n                    (click)=\"closeToast(i)\">\n              <span class=\"sr-only\">Close</span>\n              <!-- Heroicon name: solid/x -->\n              <svg class=\"h-5 w-5\"\n                   xmlns=\"http://www.w3.org/2000/svg\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\">\n                <path fill-rule=\"evenodd\"\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\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\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: "13.3.9", ngImport: i0, type: ToasterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-toaster', template: "<div aria-live=\"assertive\"\n     [ngClass]=\"closed ? 'toast-closed': 'toast z-50'\"\n     [ngStyle]=\"isMobile ? { 'margin-bottom.px': i * 85 } : {'margin-top.px': i * 85 }\">\n  <div class=\"toast-container\">\n    <div class=\"toast-pill\">\n      <div class=\"toast-context-padding\">\n        <div class=\"toast-context\"\n             [ngSwitch]=\"toast?.type\">\n          <div class=\"toast-icon\"\n               *ngSwitchCase=\"'info'\">\n            <svg class=\"h-5 w-5 text-blue-400\"\n                 xmlns=\"http://www.w3.org/2000/svg\"\n                 viewBox=\"0 0 20 20\"\n                 fill=\"currentColor\"\n                 aria-hidden=\"true\">\n              <path fill-rule=\"evenodd\"\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\"\n                    clip-rule=\"evenodd\" />\n            </svg>\n          </div>\n          <div class=\"toast-icon\"\n               *ngSwitchCase=\"'success'\">\n            <svg class=\"h-5 w-5 text-green-400\"\n                 xmlns=\"http://www.w3.org/2000/svg\"\n                 fill=\"none\"\n                 viewBox=\"0 0 24 24\"\n                 stroke=\"currentColor\"\n                 aria-hidden=\"true\">\n              <path stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\n            </svg>\n          </div>\n          <div class=\"toast-icon\"\n               *ngSwitchCase=\"'error'\">\n            <svg class=\"h-5 w-5 text-red-400\"\n                 xmlns=\"http://www.w3.org/2000/svg\"\n                 viewBox=\"0 0 20 20\"\n                 fill=\"currentColor\"\n                 aria-hidden=\"true\">\n              <path fill-rule=\"evenodd\"\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\"\n                    clip-rule=\"evenodd\" />\n            </svg>\n          </div>\n          <div class=\"toast-icon\"\n               *ngSwitchCase=\"'warning'\">\n            <svg class=\"h-5 w-5 text-yellow-400\"\n                 xmlns=\"http://www.w3.org/2000/svg\"\n                 viewBox=\"0 0 20 20\"\n                 fill=\"currentColor\"\n                 aria-hidden=\"true\">\n              <path fill-rule=\"evenodd\"\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\"\n                    clip-rule=\"evenodd\" />\n            </svg>\n          </div>\n          <div class=\"toast-icon\"\n               *ngSwitchDefault>\n            <svg class=\"h-5 w-5 text-green-400\"\n                 xmlns=\"http://www.w3.org/2000/svg\"\n                 fill=\"none\"\n                 viewBox=\"0 0 24 24\"\n                 stroke=\"currentColor\"\n                 aria-hidden=\"true\">\n              <path stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\n            </svg>\n          </div>\n\n          <div class=\"ml-3 w-0 flex-1\">\n            <p class=\"toast-title\"\n               *ngIf=\"toast?.title\">\n              {{toast?.title}}\n            </p>\n            <p class=\"toast-body\">\n              {{toast?.body}}\n            </p>\n          </div>\n          <div class=\"toast-close-icon\">\n            <button class=\"toast-close-button\"\n                    (click)=\"closeToast(i)\">\n              <span class=\"sr-only\">Close</span>\n              <!-- Heroicon name: solid/x -->\n              <svg class=\"h-5 w-5\"\n                   xmlns=\"http://www.w3.org/2000/svg\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\">\n                <path fill-rule=\"evenodd\"\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\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { toast: [{
+                type: Input
+            }], i: [{
+                type: Input
+            }], remove: [{
+                type: Output
+            }] } });
+
+class ToasterContainerComponent {
+    constructor(toaster) {
+        this.toaster = toaster;
+        this.toasts = [];
+    }
+    ngOnInit() {
+        this.toaster.toast$
+            .subscribe(toast => {
+            this.toasts = [toast, ...this.toasts];
+            setTimeout(() => this.toasts.pop(), toast.delay || 6000);
+        });
+    }
+    remove(index) {
+        this.toasts = this.toasts.slice(0, index).concat(this.toasts.slice(index + 1));
+    }
+}
+ToasterContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ToasterContainerComponent, deps: [{ token: ToasterService }], target: i0.ɵɵFactoryTarget.Component });
+ToasterContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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>\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: "13.3.9", ngImport: i0, type: ToasterContainerComponent, decorators: [{
+            type: Component,
+            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>\n" }]
+        }], ctorParameters: function () { return [{ type: ToasterService }]; } });
+
+class AvatarInitialsComponent {
+    constructor() {
+        this.large = false;
+        this.colors = [
+            '#EB7181',
+            '#468547',
+            '#FFD558',
+            '#3670B2', // blue
+        ];
+    }
+    ngOnInit() {
+        this.createInititals();
+        const randomIndex = Math.floor(Math.random() * Math.floor(this.colors.length));
+        // assign this to a class if you want to randomly change background colors of the circle.
+        this.circleColor = this.colors[randomIndex];
+    }
+    createInititals() {
+        if (this.name) {
+            let initials = '';
+            for (let i = 0; i < this.name.length; i++) {
+                if (this.name.charAt(i) === ' ') {
+                    continue;
+                }
+                if (this.name.charAt(i) === this.name.charAt(i).toUpperCase()) {
+                    initials += this.name.charAt(i);
+                    if (initials.length === 2) {
+                        break;
+                    }
+                }
+            }
+            this.initials = initials;
+        }
+    }
+}
+AvatarInitialsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AvatarInitialsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AvatarInitialsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AvatarInitialsComponent, selector: "lib-avatar-initials", inputs: { name: "name", large: "large" }, ngImport: i0, template: "<div [ngClass]=\"large ? 'avatar-container-large': 'avatar-container'\">\n    <span [ngClass]=\"large ? 'avatar-text-large': 'avatar-text'\">{{ initials }}</span>\n</div>\n", directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AvatarInitialsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-avatar-initials', template: "<div [ngClass]=\"large ? 'avatar-container-large': 'avatar-container'\">\n    <span [ngClass]=\"large ? 'avatar-text-large': 'avatar-text'\">{{ initials }}</span>\n</div>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { name: [{
+                type: Input
+            }], large: [{
+                type: Input
+            }] } });
+
+class ToggleComponent {
+    constructor() {
+        this.valueChange = new EventEmitter();
+        this.onChange$ = undefined;
+        this.onTouched$ = undefined;
+    }
+    writeValue(obj) {
+        if (obj) {
+            this.value = obj || false;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange$ = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched$ = fn;
+    }
+    onBlur(event) {
+        if (this.onTouched$) {
+            this.onTouched$();
+        }
+    }
+    ngOnInit() {
+    }
+    changeValue() {
+        this.value = !this.value;
+        this.valueChange.emit(this.value);
+        if (this.onChange$) {
+            this.onChange$(this.value);
+        }
+        if (this.onTouched$) {
+            this.onTouched$();
+        }
+    }
+}
+ToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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\"\n        [ngClass]=\"value ? (disabled ? 'on disabled' : 'on') : 'off'\"\n        class=\"toggle-button\"\n        role=\"switch\"\n        aria-checked=\"false\"\n        aria-labelledby=\"isPrivate\"\n        (click)=\"changeValue()\"\n        (blur)=\"onBlur($event)\"\n        value=\"{{value}}\"\n        [disabled]=\"disabled\"\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'\">\n    <span aria-hidden=\"true\"\n          [ngClass]=\"value ? 'enabled-anim' : 'disabled-anim'\"\n          class=\"toggle-span\"></span>\n</button>", directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-toggle', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ToggleComponent),
+                            multi: true
+                        }
+                    ], template: "<button type=\"button\"\n        [ngClass]=\"value ? (disabled ? 'on disabled' : 'on') : 'off'\"\n        class=\"toggle-button\"\n        role=\"switch\"\n        aria-checked=\"false\"\n        aria-labelledby=\"isPrivate\"\n        (click)=\"changeValue()\"\n        (blur)=\"onBlur($event)\"\n        value=\"{{value}}\"\n        [disabled]=\"disabled\"\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'\">\n    <span aria-hidden=\"true\"\n          [ngClass]=\"value ? 'enabled-anim' : 'disabled-anim'\"\n          class=\"toggle-span\"></span>\n</button>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class SidePaneComponent {
+    constructor(router, document) {
+        this.router = router;
+        this.document = document;
+        // tslint:disable-next-line:no-input-rename
+        this.showPane = false;
+        this.sizeContainerStyle = 'side-pane-box-size';
+        this.overlayStyle = 'side-pane-overlay';
+        this.onComplete = new EventEmitter();
+    }
+    ngOnDestroy() {
+    }
+    ngOnInit() {
+    }
+    onSidePaneActivated(component) {
+        this.document.body.classList.add('modal-active');
+        let sizeStyleSuffix = '';
+        const state = this.router.getCurrentNavigation()?.extras.state;
+        if (state) {
+            if (state.paneSize) {
+                if (state.paneSize === SidePaneSize.Small25) {
+                    sizeStyleSuffix = '-25';
+                }
+                else if (state.paneSize === SidePaneSize.Medium50) {
+                    sizeStyleSuffix = '-50';
+                }
+                else if (state.paneSize === SidePaneSize.Large75) {
+                    sizeStyleSuffix = '-75';
+                }
+            }
+            if (state.paneOverlay) {
+                if (state.paneOverlay === SidePaneOverlayType.None) {
+                    this.overlayStyle = 'side-pane-overlay-opacity-0';
+                }
+                else if (state.paneOverlay === SidePaneOverlayType.Dark) {
+                    this.overlayStyle = 'side-pane-overlay-opacity-50';
+                }
+                else {
+                    this.overlayStyle = 'side-pane-overlay';
+                }
+            }
+        }
+        this.sizeContainerStyle = `side-pane-box-size${sizeStyleSuffix}`;
+        this.showPane = true;
+    }
+    onSidePaneDeactivated($event) {
+        this.document.body.classList.remove('modal-active');
+        this.showPane = false;
+        this.onComplete.emit(true);
+    }
+}
+SidePaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SidePaneComponent, deps: [{ token: i1$1.Router }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+SidePaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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\">\n  <div [class]=\"showPane ? overlayStyle : 'hidden'\" aria-hidden=\"true\"></div>\n  <div [class]=\"showPane ? 'side-pane-container' : 'hidden'\">\n    <div [class]=\"sizeContainerStyle\">\n      <div class=\"side-pane\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SidePaneComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-side-pane', template: "<div *ngIf=\"showPane\" class=\"side-pane-outer-container\" aria-labelledby=\"slide-over\" role=\"dialog\" aria-modal=\"true\">\n  <div [class]=\"showPane ? overlayStyle : 'hidden'\" aria-hidden=\"true\"></div>\n  <div [class]=\"showPane ? 'side-pane-container' : 'hidden'\">\n    <div [class]=\"sizeContainerStyle\">\n      <div class=\"side-pane\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\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 = '';
+    }
+    ngOnInit() {
+    }
+}
+NavLinksListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: NavLinksListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NavLinksListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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"] }, ngImport: i0, template: "<div [class]=\"containerClass\">\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        {{ link.text }}\n      </a>\n      <a *ngSwitchCase=\"'external'\"\n        [href]=\"link.path\"\n        [attr.target]=\"link.external ? '_blank' : '_self'\"\n        class=\"nav-link\">\n        {{ link.text }}\n      </a>\n      <a *ngSwitchCase=\"'fragment'\"\n        routerLink=\".\"\n        [fragment]=\"link.path\"\n        [class.active]=\"(activeFragment | async) === link.path\"\n        class=\"nav-link\">\n        {{ link.text }}\n      </a>\n    </ng-container>\n  </ng-container>\n</div>\n", directives: [{ 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$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], pipes: { "async": i1.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: NavLinksListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-nav-links-list', template: "<div [class]=\"containerClass\">\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        {{ link.text }}\n      </a>\n      <a *ngSwitchCase=\"'external'\"\n        [href]=\"link.path\"\n        [attr.target]=\"link.external ? '_blank' : '_self'\"\n        class=\"nav-link\">\n        {{ link.text }}\n      </a>\n      <a *ngSwitchCase=\"'fragment'\"\n        routerLink=\".\"\n        [fragment]=\"link.path\"\n        [class.active]=\"(activeFragment | async) === link.path\"\n        class=\"nav-link\">\n        {{ link.text }}\n      </a>\n    </ng-container>\n  </ng-container>\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']
+            }] } });
+
+const APP_LINKS = new InjectionToken('APP_LINKS');
+const APP_NOTIFICATIONS = new InjectionToken('APP_NOTIFICATIONS');
+const SHELL_CONFIG = new InjectionToken('SHELL_CONFIG');
+
+class DynamicComponentHostDirective {
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+        this.hostName = '';
+    }
+}
+DynamicComponentHostDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DynamicComponentHostDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+DynamicComponentHostDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.9", type: DynamicComponentHostDirective, selector: "[appDynamicComponentHost]", inputs: { hostName: "hostName" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DynamicComponentHostDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[appDynamicComponentHost]' }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { hostName: [{
+                type: Input
+            }] } });
+
+/**
+ * Holds information about the dynamic content.
+ * @remarks
+ * `ComponentRef` is undefined in the case content is of `TemplateRef` type.
+ */
+class ContentRef {
+    constructor(nodes, viewRef, componentRef) {
+        this.nodes = nodes;
+        this.viewRef = viewRef;
+        this.componentRef = componentRef;
+    }
+}
+
+/**
+ * Provides ways of loading and handling dynamic content.
+ *
+ * @remarks
+ * Do NOT use this directly, create an instance through {@link ComponentLoaderFactory}
+ * You can use this loader in two ways:
+ * - Attaches a component to `ViewContainerRef`.
+ * - Attaches a component to `ViewContainerRef`. The attached component has a `<ng-content>` tag inside its view. The {@link ComponentLoaderOptions.content} will be drawn inside this tag.
+ *
+ * @internal
+ */
+class ComponentLoader {
+    constructor(vcr, cfr, applicationRef, injector) {
+        this.vcr = vcr;
+        this.cfr = cfr;
+        this.applicationRef = applicationRef;
+        this.injector = injector;
+        /**
+         * Before content is shown event.
+         */
+        this.onBeforeShow = new Subject();
+        /**
+         * After show content event.
+         * @returns The id of newly created component ref.
+         */
+        this.onShown = new Subject();
+        /**
+         * Before content is hidden event.
+         * @returns The instance of attached component;
+         */
+        this.onBeforeHide = new Subject();
+        /**
+         * After content is hidden event.
+         * @returns The id of destroyed component ref.
+         */
+        this.onHidden = new Subject();
+        this.providers = [];
+        this.containerDefaultSelector = 'body';
+    }
+    /**
+     * Attaches component.
+     * @param componentType - The type component to attach.
+     * @returns Current instance of {@link ComponentLoader}
+     */
+    attach(componentType) {
+        this.componentFactory = this.cfr.resolveComponentFactory(componentType);
+        return this;
+    }
+    /**
+     * Body will be used in nothing is provided.
+     * @param container - The element in which dynamic content will be drawn inside to. For string case a query to the dom will be executed to find the element.
+     * @returns Current instance of {@link ComponentLoader}
+     */
+    to(container) {
+        this.container = container || this.container;
+        return this;
+    }
+    /**
+     * Adds provider to the providers array. These providers will be injected to the attached component.
+     *
+     * @see {@link https://angular.io/guide/glossary#di-token | Injection Token}
+     *
+     * @param provider - Provider to inject.
+     * @returns Current instance of {@link ComponentLoader}
+     */
+    provide(provider) {
+        this.providers.push(provider);
+        return this;
+    }
+    /**
+     * Attaches attached component to dom and any dynamic content if provided.
+     * @remarks
+     * Also triggers the {@link ComponentLoader.onBeforeShow} and {@link ComponentLoader.onShown} events.
+     *
+     * @param options - {@link ComponentLoaderOptions}.
+     * @returns A reference to the created content.
+     */
+    show(options = {}) {
+        if (this.componentRef) {
+            throw Error('Component is already shown');
+        }
+        if (!this.componentFactory) {
+            throw Error('You must attach a component');
+        }
+        this.onBeforeShow.next();
+        if (options.content) {
+            this.contentRef = this.getContentRef(options.content, options.context, options.initialState);
+        }
+        this.createComponentAndAttachToView(options);
+        this.appendContentToContainer();
+        this.markComponentsForCheck();
+        this.onShown.next(options.id);
+        return this.componentRef;
+    }
+    /**
+     * Removes attached component from dom.
+     * @remarks
+     * Also triggers the {@link ComponentLoader.onBeforeHide} and {@link ComponentLoader.onHidden} events.
+     *
+     * @param id - If provided it is returned through the {@link ComponentLoader.onHidden}.
+     * @returns Current instance of {@link ComponentLoader}
+     */
+    hide(id, result) {
+        if (!this.componentRef) {
+            throw Error('No attached component found to hide');
+        }
+        this.onBeforeHide.next(this.componentRef.instance);
+        const componentEl = this.componentRef.location.nativeElement;
+        componentEl.parentNode.removeChild(componentEl);
+        if (this.contentRef?.componentRef) {
+            this.contentRef.componentRef.destroy();
+        }
+        if (this.vcr && this.contentRef?.viewRef) {
+            this.vcr.remove(this.vcr.indexOf(this.contentRef.viewRef));
+        }
+        if (this.contentRef?.viewRef) {
+            this.contentRef.viewRef.destroy();
+        }
+        this.contentRef = void 0;
+        this.componentRef = void 0;
+        this.onHidden.next(id ? { id, result } : null);
+        return this;
+    }
+    getInnerComponent() {
+        return this.innerComponent;
+    }
+    markComponentsForCheck() {
+        if (this.contentRef?.componentRef) {
+            this.innerComponent = this.contentRef.componentRef.instance;
+            this.contentRef.componentRef.changeDetectorRef.markForCheck();
+            this.contentRef.componentRef.changeDetectorRef.detectChanges();
+        }
+        this.componentRef.changeDetectorRef.markForCheck();
+        this.componentRef.changeDetectorRef.detectChanges();
+    }
+    createComponentAndAttachToView(options) {
+        const injector = Injector.create({
+            providers: this.providers,
+            parent: this.injector,
+        });
+        this.componentRef = this.componentFactory.create(injector, this.contentRef?.nodes);
+        this.applicationRef.attachView(this.componentRef.hostView);
+        this.instance = this.componentRef.instance;
+        Object.assign(this.componentRef.instance, options);
+    }
+    appendContentToContainer() {
+        if (this.container instanceof ElementRef) {
+            this.container.nativeElement.appendChild(this.componentRef?.location.nativeElement);
+        }
+        if (typeof this.container === 'string' && typeof document !== 'undefined') {
+            const selectedElement = document.querySelector(this.container) || document.querySelector(this.containerDefaultSelector);
+            if (!selectedElement) {
+                return;
+            }
+            selectedElement.appendChild(this.componentRef?.location.nativeElement);
+        }
+    }
+    getContentRef(content, context, initialState) {
+        //TemplateRef case
+        if (content instanceof TemplateRef) {
+            if (this.vcr) {
+                const viewRef = this.vcr.createEmbeddedView(content, context);
+                viewRef.markForCheck();
+                return new ContentRef([viewRef.rootNodes], viewRef);
+            }
+            const viewRef = content.createEmbeddedView({});
+            this.applicationRef.attachView(viewRef);
+            return new ContentRef([viewRef.rootNodes], viewRef);
+        }
+        //Component case
+        if (typeof content === 'function') {
+            const contentCf = this.cfr.resolveComponentFactory(content);
+            const injector = Injector.create({
+                providers: this.providers,
+                parent: this.injector,
+            });
+            const componentRef = contentCf.create(injector);
+            Object.assign(componentRef.instance, initialState);
+            this.applicationRef.attachView(componentRef.hostView);
+            return new ContentRef([[componentRef.location.nativeElement]], componentRef.hostView, componentRef);
+        }
+        throw Error('Unsupported content type');
+    }
+}
+
+/**
+ * Use to create instances of {@link ComponentLoader}.
+ *
+ * @public
+ */
+class ComponentLoaderFactory {
+    constructor(componentFactoryResolver, injector, applicationRef) {
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.injector = injector;
+        this.applicationRef = applicationRef;
+    }
+    /**
+     * Returns a new instance of {@link ComponentLoader}
+     * @param viewContainerRef - The view container the dynamic content will be attached to.
+     * @returns A new instance of {@link ComponentLoader}.
+     *
+     * @public
+     */
+    createLoader(viewContainerRef) {
+        return new ComponentLoader(viewContainerRef, this.componentFactoryResolver, this.applicationRef, this.injector);
+    }
+}
+ComponentLoaderFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", 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: "13.3.9", ngImport: i0, type: ComponentLoaderFactory, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ComponentLoaderFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i0.ApplicationRef }]; } });
+
+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);
+            }
+        });
+    }
+    toggleMenu() {
+        this.menuExpanded = !this.menuExpanded;
+        this.unreadCount = 0;
+    }
+    doInboxAction() {
+        if (this.notifications.inboxAction) {
+            this.notifications.inboxAction();
+        }
+        else {
+            this.menuExpanded = true;
+        }
+        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: "13.3.9", ngImport: i0, type: NotificationsIndicatorComponent, deps: [{ token: APP_NOTIFICATIONS }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
+NotificationsIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator", ngImport: i0, template: "<div class=\"relative\"\n(clickOutside)=\"onClickOutside($event)\">\n  <!-- Notifications Button -->\n  <button type=\"button\"\n          (click)=\"doInboxAction()\"\n          aria-expanded=\"false\"\n          aria-haspopup=\"true\">\n    <span class=\"sr-only\">View notifications</span>\n    <span class=\"avatar-container\">\n      <span class=\"avatar-text\">\n        <i class=\"ms-Icon\"\n          [class.ms-Icon--MessageFill]=\"unreadCount > 0\"\n          [class.text-sky-400]=\"unreadCount > 0\"\n          [class.animate-notification]=\"newArrival\"\n          [class.ms-Icon--Message]=\"unreadCount === 0\">\n        </i>\n      </span>\n      <span\n        *ngIf=\"unreadCount > 0\"\n        [class.animate-pulse]=\"newArrival\"\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\">\n        {{ unreadCount }}\n      </span>\n    </span>\n  </button>\n\n  <!-- Notifications dropdown -->\n  <div *ngIf=\"menuExpanded\" class=\"header-notifications-dropdown-with-username\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"messages-menu\">\n    <div class=\"max-h-64 overflow-y-auto notification-messages min-h\">\n      <ng-container *ngIf=\"!items; else messagesDropDown\" class=\"py-5\">\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>\n      </ng-container>\n      <ng-template #messagesDropDown>\n        <ul class=\"pr-1.5\">\n          <ng-container *ngIf=\"items; else loading\">\n            <ng-container *ngIf=\"items.length <= 0\" class=\"py-5\">\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>\n            </ng-container>\n            <ng-container *ngFor=\"let message of items; let i = index\">\n              <li class=\"mb-2\" [ngClass]=\"{ 'border-l-2 border-blue-500 bg-blue-50 hover:bg-blue-50': !message.data.isRead }\">\n                <div class=\"flex justify-between\">\n                  <div class=\"flex-grow\">\n                    <a\n                      [routerLink]=\"message.path\"\n                      (click)=\"removeItem(i)\"\n                      class=\"notifications-nav-link grid\"\n                      [ngClass]=\"!message.data.isRead ? ' hover:bg-blue-50' : 'border-b border-gray-100'\"\n                    >\n                      <div class=\"flex flex-col\">\n                        <div class=\"font-thin tracking-tighter\">\n                          {{ message.data.creationDate | date: \"EEE, d MMMM\" }}\n                        </div>\n                        <div class=\"font-bold\">\n                          {{ message.data.text }}\n                        </div>\n                      </div>\n                    </a>\n                  </div>\n                </div>\n              </li>\n            </ng-container>\n          </ng-container>\n\n          <ng-template #loading>\n            <div class=\"h-32 flex items-center justify-center\">\n              <div class=\"animate-pulse text-s text-gray-600\">Loading...</div>\n            </div>\n          </ng-template>\n        </ul>\n      </ng-template>\n    </div>\n    <div class=\"p-1 rounded-sm\">\n      <a [routerLink]=\"allNotificationsLink!.path\">\n        <button type=\"button\" class=\"header-notifications-dropdown-view-all-button\">{{allNotificationsLink!.text}}</button>\n      </a>\n    </div>\n  </div>\n</div>\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"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], pipes: { "date": i1.DatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: NotificationsIndicatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-notifications-indicator', template: "<div class=\"relative\"\n(clickOutside)=\"onClickOutside($event)\">\n  <!-- Notifications Button -->\n  <button type=\"button\"\n          (click)=\"doInboxAction()\"\n          aria-expanded=\"false\"\n          aria-haspopup=\"true\">\n    <span class=\"sr-only\">View notifications</span>\n    <span class=\"avatar-container\">\n      <span class=\"avatar-text\">\n        <i class=\"ms-Icon\"\n          [class.ms-Icon--MessageFill]=\"unreadCount > 0\"\n          [class.text-sky-400]=\"unreadCount > 0\"\n          [class.animate-notification]=\"newArrival\"\n          [class.ms-Icon--Message]=\"unreadCount === 0\">\n        </i>\n      </span>\n      <span\n        *ngIf=\"unreadCount > 0\"\n        [class.animate-pulse]=\"newArrival\"\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\">\n        {{ unreadCount }}\n      </span>\n    </span>\n  </button>\n\n  <!-- Notifications dropdown -->\n  <div *ngIf=\"menuExpanded\" class=\"header-notifications-dropdown-with-username\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"messages-menu\">\n    <div class=\"max-h-64 overflow-y-auto notification-messages min-h\">\n      <ng-container *ngIf=\"!items; else messagesDropDown\" class=\"py-5\">\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>\n      </ng-container>\n      <ng-template #messagesDropDown>\n        <ul class=\"pr-1.5\">\n          <ng-container *ngIf=\"items; else loading\">\n            <ng-container *ngIf=\"items.length <= 0\" class=\"py-5\">\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>\n            </ng-container>\n            <ng-container *ngFor=\"let message of items; let i = index\">\n              <li class=\"mb-2\" [ngClass]=\"{ 'border-l-2 border-blue-500 bg-blue-50 hover:bg-blue-50': !message.data.isRead }\">\n                <div class=\"flex justify-between\">\n                  <div class=\"flex-grow\">\n                    <a\n                      [routerLink]=\"message.path\"\n                      (click)=\"removeItem(i)\"\n                      class=\"notifications-nav-link grid\"\n                      [ngClass]=\"!message.data.isRead ? ' hover:bg-blue-50' : 'border-b border-gray-100'\"\n                    >\n                      <div class=\"flex flex-col\">\n                        <div class=\"font-thin tracking-tighter\">\n                          {{ message.data.creationDate | date: \"EEE, d MMMM\" }}\n                        </div>\n                        <div class=\"font-bold\">\n                          {{ message.data.text }}\n                        </div>\n                      </div>\n                    </a>\n                  </div>\n                </div>\n              </li>\n            </ng-container>\n          </ng-container>\n\n          <ng-template #loading>\n            <div class=\"h-32 flex items-center justify-center\">\n              <div class=\"animate-pulse text-s text-gray-600\">Loading...</div>\n            </div>\n          </ng-template>\n        </ul>\n      </ng-template>\n    </div>\n    <div class=\"p-1 rounded-sm\">\n      <a [routerLink]=\"allNotificationsLink!.path\">\n        <button type=\"button\" class=\"header-notifications-dropdown-view-all-button\">{{allNotificationsLink!.text}}</button>\n      </a>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [APP_NOTIFICATIONS]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [APP_LINKS]
+                }] }]; } });
+
+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';
+        // 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;
+        this.border = true;
+        this.sectionLinks = of([]);
+        this.mobileMenuExpanded = false;
+        this.userMenuExpanded = false;
+        this.routerSub$ = null;
+        this.userSub$ = null;
+        this.statusSub$ = null;
+        this.user = null;
+        this.avatarName = null;
+        this.activeFragment = null;
+        this.routeSubject = this.router.events.pipe(filter((event) => event instanceof NavigationStart));
+    }
+    ngOnInit() {
+        this.activeFragment = this.route.fragment.pipe(share());
+        this.sectionLinks = this.links[this.sectionLinksPath];
+        this.routerSub$ = this.routeSubject.subscribe((event) => {
+            this.mobileMenuExpanded = false;
+            this.userMenuExpanded = false;
+        });
+        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);
+        });
+        // set current lang if no current value from langs if any
+        if (!this.currentLang && this.langs && this.langs.length > 0) {
+            this.setCurrentLang(this.langs[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();
+        }
+    }
+    // tslint:disable-next-line:typedef
+    onClickOutside($event) {
+        this.userMenuExpanded = false;
+    }
+    signin(event) {
+        if (event) {
+            event.preventDefault();
+        }
+        this.authService.signinRedirect();
+    }
+    setCurrentUser(user) {
+        this.user = user;
+        if (this.user && this.user.profile) {
+            this.avatarName = `${this.user.profile.given_name?.charAt(0)}${this.user.profile.family_name?.charAt(0)}`.toUpperCase();
+        }
+    }
+    setCurrentLang(lang) {
+        this.currentLang = lang;
+    }
+}
+ShellHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", 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: "12.0.0", version: "13.3.9", type: ShellHeaderComponent, selector: "lib-shell-header", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], profileMenuVisible: ["profile-menu", "profileMenuVisible"], showUserNameOnHeader: ["show-userName", "showUserNameOnHeader"], showAlerts: ["show-alerts", "showAlerts"], langs: "langs", currentLang: ["current-lang", "currentLang"], border: "border" }, ngImport: i0, template: "<nav>\n  <div class=\"shell-header-paddings\">\n    <div [class]=\"border ? 'shell-header-border' : ''\">\n      <div class=\"shell-header-menu-container\">\n        <div class=\"shell-header-logo-container\">\n          <div>\n            <a href=\"#\" [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"config.appLogo\" [alt]=\"config.appLogoAlt\" /></a>\n          </div>\n        </div>\n\n        <div class=\"shell-header-link-container\">\n          <div class=\"shell-header-link-container-inner\">\n            <lib-nav-links-list\n              [links]=\"sectionLinks\"\n              [active-fragment]=\"activeFragment\"\n              [link-class]=\"'nav-link'\"\n              [link-active-class]=\"'nav-link-active'\">\n            </lib-nav-links-list>\n          </div>\n        </div>\n\n        <div *ngIf=\"langs && langs.length > 1 && currentLang\" class=\"shell-header-links-far-container\">\n            <button class=\"text-blue-300 hover:text-blue-500\">\n                <span>{{currentLang}}</span>\n                <i class=\"text-xs ml-1 ms-Icon ms-Icon--ChevronDown\"></i>\n            </button>\n        </div>\n\n        <div class=\"shell-header-md-visible\">\n          <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\n\n            <lib-nav-links-list\n              [links]=\"links.profileActions\"\n              [active-fragment]=\"activeFragment\"\n              [link-class]=\"'shell-header-menu-rounded-button'\"\n              [link-active-class]=\"'shell-header-menu-rounded-button-active'\">\n            </lib-nav-links-list>\n\n            <!-- <ng-container *ngFor=\"let link of links.profileActions | async\">\n              <a class=\"shell-header-menu-rounded-button\"\n                 (clickOutside)=\"onClickOutside($event)\"\n                 [attr.href]=\"link.path\"\n                 [attr.target]=\"link.external ? '_blank' : '_self'\">\n                <span class=\"sr-only\">{{ link.text }}</span>\n                <i *ngIf=\"link.icon\" [class]=\"link.icon\"></i>\n              </a>\n            </ng-container> -->\n\n            <!-- Username -->\n            <div *ngIf=\"profileMenuVisible\" class=\"ml-2 relative\">\n              <div [ngClass]=\"{'shell-header-profile': showUserNameOnHeader}\">\n                <div *ngIf=\"user && showUserNameOnHeader\" class=\"shell-header-profile-userName\">\n                  {{ user.profile.name }}\n                </div>\n              </div>\n            </div>\n\n            <!-- Notifications dropdown -->\n            <div *ngIf=\"showAlerts && user\" class=\"ml-2\">\n              <lib-notifications-indicator></lib-notifications-indicator>\n            </div>\n\n            <!-- Profile dropdown -->\n            <div *ngIf=\"profileMenuVisible\" class=\"ml-2 relative\" (clickOutside)=\"onClickOutside($event)\">\n              <div [ngClass]=\"{'shell-header-profile': showUserNameOnHeader}\">\n                <button type=\"button\" *ngIf=\"user\" (click)=\"userMenuExpanded = !userMenuExpanded\"\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\n                <div *ngIf=\"userMenuExpanded\"\n                     [ngClass]=\"showUserNameOnHeader ? 'shell-header-profile-dropdown-with-username' : 'shell-header-profile-dropdown'\"\n                     role=\"menu\"\n                     aria-orientation=\"vertical\"\n                     aria-labelledby=\"user-menu\">\n                     <lib-nav-links-list\n                        [links]=\"links.profile\"\n                        [active-fragment]=\"activeFragment\"\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            </div>\n          </div>\n        </div>\n\n        <div class=\"mobile-menu-button-container\">\n          <!-- Mobile menu button -->\n          <button type=\"button\"\n                  (click)=\"mobileMenuExpanded = !mobileMenuExpanded\"\n                  class=\"mobile-menu-button\"\n                  aria-controls=\"mobile-menu\"\n                  [attr.aria-expanded]=\"mobileMenuExpanded\">\n            <span class=\"sr-only\">Open main menu</span>\n            <!--Heroicon name: outline/menu  Menu open: \"hidden\", Menu closed: \"block\"-->\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\n                 fill=\"none\"\n                 viewBox=\"0 0 24 24\"\n                 stroke=\"currentColor\"\n                 aria-hidden=\"true\"\n                 [class]=\"mobileMenuExpanded ? 'hidden':'block h-6 w-6'\">\n              <path stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M4 6h16M4 12h16M4 18h16\" />\n            </svg>\n            <!--Heroicon name: outline/x Menu open: \"block\", Menu closed: \"hidden\"-->\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\n                 fill=\"none\"\n                 viewBox=\"0 0 24 24\"\n                 stroke=\"currentColor\"\n                 aria-hidden=\"true\"\n                 [class]=\"mobileMenuExpanded ? 'block h-6 w-6':'hidden'\">\n              <path stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M6 18L18 6M6 6l12 12\" />\n            </svg>\n          </button>\n        </div>\n\n      </div>\n    </div>\n  </div>\n  <!-- Mobile menu, show/hide based on menu state. -->\n  <div class=\"mobile-menu-container\" *ngIf=\"mobileMenuExpanded\" id=\"mobile-menu\">\n    <lib-nav-links-list\n      [links]=\"sectionLinks\"\n      [active-fragment]=\"activeFragment\"\n      [link-class]=\"'nav-link-mobile'\"\n      [link-active-class]=\"'nav-link-mobile-active'\"\n      [container-class]=\"'mobile-menu-link-container'\">\n    </lib-nav-links-list>\n\n    <div *ngIf=\"!user\">\n      <a href=\"#\" (click)=\"signin($event)\" class=\"nav-link-mobile\">\n        <i class=\"ms-Icon ms-Icon--Signin mr-2\"></i>\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7\n      </a>\n    </div>\n\n    <div class=\"mobile-menu-user-info-container\" *ngIf=\"user\">\n      <div class=\"mobile-menu-user-info-container-inner\">\n        <div class=\"flex-shrink-0\">\n          <span class=\"mobile-menu-avatar-container\">\n            <span class=\"mobile-menu-avatar-name\">{{ this.avatarName }}</span>\n          </span>\n        </div>\n        <div class=\"ml-3\">\n          <div class=\"mobile-menu-user-name\">{{ user.profile.name }}</div>\n          <div class=\"mobile-menu-user-email\">{{ user.profile.email }}</div>\n        </div>\n        <button class=\"mobile-menu-rounded-button\">\n          <span class=\"sr-only\">View notifications</span>\n          <!-- Heroicon name: outline/bell -->\n          <svg class=\"mobile-menu-rounded-button-icon-style\"\n               xmlns=\"http://www.w3.org/2000/svg\"\n               fill=\"none\"\n               viewBox=\"0 0 24 24\"\n               stroke=\"currentColor\"\n               aria-hidden=\"true\">\n            <path stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\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\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n\n    <lib-nav-links-list\n          [links]=\"links.profile\"\n          [active-fragment]=\"activeFragment\"\n          [link-class]=\"'nav-link-mobile'\"\n          [link-active-class]=\"'nav-link-mobile-active'\"\n          [container-class]=\"'mobile-menu-link-container'\">\n      </lib-nav-links-list>\n  </div>\n</nav>\n", components: [{ type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class"] }, { type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator" }], directives: [{ type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ShellHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-shell-header', template: "<nav>\n  <div class=\"shell-header-paddings\">\n    <div [class]=\"border ? 'shell-header-border' : ''\">\n      <div class=\"shell-header-menu-container\">\n        <div class=\"shell-header-logo-container\">\n          <div>\n            <a href=\"#\" [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"config.appLogo\" [alt]=\"config.appLogoAlt\" /></a>\n          </div>\n        </div>\n\n        <div class=\"shell-header-link-container\">\n          <div class=\"shell-header-link-container-inner\">\n            <lib-nav-links-list\n              [links]=\"sectionLinks\"\n              [active-fragment]=\"activeFragment\"\n              [link-class]=\"'nav-link'\"\n              [link-active-class]=\"'nav-link-active'\">\n            </lib-nav-links-list>\n          </div>\n        </div>\n\n        <div *ngIf=\"langs && langs.length > 1 && currentLang\" class=\"shell-header-links-far-container\">\n            <button class=\"text-blue-300 hover:text-blue-500\">\n                <span>{{currentLang}}</span>\n                <i class=\"text-xs ml-1 ms-Icon ms-Icon--ChevronDown\"></i>\n            </button>\n        </div>\n\n        <div class=\"shell-header-md-visible\">\n          <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\n\n            <lib-nav-links-list\n              [links]=\"links.profileActions\"\n              [active-fragment]=\"activeFragment\"\n              [link-class]=\"'shell-header-menu-rounded-button'\"\n              [link-active-class]=\"'shell-header-menu-rounded-button-active'\">\n            </lib-nav-links-list>\n\n            <!-- <ng-container *ngFor=\"let link of links.profileActions | async\">\n              <a class=\"shell-header-menu-rounded-button\"\n                 (clickOutside)=\"onClickOutside($event)\"\n                 [attr.href]=\"link.path\"\n                 [attr.target]=\"link.external ? '_blank' : '_self'\">\n                <span class=\"sr-only\">{{ link.text }}</span>\n                <i *ngIf=\"link.icon\" [class]=\"link.icon\"></i>\n              </a>\n            </ng-container> -->\n\n            <!-- Username -->\n            <div *ngIf=\"profileMenuVisible\" class=\"ml-2 relative\">\n              <div [ngClass]=\"{'shell-header-profile': showUserNameOnHeader}\">\n                <div *ngIf=\"user && showUserNameOnHeader\" class=\"shell-header-profile-userName\">\n                  {{ user.profile.name }}\n                </div>\n              </div>\n            </div>\n\n            <!-- Notifications dropdown -->\n            <div *ngIf=\"showAlerts && user\" class=\"ml-2\">\n              <lib-notifications-indicator></lib-notifications-indicator>\n            </div>\n\n            <!-- Profile dropdown -->\n            <div *ngIf=\"profileMenuVisible\" class=\"ml-2 relative\" (clickOutside)=\"onClickOutside($event)\">\n              <div [ngClass]=\"{'shell-header-profile': showUserNameOnHeader}\">\n                <button type=\"button\" *ngIf=\"user\" (click)=\"userMenuExpanded = !userMenuExpanded\"\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\n                <div *ngIf=\"userMenuExpanded\"\n                     [ngClass]=\"showUserNameOnHeader ? 'shell-header-profile-dropdown-with-username' : 'shell-header-profile-dropdown'\"\n                     role=\"menu\"\n                     aria-orientation=\"vertical\"\n                     aria-labelledby=\"user-menu\">\n                     <lib-nav-links-list\n                        [links]=\"links.profile\"\n                        [active-fragment]=\"activeFragment\"\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            </div>\n          </div>\n        </div>\n\n        <div class=\"mobile-menu-button-container\">\n          <!-- Mobile menu button -->\n          <button type=\"button\"\n                  (click)=\"mobileMenuExpanded = !mobileMenuExpanded\"\n                  class=\"mobile-menu-button\"\n                  aria-controls=\"mobile-menu\"\n                  [attr.aria-expanded]=\"mobileMenuExpanded\">\n            <span class=\"sr-only\">Open main menu</span>\n            <!--Heroicon name: outline/menu  Menu open: \"hidden\", Menu closed: \"block\"-->\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\n                 fill=\"none\"\n                 viewBox=\"0 0 24 24\"\n                 stroke=\"currentColor\"\n                 aria-hidden=\"true\"\n                 [class]=\"mobileMenuExpanded ? 'hidden':'block h-6 w-6'\">\n              <path stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M4 6h16M4 12h16M4 18h16\" />\n            </svg>\n            <!--Heroicon name: outline/x Menu open: \"block\", Menu closed: \"hidden\"-->\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\n                 fill=\"none\"\n                 viewBox=\"0 0 24 24\"\n                 stroke=\"currentColor\"\n                 aria-hidden=\"true\"\n                 [class]=\"mobileMenuExpanded ? 'block h-6 w-6':'hidden'\">\n              <path stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M6 18L18 6M6 6l12 12\" />\n            </svg>\n          </button>\n        </div>\n\n      </div>\n    </div>\n  </div>\n  <!-- Mobile menu, show/hide based on menu state. -->\n  <div class=\"mobile-menu-container\" *ngIf=\"mobileMenuExpanded\" id=\"mobile-menu\">\n    <lib-nav-links-list\n      [links]=\"sectionLinks\"\n      [active-fragment]=\"activeFragment\"\n      [link-class]=\"'nav-link-mobile'\"\n      [link-active-class]=\"'nav-link-mobile-active'\"\n      [container-class]=\"'mobile-menu-link-container'\">\n    </lib-nav-links-list>\n\n    <div *ngIf=\"!user\">\n      <a href=\"#\" (click)=\"signin($event)\" class=\"nav-link-mobile\">\n        <i class=\"ms-Icon ms-Icon--Signin mr-2\"></i>\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7\n      </a>\n    </div>\n\n    <div class=\"mobile-menu-user-info-container\" *ngIf=\"user\">\n      <div class=\"mobile-menu-user-info-container-inner\">\n        <div class=\"flex-shrink-0\">\n          <span class=\"mobile-menu-avatar-container\">\n            <span class=\"mobile-menu-avatar-name\">{{ this.avatarName }}</span>\n          </span>\n        </div>\n        <div class=\"ml-3\">\n          <div class=\"mobile-menu-user-name\">{{ user.profile.name }}</div>\n          <div class=\"mobile-menu-user-email\">{{ user.profile.email }}</div>\n        </div>\n        <button class=\"mobile-menu-rounded-button\">\n          <span class=\"sr-only\">View notifications</span>\n          <!-- Heroicon name: outline/bell -->\n          <svg class=\"mobile-menu-rounded-button-icon-style\"\n               xmlns=\"http://www.w3.org/2000/svg\"\n               fill=\"none\"\n               viewBox=\"0 0 24 24\"\n               stroke=\"currentColor\"\n               aria-hidden=\"true\">\n            <path stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\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\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n\n    <lib-nav-links-list\n          [links]=\"links.profile\"\n          [active-fragment]=\"activeFragment\"\n          [link-class]=\"'nav-link-mobile'\"\n          [link-active-class]=\"'nav-link-mobile-active'\"\n          [container-class]=\"'mobile-menu-link-container'\">\n      </lib-nav-links-list>\n  </div>\n</nav>\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']
+            }], profileMenuVisible: [{
+                type: Input,
+                args: ['profile-menu']
+            }], showUserNameOnHeader: [{
+                type: Input,
+                args: ['show-userName']
+            }], showAlerts: [{
+                type: Input,
+                args: ['show-alerts']
+            }], langs: [{
+                type: Input
+            }], currentLang: [{
+                type: Input,
+                args: ['current-lang']
+            }], border: [{
+                type: Input
+            }] } });
+
+class ShellFooterComponent {
+    constructor(links) {
+        this.links = links;
+    }
+}
+ShellFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ShellFooterComponent, deps: [{ token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
+ShellFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ShellFooterComponent, selector: "lib-shell-footer", ngImport: i0, template: "<footer class=\"shell-footer-component-container\">\n  <div class=\"shell-footer-paddings\">\n    <div class=\"shell-footer-component-container-inner\">\n      <div class=\"shell-footer-sections-container\">\n        <div class=\"shell-footer-section\">\n          <img class=\"shell-footer-logo-h\" src=\"assets/images/branding/indice.png\" alt=\"INDICE logo\" />\n          <nav class=\"mt-4\">\n            <ul class=\"space-y-2\">\n              <ng-container *ngFor=\"let link of links.brand | async\">\n                <li>\n                  <a [href]=\"link.path\" class=\"shell-footer-link\">{{ link.text }}</a>\n                </li>\n              </ng-container>\n            </ul>\n          </nav>\n        </div>\n        <div class=\"shell-footer-section-links\">\n          <h5 class=\"shell-footer-section-title\">Legal</h5>\n          <nav class=\"mt-4\">\n            <ul class=\"grid lg:grid-cols-2\">\n              <ng-container *ngFor=\"let link of links.legal | async\">\n                <li class=\"mb-2\">\n                  <a [href]=\"link.path\" class=\"shell-footer-link\">{{ link.text }}</a>\n                </li>\n              </ng-container>\n            </ul>\n          </nav>\n        </div>\n        <div class=\"shell-footer-section-links\">\n          <h5 class=\"shell-footer-section-title\">Follow us</h5>\n          <nav class=\"mt-4\">\n            <ul class=\"grid lg:grid-cols-2\">\n              <li class=\"mb-2\">\n                <a href=\"#\" class=\"shell-footer-social\">\n                  <svg  class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\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\"/>\n                  </svg>\n                  <span> Twitter </span>\n                </a>\n              </li>\n              <li class=\"mb-2\">\n                <a href=\"#\" class=\"shell-footer-social\">\n                  <svg class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\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\"/>\n                  </svg>\n                  <span> Instagram </span>\n                </a>\n              </li>\n              <li class=\"mb-2\">\n                <a href=\"#\" class=\"shell-footer-social\">\n                  <svg class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\" >\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\"/>\n                  </svg>\n                  <span> Facebook </span>\n                </a>\n              </li>\n            </ul>\n          </nav>\n        </div>\n      </div>\n    </div>\n    <div class=\"shell-footer-copyright\">\n      <!--<nav class=\"flex flex-wrap justify-center space-x-6\">\n      <a href=\"#\" class=\"font-normal text-sm hover:text-gray-100 mb-2\">Cookie settings</a>\n    </nav>-->\n      <p class=\"text-sm text-center sm:text-right\">\n        \u00A9 2021 INDICE. All rights reserved.\n      </p>\n    </div>\n  </div>\n</footer>\n", directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i1.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ShellFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-shell-footer', template: "<footer class=\"shell-footer-component-container\">\n  <div class=\"shell-footer-paddings\">\n    <div class=\"shell-footer-component-container-inner\">\n      <div class=\"shell-footer-sections-container\">\n        <div class=\"shell-footer-section\">\n          <img class=\"shell-footer-logo-h\" src=\"assets/images/branding/indice.png\" alt=\"INDICE logo\" />\n          <nav class=\"mt-4\">\n            <ul class=\"space-y-2\">\n              <ng-container *ngFor=\"let link of links.brand | async\">\n                <li>\n                  <a [href]=\"link.path\" class=\"shell-footer-link\">{{ link.text }}</a>\n                </li>\n              </ng-container>\n            </ul>\n          </nav>\n        </div>\n        <div class=\"shell-footer-section-links\">\n          <h5 class=\"shell-footer-section-title\">Legal</h5>\n          <nav class=\"mt-4\">\n            <ul class=\"grid lg:grid-cols-2\">\n              <ng-container *ngFor=\"let link of links.legal | async\">\n                <li class=\"mb-2\">\n                  <a [href]=\"link.path\" class=\"shell-footer-link\">{{ link.text }}</a>\n                </li>\n              </ng-container>\n            </ul>\n          </nav>\n        </div>\n        <div class=\"shell-footer-section-links\">\n          <h5 class=\"shell-footer-section-title\">Follow us</h5>\n          <nav class=\"mt-4\">\n            <ul class=\"grid lg:grid-cols-2\">\n              <li class=\"mb-2\">\n                <a href=\"#\" class=\"shell-footer-social\">\n                  <svg  class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\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\"/>\n                  </svg>\n                  <span> Twitter </span>\n                </a>\n              </li>\n              <li class=\"mb-2\">\n                <a href=\"#\" class=\"shell-footer-social\">\n                  <svg class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\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\"/>\n                  </svg>\n                  <span> Instagram </span>\n                </a>\n              </li>\n              <li class=\"mb-2\">\n                <a href=\"#\" class=\"shell-footer-social\">\n                  <svg class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\" >\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\"/>\n                  </svg>\n                  <span> Facebook </span>\n                </a>\n              </li>\n            </ul>\n          </nav>\n        </div>\n      </div>\n    </div>\n    <div class=\"shell-footer-copyright\">\n      <!--<nav class=\"flex flex-wrap justify-center space-x-6\">\n      <a href=\"#\" class=\"font-normal text-sm hover:text-gray-100 mb-2\">Cookie settings</a>\n    </nav>-->\n      <p class=\"text-sm text-center sm:text-right\">\n        \u00A9 2021 INDICE. All rights reserved.\n      </p>\n    </div>\n  </div>\n</footer>\n" }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [APP_LINKS]
+                }] }]; } });
+
+class ShellLayoutComponent {
+    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.showRightPaneSM = false;
+        this.routerSub$ = null;
+        this.activeConfig = new DefaultShellConfig();
+        this.loaded = false;
+        if (!config) {
+            config = new DefaultShellConfig();
+        }
+        this.activeConfig = config;
+    }
+    ngAfterViewChecked() {
+        setTimeout(() => { this.loaded = true; }, 200);
+    }
+    ngOnInit() {
+        this.routerSub$ = this.router.events.pipe(filter((event) => event instanceof ActivationStart)).subscribe((e) => {
+            // console.log('ShellLayoutComponent ActivationStart', e);
+            if (e?.snapshot) {
+                // console.log('ShellLayoutComponent ActivationStart snapshot', (e as ActivationStart)?.snapshot);
+                if (e?.snapshot?.data) {
+                    // console.log('ShellLayoutComponent ActivationStart snapshot data', (e as ActivationStart)?.snapshot.data);
+                    if (e?.snapshot?.data.shell) {
+                        // console.log('ShellLayoutComponent ActivationStart snapshot data shell params',
+                        // (e as ActivationStart)?.snapshot.data.shell);
+                        this.activeConfig = e?.snapshot.data.shell;
+                        // console.log('ShellLayoutComponent activeConfig from route: ', this.activeConfig);
+                        if (this.activeConfig.customHeaderComponent) {
+                            this.initCustomComponents();
+                        }
+                    }
+                    else {
+                        this.activeConfig = this.config ? this.config : new DefaultShellConfig();
+                        // console.log('ShellLayoutComponent default activeConfig: ', this.activeConfig);
+                    }
+                }
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this.initCustomComponents();
+    }
+    initCustomComponents() {
+        if (this.dynamicComponentHosts && this.dynamicComponentHosts.length > 0) {
+            this.loadCustomComponent(this.dynamicComponentHosts.find((_) => _.hostName === 'Header'));
+            // since you're not using it...
+            // this.loadCustomComponent(this.dynamicComponentHosts.find(_ => _.hostName === 'Footer'));
+        }
+    }
+    ngOnDestroy() {
+        if (this.routerSub$) {
+            this.routerSub$.unsubscribe();
+        }
+    }
+    loadCustomComponent(host) {
+        if (host) {
+            const viewContainerRef = host.viewContainerRef;
+            if (viewContainerRef && this.activeConfig.customHeaderComponent) {
+                const clf = this.componentLoaderFactory.createLoader(viewContainerRef);
+                const headerCompRef = clf.attach(this.activeConfig.customHeaderComponent).to(viewContainerRef.element).show();
+            }
+        }
+    }
+}
+ShellLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", 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: "12.0.0", version: "13.3.9", type: ShellLayoutComponent, selector: "lib-shell-layout", viewQueries: [{ propertyName: "dynamicComponentHosts", predicate: DynamicComponentHostDirective, descendants: true }], ngImport: i0, template: "<div *ngIf=\"loaded\" [style.display]=\"!loaded ? 'none':'block'\" class=\"shell-container active-side-pane\">\n\n  <div class=\"shell-header-container\" *ngIf=\"activeConfig.showHeader\">\n    <div [class]=\"activeConfig.fluid ? 'shell-header-container-inner-fluid' : 'shell-header-container-inner'\">\n      <ng-container *ngIf=\"activeConfig.customHeaderComponent\">\n        <div appDynamicComponentHost =\"Header\"></div>\n      </ng-container>\n      <lib-shell-header *ngIf=\"!activeConfig.customHeaderComponent\"\n        [langs]=\"activeConfig.langs\"\n        [show-userName]=\"activeConfig.showUserNameOnHeader\"\n        [show-alerts]=\"activeConfig.showAlertsOnHeader\"></lib-shell-header>\n    </div>\n  </div>\n\n  <main [class]=\"activeConfig.showHeader ? 'shell-content-container' : 'shell-content-container-no-header'\">\n    <div [class]=\"activeConfig.fluid ? 'shell-content-container-inner-fluid' : 'shell-content-container-inner'\">\n      <router-outlet></router-outlet>\n    </div>\n  </main>\n\n  <div class=\"shell-footer-container\" *ngIf=\"activeConfig.showFooter\">\n    <div [class]=\"activeConfig.fluid ? 'shell-footer-container-inner-fluid' : 'shell-footer-container-inner'\">\n      <ng-container *ngIf=\"activeConfig.customFooterComponent\">\n        <div appDynamicComponentHost hostName=\"Footer\"></div>\n      </ng-container>\n      <lib-shell-footer *ngIf=\"!activeConfig.customFooterComponent\"></lib-shell-footer>\n    </div>\n  </div>\n\n  <lib-side-pane #rightPane>\n    <router-outlet name=\"rightpane\" (activate)=\"rightPane.onSidePaneActivated($event)\" (deactivate)=\"rightPane.onSidePaneDeactivated($event)\"></router-outlet>\n  </lib-side-pane>\n\n  <lib-toaster-container></lib-toaster-container>\n\n</div>\n", components: [{ type: ShellHeaderComponent, selector: "lib-shell-header", inputs: ["section-links", "profile-menu", "show-userName", "show-alerts", "langs", "current-lang", "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", "attach", "detach"], exportAs: ["outlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ShellLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-shell-layout', template: "<div *ngIf=\"loaded\" [style.display]=\"!loaded ? 'none':'block'\" class=\"shell-container active-side-pane\">\n\n  <div class=\"shell-header-container\" *ngIf=\"activeConfig.showHeader\">\n    <div [class]=\"activeConfig.fluid ? 'shell-header-container-inner-fluid' : 'shell-header-container-inner'\">\n      <ng-container *ngIf=\"activeConfig.customHeaderComponent\">\n        <div appDynamicComponentHost =\"Header\"></div>\n      </ng-container>\n      <lib-shell-header *ngIf=\"!activeConfig.customHeaderComponent\"\n        [langs]=\"activeConfig.langs\"\n        [show-userName]=\"activeConfig.showUserNameOnHeader\"\n        [show-alerts]=\"activeConfig.showAlertsOnHeader\"></lib-shell-header>\n    </div>\n  </div>\n\n  <main [class]=\"activeConfig.showHeader ? 'shell-content-container' : 'shell-content-container-no-header'\">\n    <div [class]=\"activeConfig.fluid ? 'shell-content-container-inner-fluid' : 'shell-content-container-inner'\">\n      <router-outlet></router-outlet>\n    </div>\n  </main>\n\n  <div class=\"shell-footer-container\" *ngIf=\"activeConfig.showFooter\">\n    <div [class]=\"activeConfig.fluid ? 'shell-footer-container-inner-fluid' : 'shell-footer-container-inner'\">\n      <ng-container *ngIf=\"activeConfig.customFooterComponent\">\n        <div appDynamicComponentHost hostName=\"Footer\"></div>\n      </ng-container>\n      <lib-shell-footer *ngIf=\"!activeConfig.customFooterComponent\"></lib-shell-footer>\n    </div>\n  </div>\n\n  <lib-side-pane #rightPane>\n    <router-outlet name=\"rightpane\" (activate)=\"rightPane.onSidePaneActivated($event)\" (deactivate)=\"rightPane.onSidePaneDeactivated($event)\"></router-outlet>\n  </lib-side-pane>\n\n  <lib-toaster-container></lib-toaster-container>\n\n</div>\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]
+            }] } });
+
+class ViewLayoutComponent {
+    constructor(route$, router$) {
+        this.route$ = route$;
+        this.router$ = router$;
+        // tslint:disable-next-line:no-input-rename
+        this.header = true;
+        this.fluid = false;
+        this.title = 'no title';
+        this.icon = null;
+        this.actions = null;
+        this.busy = false;
+        // tslint:disable-next-line:no-input-rename
+        this.searchPlaceholder = 'αναζήτηση';
+        this.view = null;
+        // tslint:disable-next-line:no-input-rename
+        this.metaItems = [];
+        // tslint:disable-next-line:no-output-on-prefix
+        this.onAction = new EventEmitter();
+        // tslint:disable-next-line:no-output-on-prefix
+        this.onSearch = new EventEmitter();
+    }
+    ngOnInit() {
+        if (this.searchInput$?.nativeElement) {
+            fromEvent(this.searchInput$.nativeElement, 'keyup').pipe(map((event) => {
+                return event.target.value; // Get input value.
+            }), filter(inputValue => inputValue.length >= 3 || inputValue.length === 0), 
+            // If character length greater than minimumSearchCharacters setting.
+            debounceTime(1000), // Time in milliseconds between key events.
+            distinctUntilChanged() // If previous query is different from current.
+            ).subscribe();
+        }
+    }
+    emitActionClick(action) {
+        this.onAction.emit(action);
+    }
+    routerLinkActionClick(action) {
+        // console.log('routerLinkActionClick', action);
+        if (action.outlet) {
+            this.router$.navigate(['', { outlets: { rightpane: action.link } }]);
+        }
+        else {
+            this.router$.navigate([action.link]);
+        }
+    }
+    searchActionClick(action, text) {
+        this.onSearch.emit(text);
+    }
+    searchActionType(text) {
+        this.onSearch.emit(this.searchInput$?.nativeElement.value);
+    }
+    handleClear(event) {
+        console.log('handle clear!!!');
+        event.stopPropagation();
+        this.onSearch.emit(event.target?.value);
+    }
+    switchViewActionClick(action) {
+        // console.log('switchViewActionClick', action);
+        this.view = action.param;
+        if (action && action.param) {
+            this.router$.navigate([], { queryParams: { view: action.param }, queryParamsHandling: 'merge', skipLocationChange: false });
+        }
+    }
+}
+ViewLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", 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: "13.3.9", 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\">\n\n  <div class=\"view-layout-title-container\">\n\n    <div class=\"view-layout-title-container-inner\">\n      <div class=\"flex items-center\">\n        <i *ngIf=\"icon\" [class]=\"icon + ' title-icon'\" aria-hidden=\"true\"></i>\n        <h1 [class]=\"busy ? 'view-layout-title-busy' : 'view-layout-title'\">{{title}}</h1>\n      </div>\n      <div *ngIf=\"metaItems && metaItems.length > 0\" class=\"meta-container\">\n        <ng-container *ngFor=\"let meta of metaItems\">\n          <div class=\"meta-item-container\">\n            <i *ngIf=\"meta.icon\" [class]=\"meta.icon + ' meta-icon'\" aria-hidden=\"true\"></i>\n            <span class=\"meta-text\">{{meta.text}}</span>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <div class=\"flex items-center justify-end\">\n      <ng-container *ngFor=\"let action of actions\"  [ngSwitch]=\"action.type\">\n\n        <ng-container *ngSwitchCase=\"'switch-view'\">\n          <button [disabled]=\"view === action.param\" type=\"button\" href=\"#\" class=\"ml-1 disabled:opacity-50 btn-view-header\" (click)=\"switchViewActionClick(action)\">\n            <span class=\"inline-block relative\">\n              <i [class]=\"action.icon\"></i>\n              <span *ngIf=\"view === action.param\" class=\"selected-view-indicator\"></span>\n            </span>\n          </button>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'search'\">\n          <label for=\"search\" class=\"sr-only\">Search</label>\n          <div class=\"search-container\">\n            <div class=\"pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center\">\n              <!--<svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\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\" />\n              </svg>-->\n            </div>\n            <input id=\"search\" #search class=\"search-input\" [placeholder]=\"searchPlaceholder\"\n                   type=\"search\" name=\"search\" (input)=\"searchActionType(search.value)\" (onsearch)=\"handleClear($event)\">\n          </div>\n          <button type=\"button\"  href=\"#\" class=\"btn-view-header rounded-l-none\" [title]=\"action.tooltip\" (click)=\"searchActionClick(action, search.value)\">\n            <i [class]=\"action.icon\"></i>\n          </button>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'router-link'\">\n          <button type=\"button\"  href=\"#\" class=\"ml-1 btn-view-header\" [title]=\"action.tooltip\" (click)=\"routerLinkActionClick(action)\">\n            <i [class]=\"action.icon\"></i>\n          </button>\n        </ng-container>\n\n\n        <ng-container *ngSwitchDefault>\n          <button type=\"button\"  class=\"ml-1 btn-view-header\" [title]=\"action.tooltip\" (click)=\"emitActionClick(action)\">\n            <i [class]=\"action.icon\"></i>\n          </button>\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n</header>\n\n<!-- component -->\n<div [class]=\"fluid ? 'view-container-fluid' : 'view-container'\">\n  <ng-content></ng-content>\n</div>\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: "13.3.9", ngImport: i0, type: ViewLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-view-layout', template: "<header *ngIf=\"header\" class=\"view-layout-paddings\">\n\n  <div class=\"view-layout-title-container\">\n\n    <div class=\"view-layout-title-container-inner\">\n      <div class=\"flex items-center\">\n        <i *ngIf=\"icon\" [class]=\"icon + ' title-icon'\" aria-hidden=\"true\"></i>\n        <h1 [class]=\"busy ? 'view-layout-title-busy' : 'view-layout-title'\">{{title}}</h1>\n      </div>\n      <div *ngIf=\"metaItems && metaItems.length > 0\" class=\"meta-container\">\n        <ng-container *ngFor=\"let meta of metaItems\">\n          <div class=\"meta-item-container\">\n            <i *ngIf=\"meta.icon\" [class]=\"meta.icon + ' meta-icon'\" aria-hidden=\"true\"></i>\n            <span class=\"meta-text\">{{meta.text}}</span>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <div class=\"flex items-center justify-end\">\n      <ng-container *ngFor=\"let action of actions\"  [ngSwitch]=\"action.type\">\n\n        <ng-container *ngSwitchCase=\"'switch-view'\">\n          <button [disabled]=\"view === action.param\" type=\"button\" href=\"#\" class=\"ml-1 disabled:opacity-50 btn-view-header\" (click)=\"switchViewActionClick(action)\">\n            <span class=\"inline-block relative\">\n              <i [class]=\"action.icon\"></i>\n              <span *ngIf=\"view === action.param\" class=\"selected-view-indicator\"></span>\n            </span>\n          </button>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'search'\">\n          <label for=\"search\" class=\"sr-only\">Search</label>\n          <div class=\"search-container\">\n            <div class=\"pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center\">\n              <!--<svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\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\" />\n              </svg>-->\n            </div>\n            <input id=\"search\" #search class=\"search-input\" [placeholder]=\"searchPlaceholder\"\n                   type=\"search\" name=\"search\" (input)=\"searchActionType(search.value)\" (onsearch)=\"handleClear($event)\">\n          </div>\n          <button type=\"button\"  href=\"#\" class=\"btn-view-header rounded-l-none\" [title]=\"action.tooltip\" (click)=\"searchActionClick(action, search.value)\">\n            <i [class]=\"action.icon\"></i>\n          </button>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'router-link'\">\n          <button type=\"button\"  href=\"#\" class=\"ml-1 btn-view-header\" [title]=\"action.tooltip\" (click)=\"routerLinkActionClick(action)\">\n            <i [class]=\"action.icon\"></i>\n          </button>\n        </ng-container>\n\n\n        <ng-container *ngSwitchDefault>\n          <button type=\"button\"  class=\"ml-1 btn-view-header\" [title]=\"action.tooltip\" (click)=\"emitActionClick(action)\">\n            <i [class]=\"action.icon\"></i>\n          </button>\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n</header>\n\n<!-- component -->\n<div [class]=\"fluid ? 'view-container-fluid' : 'view-container'\">\n  <ng-content></ng-content>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }]; }, propDecorators: { searchInput$: [{
+                type: ViewChild,
+                args: ['search']
+            }], header: [{
+                type: Input,
+                args: ['show-header']
+            }], fluid: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], busy: [{
+                type: Input
+            }], searchPlaceholder: [{
+                type: Input,
+                args: ['search-placeholder']
+            }], view: [{
+                type: Input
+            }], metaItems: [{
+                type: Input,
+                args: ['meta-items']
+            }], onAction: [{
+                type: Output
+            }], onSearch: [{
+                type: Output
+            }] } });
+
+class ModelViewLayoutComponent {
+    constructor(location) {
+        this.location = location;
+        this.showRightPaneSM = false;
+        this.title = 'no title';
+        // tslint:disable-next-line:no-input-rename
+        this.primary = null;
+        // tslint:disable-next-line:no-input-rename
+        this.secondary = null;
+        // tslint:disable-next-line:no-input-rename
+        this.metaItems = [
+        // { key: 'test', icon: Icons.Badges, text: 'βρέθηκαν 200 αποτελέσματα' }
+        ];
+    }
+    ngOnInit() {
+    }
+    onSidePaneActivated($event) {
+        this.showRightPaneSM = true;
+    }
+    onSidePaneDeactivated($event) {
+        this.showRightPaneSM = false;
+    }
+    closeSidePane() {
+        this.location.back();
+    }
+}
+ModelViewLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModelViewLayoutComponent, deps: [{ token: i1.Location }], target: i0.ɵɵFactoryTarget.Component });
+ModelViewLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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\">\n  <main class=\"model-view-container\">\n    <div class=\"model-view-container-inner\">\n      <aside class=\"model-view-aside\">\n        <section aria-labelledby=\"menu\" class=\"details-view-aside-header-section\">\n          <div class=\"model-view-aside-header-container\">\n            <div class=\"model-view-aside-header-container-inner\">\n              <ng-content></ng-content>\n            </div>\n            <!-- menu items -->\n            <div class=\"model-view-menu-container\">\n              <nav class=\"model-view-menu-nav\">\n                <div class=\"model-view-menu-item\">\n                  <ng-container *ngFor=\"let section of primary\">\n                    <a href=\"#\"\n                       [routerLinkActive]=\"['view-nav-link-active']\"\n                       [routerLink]=\"section.link\"\n                       class=\"view-nav-link\">\n                      {{section.text}}\n                    </a>\n                  </ng-container>\n                </div>\n                <div class=\"model-view-menu-item-far\">\n                  <ng-container *ngFor=\"let section of secondary\">\n                    <a href=\"#\"\n                       [routerLinkActive]=\"['view-nav-link-active']\"\n                       [routerLinkActiveOptions]=\"{ exact: true }\"\n                       [routerLink]=\"section.link\"\n                       class=\"view-nav-link\">\n                      {{section.text}}\n                    </a>\n                  </ng-container>\n                </div>\n              </nav>\n            </div>\n          </div>\n        </section>\n      </aside>\n      <div class=\"model-view-details-container\">\n        <router-outlet></router-outlet>\n      </div>\n    </div>\n  </main>\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: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModelViewLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-model-view-layout', template: "<lib-view-layout [title]=\"title\" [meta-items]=\"metaItems\">\n  <main class=\"model-view-container\">\n    <div class=\"model-view-container-inner\">\n      <aside class=\"model-view-aside\">\n        <section aria-labelledby=\"menu\" class=\"details-view-aside-header-section\">\n          <div class=\"model-view-aside-header-container\">\n            <div class=\"model-view-aside-header-container-inner\">\n              <ng-content></ng-content>\n            </div>\n            <!-- menu items -->\n            <div class=\"model-view-menu-container\">\n              <nav class=\"model-view-menu-nav\">\n                <div class=\"model-view-menu-item\">\n                  <ng-container *ngFor=\"let section of primary\">\n                    <a href=\"#\"\n                       [routerLinkActive]=\"['view-nav-link-active']\"\n                       [routerLink]=\"section.link\"\n                       class=\"view-nav-link\">\n                      {{section.text}}\n                    </a>\n                  </ng-container>\n                </div>\n                <div class=\"model-view-menu-item-far\">\n                  <ng-container *ngFor=\"let section of secondary\">\n                    <a href=\"#\"\n                       [routerLinkActive]=\"['view-nav-link-active']\"\n                       [routerLinkActiveOptions]=\"{ exact: true }\"\n                       [routerLink]=\"section.link\"\n                       class=\"view-nav-link\">\n                      {{section.text}}\n                    </a>\n                  </ng-container>\n                </div>\n              </nav>\n            </div>\n          </div>\n        </section>\n      </aside>\n      <div class=\"model-view-details-container\">\n        <router-outlet></router-outlet>\n      </div>\n    </div>\n  </main>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.Location }]; }, propDecorators: { title: [{
+                type: Input
+            }], primary: [{
+                type: Input,
+                args: ['primary-links']
+            }], secondary: [{
+                type: Input,
+                args: ['secondary-links']
+            }], metaItems: [{
+                type: Input,
+                args: ['meta-items']
+            }] } });
+
+class SideViewLayoutComponent {
+    constructor(location, router) {
+        this.location = location;
+        this.router = router;
+        this.title = 'Πληροφορίες';
+        this.showActions = true;
+        this.disabled = false;
+        // tslint:disable-next-line:no-input-rename
+        this.okLabel = 'Αποθήκευση';
+        // tslint:disable-next-line:no-input-rename
+        this.okShow = true;
+        // tslint:disable-next-line:no-input-rename
+        this.closeOnOk = true;
+        // tslint:disable-next-line:no-input-rename
+        this.cancelLabel = 'Ακύρωση';
+        // tslint:disable-next-line:no-input-rename
+        this.cancelShow = true;
+        // tslint:disable-next-line:no-input-rename
+        this.forceLocationBack = false;
+        // @Output() close = new EventEmitter<any>();
+        this.cancel = new EventEmitter();
+        this.ok = new EventEmitter();
+    }
+    ngOnInit() {
+    }
+    closeSidePane() {
+        if (this.returnPath) {
+            this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => this.router.navigateByUrl(this.returnPath || '/'));
+        }
+        else {
+            if ((this.router.url.split('/(')[0] !== this.router.url) && !this.forceLocationBack) {
+                this.router.navigateByUrl(this.router.url.split('/(')[0]);
+            }
+            else if ((this.router.url.split('(')[0] !== this.router.url) && !this.forceLocationBack) {
+                this.router.navigateByUrl(this.router.url.split('(')[0]);
+            }
+            else {
+                this.location.back();
+            }
+        }
+    }
+    emitClose() {
+        this.cancel.emit(false);
+        this.closeSidePane();
+    }
+    emitCancel() {
+        this.cancel.emit(false);
+        this.closeSidePane();
+    }
+    emitOK() {
+        this.ok.emit(true);
+        if (this.closeOnOk) {
+            this.closeSidePane();
+        }
+    }
+}
+SideViewLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", 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: "13.3.9", 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\">\n  <div class=\"side-view-layout-container\">\n    <div class=\"side-view-layout-container-inner\">\n      <div class=\"side-view-layout-header-margins\">\n        <div class=\"side-view-layout-header-container\">\n          <h2 class=\"side-view-layout-header-title\" id=\"slide-over-title\">\n            {{title}}\n          </h2>\n          <div class=\"side-view-layout-close-button-container\">\n            <button (click)=\"emitClose()\" class=\"side-view-layout-close-button\">\n              <span class=\"sr-only\">Close panel</span>\n              <!-- Heroicon name: outline/x -->\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\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n      </div>\n      <div class=\"side-view-layout-content-container\">\n        <!-- Replace with your content -->\n        <ng-content></ng-content>\n        <!-- /End replace -->\n      </div>\n    </div>\n    <div *ngIf=\"showActions\" class=\"side-view-layout-actions-container\">\n      <button *ngIf=\"cancelShow\" (click)=\"emitCancel()\" type=\"button\" class=\"side-view-layout-action-button-cancel\">\n        {{cancelLabel}}\n      </button>\n      <button *ngIf=\"okShow\" (click)=\"emitOK()\" class=\"side-view-layout-action-button-submit\" [disabled]=\"disabled\">\n        {{okLabel}}\n      </button>\n    </div>\n  </div>\n</div>\n\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SideViewLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-side-view-layout', template: "<div class=\"side-view-layout-size-box\">\n  <div class=\"side-view-layout-container\">\n    <div class=\"side-view-layout-container-inner\">\n      <div class=\"side-view-layout-header-margins\">\n        <div class=\"side-view-layout-header-container\">\n          <h2 class=\"side-view-layout-header-title\" id=\"slide-over-title\">\n            {{title}}\n          </h2>\n          <div class=\"side-view-layout-close-button-container\">\n            <button (click)=\"emitClose()\" class=\"side-view-layout-close-button\">\n              <span class=\"sr-only\">Close panel</span>\n              <!-- Heroicon name: outline/x -->\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\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n      </div>\n      <div class=\"side-view-layout-content-container\">\n        <!-- Replace with your content -->\n        <ng-content></ng-content>\n        <!-- /End replace -->\n      </div>\n    </div>\n    <div *ngIf=\"showActions\" class=\"side-view-layout-actions-container\">\n      <button *ngIf=\"cancelShow\" (click)=\"emitCancel()\" type=\"button\" class=\"side-view-layout-action-button-cancel\">\n        {{cancelLabel}}\n      </button>\n      <button *ngIf=\"okShow\" (click)=\"emitOK()\" class=\"side-view-layout-action-button-submit\" [disabled]=\"disabled\">\n        {{okLabel}}\n      </button>\n    </div>\n  </div>\n</div>\n\n" }]
+        }], ctorParameters: function () { return [{ type: i1.Location }, { type: i1$1.Router }]; }, propDecorators: { title: [{
+                type: Input
+            }], showActions: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], returnPath: [{
+                type: Input,
+                args: ['return-path']
+            }], okLabel: [{
+                type: Input,
+                args: ['ok-label']
+            }], okShow: [{
+                type: Input,
+                args: ['ok-show']
+            }], closeOnOk: [{
+                type: Input,
+                args: ['ok-close-dialog']
+            }], cancelLabel: [{
+                type: Input,
+                args: ['cancel-label']
+            }], cancelShow: [{
+                type: Input,
+                args: ['cancel-show']
+            }], forceLocationBack: [{
+                type: Input,
+                args: ['force-location-back']
+            }], cancel: [{
+                type: Output
+            }], ok: [{
+                type: Output
+            }] } });
+
+class FormLayoutComponent {
+    constructor(router$) {
+        this.router$ = router$;
+        this.title = null;
+        // tslint:disable-next-line:no-input-rename
+        this.searchPlaceholder = 'αναζήτηση';
+        this.actions = null;
+        // tslint:disable-next-line:no-input-rename
+        this.subTitle = null;
+        // tslint:disable-next-line:no-output-on-prefix
+        this.onAction = new EventEmitter();
+        // tslint:disable-next-line:no-output-on-prefix
+        this.onSearch = new EventEmitter();
+        this.onComplete = new EventEmitter();
+    }
+    ngOnInit() {
+        if (this.searchInput$?.nativeElement) {
+            fromEvent(this.searchInput$.nativeElement, 'keyup').pipe(map((event) => {
+                return event.target.value; // Get input value.
+            }), filter(inputValue => inputValue.length >= 3 || inputValue.length === 0), 
+            // If character length greater than minimumSearchCharacters setting.
+            debounceTime(1000), // Time in milliseconds between key events.
+            distinctUntilChanged() // If previous query is different from current.
+            ).subscribe();
+        }
+    }
+    onSidePaneDeactivated($event) {
+        this.onComplete.emit(true);
+    }
+    emitActionClick(action) {
+        this.onAction.emit(action);
+    }
+    searchActionClick(action, text) {
+        this.onSearch.emit(text);
+    }
+    searchActionType(text) {
+        this.onSearch.emit(this.searchInput$?.nativeElement.value);
+    }
+    routerLinkActionClick(action, relative = false) {
+        if (action.outlet) {
+            this.router$.navigate(['', { outlets: { formRightPane: action.link } }]);
+        }
+        else {
+            this.router$.navigate([action.link]);
+        }
+    }
+}
+FormLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FormLayoutComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+FormLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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\">\n  <div class=\"form-header\" *ngIf=\"title || subTitle || actions\">\n    <div class=\"form-header-inner\">\n      <h3 class=\"form-title\">\n        {{ title }}\n      </h3>\n      <p class=\"form-subtitle\">\n        {{ subTitle }}\n      </p>\n    </div>\n    <div class=\"form-header-actions\">\n      <ng-container *ngFor=\"let action of actions\" [ngSwitch]=\"action.type\">\n        <ng-container *ngSwitchCase=\"'search'\">\n          <label for=\"search\" class=\"sr-only\">Search</label>\n          <div class=\"search-container\">\n            <div class=\"pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center\">\n              <!--<svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\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\" />\n                          </svg>-->\n            </div>\n            <input id=\"search\"\n                   #search\n                   class=\"form-search-input\"\n                   [placeholder]=\"searchPlaceholder\"\n                   type=\"search\"\n                   name=\"search\"\n                   (input)=\"searchActionType(search.value)\">\n          </div>\n          <button type=\"button\"\n                  href=\"#\"\n                  class=\"btn-form-view-header-search\"\n                  [title]=\"action.tooltip\"\n                  (click)=\"searchActionClick(action, search.value)\">\n            <i [class]=\"action.icon\"></i>\n          </button>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'router-link'\">\n          <button type=\"button\"\n                  href=\"#\"\n                  class=\"ml-1 btn-form-view-header\"\n                  [title]=\"action.tooltip\"\n                  (click)=\"routerLinkActionClick(action)\">\n            <i [class]=\"action.icon\"></i>\n          </button>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          <button type=\"button\"\n                  class=\"ml-1 btn-form-view-header\"\n                  [title]=\"action.tooltip\"\n                  (click)=\"emitActionClick(action)\">\n            <i [class]=\"action.icon\"></i>\n          </button>\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"form-content-container\">\n    <div [ngClass]=\"{'form-content-container-inner': actions}\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n  <lib-side-pane #formPane (onComplete)=\"onSidePaneDeactivated($event)\">\n    <router-outlet name=\"formRightPane\"\n                   (activate)=\"formPane.onSidePaneActivated($event)\"\n                   (deactivate)=\"formPane.onSidePaneDeactivated($event)\"></router-outlet>\n  </lib-side-pane>\n</div>\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", "attach", "detach"], exportAs: ["outlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FormLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-form-layout', template: "<div class=\"form-layout-container\">\n  <div class=\"form-header\" *ngIf=\"title || subTitle || actions\">\n    <div class=\"form-header-inner\">\n      <h3 class=\"form-title\">\n        {{ title }}\n      </h3>\n      <p class=\"form-subtitle\">\n        {{ subTitle }}\n      </p>\n    </div>\n    <div class=\"form-header-actions\">\n      <ng-container *ngFor=\"let action of actions\" [ngSwitch]=\"action.type\">\n        <ng-container *ngSwitchCase=\"'search'\">\n          <label for=\"search\" class=\"sr-only\">Search</label>\n          <div class=\"search-container\">\n            <div class=\"pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center\">\n              <!--<svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\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\" />\n                          </svg>-->\n            </div>\n            <input id=\"search\"\n                   #search\n                   class=\"form-search-input\"\n                   [placeholder]=\"searchPlaceholder\"\n                   type=\"search\"\n                   name=\"search\"\n                   (input)=\"searchActionType(search.value)\">\n          </div>\n          <button type=\"button\"\n                  href=\"#\"\n                  class=\"btn-form-view-header-search\"\n                  [title]=\"action.tooltip\"\n                  (click)=\"searchActionClick(action, search.value)\">\n            <i [class]=\"action.icon\"></i>\n          </button>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'router-link'\">\n          <button type=\"button\"\n                  href=\"#\"\n                  class=\"ml-1 btn-form-view-header\"\n                  [title]=\"action.tooltip\"\n                  (click)=\"routerLinkActionClick(action)\">\n            <i [class]=\"action.icon\"></i>\n          </button>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          <button type=\"button\"\n                  class=\"ml-1 btn-form-view-header\"\n                  [title]=\"action.tooltip\"\n                  (click)=\"emitActionClick(action)\">\n            <i [class]=\"action.icon\"></i>\n          </button>\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"form-content-container\">\n    <div [ngClass]=\"{'form-content-container-inner': actions}\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n  <lib-side-pane #formPane (onComplete)=\"onSidePaneDeactivated($event)\">\n    <router-outlet name=\"formRightPane\"\n                   (activate)=\"formPane.onSidePaneActivated($event)\"\n                   (deactivate)=\"formPane.onSidePaneDeactivated($event)\"></router-outlet>\n  </lib-side-pane>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$1.Router }]; }, propDecorators: { searchInput$: [{
+                type: ViewChild,
+                args: ['search']
+            }], title: [{
+                type: Input
+            }], searchPlaceholder: [{
+                type: Input,
+                args: ['search-placeholder']
+            }], actions: [{
+                type: Input
+            }], subTitle: [{
+                type: Input,
+                args: ['sub-title']
+            }], onAction: [{
+                type: Output
+            }], onSearch: [{
+                type: Output
+            }], onComplete: [{
+                type: Output
+            }] } });
+
+class AuthCallbackComponent {
+    constructor(authService, router) {
+        this.authService = authService;
+        this.router = router;
+        this.status = 'παρακαλώ περιμένετε...';
+    }
+    ngOnInit() {
+        this.authService.signinRedirectCallback().subscribe((user) => {
+            if (user) {
+                this.router.navigateByUrl(user.state?.url || '/');
+            }
+        });
+    }
+}
+AuthCallbackComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AuthCallbackComponent, deps: [{ token: AuthService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+AuthCallbackComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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: "13.3.9", ngImport: i0, type: AuthCallbackComponent, decorators: [{
+            type: Component,
+            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) {
+        this.authService = authService;
+        this.router = router;
+    }
+    ngOnInit() {
+        this.authService.signinSilentCallback().subscribe(user => {
+            if (!user) {
+                this.router.navigate(['/unauthorized']);
+            }
+        });
+    }
+}
+AuthRenewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AuthRenewComponent, deps: [{ token: AuthService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+AuthRenewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AuthRenewComponent, selector: "lib-auth-renew", ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", 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 }]; } });
+
+class LoggedOutComponent {
+    constructor(authService) {
+        this.authService = authService;
+        this.status = 'working on it, please give me a sec...';
+        this.finished = false;
+    }
+    ngOnInit() {
+        this.authService.removeUser().subscribe(() => {
+            this.status = 'Thank you!';
+            this.finished = true;
+        });
+    }
+}
+LoggedOutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: LoggedOutComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
+LoggedOutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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: "13.3.9", ngImport: i0, type: LoggedOutComponent, decorators: [{
+            type: Component,
+            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() {
+        this.error = 'Error!';
+    }
+    ngOnInit() {
+    }
+}
+ErrorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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!\">\n  <div class=\"bg-gray-600 view-container\">\n    <div class=\"max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\n      <h2 class=\"text-3xl font-extrabold text-white sm:text-4xl\">\n        <span class=\"block\">500</span>\n      </h2>\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>\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\">\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\n      </a>\n    </div>\n  </div>\n</lib-view-layout>\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: "13.3.9", ngImport: i0, type: ErrorComponent, decorators: [{
+            type: Component,
+            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!\">\n  <div class=\"bg-gray-600 view-container\">\n    <div class=\"max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\n      <h2 class=\"text-3xl font-extrabold text-white sm:text-4xl\">\n        <span class=\"block\">500</span>\n      </h2>\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>\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\">\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\n      </a>\n    </div>\n  </div>\n</lib-view-layout>\n" }]
+        }] });
+
+class PageNotFoundComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+}
+PageNotFoundComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PageNotFoundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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!\">\n  <div class=\"text-gray-900\">\n    <div class=\"max-w-4xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\n      <h2 class=\"text-3xl font-extrabold sm:text-4xl\">\n        <span class=\"block\">404</span>\n      </h2>\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>\n      <a href=\"/\"\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\">\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\n      </a>\n    </div>\n  </div>\n</lib-view-layout>\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: "13.3.9", ngImport: i0, type: PageNotFoundComponent, decorators: [{
+            type: Component,
+            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!\">\n  <div class=\"text-gray-900\">\n    <div class=\"max-w-4xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\n      <h2 class=\"text-3xl font-extrabold sm:text-4xl\">\n        <span class=\"block\">404</span>\n      </h2>\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>\n      <a href=\"/\"\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\">\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\n      </a>\n    </div>\n  </div>\n</lib-view-layout>\n" }]
+        }], ctorParameters: function () { return []; } });
+
+class UnauthorizedComponent {
+    constructor() { }
+    ngOnInit() { }
+}
+UnauthorizedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: UnauthorizedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+UnauthorizedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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!\">\n  <div class=\"bg-gray-600 view-container\">\n    <div class=\"max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\n      <h2 class=\"text-3xl font-extrabold text-white sm:text-4xl\">\n        <span class=\"block\">401</span>\n      </h2>\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>\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\">\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\n      </a>\n    </div>\n  </div>\n  </lib-view-layout>\n\n\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: "13.3.9", ngImport: i0, type: UnauthorizedComponent, decorators: [{
+            type: Component,
+            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!\">\n  <div class=\"bg-gray-600 view-container\">\n    <div class=\"max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\n      <h2 class=\"text-3xl font-extrabold text-white sm:text-4xl\">\n        <span class=\"block\">401</span>\n      </h2>\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>\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\">\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\n      </a>\n    </div>\n  </div>\n  </lib-view-layout>\n\n\n" }]
+        }], ctorParameters: function () { return []; } });
+
+class AddressPipe {
+    transform(value) {
+        if (value === undefined || null || '') {
+            return '';
+        }
+        // tslint:disable-next-line:no-non-null-assertion
+        return `${value.street || ''}${value.streetNumber ? ' ' + value.streetNumber : ''}${value.city ? ', ' + value.city : ''}${+value.postalCode ? ', ' + +value.postalCode : ''}`;
+    }
+}
+AddressPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AddressPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+AddressPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AddressPipe, name: "address", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AddressPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'address',
+                    pure: false
+                }]
+        }] });
+
+class DurationFormatPipe {
+    transform(value, arg1, arg2) {
+        let days;
+        let seconds;
+        let minutes;
+        let hours;
+        if (arg1 === 'ms' && arg2 === 'hhmmss') {
+            seconds = Math.floor((value / 1000) % 60);
+            minutes = Math.floor(((value / (1000 * 60)) % 60));
+            hours = Math.floor((value / (1000 * 60 * 60)));
+            return this.format(arg2, seconds, minutes, hours, days);
+        }
+        else if (arg1 === 's' && arg2 === 'hhmmss') {
+            seconds = Math.floor((value % 60));
+            minutes = Math.floor(((value / 60) % 60));
+            hours = Math.floor(((value / 60) / 60));
+            return this.format(arg2, seconds, minutes, hours, days);
+        }
+        else if (arg1 === 'ms' && (arg2 === 'ddhhmmss' || arg2 === 'ddhhmmssLong')) {
+            seconds = Math.floor(((value / 1000) % 60));
+            minutes = Math.floor((value / (1000 * 60) % 60));
+            hours = Math.floor((value / (1000 * 60 * 60) % 24));
+            days = Math.floor((value / (1000 * 60 * 60 * 24)));
+            return this.format(arg2, seconds, minutes, hours, days);
+        }
+        else if (arg1 === 's' && (arg2 === 'ddhhmmss' || arg2 === 'ddhhmmssLong')) {
+            seconds = Math.floor(value % 60);
+            minutes = Math.floor(((value / 60) % 60));
+            hours = Math.floor(((value / 60) / 60) % 24);
+            days = Math.floor((((value / 60) / 60) / 24));
+            return this.format(arg2, seconds, minutes, hours, days);
+        }
+        else {
+            return value;
+        }
+    }
+    format(arg2, seconds, minutes, hours, days) {
+        (days < 10) ? days = '0' + days : days;
+        (hours < 10) ? hours = '0' + hours : hours;
+        (minutes < 10) ? minutes = '0' + minutes : minutes;
+        (seconds < 10) ? seconds = '0' + seconds : seconds;
+        switch (arg2) {
+            case 'hhmmss':
+                return `${hours}:${minutes}:${seconds}`;
+            case 'ddhhmmss':
+                return `${days}d, ${hours}h, ${minutes}m, ${seconds}s`;
+            case 'ddhhmmssLong':
+                return `${days} days, ${hours} hours, ${minutes} minutes, ${seconds} seconds`;
+        }
+        return undefined;
+    }
+}
+DurationFormatPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DurationFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+DurationFormatPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DurationFormatPipe, name: "durationFormat", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DurationFormatPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'durationFormat',
+                    pure: false
+                }]
+        }] });
+
+class BaseListComponent {
+    constructor(route$, router$) {
+        this.route$ = route$;
+        this.router$ = router$;
+        this.items = null;
+        this.view = ListViewType.Tiles;
+        this.title = null;
+        this.actions = [];
+        this.loaderItems = [1, 2, 3, 4, 5];
+        this.page = 1;
+        this.pageSize = 20;
+        this.count = 0;
+        this.sort = '';
+        this.sortdir = '-';
+        this.search = '';
+        this.sortOptions = [];
+        this.metaItems = [];
+    }
+    ngOnDestroy() {
+        if (this.routeSub$) {
+            this.routeSub$.unsubscribe();
+        }
+    }
+    getViewActions() {
+        const actions = [
+            new ViewAction('search', null, null, Icons.Search, 'αναζήτηση'),
+            new ViewAction('refresh', null, null, Icons.Refresh, 'ανανέωση στοιχείων')
+        ];
+        if (this.newItemLink) {
+            actions.push(new RouterViewAction(Icons.Add, this.newItemLink, 'rightpane', 'προσθήκη νέας εγγραφής;'));
+        }
+        return of(actions);
+    }
+    ngOnInit() {
+        this.getViewActions().subscribe(actions => {
+            this.actions = actions || [];
+        });
+        this.metaItems = [
+            { key: 'count', icon: Icons.ItemsCount, text: 'παρακαλώ περιμένετε...' }
+        ];
+        // disabled external route changes monitoring due to sync issues - which is bad :) - refresh from url will not work
+        // until i come up with a solution...
+        this.routeSub$ = this.route$.queryParamMap.subscribe(params => {
+            if (params.keys.length === 0) {
+                return;
+            }
+            // 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');
+            // }
+        });
+        // just to sync params in query
+        this.setRouteParams(true);
+        this.load();
+    }
+    setRouteParams(locationChange = false) {
+        this.router$.navigate([], {
+            relativeTo: this.route$, queryParams: {
+                view: this.view,
+                page: this.page,
+                pagesize: this.pageSize,
+                search: this.search,
+                sort: this.sort,
+                dir: this.sortdir
+            }, queryParamsHandling: 'merge', skipLocationChange: locationChange
+        });
+    }
+    actionHandler($event) {
+        // console.log('BaseListComponent actionHandler', $event);
+        if ($event.key === 'refresh') {
+            this.refresh();
+        }
+    }
+    load() {
+        // console.log('BaseListComponent LOAD');
+        this.count = 0;
+        this.items = null;
+        this.loadItems().subscribe(result => {
+            this.count = result ? result.count : 0;
+            this.items = result?.items;
+            this.updateHeaderMeta();
+        }, err => {
+            this.count = 0;
+            this.items = null;
+            this.updateHeaderMeta();
+        });
+    }
+    updateHeaderMeta() {
+        const count = this.metaItems?.filter(m => m.key === 'count')[0];
+        if (count) {
+            this.count === 1 ? count.text = `${this.count} αποτέλεσμα` : count.text = `${this.count} αποτελέσματα`;
+        }
+    }
+    clear() {
+        this.count = 0;
+        this.page = 1;
+        this.items = null;
+        this.search = null;
+        this.setRouteParams();
+        this.load();
+    }
+    refresh() {
+        this.count = 0;
+        this.page = 1;
+        this.items = null;
+        this.setRouteParams();
+        this.load();
+    }
+    pageChanged(page) {
+        if (this.page !== page) {
+            this.page = page;
+            this.setRouteParams();
+            this.load();
+        }
+    }
+    pageSizeChanged(pageSize) {
+        if (this.pageSize !== pageSize) {
+            this.pageSize = pageSize;
+            this.page = 1;
+            this.setRouteParams();
+            this.refresh();
+        }
+    }
+    sortChanged(sort) {
+        // console.log('base-list sortChanged', sort);
+        if (this.sort !== sort) {
+            this.page = 1;
+            this.sort = sort;
+            this.setRouteParams();
+            this.refresh();
+        }
+    }
+    sortdirChanged(sortdir) {
+        if (this.sortdir !== sortdir) {
+            this.page = 1;
+            this.sortdir = sortdir;
+            this.setRouteParams();
+            this.refresh();
+        }
+    }
+    searchChanged(searchText) {
+        this.count = 0;
+        this.page = 1;
+        this.items = null;
+        this.search = searchText;
+        this.setRouteParams();
+        this.load();
+    }
+}
+BaseListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", 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: "13.3.9", type: BaseListComponent, selector: "ng-component", ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: BaseListComponent, decorators: [{
+            type: Component,
+            args: [{ template: '' }]
+        }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }]; } });
+
+const cssClassNames = {
+    backdrop: 'modal-backdrop',
+    show: 'show',
+    fade: 'fade',
+    modalOpen: 'modal-open'
+};
+const animationTime = {
+    backdrop: 150,
+    modal: 300,
+};
+
+/**
+ * Background layer for modals.
+ * Override class name to theme it.
+ * @see {@link cssClassNames}
+ * @internal
+ */
+class ModalBackdropComponent {
+    constructor(element, renderer) {
+        this.element = element;
+        this.renderer = renderer;
+        this.animationsEnabled = false;
+    }
+    ngOnInit() {
+        if (this.animationsEnabled) {
+            this.renderer.addClass(this.element.nativeElement, cssClassNames.fade);
+            this.reflow(this.element.nativeElement);
+        }
+        this.renderer.addClass(this.element.nativeElement, cssClassNames.show);
+    }
+    hide() {
+        this.renderer.removeClass(this.element.nativeElement, cssClassNames.show);
+        setTimeout(() => this.backdropLoader?.hide(), this.animationsEnabled ? animationTime.backdrop : 0);
+    }
+    reflow(element) {
+        ((bs) => bs)(element.offsetHeight);
+    }
+}
+ModalBackdropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalBackdropComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+ModalBackdropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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: "13.3.9", ngImport: i0, type: ModalBackdropComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-modal-backdrop',
+                    encapsulation: ViewEncapsulation.None,
+                    template: '',
+                    host: {
+                        class: cssClassNames.backdrop,
+                    },
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
+
+/**
+ * Modals option can be passed to a specific modal from {@link ModalService.show} or
+ * set globbaly using the injection token {@link MODAL_CONFIG_DEFAULT_OVERRIDE}.
+ * @remarks
+ * Modal specific options are merged with global options.
+ * @see {@link modalConfigDefaults} for defaults.
+ * @public
+ */
+class ModalOptions {
+}
+ModalOptions.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalOptions, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ModalOptions.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalOptions });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalOptions, decorators: [{
+            type: Injectable
+        }] });
+/**
+ * Default option values.
+ */
+const modalConfigDefaults = {
+    backdrop: true,
+    keyboard: true,
+    show: false,
+    ignoreBackdropClick: false,
+    class: '',
+    animated: true,
+    initialState: {},
+    closeInterceptor: void 0,
+};
+/**
+ * Use this injection token to set global options.
+ */
+const MODAL_CONFIG_DEFAULT_OVERRIDE = new InjectionToken('override-default-config');
+
+/**
+ * Modal container component.
+ * @remarks
+ * All dynamic content `TemplateRef` or `Component` case will be drawn inside this.
+ * You can override css classes to theme it {@link cssClassNames}
+ * @internal
+ */
+class ModalContainerComponent {
+    constructor(options, _element, renderer) {
+        this._element = _element;
+        this.renderer = renderer;
+        this.isShown = false;
+        this.animationsEnabled = false;
+        this.isModalHiding = false;
+        this.clickStartedInContent = false;
+        this.config = Object.assign({}, options);
+    }
+    ngOnInit() {
+        if (this.animationsEnabled) {
+            this.renderer.addClass(this._element.nativeElement, cssClassNames.fade);
+        }
+        this.renderer.setStyle(this._element.nativeElement, 'display', 'block');
+        setTimeout(() => {
+            this.isShown = true;
+            this.renderer.addClass(this._element.nativeElement, cssClassNames.show);
+        }, this.animationsEnabled ? animationTime.backdrop : 0);
+        if (this._element.nativeElement) {
+            this._element.nativeElement.focus();
+        }
+    }
+    onClickStarted(event) {
+        this.clickStartedInContent = event.target !== this._element.nativeElement;
+    }
+    onClickStop(event) {
+        const clickedInBackdrop = event.target === this._element.nativeElement && !this.clickStartedInContent;
+        if (this.config.ignoreBackdropClick || this.config.backdrop === 'static' || !clickedInBackdrop) {
+            this.clickStartedInContent = false;
+            return;
+        }
+        this.hide();
+    }
+    onPopState() {
+        this.hide();
+    }
+    onEsc(event) {
+        if (!this.isShown) {
+            return;
+        }
+        if (event.keyCode === 27 || event.key === 'Escape' || event.key === 'Esc') {
+            event.preventDefault();
+        }
+        if (this.config.keyboard && this.config.id === this.modalService?.getActiveModal().config.id) {
+            this.hide();
+        }
+    }
+    ngOnDestroy() {
+        if (this.isShown) {
+            this._hide();
+        }
+    }
+    hide(result) {
+        if (this.isModalHiding || !this.isShown) {
+            return;
+        }
+        if (this.config.closeInterceptor) {
+            this.config.closeInterceptor().then(() => this._hide(), () => undefined);
+            return;
+        }
+        this._hide(result);
+    }
+    _hide(result) {
+        this.isModalHiding = true;
+        this.renderer.removeClass(this._element.nativeElement, cssClassNames.show);
+        setTimeout(() => {
+            this.isShown = false;
+            this.modalService?.hide(this.config.id, result);
+            this.isModalHiding = false;
+        }, this.animationsEnabled ? animationTime.modal : 0);
+    }
+}
+ModalContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", 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: "13.3.9", 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: "13.3.9", ngImport: i0, type: ModalContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-modal-container',
+                    template: `
+    <div [class]="'modal-dialog' + (config.class ? ' ' + config.class : '')" role="document" focusTrap>
+      <div class="modal-content">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `,
+                    host: {
+                        class: 'modal',
+                        role: 'dialog',
+                        tabindex: '-1',
+                        '[attr.aria-modal]': 'true',
+                        '[attr.aria-labelledby]': 'config.ariaLabelledBy',
+                        '[attr.aria-describedby]': 'config.ariaDescribedby',
+                    },
+                }]
+        }], ctorParameters: function () { return [{ type: ModalOptions }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { onClickStarted: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }], onClickStop: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onPopState: [{
+                type: HostListener,
+                args: ['window:popstate']
+            }], onEsc: [{
+                type: HostListener,
+                args: ['window:keydown.esc', ['$event']]
+            }] } });
+
+/**
+ * Modal class.
+ * @remarks
+ * This is returned from {@link ModalService.show}.
+ * @public
+ */
+class Modal {
+    constructor() {
+        /**
+         * Hides the modal
+         * @param result - A result to the observers.
+         */
+        this.hide = () => void 0;
+        /**
+         * Sets new class to modal window.
+         */
+        this.setClass = () => void 0;
+    }
+}
+Modal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: Modal, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+Modal.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: Modal });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: Modal, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * A service for using modals.
+ *
+ * @public
+ */
+class ModalService {
+    constructor(clf, rendererFactory, document, modalDefaultOption) {
+        this.clf = clf;
+        this.document = document;
+        this.onBeforeShow = new Subject();
+        this.onShown = new Subject();
+        this.onBeforeHide = new Subject();
+        this.onHidden = new Subject();
+        this.loaders = [];
+        this.modalsCount = 0;
+        this.initialPadding = '0px';
+        this.backdropLoader = this.clf.createLoader();
+        this.defaultConfig = { ...modalConfigDefaults, ...modalDefaultOption };
+        this.renderer = rendererFactory.createRenderer(null, null);
+    }
+    ngOnDestroy() {
+        this.loaders.forEach((loader) => loader.instance?.hide());
+    }
+    /**
+     * Opens a new modal.
+     *
+     * @param content - `Component` or `TemplateRef` type.
+     * @param config - Specific {@link ModalOptions | options}  for this modal. Global and specific options are merged.
+     * @returns An instance of {@link Modal}
+     */
+    show(content, config) {
+        this.modalsCount++;
+        const combinedConfig = { ...this.defaultConfig, ...config };
+        combinedConfig.id = config?.id || new Date().getUTCMilliseconds();
+        this.createLoaders();
+        this.addBodyPadding();
+        if (this.modalsCount === 1) {
+            this.renderer.addClass(this.document.body, cssClassNames.modalOpen);
+        }
+        this.showBackdrop(combinedConfig);
+        return this.showModal(content, combinedConfig);
+    }
+    /**
+     * Hide an active modal.
+     * @param id - Id of modal to hide. If not provided all active modals are hidden.
+     * @param result - A result to be sent to observers.
+     */
+    hide(id, result) {
+        if (this.modalsCount === 1 || id == null) {
+            this.hideBackdrop();
+            this.revertScrollbar();
+            this.renderer.removeClass(this.document.body, cssClassNames.modalOpen);
+        }
+        this.modalsCount = this.modalsCount >= 1 && id != null ? this.modalsCount - 1 : 0;
+        setTimeout(() => {
+            this.hideModal(id, result);
+            this.removeLoaders(id);
+        }, 
+        //Bug
+        //Should use combined config but for the moment is not possible to pass it this parameter.
+        //If config is an instance variable then every newly opened modal will override the config
+        //resulting in opened modals to get a new configuration
+        this.defaultConfig.animated ? animationTime.backdrop : 0);
+    }
+    getActiveModal() {
+        return this.loaders[this.modalsCount - 1].instance;
+    }
+    showModal(content, combinedConfig) {
+        const modalLoader = this.loaders[this.loaders.length - 1];
+        if (combinedConfig && combinedConfig.providers) {
+            combinedConfig.providers.forEach((provider) => modalLoader.provide(provider));
+        }
+        const modal = new Modal();
+        const modalContainerRef = modalLoader
+            .provide({ provide: ModalOptions, useValue: combinedConfig })
+            .provide({ provide: Modal, useValue: modal })
+            .attach(ModalContainerComponent)
+            .to('body');
+        modal.setClass = (newClass) => {
+            if (modalContainerRef.instance) {
+                modalContainerRef.instance.config.class = newClass;
+            }
+        };
+        modal.onBeforeHide = new Subject();
+        modal.onHidden = new Subject();
+        this.copyEvent(modalLoader.onBeforeHide, modal.onBeforeHide);
+        this.copyEvent(modalLoader.onHidden, modal.onHidden);
+        modalContainerRef.show({
+            content,
+            animationsEnabled: combinedConfig.animated,
+            initialState: combinedConfig.initialState,
+            modalService: this,
+            id: combinedConfig.id,
+        });
+        if (modalContainerRef.instance) {
+            modalContainerRef.instance.level = this.modalsCount;
+            modal.content = modalLoader.getInnerComponent();
+            modal.id = modalContainerRef.instance.config?.id;
+            modal.hide = (res) => modalContainerRef.instance?.hide(res);
+        }
+        return modal;
+    }
+    hideModal(id, result) {
+        if (id != null) {
+            const indexToRemove = this.loaders.findIndex((loader) => loader.instance?.config.id === id);
+            const modalLoader = this.loaders[indexToRemove];
+            if (modalLoader) {
+                modalLoader.hide(id, result);
+            }
+        }
+        else {
+            this.loaders.forEach((loader) => {
+                if (loader.instance) {
+                    loader.hide(loader.instance.config.id);
+                }
+            });
+        }
+    }
+    showBackdrop(combinedConfig) {
+        const isBackdropEnabled = combinedConfig.backdrop === true || combinedConfig.backdrop === 'static';
+        const isBackdropInDOM = this.backdropRef != null;
+        if (isBackdropEnabled && !isBackdropInDOM) {
+            this.backdropLoader
+                .attach(ModalBackdropComponent)
+                .to('body')
+                .show({ animationsEnabled: combinedConfig.animated, backdropLoader: this.backdropLoader });
+            this.backdropRef = this.backdropLoader.componentRef;
+        }
+    }
+    hideBackdrop() {
+        if (!this.backdropRef) {
+            return;
+        }
+        this.backdropRef.instance.hide();
+        this.backdropRef = void 0;
+    }
+    removeLoaders(id) {
+        if (id != null) {
+            const indexToRemove = this.loaders.findIndex((loader) => loader.instance?.config.id === id);
+            if (indexToRemove >= 0) {
+                this.loaders.splice(indexToRemove, 1);
+                this.loaders.forEach((loader, i) => {
+                    if (loader.instance) {
+                        loader.instance.level = i + 1;
+                    }
+                });
+            }
+        }
+        else {
+            this.loaders.splice(0, this.loaders.length);
+        }
+    }
+    addBodyPadding() {
+        if (this.modalsCount === 1) {
+            const width = this.getScrollbarWidth();
+            if (this.isScrollBarPresent(width)) {
+                this.initialPadding = this.document.body.style.paddingRight;
+                const actualPadding = parseFloat(window.getComputedStyle(this.document.body).paddingRight);
+                this.document.body.style.paddingRight = `${actualPadding + width}px`;
+            }
+        }
+    }
+    revertScrollbar() {
+        this.document.body.style.paddingRight = this.initialPadding;
+    }
+    getScrollbarWidth() {
+        const measurer = this.document.createElement('div');
+        measurer.className = 'modal-scrollbar-measure';
+        const body = this.document.body;
+        body.appendChild(measurer);
+        const width = measurer.getBoundingClientRect().width - measurer.clientWidth;
+        body.removeChild(measurer);
+        return width;
+    }
+    isScrollBarPresent(scrollbarWidth) {
+        const rect = this.document.body.getBoundingClientRect();
+        const bodyToViewportGap = window.innerWidth - (rect.left + rect.right);
+        const uncertainty = 0.1 * scrollbarWidth;
+        return bodyToViewportGap >= scrollbarWidth - uncertainty;
+    }
+    createLoaders() {
+        const loader = this.clf.createLoader();
+        this.copyEvent(loader.onBeforeShow, this.onBeforeShow);
+        this.copyEvent(loader.onShown, this.onShown);
+        this.copyEvent(loader.onBeforeHide, this.onBeforeHide);
+        this.copyEvent(loader.onHidden, this.onHidden);
+        this.loaders.push(loader);
+    }
+    copyEvent(from, to) {
+        from.subscribe((data) => {
+            to.next(data);
+        });
+    }
+}
+ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", 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: "13.3.9", ngImport: i0, type: ModalService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", 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]
+                }] }]; } });
+
+class IndiceComponentsModule {
+    // tslint:disable-next-line:typedef
+    static forRoot() {
+        return {
+            ngModule: IndiceComponentsModule,
+            providers: [ToasterService]
+        };
+    }
+}
+IndiceComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: IndiceComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+IndiceComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: IndiceComponentsModule, declarations: [
+        // diectives
+        ClickOutsideDirective,
+        DynamicComponentHostDirective,
+        // controls
+        DropDownMenuComponent,
+        PagerComponent,
+        ListViewComponent,
+        ListColumnComponent,
+        ListTileComponent,
+        ListDetailsSectionComponent,
+        ListViewEmptyStateComponent,
+        SkeletonLoaderComponent,
+        CollapsiblePanelComponent,
+        KpiTileComponent,
+        SidePaneComponent,
+        DatepickerComponent,
+        AvatarInitialsComponent,
+        ToggleComponent,
+        // Toaster
+        ToasterContainerComponent,
+        ToasterComponent,
+        // shell layout
+        ShellLayoutComponent,
+        ShellHeaderComponent,
+        ShellFooterComponent,
+        // view layouts
+        ViewLayoutComponent,
+        SideViewLayoutComponent,
+        ModelViewLayoutComponent,
+        FormLayoutComponent,
+        // pages (common)
+        AuthCallbackComponent,
+        AuthRenewComponent,
+        LoggedOutComponent,
+        ErrorComponent,
+        PageNotFoundComponent,
+        UnauthorizedComponent,
+        // pipes
+        AddressPipe,
+        DurationFormatPipe,
+        NavLinksListComponent,
+        NotificationsIndicatorComponent], imports: [CommonModule,
+        RouterModule,
+        IndiceAuthModule], exports: [ClickOutsideDirective,
+        DropDownMenuComponent,
+        PagerComponent,
+        ListViewComponent,
+        ListColumnComponent,
+        ListTileComponent,
+        ListDetailsSectionComponent,
+        ListViewEmptyStateComponent,
+        KpiTileComponent,
+        SkeletonLoaderComponent,
+        ShellLayoutComponent,
+        ShellHeaderComponent,
+        ShellFooterComponent,
+        ViewLayoutComponent,
+        SideViewLayoutComponent,
+        ModelViewLayoutComponent,
+        FormLayoutComponent,
+        AuthCallbackComponent,
+        AuthRenewComponent,
+        LoggedOutComponent,
+        ErrorComponent,
+        PageNotFoundComponent,
+        UnauthorizedComponent,
+        AddressPipe,
+        DurationFormatPipe,
+        CollapsiblePanelComponent,
+        SidePaneComponent,
+        DatepickerComponent,
+        ToasterContainerComponent,
+        ToasterComponent,
+        AvatarInitialsComponent,
+        ToggleComponent] });
+IndiceComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: IndiceComponentsModule, imports: [[
+            CommonModule,
+            RouterModule,
+            IndiceAuthModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: IndiceComponentsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        // diectives
+                        ClickOutsideDirective,
+                        DynamicComponentHostDirective,
+                        // controls
+                        DropDownMenuComponent,
+                        PagerComponent,
+                        ListViewComponent,
+                        ListColumnComponent,
+                        ListTileComponent,
+                        ListDetailsSectionComponent,
+                        ListViewEmptyStateComponent,
+                        SkeletonLoaderComponent,
+                        CollapsiblePanelComponent,
+                        KpiTileComponent,
+                        SidePaneComponent,
+                        DatepickerComponent,
+                        AvatarInitialsComponent,
+                        ToggleComponent,
+                        // Toaster
+                        ToasterContainerComponent,
+                        ToasterComponent,
+                        // shell layout
+                        ShellLayoutComponent,
+                        ShellHeaderComponent,
+                        ShellFooterComponent,
+                        // view layouts
+                        ViewLayoutComponent,
+                        SideViewLayoutComponent,
+                        ModelViewLayoutComponent,
+                        FormLayoutComponent,
+                        // pages (common)
+                        AuthCallbackComponent,
+                        AuthRenewComponent,
+                        LoggedOutComponent,
+                        ErrorComponent,
+                        PageNotFoundComponent,
+                        UnauthorizedComponent,
+                        // pipes
+                        AddressPipe,
+                        DurationFormatPipe,
+                        NavLinksListComponent,
+                        NotificationsIndicatorComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        RouterModule,
+                        IndiceAuthModule
+                    ],
+                    exports: [
+                        ClickOutsideDirective,
+                        DropDownMenuComponent,
+                        PagerComponent,
+                        ListViewComponent,
+                        ListColumnComponent,
+                        ListTileComponent,
+                        ListDetailsSectionComponent,
+                        ListViewEmptyStateComponent,
+                        KpiTileComponent,
+                        SkeletonLoaderComponent,
+                        ShellLayoutComponent,
+                        ShellHeaderComponent,
+                        ShellFooterComponent,
+                        ViewLayoutComponent,
+                        SideViewLayoutComponent,
+                        ModelViewLayoutComponent,
+                        FormLayoutComponent,
+                        AuthCallbackComponent,
+                        AuthRenewComponent,
+                        LoggedOutComponent,
+                        ErrorComponent,
+                        PageNotFoundComponent,
+                        UnauthorizedComponent,
+                        AddressPipe,
+                        DurationFormatPipe,
+                        CollapsiblePanelComponent,
+                        SidePaneComponent,
+                        DatepickerComponent,
+                        ToasterContainerComponent,
+                        ToasterComponent,
+                        AvatarInitialsComponent,
+                        ToggleComponent
+                    ]
+                }]
+        }] });
+
+// Public API Surface of @indice/ng-components
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { APP_LINKS, APP_NOTIFICATIONS, 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, NavLinksListComponent, NotificationNavLink, 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.mjs.map